@charset "UTF-8";
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––


    @   북미 채용 페이지

    *   2025-07-30
    *   by 정은옥


–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap");
html {
  font-size: 10px;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body, button, input, select, table, textarea {
  color: #202020;
  font-family: "Pretendard", "-apple-system", BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", sans-serif;
}

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

textarea {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background-color: transparent;
  border: 0;
  word-break: keep-all;
  word-wrap: break-word;
}

button, input {
  border-radius: 0;
  border: 0;
}

button {
  background-color: transparent;
}

fieldset, img {
  border: 0;
}

img {
  vertical-align: top;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

address, em {
  font-style: normal;
}

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

iframe {
  overflow: hidden;
  margin: 0;
  border: 0;
  padding: 0;
  vertical-align: top;
}

mark {
  background-color: transparent;
}

i {
  font-style: normal;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

    MINT UI STANDARD

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

@ 애니메이션
* 민트영어에서 사용하는 애니메이션이 많기 때문에 케이스별 정리 필요!

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

	수강권 전광판 

––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
@-webkit-keyframes marqueeLeftOrigin {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  50.1% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes marqueeLeftOrigin {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  50.1% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes marqueeLeftClone {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
  }
}
@keyframes marqueeLeftClone {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
  }
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

	Bounce In 

––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

@   공백 클래스
-   자주 사용하는 공백값 추가해서 사용

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.mgt-4 {
  margin-top: 0.4rem;
}

.mgr-4 {
  margin-right: 0.4rem;
}

.mgb-4 {
  margin-bottom: 0.4rem;
}

.mgl-4 {
  margin-left: 0.4rem;
}

.mgv-4 {
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}

.mgh-4 {
  margin-right: 0.4rem;
  margin-left: 0.4rem;
}

.pdt-4 {
  padding-top: 0.4rem;
}

.pdr-4 {
  padding-right: 0.4rem;
}

.pdb-4 {
  padding-bottom: 0.4rem;
}

.pdl-4 {
  padding-left: 0.4rem;
}

.pdv-4 {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.pdh-4 {
  padding-right: 0.4rem;
  padding-left: 0.4rem;
}

.mgt-8 {
  margin-top: 0.8rem;
}

.mgr-8 {
  margin-right: 0.8rem;
}

.mgb-8 {
  margin-bottom: 0.8rem;
}

.mgl-8 {
  margin-left: 0.8rem;
}

.mgv-8 {
  margin-top: 0.8rem;
  margin-bottom: 0.8rem;
}

.mgh-8 {
  margin-right: 0.8rem;
  margin-left: 0.8rem;
}

.pdt-8 {
  padding-top: 0.8rem;
}

.pdr-8 {
  padding-right: 0.8rem;
}

.pdb-8 {
  padding-bottom: 0.8rem;
}

.pdl-8 {
  padding-left: 0.8rem;
}

.pdv-8 {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

.pdh-8 {
  padding-right: 0.8rem;
  padding-left: 0.8rem;
}

.mgt-12 {
  margin-top: 1.2rem;
}

.mgr-12 {
  margin-right: 1.2rem;
}

.mgb-12 {
  margin-bottom: 1.2rem;
}

.mgl-12 {
  margin-left: 1.2rem;
}

.mgv-12 {
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
}

.mgh-12 {
  margin-right: 1.2rem;
  margin-left: 1.2rem;
}

.pdt-12 {
  padding-top: 1.2rem;
}

.pdr-12 {
  padding-right: 1.2rem;
}

.pdb-12 {
  padding-bottom: 1.2rem;
}

.pdl-12 {
  padding-left: 1.2rem;
}

.pdv-12 {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}

.pdh-12 {
  padding-right: 1.2rem;
  padding-left: 1.2rem;
}

.mgt-14 {
  margin-top: 1.4rem;
}

.mgr-14 {
  margin-right: 1.4rem;
}

.mgb-14 {
  margin-bottom: 1.4rem;
}

.mgl-14 {
  margin-left: 1.4rem;
}

.mgv-14 {
  margin-top: 1.4rem;
  margin-bottom: 1.4rem;
}

.mgh-14 {
  margin-right: 1.4rem;
  margin-left: 1.4rem;
}

.pdt-14 {
  padding-top: 1.4rem;
}

.pdr-14 {
  padding-right: 1.4rem;
}

.pdb-14 {
  padding-bottom: 1.4rem;
}

.pdl-14 {
  padding-left: 1.4rem;
}

.pdv-14 {
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
}

.pdh-14 {
  padding-right: 1.4rem;
  padding-left: 1.4rem;
}

.mgt-16 {
  margin-top: 1.6rem;
}

.mgr-16 {
  margin-right: 1.6rem;
}

.mgb-16 {
  margin-bottom: 1.6rem;
}

.mgl-16 {
  margin-left: 1.6rem;
}

.mgv-16 {
  margin-top: 1.6rem;
  margin-bottom: 1.6rem;
}

.mgh-16 {
  margin-right: 1.6rem;
  margin-left: 1.6rem;
}

.pdt-16 {
  padding-top: 1.6rem;
}

.pdr-16 {
  padding-right: 1.6rem;
}

.pdb-16 {
  padding-bottom: 1.6rem;
}

.pdl-16 {
  padding-left: 1.6rem;
}

.pdv-16 {
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

.pdh-16 {
  padding-right: 1.6rem;
  padding-left: 1.6rem;
}

.mgt-20 {
  margin-top: 2rem;
}

.mgr-20 {
  margin-right: 2rem;
}

.mgb-20 {
  margin-bottom: 2rem;
}

.mgl-20 {
  margin-left: 2rem;
}

.mgv-20 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.mgh-20 {
  margin-right: 2rem;
  margin-left: 2rem;
}

.pdt-20 {
  padding-top: 2rem;
}

.pdr-20 {
  padding-right: 2rem;
}

.pdb-20 {
  padding-bottom: 2rem;
}

.pdl-20 {
  padding-left: 2rem;
}

.pdv-20 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pdh-20 {
  padding-right: 2rem;
  padding-left: 2rem;
}

.mgt-24 {
  margin-top: 2.4rem;
}

.mgr-24 {
  margin-right: 2.4rem;
}

.mgb-24 {
  margin-bottom: 2.4rem;
}

.mgl-24 {
  margin-left: 2.4rem;
}

.mgv-24 {
  margin-top: 2.4rem;
  margin-bottom: 2.4rem;
}

.mgh-24 {
  margin-right: 2.4rem;
  margin-left: 2.4rem;
}

.pdt-24 {
  padding-top: 2.4rem;
}

.pdr-24 {
  padding-right: 2.4rem;
}

.pdb-24 {
  padding-bottom: 2.4rem;
}

.pdl-24 {
  padding-left: 2.4rem;
}

.pdv-24 {
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
}

.pdh-24 {
  padding-right: 2.4rem;
  padding-left: 2.4rem;
}

.mgt-28 {
  margin-top: 2.8rem;
}

.mgr-28 {
  margin-right: 2.8rem;
}

.mgb-28 {
  margin-bottom: 2.8rem;
}

.mgl-28 {
  margin-left: 2.8rem;
}

.mgv-28 {
  margin-top: 2.8rem;
  margin-bottom: 2.8rem;
}

.mgh-28 {
  margin-right: 2.8rem;
  margin-left: 2.8rem;
}

.pdt-28 {
  padding-top: 2.8rem;
}

.pdr-28 {
  padding-right: 2.8rem;
}

.pdb-28 {
  padding-bottom: 2.8rem;
}

.pdl-28 {
  padding-left: 2.8rem;
}

.pdv-28 {
  padding-top: 2.8rem;
  padding-bottom: 2.8rem;
}

.pdh-28 {
  padding-right: 2.8rem;
  padding-left: 2.8rem;
}

.mgt-30 {
  margin-top: 3rem;
}

.mgr-30 {
  margin-right: 3rem;
}

.mgb-30 {
  margin-bottom: 3rem;
}

.mgl-30 {
  margin-left: 3rem;
}

.mgv-30 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.mgh-30 {
  margin-right: 3rem;
  margin-left: 3rem;
}

.pdt-30 {
  padding-top: 3rem;
}

.pdr-30 {
  padding-right: 3rem;
}

.pdb-30 {
  padding-bottom: 3rem;
}

.pdl-30 {
  padding-left: 3rem;
}

.pdv-30 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.pdh-30 {
  padding-right: 3rem;
  padding-left: 3rem;
}

.mgt-32 {
  margin-top: 3.2rem;
}

.mgr-32 {
  margin-right: 3.2rem;
}

.mgb-32 {
  margin-bottom: 3.2rem;
}

.mgl-32 {
  margin-left: 3.2rem;
}

.mgv-32 {
  margin-top: 3.2rem;
  margin-bottom: 3.2rem;
}

.mgh-32 {
  margin-right: 3.2rem;
  margin-left: 3.2rem;
}

.pdt-32 {
  padding-top: 3.2rem;
}

.pdr-32 {
  padding-right: 3.2rem;
}

.pdb-32 {
  padding-bottom: 3.2rem;
}

.pdl-32 {
  padding-left: 3.2rem;
}

.pdv-32 {
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
}

.pdh-32 {
  padding-right: 3.2rem;
  padding-left: 3.2rem;
}

.mgt-36 {
  margin-top: 3.6rem;
}

.mgr-36 {
  margin-right: 3.6rem;
}

.mgb-36 {
  margin-bottom: 3.6rem;
}

.mgl-36 {
  margin-left: 3.6rem;
}

.mgv-36 {
  margin-top: 3.6rem;
  margin-bottom: 3.6rem;
}

.mgh-36 {
  margin-right: 3.6rem;
  margin-left: 3.6rem;
}

.pdt-36 {
  padding-top: 3.6rem;
}

.pdr-36 {
  padding-right: 3.6rem;
}

.pdb-36 {
  padding-bottom: 3.6rem;
}

.pdl-36 {
  padding-left: 3.6rem;
}

.pdv-36 {
  padding-top: 3.6rem;
  padding-bottom: 3.6rem;
}

.pdh-36 {
  padding-right: 3.6rem;
  padding-left: 3.6rem;
}

.mgt-40 {
  margin-top: 4rem;
}

.mgr-40 {
  margin-right: 4rem;
}

.mgb-40 {
  margin-bottom: 4rem;
}

.mgl-40 {
  margin-left: 4rem;
}

.mgv-40 {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.mgh-40 {
  margin-right: 4rem;
  margin-left: 4rem;
}

.pdt-40 {
  padding-top: 4rem;
}

.pdr-40 {
  padding-right: 4rem;
}

.pdb-40 {
  padding-bottom: 4rem;
}

.pdl-40 {
  padding-left: 4rem;
}

.pdv-40 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.pdh-40 {
  padding-right: 4rem;
  padding-left: 4rem;
}

.mgt-44 {
  margin-top: 4.4rem;
}

.mgr-44 {
  margin-right: 4.4rem;
}

.mgb-44 {
  margin-bottom: 4.4rem;
}

.mgl-44 {
  margin-left: 4.4rem;
}

.mgv-44 {
  margin-top: 4.4rem;
  margin-bottom: 4.4rem;
}

.mgh-44 {
  margin-right: 4.4rem;
  margin-left: 4.4rem;
}

.pdt-44 {
  padding-top: 4.4rem;
}

.pdr-44 {
  padding-right: 4.4rem;
}

.pdb-44 {
  padding-bottom: 4.4rem;
}

.pdl-44 {
  padding-left: 4.4rem;
}

.pdv-44 {
  padding-top: 4.4rem;
  padding-bottom: 4.4rem;
}

.pdh-44 {
  padding-right: 4.4rem;
  padding-left: 4.4rem;
}

.mgt-60 {
  margin-top: 6rem;
}

.mgr-60 {
  margin-right: 6rem;
}

.mgb-60 {
  margin-bottom: 6rem;
}

.mgl-60 {
  margin-left: 6rem;
}

.mgv-60 {
  margin-top: 6rem;
  margin-bottom: 6rem;
}

.mgh-60 {
  margin-right: 6rem;
  margin-left: 6rem;
}

.pdt-60 {
  padding-top: 6rem;
}

.pdr-60 {
  padding-right: 6rem;
}

.pdb-60 {
  padding-bottom: 6rem;
}

.pdl-60 {
  padding-left: 6rem;
}

.pdv-60 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.pdh-60 {
  padding-right: 6rem;
  padding-left: 6rem;
}

.mgt-64 {
  margin-top: 6.4rem;
}

.mgr-64 {
  margin-right: 6.4rem;
}

.mgb-64 {
  margin-bottom: 6.4rem;
}

.mgl-64 {
  margin-left: 6.4rem;
}

.mgv-64 {
  margin-top: 6.4rem;
  margin-bottom: 6.4rem;
}

.mgh-64 {
  margin-right: 6.4rem;
  margin-left: 6.4rem;
}

.pdt-64 {
  padding-top: 6.4rem;
}

.pdr-64 {
  padding-right: 6.4rem;
}

.pdb-64 {
  padding-bottom: 6.4rem;
}

.pdl-64 {
  padding-left: 6.4rem;
}

.pdv-64 {
  padding-top: 6.4rem;
  padding-bottom: 6.4rem;
}

.pdh-64 {
  padding-right: 6.4rem;
  padding-left: 6.4rem;
}

.mgt-80 {
  margin-top: 8rem;
}

.mgr-80 {
  margin-right: 8rem;
}

.mgb-80 {
  margin-bottom: 8rem;
}

.mgl-80 {
  margin-left: 8rem;
}

.mgv-80 {
  margin-top: 8rem;
  margin-bottom: 8rem;
}

.mgh-80 {
  margin-right: 8rem;
  margin-left: 8rem;
}

.pdt-80 {
  padding-top: 8rem;
}

.pdr-80 {
  padding-right: 8rem;
}

.pdb-80 {
  padding-bottom: 8rem;
}

.pdl-80 {
  padding-left: 8rem;
}

.pdv-80 {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.pdh-80 {
  padding-right: 8rem;
  padding-left: 8rem;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

@ 폰트 클래스

* by 차민우

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

    *   font size 별 정리

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.ttl-12 {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.8rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}

.desc-12 {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.8rem;
  letter-spacing: -0.01em;
}

.ttl-13 {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.8rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}

.desc-13 {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.8rem;
  letter-spacing: -0.01em;
}

.ttl-14 {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}

.desc-14 {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2rem;
  letter-spacing: -0.01em;
}

.ttl-15 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2.2rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}

.desc-15 {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2.2rem;
  letter-spacing: -0.01em;
}

.ttl-16 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.4rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}

.desc-16 {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.4rem;
  letter-spacing: -0.01em;
}

.ttl-18 {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.8rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}

.desc-18 {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 2.8rem;
  letter-spacing: -0.01em;
}

.ttl-20 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 3rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}

.desc-20 {
  font-size: 2rem;
  font-weight: 400;
  line-height: 3rem;
  letter-spacing: -0.01em;
}

.ttl-24 {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 3.2rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}

.desc-24 {
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 3.2rem;
  letter-spacing: -0.01em;
}

.ttl-28 {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 3.8rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}

.desc-28 {
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 3.8rem;
  letter-spacing: -0.01em;
}

.ttl-30 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 4rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}

.desc-30 {
  font-size: 3rem;
  font-weight: 400;
  line-height: 4rem;
  letter-spacing: -0.01em;
}

.ttl-32 {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 4.4rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}

.desc-32 {
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 4.4rem;
  letter-spacing: -0.01em;
}

.ttl-40 {
  font-size: 4rem;
  font-weight: 700;
  line-height: 5.6rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}

.desc-40 {
  font-size: 4rem;
  font-weight: 400;
  line-height: 5.6rem;
  letter-spacing: -0.01em;
}

.ttl-48 {
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 6.4rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}

.desc-48 {
  font-size: 4.8rem;
  font-weight: 400;
  line-height: 6.4rem;
  letter-spacing: -0.01em;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

@   Global Class
*   자주 사용하는 스타일들 클래스로 정의해서 사용

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.flex-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.flex-wrap.center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.flex-wrap.align-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.flex-wrap.justify-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.flex-wrap.column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.relative {
  position: relative;
}

.d-none {
  display: none !important;
}

.d-block {
  display: block;
}

.cursor-pointer {
  cursor: pointer;
}

.b-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* 폰트 관련 클래스 ––––––––––––––––––––––––––––– */
.font-md {
  font-weight: 500;
}

.semi-bold {
  font-weight: 600;
}

.bold {
  font-weight: 700;
}

.center {
  text-align: center;
}

.pre-line {
  white-space: pre-line;
}

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

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

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

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

@ mixin

* 자주사용하는 속성들 mixin 으로 추가부탁드립니다 !

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

    *   font size 별 정리

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

    *   변수
    - 자주사용하는 속성

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

*   Color Palette
    2024-11-21 ver
    2024-12-13 ver1.1 : 가독성 개선

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

*  구 컬러팔레트

-   위에 업데이트 된 팔레트 컬러에 없는 컬러값들 변수 유지
-   컬러값 클래스들은 유지 / 미사용 클래스는 삭제

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* blue */
/* red */
/* point  */
.black-fa {
  color: #FAFAFA;
}

.bg-black-fa {
  background-color: #FAFAFA;
}

.black-f5 {
  color: #F5F5F5;
}

.bg-black-f5 {
  background-color: #F5F5F5;
}

.black-ee {
  color: #EEE;
}

.bg-black-ee {
  background-color: #EEE;
}

.black-e1 {
  color: #E1E1E1;
}

.bg-black-e1 {
  background-color: #E1E1E1;
}

.black-cc {
  color: #CCC;
}

.bg-black-cc {
  background-color: #CCC;
}

.black-aa {
  color: #AAA;
}

.bg-black-aa {
  background-color: #AAA;
}

.black-1 {
  color: #111;
}

.bg-black-1 {
  background-color: #111;
}

.black-3 {
  color: #333;
}

.bg-black-3 {
  background-color: #333;
}

.black-5 {
  color: #555;
}

.bg-black-5 {
  background-color: #555;
}

.black-7 {
  color: #777;
}

.bg-black-7 {
  background-color: #777;
}

.black-9 {
  color: #999;
}

.bg-black-9 {
  background-color: #999;
}

.blue-primary {
  color: #0F91FF;
}

.bg-blue-primary {
  background-color: #0F91FF;
}

.blue-secondary {
  color: #34A2FF;
}

.bg-blue-secondary {
  background-color: #34A2FF;
}

.blue-dark {
  color: #0260C8;
}

.bg-blue-dark {
  background-color: #0260C8;
}

.blue-point {
  color: #00FFF6;
}

.bg-blue-point {
  background-color: #00FFF6;
}

.red {
  color: #FF4D4C;
}

.bg-red {
  background-color: #FF4D4C;
}

.green {
  color: #009900;
}

.bg-green {
  background-color: #009900;
}

.orange {
  color: #F49527;
}

.bg-orange {
  background-color: #F49527;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––


* Mobile 해상도

* 320 ~
* 기준점 찾아서 정리

* Tablet 768px ~
- 웹브라우저 태블릿으로 접속하면 무조건 모바일 버전으로 노출

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (min-width: 768px) {
  #wrap:not(.pc-wrap) {
    width: 768px;
    margin: 0 auto;
    border-left: 1px solid #E1E1E1;
    border-right: 1px solid #E1E1E1;
  }
  #wrap:not(.pc-wrap) #container .m-service-setting-result.active::after {
    top: 0;
  }
  #wrap:not(.pc-wrap) #footerWrap {
    max-width: 768px;
    margin: 0 auto;
  }
  #wrap:not(.pc-wrap) > .nav-area {
    position: fixed;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 768px;
    height: 6rem;
    z-index: 10;
  }
  #wrap:not(.pc-wrap) > .nav-area header::after {
    width: 100%;
  }
  #wrap:not(.pc-wrap) > .nav-area.active {
    height: 100%;
  }
  #wrap:not(.pc-wrap) > .nav-area.active .nav-menu {
    border-left: 1px solid #E1E1E1;
    border-right: 1px solid #E1E1E1;
  }
  #wrap:not(.pc-wrap) > .nav-area.active .nav-group {
    border-left: 1px solid #E1E1E1;
    border-right: 1px solid #E1E1E1;
    opacity: 1;
  }
  #wrap:not(.pc-wrap) > .nav-area.active ~ #container .content-wrap .floating-wrap {
    display: none;
  }
  #wrap:not(.pc-wrap) > .nav-area.active ~ #container .content-wrap .btn-floating-lesson-add {
    display: none;
  }
  #wrap:not(.pc-wrap) > .nav-area::after {
    width: 100%;
  }
  #wrap:not(.pc-wrap) > .nav-area:has(~ #container .m-lesson-feedback-wrap) {
    background-color: #17181c;
  }
  #wrap:not(.pc-wrap) > .nav-area:has(~ #container .content-wrap.m-search-list-wrap) {
    z-index: -1;
  }
  #wrap:not(.pc-wrap) .head-wrap {
    border-left: 1px solid #E1E1E1;
    border-right: 1px solid #E1E1E1;
  }
  #wrap:not(.pc-wrap) .head-wrap .sub-head-close {
    z-index: 2;
  }
  #wrap:not(.pc-wrap) .nav-group {
    opacity: 0;
  }
  #wrap:not(.pc-wrap) .nav-my-shortcuts.main ul.shortcuts-list li .sort-items span {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 2rem;
    letter-spacing: -0.01em;
  }
  #wrap:not(.pc-wrap) .nav-my-shortcuts:not(.pc) .sort-items span {
    height: auto;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 2rem;
    letter-spacing: -0.01em;
  }
  #wrap:not(.pc-wrap) div.loader-wrap::before {
    max-width: 768px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  #wrap:not(.pc-wrap) .content-wrap {
    float: none;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
  }
  #wrap:not(.pc-wrap) .content-wrap.modify-info-wrap {
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  #wrap:not(.pc-wrap) .content-wrap #select2 .user-manual-tab {
    width: 768px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    border-left: 1px solid #E1E1E1;
    border-right: 1px solid #E1E1E1;
  }
  #wrap:not(.pc-wrap) .content-wrap .pc-user-manual .user-manual-cont.body .body-list-view {
    width: 768px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    padding: 0 1.5rem;
  }
  #wrap:not(.pc-wrap) .content-wrap:has(.search-header) {
    border: 0;
  }
  #wrap:not(.pc-wrap) div.search-header {
    width: 768px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    border-left: 1px solid #E1E1E1;
    border-right: 1px solid #E1E1E1;
  }
  #wrap:not(.pc-wrap) div.search-header div.search-btns-wrap::before {
    left: -2px;
    width: 768px;
  }
  #wrap:not(.pc-wrap) .m-main-community-ver-wrap {
    padding-bottom: 2rem;
  }
  #wrap:not(.pc-wrap) .m-main-community-ver-wrap div.floating-wrap {
    position: sticky;
    left: 100%;
    margin-right: 2rem;
  }
  #wrap:not(.pc-wrap) .m-main-community-ver-wrap:not(.login) {
    background: #FAFAFA;
  }
  #wrap:not(.pc-wrap) .m-main-community-ver-wrap:not(.login) div.floating-wrap {
    margin-top: -7rem;
  }
  #wrap:not(.pc-wrap) .navi-fix-wrap {
    max-width: 768px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    border-left: 1px solid #E1E1E1;
    border-right: 1px solid #E1E1E1;
  }
  #wrap:not(.pc-wrap) .navi-fix-wrap.static {
    border-left: 0;
    border-right: 0;
    -webkit-transform: none;
            transform: none;
  }
  #wrap:not(.pc-wrap) .navi-fix-wrap.top-sticky {
    left: 0;
    border-left: 0;
    border-right: 0;
    -webkit-transform: none;
            transform: none;
  }
  #wrap:not(.pc-wrap) .m-mynews-list-wrap .navi-fix-wrap {
    left: initial;
    -webkit-transform: none;
            transform: none;
  }
  #wrap:not(.pc-wrap) .tapBtn_area.fixed {
    width: 768px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    border-left: 1px solid #E1E1E1;
    border-right: 1px solid #E1E1E1;
  }
  #wrap:not(.pc-wrap) .new-comment-wrap :is(div.top-area, div.nc-fix-cmt) {
    width: 768px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    border-left: 1px solid #E1E1E1;
    border-right: 1px solid #E1E1E1;
  }
  #wrap:not(.pc-wrap) .m-my-lesson-list-wrap .my-act-tab.mypage::after {
    width: 100%;
  }
  #wrap:not(.pc-wrap) .m-my-course-list-cont > ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 1.6rem;
  }
  #wrap:not(.pc-wrap) .m-my-course-list-cont > ul > li {
    width: calc(50% - 0.8rem);
  }
  #wrap:not(.pc-wrap) .m-my-course-list-cont > ul + ul {
    margin-top: 1.6rem;
  }
  #wrap:not(.pc-wrap) .m-my-course-list-cont .m-course-info-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100%;
    margin-bottom: 0;
  }
  #wrap:not(.pc-wrap) .m-my-course-list-cont .m-course-info-box .course-btn-area {
    margin-top: auto;
  }
  #wrap:not(.pc-wrap) .m-my-course-list-cont .m-course-info-box .course-btn-area a {
    margin-top: 2rem;
  }
  #wrap:not(.pc-wrap) .m-my-course-list-cont .m-course-info-box.unregist a {
    height: 100%;
  }
  #wrap:not(.pc-wrap) .m-my-course-list-cont .m-course-info-box.unregist .btn-lesson-reg {
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
  #wrap:not(.pc-wrap) .m-lesson-feedback-wrap {
    min-height: calc(100vh - env(safe-area-inset-top));
    min-height: calc(100vh - constant(safe-area-inset-top));
  }
  #wrap:not(.pc-wrap) .m-lesson-feedback-view .lesson-info-box {
    background-color: transparent;
  }
  #wrap:not(.pc-wrap) .m-lesson-feedback-view .lesson-info-box lesson-info-detail {
    max-width: calc(768px - 8rem);
    margin-left: auto;
    margin-right: auto;
  }
  #wrap:not(.pc-wrap) .m-lesson-feedback-view .lesson-info-box .in-btns a.btn-script-service {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }
  #wrap:not(.pc-wrap) .m-lesson-feedback-view .banner-area {
    width: 100%;
    margin: 0;
  }
  #wrap:not(.pc-wrap) .m-lesson-feedback-view .nav-area .tab-default-wrap {
    padding-left: calc((100% - 768px + 4rem) / 2);
    padding-right: calc((100% - 768px + 4rem) / 2);
  }
  #wrap:not(.pc-wrap) .m-lesson-feedback-view .lesson-feedback-detail-cont > .tab-wrap {
    left: 0;
    padding-left: calc((100% - 768px + 4rem) / 2);
    padding-right: calc((100% - 768px + 4rem) / 2);
  }
  #wrap:not(.pc-wrap) .m-lesson-feedback-view .textbook-view-wrap {
    max-width: calc(768px - 4rem);
    max-height: 900px;
  }
  #wrap:not(.pc-wrap) .m-lesson-feedback-view .lesson-recording-file-list {
    max-width: calc(768px - 4rem);
  }
  #wrap:not(.pc-wrap) .m-lesson-feedback-list .feedback-info-item.no-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  #wrap:not(.pc-wrap) .my-act-tab.mypage::after {
    width: 100%;
  }
  #wrap:not(.pc-wrap) .m-mint-service-wrap .index-contents {
    max-width: 766px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  #wrap:not(.pc-wrap) div.search-pop {
    width: 768px;
    left: 50%;
    -webkit-transform: translate(-50%, calc(60px + 5.5rem));
            transform: translate(-50%, calc(60px + 5.5rem));
    border-right: 1px solid #E1E1E1;
  }
  #wrap:not(.pc-wrap) .m-mbo-wrap {
    width: 768px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  #wrap:not(.pc-wrap) .m-mbo-wrap :is(.navi-fix-wrap, .mbo-content) {
    border-left: 1px solid #E1E1E1;
    border-right: 1px solid #E1E1E1;
  }
  #wrap:not(.pc-wrap) .tooltip-wrap div.tooltip-bg {
    width: 766px;
    height: 100vh;
  }
  #wrap:not(.pc-wrap) .m-landing-class-section-regist {
    position: sticky;
    width: 768px;
  }
  #wrap:not(.pc-wrap) .m-landing-correct-wrap .m-landing-class-section-regist.sticky {
    position: sticky;
  }
  #wrap:not(.pc-wrap) div.pop-rpl-learning-wrap.mo {
    width: 768px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  #wrap:not(.pc-wrap) .pop-wordbook-wrap.mo {
    width: 768px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    border-left: 1px solid #E1E1E1;
    border-right: 1px solid #E1E1E1;
  }
  #wrap:not(.pc-wrap) .pop-wordbook-wrap.mo .learning-pronounce .pop-footer .in-btns {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin-left: 2rem;
  }
  #wrap:not(.pc-wrap) .pop-wordbook-wrap.mo .learning-pronounce .pop-footer .btn-switch {
    position: static;
    margin-right: auto;
  }
  #wrap:not(.pc-wrap) .pop-wordbook-category-wrap.mo {
    left: initial;
    -webkit-transform: none;
            transform: none;
  }
  #wrap:not(.pc-wrap) .section-guide-link {
    width: 768px;
    margin: 0 -2rem;
  }
  #wrap:not(.pc-wrap) .m-pop-schedule-postpone-notice .swiper-container {
    width: 768px;
    margin: 0;
  }
  #wrap:not(.pc-wrap) .monthly-topic-container {
    border-left: 1px solid #E1E1E1;
    border-right: 1px solid #E1E1E1;
  }
  #wrap:not(.pc-wrap) #summernote ~ .note-editor .modal-dialog {
    margin: 0 auto;
  }
  #wrap:not(.pc-wrap) #sn-checkbox-open-in-new-window {
    position: static;
    margin-left: 0;
    margin-right: 8px;
  }
  .pop-after-review.mo .pop-container {
    width: 768px;
  }
  .m-schedule-set-wrap .m-schedule-set.m-service-setting:has(.m-schedule-character-search.tutor-name.active) {
    left: auto;
    -webkit-transform: none;
            transform: none;
  }
  .pc-schedule-set-time-box.time-search.mo.active {
    width: 768px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .m-order-payment-wrap .credit-card-guide + #payment-method {
    margin: 2rem;
  }
  .m-main-community-ver-wrap .main-banner-slide {
    height: 20rem;
  }
}
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

    ALl Component
    - 컴포넌트 추가되면 import 부탁드립니다.

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
@ Button (mui-btn)

** SIZE **
- xxs   : 28px
- xs    : 36px
- sm    : 40px
- md    : 48px
- lg    : 52px
- xl    : 60px

** Color **
- primary
- secondary

** TYPE **
- solid (default)
- outline
- icon
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.mui-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 0.8rem;
  border-radius: 0.8rem;
}
.mui-btn .mint-icon {
  font-size: 1.8rem;
}
.mui-btn .btn-txt {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}
.mui-btn .btn-txt .mint-icon {
  margin-top: -2px;
}
.mui-btn .white {
  color: #fff;
}
.mui-btn.xxs {
  min-width: 6rem;
  height: 2.8rem;
}
.mui-btn.xs {
  min-width: 6.8rem;
  height: 3.6rem;
}
.mui-btn.sm {
  min-width: 8rem;
  height: 4rem;
}
.mui-btn.md {
  min-width: 9.6rem;
  height: 4.8rem;
}
.mui-btn.lg {
  min-width: auto;
  height: 5.2rem;
}
.mui-btn.xl {
  min-width: 11.2rem;
  height: 6rem;
}
.mui-btn.w-100 {
  width: 100%;
}
.mui-btn.primary {
  background-color: #0F91FF;
}
.mui-btn.primary .btn-txt {
  color: #fff;
}
.mui-btn.primary .mint-icon {
  color: #fff;
}
.mui-btn.primary.outline {
  background-color: #fff;
  border: 1px solid #0F91FF;
}
.mui-btn.primary.outline .btn-txt {
  color: #0F91FF;
}
.mui-btn.primary.outline .mint-icon {
  color: #0F91FF;
}
.mui-btn.primary.outline:not(:disabled):active {
  background-color: #DEF0FF;
  border-color: #0B6DBF;
}
@media screen and (min-width: 1024px) {
  .mui-btn.primary.outline:not(:disabled):hover {
    background-color: #F3FAFF;
    border-color: #0F91FF;
  }
}
.mui-btn.primary:active {
  background-color: #0B6DBF;
}
.mui-btn.primary.disabled {
  pointer-events: none;
  background-color: #B5DDFF;
  border: 0;
}
.mui-btn.primary.disabled .btn-txt {
  color: #fff;
}
.mui-btn.primary.disabled .mint-icon {
  color: #fff;
}
.mui-btn.primary:disabled {
  pointer-events: none;
  background-color: #B5DDFF;
  border: 0;
}
.mui-btn.primary:disabled .btn-txt {
  color: #fff;
}
.mui-btn.primary:disabled .mint-icon {
  color: #fff;
}
@media screen and (min-width: 1024px) {
  .mui-btn.primary:hover {
    background-color: #0C74CC;
  }
}
.mui-btn.secondary {
  background-color: #555;
}
.mui-btn.secondary .btn-txt {
  color: #fff;
}
.mui-btn.secondary .mint-icon {
  color: #fff;
}
.mui-btn.secondary.outline {
  border: 1px solid #E1E1E1;
  background-color: #fff;
}
.mui-btn.secondary.outline .btn-txt {
  color: #555;
}
.mui-btn.secondary.outline .mint-icon {
  color: #555;
}
.mui-btn.secondary.outline:not(:disabled):active {
  background-color: #F5F5F5;
  border-color: #555;
}
@media screen and (min-width: 1024px) {
  .mui-btn.secondary.outline:not(:disabled):hover {
    background-color: #FAFAFA;
    border-color: #E1E1E1;
  }
}
.mui-btn.secondary:active {
  background-color: #111;
}
.mui-btn.secondary.disabled {
  pointer-events: none;
  background-color: #E1E1E1;
  border: 0;
}
.mui-btn.secondary.disabled .btn-txt {
  color: #999;
}
.mui-btn.secondary.disabled .mint-icon {
  color: #999;
}
.mui-btn.secondary:disabled {
  pointer-events: none;
  background-color: #E1E1E1;
  border: 0;
}
.mui-btn.secondary:disabled .btn-txt {
  color: #999;
}
.mui-btn.secondary:disabled .mint-icon {
  color: #999;
}
@media screen and (min-width: 1024px) {
  .mui-btn.secondary:hover {
    background-color: #333;
  }
}
.mui-btn.icon {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 4.8rem;
  height: 4.8rem;
  padding: 0.8rem;
}
.mui-btn.icon .btn-txt {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.8rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}
.mui-btn.icon:has(.btn-txt) {
  width: 6rem;
  height: 6rem;
}
.mui-btn:is(.md, .lg, .xl) .mint-icon {
  font-size: 2rem;
}
.mui-btn:is(.md, .lg, .xl) .btn-txt {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.4rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
구소스.. 왜 벌써
@ Button (mint-btn)

** SIZE **
- sm
- md (Default)
- lg

** Color **
- black
- primary
- gray

** TYPE **
- Solid (Default)
- outline

** Shape **
- Rect (Default)
- Round

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.mint-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 5.2rem;
  padding: 0 0.8rem;
  border-radius: 0.8rem;
}
.mint-btn .mint-icon {
  color: #fff;
}
.mint-btn .btn-txt {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.4rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}
.mint-btn .btn-txt.sm {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}
.mint-btn .btn-txt.lg {
  font-size: 2rem;
  font-weight: 700;
  line-height: 3rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}
.mint-btn .btn-txt.normal {
  font-weight: 400;
}
.mint-btn .btn-txt.semi {
  font-weight: 600;
}
.mint-btn.xs {
  height: 4rem;
}
.mint-btn.sm {
  height: 4.8rem;
}
.mint-btn.lg {
  height: 6rem;
}
.mint-btn.primary {
  background-color: #0F91FF;
}
.mint-btn.black {
  background-color: #111;
}
.mint-btn.red {
  background-color: #FF4D4C;
}
.mint-btn.cyan {
  background-color: #23C69F;
}
.mint-btn:is(.primary, .black, .red, .cyan, .disabled, :disabled) .btn-txt {
  color: #fff;
}
.mint-btn.outline {
  background-color: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: #CCC;
}
.mint-btn.outline .btn-txt {
  color: #333;
}
.mint-btn.outline.primary {
  border-color: #0F91FF;
}
.mint-btn.outline.primary .btn-txt {
  color: #0F91FF;
}
.mint-btn.outline.black {
  border-color: #111;
}
.mint-btn.outline.gray {
  border-color: #777;
}
.mint-btn.outline.gray .btn-txt {
  color: #777;
}
.mint-btn.round {
  border-radius: 3rem;
}
.mint-btn.disabled {
  background-color: #CCC;
  pointer-events: none;
}
.mint-btn.disabled.primary {
  background-color: #B5DDFF;
}
.mint-btn:disabled {
  background-color: #CCC;
}
.mint-btn:disabled.primary {
  background-color: #B5DDFF;
}

.mint-btn-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-column-gap: 0.8rem;
     -moz-column-gap: 0.8rem;
          column-gap: 0.8rem;
}
.mint-btn-wrap.column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 1.2rem;
}

.a-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.4rem 0;
  border: 1px solid #CCC;
  border-radius: 3rem;
  text-align: center;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
@   뱃지

@   Size
-   sm : Default
-   md

@   Shape
-   Rect : Default
-   Round

@   Type
-   Solid : Default
-   Outline

@   Color
-   디자인시스템에 있는거 다 추가 20250120

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.mint-badge {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 2rem;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  border-radius: 0.4rem;
  font-style: normal;
}
.mint-badge .txt {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.8rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}
.mint-badge.red {
  background-color: #FFDBDB;
  color: #FF4D4C;
}
.mint-badge.yellow {
  background-color: #FFF0C0;
  color: #CE8600;
}
.mint-badge.sky {
  background-color: #DEF0FF;
  color: #0F91FF;
}
.mint-badge.gray {
  background-color: #E1E1E1;
  color: #555;
}
.mint-badge.black {
  background-color: #333;
  color: #fff;
}
.mint-badge.orange {
  background-color: #FCE6CC;
  color: #F28200;
}
.mint-badge.blue {
  background-color: #E5EBFD;
  color: #2D5CF4;
}
.mint-badge.violet {
  background-color: #EEE3FC;
  color: #8D40EE;
}
.mint-badge.green {
  background-color: #C9F8ED;
  color: #14B8A6;
}
.mint-badge.cyan {
  background-color: #BBF6F4;
  color: #00d0c9;
}
.mint-badge.outline {
  background-color: #fff;
  border-width: 1px;
  border-style: solid;
}
.mint-badge.outline.gray {
  border-color: #AAA;
  color: #999;
}
.mint-badge.outline.black {
  border-color: #333;
  color: #333;
}
.mint-badge.round {
  border-radius: 4rem;
}
.mint-badge.md {
  height: 2.4rem;
}
.mint-badge.md .txt {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 2rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

@   Chip

-   디자인 사용이 잦아져서 추가
-   믹스인으로 정의
    > 사이즈 및 컬러 추가할 예정
-   간격은 시안에 따라서 추가 설정
-   활성화 on 클래스

#   기본값
- height: 36px
- fontSize: 14px

#   4개의 활성화 타입
-   primary =   color / border 변경
-   primary soft = color / borer 변경
-   primary solid = background/ color 변경
-   secondary solid = background / color 변경

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.mint-chip-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.mint-chip-list.primary .on {
  border-color: #0F91FF;
}
.mint-chip-list.primary .on button {
  color: #0F91FF;
}
.mint-chip-list.primary.soft .on {
  background-color: #F3FAFF;
}
.mint-chip-list.primary.solid .on {
  background-color: #0F91FF;
  border: 0;
}
.mint-chip-list.primary.solid .on button {
  color: #fff;
}
.mint-chip-list.secondary.solid .on {
  background-color: #555;
  border: 0;
}
.mint-chip-list.secondary.solid .on button {
  color: #fff;
}
.mint-chip-list.rect .mint-chip {
  border-radius: 0.6rem;
}

.mint-chip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 3.6rem;
  border: 1px solid #E1E1E1;
  border-radius: 5rem;
  cursor: pointer;
}
.mint-chip button {
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}
.mint-chip button {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 2rem;
  letter-spacing: -0.01em;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

    @   Dropdown..

    -   mui-dropdown
    -   상하패딩, 폰트사이즈는 기준을 잡기가 ?
    -   페이지 내 자체 mixin 활용하기? 어떰


–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.mui-dropdown-wrap {
  position: relative;
}
.mui-dropdown-wrap [class^=txt-] {
  color: #555;
}
.mui-dropdown-wrap .txt-13 {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.8rem;
  letter-spacing: -0.01em;
}
.mui-dropdown-wrap .txt-14 {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 2rem;
  letter-spacing: -0.01em;
}
.mui-dropdown-wrap .txt-15 {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2.2rem;
  letter-spacing: -0.01em;
}
.mui-dropdown-wrap .txt-16 {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2.4rem;
  letter-spacing: -0.01em;
}
.mui-dropdown-wrap .btn-select {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding: 1rem 0.8rem 1rem 1.2rem;
  border: 1px solid #E1E1E1;
  border-radius: 0.8rem;
  text-align: left;
  -webkit-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
}
.mui-dropdown-wrap .btn-select .arrow-down {
  margin-left: auto;
  color: #555;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
.mui-dropdown-wrap .btn-select.on {
  border-color: #0F91FF;
}
.mui-dropdown-wrap .btn-select.on .arrow-down {
  -webkit-transform: rotateX(-180deg);
          transform: rotateX(-180deg);
}
.mui-dropdown-wrap .btn-item {
  width: 100%;
  padding: 1.2rem 1.6rem;
  text-align: left;
}
.mui-dropdown-wrap .btn-item:has(.chevron-right) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding-right: 0.8rem;
}
.mui-dropdown-wrap .btn-item:hover {
  background-color: #FAFAFA;
}
.mui-dropdown-wrap .btn-item:active {
  background-color: #F5F5F5;
}
.mui-dropdown-wrap .btn-item.on {
  background-color: #F3FAFF;
}
.mui-dropdown-wrap .btn-item.on [class^=txt-] {
  color: #0F91FF;
}
.mui-dropdown-wrap .btn-item:first-of-type {
  padding-top: 1.4rem;
}
.mui-dropdown-wrap .btn-item:last-of-type {
  padding-bottom: 1.4rem;
}
.mui-dropdown-wrap .item-container {
  margin-top: 0.8rem;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 0;
  border-radius: 0.8rem;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.mui-dropdown-wrap .item-container::before {
  top: -0.8rem;
  height: 0.8rem;
}
.mui-dropdown-wrap .item-container .item-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #fff;
  border: 1px solid #E1E1E1;
  border-radius: 0.8rem;
  clip-path: inset(0 0 100% 0);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  overflow: hidden;
}
.mui-dropdown-wrap .item-container .btn-item .chevron-right {
  margin-left: auto;
}
.mui-dropdown-wrap .item-container::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background-color: transparent;
  display: none;
}
.mui-dropdown-wrap .item-container.active {
  max-height: -webkit-max-content;
  max-height: -moz-max-content;
  max-height: max-content;
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08), 0 0 8px 0 rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08), 0 0 8px 0 rgba(0, 0, 0, 0.08);
}
.mui-dropdown-wrap .item-container.active .item-wrap {
  clip-path: inset(0 0 0 0);
}
.mui-dropdown-wrap .item-container.active::before {
  display: block;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

@   form

-   일단 정의된거는 radio랑 checkbox
-   input 확정되면 추가 작업예정

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.mui-form-wrap :is([type=radio], [type=checkbox]) {
  display: none;
}

.mui-radiobox {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.mui-radiobox .radio-unchecked {
  color: #E1E1E1;
}
.mui-radiobox label {
  margin-bottom: 0;
  font-weight: initial;
}
.mui-radiobox:has(input:checked) .radio-unchecked::after {
  content: "\e837";
  color: #0F91FF;
}
.mui-radiobox:has(input:disabled) .radio-unchecked {
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' fill='%23E1E1E1' stroke='%23CCC' stroke-width='2'/%3E%3C/svg%3E");
  background-size: cover;
}
.mui-radiobox:has(input:disabled) .radio-unchecked::after {
  display: none;
}
.mui-radiobox.error .radio-unchecked {
  color: #FF4D4C;
}
.mui-radiobox :is([type=radio], [type=checkbox]) {
  display: none;
}
.mui-radiobox input:not(:disabled) + label {
  cursor: pointer;
}

.mui-checkbox {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.mui-checkbox .checkbox-blank {
  color: #E1E1E1;
}
.mui-checkbox label {
  margin-bottom: 0;
  font-weight: initial;
}
.mui-checkbox:has(input:checked) .checkbox-blank::after {
  content: "\e834";
  font-variation-settings: "FILL" 1;
  color: #0F91FF;
}
.mui-checkbox:has(input:disabled) .checkbox-blank {
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cmask id='a' fill='%23fff'%3E%3Cpath d='M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Z'/%3E%3C/mask%3E%3Cpath fill='%23E1E1E1' d='M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Z'/%3E%3Cpath fill='%23CCC' d='M5 5h14V1H5v4Zm14 0v14h4V5h-4Zm0 14H5v4h14v-4ZM5 19V5H1v14h4Zm0 0H1a4 4 0 0 0 4 4v-4Zm14 0v4a4 4 0 0 0 4-4h-4Zm0-14h4a4 4 0 0 0-4-4v4ZM5 1a4 4 0 0 0-4 4h4V1Z' mask='url(%23a)'/%3E%3C/svg%3E");
  background-size: cover;
}
.mui-checkbox:has(input:disabled) .checkbox-blank::after {
  display: none;
}
.mui-checkbox.error .checkbox-blank {
  color: #FF4D4C;
}
.mui-checkbox :is([type=radio], [type=checkbox]) {
  display: none;
}
.mui-checkbox input:not(:disabled) + label {
  cursor: pointer;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

@   Input
@   높이
    ㄴ 기본 :   40
    ㄴ lg   :   52

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.mui-input {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  height: 4rem;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  border: 1px solid #E1E1E1;
  border-radius: 0.8rem;
}
.mui-input input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border: 0;
  outline: 0;
}
.mui-input label {
  margin-bottom: 0;
  font-weight: initial;
}
.mui-input .btn-wrap {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-left: auto;
}
.mui-input .btn-function {
  padding: 0.8rem;
}
.mui-input .btn-function .mint-icon {
  font-size: 2rem;
}
.mui-input.w-100 {
  width: 100%;
}
.mui-input:hover {
  border-color: #AAA;
}
.mui-input:has(input:focus) {
  border-color: #0F91FF;
}
.mui-input:has(.left) {
  padding-left: 0.4rem;
}
.mui-input:has(.search) {
  padding-right: 0.4rem;
}
.mui-input.disabled {
  background-color: #F5F5F5;
}
.mui-input.disabled:hover {
  border-color: #E1E1E1;
}
.mui-input.error {
  border-color: #FF4D4C;
}
.mui-input.lg {
  height: 5.2rem;
  padding-left: 2rem;
  padding-right: 2rem;
}
.mui-input.lg .btn-function .mint-icon {
  font-size: 2.4rem;
}
.mui-input.lg:has(.left) {
  padding-left: 1.2rem;
}
.mui-input.lg:has(.search) {
  padding-right: 1.2rem;
}

.mui-textarea {
  border: 1px solid #E1E1E1;
}
.mui-textarea textarea {
  width: 100%;
  border: 0;
  outline: 0;
  resize: none;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

*   Icon
    (Material Icon Font)

- font-weight 로 두께 설정
- 자주 쓰는 아이콘 정리
    ㄴ 아이콘 정리를 위해 분류 2025-02-25

- CSS compile 될 때 유니코드 숫자 - > 아이콘으로 자동 컴파일 되어서
    ㄴ유니코드 유지를 위해 mixin으로 변경.. 2024-01-25

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
[class^=mint-icon] {
  font-family: "mint-icon" !important;
  font-weight: 400;
  font-style: normal;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
          font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.mint-icon.arrow-up::after {
  content: '\e5ce';
}
.mint-icon.arrow-down::after {
  content: '\e5cf';
}
.mint-icon.arrow-left::after {
  content: '\e5e0';
}
.mint-icon.arrow-right::after {
  content: '\e5e1';
}
.mint-icon.arrow-up-fill::after {
  content: '\e5c7';
}
.mint-icon.arrow-down-fill::after {
  content: '\e5c5';
}
.mint-icon.arrow-left-fill::after {
  content: '\e5de';
}
.mint-icon.arrow-right-fill::after {
  content: '\e5df';
}
.mint-icon.arrow-back::after {
  content: '\e5c4';
}
.mint-icon.arrow-forward::after {
  content: '\e5c8';
}
.mint-icon.arrow-upward::after {
  content: '\e5d8';
}
.mint-icon.arrow-downward::after {
  content: '\e5db';
}
.mint-icon.double-arrow::after {
  content: '\eac9';
}
.mint-icon.double-arrow-down::after {
  content: '\ead0';
}
.mint-icon.refresh::after {
  content: '\e5d5';
}
.mint-icon.renew::after {
  content: '\e863';
}
.mint-icon.exchange::after {
  content: '\eb70';
}
.mint-icon.undo::after {
  content: '\e166';
}
.mint-icon.check::after {
  content: '\e5ca';
}
.mint-icon.check-circle::after {
  content: '\e86c';
}
.mint-icon.done::after {
  content: '\e876';
}
.mint-icon.task-alt::after {
  content: '\e2e6';
}
.mint-icon.circle::after {
  content: '\ef4a';
}
.mint-icon.close-x::after {
  content: '\e5cd';
}
.mint-icon.cancle-circle::after {
  content: '\e5c9';
}
.mint-icon.warning::after {
  content: '\e002';
}
.mint-icon.error::after {
  content: '\e000';
}
.mint-icon.info::after {
  content: '\e88e';
}
.mint-icon.help::after {
  content: '\e887';
}
.mint-icon.question::after {
  content: '\eb8b';
}
.mint-icon.vertified::after {
  content: '\ef76';
}
.mint-icon.favorite::after {
  content: '\e87d';
}
.mint-icon.bookmark::after {
  content: '\e866';
}
.mint-icon.star-medal::after {
  content: '\e7af';
}
.mint-icon.kid-star::after {
  content: '\f526';
}
.mint-icon.setting::after {
  content: '\e8b8';
}
.mint-icon.edit::after {
  content: '\e3c9';
}
.mint-icon.edit-square::after {
  content: '\f88d';
}
.mint-icon.list::after {
  content: '\e896';
}
.mint-icon.filter-list::after {
  content: '\e152';
}
.mint-icon.add::after {
  content: '\e145';
}
.mint-icon.add-circle::after {
  content: '\e147';
}
.mint-icon.equalizer::after {
  content: '\e01d';
}
.mint-icon.paste::after {
  content: '\e14f';
}
.mint-icon.calendar::after {
  content: '\ebcc';
}
.mint-icon.schedule::after {
  content: '\e8b5';
}
.mint-icon.history::after {
  content: '\e889';
}
.mint-icon.receipt-long::after {
  content: '\ef6e';
}
.mint-icon.database::after {
  content: '\f20e';
}
.mint-icon.database-search::after {
  content: '\f38e';
}
.mint-icon.rocation::after {
  content: '\e0c8';
}
.mint-icon.phone::after {
  content: '\e325';
}
.mint-icon.phone-android::after {
  content: '\e324';
}
.mint-icon.desktop::after {
  content: '\e30c';
}
.mint-icon.lock::after {
  content: '\e897';
}
.mint-icon.headset-mic::after {
  content: '\e311';
}
.mint-icon.volume-up::after {
  content: '\e050';
}
.mint-icon.videocam::after {
  content: '\e04b';
}
.mint-icon.mic::after {
  content: '\e029';
}
.mint-icon.repeat::after {
  content: '\e040';
}
.mint-icon.attach-file::after {
  content: '\e226';
}
.mint-icon.download::after {
  content: '\f090';
}
.mint-icon.photo-camera::after {
  content: '\e412';
}
.mint-icon.gifts::after {
  content: '\ef91';
}
.mint-icon.person::after {
  content: '\e7fd';
}
.mint-icon.contacts::after {
  content: '\e0e0';
}
.mint-icon.content-copy::after {
  content: '\e14d';
}
.mint-icon.book-5::after {
  content: '\f53b';
}
.mint-icon.star::after {
  content: '\e838';
}
.mint-icon.thumb-up::after {
  content: '\e8dc';
}
.mint-icon.bolt::after {
  content: '\ea0b';
}
.mint-icon.electric-bolt::after {
  content: '\ec1c';
}
.mint-icon.checkbox::after {
  content: '\e834';
}
.mint-icon.checkbox-blank::after {
  content: '\e835';
}
.mint-icon.radio-unchecked::after {
  content: '\e836';
}
.mint-icon.radio-checked::after {
  content: '\e837';
}
.mint-icon.search::after {
  content: '\e8b6';
}
.mint-icon.meat-balls::after {
  content: '\e5d3';
}
.mint-icon.more-vert::after {
  content: '\e5d4';
}
.mint-icon.chevron-left::after {
  content: '\e5cb';
}
.mint-icon.chevron-right::after {
  content: '\e5cc';
}
.mint-icon.open-in-new::after {
  content: '\e89e';
}
.mint-icon.visibility::after {
  content: '\e8f4';
}
.mint-icon.visibility-off::after {
  content: '\e8f5';
}
.mint-icon.mail::after {
  content: '\e158';
}
.mint-icon.fill {
  font-variation-settings: "FILL" 1;
}
.mint-icon.point {
  font-size: inherit;
  line-height: inherit;
}
.mint-icon.point::after {
  content: "";
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23fff' d='M12.4 19.866a7.467 7.467 0 1 0 0-14.933 7.467 7.467 0 0 0 0 14.933Z'/%3E%3Cpath fill='%23FF4D4C' fill-rule='evenodd' d='M12.4 20.8a8.4 8.4 0 1 1 7.763-5.184A8.393 8.393 0 0 1 12.4 20.8Zm2.076-7.066a3.92 3.92 0 0 1-1.581.346h-1.187v1.927h-1.63V8.743h2.816a3.12 3.12 0 0 1 1.58.346c.422.218.78.542 1.039.94.246.417.367.898.346 1.383a2.8 2.8 0 0 1-.346 1.432 2.028 2.028 0 0 1-1.037.89Zm-.593-3.261a1.68 1.68 0 0 0-1.087-.297h-1.088v2.471h1.088c.384.015.764-.089 1.087-.296a1.188 1.188 0 0 0 .396-.94 1.19 1.19 0 0 0-.396-.938Z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center center;
  background-size: cover;
}
.mint-icon.point.full::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23fff' d='M12 22.666c5.89 0 10.666-4.775 10.666-10.666S17.891 1.333 12 1.333 1.333 6.109 1.333 12c0 5.89 4.776 10.666 10.667 10.666Z'/%3E%3Cpath fill='%23FF4D4C' fill-rule='evenodd' d='M12 24a12 12 0 1 1 12-12 11.989 11.989 0 0 1-12 12Zm2.965-10.095a5.6 5.6 0 0 1-2.258.495h-1.695v2.753h-2.33V6.776h4.023a4.457 4.457 0 0 1 2.259.495c.602.31 1.113.773 1.483 1.341.352.597.524 1.283.494 1.976a4 4 0 0 1-.494 2.047 2.897 2.897 0 0 1-1.482 1.27Zm-.846-4.658a2.4 2.4 0 0 0-1.554-.424h-1.553v3.53h1.553a2.684 2.684 0 0 0 1.554-.424 1.699 1.699 0 0 0 .565-1.341 1.698 1.698 0 0 0-.565-1.341Z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center center;
  background-size: cover;
}
.mint-icon.coin {
  font-size: inherit;
  line-height: inherit;
}
.mint-icon.coin::after {
  content: "";
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23090' fill-rule='evenodd' d='M12.4 20.8a8.4 8.4 0 1 1 7.763-5.184A8.393 8.393 0 0 1 12.4 20.8Z' clip-rule='evenodd'/%3E%3Cpath fill='%23fff' d='M9.332 8.476h2.263c.302 1.71.553 3.168.754 4.375l.202-1.206c.1-.453.151-.956.251-1.409l.352-1.76h2.263l.906 7.895h-1.76l-.453-5.43-1.106 5.43h-1.208L10.64 10.89l-.453 5.43h-1.71l.855-7.844Z'/%3E%3C/svg%3E") no-repeat center center;
  background-size: cover;
}
.mint-icon.coin.full::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23090' fill-rule='evenodd' d='M12 24a12 12 0 1 1 12-12 11.989 11.989 0 0 1-12 12Z' clip-rule='evenodd'/%3E%3Cpath fill='%23fff' d='M7.617 6.394h3.233c.431 2.443.79 4.527 1.078 6.251l.288-1.724c.144-.647.216-1.365.358-2.012l.503-2.515h3.233l1.294 11.279h-2.515l-.647-7.759-1.58 7.759h-1.725l-1.652-7.83-.647 7.758H6.396L7.617 6.394Z'/%3E%3C/svg%3E") no-repeat center center;
  background-size: cover;
}
.mint-icon.sleep {
  font-size: inherit;
  line-height: inherit;
}
.mint-icon.sleep::after {
  content: "";
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23333' d='M14.834 2.45c-.994-.31-1.614.87-1.18 1.8A7.23 7.23 0 0 1 7.2 14.68a9.255 9.255 0 0 1-1.303-.12c-1.117-.186-2.359.745-1.737 1.737a9.45 9.45 0 0 0 17.44-4.908 9.538 9.538 0 0 0-6.765-8.937Zm-2.669 15.766A7.348 7.348 0 0 1 8.317 17.1a9.612 9.612 0 0 0 8.503-9.56c.01-.393-.01-.788-.063-1.179a6.633 6.633 0 0 1 2.297 5.028 6.822 6.822 0 0 1-6.889 6.828ZM6.145 6.423l-1.68 2.359a1.222 1.222 0 0 0 .993 1.92h4.345a1.241 1.241 0 0 0 0-2.483h-1.92c.234-.377.504-.73.807-1.055.372-.559 1.055-1.18 1.18-1.8a1.13 1.13 0 0 0-.497-1.18c-.62-.434-1.68-.248-2.36-.248H4.842a1.241 1.241 0 0 0 0 2.483l1.303.004Z'/%3E%3C/svg%3E") no-repeat center center;
  background-size: cover;
}
.mint-icon.dm {
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
}
.mint-icon.dm::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath fill='%23F49527' d='M3.335 16.667c-.459 0-.851-.163-1.177-.49A1.605 1.605 0 0 1 1.668 15V5c0-.458.163-.85.49-1.177.326-.326.718-.49 1.177-.49h13.333c.458 0 .85.164 1.177.49.326.326.49.719.49 1.177v10c0 .459-.164.85-.49 1.177-.326.327-.719.49-1.177.49H3.335ZM10 10.687a.868.868 0 0 0 .438-.125l5.896-3.687a.689.689 0 0 0 .333-.604.68.68 0 0 0-.354-.625c-.236-.139-.48-.132-.73.02l-5.583 3.5-5.583-3.5c-.25-.152-.493-.155-.73-.01a.686.686 0 0 0-.353.615c0 .139.027.26.083.365a.557.557 0 0 0 .25.24l5.896 3.687a.868.868 0 0 0 .437.125Z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}
.mint-icon.bolt-img {
  display: inline-block;
  width: 1.4rem;
  height: 1.5rem;
}
.mint-icon.bolt-img::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("https://cdn.mintspeaking.com/assets/icon/curriculum/icon_bolt.png") no-repeat center/contain;
}
.mint-icon.country {
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
}
.mint-icon.country::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: no-repeat center/contain;
}
.mint-icon.country.ph::after {
  background-image: url("https://cdn.mintspeaking.com/assets/icon/img_flag_ph.png");
}
.mint-icon.country.us::after, .mint-icon.country.usa::after {
  background-image: url("https://cdn.mintspeaking.com/assets/icon/img_flag_us.png");
}
.mint-icon.checkbox {
  margin-top: 0;
  margin-bottom: 0;
}
.mint-icon.social {
  width: 2.4rem;
  height: 2.4rem;
}
.mint-icon.social::after {
  content: "";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  background: no-repeat center/contain;
}
.mint-icon.social.naver::after {
  background-image: url("https://cdn.mintspeaking.com/assets/icon/member/icon_social_naver_2.png");
}
.mint-icon.social.kakao::after {
  background-image: url("https://cdn.mintspeaking.com/assets/icon/member/icon_social_kakao.png");
}
.mint-icon.social.google::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%234285F4' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.255h5.92a5.06 5.06 0 0 1-2.195 3.32v2.76h3.555c2.08-1.915 3.28-4.735 3.28-8.085Z'/%3E%3Cpath fill='%2334A853' d='M12 23c2.97 0 5.46-.985 7.28-2.665l-3.555-2.76c-.985.66-2.245 1.05-3.725 1.05-2.865 0-5.29-1.935-6.155-4.535H2.17v2.85A10.996 10.996 0 0 0 12 23Z'/%3E%3Cpath fill='%23FBBC05' d='M5.845 14.09A6.612 6.612 0 0 1 5.5 12c0-.725.125-1.43.345-2.09V7.06H2.17A10.996 10.996 0 0 0 1 12c0 1.775.425 3.455 1.17 4.94l3.675-2.85Z'/%3E%3Cpath fill='%23EA4335' d='M12 5.375c1.615 0 3.065.555 4.205 1.645l3.155-3.155C17.455 2.09 14.965 1 12 1 7.7 1 3.98 3.465 2.17 7.06l3.675 2.85C6.71 7.31 9.135 5.375 12 5.375Z'/%3E%3C/svg%3E");
}
.mint-icon.social.facebook::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='29' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%231877F2' d='m18.468 19.58.533-3.542h-3.334v-2.297c0-.97.465-1.913 1.959-1.913h1.516V8.813s-1.376-.24-2.691-.24c-2.747 0-4.542 1.697-4.542 4.767v2.698H8.856v3.541h3.053v8.56a11.9 11.9 0 0 0 3.758 0v-8.56h2.801Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M.286.857h27.429v27.43H.285z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.mint-icon.social.apple {
  padding: 0.2rem;
}
.mint-icon.social.apple::after {
  background-image: url("https://cdn.mintspeaking.com/assets/icon/member/icon_social_apple.png");
}
.mint-icon.social.mint::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='15' fill='none'%3E%3Cpath fill='%23A9A9A9' d='M3.307.86V15H.767V.86h2.54ZM10.748 15H5.943V.86h4.883c4.219 0 6.777 2.656 6.777 7.05 0 4.414-2.558 7.09-6.855 7.09Zm-2.266-2.207h2.13c2.948 0 4.453-1.621 4.453-4.883 0-3.242-1.505-4.844-4.375-4.844H8.482v9.727Z'/%3E%3C/svg%3E");
}

.event-on {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  height: 2rem;
  padding: 0 0.8rem;
  border-radius: 0.4rem;
  background: #FFEEEE;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.8rem;
  letter-spacing: -0.01em;
  font-style: normal;
  color: #FF4D4C;
}
.event-on.sm {
  height: 1.4rem;
  padding: 0 0.4rem;
  font-size: 1rem;
  line-height: 1.4rem;
  letter-spacing: -0.04rem;
}
.event-on.bullet::after {
  content: "";
  display: block;
  position: absolute;
  left: 0.3rem;
  bottom: -0.4rem;
  width: 0.6rem;
  height: 0.7rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='7' fill='none'%3E%3Cpath fill='%23FEE' d='M6 .538 1.765 0c0 2.154-.706 5.385-1.765 7C4.235 5.923 5.647 2.692 6 .538Z'/%3E%3C/svg%3E") no-repeat center top/contain;
}

.new-on {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 2rem;
  padding: 0 0.8rem;
  border-radius: 0.4rem;
  background: #EEF2FF;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.8rem;
  letter-spacing: -0.01em;
  font-style: normal;
  color: #527BFF;
}

.product-recommend-badge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3rem;
  width: 4.2rem;
  height: 4.2rem;
  padding: 0;
  background: no-repeat left top/contain;
  font-style: normal;
}
.product-recommend-badge .badge-txt {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.8rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
  color: #fff;
  -webkit-transform: rotate(315deg) translateY(-55%);
          transform: rotate(315deg) translateY(-55%);
}
.product-recommend-badge.orange {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' fill='none'%3E%3Cg filter='url(%23a)'%3E%3Cpath fill='url(%23b)' d='M42 0H0v42L42 0Z'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='b' x1='21' x2='0' y1='0' y2='35.7' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFB55F'/%3E%3Cstop offset='1' stop-color='%23F49527'/%3E%3C/linearGradient%3E%3Cfilter id='a' width='70' height='70' x='-16' y='-16' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-2' dy='-2'/%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.8 0 0 0 0 0.8 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_848_41490'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_848_41490' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
}
.product-recommend-badge.blue {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' fill='none'%3E%3Cg filter='url(%23a)'%3E%3Cpath fill='url(%23b)' d='M42 0H0v42L42 0Z'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='b' x1='21' x2='-3' y1='0' y2='23.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2348ABFF'/%3E%3Cstop offset='1' stop-color='%230F91FF'/%3E%3C/linearGradient%3E%3Cfilter id='a' width='68' height='68' x='-15' y='-15' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-2' dy='-2'/%3E%3CfeGaussianBlur stdDeviation='6.5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.8 0 0 0 0 0.8 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_848_41486'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_848_41486' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
}
.product-recommend-badge.purple {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' fill='none'%3E%3Cg filter='url(%23a)'%3E%3Cpath fill='url(%23b)' d='M42 0H0v42L42 0Z'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='b' x1='21' x2='-3' y1='0' y2='23.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23A77AEF'/%3E%3Cstop offset='1' stop-color='%238757D4'/%3E%3C/linearGradient%3E%3Cfilter id='a' width='68' height='68' x='-15' y='-15' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-2' dy='-2'/%3E%3CfeGaussianBlur stdDeviation='6.5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.8 0 0 0 0 0.8 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_848_41481'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_848_41481' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
}
.product-recommend-badge.brown {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' fill='none'%3E%3Cg filter='url(%23a)'%3E%3Cpath fill='url(%23b)' d='M42 0H0v42L42 0Z'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='b' x1='21' x2='-3' y1='0' y2='23.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B9721D'/%3E%3Cstop offset='1' stop-color='%238A4B00'/%3E%3C/linearGradient%3E%3Cfilter id='a' width='68' height='68' x='-15' y='-15' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-2' dy='-2'/%3E%3CfeGaussianBlur stdDeviation='6.5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.8 0 0 0 0 0.8 0 0 0 1 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_848_41476'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_848_41476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
}
.product-recommend-badge.pc {
  width: auto;
  height: 1.8rem;
  padding: 0 0.8rem;
  border-radius: 1rem;
}
.product-recommend-badge.pc .badge-txt {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.04rem;
  -webkit-transform: none;
          transform: none;
}
.product-recommend-badge.pc.orange {
  background: #F49527;
}
.product-recommend-badge.pc.blue {
  background: #0260C8;
}
.product-recommend-badge.pc.purple {
  background: #8757D4;
}
.product-recommend-badge.pc.brown {
  background: #8A4B00;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

*   Emoji
-   이모지 확인할때
    ㄴ  로컬 URL + /assets/pub_scss/assets/html/guide/components/emoji.html
    OR
    ㄴ //dsm.mintspeaking.com/assets/pub_scss/assets/html/guide/components/emoji.html
    에서 참고하여 이모지 사용 및 추가부탁드립니다.

-   이모지 추가시 emoji 폴더에 넣고 파일명 추가 !
    ㄴ  파일사이즈는 최대한 큰걸로 부탁드립니다 100x100 정도 ? 안되면 80x80

-   파일명 = 클래스명 이다보니 스네이크 케이스 되어 있음

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.mint-emoji {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
}
.mint-emoji::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.mint-emoji.blue_people::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_blue_people.png);
}

.mint-emoji.speaking_person::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_speaking_person.png);
}

.mint-emoji.thumbs_up::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_thumbs_up.png);
}

.mint-emoji.two_hands::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_two_hands.png);
}

.mint-emoji.girl_one_hand::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_girl_one_hand.png);
}

.mint-emoji.writing_hand::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_writing_hand.png);
}

.mint-emoji.family::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_family.png);
}

.mint-emoji.vampire::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_vampire.png);
}

.mint-emoji.node_face::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_node_face.png);
}

.mint-emoji.looking_for::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_looking_for.png);
}

.mint-emoji.star_struck::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_star_struck.png);
}

.mint-emoji.face_screaming::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_face_screaming.png);
}

.mint-emoji.thinking_face::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_thinking_face.png);
}

.mint-emoji.laughing_face::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_laughing_face.png);
}

.mint-emoji.wink::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_wink.png);
}

.mint-emoji.sunglass::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_sunglass.png);
}

.mint-emoji.squinting_tongue::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_squinting_tongue.png);
}

.mint-emoji.heart_eyes::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_heart_eyes.png);
}

.mint-emoji.robot::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_robot.png);
}

.mint-emoji.lips::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_lips.png);
}

.mint-emoji.teardrop::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_teardrop.png);
}

.mint-emoji.crying::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_crying.png);
}

.mint-emoji.green_heart::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_green_heart.png);
}

.mint-emoji.necktie::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_necktie.png);
}

.mint-emoji.downcast_face::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_downcast_face.png);
}

.mint-emoji.zip_mouth_face::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_zip_mouth_face.png);
}

.mint-emoji.smiling_face::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_smiling_face.png);
}

.mint-emoji.fear::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_fear.png);
}

.mint-emoji.sleep::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_sleep.png);
}

.mint-emoji.books::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_books.png);
}

.mint-emoji.just_book::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_just_book.png);
}

.mint-emoji.just_book_2::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_just_book_2.png);
}

.mint-emoji.pencil_paper::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_pencil_paper.png);
}

.mint-emoji.pen::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_pen.png);
}

.mint-emoji.pencil::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_pencil.png);
}

.mint-emoji.document::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_document.png);
}

.mint-emoji.file::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_file.png);
}

.mint-emoji.love_letter::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_love_letter.png);
}

.mint-emoji.light_bulb::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_light_bulb.png);
}

.mint-emoji.search::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_search.png);
}

.mint-emoji.setting::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_setting.png);
}

.mint-emoji.calendar::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_calendar.png);
}

.mint-emoji.check_green::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_check_green.png);
}

.mint-emoji.black_check::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_black_check.png);
}

.mint-emoji.warning::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_warning.png);
}

.mint-emoji.refresh::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_refresh.png);
}

.mint-emoji.money_bag::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_money_bag.png);
}

.mint-emoji.moeny_wings::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_moeny_wings.png);
}

.mint-emoji.pnm::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_pnm.png);
}

.mint-emoji.point_coin::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_point_coin.png);
}

.mint-emoji.m_coin_coin::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_m_coin_coin.png);
}

.mint-emoji.fire::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_fire.png);
}

.mint-emoji.star_twinkle::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_star_twinkle.png);
}

.mint-emoji.shine::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_shine.png);
}

.mint-emoji.thunder::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_thunder.png);
}

.mint-emoji.bolt::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_bolt.png);
}

.mint-emoji.party_popper::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_party_popper.png);
}

.mint-emoji.gift::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_gift.png);
}

.mint-emoji.hundred_points::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_hundred_points.png);
}

.mint-emoji.sun::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_sun.png);
}

.mint-emoji.rainbow::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_rainbow.png);
}

.mint-emoji.purple_crystal::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_purple_crystal.png);
}

.mint-emoji.wolf::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_wolf.png);
}

.mint-emoji.dizzy::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_dizzy.png);
}

.mint-emoji.palette::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_palette.png);
}

.mint-emoji.headphone::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_headphone.png);
}

.mint-emoji.bar_graph::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_bar_graph.png);
}

.mint-emoji.bar_graph_2::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_bar_graph_2.png);
}

.mint-emoji.monitor::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_monitor.png);
}

.mint-emoji.phone_receiver::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_phone_receiver.png);
}

.mint-emoji.clock::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_clock.png);
}

.mint-emoji.white_clock::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_white_clock.png);
}

.mint-emoji.home::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_home.png);
}

.mint-emoji.flight::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_flight.png);
}

.mint-emoji.korea::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_korea.png);
}

.mint-emoji.bell::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_bell.png);
}

.mint-emoji.pushpin::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_pushpin.png);
}

.mint-emoji.flag_hole::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_flag_hole.png);
}

.mint-emoji.white_bubble::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_white_bubble.png);
}

.mint-emoji.play_pause::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_play_pause.png);
}

.mint-emoji.toy_battery::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_toy_battery.png);
}

.mint-emoji.toy_energy::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_toy_energy.png);
}

.mint-emoji.toy_moneybag::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_toy_moneybag.png);
}

.mint-emoji.toy_mintpot::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_toy_mintpot.png);
}

.mint-emoji.toy_face::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_toy_face.png);
}

.mint-emoji.toy_reap::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_toy_reap.png);
}

.mint-emoji.toy_mission::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_toy_mission.png);
}

.mint-emoji.toy_gift::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_toy_gift.png);
}

.mint-emoji.toy_shop::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_toy_shop.png);
}

.mint-emoji.toy_ticket::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_toy_ticket.png);
}

.mint-emoji.toy_mintleaf::after {
  background-image: url(https://cdn.mintspeaking.com/assets/icon/emoji/emoji_toy_mintleaf.png);
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

*   Tooltip

- mixin OR 클래스명으로 사용

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.mui-tooltip-wrap.dynamic .mui-tooltip.top::after {
  left: initial;
  -webkit-transform: translateY(-100%) rotate(180deg);
          transform: translateY(-100%) rotate(180deg);
}

.mui-tooltip {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 0.4rem;
  padding: 1.6rem;
  background: #333;
  border-radius: 0.6rem;
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08), 0 0 8px 0 rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08), 0 0 8px 0 rgba(0, 0, 0, 0.08);
}
.mui-tooltip .tooltip-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  color: #fff;
}
.mui-tooltip .tooltip-header .info {
  margin-top: -2px;
  margin-right: 0.4rem;
  font-size: 1.8rem;
  color: inherit;
}
.mui-tooltip .tooltip-title {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}
.mui-tooltip .btn-close {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.8);
}
.mui-tooltip .btn-close .mint-icon {
  margin-top: -2px;
  font-size: 2rem;
}
.mui-tooltip .tooltip-desc {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2rem;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.8);
}
.mui-tooltip .point {
  color: #19F1EA;
}
.mui-tooltip .link-more {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 0.8rem;
  color: #999;
}
.mui-tooltip .link-more .mint-icon {
  font-size: 1.6rem;
  color: inherit;
}
.mui-tooltip::after {
  content: "";
  position: absolute;
  width: 3.2rem;
  height: 1.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='12' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23333' d='M13.264 9.435a4 4 0 0 0 5.472 0L32-3H0L13.264 9.435Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h32v12H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-size: cover;
}
.mui-tooltip.top {
  margin-top: 1.2rem;
}
.mui-tooltip.top::after {
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-100%) rotate(180deg);
          transform: translateX(-50%) translateY(-100%) rotate(180deg);
}
.mui-tooltip.top-left {
  margin-top: 1.2rem;
}
.mui-tooltip.top-left::after {
  top: 0;
  left: 1.2rem;
  -webkit-transform: translateY(-100%) rotate(180deg);
          transform: translateY(-100%) rotate(180deg);
}
.mui-tooltip.top-right {
  margin-top: 1.2rem;
}
.mui-tooltip.top-right::after {
  top: 0;
  right: 1.2rem;
  -webkit-transform: translateY(-100%) rotate(180deg);
          transform: translateY(-100%) rotate(180deg);
}
.mui-tooltip.bottom {
  margin-bottom: 1.2rem;
}
.mui-tooltip.bottom::after {
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(100%);
          transform: translateX(-50%) translateY(100%);
}
.mui-tooltip.bottom-left {
  margin-bottom: 1.2rem;
}
.mui-tooltip.bottom-left::after {
  bottom: 0;
  left: 1.2rem;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
.mui-tooltip.bottom-right {
  margin-bottom: 1.2rem;
}
.mui-tooltip.bottom-right::after {
  bottom: 0;
  right: 1.2rem;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
.mui-tooltip.left {
  margin-left: 1.2rem;
}
.mui-tooltip.left::after {
  top: 50%;
  left: 0;
  -webkit-transform: translateX(-2.2rem) translateY(-50%) rotate(90deg);
          transform: translateX(-2.2rem) translateY(-50%) rotate(90deg);
}
.mui-tooltip.left-top {
  margin-left: 1.2rem;
}
.mui-tooltip.left-top::after {
  top: 1.2rem;
  left: 0;
  -webkit-transform: translateX(-2.2rem) translateY(50%) rotate(90deg);
          transform: translateX(-2.2rem) translateY(50%) rotate(90deg);
}
.mui-tooltip.left-bottom {
  margin-left: 1.2rem;
}
.mui-tooltip.left-bottom::after {
  bottom: 1.2rem;
  left: 0;
  -webkit-transform: translateX(-2.2rem) translateY(-50%) rotate(90deg);
          transform: translateX(-2.2rem) translateY(-50%) rotate(90deg);
}
.mui-tooltip.right {
  margin-right: 1.2rem;
}
.mui-tooltip.right::after {
  top: 50%;
  right: 0;
  -webkit-transform: translateX(2.2rem) translateY(-50%) rotate(-90deg);
          transform: translateX(2.2rem) translateY(-50%) rotate(-90deg);
}
.mui-tooltip.right-top {
  margin-right: 1.2rem;
}
.mui-tooltip.right-top::after {
  top: 1.2rem;
  right: 0;
  -webkit-transform: translateX(2.2rem) translateY(50%) rotate(-90deg);
          transform: translateX(2.2rem) translateY(50%) rotate(-90deg);
}
.mui-tooltip.right-bottom {
  margin-right: 1.2rem;
}
.mui-tooltip.right-bottom::after {
  bottom: 1.2rem;
  right: 0;
  -webkit-transform: translateX(2.2rem) translateY(-50%) rotate(-90deg);
          transform: translateX(2.2rem) translateY(-50%) rotate(-90deg);
}
.mui-tooltip.outline {
  border: 2px solid #333;
  background: #fff;
}
.mui-tooltip.outline .tooltip-header {
  color: #333;
}
.mui-tooltip.outline .btn-close {
  color: #555;
}
.mui-tooltip.outline .tooltip-desc {
  color: #555;
}
.mui-tooltip.outline::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='12' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23fff' stroke='%23333' stroke-width='2' d='M14.448 8.706a3 3 0 0 0 4.104 0L29.972-2H3.028l11.42 10.706Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M.5 0h32v12H.5z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-position: center;
}
.mui-tooltip:has(.btn-close) .tooltip-title {
  margin-right: 0.2rem;
}
.mui-tooltip:has(.btn-close) .tooltip-desc {
  padding-right: 2.2rem;
}

.mint-tooltip {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.8rem 1.2rem;
  background-color: #333;
  border-radius: 0.8rem;
  color: #fff;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
.mint-tooltip::after {
  content: "";
  position: absolute;
  width: 2.4rem;
  height: 2.4rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='15' fill='none'%3E%3Cpath fill='%23333' d='M6.768 14c.77 1.333 2.694 1.333 3.464 0l6.062-10.5c.77-1.333-.192-3-1.732-3H2.438C.898.5-.064 2.167.706 3.5L6.768 14Z'/%3E%3C/svg%3E") no-repeat center center;
  background-size: cover;
}
.mint-tooltip.center::after {
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
}
.mint-tooltip.center-top::after {
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.mint-tooltip.right::after {
  right: 0;
  -webkit-transform: translate(50%, 0) rotate(-90deg);
          transform: translate(50%, 0) rotate(-90deg);
}
.mint-tooltip.right-top::after {
  top: 0;
  right: 0;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
}
.mint-tooltip.right-bottom::after {
  right: 0;
  bottom: 0;
  -webkit-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
}
.mint-tooltip.left::after {
  left: 0;
  -webkit-transform: translate(-50%, 0) rotate(90deg);
          transform: translate(-50%, 0) rotate(90deg);
}
.mint-tooltip.left-top::after {
  top: 0;
  left: 0;
  -webkit-transform: translate(50%, -50%) rotate(180deg);
          transform: translate(50%, -50%) rotate(180deg);
}
.mint-tooltip.left-bottom::after {
  left: 0;
  bottom: 0;
  -webkit-transform: translate(50%, 50%);
          transform: translate(50%, 50%);
}
.mint-tooltip.close {
  width: 0;
  height: 0;
  padding: 0;
  opacity: 0;
}
.mint-tooltip.close::after {
  display: none;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

@ 탭..

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.x-scroll {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 16px;
  margin-bottom: -16px;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
}

.mint-tab {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  overflow: hidden;
  border-bottom: 1px solid #EEE;
}
.mint-tab .item {
  position: relative;
  white-space: nowrap;
  padding: 1.4rem 0;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2rem;
  letter-spacing: -0.01em;
}
.mint-tab .item.on {
  font-weight: 700;
}
.mint-tab .item.on::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 3px;
  background-color: #333;
}
.mint-tab.primary .item.on {
  color: #0F91FF;
}
.mint-tab.primary .item.on::after {
  background-color: #0F91FF;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

@@   Toggle  @@
@   .mui-toggle-container

-   아직 공통정의 완료 X
-   개선할 수 있는 페이지
    ㄴ 민트가이드
    ㄴ 북미수강권
-   사용중인 페이지
    ㄴ 북미수강권

*   해당 페이지에 상속시킬 속성들
    -   토글 사이즈
    -   슬라이더 사이즈 / 높이값
    -   폰트사이즈
    ㄴ 공통은 slider기능정도?


*  기본값은 bg: gray-300 에 slide 흰색으로 임시정의


@    2025-02-25 차민우

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.mui-toggle-container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.mui-toggle-container input {
  display: none;
}
.mui-toggle-container label {
  margin-bottom: 0;
}
.mui-toggle-container .sort-wrapper {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #E1E1E1;
  border-radius: 0.8rem;
}
.mui-toggle-container .sort-label {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #777;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  cursor: pointer;
  z-index: 2;
}
.mui-toggle-container .sort-slider {
  position: absolute;
  background-color: #fff;
  border-radius: 0.8rem;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  transition: -webkit-transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 0 4px 0 rgba(0, 0, 0, 0.04);
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 0 4px 0 rgba(0, 0, 0, 0.04);
}
.mui-toggle-container:has(.sort-input:first-of-type:checked) .sort-label:first-of-type {
  color: #555;
}
.mui-toggle-container:has(.sort-input:last-of-type:checked) .sort-label:last-of-type {
  color: #555;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

    @   pagination


–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.mui-pagination-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.mui-pagination-wrap .pagination {
  overflow: hidden;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-column-gap: 0.4rem;
     -moz-column-gap: 0.4rem;
          column-gap: 0.4rem;
  margin: 0;
}
.mui-pagination-wrap .pagination li {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.mui-pagination-wrap .pagination li a {
  border-radius: 0.4rem;
  background-color: transparent;
  color: #555;
}
.mui-pagination-wrap .pagination li a:hover {
  background-color: #F5F5F5;
  color: #333;
}
.mui-pagination-wrap .pagination li.active > a,
.mui-pagination-wrap .pagination li a.active {
  background-color: #777;
  color: #fff;
}
.mui-pagination-wrap .pagination li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 3.2rem;
  width: auto;
  height: 3.2rem;
  margin: 0;
  padding: 0.6rem;
  line-height: 3.2rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 2rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}
.mui-pagination-wrap .pagination li.active a, .mui-pagination-wrap .pagination li a.active {
  padding: 0.6rem;
  border: 0;
  font-weight: 600;
  pointer-events: none;
}
.mui-pagination-wrap .pagination li.disabled {
  display: none;
}
.mui-pagination-wrap .pagination li:is(.pagination-first, .pagination-last, .pagination-prev-group, .pagination-next-group) a {
  font-size: 0;
}
.mui-pagination-wrap .pagination li:is(.pagination-first, .pagination-last, .pagination-prev-group, .pagination-next-group) a::after {
  content: "";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: "mint-icon";
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: 0;
}
.mui-pagination-wrap .pagination li.pagination-first a::after {
  content: "\eac3";
}
.mui-pagination-wrap .pagination li.pagination-last a::after {
  content: "\eac9";
}
.mui-pagination-wrap .pagination li.pagination-prev-group a::after {
  content: "\e314";
}
.mui-pagination-wrap .pagination li.pagination-next-group a::after {
  content: "\e315";
}
.mui-pagination-wrap .pagination.goToNextPage .pagination-first {
  display: none;
}
.mui-pagination-wrap .pagination.isLastPageGroup .pagination-last {
  display: none;
}

.careers-na-wrap {
  font-family: "Instrument Sans", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.4rem;
  letter-spacing: -0.01em;
  color: #091C53;
  --content-max-width: 1160px;
}
.careers-na-wrap * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.careers-na-wrap .btn-link {
  height: 4.4rem;
  padding: 0 1.6rem;
  border-radius: 3rem;
  background: #0540AD;
}
.careers-na-wrap .btn-link .btn-txt {
  font-weight: 600;
}
.careers-na-wrap .mui-btn-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-column-gap: 0.8rem;
     -moz-column-gap: 0.8rem;
          column-gap: 0.8rem;
}
.careers-na-wrap .section-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
}
.careers-na-wrap .section-content.column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  row-gap: 3.2rem;
}
.careers-na-wrap .grid-list {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
}
.careers-na-wrap .list-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 0.8rem;
  position: relative;
  width: 100%;
}
.careers-na-wrap .list-item .title {
  font-size: 2rem;
  font-weight: 600;
  line-height: 3rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
  color: #1E3063;
}
.careers-na-wrap .list-item .desc {
  width: 100%;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2.4rem;
  letter-spacing: -0.01em;
  color: #1E3063;
}
.careers-na-wrap .list-item .num {
  position: absolute;
  top: 0;
  left: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background: #84c1fa;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 2.8rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.careers-na-wrap .list-item .step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  z-index: 0;
  width: 100%;
  height: 6.3rem;
  margin-bottom: 0.8rem;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 3.2rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}
.careers-na-wrap .list-item .step::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' data-testid='arrow-svg' width='260' height='63' class='css-1b6tcxl'%3E%3Cpath d='M 243 0 L 258.75 31.5 L 243 63 L 0 63 L 15.75 31.5 L 0 0 Z' fill='%23cee6fd'%3E%3C/path%3E%3C/svg%3E") no-repeat center/cover;
}
.careers-na-wrap .list-item .svg-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1.2rem;
}
.careers-na-wrap .list-item .svg-icon svg path {
  fill: #064f93;
}
.careers-na-wrap .list-item:has(.num) {
  margin-top: 2.2rem;
}
.careers-na-wrap .list-item:has(.step) .desc {
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}
.careers-na-wrap .list-item.box-item {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1.6rem 1.6rem;
  border-radius: 0.8rem 0.8rem 1.2rem 1.2rem;
  border: 2px solid #b4cce3;
}
.careers-na-wrap .list-item.box-item:has(.num) {
  padding-top: 4rem;
}
.careers-na-wrap .list-item.border-top::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 0.8rem;
  border-radius: 0.8rem 0.8rem 0 0;
  background: #84c1fa;
}
.careers-na-wrap .list-item.border-left {
  row-gap: 1.4rem;
  padding-left: 2.4rem;
}
.careers-na-wrap .list-item.border-left .title {
  -ms-flex-item-align: start;
      align-self: flex-start;
}
.careers-na-wrap .list-item.border-left .desc {
  width: 100%;
}
.careers-na-wrap .list-item.border-left::before {
  content: "";
  position: absolute;
  top: 0;
  left: -2px;
  width: 0.8rem;
  height: 100%;
  border-radius: 0.8rem 0 0 0.8rem;
  background: #84c1fa;
}
.careers-na-wrap .list-item.dot-item {
  padding-left: 2.4rem;
}
.careers-na-wrap .list-item.dot-item .title {
  font-weight: 700;
}
.careers-na-wrap .list-item.dot-item::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  left: 0;
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: #84c1fa;
}
.careers-na-wrap .section-1 {
  padding: 1.6rem 0;
}
.careers-na-wrap .section-1 .section-content {
  -webkit-box-align: normal;
      -ms-flex-align: normal;
          align-items: normal;
  -webkit-column-gap: 6rem;
     -moz-column-gap: 6rem;
          column-gap: 6rem;
  padding-left: 6rem;
}
.careers-na-wrap .section-1 .flex-wrap {
  padding: 6rem 0;
}
.careers-na-wrap .section-1 .section-title {
  margin-bottom: 2.4rem;
  font-size: 5.4rem;
  font-weight: 600;
  line-height: 6.8rem;
}
.careers-na-wrap .section-1 p {
  color: #5E208E;
}
.careers-na-wrap .section-1 figure {
  overflow: hidden;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  width: 30%;
  max-width: 30rem;
  border-radius: 1.6rem;
}
.careers-na-wrap .section-1 figure img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.careers-na-wrap .section-1 .mask-img {
  -webkit-mask-image: url("//cdn.mintspeaking.com/assets/recruit/images/mask.svg?v=0730");
          mask-image: url("//cdn.mintspeaking.com/assets/recruit/images/mask.svg?v=0730");
  -webkit-mask-size: cover;
          mask-size: cover;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: left;
          mask-position: left;
}
.careers-na-wrap .section-1 .mui-btn-wrap {
  margin-top: 2rem;
}
.careers-na-wrap .section-2 {
  padding: 12.8rem 2rem;
  background: #0540AD;
}
.careers-na-wrap .section-2 .section-content {
  padding: 4rem 6.2rem;
  border-radius: 1.6rem;
  background: #fff;
  -webkit-box-shadow: 0.6rem 0.6rem 0 0 #bbd9f5;
          box-shadow: 0.6rem 0.6rem 0 0 #bbd9f5;
}
.careers-na-wrap .section-2 .section-content .flex-wrap {
  -webkit-column-gap: 3.2rem;
     -moz-column-gap: 3.2rem;
          column-gap: 3.2rem;
}
.careers-na-wrap .section-2 p {
  text-align: left;
  font-weight: 600;
  line-height: 2.6rem;
}
.careers-na-wrap .section-2 figure {
  overflow: hidden;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 40%;
  border-radius: 1.2rem;
}
.careers-na-wrap .section-2 figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.careers-na-wrap .section-3 {
  padding: 7.4rem 0;
}
.careers-na-wrap .section-3 .section-content {
  padding: 0 6.2rem;
}
.careers-na-wrap .section-4 {
  padding: 7.4rem 0;
  background: #88ceee;
}
.careers-na-wrap .section-4 .section-content {
  padding: 0 6.2rem;
}
.careers-na-wrap .section-4 ul.flex-wrap {
  gap: 4rem 3.2rem;
}
.careers-na-wrap .section-5 {
  padding: 7.4rem 0;
  background: #e8eefc;
}
.careers-na-wrap .section-5 .section-content {
  padding: 0 6.2rem;
}
.careers-na-wrap .section-5 figure {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 50%;
}
.careers-na-wrap .section-5 figure img {
  width: 100%;
  height: 100%;
  padding: 0 3.6rem;
  -o-object-fit: contain;
     object-fit: contain;
}
.careers-na-wrap .section-5 figure figcaption {
  margin-top: 2.6rem;
  margin-bottom: 1.6rem;
}
.careers-na-wrap .section-5 .flex-wrap {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-column-gap: 3.2rem;
     -moz-column-gap: 3.2rem;
          column-gap: 3.2rem;
}
.careers-na-wrap .section-5 .dot-item-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 3.2rem;
}
.careers-na-wrap .section-6 {
  padding: 12.8rem 2rem;
  background: #0540AD;
}
.careers-na-wrap .section-6 .section-content {
  padding: 4rem 6.2rem;
  border-radius: 1.6rem;
  background: #fff;
  -webkit-box-shadow: 0.6rem 0.6rem 0 0 #bbd9f5;
          box-shadow: 0.6rem 0.6rem 0 0 #bbd9f5;
}
.careers-na-wrap .section-6 .section-content div.flex-wrap {
  -webkit-column-gap: 3.2rem;
     -moz-column-gap: 3.2rem;
          column-gap: 3.2rem;
  padding-bottom: 1.6rem;
}
.careers-na-wrap .section-6 p {
  text-align: left;
  font-weight: 500;
  line-height: 3.2rem;
}
.careers-na-wrap .section-6 p + p {
  margin-top: 1.6rem;
}
.careers-na-wrap .section-6 ul.flex-wrap {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  row-gap: 1.6rem;
  width: 36.7%;
}
.careers-na-wrap .section-7 {
  padding: 7.4rem 0;
}
.careers-na-wrap .section-7 .section-content {
  padding: 0 6.2rem;
}
.careers-na-wrap .section-7 .grid-list {
  grid-template-columns: repeat(4, 1fr);
  -webkit-column-gap: 0;
     -moz-column-gap: 0;
          column-gap: 0;
}
.careers-na-wrap .section-7 .grid-list .list-item {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.careers-na-wrap .section-8 {
  padding: 12rem 0;
  background: #f1f8ff;
}
.careers-na-wrap .section-8 .section-content {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 6rem;
  padding: 0 6.2rem;
}
.careers-na-wrap .section-8 p {
  text-align: center;
}

.careers-na-header {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 1rem 6rem;
}
.careers-na-header .logo {
  height: 5.5rem;
}
.careers-na-header .logo img {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.careers-na-footer {
  padding: 3rem;
  background-color: #333;
}
.careers-na-footer .copyright {
  max-width: var(--content-max-width);
  margin: 0 auto;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.8rem;
  letter-spacing: -0.01em;
  color: #AAA;
  text-align: center;
}

.careers-na-wrap.mobile {
  --content-max-width: 768px;
}
.careers-na-wrap.mobile .ttl-40 {
  font-weight: 600;
}
.careers-na-wrap.mobile .careers-na-header {
  padding: 1rem;
}
.careers-na-wrap.mobile .section-content {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 2.4rem;
  padding: 2rem 2.4rem;
}
.careers-na-wrap.mobile .btn-link {
  width: 100%;
  height: 3.8rem;
}
.careers-na-wrap.mobile .btn-link .btn-txt {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 2rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}
.careers-na-wrap.mobile .ttl-40 {
  font-size: 3.5rem;
  line-height: 4.4rem;
}
.careers-na-wrap.mobile .desc-20 {
  font-size: 1.8rem;
  line-height: 2.2rem;
}
.careers-na-wrap.mobile .grid-list {
  row-gap: 1.4rem;
}
.careers-na-wrap.mobile .list-item .num {
  -webkit-transform: scale(0.875) translate(-50%, -50%);
          transform: scale(0.875) translate(-50%, -50%);
}
.careers-na-wrap.mobile .list-item .step {
  position: absolute;
  top: 0;
  left: 0;
  width: 7rem;
  height: 100%;
  margin-bottom: 0;
  font-size: 2.1rem;
}
.careers-na-wrap.mobile .list-item .step::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-testid='arrow-svg' width='70' height='88' class='css-1b6tcxl'%3E%3Cpath d='M 0 70 L 35 84 L 70 70 L 70 0 L 35 14 L 0 0 Z' fill='%23cee6fd'%3E%3C/path%3E%3C/svg%3E");
  background-position: top;
}
.careers-na-wrap.mobile .list-item .svg-icon {
  width: 3.4rem;
  height: 3.4rem;
}
.careers-na-wrap.mobile .list-item .title {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 2.8rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
}
.careers-na-wrap.mobile .list-item .desc {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 2rem;
  letter-spacing: -0.01em;
}
.careers-na-wrap.mobile .list-item:has(.num) {
  margin-top: 1.8rem;
}
.careers-na-wrap.mobile .list-item:has(.step) .desc {
  padding: 0;
}
.careers-na-wrap.mobile .list-item.box-item:has(.num) {
  padding-top: 3.4rem;
}
.careers-na-wrap.mobile .list-item.border-left {
  row-gap: 1.1rem;
}
.careers-na-wrap.mobile .section-1 {
  padding-bottom: 0;
}
.careers-na-wrap.mobile .section-1 .section-content {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0;
}
.careers-na-wrap.mobile .section-1 .flex-wrap {
  padding: 3.6rem 2rem;
}
.careers-na-wrap.mobile .section-1 .section-title {
  margin-bottom: 1.6rem;
  font-size: 4.8rem;
  font-weight: 600;
  line-height: 6.4rem;
  letter-spacing: -0.01em;
  letter-spacing: 0;
  line-height: 6rem;
}
.careers-na-wrap.mobile .section-1 figure {
  max-width: none;
  width: 100%;
  height: 28rem;
  border-radius: 0;
}
.careers-na-wrap.mobile .section-1 .mask-img {
  -webkit-mask-image: none;
          mask-image: none;
}
.careers-na-wrap.mobile .section-1 .mui-btn-wrap {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 0.8rem;
  width: 100%;
  margin-top: 1.2rem;
}
.careers-na-wrap.mobile .section-2 {
  padding: 1rem 1.6rem 1.6rem 1rem;
}
.careers-na-wrap.mobile .section-2 .section-content .flex-wrap {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 2.4rem;
  padding-bottom: 0.8rem;
}
.careers-na-wrap.mobile .section-2 figure {
  width: 82%;
}
.careers-na-wrap.mobile .section-3 {
  padding: 3.6rem 2.4rem;
}
.careers-na-wrap.mobile .section-3 .section-content {
  padding: 0;
}
.careers-na-wrap.mobile .section-4 {
  padding: 3.6rem 2.4rem;
}
.careers-na-wrap.mobile .section-4 .section-content {
  padding: 0;
}
.careers-na-wrap.mobile .section-5 {
  padding: 3.6rem 2.4rem;
}
.careers-na-wrap.mobile .section-5 .section-content {
  padding: 0;
}
.careers-na-wrap.mobile .section-5 .flex-wrap {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.careers-na-wrap.mobile .section-5 figure {
  width: 100%;
}
.careers-na-wrap.mobile .section-5 figure img {
  display: block;
  max-width: 60rem;
  margin: 0 auto;
  padding: 0;
}
.careers-na-wrap.mobile .section-5 figure figcaption {
  margin-top: 1.2rem;
  margin-bottom: 2.8rem;
}
.careers-na-wrap.mobile .section-5 .dot-item-list {
  row-gap: 2.8rem;
}
.careers-na-wrap.mobile .section-6 {
  padding: 1rem 1.6rem 1.6rem 1rem;
}
.careers-na-wrap.mobile .section-6 p {
  line-height: 2.8rem;
}
.careers-na-wrap.mobile .section-6 p + p {
  margin-top: 1.1rem;
}
.careers-na-wrap.mobile .section-6 div.flex-wrap {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 2.4rem;
  padding-bottom: 1rem;
}
.careers-na-wrap.mobile .section-6 ul.flex-wrap {
  width: 100%;
  row-gap: 1.4rem;
}
.careers-na-wrap.mobile .section-7 {
  padding: 3.6rem 2.4rem;
}
.careers-na-wrap.mobile .section-7 .section-content {
  padding: 0;
}
.careers-na-wrap.mobile .section-7 .grid-list {
  grid-template-columns: repeat(1, 1fr);
  row-gap: 0;
}
.careers-na-wrap.mobile .section-7 .grid-list .list-item {
  padding: 1.4rem 0;
  padding-left: 8.4rem;
}
.careers-na-wrap.mobile .section-8 {
  padding: 3.6rem 2.4rem;
}
.careers-na-wrap.mobile .section-8 .section-content {
  padding: 0;
}
.careers-na-wrap.mobile .section-8 p {
  text-align: left;
}

@media (max-width: 1180px) {
  .careers-na-wrap .section-3 .grid-list {
    grid-template-columns: repeat(1, 1fr);
  }
  .careers-na-wrap .section-4 ul.flex-wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .careers-na-wrap .section-7 .grid-list {
    grid-template-columns: repeat(2, 1fr);
  }
}