# Chef's Choice\_PC 스킨 가이드

> 공통

<details>

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

1. 컬러코드값 확인\
   chefChoice 스킨에 적용되어 있는 전역변수 --primary-default 컬러코드 **#f15546** 를 확인합니다.\
   \
   ![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FsnBZy9OSm6nMQuZ1jq9e%2Fimage.png?alt=media\&token=65d9719b-ed6d-4e25-a57b-1f80a71998fd)

2) **관리자 > 디자인 메뉴 접속** &#x20;

3. **스타일시트/CSS 변경** \
   좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 common/common.css 스타일 시트를 오픈합니다.\


4) ctrl+F 검색 후 수정하기\
   스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 **#f15546**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.

5. 나머지 포인트 컬러도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.
   1. 기본 컬러 코드 : **#f15546**
   2. 기본 마우스 오버 컬러 코드 : **#ea3f30**
   3. 서브 컬러 코드 : **#fabd4c**
   4. 중립 컬러 코드 : **#edebe5**, **#000**

</details>

<details>

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

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FnCeCaMbHKVscadUObSGD%2Fimage.png?alt=media\&token=0df6470f-de1a-4cd3-badc-1435e1649100)\
1\. 상단 메뉴의 **color(색상), font-size(크기)** 값을 변경합니다.

**css/layout/layout.css**

```css
.top_member_box > li a {
	display: inline-block;
	color: #fff;
	font-size: var(--font-size);
}
```

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

**css/layout/layout.css**

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

3. 상단 메뉴 배경색상의 **background-color(색상)** 값을 변경합니다. \
   (현재는 중립 컬러 코드 전역변수로지정되어 있습니다.)

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

```css
#header .header_top { 
    height: 100px;
    background-color: var(--neutrals-dark);
}
```

4. 전체보기 메뉴의 **background-color(배경)** 값을 변경합니다. \
   (현재는 중립 컬러 코드 전역변수로 지정되어 있습니다.)

**css/layout/layout.css**

```css
#header .gnb_allmenu_wrap { 
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 400px;
    background: var(--neutrals-dark);
    z-index: 999;
}
```

5. 카테고리 메뉴의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경합니다.&#x20;

**css/layout/layout.css**

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

6. &#x20;메뉴 마우스 오버시의 **background(배경)**&#xAC12;을 변경합니다. \
   (현재는 기본 포인트 컬러 전역변수로 지정되어 있습니다.)

**css/layout/layout.css**

```css
#header .gnb_allmenu_box li:hover,
#header .gnb_allmenu_box li.is-open > button:hover {
    background-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%2F5efjmv0xKvvZmQW78pWd%2Fimage.png?alt=media\&token=80a386ea-09bd-4e1c-8cac-5b4614e2c798)\
1\. 검색창 인풋박스 입력 폰트의 **font-size(크기)** 값을 변경합니다.&#x20;

**css/layout/layout.css**

```css
#header .top_search .top_text_cont input {
	border: none 0;
	vertical-align: top;
	background: none;
	height: 100%;
	width: 160px;
	color: #fff;
	font-size: 16px;
	padding: 0;
}
```

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

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

3\. 추천상품 폰트의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경합니다.&#x20;

**css/layout/layout.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><strong>하단 영역 변경하기 (폰트/컬러)</strong></summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FPemqHmZKszi6JnPIn7G6%2Fimage.png?alt=media\&token=e7cc2b8d-fbee-4e9d-b004-c0e2a0ee7e69)\
1\. 하단 메뉴 폰트의 **color(색상), background-color(선색상) , font-weight(굵기)** 값을 변경합니다.&#x20;

**css/layout/layout.css**

```css
.foot_list ul li a {
	padding: 0 16px;
	font-weight: var(--font-bold);
	color: #fff;
}
```

```css
.foot_list ul .divider {
	display: inline-block;
	width: 1px;
	background-color: #fff;
	height: 12px;
}
```

2. 하단 쇼핑몰 정보의 **color(색상), font-size(크기), font-weight(굵기), line-height(행간)** 값을 변경합니다.

**css/layout/layout.css**

```css
.foot_cont .foot_info {
	color: #fff;
	font-size: 12px;
	font-weight: var(--font-regular);
	line-height: 20px;
}
```

3. 고객센터, 은행계좌 안내, 공지사항 폰트의 **color(색상), font-size(크기), font-weight(굵기), line-height(행간)** 값을 변경합니다.&#x20;

**css/layout/layout.css**

```css
.content_info h3,
.content_info h3 a {
	color: #fff;
	font-size: 16px;
	font-weight: var(--font-bold);
	line-height: normal;
	margin-bottom: 12px;
}
```

```css
.content_info .cs_center p,
.content_info .bank_info p,
.content_info .notice_list li a {
	color: #fff;
	font-size: 12px;
	font-weight: var(--font-regular);
	line-height: 20px;
}
```

</details>

<details>

<summary><strong>웹폰트 적용하기</strong></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 스타일시트의 6번째 줄에 @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');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/* 6번째 라인에 추가 */
```

4\.  font-family 값을 변경할 폰트로 수정 또는 추가하여 적용해주세요.\
(한글 폰트 파일명의 경우 " "입력)

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

```css
body,
th,
td,
input,
select,
textarea,
button {
	font-size: var(--font-size);
	line-height: 1.5;
	font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont,
		system-ui, Roboto, Dotum, '돋움', sans-serif;
	color: #333;
} 
```

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



</details>

> 메인

<details>

<summary><strong>[우측 스크롤 영역] 최근 본 상품 변경하기</strong></summary>

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FlRavIRPdHAQOLLTecXrB%2Fimage.png?alt=media\&token=b30ad8f7-ff24-4dc8-ac35-565d94fc19f9)\
1\. 최근 본 상품 영역의 **background(배경)** 값을 변경합니다.&#x20;

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

```css
.scroll_right_cont {
	float: left;
	width: 88px;	
	padding: 19px 15px;
	background: var(--neutrals-gray);
	border-radius: 10px;
}
```

2\. 타이틀 폰트의 **color(색상), text-align(정렬)** 값을 변경합니다.&#x20;

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

```css
.scroll_right_cont h4 {
	color: var(--neutrals-dark);
	font-size: 15px;
	font-weight: var(--font-bold);
	line-height: 15px;
	text-transform: uppercase;
	font-family: 'Montserrat';
}
```

3\. 최근 본 상품 오버시 **border(선), background(배경)** 값을 변경합니다.&#x20;

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

```css
.scroll_right_cont .src_box {
	position: absolute;
	top: -1px;
	right: -3px;
	width: 210px;
	height: 53px;
	padding: 5px 0 0 7px;
	border: 1px solid #999999;
	background: #ffffff;
	text-align: left;
	z-index: 10;
	box-sizing: content-box;
}
```

4\. 상품 가격 폰트의 **color(색상)** 값을 변경합니다.&#x20;

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

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

5\. 페이징 폰트의**color(색상)** 값을 변경합니다.&#x20;

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

```css
.scroll_right_cont .scr_paging strong {
    padding: 0 2px 0 2px;
    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%2Faa1cle1ebP0x525Eznh4%2Fimage.png?alt=media\&token=eae56f77-0c5c-4091-8488-55748ee746ce)

1\. 타이틀 폰트의**font-size(크기)** 값을 변경합니다.&#x20;

**css/goods/list.css**

```css
.goods_list_tit h3 {
	font-size: 60px;
	font-weight: 800;
	font-family: 'Montserrat';
	line-height: 73px;
}
```

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

**css/goods/list.css**

```css
.btn_goods_more {
	position: absolute;
	bottom: 18px;
	right: 0px;
	border: 1px solid #000;
	width: 92px;
	height: 36px;
	line-height: 36px;
	text-align: center;
}
.btn_goods_more .btn_goods_view_more {
	font-size: var(--font-size);
	font-weight: var(--font-bold);
	color: var(--neutrals-dark);
};

```

</details>

<details>

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

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F4CNTJR8VgvF4WUiJpT7n%2Fimage.png?alt=media\&token=ebd4a499-a8fc-426c-b4a5-b9d2cb01b046)

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

**css/goods/list.css**

```css
.item_tit_box .item_name {
	display: block;
	margin-bottom: 4px;
	font-size: 16px;
	font-weight: var(--font-medium);
	word-break: break-all;
	font-weight: normal;
	color: var(--neutrals-dark);
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
```

2\. 상품가격 폰트의 **color(색상)** 값을 변경합니다.&#x20;

**css/goods/list.css**

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

3\. 할인율 폰트의 **font-size(크기), color(색상)** 값을 변경합니다.&#x20;

**css/goods/list.css**

```css
.item_number_box {
	color: var(--secondary-default);
	line-height: 18px;
}
```

</details>

> 상품상세

<details>

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

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FikrLsB8OZIuSWQTjNdBL%2Fimage.png?alt=media\&token=55b33308-95a5-4c14-9a64-92e53c096c27)

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

**css/goods/goods.css**

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

2\.  상품 정보 타이틀 폰트의 **color(색상), font-weight(굵기)** 값을 변경합니다.&#x20;

**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(굵기)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

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

4\.  총 합계금액 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

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

5\.  총 합계금액 가격 폰트의 **color(색상), font-weight(굵기)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

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

6\. 총 합계금액 가격 폰트의 **font-size(크기)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

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

</details>

<details>

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

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FikrLsB8OZIuSWQTjNdBL%2Fimage.png?alt=media\&token=55b33308-95a5-4c14-9a64-92e53c096c27)

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

**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;
}
```

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

**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;
}
```

</details>

<details>

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

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FikrLsB8OZIuSWQTjNdBL%2Fimage.png?alt=media\&token=55b33308-95a5-4c14-9a64-92e53c096c27)

1\.   상품명 아래  **border-bottom(선) 값을** 변경합니다.&#x20;

**css/goods/goods.css**

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

2. 선택한 옵션 영역의  **border-bottom(선) 값을** 변경합니다.&#x20;

**css/layout/layout.css**

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

5. 선택한 옵션영역의 **background(배경)** 값을 변경합니다.

**css/layout/layout.css**

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

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

**css/goods/goods.css**

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

</details>

<details>

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

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2Fwcof7uEYQEO7Z4UAeyn2%2Fimage.png?alt=media\&token=0024a749-7237-454e-8ad7-485a7122c269)

1. 상품 상세 탭 **color(색상), font-weight(굵기), border(선)** 값을 변경합니다.

**css/goods/goods.css**

```css
.item_goods_tab li a {
	display: block;
	margin: 0 0 0 -1px;
	padding: 10px 0 12px 0;
	color: #999999;
	font-size: var(--font-size);
	border: 1px solid #dadada;
	border-bottom: 1px solid #bbbbbb;
	background: #ffffff;
}
```

2. 상품 상세 선택된 탭 **color(색상), font-weight(굵기), border(선)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

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

3\. 상품 상세 상품문의, 상품후기 수량 폰트의 **color(색상)** 값을 변경합니다.&#x20;

**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%2FmpCunhuUN2BCpTt7Ivpm%2Fimage.png?alt=media\&token=88b4790f-82cc-496e-897f-654c8ab9d119)

1\. 탭 하단영역 타이틀 폰트의 **font-size(크기)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

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

2\. 상품문의 전체보기, 상품후기 전체보기 버튼의 **color(색상), border(선), background(배경), text-align(정렬)** 값을 변경합니다.&#x20;

**css/button.css**

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

3\. 상품후기 글쓰기, 상품문의 글쓰기 버튼의 **color(색상), border(선), background(배경), text-align(정렬)** 값을 변경합니다.&#x20;

**css/button.css**

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

4\. 페이징 선택된 버튼의 **color(색상),  font-weight(굵기)** 값을 변경합니다.&#x20;

**css/common/common.css**

```css
.pagination .on {
	color: #333;
	font-weight: var(--font-bold);
}
```

</details>

<details>

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

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2F1qJgjem9rx1fb5IHLkY3%2Fimage.png?alt=media\&token=8ffbc262-6e0f-4e80-8963-0419ffb11088)

1\.  상품후기 내용 펼침 영역의 **background(배경)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

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

2. 상품문의 내용 펼침 영역의 **background(배경)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

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





</details>

> 주문결제

<details>

<summary><strong>타이틀 영역 변경하기 (장바구니 / 주문서작성/결제 / 주문완료 )</strong></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(색상)** 값을 변경합니다.&#x20;

**css/order/order.css**

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

2\. 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경합니다.&#x20;

**css/order/order.css**

```css
.order_wrap .order_tit .page_on {
	color: var(--neutrals-dark);
	font-weight: var(--font-bold);
}
```

3\. 다음 진행 스텝 표시 폰트의 **font-size(크기), color(색상)** 값을 변경합니다.&#x20;

**css/order/order.css**

```css
.order_wrap .order_tit ol li {
	float: left;
	font-size: var(--font-size);
	color: #d1d1d1;
}
```

4\.  타이틀 영역 하단의  **border-bottom(선)** 값을 변경합니다.&#x20;

&#x20;**css/order/order.css**

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

</details>

<details>

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

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FKzLScATuVHcNpOhk2ekE%2Fimage.png?alt=media\&token=d18a93f4-7ea8-4d95-9f79-6d89e2cf7a68)

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

**css/order/order.css**

```css
.price_sum_cont .price_sum_list dd {
    color: var(--neutrals-dark);
}
```

```css
.price_sum_cont .price_sum_list dd strong {
    font-weight:700;
    font-size:18px;
    color: var(--neutrals-dark);
}
```

2\. 선택상품주문 버튼은 마우스 오버 전과 오버 시의 **border(선), font-size(사이즈), color(색상)** 값으로 각각 변경합니다.

&#x20;**css/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\. 전체상품주문 버튼은 마우스 오버 전과 오버 시의 **background(배경) 컬러, border(선), color(색상), font-size(사이즈)** 값으로 각각 변경합니다.

**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;
}
```

```css
.btn_order_whole_buy:hover {
	border: 1px solid var(--primary-hover);
	background: var(--primary-hover);
}
```



</details>

<details>

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

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

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2FkEpGit8fDp6z6lkzncyF%2Fimage.png?alt=media\&token=d69dfc42-9597-4341-a800-3889f610b734)

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

&#x20;**css/order/order.css**

```css
.price_sum_cont .price_sum_list dd {
	color: var(--neutrals-dark);
}
```

```css
.price_sum_cont .price_sum_list dd strong {
	font-weight: var(--font-bold);
	font-size: 18px;
	color: var(--neutrals-dark);
}
```



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

![](https://2478997954-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ4835cBGqYqyT5gSFgxN%2Fuploads%2Fbm5iAFCetTIkFZcnr3IY%2Fimage.png?alt=media\&token=f7829900-f168-4f3f-87cd-bf6fc6f68fdc)

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

**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(사이즈) 값을 각각 변경합니다.

**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>
