:root {
  --topBanner-height: 64px;
  --topBannerMobile-height: 56px;
/*     --topBanner-height: 0px;
  --topBannerMobile-height: 0px; */
  --header-height: 79px;
  --headerMobile-height: 64px;
}

.row-fluid [class*=span] {
  min-height: 0 !important;
}

.body-container-wrapper {
  margin-top: 0 !important;
  padding-top: calc(var(--topBanner-height) + var(--header-height));
}

@media screen and (max-width: 1024px) {
  .body-container-wrapper {
    padding-top: calc(var(--topBannerMobile-height) + var(--headerMobile-height));
  }
}

/* AI 에이전트 + 모집/관리 그룹 - 반응형 처리 */
#headerHdot .wrap-lnb .wrap-sector .sector-group {
  display: contents; /* 1600px 이상에서는 wrapper가 레이아웃에 영향 없음 */
}

/* AI 에이전트 타이틀 스타일 (그라데이션) */
#headerHdot .wrap-lnb .title-sector.ai-agent {
  display: flex;
  align-items: center;
  gap: 2px;
  background: linear-gradient(93deg, #05d16e 18.27%, #60a5fa 44.07%, #818cf8 104.26%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#headerHdot .wrap-lnb .title-sector.ai-agent .agent-icon {
  flex-shrink: 0;
}

@media (max-width: 1600px) {
  #headerHdot .wrap-lnb .wrap-sector .sector-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

@media (max-width: 1024px) {
  #headerHdot .wrap-lnb .wrap-sector .sector-group {
    gap: 12px;
  }
  
  #headerHdot .wrap-lnb .title-sector.ai-agent {
    display: none;
  }
}

/* scroll bar custom - start */
html::-webkit-scrollbar {
  display: none;
}

body.no-select {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.rail-scroll_thumb {
  position: fixed;
  top: 0;
  right: 0;
  display: none;
  width: 10px;
  height: 100vh;
  z-index: 20000;
}

.rail-scroll_thumb .thumb {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  transition: background-color 0.3s;
}

.rail-scroll_thumb .thumb.active {
  background-color: rgba(0, 0, 0, 0.5);
}

/* scroll bar custom - end */


#topBanner {
  position: relative;
  z-index: 1;
  height: var(--topBanner-height);
  overflow: hidden;
}

#topBanner {                            
  position: relative;                                                                                                         
  z-index: 1;                                                                                                                 
  height: var(--topBanner-height);
  overflow: hidden;                                                                                                           
}                                                         

#topBanner .banner-item {                                 
  position: relative;                                                                                                         
  display: block;
  width: 100%;                                                                                                                
  height: 100%;                                           
  font-size: 19px;
  font-weight: 600;                                                                                                           
  letter-spacing: -0.01em;
  line-height: 160%;                                                                                                          
  color: #fff;                                            
  background: #FF5515;                  
}

#topBanner .banner-text {
  position: absolute;                                                                                                         
  inset: 0;                                               
  display: flex;                            
  align-items: center;                  
  justify-content: center;
  gap: 16px;                                                                                                                  
  will-change: clip-path;
  color: #fff;                                                                                                                
}                                                         

#topBanner .banner-text.base {                                                                                                
  z-index: 2;
  clip-path: inset(0 100% 0 0);                                                                                               
}                                                         

#topBanner .banner-text.overlay {
  z-index: 4;                                                                                                                 
  pointer-events: none;
  clip-path: inset(0 0 0 0);                                                                                                  
}                                                         

#topBanner .banner-content {
  display: flex;                                                                                                              
  align-items: center;
  gap: 16px;                                                                                                                  
  color: inherit;                                         
}                                           

#topBanner .banner-content.mobile {
  display: none;                                                                                                              
}

#topBanner .btn_more {                                    
  display: flex;
  align-items: center;                      
  width: fit-content;                   
  height: 32px;
  padding: 0 8px;                                                                                                             
  font-size: 14px;
  font-weight: 500;                                                                                                           
  color: inherit;                                         
  border: 1px solid currentColor;
  border-radius: 4px;                                                                                                         
}                                           

#topBanner .banner-cover {                                
  position: absolute;                                                                                                         
  top: 0;
  bottom: 0;                                                                                                                  
  left: -30px;                                            
  width: calc(100% + 60px);                 
  pointer-events: none;                 
  will-change: transform;
  backface-visibility: hidden;                                                                                                
  background-color: #00A3FE;                
  transform: translate3d(30px, 0, 0);                                                                                         
  z-index: 3;                                             
}                                                                                                                             

#topBanner .banner-circle-track {                                                                                             
  position: absolute;                                                                                                         
  top: 0;
  left: 0;                                                                                                                    
  width: var(--topBanner-height);                         
  height: var(--topBanner-height);          
  pointer-events: none;                 
  z-index: 5;
  will-change: transform;                                                                                                     
  backface-visibility: hidden;
  transform: translate3d(-50%, 0, 0);                                                                                         
}                                                         

#topBanner .banner-circle-body {                                                                                              
  width: 100%;                          
  height: 100%;                                                                                                               
  border-radius: 50%;                                                                                                         
  background-color: #FFDC2D;
  transition: background-color 0.3s ease-out;                                                                                 
  will-change: transform, background-color;               
  backface-visibility: hidden;          
}                                           

@keyframes banner-text-reveal-forward {     
  0%, 20% { clip-path: inset(0 100% 0 0); }                                                                                   
  100% { clip-path: inset(0 0 0 0); }                     
}                                                                                                                             
@keyframes banner-text-reveal-backward {                  
  0%, 20% { clip-path: inset(0 0 0 100%); }                                                                                   
  100% { clip-path: inset(0 0 0 0); }                                                                                         
}                                       
@keyframes banner-text-clip-forward {                                                                                         
  0%, 20% { clip-path: inset(0 0 0 0); }                                                                                      
  100% { clip-path: inset(0 0 0 100%); }
}                                                                                                                             
@keyframes banner-text-clip-backward {                                                                                        
  0%, 20% { clip-path: inset(0 0 0 0); }    
  100% { clip-path: inset(0 100% 0 0); }                                                                                      
}                                                         
@keyframes banner-cover-forward {                                                                                             
  0% { transform: translate3d(30px, 0, 0); }
  20% { transform: translate3d(0, 0, 0); }                                                                                    
  100% { transform: translate3d(calc(100vw + 30px), 0, 0); }
}                                                                                                                             
@keyframes banner-cover-backward {                        
  0% { transform: translate3d(-30px, 0, 0); }                                                                                 
  20% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(calc(-100vw - 30px), 0, 0); }                                                                 
}                                                                                                                             
@keyframes banner-circle-slide-0 {
  0% { transform: translate3d(-50%, 0, 0); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }                       
  20% { transform: translate3d(calc(-50% - 30px), 0, 0); }
  100% { transform: translate3d(calc(100vw - 50%), 0, 0); }                                                                   
}                                                                                                                             
@keyframes banner-circle-slide-1 {                                                                                            
  0% { transform: translate3d(calc(100vw - 50%), 0, 0); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }          
  20% { transform: translate3d(calc(100vw - 50% + 30px), 0, 0); }                                                             
  100% { transform: translate3d(-50%, 0, 0); }            
}                                                                                                                             
@keyframes banner-circle-slide-2 {                                                                                            
  0% { transform: translate3d(-50%, 0, 0); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
  20% { transform: translate3d(calc(-50% - 30px), 0, 0); }                                                                    
  100% { transform: translate3d(calc(100vw - 50%), 0, 0); }
}                                                                                                                             
@keyframes banner-circle-slide-3 {                                                                                            
  0% { transform: translate3d(calc(100vw - 50%), 0, 0); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
  20% { transform: translate3d(calc(100vw - 50% + 30px), 0, 0); }                                                             
  100% { transform: translate3d(-50%, 0, 0); }            
}                                                                                                                             
@keyframes banner-circle-post-0 {                                                                                             
  0% { transform: translateX(0); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }                                 
  12.5% { transform: translateX(-32px); animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }                          
  25% { transform: translateX(0); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }                                
  37.5% { transform: translateX(-18px); animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }
  50% { transform: translateX(0); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }                                
  62.5% { transform: translateX(-9px); animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }                           
  75% { transform: translateX(0); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }                                
  87.5% { transform: translateX(-4px); animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }                           
  100% { transform: translateX(0); }                                                                                          
}                                                                                                                             
@keyframes banner-circle-post-1 {                                                                                             
  0% { transform: translateX(0); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }                                 
  12.5% { transform: translateX(32px); animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }                           
  25% { transform: translateX(0); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }                                
  37.5% { transform: translateX(18px); animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }                           
  50% { transform: translateX(0); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
  62.5% { transform: translateX(9px); animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }                            
  75% { transform: translateX(0); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }                                
  87.5% { transform: translateX(4px); animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }                            
  100% { transform: translateX(0); }                                                                                          
}                                                                                                                             
@keyframes banner-circle-post-2 {                                                                                             
  0% { transform: translateX(0); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }                                 
  12.5% { transform: translateX(-32px); animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }                          
  25% { transform: translateX(0); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }                                
  37.5% { transform: translateX(-18px); animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }
  50% { transform: translateX(0); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }                                
  62.5% { transform: translateX(-9px); animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }                           
  75% { transform: translateX(0); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }                                
  87.5% { transform: translateX(-4px); animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }                           
  100% { transform: translateX(0); }                                                                                          
}                                                                                                                             
@keyframes banner-circle-post-3 {                                                                                             
  0% { transform: translateX(0); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }                                 
  12.5% { transform: translateX(32px); animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }
  25% { transform: translateX(0); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }                                
  37.5% { transform: translateX(18px); animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }                           
  50% { transform: translateX(0); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
  62.5% { transform: translateX(9px); animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }                            
  75% { transform: translateX(0); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }                                
  87.5% { transform: translateX(4px); animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }                            
  100% { transform: translateX(0); }                                                                                          
}

#headerHdot .mobile {
  display: none;
}

#headerHdot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100%;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

#headerHdot:before {
  position: fixed;
  top: 0;
  left: 0;
  content: '';
  width: 100vw;
  height: 100vh;
  background: rgba(3, 7, 18, 0.80);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  transition-delay: 0.3s;
}

#headerHdot.lnb_open:before {
  opacity: 1;
  visibility: visible;
  transition-delay: unset;
}

#headerHdot .wrap-gnb {
  position: relative;
  background: #fff;
  border-bottom:1px solid #F3F4F6;
}

#headerHdot #gnbContainer {
  transition: transform 0.2s;
} 

#headerHdot.hide-gnb #gnbContainer {
  transform: translateY(-100%);
}

#headerHdot button {
  padding: 0;
  font-size: 0;
  background: 0;
  cursor: pointer;
}

#headerHdot .inner-gnb {
  position:relative;
  display: flex;
  justify-content: center;
  max-width: 1920px;
  margin: 0 auto;
}

#headerHdot .wrap-logo {
  position:absolute;
  left:60px;
  top:0;
}

#headerHdot .link-logo {
  display: flex;
  align-items: center;
  height: 79px;
}

#headerHdot .list-gnb {
  display: flex;
}

#headerHdot .link-gnb {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--header-height);
  padding: 0 32px;
  color: #1F2937;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.16px;
  transition: color 0.3s;
}
#headerHdot .link-gnb .new {
  position: relative;
}
#headerHdot .link-gnb .new:before {
  content: '';
  position: absolute;
  right: -8px;
  top: -0.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #05D16E;
}

#headerHdot .wrap-lnb {
  position: absolute;
  top: 80px;
  left: 50%;
  width: 100vw;
  transform:translateX(-50%);
  background: #f9fafb;
  overflow: hidden;
  max-height:0;
  transition: max-height 0.5s;
}

#headerHdot .wrap-lnb .inner-lnb {
  position: relative;
  z-index: 1;
  display: flex;
  max-width: 1220px;
  margin: 0 auto;
}
#headerHdot .wrap-lnb.lnb-solution .inner-lnb {
  flex-wrap:wrap;
}
#headerHdot .wrap-lnb.lnb-contents .inner-lnb {
  max-width:1060px;
}
#headerHdot .wrap-lnb.lnb-support .inner-lnb {
  max-width:1220px;
  justify-content: center;
}

#headerHdot .wrap-lnb .container-category {
  position:relative;
  padding: 24px 30px 40px;
  box-sizing:border-box;
}

#headerHdot .wrap-lnb .container-category + .container-category:before {
  content:'';
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:1px;
  background-color: #E5E7EB;
}

#headerHdot .wrap-lnb .container-category.public {
  width:100%;
  position:relative;
  padding:29px 30px 38px;
}

#headerHdot .wrap-lnb .container-category+.container-category.public:before {
  content:'';
  position:absolute;
  top:0;
  left:50%;
  width:100vw;
  height:1px;
  transform:translateX(-50%);
  background-color:#E5E7EB;
}
#headerHdot .wrap-lnb .container-category.public .title-category {
  display:none;
}
#headerHdot .wrap-lnb .container-category.public .wrap-sector {
  margin-top:0;
}

#headerHdot .wrap-lnb .container-category.public .sector .group-link {
  margin-top:0;
  gap: 100px;
  flex-flow: row;
}
#headerHdot .wrap-lnb .container-category.public .sector .link-lnb {
  gap:7px;
  width:auto;
}
#headerHdot .wrap-lnb .container-category.public .link-lnb strong {
  font-size:20px;
  transition: 0.2s;
}

#headerHdot .wrap-lnb .container-category.public .link-lnb strong svg path {
  transition: .2s;
}

@media (hover:hover) {
  #headerHdot .wrap-lnb .container-category.public .link-lnb:hover strong:after {
    display:none;
  }
  #headerHdot .wrap-lnb .container-category.public .link-lnb:hover strong {
    color:#05D16E;
  }
  #headerHdot .wrap-lnb .container-category.public .link-lnb:hover strong svg path {
    fill: #05D16E;
  }
}

#headerHdot .wrap-lnb .title-category {
  display:flex;
  gap: 12px;
}
#headerHdot .wrap-lnb .title-category strong {
  color: #4B5563;
  font-size: 24px;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -0.24px;
}

#headerHdot .wrap-lnb.lnb-solution .title-category .box-link {
  display:flex;
  align-items:center;
  gap:4px;
}

#headerHdot .wrap-lnb.lnb-solution .title-category .box-link span {
  position:relative;
  color: #374151;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  transition: .3s;
}
#headerHdot .wrap-lnb.lnb-solution .title-category .box-link span.m {
  display:none;
}

#headerHdot .wrap-lnb.lnb-solution .title-category .box-link span:after {
  content:'';
  position:absolute;
  bottom:1px;
  left:0;
  width:100%;
  height:1px;
  background-color:#374151;
  transition: .3s;
}
#headerHdot .wrap-lnb.lnb-solution .title-category .box-link svg path {
  transition: .3s;
}

@media (hover:hover) {
  #headerHdot .wrap-lnb.lnb-solution .title-category .box-link:hover span {
    color:#05D16E;
  }
  #headerHdot .wrap-lnb.lnb-solution .title-category .box-link:hover span:after {
    background-color:#05D16E;
  }
  #headerHdot .wrap-lnb.lnb-solution .title-category .box-link:hover svg path {
    fill:#05D16E;
  }
}

#headerHdot .wrap-lnb .wrap-sector {
  display:flex;
  margin-top:18px;
  column-gap:20px;
}

#headerHdot .wrap-lnb.lnb-support .wrap-sector {
  margin-top:16px;
}

#headerHdot .wrap-lnb .wrap-sector .sector {
  display:flex;
  flex-flow:column;
}

#headerHdot .wrap-lnb .title-sector {
  color: #05D16E;
  font-size: 12px;
  font-weight: 600;
  line-height: 160%;
}

#headerHdot .wrap-lnb .container-category.performance .title-sector {
  color:#60A5FA;  
}

#headerHdot .wrap-lnb .sector .group-link {
  margin-top:8px;
  display:flex;
  flex-flow:column;
  gap:16px;
}

#headerHdot .wrap-lnb.lnb-contents .sector .group-link,
#headerHdot .wrap-lnb.lnb-support .sector .group-link{
  margin-top:0;
}

#headerHdot .wrap-lnb.lnb-contents .container-category.resource .sector .group-link {
  gap: 16px 20px;
  flex-flow:row;
  flex-wrap:wrap;
}

#headerHdot .wrap-lnb.lnb-support .sector .group-link {
  gap: 0 40px;
  flex-flow:row;
}

#headerHdot .wrap-lnb .sector .link-lnb {
  width:160px;
  flex:auto;
}

#headerHdot .link-lnb {
  display: flex;
  flex-flow:column;
}
#headerHdot .wrap-lnb .sector .link-lnb.w170 {
  width: 170px;
}

#headerHdot .link-lnb strong {
  position:relative;
  width: fit-content;
  display: flex;
  align-items:center;
  gap: 4px;
  color: #1F2937;
  font-size: 16px;
  font-weight: 600;
  line-height: 160%;
  letter-spacing: -0.16px;
}

#headerHdot .link-lnb strong:after {
  width:24px;
  height:24px;
  content:'';
  position:absolute;
  right:-28px;
  top:0;
  opacity:0;
  transition: opacity .1s;
  background:url(https://contents.h.place/hubfs/HDOT/publish/img/icon_arrow_right.svg) no-repeat;
  background-size:cover;
}

@media (hover:hover) {
  #headerHdot .link-lnb:hover strong:after {
    opacity:1;
  }
}

#headerHdot .link-lnb strong .badge.new {
  width:34px;
  height:21px;
  background:url(https://contents.h.place/hubfs/HDOT/publish/img/img_badge_new.svg) no-repeat; 
  background-size:cover;
}

#headerHdot .link-lnb strong .badge.hot {
  width:29px;
  height:20px;
  background:url(https://contents.h.place/hubfs/HDOT/publish/img/img_badge_hot.svg) no-repeat;
  background-size:cover;
}

#headerHdot .link-lnb p {
  color: #6B7280;
  font-size: 14px;
  font-weight: 400;
  line-height: 160%;
}

#headerHdot .link-lnb .icon-outlink {
  width: 16px;
  height: 16px;
  margin-left: 6px;
  transition: fill 0.3s;
}

#headerHdot .wrap-util {
  position:absolute;
  right:60px;
  height:80px;
  display: flex;
  align-items: center;
}

#headerHdot .mobile-banner {
  display: none;
}

#headerHdot .btn-introduction {
  height:48px;
  margin-right:20px;
  display:flex;
  align-items:center;
  column-gap:4px;
  color:#374151;
  font-weight:500;
  transition: color .3s;
}

@media (hover:hover) {
  #headerHdot .btn-introduction:hover {
    color:#05D16E;
  }
}

#headerHdot .btn-subscribe {
  display: flex;
  align-items: center;
  width: fit-content;
  height: 48px;
  padding: 0 16px;
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.16px;
  background: #05D16E;
  border-radius: 8px;
  transition: background .2s, color .2s;
}

#headerHdot .user-util {
  position:relative;
  margin-left:17px;
}
#headerHdot .user-util::before {
  position: absolute;
  top: 50%;
  left: -8.5px;
  content: '';
  width: 1px;
  height: 18px;
  background: #D1D5DB;
  transform: translateY(-50%);
}

#headerHdot .btn-login {
  position:relative;
  display: flex;
  align-items: center;
  width: fit-content;
  height: 48px;
  margin-left: 17px;
  padding: 0 16px;
  color: #1F2937;
  font-size: 16px;
  font-weight: 500;
  line-height: 160%;
  letter-spacing: -0.16px;
  border-radius: 8px;
  border: 1px solid #9CA3AF;
  transition: background 0.2s;
}

#headerHdot .btn-login:before {
  position: absolute;
  top: 50%;
  left: -10px;
  content: '';
  width: 1px;
  height: 18px;
  background: #D1D5DB;
  transform: translateY(-50%);
}

#headerHdot .btn-profile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #E5E7EB;
  background: #F3F4F6;
}

#headerHdot .btn-profile svg {
  width:24px;
  height:24px;
}

#headerHdot .btn-profile svg path {
  fill:#1f2937;
}

#headerHdot .icon-profile {
  width: 100%;
  height: 100%;
}

#headerHdot .user-profile {
  position: absolute;
  top: 60px;
  right: 0;
  display: none;
  width: 244px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  box-shadow: 0px 8px 18px -6px rgba(0, 0, 0, 0.06), 0px 2px 12px 0px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

#headerHdot .user-profile.on {
  display: block;
}

#headerHdot .item-user-profile > a {
  display: flex;
  align-items: center;
  column-gap: 2px;
  padding: 16px 12px;
  color: #111827;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  border-top:1px solid #E5E7EB;
  transition: background .2s
}

@media (hover:hover) {
  #headerHdot .item-user-profile > a:hover {
    background: #f3f4f6;
  }
}

#headerHdot .item-user-profile:first-child {
  display: flex;
  align-items: center;
  column-gap: 8px;
  padding: 16px 16px 16px 12px;
  border-top: 0;
  background: #F9FAFB;
}

#headerHdot .item-user-profile .icon-profile {
  width: 40px;
  height: 40px;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  border-radius: 50%;
}

#headerHdot .item-user-profile .user-info {
  display: flex;
  flex-direction: column;
}

#headerHdot .item-user-profile .user-name {
  color: #111827;
  font-size: 16px;
  font-weight: 600;
  line-height: 160%;
  letter-spacing: -0.16px;
}

#headerHdot .item-user-profile .user-email {
  color: #6B7280;
  font-size: 12px;
  font-weight: 500;
  line-height: 160%;
}

@media (min-width: 1025px) {
  #headerHdot.lnb_open .link-gnb {
    color: #9CA3AF;
  }

  #headerHdot.lnb_open .item-gnb:hover .link-gnb {
    color: #1F2937;
  }

  #headerHdot .wrap-lnb {
    transition: max-height 0.5s;
  }

  #headerHdot.hide-gnb .wrap-lnb {
    opacity: 0;
  }

  #headerHdot.lnb_animation .list-gnb:hover .wrap-lnb {
    transition: unset;
  }

  #headerHdot .item-gnb:hover .wrap-lnb {
    opacity: 1;
    max-height: 100vh;
  }

  #headerHdot .link-lnb:hover {
    color: #05D16E;
  }

  #headerHdot .link-lnb:hover .icon-outlink path {
    fill: #05D16E;
  }

  #headerHdot .item_user_profile>a:hover {
    background: #F3F4F6;
  }

  #headerHdot .btn-subscribe:hover {
    background: rgb(5, 188, 99);
  }

  #headerHdot .btn-login:hover {
    background: rgb(243, 244, 246);
  }


  #headerHdot .lnb-solution .group-anchor {
    position: absolute;
    top: 60px;
    left: 370px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 40px;
    width: 464px;
    opacity: 0;
  }

  #headerHdot .lnb-solution .group-anchor + .group-anchor {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #E5E7EB;
  }
}

@media (max-width: 1920px) {
  #headerHdot .wrap-logo {
    left: 40px;
  }
  #headerHdot .wrap-util {
    right: 40px;
  }
}

@media (max-width: 1600px) {
  #headerHdot .inner-gnb {
    justify-content: space-between;
    padding: 0 30px;
  }
  #headerHdot .wrap-lnb.lnb-contents .inner-lnb {
    max-width:880px;
  }

  #headerHdot .wrap-logo {
    position:static;
  }
  #headerHdot .wrap-util {
    position:static;
  }
  #headerHdot .btn-introduction {
    margin-right:16px;
  }
  #headerHdot .link-gnb {
    padding: 0 16px;
  }
  #headerHdot .lnb-solution .box-banner {
    display: none;
  }
  #headerHdot .wrap-lnb.lnb-contents .container-category.resource .sector .group-link {
    flex-flow:column
  }
  #headerHdot .wrap-lnb.lnb-support .sector .group-link {
    gap: 30px;
    flex-wrap: wrap;
  }
}

@media (max-width: 1024px) {  
  #topBanner {                                                                                                                
    height: var(--topBannerMobile-height);
  }                                                                                                                           

  #topBanner .banner-item {
    font-size: 16px;                                                                                                          
    letter-spacing: -0.16px;                
  }                                                                                                                           

  #topBanner .banner-content.desktop {                                                                                        
    display: none;                      
  }                                                                                                                           

  #topBanner .banner-content.mobile {
    display: flex;                                                                                                            
    gap: 4px;                                             
  }                                         

  #topBanner .banner-content.mobile svg {
    padding: 4px;                                                                                                             
    box-sizing: content-box;
  }                                                                                                                           

  #topBanner .banner-circle-track {
    display: none;                                                                                                            
  }
}

  #headerHdot #gnbContainer {
    position: relative;
  }

  #headerHdot.hide-gnb #gnbContainer {
    transform: unset;
  }

  #headerHdot .mobile-default-gnb {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: var(--headerMobile-height);
    padding-right: 20px;
    border-bottom: 1px solid #f3f4f6;
    background: #fff;
    transition: transform 0.2s;
  }

  #headerHdot.hide-gnb .mobile-default-gnb {
    transform: translateY(-100%);
  }

  #headerHdot .mobile-default-gnb .group-btn-menu {
    position: unset;
    align-items: center;
  }
  #headerHdot .wrap-logo {
    position:relative;
    left:0;
  }

  #headerHdot .wrap-gnb {
    position: fixed;
    top: var(--topBannerMobile-height);
    /* 	띠배너 제거시 top: 0 복원	 */
    /* 		top: 0; */
    left: 100vw;
    width: 100%;
    height: calc(100% - var(--topBannerMobile-height));
    /* 	띠배너 제거시 height: 100% 복원	 */
    /* 		height:100%; */
    transform: translateX(100%);
    transition: transform 0.5s ease, left 0.5s ease;
  }

  #headerHdot .wrap-gnb.active {
    left: 0;
    transform: unset;
  }

  #headerHdot.lnb-open:before {
    display: none;
  }

  #headerHdot .inner-gnb {
    position: relative;
    flex-direction: column;
    padding: 0;
    height: 100%;
  }

  #headerHdot .link-logo {
    width: 90px;
    height: 64px;
    margin-left: 20px;
  }

  #headerHdot .item-gnb.mobile {
    display: block;
  }

  #headerHdot .item-gnb+.item-gnb {
    border-top: 1px solid #E5E7EB;
  }

  #headerHdot .list-gnb {
    flex-flow:column;
    flex: 1;
    padding: 16px 20px 0;
    overflow: hidden auto;
    margin-left: 0;
  }

  #headerHdot .link-gnb {
    justify-content: space-between;
    height: 64px;
    padding: 0;
    font-size: 18px;
    letter-spacing: -0.18px;
  }

  #headerHdot .link-gnb[href="#none"] {
    pointer-events: auto;
  }

  #headerHdot .link-gnb .new:before {
    top: -1.5px;
  }

  #headerHdot .icon-folder {
    display: block;
    font-size: 0;
    padding: 4px;
    transition: transform 0.3s;
  }

  #headerHdot .link-gnb.active .icon-folder {
    transform: rotateZ(-180deg);
  }

  #headerHdot .wrap-lnb {
    max-height:0;
    opacity:0;
    position: static;
    overflow: hidden;
    transform:translate(0);
    transition: max-height 0.3s;
    background-color:#fff;
  }

  #headerHdot .link-gnb.active {
    color: #05D16E;
  }

  #headerHdot .link-gnb.active + .wrap-lnb {
    max-height: 200vh;
    opacity: 1;
  }

  #headerHdot .wrap-lnb .inner-lnb {
    padding: 8px 0 40px;
    overflow: hidden;
    flex-flow:column;
  }

  #headerHdot .wrap-lnb .container-category {
    padding: 0;
  }

  #headerHdot .wrap-lnb .container-category + .container-category {
    padding-top:24px;
  }

  #headerHdot .wrap-lnb .container-category+.container-category:before {
    display: none;
  }

  #headerHdot .wrap-lnb .container-category.public {
    padding:24px 0 0;
  }

  #headerHdot .wrap-lnb .container-category.public .link-lnb strong svg {
    display:none;
  }

  #headerHdot .wrap-lnb .title-category {
    flex-flow:column;
    gap:16px;
  }

  #headerHdot .wrap-lnb .container-category.public .title-category {
    display:flex;
    margin-bottom:4px;
  }
  #headerHdot .wrap-lnb .container-category.public .title-category:nth-of-type(2) {
    margin-top: 12px;
  }

  #headerHdot .wrap-lnb.lnb-solution .title-category .box-link span.pc {
    display: none;
  }

  #headerHdot .wrap-lnb.lnb-solution .title-category .box-link span.m {
    display: block;
    font-size: 18px;
    font-weight: 600;
  }

  #headerHdot .wrap-lnb.lnb-solution .title-category .box-link span:after {
    display:none;
  }

  #headerHdot .wrap-lnb .title-category .box-link svg {
    display:none;
  }

  #headerHdot .wrap-lnb .title-category strong {
    color: #9CA3AF;
    font-size: 14px;
    font-weight: 500;
    line-height: 160%;
  }
  #headerHdot .wrap-lnb .wrap-sector {
    margin-top:16px;
    flex-flow:column;
    gap:12px;
  }
  #headerHdot .wrap-lnb.lnb-solution .wrap-sector {
    margin-top:12px;
  }
  #headerHdot .wrap-lnb.lnb-support .wrap-sector {
    margin-top:0;
  }
  #headerHdot .wrap-lnb .title-sector {
    display:none;
  }
  #headerHdot .wrap-lnb .sector .group-link {
    gap:12px;
    margin-top:0;
  }
  #headerHdot .wrap-lnb .container-category.public .sector .group-link {
    flex-flow:column;
    gap: 12px;
  }
  #headerHdot .wrap-lnb.lnb-support .sector .group-link {
    flex-flow:column;
    gap:12px 0;
  }

  #headerHdot .lnb-solution .title_lnb {
    padding-bottom: 4px;
  }

  #headerHdot .lnb-solution .link-lnb > span,
  #headerHdot .lnb-solution .link-lnb .thumb ,
  #headerHdot .wrap-lnb .box-banner {
    display: none;
  }

  #headerHdot .lnb-solution .link-lnb > strong {
    display: flex;
    align-items: center;
    column-gap:6px;
    font-size:18px;
    font-weight:500;
  }

  #headerHdot .wrap-lnb .container-category.public .link-lnb strong {
    font-size:18px;
  }

  #headerHdot .lnb-solution .link-lnb > strong svg {
    display:block;
  }

  #headerHdot .link-lnb p {
    display:none;
  }

  #headerHdot .wrap-lnb .sector .link-lnb {
    width: 100%;
    margin-top:0;
  }

  #headerHdot .link-lnb strong {
    font-size:18px;
    font-weight:500;
  }

  #headerHdot .wrap-util {
    position:relative;
    right:unset;
    height:auto;
    flex-direction: column;
    row-gap: 8px;
    margin: 16px 20px 24px;
  }

  #headerHdot .mobile-banner {
    /* 		display: block; */
    display: none;
    width: 100%;
  }

  #headerHdot .mobile-banner .link-banner {
    position: relative;
    display: block;
    height: 130px;
    border-radius: 8px;
    overflow: hidden;
  }

  #headerHdot .mobile-banner .link-banner.essential {
    background:url(https://h.place/images/free_mobile_background.png) no-repeat center / cover
  }

  #headerHdot .mobile-banner .link-banner.event {
    background: linear-gradient(137deg, #4911C1 24.13%, #8E60FF 109.88%);
  }

  #headerHdot .mobile-banner .thumb {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: 100%;
    object-fit: cover;
  }

  #headerHdot .mobile-banner .title-banner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    row-gap: 2px;
    padding: 16px 20px;
    color: #FFF;
    font-size: 18px;
    font-weight: 600;
    line-height: 140%;
    letter-spacing: -0.18px;
  }

  #headerHdot .mobile-banner .title-banner > span {
    color: rgba(255, 255, 255, 0.80);
    font-size: 12px;
    line-height: 160%;
    letter-spacing: unset;
  }

  #headerHdot .mobile-banner .link-banner.essential .title-banner {
    color: #fff;
  }

  #headerHdot .mobile-banner .link-banner.essential .title-banner > span {
    color: rgba(255, 255, 255, 0.80);
  }

  #headerHdot .link-banner .close-text {
    bottom: 17px;
    left: 20px;
    width: 74px;
    height: 27px;
    font-size: 12px;
  }

  #headerHdot .wrap-util .btn-subscribe {
    justify-content: center;
    width: 100%;
    font-size: 16px;
  }

  #headerHdot .btn-introduction {
    display:none;
  }

  #headerHdot .user-util {
    display: none;
  }

  #headerHdot .wrap-util a+a {
    margin-left: 0;
  }

  #headerHdot .wrap-util a+a:before {
    display: none;
  }

  #headerHdot .btn-login,
  #headerHdot .btn-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    color: #1F2937;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.16px;
    background: #F3F4F6;
    border: unset;
    border-radius: 8px;
  }

  #headerHdot .group-btn-menu {
    position: absolute;
    top: 16px;
    right: 20px;
    display: flex;
  }

  #headerHdot .group-btn-menu button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
  }
  #headerHdot .group-btn-menu button img {
    width:24px;
    height:24px;
  }

  #headerHdot .group-btn-menu .btn-subscribe {
    height: 32px;
    margin-right: 16px;
    padding: 0 8px;
    font-size: 14px;
    letter-spacing: unset;
    border-radius: 4px;
  }
}
@media (max-width:768px) {
  .rail-scroll_thumb {
    display: none !important	
  }
}