#wrap {min-width: 390px;}
/* header */
/* ============================== top_bnr(띠배너) */
#wrap .top_bnr {
    background-color: #00173A; height: 35px;
    display: flex; justify-content: center; align-items: center;
    position: relative;
}
#wrap .top_bnr .topbnr_txt {width: calc(100% - 200px);}
#wrap .top_bnr .topbnr_txt .swiper-wrapper {transition-timing-function: linear}
#wrap .top_bnr .topbnr_txt .swiper-wrapper .swiper-slide {}
#wrap .top_bnr .topbnr_txt .swiper-wrapper .swiper-slide {}
#wrap .top_bnr .topbnr_txt .swiper-wrapper .swiper-slide .top_txt {color:#fff; font-size: 0.75rem; line-height: 35px;}
#wrap .top_bnr .close {width:35px; position:absolute; right:0; top:50%; transform: translateY(-48%); height: 100%;}
#wrap .top_bnr .close img {width: 100%;}
/* =============================== fab_btn(플로팅버튼) */
#wrap .fab_btn {
    position: fixed; right:56px; bottom:52px; z-index: 999;
    display: flex; flex-flow: column nowrap; gap: 20px;
}
#wrap .fab_btn button {width:55px; height:55px; border-radius: 35px; box-shadow: 0 2px 6px rgba(0,0,0,0.25);}
#wrap .fab_btn button img {width: 100%;}
#wrap .fab_btn .top_btn {background-color: #fff; padding: 15.5px; border: 1px solid #d9d9d9;}
#wrap .fab_btn .talk_btn {background-color: #002D72; padding: 8.5px 12.5px 11.5px 7.5px;}
/* =============================================== header */
#wrap header {
    display: flex; justify-content: space-between; align-items: center;
    position: sticky; top:0; z-index: 999;
    padding: 0 30px; height: 90px;
    margin-bottom: -90px;
}
#wrap header h1 {width:130px;}
#wrap header h1 a {}
#wrap header h1 a img {width: 100%;}
#wrap header nav {}
#wrap header nav .gnb {display: flex;}
#wrap header nav .gnb li {}
#wrap header nav .gnb li > a {display: inline-block; padding: 20px 28.5px; color: #fff; font-weight: 500; transition: 0.3s;}
#wrap header nav .gnb .gnb_pro::after {
    content: ''; display: inline-block; width: 1px; height: 14px; background-color: #e9e9e9;
}

/* ======================================================= .gnb_2depth */
/*  */
#wrap header nav .gnb li .gnb_2depth {
    display: flex;
    position: absolute; left:0;
    width:100%;
    background-color: #fff;
    border-bottom: 1px solid #e9e9e9;
    display: none;
}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_left {
    flex: 1; /* 남는 공간을 비율대로 가져감 */
    max-width: 800px;
    min-width: 450px; /* 너무 좁아지면 글자가 깨지니까 최소 폭 유지 */
    display: flex; flex-flow: column nowrap;
}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_left dl {
    display: grid;
    padding: 34.5pt 0 0 120px;
    /* 1열(dt): 150px | 간격: 80px | 2열(dd): 자유너비 */
    grid-template-columns: 150px 100px; 
    column-gap: 80px; /* dt와 dd 사이 간격 */
    row-gap: 9px;    /* dd와 dd 사이 간격 */
    font-size: 1.25rem;
}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_left dl dt {
    grid-column: 1;
    grid-row: 1 / 6; /* 제목이 여러 행을 차지하게 함 */
}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_left dl dd {
    grid-column: 2; /* 기본적으로 2열에 배치 */
    font-size: 0.88rem;
}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_left dl dd a {
    display: block; height: 30px; line-height: 30px;
    white-space: nowrap; /* 글자가 절대 줄바꿈 되지 않게 함 */
}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_left .compare {
    display: block;
    margin: auto 0 20px 120px; /* 아래쪽 여백도 위쪽과 대칭되게 조정 */
    font-size: 0.88rem;
    text-decoration: underline;
}
/*  */
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_left dl.accessory {
    grid-template-columns: 150px 100px 100px;
}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_left dl.accessory dt,
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_left dl.appliance dt {
    grid-row: 1 / 3;
}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_left dl.accessory dd:nth-child(2) {}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_left dl.accessory dd:nth-child(3) {margin-bottom: 45px;}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_left dl.accessory dd:nth-child(4) {
    grid-column: 3;
    grid-row: 1;
}

#wrap header nav .gnb li .gnb_2depth .gnb_2depth_left dl.appliance {
    padding: 0 0 0 120px;
}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_left dl.appliance dt {}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_left dl.appliance dd {}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_left dl.appliance dd:nth-child(2) {}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_left dl.appliance dd:nth-child(3) {}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_left dl.appliance dd:nth-child(4) {}

/* ==================================================== gnb_2depth_right */
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_right {display: flex; justify-content: flex-end; padding: 65px 120px 65px 0; gap:56px; flex:1;}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_right .best a,
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_right .event a {display: block; height: 164px;}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_right .best {width: 60%;}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_right .best a {max-width:600px; min-width:320px;}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_right .best a video {}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_right .best p {}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_right .event {width:40%;}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_right .event a {max-width:400px;}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_right .event a img {}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_right .event p {}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_right .best p,
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_right .event p {margin-top: 10px;}
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_right .best a video,
#wrap header nav .gnb li .gnb_2depth .gnb_2depth_right .event a img {height:100%; width:100%; object-fit: cover; display: block;}
/* =============================================== user_menu */
#wrap header #user_menu {display: flex; align-items: center; gap:12px;}
#wrap header #user_menu li {}
#wrap header #user_menu li a {display: block; width:24px; height: 24px;}
#wrap header #user_menu li a img {width:100%;}
#wrap header #user_menu .m_nav_open {display: none;}
#wrap header #user_menu .m_nav_open a {transform: translateY(4px);}
/* ====================================================================== 모바일 메뉴 클릭 시 열리는 메뉴 */
#wrap header #m_header_bg {
    position: absolute; left:0; top:89px;
    background: rgba(255,255,255,0.5); width: 100%; height: 0; transition: height 0.3s;
}
#wrap header #m_header_bg #m_header {
    background-color: #fff; height:70%; padding: 0 35px;
    position: relative; overflow: scroll;
}
#wrap header #m_header_bg #m_header .member {display: flex; flex-flow: row nowrap; height: 38px; align-items: center; padding:10px 0;}
#wrap header #m_header_bg #m_header .member a {font-size: 0.88rem;}
#wrap header #m_header_bg #m_header .member a:first-child::after {
    content: ''; display: inline-block; width: 1px; height: 6px; background-color: #656568;
    margin: 0 10px 2px 10px;
}
#wrap header #m_header_bg #m_header .member a img {width: 12px; margin-right: 5px;}
#wrap header #m_header_bg #m_header .close {
    width:48px; height: 38px; display: block;
    position: absolute; top:0; right: 35px;
}
#wrap header #m_header_bg #m_header .close img {width: 100%; filter: invert();}
#wrap header #m_header_bg #m_nav {position: relative;}
#wrap header #m_header_bg #m_nav .gnb {}
#wrap header #m_header_bg #m_nav .gnb li {display: flex; gap:30px; align-items: center; white-space: nowrap;}
#wrap header #m_header_bg #m_nav .gnb li > a {font-weight: 500; line-height: 50px; width:89px;}
#wrap header #m_header_bg #m_nav .gnb li .gnb_2depth {display: flex; align-items: flex-start;}
#wrap header #m_header_bg #m_nav .gnb li .gnb_2depth .gnb_2depth_left {}
#wrap header #m_header_bg #m_nav .gnb li .gnb_2depth .gnb_2depth_left dl {display: flex; justify-content: flex-end; align-items: flex-start; gap:12px}
#wrap header #m_header_bg #m_nav .gnb li .gnb_2depth .gnb_2depth_left dl dt {display: none;}
#wrap header #m_header_bg #m_nav .gnb li .gnb_2depth .gnb_2depth_left dl dd {width:100px; font-size: 0.88rem; text-align: left;}
#wrap header #m_header_bg #m_nav .gnb li .gnb_2depth .gnb_2depth_left dl dd a {}
#wrap header #m_header_bg #m_nav .gnb li .gnb_2depth .gnb_2depth_left dl dd a span {display: block;}
#wrap header #m_header_bg #m_nav .gnb li .gnb_2depth .gnb_2depth_left .compare {display: none;}
#wrap header #m_header_bg #m_nav .gnb li .gnb_2depth .gnb_2depth_right {display: none;}
#wrap header #m_header_bg #m_nav .gnb li .gnb_2depth .gnb_2depth_right > div {}
#wrap header #m_header_bg #m_nav .gnb li .gnb_2depth .gnb_2depth_right > div a {}
#wrap header #m_header_bg #m_nav .gnb li .gnb_2depth .gnb_2depth_right > div p {}
#wrap header #m_header_bg #m_nav .gnb li .gnb_2depth .gnb_2depth_right .best {}
#wrap header #m_header_bg #m_nav .gnb li .gnb_2depth .gnb_2depth_right .best a {}
#wrap header #m_header_bg #m_nav .gnb li .gnb_2depth .gnb_2depth_right .best a video {}
#wrap header #m_header_bg #m_nav .gnb li .gnb_2depth .gnb_2depth_right .best p {}
#wrap header #m_header_bg #m_nav .gnb li .gnb_2depth .gnb_2depth_right .event {}
#wrap header #m_header_bg #m_nav .gnb li .gnb_2depth .gnb_2depth_right .event a {}
#wrap header #m_header_bg #m_nav .gnb li .gnb_2depth .gnb_2depth_right .event a img {}
#wrap header #m_header_bg #m_nav .gnb li .gnb_2depth .gnb_2depth_right .event p {}
#wrap header #m_header_bg #m_nav .gnb li .gnb_2depth .sub_prod_wrap {display: flex; gap:12px;} /* 엑세서리+가전 탭용 */
#wrap header #m_header_bg #m_nav .gnb .gnb_pro {margin: 0 0 30px 0; position: relative;}
/* 프로페셔널 ~ 고객케어 사이 구분선 */
#wrap header #m_header_bg #m_nav .gnb .gnb_pro::after {
    content: ''; display: block; width:100%; height: 1px;
    background-color: #e9e9e9; position: absolute; bottom:-15px;
}
#wrap header #m_header_bg #m_nav .compare {
    position: absolute; right: 35px; bottom:15px; font-size: 0.88rem;
}
/* #wrap header #m_header_bg #m_nav .compare {position: absolute; right: 0; bottom:0;} */
/* ================================================================================= header.on */
#wrap header.on {background-color: #fff; border-bottom: 1px solid #e9e9e9;}
#wrap header.on h1 a {filter: invert();}
#wrap header.on nav .gnb li > a {color:#000;}
#wrap header.on #user_menu {filter: invert();}
#wrap header nav .gnb:hover li > a {color: #888888;}
#wrap header nav .gnb li:hover > a.active {color: #002D72; font-weight: 600;}
/* #wrap header.open {display:block} */
/* ========================================================================= */
#wrap footer {background-color: #00173A; padding: 70px 120px 50px 120px;}
#wrap footer * {color: #fff;}
#wrap footer .top_line {display: flex; flex-flow: row nowrap; gap:84px; margin-bottom: 94px;}
#wrap footer .top_line dl {display: flex; flex-flow: column nowrap; gap:10px;}
#wrap footer .top_line dl dt {font-weight: 600;}
#wrap footer .top_line dl dd {}
#wrap footer .top_line dl dd a {display: block;}
#wrap footer .top_line .f_support {}
#wrap footer .top_line .f_support dt {}
#wrap footer .top_line .f_support dd {}
#wrap footer .top_line .f_support dd a {}
#wrap footer .top_line .f_policy {}
#wrap footer .top_line .f_policy dt {}
#wrap footer .top_line .f_policy dd {}
#wrap footer .top_line .f_policy dd a {}
#wrap footer .top_line .f_sns {display: flex; flex-flow: row wrap; gap:10px; align-content: flex-start;}
#wrap footer .top_line .f_sns dt {width: 100%;}
#wrap footer .top_line .f_sns dd {}
#wrap footer .top_line .f_sns dd a {width: 14px; height: 14px; display: block;}
#wrap footer .top_line .f_sn dd a img {width: 100%; height: 100%;}
#wrap footer .btm_line {display: flex; flex-flow: row nowrap; align-items: flex-end; justify-content: space-between;}
#wrap footer .btm_line p {font-size: 1.25rem; font-weight: 600; white-space: nowrap;}
#wrap footer .btm_line address {font-size: 0.88rem; word-break:keep-all; text-align: right; width:70%;}