/*
(주)파이브센스_FIVESENSES.Corp.
본 라이브러리(소스코드 및 디자인 포함)는 (주)파이브센스의 자산이며, 저작권법 및 부정경쟁방지법에 의해 보호됩니다.
무단 사용, 외부 유출, 복제, 배포, 변형을 금지합니다.
위반 시 민·형사상 법적 책임 및 손해배상 청구 대상이 됩니다.
작성일: 2025-02-25 | 저작권자: (주)파이브센스(520-86-01244) | All Rights Reserved.
*/
/*************************** 분리형 헤더 ***************************/
/* 
분리형 헤더 16
*/
.header16{box-shadow: 0 0 10px rgba(61, 61, 61, 0.05);}
.header16 .pc_header{padding: 0; }
.header16 .pc_header > .container_fix{max-width: 1230px; width: 100%; justify-content: space-between;}
.header16 .pc_header .container_fix::before, .header16 .pc_header .container_fix::after{display: none;}
.header16 .pc_header .container_fix .lnb_left{display: flex; align-items: center; justify-content: flex-start; padding: 35px 0;}
.header16 .pc_header .container_fix .lnb_left .all_category_btn > .menu-a{position: relative; border: 1px solid #ebebeb; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; padding: 0; background-color: #fff; box-shadow: 0 0 10px rgba(61, 61, 61, 0.05);}
.header16 .pc_header .container_fix .lnb_left .all_category_btn > .menu-a span{margin-left: 13px;}
.header16 .pc_header .logo_box{line-height: 48px; margin-right: 135px; margin-left: 20px;}
.header16 .pc_header .logo_box img{height: 32px;}
.header16 .pc_header .container_fix .lnb_left .search_box{width: 460px; transition: 0.3s;}
.header16 .pc_header .container_fix .lnb_left .search_box > form{width: 100%;}
.header16 .pc_header .container_fix .lnb_left .search_box > form .header_search{position: relative;}
.header16 .pc_header .container_fix .lnb_left .search_box > form .header_search .search_btn{right: 4px;position: absolute;top: 50%;margin-top: -20px; background: none;border: 0;}
.header16 .pc_header .container_fix .lnb_left .search_box > form .header_search input{border: 1px solid #e1e1e1; background-color: #f6f6f6; font-size: 15px; font-weight: 500; height: 50px; line-height: 50px; border-radius: 24px; padding-left: 20px; padding-right: 50px; width: 100%;}
.header16 .pc_header .container_fix .lnb_left .search_box > form .header_search input::placeholder{color: #999999;}
.header16 .pc_header .container_fix .lnb_left .header_popular{position: relative; margin-left: 30px;}
.header16 .pc_header .container_fix > .lnb_box {padding: 13px 0 27px;}
.header16 .pc_header .container_fix > .lnb_box ul{display: flex; align-items: center;}
.header16 .pc_header .container_fix > .lnb_box .lnb_list{width: 100%; display: flex; align-items: flex-end; justify-content: right;}
.header16 .pc_header .container_fix > .lnb_box .lnb_list li{position: relative; padding: 0;}
.header16 .pc_header .container_fix > .lnb_box .lnb_list.lnb_top > li + li{margin-left: 11px; padding-left: 11px;}
.header16 .pc_header .container_fix > .lnb_box .lnb_list.lnb_top > li + li::before {content: ''; display: block; width: 1px; height: 11px; background-color: #d0d0d0; position: absolute; top: 50%; transform: translateY(-50%); left: 0;}
.header16 .pc_header .container_fix > .lnb_box .lnb_list.lnb_top > li > a{font-size: 13px; color: #777; line-height: 1em; white-space : nowrap;}
.header16 .pc_header .container_fix > .lnb_box .lnb_list.lnb_top > li.lang_btn_li{padding-left: 58px; margin-left: 11px; position: relative;}
.header16 .pc_header .container_fix > .lnb_box .lnb_list.lnb_top > li.lang_btn_li::before{transform: none; top: -11px;}
.header16 .pc_header .lnb_list li .lang_btn_box{display: inline-block;text-align: center;overflow: hidden;position: absolute;top: -20px;right: -4px;border: 1px solid transparent;z-index: 10;}
.header16 .pc_header .lnb_list li .lang_btn_box.active{border: 1px solid #ebebeb;border-radius: 3px;background: #fff; opacity: 0.5;}
.header16 .pc_header .lnb_list li .lang_btn_box .lang_btn{position: relative;padding: 6px 10px 5px 8px;display: flex;align-items: center;gap: 9px; font-weight: 400;font-size: 13px; color: #777777; line-height: 1em;}
.header16 .pc_header .lnb_list li .lang_btn_box .lang_btn::after{content: ''; display: block; width: 5px; height: 5px; border-left: 1px solid #777777; border-bottom: 1px solid #777777; position: relative; transform: rotate(-45deg); top: -2px; left: 2px;}
.header16 .pc_header .lnb_list li .lang_btn_box .lang_btn + .lang_ul{position: relative;width: 100%;padding: 0 8px 6px;border-top: 0;z-index: 1;display: none;}
.header16 .pc_header .lnb_list li .lang_btn_box.active .lang_btn{gap: 5px;}
.header16 .pc_header .lnb_list li .lang_btn_box.active .lang_btn + .lang_ul{display: block;background: #fff;}
.header16 .pc_header .lnb_list li .lang_btn_box.active .lang_btn + .lang_ul li{padding: 0; text-align: left;}
.header16 .pc_header .lnb_list li .lang_btn_box.active .lang_btn + .lang_ul li a{font-size: 12px; font-weight: 400;color: #777;line-height: 16px; transition: 0.2s;}
.header16 .pc_header .lnb_list li .lang_btn_box.active .lang_btn + .lang_ul li a.on{color: #222222;}
.header16 .pc_header .lnb_list li .lang_btn_box.active .lang_btn + .lang_ul li a:hover{color: #222222;}
.header16 .pc_header .container_fix > .lnb_box .lnb_list li.address_li{margin-left: 38px;}
.header16 .pc_header .container_fix > .lnb_box .lnb_list li.address_li .marker_box .marker_msg{top: 46px;}
.header16 .pc_header .container_fix > .lnb_box .lnb_list.lnb_bot{margin-top: 32px;}
.header16 .pc_header .container_fix > .lnb_box .lnb_list.lnb_bot > li + li{margin-left: 43px;}
.header16 .pc_header .marker_box{width: 28px;}
.header16 .pc_header .marker_box > a.marker_icon{width: 28px; height: 35px; background: url(../../../../img/marker_icon_H16.png) no-repeat; margin: 0;}
.header16 .pc_header .container_fix > .lnb_box .lnb_list li .cart_count{right: -6px; bottom: -3px; line-height: 14px; font-size: 9px; width: 14px; height: 14px;}

/* 분리형 헤더 16 > 메뉴공통 */
.header16 .header-menu {border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb;}
.header16 .header-menu .container_fix{max-width: 1230px; width: 100%;}
.header16 .header-menu .container_fix .scroll_box{display: none;}
.header16 .header-menu .nav-top{display: flex; justify-content: space-between; padding: 0 15px;}
.header16 .header-menu .pc-menu{background-color: transparent; height: 65px; transition: 0.3s;}
.header16 .pc-menu .nav-top .menu_ul_01{width: auto; display: flex; align-items: center; justify-content: flex-start;}
.header16 .pc-menu .nav-top .menu_ul_02{width: auto;}
.header16 .pc-menu .nav-top .menu-li{line-height: 64px; display: inline-block;}
.header16 .pc-menu .nav-top .menu_ul_01 .all_menu > a {height: 60px; display: inline-block;}
.header16 .pc-menu .nav-top .menu-a{background-color: transparent; font-size: 16px; padding: 0 28px; color: var(--main-point-color); position: relative; z-index: 10; transition: 0.3s;}
.header16 .pc-menu .nav-top .menu-li:nth-of-type(2) .menu-a{padding-left: 0;}
.header16 .pc-menu .nav-top .menu-li:hover .menu-a, .header16 .pc-menu .nav-top .menu-li.on .menu-a{background-color: transparent; color: var(--main-point-color-hover);}
.header16 .pc-menu .nav-top .sub-1dli.on .sub-1da{color: var(--main-point-color-hover);}
.header16 .pc-menu .nav-top .menu-a span{font-weight: 700;}
.header16 .header-menu .lnb_list{display: flex; align-items: center;}
.header16 .header-menu .lnb_list > li > a {color: #777; font-size: 14px; font-weight: 500; line-height: 1em;}
.header16 .header-menu .lnb_list > li + li {margin-left: 23px;}
.header16 .header-menu .container_fix .lnb_list > li.lang_btn_li{padding-left: 95px; position: relative; margin-left: 0;}
.header16 .pc_header .lang_btn_box{position: absolute; top: 0; right: 15px; z-index: 11;}
.header16 .pc-menu .nav-top .menu_ul_02 .order_delivery_btn{line-height: 65px;}
.header16 .pc-menu .nav-top .menu_ul_02 .order_delivery_btn a{display: inline-block;width: 100px;height: 30px;border: 1px solid #dfdfdf;border-radius: 15px;font-size: 13px;color: #777;text-align: center;line-height: 28px;}

/* 분리형 헤더 16 > 단일드롭1 (본인 2차만) */
.header16 .pc-menu .nav_oneline .nav-top.nav-both .sub-1div{left: 50%; transform: translateX(-50%); box-shadow: none;}
.header16 .pc-menu .nav_oneline .nav-top .sub-1da{border-bottom: none; font-size: 15px; color: #999999; transition: 0.3s; padding: 4px 25px;}

/* 분리형 헤더 16 > 단일드롭2 (전체 1차-2차) */
.header16 .pc-menu .nav_full .all_menu_wrap{top: 66px; border-top: none;}
.header16 .pc-menu .nav_full .all_menu_wrap > .container_fix{max-width: 1190px;}
.at-header .pc-menu .nav_full .all_menu_wrap .all_sub_a{padding: 10px 0;}

/* 단일드롭3 (본인 1차-2차-3차) */
.at-header .pc-menu .nav_threedepth .nav-top.nav-both .sub-1div .container_fix{max-width: 1190px;}
.at-header .pc-menu .nav_threedepth .nav-top.nav-both .sub-1div{top: 66px; border-top: none;}

/* 전체메뉴 전체보기 */
.at-header .pc-menu .all_menu_view{top: 66px; display: none; border-top: none;}
.at-header .pc-menu .all_menu_view > .container_fix{max-width: 1190px;}
.at-header .pc-menu .all_menu_view .all_menu_li+li{padding-left: 20px;}
.at-header .pc-menu .all_menu_view .all_menu_a{color: #333;}
.at-header .pc-menu .all_menu_view .all_sub_a{padding: 10px 0;}
.at-header .pc-menu .all_menu_view .all_menu_li+li::before{background-color: #ebebeb;}
.at-header .pc-menu .all_menu_view.FM5_menu_view .all_menu_li+li{border-left: 1px solid #ebebeb;}

/* 전체메뉴2 3차댑스 순차노출 */
.header-menu .pc_header .all_menu_box{left: 15px; width: 180px; margin-top: 25px;}
.header-menu .pc_header .all_menu_box .all_ul > .all_li > .all_a{padding: 0 20px;}

/* 헤더 스크롤 고정 */
.header16.fixed{border-bottom: none;}
.header16.fixed .pc_header .logo_box{ margin-left: 17px;margin-right: 135px;}
.header16.fixed .pc_header .logo_box img{height: 28px;}
.header16.fixed .pc_header .container_fix .lnb_left{padding: 37px 0 18px;}
.header16.fixed .pc_header .container_fix .lnb_left .all_category_btn > .menu-a{width: 45px; height: 45px;}
.header16.fixed .pc_header .container_fix .lnb_left .all_category_btn > .menu-a img{height: 16px;}
.header16.fixed .pc_header .container_fix .lnb_left .search_box > form .header_search input{height: 45px; line-height: 45px;}
.header16.fixed .pc_header .container_fix .lnb_left .search_box > form .header_search .search_btn{right: 6px; top: 56%;}
/* .header16.fixed .pc_header .container_fix .lnb_left .search_box > form .header_search .search_btn img{height: 35px;} */
.header16.fixed .pc_header .container_fix .lnb_left .header_popular{margin-left: 24px;}
.header16.fixed .pc_header .container_fix > .lnb_box{padding: 11px 0 20px;}
.header16.fixed .pc_header .container_fix > .lnb_box .lnb_list.lnb_bot{margin-top: 20px;}
.header16.fixed .pc_header .container_fix > .lnb_box .lnb_list.lnb_bot > li + li{margin-left: 40px;}
.header16.fixed .pc_header .container_fix > .lnb_box .lnb_list.lnb_bot img{height: 33px;}
.header16.fixed .pc_header .marker_box{width: 25px;}
.header16.fixed .pc_header .marker_box > a.marker_icon{width: 25px; height: 33px;background: url(../../../../img/marker_icon_H16_s.png) no-repeat;}
.header16.fixed .header-menu .pc-menu{height: 50px;}
.header16.fixed .pc-menu .nav-top .menu_ul_02 .order_delivery_btn{line-height: 50px;}
.header16.fixed .pc-menu .nav-top .menu-li{line-height: 49px;}
.header16.fixed .pc-menu .nav-top .menu-ul .menu-li{line-height: 49.5px;}
.header16.fixed .pc-menu .nav-top .menu_ul_01 .all_menu > a {height: 45px; display: inline-block;}
.header16.fixed .pc-menu .nav_full .all_menu_wrap{top: 51px;}
.header16.fixed .pc-menu .all_menu_view{top: 51px;}
.header16.fixed .pc-menu .nav_threedepth .nav-top.nav-both .sub-1div{top: 51px;}

/* 검색드롭 */
.search_preview_box{top: 30px;}
.search_preview_box .search_preview_list{padding-top: 30px;}
#pc_search_box .search_bot .pc_search_preview_box .pc_search_preview_top .all_delete_btn{top: 4px;}

/* 2025-04-15 (주)파이브센스_FIVESENSES.Corp. 일체형 */
.at-header.transparent_H.header16 .pc_header .container_fix > .lnb_box .lnb_list li > a > img{filter: invert(1) brightness(2);}
.at-header.transparent_H.header16 .pc_header .marker_box > a.marker_icon{background: url(../../../../img/marker_icon_H16.png) no-repeat; filter: invert(1) brightness(2);}
.at-header.transparent_H.header16 .pc_header .container_fix > .lnb_box .lnb_list.lnb_top > li > a,
.at-header.transparent_H.header16 .pc_header .container_fix > .left_lnb .lnb_list li .lang_btn_box ul li a.on{color: #fff;}
.at-header.transparent_H.header16 .pc_header .container_fix > .lnb_box .lnb_list li .lang_btn_box.active .lang_btn{color: #777;}
.at-header.transparent_H.header16 .pc_header .lnb_list li .lang_btn_box .lang_btn::after{border-color: #fff;}
.at-header.transparent_H.header16 .pc_header .lnb_list li .lang_btn_box.active .lang_btn::after{border-color: #777;}
.at-header .caption__hover{top: 45px;}

@media (max-width : 1200px){
    .header16 .pc_header .container_fix .lnb_left .search_box{width: 280px;}
    .header16 .pc-menu .nav-top .menu-a{font-size: 14px; padding: 0 15px;}
}