@font-face {
    font-family: 'GongGothicMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.main_vi_wrap {width:100%; height:100%; display:inline-block; margin-top:-165px}

 @media all and (max-width:1100px) {
    .main_vi_wrap {margin-top:0}
 }


/*비쥬얼*/

 
.vi_text_wrap {width:100%; text-align:Center; left:0; top:50%; position:absolute;  transform: translate(0, -55%);  box-sizing:border-box;   }

.vi_text_wrap h1 {color:#fff; font-size:2.2vw; line-height:1.1; margin-bottom:10px;   /* font-family: 'GongGothicMedium'; */ font-weight:800}
.vi_text_wrap h2.t1 {color:#fff; font-size:2.5vw; line-height:1.1; margin-bottom:10px; /* font-family: 'GongGothicMedium', sans-serif; */ letter-spacing:0; font-weight:600}
.vi_text_wrap h2.t2 {color:#fff; font-size:1.5vw; line-height:1.2; margin-bottom:40px; font-weight:400; }
.vi_text_wrap img {max-width:430px; margin-bottom:10px}

.color1 {color:#09a7a6}
.color2 {color:#a731a2}
.color3 {color:#2c2c91}
.color4 {color:#2457f1}

.vi_btn {width:100%; text-align:Center; left:0; bottom:5%; position:absolute;    box-sizing:border-box;   }
.vi_btn a {border:1px solid rgba(255,255,255,.5); background-color:rgba(255,255,255,.1);  font-size:.95rem; color:#fff !important; display:inline-block; padding:0 30px; line-height:40px; border-radius:4px; margin:0 5px; font-weight:400;   transition: all 0.3s ease-out; }
.vi_btn a:hover {background-color:rgba(255,255,255,.9);  color:#000 !important; font-weight:500}


@media all and (max-width:1300px){
   .vi_text_wrap h1 { font-size:2.5vw; }
   .vi_text_wrap h2.t1 { font-size:3.5vw; }
   .vi_text_wrap h2.t2 { font-size:2vw  }

}
 
@media all and (max-width:1200px){
	.vi_text_wrap {width:100%; left:0%; top:50%; position:absolute;  transform: translate(0, -53%); }
 
}

@media all and (max-width:800px){
  
    .vi_text_wrap h1 { font-size:4.3vw; }
	.vi_text_wrap h2.t1 { font-size:4.7vw; }
	.vi_text_wrap h2.t2 { font-size:3.5vw  }
	.vi_btn a {font-size:.80rem; padding:0 15px; line-height:35px}

 
}


 
  
.main_con {width:100%; box-sizing:border-box; display:inline-block; margin:0 auto; background-color:#f9f9f9;  padding-top:110px; padding-bottom:110px}
.main_con .in {max-width:1450px; align-items:center;  margin:0 auto; padding:0 3%; box-sizing:border-box }
.main_con .img {width:47%; flex-shrink:0;  }
.main_con .in .flex_box {justify-content:space-between;  align-items:center}
.main_con .in .flex_box  + .flex_box {margin-right:0;  margin-top:120px}
.main_con .text_wrap {position:relative; width:48%; padding:50px 0; z-index:9}
.main_con .text_wrap h3 {font-size:2.3em; color:#000;  line-height:1.3; font-weight:700; position:relative; display:inline-block;  letter-spacing:-2px}
.main_con .text_wrap p {margin-top:10px}
.main_con .text_wrap .link {display:flex; margin-top:25px; align-items:center; gap:10px; font-size:20px; font-weight:300; color:#333; }
.main_con .text_wrap .link span {width:50px; height:50px; background-color:#003377; color:#fff; display:flex; align-items:center; justify-content:Center; border-radius:50%;}

.main_con .main_gall {margin-top:120px}
.main_con .main_gall ul {display:flex; gap:60px}
.main_con .main_gall ul li {width:100%}
  
@media all and (min-width:900px){
	.main_con .main_gall ul li .text_wrap h3 {font-size:1.5em}
	.main_con .main_gall ul li .text_wrap {width:100%; padding:0; margin-top:20px}
	.main_con .main_gall ul li .img {width:100%}

}
@media all and (max-width:1450px){
	.main_con .in {padding:0 5% }
	.main_con .text_wrap h3 {font-size:1.8em; }
	.main_con .in .flex_box  + .flex_box {  margin-top:80px}

}

@media all and (max-width:900px){
		.main_con {padding-top:100px; padding-bottom:100px}
		.main_con .in .flex_box {flex-wrap:wrap; margin:0 }
		.main_con .in .flex_box  + .flex_box {margin:0; margin-top:60px}
		.main_con .img {width:100%; order:1}
		.main_con .text_wrap {width:100%; padding:0; padding-top:20px; order:2}
		.main_con .text_wrap h3 {font-size:1.3em; letter-spacing:0px}
		.main_con .text_wrap p {font-size:.98em; margin-top:0; color:#333}

		.main_con  .text_wrap .link {font-size:16px }
		.main_con  .text_wrap .link span {width:40px; height:40px; }

		.main_con .main_gall {margin-top:60px}
		.main_con .main_gall ul {flex-wrap:wrap}


}

#main_program {position:relative;  background-color:#f1f5fc}
 
#main_program span.bl {width:55px; height:55px; border-left:20px solid #003377; border-top:20px solid #003377; position:absolute; left:50px; top:50px; display:inline-block}
#main_program span.bl + span.bl {left:auto; top:auto;  right:50px; bottom:50px; border:none;  border-right:20px solid #003377; border-bottom:20px solid #003377;  }
#main_program .tt {position:absolute; left:100px; top:90px; z-index:99; font-size:32px; letter-spacing:-1px;  color:#003377; display:flex; align-items:center; gap:10px; font-weight:700; }

.new_slide {
	position: relative;
	width: 100%;
	padding:130px 12% 90px 12%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap:0; 
	height:890px;
}

.new_slide > div h2 {
	font-size: 30px;
	letter-spacing: -1px;
	font-weight: 700;
	color: #111;
	line-height: 1.4;

}
.new_slide .text {position:absolute; left:12%; width:30%;  z-index:9999; top:40%}
.new_slide > div p {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	color: #333;
	margin-top: 30px;
}


.new_slide .swiper {
	width:80%; 
	margin-left:auto;
	margin-right:0; 
	flex-shrink: 0;	
	 padding-top:120px;
	padding-bottom: 220px;

}

.new_slide .swiper:after {
	content: '';
	width: 30%;
	background: linear-gradient(to right, rgba(241,245,252, 0) 0%, rgba(241,245,252, .8) 100%);
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 9
}

.new_slide .swiper:before {
	content: '';
	width: 30%;
	background: linear-gradient(to left, rgba(241,245,252, 0) 0%, rgba(241,245,252, .8) 100%);
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9
}

 
.new_slide .cover { width:33%; height:100%; z-index:999; background-color:#f1f5fc; position:absolute; left:0; top:0}

.new_slide .swiper-pagination {
	bottom: 0;
	color: #094b7a;
	display: flex z-index:99;
	justify-content: center;
	gap: 10px;
	font-size: 18px;
}

.new_slide .swiper-slide {
	width: 300px;
	position: relative;
	background-color: #333;
	line-height:0; 
	height:21.2vw;
 
	box-sizing: border-box;
	box-shadow: 3px 3px 20px rgba(0, 0, 0, .1);

}
.new_slide .swiper-slide div.img {display:flex; flex-direction:column;  justify-content:center;  width:100%; overflow:hidden; height:100%}
.new_slide .swiper-slide div.img img {}
.new_slide .swiper-slide.swiper-slide-active {background-color:#fff}

.new_slide .swiper-slide img {
	width: 100%;
	opacity: .2
}

.new_slide .swiper-slide.swiper-slide-active img {
	opacity: 1
}



.new_slide .swiper-slide div.t {
	display: none;
	opacity: 0;

}

.new_slide .swiper-slide-active {
	transform: scale(1.4) !important;
	z-index: 99;
}


/* 반사되는 이미지 */
.new_slide .swiper-slide .shadow {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 100%;
	background-size: cover;
	background-position: top;
	transform: scaleY(-1);
	opacity: 0;

}

.new_slide .swiper-slide.swiper-slide-active .shadow {
	opacity: 0.6;
}

.new_slide .swiper-slide.swiper-slide-active::before {
	content: "";
	position: absolute;
	height: 100%;
	top: 100%;
	left: 0;
	width: 100%;
	background: linear-gradient(to bottom, rgba(241,245,252, 0) 0%, rgba(241,245,252, 1) 20%);
	z-index: 9;

}

.swiper-button-next {
	width: 60px;
	height: 60px;
	right:5%;
	background-color: #003377;
	display: flex;
	align-items: center;
	border-radius: 50%
}

.swiper-button-prev {
	width: 60px;
	height: 60px;
	left: 5%; 
	background-color: #003377;
	display: flex;
	align-items: center;
	border-radius: 50%
}

.swiper-button-next:after {
	content: '\f061';
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	font-size: 20px;
	color: #fff;
}

.swiper-button-prev:after {
	content: '\f060';
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	font-size: 20px;
	color: #fff;

}


@media all and (max-width:1200px) {
		  #main_program span.bl {left:5%; width:30px; height:30px; border-left: 10px solid #003377;  border-top: 10px solid #003377;}
		  #main_program span.bl + span.bl {right:5%;  border-right: 10px solid #003377;  border-bottom: 10px solid #003377;}
		  #main_program .tt {left:calc(5% + 30px); top:75px; font-size:1.5em}
		  .new_slide {flex-wrap:wrap; height:auto;  padding:150px 0 120px 0; width:90%; margin-left:5%; overflow:hidden }
		  .new_slide .text {width:100%;  position:static}
		  .new_slide .cover {display:none}
		  .new_slide .swiper {
			width:150%; 
			margin:0;
			margin-left:-46.8%;
			margin-top:20px;
			flex-shrink: 0;	
 			padding:19vw 0 35vw 0;
			 

		}
		 .new_slide .swiper-slide { height:48vw; }

		.swiper-button-prev {width:40px; height:40px; left:auto; right:50px;  top:auto; bottom:150px}
		.swiper-button-next {width:40px; height:40px;  right:0; top:auto; bottom:150px}

		.new_slide > div h2 {overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			word-wrap: break-word;
			font-size:1.5em
		} 
		.new_slide > div p {overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			word-wrap: break-word;
			font-size:1em;
			margin-top:10px
		} 
		.new_slide .swiper-pagination {font-size:15px}

		.new_slide .swiper-slide-active { transform: scale(1.5) !important;  }

}

 
footer {margin-top:0}
