# 어썸(Awesome)

> **`카테고리`** 남성 패션 
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어, 영어, 중국어, 일어)
>
> [샘플샵🖥️ 보기 →](http://design21.godomall.com/)
>
> [디자인센터 바로가기 →](https://design.nhn-commerce.com/freeskin.php)

<details>

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

1. 컬러코드값 확인\
   Awesome 스킨에 적용되어 있는 기본 컬러 코드 **#b8874d**을 확인합니다. \
   \
   ![](/files/oR6LG4oQPnjej2wAFxRo)
2. **관리자 > 디자인 메뉴 접속** &#x20;
3. **스타일시트/CSS 변경** \
   좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\
   ![](/files/oOUmiqxQ9Ghc8KnSEKej)<br>
4. ctrl+F 검색 후 수정하기\
   스타일시트 파일을 열어 **Ctrl + F(검색)**&#xB97C; 누르고 **#b8874d**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. \
   \
   css/button.css (56개) \
   css/custom.css (1개)

   css/board/board.css (13개)

   css/common/common.css (18개)

   css/common/layer/layer.css (16개)

   css/event/event.css (6개)

   css/goods/goods.css (13개)

   css/goods/list.css (4개)

   css/layout/layout.css (28개)

   css/member/member.css (18개)

   css/mypage/mypage.css (11개)

   css/order/order.css (7개)

   css/service/service.css (7개)
5. 마우스 오버시 컬러 **#a67842**도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.&#x20;

</details>

<details>

<summary>상단 배너 영역 디자인 수정하기</summary>

![](/files/6HOGq6YAv86qj3nPnFKG)

1. 배너 설명

   `위치` Awesom 스킨 상단 영역\
   `유형`\
   \- 펼치기 - 접기가 가능한 배너 \
   \- 상단의 \[ **∨** ] 버튼을 누르면 펼쳐지는 형식\
   `효과` 이벤트 요소로 고객들의 궁금증을 시각적으로 높여 보여주는 효과
2. 배너 수정

   `메뉴 위치` 관리자 > 디자인설정 > 배너관리\
   `배너 사이즈` 1200 X 155 (\*팝업/배너PSD 참고)
3. 배경색 변경\
   `변경 위치` css > custom.css **22줄**\
   &#x20; `22` #header .top\_banner\_cont{position:relative; overflow:hidden; height:40px; background:<mark style="background-color:orange;">#efeeea</mark>; text-align:center;}\
   \
   ⚠️배경색을  변경해  이미지와 상단영역의 색상을 맞추시길 권장드립니다.

</details>

<details>

<summary>GNB영역 디자인 수정하기</summary>

1. 배경색 변경\
   흰색 컬러코드(#fff)를 원하는 컬러  코드값으로 변경합니다.\
   `변경 위치`  css > custom.css **171줄**\
   &#x20; `171` #header .header\_gnb{position:relative;background:<mark style="background-color:orange;">#fff</mark>;}
2. 카테고리 텍스트 사이즈/색상 변경\
   폰트사이즈(font-size)와 색상(color)을 원하는 값으로 수정합니다.\
   `변경 위치`  css > custom.css **173줄**\
   &#x20; `173` #header .gnb .depth0 > li > a{position:relative; padding-bottom:9px; <mark style="background-color:orange;">font-size:18px</mark>; font-weight:normal; line-height:39px; <mark style="background-color:orange;">color:#8e8e8e</mark>;}

</details>

<details>

<summary>검색창 키워드 디자인 수정</summary>

![](/files/Hc82tRjNFNrOH2CW4Un6)

1. 검색창 키워드 설정

   `메뉴 위치` 관리자 > 상품> 상품 노출형태 관리 > 검색창 관련 설정\
   ⚠️해당 메뉴 위치에서 상품 검색 키워드 설정 시에만 '검색창 키워드'가 노출됩니다.<br>
2. 검색창 키워드 색상(color) 변경\
   `변경 위치`  css > custom.css **59줄**\
   &#x20; `59` #header .top\_search .top\_text\_cont .top\_srarch\_text::placeholder {<mark style="background-color:orange;">color:#bababa</mark>; font-weight:bold; font-size:18px;}<br>
3. 검색창 키워드 Bold 해제\
   font-weight:bold를 삭제해주세요.

   `변경 위치`  css > custom.css  **59줄**\
   &#x20; `59` #header .top\_search .top\_text\_cont .top\_srarch\_text::placeholder {color:#bababa; <mark style="background-color:orange;">font-weight:bold</mark>; font-size:18px;}<br>
4. 검색창 키워드 크기 변경\
   원하는 크기로 코드값 \[font-size:사이즈px]를 입력해주세요.

   `변경 위치`  css > custom.css **59줄**\
   &#x20; `59` #header .top\_search .top\_text\_cont .top\_srarch\_text::placeholder {color:#bababa; font-weight:bold; <mark style="background-color:orange;">font-size:18px;</mark>}

</details>

<details>

<summary>상품명/ 짧은 설명/원가/판매가 디자인 수정</summary>

![](/files/qVMnv7bP2ZZWb81dSmEj)

* 폰트 사이즈 수정 시, font-size에 원하는 값을  입력해주세요.
* 색상 수정 시, color에  원하는 값을  입력해주세요.

✔️**상품명 디자인 수정**

`변경 위치`  css > good > list.css **48줄**\
&#x20; `48` .item\_tit\_box .item\_name{display:block; padding:5px 0 0 0; <mark style="background-color:orange;">font-size:13px</mark>; word-break: break-all; <mark style="background-color:orange;">color:#fa2828</mark>}

\
✔️**짧은 설명 디자인 수정**

`변경 위치`  css > good > list.css **49줄**\
&#x20; `49` .item\_tit\_box .item\_name\_explain{display:block; padding:0 10px 0 0px; <mark style="background-color:orange;">color:#a8a8a8</mark>; <mark style="background-color:orange;">font-siez:18px</mark>;}

\
✔️**원가 디자인 수정**

`변경 위치`  css > good > list.css **55줄**\
&#x20; `55` .item\_money\_box del{display:block; <mark style="background-color:orange;">color:#888888</mark>; <mark style="background-color:orange;">font-siez:18px</mark>;}

\
✔️**판매가 디자인 수정**

`변경 위치`  css > good > list.css **56줄**\
&#x20; `56` .item\_money\_box .item\_price{display:block; padding:7px 0 5px 0; <mark style="background-color:orange;">font-size:14px</mark>; <mark style="background-color:orange;">color:#b8874d</mark>;}

</details>

<details>

<summary>은행계좌/고객센터 디자인 수정하기</summary>

![](/files/j6oA0mU2I4h4WD5HfG7z)

* 폰트 사이즈 수정 시, font-size에 원하는 값을  입력해주세요.
* 색상 수정 시, color에  원하는 값을  입력해주세요.

✔️**무통장 계좌 번호 디자인 수정**

`변경 위치`  css >custom.css **111줄**\
&#x20; `111` .content\_info .bank\_info strong{padding:0; <mark style="background-color:orange;">color:#999999</mark>; <mark style="background-color:orange;">font-size:19px</mark>; font-weight:normal;}<br>

✔️**무통장 계좌 은행명, 예금주 디자인 수정**

`변경 위치`  css > custom.css **112줄**\
&#x20; `112`.content\_info .bank\_info p{<mark style="background-color:orange;">font-size:12px</mark>; <mark style="background-color:orange;">color:#999999</mark>;} <br>

✔️**고객센터 번호 디자인 수정**

`변경 위치`  css > custom.css **106줄**\
&#x20; `106` .content\_info .cs\_center strong{padding:0;<mark style="background-color:orange;">color:#999999</mark>;<mark style="background-color:orange;">font-size:19px</mark>;font-weight:normal;}<br>

✔️**고객센터 운영안내 디자인 수정**

`변경 위치`  css > custom.css **107줄**\
&#x20; `107` .content\_info .cs\_center p{<mark style="background-color:orange;">font-size:12px</mark>; <mark style="background-color:orange;">color:#999999</mark>;}<br>

</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/awesome.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.