# Bbokki\_Mobile 스킨 가이드

> 공통

<details>

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

1. 컬러코드값 확인\
   Mygreek 스킨에 적용되어 있는 기본 컬러 코드 **#DF3842**을 확인합니다.&#x20;
2. **디자인 스킨 리스트 접속** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트&#x20;
3. **스타일시트/CSS 변경** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트\
   좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\
   \
   ![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F3R8kkk9NNuiwDr9qoxXs%2Fimage.png?alt=media\&token=ccf3710e-bfa3-4eb3-b10c-dea9b1924064)<br>
4. ctrl+F 검색 후 수정하기\
   gd\_common.css 스타일시트 파일을 열어 **Ctrl + F(검색)**&#xB97C; 누르고 **#DF3842**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.<br>
5. 나머지 포인트 컬러도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.
   1. 기본 컬러 코드 : **#DF3842**
   2. 기본 컬러 마우스 오버 코드 : **#C5000C**
   3. 서브 컬러 코드 : **#FEFFD5**
   4. 중립적 컬러 코드 : **#D2D2D2**, **#2B2B2B**

</details>

<details>

<summary>푸터 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FVAYrBt6fSTkqtP4nU4iB%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%2010.00.36.png?alt=media\&token=9b7a2fed-41e8-44db-b586-5a5af1d8083d)

1\. 푸터 메뉴버튼의 **font-size(크기), color(색상), text-align(정렬), font-weight(굵기) letter-spacing(자간)** 값을 변경해줍니다.&#x20;

**스타일시트 > gd\_layout.css | css/gd\_layout.css**

```css
#footer footer .ft_info2_box .ft_menu li a {
    display: block;
    padding: 18px 0 10px 0;
    font-size: 12px;
    color: #fff;
    text-align: left;
    font-weight: 700;
    letter-spacing: -1px;
}
```

2\. 푸터 개인정보 메뉴버튼의 **color(색상), font-weight(굵기)** 값을 변경해줍니다.&#x20;

**스타일시트 > gd\_layout.css | css/gd\_layout.css**

```css
#footer footer .ft_info2_box .ft_menu li a.privacy {
    color: #fff;
    font-weight: bold;
}
```

3\. 푸터 정보 부분의 **text-align(정렬), font-size(크기), color(색상)** 값을 변경해줍니다.&#x20;

**스타일시트 > gd\_layout.css | css/gd\_layout.css**

```css
#footer footer .ft_info2_box .ft_address {
    padding:0px;
    text-align:left;
    font-size:12px;
    color:#fff;
    word-break:keep-all;
}
```

4\.  푸터 카피라잇 영역의 **color(색상), font-size(크기), text-align(정렬)** 값을 변경해줍니다.&#x20;

**스타일시트 > gd\_layout.css | css/gd\_layout.css**

```css
#footer footer .ft_copy {
    padding:24px 0 0;
    color:#fff;
    font-size:10px;
    text-align:left;
    font-style:normal;
}
```

</details>

<details>

<summary>고객센터, PC화면 버튼 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FpCqJPPv00kXIVii6loK8%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%2010.02.48.png?alt=media\&token=53559a28-b2e2-400f-8d46-1a231bbf4dc9)

1\. 고객센터, PC화면 버튼의 **background(배경), color(색상), font-size(크기)** 값을 변경해줍니다.&#x20;

**스타일시트 > gd\_layout.css | css/gd\_layout.css**

```css
#footer footer .ft_button_box ul li a {
    display:block;
    padding:8px 0;
    background:#484848;
    color:#fff;
    font-size:13px;
}
```

</details>

<details>

<summary>상단 헤더 영역 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FtCgrBKYFjPVcw8dlIp15%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%2010.06.40.png?alt=media\&token=332f5349-08db-41e4-b224-2a3d9c499a18)

1\. GNB영역의 **border-bottom(선)** 값을 변경해줍니다.&#x20;

&#x20;**> gd\_layout.css | css/gd\_layout.css**

```css
#header_wrap header .header_box {
    display: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    border-bottom: 2px solid #000;
    height: 62px;
    background: #fff;
}
```

2\. 장바구니 담긴상품 수량의 배경 **background(배경)** 값을 변경해줍니다.&#x20;

&#x20;**> gd\_layout.css | css/gd\_layout.css**

```css
#header_wrap header .header_box .cart_count {
    position: absolute;
    top: 8px;
    right: 0;
    display: block;
    padding: 0px 4px;
    line-height: 15px;
    border-radius: 100%;
    color: #fff;
    background: var(--primary-default);
    vertical-align: middle;
    font-size: 9px;
}
```

</details>

<details>

<summary>슬라이드 메뉴 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FS4PkXzX27PQuMJkbwBxS%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%2010.12.03.png?alt=media\&token=e5a8dc72-4536-4d4e-a309-dc0d182ababe)

1\. 상단배너의 **font-size(크기), color(색상)** 값을 변경해줍니다.&#x20;

**스타일시트 > gd\_layout.css | css/gd\_layout.css**

```css
.nav_banner .nav_login ul li a {
    display: inline-block;
    font-size: 15px;
    color: #222222;
}
```

2\. 아이콘 메뉴 영역의 **font-size(크기), color(색상)** 값을 변경해줍니다.&#x20;

**스타일시트 > gd\_layout.css | css/gd\_layout.css**

```css
.nav_link ul li a {
    display: block;
    padding: 36px 0 0 0;
    font-size: 13px;
    color: #888;
}
```

3\. 탭버튼 활성화 시 **background(배경), color(색상), font-weight(굵기)** 값을 변경해줍니다.&#x20;

**스타일시트 > gd\_layout.css | css/gd\_layout.css**

```css
.nav_tabmenu_box .nav_tabmenu li.on span {
    background: var(--primary-default);
    color: #fff;
    font-weight: bold;
}
```

4\.  탭버튼 비활성화 시 **background(배경), color(색상)** 값을 변경해줍니다.&#x20;

**스타일시트 > gd\_layout.css | css/gd\_layout.css**

```css
.nav_tabmenu_box .nav_tabmenu li span {
    display: block;
    padding: 10px 0 10px 0;
    background: #e8e8e8;
    color: #acacac;
}
```

\
5\. 메뉴 텍스트 스타일 **font-size(크기), color(색상)** 값을 변경해줍니다.&#x20;

**proc > proc.css | css/proc/proc.css**

```css
.category_side > li a {
    position: relative;
    display: block;
    padding: 12px 0 12px 0;
    font-size: 16px;
    color: #262626;
}
```

메뉴 폰트 **font-weight(굵기)** 값을 변경해줍니다.&#x20;

**proc > proc.css | css/proc/proc.css**

```css
.category_side > li > a {
    font-weight: bold;
}
```

6\. 메뉴 폰트 선택 시 **color(색상)** 값을 변경해줍니다.&#x20;

**proc > proc.css | css/proc/proc.css**

```css
.category_side > li > a.on {
    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%2FWTUrrIvrTuyvqDqvqWBE%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%2010.17.51.png?alt=media\&token=59458802-e425-49ea-baf9-0eaa4bd19c9a)

1\. 고객센터 타이틀의 **font-size(크기), font-weight(굵기), border-bottom(선)** 값을 변경해줍니다.&#x20;

**스타일시트 > gd\_layout.css | css/gd\_layout.css**

```css
#footer .ft_info dl dt {
    font-size: 12px;
    padding-bottom: 5px;
    font-weight: 700;
    border-bottom: 1px solid #fff;
}
```

2\. 고객센터 전화번호 **font-size(크기), color(색상)** 값을 변경해줍니다.&#x20;

**스타일시트 > gd\_layout.css | css/gd\_layout.css**

```css
#footer .ft_info dl dd .phone {
    font-size: 14px;
    font-weight: 700;
}
```

3\.  고객센터 이용시간 **font-size(크기), color(색상)** 값을 변경해줍니다.&#x20;

**main > main.css | css/main/main.css**

```css
#footer .ft_info dl dd .business_hours {
    margin-top: 2px;
    font-size: 12px;
    color: #fff;
    line-height: 18px;
}
```

</details>

<details>

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

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F90E3O81awANtAUJXJkbd%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%2010.19.57.png?alt=media\&token=84124a50-96bd-4542-9374-7c1ce5ad9b76)

1\. 상품리스트 이미지의 **border(라인)** 값을 변경해줍니다.&#x20;

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

```css
.goods_prd_item2 .goods_prd_img .img_box .img img {
    width: 100%;
    border: 2px solid var(--neutrals-dark);
    box-sizing: border-box;
}
```

2\. 상품리스트 상품명 폰트의 **color(색상), font-size(크기)** 값을 변경해줍니다.&#x20;

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

```css
.goods_prd_item2 .goods_prd_content .goods_info_list li {
    padding: 1px 0 1px 0;
    word-break: break-all;
    color: var(--neutrals-dark);
    font-size: 14px;
}
```

3\. 상품리스트 가격 폰트의 **color(색상)** 값을 변경해줍니다.&#x20;

**main > list\_01.css | css/goods/list/list\_01.css**

```css
.goods_prd_item2 .goods_prd_content .goods_info_list li.price .c_price {
    color: var(--neutrals-dark);
}
```

</details>

<details>

<summary>진열타입 타이틀 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F4VVHetm8pWx7LWrPuNLY%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%2010.21.59.png?alt=media\&token=ab56a56d-ff3d-4fef-af4c-e80e41087cfe)

1\. 타이틀의 **font-size(크기), color(색상), border-bottom(선), font-weight(굵기**) 값을 변경해줍니다.&#x20;

**proc > proc.css | css/proc/proc.css**

```css
._goods_display_main h3 {
    position:relative;
    display:block;
    padding:40px 0px 0px 16px;
    font-size:24px;
    color:#181818;
    /* border-bottom:1px solid #f3f2f2; */
    text-align:left;
    font-weight:400px;
}
```

2\. 더보기 버튼의 **background(배경), font-size(크기),  border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다.&#x20;

**스타일시트 > gd\_button.css | css/gd\_button.css**

```css
.main_more_btn2 {
    display: block;
    width: 70px;
    padding: 2px 8px;
    text-align: center;
    background: var(--primary-default);
    font-size: 14px;
    font-weight: normal;
    /* border: 1px solid #9f9f9f; */
    color: #fff;
    box-sizing: border-box;
    position: absolute;
    top: 40px;
    right: 0px;
}
```

</details>

> 상품상세

<details>

<summary>상품후기 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FNy4FzP1zrtqvCqoZpbh1%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%2010.30.22.png?alt=media\&token=e4fcbd51-ed06-4d00-938d-2f79104beb42)

1\. 상품 후기 게시판 타이틀의 **background(배경), border-bottom(선)** 값을 변경해줍니다.&#x20;

**스타일시트 >  gd\_plus\_review\.css | css/gd\_plus\_review\.css**

```css
.plus_review_container .plus_review_top_box {
    display: table;
    width: 100%;
    padding: 2px 0;
    background: #f2f3f3;
    border-bottom: 1px solid #e2e2e2;
}
```

2\.  평가, 리뷰수 타이틀 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다.&#x20;

**스타일시트 >  gd\_plus\_review\.css | css/gd\_plus\_review\.css**

```css
.plus_review_container .plus_review_top_box dl dt {
    display: table-cell;
    font-size: 13px;
    color: #606060;
    vertical-align: middle;
}
```

3\.  평가, 리뷰 갯수 폰트의 **font-weight(굵기), font-size(크기), color(색상)** 값을 변경해줍니다.&#x20;

**스타일시트 >  gd\_plus\_review\.css | css/gd\_plus\_review\.css**

```css
.plus_review_container .plus_review_top_box dl dd {
    display: table-cell;
    padding: 0 8px 0 8px;
    font-weight: bold;
    font-size: 24px;
    color: var(--primary-default);
    vertical-align: middle;
}
```

4\.  리뷰등록 버튼의 **background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다.&#x20;

**스타일시트 >  gd\_plus\_review\.css | css/gd\_plus\_review\.css**

```css
.plus_reivew_write_btn {
    display: inline-block;
    width: 80px;
    margin: 0 10px 0 0;
    padding: 4px 0 4px 0;
    text-align: center;
    background: #3e3d3c;
    border: 1px solid #3e3d3c;
    color: #ffffff;
    font-weight: bold;
    box-sizing: border-box;
}
```

5\.  후기작성 버튼의 **text-align(정렬), color(색상), font-size(크기), font-weight(굵기), background(배경), border(선)** 값을 변경해줍니다.&#x20;

**스타일시트 >  gd\_button.css | css/gd\_button.css**

```css
.detail_write_btn {
    display:inline-block;
    width:100%;
    padding:10px 0 10px 0;
    text-align:center;
    color:var(--primary-default);
    font-size:15px;
    font-weight:bold;
    background:#ffffff;
    border:1px solid var(--primary-default);
    box-sizing:border-box;
}
```

6\.  상품평 더보기 버튼의 **text-align(정렬), color(색상), font-size(크기), background(배경)** 값을 변경해줍니다.&#x20;

**스타일시트 >  gd\_button.css | css/gd\_button.css**

```css
.detail_more_btn {
    display:inline-block;
    width:100%;
    padding:10px 0 10px 0;
    text-align:center;
    color:#494949;
    font-size:15px;
    background:#ffffff;
    border:1px solid #9f9f9f;
    font-weight:bold;
}
```

</details>

<details>

<summary>옵션 레이어-셀렉트박스 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FyVeFpaQwDIgGQ0uRDdb5%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%2010.31.59.png?alt=media\&token=1a22feac-9b6f-4506-9677-85c51eda72b9)

1\.  옵션 레이어의 기본 옵션 폰트의 **font-size(크기), color(색상), text-align(정렬), background(배경)** 값을 변경해줍니다.&#x20;

**스타일시트 >  gd\_common.css | css/gd\_common.css**

```css
.layer_option .ly_buy_info .ly_opt .bn_opt {
    display:block;
    position:relative;
    width:100%;
    height:33px;
    border:1px solid #c7c7c7;
    font-size:13px;
    color:#777;
    text-align:left;
    text-indent:11px;
    z-index:100;
    background:#fff url('../img/icon/icon_bg_select.png') no-repeat 100% 0;
    background-size:400px 31px;
}
```

2\. 옵션 레이어 활성화 시 **border(선)** 값을 변경해줍니다.&#x20;

**스타일시트 >  gd\_common.css | css/gd\_common.css**

```css
.layer_option .ly_buy_info .ly_opt .bn_opt.selected {
    border: 1px solid #999;
}
```

3\. 옵션 레이어 옵션 폰트의 **border-bottom(선), font-weight(굵기), font-size(크기), color(색상)** 값을 변경해줍니다.&#x20;

**스타일시트 >  gd\_common.css | css/gd\_common.css**

```css
.layer_option .ly_buy_info .ly_opt li .optbx .optlst li {
    position: relative;
    min-height: 42px;
    text-indent: 10px;
    border-bottom: 1px solid #c7c7c7;
    font-weight: bold;
    font-size: 13px;
    color: #555;
    line-height: 42px;
    vertical-align: middle;
}
```

</details>

<details>

<summary> <strong>옵션 레이어-항목 변경하기(폰트/버튼)</strong></summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FyVeFpaQwDIgGQ0uRDdb5%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%2010.31.59.png?alt=media\&token=1a22feac-9b6f-4506-9677-85c51eda72b9)

1\. 옵션 레이어 쿠폰적용 버튼의 **background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경해줍니다.&#x20;

**스타일시트 >  gd\_button.css | css/gd\_button.css**

```css
.coupon_apply_btn {
    display: inline-block;
    height: 21px;
    margin: 0 0 0 5px;
    padding: 0 6px;
    background: #000;
    color: #ffffff;
    border-radius: 4px;
    border: 1px solid #000;
}
```

2\. 상품 가격 금액 폰트의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경해줍니다.&#x20;

**스타일시트 >  css/gd\_common.css | css/gd\_common.css**

```css
.view_order_goods dl dd .price_info .right .price {
    padding: 5px 0 0 0;
    font-size: 15px;
    font-weight: bold;
    text-align: right;
}
```

3\. 상품 가격 제목 폰트의 **font-size(크기), text-align(정렬)** 값을 변경해줍니다.&#x20;

**스타일시트 >  css/gd\_common.css | css/gd\_common.css**

```css
.total_price_box ul li dl dt {
    display: table-cell;
    width: 90px;
    font-size: 13px;
    text-align: left;
    vertical-align: middle;
}
```

4\. 상품 가격 금액 폰트의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경해줍니다.&#x20;

**스타일시트 >  css/gd\_common.css | css/gd\_common.css**

```css
.total_price_box ul li dl dd {
    display: table-cell;
    font-size: 15px;
    font-weight: bold;
    text-align: right;
    vertical-align: middle;
}
```

</details>

<details>

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

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FW0sH4SSUELhUcRCXF7YN%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%2010.35.32.png?alt=media\&token=001195f9-f37b-4122-817b-d178679ea23b)

1\. 상품문의 게시판 문의 상태표시 아이콘의 **font-size(크기), line-height(행간), background(배경), color(색상),  border-radius(둥근선), border(선)** 값을 변경해줍니다.&#x20;

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

```css
.goods_board_qa_list li .item_list_summary .board_left .author_box .ico_ans1 {
    display: inline-block;
    padding: 5px 5px 3px 5px;
    font-size: 10px;
    line-height: 12px;
    background: #ffffff;
    color:var(--primary-default);
    border-radius: 15px;
    border: 1px solid #0CC472;
}
```

2\.  문의 제목 폰트의 **font-size(크기), color(색상), line-height(행간)** 값을 변경해줍니다.&#x20;

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

```css
.goods_board_qa_list li .item_list_summary .board_left .title a {
    font-size: 14px;
    color: #333333;
    line-height: 22px;
    word-break: break-all;
}
```

</details>

<details>

<summary><strong>상품문의-비밀번호 인증 레이어 변경하기</strong></summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FLmNvDrJKpvRmyPYF1pEb%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%2010.36.07.png?alt=media\&token=dc8a4dc9-53d5-4534-8b81-458b2834e7a6)

1\. 비밀번호 인증 레이어의 **height(높이), background(배경), border(선)** 값을 변경해줍니다.&#x20;

**board >  board.css | css/board/board.css**

```css
.cite_layer .wrap {
    position: relative;
    height: 190px;
    background: #ffffff;
    border: 1px solid #555555;
}
```

\
2\. 비밀번호 인증 타이틀의 **height(높이), background(배경), border(선)** 값을 변경해줍니다.&#x20;

**board >  board.css | css/board/board.css**

```css
.cite_layer .wrap h4 {
    height: 27px;
    padding: 13px 0 0 17px;
    background: #f4f4f4;
    color: #222222;
}
```

3\. 비밀번호 인증 레이어 확인 버튼의 **color(색상), border-radius(둥근선), background(배경)** 값을 변경해줍니다.&#x20;

**스타일시트 >  gd\_button.css | css/gd\_button.css**

```css
.d_pw_confirm_btn {
    display:inline-block;
    padding:5px 15px 5px 15px;
    color:#ffffff;
    border:1px solid var(--primary-default);
    border-radius:3px;
    background: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%2Fua1OxxkhlYdKoGib4PGI%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%2010.38.14.png?alt=media\&token=f11e8aca-de13-4e39-917e-7957c2e3ceda)

1\. 상품문의 내용 폰트의  **color(색상)** 값을 변경해줍니다.&#x20;

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

```css
.goods_board_view .contents_holder {
    table-layout: fixed;
    color: #777777;
    word-break: break-all;
    word-wrap: break-word;
}
```

2\. 수정, 삭제 버튼의 **color(색상), font-size(크기), border(선), background(배경), border-radius(둥근선)** 값을 변경해줍니다.&#x20;

**스타일시트 >  gd\_button.css | css/gd\_button.css**

```css
.d_comment_modify_btn {
    display: inline-block;
    padding: 2px 10px;
    color: #333333;
    font-size: 11px;
    border: 1px solid #c7c7c7;
    background: #ffffff;
    border-radius: 2px;
}
```

</details>

<details>

<summary> 상세 타이틀 및 info 레이어 폰트 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FpLD43Cr1y47BBZHho4XK%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%2010.53.20.png?alt=media\&token=3dd54aa1-e658-47ca-801a-66465f69cbbe)

1\. 상품 상세 타이틀의 **font-size(크기), line-height(행간), text-align(정렬)** 값을 변경해줍니다.&#x20;

**스타일시트 > gd\_layout.css | css/gd\_layout.css**

```css
.sub_top h2 {
    overflow: hidden;
    display: block;
    width: 100%;
    padding: 12px 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 15px;
    line-height: 15px;
    text-align: center;
}
```

2\. info 레이어 영역의 **font-size(크기), color(색상), line-height(행간), font-weight(굵기)** 값을 변경해줍니다.&#x20;

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

```css
.goods_view .detail_tab_info .ly_info li a {
    position: relative;
    display: block;
    width: 100%;
    height: 36px;
    font-size: 13px;
    color: #222222;
    line-height: 36px;
    font-weight: bold;
}
```

</details>

<details>

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

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FcBu48vpeVo9CJ1JqasWE%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%92%E1%85%AE%201.43.35.png?alt=media\&token=520a0ef2-4221-4460-8b3b-d6ca00be0b16)

1\. 상품 상세페이지 탭 폰트의 **color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬)**  값을 변경해줍니다.&#x20;

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

```css
.goods_view .detail_btm_tab_menu_box .detail_btm_tab_menu ul li a {
    display: inline-block;
    width: 100%;
    color: #000;
    font-size: 13px;
    line-height: 13px;
    font-weight: bold;
    text-align: center;
}
```

2\.  게시글 등록 수량 폰트의 **font-size(크기), color(색상), line-height(행간)** 값을 변경해줍니다.&#x20;

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

```css
.goods_view .detail_btm_tab_menu_box .detail_btm_tab_menu ul li a span {
    display: block;
    padding: 2px 0 0 0;
    font-size: 11px;
    color: var(--primary-default);
    line-height: 11px;
}
```

3\.  현재위치 탭표시 라인의 **border-bottom(선)** 값을 변경해줍니다.&#x20;

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

```css
.goods_view .detail_btm_tab_menu_box .detail_btm_tab_menu ul li.selected {
    padding: 1px 0 0 0;
    height: 49px;
    border-bottom: 2px solid #000;
}
```

</details>

<details>

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

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FcBu48vpeVo9CJ1JqasWE%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%92%E1%85%AE%201.43.35.png?alt=media\&token=520a0ef2-4221-4460-8b3b-d6ca00be0b16)

1\.  장바구니 버튼의 **font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다.&#x20;

**스타일시트 >  gd\_button.css | css/gd\_button.css**

```css
.detail_cart_btn {
    display: block;
    width: 100%;
    padding: 10px 0 10px 0;
    font-size: 16px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #9f9f9f;
    color: #494949;
    font-weight: bold;
    box-sizing: border-box;
}
```

2\.  바로구매 버튼의 **font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다.&#x20;

**스타일시트 >  gd\_button.css | css/gd\_button.css**

```css
.btn_add_cart_related,
.btn_add_order_related,
.detail_order_btn {
    display: block;
    width: 100%;
    padding: 10px 0 10px 0;
    font-size: 16px;
    text-align: center;
    background: var(--primary-default);
    border: 1px solid var(--primary-default);
    color: #ffffff;
    font-weight: bold;
    box-sizing: border-box;
```

</details>

<details>

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

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F2uieZejBMSZFL9Kbn4ak%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%92%E1%85%AE%201.44.35.png?alt=media\&token=35a1673c-14c7-400e-b967-5724c01a8b72)

1\. 상품명 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다.&#x20;

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

```css
.goods_view .detail_info h3 {
    font-size: 18px;
    color: #333333;
    word-break: break-all;
}
```

2\.  상품 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다.&#x20;

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

```css
.goods_view .detail_info .detail_info_top .price_box .price {
    font-size: 20px;
    color: #333333;
}
```

3\.  상품 할인 전 가격 폰트의 **color(색상)** 값을 변경해줍니다.&#x20;

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

```css
.goods_view .detail_info .detail_info_top .price_box del {
    color: #999999;
}
```

4\.  상품 상세페이지 리스트 제목**font-size(크기), color(색상)** 값을 변경해줍니다.&#x20;

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

```css
.goods_view .detail_info .detail_sub_info dl dt {
    display: table-cell;
    width: 25%;
    font-size: 12px;
    color: #888888;
}
```

5\.  상품 상세페이지 리스트 내용 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다.&#x20;

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

```css
.goods_view .detail_info .detail_sub_info dl dd {
    display: table-cell;
    width: 75%;
    font-size: 12px;
    color: #333333;
}
```

6\.  공유하기, 찜하기 버튼의 **font-size(크기), text-align(정렬), background(배경), color(색상), font-weight(굵기)** 값을 변경해줍니다.&#x20;

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

```css
.goods_view .share_btn_box ul li button {
    display:block;
    margin:0 auto;
    padding:16px 0;
    font-size:13px;
    text-align:center;
    background:none;
    border:none;
    color:#333333;
    font-weight:bold;
}
```

</details>

> #### 주문결제

<details>

<summary>장바구니 버튼 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FIEBPIaLKzoeAVj0KcJNn%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%92%E1%85%AE%202.08.22.png?alt=media\&token=a12e574a-6df9-4ae7-a706-c05259bc7ed0)

1\. 쿠폰적용 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다.&#x20;

**스타일시트 >  gd\_button.css | css/gd\_button.css**

```css
.cart_coupon_apply {
   display:inline-block;
   padding:4px 8px;
   text-align:center;
   background:#000;
   border:1px solid #000;
   color:#ffffff;
   font-weight:normal;
   box-sizing:border-box;
   border-radius:4px;
}
```

2\. 옵션변경 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다.&#x20;

**스타일시트 >  gd\_button.css | css/gd\_button.css**

```css
.cart_option_modify {
   display:inline-block;
   padding:4px 8px;
   text-align:center;
   background:#000;
   border:1px solid #9f9f9f;
   color:#494949;
   font-weight:normal;
   box-sizing:border-box;
   border-radius:4px;
}
```

3\. 선택상품 삭제, 주문 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다.&#x20;

**스타일시트 >  gd\_button.css | css/gd\_button.css**

```css
.cart_select_del_btn {
    display:inline-block;
    width:100%;
    padding:10px 0 10px 0;
    text-align:center;
    background:#ffffff;
    border:1px solid #9f9f9f;
    color:#494949;
    font-weight:bold;
    box-sizing:border-box;
    font-size:14px;
}
```

4\. 전체주문 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다.&#x20;

**스타일시트 >  gd\_button.css | css/gd\_button.css**

```css
.cart_all_order_btn {
    display:inline-block;
    width:100%;
    padding:10px 0 10px 0;
    text-align:center;
    background:var(--primary-default);
    border:1px solid var(--primary-default);
    color:#ffffff;
    font-weight:bold;
    box-sizing:border-box;
    font-size:14px;
}
```

</details>

<details>

<summary>장바구니 폰트 변경하기</summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FcXCkKHWtq6u5luaGbwgu%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%92%E1%85%AE%202.08.56.png?alt=media\&token=6ec8b0ea-7180-49d4-a05c-9a548b108009)

1\.  장바구니 상품명 폰트의 **font-weight(굵기), color(색상)** 값을 변경해줍니다.&#x20;

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

```css
.cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody p.name {
    padding: 0 0 3px 0;
    font-weight: bold;
    color: #333;
}
```

2\.  장바구니 상품 옵션 폰트의 **font-size(크기), line-height(행간), color(색상)** 값을 변경해줍니다.&#x20;

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

```css
.cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody p {
    font-size: 12px;
    line-height: 16px;
    color: #9d9d9d;
}
```

3\.  장바구니 상품 가격 폰트의 **font-size(크기), color(색상), font-weight(굵기)** 값을 변경해줍니다.&#x20;

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

```css
.cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody .prc {
    display:block;
    padding:10px 0 0 0;
    font-size:15px;
    color:#000;
    font-weight:bold;
}
```

4\.  장바구니 항목 타이틀 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다.&#x20;

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

```css
.cart .my_buy dl dt {
    display: table-cell;
    width: 50%;
    font-size: 13px;
    color: #5e5e5e;
}
```

5\.  장바구니 총 상품금액 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다.&#x20;

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

```css
.cart .my_buy dl dd {
    display: table-cell;
    width: 50%;
    text-align: right;
    font-size: 15px;
    color: #5e5e5e;
}
```

6\.  장바구니 총 합계금액 폰트의 **color(색상),  font-size(크기)** 값을 변경해줍니다.&#x20;

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

```css
.cart .my_buy dl.total dd {
    color: #000;
    font-size: 17px;
}
```

</details>