/* header 영역 CSS */ 

/* 공통 */
.header { font-family: 'SuisseIntl', sans-serif; }

/* 헤더 영역 */
.header.sub { background: #121212; color:#fff; } 
.header.sub .container { max-width:1300px; margin:0 auto; padding:3rem 0; }
.header.sub .container .inner { position: relative; display:flex; justify-content: space-between; }
.header.sub .logo { width: 30%;}
.header.sub .logo img { height: auto;}
.header.sub .side_nav { display:flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
.header.sub .side_nav .follow_wrap .follow_bt { display:flex; flex-direction: row; flex-wrap: wrap; align-items: center; background:#F9F172; padding:5px 10px; margin-right:25px;}
.header.sub .side_nav .follow_wrap .follow_bt img { width:20px; height:20px; }
.header.sub .side_nav .follow_wrap .follow_bt .follow_txt { font-size:1.5rem; font-weight:800; margin:0 0 0 6px; color:#000; line-height: 1.55rem; }
.header.sub .side_nav .nav-icon { width:30px; cursor: pointer; }
.header.sub .side_nav .nav-icon:before { margin-top:0; }
.header.sub .side_nav .nav-icon:after, .header.sub .side_nav .nav-icon:before, .header.sub .side_nav .nav-icon div { background-color:#F9F172; content:''; display:block; height:2px; margin:10px 0; -moz-transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; transition:all .2s ease-in-out; }

.header .side_nav .nav-icon.active:after, .header .side_nav .nav-icon.active:before, .header .side_nav .nav-icon.active div { background-color: #121212; }
.header .side_nav .nav-icon.active:before { transform: translateY(8px) rotate(135deg); -moz-transform: translateY(8px) rotate(135deg); -webkit-transform: translateY(8px) rotate(135deg); }
.header .side_nav .nav-icon.active:after { transform: translateY(-6px) rotate(-135deg); -moz-transform: translateY(-6px) rotate(-135deg); -webkit-transform: translateY(-6px) rotate(-135deg); }
.header .side_nav .nav-icon.active div { -moz-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); }


/*서브페이지 스티키 헤더영역*/
.header.sub[uk-sticky] .uk-sticky-below {
    z-index: 1000; /* 스티키가 다른 요소들보다 위에 표시되도록 설정 */
    transition: background-color 0.3s ease-in-out; /* 스크롤 시 배경색 전환 애니메이션 */
}



/* 두번째 햄버거 */
.second_nav { background:none !important; }
.second_nav .side_nav .nav-icon:before, .second_nav .side_nav .nav-icon div, .second_nav .side_nav .nav-icon::after { background-color: #000 !important; }


@media (max-width: 1400px)  {
    .header.sub .container { width:auto;  padding: 2rem 0; margin: 0 50px; }
}

@media (max-width: 1023px)  {
    .second_nav { padding:0 !important; }
    .second_nav .side_nav.mo { position: relative; }
}

@media (max-width: 820px) {
    .header.sub { padding: 20px 0; }
    .header.sub .container { padding:0 15px; margin: 0; }
    .header.sub .container .inner { justify-content: space-between; align-items: center; }
    .header.sub .logo { max-width:100%; }
    .header.sub .logo a > img { width:250px; }
    .header.sub .side_nav .follow_wrap { display:none; }
    .header.sub .side_nav, .header:not(.sub) .side_nav { top: 5px; right:0; }
    .header.sub .side_nav .nav-icon { width:30px; }

    .second_nav > a { width:210px; }
    .second_nav > a > img { width:100% !important; margin: 1.5vw 0 -1.5vw 0; }
    /* .side_nav.mo { top:0 !important; } */
}

@media (max-width: 340px) {
    .header.sub { padding:10px 0; }
    .header.sub .logo a > img { max-width:200px; }
}


/* 두번째 GNB */
#main_bot_section { position: relative; background-color: #F9F172; padding-top: 3%;  }
#main_bot_section .second_header { height:160px !important }
#mainBotHeaderIn { background-color: #F9F172; }
.mainBotHeader-logo { /* max-width: 350px;  width:100%;  margin: 20px 0; */ width: 350px; }
#main_bot_section .mainBotHeaderLogo a { width: 30%; line-height: 0; margin: 10px 0;}

.mainBotHeaderSticky{
	position: fixed !important;
    width: 100% !important;
    margin-top: 0px !important;
    top: 0px;
	z-index: 980;
    box-sizing: border-box;
    margin: 0 !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.mainBot-header-line { border-top: 1px solid var(--black-opacity); border-bottom: 1px solid var(--black-opacity); overflow: hidden; background-color: #F9F172; transition: height 0.3s, padding 0.3s; }
.mainBot-header-list { max-width: 920px; font-family: 'SuisseIntl'; display: flex; align-items: center; justify-content: space-between; padding: 15px 0; }
.mainBot-header-list-wrap { width: calc(100% - 50px); }
.mainBot-header-list > .item { cursor: pointer; color: var(--dark-opacity); font-weight: 900; font-size: 1.4286rem; transition: 0.3s; }
.mainBot-header-list > .item.on { color: var(--black); }
.mainBot-header-list > .item span { position: relative; }
.mainBot-header-list > .item span:after { content: ""; position: absolute; top: 100%; left: 0; width: 0; height: 2px; background-color: var(--black); transition: 0.3s; }
.mainBot-header-list > .item.on span:after { width: 100%; }
.mainBot-header-list > .item:hover { color: var(--black); }
.mainBot-header-list > .item:hover span:after { content: ""; width: 100%; }
.mainBot-header-list > .item:last-child { display: none;}

/* Scroll behavior */
.scroll-up #mainBotHeaderLogo { margin-bottom: 0; /* 스크롤 업 시 로고 영역 더 많이 보이도록 조정 */}
.scroll-down #mainBotHeaderLogo { margin-bottom: 0; }
.scroll-down #mainBotHeaderLine { padding: 0; }

@media (max-width:960px) {
	.mainBot_header_menu { width: 30px; }
	.mainBotHeaderLogo { margin-bottom: 14px; }
	.mainBot-header-list > .item { font-size: 1.2143rem; }
	.mainBot-header-list { padding: 15px 0; }	
}

@media (max-width:820px) {
	#main_bot_section .second_header { height:120px !important; }
    #main_bot_section .header.sub { width: 100%;}
    #main_bot_section .header.sub .side_nav .nav-icon {transform: scale(0.8);}

    #main_bot_section .mainBotHeaderLogo a { /* width: 43%; */ width: 180px;}
    .mainBot-header-line .width-limit { margin: 0; width: 100%;}
    .mainBot-header-line { border-top: none; border-bottom: none; margin-bottom: -30px; }
    .mainBot-header-list-wrap { width: 100%;}
	.mainBot-header-list-wrap .mobileMenuDrag::-webkit-scrollbar { display:none; }	
	.mainBot-header-list { /* width: 700px;  margin-right: 40px;  padding: 10px 0; padding-right: 40px !important; padding-left: 15px; padding-top: 10px;*/  padding: 10px 15px;
        margin-right: -45px; width: 100vw;}
    .mainBot-header-list > .item { padding-right: 15px;}
	

	/* 모바일 슬라이드 드래그 */
	.mobileMenuDrag { overflow-x: auto; width: 100%; }
	.mobileMenuDrag::-webkit-scrollbar { width: 0; height: 0; }
	.mobileMenuDrag::-webkit-scrollbar-track { width: 0; height: 0; background-color: transparent}
	.mobileMenuDrag::-webkit-scrollbar-thumb { width: 0; height: 0; background-color: transparent}
	.mobileMenuDrag::-webkit-scrollbar-button { width: 0; height: 0; background-color: transparent}
}

@media (max-width:340px) {
	.mainBotHeader-logo { width: 180px; }
}


/* 리스트 스티키 헤더 */
/* 화면 상단에 고정되었을 때 상단 여백을 제거 */
/* #act_header .uk-sticky-below .logo{max-width: 20%;} */
#act_header .uk-sticky-below { top: 0 !important;}
#act_header .uk-sticky-below .container { padding: 3rem 0;}
.header.sub.uk-sticky-below  { background-color: #121212; /* 스크롤 시 배경색을 어두운 색으로 설정 */ }
#act_header .uk-active { top: 0 !important;}

@media (max-width: 1400px) {
    #act_header .uk-sticky-below .container {  width:auto;  padding: 2rem 0; margin: 0 50px;}
}

@media (max-width: 820px) {
    /* 모바일 환경에서 스티키 적용을 위한 추가 조정 */
    .header.sub[uk-sticky] .uk-active{ padding: 10px 0; /* 모바일에서의 패딩 조정 */ }
    #act_header .uk-sticky-below .container{padding: 0; margin: 0;}
    #act_header .uk-sticky-below { padding: 20px 15px;}
}

@media (max-width: 450px) {
    #act_header .uk-sticky-below { /* padding: 20px 24px 15px 24px; */ padding: 20px 15px;}
}

/* 카테고리 ip 리스트 헤더 영역 */
.list_category .header.sub { background:#F9F172; color:#121212; } 
.list_category .header.sub .side_nav .follow_wrap .follow_bt img { filter: invert(87%) sepia(35%) saturate(610%) hue-rotate(359deg) brightness(106%) contrast(95%);}
.list_category .header.sub .side_nav .follow_wrap .follow_bt .follow_txt {color:#F9F172;}
.list_category .header.sub .side_nav .follow_wrap .follow_bt {background:#121212;}
.list_category .header.sub .side_nav .nav-icon:after{ background-color:#121212; }
.list_category .header.sub .side_nav .nav-icon:before{ background-color:#121212; }
.list_category .header.sub .side_nav .nav-icon div{ background-color:#121212; }
.list_category .header.sub .logo a > img{filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(310deg) brightness(0%) contrast(100%);}


/* 햄버거 메뉴 */
.gnb { position: fixed; top: 0; left: 0; z-index: 999999999999; opacity: 0; visibility: hidden; width: 100%; height: 100%; padding: 20px 0 0; background: #121212; color: #fff; /* transition: .3s ease; */ font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; overflow: auto; font-family: 'SuisseIntl', 'Noto', sans-serif; }
.gnb.active { opacity: 1; visibility: visible; padding: 0; }
.gnb .container { max-width: 1300px; padding: 3rem 0;}
.gnb .inner { /* padding-top: 8vw; padding-bottom: 2vw; */ position: relative; }
.gnb .logo { /* position: absolute; top: 0; z-index: 99; */ max-width: 30%;}
.gnb .logo img { height: auto;}
.gnb .category_list { position: relative; margin:5vh 0; display:flex; flex-direction: row; flex-wrap: wrap; }
/* .gnb .category_list .menu_list { position: relative; padding:0; margin:6% 0; font-family: 'SuisseIntl'; font-weight:900; text-transform: capitalize; } */
.gnb .category_list .menu_list { position: relative; padding:0; font-family: 'SuisseIntl'; font-weight:800; text-transform: uppercase; }
.gnb .category_list .menu_list.second > li > a { color:#F9F172; }
.gnb .category_list .menu_list > li { margin: 0 0 15px 0; padding-right: 100px; position: relative; color: #fff !important; list-style: none; }
.gnb .category_list .menu_list > li:last-child { margin: 0; }
.gnb .category_list .menu_list > li > a { font-size: 3rem;  transition: .2s ease; /*display: block;*/  }
/* .gnb .category_list .menu_list > li.on:after { display: inline-block; width: 30px; height: 24px; margin: -2px 0 0 8px; background: url(../images/select_arrow.svg)no-repeat; content: ''; transition: .2s ease; position: absolute; right: 0; top: 20px; transform: rotate(-90deg); background-size: contain; } */

.gnb .search { position: relative; width: 100%; border-bottom: 2px solid #fff;}
.gnb .search input { width: 100%; height: 50px; border: 0; border-radius: 0; /*border-bottom: 2px solid #fff;*/ background: transparent; outline: none; font-family: "Instrument Sans", "Noto Sans KR", 'window', 'ios', 'android', sans-serif;letter-spacing: 0.01em; color:#fff; /*font-family: 'SuisseIntl';*/
    font-weight: 500; font-size: 1.5rem; padding: 0; max-width:72%; }
.gnb .search input::placeholder { font-family: 'SuisseIntl', 'Noto', sans-serif; }
.gnb .search button { position: absolute; top: 50%; right: 0; width: 28px; height: 28px; margin-top: -14px; background: url(../images/ic_search.svg)no-repeat; filter: invert(1); border:none; }
.gnb .search .x { position: absolute; top: 50%; right: 45px; width: 20px; height: 20px; margin-top: -10px; background: url(../images/ic_x_fp.svg)no-repeat; cursor: pointer; }
.gnb .link_group > a { display: block; margin: 0 0 15px 0; font-size:1.5rem;  line-height:1; }
.gnb .link_group > a:last-child { margin: 0; }
.gnb .close { position: absolute; top: 4%; right: 0; width: 29px; height: 29px; background: url(../images/ic_close_fp.svg) no-repeat; border:none; cursor: pointer;}

.gnb_copyright { margin-top:30px; font-size:1.1rem;    font-size: 0.9rem; font-family: 'SuisseIntl'; color:#999;}


/* 검색바 자동완성 수정 */
.gnb .search input:-webkit-autofill,
.gnb .search input:-webkit-autofill:hover,
.gnb .search input:-webkit-autofill:focus,
.gnb .search input:-webkit-autofill:active {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0px 1000px #121212 inset;
    box-shadow: 0 0 0px 1000px #121212 inset;
    transition: background-color 5000s ease-in-out 0s;
}

.gnb .search input:autofill,
.gnb .search input:autofill:hover,
.gnb .search input:autofill:focus,
.gnb .search input:autofill:active {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0px 1000px #121212 inset;
    box-shadow: 0 0 0px 1000px #121212 inset;
    transition: background-color 5000s ease-in-out 0s;
}    
/* 검색페이지 자동완성 수정 */
.search_area input:-webkit-autofill {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #121212 inset;
}

@media (max-width: 1400px) {
    .gnb .container { width:auto;  padding: 2rem 0; margin: 0 50px; }
    .gnb .close { top: 3%;}
	.gnb .category_list .menu_list > li { padding-right: 50px;}
	.gnb .category_list .menu_list > li > a { font-size: 2.44rem;}
	.gnb .category_list .menu_list > li.on:after { width: 20px; height: 13px; top: 17px;}
}
@media (min-width: 1025px) {
    .gnb .search { position: absolute; margin-top: 5vh; right: 0; width: 280px; z-index:999; }
    .gnb .link_group { width: 280px; position: absolute; bottom: 0; right: 0;}
}

@media (max-width: 1024px) {
    .gnb .search { margin-top: 20px; }
    .gnb .close { top: 1%;}

    .gnb .category_list { margin: 3vh 0;}
    .gnb_copyright { margin-top: 3vh;}

}

@media (max-width: 820px) {
    .gnb { padding-bottom: 92px; background:#F9F172; }
    .gnb .close { background: url(../images/ic_close_fp_b.svg)no-repeat; top:3.2%; width: 24px; height: 24px;}
    .gnb .container { padding:0 15px; margin: 0; }
    .gnb .container .inner { padding-top:20px; display:flex; flex-direction: column; }
    .gnb .container .inner .logo { top:0; width:250px; max-width: none;  margin-bottom: 20px;}
    /* .gnb .container .inner .logo img { max-height:54px; } */
    .gnb .container .inner .logo .pc { display:none !important; }
    .gnb .container .inner .logo .mo { display:block !important; }
    .gnb .search { margin: 0; font-size: 1.23rem; background-color:#F9F172; border-bottom: 2px solid #000; } /* 241010 수정 */
    .gnb .search input { padding:0; /*border-bottom: 2px solid #000;*/ color:#000; /*font-weight:800;*/ font-size: 1.23rem; max-width:78%; }
    .gnb .search input::placeholder { color:#000; opacity: .3;} 
    .gnb .search .x { filter: invert(1); }
    .gnb .search button { filter: invert(0); }
    .gnb .category_list { margin:0 -15px; }
    .gnb .category_list .menu_list { width:100%; padding:5vw 15px; background:#F9F172; margin:0; }
    .gnb .category_list .menu_list > li { margin-bottom: 5.3vw;  padding-right: 0; border-bottom: 0; color: #000 !important; margin:0; }
    .gnb .category_list .menu_list > li > a { font-size: 1.7rem; line-height: 2.7rem; }
	.gnb .category_list .menu_list > li.on { border-bottom: 0;}
	.gnb .category_list .menu_list > li.on:after { display: none;}
    .gnb .category_list .menu_list .menu-item-has-children > a { display: block; position: relative; }
    .gnb .category_list .menu_list.second { background: #121212; }
    .gnb .link_group { background: #121212; color:#fff; padding:0 15px; margin:0 -15px; }
    .gnb .link_group > a { margin:2vw 0; font-size:1.23rem; line-height:1.2; color:#fff; }
    .gnb .gnb_copyright { margin: 5vw 0; color: rgba(255, 255, 255, 0.7); }

    /* 검색바 자동완성 수정 */
    .gnb .search input:-webkit-autofill,
    .gnb .search input:-webkit-autofill:hover,
    .gnb .search input:-webkit-autofill:focus,
    .gnb .search input:-webkit-autofill:active {
        -webkit-text-fill-color: #000;
        -webkit-box-shadow: 0 0 0px 1000px #F9F172 inset;
        box-shadow: 0 0 0px 1000px #F9F172 inset;
        transition: background-color 5000s ease-in-out 0s;
    }
    
    .gnb .search input:autofill,
    .gnb .search input:autofill:hover,
    .gnb .search input:autofill:focus,
    .gnb .search input:autofill:active {
        -webkit-text-fill-color: #000;
        -webkit-box-shadow: 0 0 0px 1000px #F9F172 inset;
        box-shadow: 0 0 0px 1000px #F9F172 inset;
        transition: background-color 5000s ease-in-out 0s;
    }    

    /* .gnb .search { margin: 6vw 0 3vw 0;} */
    .mainBot-header-list-wrap .mobileMenuDrag::-webkit-scrollbar { display:none; }
}

@media (max-width: 340px) {
    .gnb.active { padding:10px 0 0 !important; }
    .gnb .close { top: 1%;}
    .gnb .container .inner { padding-top:0; }
    .gnb .container .inner .logo { max-width:200px; }
    .gnb .category_list .menu_list > li > a { font-size: 2rem;}
    /* .gnb .search { margin-top:0;} */
}