merge master into develop - CscListRForm.jsp FAQ 아코디언 버그 수정
This commit is contained in:
jilee4unity
640
build/resources/main/static/sopmall/pc/css/theme/themeNC.css
Normal file
640
build/resources/main/static/sopmall/pc/css/theme/themeNC.css
Normal file
@@ -0,0 +1,640 @@
|
||||
@charset "UTF-8";
|
||||
/****** 뉴트리코어 테마 컬러 #78B857 ******/
|
||||
/* svg 아이콘 테마 색상 설정 */
|
||||
.svg-themeColor {
|
||||
fill: #78B857;
|
||||
}
|
||||
|
||||
/* 헤더 검색바 및 돋보기 버튼 색상 설정 */
|
||||
.header-search-bar {
|
||||
border: 2px solid #86c860;
|
||||
}
|
||||
.header-search-bar button svg {
|
||||
fill: #78B857;
|
||||
}
|
||||
|
||||
/* 검색 레이어 팝업 돋보기 버튼 색상 */
|
||||
.header-search-pop__search-btn svg {
|
||||
fill: #78B857;
|
||||
}
|
||||
|
||||
/* 검색 자동완성 일치 텍스트 색상 설정 */
|
||||
.header-search-pop__auto-complete em {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 실시간 검색 숫자 색상 설정 */
|
||||
.search-trend__number {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 실시간 검색 상승, 하강 아이콘
|
||||
( 사이즈 : 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;
|
||||
}
|
||||
|
||||
/* 헤더 장바구니 상품숫자 Badge 색상 설정 및 위치 조정
|
||||
(아이콘 모양이 달라지면 top, right 로 위치조정 필요할 수 있음)
|
||||
*/
|
||||
.number-badge {
|
||||
background-color: #78B857;
|
||||
top: -7px;
|
||||
right: -7px;
|
||||
}
|
||||
|
||||
/* 헤더 1depth 메뉴 호버 시, 밑줄 생김
|
||||
*/
|
||||
.header-nav__list > li:hover::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #78B857;
|
||||
}
|
||||
|
||||
/* 헤더 전체메뉴 펼쳤을때, 2depth 메뉴 호버 시, 색상 바뀜
|
||||
*/
|
||||
.full-menu__depth2 > li:hover {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 헤더 장바구니, 마이페이지 아이콘
|
||||
( 사이즈 : 28x28 또는 그 배수 )
|
||||
( 개수가 늘어나면 css 추가 작성필요 )
|
||||
*/
|
||||
.icon_nav-cart {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-image: url(../../images/icon_nav-cart.png);
|
||||
}
|
||||
|
||||
.icon_nav-mypage {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-image: url(../../images/icon_nav-mypage.png);
|
||||
}
|
||||
|
||||
/* 메인 롤링 배너 인디케이터 색상 설정
|
||||
*/
|
||||
.main-banner .slick-dots li.slick-active button:before {
|
||||
color: #78B857 !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 상단 띠배너 배경색
|
||||
*/
|
||||
.top-banner {
|
||||
background-color: #343A40;
|
||||
}
|
||||
|
||||
/* 카테고리 탭 아이콘
|
||||
( 사이즈 : 64x64 또는 그 배수 )
|
||||
( 개수가 늘어나면 css 추가 작성필요 )
|
||||
*/
|
||||
.icon_category-type-tab01 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab01.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab02 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab02.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab03 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab03.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab04 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab04.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab05 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab05.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab06 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab06.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab07 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab07.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab08 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab08.png);
|
||||
}
|
||||
|
||||
/* 카테고리 탭 현재 활성화된 탭 색상
|
||||
*/
|
||||
.category-type-tab__btn.active .category-type-tab__name {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 상품이미지 좌측 상단 뱃지
|
||||
( 사이즈 : 64x64 또는 그 배수 )
|
||||
*/
|
||||
.icon_product-image-badge01 {
|
||||
background-image: url(../../images/icon_product-image-badge01.png);
|
||||
}
|
||||
|
||||
.icon_product-image-badge02 {
|
||||
background-image: url(../../images/icon_product-image-badge02.png);
|
||||
}
|
||||
|
||||
.icon_product-image-badge03 {
|
||||
background-image: url(../../images/icon_product-image-badge03.png);
|
||||
}
|
||||
|
||||
.icon_product-image-badge01,
|
||||
.icon_product-image-badge02,
|
||||
.icon_product-image-badge03 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* 상품 - 상품 묶음 리스트 타입 */
|
||||
.product-bundle-list button.active {
|
||||
color: #78B857;
|
||||
font-weight: 700;
|
||||
border: 2px solid #78B857;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
/* 평점 별 아이콘
|
||||
( 사이즈 : 15x15 또는 그 배수 )
|
||||
*/
|
||||
.icon_rating-star {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-image: url(../../images/icon_rating-star.png);
|
||||
}
|
||||
|
||||
/* 리뷰 개수 색상 설정
|
||||
*/
|
||||
.product-unit-rating__count {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 상품 이미지 호버시 장바구니 담기 아이콘
|
||||
( 사이즈 : 48x48 또는 그 배수 )
|
||||
*/
|
||||
.icon_product-unit-addToCart {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-image: url(../../images/icon_product-unit-addToCart.png);
|
||||
}
|
||||
|
||||
/* 타임세일 : 배경이미지 있는(O) 경우, 배경이미지 설정
|
||||
( 이미지 사이즈 : 1920x320 )
|
||||
*/
|
||||
.main-section__container.time-sale {
|
||||
background-image: url(../../images/image_time-sale.png);
|
||||
}
|
||||
|
||||
/* 타임세일 : 배경이미지 없는(X) 경우, 배경색 설정
|
||||
*/
|
||||
.main-section__container.time-sale.no-bg {
|
||||
background: linear-gradient(#f8f9fa 0, #f8f9fa 320px, #ffffff 320px, #ffffff 100%);
|
||||
}
|
||||
|
||||
/* 상품 - 그룹별 타입 활성화탭 색상 설정
|
||||
*/
|
||||
.product-tab__btn.active {
|
||||
font-weight: 700;
|
||||
color: #78B857;
|
||||
border-bottom: 2px solid #78B857;
|
||||
}
|
||||
|
||||
/* 상품 - 2x2 타입 : 배경이미지 있는(O) 경우, 배경이미지 설정
|
||||
( 이미지 사이즈 : 1920x320 )
|
||||
*/
|
||||
.main-section__container.TwoXTwo-type {
|
||||
background-image: url(../../images/image_TwoXTwo-type.png);
|
||||
}
|
||||
|
||||
/* 상품 - 2x2 타입 : 배경이미지 없는(X) 경우, 배경색 설정
|
||||
*/
|
||||
.main-section__container.TwoXTwo-type.no-bg {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
/* 기획전 화살표 아이콘
|
||||
( 사이즈 : 22x22 또는 그 배수 )
|
||||
*/
|
||||
.icon_exhibition-arrow {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-image: url(../../images/icon_exhibition-arrow.png);
|
||||
vertical-align: top;
|
||||
margin-top: 2px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
/* 상품 - 이미지 배너 타입 : 배경이미지 있는(O) 경우, 배경이미지 설정
|
||||
둘 중 선택
|
||||
( 이미지 사이즈 : 1920x650 )
|
||||
*/
|
||||
.main-section__container.product-banner {
|
||||
background-image: url(../../images/image_product-image-banner.png);
|
||||
}
|
||||
|
||||
/* 타임세일 : 배경이미지 없는(X) 경우, 배경색 설정
|
||||
*/
|
||||
.main-section__container.product-banner.no-bg {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
/* 인스타그램 로고
|
||||
*/
|
||||
.main-section__sns .main-section-title__title::before {
|
||||
content: "";
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-bottom: 3px;
|
||||
background-image: url(../../images/icon_section-title03.png);
|
||||
display: inline-block;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* 공지사항 영역 아이콘
|
||||
( 사이즈 : 148x148 또는 그 배수 )
|
||||
*/
|
||||
.icon_notice01 {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
background-image: url(../../images/icon_notice01.png);
|
||||
}
|
||||
|
||||
.icon_notice02 {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
background-image: url(../../images/icon_notice02.png);
|
||||
}
|
||||
|
||||
.icon_notice03 {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
background-image: url(../../images/icon_notice03.png);
|
||||
}
|
||||
|
||||
/* 고객센터 번호 색상
|
||||
*/
|
||||
.notice__number {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 공지사항 아이콘
|
||||
( 사이즈 : 20x20 또는 그 배수 )
|
||||
*/
|
||||
.icon_notice-speaker {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url(../../images/icon_notice-speaker.png);
|
||||
}
|
||||
|
||||
/* 퀵메뉴 아이콘
|
||||
( 사이즈 : 40x40 또는 그 배수 )
|
||||
*/
|
||||
.icon_quick-menu01 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url(../../images/icon_quick-menu01.png);
|
||||
}
|
||||
|
||||
.icon_quick-menu02 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url(../../images/icon_quick-menu02.png);
|
||||
}
|
||||
|
||||
.icon_quick-menu03 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url(../../images/icon_quick-menu03.png);
|
||||
}
|
||||
|
||||
.icon_quick-menu04 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url(../../images/icon_quick-menu04.png);
|
||||
}
|
||||
|
||||
/* 퀵메뉴 상품숫자 Badge 색상 설정 및 위치 조정
|
||||
(아이콘 모양이 달라지면 top, right 로 위치조정 필요할 수 있음)
|
||||
*/
|
||||
.quick-menu .number-badge {
|
||||
background-color: #78B857;
|
||||
top: -10px;
|
||||
right: -2px;
|
||||
}
|
||||
|
||||
/* 퀵메뉴 고객센터 이미지
|
||||
( 사이즈 : 136x136 또는 그 배수 )
|
||||
*/
|
||||
.icon_quick-customer-service {
|
||||
width: 136px;
|
||||
height: 136px;
|
||||
background-image: url(../../images/icon_quick-customer-service.png);
|
||||
/* 이미지 그림자 */
|
||||
filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.15));
|
||||
}
|
||||
|
||||
/* 상단으로 이동 아이콘
|
||||
( 사이즈 : 60x60 또는 그 배수 )
|
||||
*/
|
||||
.icon_quick-to-top {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-image: url(../../images/icon_quick-to-top.png);
|
||||
/* 이미지 그림자 */
|
||||
filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.12));
|
||||
}
|
||||
|
||||
/* Primary 버튼 색상 */
|
||||
.btn.theme {
|
||||
background-color: #78B857;
|
||||
color: #ffffff;
|
||||
}
|
||||
.btn.theme:hover, .btn.theme.active {
|
||||
background-color: #6db04a;
|
||||
}
|
||||
.btn.outline.theme {
|
||||
color: #78B857;
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
/* 페이지네이션 현재 페이지 색상 설정 */
|
||||
.pagination__item.active {
|
||||
background-color: #78B857;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 고객센터, 마이페이지 좌측 메뉴 밑줄 색깔, 현재 페이지 활성화 색상 설정 */
|
||||
.sub-left-menu__title::before {
|
||||
background-color: #86c860;
|
||||
}
|
||||
.sub-left-menu__sub-list {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.sub-left-menu__sub-list > li > a.current {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 게시물 건수 색상 설정 */
|
||||
.search-number__text strong {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 탭 버튼 색상 설정 */
|
||||
.sub-tab__btn.current {
|
||||
background-color: #86c860;
|
||||
border-color: transparent;
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
}
|
||||
.sub-tab__trigger.type02 .sub-tab__btn.current {
|
||||
border-top: 2px solid #86c860;
|
||||
}
|
||||
|
||||
.boxTab__tabBtn.current {
|
||||
border-color: #86c860;
|
||||
}
|
||||
.boxTab::after {
|
||||
background-color: #86c860;
|
||||
}
|
||||
|
||||
/* 마이페이지 메인 주문/배송 조회 색상 설정 */
|
||||
.orderProgress__list li.current .orderProgress__num {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 마이페이지 메인 최근 주문 마일리지 색상 설정 */
|
||||
.orderList__mileage {
|
||||
color: #86c860;
|
||||
}
|
||||
.orderList__link {
|
||||
color: #78B857;
|
||||
}
|
||||
.orderList__link::after {
|
||||
border-color: #78B857;
|
||||
}
|
||||
|
||||
/* 마이페이지 배송지 관리 기본 배송지 색상 설정 */
|
||||
.addressManage__itemPerson.current {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 마이페이지 마일리지 내역 색상 설정 */
|
||||
.mileageStatusCurrent__number {
|
||||
color: #78B857;
|
||||
}
|
||||
.mileageStatusCurrent__unit {
|
||||
color: #78B857;
|
||||
}
|
||||
.mileageStatusMisc__item--scheduled .mileageStatusMisc__number {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 상품 서브리스트 현재메뉴 색상 설정 */
|
||||
.subList__list__item.current {
|
||||
color: #78B857;
|
||||
}
|
||||
.subList__sort__item.current {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 장바구니 결제예정금액 색상 설정 */
|
||||
.cartOrderBox__totalTd {
|
||||
color: #78B857;
|
||||
}
|
||||
.cartOrderBox__totalTd > .priceUnit {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 주문 상품 마일리지 색상 설정 */
|
||||
.orderInfo__mileageText em {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 기간 선택 버튼 색상 설정 */
|
||||
.dateRange-btnContainer .dateRange-btn.selected {
|
||||
color: #78B857;
|
||||
border: 1px solid #78B857;
|
||||
}
|
||||
|
||||
/* 주문 결과 상단 타이틀 색상 설정 */
|
||||
.orderCompletedTop__title {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 주문 실패 타이틀, 설명 포인트 색상 설정 */
|
||||
.orderFailed__title em,
|
||||
.orderFailed__text em {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 상품 썸네일 테두리 색상 설정 */
|
||||
.productDetailGallery__item.active::before {
|
||||
border: 2px solid #78B857;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 회원혜택 회사명 색상 설정 */
|
||||
.productDetailInfo__memberBenefits__title em {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 건수 색상 설정 */
|
||||
.productReview__subTitle__num {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 리뷰 분류 색상 설정 */
|
||||
.userReview__sort li button.current {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 리뷰 "도움이 돼요" 색상 설정 */
|
||||
.userReviewItem__like svg,
|
||||
.userReviewItem__like path {
|
||||
fill: #78B857;
|
||||
}
|
||||
.userReviewItem__like em {
|
||||
color: #78B857;
|
||||
}
|
||||
.userReviewItem__like.selected {
|
||||
background-color: #78B857;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 쿠폰 다운로드 색상 설정 */
|
||||
.productCoupon__right {
|
||||
background-color: #78B857;
|
||||
}
|
||||
.productCoupon__text {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
.productDetailInfo__priceTotal__price {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 평점 비율 색상 설정 */
|
||||
.productReview__ratingStats__topRating .productReview__ratingStats__fill {
|
||||
background-color: #86c860;
|
||||
}
|
||||
|
||||
.productReview__ratingStats__num {
|
||||
background-color: #86c860;
|
||||
}
|
||||
.productReview__ratingStats__num::before {
|
||||
border-right-color: #86c860;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 총 리뷰수, 평점 색상 설정 */
|
||||
.productDetailcontent__totalNum dl dd {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 매장안내 탭 색상 설정 */
|
||||
.storeList__tabBtn.current {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 매장지역 타이틀 색상 설정 */
|
||||
.storeList__subList__title {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 매장상세 타이틀 왼쪽 띠 색상 설정 */
|
||||
.storeDetail__storeName::before {
|
||||
background-color: #78B857;
|
||||
}
|
||||
|
||||
/* 브랜드소개 오시는 길 왼쪽띠 색상 설정 */
|
||||
.brandIntroMap__storeName::before {
|
||||
background-color: #78B857;
|
||||
}
|
||||
|
||||
/* 기획전 댓글 등록/수정 버튼 색상 설정 */
|
||||
.comment-write__button {
|
||||
background-color: #78B857;
|
||||
}
|
||||
|
||||
.comment-edit__button--edit {
|
||||
background-color: #78B857;
|
||||
}
|
||||
|
||||
/* 이벤트 버튼 색상 설정 */
|
||||
.eventDetail__answer__btn {
|
||||
background-color: #78B857;
|
||||
}
|
||||
|
||||
/* 검색 결과 키워드 색상 설정 */
|
||||
.page-title__title--searchResult em {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 검색 결과 인기 검색어 숫자 색상 설정 */
|
||||
.resultTrend__num {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 게시물 추천, 비추천 색상 설정 */
|
||||
.postLikeBtn svg,
|
||||
.postLikeBtn path {
|
||||
fill: #78B857;
|
||||
}
|
||||
|
||||
.postLikeBtn em {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
.postLikeBtn.clicked {
|
||||
background-color: #78B857;
|
||||
}/*# sourceMappingURL=theme.css.map */
|
||||
Reference in New Issue
Block a user