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

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


/* 메뉴 배경색상 설정된 경우
  --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 .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 {background: var(--footer-bg);}
#footer address,
#footer .f_info {color: var(--text-color);}
#footer .copyright {color: var(--copy-color);}
#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);}
}