@charset "utf-8"; /* 기본 body 설정 */ body { font-family: "Noto Sans KR", sans-serif; display: flex; flex-direction: column; min-height: 100vh; } #body-content-wrap { flex: 1; padding-top: 6.75rem; } /* 상단 고정 헤더 */ #body-top-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 100; width: 100%; } /* 상단 헤더 영역 */ #body-top-body #body-top-header-wrap { background-color: #f1f1f1; } #body-top-body #body-top-header-body { display: flex; justify-content: space-between; align-items: center; padding: 0.3rem 0; width: 1250px; margin: 0 auto; } #body-top-body #body-top-header-body ul { display: flex; gap: 1rem; margin-left: auto; } #body-top-body #body-top-header-body ul li { list-style: none; } #body-top-body #body-top-header-body ul li a { text-decoration: none; color: #5c5c5c; font-weight: 500; font-size: 0.9rem; } /* 상단 헤더 고객센터 드롭다운 */ #body-top-body #body-top-header-body ul li.header-cs-menu { position: relative; } #body-top-body #body-top-header-body ul li.header-cs-menu:hover > a { color: #333; } #body-top-body #body-top-header-body ul li.header-cs-menu:hover .header-cs-arrow { transform: rotate(180deg); } #body-top-body #body-top-header-body ul li.header-cs-menu:hover .header-cs-submenu { opacity: 1; visibility: visible; transform: translateY(0); } .header-cs-arrow { font-size: 0.6em; display: inline-block; vertical-align: middle; transition: transform 0.2s ease; opacity: 0.5; } .header-cs-submenu { list-style: none; padding: 6px 0; margin: 0; position: absolute; top: calc(100% + 4px); left: 0; background: #fff; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.1); min-width: 140px; z-index: 1010; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; } .header-cs-submenu li { list-style: none; } .header-cs-submenu li a { display: block; padding: 8px 16px; color: #495057 !important; font-size: 0.85rem !important; font-weight: 500; white-space: nowrap; text-decoration: none; border-radius: 4px; margin: 0 4px; transition: color 0.15s ease, background 0.15s ease; } .header-cs-submenu li a:hover { color: #007bff !important; background: #f0f7ff; } /* 스크롤 시 상단 헤더 숨김 */ .scroll #body-top-body #body-top-header-wrap { display: none; } .scroll #body-top-menu-wrap { padding: 0; transition: all 0.3s ease-in-out; } .scroll #body-top-menu-body ul li a { font-size: 1.125rem; padding: 10px 8px; transition: all 0.3s ease-in-out; } .scroll #body-top-menu-body .home_logo_link { height: 32px; font-size: 1rem; transition: all 0.3s ease-in-out; } .scroll #body-top-menu-body .logo-circle { width: 32px; height: 32px; transition: all 0.3s ease-in-out; } .logo-circle.scrolled { width: 32px !important; height: 32px !important; } /* 상단 메뉴 영역 */ #body-top-menu-wrap { box-shadow: 0px 1px 2px rgba(0, 0, 0, 15%); background-color: #ffffffe6; transition: all 0.2s ease-in-out; padding: 0.25rem 0; } #body-top-menu-body { display: flex; justify-content: flex-start; align-items: center; padding: 0.3rem 0; width: 1250px; margin: 0 auto; gap: 2rem;} #body-top-menu-body .home_logo_link { display: flex; align-items: center; text-decoration: none; color: #333; font-weight: 500; font-size: 1.25rem; transition: all 0.2s ease-in-out; min-width: 200px;} #body-top-menu-body .logo-circle { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; margin-right: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #ffffff; transition: all 0.2s ease; } #body-top-menu-body .logo-img { width: 100%; height: 100%; object-fit: contain; object-position: center; } #body-top-menu-body .logo-text { line-height: 1.2; display: block; max-width: 400px; text-align: center; word-break: keep-all; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } #body-top-menu-body .home_logo_link:hover { color: #007bff; text-decoration: none; } #body-top-menu-body ul { display: flex; gap: 1rem; flex: 1; justify-content: space-around;} #body-top-menu-body ul li { list-style: none; text-align: center; } #body-top-menu-body ul li a { text-decoration: none; font-weight: 500; font-size: 1.25em; transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); color: #495057; padding: 0.5rem; position: relative; display: inline-block; } #body-top-menu-body ul li a:focus { outline: none; } #body-top-menu-body ul:has(li:nth-child(n+5)) {gap: 0.75rem;} #body-top-menu-body ul:has(li:nth-child(n+5)) a {font-size: 1.125rem;} /* 상단 메뉴 호버 효과 */ #body-top-menu-body ul li a:hover:not(.active) { color: #007bff; } #body-top-menu-body ul li a:hover:not(.active)::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 30%; height: 2px; background: rgba(0, 123, 255, 0.3); border-radius: 1px; transition: all 0.3s ease; } /* 상단 메뉴 Active 상태 */ #body-top-menu-body ul li a.active { color: #007bff; font-weight: 600; } #body-top-menu-body ul li a.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80%; height: 3px; background: linear-gradient(90deg, #007bff 0%, #0056b3 100%); border-radius: 2px 2px 0 0; box-shadow: 0 -2px 8px rgba(0, 123, 255, 0.3); } #body-top-menu-body ul li a.active:hover { color: #0056b3; } #body-top-menu-body ul li a.active:hover::after { width: 100%; box-shadow: 0 -2px 12px rgba(0, 123, 255, 0.4); } /* PC 2depth 드롭다운 */ #body-top-menu-body ul li.has-submenu { position: relative; } #body-top-menu-body ul li.has-submenu:hover .pc-submenu a {font-size: 1rem;} #body-top-menu-body ul li.has-submenu:hover .pc-submenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } #body-top-menu-body ul li.has-submenu:hover > a { color: #007bff; } #body-top-menu-body ul li.has-submenu:hover > a .pc-submenu-arrow { transform: rotate(180deg); opacity: 1; } .pc-submenu { list-style: none; padding: 6px 0; margin: 0 !important; position: absolute; top: 100%; left: 50% !important; transform: translateX(-50%) translateY(-8px); background: #fff; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.12); min-width: 160px; z-index: 1010; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; } .pc-submenu li a { display: block; padding: 10px 20px; color: #495057; font-size: 1em; font-weight: 500; white-space: nowrap; text-decoration: none; text-align: left; transition: color 0.15s ease, background 0.15s ease; border-radius: 6px; margin: 0 6px; } .pc-submenu li a:hover { color: #007bff; background: #f0f7ff; text-decoration: none; } .pc-submenu li a.active { color: #007bff; font-weight: 600; background: #e8f2ff; } .pc-submenu-arrow { font-size: 0.6em; transition: transform 0.2s ease, opacity 0.2s ease; display: inline-block; vertical-align: middle; margin-left: 3px; opacity: 0.4; } /* 하단 푸터 레이아웃 */ #user-footer { width: 100%; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-top: 1px solid #dee2e6; padding: 2rem 0; position: relative; margin-top: auto; } #user-footer .footer-content { max-width: 1200px; margin: 0 auto; width: 100%; padding: 0 2rem; } #user-footer .footer-content .dafl_bottom_logo_wrap { display: flex; justify-content: center; align-items: center; padding: 0.3rem 0; width: 100%; margin: 0 auto; } #user-footer .footer-content .dafl_bottom_logo_wrap ul { display: flex; justify-content: space-between; align-items: center; list-style: none; padding: 0; margin: 0; } #user-footer .footer-content .dafl_bottom_logo_wrap .dafl_bottom_logo { background: url("./images/dafl_logo.png") no-repeat; display: block; height: 30px; width: 120px; background-size: contain; background-position: center center; } #user-footer .footer-content .dafl_bottom_logo_wrap .dafl_bottom_logo > span { display: none; } #user-footer .footer-content .dafl_bottom_logo_wrap .dafl_sharp_bottom_logo { background: url("./images/dafl_sharp_logo.png") no-repeat; display: block; height: 30px; width: 120px; background-size: contain; background-position: center center; } #user-footer .footer-content .dafl_bottom_logo_wrap .dafl_sharp_bottom_logo > span { display: none; } #user-footer .footer-text { margin-bottom: 1.5rem; text-align: center; } #user-footer .footer-text:last-child { margin-bottom: 0; } #user-footer .powered-by { color: #6c757d; font-size: 1rem; font-weight: 400; letter-spacing: 0.5px; margin-right: 0.5rem; } #user-footer .company-name { position: relative; color: #495057; font-size: 1.25rem; font-weight: 700; letter-spacing: 2px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } #user-footer .company-name::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent 0%, #6c757d 50%, transparent 100%); opacity: 0.6; } #user-footer .company-info { text-align: center; padding-top: 1.5rem; margin-bottom: 1rem; border-bottom: 1px solid #dee2e6; } #user-footer .company-info span { display: inline-block; margin: 0 1rem 1rem 0; color: #495057; font-size: 0.95rem; font-weight: 400; position: relative; } #user-footer .company-info br:first-child { display: none; } #user-footer p { margin: 0; color: #495057; font-weight: 600; font-size: 1.1rem; } #user-footer .copyright { color: #6c757d; font-size: 0.9rem; font-weight: 300; text-align: center; } #user-footer ul { list-style: none; padding: 0; margin: 0; } #user-footer ul li { margin-bottom: 0.5rem; } #user-footer ul li a { text-decoration: none; font-weight: 500; transition: color 0.3s ease; } #user-footer ul li a:hover { text-decoration: underline; } .pinfo_hdlgpolicy { font-weight: 500; text-decoration: none; } .pinfo_hdlgpolicy:hover { text-decoration: underline; } .brand-section { display: flex; align-items: center; gap: 0.5rem; } /* 본문 컨텐츠 영역 */ #body-content-main-wrap > div:not(:first-of-type) { margin-top: 4.5rem; } #body-content-main-wrap > .sub-page-header-wrapper ~ div { margin-top: 0rem; } /* 메인 상품 섹션 */ .main-product-section-body { width: 1250px; margin: 0 auto; } .main-product-section-wrap { background-color: #FFF; } /* 공지사항 섹션 */ .notice_section-wrap { background-color: #fbfbfb; padding: 2rem; margin: 2rem 0; } /* 배송 섹션 */ .delivery-section-body { width: 1250px; margin: 0 auto; } .delivery-section-wrap { margin: 2rem 0; background-color: #FFF; } /* 배송 리뷰 섹션 */ .delivery-review-wrap { background-color: #fbfbfb; padding: 2rem 0; } .delivery-review-body { width: 1250px; margin: 0 auto; padding: 0 0 2rem; } /* 메인페이지 섹션 타이틀 */ .main_section_title_wrap { text-align: center; margin-bottom: 2rem; } .main_section_title_wrap > dt { font-size: 1.75rem; font-weight: bold; color: #000; } .main_section_title_wrap > dd { color: #818a98; font-size: 1.125rem; margin-top: 0.5rem; font-weight: 300; } /* 프론트 메인 컨테이너 */ .index-container { padding-right: 0px !important; padding-left: 0px !important; padding-top: 1rem; width: 100%; margin: 0 auto; box-sizing: border-box; } .default-container { padding-right: 0px !important; padding-left: 0px !important; padding-top: 1rem; padding-bottom: 3rem; width: 1250px; margin: 0 auto; box-sizing: border-box; } /* 보관중인 상품 카드 스타일 */ .product-card-medium { height: 300px; background-size: cover; background-position: center; border-radius: 0.5rem; position: relative; } .product-title { color: #333; margin-bottom: 1rem; } /* 설치/배송 리스트 */ .installation-list, .delivery-list, .timeline-list { height: 410px; overflow-y: none; } .delivery-installation-section { padding: 1rem; border-radius: 0.5rem; background: #f8f9fa; border: 1px solid #e9ecef; height: 100%; flex: 1; display: flex; flex-direction: column; } .status-badge { font-size: 0.75rem; } .product-info-section { background: #f8f9fa; padding: 1rem; border-radius: 0.5rem; border: 1px solid #e9ecef; } /* Flex 레이아웃 스타일 */ .product-layout-flex { display: flex; gap: 0.75rem; align-items: flex-start; } .product-image-section { flex: 0 0 60%; display: flex; flex-direction: column; } .product-timeline-section { flex: 0 0 40%; display: flex; flex-direction: column; } /* 새로운 타임라인 아이템 스타일 */ .timeline-item-card { position: relative; background: #fff; border: 1px solid #e9ecef; border-radius: 0.5rem; margin-bottom: 0.25rem; overflow: hidden; transition: all 0.2s ease; } .timeline-item-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transform: translateY(-1px); } /* 타임라인 상태 텍스트 */ .timeline-status-text { position: absolute; top: 0.125rem; left: 0.125rem; padding: 0.25rem 0.4rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; z-index: 10; color: white; } .timeline-status-completed { background-color: #28a745; } .timeline-status-pending { background-color: #FFFFFF; color: #6B7280; border: 1px solid #E5E7EB; font-weight: 500; } .timeline-status-keeping { background-color: #b3b3b3; } /* 타임라인 컨텐츠 */ .timeline-item-content { display: flex; padding: 0.5rem; gap: 0.5rem; align-items: stretch; } .timeline-image-wrapper { flex: 0 0 60px; height: 60px; } .timeline-image { width: 100%; height: 100%; object-fit: cover; border-radius: 0.375rem; } .timeline-delivery-icon { width: 100%; height: 100%; background: #F9FAFB; border: 2px solid #E5E7EB; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #6B7280; } .timeline-delivery-icon i { font-weight: 300; } /* 타임라인 정보 */ .timeline-info-wrapper { flex: 1; min-width: 0; } .timeline-info-row { display: flex; flex-direction: column; height: 100%; justify-content: space-around; } .timeline-info-item { display: flex; align-items: center; min-width: 0; flex: 1; } .timeline-value { font-size: 0.8rem; color: #212529; font-weight: 500; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 0 120px; } .timeline-value i { color: #6c757d; font-size: 0.75rem; flex-shrink: 0; margin-right: 0.25rem; } .timeline-value span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }