/************************************************************
공통 CSS
************************************************************/
body {overflow-x: hidden !important;}
body.onsearch{overflow: hidden; height: 100%;}

/************************************************************
모바일 검색창 온오프
************************************************************/
html.onsearch{overflow: hidden;}

/************************************************************
헤더
************************************************************/
/* 헤더 > 우측 상단 서브 메뉴
html\thema\Fivesense-basic\shop.head.php */
/* .at_lnb .right_lnb ul li {padding: 0 13px; height: 39px; line-height: 37px;}
.at_lnb .right_lnb ul li:first-child {padding: 0 13px 0 0;}
.at_lnb .right_lnb ul li:last-child {padding: 0 0 0 13px;}
.at_lnb .right_lnb ul li:after {background: #d0d0d0; height: 11px;}
.at_lnb .right_lnb ul li a {line-height: 39px; color: #777; transition: all .5s;}
.at_lnb .right_lnb ul li a:hover {color: var(--main-btn-point-color);} */

/* 헤더 > 로고, 검색창, 아이콘 메뉴
html\thema\Fivesense-basic\shop.head.php */
.pc_header {padding: 5px 0 10px;}
.pc_header .container_fix {display: flex; align-items: center;}
.pc_header .container_fix > div {display: block;}
.pc_header .container_fix > div.logo_box {width: auto;}
.pc_header .container_fix > div.search_box {width: 400px; margin: auto; position: relative; left: 5px; z-index: 10;}
.pc_header .container_fix > div.search_box > form .header_search input {font-size: 16px; border: 1px solid var(--main-btn-point-color); border-radius: 5px; padding-left: 20px;}
.pc_header .container_fix > div.search_box > form .header_search .search_btn {right: 15px;}
.pc_header .container_fix > .lnb_box .lnb_list {display:flex; align-items: center;}
.pc_header .container_fix > .lnb_box .lnb_list li {padding: 0 15px;}
/* .pc_header .container_fix > .lnb_box .lnb_list li:first-child {padding-left: 0;} */
/* .pc_header .container_fix > .lnb_box .lnb_list li:last-child {padding: 0 6px 0 15px; position: relative;} */
/* .pc_header .container_fix > .lnb_box .lnb_list li .marker_box {width: 20px;} */
.pc_header .container_fix > .lnb_box .lnb_list li .marker_box .marker_msg {width: 220px; padding: 19px 22px;}
.pc_header .container_fix > .lnb_box .lnb_list li .marker_box .marker_msg .msg_box {font-size: 15px; color: #666;}
.pc_header .container_fix > .lnb_box .lnb_list li .marker_box .marker_msg .address {margin-top: 15px; border-radius: 5px;}
.pc_header .container_fix > .lnb_box .lnb_list li .marker_box .marker_msg .address a {font-size: 13px;}
.pc_header .container_fix > .lnb_box .header_cart{position: relative;}
.pc_header .container_fix > .lnb_box .cart_count {display: inline-block; width: 15px; height: 15px; border-radius: 50%; background: var(--main-box-point-color); text-align: center; line-height: 14.5px; font-size: 10px; font-weight: 500; color: #fff; position: absolute; right: 1px; bottom: -4px;}

@media (max-width: 991px) {
    /* .m_header {padding: 11px 0;}
    .at-menu .m-menu{border-bottom: 1px solid #eee;}
    .m_header .container_fix .left_menu {display: none;}
    .m_header .container_fix .center_logo {flex-grow: 0;}
    .m_header .container_fix .center_logo img {height: 23px;}
    .m_header .container_fix .right_menu {margin-left: auto;}
    .m_header .container_fix .right_menu .right_list {display: flex; align-items: center;}
    .m_header .container_fix .right_menu .right_list li + li {margin-left: 19px;}
    .m_header .container_fix .right_menu .right_list li .marker_box {width: 17px;}
    .m_header .container_fix .right_menu .right_list li a.m_marker {width: 17px; height: 23px;}
    .m_header .container_fix .right_menu .right_list li .search_btn img {height: 22px;}
    .m_header .container_fix .right_menu .right_list li:last-child {position: relative; top: -1px;}
    .m_header .container_fix .right_menu .right_list li:last-child img {height: 24px;}
    .m_header .container_fix .right_menu .right_list li .cart_count {display: block; width: 13.5px; height: 13.5px; border-radius: 50%; background: var(--main-btn-point-color); font-size: 10px; font-weight: 700; color: #fff; text-align: center; line-height: 13px; position: absolute; bottom: -4px; right: -4px;} */
}

/* 헤더 > 검색창 하단의 검색 내용 미리보기 ( PC )
html\thema\Fivesense-basic\shop.head.php */

/* 헤더 > 메인 메뉴
html\thema\Fivesense-basic\menu.php */
.nav-fixed .at-menu {z-index: 11;}
.at-menu {border-top: none; border-bottom: none;}
.at-menu .pc-menu{box-shadow: 0 6px 6px rgba(61, 61, 61, 0.05);}
.at-menu.index_menu .pc-menu{box-shadow: none;}
.sticky-wrapper.nav-fixed .at-menu.index_menu .pc-menu{box-shadow: 0 2px 10px rgba(61, 61, 61, 0.03);}
.at-menu .pc-menu .nav-top {display: flex; align-items: center;}
.at-menu .pc-menu .nav-top.nav-both .menu-ul {display: block; width: auto;}
.at-menu .pc-menu .nav-top.nav-both .menu-ul .menu-li > a {font-size: 16px; font-weight: 500; color: #333; padding: 0px 30px; transition: all .5s;}
.at-menu .pc-menu .nav-top.nav-both .menu-ul .menu-li.on > a span:after, .at-menu .pc-menu .nav-top.nav-both .menu-ul .menu-li:hover > a span:after {display: none;}
.at-menu .pc-menu .nav-top.nav-both .menu-ul .menu-li:nth-of-type(2) > a {padding-left: 0;}
.at-menu .pc-menu .nav-top.nav-both .menu-ul .menu-li.all_category_btn {margin-right: 245px;}
.at-menu .pc-menu .nav-top.nav-both .menu-ul .menu-li.all_category_btn > a {padding: 0;}
.at-menu .pc-menu .nav-top.nav-both .menu-ul .menu-li.all_category_btn:hover > a {color: #333;}
.at-menu .pc-menu .nav-top.nav-both .menu-ul .menu-li.all_category_btn > a img {margin-top: -3px; margin-right: 9px;}
.at-menu .pc-menu .nav-top.nav-both .menu-ul .menu-li > .sub-slide{display: none !important;}
.at-menu .pc-menu .nav-top .order_delivery_btn {margin-left: auto;}
.at-menu .pc-menu .nav-top .order_delivery_btn a {display: block; width: 110px; height: 30px; border: 1px solid #dfdfdf; border-radius: 15px; font-size: 13px; color: #777; text-align: center; line-height: 28px;}

@media (max-width: 1050px){
    .at-menu .pc-menu .nav-top.nav-both .menu-ul .menu-li.all_category_btn {margin-right: 100px;}
}

@media (max-width: 991px) {
    .at-menu .m-menu .m-wrap .m-list .m-nav {margin: 0;}
    .at-menu .m-menu .m-wrap .m-list .m-nav ul li a {font-size: 13.5px; color: #333; font-weight: 500; line-height: 35px; letter-spacing: 0; padding: 0 12.5px;}
    .at-menu .m-menu .m-wrap .m-list .m-nav ul li:first-child a {padding-left: 30px;}
    .at-menu .m-menu .m-wrap .m-list .m-nav ul li.active a {color: var(--main-btn-point-color);}
    .at-menu .m-menu .m-wrap .m-list .m-nav ul li.active a:after {display: none;}
}

/* 헤더 > 카테고리 하위 메뉴
html\thema\Fivesense-basic\menu.php */
.at-menu .pc-menu .all_menu {top: 56px; width: 140px; border: 1px solid #dcdcdc;}
.at-menu .pc-menu .all_menu .all_ul {padding: 0; overflow: visible; position: relative;}
.at-menu .pc-menu .all_menu .all_ul > .all_li {width: 100%; height: auto; float: none; margin-right: 0;}
.at-menu .pc-menu .all_menu .all_ul > .all_li > .all_a {line-height: 45px; padding-bottom: 0; margin-bottom: 0; border-bottom: none; font-size: 14px; font-weight: 400; color: #333; transition: all .5s;}
.at-menu .pc-menu .all_menu .all_ul > .all_li:hover > .all_a {color: var(--main-btn-point-color); background: #f7f7f7;}

/* 헤더 > 카테고리 하위 메뉴
html\thema\Fivesense-basic\menu.php */
.at-menu .pc-menu .all_menu .all_ul > .all_li > .all_sub_div {width: 100%; opacity: 1; position: absolute; left: 138px; top: -1px; background: #fff; border: 1px solid #dcdcdc;}
.at-menu .pc-menu .all_menu .all_ul > .all_li > .all_sub_div .all_sub_li a {padding: 0; line-height: 45px; transition: all .5s;}
.at-menu .pc-menu .all_menu .all_ul > .all_li > .all_sub_div .all_sub_li:hover a {background: #f7f7f7;}

/* 윙배너 */
.wing-right #stv #stv_list ul{width: 70px;}
.wing-right .stv_item .prd_img{margin-bottom: 4px;}

/************************************************************
푸터
************************************************************/
/* 탑 버튼
html\thema\Fivesense-basic\shop.tail.php */
.at-go .go-btn {width: 52px; height: 52px; background: #ececec; border-radius: 50%; text-align: center; line-height: 45px; cursor: pointer; right: 52px; bottom: 44px; z-index: 30;}
.at-go .go-btn img{display: inline-block;}


/************************************************************
drag-wrap 위젯 공통 Drag 커서 커스텀 (26.01.05)
html\thema\FIVESENSES\widget
drag-wrap 클래스가 있는 위젯만 적용
************************************************************/
.drag-wrap .swiper .swiper-wrapper,
.swiper.drag-wrap .swiper-wrapper,
.swiper .swiper-wrapper.drag-wrap {
    cursor: none !important;
}

.drag-wrap .swiper .swiper-wrapper .swiper-slide a,
.drag-wrap .swiper .swiper-wrapper .swiper-slide a * {
    cursor: pointer !important;
}

.drag-wrap .swiper .swiper-button-prev,
.drag-wrap .swiper .swiper-button-next,
.swiper.drag-wrap .swiper-button-prev,
.swiper.drag-wrap .swiper-button-next {
    cursor: pointer !important;
}

.drag-wrap .swiper .swiper-wrapper a.swiper-slide,
.drag-wrap .swiper .swiper-wrapper a.swiper-slide * {
    cursor: none !important;
}

/* 모바일(991px 이하)에서는 기본 포인터로 복원 */
@media (max-width: 991px) {
    .drag-wrap .swiper .swiper-wrapper,
    .swiper.drag-wrap .swiper-wrapper,
    .swiper .swiper-wrapper.drag-wrap {
        cursor: pointer !important;
    }
    
    .drag-wrap .swiper .swiper-wrapper a.swiper-slide,
    .drag-wrap .swiper .swiper-wrapper a.swiper-slide * {
        cursor: pointer !important;
    }
    
    .custom-drag-cursor {
        display: none !important;
    }
}

.custom-drag-cursor {
    position: fixed;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: var(--main-btn-point-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width .3s ease, height .3s ease, opacity .3s ease;
    opacity: 0;
    z-index: 99999;
    user-select: none;
    pointer-events: none;
    cursor: none;
}

/* ::after 기본 상태 - 항상 존재하지만 투명 */
.custom-drag-cursor::after {
    content: "< DRAG >";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: 'SUIT', sans-serif;
    color: var(--main-btn-point-color);
    opacity: 0;
    transition: opacity .15s ease;
}

.custom-drag-cursor.active {
    top: 0;
    left: 50%;
    width: 100px;
    height: 100px;
    border: 1px solid var(--main-btn-point-color);
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(5px);
    transition: width .3s ease, height .3s ease, opacity .3s ease;
    opacity: 1;
}

/* .active일 때 ::after 텍스트 지연 후 표시 */
.custom-drag-cursor.active::after {
    opacity: 1;
    transition: opacity .1s ease .1s; /* 0.2초 지연 후 0.2초 동안 페이드인 */
}

/************************************************************
more-wrap 위젯 공통 View More 커서 커스텀 (26.01.05)
html\thema\FIVESENSES\widget
more-wrap 클래스가 있는 위젯만 적용
************************************************************/
.more-wrap,
.more-wrap img,
a.more-wrap,
.more-wrap a,
.more-wrap a * {
    cursor: none !important;
}

/* 모바일(991px 이하)에서는 기본 포인터로 복원 */
@media (max-width: 991px) {
    .more-wrap,
    .more-wrap img,
    a.more-wrap,
    .more-wrap a,
    .more-wrap a * {
        cursor: pointer !important;
    }
    
    .custom-view-cursor {
        display: none !important;
    }
}

.custom-view-cursor {
    position: fixed;
    transform: translate(-50%, -50%) scale(0.9);
    display: inline-block;
    opacity: 0;
    z-index: 99999;
    user-select: none;
    pointer-events: none;
    cursor: none;
}

.custom-view-cursor.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition: transform .3s ease;
}

.custom-view-cursor .view-cursor-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.custom-view-cursor .view-cursor-inner .cursor-txt {
    display: inline-block;
    padding: 14px 17px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(14px);
    border-radius: 2.5rem;
    font-family: 'SUIT', sans-serif;
    font-size: 16px;
    color: var(--main-btn-point-color);
    white-space: nowrap;
}

.custom-view-cursor .view-cursor-inner .cursor-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--main-btn-point-color);
    border-radius: 50%;
}