.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: #fff;  }
.section-indicator li.main_nav_off .btn-section i:before{  background: #fff;  }
.section-indicator li.main_nav_off .btn-section i:after{  border: 2px solid #fff; }
 

/* Section */
.section { overflow: hidden; position: relative;  }
 
/*.main_flex {width:100%; box-sizing:border-box; padding:0 8%;  display:flex; align-items:center;}*/
.main_flex {width:100%; box-sizing:border-box; display:flex; align-items:center; max-width:71.55%; margin:0 auto;}
.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 .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 .text {width:50%; 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}

.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;  }
 

.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}


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;
}

/*공통*/

.section { height: 100vh !important} 






.fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
.fp_item {display:table; table-layout:fixed; width:100%;}

.col_wh{color:#fff !important;}
.bg1 {background:url('/common/img/main/main29.jpg') no-repeat; background-size:cover;}
.bg2 {background:url('/common/img/main/main32.jpg') no-repeat; background-size:cover;}
.bg3 {background:url('/common/img/main/main31.jpg') no-repeat; background-size:cover;}


/*news*/
.main_box {max-width:1440px; margin:0 auto;}
.main_box h2{color:#111; margin:3.4em 0 1em 0; font-size:3rem; line-height:1em; margin-bottom:50px; display:block;  font-family:'Montserrat' ;  width:100%;  font-weight:700 !important}

.main_box1 h2{margin-bottom:1em; text-align:center;}
.main_box2 h2{color:#fff;}

.sec_3{width:1440px; margin:0 auto; max-width:95%;}
.p_list_wrap {display:flex; margin-bottom:2.5em; }
.p_list_wrap > div { background:#fff; text-align:center; box-sizing:border-box; cursor:pointer; background-size:50% !important}
.p_list_wrap:nth-child(1){margin-left:0}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:0;}
.p_list  {position: relative; overflow:hidden; border:1px solid #ddd}
.p_list div.img_box {display:block; width:100%; height:25vh; overflow:hidden; position:relative}
.p_list div.img_box img {min-width:100%; max-width:150%; min-height:100%; position:absolute; top:0%; left:50%; transform:translate(-50%,0%);}
.news_box{text-align: left; color:#333; padding:1.5vh 1em; box-sizing:border-box;}
.swiper-slide:hover .news_box{background-color:#ddd;}
.news_box span{display:block;}
.news_box span:nth-child(1){font-size:1.25rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:10px; letter-spacing:-1px;}
.news_box span:nth-child(2){font-size:1rem; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;  letter-spacing:-1px;  line-height:1.2; margin-bottom:10px}
.news_box span:nth-child(3){color:#777; font-size:.9em; text-align: right;}

.swiper-container.swiper-container1{max-width:95%; margin:0 auto;}



/*about*/
.title_h1{color:#fff; text-align:center; font-size:1.2rem; margin-bottom:3em;}

.main_box0{height: 100%;}

.about_box{height: 100%;}
.about_box ul{display:flex; height: 100%;}
.about_box ul li{ width:25%; height:100%; background:rgba(0,0,0,0.2); cursor: pointer; position: relative;}

.about_box ul li:last-child{border-right: none;}
.about_wrap{display:flex; justify-content:center; align-items:center; flex-direction:column; height: 100%;}
.about_wrap:hover{background-color:#0e4194; opacity:.8}
.about_box_img{margin-bottom:85px;}
.about_box_title{color:#fff; margin-bottom:30px; font-size:2rem; font-weight:600;}
.about_box_txt{color:#fff; line-height:1.4; font-size:1rem; padding:1em}


.about_box ul li:nth-child(2){background:url('/common/img/main/0610_img05.jpg')}
.about_box ul li:nth-child(3){background:url('/common/img/main/0610_img06.jpg')}
.about_box ul li:nth-child(4){background:url('/common/img/main/0610_img07.jpg')}
.about_box ul li:nth-child(5){background:url('/common/img/main/0610_img08.jpg')}

.about_box h2{font-family:'Montserrat'; font-weight:700; line-height:1em; margin-bottom:50px; font-size:3rem; display:none !important;}

/*technology*/
.tech_box{}
.tech_box ul{display: flex;}
.tech_box ul li{width:33.3333%; padding:2em 1em; transition:all 1s; background:rgba(0,0,0,0.5); box-sizing:border-box;}
.tech_box ul li:hover{background:#005138; transform:scale(1.1); transition:all 1s; border:none;}
.tech_box ul li:nth-child(2){margin:0 1.5em;}
.tech_box ul li a{text-align:center}
.tech_box ul li a dt{padding:0.3em 0 0.5em 0; font-weight:500; font-size:2rem; color:#fff;}
.tech_box ul li a dd{line-height:1.4; font-size:1rem; color:#fff; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:90%; margin:0 auto;}
.tech_box span{color:#fff; font-size:1rem; display:flex; justify-content:center; align-items:center; margin-top:1em;}
.tech_box span img{margin-left:0.5em;}









 @media all and (max-width:1400px) {
.tech_box ul li a dt{font-size:1.8rem;}
.about_box_title{font-size:1.8rem;}
}






  @media all and (max-width:1000px){
#content_box{flex-wrap:wrap; gap:1em;}
#content_box dl{flex-basis:292px; flex-grow:1;}
#content_box .btn{display:none;}
#content_box dl{border-bottom:1px solid #ddd; width:100%; margin-right:0;}
#content_box.content_box1 dl{border-bottom:1px solid #b1b1b1 !important}
#content_box dl a{height:230px;}
.main_box2 dl{border-bottom:1px solid #999 !important;}


.tech_box ul{flex-wrap:wrap; gap:1em;}
.tech_box ul li{flex-basis:292px; flex-grow:1;}
.tech_box ul li:nth-child(2){margin:0;}


 .about_box ul{justify-content:center; align-items:center; flex-direction:column; margin-top:1em;}
 .about_box ul li{width:71.5%; height:auto; margin-bottom:1em;}
 .about_box_img{display:none;}
 .about_box_title{margin-bottom:10px; font-size:1.5rem;}

.about_box h2{display:block !important; data-an="fade-up"}

.about_wrap{justify-content:right;}
.about_wrap:hover{background-color:initial; opacity:initial}
.about_box_title{margin-bottom:0; display:flex; justify-content:center; align-items:end; background:rgba(0,0,0,0.5); width:100%; height:100px; line-height:56px;}
.about_box_img{display:block; position: absolute; bottom:33%; left:50%; transform:translate(-50%,-33%); margin-bottom:0;}
.about_box_img img{width:41px;}

.about_box ul li:last-child{border-bottom:none;}

.about_box ul li:nth-child(2){background:none;}
.about_box ul li:nth-child(3){background:none;}
.about_box ul li:nth-child(4){background:none;}
.about_box ul li:nth-child(5){background:none;}
 }




   @media all and (max-width:900px){
   h3.tit{font-size:2.5rem !important;}
   .main_box h2{font-size:2.5rem !important}
.about_box h2{font-size:2.5rem;}
 }

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

.cont{position: relative;}
#content_box dl a{height:120px; justify-content:right;}
#content_box dl a dt{color:#fff; height:50px; line-height:50px; background:#4a9bf4; width:100%; margin:0;}
#content_box dl a img{position: absolute; top:0; left:0; background:none; width:50px;}
#content_box dl a .stxt{padding:1em;}
#content_box dl.contact1 a:after, #content_box dl.contact2 a:after, #content_box dl.contact3 a:after, #content_box dl.contact4 a:after{display:none;}
#content_box dl.contact5 a:after, #content_box dl.contact6 a:after, #content_box dl.contact7 a:after{display:none;}
#content_box dl:hover dt{background:#555 !important}

#content_box dl:hover a dd{color:#222;}
#content_box.content_box1 dl a dt{background:#8fb53e}
#content_box.content_box1 dl a img{background:none;}



.tech_box ul li{padding:0}
.tech_box ul li a dl{position:relative;}
.tech_box ul li a dl img{position:absolute; top:0; left:0; margin:0.2em; width:42px;}
.tech_box span{display:none;}
.tech_box ul li a dt{background:#005138; height:50px; line-height:50px; padding:0}
.tech_box ul li a dd{padding:1em;}
.tech_box ul li:hover{background:rgba(0,0,0,0.5); transform:none; transition:none;}
 }

 @media all and (max-width:500px){
   h3.tit{font-size:2rem !important;}
   .main_box h2{font-size:2rem !important}
   .about_box h2{font-size:2rem;}
 .tech_box ul li a dt{font-size:1.3rem;}




 }