# 2AM\_Mobile 스킨 가이드
> #### 공통
스크롤 상단 고정메뉴 변경하기
✔️ 스크롤시 상단 메뉴 영역의 **background(배경), opacity(투명도)** 값을 변경합니다. \
`변경 위치` css > main > main.css **14줄**\
`14` #header\_wrap header.on {background: #222323; opacity: 0.95;}
푸터 변경하기
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;}
슬라이드 메뉴 변경하기
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;}
로그인화면 버튼 변경하기
✔️ 로그인, 주문조회 버튼의 **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;}
> #### 메인
상단영역 변경하기(로고영역, 메뉴영역)
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;}
공지사항, 고객센터, 계좌정보 변경하기
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;}
상품 리스트 스타일 변경하기
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;}
진열타입 타이틀과 더보기 버튼 변경하기
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;}
> #### 상품상세
상품상세 상단 배경 변경하기
✔️ 상단 메뉴 영역의 **background(배경)** 값을 변경합니다. \
`변경 위치` css > gd\_layout.css **12줄**\
`12` #header\_wrap header { background: #8917f3;}
상단 제품 정보 영역 변경하기
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;}
상품 구매하기, 장바구니 버튼 변경하기
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;}
구매옵션 영역 변경하기
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;}
상품 상세 탭 변경하기
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;}
> #### 주문결제
장바구니화면 폰트 변경하기
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;}
장바구니화면 버튼 변경하기
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;}