.container{position: relative; z-index: 1;}
.container .wrap{max-width: 1440px; width: 100%; margin: 0 auto; padding: 0 40px 100px;display: flex;flex-direction: column; align-items: flex-start; gap: 16px;}

/* ============================================
페이지헤더
   ============================================ */
.container .page-header{height: 400px;display: flex;flex-direction: column;  justify-content: center; align-items: flex-start; gap: 0rem;padding-top: 85px;}
.container .page-header .breadcrumb ol{display: flex; gap: 0.5rem; flex-direction: row; justify-content: flex-start; align-items: center;}
.container .page-header .breadcrumb ol li{display: flex; flex-direction: row; align-items: center; justify-content: center;gap: 1rem;}
.container .page-header .breadcrumb ol li .bc-home{width: 24px;height: 24px;display: flex; flex-direction: row; align-items: center; justify-content: center; transition: all 0.3s;}
.container .page-header .breadcrumb ol li .bc-home i{width: 100%; height: 100%;background-image: url("/images/sub/home-icon.svg");background-size: contain;filter: brightness(0); }
.container .page-header .breadcrumb ol li span{font-size: 18px;font-weight: 200; line-height: 1.4; color: #000;transition: all 0.3s;}
.container .page-header .breadcrumb ol li span.bc-current{line-height: 1.4; font-size: 18px; font-weight: 600;}
.container .page-header .breadcrumb ol li + li::before{content: ""; display: block; width: 24px; height: 24px; background-image: url("/images/sub/arrow-right-icon.svg"); background-repeat: no-repeat; background-position: center; background-size: contain;transition: all 0.3s;}
.container .page-header .page-h1{font-size: 4.375rem; line-height: 1.2;font-weight: 600; color: #000;transition: all 0.3s;}

.container .main .contents{width: 100%; display: flex; flex-direction: column; gap: 150px;}
.container .main .contents .content{width: 100%; display: flex;  flex-direction: column; gap: 100px;}
.container .main .contents .content.gap50{gap: 50px !important;}
.container .main .contents .content.gap30{gap: 30px !important;}

/* 반응형 */
@media(max-width:1024px) {
   .container .page-header .breadcrumb ol li .bc-home{width: 18px; height: 18px;}
   .container .page-header .breadcrumb ol li+li::before{width: 18px; height: 18px;}
   .container .page-header .breadcrumb ol li span{font-size: 16px;}
   .container .page-header .breadcrumb ol li span.bc-current{font-size: 16px;}
   .container .page-header .page-h1{font-size: 3.5rem;}
}
@media(max-width:768px) {
   .container .page-header .breadcrumb ol li span{font-size: 14px;}
   .container .page-header .breadcrumb ol li span.bc-current{font-size: 14px;}
   .container .page-header .page-h1{font-size: 2.5rem;}
   .container .page-header .wrap{gap: 10px; padding: 0 40px 0;}
}
@media(max-width:480px) {
   .container .page-header .breadcrumb ol li span{font-size: 12px;}
   .container .page-header .breadcrumb ol li span.bc-current{font-size: 12px;}
   .container .page-header .page-h1{font-size: 2rem;}
   .container .page-header .wrap{gap: 8px;}
}
/* hero-image */
.hero-image{width: 100%; height: 500px;display: flex; overflow: hidden; position: relative;;}
.hero-image .image{position: relative; width: 100%;height: 100%;overflow: hidden;}
.hero-image .image::before { content: "";position: absolute; inset: 0; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; clip-path: inset(0 100% 0 0); transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1); will-change: clip-path;}
.hero-image .image.digital-twin::before { background-image: url("/images/sub/bg/solution-digital-twin-bg.jpg");}
.hero-image .image.dx::before { background-image: url("/images/sub/bg/solution-dx-bg.jpg");}
.hero-image .image.ai-data-platform::before { background-image: url("/images/sub/bg/solution-ai-data-platform-bg.jpg");}
.hero-image .image.digital-green-sw::before { background-image: url("/images/sub/bg/solution-digital-green-sw-bg.jpg");}
.hero-image .image.data-dam::before { background-image: url("/images/sub/bg/solution-data-dam-bg.jpg");}
.hero-image .image.system-integration::before { background-image: url("/images/sub/bg/solution-si-bg.jpg");}
.hero-image .image.subscription-business::before { background-image: url("/images/sub/bg/solution-subscription-business-bg.jpg");}
.hero-image .image.aster::before { background-image: url("/images/sub/bg/product-aster-bg.jpg");}
.hero-image .image.vos::before { background-image: url("/images/sub/bg/product-vos-bg.jpg");}
.hero-image .image.genix::before { background-image: url("/images/sub/bg/product-genix-bg.jpg");}
.hero-image .image.ip-camera::before { background-image: url("/images/sub/bg/product-ip-camera-bg.jpg");}
/* 활성화 시 이미지가 왼쪽부터 드러남 */
.hero-image.is-active .image::before { clip-path: inset(0 0 0 0);}

/* inner-hero */ 
.inner-hero{padding: 100px 0 0;}
.inner-hero h3{font-size: 1.5rem; font-weight: 700;letter-spacing: -0.5px;line-height: 1.4; color: #000;}
.inner-hero .desc{font-size: 1.2rem;letter-spacing: -0.75px;line-height: 1.4; color: #333;}

.content{width: 100%;}
.content .inner{width: 100%; display: flex;flex-direction: row; justify-content: space-between; align-items: flex-start;gap: 50px;}
.content .inn{width: 100%; display: flex;flex-direction: column; justify-content: space-between; align-items: flex-start;gap: 50px;}
.content .inner .sect-tit{max-width: 300px; width: 100%;transition: all 0.3s;}
.content .inner .sect-tit p{line-height: 1.5; letter-spacing: -0.75px; font-size: 1.5rem; font-weight: 700;}

.content .inn .sect-title{width: 100%; display: flex;flex-direction: column; justify-content: space-between; align-items: flex-start;gap: 10px;}
.content .inn .sect-title b{line-height: 1.5; letter-spacing: -0.75px; font-size: 1.5rem; font-weight: 700;}
.content .inn .sect-title p{line-height: 1.4; letter-spacing: -0.75px; font-size: 1.1rem; font-weight: 300;}
.sect-cont{width: 100%; max-width:1000px; display: flex; flex-direction: column; gap: 50px;transition: all 0.3s;}
.sect-cont .card-list{display: flex; gap: 50px; flex-wrap: wrap;}
.sect-cont .card-list.two>.card{width: calc((100% - 50px) / 2);}
.sect-cont .card-list .card{display: flex; flex-direction: column;gap: 15px;}
.sect-cont .card-list .card .card-cont{position: relative;}
.sect-cont .card-list .card .card-cont .img-cont{position: relative;z-index: -2;border-radius: 10px;overflow: hidden; height: 600px; transition: all 0.3s;}
.sect-cont .card-list .card .card-cont .img-cont{width: 100%;}
.sect-cont .card-list .card .card-cont .img-cont img{width: 100%; max-width: 100%;height: 100%;object-fit: cover;}
.sect-cont .card-list .card .card-cont .text-cont{width: 100%; position: absolute;left: 0; bottom: 0; text-align: center;padding: 30px;height: 100%;display: flex; flex-direction: column;justify-content: space-between;}
.sect-cont .card-list .card .card-cont .key-title{display: flex;flex-direction: column;align-items: flex-start; gap: 16px;}
.sect-cont .card-list .card .card-cont .key-title .head-badge{padding: 10px 30px; background-color: #ffffff30;  border-radius: 50px; display: block;  box-shadow: 0 4px 4px #00000025;}
.sect-cont .card-list .card .card-cont .key-title .head-badge p{color: #ffffff;font-size: 1.2rem;transition: all 0.3s;}
.sect-cont .card-list .card .card-cont .key-title .tit{font-size: 2rem;  color: #fff;  font-weight: 600; letter-spacing: -0.75px; line-height: 1.4;transition: all 0.3s;}
.sect-cont .card-list .card .card-cont .text{display: flex; flex-direction: column; align-items: flex-start; gap: 10px;}
.sect-cont .card-list .card .card-cont .text b{font-size: 2rem; color: #fff; font-weight: 700; letter-spacing: -0.75px; line-height: 1.4;transition: all 0.3s;}
.sect-cont .card-list .card .card-cont .text p{font-size: 1.5rem; color: #fff; letter-spacing: -0.75px;transition: all 0.3s;}

.sect-cont .text-cont .text p{font-size: 1.2rem; letter-spacing: -0.75px; line-height: 1.4; font-weight: 500; word-break: keep-all;}

.inn-col{width: 100%; display: flex; flex-direction: column;gap: 30px;}

.box-cont{width: 100%; display: flex;flex-direction: column;align-items: flex-start;gap: 10px;}
.box-cont .text-box{width: 100%; padding: 20px; border-radius: 10px; background-color: #f5f5f5;}
.box-cont .text-box .text{display: flex; flex-direction: column; align-items: flex-start; gap: 10px;}
.box-cont .text-box .text b{font-size: 1.3rem; color: #333; font-weight: 700; letter-spacing: -.75px; line-height: 1.4;}
.box-cont .text-box .text p{font-size:1rem; color: #555; font-weight: 500; letter-spacing: -.75px; line-height: 1.4;word-break: keep-all;}
.box-cont .img-box{width: 100%; border-radius: 10px; overflow: hidden;}
.box-cont .img-box img{width: 100%;height: auto;}

.feature .sect-cont .card-list .card{background-color: #f5f5f5; border: 1px solid #efefef;}
.feature .sect-cont .card-list .card .card-cont{height: 400px;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 30px;}
.feature .sect-cont .card-list .card .card-cont .icon{max-width: 120px;width: 100%; object-fit: contain;}
.feature .sect-cont .card-list .card .card-cont .text-cont{position: relative;justify-content: center;height: auto;gap: 10px;align-items: center;padding: 0;}
.feature .sect-cont .card-list .card .card-cont .text-cont .tit p{font-size: 1.5rem;font-weight: 700; color: #257DD7;line-height: 1.4;}
.feature .sect-cont .card-list .card .card-cont .text-cont .text{max-width: 280px; width: 100%; padding: 0 10px;align-items: center;}
.feature .sect-cont .card-list .card .card-cont .text-cont .text p{font-size: 1rem; letter-spacing: -0.75px; color: #333; word-break: keep-all;}


.content.cta .inner .sect-tit{max-width: 600px;display: flex;flex-direction: column;gap: 10px;}
.content.cta .inner .sect-tit h2{font-size: 2.5rem;font-weight: 800; letter-spacing: -0.75px; line-height: 1.4;}
.content.cta .inner .sect-tit .text p{font-size: 1.25rem; font-weight: 500; letter-spacing: -0.75px;word-break: keep-all;}

.link-section{position: relative;height: 150px;}
.image-video-play-link{position: absolute;  right: 0;   top: 50%;   transform: translate(-50%, -50%); width: 200px;  height: 200px;  border-radius: 50%;  background: linear-gradient(93deg, #3CBDFE, #0079D5); display: flex;  align-items: center; justify-content: center; background-image: url("/images/solution/icon/dt-icon.svg");}
.image-video-play-link .play-icon{width: 120px;height: 120px;background-image: url("/images/solution/icon/play-icon.svg"); display: block; opacity: 0.5; transition: all 0.3s;}
.image-video-play-link a:hover .play-icon{opacity: 1;}


.overview .inner{gap: 40px;align-items: stretch}
.overview .inner .overview-media{max-width: 860px; width: 100%;}
.overview .inner .overview-media img{width: 100%; border-radius: 10px;}
.overview-content{max-width: 700px; width: 100%; display: flex; flex-direction: column;gap: 20px;justify-content: space-between;}
.overview-content .eyebrow b{font-size: 1.25rem; letter-spacing: -0.75px;font-weight: 600;line-height: 1.4; word-break: keep-all;}
.overview-content .box-cons{width: 100%; display: flex;flex-direction: column;justify-content: flex-end;align-items: flex-start;gap: 10px;}
.overview-content .box-cons .text-box{width: 100%; padding: 20px; border-radius: 10px; background-color: #f5f5f5;}
.overview-content .box-cons .text-box .text{display: flex; flex-direction: column; align-items: flex-start; gap: 10px;}
.overview-content .box-cons .text-box .text b{font-size: 1rem; color: #333; font-weight: 700; letter-spacing: -.75px; line-height: 1.4;}
.overview-content .box-cons .text-box .text p{font-size:0.875rem; color: #555; font-weight: 500; letter-spacing: -.75px; line-height: 1.4;word-break: keep-all;}

.functions{background-color: #F5F5F5; padding: 100px 0;}

.function-list{width: 100%;display: flex;flex-direction: column;gap: 50px;}
.function-list .item{width: 100%; display: flex; flex-direction: row; justify-content: flex-start; border-radius: 10px; overflow: hidden; border: 1px solid #e5e5e5;}
.function-list .item .item-icon{width: 120px; min-height: 120px; background-color: #e5e5e5;  display: flex; flex-direction: row;  align-items: center; justify-content: center;}
.function-list .item .item-icon img{width: 36px;height: 36px; object-fit: contain;}
.function-list .item .item-content{flex: 1; display: flex; flex-direction: column ;justify-content: flex-start; align-items: flex-start; padding: 20px; gap: 10px; background-color: #fff; }
.function-list .item .item-content .tit b{font-size: 1rem; font-weight: 600; letter-spacing: -0.75px; line-height: 1.4;}
.function-list .item .item-content .desc p{font-size: 0.9rem; line-height: 1.4;  letter-spacing: -0.75px;}

.process{padding: 100px 0;}

.process-list{width: 100%;display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 70px;}
.process-list .process-item{width: 200px; height: 200px; position: relative;display: flex; flex-direction: column; align-items: center;justify-content: center; gap: 30px; padding: 20px;  border-radius: 10px; background-color: #f5f5f5;}
.process-list .process-item span{font-size: 1.1rem;text-transform: uppercase; color: #257DD7;line-height: 1.4;}
.process-list .process-item strong{font-size: 1rem; font-weight: 700; letter-spacing: -0.75px;}
.process-list .process-item p{letter-spacing: -0.75px; font-size: 0.875rem; line-height: 1.4;text-align: center; line-height: 1.4;}
.process-item:not(:last-child)::after {content: ''; background: url(/images/sub/arrow-right.svg) 50% 50% no-repeat; background-size: contain;width: 24px; height: 24px;position: absolute; top: 50%; right: -48px; transform: translateY(-50%);display: block;}


.visual{padding: 100px 0;}

.visual-image{width: 100%;}
.visual-image img{width: 100%;object-fit: contain;}

.spec{padding-top: 100px;}

.spec-table{width: 100%;}
.spec-table table{width: 100%; border-collapse: collapse; border-top: 1px solid #111;table-layout: fixed;}
.spec-table th,
.spec-table td { padding: 14px 16px; border-bottom: 1px solid #e5e5e5; font-size: 0.8rem;line-height: 1.5;letter-spacing: -0.75px; text-align: left; color: #333;}
.spec-table th{background-color: #f5f5f5;font-weight: 600;}
.spec-table .product-name a {color: #333; text-decoration: none; transition: color 0.25s ease; font-weight: 500;}
.spec-table .product-name a:hover { color: #123a63; text-decoration: underline; text-underline-offset: 3px;}

@media(max-width:1440px) {
  .sect-cont .card-list.two>.card{width: calc((100% - 30px) / 2);}
  .sect-cont .card-list{gap: 30px;}
  .sect-cont .card-list .card .card-cont .key-title .tit{font-size: 1.8rem;}
  .sect-cont .card-list .card .card-cont .text b{font-size: 1.8rem;}
  .sect-cont .card-list .card .card-cont .text p{font-size: 1.2rem;}
  .process-list .process-item{min-height: 200px; height: auto;}
}
@media(max-width:1280px){
  .sect-cont .card-list .card .card-cont .img-cont{height: 400px;}
  .sect-cont .card-list .card .card-cont .key-title .head-badge p{font-size: 1rem;}
  .sect-cont .card-list .card .card-cont .key-title .tit{font-size: 1.5rem;}
  .sect-cont .card-list .card .card-cont .text b{font-size: 1.5rem;}
  .sect-cont .card-list .card .card-cont .text p{font-size: 1rem;}
  .content.cta .inner{flex-direction: column;}
  .image-video-play-link{left: 0;transform: translate(0, -50%);}
  .content.cta .inner .sect-tit{max-width: 100%;width: 100%;}

}

@media(max-width:1024px) {
.content .inner .sect-tit{width: 150px;}
  .sect-cont .card-list .card .card-cont .key-title .head-badge p{font-size: 0.9rem;}
  .sect-cont .card-list .card .card-cont .key-title .tit{font-size: 1.25rem;}
  .sect-cont .card-list .card .card-cont .text b{font-size: 1.25rem;}
  .sect-cont .card-list .card .card-cont .text p{font-size: 0.9rem;}
  .process-list{flex-direction: column;gap: 50px;}
  .process-list .process-item{width: 100%;}
  .process-list .process-item:not(:last-child)::after { top: auto; right: auto; bottom: -38px; left: 50%; transform: translateX(-50%) rotate(90deg);}
  .spec-table table {  border-top: 0; }
  .spec-table table thead { display: none;}
  .spec-table table,
  .spec-table table tbody,
  .spec-table table tr,
  .spec-table table td { display: block; width: 100%; }
  .spec-table table tbody { display: flex; flex-direction: column; gap: 14px; }
  .spec-table table tr { padding: 18px 20px; border: 1px solid #e5e8ec; border-radius: 10px;background: #f9f9f9; }
  .spec-table table td { padding: 0;border-bottom: 0; font-size: 0.875rem;}
  .spec-table table td+td { margin-top: 12px;}
  .spec-table table td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 0.75rem;  font-weight: 700; color: #777; }
  .spec-table table .product-name a { display: block;  font-size: 0.9rem; font-weight: 700; line-height: 1.5; color: #111; word-break: keep-all;  transition: all;}
  .spec-table table .product-name a::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 6px; vertical-align: -2px; background: url("/images/view-icon.svg") center / contain no-repeat;}
  .visual{padding-top: 0;}
}

@media(max-width:768px){
  .content .inner{flex-direction: column;justify-content: flex-start;gap: 20px;}
  .content .inner .sect-tit{width: 100%; max-width: 100%;}
  .sect-cont .card-list{gap: 20px;}
  .sect-cont .card-list .card .card-cont .img-cont{height: 350px;}
  .sect-cont .card-list.two>.card{width: 100%;}
  .link-section{height: 300px;}
  .content.cta .inner .sect-tit h2{font-size: 2rem;}
  .content.cta .inner .sect-tit .text p{font-size: 1.1rem;}
  .function-list .item{flex-direction: column;}
  .function-list .item .item-icon{width: 100%;min-height: 80px;}
    .function-list .item .item-icon img{width: 30px;height: 30px;}
}