/* [project]/app/globals.css [app-client] (css) */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-white: #fff;
    --spacing: .25rem;
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --radius-md: .375rem;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-mo-red: #fe5155;
    --color-pc-primary: #005bb9;
    --color-pc-active: #126fe8;
    --color-pc-count: #007bff;
    --color-pc-text: #262626;
    --color-pc-border: #e9e9e9;
    --color-pc-surface: #fbfbfb;
    --color-pc-surface-gray: #efefef;
    --color-pc-green: #70c636;
    --color-pc-red: #fe5155;
    --color-pc-orange: #ff9800;
    --font-pretendard: "Pretendard Variable", "Pretendard", -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  body {
    color: var(--color-pc-text);
    font-family: var(--font-pretendard);
    background: #fff;
  }

  button {
    -webkit-tap-highlight-color: transparent;
  }
}

@layer components;

@layer utilities {
  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .hidden {
    display: none;
  }

  .table {
    display: table;
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-full {
    height: 100%;
  }

  .min-h-dvh {
    min-height: 100dvh;
  }

  .min-h-full {
    min-height: 100%;
  }

  .w-48 {
    width: calc(var(--spacing) * 48);
  }

  .flex-1 {
    flex: 1;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .flex-col {
    flex-direction: column;
  }

  .items-center {
    align-items: center;
  }

  .justify-center {
    justify-content: center;
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-pc-border {
    border-color: var(--color-pc-border);
  }

  .bg-pc-surface {
    background-color: var(--color-pc-surface);
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

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

  .font-mono {
    font-family: var(--font-mono);
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .text-mo-red {
    color: var(--color-mo-red);
  }

  .text-pc-active {
    color: var(--color-pc-active);
  }

  .text-pc-count {
    color: var(--color-pc-count);
  }

  .text-pc-green {
    color: var(--color-pc-green);
  }

  .text-pc-orange {
    color: var(--color-pc-orange);
  }

  .text-pc-primary {
    color: var(--color-pc-primary);
  }

  .text-pc-red {
    color: var(--color-pc-red);
  }

  .text-pc-text {
    color: var(--color-pc-text);
  }

  .text-pc-text\/50 {
    color: #26262680;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-pc-text\/50 {
      color: color-mix(in oklab, var(--color-pc-text) 50%, transparent);
    }
  }

  .text-pc-text\/60 {
    color: #26262699;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-pc-text\/60 {
      color: color-mix(in oklab, var(--color-pc-text) 60%, transparent);
    }
  }

  .text-pc-text\/70 {
    color: #262626b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-pc-text\/70 {
      color: color-mix(in oklab, var(--color-pc-text) 70%, transparent);
    }
  }

  .text-white\/90 {
    color: #ffffffe6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/90 {
      color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }

  .underline {
    text-decoration-line: underline;
  }

  .underline-offset-2 {
    text-underline-offset: 2px;
  }

  .underline-offset-4 {
    text-underline-offset: 4px;
  }

  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus\:border-pc-active:focus {
    border-color: var(--color-pc-active);
  }

  .disabled\:bg-pc-surface-gray:disabled {
    background-color: var(--color-pc-surface-gray);
  }
}

@font-face {
  font-family: HakgyoansimNadeuri;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/HakgyoansimNadeuriOTFL.woff2") format("woff2"), url("/fonts/HakgyoansimNadeuriOTFL.woff") format("woff");
}

@font-face {
  font-family: HakgyoansimNadeuri;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/HakgyoansimNadeuriOTFB.woff2") format("woff2"), url("/fonts/HakgyoansimNadeuriOTFB.woff") format("woff");
}

@font-face {
  font-family: Pretendard Variable;
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
  src: url("/fonts/PretendardVariable.woff2") format("woff2-variations");
}

@font-face {
  font-family: Raleway;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/Raleway-Bold.woff") format("woff");
}

:root {
  --size-5: -1.38vw;
  --size-6: -1.66vw;
  --size-7: -1.94vw;
  --size-8: -2.22vw;
  --size-9: -2.5vw;
  --size-11: -3.05vw;
  --size-14: -3.88vw;
  --size-16: -4.44vw;
  --size-20: -5.55vw;
  --size-23: -6.38vw;
  --size-38: -10.55vw;
  --size-40: -11.11vw;
  --size-110: -30.55vw;
  --size1: .27vw;
  --size2: .55vw;
  --size3: .83vw;
  --size4: 1.11vw;
  --size5: 1.38vw;
  --size6: 1.66vw;
  --size7: 1.94vw;
  --size8: 2.22vw;
  --size9: 2.5vw;
  --size10: 2.77vw;
  --size11: 3.05vw;
  --size12: 3.33vw;
  --size13: 3.61vw;
  --size14: 3.88vw;
  --size15: 4.16vw;
  --size16: 4.44vw;
  --size17: 4.72vw;
  --size18: 5vw;
  --size19: 5.27vw;
  --size20: 5.55vw;
  --size21: 5.83vw;
  --size23: 6.38vw;
  --size24: 6.66vw;
  --size25: 6.94vw;
  --size26: 7.22vw;
  --size27: 7.5vw;
  --size28: 7.77vw;
  --size29: 8.05vw;
  --size30: 8.33vw;
  --size32: 8.88vw;
  --size36: 10vw;
  --size37: 10.27vw;
  --size38: 10.55vw;
  --size40: 11.11vw;
  --size41: 11.38vw;
  --size42: 11.66vw;
  --size43: 11.94vw;
  --size44: 12.22vw;
  --size46: 12.77vw;
  --size47: 13.05vw;
  --size48: 13.33vw;
  --size50: 13.88vw;
  --size51: 14.16vw;
  --size54: 15vw;
  --size55: 15.27vw;
  --size56: 15.55vw;
  --size60: 16.66vw;
  --size64: 17.77vw;
  --size67: 18.61vw;
  --size68: 18.88vw;
  --size72: 20vw;
  --size75: 20.83vw;
  --size76: 21.11vw;
  --size80: 22.22vw;
  --size84: 23.33vw;
  --size86: 23.88vw;
  --size88: 24.44vw;
  --size90: 25vw;
  --size96: 26.66vw;
  --size100: 27.77vw;
  --size108: 30vw;
  --size116: 32.22vw;
  --size118: 32.77vw;
  --size120: 33.33vw;
  --size128: 35.55vw;
  --size130: 36.11vw;
  --size136: 37.77vw;
  --size137: 38.05vw;
  --size141: 39.16vw;
  --size160: 44.44vw;
  --size162: 45vw;
  --size174: 48.33vw;
  --size187: 51.94vw;
  --size197: 54.72vw;
  --size210: 58.33vw;
  --size220: 61.11vw;
  --size287: 79.72vw;
  --size319: 88.61vw;
  --size495: 137.5vw;
}

@media (min-width: 480px) {
  :root {
    --size-5: calc(-5px * 4 / 3);
    --size-6: calc(-6px * 4 / 3);
    --size-7: calc(-7px * 4 / 3);
    --size-8: calc(-8px * 4 / 3);
    --size-9: calc(-9px * 4 / 3);
    --size-11: calc(-11px * 4 / 3);
    --size-14: calc(-14px * 4 / 3);
    --size-16: calc(-16px * 4 / 3);
    --size-20: calc(-20px * 4 / 3);
    --size-23: calc(-23px * 4 / 3);
    --size-38: calc(-38px * 4 / 3);
    --size-40: calc(-40px * 4 / 3);
    --size-110: calc(-110px * 4 / 3);
    --size1: calc(1px * 4 / 3);
    --size2: calc(2px * 4 / 3);
    --size3: calc(3px * 4 / 3);
    --size4: calc(4px * 4 / 3);
    --size5: calc(5px * 4 / 3);
    --size6: calc(6px * 4 / 3);
    --size7: calc(7px * 4 / 3);
    --size8: calc(8px * 4 / 3);
    --size9: calc(9px * 4 / 3);
    --size10: calc(10px * 4 / 3);
    --size11: calc(11px * 4 / 3);
    --size12: calc(12px * 4 / 3);
    --size13: calc(13px * 4 / 3);
    --size14: calc(14px * 4 / 3);
    --size15: calc(15px * 4 / 3);
    --size16: calc(16px * 4 / 3);
    --size17: calc(17px * 4 / 3);
    --size18: calc(18px * 4 / 3);
    --size19: calc(19px * 4 / 3);
    --size20: calc(20px * 4 / 3);
    --size21: calc(21px * 4 / 3);
    --size23: calc(23px * 4 / 3);
    --size24: calc(24px * 4 / 3);
    --size25: calc(25px * 4 / 3);
    --size26: calc(26px * 4 / 3);
    --size27: calc(27px * 4 / 3);
    --size28: calc(28px * 4 / 3);
    --size29: calc(29px * 4 / 3);
    --size30: calc(30px * 4 / 3);
    --size32: calc(32px * 4 / 3);
    --size36: calc(36px * 4 / 3);
    --size37: calc(37px * 4 / 3);
    --size38: calc(38px * 4 / 3);
    --size40: calc(40px * 4 / 3);
    --size41: calc(41px * 4 / 3);
    --size42: calc(42px * 4 / 3);
    --size43: calc(43px * 4 / 3);
    --size44: calc(44px * 4 / 3);
    --size46: calc(46px * 4 / 3);
    --size47: calc(47px * 4 / 3);
    --size48: calc(48px * 4 / 3);
    --size50: calc(50px * 4 / 3);
    --size51: calc(51px * 4 / 3);
    --size54: calc(54px * 4 / 3);
    --size55: calc(55px * 4 / 3);
    --size56: calc(56px * 4 / 3);
    --size60: calc(60px * 4 / 3);
    --size64: calc(64px * 4 / 3);
    --size67: calc(67px * 4 / 3);
    --size68: calc(68px * 4 / 3);
    --size72: calc(72px * 4 / 3);
    --size75: calc(75px * 4 / 3);
    --size76: calc(76px * 4 / 3);
    --size80: calc(80px * 4 / 3);
    --size84: calc(84px * 4 / 3);
    --size86: calc(86px * 4 / 3);
    --size88: calc(88px * 4 / 3);
    --size90: calc(90px * 4 / 3);
    --size96: calc(96px * 4 / 3);
    --size100: calc(100px * 4 / 3);
    --size108: calc(108px * 4 / 3);
    --size116: calc(116px * 4 / 3);
    --size118: calc(118px * 4 / 3);
    --size120: calc(120px * 4 / 3);
    --size128: calc(128px * 4 / 3);
    --size130: calc(130px * 4 / 3);
    --size136: calc(136px * 4 / 3);
    --size137: calc(137px * 4 / 3);
    --size141: calc(141px * 4 / 3);
    --size160: calc(160px * 4 / 3);
    --size162: calc(162px * 4 / 3);
    --size174: calc(174px * 4 / 3);
    --size187: calc(187px * 4 / 3);
    --size197: calc(197px * 4 / 3);
    --size210: calc(210px * 4 / 3);
    --size220: calc(220px * 4 / 3);
    --size287: calc(287px * 4 / 3);
    --size319: calc(319px * 4 / 3);
    --size495: calc(495px * 4 / 3);
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

/* [project]/app/pc.css [app-client] (css) */
.pc_zone {
  color: #262626;
  background: #fff;
  flex-direction: column;
  min-height: 100dvh;
  font-family: Pretendard Variable, Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  display: flex;
}

.pc_zone a {
  color: inherit;
  font-size: inherit;
  text-decoration: none;
}

.pc_zone span {
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
}

.pc_zone input {
  background: none;
  border: none;
  outline: none;
}

.pc_zone input::placeholder {
  color: #d0d0d0;
}

.pc_zone button {
  cursor: pointer;
  background: none;
  border: none;
}

.pc_zone button:disabled, .pc_zone button[disabled] {
  cursor: default;
  opacity: .4;
}

.pc_zone img {
  object-fit: cover;
  max-width: 100%;
}

.pc_zone li {
  list-style: none;
}

.pc_zone table {
  border-collapse: collapse;
}

.pc_zone th, .pc_zone td {
  vertical-align: middle;
}

.pc_zone .w120px {
  width: 120px !important;
}

.pc_zone .w100px {
  width: 100px !important;
}

.pc_zone .w90px {
  width: 90px !important;
}

.pc_zone .text_left {
  text-align: left !important;
}

.pc_zone .text_center {
  text-align: center !important;
}

.pc_zone .text_right {
  text-align: right !important;
}

.pc_zone .regular {
  font-weight: 400 !important;
}

.pc_zone .bold {
  font-weight: 700 !important;
}

.pc_zone .fc_pale_gray {
  color: #26262666 !important;
}

.pc_zone .fc_gray {
  color: #26262680 !important;
}

.pc_zone .d_flex {
  display: flex !important;
}

.pc_zone .f_auto {
  flex: auto !important;
}

.pc_zone .btn_wrap {
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  display: flex;
}

.pc_zone .btn {
  border-radius: 6px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-width: fit-content;
  display: flex;
}

.pc_zone .btn.md {
  height: 40px;
  padding: 9px 20px;
}

.pc_zone .btn.lg {
  width: 160px;
  max-width: 160px;
  height: 48px;
}

.pc_zone .btn.icon {
  background-position: center;
  background-repeat: no-repeat;
  width: 32px;
  height: 32px;
}

.pc_zone .btn.icon.sm {
  width: 16px;
  height: 16px;
}

.pc_zone .btn.play {
  background-image: url("/pc/img/ic_circle_spicker.svg");
}

.pc_zone .btn.play.on {
  background-image: url("/pc/img/ic_circle_pause_navy.svg");
}

.pc_zone .btn.sm.star {
  background-image: url("/pc/img/ic_star_off.svg");
}

.pc_zone .btn.sm.star.on {
  background-image: url("/pc/img/ic_star_on.svg");
}

.pc_zone .btn.sm.question {
  background-image: url("/pc/img/ic_circle_question_off.svg");
}

.pc_zone .btn.sm.question.on {
  background-image: url("/pc/img/ic_circle_question_on.svg");
}

.pc_zone .btn.blue {
  color: #fff;
  background: #0575e6;
  font-weight: 700;
}

.pc_zone .btn.deep_blue {
  color: #fff;
  background: #005bb9;
  font-weight: 700;
}

.pc_zone .btn.white {
  color: #000;
  background: #fff;
  border: 1px solid #e9e9e9;
  font-weight: 700;
}

.pc_zone .btn.navy {
  color: #fff;
  background: #003975;
  font-weight: 700;
}

.pc_zone .btn.gray {
  color: #fff;
  background: gray;
  font-weight: 700;
}

.pc_zone .input_custom {
  border: 1px solid #eee;
  border-radius: 6px;
  flex-direction: column;
  padding: 9px 15px;
  display: flex;
}

.pc_zone .input_custom label {
  color: #1c4f40;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.pc_zone .input_custom input {
  height: 24px;
  margin-top: -2px;
  font-size: 16px;
}

.pc_zone .input_list {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.pc_zone .select_custom {
  appearance: none;
  background: #fff url("/pc/img/ic_arrow.svg") 168px / 24px no-repeat;
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  width: 200px;
  height: 40px;
  padding-left: 12px;
  padding-right: 36px;
  font-size: 12px;
  font-weight: 700;
}

.pc_zone .select_custom.lg {
  background: url("/pc/img/ic_arrow.svg") 157px / 24px no-repeat;
  height: 60px;
  padding: 18px 41px 18px 19px;
  font-size: 24px;
  font-weight: 700;
}

.pc_zone .select_custom.w120px {
  background-position: 88px;
}

.pc_zone .checkbox_custom input {
  display: none;
}

.pc_zone .checkbox_custom label {
  background-image: url("/pc/img/ic_checkbox_default.svg");
  background-position: 0;
  background-repeat: no-repeat;
  background-size: 20px;
  padding-left: 28px;
  line-height: 20px;
  display: inline-block;
}

.pc_zone .checkbox_custom input:checked ~ label {
  background-image: url("/pc/img/ic_checkbox_checked.svg");
}

.pc_zone .checkbox_custom .mark {
  background-image: url("/pc/img/ic_checkbox_default.svg");
  background-position: 0;
  background-repeat: no-repeat;
  background-size: 20px;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.pc_zone .checkbox_custom input:checked ~ .mark {
  background-image: url("/pc/img/ic_checkbox_checked.svg");
}

.pc_zone .checkbox_custom_wrap {
  flex-wrap: wrap;
  gap: 10px 40px;
  display: flex;
}

.pc_zone .radio_custom.btn input {
  display: none;
}

.pc_zone .radio_custom.btn label {
  cursor: pointer;
  border: 1px solid #70c636;
  border-radius: 6px;
  padding: 8px 23px;
  font-weight: 700;
  line-height: 1.57;
  display: inline-block;
}

.pc_zone .radio_custom.btn input:checked ~ label {
  color: #fff;
  background: #70c636;
}

.pc_zone .radio_custom.btn.green label {
  color: #70c636;
  border-color: #70c636;
}

.pc_zone .radio_custom.btn.green input:checked ~ label {
  background: #70c636;
}

.pc_zone .radio_custom.btn.red label {
  color: #fe5155;
  border-color: #fe5155;
}

.pc_zone .radio_custom.btn.red input:checked ~ label {
  background: #fe5155;
}

.pc_zone .radio_custom.btn.orange label {
  color: #ff9800;
  border-color: #ff9800;
}

.pc_zone .radio_custom.btn.orange input:checked ~ label {
  background: #ff9800;
}

.pc_zone .radio_custom.btn.gray {
  background: none !important;
}

.pc_zone .radio_custom.btn.gray label {
  color: #777;
  border-color: #777;
}

.pc_zone .radio_custom.btn.gray input:checked ~ label {
  background: #777;
}

.pc_zone .radio_custom_btn_wrap {
  flex-wrap: wrap;
  gap: 10px;
  width: fit-content;
  display: flex;
}

.pc_zone .file_custom_wrap {
  display: flex;
}

.pc_zone .file_custom_wrap .file_name {
  background: #efefef;
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  padding: 8px 12px;
  display: none;
}

.pc_zone .file_custom_wrap .file_name.on {
  display: flex;
}

.pc_zone .file_custom_wrap .file_custom {
  display: none;
}

.pc_zone .file_custom_wrap .file_custom.on {
  display: flex;
}

.pc_zone .file_custom {
  cursor: pointer;
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  width: 120px;
}

.pc_zone .file_custom input {
  display: none;
}

.pc_zone .file_custom span {
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 100%;
  height: 100%;
  font-size: 12px;
  font-weight: 700;
  display: flex;
}

.pc_zone .filter_wrap {
  align-items: center;
  gap: 40px;
  padding-right: 20px;
  display: flex;
}

.pc_zone .filter_wrap .btn_wrap {
  flex-wrap: nowrap;
  gap: 8px;
  margin-left: auto;
}

.pc_zone .filter_wrap .checkbox_custom input {
  display: none;
}

.pc_zone .filter_wrap .checkbox_custom label {
  cursor: pointer;
  background-image: none;
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 8px 13px 8px 12px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
}

.pc_zone .filter_wrap .checkbox_custom input:checked ~ label {
  color: #fff;
  background: #126fe8;
  border-color: #126fe8;
}

.pc_zone .filter_wrap .filter_tit {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  display: block;
}

.pc_zone .filter_wrap .filter_con {
  gap: 8px;
  display: flex;
}

.pc_zone .filter_result_wrap {
  background: #f2f2f233;
  border-radius: 6px;
  margin-top: 24px;
  padding: 20px;
}

.pc_zone .feedback_wrap {
  align-items: center;
  gap: 40px;
  display: flex;
}

.pc_zone .feedback_wrap .btn_wrap {
  flex-wrap: nowrap;
  gap: 12px;
  margin-left: auto;
}

.pc_zone .feedback_wrap .checkbox_custom input {
  display: none;
}

.pc_zone .feedback_wrap .checkbox_custom label {
  cursor: pointer;
  background-image: none;
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 8px 13px 8px 12px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
}

.pc_zone .feedback_wrap .checkbox_custom input:checked ~ label {
  color: #fff;
  background: #126fe8;
  border-color: #126fe8;
}

.pc_zone .feedback_wrap .feedback_sec_tit {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  display: block;
}

.pc_zone .feedback_wrap .feedback_sec_con {
  gap: 8px;
  display: flex;
}

.pc_zone .feedback_tit {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.375;
  display: block;
}

.pc_zone .datepicker {
  background: url("/pc/img/ic_calendar.svg") 180px / 24px no-repeat;
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  width: 220px;
  height: 60px;
  padding: 18px 41px 18px 19px;
  font-size: 24px;
  font-weight: 700;
}

.pc_zone .datepicker_wrap label {
  margin-right: 24px;
  font-weight: 700;
}

.pc_zone .tab_wrap .tab_tit_wrap ul {
  gap: 24px;
  display: flex;
}

.pc_zone .tab_wrap .tab_tit_wrap li button {
  color: #26262666;
  border-bottom: 3px solid #0000;
  padding-bottom: 6px;
  font-size: 24px;
  font-weight: 700;
  line-height: .91;
}

.pc_zone .tab_wrap .tab_tit_wrap li.on button {
  color: #126fe8;
  border-bottom-color: #126fe8;
}

.pc_zone .tab_wrap .tab_con_wrap {
  padding-top: 17px;
}

.pc_zone .tab_wrap .tab_con_wrap .tab_con {
  display: none;
}

.pc_zone .tab_wrap .tab_con_wrap .tab_con.on {
  display: block;
}

.pc_zone .page_tit_wrap {
  padding-bottom: 24px;
}

.pc_zone .page_tit {
  font-size: 28px;
  font-weight: 700;
  line-height: .78;
}

.pc_zone .light_wrap {
  background: #fbfbfb;
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  padding: 13px 23px 13px 13px;
  display: flex;
}

.pc_zone .light_wrap > div {
  align-items: center;
  gap: 24px;
  display: flex;
}

.pc_zone .light_wrap div .tit {
  font-weight: 700;
}

.pc_zone .light_wrap .info_wrap, .pc_zone .light_wrap .info_wrap div {
  gap: 0;
  display: flex;
}

.pc_zone .light_wrap .info_wrap div:before {
  content: "";
  background: #d9d9d9;
  width: 1px;
  height: 12px;
  margin-left: 12px;
  margin-right: 12px;
  display: block;
}

.pc_zone .light_wrap .info_wrap div:first-child {
  margin-left: 0;
}

.pc_zone .light_wrap .info_wrap div:first-child:before {
  display: none;
}

.pc_zone .light_wrap .right_wrap {
  gap: 12px;
}

.pc_zone .light_wrap .right_wrap .btn_wrap {
  gap: 12px;
  margin-top: 0;
}

.pc_zone .light_wrap .right_wrap .btn_wrap .btn {
  width: 140px;
  min-width: 140px;
}

.pc_zone .light_wrap .right_wrap .btn_wrap .btn_send {
  width: 60px;
  min-width: 60px;
  padding-left: 0;
  padding-right: 0;
}

.pc_zone .light_wrap .right_wrap .btn_wrap div .btn {
  min-width: 24px;
}

.pc_zone .light_wrap .right_wrap .btn_wrap .record_after_wrap {
  width: 140px;
}

.pc_zone .light_wrap .right_wrap .btn_wrap .record_after_wrap .btn {
  white-space: nowrap;
  width: 80px;
  padding-left: 0;
  padding-right: 0;
}

.pc_zone .light_wrap .right_wrap .btn_wrap .record_after_wrap .btn:first-child {
  max-width: 57px;
}

.pc_zone .light_wrap .right_wrap .btn_wrap .record_wrap, .pc_zone .light_wrap .right_wrap .btn_wrap .record_complate_wrap, .pc_zone .light_wrap .right_wrap .btn_wrap .record_play_wrap, .pc_zone .light_wrap .right_wrap .btn_wrap .send_ing_wrap, .pc_zone .light_wrap .right_wrap .btn_wrap .send_complate_wrap {
  width: 140px;
}

.pc_zone .record_step_wrap, .pc_zone .record_step_wrap div {
  align-items: center;
}

.pc_zone .record_step_wrap .btn.md {
  font-size: 12px;
}

.pc_zone .record_step_wrap .record_wrap {
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  gap: 4px;
  width: 120px;
  height: 40px;
  padding: 7px 15px 7px 7px;
  display: none;
}

.pc_zone .record_step_wrap .record_wrap.on {
  display: flex;
}

.pc_zone .record_step_wrap .record_wrap .btn {
  width: 24px;
}

.pc_zone .record_step_wrap .record_wrap .btn img {
  display: block;
}

.pc_zone .record_step_wrap .record_complate_wrap {
  background: #efefef;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 120px;
  height: 40px;
  font-size: 12px;
  font-weight: 700;
  display: none;
}

.pc_zone .record_step_wrap .record_complate_wrap.on {
  display: flex;
}

.pc_zone .record_step_wrap .record_complate_wrap img {
  width: 16px;
}

.pc_zone .record_step_wrap .send_ing_wrap {
  background: #efefef;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 120px;
  height: 40px;
  font-size: 12px;
  font-weight: 700;
  display: none;
}

.pc_zone .record_step_wrap .send_ing_wrap.on {
  display: flex;
}

.pc_zone .record_step_wrap .send_ing_wrap img {
  width: 16px;
}

.pc_zone .record_step_wrap .send_complate_wrap {
  background: #efefef;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 120px;
  height: 40px;
  font-size: 12px;
  font-weight: 700;
  display: none;
}

.pc_zone .record_step_wrap .send_complate_wrap.on {
  display: flex;
}

.pc_zone .record_step_wrap .send_complate_wrap img {
  width: 16px;
}

.pc_zone .record_step_wrap .record_play_wrap {
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  gap: 4px;
  width: 120px;
  height: 40px;
  padding: 7px 15px 7px 7px;
  display: none;
}

.pc_zone .record_step_wrap .record_play_wrap.on {
  display: flex;
}

.pc_zone .record_step_wrap .record_bar_wrap {
  gap: 2px;
  display: flex;
}

.pc_zone .record_step_wrap .record_bar_wrap div {
  background: #efefef;
  border-radius: 100px;
  width: 3px;
  height: 3px;
}

.pc_zone .record_step_wrap .record_bar_wrap div.on {
  background: #005cbb;
  border-radius: 100px;
  width: 3px;
  height: 3px;
}

.pc_zone .record_step_wrap .record_bar_wrap div:first-child {
  height: 5px;
}

.pc_zone .record_step_wrap .record_bar_wrap div:nth-child(2) {
  height: 9px;
}

.pc_zone .record_step_wrap .record_bar_wrap div:nth-child(3) {
  height: 7px;
}

.pc_zone .record_step_wrap .record_bar_wrap div:nth-child(4) {
  height: 11px;
}

.pc_zone .record_step_wrap .record_bar_wrap div:nth-child(5) {
  height: 15px;
}

.pc_zone .record_step_wrap .record_bar_wrap div:nth-child(6) {
  height: 11px;
}

.pc_zone .record_step_wrap .record_bar_wrap div:nth-child(7), .pc_zone .record_step_wrap .record_bar_wrap div:nth-child(9) {
  height: 7px;
}

.pc_zone .record_step_wrap .record_bar_wrap div:nth-child(10) {
  height: 11px;
}

.pc_zone .record_step_wrap .record_bar_wrap div:nth-child(11) {
  height: 7px;
}

.pc_zone .record_step_wrap .record_bar_wrap.mute div {
  height: 3px !important;
}

.pc_zone .record_step_wrap .record_after_wrap {
  gap: 3px;
  display: none;
}

.pc_zone .record_step_wrap .record_after_wrap.on {
  display: flex;
}

.pc_zone .record_step_wrap .btn_record_start {
  width: 120px;
  font-size: 12px;
  display: none;
}

.pc_zone .record_step_wrap .btn_record_start.on {
  display: flex;
}

.pc_zone .gray_wrap {
  background: #e9e9e999;
  border-radius: 6px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px 10px 10px 24px;
  display: flex;
}

.pc_zone .gray_wrap .btn_wrap {
  margin-top: 0;
}

.pc_zone .total_wrap {
  align-items: center;
  gap: 8px;
  font-weight: 700;
  display: flex;
}

.pc_zone .total_wrap .total {
  color: #007bff;
}

.pc_zone .task_list {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.pc_zone .task_list > li {
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  align-items: center;
  padding: 31px 23px 31px 31px;
  display: flex;
}

.pc_zone .task_list li .goal_wrap {
  width: 45%;
}

.pc_zone .task_list li .task_wrap {
  flex: auto;
  padding-left: 25px;
  position: relative;
}

.pc_zone .task_list li .task_wrap:before {
  content: "";
  background: #e9e9e9;
  width: 1px;
  height: 56px;
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.pc_zone .list_item_tit {
  font-size: 16px;
  font-weight: 700;
}

.pc_zone .list_item_tit span {
  color: #007bff;
}

.pc_zone .list_item_con {
  color: #26262699;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.57;
}

.pc_zone .list_item_con span {
  color: #262626;
  margin-right: 8px;
  font-weight: 700;
}

.pc_zone .list_item_con ul {
  flex-wrap: wrap;
  gap: 24px;
  display: flex;
}

.pc_zone .table_wrap_tit {
  margin-bottom: 17px;
  font-size: 14px;
  font-weight: 700;
}

.pc_zone .table_wrap_tit span {
  color: #007bff;
  margin-left: 8px;
}

.pc_zone .table_wrap {
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  width: 100%;
  height: auto;
  overflow: auto;
}

.pc_zone .table_wrap table {
  table-layout: fixed;
  width: max-content;
  min-width: 100%;
}

.pc_zone .table_wrap table thead th {
  background: #f2f2f299;
  border-left: 1px solid #f2f2f2;
  height: 40px;
  font-size: 12px;
  font-weight: 700;
}

.pc_zone .table_wrap table thead th:first-child {
  border-left: none;
}

.pc_zone .table_wrap table thead th label {
  font-size: 12px;
  font-weight: 700;
}

.pc_zone .table_wrap table tbody th {
  border-top: 1px solid #f2f2f2;
  border-right: 1px solid #f2f2f2;
  font-weight: 700;
}

.pc_zone .table_wrap table tbody td {
  border-top: 1px solid #f2f2f2;
  border-right: 1px solid #f2f2f2;
  padding: 20px;
}

.pc_zone .table_wrap table tbody tr th:last-child, .pc_zone .table_wrap table tbody tr td:last-child {
  border-right: none;
}

.pc_zone .wrap {
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 40px;
  display: flex;
}

.pc_zone .border_wrap {
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  margin-top: 12px;
  padding: 19px 23px;
  overflow: hidden;
}

.pc_zone .border_wrap:first-child {
  margin-top: 0;
}

.pc_zone .border_wrap .top_wrap {
  border-bottom: 1px solid #e9e9e9;
  margin-bottom: 24px;
  padding-bottom: 23px;
}

.pc_zone .border_wrap .btn_wrap {
  margin-top: 0;
}

.pc_zone .border_tit_wrap {
  background: #fbfbfb;
  border-bottom: 1px solid #e9e9e9;
  justify-content: space-between;
  align-items: center;
  margin: -19px -23px 0;
  padding: 20px 23px;
  display: flex;
}

.pc_zone .border_tit_wrap .btn_wrap {
  gap: 12px;
}

.pc_zone .border_tit_wrap .btn.md {
  font-size: 12px;
}

.pc_zone .border_tit {
  font-size: 16px;
  font-weight: 700;
}

.pc_zone .border_con_wrap {
  margin: 0 -23px -19px;
  padding: 23px;
  overflow: auto;
}

.pc_zone .border_con_wrap .feedback_wrap {
  align-items: end;
  min-width: fit-content;
}

.pc_zone .border_con_wrap .btn.deep_blue.md {
  font-size: 12px;
}

.pc_zone header {
  background: #005bb9;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
  display: flex;
}

.pc_zone header h1, .pc_zone header h1 a {
  color: #fff;
  font-family: Raleway;
  font-size: 21px;
  font-weight: 700;
  display: flex;
}

.pc_zone header h1 img {
  object-fit: contain;
  width: 113px;
  height: auto;
  margin-right: 4px;
}

.pc_zone header .tnb {
  align-items: center;
  gap: 24px;
  display: flex;
}

.pc_zone header .tnb div {
  color: #ffffffd9;
  font-weight: 600;
}

.pc_zone header .tnb .btn {
  width: 120px;
}

.pc_zone header .tnb .btn.white {
  border: none;
}

.pc_zone header .tnb .a {
  color: #79aaf3d9;
}

.pc_zone .page_login.wrap {
  flex-direction: row;
  padding: 0;
}

.pc_zone .page_login .left_wrap {
  background: url("/pc/img/bg_login.png") center / cover no-repeat;
  flex-direction: column;
  width: 66.66%;
  padding: 80px;
  display: flex;
}

.pc_zone .page_login .left_wrap div {
  margin-top: auto;
  margin-bottom: auto;
  padding-left: 20px;
}

.pc_zone .page_login .left_wrap p {
  color: #ffffffd9;
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
}

.pc_zone .page_login .left_wrap .small {
  color: #ffffffd9;
  opacity: .6;
  margin-top: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.57;
}

.pc_zone .page_login .right_wrap {
  flex-direction: column;
  flex: auto;
  justify-content: center;
  align-items: center;
  display: flex;
}

.pc_zone .page_login .right_wrap div {
  width: 360px;
}

.pc_zone .page_login .right_wrap div div {
  width: auto;
}

.pc_zone .page_login .right_wrap .page_tit_wrap .page_tit {
  font-size: 28px;
  font-weight: 800;
  line-height: .78;
}

.pc_zone .page_login .right_wrap .page_tit_wrap p {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.375;
}

.pc_zone .page_login .right_wrap .input_list {
  margin-top: 32px;
  margin-bottom: 40px;
}

.pc_zone .page_login .right_wrap .input_custom, .pc_zone .page_login .right_wrap .btn {
  height: 60px;
}

.pc_zone .chk_btn_wrap {
  justify-content: start;
  align-items: center;
  gap: 8px;
  display: flex;
}

.pc_zone .chk_btn_wrap span {
  margin-left: 6px;
  font-size: 14px;
  font-weight: 500;
}

.pc_zone .chk_btn_wrap .btn {
  flex: none;
}

.pc_zone .page_home_task .table_wrap table td {
  height: 60px;
  padding: 10px;
}

.pc_zone .page_home_task_creation .table_wrap {
  max-height: 456px;
}

.pc_zone .page_home_task_creation .page_con_wrap {
  padding-bottom: 60px;
}

.pc_zone .record_step_wrap .record_bar_wrap div.on {
  transform-origin: center;
  background: #005cbb;
  border-radius: 100px;
  width: 3px;
  animation: .6s ease-in-out infinite wave;
}

.pc_zone .record_step_wrap .record_bar_wrap div.on:nth-child(2n) {
  animation-delay: .1s;
}

.pc_zone .record_step_wrap .record_bar_wrap div.on:nth-child(3n) {
  animation-delay: .2s;
}

.pc_zone .record_step_wrap .record_bar_wrap div.on:nth-child(4n) {
  animation-delay: .3s;
}

.pc_zone .light_wrap .right_wrap .btn_wrap {
  flex-wrap: nowrap;
  align-items: center;
}

.pc_zone .light_wrap .right_wrap .btn_wrap .btn_send, .pc_zone .btn.solo {
  flex: none;
}

.pc_zone .child_card_list {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  display: grid;
}

.pc_zone .child_card {
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  transition: border-color .15s;
  display: flex;
}

.pc_zone a.child_card:hover {
  border-color: #126fe8;
}

.pc_zone .child_card .name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.pc_zone .child_card .meta {
  color: #26262699;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  display: flex;
}

.pc_zone .child_card .badge {
  color: #26262680;
  background: #f2f2f299;
  border-radius: 6px;
  width: fit-content;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
}

.pc_zone .error_text {
  color: #fe5155;
  font-size: 14px;
  line-height: 1.4;
}

.pc_zone .page_home_task .table_wrap {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
}

.pc_zone .page_home_task .table_wrap table {
  min-width: max-content;
}

.pc_zone .page_home_task .table_wrap th, .pc_zone .page_home_task .table_wrap td {
  white-space: nowrap;
}

.pc_zone .tab_tit_wrap {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.pc_zone .tab_tit_wrap > ul {
  flex-shrink: 0;
  align-items: center;
  display: flex;
}

.pc_zone .form_btn_wrap {
  align-items: center;
  gap: 8px;
  margin-left: auto;
  display: flex;
}

.pc_zone .form_btn_wrap .btn {
  white-space: nowrap;
  min-width: 160px;
  height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

.pc_zone.login_pc {
  display: none;
}

@media (min-width: 1024px) {
  .pc_zone.login_pc {
    display: flex;
  }

  .pc_zone.login_pc .wrap {
    flex: auto;
  }
}

@keyframes wave {
  0%, 100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(1.5);
  }
}

/* [project]/app/mo.css [app-client] (css) */
.mo_zone {
  font-family: HakgyoansimNadeuri, sans-serif;
  font-weight: 400;
  font-size: var(--size20);
  background: #88dbee url("/mo/img/bg_bottom.svg") bottom / contain no-repeat;
  height: 100dvh;
  line-height: 1.5;
  position: relative;
  overflow: hidden;
}

.mo_zone a {
  color: inherit;
  font-size: inherit;
  text-decoration: none;
}

.mo_zone a.disabled {
  cursor: default;
}

.mo_zone span {
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
}

.mo_zone input {
  font-size: inherit;
  background: none;
  border: none;
  outline: none;
}

.mo_zone button {
  cursor: pointer;
  font-size: inherit;
  background: none;
  border: none;
}

.mo_zone button:disabled, .mo_zone button[disabled] {
  cursor: default;
  opacity: .5;
}

.mo_zone img {
  object-fit: cover;
  max-width: 100%;
}

.mo_zone li {
  list-style: none;
}

.mo_zone header .logout_btn {
  font-size: var(--size16);
  color: #186272;
  gap: var(--size6);
  align-items: center;
  display: flex;
}

.mo_zone header .logout_btn img {
  width: var(--size20);
  height: var(--size20);
  aspect-ratio: 1;
}

.mo_zone .input_custom select {
  width: 100%;
  font-size: inherit;
  background: none;
  border: none;
  outline: none;
}

.mo_zone select.custom__select {
  appearance: none;
  text-align: left;
  width: auto;
  min-width: var(--size76);
  max-width: var(--size160);
  padding-right: var(--size36);
  background-position: right var(--size12) center;
}

.mo_zone .contents {
  display: block;
}

.mo_zone .error_text {
  color: #ff2b2f;
  line-height: 1.3;
}

.mo_zone .note_text {
  font-size: var(--size14);
  color: #5c5c5c;
  line-height: 1.4;
}

.mo_zone .popup .box.pad_center {
  padding: var(--size44) var(--size20);
  text-align: center;
  width: 100%;
}

.mo_zone .popup .box .stroke_teal {
  color: #186272;
}

.mo_zone .wrap {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.mo_zone .feedback_step .tag.gray {
  background: #9e9e9e;
}

.mo_zone .feedback_step .tag.blue {
  background: #0455bf;
}

.mo_zone .page_mission_success .contents p.total_star_note {
  width: auto;
  height: auto;
  padding: var(--size10) 0 0;
  text-align: center;
  color: #ffffffd9;
  font-size: var(--size16);
  background: none;
  line-height: 1;
}

.mo_zone .page_feedback .bottom {
  z-index: 10;
}

.mo_zone .page_feedback .contents p .bubble_msg, .mo_zone .page_mission_success .contents p .bubble_msg {
  text-align: center;
  word-break: keep-all;
  line-height: 1.2;
  display: block;
}

.mo_zone .w100p {
  width: 100%;
}

.mo_zone .input_list {
  gap: var(--size8);
  flex-direction: column;
  display: flex;
}

.mo_zone .input_custom {
  padding: var(--size6) var(--size14);
  border-radius: var(--size16);
  border: var(--size2) solid #fff;
  background: #fff;
}

.mo_zone .input_custom input {
  background: none;
  border: none;
  width: 100%;
}

.mo_zone .input_custom input::placeholder {
  color: #d0d0d0;
}

.mo_zone .input_custom label {
  font-size: var(--size14);
  margin-bottom: var(--size-6);
  display: block;
}

.mo_zone .input_custom.focus {
  border-color: #111;
}

.mo_zone .input_custom.error {
  border-color: #ff2b2f;
}

.mo_zone .checkbox_custom {
  gap: var(--size6);
  align-items: center;
  display: flex;
}

.mo_zone .checkbox_custom input {
  appearance: none;
}

.mo_zone .checkbox_custom label {
  cursor: pointer;
}

.mo_zone .checkbox_custom .mark {
  width: var(--size16);
  height: var(--size16);
  background: url("/mo/img/ic_checkbox_default.svg") center / contain no-repeat;
}

.mo_zone .checkbox_custom .text {
  font-size: var(--size16);
  color: #186272;
}

.mo_zone .checkbox_custom input:checked ~ .mark {
  background: url("/mo/img/ic_checkbox_checked.svg") center / contain no-repeat;
}

.mo_zone .custom__select__area {
  position: relative;
}

.mo_zone .custom__select {
  width: var(--size76);
  border: var(--size2) solid #186272;
  font-size: var(--size16);
  padding: var(--size7) var(--size12);
  background: #fff url("/mo/img/ic_select_arrow.svg") no-repeat var(--size50) center / var(--size16) auto;
  border-radius: 1000vw;
  font-weight: 700;
  line-height: 1;
}

.mo_zone .custom__select span {
  color: #186272;
  line-height: 1;
}

.mo_zone .custom__select__list__wrap {
  left: 0;
  top: var(--size38);
  border-radius: var(--size16);
  width: 100%;
  padding: var(--size8) var(--size4);
  background: #f2f6fc;
  display: none;
  position: absolute;
}

.mo_zone .custom__select__list {
  max-height: 232px;
  overflow: auto;
}

.mo_zone .custom__select__list::-webkit-scrollbar {
  width: var(--size3);
  height: var(--size3);
}

.mo_zone .custom__select__list::-webkit-scrollbar-thumb {
  background: #18627233;
  border-radius: 1000vw;
}

.mo_zone .custom__select__list .custom__select__option {
  padding: var(--size4) var(--size8);
}

.mo_zone .custom__select__list .custom__select__option:first-child {
  padding-top: 0;
}

.mo_zone .custom__select__list .custom__select__option:last-child {
  padding-bottom: 0;
}

.mo_zone .custom__select__list .custom__select__option p {
  line-height: 1;
  font-size: var(--size16);
  color: #186272;
  font-weight: 700;
}

.mo_zone .btn_wrap {
  padding-top: var(--size8);
  gap: var(--size8);
  flex-wrap: wrap;
  display: flex;
}

.mo_zone .btn {
  height: var(--size80);
  border-radius: var(--size16);
  font-size: var(--size24);
  justify-content: center;
  align-items: center;
  gap: var(--size6);
  flex: 1;
  display: flex;
  box-shadow: 20px 10px 30px #0151a71a;
}

.mo_zone .btn img {
  width: var(--size28);
}

.mo_zone .btn.w100p {
  flex: none;
}

.mo_zone .btn.h_sm {
  height: var(--size48);
}

.mo_zone .btn.blue {
  color: #fff;
  background: url("/mo/img/bg_btn_blue.svg") center / cover no-repeat;
}

.mo_zone .btn.blue:hover {
  background: url("/mo/img/bg_btn_blue_hover.svg") center / cover no-repeat;
}

.mo_zone .btn.blue[disabled="disabled"]:hover {
  background: url("/mo/img/bg_btn_blue.svg") center / cover no-repeat;
}

.mo_zone .btn.pale_blue {
  color: #fff;
  background: url("/mo/img/bg_btn_paleBlue.svg") center / cover no-repeat;
}

.mo_zone .btn.pale_blue:hover {
  background: url("/mo/img/bg_btn_paleBlue_hover.svg") center / cover no-repeat;
}

.mo_zone .btn.pale_blue[disabled="disabled"]:hover {
  background: url("/mo/img/bg_btn_paleBlue.svg") center / cover no-repeat;
}

.mo_zone .btn.red {
  color: #fff;
  background: url("/mo/img/bg_btn_red.svg") center / cover no-repeat;
}

.mo_zone .btn.red:hover {
  background: url("/mo/img/bg_btn_red_hover.svg") center / cover no-repeat;
}

.mo_zone .btn.red[disabled="disabled"]:hover {
  background: url("/mo/img/bg_btn_red.svg") center / cover no-repeat;
}

.mo_zone .btn.green {
  color: #fff;
  background: url("/mo/img/bg_btn_green.svg") center / cover no-repeat;
}

.mo_zone .btn.green:hover {
  background: url("/mo/img/bg_btn_green_hover.svg") center / cover no-repeat;
}

.mo_zone .btn.green[disabled="disabled"]:hover {
  background: url("/mo/img/bg_btn_green.svg") center / cover no-repeat;
}

.mo_zone .btn.teal_green {
  color: #fff;
  background: url("/mo/img/bg_btn_tealGreen.svg") center / cover no-repeat;
}

.mo_zone .record_bar_wrap {
  align-items: center;
  gap: var(--size4);
  display: flex;
}

.mo_zone .record_bar_wrap div {
  width: var(--size4);
  height: var(--size6);
  border-radius: var(--size4);
  background: #efefef;
}

.mo_zone .record_bar_wrap div.on {
  background: #0555bf;
}

.mo_zone .record_bar_wrap.mute div {
  height: var(--size4) !important;
}

.mo_zone .bar_gauge_wrap {
  margin-top: var(--size20);
  margin-bottom: var(--size24);
  width: 100%;
  height: var(--size20);
  border-radius: var(--size20);
  background: #0000000d;
  position: relative;
}

.mo_zone .bar_gauge_wrap img {
  top: var(--size-23);
  left: var(--size-14);
  width: var(--size75);
  position: absolute;
}

.mo_zone .bar_gauge_wrap .bar {
  background: #fcbf29;
  border-radius: 1000vw;
  width: 0;
  height: 100%;
  position: relative;
}

.mo_zone .bar_gauge_wrap .bar .bubble {
  top: var(--size-38);
  font-size: var(--size14);
  color: #fff;
  padding: var(--size7) var(--size11) var(--size7) var(--size12);
  border-radius: var(--size8);
  background: #186272;
  width: max-content;
  line-height: 1;
  display: block;
  position: absolute;
  left: auto;
  right: 0;
  transform: translateX(50%);
}

.mo_zone .bar_gauge_wrap .bar .bubble:before {
  content: "";
  border-left: var(--size6) solid transparent;
  border-right: var(--size6) solid transparent;
  border-top: var(--size8) solid #186272;
  bottom: var(--size-6);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.mo_zone .wrap {
  background-repeat: no-repeat;
  background-size: cover;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
}

.mo_zone .contents {
  padding-left: var(--size20);
  padding-right: var(--size20);
  padding-top: var(--size80);
  padding-bottom: var(--size20);
  flex: auto;
  overflow: auto;
}

.mo_zone .bottom {
  padding: var(--size20);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.mo_zone header {
  height: var(--size60);
  border-bottom: var(--size1) solid #0000001a;
  padding: var(--size20) var(--size18);
  z-index: 1;
  background: #88dbee;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.mo_zone header .logo {
  width: var(--size90);
}

.mo_zone header .logo img {
  width: 100%;
  display: block;
}

.mo_zone header a {
  font-size: var(--size16);
  color: #186272;
  gap: var(--size6);
  align-items: center;
  display: flex;
}

.mo_zone header a img {
  width: var(--size20);
  height: var(--size20);
  aspect-ratio: 1;
}

.mo_zone .page_tit {
  color: #000;
  margin-left: auto;
  margin-right: auto;
}

.mo_zone .box {
  background: #fff url("/mo/img/bg_popup_box.svg") no-repeat center top / var(--size60) auto;
  border-radius: var(--size16);
  width: 100%;
}

.mo_zone .gray_wrap {
  border-radius: var(--size12);
  background: #0455bf0d;
}

.mo_zone .card_wrap {
  gap: var(--size8);
  flex-direction: column;
  height: 100%;
  display: flex;
}

.mo_zone .card_wrap .btn {
  flex: none;
}

.mo_zone .card_wrap .btn_wrap .btn {
  flex: 1;
}

.mo_zone .card {
  border-radius: var(--size16);
  color: #fff;
  display: flex;
  position: relative;
}

.mo_zone .card.date {
  font-size: var(--size24);
  background: #58cde7;
  flex: auto;
  justify-content: center;
  align-items: center;
  font-weight: 700;
}

.mo_zone .card.date:before {
  content: "";
  height: var(--size174);
  left: var(--size-20);
  right: var(--size-20);
  top: var(--size-11);
  background: url("/mo/img/bg_card_date.svg") center / cover no-repeat;
  position: absolute;
}

.mo_zone .card.message {
  padding: var(--size20);
  gap: var(--size16);
  background: url("/mo/img/bg_card_message.svg") center / cover no-repeat;
}

.mo_zone .card.message .text_wrap {
  gap: var(--size6);
  flex-direction: column;
  justify-content: center;
  display: flex;
}

.mo_zone .card.message .text_wrap p {
  line-height: 1;
}

.mo_zone .card.message .text_wrap .tag {
  font-size: var(--size16);
  padding: var(--size2) var(--size8);
  border-radius: var(--size20);
  background: #488e19;
  margin-right: auto;
  line-height: 1;
}

.mo_zone .card.message .icon_wrap {
  min-width: var(--size72);
  width: var(--size72);
  height: var(--size72);
  border-radius: var(--size72);
  background: #fff;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.mo_zone .card.message .icon_wrap img {
  width: var(--size48);
}

.mo_zone .card.message.new .icon_wrap:before {
  content: "";
  width: var(--size8);
  height: var(--size8);
  border-radius: var(--size8);
  top: var(--size20);
  right: var(--size14);
  border: var(--size2) solid #fff;
  box-sizing: content-box;
  background: #ff491c;
  display: block;
  position: absolute;
}

.mo_zone .card.blackboard {
  gap: var(--size14);
  font-size: var(--size40);
  padding-top: var(--size3);
  height: var(--size220);
  background: url("/mo/img/bg_card_blackBoard.svg") center / cover no-repeat;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1.025;
  display: flex;
}

.mo_zone .card.blackboard a {
  width: var(--size48);
}

.mo_zone .card.blackboard a img {
  width: 100%;
  display: block;
}

.mo_zone .card.blackboard.completed {
  padding-bottom: var(--size29);
  gap: var(--size8);
  font-size: var(--size24);
  background-image: url("/mo/img/bg_card_blackBoard_completed.svg");
  line-height: 1;
}

.mo_zone .card.blackboard.completed div {
  padding-top: var(--size2);
  gap: var(--size12);
  align-items: center;
  display: flex;
}

.mo_zone .card.blackboard.completed div span {
  font-size: var(--size60);
  line-height: 1.016;
}

.mo_zone .card.blackboard.completed div img {
  width: var(--size72);
}

.mo_zone .card.box {
  font-size: var(--size18);
  color: #186272;
  text-align: center;
  padding: var(--size44) var(--size24) var(--size40);
  flex-direction: column;
  justify-content: center;
  line-height: 1;
}

.mo_zone .card.box .btn {
  box-shadow: none;
}

.mo_zone .page_home.bottom_btn_none .card_wrap {
  padding-bottom: var(--size88);
}

.mo_zone .page_login {
  background-image: url("/mo/img/bg_login.png");
  position: relative;
}

.mo_zone .page_login:before {
  content: "";
  width: 100%;
  height: var(--size86);
  background: url("/mo/img/bg_login_bottom.png") center / cover no-repeat;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
}

.mo_zone .page_login .contents {
  padding-top: var(--size20);
  flex-direction: column;
  justify-content: center;
  display: flex;
}

.mo_zone .page_login > * {
  position: relative;
}

.mo_zone .page_login .logo {
  margin-bottom: var(--size20);
  width: 51.94%;
  margin-left: auto;
  margin-right: auto;
}

.mo_zone .page_login .logo img {
  width: 100%;
  display: block;
}

.mo_zone .page_login .input_list {
  padding-bottom: var(--size16);
}

.mo_zone .page_login .small {
  font-size: var(--size14);
  color: #28643e;
  text-align: center;
  margin-top: var(--size16);
}

.mo_zone .page_message_list .contents {
  background-image: url("/mo/img/bg_message_list.svg");
  background-repeat: no-repeat;
  background-position: center var(--size100);
  height: 100%;
  padding-top: var(--size197);
  background-size: 100%;
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.mo_zone .page_message_list .contents:before {
  content: "";
  z-index: 0;
  background: #1c4f40;
  width: 100%;
  height: 50%;
  display: block;
  position: absolute;
  inset: 50% 0 0;
}

.mo_zone .page_message_list .contents:after {
  content: "";
  width: 100%;
  height: var(--size43);
  z-index: 0;
  background: url("/mo/img/bg_message_list_bottom.svg") bottom / 100% no-repeat;
  display: block;
  position: absolute;
  inset: auto 0 0;
}

.mo_zone .page_message_list .contents > * {
  z-index: 1;
  position: relative;
}

.mo_zone .page_message_list .contents p {
  color: #fff;
  font-size: var(--size24);
  height: var(--size56);
  font-weight: 700;
  line-height: 1.16;
}

.mo_zone .page_message_list .contents p span {
  color: #94ee59;
}

.mo_zone .page_message_list .contents .message_list_wrap {
  height: calc(100% - var(--size56));
  margin-top: var(--size40);
  overflow: auto;
}

.mo_zone .page_message_list .contents .message_list {
  gap: var(--size8);
  padding-bottom: var(--size12);
  flex-direction: column;
  display: flex;
}

.mo_zone .message_list li {
  align-items: center;
  gap: var(--size4);
  border-radius: var(--size16);
  padding: var(--size12) var(--size16) var(--size12) var(--size12);
  background: #fff;
  display: flex;
}

.mo_zone .message_list .icon_wrap {
  width: var(--size48);
  height: var(--size48);
}

.mo_zone .message_list .icon_wrap img {
  width: 100%;
  display: block;
}

.mo_zone .message_list .text_wrap {
  align-items: center;
  gap: var(--size14);
  font-size: var(--size20);
  color: #111;
  font-weight: 700;
  display: flex;
}

.mo_zone .message_list .text_wrap span {
  color: #5c5c5c;
  font-weight: 400;
}

.mo_zone .message_list .btn {
  max-width: var(--size40);
  width: var(--size40);
  height: var(--size40);
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 1000vw;
  margin-left: auto;
}

.mo_zone .message_list .btn.play {
  background-image: url("/mo/img/ic_btn_play.svg");
}

.mo_zone .message_list .btn.pause {
  background-image: url("/mo/img/ic_btn_pause.svg");
}

.mo_zone .message_list .new .icon_wrap {
  position: relative;
}

.mo_zone .message_list .new .icon_wrap:before {
  content: "";
  width: var(--size8);
  height: var(--size8);
  border-radius: var(--size8);
  top: var(--size8);
  right: var(--size2);
  border: var(--size2) solid #fff;
  box-sizing: content-box;
  background: #ff491c;
  display: block;
  position: absolute;
}

.mo_zone .word_card_wrap {
  margin-top: var(--size14);
  margin-bottom: var(--size24);
  aspect-ratio: 1;
  width: 100%;
}

.mo_zone .word_card_wrap .cover {
  justify-content: center;
  align-items: center;
  gap: var(--size41);
  border-radius: var(--size16);
  justify-content: center;
  align-items: center;
  gap: var(--size41);
  background: url("/mo/img/bg_card_back.svg") center / cover no-repeat;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.mo_zone .word_card_wrap .cover p {
  color: #186272;
  font-size: var(--size28);
  -webkit-text-stroke: var(--size6) #fff;
  paint-order: stroke fill;
}

.mo_zone .word_card_wrap .cover p span {
  position: relative;
}

.mo_zone .word_card_wrap .cover img {
  width: var(--size162);
}

.mo_zone .word_card_wrap .word_card {
  border-radius: var(--size16);
  border: var(--size8) solid #fff;
  overflow: hidden;
}

.mo_zone .word_card_wrap .word_card img {
  width: 100%;
  height: 100%;
  display: block;
}

.mo_zone .card_effect_wrap {
  perspective: 1000px;
}

.mo_zone .card_effect_wrapper {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s;
  position: relative;
}

.mo_zone .card_effect {
  backface-visibility: hidden;
  align-items: center;
  justify-content: center top;
  font-weight: bold;
  display: flex;
  position: absolute;
  inset: 0;
}

.mo_zone .card_effect.word_card, .mo_zone .open .card_effect_wrapper {
  transform: rotateY(180deg);
}

.mo_zone .practice_step {
  width: 100%;
  height: 19.44vw;
  padding: var(--size36) var(--size8) var(--size14);
  background-image: url("/mo/img/bg_practice_step.svg");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}

.mo_zone .practice_step .bar {
  background: #fcbf29;
  border-radius: 1000vw;
  width: 0;
  height: 100%;
  position: relative;
}

.mo_zone .practice_step .bar .bubble {
  top: var(--size-40);
  font-size: var(--size14);
  color: #fff;
  -webkit-text-stroke: 0;
  padding: var(--size7) var(--size14) var(--size7) var(--size13);
  border-radius: var(--size8);
  background: #186272;
  width: max-content;
  line-height: 1;
  display: block;
  position: absolute;
  left: auto;
  right: 0;
  transform: translateX(50%);
}

.mo_zone .practice_step .bar .bubble:before {
  content: "";
  border-left: var(--size6) solid transparent;
  border-right: var(--size6) solid transparent;
  border-top: var(--size8) solid #186272;
  bottom: var(--size-6);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.mo_zone .practice_step .flag {
  width: var(--size37);
  height: var(--size51);
  top: 0;
  right: var(--size1);
  background-image: url("/mo/img/ic_flag.svg");
  background-position: top;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
}

.mo_zone .practice_step span {
  padding-left: var(--size16);
  padding-top: var(--size38);
  line-height: 1;
  font-size: var(--size16);
  color: #186272;
  -webkit-text-stroke: var(--size4) #fff;
  paint-order: stroke fill;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.mo_zone .practice_step.goal {
  background-image: url("/mo/img/bg_practice_step_goal.svg");
}

.mo_zone .practice_step.goal .flag {
  background-image: url("/mo/img/ic_flag_goal.svg");
}

.mo_zone .feedback_step {
  justify-content: space-between;
  display: flex;
}

.mo_zone .feedback_step .step {
  font-size: var(--size20);
  color: #18627266;
  align-items: center;
  display: flex;
}

.mo_zone .feedback_step .step span {
  color: #186272;
}

.mo_zone .feedback_step .step .tag {
  color: #fff;
}

.mo_zone .feedback_step .tag {
  margin-left: var(--size8);
  padding: var(--size4) var(--size8);
  line-height: 1;
  font-size: var(--size16);
  color: #fff;
  border-radius: 1000vw;
}

.mo_zone .feedback_step .tag.green {
  background: #70c636;
}

.mo_zone .feedback_step .tag.red {
  background: #ea464a;
}

.mo_zone .circle_step_list {
  gap: var(--size8);
  padding-bottom: var(--size16);
  justify-content: center;
  align-items: center;
  display: flex;
}

.mo_zone .circle_step_list li {
  color: #186272;
  font-weight: 700;
  font-size: var(--size18);
  width: var(--size32);
  height: var(--size32);
  border-radius: var(--size32);
  background-color: #0455bf1a;
  justify-content: center;
  align-items: center;
  display: flex;
}

.mo_zone .circle_step_list_wrap {
  justify-content: center;
  gap: 15px;
  display: flex;
}

.mo_zone .page_practice .contents {
  padding-top: var(--size20);
}

.mo_zone .page_practice .record_pause_wrap {
  display: none;
}

.mo_zone .page_practice .record_pause_wrap.on {
  display: block;
}

.mo_zone .page_practice .record_pause_wrap .btn_wrap {
  padding-top: 0;
}

.mo_zone .page_practice .record_wrap {
  border-radius: var(--size16);
  background: #fff;
  display: none;
  box-shadow: 20px 10px 30px #0151a71a;
}

.mo_zone .page_practice .record_wrap.on {
  display: block;
}

.mo_zone .page_practice .record_wrap div {
  align-items: center;
  gap: var(--size12);
  height: var(--size80);
  padding: var(--size19) var(--size28) var(--size19) var(--size20);
  display: flex;
}

.mo_zone .page_practice .record_wrap div div {
  gap: var(--size4);
  padding: 0;
}

.mo_zone .page_practice .record_wrap button img {
  min-width: var(--size40);
  display: block;
}

.mo_zone .page_practice .record_bar_wrap div:nth-child(22) {
  height: var(--size9);
}

.mo_zone .page_practice .record_bar_wrap div {
  height: var(--size6);
}

.mo_zone .page_practice .record_bar_wrap div:nth-child(2), .mo_zone .page_practice .record_bar_wrap div:nth-child(10), .mo_zone .page_practice .record_bar_wrap div:nth-child(23), .mo_zone .page_practice .record_bar_wrap div:nth-child(27) {
  height: var(--size11);
}

.mo_zone .page_practice .record_bar_wrap div:nth-child(3), .mo_zone .page_practice .record_bar_wrap div:nth-child(6) {
  height: var(--size17);
}

.mo_zone .page_practice .record_bar_wrap div:nth-child(4) {
  height: var(--size29);
}

.mo_zone .page_practice .record_bar_wrap div:nth-child(5), .mo_zone .page_practice .record_bar_wrap div:nth-child(13) {
  height: var(--size12);
}

.mo_zone .page_practice .record_bar_wrap div:nth-child(7) {
  height: var(--size30);
}

.mo_zone .page_practice .record_bar_wrap div:nth-child(8), .mo_zone .page_practice .record_bar_wrap div:nth-child(11), .mo_zone .page_practice .record_bar_wrap div:nth-child(21), .mo_zone .page_practice .record_bar_wrap div:nth-child(25) {
  height: var(--size18);
}

.mo_zone .page_practice .record_bar_wrap div:nth-child(9), .mo_zone .page_practice .record_bar_wrap div:nth-child(16) {
  height: var(--size38);
}

.mo_zone .page_practice .record_bar_wrap div:nth-child(12) {
  height: var(--size8);
}

.mo_zone .page_practice .record_bar_wrap div:nth-child(14) {
  height: var(--size21);
}

.mo_zone .page_practice .record_bar_wrap div:nth-child(15), .mo_zone .page_practice .record_bar_wrap div:nth-child(19) {
  height: var(--size15);
}

.mo_zone .page_practice .record_bar_wrap div:nth-child(17) {
  height: var(--size42);
}

.mo_zone .page_practice .record_bar_wrap div:nth-child(18) {
  height: var(--size24);
}

.mo_zone .page_practice .record_bar_wrap div:nth-child(20), .mo_zone .page_practice .record_bar_wrap div:nth-child(26) {
  height: var(--size25);
}

.mo_zone .page_practice .record_complete_wrap {
  border-radius: var(--size16);
  bottom: var(--size20);
  left: var(--size20);
  right: var(--size20);
  background: #e6eef9;
  display: none;
  position: absolute;
  box-shadow: 20px 10px 30px #0151a71a;
}

.mo_zone .page_practice .record_complete_wrap.on {
  display: block;
}

.mo_zone .page_practice .record_complete_wrap div {
  height: var(--size80);
  justify-content: center;
  align-items: center;
  gap: var(--size12);
  font-size: var(--size24);
  color: #186272;
  display: flex;
}

.mo_zone .page_practice .text_stroke {
  font-size: var(--size32);
  -webkit-text-stroke: var(--size8) #fff;
  paint-order: stroke fill;
  line-height: 1;
}

.mo_zone .page_practice .text_wrap {
  text-align: center;
  color: #186272;
  font-size: var(--size24);
  line-height: 1;
}

.mo_zone .page_practice .text_wrap.before_wrap {
  padding-top: var(--size16);
  line-height: 1;
}

.mo_zone .page_practice .text_wrap.before_wrap span {
  margin-top: var(--size14);
  line-height: 1;
  display: block;
}

.mo_zone .page_practice .text_wrap.before_wrap .text_stroke {
  margin-top: var(--size14);
  margin-bottom: var(--size14);
  font-size: var(--size32);
  display: block;
}

.mo_zone .page_practice .start_wrap, .mo_zone .page_practice .talking_wrap, .mo_zone .page_practice.start .before_wrap {
  display: none;
}

.mo_zone .page_practice.start .start_wrap {
  display: block;
}

.mo_zone .page_practice.talking .before_wrap, .mo_zone .page_practice.talking .start_wrap {
  display: none;
}

.mo_zone .page_practice.talking .talking_wrap {
  display: block;
}

.mo_zone .page_practice.compare .contents {
  display: none;
}

.mo_zone .page_feedback {
  background: #f4bd00 url("/mo/img/bg_feedback_bear01.svg") bottom / contain no-repeat;
}

.mo_zone .page_feedback header {
  background: none;
}

.mo_zone .page_feedback .page_tit {
  color: #876100;
}

.mo_zone .page_feedback .contents {
  padding: var(--size48) var(--size12) 0;
}

.mo_zone .page_feedback .contents p {
  width: 100%;
  height: var(--size319);
  padding-top: var(--size36);
  padding-bottom: var(--size136);
  text-align: center;
  font-size: var(--size48);
  color: #fff;
  background: url("/mo/img/bg_feedback_yl.svg") center / cover no-repeat;
  justify-content: center;
  align-items: center;
  line-height: 1.02;
  display: flex;
}

.mo_zone .page_feedback .contents img {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.mo_zone .page_feedback.green {
  background: #70c636;
}

.mo_zone .page_feedback.green .page_tit {
  color: #317900;
}

.mo_zone .page_feedback.green .contents p {
  background: url("/mo/img/bg_feedback_gr.svg") center / cover no-repeat;
}

.mo_zone .page_feedback.blue {
  background: #0455bf;
}

.mo_zone .page_feedback.blue .page_tit {
  color: #fff;
}

.mo_zone .page_feedback.blue .contents p {
  background: url("/mo/img/bg_feedback_bl.svg") center / cover no-repeat;
}

.mo_zone .page_mission_success {
  background: #0455bf;
}

.mo_zone .page_mission_success header {
  background: none;
}

.mo_zone .page_mission_success .page_tit {
  color: #fff;
}

.mo_zone .page_mission_success .contents {
  padding-top: var(--size48);
  flex-direction: column;
  padding-left: 0;
  padding-right: 0;
  display: flex;
}

.mo_zone .page_mission_success .contents p {
  width: 100%;
  height: var(--size210);
  padding: var(--size36) var(--size12) var(--size27);
  text-align: center;
  font-size: var(--size48);
  color: #fff;
  background: url("/mo/img/bg_text_area_blue.svg") top / contain no-repeat;
  justify-content: center;
  align-items: center;
  line-height: 1.02;
  display: flex;
}

.mo_zone .spin_effect_wrap {
  flex: auto;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.mo_zone .spin_effect_wrap img {
  width: var(--size287);
  padding-top: var(--size51);
  padding-left: var(--size25);
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
}

.mo_zone .spin_effect_wrap span {
  text-align: center;
  font-size: var(--size48);
  color: #fff;
  padding-top: var(--size11);
  line-height: 1.02;
  display: block;
}

.mo_zone .spin_effect_wrap .spin_effect {
  width: 100%;
  top: var(--size-110);
  mix-blend-mode: overlay;
  margin-left: -50%;
  padding-top: 0;
  padding-left: 0;
  animation: 10s linear infinite spin;
  position: absolute;
  left: 50%;
}

.mo_zone .page_message .contents {
  padding-top: var(--size20);
}

.mo_zone .page_message .card.box {
  font-size: var(--size24);
  padding-top: var(--size54);
  padding-bottom: var(--size24);
  gap: var(--size24);
  position: relative;
}

.mo_zone .page_message .card.box .btn {
  height: var(--size64);
}

.mo_zone .page_message .card.box .btn_wrap {
  padding-top: 0;
}

.mo_zone .page_message .btn.teal_green {
  width: var(--size96);
}

.mo_zone .page_message .record_before_wrap {
  display: none;
}

.mo_zone .page_message .record_before_wrap.on {
  display: block;
}

.mo_zone .page_message .record_wrap {
  display: none;
}

.mo_zone .page_message .record_wrap.on {
  display: block;
}

.mo_zone .page_message .record_wrap div {
  gap: var(--size8);
  display: flex;
}

.mo_zone .page_message .record_wrap .record {
  align-items: center;
  gap: var(--size10);
  border: var(--size2) solid #efefef;
  padding: var(--size12) var(--size15) var(--size12) var(--size12);
  border-radius: var(--size12);
  flex: auto;
  display: flex;
}

.mo_zone .page_message .record_wrap .record button {
  min-width: var(--size36);
}

.mo_zone .page_message .record_wrap .record button img {
  width: 100%;
  display: block;
}

.mo_zone .page_message .record .record_bar_wrap {
  gap: var(--size3);
}

.mo_zone .page_message .record .record_bar_wrap div {
  width: var(--size3);
  height: var(--size5);
}

.mo_zone .page_message .record .record_bar_wrap div:nth-child(2) {
  height: var(--size10);
}

.mo_zone .page_message .record .record_bar_wrap div:nth-child(3) {
  height: var(--size14);
}

.mo_zone .page_message .record .record_bar_wrap div:nth-child(4) {
  height: var(--size23);
}

.mo_zone .page_message .record .record_bar_wrap div:nth-child(5) {
  height: var(--size9);
}

.mo_zone .page_message .record .record_bar_wrap div:nth-child(6) {
  height: var(--size13);
}

.mo_zone .page_message .record .record_bar_wrap div:nth-child(7) {
  height: var(--size23);
}

.mo_zone .page_message .record .record_bar_wrap div:nth-child(8) {
  height: var(--size14);
}

.mo_zone .page_message .record .record_bar_wrap div:nth-child(9) {
  height: var(--size29);
}

.mo_zone .page_message .record .record_bar_wrap div:nth-child(10) {
  height: var(--size9);
}

.mo_zone .page_message .record .record_bar_wrap div:nth-child(11) {
  height: var(--size13);
}

.mo_zone .page_message .record .record_bar_wrap div:nth-child(12) {
  height: var(--size6);
}

.mo_zone .page_message .record .record_bar_wrap div:nth-child(13) {
  height: var(--size9);
}

.mo_zone .page_message .record .record_bar_wrap div:nth-child(14) {
  height: var(--size16);
}

.mo_zone .page_message .record .record_bar_wrap div:nth-child(15) {
  height: var(--size11);
}

.mo_zone .page_message .record .record_bar_wrap div:nth-child(16) {
  height: var(--size16);
}

.mo_zone .page_message .record .record_bar_wrap.mute div {
  height: var(--size3) !important;
}

.mo_zone .page_message .record_complete_wrap {
  border-radius: var(--size16);
  padding: var(--size16);
  background: #e6eef9;
  display: none;
}

.mo_zone .page_message .record_complete_wrap.on {
  display: block;
}

.mo_zone .page_message .record_complete_wrap div {
  justify-content: center;
  align-items: center;
  gap: var(--size12);
  display: flex;
}

.mo_zone .page_message .record_after_wrap {
  display: none;
}

.mo_zone .page_message .record_after_wrap.on {
  display: block;
}

.mo_zone .page_message .record_after_wrap div {
  gap: var(--size8);
  display: flex;
}

.mo_zone .page_message .record_after_wrap .btn.pale_blue {
  flex: auto;
}

.mo_zone .page_message .record_play_wrap {
  display: none;
}

.mo_zone .page_message .record_play_wrap.on {
  display: block;
}

.mo_zone .page_message .record_play_wrap div {
  gap: var(--size8);
  display: flex;
}

.mo_zone .page_message .record_play_wrap .record {
  align-items: center;
  gap: var(--size10);
  border: var(--size2) solid #efefef;
  padding: var(--size12) var(--size15) var(--size12) var(--size12);
  border-radius: var(--size12);
  flex: auto;
  display: flex;
}

.mo_zone .page_message .record_play_wrap .record button {
  min-width: var(--size36);
}

.mo_zone .page_message .record_play_wrap .record button img {
  display: block;
}

.mo_zone .page_practice_history .contents {
  padding-bottom: var(--size120);
}

.mo_zone .page_practice_history .box {
  padding: var(--size46) var(--size24) var(--size24);
}

.mo_zone .page_practice_history .box .box_tit {
  font-size: var(--size24);
  color: #186272;
  font-weight: 700;
  line-height: 1;
}

.mo_zone .page_practice_history .box .box_tit_wrap {
  padding-bottom: var(--size18);
  justify-content: space-between;
  gap: var(--size18);
  flex-wrap: wrap;
  display: flex;
}

.mo_zone .page_practice_history .box .box_tit_wrap .gray_wrap {
  width: 100%;
  padding: var(--size15);
  font-weight: 700;
  font-size: var(--size18);
  color: #186272;
  gap: var(--size8);
  justify-content: center;
  align-items: center;
  display: flex;
}

.mo_zone .page_practice_history .box section {
  padding-bottom: var(--size32);
  padding-top: var(--size30);
}

.mo_zone .page_practice_history .box section:first-child, .mo_zone .page_practice_history .box .box_tit_wrap + section {
  padding-top: 0;
}

.mo_zone .page_practice_history .box section:last-child {
  padding-bottom: 0;
}

.mo_zone .page_practice_history .box section + section {
  border-top: var(--size2) dotted #18627233;
}

.mo_zone .page_practice_history .box .sec_tit {
  font-size: var(--size18);
  color: #186272;
  font-weight: 700;
}

.mo_zone .sec_history_chk {
  gap: var(--size12);
  flex-direction: column;
  display: flex;
}

.mo_zone .sec_history_chk ul {
  gap: var(--size12) var(--size8);
  flex-wrap: wrap;
  display: flex;
}

.mo_zone .sec_history_chk ul li {
  width: calc((100% - var(--size48)) / 7);
  justify-content: center;
  align-items: center;
  gap: var(--size8);
  color: #186272;
  flex-direction: column;
  font-weight: 700;
  line-height: 1;
  display: flex;
}

.mo_zone .sec_history_chk ul li .circle {
  aspect-ratio: 1;
  background: #0455bf1a;
  border-radius: 1000vw;
  width: 100%;
}

.mo_zone .sec_history_chk ul li .circle img {
  width: 100%;
  display: block;
}

.mo_zone .count_wrap {
  height: var(--size64);
  padding-left: var(--size19);
  padding-right: var(--size16);
  color: #186272;
  font-size: var(--size18);
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  display: flex;
}

.mo_zone .count_wrap span {
  font-size: var(--size36);
  color: #18627266;
}

.mo_zone .count_wrap .count {
  font-size: var(--size48);
  color: #186272;
}

.mo_zone .page_practice_history .cumulative_wrap {
  display: none;
}

.mo_zone .page_practice_history .cumulative_wrap.on {
  display: flex;
}

.mo_zone .chart_wrap {
  margin-top: var(--size8);
  padding: var(--size20);
  flex-direction: column;
}

.mo_zone .chart_wrap .chart_dotted {
  border-top: 2px dotted #ff6d72;
}

.mo_zone .chart_wrap .chart_teal_green {
  background: #186272;
}

.mo_zone .chart_wrap .chart_green {
  background: #70c636;
}

.mo_zone .legend {
  gap: var(--size8);
  display: flex;
}

.mo_zone .legend div {
  font-size: var(--size10);
  color: #186272;
  align-items: center;
  gap: var(--size4);
  padding: var(--size5) var(--size6);
  background: #e7ecf5;
  border-radius: 1000vw;
  line-height: 1;
  display: flex;
}

.mo_zone .legend .chart_dotted {
  width: var(--size12);
  height: var(--size1);
}

.mo_zone .legend .chart_teal_green, .mo_zone .legend .chart_green {
  width: var(--size10);
  height: var(--size10);
  border-radius: var(--size10);
}

.mo_zone .chart {
  width: 100%;
  height: var(--size100);
  margin-top: var(--size16);
  border-bottom: var(--size2) solid #186272;
  justify-content: center;
  align-items: end;
  gap: var(--size10);
  padding-left: var(--size9);
  padding-right: var(--size9);
  display: flex;
  position: relative;
}

.mo_zone .chart .chart_dotted {
  position: absolute;
  top: auto;
  left: 0;
  right: 0;
}

.mo_zone .chart .sesstion {
  width: var(--size18);
  height: 100%;
  font-size: var(--size12);
  color: #186272;
  justify-content: center;
  align-items: end;
  gap: var(--size4) var(--size2);
  display: flex;
  position: relative;
}

.mo_zone .chart .sesstion span {
  text-align: center;
  width: 100%;
  bottom: var(--size-16);
  line-height: 1;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.mo_zone .chart .sesstion .chart_bar {
  width: calc((100% - var(--size2)) / 2);
  border-radius: var(--size8) var(--size8) 0 0;
  margin-top: auto;
}

.mo_zone .chart .sesstion.off .chart_teal_green {
  background: #dee6f1;
}

.mo_zone .chart .sesstion.off .chart_green {
  background: #e6eef9;
}

.mo_zone .dim {
  -webkit-backdrop-filter: blur(8px);
  z-index: 999;
  background: #0009;
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

.mo_zone .dim.on {
  display: block;
}

.mo_zone .popup {
  padding: var(--size20);
  z-index: 999;
  display: none;
}

.mo_zone .popup.on {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.mo_zone .popup .bottom p {
  font-size: var(--size24);
  color: #fff;
  text-align: center;
  padding-bottom: var(--size8);
  font-weight: 700;
  line-height: 1;
}

.mo_zone .popup .inner {
  width: 100%;
  height: 100%;
  padding-bottom: var(--size60);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.mo_zone .popup .box {
  padding: var(--size56) var(--size20) var(--size44);
}

.mo_zone .popup .box p {
  text-align: center;
}

.mo_zone .popup_campare .inner {
  padding-bottom: var(--size3);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  display: flex;
}

.mo_zone .popup_campare .popup_tit {
  width: 100%;
  padding-bottom: var(--size4);
  font-size: var(--size32);
  color: #fff;
  text-align: center;
  line-height: 1.03;
}

.mo_zone .popup_campare .box {
  padding: var(--size54) var(--size24) var(--size24) var(--size24);
}

.mo_zone .popup_campare .box .box_tit {
  padding-bottom: var(--size25);
  font-size: var(--size32);
  color: #186272;
  text-align: center;
  line-height: 1.03;
}

.mo_zone .popup_campare .box .record_bar_wrap {
  width: 100%;
  height: var(--size64);
  border: var(--size2) solid #efefef;
  border-radius: var(--size12);
  justify-content: center;
  gap: var(--size3);
}

.mo_zone .popup_campare .box .record_bar_wrap.on {
  border: var(--size4) solid #4e9cf6;
}

.mo_zone .popup_campare .box .record_bar_wrap div {
  width: var(--size3);
  height: var(--size5);
}

.mo_zone .popup_campare .box .record_bar_wrap div:nth-child(2) {
  height: var(--size10);
}

.mo_zone .popup_campare .box .record_bar_wrap div:nth-child(3) {
  height: var(--size14);
}

.mo_zone .popup_campare .box .record_bar_wrap div:nth-child(4) {
  height: var(--size23);
}

.mo_zone .popup_campare .box .record_bar_wrap div:nth-child(5), .mo_zone .popup_campare .box .record_bar_wrap div:nth-child(13), .mo_zone .popup_campare .box .record_bar_wrap div:nth-child(18), .mo_zone .popup_campare .box .record_bar_wrap div:nth-child(20), .mo_zone .popup_campare .box .record_bar_wrap div:nth-child(23), .mo_zone .popup_campare .box .record_bar_wrap div:nth-child(28), .mo_zone .popup_campare .box .record_bar_wrap div:nth-child(30), .mo_zone .popup_campare .box .record_bar_wrap div:nth-child(33) {
  height: var(--size9);
}

.mo_zone .popup_campare .box .record_bar_wrap div:nth-child(6) {
  height: var(--size13);
}

.mo_zone .popup_campare .box .record_bar_wrap div:nth-child(7) {
  height: var(--size23);
}

.mo_zone .popup_campare .box .record_bar_wrap div:nth-child(8) {
  height: var(--size14);
}

.mo_zone .popup_campare .box .record_bar_wrap div:nth-child(9), .mo_zone .popup_campare .box .record_bar_wrap div:nth-child(16), .mo_zone .popup_campare .box .record_bar_wrap div:nth-child(26) {
  height: var(--size29);
}

.mo_zone .popup_campare .box .record_bar_wrap div:nth-child(10) {
  height: var(--size9);
}

.mo_zone .popup_campare .box .record_bar_wrap div:nth-child(11) {
  height: var(--size13);
}

.mo_zone .popup_campare .box .record_bar_wrap div:nth-child(12), .mo_zone .popup_campare .box .record_bar_wrap div:nth-child(19), .mo_zone .popup_campare .box .record_bar_wrap div:nth-child(22), .mo_zone .popup_campare .box .record_bar_wrap div:nth-child(29), .mo_zone .popup_campare .box .record_bar_wrap div:nth-child(32), .mo_zone .popup_campare .box .record_bar_wrap div:nth-child(34) {
  height: var(--size6);
}

.mo_zone .popup_campare .box .record_bar_wrap div:nth-child(14), .mo_zone .popup_campare .box .record_bar_wrap div:nth-child(21), .mo_zone .popup_campare .box .record_bar_wrap div:nth-child(24), .mo_zone .popup_campare .box .record_bar_wrap div:nth-child(27), .mo_zone .popup_campare .box .record_bar_wrap div:nth-child(31) {
  height: var(--size16);
}

.mo_zone .popup_campare .box .record_bar_wrap div:nth-child(15), .mo_zone .popup_campare .box .record_bar_wrap div:nth-child(25) {
  height: var(--size11);
}

.mo_zone .popup_campare .box .record_bar_wrap div:nth-child(17) {
  height: var(--size16);
}

.mo_zone .popup_campare .box .record_bar_wrap.mute div {
  height: var(--size3) !important;
}

.mo_zone .popup_campare_feedback .inner {
  padding-bottom: var(--size100);
}

.mo_zone .popup_campare_feedback .box {
  padding: var(--size47) var(--size20) var(--size20);
}

.mo_zone .popup_campare_feedback .box p {
  text-align: center;
  font-size: var(--size24);
  line-height: 1;
}

.mo_zone .popup_campare_feedback .box .btn_wrap {
  padding-top: var(--size15);
  gap: var(--size8);
}

.mo_zone .popup_campare_feedback .box .btn_wrap .btn {
  height: var(--size136);
  padding-top: var(--size4);
  box-shadow: none;
  color: #fff;
  flex-direction: column;
  line-height: 1;
}

.mo_zone .popup_campare_feedback .box .btn_wrap .btn img {
  width: var(--size60);
}

.mo_zone .popup_campare_feedback .box .btn_wrap .btn.green {
  background: url("/mo/img/bg_icon_btn_green.svg") center / cover no-repeat;
}

.mo_zone .popup_campare_feedback .box .btn_wrap .btn.green:hover {
  background: url("/mo/img/bg_icon_btn_green_hover.svg") center / cover no-repeat;
}

.mo_zone .popup_campare_feedback .box .btn_wrap .btn.red {
  background: url("/mo/img/bg_icon_btn_red.svg") center / cover no-repeat;
}

.mo_zone .popup_campare_feedback .box .btn_wrap .btn.red:hover {
  background: url("/mo/img/bg_icon_btn_red_hover.svg") center / cover no-repeat;
}

.mo_zone .popup_mission_complete .box p {
  font-size: var(--size24);
  margin-top: var(--size16);
  line-height: 1;
}

.mo_zone .popup_mission_complete .box img {
  width: var(--size60);
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.mo_zone .page_practice .record_wrap.on .record_bar_wrap div.on {
  transform-origin: center;
  animation: .6s ease-in-out infinite wave;
}

.mo_zone .page_practice .record_wrap.on.h_sm .record_bar_wrap div.on {
  animation-name: wave-sm;
}

.mo_zone .popup_campare .record_bar_wrap.on div.on {
  transform-origin: center;
  animation: .6s ease-in-out infinite wave;
}

.mo_zone .popup_campare .record_bar_wrap:not(.on) div {
  transform: scaleY(1);
  background: #efefef !important;
  animation: none !important;
}

.mo_zone .page_practice .record_wrap.on .record_bar_wrap div.on:nth-child(2n), .mo_zone .popup_campare .record_bar_wrap.on div.on:nth-child(2n) {
  animation-delay: .1s;
}

.mo_zone .page_practice .record_wrap.on .record_bar_wrap div.on:nth-child(3n), .mo_zone .popup_campare .record_bar_wrap.on div.on:nth-child(3n) {
  animation-delay: .2s;
}

.mo_zone .page_practice .record_wrap.on .record_bar_wrap div.on:nth-child(4n), .mo_zone .popup_campare .record_bar_wrap.on div.on:nth-child(4n) {
  animation-delay: .3s;
}

.mo_zone .recording-text {
  font-size: var(--size26);
  color: #0555bf;
  white-space: nowrap;
  margin-right: var(--size8);
  text-shadow: 1px 1px 2px #0000001a;
  font-weight: 700;
  animation: 1.5s infinite blink;
}

.mo_zone .touch-text {
  font-size: var(--size-6);
  white-space: nowrap;
  margin-top: 6px;
  animation: 1.6s ease-in-out infinite touchHint;
  position: absolute;
  top: 42%;
  right: 52px;
}

.mo_zone .touch-f-text {
  font-size: var(--size-6);
  white-space: nowrap;
  margin-top: 6px;
  animation: 1.6s ease-in-out infinite touchHint;
  position: absolute;
  top: 39%;
  right: 52px;
}

.mo_zone .touch-s-text {
  font-size: var(--size-6);
  white-space: nowrap;
  margin-top: 6px;
  animation: 1.6s ease-in-out infinite touchHint;
  position: absolute;
  top: 87%;
  right: 31%;
}

.mo_zone .page_message .p04-wave:not(.is-active) div {
  animation: none;
  transform: scaleY(1);
}

.mo_zone .page_message .p04-wave {
  align-items: center;
  gap: var(--size3);
  display: flex;
}

.mo_zone .page_message .p04-wave div {
  width: var(--size3);
  border-radius: var(--size3);
  transform-origin: center;
  background: #0555bf;
  display: block !important;
}

.mo_zone .page_message .p04-wave.is-active div {
  animation: .6s ease-in-out infinite wave;
}

.mo_zone .page_message .p04-wave.is-active div:nth-child(2n) {
  animation-delay: .1s;
}

.mo_zone .page_message .p04-wave.is-active div:nth-child(3n) {
  animation-delay: .2s;
}

.mo_zone .page_message .p04-wave.is-active div:nth-child(4n) {
  animation-delay: .3s;
}

.mo_zone button.btn.green:disabled, .mo_zone button.btn.red:disabled, .mo_zone button.btn.green[disabled], .mo_zone button.btn.red[disabled], .mo_zone .btn.green.disabled, .mo_zone .btn.red.disabled {
  -webkit-filter: grayscale() brightness(.85);
  cursor: not-allowed;
  color: #9e9e9e !important;
}

.mo_zone .record_wrap.h_sm {
  height: var(--size48);
}

.mo_zone .record_wrap.h_sm div {
  height: 100%;
}

.mo_zone .record_wrap.h_sm .record_bar_wrap div.on {
  animation-name: wave-sm;
}

.mo_zone button, .mo_zone .btn {
  -webkit-tap-highlight-color: transparent;
}

.mo_zone button:active, .mo_zone .btn:active {
  opacity: 1 !important;
  -webkit-filter: none !important;
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes wave {
  0%, 100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(1.5);
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .4;
  }
}

@keyframes wave-sm {
  0%, 100% {
    transform: scaleY(.5);
  }

  50% {
    transform: scaleY(1);
  }
}

@media (min-width: 1024px) {
  .mo_zone.login_mo {
    display: none;
  }
}

/*# sourceMappingURL=app_1pja_uu._.css.map*/