# 2AM\_PC 스킨 가이드 > #### 공통
포인트 컬러 일괄 변경하기 1. 컬러코드값 확인\ 2AM 스킨에 적용되어 있는 기본 컬러 코드 **#8917f3**을 확인합니다. \ ![](/files/Rlg7aGsNz7E13RUuuPd5)
2. **관리자 > 디자인 메뉴 접속** 3. **스타일시트/CSS 변경** \ 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 **스타일 시트**를 오픈합니다.\ ![](/files/tZRyhCPUIZYVwZKIr1u5)
4. ctrl+F 검색 후 수정하기\ 스타일시트 파일을 열어 **Ctrl + F(검색)**를 누르고 **#8917f3**를 검색하여 **원하는 포인트 컬러 코드**로 변경합니다. \ \ css/main/main.css (총 1개) \ css/mypage/mypage.css (총 11개) \ css/member/member.css (총 18개) \ css/event/event.css (총 6개) \ css/board/board.css (총 13개) \ css/order/order.css (총 7개) \ css/layout/layout.css (총 20개) \ css/goods/list.css (총 4개) \ css/goods/goods.css (총 13개) \ css/common/layer/layer.css (총 16개) css/common/common.css (총 18개) \ css/service/service.css (총 7개) \ css/button.css (총 52개) 5. 마우스 오버시 컬러 **#6908c3**도 검색하여 **원하는 포인트 컬러 코드**로 변경합니다.
상단메뉴(GNB) 변경하기 ![](/files/o9ebDgiq0ITFkLllcaI2) ✔️**상단 메뉴 영역의** **background(배경색) 변경** `변경 위치` css > layout > layout.css **8줄**\ `8` #header\_warp{background:#8917f3; z-index:101;}
✔️**상단 메뉴 영역의** **color(색상), font-size(크기) 값 변경** `변경 위치` css > layout > layout.css **44줄**\ `44` .top\_member\_box > li a{ display:inline-block; padding:4px 0 4px 19px; color:#e1c1ff; font-size:13px;}\ \ ✔️**장바구니 담긴상품 수량 폰트의 color(색상) 값 변경** `변경 위치` css > layout > layout.css **47줄**\ `47` .top\_member\_box > li strong {color: #23ebe4;}\ \ ✔️ **전체보기 메뉴의 background-color(배경) 값 변경** `변경 위치` css > layout > layout.css **165줄**\ `165` .btn\_all\_menu\_open {position: absolute; top: -1px; left: 0px; background-color: #23ebe4;}
✔️ **카테고리 메뉴의 border-top(위 선), border-bottom(아래 선) 선굵기, 색상 변경** `변경 위치` css > layout > layout.css **134줄**\ `134` #header .gnb {position: relative; /\* font-size: 0; \*/ border-top: 1px solid #4a058a; border-bottom: 1px solid #4a058a; box-sizing: border-box;}\ \ ✔️ **카테고리 메뉴의 기본 font-size(크기), font-weight(굵기), text-align(정렬) 값 변경** `변경 위치` css > layout > layout.css **205줄**\ `205` #header .gnb .depth0 > li > a {display: inline-block; padding: 0 55px 0 10px; font-size: 14px; font-weight: bold; text-align: left; line-height: 49px; color: #fff; min-width: 60px;}\ \ ✔️ **카테고리 메뉴의 마우스 오버 시 color(색상) 변경** `변경 위치` css > layout > layout.css **206줄**\ `206` #header .gnb .depth0 > li > a:hover, #header .gnb .depth0 > li > a.active {color: #23ebe4;}\ \ ✔️ **2차 카테고리의 font-size(크기), color(색상) 값 변경** `변경 위치` css > layout > layout.css **216줄**\ `216` #header .gnb .depth1 li a {display: block; /\* width: 100%; \*/ padding: 5px 10px 7px 19px; font-size: 12px; color: #ffffff;}\ \ ✔️ **2차 카테고리의 background(배경) 값 변경** `변경 위치` css > layout > layout.css **220줄**\ `220` #header .gnb .depth1 {display: none; position: absolute; top: 49px; left: 0; width: 160px; background: #340560; z-index: 100;}\ \ ✔️ **3차 카테고리의 background(배경) 값 변경** `변경 위치` css > layout > layout.css **221줄**\ `221` #header .gnb .depth2 {display: none; position: absolute; top: 0; left: 160px; width: 160px; background: #480d7f;}
좌측형 메뉴 변경하기 ![](/files/OWXdEQy76SqHU7nkzD5B) ✔️**상단 메뉴 영역의** **background(배경색) 변경** `변경 위치` css > layout > layout.css **142줄**\ `142` .side\_cont { position: absolute; top: 0px; left: 0px; width: 250px; min-height: 100%; background: #4c058e; z-index: 150;}
✔️**ALL CATEGORY background(배경색), color(색상) 값 변경** `변경 위치` css > layout > layout.css **149줄**\ `149` .gnb .gnb\_all strong {display: table-cell; width: 170px; height: 51px; padding: 0 0 0 30px; font-size: 14px; vertical-align: middle; background: #8917f3; color: #ffffff;}\ \ ✔️**전체보기 메뉴 아이콘의 background(배경색) 값 변경** `변경 위치` css > layout > layout.css **156줄**\ `156` .btn\_all\_menu\_open {position: absolute; top: 0px; right: 0; background-color: #23ebe4;}\ \ ✔️ **1차 카테고리 메뉴의 font-size(크기), font-weight(굵기), text-align(정렬) 값 변경** `변경 위치` css > layout > layout.css **189줄**\ `189` .sub\_menu\_box .sub\_depth0 > li > a {display: block; padding: 20px 0 20px 10px; font-size: 14px; font-weight: bold; text-align: left; color: #ffffff;}
✔️ **1차 카테고리 메뉴의 마우스 오버시 color(색상) 값 변경** `변경 위치` css > layout > layout.css **190줄**\ `190` .sub\_menu\_box .sub\_depth0 > li > a.active {background: url(../../img/common/btn/btn\_gnb\_list\_over.png) repeat-x left center; color: #23ebe4;}\ \ ✔️ **2차 카테고리의 font-size(크기), color(색상) 값 변경** `변경 위치` css > layout > layout.css **204줄**\ `204` .sub\_menu\_box .sub\_depth1 li a {display: block; padding: 8px 10px 10px 19px; font-size: 12px; color: #fff;}\ \ ✔️ **2차 카테고리의 background(배경) 값 변경** `변경 위치` css > layout > layout.css **208줄**\ `208` .sub\_menu\_box .sub\_depth1 {display: none; position: absolute; top: 0px; left: 249px; min-width: 160px; background: #340560; z-index: 100;}\ \ ✔️ **3차 카테고리의 background(배경) 값 변경** `변경 위치` css > layout > layout.css **209줄**\ `209` .sub\_menu\_box .sub\_depth2 {display: none; position: absolute; top: -10px; left: 160px; min-width: 160px; background: #480d7f;}\ \ ✔️ **하단 메뉴(LOGIN, JOIN, 장바구니 등)의 background(배경색상) 값 변경** `변경 위치` css > layout > layout.css **40줄**\ `40` .header\_top\_cont {background: #3d0571; padding: 30px 0 30px 30px; margin-top: 50px;}\ \ ✔️ **상단 메뉴(LOGIN, JOIN, 장바구니 등)의 color(색상), font-size(크기) 값 변경** `변경 위치` css > layout > layout.css **44줄**\ `44` .top\_member\_box > li a {display: inline-block; padding: 0; color: #e1c1ff; font-size: 13px; letter-spacing: -.5px;}\ \ ✔️ **장바구니 담긴상품 수량 폰트의 color(색상) 값 변경** `변경 위치` css > layout > layout.css **47줄**\ `47` .top\_member\_box > li strong {color: #23ebe4;}
검색창 폰트 변경하기 ![](/files/OWX4wztvfnc6O2iSjnKD) ✔️ **검색창 인풋박스 입력 폰트의 font-size(크기) 값 변경** `변경 위치` css > layout > layout.css **84줄**\ `84` #header .top\_search .top\_text\_cont .top\_srarch\_text { width: 100%; height: 30px; padding: 0 45px 0 15px; box-sizing: border-box; background: transparent; color: #23ebe4;}
✔️ **검색창 인풋박스에 노출되는 키워드 color(색상) 값 변경** `변경 위치` css > layout > layout.css **85줄**\ `85` #header .top\_search .top\_text\_cont .top\_srarch\_text::placeholder{color:#23ebe4;}
✔️ **최근검색어 폰트의 font-size(크기), font-weight(굵기) 값 변경** `변경 위치` css > layout > layout.css **94줄**\ `94` .recent\_box dt {font-size: 13px; font-weight: bold;}\ ✔️ **추천상품 폰트의 font-size(크기), font-weight(굵기), text-align(정렬) 값 변경** `변경 위치` css > layout > layout.css **104줄**\ `104` .recom\_box dt {width: 122px; padding: 0 0 10px 0; font-size: 13px; font-weight: bold; text-align: center; }
✔️ **추천상품명 폰트의 letter-spacing(자간) 값 변경** `변경 위치` css > layout > layout.css **122줄**\ `122` .recom\_tit\_box .item\_name {display: block; letter-spacing: -1px;}
✔️ **추천상품 가격 폰트의 font-size(크기) 값 변경** `변경 위치` css > layout > layout.css **128줄**\ `128` .recom\_money\_box .item\_price {display: block; padding: 7px 0 5px 0; font-size: 14px;}
✔️ **추천상품 검색창 닫기 폰트의 color(색상), font-size(크기), line-height(행간) 값 변경** `변경 위치` 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;}
검색창 레이어 변경하기(배경/라인) ![](/files/vYnpWbvhMzt3Qt0LNPG1) ✔️ **검색창 레이어 영역의 background(배경), border(선) 값 변경** `변경 위치` css > layout > layout.css **87줄**\ `87` #header .top\_search .search\_cont {display: block; margin: 0; font-size: 0; background: #ffffff; position: absolute; top: 33px; left: 0; width: 334px; border: #ccc 1px solid;}
✔️ **추천상품 이미지 영역의 border(선) 값 변경** `변경 위치` css > layout > layout.css **106줄**\ `106` .recom\_box .recom\_photo {display: table-cell; position: relative; width: 120px; height: 120px; border: 1px solid #ececec; vertical-align: middle;}
✔️ **검색창 레이어 하단 영역의 height(높이), background(배경) 값 변경** `변경 위치` css > layout > layout.css **146줄**\ `146` .seach\_top\_all {overflow: hidden; width: 100%; height: 30px; background: #f5f5f5; clear: both;}
푸터 변경하기(폰트/컬러) ![](/files/I8U65EWOX3o9Tj9wSRTN) 1-1. **푸터 메뉴 폰트의 color(색상) 값 변경** `변경 위치` css > layout > layout.css **407줄**\ `407` .foot\_list ul li a {padding: 0 15px 0 14px; color: #b88dde; font-size: 13px;}\ 1-2. **푸터 메뉴 중 개인정보처리방침 폰트의 color(색상) 값 변경** `변경 위치` css > layout > layout.css **408줄**\ `408` .foot\_list ul li a strong {color: #dfc2f9;
2-1. **푸터 정보영역(쇼핑몰정보, 고객센터정보, 계좌정보) 폰트의 color(색상), font-size(크기), line-height(행간) 값 변경** `변경 위치` css > layout > layout.css **4117줄**\ `411` .foot\_cont {overflow: hidden; padding: 35px 0 35px 0; color: #9d78c0; font-size: 12px; line-height: 1.8;}\ 2-2. **푸터 정보영역 중 메일주소의 color(색상) 값 변경** `변경 위치` css > layout > layout.css **420줄**\ `420` .btn\_email {color: #b88dde;}
3-1. **CS CENTER, 계좌정보 타이틀 폰트의 font-size(크기), color(색상) 값 변경** `변경 위치` css > layout > layout.css **380줄**\ `380` .content\_info h3 {padding: 0 0 5px 0; color: #c8a2ea; font-size: 16px; font-weight: normal;}\ 3-2. **CS CENTER 전화번호 폰트의 font-size(크기), color(색상) 값 변경** `변경 위치` css > layout > layout.css **383줄**\ `383` .content\_info .cs\_center strong {display: block; padding: 0 0 7px 0; color: #c8a2ea; font-size: 16px; font-weight: normal; margin-top: 7px;} 4-1. **공지사항 타이틀 폰트의 font-size(크기), color(색상) 값 변경** `변경 위치` css > layout > layout.css **391줄**\ `391` .content\_info .notice\_list h3 > a {color: #c8a2ea; line-height: 1em;} 4-2. **공지사항 리스트 폰트의 color(색상) 값 변경** `변경 위치` css > layout > layout.css **396줄**\ `396` .content\_info .notice\_list a {display: inline-block; overflow: hidden; width: 93%; color: #9d78c0; text-overflow: ellipsis; white-space: nowrap; word-wrap: break-word;}\ 5\. **푸터 영역의 background(배경색) 값 변경** `변경 위치` css > layout > layout.css **401줄**\ `401` #footer\_wrap {position: relative; background: #573e6e;}\ 6\. **푸터 메뉴 하단의border-bottom(선) 값 변경** `변경 위치` css > layout > layout.css **404줄**\ `404` .foot\_list {border-bottom: 1px solid #79569a; line-height: 1;}
7\. **푸터 카피라이트영역 상단의border-top(선) 값 변경** `변경 위치` css > layout > layout.css **419줄**\ `419` .copyright {width: 100%; text-align: center; padding: 24px 0 23px 0; border-top: #79569a 1px solid; color: #23ebe4; font-size: 12px;}\ 8\. **푸터 카피라이트영역 상단의font-size(크기), color(색상) 값 변경** `변경 위치` css > layout > layout.css **419줄**\ `419` .copyright { width: 100%; text-align: center; padding: 24px 0 23px 0; border-top: #79569a 1px solid; color: #23ebe4; font-size: 12px;}
퀵검색 변경하기 ![](/files/1crXVMXGFlaIDEYruyuq) 1\. **퀵검색 타이틀 폰트의 border-bottom(선), font-size(크기) 값 변경** `변경 위치` css > layout > layout.css **402줄**\ `402` .quick\_search\_cont\_box h2 {padding: 20px 0 10px 25px; border-bottom: 1px solid #cccccc; font-size: 20px; background: url(../../img/icon/goods\_icon/icon\_search.png) no-repeat left 26px;}
2\. **퀵검색 항목 폰트의 font-size(크기), text-align(정렬) 값 변경** `변경 위치` css > layout > layout.css **405줄**\ `405` .quick\_search\_cont\_box dl dt {width: 18%; display: inline-block; padding: 10px 0; font-size: 12px; text-align: left; font-weight: bold; vertical-align: top; word-break: break-word;}\ 3\. **퀵검색 레이어의 border-left(선) 값 변경** `변경 위치` css > layout > layout.css **453줄**\ `453` #quick\_search.q\_right {right: -10000px; width: 400px; height: 100% !important; padding: 20px; border-left: 2px solid #323234;}
4\. **검색 버튼의 border(선), background(배경), color(색상) 값 변경** `변경 위치` css > layout > layout.css **431줄**\ `431` .quick\_search\_cont\_box .quick\_btn input {display: inline-block; padding: 10px 30px; border: 1px solid #8917f3; background: #8917f3; color: #ffffff; cursor: pointer; font-weight: bold;}
쇼핑카트탭 변경하기(폰트/컬러) ![](/files/E99oNtuLWQu1E5x7KzBJ) 1\. **쇼핑카트탭 메뉴 선택 시 border-top(선), font-weight(굵기) 값 변경** `변경 위치` css > layout > layout.css **549줄**\ `549` .cart\_tab\_list .on {border-top: 2px solid #ab3e55; font-weight: bold; padding-top: 0;}
2\. **쇼핑카트탭 상단의 height(높이), border-top(선), background(배경) 값 변경** `변경 위치` css > layout > layout.css **544줄**\ `544` #shop\_cart\_wrap .cart\_tab\_wrap { position: relative; height: 39px; border-top: 2px solid #333333; background: #f2f2f2;}
3\. **쇼핑카트탭에 담긴 상품 이미지의 width(너비), height(높이) 값 변경** `변경 위치` css > layout > layout.css **590줄**\ `590` .shop\_view\_tab .prdt\_photo\_box a > img { width: 135px; height: 120px;}
4\. **쇼핑카트탭에 담긴 상품명의 font-size(크기), color(색상) 값 변경** `변경 위치` css > layout > layout.css **592줄**\ `592` .shop\_view\_tab .prdt\_tit { display: block; padding: 11px 0 3px 0; font-size: 12px; color: #4b4b4b;}
5\. **쇼핑카트탭에 담긴 상품 금액의 font-size(크기), color(색상) 값 변경** `변경 위치` css > layout > layout.css **594줄**\ `594` .shop\_view\_tab .prdt\_price strong { font-size: 18px; color: #000; }
쇼핑카트탭 변경하기(옵션 시) ![](/files/G1EhmaMfkkeS4NVNj90J) 1\. **옵션 선택 버튼의 background(배경), color(색상), text-align(정렬), font-weight(굵기) 값 변경** `변경 위치` css > layout > layout.css **558줄**\ `558` .cart\_tab\_list .cart\_tab\_option a {display: block; padding: 10px 55px; background: #6a6a6a; color: #ffffff; text-align: center; font-weight: bold; line-height: 19px;}
2\. **상품명의 font-size(크기) 값 변경** `변경 위치` css > layout > layout.css **631줄**\ `631` .shop\_option\_cont .shop\_option\_tit .shop\_item\_tit { display: block; padding: 0 0 7px 0; font-size: 14px;}
3\. **배송비 내용 폰트의 color(색상) 값 변경** `변경 위치` css > layout > layout.css **633줄**\ `633` .shop\_option\_cont .shop\_option\_tit .shop\_item\_delivery { color: #717171;}
4\. **항목 폰트의 color(색상) 값 변경** `변경 위치` css > layout > layout.css **652줄**\ `652` .option\_total\_box dl dt {float: left; color: #777777;}
5\. **금액의 font-weight(굵기) 값 변경** `변경 위치` css > layout > layout.css **653줄**\ `653` .option\_total\_box dl dd { float: right; font-weight: bold; color: #444444;}
6\. **총 결제 예정금액 폰트의 font-weight(굵기), color(색상) 값을 변경**해줍니다. `변경 위치` css > layout > layout.css **654줄**\ `654` .option\_total\_box .total\_price\_sec dt { font-weight: bold; color: #555555;}
7\. 총 결제 예정금액 가격 폰트의 **color(색상)** 값을 변경해줍니다. `변경 위치` css > layout > layout.css **656줄**\ `656` .option\_total\_box .total\_price\_sec strong { color: #9b344a;}
8\. 장바구니 버튼의 **border(선), background(배경), font-weight(굵기), font-size(크기), color(색상), text-align(정렬)** 값을 변경해줍니다. `변경 위치` css > layout > layout.css **658줄**\ `658` .option\_total\_box .btn\_shop\_cart { display: block; width: 200px; height: 43px; margin: 0; border: 1px solid #cccccc; background: #ffffff; font-weight: bold; font-size: 14px; color: #3e3d3c; text-align: center;}
9\. 바로구매 버튼의 **background(배경), font-weight(굵기), font-size(크기), color(색상), text-align(정렬)** 값을 변경해줍니다. `변경 위치` css > layout > layout.css **546줄**\ `546` #shop\_cart\_wrap .btn\_shop\_buy { display: block; width: 200px; height: 45px; background: #ab3e55; font-weight: bold; font-size: 14px; color: #ffffff; text-align: center;}
웹폰트 적용하기 1. **관리자 페이지 > 디자인 메뉴 접속** 2. 스타일시트 CSS 오픈 \ 좌측 하단 폴더트리 내 “스타일시트/CSS”를 더블 클릭하여 스타일시트 리스트 중 **reset.css**를 오픈하세요.\ \ ![](/files/7EJsoK1h1dOjGZ3fxhH3) 3. reset.css 스타일시트의 **3번째 줄**에 **@import url(’외부 스타일시트 경로’)** 추가\ `변경 위치` css > reset.css **3줄**\ `3` @import url(' / 4. 13번째 줄의 font-family의 맑은 고딕으로 설정된 폰트를 **"나눔고딕" 또는 Nanum Gothic(변경할 폰트명)으로 수정** (️한글 폰트 파일명의 경우 " "입력)\ `변경 위치` css > reset.css **13줄**\ `13` body,th,td,input,select,textarea,button { font-size:12px; line-height:1.5; font-family:Malgun Gothic,"맑은 고딕",AppleGothic,Dotum,"돋움",sans-serif; color:#333} \ \ ⚠️ color값은 디자인 가이드에 맞게 작성하여야 합니다.\ ⚠️웹 폰트 사용 시, 속도 저하가 발생할 수 있어 권장하지 않습니다.
최근 본 상품 변경하기(폰트/컬러) ![](/files/wxJldkSdiXJzfc1mR0LD) 1-1. **최근 본 상품 타이틀(TODAY VIEW)의 color(색상) 값** **변경** `변경 위치` css >layout > layout.css **441줄**\ `441` .scroll\_right\_cont h4 { padding: 0; color: #fff; text-align: center;} 1-2. **최근 본 상품 영역의 background(배경색) 값 변경** `변경 위치` css >layout > layout.css **440줄**\ `440` .scroll\_right\_cont { float: left; min-width: 74px; padding: 18px; background: #8917f3;}\ \ 2\. **최근 본 상품 오버시 펼침 레이어 영역의width(가로), height(세로), border(선), background(배경) 값 변경** `변경 위치` css >layout > layout.css **449줄**\ `449` .scroll\_right\_cont .src\_box { position: absolute; top: -1px; right: -1px; width: 191px; height: 69px; padding: 5px 0 0 7px; border: 1px solid #999999; background: #ffffff; text-align: left; z-index: 10;}
3\. **최근 본 상품의 상품명 폰트의 color(색상) 값 변경** `변경 위치` css >layout > layout.css **450줄**\ `450` .scroll\_right\_cont .src\_box em { display: block; overflow: hidden; width: 115px; height: 43px; color: #939393; word-break: break-all;}
4\. **최근 본 상품의 가격 폰트의color(색상) 값 변경** `변경 위치` css >layout > layout.css **451줄**\ `451` .scroll\_right\_cont .src\_box strong { display: block; color: #8917f3;}
5-1. **페이징 숫자 폰트의 color(색상) 값 변경** `변경 위치` css >layout > layout.css **461줄**\ `461` .scroll\_right\_cont .scr\_paging { width: 74px; margin: 0 auto; color: #c99df2; text-align: center;}
5-2. **페이징 강조 숫자 폰트의 color(색상) 값 변경** `변경 위치` css >layout > layout.css **463줄**\ `463` .scroll\_right\_cont .scr\_paging strong { padding: 0 2px 0 2px; color: #23ebe4;}
스크롤시 상단 고정메뉴 변경하기(폰트,배경) ![](/files/87hbhThH7m9zlwZZqNZ3) 1\. **스크롤시 상단 메뉴 폰트의 color(색상) 값 변경** `변경 위치` css >layout > layout.css **205줄**\ `205` #header .gnb .depth0 > li > a { display: inline-block; padding: 0 55px 0 10px; font-size: 14px; font-weight: bold; text-align: left; line-height: 49px; color: #fff; min-width: 60px;}
2-1. **스크롤시 상단 메뉴 영역의 background(배경) 값 변경** `변경 위치` css >layout > layout.css **12줄**\ `12` .headerFix{ position:fixed; top:-149px; left:0; z-index:101; width:100%; min-width:1200px; background:#1f1f1f !important; }\ 2-2. 스크롤시 상단 메뉴 영역의 **border-top(위 선), border-bottom(아래 선)** 값을 변경합니다. `변경 위치` css >layout > layout.css **158줄**\ `158` .headerFix #header .gnb { border-top: 1px solid #1f1f1f; border-bottom: 1px solid #1f1f1f;}
> #### 메인
메인 상단 배너 영역 변경하기(배너 사이즈) ![](/files/FxiFcRsJmFEDYy0mr2Am) 1\. 2AM 스킨은의 메인 상단 배너는 1200 X 600로 세팅되어 있습니다. 상단영역에 꽉차는 이미지를 적용하려면 **배너 사이즈를 100%로** 변경해야합니다. 2\. 배경이 투명한 png이미지를 등록해야 배너영역의 배경색이 보여집니다.
메인 상단 배너 영역 변경하기(배경) ![](/files/uNkWWKYSf01d1zivEBYq) `변경 위치` css > main > main.css **6줄**\ `6` .main\_visual {overflow: hidden; width: 100%; margin: 0 0 70px 0; background: #8917f3;}
진열타입 타이틀과 더보기 버튼 변경하기(폰트/컬러) ![](/files/slKAacU7fdczmdA4Z2Vp) 1\. 타이틀 폰트의**font-size(크기), text-align(정렬)** 값을 변경해줍니다. \ `변경 위치` css > goods > lsit.css **21줄**\ `21` .goods\_list\_tit h3 { font-size: 22px; text-align: center;} 2\. 더보기 버튼의 **font-size(크기), font-weight(굵기), border(선)** 값을 변경해줍니다. \ `변경 위치` css > goods > lsit.css **12줄**\ `12` .btn\_goods\_more .btn\_goods\_view\_more { padding: 2px 5px 3px 5px; font-size: 11px; font-weight: bold; border: 1px solid #dbdbdb;}
상품 리스트 변경하기 ![](/files/S7lXC1XQZLJt2FjmxMZO) 1\. 상품 이미지의 **border(테두리 색)** 값을 변경해줍니다. \ `변경 위치` css > goods > lsit.css **30줄**\ `30` .item\_photo\_box { display: inline-block !important; overflow: hidden; position: relative; text-align: center; border: 1px solid #ebebeb; vertical-align: middle;} 2\. 상품명 폰트의 **font-size(크기)** 값을 변경해줍니다. \ `변경 위치` css > goods > lsit.css **45줄**\ `45` .item\_tit\_box .item\_name { display: block; padding: 5px 0 0 0; font-size: 13px;} 3\. 짧은설명 폰트의 **color(색상)** 값을 변경해줍니다. \ `변경 위치` css > goods > lsit.css **46줄**\ `46` .item\_tit\_box .item\_name\_explain { display: block; padding: 0 10px 0 0px; color: #a8a8a8;} 4\. 정상가격 폰트의 **color(색상)** 값을 변경해줍니다. \ `변경 위치` css > goods > lsit.css **52줄**\ `52` .item\_money\_box del { display: block; color: #888888;} 5\. 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다. \ `변경 위치` css > goods > lsit.css **53줄**\ `53` .item\_money\_box .item\_price { display: block; padding: 7px 0 5px 0; font-size: 14px; color: #8917f3;} 6\. 타임세일 할인가격 폰트의 **font-size(크기)** 값을 변경해줍니다. \ `변경 위치` css > goods > lsit.css **54줄**\ `54` .item\_money\_box .item\_price .time\_sale\_cost { display: inline-block; padding: 7px 0 5px 20px; font-size: 16px; background: url(../../img/icon/goods\_icon/icon\_time\_sale\_cost.png) no-repeat left 7px;}
> #### 상품상세
타임세일 상세 변경하기 ![](/files/fnnWKybAQpP55E5O1bdN) 1\. 타임세일 영역의 **height(높이), border-bottom(선), background(배경)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **33줄**\ `33` .item\_info\_box .time\_sale { overflow: hidden; height: 49px; margin: 0 0 20px 0; padding: 10px 10px 0 10px; border-bottom: 1px solid #dbdbdb; background: #f5f5f5;} 2\. 타임세일 할인율의 **color(색상), font-size(크기), background(배경), text-align(정렬)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **35줄**\ `35` .time\_sale .time\_sale\_num { width: 59px; height: 44px; padding: 5px 0 0 0; color: #ffffff; font-size: 18px; background: url(../../img/common/bg/bg\_sale.png) no-repeat 0 0; text-align: center; } 3\. 남은 시간 폰트의 **font-size(크기), letter-spacing(정렬)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **37줄**\ `37` .time\_sale .time\_day { margin: 7px 0 0 16px; font-size: 18px; letter-spacing: 2px;} 4\. 남은 재고 수량 폰트의 **color(색상), font-size(크기)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css 40**줄**\ `40` .time\_sale .time\_now\_order span { color: #8917f3; font-size: 18px;} 5\. 타임세일 가격 폰트의 **font-size(크기)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **58줄**\ `58` .time\_sale\_price dd strong { margin: 0 0 0 5px; font-size: 18px;}
상품 상세 변경하기(폰트) ![](/files/6Peh096tlM2LupIjLlM4) 1\. 상품명 폰트의 **font-size(크기)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **44줄**\ `44` .item\_detail\_tit h3 { width: 405px; font-size: 18px;} 2\. 상품 정보 타이틀 폰트의 **color(색상), font-weight(굵기)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **50줄**\ `50` .item\_detail\_list dt { float: left; width: 70px; margin: 0 10px 0 0; color: #888888; font-weight: normal; word-wrap: break-word;} 3\. 상품 판매가 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **54줄**\ `54` .item\_price dd { margin: -2px 0 0 0; font-size: 16px; font-weight: bold;} 4\. 총 합계금액 폰트의 **font-size(크기), font-weight(굵기)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **91줄**\ `91` .item\_tatal\_box .total\_amount dt { font-size: 16px; font-weight: bold;} 5-1. 총 합계금액 가격 폰트의 **color(색상), font-weight(굵기)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **92줄**\ `92` .item\_tatal\_box .total\_amount dd { color: #8917f3; font-weight: bold;} 5-2. 총 합계금액 가격 폰트의 **font-size(크기)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **93줄**\ `93` .item\_tatal\_box .total\_amount dd strong { font-size: 20px;}
상품 상세 변경하기(버튼) ![](/files/PluzVfs7x9FwGaHulcU0) 1. 공유하기 버튼의 **background(배경), border(선)** 값을 변경해줍니다. \ `변경 위치` css > button > button.css **7줄**\ `7` .btn\_gray\_list a, .btn\_gray\_list button { display: inline-block; padding: 0 0 0 11px; background: url(../img/common/btn/btn\_gray\_bg.png) repeat-x; border: 1px solid #dbdbdb; vertical-align: middle;} 2. 조건별 배송 버튼의 **font-size(크기), background(배경)** 값을 변경해줍니다. \ `변경 위치` css > button > button.css **16줄**\ `16` .btn\_gray\_list .btn\_gray\_small { font-size: 11px; background: url(../img/common/btn/btn\_gray\_bg\_02.png) repeat-x bottom;} 3. 장바구니 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경해줍니다. \ `변경 위치` css > button > button.css **40줄**\ `40` .btn\_add\_cart, .btn\_add\_wish { display: inline-block; width: 152px; height: 52px; margin: 0 0 0 6px; padding: 0 10px 0 10px; color: #3e3d3c; font-size: 16px; border: 1px solid #cccccc; background: #ffffff; text-align: center; font-weight: bold;} 4. 바로구매 버튼의 **color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기)** 값을 변경해줍니다. \ `변경 위치` css > button > button.css **44줄**\ `44` .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 #8917f3; background: #8917f3; text-align: center; font-weight: bold;}
상품 상세 변경하기(라인) ![](/files/uar61WN4raVlTqrteZKg) 1\. 셀렉트 영역의 **border(선), background(배경)** 값을 변경해줍니다. \ `변경 위치` css > layout > layout.css **247줄**\ `247` .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(선)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **10줄**\ `10` .item\_photo\_big { display: table-cell; position: relative; width: 600px; height: 600px; text-align: center; vertical-align: middle; border: 1px solid #ebebeb;} 3\. 상품명 아래 **border-bottom(선) 값을 변경해줍니다.** \ `변경 위치` css > goods > goods.css **43줄**\ `43` .item\_detail\_tit { position: relative; padding: 0 0 10px 0; border-bottom: 1px solid #dbdbdb;} 4\. 리스트 항목 구분선의 **border-top(선) 값을 변경해줍니다.** \ `변경 위치` css > goods > goods.css **71줄**\ `71` .item\_add\_option\_box { float: left; margin: 5px 0 0 0; padding: 10px 0 5px 0; border-top: 1px solid #dbdbdb;} 5-1. 선택한 옵션영역의 **border-bottom(선) 값을 변경해줍니다.** \ `변경 위치` css > goods > goods.css **690줄**\ `690` .item\_detail\_list + .item\_choice\_list table { width: 100%; border-bottom: 1px solid #999999;} 5-2. 선택한 옵션영역의 **background(배경) 값을 변경해줍니다.** \ `변경 위치` css > goods > goods.css **695줄**\ `695` .item\_choice\_list table { width: 100%; background: #f5f5f5;} 6\. 총 합계금액 구분 영역의 **border-top(선) 값을 변경해줍니다.** \ `변경 위치` css > goods > goods.css **90줄**\ `90` .item\_tatal\_box .total\_amount { margin: 15px 0 0 0; padding-top: 10px; border-top: 1px solid #dbdbdb;}
상품 상세 탭 변경하기 ![](/files/rKe5rtCz7q9m9DzEYYIr) 1-1. 상품 상세 탭 **color(색상), border(선)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **118줄**\ `118` .item\_goods\_tab li a { display: block; margin: 0 0 0 -1px; padding: 10px 0 12px 0; color: #999999; font-size: 13px; border: 1px solid #dadada; border-bottom: 1px solid #bbbbbb; background: #ffffff;} 1-2. 상품 상세 탭 선택시 **color(색상), font-weight(굵기), border(선)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **119줄**\ `119` .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;} 1-3. 상품 상세 탭 양쪽 끝의 **border(선)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **114줄**\ `114` .item\_goods\_tab { padding: 80px 0 0 0; border-bottom: 1px solid #bbbbbb;} 2\. 글 등록 수량 폰트의 **color(색상)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **122줄**\ `122` .item\_goods\_tab li a strong { color: #ab3e55;}
> #### 주문결제
장바구니 타이틀 변경하기 ![](/files/qA5nPTifQnoEJy0hCA4T) 1\. 장바구니 타이틀 폰트의 **color(색상), font-size(크기), color(색상)** 값을 변경해줍니다. \ `변경 위치` css > order > order.css **14줄**\ `14` .order\_wrap .order\_tit h2 { float: left; font-size: 28px; color: #222222;} 2\. 현재 스텝 표시 폰트의 **color(색상), font-weight(굵기)** 값을 변경해줍니다. \ `변경 위치` css > order > order.css **17줄**\ `17` .order\_wrap .order\_tit .page\_on { color: #8917f3; font-weight: bold;} 3\. 다음 진행 스텝 표시 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다. \ `변경 위치` css > order > order.css **16줄**\ `16` .order\_wrap .order\_tit ol li { float: left; font-size: 14px; color: #d1d1d1;} 4\. 장바구니 타이틀 폰트 하단의 **border-bottom(선)** 값을 변경해줍니다. \ `변경 위치` css > order > order.css **13줄**\ `13` .order\_wrap .order\_tit { overflow: hidden; border-bottom: 1px solid #dbdbdb;}
주문서 작성/결제 화면 변경하기 #### 주문서 금액 변경하기 ![](/files/CO6NY5jOWN5djAcnBHye) 1-1. 상품금액/배송비/합계 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.\ `변경 위치` css > order > order.css **137줄**\ `137` .price\_sum\_cont .price\_sum\_list dd {color:#8917f3;} 1-2. 상품금액/배송비/합계 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.\ `변경 위치` css > order > order.css **138줄**\ `138` .price\_sum\_cont .price\_sum\_list dd strong {font-weight:700;font-size:18px;color:#8917f3;} #### 최종결제금액, 결제하기 버튼 변경하기 ![](/files/YHgXk87fxtKReAceuygL) 1\. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경해줍니다.\ `변경 위치` css > order > order.css **323줄**\ `323` .payment\_final\_total dd {display:inline-block;font-size: 30px;color:#8917f3;} 2\. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경해줍니다.\ `변경 위치` css > order > order.css **187줄**\ `187` .btn\_order\_buy { display: inline-block; width: 300px; height: 61px; line-height: 59px; color: #fff; font-size: 20px; border: 1px solid #8917f3; background: #8917f3; text-align: center;}
--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://godomall-help.nhn-commerce.com/beginner/design/freeskin/2am/pc-guide.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.