@charset "utf-8";

@import url('pretendard.css?v=1'); 
@import url('deco_common.css?v=1'); 

/* 초기화 */

html { width: 100%; height: 100%; }
body { width: 100%; height: 100%;  min-width: 320px; font-family: 'Pretendard','맑은 고딕','Malgun Gothic', '돋움', Dotum, '굴림', Gulim, Helvetica, sans-serif; 
background:#0a1628;-webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; -ms-text-size-adjust:100%; color:#fff;}

A:link { color:#fff; text-decoration:none;}
A:visited { color:#fff; text-decoration:none;}
A:hover { color:#fff; text-decoration:none; }
A:active {	color:#fff;	text-decoration:none;}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/*reset*/

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, 
acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, 
sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, 
caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, 
footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {	margin: 0; padding: 0; border: none 0; font-size: 100%;}
	
/* HTML5 display-role reset for older browsers */
article, aside, hgroup, header, footer, figure, figcaption, nav, section,time, mark, canvas, video, audio, details, summary { display:block;}
body { line-height: 1; font-size:1em;}
ol, ul { list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;}
table {	border-collapse: collapse;	border-spacing: 0;}
input {font-family: 'Noto Sans KR'; vertical-align:middle;}
h1, h2, h3 { font-weight:600;}
h4, h5, h6, h7 { font-weight:400;}

#header, #footer {
  opacity: 0;
  animation: fadeIn 0.5s ease-in forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}


/* 공통 초기 상태 */
.scrolldown-motion .motion-style1,
.scrolldown-motion .motion-style2,
.scrolldown-motion .motion-style3,
.scrolldown-motion ul li {
  opacity: 0;
}

/* active 상태일 때 애니메이션 실행 */
.scrolldown-motion.active .motion-style1 {
  animation: fadeUp 1s ease forwards;
}
.scrolldown-motion.active .motion-style2 {
  animation: fadeUp 1.5s ease forwards;
}
.scrolldown-motion.active .motion-style3 {
  animation: fadeIn 1s ease forwards;
}

/* ul li 순차적으로 나타나기 */
.scrolldown-motion.active ul li {
  animation: fadeUp 0.8s ease forwards;
}
.scrolldown-motion.active ul li:nth-child(1) { animation-delay: 0.2s; }
.scrolldown-motion.active ul li:nth-child(2) { animation-delay: 0.4s; }
.scrolldown-motion.active ul li:nth-child(3) { animation-delay: 0.6s; }
.scrolldown-motion.active ul li:nth-child(4) { animation-delay: 0.8s; }

/* 공통 애니메이션 정의 */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px); /* 시작할 때만 아래 */
  }
  to {
    opacity: 1;
    transform: translateY(0);    /* 최종은 제자리 */
  }
}
/* fadeIn 애니메이션 정의 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}



/* header 영역 */
#header { position:fixed; width:100%; height:80px; z-index:1000; -webkit-transition: all 0.5s; /* Safari */  transition: all 0.5s; border-bottom:1px solid rgba(255, 255, 255, 0.1); background-color: rgba(26, 55, 83, 0.2);}
#header.mover { -webkit-transition: all 0.5s; /* Safari */  transition: all 0.5s; background:#0c192a; }
.wrap { width:100%; max-width:1500px; margin: 0 auto; padding:0 3%; }

#header #logo{ position:relative; float:left; text-align:left; margin: 10px 0 0 1%;  width:17%; }
#header #logo img{ width:130px; }
#header .btn_area { width:17%; height:80px; float:right; text-align:right; margin-right:1%; }
#header .btn_area a { min-width:130px;  cursor:pointer; border:#58bdff 1px solid; margin:1px; color:#58bdff; }
#header .btn_area a:hover { color:#ffffff; border:#ffffff 1px solid;}
#header .btn_area a:hover .arrow {fill:#ffffff;}
#header .btn_area .arrow {opacity:1;fill:#58bdff; width:36px; height:10px; padding-left:7px;}

#container { position:relative; width:100%;}
#container .main-slider { width:100%; height:765px; background: #081120 url(../images/main/bg.jpg) top right no-repeat; animation: bgZoom 1s ease-out; 
  display: flex;
  flex-direction: column;   /* 세로 방향으로 쌓기 */
  justify-content: center;  /* 세로 가운데 정렬 */
  align-items: flex-start;  /* 가로 왼쪽 정렬 */
}

@keyframes bgZoom {
  0% {
    background-size: 1250px; /* 처음엔 살짝 크게 */
  }
  100% {
    background-size: 1147px; /* 원래 크기로 */
  }
}
 * {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#container .main-slider .mtext { width:100%; max-width:1500px; margin: 0 auto; padding:0 3%; text-align: left; text-shadow:#081120 0 0 5px; margin-top:80px;}

.btn_area a {display:inline-block; font-size:1em;line-height:40px; height:1.5; text-align:center;border-radius:20px; padding:0 15px;}
.mtext .t1 { font-size:1.1em; color:#58bdff; height:40px; line-height:40px; border:rgba(88, 189, 255, 0.3) 1px solid; padding:5px 20px;border-radius:10px; display:inline-block;
  display: inline-flex;        /* flexbox 사용 */
  align-items: center;         /* 세로 가운데 정렬 */
  justify-content: flex-start; /* 가로는 왼쪽 정렬 (필요시 center로 변경 가능) */ }
.mtext .t1 i { margin-right:10px;}  
.mtext .t2 { font-size:4em; line-height:1.2; margin:35px 0;}
.mtext .t3 { font-size:1.1em; line-height:1.3; color:#CCC;}

.mtext .btn_area { margin-top:35px;}
.mtext .btn_area a.bodern {background: linear-gradient(to right, #003399, #0066cc); margin:2px 0; margin-right:12px; padding:0 25px;}
.mtext .btn_area a.boder { padding:0 25px;  border: 1px solid #0066cc; margin:3px 0;}
.mtext .btn_area a:hover .arrow {opacity:1;}
.mtext .btn_area .arrow {opacity:0.5;fill:#fff; width:36px; height:10px; padding-left:10px;}

a .arrow {
  transition: transform 0.3s ease; /* 부드럽게 움직이도록 */
}

a:hover .arrow {
  transform: translateX(5px);  /* 오른쪽으로 5px 이동 */
}

#container section.client h3, #container section.import h3, #container section.business h3, #container .m-container h3 { font-size:2em; text-transform:uppercase; text-align:left; padding: 40px 0;}
#container section h3 span { font-size: 0.7em; font-weight:300; padding-left:10px; color:#ccc;}



/* client */
#container section.client { padding:10px 0 60px 0;}
#container section.client ul {display: flex; flex-wrap: wrap; /* 자동 줄바꿈 */ justify-content: space-between;/* 간격 조정 */gap: 15px; }
#container section.client ul li { color:#fff; font-size:1.15em;  font-weight:600; height:95px; border-radius:10px; padding:15px 3% 18px 3%; box-sizing: border-box;
  flex: 0 0 calc(25% - 15px); /* 기본 4개 (25%) */ 
  display: flex;              /* 내부 요소를 flex로 배치 */
  flex-direction: column;     /* 세로로 쌓기 */
  justify-content: space-between; /* 위(이미지)와 아래(텍스트)를 양 끝으로 배치 */
  align-items: flex-end;      /* 오른쪽 정렬 */
  text-align: right;          /* 텍스트 오른쪽 정렬 */
}
#container section.client ul li img { display:block; margin-bottom: auto;/* 위쪽에 붙도록 */ opacity:0.8;}
#container section.client ul li:nth-child(1) { background:rgba(26, 55, 83, 1) url(../images/icon/plane.png) no-repeat left 15px top 15px;}
#container section.client ul li:nth-child(2) { background:rgba(26, 55, 83, 1) url(../images/icon/plane.png) no-repeat left 15px top 15px;}
#container section.client ul li:nth-child(3) { background:rgba(26, 55, 83, 1) url(../images/icon/train.png) no-repeat left 15px top 15px;}
#container section.client ul li:nth-child(4) { background:rgba(26, 55, 83, 1) url(../images/icon/hospital.png) no-repeat left 15px top 15px;}

/* 4가지 import */
#container section.import { width:100%; background:#060d18; border-top: 1px solid #202f46;border-bottom: 1px solid #202f46; padding:30px 0; }
#container section.import ul {display: flex;flex-wrap: wrap; justify-content: center; }
#container section.import ul li {border-right: 1px solid #383d46; font-weight:600; font-size:1.35em; flex: 1 1 25%; text-align:center; margin:30px 0;}
#container section.import li:last-child { border-right: 0px solid #060d18;}
#container section.import ul li strong {color:#58bdff; font-size:55px; padding-bottom:30px; display:inline-block;}

/* business */
#container section.business { padding:30px 0 70px 0;}
#container section.business ul { display: flex; flex-wrap: wrap; /* 줄바꿈 허용 */gap: 35px;}
section.business ul > li.airport, section.business ul > li.railway, section.business ul > li.consulting {
  flex: 1 1 calc(50% - 35px); /* 2줄 배치 (50%) */  box-sizing: border-box; border:1px solid #397aa9; border-radius:10px; padding:45px; font-size:1.35em; line-height:1.3; word-break:keep-all;}
#container section.business ul > li strong { font-size:32px; padding-bottom:5px; display:inline-block; }
#container section.business ul li.airport { background:rgba(11, 57, 94, 1) url(../images/main/business_01.jpg) no-repeat top/cover; height:430px;}
#container section.business ul li.railway { background:rgba(11, 57, 94, 1) url(../images/main/business_02.jpg) no-repeat top/cover; height:430px;}
#container section.business ul li.consulting  { background:rgba(11, 57, 94, 1) url(../images/main/business_03.jpg) no-repeat top right; min-height:160px;}
#container section.business ul li.consulting  .btn_area a.bodern {background: linear-gradient(to right, #003399, #0066cc); margin:2px 0; padding:0 25px; font-size:16px;}
#container section.business ul li.consulting  .btn_area .arrow {opacity:0.5;fill:#fff; width:36px; height:10px; padding-left:10px;}
#container section.business ul > li ul { display: flex; flex-wrap: wrap; /* 줄바꿈 허용 */gap: 5px; margin-top:30px; }
#container section.business ul > li ul.point li { font-size:18px; font-weight:600; background:rgba(2, 4, 24, 0.5); padding:3px 15px; border-radius:10px; border: 1px solid #58bdff;}

#container section.business ul li.consulting {
  display: flex;
  align-items: flex-end; /* 하단 기준 정렬 */
  gap: 35px;              /* 텍스트와 버튼 사이 간격 */
}

#container section.business ul li.consulting .desc {
  display: inline-block; /* 글자 길이만큼만 차지 */ 
  word-break:keep-all;
}

#container section.business ul li.consulting .btn {
  flex-shrink: 0;        /* 버튼 크기 유지 */
}


/* project, product */
#container .m-container { background:#09182f url(../images/main/bg2.jpg) top center fixed; padding:30px 0; line-height:1.8em;}

#container .m-container ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 15px;}
#container .m-container ul li { background-color: rgba(10, 22, 42, 0.9); border-radius:10px; padding:30px; color:#ccc; box-sizing: border-box; flex: 0 0 calc(25% - 15px);}
#container .m-container section.project { padding:10px 0 20px 0;}
#container .m-container section.project ul li .date { color:#58bdff;}
#container .m-container section.project ul li strong { font-size:1.25em; color:#fff; font-weight:600;}
#container .m-container section.product { padding:10px 0 50px 0;}
#container .m-container section.product ul li .tit { color:#58bdff; font-size:1.2em; font-weight:600;}







/* footer 영역 */
#footer { position:relative; width: 100%; background:#070f1c; color:#ccc;font-weight:300; line-height:1.5em; padding:40px 2.5%;}
#footer .wrap { max-width:1500px; width:100%; margin:0 auto; }
#footer h4 { font-size:1.25em; margin-bottom:5px;}
#footer .addressArea{overflow:hidden; }
#footer address {  float:left;max-width:360px; width:100%; font-style:normal;font-size:0.85em; margin-top:15px;}
#footer .btn { float:left; display:inline-block; padding-top:20px;max-width:320px; width:100%;}
#footer .btn a { color:#58bdff; font-size:1em; width:99%; text-align:center; border: 1px solid #58bdff; border-radius:20px; height:40px; line-height:30px; display:inline-block; padding:5px 2%; }
#footer .btn a:hover{ color:#fff; text-decoration:none;border: 1px solid #fff;}
#footer .btn a:hover .arrow {fill:#ffffff;}
#footer .btn .arrow {opacity:1;fill:#58bdff; width:36px; height:10px; padding-left:10px;}

#scroll {
    position:fixed;
    right:20px;
    bottom:20px;
    cursor:pointer;
    width:40px;
    height:40px;
    text-indent:-9999px;
    display:none;
    border:0px solid #000;
	background:#bbb;
	z-index:99999;
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#000;
}

br.br-n {display:none;}
br.br-b {display:block;}
@keyframes up-down{
	from {transform:translatey(0px);}
	to {transform:translatey(-10px)}
}
@-moz-keyframes up-down{
	from {transform:translatey(0px);}
	to {transform:translatey(-10px)}
}
@-webkit-keyframes up-down{
	from {transform:translatey(0px);}
	to {transform:translatey(-10px)}
}
@-o-keyframes up-down{
	from {transform:translatey(0px);}
	to {transform:translatey(-10px)}
}


@keyframes fadein {
	from { opacity: 0; } 
	to { opacity: 1; }
}
@-moz-keyframes fadein {
	/* Firefox */
	from { opacity: 0; } 
	to { opacity: 1; }
}
@-webkit-keyframes fadein {
	/* Safari and Chrome */
	from { opacity: 0; } 
	to { opacity: 1; }
}
@-o-keyframes fadein {
	/* Opera */
	from { opacity: 0; } 
	to { opacity: 1; }
}



@media all and (max-width: 960px) {
#container section.client ul { gap: 10px; }
#container section.client ul li { flex: 0 0 calc(50% - 10px); padding:15px 5% 18px 5%; margin-bottom:10px;}
#container .m-container ul li{ flex: 0 0 calc(50% - 10px); margin-bottom:10px;}
}

@media all and (max-width: 768px) {
#header .btn_area { width:140px; float:right; margin-right:50px; }
#container .main-slider { height:640px;  background: #081120 url(../images/main/bgm.jpg) top right no-repeat; }

@keyframes bgZoom {
  0% {
    background-size: 700px; /* 처음엔 살짝 크게 */
  }
  100% {
    background-size: 640px; /* 원래 크기로 */
  }
}
.mtext { word-break:keep-all;}	
.mtext .t1 { font-size:0.95em;  height:36px; line-height:1.2; padding:0 10px;}
.mtext .t2 { font-size:2.8em; line-height:1.3; margin:30px 0;}
.mtext .t3 { font-size:1em; line-height:1.3;}

#container section.import ul li { flex: 1 1 50%; }
#container section.import li:nth-child(2) { border-right: 0px;}
section.business ul > li.airport, section.business ul > li.railway, section.business ul > li.consulting { flex: 1 1 100%; }
#container section.business ul { gap:20px;}

#container section.business ul li.consulting {
    flex-direction: column;      /* 세로 배치 */
    align-items: flex-start;     /* 왼쪽 정렬 */
	gap:15px;
  }

}

@media all and (max-width: 640px) {
#container section.import ul li { font-size:1.25em; }
#container section.import ul li strong { font-size:45px;}
}

@media all and (max-width: 460px) {
.mtext br.brb { display:none !important;}
#container h3 span { padding:10px 0 0 0 !important; display:inline-block;}
#container section.client ul li { flex: 0 0 100%; padding:15px 8% 18px 8%; margin-bottom:5px;}
#container section.client ul li img { transform: scale(1);  transform-origin: center right;}
#container .m-container ul li{ flex: 0 0 100%;margin-bottom:5px;}
#container section.business ul > li strong { font-size:28px;}
section.business ul > li.airport, section.business ul > li.railway, section.business ul > li.consulting { font-size:1.25em;}

br.br-n {display:block;}
br.br-b {display:none;}
}

@media all and (max-width: 360px) {
#container section.import ul li { font-size:1.05em; }
#container section.import ul li strong { font-size:40px;}
.mtext .t2 { font-size:2.6em; }
.mtext .t1 { font-size:0.85em; }
}