@charset "utf-8";
@import url(lib/normalize.min.css);

/**
* --------------------------------
* Landing CSS
* --------------------------------
*/

/** -------------------------------- Reset CSS -------------------------------- */
body { margin: 0; padding: 0; word-break: keep-all; word-wrap: break-word; -webkit-text-size-adjust: none; -webkit-overflow-scrolling: touch; }
h1, h2, h3, h4, h5, h6, i, p, div, span, li { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { padding: 0; border: 0; cursor: pointer; background-color: transparent; }
fieldset { margin: 0; padding: 0; border: none; }
legend { display: inline; }
label { position: relative; }
textarea { width: 100%; resize: none; overflow-y: auto; -webkit-appearance: none; }
input, select, textarea { padding: 0; border-radius: 0; }
input[type='text'], input[type='number'], input[type='password'], input[type='date'], input[type='search'], input[type='email'], input[type='tel'] { width: 100%; -webkit-appearance: none; }
input[type='text']::-ms-clear, input[type='password']::-ms-clear, input[type='password']::-ms-reveal { display: none; }
input[type='number'] { -moz-appearance: textfield; }
input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; }
input[type='file'] { cursor: pointer; }
strong { font-weight: 700; }
em { display: inline-block; font-style: normal; }
table { table-layout: fixed; width: 100%; border-collapse: collapse; border-spacing: 0; }
table caption { position: absolute; margin: -1px; padding: 0; width: 1px; height: 1px; border: 0; clip: rect(0 0 0 0); overflow: hidden; }
th, td { padding: 0; }
dl, dd { margin: 0; }
figure { margin: 0; }
img { max-width: 100%; vertical-align: top; }
hr { display: none; }
address { font-style: normal; }
*, *::before, *::after { box-sizing: border-box; }
a { color: #1a1a1e; text-decoration: none; }
a:hover, a:active, a:focus { color: #1a1a1e; }
.clear::after { content: ''; display: block; clear: both; }
.blind { position: absolute; margin: -1px; padding: 0; width: 1px; height: 1px; border: 0; clip: rect(0 0 0 0); overflow: hidden; }
#skip { position: fixed; left: 0; top: 0; right: 0; width: 100%; z-index: 9999; }
#skip > a { position: absolute; left: 0; top: -9999px; width: 100%; height: 30px; line-height: 30px; font-weight: 700; text-align: center; background-color: rgba(255, 255, 255, 0.9); }
#skip > a:focus { top: 0; }

/**
* --------------------------------
* Font CSS
* --------------------------------
*/

@font-face {
  font-family: 'Nanum Pen';
  src: local(※), url("../fonts/NanumPen.woff2") format("woff2"), url("../fonts/NanumPen.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  text-rendering: optimizeLegibility;
	font-display: swap;
}

@font-face {
  font-family: 'SUIT';
  src: local(※), url("../fonts/SUIT-Regular.woff2") format("woff2"), url("../fonts/SUIT-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  text-rendering: optimizeLegibility;
	font-display: swap;
}

@font-face {
  font-family: 'SUIT';
  src: local(※), url("../fonts/SUIT-Medium.woff2") format("woff2"), url("../fonts/SUIT-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  text-rendering: optimizeLegibility;
	font-display: swap;
}

@font-face {
  font-family: 'SUIT';
  src: local(※), url("../fonts/SUIT-Bold.woff2") format("woff2"), url("../fonts/SUIT-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  text-rendering: optimizeLegibility;
	font-display: swap;
}

@font-face {
  font-family: 'SUIT';
  src: local(※), url("../fonts/SUIT-ExtraBold.woff2") format("woff2"), url("../fonts/SUIT-ExtraBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  text-rendering: optimizeLegibility;
	font-display: swap;
}

@font-face {
  font-family: 'SUIT';
  src: local(※), url("../fonts/SUIT-Heavy.woff2") format("woff2"), url("../fonts/SUIT-Heavy.ttf") format("truetype");
  font-style: normal;
  font-weight: 900;
  text-rendering: optimizeLegibility;
	font-display: swap;
}

/**
* --------------------------------
* Style CSS
* --------------------------------
*/

html { scroll-behavior: smooth }
body { font-family: "SUIT", "Malgun Gothic", AppleGothicNeoSD, "Apple SD 산돌고딕 Neo", "Microsoft NeoGothic", "Droid sans", Dotum, 돋움, 굴림, Arial, Verdana, sans-serif; font-size: 14px; line-height: 22px; color: #1a1a1e; }
html, body { min-height: 100%; }
button { font-family: "SUIT"; touch-action: manipulation; }
.hand{ font-family: "Nanum Pen", cursive }
.btn { display: inline-block; text-align: center; }
a:focus-visible,
button:focus-visible { outline: 3px solid #4F28BD; outline-offset: 2px }
.gradient { background: linear-gradient(90deg, #7C6EFF 36%, #18D5ED 100%); color: #fff; }
.gradient:hover, .gradient:active { color: #fff; }
.primary { color: #4f28bd }

.only-mo { display: block; }
.only-pc { display: none; }

#header { position: sticky; top: 0; left: 0; width: 100%; height: 56px; z-index: 60; background-color: #fff; }
#header .inner { display: flex; align-items: center; justify-content: space-between; margin: 0 auto; padding: 0 20px; max-width: 1020px; height: 100%; }
/* #header .logo { display: inline-block; width: 153px; height: 30px; } */
/* #header .logo a { display: block; width: 100%; height: 100%; background: url('/resources/images/logo_img01.png') 0 0/auto 100% no-repeat; } */
#header .logo { display: inline-block; width: 112px; height: 30px; }
#header .logo a { display: block; width: 100%; height: 100%; background: url('/resources/images/logo_img02.png') 0 0/auto 100% no-repeat; }
#header .btn-join,
#header .btn-learning { display: none; }
#header .btn-trial { padding: 0 14px; height: 36px; font-size: 14px; font-weight: 700; line-height: 36px; color: #fff; background-color: #4F28BD; border-radius: 6px; }

#contents { padding-bottom: 68px; }

section { position: relative; }
section > .inner { padding: 60px 20px; margin-left: auto; margin-right: auto; max-width: 1020px; }
section .tit-area { text-align: center; }
section .tit-area .txt-bubble { position: relative; padding: 0 20px; text-align: center; font-size: 14px; font-weight: 700; line-height: 36px; border-radius: 18px; background-color: #1a1a1e; color: #fff; }
section .tit-area .txt-bubble::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); border-top: 10px solid #1a1a1e; border-left: 10px solid transparent; }
section .tit-area .tit { font-size: 28px; font-weight: 700; line-height: 36px; }
section .tit-area .tit > strong { color: #4F28BD; }
section .tit-area .txt-bubble + .tit { margin-top: 22px; }

section.hero-area { background: url('/resources/images/top_bg.jpg') top/100% 100% no-repeat; overflow: hidden; }
section.hero-area .inner { padding-bottom: 160px; }
section.hero-area .tit-area { text-align: left; }
section.hero-area .tit-area .tit { font-size: 40px; line-height: 48px; }
section.hero-area .tit-area > p { margin-top: 16px; font-size: 20px; line-height: 28px; }
section.hero-area .btn-area { display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, 1fr); gap: 6px; margin-top: 32px; }
section.hero-area .btn-area .btn { padding: 0 20px; height: 52px; border-radius: 10px; }
section.hero-area .btn-area .btn-trial { font-size: 16px; font-weight: 800; line-height: 52px; }
section.hero-area .btn-area .btn-trial::after { content: ''; display: inline-block; margin-top: 18px; margin-left: 8px; width: 16px; height: 16px; vertical-align: top; background: url('/resources/images/btn_arrow01.png') center/100% no-repeat; }
section.hero-area .btn-area .btn-learning { font-size: 16px; font-weight: 700; line-height: 50px; border: 1px solid #D5D7E2; background-color: #fff; color: #1a1a1e; }
section.hero-area .paper-box { margin-top: 40px; }

section.hero-area .paper { position: relative; margin-top: 40px; padding: 34px 30px 42px; background: repeating-linear-gradient(180deg, transparent 0 39px, #E7EDF6 39px 40px),#fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(26,43,74,.08); } /*transform: rotate(.4deg)*/
section.hero-area .paper::before { content: ''; position: absolute; inset: 0; padding: 2px; border-radius: inherit; background: linear-gradient(90deg, #7D6EFF 0%, #1AD3ED 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
section.hero-area .paper .p-q { font-size: 17px; font-weight: 700; line-height: 40px }
section.hero-area .paper .p-q .p-no { font-weight: 900; margin-right: 6px }
section.hero-area .paper .p-ans{ font-size: 26px; line-height: 40px; margin-top: 40px; color:#46335c;letter-spacing:.01em;white-space:nowrap}
section.hero-area .paper .m { position: relative; white-space: nowrap }
section.hero-area .paper .m i { font-style: normal; border-bottom: 2.5px solid transparent }
section.hero-area .paper .m::before { content:"";position:absolute;left:0;right:0;bottom:2px;height:0; border-bottom:2.5px solid #D2483A;opacity:0;transform:scaleX(0);transform-origin:left}
section.hero-area .paper .m::after { content:attr(data-fix);position:absolute;left:-2px;top:-1.05em; font-family: "Nanum Pen", cursive; font-size:18px;font-weight:700;color:#D2483A;white-space:nowrap;transform:rotate(-2deg); opacity:0}
section.hero-area .paper .stamp { position: absolute; right: -13px; bottom: -51px; width: 108px; height: 108px; background: url('/resources/images/stamp_img01.png') center/100% no-repeat; transform: rotate(-10deg); transform: scale(1.6); opacity: 0; box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.15); backdrop-filter: blur(4px); }
section.hero-area .paper.marked .m::before{animation:markline .5s ease forwards .15s}
section.hero-area .paper.marked .m.m2::before{animation-delay:.4s}
section.hero-area .paper.marked .m::after{animation:fixin .45s ease forwards .75s}
section.hero-area .paper.marked .m.m2::after{animation-delay:1s}
section.hero-area .paper.marked .stamp{ animation: stampin .35s cubic-bezier(.2,1.4,.4,1) forwards 1.45s; border-radius: 50%; }

.caret{ display: inline-block; width: 2px; height: 1.05em; background: #4400FF; margin-left: 2px; vertical-align: -2px; animation: blink .8s step-end infinite}
@keyframes markline{to{opacity:1;transform:scaleX(1)}}
@keyframes fixin{from{opacity:0;transform:rotate(-2deg) translateY(4px)}to{opacity:1;transform:rotate(-2deg) translateY(0)}}
@keyframes stampin { to { opacity: .8; transform: rotate(-10deg) scale(1) } }

section.persona-area { margin-top: -60px; background: linear-gradient(180deg, #FBF9FF 0%, #CFC5FC 100%); border-radius: 30px 30px 0 0; }
section.persona-area::before { content: ''; position: absolute; top: -34px; left: 50%; transform: translateX(-50%); width: 68px; height: 68px; z-index: 1; background: url('data:image/svg+xml, <svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="68" height="68" rx="34" fill="url(%23paint0_linear_1_252)"/><path d="M36.5 37.2727C36.5 38.779 35.3807 40 34 40C32.6193 40 31.5 38.779 31.5 37.2727L31.5 22.7273C31.5 21.221 32.6193 20 34 20C35.3807 20 36.5 21.221 36.5 22.7273L36.5 37.2727Z" fill="%23CFC5FC"/><circle cx="34" cy="45.5" r="2.5" fill="%23CFC5FC"/><defs><linearGradient id="paint0_linear_1_252" x1="34" y1="0" x2="34" y2="68" gradientUnits="userSpaceOnUse"><stop stop-color="%23FCF9FF"/><stop offset="0.5" stop-color="%23FCF9FF"/><stop offset="1" stop-color="%23FAF7FF"/></linearGradient></defs></svg>') center no-repeat; }
section.persona-area .cont { margin-top: 30px; }
section.persona-area .cont ul li { padding: 20px; text-align: center; border-radius: 16px; background-color: #fff; }
section.persona-area .cont ul li + li { margin-top: 12px; }
section.persona-area .cont ul li p { font-size: 18px; line-height: 26px; }
section.persona-area .cont ul li p > strong { color: #4f28bd; }
section.persona-area .txt-quote { display: block; margin-top: 12px; position: relative; font-size: 13px; line-height: 20px; color: #595764; }
section.persona-area .txt-quote::before,
section.persona-area .txt-quote::after { content: ''; display: inline-block; margin-top: 4px; width: 10px; height: 8px; vertical-align: top; }
section.persona-area .txt-quote::before { margin-right: 6px; background: url('data:image/svg+xml, <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.71429 2.9781C2.56429 3.36496 2.69286 3.61314 3.11429 3.70803C3.43571 3.78832 3.75714 3.9781 4.07143 4.29197C4.38571 4.60584 4.54286 5.08029 4.54286 5.72263C4.54286 5.9927 4.49286 6.26277 4.4 6.52555C4.30714 6.78832 4.16429 7.0292 3.97143 7.24088C3.77857 7.45255 3.55 7.62774 3.27143 7.76642C2.99286 7.90511 2.67857 7.9708 2.31429 7.9708C1.65 7.9708 1.09286 7.70803 0.657143 7.18248C0.221429 6.65693 0 5.9927 0 5.19708C0 3.9708 0.371429 2.91971 1.11429 2.0438C1.85714 1.16788 2.80714 0.489051 3.97143 0L4.62857 1.22628C4.19286 1.43796 3.79286 1.70073 3.44286 2C3.09286 2.29927 2.85 2.62774 2.71429 2.9781ZM8.08571 3.0073C7.93571 3.39416 8.06429 3.64234 8.48571 3.73723C8.80714 3.81752 9.12857 4.0073 9.44286 4.32117C9.75714 4.63504 9.91429 5.10949 9.91429 5.75182C9.91429 6.0219 9.86429 6.29197 9.77143 6.55474C9.67857 6.81752 9.53571 7.05839 9.34286 7.27007C9.15 7.48175 8.92143 7.65693 8.64286 7.79562C8.36429 7.93431 8.05 8 7.68571 8C7.02143 8 6.46429 7.73723 6.02857 7.21168C5.59286 6.68613 5.37143 6.0219 5.37143 5.22628C5.37143 4 5.74286 2.9489 6.48571 2.07299C7.22857 1.19708 8.17857 0.518248 9.34286 0.0291971L10 1.25547C9.56429 1.46715 9.16429 1.72993 8.81429 2.0292C8.46429 2.32847 8.22143 2.65693 8.08571 3.0073Z" fill="url(%23paint0_linear_1_261)"/><defs><linearGradient id="paint0_linear_1_261" x1="5" y1="0" x2="5" y2="8" gradientUnits="userSpaceOnUse"><stop stop-color="%23C0B9FF"/><stop offset="1" stop-color="%239085F6"/></linearGradient></defs></svg>') center/10px 8px no-repeat; }
section.persona-area .txt-quote::after { margin-left: 6px; background: url('data:image/svg+xml, <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.28571 5.0219C7.43571 4.63504 7.30714 4.38686 6.88571 4.29197C6.56429 4.21168 6.24286 4.0219 5.92857 3.70803C5.61429 3.39416 5.45714 2.91971 5.45714 2.27737C5.45714 2.0073 5.50714 1.73723 5.6 1.47445C5.69286 1.21168 5.83571 0.970803 6.02857 0.759124C6.22143 0.547445 6.45 0.372263 6.72857 0.233577C7.00714 0.0948908 7.32143 0.0291975 7.68571 0.0291975C8.35 0.0291975 8.90714 0.291971 9.34286 0.817519C9.77857 1.34307 10 2.0073 10 2.80292C10 4.0292 9.62857 5.08029 8.88571 5.9562C8.14286 6.83212 7.19286 7.51095 6.02857 8L5.37143 6.77372C5.80714 6.56204 6.20714 6.29927 6.55714 6C6.90714 5.70073 7.15 5.37226 7.28571 5.0219ZM1.91428 4.9927C2.06429 4.60584 1.93571 4.35766 1.51429 4.26277C1.19286 4.18248 0.871428 3.9927 0.557142 3.67883C0.242856 3.36496 0.0857138 2.89051 0.0857139 2.24817C0.0857139 1.9781 0.135713 1.70803 0.228571 1.44526C0.321428 1.18248 0.464286 0.941606 0.657142 0.729927C0.85 0.518248 1.07857 0.343065 1.35714 0.204379C1.63571 0.0656931 1.95 -2.26916e-07 2.31429 -1.95069e-07C2.97857 -1.36996e-07 3.53571 0.262774 3.97143 0.788321C4.40714 1.31387 4.62857 1.9781 4.62857 2.77372C4.62857 4 4.25714 5.05109 3.51429 5.92701C2.77143 6.80292 1.82143 7.48175 0.657142 7.9708L-8.43917e-07 6.74452C0.435713 6.53285 0.835714 6.27007 1.18571 5.9708C1.53571 5.67153 1.77857 5.34307 1.91428 4.9927Z" fill="url(%23paint0_linear_1_264)"/><defs><linearGradient id="paint0_linear_1_264" x1="5" y1="8" x2="5" y2="5.1656e-07" gradientUnits="userSpaceOnUse"><stop stop-color="%239085F6"/><stop offset="1" stop-color="%23C0B9FF"/></linearGradient></defs></svg>') center/10px 8px no-repeat; }

section.cause-area .cont { text-align: center; }
section.cause-area .cont .box-wrap { display: flex; flex-direction: column; align-items: center; margin: 40px auto 0; }
section.cause-area .cont .box-wrap .box { width: 100%; max-width: 458px; }
section.cause-area .cont .box-wrap .box .tit { padding: 14px 20px; color: #fff; border-radius: 16px 16px 0 0; }
section.cause-area .cont .box-wrap .box .tit strong { display: block; font-size: 16px; line-height: 24px; }
section.cause-area .cont .box-wrap .box .txt { padding: 20px; border-radius: 0 0 16px 16px; }
section.cause-area .cont .box-wrap .box .txt p { font-size: 18px; line-height: 26px; font-weight: 800; }
section.cause-area .cont .box-wrap .box .txt small { display: block; margin-top: 8px; font-size: 14px; line-height: 20px; }
section.cause-area .cont .box-wrap .box.past .tit { color: #1a1a1e; background-color: #D5D7E2; }
section.cause-area .cont .box-wrap .box.past .txt { background-color: #f4f5f7; }
section.cause-area .cont .box-wrap .box.now .tit { background-color: #4f28bd; }
section.cause-area .cont .box-wrap .box.now .txt { background-color: #eee9ff; }
section.cause-area .cont .box-wrap .box.now .txt p { color: #4f28bd; }
section.cause-area .cont .box-wrap .box.now .txt small { color: #1a1a1e; }
section.cause-area .cont .box-wrap .vs { position: relative; margin: -10px 0; width: 50px; height: 50px; text-align: center; font-size: 18px; line-height: 44px; font-weight: 900; color: #fff; border-radius: 50%; background: linear-gradient(180deg, #9085f6 25%, #227deb 100%); border: 3px solid #CFC5FC; z-index: 1; }
section.cause-area .cont .txt1 { margin-top: 40px; font-size: 16px; font-weight: 500; line-height: 24px; }
section.cause-area .cont .txt2 { margin-top: 20px; font-size: 18px; font-weight: 700; line-height: 26px; color: #292733; }
section.cause-area .cont .txt2::before { content: ''; display: block; margin: 20px auto; width: 4px; height: 28px; background: url('data:image/svg+xml, <svg width="4" height="28" viewBox="0 0 4 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="2" fill="%239085F6"/><circle cx="2" cy="14" r="2" fill="%239085F6"/><circle cx="2" cy="26" r="2" fill="%239085F6"/></svg>') center no-repeat; }
section.cause-area .cont .txt3 { margin-top: 8px; font-size: 24px; font-weight: 700; line-height: 32px; }
section.cause-area .cont .txt3 span { background: linear-gradient(transparent calc(100% - 12px),#F8E9FF calc(100% - 12px)); }

section.shift-area { background: url('/resources/images/shift_bg.jpg') center/100% no-repeat; }
section.shift-area .cont .txt { margin-top: 16px; text-align: center; font-size: 20px; line-height: 28px; font-weight: 500; }
section.shift-area .cont .box { margin: 40px auto 0; padding: 30px 16px; max-width: 520px; text-align: center; border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box,linear-gradient(180deg, #f5c5fc 0%, #cfc5fc 100%) border-box; border-radius: 16px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); }
section.shift-area .cont .box strong { display: block; font-size: 18px; line-height: 26px; font-weight: 700; color: #4f28bd; }
section.shift-area .cont .box strong::before,
section.shift-area .cont .box strong::after { content: ''; display: inline-block; vertical-align: top; width: 24px; height: 24px; background: url('/resources/images/shift_icon01.png') center/24px no-repeat; }
section.shift-area .cont .box strong::before { margin-right: 8px; }
section.shift-area .cont .box strong::after { margin-left: 8px; }
section.shift-area .cont .box ul { margin-top: 30px; }
section.shift-area .cont .box ul li { padding: 16px; text-align: center; font-size: 16px; line-height: 24px; font-weight: 700; color: #292733; border-radius: 10px; }
section.shift-area .cont .box ul li em { display: inline-block; margin-top: 2px; margin-right: 8px; width: 20px; height: 20px; vertical-align: top; font-size: 12px; line-height: 20px; font-weight: 800; color: #fff; border-radius: 100%; }
section.shift-area .cont .box ul li:first-child { background: #ffeae0; }
section.shift-area .cont .box ul li:first-child em { background: #eb824e; }
section.shift-area .cont .box ul li:nth-child(2) { margin-top: 10px; background: #F8E9FF; }
section.shift-area .cont .box ul li:nth-child(2) em { background: #d67dff; }
/* section.shift-area .cont .box ul { display: flex; margin-top: 28px; }
section.shift-area .cont .box ul li { width: 50%; text-align: center; font-size: 16px; line-height: 24px; font-weight: 700; color: #292733; }
section.shift-area .cont .box ul li + li { border-left: 1px solid #eee9ff; } */

section.usp-area { scroll-margin-top: 56px; }
section.usp-area .cont { margin-top: 40px; }
section.usp-area .cont li { padding: 30px 20px; text-align: center; border-radius: 16px; border: 2px solid transparent; }
section.usp-area .cont li em { display: block; margin: 0 auto; width: 40px; height: 40px; font-size: 16px; font-weight: 800; line-height: 40px; color: #fff; border-radius: 50%; background: linear-gradient(180deg, #c0b9ff 0%, #9085f6 100% ); }
section.usp-area .cont li strong { display: block; margin-top: 16px; font-size: 18px; font-weight: 700; line-height: 26px; }
section.usp-area .cont li p { margin-top: 6px; font-size: 16px; font-weight: 500; line-height: 24px; }
section.usp-area .cont li small { display: block; margin-top: 16px; font-size: 14px; font-weight: 500; line-height: 20px; color: #595764; }
section.usp-area .cont li + li { margin-top: 12px; }
section.usp-area .cont li:first-child { background: linear-gradient(#FAFCFF, #FAFCFF) padding-box,linear-gradient(180deg, #9085F6 0%, #7CEDFF 100%) border-box; }
section.usp-area .cont li:first-child strong span { color: #518ff2; }
section.usp-area .cont li:nth-child(2) { background: linear-gradient(#FDFFFA, #FDFFFA) padding-box,linear-gradient(180deg, #29C7D6 0%, #CCF6A6 100%) border-box; }
section.usp-area .cont li:nth-child(2) strong span { color: #19B7C9; }
section.usp-area .cont li:nth-child(3) { background: linear-gradient(#FEFAFF, #FEFAFF) padding-box,linear-gradient(180deg, #E097F8 0%, #FFC7B7 100%) border-box; }
section.usp-area .cont li:nth-child(3) strong span { color: #D67DFF; }

section.trust-area { background: linear-gradient(180deg, #eff5ff 0%, #c9ddff 100%); overflow: hidden; }
section.trust-area .cont { margin-top: 40px; } 
section.trust-area .cont > ul > li { position: relative; padding: 30px 20px; text-align: center; background-color: #fff; border-radius: 16px; }
section.trust-area .cont > ul > li + li { margin-top: 20px; }
section.trust-area .cont > ul > li::before { content: ''; display: block; margin: 0 auto; width: 60px; height: 60px; }
section.trust-area .cont > ul > li .stamp { position: absolute; top: -12px; right: -6px; transform: rotate(-12deg); width: 88px; height: 88px; border-radius: 50%; box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.12); }
section.trust-area .cont > ul > li:nth-child(1) .stamp { background: url('/resources/images/stamp_img03.png') center/100% no-repeat; }
section.trust-area .cont > ul > li:nth-child(2) .stamp { background: url('/resources/images/stamp_img04.png') center/100% no-repeat; }
section.trust-area .cont > ul > li:nth-child(3) .stamp { background: url('/resources/images/stamp_img05.png') center/100% no-repeat; }
section.trust-area .cont > ul > li:nth-child(1)::before { background: url('/resources/images/trust_icon01.jpg') center/100% no-repeat; } 
section.trust-area .cont > ul > li:nth-child(2)::before { background: url('/resources/images/trust_icon02.jpg') center/100% no-repeat; } 
section.trust-area .cont > ul > li:nth-child(3)::before { background: url('/resources/images/trust_icon03.jpg') center/100% no-repeat; } 
section.trust-area .cont > ul > li:nth-child(2) .icon { display: inline-block; margin-top: 5px; margin-left: 6px; width: 13px; height: 18px; vertical-align: top; background: url('data:image/svg+xml, <svg width="13" height="18" viewBox="0 0 13 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 7.2L8.64433 7.2L8.64433 18L4.35567 18L4.35567 7.2L-9.63183e-07 7.2L6.5 1.3391e-06L13 7.2Z" fill="url(%23paint0_linear_1_423)"/><defs><linearGradient id="paint0_linear_1_423" x1="6.5" y1="18" x2="6.5" y2="2.03729e-06" gradientUnits="userSpaceOnUse"><stop stop-color="%239085F6" stop-opacity="0"/><stop offset="0.355769" stop-color="%239085F6"/></linearGradient></defs></svg>') center no-repeat; }
section.trust-area .cont li > strong { display: block; margin-top: 20px; font-size: 20px; line-height: 28px; }
section.trust-area .cont li > p { margin-top: 6px; font-size: 16px; line-height: 24px; font-weight: 500; color: #292733; }
section.trust-area .cont li .check-list { position: relative; margin-top: 24px; padding-top: 24px; }
section.trust-area .cont li .check-list::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: radial-gradient(ellipse 4px 2px at center, #D5D7E2 0 100%, transparent 100%) repeat-x; background-size: 12px 2px; background-position: center; }
section.trust-area .cont li .check-list dl { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 4px; }
section.trust-area .cont li .check-list dt { width: calc(100% - 80px); margin-top: 12px; text-align: left; font-size: 14px; line-height: 20px; font-weight: 700; color: #3e3b4f; }
section.trust-area .cont li .check-list dt::before { content: ''; display: inline-block; margin-right: 6px; width: 20px; height: 20px; vertical-align: top; background: url('data:image/svg+xml, <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 9.63636L8.70886 14L16 6" stroke="url(%23paint0_linear_1_400)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><defs><linearGradient id="paint0_linear_1_400" x1="3.5" y1="19" x2="17" y2="5" gradientUnits="userSpaceOnUse"><stop stop-color="%23CFC5FC"/><stop offset="1" stop-color="%237C5FFF"/></linearGradient></defs></svg>') center/20px no-repeat; }
section.trust-area .cont li .check-list dd { margin-top: 12px; width: 80px; font-size: 14px; line-height: 20px; font-weight: 500; color: #a2a5aa; }
section.trust-area .cont li .check-list dt:nth-of-type(1),
section.trust-area .cont li .check-list dd:nth-of-type(1) { margin-top: 0; }
section.trust-area .cont .memo { position: relative; margin-top: 34px; padding: 24px 30px; width: calc(100% - 60px); max-width: 540px; text-align: center; background: #fff repeating-linear-gradient(180deg,transparent 0 20px,rgba(238, 233, 255, 0.3) 20px 22px ) center/calc(100% - 20px) 100% no-repeat; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); }
section.trust-area .cont .memo::before { content: ''; position: absolute; left: 50%; top: -14px; transform: translateX(-50%); width: 100px; height: 28px; background: url('data:image/svg+xml, <svg width="100" height="32" viewBox="0 0 100 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.7" d="M99.1812 3.30755L96.3204 7.71021L99.2565 12.5663L95.9453 18.4537L99.5029 23.5813L95.0333 31.1798L0.321716 27.8724L3.18247 23.4697L0.246368 18.6137L3.55764 12.7262L4.39155e-05 7.59859L4.46962 0.000151877L99.1812 3.30755Z" fill="%23CFC5FC"/></svg>') center no-repeat; }
section.trust-area .cont .memo-wrap:nth-child(2 of .memo-wrap)  { display: flex; justify-content: flex-end; }
section.trust-area .cont .memo-wrap:nth-child(1 of .memo-wrap) .memo { margin-top: 38px; transform: rotate(2deg); }
section.trust-area .cont .memo-wrap:nth-child(2 of .memo-wrap) .memo { transform: rotate(-2deg); }
section.trust-area .cont .memo p { font-size: 16px; line-height: 24px; color: #292733; }
section.trust-area .cont .memo p strong em.primary { background: linear-gradient(transparent calc(100% - 12px), #F8E9FF calc(100% - 12px)); }
section.trust-area .cont .memo p::before, 
section.trust-area .cont .memo p::after { content: ''; display: inline-block; width: 12px; height: 10px; vertical-align: top; }
section.trust-area .cont .memo p::before { margin-right: 5px; background: url('data:image/svg+xml, <svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.29854 3.97304C3.12803 4.46287 3.29947 4.76729 3.83008 4.86745C4.23512 4.95373 4.64494 5.17679 5.05125 5.55518C5.45756 5.93356 5.67457 6.51941 5.70259 7.32184C5.71437 7.65923 5.66369 7.99879 5.55915 8.33111C5.45462 8.66343 5.28666 8.97057 5.05497 9.24342C4.82328 9.51628 4.54538 9.74509 4.20343 9.9305C3.86148 10.1159 3.47173 10.2117 3.01665 10.2276C2.1868 10.2565 1.47933 9.95259 0.912092 9.31506C0.344854 8.67753 0.0392598 7.85741 0.00455138 6.86349C-0.0489442 5.33157 0.369205 4.0023 1.259 2.87567C2.14879 1.74904 3.30596 0.859575 4.73909 0.197843L5.61352 1.70109C5.07844 1.98453 4.59021 2.33025 4.16603 2.71938C3.74185 3.10851 3.4528 3.52943 3.29854 3.97304ZM10.01 3.77519C9.8395 4.26502 10.0109 4.56944 10.5415 4.6696C10.9466 4.75588 11.3564 4.97894 11.7627 5.35732C12.169 5.73571 12.386 6.32156 12.4141 7.12399C12.4258 7.46138 12.3752 7.80094 12.2706 8.13326C12.1661 8.46558 11.9981 8.77272 11.7664 9.04557C11.5348 9.31842 11.2569 9.54724 10.9149 9.73264C10.5729 9.91805 10.1832 10.0138 9.72812 10.0297C8.89827 10.0587 8.1908 9.75473 7.62356 9.11721C7.05632 8.47968 6.75073 7.65956 6.71602 6.66564C6.66253 5.13372 7.08067 3.80445 7.97047 2.67782C8.86026 1.55119 10.0174 0.661724 11.4506 -8.39444e-06L12.325 1.50324C11.7899 1.78668 11.3017 2.1324 10.8775 2.52153C10.4533 2.91066 10.1643 3.33158 10.01 3.77519Z" fill="url(%23paint0_linear_1_471)"/><defs><linearGradient id="paint0_linear_1_471" x1="6.02402" y1="0.152972" x2="6.37302" y2="10.1469" gradientUnits="userSpaceOnUse"><stop stop-color="%23C0B9FF"/><stop offset="1" stop-color="%239085F6"/></linearGradient></defs></svg>') center no-repeat; }
section.trust-area .cont .memo p::after { margin-left: 5px; background: url('data:image/svg+xml, <svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.11723 6.25645C9.28774 5.76662 9.1163 5.4622 8.58569 5.36204C8.18065 5.27576 7.77083 5.0527 7.36452 4.67432C6.95821 4.29593 6.7412 3.71008 6.71318 2.90765C6.7014 2.57027 6.75208 2.2307 6.85662 1.89838C6.96115 1.56606 7.12911 1.25892 7.3608 0.986069C7.59249 0.713219 7.87039 0.484402 8.21234 0.298997C8.55429 0.113593 8.94404 0.0178156 9.39912 0.00192393C10.229 -0.027055 10.9364 0.276907 11.5037 0.914433C12.0709 1.55196 12.3765 2.37209 12.4112 3.36601C12.4647 4.89792 12.0466 6.22719 11.1568 7.35382C10.267 8.48045 9.10981 9.36992 7.67668 10.0316L6.80225 8.5284C7.33733 8.24496 7.82556 7.89924 8.24974 7.51011C8.67392 7.12099 8.96298 6.70006 9.11723 6.25645ZM2.40576 6.4543C2.57627 5.96447 2.40483 5.66005 1.87422 5.5599C1.46918 5.47361 1.05936 5.25055 0.653049 4.87217C0.24674 4.49378 0.0297335 3.90793 0.00171204 3.1055C-0.0100697 2.76812 0.0406096 2.42855 0.145147 2.09623C0.249685 1.76391 0.41764 1.45677 0.64933 1.18392C0.88102 0.911068 1.15892 0.682253 1.50087 0.496848C1.84282 0.311444 2.23257 0.215666 2.68765 0.199775C3.51751 0.170796 4.22497 0.474758 4.79221 1.11228C5.35945 1.74981 5.66504 2.56994 5.69975 3.56386C5.75325 5.09577 5.3351 6.42504 4.4453 7.55167C3.55551 8.6783 2.39834 9.56777 0.965208 10.2295L0.0907839 8.72625C0.625861 8.44281 1.11409 8.09709 1.53827 7.70796C1.96245 7.31884 2.25151 6.89791 2.40576 6.4543Z" fill="url(%23paint0_linear_1_469)"/><defs><linearGradient id="paint0_linear_1_469" x1="6.39175" y1="10.0765" x2="6.04275" y2="0.0826123" gradientUnits="userSpaceOnUse"><stop stop-color="%239085F6"/><stop offset="1" stop-color="%23C0B9FF"/></linearGradient></defs></svg>') center no-repeat; }
section.trust-area .cont .certification { position: relative; padding-top: 76px; }
section.trust-area .cont .certification::before { content: ''; position: absolute; top: 24px; left: 50%; transform: translateX(-50%); width: 4px; height: 28px; background: url('data:image/svg+xml,<svg width="4" height="28" viewBox="0 0 4 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="2" fill="%239085F6"/><circle cx="2" cy="14" r="2" fill="%239085F6"/><circle cx="2" cy="26" r="2" fill="%239085F6"/></svg>') center no-repeat; }
section.trust-area .cont .certification .certification-wrap { padding: 30px 20px; background: linear-gradient(#fff, #fff) padding-box,linear-gradient(90deg, #7D6EFF 0%, #1AD3ED 100%) border-box; border: 2px solid transparent;	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); border-radius: 16px; }
section.trust-area .cont .certification strong { display: block; text-align: center; font-size: 20px; line-height: 28px; }
section.trust-area .cont .certification strong::before { content: ''; display: block; margin: 0 auto 20px; width: 60px; height: 60px; background: url('/resources/images/trust_icon04.jpg') center/100% no-repeat; }
section.trust-area .cont .certification ul { margin-top: 24px; }
section.trust-area .cont .certification ul li { position: relative; padding-left: 30px; padding-right: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: #292733; }
section.trust-area .cont .certification ul li + li { margin-top: 16px; padding-top: 16px; }
section.trust-area .cont .certification ul li + li::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: radial-gradient( ellipse 2px 0.5px at center, #D5D7E2 0 100%, transparent 100% ) repeat-x; background-size: 8px 1px; background-position: center; }
section.trust-area .cont .certification ul li::before { content: ''; position: absolute; top: 16px; left: 4px; vertical-align: top; width: 20px; height: 20px; background: url('data:image/svg+xml, <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 9.61799L8.70886 14.1998L16 5.7998" stroke="url(%23paint0_linear_1_491)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><defs><linearGradient id="paint0_linear_1_491" x1="3.5" y1="19.4498" x2="17.6833" y2="5.44163" gradientUnits="userSpaceOnUse"><stop stop-color="%237D6EFF"/><stop offset="1" stop-color="%231AD3ED"/></linearGradient></defs></svg>') center no-repeat; }
section.trust-area .cont .certification ul li:first-child::before { top: 0; }

section.model-area .cont { margin-top: 40px; padding: 40px 20px; border: 2px solid #9085f6; border-radius: 16px; background-color: #FCFAFF; }
section.model-area .cont li { position: relative; text-align: center; }
section.model-area .cont li + li { margin-top: 40px; padding-top: 40px; }
section.model-area .cont li + li::before { content: ''; position: absolute; top: 0; left: 10px; width: calc(100% - 20px); height: 3px; background: radial-gradient( ellipse 4px 2px at center, #CFC5FC 0 100%, transparent 100% ) repeat-x; background-size: 12px 2px; background-position: center; }
section.model-area .cont li em { display: inline-block; padding: 0 20px; border-radius: 18px; font-size: 14px; line-height: 36px; font-weight: 700; color: #fff; background-color: #4f28bd; }
section.model-area .cont li p { margin-top: 24px; font-size: 16px; font-weight: 500; line-height: 24px; color: #595764; }
section.model-area .cont li strong { display: block; margin-top: 12px; font-size: 18px; line-height: 26px; }
section.model-area .cont li .word { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
section.model-area .cont li .word span { padding: 0 16px; font-size: 13px; line-height: 30px; border-radius: 16px; border: 1px solid #9996f8;; }

/* B3 데모 3종 — 채점지 스크린 */
section.demo-area { background-color: #F4F5F7; }
section.demo-area .cont { margin: 40px auto 0; }
section.demo-area .demos { display:flex; flex-direction: column; gap: 18px; max-width: 860px; }
section.demo-area .demo { display: grid; grid-template-columns: 1fr; background: #fff; overflow: hidden; border-radius: 16px; }
section.demo-area .demo .dlabel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; font-size: 15px; gap: 6px; text-align: center; background: #9085F6; color: #fff; font-weight: 800; line-height: 1.5; letter-spacing: -.01em; border-radius: 16px 16px 0 0; }
section.demo-area .demo .dlabel > strong { display: block; font-size: 18px; line-height: 28px; }
section.demo-area .demo .dlabel .step { padding: 0 13px; font-size: 13px; line-height: 28px; font-weight: 700; border: 1px solid #fff; background-color: #9085F6; border-radius: 15px; }
section.demo-area .demo .dscreen { position: relative; padding: 24px 22px; min-height: 150px; background: #fff; }
section.demo-area .demo .dwrap { border-left: 2px solid #CFC5FC; border-right: 2px solid #CFC5FC; }
section.demo-area .demo .dscreen > .chip { transition: all .35s cubic-bezier(.3,.8,.4,1); }
section.demo-area .demo .dscreen .flying-chip { position: absolute; left: 0; top: 0; margin: 0; pointer-events: none; will-change: transform; }
section.demo-area .demo .dko { font-size: 15px; color: #1a1a1e; font-weight: 800; text-align: center; margin-bottom: 6px; line-height:1.5 }
section.demo-area > .inner > .btn-area { margin-top: 24px; text-align: center; }
section.demo-area > .inner > .btn-area .btn-trial { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 60px; font-size: 18px; line-height: 60px; font-weight: 800; border-radius: 10px; }
section.demo-area > .inner > .btn-area .btn-trial::after { content: ''; display: inline-block; margin-left: 10px; width: 16px; height: 16px; vertical-align: top; background: url('data:image/svg+xml, <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM5.66797 4L6.23438 4.56543L9.66895 8L6.23438 11.4346L5.66797 12L6.7998 13.1318L7.36523 12.5654L11.3652 8.56543L11.9316 8L11.3652 7.43457L7.36523 3.43457L6.7998 2.86816L5.66797 4Z" fill="white"/></svg>') center no-repeat; }

/* 단어 칩 (실제 제품 UI의 선택·배열 방식 재현) */
section.demo-area .chiptray { display:flex; flex-wrap: wrap; gap: 6px; margin-top:12px }
section.demo-area .chip { padding: 0 11px; font-size: 13px; line-height: 30px; color: #1a1a1e; transition: .25s; background: #fff; border: 1px solid #9996fb; border-radius: 16px; }
section.demo-area .ansrow { display: flex; align-items: flex-end; gap: 10px; margin-top: 16px}
section.demo-area .ansrow .arr { color: #1a1a1e; font-weight:900; font-size: 17px; line-height: 1; padding-bottom: 10px}
section.demo-area .chipans { flex: 1; min-height: 38px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-bottom: 2px solid #cfc5fc; padding-bottom: 8px }
section.demo-area .chipans .chip { border-color: #9996F8; background: #F5F2FF; color: #4F28BD; z-index: 5; } /*animation:chipin .28s ease*/
section.demo-area .chip.bad { border-color: #FF0000; color: #FF0000; background: #FFE6E3; animation: chipblink 1.1s ease infinite}
/* ① 대기 칩 들썩임 */
section.demo-area .chiptray.idle .chip { animation: bob 1.6s ease-in-out infinite; }
section.demo-area .chiptray.idle .chip:nth-child(2n) { animation-delay: .2s; }
section.demo-area .chiptray.idle .chip:nth-child(3n) { animation-delay: .45s; }
section.demo-area .chiptray.idle .chip:nth-child(5n) { animation-delay: .7s; }

/* ② Try Again! 체크 오버레이 (제품 화면의 보라 채점 마킹 재현) */
section.demo-area .tryagain{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:4px;opacity:0;transform:scale(1.6);pointer-events:none;transition:.3s cubic-bezier(.2,1.4,.4,1);z-index: 6;}
section.demo-area .tryagain.show{opacity:1;transform:scale(1)}
section.demo-area .tryagain .ta-txt{margin-left:-30px;font-family:"Nanum Pen",cursive;font-size:30px;font-weight:700;color:#6C4BD8;transform:rotate(-9deg) translateY(20px);text-shadow:0 0 6px #fff,0 0 10px #fff}
section.demo-area .dfb{margin-top:12px;background:#fff;border:1px solid #D9E1F0;border-left:3px solid #6C4BD8;border-radius:8px;padding:10px 12px;font-size:12.5px;color:#1a1a1e;line-height:1.5}
section.demo-area .retry-row{display:flex;justify-content:center;margin-top:16px}
section.demo-area .retry-btn{background:#6C4BD8;color:#fff;border-radius:10px;padding:10px 24px;font-size:14px;font-weight:800;box-shadow:0 4px 12px rgba(108,75,216,.3)}
/* ③ 화면 진입 시 해설 → 다시 써보기 순차 등장 (JS가 fade-pending 부여) */
section.demo-area .fade-pending .dfb,
section.demo-area .fade-pending .retry-row{opacity:0}
section.demo-area .fade-pending.seen .dfb{animation:fadein .6s ease .2s both}
section.demo-area .fade-pending.seen .retry-row{animation:fadein .6s ease 1.4s both}
section.demo-area .demo .dcap { grid-column: 1 / -1; padding:12px 18px; font-size:13px; font-weight: 700; color:#1a1a1e; border: 2px solid #CFC5FC; border-top: 1px solid #CFC5FC; border-radius: 0 0 16px 16px; }

section.curriculum-area .tit-area .sub-tit { margin-top: 16px; font-size: 20px; font-weight: 500; line-height: 28px; }
section.curriculum-area .cont { margin-top: 40px; }
section.curriculum-area .cont li { position: relative; padding: 32px 20px; border-radius: 16px; border: 2px solid #e4e5ec; }
section.curriculum-area .cont li.popular { border: 2px solid #4f28bd; }
section.curriculum-area .cont li.popular .txt-popular { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); padding: 8px 20px; width: max-content; font-size: 14px; line-height: 20px; font-weight: 700; color: #fff; border-radius: 18px; background-color: #4f28bd; }
section.curriculum-area .cont li + li { margin-top: 20px; }
section.curriculum-area .cont li + li.popular { margin-top: 38px; }
section.curriculum-area .cont li .top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px; }
section.curriculum-area .cont li .level { font-size: 16px; line-height: 24px; font-weight: 700; color: #a2a5aa; }
section.curriculum-area .cont li .badge { padding: 0 8px; text-align: center; border-radius: 4px; font-size: 13px; line-height: 28px; font-weight: 400; color: #4f28bd; background-color: #EEE9FF; }
section.curriculum-area .cont li > strong { display: block; margin-top: 12px; font-size: 20px; line-height: 28px; font-weight: 700; color: #292733; }
section.curriculum-area .cont li > p { margin-top: 6px; font-size: 16px; line-height: 24px; color: #292733; }
section.curriculum-area .cont li .num { position: relative; margin-top: 24px; padding: 16px; text-align: center; font-size: 14px; line-height: 26px; font-weight: 500; }
section.curriculum-area .cont li .num::before,
section.curriculum-area .cont li .num::after { content: ''; position: absolute; left: 0; width: 100%; height: 1px; background: radial-gradient( ellipse 2px 0.5px at center, #D5D7E2 0 100%, transparent 100% ) repeat-x; background-size: 8px 1px; background-position: center; }
section.curriculum-area .cont li .num::before { top: 0; }
section.curriculum-area .cont li .num::after { bottom: 0; }
section.curriculum-area .cont li .num em { margin-left: 6px; font-size: 18px; line-height: 26px; font-weight: 700; }
section.curriculum-area .cont li .message { margin-top: 16px; padding: 16px 20px; background-color: #FAF6FF; border-radius: 10px; }
section.curriculum-area .cont li .message strong { display: block; text-align: left; font-size: 13px; line-height: 20px; font-weight: 700; color: #9085f6; }
section.curriculum-area .cont li .message p { margin-top: 8px; font-size: 14px; line-height: 20px; color: #3e3b4f; }
section.curriculum-area .cont li .chips { display: flex; flex-wrap: wrap; gap: 8px 6px; margin-top: 20px; }
section.curriculum-area .cont li .chips span { padding: 4px 10px; font-size: 12px; line-height: 18px; font-weight: 500; color: #595764; border-radius: 13px; background-color: #f4f5f7; }
section.curriculum-area .cont ul + .caution { margin-top: 16px; }
section.curriculum-area .cont .caution { text-align: center; }
section.curriculum-area .cont .caution p { display: inline-block; position: relative; text-align: left; font-size: 13px; line-height: 20px; color: #595764; }  
section.curriculum-area .cont .caution p::before { content: ''; display: inline-block; margin-top: 9px; margin-right: 6px; width: 2px; height: 2px; vertical-align: top; background-color: #595764; border-radius: 2px; } 

section.brandband-area { background: url('/resources/images/brandband_bg.jpg') center/100% no-repeat; }
section.brandband-area .tit-area .tit { color: #fff; }
section.brandband-area .cont { margin-top: 40px; }
section.brandband-area .cont .paper { position: relative; padding: 22px 80px 26px 20px; background: linear-gradient(#fff, #fff) padding-box,linear-gradient(90deg, #F5C5FC 0%, #CFC5FC 100%) border-box; border: 2px solid transparent; border-radius: 16px; }
section.brandband-area .cont .paper::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: repeating-linear-gradient(180deg, transparent 0 33px, #EDF1F8 33px 34px), #fff; border-radius: 16px; pointer-events: none; }
section.brandband-area .cont .paper .txt,
section.brandband-area .cont .paper .txt-hand { position: relative; z-index: 1; }
section.brandband-area .cont .paper .txt { font-size: 14px; font-weight: 500; line-height: 34px; }
section.brandband-area .cont .paper .txt-hand { font-family: 'Nanum Pen'; margin-top: 34px; font-size: 26px; line-height: 34px; }
section.brandband-area .cont .paper .stamp { position: absolute; right: 12px; bottom: -36px; width: 108px; height: 108px; transform: rotate(-10deg); background: url('/resources/images/stamp_img02.png') center/100% no-repeat; border-radius: 50%; box-shadow: 4px 4px 12px rgba(0, 0, 0, .15); opacity: 0.9; backdrop-filter: blur(4px); }

section.faq-area .cont { margin-top: 40px; }
section.faq-area .cont .list > li { overflow: hidden; border: 2px solid #eee9ff; border-radius: 16px;  }
section.faq-area .cont .list > li + li { margin-top: 12px; }
section.faq-area .cont .list > li .fq { position: relative; padding: 16px 60px 16px 20px; width: 100%; text-align: left; font-size: 16px; line-height: 24px; font-weight: 500; color: #1a1a1e; }
section.faq-area .cont .list > li .fq.active { border-bottom: 0; border-radius: 16px 16px 0 0; }
section.faq-area .cont .list > li .fq::before,
section.faq-area .cont .list > li .fq::after { content: ''; position: absolute; top: 26px; right: 24px; width: 15px; height: 2px; background: #4F28BD; transition: transform 0.3s; }
section.faq-area .cont .list > li .fq::before { top: 26px; right: 24px; width: 15px; height: 2px; }
section.faq-area .cont .list > li .fq::after { transform: rotate(90deg); }
section.faq-area .cont .list > li .fq.active::before { transform: rotate(180deg); }
section.faq-area .cont .list > li .fq.active::after { transform: rotate(180deg); }
section.faq-area .cont .list > li .fa { height: 0; transition: all 0.3s .3s, height 0.3s; }
section.faq-area .cont .list > li .fa .fa-inner { padding: 16px 20px; font-size: 14px; line-height: 20px; color: #3e3b4f; border-top: 1px solid #eee9ff; background-color: #fcfaff; }

section.price-area { background: linear-gradient(180deg, #DBE9FF 0%, #DFFAF2 100%); }
section.price-area .cont { margin-top: 40px; }
section.price-area .cont .price-box { position: relative; padding: 30px 20px; text-align: center; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(180deg, #7D6EFF 0%, #1AD3ED 100%) border-box; border: 2px solid transparent; border-radius: 16px; }
section.price-area .cont .price-box::before,
section.price-area .cont .price-box::after { content: ''; position: absolute; top: -12px; width: 20px; height: 42px; background: url('data:image/svg+xml, <svg width="20" height="42" viewBox="0 0 20 42" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="32" r="10" fill="%23DAEDF0"/><rect x="6" y="34" width="34" height="8" rx="4" transform="rotate(-90 6 34)" fill="%239085F6"/></svg>') center no-repeat; }
section.price-area .cont .price-box::before { left: 14px; }
section.price-area .cont .price-box::after { right: 14px; }
section.price-area .cont .price-box > strong { display: block; font-size: 24px; line-height: 32px; }
section.price-area .cont .price-box strong em { background: linear-gradient(transparent calc(100% - 12px), #F8E9FF calc(100% - 12px)); }
section.price-area .cont .price-box > p { margin-top: 12px; font-size: 16px; line-height: 24px; font-weight: 700; }

section.final-area { background: url('/resources/images/final_bg.jpg') center/100% no-repeat; }
section.final-area .tit-area .tit { font-size: 36px; line-height: 44px; color: #fff; }
section.final-area .tit-area .tit strong { color: #00E2FF; }

#sticky { position: fixed; bottom: 0; left: 0; width: 100%; height: 68px; transform: translateY(120%); transition: .3s; z-index: 50; }
#sticky.show { transform: translateY(0) }

#sticky .txt { display: none; }
#sticky .btn-sticky { width: 100%; height: 100%; font-size: 22px; font-weight: 800; line-height: 68px; color: #fff; background: linear-gradient(90deg, #7C6EFF 36%, #18D5ED 100%); }
#sticky .btn-sticky::after { content: ''; display: inline-block; margin-top: 24px; margin-left: 5px; width: 20px; height: 20px; vertical-align: top; background: url('data:image/svg+xml, <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0ZM7.08594 5L12.0859 10L7.08594 15L8.5 16.4141L14.9141 10L8.5 3.58594L7.08594 5Z" fill="white"/></svg>') center/20px no-repeat; }

#aside { position: fixed; right: 20px; bottom: 30px; z-index: 30; transition: bottom 0.3s; }
#aside .inner { display: flex; flex-direction: column; gap: 16px; }
#aside button { position: relative; width: 52px; height: 52px; border-radius: 50%; box-shadow: 2px 4px 10px rgba(0, 0, 0, .15); }
#aside .btn-kakao { background-color: #FEE500; }
#aside .btn-kakao::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 26px; height: 22px; background: url('data:image/svg+xml, <svg width="25" height="21" viewBox="0 0 25 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.3529 0C5.53037 0 0 4.04434 0 9.0361C0 12.2841 2.34183 15.1307 5.85925 16.7234C5.60034 17.6147 4.92392 19.9562 4.78863 20.4569C4.62069 21.0785 5.03354 21.0698 5.30645 20.9037C5.5187 20.772 8.69091 18.7757 10.0601 17.9147C10.8042 18.0161 11.5692 18.07 12.3529 18.07C19.1755 18.07 24.7059 14.0257 24.7059 9.0361C24.7059 4.0465 19.1755 0 12.3529 0Z" fill="black"/></svg>') center/26px auto no-repeat; }
#aside .btn-kakao em { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); padding: 0 10px; width: max-content; height: 28px; background-color: #1a1a1e; border-radius: 8px; font-size: 13px; line-height: 28px; font-weight: 700; color: #fff; }
#aside .btn-top { display: flex; align-items: center; justify-content: center; background-color: #4f28bd; }
#aside .btn-top::before { content: ''; width: 28px; height: 28px; background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M14 5.25L14 24.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.25 12.25L14 3.5L22.75 12.25" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center no-repeat; }
body:has(#sticky.show) #aside { bottom: 98px; }
/* #footer { padding-bottom: 98px; } */

.popup { position: fixed; inset: 0; z-index: 9999; visibility: hidden; pointer-events: none; }
.popup-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .3s ease; }
.popup-inner { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-height: 85vh; background: #fff; border-radius: 20px 20px 0 0; overflow: auto; opacity: 0; transform: translateY(100%); transition: transform .35s ease, opacity .35s ease; overflow: hidden; }
.popup-header h2.tit { padding: 20px; font-size: 16px; line-height: 24px; font-weight: 700; }
.popup-body { padding: 0 20px 40px; overflow: auto; }
.popup.is-open { visibility: visible; pointer-events: auto; }
.popup.is-open .popup-dim { opacity: 1; }
.popup.is-open .popup-inner { opacity: 1; transform: translateY(0); }
.popup.is-close { visibility: hidden; pointer-events: none; transition: visibility 0s .35s; }
.popup.is-close .popup-dim { opacity: 0; }
.popup.is-close .popup-inner { opacity: 0; transform: translateY(100%); }
.popup .popup-close { position: absolute; top: 8px; right: 8px; width: 48px; height: 48px; }
.popup .popup-close::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; background: url('data:image/svg+xml, <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 2.5L17.5 17.5" stroke="%231A1A1E" stroke-width="1.66667" stroke-linecap="square"/><path d="M17.5 2.5L2.5 17.5" stroke="%231A1A1E" stroke-width="1.66667" stroke-linecap="square"/></svg>') center no-repeat; }

.popupfreetrial .cont > strong { display: block; font-size: 20px; line-height: 28px; }
.popupfreetrial .cont > p { margin-top: 6px; font-size: 16px; line-height: 24px; font-weight: 500; color: #595764; }
.popupfreetrial .list ul { margin-top: 20px; }
.popupfreetrial .list ul li + li { margin-top: 10px; }
.popupfreetrial .list ul li .btn-grade { display: block; position: relative; padding: 16px 60px 16px 20px; width: 100%; text-align: left; border: 1px solid #E4E5EC; border-radius: 10px; color: #1a1a1e; }
.popupfreetrial .list ul li .btn-grade::after { content: ''; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 20px; height: 20px; background: url('data:image/svg+xml, <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.875 16.875L13.125 10L6.875 3.125" stroke="%23595764" stroke-width="1.5" stroke-linecap="square"/></svg>') center no-repeat; }
.popupfreetrial .list ul li .btn-grade > strong { display: block; font-size: 16px; line-height: 24px; font-weight: 700; }
.popupfreetrial .list ul li .btn-grade > p { margin-top: 4px; font-size: 14px; line-height: 20px; color: #595764; }
.popupfreetrial .list ul li .btn-grade:hover { background-color: #fcfaff; border-color: #4f28bd; }
.popupfreetrial p.caution { margin-top: 20px; text-align: center; font-size: 16px; line-height: 24px; font-weight: 700; color: #9085F6; }

/* body lock */
body.popup-lock{ position: fixed; overflow: hidden; width: 100%; }

@media (prefers-reduced-motion: reduce){
	*,*::before,*::after{animation-duration:.01s !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition:none !important}
}

@media (max-width: 359px) {
	/* #header .logo { width: 30px; }
	#header .logo a { background-size: auto 30px; } */
	section.hero-area .btn-area { display: flex; flex-wrap: wrap; }
	section.hero-area .btn-area .btn { width: 100%; }
	section.trust-area .cont li .check-list dl dt { width: 100%; }
	section.trust-area .cont li .check-list dl dd:nth-of-type(1),
	section.trust-area .cont li .check-list dl dd { margin-top: 6px; }
}

@media (min-width: 721px) {
	#header { height: 80px; }
	/* #header .logo { width: 210px; height: 40px; } */
	#header .logo { width: 148px; height: 40px; }
	#header .util { display: flex; align-items: center; }
	#header .util .btn-learning,
	#header .util .btn-join { display: inline-flex; padding: 8px 16px; font-size: 18px; line-height: 26px; }
	#header .util .btn-trial { margin-left: 16px; padding: 0 24px; height: 48px; font-size: 16px; line-height: 48px; border-radius: 8px; }

	section.hero-area .btn-area .btn { padding: 0 28px; height: 60px; }
	section.hero-area .btn-area .btn-learning,
	section.hero-area .btn-area .btn-trial { font-size: 18px; line-height: 60px; }
	section.hero-area .btn-area .btn-trial::after { margin-left: 10px; margin-top: 22px; }
	section.persona-area .cont ul { display: flex; flex-wrap: wrap; gap: 16px; }
	section.persona-area .cont ul li { width: calc(50% - 8px); }
	section.persona-area .cont ul li + li { margin-top: 0; }
	section.demo-area .cont { margin-top: 60px; }
	section.demo-area .demos { gap: 30px; }
	section.demo-area .demo { grid-template-columns: 220px 1fr; border-radius: 0; background-color: transparent; }
	section.demo-area .demo .dlabel { gap: 12px; padding: 22px 18px; font-size: 18px; border-radius: 16px 0 0 0; }
	section.demo-area .demo .dlabel .step { font-size: 14px; line-height: 30px; border-radius: 100px; }
	section.demo-area .demo .dlabel strong { font-size: 20px; line-height: 28px; }
	section.demo-area .demo .dwrap { border-left: 0; border-top: 2px solid #CFC5FC; border-top-right-radius: 16px; overflow: hidden; background-color: #fff; }
	section.demo-area .demo .dcap { padding: 15px 27px; font-size: 14px; line-height: 20px; background-color: #fff; }
	section.demo-area .demo .chip { font-size: 14px; }
	section.demo-area > .inner > .btn-area { margin: 40px auto 0; width: 400px; }

	section.brandband-area .cont .paper { margin: 0 auto; max-width: 520px; }

	section.price-area .cont .price-box { margin: 0 auto; max-width: 720px; }
}

@media (min-width: 900px) {
	section.curriculum-area .cont { margin-top: 60px; }
	section.curriculum-area .cont > ul { display: flex; gap: 20px; }
	section.curriculum-area .cont > ul > li { flex: 1; }
	section.curriculum-area .cont > ul > li:nth-child(2),
	section.curriculum-area .cont > ul > li:nth-child(3) { margin-top: 0; }
}

@media (min-width: 1024px) {
	.only-mo { display: none; }
	.only-pc { display: block; }
	#header .inner { padding: 0 40px; }
	section > .inner { padding: 100px 40px; }
	section .tit-area .tit { font-size: 48px; line-height: 56px; }
	section .tit-area .txt-bubble { font-size: 18px; line-height: 48px; padding: 0 24px; border-radius: 100px; }
	section .tit-area .txt-bubble::after { bottom: -14px; border-top-width: 14px; border-left-width: 14px; }
	section .tit-area .txt-bubble + .tit { margin-top: 34px; }
	section.hero-area { background-image: url('/resources/images/top_bg_pc.jpg'); }
	section.hero-area .tit-area .tit { font-size: 56px; line-height: 76px; }
	section.hero-area .tit-area p { margin-top: 20px; font-size: 28px; line-height: 36px; }
	section.hero-area .inner { display: flex; align-items: center; justify-content: space-between; padding-top: 160px; padding-bottom: 202px; }
	section.hero-area .inner .cont + .cont { padding-left: 40px; }
	section.hero-area .btn-area .btn-learning { width: 157px; }
	section.hero-area .inner .cont .paper { margin-top: 0; width: 400px; }
	section.hero-area .inner .cont .paper .p-q { font-size: 22px; line-height: 52px; }
	section.hero-area .inner .cont .paper .p-ans { font-size: 30px; line-height: 52px; }
	section.hero-area .inner .cont .paper .m::after { top: -0.6em; font-size: 24px; line-height: 32px; }
	section.hero-area .inner .cont .paper .stamp { width: 120px; height: 120px; }

	section.persona-area { border-radius: 60px 60px 0 0; }
	section.persona-area::before { top: -60px; width: 120px; height: 120px; background-image: url('data:image/svg+xml, <svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="120" height="120" rx="60" fill="url(%23paint0_linear_171_95)"/><path d="M64.5 66.0909C64.5 68.8021 62.4853 71 60 71C57.5147 71 55.5 68.8021 55.5 66.0909L55.5 39.9091C55.5 37.1979 57.5147 35 60 35C62.4853 35 64.5 37.1979 64.5 39.9091L64.5 66.0909Z" fill="%23CFC5FC"/><circle cx="60" cy="80.5" r="4.5" fill="%23CFC5FC"/><defs><linearGradient id="paint0_linear_171_95" x1="60" y1="0" x2="60" y2="120" gradientUnits="userSpaceOnUse"><stop stop-color="%23FBF9FF"/><stop offset="0.5" stop-color="%23FBF9FF"/><stop offset="1" stop-color="%23F9F6FF"/></linearGradient></defs></svg>'); }
	section.persona-area .cont { margin-top: 60px; }
	section.persona-area .cont ul { gap: 20px; }
	section.persona-area .cont ul li { width: calc(50% - 10px); padding: 30px 20px; border-radius: 20px; }
	section.persona-area .cont ul li p { font-size: 24px; line-height: 32px; }
	section.persona-area .txt-quote { font-size: 20px; line-height: 28px; margin-top: 16px; }
	section.persona-area .txt-quote::before,
	section.persona-area .txt-quote::after { width: 12px; height: 10px; background-size: 12px 10px; }
	section.persona-area .txt-quote::before { margin-right: 8px; background-image: url('data:image/svg+xml, <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.25714 3.72263C3.07714 4.2062 3.23143 4.51642 3.73714 4.63504C4.12286 4.7354 4.50857 4.97263 4.88571 5.36496C5.26286 5.7573 5.45143 6.35037 5.45143 7.15329C5.45143 7.49088 5.39143 7.82847 5.28 8.15693C5.16857 8.4854 4.99714 8.7865 4.76571 9.0511C4.53429 9.31569 4.26 9.53467 3.92571 9.70803C3.59143 9.88139 3.21429 9.9635 2.77714 9.9635C1.98 9.9635 1.31143 9.63504 0.788571 8.9781C0.265714 8.32117 0 7.49088 0 6.49635C0 4.9635 0.445714 3.64964 1.33714 2.55474C2.22857 1.45985 3.36857 0.611314 4.76571 0L5.55429 1.53285C5.03143 1.79745 4.55143 2.12591 4.13143 2.5C3.71143 2.87409 3.42 3.28467 3.25714 3.72263ZM9.70286 3.75912C9.52286 4.2427 9.67714 4.55292 10.1829 4.67153C10.5686 4.7719 10.9543 5.00912 11.3314 5.40146C11.7086 5.7938 11.8971 6.38686 11.8971 7.18978C11.8971 7.52737 11.8371 7.86496 11.7257 8.19343C11.6143 8.5219 11.4429 8.82299 11.2114 9.08759C10.98 9.35219 10.7057 9.57117 10.3714 9.74453C10.0371 9.91788 9.66 10 9.22286 10C8.42571 10 7.75714 9.67153 7.23429 9.0146C6.71143 8.35766 6.44571 7.52737 6.44571 6.53285C6.44571 5 6.89143 3.68613 7.78286 2.59124C8.67429 1.49635 9.81429 0.64781 11.2114 0.0364963L12 1.56934C11.4771 1.83394 10.9971 2.16241 10.5771 2.5365C10.1571 2.91058 9.86571 3.32117 9.70286 3.75912Z" fill="url(%23paint0_linear_171_138)"/><defs><linearGradient id="paint0_linear_171_138" x1="6" y1="0" x2="6" y2="10" gradientUnits="userSpaceOnUse"><stop stop-color="%23C0B9FF"/><stop offset="1" stop-color="%239085F6"/></linearGradient></defs></svg>'); }
	section.persona-area .txt-quote::after { margin-left: 8px; background-image: url('data:image/svg+xml, <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.74286 6.27737C8.92286 5.7938 8.76857 5.48358 8.26286 5.36496C7.87714 5.2646 7.49143 5.02737 7.11429 4.63504C6.73714 4.2427 6.54857 3.64964 6.54857 2.84672C6.54857 2.50912 6.60857 2.17153 6.72 1.84307C6.83143 1.5146 7.00286 1.2135 7.23429 0.948906C7.46571 0.684308 7.74 0.465329 8.07429 0.291971C8.40857 0.118614 8.78572 0.0364968 9.22286 0.0364969C10.02 0.0364969 10.6886 0.364964 11.2114 1.0219C11.7343 1.67883 12 2.50913 12 3.50365C12 5.0365 11.5543 6.35037 10.6629 7.44526C9.77143 8.54015 8.63143 9.38869 7.23429 10L6.44571 8.46715C6.96857 8.20255 7.44857 7.87409 7.86857 7.5C8.28857 7.12591 8.58 6.71533 8.74286 6.27737ZM2.29714 6.24088C2.47714 5.7573 2.32286 5.44708 1.81714 5.32847C1.43143 5.2281 1.04571 4.99088 0.668571 4.59854C0.291428 4.2062 0.102856 3.61314 0.102856 2.81022C0.102856 2.47263 0.162857 2.13504 0.274285 1.80657C0.385713 1.4781 0.557143 1.17701 0.788571 0.912409C1.02 0.64781 1.29429 0.428832 1.62857 0.255474C1.96286 0.0821172 2.34 1.0917e-07 2.77714 1.47386e-07C3.57429 2.17075e-07 4.24286 0.328468 4.76571 0.985401C5.28857 1.64234 5.55429 2.47263 5.55429 3.46715C5.55429 5 5.10857 6.31387 4.21714 7.40876C3.32571 8.50365 2.18571 9.35219 0.78857 9.9635L-8.16478e-07 8.43066C0.522857 8.16606 1.00286 7.83759 1.42286 7.4635C1.84286 7.08942 2.13429 6.67883 2.29714 6.24088Z" fill="url(%23paint0_linear_171_141)"/><defs><linearGradient id="paint0_linear_171_141" x1="6" y1="10" x2="6" y2="4.29138e-07" gradientUnits="userSpaceOnUse"><stop stop-color="%239085F6"/><stop offset="1" stop-color="%23C0B9FF"/></linearGradient></defs></svg>'); }

	section.cause-area .cont { margin-top: 60px; }
	section.cause-area .cont .box-wrap { flex-direction: row; }
	section.cause-area .cont .box-wrap .box { border-radius: 20px 20px 0; }
	section.cause-area .cont .box-wrap .box .tit { padding: 20px; }
	section.cause-area .cont .box-wrap .box .tit strong { font-size: 20px; line-height: 28px; }
	section.cause-area .cont .box-wrap .box .txt { padding: 30px 20px; border-radius: 0 0 20px 20px; }
	section.cause-area .cont .box-wrap .box .txt p { font-size: 24px; line-height: 32px; }
	section.cause-area .cont .box-wrap .box .txt small { margin-top: 12px; font-size: 18px; line-height: 24px; }
	section.cause-area .cont .box-wrap .vs { margin: 0 -26px; width: 76px; height: 76px; font-size: 28px; line-height: 68px; border-width: 4px; }
	section.cause-area .cont .txt1 { margin-top: 48px; font-size: 24px; line-height: 32px; }
	section.cause-area .cont .txt2 { margin-top: 32px; font-size: 28px; line-height: 36px; }
	section.cause-area .cont .txt2::before { margin: 32px auto; width: 6px; height: 46px; background-image: url('data:image/svg+xml, <svg width="6" height="46" viewBox="0 0 6 46" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="3" cy="3" r="3" fill="%239085F6"/><circle cx="3" cy="23" r="3" fill="%239085F6"/><circle cx="3" cy="43" r="3" fill="%239085F6"/></svg>'); }
	section.cause-area .cont .txt3 { margin-top: 16px; font-size: 36px; line-height: 44px; }
	section.cause-area .cont .txt3 span { background: linear-gradient(transparent calc(100% - 16px), #F8E9FF calc(100% - 16px)); }

	section.shift-area { background: url('/r	esources/images/shift_bg_pc.jpg') center/100% 100% no-repeat; }
	section.shift-area .cont .txt { margin-top: 24px; font-size: 28px; line-height: 36px; }
	section.shift-area .cont .box { margin-top: 60px; padding: 40px 30px 30px; border-radius: 20px; }
	section.shift-area .cont .box strong { font-size: 24px; line-height: 32px; }
	section.shift-area .cont .box strong::before,
	section.shift-area .cont .box strong::after { width: 28px; height: 32px; background-size: 28px; }
	section.shift-area .cont .box strong::before { margin-right: 12px; }
	section.shift-area .cont .box strong::after { margin-left: 12px; }
	section.shift-area .cont .box ul { margin-top: 40px; }
	section.shift-area .cont .box ul li { padding: 24px 0; font-size: 20px; line-height: 28px; border-radius: 12px; }
	section.shift-area .cont .box ul li:nth-child(2) { margin-top: 12px; }
	section.shift-area .cont .box ul li em { margin-right: 10px; width: 24px; height: 24px; font-size: 14px; line-height: 24px; }

	section.usp-area { scroll-margin-top: 80px; }
	section.usp-area .cont { margin-top: 60px; }
	section.usp-area .cont ol { display: flex; gap: 20px; }
	section.usp-area .cont ol li { flex: 1; padding: 40px 30px; border-radius: 20px; }
	section.usp-area .cont ol li + li { margin-top: 0; }
	section.usp-area .cont ol li > em { width: 48px; height: 48px; font-size: 20px; line-height: 48px; }
	section.usp-area .cont ol li > strong { margin-top: 20px; font-size: 24px; line-height: 32px; }
	section.usp-area .cont ol li > p { margin-top: 10px; font-size: 18px; line-height: 26px; }
	section.usp-area .cont ol li > small { font-size: 16px; line-height: 24px; letter-spacing: -0.3px; }

	section.trust-area .cont { margin-top: 60px; }
	section.trust-area .cont > ul { display: flex; flex-wrap: wrap; gap: 20px; }
	section.trust-area .cont > ul > li { padding: 40px 60px; border-radius: 20px; }
	section.trust-area .cont > ul > li:first-child { width: 100%; }
	section.trust-area .cont > ul > li:nth-child(2),
	section.trust-area .cont > ul > li:nth-child(3) { margin-top: 0; width: calc(50% - 10px); }
	section.trust-area .cont > ul > li:first-child::before,
	section.trust-area .cont > ul > li:first-child > strong,
	section.trust-area .cont > ul > li:first-child > p { width: 100%; padding-right: calc(100% - 340px); }
	section.trust-area .cont > ul > li:first-child::before { height: 68px; background-size: 68px; background-position: 136px 0; }
	section.trust-area .cont > ul > li::before { width: 68px; height: 68px; }
	section.trust-area .cont > ul > li > strong { margin-top: 24px; font-size: 24px; line-height: 32px; }
	section.trust-area .cont > ul > li > p { margin-top: 8px; font-size: 20px; line-height: 28px; }
	section.trust-area .cont > ul > li:nth-child(2) > strong .icon { margin-left: 8px; width: 16px; height: 22px; background-size: 16px 22px; }
	section.trust-area .cont > ul > li:first-child .check-list { position: absolute; right: 0; top: 0; margin-top: 0; padding: 40px 60px; width: calc(100% - 400px); height: 100%; }
	section.trust-area .cont > ul > li:first-child .check-list::before { top: 40px; left: 12px; transform: rotate(90deg); transform-origin: 0 0; width: 160px; background-size: 16px 1px; }
	section.trust-area .cont > ul > li:first-child .check-list dl { padding: 0; height: 100%; justify-content: space-between; align-items: center; }
	section.trust-area .cont > ul > li:first-child .check-list dl dt,
	section.trust-area .cont > ul > li:first-child .check-list dl dd { margin-top: 0; }
	section.trust-area .cont > ul > li:first-child .check-list dl dt { min-width: 50%; width: auto; font-size: 20px; line-height: 28px; }
	section.trust-area .cont > ul > li:first-child .check-list dl dt::before { margin-right: 8px; width: 24px; height: 28px; background-size: 24px;}
	section.trust-area .cont > ul > li:first-child .check-list dl dd { padding-right: 60px; min-width: 170px; font-size: 18px; line-height: 26px; }
	section.trust-area .cont .memo-wrap:nth-child(1 of .memo-wrap) { padding-left: 60px; }
	section.trust-area .cont .memo-wrap:nth-child(2 of .memo-wrap) { padding-right: 60px; }
	section.trust-area .cont .memo-wrap:nth-child(1 of .memo-wrap) .memo { margin-top: 68px; }
	section.trust-area .cont .memo-wrap:nth-child(2 of .memo-wrap) .memo { margin-top: 60px; }
	section.trust-area .cont .memo { padding-top: 40px; padding-bottom: 40px; background-size: calc(100% - 40px); }
	section.trust-area .cont .memo::before { width: 148px; height: 34px; background-size: 100%; }
	section.trust-area .cont .memo p { font-size: 20px; line-height: 32px; }
	section.trust-area .cont .memo p::before,
	section.trust-area .cont .memo p::after { width: 15px; height: 12px; background-size: 100%; }
	section.trust-area .cont .memo p::after { margin-top: 4px; }
	section.trust-area .cont .memo p strong em.primary { background: linear-gradient(transparent calc(100% - 16px), #F8E9FF calc(100% - 16px)); }
	section.trust-area .cont .certification { padding-top: 126px; }
	section.trust-area .cont .certification::before { top: 46px; width: 6px; height: 46px; background-image: url('data:image/svg+xml, <svg width="6" height="46" viewBox="0 0 6 46" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="3" cy="3" r="3" fill="%239085F6"/><circle cx="3" cy="23" r="3" fill="%239085F6"/><circle cx="3" cy="43" r="3" fill="%239085F6"/></svg>'); }
	section.trust-area .cont .certification .certification-wrap { display: flex; align-items: center; position: relative; padding: 40px 52px; }
	section.trust-area .cont .certification .certification-wrap > strong { margin-top: 0; margin-right: 40px; width: 340px; font-size: 24px; line-height: 32px; }
	section.trust-area .cont .certification .certification-wrap > strong::before { margin-bottom: 24px; width: 68px; height: 68px; background-size: 100%; }
	section.trust-area .cont .certification .certification-wrap > ul { margin-top: 0; width: calc(100% - 380px); }
	section.trust-area .cont .certification .certification-wrap > ul > li { padding-left: 44px; font-size: 20px; line-height: 24px; }
	section.trust-area .cont .certification .certification-wrap > ul > li + li { margin-top: 24px; padding-top: 24px; }
	section.trust-area .cont .certification .certification-wrap > ul > li::before { top: 24px; left: 12px; width: 24px; height: 24px; background-size: 100%; }
	section.trust-area .cont .certification .certification-wrap > ul > li:first-child::before { top: 0; }

	section.demo-area .demo .dlabel { min-height: 208px; }

	section.model-area .cont { margin-top: 60px; padding: 60px 40px; }
	section.model-area .cont > ul { display: flex; }
	section.model-area .cont > ul > li { flex: 1; }
	section.model-area .cont > ul > li + li { margin-top: 0; padding-top: 0; }
	section.model-area .cont > ul > li + li::before { top: 0; left: 0; transform: rotate(90deg); transform-origin: 0 0; width: 280px; }
	section.model-area .cont > ul > li em { padding: 0 24px; font-size: 18px; line-height: 48px; border-radius: 100px; }
	section.model-area .cont > ul > li p { margin-top: 32px; font-size: 20px; line-height: 28px; }
	section.model-area .cont > ul > li strong { margin-top: 16px; font-size: 24px; line-height: 32px; }
	section.model-area .cont > ul > li .word { margin-top: 32px; }
	section.model-area .cont > ul > li .word span { font-size: 14px; }

	section.curriculum-area .tit-area .sub-tit { margin-top: 28px; font-size: 28px; line-height: 36px; }
	section.curriculum-area .cont { margin-top: 92px; }
	section.curriculum-area .cont .badge { font-size: 14px; }
	section.curriculum-area .cont li { padding: 40px 24px; }
	section.curriculum-area .cont li.popular .txt-popular { top: -24px; padding: 11px 24px; font-size: 18px; line-height: 26px; border-radius: 100px; }
	section.curriculum-area .cont li > strong { margin-top: 16px; font-size: 24px; line-height: 32px; }
	section.curriculum-area .cont li > p { margin-top: 8px; font-size: 18px; line-height: 26px; }
	section.curriculum-area .cont li .num { margin-top: 28px; font-size: 16px; line-height: 28px; }
	section.curriculum-area .cont li .num em { margin-left: 8px; vertical-align: top; font-size: 20px; line-height: 28px; }
	section.curriculum-area .cont li .message { margin-top: 20px; border-radius: 12px; }
	section.curriculum-area .cont li .message strong { font-size: 15px; line-height: 24px; }
	section.curriculum-area .cont li .message p { margin-top: 8px; font-size: 16px; line-height: 24px; }
	section.curriculum-area .cont li .chips { margin-top: 24px; }
	section.curriculum-area .cont li .chips span { padding: 4px 12px; font-size: 13px; line-height: 20px; }
	section.curriculum-area .cont ul + .caution { margin-top: 28px; }
	section.curriculum-area .cont .caution p { font-size: 16px; line-height: 24px; }
	section.curriculum-area .cont .caution p::before { margin-top: 10px; width: 4px; height: 4px; }

	section.brandband-area { background: url('/resources/images/brandband_bg_pc.jpg') center/ 100% 100% no-repeat; }
	section.brandband-area .cont { margin-top: 60px; }
	section.brandband-area .cont .paper .txt { font-size: 18px; }
	section.brandband-area .cont .paper .txt-hand { font-size: 34px; line-height: 48px; }
	section.brandband-area .cont .paper .stamp { right: -50px; width: 120px; height: 120px; }

	section.faq-area .cont { margin-top: 60px; }
	section.faq-area .cont .list > li .fq { padding: 24px 72px 24px 28px; font-size: 20px; line-height: 28px; }
	section.faq-area .cont .list > li .fq::before,
	section.faq-area .cont .list > li .fq::after { top: 38px; }
	section.faq-area .cont .list > li .fa .fa-inner { padding: 24px 28px; font-size: 18px; line-height: 26px; }

	section.price-area .cont { margin-top: 60px; }
	section.price-area .cont .price-box { padding: 40px 30px; }
	section.price-area .cont .price-box::before,
	section.price-area .cont .price-box::after { width: 28px; height: 56px; background-size: 100% 100%; }
	section.price-area .cont .price-box::before { left: 16px; }
	section.price-area .cont .price-box::after { right: 16px; }
	section.price-area .cont .price-box > strong { font-size: 32px; line-height: 40px; }
	section.price-area .cont .price-box > strong em { background: linear-gradient(transparent calc(100% - 16px), #F8E9FF calc(100% - 16px)); }
	section.price-area .cont .price-box > p { margin-top: 20px; font-size: 28px; line-height: 36px; }

	section.final-area { background: url('/resources/images/final_bg_pc.jpg') center/100% 100% no-repeat; }
	section.final-area .tit-area .tit { font-size: 52px; line-height: 72px; }

	#sticky { background-color: #4f28bd; height: 80px; }
	#sticky .inner { display: flex; align-items: center; justify-content: center; margin: 0 auto; padding: 0 40px; max-width: 1020px; height: 100%; width: 100%; }
	#sticky .txt { display: block; margin-right: 20px; font-size: 24px; line-height: 32px; font-weight: 700; color: #fff; }
	#sticky .btn-sticky { width: 200px; height: 52px; font-size: 16px; line-height: 52px; border-radius: 10px; }
	#sticky .btn-sticky::after { margin-top: 18px; margin-left: 8px; width: 16px; height: 16px; background-size: 100% 100%; }

	#aside { right: 40px; bottom: 40px; }
	body:has(#sticky.show) #aside { bottom: 120px; }
	#aside .btn-kakao { width: 68px; height: 68px; }
	#aside .btn-kakao::before { width: 33px; height: 28px; background-size: 100% 100%; }
	#aside .btn-kakao em { top: -28px; padding: 0 12px; height: 32px; font-size: 16px; line-height: 32px; border-radius: 8px; }
	#aside .btn-top { width: 68px; height: 68px; }
	#aside .btn-top::before { width: 68px; height: 68px; background-image: url('data:image/svg+xml, <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6.75L18 31.5" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M6.75 15.75L18 4.5L29.25 15.75" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }

	.popup .popup-close { top: 22px; right: 20px; }
	.popup .popup-close::before { width: 24px; height: 24px; background-size: 100%; }
	.popup-header h2.tit { padding: 32px; font-size: 20px; line-height: 28px; }
	.popup-body { padding: 0 32px 32px; }
	.popup-inner { left: 50%; right: auto; top: 50%; bottom: auto; width: min(520px, calc(100% - 40px)); max-height: calc(100vh - 144px); border-radius: 20px; transform: translate(-50%, -50%) scale(.95); transition: transform .35s ease, opacity .35s ease; }
	.popup.is-open .popup-inner { opacity: 1; transform: translate(-50%, -50%) scale(1); }
	.popup.is-close .popup-inner { opacity: 0; transform: translate(-50%, -50%) scale(.95); }
	.popupfreetrial .cont > strong { font-size: 24px; line-height: 32px; }
	.popupfreetrial .cont > p { margin-top: 10px; font-size: 20px; line-height: 28px; }
	.popupfreetrial .list > ul { margin-top: 24px; }
	.popupfreetrial .list > ul > li + li { margin-top: 12px; }
	.popupfreetrial .list > ul > li .btn-grade { padding: 20px 68px 20px 24px; }
	.popupfreetrial .list > ul > li .btn-grade::after { width: 24px; height: 24px; background-size: 100%; }
	.popupfreetrial .list > ul > li .btn-grade > strong { font-size: 20px; line-height: 28px; }
	.popupfreetrial .list > ul > li .btn-grade > p { margin-top: 6px; font-size: 16px; line-height: 24px; }
	.popupfreetrial .cont .caution { margin-top: 32px; font-size: 20px; line-height: 28px; }
}

/* keyframes */
@keyframes blink { 50% { opacity: 0 } }
@keyframes bob {
	0%,
	100% {
		transform: translateY(0)
	}
	50% {
		transform:translateY(-4px)
	}
}
@keyframes chipblink{ 
	0%, 
	100% { 
		border-color: #FF0000;
		color: #FF0000;
		background: #FFE6E3;
		box-shadow: 0 0 0 3px rgba(210,72,58,.22)
	}
	50% {
		border-color: #EBAAA2;
		color: #C96054;
		background: #fff;
		box-shadow: 0 0 0 0 rgba(210,72,58,0)
	}
}
@keyframes fadein {
	from {
		opacity: 0;
		transform: translateY(6px)
	}
	to {
		opacity: 1;
		transform: none;
	}
}