# Fresh#\_PC 스킨 가이드

> #### 공통

<details>

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

1. 컬러코드값 확인\
   Fresh# 스킨에 적용되어 있는 기본 컬러 코드 **#8eb111**을 확인합니다. \
   ![](/files/hxrQwlqf3CO5pBmwf7xi)<br>
2. **관리자 > 디자인 메뉴 접속** &#x20;
3. **스타일시트/CSS 변경** \
   좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\
   ![](/files/R06kZ91N1Sa2NFMs9aSu)<br>
4. ctrl+F 검색 후 수정하기\
   스타일시트 파일을 열어 **Ctrl + F(검색)**&#xB97C; 누르고 **#8eb111**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. \
   \
   service.css (총 5개) \
   event.css (총 6개) \
   common.css (총 26개) \
   layer.css (총 22개) \
   goods.css (총 13개)\
   list.css (총 4개) \
   layout.css (총 Top 22개 / Left 15개) \
   member.css (총 20개) \
   board.css (총 15개) \
   mypage.css (총 11개) \
   main.css (총 1개) \
   order.css (총 7개) \
   button.css (총 72개)
5. 마우스 오버시 컬러 **#829c00**도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.&#x20;

</details>

<details>

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

![](/files/79pu1Ka9iYTM5oUVxlpo)

1\. 상단 메뉴의 **font-size(크기), color(색상)** 값을 변경합니다.

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**49줄**</mark>

```css
.top_member_box > li a {
    display: inline-block;
    padding: 4px 0 4px 10px;
    font-size: 12px;
}
```

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**53줄**</mark>

```css
.body-main .top_member_box > li > a {
    color: #fff;
}
```

2\. 장바구니 담긴상품 수량 폰트의 **background(배경), color(색상)** 값을 변경합니다.

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**58줄**</mark>

```css
.top_member_box > li strong {
    background: #8eb111;
    color: #fff;
    padding: 0px 5px;
    border-radius: 10px;
}
```

3\. 메뉴 폰트의 **font-size(크기), font-weight(굵기), color(색상)** 값을 변경합니다.

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**10줄**</mark>

```css
#header .gnb .depth0 > li > a {
    display: inline-block;
    padding: 0 23px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 49px;
    height: 44px;
}
```

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**231줄**</mark>

```css
.body-main #header .gnb .depth0 > li > a {
    color: #fff;
}
```

4.메뉴 마우스 오버시 **background-color(배경)** 값을 변경합니다.

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**234줄**</mark>

```css
#header .gnb .depth0 > li > a:hover{
    border-bottom:#8eb011 6px solid;
}
```

5\. 2댑스 메뉴 폰트의 **font-size(크기)** 값을 변경합니다.

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**243줄**</mark>

```css
#header .gnb .depth1 li a{
    display:block;
    /*width:100%;*/
    padding:5px 10px 7px 19px;
    font-size:12px;
}
```

6\. 2댑스 메뉴 마우스 오버시의 **background(배경), color(색상)** 값을 변경합니다.

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**245줄**</mark>

```css
#header .gnb .depth1 li a.active {
    background: #8eb011;
    color: #ffffff;
}
```

7\. 메뉴영역 하단의 **border-bottom(선)** 값을 변경합니다.

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**13줄**</mark>

```css
.body-main #header_warp {
    border-bottom: #fff 1px solid;
}
```

</details>

<details>

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

![](/files/yJYNHgPyyG9hAxQyUsRm)

1\. 상단 메뉴의 **color(색상), font-size(크기)** 값을 변경합니다.

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**41줄**</mark>

```css
.top_member_box > li a {
    display: inline-block;
    padding: 4px 0 4px 10px;
    color: #888888;
    font-size: 11px;
}
```

2\. 장바구니 담긴상품 수량 폰트의 **color(색상)** 값을 변경합니다.

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**44줄**</mark>

```css
.top_member_box > li strong {
    color: #ab3e55;
}
```

3\. 메뉴 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경합니다.

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**199줄**</mark>

```css
.sub_menu_box .sub_depth0 > li > a {
    display: block;
    padding: 10px 30px;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
}
```

4\. 2댑스 메뉴 마우스 오버시의 **background(배경), color(색상)** 값을 변경합니다.

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**214줄**</mark>

```css
.sub_menu_box .sub_depth1 li a.active{
    background:#829c00; 
    color:#ffffff;
}
```

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

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**212줄**</mark>

```css
.sub_menu_box .sub_depth1 li a{
    display:block;
    padding:5px 10px 7px 19px;
    font-size:12px;
}
```

</details>

<details>

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

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

&#x20;

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

![](/files/YKAuR2BkbR8o4CWKgFa9)

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

**스타일시트 > reset.css | css/reset.css&#x20;**<mark style="color:red;">**3줄**</mark>

```css
@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');
} /* 3번째줄에 추가*/
```

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

**스타일시트 > reset.css | css/reset.css&#x20;**<mark style="color:red;">**13줄**</mark>

```css
body,th,td,input,select,textarea,button {
    font-size:12px;
    line-height:1.5;
    font-family:Malgun Gothic,"맑은 고딕",AppleGothic,Dotum,"돋움",sans-serif;
    color:#333
} /* color값은 디자인가이드에 맞게사용 */
```

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

</details>

<details>

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

![](/files/RvukWSzADz8Rw5vFTjLU)

1\. 검색창 인풋박스 입력 폰트의 **font-size(크기)** 값을 변경합니다.&#x20;

**common > common.css | css/common/common.css&#x20;**<mark style="color:red;">**47줄**</mark>

```css
input[type="text"], input[type="password"] {
    padding: 0 10px;
    outline: none;
    font-size: 12px;
}
```

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

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**108줄**</mark>

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

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

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**118줄**</mark>

```css
.recom_box dt {
    width: 122px;
    padding: 0 0 10px 0;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
}
```

4\. 추천상품명 폰트의 **letter-spacing(자간)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**136줄**</mark>

```css
.recom_tit_box .item_name {
    display: block;
    letter-spacing: -1px;
}
```

5\. 추천상품 가격 폰트의 **font-size(크기)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**142줄**</mark>

```css
.recom_money_box .item_price {
    display: block;
    padding: 7px 0 5px 0;
    font-size: 14px;
}
```

6\. 추천상품 검색창 닫기 폰트의 **color(색상), font-size(크기), line-height(행간)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**162줄**</mark>

```css
.seach_top_all .btn_top_search_close {
    float: right;
    padding: 0 15px 0 15px;
    color: #999999;
    font-size: 11px;
    line-height: 30px;
}
```

</details>

<details>

<summary><strong>검색창 사이즈 변경하기(배경/라인)</strong></summary>

![](/files/pikNf66KVrkJ6FuP5gDo)

1\. 검색창의 **height(높이)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**96줄**</mark>

```css
#header .top_search .top_text_cont .top_srarch_text {
    width: 100%;
    height: 33px;
    padding: 5px 45px 5px 15px;
    box-sizing: border-box;
}
```

2\. 검색창 레이어 영역의 **background(배경),** **border(선)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**98줄**</mark>

```css
.#header .top_search .search_cont{
    display: block;
    margin: 0;
    font-size: 0;
    background: #ffffff;
    border: #ccc 1px solid;
    position: absolute;
    top: 30px;
    left: -1px;
    width: 336px;
    box-sizing: border-box;
}
```

\
3\. 추천상품 이미지 영역의 **border(선), background(배경)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**120줄**</mark>

```css
.recom_box .recom_photo {
    display: table-cell;
    position: relative;
    width: 120px;
    height: 120px;
    border: 1px solid #ececec;
    vertical-align: middle;
}
```

4\. 검색창 레이어 하단 영역의 **height(높이), background(배경)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**160줄**</mark>

```css
.seach_top_all {
    overflow: hidden;
    width: 100%;
    height: 30px;
    background: #f5f5f5;
    clear: both;
}
```

</details>

<details>

<summary><strong>쇼핑카트탭 변경하기(폰트/컬러)</strong></summary>

![](/files/TsGGqHcpOmQTWNiTv7Oi)

1\. 쇼핑카트탭 메뉴 선택 시 **border-top(선), font-weight(굵기)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**572줄**</mark>

```css
.cart_tab_list .on {
    border-top: 2px solid #<span style="text-align: left; color: rgb(34, 34, 34); text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: Consolas, "Lucida Console", "Courier New", monospace; font-size: 12px; font-style: normal; font-weight: 400; word-spacing: 0px; float: none; display: inline !important; white-space: nowrap; orphans: 2; widows: 2; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">8eb111</span>;
    font-weight: bold;
    padding-top: 0;
}
```

2\. 쇼핑카트탭 상단의 **height(높이), border-top(선), background(배경)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**567줄**</mark>

```css
#shop_cart_wrap .cart_tab_wrap {
    position: relative;
    height: 39px;
    border-top: 2px solid #333333;
    background: #f2f2f2;
}
```

3\. 쇼핑카트탭에 담긴 상품 이미지의 **width(너비), height(높이)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**613줄**</mark>

```css
.shop_view_tab .prdt_photo_box a > img {
    width: 135px;
    height: 120px;
}
```

4\. 쇼핑카트탭 상단의 **font-size(크기), color(색상)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**615줄**</mark>

```css
.shop_view_tab .prdt_tit {
    display: block;
    padding: 11px 0 3px 0;
    font-size: 12px;
    color: #4b4b4b;
}
```

\
5\. 쇼핑카트탭 상단의 **font-size(크기), color(색상)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**617줄**</mark>

```css
.shop_view_tab .prdt_price strong {
    font-size: 18px;
    color: #000;
}
```

</details>

<details>

<summary><strong>쇼핑카트탭 변경하기(옵션 시)</strong></summary>

![](/files/4ncuYsF9EswltEDsIiMh)

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

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**581줄**</mark>

```css
.cart_tab_list .cart_tab_option a {
    display: block;
    padding: 10px 55px;
    background: #6a6a6a;
    color: #ffffff;
    text-align: center;
    font-weight: bold;
    line-height: 19px;
}
```

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

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**654줄**</mark>

```css
.shop_option_cont .shop_option_tit .shop_item_tit {
    display: block;
    padding: 0 0 7px 0;
    font-size: 14px;
}
```

3\. 배송비 내용 폰트의 **color(색상)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**656줄**</mark>

```css
.shop_option_cont .shop_option_tit .shop_item_delivery {
    color: #717171;
}
```

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

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**674줄**</mark>

```css
.option_total_box dl dt {
    float: left;
    color: #777777;
}
```

5\. 상품명의 **font-weight(굵기)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**675줄**</mark>

```css
.option_total_box dl dd {
    float: right;
    font-weight: bold;
    /* color: #444444; */
}
```

6\. 총 결제 예정금액 폰트의 **font-weight(굵기), color(색상)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**677줄**</mark>

```css
.option_total_box .total_price_sec dt {
    font-weight: bold;
    color: #555555;
}
```

7\. 총 결제 예정금액 가격 폰트의  **color(색상)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**678줄**</mark>

```css
.option_total_box .total_price_sec strong {
    color: #<span style="text-align: left; color: rgb(34, 34, 34); text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: Consolas, "Lucida Console", "Courier New", monospace; font-size: 12px; font-style: normal; font-weight: 400; word-spacing: 0px; float: none; display: inline !important; white-space: nowrap; orphans: 2; widows: 2; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">829c00</span>;
}
```

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

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**680줄**</mark>

```css
.option_total_box .btn_shop_cart {
    display: block;
    width: 200px;
    height: 43px;
    margin: 0;
    border: 1px solid #cccccc;
    background: #ffffff;
    font-weight: bold;
    font-size: 14px;
    color: #3e3d3c;
    text-align: center;
}
```

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

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**569줄**</mark>

```css
#shop_cart_wrap .btn_shop_buy {
    display: block;
    width: 200px;
    height: 45px;
    background: #<span style="text-align: left; color: rgb(34, 34, 34); text-transform: none; text-indent: 0px; letter-spacing: normal; font-family: Consolas, "Lucida Console", "Courier New", monospace; font-size: 12px; font-style: normal; font-weight: 400; word-spacing: 0px; float: none; display: inline !important; white-space: nowrap; orphans: 2; widows: 2; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px;">8eb111</span>;
    font-weight: bold;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
}
```

</details>

<details>

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

![](/files/D08dKTunf8PCdp6knf68)

1\. 푸터 메뉴 폰트의 **color(색상)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**431줄**</mark>

```css
.foot_list ul li a {
    padding: 0 15px 0 14px;
    color: #666;
}
```

2\. 공지사항 게시판 마우스 오버시 폰트의 **color(색상)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**259줄**</mark>

```css
.notice_rolling ul li a:hover{
    text-decoration:underline;
    color:#8eb011;
}
```

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

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**435줄**</mark>

```css
    overflow: hidden;
    padding: 35px 0 35px 0;
    color: #a9a9a9;
    font-size: 11px;
    line-height: 1.8;;}
}
```

4\. 고객센터 번호 폰트의 **color(색상), font-size(크기)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css &#x20;**<mark style="color:red;">**413줄**</mark>

```css
.content_info .cs_center strong {
    display: block;
    padding: 0;
    color: #8eb111;
    font-size: 26px;
    margin-bottom: 13px;
}
```

</details>

<details>

<summary>최근 본 상품 변경하기(폰트,컬러)</summary>

![](/files/UAkEIKfTaVZ8w7r1U16L)

1\. 최근 본 상품 타이틀의 **color(색상)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**464줄**</mark>

```css
.scroll_right_cont h4 {
    padding: 0;
    color: #666666;
    text-align: center;
}
```

2\. 최근 본 상품 오버시 펼침 레이어 영역의**width(가로), height(세로), border(선), background(배경)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**472줄**</mark>

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

3\. 최근 본 상품의 상품명 폰트의  **color(색상)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**473줄**</mark>

```css
.scroll_right_cont .src_box em {
    display: block;
    overflow: hidden;
    width: 115px;
    height: 43px;
    color: #939393;
    word-break: break-all;
}
```

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

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**474줄**</mark>

```css
.scroll_right_cont .src_box strong {
    display: block;
    color: #8eb111;
}
```

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

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**484줄**</mark>

```css
.scroll_right_cont .scr_paging {
    width: 74px;
    margin: 0 auto;
    color: #939393;
    text-align: center;
}
```

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**486줄**</mark>

```css
.scroll_right_cont .scr_paging strong {
    padding: 0 2px 0 2px;
    color: #333;
}
```

</details>

<details>

<summary>스크롤 시 상단 고정메뉴 변경하기(폰트,배경,투명도)</summary>

![](/files/ViJ7bEpAljhFMlQQ8ug4)

1\. 스크롤시 상단 메뉴 폰트의 **color(색상)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**232줄**</mark>

```css
.body-main .headerFix #header .gnb .depth0 > li > a {
    color: #333;
}
```

2\. 스크롤시 상단 메뉴 영역의 **background(배경,투명도)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**18줄**</mark>

```css
.headerFix {
    position: fixed !important;
    top: -127px !important;
    left: 0 !important;
    z-index: 101 !important;
    width: 100% !important;
    min-width: 1200px !important;
    background: rgba(255,255,255,.7) !important;
}
```

3\. 스크롤시 상단 메뉴 영역 하단의 **border-bottom(선)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**14줄**</mark>

```css
.body-main #header_warp.headerFix {
    border-bottom: #ccc 1px solid;
}
```

</details>

> #### 메인

<details>

<summary>진열타입 탭형 변경하기(폰트,컬러)</summary>

![](/files/2wjFDIR1N6BHac0OMh5F)

1\. 현재 탭 영역의 **background(배경), color(색상)** 값을 변경합니다.&#x20;

**main > main.css | css/main/main.css&#x20;**<mark style="color:red;">**35줄**</mark>

```css
.item_hl_tab_type .goods_tab_tit li.on a {
    background: #8eb111;
    color: #fff;
}
```

2\. 상품정보 영역의 **background(배경)** 값을 변경합니다.&#x20;

**main > main.css | css/main/main.css&#x20;**<mark style="color:red;">**26줄**</mark>

```css
.main_goods_cont .goods_tab_box .item_info_cont {
    background: #fff;
    padding: 15px 20px 20px;
    display: block;
}
```

3\. 브랜드 폰트의 **color(색상)** 값을 변경합니다.&#x20;

**goods > ㅣlist.css | css/goods/list.css&#x20;**<mark style="color:red;">**44줄**</mark>

```css
.item_tit_box .item_brand {
    display: block;
    color: #888888;
}
```

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

**goods > ㅣlist.css | css/goods/list.css&#x20;**<mark style="color:red;">**45줄**</mark>

```css
.item_tit_box .item_name {
    display: block;
    padding: 5px 0 0 0;
    font-size: 13px;
}
```

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

**goods > ㅣlist.css | css/goods/list.css&#x20;**<mark style="color:red;">**52줄**</mark>

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

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

**goods > ㅣlist.css | css/goods/list.css&#x20;**<mark style="color:red;">**53줄**</mark>

```css
.item_money_box .item_price {
    display: block;
    padding: 7px 0 5px 0;
    font-size: 14px;
    color: #8eb111;
}
```

</details>

<details>

<summary>진열타입 백그라운드 이미지 변경하기</summary>

![](/files/WwTyhaJa7SuX1EYMWnr5)

1\. 진열타입 배경의 **백그라운드 이미지 경로**를 확인합니다.

![](/files/p86hu509vFUqaEaE38IY)

![](/files/PljPBfELcXqJbtHKkbe5)

2\.  변경하고 싶은 진열타입 배경이미지를 확인하고 **디자인 > 배너관리**에서 변경합니다.

![](/files/wJMCNBQNhWOfkMzFL4UO)

3\. 진열타입 배경 영역의 **background(배경)** 값을 변경합니다.&#x20;

**main > main.css | css/main/main.css&#x20;**<mark style="color:red;">**15줄**</mark>

```css
.main_goods_cont {
    position: relative;
    margin-top: 80px;
    min-height: 840px;
    background: #f9f9f9;
}
```

</details>

<details>

<summary>진열타입 배너영역 활용하기</summary>

![](/files/QM7Up3X6auwXihXyUIVT)

1\. 진열타입 좌측 배너이미지를 **디자인 > 배너관리**에서 변경합니다.&#x20;

![](/files/hqpDknkTxy6sDC3Rh4RT)

2\. 진열타입 우측 상품정렬은 **상품 > 상품 진열 관리 > 메인페이지 상품진열**에서 변경합니다.&#x20;

![](/files/fqrzktoC1xtPheW9tH9v)

</details>

> #### 상품상세

<details>

<summary>타임세일 변경하기</summary>

![](/files/CXx6N2gNQSM3RYz0hIhd)

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

**event > event.css | css/event/event.css &#x20;**<mark style="color:red;">**65줄**</mark>

```css
.time_sale_tit h2 {
    /* width: 70%; */
    padding: 0 0 30px 0;
    font-size: 24px;
}
```

2\. 타임세일 이미지 상단의 **border-bottom(선)** 값을 변경합니다.&#x20;

**event > event.css | css/event/event.css &#x20;**<mark style="color:red;">**64줄**</mark>

```css
.time_sale_tit {
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #999999;
}
```

3\. 타임세일 기간 폰트의 **color(색상), font-size(크기)** 값을 변경합니다.&#x20;

**event > event.css | css/event/event.css &#x20;**<mark style="color:red;">**66줄**</mark>

```css
.time_sale_tit strong {
    position: absolute;
    bottom: 7px;
    right: 10px;
    color: #8eb111;
    font-size: 13px;
}
```

4\. 남은시간 폰트의 **font-size(크기)** 값을 변경합니다.&#x20;

**event > event.css | css/event/event.css &#x20;**<mark style="color:red;">**74줄**</mark>

```css
.sale_clock .clock_cont .clock_tit {
    padding: 0 30px 0 0;
    font-size: 22px;
}
```

</details>

<details>

<summary>로케이션 셀렉트박스 변경하기</summary>

![](/files/8buNIP5TpFa7fcApdA9e)

1\. 로케이션 HOME 폰트의 **color(색상)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**272줄**</mark>

```css
.location_cont .local_home {
    color: #777777;
}
```

2\. 로케이션 셀렉트 박스의 **border(선), background(배경)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**277줄**</mark>

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

![](/files/XJuBLqlX1Cca5QZHxX5Q)

3\. 로케이션 셀렉트 박스 펼침 영역의 **border(선), background(배경)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**282줄**</mark>

```css
.location_select ul {
    display: block;
    position: absolute;
    top: 22px;
    left: 0px;
    width: 100%;
    margin-left: -1px;
    padding: 6px 0 6px 0;
    font-size: 0;
    border: 1px solid #999999;
    background: #ffffff;
}
```

4\. 로케이션 메뉴 폰트의 **font-size(크기)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**281줄**</mark>

```css
.location_select .location_tit a {
    display: block;
    padding: 3px 32px 3px 9px;
    font-size: 11px;
}
```

5\. 로케이션 메뉴 오버시 **color(색상), background(배경)** 값을 변경합니다.&#x20;

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**286줄**</mark>

```css
.location_select ul li a:hover{
    color:#ffffff;
    text-decoration:none;  
    background:#8eb111;
}
```

</details>

<details>

<summary>카테고리 상단 변경하기</summary>

![](/files/pJZFb9x7Cpmu2mOn6OWs)

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

**goods > goods.css | css/goods/goods.css&#x20;**<mark style="color:red;">**294줄**</mark>

```css
.goods_list_item_tit {
    position: relative;
    margin: 0 0 20px 0;
    padding: 0 0 10px 0;
    font-size: 14px;
}
```

2\. 상품 수량 폰트의 **color(색상)** 값을 변경합니다.

**common > common.css | css/common/common.css&#x20;**<mark style="color:red;">**329줄**</mark>

```css
.goods_pick_list .pick_list_num strong {
    color: #8eb111;
}
```

3\. 상품 수량 폰트의 **color(색상), font-weight(굵기), background(배경)** 값을 변경합니다.&#x20;

**common > common.css | css/common/common.css&#x20;**<mark style="color:red;">**335줄**</mark>

```css
.goods_pick_list .pick_list_box .pick_list label.on {
    color: #8eb111;
    font-weight: bold;
    background: url(../../img/icon/goods_icon/icon_sort_check.png) no-repeat left 5px;
}
```

4\. 상품 정렬 영역의 **border-top(선), border-bottom(선)** 값을 변경합니다.&#x20;

**common > common.css | css/common/common.css&#x20;**<mark style="color:red;">**330줄**</mark>

```css
.goods_pick_list .pick_list_box {
    height: 28px;
    margin: 0 0 20px 0;
    padding: 9px 0 10px 0;
    border-top: 1px solid #999999;
    border-bottom: 1px solid #dbdbdb;
    clear: both;
}
```

</details>

> #### 주문결제

<details>

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

![](/files/oimq6DgV66zjWkZnySrX)

1\. 최종 결제 금액 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경합니다.

**order > order.css | css/order/order.css&#x20;**<mark style="color:red;">**322줄**</mark>

```css
.payment_final_total dt {
    display: inline-block;
    padding: 0 15px 0 0;
    font-size: 14px;
    font-weight: bold;
}
```

2\. 최종 결제 금액 숫자 폰트의 **font-size(크기), color(색상)** 값을 변경합니다.&#x20;

**order > order.css | css/order/order.css&#x20;**<mark style="color:red;">**323줄**</mark>

```css
.payment_final_total dd {
    display: inline-block;
    font-size: 30px;
    color: #8eb111;
}
```

3\. 최종 결제 금액 박스 영역의 **border(선)** 값을 변경합니다.

**order > order.css | css/order/order.css&#x20;**<mark style="color:red;">**320줄**</mark>

```css
.payment_final_total {
    padding: 13px 46px 20px 0;
    border: 2px solid #d6d6d6;
    text-align: right;
}
```

4\. 필수 폰트의 **color(색상)** 값을 변경합니다.

**goods > goods.css | css/goods/goods.css&#x20;**<mark style="color:red;">**326줄**</mark>

```css
.payment_final .form_element label.check_s em b {
    color: #8eb111;
}
```

5\. 결제하기 버튼의 **width(가로), height(세로), color(색상), font-size(크기), border(선), background(배경)** 값을 변경합니다.

**스타일시트 > button.css | css/button.css&#x20;**<mark style="color:red;">**180줄**</mark>

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

</details>

<details>

<summary>주문완료 <strong>상단</strong> 변경하기</summary>

![](/files/0jChGhiX7jdeKyf0K5Gd)

1\. 주문완료 타이틀 폰트의 **font-size(크기), color(색상)** 값을 변경합니다.

**order > order.css | css/order/order.css&#x20;**<mark style="color:red;">**14줄**</mark>

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

2\. 주문완료 안내 폰트의 **font-size(크기)** 값을 변경합니다.

**order > order.css | css/order/order.css&#x20;**<mark style="color:red;">**332줄**</mark>

```css
.order_end_completion strong {
    font-size: 22px;
}
```

3\. 서브 폰트의 **font-size(크기)** 값을 변경합니다.

**order > order.css | css/order/order.css&#x20;**<mark style="color:red;">**333줄**</mark>

```css
.order_end_completion em {
    font-size: 14px;
}
```

</details>

<details>

<summary><strong>주문 요약정보 변경하기</strong></summary>

![](/files/E1CBeqH5yeDJvPLpBMQR)

1\. 무통장 입금 폰트의 **font-size(크기)** 값을 변경합니다.

**order > order.css | css/order/order.css&#x20;**<mark style="color:red;">**337줄**</mark>

```css
.pay_with_list > strong {
    display: block;
    font-size: 13px;
}
```

2\. 금액 숫자 폰트의 **color(색상), font-size(크기)** 값을 변경합니다.

**order > order.css | css/order/order.css&#x20;**<mark style="color:red;">**28줄**</mark>

```css
.order_table_type td > strong {
    color: #333333;
}
```

**order > order.css | css/order/order.css&#x20;**<mark style="color:red;">**226줄**</mark>

```css
.order_payment_sum {
    font-size: 18px;
}
```

3\. 확인 버튼의 **width(가로), height(세로), color(색상), font-size(크기), border(선), background(배경)** 값을 변경합니다.

**스타일시트 > button.css | css/button.css&#x20;**<mark style="color:red;">**184줄**</mark>

```css
.btn_order_end_ok {
    display: inline-block;
    width: 200px;
    height: 61px;
    line-height: 59px;
    color: #fff;
    font-size: 16px;
    border: 1px solid #8eb111;
    background: #8eb111;
    text-align: center;
}
```

3\. 확인 버튼 마우스 오버시 **border(선), background(배경)** 값을 변경합니다.

**스타일시트 > button.css | css/button.css&#x20;**<mark style="color:red;">**186줄**</mark>

```css
.btn_order_end_ok:hover {
    border: 1px solid #829c00;
    background: #829c00;
}
```

</details>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://godomall-help.nhn-commerce.com/beginner/design/freeskin/fresh/pc-guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.