header {position: fixed; top: 0; width: 100%; z-index: 9;  transition: 400ms;}
header .pc_header {padding: 0;}
header .container_fix {display: flex;justify-content: space-between;align-items: center; width: 1790px;}
header .container_fix > .hd_right_menu {display: flex; align-items: center; gap: 80px;}
header .container_fix .hd_icons {display: flex; align-items: center; gap: 30px;}
header .logo_a {display: block;}
header .logo_b {display: none;}

.pc_header .container_fix > div.logo_box {z-index: 3;}
header .container_fix > .hd_right_menu {z-index: 3;}

/* Header / search */
header .search_btn {cursor: pointer;}
header .search_btn img {transition: 400ms;}
.search_wrap {position: fixed; top: 0; width: 100%; z-index: 10; background-color: #fff;height: 80px; visibility: hidden; opacity: 0; transition: 400ms;}
.search_close {position: absolute; top: 0; right: 0; width: 80px; height: 80px; background-color: #222}
.search_close .close_wrap{width: 35px; height: 35px; position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);cursor: pointer;}
.search_close .close_wrap span {position: absolute; width: 100%; height: 1px; background-color: #fff; top: 50%;}
.search_close .close_wrap span:first-child {transform: translateY(-50%) rotate(45deg);}
.search_close .close_wrap span:last-child {transform: translateY(-50%) rotate(-45deg);}
.search_box {display: flex; align-items: center; justify-content: center; height: 80px; max-width: 1100px; margin: 0 auto;}
.search_box form {flex-grow: 1;}
.search_box .header_search {display: flex; width: 100%;}
.search_box .header_search input {flex-grow: 1; border: none; padding-left: 30px; font-size: 18px;}
.search_box .header_search input::placeholder {color: #666;}
.search_box .search_submit {display: flex; justify-content: center; align-items: center; font-size: 18px; width: 130px; height: 46px; background-color: #277bff; color: #fff; border-radius: 24px !important;}
/* Header / search / on */
.search_wrap.on {visibility: visible; opacity: 1;}

/* Header / Toggle */
header .toggle_btn {cursor: pointer;}
header .toggle_btn span {display: block;width: 30px;height: 2px;background-color: #fff;transition: 400ms;}
header .toggle_btn span:first-child {margin-bottom: 8px; width: 15px;}
header .toggle_btn span:last-child {margin-top: 8px;}

/* Header / Gnb */
/* header .hd_nav .hd_nav_ul {display: flex; align-items: center; justify-content: center; gap: 75px;}
header .hd_nav .hd_nav_li {position: relative;}
header .hd_nav .hd_nav_sub {position: absolute; visibility: hidden; opacity: 0; top: calc(100% - 12px); left: 50%; transform: translateX(-50%); background-color: #fff; border-radius: 10px; border: 1px solid #f5f5f5; transition: 400ms; min-width: 150px; }
header .hd_nav .hd_nav_li:hover .hd_nav_sub {visibility: visible; opacity: 1;}
header .hd_nav .hd_nav_sub_ul {display: flex; flex-direction: column; gap: 15px;padding: 30px 25px;}
header .hd_nav .hd_nav_sub_a {font-size: 15px; color: #666; transition: 400ms;}
header .hd_nav .hd_nav_sub_li:hover a {color: #277bff;}
header .hd_nav .hd_nav_a {display: flex; justify-content: center; align-items: center; height: 80px; font-size: 18px; color: #fff; transition: 400ms; font-weight: 500;} */

/* Header / Gnb */
header .hd_nav {position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%); width: 100%;}
header .hd_nav .hd_nav_ul {display: flex; align-items: center; justify-content: center; gap: 80px;}
header .hd_nav .hd_nav_li {position: relative;}
header .hd_nav .hd_nav_sub {position: fixed; visibility: hidden; opacity: 0; left: 50%; transform: translateX(-50%); border-top: 1px solid #e9e5e0; transition: all 400ms; width: 1000%; z-index: 1;}
header .hd_nav .hd_nav_li:hover .hd_nav_sub {visibility: visible; opacity: 1;}
header .hd_nav .hd_nav_sub_ul {display: flex; justify-content: center; align-items: center; gap: 60px; background: #f8f5f0; height: var(--hd-height);}
header .hd_nav .hd_nav_sub_a {display: flex; justify-content: center; align-items: center; height: 75px; font-size: 17px; color: #a3988d; transition: all 400ms;}
header .hd_nav .hd_nav_a {display: flex; justify-content: center; align-items: center; height: var(--hd-height); font-size: 20px; color: #fff; transition: all 400ms; font-weight: 500; margin: 0 -40px; padding: 0 40px;}
header .hd_nav .hd_nav_sub_li:hover a {color: #665c52;}
header .hd_nav .hd_nav_li:hover  .hd_nav_a::before {content: ''; position: absolute; bottom: 0; width: 100%; height: 2px; background-color: #46372f;}

/* Header / Hover */
header.hover {background-color: #f8f5f0;}
header.hover .hd_nav .hd_nav_a {color: #46372f}
header.hover .toggle_btn span {background-color: #222}
header.hover .search_btn img {filter: brightness(0);}
header.hover .logo_a {display: none;}
header.hover .logo_b {display: block;}
/* Header / on */
header.on {background-color: #f8f5f0;}
header.on .hd_nav .hd_nav_a {color: #46372f}
header.on .toggle_btn span {background-color: #222}
header.on .search_btn img {filter: brightness(0);}
header.on .logo_a {display: none;}
header.on .logo_b {display: block;}
/* Header / sub */
header.sub {background-color: #f8f5f0;}
header.sub .hd_nav .hd_nav_a {color: #46372f}
header.sub .toggle_btn span {background-color: #222}
header.sub .hd_toggle_bar img {filter: brightness(0);}
header.sub .search_btn img {filter: brightness(0);}
header.sub .msearch_btn img {filter: brightness(0);}
header.sub .logo_a {display: none;}
header.sub .logo_b {display: block;}

/* Header / color */
header.color {border-bottom:1px solid #e9e5e0;}

@media (max-width: 1200px) {
	header .hd_nav .hd_nav_ul {gap: 50px;}
	header .container_fix > .hd_right_menu {gap: 50px;}
}

@media (max-width: 991px) {
	/* header.sub {background-color: #46372f;} */
	.m_header {padding: 10px 0;}
	.m_header .logo_box img {height: 38px;}
	header .msearch_btn img {transition: 400ms;}
	.m_header .container_fix .right_menu .right_list {height: 38px;}
	/* Header / search */
	.m_header .msearch_btn img {height: 20px;}
	.m_header .container_fix .right_menu .right_list li:last-child img {height: 18px;}
	.search_close {width: 50px; height: 50px;}
	.search_wrap {height: 50px;}
	.search_box {height: 50px; max-width: 260px;}
	.search_box img {height: 17px;}
	.search_box .search_submit {width: auto; height: auto; padding: 3px 7px; font-size: 12px;}
	.search_close .close_wrap {width: 20px; height: 20px;}
	.search_box .header_search input {padding-left: 20px;font-size: 14px; max-width: 160px;}

	/* Header / Hover */
	header.hover .msearch_btn img {filter: brightness(0);}
	header.hover .hd_toggle_bar img {filter: initial;}
	/* Header / Hover / on */
	header.on .msearch_btn img {filter: brightness(0);}
	header.on .hd_toggle_bar img {filter: initial;}
}