/* * flats 한글 대응 오버라이드 * * bexon 원본은 영문 전용(Mona Sans)이라 한글에서 두 가지 문제가 생긴다. * 1) Mona Sans 에 한글 글리프가 없어 시스템 폰트로 대체된다. * 2) SplitText 가 만든 줄 래퍼(.title-anim > div)에 overflow:hidden 이 * 걸려 있는데, 한글은 라틴 기준 줄 상자보다 높아서 위쪽이 잘린다. * * 이 파일은 반드시 main.css 뒤에 로드한다. */ :root { --tj-ff-body: "Mona Sans", "Noto Sans KR", -apple-system, "Malgun Gothic", sans-serif; --tj-ff-heading: "Mona Sans", "Noto Sans KR", -apple-system, "Malgun Gothic", sans-serif; } body { font-family: var(--tj-ff-body); word-break: keep-all; /* 한글은 단어 단위로 줄바꿈 */ } /* 제목 줄 상자를 한글이 들어갈 만큼 키운다. 값을 더 줄이면 다시 잘린다. */ .title-anim, .sec-title, .banner-title, .banner-content-2 .banner-title { line-height: 1.35; } /* SplitText 줄 래퍼. overflow:hidden 은 등장 효과에 필요하므로 두고, 위아래 여유만 준다. */ .title-anim > div { padding-top: 0.12em; padding-bottom: 0.12em; margin-top: -0.12em; margin-bottom: -0.12em; } /* 본문 가독성 */ p, .desc, .faq-text, .service-content p { line-height: 1.75; } /* 견적 계산기는 기존 스킨 마크업이라 bexon 그리드 안에서 넘칠 수 있다. */ .estimate-embed { overflow-x: auto; } .estimate-embed table { max-width: 100%; } /* 푸터 상담내역 목록 */ .footer-inquiry-list { list-style: none; margin: 0 0 24px; padding: 0; } .footer-inquiry-list li { margin-bottom: 8px; font-size: 14px; line-height: 1.5; } .footer-inquiry-list .date { opacity: 0.6; margin-right: 6px; } /* 기존 스킨 사진을 bexon 슬롯에 넣는다. 원본 비율(가로 배너)과 슬롯 비율이 달라서, 늘리지 말고 잘라 채운다. */ .banner-img img, .about-img img, .faq-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .banner-img { aspect-ratio: 507 / 653; } .about-img, .faq-img { aspect-ratio: 4 / 3; } @media (max-width: 991px) { .banner-img { aspect-ratio: 16 / 9; } } /* GSAP 텍스트 애니메이션을 쓰지 않으므로 초기 opacity:0 을 해제한다. (main.css 의 .title-anim { opacity: 0 } 을 되돌린다) */ /* GSAP 텍스트 애니메이션을 쓰지 않으므로 초기 opacity:0 을 해제한다. */ .title-anim, .text-anim, .hero-text-anim { opacity: 1; } /* WOW.js 는 .wow 요소를 visibility:hidden 으로 감춘 뒤 화면에 들어오면 보여준다. 이 페이지에서는 그 발동이 불안정해 이미지와 카드가 흐리게 남았다. 등장 효과를 포기하고 항상 보이게 한다. */ /* WOW.js 도 같은 이유로 끈다. .wow 요소를 visibility:hidden 으로 감춘 뒤 화면에 들어오면 보여주는데, 그 발동이 불안정하다. */ .wow { visibility: visible !important; animation-name: none !important; opacity: 1 !important; } /* 견적 계산기는 기존 스킨 마크업이라 폭이 좁으면 넘친다. */ .estimate-embed .estimate_section { max-width: 100%; } .estimate-embed img { max-width: 100%; height: auto; } /* 메인 비주얼 하단 썸네일. 원본이 가로 배너라 정사각 칸에 넣으면 찌그러진다. 비율을 유지한 채 잘라 채운다. */ .hero-thumb .thumb-item img { width: 100%; height: 100%; object-fit: cover; } /* 히어로 배경 위에 헤더 글씨가 묻히지 않도록 어둡게 깐다. 원본 home-02 는 어두운 이미지 전제라 오버레이가 없다. */ .tj-slider-section .slider-bg-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 30, 32, 0.92) 0%, rgba(9, 30, 32, 0.55) 45%, rgba(9, 30, 32, 0.25) 100%); } .tj-slider-section .slider-bg-image { position: absolute; inset: 0; background-size: cover; background-position: center; } /* 첨부 이미지가 없는 게시글 카드. OUT_BOARD 가 noimage.gif 를 돌려주면 bexon-ui.js 가 .no-thumb 를 단다. 그림 대신 브랜드 색 블록과 패턴을 보여준다. */ .blog-item.no-thumb .blog-thumb img, .project-item.no-thumb .project-img img { visibility: hidden; } .blog-item.no-thumb .blog-thumb, .project-item.no-thumb .project-img { position: relative; background: linear-gradient(135deg, var(--tj-color-theme-primary, #1c8a86) 0%, #0f3b3d 100%); } .blog-item.no-thumb .blog-thumb::after, .project-item.no-thumb .project-img::after { content: ""; position: absolute; inset: 0; background: url("/skin/resource/basic/dnbsoft_net/bexon/images/shape/pattern-3.svg") no-repeat center / 60% auto; opacity: 0.18; } /* --------------------------------------------------------------- 소개 섹션 bexon 은 591x639 세로 사진을 전제로 짜였다. flats 스킨 그림은 흰 배경 가로형이라 object-fit:cover 로 채우면 가운데만 확대돼 깨진다. 원본 비율 그대로 흰 카드 안에 넣고, 겹쳐 있던 통계 상자는 아래로 내린다. --------------------------------------------------------------- */ .tj-about-section-2 .about-img-area.style-2 .about-img { background-color: var(--tj-color-common-white, #fff); border-radius: 12px; overflow: hidden; } .tj-about-section-2 .about-img-area.style-2 .about-img img { width: 100%; height: auto; object-fit: contain; padding: 20px; } .tj-about-section-2 .about-img-area.style-2 .box-area { position: static; max-width: 100%; margin-top: 20px; padding: 0; background: transparent; border-radius: 0; } .tj-about-section-2 .about-img-area.style-2 .box-area::before, .tj-about-section-2 .about-img-area.style-2 .box-area::after { display: none; } .tj-about-section-2 .about-img-area.style-2 .progress-box { background-color: var(--tj-color-common-white, #fff); border-radius: 12px; } /* --------------------------------------------------------------- 서비스 목록 hover 시 배경이 브랜드 색으로 바뀌는데, 제목이 라 색을 물려받지 못하고 링크 기본색으로 남는다. --------------------------------------------------------------- */ .service-item.style-3:hover .title, .service-item.style-3:hover .title a { color: var(--tj-color-common-white, #fff); } .service-item.style-3:hover .desc { color: rgba(255, 255, 255, 0.85); } .service-reveal-bg { background-position: center; } /* FAQ 이미지도 가로 사진이라 세로 박스에서 중앙이 아닌 곳을 잡는다 */ .tj-faq-section .faq-img img { object-position: 52% center; } /* --------------------------------------------------------------- 견적 계산기 기존 스킨 마크업을 그대로 가져와서 회색 배경과 빨간 버튼이 남아 있다. 기능(스크립트/폼)은 건드리지 않고 겉모습만 bexon 쪽으로 맞춘다. --------------------------------------------------------------- */ .estimate-embed .welcom_subject { font-size: 16px; color: var(--tj-color-text-body, #55605f); margin-bottom: 16px; } .estimate-embed .estimate_box > div { background: none !important; margin: 0 !important; } .estimate-embed .estimate_box > div > div { background: var(--tj-color-common-white, #fff) !important; border-radius: 12px; padding: 30px !important; } .estimate-embed p { font-size: 15px; line-height: 1.6; color: var(--tj-color-heading-primary, #12312f); } .estimate-embed select { height: 44px; min-width: 200px; padding: 0 12px; font-size: 15px; border: 1px solid var(--tj-color-border-1, #dfe5e5); border-radius: 8px; background-color: var(--tj-color-common-white, #fff); } .estimate-embed .ds_estimate_btn_type1 { display: inline-block; background-color: var(--tj-color-theme-primary, #1c8a86) !important; border: 0 !important; color: var(--tj-color-common-white, #fff) !important; padding: 10px 22px !important; border-radius: 30px; font-size: 15px; font-weight: 500; text-decoration: none; margin-inline-start: 10px; } .estimate-embed .ds_estimate_btn_type1:hover { opacity: 0.88; } /* --------------------------------------------------------------- {HEAD} 가 마지막에 붙이는 /design/user.css 되돌리기 user.css 는 예전 스킨용 전역 리셋이다. bexon CSS 보다 뒤에 실려서 body,input,select,button { font-family:'Nanum Gothic'; font-size:13px } a { color:#777 } a:hover { color:#000; text-decoration:underline } 이 페이지 전체를 덮어썼다. 서비스 제목이 회색으로 남고 본문이 13px 로 줄어든 원인이다. skin_defined.php 를 건드리면 사이트 전체에 영향이 가므로 이 파일을 {HEAD} 뒤로 옮기고 필요한 것만 되돌린다. --------------------------------------------------------------- */ body { font-family: var(--tj-ff-body); font-size: var(--tj-fs-body, 16px); color: var(--tj-color-text-body); line-height: 1.5; } input, textarea, select, button, table, pre { font-family: inherit; font-size: inherit; } a { color: inherit; text-decoration: none; } a:hover, a:active, a:focus, a:visited { color: inherit; text-decoration: none; } /* --------------------------------------------------------------- 소개 / 견적 두 섹션이 한 덩어리로 보이던 문제 .tj-about-section-2 배경(#d8e5e5)이 본문 배경(#ecf0f0)과 거의 같아 위아래 두 판이 이어져 보이고, 각 판의 section-gap(120px) 이 가운데 빈 구멍처럼 읽혔다. 견적 쪽을 흰 판으로 분리한다. --------------------------------------------------------------- */ .tj-about-section-2.about-estimate { background-color: var(--tj-color-common-white, #fff); } /* 두 칸 높이 차가 커서 오른쪽 아래가 비어 보인다. 세로 가운데로 맞춘다. */ .tj-about-section-2 > .container > .row { align-items: center; } /* .about-img 의 height:100% 가 칸 높이로 잡히면 overflow-hidden 에 걸려 세로 이미지 아래쪽이 잘린다. 항상 원본 높이를 쓰게 한다. */ .tj-about-section-2 .about-img-area.style-2, .tj-about-section-2 .about-img-area.style-2 .about-img { height: auto !important; } /* 흰 배경 그림이 흰 카드에 놓여 카드 경계가 사라진다. */ .tj-about-section-2 .about-img-area.style-2 .about-img { border: 1px solid rgba(12, 30, 33, 0.06); box-shadow: 0 10px 30px rgba(12, 30, 33, 0.05); } .tj-about-section-2 .about-img-area.style-2 .progress-box { border: 1px solid rgba(12, 30, 33, 0.06); box-shadow: 0 10px 30px rgba(12, 30, 33, 0.05); } .tj-about-section-2.about-estimate .about-img-area.style-2 .about-img { background-color: var(--tj-color-theme-bg, #d8e5e5); } /* 푸터 바로가기: 한 항목이 한 줄에 들어가게 한다. body 에 word-break:keep-all 이 걸려 있어 "홈페이지 제작절차" 가 공백에서 접혔다. 칸을 col-xl-3 으로 넓히고 줄바꿈을 막는다. */ .footer-widget.footer-col-2 ul li a { white-space: nowrap; } /* --------------------------------------------------------------- 견적 계산기 입력칸 (jqWidgets arctic 테마) bexon 문의 폼(.contact-form .form-input)과 같은 모양으로 맞춘다. 배경 없음 + 아래쪽 점선 한 줄 + 안쪽 여백 11px 0 크기는 위젯 API 로 잡는다(main_bexon.html). 화살표와 목록은 jqWidgets 가 스프라이트 이미지로 그리므로 지우고 다시 그린다. 드롭다운 목록은 body 로 옮겨져 그려져서 .estimate-embed 밖에서 잡는다. --------------------------------------------------------------- */ .estimate-embed .jqx-widget, .estimate-embed .jqx-widget input, .estimate-embed .jqx-widget div, .jqx-listitem-state-normal, .jqx-listitem-state-hover, .jqx-listitem-state-selected { font-family: var(--tj-ff-body) !important; font-size: var(--tj-fs-body, 16px) !important; } /* 입력칸 본체 */ .estimate-embed .jqx-combobox, .estimate-embed .jqx-dropdownlist-state-normal, .estimate-embed .jqx-combobox-state-focus, .estimate-embed .jqx-dropdownlist-state-selected { background: transparent !important; border: 0 !important; border-bottom: 1px dashed var(--tj-color-border-1, #dfe5e5) !important; border-radius: 0 !important; box-shadow: none !important; } .estimate-embed .jqx-combobox-content, .estimate-embed .jqx-dropdownlist-content, .estimate-embed .jqx-action-button, .estimate-embed .jqx-fill-state-normal, .estimate-embed .jqx-fill-state-hover, .estimate-embed .jqx-fill-state-pressed { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .estimate-embed .jqx-combobox-input, .estimate-embed .jqx-input, .estimate-embed .jqx-dropdownlist-content span { background: transparent !important; border: 0 !important; color: var(--tj-color-text-body-3, #67787a) !important; padding: 11px 0 !important; } /* 콤보의 input 만은 여백을 주면 안 된다. jqxComboBox._arrange 가 marginTop = (위젯높이 - input.height())/2 로 이미 세로 가운데를 잡는데, 여기에 padding 을 얹으면 글자만 그만큼 더 내려가 화살표와 어긋난다. */ .estimate-embed .jqx-combobox-input { padding: 0 !important; } /* 화살표. jqWidgets 스프라이트를 지우고 nice-select 와 같은 꺾쇠를 그린다. */ .estimate-embed .jqx-icon-arrow-down, .estimate-embed .jqx-icon-arrow-up { background-image: none !important; position: relative; } .estimate-embed .jqx-icon-arrow-down::after, .estimate-embed .jqx-icon-arrow-up::after { content: ""; position: absolute; inset-inline-end: 2px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-bottom: 2px solid var(--tj-color-heading-primary, #12312f); border-inline-end: 2px solid var(--tj-color-heading-primary, #12312f); transform: rotate(45deg); transform-origin: 66% 66%; } .estimate-embed .jqx-icon-arrow-up::after { transform: rotate(-135deg); } /* 드롭다운 목록 */ .jqx-popup, .jqx-listbox, .jqx-listbox-container { background: var(--tj-color-common-white, #fff) !important; border: 0 !important; border-radius: 5px !important; box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11), 0 12px 30px rgba(12, 30, 33, 0.08) !important; } .jqx-listitem-state-normal, .jqx-listitem-state-group { /* 위젯이 항목 폭을 content-box 기준(목록 폭 - 좌우 여백)으로 넣는다 — border-box 면 여백만큼 두 번 줄어 선택 배경이 오른쪽 36px 를 비운다 */ box-sizing: content-box !important; padding: 0 18px !important; line-height: 40px !important; min-height: 40px !important; border: 0 !important; color: var(--tj-color-heading-primary, #12312f) !important; } .jqx-listitem-state-hover { background: #f6f6f6 !important; border: 0 !important; color: var(--tj-color-heading-primary, #12312f) !important; } .jqx-listitem-state-selected { background: var(--tj-color-theme-bg, #d8e5e5) !important; border: 0 !important; color: var(--tj-color-heading-primary, #12312f) !important; font-weight: 700 !important; } /* 질문 문구는 문의 폼 라벨처럼 */ .estimate-embed p { margin-bottom: 4px !important; } /* 합계 금액 */ .estimate-embed #estimate_calcu { border: 0 !important; width: 150px !important; font-size: 26px !important; color: var(--tj-color-theme-primary, #1e8a8a) !important; } .estimate-embed .estimate_banner_main { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 36px; } /* --------------------------------------------------------------- 견적서 발급 모달 (jqxWindow) jqWidgets 기본 회색 창을 bexon 카드처럼 흰 판 + 둥근 모서리로. 창 크기와 접기 버튼은 위젯 API 쪽에서 처리한다(main_bexon.html). --------------------------------------------------------------- */ .jqx-window-modal { background-color: #0c1e21 !important; opacity: 0.55 !important; } #estimate_window { background: var(--tj-color-common-white, #fff) !important; border: 0 !important; border-radius: 12px !important; box-shadow: 0 24px 60px rgba(12, 30, 33, 0.25) !important; overflow: hidden !important; font-family: var(--tj-ff-body) !important; } #estimate_windowHeader, #estimate_window .jqx-window-header { background: var(--tj-color-common-white, #fff) !important; border: 0 !important; border-bottom: 1px solid var(--tj-color-border-1, #dfe5e5) !important; border-radius: 0 !important; padding: 20px 24px !important; color: var(--tj-color-heading-primary, #12312f) !important; font-family: var(--tj-ff-heading) !important; font-weight: 600 !important; } #estimate_window .jqx-window-content { background: var(--tj-color-common-white, #fff) !important; border: 0 !important; padding: 24px !important; color: var(--tj-color-text-body, #364e52) !important; font-size: 15px !important; } #estimate_window .jqx-window-collapse-button { display: none !important; } /* 라벨 */ #estimate_window td span { color: var(--tj-color-heading-primary, #12312f) !important; font-weight: 500; } #estimate_window table { width: 100% !important; } #estimate_window td { padding: 8px 0 !important; height: auto !important; } #estimate_window td[align="right"] { width: 170px !important; padding-inline-end: 14px !important; white-space: nowrap; } /* 입력칸은 문의 폼과 같은 밑줄 형태 */ #estimate_window input[type="text"] { width: 100% !important; height: auto !important; background: transparent !important; border: 0 !important; border-bottom: 1px dashed var(--tj-color-border-1, #dfe5e5) !important; border-radius: 0 !important; padding: 10px 0 !important; color: var(--tj-color-text-body, #364e52) !important; box-shadow: none !important; font-family: var(--tj-ff-body) !important; font-size: 15px !important; } /* 버튼 */ #estimate_window #estimate_ok, #estimate_window #estimate_cancel { width: auto !important; min-width: 96px; height: auto !important; padding: 11px 22px !important; border-radius: 30px !important; font-size: 15px !important; font-family: var(--tj-ff-body) !important; box-shadow: none !important; background: var(--tj-color-theme-primary, #1e8a8a) !important; border: 1px solid var(--tj-color-theme-primary, #1e8a8a) !important; color: var(--tj-color-common-white, #fff) !important; cursor: pointer; } #estimate_window #estimate_cancel { background: transparent !important; border-color: var(--tj-color-border-1, #dfe5e5) !important; color: var(--tj-color-heading-primary, #12312f) !important; margin-inline-start: 8px; } /* --------------------------------------------------------------- 오른쪽 상담 슬라이드 패널 (#pocp1 / pulloutpanel.css) 2010년대 스킨 그대로라 검정 배경 + 회색 입력칸 + 글자 그림자다. 기능(캐러셀/폼)은 그대로 두고 색과 크기만 bexon 에 맞춘다. 폭을 240 -> 320 으로 넓히면서 숨김 위치(right:-240)와 손잡이 위치 (btn_active right:260)도 같이 옮겨야 한다. 캐러셀 폭은 JS 가 .pocp 실제 폭으로 계산하므로 따로 손댈 것이 없다. --------------------------------------------------------------- */ .pocp_left, .pocp_right { font-family: var(--tj-ff-body) !important; font-size: 14px !important; line-height: 1.6 !important; } .pocp_right { right: -320px !important; } .pocp_right.pocp_show { right: 0 !important; } .pocp { width: 320px !important; background: var(--tj-color-theme-dark, #0c1e21) !important; color: rgba(255, 255, 255, 0.72) !important; text-shadow: none !important; box-shadow: -12px 0 40px rgba(12, 30, 33, 0.25) !important; } .pocp .pocp_content { width: 272px !important; padding: 0 24px !important; } /* 손잡이 */ .pocp_button { background: var(--tj-color-theme-primary, #1e8a8a) !important; color: var(--tj-color-common-white, #fff) !important; text-shadow: none !important; box-shadow: none !important; border-radius: 8px 0 0 8px !important; padding: 4px 14px !important; font-family: var(--tj-ff-body) !important; font-size: 14px !important; } .pocp_button i { color: var(--tj-color-common-white, #fff) !important; } .pocp_button_right.btn_active { right: 340px !important; } #pocp_overlay { background: rgba(12, 30, 33, 0.55) !important; } /* 본문 */ .pocp h1, .pocp h2, .pocp h3, .pocp h4, .pocp h5, .pocp h6 { color: var(--tj-color-common-white, #fff) !important; font-family: var(--tj-ff-heading) !important; letter-spacing: normal !important; text-shadow: none !important; line-height: 1.35 !important; } .pocp p, .pocp li, .pocp label { color: rgba(255, 255, 255, 0.72) !important; text-shadow: none !important; } .pocp a { color: var(--tj-color-common-white, #fff) !important; } .pocp .pocp_icons li:hover { background: rgba(255, 255, 255, 0.06) !important; } /* 폼 */ .pocp .pocp_form label { font-family: var(--tj-ff-body) !important; font-size: 13px !important; } .pocp .form_element { box-sizing: border-box; width: 100% !important; margin: 8px 0 16px 0 !important; padding: 11px 14px !important; background-color: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 8px !important; color: var(--tj-color-common-white, #fff) !important; box-shadow: none !important; font-family: var(--tj-ff-body) !important; font-size: 14px !important; } .pocp .form_element::placeholder { color: rgba(255, 255, 255, 0.4); } .pocp .form_element:hover, .pocp .form_element:focus { background-color: rgba(255, 255, 255, 0.14) !important; border-color: var(--tj-color-theme-primary, #1e8a8a) !important; box-shadow: none !important; outline: none; } .pocp .pocp_form .required { color: var(--tj-color-theme-primary, #1e8a8a) !important; } .pocp .pocp_form .button { background: var(--tj-color-theme-primary, #1e8a8a) !important; border-radius: 30px !important; padding: 11px 24px !important; text-shadow: none !important; box-shadow: none !important; font-family: var(--tj-ff-body) !important; font-size: 14px !important; } .pocp .pocp_form .button:hover, .pocp .pocp_form .button:focus { background-color: #17706f !important; } .pocp .pocp_form .error { background: #c0503a !important; border-radius: 8px !important; box-sizing: border-box; width: 100% !important; padding: 10px 14px !important; } .pocp .pocp_form .success { background: var(--tj-color-theme-primary, #1e8a8a) !important; border-radius: 8px !important; box-sizing: border-box; width: 100% !important; padding: 10px 14px !important; } /* 푸터 브랜드 문구 */ .footer-text .brand-motto { margin-bottom: 14px; } .footer-text .brand-motto strong { display: block; font-family: var(--tj-ff-heading); font-size: 16px; font-weight: 600; letter-spacing: 0.02em; color: var(--tj-color-common-white, #fff); margin-bottom: 4px; } /* ── 텍스트 워드마크 (FLATS 로고 이미지 대체) ────────────────────── logo.png / foot_logo.png 은 옛 FLATS 그림이라 걷어냈다. 기본값은 밝은 배경용 — DNB 빨강 + SOFT 남색. 어두운 배경(히어로 위 헤더 / 햄버거 패널 / 푸터)에서는 SOFT 를 흰색으로 뒤집는다. */ .brand-wordmark { display: inline-block; font-family: var(--tj-ff-heading); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; } .brand-wordmark .wm-a { color: #d61f27; } .brand-wordmark .wm-b { color: #22334a; } /* max-width 는 이미지 기준 값이라 글자가 줄바꿈된다. */ .site_logo .logo.brand-wordmark, .hamburger_logo .mobile_logo.brand-wordmark { max-width: none; width: auto; } .footer-logo { max-width: none; } /* 어두운 배경 */ .header-2.header-absolute .brand-wordmark .wm-b, .hamburger_logo .brand-wordmark .wm-b, .footer-logo .brand-wordmark .wm-b { color: var(--tj-color-common-white, #fff); } .footer-logo .brand-wordmark { font-size: 26px; } @media (max-width: 767px) { .brand-wordmark { font-size: 24px; } } /* 콤보박스는 포커스 때 input 전체를 선택한다(focus -> _setSelection(0,len)). 읽기 전용 칸이라 파란/검은 하이라이트만 보이므로 감춘다. */ .estimate-embed .jqx-combobox-input::-moz-selection, .estimate-embed .jqx-input::-moz-selection { background: transparent; color: inherit; } .estimate-embed .jqx-combobox-input::selection, .estimate-embed .jqx-input::selection { background: transparent; color: inherit; } .estimate-embed .jqx-combobox-input { caret-color: transparent; cursor: pointer; } /* 글자 어디를 눌러도 열리므로 커서를 손모양으로 */ .estimate-embed .jqx-combobox-content, .estimate-embed .jqx-combobox-state-normal { cursor: pointer; } /* 밑줄. jqxDropDownList 의 호스트는 jqx-dropdownlist-state-normal 과 jqx-fill-state-normal 을 함께 달고 나오는데, 뒤에 오는 .estimate-embed .jqx-fill-state-normal { border:0 } 이 특정도가 같아 border-bottom 을 지워버린다(hover/pressed 도 마찬가지). 클래스 싸움 대신 호스트 id 로 걸어 항상 이기게 한다. */ .estimate-embed #DS_ESTIMATE, .estimate-embed #DS_HOSTING, .estimate-embed #DS_digits, .estimate-embed #DS_digits2 { border-bottom: 1px dashed var(--tj-color-border-1, #dfe5e5) !important; } /* --------------------------------------------------------------- 옛 스킨 서브 페이지(.ds_suba_* / .page_4_* / .ds_advice)를 bexon 안에 넣고 꾸미기. 본문 마크업은 한 글자도 건드리지 않고 CSS 로만 한다. user.css 는 HEAD 자리에서 먼저 실리므로 이 파일이 이긴다. 옛 레이아웃은 740px 고정폭 기준이라 폭을 넓히면 어긋난다. 어긋나는 곳은 고정 px 를 걷어내고 폭에 안 묶이는 방식으로 바꿨다. - 이미지 + 글 : 글 상자를 float:none; width:auto; overflow:hidden 으로. 떠 있는 이미지 옆으로 자연히 흐른다. - 2단 비교 : calc(50% - 12px) 두 장 + 가운데 여백. 장식용 이미지 둘은 지우고 CSS 로 대신 그린다. 폭이 고정이라 못 넓힌다. - suba_020_img_04.jpg 1x165 세로 구분선 - suba_020_img_07.jpg 737x30 가로 구분선 --------------------------------------------------------------- */ /* ----- 1. 페이지 판 ----- */ .legacy-page { padding: 90px 0 110px; background: var(--tj-color-grey-1, #ecf0f0); } @media (max-width: 991px) { .legacy-page { padding: 60px 0 70px; } } /* 본문 폭은 부트스트랩 칸(col-12)이 잡는다. 다른 쪽들과 같이 container 폭(1296)을 다 쓴다. bexon 데모에는 고정폭 래퍼가 없어서 옛 .ds_sub_con(width:740px)을 걷어냈다. 여기서는 글꼴만 정한다. */ .legacy-page .legacy-body { font-family: var(--tj-ff-body); font-size: 16px; line-height: 1.85; color: var(--tj-color-text-body-3, #67787a); } /* 페이지 맨 위 제목은 위쪽 .tj-page-header 와 겹친다. 그것만 감춘다. */ .legacy-page .legacy-body > .view_purple_title_bg2:first-child { display: none; } /* ----- 2. 카드 ----- 최상위 덩어리를 흰 카드로 올린다. 이게 "위에서 아래로 나열" 을 깬다. */ .legacy-page .ds_suba_010_01, .legacy-page .ds_suba_020_01, .legacy-page .ds_suba_050_01, .legacy-page .ds_cross, .legacy-page .page_4_number, .legacy-page .ds_advice ul li { background: var(--tj-color-common-white, #fff); border-radius: 14px; padding: 44px 46px; margin-bottom: 24px; box-shadow: 0 1px 2px rgba(12, 30, 33, 0.04), 0 8px 28px rgba(12, 30, 33, 0.05); overflow: hidden; } @media (max-width: 767px) { .legacy-page .ds_suba_010_01, .legacy-page .ds_suba_020_01, .legacy-page .ds_suba_050_01, .legacy-page .ds_cross, .legacy-page .page_4_number, .legacy-page .ds_advice ul li { padding: 28px 22px; } } /* 절차 · 안내 카드는 살짝 들어올린다 */ .legacy-page .page_4_number, .legacy-page .ds_advice ul li { transition: transform 0.25s ease, box-shadow 0.25s ease; } .legacy-page .page_4_number:hover, .legacy-page .ds_advice ul li:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(12, 30, 33, 0.04), 0 14px 34px rgba(12, 30, 33, 0.09); } /* .ds_advice 는 카드들을 담기만 한다 */ .legacy-page .ds_advice { background: none; padding: 0; } /* ----- 3. 소제목 ----- 옛 배경이미지 불릿(location_bg.png 5x9) 대신 브랜드색 막대 + 밑선. */ .legacy-page .ds_suba_010_bg, .legacy-page .ds_suba_010_bg2, .legacy-page .ds_suba_020_bg, .legacy-page .ds_suba_020_bg2, .legacy-page .ds_cross_bg, .legacy-page .ds_cross_bg2, .legacy-page .view_purple_title_bg2 { background: none; position: relative; padding: 0 0 18px 20px; margin: 0 0 26px; font-family: var(--tj-ff-heading); font-size: 26px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; color: var(--tj-color-heading-primary, #0c1e21); border-bottom: 1px solid var(--tj-color-grey-1, #ecf0f0); } .legacy-page .ds_suba_010_bg::before, .legacy-page .ds_suba_010_bg2::before, .legacy-page .ds_suba_020_bg::before, .legacy-page .ds_suba_020_bg2::before, .legacy-page .ds_cross_bg::before, .legacy-page .ds_cross_bg2::before, .legacy-page .view_purple_title_bg2::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.32em; width: 5px; height: 0.86em; border-radius: 3px; background: var(--tj-color-theme-primary, #1e8a8a); } @media (max-width: 767px) { .legacy-page .ds_suba_010_bg, .legacy-page .ds_suba_010_bg2, .legacy-page .ds_suba_020_bg, .legacy-page .ds_suba_020_bg2, .legacy-page .ds_cross_bg, .legacy-page .ds_cross_bg2, .legacy-page .view_purple_title_bg2 { font-size: 21px; } } /* 제목 아래 작은 부제 */ .legacy-page .ds_suba_010_bg span, .legacy-page .ds_suba_020_bg span, .legacy-page .ds_suba_020_bg2 span { display: block; margin-top: 8px; font-size: 15px !important; font-weight: 400; color: var(--tj-color-text-body-3, #67787a); } /* 호스팅 비교는 제목 안에 그림이 하나 들어 있다 */ .legacy-page .ds_suba_020_bg p { margin: 22px 0 0 !important; text-align: center; } .legacy-page strong { color: var(--tj-color-heading-primary, #0c1e21); font-weight: 700; } .legacy-page .ds_suba_010_01 p, .legacy-page .ds_suba_020_01 p, .legacy-page .ds_suba_050_01 p { margin-inline-start: 0; } /* ----- 4. 목록 ----- 옛 불릿은 no-repeat 20px 6px 처럼 오프셋이 고정이라 글자를 키우면 어긋난다. */ .legacy-page ul { list-style: none; margin: 22px 0 8px; padding: 0; } .legacy-page ul li { background: none; position: relative; padding-left: 22px; line-height: 1.85; margin-bottom: 10px; } .legacy-page ul li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 0.78em; width: 6px; height: 6px; border-radius: 50%; background: var(--tj-color-theme-primary, #1e8a8a); } /* ----- 5. 이미지 ----- */ .legacy-page img { max-width: 100%; height: auto; } .legacy-page .ds_suba_010_01_image { margin: 34px 0 6px; text-align: center; } .legacy-page .ds_suba_010_01_image img { border-radius: 12px; box-shadow: 0 6px 24px rgba(12, 30, 33, 0.08); } /* ----- 6. 2단 비교 (page_2) ----- 왼쪽 타사 = 회색, 오른쪽 디엔비소프트 = 브랜드색. 대비가 있어야 비교로 읽힌다. */ .legacy-page .ds_suba_020_product { background: none; margin: 30px 0 10px; } .legacy-page .ds_suba_020_product_size, .legacy-page .ds_suba_020_plats, .legacy-page .ds_suba_020_hosting, .legacy-page .ds_suba_020_hosting2 { box-sizing: border-box; width: calc(50% - 12px); margin: 0; padding: 26px 24px; border-radius: 12px; } .legacy-page .ds_suba_020_product_size, .legacy-page .ds_suba_020_hosting2 { float: left; background: var(--tj-color-grey-1, #ecf0f0); } .legacy-page .ds_suba_020_plats, .legacy-page .ds_suba_020_hosting { float: right; background: var(--tj-color-theme-bg, #d8e5e5); box-shadow: inset 0 3px 0 var(--tj-color-theme-primary, #1e8a8a); } .legacy-page .ds_suba_020_product_size ul, .legacy-page .ds_suba_020_plats ul { padding: 0; margin-bottom: 0; } .legacy-page .ds_suba_020_product_size2, .legacy-page .ds_suba_020_plats2 { text-align: center; margin-bottom: 14px; } .legacy-page .ds_suba_020_hosting, .legacy-page .ds_suba_020_hosting2 { margin-top: 26px; } /* ----- 7. 이미지 + 글 (page_2 검색 / page_4 절차 / page_5 안내) ----- 글 상자의 고정 px 폭(516 / 570 / 550)을 걷어낸다. 뜬 이미지 옆으로 흐른다. */ .legacy-page .ds_suba_020_search, .legacy-page .page_4_number_tpl01, .legacy-page .ds_advice .ds_advice_img { float: left; margin: 0 30px 16px 0; } .legacy-page .ds_suba_020_search2, .legacy-page .page_4_number_tpl02, .legacy-page .ds_advice .ds_advice_text { float: none; width: auto; margin: 0; padding: 0; overflow: hidden; line-height: 1.85; } .legacy-page .ds_advice ul li { height: auto; padding-left: 46px; } .legacy-page .ds_advice ul li::before { content: none; } /* 절차 단계 제목 · 안내 제목 */ .legacy-page .page_4_number_tpl02 span, .legacy-page .ds_advice .ds_advice_text p { display: block; margin: 0 0 12px; font-family: var(--tj-ff-heading); font-size: 19px !important; font-weight: 700 !important; line-height: 1.5; letter-spacing: -0.02em !important; text-align: left !important; color: #c6071b; } /* ----- 8. 구분선 · 콜아웃 · 버튼 ----- */ .legacy-page .ds_suba_020_bg3 { background: none; height: 0; margin: 38px 0; border-top: 1px solid var(--tj-color-grey-1, #ecf0f0); } .legacy-page .ds_suba_020_hosting3 { background: var(--tj-color-theme-bg, #d8e5e5); border-radius: 14px; padding: 34px 40px; margin: 0 0 24px; } .legacy-page .ds_suba_020_hosting3 p { margin: 0; text-align: center; } .legacy-page .ds_suba_020_return { margin: 26px 0 0; padding: 18px 22px; border-radius: 10px; background: var(--tj-color-theme-bg, #d8e5e5); color: var(--tj-color-heading-primary, #0c1e21); font-size: 17px; } .legacy-page .ds_cross_text2, .legacy-page .ds_cross_text4 { margin: 22px 0 0; } .legacy-page .ds_cross_text2 .ds_cross_text3 { margin: 22px 0 0; line-height: 1.85; } /* 제작신청하기. jqxButton 이 회색 그라디언트를 씌운다. */ .legacy-page #qna_go, .legacy-page .button1 { background: var(--tj-color-theme-primary, #1e8a8a) !important; background-image: none !important; border: 0 !important; border-radius: 50px !important; color: var(--tj-color-common-white, #fff) !important; font-family: var(--tj-ff-heading) !important; font-size: 16px !important; font-weight: 600 !important; width: auto !important; height: auto !important; padding: 15px 34px !important; box-shadow: none !important; text-shadow: none !important; transition: background-color 0.25s ease; } .legacy-page #qna_go:hover, .legacy-page .button1:hover { background: var(--tj-color-theme-dark, #0c1e21) !important; } /* ----- 9. 좁은 화면 ----- */ @media (max-width: 767px) { .legacy-page .ds_suba_020_product_size, .legacy-page .ds_suba_020_plats, .legacy-page .ds_suba_020_hosting, .legacy-page .ds_suba_020_hosting2, .legacy-page .ds_suba_020_search, .legacy-page .page_4_number_tpl01, .legacy-page .ds_advice .ds_advice_img { float: none; width: 100%; margin-inline: 0; text-align: center; } .legacy-page .ds_suba_020_plats, .legacy-page .ds_suba_020_hosting { margin-top: 16px; } .legacy-page .ds_advice ul li { padding-left: 22px; } .legacy-page .ds_suba_020_hosting3 { padding: 24px 22px; } } /* --------------------------------------------------------------- 목록 페이지 공용 (/instance, /application) 카드는 bexon 데모 /portfolios 와 같은 .project-item 을 쓴다. 그건 bexon 이 이미 스타일을 갖고 있으니 여기서는 손대지 않는다. 유형 탭 · 분류 필터 · 페이징 · 검색만 맞춘다. --------------------------------------------------------------- */ .instance-page, .application-page { background: var(--tj-color-grey-1, #ecf0f0); } /* 유형 탭 */ .grid-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; } .grid-tabs a { padding: 13px 30px; border-radius: 50px; background: var(--tj-color-common-white, #fff); color: var(--tj-color-text-body-3, #67787a); font-family: var(--tj-ff-heading); font-size: 16px; font-weight: 600; line-height: 1; transition: background-color 0.25s ease, color 0.25s ease; } .grid-tabs a:hover { color: var(--tj-color-theme-primary, #1e8a8a); } .grid-tabs a.active { background: var(--tj-color-theme-dark, #0c1e21); color: var(--tj-color-common-white, #fff); } /* 분류 필터 */ .grid-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 20px; } .grid-filters button { padding: 8px 18px; border: 1px solid transparent; border-radius: 50px; background: none; color: var(--tj-color-text-body-3, #67787a); font-family: var(--tj-ff-body); font-size: 15px; line-height: 1.4; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .grid-filters button:hover { color: var(--tj-color-theme-primary, #1e8a8a); } .grid-filters button.active { border-color: var(--tj-color-theme-primary, #1e8a8a); color: var(--tj-color-theme-primary, #1e8a8a); font-weight: 600; } .grid-tabs + .row, .grid-filters + .row { margin-top: 26px; } /* 썸네일 비율. 게시글 이미지는 홈페이지 시안이라 세로가 길다. 위쪽을 보여주는 편이 어느 시안인지 알아보기 쉽다. */ .instance-page .project-img, .application-page .project-img { aspect-ratio: 4 / 3; } .instance-page .project-img img, .application-page .project-img img { object-position: top center; } /* 카드는 링크가 아니라 그 자리에서 펼치는 버튼이다 */ .instance-page .grid-cell .project-item { cursor: pointer; outline: none; } .instance-page .grid-cell .project-item .title { color: var(--tj-color-heading-primary, #0c1e21); } .instance-page .grid-cell.is-open .project-item { box-shadow: 0 0 0 2px var(--tj-color-theme-primary, #1e8a8a); } .instance-page .grid-cell.is-open .project-btn { background: var(--tj-color-theme-primary, #1e8a8a); color: var(--tj-color-common-white, #fff); transform: rotate(90deg); } .instance-page .project-btn { transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease; } /* ----- 그 자리에서 펼치는 상세 패널 ----- 원본 colio 의 placement:inside 와 같다. 누른 카드가 속한 줄 끝에 전체 폭 패널을 끼워 넣는다. */ .ip-panel { margin-top: 4px; } .ip-panel-inner { position: relative; display: flex; flex-wrap: wrap; gap: 34px; padding: 42px 44px; border-radius: 14px; background: var(--tj-color-theme-dark, #0c1e21); color: var(--tj-color-text-body-5, rgba(255, 255, 255, 0.8)); } .ip-panel .ip-content { display: contents; } .ip-panel .ip-body { flex: 1 1 380px; min-width: 0; } .ip-panel .ip-title { margin: 0 0 16px; font-family: var(--tj-ff-heading); font-size: 26px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; color: var(--tj-color-common-white, #fff); } .ip-panel .ip-desc { font-size: 16px; line-height: 1.85; } .ip-panel .ip-desc img { max-width: 100%; height: auto; border-radius: 8px; } .ip-panel .ip-visit { display: inline-block; margin-top: 22px; padding: 14px 30px; border-radius: 50px; background: var(--tj-color-theme-primary, #1e8a8a); color: var(--tj-color-common-white, #fff); font-family: var(--tj-ff-heading); font-size: 15px; font-weight: 600; line-height: 1; transition: background-color 0.25s ease; } .ip-panel .ip-visit:hover { background: var(--tj-color-common-white, #fff); color: var(--tj-color-theme-dark, #0c1e21); } .ip-panel .ip-shots { flex: 0 1 300px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px; } .ip-panel .ip-shots a { flex: 0 0 auto; width: 88px; height: 88px; overflow: hidden; border-radius: 8px; background: var(--tj-color-theme-dark-2, #18292c); } .ip-panel .ip-shots img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.4s ease; } .ip-panel .ip-shots a:hover img { transform: scale(1.08); } .ip-panel .ip-shots:empty { display: none; } /* 닫기 */ .ip-panel .ip-close { position: absolute; top: 16px; inset-inline-end: 16px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); cursor: pointer; transition: background-color 0.2s ease; } .ip-panel .ip-close:hover { background: var(--tj-color-theme-primary, #1e8a8a); } .ip-panel .ip-close::before, .ip-panel .ip-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; background: var(--tj-color-common-white, #fff); } .ip-panel .ip-close::before { transform: translate(-50%, -50%) rotate(45deg); } .ip-panel .ip-close::after { transform: translate(-50%, -50%) rotate(-45deg); } @media (max-width: 767px) { .ip-panel-inner { padding: 28px 22px; gap: 22px; } .ip-panel .ip-title { font-size: 21px; } .ip-panel .ip-shots a { width: 72px; height: 72px; } } .application-page .project-price { margin-top: 12px; font-family: var(--tj-ff-heading); font-size: 19px; font-weight: 700; color: var(--tj-color-theme-primary, #1e8a8a); } .grid-empty { padding: 90px 0; text-align: center; color: var(--tj-color-text-body-3, #67787a); } /* 페이징. CMS 가 옛 마크업을 그대로 뱉으므로 bexon 모양(.tj-pagination 동그라미)으로 덮는다. 엔진 PAGEING(div.pageing): 처음·이전 = 링크 없는 gif(첫 쪽) 또는 a>img, 구분자 bar.gif, 지금 쪽 strong(인라인 margin), 다른 쪽 a>span(인라인 12px·margin), 다음·끝 a>img. 2026-10-13 사용자 요청(포트폴리오 페이징 모양이 이상함): gif 화살표·구분선을 숨기고 화살표는 CSS 꺾쇠로, 인라인 글자 크기·여백은 !important 로 덮는다. 링크 없는 처음·이전 gif(첫 쪽)는 누를 수 없어 숨긴다. */ .cms-pagination .pageing { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; } .cms-pagination a, .cms-pagination strong, .cms-pagination > span { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 !important; padding: 0; border: 1px solid var(--tj-color-border-1, #e1e1e1); border-radius: 50%; background: var(--tj-color-common-white, #fff); color: var(--tj-color-heading-primary, #0c1e21); font-family: var(--tj-ff-heading); font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .cms-pagination a span { margin: 0 !important; font-size: 16px !important; font-weight: 600 !important; } .cms-pagination a:hover { border-color: var(--tj-color-theme-primary, #1e8a8a); background: var(--tj-color-theme-primary, #1e8a8a); color: var(--tj-color-common-white, #fff); } .cms-pagination strong { border-color: var(--tj-color-theme-dark, #0c1e21); background: var(--tj-color-theme-dark, #0c1e21); color: var(--tj-color-common-white, #fff); } .cms-pagination img { display: none; } /* 화살표 — 이전·다음 ‹ ›, 처음·끝 « » (gif 대신 글자. 이스케이프는 이 파일이 쓰이는 경로에서 깨져 글자를 그대로 넣는다) */ .cms-pagination a:has(> img[alt="이전"])::before { content: "‹"; } .cms-pagination a:has(> img[alt="다음"])::before { content: "›"; } .cms-pagination a:has(> img[alt="처음으로"])::before { content: "«"; } .cms-pagination a:has(> img[alt="끝으로"])::before { content: "»"; } .cms-pagination a:has(> img)::before { font-size: 22px; line-height: 1; margin-top: -2px; } @media (max-width: 575px) { .cms-pagination .pageing { gap: 6px; } .cms-pagination a, .cms-pagination strong { width: 40px; height: 40px; font-size: 15px; } .cms-pagination a span { font-size: 15px !important; } } /* 검색 */ .grid-search { margin-top: 40px; } .grid-search form { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; } .grid-search input[type="text"] { width: 240px; height: 46px; padding: 0 16px; border: 1px solid var(--tj-color-border-1, #c9d1d1); border-radius: 8px; background: var(--tj-color-common-white, #fff); font-family: var(--tj-ff-body); font-size: 15px; color: var(--tj-color-heading-primary, #0c1e21); } .grid-search input[type="text"]:focus { outline: none; border-color: var(--tj-color-theme-primary, #1e8a8a); } .grid-search button { height: 46px; padding: 0 26px; border: 0; border-radius: 8px; background: var(--tj-color-theme-primary, #1e8a8a); color: var(--tj-color-common-white, #fff); font-family: var(--tj-ff-heading); font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color 0.25s ease; } .grid-search button:hover { background: var(--tj-color-theme-dark, #0c1e21); } .grid-search .jqx-combobox, .grid-search .jqx-combobox-state-normal, .grid-search .jqx-combobox-content, .grid-search .jqx-fill-state-normal { background: var(--tj-color-common-white, #fff) !important; border-color: var(--tj-color-border-1, #c9d1d1) !important; border-radius: 8px !important; box-shadow: none !important; } .grid-search .jqx-combobox-input { background: transparent !important; border: 0 !important; padding: 0 !important; color: var(--tj-color-heading-primary, #0c1e21) !important; font-size: 15px !important; cursor: pointer; } .grid-search .jqx-combobox-input::selection { background: transparent; } #page-nav { display: none; } #infscr-loading { margin: 24px auto; padding: 10px; text-align: center; color: var(--tj-color-text-body-3, #67787a); } @media (max-width: 767px) { .grid-tabs a { padding: 11px 20px; font-size: 15px; } .grid-search input[type="text"] { width: 100%; } } /* --------------------------------------------------------------- 서브 페이지 상단 - 밝은 사진 위에서 흰 글씨가 묻히는 것 .tj-page-header 는 theme-dark 바탕에 background-blend-mode: luminosity 로 사진을 얹는다. 원본 데모 사진은 어두워서 괜찮지만, 우리 스킨 사진 (slide-show*.jpg)은 밝아서 결과도 밝게 나온다. 제목·빵부스러기는 물론 그 위에 겹치는 헤더 메뉴까지 안 보인다. bexon 의 .page-header-overlay 와 같은 방식(z-index:-1)으로 어두운 막을 한 겹 깐다. .tj-page-header 가 z-index:2 로 쌓임 맥락을 만들기 때문에 -1 은 자기 배경 위, 자식 콘텐츠 아래에 놓인다. --------------------------------------------------------------- */ .tj-page-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 30, 33, 0.82) 0%, rgba(12, 30, 33, 0.62) 55%, rgba(12, 30, 33, 0.72) 100%); } /* --------------------------------------------------------------- 템플릿 상세 (/application_detail) - shop/goods_view_bexon.html 본문 마크업과 JS 훅은 원본 그대로다. 여기서 모양만 잡는다. 옛 스킨 폭(view_top_left 500px 등)을 걷어내고 부트스트랩 칸에 맡긴다. --------------------------------------------------------------- */ .goods-view-page { background: var(--tj-color-grey-1, #ecf0f0); } .goods-view-page .ds_mall, .goods-view-page .view_top_left, .goods-view-page .view_top_right, .goods-view-page .view_con01 { width: auto !important; float: none !important; margin: 0; padding: 0; background: none; border: 0; } .goods-view-page .row.goods-top { row-gap: 24px; align-items: stretch; } /* 왼쪽 - 시안 이미지 */ .goods-view-page .goods-shot { height: 100%; padding: 28px; background: var(--tj-color-common-white, #fff); border-radius: 14px; box-shadow: 0 1px 2px rgba(12, 30, 33, 0.04), 0 8px 28px rgba(12, 30, 33, 0.05); text-align: center; } /* 시안 자리는 크기를 못박는다. 원본 비율이 0.82~1.43 으로 제각각이라 그대로 두면 690px 폭에서 높이가 566~988 로 널뛰고 상품마다 카드 길이가 달라졌다. 폭은 절대 자르지 않는다. 홈페이지 갈무리라 좌우가 잘리면 화면이 반쪽 난다. 그래서 object-fit:cover 를 쓰지 않고, 폭을 꽉 채운 뒤 넘치는 아래쪽만 프레임에서 잘라낸다. */ .goods-view-page .dsshop_big { height: 640px; overflow: hidden; border-radius: 10px; background: var(--tj-color-common-white, #fff); } .goods-view-page .dsshop_big img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; border-radius: 0; } .goods-view-page .dsshop_detail_btn { margin-top: 22px; } .goods-view-page .sample_btn_type1 { display: inline-block; padding: 14px 32px; border-radius: 50px; background: var(--tj-color-theme-dark, #0c1e21); color: var(--tj-color-common-white, #fff) !important; font-family: var(--tj-ff-heading); font-size: 15px; font-weight: 600; line-height: 1; transition: background-color 0.25s ease; } .goods-view-page .sample_btn_type1:hover { background: var(--tj-color-theme-primary, #1e8a8a); } /* 오른쪽 - 상품 정보 */ /* 왼쪽 시안 카드가 고정 크기(746x761)라 오른쪽도 같은 높이로 채운다. 패널 안 내용은 660 남짓이라 100px 쯤 남는데, SNS · 버튼 줄을 바닥에 붙여 그 자리를 위로 넘긴다. 시안 프레임을 고정하기 전에는 이 차이가 400px 이 넘어 빈 칸으로 보였다. */ .goods-view-page .goods-panel { height: 100%; display: flex; flex-direction: column; padding: 34px 32px; background: var(--tj-color-common-white, #fff); border-radius: 14px; box-shadow: 0 1px 2px rgba(12, 30, 33, 0.04), 0 8px 28px rgba(12, 30, 33, 0.05); } .goods-view-page .goods-panel h4 { margin: 0 0 18px; font-family: var(--tj-ff-heading); font-size: 28px; font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; color: var(--tj-color-heading-primary, #0c1e21); text-align: left; } .goods-view-page .view_price { list-style: none; margin: 0 0 24px; padding: 0 0 22px; border-bottom: 1px solid var(--tj-color-grey-1, #ecf0f0); color: var(--tj-color-text-body-3, #67787a); font-size: 16px; } .goods-view-page .view_price strong { font-family: var(--tj-ff-heading); font-size: 30px; font-weight: 700; color: var(--tj-color-theme-primary, #1e8a8a); } .goods-view-page .goods-panel dl { display: flex; align-items: center; gap: 14px; margin: 0; padding: 13px 0; border-bottom: 1px solid var(--tj-color-grey-1, #ecf0f0); font-size: 15px; } .goods-view-page .goods-panel dt { flex: 0 0 96px; margin: 0; color: var(--tj-color-text-body-3, #67787a); font-weight: 500; } .goods-view-page .goods-panel dd { margin: 0; color: var(--tj-color-heading-primary, #0c1e21); } /* 옵션·추가상품은 dt 가 위, dd 가 아래로 가도록 인라인 style 을 덮는다 */ .goods-view-page .goods-panel dl:has(> dd .option_new) { display: block; } .goods-view-page .goods-panel .option-cls th, .goods-view-page .goods-panel .option_new th { text-align: left; padding: 6px 10px 6px 0; font-weight: 500; color: var(--tj-color-text-body-3, #67787a); } .goods-view-page .goods-panel .option_new td { padding: 6px 0; } /* 합계 금액. {PRICE_BOX} 는

안에

를 뱉는다. HTML 파서가

를 먼저 닫고 뒤에 빈

를 또 만들기 때문에 빈

가 둘 생긴다. 그것들을 상자로 그리면 회색 띠 두 줄이 된다. 빈 것은 감추고 안쪽 div 를 직접 꾸민다. */ .goods-view-page .goods-panel > p:empty { display: none; } /* common.css 의 `.total{width:95%;height:29px}` 이 상자를 다른 줄보다 23px 좁게 만들고, 안의 `#dvTotQtyPrc.right` 는 float:right 라 부모 높이를 0 으로 만들었다. 그래서 금액 글자가 회색 상자 밖으로 흘렀다. flow-root 로 BFC 를 만들어 뜬 자식을 도로 품게 한다. */ .goods-view-page .goods-panel .total { display: flow-root; width: auto !important; height: auto !important; margin: 20px 0 0; padding: 18px 20px; border: 0; border-radius: 10px; background: var(--tj-color-theme-bg, #d8e5e5); color: var(--tj-color-heading-primary, #0c1e21) !important; font-family: var(--tj-ff-heading); font-size: 18px !important; font-weight: 700; line-height: 1.4; text-align: right; } /* 합계 줄은 라벨을 왼쪽, 금액을 오른쪽에 붙여 상자를 채운다. goods_view.php 가 bexon 스킨일 때만 span 두 개로 나눠 보낸다. common.css 의 `.total .right span{display:block;float:left}` 을 푼다. */ .goods-view-page .goods-panel .total #totOrdPrcAll { width: 100%; } .goods-view-page .goods-panel .total .right { float: none !important; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: inherit; } .goods-view-page .goods-panel .total .right span { display: inline-block; float: none !important; margin: 0 !important; } .goods-view-page .goods-panel .total .total-label { font-size: 15px !important; font-weight: 600; color: var(--tj-color-text-body-3, #67787a); } .goods-view-page .goods-panel .total .total-amount { font-family: var(--tj-ff-heading); font-size: 26px !important; font-weight: 800; line-height: 1.1; color: var(--tj-color-theme-primary, #1e8a8a); } .goods-view-page .goods-panel .total .total-amount em { font-style: normal; font-size: 16px; font-weight: 700; margin-inline-start: 3px; } /* common.css 가 height:20px; overflow:hidden 으로 두 줄짜리를 잘라낸다 */ .goods-view-page .goods-panel .add_notice { height: auto; overflow: visible; margin-top: 16px; padding: 0; font-size: 13px; line-height: 1.7; color: var(--tj-color-text-body-3, #67787a); } /* 제작갯수 칸. 옛 크기 규칙은 .b01_mall_view_top 아래에 걸려 있어서 그 조상을 안 쓰는 여기서는 적용되지 않는다. 직접 잡는다. */ /* 제작갯수 스테퍼. common.css 가 .btn_solo 를 width:100px; height:20px; overflow:hidden 으로 묶어두고, 화살표는 8px 짜리 gif 두 장이다. 그 틀을 다 풀고 bexon 입력칸 모양으로 다시 그린다. 화살표도 이미지 대신 CSS 꺾쇠로 그린다. 폭 싸움에서 확실히 이기도록 !important 를 쓴다. */ .goods-view-page .goods-panel .btn_solo { float: none; display: inline-flex !important; align-items: stretch; gap: 6px; width: auto !important; height: auto !important; overflow: visible !important; margin: 0; } .goods-view-page .goods-panel .btn_solo input[type="text"] { flex: 0 0 auto; float: none; width: 64px !important; height: 46px !important; padding: 0 10px; margin: 0; border: 1px solid var(--tj-color-border-1, #c9d1d1); border-radius: 8px; background: var(--tj-color-common-white, #fff); font-family: var(--tj-ff-body); font-size: 16px; font-weight: 600; text-align: center; color: var(--tj-color-heading-primary, #0c1e21); } .goods-view-page .goods-panel .btn_solo input[type="text"]:focus { outline: none; border-color: var(--tj-color-theme-primary, #1e8a8a); } /* 옛 마크업의

이 부트스트랩 .btn 과 이름이 겹친다. padding:6px 12px + border:1px 가 얹히는 바람에 30px 짜리 화살표가 안쪽 6px 칸을 넘쳐 오른쪽 "개" 글자 위로 13px 삐져나왔다. */ .goods-view-page .goods-panel .btn_solo .btn { float: none; display: flex !important; flex-direction: column; gap: 4px; width: 30px !important; height: 46px !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; position: static; } /* 화살표 gif 를 지우고 꺾쇠로 다시 그린다 */ .goods-view-page .goods-panel .btn_solo .btn a { flex: 1 1 0; display: block !important; position: relative; width: 30px !important; height: auto !important; min-height: 0; margin: 0 !important; padding: 0 !important; background: var(--tj-color-grey-1, #ecf0f0) !important; border-radius: 6px; transition: background-color 0.2s ease; } .goods-view-page .goods-panel .btn_solo .btn a:hover { background: var(--tj-color-theme-bg, #d8e5e5) !important; } .goods-view-page .goods-panel .btn_solo .btn a::after { content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-bottom: 2px solid var(--tj-color-heading-primary, #0c1e21); border-right: 2px solid var(--tj-color-heading-primary, #0c1e21); } .goods-view-page .goods-panel .btn_solo .btn .btn_plus_pro::after { transform: translate(-50%, -30%) rotate(-135deg); } .goods-view-page .goods-panel .btn_solo .btn .btn_minus_pro::after { transform: translate(-50%, -70%) rotate(45deg); } .goods-view-page .goods-panel .btn_solo p { margin: 0; align-self: center; } /* SNS · QR 한 줄. FACEBOOK_LIKE 는 iframe 이라 그냥 두면 한 줄을 통째로 차지한다. */ .goods-view-page .view_sns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; list-style: none; margin: auto 0 0; padding: 22px 0 0; } .goods-view-page .view_sns li { float: none !important; width: auto !important; margin: 0; padding: 0 !important; line-height: 1; } .goods-view-page .view_sns .view_qr { margin-inline-start: auto; } .goods-view-page .view_sns img { max-height: 26px; width: auto; } .goods-view-page .view_sns .view_qr img { max-height: 58px; } .goods-view-page .view_sns iframe { max-width: 100%; vertical-align: middle; } /* 버튼 셋. user.css 의 `ul.view_btn li .view_btn_type1` 은 특정도 0,2,2 라 `.goods-view-page .view_btn_type1`(0,2,0)로는 못 이긴다. 회색 background-color 와 float:left, width:107px/height:28px 이 그대로 살아 있었다. 태그를 붙여 0,3,3 으로 올려서 이긴다. */ .goods-view-page ul.view_btn { float: none; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 24px 0 0; padding: 0; } .goods-view-page ul.view_btn li { float: none; flex: 1 1 auto; min-width: 0; /* 좁은 폭에서 카드 밖으로 밀려나가지 않게 */ width: auto; height: auto; margin: 0; } .goods-view-page ul.view_btn li a { float: none; display: block; width: auto; height: auto; padding: 15px 8px; white-space: nowrap; border-radius: 50px; font-family: var(--tj-ff-heading); font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; transition: background-color 0.25s ease, color 0.25s ease; } .goods-view-page ul.view_btn li a.view_btn_type1 { background-color: var(--tj-color-theme-primary, #1e8a8a); border: 1px solid var(--tj-color-theme-primary, #1e8a8a); color: var(--tj-color-common-white, #fff); } .goods-view-page ul.view_btn li a.view_btn_type1:hover { background-color: var(--tj-color-theme-dark, #0c1e21); border-color: var(--tj-color-theme-dark, #0c1e21); } .goods-view-page ul.view_btn li a.view_btn_type2, .goods-view-page ul.view_btn li a.view_btn_type3 { background-color: var(--tj-color-common-white, #fff); border: 1px solid var(--tj-color-border-1, #c9d1d1); color: var(--tj-color-heading-primary, #0c1e21); } .goods-view-page ul.view_btn li a.view_btn_type2:hover, .goods-view-page ul.view_btn li a.view_btn_type3:hover { background-color: var(--tj-color-theme-bg, #d8e5e5); border-color: transparent; } /* 데모 사이트 보기도 같은 이유로 태그를 붙인다 */ .goods-view-page .dsshop_detail_btn { height: auto; padding: 0; } /* 상품정보 본문 - 흰 판 하나에 옛 마크업을 그대로 담는다 */ .goods-view-page .goods-info { margin-top: 28px; padding: 50px 46px; background: var(--tj-color-common-white, #fff); border-radius: 14px; box-shadow: 0 1px 2px rgba(12, 30, 33, 0.04), 0 8px 28px rgba(12, 30, 33, 0.05); font-family: var(--tj-ff-body); font-size: 16px; line-height: 1.85; color: var(--tj-color-text-body-3, #67787a); } .goods-view-page .goods-info img { max-width: 100%; height: auto; } .goods-view-page .goods-info h2 { margin: 10px 0 30px; font-family: var(--tj-ff-heading); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--tj-color-heading-primary, #0c1e21); text-align: center; } .goods-view-page .goods-info .view_fixed, .goods-view-page .goods-info .view_fixed_process { margin-bottom: 56px; } .goods-view-page .goods-info ul { list-style: none; margin: 18px 0; padding: 0; } .goods-view-page .goods-info li { line-height: 1.85; margin-bottom: 8px; } /* 굵은 빨간 선 둘은 옛 디자인 잔재다. .purple_intro_line 은 user.css 에서 border-top:8px solid #C7081B 에 top:-30px 로 끌어올린 장식선인데, 원래 탭 막대의 빨간 밑줄과 이어지도록 그린 것이다. 탭을 뺐으니 맥락 없는 막대만 남는다. 맨 끝의 인라인 border-bottom:8px 짜리도 같은 잔재다. */ .goods-view-page .goods-info .purple_intro_line, .goods-view-page .goods-info > div[style*="border-bottom:8px"] { display: none; } /* 연관 상품 */ .goods-relation { background: var(--tj-color-grey-1, #ecf0f0); padding-top: 0; } .goods-relation .ds_shopview > div { background: var(--tj-color-common-white, #fff) !important; border: 0 !important; border-radius: 14px; box-shadow: 0 1px 2px rgba(12, 30, 33, 0.04), 0 8px 28px rgba(12, 30, 33, 0.05); padding: 12px; } .goods-relation .ds_shopview ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .goods-relation .ds_shopview li { border: 0 !important; padding: 16px 8px !important; } .goods-relation .ds_shopview a { color: var(--tj-color-heading-primary, #0c1e21); font-size: 15px; font-weight: 500; } .goods-relation .ds_shopview a:hover { color: var(--tj-color-theme-primary, #1e8a8a); } @media (max-width: 991px) { .goods-view-page .dsshop_big { height: 460px; } .goods-view-page .goods-info { padding: 30px 22px; } .goods-view-page .goods-panel { padding: 26px 22px; } .goods-view-page .goods-panel h4 { font-size: 23px; } } /* --------------------------------------------------------------- 게시글 보기 (/board/view) - board/instance/view_bexon.html 본문 마크업은 원본 그대로다. 옛 폭·float 만 걷어내고 카드로 담는다. --------------------------------------------------------------- */ .board-view-page { background: var(--tj-color-grey-1, #ecf0f0); } .board-view-page .ds_board, .board-view-page .ds_boardView { width: auto !important; float: none !important; margin: 0; padding: 0; border: 0; background: none; } .board-view-page .ds_boardView { padding: 46px 44px; background: var(--tj-color-common-white, #fff); border-radius: 14px; box-shadow: 0 1px 2px rgba(12, 30, 33, 0.04), 0 8px 28px rgba(12, 30, 33, 0.05); font-family: var(--tj-ff-body); font-size: 16px; line-height: 1.85; color: var(--tj-color-text-body-3, #67787a); } /* 제목 · 작성자 */ .board-view-page .board-head { width: auto !important; float: none !important; height: auto !important; margin: 0 0 24px; padding: 0 0 20px; border-bottom: 1px solid var(--tj-color-grey-1, #ecf0f0); background: none; } /* 제목은 위 .tj-page-header 가 이미 크게 보여준다. 카드 안에서 또 반복하지 않는다(page_4/5 에서와 같은 처리). */ .board-view-page .board-head h3 { display: none; } .board-view-page .board-head ul { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; margin: 0; padding: 0; } .board-view-page .board-head li { float: none !important; margin: 0; padding: 0; background: none; font-size: 15px; color: var(--tj-color-text-body-3, #67787a); } /* 첨부 · 링크 · 추가항목 */ .board-view-page .ds_boardView_section2 { width: auto !important; float: none !important; height: auto !important; margin: 0 0 26px; padding: 0; background: none; border: 0; } .board-view-page .ds_boardView_section2 ul { list-style: none; margin: 0; padding: 0; } .board-view-page .ds_boardView_section2 li { float: none !important; margin: 0 0 6px; padding: 10px 16px; background: var(--tj-color-grey-1, #ecf0f0); border-radius: 8px; font-size: 15px; line-height: 1.6; } .board-view-page .ds_boardView_section2 a { color: var(--tj-color-theme-primary, #1e8a8a); } .board-view-page .ds_boardView_section2 ul:empty, .board-view-page .ds_boardView_section2:empty { display: none; } /* 본문 */ .board-view-page .ds_boardView_content { width: auto !important; float: none !important; min-height: 120px; margin: 0; padding: 0; border: 0; background: none; line-height: 1.9; } .board-view-page .ds_boardView_content img { max-width: 100%; height: auto; border-radius: 10px; } /* 댓글 */ .board-view-page .ds_comment_section { width: auto !important; float: none !important; margin: 40px 0 0; padding: 26px 0 0; border-top: 1px solid var(--tj-color-grey-1, #ecf0f0); background: none; } .board-view-page .ds_commentrecomm_reply { margin: 0; font-family: var(--tj-ff-heading); font-size: 16px; font-weight: 600; } .board-view-page .ds_commentrecomm_reply a { color: var(--tj-color-heading-primary, #0c1e21); } .board-view-page .ds_comment_section table { max-width: 100%; } .board-view-page .ds_comment_write textarea { width: 100%; min-height: 110px; padding: 12px 14px; border: 1px solid var(--tj-color-border-1, #c9d1d1); border-radius: 8px; font-family: var(--tj-ff-body); font-size: 15px; } .board-view-page .ds_comment_write input[type="text"], .board-view-page .ds_comment_write input[type="password"] { height: 36px !important; padding: 0 10px; border: 1px solid var(--tj-color-border-1, #c9d1d1); border-radius: 6px; font-family: var(--tj-ff-body); } /* 버튼 줄 */ .board-view-page .ds_board_button { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; width: auto !important; float: none !important; margin: 36px 0 0; padding: 26px 0 0; border-top: 1px solid var(--tj-color-grey-1, #ecf0f0); background: none; } .board-view-page .ds_board_button ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; float: none !important; margin: 0; padding: 0; } .board-view-page .ds_board_button li { float: none !important; width: auto !important; height: auto !important; margin: 0; background: none; } .board-view-page .ds_board_button li a { display: block; width: auto !important; height: auto !important; padding: 13px 26px; border: 1px solid var(--tj-color-border-1, #c9d1d1); border-radius: 50px; background: var(--tj-color-common-white, #fff) !important; color: var(--tj-color-heading-primary, #0c1e21) !important; font-family: var(--tj-ff-heading); font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap; text-indent: 0; transition: background-color 0.25s ease, color 0.25s ease; } .board-view-page .ds_board_button li a:hover { background: var(--tj-color-theme-bg, #d8e5e5) !important; border-color: transparent; } /* 글쓰기 · 답글은 채운 버튼으로 */ .board-view-page .ds_board_button li a.ds_board_btn_type1 { background: var(--tj-color-theme-primary, #1e8a8a) !important; border-color: var(--tj-color-theme-primary, #1e8a8a); color: var(--tj-color-common-white, #fff) !important; } .board-view-page .ds_board_button li a.ds_board_btn_type1:hover { background: var(--tj-color-theme-dark, #0c1e21) !important; border-color: var(--tj-color-theme-dark, #0c1e21); } @media (max-width: 767px) { .board-view-page .ds_boardView { padding: 28px 22px; } .board-view-page .board-head h3 { font-size: 22px; } } /* ===================================================================== /maintenance · 유지관리 얼마예요? 원본은 jqxTabs 를 755px 로 못박아 두었고 본문은 그냥 글줄이었다. 탭은 다른 목록 쪽과 같은 알약으로, 본문은 표 · 카드 · 단계로 나눈다. ===================================================================== */ .mt-page { background: var(--tj-color-grey-1, #ecf0f0); } .mt-page .mt-tabs { margin-bottom: 34px; } .mt-panel { display: none; } .mt-panel.is-open { display: block; } /* 각 탭 머리의 안내 그림 */ .mt-page .mt-hero { overflow: hidden; border-radius: 18px; line-height: 0; box-shadow: 0 10px 30px rgba(12, 30, 33, 0.06); } .mt-page .mt-hero img { width: 100%; height: auto; } /* 제목. 오른쪽에 단위 같은 곁말을 붙인다. */ .mt-page .mt-title, .mt-page .mt-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; position: relative; margin: 46px 0 18px; padding-left: 16px; font-family: var(--tj-ff-heading); color: var(--tj-color-heading-primary, #0c1e21); line-height: 1.3; } .mt-page .mt-title { font-size: 28px; font-weight: 700; } .mt-page .mt-sub { font-size: 22px; font-weight: 700; } .mt-page .mt-title::before, .mt-page .mt-sub::before { content: ""; position: absolute; top: 0.18em; left: 0; width: 4px; height: 0.9em; border-radius: 2px; background: var(--tj-color-theme-primary, #1e8a8a); } .mt-page .mt-title span { flex: 0 0 auto; font-family: var(--tj-ff-body); font-size: 14px; font-weight: 400; color: var(--tj-color-text-body-3, #67787a); } /* ---- 요금표 ---- */ .mt-page .mt-table-wrap { overflow-x: auto; border-radius: 16px; background: var(--tj-color-common-white, #fff); box-shadow: 0 10px 30px rgba(12, 30, 33, 0.06); -webkit-overflow-scrolling: touch; } .mt-page .mt-table { width: 100%; border-collapse: collapse; font-family: var(--tj-ff-body); font-size: 15px; color: var(--tj-color-text-body-2, #364e52); } .mt-page .mt-table th, .mt-page .mt-table td { padding: 15px 16px; border-bottom: 1px solid var(--tj-color-border-1, #c9d1d1); text-align: center; vertical-align: middle; line-height: 1.6; white-space: nowrap; } .mt-page .mt-table tr:last-child th, .mt-page .mt-table tr:last-child td { border-bottom: 0; } .mt-page .mt-table tr:first-child th { background: var(--tj-color-theme-dark, #0c1e21); color: var(--tj-color-common-white, #fff); font-family: var(--tj-ff-heading); font-weight: 600; border-bottom: 0; } .mt-page .mt-table tr:nth-child(even) td { background: rgba(236, 240, 240, 0.5); } .mt-page .mt-table .mt-em { color: var(--tj-color-theme-primary, #1e8a8a); font-weight: 700; } /* 요금제 표는 칸이 열 개라 가로로 넘친다. 왼쪽 구분 칸을 붙여 둔다. */ .mt-page .mt-table-plan .mt-rowhead { position: sticky; left: 0; z-index: 1; min-width: 108px; background: var(--tj-color-common-white, #fff); color: var(--tj-color-heading-primary, #0c1e21); font-family: var(--tj-ff-heading); font-weight: 600; text-align: left; box-shadow: 1px 0 0 var(--tj-color-border-1, #c9d1d1); } .mt-page .mt-table-plan tr:first-child .mt-rowhead { background: var(--tj-color-theme-dark, #0c1e21); color: var(--tj-color-common-white, #fff); box-shadow: none; } /* 상품 표는 설명 칸만 왼쪽 정렬하고 줄바꿈을 허용한다. */ .mt-page .mt-table-goods .mt-goods { font-family: var(--tj-ff-heading); font-weight: 600; color: var(--tj-color-heading-primary, #0c1e21); white-space: normal; } .mt-page .mt-table-goods .mt-desc { text-align: left; white-space: normal; } .mt-page .mt-table-goods .mt-price { text-align: right; font-weight: 700; color: var(--tj-color-theme-primary, #1e8a8a); } /* ---- 설명 카드 ---- */ .mt-page .mt-cards, .mt-page .mt-qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .mt-page .mt-cards .mt-card:first-child { grid-column: 1 / -1; } .mt-page .mt-card { padding: 28px 30px; border-radius: 16px; background: var(--tj-color-common-white, #fff); box-shadow: 0 10px 30px rgba(12, 30, 33, 0.06); } .mt-page .mt-card-tag { display: inline-block; margin-bottom: 12px; padding: 6px 14px; border-radius: 50px; background: var(--tj-color-theme-bg, #d8e5e5); color: var(--tj-color-theme-primary, #1e8a8a); font-family: var(--tj-ff-heading); font-size: 13px; font-weight: 600; line-height: 1; } .mt-page .mt-card h4 { margin: 0 0 10px; font-family: var(--tj-ff-heading); font-size: 19px; font-weight: 700; line-height: 1.4; color: var(--tj-color-heading-primary, #0c1e21); } .mt-page .mt-card p { margin: 0 0 8px; font-size: 15px; line-height: 1.8; color: var(--tj-color-text-body-3, #67787a); } .mt-page .mt-card p:last-child { margin-bottom: 0; } /* ---- 머리글 문단 ---- */ .mt-page .mt-lead { padding: 28px 30px; border-radius: 16px; background: var(--tj-color-common-white, #fff); box-shadow: 0 10px 30px rgba(12, 30, 33, 0.06); } .mt-page .mt-lead p { margin: 0 0 12px; font-size: 16px; line-height: 1.9; color: var(--tj-color-text-body-3, #67787a); } .mt-page .mt-lead p:last-child { margin-bottom: 0; } .mt-page .mt-lead .mt-lead-em { font-family: var(--tj-ff-heading); font-size: 18px; font-weight: 700; color: var(--tj-color-heading-primary, #0c1e21); } /* ---- 제작절차 ---- */ .mt-page .mt-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .mt-page .mt-steps li { display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px; border-radius: 14px; background: var(--tj-color-common-white, #fff); box-shadow: 0 10px 30px rgba(12, 30, 33, 0.06); } .mt-page .mt-step-no { flex: 0 0 auto; font-family: var(--tj-ff-heading); font-size: 22px; font-weight: 800; line-height: 1.2; color: var(--tj-color-theme-primary, #1e8a8a); opacity: 0.55; } .mt-page .mt-steps p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--tj-color-text-body-2, #364e52); } /* ---- 참고 ---- */ .mt-page .mt-notes { margin: 22px 0 0; padding: 22px 26px; border-radius: 14px; border: 1px dashed var(--tj-color-border-1, #c9d1d1); list-style: none; background: transparent; } .mt-page .mt-notes li { position: relative; padding-left: 18px; margin-bottom: 8px; font-size: 14px; line-height: 1.8; color: var(--tj-color-text-body-3, #67787a); } .mt-page .mt-notes li:last-child { margin-bottom: 0; } .mt-page .mt-notes li::before { content: "\203B"; position: absolute; left: 0; color: var(--tj-color-theme-primary, #1e8a8a); } .mt-page .mt-notes a { color: var(--tj-color-theme-primary, #1e8a8a); text-decoration: underline; } /* ---- 부가옵션 목록 ---- */ .mt-page .mt-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0; } .mt-page .mt-options > div { padding: 24px 26px; border-radius: 14px; background: var(--tj-color-common-white, #fff); box-shadow: 0 10px 30px rgba(12, 30, 33, 0.06); } .mt-page .mt-options dt { margin: 0 0 8px; padding-left: 14px; position: relative; font-family: var(--tj-ff-heading); font-size: 17px; font-weight: 700; color: var(--tj-color-heading-primary, #0c1e21); } .mt-page .mt-options dt::before { content: ""; position: absolute; top: 0.45em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--tj-color-theme-primary, #1e8a8a); } .mt-page .mt-options dd { margin: 0; font-size: 15px; line-height: 1.8; color: var(--tj-color-text-body-3, #67787a); } .mt-page .mt-opt-note { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--tj-color-text-body-3, #67787a); opacity: 0.85; } @media (max-width: 991px) { .mt-page .mt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .mt-page .mt-title { font-size: 22px; flex-direction: column; align-items: flex-start; gap: 4px; } .mt-page .mt-sub { font-size: 19px; } .mt-page .mt-cards, .mt-page .mt-qa, .mt-page .mt-options, .mt-page .mt-steps { grid-template-columns: minmax(0, 1fr); } .mt-page .mt-cards .mt-card:first-child { grid-column: auto; } .mt-page .mt-card, .mt-page .mt-lead, .mt-page .mt-options > div { padding: 22px 20px; } } /* ===================================================================== /board/list · 게시판 목록 (crystal - 유지관리 접수/처리 현황) 옛 ds_boardList 표를 bexon 카드 위의 표로 바꾼다. 상태는 gif 아이콘 대신 알약으로 그린다. ===================================================================== */ .board-list-page { background: var(--tj-color-grey-1, #ecf0f0); } /* 건수 · 글쓰기 */ .board-list-page .bl-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .board-list-page .bl-count { font-family: var(--tj-ff-body); font-size: 15px; color: var(--tj-color-text-body-3, #67787a); } .board-list-page .bl-count strong { font-family: var(--tj-ff-heading); font-size: 18px; font-weight: 700; color: var(--tj-color-theme-primary, #1e8a8a); } .board-list-page .bl-write { display: inline-block; padding: 12px 26px; border-radius: 50px; background: var(--tj-color-theme-primary, #1e8a8a); color: var(--tj-color-common-white, #fff) !important; font-family: var(--tj-ff-heading); font-size: 15px; font-weight: 600; line-height: 1; transition: background-color 0.25s ease; } .board-list-page .bl-write:hover { background: var(--tj-color-theme-dark, #0c1e21); } /* 안내판. 아이콘 · 안내글 · 등록 버튼 한 줄. */ .board-list-page .bl-guide { display: flex; align-items: center; gap: 24px; margin-bottom: 34px; padding: 28px 32px; border-radius: 16px; background: var(--tj-color-common-white, #fff); box-shadow: 0 1px 2px rgba(12, 30, 33, 0.04), 0 8px 28px rgba(12, 30, 33, 0.05); } .board-list-page .bl-guide-icon { flex: 0 0 auto; width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--tj-color-theme-bg, #d8e5e5); color: var(--tj-color-theme-primary, #1e8a8a); line-height: 1; } .board-list-page .bl-guide-icon svg { display: block; width: 32px; height: 32px; overflow: visible; } .board-list-page .bl-guide-body { flex: 1 1 auto; min-width: 0; } .board-list-page .bl-guide-body h3 { margin: 0 0 10px; font-family: var(--tj-ff-heading); font-size: 19px; font-weight: 700; line-height: 1.4; color: var(--tj-color-heading-primary, #0c1e21); } .board-list-page .bl-guide-body ul { margin: 0; padding: 0; list-style: none; } .board-list-page .bl-guide-body li { position: relative; padding-left: 14px; margin-bottom: 5px; font-size: 15px; line-height: 1.7; color: var(--tj-color-text-body-3, #67787a); } .board-list-page .bl-guide-body li:last-child { margin-bottom: 0; } .board-list-page .bl-guide-body li::before { content: ""; position: absolute; top: 0.65em; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--tj-color-border-1, #c9d1d1); } .board-list-page .bl-guide-body em { font-style: normal; font-weight: 600; color: var(--tj-color-theme-primary, #1e8a8a); } .board-list-page .bl-guide-act { flex: 0 0 auto; } /* 표 오른쪽 위 검색. 예전엔 표 아래에 있었고 jqxComboBox 두 개를 썼다. 범위 고르는 칸은 진짜 select 로 바꿔 jqx 의존을 없앴다. */ .board-list-page .bl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .board-list-page .bl-search form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; } .board-list-page .bls-cate { /* bexon 기본 규칙이 select 에 width:100% 를 걸어 한 줄을 통째로 차지했다 */ flex: 0 0 auto; width: auto; min-width: 92px; height: 44px; padding: 0 26px 0 4px; border: 0; border-bottom: 1px solid var(--tj-color-border-1, #c9d1d1); border-radius: 0; background: transparent; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%230c1e21' stroke-width='1.6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; background-size: 12px 8px; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: var(--tj-ff-body); font-size: 15px; color: var(--tj-color-heading-primary, #0c1e21); cursor: pointer; } .board-list-page .bls-cate:focus { outline: none; border-bottom-color: var(--tj-color-theme-primary, #1e8a8a); } .board-list-page .bls-field { display: flex; align-items: center; width: 260px; height: 44px; padding: 0 6px 0 16px; border: 1px solid var(--tj-color-border-1, #c9d1d1); border-radius: 6px; background: var(--tj-color-common-white, #fff); } .board-list-page .bls-field:focus-within { border-color: var(--tj-color-theme-primary, #1e8a8a); } .board-list-page .bls-field input[type="text"] { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; padding: 0; background: transparent; font-family: var(--tj-ff-body); font-size: 15px; color: var(--tj-color-heading-primary, #0c1e21); } .board-list-page .bls-field input[type="text"]:focus { outline: none; } .board-list-page .bls-field input::placeholder { color: var(--tj-color-text-body-3, #67787a); opacity: 0.8; } .board-list-page .bls-go { flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: var(--tj-color-heading-primary, #0c1e21); font-size: 18px; cursor: pointer; transition: color 0.2s ease; } .board-list-page .bls-go:hover { color: var(--tj-color-theme-primary, #1e8a8a); } .board-list-page .bls-all { display: inline-flex; align-items: center; height: 44px; padding: 0 24px; border: 1px solid var(--tj-color-heading-primary, #0c1e21); border-radius: 50px; color: var(--tj-color-heading-primary, #0c1e21); font-family: var(--tj-ff-heading); font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; transition: background-color 0.25s ease, color 0.25s ease; } .board-list-page .bls-all:hover { background: var(--tj-color-heading-primary, #0c1e21); color: var(--tj-color-common-white, #fff) !important; } /* 표 */ .board-list-page .bl-table-wrap { overflow-x: auto; border-radius: 16px; background: var(--tj-color-common-white, #fff); box-shadow: 0 1px 2px rgba(12, 30, 33, 0.04), 0 8px 28px rgba(12, 30, 33, 0.05); -webkit-overflow-scrolling: touch; } .board-list-page .bl-table { width: 100%; min-width: 720px; border-collapse: collapse; font-family: var(--tj-ff-body); font-size: 15px; color: var(--tj-color-text-body-2, #364e52); } .board-list-page .bl-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .board-list-page .bl-table th, .board-list-page .bl-table td { padding: 16px 14px; border-bottom: 1px solid var(--tj-color-border-1, #c9d1d1); text-align: center; vertical-align: middle; line-height: 1.6; } .board-list-page .bl-table thead th { background: var(--tj-color-theme-dark, #0c1e21); color: var(--tj-color-common-white, #fff); font-family: var(--tj-ff-heading); font-size: 15px; font-weight: 600; border-bottom: 0; white-space: nowrap; } .board-list-page .bl-table tbody tr:last-child td { border-bottom: 0; } .board-list-page .bl-table tbody tr:hover td { background: rgba(216, 229, 229, 0.35); } .board-list-page .bl-num, .board-list-page .bl-code { color: var(--tj-color-text-body-3, #67787a); font-size: 14px; white-space: nowrap; } /* 제목 칸만 왼쪽 정렬 */ .board-list-page .bl-th-subject { text-align: left; } .board-list-page .bl-subject { text-align: left; } .board-list-page .bl-subject a { color: var(--tj-color-heading-primary, #0c1e21); font-family: var(--tj-ff-heading); font-weight: 600; transition: color 0.2s ease; } .board-list-page .bl-subject a:hover { color: var(--tj-color-theme-primary, #1e8a8a); } .board-list-page .bl-subject img { vertical-align: middle; margin-right: 2px; } .board-list-page .bl-date { white-space: nowrap; color: var(--tj-color-text-body-3, #67787a); font-size: 14px; } .board-list-page .bl-name { white-space: nowrap; color: var(--tj-color-text-body-3, #67787a); font-size: 14px; } .board-list-page .bl-name img { max-height: 20px; width: auto; vertical-align: middle; } /* 상태 알약. 원본은 gif 두 장 + span 두 개가 뒤섞여 있었다. 상담 보기(.inquiry-view-page)도 같은 알약을 쓴다. 그래서 .bl-st 는 목록 안으로 한정하지 않는다. */ .board-list-page .bl-status { white-space: nowrap; } .bl-st { display: inline-block; min-width: 74px; padding: 7px 14px; border-radius: 50px; font-family: var(--tj-ff-heading); font-size: 13px; font-weight: 600; line-height: 1; } .bl-st-new { background: var(--tj-color-theme-bg, #d8e5e5); color: var(--tj-color-theme-primary, #1e8a8a); } .bl-st-wait { background: #fdf1dd; color: #a4701a; } .bl-st-work { background: #e2ecfb; color: #2b5ea8; } .bl-st-done { background: var(--tj-color-theme-dark, #0c1e21); color: var(--tj-color-common-white, #fff); } .bl-st-none { color: var(--tj-color-border-1, #c9d1d1); } .board-list-page .cms-pagination { margin-top: 34px; } @media (max-width: 991px) { .board-list-page .bl-guide { flex-wrap: wrap; gap: 18px; padding: 24px 22px; } .board-list-page .bl-guide-icon { width: 52px; height: 52px; } .board-list-page .bl-guide-icon svg { width: 25px; height: 25px; } .board-list-page .bl-guide-body { flex: 1 1 240px; } .board-list-page .bl-guide-act { width: 100%; } .board-list-page .bl-guide-act .bl-write { display: block; text-align: center; } .board-list-page .bl-summary { align-items: flex-start; flex-direction: column; } .board-list-page .bl-tools { width: 100%; } .board-list-page .bl-search, .board-list-page .bl-search form { width: 100%; } .board-list-page .bls-field { flex: 1 1 180px; width: auto; } } @media (max-width: 767px) { /* 좁은 화면에서는 조회수(공지) · 코드(유지관리) 칸을 접는다. 등록일은 공지 목록에서 쓸모가 커 남긴다. */ .board-list-page .bl-th-code, .board-list-page .bl-code { display: none; } .board-list-page .bl-table { min-width: 520px; font-size: 14px; } .board-list-page .bl-table th, .board-list-page .bl-table td { padding: 13px 10px; } .bl-st { min-width: 0; padding: 6px 10px; font-size: 12px; } } /* ===================================================================== /inquiry · 상담 접수 현황 표 · 상태 알약 · 페이징은 .board-list-page 규칙을 그대로 쓴다. 여기서는 본인확인 모달(jqxWindow)과 눌리는 줄만 손본다. ===================================================================== */ .board-list-page .bl-note { display: block; position: relative; margin: -4px 0 18px; padding-left: 18px; font-family: var(--tj-ff-body); font-size: 15px; color: var(--tj-color-text-body-3, #67787a); } .board-list-page .bl-note::before { content: "\203B"; position: absolute; left: 0; color: var(--tj-color-theme-primary, #1e8a8a); } /* 누르면 비밀번호 모달이 열리는 줄 */ .inquiry-page .iq-open { cursor: pointer; } .inquiry-page .iq-who { font-family: var(--tj-ff-heading); font-weight: 600; color: var(--tj-color-heading-primary, #0c1e21); } .inquiry-page tbody tr:hover .iq-open .iq-who { color: var(--tj-color-theme-primary, #1e8a8a); } /* 본인확인 모달. jqxWindow 가 만드는 틀을 bexon 쪽으로 덮는다. */ #window { display: none; } .jqx-window#window, .jqx-window#window .jqx-window-header, .jqx-window#window .jqx-window-content { border-radius: 14px; border-color: transparent; font-family: var(--tj-ff-body); } .jqx-window#window { overflow: hidden; box-shadow: 0 20px 60px rgba(12, 30, 33, 0.25); } .jqx-window#window .jqx-window-header { border-radius: 0; background: var(--tj-color-theme-dark, #0c1e21) !important; color: var(--tj-color-common-white, #fff) !important; padding: 16px 20px; font-family: var(--tj-ff-heading); font-size: 17px; font-weight: 600; } .jqx-window#window .jqx-window-content { border-radius: 0; padding: 22px 24px; background: var(--tj-color-common-white, #fff); } .iq-modal { font-size: 15px; line-height: 1.7; color: var(--tj-color-text-body-2, #364e52); } .iq-modal #inquiry_list_name { font-family: var(--tj-ff-heading); font-weight: 700; color: var(--tj-color-heading-primary, #0c1e21); } .iq-modal #not_ment { color: #b3261e; } .iq-modal .iq-pass { display: flex; align-items: center; gap: 10px; margin-top: 18px; } .iq-modal .iq-pass label { flex: 0 0 auto; margin: 0; font-family: var(--tj-ff-heading); font-size: 14px; font-weight: 600; color: var(--tj-color-heading-primary, #0c1e21); } .iq-modal .iq-pass input[type="password"] { flex: 1 1 auto; height: 42px; padding: 0 14px; border: 1px solid var(--tj-color-border-1, #c9d1d1); border-radius: 8px; background: var(--tj-color-common-white, #fff); font-size: 15px; } .iq-modal .iq-pass input[type="password"]:focus { outline: none; border-color: var(--tj-color-theme-primary, #1e8a8a); } .iq-modal .iq-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; } /* ===================================================================== /blog · 소식지 분류 알약 + 펼친 글 + 목록이 한 장에 같이 있다. ===================================================================== */ .blog-page { background: var(--tj-color-grey-1, #ecf0f0); } .blog-page .blog-tabs { margin-bottom: 30px; } /* 목록은 데모 /blog-grid 의 카드를 그대로 쓴다. 테마가 이미 .blog-item 을 갖고 있어 여기서는 옛 자료에서 모자란 것만 채운다. */ .blog-page .blog-grid { margin-top: 6px; } .blog-page .blog-item { background: var(--tj-color-common-white, #fff); box-shadow: 0 1px 2px rgba(12, 30, 33, 0.04), 0 8px 28px rgba(12, 30, 33, 0.05); } /* 표지는 대부분 화면 갈무리라 잘라내면 무슨 글인지 알 수 없다. 테마 기본값은 cover 라 크게 확대해 잘랐다. 통째로 보이게 contain 으로 바꾸고 상자 높이를 못박는다. 위에 덮이던 어두운 막도 걷는다. */ .blog-page .blog-item .blog-thumb { min-height: 0; height: 240px; padding: 14px; background: var(--tj-color-grey-1, #ecf0f0); } .blog-page .blog-item .blog-thumb::before { opacity: 0; } .blog-page .blog-item .blog-thumb > a { display: block; width: 100%; height: 100%; } .blog-page .blog-item .blog-thumb img { min-height: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; } .blog-page .blog-item:hover .blog-thumb img { transform: scale(1.04); } /* 본문에 그림이 없는 글은 표지 자리를 글자로 채운다 */ .blog-page .blog-thumb-none { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; background: var(--tj-color-theme-dark, #0c1e21); color: var(--tj-color-common-white, #fff); font-family: var(--tj-ff-heading); font-size: 20px; font-weight: 700; letter-spacing: 0.22em; opacity: 0.9; } .blog-page .blog-item .title { font-size: 20px; line-height: 1.45; letter-spacing: -0.01em; } .blog-page .blog-item .desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 12px; margin-bottom: 0; font-size: 15px; line-height: 1.7; color: var(--tj-color-text-body-3, #67787a); } /* 분류는 알약으로 */ .blog-page .blog-meta .categories a { display: inline-block; padding: 6px 14px; border: 1px solid var(--tj-color-border-1, #c9d1d1); border-radius: 50px; font-family: var(--tj-ff-heading); font-size: 13px; font-weight: 600; line-height: 1; color: var(--tj-color-heading-primary, #0c1e21); } .blog-page .blog-meta > span:not(.categories) { font-size: 14px; } .blog-page .blog-date { background: rgba(12, 30, 33, 0.45); padding: 14px 16px; } .blog-page .blog-date .date { font-size: 26px; margin-bottom: 6px; } .blog-page .blog-date .month { font-size: 12px; letter-spacing: 0.06em; } .blog-page .cms-pagination { margin-top: 44px; } /* 펼쳐진 글 */ .blog-page .blog-article { margin-bottom: 40px; padding: 40px 44px; border-radius: 16px; background: var(--tj-color-common-white, #fff); box-shadow: 0 1px 2px rgba(12, 30, 33, 0.04), 0 8px 28px rgba(12, 30, 33, 0.05); } .blog-page .ba-title { margin: 0 0 14px; font-family: var(--tj-ff-heading); font-size: 30px; font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; color: var(--tj-color-heading-primary, #0c1e21); } .blog-page .ba-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-bottom: 22px; border-bottom: 1px solid var(--tj-color-border-1, #c9d1d1); font-size: 14px; color: var(--tj-color-text-body-3, #67787a); } .blog-page .ba-writer { padding: 5px 12px; border-radius: 50px; background: var(--tj-color-theme-bg, #d8e5e5); color: var(--tj-color-theme-primary, #1e8a8a); font-family: var(--tj-ff-heading); font-size: 13px; font-weight: 600; line-height: 1; } .blog-page .ba-files:not(:empty) { margin-top: 18px; } .blog-page .ba-file { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; color: var(--tj-color-text-body-3, #67787a); word-break: break-all; } .blog-page .ba-file-tag { flex: 0 0 auto; padding: 4px 10px; border-radius: 50px; border: 1px solid var(--tj-color-border-1, #c9d1d1); font-size: 12px; line-height: 1; } .blog-page .ba-file a { color: var(--tj-color-theme-primary, #1e8a8a); text-decoration: underline; } .blog-page .ba-file em { font-style: normal; font-size: 13px; } /* 본문. CMS 에디터가 넣은 인라인 스타일이 많아 최소한만 손댄다. */ .blog-page .ba-content { margin-top: 26px; font-size: 16px; line-height: 1.85; color: var(--tj-color-text-body-2, #364e52); word-break: break-word; } .blog-page .ba-content img { max-width: 100%; height: auto; } .blog-page .ba-content a { color: var(--tj-color-theme-primary, #1e8a8a); text-decoration: underline; } .blog-page .ba-content table { max-width: 100%; } /* 이전 · 다음 */ .blog-page .ba-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--tj-color-border-1, #c9d1d1); } .blog-page .ba-nav a { padding: 12px 26px; border: 1px solid var(--tj-color-border-1, #c9d1d1); border-radius: 50px; color: var(--tj-color-heading-primary, #0c1e21); font-family: var(--tj-ff-heading); font-size: 15px; font-weight: 600; line-height: 1; transition: background-color 0.25s ease, border-color 0.25s ease; } .blog-page .ba-nav a:hover { background: var(--tj-color-theme-bg, #d8e5e5); border-color: transparent; color: var(--tj-color-theme-primary, #1e8a8a); } /* 댓글. 게시글 보기와 블로그가 같은 마크업을 쓴다. */ .ba-comments { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--tj-color-border-1, #c9d1d1); } .ba-comment-toggle { margin: 0 0 18px; } .ba-comment-toggle a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; border-radius: 30px; background: var(--tj-color-theme-bg, #d8e5e5); font-family: var(--tj-ff-heading); font-size: 15px; font-weight: 600; color: var(--tj-color-heading-primary, #0c1e21); text-decoration: none; } .ba-comment-toggle a:hover { background: var(--tj-color-theme-primary, #1e8a8a); color: var(--tj-color-common-white, #fff); } /* 댓글 한 건 */ .ba-comment { padding: 20px 22px; margin-bottom: 12px; background: var(--tj-color-common-white, #fff); border: 1px solid var(--tj-color-border-1, #c9d1d1); border-radius: 12px; } .ba-comment-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .ba-comment-who { display: flex; align-items: baseline; gap: 10px; min-width: 0; } .ba-comment-who strong { font-family: var(--tj-ff-heading); font-size: 15px; font-weight: 600; color: var(--tj-color-heading-primary, #0c1e21); } .ba-reply-mark { margin-inline-end: 5px; font-size: 12px; color: var(--tj-color-theme-primary, #1e8a8a); } .ba-comment-date { font-size: 13px; color: var(--tj-color-text-body-3, #67787a); white-space: nowrap; } /* 수정 · 삭제 · 공유. 옛날 gif 를 아이콘 버튼으로 바꿨다. */ .ba-comment-act { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .ba-comment-act .ba-act { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--tj-color-border-1, #c9d1d1); border-radius: 50%; background: transparent; color: var(--tj-color-text-body-3, #67787a); font-size: 12px; line-height: 1; cursor: pointer; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .ba-comment-act .ba-act:hover { background: var(--tj-color-theme-primary, #1e8a8a); border-color: var(--tj-color-theme-primary, #1e8a8a); color: var(--tj-color-common-white, #fff); } .ba-comment-body { font-size: 15px; line-height: 1.7; color: var(--tj-color-text-body, #364e52); word-break: break-word; } .ba-comment-reply { margin-top: 12px; } .ba-reply-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; font-family: var(--tj-ff-heading); font-size: 14px; color: var(--tj-color-text-body-3, #67787a); cursor: pointer; } .ba-reply-btn:hover { color: var(--tj-color-theme-primary, #1e8a8a); } /* 댓글 쓰기 */ .ba-comment-write { margin-top: 20px; padding: 24px 22px; background: var(--tj-color-common-white, #fff); border: 1px solid var(--tj-color-border-1, #c9d1d1); border-radius: 12px; } .ba-cw-head { margin-bottom: 16px; font-family: var(--tj-ff-heading); font-size: 17px; font-weight: 600; color: var(--tj-color-heading-primary, #0c1e21); } .ba-cw-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 14px; font-size: 14px; color: var(--tj-color-text-body-3, #67787a); } .ba-cw-fields label { display: inline-flex; align-items: center; gap: 8px; margin: 0; } .ba-cw-fields input[type="text"], .ba-cw-fields input[type="password"] { width: 130px; height: 42px !important; padding: 0 12px; border: 1px solid var(--tj-color-border-1, #c9d1d1); border-radius: 8px; background: var(--tj-color-common-white, #fff); font-size: 14px; } .ba-cw-fields input:focus { outline: none; border-color: var(--tj-color-theme-primary, #1e8a8a); } /* 캡차 그림. 입력칸과 키를 맞춘다. */ .ba-cw-spam img { height: 42px; width: auto; border: 1px solid var(--tj-color-border-1, #c9d1d1); border-radius: 8px; vertical-align: middle; cursor: pointer; } .ba-cw-body textarea { width: 100%; min-height: 120px; padding: 14px 16px; border: 1px solid var(--tj-color-border-1, #c9d1d1); border-radius: 10px; background: var(--tj-color-common-white, #fff); font-family: var(--tj-ff-body); font-size: 15px; line-height: 1.65; resize: vertical; } .ba-cw-body textarea:focus { outline: none; border-color: var(--tj-color-theme-primary, #1e8a8a); } /* 안내글과 등록 버튼을 한 줄에 */ .ba-cw-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; } .ba-cw-note { margin: 0; font-size: 13px; color: var(--tj-color-text-body-3, #67787a); } .ba-cw-opt { display: inline-flex; align-items: center; gap: 6px; } /* 아이콘만 있는 버튼 · 입력칸의 대체 텍스트. 화면에서만 감춘다. 테마에도 부트스트랩에도 이 이름이 없어서 여기서 만든다. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 575px) { .ba-comment-head { flex-direction: column; align-items: flex-start; } .ba-cw-foot { flex-direction: column; align-items: stretch; } .ba-cw-foot .tj-primary-btn { justify-content: center; } } @media (max-width: 767px) { .blog-page .blog-article { padding: 26px 22px; } .blog-page .ba-title { font-size: 23px; } .ba-cw-body { flex-direction: column; align-items: stretch; } .ds_comment_regBtn { align-self: flex-end; } } /* --------------------------------------------------------------- 폼 카드 공용 (.contact-form) /contact 와 회원 화면(로그인·약관동의·회원가입·아이디/비밀번호 찾기)이 전부 bexon 테마의 .contact-form 카드를 나눠 쓴다. 모양은 테마 main.css 가 잡으므로 여기에는 테마에 없는 것만 둔다. 입력칸에 !important 가 붙은 이유: skin_defined.php 가 .text-input 마다 jqxInput 을 걸어서 jqx-input 규칙(테두리·배경·높이)이 테마의 밑줄 입력칸을 덮어 버린다. 그걸 걷어내고 테마 모양으로 되돌리는 것이다. jqWidgets 가 직접 그리는 칸(날짜·성별·수신동의·문의종류·추가필드)은 .form-widget 으로 감싸 두고 크기에 손대지 않는다. --------------------------------------------------------------- */ .contact-form .form-lead { margin: -20px 0 30px; font-size: 15px; line-height: 1.7; color: var(--tj-color-text-body-3, #67787a); } .contact-form .form-input > label { display: block; margin-bottom: 2px; font-family: var(--tj-ff-heading); font-size: 13.5px; font-weight: 600; color: var(--tj-color-heading-primary, #0c1e21); } .contact-form .form-req { margin-inline-start: 4px; padding: 2px 7px; border-radius: 20px; background: var(--tj-color-theme-bg, #d8e5e5); color: var(--tj-color-theme-primary, #1e8a8a); font-style: normal; font-size: 11px; font-weight: 600; vertical-align: 1px; } /* jqxInput 중화 + 테마 밑줄 입력칸 복원 */ .contact-form .form-input input[type="text"], .contact-form .form-input input[type="password"], .contact-form .form-input input[type="email"], .contact-form .form-input textarea { width: 100% !important; height: auto !important; background: transparent !important; border: 0 !important; border-bottom: 1px dashed var(--tj-color-border-1, #c9d1d1) !important; border-radius: 0 !important; padding: 11px 0 !important; box-shadow: none !important; color: var(--tj-color-text-body-3, #67787a) !important; font-family: var(--tj-ff-body) !important; font-size: 15px !important; } .contact-form .form-input textarea { min-height: 110px; line-height: 1.65; resize: vertical; } .contact-form .form-input input:focus, .contact-form .form-input textarea:focus { outline: none; border-bottom-color: var(--tj-color-theme-dark, #0c1e21) !important; } .contact-form .form-input input[readonly] { color: var(--tj-color-text-body, #364e52) !important; } .contact-form .form-input input + input { margin-top: 10px; } /* jqWidgets 가 직접 그리는 칸 */ .contact-form .form-widget { display: flex; align-items: center; min-height: 46px; padding: 6px 0; border-bottom: 1px dashed var(--tj-color-border-1, #c9d1d1); } .contact-form .form-widget-inline { gap: 18px; } .contact-form .form-note { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--tj-color-text-body-3, #67787a); } /* 우편번호 줄 */ .contact-form .form-zip { display: flex; align-items: center; gap: 10px; } .contact-form .form-zip .form-zip-part { width: 90px !important; flex: 0 0 auto; text-align: center; } .contact-form .form-zip-dash { color: var(--tj-color-text-body-3, #67787a); } .contact-form .form-zip + input { margin-top: 10px; } /* 자동가입 방지 */ .contact-form .form-spam { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px dashed var(--tj-color-border-1, #c9d1d1); } .contact-form .form-spam img { border-radius: 6px; vertical-align: middle; } .contact-form .form-spam .form-spam-input { width: 180px !important; } /* 아이디/비번/이메일/닉네임 실시간 확인 문구 */ .contact-form .regdata_check_msg { margin-top: 6px; font-size: 13px; line-height: 1.5; } /* 버튼 줄. 테마의 .tj-primary-btn 과 .text-btn 을 쓴다. */ .contact-form .form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 20px; margin-top: 20px; } .contact-form .form-actions-block { justify-content: stretch; } .contact-form .form-actions-block .tj-primary-btn { width: 100%; justify-content: center; } .contact-form .form-actions .text-btn { background: transparent; border: 0; padding: 0; cursor: pointer; font-family: var(--tj-ff-heading); font-size: 15px; color: var(--tj-color-text-body-3, #67787a); text-decoration: none; } .contact-form .form-actions .text-btn:hover { color: var(--tj-color-theme-primary, #1e8a8a); } /* --------------------------------------------------------------- 연락처 (design/page_900_bexon.html, 라이브 /contact) 테마에 없는 것만. 카드·폼 모양은 .contact-item.style-2 / .contact-form 이 잡는다. --------------------------------------------------------------- */ .tj-contact-area .contact-item.style-2 .contact-list { margin: 0; padding: 0; } .tj-contact-area .contact-item.style-2 .contact-list li + li { margin-top: 10px; } .tj-contact-area .contact-item.style-2 .contact-list li { font-size: 15px; line-height: 1.6; color: var(--tj-color-text-body, #364e52); } .tj-contact-area .contact-emergency { max-width: 760px; margin: 30px auto 0; text-align: center; font-size: 14.5px; line-height: 1.75; color: var(--tj-color-text-body-3, #67787a); } .tj-contact-area .contact-form-row { margin-top: 50px; } /* 지도. Leaflet 은 컨테이너 높이가 확정돼야 그린다. 옆 폼 카드와 키를 맞춘다. 부트스트랩 row 는 칸을 늘여 주지만 그 높이가 .map-area 로 내려가려면 칸 자체가 flex 여야 한다. */ .tj-contact-area .contact-form-row { align-items: stretch; } .tj-contact-area .contact-form-row > [class*="col-"] { display: flex; } .tj-contact-area .contact-form-row > [class*="col-"] > * { width: 100%; } .tj-contact-area .map-area { min-height: 420px; background: var(--tj-color-common-white, #fff); } .tj-contact-area #ct-map-canvas { width: 100%; height: 100%; min-height: 420px; } /* 지도 아래 저작자 표시. Leaflet 로고와 링크는 JS 에서 뺐다(setPrefix false). OpenStreetMap 표기는 타일 라이선스(ODbL)가 요구하는 항목이라 지울 수 없다. 눈에 덜 띄게만 한다. */ .tj-contact-area .leaflet-control-attribution { padding: 1px 6px !important; background: rgba(255, 255, 255, 0.7) !important; border-radius: 4px 0 0 0 !important; font-size: 10px !important; line-height: 1.5 !important; color: var(--tj-color-text-body-3, #67787a) !important; } .tj-contact-area .leaflet-control-attribution a { color: var(--tj-color-text-body-3, #67787a) !important; text-decoration: none !important; } .tj-contact-area .leaflet-control-attribution:hover { background: rgba(255, 255, 255, 0.95) !important; } .tj-contact-area .leaflet-container { font-family: var(--tj-ff-body); font-size: 13px; } .tj-contact-area .leaflet-popup-content { margin: 12px 16px; line-height: 1.6; color: var(--tj-color-text-body, #364e52); } @media (max-width: 991px) { .tj-contact-area .contact-form { -webkit-margin-end: 0; margin-inline-end: 0; } .tj-contact-area .map-area { margin-top: 30px; } } /* --------------------------------------------------------------- 회원 화면 (member/*_bexon.html) 로그인·약관동의·회원가입·아이디/비밀번호 찾기. 전부 .contact-form 카드를 쓰므로 여기에는 그 카드에 없는 것만 둔다. --------------------------------------------------------------- */ .tj-member-area { background: var(--tj-color-grey-1, #ecf0f0); } .tj-member-area .contact-form { -webkit-margin-end: 0; margin-inline-end: 0; } .tj-member-area .member-section-title { margin: 40px 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--tj-color-border-1, #c9d1d1); font-family: var(--tj-ff-heading); font-size: 18px; font-weight: 600; color: var(--tj-color-heading-primary, #0c1e21); } /* 고칠 수 없는 칸(아이디 · 추천인). 눌러도 되는 칸과 구분되게 흐리게. */ .tj-member-area .contact-form .form-readonly, .tj-member-area .contact-form input.form-readonly { background: var(--tj-color-grey-1, #ecf0f0) !important; color: var(--tj-color-text-body-3, #67787a) !important; cursor: default; } /* 회원 탈퇴로 가는 길. 옛 판에서는 왼쪽 메뉴에만 있어서 bexon 판에서는 갈 수가 없었다. 눈에 띄되 잘못 누르지 않게 작게 둔다. */ .tj-member-area .form-leave { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--tj-color-grey-1, #ecf0f0); font-size: 14px; color: var(--tj-color-text-body-3, #67787a); text-align: center; } .tj-member-area .form-leave a { color: var(--tj-color-text-body-3, #67787a); text-decoration: underline; } .tj-member-area .form-leave a:hover { color: var(--tj-color-theme-primary, #1e8a8a); } .tj-member-area .member-section-title:first-of-type { margin-top: 0; } /* 로그인 아래 링크 줄 */ .tj-member-area .member-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 20px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--tj-color-border-1, #c9d1d1); } .tj-member-area .member-links a { position: relative; font-size: 14.5px; color: var(--tj-color-text-body, #364e52); text-decoration: none; } .tj-member-area .member-links a:hover { color: var(--tj-color-theme-primary, #1e8a8a); } .tj-member-area .member-links a + a::before { content: ""; position: absolute; inset-inline-start: -10px; top: 50%; width: 1px; height: 12px; margin-top: -6px; background: var(--tj-color-border-1, #c9d1d1); } .tj-member-area .member-help { margin: 22px 0 0; text-align: center; font-size: 14px; line-height: 1.7; color: var(--tj-color-text-body-3, #67787a); } .tj-member-area .member-help a { color: var(--tj-color-theme-primary, #1e8a8a); text-decoration: none; } /* 아이디 찾기 결과. search_id() 가 인라인 display 를 바꾸므로 여기서는 보이게 됐을 때의 모양만 잡는다. */ .tj-member-area .member-result { margin-bottom: 28px; padding: 20px 22px; background: var(--tj-color-theme-bg, #d8e5e5); border-radius: 12px; text-align: center; } .tj-member-area .member-result-label { display: block; margin-bottom: 8px; font-size: 14px; color: var(--tj-color-text-body, #364e52); } .tj-member-area .member-result .ds_idis_text1 { margin: 0; font-family: var(--tj-ff-heading); font-size: 24px; font-weight: 700; color: var(--tj-color-theme-primary, #1e8a8a); word-break: break-all; } /* 약관동의. 본문은 nl2br 된 긴 글이라 스크롤 상자에 넣는다. */ .tj-member-area .member-terms-title { margin: 34px 0 12px; font-family: var(--tj-ff-heading); font-size: 17px; font-weight: 600; color: var(--tj-color-heading-primary, #0c1e21); } .tj-member-area .member-terms { margin-bottom: 6px; border: 1px solid var(--tj-color-border-1, #c9d1d1); border-radius: 12px; overflow: hidden; } .tj-member-area .member-terms-body { max-height: 240px; overflow-y: auto; padding: 20px 22px; background: var(--tj-color-grey-1, #ecf0f0); font-size: 14px; line-height: 1.75; color: var(--tj-color-text-body, #364e52); } .tj-member-area .member-terms-agree { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; padding: 14px 22px; background: var(--tj-color-common-white, #fff); border-top: 1px solid var(--tj-color-border-1, #c9d1d1); } .tj-member-area .member-terms-plain .member-terms-agree { border-top: 0; } @media (max-width: 767px) { .tj-member-area .contact-form { padding: 36px 24px; } .tj-member-area .member-section-title { margin-top: 30px; } .contact-form .form-actions { flex-direction: column-reverse; align-items: stretch; gap: 14px; } .contact-form .form-actions .tj-primary-btn { justify-content: center; } .contact-form .form-zip { flex-wrap: wrap; } } /* --------------------------------------------------------------- 사이드 패널(햄버거) 추가분 (design/top_bexon.html) 패널 자체(.hamburger-area / .hamburger_search / .hamburger-infos / .contact-info)는 bexon 테마 main.css 가 잡는다. 여기에는 테마에 없는 두 가지만 둔다 - 회사 소개 문단과 로그인/로그아웃 줄이다. 어두운 판 위라 글자색을 밝은 쪽으로 잡아야 한다. --------------------------------------------------------------- */ .hamburger-area .hamburger-text { margin: 0 0 30px; font-size: 15px; line-height: 1.75; color: var(--tj-color-text-body-2, #a9b8b8); } .hamburger-area .hamburger-account { margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .hamburger-area .hamburger-account-name { margin: 0 0 14px; font-size: 15px; color: var(--tj-color-text-body-2, #a9b8b8); } .hamburger-area .hamburger-account-name strong { color: var(--tj-color-common-white, #fff); font-weight: 600; } .hamburger-area .hamburger-account-links { display: flex; align-items: center; gap: 22px; } .hamburger-area .hamburger-account-links .text-btn { font-family: var(--tj-ff-heading); font-size: 15px; color: var(--tj-color-text-body-2, #a9b8b8); text-decoration: none; white-space: nowrap; } .hamburger-area .hamburger-account-links .text-btn:hover { color: var(--tj-color-common-white, #fff); } @media (max-width: 575px) { .hamburger-area .hamburger-account-links { flex-direction: column-reverse; align-items: stretch; gap: 14px; } .hamburger-area .hamburger-account-links .tj-primary-btn { justify-content: center; } .hamburger-area .hamburger-account-links .text-btn { text-align: center; } } /* --------------------------------------------------------------- 사이드 패널(햄버거) 추가분 (design/top_bexon.html) 패널 자체(.hamburger-area / .hamburger_search / .hamburger-infos / .contact-info)는 bexon 테마 main.css 가 잡는다. 여기에는 테마에 없는 두 가지만 둔다 - 회사 소개 문단과 로그인/로그아웃 줄이다. 어두운 판 위라 글자색을 밝은 쪽으로 잡아야 한다. --------------------------------------------------------------- */ .hamburger-area .hamburger-text { margin: 0 0 30px; font-size: 15px; line-height: 1.75; color: var(--tj-color-text-body-2, #a9b8b8); } .hamburger-area .hamburger-account { margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .hamburger-area .hamburger-account-name { margin: 0 0 14px; font-size: 15px; color: var(--tj-color-text-body-2, #a9b8b8); } .hamburger-area .hamburger-account-name strong { color: var(--tj-color-common-white, #fff); font-weight: 600; } .hamburger-area .hamburger-account-links { display: flex; align-items: center; gap: 22px; } .hamburger-area .hamburger-account-links .text-btn { font-family: var(--tj-ff-heading); font-size: 15px; color: var(--tj-color-text-body-2, #a9b8b8); text-decoration: none; white-space: nowrap; } .hamburger-area .hamburger-account-links .text-btn:hover { color: var(--tj-color-common-white, #fff); } @media (max-width: 575px) { .hamburger-area .hamburger-account-links { flex-direction: column-reverse; align-items: stretch; gap: 14px; } .hamburger-area .hamburger-account-links .tj-primary-btn { justify-content: center; } .hamburger-area .hamburger-account-links .text-btn { text-align: center; } } /* --------------------------------------------------------------- jqWidgets 라디오 / 체크박스를 테마 색으로 다시 그린다 약관동의·성별·수신동의는 전부 jqxRadioButton / jqxCheckBox 가 그린다. PHP 쪽 스크립트가 이 위젯의 값을 읽으므로 네이티브 input 으로 바꿀 수는 없다(confirm_ok 가 input[name=stipulation1] 을 본다). 그래서 위젯은 두고 모양만 덮는다. 기본값은 2010년대 jqx 스프라이트(roundbg_*.png)라 회색 원이 흐릿하게 찍힌다. 그림을 지우고 CSS 로 다시 그린다. 이 파일은 layout_bexon.html 에서만 불리므로 bexon 판에만 적용된다. --------------------------------------------------------------- */ .jqx-radiobutton, .jqx-checkbox { height: auto !important; background: transparent !important; border: 0 !important; white-space: nowrap; } /* 실제 동그라미/네모는 클래스가 붙은 안쪽 요소다. 위젯이 만드는 바깥 래퍼 div 두 개(동그라미 칸, 글자 칸)에는 클래스가 없으므로 건드리면 안 된다. 자식 선택자로 싸잡으면 글자 칸까지 동그라미가 돼서 두 개로 보인다. */ .jqx-radiobutton .jqx-radiobutton-default, .jqx-radiobutton .jqx-radiobutton-check-checked, .jqx-radiobutton .jqx-radiobutton-check-indeterminate, .jqx-checkbox .jqx-checkbox-default, .jqx-checkbox .jqx-checkbox-check-checked, .jqx-checkbox .jqx-checkbox-check-indeterminate { box-sizing: border-box !important; width: 18px !important; height: 18px !important; background-image: none !important; background-color: var(--tj-color-common-white, #fff) !important; border: 2px solid var(--tj-color-border-1, #c9d1d1) !important; box-shadow: none !important; transition: border-color 0.2s ease, background-color 0.2s ease; } .jqx-radiobutton .jqx-radiobutton-default, .jqx-radiobutton .jqx-radiobutton-check-checked, .jqx-radiobutton .jqx-radiobutton-check-indeterminate { border-radius: 50% !important; } .jqx-checkbox .jqx-checkbox-default, .jqx-checkbox .jqx-checkbox-check-checked, .jqx-checkbox .jqx-checkbox-check-indeterminate { border-radius: 5px !important; } /* 선택됨 */ .jqx-radiobutton .jqx-radiobutton-check-checked { border-color: var(--tj-color-theme-primary, #1e8a8a) !important; background-image: radial-gradient(circle at center, var(--tj-color-theme-primary, #1e8a8a) 0 4px, transparent 5px) !important; } .jqx-checkbox .jqx-checkbox-check-checked { border-color: var(--tj-color-theme-primary, #1e8a8a) !important; background-color: var(--tj-color-theme-primary, #1e8a8a) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 13px 13px !important; } /* 글자 */ .jqx-radiobutton span, .jqx-checkbox span { font-family: var(--tj-ff-body); font-size: 15px; color: var(--tj-color-text-body, #364e52); } /* 약관동의 줄은 항목 사이를 넉넉히 */ .tj-member-area .member-terms-agree .jqx-radiobutton { width: auto !important; margin-inline-end: 8px; } /* --------------------------------------------------------------- 폼 안의 jqx 콤보 / 드롭다운 (.contact-form .form-widget) /contact 의 "문의 종류"는 jqxDropDownList 가 그린다(skin_defined.php 의 GLOBAL_CONTACT). 테마가 energyblue 라 파란 상자로 나온다. 회원가입의 생년월일(jqxDateTimeInput)·추가필드(jqxComboBox)도 같은 자리에 들어온다. 위젯은 그대로 두고 겉모양만 옆 입력칸과 같은 밑줄 형태로 덮는다. 목록(팝업)은 body 로 옮겨져 그려지므로 여기서 못 잡는다. 그쪽은 위의 견적 계산기 블록에 있는 .jqx-popup / .jqx-listitem-* 규칙이 이미 처리한다. 크기는 위젯이 인라인으로 박으므로 건드리지 않는다. --------------------------------------------------------------- */ .contact-form .form-widget .jqx-widget, .contact-form .form-widget .jqx-widget div, .contact-form .form-widget .jqx-widget input { font-family: var(--tj-ff-body) !important; font-size: 15px !important; color: var(--tj-color-text-body-3, #67787a) !important; } /* 상자 본체 - 배경·테두리·모서리를 걷어낸다 */ .contact-form .form-widget .jqx-dropdownlist-state-normal, .contact-form .form-widget .jqx-dropdownlist-state-hover, .contact-form .form-widget .jqx-dropdownlist-state-selected, .contact-form .form-widget .jqx-combobox, .contact-form .form-widget .jqx-combobox-state-normal, .contact-form .form-widget .jqx-combobox-state-focus, .contact-form .form-widget .jqx-datetimeinput, .contact-form .form-widget .jqx-fill-state-normal, .contact-form .form-widget .jqx-fill-state-hover, .contact-form .form-widget .jqx-fill-state-pressed { background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; } .contact-form .form-widget .jqx-dropdownlist-content, .contact-form .form-widget .jqx-combobox-content { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } /* 콤보의 input 은 여백을 주면 안 된다. jqxComboBox._arrange 가 세로 가운데를 이미 잡아 두는데 padding 을 얹으면 글자만 내려가 화살표와 어긋난다. */ .contact-form .form-widget .jqx-combobox-input, .contact-form .form-widget .jqx-datetimeinput-content input { padding: 0 !important; background: transparent !important; border: 0 !important; } /* 화살표. jqWidgets 스프라이트를 지우고 꺾쇠를 그린다. 견적 계산기 쪽과 같은 모양이다. */ .contact-form .form-widget .jqx-icon-arrow-down, .contact-form .form-widget .jqx-icon-arrow-up, .contact-form .form-widget .jqx-icon-calendar { background-image: none !important; background-color: transparent !important; border: 0 !important; position: relative; } .contact-form .form-widget .jqx-icon-arrow-down::after, .contact-form .form-widget .jqx-icon-arrow-up::after { content: ""; position: absolute; inset-inline-end: 2px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-bottom: 2px solid var(--tj-color-heading-primary, #0c1e21); border-inline-end: 2px solid var(--tj-color-heading-primary, #0c1e21); transform: rotate(45deg); transform-origin: 66% 66%; } .contact-form .form-widget .jqx-icon-arrow-up::after { transform: rotate(-135deg); } /* 날짜 칸의 달력 아이콘 자리 */ .contact-form .form-widget .jqx-icon-calendar::after { content: ""; position: absolute; inset-inline-end: 2px; top: 50%; width: 13px; height: 12px; margin-top: -6px; border: 1.5px solid var(--tj-color-heading-primary, #0c1e21); border-top-width: 4px; border-radius: 2px; } /* 연락처 카드 4장은 글 줄 수가 달라 키가 제각각이었다. 칸 높이를 다 쓰게 해서 아랫변을 맞춘다. 줄바꿈될 때(=lg 미만) 아래 여백도 준다. */ .tj-contact-area .contact-item.style-2 { height: 100%; } @media (max-width: 991px) { .tj-contact-area .contact-item.style-2 { margin-bottom: 24px; } } /* --------------------------------------------------------------- 간편 결제 (etc/reqbill_list_bexon.html, 라이브 /reqbill) 표와 안내판은 board-list-page 규칙을 그대로 쓴다. 여기에는 그 규칙에 없는 것만 둔다. --------------------------------------------------------------- */ .reqbill-page .rq-title { margin: 60px 0 18px; font-family: var(--tj-ff-heading); font-size: 24px; font-weight: 600; color: var(--tj-color-heading-primary, #0c1e21); } .reqbill-page .bl-amount { white-space: nowrap; font-weight: 600; color: var(--tj-color-heading-primary, #0c1e21); } /* 표 안에 들어가는 작은 결제 버튼 */ .board-list-page .bl-write-sm { padding: 9px 18px; border: 0; font-size: 14px; cursor: pointer; } /* --------------------------------------------------------------- /inquiry_view · 상담 내역 보기 (etc/inquiry/inquiry_view_bexon.html) 상태 알약(.bl-st)과 빈 자리(.grid-empty)는 위 규칙을 나눠 쓴다. --------------------------------------------------------------- */ .inquiry-view-page .iv-card { padding: 40px 44px; margin-bottom: 24px; background: var(--tj-color-common-white, #fff); border-radius: 14px; box-shadow: 0 1px 2px rgba(12, 30, 33, 0.04), 0 8px 28px rgba(12, 30, 33, 0.05); } /* 머리: 누가 언제 냈는지 + 상태 */ .inquiry-view-page .iv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--tj-color-grey-1, #ecf0f0); } .inquiry-view-page .iv-title { margin: 0 0 8px; font-family: var(--tj-ff-heading); font-size: 22px; font-weight: 600; line-height: 1.45; color: var(--tj-color-heading-primary, #0c1e21); } .inquiry-view-page .iv-title strong { font-weight: 600; color: var(--tj-color-theme-primary, #1e8a8a); } .inquiry-view-page .iv-date { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; color: var(--tj-color-text-body-3, #67787a); } .inquiry-view-page .iv-head-status { flex: 0 0 auto; } /* 상담 내용 */ .inquiry-view-page .iv-body { min-height: 90px; font-size: 16px; line-height: 1.85; color: var(--tj-color-text-body, #364e52); word-break: break-word; } .inquiry-view-page .iv-body img { max-width: 100%; height: auto; } /* 담당 매니저 띠 */ .inquiry-view-page .iv-staff { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 30px; padding: 18px 22px; border-radius: 10px; background: var(--tj-color-theme-bg, #d8e5e5); } .inquiry-view-page .iv-staff-who { display: flex; align-items: center; gap: 10px; } .inquiry-view-page .iv-staff-label { padding: 5px 12px; border-radius: 50px; background: var(--tj-color-common-white, #fff); font-family: var(--tj-ff-heading); font-size: 12px; font-weight: 600; color: var(--tj-color-theme-primary, #1e8a8a); } .inquiry-view-page .iv-staff-who strong { font-family: var(--tj-ff-heading); font-size: 17px; font-weight: 600; color: var(--tj-color-heading-primary, #0c1e21); } .inquiry-view-page .iv-staff-links { display: flex; flex-wrap: wrap; gap: 8px 20px; } .inquiry-view-page .iv-staff-links a { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; color: var(--tj-color-text-body, #364e52); text-decoration: none; } .inquiry-view-page .iv-staff-links a:hover { color: var(--tj-color-theme-primary, #1e8a8a); } /* 처리 사항 */ .inquiry-view-page .iv-sec-title { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font-family: var(--tj-ff-heading); font-size: 20px; font-weight: 600; color: var(--tj-color-heading-primary, #0c1e21); } .inquiry-view-page .iv-count { min-width: 26px; padding: 3px 9px; border-radius: 50px; background: var(--tj-color-theme-primary, #1e8a8a); font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--tj-color-common-white, #fff); text-align: center; } /* 답변 한 건. 왼쪽 선으로 상담 내용과 구분한다. */ .inquiry-view-page .iv-reply { padding: 20px 22px; margin-bottom: 12px; border: 1px solid var(--tj-color-border-1, #c9d1d1); border-left: 3px solid var(--tj-color-theme-primary, #1e8a8a); border-radius: 10px; } .inquiry-view-page .iv-reply:last-child { margin-bottom: 0; } .inquiry-view-page .iv-reply-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 10px; font-size: 14px; color: var(--tj-color-text-body-3, #67787a); } .inquiry-view-page .iv-reply-head strong { font-family: var(--tj-ff-heading); font-size: 15px; font-weight: 600; color: var(--tj-color-heading-primary, #0c1e21); } .inquiry-view-page .iv-reply-date { margin-left: auto; white-space: nowrap; } .inquiry-view-page .iv-reply-body { font-size: 15px; line-height: 1.75; color: var(--tj-color-text-body, #364e52); word-break: break-word; } /* 답변이 없을 때. 목록의 빈 자리보다 짧게 잡는다. */ .inquiry-view-page .grid-empty { padding: 34px 0; line-height: 1.8; } /* 아래 버튼. 문의 폼의 버튼 줄과 같은 모양으로 맞춘다. */ .inquiry-view-page .iv-actions { display: flex; align-items: center; justify-content: flex-end; gap: 26px; margin-top: 34px; } .inquiry-view-page .iv-actions .text-btn { font-family: var(--tj-ff-heading); font-size: 15px; color: var(--tj-color-text-body-3, #67787a); text-decoration: none; } .inquiry-view-page .iv-actions .text-btn:hover { color: var(--tj-color-theme-primary, #1e8a8a); } @media (max-width: 767px) { .inquiry-view-page .iv-card { padding: 28px 22px; } .inquiry-view-page .iv-head { flex-direction: column-reverse; align-items: flex-start; gap: 14px; } .inquiry-view-page .iv-title { font-size: 19px; } .inquiry-view-page .iv-staff { flex-direction: column; align-items: flex-start; } .inquiry-view-page .iv-reply-date { margin-left: 0; } .inquiry-view-page .iv-actions { justify-content: space-between; gap: 14px; } } /* --------------------------------------------------------------- /search · 통합검색 (etc/search_bexon.html) --------------------------------------------------------------- */ /* 검색칸. 헤더 돋보기에서 넘어온 사람이 바로 다시 칠 수 있게 크게 둔다. */ .search-page .se-form { display: flex; gap: 12px; margin-bottom: 34px; } .search-page .se-input { flex: 1 1 auto; min-width: 0; height: 60px !important; padding: 0 24px !important; border: 1px solid var(--tj-color-border-1, #c9d1d1) !important; border-radius: 50px !important; background: var(--tj-color-common-white, #fff) !important; font-family: var(--tj-ff-body); font-size: 16px; color: var(--tj-color-heading-primary, #0c1e21); } .search-page .se-input:focus { outline: none; border-color: var(--tj-color-theme-primary, #1e8a8a) !important; } .search-page .se-input::placeholder { color: var(--tj-color-text-body-2, #a9b8b8); } .search-page .se-submit { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; height: 60px; padding: 0 32px; border: 0; border-radius: 50px; background: var(--tj-color-theme-primary, #1e8a8a); font-family: var(--tj-ff-heading); font-size: 16px; font-weight: 600; color: var(--tj-color-common-white, #fff); cursor: pointer; transition: background-color 0.3s ease; } .search-page .se-submit:hover { background: var(--tj-color-theme-dark, #0c1e21); } /* 몇 건 나왔는지 */ .search-page .se-summary { margin: 0 0 26px; padding-left: 4px; font-size: 16px; color: var(--tj-color-text-body-3, #67787a); } .search-page .se-summary strong { font-family: var(--tj-ff-heading); font-weight: 600; color: var(--tj-color-heading-primary, #0c1e21); } .search-page .se-summary em { font-style: normal; font-weight: 600; color: var(--tj-color-theme-primary, #1e8a8a); } /* 낱말이 없을 때 · 결과가 없을 때 */ .search-page .se-blank { padding: 74px 24px; text-align: center; background: var(--tj-color-common-white, #fff); border-radius: 14px; box-shadow: 0 1px 2px rgba(12, 30, 33, 0.04), 0 8px 28px rgba(12, 30, 33, 0.05); } .search-page .se-blank i { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; margin-bottom: 20px; border-radius: 50%; background: var(--tj-color-theme-bg, #d8e5e5); font-size: 26px; color: var(--tj-color-theme-primary, #1e8a8a); } .search-page .se-blank p { margin: 0 0 8px; font-family: var(--tj-ff-heading); font-size: 19px; font-weight: 600; color: var(--tj-color-heading-primary, #0c1e21); } .search-page .se-blank span { display: block; font-size: 15px; line-height: 1.7; color: var(--tj-color-text-body-3, #67787a); } /* 결과 묶음 */ .search-page .se-sec { margin-bottom: 44px; } .search-page .se-sec:last-child { margin-bottom: 0; } .search-page .se-sec-title { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-family: var(--tj-ff-heading); font-size: 20px; font-weight: 600; color: var(--tj-color-heading-primary, #0c1e21); } .search-page .se-count { min-width: 26px; padding: 3px 9px; border-radius: 50px; background: var(--tj-color-theme-primary, #1e8a8a); font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--tj-color-common-white, #fff); text-align: center; } .search-page .se-list { list-style: none; margin: 0; padding: 0; } .search-page .se-list li { margin-bottom: 12px; } .search-page .se-list li:last-child { margin-bottom: 0; } /* 줄 전체가 눌린다. 제목만 누르게 두면 표적이 너무 작다. */ .search-page .se-list a { display: block; padding: 22px 26px; background: var(--tj-color-common-white, #fff); border: 1px solid var(--tj-color-border-1, #c9d1d1); border-radius: 12px; text-decoration: none; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .search-page .se-list a:hover { border-color: var(--tj-color-theme-primary, #1e8a8a); box-shadow: 0 6px 20px rgba(12, 30, 33, 0.07); } .search-page .se-subject { display: block; margin-bottom: 8px; font-family: var(--tj-ff-heading); font-size: 17px; font-weight: 600; line-height: 1.5; color: var(--tj-color-heading-primary, #0c1e21); word-break: break-word; } .search-page .se-list a:hover .se-subject { color: var(--tj-color-theme-primary, #1e8a8a); } /* 미리보기는 두 줄까지. 자르는 것은 search.php 가 먼저 한다. */ .search-page .se-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: 15px; line-height: 1.7; color: var(--tj-color-text-body-3, #67787a); word-break: break-word; } @media (max-width: 575px) { .search-page .se-form { flex-direction: column; } .search-page .se-input, .search-page .se-submit { height: 54px !important; } .search-page .se-submit { justify-content: center; } .search-page .se-list a { padding: 18px 20px; } } /* --------------------------------------------------------------- /privacy · /stipulation · 약관 쪽 본문은 DB 에 든 옛 HTML 이다. 표도 있고 인라인 스타일도 섞여 있어서 카드 안에서 넘치지 않게만 잡아 준다. --------------------------------------------------------------- */ .policy-page .pl-card { padding: 46px 44px; background: var(--tj-color-common-white, #fff); border-radius: 14px; box-shadow: 0 1px 2px rgba(12, 30, 33, 0.04), 0 8px 28px rgba(12, 30, 33, 0.05); font-family: var(--tj-ff-body); font-size: 15px; line-height: 1.9; color: var(--tj-color-text-body-3, #67787a); word-break: break-word; } .policy-page .pl-card h1, .policy-page .pl-card h2, .policy-page .pl-card h3, .policy-page .pl-card h4, .policy-page .pl-card b, .policy-page .pl-card strong { font-family: var(--tj-ff-heading); color: var(--tj-color-heading-primary, #0c1e21); } .policy-page .pl-card h1, .policy-page .pl-card h2, .policy-page .pl-card h3, .policy-page .pl-card h4 { margin: 34px 0 12px; font-size: 18px; font-weight: 600; line-height: 1.5; } .policy-page .pl-card h1:first-child, .policy-page .pl-card h2:first-child, .policy-page .pl-card h3:first-child { margin-top: 0; } .policy-page .pl-card a { color: var(--tj-color-theme-primary, #1e8a8a); } .policy-page .pl-card img { max-width: 100%; height: auto; } /* 옛 본문에 표가 들어 있다. 좁은 화면에서 쪽을 밀지 않게 표만 흐르게 한다. */ .policy-page .pl-card table { max-width: 100%; border-collapse: collapse; } .policy-page .pl-card td, .policy-page .pl-card th { padding: 10px 12px; border: 1px solid var(--tj-color-border-1, #c9d1d1); } /* 약관 본문의 번호·글머리 목록 — 테마 리셋이 목록 표시를 지워 "제1조 1. 2. …" 번호가 보이지 않았다(2026-10-12 새 약관) */ .policy-page .pl-card ol { list-style: decimal; padding-left: 1.5em; } .policy-page .pl-card ul { list-style: disc; padding-left: 1.5em; } .policy-page .pl-card li { margin: 4px 0; } .policy-page .pl-card table td:first-child { white-space: nowrap; } /* "상담문의" 같은 구분 칸이 글자 단위로 꺾이지 않게 */ @media (max-width: 767px) { .policy-page .pl-card { padding: 26px 20px; font-size: 14px; } .policy-page .pl-card { overflow-x: auto; } } /* 푸터 약관 링크 */ .footer-policy { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 0 0 14px; padding: 0; } .footer-policy a { font-family: var(--tj-ff-heading); font-size: 14px; font-weight: 500; color: var(--tj-color-text-body-2, #a9b8b8); text-decoration: none; } .footer-policy a:hover { color: var(--tj-color-common-white, #fff); } /* --------------------------------------------------------------- /board/pw · 비밀번호 확인 (board/basic/password*_bexon.html) 폼 카드는 회원 화면과 같은 .contact-form 을 나눠 쓴다. --------------------------------------------------------------- */ .board-pw-page .bp-card { text-align: center; } .board-pw-page .bp-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 20px; border-radius: 50%; background: var(--tj-color-theme-bg, #d8e5e5); font-size: 24px; color: var(--tj-color-theme-primary, #1e8a8a); } /* 되돌릴 수 없는 일을 묻는 자리라 색을 달리한다. */ .board-pw-page .bp-icon-warn { background: #fdecec; color: #c0392b; } .board-pw-page .bp-title { margin-bottom: 12px; font-size: 20px; } /* .contact-form .form-lead 는 제목의 아래여백 35px 을 되당기려고 margin-top 이 -20px 이다. 여기서는 제목 여백을 줄였으므로 그대로 두면 안내 글이 제목 위로 올라타 글자가 겹친다. 되당김을 푼다. */ .board-pw-page .bp-lead { margin-top: 0; margin-bottom: 28px; } /* 지우는 자리에서는 확인 버튼도 빨갛게. 테마색 그대로 두면 되돌릴 수 없는 일인데도 평범한 다음 단계처럼 보인다. */ .board-pw-page .tj-primary-btn.bp-danger { background: #c0392b; } .board-pw-page .tj-primary-btn.bp-danger:hover { background: #96271b; } .board-pw-page .tj-primary-btn.bp-danger .btn-icon { background: var(--tj-color-common-white, #fff); } .board-pw-page .tj-primary-btn.bp-danger .btn-icon i { color: #c0392b; } /* 가운데 정렬된 카드라 라벨과 버튼 줄도 가운데로 */ .board-pw-page .form-input { text-align: left; } .board-pw-page .form-actions { justify-content: center; } /* 댓글쓰기 상자가 "수정 중" · "답글 쓰는 중" 일 때. 상자를 그 댓글 아래로 옮기기만 하면 겉모습이 같아서 눌러도 아무 일도 안 일어난 것처럼 보인다. 무엇을 하는 중인지 드러낸다. (bexon/js/app/dnb-comment-form.js 가 클래스를 붙인다) */ .ba-comment-write.is-edit, .ba-comment-write.is-reply { border-color: var(--tj-color-theme-primary, #1e8a8a); box-shadow: 0 0 0 3px rgba(30, 138, 138, 0.12); } .ba-comment-write.is-edit .ba-cw-head strong, .ba-comment-write.is-reply .ba-cw-head strong { color: var(--tj-color-theme-primary, #1e8a8a); } /* 되돌릴 길. 한 번 누르면 새 댓글을 쓸 수 없던 것을 푼다. */ .ba-cw-cancel { padding: 0; border: 0; background: transparent; font-family: var(--tj-ff-heading); font-size: 14px; color: var(--tj-color-text-body-3, #67787a); text-decoration: underline; cursor: pointer; } .ba-cw-cancel:hover { color: var(--tj-color-theme-primary, #1e8a8a); } /* 취소가 끼면서 칸이 셋이 된다. 안내글이 왼쪽을 다 먹게 해서 취소와 등록이 오른쪽에 붙어 있게 한다. */ .ba-cw-foot .ba-cw-note { margin-inline-end: auto; } /* ── 히어로 4분할 개편 (2026-09-21) ──────────────────────────────── 슬라이드가 3→4 장이 되면서 썸네일도 4개가 됐다. 원본 테마는 80px 정사각 3개 기준이라 wrapper 가 270px(80*3 + 15*2) 에 묶여 있다. 그대로 두면 네 번째 썸네일이 잘린다. 새 원본이 16:9 라 정사각보다 가로형이 덜 잘리므로 120x80 으로 넓힌다. */ .hero-thumb .swiper-wrapper { max-width: 525px; /* 120*4 + 15*3 */ } .hero-thumb .thumb-item { width: 120px !important; height: 80px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-thumb .swiper-wrapper { max-width: 465px; } /* 105*4 + 15*3 */ .hero-thumb .thumb-item { width: 105px !important; height: 70px; } } @media only screen and (max-width: 991px) { .hero-thumb .swiper-wrapper { max-width: 425px; } /* 95*4 + 15*3 */ .hero-thumb .thumb-item { width: 95px !important; height: 65px; } } /* 썸네일 라벨. 어느 슬라이드인지 보고 누르게 한다. 활성 표시용 .thumb-item::after 위로 올라와야 해서 z-index 를 준다. */ .hero-thumb .thumb-item .thumb-label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 12px 4px 5px; font-size: 11px; line-height: 1.2; font-weight: 600; letter-spacing: -0.3px; text-align: center; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(0deg, rgba(8, 20, 22, 0.9) 0%, rgba(8, 20, 22, 0) 100%); } @media only screen and (max-width: 1199px) { .hero-thumb .thumb-item .thumb-label { font-size: 10px; padding: 10px 3px 4px; } } /* 히어로 오버레이 재조정. 위쪽 .slider-bg-image::after 는 45% 지점에서 이미 0.55 라 우측 피사체가 묻힌다. 새 이미지는 인물/사물이 우측 1/3~1/2 에 있으므로 오른쪽을 덜 덮는다. (되돌리려면 이 블록만 지우면 위 원래 값이 다시 산다.) */ .tj-slider-section .slider-bg-image::after { background: linear-gradient(90deg, rgba(8, 20, 22, 0.92) 0%, rgba(8, 20, 22, 0.78) 35%, rgba(8, 20, 22, 0.25) 62%, rgba(8, 20, 22, 0.05) 100%); } /* 화면이 좁아지면 좌측 텍스트 영역이 줄어 우측 피사체가 글자를 침범한다. 배경 초점을 오른쪽으로 밀어 인물이 화면 밖으로 빠지게 한다. */ @media only screen and (max-width: 991px) { .tj-slider-section .slider-bg-image { background-position: 72% center; } } /* ============================================================ 2026-10-08 F2 2a — 섹션 편집(머리·꼬리·운영자 페이지) ============================================================ */ /* 화면 편집의 '위 여백 추가'. margin 이 아니라 padding — 안쪽 섹션의 margin 과 겹쳐 사라지지 않게(엔진 예약 이름 .sh-secbox). */ .sh-secbox { padding-top: var(--sh-secbox-gap, 0); } /* 지금 화면의 메뉴 강조 — 엔진 NAV_ON 이 a 에 class="on" 을 붙인다. bexon 의 li.current-menu-item 과 같은 모양. */ .mainmenu ul > li > a.on { color: var(--tj-color-theme-primary); } .mainmenu ul > li > a.on::after { color: var(--tj-color-theme-primary); } .mainmenu ul > li > a.on::before { opacity: 1; visibility: visible; } /* 서브 페이지 제목 띠(2026-10-12, 사용자 요청) — 띠를 줄이고(위 여백은 머리 .header-absolute — PC 90px, 폰 80px — 가 겹쳐 앉는 자리 포함), 게시판 제목 줄(design/board_head.html)도 같은 .dn-page-header 라 같이 줄어든다. */ .dn-page-header { padding-top: 150px; padding-bottom: 72px; } @media (max-width: 991px) { .dn-page-header { padding-top: 128px; padding-bottom: 48px; } .dn-page-header .tj-page-title { font-size: 34px; line-height: 1.25; } .dn-page-header .tj-page-link { margin-top: 18px; } } /* 운영자 페이지 탭줄 — 엔진 PAGE_TABS 의 ul.sh-tabrow(예약 이름). 어두운 제목 띠 안, 위치 표시 아래(design/page.html). 예전엔 띠 밖 밝은 바탕에 있어 '어두운 띠 – 탭 – 어두운 사진 띠'로 탭이 끼어 보였다(사용자 요청 2026-10-12) → 띠의 일부로. 첫 칸 = 묶음 대표 페이지(/si·/web·/maintenance) — 이름이 제목·위치 표시와 겹쳐 화면 글자만 '한눈에 보기'(접근성 이름은 메뉴 구조 그대로, '개요'는 유지보수의 '서비스 개요'와 헷갈려 쓰지 않았다). */ .dn-page-header:has(.sh-tabrow) { padding-bottom: 44px; } .dn-page-tabs .sh-tabrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 36px 0 0; padding: 0; list-style: none; } .dn-page-tabs .sh-tabrow a { display: inline-block; padding: 10px 22px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50px; background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.82); font-weight: 500; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .dn-page-tabs .sh-tabrow a:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.45); color: var(--tj-color-common-white, #fff); } .dn-page-tabs .sh-tabrow a.on { background: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white, #fff); } .dn-page-tabs .sh-tabrow li:first-child a { font-size: 0; } .dn-page-tabs .sh-tabrow li:first-child a::before { content: "한눈에 보기"; font-size: 16px; } /* 탭이 있는 화면의 첫 섹션 위 여백(120px)을 줄인다 */ .dn-page-header:has(.sh-tabrow) + .dn-page-body > .sh-secbox:first-child > section { padding-top: 64px; } /* 폰·태블릿: 탭을 한 줄 가로 스크롤로(태블릿에서 두 줄로 접히던 것까지), 지금 탭은 dn-sections.js initPageTabs 가 가운데로 */ @media (max-width: 991px) { .dn-page-header:has(.sh-tabrow) { padding-bottom: 32px; } .dn-page-tabs .sh-tabrow { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-top: 24px; padding-bottom: 2px; } .dn-page-tabs .sh-tabrow::-webkit-scrollbar { display: none; } .dn-page-tabs .sh-tabrow li { flex: 0 0 auto; } .dn-page-tabs .sh-tabrow a { padding: 8px 16px; font-size: 15px; white-space: nowrap; } .dn-page-tabs .sh-tabrow li:first-child a::before { font-size: 15px; } .dn-page-header:has(.sh-tabrow) + .dn-page-body > .sh-secbox:first-child > section { padding-top: 40px; } } /* 첫 섹션이 사진 띠(lead_photo)면 어두운 제목 띠와 어두운 사진 띠 사이에 흰 줄이 애매하게 끼었다(2026-10-12 사용자 확인) — 간격을 화면 좌우 여백(section-gap-x 15px·폰 12px)과 같게 해 카드 두 장을 붙여 놓은 모양으로. 탭 유무와 상관없이. */ .dn-page-header + .dn-page-body > .sh-secbox:first-child > section.dn-lead-photo { padding-top: 15px; } @media (max-width: 767px) { .dn-page-header + .dn-page-body > .sh-secbox:first-child > section.dn-lead-photo { padding-top: 12px; } } /* 글 섹션(rich_text) — 본문은 엔진이 만든 p·ul */ .dn-rich .sec-heading { margin-bottom: 24px; } .dn-rich-body p { margin-bottom: 1em; line-height: 1.8; } .dn-rich-body ul { margin: 0 0 1em; padding-left: 1.2em; list-style: disc; } .dn-rich-body li { margin-bottom: 0.4em; line-height: 1.7; } /* ---------- 2b 섹션 부품(.dn-*) — bexon 마크업이 레포에 없는 부품과 bexon 부품의 덧붙임 ---------- */ /* 히어로 배경 영상 — 사진(.slider-bg-image 배경) 위를 덮는다. 폰 절약 모드 등으로 재생이 막히면 포스터(같은 사진)가 보인다. */ .slider-bg-image .dn-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .dn-hero-en { margin-top: 8px; font-size: 15px; letter-spacing: 0.02em; opacity: 0.8; } .dn-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; } /* 테두리 버튼 — 어두운 배경 위 두 번째 버튼 */ .tj-primary-btn.dn-btn-line { background: transparent; border: 1px solid rgba(255, 255, 255, 0.6); } .tj-primary-btn.dn-btn-line:hover { border-color: var(--tj-color-theme-primary); } .dn-more-btn { margin-top: 40px; } /* 작은 제목(.sub-title) 통일 — 2026-10-13 사용자 요청('Tips' 글자·아이콘이 다른 곳과 다름). bexon 은 .sec-heading 안에서만 꾸민다(.sec-heading.style-3 .sub-title: 청록·대문자·굵게·아이콘 22px). 제목 칸이 .sec-heading 이 아닌 섹션(요청서 예시·AI 답변 화면·도입 문구·도입 문구+사진·도입 효과)은 회색 맨 글자로 나왔다 → 섹션 안이면 같은 모양으로. :where 로 우선순위를 가장 낮게 — .sec-heading 규칙과 어두운 섹션의 흰색 덮어쓰기(.dn-lead-photo·.dn-effect .sub-title)가 그대로 이긴다. */ :where(.sh-secbox) .sub-title { display: inline-flex; align-items: center; gap: 4px; color: var(--tj-color-theme-primary); font-size: 14px; font-weight: var(--tj-fw-bold); line-height: 1; letter-spacing: 1.4px; text-transform: uppercase; } :where(.sh-secbox) .sub-title i { display: inline-flex; color: var(--tj-color-theme-primary); font-size: 22px; line-height: 1; } .dn-effect .sub-title i { color: var(--tj-color-common-white, #fff); /* 청록 띠 위라 청록 아이콘이 묻힌다 */ } @media (max-width: 991px) { :where(.sh-secbox) .sub-title { font-size: 13px; } } /* 점 목록(글 + 사진) — 2026-10-13 사용자 요청: 두 칸에서 꺾이던 것을 한 줄씩, 겹화살표(tji-list) 대신 흰 원 안 체크 */ .dn-points { margin: 24px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 12px; } .dn-points li { display: flex; align-items: center; gap: 8px; font-weight: 500; } .dn-points .dn-pt-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tj-color-common-white, #fff); box-shadow: 0 0 0 1px rgba(30, 138, 138, 0.18); color: var(--tj-color-theme-primary); font-size: 14px; } /* 글+사진 버튼 — bexon 의 .about-btn-area 버튼은 좁은 카드용이라 width:100%·네모 모서리다. 넓은 글 칸에서 전체 폭 막대가 되던 것을 다른 화면의 기본 버튼(둥근 알약, 글자 폭)으로 되돌린다(2026-10-13 사용자 요청). */ /* 2026-10-13 사용자 요청: 글+사진 섹션의 연한 청록 판(#d8e5e5, bexon .tj-about-section-2)을 걷는다 — /web/service 처럼 여러 개가 이어지면 넓은 구간이 통째로 다른 색이라 부자연스럽다. 페이지 바탕 그대로. */ .tj-about-section-2.dn-text-image { background-color: transparent; } .dn-text-image .about-btn-area { margin-top: 28px; } .dn-text-image .about-btn-area .tj-primary-btn { width: auto; border-radius: 50px; padding: 5px 5px 5px 25px; } .dn-text-image .about-btn-area .tj-primary-btn .btn-icon { width: 42px; height: 42px; font-size: 20px; } /* 사진 카드가 4:3 으로 고정돼 가로가 긴 그림 아래 흰 빈칸이 남던 것 — 그림 비율을 따른다(2026-10-13) */ .dn-text-image .about-img { aspect-ratio: auto; } /* 2026-10-13 사용자 요청: 사진 둘레 흰 액자(옛 소개 섹션용 — 흰 카드 + 사진 안쪽 20px 여백 + 옅은 테두리)를 걷는다. 글+사진 섹션은 사진이 칸을 꽉 채우고, 둥근 모서리와 은은한 그림자만 남긴다(모든 페이지 공통). */ .tj-about-section-2.dn-text-image .about-img-area.style-2 .about-img { border: 0; border-radius: 16px; background-color: transparent; box-shadow: 0 20px 44px rgba(12, 30, 33, 0.12); } .tj-about-section-2.dn-text-image .about-img-area.style-2 .about-img img { display: block; padding: 0; object-fit: cover; } /* 숫자 카드 */ .dn-stats-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; } .dn-stat { padding: 36px 24px; border-radius: 12px; background: var(--tj-color-theme-bg, #f4f6f6); text-align: center; } .dn-stat-num { font-size: 52px; font-weight: 700; line-height: 1.1; color: var(--tj-color-heading-primary, #0c1e21); } .dn-stat-num em { font-style: normal; font-size: 0.55em; margin-left: 4px; color: var(--tj-color-theme-primary); } .dn-stat-label { margin-top: 10px; font-weight: 500; } /* 진행 단계 — 번호는 CSS 카운터 */ .dn-steps { counter-reset: dn-step; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; } .dn-step { counter-increment: dn-step; position: relative; padding: 28px 22px; border: 1px solid var(--tj-color-border-1, #e1e1e1); border-radius: 12px; background: var(--tj-color-common-white, #fff); } .dn-step::before { content: counter(dn-step, decimal-leading-zero); display: block; margin-bottom: 14px; font-size: 28px; font-weight: 700; color: var(--tj-color-theme-primary); } .dn-step-title { margin-bottom: 8px; font-size: 20px; } .dn-step-desc { margin: 0; font-size: 15px; line-height: 1.7; } /* 2026-10-13 '우리가 하는 일'(process_steps 의 note) — 쉬운 설명 아래 작은 회색 줄. 카드 높이가 달라도 줄이 맨 아래에 맞도록 카드를 세로 flex 로 */ .dn-step:has(.dn-step-note) { display: flex; flex-direction: column; } .dn-step-note { margin: auto 0 0; padding-top: 14px; border-top: 1px dashed var(--tj-color-border-1, #e1e1e1); font-size: 13px; line-height: 1.6; color: var(--tj-color-text-body-2, #6b7273); word-break: keep-all; } .dn-step-desc:has(+ .dn-step-note) { margin-bottom: 16px; } .dn-step-note span { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--tj-color-theme-primary, #1e8a8a); } /* 진행 단계 아이콘(process_steps 의 icon, 2026-10-13) — 카드 오른쪽 위 둥근 칸. 번호(::before)는 왼쪽 위 그대로 */ .dn-step-icon { position: absolute; top: 22px; right: 20px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tj-color-theme-bg, #d8e5e5); color: var(--tj-color-theme-primary); font-size: 22px; } /* 진행 단계 — 어두운 띠 + 빛나는 단계(process_steps 의 look=dark, 2026-10-13 /maintenance/sla 사용자 요청). 띠는 lead_photo 처럼 좌우 여백 안 둥근 상자, 카드는 반투명 유리, 번호는 빛나는 청록, 카드 사이에 화살표(한 줄에 다 들어가는 1200px~). */ .dn-process-dark { padding-top: 30px; padding-bottom: 30px; } .dn-process-band { position: relative; isolation: isolate; overflow: hidden; padding: 100px 0 110px; border-radius: 16px; background: radial-gradient(ellipse 60% 70% at 15% 0%, rgba(30, 138, 138, 0.35), transparent 70%), radial-gradient(ellipse 50% 60% at 90% 100%, rgba(30, 138, 138, 0.22), transparent 70%), var(--tj-color-theme-dark, #0c1e21); } /* 옅은 격자 무늬 — 관제 화면 느낌 */ .dn-process-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%); } .dn-process-dark .sec-title { color: var(--tj-color-common-white, #fff); } .dn-process-dark .sub-title { color: #5fd3cc; } .dn-process-dark .dn-steps { gap: 28px; } .dn-process-dark .dn-step { overflow: visible; border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: rgba(255, 255, 255, 0.72); } .dn-process-dark .dn-step::before { color: #5fd3cc; text-shadow: 0 0 18px rgba(95, 211, 204, 0.65); } .dn-process-dark .dn-step::after { border-radius: 12px 12px 0 0; background: #5fd3cc; } .dn-process-dark .dn-step-title { color: var(--tj-color-common-white, #fff); } .dn-process-dark .dn-step-desc { color: rgba(255, 255, 255, 0.72); } .dn-process-dark .dn-step-note { border-top-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.6); } .dn-process-dark .dn-step-note span { color: #5fd3cc; } .dn-process-dark .dn-step-icon { background: rgba(95, 211, 204, 0.14); color: #5fd3cc; box-shadow: 0 0 0 1px rgba(95, 211, 204, 0.3), 0 0 22px rgba(95, 211, 204, 0.25); } .dn-process-dark .dn-step:hover { border-color: rgba(95, 211, 204, 0.7); background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 1px rgba(95, 211, 204, 0.25), 0 18px 40px rgba(0, 0, 0, 0.35), 0 0 36px rgba(95, 211, 204, 0.18); } /* 카드 사이 화살표 — 다음 카드 쪽으로 꺾쇠 */ @media (min-width: 1200px) { .dn-process-dark .dn-step:not(:last-child) .dn-step-title::after { content: ""; position: absolute; top: 50%; right: -20px; width: 10px; height: 10px; margin-top: -5px; border-top: 2px solid #5fd3cc; border-right: 2px solid #5fd3cc; transform: rotate(45deg); opacity: 0.8; } } @media (max-width: 767px) { .dn-process-band { padding: 70px 0 80px; } } /* 진행 단계 — 밝은 바탕 + 어두운 카드(process_steps 의 look=darkcard, 2026-10-13 /maintenance/sla 사용자 요청). 띠는 없이 페이지 바탕 그대로, 제목·작은 제목은 다른 섹션과 같은 색. 카드만 어둡게 하고 번호 빛·아이콘·카드 사이 화살표는 dark 와 같게. */ .dn-process-cards .dn-steps { gap: 28px; } .dn-process-cards .dn-step { overflow: visible; border-color: rgba(95, 211, 204, 0.18); background: radial-gradient(120% 80% at 0% 0%, rgba(30, 138, 138, 0.35), transparent 60%), var(--tj-color-theme-dark, #0c1e21); box-shadow: 0 18px 40px rgba(12, 30, 33, 0.18); color: rgba(255, 255, 255, 0.72); } .dn-process-cards .dn-step::before { color: #5fd3cc; text-shadow: 0 0 18px rgba(95, 211, 204, 0.65); } .dn-process-cards .dn-step::after { border-radius: 12px 12px 0 0; background: #5fd3cc; } .dn-process-cards .dn-step-title { color: var(--tj-color-common-white, #fff); } .dn-process-cards .dn-step-desc { color: rgba(255, 255, 255, 0.72); } .dn-process-cards .dn-step-note { border-top-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.6); } .dn-process-cards .dn-step-note span { color: #5fd3cc; } .dn-process-cards .dn-step-icon { background: rgba(95, 211, 204, 0.14); color: #5fd3cc; box-shadow: 0 0 0 1px rgba(95, 211, 204, 0.3), 0 0 22px rgba(95, 211, 204, 0.25); } .dn-process-cards .dn-step:hover { border-color: rgba(95, 211, 204, 0.7); box-shadow: 0 0 0 1px rgba(95, 211, 204, 0.25), 0 22px 44px rgba(12, 30, 33, 0.28), 0 0 36px rgba(95, 211, 204, 0.18); } @media (min-width: 1200px) { .dn-process-cards .dn-step:not(:last-child) .dn-step-title::after { content: ""; position: absolute; top: 50%; right: -20px; width: 10px; height: 10px; margin-top: -5px; border-top: 2px solid var(--tj-color-theme-primary, #1e8a8a); border-right: 2px solid var(--tj-color-theme-primary, #1e8a8a); transform: rotate(45deg); opacity: 0.8; } } /* 상담 배너 */ .dn-cta-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 60px 56px; border-radius: 12px; background-color: var(--tj-color-theme-dark); background-size: cover; background-position: center; background-blend-mode: luminosity; color: var(--tj-color-common-white, #fff); } .dn-cta-title { margin: 0; color: var(--tj-color-common-white, #fff); } .dn-cta-desc { margin: 12px 0 0; color: rgba(255, 255, 255, 0.8); } .dn-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .dn-cta-tel { display: inline-flex; align-items: center; gap: 8px; color: var(--tj-color-common-white, #fff); font-size: 20px; font-weight: 600; } @media (max-width: 767px) { .dn-cta-box { padding: 40px 24px; } } /* 히어로 제목 — bexon 원본은 짧은 영문 기준이라 한글 문장이 4줄로 쪼개졌다. 글자 크기를 화면 폭에 맞추고 낱말 단위로만 줄을 바꾼다. */ /* bexon 은 .tj-slider-item .slider-content .slider-title(96px, 폭별 80·70·50px) — 그보다 한 단계 구체적으로 */ .tj-slider-section .tj-slider-item .slider-content .slider-title { font-size: clamp(32px, 3.6vw, 56px); line-height: 1.2; word-break: keep-all; } .tj-slider-section .tj-slider-item .slider-content .slider-desc { word-break: keep-all; } /* 상담 배너가 바로 아래 꼬리에 붙지 않게 */ .dn-cta { padding-bottom: 100px; } /* 히어로 한 장일 때(기획서 4-1 ①) — 넘김 화살표·아래 작은 그림 줄은 쓸 데가 없어 감춘다. 작은 그림 줄은 loop 가 아니라 복제가 없다 */ .tj-slider-section:has(.hero-thumb .thumb-item:only-child) .hero-navigation, .tj-slider-section:has(.hero-thumb .thumb-item:only-child) .hero-thumb { display: none !important; /* 화살표 줄에 d-inline-flex(!important)가 걸려 있다 */ } /* 사업 영역 두 칸(sections/biz_split.html, 기획서 4-1 ③) — 첫 카드는 크게 왼쪽 */ .dn-biz .sec-heading { margin-bottom: 48px; } .dn-biz-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; } .dn-biz-grid > .dn-biz-card:only-child { grid-column: 1 / -1; } .dn-biz-card { position: relative; display: flex; flex-direction: column; padding: 44px 40px; border-radius: 16px; background-color: var(--tj-color-common-white, #fff); background-size: cover; background-position: center; color: var(--tj-color-text-body, #364e52); overflow: hidden; isolation: isolate; } .dn-biz-card:first-child { min-height: 440px; } /* 사진을 깐 카드 — 어둡게 덮고 글자는 흰색 */ .dn-biz-card.has-img { color: rgba(255, 255, 255, 0.85); } .dn-biz-card.has-img::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(12, 30, 33, 0.92) 0%, rgba(12, 30, 33, 0.72) 100%); } .dn-biz-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 24px; border-radius: 50%; background: var(--tj-color-theme-bg, #d8e5e5); color: var(--tj-color-theme-primary); font-size: 32px; } .dn-biz-card.has-img .dn-biz-icon { background: var(--tj-color-theme-primary); color: var(--tj-color-common-white, #fff); } .dn-biz-title { margin: 0 0 12px; font-size: 28px; word-break: keep-all; } .dn-biz-card.has-img .dn-biz-title { color: var(--tj-color-common-white, #fff); } .dn-biz-desc { margin: 0 0 20px; word-break: keep-all; } .dn-biz-points { margin: 0 0 28px; padding: 0; list-style: none; } .dn-biz-points li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; word-break: keep-all; } .dn-biz-points i { flex: none; margin-top: 4px; color: var(--tj-color-theme-primary); } .dn-biz-more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; align-self: flex-start; color: var(--tj-color-heading-primary, #0c1e21); font-weight: 600; border-bottom: 1px solid currentColor; } .dn-biz-card.has-img .dn-biz-more { color: var(--tj-color-common-white, #fff); } .dn-biz-more:hover { color: var(--tj-color-theme-primary); } @media (max-width: 991px) { .dn-biz-grid { grid-template-columns: minmax(0, 1fr); } .dn-biz-card:first-child { min-height: 0; } .dn-biz-card { padding: 36px 24px; } .dn-biz-title { font-size: 24px; } } /* 상담 배너 + 간편 문의(sections/quick_inquiry.html, 기획서 4-1 ⑦) — 왼쪽 문구, 오른쪽 흰 폼 카드 */ .dn-qi { padding-bottom: 100px; } .dn-qi-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 48px; padding: 60px 56px; border-radius: 12px; background-color: var(--tj-color-theme-dark); background-size: cover; background-position: center; background-blend-mode: luminosity; color: var(--tj-color-common-white, #fff); } .dn-qi-title { margin: 0; color: var(--tj-color-common-white, #fff); word-break: keep-all; } .dn-qi-desc { margin: 16px 0 24px; color: rgba(255, 255, 255, 0.8); word-break: keep-all; } .dn-qi-text .dn-cta-tel { display: flex; margin-bottom: 16px; } .dn-qi-sub { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.85); border-bottom: 1px solid rgba(255, 255, 255, 0.4); } .dn-qi-sub:hover { color: var(--tj-color-common-white, #fff); } .dn-qi-form { padding: 32px; border-radius: 12px; background: var(--tj-color-common-white, #fff); color: var(--tj-color-heading-primary, #0c1e21); } .dn-qi-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } .dn-qi-field { margin-bottom: 14px; } .dn-qi-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; } .dn-qi-label .req { color: var(--tj-color-theme-primary); font-style: normal; } .dn-qi-in { display: block; width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--tj-color-border-1, #e1e1e1); border-radius: 8px; background: var(--tj-color-common-white, #fff); color: var(--tj-color-heading-primary, #0c1e21); } .dn-qi-in:focus { border-color: var(--tj-color-theme-primary); outline: none; } .dn-qi-in.is-bad { border-color: #d93025; } .dn-qi-sel { cursor: pointer; } .dn-qi-ta { height: auto; min-height: 104px; padding: 12px 16px; resize: vertical; } .dn-qi-captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } /* 폰(390px)에서 그림(48px 높이 → 폭 약 250px)이 줄을 다 차지해 입력칸이 31px 로 눌렸다 — 입력칸 최소 폭을 두고 넘치면 다음 줄로 */ .dn-qi-captcha .dn-qi-in { flex: 1 1 140px; min-width: 0; } .dn-qi-captcha[hidden], .dn-qi-altcha[hidden] { display: none !important; } /* dn-board.js 가 ALTCHA 모드면 이미지 칸을 hidden 으로 감춘다 — display:flex 가 hidden 을 이기지 않게 */ .dn-qi-capimg { flex: none; height: 48px; width: auto; max-width: 100%; border: 1px solid var(--tj-color-border-1, #e1e1e1); border-radius: 8px; cursor: pointer; } .dn-qi-agree { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 20px; color: var(--tj-color-text-body, #364e52); font-size: 14px; cursor: pointer; } .dn-qi-agree input { margin: 0; cursor: pointer; } .dn-qi-agree a { color: var(--tj-color-heading-primary, #0c1e21); text-decoration: underline; } /* 보내기 버튼(사용자 요청 2026-10-12) — bexon 알약 버튼(오른쪽 끝 검은 원 화살표)은 폭 100% 에서 균형이 깨진다. 입력칸과 같은 모서리의 각진 버튼, 글자와 화살표를 가운데 한 줄로. 올리면 진해지고 화살표가 앞으로. */ .dn-qi-btn { width: 100%; height: 56px; justify-content: center; gap: 10px; padding: 0 24px; border-radius: 10px; font-size: 17px; box-shadow: 0 8px 20px rgba(30, 138, 138, 0.25); transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; } .dn-qi-btn .btn-icon { width: auto; height: auto; background: none; border-radius: 0; overflow: visible; font-size: 20px; } .dn-qi-btn .btn-icon i { transform: none; transition: transform 0.3s ease; } .dn-qi-btn:hover { background-color: var(--tj-color-theme-dark, #0c1e21); box-shadow: 0 10px 24px rgba(12, 30, 33, 0.3); } .dn-qi-btn:hover .btn-icon i { transform: translateX(5px); } .dn-qi-btn:active { transform: translateY(1px); } .dn-qi-btn:focus-visible { outline: 3px solid rgba(30, 138, 138, 0.45); outline-offset: 3px; } .dn-qi-btn[disabled] { opacity: 0.6; pointer-events: none; } @media (max-width: 991px) { .dn-qi-box { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px 24px; } } @media (max-width: 575px) { .dn-qi-form { padding: 24px 16px; } .dn-qi-row { grid-template-columns: minmax(0, 1fr); } } /* 터미널 진단(sections/terminal.html, 기획서 4-2 ①) — 왼쪽 문구, 오른쪽 어두운 터미널 창. 줄 움직임은 dn-sections.js */ .dn-term-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 48px; } .dn-term-text .sec-title { word-break: keep-all; } .dn-term-desc { margin-top: 16px; word-break: keep-all; } .dn-term { border-radius: 12px; background: #0b1416; box-shadow: 0 20px 50px rgba(12, 30, 33, 0.18); overflow: hidden; } .dn-term-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #16242a; } .dn-term-bar span { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; } .dn-term-bar span:nth-child(2) { background: #febc2e; } .dn-term-bar span:nth-child(3) { background: #28c840; } .dn-term-bar em { margin-left: 8px; color: rgba(255, 255, 255, 0.5); font-size: 13px; font-style: normal; } .dn-term-body { padding: 24px; font-family: Consolas, "D2Coding", "Courier New", monospace; font-size: 15px; line-height: 1.8; } .dn-term-line { margin: 0; color: rgba(255, 255, 255, 0.82); word-break: break-all; } .dn-term-line.is-cmd { color: #7ee2d1; } .dn-term-line.is-cmd::before { content: "$ "; color: rgba(255, 255, 255, 0.45); } .dn-term-line.is-out::before { content: "› "; color: rgba(255, 255, 255, 0.35); } .dn-term-line.is-ok { color: #ffd166; font-weight: 600; } .dn-term-line.is-ok::before { content: "✓ "; } /* 스크립트가 붙으면(is-anim) 숨겼다가 한 줄씩 보인다 */ .dn-term.is-anim .dn-term-line { opacity: 0; transform: translateY(4px); transition: opacity 0.3s ease, transform 0.3s ease; } .dn-term.is-anim .dn-term-line.is-on { opacity: 1; transform: none; } @media (max-width: 991px) { .dn-term-wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; } .dn-term-body { padding: 20px 16px; font-size: 14px; } } /* 페이지 안 이동 탭(sections/anchor_tabs.html, 기획서 4-6) */ .dn-anchors { padding: 24px 0 0; } .dn-anchors-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; } .dn-anchors-list a { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border: 1px solid var(--tj-color-border-1, #e1e1e1); border-radius: 999px; background: var(--tj-color-common-white, #fff); color: var(--tj-color-heading-primary, #0c1e21); font-weight: 600; } .dn-anchors-list a:hover { border-color: var(--tj-color-theme-primary); color: var(--tj-color-theme-primary); } /* 오시는 길(sections/location.html, 기획서 4-6 ⑨·4-5 보조) */ .dn-loc .sec-heading { margin-bottom: 40px; } .dn-loc-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; padding: 40px; border-radius: 16px; background: var(--tj-color-common-white, #fff); } .dn-loc-info { margin: 0; } .dn-loc-row { display: flex; gap: 16px; padding: 6px 0; } .dn-loc-row dt { display: inline-flex; align-items: center; gap: 8px; flex: none; width: 96px; color: var(--tj-color-heading-primary, #0c1e21); font-weight: 600; } .dn-loc-row dt i { color: var(--tj-color-theme-primary); } .dn-loc-row dd { margin: 0; color: var(--tj-color-text-body, #364e52); word-break: keep-all; } .dn-loc-row dd a { color: inherit; } .dn-loc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .dn-loc-map { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; border: 1px solid var(--tj-color-border-1, #e1e1e1); border-radius: 999px; color: var(--tj-color-heading-primary, #0c1e21); font-weight: 600; } .dn-loc-map:hover { border-color: var(--tj-color-theme-primary); color: var(--tj-color-theme-primary); } @media (max-width: 767px) { .dn-loc-box { padding: 28px 20px; } .dn-loc-row { flex-direction: column; gap: 2px; } } /* ============================================================ 게시판(4단계, 2026-10-08) — board/dn_basic(공지·상담문의·유지보수 요청) · board/dn_portfolio(포트폴리오) · 섹션 board_list 제목 줄은 design/board_head.html(.tj-page-header.dn-page-header — 운영자 페이지와 같은 모양). 표 정렬: 제목(th)은 늘 가운데, 본문은 칸 성격대로 .col-c(번호·이름·날짜) · .col-l(제목) · .col-r(숫자). ============================================================ */ .dn-bd-page .container { max-width: 1080px; } /* 게시판 분류 탭 — 2026-10-13 사용자 요청: 흩어진 테두리 알약 대신 흰 바탕 한 줄 안의 세그먼트(고른 탭은 청록으로 채움). 넓은 화면은 가운데, 넘치면(폰) 줄바꿈 대신 한 줄 가로 스크롤. 포트폴리오·공지 등 게시판 목록 공통. */ .dn-bd-cats { display: flex; flex-wrap: nowrap; gap: 4px; width: fit-content; max-width: 100%; margin: 0 auto 36px; padding: 6px; list-style: none; border: 1px solid var(--tj-color-border-1, #e1e1e1); border-radius: 999px; background: var(--tj-color-common-white, #fff); box-shadow: 0 10px 30px rgba(12, 30, 33, 0.06); overflow-x: auto; scrollbar-width: none; } .dn-bd-cats::-webkit-scrollbar { display: none; } .dn-bd-cats li { flex: none; } .dn-bd-cats a { display: block; padding: 10px 22px; border-radius: 999px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--tj-color-text-body, #4a5455); white-space: nowrap; transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; } .dn-bd-cats a:hover { color: var(--tj-color-theme-primary); background: rgba(30, 138, 138, 0.08); } .dn-bd-cats .on a, .dn-bd-cats .on a:hover { color: var(--tj-color-common-white, #fff); background: var(--tj-color-theme-primary); box-shadow: 0 6px 16px rgba(30, 138, 138, 0.3); } .dn-bd-cats a:focus-visible { outline: 2px solid var(--tj-color-theme-primary); outline-offset: 2px; } @media (max-width: 767px) { .dn-bd-cats { margin-bottom: 24px; padding: 5px; } .dn-bd-cats a { padding: 8px 16px; font-size: 14px; } } .dn-bd-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .dn-bd-count { margin: 0; color: var(--tj-color-text-body-3, #555); } .dn-bd-count strong { color: var(--tj-color-theme-primary); } .tj-primary-btn.dn-btn-sm { padding: 10px 22px; } .dn-bd-table { width: 100%; border-top: 2px solid var(--tj-color-heading-primary, #0c1e21); border-collapse: collapse; } .dn-bd-table th { padding: 14px 10px; border-bottom: 1px solid var(--tj-color-border-1, #e1e1e1); font-weight: 600; text-align: center; } .dn-bd-table td { padding: 14px 10px; border-bottom: 1px solid var(--tj-color-border-1, #e1e1e1); vertical-align: middle; } .dn-bd-table .col-c { text-align: center; } .dn-bd-table .col-l { text-align: left; } .dn-bd-table .col-r { text-align: right; } .dn-bd-table .dn-col-num { width: 80px; } .dn-bd-table .dn-col-name { width: 120px; } .dn-bd-table .dn-col-date { width: 120px; } .dn-bd-table .dn-col-hit { width: 80px; } .dn-bd-table tr.is-notice { background: var(--tj-color-theme-bg, #f5f7f7); } .dn-bd-table .notice_text { display: inline-block; padding: 2px 10px; border-radius: 50px; background: var(--tj-color-theme-primary); color: var(--tj-color-common-white, #fff); font-size: 13px; } .dn-bd-subj a { color: var(--tj-color-heading-primary, #0c1e21); font-weight: 500; } .dn-bd-subj a:hover { color: var(--tj-color-theme-primary); } .dn-bd-cat { display: inline-block; margin-right: 6px; padding: 2px 10px; border: 1px solid var(--tj-color-theme-primary); border-radius: 50px; color: var(--tj-color-theme-primary); font-size: 13px; } .dn-bd-re, .dn-bd-new, .dn-bd-cmtcnt, .dn-bd-ico { margin-left: 4px; color: var(--tj-color-text-body-3, #555); font-size: 13px; } .dn-bd-new { color: var(--tj-color-theme-primary); font-weight: 700; } .dn-bd-empty { padding: 60px 10px; color: var(--tj-color-text-body-3, #555); text-align: center; } .dn-bd-foot { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 32px; } .dn-bd-search { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } /* 검색칸과 [검색] 버튼을 한 줄로(2026-10-13 — 폼이 줄어든 폭으로 잡혀 버튼이 다음 줄로 떨어졌다). 폰은 칸이 100% 라 두 줄 그대로 */ @media (min-width: 768px) { .dn-bd-foot > form { display: flex; justify-content: center; width: 100%; } /* 검색칸 넓게(2026-10-14 사용자 요청 — 묶음이 내용 폭으로 잡혀 칸이 219px 로 줄어 있었다). 묶음 480px, 칸이 남는 폭을 채운다 */ .dn-bd-search { flex-wrap: nowrap; width: min(480px, 100%); } .dn-bd-search .dn-bd-in { flex: 1 1 auto; width: auto; min-width: 0; } } .dn-bd-sel, .dn-bd-in, .dn-in { height: 48px; padding: 0 16px; border: 1px solid var(--tj-color-border-1, #e1e1e1); border-radius: 8px; background: var(--tj-color-common-white, #fff); color: var(--tj-color-heading-primary, #0c1e21); } .dn-bd-in { width: 260px; max-width: 100%; } .dn-bd-go, .dn-bd-btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px; border: 1px solid var(--tj-color-heading-primary, #0c1e21); border-radius: 8px; background: var(--tj-color-common-white, #fff); color: var(--tj-color-heading-primary, #0c1e21); font-weight: 500; transition: all 0.3s ease-in-out; } .dn-bd-go, .dn-bd-btn.is-dark, .dn-bd-go:hover, .dn-bd-btn:hover { background: var(--tj-color-heading-primary, #0c1e21); color: var(--tj-color-common-white, #fff); } .dn-bd-miss { padding: 20px; border: 1px dashed var(--tj-color-border-1, #e1e1e1); color: var(--tj-color-text-body-3, #555); text-align: center; } .dn-bdsec-more { margin-top: 40px; } /* 글 보기 */ .dn-bd-view-head { padding-bottom: 24px; border-bottom: 1px solid var(--tj-color-border-1, #e1e1e1); text-align: center; } .dn-bd-view-title { margin: 12px 0; font-size: clamp(24px, 3vw, 36px); word-break: keep-all; } .dn-bd-view-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 0; padding: 0; list-style: none; color: var(--tj-color-text-body-3, #555); font-size: 15px; } .dn-bd-kv { width: 100%; margin: 32px 0 0; border-top: 1px solid var(--tj-color-heading-primary, #0c1e21); border-collapse: collapse; } .dn-bd-kv th, .dn-bd-kv td { padding: 12px 16px; border-bottom: 1px solid var(--tj-color-border-1, #e1e1e1); text-align: left; vertical-align: top; word-break: break-all; } .dn-bd-kv th { width: 160px; background: var(--tj-color-theme-bg, #f5f7f7); font-weight: 600; text-align: center; } .dn-bd-files { margin: 24px 0 0; padding: 0; list-style: none; } .dn-bd-files li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; } .dn-bd-file-meta { color: var(--tj-color-text-body-3, #555); font-size: 14px; } .dn-bd-view-body { padding: 48px 0; line-height: 1.8; word-break: keep-all; } .dn-bd-view-body img { max-width: 100%; height: auto; } .dn-bd-view-btns { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 24px; border-top: 1px solid var(--tj-color-border-1, #e1e1e1); } .dn-bd-view-btns > div { display: flex; flex-wrap: wrap; gap: 8px; } .dn-bd-nav { margin: 32px 0 0; padding: 0; border-top: 1px solid var(--tj-color-border-1, #e1e1e1); list-style: none; } .dn-bd-nav li { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--tj-color-border-1, #e1e1e1); } .dn-bd-nav-lbl { flex: 0 0 80px; color: var(--tj-color-text-body-3, #555); text-align: center; } .dn-bd-cmt { margin-top: 48px; } .dn-bd-cmt-list { margin: 16px 0; padding: 0; list-style: none; } .dn-bd-cmt-item { padding: 16px 0; border-bottom: 1px solid var(--tj-color-border-1, #e1e1e1); } .dn-bd-cmt-item.is-re { padding-left: 32px; } .dn-bd-cmt-acts { float: right; } .dn-bd-cmt-acts button, .dn-bd-cmt-acts a { margin-left: 8px; border: 0; background: none; color: var(--tj-color-text-body-3, #555); font-size: 14px; } .dn-bd-cmt-write textarea.dn-in { width: 100%; height: 100px; padding: 12px 16px; } .dn-bd-cmt-guest { display: flex; gap: 8px; margin-bottom: 8px; } .dn-bd-cmt-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; } /* 글쓰기(상담문의·유지보수 요청 접수 폼) */ .dn-bd-form { padding: 40px; border: 1px solid var(--tj-color-border-1, #e1e1e1); border-radius: 16px; } .dn-bd-form-note { margin-bottom: 24px; color: var(--tj-color-text-body-3, #555); font-size: 14px; } .dn-bd-form .req { color: var(--tj-color-theme-primary); font-style: normal; } .dn-bd-form-row, .dn-bd-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; } .dn-field { margin-bottom: 20px; } .dn-label { display: block; margin-bottom: 8px; color: var(--tj-color-heading-primary, #0c1e21); font-weight: 600; } .dn-field .dn-in, .dn-field input.text-input, .dn-field select { width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--tj-color-border-1, #e1e1e1); border-radius: 8px; } /* 글쓰기 폼 선택칸 — 선택형 추가 항목(문의 유형·예산 범위)은 엔진이 jqxComboBox 로 만든다. 크기(100% x 48)는 dn-board.js 가 위젯 API 로 잡고, 여기서는 .dn-in 과 같은 테두리·여백·꺾쇠 화살표로 맞춘다. 목록(.jqx-listbox …)은 body 로 옮겨 그려져 위 "견적 계산기" 블록의 전역 규칙이 이미 잡는다. */ .dn-bd-form .jqx-combobox-state-normal, .dn-bd-form .jqx-combobox-state-focus { /* 위젯은 content-box 를 가정해 width 101.333% · height 49.3px 로 잡는다 — 이 스킨은 border-box 라 6px 넘친다 */ width: 100% !important; height: 48px !important; position: relative !important; border: 1px solid var(--tj-color-border-1, #e1e1e1) !important; border-radius: 8px !important; background: var(--tj-color-common-white, #fff) !important; box-shadow: none !important; cursor: pointer; } .dn-bd-form .jqx-combobox-state-focus { border-color: var(--tj-color-theme-primary) !important; } .dn-bd-form .jqx-combobox-content, .dn-bd-form .jqx-combobox-arrow-normal, .dn-bd-form .jqx-combobox-arrow-hover, .dn-bd-form .jqx-combobox-arrow-selected { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* 가로 여백만 준다 — 세로는 위젯이 marginTop 으로 가운데를 잡는다(위 견적 계산기 블록 주석) */ /* 고른 뒤 위젯이 글자를 전체 선택한다 — 하이라이트를 감춘다. 글자색은 inherit 이 아니라 직접 준다 (inherit 은 main.css ::selection 의 흰 글자를 물려받아 글자가 사라진다) */ .dn-bd-form .jqx-combobox-input::-moz-selection { background: transparent; color: var(--tj-color-heading-primary, #0c1e21); } .dn-bd-form .jqx-combobox-input::selection { background: transparent; color: var(--tj-color-heading-primary, #0c1e21); } .dn-bd-form .jqx-combobox-input { caret-color: transparent; box-sizing: border-box !important; padding: 0 36px 0 16px !important; background: transparent !important; color: var(--tj-color-heading-primary, #0c1e21) !important; font-family: var(--tj-ff-body) !important; font-size: var(--tj-fs-body, 16px) !important; cursor: pointer; } /* 화살표 — 위젯의 화살표 칸은 18px 에 overflow:hidden 이라 꺾쇠가 잘린다. 칸은 투명하게 두고(눌러 열기는 그대로) 꺾쇠는 바깥 틀에 그린다. 글자 부분을 눌러도 열리게 하는 것은 dn-board.js */ .dn-bd-form .jqx-combobox-state-normal .jqx-icon-arrow-down, .dn-bd-form .jqx-combobox-state-normal .jqx-icon-arrow-up { visibility: hidden; } .dn-bd-form .jqx-combobox-state-normal::after { content: ""; position: absolute; z-index: 1; right: 18px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-bottom: 2px solid var(--tj-color-heading-primary, #0c1e21); border-right: 2px solid var(--tj-color-heading-primary, #0c1e21); transform: rotate(45deg); pointer-events: none; } .dn-bd-editor textarea { width: 100%; min-height: 240px; padding: 12px 16px; border: 1px solid var(--tj-color-border-1, #e1e1e1); border-radius: 8px; } .dn-bd-files-in .dn-bd-file + .dn-bd-file { margin-top: 8px; } /* 파일 첨부 — dn-filepond.js 가 첨부 칸마다 FilePond 를 붙인다(칸 하나에 파일 하나, 전송 이름 board_file[n] 그대로) */ .dn-bd-file .filepond--root { margin-bottom: 0; font-family: var(--tj-ff-body); font-size: 15px; } /* FilePond 는 바탕을 위·가운데·아래 세 조각(.filepond--panel-root)으로 그린다 — 테두리를 주면 조각마다 끊겨 보여 색만 준다 */ .dn-bd-file .filepond--panel-root { background: #e3e8e8; } .dn-bd-file .filepond--drop-label { min-height: 48px; color: var(--tj-color-text-body-3, #555); } .dn-bd-file .filepond--drop-label label { padding: 0 16px; } .dn-bd-file .filepond--label-action { margin-right: 8px; color: var(--tj-color-heading-primary, #0c1e21); font-weight: 600; text-decoration-color: var(--tj-color-theme-primary); } .dn-bd-file .filepond--item-panel { border-radius: 6px; background: var(--tj-color-heading-primary, #0c1e21); } .dn-bd-file .filepond--item { margin: 6px; } .dn-bd-fp-fallback { margin-top: 8px; color: var(--tj-color-text-body-3, #555); font-size: 14px; } .dn-bd-privacy { margin-top: 8px; padding: 20px; border-radius: 8px; background: var(--tj-color-theme-bg, #f5f7f7); font-size: 14px; } .dn-bd-privacy textarea { width: 100%; height: 120px; margin-bottom: 8px; } /* 동의 줄 — dn-board.js 가 체크박스와 글자를 label 로 감싼다(글자를 눌러도 체크) */ .dn-bd-agree { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--tj-color-heading-primary, #0c1e21); cursor: pointer; } .dn-bd-agree input { margin: 0; cursor: pointer; } .dn-bd-agree-q { color: var(--tj-color-text-body, #364e52); } .dn-bd-privacy .privacy_yak_agree { margin-top: 20px; } .dn-bd-form-btns { display: flex; justify-content: center; gap: 12px; margin-top: 32px; } .dn-bd-pw { max-width: 440px; margin: 0 auto; text-align: center; } .dn-bd-pw .dn-in { width: 100%; margin: 16px 0; } .dn-bd-pw-btns { display: flex; justify-content: center; gap: 8px; } /* 포트폴리오 카드 — bexon .project-item 에 링크·요약 줄을 더했다 */ a.dn-pf-card { display: block; color: inherit; } .dn-pf-card .project-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--tj-color-theme-bg, #f5f7f7); } .dn-pf-card .project-img img { width: 100%; height: 100%; object-fit: cover; } .dn-pf-noimg { display: flex; align-items: center; justify-content: center; height: 100%; padding: 24px; color: var(--tj-color-text-body-3, #555); font-weight: 600; text-align: center; word-break: keep-all; } .dn-pf-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; color: var(--tj-color-text-body-3, #555); font-size: 14px; } .dn-pf-tags { margin: 4px 0 0; color: var(--tj-color-theme-primary); font-size: 14px; } /* 포트폴리오 카드 다듬기(2026-10-13 사용자 요청 — 마우스를 올려도 화살표만 나와 밋밋하던 것). 목록(board/dn_portfolio/list.html)만, 메인 사례 슬라이드는 그대로. 카드: 테두리·둥근 모서리, 올리면 떠오르며 그림자·청록 테두리 / 사진: 기울기 없이 천천히 확대 + 아래에서 어두운 막 + '자세히 보기' 분류: 청록 칩 / 제목 20px 두 줄까지 / 화살표: 늘 보이는 동그라미, 올리면 청록으로 채워지고 돈다. */ .dn-pf-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--tj-color-border-1, #e1e1e1); border-radius: 16px; transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; } .dn-pf-card .project-img { position: relative; height: auto; border-radius: 0; } .dn-pf-card .project-img::before { opacity: 0; background: linear-gradient(180deg, rgba(12, 30, 33, 0) 35%, rgba(12, 30, 33, 0.78) 100%); transition: opacity 0.4s ease; } .dn-pf-card .project-img img { transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); } .dn-pf-more { /* 2026-10-13 이름을 .dn-pf-view 로 썼다가 글 보기 섹션(view.html .dn-pf-view)과 겹쳐 본문이 통째로 숨었다 — 바꿈 */ position: absolute; left: 50%; bottom: 22px; z-index: 3; padding: 9px 18px; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--tj-color-common-white, #fff); background: rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transform: translate(-50%, 12px); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; white-space: nowrap; } .dn-pf-card .project-content { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; } .dn-pf-card .categories { align-self: flex-start; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: 0.02em; color: var(--tj-color-theme-primary, #1e8a8a); background: rgba(30, 138, 138, 0.1); } .dn-pf-card .project-text { flex-wrap: nowrap; align-items: flex-start; gap: 14px; margin-top: 14px; } .dn-pf-card .title { flex: 1; width: auto; max-width: none; font-size: 20px; line-height: 1.4; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.3s ease; } .dn-pf-card .project-btn { flex: none; width: 40px; height: 40px; border: 1px solid var(--tj-color-border-1, #e1e1e1); border-radius: 50%; font-size: 16px; color: var(--tj-color-heading-primary, #0c1e21); background: transparent; opacity: 1; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease; } .dn-pf-card .dn-pf-meta { margin-top: auto; padding-top: 14px; font-size: 13px; color: var(--tj-color-text-body-2, #6b7273); } .dn-pf-card .dn-pf-meta:empty { display: none; } .dn-pf-card .dn-pf-meta span + span::before { content: "·"; margin-right: 12px; color: var(--tj-color-border-1, #c9d2d3); } @media (hover: hover) { .dn-pf-card:hover { transform: translateY(-8px); border-color: rgba(30, 138, 138, 0.4); box-shadow: 0 24px 48px rgba(12, 30, 33, 0.12); } .project-item.dn-pf-card:hover .project-img img { transform: scale(1.06); } .dn-pf-card:hover .project-img::before { opacity: 1; } .dn-pf-card:hover .dn-pf-more { opacity: 1; transform: translate(-50%, 0); } .dn-pf-card:hover .title { color: var(--tj-color-theme-primary, #1e8a8a); } .dn-pf-card:hover .project-btn { border-color: var(--tj-color-theme-primary, #1e8a8a); color: var(--tj-color-common-white, #fff); background: var(--tj-color-theme-primary, #1e8a8a); transform: rotate(45deg); } } .dn-pf-card:focus-visible { outline: 2px solid var(--tj-color-theme-primary, #1e8a8a); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .dn-pf-card, .dn-pf-card .project-img img, .dn-pf-more, .dn-pf-card .project-btn { transition: none; } .dn-pf-card:hover, .project-item.dn-pf-card:hover .project-img img { transform: none; } } .dn-pf-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; padding: 28px 32px; border-radius: 16px; background: var(--tj-color-theme-bg, #f5f7f7); } .dn-pf-ask p { margin: 0; font-size: 20px; font-weight: 600; color: var(--tj-color-heading-primary, #0c1e21); } @media (max-width: 767px) { .dn-bd-form { padding: 24px 16px; } .dn-bd-form-row, .dn-bd-form-grid { grid-template-columns: minmax(0, 1fr); } .dn-bd-table .dn-col-name, .dn-bd-table .dn-col-hit, .dn-bd-table.is-full thead th:nth-child(3), .dn-bd-table.is-full thead th:nth-child(5), .dn-bd-table.is-full tbody td:nth-child(3), .dn-bd-table.is-full tbody td:nth-child(5) { display: none; } .dn-bd-table .dn-col-num { width: 56px; } .dn-bd-table .dn-col-date { width: 96px; } .dn-bd-kv th { width: 104px; } .dn-bd-in { width: 100%; } } /* 접수 게시판(board/dn_inquiry) — 관리자 목록 칸 · 방문자 관문 · 접수 완료 모달(bexon/js/app/dn-board.js) */ .dn-bd-table .dn-col-type { width: 100px; } .dn-bd-table .dn-col-org { width: 180px; } .dn-bd-admin-note { margin-left: 8px; color: var(--tj-color-text-body-3, #555); font-size: 13px; } .dn-inq-gate { padding: 80px 16px; text-align: center; } .dn-inq-gate p { margin-bottom: 20px; color: var(--tj-color-text-body-3, #555); } .dn-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(12, 30, 33, 0.55); } .dn-modal-box { width: 100%; max-width: 420px; padding: 40px 32px 32px; border-radius: 16px; background: var(--tj-color-common-white, #fff); text-align: center; } .dn-modal-title { margin: 0 0 12px; font-size: 26px; } .dn-modal-desc { margin: 0 0 28px; color: var(--tj-color-text-body-3, #555); word-break: keep-all; } .dn-modal-btns { display: flex; justify-content: center; gap: 8px; } @media (max-width: 767px) { .dn-bd-table.is-inq .dn-col-type, .dn-bd-table.is-inq .dn-col-name, .dn-bd-table.is-inq thead th:nth-child(2), .dn-bd-table.is-inq thead th:nth-child(5), .dn-bd-table.is-inq tbody td:nth-child(2), .dn-bd-table.is-inq tbody td:nth-child(5) { display: none; } .dn-bd-table .dn-col-org { width: 110px; } } /* 비회원 자동등록 방지 — 그림 + 입력칸(엔진 SPAM_IMG·SPAM_ID) */ .dn-bd-captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .dn-bd-captcha .dn-captcha-in { width: 220px; max-width: 100%; } /* 엔진 그림은 107x20 — 옆 입력칸 높이(48px)에 맞춰 키운다(비율 유지) */ .dn-bd-captcha #capimg { height: 48px; width: auto; border: 1px solid var(--tj-color-border-1, #e1e1e1); border-radius: 8px; background: var(--tj-color-common-white, #fff); box-sizing: border-box; } /* 자동입력 방지 lib(ALTCHA 판, 2026-10-12)가 내보내는 마크업 — 이미지 모드는 입력칸(#spam_id, 인라인 70x20 · .text-input)과 안내 한 줄을, https 는 을 함께 낸다. 인라인 크기를 이기려고 !important. 메인 간편 문의(.dn-qi-captcha)도 같은 위젯을 쓴다. */ .dn-bd-captcha input#spam_id { width: 220px !important; max-width: 100%; height: 48px !important; padding: 0 16px !important; border: 1px solid var(--tj-color-border-1, #e1e1e1) !important; border-radius: 8px !important; background: var(--tj-color-common-white, #fff) !important; box-shadow: none !important; } .dn-bd-captcha > span { flex-basis: 100%; color: var(--tj-color-text-body-3, #555) !important; font-size: 13px !important; } .dn-bd-captcha altcha-widget, .dn-qi-altcha altcha-widget, .form-altcha altcha-widget { --altcha-max-width: 320px; --altcha-border-radius: 8px; --altcha-color-border: var(--tj-color-border-1, #e1e1e1); --altcha-color-base: var(--tj-color-common-white, #fff); } /* ============================================================ 메인 화면 움직임·호버(2026-10-12, 사용자 요청 — 메인에 먼저 적용해 보는 예시) 범위는 메인 섹션([data-sh-sid^="main_"])만이다. 다른 화면으로 넓힐 때는 선택자만 넓힌다. 스크롤 등장은 dn-sections.js initReveal 이 .dn-rv 를 붙이고 화면에 들어오면 .is-in 을 붙인다 — 스크립트가 돌지 않으면 .dn-rv 가 없어 처음부터 보인다. 움직임 줄이기 설정이면 전부 끈다. ============================================================ */ /* 히어로 높이 — bexon 92.5vh 를 줄인다(폭 좁은 화면은 내용 높이가 정한다). */ /* min-height 가 max-height 를 이기므로 상한은 min() 안에 둔다(큰 모니터에서 끝없이 커지지 않게). */ [data-sh-sid="main_hero"] .tj-slider-item { min-height: min(78vh, 820px); } /* 높이는 글 칸 위아래 여백(bexon 195/347px — 아래는 슬라이드 썸네일·원형 글자 자리)이 정한다. 슬라이드 1장이라 썸네일이 없어 아래를 줄인다. */ @media (min-width: 992px) { [data-sh-sid="main_hero"] .tj-slider-item .slider-wrapper { padding-top: 150px; padding-bottom: 230px; } } /* 폰은 bexon 이 아래에 450px 를 비워 원형 'Explore More' 장식을 둔다 — 히어로가 화면보다 길어진다(1,070px). 장식을 감추고 여백을 줄인다. */ @media (max-width: 767px) { [data-sh-sid="main_hero"] .tj-slider-item .slider-wrapper { padding-top: 130px; padding-bottom: 72px; } [data-sh-sid="main_hero"] .circle-text-wrap { display: none; } } /* 히어로 사진이 천천히 다가온다(켄 번스). 사진 층만 움직이고 글자는 그대로. */ [data-sh-sid="main_hero"] .slider-bg-image { animation: dn-kenburns 18s ease-out both; transform-origin: 70% 50%; } @keyframes dn-kenburns { from { transform: scale(1.12); } to { transform: scale(1); } } /* 움직임 속도(사용자 요청 2026-10-12 — 사이트가 전반적으로 느리다): ① bexon 등장 효과(wow + animate.css)는 화면에 들어온 뒤 0.3~2초를 기다렸다가 1초에 걸쳐 떠올랐다 → 0.1초 대기 + 0.6초 재생. wow 가 data-wow-delay 를 인라인 animation-delay 로 넣으므로 !important 로 덮는다. 차례로 뜨게 한 곳은 아래 개별 규칙이 이긴다(선택자가 더 구체적). ② 히어로 글자는 1 / 1.25 / 1.5초를 기다렸다가 0.8초에 걸쳐 나왔다(첫 화면 완성 약 2.3초) → 0.15 / 0.3 / 0.45초 + 0.6초. */ .wow.animated { animation-duration: 0.6s !important; animation-delay: 0.1s !important; } .swiper-slide .slider-content .slider-title, .swiper-slide .slider-content .slider-desc, .swiper-slide .slider-content .slider-btn { transition-duration: 0.6s; } .swiper-slide.swiper-slide-active .slider-content .slider-title { transition-delay: 0.15s; } .swiper-slide.swiper-slide-active .slider-content .slider-desc { transition-delay: 0.3s; } .swiper-slide.swiper-slide-active .slider-content .slider-btn { transition-delay: 0.45s; } /* 스크롤 등장 — 아래에서 떠오르며 나타난다. 같은 줄의 카드는 --dn-rv-i 번째만큼 늦게. !important: 항목 자신의 호버 transition(.dn-step·.dn-biz-card 등)과 꺼 둔 wow 의 opacity:1 !important(위 .wow)를 등장하는 동안만 이긴다 — 다 뜨면 dn-sections.js 가 .dn-rv 를 떼어 원래 transition 으로 돌아간다. */ .dn-rv { opacity: 0 !important; transform: translateY(36px) !important; transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) !important; transition-delay: calc(var(--dn-rv-i, 0) * 0.08s) !important; } .dn-rv.is-in { opacity: 1 !important; transform: none !important; } /* bexon wow(fadeInUp)가 이미 붙은 카드는 한꺼번에 뜨던 것을 차례로 — wow 가 넣는 animation-delay(인라인)를 덮는다. */ .dn-step.wow:nth-child(2) { animation-delay: 0.18s !important; } .dn-step.wow:nth-child(3) { animation-delay: 0.26s !important; } .dn-step.wow:nth-child(4) { animation-delay: 0.34s !important; } .dn-step.wow:nth-child(5) { animation-delay: 0.42s !important; } .dn-step.wow:nth-child(6) { animation-delay: 0.5s !important; } [data-sh-sid^="main_"] .dn-biz-card.wow:nth-child(2) { animation-delay: 0.2s !important; } /* 호버 — 사업 영역 카드(사용자 요청 2026-10-12): 마우스를 올린 카드가 넓어지고 사진이 나타난다. 넓어지기는 모든 '사업 영역 두 칸'(2026-10-13 /maintenance/overview 대상 시스템에도, 사용자 요청), 사진이 나타나기는 메인만. 마우스가 있는 넓은 화면(hover:hover, 992px~)에서만 — 칸을 flex 로 바꿔 flex-grow 를 늘린다(카드 수가 1~3 어느 것이든). 사진은 카드 인라인 배경(biz_split 의 사진 칸)이고, 평소에는 흰 덮개(::after)가 가린다. 사진 칸이 빈 카드는 넓어지기만 한다. 폰·태블릿(마우스 없음)은 예전대로 사진이 늘 보인다. */ @media (min-width: 992px) and (hover: hover) { .dn-biz-grid { display: flex; gap: 24px; } .dn-biz-card { flex: 1 1 0; min-width: 0; min-height: 440px; transition: flex-grow 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease; } .dn-biz-card:hover { flex-grow: 1.8; box-shadow: 0 24px 48px rgba(12, 30, 33, 0.18); } /* 흰 덮개 — 어두운 막(::before)보다 뒤에 그려져 그 위를 덮는다. */ [data-sh-sid^="main_"] .dn-biz-card.has-img::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tj-color-common-white, #fff); transition: opacity 0.5s ease; } [data-sh-sid^="main_"] .dn-biz-card.has-img:hover::after { opacity: 0; } /* 평소에는 사진을 아예 그리지 않는다 — 흰 덮개만 두면 둥근 모서리 경계로 사진이 한 줄 비친다. */ [data-sh-sid^="main_"] .dn-biz-card.has-img:not(:hover) { background-size: 0 0; } /* 평소(덮개 위) 글자는 흰 카드 색, 올리면 사진 위 흰 글자 */ [data-sh-sid^="main_"] .dn-biz-card.has-img, [data-sh-sid^="main_"] .dn-biz-card.has-img .dn-biz-title, [data-sh-sid^="main_"] .dn-biz-card.has-img .dn-biz-more { transition: color 0.4s ease; } [data-sh-sid^="main_"] .dn-biz-card.has-img { color: var(--tj-color-text-body, #364e52); } [data-sh-sid^="main_"] .dn-biz-card.has-img .dn-biz-title { color: var(--tj-color-heading-primary, #0c1e21); } [data-sh-sid^="main_"] .dn-biz-card.has-img .dn-biz-more { color: var(--tj-color-heading-primary, #0c1e21); } [data-sh-sid^="main_"] .dn-biz-card.has-img .dn-biz-icon { background: var(--tj-color-theme-bg, #d8e5e5); color: var(--tj-color-theme-primary); } [data-sh-sid^="main_"] .dn-biz-card.has-img:hover { color: rgba(255, 255, 255, 0.85); } [data-sh-sid^="main_"] .dn-biz-card.has-img:hover .dn-biz-title, [data-sh-sid^="main_"] .dn-biz-card.has-img:hover .dn-biz-more { color: var(--tj-color-common-white, #fff); } [data-sh-sid^="main_"] .dn-biz-card.has-img:hover .dn-biz-icon { background: var(--tj-color-theme-primary); color: var(--tj-color-common-white, #fff); } [data-sh-sid^="main_"] .dn-biz-icon { transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.4s ease, color 0.4s ease; } [data-sh-sid^="main_"] .dn-biz-card:hover .dn-biz-icon { transform: translateY(-3px); } [data-sh-sid^="main_"] .dn-biz-more i { transition: transform 0.3s ease; } [data-sh-sid^="main_"] .dn-biz-card:hover .dn-biz-more i { transform: translateX(6px); } } /* 밝은 바탕 섹션이 이어지면 위아래 여백(각 120px, 폰은 줄어든 값)이 겹쳐 240px 가 빈다(사용자 요청 2026-10-12 — 메인에서 시작해 모든 화면). 앞 섹션도 밝은 바탕(.section-gap)이면 뒤 섹션 위 여백을 없애 앞 섹션 아래 여백 하나만 남긴다. 어두운 사례 띠(.tj-project-section-3)·띠 섹션(.section-gap 없음: 롤링 띠·상담 배너·간편 문의)은 앞뒤 모두 그대로. (2026-10-13 글+사진(.dn-text-image)도 판 배경을 걷어 다른 밝은 섹션과 같이 줄인다.) 운영자의 '위 여백 추가'(.sh-secbox 위 여백)는 그대로 더해진다. */ .sh-secbox:has(> section.section-gap:not(.tj-project-section-3)) + .sh-secbox > section.section-gap:not(.tj-project-section-3) { padding-top: 0; } /* 아이콘 카드(icon_cards .choose-box) — bexon 의 젤리처럼 튕기는 아이콘(gelatine 0.6s)은 가벼워 보여 끈다(사용자 요청 2026-10-12, 모든 화면). 대신 아이콘이 부드럽게 3px 떠오른다. */ .choose-box:hover .choose-icon { animation: none; transform: translateY(-3px); } .choose-box .choose-icon { transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.4s ease; } /* 아이콘 카드의 로고 그림(icon_cards logo — 자체 플랫폼 HiMeat·NOVA_IN, 2026-10-12 사용자 요청). 둥근 모서리 72px 그림 + 옅은 그림자, 올리면 살짝 커지며 그림자가 짙어진다(튕기지 않게 부드럽게). 카드가 둘뿐인 줄은 가운데로 모으고 폭을 넓힌다(4칸 줄의 왼쪽 반에만 몰려 있던 것). */ .choose-box .choose-icon.has-logo { max-width: none; } .choose-box .choose-icon.has-logo img { display: block; width: 72px; height: 72px; border-radius: 18px; object-fit: cover; /* 그림자는 그림 모양(투명 부분 제외)을 따라간다 — box-shadow 는 둥근 로고(NOVA_IN) 뒤에 네모 그림자가 비쳤다 */ filter: drop-shadow(0 8px 12px rgba(12, 30, 33, 0.18)); transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.45s ease; } .choose-box:hover .choose-icon.has-logo img { transform: scale(1.06); filter: drop-shadow(0 12px 18px rgba(12, 30, 33, 0.32)); } /* 카드 어디에 올려도 "자세히" 화살표가 바로 선다(bexon 은 버튼 자체에 올렸을 때만). */ .choose-box:hover .text-btn .btn-icon i { transform: rotate(0); } @media (min-width: 1200px) { .rightSwipeWrap:has(> .col-xl-3:nth-child(2):last-child) { justify-content: center; } .rightSwipeWrap:has(> .col-xl-3:nth-child(2):last-child) > .col-xl-3 { flex: 0 0 auto; width: 40%; } } /* 호버 — 아이콘 카드(bexon 이 이미 색을 바꾼다): 함께 떠오른다. 메인에서 시작해 모든 화면으로 넓혔다(2026-10-12). */ .choose-box:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(12, 30, 33, 0.14); } /* 호버 — 진행 단계(process_steps, 모든 화면): 떠오르고 테두리·번호가 강조색으로, 위쪽에 강조 줄이 그어진다. */ .dn-step { overflow: hidden; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } .dn-step::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--tj-color-theme-primary); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .dn-step:hover { transform: translateY(-6px); border-color: var(--tj-color-theme-primary); box-shadow: 0 16px 32px rgba(12, 30, 33, 0.1); } .dn-step:hover::after { transform: scaleX(1); } /* 자주 묻는 질문 — 펼친 답변이 질문 밑 점선과 카드 아래 끝 사이 가운데에 오게(bexon 은 위 15px·아래 25px 이라 위로 쏠려 보였다, 2026-10-12 사용자 요청). 질문 줄은 위아래 27px(폰 20px)로 이미 가운데라 답변 칸만 위아래를 같게 맞춘다. */ .tj-faq .accordion-item .accordion-body { margin-top: 0; padding-top: 22px; padding-bottom: 22px; } @media (max-width: 991px) { .tj-faq .accordion-item .accordion-body { padding-top: 18px; padding-bottom: 18px; } } /* +/− 표시 — bexon 은 아이콘 글꼴 글자(\e927·\e918)를 원 안에 line-height 로 앉혀 글자 모양마다 위아래·좌우가 1~2px 어긋났다(2026-10-12 사용자 요청). 글자 대신 막대 두 개를 배경으로 그려 원(테두리 안 30px)의 정가운데에 놓는다. 펼친 질문은 세로 막대 길이를 0 으로(−). 색은 원래대로 글자색(currentColor). */ .tj-faq .accordion-item .faq-title { --dn-faq-v: 12px; } .tj-faq .accordion-item .faq-title:not(.collapsed) { --dn-faq-v: 0px; } .tj-faq .accordion-item .faq-title::after, .tj-faq.style-2 .accordion-item:has(button:not(.collapsed)) .faq-title::after { content: ""; background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: center; background-size: 12px 2px, 2px var(--dn-faq-v); transition: background-size 0.25s ease; } /* 서브 페이지 항목 호버(2026-10-12 사용자 요청 — 등장 효과만 있고 호버가 없던 것. 체크 목록은 아래 무작위 체크로 바꿈). .dn-step 과 같은 말투: 테두리 강조 + 살짝 뜸 + 그림자. 마우스가 있는 화면에서만(폰에서 눌렀을 때 호버가 남지 않게). */ .dn-check-item, .dn-stat, .dn-cert-img, .tj-faq .accordion-item { transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, background-color 0.35s ease; } .dn-tl-item::before { transition: transform 0.35s ease; } /* 자가 진단 체크 — 호버 대신 무작위 2~3개를 차례로 체크(dn-sections.js initCheckPick, 2026-10-12 사용자 요청). 스크립트가 목록에 .is-pick 을 붙이면 체크가 옅은 회색이 되고, 고른 항목(.is-picked)만 원래 색으로 바뀌며 톡 커졌다 돌아온다. */ .dn-check-list.is-pick .dn-check-item > i { color: #c4cfd0; transition: color 0.35s ease; } .dn-check-list.is-pick .dn-check-item.is-picked { border-color: var(--tj-color-theme-primary); box-shadow: 0 10px 24px rgba(30, 138, 138, 0.12); } .dn-check-list.is-pick .dn-check-item.is-picked > i { color: var(--tj-color-theme-primary); animation: dn-check-pop 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); } @keyframes dn-check-pop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } } .dn-tl-year { transition: color 0.35s ease; } .dn-cmp-table tbody tr { transition: background-color 0.25s ease; } @media (hover: hover) { .dn-stat:hover { transform: translateY(-6px); background: var(--tj-color-common-white, #fff); box-shadow: 0 16px 32px rgba(12, 30, 33, 0.1); } .dn-cert-img:hover { transform: translateY(-6px); border-color: var(--tj-color-theme-primary); box-shadow: 0 16px 32px rgba(12, 30, 33, 0.1); } .dn-tl-item:hover::before { transform: scale(1.5); } .dn-tl-item:hover .dn-tl-year { color: var(--tj-color-theme-primary); } .tj-faq .accordion-item:hover { box-shadow: 0 10px 24px rgba(12, 30, 33, 0.07); } .dn-cmp-table tbody tr:hover { background: var(--tj-color-theme-bg, #f4f6f6); } } /* 호버 — 사례 슬라이드 카드(board_cards .project-slider-2 — 메인 대표 사례와 서브 페이지 사례 목록 공통, 사용자 요청 2026-10-12). bexon 기본(사진 1.1배 + 2도 기울임)은 모서리가 어긋나 보여 걷어 낸다: 사진은 천천히 살짝 확대 + 아래에서 어두운 막, 카드 테두리가 강조색으로, 아래에 강조 줄, 제목이 강조색, 화살표는 강조색 원 안에서 바로 선다. 슬라이더가 위아래를 잘라 카드를 띄우지는 않는다(그림자는 어두운 바탕에 보이지 않는다). */ .project-slider-2 .project-item { outline: 1px solid transparent; outline-offset: -1px; transition: outline-color 0.4s ease; } /* 사진 칸 비율 4:3 — 포트폴리오 목록 카드(.dn-pf-card)와 맞춘다(사용자 요청 2026-10-16). 섹션 썸네일은 엔진이 480x480 정사각으로 만들어 비율을 정하지 않으면 정사각 칸이 됐다. 사진은 그 정사각 썸네일을 다시 위아래로 잘라 채운다. */ .project-slider-2 .project-item .project-img { height: auto; aspect-ratio: 4 / 3; } /* bexon 기본이 사진 위에 늘 깔던 어두운 막(::before, 16%)을 끈다 — 포트폴리오 목록 카드처럼 사진을 제 색으로(사용자 요청 2026-10-16). 마우스를 올렸을 때의 막은 아래 ::after */ .project-slider-2 .project-item .project-img::before { opacity: 0; } .project-slider-2 .project-item .project-img img { transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); } .project-slider-2 .project-item:hover .project-img img { transform: scale(1.06); } .project-slider-2 .project-item .project-img::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(12, 30, 33, 0.6) 0%, rgba(12, 30, 33, 0) 55%); opacity: 0; transition: opacity 0.5s ease; } .project-slider-2 .project-item:hover .project-img::after { opacity: 1; } .project-slider-2 .project-item::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--tj-color-theme-primary); transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease; } .project-slider-2 .project-item:hover { outline-color: var(--tj-color-theme-primary); } .project-slider-2 .project-item:hover::after { transform: scaleX(1); } .project-slider-2 .project-item .title, .project-slider-2 .project-item .title a { transition: color 0.3s ease; } .project-slider-2 .project-item:hover .title a { color: var(--tj-color-theme-primary); } .project-slider-2 .project-item .project-btn { flex: none; width: 46px; height: 46px; border-radius: 50%; font-size: 22px; background: var(--tj-color-theme-primary); transform: translateX(-10px); transition: opacity 0.35s ease, transform 0.35s ease; } .project-slider-2 .project-item:hover .project-btn { transform: none; } .project-slider-2 .project-item .project-btn i, .project-slider-2 .project-item .project-btn:hover i { color: var(--tj-color-common-white, #fff); } .project-slider-2 .project-item:hover .project-btn i { transform: rotate(0); } /* 사업 목록(service_list .service-3 — /si "Our Answer", /web/service). 마우스를 올리면 사진이 마우스 자리에 떠올라 따라온다(2026-10-12 사용자 요청 — 줄 전체 배경으로 깔던 방식은 사진과 글자가 겹쳐 보였다). 위치는 dn-sections.js initServiceReveal 이 left/top 으로 준다(스크립트가 없으면 bexon 처럼 줄 가운데). 사진은 가로로 긴 사진이라 피사체가 있는 오른쪽을 잡는다. 설명 칸은 bexon 360px 고정이라 짧은 문장도 두 줄로 꺾였다 → 넓힌다. 폰·태블릿(마우스 없음)은 아래 블록대로 각 줄 아래 사진 띠. */ .tj-service-section.service-3 .service-content-wrap .service-content { flex: 0 1 560px; } .tj-service-section.service-3 .service-content-wrap .service-content .desc { max-width: 560px; } @media (min-width: 992px) and (hover: hover) { .tj-service-section.service-3 .service-item.style-3 { position: relative; } .tj-service-section.service-3 .service-reveal-bg { width: 340px; height: 220px; margin-top: 0 !important; background-size: cover; background-position: right center !important; box-shadow: 0 18px 40px rgba(12, 30, 33, 0.3); transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.215, 0.61, 0.355, 1); } } @media (max-width: 991px), (hover: none) { .tj-service-section.service-3 .service-reveal-bg { display: block; position: relative; top: auto; inset-inline-start: auto; width: 100%; height: 180px; margin: 20px 0 0 !important; opacity: 1; transform: none !important; border-radius: 10px; } } /* 사례 슬라이드 이전·다음 버튼(board_cards — 제목 줄 오른쪽, 사용자 요청 2026-10-12). 어두운 바탕에서 테두리(border-2)가 거의 안 보이고, 제목 가운데 높이에 떠 있어 어디에 붙은 버튼인지 애매했다: 제목 아래선에 맞춰 카드 바로 위에 두고, 반투명 흰 원 + 또렷한 테두리, 올리면 강조색으로 채운다. */ .tj-project-section-3 .heading-wrap-content { align-items: flex-end; } .tj-project-section-3 .slider-navigation { gap: 10px; } .tj-project-section-3 .slider-next, .tj-project-section-3 .slider-prev { width: 56px; height: 56px; font-size: 22px; cursor: pointer; background-color: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.35); transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; } .tj-project-section-3 .slider-next:hover, .tj-project-section-3 .slider-prev:hover { background-color: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); } .tj-project-section-3 .slider-next:active, .tj-project-section-3 .slider-prev:active { transform: scale(0.95); } /* 올렸을 때 화살표가 옆으로 빠지고 새로 들어오던 bexon 움직임(.anim-icon 두 번째 i)은 뺀다 — 원 색만 바뀐다. */ .tj-project-section-3 .slider-next .anim-icon i, .tj-project-section-3 .slider-prev .anim-icon i, .tj-project-section-3 .slider-next:hover .anim-icon i, .tj-project-section-3 .slider-prev:hover .anim-icon i { transform: none; transition: none; } .tj-project-section-3 .slider-next .anim-icon i:last-child, .tj-project-section-3 .slider-prev .anim-icon i:last-child { display: none; } .tj-project-section-3 .slider-next.swiper-button-disabled, .tj-project-section-3 .slider-prev.swiper-button-disabled { opacity: 0.35; pointer-events: none; } @media (prefers-reduced-motion: reduce) { [data-sh-sid="main_hero"] .slider-bg-image { animation: none; } .dn-rv { opacity: 1 !important; transform: none !important; transition: none !important; } [data-sh-sid^="main_"] .dn-biz-card, [data-sh-sid^="main_"] .dn-biz-card.has-img::after { transition: none; } .choose-box:hover, .dn-step:hover, .dn-stat:hover, .dn-cert-img:hover, .dn-tl-item:hover::before { transform: none; } .project-slider-2 .project-item:hover .project-img img { transform: none; } } /* ============================================================ Phosphor 아이콘(2026-10-12, 사용자 요청) — MIT 라이선스, Copyright (c) 2023 Phosphor Icons (bexon/icons/ph/LICENSE.txt). 글꼴이 아니라 SVG 파일을 mask 로 칠한다 — 색은 글자색(currentColor), 크기는 글자 크기(1em)를 따른다. ① 카드 아이콘: 섹션 아이콘 선택지의 값 ph-<이름>(두 톤 duotone) — 처럼 그대로 붙는다. ② 화면 곳곳의 bexon·Font Awesome 글꼴 아이콘(작은 제목 상자·체크·화살표·전화·위치·메일·닫기)을 같은 뜻의 Phosphor(regular)로 바꿔 칠한다. 처음엔 메인만, 지금은 모든 화면(2026-10-12). 여기 없는 글꼴 아이콘은 예전 그대로다. ============================================================ */ i[class^="ph-"], i.tji-box, i.tji-check, i.tji-arrow-right-long, i.tji-arrow-right, i.tji-arrow-right-big, i.tji-arrow-left, i.tji-arrow-down-big, i.tji-phone, i.tji-location, i.tji-envelop, i.fa-angle-right, i.fa-times { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: var(--ph) center / contain no-repeat; mask: var(--ph) center / contain no-repeat; vertical-align: -0.125em; } i[class^="ph-"]::before, i.tji-box::before, i.tji-check::before, i.tji-arrow-right-long::before, i.tji-arrow-right::before, i.tji-arrow-right-big::before, i.tji-arrow-left::before, i.tji-arrow-down-big::before, i.tji-phone::before, i.tji-location::before, i.tji-envelop::before, i.fa-angle-right::before, i.fa-times::before { content: none; } .ph-buildings { --ph: url("../icons/ph/buildings-duotone.svg"); } .ph-browsers { --ph: url("../icons/ph/browsers-duotone.svg"); } .ph-stack { --ph: url("../icons/ph/stack-duotone.svg"); } .ph-seal-check { --ph: url("../icons/ph/seal-check-duotone.svg"); } .ph-cloud-check { --ph: url("../icons/ph/cloud-check-duotone.svg"); } .ph-wrench { --ph: url("../icons/ph/wrench-duotone.svg"); } .ph-cpu { --ph: url("../icons/ph/cpu-duotone.svg"); } .ph-robot { --ph: url("../icons/ph/robot-duotone.svg"); } .ph-brain { --ph: url("../icons/ph/brain-duotone.svg"); } .ph-shield-check { --ph: url("../icons/ph/shield-check-duotone.svg"); } .ph-chart-line-up { --ph: url("../icons/ph/chart-line-up-duotone.svg"); } .ph-headset { --ph: url("../icons/ph/headset-duotone.svg"); } .ph-users-three { --ph: url("../icons/ph/users-three-duotone.svg"); } .ph-lightbulb { --ph: url("../icons/ph/lightbulb-duotone.svg"); } .ph-gear-six { --ph: url("../icons/ph/gear-six-duotone.svg"); } .ph-video-camera { --ph: url("../icons/ph/video-camera-duotone.svg"); } .ph-monitor { --ph: url("../icons/ph/monitor-duotone.svg"); } .ph-code { --ph: url("../icons/ph/code-duotone.svg"); } .ph-database { --ph: url("../icons/ph/database-duotone.svg"); } .ph-medal { --ph: url("../icons/ph/medal-duotone.svg"); } .ph-cow { --ph: url("../icons/ph/cow-duotone.svg"); } .ph-mountains { --ph: url("../icons/ph/mountains-duotone.svg"); } .ph-sparkle { --ph: url("../icons/ph/sparkle-duotone.svg"); } .ph-plugs-connected { --ph: url("../icons/ph/plugs-connected-duotone.svg"); } .ph-chart-bar { --ph: url("../icons/ph/chart-bar-duotone.svg"); } .ph-person-arms-spread { --ph: url("../icons/ph/person-arms-spread-duotone.svg"); } .ph-device-mobile { --ph: url("../icons/ph/device-mobile-duotone.svg"); } .ph-note-pencil { --ph: url("../icons/ph/note-pencil-duotone.svg"); } .ph-bell-ringing { --ph: url("../icons/ph/bell-ringing-duotone.svg"); } .ph-magnifying-glass { --ph: url("../icons/ph/magnifying-glass-duotone.svg"); } .ph-lock-key { --ph: url("../icons/ph/lock-key-duotone.svg"); } .ph-calendar-check { --ph: url("../icons/ph/calendar-check-duotone.svg"); } .ph-flow-arrow { --ph: url("../icons/ph/flow-arrow-duotone.svg"); } .ph-chart-pie-slice { --ph: url("../icons/ph/chart-pie-slice-duotone.svg"); } .ph-file-xls { --ph: url("../icons/ph/file-xls-duotone.svg"); } .ph-user-gear { --ph: url("../icons/ph/user-gear-duotone.svg"); } .ph-trend-up { --ph: url("../icons/ph/trend-up-duotone.svg"); } .ph-broadcast { --ph: url("../icons/ph/broadcast-duotone.svg"); } .ph-security-camera { --ph: url("../icons/ph/security-camera-duotone.svg"); } .ph-presentation-chart { --ph: url("../icons/ph/presentation-chart-duotone.svg"); } .ph-warning { --ph: url("../icons/ph/warning-duotone.svg"); } .ph-toolbox { --ph: url("../icons/ph/toolbox-duotone.svg"); } .ph-scan { --ph: url("../icons/ph/scan-duotone.svg"); } .ph-file-magnifying-glass { --ph: url("../icons/ph/file-magnifying-glass-duotone.svg"); } .ph-bank { --ph: url("../icons/ph/bank-duotone.svg"); } .ph-factory { --ph: url("../icons/ph/factory-duotone.svg"); } .ph-storefront { --ph: url("../icons/ph/storefront-duotone.svg"); } .ph-rocket-launch { --ph: url("../icons/ph/rocket-launch-duotone.svg"); } .ph-cursor-click { --ph: url("../icons/ph/cursor-click-duotone.svg"); } .ph-translate { --ph: url("../icons/ph/translate-duotone.svg"); } .ph-devices { --ph: url("../icons/ph/devices-duotone.svg"); } .ph-pencil-simple-line { --ph: url("../icons/ph/pencil-simple-line-duotone.svg"); } .ph-chat-circle-text { --ph: url("../icons/ph/chat-circle-text-duotone.svg"); } .ph-siren { --ph: url("../icons/ph/siren-duotone.svg"); } .ph-hard-drives { --ph: url("../icons/ph/hard-drives-duotone.svg"); } .ph-arrows-left-right { --ph: url("../icons/ph/arrows-left-right-duotone.svg"); } .ph-stamp { --ph: url("../icons/ph/stamp-duotone.svg"); } .ph-stack-plus { --ph: url("../icons/ph/stack-plus-duotone.svg"); } .ph-user-focus { --ph: url("../icons/ph/user-focus-duotone.svg"); } .ph-clock-clockwise { --ph: url("../icons/ph/clock-clockwise-duotone.svg"); } .ph-share-network { --ph: url("../icons/ph/share-network-duotone.svg"); } i.tji-box { --ph: url("../icons/ph/cube.svg"); } i.tji-check { --ph: url("../icons/ph/check.svg"); } i.tji-arrow-right-long { --ph: url("../icons/ph/arrow-right.svg"); } i.tji-arrow-right { --ph: url("../icons/ph/arrow-right.svg"); } i.tji-arrow-right-big { --ph: url("../icons/ph/arrow-right.svg"); } i.tji-arrow-left { --ph: url("../icons/ph/arrow-left.svg"); } i.tji-arrow-down-big { --ph: url("../icons/ph/arrow-down.svg"); } i.tji-phone { --ph: url("../icons/ph/phone.svg"); } i.tji-location { --ph: url("../icons/ph/map-pin.svg"); } i.tji-envelop { --ph: url("../icons/ph/envelope.svg"); } i.fa-angle-right { --ph: url("../icons/ph/caret-right.svg"); } i.fa-times { --ph: url("../icons/ph/x.svg"); } /* 흐르는 문구(sections/marquee.html .tj-marquee-section, 2026-10-12 사용자 선택 A안). bexon 원본은 136px 속 빈 외곽선 글자 — 영문용이라 한글은 획이 겹친 안쪽 선까지 보여 지저분했고, 띠 위아래가 잘리고 낱말이 붙어 읽혔다. → 흰색 꽉 찬 글자 56px(폰 30px) + 낱말 사이 ✦ 구분 기호, 띠 높이는 절반 정도로. */ .tj-marquee-section { padding-top: 26px; padding-bottom: 26px; } .tj-marquee-section .marquee-slider { padding-bottom: 0; } .tj-marquee-section .marquee-item { gap: 40px; padding-inline-end: 40px; } .tj-marquee-section .marquee-item::after { content: "\2726"; font-size: 26px; line-height: 1; color: rgba(255, 255, 255, 0.55); } .tj-marquee-section .marquee-item .marquee-text { -webkit-text-fill-color: currentColor; -webkit-text-stroke: 0; color: var(--tj-color-common-white, #fff); font-size: 56px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; white-space: nowrap; } @media (max-width: 991px) { .tj-marquee-section { padding-top: 20px; padding-bottom: 20px; } .tj-marquee-section .marquee-item .marquee-text { font-size: 40px; } } @media (max-width: 767px) { .tj-marquee-section { padding-top: 16px; padding-bottom: 16px; } .tj-marquee-section .marquee-item { gap: 24px; padding-inline-end: 24px; } .tj-marquee-section .marquee-item::after { font-size: 18px; } .tj-marquee-section .marquee-item .marquee-text { font-size: 30px; -webkit-text-stroke: 0; } } /* 흐르는 문구 — 끊김 없이 계속 흐르게(sections/marquee.html .dn-marquee, 2026-10-12). 묶음 두 벌을 이어 붙인 줄을 -50% 만큼 밀고 처음으로 돌아간다. 속도는 dn-sections.js 가 묶음 폭에 맞춰 --dn-mq-dur 로 준다(초당 약 70px). 움직임 줄이기면 멈춘다. */ .dn-marquee { overflow: hidden; } .dn-marquee-track { display: flex; width: max-content; animation: dn-marquee var(--dn-mq-dur, 40s) linear infinite; } .dn-marquee-group { display: flex; flex: none; } .dn-marquee .marquee-item { flex: none; } @keyframes dn-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .dn-marquee-track { animation: none; } } /* 서브 페이지 제목 띠(.dn-page-header — design/page.html·board_head.html) 바탕 무늬(2026-10-12 사용자 선택 A안). 사진은 바로 아래 사진 띠(lead_photo)가 맡으므로 띠에는 사진 없이 단색이 밋밋하지 않을 만큼만: 오른쪽 위 청록 빛 번짐 + 왼쪽 아래 옅은 번짐, 그 위에 오른쪽 위에서 흐려지는 점 격자. 글자 자리(가운데)는 거의 단색으로 남긴다. ::before 는 위 .tj-page-header::before(사진 위 어두운 막)를 이 띠에서만 바꾼다 — 이 띠는 사진이 없다. */ .dn-page-header::before { background: radial-gradient(70% 120% at 100% 0%, rgba(30, 138, 138, 0.38), transparent 72%), radial-gradient(45% 95% at 0% 100%, rgba(30, 138, 138, 0.16), transparent 72%); } .dn-page-header::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(72% 130% at 100% 0%, #000 0%, transparent 72%); mask-image: radial-gradient(72% 130% at 100% 0%, #000 0%, transparent 72%); } /* 포트폴리오 분류 탭(제목 띠 이어 붙임, 2026-10-13 사용자 요청) — design/net_portfolio_list_top.html 이 제목 줄 바로 뒤에 nav.dn-bd-headtabs 를 그린다. 제목 띠의 아래 여백·아래 모서리를 없애고 탭 띠를 같은 어두운 바탕·같은 좌우 여백으로 이어 붙인다. 탭 모양은 .dn-page-tabs .sh-tabrow a 와 같다. */ .dn-page-header:has(+ .dn-bd-headtabs) { padding-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .dn-page-header:has(+ .dn-bd-headtabs)::before { background: radial-gradient(70% 120% at 100% 0%, rgba(30, 138, 138, 0.38), transparent 72%); } .dn-bd-headtabs { position: relative; isolation: isolate; overflow: hidden; margin-inline: 15px; padding: 36px 15px 44px; border-radius: 0 0 12px 12px; background-color: var(--tj-color-theme-dark, #0c1e21); } .dn-bd-headtabs::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 160% at 0% 100%, rgba(30, 138, 138, 0.16), transparent 72%); } .dn-bd-headtabs-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; } .dn-bd-headtabs-list a { display: inline-block; padding: 10px 22px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50px; background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.82); font-weight: 500; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .dn-bd-headtabs-list a:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.45); color: var(--tj-color-common-white, #fff); } .dn-bd-headtabs-list a.on { background: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white, #fff); } /* 탭 아래 목록의 위 여백 — 다른 탭 화면과 같게(64px·폰 40px) */ .dn-bd:has(> .dn-bd-headtabs) .dn-pf-page { padding-top: 64px; } @media (max-width: 991px) { .dn-bd-headtabs { padding: 24px 0 32px; } .dn-bd-headtabs-list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 16px 2px; } .dn-bd-headtabs-list::-webkit-scrollbar { display: none; } .dn-bd-headtabs-list li { flex: 0 0 auto; } .dn-bd-headtabs-list a { padding: 8px 16px; font-size: 15px; white-space: nowrap; } .dn-bd:has(> .dn-bd-headtabs) .dn-pf-page { padding-top: 40px; } } @media (max-width: 767px) { .dn-bd-headtabs { margin-inline: 12px; /* 제목 띠 section-gap-x 폰 여백과 같게 */ } } /* About 페이지 안 이동 탭(anchor_tabs)이 본문 첫 섹션이면 제목 띠 아래에 붙여 /si 의 탭줄과 같은 모양으로(2026-10-12 사용자 요청). 탭은 섹션(운영자가 화면 편집에서 고침)이라 제목 띠 템플릿 안에 넣을 수 없다 → 제목 띠의 아래 여백·아래 모서리를 없애고 탭 섹션을 같은 어두운 바탕·같은 좌우 여백으로 이어 붙인다. 탭 모양은 .dn-page-tabs .sh-tabrow a 와 같다. */ .dn-page-header:has(+ .dn-page-body > .sh-secbox:first-child .dn-anchors) { padding-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .dn-page-header:has(+ .dn-page-body > .sh-secbox:first-child .dn-anchors)::before { background: radial-gradient(70% 120% at 100% 0%, rgba(30, 138, 138, 0.38), transparent 72%); } .dn-page-header + .dn-page-body > .sh-secbox:first-child > .dn-anchors { position: relative; isolation: isolate; overflow: hidden; margin-inline: 15px; padding: 36px 0 44px; border-radius: 0 0 12px 12px; background-color: var(--tj-color-theme-dark, #0c1e21); } .dn-page-header + .dn-page-body > .sh-secbox:first-child > .dn-anchors::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 160% at 0% 100%, rgba(30, 138, 138, 0.16), transparent 72%); } .dn-page-header + .dn-page-body > .sh-secbox:first-child > .dn-anchors .dn-anchors-list a { height: auto; padding: 10px 22px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50px; background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.82); font-weight: 500; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .dn-page-header + .dn-page-body > .sh-secbox:first-child > .dn-anchors .dn-anchors-list a:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.45); color: var(--tj-color-common-white, #fff); } /* 탭 바로 아래 섹션의 위 여백 — /si 탭줄 아래와 같게(64px·폰 40px) */ .dn-page-header + .dn-page-body > .sh-secbox:first-child:has(> .dn-anchors) + .sh-secbox > section { padding-top: 64px; } @media (max-width: 991px) { .dn-page-header + .dn-page-body > .sh-secbox:first-child > .dn-anchors { padding: 24px 0 32px; } .dn-page-header + .dn-page-body > .sh-secbox:first-child > .dn-anchors .dn-anchors-list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } .dn-page-header + .dn-page-body > .sh-secbox:first-child > .dn-anchors .dn-anchors-list::-webkit-scrollbar { display: none; } .dn-page-header + .dn-page-body > .sh-secbox:first-child > .dn-anchors .dn-anchors-list li { flex: 0 0 auto; } .dn-page-header + .dn-page-body > .sh-secbox:first-child > .dn-anchors .dn-anchors-list a { padding: 8px 16px; font-size: 15px; white-space: nowrap; } .dn-page-header + .dn-page-body > .sh-secbox:first-child:has(> .dn-anchors) + .sh-secbox > section { padding-top: 40px; } } @media (max-width: 767px) { .dn-page-header + .dn-page-body > .sh-secbox:first-child > .dn-anchors { margin-inline: 12px; } } /* 맨 위로 버튼(design/top_bexon.html #tj-back-to-top, 2026-10-12 사용자 요청) — 400px 넘게 내리면 오른쪽 아래에 나온다(bexon-ui.js). 테두리 고리가 읽은 만큼 청록으로 차고, 가운데는 흰 원에 위 화살표(글꼴 대신 Phosphor 화살표 SVG 를 mask 로 — 아래 화살표를 뒤집음). 간편 문의 버튼(.dn-qi-btn)과 겹치지 않게 위치는 bexon 그대로(오른쪽 40px·아래 40px). */ #tj-back-to-top { box-shadow: 0 10px 24px rgba(12, 30, 33, 0.18); z-index: 90; } #tj-back-to-top:focus-visible { outline: 2px solid var(--tj-color-theme-primary); outline-offset: 3px; } #tj-back-to-top-percentage { height: calc(100% - 6px); width: calc(100% - 6px); font-size: 0; transition: background-color 0.3s ease; } .dn-top-arrow { display: block; width: 20px; height: 20px; background-color: var(--tj-color-theme-dark, #0c1e21); -webkit-mask: url("../icons/ph/arrow-down.svg") center / contain no-repeat; mask: url("../icons/ph/arrow-down.svg") center / contain no-repeat; transform: rotate(180deg); transition: transform 0.3s ease, background-color 0.3s ease; } @media (hover: hover) { #tj-back-to-top:hover #tj-back-to-top-percentage { background-color: var(--tj-color-theme-primary); } #tj-back-to-top:hover .dn-top-arrow { background-color: var(--tj-color-common-white, #fff); transform: rotate(180deg) translateY(3px); } } /* 2026-10-13: 다른 페이지에서 /web#dn_qi_form 으로 들어오면 브라우저가 바로 옮긴다 — 고정 머리에 폼 위가 가리지 않게 띄운다 (같은 페이지 안 이동은 dn-sections.js initHashLinks 가 머리 높이만큼 띄워 옮긴다). */ #dn_qi_form, #dn_mr_form { scroll-margin-top: 180px; /* 폼이 배너 상자 위보다 60px 아래라 상자 위가 머리(90px) 아래로 오게 */ } /* 회원 정보수정 자동입력 방지(2026-10-15, member/modify.html + bexon/js/app/dn-captcha.js) — 스크립트가 hidden 으로 칸을 바꾼다. 테마의 display 가 hidden 을 이기지 않게 */ [data-dc-capimg][hidden], [data-dc-altcha][hidden], [data-dc-caphelp][hidden] { display: none !important; } .form-altcha { margin-top: 4px; } /* ============================================================ 2026-10-16 메인 히어로 배경 영상(hero-main.mp4) — 영상이 잘려 보이던 것. 원인(실측): ① 히어로 상자가 화면이 넓을수록 납작해(1920폭 2.29:1, 1440폭 1.98:1) 16:9 영상의 위아래가 20~30% 잘림 ② 흰 메뉴바가 히어로 위쪽 75px(1024폭 108px, 폰 68px)을 덮음 ③ 사진용 켄 번스(1.12배→1배)가 영상까지 키움 ④ 폰은 가운데 31%만 보여 오른쪽 장비·화면이 빠짐. 영상이 있을 때만(:has) 적용한다 — 사진만 쓰는 히어로는 그대로. :has 를 모르는 브라우저는 예전 모양으로 보인다. ============================================================ */ [data-sh-sid="main_hero"] .tj-slider-section:has(.dn-hero-video) { container-type: inline-size; /* 아래 cqw = 히어로 상자 폭 */ --dn-hero-hdr: 75px; /* 메뉴바가 히어로 위를 덮는 높이 */ } @media (min-width: 992px) and (max-width: 1199px) { [data-sh-sid="main_hero"] .tj-slider-section:has(.dn-hero-video) { --dn-hero-hdr: 108px; } /* 메뉴가 두 줄 */ } @media (min-width: 768px) and (max-width: 991px) { [data-sh-sid="main_hero"] .tj-slider-section:has(.dn-hero-video) { --dn-hero-hdr: 65px; } } @media (max-width: 767px) { [data-sh-sid="main_hero"] .tj-slider-section:has(.dn-hero-video) { --dn-hero-hdr: 68px; } } /* 켄 번스 끔(영상에 이미 움직임이 있다). 메뉴바 밑은 어차피 가려지니 사진 대신 바탕색 */ [data-sh-sid="main_hero"] .slider-bg-image:has(.dn-hero-video) { animation: none; transform: none; background-image: none !important; background-color: #0c1e21; } /* 영상은 메뉴바 아래부터 깐다 */ [data-sh-sid="main_hero"] .slider-bg-image .dn-hero-video { inset: auto; top: var(--dn-hero-hdr); left: 0; width: 100%; height: calc(100% - var(--dn-hero-hdr)); } /* PC·태블릿: 메뉴바 아래가 16:9 가 되도록 높이를 잡되 화면 높이를 넘지 않게. 글자는 세로 가운데 */ @media (min-width: 768px) { [data-sh-sid="main_hero"] .tj-slider-item:has(.dn-hero-video) { min-height: min(calc(56.25cqw + var(--dn-hero-hdr)), calc(100svh - 30px)); display: flex; align-items: center; } [data-sh-sid="main_hero"] .tj-slider-item:has(.dn-hero-video) > .container { width: 100%; } [data-sh-sid="main_hero"] .tj-slider-item:has(.dn-hero-video) .slider-wrapper { padding-top: calc(var(--dn-hero-hdr) + 32px); padding-bottom: 56px; } } /* 폰: 가운데가 아니라 오른쪽(75%) 기준으로 잘라 S1 장비·S3 노트북과 휴대폰이 화면에 들어오게 */ @media (max-width: 767px) { [data-sh-sid="main_hero"] .slider-bg-image .dn-hero-video { object-position: 75% center; } } /* 히어로 영상 위 어두운 막을 한 단계 약하게(2026-10-16 사용자 요청) — 위 사진용 막(0.92 → 0.78 → 0.25 → 0.05)은 영상이 너무 가라앉았다. 글자 자리(왼쪽)는 읽힐 만큼 남긴다. 폰은 글자가 영상 전체에 겹쳐 그대로 둔다. 되돌리려면 이 블록만 지운다. */ @media (min-width: 768px) { [data-sh-sid="main_hero"] .slider-bg-image:has(.dn-hero-video)::after { background: linear-gradient(90deg, rgba(8, 20, 22, 0.75) 0%, rgba(8, 20, 22, 0.55) 35%, rgba(8, 20, 22, 0.14) 62%, rgba(8, 20, 22, 0) 100%); } }