/* --------- 헤더 색상 조절 --------- */
/* 페이지 헤더: 밝은 텍스트 */
.wrap.home .header .gnb .gnb__link,
.wrap.home .header .shortCut a {
  color: var(--fc-light);
}
.wrap.home .header .shortCut li {
  background-color: #ffffff30;
}

/* --------- 공통 헤더 및 푸터 --------- */
/* ----- Header ----- */
header {
  width: 100%;
  height: 90px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  transform: translate3d(0, 0, 0);
  transition:   
    transform 225ms cubic-bezier(0, 0, 0.2, 1),
    background-color 0.3s;
}
header.hide {
  transform: translate3d(0, -100%, 0);
  pointer-events: none;
}
header.scroll {
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(15px);
}
header.scroll .gnb .gnb__link, 
header.scroll .shortCut a {
  color: var(--fc-dark) !important;
}
/* 헤더 호버: 블랙 바 + 흰 글자/아이콘 (스크롤 박스·홈/서브 공통) */
header.header:hover {
  background-color: #0b0b0b !important;
  backdrop-filter: none;
}
header.header:hover .gnb .gnb__link,
header.header:hover .shortCut a {
  color: var(--fc-light) !important;
}
header.header:hover .shortCut li {
  background-color: rgba(255, 255, 255, 0.12);
}
header.header:hover .shortCut svg path {
  stroke: #ffffff !important;
}
header.header:hover .shortCut__menu svg path,
header.header:hover .shortCut__menu svg circle {
  fill: #ffffff !important;
}
header .inner {height: 90px;}
header > .b-flex {
  justify-content: space-between;
  align-items: center;
}
header > .b-flex > .b-flex {
  justify-content: space-between;
  align-items: center;
  gap: 6.25rem;
  height: 100%;
}
h1.header__logo {height: 30px;}
h1.header__logo a {
  display: block;
  height: inherit;
  width: 100%;
}
h1.header__logo img {
  height: inherit;
  width: 100%;
}
nav.gnb {
  color: var(--fc-light);
  height: 100%;
}
nav.gnb .b-flex {
  height: 100%;
}
nav.gnb li.gnb__item {
  position: relative;
}
nav.gnb li.gnb__item:hover {
  display: block;
}
nav.gnb li.gnb__item ul.depth_2 {display: none;}
nav.gnb li.gnb__item:hover ul.depth_2 {
  display: block;
}
nav.gnb li.gnb__item > a {
  height: 100%;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
}
nav.gnb li.gnb__item ul.depth_2 {
  position: absolute;
  top: 90px;   /* absolute 위치값 px 유지 */
  left: 0;
  background-color: #0b0b0b;
  color: #fff;
  border-bottom-left-radius: var(--radius-2);
  border-bottom-right-radius: var(--radius-2);
  padding: 0.75rem;
  width: max-content;
  white-space: nowrap;
  transition: all 0.3s ease 0s;
}
ul.depth_2 li {
  border-radius: var(--radius-2);
  min-width: 200px;
  position: relative;
}
ul.depth_2 li a {
  display: inline-block;
  padding: 0.375rem;
  width: 100%;
}
ul.depth_2 > li:hover {
  background-color: var(--dmove-500);
  color: #fff;
}
ul.depth_2 ul.depth_3 {
  position: absolute;
  top: 0;
  left: 100%;
  background-color: #0b0b0b;
  color: #fff;
  border-top-right-radius: var(--radius-2);
  border-bottom-right-radius: var(--radius-2);
  width: max-content;
  white-space: nowrap;
}
ul.depth_2 ul.depth_3 li {
  display: none;
  padding-left: 0.5rem;
}
ul.depth_2 ul.depth_3 li a {
  display: block;
  width: 100%;
}
ul.depth_2 li:hover ul.depth_3 li {
  display: block;
}
ul.depth_2 ul.depth_3 li:hover {
  color: var(--dmove-500);
}
ul.shortCut {
  gap: var(--gap-1);
}
ul.shortCut li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-5);
  background-color: #ffffff30;
  cursor: pointer;
}
.shortCut__menu > button,
.shortCut__item > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #000 !important;
}
.shortCut__menu .shortCut__menu-icon--close {
  display: none;
}
.shortCut__menu.is-active .shortCut__menu-icon--hamburger {
  display: none;
}
.shortCut__menu.is-active .shortCut__menu-icon--close {
  display: block;
}

/* Hamburger gnb */
body.modal-open header {padding-right: 15px;} /*absolute 너비 바뀜*/
header nav.gnb-full.is-active {display: block;}
header nav.gnb-full {
  display: none;
  position: absolute;
  top: 90px;   /* absolute 위치값 px 유지 */
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;
  background: linear-gradient(45deg, #D9EDED,#7FBEBE);
}
/* 모바일 드릴다운용 상단 바: 768px 이하에서만 표시 (JS로 DOM에 추가됨) */
header nav.gnb-full .gnb-full-mobile-head {
  display: none;
}
header nav.gnb-full .b-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 2rem;
  margin-top: 2rem;
}
nav.gnb-full li.hasDepth3 {
  grid-column: span 2;
}
nav.gnb-full > ul > li > a {
  display: block;
  margin: 1rem 0;
  font-size: var(--fs-p);
  font-weight: bold;
  /* color: var(--dmove-600); */
}
nav.gnb-full ul.depth_2 li:hover {
  background-color: transparent;
  color: var(--dmove-600);
}
nav.gnb-full ul.depth_2 ul.depth_3 {
  left: 200px;   /* absolute 위치값 px 유지 */
  gap: var(--gap-1);
  background-color: transparent;
}
nav.gnb-full ul.depth_2 ul.depth_3 li {
  display: block;
  min-width: auto;
}
nav.gnb-full ul.depth_2 ul.depth_3 li:hover {
  color: var(--dmove-600);
}

/* ----- Footer ----- */
footer {
  background-color: var(--bg-0);
  color: var(--fc-light);
  padding: 3.5rem 0;
}
footer button {color: var(--fc-light);}
.footer__top {
  justify-content: space-between;
  padding-bottom: 2rem;
}
.footer__top > .b-flex {
  gap: var(--gap-6);
}
.footer__center {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}
.footer__info p {
  color: var(--fc-natural-100);
  margin-left: 1.5rem;
  font-size: 0.875rem;
}
.footer__info p:first-of-type {margin-left: 0;}
.footer__info i {
  font-style: normal;
  color: var(--fc-natural-300);
  display: inline-block;
  margin-left: 0.625rem;
}
.footer__btn button,
.footer__btn a {
  display: inline-block;
  border: 1px solid var(--fc-natural-300);
  border-radius: var(--radius-1);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}
.footer__btn button {margin-left: 1rem;}
.footer__btn svg {
  float: right;
  margin-left: 0.625rem;
  color: #fff;
}
.footer__btn button:hover,
.footer__btn a:hover {
  border: 1px solid #fff;
  background-color: var(--fc-light);
  color: #0b0b0b;
}
.footer__btn button:hover svg,
.footer__btn a:hover svg {
  color: #0b0b0b;
}
.footer__right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.footer__right svg {
  float: right;
  color: #fff;
}
.footer__right ul.sites__list {text-align: start;}
.footer__right ul.sns__list {gap: 1.5rem;}
.footer__right ul.sns__list li {
  width: 25px;
  height: 25px;
  /* opacity: .5; */
}
.footer__right .sites__head button {
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0;
  border-bottom: 1px solid #fff;
  font-size: 0.9375rem;
}
.footer__right ul.sites__list.is-active {
  /* height: inherit; */
  max-height: 180px;
  transition: all 0.3s ease;
}
.footer__right ul.sites__list {
  background-color: var(--bg-900);
  overflow: hidden;
  position: absolute;
  top: 50px;   /* absolute 위치값 px 유지 */
  left: 0;
  width: 100%;
  max-height: 0;
  transition: all 0.3s ease;
}
.footer__right li.sites__link:hover {
  background-color: #ffffff50;
}
.footer__right li.sites__link a {
  padding: 0.75rem 0.375rem;
  width: 100%;
  display: block;
}
.footer__bottom ul.sns__list.mobile {display: none;}
.footer__bottom {
  border-top: 1px solid var(--fc-natural-300);
  padding-top: 2rem;
}
.footer__bottom .inner {
  width: 1200px;
  justify-content: space-between;
}
.footer__bottom p {
  color: var(--fc-natural-400);
  font-size: 0.875rem;
}
.footer__gnb {
  gap: var(--gap-2);
  color: var(--fc-natural-100);
  font-size: 0.9375rem;
}

.section {padding: 10.5rem 0; overflow: hidden;}
.section svg {float: right;}
.section svg.arrow {
  width: 24px;
  height: 24px;
}
.section svg.icon {
  width: 50px;
  height: 50px;
}
.section.section--summary svg.icon {
  width: 40px;
  height: 40px;
}
.section__header {
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
  text-align: center;
}
.product-detail svg.logo {
  float: none;
  width: 100px;
  height: 30px;
  color: var(--dmove-500);
  margin-bottom: 2rem;
}
.product-detail .section--banner svg.logo {
  width: 200px;
  color: var(--dmove-50);
  margin-bottom: 0;
  margin: 0 auto;
}
.product-detail .productGrid__label svg.logo {
  width: 60px;
  margin-bottom: 0;
}
/* ---------------------------------- */

/* ----- Landing ----- */
.landing .section--hero {
  position: relative;
  padding: 0;
  width: 100%;
  height: 100vh;
}
/* 히어로 도트: 전체 폭은 absolute, 실제 위치는 .inner와 동일 그리드 */
.heroSlide__pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;   /* absolute 위치값 px 유지 */
  pointer-events: none;
}
.heroSlide__pagination .inner {
  height: auto;
  min-height: 0;
  pointer-events: auto;
}

/* Slick Slider */
.heroSlide {height: inherit;}
.heroSlide .slick-list,
.heroSlide .slick-track {height: 100%;}
.heroSlide .slide {height: inherit;}
.heroSlide .slide1 {
  background-image: url("../img/main/main-heroSlide-1.webp");
  background-size: cover;
  color: var(--fc-light);
}
.heroSlide .slide .inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.heroSlide .slide .inner a { 
  align-self: flex-start;
}
.heroSlide .slide button {
  font-size: 1.125rem;
}
.heroSlide .slide1 h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: var(--line-ht-1);
}
.heroSlide .slide1 h5 {
  font-size: var(--fs-h5);
  margin: 2rem 0;
}
.heroSlide .slide1 p {
  font-size: var(--fs-p);
  max-width: 620px;
}
.heroSlide .slide2 {
  background-image: url("../img/main/main-heroSlide-2.webp");
  background-size: cover;
  color: var(--fc-light);
}
.heroSlide .slide2 h2 {
  font-size: var(--fs-h2);
  line-height: var(--line-ht-1);
}
.heroSlide .slide2 ul.bg-image {
  width: 40%;
  margin-left: auto;
}
.heroSlide .slide3 {
  background-image: url("../img/main/main-heroSlide-3.webp");
  background-size: cover;
  color: var(--fc-dark);
}
.heroSlide .slide3 h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: var(--line-ht-1);
  color: #fff;
}
.heroSlide .slide3 p {
  font-size: var(--fs-p);
  margin: 2rem 0;
  max-width: 620px;
  color: #fff;
}

.heroSlide__pagination .slick-dots {
  position: static;
  display: flex !important;
  gap: 1rem;
  align-items: center;
}
.heroSlide__pagination .slick-dots li {
  margin: 0;
  opacity: .5;
  display: flex;
  align-items: center;
  color: #fff;
  cursor: pointer;
}
.heroSlide__pagination .slick-dots li.slick-active {
  opacity: 1;
}
.heroSlide__pagination .progress__bar {
  position: relative;
  width: 80px;
  height: 3px;
  background-color: #ffffff80;
  overflow: hidden;
  margin: 0 1rem;
}
.heroSlide__pagination .progress__fill {
  position: absolute;
  inset: 0;
  display: block;
  height: 100%;
  background-color: #fff;
}
.heroSlide__pagination .slick-dots li.slick-active .progress__fill {
  animation: progressBar var(--hero-autoplay-ms, 4500ms) linear forwards;
}
@keyframes progressBar {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

/* ----- Strategic Technology Solution ----- */
.partnerToggle {
  width: 100%;
  gap: var(--gap-6);
  align-items: flex-start;
}
.partnerToggle ul.toggleBox {
  width: 50%;
  border-top: 1px solid transparent;
  border-bottom: 1px solid var(--bg-300);
}
.partnerToggle ul.toggleBox .header {
  justify-content: space-between;
  border-top: 1px solid var(--bg-300);
}
.partnerToggle li.toggleBox__item {cursor: pointer;}
.partnerToggle li.toggleBox__item:last-of-type .header {
  border-bottom: 1px solid transparent;
}
.partnerToggle ul.toggleBox .header h1 {
  display: flex;
  align-items: center;
  gap: var(--gap-1);
}
.partnerToggle ul.toggleBox .header h1 img {
  width: 30px;
  height: 30px;
}
.partnerToggle ul.toggleBox .header {
  padding: 0.625rem 1.875rem;
}
.partnerToggle ul.toggleBox .contents {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 0.35s ease, visibility 0s linear 0.35s;
}
.partnerToggle li.toggleBox__item.open .contents {
  max-height: 600px;
  visibility: visible;
  transition: max-height 0.35s ease, visibility 0s linear 0;
}
.partnerToggle ul.toggleBox .contents__inner {
  padding: 0.625rem 1.875rem;
}
.partnerToggle ul.toggleBox .contents p {width: 90%; color: var(--fc-natural-300);}
.partnerToggle ul.toggleBox .contents button {margin-top: 1.25rem;}
.partnerToggle ul.toggleBox .header button {
  width: 50px;
  height: 50px;
}
.partnerToggle ul.toggleImage {
  width: 50%;
  min-height: 420px;
  position: relative;
  flex-shrink: 0;
  transition: none;
}
.partnerToggle li.toggleImage__item {
  position: absolute;
  inset: 0;
  border: 1px solid var(--bg-300);
  border-radius: var(--radius-2);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.partnerToggle li.toggleImage__item.image--active {
  opacity: 1;
  pointer-events: auto;
}
.partnerToggle li.toggleImage__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-2);
}
.partnerToggle li.toggleImage__item.mattermost img {
  object-fit: contain;
  scale: .8;
}
.partnerToggle .toggleBtn {
  display: flex;
  justify-content: center;
  align-items: center;
}
.partnerToggle .toggleBtn .icon {
  width: 40px;
  height: 40px;
}
.partnerToggle .icon--active {
  display: none;
}
.partnerToggle li.toggleBox__item.open .icon--default {
  display: none;
}
.partnerToggle li.toggleBox__item.open .icon--active {
  display: block;
}
.partnerToggle ul.toggleBox .contents__inner .toggleBox__btn {
  display: inline-block;
  margin-top: 1rem;
}

/* ----- Number Box ----- */
.section--number {
  background: linear-gradient(#fff,#F0F2F6);
}
.numberBox ul.numberBox__list {
  width: 100%;
  justify-content: space-between;
  gap: var(--gap-4);
}
.numberBox ul.numberBox__list li {
  width: 100%;
  background-color: var(--fc-light);
  padding: 3.75rem 1.25rem;
  text-align: center;
  border-radius: var(--radius-4);
}
.numberBox ul.numberBox__list li div {
  font-size: var(--fs-h1);
  font-weight: bold;
  color: var(--dmove-500);
}
.numberBox ul.numberBox__list li span {
  color: var(--fc-natural-300);
}

/* Our Solution */
.section--solution .headerBox {
  justify-content: space-between;
  align-items: flex-end;
}
.solution-header {
  text-align: start;
  gap: var(--gap-2);
}
.solution-body {width: 100%;}
.solution-body .b-flex {
  width: 100%;
  gap: var(--gap-4);
}
.solution-body .solutionBox {
  background-color: #F2F8F8;
  padding: 2.5rem;
  border-radius: var(--radius-4);
  position: relative;
  height: 100%;
}
.solution-body .left,
.solution-body .right {
  width: 100%;
  position: relative;
}
/* ------------------------------- */
/* mask hack: 내부 px 값은 mask 계산용 → 변경 금지 */
.solutionBox {
  --r: 20px; /* the radius */
  --s: 30px; /* size of inner curve */
  --x: 20px; /* horizontal offset (no percentage) */
  --y: 10px; /* vertical offset (no percentage) */

  border-radius: var(--r);
  --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
  --_g:conic-gradient(at calc(100% - var(--r)) var(--r),#0000 25%,#000 0);
  --_d:(var(--s) + var(--r));
  mask:
  calc(100% - var(--_d) - var(--x)) 0 var(--_m),
  100% calc(var(--_d) + var(--y)) var(--_m),
  radial-gradient(var(--s) at 100% 0,#0000 99%,#000 calc(100% + 1px))
  calc(-1*var(--r) - var(--x)) calc(var(--r) + var(--y)),
  var(--_g) calc(-1*var(--_d) - var(--x)) 0,
  var(--_g) 0 calc(var(--_d) + var(--y));
  mask-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}
/* ------------------------------- */
.solution-body .solutionBox h1 {
  width: 70px;
  height: 70px;
}
.solution-body .solutionBox p {
  margin-bottom: 1rem;
  font-size: var(--fs-p);
  font-weight: 600;
}
.solution-body .solutionBox_p p {
  min-height: 70px;
  display: flex;
  align-items: center;
}
.solution-body .solutionBox span {
  display: inline-block;
  font-size: var(--fs-span);
  color: var(--fc-natural-300);
  max-width: 420px;
}
.solution-body .btntype-round {
  display: block;
  position: absolute;
  top: 0;
  right: 7px;   /* absolute 위치값 px 유지 */
  width: 55px;
  height: 55px;
  border-radius: var(--radius-5);
  border: 1px solid var(--bg-300);
  background: #fff;
  color: var(--bg-300);
  z-index: 2;
  display: flex;
  align-items: center;
}
.solution-body .btntype-round svg {
  margin: 0 auto;
}
.solution-body .btntype-round svg path {
  transform: scale(1.2);
  transform-origin: center;
  transition: transform 0.35s ease;
}
.solution-body .btntype-round .arrow2 {
  transform: translateX(-120%);
}
.hoverBox:hover .btntype-round {
  border: 1px solid #21ADAD;
  background: #21ADAD;
  color: var(--fc-light);
}
.hoverBox:hover .arrow1 {
  transform: translateX(120%);
}
.hoverBox:hover .arrow2 {
  transform: translateX(0) scale(1.2);
}

/* ----- CTA ----- */
.section--cta {
  background: linear-gradient(45deg, #D9EDED,#C4DFDF);
}
.section--cta .ctaBox {
  justify-content: space-between;
  gap: var(--gap-4);
}
.section--cta .ctaBox p {
  font-size: var(--fs-span);
}
.section--cta .ctaBtnBox {
  width: 50%;;
  gap: var(--gap-2);
}
.section--cta .ctaBtnBox a {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-2);
  border-radius: var(--radius-2);
  background-color: var(--dmove-400);
  color: #fff;
  cursor: pointer;
}
.section--cta .ctaBtnBox a:last-child {
  background-color: var(--fc-light);
  color: #0b0b0b;
}
.section--cta .ctaBtnBox a img{
  width: 60px;
  height: 60px;
}
.section--cta .ctaBtnBox a.cta-1:hover {
  color: var(--dmove-800);
}
.section--cta .ctaBtnBox a.cta-2:hover {
  color: var(--dmove-400);
}

/* ----- Certification · Competency ----- */
.section--partnership {background-color: #F1F5F8;}
.section--partnership .partnerSlider {
  display: flex;
  justify-content: center;
}
.partnerSlider ul.partnerSlider__list {
  justify-content: center;
  gap: var(--gap-2);
  padding: 0.375rem;
  background-color: var(--fc-light);
  border-radius: 50px;   /* pill 형태 유지 */
  box-shadow: var(--box-shadow-dark);
}
.partnerSlider li.partnerSlider__item {
  padding: 0.75rem 1.875rem;
  cursor: pointer;
}
.partnerSlider li.partnerSlider__item.active {
  border-radius: var(--radius-4);
  background-color: var(--dmove-400);
  color: var(--fc-light);
}
.partnerBox ul.partnerBox__list{
  background-color: var(--fc-light);
  border-radius: 50px;   /* pill 형태 유지 */
  padding: 5rem;
  box-sizing: border-box;
}
.partnerBox li.partnerBox__item > div {
  justify-content: center;
  height: 150px;
  gap: var(--gap-4);
}
.partnerBox li.partnerBox__item > div span {
  height: 100%;
}
.partnerBox li.partnerBox__item > div img {
  height: 100%;
}
.partnerBox li.partnerBox__item p {
  min-height: 110px;
  text-align: center;
}
.partnerBox li.partnerBox__item {
  max-height: 320px;
  display: none;
}
.partnerBox li.partnerBox__item.is-active {
  display: block;
}
li.partnerBox__item.zabbix img{
  width: 80%;
  object-fit: contain;
  margin: 0 auto;
}

/* ----- Press ----- */
.section--press .pressHeader {
  justify-content: space-between;
  align-items: flex-end;
}
.pressBox ul.pressBox__list {
  gap: var(--gap-2);
}
.pressBox li.pressBox__item {
  cursor: pointer;
  flex: 1;
}
.pressBox li.pressBox__item:hover .press-date {
  color: var(--dmove-400);
}
.pressBox li.pressBox__item:hover .press-thumb img {scale: 1.05;}
.pressBox .press-date {
  color: var(--fc-natural-100);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 2;
}
.pressBox .press-desc {
  padding-top: 1rem;
  border-top: 1px solid var(--bg-300);
  min-height: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pressBox .press-thumb {
  border-radius: var(--radius-2);
  overflow: hidden;
  width: 100%;
  height: 200px;
}
.pressBox .press-thumb img {
  border-radius: var(--radius-2);
  transition: scale 0.5s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ----- Footer CTA ----- */
.section--foot-cta {
  background-image: url("../img/main-cta-bg-1.png");
  background-position: 50% 70%;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}
.section--foot-cta h3 {
  color: var(--fc-light);
}
.section--foot-cta .heroSlide__btn {
  color: #fff;
  align-self: center;
}

/* --------------- PC/Mobile --------------- */
.section--diagram__panel {display: block;}
.section--diagram__panel2 {display: none;}

/* --------------- 그래픽 Asset 모음 --------------- */
.mock {
  width: 100%;
  height: 100%;
  min-height: 250px;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
/* Overview + bg */
.solution-detail .section--hero {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* Responsive: .solution-detail hero 모바일 조정은 파일 하단 Responsive refinement로 통합됨 */
.section-pm .section--hero {
  background-image: url(/img/sub/solution/pm-hero-bg.jpg);
}
.section-itsm .section--hero {
  background-image: url(/img/sub/solution/itsm-hero-bg.jpg);
}
.section-monitor .section--hero {
  background-image: url(/img/sub/solution/monitoring-hero-bg.jpg);
}
.section-com .section--hero {
  background-image: url(/img/sub/solution/communication-hero-bg.jpg);
}
.section-ida .section--hero {
  background-image: url(/img/sub/solution/iam-hero-bg.jpg);
}
.section-devops .section--hero {
  background-image: url(/img/sub/solution/devops-hero-bg.jpg);
}
.section-ai .section--hero {
  background-image: url(/img/sub/solution/ai-hero-bg.jpg);
}
.section-data .section--hero {
  background-image: url(/img/sub/solution/data-hero-bg.jpg);
}

.section-zabbix .section--why {
  background-image: url(/img/sub/solution/zabbix-why-bg.webp);
  color: var(--fc-light);
}
/* 2Depths */
/* .section-pmj .sub-hero__visual .mock {
  scale: 1.3;
} */

/* -------- Responsive refinement -------- */
@media (max-width: 1280px) {
  .section {
    padding: 8.25rem 0;
  }
  .partnerToggle ul.toggleImage {
    min-height: 360px;
  }
}

@media (max-width: 1024px) {
  header {
    height: 76px;
  }
  header .inner {
    height: 76px;
  }
  nav.gnb {
    display: none;
  }
  header nav.gnb-full {
    top: 76px;   /* absolute 위치값 px 유지 */
  }
  nav.gnb-full ul.depth_2 ul.depth_3 {
    gap: 0;
  }
  .section {
    padding: 6.75rem 0;
  }
  .section--cta .ctaBox,
  .footer__top,
  .partnerToggle,
  .footer__bottom .inner {
    flex-direction: column;
  }
  .partnerToggle ul.toggleBox,
  .partnerToggle ul.toggleImage,
  .section--cta .ctaBtnBox {
    width: 100%;
    min-height: 300px;
  }
  .partnerToggle {
    gap: var(--gap-2);
  }
  .partnerToggle ul.toggleBox {
    border-bottom: transparent;
  }
  .partnerToggle li.toggleImage__item {
    border: transparent;
  }
  .partnerToggle li.toggleImage__item img {
    object-fit: contain;
  }
  .landing .section--hero {
    height: 50vh;
  }
  .numberBox ul.numberBox__list li {
    padding: 1.875rem 0;
  }
  .headerBox > a, .pressHeader > a {
    font-size: var(--fs-p);
  }
  .solution-body .solutionBox {
    flex-direction: column;
  }
  .solution-body .solutionBox h1 {
    display: none;
  }
  .solution-body .solutionBox p {
    font-size: var(--fs-h5);
  }
  .solution-body .solutionBox span {
    font-size: var(--fs-p);
    text-wrap: auto;
  }
  .section--cta .ctaBtnBox a {
    padding: 2rem 0;
  }
  .section--partnership .partnerSlider {
    display: flex;
  }
  .partnerSlider ul.partnerSlider__list {
    justify-content: center;
    gap: 2px;
  }
  .partnerSlider li.partnerSlider__item {
    padding: 0.25rem 0.75rem;
  }
  .partnerBox li.partnerBox__item > div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: unset;
    gap: var(--gap-2);
  }
  .partnerBox li.partnerBox__item > div img {
    height: 100%;
    object-fit: contain;
  }
  .partnerBox li.partnerBox__item {
    max-height: unset;
  }
  .section--press .pressHeader {
    align-items: center;
  }
  .section--press .pressHeader a {
    display: flex;
    align-items: center;
  }
  .pressBox .press-desc {
    font-size: var(--fs-p);
    border-top: unset;
    min-height: unset;
    padding-top: 0;
  }
  .footer__top {
    padding-bottom: 3rem;
  }
  .footer__top > .b-flex {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer__info p {
    font-size: var(--fs-span);
  }
  .footer__btn .button {
    padding: 0.75rem 1.5rem;
    margin: 1.5rem 0;
  }
  .footer__right {
    flex-direction: row;
  }
  .footer__right .sites__head button {
    gap: var(--gap-4);
    padding: 0.75rem 1rem;
  }
  .footer__bottom {
    padding-top: 3rem;
  }
  .footer__bottom .inner{
    flex-direction: column-reverse;
    gap: var(--gap-1);
  }
}

@media (max-width: 768px) {
  /* Diagram: PC panel hide → 모바일 panel2(simple grid) 표시 */
  /* .partnerBox li.partnerBox__item:first-child > div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: unset;
    gap: var(--gap-2);
  } */
  .section--diagram__panel {display: none;}
  .section--diagram__panel2 {
    display: grid;
    gap: var(--gap-3);
  }
  .section--diagram__panel2 .sub-hero__visual {
    display: block !important;
    width: 100% !important;
    max-width: 420px;
    margin: 0 auto;
  }
  .section--diagram__panel2 .section--diagram__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-3);
  }
  .section--diagram__panel2 .section--diagram__list li {
    background-color: var(--dmove-50);
    border-radius: var(--radius-2);
    padding: 1rem 0.875rem;
    text-align: left;
  }
  .section--diagram__panel2 .section--diagram__list li:nth-of-type(2n+2) p,
  .section--diagram__panel2 .section--diagram__list li:nth-of-type(2n+2) span {
    margin-bottom: 0.5rem;
  }
  .solution-detail .section--hero {
    background-size: 300%;
    background-position: left bottom;
    background-repeat: no-repeat;
  }
  /* .solution-detail .sub-hero {
    padding-bottom: 4rem;
  } */
  .solution-detail .main .sub-hero__content {
    max-width: 80%;
  }
  .solution-detail .overview .sub-hero__visual {
    display: none;
  }
  .landing .section--hero {
    height: 80vh;
  }
  .heroSlide .slide .inner a {
    margin-top: 2rem;
  }
  .heroSlide .slide1 {background-position-x: center;}
  .heroSlide .slide3 {
    background-image: url(../img/main/main-heroSlide-3-mobile.webp);
    background-position-x: left;
  }
  .partnerToggle ul.toggleBox .header {
    padding: 0.625rem 0;
  }
  .partnerToggle ul.toggleBox .header h1 {
    font-size: 1.5rem;
    gap: var(--gap-3);
  }
  .partnerToggle li.toggleImage__item {
    inset: unset;
  }
  .numberBox ul.numberBox__list li div {
    font-size: 2.5rem;
  }
  .section--solution .headerBox {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-4);
    text-wrap: auto;
  }
  .section--solution .headerBox a {
    display: flex;
    align-items: center;
  }
  .productGrid {
    grid-template-columns: 1fr;
  }
  .pressBox {margin-top: 1.5rem;}
  .pressBox ul.pressBox__list,
  .numberBox ul.numberBox__list,
  .solution-body .b-flex {
    flex-direction: column;
  }
  .solution-body .solutionBox {
    padding: 1.5rem;
    flex-direction: row;
  }
  .numberBox ul.numberBox__list li span {
    font-size: var(--fs-h5);
  }
  .solution-body .solutionBox p {
    font-size: var(--fs-h3);
    margin-bottom: 0.5rem;
    font-weight: 700;
  }
  .partnerBox ul.partnerBox__list {
    padding: 2rem 1.25rem;
    border-radius: 1.5rem;
  }
  .section--cta .ctaBtnBox a {
    font-size: var(--fs-h5);
  }
  .section--cta .ctaBox p {
    font-size: var(--fs-p);
    text-wrap: auto;
  }
  .pressBox .press-desc {
    font-size: var(--fs-p);
    text-wrap: auto;
  }
  .footer__info {
    flex-direction: column;
    margin-left: 0;
  }
  .footer__info p {
    margin-left: 0;
  }
  .footer__btn {
    display: flex;
    gap: var(--gap-2);
  }
  .footer__btn .button {
    width: 50%;
    font-size: var(--fs-span);
  }
  .footer__btn .button:last-of-type {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    margin-left: 0;
  }
  .footer__btn svg {
    margin-left: 0;
  }
  .footer__right {
    flex-direction: column;
    gap: var(--radius-4);
  }
  .footer__right ul.sns__list {
    display: none;
  }
  .footer__bottom ul.sns__list.mobile {
    display: flex;
    justify-content: center;
    gap: var(--gap-4);
    margin-top: 2rem;
  }
  .footer__bottom ul.sns__list li {
    width: 25px;
    height: 25px;
  }
  .footer__bottom ul.sns__list li img {
    width: 100%;
  }
  .footer__right .sites__head button {
    font-size: var(--fs-span);
  }
  .footer__bottom {
    border: 0;
    padding-top: 2rem;
  }
  .footer__bottom .inner {
    gap: var(--gap-4);
    align-items: center;
  }
  .footer__gnb {
    flex-direction: column;
    align-items: center;
    font-size: var(--fs-p);
  }
  /* GBN Full */
  body.modal-open header {padding-right: 0;}
  header nav.gnb-full .b-grid {
    display: block;
    margin-left: 2rem;
  }
  header nav.gnb-full .b-grid > li {
    display: block;
    position: relative;
  }
  header nav.gnb-full .gnb-full-mobile-head {
    display: none;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0 0.875rem;
  }
  header nav.gnb-full .gnb-full-mobile-head.is-visible {
    display: flex;
  }
  header nav.gnb-full .gnb-full-mobile-back {
    border-radius: 999px;   /* pill 형태 유지 */
    color: var(--dmove-600);
    font-size: 2rem;
    line-height: 1.6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-1);
  }
  header nav.gnb-full .gnb-full-mobile-back svg {
    width: 32px;
    height: 32px;
    margin-left: var(--gap-1);
  }
  header nav.gnb-full .gnb-full-mobile-title-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--dmove-600);
  }
  header nav.gnb-full .gnb-full-mobile-title-link[aria-disabled="true"] {
    pointer-events: none;
    cursor: default;
  }
  header nav.gnb-full .gnb-full-mobile-title {
    font-size: var(--fs-h4);
    font-weight: 700;
    color: inherit;
  }
  nav.gnb-full > ul > li > a {
    margin: 1rem 0;
    min-width: auto;
    padding: 0.5rem 0;
    font-size: var(--fs-h4);
    padding-bottom: 0;
  }
  nav.gnb-full ul.depth_2 {
    margin-top: 0;   
    position: static;
    top: auto;
    left: auto;
    font-size: var(--fs-p);
    color: var(--fc-dark);
    display: none;
  }
  nav.gnb-full ul.depth_2 ul.depth_3 {
    position: static;
    left: auto;
    display: none;
    margin-top: 0.5rem;
    gap: 0;
  }
  nav.gnb-full ul.depth_2 li {padding: 0;}
  header nav.gnb-full.is-depth2 .b-grid > li {
    display: none;
  }
  header nav.gnb-full.is-depth2 .b-grid > li.is-open {
    display: block;
  }
  header nav.gnb-full.is-depth2 .b-grid > li.is-open > a {
    display: none;
  }
  header nav.gnb-full.is-depth2 .b-grid > li.is-open > ul.depth_2 {
    display: block;
  }
  header nav.gnb-full.is-depth2 .b-grid > li.is-open > ul.depth_2 > li > a {
    display: block;
    padding: 0.5rem 0;
    font-size: var(--fs-h4);
    font-weight: bold;
  }
  header nav.gnb-full.is-depth3 .b-grid > li {
    display: none;
  }
  header nav.gnb-full.is-depth3 .b-grid > li.is-open {
    display: block;
  }
  header nav.gnb-full.is-depth3 .b-grid > li.is-open > a {
    display: none;
  }
  header nav.gnb-full.is-depth3 .b-grid > li.is-open > ul.depth_2 {
    display: block;
  }
  header nav.gnb-full.is-depth3 .b-grid > li.is-open > ul.depth_2 > li {
    display: none;
  }
  header nav.gnb-full.is-depth3 .b-grid > li.is-open > ul.depth_2 > li.is-open3 {
    display: block;
  }
  header nav.gnb-full.is-depth3 .b-grid > li.is-open > ul.depth_2 > li.is-open3 > a {
    display: none;
  }
  header nav.gnb-full.is-depth3 .b-grid > li.is-open > ul.depth_2 > li.is-open3 > ul.depth_3 {
    display: block;
    width: 100%;
  }
  header nav.gnb-full.is-depth3 .b-grid > li.is-open > ul.depth_2 > li.is-open3 > ul.depth_3 > li > a {
    display: block;
    padding: 0.5rem 0;
    font-size: var(--fs-h4);
    font-weight: bold;
  }
}

@media (max-width: 480px) {
  .inner {padding: 0 1rem;}
  .section--cta .ctaBtnBox {
    margin-top: 1rem;
    min-height: 0;
  }
}