@charset "UTF-8";
/* hanbom.com _ project _ name _ yymmdd */

/* reset */
@import url(lib/reset.css);
/* library */
@import url(lib/swiper.min.css);
@import url(lib/aos.css);
/* common css */
@import url(_font.css);
@import url(_colors.css?v=20231211);
@import url(_vars.css?v=20231211);
@import url(_button.css?v=20231211);
@import url(_form.css?v=20231211);
@import url(_layout.css?v=20240307);
@import url(_global.css?v=20240311);

/* .ma10 : 메인 */

/*  20250225 수정
	* 헤더 수정
	기존: 숨김처리
	변경: 로드 시 노출 및 로고 숨김 배경 투명색
*/
/*#header,
body.hide-header #header	{position: fixed; top: calc( -20 * var(--header)); left: 0; right: 0;}*/
#header {position: fixed; left: 0; right: 0;}
/*.home #nav > ul > li:nth-of-type(3)	{margin-left: 0;}*/
/*@media all and (min-width: 1281px) {*/
/*	.home #header h1{visibility: hidden; opacity: 0; z-index: -1;}*/
/*}*/
/* // 20250225 헤더 수정 */

#content.main{background-color: var(--bk-100);}
#content.main .intro {position: relative; background-color: var(--or-100);  z-index: 1;}
#content.main .intro-logo {height: 100vh;
	display: -webkit-flex; display: flex;
	-webkit-justify-content: center; justify-content: center;
	-webkit-align-items: center; align-items: center;
}
#content.main .intro-logo #logoPAKIDS	{width: 580px; height: 320px;}
#content.main .logo-area { display: flex; align-items: center; justify-self: center; height: 100vh;}
#content.main .intro .pa-kids {margin: 0 auto;}
#content.main .intro .intro-cont {min-height: 100vh; padding-top: 20vh}
#content.main .intro .title-wrap {text-align: center; transform: skewY(-11.65deg); padding-top: 30px;}
@media all and (min-width: 1281px) {
	#content.main .intro .pa-kids {width: 580px; height: 320px;}
}
@media all and (max-width: 1280px) {
	#content.main .intro .pa-kids {width: 260px; height: 143px;}
}

#content.main .intro-title {height: 360px; font-weight: 700; font-size: 180px; line-height: 1;}
#content.main .intro-title ,
#content.main .page-title {color: var(--bk-0);}
#content.main .intro-cont .text {font-weight: 500; font-size: 32px; color: var(--or-150);}
#content.main .intro-title + .page-title,
#content.main .intro-cont .text {margin-top: 35px;}
#content.main .intro .intro-cont .img-wrap {position: relative; width: 1000px; height: 1120px; background-color: var(--or-100); margin: 50px auto 0; z-index: -1;}
/* #content.main .intro .intro-cont .img-wrap.show {opacity: 1;} */
#content.main .intro .intro-cont .img-wrap img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
/* #content.main .intro .intro-cont .img-wrap .kid {opacity: 0; transition: opacity 0.3s;}
#content.main .intro .intro-cont .img-wrap.show .kid {opacity: 1;} */
#content.main .intro .intro-cont .img-wrap .line2 {z-index: -1;}
@media all and (max-width: 1280px) {
	#content.main .intro .intro-cont .img-wrap {width: 78.125vw; height: 87.500vw;}
}
@media all and (min-width: 961px) and (max-width: 1280px) {
	#content.main .intro-title {height: 285pxs; font-size: 140px;}
	#content.main .intro-cont .text {font-size: 26px;}
	#content.main .page-title {font-size: 48px;}
}
@media all and (max-width: 960px) {
	#content.main .intro-title {height: 32vw; font-size: 16vw;}
	#content.main .page-title {font-size: 28px;}
	#content.main .intro-cont .text {font-size: 20px;}

	/*  20250225 수정
		* 이미지 크기로 인한 가로 스크롤 생김 현상
		기존: width: 100vw;
		변경: width: 100%; + 메인페이지 overflow-x: hidden; 추가
	*/
	#content.main{overflow-x: hidden;}
	#content.main .intro .intro-cont .img-wrap {width: 100%; height:121.600vw}
}

@media all and (min-width: 961px) and (max-width: 1280px) {
	#content.main .msg-title {font-size: 40px;}
}
@media all and (max-width: 960px) {
	#content.main .msg-title {font-size: 32px;}
}

#content.main .bg-black {background-color: var(--bk-100);}
#content.main .bg-black .msg-title {color: #fff; text-align: center;}
#content.main .bg-box {overflow: hidden;}
#content.main .skew {position: absolute; top: 0; left: 0; width: 100%; height: 120vh; transform: skewY(-10deg); z-index: 1;}
#content.main .badges {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#content.main .badges > span,
#content.main .tag {display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; 
	-webkit-align-items: center; align-items: center;
	-webkit-justify-content: center; justify-content: center;
}
#content.main .badges > span {
	position: absolute; height: 52px; line-height: 52px; border-radius: 100px; box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.08); padding: 0 20px; opacity: 0;
}
#content.main .badges > span > em {font-weight: 600; font-size: 20px; opacity: 0; transition: 0.3s;}
#content.main .badges.show > span {animation: badge 0.3s cubic-bezier(0.65, 0.05, 0.36, 1) both; opacity: 1;}
#content.main .badges.show > span > em {animation: badgeText 0.3s ease-in-out both 0.3s; opacity: 1;}
#content.main .badges > .bg-mn {background-color: var(--mn-200); color: var(--bk-100);}
#content.main .badges > .bg-or {background-color: var(--or-100); color: #fff;}
#content.main .badges.show > span:nth-child(2) {animation-delay: 0.25s;}
#content.main .badges.show > span:nth-child(2) > em {animation-delay: 0.55s;}
#content.main .badges.show > span:nth-child(3) {animation-delay: 0.5s;}
#content.main .badges.show > span:nth-child(3) > em {animation-delay: 0.85s;}
#content.main .badges.show > span:nth-child(4) {animation-delay: 0.75s;}
#content.main .badges.show > span:nth-child(4) > em {animation-delay: 1.05s;}
@media all and (min-width: 961px) and (max-width: 1420px) {
	#content.main .badges > span {height: 46px; line-height: 46px; padding: 0 18px;}
	#content.main .badges > span > em  {font-size: 18px;}
}
@media all and (min-width: 769px) and (max-width: 960px) {
	#content.main .badges > span {height: 34px; line-height: 34px; padding: 0 10px;}
	#content.main .badges > span > em  {font-size: 14px;}
}
@media all and (max-width: 768px) {
	#content.main .badges {display: none;}
}
@keyframes badge {
	0% {transform: scale(0) translate(0,30px);}
	50% {transform: scale(1.2) translate(0,0px);}
	100% {transform: scale(1);}
}
@keyframes badgeText {
	0% {transform: scale(0);}
	50% {transform: scale(1.1);}
	100% {transform: scale(1);}
}

#content.main .section .title-wrap {position: relative;}
#content.main .section .title-wrap .section-title {font-size: 120px; line-height: 1.32; text-align: center;}
@media all and (min-width: 961px) and (max-width: 1420px) {
	#content.main .section .title-wrap .section-title {font-size: 100px;}
}
@media all and (min-width: 769px) and (max-width: 960px) {
	#content.main .section .title-wrap .section-title {font-size: 68px;}
}
@media all and (max-width: 768px) {
	#content.main .section .title-wrap .section-title {font-size: 40px;}
}
#content.main .content-wrap {margin-top: 320px;}
#content.main .content-wrap .msg-title + .text,
#content.main .content-wrap .msg-title + .pack-both {font-size: 20px; margin-top: 20px;}
#content.main .pack-down,
#content.main .visual-content [class*="pack-"] + [class*="pack-"] {margin-top: 80px;}
@media all and (min-width: 769px) and (max-width: 960px) {
	#content.main .content-wrap {margin-top: 220px;}
}
@media all and (max-width: 768px) {
	#content.main .content-wrap {margin-top: 150px;}
	#content.main .content-wrap .msg-title + .pack-both {font-size: 18px; margin-top: 16px;}
	#content.main .visual-content [class*="pack-"] + [class*="pack-"] {margin-top: 68px;}
}

#content.main .pakids-content {position: relative;}
#content.main .pakids-content .skew {height: 120vh; background-color: var(--bk-100);}
#content.main .triangle {position: fixed; width: 100%; opacity: 0;}
#content.main .triangle.top {top: 0 ;left: 0; }
#content.main .triangle.bottom {bottom: 0; right: 0; }
#content.main .triangle.hide {display: none;}
#content.main .triangle::before {content: ''; position: absolute; height: 0; color: var(--or-100); z-index: 1;
	transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
}
#content.main .triangle.top::before {top: 0px; left: 0; border-bottom: 163px solid; border-left: 895px solid rgba(0, 0, 0, 0); opacity: 0;}
#content.main .triangle.bottom::before {bottom: 0; right: 0; border-top: 163px solid; border-right: 895px solid rgba(0, 0, 0, 0);}
#content.main .triangle.show {opacity: 1; }
#content.main .triangle.show::before {opacity: 1;}
#content.main .triangle.zIndex {z-index: 1;}
@media all and (min-width: 961px) and (max-width: 1280px) {
	#content.main .triangle.top::before {border-bottom: 120px solid; border-left: 650px solid rgba(0, 0, 0, 0);}
	#content.main .triangle.bottom::before {border-top: 120px solid; border-right: 650px solid rgba(0, 0, 0, 0)}
}
@media all and (min-width: 769px) and (max-width: 960px) {
	#content.main .triangle.top::before {border-bottom: 100px solid; border-left: 420px solid rgba(0, 0, 0, 0);}
	#content.main .triangle.bottom::before {border-top: 100px solid; border-right: 420px solid rgba(0, 0, 0, 0)}
}
@media all and (max-width: 768px) {
	#content.main .triangle.top::before {border-bottom: 50px solid; border-left: 220px solid rgba(0, 0, 0, 0);}
	#content.main .triangle.bottom::before {border-top: 50px solid; border-right: 220px solid rgba(0, 0, 0, 0)}
}

#content.main .pakids-content .sections{background: var(--bk-100);}

#content.main .pakids-content .cont{
	position:absolute; width:100%; height:100vh;
}
#content.main .pakids-content .cont .max-wrap {display: -webkit-flex; display: flex;
	-webkit-align-items: center; align-items: center;
	-webkit-justify-content: center; justify-content: center;
	height: 100%;
}
#content.main .pakids-content .cont .title + .title {margin-top: 20px;}
#content.main .pakids-content .cont1 .msg-title {text-align: center;}
#content.main .pakids-content .cont2 {background: url('../images/visual/ma10_kisd01@2x.jpg') no-repeat 50% 50% / cover;}
#content.main .pakids-content .cont3 {background: url('../images/visual/ma10_kisd02@2x.jpg') no-repeat 50% 50% / cover;}
#content.main .pakids-content .cont2 .title ,
#content.main .pakids-content .cont3 .title {font-weight: 600; font-size: 28px;}
#content.main .pakids-content .cont3 .msg-title {font-size: 120px; text-align: center;}
#content.main .pakids-content .cont3 .mgs-title,
#content.main .pakids-content .cont3 .title-wrap {position: absolute; top: auto; left: auto;}
#content.main .pakids-content .cont3 .btn {position: relative; min-width: 280px; margin-top: 80px;}
@media all and (min-width: 961px) and (max-width: 1280px) {
	#content.main .pakids-content .cont3 .msg-title {font-size: 100px;}
}
@media all and (max-width: 960px) {
	#content.main .pakids-content .cont3 .msg-title {font-size: 68px;}
	#content.main .pakids-content .cont3 .btn {margin-top: 60px;}
}
@media all and (max-width: 768px) {
	#content.main .pakids-content .cont2 .title ,
	#content.main .pakids-content .cont3 .title {font-size: 20px;}
	#content.main .pakids-content .cont3 .btn {min-width: 200px; margin-top: 48px;}
	#content.main .pakids-content .cont2 .title-wrap,
	#content.main .pakids-content .cont3 .title-wrap {padding: 0 36px}
	#content.main .pakids-content .cont3 .msg-title {font-size: 64px;}
}

#content.main .competence {position: relative; z-index: 1; background-color: #fff; }
#content.main .competence .skew {background-color: #fff; height: 200vh;}
#content.main .competence .max-wrap {position: relative; z-index: 1;}
#content.main .competence .badges > span:nth-child(1) {top: -5px; left: 160px;}
#content.main .competence .badges > span:nth-child(2) {top: 50%; right: 77px; margin-top: -58px;}
#content.main .competence .badges > span:nth-child(3) {top: 50%; right: 77px; margin-top: 5px;}
#content.main .competence .badges .ico.emblem {position: absolute; bottom: 52px; left: 140px; width: 79px; height: 108px; background: url('../images/visual/ma10_emblem.svg') no-repeat 0 0 / cover; z-index: -1;}
#content.main .competence .content-wrap .pack-down {gap: var(--col-gap); --col-gap: 24px;}
#content.main .competence .bg-box {position: relative; padding: 0;}
#content.main .competence .bg-box .img-wrap {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#content.main .competence .bg-box .img-wrap,
#content.main .competence .bg-box .img-wrap img {height: 100%;}
#content.main .competence .bg-box .img-wrap img {object-fit: cover;}
#content.main .competence .bg-box .text-wrap {display: -webkit-flex; display: flex;
	-webkit-justify-content: center; justify-content: center;
	-webkit-flex-direction: column; flex-direction: column;
	position: relative; padding: 120px;
}
#content.main .competence .bg-box .msg-title > a {position: relative;}
#content.main .competence .bg-box .msg-title > a::after {content: ''; display: inline-block; width: 48px; height: 48px; background: url('../images/@uio/ico_chevron_white.svg') no-repeat 0 0 / cover; transform: rotate(-90deg); vertical-align: middle; margin-top: -5px;}
#content.main .competence .bg-box .msg-title > a,
#content.main .competence .bg-box dl dt {color: #fff;}
#content.main .competence .bg-box dl {margin-top: 8px;}
#content.main .competence .bg-box dl dt {font-weight: 700;}
#content.main .competence .bg-box dl dd {font-weight: 500; color: var(--bk-80); margin-top: 24px;}
#content.main .competence .tags {gap: 10px;
	display: -webkit-flex; display: flex;
	-ms-flex-wrap: wrap; flex-wrap: wrap;
	margin-top: 48px;
}
#content.main .competence .tag {height: 60px; background-color: rgba(255,255,255,0.2); border-radius: 50px; font-weight: 700; font-size: 16px; color: #fff; padding: 0 32px;}
@media all and (min-width: 961px) and (max-width: 1280px) {
	#content.main .competence .bg-box .text-wrap {padding: 100px;}
}
@media all and (min-width: 769px) and (max-width: 960px) {
	#content.main .competence .bg-box .text-wrap {padding: 80px;}
	#content.main .competence .badges > span:nth-child(1) {top: -12px; left: 135px;}
	#content.main .competence .badges > span:nth-child(2) {right: 85px; margin-top: -30px;}
	#content.main .competence .badges > span:nth-child(3) {right: 85px; margin-top: 10px;}
	#content.main .competence .badges .ico.emblem {bottom: 32px; left: 132px; width: 45px; height: 62px;}
}

/* #content.main .competence .skew, */
#content.main .teacher .skew,
#content.main .cs .skew {top: -20vh; height: 80vh;}

@media all and (min-width: 769px) {
	#content.main .competence,
	#content.main .teacher {padding-top: 160px; padding-bottom: 500px;}
	#content.main .cs  {padding-top: 100px;}
}
@media all and (max-width: 768px) {
	#content.main .competence,
	#content.main .teacher{padding-top: 40px; padding-bottom: 250px;}
	#content.main .cs {padding-top: 20px;}
} 

/* #content.main .competence,
	#content.main .teacher,
	#content.main .cs {padding-top: 0;}
@media all and (min-width: 769px) {
	#content.main .competence,
	#content.main .teacher,
	#content.main .cs  {padding-bottom: 500px;}
}
@media all and (max-width: 768px) {
	#content.main .competence,
	#content.main .teacher,
	#content.main .cs  {padding-bottom: 250px;}
} */
@media all and (max-width: 768px) {
	#content.main .competence .content-wrap .pack-down { --col-gap: 12px;}
	#content.main .competence .bg-box .text-wrap {padding: 80px 28px;}
	#content.main .competence .bg-box dl {margin-top: 4px;}
	#content.main .competence .bg-box dl dd {margin-top: 20px;}
	#content.main .competence .tags {gap: 4px; margin-top: 40px;}
	#content.main .competence .tag {height: 48px; font-size: 14px; padding: 0 24px;}
}

#content.main .teacher {position: relative; background-color: var(--mn-100);}
#content.main .teacher .skew {background-color: var(--mn-100);}
#content.main .teacher .title-wrap .section-title,
#content.main .teacher .msg-title {color: #fff;}
#content.main .teacher .badges > .bg-mn {background-color: #00b295; color: #fff;}
#content.main .teacher .badges > span:nth-child(1) {top: -60px; right: 88px;}
#content.main .teacher .badges > span:nth-child(2) {top: 0; right: 88px;}
#content.main .teacher .badges > span:nth-child(3) {bottom: 95px; left: 165px;}
#content.main .teacher > .section {position: relative; z-index: 1;}
#content.main .teacher .content-wrap .text {color: var(--mn-50);;}
#content.main .teacher .pack-both + .bg-box {margin-top: 24px;}
#content.main .teacher div.bg-box  {padding: 0;}
#content.main .teacher div.bg-box .section-title {font-size: 32px; color: #fff;}
#content.main .teacher div.bg-box .img-wrap {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#content.main .teacher div.bg-box .img-wrap,
#content.main .teacher div.bg-box .img-wrap img {height: 100%;}
#content.main .teacher div.bg-box .img-wrap img {object-fit: cover;}
#content.main .teacher div.bg-box .text-wrap {position: relative; width: 100%; height: 100%; padding: 95px 120px;}
#content.main .teacher div.bg-box .btn.bdr-black:not(:hover) {background-color: #fff; box-shadow: 0 0 0 0 #fff inset;}
#content.main .teacher .bg-box .text {font-weight: 500; color: var(--bk-80);}
@media all and (min-width: 961px) and (max-width: 1280px) {
	#content.main .teacher div.bg-box .text-wrap {padding: 80px 100px;}
}
@media all and (min-width: 769px) and (max-width: 960px) {
	#content.main .teacher div.bg-box .text-wrap {padding: 60px 80px;}
	#content.main .teacher div.bg-box .btn.bdr-black,
	#content.main .teacher  .content-wrap .msg-title + .pack-both > .btn {margin-top: 40px;}
}
@media all and (min-width: 961px) {
	#content.main .teacher div.bg-box .btn.bdr-black {position: absolute; top: 50%; right: 120px; transform: translate(0,-50%);}
}
@media all and (max-width: 960px) {
	#content.main .teacher  .content-wrap .msg-title + .pack-both {display: block;}
}
@media all and (max-width: 768px) {
	#content.main .teacher .pack-both + .bg-box {margin-top: 20px;}
	#content.main .teacher div.bg-box .section-title {font-size: 28px;}
	#content.main .teacher div.bg-box .text-wrap {padding: 64px 24px;}
	#content.main .teacher div.bg-box .btn.bdr-black,
	#content.main .teacher  .content-wrap .msg-title + .pack-both > .btn {margin-top: 24px;}
}
#content.main .teacher ul.pack-both .img-wrap					{max-width: 200px; margin-left: auto; margin-right: auto;}
#content.main .teacher ul.pack-both .bg-box.bg-gray				{padding: 40px 50px 72px; text-align: center;}
@media all and (max-width: 768px) {
	#content.main .teacher ul.pack-both								{--col-gap: 12px;}
	#content.main .teacher ul.pack-both .bg-box.bg-gray				{padding: 16px 44px 40px;}
	#content.main .teacher ul.pack-both .img-wrap					{max-width: 160px;}
}

#content.main .cs,
#content.main .cs > .section {position: relative;}
#content.main .cs .skew {background-color: #fff;}
#content.main .cs > .section {z-index: 1;}