# 2AM\_Mobile 스킨 가이드 > #### 공통
스크롤 상단 고정메뉴 변경하기 ![](/files/9RYjmymtEjUM1NyAyTS8) ✔️ 스크롤시 상단 메뉴 영역의 **background(배경), opacity(투명도)** 값을 변경합니다. \ `변경 위치` css > main > main.css **14줄**\ `14` #header\_wrap header.on {background: #222323; opacity: 0.95;}
푸터 변경하기 ![](/files/XxO1QrRWhplsqFwY7p0O) 1\. 푸터 TOP버튼 영역의 **height(높이), border-bottom(아래 선), color(텍스트 색상), background(배경), font-size(크기), fone-weight(굵기)** 값을 변경해줍니다. \ `변경 위치` css > gd\_layout.css **150줄**\ `150` #footer footer .ft\_btn\_top a { display: inline-block; width: 100%; height: 38px; border-bottom: 1px solid #79569a; text-align: center; color: #c8a2ea; background: #573e6e; line-height: 42px; font-size: 13px; font-weight: bold;} 2-1. 쇼핑몰 정보 버튼(회사소개, 이용약관, 이용안내)의 **color(색상), font-size(크기)** 값을 변경해줍니다. \ `변경 위치` css > gd\_layout.css **146줄**\ `146` #footer footer .ft\_info2\_box .ft\_menu li a { display: block; padding: 0 0 15px 0; font-size: 11px; color: #c8a2ea; letter-spacing: -1px;} 2-2. 개인정보처리방침 버튼의 **color(색상)** 값을 변경해줍니다. \ `변경 위치` css > gd\_layout.css **147줄**\ `147` #footer footer .ft\_info2\_box .ft\_menu li a.privacy { color: #c8a2ea; font-weight: bold;} 3\. 푸터 컨텐츠 정보 영역의 **font-size(크기), color(색상)** 값을 변경해줍니다. \ `변경 위치` css > gd\_layout.css **148줄**\ `148` #footer footer .ft\_info2\_box .ft\_address { float: right; width: 60%; font-size: 11px; color: #9d78c0; word-break: keep-all; line-height: 20px;} 4\. 카피라잇 영역의 **color(텍스트 색상), font-size(크기), border-top(위 선)** 값을 변경해줍니다. \ `변경 위치` css > gd\_layout.css **157줄**\ `157` #footer footer .ft\_copy { padding: 11px 0 15px 0; border-top: 1px solid #79569a; color: #23ebe4; font-size: 12px; text-align: center; font-style: normal;}
슬라이드 메뉴 변경하기 ![](/files/YV8YcFy1vUrL7StMYT1k) 1-1. 상단 영역의 **background(배경색)** 값을 변경합니다. \ `변경 위치` css > gd\_layout.css **82줄**\ `82` .nav\_banner { overflow: hidden; margin: 0 auto; padding: 17px 15px 13px 17px; text-align: center; background: #8917f3;} 1-2. 로그인, 회원가입 폰트의 **font-size(크기), color(색상)** 값을 변경합니다. \ `변경 위치` css > gd\_layout.css **87줄**\ `87` .nav\_banner .nav\_login ul li a { display: inline-block; font-size: 13px; color: #e3c8fc;} 2-1. 아이콘 버튼 영역의 **background(배경색)** 값을 변경합니다. \ `변경 위치` css > gd\_layout.css **95줄**\ `95` .nav\_link { background: #5e0bab;} 2-2. 아이콘 버튼 영역의 **border-right(구분선)** 값을 변경합니다. \ `변경 위치` css > gd\_layout.css **97줄**\ `97` .nav\_link ul li { display: table-cell; width: 33.3%; padding: 15px 0 15px 0; border-right: 1px solid #8917f3; text-align: center;} 2-3. 아이콘 버튼명의 **font-size(크기), color(색상)** 값을 변경합니다. \ `변경 위치` css > gd\_layout.css **99줄**\ `99` .nav\_link ul li a { display: block; padding: 36px 0 0 0; font-size: 13px; color: #ffffff;} 3\. 카테고리버튼(CATEGORY)의 **font-size(크기), color(색상), border-bottom(하단구분 선 색상)** 값을 변경합니다. \ `변경 위치` css > gd\_layout.css **113줄**\ `113` .nav\_tabmenu\_box .nav\_tab\_list .nav\_tabmenu\_tit { display: block; margin: 15px 10px 0 10px; padding: 0 0 6px 0; font-size: 17px; color: #333333; font-weight: bold; background: url(../img/icon/icon\_left\_title\_arrow\.png) no-repeat 244px center; background-size: 12px 7px; border-bottom: 1px solid #8917f3;} 4-1-1. 1차 카테고리버튼(SALE, BEST 등)의 기본 상태 **background(배경색)** 값을 변경합니다. \ `변경 위치` css > proc > proc.css **5줄**\ `5` .category\_side > li { background: #8917f3;} 4-1-2. 1차 카테고리버튼(SALE, BEST 등)의 기본 상태 **font-size(크기), color(색상)** 값을 변경합니다. \ `변경 위치` css > proc > proc.css **9줄**\ `9` .category\_side > li a { position: relative; display: block; padding: 12px 30px 12px 15px; margin: 0 0 1px 0; font-size: 16px; color: #ffffff; word-break: break-all;} 4-2-1. 1차 카테고리버튼(SALE, BEST 등)의 선택상태 **background(배경색)** 값을 변경합니다. \ `변경 위치` css > proc > proc.css **6줄**\ `6` .category\_side > li.on { background: #510696;} 4-2-2. 1차 카테고리버튼(SALE, BEST 등)의 선택 상태 **color(색상)** 값을 변경합니다. \ `변경 위치` css > proc > proc.css **13줄**\ `13` .category\_side > li > a.on { color: #23ebe4;} 5-1. 2차 카테고리버튼(Christmas Sale, SEASON OFF 등)의 기본 상태 **color(색상)** 값을 변경합니다. \ `변경 위치` css > proc > proc.css **15줄**\ `15` .category\_side > li > ul > li > a { padding-left: 10px; margin: 0; color: #313131;} 5-2. 2차 카테고리버튼(Christmas Sale, SEASON OFF 등)의 **border-bottom(구분선)** 값을 변경합니다. \ `변경 위치` css > proc > proc.css **8줄**\ `8` .category\_side > li ul > li { border-bottom: 1px solid #eaeaea;} 6\. 2차 카테고리버튼(Christmas Sale, SEASON OFF 등)의 선택 상태 **background(배경색)** 값을 변경합니다. \ `변경 위치` css > proc > proc.css **16줄**\ `16` .category\_side > li > ul > li > a.on { background: #eaeaea;} 7\. 3차 카테고리버튼(WINTER, SUMMER 등)의 **color(색상), font-size(크기)** 값을 변경합니다. \ `변경 위치` css > proc > proc.css **12줄**\ `12` .category\_side > li > ul > li > ul > li > a { padding-left: 15px; font-size: 14px; color: #909090;} 8\. PC화면, 고객센터 버튼의 **background(배경색), color(색상), font-size(크기)** 값을 변경합니다.\ `변경 위치` css > gd\_layout.css **134줄**\ `134` .ft\_button\_box ul li a { display: block; padding: 10px 0; background: #a6a6a6; color: #ffffff; font-size: 13px;}
로그인화면 버튼 변경하기 ![](/files/e068Elr7Q4yOzLngHNgM) ✔️ 로그인, 주문조회 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기), font-size(크기)** 값을 변경해줍니다. \ `변경 위치` css > gd\_button.css **35줄**\ `35` .member\_login\_order\_btn { display: block; width: 100%; height: 40px; margin: 5px 0 0 0; border: 1px solid #8917f3; font-size: 14px; background: #8917f3; text-align: center; color: #ffffff; font-weight: bold; font-size: 15px;}
> #### 메인
상단영역 변경하기(로고영역, 메뉴영역) ![](/files/6xcW3cROoOptQT1pwUQp) 1\. 2AM 스킨은 로고와 전체메뉴가 있는 가장 상단의 배경이 투명으로 설정되어 있습니다. \ 배경색을 삽입하려면 **background(배경색)** 값을 변경해줍니다. \ none으로 되어 있는 부분을 컬러값으로 수정하면 됩니다. \ `변경 위치` css > main > main.css **13줄**\ `13` #header\_wrap header { background: none;} 2\. 장바구니의 갯수가 노출되는 원의**background(배경색)**과 숫자 폰트의 **color(색상)** 값을 변경해줍니다. \ `변경 위치` css > gd\_laout.css **35줄**\ `35` #header\_wrap header .header\_box .cart\_count { position: absolute; top: 10px; right: -5px; display: block; padding: 3px 6px 1px 6px; line-height: 15px; border-radius: 100%; color: #8917f3; background: #23ebe4; vertical-align: middle; font-size: 11px;} 3-1. 게시판메뉴의**background(배경색)** 값을 변경해줍니다. \ `변경 위치` css > main > main.css **17줄**\ `17` .main .main\_top\_menu { display: table; width: 100%; background: #8917f3;} 3-2. 게시판메뉴 텍스트의**color(색상), font-size(크기)** 값을 변경해줍니다. \ `변경 위치` css > main > main.css **19줄**\ `19` .main .main\_top\_menu li a { display: block; padding: 13px 0 13px 0; font-size: 14px; color: #ffffff;}
공지사항, 고객센터, 계좌정보 변경하기 ![](/files/vKIHBXrr0s7e74qn7xuI) 1-1. 공지사항 영역의**background(배경색)** 값을 변경해줍니다. \ `변경 위치` css > main > main.css **20줄**\ `20` .main .main\_notice { display: table; width: 100%; margin: 0 auto; padding: 15px 0 15px 0; background: #490984;} 1-2. 공지사항 타이틀 **font-size(폰트크기), font-weight(폰트굵기), color(색상)** 값을 변경해줍니다. \ `변경 위치` css > main > main.css **21줄**\ `21` .main .main\_notice .tit { display: table-cell; width: 84px; font-size: 13px; font-weight: bold; color: #23ebe4; text-align: center;} 1-3. 공지사항 내용의**color(색상)** 값을 변경해줍니다. \ `변경 위치` css > main > main.css **25줄**\ `25` .main .main\_notice ul li a { display: block; width: 100%; color: #ffffff;} 2\. 고객센터, 계좌정보 타이틀 영역(CS CENTER, BANK INFO)의**font-weigh(폰트굵기), font-size(폰트크기)** 값을 변경해줍니다. \ `변경 위치` css > main > main.css **60줄**\ `60` .main .main\_info\_box .main\_info dl dt { display: table-cell; width: 30%; font-size: 13px; font-weight: bold; vertical-align: top;} 3\. 전화번호의**color(색상), font-weight(폰트굵기), font-size(폰트사이즈)** 값을 변경해줍니다. \ `변경 위치` css > main > main.css **65줄**\ `65` .main .main\_info dl dd p.phone a { font-size: 22px; color: #8917f3; font-weight: bold; line-height: 22px;} 4\. 영업시간의**color(색상), font-size(폰트크기)** 값을 변경해줍니다. \ `변경 위치` css > main > main.css **67줄**\ `67` .main .main\_info dl dd p.business\_hours { font-size: 11px; color: #666;} 5\. 예금주 텍스트**font-size(폰트크기)** 값을 변경해줍니다. \ `변경 위치` css > main > main.css **70줄**\ `70` .main .main\_info dl dd .account\_holder { font-size: 14px;} 6\. 계좌번호 텍스트**font-size(폰트크기)** 값을 변경해줍니다. \ `변경 위치` css > main > main.css **61줄**\ `61` .main .main\_info\_box .main\_info dl dd { display: table-cell; width: 70%; font-size: 11px;}
상품 리스트 스타일 변경하기 ![](/files/4gky42CVcl3Toa2e4kO3) 1\. 상품리스트 이미지의 **border(라인)** 값을 변경해줍니다. \ `변경 위치` css > goods > list > list\_01.css **10줄**\ `10` .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 **17줄**\ `17` .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 **30줄**\ `30` .goods\_prd\_item2 .goods\_prd\_content .goods\_info\_list li.price .c\_price { color: #8917f3;}
진열타입 타이틀과 더보기 버튼 변경하기 ![](/files/fGF8ymsfbKPiLl7aCS1M) 1\. 타이틀의 **font-size(크기), color(색상), font-weight(굵기**) 값을 변경해줍니다. \ `변경 위치` css > proc > proc.css **56줄**\ `56` .\_goods\_display\_main h3 { position: relative; display: block; padding: 8px 0 0 10px; font-size: 16px; color: #181818; text-align: center; font-weight: bold;} 2\. 더보기 버튼의 **background(배경), font-size(크기), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다. \ `변경 위치` css > gd\_button.css **298줄**\ `298` .main\_more\_btn2 { display: inline-block; padding: 4px 8px 2px 8px; text-align: center; background: #ffffff; font-size: 12px; border: 1px solid #9f9f9f; color: #494949; font-weight: bold; box-sizing: border-box; border-radius: 2px;}
> #### 상품상세
상품상세 상단 배경 변경하기 ![](/files/QuyV8ngUL3XsUYwJzFbP) ✔️ 상단 메뉴 영역의 **background(배경)** 값을 변경합니다. \ `변경 위치` css > gd\_layout.css **12줄**\ `12` #header\_wrap header { background: #8917f3;}
상단 제품 정보 영역 변경하기 ![](/files/O5IK0ir2wOVqQbwa8vZI) 1\. 상품명 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다. \ `변경 위치` css > gd\_button.css **339줄**\ `339` .goods\_view .detail\_info h3 { font-size: 18px; color: #333333;} 2\. 상품 할인가격 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다. \ `변경 위치` css > gd\_button.css **346줄**\ `346` .goods\_view .detail\_info .detail\_info\_top .price\_box .price { font-size: 24px; color: #333333;} 3\. 상품 할인 전 가격 폰트의 **color(색상)** 값을 변경해줍니다. \ `변경 위치` css > gd\_button.css **348줄**\ `348` .goods\_view .detail\_info .detail\_info\_top .price\_box del { color: #999999;} 4\. 상품 상세페이지 리스트 제목(배송정보 등) **font-size(크기), color(색상)** 값을 변경해줍니다. \ `변경 위치` css > gd\_button.css **361줄**\ `361` .goods\_view .detail\_info .detail\_sub\_info dl dt { display: table-cell; width: 25%; font-size: 12px; color: #888888;} 5\. 상품 상세페이지 리스트 내용 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다. \ `변경 위치` css > gd\_button.css **362줄**\ `362` .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 > gd\_button.css **331줄**\ `331` .goods\_view .share\_btn\_box ul li button { display: block; margin: 0 auto; padding: 10px 0; font-size: 13px; text-align: center; background: none; border: none; color: #333333; font-weight: bold;}
상품 구매하기, 장바구니 버튼 변경하기 ![](/files/bFvnmRskhoVspYnTuJ2z) 1\. 장바구니 버튼**background(배경색), color(색상),font-size(폰트크기), border(테두리색상)** 값을 변경해줍니다. \ `변경 위치` css > gd\_button.css **166줄**\ `166` .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\. 바로구매 버튼**background(배경색), color(색상),font-size(폰트크기), border(테두리색상)** 값을 변경해줍니다. \ `변경 위치` css > gd\_button.css **168줄**\ `168` .detail\_order\_btn { display: block; width: 100%; padding: 10px 0 10px 0; font-size: 16px; text-align: center; background: #8917f3; border: 1px solid #8917f3; color: #ffffff; font-weight: bold; box-sizing: border-box;}
구매옵션 영역 변경하기 ![](/files/sqz7rpBZFPVuqwJTco5y) 1\. 상품명의**font-weight(굵기), font-size(크기)** 값을 변경해줍니다. \ **color**값을 추가하여 색상을 변경할 수 있습니다.\ `변경 위치` css > gd\_common.css **217줄**\ `217` .view\_order\_goods dl dt { font-size: 12px; font-weight: bold;} 2\. 상품금액의**font-weight(굵기), font-size(크기)** 값을 변경해줍니다. \ **color**값을 추가하여 색상을 변경할 수 있습니다.\ `변경 위치` css > gd\_common.css **228줄**\ `228` .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-weight(굵기), font-size(크기)** 값을 변경해줍니다. \ **color**값을 추가하여 색상을 변경할 수 있습니다.\ `변경 위치` css > gd\_common.css **209줄**\ `209` .total\_price\_box ul li dl dd { display: table-cell; font-size: 15px; font-weight: bold; text-align: right; vertical-align: middle;}
상품 상세 탭 변경하기 ![](/files/GSnyZp859GQ3admxBnFj) 1\. 상품 상세페이지 탭 폰트의 **color(색상), font-size(크기), line-height(행간), font-weight(굵기), text-align(정렬)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **387줄**\ `387` .goods\_view .detail\_btm\_tab\_menu\_box .detail\_btm\_tab\_menu ul li a { display: inline-block; width: 100%; color: #484848; font-size: 13px; line-height: 13px; font-weight: bold; text-align: center;} 2\. 게시글 등록 수량 폰트의 **font-size(크기), color(색상), line-height(행간)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **388줄**\ `388` .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: #8917f3; line-height: 11px;} 3\. 현재위치 탭표시 라인의 **border-bottom(선)** 값을 변경해줍니다. \ `변경 위치` css > goods > goods.css **393줄**\ `393` .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 #8917f3;}
> #### 주문결제
장바구니화면 폰트 변경하기 ![](/files/Ntonuj5TeMdySCOf6Cx2) 1\. 장바구니 상품명 폰트의 **font-weight(굵기), color(색상)** 값을 변경해줍니다. \ `변경 위치` css > order > order.css **52줄**\ `52` .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 **51줄**\ `51` .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 **54줄**\ `54` .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: #8917f3; font-weight: bold;} 4\. 장바구니 항목 타이틀 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다. \ `변경 위치` css > order > order.css **85줄**\ `85` .cart .my\_buy dl dt { display: table-cell; width: 50%; font-size: 13px; color: #5e5e5e;} 5\. 장바구니 총 상품금액 폰트의 **font-size(크기), color(색상)** 값을 변경해줍니다. \ `변경 위치` css > order > order.css **86줄**\ `86` .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 **88줄**\ `88` .cart .my\_buy dl.total dd { color: #8917f3; font-size: 17px;}
장바구니화면 버튼 변경하기 ![](/files/2M6VZsN91HgIOeAa6WfF) 1\. 쿠폰적용 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다. \ `변경 위치` css > gd\_button.css **222줄**\ `222` .cart\_coupon\_apply { display: inline-block; padding: 5px 5px 5px 5px; text-align: center; background: #8917f3; border: 1px solid #8917f3; color: #ffffff; font-weight: bold; box-sizing: border-box; border-radius: 2px;} 2\. 옵션변경 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다. \ `변경 위치` css > gd\_button.css **225줄**\ `225` .cart\_option\_modify { display: inline-block; padding: 5px 5px 5px 5px; text-align: center; background: #ffffff; border: 1px solid #9f9f9f; color: #494949; font-weight: bold; box-sizing: border-box; border-radius: 2px;} 3\. 선택상품 삭제, 주문 버튼의 **text-align(정렬), background(배경), border(선), color(색상), font-weight(굵기)** 값을 변경해줍니다. \ `변경 위치` css > gd\_button.css **227줄**\ `227` .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 **229줄**\ `229` .cart\_all\_order\_btn { display: inline-block; width: 100%; padding: 10px 0 10px 0; text-align: center; background: #8917f3; border: 1px solid #8917f3; color: #ffffff; font-weight: bold; box-sizing: border-box; font-size: 14px;}
--- # 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/mobile-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.