@charset "utf-8";
/* CSS Document */


#brandAll {}

#brandAll .brand_search { width:100%; }

#brandAll .brand_box {
    background: #f8f8f8; padding: 40px; border-radius: 20px; position: sticky; top: 136px; 
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); transition: all 0.4s ease;
}
#brandAll .brand_box.scroll-hidden {
    transform: translateY(-100%); opacity: 0; pointer-events: none;
}

/* 북마크 토글 버튼 */
.bookmark-toggle {
    position: fixed; top: 144px; right: calc((100vw - 1204px) / 2); z-index: 1000; cursor: pointer;
    opacity: 0; transform: translateY(-20px); transition: all 0.4s ease;
    pointer-events: none;
}
.bookmark-toggle.show {
    opacity: 1; transform: translateY(0); pointer-events: all;
}
.bookmark-toggle.active .bookmark-icon {
    background: #005bf1; color: #fff;
}

.bookmark-icon {
    width: 50px; height: 50px; background: #fff; border-radius: 25px;
    display: flex; align-items: center; justify-content: center; color: #555;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); transition: all 0.3s ease;
    position: relative; z-index: 2;
}
.bookmark-icon:hover {
    background: #005bf1; color: #fff; transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 91, 241, 0.3);
}
#brandAll .brand_box .brand_shr {display: flex; gap: 8px; align-items: center; justify-content: center; margin-bottom: 24px;}
#brandAll .brand_box .brand_shr input {width: 280px;}
#brandAll .brand_box .brand_shr .shrinput{}
#brandAll .brand_box .brand_shr .search_focus {}

#brandAll .brand_search .brand_word { display:block; width:938px; background-color:#FFF; padding:22px 0; margin:17px 20px ;}

#brandAll .brand_search .brand_word a { background-color:#f4f4f4; border:#d5d5d5 solid 1px; padding:5px 5px 0 5px; color:#6d6d6d; font-size:11px; margin:4px 3px }  
#brandAll .brand_search .brand_word a:hover,
#brandAll .brand_search .brand_word a:active,
#brandAll .brand_search .brand_word a:focus, 
#brandAll .brand_search .brand_word a.on { border:#333333 solid 1px; background-color:#6d6d6d; color:#FFF; text-decoration:none}

#brandAll .brand_search .brand_word .tit_kor { background:url(/img/brand/search_tit_kor.png) no-repeat 50px 5px; padding-left:208px; }
#brandAll .brand_search .brand_word .tit_eng { background:url(/img/brand/search_tit_eng.png) no-repeat 50px 5px; padding-left:208px; }

#brandAll .brand_search .brand_word_view {width: 1200px; margin: 48px auto 32px; display: flex;}
#brandAll .brand_search .brand_word_view p {
    width: 300px; font-family: 'PLBold'; font-size: 64px; line-height: 1; margin: 16px 0 0 0; padding: 0; color: #e0e3e7;
}
#brandAll .brand_search .brand_word_view span {}
#brandAll .brand_search .brand_word_view span a {}

#brandAll .brand_search .brand_word_view .word-wrap {width: 100%; display: flex; flex-direction: column;}
#brandAll .brand_search .brand_word_view .word-wrap span {width: 240px; padding: 8px;}
#brandAll .brand_search .brand_word_view .word-wrap span:last-child {margin-bottom: 32px;}
#brandAll .brand_search .brand_word_view .word-wrap span.letter-header {
    width: 100%; margin: 0 0 12px; background: #f8f8f8; color: #555; font-size: 19px; font-weight: 600; text-align: center; 
    border-radius: 8px; height: 40px; line-height: 40px; padding: 0;
}
#brandAll .brand_search .brand_word_view .word-wrap .brand-span-wrap {display: flex; flex-wrap: wrap; width: 100%;}
#brandAll .brand_search .brand_word_view .word-wrap .brand-span-wrap:last-child {}


/* 브랜드 상세뷰 메인 */

#brandAll .brand_main_new {overflow: hidden; padding: 16px; border-radius: 20px; box-shadow: 0 0 16px rgba(0, 0, 0, .15); line-height: 0; display: flex; flex-direction: column; justify-content: space-between;}
#brandAll .brand_main_new .zim { width:215px; height:215px; border:0; margin:0; padding:0; }
#brandAll .brand_main_new .zim span  { display:inline-block; line-height:0; height:0; margin:0; padding:0;}
#brandAll .brand_main_new .zim .brand_img { width:215px; height:154px; line-height:154px; border:0;}
#brandAll .brand_main_new .zim .brand_img img { width:215px; height:154px; text-align:center;vertical-align:middle }
#brandAll .brand_main_new .brand_story_new { width:723px; margin:0 0 0 10px;}
#brandAll .brand_main_new .brand_story_new img { width:723px; height:215px; border-radius:8px; }
#brandAll .brand_main_new .brand_rank { display:inline-block; width:948px; height:auto; background:#fff; margin-top:10px; padding:0; }
#brandAll .brand_main_new .rankImg { position:relative; width:215px; height:85px; background:url(/img/brand/brand_preference.png); }
#brandAll .brand_main_new .rankImg ul {padding:0;}
#brandAll .brand_main_new .rankImg li { margin: 0; padding: 0px 3px; border : 0; }
#brandAll .brand_main_new .brand_rank .brand_bt { list-style:none; margin:0; padding:0; border:0; }
#brandAll .brand_main_new .brand_rank .brand_bt li { margin: 0; padding:4px 0 0 0; border : 0; }
#brandAll .brand_main_new .brand_ic { display:block; position:absolute; padding:0px; margin:-26px 0 0 311px; width:7px; height:4px; background:url(/img/brand/bt_ic.gif); z-index:99; border:0; }
#brandAll .brand_main_new .brand_ic2 { display:block; position:absolute; padding:0px; margin:-26px 0 0 104px; width:7px; height:4px; background:url(/img/brand/bt_ic2.gif); z-index:99; border:0; }

#brandAll .brand_main { width:100%; height:175px; border-bottom:#e2e2e2 solid 1px; border-top:#e2e2e2 solid 1px; }

#brandAll .brand_main .zim { width:195px; height:174px; border:#e9e9e9 solid 1px; text-align:center; }
#brandAll .brand_main .zim span  { display:inline-block; line-height:0; height:0}
#brandAll .brand_main .zim .brand_img { width:189px; height:131px; line-height:128px; border:#f7f7f7 solid 3px;text-align:center;}
#brandAll .brand_main .zim .brand_img img { width:171px; height:70px; text-align:center;vertical-align:middle }


#brandAll .brand_story1 { width:490px; margin:1px;}
#brandAll .brand_story img { width:490px; height:173px;}

#brandAll .brand_story2 { width:390px; margin-left:20px;}
#brandAll .brand_story2 p { padding:0px 0px 0 1px; line-height:18px; height:106px }

#brandAll .brand_story { width:270px; height:176px;  border-left:#e2e2e2 solid 1px;  padding:0px 10px;}

#brandAll .line_bar { width:100%; margin-top:20px; height:50px; background:url(/img/main/bg_customer.gif) repeat-x 0 0; }

#brandProduct {background: #f8f8f8; border-radius: 8px; border: 1px solid #dedede; overflow: hidden; margin-bottom: 24px;}
#brandProduct .CategoryList {width: 100%; list-style: none; padding: 12px 16px; display: flex; justify-content: flex-start;}
#brandProduct .CategoryList li { text-align: center; }
#brandProduct .CategoryList a {color: #555; font-size: 15px; font-weight: 600; line-height: 32px; display: block; padding: 0 12px; border-radius: 32px;}
#brandProduct .CategoryList a.select {color: #333; background: #eeeeee;}
.category-tab {background: #ffffff; padding: 12px 24px 12px; position: relative; width: calc(100% - 40px); margin: 0 auto 16px; border-radius: 8px;}
.category-tab .second-dpt > a {display: inline-block; padding: 0 16px 0 0;}
.category-tab .second-dpt.select > a {display: inline-block; text-decoration: underline;}

#brandProduct .brand_word_view { width:100%; background-color:#ecf0fe; padding-top:10px; padding-bottom:10px; padding-left:60px;  }
#brandProduct .brand_word_view span { width:150px; }
#brandProduct .brand_word_view span a { color:#707070; padding-left:20px; }

#customer {width: 100vw;}
#customer.customer-info {}


/* 250610 브랜드 전체보기 페이지 수정 */
.sort-tabs {}
.sort-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
.sort-group a {
    background-color: #e0e3e7;
    border: none;
    padding: 6px 10px;
    font-size: 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: text-decoration 0.2s;
    font-weight: 500;
    color: #69758b;
}
.sort-group a.actdive,
.sort-group a:hover {
    background-color: #005bf1;
    color: #fff;
}
.sort-group a.on {background-color: #69758b;
    color: #fff;}