hmw1001
2293 lines
80 KiB
CSS
2293 lines
80 KiB
CSS
@charset "utf-8";
|
|
|
|
/* ==========================================================================
|
|
0. 공통 유틸리티
|
|
========================================================================== */
|
|
.sound_only { display: inline-block !important; position: absolute; top: 0; left: 0; margin: 0 !important; padding: 0 !important; font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important; width: 0 !important; height: 0 !important; }
|
|
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; height: 32px; border-radius: 4px; font-size: 13px; font-weight: 500; text-decoration: none; transition: all 0.2s; border: 1px solid transparent; cursor: pointer; vertical-align: middle; }
|
|
|
|
/* 버튼 색상 테마 */
|
|
.btn_b01 { background: #fff; border-color: #ddd; color: #555; }
|
|
.btn_b01:hover { background: #f8f9fa; border-color: #ccc; color: #333; }
|
|
.btn_b02 { background: #4a90e2; border-color: #4a90e2; color: #fff; }
|
|
.btn_b02:hover { background: #357abd; border-color: #357abd; color: #fff; }
|
|
.btn_admin { background: #fff; border-color: #ff6b6b; color: #ff6b6b; }
|
|
.btn_admin:hover { background: #ff6b6b; color: #fff; }
|
|
|
|
/* 버튼 스타일 (공통 - 덮어쓰기) */
|
|
#bo_gall .btn_b01, #bo_gall .btn_b02, #bo_gall .btn_admin,
|
|
#bo_v .btn_b01, #bo_v .btn_b02, #bo_v .btn_admin {
|
|
padding: 8px 16px;
|
|
border-radius: 20px;
|
|
font-size: 0.92em;
|
|
transition: all 0.2s;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
gap: 5px;
|
|
}
|
|
#bo_gall .btn_admin, #bo_v .btn_admin { border: 1px solid #ff6b6b; background: #fff; color: #ff6b6b; }
|
|
#bo_gall .btn_admin:hover, #bo_v .btn_admin:hover { background: #ff6b6b; color: #fff; }
|
|
|
|
|
|
/* ==========================================================================
|
|
1. 게시판 목록 (list.skin.php)
|
|
========================================================================== */
|
|
#bo_gall { position: relative; margin-bottom: 40px; font-size: 14px; }
|
|
|
|
/* --- 카테고리 --- */
|
|
#bo_cate { margin: 0 0 20px; }
|
|
#bo_cate ul { display: flex; flex-wrap: wrap; gap: 5px; padding: 0; margin: 0; list-style: none; }
|
|
#bo_cate li { display: inline-block; }
|
|
#bo_cate a { display: block; padding: 6px 15px; border: 1px solid #ddd; border-radius: 20px; color: #666; background: #fff; text-decoration: none; transition: all 0.2s; font-size: 13px; }
|
|
#bo_cate a:hover, #bo_cate #bo_cate_on { background: #4a90e2; color: #fff; border-color: #4a90e2; font-weight: bold; }
|
|
|
|
/* --- 상단 툴바 (.bo_fx) --- */
|
|
.bo_fx { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; padding: 10px 0; border-bottom: 1px solid #eee; }
|
|
.bo_fx_left { display: flex; align-items: center; gap: 15px; }
|
|
.bo_fx_right { display: flex; align-items: center; gap: 10px; }
|
|
|
|
#bo_list_total { font-size: 13px; color: #666; }
|
|
#bo_list_total span { font-weight: bold; color: #333; }
|
|
|
|
/* 페이지당 목록 수 선택기 */
|
|
.bo_page_rows_selector select { height: 32px; padding: 0 10px; border: 1px solid #ddd; border-radius: 4px; color: #555; outline: none; }
|
|
|
|
/* 뷰 모드 전환 버튼 */
|
|
.view-mode-switcher { display: flex; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; }
|
|
.view-mode-switcher .btn_view_mode { width: 36px; height: 32px; background: #fff; border: none; border-right: 1px solid #ddd; color: #999; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
|
|
.view-mode-switcher .btn_view_mode:last-child { border-right: none; }
|
|
.view-mode-switcher .btn_view_mode:hover { background: #f8f9fa; color: #555; }
|
|
.view-mode-switcher .btn_view_mode.active { background: #e7f1ff; color: #4a90e2; }
|
|
|
|
/* 사용자 버튼 그룹 */
|
|
.btn_bo_user { display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; }
|
|
.btn_bo_user li { float: left; width: auto; text-align: center; margin-left: 5px; background: #fff; } /* width: auto로 수정됨 */
|
|
|
|
|
|
/* ==========================================================================
|
|
2. 카드형 목록 스타일 (#gall_ul) - Flexbox Grid 적용
|
|
========================================================================== */
|
|
#gall_ul { display: flex; flex-wrap: wrap; margin: 0 -10px; padding: 0; list-style: none; }
|
|
.gall_li { padding: 0 10px; margin-bottom: 20px; box-sizing: border-box; }
|
|
|
|
/* 그리드 컬럼 설정 (기본 4열) */
|
|
.col-gn-1 { width: 100%; }
|
|
.col-gn-2 { width: 50%; }
|
|
.col-gn-3 { width: 33.3333%; }
|
|
.col-gn-4 { width: 25%; }
|
|
.col-gn-5 { width: 20%; }
|
|
|
|
/* 카드 박스 디자인 */
|
|
.gall_box { border: 1px solid #eee; border-radius: 8px; overflow: hidden; transition: all 0.3s; background: #fff; height: 100%; display: flex; flex-direction: column; position: relative; }
|
|
.gall_box:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); border-color: #d0d0d0; }
|
|
|
|
.gall_chk { position: absolute; top: 10px; left: 10px; z-index: 10; }
|
|
|
|
.gall_img { position: relative; padding-top: 65%; /* 16:9 비율 등 조절 가능 */ overflow: hidden; background: #f8f9fa; border-bottom: 1px solid #f1f1f1; }
|
|
.gall_img a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
|
|
.gall_img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
|
|
.gall_box:hover .gall_img img { transform: scale(1.05); }
|
|
.gall_img .no_image, .gall_img .is_notice { color: #ccc; font-size: 12px; }
|
|
.gall_img .is_notice { color: #4a90e2; font-weight: bold; }
|
|
|
|
.gall_con { flex-grow: 1; display: flex; flex-direction: column; }
|
|
.gall_text_href { padding: 15px; flex-grow: 1; }
|
|
.gall_text_href .bo_cate_link { display: inline-block; font-size: 11px; color: #4a90e2; background: #e7f1ff; padding: 2px 6px; border-radius: 3px; margin-bottom: 6px; text-decoration: none; }
|
|
.gall_text_href .bo_tit_link { display: block; font-size: 16px; font-weight: 600; color: #333; text-decoration: none; line-height: 1.4; margin-bottom: 5px; word-break: break-all; }
|
|
.gall_text_href .bo_tit_link:hover { color: #4a90e2; }
|
|
.gall_text_href .cnt_cmt { font-size: 11px; color: #ff6b6b; background: #fff0f0; padding: 1px 5px; border-radius: 10px; margin-left: 5px; vertical-align: middle; }
|
|
|
|
.gall_name { padding: 0 15px 10px; font-size: 13px; color: #888; display: flex; align-items: center; }
|
|
.gall_name .profile_img img { width: 20px; height: 20px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
|
|
|
|
.gall_info { padding: 10px 15px; background: #fcfcfc; border-top: 1px solid #f5f5f5; font-size: 12px; color: #999; display: flex; justify-content: space-between; align-items: center; }
|
|
.gall_info i { margin-right: 3px; }
|
|
|
|
/* 노출 스위치 (카드형) */
|
|
.status-toggle-wrap { display: flex; align-items: center; gap: 5px; }
|
|
.status-label { font-size: 11px; }
|
|
.status-toggle-switch { width: 34px; height: 18px; background: #ccc; border-radius: 9px; position: relative; cursor: pointer; transition: background 0.2s; }
|
|
.status-toggle-switch .switch-handle { width: 14px; height: 14px; background: #fff; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: transform 0.2s; }
|
|
.status-toggle-switch.on { background: #28a745; }
|
|
.status-toggle-switch.on .switch-handle { transform: translateX(16px); }
|
|
.status-toggle-switch.off { background: #dc3545; }
|
|
|
|
|
|
/* ==========================================================================
|
|
3. 리스트형 목록 스타일 (.fz-list)
|
|
========================================================================== */
|
|
.fz-list { border-top: 2px solid #333; margin: 0; padding: 0; list-style: none; }
|
|
.fz-list li { display: flex; align-items: center; border-bottom: 1px solid #eee; padding: 12px 0; transition: background 0.2s; }
|
|
.fz-list li:hover { background: #fbfbfb; }
|
|
.fz-list .fz-list-th { background: #f8f9fa; border-bottom: 1px solid #ddd; font-weight: bold; color: #333; padding: 15px 0; }
|
|
.fz-list .fz-list-th:hover { background: #f8f9fa; }
|
|
|
|
.fz-list > li > div { padding: 0 10px; text-align: center; box-sizing: border-box; word-break: break-all; }
|
|
|
|
/* 컬럼 너비 설정 */
|
|
.fz-checkbox { width: 40px; }
|
|
.fz-num { width: 60px; color: #888; }
|
|
.fz-subject { flex: 1; text-align: left !important; font-weight: 500; }
|
|
.fz-writer { width: 120px; color: #666; }
|
|
.fz-date { width: 100px; color: #888; font-size: 13px; }
|
|
.fz-hit { width: 70px; color: #888; font-size: 13px; }
|
|
.fz-1 { width: 80px; } /* 상태/노출 컬럼 */
|
|
|
|
.fz-subject a { color: #333; text-decoration: none; font-size: 15px; display: block; }
|
|
.fz-subject a:hover { color: #4a90e2; text-decoration: underline; }
|
|
.fz-subject .bo_cate_link { display: inline-block; font-size: 11px; color: #4a90e2; background: #e7f1ff; padding: 2px 6px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
|
|
.fz-subject .cnt_cmt { font-size: 11px; color: #ff6b6b; background: #fff0f0; padding: 1px 5px; border-radius: 10px; margin-left: 5px; vertical-align: middle; }
|
|
|
|
/* 리스트형 아이콘 */
|
|
.icon-notice { display: inline-block; padding: 2px 6px; background: #333; color: #fff; font-size: 11px; border-radius: 3px; font-weight: normal; }
|
|
.bo-current { color: #e8180c; font-weight: bold; }
|
|
|
|
/* 빈 목록 */
|
|
.fz-empty-list { width: 100%; padding: 100px 0 !important; text-align: center !important; color: #999; display: block !important; }
|
|
|
|
.expert-consultation-header {
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
4. 하단 영역 (페이지네이션, 검색)
|
|
========================================================================== */
|
|
.pagination_wrap { margin-top: 30px; text-align: center; position: relative; }
|
|
|
|
/* 페이지네이션 */
|
|
.pg_wrap { display: inline-block; }
|
|
.pg { display: flex; justify-content: center; gap: 5px; }
|
|
.pg_page, .pg_current { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid #ddd; border-radius: 4px; color: #666; text-decoration: none; font-size: 13px; background: #fff; }
|
|
.pg_page:hover { background: #f8f9fa; color: #333; border-color: #ccc; }
|
|
.pg_current { background: #4a90e2; color: #fff; border-color: #4a90e2; font-weight: bold; }
|
|
|
|
/* 더보기 버튼 (카드형일 때 사용 가능) */
|
|
.card-more-btn { margin-top: 20px; text-align: center; }
|
|
.card-more-btn button { width: 100%; max-width: 300px; height: 45px; border-radius: 25px; font-size: 14px; }
|
|
|
|
/* 검색창 */
|
|
#bo_sch { text-align: center; margin: 40px 0 20px; }
|
|
#bo_sch form { display: inline-flex; border: 1px solid #ddd; border-radius: 25px; overflow: hidden; padding: 2px; }
|
|
#bo_sch select { border: none; height: 40px; padding: 0 10px 0 15px; outline: none; color: #555; background: #fff; cursor: pointer; }
|
|
#bo_sch input { border: none; border-left: 1px solid #eee; height: 40px; padding: 0 15px; width: 200px; outline: none; }
|
|
#bo_sch button { background: #4a90e2; color: #fff; border: none; width: 50px; height: 40px; border-radius: 0 20px 20px 0; cursor: pointer; transition: background 0.2s; }
|
|
#bo_sch button:hover { background: #357abd; }
|
|
|
|
.reservation-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
5. 반응형 처리
|
|
========================================================================== */
|
|
@media (max-width: 992px) {
|
|
.col-gn-4 { width: 33.3333%; } /* 태블릿 3열 */
|
|
}
|
|
|
|
/* 반응형 버튼 레이아웃 */
|
|
@media (max-width: 768px) {
|
|
.col-gn-3, .col-gn-4 { width: 50%; } /* 작은 태블릿 2열 */
|
|
|
|
.bo_fx { flex-direction: column; align-items: flex-start; }
|
|
.bo_fx_right { width: 100%; justify-content: space-between; margin-top: 10px; }
|
|
|
|
/* 리스트형 모바일 최적화 */
|
|
.fz-list .fz-list-th { display: none; }
|
|
.fz-list li { flex-wrap: wrap; position: relative; padding: 15px 10px; }
|
|
.fz-checkbox { position: absolute; top: 15px; left: 0; }
|
|
.fz-num { display: none; }
|
|
.fz-subject { width: 100%; padding: 0 0 0 30px; margin-bottom: 8px; }
|
|
.fz-writer, .fz-date, .fz-hit { width: auto; font-size: 12px; color: #999; padding: 0; margin-right: 10px; }
|
|
.fz-writer { padding-left: 30px; }
|
|
.fz-1 { position: absolute; right: 10px; top: 15px; width: auto; }
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.col-gn-2, .col-gn-3, .col-gn-4 { width: 100%; } /* 모바일 1열 */
|
|
|
|
#bo_sch input { width: 120px; }
|
|
|
|
.view-mode-switcher { display: none; } /* 모바일에서 뷰 모드 전환 숨김 (선택사항) */
|
|
}
|
|
|
|
/* 반응형 디자인 */
|
|
@media (max-width: 768px) {
|
|
.modal-content {
|
|
width: 95%;
|
|
margin: 10% auto;
|
|
}
|
|
|
|
.expert-consultation-btn {
|
|
padding: 10px 20px;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
6. 기타 (order.php 관련 등)
|
|
========================================================================== */
|
|
/* 공지 박스 */
|
|
.notice-box { border: 1px solid #cce5ff; background: #e7f1ff; padding: 15px; margin: 0 0 20px; border-radius: 8px; color: #004085; font-size: 14px; line-height: 1.6; }
|
|
|
|
/* 상태 버튼 스타일 (order_eclem 고유) */
|
|
.estimate-btn { display: inline-block; padding: 4px 10px; border-radius: 15px; font-size: 12px; font-weight: bold; color: #fff; text-decoration: none; border: none; cursor: pointer; transition: opacity 0.2s; }
|
|
.estimate-btn:hover { opacity: 0.9; }
|
|
.btn-request { background: #6c757d; } /* 견적신청중 */
|
|
.btn-offer { background: #17a2b8; } /* 견적제안/작성완료 */
|
|
.btn-select { background: #28a745; } /* 견적채택 */
|
|
.btn-deposit-ready { background: #ffc107; color: #333; }
|
|
.btn-deposit-done { background: #fd7e14; }
|
|
.btn-excel { background: #007bff; }
|
|
.btn-cancel { background: #dc3545; }
|
|
.btn-modify { background: #343a40; }
|
|
|
|
/* 타이머 */
|
|
.estimate-timer { display: inline-block; font-size: 12px; color: #dc3545; font-weight: bold; background: #fff5f5; padding: 2px 6px; border-radius: 4px; border: 1px solid #ffc9c9; margin-left: 5px; }
|
|
.estimate-completed { display: inline-block; font-size: 12px; color: #28a745; font-weight: bold; background: #e8f5e9; padding: 2px 6px; border-radius: 4px; margin-left: 5px; }
|
|
|
|
/* 전문가 신청 버튼 */
|
|
.expert-request-btn { background: #6610f2; color: #fff; border: none; padding: 3px 8px; border-radius: 10px; font-size: 11px; cursor: pointer; margin-left: 5px; vertical-align: middle; }
|
|
.expert-request-btn:hover { background: #520dc2; }
|
|
|
|
/* 2뎁스 답변글 스타일 */
|
|
.reply-post { background: #fcfcfc !important; }
|
|
.reply-post .fz-subject { padding-left: 40px; }
|
|
.reply-post .list-icon { margin-right: 5px; color: #999; }
|
|
.brand-sum { font-size: 13px; color: #4a90e2; font-weight: bold; }
|
|
.brand-name { color: #333; font-weight: 600; }
|
|
.brand-amount { color: #ff6b6b; }
|
|
.brand-amount-hidden { color: #aaa; font-style: italic; }
|
|
|
|
/* 💡 [수정] 옵션 그룹 정렬을 위한 스타일 확장 */
|
|
.options {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 5px;
|
|
flex-wrap: wrap;
|
|
gap: 5px 20px;
|
|
}
|
|
|
|
.options label {
|
|
margin: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.options-left {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.options-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
.options-right {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.form-group>label,
|
|
.options.input-inline {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.tooltip-wrapper {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
/* 💡 [추가] 창 비율 이미지 선택기 스타일 */
|
|
.ratio-image-selector {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.ratio-option {
|
|
cursor: pointer;
|
|
border: 2px solid transparent;
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
text-align: center;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.ratio-option img {
|
|
display: block;
|
|
width: 60px;
|
|
height: 60px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
/* 전문가 상담 및 예약 버튼 스타일 */
|
|
.expert-consultation-header {
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* 💡 [수정] 버튼 컨테이너 스타일 (한 줄 배치 강제) */
|
|
.expert-consultation-header > div {
|
|
text-align: right;
|
|
display: flex !important;
|
|
gap: 10px;
|
|
justify-content: flex-end;
|
|
flex-wrap: nowrap !important; /* 줄바꿈 방지 */
|
|
align-items: center;
|
|
}
|
|
|
|
.expert-consultation-btn {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 24px;
|
|
border-radius: 25px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
|
white-space: nowrap; /* 텍스트 줄바꿈 방지 */
|
|
}
|
|
|
|
.expert-consultation-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
|
|
}
|
|
|
|
.expert-consultation-btn i {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.reservation-btn {
|
|
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 24px;
|
|
border-radius: 25px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
|
|
white-space: nowrap; /* 텍스트 줄바꿈 방지 */
|
|
}
|
|
|
|
.reservation-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
|
|
}
|
|
|
|
.reservation-btn i {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
/* 반응형 버튼 레이아웃 */
|
|
@media (max-width: 768px) {
|
|
.expert-consultation-header > div {
|
|
justify-content: center !important;
|
|
/* flex-direction: column; <-- 모바일에서도 한 줄 유지를 위해 주석 처리 */
|
|
align-items: center;
|
|
gap: 8px; /* 간격 조금 줄임 */
|
|
}
|
|
|
|
.expert-consultation-btn,
|
|
.reservation-btn {
|
|
padding: 10px 15px; /* 패딩 줄임 */
|
|
font-size: 13px; /* 폰트 크기 줄임 */
|
|
min-height: 40px;
|
|
width: auto; /* 너비 자동 */
|
|
max-width: none; /* 최대 너비 제한 해제 */
|
|
flex: 1; /* 남은 공간 균등 분배 */
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.expert-consultation-header {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.expert-consultation-btn,
|
|
.reservation-btn {
|
|
padding: 10px 12px;
|
|
font-size: 12px;
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
|
|
/* 모달 스타일 */
|
|
.modal {
|
|
position: fixed;
|
|
z-index: 1000;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
animation: fadeIn 0.3s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: #fefefe;
|
|
margin: 5% auto;
|
|
padding: 0;
|
|
border: none;
|
|
width: 90%;
|
|
max-width: 500px;
|
|
border-radius: 15px;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
|
animation: slideIn 0.3s ease;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
transform: translateY(-50px);
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 20px 25px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border-radius: 15px 15px 0 0;
|
|
position: relative;
|
|
}
|
|
|
|
.modal-header h3 {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.close {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
color: white;
|
|
opacity: 0.8;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.close:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 25px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group textarea {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border: 2px solid #e1e5e9;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
transition: border-color 0.3s ease;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.form-group input:focus,
|
|
.form-group textarea:focus {
|
|
outline: none;
|
|
border-color: #667eea;
|
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
|
}
|
|
|
|
.consultation-fee-info {
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
padding: 15px;
|
|
border-radius: 10px;
|
|
margin-top: 15px;
|
|
border-left: 4px solid #667eea;
|
|
}
|
|
|
|
.consultation-fee-info p {
|
|
margin: 5px 0;
|
|
color: #495057;
|
|
}
|
|
|
|
.consultation-fee-info strong {
|
|
color: #667eea;
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: 20px 25px;
|
|
background-color: #f8f9fa;
|
|
border-radius: 0 0 15px 15px;
|
|
text-align: right;
|
|
border-top: 1px solid #e9ecef;
|
|
}
|
|
|
|
.btn-cancel,
|
|
.btn-submit {
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
margin-left: 10px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-cancel {
|
|
background-color: #6c757d;
|
|
color: white;
|
|
}
|
|
|
|
.btn-cancel:hover {
|
|
background-color: #5a6268;
|
|
}
|
|
|
|
.btn-submit {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
}
|
|
|
|
.btn-submit:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
|
}
|
|
|
|
/* 반응형 디자인 */
|
|
@media (max-width: 768px) {
|
|
.modal-content {
|
|
width: 95%;
|
|
margin: 10% auto;
|
|
}
|
|
|
|
.expert-consultation-btn {
|
|
padding: 10px 20px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.modal-header,
|
|
.modal-body,
|
|
.modal-footer {
|
|
padding: 15px 20px;
|
|
}
|
|
}
|
|
|
|
.ratio-option span {
|
|
font-size: 12px;
|
|
color: #555;
|
|
}
|
|
|
|
.ratio-option input[type="radio"]:checked+img+span {
|
|
font-weight: bold;
|
|
color: #1976d2;
|
|
}
|
|
|
|
.ratio-option input[type="radio"]:checked+img {
|
|
outline: 2px solid #1976d2;
|
|
box-shadow: 0 0 10px rgba(25, 118, 210, 0.5);
|
|
}
|
|
|
|
/* 💡 [추가] 폼 그룹 내부 요소를 좌측 정렬하기 위한 클래스 */
|
|
.dynamic-box .form-group-align-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
|
|
/* 게시판 목록 */
|
|
#bo_list {position: relative;margin-bottom: 20px}
|
|
|
|
#bo_list:after {display: block;visibility: hidden;clear: both;content: ""}
|
|
|
|
#bo_list .td_board {width: 120px;text-align: center}
|
|
|
|
#bo_list .td_chk {width: 30px;text-align: center;border-top: 1px solid #ecf0f1;border-bottom: 1px solid #ecf0f1}
|
|
|
|
#bo_list .td_date {width: 60px;text-align: center}
|
|
|
|
#bo_list .td_datetime {width: 60px;text-align: center}
|
|
|
|
#bo_list .td_group {width: 100px;text-align: center}
|
|
|
|
#bo_list .td_mb_id {width: 100px;text-align: center}
|
|
|
|
#bo_list .td_mng {width: 80px;text-align: center}
|
|
|
|
#bo_list .td_name {width: 90px;text-align: left;padding: 10px 0}
|
|
|
|
#bo_list .td_nick {width: 100px;text-align: center}
|
|
|
|
#bo_list .td_num {width: 50px;text-align: center}
|
|
|
|
#bo_list .td_num2 {width: 50px;text-align: center}
|
|
|
|
#bo_list .td_numbig {width: 80px;text-align: center}
|
|
|
|
#bo_list .txt_active {color: #5d910b}
|
|
|
|
#bo_list .txt_expired {color: #ccc}
|
|
|
|
#bo_list tbody tr {border-left: 2px solid transparent}
|
|
|
|
#bo_list tbody tr:hover {border-left: 2px solid #253dbe}
|
|
|
|
#bo_list tbody .even td {background: #fbfbfb}
|
|
|
|
#bo-cate {margin: 0 0 25px;padding-left: 1px;padding-top: 1px;}
|
|
|
|
#bo-cate h2 {position: absolute;font-size: 0;line-height: 0;overflow: hidden}
|
|
|
|
#bo-cate ul {zoom: 1;display: flex;flex-wrap: wrap; }
|
|
|
|
#bo-cate ul:after {display: block;visibility: hidden;clear: both;content: ""}
|
|
|
|
#bo-cate li {margin-left: -1px;margin-top: -1px;}
|
|
|
|
#bo-cate a {display: block;line-height: 28px;padding: 5px 15px;border: 1px solid #ddd;color: #999;position: relative;transition: all 0.3s ease-out;}
|
|
|
|
#bo-cate a:focus, #bo-cate a:hover, #bo-cate a:active {text-decoration: none;background: #666;color: #fff;border: 1px solid #666;}
|
|
|
|
#bo-cate #bo_cate_on {z-index: 2;background: #212121;color: #fff;font-weight: bold;border: 1px solid #212121;}
|
|
|
|
|
|
/* 게시판 목록 공통 */
|
|
.selec_chk {position: absolute;top: 0;left: 0;width: 0;height: 0;opacity: 0;outline: 0;z-index: -1;overflow: hidden}
|
|
|
|
.chk_box {position: relative}
|
|
|
|
.chk_box input[type="checkbox"] + label {position: relative;color: #676e70}
|
|
|
|
.chk_box input[type="checkbox"] + label:hover {color: #2172f8}
|
|
|
|
.chk_box input[type="checkbox"] + label span {float: left;width: 15px;height: 15px;display: block;background: #fff;border: 1px solid #d0d4df;border-radius: 3px}
|
|
|
|
.write_div .chk_box input[type="checkbox"] + label, .bo_vc_w .chk_box input[type="checkbox"] + label {padding-left: 20px}
|
|
|
|
.write_div .chk_box input[type="checkbox"] + label span, .bo_vc_w .chk_box input[type="checkbox"] + label span {position: absolute;top: 2px;left: 0;width: 15px;height: 15px;display: block;margin: 0;background: #fff;border: 1px solid #d0d4df;border-radius: 3px}
|
|
|
|
.chk_box input[type="checkbox"]:checked + label {color: #000}
|
|
|
|
.chk_box input[type="checkbox"]:checked + label span {background: url(./img/chk.png) no-repeat 50% 50% #3a8afd;border-color: #1471f6;border-radius: 3px}
|
|
|
|
|
|
.btn_bo_adm {float: left}
|
|
|
|
.btn_bo_adm li {float: left;margin-right: 5px}
|
|
|
|
.btn_bo_adm input {padding: 0 8px;border: 0;background: #d4d4d4;color: #666;text-decoration: none;vertical-align: middle}
|
|
|
|
.bo_notice td {background: #fff6fa !important;border-bottom: 1px solid #f8e6ee}
|
|
|
|
.bo_notice td a {font-weight: bold}
|
|
|
|
.bo_notice .notice_icon {display: inline-block;line-height: 25px;border-radius: 5px;font-weight: bold;color: #f9267f}
|
|
|
|
|
|
.td_num strong {color: #000}
|
|
|
|
.bo_cate_link {float: left;display: inline-block;margin-right: 10px;background: #e2eaf6;color: #3a8afd;font-weight: normal !important;height: 20px;line-height: 10px;padding: 5px 8px;border-radius: 5px;font-size: 0.95em}
|
|
|
|
/* 글제목줄 분류스타일 */
|
|
.bo_cate_link:hover {text-decoration: none}
|
|
|
|
.bo_tit {display: block;color: #000;font-weight: bold}
|
|
|
|
.bo_current {color: #e8180c}
|
|
|
|
#bo_list .profile_img img {border-radius: 50%}
|
|
|
|
#bo_list .cnt_cmt {background: #e9eff5;color: #3a8afd;font-size: 11px;height: 16px;line-height: 16px;padding: 0 5px;border-radius: 3px;vertical-align: middle}
|
|
|
|
#bo_list .bo_tit .title_icon {margin-right: 2px}
|
|
|
|
#bo_list .bo_tit .fa-heart {color: #ff0000}
|
|
|
|
#bo_list .bo_tit .fa-lock {display: inline-block;line-height: 14px;width: 16px;font-size: 0.833em;color: #4f818c;background: #cbe3e8;text-align: center;border-radius: 2px;font-size: 12px;border: 1px solid #cbe3e8;vertical-align: middle}
|
|
|
|
#bo_list .bo_tit .new_icon {display: inline-block;width: 16px;line-height: 16px;font-size: 0.833em;color: #23db79;background: #b9ffda;text-align: center;border-radius: 2px;margin-left: 2px;font-weight: bold;vertical-align: middle}
|
|
|
|
#bo_list .bo_tit .hot_icon {display: inline-block;width: 16px;line-height: 16px;font-size: 0.833em;color: #ff0000;background: #ffb9b9;text-align: center;border-radius: 2px;vertical-align: middle}
|
|
|
|
#bo_list .bo_tit .fa-caret-right {color: #bbb}
|
|
|
|
#bo_list .bo_tit .fa-download {display: inline-block;width: 16px;line-height: 16px;font-size: 0.833em;color: #daae37;background: #ffefb9;text-align: center;border-radius: 2px;margin-left: 5px;vertical-align: middle}
|
|
|
|
#bo_list .bo_tit .fa-link {display: inline-block;width: 16px;line-height: 16px;font-size: 0.833em;color: #b451fd;background: #edd3fd;text-align: center;border-radius: 2px;margin-left: 5px;vertical-align: middle}
|
|
|
|
.bo-sch-wrap {display: none;width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 999;}
|
|
|
|
.bo-sch-content {width: 100%;height: 100%;align-items: center; justify-content: center; flex-wrap: wrap; align-content: center;display: flex;}
|
|
|
|
.bo-sch {position: relative;z-index: 2;text-align: left;}
|
|
|
|
.bo-sch h3 {font-size: 50px;color: #fff;text-align: center;font-weight: 600;margin-bottom: 30px;opacity: 0;transform: translateY(-30px);text-shadow: 5px 5px 10px rgba(0, 0, 0, .8);}
|
|
|
|
.bo-sch legend {}
|
|
|
|
.bo-sch-box {background: rgba(74, 74, 74, .9);border-radius: 10px;padding: 20px;box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, .4);width: 380px;opacity: 0;transform: translateY(-30px);}
|
|
|
|
.bo-sch-inner {background: #e3e3e3;border-radius: 10px;padding: 20px;}
|
|
|
|
.bo-sch select {width: 100%;height: 43px;padding-left: 15px;border: 1px solid transparent;-webkit-appearance: none;-moz-appearance: none;appearance: none;position: relative;background: url('./img/arrow.png') right 5px center no-repeat;background-size: 18px auto;border: 1px solid #453732;font-size: 14px;}
|
|
|
|
.bo-sch select::-ms-expand {display: none;}
|
|
|
|
.bo-sch-input {display: block;}
|
|
|
|
.bo-sch input[type=text] {width: 100%;height: 43px;background: none;padding: 0;padding: 0 10px;border: 1px solid #453732;margin-top: 15px;font-size: 14px;color: #000}
|
|
|
|
.bo-sch-btn {margin-top: 15px;padding-top: 15px;position: relative;text-align: center;}
|
|
|
|
.bo-sch-btn:after {background: #fff;content: "";position: absolute;left: 0;top: 0;width: 100%;height: 2px;border-top: 1px solid #9c9c9c;}
|
|
|
|
.bo-sch .sch-btn {height: 38px;color: #fff;border: none;font-size: 15px;padding: 0 20px;background: #383838;}
|
|
|
|
.bo-sch-cls {position: absolute;right: 50px;top: 50px;width: 29px;height: 29px;background: url(./img/search_close.png) 0 0 no-repeat;z-index: 5;text-indent: -9999px;border: none;opacity: 0;transform: translateX(30px);}
|
|
|
|
.bo-sch-bg {background: #000;background: rgba(0, 0, 0, 0.8);width: 100%;height: 100%;position: absolute;left: 0;top: 0;cursor: pointer;}
|
|
|
|
.bo-sch input[type=text]:focus, .bo-sch select:focus {-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;border: none;}
|
|
|
|
.bo-sch-wrap.active {display: block;}
|
|
|
|
.bo-sch-wrap.active .bo-sch-cls {opacity: 1;transform: translateX(0px);transition: all 0.4s ease-out;}
|
|
|
|
.bo-sch-wrap.active h3 {opacity: 1;transform: translateY(0px);transition: all 0.4s ease-out;}
|
|
|
|
.bo-sch-wrap.active .bo-sch-box {opacity: 1;transform: translateY(0px);transition: all 0.4s ease-out 0.15s;}
|
|
|
|
|
|
.bo-top-wrap {display: flex;justify-content: space-between;align-items: flex-end;margin-bottom: 20px;}
|
|
|
|
.list-total {font-size: 16px;font-weight: 500;background: url(./img/google-docs.png) 0 center no-repeat;padding-left: 30px;min-height: 24px;line-height: 24px;}
|
|
|
|
.list-total strong {color: #258ccf;font-weight: 600;}
|
|
|
|
.board-btn a {vertical-align: top;display: inline-block;border: 1px solid #d1d1d1;font-size: 14px;font-weight: 700;padding: 6px 10px;position: relative;transition: all .3s ease-out;height: 32px;}
|
|
|
|
.board-btn a:before {position: absolute;left: 0;bottom: 0;height: 50%;content: "";background: #f1f1f1;width: 100%;z-index: -2;}
|
|
|
|
.board-btn a:after {position: absolute;left: 0;bottom: 0;height: 100%;content: "";background: #f1f5f9;width: 0;z-index: -1;transition: width 0.3s ease-out;}
|
|
|
|
.board-btn a:hover:after {width: 100%;}
|
|
|
|
.board-btn a:hover {border-color: #f1f5f9;box-shadow: 3px 3px 8px rgba(0, 0, 0, .2);}
|
|
|
|
.bo-bottom-wrap {display: flex;justify-content: space-between;align-items: flex-end;margin-bottom: 20px;}
|
|
|
|
.bo-admin-select-wrap {display: inline-block;position: relative;}
|
|
|
|
.more-opt {display: none;position: absolute;top: 31px;right: 0;background: #fff;z-index: 999;width: 100%;box-shadow: 3px 3px 8px rgba(0, 0, 0, .2);}
|
|
|
|
.more-opt li {border-bottom: 1px dotted #dfdfdf;}
|
|
|
|
.more-opt li:last-child {border-bottom: 0}
|
|
|
|
.more-opt li button {width: 100%;border: 0;background: #fff;color: #333;text-align: left;padding: 8px;transition: all 0.3s ease-out;}
|
|
|
|
.more-opt li:hover button {color: #000;background: #f1f5f9;}
|
|
|
|
|
|
.btn-bo-rss {background: url(./img/rss.png) 8px center no-repeat;padding-left: 32px !important;}
|
|
|
|
.btn-bo-search {background: url(./img/search.png) 8px center no-repeat;padding-left: 32px !important;}
|
|
|
|
.btn-bo-write {background: url(./img/pencil.png) 8px center no-repeat;padding-left: 32px !important;}
|
|
|
|
.btn-bo-admin {background: url(./img/gear.png) 8px center no-repeat;padding-left: 32px !important;}
|
|
|
|
.btn-bo-admin-select {background: url(./img/bolt.png) 8px center no-repeat;padding-left: 28px !important;}
|
|
|
|
.btn-bo-modify {background: url(./img/refresh.png) 8px center no-repeat;padding-left: 32px !important;}
|
|
|
|
.btn-bo-delete {background: url(./img/close.png) 8px center no-repeat;padding-left: 32px !important;background-size: 14px auto;}
|
|
|
|
.btn-bo-copy {background: url(./img/copy.png) 8px center no-repeat;padding-left: 32px !important;}
|
|
|
|
.btn-bo-move {background: url(./img/move.png) 8px center no-repeat;padding-left: 32px !important;}
|
|
|
|
.btn-bo-list {background: url(./img/list.png) 8px center no-repeat;padding-left: 32px !important;}
|
|
|
|
.btn-bo-reply {background: url(./img/reply.png) 8px center no-repeat;padding-left: 32px !important;}
|
|
|
|
.bo-v-btn-wrap {display: flex;justify-content: space-between;margin-bottom: 15px;}
|
|
|
|
.bo-v-btn-left {}
|
|
|
|
|
|
.bo-admin-select-wrap.active .btn-bo-admin-select {border-color: #f1f5f9;box-shadow: 3px 3px 8px rgba(0, 0, 0, .2);}
|
|
|
|
.bo-admin-select-wrap.active .btn-bo-admin-select:after {width: 100%;}
|
|
|
|
|
|
.fz-list {margin-bottom: 20px;border-top: 2px solid #222;font-size: 14px;color: #000}
|
|
|
|
.fz-list i {display: none;}
|
|
|
|
.fz-list li {display: flex;border-bottom: 1px solid #d8d8d8;position: relative;}
|
|
|
|
.fz-list li:last-child {border-bottom: 1px solid #222;}
|
|
|
|
.fz-list li > div {padding: 8px 0;display: flex;align-items: center;justify-content: center;min-height: 50px;}
|
|
|
|
.fz-list .fz-list-th {border-bottom: 1px solid #666;}
|
|
|
|
.fz-list .fz-list-th > div {height: 55px;font-weight: 600;font-size: 14px;color: #000 !important}
|
|
|
|
.fz-list .fz-list-th .fz-subject {justify-content: center !important;}
|
|
|
|
.fz-list .fz-checkbox {flex: 0 0 30px;}
|
|
|
|
.fz-list .fz-num {flex: 0 0 50px;}
|
|
|
|
.fz-list .fz-subject {text-align: left !important;flex-grow: 1;justify-content: flex-start !important;padding: 8px 10px;line-height: 1.6em;}
|
|
|
|
.fz-list .fz-writer {flex: 0 0 120px;}
|
|
|
|
.fz-list .fz-date {flex: 0 0 70px;}
|
|
|
|
.fz-list .fz-hit {flex: 0 0 45px;}
|
|
|
|
.fz-list .fz-good {flex: 0 0 45px;}
|
|
|
|
.fz-list .fz-nogood {flex: 0 0 45px;}
|
|
|
|
.fz-list .fz-num, .fz-list .fz-hit, .fz-list .fz-good, .fz-list .fz-nogood, .fz-list .fz-date {color: #999;}
|
|
|
|
.fz-list li:after {content: "";height: 100%;width: 0;background: #fafafa;position: absolute;left: 0;top: 0;z-index: -1;transition: width .3s ease-in-out;}
|
|
|
|
.fz-list li:hover:after {width: 100%;}
|
|
|
|
.fz-list li > div, .fz-list li > div * {transition: color .2s ease-in-out;}
|
|
|
|
.fz-list li:hover > div, .fz-list li:hover > .fz-subject > a, .fz-list li:hover .sv_wrap > a, .fz-list li:hover .sv_member {color: #4158d1 !important}
|
|
|
|
.fz-list li.fz-list-th:hover > div {color: #000 !important}
|
|
|
|
.fz-list li.fz-list-th:after {display: none;}
|
|
|
|
.fz-empty-list {height: 100px;display: flex;align-items: center; justify-content: center; flex-wrap: wrap; align-content: center;flex-grow: 1;}
|
|
|
|
.bo-cate-link {display: inline-block;position: relative;padding-right: 10px;margin-right: 10px;line-height: 20px;vertical-align: top;}
|
|
|
|
.bo-cate-link:after {height: 20px;width: 1px;content: "";display: block;position: absolute;right: 0;top: 3px;background: linear-gradient(to bottom, #999, transparent);}
|
|
|
|
.list-icon {width: 20px;height: 20px;display: inline-block;overflow: hidden;vertical-align: top;text-indent: -9999px;}
|
|
|
|
.icon-reply {background: url(./img/reply-all.png) center center no-repeat;margin-right: 5px; background-size: 12px auto;}
|
|
|
|
.icon-secret {background: url(./img/secret.png) center center no-repeat;margin-right: 5px;}
|
|
|
|
.icon-file {background: url(./img/download.png) center center no-repeat;}
|
|
|
|
.icon-link {background: url(./img/link.png) center center no-repeat;}
|
|
|
|
.icon-new {background: url(./img/new.png) center center no-repeat;}
|
|
|
|
.icon-pack-wrap {margin-left: 8px;}
|
|
|
|
.icon-notice {text-indent: -9999px;display: inline-block;width: 20px;height: 20px;background: url(./img/mic.png) center center no-repeat;}
|
|
|
|
.bo-current {color: #FF4800;font-weight: 600;}
|
|
|
|
#bo_list .fz-subject .cnt_cmt {color: #FF4800;padding-left: 5px;font-size: 9px;font-family: tahoma;background: none;font-weight: 700;vertical-align: top;line-height: 20px;}
|
|
|
|
.fz-list .sv_wrap > a {display: inline-block;display: flex;align-items: center;line-height: 1em;}
|
|
|
|
.fz-list .sv_wrap a .profile_img {display: inline-block;vertical-align: middle;margin-right: 3px;}
|
|
|
|
.fz-list .sv_wrap .sv a {font-size: 12px;}
|
|
|
|
#bo_list .pg_wrap {clear: both;text-align: center;margin-top: 30px;display: block;float: none;}
|
|
|
|
#bo_list .pg_wrap:after {display: block;visibility: hidden;clear: both;content: ""}
|
|
|
|
#bo_list .pg {text-align: center;}
|
|
|
|
#bo_list .pg_page, .pg_current {display: inline-block;vertical-align: middle;border: 1px solid #ddd;background: none;border-radius: 0;transition: all 0.3s ease-out;}
|
|
|
|
#bo_list .pg a:focus, .pg a:hover {text-decoration: none}
|
|
|
|
#bo_list .pg_page {color: #959595;font-size: 14px;height: 35px;line-height: 33px;padding: 0 13px;min-width: 30px;text-decoration: none;position: relative;}
|
|
|
|
#bo_list .pg_page:hover {background-color: #fafafa;box-shadow: 0px 0px 5px rgba(0, 0, 0, .2);border-color: #b8b8b8;color: #212121;font-weight: bold;}
|
|
|
|
#bo_list .pg_start {text-indent: -999px;overflow: hidden;padding: 0;width: 35px;border: 1px solid #ddd;background: none;}
|
|
|
|
#bo_list .pg_prev {text-indent: -999px;overflow: hidden;padding: 0;width: 35px;border: 1px solid #ddd;background: none;}
|
|
|
|
#bo_list .pg_end {text-indent: -999px;overflow: hidden;padding: 0;width: 35px;border: 1px solid #ddd;background: none;}
|
|
|
|
#bo_list .pg_next {text-indent: -999px;overflow: hidden;padding: 0;width: 35px;border: 1px solid #ddd;background: none;}
|
|
|
|
#bo_list .pg_prev:after {font-family: FontAwesome;width: 100%;position: absolute;left: 0;top: 0;height: 100%;content: "\f104";z-index: 1;text-indent: 0;text-align: center;font-size: 18px;}
|
|
|
|
#bo_list .pg_start:after {font-family: FontAwesome;width: 100%;position: absolute;left: 0;top: 0;height: 100%;content: "\f100";z-index: 1;text-indent: 0;text-align: center;font-size: 18px;}
|
|
|
|
#bo_list .pg_next:after {font-family: FontAwesome;width: 100%;position: absolute;left: 0;top: 0;height: 100%;content: "\f105";z-index: 1;text-indent: 0;text-align: center;font-size: 18px;}
|
|
|
|
#bo_list .pg_end:after {font-family: FontAwesome;width: 100%;position: absolute;left: 0;top: 0;height: 100%;content: " \f101";z-index: 1;text-indent: 0;text-align: center;font-size: 18px;}
|
|
|
|
#bo_list .pg_start:hover, #bo_list .pg_prev:hover, #bo_list .pg_end:hover, #bo_list .pg_next:hover {background-color: #fafafa}
|
|
|
|
#bo_list .pg_current {display: inline-block;background: #212121;border: 1px solid #212121;color: #fff;font-weight: bold;height: 35px;line-height: 33px;padding: 0 13px;min-width: 30px;position: relative;color: #fff;}
|
|
|
|
|
|
/* 게시판 쓰기 */
|
|
#char_count_desc {display: block;margin: 0 0 5px;padding: 0}
|
|
|
|
#char_count_wrap {margin: 5px 0 0;text-align: right}
|
|
|
|
#char_count {font-weight: bold}
|
|
|
|
#autosave_wrapper {position: relative}
|
|
|
|
#autosave_pop {display: none;z-index: 10;position: absolute !important;top: 34px;right: 0;width: 350px;height: auto !important;height: 180px;max-height: 180px;border: 1px solid #565656;background: #fff;
|
|
-webkit-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);
|
|
-moz-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);
|
|
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2)}
|
|
|
|
#autosave_pop:before {content: "";position: absolute;top: -8px;right: 45px;width: 0;height: 0;border-style: solid;border-width: 0 6px 8px 6px;border-color: transparent transparent #000 transparent}
|
|
|
|
#autosave_pop:after {content: "";position: absolute;top: -7px;right: 45px;width: 0;height: 0;border-style: solid;border-width: 0 6px 8px 6px;border-color: transparent transparent #fff transparent}
|
|
|
|
html.no-overflowscrolling #autosave_pop {height: auto;max-height: 10000px !important}
|
|
|
|
/* overflow 미지원 기기 대응 */
|
|
#autosave_pop strong {position: absolute;font-size: 0;line-height: 0;overflow: hidden}
|
|
|
|
#autosave_pop div {text-align: center;margin: 0 !important}
|
|
|
|
#autosave_pop button {margin: 0;padding: 0;border: 0}
|
|
|
|
#autosave_pop ul {padding: 15px;border-top: 1px solid #e9e9e9;list-style: none;overflow-y: scroll;height: 130px;border-bottom: 1px solid #e8e8e8}
|
|
|
|
#autosave_pop li {padding: 8px 5px;border-bottom: 1px solid #fff;background: #eee;zoom: 1}
|
|
|
|
#autosave_pop li:after {display: block;visibility: hidden;clear: both;content: ""}
|
|
|
|
#autosave_pop a {display: block;float: left}
|
|
|
|
#autosave_pop span {display: block;float: right;font-size: 0.92em;font-style: italic;color: #999}
|
|
|
|
.autosave_close {cursor: pointer;width: 100%;height: 30px;background: none;color: #888;font-weight: bold;font-size: 0.92em}
|
|
|
|
.autosave_close:hover {background: #f3f3f3;color: #3597d9}
|
|
|
|
.autosave_content {display: none}
|
|
|
|
.autosave_del {background: url(./img/close_btn.png) no-repeat 50% 50%;text-indent: -999px;overflow: hidden;height: 20px;width: 20px}
|
|
|
|
/* 게시판 읽기 */
|
|
#bo_v {margin-bottom: 20px;box-sizing: border-box}
|
|
|
|
#bo_v_table {position: absolute;top: 0;right: 16px;margin: 0;padding: 0 5px;height: 25px;background: #ff3061;color: #fff;font-weight: bold;line-height: 2.2em}
|
|
|
|
#bo-v-title {border-top: 2px solid #000;}
|
|
|
|
.bo-v-tit {display: block;font-size: 22px;word-break: break-all;border-bottom: 1px solid #ddd;padding: 20px 0;}
|
|
|
|
#bo-v-info {margin: 0;border-bottom: 1px solid #ddd;color: #666;display: flex;justify-content: space-between;flex-wrap: wrap;}
|
|
|
|
#bo-v-info h2 {position: absolute;font-size: 0;line-height: 0;overflow: hidden}
|
|
|
|
#bo-v-info .profile-info {display: flex;align-items: center;}
|
|
|
|
#bo-v-info .profile-info .pf-img {margin-right: 10px;display: inline-block;}
|
|
|
|
#bo-v-info .profile-info .pf-img img {border-radius: 50%;width: 35px;height: 35px}
|
|
|
|
#bo-v-info .profile-info strong {display: inline-block;font-weight: normal;padding-left: 22px;background: url(./img/user.png) 0 center no-repeat;}
|
|
|
|
#bo-v-info .profile-info .pf-img ~ strong {background: none;padding-left: 0;}
|
|
|
|
#bo-v-info .sv_member,
|
|
#bo-v-info .sv_guest,
|
|
#bo-v-info .member,
|
|
#bo-v-info .guest {font-weight: bold;font-size: 14px;}
|
|
|
|
#bo-v-info .profile_img {display: none}
|
|
|
|
#bo-v-info .sv_member {color: #000}
|
|
|
|
.article-info {padding: 15px 0;min-height: 50px}
|
|
|
|
.article-comment {display: inline-block;padding-left: 22px;background: url(./img/comment.png) 0 center no-repeat;color: #777;font-weight: normal;}
|
|
|
|
.article-hit {display: inline-block;padding-left: 22px;background: url(./img/eye-black.png) 0 center no-repeat;margin-left: 10px;color: #777;font-weight: normal;}
|
|
|
|
.article-date {display: inline-block;padding-left: 22px;background: url(./img/schedule.png) 0 center no-repeat;margin-left: 10px;color: #777;font-weight: normal;}
|
|
|
|
.article-ip {display: inline-block;color: #999;font-size: 12px;}
|
|
|
|
#bo_v_file, #bo_v_link {font-size: 14px;}
|
|
|
|
#bo_v_file h2 {position: absolute;font-size: 0;line-height: 0;overflow: hidden}
|
|
|
|
#bo_v_file ul {margin: 0;list-style: none}
|
|
|
|
#bo_v_file li {padding: 15px;position: relative;margin: 10px 0;border: 1px solid #dfdfdf;padding-left: 50px;background: url(./img/folder.png) 10px 14px no-repeat;transition: box-shadow .3s ease-out;}
|
|
|
|
#bo_v_file li i {color: #b2b2b2;font-size: 24px;margin-right: 20px;position: absolute;left: 10px;top: 14px;}
|
|
|
|
#bo_v_file img {position: absolute;left: 15px;top: 16px;}
|
|
|
|
#bo_v_file a {display: block;text-decoration: none;word-wrap: break-word;color: #000}
|
|
|
|
#bo_v_file a:focus, #bo_v_file li:hover a, #bo_v_file a:active {text-decoration: underline;color: #3a8afd}
|
|
|
|
#bo_v_file .bo_v_file_cnt {color: #b2b2b2;font-size: 0.92em}
|
|
|
|
#bo_v_file li:hover {border-color: #bed4f4;color: #bed4f4;box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, .2);}
|
|
|
|
#bo_v_file li:hover i {color: #3a8afd}
|
|
|
|
#bo_v_file li:hover .bo_v_file_cnt {color: #99c2fc}
|
|
|
|
|
|
#bo_v_link h2 {position: absolute;font-size: 0;line-height: 0;overflow: hidden}
|
|
|
|
#bo_v_file ul {margin: 0;list-style: none}
|
|
|
|
#bo_v_link li {padding: 15px;position: relative;margin: 10px 0;border: 1px solid #dfdfdf;padding-left: 50px;background: url(./img/link_large.png) 10px 14px no-repeat;transition: box-shadow .3s ease-out;}
|
|
|
|
#bo_v_link li i {color: #b2b2b2;font-size: 24px;margin-right: 20px;position: absolute;left: 10px;top: 14px;}
|
|
|
|
#bo_v_link a {display: block;text-decoration: none;word-wrap: break-word;color: #000}
|
|
|
|
#bo_v_link a:focus, #bo_v_link li:hover a, #bo_v_link a:active {text-decoration: underline;color: #3a8afd}
|
|
|
|
#bo_v_link .bo_v_link_cnt {color: #b2b2b2;font-size: 0.92em}
|
|
|
|
#bo_v_link li:hover {border-color: #bed4f4;color: #bed4f4;box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, .2);}
|
|
|
|
#bo_v_link li:hover i {color: #3a8afd}
|
|
|
|
#bo_v_link li:hover .bo_v_link_cnt {color: #99c2fc}
|
|
|
|
|
|
.bo_v_com {margin: 20px 0;float: right}
|
|
|
|
.bo_v_com > li {position: relative;float: left;margin-left: 5px}
|
|
|
|
.bo_v_nb {position: relative;margin: 20px 0;clear: both;text-align: left}
|
|
|
|
.bo_v_nb:after {display: block;visibility: hidden;clear: both;content: ""}
|
|
|
|
.bo_v_nb li {border-top: 1px solid #f1f1f1;padding: 13px}
|
|
|
|
.bo_v_nb li:last-child {border-bottom: 1px solid #f1f1f1}
|
|
|
|
.bo_v_nb li:hover {background: #f6f6f6}
|
|
|
|
.bo_v_nb li i {font-size: 13px;color: #b3b3b3}
|
|
|
|
.bo_v_nb li .nb_tit {display: inline-block;padding-right: 20px;color: #b3b3b3}
|
|
|
|
.bo_v_nb li .nb_date {float: right;color: #b3b3b3}
|
|
|
|
#bo_v_atc {min-height: 200px;height: auto !important;height: 200px}
|
|
|
|
#bo_v_atc_title {position: absolute;font-size: 0;line-height: 0;overflow: hidden}
|
|
|
|
#bo_v_img {width: 100%;overflow: hidden;zoom: 1}
|
|
|
|
#bo_v_img:after {display: block;visibility: hidden;clear: both;content: ""}
|
|
|
|
#bo_v_img a.view_image {display: block}
|
|
|
|
#bo_v_img img {margin-bottom: 20px;max-width: 100%;height: auto}
|
|
|
|
#bo_v_con {margin: 10px 0 30px;width: 100%;line-height: 1.7em;min-height: 200px;word-break: break-all;overflow: hidden;font-size: 14px;}
|
|
|
|
#bo_v_con a {color: #000;text-decoration: underline}
|
|
|
|
#bo_v_con img {max-width: 100%;height: auto}
|
|
|
|
#bo_v_act {margin-bottom: 30px;text-align: center}
|
|
|
|
#bo_v_act .bo_v_act_gng {position: relative;display: inline-block;}
|
|
|
|
#bo_v_act .bo_v_act_gng ~ .bo_v_act_gng {margin-left: 10px;}
|
|
|
|
#bo_v_act a, #bo_v_act > span {vertical-align: middle;color: #4a5158;transition: all .3s ease-out;padding-top: 40px;}
|
|
|
|
#bo_v_act a:hover {background-color: #fff;color: #ff484f;border-color: #fff;box-shadow: 0px 0px 8px rgba(0, 0, 0, .2);}
|
|
|
|
#bo_v_act i {font-size: 1.4em;margin-right: 5px}
|
|
|
|
#bo_v_act_good, #bo_v_act_nogood {display: none;position: absolute;top: 30px;left: 0;z-index: 9999;padding: 10px 0;width: 165px;background: #ff3061;color: #fff;text-align: center;}
|
|
|
|
#bo_v_act .bo_v_good {display: inline-block;border: 1px solid #dedede;width: 70px;height: 70px;border-radius: 50%;background: url(./img/like.png) center 12px no-repeat;}
|
|
|
|
#bo_v_act .bo_v_nogood {display: inline-block;border: 1px solid #dedede;width: 70px;height: 70px;border-radius: 50%;background: url(./img/dislike.png) center 12px no-repeat;}
|
|
|
|
#bo_v_sns {padding: 0;list-style: none;right: 0;top: 60px;display: flex;padding: 8px 5px;border-radius: 10px;background: #f5f5f5;box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .3);opacity: 0;position: absolute;width: 0;height: 0;overflow: hidden;}
|
|
|
|
#bo_v_sns.active {opacity: 1;width: auto;height: auto;transition: all 0.3s ease-out;}
|
|
|
|
#bo_v_sns li {padding: 0 3px;}
|
|
|
|
#bo_v_sns li a {height: 35px;line-height: 35px;text-align: center;border-radius: 5px;color: #fff;font-size: 0.95em;width: 35px;border-radius: 50%;transition: all .2s ease-out;}
|
|
|
|
#bo_v_sns li a:hover {box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .4);}
|
|
|
|
#bo_v_sns li a span {display: none;}
|
|
|
|
#bo_v_sns li img {vertical-align: middle;}
|
|
|
|
#bo_v_sns li .sns_f {display: block;background: #3b5997}
|
|
|
|
#bo_v_sns li .sns_t {display: block;background: #09aeee}
|
|
|
|
#bo_v_sns li .sns_g {display: block;background: #ea4026}
|
|
|
|
#bo_v_sns li .sns_k {display: block;background: #fbe300}
|
|
|
|
#bo_v_share {position: relative;padding: 20px 0;display: flex;justify-content: flex-end}
|
|
|
|
#bo_v_share:after {display: block;visibility: hidden;clear: both;content: ""}
|
|
|
|
#bo_v_share .btn {padding: 0 10px;color: #555;font-weight: normal;font-size: 1em;width: 80px;line-height: 35px;height: 35px;border-color: #d5d5d5;border-radius: 5px}
|
|
|
|
#bo_v_share .btn:hover {background: #fff}
|
|
|
|
#bo_v_share .btn i {margin-right: 5px;color: #4b5259;vertical-align: middle}
|
|
|
|
.scrap-btn {background: url(./img/bookmark.png) 8px center no-repeat;padding-left: 32px !important;}
|
|
|
|
.share-btn {background: url(./img/share-link.png) 8px center no-repeat;padding-left: 32px !important;}
|
|
|
|
.share-btn.active:after {width: 100%;}
|
|
|
|
.share-btn.active {border-color: #f1f5f9;box-shadow: 3px 3px 8px rgba(0, 0, 0, .2);}
|
|
|
|
/* 게시판 댓글 */
|
|
.cmt_btn {width: 100%;text-align: left;border: 0;border-bottom: 1px solid #f0f0f0;background: #fff;font-weight: bold;margin: 30px 0 0px;padding: 0 0 15px}
|
|
|
|
.cmt_btn span.total {position: relative;display: inline-block;margin-right: 5px;font-size: 1em;color: #3a8afd}
|
|
|
|
.cmt_btn span.cmt_more {float: right;display: inline-block;width: 15px;height: 10px;background: url(./img/btn_cmt.png) no-repeat right 2px;margin-top: 5px}
|
|
|
|
.cmt_btn_op span.cmt_more {background-position: right -8px}
|
|
|
|
.cmt_btn b {font-size: 1.2em;color: #000}
|
|
|
|
.cmt_btn span.total:after {position: absolute;bottom: -17px;left: 0;display: inline-block;background: #3a8afd;content: "";width: 100%;height: 2px}
|
|
|
|
#bo_vc {}
|
|
|
|
#bo_vc h2 {position: absolute;font-size: 0;line-height: 0;overflow: hidden}
|
|
|
|
#bo_vc article {margin: 20px 0;position: relative;border-bottom: 1px solid #f0f0f0;display: flex;}
|
|
|
|
#bo_vc article.bo-vc-reply:before {content: "";display: block;width: 12px;height: 12px;background: url(./img/reply-all.png) 0 0 no-repeat;background-size: 100% auto;position: absolute;left: -20px;top: 5px;}
|
|
|
|
#bo_vc article:last-child {border-bottom: none;}
|
|
|
|
#bo_vc article .profile_img img {border-radius: 50%}
|
|
|
|
#bo_vc article .pf_img {display: inline-block;vertical-align: middle;margin-right: 5px;}
|
|
|
|
#bo_vc article .pf_img img {border-radius: 50%;width: 35px;height: 35px}
|
|
|
|
#bo_vc article .cm_wrap {flex-grow: 1;}
|
|
|
|
#bo_vc header {position: relative;display: flex;justify-content: space-between;}
|
|
|
|
#bo_vc header .profile_img {display: none}
|
|
|
|
#bo_vc header .icon_reply {position: absolute;top: 15px;left: -20px}
|
|
|
|
.cm-parent-info {color: #999;text-decoration: none !important;margin-right: 5px;}
|
|
|
|
.cm-header-content {vertical-align: middle;}
|
|
|
|
.cm-ip {color: #999;}
|
|
|
|
.cm-reply-btn {background: url(./img/reply.png) 0 center no-repeat;width: 16px;text-indent: -9999px;display: inline-block;}
|
|
|
|
.cm-modify-btn {background: url(./img/refresh.png) 0 center no-repeat;width: 16px;text-indent: -9999px;display: inline-block;margin-left: 5px;}
|
|
|
|
.cm-delete-btn {background: url(./img/close.png) 0 center no-repeat;width: 16px;text-indent: -9999px;display: inline-block;background-size: 14px auto;margin-left: 5px;}
|
|
|
|
.bo-vc-datetime {background: url(./img/schedule.png) 0 center no-repeat;padding-left: 22px;margin: 0 5px;}
|
|
|
|
#bo_vc .member, #bo_vc .guest, #bo_vc .sv_member, #bo_vc .sv_guest {font-weight: bold}
|
|
|
|
.bo_vc_hdinfo {color: #777}
|
|
|
|
#bo_vc h1 {position: absolute;font-size: 0;line-height: 0;overflow: hidden}
|
|
|
|
#bo_vc .cmt_contents {line-height: 1.8em;padding: 10px 0}
|
|
|
|
#bo_vc p a {text-decoration: underline}
|
|
|
|
#bo_vc p a.s_cmt {text-decoration: underline;color: #ed6479}
|
|
|
|
#bo_vc_empty {margin: 0;padding: 80px 0 !important;color: #777;text-align: center}
|
|
|
|
#bo_vc #bo_vc_winfo {float: left}
|
|
|
|
#bo_vc .bo_vl_opt {position: absolute;top: 0;right: 0}
|
|
|
|
|
|
.bo-vc-guest-area {display: flex;justify-content: space-between;align-items: flex-end;flex-wrap: wrap;}
|
|
|
|
.bo-vc-guest-input {margin-bottom: 10px;}
|
|
|
|
.bo-vc-guest-notice {background: url(./img/mic.png) 0 center no-repeat;padding-left: 22px;color: #000;font-size: 14px;margin-bottom: 8px;}
|
|
|
|
.bo-vc-captcha #captcha {vertical-align: top;margin-bottom: 10px;}
|
|
|
|
.bo_vc_w {position: relative;margin: 20px 0;display: block}
|
|
|
|
.bo_vc_w:after {display: block;visibility: hidden;clear: both;content: ""}
|
|
|
|
.bo_vc_w h2 {position: absolute;font-size: 0;line-height: 0;overflow: hidden}
|
|
|
|
.bo_vc_w #char_cnt {display: inline-block;margin-right: 10px;}
|
|
|
|
.bo_vc_w textarea {border: 1px solid #ccc;background: #fff !important;color: #000;vertical-align: middle;padding: 8px;width: 100%;height: 120px;}
|
|
|
|
#wr_secret {}
|
|
|
|
.bo_vc_w_info {display: flex;justify-content: space-between;}
|
|
|
|
.bo_vc_w_info .frm_input {margin-right: 5px;margin-bottom: 10px;}
|
|
|
|
.bo_vc_w_info #captcha {display: block;clear: both}
|
|
|
|
.bo_vc_w .btn_confirm {}
|
|
|
|
.bo_vc_w .btn_confirm label {display: inline-block;margin-right: 10px;border-radius: 3px;text-align: center}
|
|
|
|
.bo_vc_w .btn_confirm .secret_cm label {font-size: 1em !important}
|
|
|
|
.bo_vc_w_wr {padding-top: 10px;}
|
|
|
|
.secret_cm {display: inline-block;}
|
|
|
|
.comment-write-box {border: 1px solid #e1e1e1;border-top: 2px solid #333;background: #f8f8f8;padding: 15px;}
|
|
|
|
.comment-write-box .required {background-image: none !important;}
|
|
|
|
.comment-write-box .frm_input {border-radius: 0;vertical-align: top;}
|
|
|
|
.bo-vc-bottom {display: flex;justify-content: space-between;margin-top: 10px;}
|
|
|
|
.bo-vc-submit {padding: 6px 15px;height: 32px;border-radius: 0px;font-weight: 700;font-size: 14px;background: #144a94;color: #fff;transition: all .2s ease-out;}
|
|
|
|
.bo-vc-submit:hover {box-shadow: 3px 3px 8px rgba(0, 0, 0, .2);background: #fff;color: #333;}
|
|
|
|
|
|
#bo_vc_send_sns {display: inline-flex;}
|
|
|
|
#bo_vc_sns {display: flex;margin: 0;padding: 0;list-style: none;zoom: 1}
|
|
|
|
#bo_vc_sns li {margin: 0 5px 0 0;display: flex;align-items: center;}
|
|
|
|
#bo_vc_sns .sns_li_f {border-radius: 3px;background: #3a589b;height: 40px;padding: 0 0 0 10px}
|
|
|
|
#bo_vc_sns .sns_li_t {border-radius: 3px;background: #00aced;height: 40px;padding: 0 0 0 10px}
|
|
|
|
#bo_vc_sns .sns_li_off {background: #bbb}
|
|
|
|
#bo_vc_sns a {display: inline-block;padding: 0 15px 0 5px;}
|
|
|
|
#bo_vc_sns input {margin: 0 5px 0 0}
|
|
|
|
/*글쓰기*/
|
|
#bo_w .bo_v_option li {display: inline-block;float: left;text-align: left;margin: 0 5px 0 0}
|
|
|
|
#bo_w .bo_v_option li label {vertical-align: baseline}
|
|
|
|
#bo_w .bo_v_option .chk_box input[type="checkbox"] + label span {margin-left: 0;margin-right: 5px}
|
|
|
|
#bo_w .write_div {margin: 10px 0;position: relative}
|
|
|
|
#bo_w .write_div:after {display: block;visibility: hidden;clear: both;content: ""}
|
|
|
|
#bo_w .bo_w_info:after {display: block;visibility: hidden;clear: both;content: ""}
|
|
|
|
#bo_w .bo_w_info .frm_input {float: left;margin-bottom: 1%}
|
|
|
|
#bo_w #wr_password, #bo_w #wr_homepage {}
|
|
|
|
#bo_w .wr_content.smarteditor2 iframe {background: #fff}
|
|
|
|
#bo_w .bo_w_tit {position: relative}
|
|
|
|
#bo_w .bo_w_tit .frm_input {padding-right: 120px}
|
|
|
|
#bo_w .bo_w_tit #btn_autosave {position: absolute;top: 5px;right: 5px;line-height: 30px;height: 30px}
|
|
|
|
#bo_w .bo_w_link label {position: absolute;top: 1px;left: 1px;border-radius: 3px 0 0 3px;height: 38px;line-height: 38px;width: 40px;font-size: 1.2em;text-align: center;color: #b2b2b2}
|
|
|
|
#bo_w .bo_w_link .frm_input {padding-left: 50px}
|
|
|
|
#bo_w .bo_w_flie .lb_icon {position: absolute;top: 0px;left: 0px;border-radius: 3px 0 0 3px;height: 38px;line-height: 38px;width: 40px;font-size: 1.2em;text-align: center;color: #b2b2b2}
|
|
|
|
#bo_w .bo_w_flie .frm_file {padding-left: 50px;margin-top: 3px}
|
|
|
|
#bo_w .bo_w_flie .file_wr {position: relative;border: 1px solid #ccc;background: #fff;color: #000;vertical-align: middle;border-radius: 3px;padding: 5px;height: 40px;margin: 0}
|
|
|
|
#bo_w .bo_w_flie .frm_input {margin: 10px 0 0}
|
|
|
|
#bo_w .bo_w_flie .file_del {position: absolute;top: 10px;right: 10px;font-size: 0.92em;color: #7d7d7d}
|
|
|
|
#bo_w .bo_w_select select {border: 1px solid #d0d3db;width: 100%;height: 40px;border-radius: 3px}
|
|
|
|
#bo_w .btn_submit {padding: 0 20px;font-size: 1.167em}
|
|
|
|
#bo_w .btn_cancel {border-radius: 3px;font-size: 1.167em}
|
|
|
|
#bo_w .required {background: none !important;}
|
|
|
|
#bo_w .btn-confirm {text-align: center;margin: 40px 0;}
|
|
|
|
#captcha #captcha_key {border-radius: 0;background: #fff !important;}
|
|
|
|
.content-input-form {padding: 15px; border-top: 2px solid #333;}
|
|
|
|
.input-wrap {margin-top: 10px;}
|
|
|
|
.input-box {border: 1px solid #dadada;display: flex;flex-wrap: nowrap;justify-content: space-between;margin-top: -1px;}
|
|
|
|
.input-title {flex: 0 0 110px;display: flex;align-items: center;justify-content: flex-start;padding-left: 20px;font-size: 14px;font-weight: bold;position: relative;background: #fff;}
|
|
|
|
.input-box.required .input-title:after {content: "*";color: #3366cc;}
|
|
|
|
.input-content {flex-grow: 1;display: flex;align-items: center;min-height: 43px;position: relative;background: #fff;}
|
|
|
|
.input-content input[type=text], .input-content input[type=password] {width: 100%;height: 43px;padding-left: 15px;border: 1px solid transparent;}
|
|
|
|
.input-content select {width: 100%;height: 43px;padding-left: 15px;border: 1px solid transparent;-webkit-appearance: none;-moz-appearance: none;appearance: none;position: relative;background: url('./img/arrow.png') right 5px center no-repeat;background-size: 18px auto;}
|
|
|
|
.input-content select::-ms-expand {display: none;}
|
|
|
|
.input-content select:focus {}
|
|
|
|
.input-content .check-box {margin-left: 15px;}
|
|
|
|
.input-content #btn_autosave {height: 30px;margin-right: 5px;width: 130px;}
|
|
|
|
.input-wrap .cke_sc {display: none;}
|
|
|
|
/********* 파일선택 버튼 크기 ********** width: 110px */
|
|
.input-content .hidden-file {height: 43px;overflow: hidden;padding: 10px;}
|
|
|
|
/********* 파일첨부 박스 크기 ********* background: #999;width: 285px; */
|
|
.input-content .file-label {height: 100%;display: flex;align-items: center;justify-content: center;color: #fff;}
|
|
|
|
.check-box {position: relative;display: inline-block;}
|
|
|
|
.check-box input {display: none;}
|
|
|
|
.check-box span {display: inline-block;width: 17px;height: 17px;border: 1px solid #c8ccd4;background: #fff;border-radius: 3px;transition: background 0.2s ease;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
|
|
|
|
.check-box span::after {content: "";position: absolute;top: 1px;left: 5px;width: 5px;height: 11px;border-right: 2px solid #fff;border-bottom: 2px solid #fff;transform: rotate(45deg) scale(0);transition: all 0.3s ease 0.15s;opacity: 0;}
|
|
|
|
.check-box label {cursor: pointer;padding-left: 23px;position: relative;z-index: 1;}
|
|
|
|
.check-box label.sound_only {width: 17px;height: 17px;}
|
|
|
|
.check-box input:checked ~ span {border-color: transparent;background: #3a8afd;animation: checkbox-jelly 0.6s ease;}
|
|
|
|
.check-box input:checked ~ span:after {opacity: 1;transform: rotate(45deg) scale(1);}
|
|
|
|
@keyframes checkbox-jelly {
|
|
0% {transform: scale(1, 1) translateY(-50%);}
|
|
30% {transform: scale(1.25, 0.75) translateY(-50%);}
|
|
40% {transform: scale(0.75, 1.25) translateY(-50%);}
|
|
50% {transform: scale(1.15, 0.85) translateY(-50%);}
|
|
65% {transform: scale(0.95, 1.05) translateY(-50%);}
|
|
75% {transform: scale(1.05, 0.95) translateY(-50%);}
|
|
to {transform: scale(1, 1) translateY(-50%);}
|
|
}
|
|
|
|
.button {border: 0;box-shadow: inset 0 0 0 1px #f45e61;position: relative;}
|
|
|
|
.button::before, .button::after {content: "";position: absolute;width: 100%;height: 100%;}
|
|
|
|
.draw {transition: color 0.25s;}
|
|
|
|
.draw::before, .draw::after {border: 1px solid transparent;width: 0;height: 0;}
|
|
|
|
.draw::before {top: 0;left: 0;}
|
|
|
|
.draw::after {bottom: 0;right: 0;}
|
|
|
|
.draw:hover {color: #60daaa;}
|
|
|
|
.draw:hover::before, .draw:hover::after {width: 100%;height: 100%;}
|
|
|
|
.draw:hover::before {border-top-color: #60daaa;border-right-color: #60daaa;transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;}
|
|
|
|
.draw:hover::after {border-bottom-color: #60daaa;border-left-color: #60daaa;transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;}
|
|
|
|
.meet:hover {color: #fbca67;}
|
|
|
|
.meet::after {top: 0;left: 0;}
|
|
|
|
.meet:hover::before {border-top-color: #000;border-right-color: #000;}
|
|
|
|
.meet:hover::after {border-bottom-color: #000;border-left-color: #000;transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;}
|
|
|
|
|
|
#bo_w .btn-confirm .btn-submit {background: #1c54a7;box-shadow: none;border: none;color: #fff;width: 140px;height: 50px;font-size: 16px;vertical-align: top;margin-right: 10px;font-weight: bold;transition: all .4s ease-out;}
|
|
|
|
#bo_w .btn-confirm .btn-submit:hover {background: none;color: #000}
|
|
|
|
#bo_w .btn-confirm .btn-cancel {box-shadow: inset 0 0 0 1px #dadada;text-align: center;display: inline-block;width: 140px;height: 50px;line-height: 30px;color: #333;font-size: 20px;vertical-align: top;font-weight: bold;}
|
|
|
|
|
|
@media screen and (max-width: 760px) {
|
|
#bo-cate {margin: 0;padding-bottom: 15px;}
|
|
|
|
|
|
.bo-top-wrap {align-items: center;flex-wrap: wrap;margin-bottom: 10px;}
|
|
|
|
.bo-top-wrap .list-total {margin-top: 10px;font-size: 14px;background-size: 20px auto;padding-left: 25px;}
|
|
|
|
.bo-top-wrap .board-btn {margin-left: auto;margin-top: 10px;}
|
|
|
|
.board-btn a {font-size: 13px;padding: 4px 6px;height: auto;}
|
|
|
|
.fz-list {margin-bottom: 10px;}
|
|
|
|
.fz-list .fz-list-th {display: none;}
|
|
|
|
.fz-list li {flex-wrap: wrap;padding: 10px;}
|
|
|
|
.fz-list li > div {order: 2;min-height: auto;padding: 0;margin-right: 15px;}
|
|
|
|
.fz-list li .fz-subject {order: 1;width: 100%;padding: 0;margin-bottom: 10px;margin-right: 0;}
|
|
|
|
.fz-list li .fz-subject a {width: 100%;display: block; /* 제목이 길때 여러줄로 다 나오게 할려면 이 뒷부분 삭제*/ text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden;}
|
|
|
|
.fz-list li .fz-num {display: none;}
|
|
|
|
.fz-list li .fz-checkbox {flex: 0;}
|
|
|
|
.fz-list li .fz-writer {flex: 0 120px;}
|
|
|
|
.fz-list li .fz-writer.sv-empty-writer {background: url(./img/user.png) 0 center no-repeat;padding-left: 20px;}
|
|
|
|
.fz-list li .fz-date {display: inline-block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;background: url(./img/schedule.png) 0 center no-repeat;padding-left: 20px;min-width: 70px;max-width: 120px;font-size: 13px;vertical-align: middle;}
|
|
|
|
.fz-list li .fz-hit {flex: 0;background: url(./img/eye-black.png) 0 center no-repeat;padding-left: 20px;}
|
|
|
|
.fz-list li .fz-good {flex: 0;background: url(./img/like_s.png) 0 center no-repeat;padding-left: 20px;}
|
|
|
|
.fz-list li .fz-nogood {flex: 0;background: url(./img/dislike_s.png) 0 center no-repeat;padding-left: 20px;}
|
|
|
|
#bo_list .profile_img img {max-width: 22px;}
|
|
|
|
.bo-v-tit {font-size: 18px;padding: 14px 0;}
|
|
|
|
#bo-v-info {font-size: 12px;padding: 10px 0;}
|
|
|
|
#bo-v-info .profile-info {padding: 0;}
|
|
|
|
#bo-v-info .article-info {padding: 0;margin-left: auto;min-height: 0;margin-top: 3px;}
|
|
|
|
#bo-v-info .profile-info .pf-img {margin-right: 5px;}
|
|
|
|
#bo-v-info .profile-info .pf-img img {width: 22px;height: 22px;vertical-align: top;}
|
|
|
|
#bo-v-share {padding: 10px 0;}
|
|
|
|
.bo-vc-act {display: flex;align-items: center;}
|
|
|
|
#bo-vc article .pf_img img {vertical-align: top;}
|
|
|
|
.cm-header-content {font-size: 13px;}
|
|
|
|
.bo-vc-submit {font-size: 14px;font-weight: 300;padding: 3px 12px;height: auto;}
|
|
|
|
.bo-v-btn-wrap {flex-wrap: wrap;padding-bottom: 5px;margin-bottom: 0;}
|
|
|
|
.bo-v-btn-left {margin-bottom: 5px;}
|
|
|
|
.bo-v-btn-right {margin-left: auto;margin-bottom: 5px;}
|
|
|
|
.bo-vc-guest-area {flex-wrap: wrap;}
|
|
|
|
.bo-vc-guest-input input[type=text], .bo-vc-guest-input input[type=password] {width: 100%;}
|
|
|
|
.bo-vc-guest-input input[type=password] {margin-top: -1px;}
|
|
|
|
.content-input-form {padding: 10px;}
|
|
|
|
.input-title {flex: 0 0 90px;padding-left: 10px;}
|
|
|
|
.input-content input[type=text], .input-content input[type=password] {padding-left: 8px;}
|
|
|
|
.input-content select {padding-left: 8px;}
|
|
|
|
.input-content .check-box {margin-left: 8px;}
|
|
|
|
#bo_w .btn-confirm {margin: 25px 0;}
|
|
|
|
#bo_w .btn-confirm .btn-submit {width: 100px;height: 40px;font-weight: 500;font-size: 14px;}
|
|
|
|
#bo_w .btn-confirm .btn-cancel {width: 100px;height: 40px;font-weight: 500;line-height: 40px;font-size: 14px;}
|
|
}
|
|
|
|
/* =================================================================== */
|
|
/* =================== order.php 전용 스타일 시작 =================== */
|
|
/* =================================================================== */
|
|
|
|
/* ------------------ 반응형 그리드 시스템 (PC 2열, 모바일 1열) ------------------ */
|
|
.row { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; }
|
|
|
|
.col-lg-6 {
|
|
position: relative;
|
|
width: 100%;
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
}
|
|
|
|
/* PC 화면 (가로 992px 이상)에서만 2열로 보이게 설정 */
|
|
@media (min-width: 992px) {
|
|
.col-lg-6 {
|
|
flex: 0 0 50%;
|
|
max-width: 50%;
|
|
}
|
|
}
|
|
|
|
/* ------------------ 기본 폼 스타일 ------------------ */
|
|
.form-group {
|
|
margin-bottom: 5px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 0 solid #eee;
|
|
}
|
|
|
|
.form-group > label { /* order.php의 label에만 적용되도록 범위 한정 */
|
|
font-weight: bold;
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.form-group input[type="text"], .form-group textarea {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
|
|
.options, .input-inline {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
font-size: 0.8em;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.options label {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #f9f9f9;
|
|
border: 1px solid #ccc;
|
|
border-radius: 15px;
|
|
padding: 3px 6px;
|
|
cursor: pointer;
|
|
margin-bottom: 0;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.options input[type="radio"] {
|
|
margin-right: 3px;
|
|
}
|
|
|
|
/* 라디오 버튼 강제 표시 (안 보이는 문제 해결) */
|
|
.options input[type="radio"] {
|
|
display: inline-block !important;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
-webkit-appearance: radio !important;
|
|
appearance: radio !important;
|
|
width: 13px !important;
|
|
height: 13px !important;
|
|
margin: 0 5px 0 0 !important;
|
|
position: static !important;
|
|
z-index: auto !important;
|
|
}
|
|
|
|
.tip-mark {
|
|
color: #3366cc;
|
|
font-weight: bold;
|
|
font-size: 0.8em;
|
|
text-align: left !important;
|
|
cursor: pointer;
|
|
margin-right: 10px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.tip-desc-box {
|
|
display: block;
|
|
vertical-align: top;
|
|
margin: 10px auto;
|
|
min-width: 250px;
|
|
max-width: 900px;
|
|
width: 100%;
|
|
background: #f7f7fa;
|
|
color: #222;
|
|
font-size: 0.8em;
|
|
padding: 14px 16px;
|
|
border-radius: 7px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
white-space: pre-line;
|
|
text-align: left;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.tip-img {
|
|
display: block;
|
|
margin-top: 10px;
|
|
max-width: 850px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
width: 100%;
|
|
margin: 10px auto;
|
|
}
|
|
|
|
.options input[type="text"].window-size {
|
|
width: 80px;
|
|
max-width: 40vw;
|
|
min-width: 60px;
|
|
padding: 4px 6px;
|
|
font-size: 1em;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
margin-right: 3px;
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.options span.x-mark {
|
|
margin: 0 1px;
|
|
font-weight: bold;
|
|
font-size: 1.1em;
|
|
color: #888;
|
|
}
|
|
|
|
.pretty-select {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
background: #f9fafc url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8L10 13L15 8' stroke='%233d6cb9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1.2em center/1.2em 1.2em;
|
|
border: 1.5px solid #e2e6ea;
|
|
border-radius: 8px;
|
|
padding: 4px 38px 4px 14px;
|
|
font-size: 0.8em;
|
|
color: #232526;
|
|
transition: border 0.18s, box-shadow 0.18s;
|
|
outline: none;
|
|
box-shadow: 0 2px 8px rgba(61, 108, 185, 0.05);
|
|
cursor: pointer;
|
|
min-width: 140px;
|
|
}
|
|
|
|
.pretty-select:focus {
|
|
border: 1.5px solid #3d6cb9;
|
|
box-shadow: 0 0 0 2px #e7f0fa;
|
|
}
|
|
|
|
.well2 {
|
|
position: relative;
|
|
padding: 45px 15px 15px;
|
|
background-color: #f5f5f5;
|
|
border: 1px solid #e3e3e3;
|
|
border-radius: 4px;
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
|
|
}
|
|
|
|
.remove-window-btn {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
width: 26px;
|
|
height: 26px;
|
|
background-color: #e74c3c;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 50%;
|
|
font-size: 18px;
|
|
line-height: 26px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
z-index: 10;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.remove-window-btn:hover {
|
|
background-color: #c0392b;
|
|
}
|
|
|
|
.dynamic-box {
|
|
margin-bottom: 30px; /* 각 창 아이템 사이의 수직 간격 */
|
|
}
|
|
|
|
/* ------------------ 팝업 스타일 ------------------ */
|
|
.popup-btn {
|
|
background-color: #f0f5ff;
|
|
border: 1px solid #3d6cb9;
|
|
color: #3d6cb9;
|
|
padding: 8px 15px;
|
|
border-radius: 20px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
transition: all 0.2s;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.popup-btn:hover {
|
|
background-color: #3d6cb9;
|
|
color: #fff;
|
|
}
|
|
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.65);
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: #fff;
|
|
padding: 25px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
|
position: relative;
|
|
max-width: 900px;
|
|
width: 100%;
|
|
min-height: 200px;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.modal-close-btn {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 15px;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
color: #888;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
}
|
|
|
|
.modal-close-btn:hover {
|
|
color: #000;
|
|
}
|
|
|
|
.modal-overlay.active {
|
|
display: flex;
|
|
}
|
|
|
|
/* ------------------ 액션 툴바 스타일 ------------------ */
|
|
#action-toolbar {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: 0;
|
|
background-color: rgba(255, 255, 255, 0.95); /* 스크롤 시 약간 투명하게 */
|
|
backdrop-filter: blur(5px); /* 배경 블러 효과 (지원 브라우저) */
|
|
padding: 10px 15px;
|
|
border-bottom: 1px solid #e9e9e9;
|
|
z-index: 990;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between; /* 그룹을 양쪽으로 분리 */
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.toolbar-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.toolbar-group > label {
|
|
margin-bottom: 0;
|
|
font-size: 1em; /* 라벨 폰트 약간 키움 */
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* ★★★ 핵심 기능: 창 추가 버튼 ★★★ */
|
|
.popup-btn.add-btn {
|
|
background-color: #3d6cb9;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
padding: 10px 20px; /* 버튼을 더 크고 중요하게 */
|
|
font-size: 1em;
|
|
border-color: #3d6cb9;
|
|
}
|
|
|
|
.popup-btn.add-btn:hover {
|
|
background-color: #2c5282;
|
|
border-color: #2c5282;
|
|
}
|
|
|
|
/* ★★★ 부가 기능: 도움말 버튼 ★★★ */
|
|
.popup-btn.help-btn {
|
|
background-color: #f0f0f0; /* 덜 눈에 띄는 회색 배경 */
|
|
color: #555;
|
|
border-color: #ddd;
|
|
padding: 6px 12px; /* 버튼을 더 작게 */
|
|
font-weight: normal; /* 굵기 제거 */
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.popup-btn.help-btn:hover {
|
|
background-color: #e0e0e0;
|
|
border-color: #ccc;
|
|
color: #000;
|
|
}
|
|
|
|
.well-actions {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
display: flex;
|
|
gap: 5px;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.well-actions .help-btn {
|
|
padding: 2px 8px;
|
|
font-size: 0.8em;
|
|
margin: 0;
|
|
}
|
|
|
|
/* 삭제 버튼은 well-actions 안으로 이동했으므로, 기존 스타일에서 position 제거 */
|
|
.remove-window-btn2 {
|
|
/* position: absolute; ... 이 줄 삭제 또는 주석처리 */
|
|
background-color: #e74c3c;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 50%;
|
|
width: 24px;
|
|
height: 24px;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
z-index: 10;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
/* 특정 너비를 가진 폼 요소를 위한 클래스 */
|
|
.input-short {
|
|
width: 100px;
|
|
}
|
|
|
|
.select-medium {
|
|
width: 200px;
|
|
}
|
|
|
|
/* 모바일 화면 (가로 767px 이하) 대응 */
|
|
@media (max-width: 767px) {
|
|
/* '평형'과 '브랜드' 필드가 화면 너비에 맞게 유연하게 조절되도록 함 */
|
|
.input-short,
|
|
.select-medium {
|
|
/* flex-grow: 1; 를 사용해 남는 공간을 채우게 할 수도 있습니다. */
|
|
/* 이 예제에서는 최대 너비를 유지하며 화면이 작아지면 함께 작아지도록 설정합니다. */
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
/* style.css 파일 하단에 이 코드를 추가하세요 */
|
|
|
|
/* Flexbox를 사용하는 폼 그룹을 위한 스타일 */
|
|
.form-group-flex {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
/* flex 그룹 내의 라벨은 기본 마진을 제거하여 정렬이 깨지지 않도록 합니다. */
|
|
.form-group-flex > label {
|
|
margin: 0;
|
|
flex-shrink: 0; /* 화면이 좁아져도 라벨이 줄어들지 않도록 함 */
|
|
}
|
|
|
|
/* style.css 파일 하단에 이 코드를 추가하세요 */
|
|
.address-zip-group,
|
|
.address-main-group {
|
|
display: flex;
|
|
gap: 10px; /* 요소 사이의 간격 */
|
|
margin-bottom: 8px; /* 그룹 아래 여백 */
|
|
}
|
|
|
|
/* 우편번호 입력 필드 */
|
|
.address-zip-group .zip-input {
|
|
width: 120px;
|
|
flex-grow: 0; /* 늘어나지 않음 */
|
|
}
|
|
|
|
/* 우편번호 찾기 버튼 */
|
|
.address-zip-group .postcode-btn {
|
|
margin: 0; /* 기본 마진 제거 */
|
|
flex-shrink: 0; /* 줄어들지 않음 */
|
|
}
|
|
|
|
/* 기본/상세 주소 입력 필드 */
|
|
/* 기본/상세 주소 입력 필드 */
|
|
.address-main-group .addr-input {
|
|
/* flex: 1; <-- 이 줄은 아래의 ID 선택자로 대체되므로 제거합니다. */
|
|
min-width: 0; /* flex item이 부모보다 작아질 수 있도록 함 */
|
|
}
|
|
|
|
/* 기본주소(#mb_addr1) 필드를 약 70% 비율로 설정 */
|
|
.address-main-group #mb_addr1 {
|
|
flex-grow: 7;
|
|
}
|
|
|
|
/* 상세주소(#mb_addr2) 필드를 약 30% 비율로 설정 */
|
|
.address-main-group #mb_addr2 {
|
|
flex-grow: 3;
|
|
}
|
|
|
|
/* =================================================================== */
|
|
/* ===================== 툴팁 스타일 (추가) ===================== */
|
|
/* =================================================================== */
|
|
|
|
/* 툴팁을 감싸는 컨테이너. 아이콘과 텍스트를 함께 묶어줍니다. */
|
|
.tooltip-wrapper {
|
|
position: relative; /* 툴팁 위치의 기준점이 됩니다. */
|
|
display: inline-flex; /* 아이콘과 텍스트를 나란히 정렬합니다. */
|
|
align-items: center;
|
|
margin-left: 8px; /* 다른 요소와의 간격을 만듭니다. */
|
|
}
|
|
|
|
/* 💡 [수정] 툴팁 아이콘 스타일 (더 작고 세련되게) */
|
|
.tooltip-icon {
|
|
font-size: 19px; /* 아이콘 크기를 적절하게 조정 */
|
|
color: #5c7cfa; /* 부드럽고 세련된 파란색으로 변경 */
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* 부드러운 애니메이션 효과 */
|
|
opacity: 0.75;
|
|
}
|
|
|
|
/* 💡 [수정] 아이콘에 마우스를 올렸을 때의 인터랙티브 효과 */
|
|
.tooltip-icon:hover {
|
|
color: #3d5afe; /* 더 선명한 파란색으로 변경 */
|
|
transform: translateY(-1px) scale(1.1); /* 살짝 위로 떠오르며 확대되는 효과 */
|
|
opacity: 1;
|
|
text-shadow: 0 2px 4px rgba(61, 90, 254, 0.2); /* 은은한 그림자 효과 추가 */
|
|
}
|
|
|
|
/* 툴팁 텍스트 박스 (기본적으로는 보이지 않음) */
|
|
.tooltip-text {
|
|
visibility: hidden; /* 기본적으로 숨김 처리 */
|
|
opacity: 0;
|
|
width: 240px; /* 툴팁의 가로 너비 */
|
|
background-color: #2c3e50; /* 배경색 */
|
|
color: #fff; /* 글자색 */
|
|
text-align: left;
|
|
border-radius: 6px;
|
|
padding: 10px 14px;
|
|
position: absolute; /* 아이콘을 기준으로 위치를 잡습니다. */
|
|
z-index: 10;
|
|
bottom: 150%; /* 아이콘보다 위쪽에 위치시킵니다. */
|
|
left: 50%;
|
|
margin-left: -120px; /* 너비의 절반만큼 왼쪽으로 이동하여 중앙에 오도록 합니다. */
|
|
transition: opacity 0.3s, visibility 0.3s;
|
|
font-size: 0.9em;
|
|
line-height: 1.5;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
/* 툴팁의 꼬리표(화살표 모양)를 만듭니다. */
|
|
.tooltip-text::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 100%; /* 툴팁 박스 바로 아래에 붙입니다. */
|
|
left: 50%;
|
|
margin-left: -5px;
|
|
border-width: 5px;
|
|
border-style: solid;
|
|
border-color: #2c3e50 transparent transparent transparent; /* 위쪽을 향한 삼각형 모양 */
|
|
}
|
|
|
|
/* 💡 핵심: 아이콘(wrapper)에 마우스를 올렸을 때, 숨겨뒀던 툴팁 텍스트를 보여줍니다. */
|
|
.tooltip-wrapper:hover .tooltip-text {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 모바일 반응형 스타일 (767px 이하) */
|
|
@media (max-width: 767px) {
|
|
.address-main-group {
|
|
flex-direction: column; /* 세로로 쌓이도록 변경 */
|
|
gap: 8px; /* 세로 간격 조정 */
|
|
}
|
|
}
|
|
|
|
/* =================== order_eclem.php 전용 스타일 끝 =================== */
|
|
|
|
/* =================================================================== */
|
|
/* =================== view.skin.php 전용 스타일 =================== */
|
|
/* =================================================================== */
|
|
|
|
#bo_v_top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
padding-bottom: 15px;
|
|
margin-bottom: 20px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
/* 2단 레이아웃 컨테이너 */
|
|
.order-view-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
/* 견적 공통 사양 (좌측) */
|
|
.order-common-specs {
|
|
flex: 1 1 400px; /* 최소 너비 400px, 늘어남, 줄어듦 */
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
background: #fdfdfd;
|
|
}
|
|
|
|
/* 개별 창 상세 사양 (우측) */
|
|
.order-individual-specs {
|
|
flex: 2 1 600px; /* 좌측보다 2배 넓게 차지하려 함, 최소 600px */
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
background: #fff;
|
|
}
|
|
|
|
/* 제목 스타일 조정 */
|
|
.order-common-specs h3,
|
|
.order-individual-specs h3 {
|
|
margin-top: 0 !important;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid #333;
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
/* 공통 사양 테이블 스타일 */
|
|
.house-info {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.house-info th {
|
|
background-color: #f9f9f9;
|
|
padding: 10px;
|
|
border-bottom: 1px solid #eee;
|
|
text-align: left;
|
|
color: #555;
|
|
font-weight: 600;
|
|
width: 30%;
|
|
}
|
|
|
|
.house-info td {
|
|
padding: 10px;
|
|
border-bottom: 1px solid #eee;
|
|
color: #333;
|
|
}
|
|
|
|
/* 개별 창 리스트형 테이블 스타일 */
|
|
.view-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.view-table th {
|
|
background-color: #f1f3f5;
|
|
padding: 12px 8px;
|
|
border-bottom: 1px solid #d1d1d1;
|
|
font-weight: bold;
|
|
color: #333;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.view-table td {
|
|
padding: 10px 8px;
|
|
border-bottom: 1px solid #eee;
|
|
text-align: center;
|
|
color: #555;
|
|
}
|
|
|
|
.view-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.view-table tr:hover td {
|
|
background-color: #f8faff;
|
|
}
|
|
|
|
/* 테이블 스크롤 처리 (내용이 많을 경우) */
|
|
.table-scroll {
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* 반응형 처리 */
|
|
@media (max-width: 1024px) {
|
|
.order-view-container {
|
|
flex-direction: column; /* 세로로 쌓음 */
|
|
}
|
|
|
|
.order-common-specs,
|
|
.order-individual-specs {
|
|
width: 100%;
|
|
flex: 1 1 auto;
|
|
box-sizing: border-box; /* 패딩 포함 너비 계산 */
|
|
}
|
|
}
|
|
|
|
/* =================================================================== */
|
|
/* =================== 관리자 상태 변경 모달 스타일 =================== */
|
|
/* =================================================================== */
|
|
|
|
.admin-status-modal {
|
|
display: none; /* 기본적으로 숨김 */
|
|
position: fixed;
|
|
z-index: 9999;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgba(0,0,0,0.5); /* 반투명 배경 */
|
|
align-items: center; /* 수직 중앙 정렬 */
|
|
justify-content: center; /* 수평 중앙 정렬 */
|
|
}
|
|
|
|
.admin-status-modal-content {
|
|
background-color: #fefefe;
|
|
padding: 25px;
|
|
border: 1px solid #ddd;
|
|
width: 90%;
|
|
max-width: 450px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
|
text-align: left;
|
|
}
|
|
|
|
.admin-status-modal-content h4 {
|
|
margin-top: 0;
|
|
margin-bottom: 20px;
|
|
font-size: 1.3em;
|
|
color: #333;
|
|
border-bottom: 1px solid #eee;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.admin-status-modal-content p {
|
|
margin-bottom: 15px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.admin-status-modal-content p strong {
|
|
color: #555;
|
|
display: inline-block;
|
|
width: 90px;
|
|
}
|
|
|
|
.admin-status-modal-content label {
|
|
font-weight: bold;
|
|
color: #444;
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.admin-status-modal-content select,
|
|
.admin-status-modal-content textarea {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.admin-status-modal-content textarea {
|
|
height: 70px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.admin-status-modal-actions {
|
|
text-align: right;
|
|
margin-top: 25px;
|
|
padding-top: 15px;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
|
|
.admin-status-modal-actions .btn_submit,
|
|
.admin-status-modal-actions .btn_cancel {
|
|
padding: 8px 15px;
|
|
font-size: 14px;
|
|
border-radius: 5px;
|
|
}
|