/* 컬러 */
:root{
    --mainColor : #1d62a5;
    --subColor : #1d62a5;
    --Color01 : #0c9662;
    --Color02 : #8cd0ff;
}

/* 통합검색 */
.totalSearch {width: 10rem; height: 1.9rem; border-radius: 1.9rem; background: #e9e9e9; padding-right: 1.9rem; position: relative; overflow: hidden;}
.totalSearch input {width: 100%; height: 1.9rem; line-height: 1.9rem; border-radius: 1.9rem; border: none; background: #eaeaea; padding: 0 0.5rem; font-family: '돋움', Dotum; font-size: 0.6rem;}
.totalSearch button {width: 1.9rem; height: 1.9rem; line-height: 1.9rem; border-radius: 1.9rem; border: none; background: var(--mainColor); padding: 0; font-size: 1.1rem; color: #fff; position: absolute; right: 0; top: 0;}
.totalSearch input::-webkit-input-placeholder,
.totalSearch input::placeholder {color: #555;}

#header::before {display: none;}/* gnb 상단라인 */

/* gnb color */
/* gnb : default */
#gnb {background: var(--mainColor);}/* gnb 배경색 */
#gnb::before {display: none;}/* gnb 하단라인 배경색 : 하단라인 색상 있을경우 background 활성화 */
#gnb .depth01 > ul > li.on > a{ color:#000;} /* 1차메뉴 active 텍스트 색상 */
#gnb .depth01 > ul > li > a {color: #fff;}/* 1차메뉴 텍스트 색상 */
#gnb .depth01 > ul > li > a:before{ background:var(--mainColor);} /* 1차메뉴 active underline 색상*/
#gnb .depth01 > ul > li > a > span:before{background:#dae7f8; } /* 1차메뉴 active 그림자 색상 */
#gnb .depth02 > ul > li > a{ color:#111; }/* 2차메뉴 텍스트 색상 */
#gnb .depth01 > ul > li > a > .dotBox .dot{ background:var(--Color02);} /* 1차메뉴 active 불릿 색상 */
#gnb .depth01 > ul > li > a > .dotBox .dot.md{ background:var(--Color02);} /* 1차메뉴 active 불릿 센터 색상 */
/* gnb : fullDown */
#nav.fullDown .depth02:before{background: var(--mainColor);}/* 2차메뉴 active 배경색 >> 명도 높을때 글자 color 변경 */
#nav.fullDown .depth01 > ul > li.on > .depth02 > ul > li > a{ color: #fff;}/* 2차메뉴 active 텍스트 효과 */
#nav.fullDown .depth01 > ul > li .depth02 > ul > li > a:hover,
#nav.fullDown .depth01 > ul > li .depth02 > ul > li > a:focus,
#nav.fullDown .depth01 > ul > li .depth02 > ul > li.active > a{ background:var(--mainColor); color: #fff;}/* 2차메뉴 active 효과 */
/* gnb : oneDown */
#nav.oneDown .depth02 > ul > li > a:hover,
#nav.oneDown .depth02 > ul > li > a:focus,
#nav.oneDown .depth02 > ul > li.dep.active > a{ color:var(--mainColor);}/* 2차메뉴 active 텍스트 색상 */
/* gnb : oneFull */
#nav.oneFull .depth02 > ul > li > a:hover,
#nav.oneFull .depth02 > ul > li > a:focus,
#nav.oneFull .depth02 > ul > li.dep.active > a{ color:#fff; background:var(--mainColor); }/* 2차메뉴 active 배경색 */
#nav.oneFull .depth02>ul>li.dep>a:hover>span:before,
#nav.oneFull .depth02>ul>li.dep>a:hover>span:after,
#nav.oneFull .depth02>ul>li.dep>a:focus>span:before,
#nav.oneFull .depth02>ul>li.dep>a:focus>span:after,
#nav.oneFull .depth02>ul>li.dep.active>a>span:before,
#nav.oneFull .depth02>ul>li.dep.active>a>span:after{background: #fff;} /* 2차메뉴 +, - 표시 색상 */
#nav.oneFull .depth03 > ul > li > a:before{background:var(--mainColor);}/* 3차메뉴 블릿 색상 */

/* footer */
#footer { border-top:1px solid #d1d8e4; background: #303a41; color: rgba(255,255,255,0.8);}/* footer 배경, 폰트색상, border */
.footer_link li a {color: #fff;}
.footer_link li a:before{ border-left:1px solid #54595c; }/* footer link 영역 라인색상 */
.footer_link li a strong { color: var(--Color02); }/* footer link 강조 폰트색상 */
#footer .copyright {color: rgba(255,255,255,0.8);}/* copyright 폰트색상 */
#footer .btn_top{ background:var(--Color02); color:#fff;}/* footer 상단이동 버튼 색상 */

/* 모바일 : 메뉴  */
#header .mBtn.mNav{ background: var(--Color01); color:#fff; border-radius: 50%; }/* 모바일 메뉴 버튼 */
#mNav #mNavClose { border-radius:50%;}/* 모바일 메뉴 닫기 버튼 */
#mgnb li.dep.active > .depth02 { border-color:var(--Color01); }/* 2차메뉴 active border 색상 */
#mgnb .depth02:before { background:var(--Color01); }/* 2차메뉴 backgound 색상 */

/* 모바일 : 검색 */
#header .mBtn.mSearch{ background: var(--subColor); color:#fff; border-radius: 50%;}/* 모바일 검색 버튼 */
#mSearch .btnSearch { background: var(--subColor); }
#mSearch .btnClose {border-radius: 50%; } /* 모바일 검색 닫기 버튼 */

/* 서브페이지 : lnb */
#lnb h2{ color:#fff; background: var(--mainColor);} /* 레프트메뉴 타이틀 */
/* 서브페이지 : lnb:active */
#lnb .dep01 > li.active > a{ border-color: var(--mainColor);}

/* location : snsBox */
.snsBox button.active,
.snsBox button:hover,
.snsBox button:focus{ color:#fff; border-color:var(--subColor); background:var(--subColor);}

@media (max-width:1024px){
    /* header */
    #header { border-bottom: 3px solid var(--mainColor); } /* 모바일 헤더 하단 라인 */
}