:root {
	--color-white: #fff;
	--color--black: #222;
	--color-point: #277bff;
	--font--grey: #666;
	--hd--container: 1790px;
	--main--container: 1510px;
	--transition: 400ms;
	--hd-height: 80px;
	--hd-m-height: 30px;
	--search-m-height : 50px;
}

/* html.fixed {
	position: fixed;
} */

.br_mob {display: none;}

@media (max-width:991px) {
	.br_mob {display: block;}
}



header {position: fixed; top: 0; width: 100%; z-index: 9;  transition: var(--transition);}
header .pc_header {padding: 0;}
header .container_fix {display: flex;justify-content: space-between;align-items: center; width: var(--hd--container);}
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: var(--transition);}
.search_wrap {position: fixed; top: 0; width: 100%; z-index: 10; background-color: var(--color-white);height: var(--hd-height); visibility: hidden; opacity: 0; transition: var(--transition);}
.search_close {position: absolute; top: 0; right: 0; width: 80px; height: var(--hd-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: #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: var(--font--grey);}
.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 / 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: var(--color-white);transition: var(--transition);}
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_sub {position: absolute; visibility: hidden; opacity: 0; top: calc(100% - 12px); left: 50%; transform: translateX(-50%); background-color: var(--color-white); border-radius: 10px; border: 1px solid #f5f5f5; transition: var(--transition); 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: var(--transition);}
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: var(--hd-height); font-size: 18px; color: var(--color-white); transition: var(--transition); font-weight: 500;}

/* Header / Hover */
header.hover {background-color: #fff;}
header.hover .hd_nav .hd_nav_a {color: var(--color--black);}
header.hover .toggle_btn span {background-color: var(--color--black);}
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: #fff;}
header.on .hd_nav .hd_nav_a {color: var(--color--black);}
header.on .toggle_btn span {background-color: var(--color--black);}
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 .toggle_btn span {background-color: var(--color--black);}
header.sub .hd_nav .hd_nav_a {color: var(--color--black);}
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: var(--hd-m-height);}
	header .msearch_btn img {transition: var(--transition);}
	.m_header .container_fix .right_menu .right_list {height: var(--hd-m-height);}
	/* 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: var(--search-m-height); height: var(--search-m-height);}
	.search_wrap {height: var(--search-m-height);}
	.search_box {height: var(--search-m-height); 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);}
	/* Header / Hover / on */
	header.on .msearch_btn img {filter: brightness(0);}
	header.on .hd_toggle_bar img {filter: brightness(0);}
}