/* BASIC css start */
.top_banner{height:32px;}
.top_banner a{display:block; height:100%; text-align:center; line-height:32px;}

.header{background:#fff; width:100%;}
.header.fixedHeader{position:fixed; top:0; left:0; z-index:99; border-bottom:solid 1px #D9D9D9}
.header .top{padding:12px 0; z-index: 9; position: relative; background:#fff;}
.header .top .inner{display:flex; justify-content: space-between; align-items: center;}
.header .top .inner .logo{}
.header .top .inner .logo a{display:block;}
.header .top .inner .logo a img{width:96px;}

.header .top .inner .pageTitle{display:flex; align-items: flex-end;}
.header .top .inner .pageTitle a{display:block; margin-right:8px; width:24px; height:24px;}
.header .top .inner .pageTitle a img{height:100%;}
.header .top .inner .pageTitle span{font-size:18px; font-weight:500; line-height:22px;}

.header .top .inner .nav{display:flex;}
.header .top .inner .nav li{margin-left:8px; width:28px;}
.header .top .inner .nav li a{display:block;}
.header .top .inner .nav li:nth-child(1){display:none;}
.header .top .inner .nav li a.btn_cart{position:relative;}
.header .top .inner .nav li a.btn_cart #user_basket_quantity{position:absolute; display:block; width: 11px; height: 11px; right: 3px; bottom: 4px; color: #fff; font-size: 8px; text-align: center; line-height:13px;}
.header .top .inner .nav li a img{display:block; width:100%;}

.header .gnb{background:#fff; position:relative; z-index:8;}
.header .gnb ul{height:51px;}
.header .gnb ul li a{display:block; font-size:16px; padding:16px 0;}
.header .gnb ul li.active a{border-bottom:solid 2px #000; padding:16px 0 14px 0;}

.point_dot {position:relative;}
.point_dot::after {content:""; position:absolute; top:28%; right: -5px; width:4px; height:4px; border-radius:50%; background:#F17957;}


.sideMenu{position:fixed; top:0; right:0; background:#fff; width:92%; height:100%; z-index:9999; overflow-y:auto; transform:translateX(100%); transition: transform 0.3s;}
.sideMenu.on{transform:translateX(0);}
.sideMenu .side_header{display: flex; justify-content: space-between; align-items: center; padding:24px 0 18px; text-align:right;}
.sideMenu .side_header img{ width:24px; height:24px;}
.sideMenu .member_box{ padding-bottom:21px;}
.sideMenu .member_box .welcome_txt a{font-size:15px; line-height: normal; letter-spacing: -0.3px; font-weight: 500;}
.sideMenu .member_box .grade_benefit{display:flex; justify-content:space-between; margin-bottom:18px; background-color: #f2f2f2; padding: 12px;}
.sideMenu .member_box .grade_benefit a{display: flex; align-items: center; text-decoration:underline; color:#474A50; font-size:13px}
.sideMenu .member_box .grade_benefit a span{border:solid 1px #F06D48; display:inline-block; padding:2px 6px; color:#F06D48; font-size:14px; line-height:17px; margin-right:8px;}
.sideMenu .member_box .grade_benefit a p{display:inline-block; font-size:17px; color:#F06D48; line-height:21px;}
.sideMenu .member_box .user_benefit{display:flex; justify-content: space-between; position:relative;}
.sideMenu .member_box .user_benefit::after{content:''; display:block; width:1px; height:19px; background:#D6D6D6; position:absolute; left:50%; top:0; transform:translateX(-50%);}
.sideMenu .member_box .user_benefit li{width:calc(50% - 4vw);}
.sideMenu .member_box .user_benefit li a{display:flex; justify-content: space-between;}
.sideMenu .member_box .user_benefit li a span:first-child{font-size:14px; line-height:20px;}
.sideMenu .member_box .user_benefit li a span:last-child{font-size:14px; line-height:20px;}
.sideMenu .member_box .user_benefit li a span:last-child strong{font-size:14px; font-weight:400; line-height:20px;}
.sideMenu .login_link{font-size:17px; line-height:21px;}
.sideMenu .login_link a{font-size: 15px; font-weight: 500; line-height: 13px; letter-spacing: -0.3px; color: #333; text-decoration:underline}
.sideMenu .couponBox{background:#F0EEE9; border-radius:4px;}
.sideMenu .couponBox a{display:block; display:flex; justify-content: space-between; align-items: center; padding:0 12px 10px 12px;}
.sideMenu .couponBox p{font-size:12px; font-weight:400; line-height:15px; padding-top:10px; color:#474A50; letter-spacing: -0.24px;}
.sideMenu .couponBox p span{display:block; font-size:15px; font-weight:600; line-height:20px; color:#000; margin-bottom:2px; letter-spacing: -0.3px;}
.sideMenu .couponBox img{width:64px;}

.sideMenu .menu{padding-top:10px;}
.sideMenu .menu li{position:relative;}
.sideMenu .menu li span.depth1_name,
.sideMenu .depth1_name{font-size:18px; line-height:24px; font-weight:500; padding:10px 16px; display:block; letter-spacing: -0.36px;}
.sideMenu .menu li span.depth2_name{font-size:15px; line-height:17px; color:#242424; display:inline-block;}
.sideMenu .menu li.acc::after{content:''; display:block; position:absolute; width:24px; height:24px; right:1rem; top:12px; background-image:url(/design/justmysize/ECHO/icon/ico_arrow_down.svg); background-size:contain; background-repeat:no-repeat; background-position:center center; pointer-events: none;}
.sideMenu .menu li.acc.on::after{transform:rotate(180deg); transform-origin: center center;}
.sideMenu .menu li.acc:not(.event) > .thum_menu, .sideMenu .menu li.acc > ul{display:none;}

.sideMenu .menu li.acc.on > ul{ width:100%}
.sideMenu .menu li.acc.on > .thum_menu{padding-bottom:24px; height:fit-content;}
.sideMenu .menu li.acc.on > .thum_menu li{height:fit-content;}
.sideMenu .menu li.acc.on > .thum_menu img{display:block; width:96px; height:96px; border-radius:2px; overflow:hidden;}
.sideMenu .menu li.acc.on > .thum_menu .depth2_name{margin-top:4px; padding:4px 0;}
.sideMenu .menu li.acc > ul > li > a{padding:8px 0; display:block; font-size:15px; line-height:24px; padding-left:24px; letter-spacing: -0.3px; color: #474A50;}
/*
.sideMenu .menu li.brand{display:flex; flex-wrap: wrap; justify-content: center;}
*/
.sideMenu .menu li.brand .depth1_name{width:100%;}
.sideMenu .menu li.event{position:relative; padding:30px 0 40px;}
.sideMenu .menu li.event::before{content:''; position:absolute; display:block; width:100%; height:5px; background:#E8EAED; top:16px; left:50%; transform:translateX(-50%);}
.sideMenu .menu li.event::after{content:''; position:absolute; display:block; width:100%; height:5px; background:#E8EAED; bottom:24px; left:50%; transform:translateX(-50%); color:#333;}
.sideMenu .menu li.event .depth1_name{display:inline-block; font-size:14px; line-height:13px}
.sideMenu .menu li.event > a{display:block; position:absolute; right:16px; top:42px;}
.sideMenu .menu li.event .thum_menu{padding-bottom:6px;}
.sideMenu .menu li.event .thum_menu ul,
.sideMenu .menu li.event .thum_menu ul li{height:fit-content;}
/*.sideMenu .menu li.event .thum_menu img{display:block; width:96px; height:64px; border-radius:2px;}*/
.sideMenu .menu li.event .thum_menu .depth2_name{margin-top:8px; color:#212326;}
.sideMenu .menu li.event .thum_menu .depth2_name .desc{font-size:12px; line-height:14px; color:#878787; display:block;}
.sideMenu .menu li.help_menu{ margin-bottom:50px;}
.sideMenu .menu li.help_menu .depth1_name{width:100%;}
.sideMenu .menu li.help_menu > ul > li a span{ font-size:14px; font-weight:400; line-height:17px; color:#242424; padding:0;}
.event-title-wrap{display:flex; justify-content:space-between; align-items: baseline; padding-right:12px;}
.event-title-wrap > a{color:#444; text-decoration:underline; font-size:13px}
.thum_menu.event li a{display:block; width:133px;}
.sideMenu .menu li .thum_menu.event li a img{width:100%; height:100%; object-fit:cover}

.dimmed{position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.3); z-index:999; top:0; left:0; display:none;}
.dimmed.on{display:block;}

/* 검색 */
.search_box { position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.5); background-image:url(/design/justmysize/ECHO_2025/09.search/search_bg.jpg); background-size:cover; background-position:center center; background-repeat:no-repeat; display:none; background-blend-mode: multiply; z-index:9999;}
.search_box.search_open{display:block;}
.search_box .btn_search_close { position:absolute; top:16px; left:1rem; width:28px; }
.search_box .btn_search_close img{width:100%;}
.search_box .search{ position:relative; width:100%; top:50%; left:0; transform:translateY(-50%);}
.search_box .search fieldset{border:none; position:relative;}
.search_box .search fieldset .MS_search_word { width:100%; border:0; padding:14px 0; border-bottom:solid 1px #fff; color:#fff; font-size:20px; font-weight:500; line-height:24px; caret-color: #F16D48; padding-right:52px; border-radius:0;}
.search_box .search fieldset .MS_search_word::placeholder{color:#fff;}
.search_box .search fieldset .btn-remove{position:absolute; right:32px; top:50%; width:16px; height:16px; transform:translateY(-50%) rotate(45deg); display:none;}
.search_box .search fieldset .MS_search_word:not(:placeholder-shown) + a.btn-remove{display:block;}
.search_box .search fieldset .btn_search{position:absolute; right:0; top:50%; width:28px; height:28px; transform:translateY(-50%);}

.search_box .best_search_word { padding-top:12px; }
.search_box .best_search_word .word_best{display:flex; flex-wrap: wrap;}
.search_box .best_search_word .word_best a { display:inline-block; margin:4px; padding:6px 10px; border:1px solid #fff; font-size:14px; font-weight:400; line-height:17px; color:#fff;}

/* 2026_LNB */
.menu ul li .depth2-wrap > li {width:100%}
.depth2-wrap > li {position:relative;}
.depth2-wrap > li.active::after{ transform: rotate(180deg); transform-origin: center center;}
.depth2-wrap > li::after{pointer-events: none; content: ''; display: block; position: absolute; width: 24px;height: 24px; right: 1rem; top: 5px; background-image: url(/design/justmysize/ECHO/icon/ico_arrow_down.svg); background-size: contain; background-repeat: no-repeat;  background-position: center center;}
.depth3-wrap{overflow: hidden; display: flex !important; flex-wrap: wrap; gap: 16px 0; max-height:0; box-sizing: border-box; padding-left: 36px; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1); height: auto; will-change: height; background-color:#f8f8f8}
.depth2-wrap li.active .depth3-wrap{ padding-top:16px; padding-bottom:16px;}
.depth3-wrap li{flex: 0 0 50%; box-sizing:border-box;}
.depth3-wrap li a{font-size:14px; color:#5B5D63; padding:initial; line-height:18px}
.grade_benefit-box{display:flex; align-items: center;}
.grade_benefit-box > p{letter-spacing: -0.28px;}
.quickBtn{padding:10px 0 20px;}
.category-quickBtn-wrap{display:flex; align-items:center; justify-content:space-between; padding:0 16px; gap:10px}
.category-quickBtn-wrap li{width: 67px;}
.category-quickBtn-wrap li a{display: flex; flex-direction: column; align-items: center; width: 100%; overflow:hidden;}
.category-quickBtn-wrap li a img{display:block; width:100%; height:100%; object-fit:cover; border-radius: 7px;}
.quickBtn_tlt{font-size:12px; margin-top:8px}
.sideMenu .inner, .quickBtn{border-bottom:5px solid #E8EAED;}
.quickBtn .depth1_name{font-size:14px; letter-spacing: -0.28px; color:#333}
.event > .depth1_name,
.brand > .depth1_name,
.acc > .depth1_name,
.membership > .depth1_name,
.help_menu > .depth1_name,{font-size:14px}
.welcome_txt .user_name,
.welcome_txt .user_grade{font-size: 15px; font-weight:500}
.grade_tag {display: flex; align-items: center; justify-content: center; margin-right: 8px; font-size: 10px; background-color: #000; color: #fff; padding: 3px 9px; font-weight:500}
.sideMenu .menu .brand .depth1_name, 
.sideMenu .menu .news .depth1_name, 
.sideMenu .menu .membership .depth1_name, 
.sideMenu .menu .help_menu .depth1_name {padding:8px 16px; font-size:15px; color:#474A50; letter-spacing: -0.3px;}
.sideMenu .menu .event-title-wrap .depth1_name{padding-bottom:16px}
.sideMenu .menu li.brand > ul > li > a,
.sideMenu .menu li.news > ul > li > a,
.sideMenu .menu li.help_menu > ul > li > a{padding:0; font-size:14px; color:#5B5D63; line-height: 18px;}
.sideMenu .menu li.brand span.depth2_name,
.sideMenu .menu li.news span.depth2_name,
.sideMenu .menu li.help_menu span.depth2_name{font-size:14px; color: #5B5D63;}
.menu > ul > li.acc > .depth3-wrap { flex-wrap: wrap; gap: 16px 0; width: 100%; overflow: hidden; max-height: 0; box-sizing: border-box; padding-left: 36px; padding-top: 0; padding-bottom: 0; background-color: #f8f8f8; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.menu > ul > li.acc.on > .depth3-wrap { padding-top: 16px; padding-bottom: 16px;}
.no-scroll-element {
    touch-action: none; /* 해당 요소에서 터치 스크롤 방지 */
}
/* BASIC css end */