html,body {margin : 0; padding : 0;}    /*이미지 위 아래 여백 0*/
html {scroll-behavior:smooth;}

/*header*/
.header {position : fixed; width:100%; z-index:9999;
                     background: transparent;}
.header.is-solid {background:#ffffff;}
.header hr {margin: 0; border: 0; border-top: 1px solid #ddd; display: block;}
main {padding-top: 0;}
.header-inner {max-width: 1100px; margin:0 auto; height: 70px; padding: 0 12px; display: flex; align-items: center; }
.header-logo img{height: 50px; width: auto; display: block;}

.nav{display: flex; gap: 18px; margin-left:auto;}

.nav a{position: relative; text-decoration: none; font-size: 16px; font-weight:500;
       font-family: 'Montserrat', sans-serif;
       font-weight: 500;
       letter-spacing: 0.3px;

       color: transparent;
       background-image: linear-gradient(90deg, #111 0%, #111 50%, rgb(246,103,0) 50%, rgb(246,103,0) 100%);
       background-size: 200% 100%;
       background-position: 0% 50%;
       -webkit-background-clip: text;
       background-clip: text;
       -webkit-text-fill-color: transparent;
       transition: background-position 0.45s ease;}

.nav a:hover {background-position: -100% 50%; transform: translateY(-2px);}


body {margin: 0; padding: 0;
      background: none;}

body::before {content: ""; position: fixed; position: absolute; top:0; left:0; width:100%; height: calc(100vh + 10px);
              background: url("image/Main_background.png");
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center 50%;
              z-index: -1;
              pointer-events: none;}
/*main*/

/*main-Main*/
.Main-section {position: relative; min-height: 100vh;
               /*가운데 정렬*/
               display: flex; flex-direction: column; align-items: center; justify-content: center;
               text-align: center;
               background: transparent;}
.Main-title, .Main-content{position: relative; z-index:1; 
                           opacity: 1; transform: translateY(0);}
.Main-title {font-size: 48px; color: black; font-weight: 700; margin-bottom:30px; max-width: 1000px; transition-delay:0ms;}
.Main-content {max-width: 900px; line-height: 1; font-size: 16px; color: #555; transition-delay: 2500ms;}
/* JS가 켜졌을 때만 숨김(초기 상태) */
html.js #Main .Main-title, html.js #Main .Main-content{opacity: 0; transform: translateY(24px);}
@keyframes fadeUp {from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); }}
html.js #Main .Main-title.is-show{animation: fadeUp 1500ms ease both; animation-delay: 400ms;}
html.js #Main .Main-content.is-show{animation: fadeUp 1500ms ease both; animation-delay: 950ms;}

/*main-Business*/
.Business-section {background: #ffffff; padding: 72px 0;}
.Business-container {width: min(1100px, 92%); margin: 0 auto; text-align: center;}
.Business-title {margin: 0 0 8px; font-size: 44px; font-weight: 900; letter-spacing: -0.8px;}
.Business-content {margin: 0 0 36px; color: #444}
/*카드 레이아웃 3개 위치 유지*/
.Business-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left;}
.Business-card {background: #fff; border: 2px solid #111; border-radius: 14px; padding:18px 18px 14px;}
.card-title {margin: 0 0 12px; text-align: center; font-size: 22px; font-weight: 900; padding-bottom: 10px; border-bottom: 3px solid #ff6a00;}
.card-block {margin: 14px 0;}
.block-title {margin: 0 0 10px; font-size: 16px; font-weight: 900; color: #ff6a00;}
.block-text {margin: 0; color: #222; line-height: 1.7; font-size: 14px;}
/*번호 박스 스타일*/
.need-list {list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px;}
.need-list li {display: flex; align-items: center; gap: 10px; background: #f3f3f3; border-radius: 10px; padding: 10px 12px; font-size: 14px; font-weight:700; color:#111;}
.need-list .num {display: inline-flex; align-items: center; justify-content:center; width: 34px; height: 28px; border-radius: 7px; background: #ff6a00;
                 color: #fff; font-weight: 900; font-size:12px; flex:0 0 auto;}
@keyframes fadeUp {from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); }}
html.js #Business .Business-title,html.js #Business .Business-content,html.js #Business .Business-card {opacity: 0;transform: translateY(24px);}
html.js #Business .Business-title.is-show {animation: fadeUp 1000ms ease both;animation-delay: 250ms;}
html.js #Business .Business-content.is-show {animation: fadeUp 1000ms ease both;animation-delay: 500ms;}
html.js #Business .Business-card.is-show {animation: fadeUp 1000ms ease both;}
html.js #Business .Business-card.is-show:nth-of-type(1) { animation-delay: 1000ms; }
html.js #Business .Business-card.is-show:nth-of-type(2) { animation-delay: 1250ms; }
html.js #Business .Business-card.is-show:nth-of-type(3) { animation-delay: 1500ms; }


/*보안 솔루션 높이*/


/*main - Organization*/
#Organization.Organization-section {height: 90vh; padding: 0; display: flex; align-items:center; justify-content: center; overflow: hidden; background: #f3f3f3;}
.Organization-section {background:#ffffff; padding: 90px 0;}
.Organization-wrap {width: min(1100px, 92%); margin: 0 auto; text-align: center;}
.Organization-title {margin: 0 0 6px; font-size: 44px; font-weight: 900; letter-spacing: -0.8px;}
.Organization-content {margin: 0 0 36px; color: #666;}
.Organization-chart {padding: 20px 0 10px;}
.Organization-chart ul {list-style: none; margin: 0; padding: 0;}
.Organization-root > li {position: relative; display: inline-block; padding-top: 0;}
.Organization-box {display: inline-flex; align-items: center; justify-content: center; padding: 14px 18px; border-radius: 10px; font-weight: 800;
          white-space: nowrap; border: 2px solid #111;}
.Organization-top {background: #ffa600; color: #fff; font-size: 16px;border-color: transparent; min-width: 160px;}
.Organization-dept {background: #f47200; color: #fff; border-color: transparent; margin-top: 30px; min-width: 150px;}
.Organization-item {background: #f2f6fa; color: #111; border-color: #dcdcdc; font-weight: 700; margin-top:0px; min-width: 150px;}
.Organization-level2 {position: relative; display: flex; gap: 22px; justify-content: center; margin-top: 70px; padding-top:34px;
             padding-top: 36px; /*상단라인공간*/ z-index: 0;}
/*대표이사 -> 2레벨 중앙 세로선*/
.Organization-level2::before {content:""; position: absolute; top: 0px; left: 50%; width: 2px; height: 34px; background: #cfd8e3;
             box-sizing: border-box; transform: translateX(-50%);}
/*2레벨 가로 라인(부서들 연결)*/
:root {--colW: 210px; --dot: 14px; --lineH: 4px;}
.Organization-level2::after {content:""; position: absolute; top: 32px; left: calc(var(--colW)/2); right: calc(var(--colW)/2); height: var(--lineH); background:#cfd8e3; border-radius: 999px;}
/*각 부서 li의 "점 + 세로선"*/
.Organization-level2 > li {position: relative; top: 34px; min-width: 210px; /*박스 항목 공간 확보*/ z-index:2;}
/*점(이미지 느낌)*/
.Organization-level2 > li::before {content:""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; background: #ff5500; border-radius: 50%; 
                          transform: translateX(-50%);}
/*점 아래로 내려오는 세로선*/
.Organization-level2 > li::after {content:""; position:absolute; top:7px; left: 50%; width: 2px; height: 23px; background:#cfd8e3;
                         z-index: 1;transform: translateX(-50%) translateX(10px);}
/*3레벨(업무 목록)*/
.Organization-level3 {position: relative; margin-top: 34px; display: grid; gap: 0px; justify-items: center;}
.Organization-level3::before {content:""; position:absolute; top:0; bottom:0; left:50%; width: 2px; background:#cfd8e3; transform: translateX(-50%); z-index:0;}
/*3레벨 각 항목 위쪽 세로선*/
.Organization-level3 > li {position: relative; padding-top: 14px;}
@keyframes fadeUp {from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); }}
html.js #Organization .Organization-top, html.js #Organization .Organization-dept, html.js #Organization .Organization-item {opacity: 0;transform: translateY(24px);}
html.js #Organization .Organization-title,
html.js #Organization .Organization-content 
{opacity: 0; transform: translateY(24px);}
html.js #Organization .Organization-title.is-show {animation: fadeUp 1500ms ease both; animation-delay: 200ms;}
html.js #Organization .Organization-content.is-show{animation: fadeUp 1500ms ease both; animation-delay: 500ms;}
html.js #Organization .is-show {animation: fadeUp 1000ms ease both;}
html.js #Organization .Organization-top.is-show {animation-delay: 300ms;}
html.js #Organization .Organization-dept.is-show {animation-delay: 700ms;}
html.js #Organization .Organization-item.is-show:nth-of-type(1) { animation-delay: 800ms;}
html.js #Organization .Organization-item.is-show:nth-of-type(2) { animation-delay: 900ms;}
html.js #Organization .Organization-item.is-show:nth-of-type(3) { animation-delay: 1000ms;}
html.js #Organization .Organization-item.is-show:nth-of-type(4) { animation-delay: 1100ms;}
html.js #Organization .Organization-level2::before,
html.js #Organization .Organization-level2::after,
html.js #Organization .Organization-level3::before,
html.js #Organization .Organization-level2 > li::before,
html.js #Organization .Organization-level2 > li::after 
{opacity: 0; transform: translateY(10px);}
html.js #Organization:has(.Organization-top.is-show) .Organization-level2::before,
html.js #Organization:has(.Organization-top.is-show) .Organization-level2::after,
html.js #Organization:has(.Organization-top.is-show) .Organization-level3::before,
html.js #Organization:has(.Organization-top.is-show) .Organization-level2 > li::before,
html.js #Organization:has(.Organization-top.is-show) .Organization-level2 > li::after 
{animation: fadeUp 900ms ease both; animation-delay: 1200ms;}
html.js #Organization .Organization-level2::after {left: calc(var(--colW) / 2 - 6px); right: calc(var(--colW) / 2 + 6px);}
html.js #Organization .Organization-level2 > li::before {left: calc(50% - 6px);}
#Organization .Organization-box{position: relative;z-index: 20;}
#Organization .Organization-level2,
#Organization .Organization-level3,
#Organization .Organization-level2 > li{position: relative;z-index: 1;}
#Organization .Organization-level2::before,
#Organization .Organization-level2::after,
#Organization .Organization-level3::before,
#Organization .Organization-level2 > li::before,
#Organization .Organization-level2 > li::after{z-index: 0 !important;}


/*main-Item & Solution 부분*/
.Item-section {background:#ffffff; padding: 90px 0;}
.Item-wrap {width: min(1100px, 92%); margin: 0 auto; text-align: center;}
.Item-title {margin: 0 0 6px; font-size: 44px; font-weight: 900; letter-spacing: -0.8px;}
.Item-desc {margin: 0 0 40px; color: #666;}
/*Grid: 위 4개 / 아래 3개 */
.Item-grid {display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; text-align: left;}
.Item-grid > .Item-card:nth-child(5):hover,
.Item-grid > .Item-card:nth-child(6):hover,
.Item-grid > .Item-card:nth-child(7):hover {transform: translateY(-4px);}

/*Card*/
.Item-card {background: #fff; border: 2px solid #111; border-radius: 14px; padding: 18px 18px 20px;
            /*모든 박스 크기 동일 + 스크롤 없음*/
            display: flex; flex-direction: column; height: 500px; box-sizing: border-box;}
.Item-card:hover {transform: translateY(-7px); box-shadow: 0 4px 10px rgba(0,0,0,0.12) 0 10px 24px rgba(0, 0, 0, 0.60);}
/*아이콘 자리*/
.Item-icon {width: 44px; height: 44px; border-radius: 12px; background:#f0f0f0;
            flex: 0 0 auto; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.Item-icon img, .Item-icon svg {width: 100%; height: 100%; border-radius: 12px; object-fit: contain; display: block;}
.Item-cardTitle {margin: 0; font-size: 20px; font-weight: 900; padding-bottom: 6px; border-bottom: 3px solid #ff6a00; display: inline-block;}
/*리스트*/
.Item-list {margin-top: 7px; padding: 0; list-style:none; color: #222; font-size: 14px; line-height: 1.8;
            /*카드 높이 동일하게 만들기 위해 공간 분리*/
            flex: 1; display: grid; align-content: start;}
/*보안처럼 많은 항목은 2열로(스크롤 없이)*/
.Item-list-2col {column-count: 2; column-gap: 16px;}
.Item-list li {background:#f3f3f3; border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; font-weight: 700;}
.Item-list a {color: inherit; text-decoration: none; font-weight: 600;}
.Item-list a:hover {color: #ff6a00;}
@keyframes fadeUp {from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); }}
html.js #Item .Item-title,html.js #Item .Item-desc,html.js #Item .Item-card{opacity: 0; transform: translateY(24px);}
html.js #Item .is-show{animation: fadeUp 650ms ease both;}
html.js #Item .Item-title.is-show{ animation-delay: 200ms; }
html.js #Item .Item-desc.is-show{  animation-delay: 500ms; }
html.js #Item .Item-card.is-show:nth-of-type(1){ animation-delay: 600ms; }
html.js #Item .Item-card.is-show:nth-of-type(2){ animation-delay: 700ms; }
html.js #Item .Item-card.is-show:nth-of-type(3){ animation-delay: 800ms; }
html.js #Item .Item-card.is-show:nth-of-type(4){ animation-delay: 900ms; }
html.js #Item .Item-card.is-show:nth-of-type(5){ animation-delay: 1000ms; }
html.js #Item .Item-card.is-show:nth-of-type(6){ animation-delay: 1100ms; }
html.js #Item .Item-card.is-show:nth-of-type(7){ animation-delay: 1200ms; }
html.js #Item .Item-card.is-show:nth-of-type(8){ animation-delay: 1300ms; }


/*main - Contact 부분*/
.Contact {background: #ffffff; padding: 90px 0;}
.Contact-wrap {width: min(1100px, 92%); margin: 0 auto; text-align: center;}
.Contact-title {margin: 0 0 8px; font-size: 44px; font-weight: 900; letter-spacing: -0.8px;}
.Contact-desc {margin: 0 0 20px; font-size: 16px; color: #666;}
.Contact-form {width: min(980px, 100%); margin: 0 auto; border: 0; padding: 18px; box-sizing: border-box; background:#fff;}
.Contact-field {border: 2px solid #111; margin-bottom: 6px; background:#fff;}
.Contact-input {width: 100%; box-sizing: border-box; border: 0; outline: 0; padding: 12px 12px; font-size: 16px; background: transparent;}
/*문의내용 큰 textarea*/
.Contact-field--message {position: relative; border: 2px solid #111;}
.Contact-textarea {width: 100%; box-sizing: border-box; border: 0; outline: 0; padding: 12px 12px; font-size:16px; line-height: 1.6;
                   resize: none; min-height: 320px; background: transparent;}
.Contact-note {margin: 2px 2px 3px 0; text-align: right; color: #d40000; font-size: 10px; font-weight: 700;}
.Contact-submit {width: 100%; border: 0px solid #111; background: #ff6a00; font-size: 18px; font-weight: 900; padding: 8px 8px; cursor:pointer;}
.Contact-submit:hover {transform: translateY(-1px);}


/*main-Customer-section*/
.Customer {background: #fff; height: auto; min-height: 10px; padding: 18px 0 8px;}
.Customer-inner {width: min(1100px, 92vw); margin: 0 auto; display: flex; flex-direction: column; gap: 0px;}
.Customer-title {font-size: 18px; font-weight: 700; margin-bottom: 5px; letter-spacing: -0.2px;}
/*Marquee*/
.logo-marquee {--logo-height:80px; --gap: 10px; --duration: 45s; /*속도: 숫자가 커질수록 느림*/
               position: relative; overflow: hidden; border-radius: 0px; padding: 0px 0;
               border-top: 2px solid #ccc; border-bottom: 2px solid #ccc;}
/*좌우 가장자리 살짝 페이드*/
.logo-marquee::before, .logo-marquee::after {content:""; position:absolute; top:0; width:80px; height:100%; z-index:1; pointer-events: none;}
.logo-marquee::before {left: 0; background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);}
.logo-marquee::after {right: 0; background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 100%);}
.logo-marquee-track {display: flex; width: max-content; animation: marquee var(--duration) linear infinite;}
/*hover시 멈춤*/
.logo-marquee:hover .logo-marquee-track {animation-play-state: paused;}
.logo-marquee-group {display: flex; align-items: center; gap: var(--gap); padding-right: var(--gap);}
.Customer-logo {height: var(--logo-height); width: auto; max-width: 180px; object-fit: contain; display: block;}
/*무한 슬라이드*/
@keyframes marquee {from{transform: translateX(0%);} to{transform: translateX(-50%);}}






/*footer 부분*/
.footer {background: #eeeeee; color: #333333; padding: 48px 0; font-size: 14px;}
.footer-inner {max-width: 1100px; margin: 0 auto; padding: 0 16px; display: flex; justify-content: space-between; align-items: center;}
.footer-info p {margin: 6px 0; line-height: 1.4;}
.footer-logo img {height: 60px;}

/*home 버튼*/
.home-btn {position: fixed; top: 14px; right: 20px; padding: 6px 14px; font-size: 10px; font-weight: 700; text-decoration: none;
           color: #fff; background-color: #333; border-radius: 200px; z-index: 100000;}
.home-btn:hover {transform: translateY(-2px);}

/*모바일 반응형*/
/*태블릿 이하*/
@media (max-width: 900px)
{
      .Business-grid{grid-template-columns: repeat(2, 1fr);}
      .Item-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
      .Item-card{height: auto;}
      .Organization.Organization-section{height:auto;}
}
@media (max-width: 600px)
{
      .Business-grid{grid-template-columns: 1fr;}
      .Item-grid{grid-template-columns: 1fr;}
      .Item-list-2col{column-count:1;}
      .Organization-level2{display: grid; grid-template-columns: 1fr; gap:20px; margin-top: 20px; padding-top:0;}
      .Organization-level2::before,
      .Organization-level2::before,
      .Organization-level3::before,
      .Organization-level2 > li::before,
      .Organization-level2 > li::after{display: none;}
      .Organization-level2 > li{top: 0; min-width: 0;}
      .Organization-dept{margin-top: 0;}
      .Organization-level3{margin-top: 12px;}
      .footer-inner{flex-direction: column; align-items: flex-start; gap: 16px;}
}