/* ===========================
   1. Reset & Basic Settings
=========================== */
body, html {font-family: 'SUIT', sans-serif; letter-spacing: -0.02em; line-height: 1.5rem; min-height: 100vh; overflow-y: visible; background:#f9f9f9; min-width:1400px;}

.system-table-container {width: 100%; margin-bottom: 60px;}
.system-table-title {font-weight: 600; margin-bottom: 20px; color: #0c407c;}
.system-table-title .table-title-unit {font-weight: 500; color: #333;}
.system-table {width: 100%; border-collapse: collapse; border: 2px solid #aaa; table-layout: fixed;}
.system-table th:nth-child(1),.system-table td:nth-child(1),.system-table th:last-child,.system-table td:last-child {width: 20%;}
.system-table th:not(:first-child):not(:last-child),.system-table td:not(:first-child):not(:last-child) {width: 15%;}
.diver-line {width: 2px; height: 150px; background: linear-gradient(to top, #e0e0e0 0%, #e0e0e0 75%, #999 75%, #999 100%); margin: 20px auto;}
.system-table th, .system-table td {border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 15px 12px; text-align: center; vertical-align: middle;}
.system-table th {background-color: #0c407c; font-weight: 600; color: white;}
.system-table thead tr:nth-child(2) th {background-color: #0c407c; font-weight: 500; color: white;}
.system-table th:last-child,.system-table td:last-child {border-right: 2px solid #aaa;}
.system-table td {color: #666;}
.system-table tbody tr:hover {background-color: #f5f5f5;}
.system-table td[rowspan] {font-weight: 500;}
.system-table-caption {margin-top: 10px; color: #888; text-align: right;}

/* ===========================
   2. Header & Navigation
=========================== */
.top-area {position: fixed; top: 0; left: 0; width: 100%; height: 80px; min-height: 80px; z-index: 9000; overflow: visible; border-bottom: 1px solid rgba(255,255,255,0.3); transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1); opacity: 1; transform: translateY(0); min-width:1400px;}
.top-area.show-on-scroll {opacity: 1; pointer-events: auto; transform: translateY(0); animation: topAreaFadeIn 0.7s cubic-bezier(0.4,0,0.2,1);}
.top-area.hide-on-scroll {opacity: 0; pointer-events: none; transform: translateY(-40px); animation: topAreaFadeOut 0.7s cubic-bezier(0.4,0,0.2,1);}
@keyframes topAreaFadeIn {from {opacity: 0; transform: translateY(-40px);}
to {opacity: 1; transform: translateY(0);}
}
@keyframes topAreaFadeOut {from {opacity: 1; transform: translateY(0);}
to {opacity: 0; transform: translateY(-40px);}
}
.nav-menu ul li.nav-item {color: #fff;}
.nav-menu ul li.nav-item:hover {color: #fff; opacity: 0.8;}
.nav-menu .logo img {filter: brightness(0) invert(1);}
.nav-menu .menu-icon-btn svg rect {fill: #fff;}

.top-area:hover {background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.top-area:hover .nav-menu ul li.nav-item {color: #222;}
.top-area:hover .nav-menu ul li.nav-item:hover {color: #007bff; opacity: 0.8;}
.top-area:hover .nav-menu .logo img {filter: none;}
.top-area:hover .nav-menu .menu-icon-btn svg rect {fill: #fff;}
.top-area:hover .nav-menu .menu-icon-img {filter: none;}
.top-area.performance-style {background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.top-area.performance-style .nav-item {color: #fff;}
.top-area.performance-style .nav-item:hover {color: #fff; opacity: 0.8;}
.top-area.performance-style .logo a {color: #fff;}
.top-area.performance-style .logo a img {filter: brightness(0) invert(1);}
.top-area.performance-style .nav-sub-menu {background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);}
.top-area.performance-style .nav-sub-menu .col-title {color: #333;}
.top-area.performance-style .nav-sub-menu .col-desc {color: #666;}
.top-area.performance-style .nav-sub-menu li {color: #333;}
.top-area.performance-style .nav-sub-menu li:hover {color: #007bff;}
.top-area.performance-style .menu-icon img {filter: brightness(0) invert(1);}

.nav-menu {width: calc(100% - 100px); margin:0 auto; position: relative; z-index: 101; background: transparent; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; height: 80px;}
.logo {margin-left: 10px;}
.logo a {font-weight: 700; color: #2c3e50; text-decoration: none;}
.logo a:hover {color: #007bff;}
.logo a img {height: 30px;}
.nav-menu > ul {display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; height: 100%; align-items: center;}
.nav-item {position: relative; font-weight: 900; color: #000; padding: 0 15px; cursor: pointer; height: 100%; display: flex; align-items: center;}
.nav-item:hover {color: #007bff;}
.nav-sub-menu {visibility: hidden; position: absolute; left: 50%; top: 80px; width: 100%; background: rgba(255,255,255,1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid #eee; z-index: 999; padding: 50px 0; opacity: 0; transform: translate(-50%, 0); pointer-events: none;}
.nav-sub-menu.active {visibility: visible; opacity: 1; transform: translate(-50%, 0); pointer-events: auto; visibility: visible; transition: visibility 0s linear;}
.sub-menu-inner {width: calc(100% - 200px); margin: 0 auto; display: flex; gap: 50px; align-items: flex-start; padding: 0 20px;}
.sub-menu-col {display: flex; gap: 30px; align-items: flex-start; width: 100%;}
.col-title-img {width: 260px; height: 150px; overflow: hidden; flex-shrink: 0; border-radius: 0 30px 0 30px;}
.col-title-img img {width: 100%; height: 100%; object-fit: cover;}
.col-grp {display: flex; flex-direction: column; gap: 10px; width: calc(50% / 2); min-width: 300px;}
.col-title {font-weight: 500; margin-bottom: 0; color: #333; display: block; padding-top: 5px; width: 100%; line-height: 1.2rem; font-family: 'Oxanium', sans-serif; line-height: 2.2rem;}
.col-desc {color: #333; line-height: 1.6; margin-bottom: 0; width: 100%; display: block;}
.sub-menu-col ul {list-style: none; padding: 0; margin: 0; border-left: 1px solid rgba(0,0,0,0.1); padding-left: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.sub-menu-col li {width: 250px; color: #333; padding: 5px 0; cursor: pointer; position: relative; padding-left: 20px; line-height: 1.2; font-weight: 700;}
.sub-menu-col li::before {content: "▶"; position: absolute; left: 0; top: 5px; color: #007bff;}
.sub-menu-col li:hover {color: #007bff;}
.menu-icon {display: none;}
.menu {width: 24px; height: 24px;} 

/* ===========================
   3. Main Visual & Hero Section
=========================== */
.main-image {position: relative; width: 100%; height: calc(100vh - 80px); min-height: 400px; overflow: hidden; background: #000 url('../image/main-image.png') no-repeat center center; background-size: cover;  }
.main-image .main-bg {width: 100vw; height: 100vh; object-fit: cover; filter: hue-rotate(30deg) saturate(1.2) brightness(1.1) contrast(0.9);}
.main-image .main-bg-preload {width: 100vw; height: 100vh; object-fit: cover; filter: hue-rotate(30deg) saturate(1.2) brightness(1.1) contrast(0.9); transition: opacity 0.5s ease-out; will-change: opacity;}
.main-image .main-bg.loaded + .main-bg-preload {opacity: 0; pointer-events: none;}
.main-visual-text {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center; width: 100%; z-index: 2; font-weight: 300 !important; max-width:1400px; margin:0 auto;}
.main-visual-title {max-width: 1400px; margin: 0 auto; text-align: left; line-height: 1.4; margin-bottom: 30px; overflow: hidden; background: transparent; padding: 0; border-radius: 0; border: none; color: #ffffff; font-weight: 700; display: none; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; font-size: 2.7rem;}
.main-visual-title[data-video="0"] {display: flex;}
.main-visual-title .eng-slogan {font-size: 3.5rem; font-weight: 500; margin-bottom: 15px; letter-spacing: -1px; opacity: 0; transform: translateX(350px); animation: slideInFromRight 0.8s ease-out 0.2s forwards; font-family: 'Oxanium', sans-serif;}
.main-visual-title span {display: inline-block; opacity: 0; transform: translateX(50px); animation: slideInFromRight 0.8s ease-out forwards;}
.main-visual-title div:nth-child(2) span:nth-child(1) {animation-delay: 0.4s;}
.main-visual-title div:nth-child(2) span:nth-child(2) {animation-delay: 0.5s;}
.main-visual-title div:nth-child(2) span:nth-child(3) {animation-delay: 0.6s;}
.main-visual-title div:nth-child(2) span:nth-child(4) {animation-delay: 0.7s;}
.main-visual-title div:nth-child(2) span:nth-child(5) {animation-delay: 0.8s;}
.main-visual-title div:nth-child(2) span:nth-child(6) {animation-delay: 0.9s;}
.main-visual-title div:nth-child(2) span:nth-child(7) {animation-delay: 1.0s;}
.main-visual-title div:nth-child(2) span:nth-child(8) {animation-delay: 1.1s;}
.main-visual-title div:nth-child(3) span:nth-child(1) {animation-delay: 1.2s;}
.main-visual-title div:nth-child(3) span:nth-child(2) {animation-delay: 1.3s;}
.main-visual-title div:nth-child(3) span:nth-child(3) {animation-delay: 1.4s;}
.main-visual-title div:nth-child(3) span:nth-child(4) {animation-delay: 1.5s;}
.main-visual-title div:nth-child(4) span:nth-child(1) {animation-delay: 1.6s;}
.main-visual-title div:nth-child(4) span:nth-child(2) {animation-delay: 1.7s;}
@keyframes slideInFromRight {0% {transform: translateX(50px); opacity: 0;}
100% {transform: translateX(0); opacity: 1;}
}

@keyframes slideOutToLeft {0% {transform: translateX(0); opacity: 1;}
100% {transform: translateX(-50px); opacity: 0;}
}


.main-visual-paging {color: #ffffff; opacity: 0.7; margin-top: 20px; font-weight: 400; letter-spacing: 0.1em; text-align: left;}
.main-visual-head {font-weight: 300 !important;}

/* ===========================
   4. Progress & Visual Elements
=========================== */
.progress-bars {position: static; margin-top: 10px; display: flex; gap: 12px; width: 480px; height: 3px; justify-content: flex-start; align-items: center;}
.progress-bar {width: 132px; height: 3px; background: rgba(255, 255, 255, 0.3); overflow: hidden;}
.progress-fill {width: 0%; height: 100%; background: #fff; transition: width 0.1s linear; animation: progressFill 2s ease-out forwards; animation-play-state: paused;}
@keyframes progressFill {
  0% { width: 0%; }
  100% { width: 100%; }
}

.main-visual-image {position: absolute; left: 50%; top: calc(100% + 20px); transform: translateX(-50%); width: 400px; max-width: 90vw; z-index: 2; display: flex; justify-content: center;}
.main-visual-image img {width: 100%; height: auto; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.main-visual-subtitle {color: #999; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.02em; margin: 20px 0;}
.main-visual-title2 {font-weight: 700; margin-bottom: 10px; letter-spacing: -0.01em; margin: 20px 0;}
.main-visual-strong {color: #0c407c; font-family: 'Oxanium', 'SUIT', sans-serif; font-weight: 500 !important;}
.main-visual-desc {color: #aaa; font-weight: 400; margin-top: 8px; line-height: 1.5; margin-bottom: 10px; margin: 20px 0;}
.wrap {width:100%;}
section {width:100%; margin: 0 auto;}
.main-title-section {width:100%; margin: 0 auto; margin-bottom: 0; padding-top: 100px;}
.main-visual-head {max-width:1400px; margin: 0 auto;}
.main-visual-area {display: flex; justify-content: space-between; align-items: flex-start; min-height: calc(100vh - 80px); height: auto; position: relative; max-width: 1400px; margin: 0 auto;}
.main-visual-images {position: relative; width: 600px; min-width: 300px; margin-right: auto; height: 550px;}
.main-visual-images img {position: absolute; object-fit: cover; border-radius: 30px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: all 1s cubic-bezier(.4,0,.2,1);}
.main-visual-images .pos1 {top: 0; left: 0; width: 100%; height: 100%; z-index: 3; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);}
.main-visual-images .pos2 {top: 50px; left: 500px; width: 230px; height: 180px; z-index: 4; box-shadow: 0 7px 7px rgba(0, 0, 0, 0.4);}
.main-visual-images .pos3 {top: 500px; left: 650px; width: 120px; height: 120px; z-index: 1; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);}
.main-visual-services {display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; align-items: flex-end;}
.service {width: 520px; height: 180px; display: flex; flex-direction: column; gap: 10px; border: 1.5px solid #e0e0e0; background: #fff; align-items: flex-start; justify-content: center; padding: 25px 30px; box-sizing: border-box; border-radius: 30px;}
.service-num {font-weight: 600; color: #bdbdbd; margin-bottom: 2px; letter-spacing: 0.05em;}
.service.active .service-num,.service.active .service-title {color: #fff;}
.service-title,.service-desc,.service-btn {margin-left: 0;}
.service-title {font-weight: 600; color: #0c407c; margin-bottom: 2px; font-family: 'Oxanium', sans-serif;}
.service.active {background: #0c407c; color:#fff;}
.service.active .service-title {color: #fff;}
.service-desc {color: #222; font-size:1rem; font-weight: 600; margin-bottom: 8px; margin-top: 2px;}
.service.active .service-desc {color:#fff;}
.service-btn {background: #f5f5f5; color: #888; border: none; border-radius: 16px; padding: 2px 8px; font-weight: 700; cursor: pointer; transition: background 0.2s; margin-top: 2px; width: 80px; align-self: flex-start; border: 1px solid #eee;}
.service-btn:hover {background: #e0eaff; color: #0050ff;}
/* ===========================
   5. Technology Section
=========================== */
.tech-section {height: calc(100vh - 80px); margin-bottom:100px; display: flex; flex-direction: column; align-items: center;}
.section-title-grp {width:100%; text-align: left; max-width:1400px; margin: 0 auto 40px auto; padding-top: 80px; z-index: 10; position: relative;}
.performance-section .section-title-grp {z-index: 1;}
.main-tech-desc {color: #aaa; font-weight: 500; margin-bottom: 30px; text-align: left; width:100%;}
.main-tech-list {max-width: 1400px; width:100%; border-radius: 8px; padding: 0; display: flex; flex-direction: column; gap: 0;}
.main-tech-item {display: flex; align-items: center; padding: 22px 40px; border-bottom: 1px solid #eee; background: #fff; transition: background 0.3s;}
.main-tech-item:last-child {border-bottom: none;}
.main-tech-item--active,.main-tech-active {background: linear-gradient(135deg, #1a5a9e 0%, #0c407c 50%, #0a2f5a 100%); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin:10px 0;}
.main-tech-item--active .main-tech-main,.main-tech-item--active .main-tech-sub,.main-tech-active .main-tech-main,.main-tech-active .main-tech-sub {color: #fff;}
.main-tech-item--active .main-tech-more,.main-tech-active .main-tech-more {background: #fff; color: #0c407c;}
.main-tech-item--active .main-tech-more img,.main-tech-active .main-tech-more img {filter: invert(34%) sepia(99%) saturate(749%) hue-rotate(186deg) brightness(95%) contrast(92%);}
.main-tech-item--active .main-tech-icon img,.main-tech-active .main-tech-icon img {filter: brightness(0) invert(1);}
.main-tech-icon {width: 40px; margin-right: 32px; display: flex; align-items: center; justify-content: center;}
.main-tech-main {font-weight: 700; margin-bottom: 6px; color: #222;}
.main-tech-sub {color: #888;}
.main-tech-more {margin-left: auto; background: #fff; color: #222; border: 1px solid #bbb; border-radius: 3px; font-weight: 600; padding: 4px 18px 4px 18px; display: flex; align-items: center; gap: 6px; border-radius: 16px; transition: background 0.2s, color 0.2s;}
.main-tech-more:hover {background: #0c407c; color: #fff; border-color: #0c407c;}
.main-tech-more img {width: 16px; height: 16px;}
/* ===========================
   6. Performance Section
=========================== */
.performance-section {
  background: #f5f5f5; /* background-image: url('../image/bg_performance.jpg'); */
  background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0 auto; min-height: 800px; height: auto; overflow: visible; position: relative; box-sizing: border-box; padding: 80px 0 120px 0;}

.performance-bg-image {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; opacity: 1; /* filter: hue-rotate(280deg) saturate(1.4) brightness(0.8) contrast(1.2); */ transition: opacity 0.5s ease;
}
.main-performance-title-area {text-align: left; max-width:1400px; margin: 0 auto 40px auto; padding: 0 20px 0 20px; z-index: 10; position: relative;}

.main-performance-sc {font-family: 'SUIT', sans-serif; color: #fff; margin-bottom: 0;}
.main-performance-desc {color: #fff; font-weight: 600; margin-bottom: 30px; height:50px; overflow: hidden;}
.main-performance-paging {color: #888; margin-top: 18px;}
.main-performance-list {display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 30px; max-width: 1400px; width: 100%; margin: 0 auto; position: relative; height: auto; overflow: visible; align-items: start; z-index: 1;} 
 
@keyframes rotateIn {0% {transform: rotateY(180deg); opacity: 0;} 100% {transform: rotateY(0deg); opacity: 1;}
}
.main-performance-item  {background: rgba(64, 158, 255, 0.2); color: #333; padding: 20px 22px 16px 22px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); display: flex; flex-direction: column; gap: 8px; width: calc(25% - 22.5px); height: 280px; transition: all 0.3s ease; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 2px solid rgba(255, 255, 255, 0.1); transform-style: preserve-3d; perspective: 1000px; transform: rotateY(180deg); opacity: 0; animation: rotateIn 0.8s ease-out forwards; animation-play-state: paused;}
.main-performance-item.animate {animation-play-state: running;}
.main-performance-item:hover {transform: rotateY(0deg) scale(1.02) translateY(-5px); box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease;}
.main-performance-item.active {display: flex;}
.main-performance-label {color: #fff; opacity: 0.5; font-weight: 600; margin-bottom: 2px;}
.main-performance-corp {font-weight: 700; margin-bottom: 2px; color: #fff; line-height: 1.8em; border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
.main-performance-more {align-self: flex-start; background: #fff; color: #0c407c; border: none; border-radius: 16px; font-weight: 700; padding: 4px 18px; cursor: pointer; transition: background 0.2s, color 0.2s; margin-top: 2px;}
.main-performance-more:hover {background: #e0eaff; color: #0c407c;}
 


/* ===========================
   7. Partner Section
=========================== */
.partner-section {display: flex; flex-direction: column; align-items: center; padding-top: 0; width:100%; margin:0 auto; height: calc(100vh - 80px);}
.main-partner-header {display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 60px; position: relative; max-width:1400px; width:100%; margin:0 auto;}
.main-partner-title-area {display: flex; flex-direction: column; align-items: flex-start; padding:100px 0 60px 0; width:100%; margin:0 auto;}

.main-partner-desc {font-family: 'SUIT', sans-serif; color: #333; margin-bottom: 0;}
.main-partner-slogan {color: #333; font-size:2rem; text-align: right; margin-top: 18px; line-height: 1.2; position: absolute; right: 50px; top: 80px; font-weight: 700; color: #0c407c;}

.slogan-word {display: inline-block; opacity: 0; transform: translateX(100px); animation: sloganAnimation 8.5s ease-out infinite; margin-right: 8px;}
.slogan-word[data-delay="0.0"] {animation-delay: 0.0s;}
.slogan-word[data-delay="0.5"] {animation-delay: 0.5s;}
.slogan-word[data-delay="1.0"] {animation-delay: 1.0s;}
.slogan-word[data-delay="1.5"] {animation-delay: 1.5s;}
.slogan-word[data-delay="2.0"] {animation-delay: 2.0s;}
.slogan-word[data-delay="2.5"] {animation-delay: 2.5s;}
.slogan-word[data-delay="3.0"] {animation-delay: 3.0s;}

@keyframes sloganAnimation {
  0% {opacity: 0; transform: translateX(100px);}
  10% {opacity: 1; transform: translateX(0);}
  70% {opacity: 1; transform: translateX(0);}
  80% {opacity: 0; transform: translateX(-100px);}
  100% {opacity: 0; transform: translateX(-100px);}
}
.main-partner-logos {width: 100%; overflow: hidden; justify-content: flex-start; display: flex; flex-direction: column; gap: 40px; margin-top: 50px; position: relative;}
.main-partner-logos:hover .main-partner-logos-row,
.main-partner-logos:hover .main-partner-logos-row-reverse {animation-play-state: paused;}
.main-partner-logos-row {display: flex; flex-direction: row; gap: 32px; width: max-content; animation: partnerScrollRight 200s linear infinite; will-change: transform;}
.main-partner-logos-row-reverse {display: flex; flex-direction: row; gap: 32px; width: max-content; animation: partnerScrollLeft 200s linear infinite; will-change: transform;}
@keyframes partnerScrollRight {0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}
@keyframes partnerScrollLeft {0% {transform: translateX(0);}
100% {transform: translateX(-100%);}
}
.main-partner-logo-box {width: 260px; height: 190px; background: #fff; border: 1px solid #ddd; border-radius: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; /*box-shadow: 0 2px 8px rgba(0,0,0,0.05); */ transition: all 0.3s ease; margin-bottom: 8px; flex-shrink: 0; position: relative; padding:20px; border-radius: 10px;}
.main-partner-logo-box:hover {transform: translateY(-5px); /* box-shadow: 0 2px 8px rgba(0,0,0,0.05); */}
.main-partner-inner {color: #ddd; font-weight: 800; margin-bottom: 8px; letter-spacing: -0.5px; position: absolute; top: 20px; left: 20px;}
.main-partner-logo-box img {max-width: 140px; max-height: 80px; margin-bottom: 18px; object-fit: contain;}
.main-partner-logo-name {font-family: 'SUIT', 'Oxanium', sans-serif; font-weight: 800; color: #555; text-align: center; position: absolute; bottom: 25px; letter-spacing: -0.5px;}
/* ===========================
   8. Contact Section
=========================== */
.contact-section {background: #f5f5f5; background-image: url('../image/bg_contact.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 100px 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: calc(100vh - 80px); position: relative; overflow: hidden; width: 100%;}

.contact-bg-image {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; opacity: 1; transition: opacity 0.5s ease;
}
.main-contact-inner {width:100%; max-width:1400px; margin:0 auto; position: relative; z-index: 1; padding: 0 0px; box-sizing: border-box;}
.main-contact-header {margin-bottom: 32px;}

.main-contact-subtitle {color: #fff; font-weight: 500;}
.main-contact-info {margin-bottom: 36px; color: #fff; display: flex; flex-direction: column; gap: 8px;}
.main-contact-map-btn {background: rgba(64, 158, 255, 0.2); color: #fff; padding: 0 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: space-between; width: 100%; height: 60px; flex-shrink: 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 2px solid rgba(255, 255, 255, 0.1); cursor: pointer; margin-top: 16px; font-weight: 600; opacity: 0; transform: translateY(50px); transition: all 0.8s ease-out;}
.main-contact-map-btn.animate {opacity: 1; transform: translateY(0);}
.main-contact-map-btn:hover {transform: translateY(-2px); box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.main-contact-map-btn:hover {transform: scale(1.02) rotateX(10deg); box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.main-contact-map-btn::after {content: " "; color: #fff;}
.main-contact-downloads {display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 16px; width: 100%; margin-bottom: 32px;}
.main-download-row {display: contents;}
.main-download-btn {background: rgba(64, 158, 255, 0.2); color: #fff; padding: 0 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: space-between; width: 100%; height: 60px; flex-shrink: 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 2px solid rgba(255, 255, 255, 0.1); cursor: pointer; font-weight: 600; opacity: 0; transform: translateY(50px); transition: all 0.8s ease-out;}
.main-download-btn.animate {opacity: 1; transform: translateY(0);}
.main-download-btn:hover {transform: translateY(-2px); box-shadow: 0 2px 8px rgba(0,0,0,0.05);}


.main-contact-map-btn:nth-child(1) {transition-delay: 0.2s; order: 1;}
.main-contact-map-btn:nth-child(2) {transition-delay: 0.4s; order: 2;}
.main-contact-map-btn:nth-child(3) {transition-delay: 0.6s; order: 3;}

.main-download-btn:nth-child(1) {transition-delay: 0.8s; order: 4;}
.main-download-btn:nth-child(2) {transition-delay: 1.0s; order: 5;}
.main-download-btn:nth-child(3) {transition-delay: 1.2s; order: 6;}
.main-download-btn:nth-child(4) {transition-delay: 1.4s; order: 7;}
.main-download-btn:nth-child(5) {transition-delay: 1.6s; order: 8;}
.main-download-btn:nth-child(6) {transition-delay: 1.8s; order: 9;}

.main-partner-logo-box.stagger-animation {opacity: 0; transform: translateY(30px); transition: all 0.6s ease-out;}
.main-partner-logo-box.stagger-animation.animate {opacity: 1; transform: translateY(0);}

.main-tech-item.stagger-animation {opacity: 0; transform: translateX(-30px); transition: all 0.6s ease-out;}
.main-tech-item.stagger-animation.animate {opacity: 1; transform: translateX(0);}

.service.stagger-animation {opacity: 0; transform: translateY(30px); transition: all 0.6s ease-out;}
.service.stagger-animation.animate {opacity: 1; transform: translateY(0);}

.main-performance-item.stagger-animation {opacity: 0; transform: translateY(30px); transition: all 0.6s ease-out;}
.main-performance-item.stagger-animation.animate {opacity: 1; transform: translateY(0);}
.main-download-btn:hover {transform: scale(1.02) rotateX(10deg); box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.main-download-btn img {width: 20px©; height: 20px; filter: brightness(0) invert(1);}
.main-visual-content {display: flex; justify-content: space-between; align-items: flex-start; max-width:1400px; margin: 0 auto;}

/* ===========================
   9. Footer
=========================== */
.footer {width: 100%; background: #2c2c2c; color: #ccc; padding: 48px 0 0 0;}
.footer-inner {width: 100%; max-width:1400px; font-size:12px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 40px;}
.footer-left {display: flex; flex-direction: column; gap: 18px;}
.footer-logo {font-weight: 700; margin-bottom: 8px; letter-spacing: 0.02em;}
.footer-logo img {height: 35px; filter: brightness(0) invert(1); opacity: 0.8;}
.footer-info {color: #e0e0e0; display: flex; flex-direction: column;}
.footer-info>div {margin-bottom: 5px;}
.footer-right {display: flex; align-items: center;}
.footer-nav {display: flex; gap: 28px; list-style: none; padding: 0; margin: 0;}
.footer-nav li {color: #fff; cursor: pointer; font-weight: 500;}
.footer-nav li:hover {color: #007bff;}
.footer-bottom {width:100%; max-width: 1400px; margin: 32px auto 0 auto; padding: 18px 0 12px 0; border-top: 1px solid #444; display: flex; justify-content: space-between; align-items: center; color: #bbb; font-size:14px;}
.footer-copy {letter-spacing: 0.01em;}
.footer-email {color: #bbb;}
#floating-circles {display: block;}
.floating-circle {position: absolute; width: 120px; height: 120px; opacity: 0.5; transition: transform 2.5s linear, left 2.5s linear, top 2.5s linear; will-change: transform, left, top; border-radius: 0; pointer-events: none;}

/* ===========================
   10. MLOps & Special Sections
=========================== */
.mlops-section {width: 100%; padding: 0;}
.multimodal-mlops-container {width:100%; max-width: 1400px; margin: 0 auto; text-align: center; padding-top:80px; margin-bottom:100px;}
/*.section-title {font-weight: 400 !important; margin-bottom: 8px; line-height: 1.2em; color: #222; font-family: 'Oxanium', sans-serif;}
*/
@keyframes slideInFromLeft {0% {opacity: 0; transform: translateX(-100px);}
100% {opacity: 1; transform: translateX(0);}
}
@keyframes slideInFromRight {0% {opacity: 0; transform: translateX(100px);}
100% {opacity: 1; transform: translateX(0);}
}
.multimodal-mlops-subtitle {font-weight: 600; margin-bottom: 15px; color: #666; letter-spacing: -0.02em;}

.performance-section .section-title {color: #fff;}
.contact-section .section-title {color: #fff;}
.multimodal-mlops-strong {background: linear-gradient(135deg, #8B5CF6 0%, #3B82F6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;}
.multimodal-mlops-subtitle {font-weight: 600; margin-bottom: 15px; color: #666; letter-spacing: -0.02em;}
.multimodal-mlops-desc {color: #999; line-height: 1.6; max-width: 800px; margin: 0 auto;}

/* ===========================
   11. Header Area & Navigation 
=========================== */
.headarea-hero {position: relative; width: 100%; height: 500px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;}
.headarea-hero-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; filter: brightness(0.6); display: block !important; background-color: #000; opacity: 1 !important; visibility: visible !important; margin: 0; padding: 0;}
.headarea-hero-title {position: relative; z-index: 200; line-height: 1.2; font-weight: 500; color: #fff; padding: 10px; top: 150px; font-family: 'Oxanium', sans-serif;}
.headarea-hero-subtitle {position: relative; z-index: 200; font-weight: 500; color: #fff; top: 150px;}
.headarea-breadcrumb {display:none;}
/* Breadcrumb */

.headarea-breadcrumb {position: absolute; bottom: 100px; width: auto; padding: 5px 30px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff; letter-spacing: 0.05em; background:rgba(0,0,0,0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border:solid 1px rgba(255,255,255,0.2);}
.headarea-breadcrumb-text {color: #fff; font-weight: 500; text-shadow: none;}
.headarea-breadcrumb-text.current {font-weight: 700;}
.headarea-breadcrumb-arrow {filter: brightness(0) invert(1); opacity: 0.7;}
.headarea-breadcrumb-icon {width: 16px; height: 16px; margin-right: 5px; filter: brightness(0) invert(1);}

.headarea-group {width: 100%; overflow:visible; margin: 0 auto; height:52px; text-align: center; background:rgba(255,255,255,0.1); margin-bottom: 10px; position:absolute; top:448px; left:0; border-top:solid 1px rgba(255,255,255,0.3); border-bottom:solid 1px rgba(255,255,255,0.3); z-index:3000; font-size:0.9rem;}
.headarea-tabs {display: flex; background: none; border: none; box-shadow: 0 2px 8px rgba(0,0,0,0.05); max-width: 1400px; width: 100%; margin: 0 auto; padding: 0 0px; box-sizing: border-box; justify-content: flex-start; border-right:solid 1px rgba(255,255,255,0.3);}
.headarea-tab {border-left:solid 1px rgba(255,255,255,0.3); backdrop-filter: blur(10px); padding: 0; height: 50px; display: flex; align-items: center; justify-content: flex-start; font-weight: bold; color: #fff; cursor: pointer; transition: background 0.2s, color 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.05); flex: 1; text-align: left;}
.headarea-tab:hover {background: rgba(12, 64, 124, 1); color: #fff;}
.headarea-tab-link {color: inherit; text-decoration: none; display: flex; align-items: center; height: 100%; /* width: 100%; */ justify-content: space-between; gap: 20px; text-align: left; padding: 0 20px;}
.headarea-tab-text {font-weight: bold; letter-spacing: 0.01em; text-align: left; margin-right: 20px;}
.headarea-tab-icon {width: 16px; height: 16px; filter: brightness(0) saturate(100%) invert(1); transition: filter 0.2s; margin-left: 20px; margin-right: 0;}
.headarea-tab:hover .headarea-tab-icon {filter: brightness(0) saturate(100%) invert(1);}
.headarea-tab-content {display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; height: 100%; text-align: left; padding: 0 20px;}
.headarea-tab-arrow {width: 24px; height: 24px; filter: brightness(0) saturate(100%) invert(1); transition: all 0.2s; transform: rotate(0deg); margin-left: 20px; margin-right: 0;}
.headarea-tab:hover .headarea-tab-arrow {filter: brightness(0) saturate(100%) invert(1);}
.headarea-tab.dropdown:hover .headarea-tab-arrow {transform: rotate(180deg);}
.headarea-tab-dropdown {position: absolute; top: 100%; left: 0; width: 100%; background: #fff; backdrop-filter: blur(10px); border: 1px solid rgba(200, 200, 200, 0.3); border-top: none; display: none; z-index: 3001; border:solid 1px #aaa;}
.headarea-tab.dropdown.hover .headarea-tab-dropdown {display: block;}
.dropdown-item {display: block; padding: 12px 20px; color: #333; text-decoration: none; transition: background 0.2s, color 0.2s;}
.dropdown-item:last-child {border-bottom: none;}
.dropdown-item:hover {background: rgba(12, 12, 12, 0.1); color: #333;}
.dropdown-item.active {background: rgba(12, 12, 12, 0.2); color: #333; font-weight: 600;}


.headarea-content {padding: 0px; max-width: 1400px; margin: 0 auto;}
.headarea-content-block {display: flex; gap: 60px; align-items: flex-start; margin-bottom: 80px;}
#headarea-block-2 {margin-bottom: 100px;}
.headarea-content-block .headarea-content-image {width: 40%; min-width: 0;}
.headarea-content-block .headarea-content-image-max {width: 100%; min-width: 0;}
.headarea-content-block .headarea-content-image img {width: 100%; height: auto; border-radius:0;}
.headarea-content-block .headarea-content-text-block {flex: 1;}
.headarea-content-heading {font-weight: 700; line-height: 1.5; margin-bottom: 30px; color: #222;}
.headarea-content-paragraph {line-height: 1.8; color: #555; margin-bottom: 20px; text-align: justify;}
.headarea-content-block-centered {text-align: center; margin: 100px 0; padding:0 20px;} 
.headarea-ceo-section {text-align: right; padding: 40px 0; margin-bottom: 60px; font-size:2rem;}
.headarea-ceo-title {color: #666; margin-bottom: 10px;}
.headarea-ceo-name {font-weight: 700; color: #333;}
.headarea-bottom-nav {width: 100%; max-width:100%; margin: 0 auto; display: flex; justify-content: space-between;}
.headarea-nav-button {flex: 1; padding: 40px; text-align: center; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 15px;}
.headarea-nav-button.prev {background: #28a745; color: #fff; justify-content: flex-end;}
.headarea-nav-button.prev img {transform: rotate(180deg); filter: brightness(0) invert(1);}
.headarea-nav-button.prev:hover {background: #218838;}
.headarea-nav-button.next {background: #007bff; color: #fff; justify-content: flex-start;}
.headarea-nav-button.next img {filter: brightness(0) invert(1);}
.headarea-nav-button.next:hover {background: #0056b3;}
.headarea-nav-button img {width: 42px; height: 42px; transition: transform 0.3s ease; position: relative; top: -2px;}
.headarea-nav-button:hover img {transform: scale(1.1);}
.headarea-nav-button.prev:hover img {transform: scale(1.1) rotate(180deg);}


.headarea-content-title {max-width: 1400px; line-height: 1.2; font-weight: 700; margin-bottom: 20px;}
.head-subtitle {display: inline; font-weight: 600; margin-bottom: 20px; background:rgba(0,123,255,0.2); margin:0 auto; letter-spacing: -0.05em; padding: 7px 24px; border-radius: 20px;}
.headarea-content-divider {width: 120px; height: 2px; background: #007bff; margin: 0 auto;}

.article {max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px;}
.a-2-tec-tv-vr-ict-vr-ar-vr,.a-2-tec-2010-it-x-264-drm-tv-html-5,.a-2-tec-ai-big-data-ai-nlp-hadoop-spark,.ai-big-data,.ai-a-2-tec-x-ray-mri-ct-ai-a-2-tec-emr,.a-2-tec-eclipse-pom-free-a-2-tec {line-height: 1.8; color: #333; text-align: justify;}
.ai-big-data {font-weight: 600; color: #007bff; text-align: center; margin: 40px 0;}
.vr-ar {background: #f8f9fa; padding: 30px; border-left: 4px solid #007bff; margin: 40px 0;}
.vr-ar-span {font-weight: 600; color: #007bff;}
.vr-ar-span2 {font-weight: 500; color: #333;}
.div-5-span {font-weight: 600; color: #333;}
.div-5-span2 {color: #666; margin-left: 10px;}
.div6 {max-width: 1400px; margin: 0 auto 60px auto; text-align: right; font-weight: 700; color: #007bff;}

.frame-11 {max-width: 1400px; margin: 0 auto 60px auto; display: flex; gap: 20px; justify-content: center;}
.rectangle-7, .rectangle-8 {width: 200px; height: 60px; background: #007bff; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; color: #fff; font-weight: 600;}
.rectangle-7:hover, .rectangle-8:hover {background: #0056b3; transform: translateY(-2px);}
.div2, .div3 {color: #fff;}
.frame2, .frame3 {width: 20px; height: 20px; margin-left: 10px; filter: brightness(0) invert(1);}

.headarea-to-top {position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background: #007bff; border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; z-index: 1000;}
.headarea-to-top:hover {background: #0056b3; transform: translateY(-3px);}
.headarea-to-top-circle {width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%;}
.headarea-to-top-arrow {width: 16px; height: 16px; filter: brightness(0) invert(1); position: absolute;}

.headarea-container {border:solid 0px #f30;}
.contents {width:100%; margin-bottom:100px; border:dotted 0px #06f;}
.contents .wrap {max-width:1400px; border:solid 0px #f30; margin:0 auto;}

.section-nav {position: fixed; right: 30px; top: 50%; transform: translateY(-50%); z-index: 1000; display: flex; align-items: center;}
.section-nav-list {list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; position: relative;}
.section-nav-item {display: flex; align-items: center; cursor: pointer; transition: all 0.3s ease; position: relative; width: 10px; height: 10px;}
.section-nav-item::before {content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; background: rgba(153, 204, 255, 1.0); border-radius: 0%; transform: translate(-50%, -50%); transition: all 0.3s ease;}
.section-nav-item:hover::before {background: rgba(255, 255, 255, 0.8); width: 12px; height: 12px;}
.section-nav-item.active::before {background: #00d4ff; width: 12px; height: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.section-nav-number {display: none;}
.section-nav-label {display: none;}

.org-chart-container {margin-bottom: 60px; padding: 30px; width: 100%; overflow-x: auto; border: 1px solid #ddd; border-radius: 20px;}
.org-chart {text-align: center; min-width: 900px;}
.org-chart ul {padding-top: 20px; position: relative; transition: all 0.5s;}
.org-chart li {display: inline-block; text-align: center; list-style-type: none; position: relative; padding: 20px 5px 0 5px; vertical-align: top; transition: all 0.5s;}
.org-chart li::before,.org-chart li::after {content: ''; position: absolute; top: 0; right: 50%; border-top: 2px solid #ccc; width: 50%; height: 20px;}
.org-chart li::after {right: auto; left: 50%; border-left: 2px solid #ccc;}
.org-chart li:only-child::after,.org-chart li:only-child::before {display: none;}
.org-chart li:only-child {padding-top: 0;}
.org-chart li:first-child::before,.org-chart li:last-child::after {border: 0 none;}
.org-chart li:last-child::before {border-right: 2px solid #ccc; border-radius: 0 5px 0 0;}
.org-chart li:first-child::after {border-radius: 5px 0 0 0;}
.org-chart ul ul::before {content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid #ccc; width: 0; height: 20px;}
.org-chart li .org-node {color: #fff; text-decoration: none; display: inline-block; min-width: 225px; padding: 1px; position: relative; opacity: 0; transform: translateY(-20px); transition: all 0.6s ease;}
.org-chart li .org-node.animate {opacity: 1; transform: translateY(0);}
.org-chart li::before,.org-chart li::after,.org-chart ul ul::before {opacity: 0; transition: opacity 0.8s ease; transition-delay: 2s;}
.org-chart li.animate-lines::before,.org-chart li.animate-lines::after,.org-chart ul.animate-lines::before {opacity: 1;}
.org-chart li .org-node span {padding: 12px 20px; display: block; border: 3px solid #fff;}
.org-chart .ceo {background-color: #0c407c;}
.org-chart .ceo span {padding: 25px 30px; font-weight: 600; border: 3px solid #fff;}
.org-chart .department {background-color: #0c407c;}
.org-chart .team {background-color: #546e7a;}

.org-chart ul ul ul {position: relative; overflow: hidden; padding-top: 10px;}
.org-chart ul ul ul::before {content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 100%; border-left: 2px solid #ccc;}
.org-chart ul ul ul li {display: block; padding-top: 10px; padding-bottom: 10px;}
.org-chart ul ul ul li::before,.org-chart ul ul ul li::after {content: none;}
.org-chart ul ul ul li:last-child {padding-bottom: 0;}

.problem-centered-container {margin-top:60px;}
.history-container {position: relative; padding: 40px 0;}
.history-container::before {content: ''; position: absolute; left: 40%; top: 0; width: 2px; height: 100%; background: #e0e0e0; transform: translateX(-50%);}
.history-group {position: relative; margin-bottom: 60px;}
.history-group:has(.history-image) {margin-bottom: 100px;}
.history-image {position: absolute; left: 0; top: 0; width: 27%; overflow: hidden;}
.history-image img {width: 100%; box-sizing: border-box; border-radius: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.history-image-caption {margin: 15px 0 30px 0; font-weight: 500; color: #333; text-align: center; line-height: 1.5;}
.history-year {position: absolute; left: 40%; top: 0; transform: translate(-50%, -50%); width: 130px; height: 130px; background-color: #fff; border: 2px solid #0c407c; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size:1.5rem; font-weight: 800; color: #0c407c; z-index: 1; opacity: 0; transform: translate(-50%, -50%) scale(0.5); box-shadow:0 0 2px 8px rgba(0,0,0,0.1)}
.history-list {margin-left: calc(40% + 50px); padding-left: 40px; list-style: none; min-height:150px;}
.history-item {position: relative; margin-bottom: 20px; display: flex; align-items: baseline; opacity: 0; transform: translateY(30px);}
.history-month {font-weight: 800; color: #0099ff; margin-right: 10px; flex-shrink: 0; width: 50px; text-align: right;}
.history-item p {color: #555; line-height: 1.6;}

.partner-content {padding: 60px 0; margin: 0 auto;}
.partner-grid {display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-bottom: 60px; max-width: 1400px; margin-left: auto; margin-right: auto;}
.partner-item {min-height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 8px 0;}
.partner-logo-container {display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; background: #fff; border: 1px solid #e0e0e0; border-radius: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.05); padding: 20px; margin: 0; width: 100%; height:160px; border-radius: 20px;}
.partner-logo {max-width: calc(100% - 40px); max-height: calc(100% - 40px); object-fit: contain; margin-bottom: 8px; width: 100%; box-sizing: border-box; display: block;}
.partner-name {font-weight: 600; color: #333; margin-top: 10px; text-align: center;}
.partner-description {text-align: center; margin-top: 40px; margin-bottom: 120px; line-height: 2.1; letter-spacing: -0.01em; padding-bottom: 80px;}
.partner-description p {line-height: 1.2; color: #666; margin-bottom: 15px;}
.partner-description p:last-child {margin-bottom: 0;}

.partner-desc-line {opacity: 0; transform: translateX(50px); animation: slideInFromRightPartner 0.8s ease-out forwards;}
.partner-desc-line:nth-child(1) {animation-delay: 0.2s;}
.partner-desc-line:nth-child(2) {animation-delay: 0.4s;}
.partner-desc-line:nth-child(3) {animation-delay: 0.6s;}
@keyframes slideInFromRightPartner {0% {opacity: 0; transform: translateX(50px);}
100% {opacity: 1; transform: translateX(0);}
}

.partner-desc-blue {color: #007bff; font-weight: 700; text-shadow: 0 0 1px rgba(0, 123, 255, 0.1);}

.sub-hero-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: brightness(0.6); display: block !important; background-color: #000; min-height: 100vh; opacity: 1 !important; visibility: visible !important; margin: 0; padding: 0;}

.scroll-down {position: absolute; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; flex-direction: column; align-items: center; pointer-events: auto; user-select: none;}
.scroll-down-top {top: 100px;}
.scroll-down-bottom {bottom: 120px; animation: fadeInUp 1.2s 0.5s both; cursor: pointer;}
.scroll-down-inner {display: flex; flex-direction: column; align-items: center; gap: 8px;}
.scroll-down-text {color: #fff; font-weight: 600; letter-spacing: 0.08em; margin-bottom: 4px; text-shadow: 0 2px 8px rgba(0,0,0,0.25);}
.scroll-down-mouse svg {display: block; margin: 0 auto; width: 24px; height: 36px;}
@keyframes fadeInUp {0% {opacity: 0; transform: translate(-50%, 30px);}
100% {opacity: 1; transform: translate(-50%, 0);}
}

.top-btn {position: fixed; right: 36px; bottom: 36px; width: 56px; height: 56px; background: #ff3300; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; border: none; z-index: 1200; cursor: pointer; transition: background 0.2s, transform 0.2s; padding: 0;}
.top-btn img {width: 18px; filter: brightness(0) invert(1);}
.top-btn:hover {background: #ff3300; transform: translateY(-4px) scale(1.08);}
.mlops-section,.tech-section,.performance-section,.partner-section,.contact-section {padding-top: 0 !important;}

.sub-menu-inner[data-menu="dx"] {display: flex; gap: 0;}
.dx-col, .xr-col {flex: none; width: 100%; min-width: 0;}
.dx-col ul.nav-sub-list,.xr-col ul.nav-sub-list {display: block; flex-direction: column; margin-top: 10px;}
.dx-col ul.nav-sub-list li,.xr-col ul.nav-sub-list li {display: block; line-height: 1.5rem;}
.dx-category-title {font-weight: 900; margin-bottom: 8px; color: #333;}
.dx-flex-row {display: flex; align-items: flex-start;}
.dx-info-col {display: flex; flex-direction: column; align-items: flex-start; min-width: 220px; margin-right: 40px;}
.dx-col, .xr-col {flex: none; width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;}
.dx-col ul.nav-sub-list,.xr-col ul.nav-sub-list {display: block; flex-direction: column;}
.dx-col ul.nav-sub-list li,.xr-col ul.nav-sub-list li {display: block; width: 100%;}

.full-menu-overlay {display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100vw; height: 100vh; background: #fff; overflow-y: auto; transition: opacity 0.3s;}
.full-menu-overlay.active {display: block;}
.menu-close {position: absolute; top: 40px; right: 60px; background: none; border: none; cursor: pointer; z-index: 10001; color: #222;}
.full-menu-content {display: flex; flex-direction: row; align-items: stretch ; width: 100vw; min-height: 100vh; background: #fff; overflow-y: auto; padding: 0;}
.full-menu-left {flex: 0 0 380px; max-width: 380px; min-width: 100px; background: #fff; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 40px 30px 30px 30px; border-right: 1px solid #ddd; min-height: 100vh; box-sizing: border-box;}
.full-menu-logo {width: 160px; margin-bottom: 60px;}
.full-menu-slogan-main {font-weight: 800; color: #222; margin-bottom: 24px; line-height: 1.1; letter-spacing: -0.02em; font-family: 'SUIT', 'Oxanium', sans-serif;}
.full-menu-slogan-sub {color: #444; font-weight: 400; margin-bottom: 48px; line-height: 1.6;}
.full-menu-inquire-btn {display: inline-flex; align-items: center; background: #122245; color: #fff; font-weight: 700; border-radius: 24px; padding: 14px 36px; text-decoration: none; letter-spacing: 0.05em; margin-top: 20px; transition: background 0.2s; border: none; outline: none;}
.full-menu-inquire-btn:hover {background: #0c407c;}
.full-menu-right {flex: 1 1 0; min-width: 0; background: #f9f9f9; padding: 80px 60px 60px 60px; overflow-y: auto; height: 100vh; box-sizing: border-box; display: block !important;}
.full-menu-section {margin-bottom: 12px;}
.full-menu-title {font-weight: 900; margin-bottom: 10px; color: #222;}
.full-menu-links {display: flex; flex-wrap: wrap; gap: 18px; font-weight: 500; color: #444;}
.full-menu-links a {color: #444; text-decoration: none; transition: color 0.2s; position: relative; padding-right: 8px;}
.full-menu-links a:hover {color: #0c407c;}
.menu-icon-btn {background: transparent; border: none; border-radius: 4px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; margin-left: 10px; transition: background 0.2s;}
.menu-icon-btn:hover {background: transparent;}
.menu-icon-img {width: 24px; height: 24px; display: block;}

.menu-icon,.menu,.menu-icon-img {display: block !important; visibility: visible !important; opacity: 1 !important; /* filter:invert(1); */}

.nav-menu-icon {display: flex !important; align-items: center; margin-left: 10px; cursor: pointer;}
.nav-menu-icon:hover {color: inherit;}
.nav-menu-icon img {filter: invert(1);}
.full-menu-tree {max-width: 700px; margin: 0 auto;}
.full-menu-tree li {margin-bottom: 8px;}
.full-menu-tree b {font-weight: 700; color: #222; display: block; margin-bottom: 6px;}
.full-menu-tree b:first-child {margin-top: 0;}
.full-menu-tree ul {list-style: none; padding: 0; margin: 0;}
.full-menu-tree ul li {margin-bottom: 4px;}
.full-menu-tree ul ul {margin-left: 20px;}
.full-menu-tree ul ul b {color: #444; margin-bottom: 4px;}
.full-menu-tree a {color: #666; text-decoration: none;}
.full-menu-tree a:hover {color: #0c407c;}

.menu-block {margin-bottom: 50px;}
.menu-title {font-weight: 900; color: #0c407c; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid #ccc;}
.menu-items {display: flex; flex-wrap: wrap; gap: 12px 20px;}
.menu-items span {color: #555; font-weight: 500; cursor: pointer; transition: color 0.2s; position: relative;}
.menu-items span:hover {color: #0c407c;}
.menu-items span::after {content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background-color: #0c407c; transition: width 0.2s;}
.menu-items span:hover::after {width: 100%;}
.menu-row {display: flex; gap: 40px;}
.menu-subblock {flex: 1;}
.menu-subtitle {font-weight: 600; color: #0c407c; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid #e0e0e0;}

.overview-content {max-width: 1400px; margin: 0 auto;}
.overview-content-header {text-align: center; margin-bottom: 60px;}
.overview-content-title {font-weight: 700; color: #222; margin-bottom: 10px; line-height: 1.2;}
.overview-content-subtitle {color: #999; font-weight: 500; letter-spacing: 0.1em;}
.overview-content-block-centered {text-align: center;}
.width-middle {max-width: 1400px; margin: 0 auto;}

.mission-vision-slogan-area {text-align: center; padding: 20px 0;}
.mv-slogan-main {margin-bottom: 30px; font-size:2rem;}
.mv-slogan-desc {color: #666; line-height: 1.4;}
.mv-slogan-dx {color: #2566D6; font-weight: 700;}
.mv-slogan-ax {color: #23B2A6; font-weight: 700;}
.mv-slogan-and {color: #666; font-weight: 400;}
.mv-slogan-kor {color: #333; font-weight: 500;}
.mv-slogan-mainblue {color: #0c407c; font-weight: 700;}

.mission-slogan {margin-bottom: 100px;}
.divide-sub-section {font-size:1.2rem; line-height: 1.5; font-weight: 700; margin:200px 0 40px 0; text-align: center;}
.divide-sub-section::before {content: ""; display: inline-block; margin-right: 10px; vertical-align: middle;}
.divide-sub-section:first-child {margin-top:0;}
.slogan-separator {color: #ddd; margin: 0 10px;}
.mission-slogan-grp {display: flex; justify-content: center;}
.mission-slogan-cards {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1400px; width: 100%;}
.common-card {background: #fff; border-radius: 0; border: 1px solid #ddd; padding: 30px 20px; text-align: center; transition: all 0.3s ease; position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); border-radius: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); font-size:1.0rem;}
.common-card.animate {opacity: 1; transform: translateY(0);}
.common-card:hover {transform: translateY(-10px); box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.common-card-title {font-weight: 700; color: #222; margin-bottom: 20px;}
.common-card-icon {width: 100px; height: 100px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; background: #f5f5f5; border-radius: 50%; border: 1px solid #eee;}
.common-card-icon img {width: 60px; height: 60px;}
.common-card-badge {display: inline-block; background: #0c407c; color: #fff; padding: 6px 40px; border-radius: 100px; font-weight: 600; margin-bottom: 15px;}
.common-card-desc {color: #666; line-height: 1.6;}
.common-card-check {color: #0c407c; font-weight: 600; margin-bottom: 8px;}
.card-trans {background: rgba(255, 255, 255, 0.2) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); flex: 0 0 calc(33.333% - 20px); max-width: 400px;}
.card-trans .common-card-title,.card-trans .common-card-desc,.card-trans .common-card-check {color: #fff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); font-size:1.0rem;}
.card-trans .common-card-badge {background: #4A90E2 !important; color: #fff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);}
.card-trans .common-card-icon img {filter: none !important;}

.vision-section {text-align: center; padding: 60px 0;}
.vision-mission-title {font-weight: 700; color: #222; margin-bottom: 40px;}
.vision-main {font-weight: 700; line-height: 1.3; margin-bottom: 30px; color: #222;}
.vision-ani {opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; display: inline-block;}
.vision-ani.show {opacity: 1; transform: translateY(0);}
.vision-strong {color: #0c407c; font-weight: 800;}
.vision-gray-thin {color: #666; font-weight: 400;}
.vision-desc {color: #666; line-height: 1.6; margin-bottom: 50px; max-width: 800px; margin-left: auto; margin-right: auto;}
.vision-list-row {display: block; margin-bottom: 50px; width: 100%; max-width: 100%; margin-left: 0; margin-right: 0;}
.vision-list-card {background: #fff; padding: 30px 25px; border-radius: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); text-align: center; line-height: 1.6;}
.vision-list-card strong {color: #0c407c; display: block; margin-bottom: 10px;}
.vision-bottom-desc {color: #666; line-height: 1.6; margin-bottom: 40px; max-width: 800px; margin-left: auto; margin-right: auto;}
.vision-desc-divider {width: 100px; height: 2px; background: #0c407c; margin: 0 auto 50px;}

.vision-diagram-grp {margin-bottom: 50px;}
.vision-diagram {position: relative; max-width: 840px; margin: 0 auto;}
.vision-diagram svg {width: 100%; height: auto;}
.vision-diagram-icon {position: absolute; width: 120px; height: 120px; top: 70%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; filter: brightness(0) invert(1);}
.vision-diagram-desc {font-weight: 700; color: #222; line-height: 1.3; margin-bottom: 30px;}
.vision-img {display: block; margin-bottom: 50px; width: 100%; max-width: 100%; background-image: url('../image/bg-mission.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; min-height: 400px; position: relative;}
.vision-img::before {content: none;}
.vision-cards-container {width: 100%; max-width: 100%; margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; padding: 100px 20px; background: transparent; position: relative; z-index: 2; min-height: 400px; box-sizing: border-box;}
.vision-diagram-icon.dx {left: 240px; transform: translate(-50%, -150%);}
.vision-diagram-icon.ax {left: 600px; transform: translate(-50%, -150%);}
.vision-diagram-label {position: absolute; top: calc(50% + 60px); transform: translateX(-50%); font-size:1.5rem; font-weight: 700; color: #fff; text-align: center;}
.vision-diagram-label.dx {left: 240px;}
.vision-diagram-label.ax {left: 600px;}
.vision-diagram-desc-row {display: flex; font-size:1.5rem; justify-content: space-between; max-width: 580px; margin: 20px auto 0; text-align: center;}
.vision-diagram-desc.dx {color: #2566D6;}
.vision-diagram-desc.ax {color: #23B2A6;}

.vision-benefit-row {display: flex; justify-content: space-between; gap: 20px; width: 100%; margin: 0 auto;}
.vision-benefit-card {background: #0c407c !important; color: #fff !important; padding: 25px 20px; border-radius: 0; text-align: center; border: 1px solid #0c407c !important; flex: 1;}
.benefit-title {line-height: 1.5;}
 

.business-detail-row-wrap {width: 100%; max-width: 1400px; margin: 0 auto 80px auto; padding: 0 20px;}
@keyframes slideInFromRight {0% {transform: translateX(100px); opacity: 0;}
100% {transform: translateX(0); opacity: 1;}
}
.business-slogan {text-align: center; margin: 60px 0 40px 0; color: #222; font-weight: 700; line-height: 1.2; opacity: 0; transform: translateX(100px); animation: slideInFromRight 1.2s ease-out forwards;}
.business-slogan-part {display: block; margin-bottom: 4px; opacity: 0; transform: translateX(100px); animation: slideInFromRight 0.8s ease-out forwards;}
.business-slogan-part:nth-child(1) {animation-delay: 0.2s;}
.business-slogan-part:nth-child(2) {animation-delay: 0.4s;}
.business-slogan-part:nth-child(3) {animation-delay: 0.6s;}
.highlight-blue {color: #0c407c;}
.business-detail-row {display: flex; flex-direction: column; gap: 40px; margin-bottom: 80px; align-items: center;}
.business-detail-col {width: 100%; max-width: 1440px; background: #fff; border:solid 1px #0056b3; padding: 50px; margin-bottom: 40px; position: relative; border-radius: 50px; }
.business-title {font-weight: 800; margin-bottom: 18px; color: #0c407c; letter-spacing: -0.01em;}
.business-title.dx {color: #2566D6;}
.business-title.ax {color: #23B2A6;}
.business-detail-title {font-weight: 700; color: #222; margin-bottom: 18px;}
.business-detail-title.sub {color: #0c407c; margin-top: 30px; margin-bottom: 12px;}
.business-detail-list {list-style: disc inside; margin-bottom: 24px; padding-left: 18px; color: #555; line-height: 1.7;}
.business-detail-icons {display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; align-items: center; line-height: 1.4;}
.business-detail-icons span {display: flex; align-items: center; justify-content: center; gap: 8px; border:solid 1px #ddd; padding: 8px 12px; background: #f4f4f4; border-radius: 20px; line-height: 1.2; margin-bottom: 8px;}
.business-detail-icons img {width: 24px; height: 24px; object-fit: contain;}
.business-projects {display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; width: 100%; align-items: stretch;}
.business-project {border-radius: 20px; border:solid 1px #ddd; background: #f8f9fa; padding: 20px 24px; color: #0c407c; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-bottom: 12px; flex: 1; min-width: calc(33.333% - 14px); line-height: 1.4;}
.business-center-circle {display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, #2566D6 0%, #23B2A6 100%); border-radius: 50%; width: 180px; height: 180px; margin: 20px auto; box-shadow: 0 2px 8px rgba(0,0,0,0.05); color: #fff; position: absolute; top: -150px; left:50%; transform: translateX(-50%); z-index: 5;}
.project-tag {display: inline-flex; align-items: center; gap: 6px; background: #2566D6; border-radius: 50px; padding: 8px 16px; color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-bottom: 12px; line-height: 1.4;}
.business-project .project-title {color:#222; font-weight: 800; margin-bottom: 8px; line-height: 1.3;}
.business-project .project-desc {color: #666; margin: 8px 0 12px 0; line-height: 1.5;}
.project-tag img {width:18px; height: 18px; object-fit: contain; filter: invert(1);}
.business-center-icon {width: 60px; height: 60px; margin-bottom: 16px;}
.business-center-icon img {width: 100%; height: 100%; object-fit: contain; filter: invert(1);}
.business-center-title {font-weight: 700; text-align: center; line-height: 1.4;}

.ip-problem-centered-container {max-width: 1400px; padding: 40px 0px; text-align: center;}
.problem-infographic-title {width: 100%; max-width: 1400px; margin: 0 auto 80px auto; padding: 0 20px; font-weight: 700; color: #222; line-height: 1.2; opacity: 0; text-align: center; transform: translateX(100px); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.problem-infographic-title.animate {opacity: 1; transform: translateX(0);}
.problem-infographic-title-blue {color: #2566D6; font-weight: 800;}
.problem-infographic-title2 {
  width: 100%; 
  max-width: 1400px; 
  margin: 0 auto 80px auto; 
  padding: 0 20px; 
  font-weight: 700; 
  color: #222; 
  line-height: 1.2; 
  opacity: 0; 
  transform: translateX(100px); 
  text-align: center; 
  transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}

.problem-infographic-title2.animate {
  opacity: 1; 
  transform: translateX(0);
}

.problem-infographic-title2-blue {
  color: #2566D6; 
  font-weight: 800;
}
@keyframes slideInFromRight {from {opacity: 0; transform: translateX(100px);}
to {opacity: 1; transform: translateX(0);}
}
.slogan-part.slogan-1 {opacity: 0; transform: translateX(100px); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-delay: 0.2s;}
.slogan-part.slogan-2 {opacity: 0; transform: translateX(100px); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-delay: 0.4s;}
.slogan-part.slogan-3 {opacity: 0; transform: translateX(100px); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-delay: 0.6s;}
.slogan-part.animate {opacity: 1; transform: translateX(0);}
.slogan-part2 .slogan-1 {opacity: 1; transform: translateX(100px); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-delay: 0.2s;}
.slogan-part2 .slogan-2 {opacity: 0; transform: translateX(100px); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-delay: 0.4s;}
.slogan-part2 .slogan-3 {opacity: 0; transform: translateX(100px); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-delay: 0.6s;}
.slogan-part2 .animate {opacity: 1; transform: translateX(0);}
.problem-infographic-section {margin-bottom: 40px;}
.problem-infographic-container {display: flex; flex-direction: column; gap: 30px; max-width: 1400px; margin: 0 auto;}
.problem-infographic-box {width: 100%; background: #fff; border: 1px solid #ddd; border-radius: 0; padding: 32px 24px; margin-bottom: 0; border-radius: 20px; text-align: center;}
.problem-infographic-box-title {font-size:3rem; font-weight: 700; color: #0c407c; margin-bottom: 20px; line-height: 1.3;}
.problem-infographic-grid {display: flex; flex-direction: column; gap: 12px;}
.problem-infographic-item {background: #f8f9fa; border: 1px solid #ddd; border-radius: 0; padding: 16px 20px; margin-bottom: 12px; display: flex; align-items: center; gap: 16px; border-radius: 10px;}
.problem-infographic-label {color: #333; flex: 1; min-width: 0; text-align: left;}
.problem-infographic-arrow-img {width: 20px; height: 20px; flex-shrink: 0;}
.problem-infographic-desc {color: #666; flex: 1; min-width: 0; text-align: right;}
.problem-infographic-source {color: #aaa; margin-top: 8px;}
.problem-infographic-percent {font-size:4rem; font-weight: 800; color: #23B2A6; margin-bottom: 16px; line-height: 1.2;}
.problem-infographic-percent-desc {color: #666; margin-bottom: 16px; line-height: 1.5;}
.problem-infographic-quote {font-size:1rem;color: #0c407c; margin-bottom: 16px; line-height: 1.6;}
.problem-solution-section {margin: 60px 0;}
.problem-solution-container {display: flex; flex-direction: column; gap: 40px; max-width: 1400px; margin: 0 auto;}
.problem-solution-content {width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 30px;}
.problem-solution-box {width: 100%; max-width: 1400px; border: 1px solid #ddd; padding: 30px; border-radius: 0; background: #fff; border-radius: 20px;}
.problem-solution-section-title {font-weight: 700; color: #222; margin-bottom: 26px;}
.problem-solution-desc {color: #555; margin-bottom: 18px; line-height: 1.7;}
.problem-solution-keypoint-list {list-style: disc inside; color: #0c407c; margin-bottom: 18px; padding-left: 18px;}
.problem-solutiogn-keypoint-grid {display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; margin-bottom: 18px;}
.problem-solution-keypoint-item {color: #0c407c; padding: 15px; border: 1px solid #ddd; border-radius: 0; background: #fff; text-align: left; font-weight: 500; padding-left: 100px; border-radius: 10px; background: #f8f9fa;}
.keypoint-num {display: inline-block; background: #2566D6; color: #fff; border-radius: 50%; width: 24px; height: 24px; text-align: center; line-height: 24px; font-weight: 700; margin-right: 8px;}
.problem-solution-process {margin: 15px 0 40px 0;}
.problem-solution-process-steps {display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; align-items: center;}
.process-step-box {border: 1px solid #ddd; border-radius: 0; padding: 20px; text-align: center; background: #fff; min-width: 200px; display: flex; flex-direction: column; align-items: center; gap: 12px; border-radius: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.process-step-icon-circle {width: 60px; height: 60px; border-radius: 50%; background: #f5f5f5; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;}
.process-step-icon-circle img {width: 30px; height: 30px; object-fit: contain;}
.process-step-title {font-weight: 600; color: #0c407c; margin-bottom: 4px;}
.process-step-desc {color: #666; line-height: 1.4;}
.problem-solution-table-container {width: 100%; margin: 20px 0;}
.problem-solution-table {width: 100%; border-collapse: collapse; margin-top: 0; background: #fff; overflow: hidden;}
.problem-solution-table th, .problem-solution-table td {border: 1px solid #ddd; padding: 10px 14px; text-align: center;}
.problem-solution-table th {background: #0c407c; color: #fff; font-weight: 600;}
.arrow-circle {position: absolute; top: 50%; left: 100%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: #f5f5f5; display: flex; align-items: center; justify-content: center; z-index: 1;}
.arrow-circle img {width: 20px; height: 20px; object-fit: contain;}
.table-td-flex {display: flex; align-items: center; gap: 20px; text-align: left;}
.table-td-icon-box {width: 50px; height: 50px; background: #f5f5f5; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: 60px;}
.table-td-icon {width: 24px; height: 24px; object-fit: contain;}
.table-td-texts {flex: 1;}
.table-td-title {font-weight: 600; color: #0c407c; margin-bottom: 4px;}
.table-td-desc {color: #666; line-height: 1.4;}
.problem-solution-summary {margin: 20px 0 0 0; display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; width: 100%;}
.problem-solution-summary-box {background: #2566D6; border-radius: 0; padding: 16px 22px; color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-bottom: 8px; width: calc(100% / 3 - 12px); text-align: center; border-radius: 50px;}
.problem-solution-summary-num {display: inline-block; background: #fff; color: #222; border-radius: 50%; width: 28px; height: 28px; text-align: center; line-height: 28px; font-weight: 700; margin-right: 8px;}

.ip-patent-promo-section {background: #fff; border: 1px solid #ddd; border-radius: 20px; padding: 100px 0 100px 0; text-align: center; margin-bottom: 40px;}
.ip-patent-promo-title {font-size:2rem; font-weight: 700; color: #0c407c; margin-bottom: 18px; display: inline-block; padding: 20px; line-height: 1.2;}
.ip-patent-animate {animation: fadeInUp 1s;}
.ip-patent-promo-blue {color: #2566D6; font-weight: 800;}
.ip-patent-cert-row {display: flex; gap: 50px; justify-content: center; margin-bottom: 30px; flex-wrap: wrap;}
.ip-patent-cert-img {width: 200px; height: auto; object-fit: contain; border-radius: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border: 1px solid #ddd; padding: 20px; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.ip-patent-field-row {display: flex; gap: 10px; justify-content: center; margin-bottom: 30px; flex-wrap: wrap;}
.ip-patent-field-card {padding: 24px 18px; text-align: center;}
.ip-patent-field-num {line-height: 1.2; font-size:3rem; font-weight: 800; color: #2566D6; margin-bottom: 30px;}
.ip-patent-field-num::after {content: "건"; color: #000;}
.ip-patent-field-title {color: #0c407c; font-weight: 600;}
.ip-patent-table-section {margin: 0 0 40px 0; padding: 0; background: #fff; border-radius: 0;}
.ip-patent-list-table-wrap {width: 100%; overflow-x: auto; margin: 30px 0;}
.ip-patent-list-table {width: 100%; border-collapse: collapse; background: #fff; border-radius: 0; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.ip-patent-list-table th, .ip-patent-list-table td {border: 1px solid #eee; padding: 10px 14px; text-align: center; font-size:0.9rem;}
.ip-patent-list-table td:first-child {text-align: left;}
.ip-patent-list-table th {background: #0c407c; color: #fff; font-weight: 600;}
.full-width {width: 100%;}
.first-divide {margin-top: 0 !important;}

.client-grid {display: grid; grid-template-columns: repeat(6, 1fr); gap: 32px 24px; margin: 32px 0;}
.client-item {display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 12px 0; min-height: 120px;}
.client-logo {max-width: 120px; max-height: 60px; object-fit: contain; margin-bottom: 8px; width: 100%; box-sizing: border-box; border: 1px solid #e0e0e0; border-radius: 12px; background: #fff; padding: 12px 8px; display: block;}

.client-name {font-weight: 500; color: #222; text-align: center; word-break: keep-all; margin-top: 10px;}
.client-section {margin: 56px 0 56px 0;}
.client-section:not(:last-child) {margin-bottom: 80px;}
.client-category-title {font-weight: 700; margin-bottom: 16px; margin-top: 0; letter-spacing: -0.01em; color: #0c407c;}
.partner-stats-summary {margin: 48px 0 32px 0;}
.partner-stats-title {font-weight: 700; color: #2c3e50; text-align: center; margin-bottom: 32px; letter-spacing: -0.01em;}
.partner-stats-grid {width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 32px; gap:30px;}
.partner-stats-item {background: #f8f9fa; border: 1px solid #b5d3f1; border-radius: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); padding: 32px 28px 24px 28px; min-width: 260px; max-width: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size:1.5rem; transition: none; line-height: 1.2; font-weight: 700; opacity: 0; transform: rotateY(180deg); animation: rotateInPartnerStats 1.2s ease-out forwards; background-color: #fff;}
.partner-stats-item:nth-child(1) {animation-delay: 0.2s;}
.partner-stats-item:nth-child(2) {animation-delay: 0.4s;}
.partner-stats-item:nth-child(3) {animation-delay: 0.6s;}
.partner-stats-item:nth-child(4) {animation-delay: 0.8s;}
.partner-stats-item:nth-child(5) {animation-delay: 1.0s;}
@keyframes rotateInPartnerStats {0% {opacity: 0; transform: rotateY(180deg);}
100% {opacity: 1; transform: rotateY(0deg);}
}
.partner-stats-item:hover {box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.partner-stats-value {font-weight: 800; color: #111; margin-bottom: 8px; letter-spacing: -0.01em;}
.partner-stats-item:first-child {border:solid 5px #1e4476; background: #f0f8ff; border-radius: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.partner-stats-item:first-child .partner-stats-value {color: #1e4476; font-weight: 900;}
.partner-stats-desc {font-size:1rem; font-weight: 400; margin-top: 2px;}
.partner-stats-blue {color: #1e4476; font-weight: 700;}

.grid-container {display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 30px; max-width: 1400px; width: 100%; margin: 0 auto; padding: 40px 20px; position: relative;}
.center-circle {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 220px; height: 220px; background: white; border: 1px solid #0c407c; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); z-index: 10;}
.center-circle-title {font-weight: 900; color: #0c407c; margin-bottom: 30px;}
.center-circle-subtitle {font-weight: 800; color: #0c407c; margin-bottom: 3px;}
.center-circle-desc {font-weight: 800; color: #0c407c;}
.data-category-grid {background: #ffffff; border: 1px solid #e9ecef; padding: 30px; min-height: 250px; border-radius: 0px;}
.category-title {font-weight: 700; color: white; background: #0c407c; margin-bottom: 20px; text-align: center; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 0px;}
.bottom-title-box {display: flex; flex-direction: column; justify-content: space-between; padding-top:50px;}
.bottom-title-box .category-title {margin-bottom: 0; margin-top: 0;}
.bottom-title-box .category-items {flex-grow: 1; margin-bottom: 15px;}
.category-item-box {display: inline-flex; align-items: center; background: #f8f9fa; border: 1px solid #ccc; padding: 10px 26px; font-weight: 800; color: #495057; min-width:calc(100%/2 - 10px); max-height: 50px; border-radius: 0px;}
.category-item-box::before {content: ""; color: #0c407c; margin-right: 8px; font-weight: bold;}

.manual-icon::before {content: ""; background-image: url('../image/icon_menual.svg'); background-size: 24px 24px; background-repeat: no-repeat; width: 30px; height: 24px; margin-right: 8px;}
.doc-icon::before {content: ""; background-image: url('../image/icon_doc.svg'); background-size: 24px 24px; background-repeat: no-repeat; width: 30px; height: 24px; margin-right: 8px;}
.chat-icon::before {content: ""; background-image: url('../image/icon_chat.svg'); background-size: 24px 24px; background-repeat: no-repeat; width: 30px; height: 24px; margin-right: 8px;}
.sns-icon::before {content: ""; background-image: url('../image/icon_sns.svg'); background-size: 24px 24px; background-repeat: no-repeat; width: 30px; height: 24px; margin-right: 8px;}

.image-icon::before {content: ""; background-image: url('../image/icon_2d.svg'); background-size: 24px 24px; background-repeat: no-repeat; width: 30px; height: 24px; margin-right: 8px;}
.film-icon::before {content: ""; background-image: url('../image/icon_mov.svg'); background-size: 24px 24px; background-repeat: no-repeat; width: 30px; height: 24px; margin-right: 8px;}
.analytics-icon::before {content: ""; background-image: url('../image/icon_analyze_multi.svg'); background-size: 24px 24px; background-repeat: no-repeat; width: 30px; height: 24px; margin-right: 8px;}
.chart-icon::before {content: ""; background-image: url('../image/icon_xray-ct.svg'); background-size: 24px 24px; background-repeat: no-repeat; width: 30px; height: 24px; margin-right: 8px;}

.iot-icon::before {content: ""; background-image: url('../image/icon_iot.svg'); background-size: 24px 24px; background-repeat: no-repeat; width: 30px; height: 24px; margin-right: 8px;}
.data-icon::before {content: ""; background-image: url('../image/icon_process.svg'); background-size: 24px 24px; background-repeat: no-repeat; width: 30px; height: 24px; margin-right: 8px;}
.graph-icon::before {content: ""; background-image: url('../image/icon_log.svg'); background-size: 24px 24px; background-repeat: no-repeat; width: 30px; height: 24px; margin-right: 8px;}
.bolt-icon::before {content: ""; background-image: url('../image/icon_bolt.svg'); background-size: 24px 24px; background-repeat: no-repeat; width: 30px; height: 24px; margin-right: 8px;}

.head-icon::before {content: ""; background-image: url('../image/icon_human.svg'); background-size: 24px 24px; background-repeat: no-repeat; width: 30px; height: 24px; margin-right: 8px;}
.factory-icon::before {content: ""; background-image: url('../image/icon_sound-s.svg'); background-size: 24px 24px; background-repeat: no-repeat; width: 30px; height: 24px; margin-right: 8px;}
.sync-icon::before {content: ""; background-image: url('../image/icon_finesound.svg'); background-size: 24px 24px; background-repeat: no-repeat; width: 30px; height: 24px; margin-right: 8px;}
.time-icon::before {content: ""; background-image: url('../image/iconi_nature.svg'); background-size: 24px 24px; background-repeat: no-repeat; width: 30px; height: 24px; margin-right: 8px;}
.category-items {display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between;}

.platform-concept-area {text-align: center; font-size:2rem;}
.concept-quote {font-weight: 700; line-height: 1.6; color: #444; margin-bottom: 30px;}
.concept-quote-blue {color: #4A90E2;}
.concept-quote-black {color: #222;}
.concept-highlight {color: #4A90E2; font-weight: 600;}
.concept-process {color: #0c407c; font-weight: 700;}
.concept-sub {color: #666; font-weight: 400;}
.concept-result {color: #e74c3c; font-weight: 600;}
.a2flex-platform-center {display: flex; justify-content: center; align-items: center; margin-bottom: 40px;}
.platform-center-circle {width: 250px; height: 250px; background: white; border: 4px solid #0c407c; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.platform-center-title {font-weight: 700; color: #0c407c; margin-bottom: 8px;}
.platform-center-subtitle {font-weight: 500; color: #0c407c; margin-bottom: 4px;}
.platform-center-desc {font-weight: 400; color: #0c407c;}

.a3-strategy-container {margin: 50px 0;}
.a3-strategy-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; width: 100%; max-width: 1400px; margin: 0 auto;}
.a3-strategy-item {display: flex; flex-direction: column; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.a3-strategy-item:nth-child(1) .a3-strategy-card {background-image: url('../image/3a_sol_1.jpg');}
.a3-strategy-item:nth-child(2) .a3-strategy-card {background-image: url('../image/3a_sol_2.jpg');}
.a3-strategy-item:nth-child(3) .a3-strategy-card {background-image: url('../image/3a_sol_3.jpg');}
.a3-strategy-card {background: white; border: none; padding: 0; text-align: center; transition: all 0.2s ease; position: relative; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; height: 300px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 0;}
.a3-strategy-header {padding: 20px 30px; background: #003366; color: white; display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 0; border-radius: 0; font-weight: 700;}
.a3-strategy-footer {padding: 25px 30px; background: white; border-radius: 0; border: 0px solid #e5e5e5;}
.a3-strategy-number {font-weight: 700; color: white; margin-bottom: 0; line-height: 1; font-family: 'Oxanium', sans-serif;}
.a3-strategy-title {font-weight: 600; margin-bottom: 0; color: white;}
.a3-strategy-subtitle {font-weight: 800; color: #333; margin-bottom: 10px; line-height: 1.4;}
.a3-strategy-content {text-align: left;}
.a3-strategy-content ul {list-style: none; padding: 0; margin: 0;}
.a3-strategy-content li {color: #666; line-height: 1.6; margin-bottom: 5px; position: relative; padding-left: 25px;}
.a3-strategy-content li:before {content: ""; color: #0c407c; font-weight: bold; position: absolute; left: 0; top: -5px;}
.a3-strategy-content li:last-child {margin-bottom: 0;}

.ai-service-container {margin: 0px 0; padding: 0 20px;}
.ai-service-title {text-align: center; margin-bottom: 60px;}
.ai-service-main-title {font-weight: 700; color: #1a365d; margin-bottom: 20px; font-family: 'SUIT', sans-serif;}
.ai-service-sub-title {color: #666; line-height: 1.6; max-width: 800px; margin: 0 auto;}
.ai-process-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; width: 100%; max-width: 1400px; margin: 0 auto;}
.ai-process-item {display: flex; flex-direction: column; background: #2c5282; border-radius: 0; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.ai-process-item:nth-child(1) .ai-process-card {background-image: url('../image/img_ai_125.png');}
.ai-process-item:nth-child(2) .ai-process-card {background-image: url('../image/img_ai_130.png');}
.ai-process-item:nth-child(3) .ai-process-card {background-image: url('../image/img_ai_102.png');}
.ai-process-item:nth-child(4) .ai-process-card {background-image: url('../image/img_ai_103.png');}
.ai-process-header {padding: 25px 30px; background: #2c5282; color: white; display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 0; border-radius: 0; font-weight: 600; font-family: 'SUIT', sans-serif;}
.ai-process-card {background: white; border: none; padding: 0; text-align: center; transition: all 0.3s ease; position: relative; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; height: 280px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 0;}
.ai-process-footer {padding: 30px 25px; background: white; border-radius: 0; border: 1px solid #e5e5e5; box-shadow: 0 2px 8px rgba(0,0,0,0.05); min-height: 180px;}
.ai-process-subtitle {font-weight: 600; color: #2c5282; margin-bottom: 20px; line-height: 1.4; font-family: 'SUIT', sans-serif;}
.ai-process-content ul {list-style: none; margin: 0; padding: 0;}
.ai-process-content p {color: #666; margin: 0; line-height: 1.6; font-family: 'SUIT', sans-serif;}
.ai-process-content li {color: #666; margin-bottom: 10px; padding-left: 15px; position: relative; line-height: 1.6; font-family: 'SUIT', sans-serif;}
.ai-process-content li:before {content: ""; color: #2c5282; position: absolute; left: 0; top: 0; font-weight: 700;}

.ai-solutions-container {margin: 100px 0; background: #f8f9fa; padding: 80px 20px;}
.ai-solutions-title {text-align: center; font-weight: 400; font-size:2rem;}
.ai-solutions-main-title {font-weight: 700; color: #1a365d; margin-bottom: 20px; font-family: 'SUIT', sans-serif;}
.ai-solutions-sub-title {color: #666; line-height: 1.6; max-width: 800px; margin: 0 auto;}
.ai-solutions-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; width: 100%; max-width: 1400px; margin: 0 auto;}
.ai-solution-item {display: flex; flex-direction: column; background: #1a365d; border-radius: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.ai-solution-item:nth-child(1) .ai-solution-card {background-image: url('../image/img_ai_100.png');}
.ai-solution-item:nth-child(2) .ai-solution-card {background-image: url('../image/img_ai_105.png');}
.ai-solution-item:nth-child(3) .ai-solution-card {background-image: url('../image/img_ai_111.png');}
.ai-solution-item:nth-child(4) .ai-solution-card {background-image: url('../image/img_ai_121.png');}
.ai-solution-header {padding: 25px 30px; background: #1a365d; color: white; display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 0; border-radius: 0; font-weight: 600; font-family: 'SUIT', sans-serif; text-align: center; line-height: 1.4; min-height: 80px;}
.ai-solution-card {background: white; border: none; padding: 0; text-align: center; position: relative; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; height: 280px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 0;}
.ai-solution-footer {padding: 30px 25px; background: white; border-radius: 0; border: 1px solid #e5e5e5; box-shadow: 0 2px 8px rgba(0,0,0,0.05); min-height: 200px;}
.ai-solution-subtitle {font-weight: 600; color: #1a365d; margin-bottom: 20px; line-height: 1.5; font-family: 'SUIT', sans-serif;}
.ai-solution-content ul {list-style: none; margin: 0; padding: 0;}
.ai-solution-content p {color: #666; margin: 0; line-height: 1.6; font-family: 'SUIT', sans-serif;}
.ai-solution-content li {color: #666; margin-bottom: 10px; padding-left: 15px; position: relative; line-height: 1.6; font-family: 'SUIT', sans-serif;}
.ai-solution-content li:before {content: ""; color: #1a365d; position: absolute; left: 0; top: 0; font-weight: 700;}
.ready-content {text-align: center; font-weight: 600; color: #333; padding: 200px 0; margin: 100px 0 200px 0; border: 1px solid #eee;}
.ai-section {padding:20px 0 30px 0;}
.section-header {text-align: center; margin-bottom: 20px;}
.ai-solutions-title {margin-bottom:50px;}
.ai-solutions-title {line-height: 1.2; font-weight: 400; color: #333;}
.ai-solutions-title strong,.ai-solutions-title .highlight {font-weight: 800; color: #0c407c;}
.ai-service-container {width: 100%; height: 100%; text-align: center; color: #333; line-height: 1.6;}
.ai-service-container span {font-weight: 600; color: #333; line-height: 1.6;}

.ai-service-grid {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem;}
.ai-service-box {border: 1px solid #ddd; border-radius: 8px; padding: 1.5rem; background-color: #fff; margin-bottom: 10px; display: block;}
.diver-line {width: 2px; height: 150px; background: linear-gradient(to top, #e0e0e0 0%, #e0e0e0 75%, #999 75%, #999 100%); margin: 20px auto;}
.ai-service-img-container {width: 100%; border: 1px solid #eee; border-radius: 20px; margin-top: 50px; margin-bottom: 50px; padding: 50px; text-align: center; background-color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.sm-title {font-weight: 800 !important; display: block; margin-bottom: 10px; background-color: #1a365d; padding: 5px 10px; border-radius: 5px; color: #fff !important; text-align: center;}

.svg-diagram-center {display: flex; justify-content: center; margin: 40px 0;}

.rounded-box {width: 100%;}

.radar-sensor-container {text-align: center;}
.radar-sensor-title {text-align: center; margin-bottom: 30px; font-weight: 400; line-height: 1.2;}
.radar-sensor-title strong {font-weight: 800; color: #0c407c;}
.ai-audio-caption-title {font-weight: 400; line-height: 1.2; margin-bottom: 30px;}
.ai-audio-caption-title strong {font-weight: 800; color: #0c407c;}
.ai-audio-caption-container {text-align: center;}
.ai-audio-caption-description {text-align: center;}
.radar-sensor-description {text-align: center;}
.radar-sensor-container img {max-width: 100%; height: auto; margin-top: 32px;}
.avn-phone-widget-images {display: flex; justify-content: center; align-items: flex-end; gap: 24px; margin-top: 18px;}
.avn-phone-widget-images img {max-width: 100px; height: auto; display: block;}

.avn-phone-widget-section {text-align: center;}
.avn-img {max-width: 400px; width: 100%; margin-bottom: 24px; display: block; margin-left: auto; margin-right: auto;}
.avn-widget-label {font-weight: bold; margin-bottom: 20px; display: block;}
.avn-desc {width: 100%; background-color: #fff; padding:50px; border-radius: 16px; border: 1px solid #ddd; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-bottom: 32px; text-align: left; margin-left: auto; margin-right: auto;}
.avn-phone-widget-section .avn-img:last-of-type {max-width: 60%; margin-bottom: 24px;}
.avn-desc:last-of-type {margin-bottom: 0;}
.avn-desc-list {margin: 10px 0; position: relative; line-height: 1.6; font-family: 'SUIT', sans-serif; background-color: #f0f8ff; padding: 20px; border-radius: 10px; border: 0px solid #ddd; box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
/* ===========================
   4. Section Title
=========================== */

.section-title {width:100%; font-weight: 400; font-size:2rem; margin-bottom: 8px; line-height: 1.2em; color: #222; font-family: 'Oxanium', sans-serif;}
.main-page-title {font-size:4.0rem; font-weight: 600;}
.main-visual-strong {color: #0c407c; font-family: 'Oxanium', 'SUIT', sans-serif; font-weight: 500 !important;}
.main-visual-paging {color: #ffffff; opacity: 0.7; margin-top: 20px; font-weight: 400; letter-spacing: 0.1em; text-align: left;}
.main-visual-head {font-weight: 300 !important;}
.headarea-hero-title {position: absolute; z-index: 2; line-height: 1.0; font-weight: 500; color: #fff; padding: 10px; top: 150px; font-family: 'Oxanium', sans-serif; top:200px; z-index:300; font-size:3.5rem;}
.headarea-hero-subtitle {position: absolute; z-index: 2; font-weight: 500; color: #fff; top: 280px; z-index:300; font-size:1.2rem;}
.business-title {font-weight: 800; margin-bottom: 18px; color: #0c407c; letter-spacing: -0.01em;}
.business-title.dx {color: #2566D6;}
.business-title.ax {color: #23B2A6;}
.problem-infographic-title {width: 100%; max-width: 1400px; margin: 0 auto 80px auto; padding: 0 20px; font-weight: 700; color: #222; line-height: 1.2; opacity: 0; text-align: center; transform: translateX(100px); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.problem-infographic-title.animate {opacity: 1; transform: translateX(0);}
.problem-infographic-title-blue {color: #2566D6; font-weight: 800;}
.problem-infographic-title2 {
  width: 100%; 
  max-width: 1400px; 
  margin: 0 auto 80px auto; 
  padding: 0 20px; 
  font-weight: 700; 
  color: #222; 
  line-height: 1.2; 
  opacity: 0; 
  transform: translateX(100px); 
  text-align: center; 
  transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}

.problem-infographic-title2.animate {
  opacity: 1; 
  transform: translateX(0);
}

.problem-infographic-title2-blue {
  color: #2566D6; 
  font-weight: 800;
}
.radar-sensor-title {text-align: center; margin-bottom: 30px; font-weight: 400; line-height: 1.2;}
.radar-sensor-title strong {font-weight: 800; color: #0c407c;}
.ai-audio-caption-title {font-weight: 400; line-height: 1.2; margin-bottom: 30px;}
.ai-audio-caption-title strong {font-weight: 800; color: #0c407c;}
.ai-solutions-title {text-align: center; margin-bottom:50px; line-height: 1.2; font-weight: 400; color: #333;}
.ai-solutions-title strong, .ai-solutions-title .highlight {font-weight: 800; color: #0c407c;}
.ai-service-title {text-align: center; margin-bottom: 60px;}
.ai-service-main-title {font-weight: 700; color: #1a365d; margin-bottom: 20px; font-family: 'SUIT', sans-serif;}
.ai-service-sub-title {color: #666; line-height: 1.6; max-width: 800px; margin: 0 auto;}
.ai-solutions-main-title {font-weight: 700; color: #1a365d; margin-bottom: 20px; font-family: 'SUIT', sans-serif;}
.ai-solutions-sub-title {color: #666; line-height: 1.6; max-width: 800px; margin: 0 auto;}
.partner-stats-title {font-weight: 700; color: #2c3e50; text-align: center; margin-bottom: 32px; letter-spacing: -0.01em;}
.client-category-title {font-weight: 700; margin-bottom: 16px; margin-top: 0; letter-spacing: -0.01em; color: #0c407c;}
.business-detail-title {font-weight: 700; color: #222; margin-bottom: 18px;}
.business-detail-title.sub {color: #0c407c; margin-top: 30px; margin-bottom: 12px;}
.problem-solution-section-title {font-weight: 700; color: #222; margin-bottom: 26px;}
.ip-patent-promo-title {font-weight: 700; color: #0c407c; margin-bottom: 18px; display: inline-block; padding: 20px; line-height: 1.2;}
.ip-patent-promo-blue {color: #2566D6; font-weight: 800;}
.vision-mission-title {font-weight: 700; color: #222; margin-bottom: 40px;}
.overview-content-title {font-weight: 700; color: #222; margin-bottom: 10px; line-height: 1.2;}
.overview-content-subtitle {color: #999; font-weight: 500; letter-spacing: 0.1em;}
.headarea-content-title {max-width: 1400px; line-height: 1.2; font-weight: 700; margin-bottom: 20px;}
.headarea-content-heading {font-weight: 700; line-height: 1.5; margin-bottom: 30px; color: #222;}
.headarea-content-heading-center {font-size:1.5rem; font-weight: 700; color: #222;}
.headarea-ceo-title {color: #666; margin-bottom: 10px;}
.headarea-ceo-name {font-weight: 700; color: #333;}
.service-title {font-size:2rem; font-weight: 600; color: #0c407c; margin-bottom: 2px; font-family: 'Oxanium', sans-serif;}
.main-tech-main {font-size:1.5rem; font-weight: 700; margin-bottom: 6px; color: #222;}
.main-performance-corp {font-weight: 700; margin-bottom: 2px; color: #fff; line-height: 1.8em; border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
.main-contact-subtitle {color: #fff; font-weight: 500;}
.multimodal-mlops-subtitle {font-weight: 600; margin-bottom: 15px; color: #666; letter-spacing: -0.02em;}
.multimodal-mlops-strong {background: linear-gradient(135deg, #8B5CF6 0%, #3B82F6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;}
.multimodal-mlops-desc {color: #999; line-height: 1.6; max-width: 800px; margin: 0 auto;}
.mv-slogan-quote {font-weight: 700; color: #0056b3; line-height: 1.3; font-size:3rem;}
.mv-slogan-desc {color: #666; line-height: 1.4;}
.mv-slogan-dx {color: #2566D6; font-weight: 700;}
.mv-slogan-ax {color: #23B2A6; font-weight: 700;}
.mv-slogan-and {color: #666; font-weight: 400;}
.mv-slogan-kor {color: #333; font-weight: 500;}
.mv-slogan-mainblue {color: #0c407c; font-weight: 700;}
.vision-main {font-weight: 700; line-height: 1.3; margin-bottom: 30px; color: #222;}
.vision-strong {color: #0c407c; font-weight: 800;}
.vision-gray-thin {color: #666; font-weight: 400;}
.vision-desc {color: #666; line-height: 1.6; margin-bottom: 50px; max-width: 800px; margin-left: auto; margin-right: auto; opacity:1;}
.business-slogan {text-align: center; margin: 60px 0 40px 0; color: #222; font-weight: 700; line-height: 1.2; opacity: 0; transform: translateX(100px); animation: slideInFromRight 1.2s ease-out forwards;}
.business-slogan-part {display: block; margin-bottom: 4px; opacity: 0; transform: translateX(100px); animation: slideInFromRight 0.8s ease-out forwards;}
.business-slogan-part:nth-child(1) {animation-delay: 0.2s;}
.business-slogan-part:nth-child(2) {animation-delay: 0.4s;}
.business-slogan-part:nth-child(3) {animation-delay: 0.6s;}
.highlight-blue {color: #0c407c;}
.common-card-title {font-weight: 700; color: #222; margin-bottom: 20px;}
.ai-process-subtitle {font-weight: 600; color: #2c5282; margin-bottom: 20px; line-height: 1.4; font-family: 'SUIT', sans-serif;}
.ai-solution-subtitle {font-weight: 600; color: #1a365d; margin-bottom: 20px; line-height: 1.5; font-family: 'SUIT', sans-serif;}
.a3-strategy-title {font-weight: 600; margin-bottom: 0; color: white;}
.platform-center-title {font-weight: 700; color: #0c407c; margin-bottom: 8px;}
.platform-center-subtitle {font-weight: 500; color: #0c407c; margin-bottom: 4px;}
.platform-center-desc {font-weight: 400; color: #0c407c;}
.problem-infographic-source {color: #aaa; margin-top: 8px;}
.problem-infographic-percent-desc {color: #666; margin-bottom: 16px; line-height: 1.5;}
.problem-infographic-quote {color: #0c407c; margin-bottom: 16px; line-height: 1.6;}
.ai-process-content p {color: #666; margin: 0; line-height: 1.6; font-family: 'SUIT', sans-serif;}
.ai-solution-content p {color: #666; margin: 0; line-height: 1.6; font-family: 'SUIT', sans-serif;}
.a3-strategy-content li {color: #666; line-height: 1.6; margin-bottom: 5px; position: relative; padding-left: 0px;}
.ai-process-content li {color: #666; margin-bottom: 10px; padding-left: 15px; position: relative; line-height: 1.6; font-family: 'SUIT', sans-serif;}
.ai-solution-content li {color: #666; margin-bottom: 10px; padding-left: 15px; position: relative; line-height: 1.6; font-family: 'SUIT', sans-serif;}
.headarea-content-paragraph {line-height: 1.8; color: #555; margin-bottom: 20px; text-align: justify;}
.a-2-tec-tv-vr-ict-vr-ar-vr,.a-2-tec-2010-it-x-264-drm-tv-html-5,.a-2-tec-ai-big-data-ai-nlp-hadoop-spark,.ai-big-data,.ai-a-2-tec-x-ray-mri-ct-ai-a-2-tec-emr,.a-2-tec-eclipse-pom-free-a-2-tec {line-height: 1.8; color: #333; text-align: justify;}
.ai-big-data {font-weight: 600; color: #007bff; text-align: center; margin: 40px 0;}
.vr-ar {background: #f8f9fa; padding: 30px; border-left: 4px solid #007bff; margin: 40px 0;}
.vr-ar-span {font-weight: 600; color: #007bff;}
.vr-ar-span2 {font-weight: 500; color: #333;}
.div-5-span {font-weight: 600; color: #333;}
.div-5-span2 {color: #666; margin-left: 10px;}
.div6 {max-width: 1400px; margin: 0 auto 60px auto; text-align: right; font-weight: 700; color: #007bff;}
.footer-info, .footer-info>div, .footer-bottom, .footer-copy, .footer-email {font-weight: bold !important; color: unset !important; line-height:1.2;}

/* ===========================
   15. Section Content & Components
=========================== */
.section-content-area {width: 100%; max-width: 1400px; margin: 0 auto 80px auto; padding: 0; box-sizing: border-box;}

.section-content-area img {display: block; margin-left: auto; margin-right: auto; max-width: 100%; height: auto;}
.recruitment-contact-box {background: #fff; border: 1.5px solid #e0e0e0; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); padding: 32px 28px 20px 28px; margin: 32px 0 24px 0; max-width: 420px;}
.recruitment-image-center {display: flex; justify-content: center; align-items: center; margin-bottom: 16px;}
.recruitment-man-img {width: 100%; max-width: 320px; height: auto; display: block;}
.div2, .div3 {color: #fff;}
.footer-info {color: #e0e0e0; display: flex; flex-direction: column;}
.footer-info>div {margin-bottom: 5px;}
.footer-copy {letter-spacing: 0.01em; font-size:11px; color:#999;}
.footer-email {color: #bbb;}
.footer-nav li {color: #fff; cursor: pointer; font-weight: 500; transition: color 0.2s;}

.headarea-breadcrumb-text {color: #fff; font-weight: 500; text-shadow: none;}
.headarea-breadcrumb-text.current {font-weight: 700;}
.headarea-tab-text {font-weight: bold; letter-spacing: -1px;}
.headarea-nav-button {flex: 1; padding: 40px; text-align: center; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 15px;}
.ready-content {text-align: center; font-weight: 600; color: #333; padding: 200px 0; margin: 100px 0 200px 0; border: 1px solid #eee;}
.ai-service-container span {font-weight: 600; color: #333; line-height: 1.6;}
.sm-title {font-weight: 800 !important; display: block; margin-bottom: 10px; background-color: #1a365d; padding: 5px 10px; border-radius: 5px; color: #fff !important; text-align: center;}
.avn-widget-label {font-weight: bold; margin-bottom: 20px; display: block;}
.avn-desc-list {margin: 10px 0; position: relative; line-height: 1.6; font-family: 'SUIT', sans-serif; background-color: #f0f8ff; padding: 20px; border-radius: 10px; border: 1px solid #ddd;}
/* ===========================
   6. Button/Interaction
=========================== */

.button, .service-btn, .main-download-btn, .top-btn, .main-performance-more, .main-contact-map-btn {font-weight: 700; border-radius: 16px; cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.2s;}
.service-btn {background: #f5f5f5; color: #888; border: none; border-radius: 16px; padding: 2px 8px; font-weight: 700; cursor: pointer; transition: background 0.2s; margin-top: 2px; width: 120px; align-self: flex-start; border: 1px solid #eee;}
.service-btn:hover {background: #e0eaff; color: #0050ff;}
.main-download-btn {background: rgba(64, 158, 255, 0.2); color: #fff; padding: 0 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: space-between; width: 100%; height: 60px; flex-shrink: 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 2px solid rgba(255, 255, 255, 0.1); cursor: pointer; font-weight: 600; opacity: 0; transform: translateY(50px); transition: all 0.8s ease-out; border-radius: 0px;}
.main-download-btn.animate {opacity: 1; transform: translateY(0);}
.main-download-btn:hover {transform: scale(1.02) rotateX(10deg); box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.main-download-btn img {width: 20px; height: 20px; filter: brightness(0) invert(1);}
.top-btn {position: fixed; right: 36px; bottom: 100px; width: 56px; height: 56px; background: #ff3300; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; border: none; z-index: 1200; cursor: pointer; transition: background 0.2s, transform 0.2s; padding: 0;}
.top-btn img {width: 18px; filter: brightness(0) invert(1);}
.top-btn:hover {background: #ff3300; transform: translateY(-4px) scale(1.08);}
.main-performance-more {align-self: flex-start; background: #fff; color: #0c407c; border: none; border-radius: 30px; font-weight: 700; padding: 4px 18px; cursor: pointer; transition: background 0.2s, color 0.2s; margin-top: 2px; font-size:12px;}
.main-performance-more:hover {background: #87CEEB; color: #333;}
.main-contact-map-btn {background: rgba(64, 158, 255, 0.2); color: #fff; padding: 0 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: space-between; width: 100%; height: 60px; flex-shrink: 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.5); cursor: pointer; margin-top: 16px; font-weight: 600; opacity: 0; transform: translateY(50px); transition: all 0.8s ease-out; border-radius: 0px;}
.main-contact-map-btn.animate {opacity: 1; transform: translateY(0);}
.main-contact-map-btn:hover {transform: scale(1.02) rotateX(10deg); box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.main-contact-map-btn::after {content: " "; color: #fff;}
/* ===========================
   8. Page Custom
=========================== */

.radar-sensor-title {text-align: center; margin-bottom: 30px; font-weight: 400; line-height: 1.2;}
.radar-sensor-title strong {font-weight: 800; color: #0c407c;}
.ai-audio-caption-title {font-weight: 400; line-height: 1.2; margin-bottom: 30px;}
.ai-audio-caption-title strong {font-weight: 800; color: #0c407c;}
.ai-audio-caption-container {text-align: center;}
.ai-audio-caption-description {text-align: center;}
.radar-sensor-description {text-align: center;}
.radar-sensor-container img {max-width: 100%; height: auto; margin-top: 32px;}
.solution-card {margin-bottom: 32px;}
.solution-image {display: flex; justify-content: center; align-items: center; background-color: #fff; padding: 50px 20px; border-radius: 10px; border: 1px solid #eee; margin-bottom:100px;}
.solution-image img {width: 50%; height: auto; display: block;}
.solution-content {text-align: center;}
.solution-content .solution-title {padding: 20px 0;}
.section-title strong {font-weight: 700; color: #000;}
.bigdata-image {display: flex; justify-content: center; align-items: center; background-color: #fff; padding: 50px 20px; border-radius: 10px; border: 1px solid #eee; margin-bottom:100px;}
.bigdata-image img {width: 75%; height: auto; display: block;}
.bigdata-grid {display: grid; grid-template-columns: 1fr; gap: 20px;}
.bigdata-title {font-weight: 600; color: #333; margin-bottom: 20px;}
.bigdata-desc {line-height: 1.8; color: #555; margin-bottom: 20px; text-align: justify;}
.bigdata-card {margin-bottom: 32px;}
.bigdata-content {text-align: center;}
.bigdata-content .bigdata-title {padding: 20px 0;}
.section-title strong {font-weight: 700; color: #000;}
.solution-card,.solution-image,.solution-image img,.solution-content,.solution-content .solution-title {display: none;}
.dt-grid {display: grid; grid-template-columns: 1fr; gap: 20px;}
.dt-title {font-weight: 600; color: #333; margin-bottom: 20px;}
.dt-desc {line-height: 1.8; color: #555; margin-bottom: 20px; text-align: justify; max-width: 900px; text-align: center; margin:0 auto;}
.dt-card {margin-bottom: 32px;}
.dt-content {text-align: center;}
.dt-content .dt-title {padding: 20px 0;}
.section-title strong {font-weight: 700; color: #000;}
.dt-image {display: flex; justify-content: center; align-items: center; background-color: #fff; padding: 50px 20px; border-radius: 10px; border: 1px solid #eee; /* margin-bottom:100px; */}
.dt-image img {width: 75%; height: auto; display: block;}


.dual-image-section {width: 100%; margin-bottom:0px;}
.dual-image-section h3 {font-weight: 700 !important; margin-bottom: 30px; text-align: center;}
.dual-image-container {display: flex; justify-content:space-around; align-items: flex-start; gap: 20px;}
.image-text-item {text-align: center;}
.dual-image-container .image-text-item:first-child {width: 40%;}
.dual-image-container .image-text-item:last-child {width: 60%;}
.image-text-item img {width: 100%; height: auto; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.image-text-item p {line-height: 1.6; color: #666; text-align: left;}
.line-box {border: 1px solid #eee; background-color: #fff; padding: 50px 30px; border-radius: 20px; margin-top: 20px; margin-bottom: 100px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); font-size:0.8rem;}
.dual-image-section {margin-top: 20px;}
.dual-image-container .dt-image {width: calc(50% - 10px);}
.dual-image-container .dt-image img {width: 100%; height: auto;}
.dual-image-container .image-wrap {width: calc(50% - 10px);}
.dual-image-container .image-wrap img {width: 100%; height: auto; border-radius: 8px;}
.dual-image-container .image-wrap:first-child {width: calc(40% - 10px);}
.dual-image-container .image-wrap:last-child {width: calc(60% - 10px);}
.dual-image-container .image-wrap img {width: 100%; height: auto;}
.section-container .image-wrap {text-align: center;}
.section-container .image-wrap img {max-width: 100%; height: auto; border-radius: 8px;}
.dual-image-container .image-wrap img {width: 100%; height: auto;}
.no-shadow .image-text-item img {box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.section_title {font-weight: 500; text-align: center; margin: 30px 0;}

/* ===========================
   New Title Area
=========================== */

.section-title-area {text-align: center; margin: 80px auto; width: 100%; max-width: 1400px; padding:0 0px; box-sizing: border-box;}
.section-title-area .divide-sub-section {font-size:1.2rem; font-weight: 800; margin: 0 auto 20px auto;}
.section-title-area strong.section-slogan  {font-size:3rem; color:#0050ff;}
.section-title-area .section-slogan-descpt  {font-size:1.2rem; font-weight:700;}

.section-title-area .section-title {font-size:2rem; font-weight: 600; color: #222; margin: 50px 0;  line-height: 2.5rem; letter-spacing: -0.05em;}
.section-title-area .section-slogan-desc {color: #666; line-height: 1.6; max-width: 1200px; margin: 0 auto;}
.ai-robot-img-caption-container {margin-top: 20px; text-align: center; display: flex; justify-content: space-around; align-items: center; max-width: 1000px; margin-left: auto; margin-right: auto;}
.ai-robot-img-caption-item {font-weight: 600; color: #333; flex: 1;}
.ai-robot-img-caption-item.middle {flex: 0.6;}
.main-visual-area > .main-visual-content {display: flex; justify-content: space-between; align-items: flex-start; width:100%; max-width:1400px; margin: 0 auto;}
.main-image > .main-visual-content {display: block; width: 100%; margin: 0;}
.vr-service-images {position: relative; height: 600px;}
.vr-service-img1 {position: absolute; top: 300px; left: 20px; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.vr-service-img2 {position: absolute; top: 20px; right: 200px; z-index: 1;}
.img-desc {color: #666; line-height: 1.2; max-width: 800px; margin: 0 auto; padding:20px 0;}
.img-round20l {border-radius: 20px 0 20px 0;}
.img-round20r {border-radius: 0 20px 0 20px;}
.img-desc ul.desc-list {line-height: 1; margin-top: 10px;}
.img-desc ul.desc-list li {text-align: left; color: #666; max-width: 800px; margin: 0 auto; padding:5px;}
.top-area.scrolled {background: #fff !important; box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.top-area.scrolled .nav-menu ul li.nav-item {color: #222;}
.top-area.scrolled .nav-menu ul li.nav-item:hover {color: #007bff;}
.top-area.scrolled .nav-menu .logo img {filter: none;}
.top-area.scrolled .nav-menu .menu-icon-btn svg rect {fill: #222;}
.top-area.scrolled .nav-sub-menu {background: #fff !important; color: #222;}
.top-area.scrolled .nav-sub-menu .col-title,
.top-area.scrolled .nav-sub-menu .col-desc,
.top-area.scrolled .nav-sub-menu li {color: #222;}
.top-area.scrolled .nav-sub-menu li:hover {color: #007bff;}
.top-area:not(.scrolled) .nav-menu:hover {background: #fff;}
.top-area:not(.scrolled) .nav-menu:hover ul li.nav-item {color: #222;}
.top-area:not(.scrolled) .nav-menu:hover ul li.nav-item:hover {color: #007bff; opacity: 0.8;}
.top-area:not(.scrolled) .nav-menu:hover .logo img {filter: none;}
.top-area:not(.scrolled) .nav-menu:hover .menu-icon-btn svg rect {fill: #222;}
.top-area:not(.scrolled) .nav-menu:hover .menu-icon-img {filter: none;}
.top-area:not(.scrolled) .nav-sub-menu:hover ~ .nav-menu,
.top-area:not(.scrolled) .nav-sub-menu.active ~ .nav-menu {background: #fff !important;}
.top-area:not(.scrolled) .nav-sub-menu:hover ~ .nav-menu ul li.nav-item,
.top-area:not(.scrolled) .nav-sub-menu.active ~ .nav-menu ul li.nav-item {color: #222;}
.top-area:not(.scrolled) .nav-sub-menu:hover ~ .nav-menu ul li.nav-item:hover,
.top-area:not(.scrolled) .nav-sub-menu.active ~ .nav-menu ul li.nav-item:hover {color: #007bff; opacity: 0.8;}
.top-area:not(.scrolled) .nav-sub-menu:hover ~ .nav-menu .logo img,
.top-area:not(.scrolled) .nav-sub-menu.active ~ .nav-menu .logo img {filter: none;}
.top-area:not(.scrolled) .nav-sub-menu:hover ~ .nav-menu .menu-icon-btn svg rect,
.top-area:not(.scrolled) .nav-sub-menu.active ~ .nav-menu .menu-icon-btn svg rect {fill: #222;}
.top-area:not(.scrolled) .nav-sub-menu:hover ~ .nav-menu .menu-icon-img,
.top-area:not(.scrolled) .nav-sub-menu.active ~ .nav-menu .menu-icon-img {filter: none;}
.project-content-img-title {font-weight: 800; color: #333; margin: 20px 0 10px 0; font-size:1.2rem;}
.project-content-img-desc {line-height: 1.8; color: #555; margin-bottom: 10px;}
.project-content-img {justify-content: center; align-items: center; background-color: #fff; padding: 50px 20px; margin-top: 40px;  }
.kepco-safety-section {padding: 60px 60px 0 60px; margin-top: 40px; flex-direction: column; align-items: center; justify-content: center; gap: 48px; background: #fff; border: 1px solid #e0e0e0; border-radius: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);}
.kepco-safety-inner {max-width: 1400px; margin: 0 auto; display: flex; gap: 48px; align-items: center; justify-content: space-between; padding: 48px 0px;}
.kepco-safety-left {flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 400px; min-width: 320px;}
.kepco-safety-man {height: auto; padding:20px 20px 0 20px; border-radius: 16px; margin-bottom: 8px;}
.kepco-safety-desc {color: #333; background: #f7fafc; border-radius: 12px; padding: 18px 22px; border:solid 1px #b5d3f1;}
.kepco-safety-desc strong {color: #0c407c;}
.kepco-safety-desc .desc-highlight {color: #0099ff; font-weight: 700;}
.kepco-safety-right {flex: 2; display: flex; flex-direction: row; align-items: flex-start; gap: 32px; position: relative; width: 200px; padding-left:300px;}
.kepco-safety-man1-right {min-width: 100px; width: 340px; height: auto; display: block; position: absolute; bottom:-55px; left: 0px; z-index: 100;}
.kepco-safety-right-content {flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; width: 50%;}
.kepco-safety-title {font-weight: 800; color: #0099ff; margin-bottom: 18px; letter-spacing: -0.01em; font-size:1.5rem;}
.kepco-safety-list {list-style: none; padding: 0; margin: 0; width: 100%; text-align: left;}
.kepco-safety-list li {font-weight: 800; color: #222; margin-bottom: 10px; background: #f0f6ff; border-radius: 5px; padding: 10px 22px 10px 70px; position: relative;}
.kepco-safety-list li .num {position: absolute; left: 22px; top: 10px; width: 32px; height: 32px; background: #0099ff; color: #fff; font-weight: 600; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.kepco-safety-list li .point-desc {display: block; color:#666; margin-top: 6px; font-weight: 500;}
.kepco-header-container {max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 24px;}
.kepco-header-title {font-weight: 800; color: #0099ff; margin-bottom: 18px; letter-spacing: -0.01em; margin:0 auto; margin-bottom: 50px;}
.kepco-header-desc {display: flex; flex-direction: row; align-items: flex-start; gap: 100px; position: relative;}
.kepco-header-desc-left {flex: 1; display: flex; flex-direction: column; color: #222; line-height: 1.5; letter-spacing: -0.01em; background: #f0f6ff; padding: 10px 20px; border-radius: 10px; width: 50%; min-height:100px; padding: 20px; border:solid 1px #b5d3f1; text-align:center;}
.kepco-header-desc-right {flex: 1; display: flex; flex-direction: column; color: #222; line-height: 1.5; letter-spacing: -0.01em; background: #f0f6ff; padding: 10px 20px; border-radius: 10px; width: 50%; min-height:100px; padding: 20px; text-align: center; border:solid 1px #b5d3f1;}
.kepco-header-desc-arrow {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size:1.5rem;font-weight: 800; color: #b5d3f1; margin-bottom: 18px; letter-spacing: -0.01em; background: #ff9900; width:80px; height:80px;  text-align:center; line-height:80px; border-radius: 50%; color:#fff; }
.kepco-header-desc-arrow img {width:50px; height:50px; filter: brightness(0) invert(1);}
/* ===========================
   Talent Page Styles
=========================== */

/* ===========================
   12. Company Values & Recruitment
=========================== */
.values-section {padding:0 0 100px 0; background: #fff; border:solid 1px #eee; border-radius: 20px;}
.container {max-width: 100%; margin: 0 auto;}
.values-grid {display: flex; justify-content: center; align-items: center; gap: 60px; flex-wrap: wrap;}
.value-card {text-align: center; flex: 1; min-width: 280px; max-width: 350px;}
.value-hexagon {width: 200px; height: 230px; margin: 0 auto 30px; position: relative; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.value-card.specialty .value-hexagon {background: linear-gradient(135deg, #007bff, #0056b3);}
.value-card.passion .value-hexagon {background: linear-gradient(135deg, #fd7e14, #e55a00);}
.value-card.teamwork .value-hexagon {background: linear-gradient(135deg, #28a745, #1e7e34);}
.hexagon-content {text-align: center; color: white;}
.hexagon-content h3 {font-weight: 700; margin-bottom: 5px; font-family: 'SUIT', sans-serif;}
.hexagon-content p {font-weight: 500; font-family: 'SUIT', sans-serif;}
.value-description {color: #333; line-height: 1.6;}
.value-description p {font-family: 'SUIT', sans-serif;}
.join-section {background: linear-gradient(135deg, #6c757d 0%, #495057 100%); padding: 80px 0; text-align: center; color: white;}
.join-content h2 {font-weight: 700; margin-bottom: 20px; font-family: 'SUIT', sans-serif;}
.join-content p {margin-bottom: 40px; opacity: 0.9; font-family: 'SUIT', sans-serif;}
.join-buttons {display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;}
.btn {padding: 15px 30px; border-radius: 50px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; font-family: 'SUIT', sans-serif;}
.btn-primary {background: #007bff; color: white;}
.btn-primary:hover {background: #0056b3; transform: translateY(-2px);}
.btn-secondary {background: transparent; color: white; border: 2px solid white;}
.btn-secondary:hover {background: white; color: #333; transform: translateY(-2px);}


/* ===========================
   Recruitment Guide Page Styles
=========================== */

.recruitment-contact {margin: 30px 0; padding: 20px; background: #fff; border-radius: 10px; border:solid 1px #eee;}
.recruitment-contact h4 {font-weight: 700; color: #333; margin-bottom: 10px; font-family: 'SUIT', sans-serif;}
.recruitment-contact p {color: #555; margin-bottom: 8px; font-family: 'SUIT', sans-serif;}
.recruitment-contact p strong {color: #007bff; font-weight: 700;}
.contact-note {color: #666 !important; font-style: italic; margin-top: 10px;}
.application-download {margin: 10px 0;}
.download-link {display: inline-flex; align-items: center; gap: 10px; padding: 15px 25px; background: #007bff; color: white; text-decoration: none; border-radius: 8px; font-weight: 600; transition: all 0.3s ease; font-family: 'SUIT', sans-serif;}
.download-link:hover {background: #0056b3; transform: translateY(-2px); box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.download-icon {font-weight: bold;}
.recruitment-info-section {padding: 80px 0; background: #f8f9fa;}
.recruitment-info-grid {display: flex; flex-direction: row; gap: 40px; margin-top: 40px; justify-content: center; align-items: stretch;}
.info-card {display: flex; flex-direction: row; align-items: center; background: white; padding: 40px 30px; border-radius: 15px; text-align: left; box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: all 0.3s ease; gap: 28px;}
.info-icon {width: 80px; height: 80px; min-width: 80px; min-height: 80px; margin: 0; background: linear-gradient(135deg, #007bff, #0056b3); border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.info-content {display: flex; flex-direction: column; justify-content: center; gap: 8px;}
.info-content h3 {font-weight: 700; color: #333; margin-bottom: 8px; margin-top: 0; font-family: 'SUIT', sans-serif;}
.info-content p {color: #666; line-height: 1.6; font-family: 'SUIT', sans-serif; margin: 0;}



/* ===========================
   Company Download Section Styles
=========================== */
.company-download-section  {padding: 80px 0;  background: #f8f9fa;}
.company-download-container  {max-width: 1400px;  margin: 0 auto;  padding: 0 20px;}
.company-download-row  {display: grid;  grid-template-columns: repeat(3, 1fr);  grid-template-rows: repeat(2, 1fr);  gap: 16px;  width: 100%;}
.company-download-btn  {background: #fff;  color: #333;  padding: 0 20px;  box-shadow: 0 2px 8px rgba(0,0,0,0.05);  display: flex;  align-items: center;  justify-content: space-between;  width: 100%;  height: 60px;  flex-shrink: 0;  backdrop-filter: blur(10px);  -webkit-backdrop-filter: blur(10px);  border: 1px solid rgba(0, 0, 0, 0.1);  cursor: pointer;  
    font-weight: 600;  border-radius: 0px;  transition: all 0.3s ease;  font-family: 'SUIT', sans-serif;}
.company-download-btn:hover  {transform: scale(1.02);  box-shadow: 0 4px 12px rgba(0,0,0,0.1);  background: rgba(250, 250, 250, 0.3);  border:solid 1px #aaa;}
.company-download-btn img  {width: 20px;  height: 20px;  filter: brightness(0) saturate(100%);}

/* ===========================
   Contact Question Page Styles
=========================== */

/* ===========================
   13. Contact Information & Location
=========================== */
.contact-info-section {margin-bottom: 40px;}
.contact-section-title {font-weight: 700; color: #333; margin-bottom: 20px; font-family: 'SUIT', sans-serif;}
.contact-details {display: flex; align-items: center; flex-wrap: wrap; gap: 15px; color: #555; font-family: 'SUIT', sans-serif;}
.contact-item {font-weight: 500;}
.contact-separator {color: #ccc; font-weight: 300;}
.download-section {margin-top: 40px;}
.download-links {display: flex; flex-direction: column; gap: 15px;}
.download-item {display: flex; align-items: center; gap: 15px; padding: 15px 20px; background: #f0f6ff; border: 1px solid #007bff; /* light blue */
    text-decoration: none; color: #222; transition: all 0.3s ease;}
.download-item:hover {background: #007bff; color: white; transform: translateX(5px); box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.download-icon {width: 24px; height: 24px; filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%); transition: filter 0.3s ease;}
.download-item:hover .download-icon {filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);}
.download-text {font-weight: 500;}
.contact-additional-section {padding: 80px 0; background: #f8f9fa;}
.contact-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; margin-top: 40px;}
.contact-card {background: white; padding: 40px 30px; border-radius: 15px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: all 0.3s ease;}
.contact-card:hover {transform: translateY(-5px); box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.contact-card-icon {width: 80px; height: 80px; margin: 0 auto 20px; background: linear-gradient(135deg, #007bff, #0056b3); border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.contact-card-icon img {width: 40px; height: 40px; filter: brightness(0) invert(1);}
.contact-card h3 {font-weight: 700; color: #333; margin-bottom: 15px; font-family: 'SUIT', sans-serif;}
.contact-card p {color: #007bff; font-weight: 600; margin-bottom: 10px; font-family: 'SUIT', sans-serif;}
.contact-time {color: #666; font-family: 'SUIT', sans-serif;}


/* ===========================
   Contact Map Page Styles
=========================== */

.location-info-section {margin-bottom: 40px;}
.location-section-title {font-weight: 700; color: #333; margin-bottom: 30px; font-family: 'SUIT', sans-serif;}
.company-address {margin-bottom: 30px; padding: 20px; background: #f8f9fa; border-radius: 10px; border-left: 4px solid #007bff;}
.company-address h4 {font-weight: 700; color: #333; margin-bottom: 10px; font-family: 'SUIT', sans-serif;}
.company-address p {color: #555; font-family: 'SUIT', sans-serif;}
.company-address p strong {color: #007bff; font-weight: 700;}
.contact-info {margin-bottom: 30px;}
.contact-info h4 {font-weight: 700; color: #333; margin-bottom: 15px; font-family: 'SUIT', sans-serif;}
.transportation-info h4 {font-weight: 700; color: #333; margin-bottom: 20px; font-family: 'SUIT', sans-serif;}
.transport-item {display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; padding: 15px; background: #f8f9fa; border-radius: 8px;}
.transport-icon {width: 40px; height: 40px; background: #007bff; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.transport-icon img {width: 24px; height: 24px; filter: brightness(0) invert(1);}
.transport-details h5 {font-weight: 600; color: #333; margin-bottom: 8px; font-family: 'SUIT', sans-serif;}
.transport-details p {color: #555; margin-bottom: 5px; font-family: 'SUIT', sans-serif;}
.bus-stop {color: #666 !important; font-style: italic;}
.map-container {position: relative; width: 100%; height: 500px; border-radius: 15px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.map-overlay {position: absolute; top: 20px; left: 20px; z-index: 10;}
.map-address-box {background: white; padding: 15px 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); min-width: 250px;}
.address-info {margin-bottom: 10px;}
.address-text {display: block; color: #333; font-weight: 500; margin-bottom: 2px; font-family: 'SUIT', sans-serif;}
.map-actions {display: flex; gap: 15px;}
.map-action-link {display: flex; align-items: center; gap: 5px; color: #007bff; text-decoration: none; font-weight: 500; transition: color 0.3s ease; font-family: 'SUIT', sans-serif;}
.map-action-link:hover {color: #0056b3;}
.action-icon {width: 16px; height: 16px;}
.map-placeholder {width: 100%; height: 100%; background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); position: relative; display: flex; align-items: center; justify-content: center;}
.map-content {position: relative; width: 100%; height: 100%;}
.map-logo {position: absolute; bottom: 20px; left: 20px; font-weight: 700; color: #333; font-family: 'Arial', sans-serif;}
.map-marker {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
.marker-pin {width: 30px; height: 30px; background: #ff4444; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); margin: 0 auto 10px; position: relative;}
.marker-pin::after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; background: white; border-radius: 50%;}
.marker-label {font-weight: 600; color: #333; background: white; padding: 5px 10px; border-radius: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); font-family: 'SUIT', sans-serif;}
.map-controls {position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 5px;}
.map-zoom-in,
.map-zoom-out {width: 40px; height: 40px; background: white; border: 1px solid #ddd; border-radius: 4px; font-weight: 600; color: #333; cursor: pointer; transition: all 0.3s ease;}
.map-zoom-in:hover,
.map-zoom-out:hover {background: #f8f9fa; box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.map-copyright {position: absolute; bottom: 20px; right: 20px; color: #666; font-family: 'SUIT', sans-serif;}
.location-additional-section {padding: 80px 0; background: #f8f9fa;}
.location-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; margin-top: 40px;}
.location-card {background: white; padding: 40px 30px; border-radius: 15px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: all 0.3s ease;}
.location-card:hover {transform: translateY(-5px); box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.location-card-icon {width: 80px; height: 80px; margin: 0 auto 20px; background: linear-gradient(135deg, #007bff, #0056b3); border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.location-card-icon img {width: 40px; height: 40px; filter: brightness(0) invert(1);}
.location-card h3 {font-weight: 700; color: #333; margin-bottom: 15px; font-family: 'SUIT', sans-serif;}
.location-card p {color: #007bff; font-weight: 600; margin-bottom: 10px; font-family: 'SUIT', sans-serif;}
.location-detail {color: #666; font-family: 'SUIT', sans-serif;}


/* ===========================
   Company Info Section Styles
=========================== */

.company-info-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 40px; width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto;}
.company-info-card {padding: 20px; text-align: left; transition: all 0.3s ease; display: flex; align-items: center; gap: 20px; border:solid 1px #ddd; background: #fff;}
.company-info-card .info-icon {width: 50px; height: 50px; background: linear-gradient(135deg, #007bff, #0056b3); border-radius: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.company-info-card .info-icon img {width: 30px; height: 30px; filter: brightness(0) invert(1);}
.company-info-card .info-content {flex: 1;}
.company-info-card h3 {font-weight: 700; color: #333; margin-bottom: 10px; font-family: 'SUIT', sans-serif;}
.company-info-card p {color: #555; line-height: 1.6; font-family: 'SUIT', sans-serif;}
.company-info-card p strong {color: #007bff; font-weight: 700;}
.company-info-card .bus-stop {color: #666 !important; font-style: italic; margin-top: 10px; display: block;}


/* ===========================
   Google Maps Section Styles
=========================== */

.google-maps-section {width: 100%; margin: 0; padding: 0; background: #f8f9fa;}
.maps-container {width: 100%; height: 600px; position: relative; overflow: hidden; margin:50px 0 100px 0; border: solid 1px #ddd;}
.google-maps-iframe {width: 100%; height: 100%; border: none; display: block;}


/* ===========================
   Contact Section Responsive
=========================== */



/* ===========================
   14. Content Layout & Utilities
=========================== */
.content-group {display: flex;  align-items: center; justify-content: center; padding:0 40px; border-radius: 12px;}
.content-left {flex: 0 0 420px; max-width: 420px; min-width: 260px; display: flex; align-items: center; justify-content: center;}
.content-left img {width: 100%; height: auto;}
.content-right {flex: 1; max-width:50%; min-width: 240px; display: flex; flex-direction: column; justify-content: center;}

.hexagon-image {width: 320px; height: 277px; display: flex; align-items: center; justify-content: center; clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin: 0 auto;}
.hexagon-image img {width: 100%; height: 100%; object-fit: cover; border-radius: 0;}

.talent-hexagon-row {display: flex; justify-content: center; align-items: flex-end; gap: 48px; margin: 60px 0 40px 0;}
.talent-hexagon-card {display: flex; flex-direction: column; align-items: center; gap: 12px;}
.talent-hexagon-shape {width: 90px; height: 78px; background: #fff; clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-bottom: 0;}
.talent-hexagon-shape span {font-family: 'Oxanium', 'SUIT', sans-serif; font-weight: 700; color: #0c407c; text-align: center; width: 100%;}
.talent-hexagon-label {color: #333; font-weight: 600; margin-top: 4px;}

.img-question {width:300px; border-radius: 12px;}
.section-content-area {width: 100%; max-width: 1400px; margin: 0 auto 80px auto; padding: 0; box-sizing: border-box;}

.section-content-area img {display: block; margin-left: auto; margin-right: auto; max-width: 100%; height: auto;}
.recruitment-contact-box {background: #fff; border: 1.5px solid #e0e0e0; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); padding: 32px 28px 20px 28px; margin: 32px 0 24px 0; max-width: 420px;}
.recruitment-image-center {display: flex; justify-content: center; align-items: center; margin-bottom: 16px;}
.recruitment-man-img {width: 100%; max-width: 320px; height: auto; display: block;}
.recruitment-main-box {display: flex; flex-direction: row; /* background: #fff; border-radius: 20px; border:solid 1px #eee; */
  padding: 100px; gap: 48px; align-items: center; margin: 40px auto 48px auto;}
.recruitment-image-center {flex: 0 0 520px; display: flex; justify-content: center; align-items: flex-end; margin-bottom: 0; position: relative; min-height: 220px;}
.recruitment-man-img {width: 100%; max-width: 320px; min-width: 120px; height: auto; display: block; border-radius: 12px; position: absolute; left: 50%; bottom: -150px; transform: translateX(-50%);}
.headarea-content-text-block {flex: 1 1 0; display: flex; flex-direction: column; gap: 18px;}
.recruitment-contact-box {background: none; border: none; border-radius: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.05); padding: 0; margin: 0; max-width: none;}

.obs-solution-card {background: #fff; /* border: 1.5px solid #0c407c; */
  border: none; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); padding: 50px; margin-bottom: 40px; display: flex; flex-direction: column; gap: 24px; align-items: center;}
.obs-solution-title {font-weight: 800; color: #0c407c; margin-bottom: 12px; text-align: center;}
.obs-solution-desc {color: #333; line-height: 1.7; margin-bottom: 16px; text-align: center;}
.obs-solution-img-wrap {width: 100%; display: flex; justify-content: center;}
.obs-solution-img {width: auto; max-width: 100%; height: auto; display: block;}

.a2flex-medical-card {background: #fff; border: 1px solid #e0e0e0; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); padding: 40px 32px; margin-bottom: 32px; display: flex; flex-direction: column; align-items: center; gap: 18px;}
.a2flex-medical-title {font-weight: 800; color: #0c407c; margin-bottom: 10px; text-align: center;}
.a2flex-medical-img {width: auto; max-width: 100%; height: auto; display: block;}

.a2flex-grphic {border:solid 0px #f30;}
.a2flex-grphic .section-title  {text-align: center; margin-bottom: 30px;  font-weight: 600; line-height: 1.2; margin:100px 0 30px 0; display: block;} 
 




/* ===========================
   Full Menu Overlay Styles
=========================== */

.section-container .line-box img  {max-width: 100%;  margin: 0 auto;  display: block;}

.full-menu-right h2.menu-title  {
    font-weight: bold;  /* 예시, 기존 디자인에 맞춰 조정 필요 */
    margin-bottom: 15px;  /* 예시 여백, 기존 디자인에 맞춰 조정 필요 */
}

.full-menu-right h3.menu-subtitle  {
    font-weight: 600;  /* 예시, 기존 디자인에 맞춰 조정 필요 */
    margin-bottom: 10px;  /* 예시 여백, 기존 디자인에 맞춰 조정 필요 */
}

.full-menu-right .menu-items a  {display: block;  /* span처럼 블록 레벨로 표시되도록 */
    padding: 5px 0;  /* 예시 패딩, 기존 디자인에 맞춰 조정 필요 */
    color: inherit;  /* 부모 요소의 글자색 상속 */
    text-decoration: none;  /* 밑줄 제거 */
}

.full-menu-right .menu-items a:hover  {text-decoration: underline;  /* 호버 시 밑줄 추가 등 */
}

.image-box-container  {display: flex;  flex-direction: column;  gap: 40px;  width: 100%;  max-width: 1400px;  margin: 0 auto;}

.image-box  {background: #fff;  border: 2px solid #e0e0e0;  border-radius: 20px;  padding: 60px;  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);  overflow: hidden;}

.image-box img  {width: 100%;  height: auto;  border-radius: 12px;  display: block;}

.image-box-title  {
    font-weight: 700;  color: #333;  margin-bottom: 0;  text-align: center;  line-height: 1.4;}

/* ===========================
   Navigation Image Styles
=========================== */

.headarea-bottom-nav  {position: relative;  margin-top:200px;}

.headarea-nav-button  {position: relative;}

.headarea-nav-button .nav-image-male  {position: absolute;  width: 200px;  height: 200px;  right: 250px;  top: -78px;  z-index: 999;  transform: rotate(0deg) !important;  filter: none !important;  transition: none !important;}

.headarea-nav-button .nav-image-female  {position: absolute;  width: 200px;  height: 200px;  left: 200px;  top: -78px;  z-index: 999;  filter: none !important;  transition: none !important;  transform: none !important;}

.problem-solution-keypoint-grid {
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr;
  gap: 20px; 
  margin-bottom: 18px;
} 