@charset "utf-8";

/* **************************************** *
 * 전체
 * **************************************** */



/* **************************************** *
 * 해더
 * **************************************** */
#header{ position:fixed; top:0; left: 0; z-index: 99; width:100%; height:56px; padding:0 16px; background-color: #fff; }
#header.sticky {position: sticky;}
.header.line { border-bottom: 1px solid #101010; }
.header.line:after { content:""; display: block; position: absolute; bottom: -1px; left: 0; width:0; height:1px; background: #EDEDED; transition: width .35s ease-out; }
.header.line.active:after { width:100%; }

.header_inner { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; }
.header_inner .back { flex:none; }
.header_inner .subject { display: flex; align-items: center; flex:1; overflow: hidden; width: 100%; height:100%; padding: 0 0 0 8px; }
.header_inner .util { flex:none; }
.header_inner .util .item { display: inline-block; }
.header_inner .util .item ~ .item { margin-left: 12px; }

#header.-BK {background: #101010; color: #FFFFFF;}

/* **************************************** *
 * 본문
 * **************************************** */
#header.sticky + #main {padding-top: 0;margin-top:-1px;}
#main { padding-top: 56px; padding-bottom: 64px; }

.container_header { position: relative; }
.container_body { position: relative; }
.container_body[aria-hidden=true]:after { content:""; display: block; position:fixed; top:0; left:0; z-index: 101; width:100%; height: 100%; background: #fff; }