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: var(--header-width);}
header .container_fix > .hd_left_menu {display: flex; align-items: center; gap: 55px;}
header .container_fix > .hd_right_menu {display: flex; align-items: center; gap: 55px;}
header .container_fix .hd_icons {display: flex; align-items: center; gap: 45px; z-index: 9;}
header .logo_a {display: block;}
header .logo_b {display: none;}
.pc_header .container_fix {height: var(--header-height);}
.pc_header .container_fix > div.logo_box {z-index: 9;}

/* Header / search / style1 */
/* header .search_btn {cursor: pointer;}
header .search_btn img {transition: 400ms;}
.search_wrap {position: fixed; top: 0; width: 100%; z-index: 10; background-color: var(--color-white);height: var(--header-height); visibility: hidden; opacity: 0; transition: 400ms;}
.search_close {position: absolute; top: 0; right: 0; width: 80px; height: var(--header-height); background-color: var(--color-black);}
.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: var(--color-white); 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(--header-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: var(--color-white); border-radius: 24px !important;} */

/* Header / search / style2 */
header .search_btn {cursor: pointer;}
header .search_btn img {transition: var(--transition);}
header .login_btn img {transition: var(--transition);}
.search_wrap {position: fixed;width: 100%;top: 0;z-index: 10;background-color: var(--secondary-color);visibility: hidden;opacity: 0;transition: var(--transition);padding: 70px 0; box-shadow: 0 0 67px rgba(72,44,0,0.15);}
.search_close {position: absolute; top: 0; right: 0; width: 80px; background-color: var(--color--black);}
.search_box {display: flex; align-items: center; justify-content: center; flex-direction: column; max-width: 600px; margin: 0 auto;}
.search_box form {width: 100%;}
.search_box .header_search {display: flex; width: 100%; position: relative; height: 40px;}
.search_box .header_search input {flex-grow: 1; border: none; font-size: 16px; border-bottom: 1px solid var(--primary-color); font-weight: 500; background-color: var(--secondary-color); padding: 25px 0;}
.search_box .header_search input::placeholder {color: #3d2500; opacity: 0.6; font-weight: 400;}
.search_box .search_submit {display: flex; justify-content: center; align-items: center; background: transparent; border: none;position: absolute;top: 50%;right: 0;transform: translateY(-50%);}

/* Header / search / on */
.search_wrap.on {visibility: visible; opacity: 1;}

/* Header / search / keyword */
.search_box .search_popular {display: flex; width: 100%; gap: 50px; margin-top: 30px; position: relative;}
.search_box .search_popular h5 {font-size: 16px; font-weight: 500; flex-shrink: 0; margin-top: 10px; color: var(--primary-color);}
.search_box .search_popular .miso-keyword {display: flex; line-height: 1; height: auto; flex-wrap: wrap; gap: 8px;}
.search_box .search_popular .miso-keyword > a {display: flex; justify-content: center; letter-spacing: initial;padding-right: 0;border: 1px solid var(--primary-color); border-radius: 16px; font-size: 16px; font-weight: 300; transition: all 400ms; color: var(--primary-color); min-width: 0; padding: 8px 24px;}
.search_box .search_popular .miso-keyword > a::after {display: none;}

.search_box .search_popular .miso-keyword > a:hover {color: var(--color-white); background: var(--primary-color);}


/* Header / search / on */
.search_wrap.on {visibility: visible; opacity: 1;}

/* Header / login */
header .login_btn img {transition: 400ms;}

/* Header / Toggle */
header .toggle_btn {cursor: pointer;}
header .toggle_btn span {display: block;width: 20px;height: 2px;background-color: var(--color-white);transition: 400ms; margin-left: auto;}
header .toggle_btn span:first-child {margin-bottom: 6px;}
header .toggle_btn span:last-child {margin-top: 6px; width: 30px;}

header.x .toggle_btn {width: 30px; height: 20px;}
header.x .toggle_btn span {position: absolute; width: 24px; top: 50%; margin: 0;}
header.x .toggle_btn span:first-child {transform: translateY(-50%) rotate(45deg);}
header.x .toggle_btn span:last-child {transform: translateY(-50%) rotate(-45deg);}
header.x .toggle_btn span:nth-child(2) {display: none;}



/* Header / Gnb / style1 */
header .hd_nav .hd_nav_ul {display: flex; align-items: center; justify-content: center; gap: 0;}
header .hd_nav .hd_nav_li {position: relative; width: 180px;}
header .hd_nav .hd_nav_sub {position: absolute; visibility: hidden; opacity: 0; top: calc(100% - 30px); left: 50%; transform: translateX(-50%); background-color: var(--secondary-color); border-radius: 0; border: 1px solid var(--secondary-color); transition: 400ms; min-width: 170px; box-shadow: 23px 23px 40px rgba(61, 37, 0, 0.08);}
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: 20px;padding: 25px 25px; font-size: 15px; }
header .hd_nav .hd_nav_sub_a {font-size: 15px; color: #666; transition: 400ms;}
header .hd_nav .hd_nav_sub_li a {color: var(--primary-color); opacity: 0.6; transition: all 400ms; line-height: 1.5;}
header .hd_nav .hd_nav_sub_li:hover a {color: var(--primary-color); opacity: 1;}
header .hd_nav .hd_nav_a {display: flex; justify-content: center; align-items: center; height: var(--header-height); font-size: 18px; color: var(--color-white); transition: 400ms; font-weight: 500;}

/* Header / Gnb / style2 */
/* 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; height: var(--header-height)}
header .hd_nav .hd_nav_li {position: relative;}
header .hd_nav .hd_nav_sub {position: fixed; visibility: hidden; opacity: 0; margin-top: -1px; left: 50%; transform: translateX(-50%); border-top: 1px solid var(--border-color); 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: var(--color-white); height: 75px;}
header .hd_nav .hd_nav_sub_a {display: flex; justify-content: center; align-items: center; height: 75px; font-size: 17px; color: #1c1c1c; transition: all 400ms;}
header .hd_nav .hd_nav_a {display: flex; justify-content: center; align-items: center; height: var(--header-height); font-size: 20px; color: var(--color-white); transition: all 400ms; font-weight: 500; margin: 0 -40px; padding: 0 40px;}
header .hd_nav .hd_nav_sub_li:hover a {color: var(--primary-color);}
header .hd_nav .hd_nav_li:hover .hd_nav_a::before {content: ''; position: absolute; bottom: 0; width: 100%; height: 2px; background-color: var(--primary-color);} */

/* Header / Icon */
header .search_btn img {filter: brightness(0) invert(1);}
header .login_btn img {filter: brightness(0) invert(1);}

/* Header / Hover */
header.hover {background-color: var(--secondary-color);}
header.hover .hd_nav .hd_nav_a {color: var(--primary-color);}
header.hover .toggle_btn span {opacity: .7; background-color: var(--primary-color);}
header.hover .search_btn img {filter: initial;}
header.hover .login_btn img {filter: initial;}
header.hover .logo_a {display: none;}
header.hover .logo_b {display: block;}
/* Header / on */
header.on {background-color: var(--secondary-color);}
header.on .hd_nav .hd_nav_a {color: var(--primary-color);}
header.on .toggle_btn span {opacity: .7; background-color: var(--primary-color);}
header.on .search_btn img {filter: initial;}
header.on .login_btn img {filter: initial;}
header.on .logo_a {display: none;}
header.on .logo_b {display: block;}
/* Header / sub */
header.sub {background-color: var(--secondary-color);}
header.sub .toggle_btn span {opacity: .7; background-color: var(--primary-color);}
header.sub .hd_nav .hd_nav_a {color: var(--primary-color);}
header.sub .hd_toggle_bar img {filter: inherit;}
header.sub .search_btn img {filter: inherit;}
header.sub .msearch_btn img {filter: inherit;}
header.sub .login_btn img {filter: inherit;}
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: 11px 0;}
	.m_header .logo_box img {height: 28px;}
	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_wrap {top: 0; padding: 0;}
	.search_wrap .flex-box {width: 100%; align-items: center; justify-content: center;}
	.search_wrap .msearch_close_area {width: 50px;height: 50px;display: flex;justify-content: center;align-items: center; border-left: 1px solid rgba(113,106,94, 0.1); border-bottom: 1px solid rgba(113,106,94, 0.1);}
	.search_box .header_search {height: 50px; }
	.search_box .header_search input {border-bottom: 1px solid rgba(113,106,94, 0.1); padding: 0 15px; font-size: 14px;}
	.search_box .search_submit {right: 15px;}
	.search_box .search_submit img {height: 20px;}
	.search_box .search_popular {flex-direction: column; gap: 15px; margin-top: 0; padding: 15px 15px 30px;}
	.search_box .search_popular .miso-keyword > a {font-size: 12px; border-radius: 16.5px; min-width: 0;}

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