:root {
    --bg-page1: #F5F2FB;
    --bg-page2: #FFFFFF;
    --bg-element1: #FFFFFF;
    --bg-element2: #FDFDFD;
    --bg-element3: #F9F9F9;
    --bg-element4: #F5F5F5;
    --bg-element5: #222222;
    --bg-element6: #343A40;
    --bg-element7: #FFFFFF;
    --bg-element8: #FBFDFC;
    --bg-invert: #1E1E1E;
    --bg-inline-code: #E9ECEF;
    --bg-tag: #F8F9FA;
    --text1: #222222;
    --text2: #828282;
    --text3: #868E96;
    --text4: #CED4DA;
    --border1: #343A40;
    --border2: #DBDBDB;
    --border3: #DEE2E6;
    --border4: #F1F3F5;
    --primary1: #12B886;
    --primary2: #20C997;
    --destructive1: #FF6B6B;
    --destructive2: #FF8787;
    --button-text: #FFFFFF;
    --slight-layer: rgba(0,0,0,0.05);
    --opaque-layer: rgba(249,249,249,0.85);
    --editor-footer: #FFFFFF;
    --prism-bg: #fbfcfd;
    --prism-default-text: #24292e;
    --prism-selection-bg: rgba(0,0,0,0.15);
    --prism-code-block-bg: #fbfcfd;
    --prism-code-1: #969896;
    --prism-code-2: #24292e;
    --prism-code-3: #a626a4;
    --prism-code-4: #FF6868;
    --prism-code-5: #0184bc;
    --prism-code-6: #50a14f;
    --prism-code-7: #a626a4;
    --prism-code-8: #005cc5;
    --prism-code-9: #a626a4;
    --prism-line-number: #585c63;
    --main-code: #904AE8;
    --warning-color-1: #dc3545;
}

* { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; list-style: none; outline: none; border: none; color: #222222; font-size: 16px; font-family: 'Pretendard', 'Noto Sans KR', sans-serif; -webkit-font-smoothing: antialiased; background-color: transparent; transform: none; perspective: none; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #904AE8; border-radius: 0.5rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
*::-webkit-scrollbar-track { background: #CCCCCC; border-radius: 0.5rem; }
html, body{ min-width: 1200px; min-height: 800px; background: #FFFFFF; }

.CTG-01 { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; }
.CTG-02 { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; }
.CTG-03 { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; }

.MAIN-01 { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; }
.MAIN-02 { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; }
.MAIN-03 { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; }
.MAIN-04 { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; }
.MAIN-05 { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; }

.cl__top                   { padding: 0 1.25rem; position: fixed; left: 0; top: 0; z-index: 35; width: 100%; height: 60px; background: #F6F6F6; }
.cl__top--container        { margin: 0 auto; max-width: 1200px; width: 100%; height: 100%; display: flex; justify-content: flex-end; align-items: center; gap: 15px; }
.cl__top--update           { padding: 4px 10px; position: relative; height: 36px; display: inline-flex; justify-content: center; align-items: center; gap: 4px; border-radius: 10px; border: 1px solid #FF6868; background: #FFFFFF; cursor: pointer; }
.cl__top--update svg       { width: 24px; }
.cl__top--update span      { font-size: 16px; font-weight: 700; color: #FF6868; }
.cl__top--update.disabled  { border: 1px solid #777777; }
.cl__top--update.disabled path { fill: #777777; }
.cl__top--update.disabled span { color: #777777; }
.cl__top--menu             { position: relative; height: 36px; display: flex; justify-content: center; align-items: center; gap: 15px; }
.cl__top--menu-item        { font-size: 16px; font-weight: 400; color: #222222; }
.cl__top--menu-line        { width: 1px; height: 14px; border-left: 1px solid #AAAAAA; }
.cl__top--user             { position: relative; display: grid; grid-template-columns: 1fr auto; }
.cl__top--user:before      { content: ''; position: absolute; left: 0; top: 100%; width: 100%; height: 50%; background: transparent; }
.cl__top--user-profile     { position: relative; width: 36px; height: 36px; overflow: hidden; border-radius: 50%; background: #F5F2FB; border: 1px solid #DBDBDB; cursor: pointer; }
.cl__top--user-profile img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.cl__top--user-info        { padding: 24px 20px; position: absolute; right: 0; top: calc(100% + 8px); width: 345px; display: none; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; background: #FFFFFF; border: 1px solid #DBDBDB; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); }
.cl__top--user-type        { padding: 4px 8px; display: inline-flex; justify-content: center; align-items: center; gap: 4px; border-radius: 10px; background: #F6F6F6; }
.cl__top--user-type svg    { width: 12px; }
.cl__top--user-type span   { font-size: 14px; font-weight: 700; color: #828282; }
.cl__top--user-name        { width: 100%; display: inline-flex; justify-content: flex-start; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 400; color: #904AE8; }
.cl__top--user-name strong { font-size: 16px; font-weight: 700; color: #904AE8; }
.cl__top--user-func        { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; overflow: hidden; }
.cl__top--user-btn         { padding: 12px 0; width: 100%; display: flex; justify-content: center; align-items: center; gap: 6px; border-radius: 6px; background: #F6F6F6; overflow: hidden; cursor: pointer; }
.cl__top--user-btn img     { width: 16px; }
.cl__top--user-btn svg     { width: 16px; }
.cl__top--user-btn span    { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 500; color: #222222; }
.cl__top--user:hover .cl__top--user-info { display: flex; }

.cl__header                    { padding: 0 1.25rem; position: fixed; left: 0; top: 60px; z-index: 30; width: 100%; height: 90px; background-color: #FFFFFF; }
.cl__header--container         { margin: 0 auto; max-width: 1200px; width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; }
.cl__header--logo              { width: 150px; }
.cl__header--logo img          { max-width: 100%; }
.cl__header--menu              { display: inline-flex; justify-content: center; align-items: center; gap: 80px; }
.cl__header--menu-item a       { transition: 150ms; font-size: 18px; font-weight: 700; color: #222222; }
.cl__header--menu-item a:hover { color: #904AE8; }

.cl__mobileHeader                 { padding: 0 1.25rem; position: fixed; left: 0; top: 0; z-index: 30; display: none; width: 100%; height: 80px; background-color: #F5F2FB; }
.cl__mobileHeader--container      { margin: 0 auto; max-width: 1200px; width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; }
.cl__mobileHeader--logo           { position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%); width: 110px; }
.cl__mobileHeader--logo img       { max-width: 100%; }
.cl__mobileHeader--menu-btn       { cursor: pointer; }
.cl__mobileHeader--menu-btn img   { width: 18px; }
.cl__mobileHeader--menu-btn svg   { width: 18px; }
.cl__mobileHeader--menu           { padding: 0 20px 20px; position: absolute; left: 0; top: 90%; width: 100%; display: none; justify-content: flex-end; overflow: hidden; }
.cl__mobileHeader--menu.active    { display: flex; }
.cl__mobileHeader--menu-container { padding: 20px; width: 100%; max-width: 330px; height: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; gap: 10px; background: #FFFFFF; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); border-radius: 10px; }
.cl__mobileHeader--user           { width: 100%; height: min-content; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; overflow: hidden; gap: 10px; }
.cl__mobileHeader--user-info      { width: 100%; display: grid; grid-template-columns: auto 1fr; place-items: center flex-start; gap: 6px; }
.cl__mobileHeader--profile        { position: relative; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; }
.cl__mobileHeader--profile-img    { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.cl__mobileHeader--user-text      { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 400; color: #222222; }
.cl__mobileHeader--user-item      { padding-left: 32px; width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.cl__mobileHeader--user-item img  { width: 16px; }
.cl__mobileHeader--user-item svg  { width: 16px; }
.cl__mobileHeader--user-item span { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 400; color: #828282; }
.cl__mobileHeader--menu-list      { width: 100%; height: min-content; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 14px; overflow: hidden; }
.cl__mobileHeader--menu-item      { padding: 12px 0; width: 100%; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; gap: 10px; border-radius: 10px; }
.cl__mobileHeader--menu-item img  { width: 24px; }
.cl__mobileHeader--menu-item svg  { width: 24px; }
.cl__mobileHeader--menu-item span { width: 100%; word-break: keep-all; font-size: 14px; font-weight: 500; text-align: center; }
.cl__mobileHeader--menu-item:hover      { background: #F5F2FB; }
.cl__mobileHeader--menu-item:hover path { fill: #904AE8; }
.cl__mobileHeader--menu-item:hover span { color: #904AE8; }

.cl__footer { padding:3.125rem; width: 100%; background: var(--bg-element4); }
.cl__footer--header > img:first-child { width: 110px; }
.cl__footer--header > svg:first-child { width: 110px; }
.cl__footer--container { margin: 0 auto; max-width: 1200px; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; column-gap: 10rem; }
.cl__footer--inline  { display: inline-flex; justify-content: flex-start; align-items: center; gap: 1rem; }
.cl__footer--title { font-size: 1rem; font-weight: 700; color: #828282; }
.cl__footer--contents { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 1.25rem; }
.cl__footer--office { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 0.5rem; }
.cl__footer--office-detail { display: inline-flex; justify-content: flex-start; align-items: center; }
.cl__footer--office-detail .cl__footer--office-info { padding: 0 1rem; border-right: 1px solid #828282; }
.cl__footer--office-detail .cl__footer--office-info:first-child { padding-left: 0; }
.cl__footer--office-detail .cl__footer--office-info:last-child { border: unset; }
.cl__footer--office-info { font-size: 14px; font-weight: 300; color: #828282; }
.cl__footer--user { width: 100%; display: flex; justify-content: flex-start; align-items: center; column-gap: 2.5rem; row-gap: 2.5rem; }
.cl__footer--user-wrapper { display: inline-flex; justify-content: center; align-items: center; column-gap: 2.5rem; row-gap: 2.5rem; flex-wrap: wrap; }
.cl__footer--user-menu { font-size: 0.875rem; color: #828282; }
.cl__footer--about { margin-left: 0.625rem; padding: 0.5rem 0.75rem 0.5rem 1.5rem; position: relative; display: inline-flex; justify-content: center; align-items: center; background: #FFFFFF; border-radius: 1.5rem; }
.cl__footer--about-icon { position: absolute; left: 0; top: 50%; width: 30px; transform: translate(-40%, -50%); }
.cl__footer--about-text { margin: 0; font-size: 0.875rem; font-weight: 600; color: #904AE8; white-space: pre; }

.portal { padding-top: 150px; position: relative; width: 100%; height: 100%; min-height: 100vh; }

.marker__overlay { position: absolute; left: 0; bottom: 3rem; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #FFFFFF; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); border-radius: 0.5rem; overflow: hidden; }
.marker__overlay--header { padding: 0.5rem; width: 100%; display: flex; justify-content: space-between; align-items: center; background: #904AE8; }
.marker__overlay--title { font-size: 15px; font-weight: 600; color: #FFFFFF; }

.cl__contents            { position: relative; z-index: 2; width: 100%; }
.cl__contents--container { margin: 0 auto; max-width: 1200px; width: 100%; }

.cl__visual--select-icon { position: absolute; right: 1rem; top: 50%; width: 14px;transform: translateY(-50%); }

.cl__hero { padding: 11.5rem 0; }
.cl__hero--text { font-size: 40px; font-weight: 700; color: #222222; }
.cl__hero--text strong { font-size: 64px; font-weight: 700; background: linear-gradient(90deg, #9044EB 28.02%, #4487EB 97.58%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }
.cl__hero--org { padding: 10rem 0; }

.cl__org--background { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; max-width: 1920px; height: 100%; }
.cl__org--background-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

.cl__terms { position: relative; z-index: 5; width: 100%; display: flex; justify-content: center; align-items: center; }
.cl__terms--container { margin: 0 auto; padding: 1.25rem 0; position: relative; max-width: 1200px; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 1.25rem; }
.cl__terms--header { width: 100%; }
.cl__terms--title { font-size: 1.25rem; font-weight: 700; color: #904AE8; }
.cl__terms--contents { width: 100%; height: 100%; }
.cl__terms--info { width: 100%; word-break: keep-all; white-space: break-spaces; line-height: 1.75rem; }

.cl__policy { position: relative; z-index: 5; width: 100%; display: flex; justify-content: center; align-items: center; }
.cl__policy--container { margin: 0 auto; padding: 1.25rem 0; position: relative; max-width: 1200px; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 1.25rem; }
.cl__policy--header { width: 100%; }
.cl__policy--title { font-size: 1.25rem; font-weight: 700; color: #904AE8; }
.cl__policy--contents { width: 100%; height: 100%; }
.cl__policy--info { width: 100%; word-break: keep-all; white-space: break-spaces; line-height: 1.75rem; }
.cl__policy--link { font-size: 16px; font-weight: 600; color: #904AE8; cursor: pointer; background: #FFFFFF; }



.cl__findId                     { padding: 8rem 0; position: relative; z-index: 10; width: 100%; }
.cl__findId--container          { margin: 0 auto; position: relative; width: 680px; height: 680px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 50%; background: #f5f2fb; }
.cl__findId--wrapper            { position: relative; width: 100%; max-width: 384px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; }
.cl__findId--emoji              { animation: plump3 10s linear infinite; position: absolute; right: 0; top: 0; pointer-events: none; filter: drop-shadow(4px 6px 4px rgba(0, 0, 0, 0.1)); transform: translateY(10%); }
.cl__findId--header             { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 1.625rem; }
.cl__findId--title              { font-size: 3rem; font-weight: 700; color: var(--text1); text-align: center; }
.cl__findId--sub                { justify-self: flex-start; font-size: 15px; color: #828282; text-align: center; }
.cl__findId--contents           { margin-top: 2rem; position: relative; width: 100%; display: none; flex-direction: column; justify-content: center; align-items: center; row-gap: 2rem; }
.cl__findId--body               { margin-top: 2rem; position: relative; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; }
.cl__findId--input-contents     { position: relative; width: 100%; }
.cl__findId--input              { padding-bottom: 1rem; position: relative; width: 100%; display: grid; grid-template-columns: 3fr 7fr; place-items: center flex-start; gap: 1rem; border-bottom: 1px solid #222222; }
.cl__findId--input-text         { width: 100%; font-size: 18px; color: var(--text1); }
.cl__findId--text               { width: 100%; font-size: 18px; color: var(--text1); }
.cl__findId--button             { padding: 1rem 0; width: 100%; background: #904AE8; border-radius: 0.25rem; color: #FFFFFF; font-size: 18px; font-weight: 700; text-align: center; cursor: pointer; }
.cl__findId--done               { padding: 3.125rem 3rem; width: 100%; background-color: #f8f8f8; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.cl__findId--done-text          { font-size: 18px; color: var(--text1); text-align: center; }
.cl__findId--done-text strong   { color: #904AE8; }
.cl__findId--find               { display: none; }
.cl__findId--user-list          { width: 100%; display: none; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; }
.cl__findId--user-item          { padding: 10px; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid #DBDBDB; border-radius: 4px; }
.cl__findId--user-info          { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; }
.cl__findId--user-id            { font-size: 18px; font-weight: 500; color: #222222; }
.cl__findId--user-date          { font-size: 14px; font-weight: 400; color: #828282; }
.cl__findId--radio-wrap         { display: flex; align-content: center; align-self: flex-start; }
.cl__findId--user-radio         { display: none; }
.cl__findId--item-radio         { display: inline-flex; justify-content: flex-start; align-items: center; gap: 0.25rem; width: 16px; height: 16px; background-color: #E6E6E6; border: 3px solid #cccccc; border-radius: 50%; margin-right: .25rem; }
.cl__findId--radio-wrap > label { cursor: pointer; white-space: nowrap; }

.cl__findId--user-radio:checked ~ .cl__findId--item-radio { background-color: #904AE8; border: 3px solid #eee; }
.cl__findId--container:before  { content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; transform: translate(-50%, -50%); width: 700px; height: 700px; border-radius: 50%; border: 2px dashed #f5f2fb; }
.cl__findId--text::placeholder { font-size: 0.875rem; color: #A7A7A7; }
.cl__findId--button.disabled   { background: #828282; color: #FFFFFF; cursor: default; }
.cl__findId--button.invalid    { background: var(--warning-color-1); animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; -webkit-animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }
.cl__findId--user-item.active  { background: rgb(144 74 232 / 5%); border: 1px solid #904AE8; }
.cl__findId--input.active      { border-bottom: 1px solid #904AE8; }
.cl__findId--input.active .cl__join--input-title { color: #904AE8; }

.cl__findPass                   { padding: 8rem 0; position: relative; z-index: 10; width: 100%; }
.cl__findPass--container        { margin: 0 auto; position: relative; width: 680px; height: 680px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 50%; background: #f5f2fb; }
.cl__findPass--wrapper          { position: relative; width: 100%; max-width: 384px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.cl__findPass--svg              { position: absolute; z-index: -1; left: 50%; top: 50%; transform: translate(-50%, -45%); display: flex; justify-content: center; align-items: center; }
.cl__findPass--svg svg          { pointer-events: none; animation: bingbing 3.5s linear infinite; transform-origin: center; }
.cl__findPass--emoji            { animation: plump3 10s linear infinite; position: absolute; right: 0; top: 0; pointer-events: none; filter: drop-shadow(4px 6px 4px rgba(0, 0, 0, 0.1)); transform: translateY(10%); }
.cl__findPass--header           { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 1.625rem; }
.cl__findPass--title            { font-size: 3rem; font-weight: 700; color: var(--text1); text-align: center; }
.cl__findPass--sub              { justify-self: flex-start; font-size: 15px; color: #828282; text-align: center; white-space: nowrap; }
.cl__findPass--body             { margin-top: 2rem; position: relative; width: 100%; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 10px; }
.cl__findPass--contents         { margin-top: 2rem; width: 100%; display: none; flex-direction: column; justify-content: center; align-items: center; row-gap: 2rem; }
.cl__findPass--id-form          { margin-top: 2rem; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; }
.cl__findPass--mail-form        { margin-top: 2rem; width: 100%; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 20px; }
.cl__findPass--phone-form       { margin-top: 2rem; width: 100%; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 20px; }
.cl__findPass--item             { width: 100%; }
.cl__findPass--inpBox-item      { margin-top: 2rem; padding-bottom: 1rem; width: 100%; display: grid; grid-template-columns: 2fr 8fr; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--border1); }
.cl__findPass--input-contents   { position: relative; width: 100%; }
.cl__findPass--inpBox           { padding-bottom: 1rem; width: 100%; display: flex; justify-content: space-between; align-items: center; column-gap: 0.5rem; border-bottom: 1px solid var(--border1); }
.cl__findPass--text             { width: 100%; font-size: 18px; color: var(--text1); }
.cl__findPass--button           { padding: 1rem 0; width: 100%; background: #904AE8; border-radius: 0.25rem; color: #FFFFFF; font-size: 18px; font-weight: 700; text-align: center; cursor: pointer; }
.cl__findPass--done             { padding: 3.125rem 3rem; width: 100%; background-color: #FFFFFF; display: flex; justify-content: center; align-items: center; }
.cl__findPass--done-text        { font-size: 18px; color: var(--text1); text-align: center; }
.cl__findPass--done-text strong { color: #904AE8; }
.cl__findPass--input            { padding-bottom: 1.25rem; position: relative; width: 100%; display: grid; grid-template-columns: 3fr 7fr; place-items: center flex-start; gap: 1rem; border-bottom: 1px solid #222222; }
.cl__findPass--input-text       { width: 100%; font-size: 18px; color: var(--text1); }
.cl__findPass--warning          { width: 100%; display: none; font-size: 0.875rem; font-weight: 400; color: var(--warning-color-1); }
.cl__findPass--overlap          { padding: 0.125rem 0.5rem; color: var(--text1); border-radius: 0.25rem; border: 1px solid #DBDBDB; white-space: pre; background-color: #FFFFFF; }
.cl__findPass--input-visible    { cursor: pointer; }
.cl__findPass--checkbox         { position: absolute; width: 0; height: 0; }
.cl__findPass--cert-btn         { padding: 0.25rem 0.5rem; position: absolute; right: 0; top: 0; background: #904AE8; border-radius: 0.25rem; color: #FFFFFF; font-size: 15px; font-weight: 400; cursor: pointer; }

.cl__findPass--input.active       { border-bottom: 1px solid #904AE8; }
.cl__findPass--container:before   { content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; transform: translate(-50%, -50%); width: 700px; height: 700px; border-radius: 50%; border: 2px dashed #f5f2fb; }
.cl__findPass--text::placeholder  { font-size: 0.875rem; font-weight: 400; color: #A7A7A7; }
.cl__findPass--button.disabled    { background: #828282; color: #FFFFFF; cursor: default; }
.cl__findPass--button.invalid     { background: var(--warning-color-1); animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; -webkit-animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }
.cl__findPass--inpBox-item.active { border-bottom: 1px solid #904AE8; }
.cl__findPass--inpBox-item.active .cl__join--input-title { color: #904AE8; }
.cl__findPass--input.active .cl__join--input-title { color: #904AE8; }
.cl__findPass--input-text::placeholder { font-size: 0.875rem; color: #A7A7A7; }
.cl__findPass--input-visible:hover path{ fill: #222222; }
.cl__findPass--checkbox:checked ~ .cl__findPass--input-visible path{ fill: #222222; }

.cl__cert              { position: relative; z-index: 5; width: 100%; height: calc(100vh - 70px); display: flex; justify-content: center; align-items: center; }
.cl__cert--wrapper     { max-width: 500px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; }
.cl__cert--container   { position: relative; min-width: 384px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.cl__cert--svg         { position: absolute; z-index: -1; left: 50%; top: 50%; transform: translate(-50%, -45%); display: flex; justify-content: center; align-items: center; }
.cl__cert--svg svg     { pointer-events: none; animation: bingbing 3.5s linear infinite; transform-origin: center; }
.cl__cert--emoji       { animation: plump3 10s linear infinite; position: absolute; right: 0; top: 0; pointer-events: none; filter: drop-shadow(4px 6px 4px rgba(0, 0, 0, 0.1)); transform: translateY(10%); }
.cl__cert--item        { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 2rem; text-align: center; }
.cl__cert--header      { display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 1rem; text-align: center; }
.cl__cert--comment     { font-size: 48px; font-weight: 700; color: var(--text1); }
.cl__cert--comment-sub { font-size: 18px; color: var(--text1); line-height: 1.75rem; }
.cl__cert--contents    { font-size: 18px; color: var(--text1); }
.cl__cert--btn         { margin-top: 2rem; padding: 1rem 0; width: 384px; background: #904AE8; border-radius: 0.25rem; color: #FFFFFF; font-size: 18px; font-weight: 700; text-align: center; cursor: pointer; }

.cl__auth--back { margin-top: 2rem; width: 100%; text-align: center; font-size: 15px; font-weight: 400; color: #828282; }
.cl__auth--back:hover { color: #904AE8; }

.cl__kid--title { font-size: 32px; font-weight: 700; }