@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}

.only-desktop {display:block;}
.only-desktop-tablet {display:block;}
.only-tablet-mobile {display:none;}
.only-tablet {display:none;}
.only-mobile {display:none;}

.icon {display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.icon img {display:block; width:100%; height:100%; max-width:none; object-fit:contain;}
.icon16 {width:16px; height:16px;}
.icon24 {width:24px; height:24px;}
.icon32 {width:32px; height:32px;}

.contain {width:100%; max-width:1500px; padding-left:30px; padding-right:30px; margin:0 auto;}
.contain2 { width:100%; max-width:1260px; padding-left:30px; padding-right:30px; margin:0 auto; }
.contain:after {content:""; display:block; clear:both;}

#container>div { overflow: hidden;}
#ws-wrapper {display:flex; min-height:100vh;}

#ws-header {width:200px; background:#fafafa; box-shadow:0 0 5px rgba(0,0,0,.2);}

.ws-menu .ui {display:block; padding:13px 0; background:#5e31a1; color:#fff; font-size:18px; font-weight:700; line-height:1.5em; letter-spacing:-.03em; text-align:center; border-bottom:2px solid #3c2065;}
.ws-menu h2 {font-family:"Roboto",sans-serif; font-size:15px; color:#fff; line-height:1.3em; padding:7px 0; text-align:center; background:#7952b3; }
.ws-menu ul {display:flex; flex-wrap:wrap;}
.ws-menu ul li {width:100%; border-bottom:1px solid #e5e5e5;}
.ws-menu ul li.w50 {width:50%; border-right:1px solid #e5e5e5;}
.ws-menu ul li.w50:nth-child(2n) {border-right:0;}
.ws-menu ul li a {display:block; color:#333; text-decoration:none; font-size:13px; font-weight:300; line-height:1.4em; letter-spacing:-.04em; padding:5px 5px 5px 11px;}
.ws-menu ul li a:hover,
.ws-menu ul li.active a {background:#eee; color:#653ba4; font-weight:500; padding-left:14px;}

#ws-content {flex:1 1 auto; min-width:0; width:1%; padding:30px;}

.ws-title {display:flex; align-items:center; padding-bottom:15px; margin-bottom:50px; border-bottom:1px solid #ddd;}
.ws-title h2 {flex:1 1 auto; min-width:0; width:1%; font-size:30px; line-height:1.3em; letter-spacing:-.04em;}

.btn-psd-download {display:inline-block; padding:8px 20px; font-family:"Roboto",sans-serif; color:#fff; font-size:16px; font-weight:500; line-height:1.3em; background:#7952b3; border-radius:4px;}
 
.ws-real-cont {max-width:1200px; margin:0 auto;}

/* header */
#header {position:fixed; width:100%; z-index:101; top:0; height:100px; transition:top .2s ease-in-out, background .2s; left:0;}
#header.scrollUp {top:-100px;}
#header .contain {position:relative; display:flex; align-items:center; justify-content:space-between; height:100%; z-index:10; max-width: 1780px;}
#header .contain::after {content:none;}

.sitelogo {position:relative; z-index:2; width:182px; height:40px; flex-shrink:0; background-image:url("../images/img/logo-w.png"); background-size:contain; background-repeat:no-repeat; background-position:left center;}
.sitelogo a {display:block; width:182px; height:40px;}
.sitelogo img {visibility:hidden; width:182px; height:40px;}

#gnb {position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:3; text-align:center; width:max-content;}
#gnb>ul {display:flex; justify-content:center; align-items:flex-start; gap:120px; padding-top:37px; box-sizing:border-box;}
#gnb>ul>li {position:relative;}
#gnb>ul>li>a {position:relative; display:flex; align-items:center; justify-content:center; color:#242424; font-size:var(--font-size18); font-weight:600; line-height:1.44em; white-space:nowrap; padding:0;}
#gnb>ul>li:hover>a {color:var(--color-primary);}
#main #gnb>ul>li>a,
#sub #gnb>ul>li>a {color:#fff;}
#main #gnb>ul>li:hover>a,
#sub #gnb>ul>li:hover>a {color:#fff;}

#gnb .submenu {position:absolute; left:50%; top:63px; transform:translateX(-50%); width:max-content; min-width:100%; height:0; overflow:hidden; text-align:center;}
#gnb .submenu>ul {padding:32px 8px 20px;}
#gnb .submenu>ul>li>a {display:block; padding:0; color:#737373; font-weight:400; line-height:3em; white-space:nowrap;}
#gnb .submenu>ul>li>a:hover {font-weight:600; background:linear-gradient(90deg, var(--color-primary), #69aaff); background-clip:text; -webkit-background-clip:text; color:transparent;}
#gnb .submenu>ul>li.active>a {font-weight:600; background:linear-gradient(90deg, var(--color-primary), #69aaff); background-clip:text; -webkit-background-clip:text; color:transparent;}
.submenu-bg {display:none; position:absolute; width:100%; left:0; top:100px; height:0; background:#fff; border-top:1px solid #ddd;}

.util {display:flex; align-items:center; justify-content:flex-end; gap:10px; width:182px; flex-shrink:0;}
.list-icon {width:22px; height:16px; text-align:center; text-indent:-9999em; z-index:50; transition:all 0.5s linear; display:none; position:relative;}
.list-icon span {position:absolute; right:0; top:50%; margin-top:0; height:2px; background:#fff; left:0;}
.list-icon span:before,
.list-icon span:after {content:" "; position:absolute; left:0; right:0; height:2px; transition-duration:0.3s, 0.3s; transition-delay:0.3s, 0s;}
.list-icon span:before {top:-8px; transition-property:top, transform; background:#fff;}
.list-icon span:after {bottom:-8px; transition-property:bottom, transform; background:#fff;}

#header.hover {background:#fff;}
#header.hover .sitelogo {background-image:url("../images/img/logo.png");}
#header.hover #gnb>ul>li>a {color:#242424;}
#header.hover .list-icon span,
#header.hover .list-icon span:before,
#header.hover .list-icon span:after {background:#121212;}

#header.move {background:#fff;}
#header.move .sitelogo {background-image:url("../images/img/logo.png");}
#header.move #gnb>ul>li>a {color:#242424;}
#header.move .list-icon span {background:#121212;}
#header.move .list-icon span::before {background:#121212;}
#header.move .list-icon span::after {background:#121212;}

.mobile-navigation {display:block; position:fixed; top:0; right:0; width:300px; height:100%; overflow:auto; transition:.2s linear; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:102;}
.mobile-navigation .home {display:flex; align-items:center; height:80px; padding:0 20px; color:#242424; font-size:19px; font-weight:700; line-height:1.5em;}
.mobile-navigation .nav-menu>ul {border-top:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:10px 48px 10px 20px; display:block; color:#242424; font-size:17px; font-weight:700; line-height:1.5em;}
.mobile-navigation .nav-menu>ul>li>a:after {content:""; position:absolute; top:50%; right:20px; transform:translateY(-75%) rotate(45deg); width:11px; height:11px; border-right:2px solid #505050; border-bottom:2px solid #505050;}
.mobile-navigation .nav-menu>ul>li.active>a {color:#fff; background:var(--color-primary);}
.mobile-navigation .nav-menu>ul>li.active>a:after {transform:translateY(-35%) rotate(-135deg); border-color:#fff;}
.mobile-navigation .nav-menu .submenu {display:none; background:#f8f8f8; color:#454545; font-size:15px; font-weight:400; line-height:1.5em;}
.mobile-navigation .nav-menu .submenu ul li {border-top:1px solid #e5e5e5;}
.mobile-navigation .nav-menu .submenu ul li a {display:block; padding:12px 20px;}
.mobile-navigation .nav-menu .submenu ul li a br { display: none;}
.mobile-navigation .nav-menu .submenu ul li a:hover {color:var(--color-primary);}
.mobile-navigation .close {position:absolute; top:25px; right:15px; width:26px; height:26px; text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:12px; left:0; width:100%; height:3px; background:#242424; border-radius:3px;}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}
.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:101;}

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateY(0); transform:translateY(0);}
html.menu-opened .mobile-overlay {display:block;} 

/* 메인비주얼 (hero 영역) */
.main-visual {position:relative; height:100vh; overflow:hidden; color:#fff; text-align:center;}
.main-visual .slick-slide {position:relative; height:100vh; overflow:hidden;}
.main-visual .item {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden;}
.main-visual .item .video-js,
.main-visual .item video {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.main-visual .item iframe {position:absolute; top:50%; left:50%; width:100vw; height:100vh; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
.main-visual .item img {position:absolute; inset:0; width:100%; height:100% !important; max-width:none; object-fit:cover;}
.main-visual .item img {position:absolute; inset:0; width:100%; height:100% !important; max-width:none; object-fit:cover; transform:scale(1);}
.main-visual .items .slick-active .item img {animation:mv-img-zoom 3s ease-out forwards;}
.main-visual .items .reset-animation .item img {animation:none; transform:scale(1);}
@keyframes mv-img-zoom {0% {transform:scale(1);} 100% {transform:scale(1.08);}}
.main-visual .item:after {content:""; position:absolute; inset:0; background:rgba(0,0,0,.2); z-index:1;}
.main-visual .caption {position:absolute; left:0; text-align:center; width:100%; top:50%; transform:translateY(-50%); z-index:2;}
.main-visual .caption .txt {width:100%; transform:translateX(-50px); opacity:0; transition:opacity 0s 2s, transform 0s 2s; color:#fff;}
.main-visual .items .slick-active .caption .txt {transform:translateX(0); opacity:1; transition:opacity 2s, transform 1s; transition-delay:.6s;}
.main-visual .items .reset-animation .caption .txt {transform:translateX(-50px); opacity:0; transition:all 0s;}
.main-visual .caption h2 {font-family:'Outfit',sans-serif; font-size:clamp(30px,4.5vw,82px); font-weight:600; line-height:1.12em; margin:0 0 32px;}
.main-visual .caption h2 span {background:linear-gradient(90deg, var(--color-primary), #69aaff); background-clip:text; -webkit-background-clip:text; color:transparent; display: inline-block; }
.main-visual .caption p {margin:0; font-size:var(--font-size26); font-weight:500; line-height:1.46em;}
.main-visual .slick-arrow {display:none !important;}
.mv-pager {position:absolute; left:clamp(20px,6.25vw,120px); right:clamp(20px,6.25vw,120px); bottom:60px; z-index:4; display:flex; gap:clamp(20px,2.5vw,40px);}
.mv-pager button {display:flex; flex-direction:column; gap:14px; min-width:0; padding:0; border:0; background:transparent; text-align:left; cursor:pointer; color:#fff; flex: 1;}
.mv-pager .track {display:block; position:relative; width:100%; height:2px; overflow:hidden; background:rgba(255,255,255,.28);}
.mv-pager .fill {display:block; width:0; height:100%; background:#fff; transform-origin:left center;}
.mv-pager button.is-run .fill {animation:mv-pager-progress 6s linear forwards;}
.mv-pager .label {display:flex; align-items:baseline; gap:10px; font-family:'Outfit',sans-serif; font-size:clamp(14px,1.15vw,18px); font-weight:500; line-height:1.2em; letter-spacing:.02em; white-space:nowrap; opacity:.72;}
.mv-pager button.active .label {opacity:1;}
.mv-pager .num {flex-shrink:0; color:var(--color-primary);}
@keyframes mv-pager-progress {0% {width:0;} 100% {width:100%;}}

/* 스크롤 다운 아이콘*/
.scrollDown {position: absolute; width: 100%; height: 100%; bottom: -25px;}
.scrollDown:after {position: absolute; bottom: 0; left: 0; content: '';}
.Ani a {position: absolute; bottom: 8px; left: 50%; z-index: 2; display: inline-block; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); color: #fff; letter-spacing: .1em; text-decoration: none; transition: opacity .3s; font-size: .9rem;}
.Ani a:hover {opacity: .5;}
.scrollDown a {padding-top: 41px; }
.scrollDown a span {position: absolute; top: 0; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: sdb07 2s infinite; animation: sdb07 2s infinite; opacity: 0; box-sizing: border-box; }
.scrollDown a span:nth-of-type(1) {-webkit-animation-delay: 0s; animation-delay: 0s;}
.scrollDown a span:nth-of-type(2) {top: 11px; -webkit-animation-delay: .15s; animation-delay: .15s;}
.scrollDown a span:nth-of-type(3) {top: 21px; -webkit-animation-delay: .3s; animation-delay: .3s;}
@-webkit-keyframes sdb07 {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes sdb07 {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0;}
}

/* 메인 컨텐츠 영역 */
.main-business {padding:200px 0; background:#fff; text-align:left;}
.main-business .contain {display:flex; flex-wrap:wrap; align-items:center; gap:64px;}
.main-business .contain::after {content:none;}
.main-business-head {display:flex; flex:1 1 320px; flex-direction:column; gap:64px; min-width:0; text-align:left;}
.main-business-head h2 {margin:0; font-family:'Outfit',sans-serif; font-size:clamp(36px,4vw,var(--font-size56)); font-weight:500; line-height:1.18em; color:#242424; text-align:left;}
.main-business-nav {display:flex; flex-direction:column; width:min(100%,464px); margin:0; padding:0;}
.main-business-nav a {display:flex; align-items:center; justify-content:flex-start; gap:24px; width:100%; min-height:80px; padding:26px 24px; border-radius:12px; font-size:var(--font-size20); font-weight:600; line-height:1.5em; color:#999; text-align:left;}
.main-business-nav a:hover {color:#242424;}
.main-business-nav a.active {background:var(--color-primary); color:#fff;}
.main-business-nav .dots {display:inline-flex; gap:12px; align-items:center; flex-shrink:0; max-width:0; opacity:0; overflow:hidden; transition:max-width .35s ease, opacity .3s ease;}
.main-business-nav a.active .dots {max-width:48px; opacity:1;}
.main-business-nav .dots span {display:block; width:6px; height:6px; border-radius:100px; background:#fff; transform:scale(0); transition:transform .2s ease;}
.main-business-nav a.active .dots span {transform:scale(1);}
.main-business-nav a.active .dots span:nth-child(1) {transition-delay:.05s;}
.main-business-nav a.active .dots span:nth-child(2) {transition-delay:.12s;}
.main-business-nav a.active .dots span:nth-child(3) {transition-delay:.19s;}
.main-business-nav .name {flex:1 1 auto; min-width:0; text-align:left;}
.main-business-nav .arrow {flex-shrink:0; max-width:0; opacity:0; overflow:hidden; font-size:var(--font-size22); line-height:1.36em; transform:translateX(-8px); transition:max-width .35s ease, opacity .3s ease, transform .35s ease;}
.main-business-nav a.active .arrow {max-width:1.5em; opacity:1; transform:translateX(0);}
.main-business-panels {position:relative; flex:0 1 830px; width:min(100%,830px); min-height:480px; aspect-ratio:1/1; border-radius:24px; overflow:hidden;}
.main-business-panel {position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; text-decoration:none; text-align:left; opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease;}
.main-business-panel.active {opacity:1; visibility:visible;}
.main-business-panel.active .media img {animation:main-fx-drift 20s ease-in-out infinite alternate;}
.main-business-panel .media {position:absolute; inset:0; overflow:hidden; background-color:var(--color-secondary); background-position:center; background-size:cover; background-repeat:no-repeat;}
.main-business-panel[data-business-index="0"] .media {background-image:url("../images/img/main/business-area-1.png");}
.main-business-panel[data-business-index="1"] .media {background-image:url("../images/img/main/business-area-2.png");}
.main-business-panel[data-business-index="2"] .media {background-image:url("../images/img/main/business-area-3.png");}
.main-business-panel[data-business-index="3"] .media {background-image:url("../images/img/main/business-area-4.png");}
.main-business-panel[data-business-index="4"] .media {background-image:url("../images/img/main/business-area-5.png");}
.main-business-panel[data-business-index="5"] .media {background-image:url("../images/img/main/business-area-6.png");}
.main-business-panel[data-business-index="6"] .media {background-image:url("../images/img/main/business-area-7.png");}
.main-business-panel .media img {position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover;}
.main-business-panel .dim {position:absolute; inset:0; z-index:1; background:rgba(0,0,0,.2);}
.main-business-panel .body {position:relative; z-index:2; display:flex; gap:24px; align-items:flex-end; width:100%; padding:40px; background:rgba(255,255,255,.1); backdrop-filter:blur(20px); text-align:left;}
.main-business-panel .copy {display:flex; flex:1 1 auto; flex-direction:column; gap:24px; min-width:0; text-align:left;}
.main-business-panel .en {margin:0; font-family:'Outfit',sans-serif; font-weight:500; line-height:1.62em; text-align:left;}
.main-business-panel .ko {margin:0; font-size:var(--font-size32); font-weight:600; line-height:1.31em; text-align:left;}
.main-business-panel .desc {margin:0; font-weight:400; line-height:1.62em; text-align:left;}
.main-business-panel .more {flex-shrink:0; font-family:'Outfit',sans-serif; font-weight:400; line-height:1.62em; white-space:nowrap;}

.main-product {position:relative; padding:200px 0; overflow:hidden;}
.main-product-bg {position:absolute; inset:0; pointer-events:none; background:#fefeff url("../images/img/main/product-bg.jpg") center/cover no-repeat;}
.main-product-bg img {position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover;}
.main-product-bg:after {content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(254,254,255,.92) 0%, rgba(254,254,255,.92) 100%);}
.main-product .contain {position:relative; z-index:1; display:flex; flex-direction:column; gap:64px;}
.main-product .contain::after {content:none;}
.main-product-head {display:flex; flex-direction:column; gap:32px; align-items:center; text-align:center;}
.main-product-head h2 {margin:0; font-family:'Outfit',sans-serif; font-size:clamp(36px,4vw,var(--font-size56)); font-weight:500; line-height:1.18em; color:#242424; text-align:center;}
.main-product-head p {margin:0; font-size:var(--font-size18); font-weight:400; line-height:1.56em; color:#454545; text-align:center;}
.main-product-grid {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin:0; padding:0;}
.main-product-card {position:relative; display:flex; flex-direction:column; min-height:480px; height:480px; padding:48px 32px; border-radius:24px; overflow:hidden; color:#fff; text-align:left; text-decoration:none; box-sizing:border-box; transition:transform .3s ease, box-shadow .3s ease;}
.main-product-card .bg {position:absolute; inset:0; background-color:#0c1e3b; background-position:center; background-size:cover; background-repeat:no-repeat;}
.main-product-grid li:nth-child(1) .bg {background-image:url("../images/img/main/product-virtualization.jpg");}
.main-product-grid li:nth-child(2) .bg {background-image:url("../images/img/main/product-security.jpg");}
.main-product-grid li:nth-child(3) .bg {background-image:url("../images/img/main/product-bigdata.jpg");}
.main-product-grid li:nth-child(4) .bg {background-image:url("../images/img/main/product-server.jpg");}
.main-product-card .bg img {position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; transition:transform .5s ease;}
.main-product-card:hover .bg img {transform:scale(1.08);}
.main-product-card .bg:after {content:""; position:absolute; inset:0; background:linear-gradient(180deg, #5477ca 28%, rgba(12,30,59,0) 93%);}
.main-product-card .body {position:relative; z-index:1; display:flex; flex-direction:column; flex:1 1 auto; min-height:0; gap:8px; text-align:left;}
.main-product-card .en {font-family:'Outfit',sans-serif; font-weight:500; line-height:1.62em; color:rgba(255,255,255,.5); text-align:left;}
.main-product-card .ko {font-size:var(--font-size32); font-weight:600; line-height:1.31em; text-align:left;}
.main-product-card .txt {margin-top:22px; font-weight:400; line-height:1.62em; text-align:left;}
.main-product-card .go {display:flex; justify-content:flex-end; width:100%; margin-top:auto;}
.main-product-card .go img {width:40px; height:40px; max-width:none;}
.main-product-card:hover {transform:translateY(-8px); box-shadow:0 20px 48px rgba(39,102,251,.25);}

.main-clients {display:flex; flex-direction:column; gap:64px; align-items:center; padding:200px 0; background:#fff;}
.main-clients .contain {display:flex; flex-direction:column; align-items:center;}
.main-clients .contain::after {content:none;}
.main-clients-head {display:flex; flex-direction:column; gap:24px; align-items:center; width:100%; text-align:center;}
.main-clients-head .eyebrow {margin:0; font-family:'Outfit',sans-serif; font-weight:500; line-height:1.62em; color:var(--color-primary);}
.main-clients-head h2 {margin:0; font-size:clamp(28px,3vw,var(--font-size40)); font-weight:600; line-height:1.4em; color:#242424;}
.main-clients-marquee {width:100%; overflow:hidden;}
.main-clients-track {display:flex; width:max-content; animation:main-clients-marquee 40s linear infinite;}
.main-clients-logos {display:flex; gap:24px; margin:0; padding:0;}
.main-clients-logos li {display:flex; align-items:center; justify-content:center; flex-shrink:0; width:250px; height:120px; border-radius:24px; background:#fff; box-sizing:border-box;}
.main-clients-logos img {display:block; width:auto; max-width:80%; max-height:56px; object-fit:contain;}
@keyframes main-clients-marquee {0% {transform:translateX(0);} 100% {transform:translateX(-50%);}}

.main-contact {padding:150px 0; background:#f6f9fe;}
.main-contact .contain {display:flex; flex-direction:column; gap:64px; align-items:center;}
.main-contact .contain::after {content:none;}
.main-contact-head {display:flex; flex-direction:column; gap:24px; align-items:center; text-align:center;}
.main-contact-head .eyebrow {margin:0; font-family:'Outfit',sans-serif; font-weight:500; line-height:1.62em; color:var(--color-primary);}
.main-contact-head h2 {margin:0; font-size:clamp(28px,3vw,var(--font-size40)); font-weight:600; line-height:1.4em; color:#242424;}
.main-contact-tel {display:inline-flex; gap:8px; align-items:center; margin:0; line-height:1.62em; color:#454545;}
.main-contact-tel a {font-size:var(--font-size20); font-weight:500; line-height:1.5em; color:#242424;}
.main-contact-tel .ico {display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:100px; background:var(--color-secondary);}
.main-contact-tel .ico img {width:14px; height:14px; filter:brightness(0) invert(1);}
.main-contact-form {display:flex; flex-direction:column; gap:24px; width:100%; max-width:1440px; margin:0 auto; padding:32px; border-radius:24px; background:#fff; box-sizing:border-box; text-align:left;}
.main-contact-row {display:grid; gap:24px;}
.main-contact-row.col3 {grid-template-columns:repeat(3,minmax(0,1fr));}
.main-contact-field {display:flex; flex-direction:column; gap:8px; min-width:0; text-align:left;}
.main-contact-field label,
.main-contact-field .lbl {font-weight:600; line-height:1.62em; color:#242424;}
.main-contact-field .req {color:var(--color-primary);}
.main-contact-form .input {width:100%; height:auto; padding:16px 24px; border:1px solid #ddd; border-radius:8px; background:#fff; font-weight:500; line-height:1.62em; color:#242424;}
.main-contact-form .input:focus,
.main-contact-form .input:focus-visible {outline:none; border-color:#000; box-shadow:0 0 0 3px rgba(39,102,251,.12);}
.main-contact-form textarea.input {min-height:130px; padding:16px 24px;}
.main-contact-types {display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px;}
.main-contact-types label {display:flex; align-items:center; gap:7px; min-height:52px; padding:16px; border:1px solid #ddd; border-radius:8px; font-weight:500; line-height:1.62em; color:#999; cursor:pointer;}
.main-contact-types label:has(input:checked) {color:#454545;}
.main-contact-types input {width:20px; height:20px; margin:0; accent-color:var(--color-primary);}
.main-contact-foot {display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px;}
.main-contact-foot > .main-contact-field {flex:0 1 auto;}
.main-contact-captcha {display:flex; flex-wrap:nowrap; gap:8px; align-items:center;}
.main-contact-captcha img { height: 56px; border-radius: 8px; cursor: pointer;}
.main-contact-captcha .input {width:260px; max-width:260px; height:56px; box-sizing:border-box;}
.main-contact-actions {display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:flex-end;}
.main-contact-actions .agree {display:inline-flex; gap:8px; align-items:center; line-height:1.5em; color:#242424; cursor:pointer;}
.main-contact-actions .agree input {width:20px; height:20px; margin:0; accent-color:var(--color-primary); margin-top: -0.1em !important ;}
.main-contact-actions .submit {position:relative; display:inline-flex; gap:10px; align-items:center; justify-content:center; overflow:hidden; min-width:200px; height:64px; padding:0 40px; border:0; border-radius:100px; background:var(--color-primary); font-size:var(--font-size18); font-weight:600; line-height:1.56em; color:#fff; cursor:pointer; transition:transform .25s ease, box-shadow .25s ease;}
.main-contact-actions .submit:hover {transform:translateY(-2px); box-shadow:0 12px 28px rgba(39,102,251,.28);}
.main-contact-actions .submit:after {content:""; position:absolute; inset:0 auto 0 -40%; width:40%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); animation:main-fx-shine 4.5s ease-in-out infinite; pointer-events:none;}
.main-contact-actions .submit img {position:relative; z-index:1; width:16px; height:16px; max-width:none;}
.has-fx .js-reveal {opacity:0; transform:translate3d(0,22px,0); transition:opacity .7s ease, transform .75s cubic-bezier(.22,1,.36,1); transition-delay:var(--reveal-delay,0s);}
.has-fx .js-reveal.is-in {opacity:1; transform:none;}
@keyframes main-fx-drift {0% {transform:scale(1);} 100% {transform:scale(1.045) translate3d(-.8%,-.6%,0);}}
@keyframes main-fx-shine {0% {transform:translateX(0); opacity:0;} 12% {opacity:1;} 40% {transform:translateX(420%); opacity:0;} 100% {transform:translateX(420%); opacity:0;}}

/* 서브 공통 (비주얼, 타이틀 등 전체적인 서브공통레이아웃) */
.sub-visual {position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:640px; min-height:640px; padding-bottom:64px; color:#fff; text-align:left; background-repeat:no-repeat; background-position:center; background-size:cover; box-sizing:border-box; z-index: 11; }
.sub-visual:before {content:""; position:absolute; inset:0; background:rgba(0,0,0,.3);}
.sub-visual .contain {position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; width:100%;}
.sub-visual .contain::after {content:none;}
.sub-visual h2 {margin:0; font-family:'Outfit',sans-serif; font-size:clamp(40px,5vw,80px); font-weight:500; line-height:1.12em; letter-spacing: 0;}
.sub-visual p {margin:32px 0 88px; font-size:var(--font-size20); font-weight:500; line-height:1.5em;}
.sub-visual.bg1 {background-image:url("../images/img/sub-visual/sub-visual-company.jpg"); background-position:center top;}
.sub-visual.bg2 {background-image:url("../images/img/sub-visual/sub-visual.jpg"); background-position:center bottom;}
.sub-visual.bg3 {background-image:url("../images/img/sub-visual/hero-sub-visual-server-storage.png");}
.sub-visual.bg4 {background-image:url("../images/img/sub-visual/sub-visual-support.jpg"); background-position:center bottom;}

.path-wrap {display:flex; width:100%; padding-bottom:48px; align-items:flex-end; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.5); z-index: 1; position: relative; }
.menu-ctr {display:flex; align-items:center; gap:48px;}
.menu-ctr span {display:inline-block; font-weight:600; line-height:1.62em; position:relative;}
.menu-ctr span.home {width:16px; height:16px; background:url("../images/img/icon-home.svg") center no-repeat; background-size:contain;}
.menu-ctr span::after {content:""; position:absolute; right:-30px; top:0; bottom:0; margin:auto; width:12px; height:8px; background:url("../images/img/icon-chevron-white.svg") center no-repeat; background-size:contain; transform:rotate(-90deg);}
.menu-ctr span:last-child::after {display:none;}
.path-wrap .inner {display:flex; gap:10px;}
.path-wrap .part {position:relative; min-width:250px; z-index:50;}
.path-wrap .part::after {content:""; position:absolute; right:0; top:0; bottom:0; margin:auto; width:1px; height:20px; background:rgba(255,255,255,.16);}
.path-wrap .part > a {display:flex; align-items:center; position:relative; height:60px; color:#fff; font-weight:600; line-height:1.5em; padding:0 60px 0 20px; border-radius:30px; background:rgba(255,255,255,.2); backdrop-filter:blur(10px);}
.path-wrap .part > a:after {content:""; position:absolute; top:50%; right:20px; margin-top:-4px; width:12px; height:8px; background:url("../images/img/icon-chevron-white.svg") 50% 50% no-repeat; background-size:contain;}
.path-wrap .part:last-child::after {display:none;}
.path-wrap .part ul {display:none; position:absolute; left:-1px; right:-1px; z-index:50; top:70px; padding:18px 0; border:1px solid #ddd; border-radius:16px; background:#fff;}
.path-wrap .part ul li {color:#242424; line-height:1.66em; font-weight:500;}
.path-wrap .part ul li a {display:block; padding:8px 30px;}
.path-wrap .part ul li a:hover,
.path-wrap .part ul li.active a {color:var(--color-primary);}

#contArea {max-width:1500px; padding-left:30px; padding-right:30px; margin:0 auto;}
#contArea.wide {max-width:100%; padding-left:0; padding-right:0;}

.sub-title { position: relative; padding: 100px 0; }
.sub-title.pb { padding-bottom: 48px; }
.sub-title.p0 { padding-bottom: 0; }
.sub-title h2 { font-size: var(--font-size48); font-weight: 700; line-height: 1.2em; color: #242424; }

.real-cont {min-height:300px; padding-bottom: 150px;}
.real-cont2 { padding-bottom: 0; }

/* footer */
#footer {width:100%; z-index:1; position:relative; background:var(--color-secondary); color:#fff; padding:64px 0 40px;}
#footer .contain {display:block; max-width: 1720px;}
.ft-top {display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:40px; margin-bottom:40px;}
.ft-brand {display:flex; flex-direction:column; gap:24px; flex:0 1 280px; min-width:0; max-width:360px;}
.ft-logo {display:block; width:181px; height:40px;}
.ft-logo img {width:100%; height:100%; object-fit:contain; object-position:left center;}
.ft-info {display:flex; flex-direction:column; gap:8px; font-size:15px; line-height:1.73em;}
.ft-info dl {display:flex; flex-wrap:wrap; gap:8px; margin:0;}
.ft-info dt {margin:0; font-weight:500; color:#7a7e8d;}
.ft-info dd {margin:0; color:#fff;}
.ft-sitemap {display:grid; grid-template-columns:repeat(4,max-content); justify-content:end; column-gap:clamp(40px,4vw,72px); row-gap:32px; flex:0 1 auto; margin-left:auto;}
.ft-sitemap-col {display:flex; flex-direction:column; gap:16px; min-width:0;}
.ft-sitemap-tit {margin:0; font-size:var(--font-size18); font-weight:600; line-height:1.44em;}
.ft-sitemap-tit a {color:#fff;}
.ft-sitemap-col ul {display:flex; flex-direction:column; gap:8px; margin:0; padding:0;}
.ft-sitemap-col ul a {font-size:15px; font-weight:400; line-height:1.73em; color:#7a7e8d;}
.ft-sitemap-col ul a:hover {color:#fff;}
.ft-line {display:block; width:100%; height:0; margin:0 0 40px; padding:0; border:0; border-top:1px solid #43495d; background:none;}
.ft-bottom {display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 32px; font-size:15px; line-height:1.53em;}
.ft-copy {margin:0; color:#7a7e8d; flex:1 1 auto; min-width:0;}
.ft-links {display:flex; flex-shrink:0; align-items:center; gap:16px; color:#fff;}
.ft-links a {color:inherit;}
.ft-links a + a:before {content:"|"; margin-right:16px; color:#7a7e8d;}

/* 퀵메뉴 */
.float {position:fixed; right:clamp(16px,4vw,40px); bottom:clamp(24px,5vh,56px); z-index:90; display:flex; flex-direction:column; align-items:flex-end; gap:8px;}
.float-call {display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:100px; background:var(--color-primary); overflow:hidden; text-decoration:none; opacity:1; visibility:visible; transition:width .28s ease, opacity .45s ease, visibility .45s ease;}
.main .float-call:not(.is-show),
.has-main-visual .float-call:not(.is-show) {opacity:0; visibility:hidden; pointer-events:none;}
.float-call:hover {width:150px; border-radius:50px; justify-content:flex-start;}
.float-call-txt {max-width:0; opacity:0; overflow:hidden; font-weight:600; line-height:1.62em; color:#fff; white-space:nowrap; padding-left:0;}
.float-call:hover .float-call-txt {max-width:6em; opacity:1; padding-left:24px;}
.float-call-ico {display:flex; flex-shrink:0; align-items:center; justify-content:center; width:64px; height:64px;}
.float-call-ico img {width:22px; height:22px; max-width:none;}
.float-call:hover .float-call-ico {margin-left:auto;}
.float-top {display:flex; align-items:center; justify-content:center; width:64px; height:64px; border:1px solid #ddd; border-radius:50%; background:#fff;}
.float-top:hover {background:var(--color-primary); border-color:var(--color-primary);}
.float-top img {width:14px; height:14px; max-width:none; transform:rotate(-90deg);}
.float-top:hover img {filter:brightness(0) invert(1);}
@media (prefers-reduced-motion: reduce) {
.has-fx .js-reveal,
.has-fx .js-reveal.is-in {opacity:1; transform:none; transition:none;}
.main-business-panel.active .media img,
.main-contact-actions .submit:after {animation:none;}
.main-contact-actions .submit:hover {transform:none; box-shadow:none;}
.main-clients-track {animation:none;}
.main .float-call,
.has-main-visual .float-call {transition:width .28s ease;}
}