> 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/mobile-guide.md).

# Moment\_Mobile 스킨 가이드

> #### 공통

<details>

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

1. 컬러코드값 확인\
   Moment 스킨에 적용되어 있는 기본 컬러 코드 **#ab3e55**을 확인합니다.&#x20;
2. **디자인 스킨 리스트 접속** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트&#x20;
3. **스타일시트/CSS 변경** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트\
   좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\
   \
   ![](/files/XA8T4CQ9yZIVHBDffx8F)<br>
4. ctrl+F 검색 후 수정하기\
   스타일시트 파일을 열어 **Ctrl + F(검색)**&#xB97C; 누르고 **#ab3e55**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. \
   \
   mypage.css (총 4개) \
   proc.css (총 5개) \
   main.css (총 1개) \
   order.css (총 11개) \
   list\_06.css (총 4개) \
   list\_09.css (총 4개) \
   list\_04.css (총 4개) \
   list\_07.css (총 4개) \
   list\_01.css (총 4개) \
   list\_11.css (총 7개) \
   list\_02.css (총 4개) \
   gd\_layout.css (총 3개) \
   gd\_button.css (총 160개) \
   gd\_common.css (총 1개)

</details>

<details>

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

![](/files/iS3IUKDkyd6NKs4EMKZE)

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

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

```css
#footer footer .ft_info2_box .ft_menu li a {
    display: block;
    padding: 18px 0 18px 0;
    font-size: 11px;
    color: #d1d1d1;
    text-align: center;
    letter-spacing: -1px;
}
```

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

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

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

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

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

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

```css
#footer footer .ft_copy {
    padding-bottom: 23px;
    color: #e0e0e0;
    font-size: 12px;
    text-align: center;
    font-style: normal;
}
```

</details>

<details>

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

![](/files/o7jZPs4RRtmDnJfusKZL)

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

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

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

</details>

<details>

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

![](/files/jaI8c25CywSHBNXbDhNp)

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

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

```css
#header_wrap header .header_box {
    border-bottom: 1px solid #cbcbcb;
}
```

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

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

```css
#header_wrap header .header_box .cart_count {
    position: absolute;
    top: 8px;
    right: 0;
    display: block;
    padding: 3px 6px 1px 6px;
    line-height: 15px;
    border-radius: 100%;
    color: #fff;
    background: #ab3e55;
    vertical-align: middle;
    font-size: 12px;
}
```

</details>

<details>

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

![](/files/vFGs8MZyUHbJlkByGqFN)

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

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

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

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

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

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

```css
.nav_tabmenu_box .nav_tabmenu li.on span {
    background: #ab3e55;
    color: #fff;
    font-weight: bold;
}
```

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

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

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

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

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

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

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

```css
.category_side > li > a.on {
    color: #ab3e55;
}
```

</details>

> #### 메인

<details>

<summary>고객센터 폰트 변경하기</summary>

![](/files/T5ckKrDycHZUKZibS8IY)

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

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

```css
.main .main_info_box .main_info dl dt {
    font-size: 13px;
    margin: 0 5px;
    font-weight: bold;
    border-bottom: 1px solid #999;
}
```

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

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

```css
.main .main_info dl dd p.phone a {
    font-size: 22px;
    color: #ab3e55;
}
```

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

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

```css
.main .main_info dl dd p.business_hours {
    font-size: 11px;
    color: #666;
}
```

</details>

<details>

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

![](/files/X7o4CnYYVHMBAcAGg8sF)

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

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

```css
.goods_prd_item2 .goods_prd_img .img_box .img img {
    width: 100%;
    border: 1px solid #e5e5e5;
    box-sizing: border-box;
}
```

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

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

```css
.goods_prd_item2 .goods_prd_content .goods_info_list li {
    padding: 1px 0 1px 0;
    word-break: break-all;
    color: #3e3d3c;
    font-size: 14px;
}
```

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

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

```css
.goods_prd_item2 .goods_prd_content .goods_info_list li.price .c_price {
    color: #ab3e55;
}
```

</details>

<details>

<summary>진열타입 타이틀과 더보기 버튼 변경하기</summary>

![](/files/I2onS8SbFU14PY0ekLfX)

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

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

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

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

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

```css
.main_more_btn2 {
    display: inline-block;
    padding: 4px 8px 2px 8px;
    text-align: center;
    background: #ffffff;
    font-size: 12px;
    border: 1px solid #9f9f9f;
    color: #494949;
    font-weight: bold;
    box-sizing: border-box;
}
```

</details>

<details>

<summary>NOTICE 게시판 변경하기</summary>

![](/files/6tJDUTYARlFz9JgBSg4F)

1\. NOTICE 게시판의 **font-size(크기), fone-weight(굵기), color(색상)** 값을 변경해줍니다.&#x20;

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

```css
.main .main_notice .tit {
    display: table-cell;
    width: 84px;
    font-size: 13px;
    font-weight: bold;
    color: #282828;
    text-align: center;
}
```

2\. 게시판 리스트의 폰트 **color(색상)** 값을 변경해줍니다.&#x20;

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

```css
a, img, input, select, textarea {
    color: #000;
}
```

</details>

> #### 상품상세

<details>

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

![](/files/Usdt9U6te00Yyyi6OJVv)

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

**스타일시트 >  gd\_plus\_review\.css | css/gd\_plus\_review\.css&#x20;**<mark style="color:red;">**5줄**</mark>

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

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

```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: #fa2828;
    vertical-align: middle;
}
```

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

**스타일시트 >  gd\_plus\_review\.css | css/gd\_plus\_review\.css&#x20;**<mark style="color:red;">**16줄**</mark>

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

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

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

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

```css
.detail_more_btn {
    display: inline-block;
    width: 100%;
    padding: 10px 0 10px 0;
    text-align: center;
    color: #ffffff;
    font-size: 12px;
    background: #ab3e55;
    border: none;
}
```

</details>

<details>

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

![](/files/eOzL1MHpPtJDQU5sYsae)

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

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

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

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

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

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

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

![](/files/OQLHVbeRr1Qbq5RJuZe2)

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

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

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

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

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

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

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

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

![](/files/lRGaik5s3t6UHtciM4zr)

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

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

```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: #ac3c54;
    border-radius: 15px;
    border: 1px solid #ac3c54;
}
```

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

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

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

![](/files/zRe445pHCnRoLxLsptls)

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

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

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

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

```css
.d_pw_confirm_btn {
    display: inline-block;
    padding: 5px 15px 5px 15px;
    color: #ffffff;
    border-radius: 3px;
    background: #ab3e55;
}
```

</details>

<details>

<summary><strong>상품문의-리스트 내용 변경하기(폰트/버튼)</strong></summary>

![](/files/UdpyV4cPGxJsdJAvE9kb)

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

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

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

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

![](/files/lPSjMjuXJTfBQGQFw4xj)

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

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

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

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

![](/files/si1PFpAdqtyz0ZuPoJPJ)

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

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

```css
.goods_view .detail_btm_tab_menu_box .detail_btm_tab_menu ul li a {
    display: inline-block;
    width: 100%;
    color: #484848;
    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&#x20;**<mark style="color:red;">**388줄**</mark>

```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: #ac3c54;
    line-height: 11px;
}
```

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

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

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

</details>

<details>

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

![](/files/SqdxRWLPynMrOu2SAx3x)

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

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

```css
.detail_cart_btn {
    display: block;
    width: 100%;
    padding: 10px 0 10px 0;
    font-size: 16px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #ab3e55;
    color: #ab3e55;
    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&#x20;**<mark style="color:red;">**167줄**</mark>

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

</details>

<details>

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

![](/files/b3aYX0AoH0lGQVujO4J2)

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

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

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

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

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

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

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

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

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

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

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

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

</details>

> #### 주문결제

<details>

<summary>주문완료 페이지 변경하기(사이즈, 컬러, 배경, 테두리)</summary>

![](/files/dfCPKVskupG2nhwxz9CO)

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

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

```css
.order_end .order_end_box h2 {
    padding: 0 0 10px 0;
    font-size: 13px;
    color: #333333;
}
```

2\.  입금금액 폰트의 **color(색상)** 값을 변경해줍니다.&#x20;

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

```css
.c_red, .c-red, .c_point {
    color: #ab3e55;
}
```

3\.  구매안내 폰트의 **color(색상)** 값을 변경해줍니다.&#x20;

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

```css
.order_end .tx2 strong {
    color: #ab3e55;
}
```

4\.  박스 영역의 **background(배경), border(선), border-radius(둥근선)** 값을 변경해줍니다.&#x20;

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

```css
.order_end .order_end_box {
    position: relative;
    margin: 15px 15px 5px 15px;
    padding: 20px 0 20px 0;
    background: #f3f3f3;
    border: 1px solid #e1e1e1;
    border-radius: 2px;
    text-align: center;
}
```

</details>

<details>

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

![](/files/l4rAPJLbeaD31NJqf7GO)

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

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

```css
.cart_coupon_apply {
    display: inline-block; 
    padding: 5px 5px 5px 5px; 
    text-align: center; 
    background: #ab3e55; 
    border: 1px solid #ab3e55;  
    color: #ffffff; 
    font-weight: bold;  
    box-sizing: border-box
}
```

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

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

```css
.cart_option_modify {
    display: inline-block;
    padding: 5px 5px 5px 5px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #9f9f9f;
    color: #494949;
    font-weight: bold;
    box-sizing: border-box;
}
```

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

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

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

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

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

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

</details>

<details>

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

![](/files/H5gxS3vxriAllkXw7WgR)

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

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

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

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

```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: #ab3e55;
    font-weight: bold;
}
```

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

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

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

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

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

</details>


---

# 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/mobile-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.