.vi_bg {position:absolute; left:50%; top:50%;  min-width:100%; min-height:100%;  transform: translate(-50%, -50%);}
 
 .vi_t {width:100%; display:inline-block; box-sizing:border-box; padding:0 5%;  position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); }
 .vi_t  b {font-size:3.2rem; line-height:1.3em;  font-weight:900;  width:100%; display:inline-block; color:#fff;    letter-spacing:0;  margin:20px 0; }
.vi_t  p {font-size:2rem; font-weight:500; letter-spacing:0.5px; width:100%; display:inline-block; color:#fff; font-family:'Montserrat';  }
   
 
@media (min-width:1200px) {
.vi .pc_br {display:block} 
 }
 @media (max-width:1200px) {
 .vi_t  b {font-size:2rem }
.vi_t  p {font-size:1.5rem;   }
}



.section-nav { z-index: 10; position: fixed; top:35%; right:2%;  width: 150px; height: 100%; text-align:right;
    opacity: 0;
    -webkit-transition: ease-out .35s;
    -o-transition: ease-out .35s;
    transition: ease-out .35s;
}
[data-nav="on"] { animation: nav .35s ease-out .35s forwards; }
[data-nav="off"] { display: none; }

@-webkit-keyframes nav {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes nav {
    from { opacity: 0; }
    to { opacity: 1; }
}
.section-indicator { position: relative;z-index:999999999; top:0; bottom: 0; left: 0; margin: auto; height: 140px;  }
 .section-indicator li { margin:5px 0; }
.section-indicator li:first-child { margin-top: 0; }
.section-indicator li:last-child { margin-bottom: 0; }

.btn-section { position: relative; padding-right: 28px;
    font-size: 13px; color: #fff; line-height:20px;  font-weight:600;  
    opacity: .5; letter-spacing:0.5px;
    -webkit-transition: .35s ease-out .35s;
    -o-transition: .35s ease-out .35s;
    transition: .35s ease-out .35s; 
}
.btn-section  span {  display:inline-block; vertical-align:2.5px}
.btn-section i { position: absolute; top: 0; right: 0; bottom: 0; margin: auto; width: 18px; height: 18px; }
.btn-section i:before{
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 6px; height: 6px; background: #fff; border-radius: 50%;
    box-sizing: border-box;
}
.btn-section i:after{
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; border: 2px solid #fff; border-radius: 50%;
    box-sizing: border-box;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: .55s ease-out .35s;
    -o-transition: .55s ease-out .35s;
    transition: .55s ease-out .35s;
    opacity: 0;
}
.btn-section:hover{ opacity: .8; }
.btn-section:hover i:after{
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
.section-indicator li.on .btn-section{ opacity: 1; }

.section-indicator li.on .btn-section i:after{
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
 
@media (max-width:1200px) {
    .section-nav {   right:1% }
}
@media (max-width:950px) {
    .section-nav {  display: none; }
}
 

.section-indicator li.main_nav_off { }
.section-indicator li.main_nav_off .btn-section { color: #333;  }
.section-indicator li.main_nav_off .btn-section i:before{  background: #333;  }
.section-indicator li.main_nav_off .btn-section i:after{  border: 2px solid #333; }
 

/* Section */
.section { overflow: hidden; position: relative;  }
 
.main_flex {width:100%; box-sizing:border-box; padding:0 8%;  display:flex; align-items:center;}
.main_flex .img_box {width:50%; height:50vh;   position:relative;  transition: all 0.3s ease-out; box-sizing:border-box; background-color:#f1f1f1; }
 
.main_flex .img_box::after {content:''; width:100%; height:100%;  position:absolute; right:0; bottom:0; background:url('/common/img/main_img1_n.png') no-repeat center;   background-size:cover; transition: all 0.3s ease-out;}
.main_flex .img_box:hover::after {content:''; width:100%; height:100%;  position:absolute; right:-20px; bottom:-20px; background:url('/common/img/main_img1_n.png') no-repeat center;   background-size:cover;}



.main_flex .type2::after { background:url('/common/img/main_img2_n.jpg') no-repeat center;   background-size:cover; left:0; }
.main_flex .type2:hover::after {  background:url('/common/img/main_img2_n.jpg') no-repeat center;   background-size:cover; right:0; left:-20px; }
.main_flex .type3::after { background:url('/common/img/main_img3_n.jpg') no-repeat center;   background-size:cover; }
.main_flex .type3:hover::after {  background:url('/common/img/main_img3_n.jpg') no-repeat center;   background-size:cover;}
.main_flex .type4::after { background:url('/common/img/main_img4.jpg') no-repeat center;   background-size:cover;  left:0}
.main_flex .type4:hover::after {  background:url('/common/img/main_img4.jpg') no-repeat center;   background-size:cover; left:0}
.main_flex .type5::after { background:url('/common/img/main_img5.png') no-repeat center;   background-size:cover;  left:0}
.main_flex .type5:hover::after {  background:url('/common/img/main_img5.png') no-repeat center;   background-size:cover; left:0}

 
.main_flex .img_box div {width:100%; height:100%; background:rgba(0,0,0,.5); display:inline-block}
.main_flex .img_box h3 {color:#fff; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);  font-size:4rem;   font-family:'Montserrat' }
 

.main_flex .text {width:50%; padding:0 5%; box-sizing:border-box;  position:relative}

 
.main_flex .img_box span.line {width:100px; height:1px; background-color:#333; position:absolute; right:-50px; top:60px; z-index:9999999999}
    
.text .info_t { width:100%;   display:inline-block; box-sizing:border-box;  color:#222; font-size:1.5rem; line-height:1.6em;  letter-spacing:-1px; margin:3% 0 5% 0;word-break: keep-all;}

.text h3 {color:#002752; font-size:3.8rem; font-family:'Montserrat'; font-weight:800  }

h3.tit {color:#111; font-size:3rem; line-height:1em; margin-bottom:50px; display:block;  font-family:'Montserrat' ;  width:100%;  font-weight:700 !important}
 
  
.basic_btn {width:200px; text-align:center;  display:inline-block; transition: all 0.3s ease-out; position:relative; overflow:hidden; }
.basic_btn span {border:1px solid #002752;  box-sizing:border-box; width:100%; display:inline-block; color:#002752 !important;  font-size:1em; line-height:47px;  letter-spacing:1px; font-family:'Montserrat';font-weight:500 }
 
.basic_btn::after {width:100%; height:100%; display:inline-block ; 
 position:absolute; 
 left:-100%; top:0; 
 content:'+view more'; 
 background-color:#002752; 
 color:#fff;
 font-size:1em; line-height:47px; letter-spacing:1px; font-family:'Montserrat'; font-weight:500;  transition: all 0.5s ease-out; }
.basic_btn:hover::after  {left:0;  }
 

.notice {width:100%; padding:0 15%; box-sizing:border-box;  display:flex; justify-content:space-between}
.notice li {width:31%; vertical-align:middle; }
.notice li b {color:#333; width:100%; font-weight:600; font-size:1.5rem;  letter-spacing:-1px; line-height:1.35em;  display:inline-block;  
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1; /* 라인수 */
-webkit-box-orient: vertical;
word-wrap:break-word;
}
 
.notice li p {color:#777; width:100%; font-size:1rem; display:inline-block;  
	display:inline-block; 
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 4; /* 라인수 */
	-webkit-box-orient: vertical;
	word-wrap:break-word;
}
.notice li .line {width:100%; height:1px; position:relative;  margin:15px 0; background-color:#ddd }
.notice li .line span {width:100%; height:1px; display:inline-block;  background-color:#002752; 
    position:absolute; left:-100%; transition: all 0.3s ease-out;}
.notice li a:hover .line span  { left:0;}

.notice li span.date {color:#999; display:block; margin-top:15px;  font-family:'Montserrat'; }
.notice li span.btn {  line-height:40px; display:inline-block; text-align:center; font-size:0.9rem; letter-spacing:1px; font-weight:500; margin-top:10px; transition: all 0.3s ease-out; font-family:'Montserrat'; float:right}
.notice li a:hover span.btn  {font-weight:600; text-decoration:underline}

.notice li:hover  p {color:#333}
.notice li:hover  span.date {color:#333}


.service {width:100%; display:flex; margin-bottom:50px}
.service li {width:25%; box-sizing:border-box; padding:4%; background-color:rgba(255,255,255,.7); color:#222; font-size:1.4rem; line-height:1.45em; margin:0 1%; font-weight:500; display:flex; align-items:center ; border:1px solid #fff; transition: all 0.3s ease-out; }
.service li p {width:100%; }

.service li:hover {border:1px solid #002752;   color:#002752}

@media (max-width:1200px) {

	.text .info_t {font-size:1.3rem;  }
	.text h3 { font-size:3rem; }

 }

@media (max-width:950px) {

		.main_flex {flex-wrap:wrap; padding:0 5%;}
		.main_flex .img_box {width:100%; height:30vh; order:1}
		.main_flex .text {width:100%; margin-top:30px; padding:0; order:2 }
		.text .info_t {font-size:1rem; line-height:1.4em;     margin:15px 0 25px 0}
		.text h3 { font-size:2rem; }

		.main_flex .img_box span.line {display:none}


		.main_flex .img_box::after {right:0; bottom:0; left:0;  }
		.main_flex .img_box:hover::after {right:0; bottom:0; left:0;  }
		.main_flex .type2::after {right:0; bottom:0; left:0;  }
		.main_flex .type2:hover::after {right:0; bottom:0; left:0;  }



		h3.tit {color:#111; font-size:2rem; line-height:1em;  margin-bottom:5vw; display:block}

		 
		 
		.notice {padding:0 5%; display:block;}
		.notice li {width:100%; }
		.notice li:nth-child(3) {display:none}
		.notice li:nth-child(2) {margin-top:5vw}
		.notice li div {height:120px}
		 
		.notice li b { font-size:1.2rem; 
		-webkit-line-clamp: 1; /* 라인수 */
		   }

		.notice li p { font-size:1rem; 
		-webkit-line-clamp: 2; /* 라인수 */
		   }

		.notice li span.date {margin-top:10px}  
		.notice li span.btn {display:none}  


		.service {flex-wrap:wrap; margin-bottom:20px}
		.service li {width:100%;  padding:3%;  font-size:1.05rem;  margin:0; margin-bottom:3px; text-align:left }
		 

 }
 

 
 

.hidden {opacity:0;}
.console-container {
   font-size:4rem; 
  font-weight:800;
  text-align:center;
  
  width:100%; letter-spacing:-3px;
  display:inline-block;
   color:white; 
   margin:auto;
}
.console-underscore {
   display:inline-block;
  position:relative;
  top:-0.14em;
  left:10px;
}

@media screen and (max-width:950px) {
.console-container { font-size:8vw;}
}
.slide_wrap {width:100%; height:250px; position:relative; } 
.slide_iframe { height:100%; width:100%; position:absolute; }
.slide_wrap div {position:absolute;   height:230px; top:0; left:0; width:100%; }

@media screen and (max-width:950px) {
.slide_wrap {  height:270px;    }
.slide_wrap div {height:250px; }
}


footer {position:absolute; bottom:0; left:0; background:rgba(0,0,0,.6);}


/*모션*/

/* ======= Section ======= */
  
[data-an="fade-up"]{
    opacity: 0;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
    -webkit-transition: ease-in-out 1s;
    -o-transition: ease-in-out 1s;
    transition: ease-in-out 1s;
}
[data-fade="in"] [data-an="fade-up"]{
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}


[data-an="fade-up2"]{
    opacity: 1;
   -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition: ease-out 3s;
    -o-transition: ease-out 3s;
    transition: ease-out 3s;
}
[data-fade="in"] [data-an="fade-up2"]{
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}


 [data-an-order="1"]{
    -webkit-transition-delay: .4s;
    -o-transition-delay: .4s;
    transition-delay: .4s;
}
[data-an-order="2"]{
    -webkit-transition-delay: .55s;
    -o-transition-delay: .55s;
    transition-delay: .55s;
}
[data-an-order="3"]{
    -webkit-transition-delay: .7s;
    -o-transition-delay: .7s;
    transition-delay: .7s;
}
[data-an-order="4"]{
    -webkit-transition-delay: .85s;
    -o-transition-delay: .85s;
    transition-delay: .85s;
}
[data-an-order="5"]{
    -webkit-transition-delay: 1s;
    -o-transition-delay: 1s;
    transition-delay: 1s;
}