header {position: fixed; top: 0; width: 100%; z-index: 9;  transition: var(--transition); background-color: var(--color-white);}
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_left {display: flex; align-items: center; gap: 60px;}
header .container_fix > .hd_right_menu {display: flex; align-items: center; gap: 80px; height: var(--hd-height);z-index: 5;}
header .container_fix .hd_icons {display: flex; align-items: center; gap: 30px;}
header .container_fix .hd_icons li a {font-size: 14px; font-weight: 400; color: #000;}
header .logo_a {display: block;}
header .logo_b {display: none;}

.pc_header .container_fix > div.logo_box {z-index: 5;}

/* Header / search */
header .search_btn {cursor: pointer;}
header .search_btn img {transition: var(--transition);}
header .login_btn img {transition: var(--transition);}
.at-header .search_wrap {position: fixed; width: 100%; z-index: 10; background-color: var(--color-white);visibility: hidden; opacity: 0; transition: var(--transition); padding: 70px 0;}
.search_close {position: absolute; top: 0; right: 0; width: 80px; 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);}
.at-header .search_box {display: flex; align-items: center; justify-content: center; flex-direction: column; max-width: 600px; margin: 0 auto;}
.at-header .search_box form {width: 100%;}
.at-header .search_box .header_search {display: flex; width: 100%; position: relative; height: 40px;}
.at-header .search_box .header_search input {flex-grow: 1; border: none; font-size: 18px; border-bottom: 1px solid #000; font-weight: 500;}
.at-header .search_box .header_search input::placeholder {color: #999;}
.at-header .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 */
.at-header  .search_wrap.on {visibility: visible; opacity: 1;}

/* Header / search / keyword */
.at-header .search_box .search_popular {display: flex; width: 100%; gap: 30px; margin-top: 30px;}
.at-header .search_box .search_popular h5 {font-size: 15px; font-weight: 600; flex-shrink: 0; margin-top: 10px;}
.at-header .search_box .search_popular .miso-keyword {display: flex; line-height: 1; height: auto; flex-wrap: wrap; gap: 8px;}
.at-header .search_box .search_popular .miso-keyword > a {display: flex;letter-spacing: initial;padding-right: 0;padding: 8px; border: 1px solid #e1e1e1; border-radius: 16px; font-size: 16px; font-weight: 300;}
.at-header .search_box .search_popular .miso-keyword > a::after {display: none;}

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

/* 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: 75px;}
header .hd_nav .hd_nav_li {position: relative;}
header .hd_nav .hd_nav_a {font-size: 18px; font-weight: 500; color: #000;}
header .hd_nav .hd_nav_sub {visibility: hidden; opacity: 0;  position: fixed; top: 100px; left: 0; width: 100%; height: 100vh; transition: var(--transition); z-index: 1; background-color: rgba(17,17,17,.6);}
header .hd_nav .hd_nav_sub .hd_nav_sub_wrap {margin-left: calc((100% - var(--hd-container)) / 2);display: flex;flex-direction: column;background: #fff; height: 100vh; width: 320px; padding-top: 60px; position: relative;}
header .hd_nav .hd_nav_sub_tit {font-size: 35px; color: var(--color-point); font-weight: 600; margin-bottom: 40px;}
header .hd_nav .hd_nav_sub_ul {display: flex; align-items: flex-start; flex-direction: column; gap: 20px; height: calc(100% - 230px); overflow-y: scroll;}
header .hd_nav .hd_nav_sub_ul::-webkit-scrollbar {display: none;}

header .hd_nav .hd_nav_sub_ul li a {font-size: 18px; font-weight: 500; color: #999;}
header .hd_nav .hd_nav_sub .hd_nav_sub_wrap::before {height: 100vh;width: 1000%;background: var(--color-white);content: "";position: absolute;top: 0;left:0; transform: translateX(-100%);}
header .hd_nav .hd_nav_sub .hd_nav_logo {width: 400px; height: 100px; background-image: url('/img/sub_menu_logo.png'); background-repeat: no-repeat; content: "";position: absolute;bottom: 20px;left:20px; z-index: 2; transform: translateY(-100%)}
header .hd_nav .hd_nav_sub li {width: 100%;}
header .hd_nav .hd_nav_sub li .hd_nav_sub_a {position: relative; display: block; transition: all 100ms; z-index: 3; line-height: 40px;}
header .hd_nav .hd_nav_sub li .hd_nav_sub_a .arrow {position: absolute;top: 50%;right: 40px;transform: translateY(-50%);font-family: 'SUIT', sans-serif;}
header .hd_nav .hd_nav_sub li:hover .hd_nav_sub_a {color: var(--color-point);}
header .hd_nav .hd_nav_li.open .hd_nav_sub {visibility: visible; opacity: 1;}


header .hd_nav_sub_sub {visibility:hidden; opacity: 0; position: absolute;left: 320px; width: 280px; background: #ecf4ef;height: 100vh;top: 0; padding: 0 50px; padding-top: 70px; transition: all 400ms;}
header .hd_nav_sub_sub_tit {font-size: 25px; color: #222; font-weight: 600; margin-bottom: 40px;}
header .hd_nav_sub_sub_ul {display: flex; align-items: flex-start; flex-direction: column; gap: 20px; height: calc(100% - 250px); overflow-y: scroll;}
header .hd_nav_sub_sub_ul::-webkit-scrollbar {display: none;}

header .hd_nav .hd_nav_sub_sub_ul li a {font-size: 18px; font-weight: 500; color: #999; transition: all 400ms; line-height: 40px;}
header .hd_nav .hd_nav_sub_sub_ul li:hover a {color: #222;}

.pro_menu_icon {display: inline-block; width: 40px; height: 40px; border-radius: 100%; box-shadow:  4px 4px 5px rgba(0,0,0,.13); margin-right: 20px;}

header .hd_nav .hd_nav_sub_ul li:hover .hd_nav_sub_sub {visibility:visible; opacity: 1;}

/* Header / Hover */
header.hover {background-color: #fff;}
/* header.hover .pc_header {border-bottom: 1px solid #ddd;} */
header.hover .hd_nav .hd_nav_a {color: var(--color-black);}
header.hover .toggle_btn span {background-color: var(--color-black);}
header.hover .login_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 .pc_header {border-bottom: 1px solid #ddd;} */
header.on .hd_nav .hd_nav_a {color: var(--color-black);}
header.on .toggle_btn span {background-color: var(--color-black);}
header.on .login_btn img {filter: brightness(0);}
header.on .logo_a {display: none;}
header.on .logo_b {display: block;}
/* Header / sub */
header.sub {background-color: #fff;}
/* header.sub .pc_header {border-bottom: 1px solid #ddd;} */
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 .login_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.sub .lang_group span {color: #fff; background-color: rgba(0, 0, 0, .25);} */
header.sub .lang_group span.on {color: #fff; background-color: #fe5000;}

/* 각 사이즈별 반응형 작업 */
@media (max-width: 1440px) {
	/* header .hd_nav .hd_nav_ul {gap: 60px;} */
	header .container_fix .hd_icons {gap: 25px;}

    header .hd_nav .hd_nav_sub .hd_nav_sub_wrap {
        margin-left: 3vw;
    }

    header .container_fix > .hd_left {
        width: calc(100% - 300px);
    }

    header .container_fix > .hd_left .hd_nav {
        width: 100%;
    }
    header .hd_nav .hd_nav_ul {
        gap: 0;
        justify-content: space-between;
    }

    header .hd_nav .hd_nav_a {
        font-size: 15px;
    }
}

@media (max-width: 1280px) {
	/*header .hd_nav .hd_nav_ul {gap: 20px;}*/
	header .container_fix .hd_icons {gap: 15px;}


}

@media (max-width: 1024px) {
	header .hd_nav {display: none;}
	header .container_fix .hd_icons {height: 100px;}
}

@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); gap: 20px;}
	
	/* Header / search */
	.m_header .msearch_btn img {height: var(--hd-m-icon);}
	.m_header .container_fix .right_menu .right_list li:last-child img {height: 18px;}
	.search_wrap {padding: 30px 0;}
	.search_close {width: var(--search-m-height); height: var(--search-m-height);}
	.at-header .search_box {width: 100%; padding: 0 15px;}
	.at-header .search_box img {height: 12px;}
	.at-header .search_box .search_submit {width: auto; height: auto; padding: 3px 7px; font-size: 12px;}
	.search_close .close_wrap {width: 20px; height: 20px;}
	.at-header .search_box .header_search input {font-size: 14px;}
	.at-header .search_box .search_popular {gap: 15px;}
	.at-header .search_box .search_popular h5 {font-size: 13px;}
	.at-header .search_box .search_popular .miso-keyword > a {font-size: 12px;}

	/* Header / Toggle */
	header .toggle_btn span {display: block;width: 17px;height: 2px;background-color: #000;transition: var(--transition); margin-left: auto;}
	header .toggle_btn span:first-child {margin-bottom: 4.5px;}
	header .toggle_btn span:last-child {margin-top: 4.5px;}

	/* Header / Login */
	header .login_btn img {height: var(--hd-m-icon);}

	/* Header / Hover */
	/* header.hover .m_header {border-bottom: 1px solid #ddd;} */
	header.hover .msearch_btn img {filter: brightness(0);}
	header.hover .hd_toggle_bar img {filter: brightness(0);}
	/* Header / on */
	/* header.on .m_header {border-bottom: 1px solid #ddd;} */
	header.on .msearch_btn img {filter: brightness(0);}
	header.on .hd_toggle_bar img {filter: brightness(0);}
}