/* 상단 헤더 */

.header .header-inner {position: relative; text-align: center;}
header.header{
	position: fixed;
	width:100%;
}
header.open{
  border-bottom:1px solid #ddd;
}
.header .left{
	display: none;
}
.header ul.left{
	margin:0;
}

.header .left li>a{
	display:block;
	padding:0 12px;
}

.header .left li>a>i{
	height:64px;
	line-height:64px;
}
.header .header-logo {
	    position: absolute;
    top: 0;
    left: 12px;
    display: flex;
    align-items: center;
    height: 64px;
    line-height: 64px;
}
.header .header-logo .txt{
  font-family: Paperozi;
    font-weight: 3000;
    font-size: 19px;
    margin-left: 12px;
    padding-left: 12px;
    color: #333;
    position: relative;
}
.header .header-logo span.txt:before {
    position: absolute;
    content: '';
    border: 1px solid #333;
    top: 21px;
    left: 0;
    height: 21px;
}
.header .header-logo img {display: block;}
.header .header-gnb {display: block;}
.header.open .header-gnb .gnb-depth-1 {
    border-top:1px solid #ddd;

}
.header .header-gnb .gnb-depth-1 {
	margin:0;
	display: flex;
	text-align: center;
	float:right;
}
.header .header-gnb .depth-1 {position: relative;}
.header .header-gnb .depth-1 > .depth-1-link {
	display: flex;
    align-items: center;
    padding: 0 65px;
    font-weight: bold;
    height: 64px;
    line-height: 64px;
      font-size: 18px;
}
.header .header-gnb .depth-1.current > .depth-1-link .bullet{
	opacity: 1;
	
}
gnb-depth-2

.header .header-gnb .depth-1.current > a > span::before {content: ""; display: block; width:calc(100% + 4px);}
.header .header-gnb .depth-1 .gnb-depth-2 {
	position: absolute; 
	top: 100%; left: 0; 
	width: 100%; 
	padding-bottom: 35px; 
	visibility: hidden; 
	opacity: 0; 
	transition: all 0.1s;
	padding-top:20px;
}
.header.open .header-gnb .depth-1 .gnb-depth-2 {visibility: visible; opacity: 1; transition: all 0.5s;}
.header .header-gnb .depth-2 > .depth-2-link {display: block; padding: 8px 0; font-size: 17px; color: #777; transition: color 0.1s;}
.header .header-gnb .depth-2 > .depth-2-link:hover,
.header .header-gnb .depth-2 > .depth-2-link:focus {color: var(--subpage-color);; font-weight: 500;}

.header .mobile-gnb {display: none;}
.header .mobile-gnb .sidebar-btn {position: relative; width: 65px; height: 65px; z-index: 1;}
.header .mobile-gnb .sidebar-btn span {display: block; position: absolute; left: 20px; width: 24px; height: 2px; background-color: #222;}
.header .mobile-gnb .sidebar-btn span:nth-child(1) {top: 22px;}
.header .mobile-gnb .sidebar-btn span:nth-child(2) {top: 32px; transition: opacity 0s 0.15s;}
.header .mobile-gnb .sidebar-btn span:nth-child(3) {top: 42px;}
.header .mobile-gnb .sidebar-btn span:nth-child(1), .header .mobile-gnb .sidebar-btn span:nth-child(3) {transition: top 0.15s 0.15s, transform 0.15s, width 0.15s, left 0.15s;}
.header .mobile-gnb.open .sidebar-btn span:nth-child(2) {opacity: 0; transition: opacity 0.15s;}
.header .mobile-gnb.open .sidebar-btn span:nth-child(1), .header .mobile-gnb.open .sidebar-btn span:nth-child(3) {top: 32px; width: 30px; transition: top 0.15s, transform 0.15s 0.15s, width 0.15s 0.15s, left 0.15s 0.15s;}
.header .mobile-gnb.open .sidebar-btn span:nth-child(1) {left: 18px; transform: rotate(45deg);}
.header .mobile-gnb.open .sidebar-btn span:nth-child(3) {left: 18px; transform: rotate(-45deg);}
.header .mobile-gnb .sidebar-wrap {position: fixed; width: 100%; height: calc(100vh - 65px); top: 65px; left: 0; background-color: rgba(233,246,242,0.7); visibility: hidden; opacity: 0; transition: all 0.5s;}
.header .mobile-gnb.open .sidebar-wrap {visibility: visible; opacity: 1;}
.header .mobile-gnb .sidebar-wrap .sidebar {position: absolute; top: 0; right: 0; width: 100%; max-width: 375px; height: 100%; background-color: #fff; transform: translateX(100%); transition: all 0.5s;}
.header .mobile-gnb.open .sidebar-wrap .sidebar {transform: translateX(0);}
.header .mobile-gnb .gnb-depth-1 {height: 100%; overflow-y: auto;}
.header .mobile-gnb .depth-1 > .depth-1-link {display: flex; align-items: center; position: relative; padding: 0 60px 0 25px; height: 60px; font-size: 17px; font-weight: bold;}
.header .mobile-gnb .depth-1 > .depth-1-link:not(:only-child)::before {content: "▼"; display: block; position: absolute; top: 50%; right: 25px; transform: translateY(-50%); font-size: 10px;}
.header .mobile-gnb .depth-1.open > .depth-1-link:not(:only-child)::before {content: '▲';}
.header .mobile-gnb .depth-1 > .depth-1-link > span {position: relative; display: block; line-height: normal;}
.header .mobile-gnb .depth-1 > .depth-1-link > span::before {content: ""; display: block; position: absolute; left: -2px; bottom: 0; width: 0; height: 9px; transition: all 0.5s; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); z-index: -1; background-color: #60ccf6;}
.header .mobile-gnb .depth-1.open > .depth-1-link > span::before {width:calc(100% + 4px);}
.header .mobile-gnb .gnb-depth-2 {max-height: 0; overflow: hidden; padding: 0; background-color: #edf6fc; text-align: left; box-sizing: content-box; transition: all 0.35s ease-in-out;}
.header .mobile-gnb .depth-1.open .gnb-depth-2 {padding: 10px 0;}
.header .mobile-gnb .depth-2 > .depth-2-link {display: block; visibility: hidden; opacity: 0; padding: 7px 25px; font-size: 14px; font-weight: 500; color: #777; transition: all 0.35s;}
.header .mobile-gnb .depth-2 > .depth-2-link.active {color: #007ea5; font-weight: bold;} /* 현재 페이지 활성화 되어있음을 알리는 active 클래스 */
.header .mobile-gnb .depth-1.open .depth-2 > .depth-2-link {visibility: visible; opacity: 1;}


.header-gnb span.bullet {
    opacity: 0;
    position: absolute;
    background: url(/img/icon/bullet.png) no-repeat;
    width: 18px;
    height: 18px;
    z-index: 99;
    bottom: -9px;
    left: calc(50% - 9px);
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
}
.header.open .gnb_back{
  border-top:1px solid #ddd;

}
.header.open .gnb_back {
	display: block;
  width:100%;
}
.gnb_back{
  display: none;
  position: absolute;
  top:64px;
  bottom:0;
  width:600px;
  z-index:-1;
  overflow:hidden;
}

.gnb_deco:before, .gnb_deco:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: calc(50% - 380px);
    
    height: 100%;
    background: #bedeffcc;
}

.gnb_deco h6{
    
    position: absolute;
    font-size:32px;
    font-family: Paperozi;
  font-weight:bold;
        left: calc(50% - 563px);
      color: transparent;
  -webkit-text-stroke: 2px #03106f;
  text-stroke: 2px #03106f;
    top: 30%;
    z-index:1
    
}
.gnb_deco img{
    width: 185px;
    position: absolute;
    left: calc(50% - 473px);
    bottom: -48px;
    opacity: 0.3;

}
.gnb_deco h6>span:first-child{
  margin-right:12px;
}
.gnb_deco h6>span{
  float:left;

}

.gnb_deco h6 b{
  -webkit-text-stroke: 2px #ffffff;
  text-stroke: 2px #ffffff;
}
.gnb_deco:before {
    background: url(/img/page/home/dcu_center_2.png) no-repeat 40% 50% / cover;
}
.sidenav {
    
    overflow-x: hidden;
}
.sidenav>ul> li{
  border-bottom:1px solid #ddd;
}
.sidenav>ul> li.multi.active>a:after {
    transform: translateY(-35%) rotate(-135deg);
    border-color: #fff;
}
.sidenav>ul> li.multi>a:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-75%) rotate(45deg);
    width: 11px;
    height: 11px;
    border-right: 2px solid #505050;
    border-bottom: 2px solid #505050;
}


#slide-out .top{
  height:128px;
  position: relative;
  border-bottom:1px solid #ddd;  
}
#slide-out .top-bg:before,
#slide-out .top-bg:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: calc(40%);
    
    height: 100%;
    background: #bedeffcc;
}

.top-bg h6{
    position: absolute;
    font-size: 18px;
    font-family: Paperozi;
    font-weight: 900;
    left: calc(5%);
    color: transparent;
    -webkit-text-stroke: 1px #03106f;
    text-stroke: 1px #03106f;
    top: 30%;
    z-index: 1;
    
}
.top-bg img{
    width: 185px;
    position: absolute;
    left: calc(50% - 473px);
    bottom: -48px;
    opacity: 0.3;

}

.top-bg h6 B{
    
    
    -webkit-text-stroke: 1px #ffffff;
    text-stroke:  1px #ffffff;
    
    
}
#slide-out .top-bg:before {
    background: url(/img/bg/sv-bg-1.png) no-repeat 40% 50% / cover;
}


#slide-out .deco{
position: absolute;
    bottom: 0;
    width: 58%;
    opacity: 0.2;
    right:-28px;

}
#slide-out .top-bg h6>span:first-child{
  margin-right:12px;
}
#slide-out .top-bg h6>span{
  float:left;
}
@media (max-width: 1440px){
  .header-inner.layout {padding-right: 0;}
}
@media (max-width:1240px) {
  .header .header-gnb .depth-1 > .depth-1-link {padding: 0 45px;}
  
}
@media (max-width:994px) {
  .header {
	height: 64px; }
  .header .header-inner {text-align: right;}
 
  .header .header-logo{
	    position: absolute;
    	left:50%;
	
		-webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
    
    width: 150px;

  }
  .header .header-gnb {display: none;}
  .header .mobile-gnb {display: block;}
}
@media (max-width:500px) {
  html.not-scroll .header .header-logo {opacity: 0;}
  .header .mobile-gnb .sidebar-wrap .sidebar {max-width: 100%;}
}
/* 상단 헤더 End */


.header a.st-2>span{
  background-color: var(--btn-st3-color);
  color: var(--btn-st3-text-color);
  padding:4px 12px;
}