/* 탭 (2차메뉴) */
ul.sub_lnb_container_aboutile li{width:16.66666666666667%;}



.formo{display:none;}

/******************* (소개폴더) 공통 : 서브 상단 비쥬얼  *************************/
div.forback {position:fixed !important; top:0; z-index:10; width:100%; height:75%; animation: fadeIn 1s ease-in-out forwards; background-color:#272c2f}
@keyframes fadeIn {
	from{opacity:0;}
	to{opacity:1.0;}
}

	div.forback .subtop {position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%; }
	div.forback .subtop_in {margin-top:32px; height:100%; animation:animate_background 2s ease-in-out;}
	div.forback .back_introduce {background:url('/ileschool/_images/common/back_introduce.png') center 0 no-repeat; }
		@keyframes animate_background {
			0% {transform: scale(1.12); -ms-transform: scale(1.12); -webkit-transform: scale(1.12); }
			100%  {transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); }
		}

	div.forback div.visual_in {position:absolute; top:0; width:100%; height:100%; text-align:center;}
		div.visual_in h2 {position:relative; top:38%; width:100%; color:#fff; font-size:5rem;}
		.line_animation { position: absolute; left: 50%; bottom: 0; width: 1px; height: 90px;  background:rgba(255,255,255,0.15);}
			.line_animation span {position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 0; background: #fff;  animation: scrollMotion 2.5s infinite ease-out;}
			@keyframes scrollMotion {
				0% {height: 0;}
				100% {height: 100%;}
			}

	div.forback .visual_tit{overflow:hidden; opacity:0; }
	div.forback .visual_tit .char{display:inline-block; opacity:0;}/* display:inline-block; 주석처리하면 또 다른 효과가 생김*/
	div.forback .visual_tit.splitting{opacity:1.0;}
	div.forback .visual_tit.splitting .char {animation: slide-up 1.25s cubic-bezier(.5,.2,0,1); animation-fill-mode: both; animation-delay: calc( .5s + (.05s * var(--char-index)) );}
	@keyframes slide-up {
		from{opacity:0; transform: translateY(125%);}
		to{opacity:1.0; transform: translateY(0);}
	}


/* 서브 내비게이션 */
div.sub_navi{position:absolute; top:100px; right:0}
div.sub_navi > ul > li{color:#fff;}
div.sub_navi > ul > li > span{color:#fff;}
div.sub_navi > ul > li:last-child{color:#fff;}

div.sub_top_headtitle h4{
	color:#fff; width:100%; 
	position:absolute; top:50%; 
	-webkit-transform: translateY(-50%); 
	-ms-transform: translateY(-50%); 
	-moz-transform: translateY(-50%); 
	-o-transform: translateY(-50%); 
	transform: translateY(-50%);}
div.sub_top_headtitle h4 > p{color:#fff; margin-bottom:20px;}
div.sub_top_headtitle h4 > span{letter-spacing:-5pt;}

/******************* 컨텐츠영역 시작 *******************/
#contents{position:relative; top:75%; z-index:20; /*animation: fadeIn 1s ease-in-out forwards; animation-delay:1.5s;*/ background:#fff;}


/* 소개페이지 */
div.chief_wrap{position:relative; padding:7.2vw 6.7vw 9vw 6.7vw; margin-top:5vw; background:#FAF1F2;}
	div.chief_wrap dl dt{margin-bottom:60px; font-size:3rem; font-weight:300;}
	div.chief_wrap dl dd{font-size:1.125rem; line-height:1.6; }
	div.chief_wrap .img_chief{position:absolute; top:-13%; right:5vw; max-width:360px;}

p.chief_txt{float:right; position:relative; margin-top: -9%; margin-bottom:2vw; width:80%; font-size:1.125rem; line-height:1.6; background:#fff; padding:4vw 0 0 4vw}


@media screen and (max-width: 1679px) {
	div.chief_wrap{padding:5.2vw 4.7vw 10vw 4.7vw;}
	div.chief_wrap .img_chief{max-width:300px;}
	div.chief_wrap .img_chief{right:3vw;}
}


@media screen and (max-width: 1439px) {
	.formo{display:block;}
	p.chief_txt{width:85%;}
}

@media screen and (max-width: 1279px) {
	div.chief_wrap .img_chief{max-width:280px; right:8vw}
}

@media screen and (max-width: 1023px) {
	div.chief_wrap .img_chief {right: 5vw;}
	p.chief_txt{right:2vw; margin-top:0; width:100%;}
	div.chief_wrap dl dd{ padding-right:40%; }

}

@media screen and (max-width: 950px) {
	
	div.chief_wrap dl dt{font-size:2.6rem;}
}

@media screen and (max-width: 767px) {
	div.chief_wrap .img_chief {max-width: 250px; right: 4vw;}
}

@media screen and (max-width: 670px) {
	.formo{display:none;}
	div.chief_wrap{padding-bottom:0 !important;}
	div.chief_wrap dl{text-align:center;}
	div.chief_wrap dl dt{margin-bottom:30px;}
	div.chief_wrap dl dd{margin-bottom:0px; padding-right:0%; }
	div.chief_wrap .img_chief {
		position: relative; bottom: 0; left: 50%; 
		-webkit-transform: translate(-50%);
		-ms-transform: translate(-50%);
		-moz-transform: translate(-50%);
		-o-transform: translate(-50%);
		transform: translate(-50%);
	}
    p.chief_txt{word-break:break-all;}
}	

@media screen and (max-width: 670px) {
	div.chief_wrap dl dt{font-size:2rem;}
	div.chief_wrap .img_chief{max-width:200px; margin-top:30px;}
}

@media screen and (max-width: 370px) {

}


/*교육 이념 */
section.ideo{text-align:center; }
	section.ideo h3{margin-bottom:30px; font-size:1.5rem;}
	section.ideo h4{font-size:2.4rem; font-weight:400;}
	section.ideo h4 img{max-width:45px;}


@media screen and (max-width: 960px){
	section.ideo h3{font-size: 1.25rem; margin-bottom:10px;}
	section.ideo h4{font-size:2rem; }
}

@media screen and (max-width: 767px){
	section.ideo{padding: 6vw 0;}
	section.ideo h4 {font-size: 1.5rem;}
}

@media screen and (max-width: 479px){
	section.ideo{padding: 8vw 0;}
	section.ideo h4 img{max-width:20px; display:none;}
}



/* 교육 비전 */
section.ideo_vision{}
	section.ideo_vision img.visionimg{max-width:600px; margin-top:30px; }

@media screen and (max-width: 1670px){
	section.ideo_vision img.visionimg{max-width:50%;}
}

@media screen and (max-width: 767px){
	section.ideo_vision img.visionimg{max-width:70%;}
}

@media screen and (max-width: 479px){
	section.ideo_vision img.visionimg{max-width:70%; margin:0 auto;}
}


/* 교육 목표 */
ul.ideo_goal{padding-top:20px;}
	ul.ideo_goal > li{position:relative; float:left; width:calc(50% - 23px);}
	ul.ideo_goal > li:nth-child(1n){margin-right:15px;}
	ul.ideo_goal > li:nth-child(2n){margin:50px 0 0 15px;}
		ul.ideo_goal dl{position:absolute; bottom:0; left:0; padding:20px 11% 0 0; text-align:left; background:#fff; }
			ul.ideo_goal dl dt{margin-bottom:20px; font-size:1.25rem; font-weight:700;}
			ul.ideo_goal dl dd{line-height:1.4;}

@media screen and (max-width: 960px) {
	ul.ideo_goal dl dt{font-size:1rem;}
}

@media screen and (max-width: 767px) {
	ul.ideo_goal > li{width:100%}
	ul.ideo_goal > li:nth-child(2n){margin:20px 0;}
	ul.ideo_goal dl dt{margin-bottom:10px;}
}

/* 글로벌 교육과정의 특성 */
ul.ideo_trait{}
	ul.ideo_trait li > span{font-size:1rem;}

div.test_process_wrap{width:70%; margin:40px auto;}
		div.test_process_wrap > ul{display:flex;}
		div.test_process_wrap > ul > li {width: 50%; color: #111; font-size: 1.25rem;  text-align: center;}
		div.test_process_wrap > ul > li > p {width: 10vw; height: 10vw; line-height: 10vw; margin: 0 auto; background: #F4F5F9; border-radius: 50%; margin-bottom: 15px;}
		div.test_process_wrap > ul > li > p > img{width:35%;}

@media screen and (max-width: 960px) {
	div.test_process_wrap{width:80%;}
}

@media screen and (max-width: 767px) {
	div.test_process_wrap{width:100%;}
	div.test_process_wrap > ul > li{font-size:1rem;}
	div.test_process_wrap > ul > li > p {width: 16vw; height: 16vw; line-height: 16vw;}

}

@media screen and (max-width: 479px) {
	div.test_process_wrap > ul{display:block;}
	div.test_process_wrap > ul > li{width:100%;  margin-bottom:30px;}
}


/* ci 의 의미*/
section.ci_mean{}
	section.ci_mean h5{font-size:1rem; font-weight: 400; margin: 20px 0 50px 0; line-height: 1.4;}

ul.ci_2{}
	ul.ci_2 li{float: left; width: calc(50% - 30px); margin:0 15px; }
		ul.ci_2 li img.ci_01, ul.ci_2 li img.ci_02{margin-bottom:15px;}
		
div.ci_down{}
	div.ci_down button{margin-top:80px; border:1px solid #ddd; background:#fff;}
	div.ci_down button .material-icons{color:#E70012;}

@media screen and (max-width: 767px) {
	section.ci_mean h5 br{display:none;}
}

@media screen and (max-width: 479px) {
	section.ci_mean h5{margin:20px 0 20px 0;}
	div.ci_2 > ul{display:block;}
	ul.ci_2 li{margin:0; width:100%; margin-bottom:20px;}
	ul.ci_2 li img.ci_01, ul.ci_2 li img.ci_02{margin-bottom:10px;}
}


/* 심볼의 의미 */
ul.ci_5{display: flex; align-items: center; justify-content:space-between;}
	ul.ci_5 li{width: calc(28% - 20px); margin:0 10px;}
	ul.ci_5 li.wd5p{width:8%; margin:0;}
		
@media screen and (max-width: 479px) {
	ul.ci_5{display:block;}
	ul.ci_5 li{width:50%; margin:0 auto;}
	ul.ci_5 li.wd5p{margin:10px auto;}
}


/* 컬러의 의미 */
div.ci_gradi{position:relative; width:100%; }
	div.ci_gradi p{
		position:absolute; top:50%; 
		-webkit-transform: translateY(-50%); 
		-ms-transform: translateY(-50%);  
		-moz-transform: translateY(-50%); 
		-o-transform: translateY(-50%); 
		transform: translateY(-50%); 
		font-weight:600; font-size:1.25rem;
	}

	div.ci_gradi p.first{color:#fff; left:3%}
	div.ci_gradi p.last{color:#111; right:3%}

@media screen and (max-width: 960px) {
	div.ci_gradi p{font-size:1rem;}
}

/* 브랜드 컬러 */
p.square{width:12.5vw; height:12.5vw; margin:0 auto; margin-bottom:15px;}
p.square_red{background:#E70012;}
p.square_white{background:#fff;}
p.square_gray{background:#595758}
p.square_black{background:#000;}

@media screen and (max-width: 767px) {
	p.square{margin-top:10px; width:16vw; height:16vw;}
}

@media screen and (max-width: 479px) {
	ul.b_color_m li{float:left}
	p.square{width:35vw; height:35vw;}
}

@media screen and (max-width: 340px) {
	ul.b_color_m li{width:100%;}
}


/******* 갤러리 *******/
div.gal_slide_wrap{overflow:hidden; width:100%; }
		div.gal_slide_wrap div.swiper-slide{box-sizing: border-box;}
		div.gal_slide_wrap div.swiper-slide img{width:100%;}

		div.gal_top, div.gal_thum{position:relative;}
		div.gal_top{margin-bottom:30px;}
		div.gal_thum{}

				div.gal_thum div.swiper-wrapper{align-items:center;}
					div.gal_thum div.swiper-wrapper .swiper-slide{cursor: pointer;}
						div.gal_thum .swiper-pagination{bottom:0 !important;}
						div.gal_thum .swiper-pagination-bullet {width: 13px; height: 13px; background: #D5D6DB;  opacity: 1;}
						div.gal_thum .swiper-pagination-bullet-active{width:36px; background:#2ECC71;  border-radius: 10px;}
						div.gal_thum .swiper-slide-thumb-active{border:4px solid #E70012; box-sizing:border-box;}

						div.gal_thum .swiper-button-prev{
							margin-top:0; left:0;  top:50%; 
							-webkit-transform: translateY(-50%);  
							-ms-transform: translateY(-50%); 
							-moz-transform: translateY(-50%); 
							-o-transform: translateY(-50%); 
							transform: translateY(-50%); 
							}

						div.gal_thum .swiper-button-next{
							margin-top:0;  right:0; top:50%; 
							-webkit-transform: translateY(-50%);  
							-ms-transform: translateY(-50%); 
							-moz-transform: translateY(-50%); 
							-o-transform: translateY(-50%); 
							transform: translateY(-50%); 
						}
						div.gal_thum .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after{content:'';}
						div.gal_thum .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after{content:'';}

						div.gal_thum .swiper-button-next span, div.gal_thum .swiper-button-prev span{width:50px; height:50px;  line-height:50px; color:#fff; text-align:center; background:#000 !important;}

div.gal_top dl{position: absolute; left: 0; bottom: 0; width: 30%; padding: 30px 20px; background: #fff; }
	div.gal_top dl dt{margin-bottom:10px; font-size:2rem; font-weight:500;}

@media screen and (max-width: 1679px) {
		div.gal_slide_wrap{margin-bottom:30px;}
}

@media screen and (max-width: 1439px) {
	div.gal_top dl{width:50%;}
}

@media screen and (max-width: 1279px) {
		div.gal_slide_wrap{width:100%;}
}

@media screen and (max-width: 767px) {
	div.gal_top dl dt{font-size:1.6rem;}
}

@media screen and (max-width: 767px) {
	div.gal_top{margin-bottom:15px;}
	div.gal_thum{margin-bottom:30px;}
}

@media screen and (max-width: 479px) {
	div.gal_top dl{width:100%; position:relative; padding:20px;}
	div.gal_top dl dt{font-size:1rem;}
	div.gal_top dl{width:60%;}
}







/******* 지점별 약도 *******/
#main_locationmap_wrap {padding:140px 0;  }

.main_branch_menu{  width:100%;  height:auto;  overflow:hidden;}
.main_branch_menu > ul { padding:0; margin:0; list-style:none;   overflow:hidden; }
.main_branch_menu > ul > li { float:left; display:block; margin-right:4vw;  line-height:40px; font-size:2.25rem;  font-weight:600; color:#111; border-bottom:2px solid #fff; cursor:pointer; }
.main_branch_menu > ul > li:hover, .main_branch_menu > ul > li.on{ color:#E70012; border-bottom:2px solid #E70012; }

.main_branch_menu .conBox { width:100%; height:auto; overflow:hidden; display:none;min-height:200px; background:#fff; text-align:center; }
.main_branch_menu .conBox.on{  display:block; }

div.main_branch_info {}
div.main_branch_info > ul { margin:70px 0 40px;}
div.main_branch_info > ul > li { float:left; width:24%;}
div.main_branch_info > ul > li:first-child {  width:52%;}
	dl.main_branch_info_item {}
	dl.main_branch_info_item > dt { float:left;  font-size:1rem;  font-weight:600; color:#C2BFBF; margin-right:15px; }
		dl.main_branch_info_item > dt > p { display:inline-block; width:60px; height:60px; line-height:60px; background:#f5f2f2; border-radius:20px; text-align:center; color:#C2BFBF; }
			dl.main_branch_info_item > dt > p > span {font-size:30px; }
	dl.main_branch_info_item > dd { float:left;  font-size:1.25rem;  font-weight:600; color:#111;}
		dl.main_branch_info_item > dd > p { font-size:1.25rem;  font-weight:600; color:#C2BFBF; text-align:left; }

/* 다음 지도 높이값 잡기 */
.root_daum_roughmap .wrap_map {  position: relative; height: 400px; }

/* 지도 하단 버튼 */
ul.map_btn_wrap{width:70%; margin:30px auto 50px; text-align:center;}
	ul.map_btn_wrap li{float:left; margin-right:5px; width:calc(33.33% - 5px); height:50px; line-height:50px; border:1px solid #ddd;}
	ul.map_btn_wrap li:last-child{margin-right:0;}
	ul.map_btn_wrap li a{width:100%; height:100%; /*line-height:100%;*/ color:#111;}
	ul.map_btn_wrap li:hover{background:#222;}
	ul.map_btn_wrap li:hover a{color:#fff;}

@media screen and (max-width: 1679px) {
	#main_locationmap_wrap {padding:80px 0;  }
}

@media screen and (max-width: 1279px) {
	.main_branch_menu > ul > li { font-size:1.5rem; }
	div.main_branch_info > ul { margin:40px 0 40px;}
	dl.main_branch_info_item > dd {  font-size:1rem; }
	dl.main_branch_info_item > dd > p { font-size:0.875rem; margin-top:12px;}
}

@media screen and (max-width: 1023px) {
.root_daum_roughmap .wrap_map {  position: relative; height: 300px; }
div.main_branch_info > ul > li { float:none; width:100%; margin-top:10px; }
div.main_branch_info > ul > li:first-child {  width:100%; margin-top:0px; }
}

@media screen and (max-width: 767px) {
	dl.main_branch_info_item > dt > p { width:40px; height:40px; line-height:40px; border-radius:6px;}
	dl.main_branch_info_item > dt > p > span {font-size:20px; }
	dl.main_branch_info_item > dd > p { margin-top:0px;}
	.root_daum_roughmap .wrap_map {  position: relative; height: 200px; }
}

@media screen and (max-width: 479px) {
	.main_branch_menu > ul > li { font-size:1.25rem; }
	dl.main_branch_info_item > dd {  font-size:0.875rem; }
}






/******* 교통안내 *******/
div.transfortation_wrap {}
	div.transfortation_wrap p.title{color: #111; font-size: 2rem; font-weight: 600; border-bottom: 1px solid #111; padding-bottom: 20px;}

	div.transfortation_wrap table{float:left; margin:40px 0; width:50%; line-height:1.6;}

	div.transfortation_wrap table tr td:first-child{width:10%;}
	div.transfortation_wrap table tr td:first-child p{width:10vw; height:10vw; line-height:10vw; text-align:center; background:#F4F5F9; border-radius:50%;  }
	div.transfortation_wrap table tr td:first-child p img{width:35%;}
	
	div.transfortation_wrap table tr td:last-child{width:90%; padding-left:20px;}
		div.transfortation_wrap table tr td:last-child > dl > dt{font-size:1.25rem; margin-bottom:10px; font-weight:600;}
		div.transfortation_wrap table tr td:last-child > dl > dd{font-size:1rem; font-weight: 400; line-height:1.6;}


@media screen and (max-width: 1023px) {
	ul.map_btn_wrap{width:100%;}
	div.transfortation_wrap table{width:100%; margin:20px 0;}
	div.fortop{margin-top:50px;}
}

@media screen and (max-width: 960px) {
	div.transfortation_wrap table tr td:first-child p{ width:14vw; height:14vw; line-height:14vw; }
}

@media screen and (max-width: 767px) {
	div.transfortation_wrap table tr td:first-child p{ width:16vw; height:16vw; line-height:16vw; }
	div.transfortation_wrap table tr td:last-child > dl > dd  { font-size:0.938rem; }
	div.transfortation_wrap table tr td:last-child{font-size:0.938rem; }
}

@media screen and (max-width: 560px) {
	div.transfortation_wrap > ul{display: block; text-align:center;}
	div.transfortation_wrap > ul > li:first-child{margin:0 auto; margin-bottom:20px;}
	div.transfortation_wrap > ul > li:last-child{width:100%; padding-left:0;}
}

@media screen and (max-width: 479px) {

}









/* 푸터 */
#footer{top:75%; z-index:100; background:#fff;}