/*header*/
#header{ z-index:99; position:fixed; top:0; left:0; width:100%; background:rgba(255,255,255,0); 
    transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;
}
#header.on{ background:rgba(255,255,255,0.3);}
#header > div.hd_top{ z-index:11; position:relative; border-bottom:1px solid rgba(255,255,2550,0.2); text-align: right; padding:1rem 0; font-size:0; 
    transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;
}
#header > div.hd_top a{ display:inline-block; vertical-align:top; height:3.2rem; line-height:3.2rem; border-radius:20px; text-align: center;  }
#header > div.hd_top a:not(.remote){  padding:0 2rem; margin-left:1rem;  background:#fff; font-size:1.4rem; color:#8a8c92;   }
#header > div.hd_top a.remote{ padding:0 1rem; background:#292a3e; color:#fff; font-size:1.4rem;}
#header > div.hd_top a.remote i{ display:inline-block; vertical-align: middle; margin-right:.5rem; font-size:1.8rem;}
#header > div.hd_bottom{ display:flex; align-items: center; height:8rem;}
#header > div.hd_bottom h1{ z-index:111; position:relative; }
#header > div.hd_bottom h1 img{ width:11.4rem; }


/*gnb*/
.gnb{ margin-left:auto;}
.gnb > ul{ font-size:0;}
.gnb .dp1-box{ display:inline-block; margin-right:3rem;}
.gnb .dp1-box:last-child{ margin-right:0; }
.gnb .dp1-box > a{ height:8rem; line-height:8rem; display:block; font-size:1.8rem; color:#102135; font-weight: 600; }
.gnb .dp2-box{ display:none; }

/*모바일 메뉴*/
#header .gnb_side{ z-index:30; position: absolute; top:50%; right:15px; width: 26px; margin-top:-15px;}
button.burger {
	height: 30px;
	width:100%;
    outline:none;  
}
#header div.x,
#header div.y,
#header div.z {
	position: absolute; margin: auto;
	top: 4px;
	background: #2e334f;
	border-radius:2px;
	-webkit-transition: all 200ms ease-out;
	   -moz-transition: all 200ms ease-out;
		-ms-transition: all 200ms ease-out;
		 -o-transition: all 200ms ease-out;
			transition: all 200ms ease-out;
}
#header div.x, div.y, div.z { height: 3px; width: 26px; }
#header div.y{top: 14px;}
#header div.z{top: 24px;}
#header div.coll{
	top: 15px;
	-webkit-transition: all 70ms ease-out;
	   -moz-transition: all 70ms ease-out;
		-ms-transition: all 70ms ease-out;
		 -o-transition: all 70ms ease-out;
			transition: all 70ms ease-out;
}


#header div.rotate30{
	-ms-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	-webkit-transition: all 50ms ease-out;
	   -moz-transition: all 50ms ease-out;
		-ms-transition: all 50ms ease-out;
		 -o-transition: all 50ms ease-out;
			transition: all 50ms ease-out;
}
#header div.rotate150{
	-ms-transform: rotate(150deg);
	-webkit-transform: rotate(150deg);
	transform: rotate(150deg);
	-webkit-transition: all 50ms ease-out;
	   -moz-transition: all 50ms ease-out;
		-ms-transition: all 50ms ease-out;
		 -o-transition: all 50ms ease-out;
			transition: all 50ms ease-out;
}

#header div.rotate45{
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
		-ms-transition: all 100ms ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
#header div.rotate135{
	-ms-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
		-ms-transition: all 100ms ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
#header div.circle{
	border-radius: 50%;
	width: 0px;
	height: 0px;
	position:absolute;
	top: 36px;
	right: 36px;
	background:#fff;
	opacity:1;
	z-index:10;
	-webkit-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	    -ms-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
#header div.circle.expand{
	width:3000px;
	height:3000px;
	top: -1500px;
	right: -1500px;
	-webkit-transition: all 1400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 1400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	    -ms-transition: all 1400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 1400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 1400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);

}

@media all and (min-width:992px){
    /*gnb*/
	.gnb{ display:block !important; }

    /*모바일 메뉴*/
	#header div.circle.expand{ display:none !important; }
}
@media all and (max-width:1630px){
    /*header*/
    #header .inner{ max-width:1400px; position: relative; margin:0 auto; padding:0 15px;   }
}
@media all and (max-width:1199.98px) {
    /*header*/
    #header .inner{ height:100px;}

    /*gnb*/
    .gnb .dp1-box > a{ font-size:1.6rem; }

}
@media all and (max-width:991.98px){
    /*gnb*/
	.gnb{ visibility:hidden; height:0; overflow:hidden; }
	.gnb.open{ z-index:11; position:fixed; top:15rem; left:0; width:100%; height:calc(100vh - 15rem); visibility: visible; text-align: center; padding:5rem 15px 10rem; overflow-y: auto;}
    .gnb .dp1-box { display:block; margin-right:0; margin-bottom:5rem;
		opacity:0;
		-webkit-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
		-moz-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
		-ms-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
		-o-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
		transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	}
    .gnb .dp1-box:last-child{ margin-bottom:0;}
	.gnb .dp1-box.animate{
		opacity:1;
		-webkit-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
		-moz-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
		-ms-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
		-o-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
		transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	}
    .gnb .dp1-box.animate:nth-of-type(1){
		transition-delay: 0.5s;
	}
	.gnb .dp1-box.animate:nth-of-type(2){
		transition-delay: 0.55s;
	}
	.gnb .dp1-box.animate:nth-of-type(3){
		transition-delay: 0.60s;
	}
	.gnb .dp1-box.animate:nth-of-type(4){
		transition-delay: 0.65s;
	}
	.gnb .dp1-box.animate:nth-of-type(5){
		transition-delay: 0.70s;
	}
	.gnb .dp1-box.animate:nth-of-type(6){
		transition-delay: 0.75s;
	}
    .gnb.open .dp1-box > a{ height:auto; line-height:1.6; font-size:2.5rem; font-weight:700; }
	

}
@media all and (max-width:767.98px) {
    /*header*/
    #header .inner{ height:70px;}
    #header > div h1{ max-width:200px; }

}
@media all and (max-width:575.98px) {
    /*header*/
    #header > div.hd_top a:not(.remote){ width:3.2rem; padding:0; font-size:0;}
    #header > div.hd_top a:not(.remote) i{ font-size:1.8rem; line-height:3.2rem;}
}