/*header*/
#header{ z-index:999; position:fixed; top:0; left:0; width:100%; height:10rem;  display:flex; align-items: center; padding-left:7%; background:rgba(255,255,255,1);  
    transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;
}
#header  h1{ z-index:99; position:relative; }


/*gnb*/
.hd_dummy{ display:none; z-index:1;  position:absolute; top:100%; left:0; width:100%; height:26rem; background:#fff; }
.gnb{ z-index:1; position:absolute; top:0; left:50%; 
    transform:translateX(-50%); -webkit-transform:translateX(-50%); transform:translateX(-50%);
}
.gnb > ul{ font-size:0;}
.gnb .dp1-box{ position:relative; display:inline-block; text-align:center; }
.gnb .dp1-box > a{ position:relative; height:10rem; width:17rem; line-height:10rem; display:block; font-size:2rem; color:#333; font-weight: 700; 
    transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;
}
.gnb .dp1-box:hover > a{ color:#00529c; }
.gnb .dp2-box{ display:none;  position:absolute; top:100%; height:26rem;  left:0; width:100%;  background:#fff; }
.gnb .dp2-box a{ display:block; padding:.75rem; font-size:1.8rem; color:#666; font-weight:500;
    transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;
}
.gnb .dp2-box a:hover{ color:#000;}

/*lang*/
.hd_lang{ position:relative; font-size:0; margin-left:auto; }
.hd_lang button{ font-size:1.5rem; font-weight:700; outline:none;  }
.hd_lang ul{ display:none;  position:absolute; top:120%; left:50%; width:8rem; padding:1rem 0; background:rgba(0,0,0,0.9); text-align:center; 
    transform:translateX(-50%); -webkit-transform:translateX(-50%); transform:translateX(-50%);
}
.hd_lang li a{ display:block; font-size:1.4rem; color:#fff;}

/*cs*/
.hd_cs{ position:relative; margin-left:4rem;}
.hd_cs a{ display:block; padding-left:9.5rem; background-position:left 4rem top 3rem; background-repeat:no-repeat; }
.hd_cs .tel{ height:10rem; width:30rem; line-height:10rem; font-size:2.4rem; color:#fff; font-weight:700; 
    background-color:#00529c; background-image:url('../_img/comm/hd_call_ico.png');
}
.hd_cs .contact{ position:absolute; top:100%; left:0; width:100%; padding-top:3.5rem; padding-bottom:3.5rem; font-size:2rem; color:#fff; font-weight:700; 
    background-color:rgba(0,0,0,0.9); background-image:url('../_img/comm/hd_phone_ico.png');
}
.hd_cs .contact img{ display:block; margin-top:2rem;}

/*모바일 메뉴*/
#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{ padding-left:15px; }
    #header .logo img{ width:20rem; }

    /*gnb*/
    .gnb .dp1-box > a{ width:12rem; font-size:1.8rem; }
    .gnb .dp2-box a{ font-size:1.5rem; }

    /*lang*/
    .hd_lang button{ font-size:1.4rem; }
    .hd_lang li a{ font-size:1.2rem; }

    /*cs*/
    .hd_cs{ margin-left:2rem; }
    .hd_cs a{ padding-left:6rem; background-size:3rem; background-position:left 2rem top 3.5rem;  }
    .hd_cs .tel{ width:22rem; font-size:2rem; }
    .hd_cs .contact img{ margin-top:1rem; }

}
@media all and (max-width:1199.98px) {
    /*header*/
    #header{ padding:0 15px; }

    /*gnb*/
    .gnb{ position:relative; top:unset; left:unset; margin-left:auto; 
        transform:translateX(0%); -webkit-transform:translateX(0%); -moz-transform:translateX(0%);
    }
    .gnb .dp1-box > a{ width:13rem;  font-size:1.6rem; }
    .gnb .dp2-box a{ font-size:1.4rem; }

    /*lang*/
    .hd_lang{ margin-left:2rem; }

    /*cs*/
    .hd_cs{ display:none; }

}
@media all and (max-width:991.98px){
    /*header*/
    #header{ height:9rem; }
    #header .logo img{ width:15rem;}

    /*gnb*/
	.gnb{ position:fixed; visibility:hidden; height:0; overflow:hidden; }
	.gnb.open{ z-index:11; top:9rem; left:0; width:100%; height:calc(100vh - 9rem); visibility: visible; text-align: center; padding:5rem 15px 10rem; overflow-y: auto;}
    .gnb .dp1-box { display:block; margin-right:0; margin-bottom:3rem;
		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 .dp1-box > a{ display:inline-block; height:auto; width:auto; line-height:1.6; font-size:2.5rem; font-weight:700; }
    .gnb .dp1-box > a:after{ content:none; }
    .gnb .dp2-box{ position:static; height:auto; }
    .gnb .dp1-box:hover .dp2-box{ background:#fff; }

    /*lang*/
    .hd_lang{ margin-left:auto; margin-right:5rem;}
	

}