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: 1630px;}
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;}

/* 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: var(--hd-height); visibility: hidden; opacity: 0; transition: 400ms;}
.search_close {position: absolute; top: 0; right: 0; width: 80px; height: var(--hd-height); 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: var(--hd-height); 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: 24px;height: 2px;background-color: #fff;transition: 400ms;}
header .toggle_btn span:first-child {margin-bottom: 8px;}
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_a {display: flex; justify-content: center; align-items: center; height: var(--hd-height); font-size: 25px; color: var(--bk-font); transition: 400ms; font-weight: 500;}
header .hd_nav .hd_nav_sub {position: absolute; top: 100%; padding: 30px 0 80px; visibility: hidden; opacity: 0; transition: all 400ms;}
header .hd_nav_sub_ul {display: flex; flex-direction: column; gap: 20px;}
header .hd_nav_sub_a {color: #fff; font-size: 18px; line-height: 1.6;}
/* 배경추가 */
header .pc_header::before {content: ''; position: absolute; top:100%; background-color: var(--bg-hover); width: 100%; border-top: 1px solid rgba(255, 255, 255, .3);}
header .hd_nav .hd_nav_ul:hover .hd_nav_sub {visibility: visible; opacity: 1;}

/* Header / Hover */
header.hover {background-color: var(--bg-hover);}
header.hover .hd_nav .hd_nav_a {color: var(--wh-font);}
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: var(--bg-hover);}
header.on .hd_nav .hd_nav_a {color: var(--wh-font);}
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: #f8f9fb;}
header.sub .hd_nav .hd_nav_a {color: var(--wh-font);}
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;}

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

@media (max-width: 991px) {
	.m_header {padding: 10px 0;}
	.m_header .logo_box img {height: 30px;}
	header .msearch_btn img {transition: 400ms;}
	.m_header .container_fix .right_menu .right_list {height: 30px;}
	/* 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: brightness(0) invert(1);}
	/* Header / Hover / on */
	header.on .msearch_btn img {filter: brightness(0);}
	header.on .hd_toggle_bar img {filter: brightness(0) invert(1);}
}