516 lines
11 KiB
CSS
516 lines
11 KiB
CSS
@charset "UTF-8";
|
|
/****** 라이프케어 테마 컬러 #333333 ******/
|
|
/* svg 아이콘 테마 색상 설정 */
|
|
.svg-themeColor {
|
|
fill: #333333;
|
|
}
|
|
|
|
/* 헤더 로고 사이즈 설정
|
|
*/
|
|
.header__home-link {
|
|
width: 180px;
|
|
}
|
|
|
|
/* 헤더 카테고리 탭 색상
|
|
*/
|
|
.home-category__item.active a {
|
|
color: #57319F;
|
|
}
|
|
|
|
.home-category__item.active::after {
|
|
background-color: #57319F;
|
|
}
|
|
|
|
/* 헤더 장바구니, 마이페이지 아이콘
|
|
( 사이즈 : 24x24 또는 그 배수 )
|
|
( 개수가 늘어나면 css 추가 작성필요 )
|
|
*/
|
|
.icon_nav-search {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url(../../images/icon_nav-search.png);
|
|
}
|
|
|
|
.icon_nav-cart {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url(../../images/icon_nav-cart.png);
|
|
}
|
|
|
|
.icon_nav-menu {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url(../../images/icon_nav-menu.png);
|
|
}
|
|
|
|
/* 햄버거 메뉴 링크 색상 설정 */
|
|
.menu_navigation_wrap .side_menu > li > div.on .depth {
|
|
color: #333333;
|
|
}
|
|
.menu_navigation_wrap .side_menu > li > ul li > div.on a.hasSub {
|
|
color: #333333;
|
|
}
|
|
|
|
/* 실시간 검색 숫자 색상 설정 */
|
|
.search-trend__number {
|
|
color: #333333;
|
|
}
|
|
|
|
/* 실시간 검색 상승, 하강 아이콘
|
|
( 사이즈 : 18x18 또는 그 배수 )
|
|
*/
|
|
.icon_search-up {
|
|
width: 18px;
|
|
height: 18px;
|
|
background-image: url(../../images/icon_search-up.png);
|
|
}
|
|
|
|
.icon_search-down {
|
|
width: 18px;
|
|
height: 18px;
|
|
background-image: url(../../images/icon_search-down.png);
|
|
}
|
|
|
|
/* 실시간 검색 동일 순위 표시('-')
|
|
*/
|
|
.icon_search-default {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.icon_search-default::after {
|
|
display: inline-block;
|
|
content: "";
|
|
width: 8px;
|
|
height: 2px;
|
|
background-color: #979b9d;
|
|
}
|
|
|
|
/* 하단 탭바 아이콘
|
|
( 사이즈 : 24x24 또는 그 배수 )
|
|
*/
|
|
.icon_tab-bar-category {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url(../../images/icon_tab-bar-category.png);
|
|
}
|
|
|
|
.icon_tab-bar-wishlist {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url(../../images/icon_tab-bar-wishlist.png);
|
|
}
|
|
|
|
.icon_tab-bar-cart {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url(../../images/icon_tab-bar-cart.png);
|
|
}
|
|
|
|
.icon_tab-bar-mypage {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url(../../images/icon_tab-bar-mypage.png);
|
|
}
|
|
|
|
/* 하단 탭바 홈 아이콘
|
|
( 사이즈 : 32x32 또는 그 배수 )
|
|
*/
|
|
.icon_tab-bar-home {
|
|
width: 32px;
|
|
height: 32px;
|
|
background-image: url(../../images/icon_tab-bar-home.png);
|
|
}
|
|
|
|
/* 하단 탭바 홈 배경색 설정
|
|
*/
|
|
.tab-bar__home {
|
|
background-color: #57319F;
|
|
}
|
|
|
|
/* 헤더 장바구니 상품숫자 Badge 색상 설정 및 위치 조정
|
|
(아이콘 모양이 달라지면 top, right 로 위치조정 필요할 수 있음)
|
|
*/
|
|
.number-badge {
|
|
background-color: #57319F;
|
|
top: 4px;
|
|
right: 2px;
|
|
}
|
|
|
|
/* 상단으로 이동 아이콘
|
|
( 사이즈 : 48x48 또는 그 배수 )
|
|
*/
|
|
.icon_quick-to-top {
|
|
width: 44px;
|
|
height: 44px;
|
|
background-image: url(../../images/icon_quick-to-top.png);
|
|
filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1));
|
|
}
|
|
|
|
/* 평점 별 아이콘
|
|
( 사이즈 : 15x15 또는 그 배수 )
|
|
*/
|
|
.icon_rating-star {
|
|
width: 15px;
|
|
height: 15px;
|
|
background-image: url(../../images/icon_rating-star.png);
|
|
}
|
|
|
|
/* 리뷰 개수 색상 변경
|
|
*/
|
|
.product-unit-rating__count {
|
|
color: #333333;
|
|
}
|
|
|
|
/* 상품 이미지 호버시 장바구니 담기 아이콘
|
|
( 사이즈 : 44x44 또는 그 배수 )
|
|
*/
|
|
.icon_product-unit-addToCart {
|
|
width: 36px;
|
|
height: 36px;
|
|
background-image: url(../../images/icon_product-unit-addToCart.png);
|
|
}
|
|
|
|
/* Swiper 테마 컬러(인디케이터 색상) 변경
|
|
*/
|
|
:root {
|
|
--swiper-theme-color: #333333 !important;
|
|
}
|
|
|
|
/* 상단 띠배너 배경색
|
|
*/
|
|
.top-banner {
|
|
background-color: #343A40;
|
|
}
|
|
|
|
/* 카테고리 탭 아이콘
|
|
( 사이즈 : 58x58 또는 그 배수 )
|
|
( 개수가 늘어나면 css 추가 작성필요 )
|
|
*/
|
|
.icon_category-type-tab01 {
|
|
width: 58px;
|
|
height: 58px;
|
|
background-image: url(../../images/icon_category-type-tab01.png);
|
|
}
|
|
|
|
.icon_category-type-tab02 {
|
|
width: 58px;
|
|
height: 58px;
|
|
background-image: url(../../images/icon_category-type-tab02.png);
|
|
}
|
|
|
|
.icon_category-type-tab03 {
|
|
width: 58px;
|
|
height: 58px;
|
|
background-image: url(../../images/icon_category-type-tab03.png);
|
|
}
|
|
|
|
.icon_category-type-tab04 {
|
|
width: 58px;
|
|
height: 58px;
|
|
background-image: url(../../images/icon_category-type-tab04.png);
|
|
}
|
|
|
|
.icon_category-type-tab05 {
|
|
width: 58px;
|
|
height: 58px;
|
|
background-image: url(../../images/icon_category-type-tab05.png);
|
|
}
|
|
|
|
.icon_category-type-tab06 {
|
|
width: 58px;
|
|
height: 58px;
|
|
background-image: url(../../images/icon_category-type-tab06.png);
|
|
}
|
|
|
|
.icon_category-type-tab07 {
|
|
width: 58px;
|
|
height: 58px;
|
|
background-image: url(../../images/icon_category-type-tab07.png);
|
|
}
|
|
|
|
/* 카테고리 탭 현재 활성화된 탭 색상
|
|
*/
|
|
.category-type-tab__btn.active .category-type-tab__name {
|
|
color: #333333;
|
|
}
|
|
|
|
.icon_category-type-tab08 {
|
|
width: 58px;
|
|
height: 58px;
|
|
background-image: url(../../images/icon_category-type-tab08.png);
|
|
}
|
|
|
|
/* 타임세일 : 배경이미지 있는(O) 경우, 배경이미지 설정
|
|
( 이미지 사이즈 : 720x400 )
|
|
*/
|
|
.main-section__time-sale {
|
|
background-image: url(../../images/image_time-sale.png);
|
|
}
|
|
|
|
/* 타임세일 : 배경이미지 없는(X) 경우, 배경색 설정
|
|
*/
|
|
.main-section__time-sale.no-bg {
|
|
background: #ffffff;
|
|
}
|
|
|
|
/* 상품 - 그룹별 타입 활성화탭 색상
|
|
*/
|
|
.product-tab__btn.active {
|
|
font-weight: 500;
|
|
color: #333333;
|
|
box-shadow: inset 0 -3px 0 0 #333333;
|
|
}
|
|
|
|
/* 이미지 배너타입 화살표 아이콘
|
|
( 사이즈 : 18x18 또는 그 배수 )
|
|
*/
|
|
.icon_product-banner-arrow {
|
|
width: 18px;
|
|
height: 18px;
|
|
background-image: url(../../images/icon_exhibition-arrow.png);
|
|
vertical-align: top;
|
|
margin-left: 1px;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
/* 인스타그램 로고
|
|
( 사이즈 : 20x20 또는 그 배수 )
|
|
*/
|
|
.main-section__sns .main-section-title__title::before {
|
|
content: "";
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-bottom: 3px;
|
|
margin-right: 2px;
|
|
background-image: url(../../images/icon_section-sns.png);
|
|
display: inline-block;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
/* 공지사항 아이콘
|
|
( 사이즈 : 15x15 또는 그 배수 )
|
|
*/
|
|
.icon_notice-speaker {
|
|
width: 15px;
|
|
height: 15px;
|
|
background-image: url(../../images/icon_notice-speaker.png);
|
|
}
|
|
|
|
/* 메인 문의하기 버튼 색상
|
|
*/
|
|
.mainNotice__customerLink__link.primary {
|
|
background-color: #333333;
|
|
}
|
|
|
|
/* 메인 고객센터 아이콘
|
|
( 사이즈 : 72x72 또는 그 배수 )
|
|
*/
|
|
.icon_notice03 {
|
|
width: 72px;
|
|
height: 72px;
|
|
background-image: url(../../images/icon_notice-customer.png);
|
|
}
|
|
|
|
/* 메인 고객센터 번호 색상
|
|
*/
|
|
.notice__number {
|
|
color: #57319F;
|
|
}
|
|
|
|
/* 서브 페이지 헤더 탭 색상
|
|
*/
|
|
.headerTab__item.active::after {
|
|
background-color: #57319F;
|
|
}
|
|
|
|
.headerTab__item.active a {
|
|
color: #57319F;
|
|
}
|
|
|
|
/* Primary 버튼 색상 */
|
|
.btn.theme {
|
|
background-color: #333333;
|
|
color: #ffffff;
|
|
}
|
|
.btn.theme:active {
|
|
background-color: #AE6A9B;
|
|
}
|
|
.btn.outline.theme {
|
|
color: #333333;
|
|
border-color: currentColor;
|
|
}
|
|
|
|
/* 탭 버튼 색상 설정 */
|
|
.sub-tab__btn.current {
|
|
background-color: #57319F;
|
|
border-color: transparent;
|
|
color: #ffffff;
|
|
font-weight: 700;
|
|
}
|
|
.sub-tab__trigger.type02 .sub-tab__btn.current {
|
|
border-top: 2px solid #57319F;
|
|
}
|
|
|
|
/* 기간 선택 버튼 색상 설정 */
|
|
.dateRange-btnContainer .dateRange-btn.selected {
|
|
color: #333333;
|
|
border: 1px solid #333333;
|
|
}
|
|
|
|
/* 마이페이지 메인 주문/배송 조회 색상 설정 */
|
|
.orderProgress__list li.current .orderProgress__num {
|
|
color: #333333;
|
|
}
|
|
|
|
/* 마이페이지 배송지 관리 기본 배송지 색상 설정 */
|
|
.addressManage__itemPerson.current {
|
|
color: #333333;
|
|
}
|
|
|
|
/* 마이페이지 회원등급 제목 색상 설정 */
|
|
.myMemberRankInfo__title em {
|
|
color: #333333;
|
|
}
|
|
|
|
/* 마이페이지 마일리지 내역 색상 설정 */
|
|
.mileageStatusCurrent__number {
|
|
color: #333333;
|
|
}
|
|
.mileageStatusCurrent__unit {
|
|
color: #333333;
|
|
}
|
|
.mileageStatusMisc__item--scheduled .mileageStatusMisc__number {
|
|
color: #333333;
|
|
}
|
|
|
|
/* 결제예정금액 색상 설정 */
|
|
.cartOrderBox__total--final .cartOrderBox__totalTh,
|
|
.cartOrderBox__total--final .cartOrderBox__totalTd {
|
|
color: #333333;
|
|
}
|
|
|
|
.orderDetail__table > .table .orderDetail__table__sum th,
|
|
.orderDetail__table > .table .orderDetail__table__sum td {
|
|
color: #333333;
|
|
}
|
|
|
|
/* 주문 상품 마일리지 색상 설정 */
|
|
.orderInfo__mileageText em {
|
|
color: #333333;
|
|
}
|
|
|
|
/* 주문 결과 상단 타이틀 색상 설정 */
|
|
.orderCompletedTop__title {
|
|
color: #333333;
|
|
}
|
|
|
|
/* 주문 실패 타이틀, 설명 포인트 색상 설정 */
|
|
.orderFailed__title em,
|
|
.orderFailed__text em {
|
|
color: #333333;
|
|
}
|
|
|
|
/* 검색 결과 인기 검색어 숫자 색상 설정 */
|
|
.resultTrend__num {
|
|
color: #333333;
|
|
}
|
|
|
|
/* 상품 상세페이지 쿠폰 다운로드 색상 설정 */
|
|
.productCoupon__right {
|
|
background-color: #333333;
|
|
}
|
|
.productCoupon__text {
|
|
color: #333333;
|
|
}
|
|
|
|
/* 상품 상세페이지 회원혜택 회사명 색상 설정 */
|
|
.productDetailInfo__memberBenefits__title em {
|
|
color: #333333;
|
|
}
|
|
|
|
/* 상품 상세페이지 상세탭 밑줄 색상 설정 */
|
|
.productDetailTab__item.active::after {
|
|
background-color: #333333;
|
|
}
|
|
|
|
/* 상품 상세페이지 평점 비율 색상 설정 */
|
|
.productReview__ratingStats__topRating .productReview__ratingStats__fill {
|
|
background-color: #57319F;
|
|
}
|
|
|
|
.productReview__ratingStats__num {
|
|
background-color: #57319F;
|
|
}
|
|
.productReview__ratingStats__num::before {
|
|
border-right-color: #57319F;
|
|
}
|
|
|
|
/* 상품 상세페이지 건수 색상 설정 */
|
|
.productReview__subTitle__num {
|
|
color: #333333;
|
|
}
|
|
|
|
/* 상품 상세페이지 리뷰 "도움이 돼요" 색상 설정 */
|
|
.userReviewItem__like svg,
|
|
.userReviewItem__like path {
|
|
fill: #333333;
|
|
}
|
|
.userReviewItem__like em {
|
|
color: #333333;
|
|
}
|
|
.userReviewItem__like.selected {
|
|
background-color: #333333;
|
|
}
|
|
|
|
/* 매장안내 탭 색상 설정 */
|
|
.storeList__tabBtn.current {
|
|
color: #333333;
|
|
}
|
|
|
|
/* 매장지역 타이틀 색상 설정 */
|
|
.storeList__subList__title {
|
|
color: #333333;
|
|
}
|
|
|
|
/* 매장상세 타이틀 왼쪽 띠 색상 설정 */
|
|
.storeDetail__storeName::before {
|
|
background-color: #333333;
|
|
}
|
|
|
|
/* 매장상세 타이틀 밑줄 색상 설정 */
|
|
.storeDetail__storeName {
|
|
border-color: #333333;
|
|
}
|
|
|
|
/* 이벤트 버튼 색상 설정 */
|
|
.eventDetail__answer__btn {
|
|
background-color: #333333;
|
|
}
|
|
|
|
/* 브랜드소개 오시는 길 왼쪽띠 색상 설정 */
|
|
.brandIntroMap__storeName {
|
|
border-color: #333333;
|
|
}
|
|
|
|
/* 상품 서브리스트 헤더 메뉴 색상 설정 */
|
|
.header__category__list li.active a {
|
|
color: #333333;
|
|
}
|
|
|
|
/* 게시물 추천, 비추천 색상 설정 */
|
|
.postLikeBtn svg,
|
|
.postLikeBtn path {
|
|
fill: #333333;
|
|
}
|
|
|
|
.postLikeBtn em {
|
|
color: #333333;
|
|
}
|
|
|
|
.postLikeBtn.clicked {
|
|
background-color: #333333;
|
|
}/*# sourceMappingURL=theme.css.map */ |