고도몰 어드민 > 디자인 > 디자인 설정 > 디자인 스킨 레이아웃 설정 > 메인 > 쇼핑몰 메인본문
고도몰 어드민 > 디자인 > 디자인 설정 > 디자인 스킨 레이아웃 설정
고도몰 어드민 > 모바일샵 > 디자인 페이지 수정
' 내용을 찰나에서 복사한 디스플레이어 코드로 수정해요.
고도몰 어드민 > 모바일샵 > 모바일샵 디자인 관리 > 메인 > 쇼핑몰 메인본문
고도몰 어드민 > 모바일샵 > 디자인 페이지 수정
고도몰 무료스킨 > 비키
찰나 > 라이브러리
찰나 > 라이브러리 > 디스플레이어 복사
고도몰 어드민 > 디자인 > 디자인 설정 > 디자인 스킨 레이아웃 설정 페이지
' 내용을 찰나에서 복사한 디스플레이어 코드로 수정해요.
고도몰 어드민 > 디자인 > 디자인 설정 > 디자인 스킨 레이아웃 설정 > 메인 > 쇼핑몰 메인본문
고도몰 어드민 > 디자인 > 디자인 설정 > 디자인 스킨 레이아웃 설정
찰나 > 라이브러리
고도몰 어드민 > 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트 페이지
' 내용을 찰나에서 복사한 디스플레이어 코드로 수정해요.
4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경할 수 있습니다. ``` :root { --primary-default: #0cc472; /* 포인트 컬러 */ --primary-hover: #02b666; /* 포인트 컬러 hover */ --secondary-default: #ff5810; /* 서브 컬러 */ --neutrals-gray: #edebe5; --neutrals-dark: #000; --font-size: 14px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1450px; /* 화면이 최소로 작아질 수 있는 너비 */ --max-width: 1680px; /* 화면이 최대한 넓어 질 수 있는 너비 */ } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경할 수 있습니다.
> 메인
> 상품상세
> 주문결제
# Mygreek\_Mobile 스킨 가이드
> 공통
``` :root { --primary-default: #0cc472; /* 포인트 컬러 */ --primary-hover: #02b666; /* 포인트 컬러 hover */ --secondary-default: #ff5810; /* 서브 컬러 */ --neutrals-gray: #edebe5; --neutrals-dark: #000; --font-size: 12px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다.
> 메인
> 상품상세
> #### 주문결제
# 바람숲(BaRamSoop)
> **`카테고리`** 캠핑
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어)
>
> [샘플샵🖥️ 보기 →](https://freeskin61.godomall.com/)
>
> [샘플샵📱 보기 →]()
>
> [더 많은 무료스킨 보러가기 →](https://godomall.nhn-commerce.com/freeSkin)
{% content-ref url="/pages/0kd77TwrFShOtBepX0K6" %}
[BaRamSoop\_PC 스킨 가이드](/beginner/design/freeskin/baramsoop/pc-guide)
{% endcontent-ref %}
{% content-ref url="/pages/WBU4L5Wdu5QD7zqglrtf" %}
[BaRamSoop\_Mobile 스킨 가이드](/beginner/design/freeskin/baramsoop/mobile-guide)
{% endcontent-ref %}
{% content-ref url="/pages/3xq2RnkPNYFEsuvfOC3c" %}
[스킨 꾸미기](/beginner/design/basic-setting/skin)
{% endcontent-ref %}
# BaRamSoop\_PC 스킨 가이드
> 공통
4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경할 수 있습니다. ``` :root { --primary-default: #89735B; /* 포인트 컬러 */ --primary-hover: #6B5237; /* 포인트 컬러 hover */ --secondary-default: #387B53; /* 서브 컬러 */ --neutrals-gray: #747474; --neutrals-dark: #343434; --font-size: 14px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1426px; /* 화면이 최소로 작아질 수 있는 너비 */ --max-width: 1920px; /* 화면이 최대한 넓어 질 수 있는 너비 */ } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경할 수 있습니다.
> 메인
> 상품상세
> 주문결제
# BaRamSoop\_Mobile 스킨 가이드
> 공통
``` :root { --primary-default: #89735B; /* 포인트 컬러 */ --primary-hover: #6B5237; /* 포인트 컬러 hover */ --secondary-default: #387B53; /* 서브 컬러 */ --neutrals-gray: #747474; --neutrals-dark: #343434; --font-size: 12px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다.
> 메인
> 상품상세
> #### 주문결제
# 위유위(Weyouwe)
> **`카테고리`** 뷰티
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어)
>
> [샘플샵🖥️ 보기 →](https://freeskin44.godomall.com/)
>
> [샘플샵📱 보기 →]()
>
> [더 많은 무료스킨 보러가기 →](https://godomall.nhn-commerce.com/freeSkin)
{% content-ref url="/pages/qMRv9RiNu2t844SMcolQ" %}
[Weyouwe\_PC 스킨 가이드](/beginner/design/freeskin/weyouwe/pc-guide)
{% endcontent-ref %}
{% content-ref url="/pages/SWnCc77vSeaOogkOPIpJ" %}
[Weyouwe\_Mobile 스킨 가이드](/beginner/design/freeskin/weyouwe/mobile-guide)
{% endcontent-ref %}
{% content-ref url="/pages/3xq2RnkPNYFEsuvfOC3c" %}
[스킨 꾸미기](/beginner/design/basic-setting/skin)
{% endcontent-ref %}
# Weyouwe\_PC 스킨 가이드
> 공통
4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경할 수 있습니다. ``` :root { --primary-default: #700909; /* 포인트 컬러 */ --primary-hover: #490A0A; /* 포인트 컬러 hover */ --secondary-default: #0D0D0D; /* 서브 컬러 */ --neutrals-gray: #747474; --neutrals-dark: #343434; --font-size: 14px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-family-point: 'Bebas Neue'; /* 포인트 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1450px; /* 화면이 최소로 작아질 수 있는 너비 */ --max-width: 1680px; /* 화면이 최대한 넓어 질 수 있는 너비 */ } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경할 수 있습니다. 6. 메인 페이지 상품 리스트 타이틀 변경 시 --font-family-point 값을 변경 할 수 있습니다.
> 메인
> 상품상세
> 주문결제
# Weyouwe\_Mobile 스킨 가이드
> 공통
``` :root { --primary-default: #700909; /* 포인트 컬러 */ --primary-hover: #490A0A; /* 포인트 컬러 hover */ --secondary-default: #0D0D0D; /* 서브 컬러 */ --neutrals-gray: #747474; --neutrals-dark: #343434; --font-size: 12px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-family-point: 'Bebas Neue'; /* 포인트 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다. 6. 메인 상품리스트 타이틀 변경시 --font-family-point 값을 변경 합니다.
> 메인
> 상품상세
> #### 주문결제
# 소나루(Sonaru)
> **`카테고리`** 전자제품
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어)
>
> [샘플샵🖥️ 보기 →](https://freeskin63.godomall.com/)
>
> [샘플샵📱 보기 →]()
>
> [더 많은 무료스킨 보러가기 →](https://godomall.nhn-commerce.com/freeSkin)
{% content-ref url="/pages/hc1s8BU34KaLKBOU5tsx" %}
[Sonaru\_PC 스킨 가이드](/beginner/design/freeskin/sonaru/pc-guide)
{% endcontent-ref %}
{% content-ref url="/pages/TgjlLStE5iAHozDMPSG0" %}
[Sonaru\_Mobile 스킨 가이드](/beginner/design/freeskin/sonaru/mobile-guide)
{% endcontent-ref %}
{% content-ref url="/pages/3xq2RnkPNYFEsuvfOC3c" %}
[스킨 꾸미기](/beginner/design/basic-setting/skin)
{% endcontent-ref %}
# Sonaru\_PC 스킨 가이드
> 공통
4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경할 수 있습니다. ``` :root { --primary-default: #0B77E6; /* 포인트 컬러 */ --primary-hover: #075BB2; /* 포인트 컬러 hover */ --secondary-default: #F0627E; /* 서브 컬러 */ --neutrals-gray: #edebe5; --neutrals-dark: #000; --font-size: 14px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-family-point: "Syncopate", serif; --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1800px; /* 화면이 최소로 작아질 수 있는 너비 */ --max-width: 1920px; /* 화면이 최대한 넓어 질 수 있는 너비 */ } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경할 수 있습니다.
메뉴 변경하기
1. 상단 메뉴의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다.
**css > layout/layout.css**
```css
.top_member_box > li a{
display:inline-block;
padding-left:20px;
color:#000; /* 컬러 변경 */
font-size:14px; /* 폰트사이즈 수정 */
font-style:medium;
}
```
2. 장바구니 담긴상품 수량 폰트의 **color(색상)** 값을 변경할 수 있습니다.\
(현재는 기본 포인트 컬러 전역변수로 지정되어 있습니다.)
**css > layout/layout.css**
```css
.top_member_box > li strong {
color: var(--primary-default);/* 기본 포인트 컬러를 원하는 색상으로 변경 */
}
```
3. 상단 메뉴의 background-color(배경색)을 변경할 수 있습니다.
**css > layout/layout.css**
```css
#header {
position: relative;
background-color: #F0EEEF; /* 배경색 변경 */
}
```
4. GNB 메뉴 수정하기
**css > layout/layout.css**
```
.gnb .depth0 > li > a {
position: relative;
display: inline-block;
padding: 0 20px;
font-size: 14px; /* 폰트 크기 수정 */
font-weight: bold;
text-align: center;
color: red; /*폰트 컬러 추가 */
}
```
5. 하위 1차 메뉴 Color(색상), hover Color를 변경 할 수 있습니다.
**css > layout/layout.css**
```
.gnb .depth1 li a:hover {
color: var(--primary-default); /* hover 컬러 변경 */
}
.gnb .depth3 a {
color: #9f9f9f; /* 하위 메뉴 컬러 변경 */
}
```
6. 하위 메뉴 배경색을 변경 할 수 있습니다.
**css > layout/layout.css**
```
#header .header_top_cont.is-active::after {
content: '';
position: absolute;
top: 100%;
left: 0;
background-color: #fff; /* 배경색 변경 */
width: 100%;
height: 332px;
}
```
> 메인
> 상품상세
> 주문결제
# Sonaru\_Mobile 스킨 가이드
> 공통
``` :root { --primary-default: #0B77E6; /* 포인트 컬러 */ --primary-hover: #075BB2; /* 포인트 컬러 hover */ --secondary-default: #F0627E; /* 서브 컬러 */ --neutrals-gray: #edebe5; --neutrals-dark: #000; --font-size: 12px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-family-point: "Syncopate", serif; --font-regular: 400; --font-medium: 500; --font-bold: 700; } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다.
> 메인
> 상품상세
> #### 주문결제
# 메이트앤코(Mate\&Co)
> **`카테고리`** 가구
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어)
>
> [샘플샵🖥️ 보기 →](https://freeskin88.godomall.com/)
>
> [샘플샵📱 보기 →]()
>
> [더 많은 무료스킨 보러가기 →](https://godomall.nhn-commerce.com/freeSkin)
{% content-ref url="/pages/7MlVEiDiF9MqUorSsG1T" %}
[Mate\&Co\_PC 스킨 가이드](/beginner/design/freeskin/mate-and-co/pc-guide)
{% endcontent-ref %}
{% content-ref url="/pages/ZHxoWIxTGTaJNbrhZGti" %}
[Mate\&Co\_Mobile 스킨 가이드](/beginner/design/freeskin/mate-and-co/mobile-guide)
{% endcontent-ref %}
{% content-ref url="/pages/3xq2RnkPNYFEsuvfOC3c" %}
[스킨 꾸미기](/beginner/design/basic-setting/skin)
{% endcontent-ref %}
# Mate\&Co\_PC 스킨 가이드
> 공통
4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경할 수 있습니다. ``` :root { --primary-default: #197C43; /* 포인트 컬러 */ --primary-hover: #025023; /* 포인트 컬러 hover */ --secondary-default: #AC6F0D; /* 서브 컬러 */ --neutrals-gray: #EDEBE5; --neutrals-dark: #000; --font-size: 14px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1440px; /* 화면이 최소로 작아질 수 있는 너비 */ --max-width: 1920px; /* 화면이 최대한 넓어 질 수 있는 너비 */ } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경할 수 있습니다.
> 메인
> 상품상세
> 주문결제
# Mate\&Co\_Mobile 스킨 가이드
> 공통
``` :root { --primary-default: #197C43; /* 포인트 컬러 */ --primary-hover: #025023; /* 포인트 컬러 hover */ --secondary-default: #AC6F0D; /* 서브 컬러 */ --neutrals-gray: #EDEBE5; --neutrals-dark: #000; --font-size: 12px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다.
1. CS CENTER, BANK INFO 변경하기\
CS CENTER, BANK INFO 타이틀의 color(색상), font-size(크기), font-weight(굵기), text-align(정렬)값을 변경할 수 있습니다.
```css
#footer .ft_info_box .ft_info dl dt {
font-size: 13px;
font-weight: bold;
border-bottom: 1px solid #000;
padding-bottom: 5px;
}
```
2. CS CENTER 전화번호, 예금주의 color(색상), font-size(크기), font-weight(굵기) 값을 변경할 수 있습니다.
```css
#footer .ft_info dl dd p.phone a {
font-size: 14px; /* 글자 크기 */
font-weight: bold; /* 글자 굵기 */
color: #000; /* 글자 색 */
}
```
```css
#footer .ft_info dl dd .account_holder {
padding: 5px 0;
font-size: 14px; /*글자 크기*/
font-weight: 700;
}
```
3\. 푸터 메뉴버튼의 **font-size(크기), color(색상), text-align(정렬), letter-spacing(자간), font-weight(굵기)** 값을 변경할 수 있습니다.
**css/gd\_layout.css**
```css
#footer footer .ft_info2_box .ft_menu li a {
display: block;
padding: 18px 0px 10px 0px;
font-size: 12px;
color: #000;
text-align: left;
letter-spacing: -1px;
font-weight: 700;
}
```
4\. 푸터 정보 부분의 **text-align(정렬), font-size(크기), color(색상)** 값을 변경할 수 있습니다.
**css/gd\_layout.css**
```css
#footer footer .ft_info2_box .ft_address {
padding: 0px;
text-align: center;
font-size: 12px;
color: #000;
word-break: keep-all;
}
```
5\. 푸터 카피라잇 영역의 **color(색상), font-size(크기), text-align(정렬)** 값을 변경할 수 있습니다.
**css/gd\_layout.css**
```css
#footer footer .ft_copy {
padding: 15px 0 24px;
color: #000;
font-size: 10px;
text-align: left;
font-style: normal;
}
```
> 메인
> 상품상세
> #### 주문결제
# 퍼피레드(Puppyred)
> **`카테고리`** 애견
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어)
>
> [샘플샵🖥️ 보기 →](https://freeskin78.godomall.com/)
>
> [샘플샵📱 보기 →](https://m-freeskin78.godomall.com/)
>
> [더 많은 무료스킨 보러가기 →](https://godomall.nhn-commerce.com/freeSkin)
{% content-ref url="/pages/wSs2MuroxGO7dvyNHZAL" %}
[Puppyred\_PC 스킨 가이드](/beginner/design/freeskin/puppyred/pc-guide)
{% endcontent-ref %}
{% content-ref url="/pages/aabcxmZqOBgqJHCjeW4V" %}
[Puppyred\_Mobile 스킨 가이드](/beginner/design/freeskin/puppyred/mobile-guide)
{% endcontent-ref %}
{% content-ref url="/pages/3xq2RnkPNYFEsuvfOC3c" %}
[스킨 꾸미기](/beginner/design/basic-setting/skin)
{% endcontent-ref %}
# Puppyred\_PC 스킨 가이드
> 공통
4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경할 수 있습니다. ``` :root { --primary-default: #A991FF; /* 포인트 컬러 */ --primary-hover: #7D60E5; /* 포인트 컬러 hover */ --secondary-default: #AECF0C; /* 서브 컬러 */ --neutrals-gray: #edebe5; --neutrals-dark: #000; --font-size: 14px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1440px; /* 화면이 최소로 작아질 수 있는 너비 */ --max-width: 1920px; /* 화면이 최대한 넓어 질 수 있는 너비 */ } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경할 수 있습니다.
> 메인
> 상품상세
> 주문결제
# Puppyred\_Mobile 스킨 가이드
> 공통
``` :root { --primary-default: #A991FF; /* 포인트 컬러 */ --primary-hover: #7D60E5; /* 포인트 컬러 hover */ --secondary-default: #AECF0C; /* 서브 컬러 */ --neutrals-gray: #edebe5; --neutrals-dark: #000; --font-size: 12px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다.
> 메인
> 상품상세
> #### 주문결제
# 글랜스(Glance)
> **`카테고리`** 잡화
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어)
>
> [샘플샵🖥️ 보기 →](https://freeskin19.godomall.com/)
>
> [샘플샵📱 보기 →](https://m-freeskin19.godomall.com/)
>
> [더 많은 무료스킨 보러가기 →](https://godomall.nhn-commerce.com/freeSkin)
{% content-ref url="/pages/kjbVkAWecvVrvjpoEPGX" %}
[Glance\_PC 스킨 가이드](/beginner/design/freeskin/glance/pc-guide)
{% endcontent-ref %}
{% content-ref url="/pages/SErb08CeqxXr9p0Nydve" %}
[Glance\_Mobile 스킨 가이드](/beginner/design/freeskin/glance/mobile-guide)
{% endcontent-ref %}
{% content-ref url="/pages/3xq2RnkPNYFEsuvfOC3c" %}
[스킨 꾸미기](/beginner/design/basic-setting/skin)
{% endcontent-ref %}
# Glance\_PC 스킨 가이드
> 공통
4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경할 수 있습니다. ``` :root { --primary-default: #909090; /* 포인트 컬러 */ --primary-hover: #848484; /* 포인트 컬러 hover */ --secondary-default: #AC6F0D; /* 서브 컬러 */ --neutrals-gray: #BCBCBC; --neutrals-dark: #000; --font-size: 14px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1440px; /* 화면이 최소로 작아질 수 있는 너비 */ --max-width: 1920px; /* 화면이 최대한 넓어 질 수 있는 너비 */ } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경할 수 있습니다.
> 메인
> 상품상세
> 주문결제
# Glance\_Mobile 스킨 가이드
> 공통
``` :root { --primary-default: #909090; /* 포인트 컬러 */ --primary-hover: #848484; /* 포인트 컬러 hover */ --secondary-default: #AC6F0D; /* 서브 컬러 */ --neutrals-gray: #BCBCBC; --neutrals-dark: #000; --font-size: 12px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다.
1. CS CENTER, BANK INFO 변경하기\
CS CENTER, BANK INFO 타이틀의 color(색상), font-size(크기), font-weight(굵기), text-align(정렬)값을 변경할 수 있습니다.
```css
#footer .ft_info_box .ft_info dl dt {
font-size: 12px;
font-weight: 700;
border-bottom: 1px solid #000;
padding-bottom: 5px;
}
```
2. CS CENTER 전화번호, 예금주의 color(색상), font-size(크기), font-weight(굵기) 값을 변경할 수 있습니다.
```css
#footer .ft_info dl dd p.phone a {
font-size: 18px; /* 글자 크기 */
font-weight: bold; /* 글자 굵기 */
color: #000; /* 글자 색 */
}
```
```css
#footer .ft_info dl dd .account_holder {
padding: 5px 0;
font-size: 12px; /*글자 크기*/
}
```
3\. 푸터 메뉴버튼의 **font-size(크기), color(색상), text-align(정렬), letter-spacing(자간), font-weight(굵기)** 값을 변경할 수 있습니다.
**css/gd\_layout.css**
```css
#footer footer .ft_info2_box .ft_menu li a {
display: block;
padding: 18px 0px 10px 0px;
font-size: 12px;
color: #000;
text-align: left;
letter-spacing: -1px;
}
```
4\. 푸터 정보 부분의 **text-align(정렬), font-size(크기), color(색상)** 값을 변경할 수 있습니다.
**css/gd\_layout.css**
```css
#footer footer .ft_info2_box .ft_address {
padding: 0px;
text-align: center;
font-size: 12px;
color: #484848;
word-break: keep-all;
}
```
5\. 푸터 카피라잇 영역의 **color(색상), font-size(크기), text-align(정렬)** 값을 변경할 수 있습니다.
**css/gd\_layout.css**
```css
#footer footer .ft_copy {
padding: 24px 0;
color: #484848;
font-size: 12px;
text-align: center;
font-style: normal;
}
```
> 메인
> 상품상세
> #### 주문결제
# 케이스(Case)
> **`카테고리`** 폰케이스
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어)
>
> [샘플샵🖥️ 보기 →](https://freeskin30.godomall.com/)
>
> [샘플샵📱 보기 →](https://m-freeskin30.godomall.com/)
>
> [더 많은 무료스킨 보러가기 →](https://godomall.nhn-commerce.com/freeSkin)
{% content-ref url="/pages/3hdA9sRUs8UjeWH0nLsP" %}
[Case\_PC 스킨 가이드](/beginner/design/freeskin/case/pc-guide)
{% endcontent-ref %}
{% content-ref url="/pages/C9ESPFPErUERC3fqLzbo" %}
[Case\_Mobile 스킨 가이드](/beginner/design/freeskin/case/mobile-guide)
{% endcontent-ref %}
{% content-ref url="/pages/3xq2RnkPNYFEsuvfOC3c" %}
[스킨 꾸미기](/beginner/design/basic-setting/skin)
{% endcontent-ref %}
# Case\_PC 스킨 가이드
> 공통
4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경합니다. ``` :root { --primary-default: #0057FF; /* 포인트 컬러 */ --primary-hover: #00308D; /* 포인트 컬러 hover */ --secondary-default: #EF78FF; /* 서브 컬러 */ --neutrals-gray: #D4D4D4; --neutrals-gray-bright: #F5F5F5; --neutrals-dark: #000; --font-size: 14px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 픈트 명 */ --font-family-oswald: 'Oswald'; --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1450px; /* 최소 너비 */ --max-width: 1200px; /* 최대 너비 */ } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다.
메뉴 변경하기
1. 상단 메뉴의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다.
**css > layout/layout.css**
```css
.gnb .depth0 > li > a {
display: inline-block;
padding: 0 20px; /* 좌우 여백 수정 */
font-size: calc(var(--font-size) + 2px); /*폰트 사이즈 변경*/
font-weight: var(--font-medium);
text-align: center;
line-height: 49px;
color: #000; /* 폰트 색 변경 */
}
```
2. 서브 메뉴 color(색상), border-radius(보더 라운드), font-size(폰트 크기)를 변경할 수 있습니다
```css
.depth1 a {
position: relative;
font-size: calc(var(--font-size) + 2px); /* 폰트 크기 변경 */
font-weight: var(--font-medium);
color: var(--neutrals-dark); /* 컬러 */
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
height: 39px;
border-radius: 10px; /* 보더 라운드 */
padding-inline: 10px;
}
.depth1 li:hover > a {
background-color: var(--neutrals-gray-bright); /* hover 배경색 변경 */
height: 39px;
width: 100%;
border-radius: 10px;
padding-inline: 10px;
}
```
3. 장바구니 담긴상품 수량 폰트의 color(색상) 값을 변경할 수 있습니다. \
(현재는 기본 포인트 컬러 전역변수로 지정되어 있습니다.)\
css > layout/layout.css
```css
.top_member_box > li strong {
display: inline-flex;
padding: 4px 6px;
font-weight: var(--font-bold);
font-size: calc(var(--font-size) - 4px); /* 폰트 사이즈 변경 */
align-items: center;
background-color: var(--primary-default); /* 배경색 변경 */
color: #fff; /* 폰트 색 변경 */
vertical-align: top;
border-radius: 50%;
transform: translate(5px, -2px);
}
```
> 메인
> 상품상세
> 주문결제
# Case\_Mobile 스킨 가이드
> 공통
``` :root { --primary-default: #0057FF;/* 포인트 컬러 */ --primary-hover: #00308D;/* 포인트 컬러 hover */ --secondary-default: #EF78FF;/* 서브 컬러 */ --neutrals-gray: #D4D4D4; --neutrals-gray-brite: #f5f5f5; --neutrals-dark: #000; --font-size: 12px;/* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable';/* 기본 폰트 명 */ --font-oswald: 'Oswald', sans-serif; --font-regular: 400; --font-medium: 500; --font-bold: 700; } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다.
> 메인
> 상품상세
> #### 주문결제
# 아뜰리에(Atelier)
> **`카테고리`** 향초
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어)
>
> [샘플샵🖥️ 보기 →](https://freeskin28.godomall.com/)
>
> [샘플샵📱 보기 →](https://m-freeskin28.godomall.com/)
>
> [더 많은 무료스킨 보러가기 →](https://godomall.nhn-commerce.com/freeSkin)
{% content-ref url="/pages/e1kg3CSn9ig5sC03YuJo" %}
[Atelier\_PC 스킨 가이드](/beginner/design/freeskin/atelier/pc-guide)
{% endcontent-ref %}
{% content-ref url="/pages/y5OoBlLDGacPn8P7W1D2" %}
[Atelier\_Mobile 스킨 가이드](/beginner/design/freeskin/atelier/mobile-guide)
{% endcontent-ref %}
{% content-ref url="/pages/3xq2RnkPNYFEsuvfOC3c" %}
[스킨 꾸미기](/beginner/design/basic-setting/skin)
{% endcontent-ref %}
# Atelier\_PC 스킨 가이드
> 공통
4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경합니다. ``` :root { --primary-default: #cb558f; /* 포인트 색 */ --primary-hover: #ad1b63; /* 포인트 색 hover */ --secondary-default: #b1b5bb;/* 서브 색 */ --neutrals-gray: #f0f0f0; --neutrals-dark: #000; --font-size: 14px; /* 기본 폰트 크기 */ --font-family: 'Pretendard variable'; /* 기본 폰트 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1450px; --max-width: 1680px; } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다.
> 메인
> 상품상세
> 주문결제
# Atelier\_Mobile 스킨 가이드
> 공통
``` :root { --primary-default: #0057FF;/* 포인트 컬러 */ --primary-hover: #00308D;/* 포인트 컬러 hover */ --secondary-default: #EF78FF;/* 서브 컬러 */ --neutrals-gray: #D4D4D4; --neutrals-gray-brite: #f5f5f5; --neutrals-dark: #000; --font-size: 12px;/* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable';/* 기본 폰트 명 */ --font-oswald: 'Oswald', sans-serif; --font-regular: 400; --font-medium: 500; --font-bold: 700; } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다.
> 메인
> 상품상세
> #### 주문결제
# 매치포인트(Matchpoint)
> **`카테고리`** 스포츠/레져
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어)
>
> [샘플샵🖥️ 보기 →](https://freeskin69.godomall.com/)
>
> [샘플샵📱 보기 →](https://m-freeskin69.godomall.com/)
>
> [더 많은 무료스킨 보러가기 →](https://godomall.nhn-commerce.com/freeSkin)
{% content-ref url="/pages/fGIOjmhkIWYkRCTZGWR9" %}
[Matchpoint\_PC 스킨 가이드](/beginner/design/freeskin/matchpoint/pc-guide)
{% endcontent-ref %}
{% content-ref url="/pages/yLckuMWhV3ST0vZ2xjVz" %}
[Matchpoint\_Mobile 스킨 가이드](/beginner/design/freeskin/matchpoint/mobile-guide)
{% endcontent-ref %}
{% content-ref url="/pages/3xq2RnkPNYFEsuvfOC3c" %}
[스킨 꾸미기](/beginner/design/basic-setting/skin)
{% endcontent-ref %}
# Matchpoint\_PC 스킨 가이드
> 공통
파일명 : *css/layout/layout.css*
1. 상단 메뉴 텍스트의 스타일을 변경할 수 있다.
```css
.top_member_box > li a {
display: inline-block;
color: #4F4F4F;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.8px;
text-transform: uppercase;
}
```
2. 장바구니 담긴상품 수량 스타일을 변경할 수 있다.
```css
.cart-count {
width: 20px;
height: 20px;
background-color: var(--primary-default);
color: #fff;
display: inline-block;
border-radius: 50%;
text-align: center;
font-size: 11px;
font-style: normal;
font-weight: 500;
line-height: 20px;
transform: translate(2px, -3px);
}
```
3. 상단 메뉴의 배경색을 변경할 수 있다.
```css
#header .header_top {
background-color: #fff;
}
```
4. 카테고리 전체보기 메뉴 패널의 스타일을 변경할 수 있다.
```css
.gnb_allmenu_wrap {
display: none;
position: fixed;
top: 0;
left: 0;
width: 400px;
background: #fff;
z-index: 999;
}
```
5. 카테고리 메뉴의 스타일을 변경할 수 있다.
```css
.header_gnb .gnb_allmenu_box a,
.header_gnb .gnb_allmenu_box button {
color: var(--black);
font-size: 24px;
font-weight: 400;
height: 64px;
line-height: 64px;
width: 100%;
text-align: left;
display: block;
}
```
6. 카테고리 메뉴 마우스 오버시, 스타일을 지정할 수 있다.
```css
.header_gnb .gnb_allmenu_box li:hover,
.header_gnb .gnb_allmenu_box li.is-open > button:hover {
background-color: var(--primary-default);
}
```
7. 검색창의 스타일을 변경할 수 있다. 7-1) 검색 아이콘을 변경할 수 있다.
```css
.top-search-btn {
position: absolute;
top: 0;
right: 0;
border-radius: 8px;
width: 32px;
height: 32px;
background: #fff url(../../img/common/btn/btn_top_search.svg) no-repeat right;
text-indent: -9999em;
}
```
7-2) 검색 인풋창의 스타일을 변경할 수 있다.
```css
#header .top_search .top_text_cont .top_srarch_text {
display: block;
float: right;
width: 34px;
height: 34px;
border-radius: 8px;
box-sizing: border-box;
-moz-transition: all 0.35s;
-webkit-transition: all 0.35s;
border: 1px solid transparent;
}
```
7-3) 최근 검색어 레이아웃의 스타일을 변경할 수 있다.
```css
.recent_box {
float: left;
width: 333px;
min-height: 65px;
font-size: 12px;
text-align: center;
border-right: none 0;
vertical-align: top;
}
```
7-4) 추천상품 레이아웃의 스타일을 변경할 수 있다.
```css
.recom_box {
display: inline-block;
width: 148px;
min-height: 218px;
padding: 12px 15px 10px;
font-size: 10px;
}
```
파일명 : *css/layout/layout.css*
1. 푸터 메뉴의 스타일을 변경할 수 있다.
```css
.foot_list ul li a {
padding: 0 16px;
font-weight: 700;
}
.foot_list ul .divider {
display: inline-block;
width: 1px;
background-color: #fff;
height: 12px;
}
```
2. 푸터 정보 영역의 스타일을 변경할 수 있다.
```css
.foot_cont .foot_info {
color: #fff;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}
.content_info .cs_center p,
.content_info .bank_info p,
.content_info .notice_list li a {
color: #fff;
font-family: 'Pretendard Variable';
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}
```
> 메인
> 상품 상세
파일명 : *css/goods/goods.css*
1. 상품 상세 페이지에서 상품명과 상품 항목 레이블의 스타일을 지정할 수 있다.
```css
/* 상품 상세 - 상품명 */
.item_detail_tit h3 {
width: 405px;
font-size: 18px;
word-break: break-all;
}
/* 항목 레이블 (제목) */
.item_detail_list dt {
float: left;
width: 80px;
margin: 0 10px 0 0;
color: #888888;
font-weight: normal;
word-wrap: break-word;
}
```
2. \[공유], \[조건별배송] 버튼의 스타일을 지정할 수 있다.
```css
.btn_gray_list a, .btn_gray_list button {
display: inline-block;
padding: 0 0 0 11px;
border: 1px solid #999;
vertical-align: middle;
}
```
3. 총 합계 금액의 스타일을 지정할 수 있다.
```css
.item_tatal_box .total_amount dd {
color: var(--primary-default);
}
.item_tatal_box .total_amount dd strong {
font-size: 20px;
font-size: 25px;
}
```
4. \[장바구니], \[찜하기], \[바로 구매] 버튼의 스타일을 지정할 수 있다.
```css
/* 장바구니, 찜하기 버튼 */
.btn_add_cart, .btn_add_wish {
display: inline-block;
width: 152px;
height: 52px;
padding: 0 10px 0 10px;
color: #3e3d3c;
font-size: 16px;
border: 1px solid #cccccc;
background: #ffffff;
text-align: center;
}
/* 바로구매 버튼 */
.btn_add_order, .btn_add_order_related, .btn_add_cart_related {
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 var(--primary-default);
background: var(--primary-default);
text-align: center;
font-weight: 400;
}
```
파일명 : `css/goods/goods.css` 탭 메뉴의 스타일을 지정할 수 있다.
```css
/* 탭 메뉴 아이템 */
.item_goods_tab li a {
display: block;
margin: 0 0 0 -1px;
padding: 10px 0 12px 0;
color: #999999;
font-size: var(--font-size);
border: solid #dadada;
border-width: 1px 1px 0;
background: #ffffff;
}
/* 선택된 탭 메뉴 아이템 */
.item_goods_tab li.on a {
padding-top: 18px;
margin-top: 8px;
color: #333333;
font-weight: bold;
border-bottom: 2px solid #ffffff;
}
/* 탭 메뉴 아이템 텍스트 강조 시 (상품후기, 문의 몇건인지 표시할 때 사용) */
.item_goods_tab li a strong {
color: var(--primary-default);
}
```
> 주문결제
파일명 : *css/order/order.css*
1. 장바구니 타이틀의 스타일을 지정할 수 있다. (주문서 공통)
```css
/* 상품 상세 - 상품명 */
.order_wrap .order_tit h2 {
float: left;
font-size: 28px;
color: #222222;
}
```
2. 브레드크럼(주문 단계)의 스타일을 변경할 수 있다. (주문서 공통)
```css
.order_wrap .order_tit ol li {
float: left;
font-size: 14px;
color: #d1d1d1;
}
/* 현재 단계를 나타내는 스타일 */
.order_wrap .order_tit .page_on {
color: #000;
font-weight: bold;
}
```
3. 장바구니에 담긴 상품 목록 테이블의 스타일을 변경할 수 있다. (주문서 공통)
```css
.order_table_type table {
width:100%;
border:0;
border-spacing:0;
border-collapse:collapse;
text-align:center;
}
.order_table_type th {
padding:9px 10px 10px 10px;
border-top:1px solid #999999;
border-bottom:1px solid #dbdbdb;
background:#f7f7f7;
}
.order_table_type td {
height: 31px;
padding: 15px 10px 14px 10px;
color: #777777;
border-bottom: 1px solid #dbdbdb;
background:#ffffff;
}
```
4. \[선택 상품 주문], \[전체 상품 주문] 버튼의 스타일을 변경할 수 있다.
```css
/* 선택 상품 주문 */
.btn_order_choice_buy {
min-width: 190px;
height: 55px;
padding: 0 20px 0 20px;
color: #3e3d3c;
font-weight: bold;
font-size: 14px;
border: 1px solid #cccccc;
background: #fff;
cursor: pointer;
}
/* 전체 상품 주문 */
.btn_order_whole_buy {
min-width: 190px;
height: 55px;
padding: 0 20px 0 20px;
color: #ffffff;
font-size: 14px;
border: 1px solid var(--primary-default);
background: var(--primary-default);
cursor: pointer;
font-weight: bold;
}
```
파일명 : *css/order/order.css*
1. 서브 타이틀, 설명 텍스트 및 최종 결제 금액 등 스타일을 변경할 수 있다.
```css
/* 서브 타이틀 */
.order_zone_tit h4 {
font-size: 16px;
}
/* 설명 */
.order_zone_tit span {
padding: 0 0 0 10px;
color: #777777;
font-size: 12px;
font-weight: normal;
}
/* 결제 최종 금액 */
.payment_final_total dd {
display: inline-block;
font-size: 30px;
color: var(--primary-default);
}
```
2. \[결제하기]버튼의 스타일을 변경할 수 있다.
```css
.btn_order_buy {
display: inline-block;
width: 300px;
height: 61px;
line-height: 59px;
color: #fff;
font-size: 20px;
border: 1px solid var(--primary-default);
background: var(--primary-default);
text-align: center;
}
```
# Matchpoint\_Mobile 스킨 가이드
> 공통
파일명 : *css/gd\_layout.css*
1. 상단 레이아웃의 스타일을 변경할 수 있다.
```css
#header_wrap header .header_box {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 12px;
border-bottom: 1px solid #000;
height: 62px;
}
```
2. 햄버거 메뉴 아이콘을 변경할 수 있다.
```css
#header_wrap header .header_box .side_menu span {
display: inline-block;
width: 20px;
height: 15px;
font-size: 0;
background: url(../img/icon/icon_menu.png) no-repeat center;
background-size: 100%;
vertical-align: top;
}
```
3. 검색 아이콘을 변경할 수 있다.
```css
#header_wrap header .header_box .top_search span {
display: inline-block;
width: 18px;
height: 17px;
font-size: 0;
background: url(../img/icon/icon_search.png) no-repeat center;
background-size: 100%;
vertical-align: top;
}
```
4. 마이페이지 아이콘을 변경할 수 있다.
```css
#header_wrap header .header_box .mypage span {
display: inline-block;
width: 21px;
height: 21px;
font-size: 0;
background: url(../img/icon/icon_mypage.png) no-repeat center;
background-size: 100%;
vertical-align: top;
}
```
5. 장바구니 아이콘을 변경할 수 있다.
```css
/* 장바구니 아이콘 */
#header_wrap header .header_box .cart span {
display: inline-block;
width: 20px;
height: 21px;
font-size: 0;
background: url(../img/icon/icon_cart.png) no-repeat center;
background-size: 100%;
vertical-align: top;
}
/* 장바구니 수량 정보 */
#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;
}
```
파일명 : *css/gd\_layout.css*
1. 언어 타이틀 스타일을 수정할 수 있다.
```css
.nav_language .tit {
display: table-cell;
width: 30%;
font-size: 15px;
padding: 13px 15px 13px 15px;
color: #262626;
font-weight: bold;
box-sizing: border-box;
}
```
2. \[Q\&A], \[최근본상품], \[찜리스트] 아이콘과 텍스트 스타일을 변경할 수 있다.
```css
/* 텍스트 */
.nav_link ul li a {
display: block;
padding: 36px 0 0 0;
font-size: 13px;
color: #888;
}
/* Q&A */
.nav_link ul li:nth-child(1) a {
background: url(../img/icon/icon_qna.svg) no-repeat center 3px;
background-size: 33px 30px;
}
/* 최근본상품 */
.nav_link ul li:nth-child(2) a {
background: url(../img/icon/icon_prd_latest.svg) no-repeat center 4px;
background-size: 33px 30px;
}
/* 찜리스트 */
.nav_link ul li:nth-child(3) a {
background: url(../img/icon/icon_lnb_heart.svg) no-repeat center 4px;
background-size: 33px 30px;
}
```
3. \[카테고리], \[브랜드] 버튼의 스타일을 변경할 수 있다.
```css
/* 버튼 기본 스타일 */
.nav_tabmenu_box .nav_tabmenu li span {
display: block;
padding: 10px 0 10px 0;
background: #e8e8e8;
color: #acacac;
}
/* 활성화된 상태일 때 */
.nav_tabmenu_box .nav_tabmenu li.on span {
background: var(--primary-default);
color: #fff;
font-weight: bold;
}
```
4. 카테고리 트리 메뉴 아이템의 스타일을 변경할 수 있다.
```css
.category_side > li a {
position: relative;
display: block;
padding: 12px 0 12px 0;
font-size: 16px;
color: #262626;
}
```
5. \[커뮤니티] 타이틀과 공통 게시판 링크 스타일을 변경할 수 있다.
```css
/* 커뮤니티 타이틀 */
.nav_community_box .comm_tit {
padding: 10px 0 10px 10px;
margin: 0 10px 0 6px;
font-size: 18px;
color: #272727;
font-weight: bold;
border-bottom: 0px solid #000000;
}
/* 공통 게시판 링크 */
.nav_community_box .board_cate li a {
display: block;
padding: 6px 0;
font-size: 14px;
color: #1c1c1c;
}
```
6. 사이드 메뉴 닫기 버튼의 스타일을 지정할 수 있다.
```css
#wrap nav .left_close {
position: fixed;
top: 20px;
left: 310px;
width: 29px;
height: 29px;
background: url(../img/icon/icon_left_x.png) no-repeat center;
background-size: 100%;
z-index: 1002;
}
```
파일명 : *css/gd\_layout.css*
1. 푸터 메뉴의 스타일을 변경할 수 있다.
```css
#footer footer .ft_menu li a {
display: block;
font-size: 12px;
font-weight: 700;
}
```
2. \[고객센터], \[은행계좌 안내] 타이틀의 스타일을 변경할 수 있다.
```css
.main_info dl dt > span {
font-weight: 700;
font-size: 12px;
}
```
4. 푸터 정보 영역과 카피라이트 텍스트의 스타일을 변경할 수 있습니다.
```css
/* 푸터 정보 */
#footer footer .ft_info2_box .ft_address {
padding: 0px;
text-align: left;
font-size: 12px;
word-break: keep-all;
}
/* 카피라이트 */
#footer footer .ft_copy {
font-size: 9px;
text-align: left;
font-style: normal;
margin-block: 24px;
}
```
> 메인
1. 상품 진열 타이틀의 스타일을 수정할 수 있다.
```css
/* css/proc/proc.css */
._goods_display_main h3 {
position: relative;
display: block;
padding: 40px 0px 0px 16px;
font-size: 32px;
color: #181818;
text-align: left;
font-weight: 400;
}
```
2. 더보기 버튼 스타일을 수정할 수 있다.
```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;
}
/* 상단 더보기 버튼 */
.main_more_btn2 {
display: block;
width: 70px;
padding: 2px 8px;
text-align: center;
font-size: 12px;
font-weight: 600;
color: #9e9e9e;
box-sizing: border-box;
position: absolute;
top: 48px;
right: 0px;
}
```
> 상품 상세
파일명 : *css/goods/goods.css*
1. 브랜드 스타일을 변경할 수 있다.
```css
.goods_view .detail_info .detail_info_top .brand {
padding: 0 0 2px 0;
color: #666;
font-size: 13px;
}
```
2. 상품명 스타일을 변경할 수 있다.
```css
.goods_view .detail_info h3 {
font-size: 18px;
color: #333333;
word-break: break-all;
}
```
3. 가격 정보 스타일을 변경할 수 있다.
```css
.goods_view .detail_info .detail_info_top .price_box .price {
font-size: 20px;
color: #333333;
}
```
4. \[공유하기], \[찜하기] 버튼 스타일을 수정할 수 있다.
```css
/* 공유하기 버튼 */
.goods_view .share_btn_box ul li.d_share button {
padding-left: 25px;
background: url(../../img/icon/icon_share.png) no-repeat left center;
background-size: 19px;
}
/* 찜하기 버튼 */
.goods_view .share_btn_box ul li.d_wish button {
padding-left: 25px;
background: url(../../img/icon/icon_heart.png) no-repeat left center;
background-size: 19px;
}
```
파일명 : *css/goods/goods.css* 탭 메뉴 박스 스타일을 수정할 수 있다.
```css
.goods_view .detail_btm_tab_menu_box {
position: relative;
width: 100%;
height: 60px;
border-top: 10px solid #f9f9f9;
border-bottom: 1px solid #e2e2e2;
box-sizing: border-box;
}
/* 탭이 선택되어졌을 때 */
.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;
}
```
파일명 : *css/goods/goods.css* 서브 타이틀과 디스크립션의 스타일을 수정할 수 있다.
```css
/* 서브 타이틀 */
.openblock_content dl dt {
padding: 5px 5px 5px 5px;
white-space: normal;
font-weight: bold;
color: #111111;
}
/* 디스크립션 */
.openblock_content dl dd {
padding: 5px 5px 5px 5px;
color: #555555;
vertical-align: top;
}
```
파일명 : *css/goods/goods.css*
1. 평가, 리뷰수 정보의 스타일을 변경할 수 있다.
```css
/* 평가, 리뷰수 라벨 */
.plus_review_container .plus_review_top_box dl dt {
display: table-cell;
font-size: 13px;
color: #606060;
vertical-align: middle;
}
/* 평가수, 리뷰수 숫자 */
.plus_review_container .plus_review_top_box dl dd {
display: table-cell;
padding-inline: 4px 8px;
font-weight: bold;
font-size: 14px;
color: var(--primary-default);
vertical-align: middle;
}
```
2. 플러스 리뷰 > \[리뷰등록], \[나와 비슷한 리뷰 보기] 버튼 스타일을 변경할 수 있다.
```css
/* css/gd_plus_review.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;
}
/* 나와 비슷한 리뷰 보기 버튼 */
.plus_review_add_search > a {
font-size: 13px;
font-weight: bold;
color: #000;
line-height: 38px;
text-align: center;
display: block;
border: #e2e2e2 1px solid;
background: #fff;
}
```
3. \[후기 작성], \[더보기 n/n] 버튼 스타일을 변경할 수 있다.
```css
/* css/gd_button.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;
}
/* 더보기 n/n 버튼 */
.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;
}
```
> 주문 결제
1. 장바구니 목록에서 삭제 버튼의 스타일을 수정할 수 있다.
```css
/* css/gd_button.css */
.cart_onedel_btn {
width: 24px;
height: 24px;
font-size: 0;
background: url(../img/icon/icon_x3.png) no-repeat center;
background-size: 12px 12px;
border: none;
}
```
2. 상품명, 주문수량, 가격정보 등의 스타일을 수정할 수 있다.
```css
/* css/order/order.css */
/* 텍스트 일반 */
.cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody p {
font-size: 12px;
line-height: 16px;
color: #9d9d9d;
}
/* 상품명 */
.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;
}
/* 가격 */
.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: #000;
font-weight: bold;
}
```
3. 결제 금액 정보에 대한 스타일을 변경할 수 있다.
```css
/* css/order/order.css */
/* 항목 타이틀 */
.cart .my_buy dl dt {
display: table-cell;
width: 50%;
font-size: 13px;
color: #5e5e5e;
}
/* 항목에 대한 값 */
.cart .my_buy dl dd {
display: table-cell;
width: 50%;
text-align: right;
font-size: 15px;
color: #5e5e5e;
}
/* 총 합계 금액 */
.cart .my_buy dl.total dd {
color: #000;
font-size: 17px;
}
```
4. \[선택상품 삭제], \[선택상품 주문], \[전체주문] 버튼의 스타일을 수정할 수 있다.
```css
/* css/gd_button.css */
/* 선택상품 삭제, 선택상품 주문 버튼 */
.cart_select_order_btn,
.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;
}
/* 전체주문 버튼 */
.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;
}
```
1. 서브 타이틀의 스타일을 변경할 수 있다.
```css
/* css/order/order.css */
.order .order_tit {
border-top: 10px solid #f9f9f9;
color: #333333;
font-size: 16px;
line-height: 36px;
padding: 20px 16px 0px 16px;
}
```
2. 배송정보 버튼바 스타일을 변경할 수 있다.
```css
/* css/order/order.css */
/* 버튼 스타일 */
.order .order_box .delivery_box .tab_menu ul li {
display: table-cell;
width: 33.3%;
border: 1px solid #c7c7c7;
border-left: none;
background: #ffffff;
vertical-align: middle;
}
/* 텍스트 스타일 */
.order .order_box .delivery_box .tab_menu ul li a {
display: block;
padding: 10px 7px;
color: #333333;
text-align: center;
border-left: none;
box-sizing: border-box;
}
/* 선택되었을 때 버튼 스타일 */
.order .order_box .delivery_box .tab_menu ul li.active {
background: #000;
}
/* 선택되었을때 텍스트 스타일 */
.order .order_box .delivery_box .tab_menu ul li.active a {
color: #fff;
font-weight: bold;
}
```
3. \[우편번호], \[쿠폰 조회 및 적용], \[결제하기] 버튼 스타일을 수정할 수 있다.
```css
/* css/gd_button.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;
}
/* 쿠폰 조회 및 적용 버튼 */
.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;
}
/* 결제하기 버튼 */
.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;
}
```
# 홍삶(Honglife)
> **`카테고리`** 건강 기능 식품
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어)
>
> [샘플샵🖥️ 보기 →](https://freeskin32.godomall.com/)
>
> [샘플샵📱 보기 →](https://m-freeskin32.godomall.com/)
>
> [더 많은 무료스킨 보러가기 →](https://godomall.nhn-commerce.com/freeSkin)
{% content-ref url="/pages/9przSDm7iXrYZiPv2ksq" %}
[Honglife\_PC 스킨 가이드](/beginner/design/freeskin/honglife/pc-guide)
{% endcontent-ref %}
{% content-ref url="/pages/oIlUO6s8syAokFZoxe9x" %}
[Honglife\_Mobile 스킨 가이드](/beginner/design/freeskin/honglife/mobile-guide)
{% endcontent-ref %}
{% content-ref url="/pages/3xq2RnkPNYFEsuvfOC3c" %}
[스킨 꾸미기](/beginner/design/basic-setting/skin)
{% endcontent-ref %}
# Honglife\_PC 스킨 가이드
> 공통
> 메인
> 상품 상세
파일명 : `css/goods/goods.css` 탭 메뉴의 스타일을 지정할 수 있다.
```css
/* 탭 메뉴 아이템 */
.item_goods_tab li a {
display: block;
margin: 0 0 0 -1px;
padding: 10px 0 12px 0;
color: #999999;
font-size: var(--font-size);
border: solid #dadada;
border-width: 1px 1px 0;
background: #ffffff;
}
/* 선택된 탭 메뉴 아이템 */
.item_goods_tab li.on a {
padding-top: 18px;
margin-top: 8px;
color: #333333;
font-weight: bold;
border-bottom: 2px solid #ffffff;
}
/* 탭 메뉴 아이템 텍스트 강조 시 (상품후기, 문의 몇건인지 표시할 때 사용) */
.item_goods_tab li a strong {
color: var(--primary-default);
}
```
> 주문결제
# Honglife\_Mobile 스킨 가이드
> 공통
````
> 메인
> 상품 상세
파일명 : *css/goods/goods.css* 탭 메뉴 박스 스타일을 수정할 수 있다.
```css
.goods_view .detail_btm_tab_menu_box {
position: relative;
width: 100%;
height: 60px;
border-top: 10px solid #f9f9f9;
border-bottom: 1px solid #e2e2e2;
box-sizing: border-box;
}
/* 탭이 선택되어졌을 때 */
.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;
}
```
파일명 : *css/goods/goods.css* 서브 타이틀과 디스크립션의 스타일을 수정할 수 있다.
```css
/* 서브 타이틀 */
.openblock_content dl dt {
padding: 5px 5px 5px 5px;
white-space: normal;
font-weight: bold;
color: #111111;
}
/* 디스크립션 */
.openblock_content dl dd {
padding: 5px 5px 5px 5px;
color: #555555;
vertical-align: top;
}
```
파일명 : *css/goods/goods.css*
1. 평가, 리뷰수 정보의 스타일을 변경할 수 있다.
```css
/* 평가, 리뷰수 라벨 */
.plus_review_container .plus_review_top_box dl dt {
display: table-cell;
font-size: 13px;
color: #606060;
vertical-align: middle;
}
/* 평가수, 리뷰수 숫자 */
.plus_review_container .plus_review_top_box dl dd {
display: table-cell;
padding-inline: 4px 8px;
font-weight: bold;
font-size: 14px;
color: var(--primary-default);
vertical-align: middle;
}
```
2. 플러스 리뷰 > \[리뷰등록], \[나와 비슷한 리뷰 보기] 버튼 스타일을 변경할 수 있다.
```css
/* css/gd_plus_review.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;
}
/* 나와 비슷한 리뷰 보기 버튼 */
.plus_review_add_search > a {
font-size: 13px;
font-weight: bold;
color: #000;
line-height: 38px;
text-align: center;
display: block;
border: #e2e2e2 1px solid;
background: #fff;
}
```
3. \[후기 작성], \[더보기 n/n] 버튼 스타일을 변경할 수 있다.
```css
/* css/gd_button.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;
}
/* 더보기 n/n 버튼 */
.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;
}
```
> 주문 결제
# 베르데(Verde)
> **`카테고리`** 식물
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어)
>
> [샘플샵🖥️ 보기 →](https://freeskin36.godomall.com/)
>
> [샘플샵📱 보기 →](https://m-freeskin36.godomall.com/)
>
> [더 많은 무료스킨 보러가기 →](https://godomall.nhn-commerce.com/freeSkin)
{% content-ref url="/pages/jMapkvCx74xAGTrfdsdr" %}
[Verde\_PC 스킨 가이드](/beginner/design/freeskin/verde/pc-guide)
{% endcontent-ref %}
{% content-ref url="/pages/Fc5s4QAYiNLQYifRAs2n" %}
[Verde\_Mobile 스킨 가이드](/beginner/design/freeskin/verde/mobile-guide)
{% endcontent-ref %}
{% content-ref url="/pages/3xq2RnkPNYFEsuvfOC3c" %}
[스킨 꾸미기](/beginner/design/basic-setting/skin)
{% endcontent-ref %}
# Verde\_PC 스킨 가이드
> 공통
> 메인
> 상품 상세
파일명 : `css/goods/goods.css` 탭 메뉴의 스타일을 지정할 수 있다.
```css
/* 탭 메뉴 아이템 */
.item_goods_tab li a {
display: block;
margin: 0 0 0 -1px;
padding: 10px 0 12px 0;
color: #999999;
font-size: var(--font-size);
border: solid #dadada;
border-width: 1px 1px 0;
background: #ffffff;
}
/* 선택된 탭 메뉴 아이템 */
.item_goods_tab li.on a {
padding-top: 18px;
margin-top: 8px;
color: #333333;
font-weight: bold;
border-bottom: 2px solid #ffffff;
}
/* 탭 메뉴 아이템 텍스트 강조 시 (상품후기, 문의 몇건인지 표시할 때 사용) */
.item_goods_tab li a strong {
color: var(--primary-default);
}
```
> 주문결제
# Verde\_Mobile 스킨 가이드
> 공통
> 메인
> 상품 상세
파일명 : *css/goods/goods.css* 탭 메뉴 박스 스타일을 수정할 수 있다.
```css
.goods_view .detail_btm_tab_menu_box {
position: relative;
width: 100%;
height: 60px;
border-top: 10px solid #f9f9f9;
border-bottom: 1px solid #e2e2e2;
box-sizing: border-box;
}
/* 탭이 선택되어졌을 때 */
.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;
}
```
파일명 : *css/goods/goods.css* 서브 타이틀과 디스크립션의 스타일을 수정할 수 있다.
```css
/* 서브 타이틀 */
.openblock_content dl dt {
padding: 5px 5px 5px 5px;
white-space: normal;
font-weight: bold;
color: #111111;
}
/* 디스크립션 */
.openblock_content dl dd {
padding: 5px 5px 5px 5px;
color: #555555;
vertical-align: top;
}
```
파일명 : *css/goods/goods.css*
1. 평가, 리뷰수 정보의 스타일을 변경할 수 있다.
```css
/* 평가, 리뷰수 라벨 */
.plus_review_container .plus_review_top_box dl dt {
display: table-cell;
font-size: 13px;
color: #606060;
vertical-align: middle;
}
/* 평가수, 리뷰수 숫자 */
.plus_review_container .plus_review_top_box dl dd {
display: table-cell;
padding-inline: 4px 8px;
font-weight: bold;
font-size: 14px;
color: var(--primary-default);
vertical-align: middle;
}
```
2. 플러스 리뷰 > \[리뷰등록], \[나와 비슷한 리뷰 보기] 버튼 스타일을 변경할 수 있다.
```css
/* css/gd_plus_review.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;
}
/* 나와 비슷한 리뷰 보기 버튼 */
.plus_review_add_search > a {
font-size: 13px;
font-weight: bold;
color: #000;
line-height: 38px;
text-align: center;
display: block;
border: #e2e2e2 1px solid;
background: #fff;
}
```
3. \[후기 작성], \[더보기 n/n] 버튼 스타일을 변경할 수 있다.
```css
/* css/gd_button.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;
}
/* 더보기 n/n 버튼 */
.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;
}
```
> 주문 결제
# 뽀끼(Bbokki)
> **`카테고리`** 식품
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어)
>
> [샘플샵🖥️ 보기 →](https://freeskin55.godomall.com/)
>
> [샘플샵📱 보기 →](https://m-freeskin55.godomall.com/)
>
> [더 많은 무료스킨 보러가기 →](https://godomall.nhn-commerce.com/freeSkin)
{% content-ref url="/pages/LD9QH3L8LGVgHsqh9LTR" %}
[Bbokki\_PC 스킨 가이드](/beginner/design/freeskin/bbokki/pc-guide)
{% endcontent-ref %}
{% content-ref url="/pages/SnqHCJI8LhzJzs12jEWm" %}
[Bbokki\_Mobile 스킨 가이드](/beginner/design/freeskin/bbokki/mobile-guide)
{% endcontent-ref %}
{% content-ref url="/pages/3xq2RnkPNYFEsuvfOC3c" %}
[스킨 꾸미기](/beginner/design/basic-setting/skin)
{% endcontent-ref %}
# Bbokki\_PC 스킨 가이드
> 공통
2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ 좌측 하단 폴더트리 내 스타일시트/CSS를 더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ 
4. ctrl+F 검색 후 수정하기\ common 폴더를 더블클릭하여 내에 있는 common.css 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#DF3842**를 검색하여 **원하는 포인트 컬러 코드**로 변경할 수 있습니다. 5. 나머지 포인트 컬러도 검색하여 **원하는 포인트 컬러 코드**로 변경할 수 있습니다. 1. 기본 컬러 코드 : **#DF3842** 2. 기본 컬러 마우스 오버 코드 : **#C5000C** 3. 서브 컬러 코드 : **#FEFFD5** 4. 중립적 컬러 코드 : **#D2D2D2**, **#2B2B2B**
> 메인
> 상품상세
> 주문결제
# Bbokki\_Mobile 스킨 가이드
> 공통
4. ctrl+F 검색 후 수정하기\ gd\_common.css 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#DF3842**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.
5. 나머지 포인트 컬러도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. 1. 기본 컬러 코드 : **#DF3842** 2. 기본 컬러 마우스 오버 코드 : **#C5000C** 3. 서브 컬러 코드 : **#FEFFD5** 4. 중립적 컬러 코드 : **#D2D2D2**, **#2B2B2B**
> 메인
> 상품상세
> #### 주문결제
# 쉐프초이스(Chef's Choice)
> **`카테고리`** 주방용품
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어)
>
> [샘플샵🖥️ 보기 →](https://freeskin41.godomall.com/)
>
> [샘플샵📱 보기 →](https://m-freeskin41.godomall.com/)
>
> [더 많은 무료스킨 보러가기 →](https://godomall.nhn-commerce.com/freeSkin)
{% content-ref url="/pages/mgxHHqu1RKOLs903P73n" %}
[Chef's Choice\_PC 스킨 가이드](/beginner/design/freeskin/chefs-choice/pc-guide)
{% endcontent-ref %}
{% content-ref url="/pages/49HspqRmqOHURyINTvC3" %}
[Chef's Choice\_Mobile 스킨 가이드](/beginner/design/freeskin/chefs-choice/mobile-guide)
{% endcontent-ref %}
{% content-ref url="/pages/3xq2RnkPNYFEsuvfOC3c" %}
[스킨 꾸미기](/beginner/design/basic-setting/skin)
{% endcontent-ref %}
# Chef's Choice\_PC 스킨 가이드
> 공통
4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 **#f15546**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. 5. 나머지 포인트 컬러도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. 1. 기본 컬러 코드 : **#f15546** 2. 기본 마우스 오버 컬러 코드 : **#ea3f30** 3. 서브 컬러 코드 : **#fabd4c** 4. 중립 컬러 코드 : **#edebe5**, **#000**
> 메인
> 상품상세
> 주문결제
# Chef's Choice\_Mobile 스킨 가이드
> 공통
2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 gd\_common.css 스타일 시트를 오픈합니다. 4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 **#f15546**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. 5. 나머지 포인트 컬러도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. 1. 기본 컬러 코드 : **#f15546** 2. 기본 마우스 오버 컬러 코드 : **#ea3f30** 3. 서브 컬러 코드 : **#fabd4c** 4. 중립 컬러 코드 : **#edebe5**, **#000**
> 메인
> 상품상세
> #### 주문결제
# 마카룸(Macaroom)
> **`카테고리`** 식품
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어)
>
> [샘플샵🖥️ 보기 →](https://freeskin20.godomall.com/)
>
> [샘플샵📱 보기 →](https://m-freeskin20.godomall.com/)
>
> [더 많은 무료스킨 보러가기 →](https://godomall.nhn-commerce.com/freeSkin)
{% content-ref url="/pages/apL29WZ2L28ulds4ykS2" %}
[Macaroom\_PC 스킨 가이드](/beginner/design/freeskin/macaroom/pc-guide)
{% endcontent-ref %}
{% content-ref url="/pages/cNU8nbPbezYFGyvv37LK" %}
[Macaroom\_Mobile 스킨 가이드](/beginner/design/freeskin/macaroom/mobile-guide)
{% endcontent-ref %}
{% content-ref url="/pages/3xq2RnkPNYFEsuvfOC3c" %}
[스킨 꾸미기](/beginner/design/basic-setting/skin)
{% endcontent-ref %}
# Macaroom\_PC 스킨 가이드
> 공통
파일명 : *css/layout/layout.css*
1. 상단 메뉴 텍스트의 스타일을 변경할 수 있다.
```css
.top_member_box > li a {
display: inline-block;
color: #4F4F4F;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.8px;
text-transform: uppercase;
}
```
2. 장바구니 담긴상품 수량 스타일을 변경할 수 있다.
```css
.cart-count {
width: 20px;
height: 20px;
background-color: var(--primary-default);
color: #fff;
display: inline-block;
border-radius: 50%;
text-align: center;
font-size: 11px;
font-style: normal;
font-weight: 500;
line-height: 20px;
transform: translate(2px, -3px);
}
```
3. 상단 메뉴의 배경색을 변경할 수 있다.
```css
#header .header_top {
background-color: #fff;
max-width: var(--max-width);
min-width: calc(var(--max-width) - 20px);
margin-inline: auto;
}
```
4. 카테고리 전체보기 메뉴 패널의 스타일을 변경할 수 있다.
```css
.gnb_allmenu_wrap {
display: none;
position: fixed;
top: 80px;
left: 0;
width: 100%;
background: #fff;
z-index: 999;
border-top: 2px solid #272727;
border-bottom: 2px solid #272727;
max-height: 672px;
min-height: 396px;
}
```
5. 카테고리 메뉴의 스타일을 변경할 수 있다.
```css
.header_gnb .gnb_allmenu_box a,
.header_gnb .gnb_allmenu_box button {
color: var(--black);
font-size: 24px;
font-weight: 400;
height: 64px;
line-height: 64px;
width: 100%;
text-align: left;
display: block;
}
```
6. 검색창의 스타일을 변경할 수 있다. 6-1) 검색 아이콘을 변경할 수 있다.
```css
.top-search-btn {
position: absolute;
top: 1px;
right: 1px;
border-radius: 8px;
width: 32px;
height: 32px;
background: #fff url(../../img/common/btn/btn_top_search.svg) no-repeat right;
text-indent: -9999em;
}
```
6-2) 검색 인풋창의 스타일을 변경할 수 있다.
```css
#header .top_search .top_text_cont .top_srarch_text {
display: block;
float: right;
width: 34px;
height: 34px;
border-radius: 8px;
box-sizing: border-box;
-moz-transition: all 0.35s;
-webkit-transition: all 0.35s;
border: 1px solid transparent;
}
```
6-3) 최근 검색어 레이아웃의 스타일을 변경할 수 있다.
```css
.recent_box {
float: left;
width: 333px;
min-height: 65px;
font-size: 12px;
text-align: center;
border-right: none 0;
vertical-align: top;
}
```
6-4) 추천상품 레이아웃의 스타일을 변경할 수 있다.
```css
.recom_box {
display: inline-block;
width: 148px;
min-height: 218px;
padding: 12px 15px 10px;
font-size: 10px;
}
```
파일명 : *css/layout/layout.css*
1. 푸터 메뉴의 스타일을 변경할 수 있다.
```css
.foot_list ul li a {
padding: 0 16px;
font-weight: 700;
}
.foot_list ul .divider {
display: inline-block;
width: 1px;
background-color: #fff;
height: 12px;
}
```
2. 푸터 정보 영역의 스타일을 변경할 수 있다.
```css
.foot_cont .foot_info {
color: #fff;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}
.content_info .cs_center p,
.content_info .bank_info p,
.content_info .notice_list li a {
color: #fff;
font-family: 'Pretendard Variable';
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}
```
> 메인
파일명 : *css/layout/layout.css*
최근 본 상품 영역의 스타일을 지정할 수 있다.
```css
/* 최근 본 상품 목록 영역 */
.scroll_right_cont {
min-width: 72px;
padding: 0px;
background: none;
color: #333;
}
/* 타이틀 (예: TODAY VIEW) */
.scroll_right_cont h4 {
text-align: center;
font-size: 11px;
font-style: normal;
font-weight: 700;
line-height: 12px;
text-transform: uppercase;
}
/* 상품 마우스 오버 시 노출되는 영역 */
.scroll_right_cont .src_box {
position: absolute;
top: -1px;
right: -1px;
width: 191px;
height: 72px;
padding: 5px 0 0 7px;
border: 1px solid #999999;
background: #ffffff;
text-align: left;
z-index: 10;
}
/* 가격 스타일 */
.scroll_right_cont .src_box strong {
display: block;
color: var(--primary-default);
}
```
파일명 : *css/goods/list.css*
1. 상품 진열 영역의 공통 스타일을 변경할 수 있다.
```css
/* 상품 진열 타이틀 */
.goods_list_tit h3 {
color: var(--black);
text-align: center;
font-family: var(--second-font-family);
font-size: 44px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/* 상단 더보기 버튼 */
.btn_goods_more .btn_goods_view_more {
color: #7D7D7D;
font-size: 14px;
font-weight: 600;
line-height: 30px;
padding-right: 14px;
}
/* 하단 더보기 버튼 컨테이너 */
.btn_goods_down_more {
width: 100%;
text-align: center;
margin-top: 56px;
}
/* 하단 더보기 버튼 */
.btn_goods_down_more .btn_goods_view_down_more {
background-color: #272727;
padding: 0 48px;
color: #fff;
text-align: center;
font-family: Afacad;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 32px;
height: 56px;
}
```
2. 상품 아이템의 스타일을 변경할 수 있다.
```css
/* 브랜드명 */
.item_tit_box .item_brand {
display: block;
color: var(--primary-default);
font-family: "Pretendard Variable";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: uppercase;
}
/* 상품명 */
.item_tit_box .item_name {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
padding: 0;
font-size: 16px;
text-overflow: ellipsis;
font-weight: 500;
overflow: hidden;
line-height: 22px;
color: #272727;
}
/* 가격 */
.item_money_box .item_price {
padding: 0;
color: #272727;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 22px;
}
```
> 상품 상세
파일명 : *css/goods/goods.css*
1. 상품 상세 페이지에서 상품명과 상품 항목 레이블의 스타일을 지정할 수 있다.
```css
/* 상품 상세 - 상품명 */
.item_detail_tit h3 {
width: 405px;
font-size: 18px;
word-break: break-all;
}
/* 항목 레이블 (제목) */
.item_detail_list dt {
float: left;
width: 80px;
margin: 0 10px 0 0;
color: #888888;
font-weight: normal;
word-wrap: break-word;
}
```
2. \[공유], \[조건별배송] 버튼의 스타일을 지정할 수 있다.
```css
.btn_gray_list a, .btn_gray_list button {
display: inline-block;
padding: 0 0 0 11px;
border: 1px solid #999;
vertical-align: middle;
}
```
3. 총 합계 금액의 스타일을 지정할 수 있다.
```css
.item_tatal_box .total_amount dd {
color: var(--primary-default);
font-weight: bold;
}
.item_tatal_box .total_amount dd strong {
font-size: 20px;
}
```
4. \[장바구니], \[찜하기], \[바로 구매] 버튼의 스타일을 지정할 수 있다.
```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;
}
/* 바로구매 버튼 */
.btn_add_order,
.btn_add_order_related,
.btn_add_cart_related {
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 var(--primary-default);
background: var(--primary-default);
text-align: center;
font-weight: bold;
}
```
파일명 : `css/goods/goods.css` 탭 메뉴의 스타일을 지정할 수 있다.
```css
/* 탭 메뉴 아이템 */
.item_goods_tab li a {
display: block;
margin: 0 0 0 -1px;
padding: 10px 0 12px 0;
color: #999999;
font-size: var(--font-size);
border: solid #dadada;
border-width: 1px 1px 0;
background: #ffffff;
}
/* 선택된 탭 메뉴 아이템 */
.item_goods_tab li.on a {
padding-top: 18px;
margin-top: 8px;
color: #333333;
font-weight: bold;
border-bottom: 2px solid #ffffff;
}
/* 탭 메뉴 아이템 텍스트 강조 시 (상품후기, 문의 몇건인지 표시할 때 사용) */
.item_goods_tab li a strong {
color: var(--primary-default);
}
```
> 주문결제
파일명 : *css/order/order.css*
1. 장바구니 타이틀의 스타일을 지정할 수 있다. (주문서 공통)
```css
/* 상품 상세 - 상품명 */
.order_wrap .order_tit h2 {
float: left;
font-size: 28px;
color: #222222;
}
```
2. 브레드크럼(주문 단계)의 스타일을 변경할 수 있다. (주문서 공통)
```css
.order_wrap .order_tit ol li {
float: left;
font-size: 14px;
color: #d1d1d1;
}
/* 현재 단계를 나타내는 스타일 */
.order_wrap .order_tit .page_on {
color: #000;
font-weight: bold;
}
```
3. 장바구니에 담긴 상품 목록 테이블의 스타일을 변경할 수 있다. (주문서 공통)
```css
.order_table_type table {
width:100%;
border:0;
border-spacing:0;
border-collapse:collapse;
text-align:center;
}
.order_table_type th {
padding:9px 10px 10px 10px;
border-top:1px solid #999999;
border-bottom:1px solid #dbdbdb;
background:#f7f7f7;
}
.order_table_type td {
height: 31px;
padding: 15px 10px 14px 10px;
color: #777777;
border-bottom: 1px solid #dbdbdb;
background:#ffffff;
}
```
4. \[선택 상품 주문], \[전체 상품 주문] 버튼의 스타일을 변경할 수 있다.
```css
/* 선택 상품 주문 */
.btn_order_choice_buy {
min-width: 190px;
height: 55px;
padding: 0 20px 0 20px;
color: #3e3d3c;
font-weight: bold;
font-size: 14px;
border: 1px solid #cccccc;
background: #fff;
cursor: pointer;
}
/* 전체 상품 주문 */
.btn_order_whole_buy {
min-width: 190px;
height: 55px;
padding: 0 20px 0 20px;
color: #ffffff;
font-size: 14px;
border: 1px solid var(--primary-default);
background: var(--primary-default);
cursor: pointer;
font-weight: bold;
}
```
파일명 : *css/order/order.css*
1. 서브 타이틀, 설명 텍스트 및 최종 결제 금액 등 스타일을 변경할 수 있다.
```css
/* 서브 타이틀 */
.order_zone_tit h4 {
font-size: 16px;
}
/* 설명 */
.order_zone_tit span {
padding: 0 0 0 10px;
color: #777777;
font-size: 12px;
font-weight: normal;
}
/* 결제 최종 금액 */
.payment_final_total dd {
display: inline-block;
font-size: 30px;
color: var(--primary-default);
}
```
2. \[결제하기]버튼의 스타일을 변경할 수 있다.
```css
.btn_order_buy {
display: inline-block;
width: 300px;
height: 61px;
line-height: 59px;
color: #fff;
font-size: 20px;
border: 1px solid var(--primary-default);
background: var(--primary-default);
text-align: center;
}
```
# Macaroom\_Mobile 스킨 가이드
> 공통
파일명 : *css/gd\_layout.css*
1. 상단 레이아웃의 스타일을 변경할 수 있다.
```css
#header_wrap header .header_box {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 12px;
border-bottom: 2px solid #000;
height: 62px;
}
```
2. 햄버거 메뉴 아이콘을 변경할 수 있다.
```css
#header_wrap header .header_box .side_menu span {
display: inline-block;
width: 20px;
height: 15px;
font-size: 0;
background: url('../img/icon/icon_menu.png') no-repeat center;
background-size: 100%;
vertical-align: top;
}
```
3. 검색 아이콘을 변경할 수 있다.
```css
#header_wrap header .header_box .top_search span {
display: inline-block;
width: 18px;
height: 17px;
font-size: 0;
background: url('../img/icon/icon_search.png') no-repeat center;
background-size: 100%;
vertical-align: top;
}
```
4. 마이페이지 아이콘을 변경할 수 있다.
```css
#header_wrap header .header_box .mypage span {
display: inline-block;
width: 21px;
height: 21px;
font-size: 0;
background: url('../img/icon/icon_mypage.png') no-repeat center;
background-size: 100%;
vertical-align: top;
}
```
5. 장바구니 아이콘을 변경할 수 있다.
```css
/* 장바구니 아이콘 */
#header_wrap header .header_box .cart span {
display: inline-block;
width: 20px;
height: 21px;
font-size: 0;
background: url('../img/icon/icon_cart.png') no-repeat center;
background-size: 100%;
vertical-align: top;
}
/* 장바구니 수량 정보 */
#header_wrap header .header_box .cart_count {
position: absolute;
top: 8px;
right: 0;
padding: 0px 4px;
line-height: 15px;
border-radius: 100%;
color: #fff;
background: var(--primary-default);
font-size: calc(var(--font-size) - 2px);
min-width: 14px;
text-align: center;
}
```
파일명 : *css/gd\_layout.css*
1. 언어 타이틀 스타일을 수정할 수 있다.
```css
.nav_language .tit {
display: table-cell;
width: 30%;
font-size: 15px;
padding: 13px 15px 13px 15px;
color: #262626;
font-weight: bold;
box-sizing: border-box;
}
```
2. \[Q\&A], \[최근본상품], \[찜리스트] 아이콘과 텍스트 스타일을 변경할 수 있다.
```css
/* 텍스트 */
.nav_link ul li a {
display: block;
padding: 36px 0 0 0;
font-size: 13px;
color: #888;
}
/* Q&A */
.nav_link ul li:nth-child(1) a {
background: url(../img/icon/icon_qna.svg) no-repeat center 3px;
background-size: 33px 30px;
}
/* 최근본상품 */
.nav_link ul li:nth-child(2) a {
background: url(../img/icon/icon_prd_latest.svg) no-repeat center 4px;
background-size: 33px 30px;
}
/* 찜리스트 */
.nav_link ul li:nth-child(3) a {
background: url(../img/icon/icon_lnb_heart.svg) no-repeat center 4px;
background-size: 33px 30px;
}
```
3. \[카테고리], \[브랜드] 버튼의 스타일을 변경할 수 있다.
```css
/* 버튼 기본 스타일 */
.nav_tabmenu_box .nav_tabmenu li span {
display: block;
padding: 10px 0 10px 0;
background: #e8e8e8;
color: #acacac;
}
/* 활성화된 상태일 때 */
.nav_tabmenu_box .nav_tabmenu li.on span {
background: var(--primary-default);
color: #fff;
font-weight: bold;
}
```
4. 카테고리 트리 메뉴 아이템의 스타일을 변경할 수 있다.
```css
.category_side > li a {
position: relative;
display: block;
padding: 12px 0 12px 0;
font-size: 16px;
color: #262626;
}
```
5. \[커뮤니티] 타이틀과 공통 게시판 링크 스타일을 변경할 수 있다.
```css
/* 커뮤니티 타이틀 */
.nav_community_box .comm_tit {
padding: 12px 16px;
font-size: 18px;
color: var(--black);
font-weight: bold;
border-bottom: 0px solid #000000;
}
/* 공통 게시판 링크 */
.nav_community_box .board_cate li a {
display: block;
color: var(--black);
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
}
```
6. 사이드 메뉴 닫기 버튼의 스타일을 지정할 수 있다.
```css
#wrap nav .left_close {
position: fixed;
top: 20px;
left: 310px;
width: 29px;
height: 29px;
background: url('../img/icon/icon_left_x.png') no-repeat center;
background-size: 100%;
z-index: 1002;
}
```
파일명 : *css/gd\_layout.css*
1. 푸터 메뉴의 스타일을 변경할 수 있다.
```css
#footer footer .ft_menu li a {
display: block;
font-size: 12px;
font-weight: 700;
}
```
2. \[고객센터], \[은행계좌 안내] 타이틀의 스타일을 변경할 수 있다.
```css
.main_info dl dt > span {
font-weight: 700;
font-size: 12px;
}
```
4. 푸터 정보 영역과 카피라이트 텍스트의 스타일을 변경할 수 있습니다.
```css
/* 푸터 정보 */
#footer footer .ft_info2_box .ft_address {
padding: 0px;
text-align: left;
font-size: 12px;
word-break: keep-all;
}
/* 카피라이트 */
#footer footer .ft_copy {
font-size: 9px;
text-align: left;
font-style: normal;
margin-block: 24px;
}
```
> 메인
1. 상품 진열 타이틀의 스타일을 수정할 수 있다.
```css
/* css/proc/proc.css */
._goods_display_main h3 {
display: block;
padding-top: 40px;
margin-bottom: 24px;
margin-inline: 50px;
color: #272727;
text-align: center;
font-family: Afacad;
font-size: 42px;
font-style: normal;
font-weight: 400;
line-height: 40px;
letter-spacing: 0.84px;
}
```
2. 더보기 버튼 스타일을 수정할 수 있다.
```css
/* 하단 더보기 버튼 */
.main_more_btn {
display: block;
padding: 0 24px;
margin: 0 auto;
background-color: var(--black);
color: #fff;
text-align: center;
font-family: inherit;
font-size: 14px;
font-style: normal;
font-weight: var(--font-regular);
line-height: 27px;
border: 0;
height: 40px;
}
/* 상단 더보기 버튼 */
.main_more_btn2 {
display: block;
text-align: center;
width: 72px;
height: 24px;
padding-top: 0;
padding-right: 12px;
color: var(--black);
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 24px;
letter-spacing: 0.24px;
border-radius: 12px;
border: 1px solid #000;
margin: 0 auto;
}
```
> 상품 상세
파일명 : *css/goods/goods.css*
1. 브랜드 스타일을 변경할 수 있다.
```css
.goods_view .detail_info .detail_info_top .brand {
padding: 0 0 2px 0;
color: #666;
font-size: 13px;
}
```
2. 상품명 스타일을 변경할 수 있다.
```css
.goods_view .detail_info h3 {
font-size: 18px;
color: #333333;
word-break: break-all;
}
```
3. 가격 정보 스타일을 변경할 수 있다.
```css
.goods_view .detail_info .detail_info_top .price_box .price {
font-size: 20px;
color: #333333;
}
```
4. \[공유하기], \[찜하기] 버튼 스타일을 수정할 수 있다.
```css
/* 공유하기 버튼 */
.goods_view .share_btn_box ul li.d_share button {
padding-left: 25px;
background: url(../../img/icon/icon_share.png) no-repeat left center;
background-size: 19px;
}
/* 찜하기 버튼 */
.goods_view .share_btn_box ul li.d_wish button {
padding-left: 25px;
background: url(../../img/icon/icon_heart.png) no-repeat left center;
background-size: 19px;
}
```
파일명 : *css/goods/goods.css* 탭 메뉴 박스 스타일을 수정할 수 있다.
```css
.goods_view .detail_btm_tab_menu_box {
position: relative;
width: 100%;
height: 60px;
border-top: 10px solid #f9f9f9;
border-bottom: 1px solid #e2e2e2;
box-sizing: border-box;
}
/* 탭이 선택되어졌을 때 */
.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;
}
```
파일명 : *css/goods/goods.css* 서브 타이틀과 디스크립션의 스타일을 수정할 수 있다.
```css
/* 서브 타이틀 */
.openblock_content dl dt {
padding: 5px 5px 5px 5px;
white-space: normal;
font-weight: bold;
color: #111111;
}
/* 디스크립션 */
.openblock_content dl dd {
padding: 5px 5px 5px 5px;
color: #555555;
vertical-align: top;
}
```
파일명 : *css/goods/goods.css*
1. 평가, 리뷰수 정보의 스타일을 변경할 수 있다.
```css
/* 평가, 리뷰수 라벨 */
.plus_review_container .plus_review_top_box dl dt {
display: table-cell;
font-size: 13px;
color: #606060;
vertical-align: middle;
}
/* 평가수, 리뷰수 숫자 */
.plus_review_container .plus_review_top_box dl dd {
display: table-cell;
padding-inline: 4px 8px;
font-weight: bold;
font-size: 14px;
color: var(--primary-default);
vertical-align: middle;
}
```
2. 플러스 리뷰 > \[리뷰등록], \[나와 비슷한 리뷰 보기] 버튼 스타일을 변경할 수 있다.
```css
/* css/gd_plus_review.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;
}
/* 나와 비슷한 리뷰 보기 버튼 */
.plus_review_add_search > a {
font-size: 13px;
font-weight: bold;
color: #000;
line-height: 38px;
text-align: center;
display: block;
border: #e2e2e2 1px solid;
background: #fff;
}
```
3. \[후기 작성], \[더보기 n/n] 버튼 스타일을 변경할 수 있다.
```css
/* css/gd_button.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;
}
/* 더보기 n/n 버튼 */
.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;
}
```
> 주문 결제
1. 장바구니 목록에서 삭제 버튼의 스타일을 수정할 수 있다.
```css
/* css/gd_button.css */
.cart_onedel_btn {
width: 24px;
height: 24px;
font-size: 0;
background: url(../img/icon/icon_x3.png) no-repeat center;
background-size: 12px 12px;
border: none;
}
```
2. 상품명, 주문수량, 가격정보 등의 스타일을 수정할 수 있다.
```css
/* css/order/order.css */
/* 텍스트 일반 */
.cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody p {
font-size: 12px;
line-height: 16px;
color: #9d9d9d;
}
/* 상품명 */
.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;
}
/* 가격 */
.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: #000;
font-weight: bold;
}
```
3. 결제 금액 정보에 대한 스타일을 변경할 수 있다.
```css
/* css/order/order.css */
/* 항목 타이틀 */
.cart .my_buy dl dt {
display: table-cell;
width: 50%;
font-size: 13px;
color: #5e5e5e;
}
/* 항목에 대한 값 */
.cart .my_buy dl dd {
display: table-cell;
width: 50%;
text-align: right;
font-size: 15px;
color: #5e5e5e;
}
/* 총 합계 금액 */
.cart .my_buy dl.total dd {
color: #000;
font-size: 17px;
}
```
4. \[선택상품 삭제], \[선택상품 주문], \[전체주문] 버튼의 스타일을 수정할 수 있다.
```css
/* css/gd_button.css */
/* 선택상품 삭제, 선택상품 주문 버튼 */
.cart_select_order_btn,
.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;
}
/* 전체주문 버튼 */
.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;
}
```
1. 서브 타이틀의 스타일을 변경할 수 있다.
```css
/* css/order/order.css */
.order .order_tit {
border-top: 10px solid #f9f9f9;
color: #333333;
font-size: 16px;
line-height: 36px;
padding: 20px 16px 0px 16px;
}
```
2. 배송정보 버튼바 스타일을 변경할 수 있다.
```css
/* css/order/order.css */
/* 버튼 스타일 */
.order .order_box .delivery_box .tab_menu ul li {
display: table-cell;
width: 33.3%;
border: 1px solid #c7c7c7;
border-left: none;
background: #ffffff;
vertical-align: middle;
}
/* 텍스트 스타일 */
.order .order_box .delivery_box .tab_menu ul li a {
display: block;
padding: 10px 7px;
color: #333333;
text-align: center;
border-left: none;
box-sizing: border-box;
}
/* 선택되었을 때 버튼 스타일 */
.order .order_box .delivery_box .tab_menu ul li.active {
background: #000;
}
/* 선택되었을때 텍스트 스타일 */
.order .order_box .delivery_box .tab_menu ul li.active a {
color: #fff;
font-weight: bold;
}
```
3. \[우편번호], \[쿠폰 조회 및 적용], \[결제하기] 버튼 스타일을 수정할 수 있다.
```css
/* css/gd_button.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;
}
/* 쿠폰 조회 및 적용 버튼 */
.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;
}
/* 결제하기 버튼 */
.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;
}
```
# 블리스(Bliss)
> **`카테고리`** 의류
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어)
>
> [샘플샵🖥️ 보기 →](https://freeskin27.godomall.com/)
>
> [샘플샵📱 보기 →](https://m-freeskin27.godomall.com/)
>
> [더 많은 무료스킨 보러가기 →](https://godomall.nhn-commerce.com/freeSkin)
{% content-ref url="/pages/5q29ZsgujQ9miE8nwJ84" %}
[Bliss\_PC 스킨 가이드](/beginner/design/freeskin/bliss/pc-guide)
{% endcontent-ref %}
{% content-ref url="/pages/NpZDcJfrgpy5XjvNuPUl" %}
[Bliss\_Mobile 스킨 가이드](/beginner/design/freeskin/bliss/mobile-guide)
{% endcontent-ref %}
{% content-ref url="/pages/3xq2RnkPNYFEsuvfOC3c" %}
[스킨 꾸미기](/beginner/design/basic-setting/skin)
{% endcontent-ref %}
{% content-ref url="/pages/7sV76Ny2Ltx9Hri8nfzo" %}
[쇼핑몰에 영상 추가하기](/beginner/design/video)
{% endcontent-ref %}
# Bliss\_PC 스킨 가이드
> 공통
2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ 좌측 하단 폴더트리 내 스타일시트/CSS를 더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ 
4. ctrl+F 검색 후 수정하기\ common 폴더를 더블클릭하여 내에 있는 common.css 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#118670**를 검색하여 **원하는 포인트 컬러 코드**로 변경할 수 있습니다. 5. 나머지 포인트 컬러도 검색하여 **원하는 포인트 컬러 코드**로 변경할 수 있습니다. 1. 기본 컬러 코드 : **#118670** 2. 기본 컬러 마우스 오버 코드 : **#096D5A** 3. 서브 컬러 코드 : **#A0886E** 4. 중립적 컬러 코드 : **#F0F0F0**, **#000**
> 메인
> 상품상세
> 주문결제
# Bliss\_Mobile 스킨 가이드
> 공통
4. ctrl+F 검색 후 수정하기\ gd\_common.css 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#118670**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.
5. 나머지 포인트 컬러도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. 1. 기본 컬러 코드 : **#118670** 2. 기본 컬러 마우스 오버 코드 : **#096D5A** 3. 서브 컬러 코드 : **#A0886E** 4. 중립적 컬러 코드 : **#F0F0F0**, **#000**
> 메인
> 상품상세
> #### 주문결제
# 로스트리브(Roastrive)
> **`카테고리`** 커피용품
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어)
>
> [샘플샵🖥️ 보기 →](https://freeskin84.godomall.com/)
>
> [샘플샵📱 보기 →](https://m-freeskin41.godomall.com/)
>
> [더 많은 무료스킨 보러가기 →](https://godomall.nhn-commerce.com/freeSkin)
{% content-ref url="/pages/pW9smwuCsCjMphAZJ4rz" %}
[Roastrive\_PC 스킨 가이드](/beginner/design/freeskin/roastrive/pc-guide)
{% endcontent-ref %}
{% content-ref url="/pages/JKafHxeoUbZjOSiv0wAa" %}
[Roastrive\_Mobile 스킨 가이드](/beginner/design/freeskin/roastrive/mobile-guide)
{% endcontent-ref %}
{% content-ref url="/pages/3xq2RnkPNYFEsuvfOC3c" %}
[스킨 꾸미기](/beginner/design/basic-setting/skin)
{% endcontent-ref %}
# Roastrive\_PC 스킨 가이드
> 공통
4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 **#f15546**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. 5. 아래는 스킨에서 자주 사용하는 값들을 변수화 하였습니다.\ 원하는 값으로 변경하면 일괄 수정되어 적용됩니다. ```css :root { --primary-default: #772614; --primary-hover: #450000; --secondary-default: #c52323; --neutrals-default: #f4f0e9; --neutrals-dark: #000; --font-size: 14px; --font-family: 'Pretendard variable'; --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1780px; --max-width: 1920px; } ```
> 메인
> 상품상세
> 주문결제
# Roastrive\_Mobile 스킨 가이드
> 공통
2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 gd\_common.css 스타일 시트를 오픈합니다. 4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 **#772614**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. 5. 아래는 스킨에서 자주 사용하는 값들을 변수화 하였습니다.\ 원하는 값으로 변경하면 일괄 수정되어 적용됩니다. ```css :root { --primary-default: #772614; --primary-hover: #450000; --secondary-default: #c52323; --neutrals-default:#f4f0e9; --neutrals-dark: #000; --font-size: 12px; --font-family: 'Pretendard variable'; --font-regular: 400; --font-medium: 500; --font-bold: 700; } ```
> 메인
> 상품상세
> #### 주문결제
# 띵(tting)
> **`카테고리`** 소품
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어)
>
> [샘플샵🖥️ 보기 →](https://freeskin43.godomall.com/)
>
> [샘플샵📱 보기 →](https://m-freeskin43.godomall.com/)
>
> [더 많은 무료스킨 보러가기 →](https://godomall.nhn-commerce.com/freeSkin)
{% content-ref url="/pages/8n64pPUPq8nOyK5AFqma" %}
[tting\_PC 스킨 가이드](/beginner/design/freeskin/tting/pc-guide)
{% endcontent-ref %}
{% content-ref url="/pages/lvHvBMfXoCx00Wbk1DEx" %}
[tting\_Mobile 스킨 가이드](/beginner/design/freeskin/tting/mobile-guide)
{% endcontent-ref %}
{% content-ref url="/pages/3xq2RnkPNYFEsuvfOC3c" %}
[스킨 꾸미기](/beginner/design/basic-setting/skin)
{% endcontent-ref %}
# tting\_PC 스킨 가이드
> 공통
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: 14px; --font-family: 'Pretendard variable'; --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1680px; --max-width: 1920px; } ```
> 메인
> 상품상세
> 주문결제
# tting\_Mobile 스킨 가이드
> 공통
2. **관리자 > 디자인 메뉴 접속** 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; } ```
> 메인
> 상품상세
> #### 주문결제
# 비키(Biki)
> **`카테고리`** 여성의류
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어)
>
> [샘플샵🖥️ 보기 →](http://freeskin02.godomall.com)
>
> [샘플샵📱 보기 →](https://m-freeskin02.godomall.com/)
>
> [더 많은 무료스킨 보러가기 →](https://godomall.nhn-commerce.com/freeSkin)
{% content-ref url="/pages/IpArGWZR2owvn1ZuC4eY" %}
[Biki\_PC 스킨 가이드](/beginner/design/freeskin/biki/pc-guide)
{% endcontent-ref %}
{% content-ref url="/pages/S7J8ic1Nc2CPBrbHSI6J" %}
[Biki\_Mobile 스킨 가이드](/beginner/design/freeskin/biki/mobile-guide)
{% endcontent-ref %}
{% content-ref url="/pages/3xq2RnkPNYFEsuvfOC3c" %}
[스킨 꾸미기](/beginner/design/basic-setting/skin)
{% endcontent-ref %}
{% content-ref url="/pages/7sV76Ny2Ltx9Hri8nfzo" %}
[쇼핑몰에 영상 추가하기](/beginner/design/video)
{% endcontent-ref %}
# Biki\_PC 스킨 가이드
> 공통
2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ 좌측 하단 폴더트리 내 스타일시트/CSS를 더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ 
4. ctrl+F 검색 후 수정하기\ common 폴더를 더블클릭하여 내에 있는 common.css 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#D96B33**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. 5. 나머지 포인트 컬러도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. 1. 기본 컬러 코드 : **#D96B33** 2. 기본 컬러 마우스 오버 코드 : **#D85715** 3. 서브 컬러 코드 : **#7B91E7** 4. 중립적 컬러 코드 : **#EBEBE0**, **#000000**
> 메인
> 상품상세
> 주문결제
# Biki\_Mobile 스킨 가이드
> 공통
4. ctrl+F 검색 후 수정하기\ gd\_common.css 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#D96B33**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.
5. 나머지 포인트 컬러도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. 1. 기본 컬러 코드 : **#D96B33** 2. 기본 컬러 마우스 오버 코드 : **#D85715** 3. 서브 컬러 코드 : **#7B91E7** 4. 중립적 컬러 코드 : **#EBEBE0**, **#000000**
> 메인
> 상품상세
> #### 주문결제
# 하나노떼(Hahanotte)
> **`카테고리`** 유아동
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어)
>
> [샘플샵🖥️ 보기 →](< https://freeskin57.godomall.com/>)
>
> [샘플샵📱 보기 →](https://m-freeskin57.godomall.com/)
>
> [더 많은 무료스킨 보러가기 →](https://godomall.nhn-commerce.com/freeSkin)
{% content-ref url="/pages/tKuGGAtQzyu8uVDB8kJm" %}
[Mygreek\_PC 스킨 가이드](/beginner/design/freeskin/mygreek/pc-guide)
{% endcontent-ref %}
{% content-ref url="/pages/Elk54QSKEMy4a6Zm7C44" %}
[Mygreek\_Mobile 스킨 가이드](/beginner/design/freeskin/mygreek/mobile-guide)
{% endcontent-ref %}
{% content-ref url="/pages/3xq2RnkPNYFEsuvfOC3c" %}
[스킨 꾸미기](/beginner/design/basic-setting/skin)
{% endcontent-ref %}
# Hahanotte\_PC 스킨 가이드
> 공통
4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경할 수 있습니다. ``` :root { --primary-default: #0540be; /* 포인트 컬러 */ --primary-hover: #00319a; /* 포인트 컬러 hover */ --secondary-default: #e7ff34; /* 서브 컬러 */ --neutrals-gray: #edebe5; --neutrals-dark: #000; --font-size: 14px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1800px; /* 화면이 최소로 작아질 수 있는 너비 */ --max-width: 1920px; /* 화면이 최대한 넓어 질 수 있는 너비 */ } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경할 수 있습니다.
> 메인
> 상품상세
> 주문결제
# Hahanotte\_Mobile 스킨 가이드
> 공통
``` :root { --primary-default: #0540be; /* 포인트 컬러 */ --primary-hover: #00319a; /* 포인트 컬러 hover */ --secondary-default: #e7ff34; /* 서브 컬러 */ --neutrals-gray: #edebe5; --neutrals-dark: #000; --font-size: 12px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다.
> 메인
> 상품상세
> #### 주문결제
# 밥도둑
> **`카테고리`** 식품, 반찬
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어, 영어, 중국어, 일어)
>
> [샘플샵📱 보기 →](http://m.design27.godomall.com/)
>
> [디자인센터 바로가기 →](https://design.nhn-commerce.com/freeskin.php)
***
# 마이 플랜트(My Plant)
> **`카테고리`** 화훼
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어, 영어, 중국어, 일어)
>
> [샘플샵📱 보기 →](http://m.design210.godomall.com/)
>
> [디자인센터 바로가기 →](https://design.nhn-commerce.com/freeskin.php)
4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#ea4379**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. css/gd\_button.css (153) css/gd\_common.css (5) css/gd\_layout.css (1) css/gd\_plus\_review\.css (7) css/event/event.css (3) css/goods.css (10) css/goods/list/list\_01.css (4) css/goods/list/list\_02.css (4) css/goods/list/list\_04.css (4) css/goods/list/list\_06.css (4) css/goods/list/list\_07.css (4) css/goods/list/list\_09.css (3) css/goods/list/list\_11.css (7) css/main/main.css (1) css/mypage/mypage.css (13) css/order/order.css (12)
# 어반(URBAN)
> **`카테고리`** 남성 패션
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어, 영어, 중국어, 일어)
>
> [샘플샵📱 보기 →](http://m.design29.godomall.com/)
>
> [디자인센터 바로가기 →](https://design.nhn-commerce.com/freeskin.php)
# 어라운드(AROUND)
> **`카테고리`** 인테리어
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어, 영어, 중국어, 일어)
>
> [샘플샵📱 보기 →](http://m.design28.godomall.com/)
>
> [디자인센터 바로가기 →](https://design.nhn-commerce.com/freeskin.php)
4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 ctrl + f (검색)를 누르고 **#181717**을 검색하여 원하는 포인트 컬러 코드 값으로 변경합니다.
# 럭스(Luxe)
> **`카테고리`** 패션
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어, 영어, 중국어, 일어)
>
> [샘플샵🖥️ 보기 →](https://design26.godomall.com/)
>
> [디자인센터 바로가기 →](https://design.nhn-commerce.com/freeskin.php)
4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 **ctrl + f (검색)**를 누르고 **#593838**을 검색하여 **원하는 포인트 컬러 코드 값**으로 변경합니다.\ 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. 마우스 오버시 컬러 **#492c2c**도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.
2\. 스크롤시 상단 메뉴 영역의 **background(배경,투명도)** 값을 변경합니다. `변경 위치` css > custom.css **16줄**\ `16` .headerFix { position: fixed; top: 0; left: 0; z-index: 102; width: 100%; min-width: 1200px; background-color: #ffffff; box-shadow: 0px 0 5px rgba(0, 0, 0, 0.35);}
# 벤세르(VENCER)
> **`카테고리`** 스포츠
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어, 영어, 중국어, 일어)
>
> [샘플샵📱 보기 →](http://m.design25.godomall.com/)
>
> [디자인센터 바로가기 →](https://design.nhn-commerce.com/freeskin.php)
4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 **ctrl + f (검색)**를 누르고 **#005cff**을 검색하여 **원하는 포인트 컬러 코드 값**으로 변경합니다.\  css/gd\_button.css (18) css/gd\_common.css (1) css/gd\_plus\_review\.css (1) css/goods.css (5) css/goods/list/list\_01.css (2) css/goods/list/list\_02.css (2) css/goods/list/list\_04.css (2) css/goods/list/list\_06.css (2) css/goods/list/list\_07.css (5) css/goods/list/list\_09.css (1) css/goods/list/list\_11.css (2) css/mypage/mypage.css (2) css/order/order.css (1) css/proc/proc.css (1)
\CS CENTER\\ \
`51` \\BANK INFO\\
2. 고객센터/입금계좌 color(색상) 및 font-size(사이즈) 변경
해당 영역 에 원하시는 컬러 코드값 및 사이즈를 넣어 주세요.\
`변경 위치` css > main > main.css \[고객센터]59번째 줄 \[입금계좌]63번째 줄\
`59` .main .main\_info dl dd p.phone a {font-size:15px; color:#ffffff; font-weight:bold;}\
.main .main\_info dl dd .account\_holder {display:inline-block; padding:6px 0 8px 26px; font-size:15px; background:url('../../img/etc/icon\_bank.png')\
`63` no-repeat left 4px; background-size:18px 23px; color:#ffffff; font-weight:bold; text-align:left; word-break:break-all;}
3. 부가 정보 color(색상) 및 font-size(사이즈) 변경\
해당 영역 에 원하는 컬러 코드값 및 사이즈를 넣어 주세요.\
`변경 위치` css > main > main.css \[고객센터]60번째 줄 \[입금계좌]64번째 줄\
`60` .main .main\_info dl dd p.business\_hours {font-size:11px; color:#808080; word-break:keep-all;}\
`64` .main .main\_info dl dd ul.main\_bank {color:#808080; text-align:center; word-break:break-all;}
# 트렌디(TRENDY)
> **`카테고리`** 패션
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어, 영어, 중국어, 일어)
>
> [샘플샵📱 보기 →](http://m.design23.godomall.com/)
>
> [디자인센터 바로가기 →](https://design.nhn-commerce.com/freeskin.php)
4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#2e84d3**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. \ \ css/gd\_button.css (153) css/gd\_common.css (5) css/gd\_plus\_review\.css (7) css/event/event.css (3) css/goods.css (10) css/list/list\_01.css (4) css/list/list\_02.css (4) css/list/list\_04.css (4) css/list/list\_06.css (4) css/list/list\_07.css (4) css/list/list\_09.css (3) css/list/list\_11.css (7) css/mypage/mypage.css (10) css/order/order.css (12) css/proc/proc.css (5)
2. 탭OFF일 경우\ `변경 위치` css > goods> list > list\_07.css 9번째 줄 \ `9` .goods\_prd\_item7 .tab\_box .tab li a {text-align:center;font-weight:bold;overflow:hidden;display:inline-block;width:100%;padding:7px 10px 7px 10px;font-size:13px;box-sizing:border-box;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;border:1px solid #dfdfdf;border-left:none;background:#f3f3f3;color:#8e8e8e;} \ \ ✔️\[background:#배경값; color:#텍스트컬러값;]
2. 박스버튼 OFF일때 색상 변경\ `변경 위치` css > gd\_layout.css 127번째 줄 `127` .nav\_tabmenu\_box .nav\_tabmenu li span {display:block; padding:7px 0 6px 0; background:#fff; color:#a4a4a4; border:1px solid #e7e7e7; font-size:14px;}\ \ ✔️\[color:#폰트컬러값] \[background:#배경컬러값]\ ✔️\[border:테두리두께값px solid #색상컬러값;]
2. 커뮤니티 게시판 텍스트 수정 `변경 위치` css > gd\_layout.css 147번째 줄\ `147` .nav\_tabmenu\_box .board\_cate li a {display:block;color:#666666;font-size:13px;}\ \ ✔️\[color:#폰트색상] \[font-size:#폰트사이즈]
2. 고객센터 운영시간 `변경 위치` css > main > main.css 203번째 줄 \ `203` .main\_info dl dd p.business\_hours {margin:7px 0 0 0; font-size:12px; color:#5b5b5b;} \ \ ✔️\[font-size:폰트사이즈px; color:#폰트컬러]
3. 입금계좌안내 * 입금계좌번호\ `변경 위치` css > main > main.css 198번째 줄 \ `198` .main\_info\_box .main\_info dl dd strong {font-size:14px; font-weight:bold; color:#222;} \ \ ✔️\[font-size:폰트사이즈px] \[color:#폰트컬러]
* 입금명, 은행명 \ `변경 위치` css > main > main.css 206번째 줄 \ `206` .main\_info dl dd .account\_holder {padding:0; font-size:12px; color:#222;}\ \ ✔️\[font-size:폰트사이즈px] \[color:#폰트컬러]
# 해피애니멀(Happy Animall)
> **`카테고리`** 애견용품
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어, 영어, 중국어, 일어)
>
> [샘플샵📱 보기 →](http://m.design24.godomall.com/)
>
> [디자인센터 바로가기 →](https://design.nhn-commerce.com/freeskin.php)
4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#5879c7**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. \ \ 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개)
2. 공지사항 "내용" 부분의 폰트 **color(색상)** 값을 변경해줍니다. \ `변경 위치` main > notice > main.css **20줄**\ `20` .order\_end .order\_end\_box h2 { display: block; width: 100%; color: #626262;}
# 니모(NIMO)
> **`카테고리`** 식품
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어, 영어, 중국어, 일어)
>
> [샘플샵🖥️ 보기 →](https://design22.godomall.com/)
>
> [디자인센터 바로가기 →](https://design.nhn-commerce.com/freeskin.php)
4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#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**도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.
# 클레마티스(clematis)
> **`카테고리`** 주얼리
>
> **`지원 솔루션`** 고도몰
>
> **`글로벌`** 지원 (한국어, 영어, 중국어, 일어)
>
> [샘플샵🖥️ 보기 →](http://design2.godomall.com/)
>
> [디자인센터 바로가기 →](https://design.nhn-commerce.com/freeskin.php)
4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#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. 마우스 오버시 컬러 **#99354a**도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.
✔️ **메뉴 색상 변경**
`변경 위치` 스타일시트 > custom.css **85줄**\
`85` .top\_member\_box > li a { color: #ffffff; font-size: 13px; font-weight: normal;}
✔️ **메뉴 배경 색상 변경**
`변경 위치` 스타일시트 > layout > layout.css **215줄**\
`215` #header .gnb .depth1 {display: none; position: absolute; top: 48px; left: 0; width: 160px; background: #a26d6d; z-index: 100;}
\
⚠️ 유튜브 동영상 사용시에도 방법은 동일합니다.
**2. 동영상 복사하기**
임베딩 소스를 복사합니다.
**3.** **css 수정하기**
아래 가이드를 참고해 index.html 파일내 56번 줄에 위치한 아이프레임내 링크를 변경하고자 하는 링크로 수정합니다.
`변경 위치` main > index.html **56줄**
---
[Next Page](/llms-full.txt/1)
고도몰 어드민 > 모바일샵 > 모바일샵 디자인 관리 > 메인 > 쇼핑몰 메인본문
고도몰 어드민 > 모바일샵 > 디자인 페이지 수정
디자인센터 메인
포인트 컬러 일괄 변경하기
1. Mygreek스킨에 적용되어 있는 기본 컬러 코드 **#0CC472 입니다** 2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ \- 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ \- common.css를 더블 클릭 하여 common/common.css 파일을 엽니다.\ 4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경할 수 있습니다. ``` :root { --primary-default: #0cc472; /* 포인트 컬러 */ --primary-hover: #02b666; /* 포인트 컬러 hover */ --secondary-default: #ff5810; /* 서브 컬러 */ --neutrals-gray: #edebe5; --neutrals-dark: #000; --font-size: 14px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1450px; /* 화면이 최소로 작아질 수 있는 너비 */ --max-width: 1680px; /* 화면이 최대한 넓어 질 수 있는 너비 */ } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경할 수 있습니다.
메뉴 변경하기
1. 상단 메뉴의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css > layout/layout.css** ```css .top_member_box > li a{ display:inline-block; padding-left:20px; color:#000; /* 컬러 변경 */ font-size:14px; /* 폰트사이즈 수정 */ font-style:medium; } ``` 2. 장바구니 담긴상품 수량 폰트의 **color(색상)** 값을 변경할 수 있습니다.\ (현재는 기본 포인트 컬러 전역변수로 지정되어 있습니다.) **css > layout/layout.css** ```css .top_member_box > li strong { color: var(--primary-default);/* 기본 포인트 컬러를 원하는 색상으로 변경 */ } ``` 3. 상단 메뉴의 background-color(배경색)을 변경할 수 있습니다. **css > layout/layout.css** ```css #header .header_top { position: relative; display: flex; align-items: center; background-color: #c0f0ca; /* header 배경색 변경 */; border-bottom: 1px solid #000; height: 84px; } ``` 4. 전체보기 메뉴의 **background-color(배경)** 값을 변경할 수 있습니다. \ (현재는 neutrals 컬러 코드 전역변수로 지정되어 있습니다.) **css > layout/layout.css** ```css #header .gnb_allmenu_wrap { display: none; position: fixed; top: 0; left: 0; width: 400px; background: var(--neutrals-gray); z-index: 999; } ``` 5. 카테고리 메뉴의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **css > layout/layout.css** ```css .header_gnb .gnb_allmenu_box a, .header_gnb .gnb_allmenu_box button { color: var(--neutrals-dark); font-size: 24px; font-weight: 400; height: 64px; line-height: 64px; width: 100%; text-align: left; display: block; } ``` 6. 메뉴 마우스 오버시의 **background(배경)**값을 변경할 수 있습니다. \ (현재는 기본 포인트 컬러 전역변수로 지정되어 있습니다.) **css > layout/layout.css** ```css .header_gnb .gnb_allmenu_box li:hover, .header_gnb .gnb_allmenu_box li.is-open > button:hover { background-color: var(--primary-default); } ```검색창 폰트 변경하기
검색창 인풋박스 입력 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css #header .top_search .top_text_cont .top_srarch_text { display: block; float: right; width: 34px; height: 34px; border: 0px solid #000; border-radius: 8px 8px; box-sizing: border-box; -moz-transition: all 0.35s; -webkit-transition: all 0.35s; font-size: var(--font-size); /* font size를 추가 할 수 있습니다. */ } ``` 2\. 최근검색어 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. \ **css/layout/layout.css** ```css .recent_box dt { font-size: 13px; margin-bottom: 10px; font-weight: bold; } ``` 3\. 추천상품 폰트의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .recom_box dt { width: 100%; font-size: 13px; font-weight: var(--font-bold); line-height: 19px; text-align: center; margin-bottom: 10px; } ```푸터 변경하기 (폰트/컬러)
 1\. 푸터 메뉴 폰트의 **color(색상), border-left(선)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .foot_list ul li a { padding: 0 16px; font-weight: 700; /* color: var(--primary-color); color 추가 */ } .foot_list ul .divider { display: inline-block; width: 1px; background-color: #fff;/* 세로선 배경 색 변경 */ height: 12px; } ``` 2\. 푸터 정보영역 폰트의 **color(색상), font-size(크기), line-height(행간)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .foot_cont .foot_info { color: #fff; font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; } .content_info .cs_center p, .content_info .bank_info p, .content_info .notice_list li a { color: #c62525; font-family: 'Pretendard Variable'; font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; } .content_info .notice_list li a { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: break-word; color: #fff; } ```웹폰트 적용하기
1\. **관리자 페이지 > 디자인 메뉴**에 접속합니다. 2\. 좌측 하단 폴더트리 내 “**스타일시트/CSS**”를 더블 클릭하여 스타일시트 리스트 중 **reset.css**를 오픈하세요.  3\. reset.css 스타일시트의 3번째 줄에 @import url(’외부 스타일시트 경로’)을 변경할 수 있습니다. **css/reset.css** ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); /* 5번째줄에 추가 */ ``` 4\. 13번째 줄의 font-family의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Nanum Gothic(변경할 폰트명)으로 수정하세요.\ (한글 폰트 파일명의 경우 " "입력) **css/common/common.css** ```css .:root { ... --font-family: 'Pretendard variable'; ... } ``` 5. common.css --font-family에서 변경된 폰트는 reset.css 에서 하위 코드에 적용 됩니다. **css/reset.css** ``` .godo * { font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; } ... body, th, td, input, select, textarea, button { font-size: var(--font-size); line-height: 1.5; font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Dotum, '돋움', sans-serif; color: #333; } ``` ※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.최근 본 상품 변경하기
 1\. 최근 본 상품 영역의 **background(배경)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont { float:left; min-width:72px; padding:0px; background:none; } ``` 2\. 타이틀 폰트의 **color(색상), text-align(정렬)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont h4 { padding:0; color:#666666; text-align:center; } ``` 3\. 최근 본 상품 오버시 내용 **border(선), background(배경)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .src_box { position: absolute; top: 0; right: 74px; width: max-content; height: 100%; padding: 5px 5px 0 7px; border: 1px solid #999999; background: #ffffff; text-align: left; z-index: 10; } ``` 4\. 상품 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .src_box strong { display: block; color: #0CC472; } ``` 5\. 페이징 폰트의**color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .scr_paging strong { padding: 0 2px 0 2px; color: #0CC472; } ```진열타입 타이틀 변경하기(폰트/컬러)
 1\. 타이틀 폰트의**font-size(크기)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .goods_list_tit h3 { font-size:60px; font-weight: 400; } ``` 2\. 타이틀 영역 하단의 **border-bottom(선)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .goods_list_tit { padding:100px 0 10px 0; /* border-bottom:1px solid #ececec;*/ line-height:1; position:relative; } ``` 3\. 더보기 버튼의 **font-size(크기), font-weight(굵기), border(선)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .btn_goods_more .btn_goods_view_more { padding:2px 5px 3px 5px; font-size:14px; font-weight:400; border:0px solid #dbdbdb; } ```상품 리스트 변경하기
 1\. 상품명 **color(색상)** 값을 변경할 수 있습니다. \ (한줄 말줄임이 처리가 되어 있습니다.) **css/goods/list.css** ```css .item_tit_box .item_name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; padding: 0; font-size: 16px; text-overflow: ellipsis; font-weight: normal; overflow: hidden; line-height: 22px; color: var(--primary-default); /* color 추가 */ } ``` 2\. 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .item_money_box .item_price { /*display:block;*/ padding:0px; font-size:16px; color:#000000; font-weight:bold; } ```상품 상세 상단 변경하기(폰트)
 1\. 상품명 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_tit h3 { width:405px; font-size:18px; word-break: break-all; } ``` 2\. 상품 정보 타이틀 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_list dt { ffloat:left; width:80px; margin:0 10px 0 0; color:#888888; font-weight:normal; word-wrap:break-word; } ``` 3\. 상품 가격 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_price dd { margin: -2px 0 0 0; font-size: 16px; font-weight: bold; } ``` 4\. 총 합계금액 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dt { font-size: 16px; font-weight: bold; } ``` 5\. 총 합계금액 가격 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd { color:#0CC472; font-weight:bold; } ``` 6\. 총 합계금액 가격 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd strong { font-size: 20px; } ```상품 상세 상단 변경하기(버튼)
 1\. 공유하기 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **css/button.css** ```css .btn_gray_list a, .btn_gray_list button { display:inline-block; padding:0 0 0 11px; border:1px solid #999; vertical-align:middle; } ``` 2\. 조건별 배송 버튼의 **font-size(크기), background(배경)** 값을 변경할 수 있습니다. **css/button.css** ```css .btn_gray_list .btn_gray_small { font-size:11px; } ``` 3\. 장바구니 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다. **css/button.css** ```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:regular; } ``` 4\. 바로구매 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다. **css/button.css** ```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 #0CC472; background:#0CC472; text-align:center; font-weight:regular; } ```상품 상세 상단 변경하기
 1\. 셀렉트 영역의 **border(선), background(배경)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```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(선) 값을** 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_tit { position: relative; padding: 0 0 10px 0; border-bottom: 1px solid #dbdbdb; } ``` \ 3\. 선택한 옵션 영역의 **border-bottom(선) 값을** 변경할 수 있습니다. **css/layout/layout.css** ```css .item_detail_list + .item_choice_list table { width: 100%; border-bottom: 1px solid #999999; } ``` 5. 선택한 옵션영역의 background(배경) 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .item_choice_list table { width: 100%; background: #f5f5f5; } ```  6. 총 합계금액 구분 영역의 border-top(선) 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount { margin: 15px 0 0 0; padding-top: 10px; border-top: 1px solid #dbdbd ```상품 상세 탭 변경하기
 1\. 상품 상세 탭 선택시 **color(색상), font-weight(굵기), border(선)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_tab li.on a { padding-top: 18px; margin-top: 8px; color: #333333; font-weight: bold; border-bottom: 2px solid #ffffff; } ``` 2\. 글 등록 수량 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_tab li a strong { color: #ab3e55; } ```상품 상세 상품문의 영역-리스트 변경하기
 1\. 상품 문의 타이틀 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_sec h3 { padding: 45px 0 10px 0; font-size: 18px; } ``` 2\. 상품문의 전체보기 버튼의 **color(색상), font-weight(굵기), border(선), background(배경), text-align(정렬)** 값을 변경할 수 있습니다. **css/button.css** ```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(정렬)** 값을 변경할 수 있습니다. **css/button.css** ```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(선)** 값을 변경할 수 있습니다. **css/button.css** ```css .pagination .on { color: #ab3e55; font-weight: bold; border: 1px solid #ab3e55 ```상품 상세 상품문의 영역-리스트 내용 변경하기
 1\. 수정 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **css/button.css** ```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(배경)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .qna_new_box { text-align: left; background: #f8f8f8; } ```장바구니 화면 변경하기
 1\. 장바구니 타이틀 폰트의 **color(색상), font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit h2 { float: left; font-size: 28px; color: #222222; } ``` \ 2\. 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit .page_on { color: #ab3e55; font-weight: bold; } ``` 3\. 다음 진행 스텝 표시 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit ol li { float: left; font-size: 14px; color: #d1d1d1; } ``` 4\. 장바구니 타이틀 폰트 하단의 **border-bottom(선)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit { overflow: hidden; border-bottom: 1px solid #dbdbdb; } ```  5\. 장바구니 상품금액/배송비/최종 결제금액의 **color(색상), font-size(사이즈), font-weight(굵기)** 값을 변경할 수 있습니다.. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` 6\. 선택상품주문 버튼은 마우스 오버 전(.btn\_order\_choice\_buy) 과 오버 시(.btn\_order\_choice\_buy:hover)의 **border(선), font-size(사이즈), color(색상)** 값으로 각각 변경할 수 있습니다. **css/order/button.css** ```css .btn_order_choice_buy { min-width:190px; height:55px; padding:0 20px 0 20px; color:#3e3d3c; font-weight:bold; font-size:14px; border:1px solid #cccccc; background:#fff; cursor:pointer; } ``` ```css .btn_order_choice_buy:hover { color:#333333; border:1px solid #bbbbbb; } ``` 7\. 전체상품주문 버튼은 마우스 오버 전(.btn\_order\_whole\_buy) 과 오버 시(.btn\_order\_whole\_buy:hover) 의 **background(배경) 컬러, border(선), color(색상), font-size(사이즈)** 값으로 각각 변경할 수 있습니다. **css/button.css** ```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:#0CC472; cursor:pointer; font-weight:bold; } ```.btn_order_whole_buy:hover {
border:1px solid #02B666;
background:#02B666;
}
주문서 작성/결제 화면 변경하기
**주문서 금액 변경하기**  \- 상품금액/배송비/합계 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` **최종결제금액, 결제하기 버튼 변경하기**  1\. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **css/order/order.css** ```css .payment_final_total dd { display:inline-block; font-size:30px; color:#0CC472; } ``` 2\. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경할 수 있습니다. **css/button.css** ```css .btn_order_buy { display:inline-block; width:300px; height:61px; line-height:59px; color:#fff; font-size:20px; border:1px solid #0CC472; background:#0CC472; text-align:center; } ```포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\ Mygreek 스킨에 적용되어 있는 기본 컬러 코드 **#0CC472**을 확인합니다. 2. **디자인 스킨 리스트 접속** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트 3. 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ \- common.css를 더블 클릭 하여 common/gd\_common.css 파일을 엽니다. 4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경합니다.``` :root { --primary-default: #0cc472; /* 포인트 컬러 */ --primary-hover: #02b666; /* 포인트 컬러 hover */ --secondary-default: #ff5810; /* 서브 컬러 */ --neutrals-gray: #edebe5; --neutrals-dark: #000; --font-size: 12px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다.
푸터 변경하기
  1. CS CENTER, BANK INFO 변경하기\ CS CENTER, BANK INFO 타이틀의 color(색상), font-size(크기), font-weight(굵기), text-align(정렬)값을 변경할 수 있습니다. ```css .main .main_info_box .main_info dl dt { font-size: 13px; /* 글자 크기 */ margin: 0 5px; font-weight: bold; /* 글자 굵기 */ border-bottom: 1px solid #999; padding-bottom: 5px; color: #fff; /* 글자색 */ text-align: center; /* 정렬 */ } ``` 2. CS CENTER 전화번호, 예금주의 color(색상), font-size(크기), font-weight(굵기) 값을 변경할 수 있습니다. ```css .main .main_info dl dd p.phone a { font-size: 14px; /* 글자 크기 */ font-weight: bold; /* 글자 굵기 */ color: #5f1212; /* 글자 색 */ } ``` ```css .main .main_info dl dd .account_holder { padding: 5px 0; font-size: 14px; /*글자 크기*/ } ```  3\. 푸터 메뉴버튼의 **font-size(크기), color(색상), text-align(정렬), letter-spacing(자간), font-weight(굵기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_info2_box .ft_menu li a { display: block; padding: 18px 0px 10px 0px; font-size: 11px; color: #d1d1d1; text-align: left; letter-spacing: -1px; } ```  4\. 푸터 정보 부분의 **text-align(정렬), font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_info2_box .ft_address { padding: 0px; text-align: left; font-size: 12px; color: #e0e0e0; word-break: keep-all; } ```  5\. 푸터 카피라잇 영역의 **color(색상), font-size(크기), text-align(정렬)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_copy { padding:15px 0 30px 0; color:#e0e0e0; font-size:11px; text-align:left; font-style:normal; } ```고객센터, PC화면 버튼 변경하기
  1\. 고객센터, PC화면 버튼의 **background(배경), color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_button_box ul li a { display: block; padding: 10px 0; background: #484848; color: #aeaeae; font-size: 13px; border-radius: 20px; } ```상단 헤더 영역 변경하기
 1\. GNB영역의 **border-bottom(선), height(높이)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #header_wrap header .header_box { display: flex; justify-content: space-between; align-items: center; padding: 0 12px; border-bottom:1px solid #000; height: 62px; } ``` 2\. 장바구니 담긴상품 수량의 배경 **background(배경), color(**글자색) 값을 변경할 수 있습니다. **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; } ```슬라이드 메뉴 변경하기
 1\. 상단배너의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_banner .nav_login ul li a { display: inline-block; font-size: 15px; color: #222222; } ``` 2\. 아이콘 메뉴 영역의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_link ul li a { display: block; padding: 36px 0 0 0; font-size: 15px; color: #888; } ``` 3\. 탭버튼 활성화 시 **background(배경), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_tabmenu_box .nav_tabmenu li.on span { background: #ab3e55; color: #fff; font-weight: bold; } ``` 4\. 탭버튼 비활성화 시 **background(배경), color(색상)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **css/proc/proc.css** ```css .category_side > li a { position: relative; display: block; padding: 12px 0 12px 0; font-size: 16px; color: #262626; } ``` 메뉴 폰트 **font-weight(굵기)** 값을 변경할 수 있습니다. **proc > proc.css | css/proc/proc.css** ```css .category_side > li > a { font-weight: bold; } ``` 6\. 메뉴 폰트 선택 시 **color(색상)** 값을 변경할 수 있습니다. **css/proc/proc.css** ```css .category_side > li > a.on { color: var(--primary-default); } ```상품 리스트 스타일 변경하기
 1\. 상품리스트 이미지의 **border(라인)** 값을 변경할 수 있습니다. **css/goods/list/list\_01.css** ```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(크기)** 값을 변경할 수 있습니다. **css/goods/list/list\_01.css** ```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(색상)** 값을 변경할 수 있습니다. **css/goods/list/list\_01.css** ```css .goods_prd_item2 .goods_prd_content .goods_info_list li.price .c_price { color: #000; } ```진열타입 타이틀 변경하기
 1\. 타이틀의 **font-size(크기), color(색상), border-bottom(선), font-weight(굵기**) 값을 변경할 수 있습니다. **css/proc/proc.css** ```css ._goods_display_main h3 { position:relative; display:block; padding:40px 0px 0px 16px; font-size:24px; color:#181818; /* border-bottom:1px solid #f3f2f2; */ text-align:left; font-weight:400px; } ``` 2\. 더보기 버튼의 **background(배경), font-size(크기), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .main_more_btn2 { display: block; width: 70px; padding: 2px 8px; text-align: center; background: #000; font-size: 12px; font-weight: 600; /* border: 1px solid #9f9f9f; */ color: #fff; box-sizing: border-box; position: absolute; top: 50px; right: 0px; } ```상품후기 변경하기
 1\. 상품 후기 게시판 타이틀의 **background(배경), border-bottom(선)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(색상)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(색상)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(굵기)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(선)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .detail_write_btn { display:inline-block; width:100%; padding:10px 0 10px 0; text-align:center; color:#0CC472; font-size:15px; font-weight:bold; background:#ffffff; border:1px solid #0CC472; box-sizing:border-box; } ``` 6\. 상품평 더보기 버튼의 **text-align(정렬), color(색상), font-size(크기), background(배경)** 값을 변경할 수 있습니다. **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; } ```옵션 레이어-셀렉트박스 변경하기
 1\. 옵션 레이어의 기본 옵션 폰트의 **font-size(크기), color(색상), text-align(정렬), background(배경)** 값을 변경할 수 있습니다. **css/gd\_common.css** ```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(선)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **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; } ```옵션 레이어-항목 변경하기(폰트/버튼)
 1\. 옵션 레이어 쿠폰적용 버튼의 **background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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; } ```상품문의-리스트 변경하기
 1\. 상품문의 게시판 문의 상태표시 아이콘의 **font-size(크기), line-height(행간), background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경할 수 있습니다. **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:#0CC472; border-radius: 15px; border: 1px solid #0CC472; } ``` 2\. 문의 제목 폰트의 **font-size(크기), color(색상), line-height(행간)** 값을 변경할 수 있습니다. **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; } ```상품문의-비밀번호 인증 레이어 변경하기
 1\. 비밀번호 인증 레이어의 **height(높이), background(배경), border(선)** 값을 변경할 수 있습니다. **css/board/board.css** ```css .cite_layer .wrap { position: relative; height: 190px; background: #ffffff; border: 1px solid #555555; } ``` \ 2\. 비밀번호 인증 타이틀의 **height(높이), background(배경), border(선)** 값을 변경할 수 있습니다. **css/board/board.css** ```css .cite_layer .wrap h4 { height: 27px; padding: 13px 0 0 17px; background: #f4f4f4; color: #222222; } ``` 3\. 비밀번호 인증 레이어 확인 버튼의 **color(색상), border-radius(둥근선), background(배경)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .d_pw_confirm_btn { display:inline-block; padding:5px 15px 5px 15px; color:#ffffff; border:1px solid #0CC472; border-radius:3px; background:#0CC472; } ```상품문의-리스트 내용 변경하기(폰트/버튼)
 1\. 상품문의 내용 폰트의 **color(색상)** 값을 변경할 수 있습니다. **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(둥근선)** 값을 변경할 수 있습니다. **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; } ```상세 타이틀 및 info 레이어 폰트 변경하기
 1\. 상품 상세 타이틀의 **font-size(크기), line-height(행간), text-align(정렬)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```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(굵기)** 값을 변경할 수 있습니다. **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; } ```상품 상세 탭 변경하기
 1\. 상품 상세페이지 탭 폰트의 **color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **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(행간)** 값을 변경할 수 있습니다. **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: #0CC472; line-height: 11px; } ``` 3\. 현재위치 탭표시 라인의 **border-bottom(선)** 값을 변경할 수 있습니다. **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; } ```상품 상세 버튼 변경하기
 1\. 장바구니 버튼의 **font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **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; ```상품 상세 리스트 영역 변경하기
 1\. 상품명 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info h3 { font-size: 18px; color: #333333; word-break: break-all; } ``` 2\. 상품 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box .price { font-size: 20px; color: #333333; } ``` 3\. 상품 할인 전 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box del { color: #999999; } ``` 4\. 상품 상세페이지 리스트 제목**font-size(크기), color(색상)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **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(정렬), background(배경), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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; } ```장바구니 버튼 변경하기
 1\. 쿠폰적용 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .cart_option_modify { 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; } ``` 3\. 선택상품 삭제, 주문 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .cart_all_order_btn { display:inline-block; width:100%; padding:10px 0 10px 0; text-align:center; background:#0CC472; border:1px solid #0CC472; color:#ffffff; font-weight:bold; box-sizing:border-box; font-size:14px; } ```장바구니 폰트 변경하기
 1\. 장바구니 상품명 폰트의 **font-weight(굵기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```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(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```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(굵기)** 값을 변경할 수 있습니다. **css/order/order.css** ```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:#000; font-weight:bold; } ``` 4\. 장바구니 항목 타이틀 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl dt { display: table-cell; width: 50%; font-size: 13px; color: #5e5e5e; } ``` 5\. 장바구니 총 상품금액 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl dd { display: table-cell; width: 50%; text-align: right; font-size: 15px; color: #5e5e5e; } ``` 6\. 장바구니 총 합계금액 폰트의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl.total dd { color: #000; font-size: 17px; } ```포인트 컬러 일괄 변경하기
1. BaRamSoop스킨에 적용되어 있는 기본 컬러 코드 **#89735B 입니다** 2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ \- 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ \- common.css를 더블 클릭 하여 common/common.css 파일을 엽니다.\ 4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경할 수 있습니다. ``` :root { --primary-default: #89735B; /* 포인트 컬러 */ --primary-hover: #6B5237; /* 포인트 컬러 hover */ --secondary-default: #387B53; /* 서브 컬러 */ --neutrals-gray: #747474; --neutrals-dark: #343434; --font-size: 14px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1426px; /* 화면이 최소로 작아질 수 있는 너비 */ --max-width: 1920px; /* 화면이 최대한 넓어 질 수 있는 너비 */ } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경할 수 있습니다.
메뉴 변경하기
 1. 상단 메뉴의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css > layout/layout.css** ```css .top_member_box > li a{ display:inline-block; padding-left:20px; color:#fff; /* 컬러 변경 */ font-size:14px; /* 폰트사이즈 수정 */ } ``` 2. 장바구니 담긴상품 수량 폰트의 **color(색상)** 값을 변경할 수 있습니다.\ (현재는 기본 포인트 컬러 전역변수로 지정되어 있습니다.) **css > layout/layout.css** ```css .top_member_box > li strong { color: var(--primary-default);/* 기본 포인트 컬러를 원하는 색상으로 변경 */ } ``` 3. 상단 메뉴의 background-color(배경색), height(높이)를 변경할 수 있습니다. **css > layout/layout.css** ```css #header .header_top { position: relative; display: flex; align-items: center; background-color: var(--secondary-default); /* 배경색 */ height: 60px; /* 높이 */ } ```  4. 전체보기 메뉴의 **background-color(배경)** 값을 변경할 수 있습니다. \ (현재는 neutrals 컬러 코드 전역변수로 지정되어 있습니다.) **css > layout/layout.css** ```css #header .gnb_allmenu_wrap { display: none; position: fixed; top: 0; left: 0; width: 400px; background: var(--neutrals-gray); z-index: 999; } ``` 5. 카테고리 메뉴의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **css > layout/layout.css** ```css .header_gnb .gnb_allmenu_box a, .header_gnb .gnb_allmenu_box button { color: var(--neutrals-dark); font-size: 24px; font-weight: 400; height: 64px; line-height: 64px; width: 100%; text-align: left; display: block; } ``` 6. 메뉴 마우스 오버시의 **background(배경)**값을 변경할 수 있습니다. \ (현재는 기본 포인트 컬러 전역변수로 지정되어 있습니다.) **css > layout/layout.css** ```css .header_gnb .gnb_allmenu_box li:hover, .header_gnb .gnb_allmenu_box li.is-open > button:hover { background-color: var(--primary-default); } ```검색창 폰트 변경하기
검색창 인풋박스 입력 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css #header .top_search .top_text_cont .top_srarch_text { display: block; float: right; width: 34px; height: 34px; border: 0px solid #000; border-radius: 8px 8px; box-sizing: border-box; -moz-transition: all 0.35s; -webkit-transition: all 0.35s; font-size: var(--font-size); /* font size를 추가 할 수 있습니다. */ } ``` 2\. 최근검색어 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. \ **css/layout/layout.css** ```css .recent_box dt { font-size: 13px; margin-bottom: 10px; font-weight: bold; } ``` 3\. 추천상품 폰트의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .recom_box dt { width: 100%; font-size: 13px; font-weight: var(--font-bold); line-height: 19px; text-align: center; margin-bottom: 10px; } ```푸터 변경하기 (폰트/컬러)
 1\. 푸터 메뉴 폰트의 **color(색상), border-left(선)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .foot_list ul li a { padding: 0 16px; font-weight: 700; /* color: var(--primary-color); color 추가 */ } .foot_list ul .divider { display: inline-block; width: 1px; background-color: #fff;/* 세로선 배경 색 변경 */ height: 12px; } ``` 2\. 푸터 정보영역 폰트의 **color(색상), font-size(크기), line-height(행간)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .foot_cont .foot_info { color: #fff; font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; } .content_info .cs_center p, .content_info .bank_info p, .content_info .notice_list li a { color: #c62525; font-family: 'Pretendard Variable'; font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; } .content_info .notice_list li a { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: break-word; color: #fff; } ```웹폰트 적용하기
1\. **관리자 페이지 > 디자인 메뉴**에 접속합니다. 2\. 좌측 하단 폴더트리 내 “**스타일시트/CSS**”를 더블 클릭하여 스타일시트 리스트 중 **reset.css**를 오픈하세요.  3\. reset.css 스타일시트의 3번째 줄에 @import url(’외부 스타일시트 경로’)을 변경할 수 있습니다. **css/reset.css** ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); /* 5번째줄에 추가 */ ``` 4\. 13번째 줄의 font-family의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Nanum Gothic(변경할 폰트명)으로 수정하세요.\ (한글 폰트 파일명의 경우 " "입력) **css/common/common.css** ```css .:root { ... --font-family: 'Pretendard variable'; ... } ``` 5. common.css --font-family에서 변경된 폰트는 reset.css 에서 하위 코드에 적용 됩니다. **css/reset.css** ``` .godo * { font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; } ... body, th, td, input, select, textarea, button { font-size: var(--font-size); line-height: 1.5; font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Dotum, '돋움', sans-serif; color: #333; } ``` ※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.최근 본 상품 변경하기
 1\. 최근 본 상품 영역의 **background(배경)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont { float:left; min-width:72px; padding:0px; background:none; } ``` 2\. 타이틀 폰트의 **color(색상), text-align(정렬)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont h4 { padding:0; color:#666666; text-align:center; } ``` 3\. 최근 본 상품 오버시 내용 **border(선), background(배경)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .src_box { position: absolute; top: 0; right: 74px; width: max-content; height: 100%; padding: 5px 5px 0 7px; border: 1px solid #999999; background: #ffffff; text-align: left; z-index: 10; } ``` 4\. 상품 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .src_box strong { display: block; color: #0CC472; } ``` 5\. 페이징 폰트의**color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .scr_paging strong { padding: 0 2px 0 2px; color: #0CC472; } ```진열타입 하단 더보기 변경하기(폰트/컬러)
 1\. 하단 더보기의 width(너비), height(높이), background-color(배경색), color(폰트 색), font-size(폰트 크기)를 변경할 수 있습니다. **css/main/main.css** ```css .btn_goods_down_more .btn_goods_view_down_more { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 180px; /* 크기 */ height: 40px; /* 높이 */ background-color: #171717; /* 배경색 */ color: #fff; /* 글자색 */ font-weight: var(--font-regular); font-size: calc(var(--font-size) + 2px); /* 폰트 크기 */ line-height: 21px; } ```상품 리스트 변경하기
 1. tab메뉴 color(폰트 색), font-size(폰트 크기)를 변경할 수 있습니다. **css/main/main.css** ```css .main-best .display-type07 .goods_tab_tit a { padding: 0; color: var(--neutrals-gray); /* 폰트 색 */ font-weight: var(--font-medium); /* 폰트 두께 */ font-size: calc(var(--font-size) + 2px); /* 폰트 크기 */ line-height: 19px; } /* Hover시 */ .main-best .display-type07 .goods_tab_tit .on a { background-color: transparent; /* 배경색 */ color: var(--secondary-default); /* 폰트 색 */ font-weight: var(--font-bold); border-bottom: 0; } ``` 2\. 상품명 **color(색상)** 값을 변경할 수 있습니다. \ (한줄 말줄임이 처리가 되어 있습니다.) **css/goods/list.css** ```css .item_tit_box .item_name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; padding: 0; font-size: 16px; text-overflow: ellipsis; font-weight: normal; overflow: hidden; line-height: 22px; color: var(--primary-default); /* color 추가 */ } ``` 3\. 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .item_money_box .item_price { /*display:block;*/ padding:0px; font-size:16px; color:#000000; font-weight:bold; } ```상품 상세 상단 변경하기(폰트)
 * **상품 상세 이미지 크기가 600x600이상 일 경우 상품 영역에 맞춰 리사이징 됩니다.** * **상품 상세 이미지 크기가 600x600보다 작을 경우 상품 이미지 크기대로 노출됩니다.** 1\. 상품명 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_tit h3 { width:405px; font-size:18px; word-break: break-all; } ``` 2\. 상품 정보 타이틀 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_list dt { ffloat:left; width:80px; margin:0 10px 0 0; color:#888888; font-weight:normal; word-wrap:break-word; } ``` 3\. 상품 가격 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_price dd { margin: -2px 0 0 0; font-size: 16px; font-weight: bold; } ``` 4\. 총 합계금액 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dt { font-size: 16px; font-weight: bold; } ``` 5\. 총 합계금액 가격 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd { color:#0CC472; font-weight:bold; } ``` 6\. 총 합계금액 가격 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd strong { font-size: 20px; } ```상품 상세 상단 변경하기(버튼)
 1\. 공유하기 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **css/button.css** ```css .btn_gray_list a, .btn_gray_list button { display:inline-block; padding:0 0 0 11px; border:1px solid #999; vertical-align:middle; } ``` 2\. 조건별 배송 버튼의 **font-size(크기), background(배경)** 값을 변경할 수 있습니다. **css/button.css** ```css .btn_gray_list .btn_gray_small { font-size:11px; } ``` 3\. 장바구니 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다. **css/button.css** ```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:regular; } ``` 4\. 바로구매 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다. **css/button.css** ```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 #0CC472; background:#0CC472; text-align:center; font-weight:regular; } ```상품 상세 상단 변경하기
 1\. 셀렉트 영역의 **border(선), background(배경)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```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(선) 값을** 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_tit { position: relative; padding: 0 0 10px 0; border-bottom: 1px solid #dbdbdb; } ``` \ 3\. 선택한 옵션 영역의 **border-bottom(선) 값을** 변경할 수 있습니다. **css/layout/layout.css** ```css .item_detail_list + .item_choice_list table { width: 100%; border-bottom: 1px solid #999999; } ``` 5. 선택한 옵션영역의 background(배경) 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .item_choice_list table { width: 100%; background: #f5f5f5; } ``` 6. 총 합계금액 구분 영역의 border-top(선) 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount { margin: 15px 0 0 0; padding-top: 10px; border-top: 1px solid #dbdbd ```상품 상세 탭 변경하기
 1\. 상품 상세 탭 선택시 **color(색상), font-weight(굵기), border(선)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_tab li.on a { padding-top: 18px; margin-top: 8px; color: #333333; font-weight: bold; border-bottom: 2px solid #ffffff; } ``` 2\. 글 등록 수량 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_tab li a strong { color: #ab3e55; } ```상품 상세 상품문의 영역-리스트 변경하기
 1\. 상품 문의 타이틀 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_sec h3 { padding: 45px 0 10px 0; font-size: 18px; } ``` 2\. 상품문의 전체보기 버튼의 **color(색상), font-weight(굵기), border(선), background(배경), text-align(정렬)** 값을 변경할 수 있습니다. **css/button.css** ```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(정렬)** 값을 변경할 수 있습니다. **css/button.css** ```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(선)** 값을 변경할 수 있습니다. **css/button.css** ```css .pagination .on { color: #ab3e55; font-weight: bold; border: 1px solid #ab3e55 ```상품 상세 상품문의 영역-리스트 내용 변경하기
 1\. 수정 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **css/button.css** ```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(배경)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .qna_new_box { text-align: left; background: #f8f8f8; } ```장바구니 화면 변경하기
 1\. 장바구니 타이틀 폰트의 **color(색상), font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit h2 { float: left; font-size: 28px; color: #222222; } ``` \ 2\. 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit .page_on { color: #ab3e55; font-weight: bold; } ``` 3\. 다음 진행 스텝 표시 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit ol li { float: left; font-size: 14px; color: #d1d1d1; } ``` 4\. 장바구니 타이틀 폰트 하단의 **border-bottom(선)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit { overflow: hidden; border-bottom: 1px solid #dbdbdb; } ```  5\. 장바구니 상품금액/배송비/최종 결제금액의 **color(색상), font-size(사이즈), font-weight(굵기)** 값을 변경할 수 있습니다.. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` 6\. 선택상품주문 버튼은 마우스 오버 전(.btn\_order\_choice\_buy) 과 오버 시(.btn\_order\_choice\_buy:hover)의 **border(선), font-size(사이즈), color(색상)** 값으로 각각 변경할 수 있습니다. **css/order/button.css** ```css .btn_order_choice_buy { min-width:190px; height:55px; padding:0 20px 0 20px; color:#3e3d3c; font-weight:bold; font-size:14px; border:1px solid #cccccc; background:#fff; cursor:pointer; } ``` ```css .btn_order_choice_buy:hover { color:#333333; border:1px solid #bbbbbb; } ``` 7\. 전체상품주문 버튼은 마우스 오버 전(.btn\_order\_whole\_buy) 과 오버 시(.btn\_order\_whole\_buy:hover) 의 **background(배경) 컬러, border(선), color(색상), font-size(사이즈)** 값으로 각각 변경할 수 있습니다. **css/button.css** ```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:#0CC472; cursor:pointer; font-weight:bold; } ```.btn_order_whole_buy:hover {
border:1px solid #02B666;
background:#02B666;
}
주문서 작성/결제 화면 변경하기
**주문서 금액 변경하기**  \- 상품금액/배송비/합계 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` **최종결제금액, 결제하기 버튼 변경하기**  1\. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **css/order/order.css** ```css .payment_final_total dd { display:inline-block; font-size:30px; color:#0CC472; } ``` 2\. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경할 수 있습니다. **css/button.css** ```css .btn_order_buy { display:inline-block; width:300px; height:61px; line-height:59px; color:#fff; font-size:20px; border:1px solid #0CC472; background:#0CC472; text-align:center; } ```포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\ BaRamSoop 스킨에 적용되어 있는 기본 컬러 코드 **#89735B**을 확인합니다. 2. **디자인 스킨 리스트 접속** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트 3. 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ \- common.css를 더블 클릭 하여 common/gd\_common.css 파일을 엽니다. 4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경합니다.``` :root { --primary-default: #89735B; /* 포인트 컬러 */ --primary-hover: #6B5237; /* 포인트 컬러 hover */ --secondary-default: #387B53; /* 서브 컬러 */ --neutrals-gray: #747474; --neutrals-dark: #343434; --font-size: 12px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다.
푸터 변경하기
 1. CS CENTER, BANK INFO 변경하기\ CS CENTER, BANK INFO 타이틀의 color(색상), font-size(크기), font-weight(굵기), text-align(정렬)값을 변경할 수 있습니다. ```css .main_info_box .main_info dl dt { font-size: 13px; /* 글자 크기 */ margin: 0 5px; font-weight: bold; /* 글자 굵기 */ border-bottom: 1px solid #999; padding-bottom: 5px; color: #fff; /* 글자색 */ text-align: center; /* 정렬 */ } ``` 2. CS CENTER 전화번호, 예금주의 color(색상), font-size(크기), font-weight(굵기) 값을 변경할 수 있습니다. ```css .main_info dl dd p.phone a { font-size: 14px; /* 글자 크기 */ font-weight: bold; /* 글자 굵기 */ color: #5f1212; /* 글자 색 */ } ``` ```css .main_info dl dd .account_holder { padding: 5px 0; font-size: 14px; /*글자 크기*/ } ```  3\. 푸터 메뉴버튼의 **font-size(크기), color(색상), text-align(정렬), letter-spacing(자간), font-weight(굵기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_info2_box .ft_menu li a { display: block; padding: 18px 0px 10px 0px; font-size: 11px; color: #d1d1d1; text-align: left; letter-spacing: -1px; } ```  4\. 푸터 정보 부분의 **text-align(정렬), font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_info2_box .ft_address { padding: 0px; text-align: left; font-size: 12px; color: #e0e0e0; word-break: keep-all; } ```  5\. 푸터 카피라잇 영역의 **color(색상), font-size(크기), text-align(정렬)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_copy { padding:15px 0 30px 0; color:#e0e0e0; font-size:11px; text-align:left; font-style:normal; } ```고객센터, PC화면 버튼 변경하기
 1\. 고객센터, PC화면 버튼의 **background(배경), color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_button_box ul li a { display: block; padding: 10px 0; background: #484848; color: #aeaeae; font-size: 13px; border-radius: 20px; } ```상단 헤더 영역 변경하기
 1\. 헤더 영역의 background(배경색) 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #header_wrap header { width: 100%; min-width: 320px; background: var(--secondary-default); /* 배경색 */ z-index: 300; } #header_wrap header .header_box { display: flex; justify-content: space-between; align-items: center; padding: 0 12px; height: 68px; /* 높이 */ } ``` 2\. 장바구니 담긴상품 수량의 배경 **background(배경), color(**글자색) 값을 변경할 수 있습니다. **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; } ```슬라이드 메뉴 변경하기
 1\. 상단배너의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_banner .nav_login ul li a { display: inline-block; font-size: 15px; color: #222222; } ``` 2\. 아이콘 메뉴 영역의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_link ul li a { display: block; padding: 36px 0 0 0; font-size: 15px; color: #888; } ``` 3\. 탭버튼 활성화 시 **background(배경), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_tabmenu_box .nav_tabmenu li.on span { background: #ab3e55; color: #fff; font-weight: bold; } ``` 4\. 탭버튼 비활성화 시 **background(배경), color(색상)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **css/proc/proc.css** ```css .category_side > li a { position: relative; display: block; padding: 12px 0 12px 0; font-size: 16px; color: #262626; } ``` 메뉴 폰트 **font-weight(굵기)** 값을 변경할 수 있습니다. **proc > proc.css | css/proc/proc.css** ```css .category_side > li > a { font-weight: bold; } ``` 6\. 메뉴 폰트 선택 시 **color(색상)** 값을 변경할 수 있습니다. **css/proc/proc.css** ```css .category_side > li > a.on { color: var(--primary-default); } ```상품 리스트 스타일 변경하기
 1\. 상품리스트 이미지의 **border(라인)** 값을 변경할 수 있습니다. **css/goods/list/list\_01.css** ```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(크기)** 값을 변경할 수 있습니다. **css/goods/list/list\_01.css** ```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(색상)** 값을 변경할 수 있습니다. **css/goods/list/list\_01.css** ```css .goods_prd_item2 .goods_prd_content .goods_info_list li.price .c_price { color: #000; } ```진열타입 타이틀 노출하기
 1. 미노출 되어 있는 진열타입 타이틀, 상단 더보기를 노출할 수 있습니다. **css/main/main.css** ```css /* 삭제 */ .best_prd h3 { display: none; } /* 삭제 */ .main-series h3 { display: none; } /* 삭제 */ .main-popular h3 { display: none; } ``` 2\. 진열 타입 타이틀 노출 후 더보기 버튼의 background(배경), font-size(크기), border(선), color(색상), font-weight(굵기) 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .main_more_btn2 { display: block; width: 70px; padding: 2px 8px; text-align: center; background: #000; font-size: 12px; font-weight: 600; /* border: 1px solid #9f9f9f; */ color: #fff; box-sizing: border-box; position: absolute; top: 50px; right: 0px; } ```상품후기 변경하기
 1\. 상품 후기 게시판 타이틀의 **background(배경), border-bottom(선)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(색상)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(색상)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(굵기)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(선)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .detail_write_btn { display:inline-block; width:100%; padding:10px 0 10px 0; text-align:center; color:#0CC472; font-size:15px; font-weight:bold; background:#ffffff; border:1px solid #0CC472; box-sizing:border-box; } ``` 6\. 상품평 더보기 버튼의 **text-align(정렬), color(색상), font-size(크기), background(배경)** 값을 변경할 수 있습니다. **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; } ```옵션 레이어-셀렉트박스 변경하기
 1\. 옵션 레이어의 기본 옵션 폰트의 **font-size(크기), color(색상), text-align(정렬), background(배경)** 값을 변경할 수 있습니다. **css/gd\_common.css** ```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(선)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **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; } ```옵션 레이어-항목 변경하기(폰트/버튼)
 1\. 옵션 레이어 쿠폰적용 버튼의 **background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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; } ```상품문의-리스트 변경하기
 1\. 상품문의 게시판 문의 상태표시 아이콘의 **font-size(크기), line-height(행간), background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경할 수 있습니다. **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:#0CC472; border-radius: 15px; border: 1px solid #0CC472; } ``` 2\. 문의 제목 폰트의 **font-size(크기), color(색상), line-height(행간)** 값을 변경할 수 있습니다. **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; } ```상품문의-비밀번호 인증 레이어 변경하기
 1\. 비밀번호 인증 레이어의 **height(높이), background(배경), border(선)** 값을 변경할 수 있습니다. **css/board/board.css** ```css .cite_layer .wrap { position: relative; height: 190px; background: #ffffff; border: 1px solid #555555; } ``` \ 2\. 비밀번호 인증 타이틀의 **height(높이), background(배경), border(선)** 값을 변경할 수 있습니다. **css/board/board.css** ```css .cite_layer .wrap h4 { height: 27px; padding: 13px 0 0 17px; background: #f4f4f4; color: #222222; } ``` 3\. 비밀번호 인증 레이어 확인 버튼의 **color(색상), border-radius(둥근선), background(배경)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .d_pw_confirm_btn { display:inline-block; padding:5px 15px 5px 15px; color:#ffffff; border:1px solid #0CC472; border-radius:3px; background:#0CC472; } ```상품문의-리스트 내용 변경하기(폰트/버튼)
 1\. 상품문의 내용 폰트의 **color(색상)** 값을 변경할 수 있습니다. **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(둥근선)** 값을 변경할 수 있습니다. **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; } ```상세 타이틀 및 info 레이어 폰트 변경하기
 1\. 상품 상세 타이틀의 **font-size(크기), line-height(행간), text-align(정렬)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```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(굵기)** 값을 변경할 수 있습니다. **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; } ```상품 상세 탭 변경하기
 1\. 상품 상세페이지 탭 폰트의 **color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **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(행간)** 값을 변경할 수 있습니다. **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: #0CC472; line-height: 11px; } ``` 3\. 현재위치 탭표시 라인의 **border-bottom(선)** 값을 변경할 수 있습니다. **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; } ```상품 상세 버튼 변경하기
 1\. 장바구니 버튼의 **font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **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; ```상품 상세 리스트 영역 변경하기
 1\. 상품명 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info h3 { font-size: 18px; color: #333333; word-break: break-all; } ``` 2\. 상품 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box .price { font-size: 20px; color: #333333; } ``` 3\. 상품 할인 전 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box del { color: #999999; } ``` 4\. 상품 상세페이지 리스트 제목**font-size(크기), color(색상)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **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(정렬), background(배경), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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; } ```장바구니 버튼 변경하기
 1\. 쿠폰적용 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .cart_option_modify { 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; } ``` 3\. 선택상품 삭제, 주문 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .cart_all_order_btn { display:inline-block; width:100%; padding:10px 0 10px 0; text-align:center; background:#0CC472; border:1px solid #0CC472; color:#ffffff; font-weight:bold; box-sizing:border-box; font-size:14px; } ```장바구니 폰트 변경하기
 1\. 장바구니 상품명 폰트의 **font-weight(굵기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```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(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```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(굵기)** 값을 변경할 수 있습니다. **css/order/order.css** ```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:#000; font-weight:bold; } ``` 4\. 장바구니 항목 타이틀 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl dt { display: table-cell; width: 50%; font-size: 13px; color: #5e5e5e; } ``` 5\. 장바구니 총 상품금액 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl dd { display: table-cell; width: 50%; text-align: right; font-size: 15px; color: #5e5e5e; } ``` 6\. 장바구니 총 합계금액 폰트의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl.total dd { color: #000; font-size: 17px; } ```포인트 컬러 일괄 변경하기
1. Weyouwe스킨에 적용되어 있는 기본 컬러 코드 **#700909 입니다** 2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ \- 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ \- common.css를 더블 클릭 하여 common/common.css 파일을 엽니다.\ 4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경할 수 있습니다. ``` :root { --primary-default: #700909; /* 포인트 컬러 */ --primary-hover: #490A0A; /* 포인트 컬러 hover */ --secondary-default: #0D0D0D; /* 서브 컬러 */ --neutrals-gray: #747474; --neutrals-dark: #343434; --font-size: 14px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-family-point: 'Bebas Neue'; /* 포인트 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1450px; /* 화면이 최소로 작아질 수 있는 너비 */ --max-width: 1680px; /* 화면이 최대한 넓어 질 수 있는 너비 */ } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경할 수 있습니다. 6. 메인 페이지 상품 리스트 타이틀 변경 시 --font-family-point 값을 변경 할 수 있습니다.
메뉴 변경하기
1. 상단 메뉴의 color(색상), font-size(크기), text-transform(영문 폰트 변형) 값을 변경할 수 있습니다. **css > layout/layout.css** ```css .top_member_box > li a{ display: inline-block; padding-left: 20px; color: #fff; /* 메뉴 색 */ font-size: 14px; /* 폰트 사이즈 */ font-style: medium; text-transform: uppercase; /* 영문 소문자로 변경시 삭제 */ } ``` 2. 장바구니 담긴상품 수량 폰트의 **color(색상)** 값을 변경할 수 있습니다.\ (현재는 기본 포인트 컬러 전역변수로 지정되어 있습니다.) **css > layout/layout.css** ```css .top_member_box > li strong { color: var(--primary-default);/* 기본 포인트 컬러를 원하는 색상으로 변경 */ } ``` 3. 상단 메뉴의 background-color(배경색), height(높이) 을 변경할 수 있습니다 **css > layout/layout.css** ```css #header .header_top { position: relative; display: flex; align-items: center; background-color: #000; /* 배경색 */ border-bottom: 1px solid #000; height: 64px; /* 높이 값 */ } ``` 4. 전체보기 메뉴의 **background-color(배경)** 값을 변경할 수 있습니다. \ (현재는 neutrals 컬러 코드 전역변수로 지정되어 있습니다.) **css > layout/layout.css** ```css #header .gnb_allmenu_wrap { display: none; position: fixed; top: 0; left: 0; width: 400px; background: var(--neutrals-gray); z-index: 999; } ``` 5. 카테고리 메뉴의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **css > layout/layout.css** ```css .header_gnb .gnb_allmenu_box a, .header_gnb .gnb_allmenu_box button { color: var(--neutrals-dark); font-size: 24px; font-weight: 400; height: 64px; line-height: 64px; width: 100%; text-align: left; display: block; } ``` 6. 메뉴 마우스 오버시의 **background(배경)**값을 변경할 수 있습니다. \ (현재는 기본 포인트 컬러 전역변수로 지정되어 있습니다.) **css > layout/layout.css** ```css .header_gnb .gnb_allmenu_box li:hover, .header_gnb .gnb_allmenu_box li.is-open > button:hover { background-color: var(--primary-default); } ```검색창 변경
1\. 검색창 font-size(폰트 크기), border-block-end(하단 보더), inline-size(너비), block-size(높이)를 변경할 수 있습니다. **css/layout/layout.css** ``` #header .top_search .top_text_cont { display: inline-flex; align-items: center; justify-content: space-between; inline-size: 210px; /* 너비 */ block-size: 36px; /* 높이 */ padding-inline-end: 10px; border-block-end: 1px solid #fff; /* 하단 보더 */ font-size: var(--font-size); /* 폰트 사이즈를 추가할 수 있습니다. */ } ``` 2. 최근검색어 폰트의 font-size(크기), font-weight(굵기) 값을 변경할 수 있습니다. **css/layout/layout.css** ``` .recent_box dt { font-size: 13px; /* 폰트 사이즈 */ margin-bottom: 10px; font-weight: bold; /* 폰트 굵기 */ } ``` 3. 추천상품 폰트의 font-size(크기), font-weight(굵기), text-align(정렬) 값을 변경할 수 있습니다. **css/layout/layout.css** ``` .recom_box dt { width: 100%; font-size: 13px; font-weight: var(--font-bold); line-height: 19px; text-align: center; margin-bottom: 10px; } ```푸터 변경하기 (폰트/컬러)
 1\. 푸터 메뉴 폰트의 **color(색상), border-left(선)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .foot_list ul li a { padding: 0 16px; font-weight: 700; /* color: var(--primary-color); color 추가 */ } .foot_list ul .divider { display: inline-block; width: 1px; background-color: #fff;/* 세로선 배경 색 변경 */ height: 12px; } ``` 2\. 푸터 정보영역 폰트의 **color(색상), font-size(크기), line-height(행간)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .foot_cont .foot_info { color: #fff; font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; } .content_info .cs_center p, .content_info .bank_info p, .content_info .notice_list li a { color: #c62525; font-family: 'Pretendard Variable'; font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; } .content_info .notice_list li a { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: break-word; color: #fff; } ```웹폰트 적용하기
1\. **관리자 페이지 > 디자인 메뉴**에 접속합니다. 2\. 좌측 하단 폴더트리 내 “**스타일시트/CSS**”를 더블 클릭하여 스타일시트 리스트 중 **reset.css**를 오픈하세요.  3\. reset.css 스타일시트의 3번째 줄에 @import url(’외부 스타일시트 경로’)을 변경할 수 있습니다. **css/reset.css** ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); /* 5번째줄에 추가 */ ``` 4\. 13번째 줄의 font-family의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Nanum Gothic(변경할 폰트명)으로 수정하세요.\ (한글 폰트 파일명의 경우 " "입력) **css/common/common.css** ```css .:root { ... --font-family: 'Pretendard variable'; ... } ``` 5. common.css --font-family에서 변경된 폰트는 reset.css 에서 하위 코드에 적용 됩니다. **css/reset.css** ``` .godo * { font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; } ... body, th, td, input, select, textarea, button { font-size: var(--font-size); line-height: 1.5; font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Dotum, '돋움', sans-serif; color: #333; } ``` ※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.최근 본 상품 변경하기
 1\. 최근 본 상품 영역의 **background(배경)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont { float:left; min-width:72px; padding:0px; background:none; } ``` 2\. 타이틀 폰트의 **color(색상), text-align(정렬)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont h4 { padding:0; color:#666666; text-align:center; } ``` 3\. 최근 본 상품 오버시 내용 **border(선), background(배경)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .src_box { position: absolute; top: 0; right: 74px; width: max-content; height: 100%; padding: 5px 5px 0 7px; border: 1px solid #999999; background: #ffffff; text-align: left; z-index: 10; } ``` 4\. 상품 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .src_box strong { display: block; color: #0CC472; } ``` 5\. 페이징 폰트의**color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .scr_paging strong { padding: 0 2px 0 2px; color: #0CC472; } ```진열타입 타이틀 변경하기(폰트/컬러)
 1\. 타이틀 폰트의**font-size(크기)** 값을 변경할 수 있습니다. **css/main/main.css** ```css .goods_list_tit h3 { text-align: center; font-family: var(--font-family-point); font-size: 80px; line-height: 64px; font-weight: var(--font-regular); margin-block-end: 12px; } ``` 2\. 더보기 버튼의 **font-size(크기), font-weight(굵기), border(선)** 값을 변경할 수 있습니다. **css/main/main.css** ```css .goods_list_tit .btn_goods_view_more { display: inline-flex; justify-content: center; align-items: center; height: 24px; width: 72px; border-radius: 12px; border: 1px solid #000; } ```상품 리스트 변경하기
 1\. 상품명 **color(색상)** 값을 변경할 수 있습니다. \ (한줄 말줄임이 처리가 되어 있습니다.) **css/goods/list.css** ```css .item_tit_box .item_name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; padding: 0; font-size: 16px; text-overflow: ellipsis; font-weight: normal; overflow: hidden; line-height: 22px; color: var(--primary-default); /* color 추가 */ } ``` 2\. 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .item_money_box .item_price { /*display:block;*/ padding:0px; font-size:16px; color:#000000; font-weight:bold; } ```상품 상세 상단 변경하기(폰트)
 * **상품 상세 이미지 크기가 600x600이상 일 경우 상품 영역에 맞춰 리사이징 됩니다.** * **상품 상세 이미지 크기가 600x600보다 작을 경우 상품 이미지 크기대로 노출됩니다.** 1\. 상품명 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_tit h3 { width:405px; font-size:18px; word-break: break-all; } ``` 2\. 상품 정보 타이틀 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_list dt { ffloat:left; width:80px; margin:0 10px 0 0; color:#888888; font-weight:normal; word-wrap:break-word; } ``` 3\. 상품 가격 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_price dd { margin: -2px 0 0 0; font-size: 16px; font-weight: bold; } ``` 4\. 총 합계금액 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dt { font-size: 16px; font-weight: bold; } ``` 5\. 총 합계금액 가격 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd { color:#0CC472; font-weight:bold; } ``` 6\. 총 합계금액 가격 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd strong { font-size: 20px; } ```상품 상세 상단 변경하기(버튼)
 1\. 공유하기 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **css/button.css** ```css .btn_gray_list a, .btn_gray_list button { display:inline-block; padding:0 0 0 11px; border:1px solid #999; vertical-align:middle; } ``` 2\. 조건별 배송 버튼의 **font-size(크기), background(배경)** 값을 변경할 수 있습니다. **css/button.css** ```css .btn_gray_list .btn_gray_small { font-size:11px; } ``` 3\. 장바구니 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다. **css/button.css** ```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:regular; } ``` 4\. 바로구매 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다. **css/button.css** ```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 #0CC472; background:#0CC472; text-align:center; font-weight:regular; } ```상품 상세 상단 변경하기
 1\. 셀렉트 영역의 **border(선), background(배경)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```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(선) 값을** 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_tit { position: relative; padding: 0 0 10px 0; border-bottom: 1px solid #dbdbdb; } ``` \ 3\. 선택한 옵션 영역의 **border-bottom(선) 값을** 변경할 수 있습니다. **css/layout/layout.css** ```css .item_detail_list + .item_choice_list table { width: 100%; border-bottom: 1px solid #999999; } ``` 5. 선택한 옵션영역의 background(배경) 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .item_choice_list table { width: 100%; background: #f5f5f5; } ``` 6. 총 합계금액 구분 영역의 border-top(선) 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount { margin: 15px 0 0 0; padding-top: 10px; border-top: 1px solid #dbdbd ```상품 상세 탭 변경하기
 1\. 상품 상세 탭 선택시 **color(색상), font-weight(굵기), border(선)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_tab li.on a { padding-top: 18px; margin-top: 8px; color: #333333; font-weight: bold; border-bottom: 2px solid #ffffff; } ``` 2\. 글 등록 수량 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_tab li a strong { color: #ab3e55; } ```상품 상세 상품문의 영역-리스트 변경하기
 1\. 상품 문의 타이틀 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_sec h3 { padding: 45px 0 10px 0; font-size: 18px; } ``` 2\. 상품문의 전체보기 버튼의 **color(색상), font-weight(굵기), border(선), background(배경), text-align(정렬)** 값을 변경할 수 있습니다. **css/button.css** ```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(정렬)** 값을 변경할 수 있습니다. **css/button.css** ```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(선)** 값을 변경할 수 있습니다. **css/button.css** ```css .pagination .on { color: #ab3e55; font-weight: bold; border: 1px solid #ab3e55 ```상품 상세 상품문의 영역-리스트 내용 변경하기
 1\. 수정 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **css/button.css** ```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(배경)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .qna_new_box { text-align: left; background: #f8f8f8; } ```장바구니 화면 변경하기
 1\. 장바구니 타이틀 폰트의 **color(색상), font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit h2 { float: left; font-size: 28px; color: #222222; } ``` \ 2\. 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit .page_on { color: #ab3e55; font-weight: bold; } ``` 3\. 다음 진행 스텝 표시 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit ol li { float: left; font-size: 14px; color: #d1d1d1; } ``` 4\. 장바구니 타이틀 폰트 하단의 **border-bottom(선)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit { overflow: hidden; border-bottom: 1px solid #dbdbdb; } ```  5\. 장바구니 상품금액/배송비/최종 결제금액의 **color(색상), font-size(사이즈), font-weight(굵기)** 값을 변경할 수 있습니다.. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` 6\. 선택상품주문 버튼은 마우스 오버 전(.btn\_order\_choice\_buy) 과 오버 시(.btn\_order\_choice\_buy:hover)의 **border(선), font-size(사이즈), color(색상)** 값으로 각각 변경할 수 있습니다. **css/order/button.css** ```css .btn_order_choice_buy { min-width:190px; height:55px; padding:0 20px 0 20px; color:#3e3d3c; font-weight:bold; font-size:14px; border:1px solid #cccccc; background:#fff; cursor:pointer; } ``` ```css .btn_order_choice_buy:hover { color:#333333; border:1px solid #bbbbbb; } ``` 7\. 전체상품주문 버튼은 마우스 오버 전(.btn\_order\_whole\_buy) 과 오버 시(.btn\_order\_whole\_buy:hover) 의 **background(배경) 컬러, border(선), color(색상), font-size(사이즈)** 값으로 각각 변경할 수 있습니다. **css/button.css** ```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:#0CC472; cursor:pointer; font-weight:bold; } ```.btn_order_whole_buy:hover {
border:1px solid #02B666;
background:#02B666;
}
주문서 작성/결제 화면 변경하기
**주문서 금액 변경하기**  \- 상품금액/배송비/합계 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` **최종결제금액, 결제하기 버튼 변경하기**  1\. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **css/order/order.css** ```css .payment_final_total dd { display:inline-block; font-size:30px; color:#0CC472; } ``` 2\. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경할 수 있습니다. **css/button.css** ```css .btn_order_buy { display:inline-block; width:300px; height:61px; line-height:59px; color:#fff; font-size:20px; border:1px solid #0CC472; background:#0CC472; text-align:center; } ```포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\ Weyouwe 스킨에 적용되어 있는 기본 컬러 코드 **#700909**을 확인합니다. 2. **디자인 스킨 리스트 접속** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트 3. 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ \- common.css를 더블 클릭 하여 common/gd\_common.css 파일을 엽니다. 4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경합니다.``` :root { --primary-default: #700909; /* 포인트 컬러 */ --primary-hover: #490A0A; /* 포인트 컬러 hover */ --secondary-default: #0D0D0D; /* 서브 컬러 */ --neutrals-gray: #747474; --neutrals-dark: #343434; --font-size: 12px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-family-point: 'Bebas Neue'; /* 포인트 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다. 6. 메인 상품리스트 타이틀 변경시 --font-family-point 값을 변경 합니다.
푸터 변경하기
 1. CS CENTER, BANK INFO 변경하기\ CS CENTER, BANK INFO 타이틀의 color(색상), font-size(크기), font-weight(굵기), text-align(정렬)값을 변경할 수 있습니다. ```css .main_info_box .main_info dl dt { font-size: 13px; /* 폰트 사이즈 */ font-weight: bold; /* 폰트 굵기 */ border-bottom: 1px solid #999; /* 하단 보더 */ padding-bottom: 5px; /* 타이틀 하단 여백 */ } ``` 2. CS CENTER 전화번호, 예금주의 color(색상), font-size(크기), font-weight(굵기) 값을 변경할 수 있습니다. ```css .main_info dl dd p.phone a { font-size: 14px; /* 글자 크기 */ font-weight: bold; /* 글자 굵기 */ color: #fff; /* 글자 색 */ } ``` ```css .main_info dl dd .account_holder { padding: 5px 0; font-size: 14px; /*글자 크기*/ } ```  3\. 푸터 메뉴버튼의 **font-size(크기), color(색상), text-align(정렬), letter-spacing(자간), font-weight(굵기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_info2_box .ft_menu li a { display: block; padding: 18px 0px 10px 0px; font-size: 11px; color: #d1d1d1; text-align: left; letter-spacing: -1px; } ```  4\. 푸터 정보 부분의 **text-align(정렬), font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_info2_box .ft_address { padding: 0px; text-align: left; font-size: 12px; color: #e0e0e0; word-break: keep-all; } ```  5\. 푸터 카피라잇 영역의 **color(색상), font-size(크기), text-align(정렬)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_copy { padding:15px 0 30px 0; color:#e0e0e0; font-size:11px; text-align:left; font-style:normal; } ```고객센터, PC화면 버튼 변경하기
 1\. 고객센터, PC화면 버튼의 **background(배경), color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_button_box ul li a { display: block; padding: 10px 0; background: #484848; color: #aeaeae; font-size: 13px; border-radius: 20px; } ```상단 헤더 영역 변경하기
 1. GNB영역의 background(배경색), border-bottom(선), height(높이) 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #header_wrap header { width: 100%; min-width: 320px; background: #000; z-index: 300; } ``` 2\. 장바구니 담긴상품 수량의 배경 **background(배경), color(**글자색) 값을 변경할 수 있습니다. **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; } ```슬라이드 메뉴 변경하기
 1\. 상단배너의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_banner .nav_login ul li a { display: inline-block; font-size: 15px; color: #222222; } ``` 2\. 아이콘 메뉴 영역의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_link ul li a { display: block; padding: 36px 0 0 0; font-size: 15px; color: #888; } ``` 3\. 탭버튼 활성화 시 **background(배경), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_tabmenu_box .nav_tabmenu li.on span { background: #ab3e55; color: #fff; font-weight: bold; } ``` 4\. 탭버튼 비활성화 시 **background(배경), color(색상)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **css/proc/proc.css** ```css .category_side > li a { position: relative; display: block; padding: 12px 0 12px 0; font-size: 16px; color: #262626; } ``` 메뉴 폰트 **font-weight(굵기)** 값을 변경할 수 있습니다. **proc > proc.css | css/proc/proc.css** ```css .category_side > li > a { font-weight: bold; } ``` 6\. 메뉴 폰트 선택 시 **color(색상)** 값을 변경할 수 있습니다. **css/proc/proc.css** ```css .category_side > li > a.on { color: var(--primary-default); } ```상품 리스트 스타일 변경하기
 1\. 상품리스트 이미지의 **border(라인)** 값을 변경할 수 있습니다. **css/goods/list/list\_01.css** ```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(크기)** 값을 변경할 수 있습니다. **css/goods/list/list\_01.css** ```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(색상)** 값을 변경할 수 있습니다. **css/goods/list/list\_01.css** ```css .goods_prd_item2 .goods_prd_content .goods_info_list li.price .c_price { color: #000; } ```진열타입 타이틀 변경하기
 1\. 타이틀의 **font-size(크기), color(색상), border-bottom(선), font-weight(굵기**) 값을 변경할 수 있습니다. **css/main/main.css** ```css ._goods_display_main h3 { font-family: var(--font-family-point); font-weight: var(--font-regular); font-size: 48px; line-height: 58px; color: #000; } ``` 2\. 더보기 버튼의 **background(배경), font-size(크기), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/main/main.css** ```css .new-we-you-we .main_more_btn2, .best-we-you-we .main_more_btn2 { display: flex; align-items: center; justify-content: center; padding: 2px 0 0; margin-inline: auto; background-color: transparent; color: #272727; border-radius: 12px; border: 1px solid #000; height: 24px; width: 72px; } ```상품후기 변경하기
 1\. 상품 후기 게시판 타이틀의 **background(배경), border-bottom(선)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(색상)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(색상)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(굵기)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(선)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .detail_write_btn { display:inline-block; width:100%; padding:10px 0 10px 0; text-align:center; color:#0CC472; font-size:15px; font-weight:bold; background:#ffffff; border:1px solid #0CC472; box-sizing:border-box; } ``` 6\. 상품평 더보기 버튼의 **text-align(정렬), color(색상), font-size(크기), background(배경)** 값을 변경할 수 있습니다. **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; } ```옵션 레이어-셀렉트박스 변경하기
 1\. 옵션 레이어의 기본 옵션 폰트의 **font-size(크기), color(색상), text-align(정렬), background(배경)** 값을 변경할 수 있습니다. **css/gd\_common.css** ```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(선)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **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; } ```옵션 레이어-항목 변경하기(폰트/버튼)
 1\. 옵션 레이어 쿠폰적용 버튼의 **background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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; } ```상품문의-리스트 변경하기
 1\. 상품문의 게시판 문의 상태표시 아이콘의 **font-size(크기), line-height(행간), background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경할 수 있습니다. **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:#0CC472; border-radius: 15px; border: 1px solid #0CC472; } ``` 2\. 문의 제목 폰트의 **font-size(크기), color(색상), line-height(행간)** 값을 변경할 수 있습니다. **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; } ```상품문의-비밀번호 인증 레이어 변경하기
 1\. 비밀번호 인증 레이어의 **height(높이), background(배경), border(선)** 값을 변경할 수 있습니다. **css/board/board.css** ```css .cite_layer .wrap { position: relative; height: 190px; background: #ffffff; border: 1px solid #555555; } ``` \ 2\. 비밀번호 인증 타이틀의 **height(높이), background(배경), border(선)** 값을 변경할 수 있습니다. **css/board/board.css** ```css .cite_layer .wrap h4 { height: 27px; padding: 13px 0 0 17px; background: #f4f4f4; color: #222222; } ``` 3\. 비밀번호 인증 레이어 확인 버튼의 **color(색상), border-radius(둥근선), background(배경)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .d_pw_confirm_btn { display:inline-block; padding:5px 15px 5px 15px; color:#ffffff; border:1px solid #0CC472; border-radius:3px; background:#0CC472; } ```상품문의-리스트 내용 변경하기(폰트/버튼)
 1\. 상품문의 내용 폰트의 **color(색상)** 값을 변경할 수 있습니다. **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(둥근선)** 값을 변경할 수 있습니다. **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; } ```상세 타이틀 및 info 레이어 폰트 변경하기
 1\. 상품 상세 타이틀의 **font-size(크기), line-height(행간), text-align(정렬)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```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(굵기)** 값을 변경할 수 있습니다. **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; } ```상품 상세 탭 변경하기
 1\. 상품 상세페이지 탭 폰트의 **color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **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(행간)** 값을 변경할 수 있습니다. **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: #0CC472; line-height: 11px; } ``` 3\. 현재위치 탭표시 라인의 **border-bottom(선)** 값을 변경할 수 있습니다. **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; } ```상품 상세 버튼 변경하기
 1\. 장바구니 버튼의 **font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **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; ```상품 상세 리스트 영역 변경하기
 1\. 상품명 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info h3 { font-size: 18px; color: #333333; word-break: break-all; } ``` 2\. 상품 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box .price { font-size: 20px; color: #333333; } ``` 3\. 상품 할인 전 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box del { color: #999999; } ``` 4\. 상품 상세페이지 리스트 제목**font-size(크기), color(색상)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **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(정렬), background(배경), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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; } ```장바구니 버튼 변경하기
 1\. 쿠폰적용 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .cart_option_modify { 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; } ``` 3\. 선택상품 삭제, 주문 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .cart_all_order_btn { display:inline-block; width:100%; padding:10px 0 10px 0; text-align:center; background:#0CC472; border:1px solid #0CC472; color:#ffffff; font-weight:bold; box-sizing:border-box; font-size:14px; } ```장바구니 폰트 변경하기
 1\. 장바구니 상품명 폰트의 **font-weight(굵기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```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(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```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(굵기)** 값을 변경할 수 있습니다. **css/order/order.css** ```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:#000; font-weight:bold; } ``` 4\. 장바구니 항목 타이틀 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl dt { display: table-cell; width: 50%; font-size: 13px; color: #5e5e5e; } ``` 5\. 장바구니 총 상품금액 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl dd { display: table-cell; width: 50%; text-align: right; font-size: 15px; color: #5e5e5e; } ``` 6\. 장바구니 총 합계금액 폰트의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl.total dd { color: #000; font-size: 17px; } ```포인트 컬러 일괄 변경하기
1. Mygreek스킨에 적용되어 있는 기본 컬러 코드 **#0B77E6 입니다** 2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ \- 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ \- common.css를 더블 클릭 하여 common/common.css 파일을 엽니다.\ 4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경할 수 있습니다. ``` :root { --primary-default: #0B77E6; /* 포인트 컬러 */ --primary-hover: #075BB2; /* 포인트 컬러 hover */ --secondary-default: #F0627E; /* 서브 컬러 */ --neutrals-gray: #edebe5; --neutrals-dark: #000; --font-size: 14px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-family-point: "Syncopate", serif; --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1800px; /* 화면이 최소로 작아질 수 있는 너비 */ --max-width: 1920px; /* 화면이 최대한 넓어 질 수 있는 너비 */ } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경할 수 있습니다.
메뉴 변경하기
1. 상단 메뉴의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다.
**css > layout/layout.css**
```css
.top_member_box > li a{
display:inline-block;
padding-left:20px;
color:#000; /* 컬러 변경 */
font-size:14px; /* 폰트사이즈 수정 */
font-style:medium;
}
```
2. 장바구니 담긴상품 수량 폰트의 **color(색상)** 값을 변경할 수 있습니다.\
(현재는 기본 포인트 컬러 전역변수로 지정되어 있습니다.)
**css > layout/layout.css**
```css
.top_member_box > li strong {
color: var(--primary-default);/* 기본 포인트 컬러를 원하는 색상으로 변경 */
}
```
3. 상단 메뉴의 background-color(배경색)을 변경할 수 있습니다.
**css > layout/layout.css**
```css
#header {
position: relative;
background-color: #F0EEEF; /* 배경색 변경 */
}
```
4. GNB 메뉴 수정하기
**css > layout/layout.css**
```
.gnb .depth0 > li > a {
position: relative;
display: inline-block;
padding: 0 20px;
font-size: 14px; /* 폰트 크기 수정 */
font-weight: bold;
text-align: center;
color: red; /*폰트 컬러 추가 */
}
```
5. 하위 1차 메뉴 Color(색상), hover Color를 변경 할 수 있습니다.
**css > layout/layout.css**
```
.gnb .depth1 li a:hover {
color: var(--primary-default); /* hover 컬러 변경 */
}
.gnb .depth3 a {
color: #9f9f9f; /* 하위 메뉴 컬러 변경 */
}
```
6. 하위 메뉴 배경색을 변경 할 수 있습니다.
**css > layout/layout.css**
```
#header .header_top_cont.is-active::after {
content: '';
position: absolute;
top: 100%;
left: 0;
background-color: #fff; /* 배경색 변경 */
width: 100%;
height: 332px;
}
```
푸터 변경하기 (폰트/컬러)
 1\. 푸터 메뉴 폰트의 **color(색상), border-left(선)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .foot_list ul li a { padding: 0 16px; font-weight: 700; /* color: var(--primary-color); color 추가 */ } .foot_list ul .divider { display: inline-block; width: 1px; background-color: #fff;/* 세로선 배경 색 변경 */ height: 12px; } ``` 2\. 푸터 정보영역 폰트의 **color(색상), font-size(크기), line-height(행간)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .foot_cont .foot_info { color: #fff; font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; } .content_info .cs_center p, .content_info .bank_info p, .content_info .notice_list li a { color: #c62525; font-family: 'Pretendard Variable'; font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; } .content_info .notice_list li a { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: break-word; color: #fff; } ```웹폰트 적용하기
1\. **관리자 페이지 > 디자인 메뉴**에 접속합니다. 2\. 좌측 하단 폴더트리 내 “**스타일시트/CSS**”를 더블 클릭하여 스타일시트 리스트 중 **reset.css**를 오픈하세요.  3\. reset.css 스타일시트의 3번째 줄에 @import url(’외부 스타일시트 경로’)을 변경할 수 있습니다. **css/reset.css** ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); /* 5번째줄에 추가 */ ``` 4\. 13번째 줄의 font-family의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Nanum Gothic(변경할 폰트명)으로 수정하세요.\ (한글 폰트 파일명의 경우 " "입력) **css/common/common.css** ```css .:root { ... --font-family: 'Pretendard variable'; ... } ``` 5. common.css --font-family에서 변경된 폰트는 reset.css 에서 하위 코드에 적용 됩니다. **css/reset.css** ``` .godo * { font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; } ... body, th, td, input, select, textarea, button { font-size: var(--font-size); line-height: 1.5; font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Dotum, '돋움', sans-serif; color: #333; } ``` ※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.메인 페이지 배경색 변경하기
 1\. 메인 페이지 배경색을 변경할 수 있습니다. **css/main/main.css**.main_content {
max-width: var(--max-width);
margin-inline: auto;
background-color: #F5F5F5; /* 배경색 변경 */
}
최근 본 상품 변경하기
 1\. 최근 본 상품 영역의 **background(배경)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont { float:left; min-width:72px; padding:0px; background:none; } ``` 2\. 타이틀 폰트의 **color(색상), text-align(정렬)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont h4 { padding:0; color:#666666; text-align:center; } ``` 3\. 최근 본 상품 오버시 내용 **border(선), background(배경)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .src_box { position: absolute; top: 0; right: 74px; width: max-content; height: 100%; padding: 5px 5px 0 7px; border: 1px solid #999999; background: #ffffff; text-align: left; z-index: 10; } ``` 4\. 상품 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .src_box strong { display: block; color: #0CC472; } ``` 5\. 페이징 폰트의**color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .scr_paging strong { padding: 0 2px 0 2px; color: #0CC472; } ```진열타입 타이틀 변경하기(폰트/컬러)
 1. 메인페이지의 진열 타입 폰트명, 폰트 크기를 변경할 수 있습니다. **css/main/main.css** ``` .goods_list_tit h3 { font-family: var(--font-family-point); /* 폰트명 변경 */ font-weight: var(--font-bold); font-size: 62px; /* 폰트 크기 변경 */ line-height: 65px; letter-spacing: -4px; } ``` 3\. 더보기 버튼의 **font-size(크기), font-weight(굵기), border(선)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .btn_goods_more .btn_goods_view_more { padding:2px 5px 3px 5px; font-size:14px; font-weight:400; border:0px solid #dbdbdb; } ```상품 리스트 변경하기
 1\. 상품명 **color(색상)** 값을 변경할 수 있습니다. \ (한줄 말줄임이 처리가 되어 있습니다.) **css/goods/list.css** ```css .item_tit_box .item_name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; padding: 0; font-size: 16px; text-overflow: ellipsis; font-weight: normal; overflow: hidden; line-height: 22px; color: var(--primary-default); /* color 추가 */ } ``` 2\. 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .item_money_box .item_price { /*display:block;*/ padding:0px; font-size:16px; color:#000000; font-weight:bold; } ```상품 상세 상단 변경하기(폰트)
 * **상품 상세 이미지 크기가 600x600이상 일 경우 상품 영역에 맞춰 리사이징 됩니다.** * **상품 상세 이미지 크기가 600x600보다 작을 경우 상품 이미지 크기대로 노출됩니다.** 1\. 상품명 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_tit h3 { width:405px; font-size:18px; word-break: break-all; } ``` 2\. 상품 정보 타이틀 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_list dt { ffloat:left; width:80px; margin:0 10px 0 0; color:#888888; font-weight:normal; word-wrap:break-word; } ``` 3\. 상품 가격 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_price dd { margin: -2px 0 0 0; font-size: 16px; font-weight: bold; } ``` 4\. 총 합계금액 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dt { font-size: 16px; font-weight: bold; } ``` 5\. 총 합계금액 가격 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd { color:#0CC472; font-weight:bold; } ``` 6\. 총 합계금액 가격 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd strong { font-size: 20px; } ```상품 상세 상단 변경하기(버튼)
 1\. 공유하기 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **css/button.css** ```css .btn_gray_list a, .btn_gray_list button { display:inline-block; padding:0 0 0 11px; border:1px solid #999; vertical-align:middle; } ``` 2\. 조건별 배송 버튼의 **font-size(크기), background(배경)** 값을 변경할 수 있습니다. **css/button.css** ```css .btn_gray_list .btn_gray_small { font-size:11px; } ``` 3\. 장바구니 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다. **css/button.css** ```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:regular; } ``` 4\. 바로구매 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다. **css/button.css** ```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 #0CC472; background:#0CC472; text-align:center; font-weight:regular; } ```상품 상세 상단 변경하기
 1\. 셀렉트 영역의 **border(선), background(배경)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```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(선) 값을** 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_tit { position: relative; padding: 0 0 10px 0; border-bottom: 1px solid #dbdbdb; } ``` \ 3\. 선택한 옵션 영역의 **border-bottom(선) 값을** 변경할 수 있습니다. **css/layout/layout.css** ```css .item_detail_list + .item_choice_list table { width: 100%; border-bottom: 1px solid #999999; } ``` 5. 선택한 옵션영역의 background(배경) 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .item_choice_list table { width: 100%; background: #f5f5f5; } ```  6. 총 합계금액 구분 영역의 border-top(선) 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount { margin: 15px 0 0 0; padding-top: 10px; border-top: 1px solid #dbdbd ```상품 상세 탭 변경하기
 1\. 상품 상세 탭 선택시 **color(색상), font-weight(굵기), border(선)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_tab li.on a { padding-top: 18px; margin-top: 8px; color: #333333; font-weight: bold; border-bottom: 2px solid #ffffff; } ``` 2\. 글 등록 수량 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_tab li a strong { color: #ab3e55; } ```상품 상세 상품문의 영역-리스트 변경하기
 1\. 상품 문의 타이틀 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_sec h3 { padding: 45px 0 10px 0; font-size: 18px; } ``` 2\. 상품문의 전체보기 버튼의 **color(색상), font-weight(굵기), border(선), background(배경), text-align(정렬)** 값을 변경할 수 있습니다. **css/button.css** ```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(정렬)** 값을 변경할 수 있습니다. **css/button.css** ```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(선)** 값을 변경할 수 있습니다. **css/button.css** ```css .pagination .on { color: #ab3e55; font-weight: bold; border: 1px solid #ab3e55 ```상품 상세 상품문의 영역-리스트 내용 변경하기
 1\. 수정 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **css/button.css** ```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(배경)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .qna_new_box { text-align: left; background: #f8f8f8; } ```장바구니 화면 변경하기
 1\. 장바구니 타이틀 폰트의 **color(색상), font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit h2 { float: left; font-size: 28px; color: #222222; } ``` \ 2\. 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit .page_on { color: #ab3e55; font-weight: bold; } ``` 3\. 다음 진행 스텝 표시 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit ol li { float: left; font-size: 14px; color: #d1d1d1; } ``` 4\. 장바구니 타이틀 폰트 하단의 **border-bottom(선)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit { overflow: hidden; border-bottom: 1px solid #dbdbdb; } ```  5\. 장바구니 상품금액/배송비/최종 결제금액의 **color(색상), font-size(사이즈), font-weight(굵기)** 값을 변경할 수 있습니다.. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` 6\. 선택상품주문 버튼은 마우스 오버 전(.btn\_order\_choice\_buy) 과 오버 시(.btn\_order\_choice\_buy:hover)의 **border(선), font-size(사이즈), color(색상)** 값으로 각각 변경할 수 있습니다. **css/order/button.css** ```css .btn_order_choice_buy { min-width:190px; height:55px; padding:0 20px 0 20px; color:#3e3d3c; font-weight:bold; font-size:14px; border:1px solid #cccccc; background:#fff; cursor:pointer; } ``` ```css .btn_order_choice_buy:hover { color:#333333; border:1px solid #bbbbbb; } ``` 7\. 전체상품주문 버튼은 마우스 오버 전(.btn\_order\_whole\_buy) 과 오버 시(.btn\_order\_whole\_buy:hover) 의 **background(배경) 컬러, border(선), color(색상), font-size(사이즈)** 값으로 각각 변경할 수 있습니다. **css/button.css** ```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:#0CC472; cursor:pointer; font-weight:bold; } ```.btn_order_whole_buy:hover {
border:1px solid #02B666;
background:#02B666;
}
주문서 작성/결제 화면 변경하기
**주문서 금액 변경하기**  \- 상품금액/배송비/합계 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` **최종결제금액, 결제하기 버튼 변경하기**  1\. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **css/order/order.css** ```css .payment_final_total dd { display:inline-block; font-size:30px; color:#0CC472; } ``` 2\. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경할 수 있습니다. **css/button.css** ```css .btn_order_buy { display:inline-block; width:300px; height:61px; line-height:59px; color:#fff; font-size:20px; border:1px solid #0CC472; background:#0CC472; text-align:center; } ```포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\ Mygreek 스킨에 적용되어 있는 기본 컬러 코드 **#0B77E6**을 확인합니다. 2. **디자인 스킨 리스트 접속** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트 3. 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ \- common.css를 더블 클릭 하여 common/gd\_common.css 파일을 엽니다. 4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경합니다.``` :root { --primary-default: #0B77E6; /* 포인트 컬러 */ --primary-hover: #075BB2; /* 포인트 컬러 hover */ --secondary-default: #F0627E; /* 서브 컬러 */ --neutrals-gray: #edebe5; --neutrals-dark: #000; --font-size: 12px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-family-point: "Syncopate", serif; --font-regular: 400; --font-medium: 500; --font-bold: 700; } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다.
푸터 변경하기
 1. CS CENTER, BANK INFO 변경하기\ CS CENTER, BANK INFO 타이틀의 color(색상), font-size(크기), font-weight(굵기), text-align(정렬)값을 변경할 수 있습니다. ```css .main .main_info_box .main_info dl dt { font-size: 13px; /* 글자 크기 */ margin: 0 5px; font-weight: bold; /* 글자 굵기 */ border-bottom: 1px solid #999; padding-bottom: 5px; color: #fff; /* 글자색 */ text-align: center; /* 정렬 */ } ``` 2. CS CENTER 전화번호, 예금주의 color(색상), font-size(크기), font-weight(굵기) 값을 변경할 수 있습니다. ```css .main .main_info dl dd p.phone a { font-size: 14px; /* 글자 크기 */ font-weight: bold; /* 글자 굵기 */ color: #5f1212; /* 글자 색 */ } ``` ```css .main .main_info dl dd .account_holder { padding: 5px 0; font-size: 14px; /*글자 크기*/ } ```  3\. 푸터 메뉴버튼의 **font-size(크기), color(색상), text-align(정렬), letter-spacing(자간), font-weight(굵기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_info2_box .ft_menu li a { display: block; padding: 18px 0px 10px 0px; font-size: 11px; color: #d1d1d1; text-align: left; letter-spacing: -1px; } ```  4\. 푸터 정보 부분의 **text-align(정렬), font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_info2_box .ft_address { padding: 0px; text-align: left; font-size: 12px; color: #e0e0e0; word-break: keep-all; } ```  5\. 푸터 카피라잇 영역의 **color(색상), font-size(크기), text-align(정렬)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_copy { padding:15px 0 30px 0; color:#e0e0e0; font-size:11px; text-align:left; font-style:normal; } ```고객센터, PC화면 버튼 변경하기
 1\. 고객센터, PC화면 버튼의 **background(배경), color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_button_box ul li a { display: block; padding: 10px 0; background: #484848; color: #aeaeae; font-size: 13px; border-radius: 20px; } ```상단 헤더 영역 변경하기
 1\. GNB영역의 **border-bottom(선), height(높이)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #header_wrap header .header_box { display: flex; justify-content: space-between; align-items: center; padding-inline: 16px; height: 66px; /*높이 값 변경*/ } ``` 2\. 장바구니 담긴상품 수량의 배경 **background(배경), color(**글자색) 값을 변경할 수 있습니다. **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; } ```슬라이드 메뉴 변경하기
 1\. 상단배너의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_banner .nav_login ul li a { display: inline-block; font-size: 15px; color: #222222; } ``` 2\. 아이콘 메뉴 영역의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_link ul li a { display: block; padding: 36px 0 0 0; font-size: 15px; color: #888; } ``` 3\. 탭버튼 활성화 시 **background(배경), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_tabmenu_box .nav_tabmenu li.on span { background: #ab3e55; color: #fff; font-weight: bold; } ``` 4\. 탭버튼 비활성화 시 **background(배경), color(색상)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **css/proc/proc.css** ```css .category_side > li a { position: relative; display: block; padding: 12px 0 12px 0; font-size: 16px; color: #262626; } ``` 메뉴 폰트 **font-weight(굵기)** 값을 변경할 수 있습니다. **proc > proc.css | css/proc/proc.css** ```css .category_side > li > a { font-weight: bold; } ``` 6\. 메뉴 폰트 선택 시 **color(색상)** 값을 변경할 수 있습니다. **css/proc/proc.css** ```css .category_side > li > a.on { color: var(--primary-default); } ```상품 리스트 스타일 변경하기
 1\. 상품리스트 이미지의 **border(라인)** 값을 변경할 수 있습니다. **css/goods/list/list\_01.css** ```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(크기)** 값을 변경할 수 있습니다. **css/goods/list/list\_01.css** ```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(색상)** 값을 변경할 수 있습니다. **css/goods/list/list\_01.css** ```css .goods_prd_item2 .goods_prd_content .goods_info_list li.price .c_price { color: #000; } ```메인 페이지 타이틀 변경하기
 1\. 메인페이지의 타이틀의 폰트명, 크기, 색상을 변경 할 수 있습니다. **css/main/main.css** ``` .main-todays-playlist__title { font-size: 30px; /* 폰트 크기 수정 */ font-family: var(--font-family-point);/*폰트명 변경 */ font-weight: var(--font-bold); letter-spacing: -4px; line-height: 31px; text-align: center; margin-block-end: 30px; color: var(--primary-default); /*색상 추가*/ } ```상품후기 변경하기
 1\. 상품 후기 게시판 타이틀의 **background(배경), border-bottom(선)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(색상)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(색상)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(굵기)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(선)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .detail_write_btn { display:inline-block; width:100%; padding:10px 0 10px 0; text-align:center; color:#0CC472; font-size:15px; font-weight:bold; background:#ffffff; border:1px solid #0CC472; box-sizing:border-box; } ``` 6\. 상품평 더보기 버튼의 **text-align(정렬), color(색상), font-size(크기), background(배경)** 값을 변경할 수 있습니다. **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; } ```옵션 레이어-셀렉트박스 변경하기
 1\. 옵션 레이어의 기본 옵션 폰트의 **font-size(크기), color(색상), text-align(정렬), background(배경)** 값을 변경할 수 있습니다. **css/gd\_common.css** ```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(선)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **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; } ```옵션 레이어-항목 변경하기(폰트/버튼)
 1\. 옵션 레이어 쿠폰적용 버튼의 **background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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; } ```상품문의-리스트 변경하기
 1\. 상품문의 게시판 문의 상태표시 아이콘의 **font-size(크기), line-height(행간), background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경할 수 있습니다. **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:#0CC472; border-radius: 15px; border: 1px solid #0CC472; } ``` 2\. 문의 제목 폰트의 **font-size(크기), color(색상), line-height(행간)** 값을 변경할 수 있습니다. **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; } ```상품문의-비밀번호 인증 레이어 변경하기
 1\. 비밀번호 인증 레이어의 **height(높이), background(배경), border(선)** 값을 변경할 수 있습니다. **css/board/board.css** ```css .cite_layer .wrap { position: relative; height: 190px; background: #ffffff; border: 1px solid #555555; } ``` \ 2\. 비밀번호 인증 타이틀의 **height(높이), background(배경), border(선)** 값을 변경할 수 있습니다. **css/board/board.css** ```css .cite_layer .wrap h4 { height: 27px; padding: 13px 0 0 17px; background: #f4f4f4; color: #222222; } ``` 3\. 비밀번호 인증 레이어 확인 버튼의 **color(색상), border-radius(둥근선), background(배경)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .d_pw_confirm_btn { display:inline-block; padding:5px 15px 5px 15px; color:#ffffff; border:1px solid #0CC472; border-radius:3px; background:#0CC472; } ```상품문의-리스트 내용 변경하기(폰트/버튼)
 1\. 상품문의 내용 폰트의 **color(색상)** 값을 변경할 수 있습니다. **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(둥근선)** 값을 변경할 수 있습니다. **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; } ```상세 타이틀 및 info 레이어 폰트 변경하기
 1\. 상품 상세 타이틀의 **font-size(크기), line-height(행간), text-align(정렬)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```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(굵기)** 값을 변경할 수 있습니다. **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; } ```상품 상세 탭 변경하기
 1\. 상품 상세페이지 탭 폰트의 **color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **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(행간)** 값을 변경할 수 있습니다. **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: #0CC472; line-height: 11px; } ``` 3\. 현재위치 탭표시 라인의 **border-bottom(선)** 값을 변경할 수 있습니다. **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; } ```상품 상세 버튼 변경하기
 1\. 장바구니 버튼의 **font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **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; ```상품 상세 리스트 영역 변경하기
 1\. 상품명 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info h3 { font-size: 18px; color: #333333; word-break: break-all; } ``` 2\. 상품 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box .price { font-size: 20px; color: #333333; } ``` 3\. 상품 할인 전 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box del { color: #999999; } ``` 4\. 상품 상세페이지 리스트 제목**font-size(크기), color(색상)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **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(정렬), background(배경), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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; } ```장바구니 버튼 변경하기
 1\. 쿠폰적용 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .cart_option_modify { 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; } ``` 3\. 선택상품 삭제, 주문 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .cart_all_order_btn { display:inline-block; width:100%; padding:10px 0 10px 0; text-align:center; background:#0CC472; border:1px solid #0CC472; color:#ffffff; font-weight:bold; box-sizing:border-box; font-size:14px; } ```장바구니 폰트 변경하기
 1\. 장바구니 상품명 폰트의 **font-weight(굵기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```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(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```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(굵기)** 값을 변경할 수 있습니다. **css/order/order.css** ```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:#000; font-weight:bold; } ``` 4\. 장바구니 항목 타이틀 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl dt { display: table-cell; width: 50%; font-size: 13px; color: #5e5e5e; } ``` 5\. 장바구니 총 상품금액 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl dd { display: table-cell; width: 50%; text-align: right; font-size: 15px; color: #5e5e5e; } ``` 6\. 장바구니 총 합계금액 폰트의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl.total dd { color: #000; font-size: 17px; } ```포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\ Mate\&Co 스킨에 적용되어 있는 기본 컬러 코드 **#**197C43을 확인합니다. 2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ \- 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ \- common.css를 더블 클릭 하여 common/common.css 파일을 엽니다.\ 4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경할 수 있습니다. ``` :root { --primary-default: #197C43; /* 포인트 컬러 */ --primary-hover: #025023; /* 포인트 컬러 hover */ --secondary-default: #AC6F0D; /* 서브 컬러 */ --neutrals-gray: #EDEBE5; --neutrals-dark: #000; --font-size: 14px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1440px; /* 화면이 최소로 작아질 수 있는 너비 */ --max-width: 1920px; /* 화면이 최대한 넓어 질 수 있는 너비 */ } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경할 수 있습니다.
메뉴 변경하기
1. 상단 메뉴의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css > layout/layout.css** ```css .top_member_box > li a{ display:inline-block; padding-left:20px; color:#000; /* 컬러 변경 */ font-size:16px; /* 폰트사이즈 수정 */ font-style:normal; } ``` 2. 장바구니 담긴상품 수량 폰트의 **color(색상)** 값을 변경할 수 있습니다.\ (현재는 기본 포인트 컬러 전역변수로 지정되어 있습니다.) **css > layout/layout.css** ```css .top_member_box > li strong { font-weight: 400; color: var(--neutrals-default);/* 기본 포인트 컬러를 원하는 색상으로 변경 */ } ``` 3. 상단 메뉴의 background-color(배경색)을 변경할 수 있습니다. **css > layout/layout.css** ```css #header .header_top { position: relative; display: flex; align-items: center; background-color: #fff; /* header 배경색 변경 */; /*border-bottom: 1px solid #000;*/ height: 120px; } ```검색창 폰트 변경하기
검색창 인풋박스 입력 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css #header .top_search .top_text_cont .top_srarch_text { display: block; float: right; width: 34px; height: 34px; border: 0px solid #000; border-radius: 50%; box-sizing: border-box; -moz-transition: all 0.35s; -webkit-transition: all 0.35s; color: #000; font-size: var(--font-size); /* font size를 추가 할 수 있습니다. */ } ``` 2\. 최근검색어 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. \ **css/layout/layout.css** ```css .recent_box dt { font-size: 13px; margin-bottom: 10px; font-weight: bold; } ``` 3\. 추천상품 폰트의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .recom_box dt { width: 100%; font-size: 13px; font-weight: var(--font-bold); line-height: 19px; text-align: center; margin-bottom: 10px; } ```푸터 변경하기 (폰트/컬러)
 1\. 푸터 메뉴 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .foot_cont a { color: #000; } ``` 2\. 푸터 정보영역 폰트의 **color(색상), font-size(크기), line-height(행간)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .foot_cont .foot_info { color: #000; font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; } ```웹폰트 적용하기
1\. **관리자 페이지 > 디자인 메뉴**에 접속합니다. 2\. 좌측 하단 폴더트리 내 “**스타일시트/CSS**”를 더블 클릭하여 스타일시트 리스트 중 **reset.css**를 오픈하세요.  3\. reset.css 스타일시트의 3번째 줄에 @import url(’외부 스타일시트 경로’)을 변경할 수 있습니다. **css/reset.css** ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); /* 5번째줄에 추가 */ ``` 4\. 13번째 줄의 font-family의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Nanum Gothic(변경할 폰트명)으로 수정하세요.\ (한글 폰트 파일명의 경우 " "입력) **css/common/common.css** ```css .:root { ... --font-family: 'Pretendard variable'; ... } ``` 5. common.css --font-family에서 변경된 폰트는 reset.css 에서 하위 코드에 적용 됩니다. **css/reset.css** ``` .godo * { font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; } ... body, th, td, input, select, textarea, button { font-size: var(--font-size); line-height: 1.5; font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Dotum, '돋움', sans-serif; color: #333; } ``` ※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.최근 본 상품 변경하기
 1\. 최근 본 상품 영역의 **background(배경), color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont { float: left; min-width: 72px; padding: 0px; background: none; color: #000; } ``` 2\. 타이틀 폰트의 **text-align(정렬)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont h4 { font-size: 11px; font-style: normal; font-weight: 700; line-height: 12px; text-transform: uppercase; text-align: center; } ``` 3\. 최근 본 상품 오버시 내용 **border(선), background(배경)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .src_box { position: absolute; top: 0; right: 74px; width: max-content; height: 100%; padding: 5px 5px 0 7px; border: 1px solid #999999; background: #ffffff; text-align: left; z-index: 10; } ``` 4\. 상품 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .src_box strong { display: block; color: #0CC472; } ``` 5\. 페이징 폰트의**color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .scr_paging strong { padding: 0 2px 0 2px; color: #0CC472; } ```진열타입 타이틀 변경하기(폰트/컬러)
 1\. 타이틀 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/main/main.css** ```css .main_goods_cont .goods_list_tit h3 { font-size: 50px; font-weight: 700; color: #000; font-family: "Bellota Text"; } ``` 2\. 타이틀 영역 하단의 **border-bottom(선)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .goods_list_tit { /* padding:100px 0 10px 0; */ /* border-bottom:1px solid #ececec;*/ line-height:1; position:relative; } ``` 3\. 더보기 버튼의 **font-size(크기), font-weight(굵기), border(선)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .btn_goods_more .btn_goods_view_more { padding:2px 5px 3px 5px; /*font-size:14px;*/ /*font-weight:400;*/ border:0px solid #dbdbdb; } ```상품 리스트 변경하기
 * **상품이미지 정렬은 기본 왼쪽 정렬입니다. 435px보다 작은 이미지일 경우 왼쪽 정렬로 노출 됩니다.** 1\. 상품명 **color(색상)** 값을 변경할 수 있습니다. \ (한줄 말줄임이 처리가 되어 있습니다.) **css/goods/list.css** ```css .item_tit_box .item_name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; padding: 0; font-size: 16px; text-overflow: ellipsis; font-weight: normal; overflow: hidden; line-height: 22px; color: var(--primary-default); /* color 추가 */ } ``` 2\. 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .item_money_box .item_price { /*display:block;*/ padding:0px; font-size:16px; color:#000000; font-weight:bold; } ```상품 상세 상단 변경하기(폰트)
 * **상품 상세 이미지 크기가 600x600이상 일 경우 상품 영역에 맞춰 리사이징 됩니다.** * **상품 상세 이미지 크기가 600x600보다 작을 경우 상품 이미지 크기대로 노출됩니다.** 1\. 상품명 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_tit h3 { width:405px; font-size:18px; word-break: break-all; } ``` 2\. 상품 정보 타이틀 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_list dt { ffloat:left; width:80px; margin:0 10px 0 0; color:#888888; font-weight:normal; word-wrap:break-word; } ``` 3\. 상품 가격 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_price dd { margin: -2px 0 0 0; font-size: 16px; font-weight: bold; } ``` 4\. 총 합계금액 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dt { font-size: 16px; font-weight: bold; } ``` 5\. 총 합계금액 가격 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd { color:#0CC472; font-weight:bold; } ``` 6\. 총 합계금액 가격 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd strong { font-size: 20px; } ```상품 상세 상단 변경하기(버튼)
 1\. 공유하기 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **css/button.css** ```css .btn_gray_list a, .btn_gray_list button { display:inline-block; padding:0 0 0 11px; border:1px solid #999; vertical-align:middle; } ``` 2\. 조건별 배송 버튼의 **font-size(크기), background(배경)** 값을 변경할 수 있습니다. **css/button.css** ```css .btn_gray_list .btn_gray_small { font-size:11px; } ``` 3\. 장바구니 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다. **css/button.css** ```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:regular; } ``` 4\. 바로구매 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다. **css/button.css** ```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 #0CC472; background:#0CC472; text-align:center; font-weight:regular; } ```상품 상세 상단 변경하기
 1\. 셀렉트 영역의 **border(선), background(배경)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```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(선) 값을** 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_tit { position: relative; padding: 0 0 10px 0; border-bottom: 1px solid #dbdbdb; } ``` \ 3\. 선택한 옵션 영역의 **border-bottom(선) 값을** 변경할 수 있습니다. **css/layout/layout.css** ```css .item_detail_list + .item_choice_list table { width: 100%; border-bottom: 1px solid #999999; } ``` 5. 선택한 옵션영역의 background(배경) 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .item_choice_list table { width: 100%; background: #f5f5f5; } ```  6. 총 합계금액 구분 영역의 border-top(선) 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount { margin: 15px 0 0 0; padding-top: 10px; border-top: 1px solid #dbdbd ```상품 상세 탭 변경하기
 1\. 상품 상세 탭 선택시 **color(색상), font-weight(굵기), border(선)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_tab li.on a { padding-top: 18px; margin-top: 8px; color: #333333; font-weight: bold; border-bottom: 2px solid #ffffff; } ``` 2\. 글 등록 수량 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_tab li a strong { color: #ab3e55; } ```상품 상세 상품후기 영역-리스트 변경하기
 1\. 상품후기 타이틀 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_sec h3 { padding: 45px 0 10px 0; font-size: 18px; } ``` 2\. 상품후기 전체보기 버튼의 **color(색상), font-weight(굵기), border(선), background(배경), text-align(정렬)** 값을 변경할 수 있습니다. **css/button.css** ```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(정렬)** 값을 변경할 수 있습니다. **css/button.css** ```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(선)** 값을 변경할 수 있습니다. **css/button.css** ```css .pagination .on { color: #ab3e55; font-weight: bold; border: 1px solid #ab3e55 ```상품 상세 상품문의 영역-리스트 내용 변경하기
 1\. 수정 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **css/button.css** ```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(배경)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .qna_new_box { text-align: left; background: #f8f8f8; } ```장바구니 화면 변경하기
 1\. 장바구니 타이틀 폰트의 **color(색상), font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit h2 { float: left; font-size: 28px; color: #222222; } ``` \ 2\. 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit .page_on { color: #ab3e55; font-weight: bold; } ``` 3\. 다음 진행 스텝 표시 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit ol li { float: left; font-size: 14px; color: #d1d1d1; } ``` 4\. 장바구니 타이틀 폰트 하단의 **border-bottom(선)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit { overflow: hidden; border-bottom: 1px solid #dbdbdb; } ```  5\. 장바구니 상품금액/배송비/최종 결제금액의 **color(색상), font-size(사이즈), font-weight(굵기)** 값을 변경할 수 있습니다.. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` 6\. 선택상품주문 버튼은 마우스 오버 전(.btn\_order\_choice\_buy) 과 오버 시(.btn\_order\_choice\_buy:hover)의 **border(선), font-size(사이즈), color(색상)** 값으로 각각 변경할 수 있습니다. **css/order/button.css** ```css .btn_order_choice_buy { min-width:190px; height:55px; padding:0 20px 0 20px; color:#3e3d3c; font-weight:bold; font-size:14px; border:1px solid #cccccc; background:#fff; cursor:pointer; } ``` ```css .btn_order_choice_buy:hover { color:#333333; border:1px solid #bbbbbb; } ``` 7\. 전체상품주문 버튼은 마우스 오버 전(.btn\_order\_whole\_buy) 과 오버 시(.btn\_order\_whole\_buy:hover) 의 **background(배경) 컬러, border(선), color(색상), font-size(사이즈)** 값으로 각각 변경할 수 있습니다. **css/button.css** ```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:#0CC472; cursor:pointer; font-weight:bold; } ```.btn_order_whole_buy:hover {
border:1px solid #02B666;
background:#02B666;
}
주문서 작성/결제 화면 변경하기
**주문서 금액 변경하기**  \- 상품금액/배송비/합계 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` **최종결제금액, 결제하기 버튼 변경하기**  1\. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **css/order/order.css** ```css .payment_final_total dd { display:inline-block; font-size:30px; color:#0CC472; } ``` 2\. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경할 수 있습니다. **css/button.css** ```css .btn_order_buy { display:inline-block; width:300px; height:61px; line-height:59px; color:#fff; font-size:20px; border:1px solid #0CC472; background:#0CC472; text-align:center; } ```포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\ Mate\&Co 스킨에 적용되어 있는 기본 컬러 코드 **#**197C43을 확인합니다. 2. **디자인 스킨 리스트 접속** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트 3. 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ \- common.css를 더블 클릭 하여 common/gd\_common.css 파일을 엽니다. 4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경합니다.``` :root { --primary-default: #197C43; /* 포인트 컬러 */ --primary-hover: #025023; /* 포인트 컬러 hover */ --secondary-default: #AC6F0D; /* 서브 컬러 */ --neutrals-gray: #EDEBE5; --neutrals-dark: #000; --font-size: 12px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다.
푸터 변경하기
고객센터, PC화면 버튼 변경하기
 1\. 고객센터, PC화면 버튼의 **background(배경), color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_button_box ul li a { display: block; padding: 15px 0; background: #fff; color: #000; font-size: 13px; border-radius: 100px; } ```상단 헤더 영역 변경하기
 1\. GNB영역의 **border-bottom(선), height(높이)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #header_wrap header .header_box { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 12px; height: 66px; } ``` 2\. 장바구니 담긴상품 수량의 배경 **background(배경), color(**글자색) 값을 변경할 수 있습니다. **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; } ```슬라이드 메뉴 변경하기
 1\. 상단배너의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_banner .nav_login ul li a { display: inline-block; font-size: 15px; color: #222222; } ``` 2\. 아이콘 메뉴 영역의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_link ul li a { display: block; padding: 36px 0 0 0; font-size: 15px; color: #888; } ``` 3\. 탭버튼 활성화 시 **background(배경), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_tabmenu_box .nav_tabmenu li.on span { background: #ab3e55; color: #fff; font-weight: bold; } ``` 4\. 탭버튼 비활성화 시 **background(배경), color(색상)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **css/proc/proc.css** ```css .category_side > li a { position: relative; display: block; padding: 12px 0 12px 0; font-size: 16px; color: #262626; } ``` 메뉴 폰트 **font-weight(굵기)** 값을 변경할 수 있습니다. **proc > proc.css | css/proc/proc.css** ```css .category_side > li > a { font-weight: bold; } ``` 6\. 메뉴 폰트 선택 시 **color(색상)** 값을 변경할 수 있습니다. **css/proc/proc.css** ```css .category_side > li > a.on { color: var(--primary-default); } ```상품 리스트 스타일 변경하기
 1\. 상품리스트 이미지의 **border(라인)** 값을 변경할 수 있습니다. **css/main/main.css**.main_prd_list.display-type01 .goods_prd_item2 .goods_prd_img .img_box .img img {
border: none;
}
진열타입 타이틀 변경하기
 1\. 타이틀의 **font-size(크기), color(색상), border-bottom(선), font-weight(굵기**) 값을 변경할 수 있습니다. **css/proc/proc.css** ```css ._goods_display_main h3 { position: relative; display: block; /*margin-top: 40px;*/ margin-left: 16px; /*font-size: 24px;*/ color: #181818; text-align: left; /*font-weight: 400;*/ } ``` 2\. 더보기 버튼의 **background(배경), font-size(크기), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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; } ```상품후기 변경하기
 1\. 상품 후기 게시판 타이틀의 **background(배경), border-bottom(선)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(색상)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(색상)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(굵기)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(선)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .detail_write_btn { display:inline-block; width:100%; padding:10px 0 10px 0; text-align:center; color:#0CC472; font-size:15px; font-weight:bold; background:#ffffff; border:1px solid #0CC472; box-sizing:border-box; } ``` 6\. 상품평 더보기 버튼의 **text-align(정렬), color(색상), font-size(크기), background(배경)** 값을 변경할 수 있습니다. **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; } ```옵션 레이어-셀렉트박스 변경하기
 1\. 옵션 레이어의 기본 옵션 폰트의 **font-size(크기), color(색상), text-align(정렬), background(배경)** 값을 변경할 수 있습니다. **css/gd\_common.css** ```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(선)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **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; } ```옵션 레이어-항목 변경하기(폰트/버튼)
 1\. 옵션 레이어 쿠폰적용 버튼의 **background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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; } ```상품문의-리스트 변경하기
 1\. 상품문의 게시판 문의 상태표시 아이콘의 **font-size(크기), line-height(행간), background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경할 수 있습니다. **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:#0CC472; border-radius: 15px; border: 1px solid #0CC472; } ``` 2\. 문의 제목 폰트의 **font-size(크기), color(색상), line-height(행간)** 값을 변경할 수 있습니다. **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; } ```상품문의-비밀번호 인증 레이어 변경하기
 1\. 비밀번호 인증 레이어의 **height(높이), background(배경), border(선)** 값을 변경할 수 있습니다. **css/board/board.css** ```css .cite_layer .wrap { position: relative; height: 190px; background: #ffffff; border: 1px solid #555555; } ``` \ 2\. 비밀번호 인증 타이틀의 **height(높이), background(배경), border(선)** 값을 변경할 수 있습니다. **css/board/board.css** ```css .cite_layer .wrap h4 { height: 27px; padding: 13px 0 0 17px; background: #f4f4f4; color: #222222; } ``` 3\. 비밀번호 인증 레이어 확인 버튼의 **color(색상), border-radius(둥근선), background(배경)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .d_pw_confirm_btn { display:inline-block; padding:5px 15px 5px 15px; color:#ffffff; border:1px solid #0CC472; border-radius:3px; background:#0CC472; } ```상품문의-리스트 내용 변경하기(폰트/버튼)
 1\. 상품문의 내용 폰트의 **color(색상)** 값을 변경할 수 있습니다. **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(둥근선)** 값을 변경할 수 있습니다. **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; } ```상세 타이틀 및 info 레이어 폰트 변경하기
 1\. 상품 상세 타이틀의 **font-size(크기), line-height(행간), text-align(정렬)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```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(굵기)** 값을 변경할 수 있습니다. **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; } ```상품 상세 탭 변경하기
 1\. 상품 상세페이지 탭 폰트의 **color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **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(행간)** 값을 변경할 수 있습니다. **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: #0CC472; line-height: 11px; } ``` 3\. 현재위치 탭표시 라인의 **border-bottom(선)** 값을 변경할 수 있습니다. **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; } ```상품 상세 버튼 변경하기
 1\. 장바구니 버튼의 **font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **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; ```상품 상세 리스트 영역 변경하기
 1\. 상품명 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info h3 { font-size: 18px; color: #333333; word-break: break-all; } ``` 2\. 상품 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box .price { font-size: 20px; color: #333333; } ``` 3\. 상품 할인 전 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box del { color: #999999; } ``` 4\. 상품 상세페이지 리스트 제목**font-size(크기), color(색상)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **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(정렬), background(배경), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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; } ```장바구니 버튼 변경하기
 1\. 쿠폰적용 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .cart_option_modify { 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; } ``` 3\. 선택상품 삭제, 주문 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .cart_all_order_btn { display:inline-block; width:100%; padding:10px 0 10px 0; text-align:center; background:#0CC472; border:1px solid #0CC472; color:#ffffff; font-weight:bold; box-sizing:border-box; font-size:14px; } ```장바구니 폰트 변경하기
 1\. 장바구니 상품명 폰트의 **font-weight(굵기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```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(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```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(굵기)** 값을 변경할 수 있습니다. **css/order/order.css** ```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:#000; font-weight:bold; } ``` 4\. 장바구니 항목 타이틀 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl dt { display: table-cell; width: 50%; font-size: 13px; color: #5e5e5e; } ``` 5\. 장바구니 총 상품금액 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl dd { display: table-cell; width: 50%; text-align: right; font-size: 15px; color: #5e5e5e; } ``` 6\. 장바구니 총 합계금액 폰트의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl.total dd { color: #000; font-size: 17px; } ```포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\ Puppyred 스킨에 적용되어 있는 기본 컬러 코드 **#A991FF**을 확인합니다. 2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ \- 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ \- common.css를 더블 클릭 하여 common/common.css 파일을 엽니다.\ 4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경할 수 있습니다. ``` :root { --primary-default: #A991FF; /* 포인트 컬러 */ --primary-hover: #7D60E5; /* 포인트 컬러 hover */ --secondary-default: #AECF0C; /* 서브 컬러 */ --neutrals-gray: #edebe5; --neutrals-dark: #000; --font-size: 14px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1440px; /* 화면이 최소로 작아질 수 있는 너비 */ --max-width: 1920px; /* 화면이 최대한 넓어 질 수 있는 너비 */ } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경할 수 있습니다.
메뉴 변경하기
1. 상단 메뉴의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css > layout/layout.css** ```css .top_member_box > li a{ display:inline-block; padding-left:24px; color:#000; /* 컬러 변경 */ font-size:16px; /* 폰트사이즈 수정 */ font-style:normal; } ``` 2. 장바구니 담긴상품 수량 폰트의 **color(색상)** 값을 변경할 수 있습니다.\ (현재는 기본 포인트 컬러 전역변수로 지정되어 있습니다.) **css > layout/layout.css** ```css .top_member_box > li strong { display: inline-block; height: 25px; color: #fff; margin-top: 3px; margin-left: 34px; padding: 2px 9px 4px; border-radius: 50%; background: var(--primary-default);/* 기본 포인트 컬러를 원하는 색상으로 변경 */ } ``` 3. 상단 메뉴의 background-color(배경색)을 변경할 수 있습니다. **css > layout/layout.css** ```css #header .header_top { position: relative; display: flex; align-items: center; background-color: transparent; /* header 배경색 변경 */; height: 68px; } ``` 4. 전체보기 메뉴의 **background-color(배경)** 값을 변경할 수 있습니다. **css > layout/layout.css** ```css #header .gnb_allmenu_wrap { display: none; position: fixed; top: 99px; left: 0; right: 0; overflow: auto; width: 100%; height: 740px; padding: 48px 64px 80px; background: linear-gradient(0deg, #FFF 91.73%, #EBE0FF 100%); z-index: 999; } ``` 5. 카테고리 메뉴의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **css > layout/layout.css** ```css .header_gnb .gnb_allmenu_box a, .header_gnb .gnb_allmenu_box button { color: var(--neutrals-dark); font-size: 20px; font-weight: 400; height: 48px; line-height: 48px; width: 100%; text-align: left; display: block; } ```검색창 폰트 변경하기
검색창 인풋박스 입력 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css #header .top_search .top_text_cont .top_srarch_text { display: block; float: right; width: 34px; height: 34px; border: 0px solid #000; border-radius: 8px 8px; box-sizing: border-box; -moz-transition: all 0.35s; -webkit-transition: all 0.35s; font-size: var(--font-size); /* font size를 추가 할 수 있습니다. */ } ``` 2\. 최근검색어 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. \ **css/layout/layout.css** ```css .recent_box dt { font-size: 13px; margin-bottom: 10px; font-weight: bold; } ``` 3\. 추천상품 폰트의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .recom_box dt { width: 100%; font-size: 13px; font-weight: var(--font-bold); line-height: 19px; text-align: center; margin-bottom: 10px; } ```푸터 변경하기 (폰트/컬러)
 1\. 푸터 메뉴 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .foot_cont .cont-title, .notice_list h3 { font-size: 14px; color: #000; } ``` 2\. 푸터 정보영역 폰트의 **color(색상), font-size(크기), line-height(행간)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .foot_cont .cont a, .foot_cont .cont p { font-size: 12px; color: #484848; line-height: 20px; } .foot_cont .cont .foot_list ul li a { font-size: 12px; font-weight: 400; line-height: 20px; color: #000; font-style: normal; } ```웹폰트 적용하기
1\. **관리자 페이지 > 디자인 메뉴**에 접속합니다. 2\. 좌측 하단 폴더트리 내 “**스타일시트/CSS**”를 더블 클릭하여 스타일시트 리스트 중 **reset.css**를 오픈하세요.  3\. reset.css 스타일시트의 3번째 줄에 @import url(’외부 스타일시트 경로’)을 변경할 수 있습니다. **css/reset.css** ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); /* 5번째줄에 추가 */ ``` 4\. 13번째 줄의 font-family의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Nanum Gothic(변경할 폰트명)으로 수정하세요.\ (한글 폰트 파일명의 경우 " "입력) **css/common/common.css** ```css .:root { ... --font-family: 'Pretendard variable'; ... } ``` 5. common.css --font-family에서 변경된 폰트는 reset.css 에서 하위 코드에 적용 됩니다. **css/reset.css** ``` .godo * { font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; } ... body, th, td, input, select, textarea, button { font-size: var(--font-size); line-height: 1.5; font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Dotum, '돋움', sans-serif; color: #333; } ``` ※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.최근 본 상품 변경하기
 1\. 최근 본 상품 영역의 **background(배경), color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont { float:left; min-width:72px; padding:0px; background:none; color: #333; } ``` 2\. 타이틀 폰트의 **text-align(정렬)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont h4 { text-align: center; font-size: 11px; font-style: normal; font-weight: 700; line-height: 12px; text-transform: uppercase; } ``` 3\. 최근 본 상품 오버시 내용 **border(선), background(배경)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .src_box { position: absolute; top: 0; right: 74px; width: max-content; height: 100%; padding: 5px 5px 0 7px; border: 1px solid #999999; background: #ffffff; text-align: left; z-index: 10; } ``` 4\. 상품 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .src_box strong { display: block; color: #0CC472; } ``` 5\. 페이징 폰트의**color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .scr_paging strong { padding: 0 2px 0 2px; color: #0CC472; } ```진열타입 타이틀 변경하기(폰트/컬러)
 1\. 타이틀 폰트의**font-size(크기)** 값을 변경할 수 있습니다. **css/main/main.css** ```css .main_goods_cont .goods_list_tit h3 { font-size: 40px; color: var(--neutrals-dark); font-weight: 700; } ``` 2\. 타이틀 영역 하단의 **border-bottom(선)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .goods_list_tit { /* padding:100px 0 10px 0; */ /* border-bottom:1px solid #ececec;*/ line-height:1; position:relative; } ``` 3\. 더보기 버튼의 **font-size(크기), font-weight(굵기), border(선)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .btn_goods_more .btn_goods_view_more { padding:2px 5px 3px 5px; font-size:14px; font-weight:400; border:0px solid #dbdbdb; } ```상품 리스트 변경하기
 1\. 상품명 **color(색상)** 값을 변경할 수 있습니다. \ (한줄 말줄임이 처리가 되어 있습니다.) **css/goods/list.css** ```css .item_tit_box .item_name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; padding: 0; font-size: 16px; text-overflow: ellipsis; /*font-weight: normal;*/ overflow: hidden; line-height: 22px; color: var(--primary-default); /* color 추가 */ } ``` 2\. 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .item_money_box .item_price { /*display:block;*/ padding:0px; font-size:16px; color:#000000; font-weight:bold; } ```상품 상세 상단 변경하기(폰트)
 * **상품 상세 이미지 크기가 600x600이상 일 경우 상품 영역에 맞춰 리사이징 됩니다.** * **상품 상세 이미지 크기가 600x600보다 작을 경우 상품 이미지 크기대로 노출됩니다.** 1\. 상품명 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_tit h3 { width:405px; font-size:18px; word-break: break-all; } ``` 2\. 상품 정보 타이틀 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_list dt { ffloat:left; width:80px; margin:0 10px 0 0; color:#888888; font-weight:normal; word-wrap:break-word; } ``` 3\. 상품 가격 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_price dd { margin: -2px 0 0 0; font-size: 16px; font-weight: bold; } ``` 4\. 총 합계금액 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dt { font-size: 16px; font-weight: bold; } ``` 5\. 총 합계금액 가격 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd { color:#0CC472; font-weight:bold; } ``` 6\. 총 합계금액 가격 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd strong { font-size: 20px; } ```상품 상세 상단 변경하기(버튼)
 1\. 공유하기 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **css/button.css** ```css .btn_gray_list a, .btn_gray_list button { display:inline-block; padding:0 0 0 11px; border:1px solid #999; vertical-align:middle; } ``` 2\. 조건별 배송 버튼의 **font-size(크기), background(배경)** 값을 변경할 수 있습니다. **css/button.css** ```css .btn_gray_list .btn_gray_small { font-size:11px; } ``` 3\. 장바구니 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다. **css/button.css** ```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:regular; } ``` 4\. 바로구매 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다. **css/button.css** ```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 #0CC472; background:#0CC472; text-align:center; font-weight:regular; } ```상품 상세 상단 변경하기
 1\. 셀렉트 영역의 **border(선), background(배경)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```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(선) 값을** 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_tit { position: relative; padding: 0 0 10px 0; border-bottom: 1px solid #dbdbdb; } ``` \ 3\. 선택한 옵션 영역의 **border-bottom(선) 값을** 변경할 수 있습니다. **css/layout/layout.css** ```css .item_detail_list + .item_choice_list table { width: 100%; border-bottom: 1px solid #999999; } ``` 5. 선택한 옵션영역의 background(배경) 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .item_choice_list table { width: 100%; background: #f5f5f5; } ```  6. 총 합계금액 구분 영역의 border-top(선) 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount { margin: 15px 0 0 0; padding-top: 10px; border-top: 1px solid #dbdbd ```상품 상세 탭 변경하기
 1\. 상품 상세 탭 선택시 **color(색상), font-weight(굵기), border(선)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_tab li.on a { padding-top: 18px; margin-top: 8px; color: #333333; font-weight: bold; border-bottom: 2px solid #ffffff; } ``` 2\. 글 등록 수량 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_tab li a strong { color: #ab3e55; } ```상품 상세 상품후기 영역-리스트 변경하기
 1\. 상품후기 타이틀 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_sec h3 { padding: 45px 0 10px 0; font-size: 18px; } ``` 2\. 상품후기 전체보기 버튼의 **color(색상), font-weight(굵기), border(선), background(배경), text-align(정렬)** 값을 변경할 수 있습니다. **css/button.css** ```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(정렬)** 값을 변경할 수 있습니다. **css/button.css** ```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(선)** 값을 변경할 수 있습니다. **css/button.css** ```css .pagination .on { color: #ab3e55; font-weight: bold; border: 1px solid #ab3e55 ```상품 상세 상품문의 영역-리스트 내용 변경하기
 1\. 수정 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **css/button.css** ```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(배경)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .qna_new_box { text-align: left; background: #f8f8f8; } ```장바구니 화면 변경하기
 1\. 장바구니 타이틀 폰트의 **color(색상), font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit h2 { float: left; font-size: 28px; color: #222222; } ``` \ 2\. 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit .page_on { color: #ab3e55; font-weight: bold; } ``` 3\. 다음 진행 스텝 표시 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit ol li { float: left; font-size: 14px; color: #d1d1d1; } ``` 4\. 장바구니 타이틀 폰트 하단의 **border-bottom(선)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit { overflow: hidden; border-bottom: 1px solid #dbdbdb; } ```  5\. 장바구니 상품금액/배송비/최종 결제금액의 **color(색상), font-size(사이즈), font-weight(굵기)** 값을 변경할 수 있습니다.. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` 6\. 선택상품주문 버튼은 마우스 오버 전(.btn\_order\_choice\_buy) 과 오버 시(.btn\_order\_choice\_buy:hover)의 **border(선), font-size(사이즈), color(색상)** 값으로 각각 변경할 수 있습니다. **css/order/button.css** ```css .btn_order_choice_buy { min-width:190px; height:55px; padding:0 20px 0 20px; color:#3e3d3c; font-weight:bold; font-size:14px; border:1px solid #cccccc; background:#fff; cursor:pointer; } ``` ```css .btn_order_choice_buy:hover { color:#333333; border:1px solid #bbbbbb; } ``` 7\. 전체상품주문 버튼은 마우스 오버 전(.btn\_order\_whole\_buy) 과 오버 시(.btn\_order\_whole\_buy:hover) 의 **background(배경) 컬러, border(선), color(색상), font-size(사이즈)** 값으로 각각 변경할 수 있습니다. **css/button.css** ```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:#0CC472; cursor:pointer; font-weight:bold; } ```.btn_order_whole_buy:hover {
border:1px solid #02B666;
background:#02B666;
}
주문서 작성/결제 화면 변경하기
**주문서 금액 변경하기**  \- 상품금액/배송비/합계 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` **최종결제금액, 결제하기 버튼 변경하기**  1\. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **css/order/order.css** ```css .payment_final_total dd { display:inline-block; font-size:30px; color:#0CC472; } ``` 2\. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경할 수 있습니다. **css/button.css** ```css .btn_order_buy { display:inline-block; width:300px; height:61px; line-height:59px; color:#fff; font-size:20px; border:1px solid #0CC472; background:#0CC472; text-align:center; } ```포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\ Puppyred 스킨에 적용되어 있는 기본 컬러 코드 **#A991FF**을 확인합니다. 2. **디자인 스킨 리스트 접속** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트 3. 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ \- common.css를 더블 클릭 하여 common/gd\_common.css 파일을 엽니다. 4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경합니다.``` :root { --primary-default: #A991FF; /* 포인트 컬러 */ --primary-hover: #7D60E5; /* 포인트 컬러 hover */ --secondary-default: #AECF0C; /* 서브 컬러 */ --neutrals-gray: #edebe5; --neutrals-dark: #000; --font-size: 12px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다.
푸터 변경하기
  1. CS CENTER, BANK INFO 변경하기\ CS CENTER, BANK INFO 타이틀의 color(색상), font-size(크기), font-weight(굵기), text-align(정렬)값을 변경할 수 있습니다. ```css #footer .ft_info_box .ft_info dl dt { font-size: 12px; font-weight: 700; border-bottom: 1px solid #000; padding-bottom: 5px; } ``` 2. CS CENTER 전화번호, 예금주의 color(색상), font-size(크기), font-weight(굵기) 값을 변경할 수 있습니다. ```css #footer .ft_info dl dd p.phone a { font-size: 18px; /* 글자 크기 */ font-weight: bold; /* 글자 굵기 */ color: #000; /* 글자 색 */ } ``` ```css #footer .ft_info dl dd .account_holder { padding: 5px 0; font-size: 12px; /*글자 크기*/ } ```  3\. 푸터 메뉴버튼의 **font-size(크기), color(색상), text-align(정렬), letter-spacing(자간), font-weight(굵기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_info2_box .ft_menu li a { display: block; padding: 18px 0px 10px 0px; font-size: 12px; color: #000; text-align: left; letter-spacing: -1px; } ```  4\. 푸터 정보 부분의 **text-align(정렬), font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_info2_box .ft_address { padding: 0px; text-align: center; font-size: 12px; color: #484848; word-break: keep-all; } ```  5\. 푸터 카피라잇 영역의 **color(색상), font-size(크기), text-align(정렬)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_copy { padding: 24px 0; color: #484848; font-size: 12px; text-align: center; font-style: normal; } ```고객센터, PC화면 버튼 변경하기
 1\. 고객센터, PC화면 버튼의 **background(배경), color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_button_box ul li a { display: block; padding: 10px 0; background: #D7F350; color: #484848; font-size: 13px; border-radius: 20px; } ```상단 헤더 영역 변경하기
 1\. GNB영역의 **border-bottom(선), height(높이)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #header_wrap header .header_box { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; /* border-bottom: 1px solid #000; */ height: 62px; } ``` 2\. 장바구니 담긴상품 수량의 배경 **background(배경), color(**글자색) 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #header_wrap header .header_box .cart_count { display: inline-block; padding: 0 7px; margin-top: 2px; border-radius: 50%; color: #fff; background: var(--primary-default); vertical-align: middle; font-size: 14px; } ```슬라이드 메뉴 변경하기
 1\. 상단배너의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_banner .nav_login ul li a { display: inline-block; font-size: 15px; color: #222222; } ``` 2\. 아이콘 메뉴 영역의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_link ul li a { display: block; padding: 36px 0 0 0; font-size: 15px; color: #888; } ``` 3\. 탭버튼 활성화 시 **background(배경), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_tabmenu_box .nav_tabmenu li.on span { background: #ab3e55; color: #fff; font-weight: bold; } ``` 4\. 탭버튼 비활성화 시 **background(배경), color(색상)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **css/proc/proc.css** ```css .category_side > li a { position: relative; display: block; padding: 12px 0 12px 0; font-size: 16px; color: #262626; } ``` 메뉴 폰트 **font-weight(굵기)** 값을 변경할 수 있습니다. **proc > proc.css | css/proc/proc.css** ```css .category_side > li > a { font-weight: bold; } ``` 6\. 메뉴 폰트 선택 시 **color(색상)** 값을 변경할 수 있습니다. **css/proc/proc.css** ```css .category_side > li > a.on { color: var(--primary-default); } ```상품 리스트 스타일 변경하기
 1\. 상품리스트 이미지의 **border(라인)** 값을 변경할 수 있습니다. **css/main/main.css**.product-section03 .main_prd_list.display-type01 .goods_prd_item2 .goods_prd_img .img_box .img img {
border: none;
}
진열타입 타이틀 변경하기
 1\. 타이틀의 **font-size(크기), color(색상), border-bottom(선), font-weight(굵기**) 값을 변경할 수 있습니다. **css/proc/proc.css** ```css ._goods_display_main h3 { position: relative; display: block; margin-top: 40px; margin-left: 16px; font-size: 24px; color: #181818; text-align: left; font-weight: 400; } ``` 2\. 더보기 버튼의 **background(배경), font-size(크기), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .main_more_btn2 { display: block; width: 70px; padding: 2px 8px; text-align: center; background: #000; font-size: 12px; font-weight: 600; /* border: 1px solid #9f9f9f; */ color: #fff; box-sizing: border-box; position: absolute; top: 50px; right: 0px; } ```상품후기 변경하기
 1\. 상품 후기 게시판 타이틀의 **background(배경), border-bottom(선)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(색상)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(색상)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(굵기)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(선)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .detail_write_btn { display:inline-block; width:100%; padding:10px 0 10px 0; text-align:center; color:#0CC472; font-size:15px; font-weight:bold; background:#ffffff; border:1px solid #0CC472; box-sizing:border-box; } ``` 6\. 상품평 더보기 버튼의 **text-align(정렬), color(색상), font-size(크기), background(배경)** 값을 변경할 수 있습니다. **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; } ```옵션 레이어-셀렉트박스 변경하기
 1\. 옵션 레이어의 기본 옵션 폰트의 **font-size(크기), color(색상), text-align(정렬), background(배경)** 값을 변경할 수 있습니다. **css/gd\_common.css** ```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(선)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **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; } ```옵션 레이어-항목 변경하기(폰트/버튼)
 1\. 옵션 레이어 쿠폰적용 버튼의 **background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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; } ```상품문의-리스트 변경하기
 1\. 상품문의 게시판 문의 상태표시 아이콘의 **font-size(크기), line-height(행간), background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경할 수 있습니다. **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:#0CC472; border-radius: 15px; border: 1px solid #0CC472; } ``` 2\. 문의 제목 폰트의 **font-size(크기), color(색상), line-height(행간)** 값을 변경할 수 있습니다. **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; } ```상품문의-비밀번호 인증 레이어 변경하기
 1\. 비밀번호 인증 레이어의 **height(높이), background(배경), border(선)** 값을 변경할 수 있습니다. **css/board/board.css** ```css .cite_layer .wrap { position: relative; height: 190px; background: #ffffff; border: 1px solid #555555; } ``` \ 2\. 비밀번호 인증 타이틀의 **height(높이), background(배경), border(선)** 값을 변경할 수 있습니다. **css/board/board.css** ```css .cite_layer .wrap h4 { height: 27px; padding: 13px 0 0 17px; background: #f4f4f4; color: #222222; } ``` 3\. 비밀번호 인증 레이어 확인 버튼의 **color(색상), border-radius(둥근선), background(배경)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .d_pw_confirm_btn { display:inline-block; padding:5px 15px 5px 15px; color:#ffffff; border:1px solid #0CC472; border-radius:3px; background:#0CC472; } ```상품문의-리스트 내용 변경하기(폰트/버튼)
 1\. 상품문의 내용 폰트의 **color(색상)** 값을 변경할 수 있습니다. **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(둥근선)** 값을 변경할 수 있습니다. **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; } ```상세 타이틀 및 info 레이어 폰트 변경하기
 1\. 상품 상세 타이틀의 **font-size(크기), line-height(행간), text-align(정렬)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```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(굵기)** 값을 변경할 수 있습니다. **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; } ```상품 상세 탭 변경하기
 1\. 상품 상세페이지 탭 폰트의 **color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **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(행간)** 값을 변경할 수 있습니다. **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: #0CC472; line-height: 11px; } ``` 3\. 현재위치 탭표시 라인의 **border-bottom(선)** 값을 변경할 수 있습니다. **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; } ```상품 상세 버튼 변경하기
 1\. 장바구니 버튼의 **font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **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; ```상품 상세 리스트 영역 변경하기
 1\. 상품명 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info h3 { font-size: 18px; color: #333333; word-break: break-all; } ``` 2\. 상품 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box .price { font-size: 20px; color: #333333; } ``` 3\. 상품 할인 전 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box del { color: #999999; } ``` 4\. 상품 상세페이지 리스트 제목**font-size(크기), color(색상)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **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(정렬), background(배경), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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; } ```장바구니 버튼 변경하기
 1\. 쿠폰적용 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .cart_option_modify { 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; } ``` 3\. 선택상품 삭제, 주문 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .cart_all_order_btn { display:inline-block; width:100%; padding:10px 0 10px 0; text-align:center; background:#0CC472; border:1px solid #0CC472; color:#ffffff; font-weight:bold; box-sizing:border-box; font-size:14px; } ```장바구니 폰트 변경하기
 1\. 장바구니 상품명 폰트의 **font-weight(굵기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```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(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```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(굵기)** 값을 변경할 수 있습니다. **css/order/order.css** ```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:#000; font-weight:bold; } ``` 4\. 장바구니 항목 타이틀 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl dt { display: table-cell; width: 50%; font-size: 13px; color: #5e5e5e; } ``` 5\. 장바구니 총 상품금액 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl dd { display: table-cell; width: 50%; text-align: right; font-size: 15px; color: #5e5e5e; } ``` 6\. 장바구니 총 합계금액 폰트의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl.total dd { color: #000; font-size: 17px; } ```포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\ Glance 스킨에 적용되어 있는 기본 컬러 코드 **#909090**을 확인합니다. 2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ \- 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ \- common.css를 더블 클릭 하여 common/common.css 파일을 엽니다.\ 4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경할 수 있습니다. ``` :root { --primary-default: #909090; /* 포인트 컬러 */ --primary-hover: #848484; /* 포인트 컬러 hover */ --secondary-default: #AC6F0D; /* 서브 컬러 */ --neutrals-gray: #BCBCBC; --neutrals-dark: #000; --font-size: 14px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1440px; /* 화면이 최소로 작아질 수 있는 너비 */ --max-width: 1920px; /* 화면이 최대한 넓어 질 수 있는 너비 */ } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경할 수 있습니다.
메뉴 변경하기
1. 상단 메뉴의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css > layout/layout.css** ```css .top_member_box > li a{ display:inline-block; padding-left:20px; color:#000; /* 컬러 변경 */ font-size:16px; /* 폰트사이즈 수정 */ font-style:normal; } ``` 2. 장바구니 담긴상품 수량 폰트의 **color(색상)** 값을 변경할 수 있습니다.\ (현재는 기본 포인트 컬러 전역변수로 지정되어 있습니다.) **css > layout/layout.css** ```css .top_member_box > li strong { font-weight: 500; color: var(--neutrals-default);/* 기본 포인트 컬러를 원하는 색상으로 변경 */ } ``` 3. 상단 메뉴의 background-color(배경색)을 변경할 수 있습니다. **css > layout/layout.css** ```css #header .header_top { position: relative; display: flex; align-items: center; background-color: #fff; /* header 배경색 변경 */; border-bottom: 1px solid #000; height: 56px; } ```검색창 폰트 변경하기
검색창 인풋박스 입력 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css #header .top_search .top_text_cont .top_srarch_text { display: block; float: right; width: 34px; height: 34px; border: 0px solid #000; border-radius: 8px 8px; box-sizing: border-box; -moz-transition: all 0.35s; -webkit-transition: all 0.35s; font-size: var(--font-size); /* font size를 추가 할 수 있습니다. */ } ``` 2\. 최근검색어 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. \ **css/layout/layout.css** ```css .recent_box dt { font-size: 13px; margin-bottom: 10px; font-weight: bold; } ``` 3\. 추천상품 폰트의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .recom_box dt { width: 100%; font-size: 13px; font-weight: var(--font-bold); line-height: 19px; text-align: center; margin-bottom: 10px; } ```푸터 변경하기 (폰트/컬러)
 1\. 푸터 메뉴 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .content_list h3 { font-size: var(--font-size); margin-bottom: 12px; } ``` 2\. 푸터 정보영역 폰트의 **color(색상), font-size(크기), line-height(행간)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .foot_cont_wrap .foot_info { font-size: 12px; font-style: normal; font-weight: var(--font-regular); line-height: 20px; } ```웹폰트 적용하기
1\. **관리자 페이지 > 디자인 메뉴**에 접속합니다. 2\. 좌측 하단 폴더트리 내 “**스타일시트/CSS**”를 더블 클릭하여 스타일시트 리스트 중 **reset.css**를 오픈하세요.  3\. reset.css 스타일시트의 3번째 줄에 @import url(’외부 스타일시트 경로’)을 변경할 수 있습니다. **css/reset.css** ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); /* 5번째줄에 추가 */ ``` 4\. 13번째 줄의 font-family의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Nanum Gothic(변경할 폰트명)으로 수정하세요.\ (한글 폰트 파일명의 경우 " "입력) **css/common/common.css** ```css .:root { ... --font-family: 'Pretendard variable'; ... } ``` 5. common.css --font-family에서 변경된 폰트는 reset.css 에서 하위 코드에 적용 됩니다. **css/reset.css** ``` .godo * { font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; } ... body, th, td, input, select, textarea, button { font-size: var(--font-size); line-height: 1.5; font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Dotum, '돋움', sans-serif; color: #333; } ``` ※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.최근 본 상품 변경하기
 1\. 최근 본 상품 영역의 **background(배경), color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont { float:left; min-width:76px; padding:6px 9px 9px 9px; background:#fff; color: #000; } ``` 2\. 타이틀 폰트의 **text-align(정렬)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont h4 { font-size: var(--font-size); font-style: normal; font-weight: var(--font-regular); line-height: 16px; text-transform: uppercase; text-align: center; } ``` 3\. 최근 본 상품 오버시 내용 **border(선), background(배경)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .src_box { position: absolute; top: 0; right: 74px; width: max-content; height: 100%; padding: 5px 5px 0 7px; border: 1px solid #999999; background: #ffffff; text-align: left; z-index: 10; } ``` 4\. 상품 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .src_box strong { display: block; color: #0CC472; } ``` 5\. 페이징 폰트의**color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .scr_paging strong { padding: 0 2px 0 2px; color: #0CC472; } ```진열타입 타이틀 변경하기(폰트/컬러)
 1\. 타이틀 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/main/main.css** ```css .main_goods_cont .goods_list_tit h3 { font-size: 48px; color: #000; } ``` 2\. 타이틀 영역 하단의 **border-bottom(선)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .goods_list_tit { /* padding:100px 0 10px 0; */ /* border-bottom:1px solid #ececec;*/ line-height:1; position:relative; } ``` 3\. 더보기 버튼의 **font-size(크기), font-weight(굵기), border(선)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .btn_goods_more .btn_goods_view_more { padding:2px 5px 3px 5px; font-size:14px; font-weight:400; border:0px solid #dbdbdb; } ```상품 리스트 변경하기
 1\. 상품명 **color(색상)** 값을 변경할 수 있습니다. \ (한줄 말줄임이 처리가 되어 있습니다.) **css/goods/list.css** ```css .item_tit_box .item_name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; padding: 0; font-size: 16px; text-overflow: ellipsis; font-weight: normal; overflow: hidden; line-height: 22px; color: var(--primary-default); /* color 추가 */ } ``` 2\. 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .item_money_box .item_price { /*display:block;*/ padding:0px; font-size:16px; color:#000000; font-weight:bold; } ```상품 상세 상단 변경하기(폰트)
 * **상품 상세 이미지 크기가 600x600이상 일 경우 상품 영역에 맞춰 리사이징 됩니다.** * **상품 상세 이미지 크기가 600x600보다 작을 경우 상품 이미지 크기대로 노출됩니다.** 1\. 상품명 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_tit h3 { width:405px; font-size:18px; word-break: break-all; } ``` 2\. 상품 정보 타이틀 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_list dt { ffloat:left; width:80px; margin:0 10px 0 0; color:#888888; font-weight:normal; word-wrap:break-word; } ``` 3\. 상품 가격 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_price dd { margin: -2px 0 0 0; font-size: 16px; font-weight: bold; } ``` 4\. 총 합계금액 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dt { font-size: 16px; font-weight: bold; } ``` 5\. 총 합계금액 가격 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd { color:#0CC472; font-weight:bold; } ``` 6\. 총 합계금액 가격 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd strong { font-size: 20px; } ```상품 상세 상단 변경하기(버튼)
 1\. 공유하기 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **css/button.css** ```css .btn_gray_list a, .btn_gray_list button { display:inline-block; padding:0 0 0 11px; border:1px solid #999; vertical-align:middle; } ``` 2\. 조건별 배송 버튼의 **font-size(크기), background(배경)** 값을 변경할 수 있습니다. **css/button.css** ```css .btn_gray_list .btn_gray_small { font-size:11px; } ``` 3\. 장바구니 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다. **css/button.css** ```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:regular; } ``` 4\. 바로구매 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다. **css/button.css** ```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 #0CC472; background:#0CC472; text-align:center; font-weight:regular; } ```상품 상세 상단 변경하기
 1\. 셀렉트 영역의 **border(선), background(배경)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```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(선) 값을** 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_tit { position: relative; padding: 0 0 10px 0; border-bottom: 1px solid #dbdbdb; } ``` \ 3\. 선택한 옵션 영역의 **border-bottom(선) 값을** 변경할 수 있습니다. **css/layout/layout.css** ```css .item_detail_list + .item_choice_list table { width: 100%; border-bottom: 1px solid #999999; } ``` 5. 선택한 옵션영역의 background(배경) 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .item_choice_list table { width: 100%; background: #f5f5f5; } ```  6. 총 합계금액 구분 영역의 border-top(선) 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount { margin: 15px 0 0 0; padding-top: 10px; border-top: 1px solid #dbdbd ```상품 상세 탭 변경하기
 1\. 상품 상세 탭 선택시 **color(색상), font-weight(굵기), border(선)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_tab li.on a { padding-top: 18px; margin-top: 8px; color: #333333; font-weight: bold; border-bottom: 2px solid #ffffff; } ``` 2\. 글 등록 수량 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_tab li a strong { color: #ab3e55; } ```상품 상세 상품후기 영역-리스트 변경하기
 1\. 상품후기 타이틀 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_sec h3 { padding: 45px 0 10px 0; font-size: 18px; } ``` 2\. 상품후기 전체보기 버튼의 **color(색상), font-weight(굵기), border(선), background(배경), text-align(정렬)** 값을 변경할 수 있습니다. **css/button.css** ```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(정렬)** 값을 변경할 수 있습니다. **css/button.css** ```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(선)** 값을 변경할 수 있습니다. **css/button.css** ```css .pagination .on { color: #ab3e55; font-weight: bold; border: 1px solid #ab3e55 ```상품 상세 상품문의 영역-리스트 내용 변경하기
 1\. 수정 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **css/button.css** ```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(배경)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .qna_new_box { text-align: left; background: #f8f8f8; } ```장바구니 화면 변경하기
 1\. 장바구니 타이틀 폰트의 **color(색상), font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit h2 { float: left; font-size: 28px; color: #222222; } ``` \ 2\. 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit .page_on { color: #ab3e55; font-weight: bold; } ``` 3\. 다음 진행 스텝 표시 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit ol li { float: left; font-size: 14px; color: #d1d1d1; } ``` 4\. 장바구니 타이틀 폰트 하단의 **border-bottom(선)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit { overflow: hidden; border-bottom: 1px solid #dbdbdb; } ```  5\. 장바구니 상품금액/배송비/최종 결제금액의 **color(색상), font-size(사이즈), font-weight(굵기)** 값을 변경할 수 있습니다.. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` 6\. 선택상품주문 버튼은 마우스 오버 전(.btn\_order\_choice\_buy) 과 오버 시(.btn\_order\_choice\_buy:hover)의 **border(선), font-size(사이즈), color(색상)** 값으로 각각 변경할 수 있습니다. **css/order/button.css** ```css .btn_order_choice_buy { min-width:190px; height:55px; padding:0 20px 0 20px; color:#3e3d3c; font-weight:bold; font-size:14px; border:1px solid #cccccc; background:#fff; cursor:pointer; } ``` ```css .btn_order_choice_buy:hover { color:#333333; border:1px solid #bbbbbb; } ``` 7\. 전체상품주문 버튼은 마우스 오버 전(.btn\_order\_whole\_buy) 과 오버 시(.btn\_order\_whole\_buy:hover) 의 **background(배경) 컬러, border(선), color(색상), font-size(사이즈)** 값으로 각각 변경할 수 있습니다. **css/button.css** ```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:#0CC472; cursor:pointer; font-weight:bold; } ```.btn_order_whole_buy:hover {
border:1px solid #02B666;
background:#02B666;
}
주문서 작성/결제 화면 변경하기
**주문서 금액 변경하기**  \- 상품금액/배송비/합계 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` **최종결제금액, 결제하기 버튼 변경하기**  1\. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **css/order/order.css** ```css .payment_final_total dd { display:inline-block; font-size:30px; color:#0CC472; } ``` 2\. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경할 수 있습니다. **css/button.css** ```css .btn_order_buy { display:inline-block; width:300px; height:61px; line-height:59px; color:#fff; font-size:20px; border:1px solid #0CC472; background:#0CC472; text-align:center; } ```포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\ Glance 스킨에 적용되어 있는 기본 컬러 코드 **#909090**을 확인합니다. 2. **디자인 스킨 리스트 접속** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트 3. 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ \- common.css를 더블 클릭 하여 common/gd\_common.css 파일을 엽니다. 4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경합니다.``` :root { --primary-default: #909090; /* 포인트 컬러 */ --primary-hover: #848484; /* 포인트 컬러 hover */ --secondary-default: #AC6F0D; /* 서브 컬러 */ --neutrals-gray: #BCBCBC; --neutrals-dark: #000; --font-size: 12px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다.
푸터 변경하기
고객센터, PC화면 버튼 변경하기
 1\. 고객센터, PC화면 버튼의 **background(배경), color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_button_box ul li a { display: block; padding: 10px 0; background: #D7F350; color: #484848; font-size: 13px; border-radius: 20px; } ```상단 헤더 영역 변경하기
 1\. GNB영역의 **border-bottom(선), height(높이)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #header_wrap header .header_box { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 12px; /* border-bottom: 1px solid #000; */ height: 58px; } ``` 2\. 장바구니 담긴상품 수량의 배경 **background(배경), color(**글자색) 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #header_wrap header .header_box .cart_count, #header_wrap header .header_box .divider { color: #000; font-size: 16px; } ```슬라이드 메뉴 변경하기
 1\. 상단배너의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_banner .nav_login ul li a { display: inline-block; font-size: 15px; color: #222222; } ``` 2\. 아이콘 메뉴 영역의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_link ul li a { display: block; padding: 36px 0 0 0; font-size: 15px; color: #888; } ``` 3\. 탭버튼 활성화 시 **background(배경), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_tabmenu_box .nav_tabmenu li.on span { background: #ab3e55; color: #fff; font-weight: bold; } ``` 4\. 탭버튼 비활성화 시 **background(배경), color(색상)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **css/proc/proc.css** ```css .category_side > li a { position: relative; display: block; padding: 12px 0 12px 0; font-size: 16px; color: #262626; } ``` 메뉴 폰트 **font-weight(굵기)** 값을 변경할 수 있습니다. **proc > proc.css | css/proc/proc.css** ```css .category_side > li > a { font-weight: bold; } ``` 6\. 메뉴 폰트 선택 시 **color(색상)** 값을 변경할 수 있습니다. **css/proc/proc.css** ```css .category_side > li > a.on { color: var(--primary-default); } ```상품 리스트 스타일 변경하기
 1\. 상품리스트 이미지의 **border(라인)** 값을 변경할 수 있습니다. **css/main/main.css**.main_prd_list.display-type01 .goods_prd_item2 .goods_prd_img .img_box .img img {
border: none;
}
진열타입 타이틀 변경하기
 1\. 타이틀의 **font-size(크기), color(색상), border-bottom(선), font-weight(굵기**) 값을 변경할 수 있습니다. **css/proc/proc.css** ```css ._goods_display_main h3 { position: relative; display: block; margin-top: 40px; margin-left: 16px; font-size: 24px; color: #181818; text-align: left; font-weight: 400; } ``` 2\. 더보기 버튼의 **background(배경), font-size(크기), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .main_more_btn2 { display: block; width: 70px; padding: 2px 8px; text-align: center; background: #000; font-size: 14px; font-weight: 600; /* border: 1px solid #9f9f9f; */ color: #000; box-sizing: border-box; } ```상품후기 변경하기
 1\. 상품 후기 게시판 타이틀의 **background(배경), border-bottom(선)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(색상)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(색상)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(굵기)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(선)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .detail_write_btn { display:inline-block; width:100%; padding:10px 0 10px 0; text-align:center; color:#0CC472; font-size:15px; font-weight:bold; background:#ffffff; border:1px solid #0CC472; box-sizing:border-box; } ``` 6\. 상품평 더보기 버튼의 **text-align(정렬), color(색상), font-size(크기), background(배경)** 값을 변경할 수 있습니다. **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; } ```옵션 레이어-셀렉트박스 변경하기
 1\. 옵션 레이어의 기본 옵션 폰트의 **font-size(크기), color(색상), text-align(정렬), background(배경)** 값을 변경할 수 있습니다. **css/gd\_common.css** ```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(선)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **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; } ```옵션 레이어-항목 변경하기(폰트/버튼)
 1\. 옵션 레이어 쿠폰적용 버튼의 **background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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; } ```상품문의-리스트 변경하기
 1\. 상품문의 게시판 문의 상태표시 아이콘의 **font-size(크기), line-height(행간), background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경할 수 있습니다. **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:#0CC472; border-radius: 15px; border: 1px solid #0CC472; } ``` 2\. 문의 제목 폰트의 **font-size(크기), color(색상), line-height(행간)** 값을 변경할 수 있습니다. **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; } ```상품문의-비밀번호 인증 레이어 변경하기
 1\. 비밀번호 인증 레이어의 **height(높이), background(배경), border(선)** 값을 변경할 수 있습니다. **css/board/board.css** ```css .cite_layer .wrap { position: relative; height: 190px; background: #ffffff; border: 1px solid #555555; } ``` \ 2\. 비밀번호 인증 타이틀의 **height(높이), background(배경), border(선)** 값을 변경할 수 있습니다. **css/board/board.css** ```css .cite_layer .wrap h4 { height: 27px; padding: 13px 0 0 17px; background: #f4f4f4; color: #222222; } ``` 3\. 비밀번호 인증 레이어 확인 버튼의 **color(색상), border-radius(둥근선), background(배경)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .d_pw_confirm_btn { display:inline-block; padding:5px 15px 5px 15px; color:#ffffff; border:1px solid #0CC472; border-radius:3px; background:#0CC472; } ```상품문의-리스트 내용 변경하기(폰트/버튼)
 1\. 상품문의 내용 폰트의 **color(색상)** 값을 변경할 수 있습니다. **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(둥근선)** 값을 변경할 수 있습니다. **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; } ```상세 타이틀 및 info 레이어 폰트 변경하기
 1\. 상품 상세 타이틀의 **font-size(크기), line-height(행간), text-align(정렬)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```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(굵기)** 값을 변경할 수 있습니다. **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; } ```상품 상세 탭 변경하기
 1\. 상품 상세페이지 탭 폰트의 **color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **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(행간)** 값을 변경할 수 있습니다. **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: #0CC472; line-height: 11px; } ``` 3\. 현재위치 탭표시 라인의 **border-bottom(선)** 값을 변경할 수 있습니다. **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; } ```상품 상세 버튼 변경하기
 1\. 장바구니 버튼의 **font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **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; ```상품 상세 리스트 영역 변경하기
 1\. 상품명 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info h3 { font-size: 18px; color: #333333; word-break: break-all; } ``` 2\. 상품 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box .price { font-size: 20px; color: #333333; } ``` 3\. 상품 할인 전 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box del { color: #999999; } ``` 4\. 상품 상세페이지 리스트 제목**font-size(크기), color(색상)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **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(정렬), background(배경), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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; } ```장바구니 버튼 변경하기
 1\. 쿠폰적용 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .cart_option_modify { 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; } ``` 3\. 선택상품 삭제, 주문 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .cart_all_order_btn { display:inline-block; width:100%; padding:10px 0 10px 0; text-align:center; background:#0CC472; border:1px solid #0CC472; color:#ffffff; font-weight:bold; box-sizing:border-box; font-size:14px; } ```장바구니 폰트 변경하기
 1\. 장바구니 상품명 폰트의 **font-weight(굵기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```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(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```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(굵기)** 값을 변경할 수 있습니다. **css/order/order.css** ```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:#000; font-weight:bold; } ``` 4\. 장바구니 항목 타이틀 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl dt { display: table-cell; width: 50%; font-size: 13px; color: #5e5e5e; } ``` 5\. 장바구니 총 상품금액 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl dd { display: table-cell; width: 50%; text-align: right; font-size: 15px; color: #5e5e5e; } ``` 6\. 장바구니 총 합계금액 폰트의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl.total dd { color: #000; font-size: 17px; } ```포인트 컬러 일괄 변경하기
1. Case 스킨에 적용되어 있는 기본 컬러 코드 **#0CC472 입니다** 2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ \- 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ \- common.css를 더블 클릭 하여 common/common.css 파일을 엽니다.\ 4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경합니다. ``` :root { --primary-default: #0057FF; /* 포인트 컬러 */ --primary-hover: #00308D; /* 포인트 컬러 hover */ --secondary-default: #EF78FF; /* 서브 컬러 */ --neutrals-gray: #D4D4D4; --neutrals-gray-bright: #F5F5F5; --neutrals-dark: #000; --font-size: 14px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 픈트 명 */ --font-family-oswald: 'Oswald'; --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1450px; /* 최소 너비 */ --max-width: 1200px; /* 최대 너비 */ } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다.
메뉴 변경하기
1. 상단 메뉴의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다.
**css > layout/layout.css**
```css
.gnb .depth0 > li > a {
display: inline-block;
padding: 0 20px; /* 좌우 여백 수정 */
font-size: calc(var(--font-size) + 2px); /*폰트 사이즈 변경*/
font-weight: var(--font-medium);
text-align: center;
line-height: 49px;
color: #000; /* 폰트 색 변경 */
}
```
2. 서브 메뉴 color(색상), border-radius(보더 라운드), font-size(폰트 크기)를 변경할 수 있습니다
```css
.depth1 a {
position: relative;
font-size: calc(var(--font-size) + 2px); /* 폰트 크기 변경 */
font-weight: var(--font-medium);
color: var(--neutrals-dark); /* 컬러 */
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
height: 39px;
border-radius: 10px; /* 보더 라운드 */
padding-inline: 10px;
}
.depth1 li:hover > a {
background-color: var(--neutrals-gray-bright); /* hover 배경색 변경 */
height: 39px;
width: 100%;
border-radius: 10px;
padding-inline: 10px;
}
```
3. 장바구니 담긴상품 수량 폰트의 color(색상) 값을 변경할 수 있습니다. \
(현재는 기본 포인트 컬러 전역변수로 지정되어 있습니다.)\
css > layout/layout.css
```css
.top_member_box > li strong {
display: inline-flex;
padding: 4px 6px;
font-weight: var(--font-bold);
font-size: calc(var(--font-size) - 4px); /* 폰트 사이즈 변경 */
align-items: center;
background-color: var(--primary-default); /* 배경색 변경 */
color: #fff; /* 폰트 색 변경 */
vertical-align: top;
border-radius: 50%;
transform: translate(5px, -2px);
}
```
검색창 폰트 변경하기
1. 검색창 인풋박스 입력 폰트의 font-size(크기), color(폰트 색) 값을 추가해 변경할 수 있습니다. **css/layout/layout.css** ```css .top_search input { flex: 1; border: none 0; vertical-align: top; /* color: #333; font-size: 14px; */ } ``` 2\. 최근검색어 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. \ **css/layout/layout.css** ```css .recent_box dt { font-size: 13px; /* 폰트 사이즈 변경 */ margin-bottom: 10px; font-weight: bold; } ``` 3\. 추천상품 폰트의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .recom_box dt { width: 100%; font-size: 13px; /* 폰트 사이즈 변경 */ font-weight: var(--font-bold); line-height: 19px; text-align: center; margin-bottom: 10px; } ```푸터 변경하기 (폰트/컬러)
 1\. 푸터 메뉴 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .footer__cs-agree a { display: block; padding-inline: 6px; color: inherit; /* color 변경 */ font-weight: inherit; } ``` 2\. 푸터 정보영역 폰트의 color(색상), background-color(푸터 배경색) 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .footer { border-top: 1px solid #ebebeb; background-color: #fafafa; /* 배경색 변경 */ color: #888; /* color 변경 */ } ```웹폰트 적용하기
1\. **관리자 페이지 > 디자인 메뉴**에 접속합니다. 2\. 좌측 하단 폴더트리 내 “**스타일시트/CSS**”를 더블 클릭하여 스타일시트 리스트 중 **reset.css**를 오픈하세요.  3\. reset.css 스타일시트의 3번째 줄에 @import url(’외부 스타일시트 경로’)을 추가합니다. **css/reset.css** ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); /* 5번째줄에 추가 */ ``` 4\. 13번째 줄의 font-family의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Nanum Gothic(변경할 폰트명)으로 수정하세요.\ (한글 폰트 파일명의 경우 " "입력) **css/common/common.css** ```css .:root { ... --font-family: 'Pretendard variable'; ... } ``` 5. common.css --font-family에서 변경된 폰트는 reset.css 에서 하위 코드에 적용 됩니다. **css/reset.css** ``` .godo * { font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; } ... body, th, td, input, select, textarea, button { font-size: var(--font-size); line-height: 1.5; font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Dotum, '돋움', sans-serif; color: #333; } ``` ※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.최근 본 상품 변경하기
 1\. 최근 본 상품 영역의 **background(배경)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont { width: 88px; text-align: start; border-radius: 10px; padding: 13px 14px 16px; background: var(--secondary-default); /* 배경색 변경 */ color: #fff; } ``` 2\. 타이틀 폰트의 **color(색상), text-align(정렬)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont h4 { padding: 0; color: inherit; font-size: calc(var(--font-size) + 6px); font-weight: var(--font-medium); line-height: 23px; letter-spacing: -0.2px; font-family: var(--font-family-oswald); } ``` 3\. 상품 가격 폰트의 color(색상) 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .src_box strong { display: block; color: #0CC472; } ``` 5\. 페이징 폰트의**color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .scr_paging strong { padding: 0 2px 0 2px; color: #0CC472; } ```진열타입 타이틀 변경하기(폰트/컬러)
 1\. 타이틀 폰트의**font-size(크기)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .goods_list_tit h3 { font-size:60px; font-weight: 400; } ``` 2\. 타이틀 영역 하단의 **border-bottom(선)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .goods_list_tit { padding:100px 0 10px 0; /* border-bottom:1px solid #ececec;*/ line-height:1; position:relative; } ``` 3\. 더보기 버튼의 **font-size(크기), font-weight(굵기), border(선)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .btn_goods_more .btn_goods_view_more { padding:2px 5px 3px 5px; font-size:14px; font-weight:400; border:0px solid #dbdbdb; } ```상품 리스트 변경하기
 1\. 상품명 **color(색상)** 값을 변경할 수 있습니다. \ (한줄 말줄임이 처리가 되어 있습니다.) **css/goods/list.css** ```css .item_tit_box .item_name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; padding: 0; font-size: 16px; text-overflow: ellipsis; font-weight: normal; overflow: hidden; line-height: 22px; color: var(--primary-default); /* color 추가 */ } ``` 2\. 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .item_money_box .item_price { /*display:block;*/ padding:0px; font-size:16px; color:#000000; font-weight:bold; } ```상품 상세 상단 변경하기(폰트)
 1\. 상품명 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_tit h3 { width:405px; font-size:18px; word-break: break-all; } ``` 2\. 상품 정보 타이틀 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_list dt { ffloat:left; width:80px; margin:0 10px 0 0; color:#888888; font-weight:normal; word-wrap:break-word; } ``` 3\. 상품 가격 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_price dd { margin: -2px 0 0 0; font-size: 16px; font-weight: bold; } ``` 4\. 총 합계금액 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dt { font-size: 16px; font-weight: bold; } ``` 5\. 총 합계금액 가격 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd { color:#0CC472; font-weight:bold; } ``` 6\. 총 합계금액 가격 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd strong { font-size: 20px; } ```상품 상세 상단 변경하기(버튼)
 1\. 공유하기 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **css/button.css** ```css .btn_gray_list a, .btn_gray_list button { display:inline-block; padding:0 0 0 11px; border:1px solid #999; vertical-align:middle; } ``` 2\. 조건별 배송 버튼의 **font-size(크기), background(배경)** 값을 변경할 수 있습니다. **css/button.css** ```css .btn_gray_list .btn_gray_small { font-size:11px; } ``` 3\. 장바구니 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다. **css/button.css** ```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:regular; } ``` 4\. 바로구매 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다. **css/button.css** ```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 #0CC472; background:#0CC472; text-align:center; font-weight:regular; } ```상품 상세 상단 변경하기(라인)
 1\. 셀렉트 영역의 **border(선), background(배경)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```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(선) 값을** 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_tit { position: relative; padding: 0 0 10px 0; border-bottom: 1px solid #dbdbdb; } ``` \ 3\. 선택한 옵션 영역의 **border-bottom(선) 값을** 변경할 수 있습니다. **css/layout/layout.css** ```css .item_detail_list + .item_choice_list table { width: 100%; border-bottom: 1px solid #999999; } ``` 4. 선택한 옵션영역의 background(배경) 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .item_choice_list table { width: 100%; background: #f5f5f5; } ```  5. 총 합계금액 구분 영역의 border-top(선) 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount { margin: 15px 0 0 0; padding-top: 10px; border-top: 1px solid #dbdbd ```상품 상세 탭 변경하기
 1\. 상품 상세 탭 선택시 **color(색상), font-weight(굵기), border(선)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_tab li.on a { padding-top: 18px; margin-top: 8px; color: #333333; font-weight: bold; border-bottom: 2px solid #ffffff; } ``` 2\. 글 등록 수량 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_tab li a strong { color: #ab3e55; } ```상품 상세 상품문의 영역-리스트 변경하기
 1\. 상품 문의 타이틀 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_sec h3 { padding: 45px 0 10px 0; font-size: 18px; } ``` 2\. 상품문의 전체보기 버튼의 **color(색상), font-weight(굵기), border(선), background(배경), text-align(정렬)** 값을 변경할 수 있습니다. **css/button.css** ```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(정렬)** 값을 변경할 수 있습니다. **css/button.css** ```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(선)** 값을 변경할 수 있습니다. **css/button.css** ```css .pagination .on { color: #ab3e55; font-weight: bold; border: 1px solid #ab3e55 ```상품 상세 상품문의 영역-리스트 내용 변경하기
 1\. 수정 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **css/button.css** ```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(배경)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .qna_new_box { text-align: left; background: #f8f8f8; } ```장바구니 화면 변경하기
 1\. 장바구니 타이틀 폰트의 **color(색상), font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit h2 { float: left; font-size: 28px; color: #222222; } ``` \ 2\. 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit .page_on { color: #ab3e55; font-weight: bold; } ``` 3\. 다음 진행 스텝 표시 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit ol li { float: left; font-size: 14px; color: #d1d1d1; } ``` 4\. 장바구니 타이틀 폰트 하단의 **border-bottom(선)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit { overflow: hidden; border-bottom: 1px solid #dbdbdb; } ```  5\. 장바구니 상품금액/배송비/최종 결제금액의 **color(색상), font-size(사이즈), font-weight(굵기)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` 6\. 선택상품주문 버튼은 마우스 오버 전(.btn\_order\_choice\_buy) 과 오버 시(.btn\_order\_choice\_buy:hover)의 **border(선), font-size(사이즈), color(색상)** 값으로 각각 변경할 수 있습니다. **css/order/button.css** ```css .btn_order_choice_buy { min-width:190px; height:55px; padding:0 20px 0 20px; color:#3e3d3c; font-weight:bold; font-size:14px; border:1px solid #cccccc; background:#fff; cursor:pointer; } ``` ```css .btn_order_choice_buy:hover { color:#333333; border:1px solid #bbbbbb; } ``` 7\. 전체상품주문 버튼은 마우스 오버 전(.btn\_order\_whole\_buy) 과 오버 시(.btn\_order\_whole\_buy:hover) 의 **background(배경) 컬러, border(선), color(색상), font-size(사이즈)** 값으로 각각 변경할 수 있습니다. **css/button.css** ```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:#0CC472; cursor:pointer; font-weight:bold; } ```.btn_order_whole_buy:hover {
border:1px solid #02B666;
background:#02B666;
}
주문서 작성/결제 화면 변경하기
**주문서 금액 변경하기**  \- 상품금액/배송비/합계 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` **최종결제금액, 결제하기 버튼 변경하기**  1\. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **css/order/order.css** ```css .payment_final_total dd { display:inline-block; font-size:30px; color:#0CC472; } ``` 2\. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경할 수 있습니다. **css/button.css** ```css .btn_order_buy { display:inline-block; width:300px; height:61px; line-height:59px; color:#fff; font-size:20px; border:1px solid #0CC472; background:#0CC472; text-align:center; } ```포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\ Case 스킨에 적용되어 있는 기본 컬러 코드 **#**0057FF을 확인합니다. 2. **디자인 스킨 리스트 접속** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트 3. 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ \- common.css를 더블 클릭 하여 common/gd\_common.css 파일을 엽니다. 4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경합니다.``` :root { --primary-default: #0057FF;/* 포인트 컬러 */ --primary-hover: #00308D;/* 포인트 컬러 hover */ --secondary-default: #EF78FF;/* 서브 컬러 */ --neutrals-gray: #D4D4D4; --neutrals-gray-brite: #f5f5f5; --neutrals-dark: #000; --font-size: 12px;/* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable';/* 기본 폰트 명 */ --font-oswald: 'Oswald', sans-serif; --font-regular: 400; --font-medium: 500; --font-bold: 700; } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다.
푸터 변경하기
 1. CS CENTER 변경하기\ CS CENTER 전화번호의 color(색상), font-size(크기), font-weight(굵기), text-align(정렬)값을 변경할 수 있습니다. css > gd\_layout.css ```css .footer__cs-number { font-weight: var(--font-bold); font-size: 26px; line-height: 31px; } ``` 3\. 푸터 메뉴버튼의 **font-size(크기), color(색상), text-align(정렬), letter-spacing(자간), font-weight(굵기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .footer .ft_menu a { display: block; position: relative; padding-inline: 10px; color: #000; font-weight: 600; } ``` 4\. 푸터 정보 부분의 **text-align(정렬), font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .footer__info { margin-top: 30px; text-align: center; } ```고객센터, PC화면 버튼 변경하기
 1\. 고객센터, PC화면 버튼의 **background(배경), color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .footer .ft_button_box ul li a { display: block; padding: 10px 0; background: #fff; border: 1px solid #ebebeb; font-size: 13px; border-radius: 20px; color: #888; } ```상단 헤더 영역 변경하기
 1\. background-color(배경색) 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #header_wrap header { width: 100%; min-width: 320px; background: #fff; z-index: 300; } ``` 2\. 장바구니 담긴상품 수량의 배경 **background(배경), color(**글자색) 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #header_wrap header .header_box .cart_count { position: absolute; top: 8px; right: 0; display: inline-flex; justify-content: center; align-items: center; padding: 0px 4px; border-radius: 100%; color: #fff; background: var(--primary-default); font-size: calc(var(--font-size) - 2px); min-width: 16px; height: 17px; text-align: center; } ```슬라이드 메뉴 변경하기
 1\. 상단배너의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_banner .nav_login ul li a { display: inline-block; font-size: 15px; color: #222222; } ``` 2\. 아이콘 메뉴 영역의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_link ul li a { display: block; padding: 36px 0 0 0; font-size: 15px; color: #888; } ``` 3\. 탭버튼 활성화 시 **background(배경), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_tabmenu_box .nav_tabmenu li.on span { background: #ab3e55; color: #fff; font-weight: bold; } ``` 4\. 탭버튼 비활성화 시 **background(배경), color(색상)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **css/proc/proc.css** ```css .category_side > li a { position: relative; display: block; padding: 12px 0 12px 0; font-size: 16px; color: #262626; } ``` 메뉴 폰트 **font-weight(굵기)** 값을 변경할 수 있습니다. **proc > proc.css | css/proc/proc.css** ```css .category_side > li > a { font-weight: bold; } ``` 6\. 메뉴 폰트 선택 시 **color(색상)** 값을 변경할 수 있습니다. **css/proc/proc.css** ```css .category_side > li > a.on { color: var(--primary-default); } ```상품 리스트 스타일 변경하기
 1\. 상품리스트 이미지의 **border(라인)** 값을 변경할 수 있습니다. **css/goods/list/list\_01.css** ```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(크기)** 값을 변경할 수 있습니다. **css/goods/list/list\_01.css** ```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(색상)** 값을 변경할 수 있습니다. **css/goods/list/list\_01.css** ```css .goods_prd_item2 .goods_prd_content .goods_info_list li.price .c_price { color: #000; } ```진열타입 타이틀 변경하기
 1\. 타이틀의 **font-size(크기), color(색상), border-bottom(선), font-weight(굵기**) 값을 변경할 수 있습니다. **css/proc/proc.css** ```css ._goods_display_main h3 { position:relative; display:block; padding:40px 0px 0px 16px; font-size:24px; color:#181818; /* border-bottom:1px solid #f3f2f2; */ text-align:left; font-weight:400px; } ``` 2\. 더보기 버튼의 **background(배경), font-size(크기), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .main_more_btn2 { display: block; width: 70px; padding: 2px 8px; text-align: center; background: #000; font-size: 12px; font-weight: 600; /* border: 1px solid #9f9f9f; */ color: #fff; box-sizing: border-box; position: absolute; top: 50px; right: 0px; } ```상품후기 변경하기
 1\. 상품 후기 게시판 타이틀의 **background(배경), border-bottom(선)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(색상)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(색상)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(굵기)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(선)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .detail_write_btn { display:inline-block; width:100%; padding:10px 0 10px 0; text-align:center; color:#0CC472; font-size:15px; font-weight:bold; background:#ffffff; border:1px solid #0CC472; box-sizing:border-box; } ``` 6\. 상품평 더보기 버튼의 **text-align(정렬), color(색상), font-size(크기), background(배경)** 값을 변경할 수 있습니다. **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; } ```옵션 레이어-셀렉트박스 변경하기
 1\. 옵션 레이어의 기본 옵션 폰트의 **font-size(크기), color(색상), text-align(정렬), background(배경)** 값을 변경할 수 있습니다. **css/gd\_common.css** ```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(선)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **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; } ```옵션 레이어-항목 변경하기(폰트/버튼)
 1\. 옵션 레이어 쿠폰적용 버튼의 **background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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; } ```상품문의-리스트 변경하기
 1\. 상품문의 게시판 문의 상태표시 아이콘의 **font-size(크기), line-height(행간), background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경할 수 있습니다. **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:#0CC472; border-radius: 15px; border: 1px solid #0CC472; } ``` 2\. 문의 제목 폰트의 **font-size(크기), color(색상), line-height(행간)** 값을 변경할 수 있습니다. **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; } ```상품문의-비밀번호 인증 레이어 변경하기
 1\. 비밀번호 인증 레이어의 **height(높이), background(배경), border(선)** 값을 변경할 수 있습니다. **css/board/board.css** ```css .cite_layer .wrap { position: relative; height: 190px; background: #ffffff; border: 1px solid #555555; } ``` \ 2\. 비밀번호 인증 타이틀의 **height(높이), background(배경), border(선)** 값을 변경할 수 있습니다. **css/board/board.css** ```css .cite_layer .wrap h4 { height: 27px; padding: 13px 0 0 17px; background: #f4f4f4; color: #222222; } ``` 3\. 비밀번호 인증 레이어 확인 버튼의 **color(색상), border-radius(둥근선), background(배경)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .d_pw_confirm_btn { display:inline-block; padding:5px 15px 5px 15px; color:#ffffff; border:1px solid #0CC472; border-radius:3px; background:#0CC472; } ```상품문의-리스트 내용 변경하기(폰트/버튼)
 1\. 상품문의 내용 폰트의 **color(색상)** 값을 변경할 수 있습니다. **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(둥근선)** 값을 변경할 수 있습니다. **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; } ```상세 타이틀 및 info 레이어 폰트 변경하기
 1\. 상품 상세 타이틀의 **font-size(크기), line-height(행간), text-align(정렬)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```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(굵기)** 값을 변경할 수 있습니다. **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; } ```상품 상세 탭 변경하기
 1\. 상품 상세페이지 탭 폰트의 **color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **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(행간)** 값을 변경할 수 있습니다. **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: #0CC472; line-height: 11px; } ``` 3\. 현재위치 탭표시 라인의 **border-bottom(선)** 값을 변경할 수 있습니다. **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; } ```상품 상세 버튼 변경하기
 1\. 장바구니 버튼의 **font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **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; ```상품 상세 리스트 영역 변경하기
 1\. 상품명 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info h3 { font-size: 18px; color: #333333; word-break: break-all; } ``` 2\. 상품 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box .price { font-size: 20px; color: #333333; } ``` 3\. 상품 할인 전 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box del { color: #999999; } ``` 4\. 상품 상세페이지 리스트 제목**font-size(크기), color(색상)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **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(정렬), background(배경), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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; } ```장바구니 버튼 변경하기
 1\. 쿠폰적용 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .cart_option_modify { 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; } ``` 3\. 선택상품 삭제, 주문 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .cart_all_order_btn { display:inline-block; width:100%; padding:10px 0 10px 0; text-align:center; background:#0CC472; border:1px solid #0CC472; color:#ffffff; font-weight:bold; box-sizing:border-box; font-size:14px; } ```장바구니 폰트 변경하기
 1\. 장바구니 상품명 폰트의 **font-weight(굵기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```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(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```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(굵기)** 값을 변경할 수 있습니다. **css/order/order.css** ```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:#000; font-weight:bold; } ``` 4\. 장바구니 항목 타이틀 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl dt { display: table-cell; width: 50%; font-size: 13px; color: #5e5e5e; } ``` 5\. 장바구니 총 상품금액 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl dd { display: table-cell; width: 50%; text-align: right; font-size: 15px; color: #5e5e5e; } ``` 6\. 장바구니 총 합계금액 폰트의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl.total dd { color: #000; font-size: 17px; } ```포인트 컬러 일괄 변경하기
1. Atelier 스킨에 적용되어 있는 기본 컬러 코드 **#**cb558f **입니다** 2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ \- 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ \- common.css를 더블 클릭 하여 common/common.css 파일을 엽니다.\ 4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경합니다. ``` :root { --primary-default: #cb558f; /* 포인트 색 */ --primary-hover: #ad1b63; /* 포인트 색 hover */ --secondary-default: #b1b5bb;/* 서브 색 */ --neutrals-gray: #f0f0f0; --neutrals-dark: #000; --font-size: 14px; /* 기본 폰트 크기 */ --font-family: 'Pretendard variable'; /* 기본 폰트 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1450px; --max-width: 1680px; } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다.
메뉴 변경하기
 1. 전체 메뉴의 background-color (배경색) 값을 변경할 수 있습니다. **css > layout/layout.css** ```css .gnb_allmenu_wrap { display: none; position: fixed; top: 0; left: 0; width: 400px; background: var(--neutrals-gray); z-index: 999; } ``` 2. 전체 메뉴 hover background(배경색)을 변경할 수 있습니다. ```css .gnb_allmenu_wrap .gnb_allmenu_box li:hover, .gnb_allmenu_wrap .gnb_allmenu_box li.is-open > button:hover { background-color: var(--primary-default); } ``` 3.전체 메뉴 color(폰트 색), font-size(폰트 크기)를 변경할 수 있습니다. ```css .gnb_allmenu_wrap .gnb_allmenu_box a, .gnb_allmenu_wrap .gnb_allmenu_box button { color: var(--neutrals-dark); font-size: 24px; font-weight: 400; height: 64px; line-height: 64px; width: 100%; text-align: left; display: block; } ``` 4. 장바구니 담긴상품 수량 폰트의 color(색상) 값을 변경할 수 있습니다. \ (현재는 기본 포인트 컬러 전역변수로 지정되어 있습니다.)\ css > layout/layout.css ```css .top_member_box > li strong { color: var(--primary-default); } ```검색창 폰트 변경하기
1. 검색창 인풋박스 입력 폰트의 font-size(크기), color(폰트 색) 값을 추가해 변경할 수 있습니다. **css/layout/layout.css** ```css .top_search input { flex: 1; border: none 0; vertical-align: top; /* color: #333; font-size: 14px; */ } ``` 2\. 최근검색어 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. \ **css/layout/layout.css** ```css .recent_box dt { font-size: 13px; /* 폰트 사이즈 변경 */ margin-bottom: 10px; font-weight: bold; } ``` 3\. 추천상품 폰트의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .recom_box dt { width: 100%; font-size: 13px; /* 폰트 사이즈 변경 */ font-weight: var(--font-bold); line-height: 19px; text-align: center; margin-bottom: 10px; } ```푸터 변경하기 (폰트/컬러)
 1\. 푸터 메뉴 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .footer__privacy a { color: #000; line-height: inherit; } ``` 2\. 푸터 정보영역 폰트의 color(색상), background-color(푸터 배경색) 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .footer__item-content { line-height: 16px; font-weight: 300; font-size: calc(var(--font-size) - 2px); } ```웹폰트 적용하기
1\. **관리자 페이지 > 디자인 메뉴**에 접속합니다. 2\. 좌측 하단 폴더트리 내 “**스타일시트/CSS**”를 더블 클릭하여 스타일시트 리스트 중 **reset.css**를 오픈하세요.  3\. reset.css 스타일시트의 3번째 줄에 @import url(’외부 스타일시트 경로’)을 추가합니다. **css/reset.css** ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); /* 5번째줄에 추가 */ ``` 4\. 13번째 줄의 font-family의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Nanum Gothic(변경할 폰트명)으로 수정하세요.\ (한글 폰트 파일명의 경우 " "입력) **css/common/common.css** ```css .:root { ... --font-family: 'Pretendard variable'; ... } ``` 5. common.css --font-family에서 변경된 폰트는 reset.css 에서 하위 코드에 적용 됩니다. **css/reset.css** ``` .godo * { font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; } ... body, th, td, input, select, textarea, button { font-size: var(--font-size); line-height: 1.5; font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Dotum, '돋움', sans-serif; color: #333; } ``` ※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.최근 본 상품 변경하기
 1\. 타이틀 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont { float: left; min-width: 72px; padding: 0px; background: none; color: #333; } ``` 3\. 상품 가격 폰트의 color(색상) 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .src_box strong { display: block; color: #0CC472; } ``` 5\. 페이징 폰트의**color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .scr_paging strong { padding: 0 2px 0 2px; color: #0CC472; } ```진열타입 타이틀 변경하기(폰트/컬러)
 1\. 타이틀 폰트의**font-size(크기)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .goods_list_tit h3 { font-size:60px; font-weight: 400; } ``` 2\. 타이틀 영역 하단의 **border-bottom(선)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .goods_list_tit { padding:100px 0 10px 0; /* border-bottom:1px solid #ececec;*/ line-height:1; position:relative; } ``` 3\. 더보기 버튼의 **font-size(크기), font-weight(굵기), border(선)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .btn_goods_more .btn_goods_view_more { padding:2px 5px 3px 5px; font-size:14px; font-weight:400; border:0px solid #dbdbdb; } ```상품 리스트 변경하기
 1\. 상품명 **color(색상)** 값을 변경할 수 있습니다. \ (한줄 말줄임이 처리가 되어 있습니다.) **css/goods/list.css** ```css .item_tit_box .item_name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; padding: 0; font-size: 16px; text-overflow: ellipsis; font-weight: normal; overflow: hidden; line-height: 22px; color: var(--primary-default); /* color 추가 */ } ``` 2\. 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .item_money_box .item_price { /*display:block;*/ padding:0px; font-size:16px; color:#000000; font-weight:bold; } ```상품 상세 상단 변경하기(폰트)
 1\. 상품명 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_tit h3 { width:405px; font-size:18px; word-break: break-all; } ``` 2\. 상품 정보 타이틀 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_list dt { ffloat:left; width:80px; margin:0 10px 0 0; color:#888888; font-weight:normal; word-wrap:break-word; } ``` 3\. 상품 가격 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_price dd { margin: -2px 0 0 0; font-size: 16px; font-weight: bold; } ``` 4\. 총 합계금액 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dt { font-size: 16px; font-weight: bold; } ``` 5\. 총 합계금액 가격 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd { color:#0CC472; font-weight:bold; } ``` 6\. 총 합계금액 가격 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd strong { font-size: 20px; } ```상품 상세 상단 변경하기(버튼)
 1\. 공유하기 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **css/button.css** ```css .btn_gray_list a, .btn_gray_list button { display:inline-block; padding:0 0 0 11px; border:1px solid #999; vertical-align:middle; } ```  2\. 조건별 배송 버튼의 **font-size(크기), background(배경)** 값을 변경할 수 있습니다. **css/button.css** ```css .btn_gray_list .btn_gray_small { font-size:11px; } ```  3\. 장바구니 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다. **css/button.css** ```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:regular; } ``` 4\. 바로구매 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다. **css/button.css** ```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 #0CC472; background:#0CC472; text-align:center; font-weight:regular; } ```상품 상세 상단 변경하기(라인)
 1\. 셀렉트 영역의 **border(선), background(배경)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```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(선) 값을** 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_tit { position: relative; padding: 0 0 10px 0; border-bottom: 1px solid #dbdbdb; } ``` \ 3\. 선택한 옵션 영역의 **border-bottom(선) 값을** 변경할 수 있습니다. **css/layout/layout.css** ```css .item_detail_list + .item_choice_list table { width: 100%; border-bottom: 1px solid #999999; } ``` 4. 선택한 옵션영역의 background(배경) 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .item_choice_list table { width: 100%; background: #f5f5f5; } ``` \ 5\. 총 합계금액 구분 영역의 border-top(선), font-color(폰트 색) 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount { margin: 15px 0 0 0; padding-top: 10px; border-top: 1px solid #dbdbd ```상품 상세 탭 변경하기
 1\. 상품 상세 탭 선택시 **color(색상), font-weight(굵기), border(선)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_tab li.on a { padding-top: 18px; margin-top: 8px; color: #333333; font-weight: bold; border-bottom: 2px solid #ffffff; } ``` 2\. 글 등록 수량 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_tab li a strong { color: #ab3e55; } ```상품 상세 상품문의 영역-리스트 변경하기
 1\. 상품 문의 타이틀 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_sec h3 { padding: 45px 0 10px 0; font-size: 18px; } ``` 2\. 상품문의 전체보기 버튼의 **color(색상), font-weight(굵기), border(선), background(배경), text-align(정렬)** 값을 변경할 수 있습니다. **css/button.css** ```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(정렬)** 값을 변경할 수 있습니다. **css/button.css** ```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(선)** 값을 변경할 수 있습니다. **css/button.css** ```css .pagination .on { color: #ab3e55; font-weight: bold; border: 1px solid #ab3e55 ```상품 상세 상품문의 영역-리스트 내용 변경하기
 1\. 수정 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **css/button.css** ```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(배경)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .qna_new_box { text-align: left; background: #f8f8f8; } ```장바구니 화면 변경하기
 1\. 장바구니 타이틀 폰트의 **color(색상), font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit h2 { float: left; font-size: 28px; color: #222222; } ``` \ 2\. 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit .page_on { color: #ab3e55; font-weight: bold; } ``` 3\. 다음 진행 스텝 표시 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit ol li { float: left; font-size: 14px; color: #d1d1d1; } ``` 4\. 장바구니 타이틀 폰트 하단의 **border-bottom(선)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit { overflow: hidden; border-bottom: 1px solid #dbdbdb; } ```  5\. 장바구니 상품금액/배송비/최종 결제금액의 **color(색상), font-size(사이즈), font-weight(굵기)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` 6\. 선택상품주문 버튼은 마우스 오버 전(.btn\_order\_choice\_buy) 과 오버 시(.btn\_order\_choice\_buy:hover)의 **border(선), font-size(사이즈), color(색상)** 값으로 각각 변경할 수 있습니다. **css/order/button.css** ```css .btn_order_choice_buy { min-width:190px; height:55px; padding:0 20px 0 20px; color:#3e3d3c; font-weight:bold; font-size:14px; border:1px solid #cccccc; background:#fff; cursor:pointer; } ``` ```css .btn_order_choice_buy:hover { color:#333333; border:1px solid #bbbbbb; } ``` 7\. 전체상품주문 버튼은 마우스 오버 전(.btn\_order\_whole\_buy) 과 오버 시(.btn\_order\_whole\_buy:hover) 의 **background(배경) 컬러, border(선), color(색상), font-size(사이즈)** 값으로 각각 변경할 수 있습니다. **css/button.css** ```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:#0CC472; cursor:pointer; font-weight:bold; } ```.btn_order_whole_buy:hover {
border:1px solid #02B666;
background:#02B666;
}
주문서 작성/결제 화면 변경하기
**주문서 금액 변경하기**  \- 상품금액/배송비/합계 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` **최종결제금액, 결제하기 버튼 변경하기**  1\. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **css/order/order.css** ```css .payment_final_total dd { display:inline-block; font-size:30px; color:#0CC472; } ``` 2\. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경할 수 있습니다. **css/button.css** ```css .btn_order_buy { display:inline-block; width:300px; height:61px; line-height:59px; color:#fff; font-size:20px; border:1px solid #0CC472; background:#0CC472; text-align:center; } ```포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\ Case 스킨에 적용되어 있는 기본 컬러 코드 **#**0057FF을 확인합니다. 2. **디자인 스킨 리스트 접속** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트 3. 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ \- common.css를 더블 클릭 하여 common/gd\_common.css 파일을 엽니다. 4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경합니다.``` :root { --primary-default: #0057FF;/* 포인트 컬러 */ --primary-hover: #00308D;/* 포인트 컬러 hover */ --secondary-default: #EF78FF;/* 서브 컬러 */ --neutrals-gray: #D4D4D4; --neutrals-gray-brite: #f5f5f5; --neutrals-dark: #000; --font-size: 12px;/* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable';/* 기본 폰트 명 */ --font-oswald: 'Oswald', sans-serif; --font-regular: 400; --font-medium: 500; --font-bold: 700; } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다.
푸터 변경하기
 1. CS CENTER 변경하기\ CS CENTER 전화번호의 color(색상), font-size(크기), font-weight(굵기), text-align(정렬)값을변경할 수 있습니다. css > gd\_layout.css ```css .footer__cs-number { font-weight: var(--font-bold); font-size: 26px; line-height: 31px; } ``` 3\. 푸터 메뉴버튼의 **font-size(크기), color(색상), text-align(정렬), letter-spacing(자간), font-weight(굵기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .footer .ft_menu a { display: block; position: relative; padding-inline: 10px; color: #000; font-weight: 600; } ``` 4\. 푸터 정보 부분의 **text-align(정렬), font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .footer__info { margin-top: 30px; text-align: center; } ```고객센터, PC화면 버튼 변경하기
 1\. 고객센터, PC화면 버튼의 **background(배경), color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .footer .ft_button_box ul li a { display: block; padding: 10px 0; background: #fff; border: 1px solid #ebebeb; font-size: 13px; border-radius: 20px; color: #888; } ```상단 헤더 영역 변경하기
 1\. background-color(배경색) 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #header_wrap header { width: 100%; min-width: 320px; background: #fff; z-index: 300; } ``` 2\. 장바구니 담긴상품 수량의 배경 **background(배경), color(**글자색) 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #header_wrap header .header_box .cart_count { position: absolute; top: 8px; right: 0; display: inline-flex; justify-content: center; align-items: center; padding: 0px 4px; border-radius: 100%; color: #fff; background: var(--primary-default); font-size: calc(var(--font-size) - 2px); min-width: 16px; height: 17px; text-align: center; } ```슬라이드 메뉴 변경하기
 1\. 상단배너의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_banner .nav_login ul li a { display: inline-block; font-size: 15px; color: #222222; } ``` 2\. 아이콘 메뉴 영역의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_link ul li a { display: block; padding: 36px 0 0 0; font-size: 15px; color: #888; } ``` 3\. 탭버튼 활성화 시 **background(배경), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_tabmenu_box .nav_tabmenu li.on span { background: #ab3e55; color: #fff; font-weight: bold; } ``` 4\. 탭버튼 비활성화 시 **background(배경), color(색상)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **css/proc/proc.css** ```css .category_side > li a { position: relative; display: block; padding: 12px 0 12px 0; font-size: 16px; color: #262626; } ``` 메뉴 폰트 **font-weight(굵기)** 값을 변경할 수 있습니다. **proc > proc.css | css/proc/proc.css** ```css .category_side > li > a { font-weight: bold; } ``` 6\. 메뉴 폰트 선택 시 **color(색상)** 값을 변경할 수 있습니다. **css/proc/proc.css** ```css .category_side > li > a.on { color: var(--primary-default); } ```상품 리스트 스타일 변경하기
 1\. 상품리스트 이미지의 **border(라인)** 값을 변경할 수 있습니다. **css/goods/list/list\_01.css** ```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(크기)** 값을 변경할 수 있습니다. **css/goods/list/list\_01.css** ```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(색상)** 값을 변경할 수 있습니다. **css/goods/list/list\_01.css** ```css .goods_prd_item2 .goods_prd_content .goods_info_list li.price .c_price { color: #000; } ```진열타입 타이틀 변경하기
 1\. 타이틀의 **font-size(크기), color(색상), border-bottom(선), font-weight(굵기**) 값을 변경할 수 있습니다. **css/proc/proc.css** ```css ._goods_display_main h3 { position:relative; display:block; padding:40px 0px 0px 16px; font-size:24px; color:#181818; /* border-bottom:1px solid #f3f2f2; */ text-align:left; font-weight:400px; } ``` 2\. 더보기 버튼의 **background(배경), font-size(크기), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .main_more_btn2 { display: block; width: 70px; padding: 2px 8px; text-align: center; background: #000; font-size: 12px; font-weight: 600; /* border: 1px solid #9f9f9f; */ color: #fff; box-sizing: border-box; position: absolute; top: 50px; right: 0px; } ```상품후기 변경하기
 1\. 상품 후기 게시판 타이틀의 **background(배경), border-bottom(선)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(색상)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(색상)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(굵기)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(선)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .detail_write_btn { display:inline-block; width:100%; padding:10px 0 10px 0; text-align:center; color:#0CC472; font-size:15px; font-weight:bold; background:#ffffff; border:1px solid #0CC472; box-sizing:border-box; } ``` 6\. 상품평 더보기 버튼의 **text-align(정렬), color(색상), font-size(크기), background(배경)** 값을 변경할 수 있습니다. **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; } ```옵션 레이어-셀렉트박스 변경하기
 1\. 옵션 레이어의 기본 옵션 폰트의 **font-size(크기), color(색상), text-align(정렬), background(배경)** 값을 변경할 수 있습니다. **css/gd\_common.css** ```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(선)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **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; } ```옵션 레이어-항목 변경하기(폰트/버튼)
 1\. 옵션 레이어 쿠폰적용 버튼의 **background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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; } ```상품문의-리스트 변경하기
 1\. 상품문의 게시판 문의 상태표시 아이콘의 **font-size(크기), line-height(행간), background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경할 수 있습니다. **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:#0CC472; border-radius: 15px; border: 1px solid #0CC472; } ``` 2\. 문의 제목 폰트의 **font-size(크기), color(색상), line-height(행간)** 값을 변경할 수 있습니다. **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; } ```상품문의-비밀번호 인증 레이어 변경하기
 1\. 비밀번호 인증 레이어의 **height(높이), background(배경), border(선)** 값을 변경할 수 있습니다. **css/board/board.css** ```css .cite_layer .wrap { position: relative; height: 190px; background: #ffffff; border: 1px solid #555555; } ``` \ 2\. 비밀번호 인증 타이틀의 **height(높이), background(배경), border(선)** 값을 변경할 수 있습니다. **css/board/board.css** ```css .cite_layer .wrap h4 { height: 27px; padding: 13px 0 0 17px; background: #f4f4f4; color: #222222; } ``` 3\. 비밀번호 인증 레이어 확인 버튼의 **color(색상), border-radius(둥근선), background(배경)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .d_pw_confirm_btn { display:inline-block; padding:5px 15px 5px 15px; color:#ffffff; border:1px solid #0CC472; border-radius:3px; background:#0CC472; } ```상품문의-리스트 내용 변경하기(폰트/버튼)
 1\. 상품문의 내용 폰트의 **color(색상)** 값을 변경할 수 있습니다. **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(둥근선)** 값을 변경할 수 있습니다. **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; } ```상세 타이틀 및 info 레이어 폰트 변경하기
 1\. 상품 상세 타이틀의 **font-size(크기), line-height(행간), text-align(정렬)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```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(굵기)** 값을 변경할 수 있습니다. **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; } ```상품 상세 탭 변경하기
 1\. 상품 상세페이지 탭 폰트의 **color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **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(행간)** 값을 변경할 수 있습니다. **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: #0CC472; line-height: 11px; } ``` 3\. 현재위치 탭표시 라인의 **border-bottom(선)** 값을 변경할 수 있습니다. **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; } ```상품 상세 버튼 변경하기
 1\. 장바구니 버튼의 **font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **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; ```상품 상세 리스트 영역 변경하기
 1\. 상품명 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info h3 { font-size: 18px; color: #333333; word-break: break-all; } ``` 2\. 상품 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box .price { font-size: 20px; color: #333333; } ``` 3\. 상품 할인 전 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box del { color: #999999; } ``` 4\. 상품 상세페이지 리스트 제목**font-size(크기), color(색상)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **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(정렬), background(배경), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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; } ```장바구니 버튼 변경하기
 1\. 쿠폰적용 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다. **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; } ```  2\. 옵션변경 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .cart_option_modify { 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; } ```  3\. 선택상품 삭제, 주문 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .cart_all_order_btn { display:inline-block; width:100%; padding:10px 0 10px 0; text-align:center; background:#0CC472; border:1px solid #0CC472; color:#ffffff; font-weight:bold; box-sizing:border-box; font-size:14px; } ```장바구니 폰트 변경하기
 1\. 장바구니 상품명 폰트의 **font-weight(굵기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```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(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```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(굵기)** 값을 변경할 수 있습니다. **css/order/order.css** ```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:#000; font-weight:bold; } ``` 4\. 장바구니 항목 타이틀 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl dt { display: table-cell; width: 50%; font-size: 13px; color: #5e5e5e; } ``` 5\. 장바구니 총 상품금액 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl dd { display: table-cell; width: 50%; text-align: right; font-size: 15px; color: #5e5e5e; } ``` 6\. 장바구니 총 합계금액 폰트의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl.total dd { color: #000; font-size: 17px; } ```컬러 코드 변경하기
1. Matchpoint 스킨에 적용되어 있는 기본 컬러 코드는 **#FF5C00**이다. 2. \[관리자 > 디자인 > 디자인 스킨 리스트] 메뉴에 접속한다. 3. **스타일시트/CSS 변경** * 좌측 하단 폴더 트리 내 \[스타일시트/CSS]를 더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈한다. * common.css를 더블 클릭하여 *common/common.css* 파일을 연다.  4. 화면 최상단에서 `--primary-default`의 값을 원하는 포인트 컬러 코드로 변경할 수 있다. 아래는 스킨에서 자주 사용하는 값들을 변수화 하였다. 해당 값을 변경하면 일괄적으로 적용될 것이다. ```css :root { --primary-default: #ff5c00; /* 포인트 컬러 */ --primary-hover: #ff3700; /* 포인트 컬러 hover */ --secondary-default: #0080ff; /* 서브 컬러 */ --gray-dark: #797979; --gray: #ededed; --black: #000; --font-size: 14px; /* 기본 폰트 사이즈 */ --font-family: "Pretendard Variable"; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1450px; /* 화면이 최소로 작아질 수 있는 너비 */ --max-width: 1790px; /* 화면이 최대한 넓어 질 수 있는 너비 */ } ```GNB(상단 공통) 스타일 변경하기
파일명 : *css/layout/layout.css*
1. 상단 메뉴 텍스트의 스타일을 변경할 수 있다.
```css
.top_member_box > li a {
display: inline-block;
color: #4F4F4F;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.8px;
text-transform: uppercase;
}
```
2. 장바구니 담긴상품 수량 스타일을 변경할 수 있다.
```css
.cart-count {
width: 20px;
height: 20px;
background-color: var(--primary-default);
color: #fff;
display: inline-block;
border-radius: 50%;
text-align: center;
font-size: 11px;
font-style: normal;
font-weight: 500;
line-height: 20px;
transform: translate(2px, -3px);
}
```
3. 상단 메뉴의 배경색을 변경할 수 있다.
```css
#header .header_top {
background-color: #fff;
}
```
4. 카테고리 전체보기 메뉴 패널의 스타일을 변경할 수 있다.
```css
.gnb_allmenu_wrap {
display: none;
position: fixed;
top: 0;
left: 0;
width: 400px;
background: #fff;
z-index: 999;
}
```
5. 카테고리 메뉴의 스타일을 변경할 수 있다.
```css
.header_gnb .gnb_allmenu_box a,
.header_gnb .gnb_allmenu_box button {
color: var(--black);
font-size: 24px;
font-weight: 400;
height: 64px;
line-height: 64px;
width: 100%;
text-align: left;
display: block;
}
```
6. 카테고리 메뉴 마우스 오버시, 스타일을 지정할 수 있다.
```css
.header_gnb .gnb_allmenu_box li:hover,
.header_gnb .gnb_allmenu_box li.is-open > button:hover {
background-color: var(--primary-default);
}
```
7. 검색창의 스타일을 변경할 수 있다. 7-1) 검색 아이콘을 변경할 수 있다.
```css
.top-search-btn {
position: absolute;
top: 0;
right: 0;
border-radius: 8px;
width: 32px;
height: 32px;
background: #fff url(../../img/common/btn/btn_top_search.svg) no-repeat right;
text-indent: -9999em;
}
```
7-2) 검색 인풋창의 스타일을 변경할 수 있다.
```css
#header .top_search .top_text_cont .top_srarch_text {
display: block;
float: right;
width: 34px;
height: 34px;
border-radius: 8px;
box-sizing: border-box;
-moz-transition: all 0.35s;
-webkit-transition: all 0.35s;
border: 1px solid transparent;
}
```
7-3) 최근 검색어 레이아웃의 스타일을 변경할 수 있다.
```css
.recent_box {
float: left;
width: 333px;
min-height: 65px;
font-size: 12px;
text-align: center;
border-right: none 0;
vertical-align: top;
}
```
7-4) 추천상품 레이아웃의 스타일을 변경할 수 있다.
```css
.recom_box {
display: inline-block;
width: 148px;
min-height: 218px;
padding: 12px 15px 10px;
font-size: 10px;
}
```
푸터(하단 공통) 스타일 변경하기
파일명 : *css/layout/layout.css*
1. 푸터 메뉴의 스타일을 변경할 수 있다.
```css
.foot_list ul li a {
padding: 0 16px;
font-weight: 700;
}
.foot_list ul .divider {
display: inline-block;
width: 1px;
background-color: #fff;
height: 12px;
}
```
2. 푸터 정보 영역의 스타일을 변경할 수 있다.
```css
.foot_cont .foot_info {
color: #fff;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}
.content_info .cs_center p,
.content_info .bank_info p,
.content_info .notice_list li a {
color: #fff;
font-family: 'Pretendard Variable';
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}
```
웹 폰트 적용하기
1. \[관리자 페이지 > 디자인 > 디자인 스킨 리스트] 메뉴에 접속한다. 2. 좌측 하단 폴더트리 내 \[스타일시트/CSS]를 더블 클릭하여 스타일시트 리스트 중 *reset.css* 파일을 연다. 3. *reset.css* 스타일시트의 3번째 줄에 `@import url(’외부 스타일시트 경로’)`을 추가한다. ```css /* css/reset.css */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); ``` 4. `font-family`의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Pretendard variable(변경할 폰트명)으로 수정한다. (한글 폰트 파일명의 경우 " "입력) ```css /* css/common/common.css */ .:root { ... --font-family: 'Pretendard variable'; ... } ``` *common.css* `--font-family`에서 변경된 폰트는 *reset.css* 에서 하위 코드에 적용된다. ```css /* css/reset.css */ .godo * { font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; } ... body, th, td, input, select, textarea, button { font-size: var(--font-size); line-height: 1.5; font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Dotum, '돋움', sans-serif; color: #333; } ``` ⚠️ 주의) 웹 폰트 사용시 속도 저하가 발생할 수 있다.메인 우측 - 최근 본 상품 변경하기
 파일명 : *css/layout/layout.css* 최근 본 상품 영역의 스타일을 지정할 수 있다. ```css /* 최근 본 상품 목록 영역 */ .scroll_right_cont { min-width: 72px; padding: 0px; background: none; color: #333; } /* 타이틀 (예: TODAY VIEW) */ .scroll_right_cont h4 { text-align: center; font-size: 11px; font-style: normal; font-weight: 700; line-height: 12px; text-transform: uppercase; } /* 상품 마우스 오버 시 노출되는 영역 */ .scroll_right_cont .src_box { position: absolute; top: -1px; right: -1px; width: 191px; height: 72px; padding: 5px 0 0 7px; border: 1px solid #999999; background: #ffffff; text-align: left; z-index: 10; } /* 가격 스타일 */ .scroll_right_cont .src_box strong { display: block; color: var(--primary-default); } /* 탑 버튼 스타일 */ #scroll_right .btn_scroll_top { text-align: center; display: flex; width: 72px; height: 24px; padding: 4px 9px; justify-content: center; align-items: center; gap: 3px; border: 1px solid #d2d2d2; background: #fff; margin-top: 20px; font-size: 12px; font-weight: 400; line-height: normal; text-transform: uppercase; color: var(--black); } ```상품 진열 스타일 변경하기
 파일명 : *css/goods/list.css* 1. 상품 진열 영역의 공통 스타일을 변경할 수 있다. ```css /* 상품 진열 타이틀 */ .goods_list_tit h3 { color: var(--black); text-align: center; font-size: 44px; font-style: normal; font-weight: 700; line-height: normal; } /* 상단 더보기 버튼 */ .btn_goods_more .btn_goods_view_more { padding: 2px 5px 3px 5px; font-size: 14px; font-weight: 400; border: 0px solid #dbdbdb; } /* 하단 더보기 버튼 컨테이너 */ .btn_goods_down_more { width: 100%; margin: 30px 0 30px 0; border-top: 1px solid #ececec; text-align: center; } /* 하단 더보기 버튼 */ .btn_goods_down_more .btn_goods_view_down_more { display: inline-block; margin-top: -1px; padding: 5px 28px 6px 20px; font-weight: bold; border: 1px solid #dbdbdb; border-top: none 0; background: url(../../img/icon/goods_icon/icon_down_more.png) no-repeat right center; background-color: #ffffff; } ``` 2. 상품 아이템의 스타일을 변경할 수 있다. ```css /* 브랜드명 */ .item_tit_box .item_brand { display: block; color: var(--primary-default); font-size: 12px; line-height: 18px; font-weight: normal; margin-bottom: 4px; } /* 상품명 */ .item_tit_box .item_name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; padding: 0; font-size: 16px; text-overflow: ellipsis; font-weight: normal; overflow: hidden; line-height: 22px; } /* 가격 */ .item_money_box .item_price { padding: 0px; font-size: 16px; color: #000000; font-weight: bold; } ```상품 상세 페이지 - 상단 영역 변경하기
파일명 : *css/goods/goods.css*
1. 상품 상세 페이지에서 상품명과 상품 항목 레이블의 스타일을 지정할 수 있다.
```css
/* 상품 상세 - 상품명 */
.item_detail_tit h3 {
width: 405px;
font-size: 18px;
word-break: break-all;
}
/* 항목 레이블 (제목) */
.item_detail_list dt {
float: left;
width: 80px;
margin: 0 10px 0 0;
color: #888888;
font-weight: normal;
word-wrap: break-word;
}
```
2. \[공유], \[조건별배송] 버튼의 스타일을 지정할 수 있다.
```css
.btn_gray_list a, .btn_gray_list button {
display: inline-block;
padding: 0 0 0 11px;
border: 1px solid #999;
vertical-align: middle;
}
```
3. 총 합계 금액의 스타일을 지정할 수 있다.
```css
.item_tatal_box .total_amount dd {
color: var(--primary-default);
}
.item_tatal_box .total_amount dd strong {
font-size: 20px;
font-size: 25px;
}
```
4. \[장바구니], \[찜하기], \[바로 구매] 버튼의 스타일을 지정할 수 있다.
```css
/* 장바구니, 찜하기 버튼 */
.btn_add_cart, .btn_add_wish {
display: inline-block;
width: 152px;
height: 52px;
padding: 0 10px 0 10px;
color: #3e3d3c;
font-size: 16px;
border: 1px solid #cccccc;
background: #ffffff;
text-align: center;
}
/* 바로구매 버튼 */
.btn_add_order, .btn_add_order_related, .btn_add_cart_related {
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 var(--primary-default);
background: var(--primary-default);
text-align: center;
font-weight: 400;
}
```
상품 상세 페이지 - 탭 스타일 변경하기
파일명 : `css/goods/goods.css` 탭 메뉴의 스타일을 지정할 수 있다.
```css
/* 탭 메뉴 아이템 */
.item_goods_tab li a {
display: block;
margin: 0 0 0 -1px;
padding: 10px 0 12px 0;
color: #999999;
font-size: var(--font-size);
border: solid #dadada;
border-width: 1px 1px 0;
background: #ffffff;
}
/* 선택된 탭 메뉴 아이템 */
.item_goods_tab li.on a {
padding-top: 18px;
margin-top: 8px;
color: #333333;
font-weight: bold;
border-bottom: 2px solid #ffffff;
}
/* 탭 메뉴 아이템 텍스트 강조 시 (상품후기, 문의 몇건인지 표시할 때 사용) */
.item_goods_tab li a strong {
color: var(--primary-default);
}
```
장바구니 페이지 스타일 변경하기
파일명 : *css/order/order.css*
1. 장바구니 타이틀의 스타일을 지정할 수 있다. (주문서 공통)
```css
/* 상품 상세 - 상품명 */
.order_wrap .order_tit h2 {
float: left;
font-size: 28px;
color: #222222;
}
```
2. 브레드크럼(주문 단계)의 스타일을 변경할 수 있다. (주문서 공통)
```css
.order_wrap .order_tit ol li {
float: left;
font-size: 14px;
color: #d1d1d1;
}
/* 현재 단계를 나타내는 스타일 */
.order_wrap .order_tit .page_on {
color: #000;
font-weight: bold;
}
```
3. 장바구니에 담긴 상품 목록 테이블의 스타일을 변경할 수 있다. (주문서 공통)
```css
.order_table_type table {
width:100%;
border:0;
border-spacing:0;
border-collapse:collapse;
text-align:center;
}
.order_table_type th {
padding:9px 10px 10px 10px;
border-top:1px solid #999999;
border-bottom:1px solid #dbdbdb;
background:#f7f7f7;
}
.order_table_type td {
height: 31px;
padding: 15px 10px 14px 10px;
color: #777777;
border-bottom: 1px solid #dbdbdb;
background:#ffffff;
}
```
4. \[선택 상품 주문], \[전체 상품 주문] 버튼의 스타일을 변경할 수 있다.
```css
/* 선택 상품 주문 */
.btn_order_choice_buy {
min-width: 190px;
height: 55px;
padding: 0 20px 0 20px;
color: #3e3d3c;
font-weight: bold;
font-size: 14px;
border: 1px solid #cccccc;
background: #fff;
cursor: pointer;
}
/* 전체 상품 주문 */
.btn_order_whole_buy {
min-width: 190px;
height: 55px;
padding: 0 20px 0 20px;
color: #ffffff;
font-size: 14px;
border: 1px solid var(--primary-default);
background: var(--primary-default);
cursor: pointer;
font-weight: bold;
}
```
주문서 작성/결제 화면 변경하기
파일명 : *css/order/order.css*
1. 서브 타이틀, 설명 텍스트 및 최종 결제 금액 등 스타일을 변경할 수 있다.
```css
/* 서브 타이틀 */
.order_zone_tit h4 {
font-size: 16px;
}
/* 설명 */
.order_zone_tit span {
padding: 0 0 0 10px;
color: #777777;
font-size: 12px;
font-weight: normal;
}
/* 결제 최종 금액 */
.payment_final_total dd {
display: inline-block;
font-size: 30px;
color: var(--primary-default);
}
```
2. \[결제하기]버튼의 스타일을 변경할 수 있다.
```css
.btn_order_buy {
display: inline-block;
width: 300px;
height: 61px;
line-height: 59px;
color: #fff;
font-size: 20px;
border: 1px solid var(--primary-default);
background: var(--primary-default);
text-align: center;
}
```
컬러 코드 변경하기
1. Matchpoint 스킨에 적용되어 있는 기본 컬러 코드는 **#FF5C00**이다. 2. \[관리자 > 모바일샵 > 디자인 스킨 리스트] 메뉴에 접속한다. 3. **스타일시트/CSS 변경** * 좌측 하단 폴더 트리 내 \[스타일시트/CSS]를 더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈한다. * common.css를 더블 클릭하여 *gd\_common.css* 파일을 연다. 4. 화면 최상단에서 `--primary-default`의 값을 원하는 포인트 컬러 코드로 변경할 수 있다. 아래는 스킨에서 자주 사용하는 값들을 변수화 하였다. 해당 값을 변경하면 일괄적으로 적용될 것이다. ```css :root { --primary-default: #ff5c00; --primary-hover: #ff3700; --secondary-default: #ff5810; --gray: #ededed; --black: #000; --font-size: 12px; --font-family: 'Pretendard variable'; --font-regular: 400; --font-medium: 500; --font-bold: 700; } ```GNB(상단 공통) 스타일 변경하기
파일명 : *css/gd\_layout.css*
1. 상단 레이아웃의 스타일을 변경할 수 있다.
```css
#header_wrap header .header_box {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 12px;
border-bottom: 1px solid #000;
height: 62px;
}
```
2. 햄버거 메뉴 아이콘을 변경할 수 있다.
```css
#header_wrap header .header_box .side_menu span {
display: inline-block;
width: 20px;
height: 15px;
font-size: 0;
background: url(../img/icon/icon_menu.png) no-repeat center;
background-size: 100%;
vertical-align: top;
}
```
3. 검색 아이콘을 변경할 수 있다.
```css
#header_wrap header .header_box .top_search span {
display: inline-block;
width: 18px;
height: 17px;
font-size: 0;
background: url(../img/icon/icon_search.png) no-repeat center;
background-size: 100%;
vertical-align: top;
}
```
4. 마이페이지 아이콘을 변경할 수 있다.
```css
#header_wrap header .header_box .mypage span {
display: inline-block;
width: 21px;
height: 21px;
font-size: 0;
background: url(../img/icon/icon_mypage.png) no-repeat center;
background-size: 100%;
vertical-align: top;
}
```
5. 장바구니 아이콘을 변경할 수 있다.
```css
/* 장바구니 아이콘 */
#header_wrap header .header_box .cart span {
display: inline-block;
width: 20px;
height: 21px;
font-size: 0;
background: url(../img/icon/icon_cart.png) no-repeat center;
background-size: 100%;
vertical-align: top;
}
/* 장바구니 수량 정보 */
#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;
}
```
사이드 메뉴 스타일 변경하기
파일명 : *css/gd\_layout.css*
1. 언어 타이틀 스타일을 수정할 수 있다.
```css
.nav_language .tit {
display: table-cell;
width: 30%;
font-size: 15px;
padding: 13px 15px 13px 15px;
color: #262626;
font-weight: bold;
box-sizing: border-box;
}
```
2. \[Q\&A], \[최근본상품], \[찜리스트] 아이콘과 텍스트 스타일을 변경할 수 있다.
```css
/* 텍스트 */
.nav_link ul li a {
display: block;
padding: 36px 0 0 0;
font-size: 13px;
color: #888;
}
/* Q&A */
.nav_link ul li:nth-child(1) a {
background: url(../img/icon/icon_qna.svg) no-repeat center 3px;
background-size: 33px 30px;
}
/* 최근본상품 */
.nav_link ul li:nth-child(2) a {
background: url(../img/icon/icon_prd_latest.svg) no-repeat center 4px;
background-size: 33px 30px;
}
/* 찜리스트 */
.nav_link ul li:nth-child(3) a {
background: url(../img/icon/icon_lnb_heart.svg) no-repeat center 4px;
background-size: 33px 30px;
}
```
3. \[카테고리], \[브랜드] 버튼의 스타일을 변경할 수 있다.
```css
/* 버튼 기본 스타일 */
.nav_tabmenu_box .nav_tabmenu li span {
display: block;
padding: 10px 0 10px 0;
background: #e8e8e8;
color: #acacac;
}
/* 활성화된 상태일 때 */
.nav_tabmenu_box .nav_tabmenu li.on span {
background: var(--primary-default);
color: #fff;
font-weight: bold;
}
```
4. 카테고리 트리 메뉴 아이템의 스타일을 변경할 수 있다.
```css
.category_side > li a {
position: relative;
display: block;
padding: 12px 0 12px 0;
font-size: 16px;
color: #262626;
}
```
5. \[커뮤니티] 타이틀과 공통 게시판 링크 스타일을 변경할 수 있다.
```css
/* 커뮤니티 타이틀 */
.nav_community_box .comm_tit {
padding: 10px 0 10px 10px;
margin: 0 10px 0 6px;
font-size: 18px;
color: #272727;
font-weight: bold;
border-bottom: 0px solid #000000;
}
/* 공통 게시판 링크 */
.nav_community_box .board_cate li a {
display: block;
padding: 6px 0;
font-size: 14px;
color: #1c1c1c;
}
```
6. 사이드 메뉴 닫기 버튼의 스타일을 지정할 수 있다.
```css
#wrap nav .left_close {
position: fixed;
top: 20px;
left: 310px;
width: 29px;
height: 29px;
background: url(../img/icon/icon_left_x.png) no-repeat center;
background-size: 100%;
z-index: 1002;
}
```
푸터(하단 공통) 스타일 변경하기
파일명 : *css/gd\_layout.css*
1. 푸터 메뉴의 스타일을 변경할 수 있다.
```css
#footer footer .ft_menu li a {
display: block;
font-size: 12px;
font-weight: 700;
}
```
2. \[고객센터], \[은행계좌 안내] 타이틀의 스타일을 변경할 수 있다.
```css
.main_info dl dt > span {
font-weight: 700;
font-size: 12px;
}
```
4. 푸터 정보 영역과 카피라이트 텍스트의 스타일을 변경할 수 있습니다.
```css
/* 푸터 정보 */
#footer footer .ft_info2_box .ft_address {
padding: 0px;
text-align: left;
font-size: 12px;
word-break: keep-all;
}
/* 카피라이트 */
#footer footer .ft_copy {
font-size: 9px;
text-align: left;
font-style: normal;
margin-block: 24px;
}
```
상품 진열 타이틀 변경하기
1. 상품 진열 타이틀의 스타일을 수정할 수 있다.
```css
/* css/proc/proc.css */
._goods_display_main h3 {
position: relative;
display: block;
padding: 40px 0px 0px 16px;
font-size: 32px;
color: #181818;
text-align: left;
font-weight: 400;
}
```
2. 더보기 버튼 스타일을 수정할 수 있다.
```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;
}
/* 상단 더보기 버튼 */
.main_more_btn2 {
display: block;
width: 70px;
padding: 2px 8px;
text-align: center;
font-size: 12px;
font-weight: 600;
color: #9e9e9e;
box-sizing: border-box;
position: absolute;
top: 48px;
right: 0px;
}
```
상품 정보 스타일 변경하기
파일명 : *css/goods/goods.css*
1. 브랜드 스타일을 변경할 수 있다.
```css
.goods_view .detail_info .detail_info_top .brand {
padding: 0 0 2px 0;
color: #666;
font-size: 13px;
}
```
2. 상품명 스타일을 변경할 수 있다.
```css
.goods_view .detail_info h3 {
font-size: 18px;
color: #333333;
word-break: break-all;
}
```
3. 가격 정보 스타일을 변경할 수 있다.
```css
.goods_view .detail_info .detail_info_top .price_box .price {
font-size: 20px;
color: #333333;
}
```
4. \[공유하기], \[찜하기] 버튼 스타일을 수정할 수 있다.
```css
/* 공유하기 버튼 */
.goods_view .share_btn_box ul li.d_share button {
padding-left: 25px;
background: url(../../img/icon/icon_share.png) no-repeat left center;
background-size: 19px;
}
/* 찜하기 버튼 */
.goods_view .share_btn_box ul li.d_wish button {
padding-left: 25px;
background: url(../../img/icon/icon_heart.png) no-repeat left center;
background-size: 19px;
}
```
상품 상세 - 탭 메뉴 스타일 변경하기
파일명 : *css/goods/goods.css* 탭 메뉴 박스 스타일을 수정할 수 있다.
```css
.goods_view .detail_btm_tab_menu_box {
position: relative;
width: 100%;
height: 60px;
border-top: 10px solid #f9f9f9;
border-bottom: 1px solid #e2e2e2;
box-sizing: border-box;
}
/* 탭이 선택되어졌을 때 */
.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;
}
```
상품 상세 - 기본 정보 탭 컨텐츠 스타일 변경하기
파일명 : *css/goods/goods.css* 서브 타이틀과 디스크립션의 스타일을 수정할 수 있다.
```css
/* 서브 타이틀 */
.openblock_content dl dt {
padding: 5px 5px 5px 5px;
white-space: normal;
font-weight: bold;
color: #111111;
}
/* 디스크립션 */
.openblock_content dl dd {
padding: 5px 5px 5px 5px;
color: #555555;
vertical-align: top;
}
```
상품 상세 - 상품후기 탭 컨텐츠 스타일 변경하기
파일명 : *css/goods/goods.css*
1. 평가, 리뷰수 정보의 스타일을 변경할 수 있다.
```css
/* 평가, 리뷰수 라벨 */
.plus_review_container .plus_review_top_box dl dt {
display: table-cell;
font-size: 13px;
color: #606060;
vertical-align: middle;
}
/* 평가수, 리뷰수 숫자 */
.plus_review_container .plus_review_top_box dl dd {
display: table-cell;
padding-inline: 4px 8px;
font-weight: bold;
font-size: 14px;
color: var(--primary-default);
vertical-align: middle;
}
```
2. 플러스 리뷰 > \[리뷰등록], \[나와 비슷한 리뷰 보기] 버튼 스타일을 변경할 수 있다.
```css
/* css/gd_plus_review.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;
}
/* 나와 비슷한 리뷰 보기 버튼 */
.plus_review_add_search > a {
font-size: 13px;
font-weight: bold;
color: #000;
line-height: 38px;
text-align: center;
display: block;
border: #e2e2e2 1px solid;
background: #fff;
}
```
3. \[후기 작성], \[더보기 n/n] 버튼 스타일을 변경할 수 있다.
```css
/* css/gd_button.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;
}
/* 더보기 n/n 버튼 */
.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;
}
```
장바구니 페이지 스타일 변경하기
1. 장바구니 목록에서 삭제 버튼의 스타일을 수정할 수 있다.
```css
/* css/gd_button.css */
.cart_onedel_btn {
width: 24px;
height: 24px;
font-size: 0;
background: url(../img/icon/icon_x3.png) no-repeat center;
background-size: 12px 12px;
border: none;
}
```
2. 상품명, 주문수량, 가격정보 등의 스타일을 수정할 수 있다.
```css
/* css/order/order.css */
/* 텍스트 일반 */
.cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody p {
font-size: 12px;
line-height: 16px;
color: #9d9d9d;
}
/* 상품명 */
.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;
}
/* 가격 */
.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: #000;
font-weight: bold;
}
```
3. 결제 금액 정보에 대한 스타일을 변경할 수 있다.
```css
/* css/order/order.css */
/* 항목 타이틀 */
.cart .my_buy dl dt {
display: table-cell;
width: 50%;
font-size: 13px;
color: #5e5e5e;
}
/* 항목에 대한 값 */
.cart .my_buy dl dd {
display: table-cell;
width: 50%;
text-align: right;
font-size: 15px;
color: #5e5e5e;
}
/* 총 합계 금액 */
.cart .my_buy dl.total dd {
color: #000;
font-size: 17px;
}
```
4. \[선택상품 삭제], \[선택상품 주문], \[전체주문] 버튼의 스타일을 수정할 수 있다.
```css
/* css/gd_button.css */
/* 선택상품 삭제, 선택상품 주문 버튼 */
.cart_select_order_btn,
.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;
}
/* 전체주문 버튼 */
.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;
}
```
주문서 페이지 스타일 변경하기
1. 서브 타이틀의 스타일을 변경할 수 있다.
```css
/* css/order/order.css */
.order .order_tit {
border-top: 10px solid #f9f9f9;
color: #333333;
font-size: 16px;
line-height: 36px;
padding: 20px 16px 0px 16px;
}
```
2. 배송정보 버튼바 스타일을 변경할 수 있다.
```css
/* css/order/order.css */
/* 버튼 스타일 */
.order .order_box .delivery_box .tab_menu ul li {
display: table-cell;
width: 33.3%;
border: 1px solid #c7c7c7;
border-left: none;
background: #ffffff;
vertical-align: middle;
}
/* 텍스트 스타일 */
.order .order_box .delivery_box .tab_menu ul li a {
display: block;
padding: 10px 7px;
color: #333333;
text-align: center;
border-left: none;
box-sizing: border-box;
}
/* 선택되었을 때 버튼 스타일 */
.order .order_box .delivery_box .tab_menu ul li.active {
background: #000;
}
/* 선택되었을때 텍스트 스타일 */
.order .order_box .delivery_box .tab_menu ul li.active a {
color: #fff;
font-weight: bold;
}
```
3. \[우편번호], \[쿠폰 조회 및 적용], \[결제하기] 버튼 스타일을 수정할 수 있다.
```css
/* css/gd_button.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;
}
/* 쿠폰 조회 및 적용 버튼 */
.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;
}
/* 결제하기 버튼 */
.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;
}
```
컬러 코드 변경하기
1. Honglife 스킨에 적용되어 있는 기본 컬러 코드는 **#c62323**이다. 2. \[관리자 > 디자인 > 디자인 스킨 리스트] 메뉴에 접속한다. 3. **스타일시트/CSS 변경** * 좌측 하단 폴더 트리 내 \[스타일시트/CSS]를 더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈한다. * common.css를 더블 클릭하여 *common/common.css* 파일을 연다.  4. 화면 최상단에서 `--primary-default`의 값을 원하는 포인트 컬러 코드로 변경할 수 있다. 아래는 스킨에서 자주 사용하는 값들을 변수화 하였다. 해당 값을 변경하면 일괄적으로 적용될 것이다. ```css :root { --primary-default: #c62323; /* 포인트 컬러 */ --primary-hover: #990416; /* 포인트 컬러 hover */ --secondary-default: #264642; /* 서브 컬러 */ --neutrals-gray: #f5f5f5; --neutrals-dark: #000; --font-size: 14px; /* 기본 폰트 사이즈 */ --font-family: "Pretendard Variable"; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1800px; /* 화면이 최소로 작아질 수 있는 너비 */ --max-width: 1920px; /* 화면이 최대한 넓어 질 수 있는 너비 */ --header-height: 56px; } ```HEADER 스타일 변경하기
 파일명: css/layout/layout.css 1. 헤더의 높이 값을 변경 할 수 있다. ``` // css/common/common.css --header-height: 56px; // 높이 값 변경 ``` 2. GNB 메뉴 스타일을 변경할 수 있다. ``` #header .header__gnb a { font-size: calc(var(--font-size) + 1px); // 폰트 사이즈 변경 font-weight: var(--font-medium); color: #fff; // 폰트 색 변경 } ``` 3. 사용자 메뉴 (LOGIN, JOIN, MYPAGE, CART) 스타일을 변경할 수 있다. ``` .top_member_box > li a { display: inline-block; color: #fff; // font 색 변경 text-transform: uppercase; // 영문 대문자로 표시 } ``` 4. CART 숫자 영역 스타일을 변경할 수 있다. ``` .top_member_box > li strong { display: inline-flex; justify-content: center; align-items: center; background-color: var(--primary-default); // 배경색 변경 color: #fff; // 숫자 색 변경 block-size: 20px; // 높이 변경 min-inline-size: 20px; // 너비 변경 margin-inline-start: 4px; font-weight: var(--font-medium); font-size: calc(var(--font-size) - 3px); // 폰트 사이드 변경 border-radius: 10px; } ``` 5. 스크롤시 헤더 영역 배경색을 변경 할 수 있다. (서브 페이지에서는 기본 배경 색 --primary-hover) ``` 파일 명: css/main/main.css ``` ```` ``` .body-main .is-fixed #header { background-color: var(--primary-hover); } ``` ````푸터(하단 공통) 스타일 변경하기
 파일명 : *css/layout/layout.css* 1. 푸터 메뉴의 스타일을 변경할 수 있다. ```css .foot_list ul li a { padding: 0 16px; font-weight: 700; } .foot_list ul .divider { display: inline-block; width: 1px; background-color: #fff; height: 12px; } ``` 2. 푸터 정보 영역의 스타일을 변경할 수 있다. ```css .foot_cont .foot_info { color: #fff; font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; } .content_info .cs_center p, .content_info .bank_info p, .content_info .notice_list li a { color: #fff; font-family: 'Pretendard Variable'; font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; } ```웹 폰트 적용하기
1. \[관리자 페이지 > 디자인 > 디자인 스킨 리스트] 메뉴에 접속한다. 2. 좌측 하단 폴더트리 내 \[스타일시트/CSS]를 더블 클릭하여 스타일시트 리스트 중 *reset.css* 파일을 연다. 3. *reset.css* 스타일시트의 3번째 줄에 `@import url(’외부 스타일시트 경로’)`을 추가한다. ```css /* css/reset.css */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); ``` 4. `font-family`의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Pretendard variable(변경할 폰트명)으로 수정한다. (한글 폰트 파일명의 경우 " "입력) ```css /* css/common/common.css */ .:root { ... --font-family: 'Pretendard variable'; ... } ``` *common.css* `--font-family`에서 변경된 폰트는 *reset.css* 에서 하위 코드에 적용된다. ```css /* css/reset.css */ .godo * { font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; } ... body, th, td, input, select, textarea, button { font-size: var(--font-size); line-height: 1.5; font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Dotum, '돋움', sans-serif; color: #333; } ``` ⚠️ 주의) 웹 폰트 사용시 속도 저하가 발생할 수 있다.메인 우측 - 최근 본 상품 변경하기
 파일명 : *css/layout/layout.css* 최근 본 상품 영역의 스타일을 지정할 수 있다. ```css /* 최근 본 상품 목록 영역 */ .scroll_right_cont { min-width: 72px; padding: 0px; background: none; color: #333; } /* 타이틀 (예: TODAY VIEW) */ .scroll_right_cont h4 { text-align: center; font-size: 11px; font-style: normal; font-weight: 700; line-height: 12px; text-transform: uppercase; } /* 상품 마우스 오버 시 노출되는 영역 */ .scroll_right_cont .src_box { position: absolute; top: -1px; right: -1px; width: 191px; height: 72px; padding: 5px 0 0 7px; border: 1px solid #999999; background: #ffffff; text-align: left; z-index: 10; } /* 가격 스타일 */ .scroll_right_cont .src_box strong { display: block; color: var(--primary-default); } /* 탑 버튼 스타일 */ #scroll_right .btn_scroll_top { text-align: center; display: flex; width: 72px; height: 24px; padding: 4px 9px; justify-content: center; align-items: center; gap: 3px; border: 1px solid #d2d2d2; background: #fff; margin-top: 20px; font-size: 12px; font-weight: 400; line-height: normal; text-transform: uppercase; color: var(--black); } ```상품 진열 스타일 변경하기
 파일명 : *css/main/main.css* 1. 상품 진열 영역의 공통 스타일을 변경할 수 있다. ```css /* 상품 진열 타이틀 */ .goods_list_tit h3 { text-align: center; font-size: 42px; font-weight: var(--font-bold); line-height: 50px; } /* 상단 더보기 버튼 */ .main_content .btn_goods_view_more { display: inline-flex; align-items: center; justify-content: center; block-size: 24px; inline-size: 77px; border-radius: 12px; color: #fff; background-color: #343434; font-size: var(--font-size); } /* css/goods/list.css */ /* 하단 더보기 버튼 컨테이너 */ .btn_goods_down_more { width: 100%; margin: 30px 0 30px 0; border-top: 1px solid #ececec; text-align: center; } /* 하단 더보기 버튼 */ .btn_goods_down_more .btn_goods_view_down_more { display: inline-block; margin-top: -1px; padding: 5px 28px 6px 20px; font-weight: bold; border: 1px solid #dbdbdb; border-top: none 0; background: url(../../img/icon/goods_icon/icon_down_more.png) no-repeat right center; background-color: #ffffff; } ``` 2. 상품 아이템의 스타일을 변경할 수 있다. ```css /* 브랜드명 */ .item_tit_box .item_brand { display: block; color: var(--primary-default); font-size: 12px; line-height: 18px; font-weight: normal; margin-bottom: 4px; } /* 상품명 */ .item_tit_box .item_name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; padding: 0; font-size: 16px; text-overflow: ellipsis; font-weight: normal; overflow: hidden; line-height: 22px; } /* 가격 */ .item_money_box .item_price { padding: 0px; font-size: 16px; color: #000000; font-weight: bold; } ```상품 상세 페이지 - 상단 영역 변경하기
 파일명 : *css/goods/goods.css* 1. 상품 상세 페이지에서 상품명과 상품 항목 레이블의 스타일을 지정할 수 있다. ```css /* 상품 상세 - 상품명 */ .item_detail_tit h3 { width: 405px; font-size: 18px; word-break: break-all; } /* 항목 레이블 (제목) */ .item_detail_list dt { float: left; width: 80px; margin: 0 10px 0 0; color: #888888; font-weight: normal; word-wrap: break-word; } ``` 2. \[공유], \[조건별배송] 버튼의 스타일을 지정할 수 있다. ```css .btn_gray_list a, .btn_gray_list button { display: inline-block; padding: 0 0 0 11px; border: 1px solid #999; vertical-align: middle; } ``` 3. 총 합계 금액의 스타일을 지정할 수 있다. ```css .item_tatal_box .total_amount dd { color: var(--primary-default); } .item_tatal_box .total_amount dd strong { font-size: 20px; font-size: 25px; } ``` 4. \[장바구니], \[찜하기], \[바로 구매] 버튼의 스타일을 지정할 수 있다. ```css /* 장바구니, 찜하기 버튼 */ .btn_add_cart, .btn_add_wish { display: inline-block; width: 152px; height: 52px; padding: 0 10px 0 10px; color: #3e3d3c; font-size: 16px; border: 1px solid #cccccc; background: #ffffff; text-align: center; } /* 바로구매 버튼 */ .btn_add_order, .btn_add_order_related, .btn_add_cart_related { 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 var(--primary-default); background: var(--primary-default); text-align: center; font-weight: 400; } ```상품 상세 페이지 - 탭 스타일 변경하기
파일명 : `css/goods/goods.css` 탭 메뉴의 스타일을 지정할 수 있다.
```css
/* 탭 메뉴 아이템 */
.item_goods_tab li a {
display: block;
margin: 0 0 0 -1px;
padding: 10px 0 12px 0;
color: #999999;
font-size: var(--font-size);
border: solid #dadada;
border-width: 1px 1px 0;
background: #ffffff;
}
/* 선택된 탭 메뉴 아이템 */
.item_goods_tab li.on a {
padding-top: 18px;
margin-top: 8px;
color: #333333;
font-weight: bold;
border-bottom: 2px solid #ffffff;
}
/* 탭 메뉴 아이템 텍스트 강조 시 (상품후기, 문의 몇건인지 표시할 때 사용) */
.item_goods_tab li a strong {
color: var(--primary-default);
}
```
장바구니 페이지 스타일 변경하기
 파일명 : *css/order/order.css* 1. 장바구니 타이틀의 스타일을 지정할 수 있다. (주문서 공통) ```css /* 상품 상세 - 상품명 */ .order_wrap .order_tit h2 { float: left; font-size: 28px; color: #222222; } ``` 2. 브레드크럼(주문 단계)의 스타일을 변경할 수 있다. (주문서 공통) ```css .order_wrap .order_tit ol li { float: left; font-size: 14px; color: #d1d1d1; } /* 현재 단계를 나타내는 스타일 */ .order_wrap .order_tit .page_on { color: #000; font-weight: bold; } ``` 3. 장바구니에 담긴 상품 목록 테이블의 스타일을 변경할 수 있다. (주문서 공통) ```css .order_table_type table { width:100%; border:0; border-spacing:0; border-collapse:collapse; text-align:center; } .order_table_type th { padding:9px 10px 10px 10px; border-top:1px solid #999999; border-bottom:1px solid #dbdbdb; background:#f7f7f7; } .order_table_type td { height: 31px; padding: 15px 10px 14px 10px; color: #777777; border-bottom: 1px solid #dbdbdb; background:#ffffff; } ``` 4. \[선택 상품 주문], \[전체 상품 주문] 버튼의 스타일을 변경할 수 있다. ```css /* 선택 상품 주문 */ .btn_order_choice_buy { min-width: 190px; height: 55px; padding: 0 20px 0 20px; color: #3e3d3c; font-weight: bold; font-size: 14px; border: 1px solid #cccccc; background: #fff; cursor: pointer; } /* 전체 상품 주문 */ .btn_order_whole_buy { min-width: 190px; height: 55px; padding: 0 20px 0 20px; color: #ffffff; font-size: 14px; border: 1px solid var(--primary-default); background: var(--primary-default); cursor: pointer; font-weight: bold; } ```주문서 작성/결제 화면 변경하기
 파일명 : *css/order/order.css* 1. 서브 타이틀, 설명 텍스트 및 최종 결제 금액 등 스타일을 변경할 수 있다. ```css /* 서브 타이틀 */ .order_zone_tit h4 { font-size: 16px; } /* 설명 */ .order_zone_tit span { padding: 0 0 0 10px; color: #777777; font-size: 12px; font-weight: normal; } /* 결제 최종 금액 */ .payment_final_total dd { display: inline-block; font-size: 30px; color: var(--primary-default); } ``` 2. \[결제하기]버튼의 스타일을 변경할 수 있다. ```css .btn_order_buy { display: inline-block; width: 300px; height: 61px; line-height: 59px; color: #fff; font-size: 20px; border: 1px solid var(--primary-default); background: var(--primary-default); text-align: center; } ```컬러 코드 변경하기
1. Honglife 스킨에 적용되어 있는 기본 컬러 코드는 **#c62323**이다. 2. \[관리자 > 모바일샵 > 디자인 스킨 리스트] 메뉴에 접속한다. 3. **스타일시트/CSS 변경** * 좌측 하단 폴더 트리 내 \[스타일시트/CSS]를 더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈한다. * common.css를 더블 클릭하여 *gd\_common.css* 파일을 연다. 4. 화면 최상단에서 `--primary-default`의 값을 원하는 포인트 컬러 코드로 변경할 수 있다. 아래는 스킨에서 자주 사용하는 값들을 변수화 하였다. 해당 값을 변경하면 일괄적으로 적용될 것이다. ```css :root { --primary-default: #c62323; /* 포인트 컬러 */ --primary-hover: #990416; /* 포인트 컬러 hover */ --secondary-default: #264642; /* 서브 컬러 */ --neutrals-gray: #f5f5f5; --neutrals-dark: #000; --font-size: 12px; /* 기본 폰트 사이즈 */ --font-family: "Pretendard Variable"; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; } ```HEADER 스타일 변경하기
 파일명 : css/gd\_layout.css 1. 상단 레이아웃의 스타일을 변경할 수 있다. ``` #header_wrap header { width: 100%; min-width: 320px; background: #990416; // 배경색 변경 z-index: 300; } ``` 2. 햄버거 메뉴 아이콘을 변경할 수 있다. ``` /* 햄버거 메뉴, 검색아이콘, 마이페이지, 장바구니 아이콘 공통 스타일 */ #header_wrap header .header_box .side_menu span, #header_wrap header .header_box .top_search span, #header_wrap header .header_box .mypage span, #header_wrap header .header_box .cart span { display: inline-block; width: 24px; // 너비 height: 24px; // 높이 font-size: 0; background-size: 100%; background-repeat: no-repeat; background-position: center; vertical-align: top; } #header_wrap header .header_box .side_menu span { background-image: url('../img/icon/icon_menu.png'); // 햄버거 메뉴 아이콘 이미지 변경 } ``` 3. 검색 아이콘 이미지를 변경할 수 있다. ``` #header_wrap header .header_box .top_search span { background-image: url('../img/icon/icon_search.png'); } ``` 4. 마이페이지 이미지를 변경할 수 있다. ``` #header_wrap header .header_box .mypage span { background-image: url('../img/icon/icon_mypage.png'); } ``` 5. 장바구니 이미지를 변경할 수 있다. ``` #header_wrap header .header_box .cart span { background-image: url('../img/icon/icon_cart.png'); } ``` 6. 장바구니 카운트 스타일을 변경할 수 있다. ```` #header_wrap header .header_box .cart_count { position: absolute; top: -6px; right: -8px; display: flex; align-items: center; justify-content: center; padding: 0px 4px; min-width: 10px; border-radius: 10px; color: #fff; background: var(--primary-default); font-size: 10px; }HEADER 스타일 변경하기
파일명 : css/gd_layout.css 1. 상단 레이아웃의 스타일을 변경할 수 있다. ``` #header_wrap header { width: 100%; min-width: 320px; background: #990416; // 배경색 변경 z-index: 300; } ``` 2. 햄버거 메뉴 아이콘을 변경할 수 있다. ``` /* 햄버거 메뉴, 검색아이콘, 마이페이지, 장바구니 아이콘 공통 스타일 */ #header_wrap header .header_box .side_menu span, #header_wrap header .header_box .top_search span, #header_wrap header .header_box .mypage span, #header_wrap header .header_box .cart span { display: inline-block; width: 24px; // 너비 height: 24px; // 높이 font-size: 0; background-size: 100%; background-repeat: no-repeat; background-position: center; vertical-align: top; } #header_wrap header .header_box .side_menu span { background-image: url('../img/icon/icon_menu.png'); // 햄버거 메뉴 아이콘 이미지 변경 } ``` 3. 검색 아이콘 이미지를 변경할 수 있다. ``` #header_wrap header .header_box .top_search span { background-image: url('../img/icon/icon_search.png'); } ``` 4. 마이페이지 이미지를 변경할 수 있다. ``` #header_wrap header .header_box .mypage span { background-image: url('../img/icon/icon_mypage.png'); } ``` 5. 장바구니 이미지를 변경할 수 있다. ``` #header_wrap header .header_box .cart span { background-image: url('../img/icon/icon_cart.png'); } ``` 6. 장바구니 카운트 스타일을 변경할 수 있다. ``` #header_wrap header .header_box .cart_count { position: absolute; top: -6px; right: -8px; display: flex; align-items: center; justify-content: center; padding: 0px 4px; min-width: 10px; border-radius: 10px; color: #fff; background: var(--primary-default); font-size: 10px; } ```사이드 메뉴 스타일 변경하기
 파일명 : *css/gd\_layout.css* 1. 언어 타이틀 스타일을 수정할 수 있다. ```css .nav_language .tit { display: table-cell; width: 30%; font-size: 15px; padding: 13px 15px 13px 15px; color: #262626; font-weight: bold; box-sizing: border-box; } ``` 2. \[Q\&A], \[최근본상품], \[찜리스트] 아이콘과 텍스트 스타일을 변경할 수 있다. ```css /* 텍스트 */ .nav_link ul li a { display: block; padding: 36px 0 0 0; font-size: 13px; color: #888; } /* Q&A */ .nav_link ul li:nth-child(1) a { background: url(../img/icon/icon_qna.svg) no-repeat center 3px; background-size: 33px 30px; } /* 최근본상품 */ .nav_link ul li:nth-child(2) a { background: url(../img/icon/icon_prd_latest.svg) no-repeat center 4px; background-size: 33px 30px; } /* 찜리스트 */ .nav_link ul li:nth-child(3) a { background: url(../img/icon/icon_lnb_heart.svg) no-repeat center 4px; background-size: 33px 30px; } ``` 3. \[카테고리], \[브랜드] 버튼의 스타일을 변경할 수 있다. ```css /* 버튼 기본 스타일 */ .nav_tabmenu_box .nav_tabmenu li span { display: block; padding: 10px 0 10px 0; background: #e8e8e8; color: #acacac; } /* 활성화된 상태일 때 */ .nav_tabmenu_box .nav_tabmenu li.on span { background: var(--primary-default); color: #fff; font-weight: bold; } ``` 4. 카테고리 트리 메뉴 아이템의 스타일을 변경할 수 있다. ```css .category_side > li a { position: relative; display: block; padding: 12px 0 12px 0; font-size: 16px; color: #262626; } ``` 5. \[커뮤니티] 타이틀과 공통 게시판 링크 스타일을 변경할 수 있다. ```css /* 커뮤니티 타이틀 */ .nav_community_box .comm_tit { padding: 10px 0 10px 10px; margin: 0 10px 0 6px; font-size: 18px; color: #272727; font-weight: bold; border-bottom: 0px solid #000000; } /* 공통 게시판 링크 */ .nav_community_box .board_cate li a { display: block; padding: 6px 0; font-size: 14px; color: #1c1c1c; } ``` 6. 사이드 메뉴 닫기 버튼의 스타일을 지정할 수 있다. ```css #wrap nav .left_close { position: fixed; top: 20px; left: 310px; width: 29px; height: 29px; background: url(../img/icon/icon_left_x.png) no-repeat center; background-size: 100%; z-index: 1002; } ```푸터(하단 공통) 스타일 변경하기
 파일명 : *css/gd\_layout.css* 1. 푸터 메뉴의 스타일을 변경할 수 있다. ```css #footer footer .ft_menu li a { display: block; font-size: 12px; font-weight: 700; } ``` 2. \[고객센터], \[은행계좌 안내] 타이틀의 스타일을 변경할 수 있다. ```css .main_info dl dt > span { font-weight: 700; font-size: 12px; } ``` 4. 푸터 정보 영역과 카피라이트 텍스트의 스타일을 변경할 수 있습니다. ```css /* 푸터 정보 */ #footer footer .ft_info2_box .ft_address { padding: 0px; text-align: left; font-size: 12px; word-break: keep-all; } /* 카피라이트 */ #footer footer .ft_copy { font-size: 9px; text-align: left; font-style: normal; margin-block: 24px; } ```상품 진열 타이틀 변경하기
 1. 상품 진열 타이틀의 스타일을 수정할 수 있다. ```css /* css/main/main.css */ ._goods_display_main h3 { margin-top: 0; font-size: 32px; font-weight: 800; line-height: 38px; } ``` 2. 더보기 버튼 스타일을 수정할 수 있다. ```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; } /* 상단 더보기 버튼 */ .main_more_btn2 { display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; block-size: 20px; inline-size: auto; background-color: #343434; border-radius: 10px; gap: 5px; font-size: 10px; font-weight: var(--font-medium); } ```상품 정보 스타일 변경하기
 파일명 : *css/goods/goods.css* 1. 브랜드 스타일을 변경할 수 있다. ```css .goods_view .detail_info .detail_info_top .brand { padding: 0 0 2px 0; color: #666; font-size: 13px; } ``` 2. 상품명 스타일을 변경할 수 있다. ```css .goods_view .detail_info h3 { font-size: 18px; color: #333333; word-break: break-all; } ``` 3. 가격 정보 스타일을 변경할 수 있다. ```css .goods_view .detail_info .detail_info_top .price_box .price { font-size: 20px; color: #333333; } ``` 4. \[공유하기], \[찜하기] 버튼 스타일을 수정할 수 있다. ```css /* 공유하기 버튼 */ .goods_view .share_btn_box ul li.d_share button { padding-left: 25px; background: url(../../img/icon/icon_share.png) no-repeat left center; background-size: 19px; } /* 찜하기 버튼 */ .goods_view .share_btn_box ul li.d_wish button { padding-left: 25px; background: url(../../img/icon/icon_heart.png) no-repeat left center; background-size: 19px; } ```상품 상세 - 탭 메뉴 스타일 변경하기
파일명 : *css/goods/goods.css* 탭 메뉴 박스 스타일을 수정할 수 있다.
```css
.goods_view .detail_btm_tab_menu_box {
position: relative;
width: 100%;
height: 60px;
border-top: 10px solid #f9f9f9;
border-bottom: 1px solid #e2e2e2;
box-sizing: border-box;
}
/* 탭이 선택되어졌을 때 */
.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;
}
```
상품 상세 - 기본 정보 탭 컨텐츠 스타일 변경하기
파일명 : *css/goods/goods.css* 서브 타이틀과 디스크립션의 스타일을 수정할 수 있다.
```css
/* 서브 타이틀 */
.openblock_content dl dt {
padding: 5px 5px 5px 5px;
white-space: normal;
font-weight: bold;
color: #111111;
}
/* 디스크립션 */
.openblock_content dl dd {
padding: 5px 5px 5px 5px;
color: #555555;
vertical-align: top;
}
```
상품 상세 - 상품후기 탭 컨텐츠 스타일 변경하기
파일명 : *css/goods/goods.css*
1. 평가, 리뷰수 정보의 스타일을 변경할 수 있다.
```css
/* 평가, 리뷰수 라벨 */
.plus_review_container .plus_review_top_box dl dt {
display: table-cell;
font-size: 13px;
color: #606060;
vertical-align: middle;
}
/* 평가수, 리뷰수 숫자 */
.plus_review_container .plus_review_top_box dl dd {
display: table-cell;
padding-inline: 4px 8px;
font-weight: bold;
font-size: 14px;
color: var(--primary-default);
vertical-align: middle;
}
```
2. 플러스 리뷰 > \[리뷰등록], \[나와 비슷한 리뷰 보기] 버튼 스타일을 변경할 수 있다.
```css
/* css/gd_plus_review.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;
}
/* 나와 비슷한 리뷰 보기 버튼 */
.plus_review_add_search > a {
font-size: 13px;
font-weight: bold;
color: #000;
line-height: 38px;
text-align: center;
display: block;
border: #e2e2e2 1px solid;
background: #fff;
}
```
3. \[후기 작성], \[더보기 n/n] 버튼 스타일을 변경할 수 있다.
```css
/* css/gd_button.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;
}
/* 더보기 n/n 버튼 */
.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;
}
```
장바구니 페이지 스타일 변경하기
 1. 장바구니 목록에서 삭제 버튼의 스타일을 수정할 수 있다. ```css /* css/gd_button.css */ .cart_onedel_btn { width: 24px; height: 24px; font-size: 0; background: url(../img/icon/icon_x3.png) no-repeat center; background-size: 12px 12px; border: none; } ``` 2. 상품명, 주문수량, 가격정보 등의 스타일을 수정할 수 있다. ```css /* css/order/order.css */ /* 텍스트 일반 */ .cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody p { font-size: 12px; line-height: 16px; color: #9d9d9d; } /* 상품명 */ .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; } /* 가격 */ .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: #000; font-weight: bold; } ``` 3. 결제 금액 정보에 대한 스타일을 변경할 수 있다. ```css /* css/order/order.css */ /* 항목 타이틀 */ .cart .my_buy dl dt { display: table-cell; width: 50%; font-size: 13px; color: #5e5e5e; } /* 항목에 대한 값 */ .cart .my_buy dl dd { display: table-cell; width: 50%; text-align: right; font-size: 15px; color: #5e5e5e; } /* 총 합계 금액 */ .cart .my_buy dl.total dd { color: #000; font-size: 17px; } ``` 4. \[선택상품 삭제], \[선택상품 주문], \[전체주문] 버튼의 스타일을 수정할 수 있다. ```css /* css/gd_button.css */ /* 선택상품 삭제, 선택상품 주문 버튼 */ .cart_select_order_btn, .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; } /* 전체주문 버튼 */ .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; } ```주문서 페이지 스타일 변경하기
 1. 서브 타이틀의 스타일을 변경할 수 있다. ```css /* css/order/order.css */ .order .order_tit { border-top: 10px solid #f9f9f9; color: #333333; font-size: 16px; line-height: 36px; padding: 20px 16px 0px 16px; } ``` 2. 배송정보 버튼바 스타일을 변경할 수 있다. ```css /* css/order/order.css */ /* 버튼 스타일 */ .order .order_box .delivery_box .tab_menu ul li { display: table-cell; width: 33.3%; border: 1px solid #c7c7c7; border-left: none; background: #ffffff; vertical-align: middle; } /* 텍스트 스타일 */ .order .order_box .delivery_box .tab_menu ul li a { display: block; padding: 10px 7px; color: #333333; text-align: center; border-left: none; box-sizing: border-box; } /* 선택되었을 때 버튼 스타일 */ .order .order_box .delivery_box .tab_menu ul li.active { background: #000; } /* 선택되었을때 텍스트 스타일 */ .order .order_box .delivery_box .tab_menu ul li.active a { color: #fff; font-weight: bold; } ``` 3. \[우편번호], \[쿠폰 조회 및 적용], \[결제하기] 버튼 스타일을 수정할 수 있다. ```css /* css/gd_button.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; } /* 쿠폰 조회 및 적용 버튼 */ .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; } /* 결제하기 버튼 */ .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; } ```컬러 코드 변경하기
1. Verde 스킨에 적용되어 있는 기본 컬러 코드는 **#2D4F06**이다. 2. \[관리자 > 디자인 > 디자인 스킨 리스트] 메뉴에 접속한다. 3. **스타일시트/CSS 변경** * 좌측 하단 폴더 트리 내 \[스타일시트/CSS]를 더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈한다. * common.css를 더블 클릭하여 *common/common.css* 파일을 연다.  4. 화면 최상단에서 `--primary-default`의 값을 원하는 포인트 컬러 코드로 변경할 수 있다. 아래는 스킨에서 자주 사용하는 값들을 변수화 하였다. 해당 값을 변경하면 일괄적으로 적용될 것이다. ```css :root { --primary-default: #2D4F06; /* 포인트 컬러 */ --primary-hover: #213E00; /* 포인트 컬러 hover */ --secondary-default: #E4E9D3; /* 서브 컬러 */ --neutrals-gray: #F6F6F6; --neutrals-dark: #000; --font-size: 14px; /* 기본 폰트 사이즈 */ --font-family: "Pretendard Variable"; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1680px; /* 화면이 최소로 작아질 수 있는 너비 */ --max-width: 1920px; /* 화면이 최대한 넓어 질 수 있는 너비 */ } ```HEADER 스타일 변경하기
 파일명: css/layout/layout.css 1. 헤더의 높이 값, 배경색을 변경 할 수 있다. ``` #header_warp { position: sticky; top: 0; z-index: 55; background-color: #fff; height: 50px; } ``` 2. 사용자 메뉴 (LOGIN, JOIN, MYPAGE, CART) 스타일을 변경할 수 있다. ``` .top_member_box > li a { display: inline-block; color: #fff; // font 색 변경 text-transform: uppercase; // 영문 대문자로 표시 } ``` 3. CART 숫자 영역 스타일을 변경할 수 있다. ``` .top_member_box > li strong { display: inline-flex; justify-content: center; align-items: center; background-color: var(--primary-default); // 배경색 변경 color: #fff; // 숫자 색 변경 block-size: 20px; // 높이 변경 min-inline-size: 20px; // 너비 변경 margin-inline-start: 4px; font-weight: var(--font-medium); font-size: calc(var(--font-size) - 3px); // 폰트 사이드 변경 border-radius: 10px; } ```푸터(하단 공통) 스타일 변경하기
 파일명 : *css/layout/layout.css* 1. 푸터 메뉴의 스타일을 변경할 수 있다. ```css .foot_list ul li a { padding: 0 16px; font-weight: 700; } .foot_list ul .divider { display: inline-block; width: 1px; background-color: #fff; height: 12px; } ``` 2. 푸터 정보 영역의 스타일을 변경할 수 있다. ```css .foot_cont .foot_info { color: #fff; font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; } .content_info .cs_center p, .content_info .bank_info p, .content_info .notice_list li a { color: #fff; font-family: 'Pretendard Variable'; font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; } ```웹 폰트 적용하기
1. \[관리자 페이지 > 디자인 > 디자인 스킨 리스트] 메뉴에 접속한다. 2. 좌측 하단 폴더트리 내 \[스타일시트/CSS]를 더블 클릭하여 스타일시트 리스트 중 *reset.css* 파일을 연다. 3. *reset.css* 스타일시트의 3번째 줄에 `@import url(’외부 스타일시트 경로’)`을 추가한다. ```css /* css/reset.css */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); ``` 4. `font-family`의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Pretendard variable(변경할 폰트명)으로 수정한다. (한글 폰트 파일명의 경우 " "입력) ```css /* css/common/common.css */ .:root { ... --font-family: 'Pretendard variable'; ... } ``` *common.css* `--font-family`에서 변경된 폰트는 *reset.css* 에서 하위 코드에 적용된다. ```css /* css/reset.css */ .godo * { font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; } ... body, th, td, input, select, textarea, button { font-size: var(--font-size); line-height: 1.5; font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Dotum, '돋움', sans-serif; color: #333; } ``` ⚠️ 주의) 웹 폰트 사용시 속도 저하가 발생할 수 있다.메인 우측 - 최근 본 상품 변경하기
 파일명 : *css/layout/layout.css* 최근 본 상품 영역의 스타일을 지정할 수 있다. ```css /* 최근 본 상품 목록 영역 */ .scroll_right_cont { min-width: 72px; padding: 0px; background: none; color: #333; } /* 타이틀 (예: TODAY VIEW) */ .scroll_right_cont h4 { text-align: center; font-size: 11px; font-style: normal; font-weight: 700; line-height: 12px; text-transform: uppercase; } /* 상품 마우스 오버 시 노출되는 영역 */ .scroll_right_cont .src_box { position: absolute; top: -1px; right: -1px; width: 191px; height: 72px; padding: 5px 0 0 7px; border: 1px solid #999999; background: #ffffff; text-align: left; z-index: 10; } /* 가격 스타일 */ .scroll_right_cont .src_box strong { display: block; color: var(--primary-default); } /* 탑 버튼 스타일 */ #scroll_right .btn_scroll_top { text-align: center; display: flex; width: 72px; height: 24px; padding: 4px 9px; justify-content: center; align-items: center; gap: 3px; border: 1px solid #d2d2d2; background: #fff; margin-top: 20px; font-size: 12px; font-weight: 400; line-height: normal; text-transform: uppercase; color: var(--black); } ```상품 진열 스타일 변경하기
 파일명 : *css/main/main.css* 1. 상품 진열 영역의 공통 스타일을 변경할 수 있다. ```css /* 상품 진열 타이틀 추가 */ .goods_list_tit h3 { text-align: center; font-size: 42px; font-weight: var(--font-bold); line-height: 50px; } /* 상단 더보기 버튼 */ .main_content .btn_goods_view_more { display: inline-flex; align-items: center; justify-content: center; block-size: 24px; inline-size: 77px; border-radius: 12px; color: #fff; background-color: #343434; font-size: var(--font-size); } /* css/goods/list.css */ /* 하단 더보기 버튼 컨테이너 */ .btn_goods_down_more { width: 100%; margin: 30px 0 30px 0; border-top: 1px solid #ececec; text-align: center; } /* 하단 더보기 버튼 */ .btn_goods_down_more .btn_goods_view_down_more { display: inline-block; margin-top: -1px; padding: 5px 28px 6px 20px; font-weight: bold; border: 1px solid #dbdbdb; border-top: none 0; background: url(../../img/icon/goods_icon/icon_down_more.png) no-repeat right center; background-color: #ffffff; } ``` 2. 상품 아이템의 스타일을 변경할 수 있다. ```css /* 브랜드명 */ .item_tit_box .item_brand { display: block; color: var(--primary-default); font-size: 12px; line-height: 18px; font-weight: normal; margin-bottom: 4px; } /* 상품명 */ .item_tit_box .item_name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; padding: 0; font-size: 16px; text-overflow: ellipsis; font-weight: normal; overflow: hidden; line-height: 22px; } /* 가격 */ .item_money_box .item_price { padding: 0px; font-size: 16px; color: #000000; font-weight: bold; } ```상품 상세 페이지 - 상단 영역 변경하기
 파일명 : *css/goods/goods.css* 1. 상품 상세 페이지에서 상품명과 상품 항목 레이블의 스타일을 지정할 수 있다. ```css /* 상품 상세 - 상품명 */ .item_detail_tit h3 { width: 405px; font-size: 18px; word-break: break-all; } /* 항목 레이블 (제목) */ .item_detail_list dt { float: left; width: 80px; margin: 0 10px 0 0; color: #888888; font-weight: normal; word-wrap: break-word; } ``` 2. \[공유], \[조건별배송] 버튼의 스타일을 지정할 수 있다. ```css .btn_gray_list a, .btn_gray_list button { display: inline-block; padding: 0 0 0 11px; border: 1px solid #999; vertical-align: middle; } ``` 3. 총 합계 금액의 스타일을 지정할 수 있다. ```css .item_tatal_box .total_amount dd { color: var(--primary-default); } .item_tatal_box .total_amount dd strong { font-size: 20px; font-size: 25px; } ``` 4. \[장바구니], \[찜하기], \[바로 구매] 버튼의 스타일을 지정할 수 있다. ```css /* 장바구니, 찜하기 버튼 */ .btn_add_cart, .btn_add_wish { display: inline-block; width: 152px; height: 52px; padding: 0 10px 0 10px; color: #3e3d3c; font-size: 16px; border: 1px solid #cccccc; background: #ffffff; text-align: center; } /* 바로구매 버튼 */ .btn_add_order, .btn_add_order_related, .btn_add_cart_related { 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 var(--primary-default); background: var(--primary-default); text-align: center; font-weight: 400; } ```상품 상세 페이지 - 탭 스타일 변경하기
파일명 : `css/goods/goods.css` 탭 메뉴의 스타일을 지정할 수 있다.
```css
/* 탭 메뉴 아이템 */
.item_goods_tab li a {
display: block;
margin: 0 0 0 -1px;
padding: 10px 0 12px 0;
color: #999999;
font-size: var(--font-size);
border: solid #dadada;
border-width: 1px 1px 0;
background: #ffffff;
}
/* 선택된 탭 메뉴 아이템 */
.item_goods_tab li.on a {
padding-top: 18px;
margin-top: 8px;
color: #333333;
font-weight: bold;
border-bottom: 2px solid #ffffff;
}
/* 탭 메뉴 아이템 텍스트 강조 시 (상품후기, 문의 몇건인지 표시할 때 사용) */
.item_goods_tab li a strong {
color: var(--primary-default);
}
```
장바구니 페이지 스타일 변경하기
 파일명 : *css/order/order.css* 1. 장바구니 타이틀의 스타일을 지정할 수 있다. (주문서 공통) ```css /* 상품 상세 - 상품명 */ .order_wrap .order_tit h2 { float: left; font-size: 28px; color: #222222; } ``` 2. 브레드크럼(주문 단계)의 스타일을 변경할 수 있다. (주문서 공통) ```css .order_wrap .order_tit ol li { float: left; font-size: 14px; color: #d1d1d1; } /* 현재 단계를 나타내는 스타일 */ .order_wrap .order_tit .page_on { color: #000; font-weight: bold; } ``` 3. 장바구니에 담긴 상품 목록 테이블의 스타일을 변경할 수 있다. (주문서 공통) ```css .order_table_type table { width:100%; border:0; border-spacing:0; border-collapse:collapse; text-align:center; } .order_table_type th { padding:9px 10px 10px 10px; border-top:1px solid #999999; border-bottom:1px solid #dbdbdb; background:#f7f7f7; } .order_table_type td { height: 31px; padding: 15px 10px 14px 10px; color: #777777; border-bottom: 1px solid #dbdbdb; background:#ffffff; } ``` 4. \[선택 상품 주문], \[전체 상품 주문] 버튼의 스타일을 변경할 수 있다. ```css /* 선택 상품 주문 */ .btn_order_choice_buy { min-width: 190px; height: 55px; padding: 0 20px 0 20px; color: #3e3d3c; font-weight: bold; font-size: 14px; border: 1px solid #cccccc; background: #fff; cursor: pointer; } /* 전체 상품 주문 */ .btn_order_whole_buy { min-width: 190px; height: 55px; padding: 0 20px 0 20px; color: #ffffff; font-size: 14px; border: 1px solid var(--primary-default); background: var(--primary-default); cursor: pointer; font-weight: bold; } ```주문서 작성/결제 화면 변경하기
 파일명 : *css/order/order.css* 1. 서브 타이틀, 설명 텍스트 및 최종 결제 금액 등 스타일을 변경할 수 있다. ```css /* 서브 타이틀 */ .order_zone_tit h4 { font-size: 16px; } /* 설명 */ .order_zone_tit span { padding: 0 0 0 10px; color: #777777; font-size: 12px; font-weight: normal; } /* 결제 최종 금액 */ .payment_final_total dd { display: inline-block; font-size: 30px; color: var(--primary-default); } ``` 2. \[결제하기]버튼의 스타일을 변경할 수 있다. ```css .btn_order_buy { display: inline-block; width: 300px; height: 61px; line-height: 59px; color: #fff; font-size: 20px; border: 1px solid var(--primary-default); background: var(--primary-default); text-align: center; } ```컬러 코드 변경하기
1. Verde 스킨에 적용되어 있는 기본 컬러 코드는 **#2D4F06**이다. 2. \[관리자 > 모바일샵 > 디자인 스킨 리스트] 메뉴에 접속한다. 3. **스타일시트/CSS 변경** * 좌측 하단 폴더 트리 내 \[스타일시트/CSS]를 더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈한다. * common.css를 더블 클릭하여 *gd\_common.css* 파일을 연다. 4. 화면 최상단에서 `--primary-default`의 값을 원하는 포인트 컬러 코드로 변경할 수 있다. 아래는 스킨에서 자주 사용하는 값들을 변수화 하였다. 해당 값을 변경하면 일괄적으로 적용될 것이다. ```css :root { --primary-default: #2D4F06; /* 포인트 컬러 */ --primary-hover: #213E00; /* 포인트 컬러 hover */ --secondary-default: #E4E9D3; /* 서브 컬러 */ --neutrals-gray: #F6F6F6; --neutrals-dark: #000; --font-size: 12px; /* 기본 폰트 사이즈 */ --font-family: "Pretendard Variable"; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; } ```HEADER 스타일 변경하기
 파일명 : css/gd\_layout.css 1. 상단 레이아웃의 스타일을 변경할 수 있다. ``` #header_wrap header { width: 100%; min-width: 320px; background: #fff; z-index: 300; } ``` 2. 햄버거 메뉴 아이콘을 변경할 수 있다. ``` #header_wrap header .header_box .side_menu span { display: inline-block; width: 24px; height: 24px; font-size: 0; background: url('../img/icon/icon_menu.png') no-repeat center; background-size: 100%; vertical-align: top; } ``` 3. 검색 아이콘 이미지를 변경할 수 있다. ``` #header_wrap header .header_box .top_search span { display: inline-block; width: 18px; height: 17px; font-size: 0; background: url('../img/icon/icon_search.png') no-repeat center; background-size: 100%; vertical-align: top; } ``` 4. 마이페이지 이미지를 변경할 수 있다. ``` #header_wrap header .header_box .mypage span { display: inline-block; width: 21px; height: 21px; font-size: 0; background: url('../img/icon/icon_mypage.png') no-repeat center; background-size: 100%; vertical-align: top; } ``` 5. 장바구니 이미지를 변경할 수 있다. ``` #header_wrap header .header_box .cart span { display: inline-block; width: 24px; height: 24px; font-size: 0; background: url('../img/icon/icon_cart.png') no-repeat center; background-size: 100%; vertical-align: top; } ``` 6. 장바구니 카운트 스타일을 변경할 수 있다. ``` #header_wrap header .header_box .cart_count { position: absolute; top: 8px; right: 0; display: block; padding: 0px 4px; line-height: 15px; border-radius: 10px; min-width: 15px; color: #fff; background: var(--primary-default); font-size: 10px; text-align: center; } ```사이드 메뉴 스타일 변경하기
 파일명 : *css/gd\_layout.css* 1. 언어 타이틀 스타일을 수정할 수 있다. ```css .nav_language .tit { display: table-cell; width: 30%; font-size: 15px; padding: 13px 15px 13px 15px; color: #262626; font-weight: bold; box-sizing: border-box; } ``` 2. \[Q\&A], \[최근본상품], \[찜리스트] 아이콘과 텍스트 스타일을 변경할 수 있다. ```css /* 텍스트 */ .nav_link ul li a { display: block; padding: 36px 0 0 0; font-size: 13px; color: #888; } /* Q&A */ .nav_link ul li:nth-child(1) a { background: url(../img/icon/icon_qna.svg) no-repeat center 3px; background-size: 33px 30px; } /* 최근본상품 */ .nav_link ul li:nth-child(2) a { background: url(../img/icon/icon_prd_latest.svg) no-repeat center 4px; background-size: 33px 30px; } /* 찜리스트 */ .nav_link ul li:nth-child(3) a { background: url(../img/icon/icon_lnb_heart.svg) no-repeat center 4px; background-size: 33px 30px; } ``` 3. \[카테고리], \[브랜드] 버튼의 스타일을 변경할 수 있다. ```css /* 버튼 기본 스타일 */ .nav_tabmenu_box .nav_tabmenu li span { display: block; padding: 10px 0 10px 0; background: #e8e8e8; color: #acacac; } /* 활성화된 상태일 때 */ .nav_tabmenu_box .nav_tabmenu li.on span { background: var(--primary-default); color: #fff; font-weight: bold; } ``` 4. 카테고리 트리 메뉴 아이템의 스타일을 변경할 수 있다. ```css .category_side > li a { position: relative; display: block; padding: 12px 0 12px 0; font-size: 16px; color: #262626; } ``` 5. \[커뮤니티] 타이틀과 공통 게시판 링크 스타일을 변경할 수 있다. ```css /* 커뮤니티 타이틀 */ .nav_community_box .comm_tit { padding: 10px 0 10px 10px; margin: 0 10px 0 6px; font-size: 18px; color: #272727; font-weight: bold; border-bottom: 0px solid #000000; } /* 공통 게시판 링크 */ .nav_community_box .board_cate li a { display: block; padding: 6px 0; font-size: 14px; color: #1c1c1c; } ``` 6. 사이드 메뉴 닫기 버튼의 스타일을 지정할 수 있다. ```css #wrap nav .left_close { position: fixed; top: 20px; left: 310px; width: 29px; height: 29px; background: url(../img/icon/icon_left_x.png) no-repeat center; background-size: 100%; z-index: 1002; } ```푸터(하단 공통) 스타일 변경하기
 파일명 : *css/gd\_layout.css* 1. 푸터 메뉴의 스타일을 변경할 수 있다. ```css #footer footer .ft_menu li a { display: block; font-size: 12px; font-weight: 700; } ``` 2. \[고객센터], \[은행계좌 안내] 타이틀의 스타일을 변경할 수 있다. ```css .main_info dl dt > span { font-weight: 700; font-size: 12px; } ``` 4. 푸터 정보 영역과 카피라이트 텍스트의 스타일을 변경할 수 있습니다. ```css /* 푸터 정보 */ #footer footer .ft_info2_box .ft_address { padding: 0px; text-align: left; font-size: 12px; word-break: keep-all; } /* 카피라이트 */ #footer footer .ft_copy { font-size: 9px; text-align: left; font-style: normal; margin-block: 24px; } ```상품 진열 타이틀 변경하기
 1. 상품 진열 타이틀의 스타일을 수정할 수 있다. ```css /* css/main/main.css 코드 추가 */ ._goods_display_main h3 { margin-top: 0; font-size: 32px; font-weight: 800; line-height: 38px; } ``` 2. 더보기 버튼 스타일을 수정할 수 있다. ```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; } /* 상단 더보기 버튼 */ .main_more_btn2 { display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; block-size: 20px; inline-size: auto; background-color: #343434; border-radius: 10px; gap: 5px; font-size: 10px; font-weight: var(--font-medium); } ```상품 정보 스타일 변경하기
 파일명 : *css/goods/goods.css* 1. 브랜드 스타일을 변경할 수 있다. ```css .goods_view .detail_info .detail_info_top .brand { padding: 0 0 2px 0; color: #666; font-size: 13px; } ``` 2. 상품명 스타일을 변경할 수 있다. ```css .goods_view .detail_info h3 { font-size: 18px; color: #333333; word-break: break-all; } ``` 3. 가격 정보 스타일을 변경할 수 있다. ```css .goods_view .detail_info .detail_info_top .price_box .price { font-size: 20px; color: #333333; } ``` 4. \[공유하기], \[찜하기] 버튼 스타일을 수정할 수 있다. ```css /* 공유하기 버튼 */ .goods_view .share_btn_box ul li.d_share button { padding-left: 25px; background: url(../../img/icon/icon_share.png) no-repeat left center; background-size: 19px; } /* 찜하기 버튼 */ .goods_view .share_btn_box ul li.d_wish button { padding-left: 25px; background: url(../../img/icon/icon_heart.png) no-repeat left center; background-size: 19px; } ```상품 상세 - 탭 메뉴 스타일 변경하기
파일명 : *css/goods/goods.css* 탭 메뉴 박스 스타일을 수정할 수 있다.
```css
.goods_view .detail_btm_tab_menu_box {
position: relative;
width: 100%;
height: 60px;
border-top: 10px solid #f9f9f9;
border-bottom: 1px solid #e2e2e2;
box-sizing: border-box;
}
/* 탭이 선택되어졌을 때 */
.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;
}
```
상품 상세 - 기본 정보 탭 컨텐츠 스타일 변경하기
파일명 : *css/goods/goods.css* 서브 타이틀과 디스크립션의 스타일을 수정할 수 있다.
```css
/* 서브 타이틀 */
.openblock_content dl dt {
padding: 5px 5px 5px 5px;
white-space: normal;
font-weight: bold;
color: #111111;
}
/* 디스크립션 */
.openblock_content dl dd {
padding: 5px 5px 5px 5px;
color: #555555;
vertical-align: top;
}
```
상품 상세 - 상품후기 탭 컨텐츠 스타일 변경하기
파일명 : *css/goods/goods.css*
1. 평가, 리뷰수 정보의 스타일을 변경할 수 있다.
```css
/* 평가, 리뷰수 라벨 */
.plus_review_container .plus_review_top_box dl dt {
display: table-cell;
font-size: 13px;
color: #606060;
vertical-align: middle;
}
/* 평가수, 리뷰수 숫자 */
.plus_review_container .plus_review_top_box dl dd {
display: table-cell;
padding-inline: 4px 8px;
font-weight: bold;
font-size: 14px;
color: var(--primary-default);
vertical-align: middle;
}
```
2. 플러스 리뷰 > \[리뷰등록], \[나와 비슷한 리뷰 보기] 버튼 스타일을 변경할 수 있다.
```css
/* css/gd_plus_review.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;
}
/* 나와 비슷한 리뷰 보기 버튼 */
.plus_review_add_search > a {
font-size: 13px;
font-weight: bold;
color: #000;
line-height: 38px;
text-align: center;
display: block;
border: #e2e2e2 1px solid;
background: #fff;
}
```
3. \[후기 작성], \[더보기 n/n] 버튼 스타일을 변경할 수 있다.
```css
/* css/gd_button.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;
}
/* 더보기 n/n 버튼 */
.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;
}
```
장바구니 페이지 스타일 변경하기
 1. 장바구니 목록에서 삭제 버튼의 스타일을 수정할 수 있다. ```css /* css/gd_button.css */ .cart_onedel_btn { width: 24px; height: 24px; font-size: 0; background: url(../img/icon/icon_x3.png) no-repeat center; background-size: 12px 12px; border: none; } ``` 2. 상품명, 주문수량, 가격정보 등의 스타일을 수정할 수 있다. ```css /* css/order/order.css */ /* 텍스트 일반 */ .cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody p { font-size: 12px; line-height: 16px; color: #9d9d9d; } /* 상품명 */ .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; } /* 가격 */ .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: #000; font-weight: bold; } ``` 3. 결제 금액 정보에 대한 스타일을 변경할 수 있다. ```css /* css/order/order.css */ /* 항목 타이틀 */ .cart .my_buy dl dt { display: table-cell; width: 50%; font-size: 13px; color: #5e5e5e; } /* 항목에 대한 값 */ .cart .my_buy dl dd { display: table-cell; width: 50%; text-align: right; font-size: 15px; color: #5e5e5e; } /* 총 합계 금액 */ .cart .my_buy dl.total dd { color: #000; font-size: 17px; } ``` 4. \[선택상품 삭제], \[선택상품 주문], \[전체주문] 버튼의 스타일을 수정할 수 있다. ```css /* css/gd_button.css */ /* 선택상품 삭제, 선택상품 주문 버튼 */ .cart_select_order_btn, .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; } /* 전체주문 버튼 */ .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; } ```주문서 페이지 스타일 변경하기
 1. 서브 타이틀의 스타일을 변경할 수 있다. ```css /* css/order/order.css */ .order .order_tit { border-top: 10px solid #f9f9f9; color: #333333; font-size: 16px; line-height: 36px; padding: 20px 16px 0px 16px; } ``` 2. 배송정보 버튼바 스타일을 변경할 수 있다. ```css /* css/order/order.css */ /* 버튼 스타일 */ .order .order_box .delivery_box .tab_menu ul li { display: table-cell; width: 33.3%; border: 1px solid #c7c7c7; border-left: none; background: #ffffff; vertical-align: middle; } /* 텍스트 스타일 */ .order .order_box .delivery_box .tab_menu ul li a { display: block; padding: 10px 7px; color: #333333; text-align: center; border-left: none; box-sizing: border-box; } /* 선택되었을 때 버튼 스타일 */ .order .order_box .delivery_box .tab_menu ul li.active { background: #000; } /* 선택되었을때 텍스트 스타일 */ .order .order_box .delivery_box .tab_menu ul li.active a { color: #fff; font-weight: bold; } ``` 3. \[우편번호], \[쿠폰 조회 및 적용], \[결제하기] 버튼 스타일을 수정할 수 있다. ```css /* css/gd_button.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; } /* 쿠폰 조회 및 적용 버튼 */ .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; } /* 결제하기 버튼 */ .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; } ```포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\ Bbokki 스킨에 적용되어 있는 기본 컬러 코드 **#DF3842**을 확인합니다. \ 2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ 좌측 하단 폴더트리 내 스타일시트/CSS를 더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ 
4. ctrl+F 검색 후 수정하기\ common 폴더를 더블클릭하여 내에 있는 common.css 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#DF3842**를 검색하여 **원하는 포인트 컬러 코드**로 변경할 수 있습니다. 5. 나머지 포인트 컬러도 검색하여 **원하는 포인트 컬러 코드**로 변경할 수 있습니다. 1. 기본 컬러 코드 : **#DF3842** 2. 기본 컬러 마우스 오버 코드 : **#C5000C** 3. 서브 컬러 코드 : **#FEFFD5** 4. 중립적 컬러 코드 : **#D2D2D2**, **#2B2B2B**
메뉴 변경하기
1. 상단 메뉴의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. (현재는 포인트 컬러로 지정되어 있습니다.) **css > layout/layout.css** ```css .top_member_box > li > a, .top_member_box > li .top_mypage_cont .top_mypage_tit a{ display:inline-block; font-size:16px; font-weight:500; color:var(--neutrals-dark); } ``` 2. 장바구니 담긴상품 수량 폰트의 **color(색상)** 값을 변경할 수 있습니다.\ (현재는 포인트 컬러로 지정되어 있습니다.) **css > layout/layout.css** ```css .top_member_box > li strong { color:var(--primary-default); } ``` 3. 상단 메뉴 하단의 **color(색상)** 값을 변경할 수 있습니다. **css > layout/layout.css** ```css #header { position: relative; background-color: #fff; } ``` 4. 전체보기 메뉴의 **background-color(배경)** 값을 변경할 수 있습니다. **css > layout/layout.css** ```css .btn_all_menu_open { position: relative; width: 28px; height: 28px; background-color: transparent; } ``` 5. 카테고리 메뉴의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **css > layout/layout.css** ```css .header_gnb .gnb_allmenu_box a, .header_gnb .gnb_allmenu_box button { display: block; width: 100%; height: 64px; line-height: 64px; color: var(--neutrals-dark); font-size: 24px; font-weight: 400; text-align: left; } ``` 6. 카테고리 메뉴 마우스 오버시의 **background(배경), color(색상)** 값을 변경할 수 있습니다. (현재는 포인트 컬러로 지정되어 있습니다.) **css > layout/layout.css** ```css .header_gnb .gnb_allmenu_box li:hover, .header_gnb .gnb_allmenu_box li.is-open > button:hover { background-color:var(--secondary-default); color: var(--neutrals-dark); } ```검색창 폰트 변경하기
검색창 인풋박스 입력 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/common/common.css** ```css #header .top_search .top_text_cont .top_srarch_text { display: block; float: right; width: 34px; height: 34px; border: 1px solid var(--neutrals-dark); border-radius: 8px 8px; box-sizing: border-box; -moz-transition: all 0.35s; -webkit-transition: all 0.35s; text-indent: -9999px; } ``` 2\. 최근검색어 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다.\ **css/common/common.css** ```css .recent_box dt { font-size: 13px; margin-bottom: 10px; font-weight: bold; } ``` 3\. 추천상품 폰트의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **css/common/common.css** ```css .recom_box dt { width: 100%; font-size: 13px; font-weight: var(--font-bold); line-height: 19px; text-align: center; margin-bottom: 10px; } ```푸터 변경하기 (폰트/컬러)
 1\. 푸터 메뉴 폰트의 **color(색상), 왼쪽 선** 값을 변경할 수 있습니다. **css/layout/layout.css** (1) 색상 ```css .foot_list ul li a { position: relative; font-size: 16px; font-weight: 700; padding:0 15px 0 14px; color:#fff; } ``` (2) 선 => background를 수정해주세요..foot_list ul li:nth-child(n + 2) a::before {
content: '';
position: absolute;
left: 0;
top: 3px;
width: 1px;
height: 12px;
background: #fff
}
웹폰트 적용하기
1\. **관리자 페이지 > 디자인 메뉴**에 접속합니다. 2\. 좌측 하단 폴더트리 내 “**스타일시트/CSS**”를 더블 클릭하여 스타일시트 리스트 중 **reset.css**를 오픈하세요.  3\. reset.css 스타일시트의 5번째 줄에 @import url(’외부 스타일시트 경로’)을 추가합니다. **스타일시트 > reset.css | css/reset.css** ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); /* 5번째줄에 추가 */ ``` 4\. 8번째 줄의 font-family의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Nanum Gothic(변경할 폰트명)으로 수정하세요.\ (한글 폰트 파일명의 경우 " "입력) **스타일시트 > reset.css | css/reset.css** ```css .godo * { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; } ``` ※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.고객센터, 뱅킹 정보 변경하기(폰트, 컬러, 크기)
 1\. 고객센터 폰트의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .content_info h3 { display: inline-block; min-width: 60px; color: #fff; font-size: 16px; font-weight: 700; } /* color값은 디자인가이드에 맞게 사용 */ ``` 2\. 고객센터 이용시간 폰트의 **color(색상)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .content_info .cs_center p { margin-top: 12px; color: #fff; line-height: 20px; } ``` 3\. 숫자 폰트의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .content_info .bank_info strong { color:#fff; font-weight: 400; } ``` 4\. 은행이름 폰트의 **color(색상)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .content_info .bank_info em { font-weight:400; } ```최근 본 상품 변경하기
 1\. 최근 본 상품 영역의 **background(배경)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .scroll_right_cont { float:left; min-width:72px; padding:0px; background:none; color: #333; } ``` 2\. 타이틀 폰트의 **color(색상), text-align(정렬)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .scroll_right_cont h4 { padding:0; font-size: 11px; color: var(--neutrals-dark); font-weight: 700; text-align:center; } ``` 3\. 최근 본 상품 오버시 **border(선), background(배경)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .scroll_right_cont .src_box { position:absolute; top:0; right:74px; width:max-content; height:100%; padding:5px 5px 0 7px; border:1px solid #999999; background:#ffffff; text-align:left; z-index:10; } ``` 4\. 상품 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .scroll_right_cont .src_box strong { display: block; color: var(--primary-default); } ``` 5\. 페이징 폰트의**color(색상)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .scroll_right_cont .scr_paging strong { padding: 0 2px 0 2px; color: var(--primary-default); } ```진열타입 타이틀 변경하기(폰트/컬러)
 1\. 타이틀 폰트의**font-size(크기)** 값을 변경할 수 있습니다. **goods > list.css | css/goods/list.css** ```css .goods_list_tit h3 { font-size:48px; font-weight:700; } ``` 2\. 타이틀 영역 하단의 **border-bottom(선)** 값을 변경할 수 있습니다. **goods > list.css | css/goods/list.css** ```css .goods_list_tit { padding:110px 0 10px 0; /* border-bottom:1px solid #ececec;*/ line-height:1; position:relative; } ``` 3\. 더보기 버튼의 **font-size(크기), font-weight(굵기), border(선)** 값을 변경할 수 있습니다. **goods > list.css | css/goods/list.css** ```css .btn_goods_more .btn_goods_view_more { padding:2px 5px 3px 5px; font-size:24px; font-weight:400; border:0px solid #dbdbdb; color: var(--primary-default); } ```상품 리스트 변경하기
 1\. 상품 이미지의 **text-align(정렬), color(색상)** 값을 변경할 수 있습니다. **goods > list.css | css/goods/list.css** ```css .item_cont { padding: 0 10px; text-align: left; color: #1c1c1c; margin-top:20px; } ``` 2\. 상품명 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **goods > list.css | css/goods/list.css** ```css .item_tit_box .item_name { display:block; padding:0; font-size:16px; font-weight: normal; white-space: nowwrap; text-overflow: ellipsis; overflow:hidden; line-height:22px; color: var(--neutrals-dark); } ``` 3\. 정상가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **goods > list.css | css/goods/list.css** ```css .item_money_box del { display: block; color: #888888; } ``` 4\. 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **goods > list.css | css/goods/list.css** ```css .item_money_box .item_price { /*display:block;*/ padding:0px; font-size:16px; color:var(--neutrals-dark); font-weight:bold; } ```상품 상세 상단 변경하기(폰트)
 1\. 상품명 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .item_detail_tit h3 { width:405px; font-size:18px; word-break: break-all; } ``` 2\. 상품 정보 타이틀 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .item_detail_list dt { float:left; width:80px; margin:0 10px 0 0; color:#888888; font-weight:normal; word-wrap:break-word; } ``` 3\. 상품 가격 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .item_price dd { margin: -2px 0 0 0; font-size: 16px; font-weight: bold; } ``` 4\. 총 합계금액 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .item_tatal_box .total_amount dt { font-size: 16px; font-weight: bold; } ``` 5\. 총 합계금액 가격 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .item_tatal_box .total_amount dd { color:var(--primary-default); font-weight:bold; } ``` 6\. 총 합계금액 가격 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .item_tatal_box .total_amount dd strong { font-size: 20px; } ```상품 상세 상단 변경하기(버튼)
 1\. 공유하기 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **스타일시트 > button.css | css/button.css** ```css .btn_gray_list a, .btn_gray_list button { display:inline-block; padding:0 0 0 11px; border:1px solid #999; vertical-align:middle; } ``` 2\. 조건별 배송 버튼의 **font-size(크기), background(배경)** 값을 변경할 수 있습니다. **스타일시트 > button.css | css/button.css** ```css .btn_gray_list .btn_gray_small { font-size:11px; } ``` 3\. 장바구니 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다. **스타일시트 > button.css | css/button.css** ```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:400; } ``` 4\. 바로구매 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다. **스타일시트 > button.css | css/button.css** ```css .btn_add_order, .btn_add_order_related, .btn_add_cart_related { 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 var(--primary-default); background:var(--primary-default); text-align:center; font-weight:400; } ```상품 상세 상단 변경하기(라인)
 1\. 셀렉트 영역의 **border(선), background(배경)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```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(선) 값을** 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .item_detail_tit { position: relative; padding: 0 0 10px 0; border-bottom: 1px solid #dbdbdb; } ``` 3\. 리스트 항목 구분선의 **border-top(선) 값을** 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```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(선) 값을** 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .item_detail_list + .item_choice_list table { width: 100%; border-bottom: 1px solid #999999; } ``` 5. 선택한 옵션영역의 background(배경) 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .item_choice_list table { width: 100%; background: #f5f5f5; } ``` 6. 총 합계금액 구분 영역의 border-top(선) 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .item_tatal_box .total_amount { margin: 15px 0 0 0; padding-top: 10px; border-top: 1px solid #dbdbd ```상품 상세 탭 변경하기
 1\. 상품 상세 탭 선택시 **color(색상), font-weight(굵기), border(선)** 값을 변경할 수 있습니다. **goods> goods.css | css/goods/goods.css** ```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(색상)** 값을 변경할 수 있습니다. **goods> goods.css | css/goods/goods.css** ```css .item_goods_tab li a strong { color: var(--primary-default); } ```상품 상세 상품문의 영역-리스트 변경하기
 1\. 상품 문의 타이틀 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **goods> goods.css | css/goods/goods.css** ```css .item_goods_sec h3 { padding: 45px 0 10px 0; font-size: 18px; } ``` 2\. 상품문의 전체보기 버튼의 **color(색상), font-weight(굵기), border(선), background(배경), text-align(정렬)** 값을 변경할 수 있습니다. **스타일시트> button.css | css/button.css** ```css .btn_reviews_more, .btn_qna_more { display: inline-block; min-width: 120px; padding: 10px 10px 10px 10px; color: #ab3e55; font-weight: 400; border: 1px solid #cccccc; background: #ffffff; text-align: center; } ``` 3\. 상품문의 글쓰기 버튼의 **color(색상), font-weight(굵기), border(선), background(배경), text-align(정렬)** 값을 변경할 수 있습니다. **스타일시트> button.css | css/button.css** ```css .btn_reviews_write, .btn_qna_write { display: inline-block; min-width: 120px; padding: 10px 10px 10px 10px; color: #ffffff; font-weight: 400; border: 1px solid var(--primary-default); background: var(--primary-default); text-align: center; } ``` 4\. 페이징 버튼의 **color(색상), font-weight(굵기), border(선)** 값을 변경할 수 있습니다. **스타일시트> common.css | css/common.css** ```css .pagination .on { color: #333; font-weight: bold; ```상품 상세 상품문의 영역-리스트 내용 변경하기
 1\. 수정 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **스타일시트> button.css | css/button.css** ```css .btn_gray_list a, .btn_gray_list button { display: inline-block; padding: 0 0 0 11px; border: 1px solid #999; vertical-align: middle; } ``` 2\. 상품문의 내용 펼침 영역의 **background(배경)** 값을 변경할 수 있습니다. **goods> goods.css | css/goods/goods.css** ```css .qna_new_box { text-align: left; background: #f8f8f8; } ```장바구니 타이틀 변경하기
 1\. 장바구니 타이틀 폰트의 **color(색상), font-size(크기), color(색상)** 값을 변경할 수 있습니다. **order> order.css | css/order/order.css** ```css .order_wrap .order_tit h2 { float: left; font-size: 28px; color: #222222; } ``` \ 2\. 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **order> order.css | css/order/order.css** ```css .order_wrap .order_tit .page_on { color: #000; font-weight: bold; } ``` 3\. 다음 진행 스텝 표시 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **order> order.css | css/order/order.css** ```css .order_wrap .order_tit ol li { float: left; font-size: 14px; color: #d1d1d1; } ``` 4\. 장바구니 타이틀 폰트 하단의 **border-bottom(선)** 값을 변경할 수 있습니다. **order> order.css | css/order/order.css** ```css .order_wrap .order_tit { overflow: hidden; border-bottom: 1px solid #dbdbdb; } ```주문서 작성/결제 화면 변경하기
**주문서 금액 변경하기**  \- 상품금액/배송비/합계 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **스타일시트 > order.css | css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` **최종결제금액, 결제하기 버튼 변경하기**  1\. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **스타일시트 > order.css | css/order/order.css** ```css .payment_final_total dd { display:inline-block; font-size:30px; color:var(--primary-default); } ``` 2\. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경할 수 있습니다. **스타일시트 > button.css | css/button.css** ```css .btn_order_buy { display:inline-block; width:300px; height:61px; line-height:59px; color:#fff; font-size:20px; border:1px solid var(--primary-default); background:var(--primary-default); text-align:center; } ```장바구니 폰트/버튼 변경하기(컬러/사이즈/굵기)
 1\. 장바구니 상품금액/배송비/최종 결제금액의 **color(색상), font-size(사이즈), font-weight(굵기)** 값을 변경할 수 있습니다. **스타일시트 > order.css | css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` 2\. 선택상품주문 버튼은 마우스 오버 전(.btn\_order\_choice\_buy) 과 오버 시(.btn\_order\_choice\_buy:hover)의 **border(선), font-size(사이즈), color(색상)** 값으로 각각 변경할 수 있습니다. **스타일시트 > button.css | css/order/button.css** ```css .btn_order_choice_buy { min-width:190px; height:55px; padding:0 20px 0 20px; color:#3e3d3c; font-weight:bold; font-size:14px; border:1px solid #cccccc; background:#fff; cursor:pointer; } ``` ```css .btn_order_choice_buy:hover { color:#333333; border:1px solid #bbbbbb; } ``` 3\. 전체상품주문 버튼은 마우스 오버 전(.btn\_order\_whole\_buy) 과 오버 시(.btn\_order\_whole\_buy:hover) 의 **background(배경) 컬러, border(선), color(색상), font-size(사이즈)** 값으로 각각 변경할 수 있습니다. **스타일시트 > button.css | css/button.css** ```css .btn_order_whole_buy { min-width:190px; height:55px; padding:0 20px 0 20px; color:#ffffff; font-size:14px; border:1px solid var(--primary-default); background:var(--primary-default); cursor:pointer; font-weight:bold; } ```.btn_order_whole_buy:hover {
border:1px solid var(--primary-hover);
background:var(--primary-hover);
}
포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\ Mygreek 스킨에 적용되어 있는 기본 컬러 코드 **#DF3842**을 확인합니다. 2. **디자인 스킨 리스트 접속** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트 3. **스타일시트/CSS 변경** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트\ 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ \ 4. ctrl+F 검색 후 수정하기\ gd\_common.css 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#DF3842**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.
5. 나머지 포인트 컬러도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. 1. 기본 컬러 코드 : **#DF3842** 2. 기본 컬러 마우스 오버 코드 : **#C5000C** 3. 서브 컬러 코드 : **#FEFFD5** 4. 중립적 컬러 코드 : **#D2D2D2**, **#2B2B2B**
푸터 변경하기
 1\. 푸터 메뉴버튼의 **font-size(크기), color(색상), text-align(정렬), font-weight(굵기) letter-spacing(자간)** 값을 변경해줍니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css** ```css #footer footer .ft_info2_box .ft_menu li a { display: block; padding: 18px 0 10px 0; font-size: 12px; color: #fff; text-align: left; font-weight: 700; letter-spacing: -1px; } ``` 2\. 푸터 개인정보 메뉴버튼의 **color(색상), font-weight(굵기)** 값을 변경해줍니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css** ```css #footer footer .ft_info2_box .ft_menu li a.privacy { color: #fff; font-weight: bold; } ``` 3\. 푸터 정보 부분의 **text-align(정렬), font-size(크기), color(색상)** 값을 변경해줍니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css** ```css #footer footer .ft_info2_box .ft_address { padding:0px; text-align:left; font-size:12px; color:#fff; word-break:keep-all; } ``` 4\. 푸터 카피라잇 영역의 **color(색상), font-size(크기), text-align(정렬)** 값을 변경해줍니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css** ```css #footer footer .ft_copy { padding:24px 0 0; color:#fff; font-size:10px; text-align:left; font-style:normal; } ```고객센터, PC화면 버튼 변경하기
 1\. 고객센터, PC화면 버튼의 **background(배경), color(색상), font-size(크기)** 값을 변경해줍니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css** ```css #footer footer .ft_button_box ul li a { display:block; padding:8px 0; background:#484848; color:#fff; font-size:13px; } ```상단 헤더 영역 변경하기
 1\. GNB영역의 **border-bottom(선)** 값을 변경해줍니다. **> gd\_layout.css | css/gd\_layout.css** ```css #header_wrap header .header_box { display: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 12px; border-bottom: 2px solid #000; height: 62px; background: #fff; } ``` 2\. 장바구니 담긴상품 수량의 배경 **background(배경)** 값을 변경해줍니다. **> gd\_layout.css | 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: 9px; } ```슬라이드 메뉴 변경하기
 1\. 상단배너의 **font-size(크기), color(색상)** 값을 변경해줍니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css** ```css .nav_banner .nav_login ul li a { display: inline-block; font-size: 15px; color: #222222; } ``` 2\. 아이콘 메뉴 영역의 **font-size(크기), color(색상)** 값을 변경해줍니다. **스타일시트 > gd\_layout.css | 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(굵기)** 값을 변경해줍니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css** ```css .nav_tabmenu_box .nav_tabmenu li.on span { background: var(--primary-default); color: #fff; font-weight: bold; } ``` 4\. 탭버튼 비활성화 시 **background(배경), color(색상)** 값을 변경해줍니다. **스타일시트 > gd\_layout.css | 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(색상)** 값을 변경해줍니다. **proc > proc.css | css/proc/proc.css** ```css .category_side > li a { position: relative; display: block; padding: 12px 0 12px 0; font-size: 16px; color: #262626; } ``` 메뉴 폰트 **font-weight(굵기)** 값을 변경해줍니다. **proc > proc.css | css/proc/proc.css** ```css .category_side > li > a { font-weight: bold; } ``` 6\. 메뉴 폰트 선택 시 **color(색상)** 값을 변경해줍니다. **proc > proc.css | css/proc/proc.css** ```css .category_side > li > a.on { color: var(--primary-default); } ```고객센터 폰트 변경하기
 1\. 고객센터 타이틀의 **font-size(크기), font-weight(굵기), border-bottom(선)** 값을 변경해줍니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css** ```css #footer .ft_info dl dt { font-size: 12px; padding-bottom: 5px; font-weight: 700; border-bottom: 1px solid #fff; } ``` 2\. 고객센터 전화번호 **font-size(크기), color(색상)** 값을 변경해줍니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css** ```css #footer .ft_info dl dd .phone { font-size: 14px; font-weight: 700; } ``` 3\. 고객센터 이용시간 **font-size(크기), color(색상)** 값을 변경해줍니다. **main > main.css | css/main/main.css** ```css #footer .ft_info dl dd .business_hours { margin-top: 2px; font-size: 12px; color: #fff; line-height: 18px; } ```상품 리스트 스타일 변경하기
 1\. 상품리스트 이미지의 **border(라인)** 값을 변경해줍니다. **list > list\_01.css | css/goods/list/list\_01.css** ```css .goods_prd_item2 .goods_prd_img .img_box .img img { width: 100%; border: 2px solid var(--neutrals-dark); box-sizing: border-box; } ``` 2\. 상품리스트 상품명 폰트의 **color(색상), font-size(크기)** 값을 변경해줍니다. **list > list\_01.css | css/goods/list/list\_01.css** ```css .goods_prd_item2 .goods_prd_content .goods_info_list li { padding: 1px 0 1px 0; word-break: break-all; color: var(--neutrals-dark); font-size: 14px; } ``` 3\. 상품리스트 가격 폰트의 **color(색상)** 값을 변경해줍니다. **main > list\_01.css | css/goods/list/list\_01.css** ```css .goods_prd_item2 .goods_prd_content .goods_info_list li.price .c_price { color: var(--neutrals-dark); } ```진열타입 타이틀 변경하기
 1\. 타이틀의 **font-size(크기), color(색상), border-bottom(선), font-weight(굵기**) 값을 변경해줍니다. **proc > proc.css | css/proc/proc.css** ```css ._goods_display_main h3 { position:relative; display:block; padding:40px 0px 0px 16px; font-size:24px; color:#181818; /* border-bottom:1px solid #f3f2f2; */ text-align:left; font-weight:400px; } ``` 2\. 더보기 버튼의 **background(배경), font-size(크기), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다. **스타일시트 > gd\_button.css | css/gd\_button.css** ```css .main_more_btn2 { display: block; width: 70px; padding: 2px 8px; text-align: center; background: var(--primary-default); font-size: 14px; font-weight: normal; /* border: 1px solid #9f9f9f; */ color: #fff; box-sizing: border-box; position: absolute; top: 40px; right: 0px; } ```상품후기 변경하기
 1\. 상품 후기 게시판 타이틀의 **background(배경), border-bottom(선)** 값을 변경해줍니다. **스타일시트 > gd\_plus\_review\.css | css/gd\_plus\_review\.css** ```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(색상)** 값을 변경해줍니다. **스타일시트 > gd\_plus\_review\.css | css/gd\_plus\_review\.css** ```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(색상)** 값을 변경해줍니다. **스타일시트 > gd\_plus\_review\.css | css/gd\_plus\_review\.css** ```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: var(--primary-default); vertical-align: middle; } ``` 4\. 리뷰등록 버튼의 **background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다. **스타일시트 > gd\_plus\_review\.css | css/gd\_plus\_review\.css** ```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(선)** 값을 변경해줍니다. **스타일시트 > gd\_button.css | 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; } ``` 6\. 상품평 더보기 버튼의 **text-align(정렬), color(색상), font-size(크기), background(배경)** 값을 변경해줍니다. **스타일시트 > gd\_button.css | 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; } ```옵션 레이어-셀렉트박스 변경하기
 1\. 옵션 레이어의 기본 옵션 폰트의 **font-size(크기), color(색상), text-align(정렬), background(배경)** 값을 변경해줍니다. **스타일시트 > gd\_common.css | css/gd\_common.css** ```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(선)** 값을 변경해줍니다. **스타일시트 > gd\_common.css | 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(색상)** 값을 변경해줍니다. **스타일시트 > gd\_common.css | 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; } ```옵션 레이어-항목 변경하기(폰트/버튼)
 1\. 옵션 레이어 쿠폰적용 버튼의 **background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경해줍니다. **스타일시트 > gd\_button.css | 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(정렬)** 값을 변경해줍니다. **스타일시트 > css/gd\_common.css | 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(정렬)** 값을 변경해줍니다. **스타일시트 > css/gd\_common.css | 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(정렬)** 값을 변경해줍니다. **스타일시트 > css/gd\_common.css | 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; } ```상품문의-리스트 변경하기
 1\. 상품문의 게시판 문의 상태표시 아이콘의 **font-size(크기), line-height(행간), background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경해줍니다. **goods > goods.css | 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 #0CC472; } ``` 2\. 문의 제목 폰트의 **font-size(크기), color(색상), line-height(행간)** 값을 변경해줍니다. **goods > goods.css | 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; } ```상품문의-비밀번호 인증 레이어 변경하기
 1\. 비밀번호 인증 레이어의 **height(높이), background(배경), border(선)** 값을 변경해줍니다. **board > board.css | css/board/board.css** ```css .cite_layer .wrap { position: relative; height: 190px; background: #ffffff; border: 1px solid #555555; } ``` \ 2\. 비밀번호 인증 타이틀의 **height(높이), background(배경), border(선)** 값을 변경해줍니다. **board > board.css | css/board/board.css** ```css .cite_layer .wrap h4 { height: 27px; padding: 13px 0 0 17px; background: #f4f4f4; color: #222222; } ``` 3\. 비밀번호 인증 레이어 확인 버튼의 **color(색상), border-radius(둥근선), background(배경)** 값을 변경해줍니다. **스타일시트 > gd\_button.css | css/gd\_button.css** ```css .d_pw_confirm_btn { display:inline-block; padding:5px 15px 5px 15px; color:#ffffff; border:1px solid var(--primary-default); border-radius:3px; background:var(--primary-default);; } ```상품문의-리스트 내용 변경하기(폰트/버튼)
 1\. 상품문의 내용 폰트의 **color(색상)** 값을 변경해줍니다. **goods > goods.css | 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(둥근선)** 값을 변경해줍니다. **스타일시트 > gd\_button.css | 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; } ```상세 타이틀 및 info 레이어 폰트 변경하기
 1\. 상품 상세 타이틀의 **font-size(크기), line-height(행간), text-align(정렬)** 값을 변경해줍니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css** ```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(굵기)** 값을 변경해줍니다. **goods > goods.css | 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; } ```상품 상세 탭 변경하기
 1\. 상품 상세페이지 탭 폰트의 **color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬)** 값을 변경해줍니다. **goods > goods.css | 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(행간)** 값을 변경해줍니다. **goods > goods.css | 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(선)** 값을 변경해줍니다. **goods > goods.css | 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; } ```상품 상세 버튼 변경하기
 1\. 장바구니 버튼의 **font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다. **스타일시트 > 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(굵기)** 값을 변경해줍니다. **스타일시트 > gd\_button.css | css/gd\_button.css** ```css .btn_add_cart_related, .btn_add_order_related, .detail_order_btn { display: block; width: 100%; padding: 10px 0 10px 0; font-size: 16px; text-align: center; background: var(--primary-default); border: 1px solid var(--primary-default); color: #ffffff; font-weight: bold; box-sizing: border-box; ```상품 상세 리스트 영역 변경하기
 1\. 상품명 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다. **goods > goods.css | css/goods/goods.css** ```css .goods_view .detail_info h3 { font-size: 18px; color: #333333; word-break: break-all; } ``` 2\. 상품 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다. **goods > goods.css | css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box .price { font-size: 20px; color: #333333; } ``` 3\. 상품 할인 전 가격 폰트의 **color(색상)** 값을 변경해줍니다. **goods > goods.css | css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box del { color: #999999; } ``` 4\. 상품 상세페이지 리스트 제목**font-size(크기), color(색상)** 값을 변경해줍니다. **goods > goods.css | 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(색상)** 값을 변경해줍니다. **goods > goods.css | 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(정렬), background(배경), color(색상), font-weight(굵기)** 값을 변경해줍니다. **goods > goods.css | 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; } ```장바구니 버튼 변경하기
 1\. 쿠폰적용 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다. **스타일시트 > gd\_button.css | 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(굵기)** 값을 변경해줍니다. **스타일시트 > gd\_button.css | css/gd\_button.css** ```css .cart_option_modify { display:inline-block; padding:4px 8px; text-align:center; background:#000; border:1px solid #9f9f9f; color:#494949; font-weight:normal; box-sizing:border-box; border-radius:4px; } ``` 3\. 선택상품 삭제, 주문 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다. **스타일시트 > gd\_button.css | 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(굵기)** 값을 변경해줍니다. **스타일시트 > gd\_button.css | 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; } ```장바구니 폰트 변경하기
 1\. 장바구니 상품명 폰트의 **font-weight(굵기), color(색상)** 값을 변경해줍니다. **order > order.css | css/order/order.css** ```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(색상)** 값을 변경해줍니다. **order > order.css | css/order/order.css** ```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(굵기)** 값을 변경해줍니다. **order > order.css | css/order/order.css** ```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:#000; font-weight:bold; } ``` 4\. 장바구니 항목 타이틀 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다. **order > order.css | css/order/order.css** ```css .cart .my_buy dl dt { display: table-cell; width: 50%; font-size: 13px; color: #5e5e5e; } ``` 5\. 장바구니 총 상품금액 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다. **order > order.css | css/order/order.css** ```css .cart .my_buy dl dd { display: table-cell; width: 50%; text-align: right; font-size: 15px; color: #5e5e5e; } ``` 6\. 장바구니 총 합계금액 폰트의 **color(색상), font-size(크기)** 값을 변경해줍니다. **order > order.css | css/order/order.css** ```css .cart .my_buy dl.total dd { color: #000; font-size: 17px; } ```포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\ chefChoice 스킨에 적용되어 있는 전역변수 --primary-default 컬러코드 **#f15546** 를 확인합니다.\ \  2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 common/common.css 스타일 시트를 오픈합니다.4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 **#f15546**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. 5. 나머지 포인트 컬러도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. 1. 기본 컬러 코드 : **#f15546** 2. 기본 마우스 오버 컬러 코드 : **#ea3f30** 3. 서브 컬러 코드 : **#fabd4c** 4. 중립 컬러 코드 : **#edebe5**, **#000**
메뉴 변경하기
\ 1\. 상단 메뉴의 **color(색상), font-size(크기)** 값을 변경합니다. **css/layout/layout.css** ```css .top_member_box > li a { display: inline-block; color: #fff; font-size: var(--font-size); } ``` 2. 장바구니 담긴상품 수량 폰트의 **color(색상)** 값을 변경합니다. \ (현재는 기본 포인트 컬러 전역변수로 지정되어 있습니다.) **css/layout/layout.css** ```css .top_member_box > li strong { color:var(--primary-default); } ``` 3. 상단 메뉴 배경색상의 **background-color(색상)** 값을 변경합니다. \ (현재는 중립 컬러 코드 전역변수로지정되어 있습니다.) **css/layout/layout.css** ```css #header .header_top { height: 100px; background-color: var(--neutrals-dark); } ``` 4. 전체보기 메뉴의 **background-color(배경)** 값을 변경합니다. \ (현재는 중립 컬러 코드 전역변수로 지정되어 있습니다.) **css/layout/layout.css** ```css #header .gnb_allmenu_wrap { display: none; position: fixed; top: 0; left: 0; width: 400px; background: var(--neutrals-dark); z-index: 999; } ``` 5. 카테고리 메뉴의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경합니다. **css/layout/layout.css** ```css #header .gnb_allmenu_box a, #header .gnb_allmenu_box button { color: #fff; font-size: 24px; font-weight: var(--font-regular); height: 64px; line-height: 64px; width: 100%; text-align: left; display: block; } ``` 6. 메뉴 마우스 오버시의 **background(배경)**값을 변경합니다. \ (현재는 기본 포인트 컬러 전역변수로 지정되어 있습니다.) **css/layout/layout.css** ```css #header .gnb_allmenu_box li:hover, #header .gnb_allmenu_box li.is-open > button:hover { background-color: var(--primary-default); } ```검색창 폰트 변경하기
\ 1\. 검색창 인풋박스 입력 폰트의 **font-size(크기)** 값을 변경합니다. **css/layout/layout.css** ```css #header .top_search .top_text_cont input { border: none 0; vertical-align: top; background: none; height: 100%; width: 160px; color: #fff; font-size: 16px; padding: 0; } ``` 2\. 최근검색어 폰트의 **font-size(크기) , font-weight(굵기)** 값을 변경합니다. \ **css/layout/layout.css** ```css .recent_box dt { font-size: 13px; margin-bottom: 10px; font-weight: var(--font-bold); } ``` 3\. 추천상품 폰트의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경합니다. **css/layout/layout.css** ```css .recom_box dt { width: 100%; font-size: 13px; font-weight: var(--font-bold); line-height: 19px; text-align: center; margin-bottom: 10px; } ```하단 영역 변경하기 (폰트/컬러)
\ 1\. 하단 메뉴 폰트의 **color(색상), background-color(선색상) , font-weight(굵기)** 값을 변경합니다. **css/layout/layout.css** ```css .foot_list ul li a { padding: 0 16px; font-weight: var(--font-bold); color: #fff; } ``` ```css .foot_list ul .divider { display: inline-block; width: 1px; background-color: #fff; height: 12px; } ``` 2. 하단 쇼핑몰 정보의 **color(색상), font-size(크기), font-weight(굵기), line-height(행간)** 값을 변경합니다. **css/layout/layout.css** ```css .foot_cont .foot_info { color: #fff; font-size: 12px; font-weight: var(--font-regular); line-height: 20px; } ``` 3. 고객센터, 은행계좌 안내, 공지사항 폰트의 **color(색상), font-size(크기), font-weight(굵기), line-height(행간)** 값을 변경합니다. **css/layout/layout.css** ```css .content_info h3, .content_info h3 a { color: #fff; font-size: 16px; font-weight: var(--font-bold); line-height: normal; margin-bottom: 12px; } ``` ```css .content_info .cs_center p, .content_info .bank_info p, .content_info .notice_list li a { color: #fff; font-size: 12px; font-weight: var(--font-regular); line-height: 20px; } ```웹폰트 적용하기
1\. **관리자 페이지 > 디자인 메뉴**에 접속합니다. 2\. 좌측 하단 폴더트리 내 “**스타일시트/CSS**”를 더블 클릭하여 스타일시트 리스트 중 **reset.css**를 오픈하세요.  3\. reset.css 스타일시트의 6번째 줄에 @import url(’외부 스타일시트 경로’)을 추가합니다. **스타일시트 > reset.css | css/reset.css** ```css @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css'); @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); /* 6번째 라인에 추가 */ ``` 4\. font-family 값을 변경할 폰트로 수정 또는 추가하여 적용해주세요.\ (한글 폰트 파일명의 경우 " "입력) **스타일시트 > reset.css | css/reset.css** ```css body, th, td, input, select, textarea, button { font-size: var(--font-size); line-height: 1.5; font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Dotum, '돋움', sans-serif; color: #333; } ``` ※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.[우측 스크롤 영역] 최근 본 상품 변경하기
\ 1\. 최근 본 상품 영역의 **background(배경)** 값을 변경합니다. **css/layout/layout.css** ```css .scroll_right_cont { float: left; width: 88px; padding: 19px 15px; background: var(--neutrals-gray); border-radius: 10px; } ``` 2\. 타이틀 폰트의 **color(색상), text-align(정렬)** 값을 변경합니다. **css/layout/layout.css** ```css .scroll_right_cont h4 { color: var(--neutrals-dark); font-size: 15px; font-weight: var(--font-bold); line-height: 15px; text-transform: uppercase; font-family: 'Montserrat'; } ``` 3\. 최근 본 상품 오버시 **border(선), background(배경)** 값을 변경합니다. **css/layout/layout.css** ```css .scroll_right_cont .src_box { position: absolute; top: -1px; right: -3px; width: 210px; height: 53px; padding: 5px 0 0 7px; border: 1px solid #999999; background: #ffffff; text-align: left; z-index: 10; box-sizing: content-box; } ``` 4\. 상품 가격 폰트의 **color(색상)** 값을 변경합니다. **css/layout/layout.css** ```css .scroll_right_cont .src_box strong { display: block; color: var(--primary-default); } ``` 5\. 페이징 폰트의**color(색상)** 값을 변경합니다. **css/layout/layout.css** ```css .scroll_right_cont .scr_paging strong { padding: 0 2px 0 2px; color: var(--primary-default); } ```메인 상품 진열 타이틀 영역 변경하기(폰트/컬러)
 1\. 타이틀 폰트의**font-size(크기)** 값을 변경합니다. **css/goods/list.css** ```css .goods_list_tit h3 { font-size: 60px; font-weight: 800; font-family: 'Montserrat'; line-height: 73px; } ``` 2\. 상단 더보기 버튼의 **font-size(크기), font-weight(굵기), border(선)** 값을 변경합니다. **css/goods/list.css** ```css .btn_goods_more { position: absolute; bottom: 18px; right: 0px; border: 1px solid #000; width: 92px; height: 36px; line-height: 36px; text-align: center; } .btn_goods_more .btn_goods_view_more { font-size: var(--font-size); font-weight: var(--font-bold); color: var(--neutrals-dark); }; ```상품 리스트 변경하기
 1\. 상품명 폰트의 **font-size(크기), color(색상)** 값을 변경합니다. **css/goods/list.css** ```css .item_tit_box .item_name { display: block; margin-bottom: 4px; font-size: 16px; font-weight: var(--font-medium); word-break: break-all; font-weight: normal; color: var(--neutrals-dark); text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } ``` 2\. 상품가격 폰트의 **color(색상)** 값을 변경합니다. **css/goods/list.css** ```css .item_money_box .item_price { padding: 0px; font-size: 16px; color: var(--neutrals-dark); font-weight: var(--font-bold); } ``` 3\. 할인율 폰트의 **font-size(크기), color(색상)** 값을 변경합니다. **css/goods/list.css** ```css .item_number_box { color: var(--secondary-default); line-height: 18px; } ```상품 상세 상단 변경하기(폰트)
 1\. 상품명 폰트의 **font-size(크기)** 값을 변경합니다. **css/goods/goods.css** ```css .item_detail_tit h3 { width: 405px; font-size: 18px; word-break: break-all; } ``` 2\. 상품 정보 타이틀 폰트의 **color(색상), font-weight(굵기)** 값을 변경합니다. **css/goods/goods.css** ```css .item_detail_list dt { float: left; width: 80px; margin: 0 10px 0 0; color: #888888; font-weight: normal; word-wrap: break-word; } ``` 3\. 상품 가격 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경합니다. **css/goods/goods.css** ```css .item_price dd { margin: -2px 0 0 0; font-size: 16px; font-weight: var(--font-bold); } ``` 4\. 총 합계금액 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경합니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dt { font-size: 16px; font-weight: var(--font-bold); } ``` 5\. 총 합계금액 가격 폰트의 **color(색상), font-weight(굵기)** 값을 변경합니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd { color: var(--primary-default); font-weight: var(--font-bold); } ``` 6\. 총 합계금액 가격 폰트의 **font-size(크기)** 값을 변경합니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd strong { font-size: 20px; } ```상품 상세 상단 변경하기(버튼)
 1\. 장바구니, 찜하기 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬)** 값을 변경합니다. **css/button.css** ```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; } ``` 2\. 바로구매 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬)** 값을 변경합니다. **css/button.css** ```css .btn_add_order, .btn_add_order_related, .btn_add_cart_related { 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 var(--primary-default); background: var(--primary-default); text-align: center; } ```상품 상세 상단 변경하기(라인)
 1\. 상품명 아래 **border-bottom(선) 값을** 변경합니다. **css/goods/goods.css** ```css .item_detail_tit { position: relative; padding: 0 0 10px 0; border-bottom: 1px solid #dbdbdb; } ``` 2. 선택한 옵션 영역의 **border-bottom(선) 값을** 변경합니다. **css/layout/layout.css** ```css .item_detail_list + .item_choice_list table { width: 100%; border-bottom: 1px solid #999999; } ``` 5. 선택한 옵션영역의 **background(배경)** 값을 변경합니다. **css/layout/layout.css** ```css .item_choice_list table { width: 100%; background: #f5f5f5; } ``` 6. 총 합계금액 구분 영역의 **border-top(선)** 값을 변경합니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount { margin: 15px 0 0 0; padding-top: 10px; border-top: 1px solid #dbdbdb; } ```상품 상세 탭 변경하기
 1. 상품 상세 탭 **color(색상), font-weight(굵기), border(선)** 값을 변경합니다. **css/goods/goods.css** ```css .item_goods_tab li a { display: block; margin: 0 0 0 -1px; padding: 10px 0 12px 0; color: #999999; font-size: var(--font-size); border: 1px solid #dadada; border-bottom: 1px solid #bbbbbb; background: #ffffff; } ``` 2. 상품 상세 선택된 탭 **color(색상), font-weight(굵기), border(선)** 값을 변경합니다. **css/goods/goods.css** ```css .item_goods_tab li.on a { padding-top: 18px; margin-top: 8px; color: #333333; font-weight: var(--font-bold); border: 1px solid #bbbbbb; border-bottom: 1px solid #ffffff; } ``` 3\. 상품 상세 상품문의, 상품후기 수량 폰트의 **color(색상)** 값을 변경합니다. **css/goods/goods.css** ```css .item_goods_tab li a strong { color: var(--primary-default); } ```상품 상세 탭 하단영역-변경하기
 1\. 탭 하단영역 타이틀 폰트의 **font-size(크기)** 값을 변경합니다. **css/goods/goods.css** ```css .item_goods_sec h3 { padding: 45px 0 10px 0; font-size: 18px; } ``` 2\. 상품문의 전체보기, 상품후기 전체보기 버튼의 **color(색상), border(선), background(배경), text-align(정렬)** 값을 변경합니다. **css/button.css** ```css .btn_reviews_more, .btn_qna_more { display: inline-block; min-width: 120px; padding: 10px 10px 10px 10px; color: #3e3d3c; border: 1px solid #cccccc; background: #ffffff; text-align: center; } ``` 3\. 상품후기 글쓰기, 상품문의 글쓰기 버튼의 **color(색상), border(선), background(배경), text-align(정렬)** 값을 변경합니다. **css/button.css** ```css .btn_reviews_write, .btn_qna_write { display: inline-block; min-width: 120px; padding: 10px; color: #ffffff; border: 1px solid var(--primary-default); background: var(--primary-default); text-align: center; } ``` 4\. 페이징 선택된 버튼의 **color(색상), font-weight(굵기)** 값을 변경합니다. **css/common/common.css** ```css .pagination .on { color: #333; font-weight: var(--font-bold); } ```상품 상세 상품문의, 상품후기 영역-리스트 내용 영역 변경하기
 1\. 상품후기 내용 펼침 영역의 **background(배경)** 값을 변경합니다. **css/goods/goods.css** ```css .reviews_new_box { text-align: left; background: #f8f8f8; } ``` 2. 상품문의 내용 펼침 영역의 **background(배경)** 값을 변경합니다. **css/goods/goods.css** ```css .qna_new_box { text-align: left; background: #f8f8f8; } ```타이틀 영역 변경하기 (장바구니 / 주문서작성/결제 / 주문완료 )
 1\. 타이틀 폰트의 **color(색상), font-size(크기), color(색상)** 값을 변경합니다. **css/order/order.css** ```css .order_wrap .order_tit h2 { float: left; font-size: 28px; color: #222222; } ``` 2\. 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경합니다. **css/order/order.css** ```css .order_wrap .order_tit .page_on { color: var(--neutrals-dark); font-weight: var(--font-bold); } ``` 3\. 다음 진행 스텝 표시 폰트의 **font-size(크기), color(색상)** 값을 변경합니다. **css/order/order.css** ```css .order_wrap .order_tit ol li { float: left; font-size: var(--font-size); color: #d1d1d1; } ``` 4\. 타이틀 영역 하단의 **border-bottom(선)** 값을 변경합니다. **css/order/order.css** ```css .order_wrap .order_tit { overflow: hidden; border-bottom: 1px solid #dbdbdb; } ```장바구니 폰트/버튼 변경하기(컬러/사이즈/굵기)
 1\. 장바구니 상품금액/배송비/최종 결제금액의 **color(색상), font-size(사이즈), font-weight(굵기)** 값을 변경합니다. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color: var(--neutrals-dark); } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color: var(--neutrals-dark); } ``` 2\. 선택상품주문 버튼은 마우스 오버 전과 오버 시의 **border(선), font-size(사이즈), color(색상)** 값으로 각각 변경합니다. **css/button.css** ```css .btn_order_choice_buy { min-width: 190px; height: 55px; padding: 0 20px 0 20px; color: #3e3d3c; font-weight: bold; font-size: 14px; border: 1px solid #cccccc; background: #fff; cursor: pointer; } ``` ```css .btn_order_choice_buy:hover { color: #333333; border: 1px solid #bbbbbb; } ``` 3\. 전체상품주문 버튼은 마우스 오버 전과 오버 시의 **background(배경) 컬러, border(선), color(색상), font-size(사이즈)** 값으로 각각 변경합니다. **css/button.css** ```css .btn_order_whole_buy { min-width: 190px; height: 55px; padding: 0 20px 0 20px; color: #ffffff; font-size: 14px; border: 1px solid var(--primary-default); background: var(--primary-default); cursor: pointer; font-weight: bold; } ``` ```css .btn_order_whole_buy:hover { border: 1px solid var(--primary-hover); background: var(--primary-hover); } ```주문서 작성/결제 화면 변경하기
**주문서 금액 변경하기**  \- 총 상품금액/배송비/합계 폰트의 **color(색상), font-size(사이즈)** 값을 변경합니다. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color: var(--neutrals-dark); } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight: var(--font-bold); font-size: 18px; color: var(--neutrals-dark); } ``` **최종결제금액, 결제하기 버튼 변경하기**  1\. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경합니다. **css/order/order.css** ```css .payment_final_total dd { display: inline-block; font-size: 30px; color: var(--primary-default); } ``` 2\. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경합니다. **css/button.css** ```css .btn_order_buy { display: inline-block; width: 300px; height: 61px; line-height: 59px; color: #fff; font-size: 20px; border: 1px solid var(--primary-default); background: var(--primary-default); text-align: center; } ```포인트 컬러 일괄 변경하기
\ \ 1\. 컬러코드값 확인\ chefChoice 스킨에 적용되어 있는 전역변수 --primary-default 컬러코드 **#f15546** 를 확인합니다.2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 gd\_common.css 스타일 시트를 오픈합니다. 4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 **#f15546**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. 5. 나머지 포인트 컬러도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. 1. 기본 컬러 코드 : **#f15546** 2. 기본 마우스 오버 컬러 코드 : **#ea3f30** 3. 서브 컬러 코드 : **#fabd4c** 4. 중립 컬러 코드 : **#edebe5**, **#000**
상단 영역 변경하기
 1\. 상단 영역의 **background(배경)** 값을 변경합니다. **css/gd\_layout.css** ```css #header_wrap header { width: 100%; min-width: 320px; background: var(--neutrals-dark); z-index: 300; } ``` 2\. 장바구니 담긴상품 수량의 배경 **background(배경)** 값을 변경합니다. **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; } ```슬라이드 메뉴 변경하기
 1\. 상단배너 로그인, 회원가입의 **font-size(크기), color(색상)** 값을 변경합니다. **css/gd\_layout.css** ```css .nav_banner .nav_login ul li a { display: inline-block; font-size: 15px; color: #222222; } ``` 2\. 아이콘 메뉴 영역 메뉴명의 **font-size(크기), color(색상)** 값을 변경합니다. **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(굵기)** 값을 변경합니다. **css/gd\_layout.css** ```css .nav_tabmenu_box .nav_tabmenu li.on span { background: var(--neutrals-dark); color: #fff; font-weight: var(--font-bold); } ``` 4\. 탭버튼 비활성화 시 **background(배경), color(색상)** 값을 변경합니다. **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(굵기)**값을 변경합니다. **css/proc/proc.css** ```css .category_side > li a { position: relative; display: block; padding: 12px 0 12px 0; font-size: 16px; color: var(--neutrals-dark); } ``` ```css .category_side > li > a { font-weight: var(--font-bold); } ``` 6\. 메뉴 선택 시 **color(색상), border-top(선)** 값을 변경합니다. **css/proc/proc.css** ```css .category_side > li > a.on { color: var(--primary-default); } ``` ```css .category_side > li ul { display: none; border-top: 1px solid var(--primary-default); } ```하단 영역 변경하기
 1\. 하단 메뉴버튼의 **font-size(크기), color(색상), text-align(정렬), letter-spacing(자간)** 값을 변경합니다. **css/gd\_layout.css** ```css #footer footer .ft_info2_box .ft_menu li a { display: block; font-size: var(--font-size); color: #fff; text-align: left; font-weight: var(--font-bold); } ``` 2\. 하단 정보 부분의 **text-align(정렬), font-size(크기), color(색상)** 값을 변경합니다. **css/gd\_layout.css** ```css #footer footer .ft_info2_box .ft_address { padding: 0px; text-align: left; font-size: var(--font-size); color: #fff; word-break: keep-all; } ``` 4\. 하단 카피라이터 영역의 **color(색상), font-size(크기), text-align(정렬)** 값을 변경합니다. **css/gd\_layout.css** ```css #footer footer .ft_copy { padding: 24px 0 28px 0; color: #fff; font-size: 11px; text-align: left; font-style: normal; } ``` 5. 고객센터, PC화면 버튼의 **background(배경), color(색상), font-size(크기)** 값을 변경합니다. **css/gd\_layout.css** ```css #footer footer .ft_button_box ul li a { display: block; padding: 10px 0; background: #484848; color: #fff; font-size: 13px; border-radius: 100px; } ``` 6. cs center 영역, bank info 영역의 제목 **font-size(크기), font-weight(굵기), border-bottom(선)** 값을 변경합니다. **css/gd\_layout.css** ```css #footer .main_info_box .main_info dl dt { font-size: 13px; margin: 0 5px; font-weight: var(--font-bold); border-bottom: 1px solid #fff; } ``` 7. cs center 영역 고객센터 번호 **font-size(크기), color(색상)** 값을 변경합니다. **css/gd\_layout.css** ```css #footer .main_info dl dd p.phone a { font-size: 22px; color: var(--secondary-default); } ```메인 상품 진열 타이틀/버튼 영역 변경하기(폰트/컬러)
 1\. 타이틀의 **font-size(크기), color(색상), font-weight(굵기**) 값을 변경합니다. **css/proc/proc.css** ```css ._goods_display_main h3 { position: relative; display: block; padding: 40px 0px 0px 16px; font-size: 24px; color: var(--neutrals-dark); text-align: left; font-weight: 800; font-family: 'Montserrat'; } ``` 2\. 상단 더보기 버튼의 **font-size(크기), color(색상), font-weight(굵기)** 값을 변경합니다. **css/gd\_button.css** ```css .main_more_btn2 { display: inline-block; font-size: var(--font-size); font-weight: 600; color: var(--neutrals-dark); box-sizing: border-box; } ``` 3\. 하단 더보기 버튼의 **font-size(크기), color(색상), background(배경), text-align(정렬)** 값을 변경합니다. **css/gd\_button.css** ```css .main_more_btn { display: block; width: 100%; padding: 12px 8px; margin: 0 auto; text-align: center; background: var(--neutrals-dark); font-size: 14px; color: #fff; box-sizing: border-box; } ```상품 리스트 변경하기
 1\. 상품리스트 이미지의 **border(라인)** 값을 변경합니다. **css/goods/list\_01.css** ```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(크기)** 값을 변경합니다. **css/goods/goods.css** ```css .prd_name { color: var(--neutrals-dark); font-weight: var(--font-medium); line-height: 20px; font-size: 16px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } ``` 3\. 상품리스트 가격 폰트의 **font-size(크기)** 값을 변경합니다. **css/goods/goods.css** ```css .fixed_price, .origin-price, .price, .dc_price { font-size: 14px; } ```info 레이어 폰트 변경하기
 * info 레이어 영역의 **font-size(크기), color(색상), line-height(행간), font-weight(굵기)** 값을 변경합니다. **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: var(--font-bold); } ```상품 상세 리스트 영역 변경하기
 1\. 상품명 폰트의 **font-size(크기), color(색상)** 값을 변경합니다. **css/goods/goods.css** ```css .goods_view .detail_info h3 { font-size: 18px; color: #333333; word-break: break-all; } ``` 2\. 상품 가격 폰트의 **font-size(크기), color(색상)** 값을 변경합니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box .price { font-size: 20px; color: #333333; } ``` 3\. 상품 정가(취소선) 폰트의 **color(색상)** 값을 변경합니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box del { color: #999999; } ``` 4\. 상품 상세 정보 제목의 **font-size(크기), color(색상)** 값을 변경합니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_sub_info dl dt { display: table-cell; width: 25%; font-size: var(--font-size); color: #888888; } ``` 5\. 상품 상세 정보 내용의 **font-size(크기), color(색상)** 값을 변경합니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_sub_info dl dd { display: table-cell; width: 75%; font-size: var(--font-size); color: #333333; } ``` 6\. 공유하기, 찜하기 버튼의 **font-size(크기), text-align(정렬), color(색상), font-weight(굵기)** 값을 변경합니다. **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: var(--font-bold); } ```상품 상세 버튼 변경하기
 1\. 장바구니 버튼의 **font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다. **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: var(--font-bold); box-sizing: border-box; } ``` 2\. 바로구매 버튼의 **font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다. **css/gd\_button.css** ```css .btn_add_cart_related, .btn_add_order_related, .detail_order_btn { display: block; width: 100%; padding: 10px 0 10px 0; font-size: 16px; text-align: center; background: var(--primary-default); border: 1px solid var(--primary-default); color: #ffffff; font-weight: var(--font-bold); box-sizing: border-box; } ```상품 옵션 레이어-셀렉트박스 변경하기
 1\. 옵션 레이어의 기본 옵션 폰트의 **font-size(크기), color(색상), text-align(정렬), background(배경)** 값을 변경합니다. **css/gd\_common.css** ```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(선)** 값을 변경합니다. **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(색상)** 값을 변경합니다. **css/gd\_common.css** ```css .layer_option .ly_buy_info .ly_opt li .optbx .optlst li { position: relative; min-height: 42px; border-bottom: 1px solid #c7c7c7; font-weight: var(--font-bold); font-size: 13px; color: #555; line-height: 1.5; vertical-align: middle; padding: 10px; } ```상품 옵션 레이어-항목 변경하기(폰트/버튼)
 1\. 옵션 레이어 쿠폰적용 버튼의 **background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경합니다. **css/gd\_button.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 var(--neutrals-dark);
}
상품 상세 탭 변경하기
 1\. 상품 상세페이지 탭 폰트의 **color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬)** 값을 변경합니다. **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: var(--neutrals-dark); font-size: 13px; line-height: 13px; font-weight: var(--font-bold); text-align: center; } ``` 2\. 상품후기, 상품문의 개수 폰트의 **font-size(크기), color(색상), line-height(행간)** 값을 변경합니다. **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(선)** 값을 변경합니다. **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 var(--neutrals-dark); } ```상품후기 변경하기
 1\. 상품후기 작성자 및 작성일의 **font-size(크기), color(색)**을 변경합니다. **css/goods/goods.css** ```css .goods_board_review_list li .item_list_summary .board_left .author_box { font-size: var(--font-size); color: #a9a9a9; } ``` 2\. 작성한 상품후기 제목의 **font-size(크기), color(색상)** 값을 변경합니다. **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(색상)** 값을 변경합니다. **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(선)** 값을 변경합니다. **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: var(--font-bold); background: #ffffff; border: 1px solid var(--primary-default); box-sizing: border-box; } ``` 5\. 상품후기 더보기 버튼의 **text-align(정렬), color(색상), font-size(크기), background(배경)** 값을 변경합니다. **css/gd\_button.css** ```css .detail_write_more_btn { display: inline-block; width: 25px; height: 25px; text-align: center; font-size: 0; border: none; background: url('../img/icon/icon_detail_board_arrow.png') no-repeat center; background-size: 14px 8px; } ```상품문의-리스트 변경하기
 1\. 상품문의 게시판 문의 상태표시 아이콘의 **font-size(크기), line-height(행간), background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경합니다. **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(행간)** 값을 변경합니다. **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; } ```상품문의-리스트 내용 변경하기(폰트/버튼)
 1\. 상품문의 내용 폰트의 **color(색상)** 값을 변경합니다. **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(둥근선)** 값을 변경합니다. **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; } ```상품문의-비밀번호 인증 레이어 변경하기
 1\. 비밀번호 인증 레이어의 **height(높이), background(배경), border(선)** 값을 변경합니다. **css/board/board.css** ```css .cite_layer .wrap { position: relative; height: 190px; background: #ffffff; border: 1px solid #555555; } ``` \ 2\. 비밀번호 인증 타이틀의 **height(높이), background(배경), border(선)** 값을 변경합니다. **css/board/board.css** ```css .cite_layer .wrap h4 { height: 42px; padding: 13px 0 0 17px; background: #f4f4f4; color: #222222; } ``` 3\. 비밀번호 인증 레이어 확인 버튼의 **color(색상), border-radius(둥근선), background(배경)** 값을 변경합니다. **css/gd\_button.css** ```css .d_pw_confirm_btn { display: inline-block; padding: 5px 15px 5px 15px; color: #ffffff; border: 1px solid var(--primary-default); border-radius: 3px; background: var(--primary-default); } ```장바구니 페이지 변경하기
 1\. 쿠폰적용 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경합니다. **css/gd\_button.css** ```css .cart_coupon_apply { display: inline-block; padding: 4px 8px; text-align: center; background: var(--neutrals-dark); border: 1px solid var(--neutrals-dark); color: #ffffff; font-weight: normal; box-sizing: border-box; border-radius: 4px; } ``` 2\. 옵션변경 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경합니다. **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(굵기)** 값을 변경합니다. **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: var(--font-bold); box-sizing: border-box; font-size: 14px; } ``` ```css .cart_select_order_btn { display: inline-block; width: 100%; padding: 10px 0 10px 0; text-align: center; background: #ffffff; border: 1px solid #9f9f9f; color: #494949; font-weight: var(--font-bold); box-sizing: border-box; font-size: 14px; } ``` 4\. 전체주문 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경합니다. **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: var(--font-bold); box-sizing: border-box; font-size: 14px; } ``` 5. 총 합계금액의 **color(색), font-size(크기)**를 변경합니다. **css/order/order.css** ```css .cart .my_buy dl.total dd { color: var(--neutrals-dark); font-size: 17px; } ```주문페이지 변경하기
1\. 주문 상품명의 **font-weight(굵기), color(색상)** 값을 변경합니다. \  **css/order/order.css** ```css .order .pay .my_goods li .info .itembody p.name { padding: 0 0 3px 0; font-weight: var(--font-bold); color: #333; } ``` 2\. 주문 상품 금액의 **font-weight(굵기), color(색상)** 값을 변경합니다. **css/order/order.css** ```css .order .pay .my_goods li .info .itembody .prc { font-weight: var(--font-bold); color: var(--neutrals-dark); } ``` 3\. 배송정보 활성화된 탭의 **color(색상), font-weight(굵기)** 값을 변경합니다. \  **css/order/order.css** ```css .order .order_box .delivery_box .tab_menu ul li.active a { color: #fff; font-weight: var(--font-bold); } ``` 4\. 배송정보 우편번호 버튼의 **background(배경), color(색상), border(선)** 값을 변경합니다. **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: var(--font-bold); box-sizing: border-box; } ``` 5\. 쿠폰 조회 및 적용 버튼의 **background(배경), color(색상), border(선)** 값을 변경합니다. \  **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: var(--font-bold); box-sizing: border-box; } ``` 6\. 결제하기 버튼의 **background(배경), color(색상), font-size(크기), border(선)** 값을 변경합니다. **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: var(--font-bold); box-sizing: border-box; } ```컬러 코드 변경하기
1. Macaroom 스킨에 적용되어 있는 기본 컬러 코드는 **#ff5f57**이다. 2. \[관리자 > 디자인 > 디자인 스킨 리스트] 메뉴에 접속한다. 3. **스타일시트/CSS 변경** * 좌측 하단 폴더 트리 내 \[스타일시트/CSS]를 더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈한다. * common.css를 더블 클릭하여 *common/common.css* 파일을 연다.  4. 화면 최상단에서 `--primary-default`의 값을 원하는 포인트 컬러 코드로 변경할 수 있다. 아래는 스킨에서 자주 사용하는 값들을 변수화 하였다. 해당 값을 변경하면 일괄적으로 적용될 것이다. ```css :root { --primary-default: #ff5f57; /* 포인트 컬러 */ --primary-hover: #ff8680; /* 포인트 컬러 hover */ --secondary-default: #ffae44; /* 서브 컬러 */ --gray-dark: #e2dede; --gray: #ededed; --black: #272727; --font-size: 14px; /* 기본 폰트 사이즈 */ --font-family: "Pretendard Variable"; /* 기본 폰트 명 */ --second-font-family: "Afacad"; --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1440px; /* 화면이 최소로 작아질 수 있는 너비 */ --max-width: 1920px; /* 화면이 최대한 넓어 질 수 있는 너비 */ } ```GNB(상단 공통) 스타일 변경하기
파일명 : *css/layout/layout.css*
1. 상단 메뉴 텍스트의 스타일을 변경할 수 있다.
```css
.top_member_box > li a {
display: inline-block;
color: #4F4F4F;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.8px;
text-transform: uppercase;
}
```
2. 장바구니 담긴상품 수량 스타일을 변경할 수 있다.
```css
.cart-count {
width: 20px;
height: 20px;
background-color: var(--primary-default);
color: #fff;
display: inline-block;
border-radius: 50%;
text-align: center;
font-size: 11px;
font-style: normal;
font-weight: 500;
line-height: 20px;
transform: translate(2px, -3px);
}
```
3. 상단 메뉴의 배경색을 변경할 수 있다.
```css
#header .header_top {
background-color: #fff;
max-width: var(--max-width);
min-width: calc(var(--max-width) - 20px);
margin-inline: auto;
}
```
4. 카테고리 전체보기 메뉴 패널의 스타일을 변경할 수 있다.
```css
.gnb_allmenu_wrap {
display: none;
position: fixed;
top: 80px;
left: 0;
width: 100%;
background: #fff;
z-index: 999;
border-top: 2px solid #272727;
border-bottom: 2px solid #272727;
max-height: 672px;
min-height: 396px;
}
```
5. 카테고리 메뉴의 스타일을 변경할 수 있다.
```css
.header_gnb .gnb_allmenu_box a,
.header_gnb .gnb_allmenu_box button {
color: var(--black);
font-size: 24px;
font-weight: 400;
height: 64px;
line-height: 64px;
width: 100%;
text-align: left;
display: block;
}
```
6. 검색창의 스타일을 변경할 수 있다. 6-1) 검색 아이콘을 변경할 수 있다.
```css
.top-search-btn {
position: absolute;
top: 1px;
right: 1px;
border-radius: 8px;
width: 32px;
height: 32px;
background: #fff url(../../img/common/btn/btn_top_search.svg) no-repeat right;
text-indent: -9999em;
}
```
6-2) 검색 인풋창의 스타일을 변경할 수 있다.
```css
#header .top_search .top_text_cont .top_srarch_text {
display: block;
float: right;
width: 34px;
height: 34px;
border-radius: 8px;
box-sizing: border-box;
-moz-transition: all 0.35s;
-webkit-transition: all 0.35s;
border: 1px solid transparent;
}
```
6-3) 최근 검색어 레이아웃의 스타일을 변경할 수 있다.
```css
.recent_box {
float: left;
width: 333px;
min-height: 65px;
font-size: 12px;
text-align: center;
border-right: none 0;
vertical-align: top;
}
```
6-4) 추천상품 레이아웃의 스타일을 변경할 수 있다.
```css
.recom_box {
display: inline-block;
width: 148px;
min-height: 218px;
padding: 12px 15px 10px;
font-size: 10px;
}
```
푸터(하단 공통) 스타일 변경하기
파일명 : *css/layout/layout.css*
1. 푸터 메뉴의 스타일을 변경할 수 있다.
```css
.foot_list ul li a {
padding: 0 16px;
font-weight: 700;
}
.foot_list ul .divider {
display: inline-block;
width: 1px;
background-color: #fff;
height: 12px;
}
```
2. 푸터 정보 영역의 스타일을 변경할 수 있다.
```css
.foot_cont .foot_info {
color: #fff;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}
.content_info .cs_center p,
.content_info .bank_info p,
.content_info .notice_list li a {
color: #fff;
font-family: 'Pretendard Variable';
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}
```
웹 폰트 적용하기
1. \[관리자 페이지 > 디자인 > 디자인 스킨 리스트] 메뉴에 접속한다. 2. 좌측 하단 폴더트리 내 \[스타일시트/CSS]를 더블 클릭하여 스타일시트 리스트 중 *reset.css* 파일을 연다. 3. *reset.css* 스타일시트의 3번째 줄에 `@import url(’외부 스타일시트 경로’)`을 추가한다. ```css /* css/reset.css */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css'); @import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap'); ``` 4. `font-family`의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Pretendard variable(변경할 폰트명)으로 수정한다. (한글 폰트 파일명의 경우 " "입력) ```css /* css/common/common.css */ .:root { ... --font-family: 'Pretendard variable'; --second-font-family: "Afacad"; ... } ``` *common.css* `--font-family`에서 변경된 폰트는 *reset.css* 에서 하위 코드에 적용된다. ```css /* css/reset.css */ .godo * { font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; } ... body, th, td, input, select, textarea, button { font-size: var(--font-size); line-height: 1.5; font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Dotum, '돋움', sans-serif; color: #333; } ``` ⚠️ 주의) 웹 폰트 사용시 속도 저하가 발생할 수 있다.메인 우측 - 최근 본 상품 변경하기
파일명 : *css/layout/layout.css*
최근 본 상품 영역의 스타일을 지정할 수 있다.
```css
/* 최근 본 상품 목록 영역 */
.scroll_right_cont {
min-width: 72px;
padding: 0px;
background: none;
color: #333;
}
/* 타이틀 (예: TODAY VIEW) */
.scroll_right_cont h4 {
text-align: center;
font-size: 11px;
font-style: normal;
font-weight: 700;
line-height: 12px;
text-transform: uppercase;
}
/* 상품 마우스 오버 시 노출되는 영역 */
.scroll_right_cont .src_box {
position: absolute;
top: -1px;
right: -1px;
width: 191px;
height: 72px;
padding: 5px 0 0 7px;
border: 1px solid #999999;
background: #ffffff;
text-align: left;
z-index: 10;
}
/* 가격 스타일 */
.scroll_right_cont .src_box strong {
display: block;
color: var(--primary-default);
}
```
상품 진열 스타일 변경하기
파일명 : *css/goods/list.css*
1. 상품 진열 영역의 공통 스타일을 변경할 수 있다.
```css
/* 상품 진열 타이틀 */
.goods_list_tit h3 {
color: var(--black);
text-align: center;
font-family: var(--second-font-family);
font-size: 44px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/* 상단 더보기 버튼 */
.btn_goods_more .btn_goods_view_more {
color: #7D7D7D;
font-size: 14px;
font-weight: 600;
line-height: 30px;
padding-right: 14px;
}
/* 하단 더보기 버튼 컨테이너 */
.btn_goods_down_more {
width: 100%;
text-align: center;
margin-top: 56px;
}
/* 하단 더보기 버튼 */
.btn_goods_down_more .btn_goods_view_down_more {
background-color: #272727;
padding: 0 48px;
color: #fff;
text-align: center;
font-family: Afacad;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 32px;
height: 56px;
}
```
2. 상품 아이템의 스타일을 변경할 수 있다.
```css
/* 브랜드명 */
.item_tit_box .item_brand {
display: block;
color: var(--primary-default);
font-family: "Pretendard Variable";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: uppercase;
}
/* 상품명 */
.item_tit_box .item_name {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
padding: 0;
font-size: 16px;
text-overflow: ellipsis;
font-weight: 500;
overflow: hidden;
line-height: 22px;
color: #272727;
}
/* 가격 */
.item_money_box .item_price {
padding: 0;
color: #272727;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 22px;
}
```
상품 상세 페이지 - 상단 영역 변경하기
파일명 : *css/goods/goods.css*
1. 상품 상세 페이지에서 상품명과 상품 항목 레이블의 스타일을 지정할 수 있다.
```css
/* 상품 상세 - 상품명 */
.item_detail_tit h3 {
width: 405px;
font-size: 18px;
word-break: break-all;
}
/* 항목 레이블 (제목) */
.item_detail_list dt {
float: left;
width: 80px;
margin: 0 10px 0 0;
color: #888888;
font-weight: normal;
word-wrap: break-word;
}
```
2. \[공유], \[조건별배송] 버튼의 스타일을 지정할 수 있다.
```css
.btn_gray_list a, .btn_gray_list button {
display: inline-block;
padding: 0 0 0 11px;
border: 1px solid #999;
vertical-align: middle;
}
```
3. 총 합계 금액의 스타일을 지정할 수 있다.
```css
.item_tatal_box .total_amount dd {
color: var(--primary-default);
font-weight: bold;
}
.item_tatal_box .total_amount dd strong {
font-size: 20px;
}
```
4. \[장바구니], \[찜하기], \[바로 구매] 버튼의 스타일을 지정할 수 있다.
```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;
}
/* 바로구매 버튼 */
.btn_add_order,
.btn_add_order_related,
.btn_add_cart_related {
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 var(--primary-default);
background: var(--primary-default);
text-align: center;
font-weight: bold;
}
```
상품 상세 페이지 - 탭 스타일 변경하기
파일명 : `css/goods/goods.css` 탭 메뉴의 스타일을 지정할 수 있다.
```css
/* 탭 메뉴 아이템 */
.item_goods_tab li a {
display: block;
margin: 0 0 0 -1px;
padding: 10px 0 12px 0;
color: #999999;
font-size: var(--font-size);
border: solid #dadada;
border-width: 1px 1px 0;
background: #ffffff;
}
/* 선택된 탭 메뉴 아이템 */
.item_goods_tab li.on a {
padding-top: 18px;
margin-top: 8px;
color: #333333;
font-weight: bold;
border-bottom: 2px solid #ffffff;
}
/* 탭 메뉴 아이템 텍스트 강조 시 (상품후기, 문의 몇건인지 표시할 때 사용) */
.item_goods_tab li a strong {
color: var(--primary-default);
}
```
장바구니 페이지 스타일 변경하기
파일명 : *css/order/order.css*
1. 장바구니 타이틀의 스타일을 지정할 수 있다. (주문서 공통)
```css
/* 상품 상세 - 상품명 */
.order_wrap .order_tit h2 {
float: left;
font-size: 28px;
color: #222222;
}
```
2. 브레드크럼(주문 단계)의 스타일을 변경할 수 있다. (주문서 공통)
```css
.order_wrap .order_tit ol li {
float: left;
font-size: 14px;
color: #d1d1d1;
}
/* 현재 단계를 나타내는 스타일 */
.order_wrap .order_tit .page_on {
color: #000;
font-weight: bold;
}
```
3. 장바구니에 담긴 상품 목록 테이블의 스타일을 변경할 수 있다. (주문서 공통)
```css
.order_table_type table {
width:100%;
border:0;
border-spacing:0;
border-collapse:collapse;
text-align:center;
}
.order_table_type th {
padding:9px 10px 10px 10px;
border-top:1px solid #999999;
border-bottom:1px solid #dbdbdb;
background:#f7f7f7;
}
.order_table_type td {
height: 31px;
padding: 15px 10px 14px 10px;
color: #777777;
border-bottom: 1px solid #dbdbdb;
background:#ffffff;
}
```
4. \[선택 상품 주문], \[전체 상품 주문] 버튼의 스타일을 변경할 수 있다.
```css
/* 선택 상품 주문 */
.btn_order_choice_buy {
min-width: 190px;
height: 55px;
padding: 0 20px 0 20px;
color: #3e3d3c;
font-weight: bold;
font-size: 14px;
border: 1px solid #cccccc;
background: #fff;
cursor: pointer;
}
/* 전체 상품 주문 */
.btn_order_whole_buy {
min-width: 190px;
height: 55px;
padding: 0 20px 0 20px;
color: #ffffff;
font-size: 14px;
border: 1px solid var(--primary-default);
background: var(--primary-default);
cursor: pointer;
font-weight: bold;
}
```
주문서 작성/결제 화면 변경하기
파일명 : *css/order/order.css*
1. 서브 타이틀, 설명 텍스트 및 최종 결제 금액 등 스타일을 변경할 수 있다.
```css
/* 서브 타이틀 */
.order_zone_tit h4 {
font-size: 16px;
}
/* 설명 */
.order_zone_tit span {
padding: 0 0 0 10px;
color: #777777;
font-size: 12px;
font-weight: normal;
}
/* 결제 최종 금액 */
.payment_final_total dd {
display: inline-block;
font-size: 30px;
color: var(--primary-default);
}
```
2. \[결제하기]버튼의 스타일을 변경할 수 있다.
```css
.btn_order_buy {
display: inline-block;
width: 300px;
height: 61px;
line-height: 59px;
color: #fff;
font-size: 20px;
border: 1px solid var(--primary-default);
background: var(--primary-default);
text-align: center;
}
```
컬러 코드 변경하기
1. Macaroom 스킨에 적용되어 있는 기본 컬러 코드는 **#ff5f57**이다. 2. \[관리자 > 모바일샵 > 디자인 스킨 리스트] 메뉴에 접속한다. 3. **스타일시트/CSS 변경** * 좌측 하단 폴더 트리 내 \[스타일시트/CSS]를 더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈한다. * common.css를 더블 클릭하여 *gd\_common.css* 파일을 연다. 4. 화면 최상단에서 `--primary-default`의 값을 원하는 포인트 컬러 코드로 변경할 수 있다. 아래는 스킨에서 자주 사용하는 값들을 변수화 하였다. 해당 값을 변경하면 일괄적으로 적용될 것이다. ```css :root { --primary-default: #ff5f57; --primary-hover: #ff8680; --secondary-default: #ffae44; --gray: #ededed; --black: #000; --font-size: 12px; --font-family: 'Pretendard variable'; --font-regular: 400; --font-medium: 500; --font-bold: 700; } ```GNB(상단 공통) 스타일 변경하기
파일명 : *css/gd\_layout.css*
1. 상단 레이아웃의 스타일을 변경할 수 있다.
```css
#header_wrap header .header_box {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 12px;
border-bottom: 2px solid #000;
height: 62px;
}
```
2. 햄버거 메뉴 아이콘을 변경할 수 있다.
```css
#header_wrap header .header_box .side_menu span {
display: inline-block;
width: 20px;
height: 15px;
font-size: 0;
background: url('../img/icon/icon_menu.png') no-repeat center;
background-size: 100%;
vertical-align: top;
}
```
3. 검색 아이콘을 변경할 수 있다.
```css
#header_wrap header .header_box .top_search span {
display: inline-block;
width: 18px;
height: 17px;
font-size: 0;
background: url('../img/icon/icon_search.png') no-repeat center;
background-size: 100%;
vertical-align: top;
}
```
4. 마이페이지 아이콘을 변경할 수 있다.
```css
#header_wrap header .header_box .mypage span {
display: inline-block;
width: 21px;
height: 21px;
font-size: 0;
background: url('../img/icon/icon_mypage.png') no-repeat center;
background-size: 100%;
vertical-align: top;
}
```
5. 장바구니 아이콘을 변경할 수 있다.
```css
/* 장바구니 아이콘 */
#header_wrap header .header_box .cart span {
display: inline-block;
width: 20px;
height: 21px;
font-size: 0;
background: url('../img/icon/icon_cart.png') no-repeat center;
background-size: 100%;
vertical-align: top;
}
/* 장바구니 수량 정보 */
#header_wrap header .header_box .cart_count {
position: absolute;
top: 8px;
right: 0;
padding: 0px 4px;
line-height: 15px;
border-radius: 100%;
color: #fff;
background: var(--primary-default);
font-size: calc(var(--font-size) - 2px);
min-width: 14px;
text-align: center;
}
```
사이드 메뉴 스타일 변경하기
파일명 : *css/gd\_layout.css*
1. 언어 타이틀 스타일을 수정할 수 있다.
```css
.nav_language .tit {
display: table-cell;
width: 30%;
font-size: 15px;
padding: 13px 15px 13px 15px;
color: #262626;
font-weight: bold;
box-sizing: border-box;
}
```
2. \[Q\&A], \[최근본상품], \[찜리스트] 아이콘과 텍스트 스타일을 변경할 수 있다.
```css
/* 텍스트 */
.nav_link ul li a {
display: block;
padding: 36px 0 0 0;
font-size: 13px;
color: #888;
}
/* Q&A */
.nav_link ul li:nth-child(1) a {
background: url(../img/icon/icon_qna.svg) no-repeat center 3px;
background-size: 33px 30px;
}
/* 최근본상품 */
.nav_link ul li:nth-child(2) a {
background: url(../img/icon/icon_prd_latest.svg) no-repeat center 4px;
background-size: 33px 30px;
}
/* 찜리스트 */
.nav_link ul li:nth-child(3) a {
background: url(../img/icon/icon_lnb_heart.svg) no-repeat center 4px;
background-size: 33px 30px;
}
```
3. \[카테고리], \[브랜드] 버튼의 스타일을 변경할 수 있다.
```css
/* 버튼 기본 스타일 */
.nav_tabmenu_box .nav_tabmenu li span {
display: block;
padding: 10px 0 10px 0;
background: #e8e8e8;
color: #acacac;
}
/* 활성화된 상태일 때 */
.nav_tabmenu_box .nav_tabmenu li.on span {
background: var(--primary-default);
color: #fff;
font-weight: bold;
}
```
4. 카테고리 트리 메뉴 아이템의 스타일을 변경할 수 있다.
```css
.category_side > li a {
position: relative;
display: block;
padding: 12px 0 12px 0;
font-size: 16px;
color: #262626;
}
```
5. \[커뮤니티] 타이틀과 공통 게시판 링크 스타일을 변경할 수 있다.
```css
/* 커뮤니티 타이틀 */
.nav_community_box .comm_tit {
padding: 12px 16px;
font-size: 18px;
color: var(--black);
font-weight: bold;
border-bottom: 0px solid #000000;
}
/* 공통 게시판 링크 */
.nav_community_box .board_cate li a {
display: block;
color: var(--black);
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
}
```
6. 사이드 메뉴 닫기 버튼의 스타일을 지정할 수 있다.
```css
#wrap nav .left_close {
position: fixed;
top: 20px;
left: 310px;
width: 29px;
height: 29px;
background: url('../img/icon/icon_left_x.png') no-repeat center;
background-size: 100%;
z-index: 1002;
}
```
푸터(하단 공통) 스타일 변경하기
파일명 : *css/gd\_layout.css*
1. 푸터 메뉴의 스타일을 변경할 수 있다.
```css
#footer footer .ft_menu li a {
display: block;
font-size: 12px;
font-weight: 700;
}
```
2. \[고객센터], \[은행계좌 안내] 타이틀의 스타일을 변경할 수 있다.
```css
.main_info dl dt > span {
font-weight: 700;
font-size: 12px;
}
```
4. 푸터 정보 영역과 카피라이트 텍스트의 스타일을 변경할 수 있습니다.
```css
/* 푸터 정보 */
#footer footer .ft_info2_box .ft_address {
padding: 0px;
text-align: left;
font-size: 12px;
word-break: keep-all;
}
/* 카피라이트 */
#footer footer .ft_copy {
font-size: 9px;
text-align: left;
font-style: normal;
margin-block: 24px;
}
```
상품 진열 타이틀 변경하기
1. 상품 진열 타이틀의 스타일을 수정할 수 있다.
```css
/* css/proc/proc.css */
._goods_display_main h3 {
display: block;
padding-top: 40px;
margin-bottom: 24px;
margin-inline: 50px;
color: #272727;
text-align: center;
font-family: Afacad;
font-size: 42px;
font-style: normal;
font-weight: 400;
line-height: 40px;
letter-spacing: 0.84px;
}
```
2. 더보기 버튼 스타일을 수정할 수 있다.
```css
/* 하단 더보기 버튼 */
.main_more_btn {
display: block;
padding: 0 24px;
margin: 0 auto;
background-color: var(--black);
color: #fff;
text-align: center;
font-family: inherit;
font-size: 14px;
font-style: normal;
font-weight: var(--font-regular);
line-height: 27px;
border: 0;
height: 40px;
}
/* 상단 더보기 버튼 */
.main_more_btn2 {
display: block;
text-align: center;
width: 72px;
height: 24px;
padding-top: 0;
padding-right: 12px;
color: var(--black);
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 24px;
letter-spacing: 0.24px;
border-radius: 12px;
border: 1px solid #000;
margin: 0 auto;
}
```
상품 정보 스타일 변경하기
파일명 : *css/goods/goods.css*
1. 브랜드 스타일을 변경할 수 있다.
```css
.goods_view .detail_info .detail_info_top .brand {
padding: 0 0 2px 0;
color: #666;
font-size: 13px;
}
```
2. 상품명 스타일을 변경할 수 있다.
```css
.goods_view .detail_info h3 {
font-size: 18px;
color: #333333;
word-break: break-all;
}
```
3. 가격 정보 스타일을 변경할 수 있다.
```css
.goods_view .detail_info .detail_info_top .price_box .price {
font-size: 20px;
color: #333333;
}
```
4. \[공유하기], \[찜하기] 버튼 스타일을 수정할 수 있다.
```css
/* 공유하기 버튼 */
.goods_view .share_btn_box ul li.d_share button {
padding-left: 25px;
background: url(../../img/icon/icon_share.png) no-repeat left center;
background-size: 19px;
}
/* 찜하기 버튼 */
.goods_view .share_btn_box ul li.d_wish button {
padding-left: 25px;
background: url(../../img/icon/icon_heart.png) no-repeat left center;
background-size: 19px;
}
```
상품 상세 - 탭 메뉴 스타일 변경하기
파일명 : *css/goods/goods.css* 탭 메뉴 박스 스타일을 수정할 수 있다.
```css
.goods_view .detail_btm_tab_menu_box {
position: relative;
width: 100%;
height: 60px;
border-top: 10px solid #f9f9f9;
border-bottom: 1px solid #e2e2e2;
box-sizing: border-box;
}
/* 탭이 선택되어졌을 때 */
.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;
}
```
상품 상세 - 기본 정보 탭 컨텐츠 스타일 변경하기
파일명 : *css/goods/goods.css* 서브 타이틀과 디스크립션의 스타일을 수정할 수 있다.
```css
/* 서브 타이틀 */
.openblock_content dl dt {
padding: 5px 5px 5px 5px;
white-space: normal;
font-weight: bold;
color: #111111;
}
/* 디스크립션 */
.openblock_content dl dd {
padding: 5px 5px 5px 5px;
color: #555555;
vertical-align: top;
}
```
상품 상세 - 상품후기 탭 컨텐츠 스타일 변경하기
파일명 : *css/goods/goods.css*
1. 평가, 리뷰수 정보의 스타일을 변경할 수 있다.
```css
/* 평가, 리뷰수 라벨 */
.plus_review_container .plus_review_top_box dl dt {
display: table-cell;
font-size: 13px;
color: #606060;
vertical-align: middle;
}
/* 평가수, 리뷰수 숫자 */
.plus_review_container .plus_review_top_box dl dd {
display: table-cell;
padding-inline: 4px 8px;
font-weight: bold;
font-size: 14px;
color: var(--primary-default);
vertical-align: middle;
}
```
2. 플러스 리뷰 > \[리뷰등록], \[나와 비슷한 리뷰 보기] 버튼 스타일을 변경할 수 있다.
```css
/* css/gd_plus_review.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;
}
/* 나와 비슷한 리뷰 보기 버튼 */
.plus_review_add_search > a {
font-size: 13px;
font-weight: bold;
color: #000;
line-height: 38px;
text-align: center;
display: block;
border: #e2e2e2 1px solid;
background: #fff;
}
```
3. \[후기 작성], \[더보기 n/n] 버튼 스타일을 변경할 수 있다.
```css
/* css/gd_button.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;
}
/* 더보기 n/n 버튼 */
.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;
}
```
장바구니 페이지 스타일 변경하기
1. 장바구니 목록에서 삭제 버튼의 스타일을 수정할 수 있다.
```css
/* css/gd_button.css */
.cart_onedel_btn {
width: 24px;
height: 24px;
font-size: 0;
background: url(../img/icon/icon_x3.png) no-repeat center;
background-size: 12px 12px;
border: none;
}
```
2. 상품명, 주문수량, 가격정보 등의 스타일을 수정할 수 있다.
```css
/* css/order/order.css */
/* 텍스트 일반 */
.cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody p {
font-size: 12px;
line-height: 16px;
color: #9d9d9d;
}
/* 상품명 */
.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;
}
/* 가격 */
.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: #000;
font-weight: bold;
}
```
3. 결제 금액 정보에 대한 스타일을 변경할 수 있다.
```css
/* css/order/order.css */
/* 항목 타이틀 */
.cart .my_buy dl dt {
display: table-cell;
width: 50%;
font-size: 13px;
color: #5e5e5e;
}
/* 항목에 대한 값 */
.cart .my_buy dl dd {
display: table-cell;
width: 50%;
text-align: right;
font-size: 15px;
color: #5e5e5e;
}
/* 총 합계 금액 */
.cart .my_buy dl.total dd {
color: #000;
font-size: 17px;
}
```
4. \[선택상품 삭제], \[선택상품 주문], \[전체주문] 버튼의 스타일을 수정할 수 있다.
```css
/* css/gd_button.css */
/* 선택상품 삭제, 선택상품 주문 버튼 */
.cart_select_order_btn,
.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;
}
/* 전체주문 버튼 */
.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;
}
```
주문서 페이지 스타일 변경하기
1. 서브 타이틀의 스타일을 변경할 수 있다.
```css
/* css/order/order.css */
.order .order_tit {
border-top: 10px solid #f9f9f9;
color: #333333;
font-size: 16px;
line-height: 36px;
padding: 20px 16px 0px 16px;
}
```
2. 배송정보 버튼바 스타일을 변경할 수 있다.
```css
/* css/order/order.css */
/* 버튼 스타일 */
.order .order_box .delivery_box .tab_menu ul li {
display: table-cell;
width: 33.3%;
border: 1px solid #c7c7c7;
border-left: none;
background: #ffffff;
vertical-align: middle;
}
/* 텍스트 스타일 */
.order .order_box .delivery_box .tab_menu ul li a {
display: block;
padding: 10px 7px;
color: #333333;
text-align: center;
border-left: none;
box-sizing: border-box;
}
/* 선택되었을 때 버튼 스타일 */
.order .order_box .delivery_box .tab_menu ul li.active {
background: #000;
}
/* 선택되었을때 텍스트 스타일 */
.order .order_box .delivery_box .tab_menu ul li.active a {
color: #fff;
font-weight: bold;
}
```
3. \[우편번호], \[쿠폰 조회 및 적용], \[결제하기] 버튼 스타일을 수정할 수 있다.
```css
/* css/gd_button.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;
}
/* 쿠폰 조회 및 적용 버튼 */
.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;
}
/* 결제하기 버튼 */
.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;
}
```
포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\ Bliss 스킨에 적용되어 있는 기본 컬러 코드 **#118670**을 확인합니다. \ 2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ 좌측 하단 폴더트리 내 스타일시트/CSS를 더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ 
4. ctrl+F 검색 후 수정하기\ common 폴더를 더블클릭하여 내에 있는 common.css 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#118670**를 검색하여 **원하는 포인트 컬러 코드**로 변경할 수 있습니다. 5. 나머지 포인트 컬러도 검색하여 **원하는 포인트 컬러 코드**로 변경할 수 있습니다. 1. 기본 컬러 코드 : **#118670** 2. 기본 컬러 마우스 오버 코드 : **#096D5A** 3. 서브 컬러 코드 : **#A0886E** 4. 중립적 컬러 코드 : **#F0F0F0**, **#000**
메뉴 변경하기
1. 상단 메뉴의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css > layout/layout.css** ```css .top_member_box > li > a { display: inline-block; padding-left: 15px; color: #000; font-size: 16px; font-weight: 400; letter-spacing: -0.16px; } ``` 2. 장바구니 담긴상품 수량 폰트의 **color(색상)** 값을 변경할 수 있습니다.\ (현재는 포인트 컬러로 지정되어 있습니다.) **css > layout/layout.css** ```css .top_member_box > li strong { color:var(--primary-default); font-weight: 400; } ``` 3. 상단 메뉴 하단의 **color(색상)** 값을 변경할 수 있습니다. **css > layout/layout.css** ```css #header .header_top { position: relative; display: flex; align-items: center; background-color: #fff; border-bottom: 1px solid #000; height: 68px; } ```검색창 폰트 변경하기
검색창 인풋박스 입력 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/common/common.css** ```css #header .top_search .top_text_cont .top_srarch_text { display: block; float: right; width: 34px; height: 34px; border: 0px solid #000; border-radius: 8px 8px; box-sizing: border-box; -moz-transition: all 0.35s; -webkit-transition: all 0.35s; } ``` 2\. 최근검색어 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다.\ **css/common/common.css** ```css .recent_box dt { font-size: 13px; margin-bottom: 10px; font-weight: bold; } ``` 3\. 추천상품 폰트의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **css/common/common.css** ```css .recom_box dt { width: 100%; font-size: 13px; font-weight: var(--font-bold); line-height: 19px; text-align: center; margin-bottom: 10px; } ```푸터 변경하기 (폰트/컬러)
 1\. 푸터 메뉴 폰트의 **color(색상)**을 변경할 수 있습니다. **css/layout/layout.css** ```css .foot_cont a { color: #000; font-size: 12px; } ``` 2\. 푸터 정보영역 폰트의 color(색상), font-size(크기), line-height(행간) 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .foot_cont .foot_info { color: #484848; font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; } ```웹폰트 적용하기
1\. **관리자 페이지 > 디자인 메뉴**에 접속합니다. 2\. 좌측 하단 폴더트리 내 “**스타일시트/CSS**”를 더블 클릭하여 스타일시트 리스트 중 **reset.css**를 오픈하세요.  3\. reset.css 스타일시트의 5번째 줄에 @import url(’외부 스타일시트 경로’)을 추가합니다. **스타일시트 > reset.css | css/reset.css** ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); /* 5번째줄에 추가 */ ``` 4\. 8번째 줄의 font-family의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Nanum Gothic(변경할 폰트명)으로 수정하세요.\ (한글 폰트 파일명의 경우 " "입력) **스타일시트 > reset.css | css/reset.css** ```css .godo * { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; } ``` ※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.고객센터, 뱅킹 정보 변경하기(폰트, 컬러, 크기)
 1\. 고객센터 이용시간 폰트의 **color(색상)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .foot_cont { flex: 1; display: flex; flex-direction: column; gap: 24px; padding: 16px 24px 56px; color: #000; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; border-right: 1px solid #000; } ``` 3\. 숫자 폰트의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .foot_cont { flex: 1; display: flex; flex-direction: column; gap: 24px; padding: 16px 24px 56px; color: #000; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; border-right: 1px solid #000; } ``` 4\. 은행이름 폰트의 **color(색상)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .foot_cont .bank-info { color: #484848; font-size: 12px; font-weight: 300; line-height: 16px; } ```최근 본 상품 변경하기
 1\. 최근 본 상품 영역의 **background(배경)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .scroll_right_cont { float:left; min-width:72px; padding:0px; background:none; color: #333; } ``` 2\. 타이틀 폰트의 **color(색상), text-align(정렬)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .scroll_right_cont h4 { padding:0; font-size: 11px; color: var(--neutrals-dark); font-weight: 700; text-align:center; } ``` 3\. 최근 본 상품 오버시 **border(선), background(배경)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .scroll_right_cont .src_box { position:absolute; top:0; right:74px; width:max-content; height:100%; padding:5px 5px 0 7px; border:1px solid #999999; background:#ffffff; text-align:left; z-index:10; } ``` 4\. 상품 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .scroll_right_cont .src_box strong { display: block; color: var(--primary-default); } ``` 5\. 페이징 폰트의**color(색상)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .scroll_right_cont .scr_paging strong { padding: 0 2px 0 2px; color: var(--primary-default); } ```진열타입 타이틀 변경하기(폰트/컬러)
 1\. 타이틀 폰트의**font-size(크기)** 값을 변경할 수 있습니다. **goods > list.css | css/goods/list.css** ```css .goods_list_tit h3 { font-size:40px; font-weight:400; } ``` 2\. 타이틀 영역 하단의 **border-bottom(선)** 값을 변경할 수 있습니다. **goods > list.css | css/goods/list.css** ```css .goods_list_tit { line-height:1; position:relative; } ``` 3\. 더보기 버튼의 **이미지** 값을 변경할 수 있습니다. **main > main.css | css/main/main.css** ```css .btn_goods_more .btn_goods_view_more { display: inline-block; width: 32px; height: 32px; padding: 0; font-size: 0; background: url(../../img/etc/icon_plus_more.png) no-repeat center / 32px auto; } ```상품 리스트 변경하기
 1\. 상품 이미지의 **text-align(정렬), color(색상)** 값을 변경할 수 있습니다. **goods > list.css | css/goods/list.css** ```css .item_cont { padding: 0 6px; text-align: left; color: #1c1c1c; margin-top:20px; } ``` 2\. 상품명 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **goods > list.css | css/goods/list.css** ```css .item_tit_box .item_name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; padding: 0; font-size: 16px; text-overflow: ellipsis; font-weight: 500; overflow: hidden; line-height: 22px; color: var(--neutrals-dark); } ``` 3\. 정상가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **goods > list.css | css/goods/list.css** ```css .item_money_box del { display: block; color: #888888; } ``` 4\. 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **goods > list.css | css/goods/list.css** ```css .item_money_box .item_price { /*display:block;*/ padding:0px; font-size:16px; color:#000; font-weight:bold; } ```상품 상세 상단 변경하기(폰트)
 1\. 상품명 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .item_detail_tit h3 { width:405px; font-size:18px; word-break: break-all; } ``` 2\. 상품 정보 타이틀 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .item_detail_list dt { float:left; width:80px; margin:0 10px 0 0; color:#888888; font-weight:normal; word-wrap:break-word; } ``` 3\. 상품 가격 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .item_price dd { margin: -2px 0 0 0; font-size: 16px; font-weight: bold; } ``` 4\. 총 합계금액 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .item_tatal_box .total_amount dt { font-size: 16px; font-weight: bold; } ``` 5\. 총 합계금액 가격 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .item_tatal_box .total_amount dd { color:var(--primary-default); font-weight:bold; } ``` 6\. 총 합계금액 가격 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .item_tatal_box .total_amount dd strong { font-size: 20px; } ```상품 상세 상단 변경하기(버튼)
 1\. 공유하기 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **스타일시트 > button.css | css/button.css** ```css .btn_gray_list a, .btn_gray_list button { display:inline-block; padding:0 0 0 11px; border:1px solid #999; vertical-align:middle; } ``` 2\. 조건별 배송 버튼의 **font-size(크기), background(배경)** 값을 변경할 수 있습니다. **스타일시트 > button.css | css/button.css** ```css .btn_gray_list .btn_gray_small { font-size:11px; } ``` 3\. 장바구니 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다. **스타일시트 > button.css | css/button.css** ```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:400; } ``` 4\. 바로구매 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다. **스타일시트 > button.css | css/button.css** ```css .btn_add_order, .btn_add_order_related, .btn_add_cart_related { 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 var(--primary-default); background:var(--primary-default); text-align:center; font-weight:400; } ```상품 상세 상단 변경하기(라인)
 1\. 셀렉트 영역의 **border(선), background(배경)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```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(선) 값을** 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .item_detail_tit { position: relative; padding: 0 0 10px 0; border-bottom: 1px solid #dbdbdb; } ``` 3\. 리스트 항목 구분선의 **border-top(선) 값을** 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```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(선) 값을** 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .item_detail_list + .item_choice_list table { width: 100%; border-bottom: 1px solid #999999; } ``` 5. 선택한 옵션영역의 background(배경) 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .item_choice_list table { width: 100%; background: #f5f5f5; } ``` 6. 총 합계금액 구분 영역의 border-top(선) 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .item_tatal_box .total_amount { margin: 15px 0 0 0; padding-top: 10px; border-top: 1px solid #dbdbd ```상품 상세 탭 변경하기
 1\. 상품 상세 탭 선택시 **color(색상), font-weight(굵기), border(선)** 값을 변경할 수 있습니다. **goods> goods.css | css/goods/goods.css** ```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(색상)** 값을 변경할 수 있습니다. **goods> goods.css | css/goods/goods.css** ```css .item_goods_tab li a strong { color: var(--primary-default); } ```상품 상세 상품후기 영역-리스트 변경하기
 1\. 상품 후기 타이틀 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **goods> goods.css | css/goods/goods.css** ```css .item_goods_sec h3 { padding: 45px 0 10px 0; font-size: 18px; } ``` 2\. 상품후기 전체보기 버튼의 **color(색상), font-weight(굵기), border(선), background(배경), text-align(정렬)** 값을 변경할 수 있습니다. **스타일시트> button.css | css/button.css** ```css .btn_reviews_more, .btn_qna_more { display: inline-block; min-width: 120px; padding: 10px 10px 10px 10px; color: #ab3e55; font-weight: 400; border: 1px solid #cccccc; background: #ffffff; text-align: center; } ``` 3\. 상품후기 글쓰기 버튼의 **color(색상), font-weight(굵기), border(선), background(배경), text-align(정렬)** 값을 변경할 수 있습니다. **스타일시트> button.css | css/button.css** ```css .btn_reviews_write, .btn_qna_write { display: inline-block; min-width: 120px; padding: 10px 10px 10px 10px; color: #ffffff; font-weight: 400; border: 1px solid var(--primary-default); background: var(--primary-default); text-align: center; } ``` 4\. 페이징 버튼의 **color(색상), font-weight(굵기), border(선)** 값을 변경할 수 있습니다. **스타일시트> common.css | css/common.css** ```css .pagination .on { color: #333; font-weight: bold; ```상품 상세 상품문의 영역-리스트 내용 변경하기
 1\. 수정 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **스타일시트> button.css | css/button.css** ```css .btn_gray_list a, .btn_gray_list button { display: inline-block; padding: 0 0 0 11px; border: 1px solid #999; vertical-align: middle; } ``` 2\. 상품문의 내용 펼침 영역의 **background(배경)** 값을 변경할 수 있습니다. **goods> goods.css | css/goods/goods.css** ```css .qna_new_box { text-align: left; background: #f8f8f8; } ```장바구니 타이틀 변경하기
 1\. 장바구니 타이틀 폰트의 **color(색상), font-size(크기), color(색상)** 값을 변경할 수 있습니다. **order> order.css | css/order/order.css** ```css .order_wrap .order_tit h2 { float: left; font-size: 28px; color: #222222; } ``` \ 2\. 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **order> order.css | css/order/order.css** ```css .order_wrap .order_tit .page_on { color: #000; font-weight: bold; } ``` 3\. 다음 진행 스텝 표시 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **order> order.css | css/order/order.css** ```css .order_wrap .order_tit ol li { float: left; font-size: 14px; color: #d1d1d1; } ``` 4\. 장바구니 타이틀 폰트 하단의 **border-bottom(선)** 값을 변경할 수 있습니다. **order> order.css | css/order/order.css** ```css .order_wrap .order_tit { overflow: hidden; border-bottom: 1px solid #dbdbdb; } ```주문서 작성/결제 화면 변경하기
**주문서 금액 변경하기**  \- 상품금액/배송비/합계 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **스타일시트 > order.css | css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` **최종결제금액, 결제하기 버튼 변경하기**  1\. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **스타일시트 > order.css | css/order/order.css** ```css .payment_final_total dd { display:inline-block; font-size:30px; color:var(--primary-default); } ``` 2\. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경할 수 있습니다. **스타일시트 > button.css | css/button.css** ```css .btn_order_buy { display:inline-block; width:300px; height:61px; line-height:59px; color:#fff; font-size:20px; border:1px solid var(--primary-default); background:var(--primary-default); text-align:center; } ```장바구니 폰트/버튼 변경하기(컬러/사이즈/굵기)
 1\. 장바구니 상품금액/배송비/최종 결제금액의 **color(색상), font-size(사이즈), font-weight(굵기)** 값을 변경할 수 있습니다. **스타일시트 > order.css | css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` 2\. 선택상품주문 버튼은 마우스 오버 전(.btn\_order\_choice\_buy) 과 오버 시(.btn\_order\_choice\_buy:hover)의 **border(선), font-size(사이즈), color(색상)** 값으로 각각 변경할 수 있습니다. **스타일시트 > button.css | css/order/button.css** ```css .btn_order_choice_buy { min-width:190px; height:55px; padding:0 20px 0 20px; color:#3e3d3c; font-weight:bold; font-size:14px; border:1px solid #cccccc; background:#fff; cursor:pointer; } ``` ```css .btn_order_choice_buy:hover { color:#333333; border:1px solid #bbbbbb; } ``` 3\. 전체상품주문 버튼은 마우스 오버 전(.btn\_order\_whole\_buy) 과 오버 시(.btn\_order\_whole\_buy:hover) 의 **background(배경) 컬러, border(선), color(색상), font-size(사이즈)** 값으로 각각 변경할 수 있습니다. **스타일시트 > button.css | css/button.css** ```css .btn_order_whole_buy { min-width:190px; height:55px; padding:0 20px 0 20px; color:#ffffff; font-size:14px; border:1px solid var(--primary-default); background:var(--primary-default); cursor:pointer; font-weight:bold; } ```.btn_order_whole_buy:hover {
border:1px solid var(--primary-hover);
background:var(--primary-hover);
}
포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\ Mygreek 스킨에 적용되어 있는 기본 컬러 코드 **#118670**을 확인합니다. 2. **디자인 스킨 리스트 접속** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트 3. **스타일시트/CSS 변경** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트\ 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ \ 4. ctrl+F 검색 후 수정하기\ gd\_common.css 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#118670**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.
5. 나머지 포인트 컬러도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. 1. 기본 컬러 코드 : **#118670** 2. 기본 컬러 마우스 오버 코드 : **#096D5A** 3. 서브 컬러 코드 : **#A0886E** 4. 중립적 컬러 코드 : **#F0F0F0**, **#000**
푸터 변경하기
 1\. 푸터 메뉴버튼의 **font-size(크기), color(색상), text-align(정렬), font-weight(굵기) letter-spacing(자간)** 값을 변경할 수 있습니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css**#footer .ft_cont .ft_menu li {
line-height: 16px;
}
고객센터, PC화면 버튼 변경하기
 1\. 고객센터, PC화면 버튼의 **background(배경), color(색상), font-size(크기)** 값을 변경할 수 있습니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css** ```css #footer footer .ft_button_box ul li a { display: block; padding: 10px 0; color: #484848; font-size: 13px; font-weight: 400; } ```상단 헤더 영역 변경하기
 1\. GNB영역의 **border-bottom(선)** 값을 변경할 수 있습니다. **> gd\_layout.css | css/gd\_layout.css** ```css #header_wrap header .header_box { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; height: 62px; border-bottom: 1px solid #000; } ``` 2\. 장바구니 담긴상품 수량의 배경 **background(배경)** 값을 변경할 수 있습니다. **> gd\_layout.css | css/gd\_layout.css** ```css #header_wrap header .header_box .cart_count { color: #111; font-size: 16px; } ```슬라이드 메뉴 변경하기
 1\. 상단배너의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css** ```css .nav_banner .nav_login ul li a { display: inline-block; font-size: 15px; color: #222222; } ``` 2\. 아이콘 메뉴 영역의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **스타일시트 > gd\_layout.css | 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(굵기)** 값을 변경할 수 있습니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css** ```css .nav_tabmenu_box .nav_tabmenu li.on span { background: var(--primary-default); color: #fff; font-weight: bold; } ``` 4\. 탭버튼 비활성화 시 **background(배경), color(색상)** 값을 변경할 수 있습니다. **스타일시트 > gd\_layout.css | 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(색상)** 값을 변경할 수 있습니다. **proc > proc.css | css/proc/proc.css** ```css .category_side > li a { position: relative; display: block; padding: 12px 0 12px 0; font-size: 16px; color: #262626; } ``` 메뉴 폰트 **font-weight(굵기)** 값을 변경할 수 있습니다. **proc > proc.css | css/proc/proc.css** ```css .category_side > li > a { font-weight: bold; } ``` 6\. 메뉴 폰트 선택 시 **color(색상)** 값을 변경할 수 있습니다. **proc > proc.css | css/proc/proc.css** ```css .category_side > li > a.on { color: var(--primary-default); } ```고객센터 폰트 변경하기
 1\. 고객센터 전화번호 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css** ```css #footer .ft_cont_wrap .ft_cont .contact-info, #footer .ft_cont_wrap .ft_cont .business_hours { font-size: 14px; line-height: 20px; } ``` 2\. 고객센터 이용시간 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css** ```css #footer .ft_cont_wrap .ft_cont .contact-info, #footer .ft_cont_wrap .ft_cont .business_hours { font-size: 14px; line-height: 20px; } ```상품 리스트 스타일 변경하기
 1\. 상품리스트 이미지의 **border(라인)** 값을 변경할 수 있습니다. **list > list\_01.css | css/goods/list/list\_01.css** ```css .goods_prd_item2 .goods_prd_img .img_box .img img { width: 100%; border: 1px solid #e5e5e5; } ``` 2\. 상품리스트 상품명 폰트의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. **goods.css | css/goods/goods.css** ```css .prd_name { font-weight: var(--font-medium); line-height: 20px; font-size: calc(var(--font-size) + 2px); } ``` 3\. 상품리스트 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **main > list\_01.css | css/goods/list/list\_01.css** ```css .goods_prd_item2 .goods_prd_content .goods_info_list li.price .c_price { color: var(--neutrals-dark); } ```진열타입 타이틀 변경하기
 1\. 타이틀의 **font-size(크기), color(색상), border-bottom(선), font-weight(굵기**) 값을 변경할 수 있습니다. **proc > proc.css | css/proc/proc.css** ```css ._goods_display_main h3 { position: relative; display: block; margin-top: 40px; margin-left: 16px; font-size: 24px; color: #000; text-align: left; font-weight: 400; } ``` 2\. 더보기 버튼의 **background(배경)**값을 변경할 수 있습니다. **스타일시트 > gd\_button.css | css/gd\_button.css** ```css .main_more_btn2 { display: block; width: 32px; height: 32px; text-align: center; background: #000; font-size: 0; color: #fff; box-sizing: border-box; background: url(../img/etc/icon_plus_more.png) no-repeat center / 32px auto; } ```상품후기 변경하기
 1\. 상품 후기 게시판 타이틀의 **background(배경), border-bottom(선)** 값을 변경할 수 있습니다. **스타일시트 > gd\_plus\_review\.css | css/gd\_plus\_review\.css** ```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(색상)** 값을 변경할 수 있습니다. **스타일시트 > gd\_plus\_review\.css | css/gd\_plus\_review\.css** ```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(색상)** 값을 변경할 수 있습니다. **스타일시트 > gd\_plus\_review\.css | css/gd\_plus\_review\.css** ```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: var(--primary-default); vertical-align: middle; } ``` 4\. 리뷰등록 버튼의 **background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **스타일시트 > gd\_plus\_review\.css | css/gd\_plus\_review\.css** ```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(선)** 값을 변경할 수 있습니다. **스타일시트 > gd\_button.css | 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; } ``` 6\. 상품평 더보기 버튼의 **text-align(정렬), color(색상), font-size(크기), background(배경)** 값을 변경할 수 있습니다. **스타일시트 > gd\_button.css | 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; } ```옵션 레이어-셀렉트박스 변경하기
 1\. 옵션 레이어의 기본 옵션 폰트의 **font-size(크기), color(색상), text-align(정렬), background(배경)** 값을 변경할 수 있습니다. **스타일시트 > gd\_common.css | css/gd\_common.css** ```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(선)** 값을 변경할 수 있습니다. **스타일시트 > gd\_common.css | 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(색상)** 값을 변경할 수 있습니다. **스타일시트 > gd\_common.css | 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; } ```옵션 레이어-항목 변경하기(폰트/버튼)
 1\. 옵션 레이어 쿠폰적용 버튼의 **background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경할 수 있습니다. **스타일시트 > gd\_button.css | 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(정렬)** 값을 변경할 수 있습니다. **스타일시트 > css/gd\_common.css | 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(정렬)** 값을 변경할 수 있습니다. **스타일시트 > css/gd\_common.css | 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(정렬)** 값을 변경할 수 있습니다. **스타일시트 > css/gd\_common.css | 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; } ```상품문의-리스트 변경하기
 1\. 상품문의 게시판 문의 상태표시 아이콘의 **font-size(크기), line-height(행간), background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경할 수 있습니다. **goods > goods.css | 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 #0CC472; } ``` 2\. 문의 제목 폰트의 **font-size(크기), color(색상), line-height(행간)** 값을 변경할 수 있습니다. **goods > goods.css | 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; } ```상품문의-비밀번호 인증 레이어 변경하기
 1\. 비밀번호 인증 레이어의 **height(높이), background(배경), border(선)** 값을 변경할 수 있습니다. **board > board.css | css/board/board.css** ```css .cite_layer .wrap { position: relative; height: 190px; background: #ffffff; border: 1px solid #555555; } ``` \ 2\. 비밀번호 인증 타이틀의 **height(높이), background(배경), border(선)** 값을 변경할 수 있습니다. **board > board.css | css/board/board.css** ```css .cite_layer .wrap h4 { height: 27px; padding: 13px 0 0 17px; background: #f4f4f4; color: #222222; } ``` 3\. 비밀번호 인증 레이어 확인 버튼의 **color(색상), border-radius(둥근선), background(배경)** 값을 변경할 수 있습니다. **스타일시트 > gd\_button.css | css/gd\_button.css** ```css .d_pw_confirm_btn { display:inline-block; padding:5px 15px 5px 15px; color:#ffffff; border:1px solid var(--primary-default); border-radius:3px; background:var(--primary-default);; } ```상품문의-리스트 내용 변경하기(폰트/버튼)
 1\. 상품문의 내용 폰트의 **color(색상)** 값을 변경할 수 있습니다. **goods > goods.css | 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(둥근선)** 값을 변경할 수 있습니다. **스타일시트 > gd\_button.css | 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; } ```상세 타이틀 및 info 레이어 폰트 변경하기
 1\. 상품 상세 타이틀의 **font-size(크기), line-height(행간), text-align(정렬)** 값을 변경할 수 있습니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css** ```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(굵기)** 값을 변경할 수 있습니다. **goods > goods.css | 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; } ```상품 상세 탭 변경하기
 1\. 상품 상세페이지 탭 폰트의 **color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **goods > goods.css | 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(행간)** 값을 변경할 수 있습니다. **goods > goods.css | 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(선)** 값을 변경할 수 있습니다. **goods > goods.css | 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; } ```상품 상세 버튼 변경하기
 1\. 장바구니 버튼의 **font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **스타일시트 > 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(굵기)** 값을 변경할 수 있습니다. **스타일시트 > gd\_button.css | css/gd\_button.css** ```css .btn_add_cart_related, .btn_add_order_related, .detail_order_btn { display: block; width: 100%; padding: 10px 0 10px 0; font-size: 16px; text-align: center; background: var(--primary-default); border: 1px solid var(--primary-default); color: #ffffff; font-weight: bold; box-sizing: border-box; ```상품 상세 리스트 영역 변경하기
 1\. 상품명 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .goods_view .detail_info h3 { font-size: 18px; color: #333333; word-break: break-all; } ``` 2\. 상품 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box .price { font-size: 20px; color: #333333; } ``` 3\. 상품 할인 전 가격 폰트의 **color(색상)** 값을 변경해줍니다. **goods > goods.css | css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box del { color: #999999; } ``` 4\. 상품 상세페이지 리스트 제목**font-size(크기), color(색상)** 값을 변경할 수 있습니다. **goods > goods.css | 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(색상)** 값을 변경할 수 있습니다. **goods > goods.css | 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(정렬), background(배경), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **goods > goods.css | 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; } ```장바구니 버튼 변경하기
 1\. 쿠폰적용 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **스타일시트 > gd\_button.css | 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(굵기)** 값을 변경할 수 있습니다. **스타일시트 > gd\_button.css | css/gd\_button.css** ```css .cart_option_modify { display:inline-block; padding:4px 8px; text-align:center; background:#000; border:1px solid #9f9f9f; color:#494949; font-weight:normal; box-sizing:border-box; border-radius:4px; } ``` 3\. 선택상품 삭제, 주문 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **스타일시트 > gd\_button.css | 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(굵기)** 값을 변경할 수 있습니다. **스타일시트 > gd\_button.css | 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; } ```장바구니 폰트 변경하기
 1\. 장바구니 상품명 폰트의 **font-weight(굵기), color(색상)** 값을 변경할 수 있습니다. **order > order.css | css/order/order.css** ```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(색상)** 값을 변경할 수 있습니다. **order > order.css | css/order/order.css** ```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(굵기)** 값을 변경할 수 있습니다. **order > order.css | css/order/order.css** ```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:#000; font-weight:bold; } ``` 4\. 장바구니 항목 타이틀 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **order > order.css | css/order/order.css** ```css .cart .my_buy dl dt { display: table-cell; width: 50%; font-size: 13px; color: #5e5e5e; } ``` 5\. 장바구니 총 상품금액 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **order > order.css | css/order/order.css** ```css .cart .my_buy dl dd { display: table-cell; width: 50%; text-align: right; font-size: 15px; color: #5e5e5e; } ``` 6\. 장바구니 총 합계금액 폰트의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. **order > order.css | css/order/order.css** ```css .cart .my_buy dl.total dd { color: #000; font-size: 17px; } ```포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\ roastrive 스킨에 적용되어 있는 전역변수 --primary-default 컬러코드 **#772614** 를 확인합니다.\ \  2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 common/common.css 스타일 시트를 오픈합니다.4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 **#f15546**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. 5. 아래는 스킨에서 자주 사용하는 값들을 변수화 하였습니다.\ 원하는 값으로 변경하면 일괄 수정되어 적용됩니다. ```css :root { --primary-default: #772614; --primary-hover: #450000; --secondary-default: #c52323; --neutrals-default: #f4f0e9; --neutrals-dark: #000; --font-size: 14px; --font-family: 'Pretendard variable'; --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1780px; --max-width: 1920px; } ```
메뉴 변경하기
\ 1\. 상단 메뉴의 **color(색상), font-size(크기)** 값을 변경합니다. **css/layout/layout.css** ```css .top_member_box > li a { display: inline-block; padding-left: 40px; color: var(--neutrals-dark); font-size: 16px; } ``` 2. 장바구니 담긴상품 수량 폰트의 **color(색상)** 값을 변경합니다. \ (현재는 기본 포인트 컬러 전역변수로 지정되어 있습니다.) **css/layout/layout.css** ```css .top_member_box > li strong { color:var(--primary-default); } ``` 3. 상단 메뉴 배경색상의 **background(배경)** 값을 변경합니다. **css/main/main.css** ```css #header { background: rgba(244, 240, 233, 0.6); } ``` **css/layout/layout.css** ```css #header { position: fixed; width: 100%; top: 0; z-index: 999; background: rgba(fff,fff,fff, 0.6); backdrop-filter: blur(30px); } ``` 4. 전체보기 메뉴의 **background(배경)** 값을 변경합니다. **css/layout/layout.css** ```css body.is-menu-fixed::after { content: ''; position: fixed; top: 0; left: 0; z-index: 998; width: 100%; height: 100%; background: rgba(248, 245, 240, 0.6); backdrop-filter: blur(30px); } ``` 5. 카테고리 메뉴의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경합니다. **css/layout/layout.css** ```css .header_gnb .gnb_allmenu_box a, .header_gnb .gnb_allmenu_box button { font-size: 32px; font-weight: 300; display: inline-block; text-align: left; max-width: calc(100% - 30px); position: relative; } ``` 6. 선택한 메뉴의 폰트 **color**(색상)값을 변경합니다. **css/layout/layout.css** ```css .header_gnb .gnb_allmenu_box li.is-open > button { color: var(--secondary-default); } ```검색창 변경하기
\ 1\. 검색창 인풋박스 사이즈를 변경하려면 **width(너비), height(높이)** 값을 변경합니다. **css/layout/layout.css** ```css .top_search .top_text_cont .top_srarch_text { display: block; width: 358px; height: 40px; background: none; box-sizing: border-box; -moz-transition: all 0.35s; -webkit-transition: all 0.35s; } ``` 2\. 최근검색어 폰트의 **font-size(크기) , font-weight(굵기)** 값을 변경합니다. \ **css/layout/layout.css** ```css .recent_box dt { font-size: 13px; margin-bottom: 10px; font-weight: var(--font-bold); } ``` 3\. 추천상품 폰트의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경합니다. **css/layout/layout.css** ```css .recom_box dt { width: 100%; font-size: 13px; font-weight: var(--font-bold); line-height: 19px; text-align: center; margin-bottom: 10px; } ```하단 영역 변경하기 (폰트/컬러)
\ 1\. 하단 우측 메뉴 폰트의 **font-size(크기)** 값을 변경합니다. **css/layout/layout.css** ```css .content_list h3 { font-size: var(--font-size); margin-bottom: 12px; } .content_list ul li a { font-size: 12px; line-height: 20px; } ``` 2. 하단 쇼핑몰 회사정보의 **font-size(크기), font-weight(굵기), line-height(행간)** 값을 변경합니다. **css/layout/layout.css** ```css .foot_cont_wrap .foot_info { font-size: 12px; font-style: normal; font-weight: var(--font-regular); line-height: 20px; } ``` 3. Information 영역의 **font-size(크기), background(구분선색상)**값을 변경합니다. **css/layout/layout.css** ```css .foot_top h3 { display: inline-block; font-size: var(--font-size); } ``` ```css .foot_top h3::after, .foot_top ul li::after { display: inline-block; content: ''; width: 1px; background: #000; height: 12px; position: relative; left: 12px; } ```웹폰트 적용하기
1\. **관리자 페이지 > 디자인 메뉴**에 접속합니다. 2\. 좌측 하단 폴더트리 내 “**스타일시트/CSS**”를 더블 클릭하여 스타일시트 리스트 중 **reset.css**를 오픈하세요.  3\. reset.css 스타일시트의 6번째 줄에 @import url(’외부 스타일시트 경로’)을 추가합니다. **스타일시트 > reset.css | css/reset.css** ```css @@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css'); @import url('외부 스타일시트 경로'); ``` 4\. font-family 값을 변경할 폰트로 수정 또는 추가하여 적용해주세요.\ (한글 폰트 파일명의 경우 " "입력) **스타일시트 > reset.css | css/reset.css** ```css body, th, td, input, select, textarea, button { font-size: var(--font-size); line-height: 1.5; font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Dotum, '돋움', sans-serif; color: #333; } ``` ※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.[우측 스크롤 영역] 최근 본 상품 변경하기
\ 1\. 최근 본 상품 영역의 **background(배경)** 값을 변경합니다. **css/layout/layout.css** ```css .scroll_right_cont { float: left; width: 76px; padding: 6px 9px 9px 9px; background: none; color: #fff; background: var(--primary-default); } ``` 2\. 타이틀 폰트의 **color(색상), text-align(정렬)** 값을 변경합니다. **css/layout/layout.css** ```css .scroll_right_cont h4 { font-size: var(--font-size); font-style: normal; font-weight: var(--font-regular); line-height: 16px; text-transform: uppercase; } ``` 3\. 최근 본 상품 오버시 **border(선), background(배경)** 값을 변경합니다. **css/layout/layout.css** ```css .scroll_right_cont .src_box { position: absolute; top: -1px; right: -1px; width: 210px; height: 51px; padding: 5px 5px 0 7px; border: 1px solid #999999; background: #fff; text-align: left; z-index: 10; box-sizing: content-box; } ``` 4\. 상품 가격 폰트의 **color(색상)** 값을 변경합니다. **css/layout/layout.css** ```css .scroll_right_cont .src_box strong { display: block; color: var(--primary-default); } ```메인 상품 진열 타이틀 영역 변경하기(폰트/컬러)
 1\. 타이틀 폰트의**font-size(크기)** 값을 변경합니다. **css/goods/list.css** ```css .goods_list_tit h3 { font-size: 40px; font-weight: var(--font-regular); } ``` 2\. 상단 더보기 버튼의 **font-size(크기), font-weight(굵기), border(선)** 값을 변경합니다. **css/goods/list.css** ```css .btn_goods_more .btn_goods_view_more { color: var(--primary-default); font-size: 18px; font-weight: var(--font-regular); } ```상품 리스트 변경하기
 1\. 상품명 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경합니다. **css/goods/list.css** ```css .item_tit_box .item_name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; padding: 0; font-size: 16px; text-overflow: ellipsis; font-weight: normal; overflow: hidden; line-height: 22px; } ``` 2\. 상품가격 폰트의 **color(색상)** 값을 변경합니다. **css/goods/list.css** ```css .item_money_box .item_price { /*display:block;*/ padding: 0px; font-size: 16px; color: var(--neutrals-dark); font-weight: var(--font-bold); } ``` 3\. 할인율 폰트의 **font-size(크기), color(색상)** 값을 변경합니다. **css/goods/list.css** ```css .item_number_box { color: var(--secondary-default); line-height: 18px; } ```상품 상세 상단 변경하기(폰트)
 1\. 상품명 폰트의 **font-size(크기)** 값을 변경합니다. **css/goods/goods.css** ```css .item_detail_tit h3 { width: 405px; font-size: 18px; word-break: break-all; } ``` 2\. 상품 정보 타이틀 폰트의 **color(색상), font-weight(굵기)** 값을 변경합니다. **css/goods/goods.css** ```css .item_detail_list dt { float: left; width: 80px; margin: 0 10px 0 0; color: #888888; font-weight: normal; word-wrap: break-word; } ``` 3\. 상품 가격 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경합니다. **css/goods/goods.css** ```css .item_price dd { margin: -2px 0 0 0; font-size: 16px; font-weight: var(--font-bold); } ``` 4\. 총 합계금액 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경합니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dt { font-size: 16px; font-weight: var(--font-bold); } ``` 5\. 총 합계금액 가격 폰트의 **color(색상), font-weight(굵기)** 값을 변경합니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd { color: var(--primary-default); font-weight: var(--font-bold); } ``` 6\. 총 합계금액 가격 폰트의 **font-size(크기)** 값을 변경합니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd strong { font-size: 20px; } ```상품 상세 상단 변경하기(버튼)
 1\. 장바구니, 찜하기 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬)** 값을 변경합니다. **css/button.css** ```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; } ``` 2\. 바로구매 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬)** 값을 변경합니다. **css/button.css** ```css .btn_add_order, .btn_add_order_related, .btn_add_cart_related { 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 var(--primary-default); background: var(--primary-default); text-align: center; } ```상품 상세 상단 변경하기(라인)
 1\. 상품명 아래 **border-bottom(선) 값을** 변경합니다. **css/goods/goods.css** ```css .item_detail_tit { position: relative; padding: 0 0 10px 0; border-bottom: 1px solid #dbdbdb; } ``` 2. 선택한 옵션 영역의 **border-bottom(선) 값을** 변경합니다. **css/layout/layout.css** ```css .item_detail_list + .item_choice_list table { width: 100%; border-bottom: 1px solid #999999; } ``` 5. 선택한 옵션영역의 **background(배경)** 값을 변경합니다. **css/layout/layout.css** ```css .item_choice_list table { width: 100%; background: #f5f5f5; } ``` 6. 총 합계금액 구분 영역의 **border-top(선)** 값을 변경합니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount { margin: 15px 0 0 0; padding-top: 10px; border-top: 1px solid #dbdbdb; } ```상품 상세 탭 변경하기
 1. 상품 상세 탭 **color(색상), font-weight(굵기), border(선)** 값을 변경합니다. **css/goods/goods.css** ```css .item_goods_tab li a { display: block; margin: 0 0 0 -1px; padding: 10px 0 12px 0; color: #999999; font-size: var(--font-size); border: solid #dadada; border-width: 1px 1px 0; background: #ffffff; } ``` 2. 상품 상세 선택된 탭 **color(색상), font-weight(굵기), border(선)** 값을 변경합니다. **css/goods/goods.css** ```css .item_goods_tab li.on a { padding-top: 18px; margin-top: 8px; color: #333333; font-weight: var(--font-bold); border-bottom: 2px solid #ffffff; } ``` 3\. 상품 상세 상품문의, 상품후기 수량 폰트의 **color(색상)** 값을 변경합니다. **css/goods/goods.css** ```css .item_goods_tab li a strong { color: var(--primary-default); } ```상품 상세 탭 하단영역-변경하기
 1\. 탭 하단영역 타이틀 폰트의 **font-size(크기)** 값을 변경합니다. **css/goods/goods.css** ```css .item_goods_sec h3 { padding: 45px 0 10px 0; font-size: 18px; } ``` 2\. 상품문의 전체보기, 상품후기 전체보기 버튼의 **color(색상), border(선), background(배경), text-align(정렬)** 값을 변경합니다. **css/button.css** ```css .btn_reviews_more, .btn_qna_more { display: inline-block; min-width: 120px; padding: 10px 10px 10px 10px; color: #3e3d3c; border: 1px solid #cccccc; background: #ffffff; text-align: center; } ``` 3\. 상품후기 글쓰기, 상품문의 글쓰기 버튼의 **color(색상), border(선), background(배경), text-align(정렬)** 값을 변경합니다. **css/button.css** ```css .btn_reviews_write, .btn_qna_write { display: inline-block; min-width: 120px; padding: 10px; color: #ffffff; border: 1px solid var(--primary-default); background: var(--primary-default); text-align: center; } ``` 4\. 페이징 선택된 버튼의 **color(색상), font-weight(굵기)** 값을 변경합니다. **css/common/common.css** ```css .pagination .on { color: #333; font-weight: var(--font-bold); } ```상품 상세 상품문의, 상품후기 영역-리스트 내용 영역 변경하기
 1\. 상품후기 내용 펼침 영역의 **background(배경)** 값을 변경합니다. **css/goods/goods.css** ```css .reviews_new_box { text-align: left; background: #f8f8f8; } ``` 2. 상품문의 내용 펼침 영역의 **background(배경)** 값을 변경합니다. **css/goods/goods.css** ```css .qna_new_box { text-align: left; background: #f8f8f8; } ```타이틀 영역 변경하기 (장바구니 / 주문서작성/결제 / 주문완료 )
 1\. 타이틀 폰트의 **color(색상), font-size(크기), color(색상)** 값을 변경합니다. **css/order/order.css** ```css .order_wrap .order_tit h2 { float: left; font-size: 28px; color: #222222; } ``` 2\. 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경합니다. **css/order/order.css** ```css .order_wrap .order_tit .page_on { color: var(--neutrals-dark); font-weight: var(--font-bold); } ``` 3\. 다음 진행 스텝 표시 폰트의 **font-size(크기), color(색상)** 값을 변경합니다. **css/order/order.css** ```css .order_wrap .order_tit ol li { float: left; font-size: var(--font-size); color: #d1d1d1; } ``` 4\. 타이틀 영역 하단의 **border-bottom(선)** 값을 변경합니다. **css/order/order.css** ```css .order_wrap .order_tit { overflow: hidden; border-bottom: 1px solid #dbdbdb; } ```장바구니 폰트/버튼 변경하기(컬러/사이즈/굵기)
 1\. 장바구니 상품금액/배송비/최종 결제금액의 **color(색상), font-size(사이즈), font-weight(굵기)** 값을 변경합니다. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color: var(--neutrals-dark); } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color: var(--neutrals-dark); } ``` 2\. 선택상품주문 버튼은 마우스 오버 전과 오버 시의 **border(선), font-size(사이즈), color(색상)** 값으로 각각 변경합니다. **css/button.css** ```css .btn_order_choice_buy { min-width: 190px; height: 55px; padding: 0 20px 0 20px; color: #3e3d3c; font-weight: bold; font-size: 14px; border: 1px solid #cccccc; background: #fff; cursor: pointer; } ``` ```css .btn_order_choice_buy:hover { color: #333333; border: 1px solid #bbbbbb; } ``` 3\. 전체상품주문 버튼은 마우스 오버 전과 오버 시의 **background(배경) 컬러, border(선), color(색상), font-size(사이즈)** 값으로 각각 변경합니다. **css/button.css** ```css .btn_order_whole_buy { min-width: 190px; height: 55px; padding: 0 20px 0 20px; color: #ffffff; font-size: 14px; border: 1px solid var(--primary-default); background: var(--primary-default); cursor: pointer; font-weight: bold; } ``` ```css .btn_order_whole_buy:hover { border: 1px solid var(--primary-hover); background: var(--primary-hover); } ```주문서 작성/결제 화면 변경하기
**주문서 금액 변경하기**  \- 총 상품금액/배송비/합계 폰트의 **color(색상), font-size(사이즈)** 값을 변경합니다. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color: var(--neutrals-dark); } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight: var(--font-bold); font-size: 18px; color: var(--neutrals-dark); } ``` **최종결제금액, 결제하기 버튼 변경하기**  1\. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경합니다. **css/order/order.css** ```css .payment_final_total dd { display: inline-block; font-size: 30px; color: var(--primary-default); } ``` 2\. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경합니다. **css/button.css** ```css .btn_order_buy { display: inline-block; width: 300px; height: 61px; line-height: 59px; color: #fff; font-size: 20px; border: 1px solid var(--primary-default); background: var(--primary-default); text-align: center; } ```포인트 컬러 일괄 변경하기
\ \ 1\. 컬러코드값 확인\ roastrive 스킨에 적용되어 있는 전역변수 --primary-default 컬러코드 **#772614** 를 확인합니다.2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 gd\_common.css 스타일 시트를 오픈합니다. 4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 Ctrl + F(검색)를 누르고 **#772614**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. 5. 아래는 스킨에서 자주 사용하는 값들을 변수화 하였습니다.\ 원하는 값으로 변경하면 일괄 수정되어 적용됩니다. ```css :root { --primary-default: #772614; --primary-hover: #450000; --secondary-default: #c52323; --neutrals-default:#f4f0e9; --neutrals-dark: #000; --font-size: 12px; --font-family: 'Pretendard variable'; --font-regular: 400; --font-medium: 500; --font-bold: 700; } ```
상단 영역 변경하기
 1\. 상단 영역의 **background(배경)** 값을 변경합니다. \ **css/main/main.css** ```css #header_wrap header { backdrop-filter: blur(30px); background: rgba(244, 240, 233, 0.6); } ``` **css/gd\_layout.css** ```css #header_wrap header { width: 100%; min-width: 320px; z-index: 300; background: var(--neutrals-default); } ``` 2\. 장바구니 담긴상품 수량의 배경 **background(배경)** 값을 변경합니다. **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; } ```슬라이드 메뉴 변경하기
 1\. 상단배너 로그인, 회원가입의 **font-size(크기), color(색상)** 값을 변경합니다. **css/gd\_layout.css** ```css .nav_banner .nav_login ul li a { display: inline-block; font-size: 15px; color: #222222; } ``` 2\. 아이콘 메뉴 영역 메뉴명의 **font-size(크기), color(색상)** 값을 변경합니다. **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(굵기)** 값을 변경합니다. **css/gd\_layout.css** ```css .nav_tabmenu_box .nav_tabmenu li.on span { background: var(--neutrals-dark); color: #fff; font-weight: var(--font-bold); } ``` 4\. 탭버튼 비활성화 시 **background(배경), color(색상)** 값을 변경합니다. **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(굵기)**값을 변경합니다. **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: var(--font-bold); } ``` 6\. 메뉴 선택 시 **color(색상), border-top(선)** 값을 변경합니다. **css/proc/proc.css** ```css .category_side > li > a.on { color: var(--primary-default); } ``` ```css .category_side > li ul { display: none; border-top: 1px solid var(--primary-default); } ```하단 영역 변경하기
 1\. 하단 메뉴버튼의 **font-size(크기), text-align(정렬), font-weight(굵기)**값을 변경합니다. **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\. 하단 회사정보 부분의 **text-align(정렬), font-size(크기)** 값을 변경합니다. **css/gd\_layout.css** ```css #footer footer .ft_info2_box .ft_address { padding: 0px; text-align: left; font-size: var(--font-size); word-break: keep-all; } ``` 4\. 하단 카피라이터 영역의 **font-size(크기), text-align(정렬)** 값을 변경합니다. **css/gd\_layout.css** ```css #footer footer .ft_copy { margin: 24px 0; font-size: 10px; line-height: 15px; text-align: left; font-style: normal; } ``` 5. 고객센터, PC화면 버튼의 **background(배경), color(색상), font-size(크기)** 값을 변경합니다. **css/gd\_layout.css** ```css #footer footer .ft_button_box ul li a { display: block; padding: 12px 0; background: #484848; color: #fff; font-size: 13px; } ``` 6. cs center 영역, bank info 영역의 제목 **font-size(크기), font-weight(굵기), border-bottom(선)** 값을 변경합니다. **css/gd\_layout.css** ```css #footer .main_info_box .main_info dl dt { font-size: 13px; margin: 0 5px; font-weight: var(--font-bold); border-bottom: 1px solid var(--neutrals-dark); padding-bottom: 5px; } ``` 7. cs center 영역 고객센터 번호 **font-size(크기), color(색상)** 값을 변경합니다. **css/gd\_layout.css** ```css #footer .main_info dl dd p.phone a { font-size: 14px; font-weight: var(--font-bold); } ```메인 상품 진열 타이틀/버튼 영역 변경하기(폰트/컬러)
 1\. 타이틀의 **font-size(크기), color(색상), font-weight(굵기**) 값을 변경합니다. **css/proc/proc.css** ```css ._goods_display_main h3 { position: relative; display: block; margin-top: 40px; margin-left: 16px; font-size: 24px; color: #181818; text-align: left; font-weight: var(--font-regular); } ``` 2\. 상단 더보기 버튼의 **font-size(크기), color(색상), font-weight(굵기)** 값을 변경합니다. **css/gd\_button.css** ```css .main_more_btn2 { display: block; width: 70px; padding: 2px 8px; text-align: center; font-size: 14px; font-weight: 600; /* border: 1px solid #9f9f9f; */ color: var(--primary-default); box-sizing: border-box; } ``` 3\. 하단 더보기 버튼의 **font-size(크기), color(색상), background(배경), text-align(정렬)** 값을 변경합니다. **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; } ```상품 리스트 변경하기
 1\. 상품리스트 이미지의 **border(라인)** 값을 변경합니다. **css/goods/list\_01.css** ```css .goods_prd_item2 .goods_prd_img .img_box .img img { width:100%; border:1px solid #e5e5e5; box-sizing:border-box; } ``` 2\. 상품리스트 상품명 폰트의 **font-weight(굵기), font-size(크기)** 값을 변경합니다. **css/goods/goods.css** ```css .prd_name { font-weight: var(--font-medium); line-height: 20px; font-size: calc(var(--font-size) + 2px); } ``` 3\. 상품리스트 가격 폰트의 **font-size(크기)** 값을 변경합니다. **css/goods/goods.css** ```css .fixed_price, .origin-price, .price, .coupon_price1, .dc_price { font-size: calc(var(--font-size) + 2px); } ```info 레이어 폰트 변경하기
 * info 레이어 영역의 **font-size(크기), color(색상), line-height(행간), font-weight(굵기)** 값을 변경합니다. **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: var(--font-bold); } ```상품 상세 상단 영역 변경하기
 1\. 상품명 폰트의 **font-size(크기), color(색상)** 값을 변경합니다. **css/goods/goods.css** ```css .goods_view .detail_info h3 { font-size: 18px; color: #333333; word-break: break-all; } ``` 2\. 상품 가격 폰트의 **font-size(크기), color(색상)** 값을 변경합니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box .price { font-size: 20px; color: #333333; } ``` 3\. 상품 정가(취소선) 폰트의 **color(색상)** 값을 변경합니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box del { color: #999999; } ``` 4\. 상품 상세 정보 제목의 **font-size(크기), color(색상)** 값을 변경합니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_sub_info dl dt { display: table-cell; width: 25%; font-size: var(--font-size); color: #888888; } ``` 5\. 상품 상세 정보 내용의 **font-size(크기), color(색상)** 값을 변경합니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_sub_info dl dd { display: table-cell; width: 75%; font-size: var(--font-size); color: #333333; } ``` 6\. 공유하기, 찜하기 버튼의 **font-size(크기), text-align(정렬), color(색상), font-weight(굵기)** 값을 변경합니다. **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: var(--font-bold); } ```상품 상세 버튼 변경하기
 1\. 장바구니 버튼의 **font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다. **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: var(--font-bold); box-sizing: border-box; } ``` 2\. 바로구매 버튼의 **font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다. **css/gd\_button.css** ```css .btn_add_cart_related, .btn_add_order_related, .detail_order_btn { display: block; width: 100%; padding: 10px 0 10px 0; font-size: 16px; text-align: center; background: var(--primary-default); border: 1px solid var(--primary-default); color: #ffffff; font-weight: var(--font-bold); box-sizing: border-box; } ```상품 옵션 레이어-셀렉트박스 변경하기
 1\. 옵션 레이어의 기본 옵션 폰트의 **font-size(크기), color(색상), text-align(정렬), background(배경)** 값을 변경합니다. **css/gd\_common.css** ```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(선)** 값을 변경합니다. **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(색상)** 값을 변경합니다. **css/gd\_common.css** ```css .layer_option .ly_buy_info .ly_opt li .optbx .optlst li { position: relative; min-height: 42px; border-bottom: 1px solid #c7c7c7; font-weight: var(--font-bold); font-size: 13px; color: #555; line-height: 1.5; vertical-align: middle; padding: 10px; } ```상품 옵션 레이어-항목 변경하기(폰트/버튼)
 1\. 옵션 레이어 쿠폰적용 버튼의 **background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경합니다. **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(정렬)** 값을 변경합니다. **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(정렬)** 값을 변경합니다. **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(정렬)** 값을 변경합니다. **css/gd\_common.css** ```css .total_price_box ul li dl dd { display: table-cell; font-size: 15px; font-weight: var(--font-bold); text-align: right; vertical-align: middle; } ```상품 상세 탭 변경하기
 1\. 상품 상세페이지 탭 폰트의 **color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬)** 값을 변경합니다. **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: var(--neutrals-dark); font-size: 13px; line-height: 13px; font-weight: var(--font-bold); text-align: center; } ``` 2\. 상품후기, 상품문의 개수 폰트의 **font-size(크기), color(색상), line-height(행간)** 값을 변경합니다. **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(선)** 값을 변경합니다. **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 var(--neutrals-dark); } ```상품후기 변경하기
 1\. 상품후기 작성자 및 작성일의 **font-size(크기), color(색)**을 변경합니다. **css/goods/goods.css** ```css .goods_board_review_list li .item_list_summary .board_left .author_box { font-size: var(--font-size); color: #a9a9a9; } ``` 2\. 작성한 상품후기 제목의 **font-size(크기), color(색상)** 값을 변경합니다. **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(색상)** 값을 변경합니다. **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(선)** 값을 변경합니다. **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: var(--font-bold); background: #ffffff; border: 1px solid var(--primary-default); box-sizing: border-box; } ``` 5\. 상품후기 더보기 버튼의 **text-align(정렬), color(색상), font-size(크기), background(배경)** 값을 변경합니다. **css/gd\_button.css** ```css .detail_write_more_btn { display: inline-block; width: 25px; height: 25px; text-align: center; font-size: 0; border: none; background: url('../img/icon/icon_detail_board_arrow.png') no-repeat center; background-size: 14px 8px; } ```상품문의-리스트 변경하기
 1\. 상품문의 게시판 문의 상태표시 아이콘의 **font-size(크기), line-height(행간), background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경합니다. **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(행간)** 값을 변경합니다. **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; } ```상품문의-리스트 내용 변경하기(폰트/버튼)
 1\. 상품문의 내용 폰트의 **color(색상)** 값을 변경합니다. **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(둥근선)** 값을 변경합니다. **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; } ```장바구니 페이지 변경하기
 1\. 쿠폰적용 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경합니다. **css/gd\_button.css** ```css .cart_coupon_apply { display: inline-block; padding: 4px 8px; text-align: center; background: var(--neutrals-dark); border: 1px solid var(--neutrals-dark); color: #ffffff; font-weight: normal; box-sizing: border-box; border-radius: 4px; } ``` 2\. 옵션변경 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경합니다. **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(굵기)** 값을 변경합니다. **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: var(--font-bold); box-sizing: border-box; font-size: 14px; } ``` ```css .cart_select_order_btn { display: inline-block; width: 100%; padding: 10px 0 10px 0; text-align: center; background: #ffffff; border: 1px solid #9f9f9f; color: #494949; font-weight: var(--font-bold); box-sizing: border-box; font-size: 14px; } ``` 4\. 전체주문 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경합니다. **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: var(--font-bold); box-sizing: border-box; font-size: 14px; } ``` 5. 총 합계금액의 **color(색), font-size(크기)**를 변경합니다. **css/order/order.css** ```css .cart .my_buy dl.total dd { color: var(--neutrals-dark); font-size: 17px; } ```주문페이지 변경하기
1\. 주문 상품명의 **font-weight(굵기), color(색상)** 값을 변경합니다. \  **css/order/order.css** ```css .order .pay .my_goods li .info .itembody p.name { padding: 0 0 3px 0; font-weight: var(--font-bold); color: #333; } ``` 2\. 주문 상품 금액의 **font-weight(굵기), color(색상)** 값을 변경합니다. **css/order/order.css** ```css .order .pay .my_goods li .info .itembody .prc { font-weight: var(--font-bold); color: var(--neutrals-dark); } ``` 3\. 배송정보 활성화된 탭의 **color(색상), font-weight(굵기)** 값을 변경합니다. \  **css/order/order.css** ```css .order .order_box .delivery_box .tab_menu ul li.active a { color: #fff; font-weight: var(--font-bold); } ``` 4\. 배송정보 우편번호 버튼의 **background(배경), color(색상), border(선)** 값을 변경합니다. **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: var(--font-bold); box-sizing: border-box; } ``` 5\. 쿠폰 조회 및 적용 버튼의 **background(배경), color(색상), border(선)** 값을 변경합니다. \  **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: var(--font-bold); box-sizing: border-box; } ``` 6\. 결제하기 버튼의 **background(배경), color(색상), font-size(크기), border(선)** 값을 변경합니다. **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: var(--font-bold); box-sizing: border-box; } ```포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\ tting 스킨에 적용되어 있는 전역변수 --primary-default 컬러코드 **#223a5e** 를 확인합니다.\  2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 common/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: 14px; --font-family: 'Pretendard variable'; --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1680px; --max-width: 1920px; } ```
메뉴 변경하기
\ 1\. 상단 메뉴의 **color(색상), font-size(크기)** 값을 변경합니다. **css/layout/layout.css** ```css .top_member_box > li a { display: inline-block; padding-left: 45.5px; color: var(--neutrals-dark); font-size: 16px; } ``` 2. 전체보기 메뉴의 **background-color(배경)** 값을 변경합니다. **css/layout/layout.css** ```css .gnb_allmenu_wrap { display: none; position: fixed; top: 0; left: 0; width: 400px; background: #fff; z-index: 999; } ``` 3. 카테고리 메뉴의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경합니다. **css/layout/layout.css** ```css .header_gnb .gnb_allmenu_box a, .header_gnb .gnb_allmenu_box button { color: var(--neutrals-dark); font-size: 24px; font-weight: var(--font-regular); height: 64px; line-height: 64px; width: 100%; text-align: left; display: block; } ``` 4. 메뉴 마우스 오버시의 **background(배경)**값을 변경합니다. **css/layout/layout.css** ```css .header_gnb .gnb_allmenu_box li:hover, .header_gnb .gnb_allmenu_box li.is-open > button:hover { background-color: var(--neutrals-gray); } ```검색창 폰트 변경하기
\ 1\. 검색창 인풋박스 입력 폰트의 **font-size(크기)** 값을 변경합니다. **css/layout/layout.css** ```css #header .top_search .top_text_cont input { border: none 0; vertical-align: top; font-size: var(--font-size); font-weight: 300; } ``` 2\. 최근검색어 폰트의 **font-size(크기) , font-weight(굵기)** 값을 변경합니다. \ **css/layout/layout.css** ```css .recent_box dt { font-size: 13px; margin-bottom: 10px; font-weight: var(--font-bold); } ``` 3\. 추천상품 폰트의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경합니다. **css/layout/layout.css** ```css .recom_box dt { width: 100%; font-size: 13px; font-weight: var(--font-bold); text-align: center; } ```하단 영역 변경하기 (폰트/컬러)
 1\. 하단 메뉴 폰트의 **background-color(선색상) , font-weight(굵기)** 값을 변경합니다. **css/layout/layout.css** ```css .foot_list ul li a { padding: 0 16px; font-weight: var(--font-bold); position: relative; } .foot_list ul li a::after { content: ''; width: 1px; height: 12px; display: block; position: absolute; top: 4px; right: 0; background: var(--neutrals-dark); } ``` 2. 하단 쇼핑몰 정보의 **font-size(크기), font-weight(굵기), line-height(행간)** 값을 변경합니다. **css/layout/layout.css** ```css .foot_cont .foot_info { font-size: 12px; font-style: normal; font-weight: var(--font-regular); line-height: 20px; } ``` 3. Information, 공지사항 폰트의 **color(색상), font-size(크기), font-weight(굵기), line-height(행간)** 값을 변경합니다. **css/layout/layout.css** ```css .content_info h3 { color: var(--neutrals-dark); font-size: var(--font-size); } .content_info h3, .content_info h3 a { color: var(--neutrals-dark); font-family: 'Pretendard Variable'; font-size: 16px; font-style: normal; font-weight: var(--font-bold); line-height: normal; } .content_info .cs_center p, .content_info .bank_info p, .content_info .notice_list li a { font-family: 'Pretendard Variable'; font-size: 12px; font-style: normal; font-weight: var(--font-regular); line-height: 20px; } ```웹폰트 적용하기
1\. **관리자 페이지 > 디자인 메뉴**에 접속합니다. 2\. 좌측 하단 폴더트리 내 “**스타일시트/CSS**”를 더블 클릭하여 스타일시트 리스트 중 **reset.css**를 오픈하세요.  3\. reset.css 스타일시트의 6번째 줄에 @import url(’외부 스타일시트 경로’)을 추가합니다. **스타일시트 > reset.css | css/reset.css** ```css @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css'); @import url(’외부 스타일시트 경로’) ``` 4\. font-family 값을 변경할 폰트로 수정 또는 추가하여 적용해주세요.\ (한글 폰트 파일명의 경우 " "입력) **스타일시트 > reset.css | css/reset.css** ```css body, th, td, input, select, textarea, button { font-size: var(--font-size); line-height: 1.5; font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Dotum, '돋움', sans-serif; color: #333; } ``` ※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.[우측 스크롤 영역] 최근 본 상품 변경하기
 1\. 최근 본 상품 영역의 **background(배경), color(색상)** 값을 변경합니다. **css/layout/layout.css** ```css .scroll_right_cont { float: left; min-width: 78px; background: var(--neutrals-dark); padding: 9px; color: #fff; } ``` 2\. 타이틀 폰트의 **color(색상), text-align(정렬)** 값을 변경합니다. **css/layout/layout.css** ```css .scroll_right_cont h4 { text-align: center; font-size: 10px; font-style: normal; font-weight: 600; text-transform: uppercase; letter-spacing: -1px; } ``` 3\. 최근 본 상품 오버시 **border(선), background(배경)** 값을 변경합니다. **css/layout/layout.css** ```css .scroll_right_cont .src_box { position: absolute; top: -1px; right: -1px; width: 210px; height: 53px; padding: 5px 5px 0 7px; border: 1px solid #999999; background: #fff; text-align: left; z-index: 10; box-sizing: content-box; } ``` 4\. 상품 가격 폰트의 **color(색상)** 값을 변경합니다. **css/layout/layout.css** ```css .scroll_right_cont .src_box strong { display: block; color: var(--primary-default); } ``` 5\. 페이징 폰트의**color(색상)** 값을 변경합니다. **css/layout/layout.css** ```css .scroll_right_cont .scr_paging strong { padding: 0 2px 0 2px; color: var(--primary-default); } ```메인 상품 진열 타이틀 영역 변경하기(폰트/컬러)
 1\. 타이틀 폰트의**font-size(크기)** 값을 변경합니다. **css/goods/list.css** ```css .goods_list_tit h3 { font-size: 40px; font-weight: var(--font-medium); line-height: 48px; } ``` 2\. 상단 더보기 버튼의 **font-size(크기), font-weight(굵기)** 값을 변경합니다. **css/goods/list.css** ```css .btn_goods_more .btn_goods_view_more { font-size: 24px; font-weight: var(--font-regular); } ```상품 리스트 변경하기
 1\. 상품명 폰트의 **font-size(크기), color(색상)** 값을 변경합니다. **css/goods/list.css** ```css .item_tit_box .item_name { padding: 0; font-size: 16px; font-weight: normal; overflow: hidden; line-height: 22px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } ``` 2\. 상품가격 폰트의 **color(색상)** 값을 변경합니다. **css/goods/list.css** ```css .item_money_box .item_price { /*display:block;*/ padding: 0px; font-size: 16px; color: var(--neutrals-dark); font-weight: var(--font-bold); } ``` 3\. 할인율 폰트의 **font-size(크기), color(색상)** 값을 변경합니다. **css/goods/list.css** ```css .item_number_box { color: var(--secondary-default); line-height: 18px; } ```상품 상세 상단 변경하기(폰트)
 1\. 상품명 폰트의 **font-size(크기)** 값을 변경합니다. **css/goods/goods.css** ```css .item_detail_tit h3 { width:405px; font-size:18px; word-break: break-all; } ``` 2\. 상품 정보 타이틀 폰트의 **color(색상), font-weight(굵기)** 값을 변경합니다. **css/goods/goods.css** ```css .item_detail_list dt { ffloat:left; width:80px; margin:0 10px 0 0; color:#888888; font-weight:normal; word-wrap:break-word; } ``` 3\. 상품 가격 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경합니다. **css/goods/goods.css** ```css .item_price dd { margin: -2px 0 0 0; font-size: 16px; font-weight: bold; } ``` 4\. 총 합계금액 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경합니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dt { font-size: 16px; font-weight: bold; } ``` 5\. 총 합계금액 가격 폰트의 **color(색상), font-weight(굵기)** 값을 변경합니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd { color:var(--primary-default); font-weight:bold; } ``` 6\. 총 합계금액 가격 폰트의 **font-size(크기)** 값을 변경합니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd strong { font-size: 20px; } ```상품 상세 상단 변경하기(버튼)
 1\. 장바구니, 찜하기 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경합니다. **css/button.css** ```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:regular; } ``` 2\. 바로구매 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경합니다. **css/button.css** ```css .btn_add_order, .btn_add_order_related, .btn_add_cart_related { 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 var(--primary-default); background: var(--primary-default); text-align: center; font-weight: regular; } ```상품 상세 상단 변경하기(라인)
 1\. 상품명 아래 **border-bottom(선) 값을** 변경합니다. **css/goods/goods.css** ```css .item_detail_tit { position: relative; padding: 0 0 10px 0; border-bottom: 1px solid #dbdbdb; } ``` 2. 선택한 옵션 영역의 **border-bottom(선) 값을** 변경합니다. **css/layout/layout.css** ```css .item_detail_list + .item_choice_list table { width: 100%; border-bottom: 1px solid #999999; } ``` 5. 선택한 옵션영역의 background(배경) 값을 변경합니다. **css/layout/layout.css** ```css .item_choice_list table { width: 100%; background: #f5f5f5; } ``` 6. 총 합계금액 구분 영역의 border-top(선) 값을 변경합니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount { margin: 15px 0 0 0; padding-top: 10px; border-top: 1px solid #dbdbd ```상품 상세 탭 변경하기
 1. 상품 상세 탭 **color(색상), font-weight(굵기), border(선)** 값을 변경합니다. **css/goods/goods.css** ```css .item_goods_tab li a { display: block; margin: 0 0 0 -1px; padding: 10px 0 12px 0; color: #999999; font-size: var(--font-size); border: solid #dadada; border-width: 1px 1px 0; background: #ffffff; } ``` 2. 상품 상세 선택된 탭 **color(색상), font-weight(굵기), border(선)** 값을 변경합니다. **css/goods/goods.css** ```css .item_goods_tab li.on a { padding-top: 18px; margin-top: 8px; color: #333333; font-weight: var(--font-bold); border-bottom: 2px solid #ffffff; } ``` 3\. 상품 상세 상품문의, 상품후기 수량 폰트의 **color(색상)** 값을 변경합니다. **css/goods/goods.css** ```css .item_goods_tab li a strong { color: var(--primary-default); } ```상품 상세 탭 하단영역-변경하기
 1\. 탭 하단영역 타이틀 폰트의 **font-size(크기)** 값을 변경합니다. **css/goods/goods.css** ```css .item_goods_sec h3 { padding: 45px 0 10px 0; font-size: 18px; } ``` 2\. 상품문의 전체보기, 상품후기 전체보기 버튼의 **color(색상), border(선), background(배경), text-align(정렬)** 값을 변경합니다. **css/button.css** ```css .btn_reviews_more, .btn_qna_more { display: inline-block; min-width: 120px; padding: 10px 10px 10px 10px; color: #3e3d3c; border: 1px solid #cccccc; background: #ffffff; text-align: center; } ``` 3\. 상품후기 글쓰기, 상품문의 글쓰기 버튼의 **color(색상), border(선), background(배경), text-align(정렬)** 값을 변경합니다. **css/button.css** ```css .btn_reviews_write, .btn_qna_write { display: inline-block; min-width: 120px; padding: 10px; color: #ffffff; border: 1px solid var(--primary-default); background: var(--primary-default); text-align: center; } ``` 4\. 페이징 선택된 버튼의 **color(색상), font-weight(굵기)** 값을 변경합니다. **css/common/common.css** ```css .pagination .on { color: #333; font-weight: bold; } ```상품 상세 상품문의, 상품후기 영역-리스트 내용 영역 변경하기
 1\. 상품후기 내용 펼침 영역의 **background(배경)** 값을 변경합니다. **css/goods/goods.css** ```css .reviews_new_box { text-align: left; background: #f8f8f8; } ``` 2. 상품문의 내용 펼침 영역의 **background(배경)** 값을 변경합니다. **css/goods/goods.css** ```css .qna_new_box { text-align: left; background: #f8f8f8; } ```타이틀 영역 변경하기 (장바구니 / 주문서작성/결제 / 주문완료 )
 1\. 타이틀 폰트의 **color(색상), font-size(크기), color(색상)** 값을 변경합니다. **css/order/order.css** ```css .order_wrap .order_tit h2 { float: left; font-size: 28px; color: #222222; } ``` 2\. 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경합니다. **css/order/order.css** ```css .order_wrap .order_tit .page_on { color: var(--neutrals-dark); font-weight: bold; } ``` 3\. 다음 진행 스텝 표시 폰트의 **font-size(크기), color(색상)** 값을 변경합니다. **css/order/order.css** ```css .order_wrap .order_tit ol li { float: left; font-size: 14px; color: #d1d1d1; } ``` 4\. 타이틀 영역 하단의 **border-bottom(선)** 값을 변경합니다. **css/order/order.css** ```css .order_wrap .order_tit { overflow: hidden; border-bottom: 1px solid #dbdbdb; } ```장바구니 폰트/버튼 변경하기(컬러/사이즈/굵기)
 1\. 장바구니 상품금액/배송비/최종 결제금액의 **color(색상), font-size(사이즈), font-weight(굵기)** 값을 변경합니다. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color: var(--neutrals-dark); } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color: var(--neutrals-dark); } ``` 2\. 선택상품주문 버튼은 마우스 오버 전과 오버 시의 **border(선), font-size(사이즈), color(색상)** 값으로 각각 변경합니다. **css/button.css** ```css .btn_order_choice_buy { min-width: 190px; height: 55px; padding: 0 20px 0 20px; color: #3e3d3c; font-weight: bold; font-size: 14px; border: 1px solid #cccccc; background: #fff; cursor: pointer; } ``` ```css .btn_order_choice_buy:hover { color: #333333; border: 1px solid #bbbbbb; } ``` 3\. 전체상품주문 버튼은 마우스 오버 전과 오버 시의 **background(배경) 컬러, border(선), color(색상), font-size(사이즈)** 값으로 각각 변경합니다. **css/button.css** ```css .btn_order_whole_buy { min-width: 190px; height: 55px; padding: 0 20px 0 20px; color: #ffffff; font-size: 14px; border: 1px solid var(--primary-default); background: var(--primary-default); cursor: pointer; font-weight: bold; } ``` ```css .btn_order_whole_buy:hover { border: 1px solid var(--primary-hover); background: var(--primary-hover); } ```주문서 작성/결제 화면 변경하기
**주문서 금액 변경하기**  \- 상품금액/배송비/합계 폰트의 **color(색상), font-size(사이즈)** 값을 변경합니다. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color: var(--neutrals-dark); } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color: var(--neutrals-dark); } ``` **최종결제금액, 결제하기 버튼 변경하기**  1\. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경합니다. **css/order/order.css** ```css .payment_final_total dd { display: inline-block; font-size: 30px; color: var(--primary-default); } ``` 2\. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경합니다. **css/button.css** ```css .btn_order_buy { display: inline-block; width: 300px; height: 61px; line-height: 59px; color: #fff; font-size: 20px; border: 1px solid var(--primary-default); background: var(--primary-default); text-align: center; } ```포인트 컬러 일괄 변경하기
 1. 컬러코드값 확인\ tting 스킨에 적용되어 있는 전역변수 --primary-default 컬러코드 **#223a5e** 를 확인합니다.2. **관리자 > 디자인 메뉴 접속** 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; } ```
상단 영역 변경하기
 1\. 상단 영역의 **background(배경)** 값을 변경합니다. **css/gd\_layout.css** ```css #header_wrap header { width: 100%; min-width: 320px; background: #fff; z-index: 300; } ``` 2\. 장바구니 담긴상품 수량의 배경 **background(배경), color(폰트)** 값을 변경합니다. **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; } ```슬라이드 메뉴 변경하기
 1\. 상단배너 로그인, 회원가입의 **font-size(크기), color(색상)** 값을 변경합니다. **css/gd\_layout.css** ```css .nav_banner .nav_login ul li a { display: inline-block; font-size: 15px; color: #222222; } ``` 2\. 아이콘 메뉴 영역의 **font-size(크기), color(색상)** 값을 변경합니다. **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(굵기)** 값을 변경합니다. **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(색상)** 값을 변경합니다. **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(굵기)**값을 변경합니다. **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(선)** 값을 변경합니다. **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); } ```하단 영역 변경하기
 1\. 하단 메뉴버튼의 **font-size(크기), color(색상)** 값을 변경합니다. **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(크기)**값을 변경합니다. **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(정렬)** 값을 변경합니다. **css/gd\_layout.css** ```css #footer footer .ft_copy { padding-top: 15px; font-size: 9px; font-style: normal; } ``` 5. 고객센터, PC화면 버튼의 **background(배경), color(색상), font-size(크기)** 값을 변경합니다. **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; } ```메인 상품 진열 타이틀 영역 변경하기(폰트/컬러)
 1\. 타이틀의 **font-size(크기), color(색상), font-weight(굵기**) 값을 변경합니다. **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(굵기)** 값을 변경합니다. **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; } ``` 3\. 하단 더보기 버튼의 **font-size(크기), color(색상), background(배경), text-align(정렬)** 값을 변경합니다. **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; } ```상품 리스트 변경하기
 1. 상품리스트 상품명 폰트의 **font-weight(굵기), font-size(크기)** 값을 변경합니다. **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(색상)** 값을 변경합니다. **css/goods/goods.css** ```css .c_price { color: var(--neutrals-dark); } ```info 레이어 폰트 변경하기
 * info 레이어 영역의 **font-size(크기), color(색상), line-height(행간), font-weight(굵기)** 값을 변경합니다. **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; } ```상품 상세 리스트 영역 변경하기
 1\. 상품명 폰트의 **font-size(크기), color(색상)** 값을 변경합니다. **css/goods/goods.css** ```css .goods_view .detail_info h3 { font-size: 18px; color: #333333; word-break: break-all; } ``` 2\. 상품 가격 폰트의 **font-size(크기), color(색상)** 값을 변경합니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box .price { font-size: 20px; color: #333333; } ``` 3\. 상품 정가(취소선) 폰트의 **color(색상)** 값을 변경합니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box del { color: #999999; } ``` 4\. 상품 상세 정보 제목의 **font-size(크기), color(색상)** 값을 변경합니다. **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(색상)** 값을 변경합니다. **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(굵기)** 값을 변경합니다. **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; } ```상품 상세 버튼 변경하기
 1\. 장바구니 버튼의 **font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다. **스타일시트 > 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(굵기)** 값을 변경해줍니다. **스타일시트 > 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; ```상품 옵션 레이어-셀렉트박스 변경하기
 1\. 옵션 레이어의 기본 옵션 폰트의 **font-size(크기), color(색상), text-align(정렬), background(배경)** 값을 변경합니다. **css/gd\_common.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;
}
상품 옵션 레이어-항목 변경하기(폰트/버튼)
 1\. 옵션 레이어 쿠폰적용 버튼의 **background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경합니다. **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(정렬)** 값을 변경합니다. **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(정렬)** 값을 변경합니다. **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(정렬)** 값을 변경합니다. **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; } ```상품 상세 탭 변경하기
 1\. 상품 상세페이지 탭 폰트의 **color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬)** 값을 변경합니다. **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(행간)** 값을 변경합니다. **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(선)** 값을 변경합니다. **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; } ```상품후기 변경하기
 1\. 상품후기 작성자 및 작성일의 **font-size(크기), color(색)**을 변경합니다. **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(색상)** 값을 변경합니다. **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(색상)** 값을 변경합니다. **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(선)** 값을 변경합니다. **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(배경)** 값을 변경합니다. **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; } ```상품문의-리스트 변경하기
 1\. 상품문의 게시판 문의 상태표시 아이콘의 **font-size(크기), line-height(행간), background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경합니다. **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(행간)** 값을 변경합니다. **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; } ```상품문의-리스트 내용 변경하기(폰트/버튼)
 1\. 상품문의 내용 폰트의 **color(색상)** 값을 변경합니다. **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(둥근선)** 값을 변경합니다. **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; } ```장바구니 페이지 변경하기
 1\. 쿠폰적용 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경합니다. **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(굵기)** 값을 변경합니다. **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(굵기)** 값을 변경합니다. **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(굵기)** 값을 변경합니다. **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(크기)**를 변경합니다. **css/order/order.css** ```css .cart .my_buy dl.total dd { color: #000; font-size: 17px; } ```주문페이지 변경하기
1\. 주문 상품명의 **font-weight(굵기), color(색상)** 값을 변경합니다. \  **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(색상)** 값을 변경합니다. **css/order/order.css** ```css .order .pay .my_goods li .info .itembody .prc { font-weight: bold; color: #000; } ``` 3\. 배송정보 활성화된 탭의 **color(색상), font-weight(굵기)** 값을 변경합니다. \  **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(선)** 값을 변경합니다. **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(선)** 값을 변경합니다. \  **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(선)** 값을 변경합니다. **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; } ```포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\ Biki 스킨에 적용되어 있는 기본 컬러 코드 **#D96B33**을 확인합니다. \ 2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ 좌측 하단 폴더트리 내 스타일시트/CSS를 더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ 
4. ctrl+F 검색 후 수정하기\ common 폴더를 더블클릭하여 내에 있는 common.css 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#D96B33**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. 5. 나머지 포인트 컬러도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. 1. 기본 컬러 코드 : **#D96B33** 2. 기본 컬러 마우스 오버 코드 : **#D85715** 3. 서브 컬러 코드 : **#7B91E7** 4. 중립적 컬러 코드 : **#EBEBE0**, **#000000**
메뉴 변경하기
1. 상단 메뉴의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. (현재는 포인트 컬러로 지정되어 있습니다.) **css > layout/layout.css** ```css .top_member_box > li > a{ display:inline-block; font-size:14px; padding-left: 20px; color:var(--neutrals-dark); } ``` 2. 장바구니 담긴상품 수량 폰트의 **color(색상)** 값을 변경할 수 있습니다.\ (현재는 포인트 컬러로 지정되어 있습니다.) **css > layout/layout.css** ```css .top_member_box > li strong { padding: 3px 6px 5px; font-size: 10px; background: var(--primary-default); border-radius: 50%; color: #fff; text-decoration: none; vertical-align: top; } ``` 3. 상단 메뉴 하단의 **color(색상)** 값을 변경할 수 있습니다. **css > layout/layout.css** ```css #header { position: absolute; top: 40px; left: 0; right: 0; min-width: 1450px; width: 100%; } ``` 4. 전체보기 메뉴의 **background-color(배경)** 값을 변경할 수 있습니다. **css > layout/layout.css** ```css .btn_all_menu_open { background-color: transparent; } ``` 5. 카테고리 메뉴의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **css > layout/layout.css** ```css .header_gnb .gnb_allmenu_box a, .header_gnb .gnb_allmenu_box button { display: block; width: 100%; height: 64px; line-height: 64px; color: var(--neutrals-dark); font-size: 24px; font-weight: 400; text-align: left; } ``` 6. 카테고리 메뉴 마우스 오버시의 **background(배경), color(색상)** 값을 변경할 수 있습니다. (현재는 포인트 컬러로 지정되어 있습니다.) **css > layout/layout.css** ```css .header_gnb .gnb_allmenu_box li:hover, .header_gnb .gnb_allmenu_box li.is-open > button:hover { background-color:var(--primary-default); color: var(--neutrals-dark); } ```검색창 폰트 변경하기
검색창 인풋박스 입력 폰트의 **font-size(크기)** 값을 변경할 수 있습니다.(font-size를 추가해주세요.) **css/common/common.css** ```css #header .top_search .top_text_cont .top_srarch_text { display: block; float: right; width: 100%; height: 100%; padding-right: 35px; border-bottom: 1px solid var(--neutrals-dark); box-sizing: border-box; background: transparent; } ``` 2\. 최근검색어 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다.\ **css/common/common.css** ```css .recent_box dt { font-size: 13px; margin-bottom: 10px; font-weight: bold; } ``` 3\. 추천상품 폰트의 **font-size(크기), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **css/common/common.css** ```css .recom_box dt { width: 100%; font-size: 13px; font-weight: var(--font-bold); line-height: 19px; text-align: center; margin-bottom: 10px; } ```푸터 변경하기 (폰트/컬러)
 1\. 푸터 메뉴 폰트의 **color(색상), 왼쪽 선** 값을 변경할 수 있습니다. **css/layout/layout.css** (1) 색상 ```css .foot_list ul li a { display: block; padding: 0 16px; font-size: 16px; color: #fff; font-style: normal; font-weight: 700; } ``` (2) 선 => background를 수정해주세요..foot_list ul .divider {
display: inline-block;
width: 1px;
background-color: #fff;
height: 12px;
}
웹폰트 적용하기
1\. **관리자 페이지 > 디자인 메뉴**에 접속합니다. 2\. 좌측 하단 폴더트리 내 “**스타일시트/CSS**”를 더블 클릭하여 스타일시트 리스트 중 **reset.css**를 오픈하세요.  3\. reset.css 스타일시트의 5번째 줄에 @import url(’외부 스타일시트 경로’)을 추가합니다. **스타일시트 > reset.css | css/reset.css** ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); /* 5번째줄에 추가 */ ``` 4\. 8번째 줄의 font-family의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Nanum Gothic(변경할 폰트명)으로 수정하세요.\ (한글 폰트 파일명의 경우 " "입력) **스타일시트 > reset.css | css/reset.css** ```css .godo * { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; } ``` ※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.고객센터, 뱅킹 정보 변경하기(폰트, 컬러, 크기)
 1\. 고객센터 폰트의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .content_info h3, .content_info h3 a { color: #fff; font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; margin-bottom: 12px; } /* color값은 디자인가이드에 맞게 사용 */ ``` 2\. 고객센터 이용시간 폰트의 **color(색상)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .content_info .cs_center p, .content_info .bank_info p, .content_info .notice_list li a { color: #fff; font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; } ``` 3\. 숫자 폰트의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .content_info .bank_info strong { color:#fff; font-weight: 400; } ``` 4\. 은행이름 폰트의 **color(색상)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .content_info .bank_info em { font-weight:400; } ```최근 본 상품 변경하기
 1\. 최근 본 상품 영역의 **background(배경)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .scroll_right_cont { float:left; min-width:72px; padding:0px; background:none; } ``` 2\. 타이틀 폰트의 **color(색상), text-align(정렬)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .scroll_right_cont h4 { text-align: center; font-size: 11px; color: #333; font-style: normal; font-weight: 700; line-height: 12px; text-transform: uppercase; } ``` 3\. 최근 본 상품 오버시 **border(선), background(배경)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .scroll_right_cont .src_box { position:absolute; top:0; right:74px; width:max-content; height:100%; padding:5px 5px 0 7px; border:1px solid #999999; background:#ffffff; text-align:left; z-index:10; } ``` 4\. 상품 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .scroll_right_cont .src_box strong { display: block; color: var(--primary-default); } ``` 5\. 페이징 폰트의 **color(색상)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .scroll_right_cont .scr_paging strong { padding: 0 2px 0 2px; color: var(--neutrals-dark); } ```진열타입 타이틀 변경하기(폰트/컬러)
 1\. 타이틀 폰트의**font-size(크기)** 값을 변경할 수 있습니다. **goods > list.css | css/goods/list.css** ```css .goods_list_tit h3 { color: var(--neutrals-dark); font-weight: 500; font-size: 40px; } ``` 2\. 타이틀 영역 하단의 **border-bottom(선)** 값을 변경할 수 있습니다. **goods > main.css | css/main/main.css** ```css .goods_list_tit { /* padding: 100px 0 10px 0; */ /* border-bottom: 1px solid #ececec; */ line-height: 1; position: relative; } ``` **(3) 세번째 타이틀 영역** 3\. 더보기 버튼의 **font-size(크기), font-weight(굵기), border(선)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .main_goods_cont .btn_goods_more a { padding: 10px 40px; color: var(--primary-default); font-size: 18px; font-weight: 400; border: 1px solid var(--primary-default);; } ```상품 리스트 변경하기
 1\. 상품 이미지의 **text-align(정렬), color(색상)** 값을 변경할 수 있습니다. **goods > list.css | css/goods/list.css** ```css .item_cont { padding: 0 6px; text-align: left; color: #1c1c1c; margin-top:20px; } ``` 2\. 상품명 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **goods > list.css | css/goods/list.css** ```css .item_tit_box .item_name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; padding: 0; font-size: 16px; text-overflow: ellipsis; font-weight: normal; overflow: hidden; line-height: 22px; color: var(--neutrals-dark); } ``` 3\. 정상가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **goods > list.css | css/goods/list.css** ```css .item_money_box del { display: block; color: #888888; } ``` 4\. 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **goods > list.css | css/goods/list.css** ```css .item_money_box .item_price { /*display:block;*/ padding:0px; font-size:16px; color:var(--neutrals-dark); font-weight:bold; } ```상품 상세 상단 변경하기(폰트)
 1\. 상품명 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .item_detail_tit h3 { width:405px; font-size:18px; word-break: break-all; } ``` 2\. 상품 정보 타이틀 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .item_detail_list dt { float:left; width:80px; margin:0 10px 0 0; color:#888888; font-weight:normal; word-wrap:break-word; } ``` 3\. 상품 가격 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .item_price dd { margin: -2px 0 0 0; font-size: 16px; font-weight: bold; } ``` 4\. 총 합계금액 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .item_tatal_box .total_amount dt { font-size: 16px; font-weight: bold; } ``` 5\. 총 합계금액 가격 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .item_tatal_box .total_amount dd { color:var(--primary-default); font-weight:bold; } ``` 6\. 총 합계금액 가격 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .item_tatal_box .total_amount dd strong { font-size: 20px; } ```상품 상세 상단 변경하기(버튼)
 1\. 공유하기 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **스타일시트 > button.css | css/button.css** ```css .btn_gray_list a, .btn_gray_list button { display:inline-block; padding:0 0 0 11px; border:1px solid #999; vertical-align:middle; } ``` 2\. 조건별 배송 버튼의 **font-size(크기), background(배경)** 값을 변경할 수 있습니다. **스타일시트 > button.css | css/button.css** ```css .btn_gray_list .btn_gray_small { font-size:var(--font-size); } ``` 3\. 장바구니 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다. **스타일시트 > button.css | css/button.css** ```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:400; } ``` 4\. 바로구매 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다. **스타일시트 > button.css | css/button.css** ```css .btn_add_order, .btn_add_order_related, .btn_add_cart_related { 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 var(--primary-default); background:var(--primary-default); text-align:center; font-weight:400; } ```상품 상세 상단 변경하기(라인)
 1\. 셀렉트 영역의 **border(선), background(배경)** 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```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(선) 값을** 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .item_detail_tit { position: relative; padding: 0 0 10px 0; border-bottom: 1px solid #dbdbdb; } ``` 3\. 리스트 항목 구분선의 **border-top(선) 값을** 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```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(선) 값을** 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .item_detail_list + .item_choice_list table { width: 100%; border-bottom: 1px solid #999999; } ``` 5. 선택한 옵션영역의 background(배경) 값을 변경할 수 있습니다. **layout > layout.css | css/layout/layout.css** ```css .item_choice_list table { width: 100%; background: #f5f5f5; } ``` 6. 총 합계금액 구분 영역의 border-top(선) 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .item_tatal_box .total_amount { margin: 15px 0 0 0; padding-top: 10px; border-top: 1px solid #dbdbd ```상품 상세 탭 변경하기
 1\. 상품 상세 탭 선택시 **color(색상), font-weight(굵기), border(선)** 값을 변경할 수 있습니다.해줍니다. **goods> goods.css | css/goods/goods.css** ```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(색상)** 값을 변경할 수 있습니다. **goods> goods.css | css/goods/goods.css** ```css .item_goods_tab li a strong { color: var(--primary-default); } ```상품 상세 상품문의 영역-리스트 변경하기
 1\. 상품 문의 타이틀 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **goods> goods.css | css/goods/goods.css** ```css .item_goods_sec h3 { padding: 45px 0 10px 0; font-size: 18px; } ``` 2\. 상품문의 전체보기 버튼의 **color(색상), font-weight(굵기), border(선), background(배경), text-align(정렬)** 값을 변경할 수 있습니다. **스타일시트> button.css | css/button.css** ```css .btn_reviews_more, .btn_qna_more { display: inline-block; min-width: 120px; padding: 10px 10px 10px 10px; color: #ab3e55; font-weight: 400; border: 1px solid #cccccc; background: #ffffff; text-align: center; } ``` 3\. 상품문의 글쓰기 버튼의 **color(색상), font-weight(굵기), border(선), background(배경), text-align(정렬)** 값을 변경할 수 있습니다. **스타일시트> button.css | css/button.css** ```css .btn_reviews_write, .btn_qna_write { display: inline-block; min-width: 120px; padding: 10px 10px 10px 10px; color: #ffffff; font-weight: 400; border: 1px solid var(--primary-default); background: var(--primary-default); text-align: center; } ``` 4\. 페이징 버튼의 **color(색상), font-weight(굵기), border(선)** 값을 변경할 수 있습니다. **스타일시트> common.css | css/common.css** ```css .pagination .on { color: #333; font-weight: bold; ```상품 상세 상품문의 영역-리스트 내용 변경하기
 1\. 수정 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **스타일시트> button.css | css/button.css** ```css .btn_gray_list a, .btn_gray_list button { display: inline-block; padding: 0 0 0 11px; border: 1px solid #999; vertical-align: middle; } ``` 2\. 상품문의 내용 펼침 영역의 **background(배경)** 값을 변경할 수 있습니다. **goods> goods.css | css/goods/goods.css** ```css .qna_new_box { text-align: left; background: #f8f8f8; } ```장바구니 타이틀 변경하기
 1\. 장바구니 타이틀 폰트의 **color(색상), font-size(크기), color(색상)** 값을 변경할 수 있습니다. **order> order.css | css/order/order.css** ```css .order_wrap .order_tit h2 { float: left; font-size: 28px; color: #222222; } ``` \ 2\. 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **order> order.css | css/order/order.css** ```css .order_wrap .order_tit .page_on { color: #000; font-weight: bold; } ``` 3\. 다음 진행 스텝 표시 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **order> order.css | css/order/order.css** ```css .order_wrap .order_tit ol li { float: left; font-size: 14px; color: #d1d1d1; } ``` 4\. 장바구니 타이틀 폰트 하단의 **border-bottom(선)** 값을 변경할 수 있습니다. **order> order.css | css/order/order.css** ```css .order_wrap .order_tit { overflow: hidden; border-bottom: 1px solid #dbdbdb; } ```주문서 작성/결제 화면 변경하기
**주문서 금액 변경하기**  \- 상품금액/배송비/합계 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **스타일시트 > order.css | css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` **최종결제금액, 결제하기 버튼 변경하기**  1\. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **스타일시트 > order.css | css/order/order.css** ```css .payment_final_total dd { display:inline-block; font-size:30px; color:var(--primary-default); } ``` 2\. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경할 수 있습니다. **스타일시트 > button.css | css/button.css** ```css .btn_order_buy { display:inline-block; width:300px; height:61px; line-height:59px; color:#fff; font-size:20px; border:1px solid var(--primary-default); background:var(--primary-default); text-align:center; } ```장바구니 폰트/버튼 변경하기(컬러/사이즈/굵기)
 1\. 장바구니 상품금액/배송비/최종 결제금액의 **color(색상), font-size(사이즈), font-weight(굵기)** 값을 변경할 수 있습니다. **스타일시트 > order.css | css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` 2\. 선택상품주문 버튼은 마우스 오버 전(.btn\_order\_choice\_buy) 과 오버 시(.btn\_order\_choice\_buy:hover)의 **border(선), font-size(사이즈), color(색상)** 값으로 각각 변경할 수 있습니다. **스타일시트 > button.css | css/order/button.css** ```css .btn_order_choice_buy { min-width:190px; height:55px; padding:0 20px 0 20px; color:#3e3d3c; font-weight:bold; font-size:14px; border:1px solid #cccccc; background:#fff; cursor:pointer; } ``` ```css .btn_order_choice_buy:hover { color:#333333; border:1px solid #bbbbbb; } ``` 3\. 전체상품주문 버튼은 마우스 오버 전(.btn\_order\_whole\_buy) 과 오버 시(.btn\_order\_whole\_buy:hover) 의 **background(배경) 컬러, border(선), color(색상), font-size(사이즈)** 값으로 각각 변경할 수 있습니다. **스타일시트 > button.css | css/button.css** ```css .btn_order_whole_buy { min-width:190px; height:55px; padding:0 20px 0 20px; color:#ffffff; font-size:14px; border:1px solid var(--primary-default); background:var(--primary-default); cursor:pointer; font-weight:bold; } ```.btn_order_whole_buy:hover {
border:1px solid var(--primary-hover);
background:var(--primary-hover);
}
포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\ Mygreek 스킨에 적용되어 있는 기본 컬러 코드 **#D96B33**을 확인합니다. 2. **디자인 스킨 리스트 접속** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트 3. **스타일시트/CSS 변경** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트\ 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ \ 4. ctrl+F 검색 후 수정하기\ gd\_common.css 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#D96B33**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.
5. 나머지 포인트 컬러도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. 1. 기본 컬러 코드 : **#D96B33** 2. 기본 컬러 마우스 오버 코드 : **#D85715** 3. 서브 컬러 코드 : **#7B91E7** 4. 중립적 컬러 코드 : **#EBEBE0**, **#000000**
푸터 변경하기
 1\. 푸터 메뉴버튼의 **font-size(크기), color(색상), text-align(정렬), font-weight(굵기) letter-spacing(자간)** 값을 변경할 수 있습니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css** ```css #footer footer .ft_info2_box .ft_menu li a { display: block; padding: 0; font-size: 12px; color: #fff; text-align: left; letter-spacing: -1px; } ``` 2\. 푸터 개인정보 메뉴버튼의 **color(색상), font-weight(굵기)** 값을 변경해줍니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css** ```css #footer footer .ft_info2_box .ft_menu li a.privacy { color: #fff; font-weight: bold; } ``` 3\. 푸터 정보 부분의 **text-align(정렬), font-size(크기), color(색상)** 값을 변경해줍니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css** ```css #footer footer .ft_info2_box .ft_address { margin-top: 15px; padding:0px; text-align:left; font-size:12px; color:#fff; word-break:keep-all; } ``` 4\. 푸터 카피라이트 영역의 **color(색상), font-size(크기), text-align(정렬)** 값을 변경해줍니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css** ```css #footer footer .ft_copy { padding:24px 0 0; color:#fff; font-size:10px; text-align:left; font-style:normal; font-weight: 400; } ```고객센터, PC화면 버튼 변경하기
 1\. 고객센터, PC화면 버튼의 **background(배경), color(색상), font-size(크기)** 값을 변경할 수 있습니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css** ```css #footer footer .ft_button_box ul li a { display:block; padding:8px 0; background:#000; color:#fff; font-size:13px; } ```상단 헤더 영역 변경하기
 1\. GNB영역의 **border-bottom(선)** 값을 변경할 수 있습니다. **> gd\_layout.css | css/gd\_layout.css** ```css #header_wrap header .header_box { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 12px; height: 62px; background: var(--neutrals-gray); border-bottom: 1px solid #000; } ``` 2\. 장바구니 담긴상품 수량의 배경 **background(배경)** 값을 변경할 수 있습니다. **> gd\_layout.css | css/gd\_layout.css** ```css #header_wrap header .header_box .cart_count { position: absolute; top: 8px; right: 0; display: block; padding: 0px 5px; line-height: 15px; border-radius: 100%; color: #fff; background: var(--primary-default); vertical-align: middle; font-size: 10px; } ```슬라이드 메뉴 변경하기
 1\. 상단배너의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css** ```css .nav_banner .nav_login ul li a { display: inline-block; font-size: 15px; color: #222222; } ``` 2\. 아이콘 메뉴 영역의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **스타일시트 > gd\_layout.css | 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(굵기)** 값을 변경할 수 있습니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css** ```css .nav_tabmenu_box .nav_tabmenu li.on span { background: var(--primary-default); color: #fff; font-weight: bold; } ``` 4\. 탭버튼 비활성화 시 **background(배경), color(색상)** 값을 변경할 수 있습니다. **스타일시트 > gd\_layout.css | 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(색상)** 값을 변경할 수 있습니다. **proc > proc.css | css/proc/proc.css** ```css .category_side > li a { position: relative; display: block; padding: 12px 0 12px 0; font-size: 16px; color: #262626; } ``` 메뉴 폰트 **font-weight(굵기)** 값을 변경할 수 있습니다. **proc > proc.css | css/proc/proc.css** ```css .category_side > li > a { font-weight: bold; } ``` 6\. 메뉴 폰트 선택 시 **color(색상)** 값을 변경할 수 있습니다. **proc > proc.css | css/proc/proc.css** ```css .category_side > li > a.on { color: var(--primary-default); } ```고객센터 폰트 변경하기
 1\. 고객센터 타이틀의 **font-size(크기), font-weight(굵기), border-bottom(선)** 값을 변경할 수 있습니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css**.main .main_info_box .main_info dl dt {
font-size: 13px;
margin:0 5px;
font-weight: bold;
border-bottom: 1px solid #fff;
}
.main .main_info dl dd p.phone a {
font-size: 14px;
font-weight: 700;
}
상품 리스트 스타일 변경하기
 1\. 상품리스트 이미지의 **border(라인)** 값을 변경할 수 있습니다. **goods.css | css/goods/goods.css** ```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(크기)** 값을 변경할 수 있습니다. **goods.css | css/goods/goods.css** ```css .prd_name { font-weight: var(--font-medium); line-height: 20px; font-size: calc(var(--font-size) + 2px); } ``` 3\. 상품리스트 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **goods.css | css/goods/goods.css** ```css .c_price { color: #000; } ```진열타입 타이틀 변경하기
 1\. 타이틀의 **font-size(크기), color(색상), border-bottom(선), font-weight(굵기**) 값을 변경할 수 있습니다. **proc > proc.css | css/proc/proc.css** ```css ._goods_display_main h3 { position: relative; display: block; /* margin-top: 40px; */ margin-left: 16px; font-size: 24px; color: #181818; text-align: left; font-weight: 400; } ``` 2\. 더보기 버튼의 **background(배경), font-size(크기), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **스타일시트 > main.css | css/main/main.css** ```css .main .main_more_btn { width: 120px; height: 40px; padding: 0; border: 1px solid var(--primary-default); color: var(--primary-default); font-weight: 400; background: transparent; } ```상품후기 변경하기
 1\. 상품 후기 게시판 타이틀의 **background(배경), border-bottom(선)** 값을 변경할 수 있습니다. **스타일시트 > gd\_plus\_review\.css | css/gd\_plus\_review\.css** ```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(색상)** 값을 변경할 수 있습니다. **스타일시트 > gd\_plus\_review\.css | css/gd\_plus\_review\.css** ```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(색상)** 값을 변경할 수 있습니다. **스타일시트 > gd\_plus\_review\.css | css/gd\_plus\_review\.css** ```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: var(--primary-default); vertical-align: middle; } ``` 4\. 리뷰등록 버튼의 **background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **스타일시트 > gd\_plus\_review\.css | css/gd\_plus\_review\.css** ```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(선)** 값을 변경할 수 있습니다. **스타일시트 > gd\_button.css | 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; } ``` 6\. 상품평 더보기 버튼의 **text-align(정렬), color(색상), font-size(크기), background(배경)** 값을 변경할 수 있습니다. **스타일시트 > gd\_button.css | 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; } ```옵션 레이어-셀렉트박스 변경하기
 1\. 옵션 레이어의 기본 옵션 폰트의 **font-size(크기), color(색상), text-align(정렬), background(배경)** 값을 변경할 수 있습니다. **스타일시트 > gd\_common.css | css/gd\_common.css** ```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(선)** 값을 변경할 수 있습니다. **스타일시트 > gd\_common.css | 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(색상)** 값을 변경할 수 있습니다. **스타일시트 > gd\_common.css | 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; } ```옵션 레이어-항목 변경하기(폰트/버튼)
 1\. 옵션 레이어 쿠폰적용 버튼의 **background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경할 수 있습니다. **스타일시트 > gd\_button.css | 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(정렬)** 값을 변경할 수 있습니다. **스타일시트 > css/gd\_common.css | 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(정렬)** 값을 변경할 수 있습니다. **스타일시트 > css/gd\_common.css | 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(정렬)** 값을 변경할 수 있습니다. **스타일시트 > css/gd\_common.css | 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; } ```상품문의-리스트 변경하기
 1\. 상품문의 게시판 문의 상태표시 아이콘의 **font-size(크기), line-height(행간), background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경할 수 있습니다. **goods > goods.css | 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 #0CC472; } ``` 2\. 문의 제목 폰트의 **font-size(크기), color(색상), line-height(행간)** 값을 변경할 수 있습니다. **goods > goods.css | 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; } ```상품문의-비밀번호 인증 레이어 변경하기
 1\. 비밀번호 인증 레이어의 **height(높이), background(배경), border(선)** 값을 변경할 수 있습니다. **board > board.css | css/board/board.css** ```css .cite_layer .wrap { position: relative; height: 190px; background: #ffffff; border: 1px solid #555555; } ``` \ 2\. 비밀번호 인증 타이틀의 **height(높이), background(배경), border(선)** 값을 변경할 수 있습니다. **board > board.css | css/board/board.css** ```css .cite_layer .wrap h4 { height: 27px; padding: 13px 0 0 17px; background: #f4f4f4; color: #222222; } ``` 3\. 비밀번호 인증 레이어 확인 버튼의 **color(색상), border-radius(둥근선), background(배경)** 값을 변경할 수 있습니다. **스타일시트 > gd\_button.css | css/gd\_button.css** ```css .d_pw_confirm_btn { display:inline-block; padding:5px 15px 5px 15px; color:#ffffff; border:1px solid var(--primary-default); border-radius:3px; background:var(--primary-default);; } ```상품문의-리스트 내용 변경하기(폰트/버튼)
 1\. 상품문의 내용 폰트의 **color(색상)** 값을 변경할 수 있습니다. **goods > goods.css | 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(둥근선)** 값을 변경할 수 있습니다. **스타일시트 > gd\_button.css | 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; } ```상세 타이틀 및 info 레이어 폰트 변경하기
 1\. 상품 상세 타이틀의 **font-size(크기), line-height(행간), text-align(정렬)** 값을 변경할 수 있습니다. **스타일시트 > gd\_layout.css | css/gd\_layout.css** ```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(굵기)** 값을 변경할 수 있습니다. **goods > goods.css | 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; } ```상품 상세 탭 변경하기
 1\. 상품 상세페이지 탭 폰트의 **color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **goods > goods.css | 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(행간)** 값을 변경할 수 있습니다. **goods > goods.css | 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(선)** 값을 변경할 수 있습니다. **goods > goods.css | 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; } ```상품 상세 버튼 변경하기
 1\. 장바구니 버튼의 **font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **스타일시트 > 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(굵기)** 값을 변경할 수 있습니다. **스타일시트 > gd\_button.css | css/gd\_button.css** ```css .btn_add_cart_related, .btn_add_order_related, .detail_order_btn { display: block; width: 100%; padding: 10px 0 10px 0; font-size: 16px; text-align: center; background: var(--primary-default); border: 1px solid var(--primary-default); color: #ffffff; font-weight: bold; box-sizing: border-box; ```상품 상세 리스트 영역 변경하기
 1\. 상품명 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .goods_view .detail_info h3 { font-size: 18px; color: #333333; word-break: break-all; } ``` 2\. 상품 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box .price { font-size: 20px; color: #333333; } ``` 3\. 상품 할인 전 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **goods > goods.css | css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box del { color: #999999; } ``` 4\. 상품 상세페이지 리스트 제목**font-size(크기), color(색상)** 값을 변경할 수 있습니다. **goods > goods.css | 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(색상)** 값을 변경할 수 있습니다. **goods > goods.css | 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(정렬), background(배경), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **goods > goods.css | 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; } ```장바구니 버튼 변경하기
 1\. 쿠폰적용 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **스타일시트 > gd\_button.css | 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(굵기)** 값을 변경할 수 있습니다. **스타일시트 > gd\_button.css | css/gd\_button.css** ```css .cart_option_modify { display:inline-block; padding:4px 8px; text-align:center; background:#000; border:1px solid #9f9f9f; color:#494949; font-weight:normal; box-sizing:border-box; border-radius:4px; } ``` 3\. 선택상품 삭제, 주문 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **스타일시트 > gd\_button.css | 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(굵기)** 값을 변경할 수 있습니다. **스타일시트 > gd\_button.css | 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; } ```장바구니 폰트 변경하기
 1\. 장바구니 상품명 폰트의 **font-weight(굵기), color(색상)** 값을 변경할 수 있습니다. **order > order.css | css/order/order.css** ```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(색상)** 값을 변경할 수 있습니다. **order > order.css | css/order/order.css** ```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(굵기)** 값을 변경할 수 있습니다. **order > order.css | css/order/order.css** ```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:#000; font-weight:bold; } ``` 4\. 장바구니 항목 타이틀 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **order > order.css | css/order/order.css** ```css .cart .my_buy dl dt { display: table-cell; width: 50%; font-size: 13px; color: #5e5e5e; } ``` 5\. 장바구니 총 상품금액 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **order > order.css | css/order/order.css** ```css .cart .my_buy dl dd { display: table-cell; width: 50%; text-align: right; font-size: 15px; color: #5e5e5e; } ``` 6\. 장바구니 총 합계금액 폰트의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. **order > order.css | css/order/order.css** ```css .cart .my_buy dl.total dd { color: #000; font-size: 17px; } ```포인트 컬러 일괄 변경하기
1. Hahanotte스킨에 적용되어 있는 기본 컬러 코드 **#0540be 입니다** 2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ \- 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ \- common.css를 더블 클릭 하여 common/common.css 파일을 엽니다.\ 4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경할 수 있습니다. ``` :root { --primary-default: #0540be; /* 포인트 컬러 */ --primary-hover: #00319a; /* 포인트 컬러 hover */ --secondary-default: #e7ff34; /* 서브 컬러 */ --neutrals-gray: #edebe5; --neutrals-dark: #000; --font-size: 14px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; --min-width: 1800px; /* 화면이 최소로 작아질 수 있는 너비 */ --max-width: 1920px; /* 화면이 최대한 넓어 질 수 있는 너비 */ } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경할 수 있습니다.
GNB 변경하기
\  1. GNB 메뉴에 마우스를 올리면 헤더 영역 전체 **background-color(배경색)**이 생기며 이 값을 변경할 수 있습니다. 2. GNB메뉴, 사용자 메뉴(로그인, 마이페이지 등) Color(폰트 컬러)를 수정 할 수 있습니다. **css > layout/layout.css**body:not(.body-main) #header_warp,
#header_warp.is-scroll,
#header_warp.is-active {
background-color: rgba(255, 255, 255, 0.9); /* 배경색 변경 */
color: #000; /* GNB메뉴와, 사용자 메뉴(로그인, 마이페이지...) 색 변경 */
}
#header_warp:has(.gnb.is-active)::after {
content: '';
position: absolute;
width: 100%;
height: 142px;
background-color: rgba(255, 255, 255, 0.9); /* 배경색 변경 */
}
검색창 폰트 변경하기
1. 입력 폰트 Color(폰트 색),배경 이미지 (background-image), 배경 색(background-color)를 바꿀 수 이습니다. **css/layout/layout.css**#header .top_search .top_text_cont .top_srarch_text {
display: block;
float: right;
background: #000 url(../../img/common/btn/btn_top_search.svg) no-repeat right; /* 돋보기 아이콘 변경 */
width: 34px; /* 너비 변경 */
height: 34px; /* 너비 변경 */
border-radius: 8px 8px;
box-sizing: border-box;
color: #fff; /* 폰트색 변경 */
-moz-transition: all 0.35s;
-webkit-transition: all 0.35s;
}
푸터 변경하기 (폰트/컬러)
 1\. 푸터의 background-color(배경색)을 바꿀 수 있습니다. **css/layout/layout.css** ```css #footer_wrap { background-color: var(--primary-default); } ``` 2\. 푸터 정보영역 폰트의 **color(색상), font-size(크기), line-height(행간)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .foot_list ul li a { padding: 0 16px; font-weight: 700; color: red; /* 컬러 변경 */ } .foot_cont .foot_info { color: #860e0e; /* 컬러 변경 */ font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; } /* 아래 코드 추가 */ .foot_cont .foot_info a { color: red; /* 컬러 변경 */ } ```웹폰트 적용하기
1\. **관리자 페이지 > 디자인 메뉴**에 접속합니다. 2\. 좌측 하단 폴더트리 내 “**스타일시트/CSS**”를 더블 클릭하여 스타일시트 리스트 중 **reset.css**를 오픈하세요.  3\. reset.css 스타일시트의 3번째 줄에 @import url(’외부 스타일시트 경로’)을 변경할 수 있습니다. **css/reset.css** ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); /* 5번째줄에 추가 */ ``` 4\. 13번째 줄의 font-family의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Nanum Gothic(변경할 폰트명)으로 수정하세요.\ (한글 폰트 파일명의 경우 " "입력) **css/common/common.css** ```css .:root { ... --font-family: 'Pretendard variable'; ... } ``` 5. common.css --font-family에서 변경된 폰트는 reset.css 에서 하위 코드에 적용 됩니다. **css/reset.css** ``` .godo * { font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; } ... body, th, td, input, select, textarea, button { font-size: var(--font-size); line-height: 1.5; font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Dotum, '돋움', sans-serif; color: #333; } ``` ※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.최근 본 상품 변경하기
 1\. 최근 본 상품 영역의 **background(배경)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont { float:left; min-width:72px; padding:0px; background:none; } ``` 2\. 타이틀 폰트의 **color(색상), text-align(정렬)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont h4 { padding:0; color:#666666; text-align:center; } ``` 3\. 최근 본 상품 오버시 내용 **border(선), background(배경)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .src_box { position: absolute; top: 0; right: 74px; width: max-content; height: 100%; padding: 5px 5px 0 7px; border: 1px solid #999999; background: #ffffff; text-align: left; z-index: 10; } ``` 4\. 상품 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .src_box strong { display: block; color: #0CC472; } ``` 5\. 페이징 폰트의**color(색상)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .scroll_right_cont .scr_paging strong { padding: 0 2px 0 2px; color: #0CC472; } ```상품 리스트 변경하기
 1\. 상품명 **color(색상)** 값을 변경할 수 있습니다. \ (한줄 말줄임이 처리가 되어 있습니다.) **css/goods/list.css** ```css .item_tit_box .item_name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; padding: 0; font-size: 16px; text-overflow: ellipsis; font-weight: normal; overflow: hidden; line-height: 22px; color: var(--primary-default); /* color 추가 */ } ``` 2\. 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/list.css** ```css .item_money_box .item_price { /*display:block;*/ padding:0px; font-size:16px; color:#000000; font-weight:bold; } ```상품 상세 상단 변경하기(폰트)
 1\. 상품명 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_tit h3 { width:405px; font-size:18px; word-break: break-all; } ``` 2\. 상품 정보 타이틀 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_list dt { ffloat:left; width:80px; margin:0 10px 0 0; color:#888888; font-weight:normal; word-wrap:break-word; } ``` 3\. 상품 가격 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_price dd { margin: -2px 0 0 0; font-size: 16px; font-weight: bold; } ``` 4\. 총 합계금액 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dt { font-size: 16px; font-weight: bold; } ``` 5\. 총 합계금액 가격 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd { color:#0CC472; font-weight:bold; } ``` 6\. 총 합계금액 가격 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount dd strong { font-size: 20px; } ```상품 상세 상단 변경하기(버튼)
 1\. 공유하기 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **css/button.css** ```css .btn_gray_list a, .btn_gray_list button { display:inline-block; padding:0 0 0 11px; border:1px solid #999; vertical-align:middle; } ``` 2\. 조건별 배송 버튼의 **font-size(크기), background(배경)** 값을 변경할 수 있습니다.  **css/button.css** ```css .btn_gray_list .btn_gray_small { font-size:11px; } ``` 3\. 장바구니 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다.  **css/button.css** ```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:regular; } ``` 4\. 바로구매 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경할 수 있습니다. **css/button.css** ```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 #0CC472; background:#0CC472; text-align:center; font-weight:regular; } ```상품 상세 상단 변경하기
 1\. 셀렉트 영역의 **border(선), background(배경)** 값을 변경할 수 있습니다. **css/layout/layout.css** ```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(선) 값을** 변경할 수 있습니다. **css/goods/goods.css** ```css .item_detail_tit { position: relative; padding: 0 0 10px 0; border-bottom: 1px solid #dbdbdb; } ``` \ 3\. 선택한 옵션 영역의 **border-bottom(선) 값을** 변경할 수 있습니다. **css/layout/layout.css** ```css .item_detail_list + .item_choice_list table { width: 100%; border-bottom: 1px solid #999999; } ``` 5. 선택한 옵션영역의 background(배경) 값을 변경할 수 있습니다. **css/layout/layout.css** ```css .item_choice_list table { width: 100%; background: #f5f5f5; } ```  6. 총 합계금액 구분 영역의 border-top(선) 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_tatal_box .total_amount { margin: 15px 0 0 0; padding-top: 10px; border-top: 1px solid #dbdbd ```상품 상세 탭 변경하기
 1\. 상품 상세 탭 선택시 **color(색상), font-weight(굵기), border(선)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_tab li.on a { padding-top: 18px; margin-top: 8px; color: #333333; font-weight: bold; border-bottom: 2px solid #ffffff; } ``` 2\. 글 등록 수량 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_tab li a strong { color: #ab3e55; } ```상품 상세 상품문의 영역-리스트 변경하기
 1\. 상품 문의 타이틀 폰트의 **font-size(크기)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .item_goods_sec h3 { padding: 45px 0 10px 0; font-size: 18px; } ``` 2\. 상품문의 전체보기 버튼의 **color(색상), font-weight(굵기), border(선), background(배경), text-align(정렬)** 값을 변경할 수 있습니다. **css/button.css** ```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(정렬)** 값을 변경할 수 있습니다. **css/button.css** ```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(선)** 값을 변경할 수 있습니다. **css/button.css** ```css .pagination .on { color: #ab3e55; font-weight: bold; border: 1px solid #ab3e55 ```상품 상세 상품문의 영역-리스트 내용 변경하기
 1\. 수정 버튼의 **background(배경), border(선)** 값을 변경할 수 있습니다. **css/button.css** ```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(배경)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .qna_new_box { text-align: left; background: #f8f8f8; } ```장바구니 화면 변경하기
 1\. 장바구니 타이틀 폰트의 **color(색상), font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit h2 { float: left; font-size: 28px; color: #222222; } ``` \ 2\. 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit .page_on { color: #ab3e55; font-weight: bold; } ``` 3\. 다음 진행 스텝 표시 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit ol li { float: left; font-size: 14px; color: #d1d1d1; } ``` 4\. 장바구니 타이틀 폰트 하단의 **border-bottom(선)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .order_wrap .order_tit { overflow: hidden; border-bottom: 1px solid #dbdbdb; } ```  5\. 장바구니 상품금액/배송비/최종 결제금액의 **color(색상), font-size(사이즈), font-weight(굵기)** 값을 변경할 수 있습니다.. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` 6\. 선택상품주문 버튼은 마우스 오버 전(.btn\_order\_choice\_buy) 과 오버 시(.btn\_order\_choice\_buy:hover)의 **border(선), font-size(사이즈), color(색상)** 값으로 각각 변경할 수 있습니다. **css/order/button.css** ```css .btn_order_choice_buy { min-width:190px; height:55px; padding:0 20px 0 20px; color:#3e3d3c; font-weight:bold; font-size:14px; border:1px solid #cccccc; background:#fff; cursor:pointer; } ``` ```css .btn_order_choice_buy:hover { color:#333333; border:1px solid #bbbbbb; } ``` 7\. 전체상품주문 버튼은 마우스 오버 전(.btn\_order\_whole\_buy) 과 오버 시(.btn\_order\_whole\_buy:hover) 의 **background(배경) 컬러, border(선), color(색상), font-size(사이즈)** 값으로 각각 변경할 수 있습니다. **css/button.css** ```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:#0CC472; cursor:pointer; font-weight:bold; } ```.btn_order_whole_buy:hover {
border:1px solid #02B666;
background:#02B666;
}
주문서 작성/결제 화면 변경하기
**주문서 금액 변경하기**  \- 상품금액/배송비/합계 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **css/order/order.css** ```css .price_sum_cont .price_sum_list dd { color:#000; } ``` ```css .price_sum_cont .price_sum_list dd strong { font-weight:700; font-size:18px; color:#000; } ``` **최종결제금액, 결제하기 버튼 변경하기**  1\. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다. **css/order/order.css** ```css .payment_final_total dd { display:inline-block; font-size:30px; color:#0CC472; } ``` 2\. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경할 수 있습니다. **css/button.css** ```css .btn_order_buy { display:inline-block; width:300px; height:61px; line-height:59px; color:#fff; font-size:20px; border:1px solid #0CC472; background:#0CC472; text-align:center; } ```포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\ Mygreek 스킨에 적용되어 있는 기본 컬러 코드 **#0CC472**을 확인합니다. 2. **디자인 스킨 리스트 접속** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트 3. 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ \- common.css를 더블 클릭 하여 common/gd\_common.css 파일을 엽니다. 4. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경합니다.``` :root { --primary-default: #0540be; /* 포인트 컬러 */ --primary-hover: #00319a; /* 포인트 컬러 hover */ --secondary-default: #e7ff34; /* 서브 컬러 */ --neutrals-gray: #edebe5; --neutrals-dark: #000; --font-size: 12px; /* 기본 폰트 사이즈 */ --font-family: 'Pretendard variable'; /* 기본 폰트 명 */ --font-regular: 400; --font-medium: 500; --font-bold: 700; } ``` 5. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다.
푸터 변경하기
 1. CS CENTER, BANK INFO 변경하기\ CS CENTER, BANK INFO 타이틀의 color(색상), font-size(크기), font-weight(굵기), text-align(정렬)값을 변경할 수 있습니다. ```css .main .main_info_box .main_info dl dt { font-size: 13px; /* 글자 크기 */ margin: 0 5px; font-weight: bold; /* 글자 굵기 */ border-bottom: 1px solid #999; padding-bottom: 5px; color: #fff; /* 글자색 */ text-align: center; /* 정렬 */ } ``` 2. CS CENTER 전화번호, 예금주의 color(색상), font-size(크기), font-weight(굵기) 값을 변경할 수 있습니다. ```css .main .main_info dl dd p.phone a { font-size: 14px; /* 글자 크기 */ font-weight: bold; /* 글자 굵기 */ color: #5f1212; /* 글자 색 */ } ``` ```css .main .main_info dl dd .account_holder { padding: 5px 0; font-size: 14px; /*글자 크기*/ } ``` 3\. 푸터 메뉴버튼의 **font-size(크기), color(색상), text-align(정렬), letter-spacing(자간), font-weight(굵기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_info2_box .ft_menu li a { display: block; padding: 18px 0px 10px 0px; font-size: 11px; color: #d1d1d1; text-align: left; letter-spacing: -1px; } ``` 4\. 푸터 정보 부분의 **text-align(정렬), font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_info2_box .ft_address { padding: 0px; text-align: left; font-size: 12px; color: #e0e0e0; word-break: keep-all; } ``` 5\. 푸터 카피라잇 영역의 **color(색상), font-size(크기), text-align(정렬)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_copy { padding:15px 0 30px 0; color:#e0e0e0; font-size:11px; text-align:left; font-style:normal; } ```고객센터, PC화면 버튼 변경하기
 1\. 고객센터, PC화면 버튼의 **background(배경), color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css #footer footer .ft_button_box ul li a { display: block; padding: 10px 0; background: #484848; color: #aeaeae; font-size: 13px; border-radius: 20px; } ```상단 헤더 영역 변경하기
  1\. 스크롤 시 생기는 background-color(배경색)을 변경 할 수 있습니다. **css/gd\_layout.css** ```css #header_wrap.h_on { background-color: rgba(0 0 0 / 0.6); } ``` 2\. 장바구니 담긴상품 수량의 배경 **background(배경), color(**글자색) 값을 변경할 수 있습니다. **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: #000; background: #e7ff34; font-size: 10px; min-width: 14px; } ```슬라이드 메뉴 변경하기
 1\. 상단배너의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_banner .nav_login ul li a { display: inline-block; font-size: 15px; color: #222222; } ``` 2\. 아이콘 메뉴 영역의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_link ul li a { display: block; padding: 36px 0 0 0; font-size: 15px; color: #888; } ``` 3\. 탭버튼 활성화 시 **background(배경), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```css .nav_tabmenu_box .nav_tabmenu li.on span { background: #ab3e55; color: #fff; font-weight: bold; } ``` 4\. 탭버튼 비활성화 시 **background(배경), color(색상)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **css/proc/proc.css** ```css .category_side > li a { position: relative; display: block; padding: 12px 0 12px 0; font-size: 16px; color: #262626; } ``` 메뉴 폰트 **font-weight(굵기)** 값을 변경할 수 있습니다. **proc > proc.css | css/proc/proc.css** ```css .category_side > li > a { font-weight: bold; } ``` 6\. 메뉴 폰트 선택 시 **color(색상)** 값을 변경할 수 있습니다. **css/proc/proc.css** ```css .category_side > li > a.on { color: var(--primary-default); } ```상품 리스트 스타일 변경하기
 1\. 상품리스트 이미지의 **border(라인)** 값을 변경할 수 있습니다. **css/goods/list/list\_01.css** ```css .main-best-seller .display-type01 .goods_prd_img .img_box img { border: 0; } ``` 2\. 상품리스트 상품명 폰트의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css/goods/list/goods.css** ```css .prd_name { font-weight: var(--font-medium); line-height: 20px; font-size: calc(var(--font-size) + 2px); } ``` 3\. 상품리스트 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/goods/list/goods.css** ```css .origin-price { text-decoration: line-through; color: #797979 !important; font-weight: var(--font-regular); } /* 타임 세일(기본가) */ .c_price { color: #000; } ```상품후기 변경하기
 1\. 상품 후기 게시판 타이틀의 **background(배경), border-bottom(선)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(색상)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(색상)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(굵기)** 값을 변경할 수 있습니다. **css/gd\_plus\_review\.css** ```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(선)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .detail_write_btn { display:inline-block; width:100%; padding:10px 0 10px 0; text-align:center; color:#0CC472; font-size:15px; font-weight:bold; background:#ffffff; border:1px solid #0CC472; box-sizing:border-box; } ``` 6\. 상품평 더보기 버튼의 **text-align(정렬), color(색상), font-size(크기), background(배경)** 값을 변경할 수 있습니다. **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; } ```옵션 레이어-셀렉트박스 변경하기
 1\. 옵션 레이어의 기본 옵션 폰트의 **font-size(크기), color(색상), text-align(정렬), background(배경)** 값을 변경할 수 있습니다. **css/gd\_common.css** ```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(선)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **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; } ```옵션 레이어-항목 변경하기(폰트/버튼)
 1\. 옵션 레이어 쿠폰적용 버튼의 **background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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(정렬)** 값을 변경할 수 있습니다. **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; } ```상품문의-리스트 변경하기
 1\. 상품문의 게시판 문의 상태표시 아이콘의 **font-size(크기), line-height(행간), background(배경), color(색상), border-radius(둥근선), border(선)** 값을 변경할 수 있습니다. **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:#0CC472; border-radius: 15px; border: 1px solid #0CC472; } ``` 2\. 문의 제목 폰트의 **font-size(크기), color(색상), line-height(행간)** 값을 변경할 수 있습니다. **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; } ```상품문의-비밀번호 인증 레이어 변경하기
 1\. 비밀번호 인증 레이어의 **height(높이), background(배경), border(선)** 값을 변경할 수 있습니다. **css/board/board.css** ```css .cite_layer .wrap { position: relative; height: 190px; background: #ffffff; border: 1px solid #555555; } ``` \ 2\. 비밀번호 인증 타이틀의 **height(높이), background(배경), border(선)** 값을 변경할 수 있습니다. **css/board/board.css** ```css .cite_layer .wrap h4 { height: 27px; padding: 13px 0 0 17px; background: #f4f4f4; color: #222222; } ``` 3\. 비밀번호 인증 레이어 확인 버튼의 **color(색상), border-radius(둥근선), background(배경)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .d_pw_confirm_btn { display:inline-block; padding:5px 15px 5px 15px; color:#ffffff; border:1px solid #0CC472; border-radius:3px; background:#0CC472; } ```상품문의-리스트 내용 변경하기(폰트/버튼)
 1\. 상품문의 내용 폰트의 **color(색상)** 값을 변경할 수 있습니다. **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(둥근선)** 값을 변경할 수 있습니다. **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; } ```상세 타이틀 및 info 레이어 폰트 변경하기
 1\. 상품 상세 타이틀의 **font-size(크기), line-height(행간), text-align(정렬)** 값을 변경할 수 있습니다. **css/gd\_layout.css** ```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(굵기)** 값을 변경할 수 있습니다. **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; } ```상품 상세 탭 변경하기
 1\. 상품 상세페이지 탭 폰트의 **color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬)** 값을 변경할 수 있습니다. **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(행간)** 값을 변경할 수 있습니다. **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: #0CC472; line-height: 11px; } ``` 3\. 현재위치 탭표시 라인의 **border-bottom(선)** 값을 변경할 수 있습니다. **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; } ```상품 상세 버튼 변경하기
 1\. 장바구니 버튼의 **font-size(크기), text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **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; ```상품 상세 리스트 영역 변경하기
 1\. 상품명 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info h3 { font-size: 18px; color: #333333; word-break: break-all; } ``` 2\. 상품 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box .price { font-size: 20px; color: #333333; } ``` 3\. 상품 할인 전 가격 폰트의 **color(색상)** 값을 변경할 수 있습니다. **css/goods/goods.css** ```css .goods_view .detail_info .detail_info_top .price_box del { color: #999999; } ``` 4\. 상품 상세페이지 리스트 제목**font-size(크기), color(색상)** 값을 변경할 수 있습니다. **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(색상)** 값을 변경할 수 있습니다. **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(정렬), background(배경), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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; } ```장바구니 버튼 변경하기
 1\. 쿠폰적용 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .cart_option_modify { 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; } ``` 3\. 선택상품 삭제, 주문 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경할 수 있습니다. **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(굵기)** 값을 변경할 수 있습니다. **css/gd\_button.css** ```css .cart_all_order_btn { display:inline-block; width:100%; padding:10px 0 10px 0; text-align:center; background:#0CC472; border:1px solid #0CC472; color:#ffffff; font-weight:bold; box-sizing:border-box; font-size:14px; } ```장바구니 폰트 변경하기
 1\. 장바구니 상품명 폰트의 **font-weight(굵기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```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(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```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(굵기)** 값을 변경할 수 있습니다. **css/order/order.css** ```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:#000; font-weight:bold; } ``` 4\. 장바구니 항목 타이틀 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl dt { display: table-cell; width: 50%; font-size: 13px; color: #5e5e5e; } ``` 5\. 장바구니 총 상품금액 폰트의 **font-size(크기), color(색상)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl dd { display: table-cell; width: 50%; text-align: right; font-size: 15px; color: #5e5e5e; } ``` 6\. 장바구니 총 합계금액 폰트의 **color(색상), font-size(크기)** 값을 변경할 수 있습니다. **css/order/order.css** ```css .cart .my_buy dl.total dd { color: #000; font-size: 17px; } ```포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\ 밥도둑스킨에 적용되어 있는 기본 컬러 코드 **#181818** 확인합니다. 2. **디자인 스킨 리스트 접속** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트\ 해당 스킨이 상점별 작업스킨에 체크 되어있어야 합니다. 3. **스타일시트/CSS 변경** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트\ 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다. \ 4\. 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#181818**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. order/order.css (1개) proc/proc.css (3개) goods/goods.css (5개) goods/list/list\_11.css (4개) goods/list/list\_02.css (4개) goods/list/list\_09.css (4개) goods/list/list\_01.css (5개) goods/list/list\_07.css (4개) goods/list/list\_04.css (4개) goods/list/list\_06.css (4개) mypage/mypage.css (2개) gd\_common.css (1개) gd\_layout.css (1개) gd\_plus\_review\.css (1개) gd\_button.css (18개)메인 하단 고정메뉴 수정하기/감추기
 1\. 메인 하단 고정메뉴의 **배경색** 변경하기 원하는 컬러 코드값으로 변경하세요.\ `변경 위치` css > gd\_layout.css **34번째 줄**\ `34`.func\_fixed{position: fixed;left:0;bottom:0;width:100%;height:50px;border-top :1px solid #e5e5e5;background-color: #fff;z-index:99;} 2\. 메인 하단 고정메뉴의 **상단라인 색** 변경하기 원하는 컬러 코드값으로 변경하세요.\ `변경 위치` css > gd\_layout.css **34번째 줄**\ `34`.func\_fixed{position: fixed;left:0;bottom:0;width:100%;height:50px;border-top :1px solid #e5e5e5;background-color: #fff;z-index:99;} 3\. 메인 하단 고정메뉴의 **장바구니 숫자 아이콘 배경색** 변경하기 원하는 컬러 코드값으로 변경하세요.\ `변경 위치` css > gd\_layout.css **42번째 줄**\ `42`.func\_fixed .cart\_count {position:absolute; top:5px; left:53%; display:block; width: 15px; height: 15px;line-height:15px; border-radius:100%; font-size:8px;color:#fff; background:#ef4024; text-align: center;} 4\. 메인 하단 고정메뉴 감추기 display: none;을 추가하면 하단 고정메뉴가 사라집니다.\ `변경 위치` css > gd\_layout.css **34번째 줄**\ `34`.func\_fixed{position: fixed;left:0;bottom:0;width:100%;height:50px;border-top :1px solid #e5e5e5;background-color: #fff;z-index:99; display: none;}메인 슬라이드 배너 배경 변경하기
 1\. 관리자 > 모바일샵 > 모바일샵 디자인 설정 > **배너관리 메뉴**를 선택합니다.  2\. 등록된 배너 중 5번 **슬라이드 배너 배경**의 수정 버튼을 누른 뒤 변경할 이미지를 등록합니다.  ⚠️ 스킨의 기본 슬라이드 배너 배경 이미지의 **사이즈(750x342)와 동일하게** 수정하는 것을 권장합니다.메인 슬라이드 배너 추가하기
 1\. 관리자 > 모바일샵 > 모바일샵 디자인 설정 > **배너관리 메뉴**에서 배너등록을 선택합니다. \ \ 2\. 배너를 등록할 디자인 스킨을 선택한 뒤 **배너그룹**을 일반배너 - 슬라이드 배너로 선택한 뒤 추가할 배너 이미지를 등록합니다.  ⚠️배너관리에 등록되어 있는 슬라이드 배너 이미지의 **사이즈(276x396)와 동일하게** 수정하는 것을 권장합니다. ⚠️배너관리에 등록되어 있는 슬라이드 배너 이미지를 다운로드 받으신 후 이미지를 변경하시는 방법을 추천합니다.전체메뉴 영역 수정하기
 1\. 로그인/회원가입 버튼 **텍스트 컬러** 변경하기 원하는 컬러 코드값으로 변경하세요.\ `변경 위치` css > gd\_layout.css **93번째 줄**\ `93`.nav\_banner .nav\_login ul li a {display:inline-block;width: 90px;height: 30px;line-height: 31px;font-size:13px;color:#636363;border: 1px solid #636363;border-radius: 20px;text-align: center;} 2\. 로그인/회원가입 버튼 **라인컬러** 변경하기 원하는 컬러 코드값으로 변경하세요.\ `변경 위치` css > gd\_layout.css **93번째 줄**\ `93`.nav\_banner .nav\_login ul li a {display:inline-block;width: 90px;height: 30px;line-height: 31px;font-size:13px;color: #636363;border: 1px solid #636363;border-radius: 20px;text-align: center;} 3\. 아이콘 링크 영역 **텍스트 컬러** 변경하기 원하는 컬러 코드값으로 변경하세요.\ `변경 위치` css > gd\_layout.css **103번째 줄**\ `103`.nav\_link ul li a {display:block; padding:40px 0 0 0; font-size:13px; color:#3b3b3b;background-size: 40px 35px;background-repeat: no-repeat;background-position: center 3px; } 4\. 아이콘 링크 영역 **배경 컬러** 변경하기 원하는 컬러 코드값으로 변경하세요.\ `변경 위치` css > gd\_layout.css **100번째 줄**\ `100`.nav\_link {height: 70px;padding:5px 0 0 0;background-color: #f5f5f5;}상단 로고영역 수정하기
 1\. 상단 로고 영역 **하단 라인 컬러** 변경하기 원하는 컬러 코드값으로 변경하세요.\ `변경 위치` css > gd\_layout.css **15번째 줄**\ `15`#header\_wrap header .header\_box {position:relative;border-bottom:1px solid #cbcbcb; 2\. 상단 로고 **영역 배경 컬러** 변경하기 원하는 컬러 코드값으로 변경하세요.\ `변경 위치` css > gd\_layout.css **13번째 줄**\ `13`#header\_wrap header {width:100%;min-width:320px;background:#fff;z-index:300;}포인트 컬러 일괄 변경하기
 1. 컬러코드값 확인\ My Plant 스킨에 적용되어 있는 기본 컬러 코드 **#ea4379**을 확인합니다. 2. **디자인 스킨 리스트 접속** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트\ 해당 스킨이 상점별 작업스킨에 체크 되어있어야 합니다. 3. **스타일시트/CSS 변경** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트\ 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다. 4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#ea4379**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. css/gd\_button.css (153) css/gd\_common.css (5) css/gd\_layout.css (1) css/gd\_plus\_review\.css (7) css/event/event.css (3) css/goods.css (10) css/goods/list/list\_01.css (4) css/goods/list/list\_02.css (4) css/goods/list/list\_04.css (4) css/goods/list/list\_06.css (4) css/goods/list/list\_07.css (4) css/goods/list/list\_09.css (3) css/goods/list/list\_11.css (7) css/main/main.css (1) css/mypage/mypage.css (13) css/order/order.css (12)
메인슬라이드 미사용 시 유의사항
 해당스킨은 메인슬라이드 영역을 높게 사용한 디자인이 특징입니다.\ 상단 (메뉴/로고/장바구니/검색) 영역이 구분없이 작업되었습니다. 메인슬라이드를 사용하지 않을 시에는, 하단 공지사항과 겹치는 이슈가 있어\ 미사용 시, 아래의 변경 조치를 하시길 바랍니다. padding : 96px 20px 20px 20px 로 변경합니다.\ `변경 위치` css > main > main.css \ `18` .main .main\_notice {display:table; width:100%; margin:0 auto; padding:20px; top border-bottom: 1px solid #e8e8e8; box-sizing:border-box;}스킨 메인 리뷰 변경하기
 해당리뷰 영역은 이미지로 작업되었습니다.\ 무료PSD를 다운받으시면 해당영역을 제공하고 있습니다. 1. 리뷰내용 수정\ **관리자내 모바일샵 > 모바일샵 디자인 설정 > 움직이는 배너관리**에서 수정 2. 배경이미지 수정\ **관리자내 모바일샵 > 모바일샵 디자인 설정 > 배너관리**에서 수정 3. 타이틀명 수정 \ **관리자내 모바일샵 > 모바일샵 디자인 설정 > 배너관리**에서 수정상품진열 그림자 효과 사용하기
 `사용 방법`\ 관리자 내 상품 등록 시, **메인페이지 상품진열 > 모바일 > 인기상품**에 진열상품 노출 `미사용 시`\ 사용하고 싶지 않으신 분들은, 베스트상품이나 추천상품을 사용하시면 됩니다.포인트 컬러 일괄 변경하기
 1. 컬러코드값 확인\ My Plant 스킨에 적용되어 있는 기본 컬러 코드 **#557aab** 확인합니다. 2. **디자인 스킨 리스트 접속** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트\ 해당 스킨이 상점별 작업스킨에 체크 되어있어야 합니다. 3. **스타일시트/CSS 변경** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트\ 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다. \ 4\. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#557aab**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.  css/event/event.css (3) css/gd\_button.css (153) css/gd\_common.css (5) css/gd\_layout.css (5) css/gd\_myapp.css (1) css/gd\_plus\_review\.css (7) css/goods/goods.css (13) css/goods/list/list\_01.css (3) css/goods/list/list\_02.css (4) css/goods/list/list\_04.css (4) css/goods/list/list\_06.css (4) css/goods/list/list\_07.css (4) css/goods/list/list\_09.css (3) css/goods/list/list\_11.css (7) css/mypage/mypage.css (13) css/order/order.css (12) css/proc/proc.css (2)로고 변경 시 유의사항
 해당 스킨은 메인 로고와 별개로 메뉴 슬라이드에도 로고가 반영되어 있어 해당 로고를 꼭 변경해주세요. 1. 모바일샵 > 모바일샵 디자인 설정 > **배너관리** 접속 2. \[메뉴 상단 로고] 변경\ ⚠️로고의 형태가 흰색으로 관리자내 썸네일이 흰색으로 노출되고 있습니다.추천상품 타이틀 배경이미지 변경
 1. 모바일샵 > 모바일샵 디자인 설정 > **배너관리** 접속 2. 이미지 수정\ ⚠️이미지 사이즈: 720px X 314px기획전 이미지 수정
 1. 모바일샵 > 모바일샵 디자인 설정 > **배너관리** 접속 2. 이미지 등록\ ⚠️이미지 사이즈: 442px X 550px포인트 컬러 일괄 변경하기
 1. 컬러코드값 확인\ AROUND스킨에 적용되어 있는 기본 컬러 코드 **#181717**을 확인합니다. 2. **디자인 스킨 리스트 접속** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트\ 해당 스킨이 상점별 작업스킨에 체크 되어있어야 합니다. 3. **스타일시트/CSS 변경** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트\ 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다. 4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 ctrl + f (검색)를 누르고 **#181717**을 검색하여 원하는 포인트 컬러 코드 값으로 변경합니다.
메뉴 컬러 변경
 ✔️**메뉴 텍스트 컬러 변경**\ \ 원하는 컬러 코드값으로 변경하세요.\ `변경 위치` css > proc.css - \[color:#컬러코드값]\ `10` .category\_side > li a { display:block;font-size:15px; color:#181717;}메인 카테고리 슬라이드 배너 변경 및 삭제
ℹ️ 메인의 슬라이드 배너를 통해 보다 쉽게 해당 카테고리 제품페이지로 이동할 수 있도록 설정 가능합니다.\ 해당 슬라이드 배너 영역을 변경 및 삭제할 수 있습니다.  ✔️ **슬라이드 배너 변경** * 모바일샵 > 모바일샵 디자인 설정 > 배너관리 > 배너등록\ 배너그룹 항목에서 '일반배너- 슬라이드 아이콘 배너' 를 선택 후\ 추가로 배너 이미지를 등록하여 슬라이드 배너를 추가할 수 있습니다 * 모바일샵 > 모바일샵 디자인 설정 > 배너관리\ 등록된 이미지를 변경하실 수 있으며 노출 여부(노출/미노출)를 선택하여 원하는 카테고리를 노출할 수 있습니다. * 팝업/배너 PSD 다운받기\ 제공되는 PSD의 이미지(140\*160)를 다운로드하여 디자인 수정 후 변경할 수 있습니다.  ✔️ **슬라이드배너 삭제** * 스타일시트 > 메인 > 9번째줄부터 23번째줄\ 슬라이브 배너 영역을 미노출 하고 싶다면 스타일시트에서 삭제합니다.메인 상품 탭버튼 색상 변경
 ✔️ **탭 ON일 경우** \ \ 원하는 컬러 코드값으로 변경하세요 \ `변경 위치` css > goods> list > list\_07.css - \[background:2px solid #하단바 컬러값; color:#텍스트컬러값;]\ `11` .goods\_prd\_item7 .tab\_box .tab li.on a { border-bottom:2px solid #181717;color:#181717!important;font-weight: bold;} ✔️ **탭 OFF일 경우** \ \ 원하는 컬러 코드값으로 변경하세요 \ `변경 위치` css > goods> list > list\_07.css 파일에 \[ color:#텍스트컬러값;] \ `9` .goods\_prd\_item7 .tab\_box .tab li a {text-align:center;font-weight:bold;overflow:hidden;display:inline-block;width:100%;padding:7px 10px 7px 10px;font-size:13px;box-sizing:border-box;text-overflow:ellipsis;\ `10` white-space:nowrap;word-wrap:normal;border:1px solid #dfdfdf;border-left:none;background:#f3f3f3;color:#8e8e8e;}메인 기획전 슬라이드 배너 배경 변경
 * 모바일샵 > 모바일샵 디자인 설정 > 배너관리\ (1) 배너그룹 항목에서 '기획전 슬라이드 배너 배경'를 선택합니다.\ (2) 우측 수정 버튼을 클릭합니다. \ (3) 수정할 이미지(360 x 400)를 등록해주세요.포인트 컬러 일괄 변경하기
 1. LUX 스킨에 적용되어 있는 포인트 컬러 코드값 **#593838**를 확인합니다. 2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ 좌측 하단 폴더트리 내 **스타일시트/CSS더블 클릭**하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다. 4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 **ctrl + f (검색)**를 누르고 **#593838**을 검색하여 **원하는 포인트 컬러 코드 값**으로 변경합니다.\ 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. 마우스 오버시 컬러 **#492c2c**도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.
스크롤시 상단 고정메뉴 변경하기(폰트,배경)
 1\. 스크롤시 상단 메뉴 폰트의 **color(색상)** 값을 추가합니다. `변경 위치` css > custom.css **14줄**\ `14` .body-main .headerFix #header .gnb .depth0 > li > a { font-weight: normal; color: #333;}2\. 스크롤시 상단 메뉴 영역의 **background(배경,투명도)** 값을 변경합니다. `변경 위치` css > custom.css **16줄**\ `16` .headerFix { position: fixed; top: 0; left: 0; z-index: 102; width: 100%; min-width: 1200px; background-color: #ffffff; box-shadow: 0px 0 5px rgba(0, 0, 0, 0.35);}
푸터 색상 변경하기
 사이트 맨 하단 푸터 **color(색상)** 값을 변경해줍니다. `변경 위치` css > custom.css **96줄**\ `96` input\[type="text"], input\[type="password"] { background-color: #66554d; padding: 0 0 22px 0;}검색창 변경하기(폰트, 컬러)
 1. 검색창 인풋박스 입력 폰트의 **font-size(크기)** 값을 변경해줍니다.\ `변경 위치` common > common.css | css/common/common.css **47줄**\ `47` input\[type="text"], input\[type="password"] {padding: 0 10px; outline: none; font-size: 20px;} 2. 최근검색어 폰트의 **font-size(크기),color**(컬러) 값을 추가합니다. \ `변경 위치` layout > layout.css | css/layout/layout.css **87줄**\ `87` .recent\_box dt {font-size: 13px; font-weight: bold; color: #fa2828;}} 3. 추천상품 검색창 닫기 폰트의 **color(색상), font-size(크기), line-height(행간)** 값을 변경해줍니다. \ `변경 위치` layout > layout.css | css/layout/layout.css **148줄**\ `148` .seach\_top\_all .btn\_top\_search\_close { float: right; padding: 0 15px 0 15px; color: #999999; font-size: 11px; line-height: 30px;}장바구니 타이틀 변경하기
 1. 장바구니 타이틀 폰트의 **color(색상), font-size(크기), color(색상)** 값을 변경해줍니다.\ `변경 위치` order> order.css | css/order/order.css **14줄**\ `14` .order\_wrap .order\_tit h2 { float: left; font-size: 28px; color: #222222;} 2. 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경해줍니다. \ `변경 위치` order> order.css | css/order/order.css **17줄**\ `17` .order\_wrap .order\_tit .page\_on { color: #593838; font-weight: bold;} 3. 다음 진행 스텝 표시 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다. \ `변경 위치` order> order.css | css/order/order.css **16줄**\ `16` .order\_wrap .order\_tit ol li { float: left; font-size: 14px; color: #d1d1d1;}} 4. 장바구니 타이틀 폰트 하단의 **border-bottom(선)** 값을 변경해줍니다. \ `변경 위치` order> order.css | css/order/order.css **13줄**\ `13` .order\_wrap .order\_tit { overflow: hidden; border-bottom: 1px solid #dbdbdb;}쇼핑몰 입금 정보 및 고객센터 이미지 변경하기
 입금정보 및 고객센터 **이미지 경로를 확인하고 변경합니다.** \ `변경 위치` css > main > main.css **64줄**\ `64` .body-main .headerFix #header .gnb .depth0 > li > a {.main\_banner\_bottom .bank { background: url(../../img/common/bg/bank.png) no-repeat 0 0;}포인트 컬러 일괄 변경하기
 1. VENCER(벤세르) 스킨에 적용되어 있는 포인트 컬러 코드값 **#005cff**를 확인합니다. 2. **디자인 스킨 리스트 접속** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트\ 해당 스킨이 상점별 작업스킨에 체크 되어있어야 합니다. 3. **스타일시트/CSS 변경** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트\ 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다. 4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 **ctrl + f (검색)**를 누르고 **#005cff**을 검색하여 **원하는 포인트 컬러 코드 값**으로 변경합니다.\  css/gd\_button.css (18) css/gd\_common.css (1) css/gd\_plus\_review\.css (1) css/goods.css (5) css/goods/list/list\_01.css (2) css/goods/list/list\_02.css (2) css/goods/list/list\_04.css (2) css/goods/list/list\_06.css (2) css/goods/list/list\_07.css (5) css/goods/list/list\_09.css (1) css/goods/list/list\_11.css (2) css/mypage/mypage.css (2) css/order/order.css (1) css/proc/proc.css (1)
전체 메뉴 변경하기
 1. 메뉴 닫힘 상태 시 color(색상) 및 font-size(사이즈) 변경\ 해당 영역 에 원하시는 컬러 코드값 및 사이즈를 넣어 주세요.\ `변경 위치` proc > proc.css 8번째 줄\ `8` .category\_side > li a {position:relative; display:block; padding:19px 0 19px 0; font-size:14px; color:#333333;} 2. 메뉴 펼침 상태 시 color(색상) 변경 해당 영역 에 원하시는 컬러 코드값을 넣어 주세요.\ `변경 위치` proc > proc.css 12번째 줄 \ `12` .category\_side > li > a.on {color:#005cff;}상단 헤더 영역 변경하기
ℹ️벤세르 모바일 스킨은 상단 헤더에 하단 라인이 없습니다.\ \[하단 라인 추가 / 장바구니 담긴 상품 수량의 배경색]을 변경할 수 있습니다.  1. 상단 헤더 영역 border-bottom(하단 라인) 추가\ 하단 코드 복사 후 14번째 줄 기존 코드 삭제 후 붙여넣기 해주세요\ `변경 위치` css > gd\_layout.css 14번째 줄\ `14`#header\_wrap header .header\_box {position:relative; border-bottom:1px solid #e5e5e5; border-top:1px solid #e5e5e5;} 2. 장바구니 담긴 상품 수량 background(배경) 변경\ 원하는 컬러 코드값을 넣어 주세요.\ `변경 위치` css > gd\_layout.css 119번째 줄\ `119` #header\_wrap header .header\_box .cart\_count {position:absolute; top:5px; right:-4px; display:block; padding:1px 5px 0px 4px; line-height:14px; color:#fff; background:#005cff; vertical-align:middle; font-size:10px; border:2px solid #fff;}하단 푸터 영역 변경하기
 1. 약관/개인정보처리방침 color(색상) / font-size(사이즈) / font-align(정렬) 변경\ 해당 영역 에 원하시는 컬러 코드값, 사이즈, 정렬을 넣어 주세요.\ `변경 위치` css > gd\_layout.css 235번째 줄\ `235` #footer footer .ft\_info2\_box .ft\_menu li a {display:block; padding:18px 0 18px 0; font-size:12px; color:#808080; text-align:left; letter-spacing:-1px;} 2. 기본 정보 설정 color(색상) / font-size(사이즈) / font-align(정렬) 변경 \ 해당 영역 에 원하시는 컬러 코드값, 사이즈, 정렬을 넣어 주세요.\ `변경 위치` css > gd\_layout.css 238번째 줄\ `238` #footer footer .ft\_info2\_box .ft\_address {padding:0 21px 0 21px; text-align:left; font-size:12px; color:#808080; word-break:keep-all;} 3. 저작권 표기 color(색상) / font-size(사이즈) / font-align(정렬) 변경 \ 해당 영역 에 원하시는 컬러 코드값, 사이즈, 정렬을 넣어 주세요.\ `변경 위치` css > gd\_layout.css 244번째 줄\ `244` #footer footer .ft\_copy {padding:21px 0 30px 21px; color:#808080; font-size:12px; text-align:left; font-style:normal;}진열 상품 이미지 테두리 넣기
ℹ️벤세르 모바일 스킨은 진열 상품 이미지 테두리가 없습니다.\ \[진열 상품 이미지 테두리]를 추가할 수 있습니다.  진열 상품 이미지 border(테두리) 추가\ 하단 코드 복사 후 붙여넣기 > 원하는 컬러 코드 값을 넣어 주세요. `변경 위치` css > goods > list > list\_02.css 8번째 줄\ `8` .goods\_prd\_item .goods\_prd\_img .img\_box .img img {width:100%; border: 1px solid #e5e5e5; box-sizing:border-box;}동영상 변경 및 삭제하기
ℹ️VENCER 모바일 스킨은 동영상을 첨부할 수 있습니다.\ \[동영상]을 변경 및 삭제할 수 있습니다. **✔️ 동영상 변경하기** **1️. 동영상 업로드하기** 업로드한 동영상 공유 > 임베딩 코드 복사하기\ 벤세르 동영상은 VIMEO 서비스를 사용했습니다. (\
`34` \
JUST KEEP GOING\
\ `35` \\ `36` \고객센터/입금계좌 수정하기
 1. 해당 영역에 표기하고 싶은 영문 or 한글명으로 변경하세요.\ `변경 위치` main > 쇼핑몰 메인본문 | main/index.html \[고객센터]41번째 줄 \[입금계좌]51번째 줄\ `41` \포인트 컬러 일괄 변경하기
 1. 컬러코드값 확인\ Trendy 스킨에 적용되어 있는 기본 컬러 코드 **#2e84d3**을 확인합니다. 2. **디자인 스킨 리스트 접속** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트\ 해당 스킨이 상점별 작업스킨에 체크 되어있어야 합니다. 3. **스타일시트/CSS 변경** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트\ 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다. 4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#2e84d3**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. \ \ css/gd\_button.css (153) css/gd\_common.css (5) css/gd\_plus\_review\.css (7) css/event/event.css (3) css/goods.css (10) css/list/list\_01.css (4) css/list/list\_02.css (4) css/list/list\_04.css (4) css/list/list\_06.css (4) css/list/list\_07.css (4) css/list/list\_09.css (3) css/list/list\_11.css (7) css/mypage/mypage.css (10) css/order/order.css (12) css/proc/proc.css (5)
상단 로고영역 색상 변경
 `변경 위치` css > gd\_layout.css 15번째 줄 \ `15` #header\_wrap header .header\_box {border-bottom:1px solid #dcdcdc; border-top:1px solid #dcdcdc;}\ \ ✔️상단영역의 아래 선: \[border-bottom:라인두께 solid #라인컬러] 변경\ ✔️배경색상 추가: \[background:#컬러값] 추가슬라이드 배너 변경 - 슬라이드 이미지 주변 테두리 수정
 `변경 위치` css > main > main.css 31번째 줄 \ `31` .main\_slide2 .slider-wrap {border:1px solid #e8e8e8;padding:15px 14px 35px 14px;margin:0 10px;} ✔️\[border:선두께px solid #색상값;]\ ✔️미사용 시,해당 border 부분 코드 삭제메인 상품 탭버튼 색상 변경
 1. 탭ON일 경우\ `변경 위치` css > goods> list > list\_07.css 12번째 줄 \ `12` .goods\_prd\_item7 .tab\_box .tab li.on a {background:#ffffff; color:#222222;}\ \ ✔️\[background:#배경값; color:#텍스트컬러값;]2. 탭OFF일 경우\ `변경 위치` css > goods> list > list\_07.css 9번째 줄 \ `9` .goods\_prd\_item7 .tab\_box .tab li a {text-align:center;font-weight:bold;overflow:hidden;display:inline-block;width:100%;padding:7px 10px 7px 10px;font-size:13px;box-sizing:border-box;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;border:1px solid #dfdfdf;border-left:none;background:#f3f3f3;color:#8e8e8e;} \ \ ✔️\[background:#배경값; color:#텍스트컬러값;]
메뉴 컬러 변경
 `변경 위치` css > proc.css 8번째 줄\ `8` .category\_side > li a {position:relative;display:block;padding:12px 0 8px 0;font-size:12px;color:#666666;}\ \ ✔️\[color:#색상코드값]메뉴 박스버튼 컬러 수정
 1. 박스버튼 ON일때 색상 변경\ `변경 위치` css > gd\_layout.css 128번째 줄 `128` .nav\_tabmenu\_box .nav\_tabmenu li.on span {background:#fff; color:#111; font-weight:bold; border:1px solid #333333;}\ \ ✔️\[color:#폰트컬러값] \[background:#배경컬러값] ✔️\[border:테두리두께값px solid #색상컬러값;]2. 박스버튼 OFF일때 색상 변경\ `변경 위치` css > gd\_layout.css 127번째 줄 `127` .nav\_tabmenu\_box .nav\_tabmenu li span {display:block; padding:7px 0 6px 0; background:#fff; color:#a4a4a4; border:1px solid #e7e7e7; font-size:14px;}\ \ ✔️\[color:#폰트컬러값] \[background:#배경컬러값]\ ✔️\[border:테두리두께값px solid #색상컬러값;]
로그인 영역 색상 변경하기
 1. 배경 색상 변경 : 2군대를 수정해 주셔야 변경이 가능합니다. \ `변경 위치` css > gd\_layout.css 99번째 줄\ `99` .nav\_banner {padding:22px 0 5px 7px; background:#f2f2f2;}\ \ `변경 위치` css > gd\_layout.css 113번째 줄\ `113` .nav\_link {padding:14px 0 16px 0; background:#f2f2f2;} 2. 로그인/회원가입 폰트 색상 변경 \ `변경 위치` css > gd\_layout.css 104번째 줄\ `104` .nav\_banner .nav\_login ul li a {display:inline-block; font-size:15px; color:#333333; font-weight:bold;} 3. 아이콘메뉴 폰트 색상 변경\ `변경 위치` css > gd\_layout.css 116번째 줄\ `116` .nav\_link ul li a {display:block; padding:36px 0 0 0; font-size:12px; color:#666;}커뮤니티 메뉴영역 색상 변경
 1. 커뮤니티 타이틀영역 색상 수정\ `변경 위치` css > gd\_layout.css 134번째 줄\ `134` .nav\_community\_box .comm\_tit {padding:7px 0; margin:5px 0 10px 0; background:#f5f5f5; color:#111; font-size:14px; font-weight:bold; text-align:center;} \ ✔️\[background:#배경색상] \[color:#폰트색상] \[font-size:#폰트사이즈]2. 커뮤니티 게시판 텍스트 수정 `변경 위치` css > gd\_layout.css 147번째 줄\ `147` .nav\_tabmenu\_box .board\_cate li a {display:block;color:#666666;font-size:13px;}\ \ ✔️\[color:#폰트색상] \[font-size:#폰트사이즈]
고객센터/입금계좌 안내 수정
 1. 고객센터 번호 버튼 수정 `변경 위치` css > main > main.css 202번째 줄 \ `202` .main\_info dl dd .call {display:inline-block;padding:4px 10px 2px 10px;background:#f2f2f2;font-size:16px;color:#222222;font-weight:bold;border:1px solid #c3c3c3;}\ \ ✔️\[background:#배경색 ;font-size:폰트사이즈px; color:#폰트컬러]2. 고객센터 운영시간 `변경 위치` css > main > main.css 203번째 줄 \ `203` .main\_info dl dd p.business\_hours {margin:7px 0 0 0; font-size:12px; color:#5b5b5b;} \ \ ✔️\[font-size:폰트사이즈px; color:#폰트컬러]
3. 입금계좌안내 * 입금계좌번호\ `변경 위치` css > main > main.css 198번째 줄 \ `198` .main\_info\_box .main\_info dl dd strong {font-size:14px; font-weight:bold; color:#222;} \ \ ✔️\[font-size:폰트사이즈px] \[color:#폰트컬러]
* 입금명, 은행명 \ `변경 위치` css > main > main.css 206번째 줄 \ `206` .main\_info dl dd .account\_holder {padding:0; font-size:12px; color:#222;}\ \ ✔️\[font-size:폰트사이즈px] \[color:#폰트컬러]
포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\ Happy Animall 스킨에 적용되어 있는 기본 컬러 코드 **#5879c7**을 확인합니다. 2. **디자인 스킨 리스트 접속** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트\ 해당 스킨이 상점별 작업스킨에 체크 되어있어야 합니다. 3. **스타일시트/CSS 변경** | 모바일샵 > 모바일샵 디자인 관리 > 디자인 스킨 리스트\ 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다. 4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#5879c7**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. \ \ 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개)
상단 공지사항 컬러 및 크기 변경하기
 1. "공지" 부분의 폰트 **font-size(크기), color(색상)** 값을 변경해줍니다. \ `변경 위치` main > notice > main.css **17줄**\ `17` .order\_end .order\_end\_box h2 { display: table-cell; width: 33px; padding-left: 20px; font-size: 13px; font-weight: bold; color: #626262; text-align: left;}2. 공지사항 "내용" 부분의 폰트 **color(색상)** 값을 변경해줍니다. \ `변경 위치` main > notice > main.css **20줄**\ `20` .order\_end .order\_end\_box h2 { display: block; width: 100%; color: #626262;}
진열 상품 이미지 테두리 없애기
 ✔️ 진열 상품 이미지 **border(테두리)** 부분 전체를 삭제합니다. `변경 위치` goods > ist > list 02.css **8줄**\ `8` .goods\_prd\_item .goods\_prd\_img .img\_box .img img width: 100%; border: 1px solid #e5e5e5; box-sizing: border-box;}고객센터, PC화면 버튼 변경하기
 ✔️ 고객센터, PC화면 버튼의 **background(배경), color(색상), font-size(크기)** 값을 변경해줍니다. `변경 위치` css > gd\_layout.css **133줄**\ `133` #footer footer .ft\_button\_box ul li a { display: block; padding: 10px 0; background: #ffffff; color: #585858; font-size: 13px; border: #dcdbdc 1px solid;;}포인트 컬러 일괄 변경하기
 1. 컬러코드값 확인\ NIMO 스킨에 적용되어 있는 기본 컬러 코드 **#ab3e55**을 확인합니다. 2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ 좌측 하단 폴더트리 내 **스타일시트/CSS더블 클릭**하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다. 4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#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**도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.
메인 페이지 상단에 움직이는 배너 추가하기
`관리자 페이지 위치` 디자인 > 디자인 설정 > 움직이는 배너 관리\ 등록된 움직이는 배너의 치환코드를 해당 영역(1)에 넣어주시면 됩니다. GNB영역 디자인 수정하기
 1. 배경색 변경 | css > custom.css \ 회색 컬러코드(#f8f8f8)를 원하는 컬러 코드값으로 변경합니다. \ `변경 위치` 스타일시트 > custom.css **31줄**\ `31` .sub\_menu\_box .sub\_depth0 > li > a.active{background:url('../img/common/btn/btn\_gnb\_list\_over.png') no-repeat 95% center; background-color:#f8f8f8;} 2. 배경색, 텍스트 색상 변경\ `배경색` background의 none를 삭제 후 색상 코드값으로 변경\ `텍스트` color의 #202020을 원하는 코드값으로 변경 `변경 위치` 스타일시트 > custom.css **36줄**\ `36` .sub\_menu\_box .sub\_depth1 li a.active{background:none; color:#202020; text-decoration:underline;} 3. 텍스트 라인 삭제 \ text-decoration의 underline을 none으로 변경합니다. `변경 위치` 스타일시트 > custom.css **36줄**\ `36` .sub\_menu\_box .sub\_depth1 li a.active{background:none; color:#202020; text-decoration:underline;}상품 이미지 사이즈 설정하기
디자인 스킨을 다운받고, 그 디자인 컨셉에 맞게 상품 세팅을 하려면, \ 가장 먼저 상품 이미지 사이즈 세팅이 필요합니다. \ \ ⚠️단, 상품이 이미 등록되어있는 경우\ 상품 이미지 사이즈 세팅을 다시 하면 모든 상품의 이미지 등록을 새로 진행해야 합니다. ⚠️상품 이미지 사이즈 설정 전, 각 상품 이미지 노출 위치 먼저 확인하시기 바랍니다. [상품이미지 사이즈 설정 매뉴얼 바로가기 > ](http://manual.godomall5.godomall.com/data/manual_view.php?category=policy__goods___goods_images#%EC%9D%B4%EB%AF%B8%EC%A7%80%EC%82%AC%EC%9D%B4%EC%A6%88%EC%84%A4%EC%A0%95%EB%B0%A9%EB%B2%95) ✔️ 관리자 메뉴 위치 : 기본설정 > 상품 정책 > 상품 이미지 사이즈 설정\  ✔️ 상품 진열시에 필요한 이미지 사이즈\ \- 가로 180 pixel (리스트그룹형 사이즈)\ \- 가로 248 pixlel (심플이미지형 사이즈)\ \- 가로 320 pixel\ \- 가로 235 pixel ✔️ 가로 320 pixel 사이즈 이미지 설정 예시\  ✔️ 가로 235 pixel 사이즈 이미지 설정 예시\ 포인트 컬러 일괄 변경하기
1. 컬러코드값 확인\ clematis 스킨에 적용되어 있는 기본 컬러 코드 **#ab3e55**을 확인합니다. \  2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ 4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#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. 마우스 오버시 컬러 **#99354a**도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.