@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap');
@import url('reset.css');
@import url('top_banner.css');

html {
	font-size: 62.5%;
}

@media screen and (min-width: 0\0) {
	/* IE 9, IE 10, IE 11 */
	:root,
	html {
		font-size: 10px;
	}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	/* IE 10, IE 11 */
	:root,
	html {
		font-size: 10px;
	}
}

html, body {
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans KR', sans-serif;
	color: #000;
}

a,
button,
.checkBox {
	cursor: pointer;
}

.clearfix::after {
	display: block;
	content: '';
	clear: both;
}

.hide {
	display: none;
}

.fadeOut {
	opacity: 0;
	transition: all 0.3s ease;
}

.show {
	display: block;
}

.engFont {
	font-family: 'Nunito Sans', sans-serif;
}

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.fade {
	opacity: 1;
	transition: all 0.3s ease;
}

.wrap {
	width: 100%;
}

.wrap h3 {
	font-size: 7rem;
	font-weight: 700;
	line-height: 1.3;
}

.wrap p {
	font-size: 2.5rem;
	font-weight: 400;
	line-height: 1.5;
}

.wrap a,
.wrap button {
	font-family: 'Noto Sans KR', sans-serif;
}

.inner {
	margin: 0 auto;
	padding: 0 24px;
	max-width: 1440px;
}

/* form */
.formWrap input[type="checkbox"] {
	display: none;
}

.formWrap input::placeholder,
.formWrap textarea::placeholder {
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 5rem;
	color: #999;
}

.formWrap label .btnTxt {
	display: flex;
}

.formWrap .btnTxt {
	font-size: 1.3rem;
	color: #999;
}

.formWrap .inputTxt {
	padding: 0 15px;
	text-align: left;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 5rem;
	color: #000;
	border: 1px solid #dbdbdb;
}

.formWrap .checkBox .title {
	font-size: 14px;
	font-weight: normal;
}

.formWrap .checkBox .inputCheck + .btnTxt::before {
	display: block;
	content: '';
	margin-right: 5px;
	width: 20px;
	height: 20px;
	background: url(/img/main/icon_inputCheck.png) no-repeat center center/ 20px auto;
	border: solid 1px #dbdbdb;
}

.formWrap .checkBox .inputCheck:checked + .btnTxt::before {
	display: block;
	content: '';
	width: 20px;
	height: 20px;
	background: #ffcc33 url(/img/main/icon_inputCheck_b.png) no-repeat center center/ 20px auto;
	border: 0;
}

.formWrap .btnMainForm {
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 5.5rem;
	color: #fff;
	background: #000;
}

.formWrap .btnTxtHighlight {
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: underline;
}

/* 헤더 */
header {
	position: fixed;
	top: 45px;
	padding: 25px 0;
	width: 100%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
	z-index: 10;
}

header a,
header .nav01 .utilWrap li.utilLoginout a:first-child::after,
header button {
	color: #fff;
	line-height: 1;
	transition: all 0.3 ease;
}

header .logo {
	float: left;
	width: 94px;
	height: 5rem;
	background: url(/img/main/logo_w.svg) no-repeat 0 center/94px auto;
}

header .logo a {
	display: block;
	height: 100%;
}

header .logo a span {
	position: absolute !important;
	overflow: hidden;
	height: 1px;
	width: 1px;
	clip: rect(1px, 1px, 1px, 1px);
}

header .gnbWrap,
header .nav01,
header .nav02 {
	float: right;
}

header .nav01,
header .nav02 {
	padding: 15px 0;
}

header .nav01 .submenuWrap,
header .nav01 .utilWrap,
header .nav01 .btnSchool,
header .nav01 .submenuWrap li,
header .nav01 .utilWrap li,
header .nav02 .menuWrap li {
	float: left;
}

header .nav01 > div {
	position: relative;
	padding: 0 30px;
}

header .nav01 > div::after {
	display: block;
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 1px;
	height: 1rem;
	background-color: rgba(255, 255, 255, .3);
}

header .nav01 li {
	margin-right: 15px;
}

header .nav01 li:last-child {
	margin-right: 0
}

header .nav01 a,
header .nav01 .utilWrap li.utilLoginout a:first-child::after,
header .nav01 button {
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 2rem;
}

header .nav01 .utilWrap li a:first-child,
header .nav01 button {
	padding-left: 25px;
	background-size: 20px auto;
	background-repeat: no-repeat;
	background-position: 0 center;
}

header .nav01 .utilWrap li.utilLoginout a:first-child {
	position: relative;
	padding-right: 5px;
	background-image: url(/img/main/icon_gnb_loginout.png);
	transition: all 0.1s ease;
}

header .nav01 .utilWrap li.utilLoginout a:first-child::after {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	content: '\002F';
}

header .nav01 .utilWrap li.utilLoginout a:last-child {
	padding-left: 0px;
}

header .nav01 .utilWrap li.utilMypage a {
	background-image: url(/img/main/icon_gnb_mypage.png);
	transition: all 0.1s ease;
}

header .nav01 .utilWrap li.utilHelp a {
	background-image: url(/img/main/icon_gnb_help.png);
	transition: all 0.1s ease;
}

header .nav01 button {
	margin-left: 30px;
	background-image: url(/img/main/icon_gnb_school.png);
	transition: all 0.1s ease;
}

header .nav01 button.on {
	background-image: url(/img/main/icon_gnb_school_y.png);
	color: #ffcc33;
}

header .nav02 {
	clear: both;
}

header .nav02 li {
	margin: 0 20px;
}

header .nav02 li:last-child {
	margin-right: 0;
}

header .nav02 a {
	font-size: 2rem;
	font-weight: 400;
}

/* 스크롤 작동 시 적용 */
header.bgOrg {
	top: 0;
	background: transparent;
	transition: all 0.1s ease;
}

header.bgChange {
	top: 0;
	background: rgba(255, 255, 255, 1);
	transition: all 0.1s ease;
}

header.bgChange a,
header.bgChange .nav01 .utilWrap li.utilLoginout a:first-child::after,
header.bgChange button {
	color: #000;
	transition: all 0.3 ease;
}

header.bgChange .logo {
	background: url(/img/main/logo_b.svg) no-repeat 0 center/94px auto;
}

header.bgChange .nav01 > div::after {
	background-color: rgba(0, 0, 0, .3);
}

header.bgChange .nav01 .utilWrap li.utilLoginout a:first-child {
	background-image: url(/img/main/icon_gnb_loginout_b.png);
}

header.bgChange .nav01 .utilWrap li.utilMypage a {
	background-image: url(/img/main/icon_gnb_mypage_b.png);
}

header.bgChange .nav01 .utilWrap li.utilHelp a {
	background-image: url(/img/main/icon_gnb_help_b.png);
}

header.bgChange .nav01 button {
	background-image: url(/img/main/icon_gnb_school_b.png);
}

header.bgChange .nav01 button.on {
	background-image: url(/img/main/icon_gnb_school_y.png);
}

/* gsap-ScrollTrigger */
#main .pin-spacer {
	width: 100% !important;
	overflow-x: hidden !important;
}

/* 콘텐츠 */
section {
	/* margin-bottom: 200px; */
	text-align: center;
}

.fullscreenWrap {
	overflow: hidden;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100vh;
}

.btnMain {
	width: 330px;
	font-size: 2rem;
	font-weight: 500;
	line-height: 7rem;
	color: #fff;
	background-color: rgba(0, 0, 0, .3);
	border: 1px solid #fff;
	transition: all 0.3s ease;
}

.video {
	width: 100%;
}

.video-container {
	position: relative;
	width: 100%;
	height: auto;
	padding-top: 56.25%;
}

.video iframe {
	z-index: 1;
	top: 0;
	left: 0;
	position: absolute;
	width: 100%;
	height: 100%;
}



/* Visual */
#visualWrap {
	position: relative;
	overflow: hidden;
	color: #fff;
	background-color: #000;
}

#visualWrap video {
	height: 100%;
	width: 100%;
	object-fit: cover;
	opacity: 0.4;
}

#visualWrap .inner p {
	margin: 40px 0;
}



/* Intro */

:root {
	--mid4_Height : 100vh;  /* 섹션 스크롤모션 범위기준 */
}

/* 메인 */
#introWrap .pin-spacer {
	overflow: hidden;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	width: 100%;
	height: 100vh;
}

#introWrap {
	overflow: hidden;
	position: relative;
	width: 100%;
	height:var(--mid4_Height);
}

#introWrap .articleWrap {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	width: 100%;
	height: 100%;
}

#introWrap article {
	opacity: 0;
	transition: all 0.2s ease;
}

#introWrap .inner {
	margin: 0 auto;
	padding: 0 24px;
	max-width: 1440px;
}

#introWrap .center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	text-align: center;
}

#introWrap p,
#introWrap span {
	font-size: 4rem;
	font-weight: 300;
	line-height: 1.5;
	color: #000;
}

#introWrap span {
	opacity: 0.45;
}

#introWrap .scene1 img {
	width: 142px;
}

#introWrap .scene3 {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
}

#introWrap .scene3 img {
	width: 51px;
}

#introWrap .scene6 img {
	width: 616px;
}

#introWrap .bgChange {
	background-color: #ffcc33;
}

/*
:root {
	--introWrap_Height : 100vh;
}

.introWrap {
	height:var(--introWrap_Height);
	background-color: #fff;
	transition: all 0.3s ease;
}

.introWrap .contWrap {
	display:flex;
	position: relative;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}

.introWrap .inner {
	opacity: 0;
	transition: all 0.3s ease;
}

.introWrap p,
.introWrap span {
	font-size: 4rem;
	font-weight: 300;
	line-height: 1.5;
	color: #000;
}

.introWrap span {
	opacity: 0.45;
}

.introWrap .scene1 img {
	width: 142px;
}

.introWrap .scene3 {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
}

.introWrap .scene3 img {
	width: 51px;
}

.introWrap .scene6 img {
	width: 616px;
}

.introWrap .bgChange {
	background-color: #ffcc33;
}
*/



/* Value  */
#valueWrap, #reviewWrap, #curriculumWrap {
	padding-bottom: 200px;
}

#valueWrap.fullscreenWrap {
	margin: 0 0 200px;
}

#valueWrap li {
	position: relative;
	margin-bottom: 100px;
}

#valueWrap li:last-child {
	margin-bottom: 0;
}

#valueWrap .img,
#valueWrap .txt {
	width: 50%;
}

#valueWrap li:nth-child(2n-1) .img {
	float: left;
}

#valueWrap li:nth-child(2n) .img {
	float: right;
}

#valueWrap .img {
	position: relative;
	height: 0;
	overflow: hidden;
	padding-bottom: 37.5%;
}

#valueWrap .img span {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#valueWrap .value1 .img span {
	background: url(/img/main/img_value01.png) no-repeat left top/ 100% auto;
}

#valueWrap .value2 .img span {
	background: url(/img/main/img_value02.png) no-repeat left top/ 100% auto;
}

#valueWrap .value3 .img span {
	background: url(/img/main/img_value03.png) no-repeat left top/ 100% auto;
}

#valueWrap .txt {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

#valueWrap li:nth-child(2n-1) .txt {
	right: 0;
	padding-left: 80px;
}

#valueWrap li:nth-child(2n) .txt {
	left: 0;
	padding-right: 80px;
}

#valueWrap .txt p {
	padding: 20px 0;
	text-align: left;
	font-weight: 300;
}

#valueWrap .txt p strong {
	font-size: 4rem;
	font-weight: 700;
	line-height: 1.3;
}



/* Review */
#reviewWrap {
	overflow-x: hidden;
}

#reviewWrap h4 {
	margin-bottom: 65px;
	font-size: 7rem;
	font-weight: 700;
	line-height: 1.3;
}

#reviewTab {
	position: relative;
	margin-bottom: 25px;
	box-sizing: border-box;
}

#reviewTab .swiper-slide {
	/* padding: 0 20px; */
	width: auto;
}

#reviewTab .swiper-slide:first-child {
	padding-left: 0;
}

#reviewTab .swiper-slide:last-child {
	padding-right: 0;
}

#reviewTab .swiper-slide a {
	display: block;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 4rem;
	opacity: 0.3;
	transition: all 0.3s ease;
}

#reviewTab .swiper-slide a.on {
	opacity: 1;
}

#reviewTab .swiper-slide a.on::after {
	display: block;
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: #000;
	animation: fadeInWidth 0.3s linear both;
	/* animation-delay: 1.5s; */
}

.reviewTab__next,
.reviewTab__prev {
	position: absolute;
	top: 0;
	width: 30px;
	height: calc(100% - 1px);
	font-size: 0;
	z-index: 100;
}

.reviewTab__next.swiper-button-disabled,
.reviewTab__prev.swiper-button-disabled {
	display: none;
}

.reviewTab__next {
	right: 0;
}

.reviewTab__prev {
	left: 0;
}

#reviewCont {
	overflow: visible;
	width: 100%;
	height: auto;
}

#reviewWrap .swiper-wrapper {
	height: auto;
}

#reviewCont .swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 24px;
	width: calc((100% - 48px) / 3);
	text-align: center;
	font-size: 18px;
	background: #fff;
	opacity: 0.3;
	transition: opacity 0.3s;
}

#reviewCont .txt {
	padding: 40px;
	text-align: left;
	border: 1px solid #e9e9e9;
	box-shadow: none;
	transition: all 0.3s ease;
}

#reviewCont .txt::after {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	content: '';
	font-size: 4rem;
	font-weight: 400;
	color: #000;
	background: transparent;
	transition: all 0.3s ease;
}

#reviewCont .txt p {
	max-height: 164px;
	font-size: 2rem;
	font-weight: 300;
	line-height: 1.7;
	overflow: hidden;
}

#reviewCont .txt p:first-child {
	margin-bottom: 30px;
	height: 70px;
}

#reviewCont .txt p strong {
	font-size: 2.5rem;
	font-weight: 400;
	line-height: 1.3;
}

.reviewCont__next.swiper-button-disabled,
.reviewCont__prev.swiper-button-disabled {
	display: none;
}



/* Curriculum */
#curriculumWrap {
	overflow-x : hidden;
}

#curriculumWrap h4 {
	font-size: 7rem;
	font-weight: 700;
	line-height: 1.3;
}

#curriculumWrap .inner>p {
	margin: 40px auto 50px;
	font-size: 2.5rem;
	font-weight: 300;
}

#curriculumWrap .tabWrap {
	display: grid;
	justify-items: center;
}

#curriculumWrap .tabWrap li {
	float: left;
	padding: 30px 20px;
}

#curriculumWrap .tabWrap button {
	position: relative;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 4rem;
	opacity: 0.3;
	transition: all 0.3s ease;
}

#curriculumWrap .tabWrap button.focus {
	opacity: 1;
}

#curriculumWrap .tabWrap button.focus::after {
	display: block;
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: #000;
	animation: fadeInWidth 0.3s linear both;
	/* animation-delay: 1.5s; */
}

#videoCont {
	overflow: visible;
	width: 100%;
	height: auto;
}

#videoCont .swiper {
	width: 100%;
	height: auto;
}

#videoCont .swiper-wrapper {
	height: auto;
}

#videoCont .swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
	/* margin: 0 24px 0 0; */
	/* width: calc((100% - 48px) / 3); */
	/* width: 684px; */
	max-width: 684px;
	opacity: 0.3;
	transition: opacity 0.3s;
}

#videoCont .video {
	position: relative;
	box-shadow: none;
	transition: all 0.3s ease;
}

#videoCont .video::before {
	display: block;
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .3);
}

#videoCont .video img {
	box-shadow: none;
	transition: all 0.3s ease;
}

#videoCont .video .btnModal {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	width: 92px;
	height: 92px;
	text-indent: -99999px;
	background: url(/img/main/icon_play.png) no-repeat center center/ 92px auto;
}



/* Strength */
#strengthWrap {
	text-align: left;
	background-color: #ffcc33;
}

#strengthWrap .inner {
	position: relative;
}

#strengthWrap h4,
#strengthWrap .contWrap {
	width: calc(50% - 12px);
}

#strengthWrap h4 {
	margin-top: 200px;
	font-size: 7rem;
	font-weight: 700;
	line-height: 1.3;
	width: 100%;
}

#strengthWrap #sticky{
	display: flex;
	background-color: #ffcc33;
}

#strengthWrap .aside,
#strengthWrap .section{
	flex-grow: 1;
	height: auto;
}

#strengthWrap .aside {
	width: 50%;
}

#strengthWrap .section {
	width: calc(50% - 12px);
}

#strengthWrap .notSticky_box{
	height: 400px;
	display: none;
}

#strengthWrap .sticky_box{
	position: sticky;
	height: 100vh;
	top: 200px;
}

#strengthWrap #sticky .section li {
	margin-bottom: 60px;
}

#strengthWrap #sticky .section li:last-child {
	margin-bottom: 0;
}

#strengthWrap #sticky .section .visual {
	position: relative;
	width: 100%;
	height: auto;
	padding-top: 56.25%;
}

#strengthWrap #sticky .section .strength1 .visual {
	background: url(/img/main/img_strength01.png) no-repeat center top/ 100% auto;
}

#strengthWrap #sticky .section .strength2 .visual {
	background: url(/img/main/img_strength02.gif) no-repeat center top/ 100% auto;
}

#strengthWrap #sticky .section .strength3 .visual {
	background: url(/img/main/img_strength03.png) no-repeat left center/ 100% auto;
}

#strengthWrap #sticky .section .strength4 .visual {
	background: url(/img/main/img_strength04.png) no-repeat center top/ 100% auto;
}

#strengthWrap #sticky .section .strength5 .visual {
	background: url(/img/main/img_strength05.png) no-repeat left top/ 100% auto;
}

#strengthWrap #sticky .section .txt {
	padding: 60px 50px;
	background-color: #fff;
}

#strengthWrap #sticky .section .txt p:first-child {
	margin-bottom: 40px;
}

#strengthWrap #sticky .section .txt p {
	font-size: 2.5rem;
	font-weight: 300;
	line-height: 1.5;
}

#strengthWrap #sticky .section .txt p strong {
	font-size: 4rem;
	font-weight: 500;
	line-height: 1.3;
}


/* figureWrap */

#figureWrap {padding: 200px 0 50px;}
#figureWrap .opacity0 {opacity: 0;}
#figureWrap h4 {margin-bottom: 200px;}


#figureWrap {
	position: relative;
	padding: 200px 0;
	color: #fff;
	background-color: #000;
}

#figureWrap::after {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 100%;
	background-color: rgba(255, 255, 255,.1);
}

#figureWrap h4 {
	position: sticky;
	top: 150px;
	margin-bottom: 300px;
	font-size: 7rem;
	font-weight: 700;
	line-height: 1.3;
}

#figureWrap h4 strong {
	color: #000;
	text-shadow: -1px 0px #fff, 0px 1px #fff, 1px 0px #fff, 0px -1px #fff;
}

#figureWrap .contWrap {
	position: relative;
}

#figureWrap .contWrap li {
	margin-bottom: 150px;
	transition: all 0.3s ease;
}

#figureWrap .contWrap li:last-child {
	margin-bottom: 0;
}

#figureWrap .contWrap p {
	font-size: 2rem;
	font-weight: 300;
	line-height: 1.3;
}

#figureWrap .contWrap p:first-child {
	margin-bottom: 15px;
}

#figureWrap .contWrap p strong {
	font-size: 10rem;
	font-weight: 900;
}



/* awardsWrap */
#awardsWrap {
	margin: 0;
	padding: 100px 0;
	background-color: #fff;
}

#awardsWrap li {
	float: left;
	margin: 0 50px;
}

#awardsWrap span {
	display: inline-block;
	text-indent: -99999px;
	line-height: 101px;
}

#awardsWrap .winner1 {
	width: 126px;
	background: url(/img/main/logo_techlearning.png) no-repeat center top/ 126px 101px;
}

#awardsWrap .winner2 {
	width: 73px;
	background: url(/img/main/logo_edtech.png) no-repeat center top/ 73px 101px;
}

#awardsWrap .winner3 {
	width: 202px;
	background: url(/img/main/logo_codie_2021.png) no-repeat center top/ 202px 59px;
}

#awardsWrap .winner4 {
	width: 99px;
	background: url(/img/main/logo_stevie.png) no-repeat center top/ 99px 101px;
}

#awardsWrap .winner5 {
	width: 236px;
	background: url(/img/main/logo_bessie.png) no-repeat center top/ 236px 101px;
}

#awardsWrap .winner6 {
	width: 100px;
	background: url(/img/main/logo_edvocate.png) no-repeat center top/ 100px 101px;
}

#awardsWrap .winner7 {
	width: 202px;
	background: url(/img/main/logo_codie_2022.png) no-repeat center top/ 202px 59px;
}

#awardsWrap .winner8 {
	width: 100px;
	background: url(/img/main/logo_techlearning_2024.png) no-repeat center top/ 100px 101px;
}

#awardsWrap .container{
	display: flex;
	justify-content: center;
	align-items: center;
}

#awardsWrap .rollingbanner{
	width: 100%;
	height: 101px;
}

#awardsWrap .rollingbanner > .wrap{
	position: relative;
	height: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	overflow: hidden;
}

#awardsWrap .roller{
	position: absolute;
	height: 100%;
}

#awardsWrap .roller > ul{
	margin: 0;
	list-style: none;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}

/* bannerWrap */
.bannerWrap {
	margin: 0;
	padding: 170px 0 200px;
	background: url(/img/main/img_banner.png) no-repeat center center/ 2000px auto;
}

.bannerWrap p {
	margin: 30px auto;
	font-weight: 300;
	line-height: 1.3;
	color: #fff;
}

.bannerWrap p strong {
	font-size: 5rem;
	font-weight: 700;
}

.bannerWrap button {
	margin-top: 10px;
}



/* footer */
footer {
	padding: 82px 0 90px;
	background-color: #111;
}

footer li {
	float: left;
	font-size: 1.4rem;
	color: #fff;
}

footer .logoWrap {
	float: left;
}

footer .logoWrap li {
	margin-right: 20px;
	padding: 0 20px;
	height: 56px;
	text-indent: -99999px;
}

footer .logoWrap .useschool {
	width: 94px;
	background: url(/img/main/logo_w.svg) no-repeat 0 center/94px auto;
}

footer .logoWrap .kb {
	width: 50px;
	background: url(/img/main/logo_kb.png) no-repeat 0 center/50px auto;
}

footer .logoWrap .kbhf {
	width: 44.5px;
	background: url(/img/main/logo_KBHF.png) no-repeat 0 center/44.5px auto;
}

footer .contWrap {
	float: right;
	width: 1038px;
}

footer .policyWrap,
footer .snsWrap {
	float: left;
}

footer .fsiteWrap {
	float: right;
}

footer .policyWrap li,
footer .infoWrap li {
	position: relative;
	padding: 0 20px;
}

footer .policyWrap li::after,
footer .infoWrap li::after {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	content: '';
	width: 1px;
	height: 12px;
	background-color: #333;
}

footer .policyWrap li a {
	line-height: 5.6rem;
}

footer .snsWrap {
	padding: 0 10px;
}

footer .snsWrap li {
	margin: 0 10px;
	padding: 17px 0;
	width: 22px;
}

footer .snsWrap .cafe {
	background: url(/img/main/icon_info_cafe.png) no-repeat 0 center/22px auto;
}

footer .snsWrap .instagram {
	background: url(/img/main/icon_info_instagram.png) no-repeat 0 center/22px auto;
}

footer .snsWrap .kakaotalk {
	background: url(/img/main/icon_info_kakao.png) no-repeat 0 center/22px auto;
}

footer .snsWrap .youtube {
	background: url(/img/main/icon_info_youtube.png) no-repeat 0 center/22px auto;
}

footer .snsWrap .blog {
	background: url(/img/main/icon_info_nblog.png) no-repeat 0 center/22px auto;
}

footer .snsWrap a {
	display: block;
	text-indent: -99999px;
	line-height: 2.2rem;
}

footer .snsWrap a {
	display: block;
	text-indent: -99999px;
	line-height: 22px;
}

footer .fsiteWrap {
	padding: 8px 0;
}

footer .fsiteWrap .nice-select {
	width: 200px;
	height: 40px;
	line-height: 3.8rem;
	color: #fff;
	background-color: transparent;
	border: solid 1px #999;
	border-radius: 0;
}

footer .fsiteWrap .nice-select span {
	font-family: 'Nunito Sans', sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: #fff;
}

footer .fsiteWrap .nice-select .list {
	top: -84px;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 0;
	width: calc(100% + 2px);
	background-color: #666;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

footer .fsiteWrap .nice-select .option {
	width: 100%;
}

footer .fsiteWrap .nice-select .option.selected {
	font-weight: 400;
}

footer .fsiteWrap .nice-select .option.focus,
footer .fsiteWrap .nice-select .option.selected.focus {
	background-color: #555;
}

footer .infoWrap {
	float: right;
	clear: both;
	margin-top: 10px;
}

footer .infoWrap li {
	line-height: 3rem;
	color: #999;
}

footer .infoWrap li:last-child::after {
	display: none;
}



/* slide */
#reviewCont .swiper-pagination-bullet-active,
#videoCont .swiper-pagination-bullet-active {
	background: #000;
}

.swiper-slide:last-child {
	margin-right: 24px;
}

#reviewCont .swiper-slide-active,
#videoCont .swiper-slide-active,
#reviewCont .swiper-slide-active + .swiper-slide,
#videoCont .swiper-slide-active + .swiper-slide,
#reviewCont .swiper-slide-active + .swiper-slide + .swiper-slide,
#videoCont .swiper-slide-active + .swiper-slide + .swiper-slide,
#reviewCont .swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide,
#videoCont .swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide {
	opacity: 1;
}

.swiper-scrollbar_wrap {
	position: relative;
}

#reviewCont .swiper-scrollbar, 
#videoCont .swiper-scrollbar,
#reviewCont .swiper-scrollbar-drag,
#videoCont .swiper-scrollbar-drag {
	border-radius: 0;
}

#reviewCont .swiper-scrollbar-drag,
#videoCont .swiper-scrollbar-drag {
	background: var(--swiper-scrollbar-drag-bg-color, #000);
}

#reviewCont .swiper-horizontal>.swiper-scrollbar,
#videoCont .swiper-horizontal>.swiper-scrollbar,
#reviewCont .swiper-scrollbar.swiper-scrollbar-horizontal,
#videoCont .swiper-scrollbar.swiper-scrollbar-horizontal {
	bottom: var(--swiper-scrollbar-bottom, -50px);
	height: var(--swiper-scrollbar-size, 10px);
}


#popup_modal {
	display: none;
}

#popup_modal.show {
	display: block;
}
#popup_modal .modalWrap {
	position: absolute;
	left: 0%;
	top: 50%;
	transform: translate(0%, -50%);
	background: #fff;
	text-align: center;
}


/* modal */
#modal {
	z-index: 100;
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.75);
}

#modal.show {
	display: block;
}

.modalWrap {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	text-align: center;
}

.modalCont {
	position: relative;
}

.modalCont.curriculum {
	width: 684px;
}

.modalWrap .btnClose {
	position: absolute;
	width: 20px;
	height: 20px;
	text-indent: -99999px;
	background: url(/img/main/icon_btnClose.png) no-repeat 0 center/20px auto;
}

/* modal : 로그인 */
#modalLogin .modalCont {
	padding: 50px 59px;
}

#modalLogin .formWrap {
	display: flex;
	flex-direction: column;
}

#modalLogin .formWrap .title {
	margin-bottom: 30px;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
}

#modalLogin .formWrap .inputTxt {
	margin-bottom: 15px;
	width: 330px;
}

#modalLogin .formWrap .saveIdWrap {
	float: left;
}

#modalLogin .formWrap .findAccountWrap {
	float: right;
}

#modalLogin .formWrap .findAccountWrap a {
	position: relative;
	padding: 10px;
}

#modalLogin .formWrap .findAccountWrap a:first-child::after {
	display: block;
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 10px;
	background: #dbdbdb;
}

#modalLogin .formWrap .findAccountWrap a:last-child {
	padding-right: 0;
}

#modalLogin .formWrap .btnMainForm {
	margin-top: 30px;
}

#modalLogin .formWrap .btnTxtHighlight {
	margin: 15px auto 0;
	width: fit-content;
}

#modalLogin .btnClose {
	top: -40px;
	right: 0;
}

/* modal: 커리큘럼 학습샘플 */
#modalcurriculum .btnClose {
	top: -40px;
	right: 0;
}

/* modal: 공지사항 */
#modalNotice {
	width: 448px;
	background: #111;
}

#modalNotice .modalCont {
	width: 100%;
	aspect-ratio: 3/4;
}

#modalNotice .pageWrap {
	display:none;
	position: absolute;
	left: 20px;
	bottom: 65px;
}

#modalNotice .pageWrap span {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.5rem;
	color: rgba(225, 225, 225, .6);
}

#modalNotice .pageWrap span strong {
	color: rgba(225, 225, 225, 1);
}

#modalNotice .btnWrapClose {
	padding: 0 20px;
	background: #000;
}

#modalNotice .btnWrapClose li:first-child {
	float: left;
}

#modalNotice .btnWrapClose li:last-child {
	float: right;
}

#modalNotice .btnWrapClose a {
	font-size: 1.4rem;
	line-height: 4.5rem;
	color: #fff;
}

#modalNotice .btnWrapClose .btnClose {
	position: initial;
	width: auto;
	height: auto;
	text-indent: 0;
	background: none;
}

#modalNotice .btnWrapTurn .btnTurn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 39px;
	height: 39px;
	text-indent: -99999px;
	border-radius: 39px;
}

#modalNotice .btnWrapTurn .btnTurn.btnPrev {
	left: -69px;
	background: rgba(255, 255, 255, .15) url(/img/main/icon_prev.png) no-repeat 0 center/39px auto;
}

#modalNotice .btnWrapTurn .btnTurn.btnNext {
	right: -69px;
	background: rgba(255, 255, 255, .15) url(/img/main/icon_next.png) no-repeat 0 center/39px auto;
}

#modalNotice .slideWrap .slideCont .slideItem {
	overflow: hidden;
}

#modalNotice .slideWrap .slideCont .slideItem img {
	width: 100%;
}

#modalNotice .slideWrap .slideCont .slideItem a {
	display: block;
}

#modalNotice .slideWrap .slideCont .slideItem a img {
	display: block;
	margin: 0 auto;
	/* width: 100%; */
	width: 448px;
	height: 597px;
}

#modalNotice .slideWrap .slideCont .slick-dots {
	position: absolute;
	bottom: 10px;
	width: 100%;
	line-height: 40px;
}

#modalNotice .slideWrap .slideCont .slick-dots li + li {
	margin-left: 1.0vw;
}

#modalNotice .slideWrap .slideCont .slick-dots li.slick-active button {
	width: 2rem;
	background: #000;
	border-radius: 1.1rem;
	opacity: 1;
}

#modalNotice .slideWrap .slideCont .slick-dots li button {
	width: 1rem;
	height: 1rem;
	background: #000; 
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 100%;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	opacity: 0.3;
}

#modalNotice .slick-slider * {
	outline: none;
}

#modalNotice .slick-dots {
	text-align: center;
	font-size: 0;
}

#modalNotice .slick-dots li {
	display: inline-block;
	vertical-align: middle;
}

#modalNotice .slick-dots li + li {
	margin-left: 10px;
}

#modalNotice .slick-dots li button {
	display: block;
	padding: 0;
	width: 10px;
	height: 10px;
	text-indent: -9999px;
	background: transparent;
	box-sizing: border-box;
	border: 1px solid #ffcd00;
	border-radius: 100%;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	-webkit-box-sizing: border-box;
	outline: none;
	/* cursor: pointer; */
	overflow: hidden;
	-webkit-transition: 0.2s ease;
	transition: 0.2s ease;
}

#modalNotice .slick-dots li.slick-active button {
	background: #ffcd00;
}



/* 애니메이션  */
@keyframes fadeInWidth{
	0%{
		width: 0%;
	}

	100%{
		width: 100%;
	}
}



/* hover 액션  */
@media (hover: hover) {
	header a:hover,
	header button:hover {
		color: #ffcc33;
		transition: all 0.1s ease;
	}

	header .nav01 .utilWrap li.utilLoginout a:first-child:hover {
		background-image: url(/img/main/icon_gnb_loginout_y.png);
		transition: all 0.1s ease;
	}

	header .nav01 .utilWrap li.utilMypage a:hover {
		background-image: url(/img/main/icon_gnb_mypage_y.png);
		transition: all 0.1s ease;
	}

	header .nav01 .utilWrap li.utilHelp a:hover {
		background-image: url(/img/main/icon_gnb_help_y.png);
		transition: all 0.1s ease;
	}

	header .nav01 button:hover {
		background-image: url(/img/main/icon_gnb_school_y.png);
		transition: all 0.1s ease;
	}

	.btnMain:hover {
		color: #000;
		background-color: #fff;
		transition: all 0.3s ease;
	}
	
	#reviewTab .swiper-slide a:hover {
		opacity: 1;
		transition: all 0.3s ease;
	}

	#reviewCont .txt:hover {
		box-shadow: 0 0 30px #e9e9e9;
		transition: all 0.3s ease;
	}

	#reviewCont .txt:hover::after {
		content: '\002B';
		background: rgba(255, 255, 255, .75);
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		transition: all 0.3s ease;
	}

	#curriculumWrap .tabWrap button:hover {
		opacity: 1;
		transition: all 0.3s ease;
	}

	#videoCont .video:hover img {
		box-shadow: 0 0 30px #e9e9e9;
		transition: all 0.3s ease;
	}

	footer .fsiteWrap .nice-select .option:hover {
		background-color: #555;
	}
}



/* 노트북 & PC (해상도 1024px)*/ 
@media all and (min-width:1025px) {

} 

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/ 
@media all and (min-width:768px) and (max-width:1024px) {
	#figureWrap .contWrap p strong {
		font-size: 8rem;
	}

	.wrap h3, 
	#reviewWrap h4,
	#curriculumWrap h4,
	#strengthWrap h4,
	#figureWrap h4 {
		font-size: 6rem;
	}
	
	#strengthWrap #sticky .section .txt p strong {
		font-size: 3rem;
	}

	.wrap p, 
	#reviewTab .swiper-slide a,
	#reviewCont .txt p strong,
	#curriculumWrap .inner>p,
	#curriculumWrap .tabWrap button,
	#strengthWrap #sticky .section .txt p {
		font-size: 2.2rem;
	}

	#reviewCont .txt p {
		font-size: 1.8rem;
		line-height: 1.5;
		max-height: 190px;
	}

	#reviewCont .txt p:first-child {
		height: 65px;
	}

	#videoCont .swiper-slide {
		max-width: 480px;
	}
	
	footer .logoWrap {
		margin: 0 0 20px 20px;
	}

	footer .contWrap {
		width: 100%;
	}

	#modalNotice {
		width: 360px;
	}
	#modalNotice .slideWrap .slideCont .slideItem a img {
		height: auto;
	}
} 

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
	html {
		font-size: 46.875%;
	}

	.inner {
		padding: 0 30px;
		width: 100%;
		max-width: initial;
	}

	br.pc {
		display: none;
	}

	header {
		display: none;
	}

	.btnMain {
		width: 100%;
		max-width: 266px;
	}

	#bannerTop {
		display: none;
	}

	#valueWrap .img,
	#valueWrap .txt {
		width: 100%;
	}

	#valueWrap .img {
		padding-bottom: 75%;
	}

	#valueWrap li:nth-child(2n-1) .img {
		float: initial;
	}

	#valueWrap li:nth-child(2n) .img {
		float: initial;
	}

	#valueWrap .txt {
		position: initial;
		top: initial;
		transform: initial;
	}

	#valueWrap li:nth-child(2n-1) .txt {
		padding-left: 0;
	}

	#valueWrap li:nth-child(2n) .txt {
		padding-right: 0;
	}

	#valueWrap .txt p {
		padding: 20px 0 0;
	}


	#strengthWrap .aside {
		width: 100%;
	}

	#strengthWrap .section {
		width: 100%;
	}
}