body { font-family: 'Pretendard', sans-serif;}

header { z-index: 2; position: absolute; top: 30px; left: 50px; display: flex; justify-content: space-between; width: calc(100% - 100px); align-items: center; }
header h1 img { width: 140px;}
header a { display: block; padding: 3px; border: 1px solid rgba(78, 87, 164, 0.3); border-radius: 30px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.05); font-size: clamp(16px, 1vw, 16px); text-decoration: none; color: #fff;}
header a div { display: block; padding: 15px 40px; background: linear-gradient(to top, rgba(78, 87, 164, 0), rgba(78, 87, 164, 0.3)); border-radius: 30px;}
header a:hover { border: 1px solid rgba(28, 204, 163, 0.3);}
header a:hover div { background: linear-gradient(to top, rgba(28, 204, 163, 0), rgba(28, 204, 163, 0.3));}

footer { background: #222;}
footer > div { padding: 80px; margin: 0 auto;}
footer h2 img { width: 100px; height: auto; vertical-align: middle;}
footer h2 span { padding-left: 20px; font-size: clamp(17px, 1vw, 17px); font-weight: 800; color: #e8e8e8;}
footer > div > div { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-top: 40px;}
footer ul { display: flex; flex-direction: row; flex-wrap: wrap;}
footer ul li { line-height: 1.5; font-size: clamp(13px, 1vw, 13px); color: #e8e8e8;}
footer ul li + li::before { content: ""; margin: 0 10px; border-left: 1px solid #e8e8e8;}
footer address,
footer p { line-height: 1.5; font-size: clamp(13px, 1vw, 13px); color: #e8e8e8;}



.visual > div { position: relative; background: linear-gradient(135deg, #a1c4fd, #c2e9fb, #e0c3fc); overflow: hidden;}
.visual .ttl { z-index: 1; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh;}
.visual .ttl .typing { height: 30px; line-height: 1.5; background: linear-gradient(to right, #4e57a4, #1ccca3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: clamp(16px, 4vw, 20px);}
.visual .ttl span { background: linear-gradient(to right, #8b3def, #1ccca3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.5; font-size: clamp(40px, 10vw, 80px); font-weight: 800;}
.visual .ttl a { display: block; margin-top: 30px; padding: 3px; border: 1px solid rgba(78, 87, 164, 0.3); border-radius: 30px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.05); font-size: clamp(16px, 1vw, 16px); text-decoration: none; color: #fff;}
.visual .ttl a div { display: block; padding: 15px 40px; background: linear-gradient(to top, rgba(78, 87, 164, 0), rgba(78, 87, 164, 0.3)); border-radius: 30px;}
.visual .ttl a:hover { border: 1px solid rgba(28, 204, 163, 0.3);}
.visual .ttl a:hover div { background: linear-gradient(to top, rgba(28, 204, 163, 0), rgba(28, 204, 163, 0.3));}
.visual .gradient_circle { overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: inherit; height: inherit;}
.visual .gradient_circle div:first-child { position: absolute; top: -10vh; left: 0; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(rgba(178, 242, 187, 0.5), rgba(178, 242, 187, 0)); filter: blur(50px);}
.visual .gradient_circle div:nth-child(2) { position: absolute; top: -30vh; right: 0; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(rgba(255, 249, 176, 0.3), rgba(255, 249, 176, 0)); filter: blur(50px);}
.visual .gradient_circle div:last-child { position: absolute; top: 30vh; right: 10vw; width: 1200px; height: 1200px; border-radius: 50%; background: radial-gradient(rgba(255, 179, 186, 0.8), rgba(255, 179, 186, 0)); filter: blur(50px);}
.visual .bckgrnd > img { position: absolute; right: 7vw; bottom: 5vh;}
.visual .cone { position: absolute; top: -32vh; right: 28vw; width: 0; height: 0; border-right: 500px solid transparent; border-bottom: 200vh solid rgba(255, 255, 255, 0.3); border-left: 500px solid transparent; animation: swing 7s infinite ease-in-out; /* swing 애니메이션 적용 */}
@keyframes swing {
    0% { transform: rotate(0deg);}
    25% { transform: rotate(45deg);}
    50% { transform: rotate(0deg);}
    75% { transform: rotate(-40deg);}
    100% { transform: rotate(0deg);}
}
.visual #lottieAnimation { position: absolute; top: 0; left: 0; z-index: 999;}



.sct-1 { padding: 150px 0 100px; overflow: hidden;}
.sct-1 .cntnt ul { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; gap: 15px;}
.sct-1 .cntnt ul li div { display: flex; justify-content: center; align-items: flex-end; width: 250px; height: 400px; background: #fff; box-shadow: 10px 10px 0 #e8e8e8; border: 1px solid #e8e8e8; border-radius: 20px; overflow: hidden;}
.sct-1 .cntnt ul li:nth-child(1),
.sct-1 .cntnt ul li:nth-child(4) { position: relative; top: 100px;}
.sct-1 .cntnt ul li:nth-child(1) div { background: url('../images/prepare_01.svg') no-repeat -86px -50px #fff; background-size: cover; -webkit-transform: rotate(-20deg) translateX(-23.1884057971%); transform: rotate(-20deg) translateX(-23.1884057971%);}
.sct-1 .cntnt ul li:nth-child(2) div { background: url('../images/prepare_02.svg') no-repeat center -50px #fff; background-size: cover; -webkit-transform: rotate(-10deg) translateX(-11.5942028986%); transform: rotate(-10deg) translateX(-11.5942028986%);}
.sct-1 .cntnt ul li:nth-child(3) div { background: url('../images/prepare_03.svg') no-repeat center -50px #fff; background-size: cover; -webkit-transform: rotate(9deg) translateX(11.5942028986%); transform: rotate(9deg) translateX(11.5942028986%);}
.sct-1 .cntnt ul li:nth-child(4) div { background: url('../images/prepare_04.svg') no-repeat center center #fff; background-size: cover; -webkit-transform: rotate(18deg) translateX(23.1884057971%); transform: rotate(18deg) translateX(23.1884057971%);}
.sct-1 .cntnt ul li p { display: flex; justify-content: center; align-items: center; padding: 0 10px; line-height: 1.5; width: 100%; height: 35%; background: #fff; font-size: clamp(17px, 1vw, 25px); text-align: center; color: #747474;}
.sct-1 .ttl { text-align: center;}
.sct-1 .ttl h2 { padding: 100px 0; line-height: 1.5; font-size: clamp(30px, 8vw, 50px); font-weight: 800; color: #222;}
.sct-1 .ttl p { line-height: 1.5; font-size: clamp(20px, 5vw, 30px); color: #222;}
.sct-1 .ttl p strong { font-size: clamp(30px, 5vw, 40px); font-weight: 800;}
.sct-1 .ttl p strong:first-of-type::after { content: ""; display: block; height: 20px;}
.sct-1 .ellipsis { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 90px;}
.sct-1 .ellipsis div { aspect-ratio: 1; width: 10px; height: auto; background-color: #e8e8e8; border-radius: 10px;}



.sct-2 { overflow: hidden;}
.sct-2 > div::before { z-index: -1; content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: url('../images/fair.png') no-repeat center bottom; background-size: 60%; opacity: 0.6;}
.sct-2 > div { position: relative; padding: 100px 0; word-break: keep-all;}
.sct-2 .ttl { padding: 0 100px 100px; text-align: left;}
.sct-2 .ttl p { line-height: 1.5; font-size: clamp(20px, 5vw, 30px); color: #222;}
.sct-2 .ttl strong { font-size: clamp(30px, 5vw, 40px); font-weight: 800;}
.sct-2 .bckgrnd { display: flex; flex-direction: row; justify-content: center; align-items: center;}
.sct-2 .bckgrnd ul { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 70px; perspective: 1000px; transform-style: preserve-3d;}
.sct-2 .bckgrnd ul li { display: inline-block; margin: 20px 0; padding: 30px 45px; background: #fff; border: 2px solid rgba(139, 61, 239, 0.5); -webkit-box-shadow: 0px 2.85893px 80px rgba(46, 24, 108, 0.08), 0px 2.85893px 60px rgba(58,29, 119, 0.05), 0px 2.85893px 11.4357px rgba(100, 39, 115, 0.05); box-shadow: 0px 2.85893px 80px rgba(46, 24, 108, 0.08),0px 2.85893px 60px rgba(58, 29, 119, 0.05), 0px 2.85893px 11.4357px rgba(100, 39, 115, 0.05); color:#6b7072;}
.sct-2 .bckgrnd ul li strong { font-weight: 800; color: #222; text-decoration: underline;}
.sct-2 .bckgrnd ul.thought_bubble_01 li:nth-child(1) { border-radius: 30px; font-size: clamp(15px, 1vw, 15px); transform: rotateY(-6deg) translate3d(127px, -34px, -103px);}
.sct-2 .bckgrnd ul.thought_bubble_01 li:nth-child(2) { border-radius: 30px 30px 0 30px; font-size: clamp(15px, 1vw, 15px); transform: rotateY(-27deg) translate3d(25px, -18px, 1px);}
.sct-2 .bckgrnd ul.thought_bubble_01 li:nth-child(3) { border-radius: 30px 0 30px 0; font-size: clamp(15px, 1vw, 15px); transform: rotateY(14deg) translate3d(-57px, -42px, -129px);}
.sct-2 .bckgrnd ul.thought_bubble_01 li:nth-child(4) { border-radius: 30px; font-size: clamp(22px, 1vw, 22px); transform: rotateY(6deg) translate3d(207px, -113px, 44px);}
.sct-2 .bckgrnd ul.thought_bubble_01 li:nth-child(1) img { width: 40px; height: auto; vertical-align: middle;}
.sct-2 .bckgrnd ul.thought_bubble_01 li:nth-child(4) img { width: 40px; height: auto; vertical-align: middle;}
.sct-2 .bckgrnd ul.thought_bubble_02 li:nth-child(1) { border-radius: 30px 30px 30px 0; font-size: clamp(15px, 1vw, 15px); transform: rotateY(20deg) translate3d(-85px, -60px, 129px);}
.sct-2 .bckgrnd ul.thought_bubble_02 li:nth-child(2) {  border-radius: 0 30px 0 30px; font-size: clamp(15px, 1vw, 15px); transform: rotateY(-27deg) translate3d(-73px, -88px, -126px);}
.sct-2 .bckgrnd ul.thought_bubble_02 li:nth-child(2) img { width: 40px; height: auto; vertical-align: middle;}



.sct-3 { padding: 100px 100px 100px 100px;}
.sct-3 > div { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; gap: 50px; background: linear-gradient(284.05deg, #D3D5FF 1.1%, #F6EBFF 80.76%); border-radius: 20px; overflow: hidden;}
.sct-3 .ttl { min-width: 35%; padding: 50px 0 0 70px; margin: 0 auto; word-break: keep-all;}
.sct-3 .ttl p { line-height: 1.5; font-size: clamp(20px, 5vw, 30px); color: #b499eb;}
.sct-3 .ttl p span { display: block;}
.sct-3 .ttl p strong { line-height: 1.5; background: linear-gradient(98.2deg, #9f78fb 1.28%, #723dfc 58.43%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; font-size: clamp(30px, 5vw, 40px);}
.sct-3 .bckgrnd { padding: 200px 50px 0 0; position: relative;}
.sct-3 .rolling.up { position: absolute; top: 0; left: 0;}
.sct-3 .rolling.up ul li { padding: 20px 25px; margin-bottom: 10px; background: rgba(101, 69, 183, 0.1); border-radius: 50px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); font-size: clamp(14px, 1vw, 14px); color: #fff;}
.sct-3 .dashboard { position: relative; border-radius: 20px 20px 0 0; overflow: hidden;}
.sct-3 .dashboard img { margin-bottom: -3px;}
.sct-3 .fade { position: absolute; bottom: 10%; left: -20%;}
.sct-3 .fade ul li { display: none; padding: 20px 25px; margin-bottom: 10px; background: rgba(255, 255, 240, 1); border-radius: 50px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); line-height: 1.5; font-size: clamp(12px, 1vw, 14px); color: #747474;}



.sct-4 { padding: 100px 0 100px 0;}
.sct-4 .ttl p { line-height: 2; font-size: clamp(20px, 5vw, 30px); color: #222; text-align: center; word-break: break-word;}
.sct-4 .ttl strong { font-size: clamp(30px, 5vw, 40px); font-weight: 800;}



.sct-5 { padding: 100px 100px 100px 100px;}
.sct-5 .cntnt { display: flex; flex-direction: column; align-items: stretch; gap: 30px;}
.sct-5 .cntnt > div:first-child { display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; gap: 30px;}
.sct-5 .cntnt > div:first-child > div:nth-child(2) { display: flex; flex-direction: column; gap: 30px; width: 100%;}
.sct-5 .cntnt h3 { line-height: 1.5; font-size: clamp(20px, 5vw, 30px); font-weight: 800; color: #222;}
.sct-5 .cntnt h3 + p { padding-top: 10px; line-height: 2; font-size: clamp(16px, 2vw, 20px);}
.sct-5 .cntnt .service_01,
.sct-5 .cntnt .service_02,
.sct-5 .cntnt .service_03,
.sct-5 .cntnt .service_04 { padding: 30px 50px; border-radius: 30px;}
.sct-5 .cntnt .service_01 { background: url(../images/service_01.svg) no-repeat 100% 100% #f4f7f9; background-size: inherit;}
.sct-5 .cntnt .service_01 h3 + p { color: #747474;}
.sct-5 .cntnt .service_02 { height: 25vh; background: url(../images/service_02.svg) no-repeat 100% 100% #222;}
.sct-5 .cntnt .service_02 h3 { font-weight: 600; color: #fff;}
.sct-5 .cntnt .service_02 h3 + p { color: #fff;}
.sct-5 .cntnt .service_03 { height: 35vh; background: url(../images/service_03.svg) no-repeat 100% 100% #1ccca3; background-size: inherit;}
.sct-5 .cntnt .service_03 h3 { font-weight: 800; color: #222;}
.sct-5 .cntnt .service_03 h3 + p { color: #fff;}
.sct-5 .cntnt .service_04 { background: linear-gradient(112.86deg, #D4C0FF 42.63%, #9EA7F7 85.41%);}
.sct-5 .cntnt .service_04 h3 { font-weight: 600; word-break: keep-all; color: #fff;}
.sct-5 .cntnt .service_04 h3 span { display: inline; background: linear-gradient(98.2deg, #9f78fb 1.28%, #723dfc 58.43%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}



.sct-6 { padding: 100px 100px 100px 100px;}
.sct-6 .ttl h2 { line-height: 1.5; font-size: clamp(30px, 8vw, 45px); font-weight: 800; text-align: center; word-break: keep-all; color: #222;}
.sct-6 .cntnt { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; gap: 30px; padding-top: 100px;}
.sct-6 .cntnt > div { flex: 1;}
.sct-6 .cntnt > div:nth-child(1),
.sct-6 .cntnt > div:nth-child(2),
.sct-6 .cntnt > div:nth-child(3) { -webkit-box-shadow: 0px 27px 104px rgba(0, 0, 0, 0.08); box-shadow: 0px 27px 104px rgba(0, 0, 0, 0.08); border-radius: 30px; color: #222; overflow: hidden;}
.sct-6 .cntnt > div:nth-child(1) { background: url(../images/usage_01.svg) no-repeat 95% 95% #fff; background-size: inherit;}
.sct-6 .cntnt > div:nth-child(2) { background: url(../images/usage_02.svg) no-repeat 95% 95% #fff; background-size: inherit;}
.sct-6 .cntnt > div:nth-child(3) { background: url(../images/usage_03.svg) no-repeat 95% 95% #fff; background-size: inherit;}
.sct-6 .cntnt > div > div { padding: 30px 40px; height: 50vh;}
.sct-6 .cntnt > div > div > div { height: 100px;}
.sct-6 .cntnt h3 { padding-bottom: 5px; line-height: 1.5; font-size: clamp(20px, 2vw, 30px); font-weight: 800; color: #222;}
.sct-6 .cntnt h4 { line-height: 1.5;}
.sct-6 .cntnt p { line-height: 1.5; font-size: clamp(17px, 2vw, 20px); word-break: break-all; color: #6b7072;}



.sct-7 { padding: 150px 0 100px 0;}
.sct-7 > div { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: stretch; gap: 90px;}
.sct-7 .ttl { z-index: 1; background: linear-gradient(324.42deg, #090909 0%, rgba(69, 69, 69, 0.99) 160.86%); border: 2px solid rgba(0, 0, 0, 0); border-radius: 30px; overflow: hidden;}
.sct-7 .ttl h2 { padding: 50px 35px; background: linear-gradient(98.2deg, #9f78fb 1.28%, #723dfc 58.43%); -webkit-background-clip: text; -webkit-text-fill-color: rgba(0, 0, 0, 0); background-clip: text; line-height: 1.5; font-size: clamp(30px, 2vw, 40px); font-weight: 800; text-align: left; word-break: keep-all;}
.sct-7 .ttl h2 span { display: block;}
.sct-7 .ttl .bckgrnd { position: relative; width: auto; height: 80%; background-color: #090909; background-image: linear-gradient(to right, #9f78fb 1px, transparent 2px), linear-gradient(to bottom, #9f78fb 2px, transparent 1px); background-size: 50px 50px; background-position: -2px 0;}
.sct-7 .ttl .bckgrnd div { position: absolute; top: 30px; right: 30px; width: 80px; height: 80px; background: url(../images/rotating_gear.svg) no-repeat center; background-size: contain; animation: spin 8s linear infinite;}
.sct-7 .ttl .bckgrnd div + div { top: 85px; right: 85px;}
@keyframes spin {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}
.sct-7 .cntnt ul li::before { position: absolute; top: 50%; left: -50px; transform: translate(-50%, -50%); content: ""; width: 100px; height: 2px; background-color: #8b3def;}
.sct-7 .cntnt ul li { position: relative; padding: 20px 30px; background: rgba(28, 204, 163, 0.1); border: 2px solid rgba(0, 0, 0, 0); border-radius: 20px;}
.sct-7 .cntnt ul li::after { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); content: ""; display: block; width: 20px; height: 20px; background-color: #fff; border: 2px solid #8b3def; border-radius: 20px;}
.sct-7 .cntnt ul li + li { margin-top: 20px;}
.sct-7 .cntnt ul li > div { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; padding-bottom: 20px;}
.sct-7 .cntnt .seq { position: relative; left: 20px;}
.sct-7 .cntnt .seq span { z-index: 2; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); color: #fff;}
.sct-7 .cntnt .seq span + span { z-index: 1; content: ""; top: 0; left: 50%; transform: translate(-50%, -50%); display: block; width: 30px; height: 30px; background: #723dfc; border-radius: 50%;}
.sct-7 .cntnt h3 { display: inline-block; padding: 10px 20px 10px 40px; background: #1ccca3; border-radius: 30px; letter-spacing: 1.5px; font-size: clamp(18px, 1vw, 18px); font-weight: 600; color: #fff;}
.sct-7 .cntnt p { font-size: clamp(16px, 1vw, 16px); line-height: 2; color: #1d1e1f;}



.sct-8 { padding: 100px 0 150px 0;}
.sct-8 > div { display: flex; flex-direction: row-reverse; gap: 90px;}
.sct-8 .ttl { z-index: 1; padding: 50px 30px 50px 30px; border: 2px solid rgba(0, 0, 0, 0); border-radius: 30px;}
.sct-8 .ttl h2 { background: linear-gradient(98.2deg, #9f78fb 1.28%, #723dfc 58.43%); -webkit-background-clip: text; -webkit-text-fill-color: rgba(0, 0, 0, 0); background-clip: text; line-height: 1.5; font-size: clamp(30px, 2vw, 40px); font-weight: 800; text-align: left; word-break: keep-all;}
.sct-8 .ttl p { padding-top: 30px; line-height: 1.5; font-size: clamp(20px, 1vw, 30px); color: #222;}
.sct-8 .ttl .bckgrnd { display: flex; gap: 20px; padding: 30px 0 0 0;}
.sct-8 .ttl .bckgrnd img { width: 70px; height: auto;}
.sct-8 .cntnt .bckgrnd { display: flex; flex-direction: row; justify-content: center; align-items: center;}
.sct-8 .cntnt .bckgrnd img:nth-child(2) { position: relative; top: 60px; left: -60px;}



.sct-9 { padding: 100px 30px 150px 30px; background: rgb(247, 249, 251);}
.sct-9 .ttl { text-align: center;}
.sct-9 .ttl h2 { padding-bottom: 20px; line-height: 1.5; font-size: clamp(30px, 8vw, 50px); font-weight: 800; color: #222;}
.sct-9 .ttl p { line-height: 1.5; font-size: clamp(17px, 4vw, 20px); word-break: keep-all; color: #747474;}
.sct-9 .cntnt { padding-top: 150px;}
.sct-9 .plan { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 30px; padding-bottom: 40px;}
.sct-9 .plan > div > ul { display: flex; flex-direction: row;}
/* .sct-9 .plan > div > ul { display: flex; flex-direction: row; padding: 30px 25px 25px 25px;} */
.sct-9 .plan .plan_detail { margin: 45px 20px 20px; padding: 30px; background: #fff; border: 1px solid #e8e8e8; border-radius: 30px; -webkit-box-shadow:0px 2.85893px 80px rgba(46,24,108,.08),0px 2.85893px 60px rgba(58,29,119,.05),0px 2.85893px 11.4357px rgba(100,39,115,.05); box-shadow: 0px 2.85893px 80px rgba(46,24,108,.08),0px 2.85893px 60px rgba(58,29,119,.05),0px 2.85893px 11.4357px rgba(100,39,115,.05);}
.sct-9 .plan .plan_detail > div { text-align: center;}
.sct-9 .plan .plan_name { margin-bottom: 20px; height: 60px; border-bottom: 1px solid #ededed; font-size: clamp(20px, 1vw, 20px); font-weight: 700; text-align: center; color: #222;}
.sct-9 .plan .plan_name span { display: block; line-height: 2; font-size: clamp(14px, 1vw, 14px); color: #6b7072;}
.sct-9 .plan .plan_price { display: flex; flex-direction: row; justify-content: space-around; align-items: flex-start; gap: 10px; height: 80px;}
.sct-9 .plan .plan_price > div { display: flex; flex-direction: column; align-items: flex-start;}
.sct-9 .plan .plan_price > div span { font-size: clamp(22px, 6vw, 30px); font-weight: 800; color: #222;}
.sct-9 .plan .plan_price > div > div { display: flex; flex-direction: row; align-items: center; gap: 10px; padding-top: 15px;}
.sct-9 .plan .plan_price strike { font-size: clamp(18px, 1vw, 20px); text-align: right; color: #6b7072; vertical-align: middle;}
.sct-9 .plan .plan_price strike + span { display: inline-block; border: 1px solid #996ffa; border-radius: 20px; padding: 0 5px; background: linear-gradient(98.2deg, #9f78fb 1.28%, #723dfc 58.43%); -webkit-background-clip: text; -webkit-text-fill-color: rgba(0, 0, 0, 0); font-size: clamp(12px, 1vw, 12px); font-weight: 800; letter-spacing: -0.5px; line-height: 1.5; text-decoration: none;}
.sct-9 .plan .plan_price > p { line-height: 1.5; font-size: clamp(12px, 1vw, 14px); color: #6b7072;}
.sct-9 .plan .plan_price > p span { display: block;}
.sct-9 .plan .plan_event { height: 165px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; font-weight: 700;}
.sct-9 .plan .plan_event > p + p { background: linear-gradient(98.2deg, #9f78fb 1.28%, #723dfc 58.43%); -webkit-background-clip: text; -webkit-text-fill-color: rgba(0, 0, 0, 0); background-clip: text; line-height: 1.5; font-size: clamp(17px, 1vw, 17px);}
.sct-9 .plan .plan_event strong { color: #8b3def;}
.sct-9 .plan .active_period,
.sct-9 .plan .after_period { text-align: left;}
.sct-9 .plan .after_period { padding-top: 20px;}
.sct-9 .plan .active_period > p,
.sct-9 .plan .after_period > p { line-height: 2; font-size: clamp(17px, 1vw, 17px); font-weight: 700;}
.sct-9 .plan .active_period ul li,
.sct-9 .plan .after_period ul li { padding: 0 0 0 20px; text-indent: -20px; line-height: 2; font-size: clamp(14px, 1vw, 14px); color: #1d1e1f;}
.sct-9 .plan .active_period ul li::before,
.sct-9 .plan .after_period ul li::before { content: ""; display: inline-block; width: 15px; height: 15px; background: url(../images/icn_feature_list.png) no-repeat center; background-size: contain; border-radius: .1875rem; margin: 6px 0; margin-right: 5px; vertical-align: middle;}
.sct-9 strike + p { color: #222; font-size: clamp(20px, 5vw, 30px); font-weight: 800;}
.sct-9 strike + p span { font-size: clamp(12px, 2vw, 12px); font-weight: 400;}
.sct-9 .plan > div.promostion::before { content: "한정 프로모션"; position: absolute; left: 50%; transform: translate(-50%, -50%); padding: 10px 20px; background: linear-gradient(98.2deg, #9F78FB 1.28%, #723DFC 58.43%); border-radius: 10px; line-height: 1.5; font-size: clamp(18px, 1vw, 20px); font-weight: 700; text-align: center; color: #fff;}
.sct-9 .plan > div.promostion { position: relative; margin-top: -3px; border: 4px solid rgba(139, 61, 239, 0.5); box-sizing: border-box; border-radius: 30px;}
.sct-9 .plan > div.promostion::after { content: "2025년 1월까지 진행합니다."; position: absolute; top: -40px; right: 10px; transform: translate(-50%, -50%); padding: 10px 20px; background: #996ffa; border-radius: 30px 30px 30px 0; line-height: 1.5; font-size: clamp(14px, 2vw, 15px); font-weight: 500; text-align: center; color: #fff;}
.sct-9 .plan .plan_detail.basic { border: 2px solid rgba(28, 204, 163, 0.5);}
.sct-9 .plan .plan_detail.basic .plan_name { color: #1ccca3;}
.sct-9 .plan .plan_detail.basic .active_period ul li::before,
.sct-9 .plan .plan_detail.basic .after_period ul li::before { background: url(../images/icn_feature_list_2.png) no-repeat center;}
.sct-9 .plan + ul { text-align: center;}
.sct-9 .plan + ul li { padding: 0 0 0 10px; text-indent: -7px; line-height: 2; color: #747474;}
.sct-9 .plan + ul li::before { content: "※"; display: inline-block;}



.sct-10 { padding: 100px 100px 150px 100px; border-bottom: 1px solid #e8e8e8;}
.sct-10 > div { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; gap: 30px;}
.sct-10 .ttl { text-align: left;}
.sct-10 .ttl p { line-height: 1.5; font-size: clamp(20px, 5vw, 30px); color: #222;}
.sct-10 .ttl p span { display: block;}
.sct-10 .ttl p strong { font-size: clamp(30px, 2vw, 40px); font-weight: 800;}
.sct-10 .cntnt { padding: 30px 50px; background: #f7f9fb; border-radius: 20px;}
.sct-10 .cntnt h3 { line-height: 2; font-size: clamp(22px, 1vw, 22px); font-weight: 800; color: #222;}
.sct-10 .cntnt .process { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-evenly; align-items: stretch; margin: 20px 0 50px; background: #fff; border: 1px solid #e8e8e8; border-radius: 10px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.05); overflow: hidden;}
.sct-10 .cntnt .process li { position: relative; transform: rotate(-45deg); padding: 20px; width: 110px; height: 110px; background: #fff; border-right: 2px solid #e8e8e8; border-bottom: 2px solid #e8e8e8; border-radius: 15px;}
.sct-10 .cntnt .process li:nth-child(1) { z-index: 7;}
.sct-10 .cntnt .process li:nth-child(2) { z-index: 6;}
.sct-10 .cntnt .process li:nth-child(3) { z-index: 5;}
.sct-10 .cntnt .process li:nth-child(4) { z-index: 4;}
.sct-10 .cntnt .process li:nth-child(5) { z-index: 3;}
.sct-10 .cntnt .process li:nth-child(6) { z-index: 2;}
.sct-10 .cntnt .process li:nth-child(7) { z-index: 1;}
.sct-10 .cntnt .process li:last-child { border-right: none; border-bottom: none;}
.sct-10 .cntnt .process li div { position: relative; transform: rotate(45deg); height: 100%;}
.sct-10 .cntnt .process li div span { font-size: clamp(13px, 3vw, 15px); color: #1ccca3;}
.sct-10 .cntnt .process li div p { padding-top: 10px; line-height: 1.2; font-size: clamp(17px, 1vw, 17px); font-weight: 500; word-break: keep-all;}
.sct-10 .cntnt .notice p { padding-bottom: 15px; font-weight: 700;}
.sct-10 .cntnt .notice ul li { padding: 0 0 0 10px; text-indent: -11px; line-height: 2; word-break: keep-all;}



.sct-11 { display: flex; flex-direction: column; align-items: stretch; padding: 100px 100px 100px 100px;}
.sct-11 .ttl { text-align: center;}
.sct-11 .ttl h2 { padding-bottom: 20px; line-height: 1.5; font-size: clamp(30px, 8vw, 50px); font-weight: 800; color: #222;}
.sct-11 .ttl p { line-height: 1.5; font-size: clamp(17px, 4vw, 20px); color: #747474;}
.sct-11 .cntnt ul { padding-top: 50px;}
.sct-11 .cntnt ul li { padding: 0 20px;}
.sct-11 .cntnt ul li + li { border-top: 1px solid #e8e8e8;}
.sct-11 .cntnt ul li .question { display: flex; justify-content: space-between; align-items: center; gap: 10vw; height: 100px;}
.sct-11 .cntnt ul li .question p { line-height: 1.5; font-size: clamp(17px, 4vw, 20px); word-break: keep-all;}
.sct-11 .cntnt ul li .question span { position: relative;}
.sct-11 .cntnt ul li .question span.selected { transform: rotate(90deg); margin: 15px 5px 0 0;}
.sct-11 .cntnt ul li .question span::before,
.sct-11 .cntnt ul li .question span::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 15px; height: 2px; background-color: #222;}
.sct-11 .cntnt ul li .question span::before { right: 0; transform: translateY(-50%) rotate(45deg);}
.sct-11 .cntnt ul li .question span::after { top: 10px; right: 0; transform: translateY(-50%) rotate(-45deg);}
.sct-11 .cntnt ul li .answer { display: none; margin-bottom: 50px; color: #747474;}
.sct-11 .cntnt ul li .answer p { line-height: 2; word-break: keep-all;}



.bottom_banner { position: relative; padding: 200px 0; text-align: center; overflow: hidden;}
.bottom_banner > div::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('../images/20240829_100754.jpg') no-repeat center 65%; background-size: cover; filter: grayscale(120%); z-index: -2;}
.bottom_banner > div { padding: 0 40px;}
.bottom_banner > div::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: -1;}
.bottom_banner p { padding-bottom: 50px; line-height: 1.5; font-size: clamp(30px, 2vw, 38px); font-weight: 500; word-break: keep-all; color: #fff;}
.bottom_banner p + div { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 20px;}
.bottom_banner a { display: inline-block; padding: 15px 50px; background: #fff; border-radius: 10px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.05); line-height: 1.5; font-size: clamp(15px, 1vw, 15px); font-weight: 800; word-break: keep-all; text-decoration: none; color: #222;}
.bottom_banner a:nth-child(1):hover { background-color: #8b3def; color: #fff;}
.bottom_banner a:nth-child(2):hover { background-color: #1ccca3; color: #fff;}
.bottom_banner a:nth-child(3):hover { background-color: #4e57a4; color: #fff;}





@media (orientation: landscape) {
    .visual .ttl { top: 0 !important;}
    .visual .ttl span { font-size: 60px;}
    .visual .bckgrnd > img { right: 10px; height: 70vh;}
}

@media (min-width: 280px) and (max-width: 344px) {
    .sct-3 > div { padding: 20px 20px 0 !important;}
    .sct-3 .ttl,
    .sct-3 .bckgrnd { padding: 0 !important;}

    .sct-7 .cntnt ul li { padding: 20px !important;}

    .sct-9 { padding: 100px 20px 150px;}
    .sct-9 .plan .plan_detail:first-of-type { margin: 0 !important;}
    .sct-9 .plan .plan_price { flex-direction: column;}
    .sct-9 .plan .plan_price > p span { display: inline-block;}
    .sct-9 .plan > div.promostion::before { display: inline-block; position: relative;}
    .sct-9 .plan > div.promostion { margin-top: 60px !important;}

    .sct-10 .ttl { padding: 0 !important;}
    .sct-10 .cntnt .process li div { flex-direction: column !important;}
}

@media only screen and (max-width:600px) {
    header { left: 30px; width: calc(100% - 50px); align-items: flex-end;}
    header a div { padding: 10px 20px;}
    header h1 img { width: 120px;}

    footer > div { padding: 30px;}
    footer ul { flex-direction: column;}
    footer ul li + li::before  { display: none;}

    .visual .ttl { top: -15vh;}
    .visual .ttl .typing { padding-bottom: 50px;}
    .visual .ttl span { line-height: 1; padding-bottom: 0; text-align: center;}
    .visual .bckgrnd > img:first-of-type { right: 50%; transform: translate(50%, 15vh); width: 60vw;}
    .visual .cone { right: 0; border-right-width: 200px; border-bottom-width: 200vh; border-left-width: 200px;}

    .sct-1 { position: relative; padding: 50px 0;}
    .sct-1 > div { display: flex; flex-direction: column-reverse;}
    .sct-1 .cntnt ul { flex-wrap: wrap; padding: 0 0 100px 0;}
    .sct-1 .cntnt ul li div { width: 65vw; height: 45vh;}
    .sct-1 .cntnt ul li:nth-child(1),
    .sct-1 .cntnt ul li:nth-child(4) { top: 0;}
    .sct-1 .cntnt ul li:nth-child(2) div { -webkit-transform: rotate(10deg) translateX(-11.5942028986%); transform: rotate(10deg) translateX(-11.5942028986%);}
    .sct-1 .cntnt ul li:nth-child(3) div { -webkit-transform: rotate(-9deg) translateX(11.5942028986%); transform: rotate(-9deg) translateX(11.5942028986%);}
    .sct-1 .ttl h2 { padding: 80px 0;}
    .sct-1 .ttl p { position: absolute; right: 0; bottom: 200px; left: 0;}
    .sct-1 .ttl p strong { display: block;}
    .sct-1 .ttl p strong:first-of-type::after { display: none;}
    .sct-1 .ellipsis { padding-top: 200px;}

    .sct-2 > div::before { bottom: 30%; background-size: auto;}
    .sct-2 .ttl { padding: 0 30px;}
    .sct-2 .bckgrnd { flex-direction: column;}
    .sct-2 .bckgrnd ul { padding-top: 0;}
    .sct-2 .bckgrnd ul.thought_bubble_01 li:nth-child(1) { transform: rotateY(-6deg) translate3d(30px, -34px, -103px);}
    .sct-2 .bckgrnd ul.thought_bubble_01 li:nth-child(3) { transform: rotateY(14deg) translate3d(0, -42px, -129px);}
    .sct-2 .bckgrnd ul.thought_bubble_01 li:nth-child(4) { transform: rotateY(6deg) translate3d(40px, -113px, 44px);}

    .sct-3 { padding: 0 30px;}
    .sct-3 > div { flex-direction: column; gap: 30px;}
    .sct-3 .ttl { min-width: auto; padding: 30px 30px 0 30px;}
    .sct-3 .ttl p span { display: inline;}
    .sct-3 .bckgrnd { padding: 70px 20px 0 20px;}
    .sct-3 .rolling.up { display: none;}
    .sct-3 .dashboard { border-radius: 10px 10px 0 0;}
    .sct-3 .fade { top: 20px; bottom: auto; left: 50%; transform: translate(-50%, -50%);}
    .sct-3 .fade ul li { padding: 10px 15px; background: rgba(255, 255, 240, 0.7); border-radius: 10px;}

    .sct-4 { padding: 100px 30px 100px 30px;}
    .sct-4 .ttl p { display: inline;}

    .sct-5 { padding: 50px 30px 50px 30px;}
    .sct-5 .cntnt > div:first-child > div + div { display: flex; flex-direction: column; gap: 30px; width: 100%;}
    .sct-5 .cntnt .service_01,
    .sct-5 .cntnt .service_02,
    .sct-5 .cntnt .service_03,
    .sct-5 .cntnt .service_04 { padding: 30px;}
    .sct-5 .cntnt .service_01,
    .sct-5 .cntnt .service_02,
    .sct-5 .cntnt .service_03 { height: auto; background-image: none;}
    .sct-5 .cntnt > div:first-child { flex-direction: column;}
    .sct-5 .cntnt .service_04 { flex-direction: column;}
    .sct-5 .cntnt .service_04 h3 { padding-right: 0;}

    .sct-6 { padding: 50px 30px 50px 30px;}
    .sct-6 .cntnt > div:nth-child(1) { top: 0;}
    .sct-6 .cntnt { flex-direction: column; padding-top: 40px;}
    .sct-6 .cntnt > div:nth-child(1) { background-size: auto 120px;}
    .sct-6 .cntnt > div:nth-child(2) { background-size: auto 120px;}
    .sct-6 .cntnt > div:nth-child(3) { background-size: auto 120px;}
    .sct-6 .cntnt > div > div { padding: 30px 25px 150px 25px; height: auto;}
    .sct-6 .cntnt > div > div > div { padding-bottom: 20px; height: auto;}

    .sct-7 { padding: 100px 30px 0 30px;}
    .sct-7 .ttl h2 span { display: inline;}
    .sct-7 .ttl .bckgrnd { display: none;}
    .sct-7 > div { flex-direction: column; gap: 20px;}
    .sct-7 .cntnt ul li::before { top: 0; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 45px;}
    .sct-7 .cntnt ul li::after { display: none;}
    .sct-7 .cntnt ul li > div { flex-direction: column;}
    .sct-7 .cntnt .seq { left: 0;}
    .sct-7 .cntnt ul h3 { padding: 25px 0 20px 0; width: 100%; text-align: center;}

    .sct-8 > div { flex-direction: column; gap: 0;}
    .sct-8 .ttl { padding: 0 30px 50px 30px;}
    .sct-8 .ttl .bckgrnd img { width: 50px;}
    .sct-8 .cntnt .bckgrnd img:nth-child(2) { left: -80px; width: 30vw;}

    .sct-9 .ttl h2 span { display: block;}
    .sct-9 .ttl p { display: inline;}
    .sct-9 .cntnt { padding-top: 50px;}
    .sct-9 .plan { flex-direction: column; align-items: center;}
    .sct-9 .plan > div > ul { flex-direction: column; padding: 10px;}
    .sct-9 .plan .plan_detail { padding: 20px; margin: 45px 0 0;}
    .sct-9 .plan .plan_detail.basic { margin: 0;}
    .sct-9 .plan .plan_name { padding-bottom: 20px; height: auto;}
    .sct-9 .plan .plan_price { height: auto;}
    .sct-9 .plan > div.promostion { margin-top: 50px;}
    .sct-9 .plan > div.promostion::after { right: -30vw;}
    .sct-9 .plan .plan_detail.basic .plan_event { height: 100px;}
    .sct-9 .plan + ul li { text-align: left;}

    .sct-10 { padding: 100px 30px 150px 30px;}
    .sct-10 > div { flex-direction: column;}
    .sct-10 .ttl { padding: 0 50px;}
    .sct-10 .cntnt { padding: 0; background: none;}
    .sct-10 .cntnt h3 { font-weight: 400; text-align: center; color: #1ccca3;}
    .sct-10 .cntnt .process { flex-direction: column; gap: 0;}
    .sct-10 .cntnt .process li { transform: rotate(0deg); width: 100%; height: auto; border-right: none; border-radius: 0;}
    .sct-10 .cntnt .process li div { display: flex; flex-direction: row; align-items: flex-start; gap: 20px; transform: rotate(0deg);}
    .sct-10 .cntnt .process li div span { padding: 5px 0; min-width: 70px; background: #1ccca3; border-radius: 5px; color: #fff; text-align: center;}
    .sct-10 .cntnt .process li div span span { background: none;}
    .sct-10 .cntnt .process li div p { padding-top: 0;}

    .sct-11 { padding: 100px 30px 150px 30px;}

    .bottom_banner p + div { flex-direction: column;}
}

@media (min-width: 601px) and (max-width: 1024px) {
    .visual .ttl { top: -20vh;}
    .visual .bckgrnd > img { bottom: -10vh;}

    .sct-1 .cntnt ul li div { width: 20vw; height: 220px;}

    .sct-2 > div::before { background-position-y: center; background-size: 100%;}

    .sct-3 { padding: 0 50px;}
    .sct-3 > div { flex-direction: column;}
    .sct-3 .ttl { padding: 50px 30px 0 30px;}
    .sct-3 .ttl p span { display: inline;}
    .sct-3 .bckgrnd { padding: 0 30px 0 30px;}
    .sct-3 .rolling.up { display: none;}
    .sct-3 .fade { bottom: 30%; left: 50%; transform: translate(-50%, -50%);}
    .sct-3 .fade ul li { padding: 10px 15px; background: rgba(255, 255, 240, 0.7);}

    .sct-4 { padding: 100px 50px 100px 50px;}

    .sct-5 { padding: 100px 50px 100px 50px;}
    .sct-5 .cntnt > div:first-child { flex-direction: column;}
    .sct-5 .cntnt .service_01,
    .sct-5 .cntnt .service_02,
    .sct-5 .cntnt .service_03 { padding: 30px 50px 180px 50px; height: auto; background-size: auto 60%;}

    .sct-6 { padding: 100px 50px 100px 50px;}
    .sct-6 .cntnt > div:nth-child(1) { background-size: auto 25%;}
    .sct-6 .cntnt > div:nth-child(2) { background-size: auto 25%;}
    .sct-6 .cntnt > div:nth-child(3) { background-size: auto 25%;}
    .sct-6 .cntnt > div > div { padding: 30px 25px 200px 25px; height: auto;}
    
    .sct-7 { padding: 150px 50px 100px 50px;}
    .sct-7 .ttl .bckgrnd { background-size: 40px 40px;}

    .sct-9 .cntnt { padding-top: 50px;}
    .sct-9 .plan .plan_price { flex-direction: column; align-items: center;}
    .sct-9 .plan .plan_price > p span { display: inline;}
    .sct-9 .plan .plan_detail.basic .plan_event { height: 100px;}
    .sct-9 .plan > div.promostion { margin-top: 50px;}

    .sct-10 { padding: 100px 50px 150px 50px;}
    .sct-10 .ttl p span { display: inline;}
    .sct-10 .cntnt { padding: 30px;}
    .sct-10 .cntnt .process li { transform: none; padding: 20px 5px; width: 75px; height: auto; border-right: none; border-bottom: none; border-radius: 0; text-align: center;}
    .sct-10 .cntnt .process li div { transform: none;}
    .sct-10 .cntnt .process li div span span { display: block; padding: 5px; margin-top: 5px; font-size: 14px;}
    /*
    .sct-10 .cntnt .process li div p { display: inline-block; margin-top: 35px;}
    .sct-10 .cntnt .process li div p::before { content: ""; position: absolute; top: 50px; left: 50%; display: block; width: 1px; height: 25px; border: 1px solid #1ccca3; border-radius: 50px;}
    */
}