/* 전체 레이아웃 공통 */
html {min-width:100%;}
#wrap {position: relative;}
#wrap::before {content:''; position:fixed; width:100%; height: 100%; top:0; left:0; background:rgba(0,0,0,.15); z-index: 0; transition:all .3s; opacity:0;} 
#wrap.dark::before {opacity:1; z-index: 4;}
.container {width:100%;}

/* header */
#header {background:#4a6ee0; color:#fff; position: relative; z-index: 5;}
#header .top-area {padding-top:20px; }
#header .top-area::after {content:''; display:block; clear:both;}
#header .logo {display:inline-block; margin-left: 6px; margin-right: 48px;}
#header .logo a {display:block; padding-top:10px;}

#header .btn-list {display:inline-block; }
#header .btn-list > li {display:inline-block; margin-right:10px;}
#header .btn-list > li:last-child {margin-right: 0;}
#header .btn-list > li > a {display:block; font-size:15px; height:31px; text-align:center; min-width:92px; background:#6e8be6; padding:6px 20px; margin:16px 0 5px;}
#header .btn-list > li > a.point {background-color:#293f81;}

#header .util1 {float:right;}
#header .util1 .list {display:inline-block; margin-right:33px; vertical-align: middle;}
#header .util1 .list > li {display:inline-block; margin-right:28px;}
#header .util1 .list > li:last-child {margin-right: 0;}
#header .util1 .list > li > a {display:block; position:relative; height:52px; padding-right:11px;}
#header .util1 .list > li > a i {font-size:33px; padding-top:10px;}
#header .util1 .list .count {position:absolute; top:9px; right:0; width:20px; height:20px; border-radius:50%; background:#e04a86; text-align:center; font-size:11px; line-height:20px; font-weight:400;}

#header .util1 .user {display:inline-block; vertical-align: middle;}
#header .util1 .user .profile {display:block; padding-right:24px; position:relative;}
#header .util1 .user .profile::before {content:'\e936'; font-family:'xeicon'; font-size:20px; position:absolute; top:50%; transform:translateY(-50%); right:0;}
#header .util1 .user .profile .picture {width:52px; height:52px; border:4px solid #fff; border-radius:50%; overflow:hidden; position:relative; z-index: 2;}
#header .util1 .user .profile .picture img {display:block; width:52px; height:52px; position:absolute; top:-4px; left:-4px; z-index: 1;}

#header .menu-area {margin-top:42px; position: relative; z-index: 1;}
#header .menu-area::after {content:''; display:block; clear:both;}
#header nav {float:left;}
#header #gnb {position: relative; z-index: 1;}
#header #gnb::after {content:''; display:block; clear:both;}
#header #gnb > li {float:left; margin-left:-5px; position: relative; height:60px;}

#header #gnb > li:nth-child(1) {z-index: 10; margin-left: 0;}
#header #gnb > li:nth-child(2) {z-index: 9;}
#header #gnb > li:nth-child(3) {z-index: 8;}
#header #gnb > li:nth-child(4) {z-index: 7;}
#header #gnb > li:nth-child(5) {z-index: 6;}
#header #gnb > li:nth-child(6) {z-index: 5;}
#header #gnb > li:nth-child(7) {z-index: 4;}
#header #gnb > li:nth-child(8) {z-index: 3;}
#header #gnb > li:nth-child(9) {z-index: 2;}
#header #gnb > li:nth-child(10) {z-index: 1;}
#header #gnb > li > a {display:block; min-width:158px; border-top-left-radius: 30px; height:60px; border-top-right-radius: 30px; background-color:#3855b2; text-align:center; font-size:16px; padding:20px 5px; box-shadow:6px 2px 7px rgba(0,0,0,.04); transition:all .3s;}
#header #gnb > li a::before {content:''; width:100%; height:1px; background:inherit; position:absolute; bottom:0; left:0; z-index: 2;}
#header #gnb > li.active > a {background:#f2f7fc; color:#4a6ee0; font-weight: 600; box-shadow:none;}
#header #gnb > li.on > a {background-color:#fff; color:#4a6ee0; font-weight: 600; box-shadow:none;}

#header #gnb .depth2 {position:absolute; top:60px; left:0; color:#333; background:#fff; display:inline-block; padding:30px 20px; min-width:210px; transition:all .3s; opacity:0; visibility:hidden; z-index: -1;} 
#header #gnb > li.on .depth2 {opacity:1; visibility:visible; z-index: 1;}
#header #gnb .depth2 > li {margin-bottom: 15px; position:relative; padding-left:20px;}
#header #gnb .depth2 > li:last-child {margin-bottom: 0;}
#header #gnb .depth2 > li:hover {color:#4a6edf;}
#header #gnb .depth2 > li > a {display:block;}
#header #gnb .depth2 > li::before {content:'\e930'; font-family: 'xeicon'; position:absolute; top:0; left:-4px; transform:rotate(90deg);}
#header #gnb .depth3 {margin-top:15px;}
#header #gnb .depth3 > li {margin-bottom:15px; position:relative; padding-left:10px; color:#333;}
#header #gnb .depth3 > li::before {content:''; width:4px; height:1px; background:#333; position:absolute; top:8px; left:0;}
#header #gnb .depth3 > li:last-child {margin-bottom: 0;}
#header #gnb .depth3 > li:hover {color:#4a6edf;}
#header #gnb .depth3 > li:hover::before {background-color:#4a6edf;}
#header #gnb .depth3 > li > a {display: block; font-size:15px;}

#header .util2 {float:right;}
#header .util2 .links {display:inline-block; padding-top:10px; vertical-align:middle; margin-right:30px;}
#header .util2 .links > li {display:inline-block; margin-right:10px;}
#header .util2 .links > li:last-child {margin-right: 0;}
#header .util2 .links > li > a {display:block; border-radius:30px; font-size:15px; text-align:center; min-width:90px; height:35px; background-color:#6e8be6; padding:7px 10px;}
#header .util2 .links > li > a.point {background-color:#293f81;}
#header .util2 .links > li > a:hover {text-decoration:underline;}
#header .util2 .menu {display:inline-block; vertical-align:middle;}
#header .util2 .menu > li {display:inline-block; margin-right:25px;}
#header .util2 .menu > li:last-child {margin-right: 0;}
#header .util2 .menu > li > a {display:block; font-size:25px; text-align:center; }