#main {background-color:#000}
.main_hr {height:200px}
.main_hr2 {height:110px}

.main_vi {width:100%; height:calc(100vh - 100px); margin-top:100px; box-sizing:border-box;   overflow:hidden;  position:relative; background-color:#000;   }
.iframe_wrap {display:inline-block; top:50%; transform: translate(0, -50%);   z-index:-9; padding:56.25% 0 0 0; width:100%;  position:relative; z-index:99  }
.iframe_wrap iframe {position:absolute;  top:50%; left:50%;  transform: translate(-50%, -50%); width:100%; height:100%; }
.iframe_wrap img {position:absolute;  top:50%; left:50%;  transform: translate(-50%, -50%); width:100%; height:100%; }
.main_vi .in {position:absolute; z-index:9999; transform: translate(-50%, -50%); top:50%; left:50%; height:100%; color:#fff; width:88%}
.main_vi .in .t1 {position:absolute; top:130px; left:0; font-size:56px; width:100%} 
.main_vi .in .t1 img {margin-bottom:30px; max-width:80%}
.main_vi .in .t2 {position:absolute; animation-name: t_ani; animation-duration:1s; animation-fill-mode: forwards;  bottom:50px; display:inline-block;  right:0; font-size:20px; line-height:1.6; width:auto;  opacity:0; }
.main_vi .in .t2 b {font-size:25px}

.main_vi .in .t1 > div {width:100%;   overflow:hidden;  position:relative}
.main_vi .in .t1 p { width:100%;  animation-name: t_ani; animation-duration:1s; animation-fill-mode: forwards; position:absolute; left:0;  height:100%;  opacity:0;  }
.main_vi .in .t1_1 { height:100px; }
.main_vi .in .t1_2 {  height:130px; margin-top:20px  }
.main_vi .in .t1_2 p {animation-delay: .5s; }


@keyframes t_ani {
from {
		opacity:0;filter:Alpha(opacity=0);
		transform: translateY(100%); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		transform: translateY(0); 
	}
} 

 

 @media all and (max-width:900px) {
		.main_hr {height:170px}
		.main_hr2 {height:110px}


        .main_vi { height:calc(100vh - 60px); margin-top:60px;   }
		.main_vi .in .t1 {top:60px; font-size:20px} 
		.main_vi .in .t1_1 { height:12vw; }
		.main_vi .in .t1_2 {  height:55px;  margin-top:15px  }
		.main_vi .in .t2 { bottom:120px; font-size:13px;  }
		.main_vi .in .t2 b {font-size:18px;  }
		.iframe_wrap {height:100vh }
		.iframe_wrap iframe {  width:300vw; height:100%; }
		.iframe_wrap img {  width:300vw; height:100%; }

}


.main_wrap {width:100%; box-sizing:border-box; display:inline-block; background: linear-gradient(rgba(0, 0, 0, 1) 50%, rgba(255, 255, 255, 1)); padding-bottom:200px; font-size:17px;  line-height:1.5;  color:#fff; margin-top:-10px}
.main_wrap h3.tit {color:#FFF; font-size:90px; font-weight:700; line-height:1; }
.main_wrap h3.tit p {font-family:'Outfit';}
.main_wrap h3.tit + p.tit_info {color:#AEAEAE; font-size:22px; margin-top:20px}
.main_wrap h4 { font-size: 40px; }


.h3_ani {opacity:0;}
 
.active .h3_ani {opacity:1; width:100%; height:90px;   overflow:hidden;  position:relative}
.active .h3_ani p { width:100%;  animation-name: t_ani; animation-duration:1s; animation-fill-mode: forwards; position:absolute; left:0;  height:100%;  }

.main_wrap section {position:relative;  padding-top:200px; }
.main_wrap section .in {position:relative; z-index:9}
.bg {position:absolute; max-width:100%; right:0 }
.bg.left {  left:0; right:auto; top:75% }



@media all and (max-width:900px) {
		.main_wrap section {  padding-top:150px; }
		.main_wrap { font-size:16px;  }
		.main_wrap h3.tit {font-size:40px}
		.active .h3_ani {  height:45px;  }
		.main_wrap h3.tit + p.tit_info {font-size:16px}
		.main_wrap h4 { font-size: 28px; }
		.bg {  display:none  }
		.bg.left { display:block; top:90% }

}


 
.main-intro-info {display: flex; margin-top:40px;  justify-content:space-between; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.main-intro-info .info-box {position: relative; width:100%; padding-top:20px; padding-bottom:20px; padding-left:2%; box-sizing:border-box;  border-left:1px solid #9D9D9D;}
.main-intro-info .info-box:first-child {border-left:none; padding-left:0}
.main-intro-info .info-box:nth-child(1) {width:31%}
.main-intro-info .info-box:nth-child(2) {width:33%}
.main-intro-info .info-box:nth-child(3) {width:36%}

 .main-intro-info .info-box img {width:45px} 
  
.main-intro-info .count-num-box { width:100%; }
.main-intro-info .count-num-box .box_wrap {width:100%; margin-top:20px;   display:flex; align-items:flex-end; justify-content:flex-start; }
  
.main-intro-info .count-num-box p {color: #9D9D9D; font-size: 16px;}
/*퍼센트*/.main-intro-info .count-num-box strong  {font-size: 75px;  line-height:1; }
.main-intro-info .count-num-box .t {margin-left:30px; font-size:20px}
.main-intro-info .count-num-box  .com {  color:#fff; font-weight:800; font-size: 140px; line-height:.7; }

.main-intro-info .count-num-item-wrap .count-num-item-box {height:26.65em;   } /*전체ul*/
.main-intro-info .count-num-item-wrap {height:2.665em; font-size:3rem; overflow:hidden; line-height:0; padding:0 5px; margin:0 -4px }
.main-intro-info .count-num-item-wrap .count-num-item-box .count-num-item {text-align:center; color:#fff; font-weight:800;  font-size: 160px;letter-spacing:-5px; line-height:.8;  font-family:'Outfit'; }



/* active */
.active .count-num-item-box{animation:count-up-ani 4s forwards;}
.active .count-num-item-box.down {animation:count-down-ani 4s forwards;}


@keyframes count-up-ani {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, -90%, 0);
    }
}
@keyframes count-down-ani {
    0% {
        transform: translate3d(0, -90%, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}  

 
@media all and (max-width:1600px) {
		.main-intro-info .count-num-box .box_wrap {flex-wrap:wrap;}
		.main-intro-info .count-num-box .t {margin-left:0; width:100%; display:flex; align-items:center; gap:20px; margin-top:20px}
		.main-intro-info .count-num-box .t  br {display:none}
		.main-intro-info .count-num-box  .com { font-size:100px}
 }


@media all and (max-width:1350px) {
 
		.main-intro-info .count-num-item-wrap .count-num-item-box {height:16.66em;   }
		.main-intro-info .count-num-item-wrap { height:1.67em;  }
		.main-intro-info .count-num-item-wrap .count-num-item-box .count-num-item {  font-size: 100px; }
		.main-intro-info .count-num-box strong {font-size:50px}
        .main-intro-info .count-num-box  .com { font-size:70px; }
 
 }



 
@media all and (max-width:900px) {
		.main-intro-info {flex-wrap:Wrap}
		.main-intro-info .info-box {width:100% !important; padding:0}
		.main-intro-info .count-num-box .box_wrap { width:100%; align-items:center; flex-wrap:nowrap; margin-top:0px}

		.main-intro-info .count-num-box .t {display:inline-block; width:200px;  font-size:20px;  margin-left:auto}
		.main-intro-info .count-num-box .t  br {display:block}
		.main-intro-info .info-box {border-left:none}

		.info-box + .info-box {margin-top:60px}

} 	

@media all and (max-width:500px) {
		.main-intro-info .count-num-box .t { width:130px; font-size:16px;}
 
		.main-intro-info .count-num-box strong {font-size:40px;  margin-top:5px; margin-left:10px} 

		.main-intro-info .count-num-item-wrap .count-num-item-box { height:  9.99em;  }
		.main-intro-info .count-num-item-wrap {  height: 1em; } 
		.main-intro-info .count-num-item-wrap .count-num-item-box .count-num-item { font-size: 60px; font-weight:600  }
		 .main-intro-info .info-box img {width:35px} 
        .main-intro-info .count-num-box  .com { font-size:50px; }


}


/* .main-intro-info .count-num-item-wrap .count-num-item-box { height: 10.83em;  }
		.main-intro-info .count-num-item-wrap {  height: 1.08em; }
		.main-intro-info .count-num-item-wrap .count-num-item-box .count-num-item { font-size: 65px;   }
		
		.main-intro-info .count-num-item-wrap .count-num-item-box {  height: 11.66em;  }
		.main-intro-info .count-num-item-wrap { height: 1.17em; }
		.main-intro-info .count-num-item-wrap .count-num-item-box .count-num-item { font-size: 70px;   }
		

	   .main-intro-info .count-num-item-wrap .count-num-item-box { height: 12.48em;  }
		.main-intro-info .count-num-item-wrap {   height: 1.25em;  }
		.main-intro-info .count-num-item-wrap .count-num-item-box .count-num-item { font-size: 75px;   }

 */


.solution {position:relative}
.solution .bg {left:0; top:0}
.solution h3 p {background: linear-gradient(90deg, #6DA0FF 0%, #0040B7 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}
.solution ul {display:flex; gap:50px; margin-top:40px; }
.solution ul li {width:33%; padding-bottom:30%; position:relative; border-radius:10px; overflow:hidden}
.solution ul li > div {width:100%; height:100%; position:absolute; left:0; /* opacity:0; */  box-sizing:border-box;  }
.solution ul li:nth-child(1) > div {background:url('/common/img/solution_bg1.png') no-repeat; background-size:cover}
.solution ul li:nth-child(2) > div {background:url('/common/img/solution_bg2.png') no-repeat; background-size:cover}
.solution ul li:nth-child(3) > div  {background:url('/common/img/solution_bg3.png') no-repeat; background-size:cover}

.solution ul li  > div:before {background:rgba(0,0,0,.5); width:100%; height:100%; position:absolute; left:0; top:0; padding:30px; box-sizing:border-box; content:'';  }

.solution ul li > div span {width:90%; position:absolute; left:5%; top:5%; font-family:'Outfit';  }
.solution ul li > div div {width:90%; position:absolute; left:5%; bottom:0; height:40%;  color: #BFBFBF; font-size: 16px; }
.solution ul li > div h5 {font-size: 35px; margin-bottom:15px;  color:#fff}
 
/* .solution.active ul li > div { animation-name: list_ani; animation-duration:1.5s; animation-fill-mode: forwards; }
.solution.active ul li:nth-child(2) > div {animation-delay: .5s;  }
.solution.active ul li:nth-child(3) > div {animation-delay: 1s;  }
 */

@media all and (max-width:1600px) {
		.solution ul  {gap:30px}
		.solution ul li  {padding-bottom:40%; }
		.solution ul li > div div {  height:60%;   }
		.solution ul li > div h5 {font-size: 25px; }


}
@media all and (max-width:900px) {
		.solution ul {flex-wrap:wrap}
 		.solution ul li {width:100%;  padding-bottom:100% }
		.solution ul li > div div { height:auto;  bottom:5%}

}

.service div.flex {justify-content:space-between; gap:30px}
.service div.flex div {width:50%; flex-shrink:0;  display:inline-flex; flex-direction: column; align-items: flex-start; /* 자식 요소를 가로로 중앙 정렬 */ }
.service div.flex img {max-width:calc(50% - 30px)}
.service div.flex div ul {width:100%; margin:20px 0 40px 0}
.service div.flex div p.t {width:100%; }
.service div.flex div p.more_btn { margin-top: auto; margin-bottom:4vw; flex-grow: 0; }


  @media all and (max-width:1300px) {
		.service div.flex {flex-wrap:wrap}
		.service div.flex div { width:100%; order:2 }
		.service div.flex img {margin:0 auto; max-width:100%; order:1}
		.service div.flex div p.more_btn {margin-top:50px; margin-bottom:0 }
		 .service  hr.main_hr2 {height:50px}

}

.news h3.tit {color:#000}
.news_list {display:flex; gap:2%;  margin-top:40px;  }
.news_list li {width:32%; height:300px; position:relative; overflow:hidden}

.news_list li div {position:absolute; background-color:#fff; border-radius:10px; padding:50px 30px; box-sizing:border-box; color:#333;  width:100%; height:100%; left:0;  /* opacity:0;  */border:2px solid #fff; transition: all 0.3s ease-out;}
.news_list li div:hover {border-radius: 20px; border: 2px solid #666; }

.news_list li h4 {font-size:25px; margin-bottom:20px;
   color:#000; 
    width: 100%;
     overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;

}
.news_list li h4 + p {height:75px;  
 width: 100%;
     overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
	margin-bottom:30px;

}

.news_list li p.date {display:flex; align-items:center; gap:10px}

/* .active .news_list li div { animation-name: list_ani; animation-duration:1.5s; animation-fill-mode: forwards; }
.active .news_list li:nth-child(2) div {animation-delay: .5s;  }
.active .news_list li:nth-child(3) div {animation-delay: 1s;  }
 */

@keyframes list_ani {
	0% { bottom:-100%; opacity:0; } 
	50% { bottom:-50%; opacity:0; } 
	100% { bottom:0; opacity:1} 
}



  @media all and (max-width:900px) {
		.news_list  {flex-wrap:wrap; gap:20px}
		.news_list li {width:100%; height:auto}
		.news_list li div {position:static; height:auto; padding:30px }
 
		.news_list li h4 {font-size:18px; }
		.news_list li h4 + p { font-size:14px; height:60px;   }
		.news_list li p.date {font-size:14px;   }

}


.contact.in {padding-top:0; }
.contact h3.tit p {position:relative; z-index:9; font-size:70px;gap:15px; justify-content:Center; cursor:pointer;  font-family:'Outfit';  transition: all 0.3s ease-out; }
.contact h3 p:hover   {color:var(--main_c) } 
.contact h3 p svg path {transition: all 0.3s ease-out;  } 
.contact h3 p:hover svg path {stroke:var(--main_c) } 
.contact div {background:url('/common/img/contact_bg.png') no-repeat center; background-size:cover;  position:relative; border-radius:10px; overflow:hidden; padding:100px 3%; box-sizing:border-box }
.contact div:before {background:rgba(0,0,0,.5); width:100%; height:100%; position:absolute; left:0; top:0;   content:'';  }
.contact div p {position:relative; z-index:9; font-size:30px;  font-family:'Outfit'; }
 

   @media all and (max-width:900px) {
		.contact h3.tit p {font-size:40px; gap:10px}
		.contact h3 p svg   { width:25px} 
		.contact div p { font-size:20px;   }

}