> For the complete documentation index, see [llms.txt](https://godomall-help.nhn-commerce.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://godomall-help.nhn-commerce.com/beginner/design/freeskin/moment/pc-guide.md).

# Moment\_PC 스킨 가이드

> #### 공통

<details>

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

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

</details>

<details>

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

![](/files/o3ta3TXTV0KtfPPnLrTi)

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

**css > layout/layout.css** [<mark style="color:red;">**41줄**</mark>](#user-content-fn-1)[^1]

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

2. 장바구니 담긴상품 수량 폰트의 **color(색상)** 값을 변경해줍니다.&#x20;

**css > layout/layout.css** [<mark style="color:red;">**44줄**</mark>](#user-content-fn-1)[^1]

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

3. 상단 메뉴 하단의 **color(색상)** 값을 변경해줍니다.&#x20;

**css > layout/layout.css** [<mark style="color:red;">**10줄**</mark>](#user-content-fn-1)[^1]

```css
#header .header_top { 
height: 45px; 
border-bottom: 1px solid #ececec; 
}
```

4. 전체보기 메뉴의 **background-color(배경)** 값을 변경해줍니다.&#x20;

**css > layout/layout.css** [<mark style="color:red;">**156줄**</mark>](#user-content-fn-1)[^1]

```css
 .btn_all_menu_open { 
position: absolute; 
top: 0px; 
left: 0px; 
background-color: #3e3d3c; 
}
```

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

**css > layout/layout.css** [<mark style="color:red;">**195줄**</mark>](#user-content-fn-1)[^1]

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

6. &#x20;2댑스 메뉴의 **font-size(크기)** 값을 변경해줍니다.&#x20;

**css > layout/layout.css** [<mark style="color:red;">**205줄**</mark>](#user-content-fn-1)[^1]

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

7. 2댑스 메뉴 마우스 오버시의 **background(배경), color(색상)** 값을 변경해줍니다.&#x20;

**css > layout/layout.css** [<mark style="color:red;">**207줄**</mark>](#user-content-fn-1)[^1]

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

</details>

<details>

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

![](/files/sL5ZWBeAZyULO0TWjbLr)

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

**css > layout/layout.css** [<mark style="color:red;">**41줄**</mark>](#user-content-fn-1)[^1]

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

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

**css > layout/layout.css** [<mark style="color:red;">**44줄**</mark>](#user-content-fn-1)[^1]

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

3. 카테고리 메뉴의 **border-bottom(선)** 값을 변경해줍니다.&#x20;

**css > layout/layout.css** [<mark style="color:red;">**10줄**</mark>](#user-content-fn-1)[^1]

```css
.header_top { 
height: 45px; 
border-bottom: 1px solid #ececec; 
}
```

4. 전체보기 메뉴의 **background-color(배경)** 값을 변경해줍니다.&#x20;

**css > layout/layout.css** [<mark style="color:red;">**149줄**</mark>](#user-content-fn-1)[^1]

```css
.btn_all_menu_open { 
position: absolute; 
top: 0px; 
right: -1px; 
background-color: #3e3d3c; 
}
```

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

**css > layout/layout.css** [<mark style="color:red;">**180줄**</mark>](#user-content-fn-1)[^1]

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

6. 카테고리 메뉴 오버시 **background-color(배경)** 값을 변경해줍니다. &#x20;

**css > layout/layout.css** [<mark style="color:red;">**181줄**</mark>](#user-content-fn-1)[^1]

```css
.sub_menu_box .sub_depth0 > li > a.active { 
background: url(../../img/common/btn/btn_gnb_list_over.png) no-repeat right center;
background-color: #f8f8f8; 
}
```

7. 2댑스 메뉴의 **font-size(크기)** 값을 변경해줍니다. &#x20;

**css > layout/layout.css** [<mark style="color:red;">**194줄**</mark>](#user-content-fn-1)[^1]

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

8. 2댑스 메뉴 오버시 **background-color(배경), color(색상)** 값을 변경해줍니다. &#x20;

**css > layout/layout.css** [<mark style="color:red;">**196줄**</mark>](#user-content-fn-1)[^1]

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

</details>

<details>

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

![](/files/la73ZYraMA1cmOXt9Aj0)

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

**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(굵기)** 값을 변경해줍니다. \
**css/common/common.css&#x20;**<mark style="color:red;">**87줄**</mark>

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

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

**css/common/common.css&#x20;**<mark style="color:red;">**97줄**</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;

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

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

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

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

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

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

**css/common/common.css&#x20;**<mark style="color:red;">**141줄**</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/WOpIxMITl2ZDUePtR2sr)

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

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

```css
#header .top_search .search_cont {
    display: block;
    margin: 0;
    font-size: 0;
    border-top: 1px solid #cccccc;
    background: #ffffff;
}
```

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

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

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

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

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

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

</details>

<details>

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

![](/files/mid6azjC45X1QST7VTvc)

1\. 푸터 메뉴 폰트의 **color(색상), border-left(선)** 값을 변경해줍니다.&#x20;

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

```css
.foot_list ul li a { 
padding: 0 15px 0 14px; 
color: #717171; 
border-left: 1px solid #e0e0e0; 
}
```

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

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

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

</details>

<details>

<summary>퀵 검색 변경하기</summary>

![](/files/kAOb88V3kv90zgJxazV0)

1\. 퀵검색 타이틀 폰트의 **border-bottom(선), font-size(크기), background(배경)** 값을 변경해줍니다.&#x20;

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

```css
.quick_search_cont_box h2 { 
padding: 20px 0 10px 25px; 
border-bottom: 1px solid #cccccc; 
font-size: 20px; 
background: url(../../img/icon/goods_icon/icon_search.png) no-repeat left 26px; 
}
```

2\. 퀵검색 항목 폰트의 **font-size(크기), text-align(정렬)** 값을 변경해줍니다.&#x20;

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

```css
.quick_search_cont_box dl dt { 
width: 18%; 
display: inline-block; 
padding: 10px 0; 
font-size: 12px; 
text-align: left; 
font-weight: bold; 
vertical-align: top; 
word-break: break-word; 
}
```

3\. 퀵검색 레이어의 **border-left(선)** 값을 변경해줍니다.&#x20;

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

```css
 #quick_search.q_right { 
right: -10000px; 
width: 400px; 
height: 100% !important; 
padding: 20px; 
border-left: 2px solid #323234; 
}
```

4\. 검색 버튼의 **border(선), background(배경), color(색상)** 값을 변경해줍니다.&#x20;

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

```css
 .quick_search_cont_box .quick_btn input { 
display: inline-block; 
padding: 10px 30px; 
border: 1px solid #ab3e55; 
background: #ab3e55; 
color: #ffffff; 
cursor: pointer; 
}
```

</details>

<details>

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

![](/files/5mIm0Hf1wqg2QGTcn33o)

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

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

```css
 .cart_tab_list .on { 
border-top: 2px solid #ab3e55; 
font-weight: bold; 
padding-top: 0; 
}
```

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

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

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

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

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

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

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

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

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

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

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

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

</details>

<details>

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

![](/files/7honncACKFl5FuyBp4pE)

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

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

<pre class="language-css"><code class="lang-css"><strong>.cart_tab_list .cart_tab_option a {
</strong>display: block;
padding: 10px 55px;
background: #6a6a6a;
color: #ffffff;
text-align: center;
font-weight: bold;
line-height: 19px;
}
</code></pre>

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

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**611줄**</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;">**613줄**</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;">**631줄**</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;">**611줄**</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;">**634줄**</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;">**635줄**</mark>

```css
.option_total_box .total_price_sec strong {
color: #9b344a;
}
```

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

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**637줄**</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;">**526줄**</mark>

```css
#shop_cart_wrap .btn_shop_buy {
display: block;
width: 200px;
height: 45px;
background: #ab3e55;
font-weight: bold;
font-size: 14px;
color: #ffffff;
text-align: center;
}
```

</details>

<details>

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

웹폰트 적용하기

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

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

![](/files/uDf6SOzCwdFfNp41YvVa)

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

![](/files/u98lNHwAvBjOQe9zA7xx)

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

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

```css
.content_info h3 {
    padding: 0 0 5px 0;
    color: #222222;
    font-size: 14px;
} /* color값은 디자인가이드에 맞게 사용 */
```

2\. 고객센터 이용시간 폰트의 **color(색상)** 값을 변경해줍니다.&#x20;

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

```css
.content_info .cs_center p {
    color: #777777;
}
```

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

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

```css
.content_info .bank_info strong {
    display: block;
    padding: 0 0 7px 0;
    color: #ab3e55;
    font-size: 18px;
}
```

4\. 은행이름 폰트의 **color(색상)** 값을 변경해줍니다.&#x20;

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

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

</details>

<details>

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

![](/files/qY8Op3eQUkXq6LjZgx1j)

1\. 최근 본 상품 영역의 **background(배경)** 값을 변경해줍니다.&#x20;

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

```css
.scroll_right_cont {
    float: left;
    min-width: 76px;
    padding: 18px;
    background: #f9f9f9;
}
```

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

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

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

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

**layout > layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**429줄**</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;
}
```

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

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

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

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

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

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

</details>

<details>

<summary>진열타입 타이틀과 더보기 버튼 변경하기<strong>(폰트/컬러)</strong></summary>

![](/files/970HWxrVt0m6usWgsgEC)

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

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

```css
.goods_list_tit h3 {
    font-size: 22px;
}
```

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

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

```css
.goods_list_tit {
    padding: 60px 0 10px 0;
    border-bottom: 1px solid #ececec;
    line-height: 1;
}
```

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

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

```css
.btn_goods_more .btn_goods_view_more {
    padding: 2px 5px 3px 5px;
    font-size: 11px;
    font-weight: bold;
    border: 1px solid #dbdbdb;
}
```

</details>

<details>

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

![](/files/fqfjxcvWieQr8dMUFoUm)

1\. 상품 이미지의 **text-align(정렬), color(색상)** 값을 변경해줍니다.&#x20;

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

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

2\. 상품명 폰트의 **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;
}
```

3\. 정상가격 폰트의 **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;
}
```

4\. 할인가격 폰트의 **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: #ab3e55;
}
```

</details>

> #### 상품상세

<details>

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

![](/files/g6gf8aj2fahViK6NliPd)

1\. 타임세일 영역의 **height(높이), border-bottom(선), background(배경)** 값을 변경해줍니다.&#x20;

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

```css
.item_info_box .time_sale {
    overflow: hidden;
    height: 49px;
    margin: 0 0 20px 0;
    padding: 10px 10px 0 10px;
    border-bottom: 1px solid #dbdbdb;
    background: #f5f5f5;
}
```

2\. 타임세일 할인율의 **color(색상), font-size(크기), background(배경), text-align(정렬)** 값을 변경해줍니다.&#x20;

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

```css
.time_sale .time_sale_num {
    width: 59px;
    height: 44px;
    padding: 5px 0 0 0;
    color: #ffffff;
    font-size: 18px;
    background: url(../../img/common/bg/bg_sale.png) no-repeat 0 0;
    text-align: center;
}
```

3\. 남은 시간 폰트의 **font-size(크기), letter-spacing(정렬)** 값을 변경해줍니다.&#x20;

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

```css
.time_sale .time_day {
    margin: 7px 0 0 16px;
    font-size: 18px;
    letter-spacing: 2px;
}
```

4\. 남은 재고 수량 폰트의 **color(색상), font-size(크기)** 값을 변경해줍니다.&#x20;

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

```css
.time_sale .time_now_order span {
    color: #ab3e55;
    font-size: 18px;
}
```

5\. 타임세일 가격 폰트의 **color(색상), font-size(크기), font-weight(굵기)** 값을 변경해줍니다.&#x20;

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

```css
.time_sale_price dd {
    margin: -3px 0 0 0;
    color: #ab3e55;
    font-size: 16px;
    font-weight: bold;
}
```

</details>

<details>

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

![](/files/KiAG4dbT1oPzPRLXrGgs)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

```css
.item_tatal_box .total_amount dd {
    color: #ab3e55;
    font-weight: bold;
}
```

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

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

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

</details>

<details>

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

![](/files/JM6iHCVUPImfEO9uaVTa)

1\.  공유하기 버튼의 **background(배경), border(선)** 값을 변경해줍니다.&#x20;

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

```css
.btn_gray_list a, .btn_gray_list button {
    display: inline-block;
    padding: 0 0 0 11px;
    background: url(../img/common/btn/btn_gray_bg.png) repeat-x;
    border: 1px solid #dbdbdb;
    vertical-align: middle;
}
```

2\.  조건별 배송 버튼의 **font-size(크기), background(배경)** 값을 변경해줍니다.&#x20;

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

```css
.btn_gray_list .btn_gray_small {
    font-size: 11px;
    background: url(../img/common/btn/btn_gray_bg_02.png) repeat-x bottom;
}
```

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

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

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

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

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

```css
.btn_add_order {
    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 #ab3e55;
    background: #ab3e55;
    text-align: center;
    font-weight: bold;
}-weight: bold;
}
```

</details>

<details>

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

![](/files/KBgvtvCEWesuKxVYvjdO)

1\.  셀렉트 영역의 **border(선), background(배경)** 값을 변경해줍니다.&#x20;

**layout >  layout.css | css/layout/layout.css&#x20;**<mark style="color:red;">**225줄**</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;
}
```

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

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

```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&#x20;**<mark style="color:red;">**71줄**</mark>

```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(선) 값을** 변경해줍니다.&#x20;

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

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

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

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

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

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

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

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

</details>

<details>

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

![](/files/FAYaFfbEwVHmBGjX9uZF)

1\. 상품 상세 탭 선택시 **color(색상), font-weight(굵기), border(선)** 값을 변경해줍니다.&#x20;

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

```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(색상)** 값을 변경해줍니다.&#x20;

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

```css
.item_goods_tab li a strong {
    color: #ab3e55;
}
```

</details>

<details>

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

![](/files/oltiV4H5TxntFFZxsQqj)

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

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

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

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

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

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

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

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

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

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

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

```css
.pagination .on {
    color: #ab3e55;
    font-weight: bold;
    border: 1px solid #ab3e55;
}
```

</details>

<details>

<summary><strong>상품 상세 상품문의 비밀번호 입력 레이어 변경하기</strong></summary>

![](/files/1115chnnLphRz2Lv5o3Z)

1\. 상품 상세 상품문의 비밀번호 입력 레이어의 **border(선)** 값을 변경해줍니다.&#x20;

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

```css
.layer_wrap.password_layer .layer_wrap_cont {
    border: 1px solid #555555;
}
```

2\. 비밀번호 인증 폰트의 **font-size(크기), border-bottom(선)** 값을 변경해줍니다.&#x20;

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

```css
.layer_wrap .ly_tit h4 {
    padding: 0 30px 15px 0;
    font-size: 18px;
    border-bottom: 1px solid #999999;
}
```

3\. 비밀번호 인증 폰트 아래 **border-bottom(선)** 값을 변경해줍니다.&#x20;

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

```css
.layer_wrap .ly_tit h4 {
    padding: 0 30px 15px 0;
    font-size: 18px;
    border-bottom: 1px solid #999999;
}
```

4\. 확인 버튼의 **color(색상), border(선), background(배경), text-align(정렬)** 값을 변경해줍니다.&#x20;

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

```css
.btn_ly_password {
    display: inline-block;
    width: 70px;
    height: 28px;
    padding: 0 5px 0 5px;
    color: #ffffff;
    border: 1px solid #3e3d3c;
    background: #3e3d3c;
    text-align: center;
    cursor: pointer;
}
```

</details>

<details>

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

![](/files/ybCoxYoB4efQ8UGwJ1Vp)

1\. 수정 버튼의 **background(배경), border(선)** 값을 변경해줍니다.&#x20;

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

```css
.btn_gray_list a, .btn_gray_list button {
    display: inline-block;
    padding: 0 0 0 11px;
    background: url(../img/common/btn/btn_gray_bg.png) repeat-x;
    border: 1px solid #dbdbdb;
    vertical-align: middle;
}
```

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

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

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

</details>

> #### 주문결제

<details>

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

![](/files/29ZbWqWnenjA9GkciJZn)

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

**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\. 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경해줍니다.&#x20;

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

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

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

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

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

4\. 장바구니 타이틀 폰트 하단의  **border-bottom(선)** 값을 변경해줍니다.&#x20;

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

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

</details>

<details>

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

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

![](/files/QrhLDcErYEU33LJ0a6Z2)

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

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

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

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

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

![](/files/dH3tUyxWZ2m5A6e9lYIL)

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

**스타일시트 > 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:#ab3e55;
}
```

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

**스타일시트 > gd\_reset.css | css/gd\_reset.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 #ab3e55;
background:#ab3e55;
text-align:center;
}
```

</details>

<details>

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

![](/files/kTSoBtLhMFggJ1YGY5uv)

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

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

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

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

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

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

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

```css
.btn_order_choice_buy:hover {
color:#9b344a; 
border:1px solid #9b344a;
}
```

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

**스타일시트 > gd\_reset.css | css/gd\_reset.css&#x20;**<mark style="color:red;">**177줄, 178줄**</mark>

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

```css
.btn_order_whole_buy:hover {
border:1px solid #9b344a; 
background:#9b344a;
}
```

</details>

[^1]:


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.