@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; } */
#footer { position: relative; padding: 40px 20px 108px; padding-bottom: calc(env(safe-area-inset-bottom) + 108px); padding-bottom: calc(constant(safe-area-inset-bottom) + 108px); background: #fff; border-top: 1px solid #e4e5ec }
#footer .logo { display: inline-block; width: 148px; height: 40px; background: url('/resources/images/logo_img02.png') 0 0 / auto 100% no-repeat; background-size: 100% 100% }
#footer .util { margin-top: 16px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 0 }
#footer .util .btn { padding: 0 16px; width: auto; color: #292733; font-size: 16px; font-weight: 500; line-height: 24px; position: relative }
#footer .util .btn::before { position: absolute; top: 0; left: 0; content: ""; width: 1px; height: 14px; background-color: #e4e5ec; vertical-align: top }
#footer .util .btn::before { top: 5px }
#footer .util .btn:first-of-type { padding-left: 0 }
#footer .util .btn:first-of-type::before { display: none }
#footer .info { position: relative; margin-top: 20px; padding-top: 20px; border-top: 1px solid #e4e5ec }
#footer .info strong { display: inline-block; font-size: 14px; font-weight: 700; line-height: 28px }
#footer .info .info_tit { display: flex; }
#footer .info .share { display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; gap: 24px }
#footer .info .share .icon.youtube { display: inline-block; width: 28px; height: 28px; vertical-align: top; overflow: hidden; background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="none"><path d="M27.2197 7.25698C26.8956 6.05641 25.9515 5.10712 24.7396 4.78604C22.5554 4.19972 13.8045 4.19972 13.8045 4.19972C13.8045 4.19972 5.48177 4.11384 3.29757 4.70017C2.09979 5.02125 1.14156 5.97054 0.81745 7.17111C0.225603 9.36285 0.225603 13.9138 0.225603 13.9138C0.225603 13.9138 0.225603 18.4788 0.81745 20.6566C1.14156 21.8572 2.08569 22.8064 3.29757 23.1275C5.48177 23.7138 13.8045 23.7997 13.8045 23.7997C13.8045 23.7997 22.5554 23.7997 24.7396 23.2134C25.9374 22.8923 26.8956 21.943 27.2197 20.7425C27.7975 18.5507 27.7975 13.9997 27.7975 13.9997C27.7975 13.9997 27.7975 9.44872 27.2197 7.25698ZM11.0144 18.2017V9.79772L18.2856 13.9997L11.0144 18.2017Z" fill="%23FE0134"/></svg>'); background-size: 100% 100% }
#footer .info .share .icon.blog { display: inline-block; width: 28px; height: 28px; vertical-align: top; overflow: hidden; background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="none"><path d="M4.94128 4.38867C5.5292 4.29115 22.4778 4.29115 23.0594 4.38867C24.2261 4.5712 25.1907 5.40569 25.536 6.51367C25.6599 6.92426 25.6669 7.11366 25.6669 12.4902C25.6669 15.9899 25.6402 18.141 25.5946 18.3232C25.4187 19.0987 24.7542 19.9588 24.0507 20.3369C23.3272 20.7214 23.1504 20.7412 19.6962 20.7412H16.5614L15.5057 23.2373C14.919 24.6058 14.3976 25.7724 14.3387 25.8311C14.1435 26.0265 13.9607 26.0397 13.7782 25.877C13.6671 25.7717 13.2827 24.9375 12.5594 23.2373L11.5038 20.7412H8.36316C6.54607 20.7412 5.07364 20.7149 4.87 20.6758C4.34852 20.578 3.64361 20.2062 3.2655 19.8281C2.88138 19.4438 2.51053 18.7725 2.40613 18.2773C2.35415 18.0428 2.33386 16.231 2.33386 12.5098C2.33386 7.84427 2.34684 7.02874 2.43152 6.69629C2.74435 5.49692 3.74192 4.5776 4.94128 4.38867ZM21.3524 11.3105C20.9938 10.9847 20.5109 10.8735 19.9569 10.9844C18.9142 11.1995 18.3671 11.9427 18.3671 13.1416C18.3671 14.1454 18.6407 14.6476 19.3837 15.0127C19.716 15.1754 19.8856 15.2207 20.1786 15.2207C20.6478 15.2143 21.0394 15.11 21.2675 14.9277L21.4491 14.7842L21.4042 15.0713C21.313 15.6382 21.0125 15.918 20.4911 15.918H20.1923V17.2344L20.8632 17.209C21.4498 17.1893 21.5674 17.1626 21.8866 16.9932C22.0821 16.8823 22.3358 16.6739 22.453 16.5176C22.8375 16.0094 22.8641 15.8202 22.8641 13.2979V11.0303H21.495V11.4404L21.3524 11.3105ZM15.7792 11.0303C14.8147 10.8415 13.7722 11.3104 13.3163 12.1445C13.1727 12.4182 13.1202 12.601 13.1005 12.9922C13.0746 13.4285 13.0945 13.5328 13.2509 13.8848C13.4398 14.3084 13.8695 14.7716 14.2606 14.9736C14.8276 15.2667 15.6098 15.2987 16.2616 15.0576C16.6592 14.9143 17.2009 14.4521 17.4159 14.0674C18.1262 12.8291 17.3172 11.3303 15.7792 11.0303ZM5.14929 12.1572L5.16882 15.0381L5.87292 15.0576C6.53775 15.0773 6.57019 15.071 6.57019 14.9404C6.57019 14.7776 6.5898 14.7781 6.88953 14.9736C7.34566 15.2798 8.01057 15.2862 8.62976 14.9932C9.00122 14.8237 9.3597 14.458 9.52917 14.0996C9.71167 13.689 9.71794 12.7184 9.54187 12.21C9.4116 11.8258 9.01463 11.3432 8.69519 11.1738C8.0306 10.8282 7.18318 10.8869 6.72058 11.3105L6.57019 11.4404V9.27051H5.1366L5.14929 12.1572ZM10.0897 9.78516C10.0897 10.4042 10.1031 10.5088 10.1942 10.5088C10.2529 10.5089 10.3965 10.6066 10.5204 10.7305L10.7421 10.9521V15.0713H12.1815L12.162 12.835L12.1425 10.6064L11.9276 10.1699C11.6278 9.56396 11.1521 9.23773 10.37 9.10742L10.0897 9.06152V9.78516ZM15.4276 12.2686C15.6687 12.2686 15.7466 12.3012 15.9618 12.5225C16.1767 12.7376 16.2157 12.8158 16.2157 13.0566C16.2157 13.7538 15.5061 14.1843 14.9325 13.833C14.8354 13.7749 14.7506 13.6973 14.6844 13.6055C14.6184 13.5137 14.5721 13.4092 14.5477 13.2988C14.5233 13.1884 14.5215 13.074 14.5428 12.9629C14.5642 12.8518 14.6082 12.7459 14.6718 12.6523C14.8606 12.3726 15.0627 12.2686 15.4276 12.2686ZM19.996 12.6787C20.3482 12.0989 21.1696 12.1515 21.4432 12.7705C21.6449 13.2335 21.4425 13.7089 20.954 13.8916C20.7129 13.9826 20.5954 13.976 20.3417 13.8652C19.9116 13.6827 19.7418 13.096 19.996 12.6787ZM7.06531 12.4316C7.78207 12.0927 8.46732 12.8029 8.10242 13.5068C7.91991 13.8652 7.30017 14.0219 6.97449 13.7939C6.49232 13.4615 6.54426 12.6794 7.06531 12.4316Z" fill="%2303C75A"/></svg>'); background-size: 100% 100% }
#footer .info ul { margin-top: 10px }
#footer .info ul li { color: #595764; font-size: 14px; font-weight: 400; line-height: 20px }
#footer .info .copyright { margin-top: 20px; color: #a2a5aa; font-size: 12px; font-weight: 400; line-height: 18px }

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; }

.popupagreedata .cont .agree-area { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px }
.popupagreedata .cont .agree-area h2 { color: #292733; font-size: 16px; font-weight: 700; line-height: 24px }
.popupagreedata .cont .agree-area h3 { color: #292733; font-size: 16px; font-weight: 700; line-height: 24px }
.popupagreedata .cont .agree-area div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 6px }
.popupagreedata .cont .agree-area p,
.popupagreedata .cont .agree-area li { color: #292733; font-size: 14px; font-weight: 400; line-height: 20px }


/* 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>'); }

	#footer { padding-bottom: 120px }
	#footer .logo { width: 178px; height: 48px; background-size: auto 100%; }
	#footer .inner { padding: 0 40px; margin-left: auto; margin-right: auto; max-width: 1020px; }
	#footer .btns.util .btn.txt { font-size: 16px; line-height: 24px; }
	#footer .info { padding-top: 0; border-top: 0; }
	#footer .info strong { font-size: 20px; line-height: 30px; }
	#footer .info > ul { display: flex; flex-wrap: wrap; gap: 8px 16px; }
	#footer .info > ul > li { flex-shrink: 0; position: relative; font-size: 15px; line-height: 23px; }
	#footer .info .copyright { font-size: 14px; line-height: 22px; }

	.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;
	}
}