@charset "UTF-8";


*{word-break: keep-all;}
@keyframes zoom-in {
0% {
transform: scale(1)
}

to {
transform: scale(1.05)
}
}

@keyframes zoom-out {
0% {
transform: scale(1.05)
}

to {
transform: scale(1)
}
}

@keyframes arrow-fade-in {
0% {
opacity: 0;
transform: translate3d(0,.8rem,0) rotate(180deg)
}

to {
opacity: 1;
transform: translateZ(0) rotate(180deg)
}
}

@keyframes arrow-fade-out {
0% {
opacity: 0;
transform: translate3d(0,-.8rem,0) rotate(0)
}

to {
opacity: 1;
transform: translateZ(0) rotate(0)
}
}

@keyframes banner-fade-in {
0% {
opacity: 0;
transform: translate3d(0,100%,0) rotate(0)
}

to {
opacity: 1;
transform: translateZ(0) rotate(0)
}
}

@keyframes swipe-menu {
0% {
transform: translate3d(50%,0,0)
}

to {
transform: translateZ(0)
}
}

@keyframes dropdown-menu {
0% {
opacity: 0;
transform: translate3d(-50%,-.8rem,0)
}

to {
opacity: 1;
transform: translate3d(-50%,0,0)
}
}

@keyframes fade-out {
0% {
opacity: 1
}

to {
opacity: 0
}
}

@keyframes blur-out {
0% {
filter: blur(.5rem)
}

to {
filter: blur(0)
}
}

@keyframes slide-up {
0% {
opacity: 0;
transform: translate3d(0,.8rem,0)
}

to {
opacity: 1;
transform: translateZ(0)
}
}

@keyframes slide-down {
0% {
opacity: 1;
transform: translateZ(0)
}

to {
opacity: 0;
transform: translate3d(0,.8rem,0)
}
}

@keyframes draw-backdrop {
0% {
background-position: 100% 0
}

to {
background-position: 0 0
}
}

@keyframes narrow-backdrop {
0% {
transform: scaleX(0)
}

to {
transform: scaleX(1)
}
}

@keyframes filter-dropdown {
0% {
transform: scaleY(0)
}

to {
transform: scaleY(1)
}
}


html {font-size: 62.5%;scroll-behavior: auto;-webkit-font-smoothing: antialiased}
body,html {min-height: 100% ;overflow-x:hidden;}
body {min-width: 37.5rem;font-size: 1em; margin:0;overflow: hidden;}
body,button,input,select,textarea {font-family: "Pretendard",Pretendard Variable,Apple SD Gothic Neo,Segoe UI,sans-serif,Apple Color Emoji,Segoe UI Emoji;line-height: 1.5}
[data-newline=true] {white-space: pre-line}

h1,h2,h3,h4,h5,h6,p {margin: 0}

a {color: inherit;text-decoration: none}
a:not([href]) {pointer-events: none}

img {height: auto}
img,video {vertical-align: top;max-width: 100%}
video {display: inline-block}
pre {white-space: pre-wrap;word-wrap: break-word}
dd,dl,dt,menu,ol,ul {margin: 0;padding: 0}
li,ol,ul {list-style: none}

address,em {font-style: normal}
figure,form {margin: 0}
fieldset {vertical-align: top;margin: 0;padding: 0;border: 0}
label {cursor: pointer}

input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover {-webkit-text-fill-color: #282828;-webkit-transition: background-color 5000s;transition: background-color 5000s}
button,input,select,textarea {vertical-align: baseline;margin: 0;border-radius: 0;font-size: 100%;line-height: inherit}
button {box-sizing: border-box;padding: 0;border: 0;background: transparent;cursor: pointer}
input[type=number]::-webkit-inner-spin-button {display: none}
input[type=checkbox],input[type=radio] {vertical-align: middle}
input[type=text] {outline: inherit}
textarea {vertical-align: top;resize: vertical}
input, button, textarea, select {
font: inherit;
color: inherit;
background: none;
border: none;
outline: none;
padding: 0;
margin: 0;
}


input, select, .btnSubmit {
box-sizing:border-box;
font-size: 1.5rem;
height: 4.8rem;
height: 4.8rem;
color: #0c0c0d;
padding: 0 1rem;
border-radius: 1.2rem;
-webkit-tap-highlight-color: transparent;
background:#fff;

}


table {width: 100%;border-collapse: collapse;empty-cells: show}
select,td {vertical-align: middle}
hr {border-width: .1rem 0 0;border-style: solid}
a picture img {transition: all .4s cubic-bezier(.215,.61,.355,1)}
a:focus picture img,a:hover picture img {transform: scale(1.025);filter: brightness(.75)}
.text-center{text-align:center;}
.a11y {position: absolute !important;overflow: hidden;clip: rect(0 0 0 0);width: 1px;height: 1px;white-space: nowrap;}

.common-body *{box-sizing:border-box;}
.common-body {overflow-x: hidden;background-color: #fff;line-height: 1.2;}

.header-container {height: 9.6rem; padding: 2.8rem;position: fixed;top: 0;right: 0;left: 0;z-index: 1001;display: flex;align-items: center;justify-content: space-between;box-sizing: border-box;backdrop-filter: blur(12px);background: rgba(255, 255, 255, 0.8); width:100%;}
.header-container .logo {width: auto;margin: 0;z-index: 11;display: flex;font-weight: 400;font-size: 1.6rem;align-items: center;}

.logo h1 {font-size:2.1rem; font-weight:900;}
.logo h1 span {font-size:1.3rem; font-weight:100;}
.gnb-container {display:flex;align-items: center;}
.gnb-container ul {display:flex; margin-left:6rem;}
.gnb-container ul li { position:relative;}
.gnb-container ul li + li {margin-left:3.2rem;}
.gnb-container ul li a {font-size:1.5rem; font-weight:500; position:relative;transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out; color:#282828;}
.gnb-container ul li a:hover {font-weight:800; color:#a258ff;}

.logo-icon {display: inline-flex; align-items: center; justify-content: center;margin-right: 1.5rem;width:2.8rem;}
.logo-heading {font-size: 1.6rem;line-height: 1.8rem;}
.sbs-blink {display:flex; align-items: center; justify-content: center;height:30px; padding:0 1.4rem; border-radius:3.0rem; border:1px solid #ddd; }
.sbs-blink img{height:1.3rem;}

.comoon-main{box-sizing: border-box;min-height: calc(100vh - 2.8rem - 36rem);position:relative;}

.banner-contents {width:100%; position:relative; height:40vw; width:100vw; margin-top:8rem}
.banner-img {position:absolute; bottom:0px; right:10vw; z-index:0}
.banner-img img {width:40vw;animation-name: bibe;animation-duration: 0.5s;animation-iteration-count: infinite;animation-direction: alternate;}
.banner-item {width:1320px; margin:0 auto;display:flex;align-items: center; height:100%; }
.banner-item .banner-txt {position:relative;z-index:1;}
.banner-item .banner-txt dl dt {font-size:8rem; font-weight:900; letter-spacing:-0.05rem; line-height:1;display:block; margin-bottom:3.2rem;}
.banner-item .banner-txt dl dd {font-size:2.4rem; line-height:1.2; letter-spacing:-0.05rem; font-weight:100; margin-bottom:8.0rem; display:block;}
.banner-item .banner-txt dl dd b {font-weight:800; }

.banner-btn {display:inline-block; font-size:1.7rem; align-items: center; background:#282828; border-radius:80px; padding:1.6rem 4.0rem; color:#fff; font-weight:800;transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out;}
.banner-btn img{width:32px; display:block; margin-right:1.2rem;}
.banner-btn span {position:relative; display:flex;align-items: center;}
.banner-btn span:after {content:""; display:block; width:1.6rem; height:1.6rem; background: url('/2025_figma/img/icon-more-wh.png') 50% 50% no-repeat; background-size:cover !important; margin-left:2rem;transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out;}
.banner-btn:hover {background-color: #a258ff;}


 @-webkit-keyframes bibe {
	0% {
	-webkit-transform: translateY(5%);
	transform: translateY(5%);
	-webkit-filter: brightness(102%);
	filter: brightness(102%);
	}
	100% {
	-webkit-transform: translateY(0%);
	transform: translateY(0%);
	}
}


.bubble {display: block;position: absolute;z-index: 1;padding: 3px 8px 3px;border-radius: 20px;font-style: normal;font-weight: 500;font-size: 1.1rem;color: #fff;-webkit-animation: flash 2s infinite;}
.bubble:after {content: '';display: block;width: 0;height: 0;border-right: 13px solid transparent;position: absolute;z-index: -1;}
.bubble {right: -45px;top: -25px;background-color: #a258ff;text-align: center;}
.bubble:after {bottom: -6px;left: 12px;border-top: solid 8px #a258ff;}
.bubble.rightQuick {right: -8px;top: -17px;background-color: #a258ff;text-align: center;width: 120px;padding: 2px 12px 2px;}
.bubble.rightQuick:after {bottom: -7px;left: unset;right: 10px;border-top: solid 8px #092833;}

.container{width:1320px; margin:8rem auto 0;}
.course-container {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: calc(0.75rem * 6);}
.course-container .course-item a{display:block; border-radius:1.2rem;overflow:hidden; box-shadow:8px 8px 20px rgba(0,0,0,.13)}
.course-container .course-item a dl {padding:3rem;}
.course-container .course-item a dl dt {font-size:2.1rem; font-weight:700; color:#282828;display:block; margin-bottom:1.2rem; letter-spacing:-0.075rem;}
.course-container .course-item a dl dd {font-size:1.7rem; color:#666; line-height:1.4; font-weight:200}

.main-section{display:block; width:100%; margin-top:20rem;}
.tit-container {display:block; display:block; margin-bottom:8rem;}
.tit-container h3{font-size:3.6rem; font-weight:100;}
.tit-container h3 b {font-weight:900;}
.tit-container p {color:#2e2e2f; font-size:2.1rem; font-weight:200;display:block; margin-top:2rem; line-height:1.6}
.tit-container p b {font-weight:900;}

.chart-container{display:block; padding-left:40px; position:relative;}
.chart-wrap {margin-top: 32px;padding: 24px 60px 0px;height:480px;opacity: 0;transform: translateY(0);transition: all 0.6s ease-out;position:relative;}
.chart-wrap:after {content:"";display:block; width:2px; height:100%; position:absolute; top:0px;left:0px; background:#282828;}
.chart-wrap:before {content:"";display:block; width:100%; height:2px; position:absolute; bottom:0px;left:0px; background:#282828;}
.chart-wrap.animate {opacity: 1;transform: translateY(0);}
.chart-title-row {display: flex;align-items: baseline;gap: 30px;margin-bottom: 10px;}
.chart-bars {display: flex;align-items: flex-end;justify-content: space-around;height: 100%;gap: 60px;}
.bar {flex: 1;position:relative;display: flex;flex-direction: column;align-items: center;}
.bar span{display:block; position:absolute; bottom:-30px; left:0px; width:100%; text-align:center; font-size:1.7rem;}
.bar-inner {width: 100%;border-radius: 8px 8px 4px 4px;transform-origin: bottom;transform: scaleY(0);}
.chart-wrap.animate .bar-inner {animation: barGrow 0.9s ease-out forwards;}
.bar--figma .bar-inner { height: 384px; background: #ff6b5b; animation-delay: 0.1s; }
.bar--ps .bar-inner { height: 48px; background: #4f7cff; animation-delay: 0.2s; }
.bar--ai .bar-inner { height: 38px; background: #f8b84a; animation-delay: 0.3s; }
.bar--xd .bar-inner { height: 18px; background: #e075ff; animation-delay: 0.4s; }

@keyframes barGrow {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

.chart-hor{display:block; width:100%; position:absolute; top:-8px; height:100%; left:0px; font-size:1.4rem;}
.chart-hor-line {display:block; width:100%; position:relative;}
.chart-hor-line:after {display:block; width:100%; height:1px;content:""; background:#ccc;position:absolute; top:50%; z-index:0}
.chart-hor-line span{display:inline-block; position:relative; background:#fff; padding-right:10px; line-height:1;z-index:1;}
div.chart-hor-line + div {margin-top:31px;}

.partner-slider {height:22rem; margin-bottom:8rem; margin-top:8rem;}
.partner-slider > div {margin-left:-20%; display: flex;justify-content: flex-start;white-space: nowrap; }
.partner-slider > div + div {margin-top:120px;}
.partner-slider ul {display:flex; position: absolute;}
.partner-slider ul li {width:24rem;height:10rem; margin: 0 1rem;overflow:hidden; border-radius:12px; overflow:hidden; border:1px solid #ccc;}
.partner-slider > div ul{animation:partnerSlide 50s infinite linear;}
.partner-slider > div ul + ul{animation:partnerSlide2 50s infinite linear;}
.partner-slider > div.partner-slide2 ul{animation-direction: reverse;}

@keyframes partnerSlide {
	from{ transform: translateX(0%); }
	to { transform: translateX(-100%); }
}
@keyframes partnerSlide2 {
	from{ transform: translateX(100%); }
	to { transform: translateX(0%); }
}


.main-interview{display:flex; width:100%;gap:60px;}
.main-interview .tit-container {width:340px;}
.main-interview .tit-container .banner-btn  {margin-top:4rem;}
.main-interview-wrap {width:940px; position:relative;}
.main-interview-slidr {width: 100%;height: 70rem;display: flex;align-items: flex-start;justify-content: center;position: relative;overflow-y:hidden;padding:0 12rem; }
.main-interview-slidr .swiper-wrapper{padding:0 2rem;}
.rolling-bubble {display: inline-block;background: #eaeaea;color: #000;padding:3rem;border-radius: 24px;font-size: 1.7rem;line-height: 1.5;position: relative;max-width: 100%;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.13);}
.rolling-bubble::after {content: "";position: absolute;left: -12px;top: 40px;border-width: 20px;border-style: solid;border-color: #eaeaea transparent transparent transparent;z-index: 5;}
.rolling-right .rolling-bubble::after {content: "";position: absolute;right: -12px;top: 40px; left:auto; border-width: 20px 20px  0 0 ;border-style: solid;border-color: #eaeaea transparent transparent transparent;}
.main-interview-slidr .swiper-slide {position:relative;}
.main-interview-slidr .swiper-slide:nth-child(2n) {justify-content: flex-end;}
.main-interview-slidr .swiper-slide .rolling-profile{width:100px; height:100px; border-radius:100%; position:absolute; top:-0px; left:-120px;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.13); border:4px solid #fff; overflow:hidden; background:#ccc}
.main-interview-slidr .swiper-slide.rolling-right .rolling-profile{right:-120px; left:auto;}
.main-interview-slidr:after {content: '';position: absolute;left: 0;right: 0;height: 200px;bottom: 0;background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #fff 86%);z-index: 2;}

.feature-container {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: calc(0.75rem * 6);}
.feature-container .feature-item {display:block; border-radius:1.2rem;overflow:hidden; box-shadow:8px 8px 20px rgba(0,0,0,.13)}
.feature-container .feature-item {padding:3rem;}
.feature-container .feature-item .point-thumb {display:block; margin-bottom:1.5rem;}
.feature-container .feature-item dl dt {font-size:2.1rem; font-weight:700; color:#282828;display:block; margin-bottom:1.2rem; letter-spacing:-0.075rem;}
.feature-container .feature-item dl dd {font-size:1.7rem; color:#666; line-height:1.4; font-weight:200}

#footer {position:relative; background-color:#f7f7f7; text-align:left; z-index:60; font-size:12px; line-height: 1.67;letter-spacing: -0.2px;color: #666;  display:block; margin-top:12rem}
#footer:after{content:''; clear:both; display:block}
#footer .inner {position:relative;max-width: 1440px;margin: 0 auto;padding: 56px 80px;}
#footer .footer-menu:after{content:''; clear:both; display:block}
#footer .footer-menu > ul > li {float:left; line-height:1.5;padding:0 0 0 32px;}
#footer .footer-menu > ul > li a, #footer .footer-menu > ul > li span {display:block; font-size: 14px;line-height: 1.71;color:#666}
#footer .footer-menu > ul > li a .outlink{width: 18px;height: 18px;display: inline-block;margin-left: 2px; vertical-align: text-bottom;background:url(../images/common/icon-system-18-px-outlink@2x.png) 0 0 no-repeat; background-size:100% auto;}
#footer .footer-menu > ul > li.point{padding-left:0;}
#footer .footer-menu > ul > li.point a {color:#000;}
#footer address {padding-top:32px;font-style: normal;}
#footer address span {padding-right:10px;}
#footer address span a{text-decoration: underline;color:#666}
#footer .copyright {padding-top:16px}
#footer .footer-policy {position:absolute; right:80px; bottom:56px;  z-index:101;display: flex;justify-content: flex-end;}
#footer .footer-policy .btn-youtube{padding: 8px 16px;background-color: transparent; border-color:#ccc;}
#footer .footer-policy .btn-youtube span{font-size: 14px;line-height: 1.71;letter-spacing: -0.2px;}
#footer .footer-policy .btn-youtube  i{background:url(../images/common/icon-32-px-youtube-gr@2x.png) no-repeat center top;background-size: 24px;width: 24px;height: 24px;margin: -1px 0 0 2px;}
#footer .footer-policy .select_policy{position: relative; background-color: #e6e6e6;width: 300px;height: 40px;border-radius: 4px;margin-left: 12px;}
#footer .footer-policy .select_policy.on{background-color: #000;}
#footer .footer-policy .select_policy.on .companyGroup{opacity: 1;visibility: visible;transform: translate(0, 0);}
.companyGroup a{cursor:pointer}
#footer .footer-policy .select_policy.on h2 a{color: #fff;}
#footer .footer-policy .select_policy h2{position: relative;}
#footer .footer-policy .select_policy h2 a {display:block;padding:0 0 0 16px; height:40px; line-height:40px; font-size:14px;font-weight: 400;color:#000;}
#footer .footer-policy .select_policy h2::before {content:""; position:absolute; top: 19px; right: 18px; width: 16px; height: 2px; background-color:#595959;}
#footer .footer-policy .select_policy h2::after {content:""; position:absolute; top: 12px; right: 25px; width: 2px; height: 16px; background-color:#595959; transition:.4s ease}
#footer .footer-policy .select_policy.on h2::before{background-color:#fff}
#footer .footer-policy .select_policy.on h2::after {opacity:0; transform:rotate(90deg)}
#footer .footer-policy .select_policy .companyGroup {opacity: 0;visibility: hidden;transform: translate(0, 5px);transition: .25s ease; position:absolute; left:0; bottom: 48px; width: 100%; height: 406px; padding:12px 10px 12px 16px; border-radius: 8px;border: 1px solid #e6e6e6; background:#fff;  z-index:10}
#footer .footer-policy .select_policy .companyGroup > ul{overflow-y:scroll;height: 100%;}
#footer .footer-policy .select_policy .companyGroup li{padding: 4px 0;font-size: 14px;line-height: 1.71;letter-spacing: -0.2px;}
#footer .footer-policy .select_policy .companyGroup li a{display:block;color: #666;font-weight: 300;}
#footer .footer-policy .select_policy .companyGroup li a {color: #666;}
#footer .footer-policy .select_policy .companyGroup li a:hover{color:#006ecd}
#footer .footer-policy .select_policy .companyGroup li p.title {color: #000;font-weight: 400;padding: 4px 0 4px;}
#footer .footer-policy .select_policy .companyGroup li:first-child p.title{padding-top: 0;}
#footer .footer-policy .select_policy .companyGroup li.pc_show {display:block;}
#footer .footer-policy .select_policy .companyGroup li.mo_show {display:none;}
#footer .footer-policy .select_policy .companyGroup > ul::-webkit-scrollbar{width:6px;-webkit-appearance: none;}
#footer .footer-policy .select_policy .companyGroup > ul::-webkit-scrollbar-thumb {background-color: #ccc;border-radius: 3px}
#footer .footer-policy .select_policy .companyGroup > ul::-webkit-scrollbar-track {background-color: #fff;}

/* button */
.btn-scroll-top {width: 48px;height: 48px;display: none;position: fixed;right: 40px;top: calc(100% - 80px);border: 1px solid #ccc;border-radius: 50%;background: url(/2022/img/icon/icon-top-move.png) center center #fff no-repeat;background-size: 20px;z-index: 102;transition: border-color 0.2s ease-out;}
.btn-scroll-top:hover {border-color:rgba(204,204,204,0.5);transition: border-color 0.2s ease-out;will-change: border-color;}
.blind {overflow: hidden;position: absolute;top: 0;left: 0;width: 1px;height: 1px;margin: 1px;border: none;clip: rect (0, 0, 0, 0);}

.tuition-banner {display:block; margin-bottom:8rem; width:100%; position:relative; border-radius:2.4rem; overflow:hidden;}
.main-tuition .tit-container, .main-tuition .tuition-container {display:block; width:1200px; margin:0 auto;}
.main-tuition .tuition-container form{display:flex; margin-top:4rem;gap:40px;}
.main-tuition .tuition-container h4{color:#a258ff; font-size:1.5rem; display:block; margin-bottom:2rem;}

.tuition-item{display:flex; width:600px;flex-direction: column;}

.csTel:after {content:""; display:table; clear:both;}
.csTel li {float:left;}
.csTel li:nth-child(even) {width:5%; height:43px; line-height:43px; font-size:12pt; text-align:center;}
.csTel li:nth-child(odd) {width:30%;}
.csTel li select,
.csTel li input[type="tel"], .sttName {display:block; width:100%; height:43px;border-radius: 8px;background:#fff;border: 1px solid #dcdcdc; font-size:13px; color:#000}

.tuition-db{width:460px;}
.local-select  {display: grid;grid-template-columns: repeat(6, minmax(0, 1fr));gap: calc(0.05rem * 6);}
.local-select li {padding: 3px;color: #666666;display: flex;}
.local-select li input {display:none;}
.local-select li input:checked + label {border-color: #a258ff; background: #a258ff; font-weight: 700; color: #fff;}
.local-select li label {display: flex; align-items: center; justify-content: center; width: 100%; min-height:43px; border: 1px solid #fff; text-align: center; word-break: keep-all; background: #fff; border-radius: 8px; border: 1px solid #dcdcdc; font-size:13px; letter-spacing:-0.2px; font-weight:300}
.local-select li label {line-height: 1.4;}

div.tuition-db-item + div {margin-top:2.4rem;}
.tuition-db-item dl dd + dd {margin-top:1.2rem;}

.class-select {display:block;}
.class-select li {padding: 3px;color: #666666;display: block;}
.class-select li input {display:none;}
.class-select li input:checked + label {border-color: #a258ff; background: #a258ff; font-weight: 700; color: #fff;}
.class-select li label {display: flex; justify-content: space-between;width: 100%; min-height:43px; border: 1px solid #fff; text-align: left; word-break: keep-all; background: #fff; border-radius: 8px; border: 1px solid #dcdcdc; font-size:1.5rem; letter-spacing:-0.2px;align-items: center; padding: 2rem; width:100%;}
.class-select li label em{display: inline-block;font-size: 1.4rem;padding: .5rem 1.5rem;border-radius: 999px;background: #f7f3ff;color: #6646ff;margin-left: 6px;}

.sbtBtn {padding: 0px 0 10px;}
.sbtBtn a,.sbtBtn input[type=button] {display: block;margin: 0 auto;width: 100%;height: 44px;line-height: 44px;padding: 0 20px;font-size: 12pt;color: #fff;font-weight: 500;position: relative;background: #a258ff;overflow: hidden;border-radius: 8px;text-align: center;-webkit-box-shadow: 2px 2px 8px 0 rgba(0,0,0,.13);-moz-box-shadow: 2px 2px 8px 0 rgba(0,0,0,.13);box-shadow: 2px 2px 8px 0 rgba(0,0,0,.13);border: 0}
.sbtBtn a span {display: inline-block;margin: 0 5px;}

.csAgree {padding-top: 5px;text-align: right;}
.csAgree:after {content: "";display: table;clear: both;}
.csAgree input[type=checkbox] {margin-right: 5px;width: 18px;height: 18px;border-radius: 100%;-webkit-appearance: none;-moz-appearance: none;appearance: none;border: 1px solid #282828;display: inline-block;vertical-align: middle;background: #fff}
.csAgree:after {content: "";display: table;clear: both;}
.csAgree input[type="checkbox"]:checked {background: #fff url('/2022/img/icon/checkbox_arrow.png')no-repeat center center;background-size: cover;}
.csAgree label {font-size: 12px !important;font-family: "dotum", sans-serif;opacity: 0.7;font-weight: 700;color: #282828;display: flex;align-items: center;justify-content: flex-end;}
.csAgree label a {font-weight: bold;color: #282828;}
.csAgree u {text-decoration: none;font-weight: 500;color: #282828;font-size: 13px;font-family: 'Poppins', 'Pretendard', sans-serif;}
.csAgree details {font-size: 13px;margin-top: 5px;color: #666;font-family: 'Poppins', 'Pretendard', sans-serif;}
.csAgree summary {position: relative;padding-right: 18px;list-style: none;cursor: pointer;}
.csAgree details .wrap {display: flex;}
.csAgree details .arrow {content: "";display: block;width: 15px;height: 15px;background: url(/2022/img/icon/icon-board-next.png) center center / contain no-repeat;position: absolute;right: 0;top: 2px;}
.csAgree details[open] .arrow {transform: rotate(90deg);}

.blocker {z-index: 1300 !important}
.prpTxt {color: #666666;	font-size:1.5rem; 	font-weight:300;	margin-top:1.2rem;}
.privacyTable {text-align: center;word-break: break-all;margin-top: 7px;}
.privacyTable th, .privacyTable td {padding: 5px;border: solid 1px #ddd;}
.chkBox{padding:0}


.catalogCover-container {position: relative;background-color: #fff;color: #282828;text-align: center; margin-bottom:9rem;}
.courseVisual-container {position: relative;overflow: hidden;width: 100%;height: 48rem;}
.courseVisual-image {z-index: 1;height: 100%;opacity: 1;transition: opacity 1.2s; position:relative;}
.courseVisual-image:after{content: '';position: absolute;left: 0;right: 0;height: 400px;bottom: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #fff 86%);z-index:0;}
.common-image {display: block;width: 100%;}
.courseVisual-container img, .courseVisual-container video {position: absolute;top: 0;left: 50%;object-fit: cover;width: auto;max-width: inherit;height: 100%;transform: translate3d(-50%, 0, 0);}
.catalogCover-description{display: flex;justify-content: center;width: 100%;margin: 0 auto;}
.catalogCover-caption {z-index: 1;display: flex;flex-direction: column;align-items: flex-start;width: 100%;margin: -19.4rem auto 0;padding: 0 2rem;text-align: start;margin-top: -12.0rem; max-width: 98rem;}
.catalogCover-title-en {font-size:1.7rem; display:block; margin-bottom:0.8rem;color:#a258ff;font-weight:800;}
.catalogCover-title {font-size:3.6rem;  margin-bottom:0.8rem; font-weight:900}
.catalogCover-instructor {margin-top: 3.2rem;font-size: 2.1rem;line-height: 1.6; color:#666;color: #2e2e2f; font-weight:200; }
.classKeywords-keywords {display: flex;flex-wrap: wrap;gap: 1rem;font-size: 1.6rem;}
.classKeywords-keywords em {display: inline-block;padding: .5rem .8rem;border-radius: calc(infinity * 1px);background-color: #fff;transition-duration: .4s; font-size:1.2rem; border:1px solid #ccc; line-height:1; color:#666;}
.classInfo-container {width:98rem; margin:0 auto; padding: 0 2rem;}

.class-section{padding:9rem 0rem; border-top:1px solid #ccc;}
.fc-label-type1{border-radius: 1.6rem;display: inline-block; background: #a258ff; margin: 0; padding: .3rem 1.4rem; font-size: 1.2rem; font-weight: 700; min-width: 0; line-height: 1.5; color: #fff; margin-bottom:2rem}
.class-section-top {}
.edu-intro dl dt{font-size:3.6rem; font-weight:100; display:block; margin-bottom:1.2rem; }
.edu-intro dl dt b{font-weight:900;}
.edu-intro dl dd {font-size:2.1rem; color:#666; line-height:1.6;color: #2e2e2f;font-weight:200; }
.edu-table {display:flex; flex-wrap: wrap; gap:1.2rem; margin-top:4.8rem;}
.edu-table li {width: calc(100% / 4 - 1.2rem);display:flex; border:1px solid #ccc; background:#fff; padding:2rem; box-sizing:border-box;border-radius:1.2rem;}
.edu-table li.width50 {width:calc(100% / 2 - 1.2rem);}
.edu-table li span img{width:1.8rem; margin-right:12px;}
.edu-table li dl dt, .edu-table li dl dd{font-size:1.5rem; line-height:1.4}
.edu-table li dl dd { font-weight:300; color:#333 !important;}
.edu-table li dl dt + dd {margin-top:1rem;}
.layout-full { width:1300px; margin:0 auto 8rem;box-sizing: border-box;}


.edu-visual {display:block; padding:0; position:relative; box-sizing:border-box;}
.edu-visual ul {display:flex; flex-wrap: wrap;justify-content: space-between;}
.edu-visual ul li {margin-bottom:1rem; width:100%; position:relative; display:block; }
.edu-visual ul.col3 li {width: calc(100% / 3 - 1rem); padding-bottom:33%; position:relative; display:block; }
.edu-visual ul.col2 li {width: calc(100% / 2 - 1rem); padding-bottom:45%; position:relative; display:block; }
.edu-visual ul li div.thumb {position:absolute; top:0px; left:0px; background-position: 50% !important; background-size:cover !important; background-repeat:no-repeat; width:100%; height:100%; border-radius:24px; overflow:hidden;}
.edu-visual ul li div.thumb video {height: 100%;width: 100%;left: 50%;-o-object-fit: cover;object-fit: cover;position: absolute;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);opacity: 1;}

.edu-visual ul li div.thumb-img img {width:100%; margin:0 auto;}



.class-rollingwrap {width: 50vw;height: 50rem;display: flex;align-items: flex-start;justify-content: center;margin:4.8rem auto;position:relative; overflow:hidden;}
.class-rollingwrap:after {content: '';position: absolute;left: 0;right: 0;height: 200px;bottom: 0;background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #fff 86%);z-index: 2;}

.swiper.question-swiper {width: 100%;height: 100%;padding:0 2.8rem;}
.swiper-slide {display: flex;align-items: center;justify-content: flex-start;}
.swiper-slide:nth-child(2n) {justify-content: flex-end;}
.class-rollinganswer-bubble, .class-rollingbubble {display: inline-block;background: #ccc;color: #000;padding: 18px 28px;border-radius: 24px;font-size: 18px;line-height: 1.5;position: relative;max-width: 100%;}
.class-rollinganswer-bubble {background:#a258ff; color:#fff;float:right; width:60rem}
.class-rollingbubble::after {content: "";position: absolute;left: -8px;top: 12px;border-width: 15px;border-style: solid;border-color:#ccc  transparent   transparent   transparent ;z-index:5}
.class-rollinganswer-bubble::after {content: "";position: absolute;right:-8px; top: 12px;border-width: 15px 15px  0 0 ;border-style: solid;border-color: #a258ff transparent transparent transparent;}

.sub-container .main-feature{margin-top:0}
.tuition-video{display:block; border-radius:2.4rem; overflow:hidden; width:1200px; margin:0 auto}









.m-show {display:none;}

@media (max-width:1280px) {
.pc-show {display:none !important;}
.m-show {display:block;}

.mGnb ul{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: calc(0.75rem * 6); margin-top:8rem; padding:2rem; gap:.5rem;}
.mGnb ul li a{background:#a258ff; display:block; width:100%; padding:.8rem 1.2rem; text-align:center; font-size:1.2rem; font-weight:800; color:#fff; border-radius:1.2rem;}


.header-container {height: 8rem; padding: 2rem;position: fixed;top: 0;right: 0;left: 0;z-index: 1001;display: flex;align-items: center;justify-content: space-between;box-sizing: border-box;backdrop-filter: blur(12px);background: rgba(255, 255, 255, 0.8); width:100%;}
.banner-contents {width:100%; position:relative; height:auto; width:100%; margin-top:4rem; padding:0 2rem;}
.banner-img {position:relative; bottom:0px; right:auto; z-index:0}
.banner-img img {width:100%;animation-name: bibe;animation-duration: 0.5s;animation-iteration-count: infinite;animation-direction: alternate; padding:0 2rem; margin-top:4rem;margin-left:-2rem;}
.banner-item {width:100%; margin:0 auto;display:flex;flex-direction: column;height:100%;align-items: flex-start;}
.banner-item .banner-txt {position:relative;z-index:1;}
.banner-item .banner-txt dl dt {font-size:4rem; font-weight:900; letter-spacing:-0.05rem; line-height:1;display:block; margin-bottom:1.6rem;}
.banner-item .banner-txt dl dd {font-size:1.7rem; line-height:1.6; letter-spacing:-0.05rem; font-weight:100; margin-bottom:3.0rem; display:block;}
.course-container .course-item a dl dd br, .banner-item .banner-txt dl dd br{display:none;}
.banner-item .banner-txt dl dd b {font-weight:800; }


.container{width:100%; margin:8rem auto 0; padding:0 2rem;}
.course-container {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: calc(0.25rem * 6);}
.course-container .course-item {display:flex; flex:1;} 
.course-container .course-item a{display:block; border-radius:1.2rem;overflow:hidden; box-shadow:4px 4px 12px rgba(0,0,0,.13); }
.course-container .course-item a dl {padding:2rem;}
.course-container .course-item a dl dt {font-size:1.7rem; font-weight:700; color:#282828;display:block; margin-bottom:1.2rem; letter-spacing:-0.075rem;}
.course-container .course-item a dl dd {font-size:1.3rem; color:#666; line-height:1.4; font-weight:200}


.main-section{display:block; width:100%; margin-top:8rem;}
.tit-container {display:block; display:block; margin-bottom:4rem;}
.tit-container h3{font-size:2.4rem; font-weight:300; line-height:1.4}
.tit-container h3 br{}
.tit-container h3 b {font-weight:900;}
.tit-container p {color:#2e2e2f; font-size:1.5rem; font-weight:200;display:block; margin-top:2rem; line-height:1.6}
.tit-container p b {font-weight:900;}
.tit-container p br{display:none;}


.chart-container{display:block; padding-left:40px; position:relative;}
.chart-wrap {margin-top: 32px;padding: 24px 20px 0px;height:240px;opacity: 0;transform: translateY(0);transition: all 0.6s ease-out;position:relative;}
.chart-wrap:after {content:"";display:block; width:2px; height:100%; position:absolute; top:0px;left:0px; background:#282828;}
.chart-wrap:before {content:"";display:block; width:100%; height:2px; position:absolute; bottom:0px;left:0px; background:#282828;}
.chart-wrap.animate {opacity: 1;transform: translateY(0);}
.chart-title-row {display: flex;align-items: baseline;gap: 30px;margin-bottom: 10px;}
.chart-bars {display: flex;align-items: flex-end;justify-content: space-around;height: 100%;gap: 10px;}
.bar {flex: 1;position:relative;display: flex;flex-direction: column;align-items: center;}
.bar span{display:block; position:absolute; bottom:-30px; left:0px; width:100%; text-align:center; font-size:1.1rem;}
.bar-inner {width: 100%;border-radius: 8px 8px 4px 4px;transform-origin: bottom;transform: scaleY(0);}
.chart-wrap.animate .bar-inner {animation: barGrow 0.9s ease-out forwards;}
.bar--figma .bar-inner { height: 192px; background: #ff6b5b; animation-delay: 0.1s; }
.bar--ps .bar-inner { height: 24px; background: #4f7cff; animation-delay: 0.2s; }
.bar--ai .bar-inner { height: 20px; background: #f8b84a; animation-delay: 0.3s; }
.bar--xd .bar-inner { height: 12px; background: #e075ff; animation-delay: 0.4s; }


.chart-hor{display:block; width:100%; position:absolute; bottom:0px; height:100%; left:0px; font-size:1.4rem; top:auto;}
.chart-hor-line {display:block; width:100%; position:relative;}
.chart-hor-line:after {display:block; width:100%; height:1px;content:""; background:#ccc;position:absolute; top:50%; z-index:0}
.chart-hor-line span{display:inline-block; position:relative; background:#fff; padding-right:10px; line-height:1;z-index:1;}
div.chart-hor-line + div {margin-top:7px;}

.partner-slider {height:10rem; margin-bottom:8rem; margin-top:3rem;}
.partner-slider > div {margin-left:-20%; display: flex;justify-content: flex-start;white-space: nowrap; }
.partner-slider > div + div {margin-top:70px;}
.partner-slider ul {display:flex; position: absolute;}
.partner-slider ul li {width:18rem;height:6rem; margin: 0 .5rem;overflow:hidden; border-radius:12px; overflow:hidden; border:1px solid #ccc;}
.partner-slider ul li img {height:100%;display:block; margin:0 auto;}
.partner-slider > div ul{animation:partnerSlide 50s infinite linear;}
.partner-slider > div ul + ul{animation:partnerSlide2 50s infinite linear;}
.partner-slider > div.partner-slide2 ul{animation-direction: reverse;}



.main-interview{display:block; width:100%;gap:60px;}
.main-interview .tit-container {width:100%;}
.main-interview .tit-container .banner-btn  {margin-top:4rem;}
.main-interview-wrap {width:100%; position:relative;}
.main-interview-slidr {width: 100%;height: 45rem;display: flex;align-items: flex-start;justify-content: center;position: relative;overflow-y:hidden;padding:0 0 0 6.5rem; }
.main-interview-slidr .swiper-wrapper{padding:0 2rem;}
.rolling-bubble {display: inline-block;background: #eaeaea;color: #000;padding:2rem;border-radius: 24px;font-size: 1.5rem;line-height: 1.5;position: relative;max-width: 100%;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.13);}
.rolling-bubble::after {content: "";position: absolute;left: -12px;top: 40px;border-width: 20px;border-style: solid;border-color: #eaeaea transparent transparent transparent;z-index: 5;}
.rolling-right .rolling-bubble::after {content: "";position: absolute;left: -12px;top: 40px; right:auto; border-width: 20px;border-style: solid;border-color: #eaeaea transparent transparent transparent;}
.main-interview-slidr .swiper-slide {position:relative;}
.main-interview-slidr .swiper-slide:nth-child(2n) {justify-content: flex-end;}
.main-interview-slidr .swiper-slide .rolling-profile{width:60px; height:60px; border-radius:100%; position:absolute; top:-0px; left:-7.5rem;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.13); border:4px solid #fff; overflow:hidden; background:#ccc}
.main-interview-slidr .swiper-slide.rolling-right .rolling-profile{right:auto; left:-7.5rem;}
.main-interview-slidr:after {content: '';position: absolute;left: 0;right: 0;height: 200px;bottom: 0;background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #fff 86%);z-index: 2;}

.feature-container {display: grid;grid-template-columns: repeat(1, minmax(0, 1fr));gap: calc(0.25rem * 6);}
.feature-container .feature-item {display:flex;; border-radius:1.2rem;overflow:hidden; box-shadow:4px 4px 12px rgba(0,0,0,.13);}
.feature-container .feature-item {padding:3rem;}
.feature-container .feature-item .point-thumb {display:block; margin-bottom:1.5rem; margin-top:-1rem; margin-right:1rem; width:20vw;}
.feature-container .feature-item dl {width:80vw}
.feature-container .feature-item dl dt {font-size:1.7rem; font-weight:700; color:#282828;display:block; margin-bottom:1.2rem; letter-spacing:-0.075rem;}
.feature-container .feature-item dl dd {font-size:1.3rem; color:#666; line-height:1.4; font-weight:200}



.tuition-banner {display:block; margin-bottom:4rem; width:100%; position:relative; border-radius:1.2rem; overflow:hidden;}
.main-tuition .tit-container, .main-tuition .tuition-container {display:block; width:100%; margin:0 auto;}
.main-tuition .tuition-container form{display:flex; margin-top:4rem;gap:40px;flex-direction: column;}
.main-tuition .tuition-container h4{color:#a258ff; font-size:1.5rem; display:block; margin-bottom:2rem;}

.tuition-item{display:flex; width:100%;flex-direction: column;}
.tuition-db{width:100%;}

.local-select  {display: grid;grid-template-columns: repeat(5, minmax(0, 1fr));gap: calc(0.05rem * 6);}
.local-select li {padding: 3px;color: #666666;display: flex;}
.local-select li input {display:none;}
.local-select li input:checked + label {border-color: #a258ff; background: #a258ff; font-weight: 700; color: #fff;}
.local-select li label {display: flex; align-items: center; justify-content: center; width: 100%; min-height:43px; border: 1px solid #fff; text-align: center; word-break: keep-all; background: #fff; border-radius: 8px; border: 1px solid #dcdcdc; font-size:13px; letter-spacing:-0.2px; font-weight:300}
.local-select li label {line-height: 1.4;}

#footer {position:relative; background-color:#f7f7f7; text-align:left; z-index:60; font-size:12px; line-height: 1.67;letter-spacing: -0.2px;color: #666;  display:block; margin-top:8rem}
#footer:after{content:''; clear:both; display:block}
#footer .inner {position:relative;max-width: 100%;margin: 0 auto;padding: 3rem;}
#footer .footer-menu {display:none;}
#footer .footer-menu:after{content:''; clear:both; display:block}
#footer .footer-menu > ul > li {float:left; line-height:1.5;padding:0 0 0 32px;}
#footer .footer-menu > ul > li a, #footer .footer-menu > ul > li span {display:block; font-size: 14px;line-height: 1.71;color:#666}
#footer .footer-menu > ul > li a .outlink{width: 18px;height: 18px;display: inline-block;margin-left: 2px; vertical-align: text-bottom;background:url(../images/common/icon-system-18-px-outlink@2x.png) 0 0 no-repeat; background-size:100% auto;}
#footer .footer-menu > ul > li.point{padding-left:0;}
#footer .footer-menu > ul > li.point a {color:#000;}
#footer address {padding-top:32px;font-style: normal; font-weight:200}
#footer address span {padding-right:10px;}
#footer address span a{text-decoration: underline;color:#666}
#footer .copyright {padding-top:16px}




.catalogCover-container {position: relative;background-color: #fff;color: #282828;text-align: center; margin-bottom:4rem;}
.courseVisual-container {position: relative;overflow: hidden;width: 100%;height: 32rem;}
.courseVisual-image {z-index: 1;height: 100%;opacity: 1;transition: opacity 1.2s; position:relative;}
.courseVisual-image:after{content: '';position: absolute;left: 0;right: 0;height: 200px;bottom: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #fff 86%);z-index:0;}
.common-image {display: block;width: 100%;}
.courseVisual-container img, .courseVisual-container video {position: absolute;top: 0;left: 50%;object-fit: cover;width: auto;max-width: inherit;height: 100%;transform: translate3d(-50%, 0, 0);}
.catalogCover-description{display: flex;justify-content: center;width: 100%;margin: 0 auto;}
.catalogCover-caption {z-index: 1;display: flex;flex-direction: column;align-items: flex-start;width: 100%;margin: -19.4rem auto 0;padding: 0 2rem;text-align: start;margin-top: -12.0rem; max-width: 98rem;}
.catalogCover-title-en {font-size:1.3rem; display:block; margin-bottom:0.8rem;color:#a258ff;font-weight:800;}
.catalogCover-title {font-size:2.4rem;  margin-bottom:0.8rem; font-weight:900}
.catalogCover-instructor {margin-top: 3.2rem;font-size: 1.5rem;line-height: 1.6; color:#666;color: #2e2e2f; font-weight:200; }
.classKeywords-keywords {display: flex;flex-wrap: wrap;gap: 1rem;font-size: 1.5rem;}
.classKeywords-keywords em {display: inline-block;padding: .5rem .8rem;border-radius: calc(infinity * 1px);background-color: #fff;transition-duration: .4s; font-size:1.2rem; border:1px solid #ccc; line-height:1; color:#666;}
.classInfo-container {width:100%; margin:0 auto; padding: 0 2rem;}

.class-section{padding:4rem 2rem; border-top:1px solid #ccc;}


.layout-full {    width: 100%;    margin: 0 auto 8rem;    box-sizing: border-box;}
.edu-visual {display:block; padding:0 2rem; position:relative; box-sizing:border-box;}
.edu-visual ul {display:flex;flex-wrap: wrap;justify-content: space-between;}
.edu-visual ul li {margin-bottom:1rem; width:100%; position:relative; display:block; }
.edu-visual ul.col3 li {width: calc(100% / 1 - 0rem); padding-bottom:100%; position:relative; display:block; }
.edu-visual ul.col2 li {width: calc(100% / 1 - 0rem); padding-bottom:100%; position:relative; display:block; }
.edu-visual ul li div.thumb {position:absolute; top:0px; left:0px; background-position: 50% !important; background-size:cover !important; background-repeat:no-repeat; width:100%; height:100%; border-radius:24px; overflow:hidden;}
.edu-visual ul li div.thumb video {height: 100%;width: 100%;left: 50%;-o-object-fit: cover;object-fit: cover;position: absolute;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);opacity: 1;}

.edu-visual ul li div.thumb-img img {width:100%; margin:0 auto;}


.fc-label-type1{border-radius: 1.6rem;display: inline-block; background: #a258ff; margin: 0; padding: .3rem 1.4rem; font-size: 1.2rem; font-weight: 700; min-width: 0; line-height: 1.5; color: #fff; margin-bottom:2rem}
.class-section-top {}
.edu-intro dl dt{font-size:2.4rem; font-weight:100; display:block; margin-bottom:1.2rem; }
.edu-intro dl dt b{font-weight:900;}
.edu-intro dl dd {font-size:1.5rem; color:#666; line-height:1.6;color: #2e2e2f;font-weight:200; }
.edu-table {display:flex; flex-wrap: wrap; gap:1.2rem; margin-top:4.8rem;}
.edu-table li {width: calc(100% / 1 - 0rem);display:flex; border:1px solid #ccc; background:#fff; padding:2rem; box-sizing:border-box;border-radius:1.2rem;}
.edu-table li.width50 {width:calc(100% / 1 - 0rem);}
.edu-table li span img{width:1.8rem; margin-right:12px;}
.edu-table li dl dt, .edu-table li dl dd{font-size:1.5rem; line-height:1.4}
.edu-table li dl dd { font-weight:300; color:#333 !important;}
.edu-table li dl dt + dd {margin-top:1rem;}


.class-rollingwrap {width: 100%;height: 46rem;display: flex;align-items: flex-start;justify-content: center;margin:4.8rem auto;position:relative; overflow:hidden;}
.class-rollingwrap:after {content: '';position: absolute;left: 0;right: 0;height: 200px;bottom: 0;background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #fff 86%);z-index: 2;}
.sub-container{margin-top:0}
.swiper.question-swiper {width: 100%;height: 100%;padding:0 1rem;}
.swiper-slide {display: flex;align-items: center;justify-content: flex-start;}
.swiper-slide:nth-child(2n) {justify-content: flex-end;}
.class-rollinganswer-bubble, .class-rollingbubble {display: inline-block;background: #ccc;color: #000;padding: 18px 28px;border-radius: 24px;font-size: 18px;line-height: 1.5;position: relative;max-width: 100%;}
.class-rollinganswer-bubble {background:#a258ff; color:#fff;float:right; width:60rem}
.class-rollingbubble::after {content: "";position: absolute;left: -8px;top: 12px;border-width: 15px;border-style: solid;border-color:#ccc  transparent   transparent   transparent ;z-index:5}
.class-rollinganswer-bubble::after {content: "";position: absolute;right:-8px; top: 12px;border-width: 15px 15px  0 0 ;border-style: solid;border-color: #a258ff transparent transparent transparent;}


.tuition-video{display:block; border-radius:2.4rem; overflow:hidden; width:100%;}




























}