/* BASIC css start */ #header { width: 100%; background-color: transparent; position: fixed; height: max-content; top: 0; margin: 0 auto; z-index: 100; transition: all .4s; } #header.click.show { background-color: #fff; box-shadow: 0 0 38px 1px #8989891f; } #header.click.show .head_inner .head_left .head_left_sub { transform: translateX(0px); opacity: 1; } #header.click.show .head_inner .head_middle nav ul.sub_m { transform: translateY(0px); opacity: 1; } #header.show .head_inner { } #header .head_inner { max-width: 1920px; padding: 0 46px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; transition: all .1s; height: auto; gap: 25px; } #header .head_inner > div { transition: all .3s; height: fit-content; } #header .tab-view {display: none; } .open-menu-wrap .tab-view li a { position:relative; display:inline-block; padding-bottom:0px; color:#333; font-weight:500; transition:color .25s ease; } .open-menu-wrap .tab-view li a.active, .open-menu-wrap .tab-view li a:hover { color:#111; font-weight:600; } .open-menu-wrap .tab-view li a::after { content:""; position:absolute; left:0; bottom:0; width:0%; height:2px; background:currentColor; border-radius:3px; transition:width .25s ease; opacity:.8; } .open-menu-wrap .tab-view li a.active::after, .open-menu-wrap .tab-view li a:hover::after { width:100%; } #header.scroll { background-color: #fff; /*box-shadow: 0 2px 10px rgba(0,0,0,0.1);*/ z-index: 1000; border-bottom: 1px solid #DADCE0; } #header.scroll .head_inner .head_right ul.user_icon li a, #header.click.show .head_inner .head_right ul.user_icon li a { color:#000; /* currentColor → 아이콘도 검정으로 바뀜 */ } #header.scroll .head_inner .head_left .head_left_fix .ham a span { background-color: #000; } #header .head_left_fix .ham a { color: #fff; transition: color .2s ease; } #header .head_left_fix .ham a span { background-color: currentColor !important; } #header.scroll .head_left_fix .ham a, #header.click.show .head_left_fix .ham a { color: #000; } /*-------헤더 포커싱--------*/ #header.click.show .open-menu-wrap, .open-menu-wrap[aria-hidden="false"] {top:105px;} #header.scroll.click.show .open-menu-wrap, .open-menu-wrap[aria-hidden="false"] {top:60px;} /* [공통] 보더 기본 설정 (투명하게 유지하다가 색상만 변경) */ #header .head_inner .head_middle nav ul.main_m > li { border-bottom: 1px solid transparent; /*transition: border-color 0.3s ease;*/ } /* [1] 기본 상태 (스크롤 전, 투명 헤더) - 현재 페이지 메뉴에 흰색 보더 */ #header:not(.scroll) .head_inner .head_middle nav ul.main_m > li.current-page { border-bottom: 1px solid #fff !important; } /* [2] 스크롤 후 (흰색 배경 헤더) - 현재 페이지 메뉴에 검정색 보더 */ #header.scroll .head_inner .head_middle nav ul.main_m > li.current-page { border-bottom: 1px solid #000 !important; } /* [3] 호버 효과 - 배경 상태에 따라 보더 색상 대응 */ #header:not(.scroll) .head_inner .head_middle nav ul.main_m > li:hover { /* border-bottom: 1px solid #fff !important;*/ } #header.scroll .head_inner .head_middle nav ul.main_m > li:hover { /*border-bottom: 1px solid #000 !important;*/ } /* ✅ 강제 다크 상태 */ #header.is-dark { background-color:#fff; } #header.is-dark .head_inner .head_middle nav ul.main_m > li > a{ color:#000 !important; } #header.is-dark .head_inner .head_middle nav ul.main_m > li.current-page, #header.is-dark .head_inner .head_middle nav ul.main_m > li:hover{ border-bottom: 1px solid #000 !important; } @media screen and (min-width: 768px) { /* 기본: 현재 페이지 메뉴 흰색 보더 */ #header:not(.scroll) .head_inner .head_middle nav ul.main_m > li.current-page { border-bottom: 1px solid #fff !important; } /* 스크롤 시: 현재 페이지 메뉴 검정색 보더 */ #header.scroll .head_inner .head_middle nav ul.main_m > li.current-page { /*border-bottom: 1px solid #000 !important;*/ } /* 호버 시 효과 */ #header:not(.scroll) .head_inner .head_middle nav ul.main_m > li:hover, #header.scroll .head_inner .head_middle nav ul.main_m > li:hover { border-bottom-width: 1px !important; border-bottom-style: solid !important; } } /* 767px 이하 (모바일 전용) - 보더 스타일 강제 제거 */ @media screen and (max-width: 767px) { #header .head_inner .head_middle nav ul.main_m > li, .header-container--md .main_m > li { border-bottom: none !important; } }/*-------헤더 포커싱--------*/ /* ▼ 서브메뉴 전체 열림(위→아래 슬라이드) 효과 */ .open-menu-wrap { max-height:0;overflow:hidden;transition:max-height .35s ease; position: absolute; left: 0; right: 0; width: 100%; box-sizing: border-box; max-height: 0; padding: 0; overflow: hidden; opacity: 0; transform: translateY(-10px); pointer-events: none; z-index: 1; transition: max-height .2s ease, opacity .2s ease, transform .2s ease, padding .2s ease; } #header.mode-search .open-menu-wrap, #header.show .open-menu-wrap{max-height:600px;} .open-menu-wrap::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 0px; width: 100vw; height: 100%; background: #fff; z-index: -1; transition:background-color .25s ease; } .open-menu-wrap .menu-content-inner { max-width: 1200px; margin: 0 auto; display: flex; gap: 50px; padding: 0 20px; } .open-menu-wrap .auth-wrap { display: flex; flex-direction: column; flex: 0 0 150px; } .open-menu-wrap .auth-img { max-width: 130px; overflow: hidden; border-radius: 1vw; max-height: 160px; } .open-menu-wrap .auth-img img { width: 100%; height: 100%; } .open-menu-wrap .auth-text { font-size: var(--cw-size-18); line-height: 1.35; font-weight: 500; letter-spacing:-0.5px; white-space: nowrap; margin-top: 10px;} .open-menu-wrap .auth-text svg {margin-left:10px;} .open-menu-wrap .gray-line {width: 1px; background-color: #C3C3C3;} #header.click.show .open-menu-wrap { opacity: 1; transform: translateY(0); pointer-events: auto; padding: 20px 0 50px 0; /*box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.18);*/border-bottom: 1px solid#DADCE0;} #header.click.show .open-menu-wrap { max-height: 800px; opacity: 1; transform: translateY(0); pointer-events: auto; padding: 30px 0 50px 0; } #header.click.show .open-menu-wrap, .open-menu-wrap[aria-hidden="false"] { max-height:800px; opacity:1; transform:translateY(0); pointer-events:auto; padding:30px 0 50px 0; } #header.click.show .open-menu-wrap::before, .open-menu-wrap[aria-hidden="false"]::before { background-color:#ffffff; } /* #header.click.show .head_inner .head_middle nav ul.main_m > li:nth-last-child(5) {display: none !important;} */ /* #header.click.show .hide-on-open { display: none !important; }*/ #header .head_middle nav ul.main_m > li > ul.sub_m { display: none; } #header .head_middle nav ul.main_m > li > ul.sub_m { display: none; } #header .head_inner .head_middle .subbar-card { display:flex; align-items: center; flex-direction: column; gap: 9px; } #header .head_inner .head_middle .subbar { width: 100%; flex: 1 1 auto; min-width: 0; } #header .head_inner .head_middle .subbar .subbar-track { width: 100%; display: grid; gap: 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 10px; row-gap: 30px; } #header .head_inner .head_middle .subbar .subbar-track .subbar-item { padding: 10px 10px 20px 10px; } #header .head_inner .head_middle .subbar .subbar-track.dragging { cursor: grabbing; user-select: none; } #header .head_inner .head_middle .subbar .subbar-track > li > a { display: flex; flex-direction: column; align-items: center; text-align: center; } #header .head_inner .head_middle .subbar .thumb { width: 100%; height: 150px; padding: 12px 0; border-radius: 12px; background-position: center; background-repeat: no-repeat; background-origin: content-box; background-clip: content-box; background-size: auto 100%; } #header .head_inner .head_middle .subbar .label { font-size: var(--cw-size-14); color: #333; line-height: 1.35; font-weight: 500; letter-spacing:-0.2px; text-align:center; min-height: 40px;/*background:yellow;*/} #header .head_inner .head_middle .subbar .actions { display:flex; gap:10px; } #header .head_inner .head_middle .subbar .actions a { position:relative; font-size:var(--cw-size-12); color:#A0A0A0; line-height:0.9; padding-bottom:0; } #header .head_inner .head_middle .subbar .actions a::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background-color:currentColor; opacity:.6; pointer-events:none; } #header .head_inner .head_middle .subbar .actions a:hover { color:#909090; } #header.click.show .head_inner .head_middle .subbar .subbar-track > li { opacity: 0; filter: brightness(0.6); transform: translateY(8px); animation: subbarFadeUp .35s ease forwards; animation-delay: .15s; } #header.click.show .head_inner .head_middle .subbar .subbar-track > li:nth-child(2) { animation-delay: .20s; } #header.click.show .head_inner .head_middle .subbar .subbar-track > li:nth-child(3) { animation-delay: .25s; } #header.click.show .head_inner .head_middle .subbar .subbar-track > li:nth-child(4) { animation-delay: .30s; } #header.click.show .head_inner .head_middle .subbar .subbar-track > li:nth-child(5) { animation-delay: .35s; } #header.click.show .head_inner .head_middle .subbar .subbar-track > li:nth-child(6) { animation-delay: .40s; } #header.click.show .head_inner .head_middle .subbar .subbar-track > li:nth-child(7) { animation-delay: .45s; } #header.click.show .head_inner .head_middle .subbar .subbar-track > li:nth-child(8) { animation-delay: .50s; } #header.click.show .head_inner .head_middle .subbar .subbar-track > li:nth-child(9) { animation-delay: .55s; } #header.click.show .head_inner .head_middle .subbar .subbar-track > li:nth-child(10) { animation-delay: .60s; } #header.click.show .head_inner .head_middle .subbar .subbar-track > li:nth-child(11) { animation-delay: .62s; } #header.click.show .head_inner .head_middle .subbar .subbar-track > li:nth-child(12) { animation-delay: .64s; } #header.click.show .head_inner .head_middle .subbar .subbar-track > li:nth-child(13) { animation-delay: .66s; } #header.click.show .head_inner .head_middle .subbar .subbar-track > li:nth-child(14) { animation-delay: .68s; } @keyframes subbarFadeUp { 0% { opacity: 0; filter: brightness(0.6); transform: translateY(8px); } 100% { opacity: 1; filter: brightness(1); transform: translateY(0); } } #header .head_inner .head_middle nav ul.sub_m { opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s; } #header .head_middle nav ul.main_m > li.open-sub > ul.sub_m { opacity: 1; transform: translateY(0); } /* 상단 좌측 */ #header .head_inner .head_left{width: 140px; min-width:140px;} #header .head_inner .head_left .head_left_fix{display: flex; align-items: center; gap: 20px;height: 60px;} #header .head_inner .head_left .head_left_fix .ham a{} #header .head_inner .head_left .head_left_fix .ham a{ width: 20px;height: 16px;display: block; position: relative;transition: all .4s;} #header .head_inner .head_left .head_left_fix .ham a span{position: absolute;left: 0;width: 100%;height: 2px;transform-origin: center center; background-color: #FFFFFF;border-radius: 4px;transition: all .4s;} #header .head_inner .head_left .head_left_fix .ham a span:nth-of-type(1) {top: 0;transform-origin: left center;} #header .head_inner .head_left .head_left_fix .ham a span:nth-of-type(2) {top: 6.5px;} #header .head_inner .head_left .head_left_fix .ham a span:nth-of-type(3) {bottom: 0;transform-origin: left center;} #header .head_inner .head_left .head_left_fix .ham a.active-1 span:nth-of-type(1) { transform : rotate(45deg); -webkit-transform:rotate(45deg)} #header .head_inner .head_left .head_left_fix .ham a.active-1 span:nth-of-type(2) { left : 200%;opacity : 0;-webkit-animation : active-menu-bar06 .8s forwards;animation : active-menu-bar06 .8s forwards;} #header .head_inner .head_left .head_left_fix .ham a.active-1 span:nth-of-type(3) { transform : rotate(-45deg); -webkit-transform : rotate(-45deg);} @-webkit-keyframes active-menu-bar06 { 100% {height : 0;} } @keyframes active-menu-bar06 { 100% {height : 0;} } #header .head_inner .head_left .head_left_fix h1.logo{z-index: 9999;} #header .head_inner .head_left .head_left_fix h1.logo a{display: flex; align-items: center; justify-content: center;} #header .head_inner .head_left .head_left_fix h1.logo a img{max-height:30px; max-width:100px} #header .head_inner .head_left .head_left_sub{transform: translateX(-30px);opacity: 0; transition: all .6s;;} #header .head_inner .head_left .head_left_sub .search{} /* 헤더 서치 영역 */ #header .head_inner .head_left .head_left_sub .search{border-bottom:3px solid #000; margin-bottom:20px;} #header .head_inner .head_left .head_left_sub .search fieldset{position:relative; transition: all .5s;} #header .head_inner .head_left .head_left_sub .search fieldset input{background:none !important; border:none; width:260px ;height:45px;font-size: 14px; font-weight:400;} #header .head_inner .head_left .head_left_sub .search fieldset .search_icon{ display:inline-block } #header .head_inner .head_left .head_left_sub .search fieldset input::placeholder{color: #ababab;font-size: 15px; font-weight:400;font-family: 'Noto Sans KR', sans-serif; } #header .head_inner .head_left .head_left_sub ul.user_m{display: flex; justify-content: space-between; align-items: center;} #header .head_inner .head_left .head_left_sub ul.user_m li{transition: opacity .5s; opacity: 0;} #header.show .head_inner .head_left .head_left_sub ul.user_m li{opacity: 1;} #header .head_inner .head_left .head_left_sub ul.user_m li a{ font-family: 'Montserrat', sans-serif;display: block; color: #7d7d7d; font-size: 13px; font-weight: 500;} #header .head_inner .head_left .head_left_sub ul.user_m li a:hover{text-decoration: underline;} #header .head_inner .head_left .head_left_sub ul.user_m li a span{} #header .head_inner .head_left .head_left_sub ul.etc_m{display: flex; margin: 60px 0 40px; flex-wrap: wrap;} #header .head_inner .head_left .head_left_sub ul.etc_m li{width: 50%;transition: transform .4s, opacity .5s; opacity: 0;transform: translateX(-60px);} #header.show .head_inner .head_left .head_left_sub ul.etc_m li{transform: translateX(0px); opacity: 1;} #header .head_inner .head_left .head_left_sub ul.etc_m li a{ font-family: 'Montserrat', sans-serif;transition: all .2s;position: relative; color: #494949; font-size: 14px; font-weight: 500; display: block; line-height: 40px;} #header .head_inner .head_left .head_left_sub ul.etc_m li a:hover{color: #000; padding-left: 15px;} #header .head_inner .head_left .head_left_sub ul.etc_m li a:hover::before{content: "→"; display: inline-block; position: absolute; left: 0;} /* 상단 중앙 */ #header .head_inner .head_middle{flex-grow: 1; max-width: 1000px; max-height:50px;} #header .head_inner .head_middle nav{} #header .head_inner .head_middle nav ul.main_m{display: flex; gap: 20px; max-width: 950px; flex-wrap: nowrap; justify-content: space-between;} #header .head_inner .head_middle nav ul.main_m li{max-width: 230px;white-space: nowrap; text-overflow: ellipsis; overflow: hidden; z-index: 9999; } #header .head_inner .head_middle nav ul.main_m>li:hover>a::after{width: 100%;} #header .head_inner .head_middle nav ul.main_m>li>a{ width: max-content;transition: all .2s; line-height: 55px; position: relative; padding-bottom: 5px; color: #FFFFFF; font-size: 14px; font-weight: 500; } #header .head_inner .head_middle nav ul.main_m>li>a::after{position: absolute; width: 0%; transition: width .3s; bottom: 0px; left: 50%; transform: translateX(-50%); transform-origin: center center; background-color: #FFFFFF; height: 3px; content: ""; display: block;} #header .head_inner .head_middle nav ul.sub_m{transform: translateY(-10px); opacity: 0; transition: all .1s; } #header .head_inner .head_middle nav ul.sub_m>li{ transition: transform .6s, opacity .5s; opacity: 0;transform: translateY(-60px);margin-bottom:20px; } #header.show .head_inner .head_middle nav ul.sub_m>li{transform: translateY(0px); opacity: 1;} #header .head_inner .head_middle nav ul.sub_m>li>a{white-space:normal; color: #939393;transition: color .1s; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 500; } #header .head_inner .head_middle nav ul.sub_m>li>a:hover{color: #000;} #header .head_inner .head_middle nav ul.main_m > li > a { width: max-content; transition: all .2s; line-height: 55px; position: relative; padding-bottom: 5px; color: #FFFFFF; font-size: 14px; font-weight: 500; } #header .head_inner .head_middle nav ul.main_m > li > a::after { position: absolute; width: 0%; transition: width .3s; bottom: -15px; left: 50%; transform: translateX(-50%); transform-origin: center center; background-color: #FFFFFF; height: 1px; content: ""; display: block; } #header .head_inner .head_middle nav ul.main_m > li.is-active > a::after { width: 100%; } #header.scroll .head_inner .head_middle nav ul.main_m>li>a, #header.click.show .head_inner .head_middle nav ul.main_m>li>a, #header.mode-search .head_inner .head_middle nav ul.main_m>li>a{color:#000;} #header.scroll .head_inner .head_middle nav ul.main_m>li>a::after, #header.click.show .head_inner .head_middle nav ul.main_m>li>a::after, #header.mode-search .head_inner .head_middle nav ul.main_m>li>a::after{background-color:#000;} /* 서브메뉴 애니메이션 */ #header .head_inner .head_middle nav ul.sub_m { transform: translateY(-10px); opacity: 0; transition: all .1s; } #header .head_inner .head_middle nav ul.sub_m > li { transition: transform .6s, opacity .5s; opacity: 0; transform: translateY(-60px); margin-bottom: 20px; } #header.show .head_inner .head_middle nav ul.sub_m > li { transform: translateY(0px); opacity: 1; } #header .head_inner .head_middle nav ul.sub_m > li > a { white-space: normal; color: #939393; transition: color .1s; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 500; } #header .head_inner .head_middle nav ul.sub_m > li > a:hover { color: #000; } /* 상단우측 */ #header .head_inner .head_right{ min-width:140px; } #header .head_inner .head_right ul.user_icon{ line-height: 60px; display: flex; align-items: center; max-width:140px; justify-content: space-between;} #header .head_inner .head_right ul.user_icon li{ width: 50px; height: 50px; display: flex; align-items: center; justify-content:center; border-radius: 20px;} #header .head_inner .head_right ul.user_icon li a{display:flex; align-items:center; justify-content:center; color:#fff; z-index: 9999; } #header .head_inner .head_right ul.user_icon li a svg{ width:25px; height:25px; display:block;} #header .head_inner .head_right ul.user_icon li a:has(span){ position: relative; padding-right: 9px;} #header .head_inner .head_right ul.user_icon li a:has(span) span{ position: absolute; display: inline-block; font-weight: 500; background-color: #000; color: #fff; font-size: 10px; width: 18px; height: 18px; text-align: center; line-height: 18px; border-radius: 50%; bottom: -2px; right: 1px;} #header .head_inner .head_right ul.user_icon li:nth-child(2) a svg { width: 23px; height: 23px; } #header :is(*)::-webkit-scrollbar{width: 2px;height: 4px;background-color: transparent;} #header :is(*)::-webkit-scrollbar:hover{} #header :is(*)::-webkit-scrollbar-thumb{background-color: #333; } #header :is(*)::-webkit-scrollbar-track{background-color: rgb(243, 243, 243);margin-top:40px; } /* 🔍 PC 검색 */ #header.mode-search .head_inner .head_middle nav ul.main_m>li>a{color:#000;} #header.mode-search .head_inner .head_middle nav ul.main_m>li>a::after{background-color:#000;} .open-menu-wrap .mega-search { display: none; width: 100%; } .open-menu-wrap .mega-search-inner { max-width: 640px; margin: 0 auto; display: flex; gap: 8px; align-items: center;} .open-menu-wrap .mega-search-inner .mega-search-input { flex: 1 1 auto; height: 48px; font-size: 15px;} .open-menu-wrap .mega-search-btn { flex: 0 0 auto; height: 48px; padding: 0 20px; border-radius: 4px; border: 1px solid #000; background: #000; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;} #header.mode-search .open-menu-wrap .mega-search {display: block;} #header.mode-search .open-menu-wrap .subbar, #header.mode-search .open-menu-wrap .gray-line, #header.mode-search .open-menu-wrap .auth-wrap { display: none; } #header.mode-search .open-menu-wrap .tab-view { display: none;} .search_wrap .no-border input:focus { border: none; outline: none; box-shadow: none; } .search_wrap{opacity:0; visibility:hidden;} .search_wrap.on{opacity:1; visibility:visible;} .search_wrap .inner {width: 100%; max-width: 1280px; margin:0 auto; position:relative; padding:0 20px; display:flex; } .search_wrap .search-pc {max-width: 680px; margin:0 auto; } .search_wrap .inner .search_close {} .search_wrap .inner .search_input {position: relative;} .search_wrap .inner .search_input input {width:100%; height: 48px; border:none; border-bottom:1px solid #121212; color: var(--txt); font-size:16px;} .search_wrap .inner .search_input a {position: absolute; right: 10px; top:10px;} .search_wrap .inner .keyword {display:flex; gap:48px; margin-top:48px;} .search_wrap .inner .keyword h3 {font-weight: 600; font-size: 16px; margin-bottom:16px;} .search_wrap .inner .keyword .recmd_search {flex: 1;} .search_wrap .inner .keyword .recmd_search ul { display: flex; flex-wrap: wrap; gap: 10px; } .search_wrap .inner .keyword .recmd_search ul li {display:inline-block; transition: all .3s ease;} .search_wrap .inner .keyword .recmd_search ul li:hover {opacity:.5} .search_wrap .inner .keyword .recmd_search ul li a {font-size:14px; display:block; color: #5D5D5D; padding:6px 16px; background:#E7EDE8; border-radius: 40px;} .search_wrap .inner .keyword .recmd_search ul li:nth-of-type(4) a {margin-right:0;} .search_wrap .inner .keyword .best_search {flex: 1; display:none;} .search_wrap .inner .keyword .best_search ol {} .search_wrap .inner .keyword .best_search ol li {margin-bottom:16px;} .search_wrap.on .inner .keyword .best_search ol li {margin-bottom:16px; opacity: 0; animation: fadeIn 1s forwards;} .search_wrap.on .inner .keyword .best_search ol li:nth-child(1) { animation-delay: 0.1s; } .search_wrap.on .inner .keyword .best_search ol li:nth-child(2) { animation-delay: 0.2s; } .search_wrap.on .inner .keyword .best_search ol li:nth-child(3) { animation-delay: 0.3s; } .search_wrap.on .inner .keyword .best_search ol li:nth-child(4) { animation-delay: 0.4s; } .search_wrap.on .inner .keyword .best_search ol li:nth-child(5) { animation-delay: 0.5s; } .search_wrap.on .inner .keyword .best_search ol li:nth-child(6) { animation-delay: 0.6s; } .search_wrap.on .inner .keyword .best_search ol li:nth-child(7) { animation-delay: 0.7s; } .search_wrap.on .inner .keyword .best_search ol li:nth-child(8) { animation-delay: 0.8s; } .search_wrap.on .inner .keyword .best_search ol li:nth-child(9) { animation-delay: 0.9s; } .search_wrap.on .inner .keyword .best_search ol li:nth-child(10) { animation-delay: 1s; } .search_wrap .inner .keyword .best_search ol li:last-child {margin-bottom:0;} .search_wrap .inner .keyword .best_search ol li a {font-size:14px; color: var(--txt);} .search_wrap .inner .keyword .best_search ol li a b {width:13px; display:inline-block; margin-right:10px; transition: all .3s ease;} .search_wrap .inner .keyword .best_search ol li a:hover b {margin-right:15px;} .search_wrap .inner .keyword .best_search ol li:nth-child(-n+3) a {color:#121212; font-weight:500;} @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* 🔍 모바일 검색 */ #header .head_right .user_icon .search-focus{transition:background-color .2s ease,border-radius .2s ease,padding .2s ease;} #header.mode-search .head_right .user_icon .search-focus{background-color:#303030;border-radius:20px;} #header.mode-search .head_right .user_icon .search-focus a{color:#fff;} #header.mode-search .head_right .user_icon .search-focus svg path{fill:#fff;} .m-search-area,.ssw_search,.ssw_keyword,.ssw_appDown{display:none;} body.m-search-open .m-search-area,body.m-search-open .ssw_search,body.m-search-open .ssw_keyword,body.m-search-open .ssw_appDown{display:block;} /* 모바일 헤더 검색 포커스 */ .header-container--md .search{transition:background-color .2s ease,border-radius .2s ease,padding .2s ease;} .header-container--md .search.search-focus{background-color:#303030;border-radius:18px;padding:3px; margin-right: 5px; } .header-container--md .search.search-focus svg path{fill:#fff;} .header-container--md .search.search-focus img{display:block;} .header-container--md.scroll .search svg path{ fill:#000; } .header-container--md .search.search-focus svg path{ fill:#fff; } .m-search-area, .ssw_search, .ssw_keyword, .ssw_appDown{display:none;} body.m-search-open .m-search-area, body.m-search-open .ssw_search, body.m-search-open .ssw_keyword, body.m-search-open .ssw_appDown { display:block; } body.m-search-open { overflow: hidden; } .header-container--md .search { display:flex; align-items:center; justify-content:center; padding:4px; transition:background-color .2s ease,border-radius .2s ease,padding .2s ease;} .header-container--md .search .icon-btn { display:flex; align-items:center; justify-content:center; width:35px; height:35px;} .header-container--md .search svg { width:25px; height:25px; } .header-container--md .search svg path { fill:#fff; } /* 검색 영역 */ .m-search-area { position: fixed; top: 45px; left: 0; width: 100%; height: 100vh; background: #fff; z-index: 120; overflow-y: auto; } .m-search-area .search { display:flex; justify-content:end; gap: 20px; align-items:center; border-bottom:1px solid #ededed; padding:10px 27px; margin: 10px 0 30px; } .m-search-area .search .btn_back { display:none; } .m-search-area .search .btn_search img { width: auto; height:30px; } .m-search-area .search .searchBox { position: relative; width:90%; } .m-search-area .search .searchBox input {width:100%;height:45px;line-height:45px;background:#f8f8f8;font-size:16px;font-weight:400;color:#999;border:0;border-radius:40px;padding: 0 16px;box-sizing: border-box;} .m-search-area .search .searchBox .clear-button { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: none; background: transparent; border: none; cursor: pointer; } .m-search-area .search .searchBox .clear-button img{display:inline-block;} .m-search-area h3 { font-size:16px; color:#A0A0A0; margin-bottom:16px; display:flex; justify-content:space-between; align-items:center; font-weight: 500; } .m-search-area h3 a { font-size:12px; font-weight:400; color:#656565; } .sch_recmd { position:relative; padding:0 24px 48px; } .sch_recmd ul { display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .sch_recmd ul li a {display:inline-block;font-size:16px;font-weight:400;color:#5D5D5D;background:#E7EDE8;padding: 10px 20px;border-radius:40px;white-space:pre;} .sch_popular { position:relative; padding: 0 20px 48px; } .sch_popular div { display:flex; justify-content: space-between; align-items: center; } .sch_popular ol { display:flex; gap:12px; flex-direction: column; width: 50%; } .sch_popular ol li { } .sch_popular ol:first-child li:nth-child(1) a, .sch_popular ol:first-child li:nth-child(2) a, .sch_popular ol:first-child li:nth-child(3) a {color: var(--main_color_02);font-weight: 500;} .sch_popular ol li a { display:inline-block; font-size:14px; font-weight:400; color:#656565; } .sch_popular ol li a b { display: inline-block; width: 22px; color: var(--main_color_02); } .sch_recent { position:relative; overflow: hidden; padding: 0 20px; } /* 모바일 메뉴창 */ .side-menu-wrap { position: fixed; top: 0; left: -100%; width: 100%; height: 100vh; padding: 18px 24px 60px; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 1000; transition: left 0.3s ease; background: var(--cw-color-white); } .side-menu-wrap.active { display: block; top: 46px; left: 0; } .side-menu-wrap .login { color:#FFFFFF; width: 100%; border-radius: 10px; padding: 12px 0; font-weight: 600; font-size: 17px; } .side-menu-wrap .login:hover { color:#8A9C92; } .side-menu-wrap a { text-decoration: none; } .side-menu-wrap ul.etc_m{display: flex; flex-wrap: wrap;padding: 0 10px; margin: 5px 0 25px; border-bottom: 1px solid #ececec; padding-bottom: 50px;} .side-menu-wrap ul.etc_m li{width: 50%;} .side-menu-wrap ul.etc_m li a{color: #494949; font-size: 15px; font-weight: 500; padding: 10px 0;} .side-menu-wrap .asi_bottom{padding-bottom:10px; } .side-menu-wrap .asi_bottom nav{} .side-menu-wrap .asi_bottom nav ul.main_m{} .side-menu-wrap .asi_bottom nav ul.main_m>li{} .side-menu-wrap .asi_bottom nav ul.main_m>li.red>a:not(:has(span)){color: red;} .side-menu-wrap .asi_bottom nav ul.main_m>li>a{display: block;line-height:1.2;padding: 13px 0px; font-size: 18px; color: #303030; font-weight: 600;} .side-menu-wrap .asi_bottom nav ul.main_m>li>a.cateOpenBtn{display: flex; justify-content: space-between; align-items: center; } .side-menu-wrap .asi_bottom nav ul.main_m>li>a span{display:flex; align-items:center; justify-content:center; margin-left:10px; } .side-menu-wrap .asi_bottom nav ul.main_m>li>a span img{transition: transform .4s;} .side-menu-wrap .asi_bottom nav ul.main_m>li>a.clicked span img{transform: rotate(180deg) } .side-menu-wrap .asi_bottom nav ul.sub_m>li{} .side-menu-wrap .asi_bottom nav ul.sub_m{display: none; padding: 0 0 50px;max-height:0;overflow:hidden;opacity:0;transition:max-height .45s ease,opacity .35s ease;} .side-menu-wrap .asi_bottom nav ul.sub_m.is-open{max-height:2000px;opacity:1;} .side-menu-wrap .asi_bottom nav ul.sub_m.is-open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 30px; } .side-menu-wrap .asi_bottom nav ul.sub_m.is-open li{opacity:0;animation:subbarFadeUp .35s ease-out forwards;} .side-menu-wrap .asi_bottom nav ul.sub_m li .subbar-card {height:100%; display:flex;flex-direction:column; gap: 3px; align-items:strech; } .side-menu-wrap .asi_bottom nav ul.sub_m li .subbar-card .thumb{overflow:hidden; width: 100%; height: clamp(170px, 10vw, 200px); background-position: center; background-repeat: no-repeat; background-origin: content-box; background-clip: content-box; background-size: auto 100%; display:flex; justify-content:center; align-items:center; } .side-menu-wrap .asi_bottom nav ul.sub_m li .subbar-card .thumb img{ margin: auto;cursor: pointer; max-width:50%; width:auto;height:80%;object-fit:contain;object-position:center;display:block; } .side-menu-wrap .asi_bottom nav ul.sub_m li .subbar-card .label{min-height: 58px;font-size:16px;font-weight:600; text-align: center; letter-spacing: -0.2px; line-height:1.2;} .side-menu-wrap .asi_bottom nav ul.sub_m li .subbar-card .actions{display:flex;gap:10px; justify-content:center;} .side-menu-wrap .asi_bottom nav ul.sub_m li .subbar-card .actions a{position:relative;font-size:14px;color:#A0A0A0;} .side-menu-wrap .asi_bottom nav ul.sub_m li .subbar-card .actions a::after{content:"";position:absolute;left:0;bottom:4px;width:100%;height:1px;background-color:currentColor;opacity:.6;} .side-menu-wrap .asi_bottom nav ul.sub_m li .subbar-card .actions a:hover{color:#909090;} .side-menu-wrap .asi_bottom nav ul.sub_m.is-open li:nth-child(1){animation-delay:.00s;} .side-menu-wrap .asi_bottom nav ul.sub_m.is-open li:nth-child(2){animation-delay:.04s;} .side-menu-wrap .asi_bottom nav ul.sub_m.is-open li:nth-child(3){animation-delay:.08s;} .side-menu-wrap .asi_bottom nav ul.sub_m.is-open li:nth-child(4){animation-delay:.12s;} .side-menu-wrap .asi_bottom nav ul.sub_m.is-open li:nth-child(5){animation-delay:.16s;} .side-menu-wrap .asi_bottom nav ul.sub_m.is-open li:nth-child(6){animation-delay:.20s;} .side-menu-wrap .asi_bottom nav ul.sub_m.is-open li:nth-child(7){animation-delay:.24s;} .side-menu-wrap .asi_bottom nav ul.sub_m.is-open li:nth-child(8){animation-delay:.28s;} .side-menu-wrap .asi_bottom nav ul.sub_m.is-open li:nth-child(9){animation-delay:.32s;} .side-menu-wrap .asi_bottom nav ul.sub_m.is-open li:nth-child(10){animation-delay:.36s;} .side-menu-wrap .asi_bottom nav ul.sub_m.is-open li:nth-child(11){animation-delay:.40s;} .side-menu-wrap .asi_bottom nav ul.sub_m.is-open li:nth-child(12){animation-delay:.44s;} .side-menu-wrap .asi_bottom nav ul.sub_m.is-open li:nth-child(13){animation-delay:.48s;} .side-menu-wrap .asi_bottom nav ul.sub_m.is-open li:nth-child(14){animation-delay:.52s;} @keyframes subbarFadeUp{0%{opacity:0;filter:brightness(.6);transform:translateY(8px);}100%{opacity:1;filter:brightness(1);transform:translateY(0);}} :where(.side-menu-wrap .asi_bottom ul.sub_m) :is(li:first-child>a){padding-top: 20px !important;} :where(.side-menu-wrap .asi_bottom ul.sub_m) :is(li:last-child>a){padding-bottom: 25px !important;} .header-logo { flex-shrink: 0; line-height: 0; } .header-logo a { font-size: 2.25rem; font-weight: 800; color: var(--cw-heading-color); line-height: normal; text-decoration: none; } .header-nav { order: 2; display: flex; gap: 32px; flex: 0 0 100%; justify-content: flex-start; margin-top: 16px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; min-width: 0; scrollbar-width: none; scrollbar-color: transparent transparent; -webkit-user-select: none; user-select: none; } .header-nav::-webkit-scrollbar { display: none; } .header-nav:active { cursor: grabbing; } .header-nav a { white-space: nowrap; color: var(--cw-heading-color); text-decoration: none; font-size: 1rem; font-weight: 700; line-height: 24px; -webkit-user-drag: none; user-drag: none; } .header-icons { display: flex; gap: 16px; flex-shrink: 0; font-size: 1.125rem; } .header-icons a { text-decoration: none; position: relative; } .header-icons a .notification { position: absolute; top: 3px; right: -3px; background-color: var(--cw-point-color); color: #fff; border-radius: 100%; padding: 0 5px; line-height: 16px; font-size: .75rem; font-weight: 700; } .header-logo, .header-icons { order: 1; } .header-container--md { display: none; } .side-menu-wrap .menu-header { position: relative; padding: 18px 0; } .side-menu-wrap .side-menu-close { display:none !important; position: absolute; right: 0; top: 0; width: 24px; height: 24px; border: none; outline: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 18L18 6M6 6L18 18' stroke='%23999999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat; } .side-menu-wrap .menu-util { display: flex; align-items: center; justify-content: flex-end; gap: 14px; } .side-menu-wrap .menu-util a { font-size: .875rem; } .side-menu-wrap .menu-util a:not(:first-child)::before { display: inline-block; margin-right: 14px; width: 1px; height: 12px; vertical-align: middle; background: var(--cw-color-30); content: ''; } .side-menu-wrap .menu-header .menu-util-line { width: 100%; height: 1px; background: #eee; margin: 15px 0 0;} .side-menu-wrap .menu-search { position: relative;} .side-menu-wrap .menu-search .search-input { width: 100%; } .side-menu-wrap .menu-search .search-btn { position: absolute; top: 7px; right: 12px; width: 24px; height: 24px; border: none; outline: none; font-size: 0; background: url("//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_search.svg") no-repeat right center / 24px 24px; } .side-menu-wrap .auth-mob { display: flex; width: 100%; flex-direction: column; gap: 10px; padding-bottom: 20px; padding-bottom:100px;} .side-menu-wrap .auth-mob-img { border-radius: 2vw; overflow: hidden; height: 100%; } .side-menu-wrap .auth-mob-img img { width: 100%; height: 100%; object-fit: cover; display: block; object-position: center;} .side-menu-wrap .auth-mob-text { font-size:18px; font-weight: 500; } .side-menu-wrap .auth-mob-text svg {margin-left:5px;} .side-menu-wrap .auth-mob-arrow { margin-bottom: 2px; } .side-overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; background: rgba(0, 0, 0, 0.7); z-index: 80; } .side-overlay.active { opacity: 1; visibility: visible; } /* 태블릿 */ @media (max-width: 1279.9px) { #header .head_inner .head_left { width:100px; min-width: 100px; } #header .head_inner { padding: 0 20px; } #header .head_inner .head_middle nav ul.main_m > li.hide-on-md { display: none !important; } #header .head_inner .head_middle nav ul.main_m { justify-content: center; } #header.click.show .open-menu-wrap { display: flex; flex-direction: column; } #header .tab-view { display: flex; gap:30px; padding: 0 60px; justify-content: start; } .open-menu-wrap .menu-content-inner { width: 100%; gap: 20px; padding: 20px 10px 20px 30px; } #header .head_inner .head_middle .subbar .subbar-track { grid-template-columns: repeat(4, minmax(0, 1fr)); } #header .head_inner .head_middle .subbar .thumb { height: 180px; } #header.click.show .open-menu-wrap { padding: 20px 0 50px 0; } } @media (max-width: 1024px) { #header .head_inner .head_middle .subbar .subbar-track { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* 모바일 */ @media (max-width: 768px) { top-bar { display: none !important; } #topbanner { display: none; } #header { /*display: none;*/ flex-wrap: wrap; /*padding: 16px;*/ } .head_inner {display: none !important;} .header-container--md.scroll {top:45px;} .m-search-area, .side-menu-wrap.active {top: 95px; padding-top: 0;} #header.scroll ~ .header-container--md.scroll {top:0px;} #header.scroll + .side-menu-wrap.active {top:50px;} .side-menu-wrap {z-index: 200;top: 45px;} #header.scroll ~ .header-container--md.scroll + .m-search-area {top:45px;} :is(.header-container--md) :is(img){transform: scale(.6);} :is(.header-container--md) a{display: block;} .header-container--md { position: fixed; top: 45px; left: 0; height:50px; width: 100%; z-index: 200; padding: 0px 24px; display: flex !important; justify-content: space-between; align-items: center; background-color: transparent; transition: background-color .3s ease, box-shadow .3s ease; } .header-container--md .ham{ padding: 10px; } .header-container--md .ham a { width: 25.5px; height: 20px; display: block; position: relative; transition: all .4s; color: #fff; } .header-container--md .ham a span{ position: absolute; left: 0; width: 100%; height: 2px; transform-origin: center center; background-color: currentColor; /* currentColor로 색 상속 */ border-radius: 4px; transition: all .4s; } .header-container--md .ham a span:nth-of-type(1) { top: 0; transform-origin: left center; } .header-container--md .ham a span:nth-of-type(2) { top: 9px; } .header-container--md .ham a span:nth-of-type(3) { bottom: 0; transform-origin: left center; } .header-container--md.scroll .ham { padding: 10px 0px 10px 10px} .header-container--md .ham a.active-1 span:nth-of-type(1) { transform: rotate(45deg); } .header-container--md .ham a.active-1 span:nth-of-type(2) { left: 200%; opacity: 0; -webkit-animation: active-menu-bar06 .8s forwards;animation: active-menu-bar06 .8s forwards; } .header-container--md .ham a.active-1 span:nth-of-type(3) { transform: rotate(-45deg); } /* 스크롤 된 상태에서는 검정색 */ .header-container--md.scroll .ham a{ color: #000; } .header-container--md h1.logo{flex-grow: 1; } .header-container--md h1.logo a{} .header-container--md h1.logo a img{transform-origin: left center; max-width: 160px;} .header-container--md .cart{} .header-container--md .cart a{position: relative; padding-right:5px; } .header-container--md .cart a img{transform-origin: right center;} .header-container--md .cart a span{font-family: 'Helvetica Neue'; font-weight: 400; font-size: 10px; color: #fff; right: 0; top: 4px; width: 13px; height: 13px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #222; position: absolute;} .header-container--md.scroll { background-color: rgba(255, 255, 255, 1); /*box-shadow: 0 2px 10px rgba(0,0,0,0.06);*/ border-bottom: 1px solid #DADCE0; } .floating-btns { bottom: 7%; } } /* 미니 */ @media (max-width: 480px) { .header-container--md .ham a { width: 20px;height: 16px; display: block; position: relative; transition: all .4s; color: #fff; } .header-container--md .ham a span{ position: absolute; left: 0; width: 100%; height: 2px; transform-origin: center center; background-color: currentColor; /* currentColor로 색 상속 */ border-radius: 4px; transition: all .4s; } .header-container--md .ham a span:nth-of-type(1) { top: 0; transform-origin: left center; } .header-container--md .ham a span:nth-of-type(2) { top: 6.5px; } .header-container--md .ham a span:nth-of-type(3) { bottom: 0; transform-origin: left center; } .header-container--md { padding: 5px 4%; } .header-container--md h1.logo{ padding-left: 10px; } .side-overlay { background: rgb(255 255 255 / 100%); } .header-container--md { z-index: 1000; } .side-menu-wrap.active { /*top: 55px;*/ } .side-menu-wrap { width: 100% !important; } .floating-btns { bottom: 7%; } .side-menu-wrap .asi_bottom nav ul.sub_m li .subbar-card .thumb img {max-width: 80%;} } /* 고정 버튼 */ .floating-wrap { position: fixed; bottom: 60px; right: 2%; display: flex; flex-direction: column; z-index: 99; } .floating-btns.toggle-show.show { opacity: 1; visibility: visible; } .floating-btns.always-show { opacity: 1; visibility: visible; } .floating-btns { opacity: 0; visibility: hidden; transition: opacity 0.3s ease; } .floating-btns .floating-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--cw-color-20); background: var(--cw-color-white); } .floating-btns .btn-smart-finder { background: #fff url("//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_smart_finder.svg") no-repeat center center / 16px 16px; } .floating-btns .btn-go-top { background: #fff url("//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_arrow_expand.svg") no-repeat center center / 14px 14px; } /* 다찾다 검색 파인더 - 레이어 */ .side-sfinder-overlay { z-index: 100; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; background: rgba(0, 0, 0, 0.7); } .side-sfinder-overlay.active { opacity: 1; visibility: visible; } .side-sfinder-wrap { z-index: 101; position: fixed; top: 0; right: -100%; width: var(--cw-size-360); max-width:100%; height: 100vh; padding-bottom: var(--cw-size-48); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: right 0.3s ease; background: var(--cw-color-white); } .side-sfinder-wrap.active { display: block; right: 0; } .sfinder-header { z-index: 1; position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: var(--cw-size-17) var(--cw-size-24); border-bottom: 1px solid var(--cw-color-30); background-color: var(--cw-color-white); } .sfinder-header .sfider-title { font-size: var(--cw-size-18); font-weight: 700; line-height: var(--cw-size-26); } .sfinder-header .side-sfinder-close { width: var(--cw-size-24); height: var(--cw-size-24); border: none; outline: none; background: url('//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_x.svg') no-repeat center center; filter: invert(59%) sepia(0%) saturate(413%) hue-rotate(281deg) brightness(115%) contrast(55%); } .side-sfinder-list .option li { border-bottom: 1px solid var(--cw-color-30); } .side-sfinder-list .option li .option-title { position: relative; padding: var(--cw-size-12) var(--cw-size-24); border-bottom: 1px solid var(--cw-color-20); font-size: var(--cw-size-16); font-weight: 700; line-height: var(--cw-size-24); cursor: pointer; } .side-sfinder-list .option li .option-title::after { content: ""; display: block; position: absolute; top: 0; right: 0; transform: translate(calc(var(--cw-size-24) * -1), var(--cw-size-16)); width: var(--cw-size-16); height: var(--cw-size-16); background: url('//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_arrow_cheveron-down.svg') no-repeat center center; } .side-sfinder-list .option li .option-title.on::after { background: url('//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_arrow_cheveron-up.svg') no-repeat center center; } .side-sfinder-list .option li .option-title.on + .finder-subs { display: block; } .side-sfinder-list .option li .finder-subs .class-none { display: flex; flex-wrap: wrap; gap: 4px; } .side-sfinder-list .option li .finder-subs { display: none; padding: var(--cw-size-16) var(--cw-size-24); background-color: var(--cw-color-10); } .side-sfinder-list .option li .finder-subs .form-check-label { display: grid; } .side-sfinder-list .option li .finder-subs :where(.finder-category, .finder-size) { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cw-size-4); } .side-sfinder-list .option li .finder-subs :where(.finder-price) { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--cw-size-4); } .side-sfinder-list .option li .finder-subs :where(.finder-color) { display: flex; flex-wrap: wrap; gap: var(--cw-size-8); } .side-sfinder-list .option li .finder-subs .finder-options:not(.color-picker) { display: flex; align-items: center; justify-content: center; padding: var(--cw-size-8) var(--cw-size-16); border: 1px solid var(--cw-color-30); border-radius: var(--cw-size-24); font-size: var(--cw-size-12); line-height: var(--cw-size-16); word-break: break-all; background-color: var(--cw-color-white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-sfinder-list .option li .finder-subs .finder-options:not(.color-picker).on { border-color: var(--cw-heading-color); font-weight: 700; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25); } .side-sfinder-list .option li .finder-subs .finder-option-color.color-picker { display: inline-flex; width: var(--cw-size-32); height: var(--cw-size-32); border-radius: var(--cw-size-50); text-indent: -9999px; } .side-sfinder-list .option li .finder-subs .finder-option-color.color-picker.on::after { content: ""; display: inline-flex; width: 100%; height: 100%; background: url('//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_check.svg') no-repeat center; background-size: var(--cw-size-20); } .side-sfinder-list .option li .finder-subs .finder-option-color.color-picker:not(.finder-option-color-white).on::after { filter: invert(1) brightness(2); } .side-sfinder-list .option li .finder-subs .finder-option-color.finder-option-color-black { background-color: #000; } .side-sfinder-list .option li .finder-subs .finder-option-color.finder-option-color-white { background-color: #FFF; border: 1px solid var(--cw-color-30); } .side-sfinder-list .option li .finder-subs .finder-option-color.finder-option-color-gray { background-color: #808080; } .side-sfinder-list .option li .finder-subs .finder-option-color.finder-option-color-beige { background-color: #e5d0b2; } .side-sfinder-list .option li .finder-subs .finder-option-color.finder-option-color-brown { background-color: #aa6810; } .side-sfinder-list .option li .finder-subs .finder-option-color.finder-option-color-navy { background-color: #425583; } .side-sfinder-list .option li .finder-subs .finder-option-color.finder-option-color-blue { background-color: #0000ff; } .side-sfinder-list .option li .finder-subs .finder-option-color.finder-option-color-light-blue { background-color: #62acff; } .side-sfinder-list .option li .finder-subs .finder-option-color.finder-option-color-red { background-color: #ff0000; } .side-sfinder-list .option li .finder-subs .finder-option-color.finder-option-color-orange { background-color: #ffa500; } .side-sfinder-list .option li .finder-subs .finder-option-color.finder-option-color-yellow { background-color: #ffff00; } .side-sfinder-list .option li .finder-subs .finder-option-color.finder-option-color-pink { background-color: #ffc0cb; } .side-sfinder-list .option li .finder-subs .finder-option-color.finder-option-color-purple { background-color: #800080; } .side-sfinder-list .option li .finder-subs .finder-option-color.finder-option-color-jaju { background-color: #a63f7f; } .side-sfinder-list .option li .finder-subs .finder-option-color.finder-option-color-khaki { background-color: #2f5e2f; } .side-sfinder-list .option li .finder-subs .finder-option-color.finder-option-color-green { background-color: #008000; } .side-sfinder-list .option li .finder-subs .finder-option-color.finder-option-color-light-green { background-color: #72dd95; } .side-sfinder-list .option li .finder-subs .finder-option-color.finder-option-color-silver { background-color: #dfdfdf; } .side-sfinder-list .option li .finder-subs .finder-option-color.finder-option-color-gold { background-color: #cfbc4e; } .side-sfinder-list .option li .finder-subs .finder-option-color.finder-option-color-apricot { background-color: #fbceb1; } .side-sfinder-list .option li .finder-subs .finder-price .finder-price-input { position: relative; grid-column: 1 / 3; display: flex; align-items: center; column-gap: var(--cw-size-4); padding-top: var(--cw-size-30); } .side-sfinder-list .option li .finder-subs .finder-price .finder-price-input::before { content: "직접입력"; position: absolute; top: var(--cw-size-4); left: 0; display: block; font-size: var(--cw-size-14); font-weight: 700; line-height: var(--cw-size-20); } .side-sfinder-list .option li .finder-subs .finder-price .finder-price-input label { display: flex; align-items: center; height: var(--cw-size-40); padding: 0 var(--cw-size-12); border: 1px solid var(--cw-color-30); border-radius: var(--cw-border-radius); font-size: var(--cw-size-14); background: var(--cw-color-white); } .side-sfinder-list .option li .finder-subs .finder-price .finder-price-input label .cw-textfield { width: 100%; padding: 0; border: 0; text-align: right; } .side-sfinder-list .option li .finder-subs .finder-search * { width: 100%; } .side-sfinder-btns { z-index: 1; position: fixed; bottom: 0; display: grid; grid-template-columns: var(--cw-size-120) var(--cw-size-240); } .side-sfinder-btns :where(.btn) { padding: 0; border-radius: 0; } .side-sfinder-btns .btn-gray { border: 0; border-top: 1px solid var(--cw-color-30); } .side-sfinder-btns .finder-count { color: var(--cw-point-color); } /* BASIC css end */