:root{
  --gnbH: 80px; 
  --point: #0e96e7;  
}
#hdwc{position:absolute; top:0; left:0; z-index:9999; width:100%; -moz-transition: all 0.2s ease-out;-o-transition: all 0.2s ease-out;transition: all 0.2s ease-out;}
#hdwc .hewc-wr{width:100%; /*max-width:1280px;*/ padding:0px 40px; margin:30px auto; display:flex; justify-content:space-between; }
#hdwc .lan{ max-width:1280px; width:100%; margin:0 auto; text-align:right;font-size:.9rem; padding:5px 0 5px 0; /*background:url('/resource/user/ko/img/lan_icon.png') no-repeat center right 150px;*/ position:absolute; top:10px;  }
#hdwc .lan a{color:#fff; font-weight:400; display:inline-block; letter-spacing:1px;}
#hdwc .lan a{position:relative;  padding-left:5px; opacity:0.7;}
#hdwc .lan a.active{opacity:1;  padding: 0 8px; border: 1px solid #fff; border-radius: 30px; font-size: .9em;}

#hdwc .pc-logo{ display:block; }
#hdwc .mobile-logo{ display:none; }

#hdwc #pc-logow { display:block; }
#hdwc #mobile-logow { display:none; }
#hdwc #pc-logob { display:none; }
#hdwc #mobile-logob { display:none; }
#hdwc #pc-logow.light { display:none; }
#hdwc #mobile-logow.light { display:none; }
#hdwc #pc-logob.light { display:block; }
#hdwc #mobile-logob.light { display:none; }

#hdwc.on #pc-logow { display:none; }
#hdwc.on #mobile-logow { display:none; }
#hdwc.on #pc-logob { display:block; }
#hdwc.on #mobile-logob { display:none; }

#hdwc a.logo {display: inline-block; margin-top:-5px;}
#hdwc a.logo img {height:40px;}
#hdwc .nav{overflow:hidden; float:right; margin: 0px 0 0; font-size:1rem;}
#hdwc .nav li > a { -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);}
#hdwc .mobile-logo{display:none;}
#hdwc .nav ul{overflow:hidden; padding-top:5px; display:flex; justify-content:center;}
#hdwc .nav ul li{float:left; line-height:26px; /*width:130px;*/ margin:0 30px;}
#hdwc .nav ul li a{color:#fff; display:block; font-size:1.3rem; font-weight:600; text-align:center; padding:0; padding-bottom:12px;} 
#hdwc .nav.light ul li a{color:#000;} 
#hdwc .nav ul li dl {display:none;}
#hdwc .nav .menu-btn{  display: inline-block; padding-left:20px; cursor:pointer; padding: 3px 0; width:40px;}
#hdwc .nav .menu-btn span{display:block; width:38px; height:2px; background:#ffffff; float:right; transition:all .5s;}
#hdwc .nav.light .menu-btn span{background:#000;}
#hdwc .nav .menu-btn span.center{margin:10px 0; width:25px;}
#hdwc .nav .menu-btn:hover span{width:25px;}
#hdwc .nav .menu-btn:hover span.center{width:38px;}
#hdwc .menu .menu-close{position:absolute; top:45px; right:50px; padding:20px; cursor:pointer; transition: transform 700ms cubic-bezier(0.86, 0, 0.07, 1);transform: rotate(0deg);}
#hdwc .menu .menu-close:hover{ transition: transform 400ms cubic-bezier(0.86, 0, 0.07, 1); transform: rotate(180deg);}
#hdwc .menu .menu-close img{vertical-align:middle;}
#hdwc .menu .menu-on{	width:100%;	max-width:1200px;	height:100%;	position:fixed;	right:-100%;	top:0;	background:#fff;z-index:9;}
#hdwc .menu .mak{position:fixed; width:100%; height:100%; right:0; top:0; display:none; background:rgba(0,0,0,0.6); z-index:8;  }
#hdwc .menu .menu-category .logo{display:none;}
#hdwc .menu .menu-category{	position: absolute; padding:0 100px; width: 100%; top: 50%; left: 0; transform: translate(0,-50%); transform: -ms-translate(0,-50%);box-sizing:border-box;}
#hdwc .menu .menu-category ul{overflow:hidden; width:100%; box-sizing: border-box;  border-bottom:1px solid #e9e9e9; padding:20px 0;}
#hdwc .menu .menu-category ul ul{border:0; padding:0; }
#hdwc .menu .menu-category ul h1{color:#000; font-weight:500; font-size:1.5rem; margin: 0 0 5px;}
#hdwc .menu .menu-category ul h1 > a {color:#000 !important;}
#hdwc .menu .menu-category ul li{display:inline-block; margin:5px 0; font-size:1.1rem;}
#hdwc .menu .menu-category ul li a{color:#000; margin-right:15px;   font-weight:300;}
#hdwc .menu .menu-category ul li a:hover{color:#0e96e7}
#hdwc .menu .menu-category ul span.line{display:inline-block; width:1px; height:5px; background:#aaa; margin:0 10px;}
#hdwc .menu .menu-category .company-ca a{font-size:.9em; color:#999; font-weight:300; }
#hdwc .menu .menu-category .company-ca .l-line{display:inline-block; width:1px; height:13px; vertical-align:middle; background:#999; margin:0 10px;}
#hdwc .menu .menu-category ul h1.green-t{color:#0e96e7}
#hdwc .hdsabo {display:none;}

#hdwc.on {padding-bottom:0px;box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);}
#hdwc.on .lan a{color:#151515;}
#hdwc.on .lan a.active{border: 1px solid #151515;}
#hdwc.on .nav ul li a{color:#151515; }
#hdwc .nav ul li.active a{}
#hdwc.on .nav ul li .wcnvbar {width:100%; height:3px; background:#dddddd; margin:10px 0 15px;}
#hdwc.on .nav ul li:hover .wcnvbar { background:#0e96e7;}
#hdwc.on .nav ul li dl {width:100%; display:inline-block; margin-top:25px; }
#hdwc.on .nav ul li dl dt { line-height:2.3rem; text-align:center;}
#hdwc.on .nav ul li dl dt a {color:#333; padding:0;font-size:1rem; font-weight:500; color:#777; transition:color 0.8s ease; position: relative; display:inline-block; margin:0 auto;}  
#hdwc.on .nav ul li dl dt a::after, #hdwc .nav ul li dl dt.on a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: #0e96e7;  
  height: 3px;
  bottom: 0px;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s ease;
}
#hdwc.on .nav ul li dl dt a:hover, #hdwc .nav ul li dl dt.active a {color:#0e96e7; /*text-decoration:underline !important; text-underline-offset:5px;*/}
#hdwc.on .nav ul li dl dt a:hover::after, #hdwc .nav ul li dl dt.active a::after {
  transform: scaleY(1);
}
#hdwc.on .nav .menu-btn span{background:#151515;}






/* =========================
   Mega Menu (ver.2)
   ========================= */

#hdwc{ position:absolute; }
#hdwc .hewc-wr{ position:relative; }
#gnbNav{
  overflow: visible;
}

#gnbNav .mega-wrap{
  display:none;
  position:absolute;
  left:0;
  top:-30px; 
  width:100%;
  background:#fff;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  z-index: -1;  
  height:0;
  overflow:hidden;
  transition: height 320ms ease, opacity 200ms ease;
  opacity:0;
}
#hdwc.on #gnbNav .mega-wrap{
  display:block;
  opacity:1;
}
#gnbNav .mega-inner{
  width: min(1000px, calc(100% - 80px));
  margin: 0 auto;
  padding: calc(var(--gnbH)) 0 30px;
  box-sizing: border-box;
}
#gnbNav .mega-panel{ display:none; min-height:450px;}
#gnbNav .mega-panel.is-open{ display:flex;}
#gnbNav .mega-grid{
  display:flex;
  flex-direction:column;
  gap: 56px;
  align-items:flex-start;
  padding-top:65px;
  padding-bottom:65px;
}
#gnbNav .mega-grid.infra {  gap: 36px;}
#gnbNav .mega-col{
  min-width: 200px;
}
#gnbNav .mega-h{
  font-size: 1.1rem;
  font-weight: 800;
  color:#111;
  margin-bottom: 12px;
}
#gnbNav .mega-link{
  display:block;
  padding: 6px 0;
  font-size: 1rem;
  font-weight: 500;
  color:#666;
  text-align:left;
}
#gnbNav .mega-link:hover,
#gnbNav .mega-link.is-active{
  color:#0e96e7;
}
#gnbNav .mega-visual{
  min-width: 320px;
}
#gnbNav .mega-badge{
  font-size: 1rem;
  letter-spacing: .01em;
  color:#0e96e7;
  font-weight: 600;
  margin-bottom: 5px;
}
#gnbNav .mega-title{
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.35;
  color:#111;
  margin-bottom: 5px;
}

#gnbNav .mega-desc{
  font-size: 1rem;
  color:#777;
  line-height: 1.6;
}

  .gnb-item a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;           
    height: 3px;          
    background-color: #0e96e7;
    transition: width 0.3s ease-in-out; 
  }
  .gnb-item:hover a::after, .gnb-item.on a::after {
  width: 100%;
}



/* wrapper */
.mega-thumbmenu{
}

/* list grid */
#hdwc .nav ul.thumbmenu-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}
#hdwc .nav ul.thumbmenu-list.infra{
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 5px;
  align-items: start;
  padding: 0;          /* 기존 ul 패딩 있으면 제거/조정 */
  margin: 0;
  list-style: none;
}
#hdwc .nav ul.thumbmenu-list.cloud{
  grid-template-columns: repeat(2, 1fr);
}
#hdwc .nav ul li.thumbmenu-group-title{
	float:none;
	line-height:inherit;
	margin-right:inherit;
}
/* 구분 타이틀(서브타이틀) */
ul.thumbmenu-list.infra > li.thumbmenu-group-title{
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0em;
  color: #777;
  line-height: 1;
  padding: 0 0 6px;
  margin: 0;
}

/* 첫 번째 타이틀: 솔루션(1~3열 차지) */
ul.thumbmenu-list.infra > li.thumbmenu-group-title:nth-child(1){
  grid-column: 1 / span 3;
  text-align: left;
}

/* 두 번째 타이틀: 하드웨어(4열 차지) */
ul.thumbmenu-list.infra > li.thumbmenu-group-title:nth-child(2){
  grid-column: 4 / span 1;
  text-align: left;   /* 오른쪽 칼럼 시작점에 맞춤 (원하면 center로) */
}

/* 썸네일 아이템은 자동으로 1~4열에 채워지고 다음 줄로 내려감 */
ul.thumbmenu-list.infra > li.thumbmenu-item{
  margin: 0; /* flex 시절 margin 있으면 0으로 */
}
/* item */
.thumbmenu-item{
  min-width: 0;
}

.thumbmenu-link{
  display: block;
  text-decoration: none;
  color: inherit;

  border-radius: 14px;
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
/* thumbnail */
.thumbmenu-thumb{
  position: relative;
  width: 100%;
  height: auto;              /* 필요하면 값만 조절 */
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  background: #f6f7f9;
  overflow: hidden;
  border-radius: 10px;
}
/* 포인트 컬러 막 */
.thumbmenu-thumb::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--point);
  opacity: 0.8;                 /* 살짝 비침 */
  transform: translateY(100%);  /* 아래에서 대기 */
  transition: transform 260ms cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.thumbmenu-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform 320ms ease;
}
/* → 라인 아이콘 */
.thumbmenu-thumb::before{
  content: "";
  position: absolute;
  left: calc(50% - 25px);
  top: calc(50% - 25px);
  width: 50px;
  height: 50px;
  z-index: 1;
  background: url("/theme/basic/img/arrow-right.png") no-repeat center;
  background-size: contain;
  opacity: 0;
  transition: opacity 200ms ease;  /* ✅ fade-in only */
  pointer-events: none;
}

#hdwc .nav ul li.thumbmenu-item {
	width:auto;
	float:none;
	line-height:inherit;
	margin:0px;
}
#hdwc .nav ul li a.thumbmenu-link {
	padding: 0 5px;
	text-align:left;
	font-weight:inherit;
	border-radius:10px;
}
#hdwc.on .nav ul li dl {margin-top:15px;}
#hdwc.on .nav ul li dl dt {text-align:left;}

.thumbmenu-over{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 30%,
    rgba(0,0,0,0.55) 100%
  );
  opacity: 0;
  transition: opacity 240ms ease;
}

/* text */
.thumbmenu-text{
  margin: 10px 2px 0;
}

.thumbmenu-text dt{
  font-size: 0.9em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #111;
  margin-bottom: 4px;
  transition: color 200ms ease;
}
/* ===== Hover 효과 ===== */
.thumbmenu-link:hover .thumbmenu-thumb::after{
  transform: translateY(0);
}
.thumbmenu-link:hover .thumbmenu-thumb::before{
  opacity: 1;
}
.thumbmenu-link:hover .thumbmenu-text dt{
  color: var(--point);
}
.thumbmenu-text dd{
  margin: 0;
  font-size: 0.75em;
  line-height: 1.35;
  letter-spacing: -0.01em;
  word-break:auto-phrase;
  color: #666;
}

.thumbmenu-link:hover .thumbmenu-thumb img{
  transform: scale(1.06);
}

.thumbmenu-link:hover .thumbmenu-over{
  opacity: 1;
}

.thumbmenu-link:focus-visible{
  outline: 3px solid rgba(14, 150, 231, 0.35);
  outline-offset: 3px;
  border-radius: 16px;
}

#hdwc .nav ul li.thumbmenu-item.lg {display:flex; width:100%; gap:25px;}
#hdwc .nav ul li.thumbmenu-item.lg a.thumbmenu-thumb {height:initial;}
.thumbmenu-item.lg dl.thumbmenu-text {flex:0 0 50%;}


.thumbmenu-item.lg .thumbmenu-thumb {
    width: auto;
    height: auto;
}
.thumbmenu-item.lg .thumbmenu-text {margin:0px; font-size:1.3rem; width:160px;word-break:auto-phrase;}
.thumbmenu-item.lg .thumbmenu-text p:first-child {
  font-size: 0.9em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #111;
  margin-bottom: 4px;
  transition: color 200ms ease;
}
.thumbmenu-item.lg .thumbmenu-text p:nth-child(2) {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
}
.thumbmenu-item.lg .thumbmenu-text .desc-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#hdwc .nav ul li .desc-list a{
    font-size: 0.9rem;
    color: #666;
	text-align:left;
	font-weight:500;
	padding:0 5px;
}
#hdwc .nav ul li .desc-list a:hover{
    color: var(--point);
}





.sub-visual-wrapper {
	padding:8rem 0px 5rem 0;
    min-height: 350px;
}
.par {
	position:relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center; 
    background-attachment: scroll;
}
.sub-visual-wrapper.bg-smartecm {
    background-image: url('../img/subvisual_bg_smartecm.jpg');
    background-position: center;
}
.sub-visual-wrapper.bg-smartgcm {
    background-image: url('../img/subvisual_bg_smartgcm.jpg');
    background-position: center;
}
.sub-visual-wrapper.bg-wevisio {
    background-image: url('../img/subvisual_bg_wevisio.jpg');
    background-position: center;
}
.sub-visual-wrapper.bg-wemind {
    background-image: url('../img/subvisual_bg_wemind.jpg');
    background-position: center;
}
.sub-visual-wrapper.bg-dx {
    background-image: url('../img/subvisual_bg_dx2.jpg');
    background-position: center;
}
.sub-visual-wrapper.bg-service {
    background-image: url('../img/subvisual_bg_service.jpg');
    background-position: center;
}
.sub-visual-wrapper.bg-product {
    background-image: url('../img/subvisual_bg_product.jpg');
    background-position: center;
}
.sub-visual {max-width:1440px;padding-top:20px; margin:0 auto;}
.sub-visual > h1 {padding:50px 0px;}
.sub-visual > .tab-container {margin-top:70px;}
.sub-visual .sub-tt {margin-bottom:0.5rem;}
.sub-visual .sub-desc {font-size:1.2rem; color:#222;}
.sub-visual.dark .sub-tt,.sub-visual.dark .sub-desc {color:#fff;}


.sub-visual-wrapper.bg-smartecm .sub-visual {
    position: relative;
    z-index: 10;
}
.parallax-section {
  position: relative; 
  height: 400px;
  background-image: url('../img/sub_visual_1.jpg');
  background-size: cover; 
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  overflow: hidden;
}

.parallax-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: white;
  font-size: 28px;
  text-align: center;
  white-space: nowrap;
}
.overlay-text > h4 {
  color: white;
  font-weight: 500;
}

.sub-menu-wrapper {
  position: sticky;  
  top: 0;        
  z-index: 100;
}

.sub-menu {
  background: #fff;
  border-bottom: 1px solid #eee;
}

.sub-menu ul {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;   
  display: flex;
  justify-content: center;
  gap: 40px;
  list-style: none;
}

.sub-menu li {
  display: inline-block;
}

.sub-menu a {
  position: relative;
  display: inline-block;
  padding: 18px 0;  
  font-size: 1.2em;
  min-width:5rem;
  text-align:center;
  color: #666;
  font-weight:400;
  text-decoration: none;
  transition: color 0.25s ease;
}
.sub-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;   
  width: 100%;
  height: 3px;
  background: #0e96e7;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.sub-menu a:hover,
.sub-menu a.active {
  color: #0e96e7;
  font-weight:600;
}

.sub-menu a:hover::after,
.sub-menu a.active::after {
  opacity: 1;      
}

.footer-download-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}
.footer-download-wrap p {margin-bottom:0;}
.footer-download-left {
  max-width: 75%;
}

.footer-title a {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}

.footer-title a:hover {
  text-decoration: underline;
}

.footer-info,
.footer-contact {
  margin-top: 0.1rem;
  font-size: 0.85rem;
  color: #bbb;
  line-height: 1.6;
}

.footer-contact a {
  color: #bbb;
  text-decoration: none;
}

.footer-contact a:hover {
  text-decoration: underline;
}

.footer-download-right {
  text-align: right;
}



/* 반응형 */
@media (max-width: 1545px){
  .sub-visual-wrapper .sub-visual {margin:0 40px;}
}
@media (max-width: 1300px){
	#hdwc .nav ul li{margin:0 20px;}
}
@media (max-width: 1200px){
	#hdwc .nav ul li {margin:0 10px;}
	#hdwc .nav ul li a {font-size:1.2rem; padding:0 6px; padding-bottom:10px;}
  .thumbmenu-list{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (max-width:1000px){  
	.sub-visual-wrapper {
		padding:6rem 0px 2rem 0;
	}
  .sub-visual-wrapper .sub-visual {margin:inherit;}
  .sub-visual > .tab-container {margin-top:50px;}
  #hdwc .pc-logo{ display:none; }
  #hdwc .mobile-logo{ display:block; }

	#hdwc {padding:0 20px;}
	#hdwc .lan{top:38px; right:80px; width:auto;}
	#hdwc .menu .menu-on{overflow-y:scroll;}
	#hdwc .menu .menu-category{top:0; transform: translate(0,0); padding:20px 5% 40px;}
	#hdwc .menu .menu-category ul h1{font-size:1.2rem; }
	#hdwc .menu .menu-category ul li{font-size:1.1rem;} 
	#hdwc .nav > ul {display:none;}
	#hdwc .hewc-wr { margin: 20px auto; padding:0px;}

	#hdwc.on {background:none;  padding-bottom: 50px;}
	#hdwc.on .lan a{color:#fff;}
	#hdwc.on .lan a.active{border: 1px solid #fff;}
	#hdwc.on .nav ul li a{color:#fff; }
	#hdwc.on .hdsabo {display:none;}
	#hdwc.on .nav .menu-btn span{background:#fff;}
	#hdwc.on .nav.sub .menu-btn span{background:#000;}
	
	.sub-visual {width:100%; padding:1.5rem}
	.footer-download-wrap {flex-flow:column;}
	.footer-download-right {text-align:left;}
	.footer-download-wrap {align-items:inherit; padding:0 1.5rem;}
	
  #gnbNav .mega-panel{
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 180ms ease, transform 180ms ease;
  }
  #gnbNav .mega-panel.is-open{
    opacity: 1;
    transform: translateY(0);
  }
  #gnbNav .mega-wrap{ display:none !important; }
}

@media (max-width: 820px){
  .thumbmenu-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

@media screen and (max-width:600px){
	
    .sub-menu ul {font-size:14px;}
	#hdwc.on {padding-bottom:0;}
	#hdwc .hewc-wr { margin:20px 0 0;}
	#hdwc .lan{top:29px;}
	#hdwc .nav{margin:0px 0 0;}
	#hdwc .menu .menu-close {padding:0px; top:20px; right:20px;}
	#hdwc .menu .menu-on{width:85%;}
	#hdwc .nav .lan{padding:5px 20px; background:none;}
	#hdwc .menu .menu-category .logo{display:block; position: absolute; left:20px; top:5px;}
	#hdwc .menu .menu-category ul{padding:15px 0; }
	#hdwc .menu .menu-category ul li{display:block;}
	#hdwc .menu .menu-category ul li.company-ca,.br{display:none;}
	#hdwc .menu .menu-category ul h1{font-size:1.2rem; font-weight: 400; margin:0;}
	#hdwc .menu .menu-category ul li a{display: block; font-size:1.1rem; font-weight: 400; color:#555; padding:3px 0 3px 20px;  margin-right:0; position:relative;} 
	#hdwc .menu .menu-category ul li a::before{content:''; width:5px; height:1px; background:#333; position:absolute; left:7px; top:15px;}
	#hdwc .menu .menu-category ul ul{padding:0;}
	#hdwc .menu .menu-category{padding:20px 7% 50px; position:relative; transform: inherit;}
	#hdwc .menu .menu-category ul {margin-bottom:0px;}
	
}