# Bbokki\_PC 스킨 가이드

> 공통

<details>

<summary>포인트 컬러 일괄 변경하기</summary>

1. 컬러코드값 확인\
   Bbokki 스킨에 적용되어 있는 기본 컬러 코드 **#DF3842**을 확인합니다. \
   ![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FwsWXoE1h693Fostvmufv%2Fimage.png?alt=media\&token=f72bd85d-3d2b-433e-9e26-b1b6419b1554)<br>
2. **관리자 > 디자인 메뉴 접속** &#x20;
3. **스타일시트/CSS 변경** \
   좌측 하단 폴더트리 내 스타일시트/CSS를 더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\
   ![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FOiw1a48VhmI7JUnPPwXi%2Fimage.png?alt=media\&token=58fa407b-f159-4e20-a612-8ba6d1f157ee)<br>
4. ctrl+F 검색 후 수정하기\
   common 폴더를 더블클릭하여 내에 있는 common.css 스타일시트 파일을 열어 **Ctrl + F(검색)**&#xB97C; 누르고 **#DF3842**를 검색하여 **원하는 포인트 컬러 코드**로 변경할 수 있습니다.
5. 나머지 포인트 컬러도 검색하여 **원하는 포인트 컬러 코드**로 변경할 수 있습니다.
   1. 기본 컬러 코드 : **#DF3842**
   2. 기본 컬러 마우스 오버 코드 : **#C5000C**
   3. 서브 컬러 코드 : **#FEFFD5**
   4. 중립적 컬러 코드 : **#D2D2D2**, **#2B2B2B**

</details>

<details>

<summary>메뉴 변경하기</summary>

1. 상단 메뉴의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. (현재는 포인트 컬러로 지정되어 있습니다.)

**css > layout/layout.css**

```css
.top_member_box > li > a,
.top_member_box > li .top_mypage_cont .top_mypage_tit a{
    display:inline-block;
    font-size:16px;
    font-weight:500;
    color:var(--neutrals-dark);
}
```

2. 장바구니 담긴상품 수량 폰트의 **color(색상)** 값을 변경할 수 있습니다.\
   (현재는 포인트 컬러로 지정되어 있습니다.)

**css > layout/layout.css**

```css
.top_member_box > li strong { 
    color:var(--primary-default);
}
```

3. 상단 메뉴 하단의 **color(색상)** 값을 변경할 수 있습니다.

**css > layout/layout.css**&#x20;

```css
#header { 
    position: relative;
    background-color: #fff;
}
```

4. 전체보기 메뉴의 **background-color(배경)** 값을 변경할 수 있습니다.

**css > layout/layout.css**&#x20;

```css
.btn_all_menu_open { 
    position: relative; 
    width: 28px; 
    height: 28px; 
    background-color: transparent; 
}
```

5. 카테고리 메뉴의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다.

**css > layout/layout.css**&#x20;

```css
.header_gnb .gnb_allmenu_box a,
.header_gnb .gnb_allmenu_box button { 
	display: block;
	width: 100%;
	height: 64px;
	line-height: 64px;
	color: var(--neutrals-dark);
	font-size: 24px;
	font-weight: 400;
	text-align: left; 
}
```

6. 카테고리 메뉴 마우스 오버시의 **background(배경), color(색상)** 값을 변경할 수 있습니다. (현재는 포인트 컬러로 지정되어 있습니다.)

**css > layout/layout.css**

```css
.header_gnb .gnb_allmenu_box li:hover,
.header_gnb .gnb_allmenu_box li.is-open > button:hover { 
    background-color:var(--secondary-default);
    color: var(--neutrals-dark);
}
```

</details>

<details>

<summary>검색창 폰트 변경하기</summary>

검색창 인풋박스 입력 폰트의 **font-size(크기)** 값을 변경할 수 있습니다.

**css/common/common.css**

```css
#header .top_search .top_text_cont .top_srarch_text {
    display: block;
    float: right;
    width: 34px;
    height: 34px;
    border: 1px solid var(--neutrals-dark);
    border-radius: 8px 8px;
    box-sizing: border-box;
    -moz-transition: all 0.35s;
    -webkit-transition: all 0.35s;
    text-indent: -9999px;
}
```

2\. 최근검색어 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다.\
**css/common/common.css**

```css
.recent_box dt {
    font-size: 13px;
    margin-bottom: 10px;
    font-weight: bold;
}
```

3\. 추천상품 폰트의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다.

**css/common/common.css**

```css
.recom_box dt {
    width: 100%;
    font-size: 13px;
    font-weight: var(--font-bold);
    line-height: 19px;
    text-align: center;
    margin-bottom: 10px;
}
```

</details>

<details>

<summary>푸터 변경하기 (폰트/컬러)</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FeRaQnPnxgFiQKIRBdDwv%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-12-05%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.39.06.png?alt=media\&token=e7025406-8352-48ca-8c80-e92eb451b518)

1\. 푸터 메뉴 폰트의 **color(색상), 왼쪽 선** 값을 변경할 수 있습니다.

**css/layout/layout.css**

(1) 색상

```css
.foot_list ul li a { 
    position: relative;
    font-size: 16px;
    font-weight: 700;
    padding:0 15px 0 14px;
    color:#fff;
}
```

(2) 선 => background를 수정해주세요.

<pre class="language-css"><code class="lang-css"><strong>.foot_list ul li:nth-child(n + 2) a::before {
</strong>    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 1px;
    height: 12px;
    background: #fff
}
</code></pre>

2\. 푸터 정보영역 폰트의 **color(색상), font-size(크기), line-height(행간)** 값을 변경할 수 있습니다.&#x20;

**css/layout/layout.css**

```css
.foot_cont { 
    overflow:hidden;
    padding:35px 0 35px 0;
    font-size:12px;
    line-height:1.8;
}
```

</details>

<details>

<summary>웹폰트 적용하기</summary>

1\. **관리자 페이지 > 디자인 메뉴**에 접속합니다.

2\. 좌측 하단 폴더트리 내 “**스타일시트/CSS**”를 더블 클릭하여 스타일시트 리스트 중 **reset.css**를 오픈하세요.

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FqYbiUysVXRkXtQxIt86N%2Fimage.png?alt=media\&token=7c0bd069-e78e-4431-b01e-9a0542933340)

3\. reset.css 스타일시트의 5번째 줄에 @import url(’외부 스타일시트 경로’)을 추가합니다.

**스타일시트 > reset.css | css/reset.css**

```css
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
/* 5번째줄에 추가 */
```

4\. 8번째 줄의 font-family의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Nanum Gothic(변경할 폰트명)으로 수정하세요.\
(한글 폰트 파일명의 경우 " "입력)

**스타일시트 > reset.css | css/reset.css**

```css
 .godo * {
   font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  }
```

<mark style="color:red;">※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.</mark>

</details>

> 메인

<details>

<summary>고객센터, 뱅킹 정보 변경하기(폰트, 컬러, 크기)</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FNN7hKYezdsEEWpLiH0MZ%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-12-06%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.20.38.png?alt=media\&token=24baf9c9-d855-45ea-b649-2daaf201a183)

1\. 고객센터 폰트의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다.

**layout > layout.css | css/layout/layout.css**

```css
.content_info h3 {
    display: inline-block;
    min-width: 60px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
} /* color값은 디자인가이드에 맞게 사용 */
```

2\. 고객센터 이용시간 폰트의 **color(색상)** 값을 변경할 수 있습니다.

**layout > layout.css | css/layout/layout.css**

```css
.content_info .cs_center p {
   margin-top: 12px;
   color: #fff;
   line-height: 20px;
}
```

3\. 숫자 폰트의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다.

**layout > layout.css | css/layout/layout.css**

```css
.content_info .bank_info strong {
    color:#fff;
    font-weight: 400;
}
```

4\. 은행이름 폰트의 **color(색상)** 값을 변경할 수 있습니다.

**layout > layout.css | css/layout/layout.css**

```css
.content_info .bank_info em {
    font-weight:400;
}
```

</details>

<details>

<summary>최근 본 상품 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FjZG2ai8MA2UczvSceYHU%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-12-06%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.22.14.png?alt=media\&token=a4846e4b-2b03-4b17-930a-e13c4e2e6909)

1\. 최근 본 상품 영역의 **background(배경)** 값을 변경할 수 있습니다.

**layout > layout.css | css/layout/layout.css**

```css
.scroll_right_cont {
    float:left;
    min-width:72px;
    padding:0px;
    background:none;
    color: #333;
}
```

2\. 타이틀 폰트의 **color(색상), text-align(정렬)** 값을 변경할 수 있습니다.

**layout > layout.css | css/layout/layout.css**

```css
.scroll_right_cont h4 {
    padding:0;
    font-size: 11px;
    color: var(--neutrals-dark);
    font-weight: 700;
    text-align:center;
}
```

3\. 최근 본 상품 오버시 **border(선), background(배경)** 값을 변경할 수 있습니다.

**layout > layout.css | css/layout/layout.css**

```css
.scroll_right_cont .src_box {
    position:absolute;
    top:0;
    right:74px;
    width:max-content;
    height:100%;
    padding:5px 5px 0 7px;
    border:1px solid #999999;
    background:#ffffff;
    text-align:left;
    z-index:10;
}
```

4\. 상품 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다.

**layout > layout.css | css/layout/layout.css**

```css
.scroll_right_cont .src_box strong {
    display: block;
    color: var(--primary-default);
}
```

5\. 페이징 폰트의**color(색상)** 값을 변경할 수 있습니다.

**layout > layout.css | css/layout/layout.css**

```css
.scroll_right_cont .scr_paging strong {
    padding: 0 2px 0 2px;
    color: var(--primary-default);
}
```

</details>

<details>

<summary>진열타입 타이틀 변경하기(폰트/컬러)</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F63qoAe00va2nZI9rIjv1%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-12-06%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.23.43.png?alt=media\&token=62ff6b92-eb07-4927-b7cc-453a7f419f09)

1\. 타이틀 폰트의**font-size(크기)** 값을 변경할 수 있습니다.

**goods > list.css | css/goods/list.css**

```css
.goods_list_tit h3 {
    font-size:48px;
    font-weight:700;
}
```

2\. 타이틀 영역 하단의 **border-bottom(선)** 값을 변경할 수 있습니다.

**goods > list.css | css/goods/list.css**

```css
.goods_list_tit {
    padding:110px 0 10px 0;
    /* border-bottom:1px solid #ececec;*/ 
    line-height:1;
    position:relative;
}
```

3\. 더보기 버튼의 **font-size(크기), font-weight(굵기), border(선)** 값을 변경할 수 있습니다.

**goods > list.css | css/goods/list.css**

```css
.btn_goods_more .btn_goods_view_more {
    padding:2px 5px 3px 5px;
    font-size:24px;
    font-weight:400;
    border:0px solid #dbdbdb;
    color: var(--primary-default);
}
```

</details>

<details>

<summary>상품 리스트 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FkdB3sbJZaFlWGUdETRBx%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-12-06%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.25.34.png?alt=media\&token=666a1cb9-3227-4fc5-a5d7-03e76ab1659e)

1\. 상품 이미지의 **text-align(정렬), color(색상)** 값을 변경할 수 있습니다.

**goods > list.css  | css/goods/list.css**

```css
.item_cont {
    padding: 0 10px;
    text-align: left;
    color: #1c1c1c;
    margin-top:20px;
}
```

2\. 상품명 폰트의 **font-size(크기)** 값을 변경할 수 있습니다.

**goods > list.css  | css/goods/list.css**

```css
.item_tit_box .item_name {
    display:block;
    padding:0;
    font-size:16px;
    font-weight: normal;
    white-space: nowwrap;
    text-overflow: ellipsis;
    overflow:hidden;
    line-height:22px;
    color: var(--neutrals-dark);
}
```

3\. 정상가격 폰트의 **color(색상)** 값을 변경할 수 있습니다.

**goods > list.css  | css/goods/list.css**

```css
.item_money_box del {
    display: block;
    color: #888888;
}
```

4\. 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다.

**goods > list.css  | css/goods/list.css**

```css
.item_money_box .item_price {
    /*display:block;*/
    padding:0px;
    font-size:16px;
    color:var(--neutrals-dark);
    font-weight:bold;
}
```

</details>

> 상품상세

<details>

<summary>상품 상세 상단 변경하기(폰트)</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FX5ImkHppPj6d8InI2tRP%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-12-06%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.26.44.png?alt=media\&token=f7296eb5-7b4a-433a-a107-ef8604ebd68b)

1\.  상품명 폰트의 **font-size(크기)** 값을 변경할 수 있습니다.

**goods >  goods.css | css/goods/goods.css**

```css
.item_detail_tit h3 {
    width:405px;
    font-size:18px;
    word-break: break-all;
}
```

2\.  상품 정보 타이틀 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다.

**goods >  goods.css | css/goods/goods.css**

```css
.item_detail_list dt {
    float:left;
    width:80px;
    margin:0 10px 0 0;
    color:#888888;
    font-weight:normal;
    word-wrap:break-word;
}
```

3\.  상품 가격 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다.

**goods >  goods.css | css/goods/goods.css**

```css
.item_price dd {
    margin: -2px 0 0 0;
    font-size: 16px;
    font-weight: bold;
}
```

4\.  총 합계금액 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다.

**goods >  goods.css | css/goods/goods.css**

```css
.item_tatal_box .total_amount dt {
    font-size: 16px;
    font-weight: bold;
}
```

5\.  총 합계금액 가격 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다.

**goods >  goods.css | css/goods/goods.css**

```css
.item_tatal_box .total_amount dd {
    color:var(--primary-default);
    font-weight:bold;
}
```

6\. 총 합계금액 가격 폰트의 **font-size(크기)** 값을 변경할 수 있습니다.

**goods >  goods.css | css/goods/goods.css**

```css
.item_tatal_box .total_amount dd strong {
    font-size: 20px;
}
```

</details>

<details>

<summary>상품 상세 상단 변경하기(버튼)</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FX5ImkHppPj6d8InI2tRP%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-12-06%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.26.44.png?alt=media\&token=f7296eb5-7b4a-433a-a107-ef8604ebd68b)

1\.  공유하기 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다.

**스타일시트 >  button.css | css/button.css**

```css
.btn_gray_list a, .btn_gray_list button {
    display:inline-block;
    padding:0 0 0 11px;
    border:1px solid #999;
    vertical-align:middle;
}
```

2\.  조건별 배송 버튼의 **font-size(크기), background(배경)** 값을 변경할 수 있습니다.

**스타일시트 >  button.css | css/button.css**

```css
.btn_gray_list .btn_gray_small {
    font-size:11px;
}
```

3\.  장바구니 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다.

**스타일시트 >  button.css | css/button.css**

```css
.btn_add_cart, .btn_add_wish {
    display:inline-block;
    width:152px;
    height:52px;
    margin:0 0 0 6px;
    padding:0 10px 0 10px;
    color:#3e3d3c;
    font-size:16px;
    border:1px solid #cccccc;
    background:#ffffff;
    text-align:center;
    font-weight:400;
}
```

4\.  바로구매 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다.

**스타일시트 >  button.css | css/button.css**

```css
.btn_add_order,
.btn_add_order_related,
.btn_add_cart_related {
    display:inline-block;
    width:230px;
    height:52px;
    margin:0 0 0 6px;
    padding:0 10px 0 10px;
    color:#ffffff;
    font-size:16px;
    border:1px solid var(--primary-default);
    background:var(--primary-default);
    text-align:center;
    font-weight:400;
}
```

</details>

<details>

<summary>상품 상세 상단 변경하기(라인)</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FX5ImkHppPj6d8InI2tRP%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-12-06%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.26.44.png?alt=media\&token=f7296eb5-7b4a-433a-a107-ef8604ebd68b)

1\.  셀렉트 영역의 **border(선), background(배경)** 값을 변경할 수 있습니다.

**layout >  layout.css | css/layout/layout.css**

```css
.location_select {
    display:inline-block;
    position:relative;
    min-width:150px;
    margin:7px 0 0 0;
    border:1px solid #999999;
    background:#ffffff;
    z-index:50;
}
```

2\.  상품명 아래  **border-bottom(선) 값을** 변경할 수 있습니다.

**goods >  goods.css | css/goods/goods.css**

```css
.item_detail_tit {
    position: relative;
    padding: 0 0 10px 0;
    border-bottom: 1px solid #dbdbdb;
}
```

3\.  리스트 항목 구분선의  **border-top(선) 값을** 변경할 수 있습니다.

&#x20;**goods >  goods.css | css/goods/goods.css**

```css
.item_add_option_box {
    float: left;
    margin: 5px 0 0 0;
    padding: 10px 0 5px 0;
    border-top: 1px solid #dbdbdb;
}
```

\
4\.  선택한 옵션 영역의  **border-bottom(선) 값을** 변경할 수 있습니다.

**layout >  layout.css | css/layout/layout.css**

```css
.item_detail_list + .item_choice_list table {
    width: 100%;
    border-bottom: 1px solid #999999;
}
```

5. 선택한 옵션영역의 background(배경) 값을 변경할 수 있습니다.

**layout > layout.css | css/layout/layout.css**

```css
.item_choice_list table {
    width: 100%;
    background: #f5f5f5;
}
```

6. 총 합계금액 구분 영역의 border-top(선) 값을 변경할 수 있습니다.

**goods > goods.css | css/goods/goods.css**

```css
.item_tatal_box .total_amount {
    margin: 15px 0 0 0;
    padding-top: 10px;
    border-top: 1px solid #dbdbd
```

</details>

<details>

<summary>상품 상세 탭 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FiYzP808orv58uzgUjaN7%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-12-06%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.29.10.png?alt=media\&token=b9165f32-db33-4927-af90-244f7d0674dc)

1\. 상품 상세 탭 선택시 **color(색상), font-weight(굵기), border(선)** 값을 변경할 수 있습니다.

**goods> goods.css | css/goods/goods.css**

```css
.item_goods_tab li.on a {
    padding-top: 18px;
    margin-top: 8px;
    color: #333333;
    font-weight: bold;
    border: 1px solid #bbbbbb;
    border-bottom: 1px solid #ffffff;
}
```

2\. 글 등록 수량 폰트의 **color(색상)** 값을 변경할 수 있습니다.

**goods> goods.css | css/goods/goods.css**

```css
.item_goods_tab li a strong {
    color: var(--primary-default);
}
```

</details>

<details>

<summary>상품 상세 상품문의 영역-<strong>리스트</strong> 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F1IAfgunxfVqEVwZqtBvh%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-12-06%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.41.22.png?alt=media\&token=25bdf088-28b7-499c-b08e-7a7117ff8bb0)

1\. 상품 문의 타이틀 폰트의 **font-size(크기)** 값을 변경할 수 있습니다.

**goods> goods.css | css/goods/goods.css**

```css
.item_goods_sec h3 {
    padding: 45px 0 10px 0;
    font-size: 18px;
}
```

2\. 상품문의 전체보기 버튼의 **color(색상),  font-weight(굵기), border(선), background(배경), text-align(정렬)** 값을 변경할 수 있습니다.

**스타일시트> button.css | css/button.css**

```css
.btn_reviews_more, .btn_qna_more {
    display: inline-block;
    min-width: 120px;
    padding: 10px 10px 10px 10px;
    color: #ab3e55;
    font-weight: 400;
    border: 1px solid #cccccc;
    background: #ffffff;
    text-align: center;
}
```

3\. 상품문의 글쓰기 버튼의 **color(색상),  font-weight(굵기), border(선), background(배경), text-align(정렬)** 값을 변경할 수 있습니다.

**스타일시트> button.css | css/button.css**

```css
.btn_reviews_write, .btn_qna_write {
    display: inline-block;
    min-width: 120px;
    padding: 10px 10px 10px 10px;
    color: #ffffff;
    font-weight: 400;
    border: 1px solid var(--primary-default);
    background: var(--primary-default);
    text-align: center;
}
```

4\. 페이징 버튼의 **color(색상),  font-weight(굵기), border(선)** 값을 변경할 수 있습니다.

**스타일시트> common.css | css/common.css**

```css
.pagination .on {
    color: #333;
    font-weight: bold;
```

</details>

<details>

<summary>상품 상세 상품문의 영역-리스트 내용 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FXVNsdtm7bPbApt9chxE0%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-12-06%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.40.06.png?alt=media\&token=9c9d5cdf-4e09-4a71-b281-8f52dac4de31)

1\. 수정 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다.

**스타일시트> button.css  | css/button.css**

```css
.btn_gray_list a, .btn_gray_list button {
    display: inline-block;
    padding: 0 0 0 11px;
    border: 1px solid #999;
    vertical-align: middle;
}
```

2\. 상품문의 내용 펼침 영역의 **background(배경)** 값을 변경할 수 있습니다.

**goods> goods.css  | css/goods/goods.css**

```css
.qna_new_box {
    text-align: left;
    background: #f8f8f8;
}
```

</details>

> 주문결제

<details>

<summary>장바구니 타이틀 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F70BBAakGwfBw4EQFerbO%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-10-16%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.08.53.png?alt=media\&token=e97de53f-8a14-4a87-a22e-e67b47a6f6aa)

1\. 장바구니 타이틀 폰트의 **color(색상), font-size(크기), color(색상)** 값을 변경할 수 있습니다.

**order> order.css | css/order/order.css**

```css
.order_wrap .order_tit h2 {
    float: left;
    font-size: 28px;
    color: #222222;
}
```

\
2\. 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다.

**order> order.css | css/order/order.css**

```css
.order_wrap .order_tit .page_on {
    color: #000;
    font-weight: bold;
}
```

3\. 다음 진행 스텝 표시 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다.

**order> order.css | css/order/order.css**

```css
.order_wrap .order_tit ol li {
    float: left;
    font-size: 14px;
    color: #d1d1d1;
}
```

4\. 장바구니 타이틀 폰트 하단의  **border-bottom(선)** 값을 변경할 수 있습니다.

**order> order.css | css/order/order.css**

```css
.order_wrap .order_tit {
    overflow: hidden;
    border-bottom: 1px solid #dbdbdb;
}
```

</details>

<details>

<summary>주문서 작성/결제 화면 변경하기</summary>

**주문서 금액 변경하기**

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2Fk46FcXbNz1l3xSuDwvbL%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-12-06%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.45.11.png?alt=media\&token=d5249899-7f93-4e2b-8a28-a1c346cd65ad)

\- 상품금액/배송비/합계 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다.

**스타일시트 > order.css | css/order/order.css**

```css
.price_sum_cont .price_sum_list dd {
    color:#000;
}
```

```css
.price_sum_cont .price_sum_list dd strong {
    font-weight:700;
    font-size:18px;
    color:#000;
}
```

**최종결제금액, 결제하기 버튼 변경하기**

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2Fvr9fFqaXXjcHkszSAwi1%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-12-06%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.44.18.png?alt=media\&token=5d97cf09-6f22-4e30-bf22-21961f3225a1)

1\. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다.

**스타일시트 > order.css | css/order/order.css**

```css
.payment_final_total dd {
    display:inline-block;
    font-size:30px;
    color:var(--primary-default);
}
```

2\. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경할 수 있습니다.

**스타일시트 > button.css | css/button.css**

```css
.btn_order_buy {
    display:inline-block;
    width:300px;
    height:61px;
    line-height:59px;
    color:#fff;
    font-size:20px;
    border:1px solid var(--primary-default);
    background:var(--primary-default);
    text-align:center;
}
```

</details>

<details>

<summary>장바구니 폰트/버튼 변경하기(컬러/사이즈/굵기)</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F6OGCKRqCt3uQG7QhZF3c%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-12-06%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.47.18.png?alt=media\&token=2ef0b7ac-85f6-46ae-8f0d-615b057c92d8)

1\. 장바구니 상품금액/배송비/최종 결제금액의 **color(색상), font-size(사이즈), font-weight(굵기)** 값을 변경할 수 있습니다.

**스타일시트 > order.css | css/order/order.css**

```css
.price_sum_cont .price_sum_list dd {
    color:#000;
}
```

```css
.price_sum_cont .price_sum_list dd strong {
    font-weight:700;
    font-size:18px;
    color:#000;
}
```

2\. 선택상품주문 버튼은 마우스 오버 전(.btn\_order\_choice\_buy) 과 오버 시(.btn\_order\_choice\_buy:hover)의 **border(선), font-size(사이즈), color(색상)** 값으로 각각 변경할 수 있습니다.

**스타일시트 > button.css | css/order/button.css**

```css
.btn_order_choice_buy { 
    min-width:190px;
    height:55px;
    padding:0 20px 0 20px;
    color:#3e3d3c;
    font-weight:bold;
    font-size:14px;
    border:1px solid #cccccc;
    background:#fff;
    cursor:pointer;
}
```

```css
.btn_order_choice_buy:hover {
    color:#333333;
    border:1px solid #bbbbbb;
}
```

3\. 전체상품주문 버튼은 마우스 오버 전(.btn\_order\_whole\_buy) 과 오버 시(.btn\_order\_whole\_buy:hover) 의 **background(배경) 컬러, border(선), color(색상), font-size(사이즈)** 값으로 각각 변경할 수 있습니다.

**스타일시트 > button.css | css/button.css**

```css
.btn_order_whole_buy {
    min-width:190px;
    height:55px;
    padding:0 20px 0 20px;
    color:#ffffff;
    font-size:14px;
    border:1px solid var(--primary-default);
    background:var(--primary-default);
    cursor:pointer;
    font-weight:bold;
}
```

<pre class="language-css"><code class="lang-css">.btn_order_whole_buy:hover {
<strong>    border:1px solid var(--primary-hover);
</strong><strong>    background:var(--primary-hover);
</strong>}
</code></pre>

</details>