# tting\_Mobile 스킨 가이드

> 공통

<details>

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

![](/files/8QPVVHxTqvSNny6kEnOg)

1. 컬러코드값 확인\
   tting 스킨에 적용되어 있는 전역변수 --primary-default 컬러코드 **#223a5e** 를 확인합니다.<br>
2. **관리자 > 디자인 메뉴 접속** &#x20;
3. **스타일시트/CSS 변경** \
   좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 gd\_common.css 스타일 시트를 오픈합니다.
4. ctrl+F 검색 후 수정하기\
   스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 **#223a5e**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.
5. 아래는 스킨에서 자주 사용하는 값들을 변수화 하였습니다.\
   원하는 값으로 변경하면 일괄 수정되어 적용됩니다.

   ```css
   :root {
   	--primary-default: #223a5e;
   	--primary-hover: #373a4c;
   	--secondary-default: #c52323;
   	--neutrals-gray: #e2e6ed;
   	--neutrals-dark: #000;
   	--font-size: 12px;
   	--font-family: 'Pretendard variable';
   	--font-regular: 400;
   	--font-medium: 500;
   	--font-bold: 700;
   }
   ```

</details>

<details>

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

![](/files/XaUqg5YItuA7ZFfq4lb9)

1\. 상단 영역의 **background(배경)** 값을 변경합니다.&#x20;

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

```css
#header_wrap header {
	width: 100%;
	min-width: 320px;
	background: #fff;
	z-index: 300;
}
```

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

**css/gd\_layout.css**

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

</details>

<details>

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

![](/files/p64f61kqgQ8nFXz9bnTP)

1\. 상단배너 로그인, 회원가입의 **font-size(크기), color(색상)** 값을 변경합니다.&#x20;

**css/gd\_layout.css**

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

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

**css/gd\_layout.css**

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

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

**css/gd\_layout.css**

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

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

**css/gd\_layout.css**

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

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

**css/proc/proc.css**

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

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

6\. 메뉴 선택 시 **color(색상), border-top(선)** 값을 변경합니다.&#x20;

**css/proc/proc.css**

```css
.category_side > li > a.on {
    color: var(--primary-default);
}

.category_side > li ul {
    display: none;
    border-top: 1px solid var(--primary-default);
}
```

</details>

<details>

<summary>하단 영역 변경하기</summary>

![](/files/ruMJysct8BHNOVcKGhkT)

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

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

```css
#footer footer .ft_info2_box .ft_menu li a {
	display: block;
	font-size: var(--font-size);
	text-align: left;
	font-weight: var(--font-bold);
}
```

2\. 하단 정보 부분의 **font-size(크기)**&#xAC12;을 변경합니다.&#x20;

**css/gd\_layout.css**

```css
#footer footer .ft_info2_box .ft_address {
	padding: 0px;
	font-size: var(--font-size);
	word-break: keep-all;
}
```

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

**css/gd\_layout.css**

```css
#footer footer .ft_copy {
	padding-top: 15px;
	font-size: 9px;
	font-style: normal;
}
```

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

**css/gd\_layout.css**

```css
#footer footer .ft_button_box ul li a {
	display: block;
	padding: 10px 0;
	background: var(--primary-default);
	color: #fff;
	font-size: 13px;
	border-radius: 20px;
}
```

6. cs center 영역, bank info 영역 **font-size(크기), font-weight(굵기), border-bottom(선)** 값을 변경합니다.

**css/gd\_layout.css**

```css
.main_info_box .main_info dl dt {
	font-size: var(--font-size);
	margin: 0 5px;
	font-weight: var(--font-bold);
	border-bottom: 1px solid var(--neutrals-dark);
	padding-bottom: 6px;
}
```

7. cs center 영역 고객센터 번호 **font-size(크기), color(색상)** 값을 변경합니다.

**css/gd\_layout.css**

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

</details>

> 메인

<details>

<summary>메인 상품 진열 타이틀 영역 변경하기(폰트/컬러)</summary>

![](/files/FewItVOohusEXSmtySVO)

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

**css/proc/proc.css**

```css
._goods_display_main h3 {
	position: relative;
	display: block;
	font-size: 24px;
	color: var(--neutrals-dark);
	text-align: left;
	font-weight: var(--font-medium);
	line-height: 36px;
	margin-bottom: 16px;
}
```

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

**css/gd\_button.css**

```css
.main_more_btn2 {
	display: block;
	font-size: 14px;
	font-weight: var(--font-regular);
	background: url(../img/icon/icon_more.svg) no-repeat right 14px;
	padding-right: 10px;
}
```

&#x20;3\. 하단 더보기 버튼의 **font-size(크기), color(색상), background(배경), text-align(정렬)** 값을 변경합니다.&#x20;

**css/gd\_button.css**

```css
.main_more_btn {
	display: block;
	width: calc(100%);
	padding: 12px 8px;
	margin: 0 auto;
	text-align: center;
	background: #000;
	font-size: 14px; /* border: 1px solid #9f9f9f; */
	color: #fff;
	box-sizing: border-box;
}
```

</details>

<details>

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

![](/files/CkeHvBCjmvVbdiwFHTVT)

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

**css/goods/goods.css**

```css
.prd_name {
	font-weight: var(--font-medium);
	line-height: 20px;
	font-size: 14px;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
```

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

**css/goods/goods.css**

```css
.c_price {
	color: var(--neutrals-dark);
}
```

</details>

> 상품상세

<details>

<summary> info 레이어 폰트 변경하기</summary>

![](/files/xvhaz1retlBxJPQWTUnx)

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

**css/goods/goods.css**

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

</details>

<details>

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

![](/files/Gb7w2XhmCpc48kjtzLfz)

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

**css/goods/goods.css**

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

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

**css/goods/goods.css**

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

3\.  상품 정가(취소선) 폰트의 **color(색상)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

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

4\.  상품 상세 정보 제목의 **font-size(크기), color(색상)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

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

5\. 상품 상세 정보 내용의 **font-size(크기), color(색상)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

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

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

**css/goods/goods.css**

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

</details>

<details>

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

![](/files/618lmLgVXtwkQIr9IMoj)

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

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

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

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

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

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

</details>

<details>

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

![](/files/Oa8gwZJdsEdPJJko4Rtc)

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

**css/gd\_common.css**

<pre class="language-css"><code class="lang-css"><strong>.layer_option .ly_buy_info .ly_opt .bn_opt {
</strong>    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;
}
</code></pre>

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

**css/gd\_common.css**

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

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

**css/gd\_common.css**

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

</details>

<details>

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

![](/files/0Vf4QnMMv260ODCo8tC2)

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

**css/gd\_button.css**

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

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

**css/gd\_common.css**

```css
.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
.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
.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>상품 상세 탭 변경하기</summary>

![](/files/6caF8wxRqdohRD7jOmiN)

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

**css/goods/goods.css**

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

2\.  상품후기, 상품문의 개수 폰트의 **font-size(크기), color(색상), line-height(행간)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

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

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

**css/goods/goods.css**

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

</details>

<details>

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

![](/files/uSwe57IteQd4Yq3gr05X)

1\. 상품후기 작성자 및 작성일의 **font-size(크기), color(색)**&#xC744; 변경합니다.

**css/goods/goods.css**

```css
.goods_board_review_list li .item_list_summary .board_left .author_box {
	font-size: 12px;
	color: #a9a9a9;
}
```

2\.  작성한 상품후기 제목의 **font-size(크기), color(색상)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

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

3\. 작성한 상품후기 내용의 **color(색상)** 값을 변경합니다.&#x20;

**css/goods/goods.css**

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

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

**css/gd\_button.css**

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

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

**css/gd\_button.css**

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

</details>

<details>

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

![](/files/AXdYgJ0NjKP7Ar5Pq2tC)

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

**css/goods/goods.css**

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

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

**css/goods/goods.css**

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

</details>

<details>

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

![](/files/ucL2KvpV7pgzCIS6bJN8)

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

**css/goods/goods.css**

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

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

**css/gd\_button.css**

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

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

</details>

> #### 주문결제

<details>

<summary>장바구니 페이지 변경하기</summary>

![](/files/0YZHngZ1JktCA7PkTDYg)

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

**css/gd\_button.css**

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

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

**css/gd\_button.css**

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

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

**css/gd\_button.css**

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

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

**css/gd\_button.css**

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

5. 총 합계금액의 **color(색), font-size(크기)**&#xB97C; 변경합니다.

**css/order/order.css**

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

</details>

<details>

<summary> 주문페이지 변경하기</summary>

1\.  주문 상품명의 **font-weight(굵기), color(색상)** 값을 변경합니다. \
![](/files/QnoUBXbRKUmJbvh53GFp)

**css/order/order.css**

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

2\.  주문 상품 금액의 **font-weight(굵기), color(색상)** 값을 변경합니다.&#x20;

**css/order/order.css**

```css
.order .pay .my_goods li .info .itembody .prc {
	font-weight: bold;
	color: #000;
}
```

3\.  배송정보 활성화된 탭의 **color(색상), font-weight(굵기)** 값을 변경합니다. \
![](/files/Zmi7shaT34aZY7HBeJGq)

**css/order/order.css**

```css
.order .order_box .delivery_box .tab_menu ul li.active a {
	color: #fff;
	font-weight: bold;
}
```

4\.  배송정보 우편번호 버튼의 **background(배경), color(색상), border(선)** 값을 변경합니다.&#x20;

**css/gd\_button.css**

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

5\.  쿠폰 조회 및 적용 버튼의 **background(배경), color(색상), border(선)** 값을 변경합니다. \
![](/files/6LgoPZRJR4feHK9xpn3b)

**css/gd\_button.css**

```css
.coupon_search_apply_btn {
	display: inline-block;
	padding: 5px 10px 5px 10px;
	text-align: center;
	background: var(--primary-default);
	border: 1px solid var(--primary-default);
	color: #ffffff;
	font-weight: bold;
	box-sizing: border-box;
}
```

6\.  결제하기 버튼의 **background(배경), color(색상),  font-size(크기),  border(선)** 값을 변경합니다.&#x20;

**css/gd\_button.css**

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

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