@charset "utf-8";


 

.scroll { position:fixed; bottom: 30px; left:50%;transform: translateX(-50%);text-align:center; z-index:10; }
.scroll span { font-size:0px; color:#193579;  display:block; /*margin-bottom:10px;*/ font-weight:500;}
.scroll i { 
	background:url(/img/main/scr.png) no-repeat center/ 100%; width:24px; height: 65px; margin:0 auto; display: block;
	position:relative;
	animation:repeatY1 2.5s ease;
	animation-iteration-count: infinite;
	animation-fill-mode:forwards;
	transition:all 0.3s ease;
}

@keyframes repeatY1 {
  0% { transform:translateY(0) }
  70% { transform:translateY(15px) }
  100% { transform:translateY(0) }
}




.contact_bt { position:absolute; right:75px; top:225px; width:144px; height:144px; z-index:12; transform:scale(1); /*transform:scale(0.85);*//*background:url(/img/main/text.png) no-repeat center bottom;padding-bottom: 330px;*/ }
.contact_bt a { display:flex; justify-content:center; align-items:center; width:100%; height:100%;}
.contact_bt a span { 
	display:block; width:144px; height:144px; background:url(/img/main/btn.png?=1) no-repeat center / 100%; position:absolute; left:0; top:0; 
	animation:rotate1 7s ease;
	animation-iteration-count: infinite;
	animation-fill-mode:forwards;
	transition:all 0.1s ease;
}
.contact_bt a strong { 
	border-radius:100px; width:144px; height:110px; 
	/*background:#193479;*/  background:url(/img/main/btn_i.png) no-repeat center 25px;padding-top: 34px; display:flex; justify-content:center; align-items:center;
	font-weight:700; font-size:21px; line-height:1.1; text-align:center; color:#fff;  
	transition:all 0.1s ease; z-index: 11
}

.contact_bt.on a span { background:url(/img/main/btn_on.png) no-repeat center / 100%; }
.contact_bt.on a strong { /*background:#fff;*/ color:#fff; }

.contact_bt a:hover span { background:url(/img/main/btn_on.png) no-repeat center / 100%;   }
.contact_bt a:hover strong { background:url(/img/main/btn_i2.png) no-repeat center 25px;color:#002d56; }
.contact_bt.on a:hover strong {  /*background:#193479;*/ color:#fff; }


/*@media (max-width:1024px){
	.contact_bt { display:none; }
}*/

@keyframes rotate1 {
  0% {  transform:rotate(0) }
  100% { transform:rotate(360deg); }
}


/*231115 끝*/


.noMain{display:none !important;}

.fp-viewing-service_page #on-common-gnb,.fp-viewing-news_page #on-common-gnb,.fp-viewing-foundation_page #on-common-gnb,.fp-viewing-main_footer #on-common-gnb,.fp-viewing-service_page .home_menu,.fp-viewing-news_page .home_menu,.fp-viewing-foundation_page .home_menu,.fp-viewing-main_footer .home_menu,.fp-viewing-service_page .logo,.fp-viewing-service_page .top_util_info,.fp-viewing-service_page .member_util_box,.fp-viewing-news_page .logo,.fp-viewing-news_page .top_util_info,.fp-viewing-news_page .member_util_box,.fp-viewing-foundation_page .logo,.fp-viewing-foundation_page .top_util_info,.fp-viewing-foundation_page .member_util_box,.fp-viewing-main_footer .logo,.fp-viewing-main_footer .top_util_info,.fp-viewing-main_footer .member_util_box{display:none;}
.fp-viewing-service_page  #header .top_util,
.fp-viewing-news_page #header .top_util,
.fp-viewing-foundation_page #header .top_util,
.fp-viewing-main_footer #header .top_util
{padding: 0;}
/*main content common*/

#contents .section .fp-tableCell{padding-top:60px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; }
#contents .section{ background:url(/img/main/bg.jpg?=1)no-repeat 50% bottom #f2f2f2; }
 
#contents .sub_tit{position:relative;padding-top:0px;font-size:22px;color:#000;text-align:center;height: 170px;}
 

.fp-viewing-service_page #header .head_search_wrap,
.fp-viewing-news_page  #header .head_search_wrap,
.fp-viewing-news_page  #header .head_search_wrap,
.fp-viewing-foundation_page #header .head_search_wrap,
.fp-viewing-main_footer #header .head_search_wrap
    {top:13px;z-index:100;}
 
 

/*main_slide*/
#contents .main_slide .slide{background:#000 url( ) no-repeat 50% 50%;background-size:100%;background-size:cover;color:#fff; }
 

.txt-slide1{position: absolute;  top:5%; left:1%; }
.txt-slide2{position: absolute; bottom:8%; left:9%; }
.txt-slide3{position: absolute; top:40%; left:25%; }
.txt-slide4{position: absolute; top:0px; right:25%; }
.txt-slide5{position: absolute; bottom:9%; right:15%; }
.txt-slide6{position: absolute; top:30%; right:-1%; }



.txt-slide1 img {width: 100%; left: 0px; transform:scale(1.0); opacity:1; animation:txt-slide1 1s ease-in 1 Alternate; animation-delay:0s;} 


@keyframes txt-slide1 {
  0% {
    opacity:0;  transform:scale(1.4);  
  }
  50% { transform:scale(1.0);  opacity:1;
  } 
  to { transform:scale(1.0);  opacity:1;
  }
}
.txt-slide2 img {width: 100%; left: 0px; transform:scale(1.0); opacity:1; animation:txt-slide2 2s ease-in 1 Alternate; } 


@keyframes txt-slide2 {
  0% {
    opacity:0;  transform:scale(1.4);  
  }
  50% { transform:scale(1.0);  opacity:1;
  }
	to { transform:scale(1.0);  opacity:1;
  } 
}
.txt-slide3 img {width: 100%; left: 0px; transform:scale(1.0); opacity:1; animation:txt-slide3 3s ease-in 1 Alternate;  } 


@keyframes txt-slide3 {
  0% {
    opacity:0;  transform:scale(1.4);  
  }
  50% { transform:scale(1.0);  opacity:1;
  }
  to { transform:scale(1.0);  opacity:1;
  } 
}
.txt-slide4 img {width: 100%; left: 0px; transform:scale(1.0); opacity:1; animation:txt-slide4 4s ease-in 1 Alternate;  } 


@keyframes txt-slide4 {
  0% {
    opacity:0;  transform:scale(1.4);  
  }
  50% { transform:scale(1.0);  opacity:1;
  }
  to { transform:scale(1.0);  opacity:1;
  } 
}

.txt-slide5 img {width: 100%; left: 0px; transform:scale(1.0); opacity:1; animation:txt-slide5 5s ease-in 1 Alternate;  } 


@keyframes txt-slide5 {
  0% {
    opacity:0;  transform:scale(1.4);  
  }
  50% { transform:scale(1.0);  opacity:1;
  }
  to { transform:scale(1.0);  opacity:1;
  } 
}

.txt-slide6 img {width: 100%; left: 0px; transform:scale(1.0); opacity:1; animation:txt-slide6 6s ease-in 1 Alternate;  } 


@keyframes txt-slide6 {
  0% {
    opacity:0;  transform:scale(1.4);  
  }
  50% { transform:scale(1.0);  opacity:1;
  }
  to { transform:scale(1.0);  opacity:1;
  } 
}


.f1_con_wrap			{   width:100%; margin:0 auto; position:relative; height: 770px;    text-align: center;   }
 
.f1_con_wrap p.m_t1{ animation:tUp_1 1s ease-in 1 Alternate;  font-size: 48px;line-height: 48px; color: #002d56; font-family: 'S-CoreDream-4Regular';padding-top: 36px;  }
.f1_con_wrap p.m_t1 span.t1{font-family: 'S-CoreDream-6Bold'; transform:scale(1.0); opacity:1; animation:big1 1.5s ease-in 1 Alternate;  }
.f1_con_wrap p.m_t1 span.t2{font-family: 'S-CoreDream-6Bold'; transform:scale(1.0); opacity:1; animation:big2 1.5s ease-in 1 Alternate;  }

.f1_con_wrap p.m_t2{ animation:tUp_2 2s ease-in 1 Alternate; font-size: 48px;line-height: 48px;  color: #002d56; font-family: 'S-CoreDream-4Regular';padding-top: 56px; }
.f1_con_wrap p.m_t2 span.t3{font-family: 'S-CoreDream-6Bold'; transform:scale(1.0); opacity:1; animation:big3 2.5s ease-in 1 Alternate; }
.f1_con_wrap p.m_t2 span.t4{font-family: 'S-CoreDream-6Bold'; transform:scale(1.0); opacity:1; animation:big4 2.5s ease-in 1 Alternate; }

.f1_con_wrap p.m_t3{ animation:tUp_3 3s ease-in 1 Alternate; font-size: 48px;line-height: 48px;  color: #002d56; font-family: 'S-CoreDream-4Regular';padding-top:36px;  }
.f1_con_wrap p.m_t3 span.t5{font-family: 'S-CoreDream-6Bold'; transform:scale(1.0); opacity:1; animation:big5 3s ease-in 1 Alternate;}
.f1_con_wrap p.m_t3 span.t6{font-family: 'S-CoreDream-6Bold'; transform:scale(1.0); opacity:1; animation:big6 3s ease-in 1 Alternate;}

.f1_con_wrap p.m_t4{ animation:tUp2 3.8s ease-in 1 Alternate; padding-top: 90px; }

.f1_con_wrap p.m_t5{ padding-top: 100px; transform:scale(1.0); opacity:1; animation:big 4s ease-in 1 Alternate; }
	

	@keyframes tUp_1 {
		  0% {
			opacity: 0; margin-top: 10px;
		  }
		50% {
			opacity: 0;  font-size: 48px; margin-top: 10px;
		  }
		  to {
			opacity: 1;  font-size: 48px; margin-top: 0px;
		  }
		}
	@keyframes tUp_2 {
		  0% {
			opacity: 0;  
			margin-top: 10px;
		  }
		40% {
			opacity: 0;   
			margin-top: 10px;
		  }
		  to {
			opacity: 1;    margin-top: 0px;
		  }
		}
	@keyframes tUp_3 {
		  0% {
			opacity: 0; font-size: 0px; 
			margin-top: 10px;
		  }
		70% {
			opacity: 0;  font-size: 48px; 
			margin-top: 10px;
		  }
		  to {
			opacity: 1;  font-size: 48px; 
			margin-top:  0px;
		  }
		}
	@keyframes tUp2 {
		  0% {
			opacity: 0;margin-top: 10px;  
		  }
		70% {
			opacity: 0;margin-top: 10px;  
		  }
		  to {
			opacity: 1;    margin-top:  0px;
	 
		  }
		}
@keyframes big {
  0% {
    opacity:0;  transform:scale(1.0);     margin-top: 10px;
  }
 90% {   opacity:0;  transform:scale(1.0);     margin-top: 10px;
  }
  to { transform:scale(1.0);  opacity:1;    margin-top:  0px;
  } 
}

@keyframes big1 {
  0% {
    opacity:0;     font-size: 48px; margin-top: 30px;
  }
  50% {   opacity:0;   font-size: 48px;   margin-top: 30px;
  }
  to {   opacity:1;font-size: 48px; margin-top:  0px;
  } 
}
@keyframes big2 {
  0% {
    opacity:0;      font-size: 48px; margin-top: 20px;
  }
  70% {   opacity:0;   font-size: 48px; margin-top: 20px;
  }
  to {    opacity:1;font-size: 48px; margin-top:  0px;
  } 
}
@keyframes big3 {
  0% {
    opacity:0;   transform:scale(2.4);  font-size: 48px; margin-top: 30px;
  }
  60% {   opacity:0;  transform:scale(2.4);  font-size: 48px; margin-top: 30px;
  }
  to { transform:scale(1.0);  opacity:1;font-size: 48px; margin-top:  0px;
  } 
}
@keyframes big4 {
  0% {
    opacity:0;     font-size: 48px; margin-top: 20px;
  }
  80% {   opacity:0;    font-size: 48px; margin-top: 20px;
  }
  to { transform:scale(1.0);  opacity:1;font-size: 48px; margin-top:  0px;
  } 
}
@keyframes big5 {
  0% {
    opacity:0;   transform:scale(1.2);  font-size: 48px; margin-top: 20px;
  }
  70% {   opacity:0;  transform:scale(1.2);  font-size: 48px; margin-top: 20px;
  }
  to { transform:scale(1.0);  opacity:1;font-size: 48px; margin-top:  0px;
  } 
}
 

 
 
/*-----------------------------------------------------------------------------------------------------------
	main service _ 2페이지 
 -----------------------------------------------------------------------------------------------------------*/ 

 
 
.main_service .service_wrap{font-size:0;}
.main_service .bx-viewport{height:450px !important;}
.main_service .main_service_wrap{position: absolute;top:200px; left: 60%;}

div.s2_t1  {float: left;left: 0px;  width: 100%;  height: auto;padding-bottom: 50px; box-sizing: border-box;   }
div.s2_t1 img { padding-left: 60px; transform:scale(1.0); opacity:1; animation:tt1 2.9s ease-in 1 Alternate; }


@keyframes s2_t1 {
  0% {
    opacity:0;  margin-top: 60px;   
  }
  80% {  opacity:0;  margin-top: 60px;  

  }
  to {   opacity:1; margin-top:  0px;  
  } 
}
div.s2_t2  {float: left;left: 0px; width: 100%; height: auto; box-sizing: border-box;   }
div.s2_t2 img { padding-left: 60px; transform:scale(1.0); opacity:1; animation:tt1 4.2s ease-in 1 Alternate;/*border: 0px; z-index: -1*/}


@keyframes s2_t2{
  0% {
    opacity:0;  margin-top: 60px;   
  }
  90% {  opacity:0;  margin-top: 60px;  

  }
  to {   opacity:1; margin-top:  0px;  
  } 
} 

 @keyframes VisualAnimate{
100%{transform:scale(1); }
}

@keyframes SloganAnimate{
100%{opacity:1; transform:translateY(0);}
}

 
 

 
 
/*-----------------------------------------------------------------------------------------------------------
	main_news _ 3페이지 
 -----------------------------------------------------------------------------------------------------------*/
#contents .main_news{padding-top: 20px;background-image:url(/img/main/bg_2_1.jpg?=1); }
#contents .main_news .sub_tit{padding-top: 0px;  }
 
 
/*main footer*/
#contents .section.main_footer_wrap .fp-tableCell{padding-top:0;}


/*main foundation*/
#contents .main_foundation{padding-top: 0px;background-color: #f2f2f2!important;background-image: none;  }
#contents .main_foundation .sub_tit{ padding-top: 0px;color:#fff; background:url(/img/main/main_tt_line.png) no-repeat top center;}
#contents .main_foundation .sub_tit .tit{color:#fff;}
#contents .main_foundation .fp-tableCell{padding-top:110px; }

 
 
.bn_01 { left: 2.5%;width: 20%;float: left;position: relative;text-align: center; display: inline-block}
 
	.bn_01 .wrap {position: relative;width: 100%;height: auto;  margin: 25px auto 0;/*overflow: hidden; */  }
	.bn_01 .wrap p{ display: block; }
	.bn_01 .wrap p.t1 { padding-top:  0px;animation:fadeInDown 2s ease-in 1 Alternate;}
	.bn_01 .wrap p.t2{  padding-top: 95px;animation:fadeInDown 1.5s ease-in 1 Alternate;}
	.bn_01 .wrap p.t3 {  padding-top: 88px;animation:fadeInUp 2s ease-in 1 Alternate;}
	.bn_01 .wrap p.t4 {  padding-top: 40px;animation:fadeInUp 2s ease-in 1 Alternate;}
	.bn_01 .wrap p.t5 {  padding-top: 45px;height: 5px;animation:fadeInUp 2s ease-in 1 Alternate;}


 
.bn_02 { right: 0px;width:74%;float:right;position: relative; background: url(/img/main/bg2.jpg) no-repeat left top;}

.wrap1 { width:100%; position:relative;  } 

.sec2Wrap {position:relative;}

.sec2Wrap .contWrap {
    position:absolute;
    top:0px;
    left:calc(50% - 30px);
    width: calc(50% + 30px);
    padding-left:  30px;
}
.sec2Wrap .contWrap2 {width:1360px;}
.sec2Wrap .contWrap2 .text1 {}

.sec2Wrap .contWrap2 .arrowsWrap {
    display: flex;
    align-items: center;
    width: 100%;margin-left: -70px;
	 padding-top: 30%;
}

.sec2Wrap .contWrap2 .arrowsWrap hr {
    width: 19px;
    height: 0px;
	opacity: 0.0;
    display: block;
}

.sec2Wrap .swiper-container {
    padding-top: 0px;
    margin-left:-630px;
    width: calc(100% + 630px);
    overflow: hidden;
}

.sec2Wrap .swiper-slide {
    width: 330px;margin-top: 40px; padding-right: 115px; 
    position:relative;
    display: flex;
    align-items: flex-end;transform:scale(1.0); opacity:1; animation:swiperslide 2s ease-in 1 Alternate;  margin-left:  0px; 
}

@keyframes swiperslide {
  0% {opacity:0;  margin-left:  -10px; }
  50% {  opacity:0;    margin-left:  -10px; }
  to {   opacity:1; margin-left:  0px;  } 
}

.sec2Wrap .swiper-slide p.num { color: #f2f2f2;font-size: 60px;line-height: 50px;padding-top: 60px; font-family: 'S-CoreDream-6Bold';}
.sec2Wrap .swiper-slide p.num span { color: #f2f2f2;font-size: 30px; font-family: 'S-CoreDream-4Regular';padding: 15px 0 20px;letter-spacing: 5px;}
.sec2Wrap .swiper-slide p.tt { color: #fff;font-size: 36px; font-family: 'S-CoreDream-6Bold';padding: 20px 0;}
.sec2Wrap .swiper-slide p.st { color: #fff;font-size: 18px;  font-family: 'S-CoreDream-4Regular';padding: 0px  ;letter-spacing: -0.5px;word-break: keep-all}
.sec2Wrap .swiper-slide p.img { padding-bottom: 50px;padding-top: 40px;}
.sec2Wrap .swiper-slide p.img2 { padding-bottom:  0px;padding-top: 50px;}

.sec2Wrap .swiper-slide:hover p.num{ color: #002d56; transition:all .8s;}
.sec2Wrap .swiper-slide:hover p.tt {color: #002d56; transition:all .8s;font-size: 37px; }
 

.sec2Wrap .swiper-slide img {
    position:relative;
}


/*--------------------------
3page 효과
-----------------------*/
 
@-webkit-keyframes fadeInUp {
		  from {
			opacity: 0;
			-webkit-transform: translate3d(0%,15%,0);
		  }
		
		  to {
			opacity: 1;
			-webkit-transform: translate3d(0, 0, 0);
			transform: none;
		  }
		}
		
		@keyframes fadeInUp {
		  from {
			opacity: 0;
			-webkit-transform: translate3d(0%,15%,0);
		  }
		
		  to {
			opacity: 1;
			-webkit-transform: translate3d(0, 0, 0);
			transform: none;
		  }
		}
		
		.fadeInRight {
		  -webkit-animation-name: fadeInUp;
		  animation-name: fadeInUp;
		}
	 
@keyframes fadeInDown {
		  from {
			opacity: 0;
			-webkit-transform: translate3d(0%,-15%,0);
		  }
		
		  to {
			opacity: 1;
			-webkit-transform: translate3d(0, 0, 0);
			transform: none;
		  }
		}
 
 
 
 /*--------------------------
4page 효과
-----------------------*/
#section0,#section3,#section1{height:100vh!important; background-position: center bottom !important;padding-top: 170px; }

 
#section3 div  { position: relative;/*right: 0px;*/ width: 100%;    }
#section3 div.img  { float: right;right: 0px; width: 60%;   overflow: hidden;    }


/*#section3 div.img img:before {   transform:scale(1.5); opacity:0;  }*/
#section3 div.img img {   transform:scale(1.0); opacity:1; animation:bigimg 1.3s ease-in 1 Alternate; }


@keyframes bigimg {
  0% {
    opacity:0;right:  0px;padding-top: 300px; padding-left: 300px;  transform:scale(1.4); overflow: hidden;
  }
  50% {  
   /* width: 100px;*/
  }
  to {right:0px; transform:scale(1.0);padding-top:  0px;padding-left :0px;  opacity:1;
  } 
}
#section3 div.map  { float: left;left: 0px; width: 40%;  box-sizing: border-box; overflow: hidden;  }

#section3 div.map img {width: 100%; left: 0px; transform:scale(1.0); opacity:1; animation:map 2.6s ease-in 1 Alternate;/*border: 0px; z-index: -1*/}


@keyframes map {
  0% {
    opacity:0;left:  0px;padding-top: 0px; padding-left: -300px;  transform:scale(1.4); overflow: hidden;
  }
  50% {  
   opacity:0;left:  0px;padding-top: 0px; padding-left: -300px;  transform:scale(1.4); overflow: hidden;
  }
  to {left:0px; transform:scale(1.0);padding-top:  0px;padding-left :0px;  opacity:1;
  } 
}
#section3 div.tt1  {float: left;left: 0px; width: 40%; height: 80px; box-sizing: border-box;   }
#section3 div.tt1 img { padding-left: 80px; transform:scale(1.0); opacity:1; animation:tt1 2.9s ease-in 1 Alternate;/*border: 0px; z-index: -1*/}


@keyframes tt1 {
  0% {
    opacity:0;  margin-top: 60px;   
  }
  80% {  opacity:0;  margin-top: 60px;  

  }
  to {   opacity:1; margin-top:  0px;  
  } 
}
#section3 div.tt2  {float: left;left: 0px; width: 40%; height: 50px; box-sizing: border-box;   }
#section3 div.tt2 img { padding-left: 80px; transform:scale(1.0); opacity:1; animation:tt1 3.2s ease-in 1 Alternate;/*border: 0px; z-index: -1*/}


@keyframes tt2 {
  0% {
    opacity:0;  margin-top: 60px;   
  }
  90% {  opacity:0;  margin-top: 60px;  

  }
  to {   opacity:1; margin-top:  0px;  
  } 
}