html {
    height: 100%;
    overflow: auto;
	padding: 0;
    margin: 0;  
}
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0 auto;
    font-size: 12px;
}
p, span {
    font-size: 14px;
}
body>div {
    width: 100%;
    padding: 0;
}

div#header {
    width: 100%;
    height:70px;
    padding-top: 20px;
}
div#header-container {
    display: flex;
    width: 100%;
    max-width:1980px;
    margin: 0 auto;
}
div#footer {
    width: 100%;
    background:black;
}
div#footer-container {
    display: flex;
    width: 100%;
    max-width:1980px;
    margin: 0 auto;
}
#module-menu ul {
    list-style: none;
}
#module-menu li.main-menu {
    position: relative;
    float: left;
    width: calc((100% / 7) - 5px);
    margin-top: 10px;
}
#module-menu li.delink {
    pointer-events: none; 
    color: #ccc; 
    cursor: not-allowed;
}
#module-menu button {
    border: none;
    width: 100%;
    height: 50px;
    font-size:16px;
    font-weight:500;
    background:none;
}
#module-menu a {
    display: block;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    color: #3356ae;
}
#module-menu .delink>a {
    color: #ccc;
}
/* 서브메뉴 초기 상태 (숨김) */
.sub-menu {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  opacity: 0; /* 초기 투명도 0 */
  visibility: hidden; /* 초기 가시성 없음 */
  transition: 
    opacity 0.3s ease, 
    visibility 0.3s ease; /* 애니메이션 속도 조절 */
}

/* 서브메뉴 위치 조정 */
.sub-menu > li {
  padding: 8px 16px;
}

/* 호버 시 서브메뉴 표시 */
li:hover .sub-menu {
  display:block;
  position: absolute;
  top: 100%; /* 부모 요소 기준 위로 이동 */
  left: 0; /* 부모 요소 왼쪽에 정렬 */
  min-width: 160px; /* 서브메뉴 최소 너비 */
  z-index: 1000; /* 다른 요소 위에 표시 */
  opacity: 1; /* 투명도 1로 변경 */
  visibility: visible; /* 가시성 활성화 */
}

/* 서브메뉴 배경/텍스트 색상 */
.sub-menu > li > a {
  color: #333;
  text-decoration: none;
  font-size: 14px !important;
}
div#inner {
    display: flex;
    height:calc(100% - 150px);
    vertical-align: middle;
}
div#container {
	display: flex;
	width:100%;
	max-width:1920px;
    margin: 0 auto;
	flex:1;
	justify-content: center;
	background: #efefef;
}
#side-menu  {
    width: 250px;
    float:left;
    background:#555;
}
#side-menu #menu {
    list-style:square;
    color:silver;
}
#side-menu #menu a{
    color:silver;
}
#side-menu #menu a:hover{
    color:white;
}
#content {
	width:calc( 100% - 290px );
	margin:20px;
	float:right;
	background: #ffffff;
}
img {}
a {
    text-decoration: none;
}
p#header {
    font-family: Roboto-Medium;
    font-size: 28px;
    color: #323C46;
    text-align: center;
    line-height: 36px;
    margin-top: 0;
    margin-bottom: 12px;
}
p#paragraph {
    font-family: Roboto-Regular;
    font-size: 13px;
    color: #323C46;
    text-align: center;
    line-height: 20px;
	margin: 0 auto;
}
      h4 { 
          font-weight: 500; } 
      #inner>.container { 
          width: 100%; 
          max-width:1000px; 
          margin: 30px auto;  } 
      .category-section { 
          display: flex; 
          justify-content: space-between; 
          padding:0 30px; 
          margin-bottom: 20px; } 
      .category-btn { 
          width: calc((100% - 280px ) / 3); 
          padding: 15px 30px; 
          border: 2px solid #ddd; 
          border-radius: 10px; 
          text-align: center; 
          cursor: pointer; 
          transition: all 0.3s ease; 
          	  font-weight: bold; } 
      .category-btn ul { 
          font-size: 14px; 
          padding: 15px 20px; 
          text-align: left; 
          font-weight: normal; } 
      .category-btn.active { 
          background: #007bff; 
          color: white; 
          border-color: #007bff; } 
      .category-btn:hover:not(.active) { 
          background: #f0f0f0; } 
      .circle-numerics li { 
          list-style:none; } 
      .circle-numerics li:nth-child(1)::before { content: "① "; } 
      .circle-numerics li:nth-child(2)::before { content: "② "; } 
      .circle-numerics li:nth-child(3)::before { content: "③ "; } 
      .circle-numerics li:nth-child(4)::before { content: "④ "; } 
      #progress { 
          position: relative; 
          margin-bottom: 30px; } 
      #progress-bar { 
          position: absolute; 
          background: lightseagreen; 
          height: 5px; 
          width: 0%; 
          top: 50%; 
          left: 0; }
      #progress-num { 
          margin: 0; 
          padding: 0; list-style: none; 
          display: flex; 
          justify-content: space-between; } 
      #progress-num::before { 
          content: ""; 
          background-color: lightgray; 
          position: absolute; 
          top: 12px; 
          left: 0; 
          height: 5px; 
          width: calc(100% - 50px); 
          z-index: -1; } 
       #progress-num::after { 
          content: ""; 
          background-color: #007bff;
          position: absolute; 
          top: 12px; 
          left: 0; 
          height: 5px; 
          width: 35%; 
          z-index: -1; } 
      #progress-num.active::after {  
          width: 65%; } 
      #progress-num .step { 
          border: 3px solid lightgray; 
          border-radius: 100%; 
          width: 25px; 
          height: 25px; 
          line-height: 25px; 
          text-align: center; 
          background-color: #fff; 
          font-family: sans-serif; 
          font-size: 14px; 
          position: relative; z-index: 1; } 
      #progress-num .step.active { 
          border-color: #007bff; 
          background-color: #007bff; 
          color: #fff; 
          }
.duplicate_check label {
   width: 120px;
   float: left; 
   }
.duplicate_check input {
   float: fight; 
   }
.duplicate_check button {
   padding: 12px 30px;
    border-radius: 5px;
    border: 1px solid;
   }
             
.logout-btn::before{
    content:url(../images/logout.svg);
    width:20px;
    height:20px;
}