@charset "UTF-8";
@import url(/2025/common/css/font.css);
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

*{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%}
body {min-width: 37.5rem;font-size: 1em; margin:0}
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: #fff;box-shadow: inset 0 0 0 100rem #222;-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 {
    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 {overflow-x: hidden;background-color: #000;color: #fff;scrollbar-gutter: stable both-edges;line-height: 1.2;}
.common-body::-webkit-scrollbar-track {background-color: #222;}
.common-body::-webkit-scrollbar-thumb {border-radius: 1rem;background-color: #6f6f6f;}
.common-body::-webkit-scrollbar {width: 1rem;}

.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;background-color: #000; width:29rem;}
.header-container .logo {width: 33.2rem;min-width: 33.2rem;margin: 0;z-index: 11;display: flex;font-weight: 400;font-size: 1.6rem;align-items: center;}


.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;font-weight: 700;}
.visually-hidden {display: none !important;}

/*
.navigation-container:has(.navigation-activeMenu):after {content: "";position: absolute;top: 0;right: 0;z-index: -1;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, .7);}
.navigation-container{position: absolute;top: 0; right: 0; left: 0;}
.navigation-activeMenu {visibility: visible;transition-duration: .3s;transform: translateX(0);animation: Navigation_fade-in__CWocy .3s ease-in-out forwards;}

.navigation-menu {transition-property: all;transition-duration: .2s;transition-timing-function: cubic-bezier(.645, .045, .355, 1);position: fixed;top: 6.4rem;right: 0;left: 0;bottom: 0;z-index: 1;display: flex;flex-direction: column;box-sizing: border-box;width: 26.8rem;padding: 1.2rem;background-color: #000;transform: translateX(100%);}
.navigation-menu {top: 9.6rem;display: flex;width: 36rem;padding:0 2.8rem 2.8rem 2.8rem;transform: none;visibility: visible;transition-duration: .3s;transform: none;animation: unset;}
.navigation-menu:before {content: "";position: absolute;top: 0;right: 0;bottom: 0rem;border-right: .1rem solid #333;}
.navigation-menu:after{content: "";position: absolute;z-index: -1;box-sizing: border-box;width: 100%;background-color: #000;	left: 0;border-right: .1rem solid #333;top: -9.8rem;height: 10rem;}

.navigation-list{visibility: visible;transition-duration: .3s;transform: translateX(0);animation: Navigation_fade-in__CWocy .3s ease-in-out forwards;overflow-y: auto;height: auto;scrollbar-width: none;	overflow: unset;	}
.navigation-itemContainer{overflow: hidden;position: relative;border-radius: .8rem;}
.navigation-itemContainer:after {content: "";position: absolute;z-index: -1;background-color: #222;opacity: .75;transition-timing-function: cubic-bezier(.645, .045, .355, 1);transition-duration: .4s;transition-property: transform;transform: scaleY(0) translate3d(0, 100%, 0);transform-origin: center 100%;inset: 0;}
.navigation-itemContainer:hover+.navigation-itemContainer:after {transform: translate3d(0,-100%,0)}
.navigation-itemContainer:has(+.navigation-itemContainer:hover):after {transform-origin: center 100%}
.navigation-itemContainer:focus-within:after,.navigation-itemContainer:focus:after,.navigation-itemContainer:hover:after {transition-duration: .4s;transform: scale(1) translateZ(0)}
.navigation-itemContainer:focus .Navigation_secondary__p1NCI,.navigation-itemContainer:focus-within .Navigation_secondary__p1NCI,.navigation-itemContainer:hover .Navigation_secondary__p1NCI {display: block;box-shadow: inset 0 0 .1rem #333;animation: Navigation_fade-in__CWocy .4s cubic-bezier(.645,.045,.355,1) forwards,Navigation_slide-up__yZJdh .4s cubic-bezier(.645,.045,.355,1) forwards,Navigation_blur-out__uvEzt .4s cubic-bezier(.645,.045,.355,1) forwards}
.navigation-itemContainer:hover:has(.navigation-activeMenu) {position: relative;z-index: 11}
.navigation-itemContainer:hover:has(.navigation-activeMenu):before {content: "";position: fixed;top: 18.4rem;z-index: -1;width: 32rem;height: 48rem}
.navigation-itemContainer {left:0}
.navigation-itemContainer:has(.navigation-activeMenu):after {left: 0}
		.navigation-itemContainer:hover:has(.navigation-activeMenu):first-child:before {
			-webkit-clip-path: polygon(80% -6rem,80% 1.2rem,100% 100%,100% 0);
			clip-path: polygon(80% -6rem,80% 1.2rem,100% 100%,100% 0)
		}
		.navigation-itemContainer:hover:has(.navigation-activeMenu):nth-child(2):before {
			-webkit-clip-path: polygon(80% 1.2rem,80% 8.4rem,100% 100%,100% 0);
			clip-path: polygon(80% 1.2rem,80% 8.4rem,100% 100%,100% 0)
		}
		.navigation-itemContainer:hover:has(.navigation-activeMenu):nth-child(3):before {
			-webkit-clip-path: polygon(80% 8.4rem,80% 15.6rem,100% 100%,100% 0);
			clip-path: polygon(80% 8.4rem,80% 15.6rem,100% 100%,100% 0)
		}
		.navigation-itemContainer:hover:has(.navigation-activeMenu):nth-child(4):before {
			-webkit-clip-path: polygon(80% 15.6rem,80% 22.8rem,100% 100%,100% 0);
			clip-path: polygon(80% 15.6rem,80% 22.8rem,100% 100%,100% 0)
		}
		.navigation-itemContainer:hover:has(.navigation-activeMenu):nth-child(5):before {
			-webkit-clip-path: polygon(80% 22.8rem,80% 30rem,100% 100%,100% 0);
			clip-path: polygon(80% 22.8rem,80% 30rem,100% 100%,100% 0)
		}
		.navigation-itemContainer:hover:has(.navigation-activeMenu):nth-child(6):before {
			-webkit-clip-path: polygon(80% 30rem,80% 37.2rem,100% 100%,100% 0);
			clip-path: polygon(80% 30rem,80% 37.2rem,100% 100%,100% 0)
		}
		.navigation-itemContainer:hover:has(.navigation-activeMenu):nth-child(7):before {
			-webkit-clip-path: polygon(80% 37.2rem,80% 44.4rem,100% 100%,100% 0);
			clip-path: polygon(80% 37.2rem,80% 44.4rem,100% 100%,100% 0)
		}
		.navigation-itemContainer:hover:has(.navigation-activeMenu):nth-child(8):before {
			-webkit-clip-path: polygon(80% 44.4rem,80% 51.6rem,100% 100%,100% 0);
			clip-path: polygon(80% 44.4rem,80% 51.6rem,100% 100%,100% 0)
		}
		.navigation-itemContainer:hover:has(.navigation-activeMenu):nth-child(9):before {
			-webkit-clip-path: polygon(80% 51.6rem,80% 58.8rem,100% 100%,100% 0);
			clip-path: polygon(80% 51.6rem,80% 58.8rem,100% 100%,100% 0)
		}
		.navigation-itemContainer:hover:has(.navigation-activeMenu):nth-child(10):before {
			-webkit-clip-path: polygon(80% 58.8rem,80% 66rem,100% 100%,100% 0);
			clip-path: polygon(80% 58.8rem,80% 66rem,100% 100%,100% 0)
		}
		.navigation-itemContainer:hover:has(.navigation-activeMenu):nth-child(11):before {
			-webkit-clip-path: polygon(80% 66rem,80% 73.2rem,100% 100%,100% 0);
			clip-path: polygon(80% 66rem,80% 73.2rem,100% 100%,100% 0)
		}
.navigation-itemContainer:hover .navigation-item.navigation-depth1{padding-left:2.4rem;}
.navigation-itemContainer:hover .navigation-item.navigation-depth1 .navigation-img{opacity:1;}
.navigation-primary {transition-property: all;transition-duration: .2s;transition-timing-function: cubic-bezier(.645, .045, .355, 1);position: relative;display: block;border-radius: .8rem;cursor: pointer;}
.navigation-item {height: 6.8rem;padding: 1.2rem;font-size: 1.6rem;transition-duration: .3s;transform: none;animation: unset;}
.navigation-item {display: flex;align-items: center;box-sizing: border-box;width: 100%;outline: none;}
.navigation-item:focus .navigation-title,.navigation-item:hover .navigation-title {transform: translateY(0)}
.navigation-item:focus .navigation-subtitle,.navigation-item:hover .navigation-subtitle {margin-top: .8rem;opacity: 1;line-height: 1.3;transform: translateY(0)}
.navigation-img {border-radius: .6667rem;width: 2.4rem;height: 2.4rem;padding:1.2rem; opacity:0.5}
.navigation-img-secondary {border-radius: 4rem;width: 4.8rem;height: 4.8rem;}
.navigation-text {display: flex;flex-direction: column;justify-content: space-between;overflow: hidden;margin-right: auto;	font-size: 1.5rem;}
.navigation-title {display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;transition-property: all;transition-duration: .3s;transition-timing-function: cubic-bezier(.25, .1, .2, 1);line-height: 1.12;}
.navigation-subtitle {display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;transition-property: all;transition-duration: .3s;transition-timing-function: cubic-bezier(.25, .1, .2, 1);opacity: 0;font-size: 1.2rem;color: #b3b3b3;line-height: 0;transform: translateY(100%);}
.navigation-secondary {position: relative;display: none;flex-direction: column;scrollbar-width: none;box-sizing: border-box;}
.navigation-secondary {position: fixed;top: 18.4rem;left: 34.8rem;z-index: 11;overflow-y: auto;width: 32.8rem;max-height: 48rem;padding: 1.2rem;border-radius: .8rem;background-color: rgba(34, 34, 34, .75);-webkit-backdrop-filter: blur(1.6rem);backdrop-filter: blur(1.6rem);}

*/

.comoon-main{box-sizing: border-box;min-height: calc(100vh - 2.8rem - 36rem);margin-left: 29rem;	position:relative;}
.footer-container {position: relative;display: flex;flex-direction: column;box-sizing: border-box;padding: 4rem 2.8rem;background-color: #000;font-size: 1.2rem;color: #8c8c8c;line-height: 1.3;	height: 36rem;margin-left: 36rem;}
.footer-container:before {content: "";position: absolute;top: 0;right:0rem;left: 0rem;border-top: .1rem solid #333;}
.footer-logo {display: flex;width: -moz-fit-content;width: fit-content;height: -moz-fit-content;height: fit-content;margin-bottom: 1.6rem; align-items: center;}
.footer-info {margin-bottom: 1.2rem;}
.footer-info:last-child{margin-bottom: 2.8rem;}
.footer-family {position: absolute;right: 2.8rem;top: 6.4rem;}
.footer-family > span {display: flex;width: 210px;height: 3.8rem;padding: 0 2.8rem;font-size: 1.3rem;font-weight: 300;color: #fff;border: solid 1px #333;cursor: pointer;position: relative; align-items: center;}
.footer-family > span:before, .footer-family > span:after {content: "";display: block;background: #fff;position: absolute;right: 20px;top: 50%;transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out;}
.footer-family > span:before {width: 1px;height: 9px;margin-top: -4px;}
.footer-family > span:after {width: 9px;height: 1px;margin-right: -4px;}
.footer-family.on > span:before, .footer-family.on > span:after {transform: rotate(90deg);-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);}
.footer-family ul {position: absolute;bottom: 100%;left: 0;right: 0;background: #191919;display: none;z-index:3}
.footer-family ul li {border: solid 1px #fff;border-bottom: none;}
.footer-family ul li a {display: block;height: 34px;line-height: 34px;padding: 0 20px;font-size: 13px;color: #fff;font-weight: 300;position: relative;}
.footer-family ul li a:after {content: "";display: block;width: 6px;height: 9px;position: absolute;right: 15px;top: 50%;margin-top: -5px;background: url("/2023/img/icon-slider-next-wh.png")no-repeat center center;background-size: cover;-moz-transform: rotate(90deg);}
.footer-aside {position: relative;display: flex;justify-content: space-between;padding-top: 2rem;}
.footer-aside:before {content: "";position: absolute;top: 0;right: -2.8rem;left: -2.8rem;border-top: .1rem solid hsla(0, 0%, 100%, .1);}
.footer-contact{display: flex;	flex-direction: row;margin-bottom: 0;}
.footer-contact {margin-right: .6rem;margin-bottom: 0;}
.footer-aside a {transition-property: all;transition-duration: .2s;transition-timing-function: cubic-bezier(.645, .045, .355, 1);width: -moz-fit-content;width: fit-content;text-decoration: underline;text-underline-offset: .2rem;}
.footer-contact span:last-child:before {content: "·";margin: 0 .2rem;}
.footer-policy {display: flex;gap: 2rem;}
.footer-contactLink {margin-right: .6rem;margin-bottom: 0;}
/*하단 수강료조회 바*/



.gnb-bottom {--sideW: 294px;--gap: 24px;position: fixed;bottom: 60px;z-index: 101;transform: translateX(-50%);width: min(773px, calc(100vw - var(--sideW) - var(--gap)));max-width: 57%; display: flex !important;
align-items: center;justify-content: space-between;padding: 0 20px;border-radius: 8px;background: #ffffff;box-shadow: 6px 8px 24px rgba(0, 0, 0, 0.15);left: calc(var(--sideW) + (100vw - var(--sideW)) / 2);height: 67px;}
.gnb-left {padding: 0 2%;height: 100%;display: flex;align-items: center;color: black;font-weight: 500;font-size: clamp(14px, 1.2vw, 18px);white-space: nowrap;}

.gnb-btn {display: flex;align-items: center;justify-content: center;border-radius: 7px;font-size: clamp(14px, 1.2vw, 18px);padding: 11px clamp(20px, 3vw, 38px);background: #ff6a3d;color: #ffffff;
font-weight: 600;text-decoration: none;transition: background 0.3s ease;}
.gnb-btn:hover {background: #e55a2d;}

.gnb-right {padding: 0 2%;height: 100%;display: flex;align-items: center;color: #fff;font-weight: 700;cursor: pointer;white-space: nowrap;}


.m-show {display:none;}
@media (max-width:1280px) {
.pc-show {display:none;}
.m-show {display:block;}
.main-banner.hero-banner .swiper-slide .pc-show {display:block;}
#curriTuition.m-show {display:none;}
}