/* @font-face {
    font-family: 'Tenada';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/Tenada.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
} */

html,body,section,article,header,footer,nav,
div,p,
h1,h2,h3,h4,h5,h6,
ul,ol,li,dl,dd,dt,
img,a,
form,input,select,option,fieldset,textarea,button,label,
figure,video {
	margin:0;
	padding:0;
	border:0;
	background-repeat:no-repeat;
	background-position:center;
	background-color:transparent;
	line-height:1;
	text-decoration:none;
	font-family:'Pretendard','맑은 고딕',돋움,'Apple SD Gothic Neo','sans-serif';
	font-size:15px;
	font-weight:normal;
	color:#444;
	letter-spacing:-0.6px;
	box-sizing:border-box;
	text-size-adjust:none;
	list-style:none;
	word-break: keep-all;
}
a:link, a:visited,
a:hover, a:focus, a:active {
	text-decoration:none;
}

table {width:100%; border-spacing:0; border-collapse:collapse;}

/* 폼초기화 */
select,button,input[type=text],input[type=submit],textarea	{
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	/* border-radius:0; */
}

select	{	box-sizing:border-box;}
/*크롬사라피*/
@media screen and (-webkit-min-device-pixel-ratio:0){
	select	{	padding-right:22px !important;	background:url(../image/bg_select.svg) no-repeat right center; background-size:contain;}
}
/*파이어폭스*/
@-moz-document url-prefix(){
	select	{	padding-right:22px !important;	background:url(../image/bg_select.svg) no-repeat right center; background-size:contain;}
}

.center	{width:1200px; margin:0 auto;}
.clear::after	{content:""; display:block; clear:both;}
.hidden {position:absolute; left:-100%; top:0%; overflow:hidden; width:0; height:0; font-size:0; text-indent:-9999%; line-height:0;}


html,body {height:100%;}
/* #wrapper {height: 100vh; background: url(../image/bg.png) 50% no-repeat; background-size: cover;} */

#header{padding-top:30px; }
#header h1 img{display: block; height: 50px;}
#contents {height: 100vh; background: url(../image/bg.png) 50% no-repeat; background-size: cover;}
#contents .center {padding: 0px 0 60px; display: flex; justify-content: space-between; align-items: center;}
/* #contents .center {padding: 40px 0 94px; display: flex; justify-content: space-between; align-items: center;} */
#contents .center>div{width: 50%;}
/*#contents h2{line-height: 68px; font-size: 52px; color: #222;}
#contents h2 span{font-weight: 800;}
#contents h4{margin: 30px 0 50px; font-size: 24px; line-height: 36px;}
#contents h4 span{color: #4440f0;}*/

#contents h2{ line-height:1.2; font-size:46px; font-weight:800; color: #222;}
#contents h2 span {color: red; font-weight:300;}
#contents .refer {margin:20px 0;  font-size: 17px; color: #4440f0}
#contents .visu_comm{ font-size:20px; line-height:1.4;}
#contents .visu_comm strong {display:inline-flex; padding:2px 10px; background-color: #4440f0; color: #fff;}
#contents .visu_comm span {font-weight: 700; color: #222;}
#contents .visu_comm br {display: none;}
#contents h3.visu_comm {margin-bottom:20px;}

#contents h5{margin-top: 50px; font-size: 20px; color: #222; font-weight: 600;}

#contents .center>div.left {width: 56%;}

    #contents .left article h3 {margin-top:30px; margin-bottom:0; line-height:1.4; font-size:26px; font-weight: 700; color: #222;}
    #contents .left article p {margin-top:10px; font-size: 18px; }

    .ban {display:block;width: 560px; margin-top:10px; border-radius:30px; overflow:hidden;}
    .ban img {display: block; width:100%; height:auto}
.ban .m {display: none;}

 .set_btn{margin-top: 25px; display: flex; justify-content: flex-start; align-items: center;}
.set_btn a{margin-right: 10px; display: flex; justify-content: center; align-items: center; flex-direction: column; border-radius: 30px; width: 180px; height: 180px; }
.set_btn a .txt{text-align: center;}
.set_btn a h6{margin: 18px 0 20px; font-size: 17px; font-weight: bold; color: #fff;}
.set_btn a p{font-size: 13px; text-decoration: underline; color: #fff;}
.set_btn a.app {background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);}
.set_btn a.app h6{color: #222;}
.set_btn a.app p{color: #919191;}
.set_btn a.homepage {background: #4440f0; }
.set_btn a.cs{background: #9740f0;}
.set_btn a.youtube{background: #e70000;}

#contents .center .right{width: 35%;}
#contents .scrs {position: relative; overflow:hidden; padding: 40px 40px 60px; width:420px; border-radius:30px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); background-color: #fff;}
#contents .scrs img {display: block; width:100%; height:auto; border-radius: 20px;}
.scrs .swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets{bottom: 22px;}
.scrs .swiper-pagination-bullet{background: #4440f0; opacity: 0.15;}
.scrs .swiper-pagination-bullet-active{width: 32px; border-radius: 4px; opacity: 1;}


/*landing---------------------*/
#landing .center{padding: 80px 0; margin: 0 auto; width: 1200px; }

#landing .red{color: #ff0000;}
#landing .green{color: #d8ff7c;}
#landing .purple {color: #4440f0;}
#landing .blue{color: #2fc9dd;}


#landing .tit{margin-bottom: 30px; }
#landing .tit h2{font-size: 50px; font-weight: 800; color: #000; line-height: 1.25; }

/* #landing .tit h2{font-size: 50px; font-weight: bold; color: #000; font-family: 'Tenada'; line-height: 1.2; } */
#landing .tit p{margin-top: 10px; font-size: 30px; color: #222; }
#landing br.m{display: none; }

#landing .main1 .center{display: flex; justify-content: space-between; align-items: center; gap: 40px; }
#landing .main1 .center figure img{display: block; }

#landing .main2{background: url(../image/main2_bg.jpg) 50% no-repeat; background-size: cover; }
#landing .main2 .tit{text-align: center; }
#landing .main2 .tit h2{color: #fff; }
#landing .main2 figure img{display: block; margin: 0 auto; }

#landing .main3 .youtube{position: relative; height: 0; padding-bottom: 56.25%; overflow: hidden; border-radius: 30px; }
#landing .main3 .youtube iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#landing .main3 .tit{text-align: center; margin-top: 30px; margin-bottom: 0; }

#landing .main4{background: url(../image/main4_bg.jpg) 50% no-repeat; background-size: cover;}
#landing .main4 .tit{text-align: center; }
#landing .main4 .tit > *{color: #fff; }

#landing .main4 .edu_slide_wrap{position: relative; }
#landing .main4 .edu_slide_wrap .edu_next,
#landing .main4 .edu_slide_wrap .edu_prev{filter: brightness(0) invert(1);}
#landing .main4 .edu_slide_wrap .edu_next{right: -70px;}
#landing .main4 .edu_slide_wrap .edu_prev{left: -70px; }

#landing .main4 .edu_slide{position: relative; overflow: hidden;}
#landing .main4 .edu_slide .top{position: relative; width: 100%; background: #fff; display: flex; justify-content: flex-end; align-items: stretch; border-radius: 30px; overflow: hidden;}
#landing .main4 .edu_slide .top div{position: absolute; left: 0; top: 50%; transform: translateY(-50%); padding: 82px 60px; background: rgba(0, 0, 0, 0.95); }
#landing .main4 .edu_slide .top div h6{margin-bottom: 24px; color: #fff; font-size: 18px; font-weight: 600; }
#landing .main4 .edu_slide .top div h2{font-size: 30px; color: #fff; line-height: 1.4; }
#landing .main4 .edu_slide .top div h2 strong{font-size: 36px; color: #d8ff7c; font-weight: bold; }
#landing .main4 .edu_slide .top div ol{margin-top: 15px; }
#landing .main4 .edu_slide .top div ol li{font-size: 22px; font-weight: 600; color: #fff; }
#landing .main4 .edu_slide .top div h4{margin-top: 34px; font-size: 25px; font-weight: 400; color: #fff; }
#landing .main4 .edu_slide .top div h4 span{font-weight: 900; margin: 0 6px;}
#landing .main4 .edu_slide .top div h4 b{padding: 5px; background: #4440f0; color: #fff; font-weight: 700; }
#landing .main4 .edu_slide .top div dl{margin-top: 60px; display: grid; grid-template-columns: 80px 1fr; gap: 4px; }
#landing .main4 .edu_slide .top div dl dt span{margin-right: 6px; }
#landing .main4 .edu_slide .top div dl > *{color: #888; line-height: 1.4; }

#landing .main4 .edu_slide .btm{margin-top: 20px; width: 100%; padding: 20px 30px 30px; background: #fff; border-radius: 30px; display: flex; justify-content: flex-start; align-items: baseline; gap: 30px; }
#landing .main4 .edu_slide .btm h5{font-size: 20px; font-weight: bold; color: #222; }
#landing .main4 .edu_slide .btm p{width: calc(100% - 300px); font-size: 20px; line-height: 1.55; }


#landing .main5 {background: url(../image/main5_bg.jpg) 50% no-repeat; background-size: cover; }
#landing .main5 .center{padding: 80px 0 360px; }
#landing .main5 .tit{text-align: center;}
#landing .main5 .tit > *{color: #fff; }
#landing .main5 ul{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; align-items: stretch;}
#landing .main5 ul li{padding: 50px 40px 70px; border-radius: 30px; background: #fff; }
#landing .main5 ul li span{display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; background: #4440f0; color: #fff; font-size: 24px; font-weight: bold; border-radius: 500px; }
#landing .main5 ul li h2{margin: 30px 0 24px; font-size: 28px; color: #222; line-height: 1.4; }
#landing .main5 ul li p{font-size: 18px; color: #767676; line-height: 1.65; }

#landing .main6{background: url(../image/main6_bg.jpg) 50% no-repeat; background-size: cover; }

#landing .main6 .tit > *{color: #fff;}
#landing .main6 .center{display: flex; justify-content: flex-start; align-items: center; position: relative; padding: 160px 0 80px;}

#landing .main6 ul{padding: 40px 0 0; position: relative; }
#landing .main6 ul:after{content: ''; position: absolute; left: 2px; width: 1px; height: 100%; background: rgba(255, 255, 255, 0.3); top: 55%; transform: translateY(-50%);}
#landing .main6 ul li{position: relative; padding-left: 20px; font-size: 24px; margin-bottom: 30px; color: #fff; }
#landing .main6 ul li::after{content: ''; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; background: #fff; border-radius: 400px; }
#landing .main6 ul li span{color: #d8ff7c;}
#landing .main6 ul li:last-child{margin-bottom: 0; }

#landing .main6 figure{position: absolute; right: 0; bottom: 0; }
#landing .main6 figure img{display: block; }


#landing .main7 {background: #222; }
#landing .main7 .tit{text-align: center; }
#landing .main7 .tit > *{color: #fff; }
#landing .main7 figure img{display: block; margin: 0 auto; }
#landing .main7 .center > p{font-size: 30px; margin-top: 30px; line-height: 1.55; text-align: center; color: #fff; font-weight: 500; }


#landing .main8{background: url(../image/main8_bg.jpg) 50% no-repeat; background-size: cover; }
#landing .main8 .center{padding: 100px 0; text-align: center;}
#landing .main8 .tit > *{color: #fff; }
#landing .main8 .tit h6{padding: 10px; color: #4440f0; background: #fff; font-size: 24px; font-weight: bold; width: max-content; margin: 0 auto 30px; }
#landing .main8 .tit h2{font-size: 60px; line-height: 1.1;}
#landing .main8 .tit p{font-size: 26px; font-weight: 300; }


#footer {background: #222;}
#footer .center{padding: 20px 0; }
#footer ul{text-align: center; }
#footer ul li{display: inline-block; color: #fff; margin-right: 20px; }


/*t css*/
@media screen and (max-width:1300px) {

	#contents{height: 1080px;}

	/* #wrapper{height: 1080px;} */
}




/*t css*/
@media screen and (max-width:991px) {

	html,body {letter-spacing:-0.03em; font-size:62.5%;}

	section,article,header,footer,nav,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dd,dt,img,a,form,input,select,option,fieldset,textarea,button,label,figure {font-size:1.4rem; }

	.center,
	#landing .center	{width: 90%; margin:0 auto;}

	/* #wrapper {height: auto; background: url(../image/m_bg.png) 50% no-repeat; background-size: cover;} */
	#header h1 img{margin: 0 auto; display: block; height: 60px;}
	#contents {height: auto; background: url(../image/m_bg.png) 50% no-repeat; background-size: cover;}
	#contents .center {padding: 0 0 100px; display: flex; justify-content: space-between; align-items: center; flex-direction: column-reverse;;}

	#contents .center>div{width: 100%; text-align: center;}
	#contents .center>div.left{width: 100%; }

    .ban {margin:0 auto; margin-top:10px;}

	#contents .center .right{width: 100%;}

	#contents h2{font-size: 4.6rem; line-height: 1.4;}
	#contents h4{margin: 20px 0 40px; font-size: 2.4rem; line-height: 1.5;}
	#contents h5{font-size: 2rem;}
	.set_btn{margin: 25px auto 0; justify-content: center;}

	#contents .scrs {margin: 0 auto 50px;}


	/*landing------------------------------------------------------*/


	#landing .tit h2{font-size: 42px; }
	#landing .tit p{font-size: 24px; }


	#landing .main1 .center{display: block; text-align: center; }
	#landing .main1 .center figure img{margin: 0 auto; }


	#landing .main2 figure img{width: 100%; }



	/*main4*/
	#landing .main4 .edu_slide .top{display: flex; flex-direction: column-reverse;	}
	#landing .main4 .edu_slide .top div{position: initial; transform: translateY(0); padding: 40px; }
	/* #landing .main4 .edu_slide .top div figure img{display: block; width: 100%; } */
	#landing .main4 .edu_slide .top div h2 strong{font-size: 32px; }
	#landing .main4 .edu_slide .top div h4{font-size: 22px; }
	#landing .main4 .edu_slide .top div ol li{font-size: 20px; }
	#landing .main4 .edu_slide .btm{display:block; }
	#landing .main4 .edu_slide .btm h5{margin: 20px 0; }
	#landing .main4 .edu_slide .btm p{width: 100%; }

	#landing .main4 .edu_slide_wrap .edu_next,
	#landing .main4 .edu_slide_wrap .edu_prev{padding: 20px; width: 50px; height: 50px; background-color: rgb(111 111 111 / 10%); border-radius: 500px; background-size: 15px 20px;}

	#landing .main4 .edu_slide_wrap .edu_next{right: -10px; }
	#landing .main4 .edu_slide_wrap .edu_prev{left: -10px; }

	/*main5*/
	#landing .main5 ul{grid-template-columns: 1fr; gap: 10px 0; }
	#landing .main5 ul li{display: flex; justify-content: flex-start; align-items: baseline; padding: 20px; }
	#landing .main5 ul li span{width: 50px; height: 50px; font-size: 20px; }
	#landing .main5 ul li .txt{margin-left: 20px; width: calc(100% - 100px);}
	#landing .main5 ul li h2{margin: 0; margin-bottom: 14px; font-size: 24px; }
	#landing .main5 ul li h2 br{display: none;}
	#landing .main5 ul li h2 br.m{display: block; }
	#landing .main5 ul li p{font-size: 1.8rem; }


	/*main6*/
	#landing .main6 .tit{margin-bottom: 50px; }
	#landing .main6 .center{padding: 120px 0 0; flex-direction: column;}
	#landing .main6 figure{position: initial; }

	/*main7*/
	#landing .main7 figure img{width: 100%; }
	#landing .main7 .center > p{font-size: 20px; }

	/*main8*/
	#landing .main8 .tit h6{font-size: 20px; }
	#landing .main8 .tit h2{font-size: 48px; }
	#landing .main8 .tit p{font-size: 18px; }


}


/*m css*/
@media screen and (max-width:767px) {

	.center	{width: 90%; margin:0 auto;}

	/* #wrapper {height: auto; background: url(../image/m_bg.png) 50% no-repeat; background-size: cover;} */
	#contents {height: auto; background: url(../image/m_bg.png) 50% no-repeat; background-size: cover; padding-bottom: 40px;}
	#header {padding: 35px 0; }
	#header h1 img{margin: 0 auto; display: block; height: 40px;}
		#contents .center {padding: 0; display: flex; justify-content: space-between; align-items: center; flex-direction: column-reverse;;}
	/* #contents .center {padding: 0 0 100px; display: flex; justify-content: space-between; align-items: center; flex-direction: column-reverse;;} */



	#contents h2{font-size: 2.6rem;}
	#contents .refer {font-size: 1.4rem;}
	#contents .visu_comm span {font-size:inherit;}
	#contents .visu_comm br {display: block;}
    #contents h3.visu_comm,
    #contents h4.visu_comm {margin:0; font-size:1.8rem;}
    #contents h3.visu_comm {margin-bottom:20px;}
	#contents h5{font-size: 2.2rem; font-weight: 700;}





    #contents .left article {display: none;}

    .ban {width: 100%; border-radius:20px;}
    .ban .m {display:block;}
    .ban .pc {display: none;}

	.set_btn{margin: 25px 0 0; display: block;}
	.set_btn a{margin-right: 0; margin: 1% auto; justify-content: flex-start; align-items: center; flex-direction: row; padding: 20px ; width: 100%; height: auto; border-radius: 10px;}
	.set_btn a img{display: block; height: 30px;}
	.set_btn a .txt{margin-left: 20px; text-align: left;}
	.set_btn a h6{margin: 0 0 10px;; font-size: 1.6rem;}
	.set_btn a p{font-size: 1.25rem;}


	#contents .scrs {margin: 0 auto 40px; width: 90%; padding: 30px 30px 50px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
	#contents .scrs img{border-radius: 20px;}
	.scrs .swiper-pagination-bullet{margin: 0 3px !important; width: 5px; height: 5px;}
	.scrs .swiper-pagination-bullet-active{width: 26px; border-radius: 3px; opacity: 1;}



	/*landing------------------*/

	#landing .center{padding: 60px 0; }

	#landing .tit{margin-bottom: 20px; }
	#landing .tit h2{font-size: 2.8rem;}
	#landing .tit p{font-size: 1.55rem; line-height: 1.45;}

	#landing br.m{display: block;}

	#landing .main1 .center figure img{width: 100%; }


	/*main4*/
	#landing .main4 .edu_slide .top figure img{display: block; width: 100%; }
	#landing .main4 .edu_slide .top div{padding: 26px; }
	#landing .main4 .edu_slide .top div h6{margin-bottom: 16px; font-size: 14px; }
	#landing .main4 .edu_slide .top div h2{font-size: 22px; }
	#landing .main4 .edu_slide .top div h2 strong{font-size: 22px; }
	#landing .main4 .edu_slide .top div ol li{font-size: 14px; }
	#landing .main4 .edu_slide .top div h4{margin-top: 20px; font-size: 17px; }
	#landing .main4 .edu_slide .top div h4 b{display: inline-block; width: max-content; margin: 4px 0 0; }
	#landing .main4 .edu_slide .top div dl{margin-top: 40px; }
	#landing .main4 .edu_slide .top div dl > *{font-size: 1.3rem; }
	#landing .main4 .edu_slide_wrap .edu_next, #landing .main4 .edu_slide_wrap .edu_prev{display: none;}
	#landing .main4 .edu_slide .btm h5{font-size: 16px; }
	#landing .main4 .edu_slide .btm p{font-size: 1.4rem; }

	/*main5*/
	#landing .main5{background: url(../image/m_main5_bg.jpg) 50% no-repeat; background-size: cover; }
	#landing .main5 .center{padding: 60px 0 200px; }
	#landing .main5 ul li{display: block; }
	#landing .main5 ul li .txt{margin-left: 0; width: 100%; }

	#landing .main5 ul li span{width: 40px; height: 40px; font-size: 18px;}
	#landing .main5 ul li h2{margin: 12px 0; font-size: 18px; }
	#landing .main5 ul li p{font-size: 1.4rem; }

	/*main6*/
	#landing .main6 figure img{width: 100%; }
	#landing .main6 ul li{font-size: 1.7rem; line-height: 1.4;}


	/*main7*/
	#landing .main7 .center > p{font-size: 1.4rem; }


	/*main8*/
	#landing .main8{background: url(../image/m_main8_bg.jpg) 50% no-repeat; background-size: cover; }
	#landing .main8 .center{padding: 60px 0; }
	#landing .main8 .tit h6{font-size: 1.55rem; }
	#landing .main8 .tit h2{font-size: 3.4rem; }
	#landing .main8 .tit p{font-size: 1.4rem; line-height: 1.4;}


	#footer .center{padding: 15px 0; }
	#footer ul li{font-size: 1.3rem; line-height: 1.4;}





}


/* 모달팝업 */
/* #modal-content {display:none;width:600px;max-width:90%;height:500px;box-shadow:0 5px 15px rgba(0, 0, 0, 0.5);background-color: #fff;border: 1px solid rgba(0, 0, 0, 0.2);border-radius: 0;outline: 0 none}
#modal-content .modal-header {height:20px;border-bottom:1px solid #e5e5e5;padding:15px}
#modal-content .modal-header h4 {margin:0;font:bold 18px 'Malgun Gothic';color:#5d5d5d}
#modal-content .modal-body {padding:15px}
#modal-content .modal-body .b-iframe {width:570px;max-width:100%;height:430px}
#modal-content .b-close{float:right;font:bold 21px Arial;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20);padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}
#modal-content .b-close:hover, #modal-content .b-close:focus{color:#000;text-decoration:none;cursor:pointer;opacity:.5;filter:alpha(opacity=50)}
p.modal-frame-content{width:550px;max-width:100%;height:400px;padding-right:5px;overflow-x:hidden;overflow-y:auto;font:normal 12px 'Malgun Gothic';color:#555;line-height:1.65em}
/*.popbtn {text-decoration:none;cursor:pointer;margin:0 5px}*/
/* .b-modal __b-popup1__ {max-width:100%}
#modal-content .modal-header,#modal-content .modal-body{box-sizing:content-box !important}

#modal-content2 {display:none; width:400px; height:560px; background:rgba(54,54,54,0.9); border-radius:4px; border:0px;}
#modal-content2 .modal-header {position:relative; height:28px;}
#modal-content2 .modal-body2 {padding:0;}
#modal-content2 .b-close{position:absolute;top:0;right:16px;font-size:40px;font-weight:900;font-family:Tahoma;color:#fff;opacity:.5;filter:alpha(opacity=50);padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}
#modal-content2 .b-close:hover, #modal-content .b-close:focus{cursor:pointer;opacity:1;filter:alpha(opacity=100)}
#modal-content2 .modal-body2 .b-iframe {width:400px;height:560px;} */