:root {
  --main-color: #00813f; /* 메인컬러 */
  --main-menu-color: #00813f; /* 메인메뉴, 전체메뉴, 서브메뉴 1뎁스 텍스트 컬러 및 팝업공지(열기/닫기)버튼 텍스트 컬러 등 일부용 */
  --footer-color: #00813f; /* 푸터 개인정보처리방침 전용 텍스트 컬러 */
  --text-color: #fff; /* 폰트컬러는 메인컬러가 설정된 부분의 보색이며, 메인컬러가 진한 경우는 #fff 설정, 메인컬러가 연한 경우는 #000 설정 */

/* 메뉴 라인색상 설정된 경우*/
  --line-color: #00813f;


/* 메뉴 배경색상 설정된 경우
  --main-menu-bg-color: #124ea8;
  --line-color: #124ea8;
*/

/* [필수확인사항] 메인컬러 적용 방법을 꼭!! 읽어본 후에 누구라도 한눈에 확인이 가능하도록 일관성 있게 작업해주세요~!!

=== 1. 메인 컬러 색상이 가시성이 좋은 경우(어두운 계열색상) 무조건!! 3개 메인컬러, 1개만 흰색
--main-color: 메인컬러 색상;
--main-menu-color: 메인컬러 색상;
--footer-color: 메인컬러 색상;
--text-color: #fff;

=== 2. 메인 컬러 색상이 가시성이 떨어지는 경우(밝은 계열색상) 1 메인컬러, 3 검정
--main-color: 메인컬러 색상;
--main-menu-color: #000; 메인컬러 계열의 진~한 색상으로 설정해줘도 좋습니다!!
--footer-color: #000; 디자인에 별도로 설정된 색상이 있는 경우는 그 색상을 적용해주면 됨!!
--text-color: #000; 메인컬러가 사용된 영역의 텍스트 컬러

=== 3. 메인메뉴 배경에 컬러가 들어가는 경우
메뉴 라인색상 설정된 경우 주석제거 및 컬러 설정

=== 4. 메인메뉴 라인의 색상이 변경되는 경우
메뉴 배경색상 설정된 경우 주석제거 및 컬러 설정

*/
}

/* popBtn */
.popBtn {color: var(--main-menu-color); border-color: var(--main-color);}

/* header */

/* header - 유틸리티 */
#header .topUtil .util_wrap > a.alarm {color: var(--text-color); background: var(--main-color);}
#header .topUtil .util_wrap > a.alarm.new:before {color: var(--text-color); background: var(--main-color);}

/* 검색 */
.box_search_0 .srch_btn {color: var(--text-color); background: var(--main-color);}
.box_search_0 .btnSearchClose {color: var(--text-color); background: var(--main-color);}

/* web navigation */
/* gnb common */
/* 메뉴 라인색상 설정된 경우*/
#gnb:before {background: var(--line-color);}

/* 메뉴 배경색상 설정된 경우
#gnb {background: var(--main-menu-bg-color);}
#gnb:before {background: var(--line-color);}
#gnb .depth01 > ul > li > a {color: var(--text-color);}
#nav.oneFull .depth01 > ul > li.on > a {color: var(--text-color) !important;}
#nav.oneDown .depth01 > ul > li.on > a {color: var(--text-color) !important;}
#nav.oneDown .depth02{ top:3rem;}
#nav.oneDown .depth02:before{ display: block;}
*/
#gnb .depth01 > ul > li.on > a {color: var(--main-menu-color);}
#gnb .depth01 > ul > li > a > span:before {background: var(--main-color);}
/* active */
#gnb .depth02 > ul > li.active > a,
#gnb .depth02 > ul > li > a:hover,
#gnb .depth02 > ul > li > a:focus{color: var(--main-menu-color);}

/* gnb : oneDown */
#nav.oneDown .depth01 > ul > li.on > a {color: var(--main-menu-color);}
#nav.oneDown .depth02 {border-color: var(--main-color);}

/* gnb : fullDown */
#nav.fullDown .depth01 > ul > li.on > a {color: var(--main-menu-color);}
#nav.fullDown .depth03 > ul {border-top-color: var(--main-color);}

/* gnb : oneFull */
/** oneFull:active **/
#nav.oneFull .depth02 > ul > li:not(.active) > a:focus,
#nav.oneFull .depth02 > ul > li:not(.active) > a:hover {color: var(--main-menu-color); border-color: var(--main-color);}
#nav.oneFull .depth02 > ul > li.dep.active > a {color: var(--text-color); background: var(--main-color); border-color: var(--main-color);}
#nav.oneFull .depth03 > ul > li > a:hover,
#nav.oneFull .depth03 > ul > li > a:focus {color: var(--main-menu-color);}

/* footer */
#footer {overflow: hidden;}
#footer .footer_link > ul > li a strong {color: var(--footer-color);}

/* NOTICE POPUP */
.btn_popup {color: var(--text-color); background: var(--main-color);}

/* 서브메뉴 */
/* 세로형 : typeVert */
.typeVert #sideContent h1 {color: var(--text-color); background-color: var(--main-color);}
.typeVert #sideContent .sideNavi > ul > li > ul {border-top-color: var(--main-color);}
/* active */
.typeVert #sideContent .sideNavi > ul > li.open > a {color: var(--main-menu-color); border-color: var(--main-color);}
.typeVert #sideContent .sideNavi > ul > li:not(.open) > a:hover,
.typeVert #sideContent .sideNavi > ul > li:not(.open) > a:focus {color: var(--main-menu-color);}


@media screen and (min-width: 1241px){
	/* 전체메뉴 */
	.fullmenu {color: var(--text-color); background: var(--main-color);}
	.fullmenuClose:focus,
	.fullmenuClose:hover {color: var(--text-color); background: var(--main-color);}

	/* 전체메뉴 */
	/* active */
	.popFullmenu .depth02 > ul > li.active > a,
	.popFullmenu .depth02 > ul > li > a:hover,
	.popFullmenu .depth02 > ul > li > a:focus {color: var(--main-menu-color);}
	.popFullmenu .depth02 > ul > li:not(.active) > a:focus,
	.popFullmenu .depth02 > ul > li:not(.active) > a:hover {color: var(--main-menu-color); border-color: var(--main-color);}
	.popFullmenu .depth02 > ul > li.dep.active > a {color: var(--text-color); background: var(--main-color); border-color: var(--main-color);}

	/* 가로형 : typeHori */
	.typeHori #sideContent ul.open > li.active > a {color: var(--text-color); background: var(--main-color);}
	.typeHori #sideContent li:not(.active) > a {color: var(--text-color); background: var(--main-color);}
	.typeHori #sideContent li:not(.active) > a:before {background: var(--text-color);}
}

@media screen and (max-width: 1240px){
	/* 전체메뉴 */
	.fullmenu {color: var(--text-color); background: var(--main-color);}

	/* 서브메뉴 */
	/* 세로형 : typeVert */
	.typeVert #sideContent {background: var(--main-color);}
	.typeVert #sideContent h1 {background: var(--main-color);}
	.typeVert #sideContent .sideNavi > ul > li > a {color: var(--text-color);}
	.typeVert #sideContent .sideNavi > ul > li > ul {border-top-color: var(--text-color);}
	.typeVert #sideContent .sideNavi > ul > li > ul > li > a {color: var(--text-color);}
	.typeVert #sideContent .sideNavi > ul > li > ul > li > a:before {background: var(--text-color);}
	.typeVert #sideContent .sideNavi > ul > li > ul > li > ul > li > a {color: var(--text-color); }
	.typeVert #sideContent .sideNavi > ul > li > ul > li > ul > li > a:before {background: var(--text-color);}
	/* active */
	.typeVert #sideContent .sideNavi > ul > li.open > a {color: var(--text-color); border-color: var(--text-color);}
	.typeVert #sideContent .sideNavi > ul > li:not(.open) > a:hover,
	.typeVert #sideContent .sideNavi > ul > li:not(.open) > a:focus {color: var(--text-color);}
	.typeVert #sideContent .sideNavi > ul > li > ul > li.open > a {color: var(--text-color);}
	.typeVert #sideContent .sideNavi > ul > li > ul > li:not(.open) > a:hover,
	.typeVert #sideContent .sideNavi > ul > li > ul > li:not(.open) > a:focus {color: var(--text-color);}
	.typeVert #sideContent .sideNavi > ul > li > ul > li > ul > li > a:hover,
	.typeVert #sideContent .sideNavi > ul > li > ul > li > ul > li > a:focus {color: var(--text-color);}

	/* 가로형 : typeHori */
	.typeHori #sideContent {background: var(--main-color);}
	.typeHori #sideContent h1 {color: var(--text-color); background: var(--main-color);}
	.typeHori #sideContent .sideNavi > ul > li > a {color: var(--text-color);}
	.typeHori #sideContent .sideNavi > ul > li > ul {border-top-color: var(--text-color);}
	.typeHori #sideContent .sideNavi > ul > li > ul > li > a {color: var(--text-color);}
	.typeHori #sideContent .sideNavi > ul > li > ul > li > a:before {background: var(--text-color);}
	.typeHori #sideContent .sideNavi > ul > li > ul > li > ul > li > a {color: var(--text-color);}
	.typeHori #sideContent .sideNavi > ul > li > ul > li > ul > li > a:before {background: var(--text-color);}
}