@charset "utf-8";
/* ============================================
   헤더 기본 스타일 (웹)
   ============================================ */
.header{position:fixed;top:0;left:0;width:100%;height:85px;z-index:1000;transition:all .3s ease;background:transparent;}
.header-inner{max-width:1680px;width:100%;height:100%;margin:0 auto;padding:0 40px;display:flex;justify-content:space-between;align-items:center;}

/* 로고 */
.header-inner .logo {display: flex;align-items: center;z-index: 99999;}
.header-inner .logo img {width: 80px;height: 50px;transition: all 0.3s ease;}

/* 네비게이션 */
.header .nav {position: relative;}
.header .nav .gnb {display: flex;}
.header .nav .gnb .depth1 {display: flex;}
.header .nav .gnb .depth1 .dpt1-list{display:flex;align-items:center;gap:60px;list-style:none;margin:0;padding:0}
.header .nav .gnb .depth1 .dpt1{position:relative}
.header .nav .gnb .depth1 .dpt1>a{color:#fff;font-size:1.1rem;font-weight:600;letter-spacing:-0.75px;text-transform:uppercase;transition:all .3s ease;position:relative;padding:10px 0}
.header .nav .gnb .depth1 .dpt1.active>a,.header .nav .gnb .depth1 .dpt1:hover>a span{color:#0095FF;font-weight: 700;}

/* 서브메뉴 (웹) */
.header .nav .gnb .depth1 .dpt1 .depth2{position:absolute;top:0%;left:50%;transform:translate(-25%, 60px);width:230px;padding:20px 0;background:#030303;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,0.3);opacity:0;visibility:hidden;transition:all .3s ease;}
.header .nav .gnb .depth1 .dpt1.has-submenu:hover .depth2,
.header .nav .gnb .depth1 .dpt1.has-submenu.on .depth2{opacity:1;visibility:visible}
.header .nav .gnb .depth1 .dpt1 .depth2 .dpt2{display: flex; padding:8px 20px;transition:all .3s ease}
.header .nav .gnb .depth1 .dpt1 .depth2 .dpt2 a{width: 100%; display:flex;padding-bottom: 16px; color:#fff; font-weight: 600; border-bottom: 1px solid #ffffff10; font-size:.875rem;letter-spacing:-.75px;line-height:1.4;transition:all .3s ease;text-align:center}
.header .nav .gnb .depth1 .dpt1 .depth2 .dpt2{display: flex; padding:8px 20px;transition:all .3s ease}
.header .nav .gnb .depth1 .dpt1 .depth2 .dpt2:last-child{padding-bottom: 0;}
.header .nav .gnb .depth1 .dpt1 .depth2 .dpt2:hover a,.header .nav .gnb .depth1 .dpt1 .depth2 .dpt2.active a span{color:#0095FF; font-weight: 700;}
.header .nav .gnb .depth1 .dpt1 .depth2 .dpt2.active a span{font-weight: 700;}

/* 모바일 메뉴 버튼 (웹에서는 숨김) */
.header .mobile-btn{display:none;width:30px;height:24px;flex-direction:column;justify-content:space-between;background:transparent;border:none;cursor:pointer;padding:0;position:relative;z-index:10001}
.header .mobile-btn span{display:block;width:100%;height:2px;background:#fff;transition:all .3s ease;border-radius:2px;position:absolute}
.header .mobile-btn span:nth-child(1){top:0}
.header .mobile-btn span:nth-child(2){top:50%;transform:translateY(-50%)}
.header .mobile-btn span:nth-child(3){bottom:0}
.header.active .mobile-btn span,.header.fixed .mobile-btn span{background:#fff}

/* 모바일 메뉴가 열릴 때 햄버거 버튼이 X로 변환 */
body.act .header .mobile-btn span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
body.act .header .mobile-btn span:nth-child(2){opacity:0}
body.act .header .mobile-btn span:nth-child(3){bottom:50%;transform:translateY(50%) rotate(-45deg)}

/* ============================================
   헤더 active 상태 (스크롤, hover, 모바일 메뉴)
   ============================================ */
.header.active,
.header.fixed,
.header.mobile-open {background: #030303;}

.header.active .nav .gnb .depth1 .dpt1 > a,
.header.fixed .nav .gnb .depth1 .dpt1 > a {color: #fff;}

.header.active .nav .gnb .depth1 .dpt1.active > a,
.header.active .nav .gnb .depth1 .dpt1:hover > a,
.header.fixed .nav .gnb .depth1 .dpt1.active > a,
.header.fixed .nav .gnb .depth1 .dpt1:hover > a {color: #257DD7;}

/* active 상태에서 서브메뉴 배경도 변경 */
.header.active .nav .gnb .depth1 .dpt1 .depth2,
.header.fixed .nav .gnb .depth1 .dpt1 .depth2 {background: #030303;}

/* ============================================
   모바일 메뉴
   ============================================ */
.mobile-menu{position:fixed;top:0;left:0;width:100%;height:100vh;max-height:0;overflow:hidden;background:#000;z-index:10000;transition:max-height .3s ease;opacity:0;visibility:hidden}
.mobile-menu.open{max-height:100vh;opacity:1;visibility:visible}
.mobile-menu-bg{display:none}
.mobile-nav{padding-top:85px;padding-bottom:30px;overflow-y:auto;height:100vh}
.mobile-gnb{display:flex;flex-direction:column}
.mobile-gnb .mobile-depth1>a{display:block;padding:20px 30px;color:#fff;font-size:1.2rem;font-weight:600;letter-spacing:-.75px;text-transform:uppercase;transition:all .3s ease}
.mobile-gnb .mobile-depth1.active>a,
.mobile-gnb .mobile-depth1>a:hover{color:#257DD7;}

/* 모바일 서브메뉴 (아코디언) */
.mobile-gnb .mobile-depth1.has-submenu .mobile-submenu-toggle{position:relative;padding-right:50px}
.mobile-gnb .mobile-depth1.has-submenu .mobile-submenu-toggle::after{content:'';position:absolute;right:30px;top:50%;transform:translateY(-50%) rotate(180deg);width:24px;height:24px; transition:all .3s ease; background: url(/images/arrow-down.svg) 50% 50% no-repeat; background-size: contain;filter: grayscale(1) brightness(10)}
.mobile-gnb .mobile-depth1.has-submenu.open .mobile-submenu-toggle::after{transform:translateY(-50%) rotate(0deg);filter: none;}
.mobile-gnb .mobile-depth1 .mobile-depth2{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.mobile-gnb .mobile-depth1.open .mobile-depth2{max-height:500px}
.mobile-gnb .mobile-depth1 .mobile-depth2 li a{display:block;padding:15px 30px 15px 50px;color:#fff;font-size:1rem;letter-spacing:-.5px;transition:all .3s ease}
.mobile-gnb .mobile-depth1 .mobile-depth2 li.active a,.mobile-gnb .mobile-depth1 .mobile-depth2 li a:hover{color:#257DD7;}

/* ============================================
   반응형 (모바일)
   ============================================ */
@media (max-width: 1024px) {
	.header-inner {padding: 0 20px;}
	.header .nav {display: none;}
	.header .mobile-btn {display: flex;}
	.header.active .mobile-btn span,
	.header.fixed .mobile-btn span {background: #fff;}
	.mobile-menu.open {max-height:100vh;}
	.mobile-nav {padding-top:85px;}
}

@media (max-width: 768px) {
	.header {height: 70px;}
	.header-inner .logo img {width: 60px;height: 40px;}
	.mobile-menu.open {max-height:100vh;}
	.mobile-nav {padding-top:70px;}
	.mobile-gnb .mobile-depth1 > a {padding: 18px 20px;font-size: 1.1rem;}
	.mobile-gnb .mobile-depth1 .mobile-depth2 li a {padding: 12px 20px 12px 40px;font-size: 0.95rem;}
} 




/* ============================================
   푸터 기본 스타일 (웹)
   ============================================ */
.footer{width: 100%; display: flex;padding: 100px 0; background-color: #111111;}
.footer .footer-wrap{max-width: 1680px;width: 100%;	margin: 0 auto;padding: 0 40px; display: flex; flex-direction: column; gap: 50px;}
.footer .footer-wrap .footer-innner{ width: 100%; }

/* 푸터 네비 */
.footer .footer-wrap .foot-nav{width: 100%; display: flex;}
.footer .footer-wrap .foot-nav .depth1{width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start;transition: all 0.3s;}
.footer .footer-wrap .foot-nav .depth1 li{display: flex; flex-direction: column;gap: 14px;}
.footer .footer-wrap .foot-nav .depth1 li a,
.footer .footer-wrap .foot-nav .depth1 li span{font-size: 1rem; font-weight: 600; color: #fff;letter-spacing: 0; text-transform: capitalize;transition: all 0.3s;}
.footer .footer-wrap .foot-nav .depth2{display: flex; flex-direction: column; gap: 10px;}
.footer .footer-wrap .foot-nav .depth2 li a{font-size: 0.875rem; font-weight: 300; line-height: 1.4; color: #8D8D8D;letter-spacing: -0.75px;text-transform: uppercase; transition: all 0.3s;}
.footer .footer-wrap .foot-nav .depth2 li a:hover{text-decoration: underline;}



/* 푸터 인포 */
.footer .foot-info{width: 100%;display: flex; flex-direction: column; gap: 30px;}
.footer .foot-info .logo img {width: 80px;height: 50px;transition: all 0.3s ease;}
.footer .foot-info .info-wrap{width: 100%;display: flex; flex-direction: column; gap: 10px;}
.footer .foot-info .info-wrap .info{width: 100%;display: flex; flex-direction: row;gap: 20px;align-items: center;transition: all 0.3s;}
.footer .foot-info .info-wrap .info .inf{display: flex; flex-direction: row;gap: 10px;align-items: center;transition: all 0.3s;}
.footer .foot-info .info-wrap .info .inf span{display: flex;	flex-direction: row;	justify-content: flex-start;	width: 30px;	align-items: center;font-size: 14px; line-height: 1.4; letter-spacing: -0.5px; font-weight: 400; color: #efefef;transition: all 0.3s;}
.footer .foot-info .info-wrap .info .inf .inn{width: 100%;display: flex; flex-direction: row;gap: 10px;align-items: center;transition: all 0.3s;}
.footer .foot-info .info-wrap .info .inf span + .inn::before{content: ''; width: 1px; height: 10px; background-color: #fff; display: flex;transition: all 0.3s;}
.footer .foot-info .info-wrap .info .inf p{font-size: 0.875rem; line-height: 1.4; letter-spacing: -0.5px; font-weight: 400; color: #efefef;transition: all 0.3s;}

/* 푸터 카피라이터 */
.footer .footer-innner + .copyright::before{content: ''; width: 100%; height: 1px; display: block; background-color: #2D2D2D;}
.footer .copyright .inn{width: 100%;	padding-top: 50px;	display: flex;	flex-direction: column;	align-items: flex-end}
.footer .copyright p{font-size: 0.75rem; line-height: 1.4; color: #8D8D8D;}


/* 푸터 네비 Grid 레이아웃 (1024px 이하) */
@media (max-width: 1024px) {
	.footer .footer-wrap .foot-nav .depth1 {display: grid;grid-template-columns: repeat(3, 1fr);gap: 40px;align-items: start;}
	.footer .footer-wrap .foot-nav .depth2 li a{font-size: 0.78rem}
	/* 첫 번째 행: About (1열), Solution (2열) */
	.footer .footer-wrap .foot-nav .depth1 li:nth-child(1) {grid-column: 1;grid-row: 1;}
	.footer .footer-wrap .foot-nav .depth1 li:nth-child(2) {grid-column: 2;grid-row: 1;}
	/* 두 번째 행: News (1열), Contact us (2열), Location (3열) */
	.footer .footer-wrap .foot-nav .depth1 li:nth-child(3) {grid-column: 1;grid-row: 2;}
	.footer .footer-wrap .foot-nav .depth1 li:nth-child(4) {grid-column: 2;grid-row: 2;}
	.footer .footer-wrap .foot-nav .depth1 li:nth-child(5) {grid-column: 3;grid-row: 2;}

	.footer .foot-info .info-wrap .info{flex-direction: column;align-items: flex-start}
	.footer .foot-info .info-wrap .info .inf{flex-direction: column;align-items: flex-start; gap: 0;}
	.footer .foot-info .info-wrap .info .inf .inn{flex-direction: column;align-items: flex-start;gap: 0;}
	.footer .foot-info .info-wrap .info .inf span{font-weight: 500;}
	.footer .foot-info .info-wrap .info .inf span+.inn::before{display: none;}
	.footer .foot-info .info-wrap .info .inf p{font-size: 0.75rem;}
}