/*header*/
#header{ z-index:999; position:fixed; top:0; left:0; width:100%; background:rgba(255,255,255,1);  text-align:center; font-size:0;
    transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s;
}
#header  h1{ z-index:99; position:absolute; top:0; left:5%; width:18.6rem; height:8rem; line-height:8rem;  }
#header  h1 a{ display:block; background:url('../_img/comm/hd_logo.png') no-repeat center / 100%; font-size:0;  }


/*gnb*/
.gnb{ z-index:1;  text-align: center; } 
.gnb .dp1-box{ position:relative; display:inline-block; vertical-align: top; text-align:center; }
.gnb .dp1-box > a{ position:relative; height:8rem; padding:0 5rem; line-height:8rem;  display:block;  font-size:1.8rem; 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:#e6242e; }
.gnb .dp2-box{ display:none; left:0; width:100%;  background:#fff; padding-bottom:2rem; }
.gnb .dp2-box a{ display:block; padding:.75rem; font-size:1.6rem; 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;}


/*cs*/
.hd_cs{ position:absolute; top:0; right:5%; height:8rem; line-height:8rem;}
.hd_cs a{ display:inline-block; vertical-align: middle; padding:1rem 2rem; font-size:1.5rem; color:#fff; font-weight:500; line-height:1;  background:#e6242e; border-radius:4rem; }
.hd_cs a img{ margin-right:1rem;}

/*모바일 메뉴*/
#header .gnb_side{ z-index:30; position: absolute; top:0; right:15px; width: 26px; height:8rem; line-height:8rem;}
button.burger {
    position:relative;
    display:inline-block;
	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:inline-block !important; }

    /*모바일 메뉴*/
	#header div.circle.expand{ display:none !important; }
}
@media all and (max-width:1530px){
    /*header*/
    #header .logo{ left:15px;}
    #header .logo img{ width:20rem; }

    /*gnb*/
    .gnb .dp1-box > a{ padding:0 3rem; font-size:1.6rem; }
    .gnb .dp2-box a{ font-size:1.5rem; }

    /*cs*/
    .hd_cs{ right:15px;}

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

    /*gnb*/
    .gnb{ position:relative; top:unset; left:unset; margin-left:auto; 
        transform:translateX(0%); -webkit-transform:translateX(0%); -moz-transform:translateX(0%);
    }

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

    /*gnb*/
	.gnb{ position:fixed; visibility:hidden; height:0; overflow:hidden; }
	.gnb.open{ z-index:11; top:9rem; left:0; width:100%; height:calc(100vh - 8rem); 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; }

    /*cs*/
    .hd_cs{ right:50px;}
    .hd_cs a{ font-size:1.4rem;}
    .hd_cs a img{ width:2.2rem;}

	

}