#main {margin-top:200px; font-size:18px}
.vi {width:100%;  }
.vi .box {width:100%; position:relative;  height:460px;  box-sizing:border-box; display:inline-block; color:#fff}

.vi .box .bg_box {width:100%; overflow:hidden;  display:inline-block; padding:70px 3% 0 3%; height:395px; box-sizing:border-box; display:none;  }
.vi .box .bg_box.active {display:block;  }
.vi .box .bg_box:after {content:''; position:absolute; content:''; left:0; top:0; width:100%; height:100%; z-index:-9; transition: all 0.2s ease-out; }
.vi .box .bg_box.active:after { animation-name: ani; animation-duration:1s; animation-fill-mode: forwards; }

.vi .box .box_in:after {  background:url('/common/img/vi_img1.png') no-repeat top; background-size:100%;  }
.vi .box .box_in2:after {  background:url('/common/img/vi_img2.png') no-repeat top; background-size:100%;  }
.vi .box .box_in3:after {  background:url('/common/img/vi_img3.png') no-repeat top; background-size:100%; }
.vi .box .box_in4:after { background:url('/common/img/vi_img4.png') no-repeat top; background-size:100%;  }

.vi .bg_box div {border-bottom:1px solid #ddd;  display:flex; padding-bottom:20px; margin-bottom:20px; align-items:flex-end;  }
.vi .bg_box div .b_t {font-size:44px; font-family: 'SBAggroL'; font-weight:300; line-height:1.3; }
.vi .bg_box div b {font-weight:500; display:block; font-family: 'SBAggroB';}
.vi .bg_box p {line-height:1.5; font-weight:200; font-size:24px}
.vi .bg_box div ul.flex {margin-left:auto; gap:10px; margin-bottom:10px}
.vi .bg_box div ul.flex a { background-color: rgba(255, 255, 255, .2); color:#fff; padding:0 20px; height:40px; display:flex;  align-items:center; border-radius:50px; font-family: 'SBAggroL'; letter-spacing:0;  }

.vi ul.tab {display:flex; margin-top:10px; gap:0 8px}
.vi ul.tab li {width:25%; cursor:pointer; text-align:Center; padding:10px 0; font-size:20px; position:Relative;  }
.vi ul.tab li.ov {  color:#fff; margin-right:10px }
.vi ul.tab li.off { color:#333;  border-radius:50px; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);  }
 


@keyframes ani {
from {
		opacity:0; 
		filter:Alpha(opacity=0);
		 
	}
	to {
		opacity:1.0;
		filter:Alpha(opacity=100);
	 
	}
} 

@media all and (max-width:1270px) {
	
		.vi .box {  height:auto; border-radius:20px;   }
		.vi .box .box_in {background:url('/common/img/m_vi_bg1.png') no-repeat top; background-size:cover;  }
		.vi .box .box_in2 {background:url('/common/img/m_vi_bg2.png') no-repeat top; background-size:cover }
		.vi .box .box_in3 { background:url('/common/img/m_vi_bg3.png') no-repeat top; background-size:cover}
		.vi .box .box_in4 { background:url('/common/img/m_vi_bg4.png') no-repeat top; background-size:cover}

		.vi .box .bg_box { position:relative;  border-radius:20px; padding:70px 5%; height:auto;  overflow:hidden }
		.vi .box .bg_box.active:before {width:100%; height:100%; content:''; position:absolute; left:0; top:0; background:rgba(0,0,0,.7); z-index:9}
		.vi .bg_box div ul.flex {margin-left:0}
		.vi .bg_box div ul.flex a {font-size:14px; padding:0 15px}
		
		.vi .box  div.left {flex-wrap:wrap; position:relative; z-index:99}
		.vi .box p.right {position:relative; z-index:99}

		.vi ul.tab li {font-size:16px }
		.vi ul.tab li.ov {background-color:#333; margin-right:0;  color:#fff; border-radius:50px }
 
  }

@media all and (max-width:900px) {

		#main {margin-top:90px; font-size:15px}

		.vi .bg_box div .b_t {font-size:2em; width:100%; margin-bottom:30px}
		.vi .bg_box p {font-size:1.1em}
		.vi ul.tab {flex-wrap:wrap; gap:10px 0; justify-content: space-between;} 
		.vi ul.tab  li {width:49%; }
		.vi .box p.right {font-size:1em}
}


 hr.main_hr {height:100px}

.tit {font-size:40px; align-items:Center; display:flex; gap:10px; margin-bottom:30px}
.tit p {font-size:24px; margin-top:5px; font-weight:400; color:#666}
label {margin-top:10px; font-size:20px; background-color:#ECECEC; border-radius:50px; display:inline-block; padding:10px 30px}

@media all and (max-width:900px) {
		label {font-size:1em}
		.tit {font-size:1.5em}
		.tit p {font-size:16px}

 }


.main_story {width:100%; }
.main_story .flex {gap:20px; }
.main_story .left {width:700px; flex-shrink:0; gap:10px  }
.main_story .left .box {width:100%; height:100%;  border-radius:30px;  display:flex; align-items:flex-end; background:url('/common/img/main_bn_img1.png') no-repeat; background-size:cover; }
.main_story .left .swiper {height:100%}
.main_story .left .swiper-wrapper {height:100%}
.main_story .left .swiper-wrapper a {width:100%; height:100%; display:flex; align-items: flex-end;  box-sizing:border-box}
.main_story .left .box div.text {width:100%;  box-sizing:border-box; padding:40px; padding-bottom:50px;  color:#fff; font-size:32px}
.main_story .left .box div.text  p {font-size:20px; }
.main_story .left .box div.text h6 {font-size:32px; font-weight:400; word-break: normal;
		overflow:hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1; /* 라인수 */
		-webkit-box-orient: vertical;
		word-wrap:break-word;  }
 

.swiper-pagination-bullet {background-color:#fff !important;  }
.main_story .left .main_insta {width:50%; border-radius:25px; position:relative}
.main_story .left .main_insta a {width:100%; height:100%; positioN:absolute; left:0; top:0}

.main_story .right {width:50%}
.main_story .bn {width:100%; display:flex; gap:20px}
.main_story .bn li {width:49%; text-align:center; border-radius:30px; padding:43px 0; box-sizing:border-box;  background-color:var(--main_c); color:#fff}
.main_story .bn li + li  {background-color:var(--main_c2); }
.main_story .bn li span:first-child {font-size:20px; font-weight:400}
.main_story .bn li span:last-child {font-size:18px; font-weight:300}
.main_story .bn li b {font-size:44px; display:block; margin:20px 0}
.main_story .notice  {box-shadow:2px 2px 10px rgba(0,0,0,.2); padding:40px 20px; box-sizing:border-box;  border-radius:30px; margin-top:20px}
.main_story .notice p {font-size:32px; margin-top:10px}
.main_story .notice a {color:#111; }


@media all and (max-width:1270px) {

	 .main_story .left {width:50%; }

}
@media all and (max-width:900px) {
		.main_story .bn li {border-radius:20px; padding:30px 10px; }
		.main_story .bn li b {font-size:1.5em; margin:10px 0}
		.main_story .bn li span:first-child {font-size:16px}
		.main_story .bn li span:last-child {font-size:16px}
		.main_story .notice p {font-size:1.4em}

		.main_story .left {width:100%; height:60vw}
		.main_story .left .box {border-radius:20px}
		.main_story .left .box div.text {padding:20px; padding-bottom:40px }
		.main_story .left .box div.text  p {font-size:16px; }
		.main_story .left .box div.text h6 {font-size:20px;  }

		.main_story .left {  justify-content: space-between; gap:20px; flex-wrap:nowrap}
		.main_story .left .main_insta {width:50%; border-radius:20px }



		.main_story .notice  {  border-radius:20px; }
		.main_story .right {width:100%}

 }		

.main_edu_list .flex {gap:50px}
.main_edu_list .flex + .flex {margin-top:20px}
.main_edu_list .left_box {width:40%; box-shadow:2px 2px 10px rgba(0,0,0,.2); padding:30px 20px; box-sizing:border-box;  border-radius:30px;}
.main_edu_list .left_box h5 {font-size:28px; margin-bottom:8px}
.main_edu_list ul {width:60%}
.main_edu_list ul li {cursor:pointer; font-size:28px; height:50%; display:flex; align-items:center; border-bottom:1px solid #E6E6EB; justify-content: space-between; }

@media all and (max-width:900px) {
		.main_edu_list .left_box {border-radius:20px}
		.main_edu_list .left_box h5 {font-size:1.3em;  }
		.main_edu_list .left_box h5 br {display:none }


 }


.main_review {
    background-color: #E9E9FF;
    padding: 100px 0 0 0 ;
	position:relative
}
.main_review .flex {
  /*   display: flex;
    flex-wrap: wrap;
    gap: 20px;
    flex-direction: column;
    height: 800px;  
    	border:2px solid blue;  */
	 display: flex;  
    gap:0 20px;
	padding-bottom:60px;
}
.main_review  div.box_wrap { width: calc(33.3333% - 20px);  }
.main_review .flex .box {
   width:100%;
    background-color: #fff;
    text-align: center;
    font-size: 28px;
	color:#464660; 
    line-height: 1.6;    
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    padding: 60px;
    box-sizing: border-box;
    border-radius: 10px;
	position:relative;
	margin-top:30px;
}
.main_review .flex .box:first-child {margin-top:0}
.main_review .flex .box:after {position:absolute; width:60px; height:60px; background:url('/common/img/review_box_right_bottom.png') no-repeat; right:15px; bottom:15px; content:''; background-size:cover}
.main_review .flex .box:before {position:absolute; width:60px; height:60px; background:url('/common/img/review_box_left_top.png') no-repeat; left:15px; top:15px; content:''; background-size:cover}
.main_review a {font-size:30px; color:#333; box-shadow:2px 2px 10px rgba(0,0,0,.2); border-radius:50px; padding:12px 30px; display:inline-block}
.main_review .in {position:Relative; z-index:9}
.main_review .in + p {position:relative; z-index:9999}
.main_review .bottom_gra {width:100%; height:400px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 60%);  position:absolute; bottom:0; left:0; z-index:99; box-sizing:border-box}

 
  
 @media all and (max-width:900px) {
 .main_review .flex {gap:15px 0;  justify-content: space-between;}
 .main_review  div.box_wrap { width: 47% }
 .main_review  div.box_wrap:last-child {display:none }

		.main_review .flex .box { font-size:1em; padding:40px 20px}
		.main_review .flex .box:after {width:20px; height:20px}
		.main_review .flex .box:before {width:20px; height:20px}
		.main_review .flex .box {font-size:1em; padding:40px 20px}
		.main_review .bottom_gra {height:200px}
.main_review a {font-size:1.15em}

}
 
.main_customer h3.tit {align-items:flex-start}
.main_customer h3.tit img {margin-top:5px}
 
.main_customer ul + p {font-size:32px; text-align:center; padding:15px 20px; box-sizing:border-box; border-radius:30px; margin-top:30px; background-color:#5765FF; color:#fff;  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);}


.main_client .list_div {background-color:#F3F3F3; padding:100px 0; overflow:hidden}
.main_client .list_div ul {gap:15px; }
.main_client .list_div ul li {border-radius:100px; box-sizing:border-box; border:1px solid #ddd; width:420px; height:125px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background-color:#fff}


.partner-slider {
		 
		white-space: nowrap;
		width:100%; 
	 
  }

.slider-track {
		display: flex;
		animation: scroll 30s linear infinite; /* 속도 조절 가능 */
		gap:20px;
		width: calc(18vw * 16);
}

.slider-track img {
  height: 60px;
  margin: 0 40px;
  vertical-align: middle;
}

/* 무한 스크롤 애니메이션 */
@keyframes scroll {
  0% { transform: translateX(0); }
 100% { transform: translateX(calc(-18vw * 16));}
}
@keyframes scroll2 {
 0% { transform: translateX(calc(-18vw * 16));}
  100% { transform: translateX(0); }
}
.slider-track div {border-radius:100px; box-sizing:border-box;  width:18vw; height:125px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background-color:#fff; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); }
.slider-track div  img {max-width:70%; max-height:50%}

 
.partner-slider + .partner-slider .slider-track {  animation: scroll2 30s linear infinite; /* 속도 조절 가능 */ }  

@media all and (max-width:1270px) {

		 @keyframes scroll {
		  0% { transform: translateX(0); }
		 100% { transform: translateX(calc(-230px * 16));}
		}
		@keyframes scroll2 {
		 0% { transform: translateX(calc(-230px * 16));}
		  100% { transform: translateX(0); }
		}
		 .slider-track div {  width:230px; height:80px;  }

}

@media all and (max-width:900px) {
		.main_edu_list .flex {gap:20px}
		.main_edu_list .left_box {width:100%;}
		.main_edu_list ul {width:100%; display:inline-block; border-top:1px solid #ddd  }
		.main_edu_list ul li {font-size:1em; height:auto; padding:11px 0; }
		.main_edu_list ul li img {width:25px}

		.main_customer ul + p {font-size:1.3em}
		.main_client .list_div {  padding:70px 0; }

}