/*header*/
#header{
	position:fixed;
	z-index:200;
	width:100%;
	min-height:10rem;
	background:#fff;
}
#header.header_scroll{box-shadow:0px 0px 2px rgba(0,0,0,.2);}
/* 로고 */
#header h1{
	z-index: 29;
	position:absolute;
	top:2.9rem;
	left:3rem;
}
#header h1 > a{
	display:block;
}
/* 올메뉴 버튼 */
#header .gnb_side{
	position:absolute;
	top:2rem;
	right:3rem;
	z-index:30;
}
#header .all_menu_btn{
	position: relative;
}
#header .all_menu_btn button{
	position:relative;
	padding:0;
	border:0;
	width:6rem;
	height:6rem;
	outline:none;
	background:#ff88c2;;
	border-radius: 50%;
}
#header .all_menu_btn button > span{
	position:absolute;
	left:50%; top:50%;
	transform: translate(-50%, -50%);
	width:16px;
	height:2px;
	background:#fff;
	transition:all .3s
}
#header .all_menu_btn button > span:nth-child(1){
	margin-top:-8px;
	margin-left: 4.5px;
}
#header .all_menu_btn button > span:nth-child(2){
	width:25px;
}
#header .all_menu_btn button > span:nth-child(3){
	margin-top:8px;
	margin-left: -4.5px;
}
#header .all_menu_btn button:hover > span:nth-child(1),
#header .all_menu_btn button:hover > span:nth-child(3){
	margin-left: 0;
	width: 25px;
}
#header .all_menu_btn button.is-open > span:nth-child(2){
	width:0% !important;
}
#header .all_menu_btn button.is-open > span:nth-child(1),
#header .all_menu_btn button.is-open > span:nth-child(3){
	margin-left: 0;
	margin-top:0;
	width: 25px;
}
#header .all_menu_btn button.is-open > span:nth-child(1){
	transform: translate(-50%,-50%) rotate(45deg);
}
#header .all_menu_btn button.is-open > span:nth-child(3){
	transform: translate(-50%,-50%) rotate(-45deg);
}
@media(max-width:2000px){
	#header h1 img{max-width: 300px !important;}
}
@media(max-width:1800px){
  #header h1{top: 3rem;}
}
@media(max-width:1750px){
	#header h1 img{max-width: 250px !important;}
	#header .gnb_side {top: 2.5rem;}
	#header .all_menu_btn button {
    width: 5rem;
    height: 5rem;
	}
}
@media(max-width:991.98px){
	#header{min-height:8rem;}
	#header h1{top: 1.9rem; left: 2rem;}
	#header .gnb_side {top: 1.4rem; right: 2rem;}
}
@media(max-width:360px){
  #header h1 {top: 2.1rem;}
	#header h1 img{max-width: 220px !important;}
}


/*gnb*/
.gnb{
	position:relative;
	text-align:center;
	left:0;
	top:0;
	width:100%;
}
.gnb::after{
	content: '';
	z-index: -1;
	position: absolute;
	top: 10.3rem; left: 0;
	width:100%; height: 1px;
	background: #ddd;
}
.gnb > .gnb_container{
	display:inline-block;
	vertical-align:top;
	overflow: hidden;
	margin-left: 10%;
}
.gnb > .gnb_container > ul > li{
	float:left; width: 20rem;
	position: relative;
}
.gnb > .gnb_container > ul > li:last-child{width: 22rem;}
.gnb > .gnb_container > ul > li > a{
	position: relative;
	padding:3.5rem 3rem;
	display:block;
	font-size:2.2rem;
	font-weight: 500;
	color:#000;
	background: #fff;
}
.gnb > .gnb_container > ul > li > .bg{
	z-index: -1;
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 500px;
	background: #f4f4f4;
	opacity: 0;
}
.gnb > .gnb_container > ul > li:hover > .bg{
	opacity: 1;
}
.gnb > .gnb_container > ul > li > ul{
	position:relative;
	top:-1rem;
	transform: translateY(1rem);
	display:none;
}
.gnb > .gnb_container > ul > li > a::after{
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	opacity: 0;
	transition:all .3s;
	bottom: 0;
	height: 3px;
	background:#ff88c2;;
}
.gnb > .gnb_container > ul > li:hover > a::after{
	opacity: 1;
}
.gnb > .gnb_container > ul > li > ul > li{position: relative; z-index: 1;}
.gnb > .gnb_container > ul > li > ul > li:first-child{
	padding-top:1.5rem;
}
.gnb > .gnb_container > ul > li > ul > li:last-child{
	padding-bottom:5.5rem;
}
.gnb > .gnb_container > ul > li > ul > li > a{
	display:block;
	padding:1rem 2rem;
	text-align: center;
	font-size:1.8rem;
	font-weight: 500;
	color:#000;
	transition:all .3s
}
.gnb > .gnb_container > ul > li > ul > li > a:hover{color:#ff88c2;;}
@media(max-width:2000px){
  .gnb::after{top: 10rem; left: 0;}
	.gnb > .gnb_container{margin-left: 10%;}
	.gnb > .gnb_container > ul > li {width: 18rem;}
	.gnb > .gnb_container > ul > li > a {
    padding: 3.65rem 1.5rem;
    font-size: 2rem;
	}
  .gnb > .gnb_container > ul > li > ul > li > a{font-size: 1.6rem;}
}
@media(max-width:1750px){
	.gnb > .gnb_container > ul > li {width: 15rem;}
	.gnb > .gnb_container > ul > li:last-child {width: 16rem;}
  .gnb > .gnb_container > ul > li > a {font-size: 1.8rem;}
	.gnb > .gnb_container > ul > li > ul > li > a {padding: 1rem 1.5rem;}
}
@media(max-width:1500px){
	.gnb {display: none;}
}



/*all_menu*/
#gnb_all_menu{
	position:fixed;
	z-index:30;
	top:0;
	width:100%;
	height:100%;
	background:#fff;
	display:none;
	overflow:hidden;
}
#gnb_all_menu .all_menu_container{
	display:flex;
	height:100%;
}
#gnb_all_menu .title_visual{
	width:40rem;
	background: #ff88c2;;
	padding:3rem;
	text-align:center;
	padding-top:21rem;
	transform: translateX(-100%);
	transition:all .5s;
}
#header.all-menu-open .title_visual{
	transform: translateX(0%);
}
#gnb_all_menu .title_visual > div{
	color:#fff;
	filter: brightness(0) invert(1);
}
#gnb_all_menu .cate_container{
	padding:0px 8rem;
	padding-top:20rem;
	flex-grow: 1;
}
#gnb_all_menu .cate_container > ul{
	display:flex;
	justify-content: center;
}
#gnb_all_menu .cate_container > ul > li{
	width:100%;
	padding:1rem 2rem;
	opacity:0;
	transform: translateY(-5rem);
	-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);
}
#header.all-menu-open #gnb_all_menu .cate_container > ul > li{
	opacity:1;
	transform: translateY(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);
}
#header.all-menu-open #gnb_all_menu .cate_container > ul > li:nth-of-type(1){
	transition-delay: 0.2s;
}
#header.all-menu-open #gnb_all_menu .cate_container > ul > li:nth-of-type(2){
	transition-delay: 0.3s;
}
#header.all-menu-open #gnb_all_menu .cate_container > ul > li:nth-of-type(3){
	transition-delay: 0.4s;
}
#header.all-menu-open #gnb_all_menu .cate_container > ul > li:nth-of-type(4){
	transition-delay: 0.5s;
}
#header.all-menu-open #gnb_all_menu .cate_container > ul > li:nth-of-type(5){
	transition-delay: 0.6s;
}
#header.all-menu-open #gnb_all_menu .cate_container > ul > li:nth-of-type(6){
	transition-delay: 0.7s;
}
#header.all-menu-open #gnb_all_menu .cate_container > ul > li:nth-of-type(7){
	transition-delay: 0.8s;
}
#header.all-menu-open #gnb_all_menu .cate_container > ul > li:nth-of-type(8){
	transition-delay: 0.9s;
}
#header.all-menu-open #gnb_all_menu .cate_container > ul > li:nth-of-type(9){
	transition-delay: 1s;
}
#gnb_all_menu .cate_container > ul > li > a{
	color:#222;
	font-size:3.2rem;
	font-weight:600;
	border-bottom:1px solid #ddd;
	display:block;
	padding-bottom:2rem;
	margin-bottom:2rem;
  white-space: nowrap;
}
#gnb_all_menu .cate_container > ul > li > ul > li > a{
	color:#888; /* 변경 */
	display:block;
	padding:5px 3px;
	font-size:1.8rem;
	transition: all .3s;
}
#gnb_all_menu .cate_container > ul > li > ul > li > a:hover{
	color: #ff88c2;;
}
@media (max-width:2000px) {
	#gnb_all_menu .cate_container {padding: 15rem 6rem;}
	#gnb_all_menu .cate_container > ul{flex-wrap: wrap; justify-content: flex-start; gap: 3rem 0;}
	#gnb_all_menu .cate_container > ul > li{width: 25%;}
	#gnb_all_menu .cate_container > ul > li > a {font-size: 3rem;}
}
@media (max-width:1630px) {
	#gnb_all_menu .title_visual {width: 35rem;}
	#gnb_all_menu .cate_container {padding: 12rem 4rem;}
	#gnb_all_menu .cate_container > ul > li > a {font-size: 2.5rem;}
}
@media (max-width:1400px) {
  #gnb_all_menu .title_visual {display: none;}
	#gnb_all_menu .cate_container {padding: 10rem 3rem;}
	#gnb_all_menu .cate_container > ul {flex-wrap: wrap;}
	#gnb_all_menu .cate_container > ul > li{
		padding: 2rem;
	}
}
@media (max-width:991.98px) {
	#gnb_all_menu .cate_container {padding: 6rem 3rem; overflow-y: auto; height: 100vh;}
	#gnb_all_menu .cate_container > ul > li{width: 100%;}
	#gnb_all_menu .cate_container > ul{gap: 0 !important;}
}
@media (min-width:768px) and (max-width:1400px) {
  #gnb_all_menu .cate_container > ul > li > ul{
		display: flex !important;
		flex-wrap: wrap;
		gap: 1rem;
    height: auto !important;
	}
}
@media (max-width:767.98px) {
	#gnb_all_menu .cate_container > ul > li > ul{display: none;}
	#gnb_all_menu .cate_container > ul > li > a {font-size: 2.2rem; margin-bottom: 1rem; }
}