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: 80px;}
header .container_fix > .hd_right_menu {display: flex; align-items: center; gap: 30px;}
header .container_fix .hd_icons {display: flex; align-items: center; gap: 30px; 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: #fff;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: #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(--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: #fff; border-radius: 24px !important;}

/* Header / search / style2 */
header .search_btn {cursor: pointer;}
header .search_btn img {transition: 400ms;}
.search_wrap {position: fixed; top: var(--header-height); width: 100%; z-index: 10; background-color: #fff;height: 120px; visibility: hidden; opacity: 0; transition: 400ms;}
.search_box {position: relative; display: flex; align-items: center; justify-content: center; height: 120px; max-width: 600px; margin: 0 auto;}
.search_box form {flex-grow: 1;}
.search_close {position: absolute; top: 50%; right: 0; width: 22px; height: 22px; transform: translateY(-50%);}
.search_close .close_wrap{width: 22px; height: 22px; 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-black); 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 .header_search {display: flex; width: 100%; padding: 8px 0; border-bottom: 1px solid rgba(51, 51, 51, .25);}
.search_box .header_search input {flex-grow: 1; border: none; 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;color: #fff; background-color: #fff; border: none;}

/* Header / search / inline */
.search_box2 .header_search {display: flex; gap: 12px;}
.search_box2 .header_search input {font-size: 16px; display: none; max-width: 180px; width: 100%; height: 26px;border: none; border-bottom: 1px solid #222; transition: all 400ms;}
.search_box2 .header_search input::placeholder {color: #999;}
.search_box2 .search_submit {background-color: transparent; border: none;}

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

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

/* Header / login_area */
header .login_area {display: flex; justify-content: center; align-items: center; gap: 20px;}
header .login_area li {position: relative;} 
header .login_area li > a {font-size: 14px; font-weight: 400; color: #fff; transition: all 400ms;}
header .login_area li:first-child:before {position: absolute; content: ''; top: 50%; right: -10px; width: 1px; height: 12px; transform: translateY(-50%); background-color: #fff; transition: all 400ms;} 

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

/* Header / Gnb / style1 */
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: absolute; visibility: hidden; opacity: 0; top: calc(100% - 0); left: 50%; transform: translateX(-50%); 
background-color: #fff; border-radius: 0; border: 1px solid #f5f5f5; transition: 400ms; min-width: 200px; }
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;}
header .hd_nav .hd_nav_sub_a {font-size: 15px; color: #999; 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: var(--header-height); font-size: 20px; color: #fff; 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: #fff; 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 / 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 .login_btn img {filter: brightness(0);}
header.hover .logo_a {display: none;}
header.hover .logo_b {display: block;}
header.hover .login_area li > a {color: var(--color-black);}
header.hover .login_area li:first-child:before {background-color: #000;}
header.hover .search_box2 .search_submit {filter: brightness(0);}
header.hover .search_box2 .header_search input {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 .login_btn img {filter: brightness(0);}
header.on .logo_a {display: none;}
header.on .logo_b {display: block;}
header.on .login_area li > a {color: var(--color-black);}
header.on .login_area li:first-child:before {background-color: #000;} 
header.on .search_box2 .search_submit {filter: brightness(0);}
/* Header / sub */
header.sub {background-color: #fff;}
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 .login_btn img {filter: brightness(0);}
header.sub .logo_a {display: none;}
header.sub .logo_b {display: block;}
header.sub .login_area li > a {color: var(--color-black);}
header.sub .login_area li:first-child:before {background-color: #000;} 
header.sub .search_box2 .search_submit {filter: brightness(0);}

@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: 15px 0;}
	.m_header .logo_box img {height: 34px;}
	header .msearch_btn img {transition: 400ms;}
	.m_header .container_fix .right_menu .right_list {height: 34px;}
	/* 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: 80px;}
	.search_box {height: 80px; max-width: 260px;}
	.search_box img {height: 17px;}
	.search_box .search_submit {width: auto; height: auto; padding: 3px 7px; font-size: 12px;}
	.search_box .search_submit img {filter: brightness(0);}
	.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);}

	.search_wrap {top: 64px;}
}