🖥️2AM_PC 스킨 가이드

1. 컬러코드값 확인 2AM 스킨에 적용되어 있는 기본 컬러 코드 #8917f3을 확인합니다.

2. 관리자 > 디자인 메뉴 접속

3. 스타일시트/CSS 변경 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈합니다.

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도 검색하여 원하는 포인트 컬러 코드로 변경합니다.

✔️상단 메뉴 영역의 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;}

✔️상단 메뉴 영역의 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;}

✔️ 검색창 인풋박스 입력 폰트의 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;}

✔️ 검색창 레이어 영역의 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;}

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;}

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;}

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; }

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를 오픈하세요.

3. reset.css 스타일시트의 3번째 줄에 @import url(’외부 스타일시트 경로’) 추가 변경 위치 css > reset.css 3줄 3 @import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');} /

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값은 디자인 가이드에 맞게 작성하여야 합니다. ⚠️웹 폰트 사용 시, 속도 저하가 발생할 수 있어 권장하지 않습니다.

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;}

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;}

1. 2AM 스킨은의 메인 상단 배너는 1200 X 600로 세팅되어 있습니다. 상단영역에 꽉차는 이미지를 적용하려면 배너 사이즈를 100%로 변경해야합니다.

2. 배경이 투명한 png이미지를 등록해야 배너영역의 배경색이 보여집니다.

변경 위치 css > main > main.css 6줄 6 .main_visual {overflow: hidden; width: 100%; margin: 0 0 70px 0; background: #8917f3;}

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;}

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;}

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;}

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;}

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;}

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;}

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;}

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;}

주문서 금액 변경하기

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;}

최종결제금액, 결제하기 버튼 변경하기

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;}