{"id":22,"date":"2025-07-17T04:32:43","date_gmt":"2025-07-17T04:32:43","guid":{"rendered":"https:\/\/spj2017.mycafe24.com\/?page_id=22"},"modified":"2025-08-11T04:55:45","modified_gmt":"2025-08-11T04:55:45","slug":"%ec%9c%a0%ec%b9%98%eb%b6%80","status":"publish","type":"page","link":"https:\/\/spj2017.com\/?page_id=22","title":{"rendered":"\uc720\uce58\ubd80"},"content":{"rendered":"\n<link href=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.css\" rel=\"stylesheet\">\r\n<script src=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.js\"><\/script>\n\n\n\n<style>\n.local01 a{color:#fff !important; font-size:18px;}\n\n.title-wrap{margin-top:70px;}\n\n\n.left_box h3{font-size:25px; border-bottom:2px solid #333;}\n.right_box .art1 img{height:200px; width:500px;}\n.right_box .art1 li{font-size: 23px;}\n\n\n.sec2{display:flex; gap:5%;}\n.sec2 p{margin-bottom:10px; }\n.stage {width: calc((100% - 5%) \/ 3);}\n\n.donut-chart {width: 120px; height: 120px; margin: 0 auto 10px; position: relative;}\n.donut-chart svg {transform: rotate(-90deg); }\n.donut-ring { fill: none; stroke: #e0e0e0; stroke-width: 14;}\n\n\/*.donut-segment { fill: none; stroke:#f84345; stroke-width: 14; stroke-linecap: round; stroke-dasharray: 282.6; stroke-dashoffset: 282.6; transition: stroke-dashoffset 1s ease;}*\/\n\n.donut-segment { fill: none; stroke:#F5E8E1; stroke-width: 14; stroke-linecap: round; stroke-dasharray: 282.6; \/* 2\u03c0r = 2\u00d7\u03c0\u00d745 *\/  stroke-dashoffset: 282.6; transition: stroke-dashoffset 1s ease;}\n.donut-label {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; font-weight: bold;white-space: nowrap; }\n\n.bar-label { margin: 2px 0px 0px 12px; font-weight: bold; font-size: 14px; position: absolute;}\n\n.bar-container {width: 100%; height: 25px;  background-color: #eee; border-radius: 25px; overflow: hidden; margin-bottom: 10px;}\n\n\/*.bar-fill {height: 100%; background-color: #f69595; width: 0; border-radius: 25px; }*\/\n\n.bar-fill {height: 100%; background-color: #e9cfc5; width: 0; border-radius: 25px; }\np {text-align: center;  margin-top:;}\n\n.tabbox {margin-top: 15vh;}\n.right {display: grid; gap: 20px; grid-template-columns: 1fr 1fr 1fr;}\n.right>ul {flex: 1;}\n.right ul li img {width: 100%; border-radius: 10px;}\n.right>ul:not(:last-child) {margin-bottom: 20px;}\n.right>ul>li {font-size: 20px; text-align: center;overflow:hidden;}\n.right>ul>li:last-child {margin-top: 10px;}\n.stage>p {font-size: 28px !important;}\n\n\/*\ubc18\uc751\ud615*\/\n@media (max-width:600px){\n.sec2{display:block;}\n.stage {width: 100%;}\n.right {display: block;}\n\n\n.wp-block-kadence-tabs .kt-tabs-id22_1cf7cd-6d > .kt-tabs-title-list li .kt-tab-title, .wp-block-kadence-tabs .kt-tabs-id22_1cf7cd-6d > .kt-tabs-content-wrap > .kt-tabs-accordion-title .kt-tab-title{border-radius: 10px !important;margin-top:20px;}\n\n\n}\n<\/style>\n\n\n\n<div class=\"title-wrap\">\n\n<section class=\"sec-img\">\n<div class=\"titleBox\">\n<div class=\"title__inner\">\n<ul>\n<li class=\"home\"><a href=\"#\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/07\/icon-home.png\" alt=\"\uc9d1 \uc544\uc774\ucf58\"><\/a><\/li>\n<li class=\"local local01\"><a href=\"#\">Program<\/a><\/li>\n<\/ul>\n<h2><span>\uc720\uce58\ubd80<\/span><\/h2>\n<\/div>\n<\/div><!--titleBox-->\n\n<div class=\"imgbox\">\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/07\/sub_banner_2.png\" alt=\"\uc11c\ube0c \ubc30\ub108\">\n<\/div>\n<\/section>\n\n<\/div>\n\n\n\n<div class=\"sub-inner\">\n<div class=\"subTi\" data-aos=\"fade-up\" data-aos-duration=\"1500\"><span>Program<\/span><h3>\uc720\uce58\ubd80<\/h3><\/div>\n\n\n\n<div class=\"sec2\" data-aos=\"fade-up\" data-aos-duration=\"1500\">\n  <!-- 1\ub144\ucc28 -->\n  <div class=\"stage\" data-percent=\"33.3\" data-values=\"80,60,50,30\">\n    <div class=\"donut-chart\">\n      <svg width=\"120\" height=\"120\">\n        <circle class=\"donut-ring\" cx=\"60\" cy=\"60\" r=\"45\"><\/circle>\n        <circle class=\"donut-segment\" cx=\"60\" cy=\"60\" r=\"45\"><\/circle>\n      <\/svg>\n      <div class=\"donut-label\">1\ub144\ucc28<\/div>\n    <\/div>\n    <p>Beginner<\/p>\n    <div class=\"bar-label\">Listening<\/div>\n    <div class=\"bar-container\"><div class=\"bar-fill\" data-value=\"80\"><\/div><\/div>\n    <div class=\"bar-label\">Speaking<\/div>\n    <div class=\"bar-container\"><div class=\"bar-fill\" data-value=\"60\"><\/div><\/div>\n    <div class=\"bar-label\">Reading<\/div>\n    <div class=\"bar-container\"><div class=\"bar-fill\" data-value=\"50\"><\/div><\/div>\n    <div class=\"bar-label\">Writing<\/div>\n    <div class=\"bar-container\"><div class=\"bar-fill\" data-value=\"30\"><\/div><\/div>\n  <\/div>\n\n  <!-- 2\ub144\ucc28 -->\n  <div class=\"stage\" data-percent=\"66.6\" data-values=\"95,85,80,60\">\n    <div class=\"donut-chart\">\n      <svg width=\"120\" height=\"120\">\n        <circle class=\"donut-ring\" cx=\"60\" cy=\"60\" r=\"45\"><\/circle>\n        <circle class=\"donut-segment\" cx=\"60\" cy=\"60\" r=\"45\"><\/circle>\n      <\/svg>\n      <div class=\"donut-label\">2\ub144\ucc28<\/div>\n    <\/div>\n    <p>Junior<\/p>\n    <div class=\"bar-label\">Listening<\/div>\n    <div class=\"bar-container\"><div class=\"bar-fill\" data-value=\"95\"><\/div><\/div>\n    <div class=\"bar-label\">Speaking<\/div>\n    <div class=\"bar-container\"><div class=\"bar-fill\" data-value=\"85\"><\/div><\/div>\n    <div class=\"bar-label\">Reading<\/div>\n    <div class=\"bar-container\"><div class=\"bar-fill\" data-value=\"80\"><\/div><\/div>\n    <div class=\"bar-label\">Writing<\/div>\n    <div class=\"bar-container\"><div class=\"bar-fill\" data-value=\"60\"><\/div><\/div>\n  <\/div>\n\n  <!-- 3\ub144\ucc28 -->\n  <div class=\"stage\" data-percent=\"100\" data-values=\"100,100,100,95\">\n    <div class=\"donut-chart\">\n      <svg width=\"120\" height=\"120\">\n        <circle class=\"donut-ring\" cx=\"60\" cy=\"60\" r=\"45\"><\/circle>\n        <circle class=\"donut-segment\" cx=\"60\" cy=\"60\" r=\"45\"><\/circle>\n      <\/svg>\n      <div class=\"donut-label\">3\ub144\ucc28<\/div>\n    <\/div>\n    <p>Intermediate<\/p>\n    <div class=\"bar-label\">Listening<\/div>\n    <div class=\"bar-container\"><div class=\"bar-fill\" data-value=\"100\"><\/div><\/div>\n    <div class=\"bar-label\">Speaking<\/div>\n    <div class=\"bar-container\"><div class=\"bar-fill\" data-value=\"100\"><\/div><\/div>\n    <div class=\"bar-label\">Reading<\/div>\n    <div class=\"bar-container\"><div class=\"bar-fill\" data-value=\"100\"><\/div><\/div>\n    <div class=\"bar-label\">Writing<\/div>\n    <div class=\"bar-container\"><div class=\"bar-fill\" data-value=\"95\"><\/div><\/div>\n  <\/div>\n\n<\/div>\n\n\n<style>.kt-tabs-id22_1cf7cd-6d > .kt-tabs-content-wrap > .wp-block-kadence-tab{border-top:2px solid #f5e8e1;border-right:2px solid #f5e8e1;border-bottom:2px solid #f5e8e1;border-left:2px solid #f5e8e1;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);min-height:400px;background:var(--global-palette9, #ffffff);}.wp-block-kadence-tabs .kt-tabs-id22_1cf7cd-6d > .kt-tabs-title-list li{margin-top:0px;margin-right:0px;margin-bottom:-2px;margin-left:0px;margin-right:0px;margin-left:0px;}.wp-block-kadence-tabs .kt-tabs-id22_1cf7cd-6d > .kt-tabs-title-list li:last-child{margin-right:0px;}.wp-block-kadence-tabs .kt-tabs-id22_1cf7cd-6d > .kt-tabs-title-list{margin-right:0px;}.wp-block-kadence-tabs .kt-tabs-id22_1cf7cd-6d > .kt-tabs-title-list li .kt-tab-title{margin-right:0px;}.wp-block-kadence-tabs .kt-tabs-id22_1cf7cd-6d > .kt-tabs-title-list li .kt-tab-title, .wp-block-kadence-tabs .kt-tabs-id22_1cf7cd-6d > .kt-tabs-content-wrap > .kt-tabs-accordion-title .kt-tab-title{font-size:2rem;line-height:1.4em;font-weight:regular;font-style:normal;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;padding-top:20px;padding-right:10px;padding-bottom:20px;padding-left:10px;border-color:#eee;color:#999999;background:#eee;}.wp-block-kadence-tabs .kt-tabs-id22_1cf7cd-6d > .kt-tabs-content-wrap > .kt-tabs-accordion-title .kt-tab-title{margin-top:0px;margin-right:0px;margin-bottom:-2px;margin-left:0px;}.wp-block-kadence-tabs .kt-tabs-id22_1cf7cd-6d > .kt-tabs-title-list li .kt-tab-title:hover, .wp-block-kadence-tabs .kt-tabs-id22_1cf7cd-6d > .kt-tabs-content-wrap > .kt-tabs-accordion-title .kt-tab-title:hover{border-color:#f5e8e1;color:#fff;background:#f5e8e1;}.wp-block-kadence-tabs .kt-tabs-id22_1cf7cd-6d > .kt-tabs-title-list li.kt-tab-title-active .kt-tab-title, .wp-block-kadence-tabs .kt-tabs-id22_1cf7cd-6d > .kt-tabs-content-wrap > .kt-tabs-accordion-title.kt-tab-title-active .kt-tab-title{border-color:#e4c7b9;color:#fff;background:#e4c7b9;}@media all and (max-width: 1024px){.kt-tabs-id22_1cf7cd-6d > .kt-tabs-content-wrap > .wp-block-kadence-tab{border-top:2px solid #f5e8e1;border-right:2px solid #f5e8e1;border-bottom:2px solid #f5e8e1;border-left:2px solid #f5e8e1;}}@media all and (max-width: 1024px){.wp-block-kadence-tabs .kt-tabs-id22_1cf7cd-6d > .kt-tabs-title-list li .kt-tab-title, .wp-block-kadence-tabs .kt-tabs-id22_1cf7cd-6d > .kt-tabs-content-wrap > .kt-tabs-accordion-title .kt-tab-title{font-size:rem;}}@media all and (max-width: 767px){.kt-tabs-id22_1cf7cd-6d > .kt-tabs-content-wrap > .wp-block-kadence-tab{border-top:2px solid #f5e8e1;border-right:2px solid #f5e8e1;border-bottom:2px solid #f5e8e1;border-left:2px solid #f5e8e1;}.wp-block-kadence-tabs .kt-tabs-id22_1cf7cd-6d > .kt-tabs-title-list li .kt-tab-title, .wp-block-kadence-tabs .kt-tabs-id22_1cf7cd-6d > .kt-tabs-content-wrap > .kt-tabs-accordion-title .kt-tab-title{font-size:rem;}}<\/style>\n<div class=\"wp-block-kadence-tabs alignnone tabbox\"><div class=\"kt-tabs-wrap kt-tabs-id22_1cf7cd-6d kt-tabs-has-3-tabs kt-active-tab-1 kt-tabs-layout-tabs kt-tabs-tablet-layout-inherit kt-tabs-mobile-layout-accordion kt-tab-alignment-left kt-create-accordion\"><ul class=\"kt-tabs-title-list kb-tabs-list-columns kb-tab-title-columns-3\"><li id=\"tab-1\" class=\"kt-title-item kt-title-item-1 kt-tabs-svg-show-always kt-tabs-icon-side-right kt-tab-title-active\"><a href=\"#tab-1\" data-tab=\"1\" class=\"kt-tab-title kt-tab-title-1 \"><span class=\"kt-title-text\">1\ub144\ucc28<\/span><\/a><\/li><li id=\"tab-2\" class=\"kt-title-item kt-title-item-2 kt-tabs-svg-show-always kt-tabs-icon-side-right kt-tab-title-inactive\"><a href=\"#tab-2\" data-tab=\"2\" class=\"kt-tab-title kt-tab-title-2 \"><span class=\"kt-title-text\">2\ub144\ucc28<\/span><\/a><\/li><li id=\"tab-3\" class=\"kt-title-item kt-title-item-3 kt-tabs-svg-show-always kt-tabs-icon-side-right kt-tab-title-inactive\"><a href=\"#tab-3\" data-tab=\"3\" class=\"kt-tab-title kt-tab-title-3 \"><span class=\"kt-title-text\">3\ub144\ucc28<\/span><\/a><\/li><\/ul><div class=\"kt-tabs-content-wrap\">\n<div class=\"wp-block-kadence-tab kt-tab-inner-content kt-inner-tab-1 kt-inner-tab22_868c3c-40\"><div class=\"kt-tab-inner-content-inner\">\n<div class=\"right\">\n<ul>\n<li><img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/07\/spj-img01.png\"><\/li>\n<li>\uc77c\uc0c1 \uc18d\uc5d0\uc11c \uc601\uc5b4\uc5d0 \uc790\uc5f0\uc2a4\ub7fd\uac8c \ubab0\uc785\ud574\uc694<\/li>\n<\/ul>\n<ul>\n<li><img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/07\/spj-img02.png\"><\/li>\n<li>\uc624\uac10\uc73c\ub85c \ub290\ub07c\uba70 \uc601\uc5b4\ub97c \ubc30\uc6cc\uc694<\/li>\n<\/ul>\n<ul>\n<li><img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/07\/spj-img03.png\"><\/li>\n<li>\uc601\uc5b4\ub97c \uc9e7\uc740 \ubb38\uc7a5\uc73c\ub85c \ub9d0\ud574\uc694<\/li>\n<\/ul>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-tab kt-tab-inner-content kt-inner-tab-2 kt-inner-tab22_9e5c0b-22\"><div class=\"kt-tab-inner-content-inner\">\n<div class=\"right\">\n<ul>\n<li><img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/07\/spj-img04.png\"><\/li>\n<li>\uc9c1\uc811 \uccb4\ud5d8\ud558\uba70 \uc601\uc5b4\ub85c \uc9c0\uc2dd\uc744 \ub9d0\ud574\uc694<\/li>\n<\/ul>\n<ul>\n<li><img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/07\/spj-img07.png\"><\/li>\n<li>\ud65c\ub3d9 \uc8fc\uc81c\ub97c \uac00\uc9c0\uace0 \uc601\uc5b4 \ud1a0\ub860 \uc218\uc5c5\uc744 \uc2dc\uc791\ud574\uc694<\/li>\n<\/ul>\n<ul>\n<li><img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/07\/spj-img05.png\"><\/li>\n<li>\ubb38\uc7a5\uc744 \uc774\uc5b4 \ub300\ud654\ud558\uba70 \uc0dd\uac01\uc744 \ub098\ub220\uc694<\/li>\n<\/ul>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-kadence-tab kt-tab-inner-content kt-inner-tab-3 kt-inner-tab22_cb3c5d-be\"><div class=\"kt-tab-inner-content-inner\">\n<div class=\"right\">\n<ul>\n<li><img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/07\/spj-img08.png\"><\/li>\n<li>\uc758\uacac\uc744 \ub098\ub204\uace0 \ud1a0\ub860\ud558\uba70 \ud45c\ud604\uc744 \ud655\uc7a5\ud574\uc694<\/li>\n<\/ul>\n<ul>\n<li><img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/07\/spj-img06.png\"><\/li>\n<li>\uc77d\uae30\ub97c \ud1b5\ud574 \ubc30\uacbd\uc9c0\uc2dd\uc744 \ub113\ud600\uc694<\/li>\n<\/ul>\n<ul>\n<li><img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/07\/spj-img09.png\"><\/li>\n<li>\uc774\uc720\ub97c \uc0dd\uac01\ud558\uba70 \ub17c\ub9ac\uc801\uc73c\ub85c \ub9d0\ud574\uc694<\/li>\n<\/ul>\n<\/div>\n<\/div><\/div>\n<\/div><\/div><\/div>\n\n\n\n<\/div>\n\n\n\n<script>\n  AOS.init();\n\n<\/script>\n\n <script>\n function animateDonut(circle, percent) {\n    const radius = 45;\n    const circumference = 2 * Math.PI * radius;\n    const offset = circumference - (percent \/ 100) * circumference;\n    circle.style.strokeDasharray = `${circumference}`;\n    circle.style.strokeDashoffset = `${circumference}`;\n    \n    \/\/ \ud2b8\ub9ac\uac70\n    setTimeout(() => {\n      circle.style.strokeDashoffset = `${offset}`;\n    }, 100);\n  }\n\n    \/\/ \ubc14 \uc560\ub2c8\uba54\uc774\uc158\n    function animateBar(bar, target) {\n      let current = 0;\n      function grow() {\n        if (current <= target) {\n          bar.style.width = `${current}%`;\n          current += 1;\n          requestAnimationFrame(grow);\n        }\n      }\n      grow();\n    }\n\n    \/\/ \uc2e4\ud589\n    document.querySelectorAll(\".stage\").forEach((stage) => {\n      const percent = parseInt(stage.getAttribute(\"data-percent\") || \"0\", 10);\n      const circle = stage.querySelector(\".donut-segment\");\n      animateDonut(circle, percent);\n\n      stage.querySelectorAll(\".bar-fill\").forEach((bar) => {\n        const target = parseInt(bar.getAttribute(\"data-value\") || \"0\", 10);\n        animateBar(bar, target);\n      });\n    });\n  <\/script>\n\n<script>\n  const sec = document.querySelector('.sec-img');\n  const io = new IntersectionObserver(([e]) => {\n    e.isIntersecting ? sec.classList.add('full-bleed')\n                     : sec.classList.remove('full-bleed');\n  }, { threshold: 0.35 });\n  io.observe(sec);\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Program \uc720\uce58\ubd80 Program \uc720\uce58\ubd80 1\ub144\ucc28 Beginner Listening Speaking Reading Writing 2\ub144\ucc28 Junior Listening Speaking Reading Writing 3\ub144\ucc28 Intermediate Listening Speaking Reading Writing<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-fullwidth.php","meta":{"kt_blocks_editor_width":"","footnotes":""},"class_list":["post-22","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spj2017.com\/index.php?rest_route=\/wp\/v2\/pages\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spj2017.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spj2017.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spj2017.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spj2017.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=22"}],"version-history":[{"count":156,"href":"https:\/\/spj2017.com\/index.php?rest_route=\/wp\/v2\/pages\/22\/revisions"}],"predecessor-version":[{"id":1863,"href":"https:\/\/spj2017.com\/index.php?rest_route=\/wp\/v2\/pages\/22\/revisions\/1863"}],"wp:attachment":[{"href":"https:\/\/spj2017.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}