가 다섯 개 있는데
(왼쪽 메뉴 sub.board.php 와 마우스오버 효과가 남긴 것),
이들이 줄바꿈을 만들어 뒤따르는 float 요소를 아래로 밀어냈다.
높이가 0 이므로 화면에 보이지는 않는다. 자리만 차지하지 않게 한다. */
.quick,
.stephow-hover-overlay {
float: left;
width: 0;
height: 0;
margin: 0 !important;
padding: 0 !important;
line-height: 0;
font-size: 0;
}
/* 클래스가 없는 빈
도 같은 이유로 줄바꿈을 만든다.
(내용이 전혀 없고 높이가 0 인 것만 골라 자리를 없앤다) */
#container > div:empty {
float: left;
width: 0;
height: 0;
margin: 0 !important;
padding: 0 !important;
line-height: 0;
font-size: 0;
}
/* 왼쪽 메뉴 자체는 정상적으로 보여야 하므로 되돌린다 */
.quick .quick_l_wrap {
float: none;
width: 177px !important;
height: auto;
line-height: normal;
font-size: 14px;
}
/* ───────────────────────────────────────────────
17. 본문이 짧은 화면에서 푸터가 바짝 붙는 문제
───────────────────────────────────────────────
FAQ 처럼 내용이 적은 화면은 본문 높이가 274px 밖에 안 돼
푸터가 화면 중간에 올라와 허전해 보였다.
본문 영역에 최소 높이를 주어 아래쪽 여백을 확보한다. */
#container {
min-height: 620px;
padding-bottom: 60px;
box-sizing: border-box;
}
@media (max-width: 640px) {
#container { min-height: 420px; padding-bottom: 40px; }
}
/* ───────────────────────────────────────────────
18. 모든 제목 — 가운데 정렬 · 위 17px 여백
───────────────────────────────────────────────
게시판 제목과 왼쪽 커뮤니티 메뉴 제목을 모두 가운데에 놓고
위쪽으로 17px 띄운다. 앞의 2번·12번 항목에서 왼쪽정렬로 잡았던 것을
여기서 최종적으로 덮는다. */
/* 게시판 제목 (공지·소식·갤러리·이벤트·후기·FAQ·Q&A 공통) */
.bo_title {
margin-top: 17px !important;
text-align: center !important;
}
.bo_title h2 {
text-align: center !important;
}
/* 왼쪽 커뮤니티 메뉴 — 제목과 항목 모두 */
.quick_l_wrap {
margin-top: 17px !important;
}
.quick_l_wrap > h2 {
text-align: center !important;
}
.quick_l_wrap ul li a,
.quick_l_wrap ul li.on > a,
.quick_l_wrap ul li.onlyon a {
text-align: center !important;
}
/* ───────────────────────────────────────────────
19. 왼쪽 커뮤니티 메뉴 — 현재 위치 표시 통일
───────────────────────────────────────────────
갤러리 스킨 CSS 가 li.on 에 분홍 배경을 칠하고,
화면마다 글자 정렬이 가운데/왼쪽으로 달라 보였다.
sub.board.php 에서 onlyon(항상 켜져 있던 클래스)을 없앴고,
여기서는 모양을 하나로 고정한다. */
.quick_l_wrap ul li,
.quick_l_wrap ul li.on,
.quick_l_wrap ul li.onlyon {
background: none !important;
}
.quick_l_wrap ul li a,
.quick_l_wrap ul li.on a,
.quick_l_wrap ul li.onlyon a {
display: block !important;
text-align: center !important;
padding: 11px 12px !important;
font-size: 14px !important;
color: #555 !important;
background: #fff !important;
font-weight: 400 !important;
border-bottom: 1px solid #f0f0f0 !important;
}
/* 지금 보고 있는 메뉴만 강조 */
.quick_l_wrap ul li.on > a {
background: #f7f7f7 !important;
color: #222 !important;
font-weight: 600 !important;
}
.quick_l_wrap ul li a:hover {
background: #fafafa !important;
color: #222 !important;
}
/* ───────────────────────────────────────────────
20. 후기 페이지 제목 높이 맞추기
───────────────────────────────────────────────
후기(/shop/itemuselist.php)는 게시판이 아니라 쇼핑몰 스킨을 쓴다.
감싸는 틀이 달라 제목이 5px 아래에서 시작했다 (198 vs 193).
위쪽 여백을 없애 다른 게시판과 같은 높이로 맞춘다. */
#uselistw {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* 쇼핑몰 스킨은 #container 에 위쪽 안쪽여백 5px 을 준다.
후기 제목만 5px 밀리는 원인이므로 여기서 없앤다.
(게시판 쪽 #container 는 원래 0 이라 영향이 없다) */
#container {
padding-top: 0 !important;
}
/* ───────────────────────────────────────────────
21. 후기 목록 — 사진 크기 통일
───────────────────────────────────────────────
후기마다 사진 크기가 제각각이라 목록이 들쭉날쭉했다.
왼쪽 상품 썸네일은 정사각 140px 로 고정하고,
본문 안에 들어간 사진도 최대 260px 을 넘지 않게 한다. */
#sps > ol > li {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 18px 0;
border-bottom: 1px solid #f0f0f0;
list-style: none;
}
/* 왼쪽 상품 썸네일 : 정사각 고정 */
#sps .sps_img {
flex: 0 0 140px;
width: 140px !important;
margin: 0 !important;
text-align: center;
}
#sps .sps_img a { display: block; }
#sps .sps_img img {
width: 140px !important;
height: 140px !important;
object-fit: cover;
border-radius: 0;
display: block;
}
#sps .sps_img span {
display: block;
margin-top: 6px;
font-size: 12px;
color: #777;
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* 오른쪽 글 영역 */
#sps .sps_section {
flex: 1 1 auto;
min-width: 0;
text-align: left;
}
#sps .sps_section > h2 {
margin: 0 0 8px !important;
padding: 0 !important;
border: 0 !important;
font-size: 15px !important;
font-weight: 600 !important;
text-align: left !important;
color: #333 !important;
}
/* 본문 안 사진도 크기 제한 */
#sps [id^="sps_con_"] img {
max-width: 260px !important;
height: auto !important;
border-radius: 0;
margin: 6px 0;
}
/* 답변 안의 작은 썸네일 */
#sps .sps_reply .sps_img,
#sps .sps_reply .sps_img img {
flex: 0 0 50px;
width: 50px !important;
height: 50px !important;
}
@media (max-width: 640px) {
#sps > ol > li { gap: 10px; padding: 14px 0; }
#sps .sps_img,
#sps .sps_img img { flex: 0 0 90px; width: 90px !important; height: 90px !important; }
#sps [id^="sps_con_"] img { max-width: 100% !important; }
}
/* ───────────────────────────────────────────────
22. 게시판 버튼 통일 (관리자 · 글쓰기 · 목록 등)
───────────────────────────────────────────────
게시판마다 스킨이 달라 버튼 모양이 제각각이었다.
대부분 : 관리자 빨강 68×35 12px / 글쓰기 흰바탕+분홍테두리
행사갤러리 : 관리자 회색 91×36 13px / 글쓰기 분홍바탕+흰글자 (색이 반대)
기준을 하나로 정한다.
· 크기 높이 34px · 글자 13px · 가로 여백 16px
· 글쓰기 분홍 바탕 + 흰 글자 (가장 자주 누르는 버튼이므로 눈에 띄게)
· 관리자 회색 테두리 + 회색 글자 (관리자만 보이므로 차분하게)
· 목록·기타 흰 바탕 + 연회색 테두리 */
.btn_b01, .btn_b02, .btn_admin,
.btn_bo_user .btn,
#bo_btn_top .btn,
.bo_fx .btn,
a.btn_b01, a.btn_b02, a.btn_admin,
button.btn_b01, button.btn_b02, button.btn_admin {
display: inline-flex !important;
align-items: center;
justify-content: center;
height: 34px !important;
padding: 0 16px !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1 !important;
border-radius: 0 !important; /* 모서리는 직각으로 */
box-sizing: border-box;
vertical-align: middle;
text-decoration: none;
transition: all .15s;
}
/* 기본 : 흰 바탕 + 연회색 테두리 (목록·RSS 등) */
.btn_b01, a.btn_b01, button.btn_b01 {
background: #fff !important;
border: 1px solid #ddd !important;
color: #555 !important;
}
.btn_b01:hover { border-color: #bbb !important; color: #222 !important; }
/* 글쓰기 : 분홍 바탕 + 흰 글자 */
.btn_b02, a.btn_b02, button.btn_b02 {
background: #ec77ab !important;
border: 1px solid #ec77ab !important;
color: #fff !important;
}
.btn_b02:hover { background: #e0629b !important; border-color: #e0629b !important; }
/* 관리자 : 차분한 회색 */
.btn_admin, a.btn_admin, button.btn_admin {
background: #fff !important;
border: 1px solid #ddd !important;
color: #777 !important;
}
.btn_admin:hover { background: #f7f7f7 !important; color: #444 !important; }
/* 버튼이 여러 개 놓이는 줄 */
.btn_bo_user {
display: flex !important;
gap: 6px;
margin: 0 !important;
padding: 0 !important;
list-style: none;
}
.btn_bo_user li { margin: 0 !important; padding: 0 !important; float: none !important; }
@media (max-width: 640px) {
.btn_b01, .btn_b02, .btn_admin,
.btn_bo_user .btn {
height: 30px !important;
padding: 0 12px !important;
font-size: 12px !important;
}
}
/* ───────────────────────────────────────────────
23. 모바일 분류 바로가기 바
───────────────────────────────────────────────
나오는 곳 : 모바일 상품목록 · 상품상세 화면의 맨 위 (배너보다 위)
만드는 곳 : theme/noriwang/mobile/shop/subcategory.inc.php
단계별로 한 줄씩, 위에서 아래로 나열한다.
.nw-msubcate-main 윗줄 아이콘 + 이름 (지금 있는 단계)
.nw-msubcate-sub 아랫줄 글자 칩만 (그 아래 단계 = 하위분류)
지금 보고 있는 분류는
이 붙어 분홍색으로 표시된다.
─────────────────────────────────────────────── */
.nw-msubcate {
margin: 0 0 10px;
padding: 10px 0 8px;
background: #fff;
border-bottom: 1px solid #ececec;
}
/* 한 줄에 4개씩, 넘치면 아래로 줄바꿈 → 옆으로 밀지 않아도 전부 보인다.
소분류가 가장 많은 분류가 8개라서 두 줄이면 다 들어간다.
격자(grid) 대신 flex 를 쓰는 이유
격자는 칸 개수가 항상 4개로 고정돼서, 소분류가 3개뿐인 분류는
왼쪽으로 쏠려 보였다. flex 는 남는 자리를 없애므로
3개짜리는 가운데로 모인다.
flex: 0 0 25% 로 폭을 못박아야 개수와 상관없이 칸 크기가 같아진다.
(늘어나게 두면 3개일 때 칸이 커져서 다른 분류와 달라 보인다) */
.nw-msubcate ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
row-gap: 6px;
margin: 0;
padding: 0 8px;
list-style: none;
}
.nw-msubcate-main li {
flex: 0 0 25%;
max-width: 25%;
min-width: 0;
}
.nw-msubcate-main li > a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 5px;
padding: 6px 2px;
color: #444;
font-size: 11px;
line-height: 1.25;
text-align: center;
text-decoration: none;
}
/* 화면이 조금 넓은 기기(가로보기 등)에서는 5개씩 */
@media (min-width: 480px) {
.nw-msubcate-main li { flex-basis: 20%; max-width: 20%; }
}
/* ── 아랫줄 : 하위분류 (글자 칩) ──
아이콘 없이 이름만 담은 작은 칩으로 나열한다.
칸을 4등분하지 않고 글자 길이에 맞춰 늘어나므로,
이름이 길든 짧든 자연스럽게 여러 줄로 접힌다. */
.nw-msubcate-sub {
margin-top: 8px !important;
padding-top: 8px !important;
border-top: 1px dashed #e8e8e8;
column-gap: 6px;
}
.nw-msubcate-sub li {
flex: 0 0 auto; /* 글자 길이만큼만 차지 */
max-width: 100%;
min-width: 0;
}
.nw-msubcate-sub li > a {
display: block;
padding: 5px 11px;
background: #fafafa;
border: 1px solid #e5e5e5;
border-radius: 0; /* 상자 굴림 없이 직각 */
color: #555;
font-size: 12px;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
}
.nw-msubcate-sub li.on > a {
background: #ec77ab;
border-color: #ec77ab;
color: #fff;
font-weight: 700;
}
/* 아이콘 : 크기를 하나로 고정해야 줄이 흔들리지 않는다 */
.nw-msubcate-ico {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: #f7f7f7;
border: 1px solid #ededed;
border-radius: 50%;
overflow: hidden;
}
.nw-msubcate-ico img {
width: 30px;
height: 30px;
object-fit: contain;
}
/* 윗줄 이름 : 두 줄까지만 보여주고 넘치면 …
(아랫줄 칩은 한 줄 말줄임이라 규칙이 겹치지 않게 윗줄로 한정한다) */
.nw-msubcate-main .nw-msubcate-nm {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: keep-all;
}
/* 지금 보고 있는 분류 (윗줄 = 아이콘이 있는 줄) */
.nw-msubcate-main li.on > a { color: #e84c88; font-weight: 700; }
.nw-msubcate-main li.on .nw-msubcate-ico {
background: #fff0f6;
border-color: #e84c88;
}
/* ───────────────────────────────────────────────
24. 모바일 게시판 정리
───────────────────────────────────────────────
모바일에서 게시판마다 모양이 달랐던 것들을 한 곳에서 맞춘다.
(PC 화면은 건드리지 않도록 640px 이하에서만 적용한다)
손본 것
· 왼쪽 커뮤니티 메뉴 : 공지사항·소식·FAQ 에만 나오고 폭이 177px 로
고정돼 있어 좁은 화면을 반이나 차지했다. 모바일은 위쪽 ☰ 메뉴에
같은 링크가 다 있으므로 숨긴다.
· ≡ ▦ 목록모양 바꾸기 버튼 : PC 에서 이미 뺐는데 모바일에 남아 있었다.
· 게시판 검색창 : 검색 없이 전부 보여주기로 해서 PC 에서 뺐는데
모바일에 남아 있었다.
· 제목 : 게시판마다 크기·정렬이 달라 하나로 맞춘다.
─────────────────────────────────────────────── */
@media (max-width: 640px) {
/* 왼쪽 커뮤니티 메뉴 (모바일은 ☰ 메뉴로 대신한다) */
.quick { display: none !important; }
/* 목록모양 바꾸기 (≡ ▦) */
.vcntc { display: none !important; }
/* 게시판 검색창은 모바일에서도 보이게 한다. FAQ·후기 검색창만 숨김 */
#faq_sch,
#sps_sch { display: none !important; }
/* 제목 : 게시판 공통 (가운데 정렬 · 위 17px) */
.bo_title {
margin: 17px 0 12px !important;
padding: 0 10px !important;
text-align: center !important;
}
.bo_title h2,
.bo_title h1 {
margin: 0 !important;
padding: 0 !important;
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #222 !important;
border: 0 !important;
background: none !important;
}
/* 분류 탭 : 가로로 밀어 보게 한다 (줄이 여러 개로 늘어나지 않도록) */
#bo_cate ul {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start; /* 모바일은 가로로 밀어보므로 왼쪽부터 (가운데면 넘칠 때 앞이 잘림) */
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
#bo_cate ul::-webkit-scrollbar { display: none; }
#bo_cate ul li { flex: 0 0 auto; }
}
/* ───────────────────────────────────────────────
25. 주문내역의 '후기쓰기' 버튼
───────────────────────────────────────────────
주문 상세에서 상품마다 붙는 버튼이다.
(붙이는 일은 theme/noriwang/js/noriwang-common.js 가 한다)
다른 버튼들과 같은 규칙 — 직각 모서리 · 분홍 테두리.
─────────────────────────────────────────────── */
a.nw-review-btn {
display: inline-block;
margin-top: 6px;
padding: 5px 12px;
background: #fff;
border: 1px solid #ec77ab;
border-radius: 0;
color: #ec77ab;
font-size: 12px;
line-height: 1.4;
text-decoration: none;
white-space: nowrap;
}
a.nw-review-btn:hover,
a.nw-review-btn:focus {
background: #ec77ab;
color: #fff;
}
/* 모바일에서는 상품명 아래에 한 줄로 */
@media (max-width: 640px) {
a.nw-review-btn { margin-top: 5px; padding: 6px 14px; font-size: 12px; }
}
/* ───────────────────────────────────────────────
26. 게시판 위쪽 커뮤니티 버튼 줄 (PC · 모바일 공통)
───────────────────────────────────────────────
게시판 제목 위에 다른 게시판으로 가는 가로 버튼을 넣는다.
PC·모바일 모두 나오게 해서 두 화면 모양을 맞춘다.
만드는 곳 : theme/noriwang/shop/sub.board.php 의 nw_board_menu_bar()
부르는 곳 : PC → sub.board.php (게시판 스킨이 include)
모바일 → theme/noriwang/mobile/shop/shop.head.php
PC : 버튼 7개를 한 줄로 (화면이 넓다)
모바일 : 윗줄 3개 · 아랫줄 4개로 나눈다 (좁아서 두 줄)
─────────────────────────────────────────────── */
.nw-board-tabs {
display: block;
margin: 17px 0 16px;
padding: 0 0 10px;
border-bottom: 1.5px solid #999; /* 게시판 제목 밑줄과 같은 선 */
}
.nw-board-tabs ul {
display: flex;
flex-wrap: wrap;
justify-content: center; /* PC 에서도 버튼을 가운데로 모은다 */
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.nw-board-tabs li { margin: 0; padding: 0; border: 0; }
.nw-board-tabs li > a {
display: block;
padding: 8px 16px;
background: #fff;
border: 1px solid #ddd;
border-radius: 0; /* 상자 굴림 없이 직각 */
color: #555;
font-size: 14px;
line-height: 1.2;
white-space: nowrap;
text-decoration: none;
}
.nw-board-tabs li > a:hover { border-color: #ec77ab; color: #ec77ab; }
.nw-board-tabs li.on > a {
background: #ec77ab;
border-color: #ec77ab;
color: #fff;
font-weight: 700;
}
@media (max-width: 640px) {
.nw-board-tabs {
display: block;
margin: 0 0 4px;
padding: 10px 8px 8px;
background: #fff;
border-bottom: 1px solid #ececec;
}
.nw-board-tabs ul {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.nw-board-tabs li { margin: 0; padding: 0; border: 0; }
/* 윗줄 3개 · 아랫줄 4개로 정확히 나눈다.
칸 폭을 못박아서, 줄바꿈이 3번째와 4번째 사이에서 딱 일어나게 한다.
윗줄 3칸 : 각 (전체 - 가로간격2칸) / 3 → 세 칸이 정확히 한 줄
아랫줄 4칸: 각 (전체 - 가로간격3칸) / 4 → 네 칸이 정확히 한 줄
(간격 6px 기준. 간격을 바꾸면 아래 숫자도 같이 바꿔야 한다) */
.nw-board-tabs li:nth-child(-n+3) { flex: 0 0 calc((100% - 12px) / 3); }
.nw-board-tabs li:nth-child(n+4) { flex: 0 0 calc((100% - 18px) / 4); }
.nw-board-tabs li > a {
display: block;
padding: 7px 4px;
background: #fff;
border: 1px solid #ddd;
border-radius: 0; /* 상자 굴림 없이 직각 */
color: #555;
font-size: 13px;
line-height: 1.2;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
}
/* 지금 보고 있는 게시판 */
.nw-board-tabs li.on > a {
background: #ec77ab;
border-color: #ec77ab;
color: #fff;
font-weight: 700;
}
}
/* ===== 원본 HTML 구조 유지 / 모바일 푸터 재배치 ===== */
/* 고객센터·계좌정보: 모바일 세로 배치 */
#ft_02 {
display: block !important;
padding: 0 16px !important;
border-top: 1px solid #ddd !important;
border-bottom: 1px solid #ddd;
background: #fff;
}
#ft_02::after {
display: none !important;
}
#ft_02 .ft_cs,
#ft_02 .bank_info {
float: none !important;
width: 100% !important;
box-sizing: border-box;
padding: 22px 0;
text-align: center;
}
#ft_02 .ft_cs {
border-bottom: 1px solid #e5e5e5;
}
#ft_02 .ft_cs::after {
display: none !important;
}
#ft_02 .ft_cs h1,
#ft_02 .bank_info h1 {
margin: 0 0 12px;
color: #333;
font-size: 15px;
font-weight: 700;
}
#ft_02 .ft_cs p,
#ft_02 .bank_info p {
margin: 0 0 6px;
padding: 0;
color: #999;
font-size: 12px;
line-height: 1.5;
}
#ft_02 .cs_tag {
display: inline-block;
padding: 4px 10px;
border-radius: 14px;
background: #ec77ab;
color: #fff;
font-size: 11px;
font-weight: 700;
}
#ft_02 .ft_cs strong,
#ft_02 .ft_cs strong a {
color: #222;
font-size: 24px;
font-weight: 400;
line-height: 1.35;
}
/* 상담 버튼: PC 기준 색상·둥근 모양, 모바일 2열 */
.ft_chat_btns {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 20px 16px 24px;
border-bottom: 1px solid #eee;
background: #fff;
}
.ft_chat_btns a {
display: flex !important;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 0;
height: 48px;
padding: 0 10px;
border: 0;
border-radius: 25px;
box-sizing: border-box;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
}
.ft_chat_btns .ft_kakao_btn {
background: #fee500 !important;
color: #222 !important;
}
.ft_chat_btns .ft_naver_btn {
background: #03c75a !important;
color: #fff !important;
}
/* 원본 하단 구조 유지 */
#ft {
padding: 0 16px 84px;
background: #fff;
text-align: center;
}
#ft_company {
margin: 0 -16px;
padding: 14px 8px;
border-top: 0;
border-bottom: 1px solid #ddd;
}
#ft_company a {
padding: 0 8px;
color: #777;
font-size: 11px;
font-weight: 400;
line-height: 1.8;
}
#ft_logo {
padding: 24px 0 10px;
}
#ft_logo img {
width: auto;
max-width: 135px;
max-height: none;
height: auto;
}
.ft_insta {
padding: 4px 0 16px;
}
.ft_insta_btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-width: 190px;
height: 38px;
border: 1px solid #ddd;
background: #fff;
color: #555 !important;
font-size: 12px;
}
#ft .company_info {
border-top: 1px solid #eee;
}
#ft .company_info p {
margin: 0;
padding: 20px 0 24px;
color: #777;
font-size: 11px;
line-height: 1.8;
text-align: center;
}
#ft .company_info b {
color: #888;
font-weight: 500;
}
#ft .ft_pickup_link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 15px;
border-radius: 18px;
background: #ec77ab;
color: #fff !important;
font-size: 11px;
font-weight: 700;
}
@media (max-width: 360px) {
.ft_chat_btns {
gap: 7px;
padding-left: 10px;
padding-right: 10px;
}
.ft_chat_btns a {
height: 44px;
padding: 0 6px;
font-size: 11px;
}
#ft_02 .ft_cs strong,
#ft_02 .ft_cs strong a {
font-size: 21px;
}
}