merge master into develop - CscListRForm.jsp FAQ 아코디언 버그 수정
This commit is contained in:
jilee4unity
4444
build/resources/main/static/sopmall/mobile/css/bnft/bnft.css
Normal file
4444
build/resources/main/static/sopmall/mobile/css/bnft/bnft.css
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,18 @@
|
||||
@charset "UTF-8";
|
||||
.item {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
.animate {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
|
||||
.item_li li {
|
||||
opacity: 0; /* Initially hide the list items */
|
||||
transform: translateY(20px); /* Optional: adds a slight upward motion */
|
||||
transition: opacity 0.5s, transform 0.5s;
|
||||
}
|
||||
|
||||
350
build/resources/main/static/sopmall/mobile/css/bnft/theme.css
Normal file
350
build/resources/main/static/sopmall/mobile/css/bnft/theme.css
Normal file
@@ -0,0 +1,350 @@
|
||||
@charset "UTF-8";
|
||||
/****** 뉴트리코어 테마 컬러 #78B857 ******/
|
||||
/* svg 아이콘 테마 색상 설정 */
|
||||
.svg-themeColor {
|
||||
fill: #78B857;
|
||||
}
|
||||
|
||||
/* 헤더 로고 사이즈 설정
|
||||
*/
|
||||
.header__home-link {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
/* 헤더 카테고리 탭 색상
|
||||
*/
|
||||
.home-category__item.active a {
|
||||
color: #86c860;
|
||||
}
|
||||
|
||||
.home-category__item.active::after {
|
||||
background-color: #86c860;
|
||||
}
|
||||
|
||||
/* 헤더 장바구니, 마이페이지 아이콘
|
||||
( 사이즈 : 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);
|
||||
}
|
||||
|
||||
|
||||
/* 하단 탭바 아이콘
|
||||
( 사이즈 : 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: #86c860;
|
||||
}
|
||||
|
||||
/* 상단으로 이동 아이콘
|
||||
( 사이즈 : 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: #78B857;
|
||||
}
|
||||
|
||||
/* 상품 이미지 호버시 장바구니 담기 아이콘
|
||||
( 사이즈 : 44x44 또는 그 배수 )
|
||||
*/
|
||||
.icon_product-unit-addToCart {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-image: url(../images/icon_product-unit-addToCart.png);
|
||||
}
|
||||
|
||||
/* Swiper 테마 컬러(인디케이터 색상) 변경
|
||||
*/
|
||||
:root {
|
||||
--swiper-theme-color: #78B857 !important;
|
||||
}
|
||||
|
||||
/* 카테고리 탭 아이콘
|
||||
( 사이즈 : 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: #78B857;
|
||||
}
|
||||
|
||||
.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: #78B857;
|
||||
box-shadow: inset 0 -3px 0 0 #78B857;
|
||||
}
|
||||
|
||||
/* 이미지 배너타입 화살표 아이콘
|
||||
( 사이즈 : 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: #78B857;
|
||||
}
|
||||
|
||||
/* 메인 고객센터 아이콘
|
||||
( 사이즈 : 72x72 또는 그 배수 )
|
||||
*/
|
||||
.icon_notice03 {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
background-image: url(../images/icon_notice-customer.png);
|
||||
}
|
||||
|
||||
/* 메인 고객센터 번호 색상
|
||||
*/
|
||||
.notice__number {
|
||||
color: #86c860;
|
||||
}
|
||||
|
||||
/* 서브 페이지 헤더 탭 색상
|
||||
*/
|
||||
.headerTab__item.active::after {
|
||||
background-color: #86c860;
|
||||
}
|
||||
|
||||
.headerTab__item.active a {
|
||||
color: #86c860;
|
||||
}
|
||||
|
||||
/* Primary 버튼 색상 */
|
||||
.btn.theme {
|
||||
background-color: #78B857;
|
||||
color: #ffffff;
|
||||
}
|
||||
.btn.theme:active {
|
||||
background-color: #6db04a;
|
||||
}
|
||||
.btn.outline.theme {
|
||||
color: #78B857;
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
/* 탭 버튼 색상 설정 */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 기간 선택 버튼 색상 설정 */
|
||||
.dateRange-btnContainer .dateRange-btn.selected {
|
||||
color: #78B857;
|
||||
border: 1px solid #78B857;
|
||||
}
|
||||
|
||||
/* 마이페이지 메인 주문/배송 조회 색상 설정 */
|
||||
.orderProgress__list li.current .orderProgress__num {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 마이페이지 배송지 관리 기본 배송지 색상 설정 */
|
||||
.addressManage__itemPerson.current {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 마이페이지 회원등급 제목 색상 설정 */
|
||||
.myMemberRankInfo__title em {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 마이페이지 마일리지 내역 색상 설정 */
|
||||
.mileageStatusCurrent__number {
|
||||
color: #78B857;
|
||||
}
|
||||
.mileageStatusCurrent__unit {
|
||||
color: #78B857;
|
||||
}
|
||||
.mileageStatusMisc__item--scheduled .mileageStatusMisc__number {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 결제예정금액 색상 설정 */
|
||||
.cartOrderBox__total--final .cartOrderBox__totalTh,
|
||||
.cartOrderBox__total--final .cartOrderBox__totalTd {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
.orderDetail__table > .table .orderDetail__table__sum th,
|
||||
.orderDetail__table > .table .orderDetail__table__sum td {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 주문 상품 마일리지 색상 설정 */
|
||||
.orderInfo__mileageText em {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 주문 결과 상단 타이틀 색상 설정 */
|
||||
.orderCompletedTop__title {
|
||||
color: #78B857;
|
||||
}/*# sourceMappingURL=theme.css.map */
|
||||
14645
build/resources/main/static/sopmall/mobile/css/default.css
Normal file
14645
build/resources/main/static/sopmall/mobile/css/default.css
Normal file
File diff suppressed because it is too large
Load Diff
300
build/resources/main/static/sopmall/mobile/css/gcpay.css
Normal file
300
build/resources/main/static/sopmall/mobile/css/gcpay.css
Normal file
@@ -0,0 +1,300 @@
|
||||
@charset "utf-8";
|
||||
.hide-text {font-size:0; line-height:0; text-shadow:none; color:transparent;}
|
||||
.mypage_wrap.ty02 .sub_division_contents .cart_contents {padding:0 !important;}
|
||||
|
||||
.order_gcPay {display: block; letter-spacing: -0.7px;}
|
||||
.order_gcPay img {-webkit-user-drag: none;}
|
||||
.order_gcPay a:hover {text-decoration: none;}
|
||||
.order_gcPay .po {color:#3053bc; }
|
||||
.order_gcPay .ez-radio {margin: 0 10px 0 0;}
|
||||
.order_gcPay .ez-checkbox {margin: 0 6px 0 0;}
|
||||
.order_gcPay .ez-radio-on{background: transparent url('../images/payment/bg_radio_gcone_on.png') 0 0px no-repeat; background-size: 15px;}
|
||||
.order_gcPay .ez-checkbox-on{background: transparent url('../images/payment/bg_checkbox_gcone_on.png') 0 0px no-repeat; background-size: 15px;}
|
||||
.payment-hide .ez-radio, .payment-hide ez-radio-on { display: none !important; background-image: url('') !important; }
|
||||
|
||||
/*220609 폰트크기 수정*/
|
||||
.order_gcPay h4 {margin:0 !important; font-size:13px;}
|
||||
|
||||
.order_gcPay .titWrap {display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
|
||||
|
||||
.order_gcPay .btnWrap li {position: relative; display: inline-block; border: 1px solid #d6d6d6; margin:0; padding: 0 10px !important; font-size: 11px; height:30px; line-height: 30px; cursor: pointer; text-transform: uppercase; font-weight: 600; color:#999;}
|
||||
.order_gcPay .btnWrap li:first-child{margin: 0!important;}
|
||||
.order_gcPay .btnWrap .ico_info:before,
|
||||
.order_gcPay .btnWrap .ico_set:before{content: ""; display: inline-block; width:16px; height:16px; margin-right:5px; margin-top:-3px; vertical-align: middle;}
|
||||
.order_gcPay .btnWrap .ico_info:before {background: url("../images/payment/ico_info.png") no-repeat; background-size: 100%;}
|
||||
.order_gcPay .btnWrap .ico_set:before {background: url("../images/payment/ico_setting.png") no-repeat; background-size: 100%;}
|
||||
.order_gcPay .gcpay_listWrap > li {display:block; padding:15px 0; border-bottom:1px solid #eeeeee; margin: 0;}
|
||||
.order_gcPay .gcpay_listWrap > li:last-child { border-bottom:0;}
|
||||
.order_gcPay .gcpay_listWrap > li.bank .ez-radio{margin-top:-20px;}/*체크박스 위로 강제이동*/
|
||||
.order_gcPay .gcpay_listWrap > li.common {padding-bottom: 0;}
|
||||
|
||||
/*이벤트문구영역 220519 추가*/
|
||||
.order_gcPay .eventWrap {padding: 15px 15px; background:#f5f9ff; margin:20px 0 10px 0; border-radius: 15px; text-align: center;}
|
||||
.order_gcPay .eventWrap:after {display:block; content:""; clear: both;}
|
||||
.order_gcPay .eventWrap dt{font-size: 14px; float: none; width: auto; font-weight: 600; color: #3053bc; display:block;}
|
||||
.order_gcPay .eventWrap dt:before {content: ""; display: block; width:30px; height:30px; background: url('../images/payment/ico_event_tit.png')no-repeat; background-size: cover; margin: 0 auto; margin-bottom: 10px;}
|
||||
.order_gcPay .eventWrap dt .sm_txt {font-weight: 500; font-size: 12px;}
|
||||
.order_gcPay .eventWrap dd {display: block; width: 100%; color: #3053bc;}
|
||||
.order_gcPay .eventWrap dd li{font-size:12px; color: #333; padding-bottom: 5px;}
|
||||
.order_gcPay .eventWrap dd li:last-child{padding-bottom: 0;}
|
||||
|
||||
/*이벤트문구영역 하단문구 220609 추가*/
|
||||
.order_gcPay .pointW {font-size: 13px; padding: 5px 0; text-align: center; word-break: keep-all;}
|
||||
.order_gcPay .pointW strong{color: #000;}
|
||||
|
||||
.order_gcPay .slick-current .selectWrap {display: block; margin-top:10px;}
|
||||
.order_gcPay .slick-initialized .slick-slide {opacity: 0.7; filter: blur(1px);}
|
||||
.order_gcPay .slick-initialized .slick-current{opacity: 1; filter: blur(0px);}
|
||||
|
||||
.order_gcPay .listW {display: flex; align-items: center; position: relative;}
|
||||
.order_gcPay .listW.chk_on ~ .conW {height: auto; visibility: visible; overflow: visible; padding: 20px 0 0 0;}
|
||||
.order_gcPay .listW .payment-label {color: #666; display: inline-block; flex: 1 0; font-size: 15px; font-weight: 600;}
|
||||
.order_gcPay .listW .payment-label .logo {display:inline-block; background: url('../images/payment/logo_gcpay.png') no-repeat; width:70px; height:19px; background-size: 100%; vertical-align: top;}
|
||||
.order_gcPay .listW .payment-label span {display: inline-block; vertical-align: middle;}
|
||||
.order_gcPay .stxt{font-size:12px; color:#aaa; margin-top:3px; display: block; vertical-align: middle;}
|
||||
|
||||
|
||||
/*슬라이드 영역*/
|
||||
.order_gcPay .slideW {margin-bottom:0!important;}
|
||||
.order_gcPay .slideW .slick-prev,
|
||||
.order_gcPay .slideW .slick-next{z-index:1; width:20px; height: 20px; border: 0; top:75px; transform: rotate(315deg); }
|
||||
.order_gcPay .slideW .slick-prev {border-top: 2px solid #b1b1b1; border-left: 2px solid #b1b1b1;left: 0;}
|
||||
.order_gcPay .slideW .slick-next {border-bottom: 2px solid #b1b1b1; border-right: 2px solid #b1b1b1; right: 0;}
|
||||
.order_gcPay .slideW .slick-prev:before, .order_gcPay .slideW .slick-next:before {content: ""; display: none;}
|
||||
.order_gcPay .slideW .slick-prev:hover, .order_gcPay .slideW .slick-next:hover{border-color: #909090;}
|
||||
|
||||
.order_gcPay .slideW .slick-disabled {opacity: 0;}
|
||||
.order_gcPay .slideW .slick-slide:not(:last-child) {margin-right: 10px;}
|
||||
.order_gcPay .conW {height: 0; visibility: hidden; overflow: hidden;}
|
||||
|
||||
.order_gcPay .boxW {position: relative; width: 250px; height: 155px; border-radius: 10px; margin: 0 auto; cursor: pointer; box-sizing:border-box; overflow: hidden;}
|
||||
.order_gcPay .boxW .card_logo {position: absolute; top: 15px; left: 15px; width:100px; height:24px; background-size: 100%;}
|
||||
.order_gcPay .boxW .detaW {color: #fff; font-size: 15px; position: absolute; left: 15px; bottom: 15px;}
|
||||
.order_gcPay .ca_code_000 .detaW {color: #000;}
|
||||
.order_gcPay .boxW .detaW .txt{padding-bottom:5px; display: block; line-height: 1; color: #fff; text-align: left;}
|
||||
.order_gcPay .boxW .detaW .number {letter-spacing: 0; opacity: .6;}
|
||||
|
||||
/*카카오뱅크 시*/
|
||||
.order_gcPay .boxW.ba_code_021 .detaW {color: #000;}
|
||||
|
||||
/*카드&계좌 불가시*/
|
||||
.order_gcPay .boxW.none {position: relative}
|
||||
.order_gcPay .boxW.none:before {content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background: #000; opacity: 0.7; z-index: 1;}
|
||||
.order_gcPay .boxW.none .noneTxt{display: flex; align-items: center; justify-content: center; font-size: 14px; text-align: center; color: #fff; height: 100%; width: 100%; position: relative; z-index: 2;}
|
||||
|
||||
|
||||
@media (max-width: 359px){
|
||||
.order_gcPay .boxW {width: 230px; height: 142px;}
|
||||
/*220609 레이아웃 수정*/
|
||||
.order_gcPay h4 {margin-bottom: 8px !important;}
|
||||
.order_gcPay .titWrap {flex-direction: column;}
|
||||
}
|
||||
|
||||
.order_gcPay .ca_point {border: 2px solid #3053bc; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: .25s;}
|
||||
.order_gcPay .ca_point .contW {padding:15px;}
|
||||
.order_gcPay .ca_point .contW .txt {letter-spacing: -1px; line-height: 1.7; color: #333; font-size: 13px; font-weight: 600; padding: 0;}
|
||||
.order_gcPay .ca_point .contW a{display: block; background:#3053bc; color: #fff; font-size: 14px; padding: 8px; border-radius: 50px; margin-top:15px; transition: .25s;}
|
||||
|
||||
.order_gcPay .ca_new {border: 2px dashed #3053bc;text-align: center; display: flex; align-items: center; justify-content: center; transition: .25s;}
|
||||
.order_gcPay .ca_new a{width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column;}
|
||||
.order_gcPay .ca_new .ico{display: block; width: 45px; height: 45px; margin-bottom:10px; fill:#3053bc;}
|
||||
.order_gcPay .ca_new .txt {font-weight: 600; letter-spacing: -1px; padding:0;}
|
||||
|
||||
/*하단페이징*/
|
||||
.order_gcPay .slick-dots {position: relative; margin: 15px 0 0 0 !important; bottom: 0;}
|
||||
.order_gcPay .slick-dots li {margin: 0; width:17px; height:17px;}
|
||||
.order_gcPay .slick-dots li button:before{display: none;}
|
||||
.order_gcPay .slick-dots li button:after {content: '●'; display: inline-block; font-size: 10px; color: #ddd;}
|
||||
.order_gcPay .slick-dots li.slick-active button:after {color:#3053bc;}
|
||||
|
||||
/*하단영역(포인트/할부영역)*/
|
||||
.order_gcPay .selectWrap {margin-top:5px;}
|
||||
.order_gcPay .selectWrap .ez-checkbox{margin-top:-2px;}
|
||||
.order_gcPay .cardW .selectWrap ul{display: flex; align-items: center; justify-content: space-between;}
|
||||
.order_gcPay .bankW .selectWrap,
|
||||
.order_gcPay .bankW .selectWrap .receiptWrap {display: none;}
|
||||
.order_gcPay .bankW .receiptWrap {margin-top:10px; padding-top:10px; border-top: 1px solid #eee;}
|
||||
.order_gcPay .bankW .receiptWrap li {padding-top:10px;}
|
||||
.order_gcPay .bankW .receiptWrap li:first-child{padding-top: 0;}
|
||||
|
||||
.order_gcPay .receiptWrap label {margin-right:10px;}
|
||||
.order_gcPay .receiptWrap .ez-radio {margin: 0 5px 0 0;}
|
||||
|
||||
.order_gcPay .listW.chk_on ~ .conW .selectWrap,
|
||||
.order_gcPay .checkW.chk_on ~ .receiptWrap{display: block;}
|
||||
|
||||
/*일반결제*/
|
||||
.payco > div {width: auto !important;}
|
||||
.order_gcPay .payment_method_select {padding: 0;}
|
||||
.order_gcPay #payment_type {margin-top:-5px;}
|
||||
.order_gcPay #payment_type > li > div.active .desc {color: #ddd;}
|
||||
.order_gcPay #typereceiptlay label {vertical-align: middle;}
|
||||
|
||||
div.default_table_style li {margin: 5px 0;}
|
||||
/*.order_gcPay #payment_type > li > div {display:flex; flex-direction: column; justify-content: center;}*/
|
||||
/*.order_gcPay #payment_type > li > div:before {height:33px; position: relative;}*/
|
||||
/*.order_gcPay #payment_type > li > div > label {height: auto;}*/
|
||||
/*.order_gcPay #payment_type > li > div p {!*padding-top:10px;*!}*/
|
||||
/*.order_gcPay #payment_type > li > div > label .ez-radio,*/
|
||||
/*.order_gcPay #payment_type > li > div > label .ez-radio-on {height: 0;}*/
|
||||
|
||||
/*카드영역*/
|
||||
.ca_code_001 {background-color: #529e4b; } /* 001. 농협NH카드 */
|
||||
.ca_code_001 .card_logo {background: url('../images/payment/ca_code_001.png') no-repeat;}
|
||||
.ca_code_002 {background-color: #1691d3; } /* 002. 우리카드 */
|
||||
.ca_code_002 .card_logo {background: url('../images/payment/ca_code_002.png') no-repeat;}
|
||||
.ca_code_003 {background-color: #3f5bb5;} /* 003. 신한카드 */
|
||||
.ca_code_003 .card_logo {background: url('../images/payment/ca_code_003.png') no-repeat;}
|
||||
.ca_code_004 {background-color: #786d62;} /* 004. KB국민카드 */
|
||||
.ca_code_004.card_logo {background: url('../images/payment/ca_code_004.png') no-repeat;}
|
||||
.ca_code_005 {background-color: #008375; } /* 005. 하나카드 */
|
||||
.ca_code_005 .card_logo {background: url('../images/payment/ca_code_005.png') no-repeat;}
|
||||
.ca_code_006 {background-color: #004785; } /* 006. 씨티카드 */
|
||||
.ca_code_006 .card_logo {background: url('../images/payment/ca_code_006.png') no-repeat;}
|
||||
|
||||
.ca_code_025 {background-color: #0c4da2;} /* 025. 삼성카드 */
|
||||
.ca_code_025 .card_logo {background: url('../images/payment/ca_code_025.png') no-repeat;}
|
||||
.ca_code_026 {background-color: #231f20;} /* 026. 현대카드 */
|
||||
.ca_code_026 .card_logo {background: url('../images/payment/ca_code_026.png') no-repeat;}
|
||||
.ca_code_027 {background-color: #ed1c24;} /* 027. 롯데카드 */
|
||||
.ca_code_027 .card_logo {background: url('../images/payment/ca_code_027.png') no-repeat;}
|
||||
.ca_code_028 {background-color: #21356c; } /* 028. VISA */
|
||||
.ca_code_028 .card_logo {background: url('../images/payment/ca_code_028.png') no-repeat;}
|
||||
.ca_code_029 {background-color: #21356c; } /* 029. 마스터카드 */
|
||||
.ca_code_029 .card_logo {background: url('../images/payment/ca_code_029.png') no-repeat;}
|
||||
.ca_code_030 {background-color: #0c4da2;} /* 030. 비씨카드 */
|
||||
.ca_code_030 .card_logo {background: url('../images/payment/ca_code_030.png') no-repeat;}
|
||||
.ca_code_031 {background-color: #231f20;} /* 031. 현대백화점 */
|
||||
.ca_code_031 .card_logo {background: url('../images/payment/ca_code_031.png') no-repeat;}
|
||||
.ca_code_032 {background-color: #0050a0;} /* 032. 갤러리아 */
|
||||
.ca_code_032 .card_logo {background: url('../images/payment/ca_code_032.png') no-repeat;}
|
||||
|
||||
/*카드영역+은행로고*/
|
||||
.ca_code_007 {background-color: #003d89;} /* 007. IBK기업은행 */
|
||||
.ca_code_007 .card_logo {background: url('../images/payment/ba_code_007.png') no-repeat;}
|
||||
.ca_code_008 {background-color: #023279;} /* 008. KDB산업은행 */
|
||||
.ca_code_008 .card_logo {background: url('../images/payment/ba_code_008.png') no-repeat;}
|
||||
.ca_code_009 {background-color: #17c600;} /* 009. SC제일은행 */
|
||||
.ca_code_009 .card_logo {background: url('../images/payment/ba_code_009.png') no-repeat;}
|
||||
.ca_code_010 {background-color: #89d100;} /* 010. 대구은행 */
|
||||
.ca_code_010 .card_logo {background: url('../images/payment/ba_code_010.png') no-repeat;}
|
||||
.ca_code_011 {background-color: #e83434;} /* 011. 부산은행 */
|
||||
.ca_code_011 .card_logo {background: url('../images/payment/ba_code_011.png') no-repeat;}
|
||||
.ca_code_012 {background-color: #084295;} /* 012. 전북은행 */
|
||||
.ca_code_012 .card_logo {background: url('../images/payment/ba_code_012.png') no-repeat;}
|
||||
.ca_code_013 {background-color: #836d52;} /* 013. 경남은행 */
|
||||
.ca_code_013 .card_logo {background: url('../images/payment/ba_code_013.png') no-repeat;}
|
||||
.ca_code_014 {background-color: #006fce;} /* 014. 제주은행 */
|
||||
.ca_code_014 .card_logo {background: url('../images/payment/ba_code_014.png') no-repeat;}
|
||||
.ca_code_015 {background-color: #005cd9;} /* 015. 광주은행 */
|
||||
.ca_code_015 .card_logo {background: url('../images/payment/ba_code_015.png') no-repeat;}
|
||||
.ca_code_016 {background-color: #005367;} /* 016. 새마을금고 */
|
||||
.ca_code_016 .card_logo {background: url('../images/payment/ba_code_016.png') no-repeat;}
|
||||
.ca_code_017 {background-color: #00cbec;} /* 017. 수협중앙 */
|
||||
.ca_code_017 .card_logo {background: url('../images/payment/ba_code_017.png') no-repeat;}
|
||||
.ca_code_018 {background-color: #0050a0;} /* 018. 신용협동조합(신협) */
|
||||
.ca_code_018 .card_logo {background: url('../images/payment/ba_code_018.png') no-repeat;}
|
||||
.ca_code_019 {background-color: #de040a;} /* 019. 우체국 */
|
||||
.ca_code_019 .card_logo {background: url('../images/payment/ba_code_019.png') no-repeat;}
|
||||
.ca_code_020 {background-color: #120063;} /* 020. 케이뱅크 */
|
||||
.ca_code_020 .card_logo {background: url('../images/payment/ba_code_020.png') no-repeat;}
|
||||
.ca_code_021 {background-color: #ffe400;} /* 021. 카카오뱅크 */
|
||||
.ca_code_021 .card_logo {background: url('../images/payment/ba_code_021.png') no-repeat;}
|
||||
.ca_code_022 {background-color: #007360;} /* 022. 상호저축은행 */
|
||||
.ca_code_022 .card_logo {background: url('../images/payment/ba_code_022.png') no-repeat;}
|
||||
.ca_code_023 {background-color: #022562;} /* 023. 산림조합 */
|
||||
.ca_code_023 .card_logo {background: url('../images/payment/ba_code_023.png') no-repeat;}
|
||||
.ca_code_024 {background-color: #0064ff;} /* 024. 토스뱅크 */
|
||||
.ca_code_024 .card_logo {background: url('../images/payment/ba_code_024.png') no-repeat;}
|
||||
|
||||
/*계좌영역*/
|
||||
.ba_code_001 {background-color: #00b259;} /* 001. NH농협 */
|
||||
.ba_code_001 .card_logo {background: url('../images/payment/ba_code_001.png') no-repeat;}
|
||||
.ba_code_002 {background-color: #1691d3;} /* 002. 우리은행 */
|
||||
.ba_code_002 .card_logo {background: url('../images/payment/ba_code_002.png') no-repeat;}
|
||||
.ba_code_003 {background-color: #3f5bb5;} /* 003. 신한은행(통합) */
|
||||
.ba_code_003 .card_logo {background: url('../images/payment/ba_code_003.png') no-repeat;}
|
||||
.ba_code_004 {background-color: #786d62;} /* 004. KB국민은행 */
|
||||
.ba_code_004 .card_logo {background: url('../images/payment/ba_code_004.png') no-repeat;}
|
||||
.ba_code_005 {background-color: #116d65;} /* 005. KEB하나은행 */
|
||||
.ba_code_005 .card_logo {background: url('../images/payment/ba_code_005.png') no-repeat;}
|
||||
.ba_code_006 {background-color: #004785;} /* 006. 씨티은행 */
|
||||
.ba_code_006 .card_logo {background: url('../images/payment/ba_code_006.png') no-repeat;}
|
||||
.ba_code_007 {background-color: #003d89;} /* 007. IBK기업은행 */
|
||||
.ba_code_007 .card_logo {background: url('../images/payment/ba_code_007.png') no-repeat;}
|
||||
.ba_code_008 {background-color: #023279;} /* 008. KDB산업은행 */
|
||||
.ba_code_008 .card_logo {background: url('../images/payment/ba_code_008.png') no-repeat;}
|
||||
.ba_code_009 {background-color: #17c600;} /* 009. SC제일은행 */
|
||||
.ba_code_009 .card_logo {background: url('../images/payment/ba_code_009.png') no-repeat;}
|
||||
.ba_code_010 {background-color: #89d100;} /* 010. 대구은행 */
|
||||
.ba_code_010 .card_logo {background: url('../images/payment/ba_code_010.png') no-repeat;}
|
||||
.ba_code_011 {background-color: #e83434;} /* 011. 부산은행 */
|
||||
.ba_code_011 .card_logo {background: url('../images/payment/ba_code_011.png') no-repeat;}
|
||||
.ba_code_012 {background-color: #084295;} /* 012. 전북은행 */
|
||||
.ba_code_012 .card_logo {background: url('../images/payment/ba_code_012.png') no-repeat;}
|
||||
.ba_code_013 {background-color: #836d52;} /* 013. 경남은행 */
|
||||
.ba_code_013 .card_logo {background: url('../images/payment/ba_code_013.png') no-repeat;}
|
||||
.ba_code_014 {background-color: #006fce;} /* 014. 제주은행 */
|
||||
.ba_code_014 .card_logo {background: url('../images/payment/ba_code_014.png') no-repeat;}
|
||||
.ba_code_015 {background-color: #005cd9;} /* 015. 광주은행 */
|
||||
.ba_code_015 .card_logo {background: url('../images/payment/ba_code_015.png') no-repeat;}
|
||||
.ba_code_016 {background-color: #005367;} /* 016. 새마을금고 */
|
||||
.ba_code_016 .card_logo {background: url('../images/payment/ba_code_016.png') no-repeat;}
|
||||
.ba_code_017 {background-color: #00cbec;} /* 017. 수협중앙 */
|
||||
.ba_code_017 .card_logo {background: url('../images/payment/ba_code_017.png') no-repeat;}
|
||||
.ba_code_018 {background-color: #0050a0;} /* 018. 신용협동조합(신협) */
|
||||
.ba_code_018 .card_logo {background: url('../images/payment/ba_code_018.png') no-repeat;}
|
||||
.ba_code_019 {background-color: #de040a;} /* 019. 우체국 */
|
||||
.ba_code_019 .card_logo {background: url('../images/payment/ba_code_019.png') no-repeat;}
|
||||
.ba_code_020 {background-color: #120063;} /* 020. 케이뱅크 */
|
||||
.ba_code_020 .card_logo {background: url('../images/payment/ba_code_020.png') no-repeat;}
|
||||
.ba_code_021 {background-color: #ffe400;} /* 021. 카카오뱅크 */
|
||||
.ba_code_021 .card_logo {background: url('../images/payment/ba_code_021.png') no-repeat;}
|
||||
.ba_code_022 {background-color: #007360;} /* 022. 상호저축은행 */
|
||||
.ba_code_022 .card_logo {background: url('../images/payment/ba_code_022.png') no-repeat;}
|
||||
.ba_code_023 {background-color: #022562;} /* 023. 산림조합 */
|
||||
.ba_code_023 .card_logo {background: url('../images/payment/ba_code_023.png') no-repeat;}
|
||||
.ba_code_024 {background-color: #0064ff;} /* 024. 토스뱅크 */
|
||||
.ba_code_024 .card_logo {background: url('../images/payment/ba_code_024.png') no-repeat;}
|
||||
|
||||
/*세팅팝업*/
|
||||
.settingWrap .slick-dots {position: relative; margin: 15px 0 0 0 !important; bottom: 0;}
|
||||
.settingWrap .slick-dotted.slick-slider {margin: 0;}
|
||||
.settingWrap .slick-dots li {margin: 0; width:17px; height:17px;}
|
||||
.settingWrap .slick-dots li button:before{display: none;}
|
||||
.settingWrap .slick-dots li button:after {content: '●'; display: inline-block; font-size: 10px; color: #6f87d0;}
|
||||
.settingWrap .slick-dots li.slick-active button:after {color:#fff;}
|
||||
|
||||
/*세팅팝업*/
|
||||
table {border-collapse: collapse; border-spacing: 0;}
|
||||
.settingWrap {position: fixed; top:0 !important; left:0 !important; width: 100% !important; height:100% !important; z-index: 10; background: #fff; letter-spacing: -0.7px !important; overflow: scroll !important;}
|
||||
.settingWrap .imgW {margin: 0 auto; width:100%;}
|
||||
.settingWrap .imgW .popTit {text-align: center;}
|
||||
.settingWrap .imgW img{ width: 100%; }
|
||||
.settingWrap .imgW .slick-slide img {margin: 0 auto !important;}
|
||||
.settingWrap .imgW {background: #3053bc; padding-top:40px; padding-bottom: 30px;}
|
||||
.settingWrap .txtW {margin: 0 auto;padding: 25px 20px;}
|
||||
.settingWrap .txtW dl {margin-top:25px;}
|
||||
.settingWrap .txtW dl:first-child {margin-top:0;}
|
||||
.settingWrap .txtW dt {font-size: 14px; padding-bottom:10px; color: #333; font-weight: 600;}
|
||||
.settingWrap .txtW dd {font-size: 13px; padding-bottom:3px;}
|
||||
.settingWrap .txtW dd:last-child,
|
||||
.settingWrap .txtW li:last-child {padding-bottom: 0;}
|
||||
.settingWrap .txtW li {position: relative; padding-left: 7px;}
|
||||
.settingWrap .txtW li:before{content: 'ㆍ'; display: block; position: absolute; left: -5px;}
|
||||
|
||||
.settingWrap .tableW {padding:25px 20px;}
|
||||
.settingWrap table {width: 100%;}
|
||||
.settingWrap table th,
|
||||
.settingWrap table td {text-align: center; padding: 15px 10px; border-bottom: 1px solid #e0e0e0;}
|
||||
.settingWrap table thead th {border-top:2px solid #e0e0e0; background: #fafafa;}
|
||||
.settingWrap table th.left,
|
||||
.settingWrap table tbody th {text-align: left;}
|
||||
.settingWrap table th {font-weight: bold;}
|
||||
.settingWrap table td {}
|
||||
|
||||
.settingWrap .feeMonth .txtW {padding-top:0;}
|
||||
.ui-dialog.change::after {
|
||||
position: relative;
|
||||
display:none;
|
||||
}
|
||||
604
build/resources/main/static/sopmall/mobile/css/pay.css
Normal file
604
build/resources/main/static/sopmall/mobile/css/pay.css
Normal file
@@ -0,0 +1,604 @@
|
||||
/* 네이버페이 확인용 css(실제 API 적용할땐 삭제하시면 됩니다.)
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
*/
|
||||
|
||||
.npay_pointcolor {
|
||||
color: #00c73c !important;
|
||||
}
|
||||
|
||||
.npay_storebtn_bx,
|
||||
.npay_button_box,
|
||||
.npay_button_box2,
|
||||
.npay_storebtn_bx *,
|
||||
.npay_button_box *,
|
||||
.npay_button_box2 * {
|
||||
display: block !important;
|
||||
overflow: hidden !important;
|
||||
float: none !important;
|
||||
position: static !important;
|
||||
top: auto !important;
|
||||
left: auto !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: 0 none !important;
|
||||
font-size: 12px !important;
|
||||
line-height: 16px !important;
|
||||
font-family: '돋움', Dotum, Helvetica, sans-serif !important;
|
||||
text-align: left !important;
|
||||
text-decoration: none !important;
|
||||
vertical-align: top !important;
|
||||
background: none !important;
|
||||
border-radius: 0 !important
|
||||
}
|
||||
|
||||
.npay_storebtn_bx {
|
||||
display: inline-block !important
|
||||
}
|
||||
|
||||
.npay_button_box,
|
||||
.npay_button_box2 {
|
||||
width: auto !important;
|
||||
height: 100% !important;
|
||||
*height: auto !important;
|
||||
zoom: 1 !important;
|
||||
padding: 0 4px !important;
|
||||
border-top: 2px solid #2b2f3a !important;
|
||||
background-color: #fff !important
|
||||
}
|
||||
|
||||
.npay_button_box2 {
|
||||
padding: 0 !important
|
||||
}
|
||||
|
||||
.npay_button_box .npay_blind,
|
||||
.npay_button_box .yellow,
|
||||
/* mall.chainflower.com 깜빡임 */
|
||||
.npay_button_box .blue,
|
||||
/* mall.chainflower.com 깜빡임 */
|
||||
.npay_button_box2 .npay_blind,
|
||||
.npay_button_box2 .yellow .npay_button_box2 .blue {
|
||||
overflow: hidden !important;
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
margin: -1px !important;
|
||||
padding: 0 !important;
|
||||
clip: rect(0 0 0 0) !important
|
||||
}
|
||||
|
||||
.npay_button {
|
||||
position: relative !important;
|
||||
margin: 0 !important;
|
||||
padding: 11px 0 11px 86px !important;
|
||||
zoom: 1 !important
|
||||
}
|
||||
|
||||
.npay_text {
|
||||
display: block !important;
|
||||
*display: inline !important;
|
||||
position: absolute !important;
|
||||
top: 11px !important;
|
||||
left: 0 !important;
|
||||
width: 79px !important;
|
||||
height: 36px !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
background: url(../images/npay_sp_text.png) no-repeat !important;
|
||||
background-size: 180px auto !important
|
||||
}
|
||||
|
||||
.npay_btn_list {
|
||||
*zoom: 1 !important;
|
||||
display: table !important;
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
table-layout: fixed !important;
|
||||
list-style: none !important
|
||||
}
|
||||
|
||||
.npay_btn_list tbody {
|
||||
display: table-row-group !important
|
||||
}
|
||||
|
||||
.npay_btn_list tr {
|
||||
display: table-row !important
|
||||
}
|
||||
|
||||
.npay_store .npay_btn_list {
|
||||
table-layout: auto !important
|
||||
}
|
||||
|
||||
/* F Type */
|
||||
.npay_store .npay_btn_item {
|
||||
*width: 120px !important
|
||||
}
|
||||
|
||||
.npay_btn_item {
|
||||
display: table-cell !important;
|
||||
height: 37px !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
text-align: left !important
|
||||
}
|
||||
|
||||
.npay_btn_item.btn_width {
|
||||
width: 40px !important
|
||||
}
|
||||
|
||||
.npay_store .npay_btn_item.btn_width {
|
||||
*width: 78px !important
|
||||
}
|
||||
|
||||
.npay_btn_link {
|
||||
display: block !important;
|
||||
height: 35px !important;
|
||||
margin: 0 0 0 3px !important;
|
||||
padding: 0 !important;
|
||||
border: 1px solid #ccc !important;
|
||||
border-radius: 2px !important;
|
||||
background-color: #fff !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-repeat: no-repeat !important;
|
||||
text-align: center !important;
|
||||
text-decoration: none !important
|
||||
}
|
||||
|
||||
.npay_btn_item:first-child .npay_btn_link {
|
||||
margin: 0 !important
|
||||
}
|
||||
|
||||
.npay_btn_link.npay_btn_pay {
|
||||
border-color: #00c05a !important;
|
||||
background-image: url(../images/npay_sp_payment.png) !important;
|
||||
background-position: 50% 0 !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: 63px auto !important;
|
||||
}
|
||||
|
||||
.npay_btn_link.btn_green {
|
||||
border-color: #00c851 !important;
|
||||
background-color: #00de5a !important;
|
||||
}
|
||||
|
||||
.npay_btn_link.npay_btn_zzim,
|
||||
.npay_btn_link.npay_btn_talk {
|
||||
width: 35px !important
|
||||
}
|
||||
|
||||
.npay_btn_link.npay_btn_cart,
|
||||
.npay_btn_link.npay_btn_talk2 {
|
||||
width: 73px !important
|
||||
}
|
||||
|
||||
.npay_btn_link.npay_btn_zzim {
|
||||
background-image: url(../images/npay_sp_zzim.png) !important;
|
||||
background-position: 50% 0 !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: 35px auto !important;
|
||||
}
|
||||
|
||||
.npay_btn_link.npay_btn_zzim2 {
|
||||
background-image: url(../images/npay_sp_zzim.png) !important;
|
||||
background-position: 50% -105px !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: 35px auto !important;
|
||||
}
|
||||
|
||||
.npay_btn_link.npay_btn_talk {
|
||||
background-image: url(../images/npay_sp_talk.png) !important;
|
||||
background-position: 50% 0 !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: 35px auto !important;
|
||||
}
|
||||
|
||||
.npay_btn_link.btn_gray {
|
||||
border-color: #9ba0ac !important;
|
||||
background-color: #acb2bf !important
|
||||
}
|
||||
|
||||
.npay_btn_link.npay_btn_pay.btn_gray,
|
||||
.npay_btn_link.npay_btn_zzim.btn_gray,
|
||||
.npay_btn_link.npay_btn_talk.btn_gray {
|
||||
background-position: 50% -37px !important
|
||||
}
|
||||
|
||||
.npay_btn_link.npay_btn_zzim2.btn_gray {
|
||||
background-position: 50% -140px !important
|
||||
}
|
||||
|
||||
.npay_btn_link.npay_btn_cart {
|
||||
background-image: url(../images/npay_sp_cart.png) !important;
|
||||
background-position: 50% 0 !important;
|
||||
background-repeat: no-repeat !important
|
||||
}
|
||||
|
||||
.npay_btn_link.npay_btn_talk2 {
|
||||
background-image: url(../images/npay_sp_talk_text.png) !important;
|
||||
background-position: 50% 0 !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: 73px, auto !important;
|
||||
}
|
||||
|
||||
.npay_btn_link.npay_btn_cart.btn_gray,
|
||||
.npay_btn_link.npay_btn_talk2.btn_gray {
|
||||
background-position: 50% -37px !important
|
||||
}
|
||||
|
||||
.npay_event {
|
||||
position: relative !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 40px 0 0 !important;
|
||||
border: 0 none !important;
|
||||
border-top: 1px solid #eaecee !important
|
||||
}
|
||||
|
||||
.npay_event_text {
|
||||
display: block !important;
|
||||
*display: inline !important;
|
||||
overflow: hidden !important;
|
||||
*width: 100% !important;
|
||||
margin: 0 !important;
|
||||
padding: 5px 0 !important;
|
||||
letter-spacing: 0 !important;
|
||||
white-space: nowrap !important;
|
||||
*zoom: 1 !important;
|
||||
text-overflow: ellipsis !important;
|
||||
word-wrap: normal !important
|
||||
}
|
||||
|
||||
.npay_event_text .event_title {
|
||||
display: inline !important;
|
||||
margin: 0 5px 0 0 !important;
|
||||
padding: 0 !important;
|
||||
font-weight: normal !important;
|
||||
color: #00c05a !important;
|
||||
vertical-align: middle !important
|
||||
}
|
||||
|
||||
.npay_pointplus {
|
||||
position: relative !important;
|
||||
padding-left: 44px !important;
|
||||
}
|
||||
|
||||
.npay_pointplus .event_title {
|
||||
display: block !important;
|
||||
position: absolute !important;
|
||||
left: 0 !important;
|
||||
top: 50% !important;
|
||||
width: 39px !important;
|
||||
height: 13px !important;
|
||||
margin-top: -7px !important;
|
||||
background: url("../../images/button/renewal/npay_sp_icon.png") no-repeat !important;
|
||||
}
|
||||
|
||||
.npay_event .npay_event_text .event_link {
|
||||
display: inline !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
font-weight: normal !important;
|
||||
color: #929294 !important;
|
||||
text-decoration: none !important;
|
||||
vertical-align: middle !important
|
||||
}
|
||||
|
||||
.npay_event .npay_event_text .event_link span {
|
||||
display: inline-block !important;
|
||||
margin: -1px 0 1px !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
||||
.npay_more {
|
||||
position: absolute !important;
|
||||
top: 5px !important;
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
background: url(../images/npay_sp_more.png) no-repeat !important;
|
||||
background-size: 31px auto !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.npay_more_prev {
|
||||
right: 15px !important;
|
||||
background-position: 0 0 !important
|
||||
}
|
||||
|
||||
.npay_more_next {
|
||||
right: 0 !important;
|
||||
background-position: -15px 0 !important
|
||||
}
|
||||
|
||||
.npay_bg_dgray {
|
||||
border-color: #5f5f5f !important;
|
||||
background-color: #434343 !important
|
||||
}
|
||||
|
||||
.npay_bg_dgray .npay_text {
|
||||
background-position: 0 -40px !important
|
||||
}
|
||||
|
||||
.npay_bg_dgray .npay_event_text,
|
||||
.npay_bg_dgray .npay_event_text .event_link {
|
||||
color: #929294 !important
|
||||
}
|
||||
|
||||
.npay_bg_dgray .npay_btn_link.btn_gray {
|
||||
border-color: #67696e !important;
|
||||
background-color: #6d6f74 !important
|
||||
}
|
||||
|
||||
.npay_bg_dgray .npay_btn_link.npay_btn_pay.btn_gray,
|
||||
.npay_bg_dgray .npay_btn_link.npay_btn_talk.btn_gray,
|
||||
.npay_bg_dgray .npay_btn_link.npay_btn_zzim.btn_gray {
|
||||
background-position: 50% -37px !important
|
||||
}
|
||||
|
||||
.npay_bg_dgray .npay_btn_link.npay_btn_zzim2.btn_gray {
|
||||
background-position: 50% -175px !important
|
||||
}
|
||||
|
||||
.npay_bg_dgray .npay_event {
|
||||
border-top-color: #565656 !important
|
||||
}
|
||||
|
||||
.npay_bg_dgray .npay_more_prev {
|
||||
background-position: 0 -20px !important
|
||||
}
|
||||
|
||||
.npay_bg_dgray .npay_more_next {
|
||||
background-position: -15px -20px !important
|
||||
}
|
||||
|
||||
.npay_vertical .npay_button {
|
||||
padding: 30px 0 14px !important
|
||||
}
|
||||
|
||||
.npay_vertical .npay_btn_item {
|
||||
height: 33px !important
|
||||
}
|
||||
|
||||
.npay_vertical .npay_btn_item.btn_width {
|
||||
width: 36px !important
|
||||
}
|
||||
|
||||
.npay_vertical .npay_btn_link {
|
||||
height: 31px !important
|
||||
}
|
||||
|
||||
.npay_vertical .npay_btn_link.npay_btn_zzim,
|
||||
.npay_vertical .npay_btn_link.npay_btn_talk {
|
||||
width: 31px !important
|
||||
}
|
||||
|
||||
.npay_vertical .npay_btn_link.npay_btn_pay {
|
||||
background-image: url(../images/npay_sp_payment2.png) !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: 63px auto !important;
|
||||
}
|
||||
|
||||
.npay_vertical .npay_btn_link.npay_btn_talk {
|
||||
background-image: url(../images/npay_sp_talk2.png) !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: 31px auto !important;
|
||||
}
|
||||
|
||||
.npay_vertical .npay_btn_link.npay_btn_zzim2 {
|
||||
background-image: url(../images/npay_sp_zzim2.png) !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: 31px auto !important;
|
||||
}
|
||||
|
||||
.npay_vertical .npay_btn_link.npay_btn_pay.btn_gray,
|
||||
.npay_vertical .npay_btn_link.npay_btn_talk.btn_gray {
|
||||
background-position: 50% -33px !important
|
||||
}
|
||||
|
||||
.npay_vertical.npay_bg_dgray .npay_btn_link.btn_gray {
|
||||
background-position: 50% -33px !important
|
||||
}
|
||||
|
||||
.npay_vertical .npay_btn_link.npay_btn_zzim2 {
|
||||
background-position: 50% -66px !important
|
||||
}
|
||||
|
||||
.npay_vertical .npay_btn_link.npay_btn_zzim2.btn_gray {
|
||||
background-position: 50% -99px !important
|
||||
}
|
||||
|
||||
.npay_vertical .npay_text {
|
||||
top: 13px !important;
|
||||
width: 114px !important;
|
||||
height: 9px !important;
|
||||
background-position: 0 -80px !important
|
||||
}
|
||||
|
||||
.npay_vertical .npay_btn_margin {
|
||||
margin-top: 3px !important
|
||||
}
|
||||
|
||||
.npay_vertical .npay_event_text {
|
||||
white-space: normal !important;
|
||||
text-overflow: clip !important
|
||||
}
|
||||
|
||||
.npay_vertical .npay_event_text .event_link span {
|
||||
display: inline !important;
|
||||
vertical-align: top !important;
|
||||
}
|
||||
|
||||
.npay_vertical .npay_pointplus {
|
||||
padding: 5px 0 !important;
|
||||
}
|
||||
|
||||
.npay_vertical .npay_pointplus .event_title {
|
||||
display: inline-block !important;
|
||||
position: relative !important;
|
||||
top: -1px !important;
|
||||
margin: 0 4px 0 0 !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
||||
.npay_vertical.npay_bg_dgray .npay_text {
|
||||
background-position: 0 -110px !important
|
||||
}
|
||||
|
||||
.npay_vertical2 .npay_button {
|
||||
padding: 28px 0 0 !important
|
||||
}
|
||||
|
||||
.npay_vertical2 .npay_text {
|
||||
top: 11px !important
|
||||
}
|
||||
|
||||
.npay_vertical2 .npay_event {
|
||||
border: 0 none !important
|
||||
}
|
||||
|
||||
.npay_vertical2 .npay_event_text {
|
||||
line-height: 14px !important
|
||||
}
|
||||
|
||||
.npay_horizontal .npay_text {
|
||||
top: 14px !important;
|
||||
left: 1px !important;
|
||||
background-position: 0 -180px !important;
|
||||
width: 170px !important;
|
||||
height: 10px !important
|
||||
}
|
||||
|
||||
.npay_horizontal .npay_button {
|
||||
padding-left: 192px !important
|
||||
}
|
||||
|
||||
.npay_horizontal .npay_event {
|
||||
width: 135px !important;
|
||||
border-top: none !important;
|
||||
margin-top: -35px !important;
|
||||
padding-right: 36px !important
|
||||
}
|
||||
|
||||
.npay_type_A_1 {
|
||||
width: 236px !important;
|
||||
height: 88px !important
|
||||
}
|
||||
|
||||
.npay_type_A_2 {
|
||||
width: 285px !important;
|
||||
height: 88px !important;
|
||||
}
|
||||
|
||||
.npay_type_B_1 {
|
||||
width: 214px !important;
|
||||
height: 83px !important
|
||||
}
|
||||
|
||||
.npay_type_B_2 {
|
||||
width: 261px !important;
|
||||
height: 83px !important
|
||||
}
|
||||
|
||||
.npay_type_C_1_1,
|
||||
.npay_type_C_2_1 {
|
||||
width: 225px !important;
|
||||
height: 88px !important
|
||||
}
|
||||
|
||||
.npay_type_C_1_2,
|
||||
.npay_type_C_2_2 {
|
||||
width: 272px !important;
|
||||
height: 88px !important
|
||||
}
|
||||
|
||||
.npay_type_C_3_1 {
|
||||
width: 225px !important;
|
||||
height: 92px !important
|
||||
}
|
||||
|
||||
.npay_type_C_3_2 {
|
||||
width: 272px !important;
|
||||
height: 92px !important
|
||||
}
|
||||
|
||||
.npay_type_D_1_1,
|
||||
.npay_type_D_2_1 {
|
||||
width: 210px !important;
|
||||
height: 83px !important
|
||||
}
|
||||
|
||||
.npay_type_D_1_2,
|
||||
.npay_type_D_2_2 {
|
||||
width: 251px !important;
|
||||
height: 83px !important
|
||||
}
|
||||
|
||||
.npay_type_D_3_1 {
|
||||
width: 210px !important;
|
||||
height: 87px !important
|
||||
}
|
||||
|
||||
.npay_type_D_3_2 {
|
||||
width: 251px !important;
|
||||
height: 87px !important
|
||||
}
|
||||
|
||||
.npay_type_E_1_1,
|
||||
.npay_type_E_1_2,
|
||||
.npay_type_E_2_1,
|
||||
.npay_type_E_2_2 {
|
||||
width: 124px !important;
|
||||
height: 135px !important
|
||||
}
|
||||
|
||||
.npay_type_E_3_1,
|
||||
.npay_type_E_3_2 {
|
||||
width: 124px !important;
|
||||
height: 139px !important
|
||||
}
|
||||
|
||||
.npay_type_F {
|
||||
width: 365px !important;
|
||||
height: 115px !important
|
||||
}
|
||||
|
||||
.npay_type_G {
|
||||
width: 394px !important;
|
||||
height: 60px !important
|
||||
}
|
||||
|
||||
|
||||
/* IE5용 */
|
||||
.npay_type_E_1_1 .npay_btn_link.npay_btn_pay.btn_gray,
|
||||
.npay_type_E_1_1 .npay_btn_link.npay_btn_talk.btn_gray,
|
||||
.npay_type_E_1_2 .npay_btn_link.npay_btn_pay.btn_gray,
|
||||
.npay_type_E_1_2 .npay_btn_link.npay_btn_talk.btn_gray {
|
||||
*background-position: 50% -33px !important
|
||||
}
|
||||
|
||||
.npay_type_C_3_1 .npay_vertical.npay_bg_dgray .npay_text,
|
||||
.npay_type_D_3_1 .npay_vertical.npay_bg_dgray .npay_text,
|
||||
.npay_type_C_3_2 .npay_vertical.npay_bg_dgray .npay_text,
|
||||
.npay_type_D_3_2 .npay_vertical.npay_bg_dgray .npay_text {
|
||||
*background-position: 0 -40px !important
|
||||
}
|
||||
|
||||
.npay_type_C_3_1 .npay_bg_dgray .npay_btn_link.npay_btn_pay.btn_gray,
|
||||
.npay_type_C_3_1 .npay_bg_dgray .npay_btn_link.npay_btn_talk.btn_gray,
|
||||
.npay_type_C_3_1 .npay_bg_dgray .npay_btn_link.npay_btn_zzim.btn_gray,
|
||||
.npay_type_D_3_1 .npay_bg_dgray .npay_btn_link.npay_btn_pay.btn_gray,
|
||||
.npay_type_D_3_1 .npay_bg_dgray .npay_btn_link.npay_btn_talk.btn_gray,
|
||||
.npay_type_D_3_1 .npay_bg_dgray .npay_btn_link.npay_btn_zzim.btn_gray,
|
||||
.npay_type_C_3_2 .npay_bg_dgray .npay_btn_link.npay_btn_pay.btn_gray,
|
||||
.npay_type_C_3_2 .npay_bg_dgray .npay_btn_link.npay_btn_talk.btn_gray,
|
||||
.npay_type_C_3_2 .npay_bg_dgray .npay_btn_link.npay_btn_zzim.btn_gray,
|
||||
.npay_type_D_3_2 .npay_bg_dgray .npay_btn_link.npay_btn_pay.btn_gray,
|
||||
.npay_type_D_3_2 .npay_bg_dgray .npay_btn_link.npay_btn_talk.btn_gray,
|
||||
.npay_type_D_3_2 .npay_bg_dgray .npay_btn_link.npay_btn_zzim.btn_gray {
|
||||
*background-position: 50% -37px !important
|
||||
}
|
||||
516
build/resources/main/static/sopmall/mobile/css/theme/themeAF.css
Normal file
516
build/resources/main/static/sopmall/mobile/css/theme/themeAF.css
Normal file
@@ -0,0 +1,516 @@
|
||||
@charset "UTF-8";
|
||||
/****** 뉴트리코어 테마 컬러 #374049 ******/
|
||||
/* svg 아이콘 테마 색상 설정 */
|
||||
.svg-themeColor {
|
||||
fill: #374049;
|
||||
}
|
||||
|
||||
/* 헤더 로고 사이즈 설정
|
||||
*/
|
||||
.header__home-link {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
/* 헤더 카테고리 탭 색상
|
||||
*/
|
||||
.home-category__item.active a {
|
||||
color: #46525e;
|
||||
}
|
||||
|
||||
.home-category__item.active::after {
|
||||
background-color: #46525e;
|
||||
}
|
||||
|
||||
/* 헤더 장바구니, 마이페이지 아이콘
|
||||
( 사이즈 : 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: #374049;
|
||||
}
|
||||
.menu_navigation_wrap .side_menu > li > ul li > div.on a.hasSub {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 실시간 검색 숫자 색상 설정 */
|
||||
.search-trend__number {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 실시간 검색 상승, 하강 아이콘
|
||||
( 사이즈 : 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: #46525e;
|
||||
}
|
||||
|
||||
/* 헤더 장바구니 상품숫자 Badge 색상 설정 및 위치 조정
|
||||
(아이콘 모양이 달라지면 top, right 로 위치조정 필요할 수 있음)
|
||||
*/
|
||||
.number-badge {
|
||||
background-color: #46525e;
|
||||
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: #374049;
|
||||
}
|
||||
|
||||
/* 상품 이미지 호버시 장바구니 담기 아이콘
|
||||
( 사이즈 : 44x44 또는 그 배수 )
|
||||
*/
|
||||
.icon_product-unit-addToCart {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-image: url(../../images/icon_product-unit-addToCart.png);
|
||||
}
|
||||
|
||||
/* Swiper 테마 컬러(인디케이터 색상) 변경
|
||||
*/
|
||||
:root {
|
||||
--swiper-theme-color: #374049 !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: #374049;
|
||||
}
|
||||
|
||||
.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: #374049;
|
||||
box-shadow: inset 0 -3px 0 0 #374049;
|
||||
}
|
||||
|
||||
/* 이미지 배너타입 화살표 아이콘
|
||||
( 사이즈 : 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: #374049;
|
||||
}
|
||||
|
||||
/* 메인 고객센터 아이콘
|
||||
( 사이즈 : 72x72 또는 그 배수 )
|
||||
*/
|
||||
.icon_notice03 {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
background-image: url(../../images/icon_notice-customer.png);
|
||||
}
|
||||
|
||||
/* 메인 고객센터 번호 색상
|
||||
*/
|
||||
.notice__number {
|
||||
color: #46525e;
|
||||
}
|
||||
|
||||
/* 서브 페이지 헤더 탭 색상
|
||||
*/
|
||||
.headerTab__item.active::after {
|
||||
background-color: #46525e;
|
||||
}
|
||||
|
||||
.headerTab__item.active a {
|
||||
color: #46525e;
|
||||
}
|
||||
|
||||
/* Primary 버튼 색상 */
|
||||
.btn.theme {
|
||||
background-color: #374049;
|
||||
color: #ffffff;
|
||||
}
|
||||
.btn.theme:active {
|
||||
background-color: #2e363d;
|
||||
}
|
||||
.btn.outline.theme {
|
||||
color: #374049;
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
/* 탭 버튼 색상 설정 */
|
||||
.sub-tab__btn.current {
|
||||
background-color: #46525e;
|
||||
border-color: transparent;
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
}
|
||||
.sub-tab__trigger.type02 .sub-tab__btn.current {
|
||||
border-top: 2px solid #46525e;
|
||||
}
|
||||
|
||||
/* 기간 선택 버튼 색상 설정 */
|
||||
.dateRange-btnContainer .dateRange-btn.selected {
|
||||
color: #374049;
|
||||
border: 1px solid #374049;
|
||||
}
|
||||
|
||||
/* 마이페이지 메인 주문/배송 조회 색상 설정 */
|
||||
.orderProgress__list li.current .orderProgress__num {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 마이페이지 배송지 관리 기본 배송지 색상 설정 */
|
||||
.addressManage__itemPerson.current {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 마이페이지 회원등급 제목 색상 설정 */
|
||||
.myMemberRankInfo__title em {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 마이페이지 마일리지 내역 색상 설정 */
|
||||
.mileageStatusCurrent__number {
|
||||
color: #374049;
|
||||
}
|
||||
.mileageStatusCurrent__unit {
|
||||
color: #374049;
|
||||
}
|
||||
.mileageStatusMisc__item--scheduled .mileageStatusMisc__number {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 결제예정금액 색상 설정 */
|
||||
.cartOrderBox__total--final .cartOrderBox__totalTh,
|
||||
.cartOrderBox__total--final .cartOrderBox__totalTd {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
.orderDetail__table > .table .orderDetail__table__sum th,
|
||||
.orderDetail__table > .table .orderDetail__table__sum td {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 주문 상품 마일리지 색상 설정 */
|
||||
.orderInfo__mileageText em {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 주문 결과 상단 타이틀 색상 설정 */
|
||||
.orderCompletedTop__title {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 주문 실패 타이틀, 설명 포인트 색상 설정 */
|
||||
.orderFailed__title em,
|
||||
.orderFailed__text em {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 검색 결과 인기 검색어 숫자 색상 설정 */
|
||||
.resultTrend__num {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 쿠폰 다운로드 색상 설정 */
|
||||
.productCoupon__right {
|
||||
background-color: #374049;
|
||||
}
|
||||
.productCoupon__text {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 회원혜택 회사명 색상 설정 */
|
||||
.productDetailInfo__memberBenefits__title em {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 상세탭 밑줄 색상 설정 */
|
||||
.productDetailTab__item.active::after {
|
||||
background-color: #374049;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 평점 비율 색상 설정 */
|
||||
.productReview__ratingStats__topRating .productReview__ratingStats__fill {
|
||||
background-color: #46525e;
|
||||
}
|
||||
|
||||
.productReview__ratingStats__num {
|
||||
background-color: #46525e;
|
||||
}
|
||||
.productReview__ratingStats__num::before {
|
||||
border-right-color: #46525e;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 건수 색상 설정 */
|
||||
.productReview__subTitle__num {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 리뷰 "도움이 돼요" 색상 설정 */
|
||||
.userReviewItem__like svg,
|
||||
.userReviewItem__like path {
|
||||
fill: #374049;
|
||||
}
|
||||
.userReviewItem__like em {
|
||||
color: #374049;
|
||||
}
|
||||
.userReviewItem__like.selected {
|
||||
background-color: #374049;
|
||||
}
|
||||
|
||||
/* 매장안내 탭 색상 설정 */
|
||||
.storeList__tabBtn.current {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 매장지역 타이틀 색상 설정 */
|
||||
.storeList__subList__title {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 매장상세 타이틀 왼쪽 띠 색상 설정 */
|
||||
.storeDetail__storeName::before {
|
||||
background-color: #374049;
|
||||
}
|
||||
|
||||
/* 매장상세 타이틀 밑줄 색상 설정 */
|
||||
.storeDetail__storeName {
|
||||
border-color: #374049;
|
||||
}
|
||||
|
||||
/* 이벤트 버튼 색상 설정 */
|
||||
.eventDetail__answer__btn {
|
||||
background-color: #374049;
|
||||
}
|
||||
|
||||
/* 브랜드소개 오시는 길 왼쪽띠 색상 설정 */
|
||||
.brandIntroMap__storeName {
|
||||
border-color: #374049;
|
||||
}
|
||||
|
||||
/* 상품 서브리스트 헤더 메뉴 색상 설정 */
|
||||
.header__category__list li.active a {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 게시물 추천, 비추천 색상 설정 */
|
||||
.postLikeBtn svg,
|
||||
.postLikeBtn path {
|
||||
fill: #374049;
|
||||
}
|
||||
|
||||
.postLikeBtn em {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
.postLikeBtn.clicked {
|
||||
background-color: #374049;
|
||||
}/*# sourceMappingURL=theme.css.map */
|
||||
516
build/resources/main/static/sopmall/mobile/css/theme/themeCH.css
Normal file
516
build/resources/main/static/sopmall/mobile/css/theme/themeCH.css
Normal file
@@ -0,0 +1,516 @@
|
||||
@charset "UTF-8";
|
||||
/****** 참다한 테마 컬러 #962020 ******/
|
||||
/* svg 아이콘 테마 색상 설정 */
|
||||
.svg-themeColor {
|
||||
fill: #962020;
|
||||
}
|
||||
|
||||
/* 헤더 로고 사이즈 설정
|
||||
*/
|
||||
.header__home-link {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
/* 헤더 카테고리 탭 색상
|
||||
*/
|
||||
.home-category__item.active a {
|
||||
color: #a62729;
|
||||
}
|
||||
|
||||
.home-category__item.active::after {
|
||||
background-color: #a62729;
|
||||
}
|
||||
|
||||
/* 헤더 장바구니, 마이페이지 아이콘
|
||||
( 사이즈 : 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: #962020;
|
||||
}
|
||||
.menu_navigation_wrap .side_menu > li > ul li > div.on a.hasSub {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 실시간 검색 숫자 색상 설정 */
|
||||
.search-trend__number {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 실시간 검색 상승, 하강 아이콘
|
||||
( 사이즈 : 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: #a62729;
|
||||
}
|
||||
|
||||
/* 헤더 장바구니 상품숫자 Badge 색상 설정 및 위치 조정
|
||||
(아이콘 모양이 달라지면 top, right 로 위치조정 필요할 수 있음)
|
||||
*/
|
||||
.number-badge {
|
||||
background-color: #a62729;
|
||||
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: #962020;
|
||||
}
|
||||
|
||||
/* 상품 이미지 호버시 장바구니 담기 아이콘
|
||||
( 사이즈 : 44x44 또는 그 배수 )
|
||||
*/
|
||||
.icon_product-unit-addToCart {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-image: url(../../images/icon_product-unit-addToCart.png);
|
||||
}
|
||||
|
||||
/* Swiper 테마 컬러(인디케이터 색상) 변경
|
||||
*/
|
||||
:root {
|
||||
--swiper-theme-color: #962020 !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: #962020;
|
||||
}
|
||||
|
||||
.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: #962020;
|
||||
box-shadow: inset 0 -3px 0 0 #962020;
|
||||
}
|
||||
|
||||
/* 이미지 배너타입 화살표 아이콘
|
||||
( 사이즈 : 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: #962020;
|
||||
}
|
||||
|
||||
/* 메인 고객센터 아이콘
|
||||
( 사이즈 : 72x72 또는 그 배수 )
|
||||
*/
|
||||
.icon_notice03 {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
background-image: url(../../images/icon_notice-customer.png);
|
||||
}
|
||||
|
||||
/* 메인 고객센터 번호 색상
|
||||
*/
|
||||
.notice__number {
|
||||
color: #a62729;
|
||||
}
|
||||
|
||||
/* 서브 페이지 헤더 탭 색상
|
||||
*/
|
||||
.headerTab__item.active::after {
|
||||
background-color: #a62729;
|
||||
}
|
||||
|
||||
.headerTab__item.active a {
|
||||
color: #a62729;
|
||||
}
|
||||
|
||||
/* Primary 버튼 색상 */
|
||||
.btn.theme {
|
||||
background-color: #962020;
|
||||
color: #ffffff;
|
||||
}
|
||||
.btn.theme:active {
|
||||
background-color: #851c1c;
|
||||
}
|
||||
.btn.outline.theme {
|
||||
color: #962020;
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
/* 탭 버튼 색상 설정 */
|
||||
.sub-tab__btn.current {
|
||||
background-color: #a62729;
|
||||
border-color: transparent;
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
}
|
||||
.sub-tab__trigger.type02 .sub-tab__btn.current {
|
||||
border-top: 2px solid #a62729;
|
||||
}
|
||||
|
||||
/* 기간 선택 버튼 색상 설정 */
|
||||
.dateRange-btnContainer .dateRange-btn.selected {
|
||||
color: #962020;
|
||||
border: 1px solid #962020;
|
||||
}
|
||||
|
||||
/* 마이페이지 메인 주문/배송 조회 색상 설정 */
|
||||
.orderProgress__list li.current .orderProgress__num {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 마이페이지 배송지 관리 기본 배송지 색상 설정 */
|
||||
.addressManage__itemPerson.current {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 마이페이지 회원등급 제목 색상 설정 */
|
||||
.myMemberRankInfo__title em {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 마이페이지 마일리지 내역 색상 설정 */
|
||||
.mileageStatusCurrent__number {
|
||||
color: #962020;
|
||||
}
|
||||
.mileageStatusCurrent__unit {
|
||||
color: #962020;
|
||||
}
|
||||
.mileageStatusMisc__item--scheduled .mileageStatusMisc__number {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 결제예정금액 색상 설정 */
|
||||
.cartOrderBox__total--final .cartOrderBox__totalTh,
|
||||
.cartOrderBox__total--final .cartOrderBox__totalTd {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
.orderDetail__table > .table .orderDetail__table__sum th,
|
||||
.orderDetail__table > .table .orderDetail__table__sum td {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 주문 상품 마일리지 색상 설정 */
|
||||
.orderInfo__mileageText em {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 주문 결과 상단 타이틀 색상 설정 */
|
||||
.orderCompletedTop__title {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 주문 실패 타이틀, 설명 포인트 색상 설정 */
|
||||
.orderFailed__title em,
|
||||
.orderFailed__text em {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 검색 결과 인기 검색어 숫자 색상 설정 */
|
||||
.resultTrend__num {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 쿠폰 다운로드 색상 설정 */
|
||||
.productCoupon__right {
|
||||
background-color: #962020;
|
||||
}
|
||||
.productCoupon__text {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 회원혜택 회사명 색상 설정 */
|
||||
.productDetailInfo__memberBenefits__title em {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 상세탭 밑줄 색상 설정 */
|
||||
.productDetailTab__item.active::after {
|
||||
background-color: #962020;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 평점 비율 색상 설정 */
|
||||
.productReview__ratingStats__topRating .productReview__ratingStats__fill {
|
||||
background-color: #a62729;
|
||||
}
|
||||
|
||||
.productReview__ratingStats__num {
|
||||
background-color: #a62729;
|
||||
}
|
||||
.productReview__ratingStats__num::before {
|
||||
border-right-color: #a62729;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 건수 색상 설정 */
|
||||
.productReview__subTitle__num {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 리뷰 "도움이 돼요" 색상 설정 */
|
||||
.userReviewItem__like svg,
|
||||
.userReviewItem__like path {
|
||||
fill: #962020;
|
||||
}
|
||||
.userReviewItem__like em {
|
||||
color: #962020;
|
||||
}
|
||||
.userReviewItem__like.selected {
|
||||
background-color: #962020;
|
||||
}
|
||||
|
||||
/* 매장안내 탭 색상 설정 */
|
||||
.storeList__tabBtn.current {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 매장지역 타이틀 색상 설정 */
|
||||
.storeList__subList__title {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 매장상세 타이틀 왼쪽 띠 색상 설정 */
|
||||
.storeDetail__storeName::before {
|
||||
background-color: #962020;
|
||||
}
|
||||
|
||||
/* 매장상세 타이틀 밑줄 색상 설정 */
|
||||
.storeDetail__storeName {
|
||||
border-color: #962020;
|
||||
}
|
||||
|
||||
/* 이벤트 버튼 색상 설정 */
|
||||
.eventDetail__answer__btn {
|
||||
background-color: #962020;
|
||||
}
|
||||
|
||||
/* 브랜드소개 오시는 길 왼쪽띠 색상 설정 */
|
||||
.brandIntroMap__storeName {
|
||||
border-color: #962020;
|
||||
}
|
||||
|
||||
/* 상품 서브리스트 헤더 메뉴 색상 설정 */
|
||||
.header__category__list li.active a {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 게시물 추천, 비추천 색상 설정 */
|
||||
.postLikeBtn svg,
|
||||
.postLikeBtn path {
|
||||
fill: #962020;
|
||||
}
|
||||
|
||||
.postLikeBtn em {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
.postLikeBtn.clicked {
|
||||
background-color: #962020;
|
||||
}/*# sourceMappingURL=theme.css.map */
|
||||
516
build/resources/main/static/sopmall/mobile/css/theme/themeJM.css
Normal file
516
build/resources/main/static/sopmall/mobile/css/theme/themeJM.css
Normal file
@@ -0,0 +1,516 @@
|
||||
themeNC.css@charset "UTF-8";
|
||||
/****** 뉴트리코어 테마 컬러 #591854 ******/
|
||||
/* svg 아이콘 테마 색상 설정 */
|
||||
.svg-themeColor {
|
||||
fill: #591854;
|
||||
}
|
||||
|
||||
/* 헤더 로고 사이즈 설정
|
||||
*/
|
||||
.header__home-link {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
/* 헤더 카테고리 탭 색상
|
||||
*/
|
||||
.home-category__item.active a {
|
||||
color: #E05C7E;
|
||||
}
|
||||
|
||||
.home-category__item.active::after {
|
||||
background-color: #E05C7E;
|
||||
}
|
||||
|
||||
/* 헤더 장바구니, 마이페이지 아이콘
|
||||
( 사이즈 : 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: #591854;
|
||||
}
|
||||
.menu_navigation_wrap .side_menu > li > ul li > div.on a.hasSub {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 실시간 검색 숫자 색상 설정 */
|
||||
.search-trend__number {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 실시간 검색 상승, 하강 아이콘
|
||||
( 사이즈 : 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: #E05C7E;
|
||||
}
|
||||
|
||||
/* 헤더 장바구니 상품숫자 Badge 색상 설정 및 위치 조정
|
||||
(아이콘 모양이 달라지면 top, right 로 위치조정 필요할 수 있음)
|
||||
*/
|
||||
.number-badge {
|
||||
background-color: #E05C7E;
|
||||
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: #591854;
|
||||
}
|
||||
|
||||
/* 상품 이미지 호버시 장바구니 담기 아이콘
|
||||
( 사이즈 : 44x44 또는 그 배수 )
|
||||
*/
|
||||
.icon_product-unit-addToCart {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-image: url(../../images/icon_product-unit-addToCart.png);
|
||||
}
|
||||
|
||||
/* Swiper 테마 컬러(인디케이터 색상) 변경
|
||||
*/
|
||||
:root {
|
||||
--swiper-theme-color: #591854 !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: #591854;
|
||||
}
|
||||
|
||||
.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: #591854;
|
||||
box-shadow: inset 0 -3px 0 0 #591854;
|
||||
}
|
||||
|
||||
/* 이미지 배너타입 화살표 아이콘
|
||||
( 사이즈 : 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: #591854;
|
||||
}
|
||||
|
||||
/* 메인 고객센터 아이콘
|
||||
( 사이즈 : 72x72 또는 그 배수 )
|
||||
*/
|
||||
.icon_notice03 {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
background-image: url(../../images/icon_notice-customer.png);
|
||||
}
|
||||
|
||||
/* 메인 고객센터 번호 색상
|
||||
*/
|
||||
.notice__number {
|
||||
color: #E05C7E;
|
||||
}
|
||||
|
||||
/* 서브 페이지 헤더 탭 색상
|
||||
*/
|
||||
.headerTab__item.active::after {
|
||||
background-color: #E05C7E;
|
||||
}
|
||||
|
||||
.headerTab__item.active a {
|
||||
color: #E05C7E;
|
||||
}
|
||||
|
||||
/* Primary 버튼 색상 */
|
||||
.btn.theme {
|
||||
background-color: #591854;
|
||||
color: #ffffff;
|
||||
}
|
||||
.btn.theme:active {
|
||||
background-color: #AE6A9B;
|
||||
}
|
||||
.btn.outline.theme {
|
||||
color: #591854;
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
/* 탭 버튼 색상 설정 */
|
||||
.sub-tab__btn.current {
|
||||
background-color: #E05C7E;
|
||||
border-color: transparent;
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
}
|
||||
.sub-tab__trigger.type02 .sub-tab__btn.current {
|
||||
border-top: 2px solid #E05C7E;
|
||||
}
|
||||
|
||||
/* 기간 선택 버튼 색상 설정 */
|
||||
.dateRange-btnContainer .dateRange-btn.selected {
|
||||
color: #591854;
|
||||
border: 1px solid #591854;
|
||||
}
|
||||
|
||||
/* 마이페이지 메인 주문/배송 조회 색상 설정 */
|
||||
.orderProgress__list li.current .orderProgress__num {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 마이페이지 배송지 관리 기본 배송지 색상 설정 */
|
||||
.addressManage__itemPerson.current {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 마이페이지 회원등급 제목 색상 설정 */
|
||||
.myMemberRankInfo__title em {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 마이페이지 마일리지 내역 색상 설정 */
|
||||
.mileageStatusCurrent__number {
|
||||
color: #591854;
|
||||
}
|
||||
.mileageStatusCurrent__unit {
|
||||
color: #591854;
|
||||
}
|
||||
.mileageStatusMisc__item--scheduled .mileageStatusMisc__number {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 결제예정금액 색상 설정 */
|
||||
.cartOrderBox__total--final .cartOrderBox__totalTh,
|
||||
.cartOrderBox__total--final .cartOrderBox__totalTd {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
.orderDetail__table > .table .orderDetail__table__sum th,
|
||||
.orderDetail__table > .table .orderDetail__table__sum td {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 주문 상품 마일리지 색상 설정 */
|
||||
.orderInfo__mileageText em {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 주문 결과 상단 타이틀 색상 설정 */
|
||||
.orderCompletedTop__title {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 주문 실패 타이틀, 설명 포인트 색상 설정 */
|
||||
.orderFailed__title em,
|
||||
.orderFailed__text em {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 검색 결과 인기 검색어 숫자 색상 설정 */
|
||||
.resultTrend__num {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 쿠폰 다운로드 색상 설정 */
|
||||
.productCoupon__right {
|
||||
background-color: #591854;
|
||||
}
|
||||
.productCoupon__text {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 회원혜택 회사명 색상 설정 */
|
||||
.productDetailInfo__memberBenefits__title em {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 상세탭 밑줄 색상 설정 */
|
||||
.productDetailTab__item.active::after {
|
||||
background-color: #591854;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 평점 비율 색상 설정 */
|
||||
.productReview__ratingStats__topRating .productReview__ratingStats__fill {
|
||||
background-color: #E05C7E;
|
||||
}
|
||||
|
||||
.productReview__ratingStats__num {
|
||||
background-color: #E05C7E;
|
||||
}
|
||||
.productReview__ratingStats__num::before {
|
||||
border-right-color: #E05C7E;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 건수 색상 설정 */
|
||||
.productReview__subTitle__num {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 리뷰 "도움이 돼요" 색상 설정 */
|
||||
.userReviewItem__like svg,
|
||||
.userReviewItem__like path {
|
||||
fill: #591854;
|
||||
}
|
||||
.userReviewItem__like em {
|
||||
color: #591854;
|
||||
}
|
||||
.userReviewItem__like.selected {
|
||||
background-color: #591854;
|
||||
}
|
||||
|
||||
/* 매장안내 탭 색상 설정 */
|
||||
.storeList__tabBtn.current {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 매장지역 타이틀 색상 설정 */
|
||||
.storeList__subList__title {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 매장상세 타이틀 왼쪽 띠 색상 설정 */
|
||||
.storeDetail__storeName::before {
|
||||
background-color: #591854;
|
||||
}
|
||||
|
||||
/* 매장상세 타이틀 밑줄 색상 설정 */
|
||||
.storeDetail__storeName {
|
||||
border-color: #591854;
|
||||
}
|
||||
|
||||
/* 이벤트 버튼 색상 설정 */
|
||||
.eventDetail__answer__btn {
|
||||
background-color: #591854;
|
||||
}
|
||||
|
||||
/* 브랜드소개 오시는 길 왼쪽띠 색상 설정 */
|
||||
.brandIntroMap__storeName {
|
||||
border-color: #591854;
|
||||
}
|
||||
|
||||
/* 상품 서브리스트 헤더 메뉴 색상 설정 */
|
||||
.header__category__list li.active a {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 게시물 추천, 비추천 색상 설정 */
|
||||
.postLikeBtn svg,
|
||||
.postLikeBtn path {
|
||||
fill: #591854;
|
||||
}
|
||||
|
||||
.postLikeBtn em {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
.postLikeBtn.clicked {
|
||||
background-color: #591854;
|
||||
}/*# sourceMappingURL=theme.css.map */
|
||||
516
build/resources/main/static/sopmall/mobile/css/theme/themeNC.css
Normal file
516
build/resources/main/static/sopmall/mobile/css/theme/themeNC.css
Normal file
@@ -0,0 +1,516 @@
|
||||
@charset "UTF-8";
|
||||
/****** 뉴트리코어 테마 컬러 #78B857 ******/
|
||||
/* svg 아이콘 테마 색상 설정 */
|
||||
.svg-themeColor {
|
||||
fill: #78B857;
|
||||
}
|
||||
|
||||
/* 헤더 로고 사이즈 설정
|
||||
*/
|
||||
.header__home-link {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
/* 헤더 카테고리 탭 색상
|
||||
*/
|
||||
.home-category__item.active a {
|
||||
color: #86c860;
|
||||
}
|
||||
|
||||
.home-category__item.active::after {
|
||||
background-color: #86c860;
|
||||
}
|
||||
|
||||
/* 헤더 장바구니, 마이페이지 아이콘
|
||||
( 사이즈 : 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: #78B857;
|
||||
}
|
||||
.menu_navigation_wrap .side_menu > li > ul li > div.on a.hasSub {
|
||||
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;
|
||||
}
|
||||
|
||||
/* 하단 탭바 아이콘
|
||||
( 사이즈 : 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: #86c860;
|
||||
}
|
||||
|
||||
/* 헤더 장바구니 상품숫자 Badge 색상 설정 및 위치 조정
|
||||
(아이콘 모양이 달라지면 top, right 로 위치조정 필요할 수 있음)
|
||||
*/
|
||||
.number-badge {
|
||||
background-color: #86c860;
|
||||
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: #78B857;
|
||||
}
|
||||
|
||||
/* 상품 이미지 호버시 장바구니 담기 아이콘
|
||||
( 사이즈 : 44x44 또는 그 배수 )
|
||||
*/
|
||||
.icon_product-unit-addToCart {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-image: url(../../images/icon_product-unit-addToCart.png);
|
||||
}
|
||||
|
||||
/* Swiper 테마 컬러(인디케이터 색상) 변경
|
||||
*/
|
||||
:root {
|
||||
--swiper-theme-color: #78B857 !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: #78B857;
|
||||
}
|
||||
|
||||
.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: #78B857;
|
||||
box-shadow: inset 0 -3px 0 0 #78B857;
|
||||
}
|
||||
|
||||
/* 이미지 배너타입 화살표 아이콘
|
||||
( 사이즈 : 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: #78B857;
|
||||
}
|
||||
|
||||
/* 메인 고객센터 아이콘
|
||||
( 사이즈 : 72x72 또는 그 배수 )
|
||||
*/
|
||||
.icon_notice03 {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
background-image: url(../../images/icon_notice-customer.png);
|
||||
}
|
||||
|
||||
/* 메인 고객센터 번호 색상
|
||||
*/
|
||||
.notice__number {
|
||||
color: #86c860;
|
||||
}
|
||||
|
||||
/* 서브 페이지 헤더 탭 색상
|
||||
*/
|
||||
.headerTab__item.active::after {
|
||||
background-color: #86c860;
|
||||
}
|
||||
|
||||
.headerTab__item.active a {
|
||||
color: #86c860;
|
||||
}
|
||||
|
||||
/* Primary 버튼 색상 */
|
||||
.btn.theme {
|
||||
background-color: #78B857;
|
||||
color: #ffffff;
|
||||
}
|
||||
.btn.theme:active {
|
||||
background-color: #6db04a;
|
||||
}
|
||||
.btn.outline.theme {
|
||||
color: #78B857;
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
/* 탭 버튼 색상 설정 */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 기간 선택 버튼 색상 설정 */
|
||||
.dateRange-btnContainer .dateRange-btn.selected {
|
||||
color: #78B857;
|
||||
border: 1px solid #78B857;
|
||||
}
|
||||
|
||||
/* 마이페이지 메인 주문/배송 조회 색상 설정 */
|
||||
.orderProgress__list li.current .orderProgress__num {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 마이페이지 배송지 관리 기본 배송지 색상 설정 */
|
||||
.addressManage__itemPerson.current {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 마이페이지 회원등급 제목 색상 설정 */
|
||||
.myMemberRankInfo__title em {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 마이페이지 마일리지 내역 색상 설정 */
|
||||
.mileageStatusCurrent__number {
|
||||
color: #78B857;
|
||||
}
|
||||
.mileageStatusCurrent__unit {
|
||||
color: #78B857;
|
||||
}
|
||||
.mileageStatusMisc__item--scheduled .mileageStatusMisc__number {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 결제예정금액 색상 설정 */
|
||||
.cartOrderBox__total--final .cartOrderBox__totalTh,
|
||||
.cartOrderBox__total--final .cartOrderBox__totalTd {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
.orderDetail__table > .table .orderDetail__table__sum th,
|
||||
.orderDetail__table > .table .orderDetail__table__sum td {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 주문 상품 마일리지 색상 설정 */
|
||||
.orderInfo__mileageText em {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 주문 결과 상단 타이틀 색상 설정 */
|
||||
.orderCompletedTop__title {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 주문 실패 타이틀, 설명 포인트 색상 설정 */
|
||||
.orderFailed__title em,
|
||||
.orderFailed__text em {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 검색 결과 인기 검색어 숫자 색상 설정 */
|
||||
.resultTrend__num {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 쿠폰 다운로드 색상 설정 */
|
||||
.productCoupon__right {
|
||||
background-color: #78B857;
|
||||
}
|
||||
.productCoupon__text {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 회원혜택 회사명 색상 설정 */
|
||||
.productDetailInfo__memberBenefits__title em {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 상세탭 밑줄 색상 설정 */
|
||||
.productDetailTab__item.active::after {
|
||||
background-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;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 건수 색상 설정 */
|
||||
.productReview__subTitle__num {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 리뷰 "도움이 돼요" 색상 설정 */
|
||||
.userReviewItem__like svg,
|
||||
.userReviewItem__like path {
|
||||
fill: #78B857;
|
||||
}
|
||||
.userReviewItem__like em {
|
||||
color: #78B857;
|
||||
}
|
||||
.userReviewItem__like.selected {
|
||||
background-color: #78B857;
|
||||
}
|
||||
|
||||
/* 매장안내 탭 색상 설정 */
|
||||
.storeList__tabBtn.current {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 매장지역 타이틀 색상 설정 */
|
||||
.storeList__subList__title {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 매장상세 타이틀 왼쪽 띠 색상 설정 */
|
||||
.storeDetail__storeName::before {
|
||||
background-color: #78B857;
|
||||
}
|
||||
|
||||
/* 매장상세 타이틀 밑줄 색상 설정 */
|
||||
.storeDetail__storeName {
|
||||
border-color: #78B857;
|
||||
}
|
||||
|
||||
/* 이벤트 버튼 색상 설정 */
|
||||
.eventDetail__answer__btn {
|
||||
background-color: #78B857;
|
||||
}
|
||||
|
||||
/* 브랜드소개 오시는 길 왼쪽띠 색상 설정 */
|
||||
.brandIntroMap__storeName {
|
||||
border-color: #78B857;
|
||||
}
|
||||
|
||||
/* 상품 서브리스트 헤더 메뉴 색상 설정 */
|
||||
.header__category__list li.active a {
|
||||
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