/* ====================== 공통 ====================== */ html.scroll { overflow-y: hidden; } @media (min-width: 769px) { /* 최소 폭 1280: Figma 원안은 1600 이지만 1366 노트북(스크롤바 포함 ~1350)·1280 모니터에서 가로 스크롤이 나지 않도록 낮춤 (2026-09-16). 1280~1600 은 유동, 고정 폭 표는 .list-wrap 안에서 가로 스크롤 */ #wrap { width: max(100%, 1280px); min-height: 100vh; display: flex; position: relative; flex-flow: column wrap; } /* 2026-10-11 사용자 요청: 폭 비례(clamp) 가변 크기를 없애고 원형(salesportal.hd-hyundaielectric.com/product/index) GNB 와 같은 고정값으로 되돌림 — 헤더 80px, 로고 86px + Sales Portal 18px, 메뉴 16px Bold 좌측 정렬·간격 20px. (이전 이력: 9/21 폭 비례 확대, 9/29 90%) */ #wrap #header { width: 100%; height: 80px; border-bottom: 1px solid #E4E7EC; display: flex; align-items: center; padding: 0 28px; background: #fff; } #wrap #header .logo { width: 200px; flex: 0 0 auto; display: flex; align-items: center; gap: 0 7px; } #wrap #header .logo img { width: 86px; } #wrap #header .logo span { font-size: 18px; font-weight: 700; color: var(--HD_Discovery_Blue); padding-top: 3px; white-space: nowrap; } /* 메뉴: 원형과 같이 로고 뒤 32px, 메뉴 간 20px, 왼쪽부터 채움 */ #wrap #header #nav { margin-left: 32px; flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-start; gap: 0 20px; } #wrap #header #nav > div { font-size: 16px; font-weight: 700; line-height: 1.2; white-space: nowrap; } #wrap #header #nav > div > a { color: #000; } #wrap #header #nav { align-items: center; } #wrap #header #nav > div > a:hover { color: var(--HD_Discovery_Blue); } /* 2026-10-14 사용자 요청: .on(18px) 토글 때 옆 메뉴가 밀리지 않게 — 각 a 가 ::after(data-text, 18px, 높이 0·숨김)로 큰 글자 폭을 항상 차지하고 글자는 그 안에서 가운데 정렬. 데스크톱 블록 안에만 두어 모바일(24px 세로 메뉴)에는 영향 없음 */ #wrap #header #nav > div > a { display: inline-block; text-align: center; } #wrap #header #nav > div > a::after { content: attr(data-text); display: block; height: 0; overflow: hidden; visibility: hidden; font-size: 18px; font-weight: 700; } #wrap #header #nav > div > a.on { color: var(--HD_Discovery_Blue); font-size: 18px; text-shadow: 0 2px 6px rgba(0, 47, 135, 0.3); } /* 현재 페이지(2026-10-11): 브랜드 컬러 + 크게 + 음영 */ #wrap #header #nav > div > ul { display: none; } /* 우측 유틸: 장바구니 | 사용자(아바타 + 딜러명/사용자명, hover 드롭다운) */ #wrap #header .util { margin-left: 20px; flex: 0 0 auto; display: flex; align-items: center; gap: 0 20px; height: 100%; } #wrap #header .cart { display: flex; align-items: center; } #wrap #header .cart > a { display: block; position: relative; width: 40px; height: 40px; flex: 0 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Cpath d='M3.75 3.75H5.50443C6.67168 3.75 7.68357 4.55773 7.94226 5.69595L8.63636 8.75M10.625 17.5H20.4823C22.0671 17.5 23.4808 16.5037 24.0138 15.0113L25.6534 10.4204C25.9442 9.60637 25.3407 8.75 24.4762 8.75H8.63636M10.625 17.5L8.63636 8.75M10.625 17.5L11.3569 20.0618C11.6636 21.1351 12.6446 21.875 13.7608 21.875H22.5M13.75 25H13.7625M21.25 25H21.2625' stroke='%23141C24' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; } #wrap #header .cart > a > span { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 18px; text-align: center; line-height: 19px; color: #fff; background: var(--HD_Green2); font-size: 10px; } #wrap #header .cart .ham { display: none; } #wrap #header .member-info { position: relative; display: flex; align-items: center; gap: 0 10px; height: 100%; padding-left: 20px; border-left: 1px solid #E4E7EC; cursor: pointer; } #wrap #header .member-info .avatar { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 99px; background: #8194B7; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; } #wrap #header .member-info > div { display: flex; flex-flow: column nowrap; gap: 2px 0; font-size: 12px; line-height: 1.2; min-width: 0; max-width: 160px; } /* 긴 거래처명은 폭 상한 + 말줄임 */ #wrap #header .member-info > div > strong, #wrap #header .member-info > div > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #wrap #header .member-info > div > strong { font-weight: 700; color: var(--text-primary); } #wrap #header .member-info > div > span { color: #6A6A6A; } #wrap #header .member-info .member-menu { display: none; position: absolute; right: 0; top: 100%; min-width: 160px; padding: 6px 0; background: #fff; border: 1px solid #E4E7EC; border-radius: 0 0 6px 6px; box-shadow: 0px 25px 60px -10px rgba(28, 39, 49, 0.12); z-index: 10; } #wrap #header .member-info:hover .member-menu { display: block; } #wrap #header .member-info .member-menu > li > a { display: block; padding: 9px 14px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; } #wrap #header .member-info .member-menu > li > a:hover { background: #F2F4F7; color: var(--text-primary); } #wrap #header .sign-in > a { display: flex; font-size: 12px; height: 40px; gap: 0 6px; justify-content: center; align-items: center; white-space: nowrap; } #wrap #header .login { display: none !important; } #wrap.member #header .login { display: flex !important; } #wrap.member #header .logout { display: flex !important; } #wrap #header .sign-out, #wrap.member #header .sign-out.login { display: none !important; } /* 데스크톱은 사용자 드롭다운의 Sign out 사용 */ #wrap #container { width: 100%; padding: 40px 28px; flex: 1 1 auto; } #wrap #container #main { display: flex; flex-flow: column wrap; gap: 30px 0; } #wrap #container #main .page-title { display: flex; justify-content: space-between; align-items: center; } #wrap #container #main .page-title > p { font-size: 20px; font-weight: 700; } #wrap #container #main .line-notice { display: none; align-items: center; gap: 0 10px; height: 18px; padding-left: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M8.805 10.75L9.787 15.397C9.901 15.937 9.556 16.468 9.015 16.582L8.037 16.789C7.497 16.903 6.966 16.558 6.852 16.017L5.75 10.75' stroke='%23141C24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.185 5.91201C16.068 6.00701 16 6.14901 16 6.30001V8.69901C16 8.85001 16.068 8.99201 16.185 9.08701C16.302 9.18201 16.456 9.21901 16.603 9.18801C17.425 9.01501 18 8.32001 18 7.49901C18 6.67801 17.425 5.98301 16.603 5.81001C16.456 5.77901 16.302 5.81601 16.185 5.91101V5.91201Z' fill='%23141C24'/%3E%3Cpath d='M14.25 13.25C14.25 13.25 12.313 10.75 10 10.75C7.688 10.75 5 10.75 5 10.75C3.205 10.75 1.75 9.295 1.75 7.5C1.75 5.705 3.205 4.25 5 4.25H10C12.312 4.25 14.25 1.75 14.25 1.75V13.25Z' stroke='%23141C24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.75 4.25V10.75' stroke='%23141C24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left center no-repeat; font-size: 12px; color: var(--text-secondary); } #wrap #container #main .line-notice > p { width: 20px; height: 20px; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.5 7.5L12.5 12.5M12.5 7.5L7.5 12.5M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z' stroke='%2397A1AF' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; } #wrap #container #main .search-wrap {} #wrap #container #main .search-wrap > ul { display: flex; align-items: center; gap: 0 10px; } #wrap #container #main .search-wrap > ul > li:nth-of-type(1) { display: flex; align-items: center; gap: 0 10px; } #wrap #container #main .search-wrap > ul > li:nth-of-type(1) input { width: 150px; } #wrap #container #main .search-wrap > ul > li:nth-of-type(2) { width: 150px; } #wrap #container #main .section .title { font-size: 16px; font-weight: 700; } #wrap #container #main .section .title+div { margin-top: 20px; } #wrap #container #main .section p.title { height: 30px; display: flex; align-items: center; } #wrap #container #main .section div.title { display: flex; justify-content: space-between; align-items: center; } #wrap #container #main .section div.title > p:nth-of-type(2) { font-size: 12px; color: var(--text-secondary); } #wrap #container #main .section div.title > p:nth-of-type(2) > span { color: var(--HD_Green3); } #wrap #container #main .section div.list { border-radius: 10px 10px 0 0; border: 1px solid #E4E7EC; overflow: hidden; } #wrap #container #main .section div.list ul { width: 100%; } #wrap #container #main .section div.list ul > li { display: flex; padding: 16px 30px; color: var(--text-primary); align-items: center; } #wrap #container #main .section div.list ul > li > div { display: flex; justify-content: center; align-items: center; word-wrap: break-word; line-height: normal; word-break: keep-all; } #wrap #container #main .section div.list ul.head { background: #F4F6FA; } #wrap #container #main .section div.list ul.head > li { font-size: 12px; height: 50px; padding: 0 30px; } #wrap #container #main .section div.list ul.body > li { font-size: 12px; border-top: 1px solid #E4E7EC; } #wrap #container #main .section div.list ul.body > li.delete { background: #F2F4F7; color: var(--text-tertiary); } #wrap #container #main .section div.list ul.paging > li { padding: 26px 0; } #wrap #container #main .section div.list ul.add { background: #CED2DA; } #wrap .paging > li { display: flex; justify-content: center !important; gap: 0 16px; border: 1px solid #E4E7EC; padding: 26px 0; border-top: 0; border-radius: 0 0 10px 10px; } #wrap .paging > li > a { display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border: 1px solid #E4E7EC; border-radius: 6px; color: var(--text-secondary); font-size: 12px; } #wrap .paging > li > a.active { color: var(--White); background: #344051; border: 1px solid #344051; } #wrap .paging > li > a.prev { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M12.9166 15.8334L7.79042 10.7071C7.3999 10.3166 7.3999 9.68346 7.79042 9.29293L12.9166 4.16671' stroke='%23344051' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; text-indent: -9999999px; } #wrap .paging > li > a.prev.disabled { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M12.9166 15.8334L7.79042 10.7071C7.3999 10.3166 7.3999 9.68346 7.79042 9.29293L12.9166 4.16671' stroke='%23CED2DA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; } #wrap .paging > li > a.next { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.91667 4.16663L13.0429 9.29285C13.4334 9.68338 13.4334 10.3165 13.0429 10.7071L7.91667 15.8333' stroke='%23344051' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; text-indent: -9999999px; } #wrap .paging > li > a.next.disabled { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.91667 4.16663L13.0429 9.29285C13.4334 9.68338 13.4334 10.3165 13.0429 10.7071L7.91667 15.8333' stroke='%23CED2DA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; } /* Figma Footer(3029:65283): 상단 보더 + 30px 패딩, 로고·연락처 | 메뉴, 하단 81px 카피라이트 바 */ #wrap #footer { width: 100%; border-top: 1px solid #E4E7EC; padding-top: 30px; } #wrap #footer > div { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; } #wrap #footer > div:nth-of-type(1) { padding-bottom: 30px; flex-wrap: wrap; gap: 16px 24px; } #wrap #footer > div:nth-of-type(1) > div { gap: 0 clamp(16px, 2.5vw, 40px); } #wrap #footer > div:nth-of-type(1) > div > p.logo { display: flex; align-items: center; gap: 0 8px; font-size: 20.65px; font-weight: 700; color: var(--HD_Discovery_Blue); } #wrap #footer > div:nth-of-type(1) > div > p.logo > a { color: var(--HD_Discovery_Blue); display: flex; align-items: center; } #wrap #footer > div:nth-of-type(1) > div > p.logo img { width: 96px; } #wrap #footer > div:nth-of-type(1) > div > p.logo span { padding-top: 3px; white-space: nowrap; } #wrap #footer > div:nth-of-type(1) > div > a.contact { gap: 0 10px; padding: 0 10px; height: 30px; border: 1px solid #CED2DA; border-radius: 4px; } #wrap #footer > div:nth-of-type(1) > div > a.contact > p { font-size: 12px; color: var(--text-secondary); white-space: nowrap; } #wrap #footer > div:nth-of-type(1) > ul { display: flex; align-items: center; gap: 0 clamp(20px, 2.2vw, 35px); } #wrap #footer > div:nth-of-type(1) > ul > li > a { font-size: 14px; white-space: nowrap; } #wrap #footer > div:nth-of-type(2) { height: 81px; border-top: 1px solid #E4E7EC; } #wrap #footer > div:nth-of-type(2) > p { font-size: 10px; color: #6A6A6A; } #wrap #footer > div:nth-of-type(2) > ul { display: flex; align-items: center; gap: 0 23px; } #wrap #footer > div:nth-of-type(2) > ul > li > a { font-size: 10px; color: #6A6A6A; } } @media (max-width: 768px) { /*================================================================================= */ #wrap { width: 100%; min-height: 100vh; display: flex; position: relative; flex-flow: column wrap; overflow-x: hidden; } #wrap #header { width: 100%; border-bottom: 1px solid #E4E7EC; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; position: absolute; left: 0; top: 0; background: #fff; z-index: 5; } #wrap #header .logo { width: 55.5556vw; height: 60px; display: flex; align-items: center; gap: 0 7px; margin-left: 20px; } #wrap #header .logo img { width: min(86px, 23.8889vw); } #wrap #header .logo span { font-size: min(18px, 5vw); font-weight: 700; color: var(--HD_Discovery_Blue); padding-top: 3px; } #wrap #header .util { display: contents; } /* 모바일: 자식들이 헤더 flex 에 직접 참여(order 배치) */ #wrap #header .cart { margin-right: 20px; display: flex; align-items: center; gap: 0 10px; } #wrap #header .cart > a { display: block; position: relative; width: 40px; height: 40px; flex: 0 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Cpath d='M3.75 3.75H5.50443C6.67168 3.75 7.68357 4.55773 7.94226 5.69595L8.63636 8.75M10.625 17.5H20.4823C22.0671 17.5 23.4808 16.5037 24.0138 15.0113L25.6534 10.4204C25.9442 9.60637 25.3407 8.75 24.4762 8.75H8.63636M10.625 17.5L8.63636 8.75M10.625 17.5L11.3569 20.0618C11.6636 21.1351 12.6446 21.875 13.7608 21.875H22.5M13.75 25H13.7625M21.25 25H21.2625' stroke='%23141C24' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; } #wrap #header .cart > a > span { position: absolute; top: 5px; right: 0px; width: 18px; height: 18px; border-radius: 18px; text-align: center; line-height: 19px; color: #fff; background: var(--HD_Green2); font-size: 10px; } #wrap #header .cart .ham { width: 40px; height: 40px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M1 1.6665H19M1 9.99984H19M1 18.3332H19' stroke='%23141C24' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; } #wrap #header #nav { order: 4; width: 100%; display: flex; flex-flow: column wrap; gap: 24px 0; padding: 20px 20px 28px; } #wrap #header #nav > div { font-size: 24px; font-weight: 700; } #wrap #header #nav > div:last-of-type { border-bottom: 1px solid #E4E7EC; padding-bottom: 28px; } #wrap #header #nav > div > a { color: var(--text-primary); } #wrap #header #nav > div > ul { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 10px; width: min(360px, 100%); } #wrap #header #nav > div > ul > li { width: 143px; height: 40px; line-height: 40px; } #wrap #header #nav > div > ul > li > a { padding-left: 27px; font-size: 14px; color: var(--text-tertiary); font-weight: 400; background-repeat: no-repeat; background-position: left center; padding-top: 2px; } #wrap #header #nav > div > ul > li:nth-of-type(1) > a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4.16699 5H15.8337M4.16699 8.33333H15.8337M4.16699 11.6667H15.8337M4.16699 15H15.8337' stroke='%23637083' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #wrap #header #nav > div > ul > li:nth-of-type(2) > a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2.5 2.5H3.66962C4.44778 2.5 5.12238 3.03848 5.29484 3.7973L5.75758 5.83333M7.08333 11.6667H13.6549C14.7114 11.6667 15.6539 11.0025 16.0092 10.0075L17.1023 6.94695C17.2961 6.40424 16.8938 5.83333 16.3175 5.83333H5.75758M7.08333 11.6667L5.75758 5.83333M7.08333 11.6667L7.5713 13.3745C7.77572 14.09 8.4297 14.5833 9.17384 14.5833H15M9.16667 16.6667H9.175M14.1667 16.6667H14.175' stroke='%23637083' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");} #wrap #header #nav > div > ul > li:nth-of-type(3) > a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M14.1414 16.2539C13.9381 14.6077 12.5345 13.3333 10.8333 13.3333H9.16667C7.46548 13.3333 6.06194 14.6077 5.85864 16.2539M14.1414 16.2539C16.1655 14.9108 17.5 12.6112 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 12.6112 3.83447 14.9108 5.85864 16.2539M14.1414 16.2539C12.9547 17.0413 11.5309 17.5 10 17.5C8.46911 17.5 7.04534 17.0413 5.85864 16.2539M12.5 8.33333C12.5 9.71405 11.3807 10.8333 10 10.8333C8.61929 10.8333 7.5 9.71405 7.5 8.33333C7.5 6.95262 8.61929 5.83333 10 5.83333C11.3807 5.83333 12.5 6.95262 12.5 8.33333Z' stroke='%23637083' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #wrap #header #nav > div > ul > li:nth-of-type(4) > a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M9.77921 2.08583C9.87302 1.90805 10.1276 1.90805 10.2214 2.08583L12.49 6.38562C12.5262 6.45418 12.5921 6.50208 12.6685 6.5153L17.4589 7.34415C17.657 7.37843 17.7357 7.62058 17.5956 7.76473L14.2072 11.251C14.1532 11.3066 14.128 11.3841 14.1391 11.4608L14.8311 16.2729C14.8597 16.4718 14.6537 16.6215 14.4733 16.5328L10.1106 14.3877C10.0411 14.3535 9.95958 14.3535 9.89001 14.3877L5.52733 16.5328C5.34694 16.6215 5.14095 16.4718 5.16956 16.2729L5.86158 11.4608C5.87262 11.3841 5.84743 11.3066 5.79341 11.251L2.4051 7.76473C2.265 7.62059 2.34368 7.37843 2.54176 7.34415L7.33213 6.5153C7.40851 6.50208 7.47445 6.45418 7.51062 6.38562L9.77921 2.08583Z' stroke='%23637083' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #wrap #header .member-info { order: 5; width: 100%; margin: 0 20px; display: flex; align-items: center; gap: 0 10px; font-size: 12px; } #wrap #header .member-info .avatar { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 99px; background: #8194B7; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; } #wrap #header .member-info > div { display: flex; flex-flow: column wrap; gap: 3px 0; line-height: 1.2; } #wrap #header .member-info > div > strong { font-weight: 700; } #wrap #header .member-info > div > span { color: #6A6A6A; } #wrap #header .member-info .member-menu { display: none; } #wrap #header .sign-in, #wrap #header .sign-out { order: 7; padding: 0 20px; width: 100%; margin-top: 20px; } #wrap #header .sign-in > a, #wrap #header .sign-out > a { width: 100%; display: flex; font-size: 12px; height: 40px; gap: 0 6px; justify-content: center; align-items: center; border-radius: 6px; } #wrap #header .sign-in > a { background: var(--HD_Green2); color: #fff; } #wrap #header .sign-in > a > svg path { stroke: #fff; } #wrap #header .sign-out > a { border: 1px solid #CED2DA; } #wrap #header #nav { display: none !important; } #wrap #header.active { position: fixed; padding-bottom: 100px; height: 100%; overflow-y: auto; align-content: flex-start; } #wrap #header.active #nav { display: flex !important; } #wrap #header.active .cart .ham { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M11.667 11.6665L28.3337 28.3332M28.3337 11.6665L11.667 28.3332' stroke='%23141C24' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; } #wrap #header .member-info, #wrap #header .sign-in, #wrap #header .sign-out { display: none !important; } #wrap #header.active .logout { display: flex !important; } #wrap #header.active .login { display: none !important; } #wrap.member #header.active .logout { display: none !important; } #wrap.member #header.active .login { display: flex !important; } #wrap #container { width: 100%; flex: 1 1 auto; margin-top: 60px; } #wrap #container .inner-wrap { padding-left: 28px !important; padding-right: 28px !important; } #wrap #container #main { display: flex; flex-flow: column wrap; gap: 30px 0; padding: 30px 0; overflow-x: hidden; width: 100%; } #wrap #container #main .page-title { width: 100%; display: flex; flex-flow: column wrap; gap: 20px 0; } #wrap #container #main .page-title > p { font-size: 20px; font-weight: 700; order: 2; } #wrap #container #main .line-notice { display: none; align-items: center; gap: 0 10px; height: 18px; padding-left: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M8.805 10.75L9.787 15.397C9.901 15.937 9.556 16.468 9.015 16.582L8.037 16.789C7.497 16.903 6.966 16.558 6.852 16.017L5.75 10.75' stroke='%23141C24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.185 5.91201C16.068 6.00701 16 6.14901 16 6.30001V8.69901C16 8.85001 16.068 8.99201 16.185 9.08701C16.302 9.18201 16.456 9.21901 16.603 9.18801C17.425 9.01501 18 8.32001 18 7.49901C18 6.67801 17.425 5.98301 16.603 5.81001C16.456 5.77901 16.302 5.81601 16.185 5.91101V5.91201Z' fill='%23141C24'/%3E%3Cpath d='M14.25 13.25C14.25 13.25 12.313 10.75 10 10.75C7.688 10.75 5 10.75 5 10.75C3.205 10.75 1.75 9.295 1.75 7.5C1.75 5.705 3.205 4.25 5 4.25H10C12.312 4.25 14.25 1.75 14.25 1.75V13.25Z' stroke='%23141C24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.75 4.25V10.75' stroke='%23141C24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left center no-repeat; font-size: 12px; color: var(--text-secondary); } #wrap #container #main .line-notice > p { width: 20px; height: 20px; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.5 7.5L12.5 12.5M12.5 7.5L7.5 12.5M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z' stroke='%2397A1AF' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; } #wrap #container #main .search-wrap { width: 100%; } #wrap #container #main .search-wrap > ul { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } #wrap #container #main .search-wrap > ul > li:nth-of-type(1) { display: flex; align-items: center; gap: 0 10px; } #wrap #container #main .search-wrap > ul > li:nth-of-type(1) input { width: min(38.0556vw, 137px); } #wrap #container #main .search-wrap > ul > li:nth-of-type(2) { width: min(38.0556vw, 137px); } #wrap #container #main .section { width: 100%; } #wrap #container #main .section .title { font-size: 16px; font-weight: 700; width: 100%; } #wrap #container #main .section .title+div { margin-top: 20px; } #wrap #container #main .section p.title { height: 30px; display: flex; align-items: center; } #wrap #container #main .section div.title { display: flex; justify-content: space-between; align-items: center; } #wrap #container #main .section div.title > p:nth-of-type(1) { flex: 0 0 auto; } #wrap #container #main .section div.title > p:nth-of-type(2) { font-size: 14px; color: var(--text-secondary); } #wrap #container #main .section div.title > p:nth-of-type(2) > span { color: var(--HD_Green3); } #wrap #container #main .section .list-wrap { width: 100%; overflow-x: auto; padding: 0 28px; } /* 좌우 스크롤 필요할 경우 */ #wrap #container #main .section div.list { border-radius: 10px 10px 0 0; border: 1px solid #E4E7EC; width: 100%; overflow: hidden; } #wrap #container #main .section div.list ul {} #wrap #container #main .section div.list ul > li { display: flex; padding: 16px 20px; color: var(--text-primary); align-items: center; } #wrap #container #main .section div.list ul > li > div { display: flex; justify-content: center; align-items: center; word-wrap: break-word; line-height: normal; word-break: keep-all; } #wrap #container #main .section div.list ul.head { background: #F4F6FA; } #wrap #container #main .section div.list ul.head > li { font-size: 12px; height: 50px; padding: 0 30px; } #wrap #container #main .section div.list ul.body > li { font-size: 12px; border-top: 1px solid #E4E7EC; } #wrap #container #main .section div.list ul.body > li.delete { background: #F2F4F7; color: var(--text-tertiary); } #wrap #container #main .section div.list ul.add { background: #CED2DA; } #wrap .paging > li { display: flex; justify-content: center !important; gap: 0 min(4.4444vw, 16px); border: 1px solid #E4E7EC; border-top: 0; padding: 26px 0; border-radius: 0 0 10px 10px; } #wrap .paging > li > a { display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border: 1px solid #E4E7EC; border-radius: 6px; color: var(--text-secondary); font-size: 12px; } #wrap .paging > li > a.active { color: var(--White); background: #344051; border: 1px solid #344051; } #wrap .paging > li > a.prev { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M12.9166 15.8334L7.79042 10.7071C7.3999 10.3166 7.3999 9.68346 7.79042 9.29293L12.9166 4.16671' stroke='%23344051' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; text-indent: -9999999px; } #wrap .paging > li > a.prev.disabled { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M12.9166 15.8334L7.79042 10.7071C7.3999 10.3166 7.3999 9.68346 7.79042 9.29293L12.9166 4.16671' stroke='%23CED2DA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; } #wrap .paging > li > a.next { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.91667 4.16663L13.0429 9.29285C13.4334 9.68338 13.4334 10.3165 13.0429 10.7071L7.91667 15.8333' stroke='%23344051' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; text-indent: -9999999px; } #wrap .paging > li > a.next.disabled { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.91667 4.16663L13.0429 9.29285C13.4334 9.68338 13.4334 10.3165 13.0429 10.7071L7.91667 15.8333' stroke='%23CED2DA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; } #wrap #footer { width: 100%; border-top: 1px solid #E4E7EC; } #wrap #footer > div { width: 100%; display: flex; flex-flow: column wrap; padding: 30px 28px; } #wrap #footer > div:nth-of-type(1) > div { flex-flow: column wrap; align-items: flex-start !important; gap: 20px 0; } #wrap #footer > div:nth-of-type(1) > div > p.logo { display: flex; align-items: center; gap: 0 8px; font-size: 20px; font-weight: 700; color: var(--HD_Discovery_Blue); } #wrap #footer > div:nth-of-type(1) > div > p.logo > a { color: var(--HD_Discovery_Blue); display: flex; align-items: center; } #wrap #footer > div:nth-of-type(1) > div > p.logo img { width: 96px; } #wrap #footer > div:nth-of-type(1) > div > p.logo span { padding-top: 3px; white-space: nowrap; } #wrap #footer > div:nth-of-type(1) > div > a.contact { gap: 0 10px; padding: 0 10px; height: 30px; border: 1px solid #CED2DA; border-radius: 4px; } #wrap #footer > div:nth-of-type(1) > div > a.contact > p { font-size: 12px; color: var(--text-secondary); } #wrap #footer > div:nth-of-type(1) > ul { display: flex; flex-wrap: wrap; gap: 20px 30px; margin-top: 30px; } #wrap #footer > div:nth-of-type(1) > ul > li > a { font-size: 14px; } #wrap #footer > div:nth-of-type(2) { border-top: 1px solid #E4E7EC; } #wrap #footer > div:nth-of-type(2) > p { font-size: 10px; color: #6A6A6A; } #wrap #footer > div:nth-of-type(2) > ul { display: flex; gap: 0 23px; margin-top: 10px; } #wrap #footer > div:nth-of-type(2) > ul > li > a { font-size: 10px; color: #6A6A6A; } } /* ====================== my-account main ====================== */ @media (min-width: 769px) { #wrap.my-account {} #wrap.my-account #container { display: flex; gap: 0 32px; } #wrap.my-account #container #aside { width: 200px; flex: 0 0 auto; } #wrap.my-account #container #aside > dl {} #wrap.my-account #container #aside > dl > dt { font-size: 20px; line-height: 30px; font-weight: 700; padding: 0 14px; } #wrap.my-account #container #aside > dl > dd { margin-top: 28px; } #wrap.my-account #container #aside > dl > dd > a { display: block; padding: 10px 14px 10px 41px; font-size: 14px; color: var(--text-tertiary); background-repeat: no-repeat; background-position: 14px 6px; } #wrap.my-account #container #aside > dl > dd > a.on { background-color: #F2F4F7; border-radius: 6px; color: var(--text-primary); } #wrap.my-account #container #aside > dl > dd > a~a { margin-top: 10px; } #wrap.my-account #container #aside > dl > dd > a:nth-of-type(1) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4.16699 5H15.8337M4.16699 8.33333H15.8337M4.16699 11.6667H15.8337M4.16699 15H15.8337' stroke='%23637083' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #wrap.my-account #container #aside > dl > dd > a:nth-of-type(2) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2.5 2.5H3.66962C4.44778 2.5 5.12238 3.03848 5.29484 3.7973L5.75758 5.83333M7.08333 11.6667H13.6549C14.7114 11.6667 15.6539 11.0025 16.0092 10.0075L17.1023 6.94695C17.2961 6.40424 16.8938 5.83333 16.3175 5.83333H5.75758M7.08333 11.6667L5.75758 5.83333M7.08333 11.6667L7.5713 13.3745C7.77572 14.09 8.4297 14.5833 9.17384 14.5833H15M9.16667 16.6667H9.175M14.1667 16.6667H14.175' stroke='%23637083' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* 2026-10-11: 메뉴 순서(Favorite Product 3번째·Account Manage 4번째)에 맞춰 3·4 아이콘 교체 — 별=Favorite, 사람=Account */ #wrap.my-account #container #aside > dl > dd > a:nth-of-type(3) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M9.77921 2.08583C9.87302 1.90805 10.1276 1.90805 10.2214 2.08583L12.49 6.38562C12.5262 6.45418 12.5921 6.50208 12.6685 6.5153L17.4589 7.34415C17.657 7.37843 17.7357 7.62058 17.5956 7.76473L14.2072 11.251C14.1532 11.3066 14.128 11.3841 14.1391 11.4608L14.8311 16.2729C14.8597 16.4718 14.6537 16.6215 14.4733 16.5328L10.1106 14.3877C10.0411 14.3535 9.95958 14.3535 9.89001 14.3877L5.52733 16.5328C5.34694 16.6215 5.14095 16.4718 5.16956 16.2729L5.86158 11.4608C5.87262 11.3841 5.84743 11.3066 5.79341 11.251L2.4051 7.76473C2.265 7.62059 2.34368 7.37843 2.54176 7.34415L7.33213 6.5153C7.40851 6.50208 7.47445 6.45418 7.51062 6.38562L9.77921 2.08583Z' stroke='%23637083' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #wrap.my-account #container #aside > dl > dd > a:nth-of-type(4) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M14.1414 16.2539C13.9381 14.6077 12.5345 13.3333 10.8333 13.3333H9.16667C7.46548 13.3333 6.06194 14.6077 5.85864 16.2539M14.1414 16.2539C16.1655 14.9108 17.5 12.6112 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 12.6112 3.83447 14.9108 5.85864 16.2539M14.1414 16.2539C12.9547 17.0413 11.5309 17.5 10 17.5C8.46911 17.5 7.04534 17.0413 5.85864 16.2539M12.5 8.33333C12.5 9.71405 11.3807 10.8333 10 10.8333C8.61929 10.8333 7.5 9.71405 7.5 8.33333C7.5 6.95262 8.61929 5.83333 10 5.83333C11.3807 5.83333 12.5 6.95262 12.5 8.33333Z' stroke='%23637083' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #wrap.my-account #container #aside > dl > dd > a.on:nth-of-type(1) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4.16699 5H15.8337M4.16699 8.33333H15.8337M4.16699 11.6667H15.8337M4.16699 15H15.8337' stroke='%23141C24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #wrap.my-account #container #aside > dl > dd > a.on:nth-of-type(2) { } #wrap.my-account #container #aside > dl > dd > a.on:nth-of-type(3) { } #wrap.my-account #container #aside > dl > dd > a.on:nth-of-type(4) { } #wrap.my-account #container #main { flex: 1 1 auto; min-width: 0; flex-flow: column nowrap; } /* column wrap 이면 내용 폭으로 커져 1280 에서 넘침 */ #wrap.my-account #container #main.login { display: none; } #wrap.my-account.member #container #main.login { display: block; } #wrap.my-account #container #main.login > ul { width: 100%; display: flex; gap: 0 20px; } #wrap.my-account #container #main.login > ul + ul { margin-top: 50px; } #wrap.my-account #container #main.login > ul > li { flex: 1 1 0; min-width: 0; display: flex; flex-flow: column wrap; gap: 20px 0; padding: 20px; align-items: center; border-radius: 10px; border: 1px solid #CED2DA; box-shadow: 0px 25px 60px -10px rgba(28, 39, 49, 0.12); cursor: pointer; } #wrap.my-account #container #main.login > ul > li > p:nth-of-type(1) { width: 204px; max-width: 100%; height: 192px; } #wrap.my-account #container #main.login > ul > li > p:nth-of-type(1) img { max-width: 100%; height: auto; } #wrap.my-account #container #main.login > ul > li > p:nth-of-type(2) { font-size: 28px; font-weight: 700; color: var(--HD_Discovery_Blue); } #wrap.my-account #container #main.login > ul > li > div { font-weight: 300; width: 100%; } #wrap.my-account #container #main.login > ul > li > div > p { font-size: 12px; line-height: 17px; color: var(--text-secondary); padding-left: 18px; position: relative; } #wrap.my-account #container #main.login > ul > li > div > p::before { content: ''; position: absolute; left: 8px; top: 6px; width: 3px; height: 3px; border-radius: 100px; background: var(--text-secondary); } #wrap.my-account #container #main.login > ul > li > div.half { display: flex; flex-wrap: wrap; } #wrap.my-account #container #main.login > ul > li > div.half > p { width: 50%; } #wrap.my-account #container #main.login > ul > li > ul { width: 100%; display: flex; gap: 0 4px; } #wrap.my-account #container #main.login > ul > li > ul > li { flex: 1 1 0; min-width: 0; } #wrap.my-account #container #main.login > ul > li > ul > li > a { overflow: hidden; height: 60px; text-align: center; border: 1px solid #CED2DA; border-radius: 4px; color: var(--text-secondary); font-size: 16px; font-weight: 700; display: flex; flex-wrap: wrap; text-align: center; justify-content: center; align-content: center; gap: 6px 0; } #wrap.my-account #container #main.login > ul > li > ul > li > a > p { width: 100%; } #wrap.my-account #container #main.login > ul > li > ul > li > a > span { width: 100%; font-size: 9px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #wrap.my-account #container #main.login > div { margin: 30px 0 40px; gap: 30px 0; padding: 30px 0; box-shadow: 0px 25px 60px -10px rgba(28, 39, 49, 0.12); border: 1px solid #CED2DA; border-radius: 10px; background: #fff; } #wrap.my-account #container #main.login > div > p { font-size: 20px; font-weight: 700; gap: 0 5px; } #wrap.my-account #container #main.login > div ul { gap: 0 10px; } #wrap.my-account #container #main.login > div ul > li { width: 150px; } #wrap.my-account #container #main.login > div ul > li > select { height: 36px; } #wrap.my-account #container #main.login > div ul > li .button.submit { width: 100%; } #wrap.my-account.member #container #main.logout { display: none !important; } #wrap.my-account #container #main.logout { gap: 30px 0; } #wrap.my-account #container #main.logout > p:nth-of-type(2) { font-size: 24px; font-weight: 700; line-height: 1.4; color: #393939; text-align: center; } #wrap.my-account #container #main.logout > a { width: 228px; } #wrap.my-account #container #main.logout > div { font-size: 12px; font-weight: 400; line-height: 1.4; color: #393939; text-align: center; } } @media (max-width: 768px) { /*================================================================================= */ #wrap.my-account {} #wrap.my-account #container { display: flex; flex-flow: column wrap; padding: 0; } #wrap.my-account #container #aside { width: 100%; flex: 0 0 auto; } #wrap.my-account #container #aside > dl {} #wrap.my-account #container #aside > dl > dt { height: 60px; border-bottom: #E4E7EC; display: flex; align-items: center; padding: 0 20px; font-size: 14px; font-weight: 700; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M28 17L20.7071 24.2929C20.3166 24.6834 19.6834 24.6834 19.2929 24.2929L12 17' stroke='%23141C24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") calc(100% - 20px) center no-repeat #F2F4F7; } #wrap.my-account #container #aside > dl > dt.active { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M12 25L19.2929 17.7071C19.6834 17.3166 20.3166 17.3166 20.7071 17.7071L28 25' stroke='%23141C24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") calc(100% - 20px) center no-repeat #F2F4F7; } #wrap.my-account #container #aside > dl > dd { position: relative; padding: 10px 14px; display: none; flex-wrap: wrap; gap: 0 22px; width: min(360px, 100%); margin-bottom: 6px; } #wrap.my-account #container #aside > dl > dd::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 100vw; height: 6px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.00) 100%); } #wrap.my-account #container #aside > dl > dt.active+dd { display: flex; } #wrap.my-account #container #aside > dl > dd > a { width: min(150px, 100%); display: block; height: 40px; line-height: 40px; padding-left: 27px; font-size: 14px; color: var(--text-tertiary); background-repeat: no-repeat; background-position: left 8px; } #wrap.my-account #container #aside > dl > dd > a:nth-of-type(1) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4.16699 5H15.8337M4.16699 8.33333H15.8337M4.16699 11.6667H15.8337M4.16699 15H15.8337' stroke='%23637083' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #wrap.my-account #container #aside > dl > dd > a:nth-of-type(2) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2.5 2.5H3.66962C4.44778 2.5 5.12238 3.03848 5.29484 3.7973L5.75758 5.83333M7.08333 11.6667H13.6549C14.7114 11.6667 15.6539 11.0025 16.0092 10.0075L17.1023 6.94695C17.2961 6.40424 16.8938 5.83333 16.3175 5.83333H5.75758M7.08333 11.6667L5.75758 5.83333M7.08333 11.6667L7.5713 13.3745C7.77572 14.09 8.4297 14.5833 9.17384 14.5833H15M9.16667 16.6667H9.175M14.1667 16.6667H14.175' stroke='%23637083' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #wrap.my-account #container #aside > dl > dd > a:nth-of-type(3) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M9.77921 2.08583C9.87302 1.90805 10.1276 1.90805 10.2214 2.08583L12.49 6.38562C12.5262 6.45418 12.5921 6.50208 12.6685 6.5153L17.4589 7.34415C17.657 7.37843 17.7357 7.62058 17.5956 7.76473L14.2072 11.251C14.1532 11.3066 14.128 11.3841 14.1391 11.4608L14.8311 16.2729C14.8597 16.4718 14.6537 16.6215 14.4733 16.5328L10.1106 14.3877C10.0411 14.3535 9.95958 14.3535 9.89001 14.3877L5.52733 16.5328C5.34694 16.6215 5.14095 16.4718 5.16956 16.2729L5.86158 11.4608C5.87262 11.3841 5.84743 11.3066 5.79341 11.251L2.4051 7.76473C2.265 7.62059 2.34368 7.37843 2.54176 7.34415L7.33213 6.5153C7.40851 6.50208 7.47445 6.45418 7.51062 6.38562L9.77921 2.08583Z' stroke='%23637083' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #wrap.my-account #container #aside > dl > dd > a:nth-of-type(4) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M14.1414 16.2539C13.9381 14.6077 12.5345 13.3333 10.8333 13.3333H9.16667C7.46548 13.3333 6.06194 14.6077 5.85864 16.2539M14.1414 16.2539C16.1655 14.9108 17.5 12.6112 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 12.6112 3.83447 14.9108 5.85864 16.2539M14.1414 16.2539C12.9547 17.0413 11.5309 17.5 10 17.5C8.46911 17.5 7.04534 17.0413 5.85864 16.2539M12.5 8.33333C12.5 9.71405 11.3807 10.8333 10 10.8333C8.61929 10.8333 7.5 9.71405 7.5 8.33333C7.5 6.95262 8.61929 5.83333 10 5.83333C11.3807 5.83333 12.5 6.95262 12.5 8.33333Z' stroke='%23637083' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #wrap.my-account #container #main { flex: 1 1 auto; min-width: 0; flex-flow: column nowrap; } /* column wrap 이면 내용 폭으로 커져 1280 에서 넘침 */ #wrap.my-account #container #main.login { display: none; } #wrap.my-account.member #container #main.login { display: block; } #wrap.my-account #container #main.login > ul { width: 100%; display: flex; gap: 20px 0; flex-flow: column wrap; } #wrap.my-account #container #main.login > ul + ul { margin-top: 30px; } #wrap.my-account #container #main.login > ul > li { flex: 1 1 0; min-width: 0; display: flex; flex-flow: column wrap; gap: 20px 0; padding: 20px; align-items: center; border-radius: 10px; border: 1px solid #CED2DA; box-shadow: 0px 25px 60px -10px rgba(28, 39, 49, 0.12); } #wrap.my-account #container #main.login > ul > li > p:nth-of-type(1) { width: 204px; max-width: 100%; height: 192px; } #wrap.my-account #container #main.login > ul > li > p:nth-of-type(1) img { max-width: 100%; height: auto; } #wrap.my-account #container #main.login > ul > li > p:nth-of-type(2) { font-size: 28px; font-weight: 700; color: var(--HD_Discovery_Blue); text-align: center; } #wrap.my-account #container #main.login > ul > li > div { font-weight: 300; } #wrap.my-account #container #main.login > ul > li > div > p { font-size: 11px; line-height: 17px; color: var(--text-secondary); padding-left: 17px; position: relative; } #wrap.my-account #container #main.login > ul > li > div > p::before { content: ''; position: absolute; left: 8px; top: 6px; width: 3px; height: 3px; border-radius: 100px; background: var(--text-secondary); } #wrap.my-account #container #main.login > ul > li > div.half { width: 100%; display: flex; flex-wrap: wrap; } #wrap.my-account #container #main.login > ul > li > div.half > p { width: 50%; } #wrap.my-account #container #main.login > ul > li > ul { width: 100%; display: flex; gap: 0 10px; } #wrap.my-account #container #main.login > ul > li > ul > li { flex: 1 0 0; } #wrap.my-account #container #main.login > ul > li > ul > li > a { min-height: 60px; padding: 9px 0; text-align: center; border: 1px solid #CED2DA; border-radius: 4px; color: var(--text-secondary); font-size: 16px; font-weight: 700; display: flex; flex-wrap: wrap; align-content: center; gap: 6px 0; } #wrap.my-account #container #main.login > ul > li > ul > li > a > p { width: 100%; } #wrap.my-account #container #main.login > ul > li > ul > li > a > span { width: 100%; font-size: 12px; line-height: 14px; font-weight: 400; } #wrap.my-account #container #main.login > div { gap: 30px 0; padding: 30px; margin: 30px 0 10px; box-shadow: 0px 25px 60px -10px rgba(28, 39, 49, 0.12); border: 1px solid #CED2DA; border-radius: 10px; } #wrap.my-account #container #main.login > div > p { font-size: 20px; font-weight: 700; gap: 0 5px; } #wrap.my-account #container #main.login > div ul { gap: 10px 0; width: 100%; } #wrap.my-account #container #main.login > div ul > li { width: 100%; } #wrap.my-account #container #main.login > div ul > li > select { height: 36px; } #wrap.my-account #container #main.login > div ul > li .button.submit { width: 100%; } #wrap.my-account.member #container #main.logout { display: none !important; } #wrap.my-account #container #main.logout { gap: 30px 0; padding-bottom: 40px; } #wrap.my-account #container #main.logout > p:nth-of-type(2) { font-size: 24px; font-weight: 700; line-height: 1.4; color: #393939; text-align: center; } #wrap.my-account #container #main.logout > a { width: 228px; } #wrap.my-account #container #main.logout > div { font-size: 12px; font-weight: 400; line-height: 1.4; color: #393939; text-align: center; } } /* ====================== my-account History & Status ====================== */ .status { width: 111px; height: 24px; border-radius: 100px; text-align: center; line-height: 25px; flex: 0 0 auto; } .status > span { padding-left: 10px; position: relative; font-size: 10px; font-weight: 400; } .status > span::before { content: ''; left: 0; top: 2px; position: absolute; width: 6px; height: 6px; border-radius: 6px; } .status.order-requesting { background: #EFF1F4; color: var(--text-secondary); } .status.order-requesting > span::before { background: var(--text-secondary); } .status.order-received { background: #E4F2E4; color: var(--HD_Green3); } .status.order-received > span::before { background: var(--HD_Green3); } .status.cart-canceled { background: #F5EAD5; color: #996600; } .status.cart-canceled > span::before { background: #996600; } .status.order-canceled { background: #FFDEDE; color: #C20A0A; } .status.order-canceled > span::before { background: #C20A0A; } #wrap.my-account.history-status #container #main {} #wrap.my-account.history-status #container #main .section2 {} #wrap.my-account.history-status #container #main .section2 .list > ul > li { gap: 0 30px; } #wrap.my-account.history-status #container #main .section2 .list > ul > li > div { flex: 0 0 auto; } #wrap.my-account.history-status #container #main .section2 .list > ul > li > div:nth-of-type(1) { width: 80px; } #wrap.my-account.history-status #container #main .section2 .list > ul > li > div:nth-of-type(2) { width: 200px; } #wrap.my-account.history-status #container #main .section2 .list > ul > li > div:nth-of-type(3) { width: 200px; } #wrap.my-account.history-status #container #main .section2 .list > ul > li > div:nth-of-type(4) { flex: 1 0 0; justify-content: flex-start; } #wrap.my-account.history-status #container #main .section2 .list > ul > li > div:nth-of-type(5) { width: 100px; } #wrap.my-account.history-status #container #main .section2 .list > ul > li > div:nth-of-type(6) { width: 111px; } #wrap.my-account.history-status #container #main .section2 .list > ul > li > div:nth-of-type(7) { width: 55px; } #wrap.my-account.history-status #container #main .section2 .list > ul.body > li > div.no { display: flex; flex-direction: column; align-items: center; gap: 4px 0; } #wrap.my-account.history-status #container #main .section2 .list > ul.body > li > div.no > a { max-width: 100%; flex: 0 0 auto; font-weight: 700; padding-right: 19px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.75 2.5L7.54289 5.29289C7.93342 5.68342 7.93342 6.31658 7.54289 6.70711L4.75 9.5' stroke='%23004AD6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center no-repeat; } #wrap.my-account.history-status #container #main .section2 .list > ul.body > li > div.no .canceled { width: 111px; height: 14px; border-radius: 100px; text-align: center; font-size: 10px; line-height: 15px; } #wrap.my-account.history-status #container #main .section2 .list > ul.body > li > div.no .canceled.yellow { background: #f5ead5; color: #996600; } #wrap.my-account.history-status #container #main .section2 .list > ul.body > li > div.no .canceled.red { background: #FFDEDE; color: #C20A0A; } #wrap.my-account.history-status #container #main .section2 .list > ul.body > li > div:nth-of-type(4) { display: block; } #wrap.my-account.history-status #container #main .section2 .list > ul.body > li > div:nth-of-type(4) > p:nth-of-type(1) { font-weight: 700; } #wrap.my-account.history-status #container #main .section2 .list > ul.body > li > div:nth-of-type(4) > p:nth-of-type(2) { margin-top: 4px; color: var(--text-tertiary); } #wrap.my-account.history-status #container #main .section2 .button-cancel { width: 100%; height: 24px; border-radius: 6px; border: 1px solid #CED2DA; font-size: 12px; color: var(--text-secondary); text-align: center; line-height: 22px; } #wrap.my-account.history-status #container #main .section2 > dl { margin-top: 30px; } #wrap.my-account.history-status #container #main .section2 > dl > dt { display: flex; align-items: center; font-size: 12px; font-weight: 700; color: var(--text-secondary); gap: 0 4px; } #wrap.my-account.history-status #container #main .section2 > dl > dd { margin-top: 16px; display: flex; align-items: center; gap: 0 7px; } #wrap.my-account.history-status #container #main .section2 > dl > dd > span { font-size: 11px; color: var(--text-secondary); line-height: 1.4; word-break: keep-all; } #wrap.my-account.history-status #container #main .section2 > dl > dd~dd { margin-top: 10px; } /* Backorder List */ #wrap.my-account.backorder-list #container #main .section2 .list > ul > li { gap: 0 20px; } #wrap.my-account.backorder-list #container #main .section2 .list > ul > li > div { flex: 0 0 auto; } #wrap.my-account.backorder-list #container #main .section2 .list > ul > li > div:nth-of-type(1) { width: 140px; } #wrap.my-account.backorder-list #container #main .section2 .list > ul > li > div:nth-of-type(2) { width: 120px; } #wrap.my-account.backorder-list #container #main .section2 .list > ul > li > div:nth-of-type(3) { width: 180px; } #wrap.my-account.backorder-list #container #main .section2 .list > ul > li > div:nth-of-type(4) { width: 100px; } #wrap.my-account.backorder-list #container #main .section2 .list > ul > li > div:nth-of-type(5) { flex: 1 0 0; justify-content: flex-start; } #wrap.my-account.backorder-list #container #main .section2 .list > ul.body > li > div.no { font-weight: 700; } #wrap.my-account.backorder-list #container #main .section2 .list > ul.body > li > div.remark { display: block; text-align: left; word-break: break-word; } /* ====================== my-account orders-detail ====================== */ #wrap.orders-detail #container #main .section1 {} #wrap.orders-detail #container #main .section1 > div { gap: 20px 0; padding: 30px; border-top: 1px solid #E4E7EC; border-bottom: 1px solid #E4E7EC; } #wrap.orders-detail #container #main .section1 > div > ul { display: flex; gap: 0 60px; flex: 1 0 auto; } #wrap.orders-detail #container #main .section1 > div > ul > li { min-width: 200px; } #wrap.orders-detail #container #main .section1 > div > ul > li > p { font-size: 12px; } #wrap.orders-detail #container #main .section1 > div > ul > li > div { margin-top: 10px; font-size: 18px; font-weight: 700; height: 30px; display: flex; align-items: center; } #wrap.orders-detail #container #main .section1 > div > ul > li > div .status { height: 30px; line-height: 28px; } #wrap.orders-detail #container #main .section1 > div > ul:nth-of-type(2) > li:nth-of-type(1) > div { display: flex; height: auto; flex-direction: column; align-items: flex-start; } #wrap.orders-detail #container #main .section1 > div > ul:nth-of-type(2) > li:nth-of-type(1) > div > * { line-height: 30px; } #wrap.orders-detail #container #main .section1 > div > ul:nth-of-type(2) > li:nth-of-type(1) > div > span { font-size: 16px; } #wrap.orders-detail.detail1 #container #main .section2 { border-top: 0; margin-top: 0; } #wrap.orders-detail.detail1 #container #main .section2 .list { border-bottom: 1px solid #97A1AF; } #wrap.orders-detail.detail1 #container #main .section2 .list > ul > li { justify-content: space-between; } #wrap.orders-detail.detail1 #container #main .section2 .list > ul > li > div { flex: 0 0 auto; } #wrap.orders-detail.detail1 #container #main .section2 .list > ul > li > div:nth-of-type(1) { width: 260px; justify-content: flex-start; } #wrap.orders-detail.detail1 #container #main .section2 .list > ul > li > div:nth-of-type(2) { width: 55px; } #wrap.orders-detail.detail1 #container #main .section2 .list > ul > li > div:nth-of-type(3) { width: 134px; justify-content: flex-end; text-align: right; } #wrap.orders-detail.detail1 #container #main .section2 .list > ul > li > div:nth-of-type(4) { width: 134px; justify-content: flex-end; text-align: right; } #wrap.orders-detail.detail1 #container #main .section2 .list > ul.body > li > div:nth-of-type(1) { font-size: 14px; font-weight: 700; } #wrap.orders-detail.detail1 #container #main .section2 .list > ul.body > li > div:nth-of-type(4) { font-size: 14px; font-weight: 700; } #wrap.orders-detail.detail1 #container #main .section2 > ul.total > li { display: flex; width: 100%; padding: 17px 20px; align-items: center; background: #F2F4F7; border: 1px solid #E4E7EC; border-top: 0; border-radius: 0 0 10px 10px; gap: 0 20px; justify-content: flex-end; } #wrap.orders-detail.detail1 #container #main .section2 > ul.total > li > span { font-size: 12px; color: var(--text-tertiary); } #wrap.orders-detail.detail1 #container #main .section2 > ul.total > li > p { font-size: 20px; font-weight: 700; } #wrap.orders-detail.detail2 #container #main .section2 { border-top: 0; margin-top: 0; } #wrap.orders-detail.detail2 #container #main .section2 .list { border-radius: 10px; } #wrap.orders-detail.detail2 #container #main .section2 .list > ul > li { justify-content: space-between; } #wrap.orders-detail.detail2 #container #main .section2 .list > ul > li > div { flex: 0 0 auto; text-align: center; } #wrap.orders-detail.detail2 #container #main .section2 .list > ul > li > div:nth-of-type(1) { width: 38px; justify-content: flex-start; text-align: left; } #wrap.orders-detail.detail2 #container #main .section2 .list > ul > li > div:nth-of-type(2) { width: 210px; justify-content: flex-start; } #wrap.orders-detail.detail2 #container #main .section2 .list > ul > li > div:nth-of-type(3) { width: 45px; } #wrap.orders-detail.detail2 #container #main .section2 .list > ul > li > div:nth-of-type(4) { width: 60px; } #wrap.orders-detail.detail2 #container #main .section2 .list > ul > li > div:nth-of-type(5) { width: 101px; } #wrap.orders-detail.detail2 #container #main .section2 .list > ul > li > div:nth-of-type(6) { width: 74px; } #wrap.orders-detail.detail2 #container #main .section2 .list > ul > li > div:nth-of-type(7) { width: 74px; } #wrap.orders-detail.detail2 #container #main .section2 .list > ul > li > div:nth-of-type(8) { width: 74px; } #wrap.orders-detail.detail2 #container #main .section2 .list > ul > li > div:nth-of-type(9) { width: 180px; } #wrap.orders-detail.detail2 #container #main .section2 .list > ul.body > li > div:nth-of-type(2) { font-weight: 700; } #wrap.orders-detail.detail2 #container #main .section2 .list > ul.body > li > div:nth-of-type(5) { justify-content: flex-end; } #wrap.orders-detail.detail2 #container #main .section2 .list > ul.total > li { background: #F2F4F7; font-size: 14px; font-weight: 700; border-top: 1px solid #97A1AF; } #wrap.orders-detail.detail2 #container #main .section2 .list > ul.total > li > div { justify-content: center; text-align: center; } #wrap.orders-detail.detail2 #container #main .section2 .list > ul.total > li > div:nth-of-type(5) { width: 101px; justify-content: flex-end; } /* 차단기 주문 현황 표 (LowMotorOrderStatusMA, 2026-10-06): 12열 — 위의 nth-of-type 폭을 덮어씀 */ #wrap.orders-detail.detail2 #container #main .section2 .list.ma > ul > li { justify-content: flex-start; gap: 0 6px; } #wrap.orders-detail.detail2 #container #main .section2 .list.ma > ul.head > li { height: auto; min-height: 68px; padding-top: 8px; padding-bottom: 8px; } #wrap.orders-detail.detail2 #container #main .section2 .list.ma > ul.body > li > div:nth-of-type(n+6):nth-of-type(-n+11) { white-space: nowrap; font-size: 11px; } #wrap.orders-detail.detail2 #container #main .section2 .list.ma > ul.body > li > div:nth-of-type(3) { color: inherit; font-weight: 400; } #wrap.orders-detail.detail2 #container #main .section2 .list.ma > ul > li > div { flex: 1 1 0; min-width: 0; width: auto !important; justify-content: center; text-align: center; font-size: 12px; line-height: 1.3; } #wrap.orders-detail.detail2 #container #main .section2 .list.ma > ul > li > div:nth-of-type(1) { flex: 0 0 52px; justify-content: flex-start; text-align: left; } #wrap.orders-detail.detail2 #container #main .section2 .list.ma > ul > li > div:nth-of-type(2) { flex: 2.4 1 0; justify-content: flex-start; text-align: left; word-break: break-all; } #wrap.orders-detail.detail2 #container #main .section2 .list.ma > ul > li > div:nth-of-type(3), #wrap.orders-detail.detail2 #container #main .section2 .list.ma > ul > li > div:nth-of-type(4) { flex: 0 0 62px; } #wrap.orders-detail.detail2 #container #main .section2 .list.ma > ul > li > div:nth-of-type(5) { flex: 0 0 84px; justify-content: flex-end; text-align: right; } #wrap.orders-detail.detail2 #container #main .section2 .list.ma > ul > li > div:nth-of-type(12) { flex: 1 1 0; } #wrap.orders-detail.detail2 #container #main .section2 .list.ma > ul.head > li > div { font-weight: 700; } #wrap.orders-detail.detail2 #container #main .section2 .list.ma > ul.body > li > div:nth-of-type(2) { font-weight: 700; } #wrap.orders-detail.detail2 #container #main .section2 .list.ma > ul.body > li.canceled > div { color: var(--text-tertiary); } #wrap.orders-detail.detail2 #container #main .section2 .list.ma > ul.body > li.canceled > div:nth-of-type(2) { text-decoration: line-through; } #wrap.orders-detail.detail2 #container #main .section2 .list.ma > ul.body > li em.cancel { margin-right: 6px; padding: 2px 6px; border-radius: 4px; background: #FFE9E5; color: #C93A25; font-size: 11px; font-style: normal; font-weight: 700; } #wrap.orders-detail.detail2 #container #main .section2 .list.ma > ul.body > li.empty { justify-content: center; } #wrap.orders-detail.detail2 #container #main .section2 .list.ma > ul.body > li.empty > div { flex: 0 0 auto !important; color: var(--text-tertiary); } #wrap.orders-detail.detail2 #container #main .section2 .as-of { margin-top: 10px; padding: 0 28px; font-size: 11px; color: var(--text-tertiary); } #wrap.orders-detail #container #main .section3 { border-top: 0; margin-top: 0; padding-bottom: 80px; } #wrap.orders-detail #container #main .section3 > ul { gap: 0 30px; } #wrap.orders-detail #container #main .section3 > ul > li { min-width: 670px; flex: 1 0 auto; } #wrap.orders-detail #container #main .section3 > ul > li > p { height: 30px; font-weight: 700; } #wrap.orders-detail #container #main .section3 > ul > li > div { border-radius: 10px; border: 1px solid #E4E7EC; width: 100%; padding: 17px 20px; } #wrap.orders-detail #container #main .section3 > ul > li > div > p { font-size: 14px; font-weight: 700; } #wrap.orders-detail #container #main .section3 > ul > li > div > div { margin-top: 10px; gap: 0 30px; } #wrap.orders-detail #container #main .section3 > ul > li > div > div > div { gap: 0 10px; } #wrap.orders-detail #container #main .section3 > ul > li > div > div > div > p { width: 16px; height: 12px; background: #ccc; } #wrap.orders-detail #container #main .section3 > ul > li > div > div > div > p img { width: 100%; } #wrap.orders-detail #container #main .section3 > ul > li > div > div > div > span { font-size: 12px; } #wrap.orders-detail #container #main .section3 > ul > li > div > div > p { gap: 0 4px; font-size: 12px; } @media (max-width: 768px) { /*================================================================================= */ #wrap.orders-detail #container #main .section1 > div { padding: 30px 0; gap: 20px 0; } #wrap.orders-detail #container #main .section1 > div > ul { flex-wrap: wrap; gap: 20px 0; } #wrap.orders-detail #container #main .section1 > div > ul > li { width: 100%; } #wrap.orders-detail #container #main .section3 > ul { width: 100%; flex-wrap: wrap; gap: 30px 0; } #wrap.orders-detail #container #main .section3 > ul > li { width: 100%; min-width: auto; } #wrap.orders-detail #container #main .section3 > ul > li > p {} #wrap.orders-detail #container #main .section3 > ul > li > div { gap: 20px 0; margin-top: 10px; } #wrap.orders-detail #container #main .section3 > ul > li > div > div { width: 100%; flex-wrap: wrap; gap: 20px 0; margin-top: 0; } #wrap.orders-detail #container #main .section3 > ul > li > div > div > div { align-items: flex-start !important; } #wrap.orders-detail #container #main .section3 > ul > li > div > div > div > p { flex: 0 0 auto; } } /* ====================== my-account account-manage ====================== */ #wrap.account-manage #container #main .section1 {} #wrap.account-manage #container #main .section1 > div > form > ul { width: 100%; border: 1px solid #E4E7EC; border-radius: 10px; display: flex; gap: 16px 30px; padding: 20px 30px; flex-wrap: wrap; } #wrap.account-manage #container #main .section1 > div > form > ul > li { width: 100%; } #wrap.account-manage #container #main .section1 > div > form > ul > li:nth-of-type(1) > div { width: 500px; } #wrap.account-manage #container #main .section1 > div > form > ul > li:nth-of-type(2) { font-size: 14px; } #wrap.account-manage #container #main .section1 > div > form > div { margin-top: 20px; } #wrap.account-manage #container #main .section2 { padding: 30px 0 50px; border-top: 1px solid #E4E7EC; display: flex; gap: 0 20px; } #wrap.account-manage #container #main .section2 > div { width: 440px; } #wrap.account-manage #container #main .section2 > div > div { display: flex; align-items: center; font-size: 16px; gap: 0 16px; line-height: 30px; } #wrap.account-manage #container #main .section2 > div > div > p { font-weight: 700; } #wrap.account-manage #container #main .section2 > div > form { margin-top: 20px; } #wrap.account-manage #container #main .section2 > div > form > ul { min-height: 362px; padding: 20px 30px; border: 1px solid #E4E7EC; border-radius: 10px; display: flex; align-content: flex-start; flex-wrap: wrap; gap: 10px 8px; } #wrap.account-manage #container #main .section2 > div > form > ul > li { width: 100%; } #wrap.account-manage #container #main .section2 > div > form > ul > li.auto { width: 30%; flex: 1 1 auto; } #wrap.account-manage #container #main .section2 > div > form > ul > li > p { line-height: 20px; font-size: 14px; color: var(--text-secondary); } #wrap.account-manage #container #main .section2 > div > form > ul > li > div { margin-top: 6px; } #wrap.account-manage #container #main .section2 > div > form > p { margin-top: 20px; } /* 2026-10-14 사용자 요청: Account Manage 의 Save 가 옛 모터 녹색(common.css .button.submit, 100×36)이라 다른 페이지와 안 어울림 → 네이비 + 폼 제출 버튼 규격(Support 'Send inquiry'·Cart Order 와 같은 계열: 42px·14px Bold·radius 6, hover #00256B) */ #wrap.account-manage .button.submit { min-width: 140px; height: 42px; padding: 0 26px; border-radius: 6px; background: var(--HD_Discovery_Blue); border-color: var(--HD_Discovery_Blue); color: #fff; font-size: 14px; font-weight: 700; } #wrap.account-manage .button.submit:hover { background: #00256B; border-color: #00256B; } /* Change Password 는 원래 회색 채움(common.css .button-change-pwd 30px·12px) 유지, 크기만 살짝 축소 — 2026-10-14 사용자 결정(보조 테두리형은 되돌림) */ #wrap.account-manage .button-change-pwd { height: 26px; line-height: 26px; padding: 0 8px 0 30px; font-size: 11px; background-size: 16px 16px; background-position: 8px center; } @media (max-width: 768px) { /*================================================================================= */ #wrap.account-manage #container #main .section1 > div > form > ul > li:nth-of-type(1) > div { width: 100%; } #wrap.account-manage #container #main .section2 { margin-left: 28px; margin-right: 28px; width: calc(100% - 56px); flex-wrap: wrap; } #wrap.account-manage #container #main .section2 > div { width: 100%; } #wrap.account-manage #container #main .section2 > div > div { justify-content: space-between; } #wrap.account-manage #container #main .section2 > div:nth-of-type(2) { margin-top: 30px; padding-top: 20px; border-top: 1px solid #E4E7EC; } #wrap.account-manage #container #main .section2 > div > form > ul > li.auto { width: 100%; flex: 0 0 auto; } } /* ====================== my-account favorite-project ====================== */ #wrap.favorite-product #container #main .section1 { border-top: 0; margin-top: 0; } #wrap.favorite-product #container #main .section1 .list {} #wrap.favorite-product #container #main .section1 .list > ul > li { justify-content: space-between; } #wrap.favorite-product #container #main .section1 .list > ul > li > div { flex: 0 0 auto; text-align: center; } #wrap.favorite-product #container #main .section1 .list > ul > li > div:nth-of-type(1) { width: 260px; justify-content: flex-start; } #wrap.favorite-product #container #main .section1 .list > ul > li > div:nth-of-type(2) { width: 200px; justify-content: flex-start; } #wrap.favorite-product #container #main .section1 .list > ul > li > div:nth-of-type(3) { width: 50px; } #wrap.favorite-product #container #main .section1 .list > ul > li > div:nth-of-type(4) { width: 50px; } #wrap.favorite-product #container #main .section1 .list > ul > li > div:nth-of-type(5) { width: 38px; } #wrap.favorite-product #container #main .section1 .list > ul > li > div:nth-of-type(6) { width: 58px; } #wrap.favorite-product #container #main .section1 .list > ul > li > div:nth-of-type(7) { width: 62px; } #wrap.favorite-product #container #main .section1 .list > ul > li > div:nth-of-type(8) { width: 60px; } #wrap.favorite-product #container #main .section1 .list > ul > li > div:nth-of-type(9) { width: 60px; } #wrap.favorite-product #container #main .section1 .list > ul > li > div:nth-of-type(10) { width: 38px; } #wrap.favorite-product #container #main .section1 .list > ul.body > li > div:nth-of-type(1) { font-size: 14px; font-weight: 700; color: var(--HD-Trust-Blue); } /* My Favorite 개정(2026-10-05): 차단기·모터 통합, 담은 시간순 — 열을 클래스로 지정(위의 nth-of-type 폭을 덮어씀) */ #wrap.favorite-product #container #main .section1 .list.fav-list > ul > li { justify-content: flex-start; gap: 0 14px; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul > li > div { width: auto; text-align: left; justify-content: flex-start; font-size: 12px; font-weight: 400; color: var(--text-primary); } #wrap.favorite-product #container #main .section1 .list.fav-list > ul > li > div.date { flex: 0 0 112px; color: var(--text-secondary); white-space: nowrap; font-size: 11px; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul > li > div.code { flex: 0 0 clamp(210px, 17vw, 270px); white-space: nowrap; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul > li > div.prod { flex: 1 1 auto; min-width: 0; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul > li > div.stock { flex: 0 0 56px; justify-content: center; text-align: center; white-space: nowrap; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul > li > div.price { flex: 0 0 76px; justify-content: flex-end; text-align: right; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul > li > div.cart { flex: 0 0 112px; justify-content: flex-start; gap: 0 6px; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul > li > div.tech { flex: 0 0 78px; justify-content: center; text-align: center; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul > li > div.del { flex: 0 0 44px; justify-content: center; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul.head > li > div { font-size: 13px; font-weight: 700; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul.body > li > div.code { font-size: 14px; font-weight: 700; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul.body > li > div.code > a { color: var(--HD_Discovery_Blue); } #wrap.favorite-product #container #main .section1 .list.fav-list > ul.body > li > div.code > a:hover { text-decoration: underline; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul.body > li > div.prod { flex-direction: row; align-items: baseline; gap: 0 10px; white-space: nowrap; overflow: hidden; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul.body > li > div.prod > b { font-weight: 700; flex: 0 0 auto; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul.body > li > div.prod > span { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul.body > li > div.price { font-weight: 700; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul.body > li > div.cart > a, #wrap.favorite-product #container #main .section1 .list.fav-list > ul.body > li > div.tech > a { min-width: 50px; width: auto; padding: 0 8px; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul.body > li > div.cart > a.button-view { background: var(--HD_Discovery_Blue); border-color: var(--HD_Discovery_Blue); color: #fff; } /* 제품 목록과 같은 색: EA = 네이비, Box = 그린 */ #wrap.favorite-product #container #main .section1 .list.fav-list > ul.body > li > div.cart > a.button-view.box { background: var(--HD_Green3); border-color: var(--HD_Green3); } #wrap.favorite-product #container #main .section1 .list.fav-list > ul.body > li > div.date { font-weight: 400; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul.body > li.empty { justify-content: center; padding: 40px 0; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul.body > li.empty > div { flex: 0 0 auto; color: var(--text-tertiary); display: block; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul.body > li.empty > div > a { color: var(--HD_Discovery_Blue); font-weight: 700; } #wrap.favorite-product #container #main .section1 .list > ul.body > li > div:nth-of-type(8) > a, #wrap.favorite-product #container #main .section1 .list > ul.body > li > div:nth-of-type(9) > a { min-width: auto; width: 100%; } /* ====================== cart 공통 ====================== */ #wrap.cart #container #main .page-title > p:nth-of-type(1) { display: flex; align-items: center; gap: 0 10px; } #wrap.cart #container #main .page-title > p:nth-of-type(1) > span:nth-of-type(2) { display: block; padding: 0 10px; height: 24px; border-radius: 100px; background: var(--HD_Green2); color: #fff; font-size: 12px; line-height: 24px; font-weight: 300; } #wrap.cart #container #main .next-btn { margin: 20px auto 0; background: var(--HD_Green2); width :250px; height: 50px; cursor: pointer; border-radius: 6px; color: #fff; display: flex; align-items: center; justify-content: center; } #wrap.cart #container #main .next-btn > span { padding-right: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='20' viewBox='0 0 21 20' fill='none'%3E%3Cpath d='M3.83366 10L17.167 10M17.167 10L12.167 15M17.167 10L12.167 5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center no-repeat; } /* ====================== cart list ====================== */ #wrap.cart.list #container #main #cart { width: 100%; } #wrap.cart.list #container #main .section1 { margin-top: 30px; } #wrap.cart.list #container #main .section1 .list {} #wrap.cart.list #container #main .section1 .list > ul > li { justify-content: space-between; } #wrap.cart.list #container #main .section1 .list > ul > li > div { flex: 0 0 auto; } #wrap.cart.list #container #main .section1 .list > ul > li > div:nth-of-type(1) { width: 260px; justify-content: flex-start; height: 16px; align-items: center; } #wrap.cart.list #container #main .section1 .list > ul > li > div:nth-of-type(1) label { cursor: pointer; padding-left: 26px; } #wrap.cart.list #container #main .section1 .list > ul > li > div:nth-of-type(1) label::before { top: -2px; } #wrap.cart.list #container #main .section1 .list > ul > li > div:nth-of-type(2) { width: 130px; } #wrap.cart.list #container #main .section1 .list > ul > li > div:nth-of-type(3) { width: 270px; } #wrap.cart.list #container #main .section1 .list > ul > li > div:nth-of-type(4) { width: 38px; } #wrap.cart.list #container #main .section1 .list > ul > li > div:nth-of-type(5) { width: 80px; justify-content: flex-end; text-align: right; } #wrap.cart.list #container #main .section1 .list > ul > li > div:nth-of-type(6) { width: 80px; justify-content: flex-end; text-align: right; } #wrap.cart.list #container #main .section1 .list > ul > li > div:nth-of-type(7) { width: 80px; justify-content: flex-end; text-align: right; } #wrap.cart.list #container #main .section1 .list > ul.body > li { padding-top: 10px; padding-bottom: 10px; } #wrap.cart.list #container #main .section1 .list > ul.body > li > div:nth-of-type(1) label { font-size: 14px; font-weight: 700; } #wrap.cart.list #container #main .section1 .list > ul.body > li > div:nth-of-type(2) { display: flex; gap: 0 10px; } #wrap.cart.list #container #main .section1 .list > ul.body > li > div:nth-of-type(2) > input { width: 50px; text-align: center; } #wrap.cart.list #container #main .section1 .list > ul.body > li > div:nth-of-type(3) { display: flex; flex-wrap: wrap; gap: 3px 0; } #wrap.cart.list #container #main .section1 .list > ul.body > li > div:nth-of-type(3) > a { width: 100%; text-align: center; line-height: 24px; font-size: 12px; font-weight: 700; } #wrap.cart.list #container #main .section1 .list > ul.body > li > div:nth-of-type(3) > a > span { padding-right: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='14' viewBox='0 0 15 14' fill='none'%3E%3Cpath d='M7.25 2.91675H4.91667C4.27233 2.91675 3.75 3.43908 3.75 4.08341V9.91675C3.75 10.5611 4.27233 11.0834 4.91667 11.0834H10.75C11.3943 11.0834 11.9167 10.5611 11.9167 9.91675V7.14591M11.9167 2.91675H9.58333M11.9167 2.91675V5.25008M11.9167 2.91675L6.08333 8.75008' stroke='%2300823D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center no-repeat; } #wrap.cart.list #container #main .section1 .list > ul.body > li > div:nth-of-type(5) { font-size: 14px; font-weight: 700; } #wrap.cart.list #container #main .section1 .list > ul.body > li > div:nth-of-type(6) { font-size: 14px; font-weight: 700; } #wrap.cart.list #container #main .section1 .list > ul.body > li > div:nth-of-type(7) { font-size: 14px; font-weight: 700; } #wrap.cart.list #container #main .section1 ul.total > li { display: flex; width: 100%; padding: 17px 30px; align-items: center; background: #F2F4F7; border: 1px solid #E4E7EC; border-top: 0; border-radius: 0 0 10px 10px; gap: 0 60px; justify-content: flex-end; } #wrap.cart.list #container #main .section1 ul.total > li > div { display: flex; align-items: center; gap: 0 14px; } #wrap.cart.list #container #main .section1 ul.total > li > div > span { font-size: 14px; } #wrap.cart.list #container #main .section1 ul.total > li > div > p { font-size: 20px; font-weight: 700; } #wrap.cart.list #container #main .section2 {} #wrap.cart.list #container #main .section2 > .title { font-size: 20px; } #wrap.cart.list #container #main .section2 .cart-sch { display: flex; align-items: center; padding: 20px 0; gap: 0 10px; } #wrap.cart.list #container #main .section2 .cart-sch > div { position: relative; } #wrap.cart.list #container #main .section2 .cart-sch > div > input[type=text] { width: 200px; height: 30px; border: 1px solid #97A1AF; border-radius: 6px; padding: 0 36px 0 12px; font-size: 12px; outline: none; } #wrap.cart.list #container #main .section2 .cart-sch > div > input[type=text]::placeholder { color: #637083; } #wrap.cart.list #container #main .section2 .cart-sch > div > input[type=submit] { position: absolute; right: 8px; top: 5px; width: 20px; height: 20px; border: 0; text-indent: -999999px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M12.083 12.0835L15.833 15.8335M13.333 8.3335C13.333 11.0949 11.0944 13.3335 8.33301 13.3335C5.57158 13.3335 3.33301 11.0949 3.33301 8.3335C3.33301 5.57207 5.57158 3.3335 8.33301 3.3335C11.0944 3.3335 13.333 5.57207 13.333 8.3335Z' stroke='%23637083' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat #fff; } #wrap.cart.list #container #main .section2 .cart-sch > p { font-size: 12px; color: var(--text-secondary); font-weight: 700; } #wrap.cart.list #container #main .section2 .cart-sch > p > span { color: var(--HD_Green3); } #wrap.cart.list #container #main .section2 .list > ul > li { justify-content: space-between; } #wrap.cart.list #container #main .section2 .list > ul > li > div { flex: 0 0 auto; text-align: center; } #wrap.cart.list #container #main .section2 .list > ul > li > div:nth-of-type(1) { width: 250px; justify-content: flex-start; } #wrap.cart.list #container #main .section2 .list > ul > li > div:nth-of-type(2) { width: 50px; } #wrap.cart.list #container #main .section2 .list > ul > li > div:nth-of-type(3) { width: 38px; } #wrap.cart.list #container #main .section2 .list > ul > li > div:nth-of-type(4) { width: 58px; } #wrap.cart.list #container #main .section2 .list > ul > li > div:nth-of-type(5) { width: 50px; } #wrap.cart.list #container #main .section2 .list > ul > li > div:nth-of-type(6) { width: 62px; } #wrap.cart.list #container #main .section2 .list > ul > li > div:nth-of-type(7) { width: 89px; } #wrap.cart.list #container #main .section2 .list > ul.body > li > div:nth-of-type(1) { font-size: 14px; color: var(--HD-Trust-Blue); font-weight: 700; } #wrap.cart.list #container #main .section2 .list > ul.body > li > div:nth-of-type(7) .button-view { width: 100%; } #wrap.cart.list #container #main .section3 { margin-top: 30px; } #wrap.cart.list #container #main .section3 > div { width: 100%; border: 1px solid #E4E7EC; border-radius: 10px; padding: 40px 20px; display: flex; flex-flow: column wrap; align-items: center; } #wrap.cart.list #container #main .section3 > div > p { font-size: 20px; color: #000; } @media (max-width: 768px) { /*================================================================================= */ #wrap.cart #container #main .next-btn { width: calc(100% - 56px); } #wrap.cart.list #container #main .section1 ul.total > li { padding: 10px 20px; gap: 10px 0; justify-content: flex-end; flex-wrap: wrap; } #wrap.cart.list #container #main .section1 ul.total > li > div { width: 100%; justify-content: flex-end; } #wrap.cart.list #container #main .section2 .cart-sch { gap: 10px 0; flex-wrap: wrap; width: 100%; } #wrap.cart.list #container #main .section2 .cart-sch > div { width: 100%; } #wrap.cart.list #container #main .section2 .cart-sch > div > input[type=text] { width: 100%; height: 30px; border: 1px solid #97A1AF; border-radius: 6px; padding: 0 36px 0 12px; font-size: 12px; outline: none; } #wrap.cart.list #container #main .section2 .cart-sch > div > input[type=text]::placeholder { color: #637083; } #wrap.cart.list #container #main .section2 .cart-sch > div > input[type=submit] { position: absolute; right: 8px; top: 5px; width: 20px; height: 20px; border: 0; text-indent: -999999px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M12.083 12.0835L15.833 15.8335M13.333 8.3335C13.333 11.0949 11.0944 13.3335 8.33301 13.3335C5.57158 13.3335 3.33301 11.0949 3.33301 8.3335C3.33301 5.57207 5.57158 3.3335 8.33301 3.3335C11.0944 3.3335 13.333 5.57207 13.333 8.3335Z' stroke='%23637083' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat #fff; } #wrap.cart.list #container #main .section2 .cart-sch > p { font-size: 12px; color: var(--text-secondary); font-weight: 700; } #wrap.cart.list #container #main .section2 .cart-sch > p > span { color: var(--HD_Green3); } } /* ====================== cart confirm ====================== */ #wrap.cart.confirm #container { display: flex; gap: 0 32px; width: 100%; } #wrap.cart.confirm #container #main { flex: 1 1 auto; } #wrap.cart.confirm #container #main .section1 .list { border-bottom: 1px solid #97A1AF; } #wrap.cart.confirm #container #main .section1 .list > ul > li { justify-content: space-between; padding-left: 100px; padding-right: 100px; } #wrap.cart.confirm #container #main .section1 .list > ul > li > div { flex: 0 0 auto; } #wrap.cart.confirm #container #main .section1 .list > ul > li > div:nth-of-type(1) { width: 223px; justify-content: flex-start; } #wrap.cart.confirm #container #main .section1 .list > ul > li > div:nth-of-type(2) { width: 100px; } #wrap.cart.confirm #container #main .section1 .list > ul > li > div:nth-of-type(3) { width: 270px; } #wrap.cart.confirm #container #main .section1 .list > ul > li > div:nth-of-type(4) { width: 38px; } #wrap.cart.confirm #container #main .section1 .list > ul > li > div:nth-of-type(5) { width: 80px; justify-content: flex-end; text-align: right; } #wrap.cart.confirm #container #main .section1 .list > ul > li > div:nth-of-type(6) { width: 80px; justify-content: flex-end; text-align: right; } #wrap.cart.confirm #container #main .section1 .list > ul > li > div:nth-of-type(7) { width: 80px; justify-content: flex-end; text-align: right; } #wrap.cart.confirm #container #main .section1 .list > ul.body > li { padding-top: 10px; padding-bottom: 10px; } #wrap.cart.confirm #container #main .section1 .list > ul.body > li > div:nth-of-type(1) { font-size: 14px; font-weight: 700; } #wrap.cart.confirm #container #main .section1 .list > ul.body > li > div:nth-of-type(3) { display: flex; flex-wrap: wrap; gap: 3px 0; } #wrap.cart.confirm #container #main .section1 .list > ul.body > li > div:nth-of-type(3) > a { width: 100%; text-align: center; line-height: 24px; font-size: 12px; font-weight: 700; } #wrap.cart.confirm #container #main .section1 .list > ul.body > li > div:nth-of-type(3) > a > span { padding-right: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='14' viewBox='0 0 15 14' fill='none'%3E%3Cpath d='M7.25 2.91675H4.91667C4.27233 2.91675 3.75 3.43908 3.75 4.08341V9.91675C3.75 10.5611 4.27233 11.0834 4.91667 11.0834H10.75C11.3943 11.0834 11.9167 10.5611 11.9167 9.91675V7.14591M11.9167 2.91675H9.58333M11.9167 2.91675V5.25008M11.9167 2.91675L6.08333 8.75008' stroke='%2300823D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center no-repeat; } #wrap.cart.confirm #container #main .section1 .list > ul.body > li > div:nth-of-type(5) { font-size: 14px; font-weight: 700; } #wrap.cart.confirm #container #main .section1 .list > ul.body > li > div:nth-of-type(6) { font-size: 14px; font-weight: 700; } #wrap.cart.confirm #container #main .section1 .list > ul.body > li > div:nth-of-type(7) { font-size: 14px; font-weight: 700; } #wrap.cart.confirm #container #main .section1 ul.total > li { display: flex; width: 100%; padding: 17px 100px; align-items: center; background: #F2F4F7; border: 1px solid #E4E7EC; border-top: 0; border-radius: 0 0 10px 10px; gap: 0 60px; justify-content: flex-end; } #wrap.cart.confirm #container #main .section1 ul.total > li > div { display: flex; align-items: center; gap: 0 14px; } #wrap.cart.confirm #container #main .section1 ul.total > li > div > span { font-size: 14px; } #wrap.cart.confirm #container #main .section1 ul.total > li > div > p { font-size: 20px; font-weight: 700; } #wrap.cart.confirm #container #main .section2 { border-top: 0; margin-top: 0; padding-bottom: 80px; } #wrap.cart.confirm #container #main .section2 > ul { gap: 0 30px; } #wrap.cart.confirm #container #main .section2 > ul > li { min-width: 670px; flex: 1 0 auto; } #wrap.cart.confirm #container #main .section2 > ul > li > p { line-height: 30px; font-weight: 700; font-size: 20px; } #wrap.cart.confirm #container #main .section2 > ul > li > div:nth-of-type(1) { display: flex; justify-content: flex-start; align-items: center; margin: 20px 0; } #wrap.cart.confirm #container #main .section2 > ul > li > div:nth-of-type(1) > div { width: 200px; } #wrap.cart.confirm #container #main .section2 > ul > li > div:nth-of-type(1) > p { cursor: pointer; color: var(--HD_Green3); font-size: 14px; text-decoration: underline; margin-left: 10px; } #wrap.cart.confirm #container #main .section2 > ul > li > div:nth-of-type(2) { border-radius: 10px; border: 1px solid #E4E7EC; width: 100%; padding: 17px 20px; } #wrap.cart.confirm #container #main .section2 > ul > li > div:nth-of-type(2) > p { font-size: 14px; font-weight: 700; } #wrap.cart.confirm #container #main .section2 > ul > li > div:nth-of-type(2) > div { margin-top: 10px; gap: 0 30px; } #wrap.cart.confirm #container #main .section2 > ul > li > div:nth-of-type(2) > div > div { gap: 0 10px; } #wrap.cart.confirm #container #main .section2 > ul > li > div:nth-of-type(2) > div > div > p { width: 16px; height: 12px; background: #ccc; } #wrap.cart.confirm #container #main .section2 > ul > li > div:nth-of-type(2) > div > div > p img { width: 100%; } #wrap.cart.confirm #container #main .section2 > ul > li > div:nth-of-type(2) > div > div > span { font-size: 12px; } #wrap.cart.confirm #container #main .section2 > ul > li > div:nth-of-type(2) > div > p { gap: 0 4px; font-size: 12px; } #wrap.cart.confirm #container .summary { width: 250px; flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 30px 0; align-content: flex-start; } #wrap.cart.confirm #container .summary > * { width: 100%; } #wrap.cart.confirm #container .summary > p { font-size: 20px; font-weight: 700; color: #000; height: 40px; line-height: 26px; border-bottom: 1px solid #E4E7EC; } #wrap.cart.confirm #container .summary > dl {} #wrap.cart.confirm #container .summary > dl > dt { display: flex; justify-content: space-between; font-size: 20px; font-weight: 700; color: #000; } #wrap.cart.confirm #container .summary > dl > dd { margin-top: 28px; } #wrap.cart.confirm #container .summary > dl > dd > p { color: var(--text-secondary); font-size: 12px; line-height: 16px; padding-left: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.8332 7.00008C12.8332 10.2217 10.2215 12.8334 6.99984 12.8334C3.77818 12.8334 1.1665 10.2217 1.1665 7.00008C1.1665 3.77842 3.77818 1.16675 6.99984 1.16675C10.2215 1.16675 12.8332 3.77842 12.8332 7.00008ZM6.4165 6.41675C6.4165 6.09458 6.67767 5.83342 6.99984 5.83342C7.322 5.83342 7.58317 6.09458 7.58317 6.41675V9.91675C7.58317 10.2389 7.322 10.5001 6.99984 10.5001C6.67767 10.5001 6.4165 10.2389 6.4165 9.91675V6.41675ZM6.99984 3.50008C6.67767 3.50008 6.4165 3.76125 6.4165 4.08341C6.4165 4.40558 6.67767 4.66675 6.99984 4.66675C7.322 4.66675 7.58317 4.40558 7.58317 4.08341C7.58317 3.76125 7.322 3.50008 6.99984 3.50008Z' fill='%23637083'/%3E%3C/svg%3E") left top no-repeat; } #wrap.cart.confirm #container .summary > dl > dd > p~p { margin-top: 10px; } #wrap.cart.confirm #container .summary > dl > dd > p > strong { font-weight: 700; } #wrap.cart.confirm #container .summary > dl > dd > p > a { font-weight: 700; text-decoration: underline; color: var(--HD_Green3); } #wrap.cart.confirm #container .summary > div { padding: 30px 0; border-top: 1px solid #E4E7EC; border-bottom: 1px solid #E4E7EC; } #wrap.cart.confirm #container .summary > div > p { font-size: 16px; font-weight: 700; } #wrap.cart.confirm #container .summary > div > div { margin-top: 10px; } #wrap.cart.confirm #container .summary .button-confirm { width: 100%; height: 50px; border-radius: 6px; background: var(--HD_Green2); color: #fff; font-size: 16px; text-align: center; font-weight: 400; line-height: 50px; } @media (max-width: 768px) { /*================================================================================= */ #wrap.cart.confirm #orderForm { width: 100%; } #wrap.cart.confirm #container { gap: 0; flex-wrap: wrap; } #wrap.cart.confirm #container #main { flex: 0 0 auto; width: 100%; } #wrap.cart.confirm #container #main .section1 ul.total > li { padding: 10px 20px; gap: 10px 0; justify-content: flex-end; flex-wrap: wrap; } #wrap.cart.confirm #container #main .section1 ul.total > li > div { width: 100%; justify-content: flex-end; } #wrap.cart.confirm #container #main .section2 { padding: 0; } #wrap.cart.confirm #container #main .section2 > ul { width: 100%; flex-wrap: wrap; gap: 30px 0; } #wrap.cart.confirm #container #main .section2 > ul > li { width: 100%; min-width: auto; } #wrap.cart.confirm #container #main .section2 > ul > li > p {} #wrap.cart.confirm #container #main .section2 > ul > li > div:nth-of-type(1) > div { width: 170px; } #wrap.cart.confirm #container #main .section2 > ul > li > div:nth-of-type(2) { gap: 20px 0; margin-top: 10px; } #wrap.cart.confirm #container #main .section2 > ul > li > div:nth-of-type(2) > div { width: 100%; flex-wrap: wrap; gap: 20px 0; margin-top: 0; } #wrap.cart.confirm #container #main .section2 > ul > li > div:nth-of-type(2) > div > div { align-items: flex-start !important; } #wrap.cart.confirm #container #main .section2 > ul > li > div:nth-of-type(2) > div > div > p { flex: 0 0 auto; } #wrap.cart.confirm #container .summary { width: 100%; padding-bottom: 80px; } } /* ====================== cart completed ====================== */ #wrap.cart.completed #container { padding: 20px 0 80px; } #wrap.cart.completed #container #main { width: 100%; max-width: 802px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 28px 0; } #wrap.cart.completed #container #main > * { width: 100%; } #wrap.cart.completed #container #main > .title { gap: 20px; font-size: 28px; color: var(--HD_Green2); font-weight: 700; padding: 30px 0; } #wrap.cart.completed #container #main > .title > p:nth-of-type(1) { width: 48px; height: 48px; border-radius: 48px; background: var(--HD_Green2); } #wrap.cart.completed #container #main .section1 { } #wrap.cart.completed #container #main .section1 > ul { width: 100%; padding: 30px 0; background: #F4F6FA; border-radius: 10px; border: 1px solid #E4E7EC; display: flex; gap: 0 100px; justify-content: center; } #wrap.cart.completed #container #main .section1 > ul > li { text-align: center; } #wrap.cart.completed #container #main .section1 > ul > li > p { font-size: 14px; color: var(--text-secondary); } #wrap.cart.completed #container #main .section1 > ul > li > div { margin-top: 10px; font-size: 20px; font-weight: 700; } #wrap.cart.completed #container #main .section2 .list { border-bottom: 1px solid #97A1AF; } #wrap.cart.completed #container #main .section2 .list > ul > li { justify-content: space-between; } #wrap.cart.completed #container #main .section2 .list > ul > li > div { flex: 0 0 auto; } #wrap.cart.completed #container #main .section2 .list > ul > li > div:nth-of-type(1) { width: 260px; justify-content: flex-start; } #wrap.cart.completed #container #main .section2 .list > ul > li > div:nth-of-type(2) { width: 55px; } #wrap.cart.completed #container #main .section2 .list > ul > li > div:nth-of-type(3) { width: 134px; justify-content: flex-end; } #wrap.cart.completed #container #main .section2 .list > ul > li > div:nth-of-type(4) { width: 134px; justify-content: flex-end; } #wrap.cart.completed #container #main .section2 .list > ul.head > li > div:nth-of-type(3) { font-weight: 700; } #wrap.cart.completed #container #main .section2 .list > ul.head > li > div:nth-of-type(4) { font-weight: 700; } #wrap.cart.completed #container #main .section2 .list > ul.body > li > div:nth-of-type(1) { font-weight: 700; font-size: 14px; } #wrap.cart.completed #container #main .section2 .list > ul.body > li > div:nth-of-type(4) { font-weight: 700; font-size: 14px; } #wrap.cart.completed #container #main .section2 ul.total > li { display: flex; width: 100%; padding: 17px 30px; align-items: center; background: #F2F4F7; border: 1px solid #E4E7EC; border-top: 0; border-radius: 0 0 10px 10px; gap: 0 60px; justify-content: flex-end; } #wrap.cart.completed #container #main .section2 ul.total > li > div { display: flex; align-items: center; gap: 0 14px; } #wrap.cart.completed #container #main .section2 ul.total > li > div > span { font-size: 12px; color: var(--text-tertiary); } #wrap.cart.completed #container #main .section2 ul.total > li > div > p { font-size: 20px; font-weight: 700; } #wrap.cart.completed #container #main .section3 {} #wrap.cart.completed #container #main .section3 > ul { gap: 0 30px; } #wrap.cart.completed #container #main .section3 > ul > li { flex: 1 1 0; } #wrap.cart.completed #container #main .section3 > ul > li > p { height: 30px; font-weight: 700; } #wrap.cart.completed #container #main .section3 > ul > li > div { border-radius: 10px; border: 1px solid #E4E7EC; width: 100%; padding: 17px 20px; margin-top: 10px; } #wrap.cart.completed #container #main .section3 > ul > li > div > p { font-size: 14px; font-weight: 700; } #wrap.cart.completed #container #main .section3 > ul > li > div > div { margin-top: 10px; gap: 10px 0; flex-wrap: wrap; } #wrap.cart.completed #container #main .section3 > ul > li > div > div > div { gap: 0 10px; width: 100%; } #wrap.cart.completed #container #main .section3 > ul > li > div > div > div > p { width: 16px; height: 12px; background: #ccc; } #wrap.cart.completed #container #main .section3 > ul > li > div > div > div > p img { width: 100%; } #wrap.cart.completed #container #main .section3 > ul > li > div > div > div > span { font-size: 12px; } #wrap.cart.completed #container #main .section3 > ul > li > div > div > p { gap: 0 4px; font-size: 12px; } #wrap.cart.completed #container #main .section3 > p { font-size: 14px; font-weight: 700; margin-top: 30px; padding-bottom: 50px; border-bottom: 1px solid #E4E7EC; } #wrap.cart.completed #container #main > a { width: 244px; height: 50px; margin: 0 auto; background: var(--text-tertiary); border-radius: 6px; text-align: center; line-height: 50px; font-size: 16px; color: #fff; } @media (max-width: 768px) { /*================================================================================= */ #wrap.cart.completed #container { padding: 0 0 50px; } #wrap.cart.completed #container #main .section1 > ul { flex-wrap: wrap; gap: 20px 0; } #wrap.cart.completed #container #main .section1 > ul > li { width: 100%; } #wrap.cart.completed #container #main .section3 {} #wrap.cart.completed #container #main .section3 > ul { width: 100%; flex-wrap: wrap; gap: 30px 0; } #wrap.cart.completed #container #main .section3 > ul > li { width: 100%; min-width: auto; flex: 0 0 auto; } #wrap.cart.completed #container #main .section3 > ul > li > p {} #wrap.cart.completed #container #main .section3 > ul > li > div { gap: 20px 0; margin-top: 10px; } #wrap.cart.completed #container #main .section3 > ul > li > div > div { width: 100%; flex-wrap: wrap; gap: 20px 0; margin-top: 0; } #wrap.cart.completed #container #main .section3 > ul > li > div > div > div { align-items: flex-start !important; } #wrap.cart.completed #container #main .section3 > ul > li > div > div > div > p { flex: 0 0 auto; } #wrap.cart.completed #container #main > a { width: calc(100% - 56px); } } /* ====================== registration ====================== */ #wrap.registration { padding: 90px 0; } #wrap.registration > div {} #wrap.registration > div > p {} #wrap.registration > div > p:nth-of-type(2) { margin-top: 25px; font-size: 35px; line-height: 1; font-weight: 700; color: var(--HD_Discovery_Blue); } #wrap.registration > div > form { width: 600px; } #wrap.registration > div .section { margin-top: 40px; border: 1px solid #D0D0D0; border-radius: 20px; width: min(100%, 600px); padding: 50px; } #wrap.registration > div .section > div > p:nth-of-type(1) { font-size: 24px; color: #393939; line-height: 1.4; font-weight: 700; } #wrap.registration > div .section > div > p:nth-of-type(2) { font-size: 12px; line-height: 1.4; margin-top: 10px; } #wrap.registration > div .section > dl { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 20px 8px; } #wrap.registration > div .section > dl > dd { width: 100%; } #wrap.registration > div .section > dl > dd > p { line-height: 20px; font-size: 14px; color: var(--text-secondary); } #wrap.registration > div .section > dl > dd > div { margin-top: 6px; } #wrap.registration > div .section > dl > dd > div.zip { display: flex; gap: 8px; } #wrap.registration > div .section > dl > dd > div.zip > input { flex: 1 0 0; } #wrap.registration > div .section > dl > dd > div.zip > p { flex: 0 0 auto; width: 60px; height: 30px; background: var(--text-tertiary); color: #fff; color: #fff; font-size: 12px; border-radius: 6px; cursor: pointer; text-align: center; line-height: 30px; } #wrap.registration > div .section > dl > dd.auto { flex: 1 1 0; } #wrap.registration > div .section > dl > dd.half { width: 40%; flex: 1 0 auto; } #wrap.registration > div .section > dl > dt { line-height: 30px; margin-top: 10px; padding-bottom: 20px; border-bottom: 1px solid #E4E7EC; width: 100%; font-weight: 700; } #wrap.registration > div .section > input[type=submit] { margin-top: 30px; border-radius: 5px; background: var(--HD_Green2); height: 40px; font-size: 15px; color: #fff; } #wrap.registration .copyright { margin-top: 20px; font-size: 10px; color: #6a6a6a; font-weight: 300; } @media (max-width: 768px) { /*================================================================================= */ #wrap.registration { padding: 90px 28px; } #wrap.registration > div > form { width: min(100%, 600px); } #wrap.registration > div .section { padding: 30px 20px; } #wrap.registration > div .section > div > p:nth-of-type(1) { font-size: 20px; } #wrap.registration > div .section > div > p:nth-of-type(2) { font-size: 10px; } #wrap.registration > div .section > dl > dd.auto { flex: 0 0 auto; width: 100%; } #wrap.registration > div .section > dl > dd.half { width: 100%; flex: 0 0 auto; } #wrap.registration .copyright { font-size: 8px; font-weight: 400; } } /* ====================== registration-completed ====================== */ #wrap.registration-completed { padding: 90px 0; } #wrap.registration-completed > div {} #wrap.registration-completed > div > p {} #wrap.registration-completed > div > p:nth-of-type(2) { margin-top: 25px; font-size: 35px; line-height: 1; font-weight: 700; color: var(--HD_Discovery_Blue); } #wrap.registration-completed > div .section { margin-top: 40px; border: 1px solid #D0D0D0; border-radius: 20px; width: min(100%, 600px); padding: 50px; text-align: center; } #wrap.registration-completed > div .section > p~p { margin-top: 10px; } #wrap.registration-completed > div .section > p:nth-of-type(1) { width: 150px; height: 150px; } #wrap.registration-completed > div .section > p:nth-of-type(2) { font-size: 24px; color: #393939; line-height: 1.4; font-weight: 700; } #wrap.registration-completed > div .section > p:nth-of-type(3) { font-size: 12px; line-height: 1.4; margin-top: 10px; color: #393939; } #wrap.registration-completed .copyright { margin-top: 20px; font-size: 10px; color: #6a6a6a; font-weight: 300; } @media (max-width: 768px) { /*================================================================================= */ #wrap.registration-completed { padding: 90px 28px; } #wrap.registration-completed > div { width: min(100%, 600px); } #wrap.registration-completed > div .section { padding: 30px 20px; } #wrap.registration-completed > div .section > p:nth-of-type(2) { font-size: 20px; } #wrap.registration-completed > div .section > p:nth-of-type(3) { font-size: 10px; } #wrap.registration-completed .copyright { font-size: 8px; font-weight: 400; } } /* ====================== product main ====================== */ #wrap.product.main #container { padding: 60px 28px; background: #F2F4F7; } #wrap.product.main #container #main { gap: 50px 0; align-items: center; } #wrap.product.main #container #main > * { width: 1300px; } #wrap.product.main #container #main > .page-title {} #wrap.product.main #container #main > .page-title > p:nth-of-type(1) { font-size: 36px; } #wrap.product.main #container #main > ul { display: flex; gap: 0 20px; } #wrap.product.main #container #main > ul > li { flex: 1 0 0; display: flex; flex-flow: column wrap; gap: 20px 0; padding: 20px; align-items: center; border-radius: 10px; border: 1px solid #CED2DA; box-shadow: 0px 25px 60px -10px rgba(28, 39, 49, 0.12); background: #fff; cursor: pointer; } #wrap.product.main #container #main > ul > li:hover { border: 1px solid var(--HD_Green2); } #wrap.product.main #container #main > ul > li > p:nth-of-type(1) { width: 204px; height: 192px; } #wrap.product.main #container #main > ul > li > p:nth-of-type(2) { font-size: 28px; font-weight: 700; color: var(--HD_Discovery_Blue); min-height: 56px;} #wrap.product.main #container #main > ul > li > div { font-weight: 300; width: 100%; } #wrap.product.main #container #main > ul > li > div > p { font-size: 12px; line-height: 17px; color: var(--text-secondary); padding-left: 18px; position: relative; } #wrap.product.main #container #main > ul > li > div > p::before { content: ''; position: absolute; left: 8px; top: 6px; width: 3px; height: 3px; border-radius: 100px; background: var(--text-secondary); } #wrap.product.main #container #main > ul > li > div.half { display: flex; flex-wrap: wrap; } #wrap.product.main #container #main > ul > li > div.half > p { width: 50%; } #wrap.product.main #container #main > ul > li > ul { width: 100%; display: flex; gap: 0 4px; } #wrap.product.main #container #main > ul > li > ul > li { flex: 1 0 0; } #wrap.product.main #container #main > ul > li > ul > li > a { height: 60px; text-align: center; border: 1px solid #CED2DA; border-radius: 4px; color: var(--text-secondary); font-size: 16px; font-weight: 700; display: flex; flex-wrap: wrap; text-align: center; justify-content: center; align-content: center; gap: 6px 0; } #wrap.product.main #container #main > ul > li > ul > li > a > p { width: 100%; } #wrap.product.main #container #main > ul > li > ul > li > a > span { width: 100%; font-size: 9px; font-weight: 400; } #wrap.product.main #container #main > div:nth-of-type(2) { gap: 30px 0; padding: 30px 0; box-shadow: 0px 25px 60px -10px rgba(28, 39, 49, 0.12); border: 1px solid #CED2DA; border-radius: 10px; background: #fff; } #wrap.product.main #container #main > div > p { font-size: 20px; font-weight: 700; gap: 0 5px; } #wrap.product.main #container #main > div ul { gap: 0 10px; } #wrap.product.main #container #main > div ul > li { width: 150px; } #wrap.product.main #container #main > div ul > li > select { height: 36px; } #wrap.product.main #container #main > div ul > li .button.submit { width: 100%; } @media (max-width: 768px) { /*================================================================================= */ #wrap.product.main #container { padding: 0; } #wrap.product.main #container #main { gap: 30px 0; } #wrap.product.main #container #main > * { width: 100%; } #wrap.product.main #container #main > .page-title > p:nth-of-type(1) { font-size: 20px; } #wrap.product.main #container #main > ul { gap: 20px 0; flex-wrap: wrap; } #wrap.product.main #container #main > ul > li { width: 100%; flex: 0 0 auto; } #wrap.product.main #container #main > div:nth-of-type(2) { padding: 30px; } #wrap.product.main #container #main > div:nth-of-type(2) ul { gap: 10px 0; } #wrap.product.main #container #main > div:nth-of-type(2) ul > li { width: 100%; } } /* ====================== product list ====================== */ #wrap.product.list {} #wrap.product.list .banner { width: 100%; padding: 0 30px; background: #F2F4F7; border-bottom: 1px solid #E4E7EC; } #wrap.product.list .banner > div { width: 100%; height: 130px; display: none; justify-content: center; align-items: center; gap: 0 40px; } #wrap.product.list .banner > div.active { display: flex; } #wrap.product.list .banner > div > p:nth-of-type(1) { width: 138px; height: 100%; } #wrap.product.list .banner > div > p:nth-of-type(1) img { width: 100%; } #wrap.product.list .banner > div > p:nth-of-type(2) { font-size: 48px; color: var(--HD_Discovery_Blue); font-weight: 700; } #wrap.product.list .banner > div > ul {} #wrap.product.list .banner > div > ul > li { font-size: 12px; color: var(--text-secondary); line-height: 17px; padding-left: 20px; position: relative; } #wrap.product.list .banner > div > ul > li::before { content: ''; position: absolute; left: 8px; top: 7px; width: 3px; height: 3px; border-radius: 3px; background: var(--text-secondary); } #wrap.product.list .banner > div.type4 { height: 130px; align-items: center; font-size: 48px; color: var(--HD_Discovery_Blue); font-weight: 700; } #wrap.product.list #container { display: flex; gap: 0 32px; } #wrap.product.list #container #aside { width: 304px; flex: 0 0 auto; } #wrap.product.list #container #aside .sch {} #wrap.product.list #container #aside .sch ul { display: flex; flex-wrap: wrap; gap: 12px 0; } #wrap.product.list #container #aside .sch ul > li { width: 100%; } #wrap.product.list #container #aside .sch ul > li select { height: 36px; } #wrap.product.list #container #aside .sch ul > li:nth-of-type(3) { display: flex; gap: 0 10px; } #wrap.product.list #container #aside .sch ul > li:nth-of-type(3) > p:nth-of-type(1) { flex: 1 0 0; } #wrap.product.list #container #aside .sch ul > li:nth-of-type(3) > p:nth-of-type(2) { width: 94px; } #wrap.product.list #container #aside .sch ul > li:nth-of-type(3) > p input { min-width: auto; width: 100%; height: 36px; } #wrap.product.list #container #aside .filter-wrap { width: 100%; margin-top: 20px; } #wrap.part.list #container #aside .filter-wrap { margin-top: 0; } #wrap.product.list #container #aside .filter-wrap > div { line-height: 30px; font-size: 20px; color: #000; font-weight: 700; } #wrap.product.list #container #aside .filter-wrap > div > svg { display: none; } #wrap.product.list #container #aside .filter-wrap > dl { border: 1px solid #E4E7EC; border-radius: 10px; overflow: hidden; } #wrap.product.list #container #aside .filter-wrap > dl~dl { margin-top: 10px; } #wrap.product.list #container #aside .filter-wrap > dl:nth-of-type(1) { margin-top: 20px; } #wrap.product.list #container #aside .filter-wrap > dl > dt { padding: 0 10px; display: flex; align-items: center; gap: 0 10px; height: 50px; background: #F2F4F7; } #wrap.product.list #container #aside .filter-wrap > dl > dt > p { flex: 1 0 0; font-size: 12px; color: #000; font-weight: 700; } #wrap.product.list #container #aside .filter-wrap > dl > dt > a { width: 41px; height: 20px; border-radius: 4px; background: #637083; color: #fff; font-size: 10px; text-align: center; line-height: 19px; font-weight: 300; display: none; } #wrap.product.list #container #aside .filter-wrap > dl > dt > span { width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 12L12 12M12 12L18 12M12 12V6M12 12L12 18' stroke='%23141C24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); cursor: pointer; } #wrap.product.list #container #aside .filter-wrap > dl > dd { max-height: 180px; padding: 20px; gap: 15px 12px; display: none; flex-wrap: wrap; align-content: flex-start; overflow: overlay; border-top: 1px solid #E4E7EC; } #wrap.part.list #container #aside .filter-wrap > dl > dd { max-height: none; } #wrap.product.list #container #aside .filter-wrap > dl > dd::-webkit-scrollbar { width: 3px; } #wrap.product.list #container #aside .filter-wrap > dl > dd::-webkit-scrollbar-track { background-color: #fff; } #wrap.product.list #container #aside .filter-wrap > dl > dd::-webkit-scrollbar-thumb { border: 0px solid transparent; background-color: #aab7ce; background-clip: content-box; } #wrap.product.list #container #aside .filter-wrap > dl > dd > p { display: flex; align-items: center; width: 30%; flex: 0 0 auto; } #wrap.product.list #container #aside .filter-wrap > dl > dd.full > p { width: 100%; } #wrap.product.list #container #aside .filter-wrap > dl > dt.active > a { display: block; } #wrap.product.list #container #aside .filter-wrap > dl > dt.active > span { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 12L17 12' stroke='%23141C24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #wrap.product.list #container #aside .filter-wrap > dl > dt.active+dd { display: flex; } #wrap.product.list #container #main { flex: 1 1 0; min-width: 0; flex-flow: column nowrap; gap: 20px 0; } /* column wrap 이면 고정 열 표 폭으로 커짐 */ #wrap.product.list #container #main .page-title { height: 30px; } #wrap.product.list #container #main .page-title > p { display: flex; gap: 0 16px; align-items: center; } #wrap.product.list #container #main .page-title > p > span:nth-of-type(2) { font-size: 12px; color: var(--text-secondary); } #wrap.product.list #container #main .page-title > p > span:nth-of-type(2) > span { color: var(--HD_Green3); } #wrap.product.list #container #main .page-title > p:nth-of-type(2) { display: none; } @media (min-width: 769px) { /*================================================================================= */ #wrap.product.list #container #main .section1 { width: 100%; overflow-x: auto; } #wrap.product.list #container #main .section1 .list {} #wrap.product.list #container #main .section1 .list > ul > li { justify-content: space-between; } #wrap.product.list #container #main .section1 .list > ul > li > div { flex: 0 0 auto; } #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(1) { width: 100px; justify-content: flex-start; } #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(2) { width: 260px; justify-content: flex-start; cursor: pointer; } #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(3) { width: 50px; } #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(4) { width: 38px; } #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(5) { width: 58px; } #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(6) { width: 50px; } #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(7) { width: 62px; } #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(8) { width: 170px; justify-content: flex-start; } #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(9) { width: 70px; display: none; } #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(10) { width: 80px; justify-content: flex-end; display: none; } #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(11) { width: 60px; display: none; } #wrap.product.list #container #main .section1 .list > ul > li > div:last-of-type { width: 60px; } #wrap.product.list.member #container #main .section1 .list > ul > li > div:nth-of-type(9) { display: flex; } #wrap.product.list.member #container #main .section1 .list > ul > li > div:nth-of-type(10) { display: flex; } #wrap.product.list.member #container #main .section1 .list > ul > li > div:nth-of-type(11) { display: flex; } #wrap.product.list #container #main .section1 .list > ul.head > li > div { text-align: center; } #wrap.product.list #container #main .section1 .list > ul.body > li > div:nth-of-type(2) { font-size: 14px; font-weight: 700; color: var(--HD-Trust-Blue); gap: 0 10px; display: flex; align-items: center; } #wrap.product.list #container #main .section1 .list > ul.body > li > div:nth-of-type(2) > span { width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='20' viewBox='0 0 21 20' fill='none'%3E%3Cpath d='M10.4452 2.08559C10.539 1.9078 10.7937 1.9078 10.8875 2.08559L13.156 6.38538C13.1922 6.45394 13.2582 6.50184 13.3345 6.51506L18.1249 7.34391C18.323 7.37818 18.4017 7.62034 18.2616 7.76449L14.8733 11.2508C14.8192 11.3063 14.7941 11.3839 14.8051 11.4606L15.4971 16.2726C15.5257 16.4716 15.3197 16.6213 15.1393 16.5326L10.7767 14.3874C10.7071 14.3532 10.6256 14.3532 10.556 14.3874L6.19335 16.5326C6.01296 16.6213 5.80697 16.4716 5.83558 16.2726L6.5276 11.4606C6.53863 11.3839 6.51345 11.3063 6.45942 11.2508L3.07112 7.76449C2.93102 7.62034 3.0097 7.37818 3.20777 7.34391L7.99815 6.51506C8.07453 6.50184 8.14046 6.45394 8.17663 6.38538L10.4452 2.08559Z' fill='%23CED2DA' stroke='%23CED2DA' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #wrap.product.list #container #main .section1 .list > ul.body > li > div:nth-of-type(2) > span.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='20' viewBox='0 0 21 20' fill='none'%3E%3Cpath d='M10.4452 2.08559C10.539 1.9078 10.7937 1.9078 10.8875 2.08559L13.156 6.38538C13.1922 6.45394 13.2582 6.50184 13.3345 6.51506L18.1249 7.34391C18.323 7.37818 18.4017 7.62034 18.2616 7.76449L14.8733 11.2508C14.8192 11.3063 14.7941 11.3839 14.8051 11.4606L15.4971 16.2726C15.5257 16.4716 15.3197 16.6213 15.1393 16.5326L10.7767 14.3874C10.7071 14.3532 10.6256 14.3532 10.556 14.3874L6.19335 16.5326C6.01296 16.6213 5.80697 16.4716 5.83558 16.2726L6.5276 11.4606C6.53863 11.3839 6.51345 11.3063 6.45942 11.2508L3.07112 7.76449C2.93102 7.62034 3.0097 7.37818 3.20777 7.34391L7.99815 6.51506C8.07453 6.50184 8.14046 6.45394 8.17663 6.38538L10.4452 2.08559Z' fill='%23F5A300' stroke='%23F5A300' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #wrap.product.list #container #main .section1 .list > ul.body > li > div.inventory { display: flex; align-items: center; gap: 0 4px; flex-wrap: wrap; } #wrap.product.list #container #main .section1 .list > ul.body > li > div.inventory a { width: 15px; height: 14px; } #wrap.product.list #container #main .section1 .list > ul.body > li > div.inventory .backorder-btn { display: inline-block; width: auto; height: auto; padding: 3px 8px; margin-top: 5px; font-size: 11px; font-weight: 600; color: #fff; background-color: #ff0000; border-radius: 4px; text-decoration: none; transition: background-color 0.2s; flex: 0 0 100%; } #wrap.product.list #container #main .section1 .list > ul.body > li > div.inventory .backorder-btn:hover { background-color: #EA580C; } #wrap.product.list #container #main .section1 .list > ul.body > li > div.inventory .backorder-tooltip-wrap { position: relative; display: inline-block; flex: 0 0 100%; } #wrap.product.list #container #main .section1 .list > ul.body > li > div.inventory .backorder-tooltip-wrap .backorder-btn { flex: none; } #wrap.product.list #container #main .section1 .list > ul.body > li > div.inventory .backorder-tooltip { visibility: hidden; opacity: 0; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background-color: #344051; color: #fff; font-size: 12px; font-weight: 400; line-height: 1.4; padding: 8px 12px; border-radius: 6px; white-space: nowrap; pointer-events: none; transition: opacity 0.2s, visibility 0.2s; z-index: 100; } #wrap.product.list #container #main .section1 .list > ul.body > li > div.inventory .backorder-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #344051; } #wrap.product.list #container #main .section1 .list > ul.body > li > div.inventory .backorder-tooltip-wrap:hover .backorder-tooltip { visibility: visible; opacity: 1; } #wrap.product.list #container #main .section1 .list > ul.body > li > div.inventory .backorder-tooltip svg { display: inline-block; vertical-align: middle; margin-left: 4px; } #wrap.product.list #container #main .section1 .list > ul.body > li > div.price { font-weight: 700; } #wrap.product.list #container #main .section1 .list > ul.body > li > div .button-view, #wrap.product.list #container #main .section1 .list > ul.body > li > div .button-modify { width: 100%; } #wrap.part.list #container #main .section1 .list > ul > li { gap: 20px; } #wrap.part.list #container #main .section1 .list > ul > li > div:nth-of-type(1) { width: 180px; justify-content: flex-start; } #wrap.part.list #container #main .section1 .list > ul > li > div:nth-of-type(2) { width: 200px; } #wrap.part.list #container #main .section1 .list > ul > li > div:nth-of-type(3) { width: 150px; justify-content: left; flex: 1 1 auto; } #wrap.part.list #container #main .section1 .list > ul > li > div:nth-of-type(4) { width: 150px; justify-content: left; flex: 1 1 auto; } #wrap.part.list #container #main .section1 .list > ul > li > div:nth-of-type(5) { width: 150px; } #wrap.part.list #container #main .section1 .list > ul > li > div:nth-of-type(6) { width: 150px; justify-content: center; } #wrap.part.list #container #main .section1 .list > ul > li > div:nth-of-type(7) { width: 60px; } #wrap.part.list #container #main .section1 .list > ul > li > div:nth-of-type(8) { width: 60px; justify-content: center; } } @media (max-width: 768px) { /*================================================================================= */ #wrap.product.list { background: #fff; } #wrap.product.list .banner { padding: 30px 20px; margin-top: 60px; } #wrap.product.list .banner > div { height: auto; gap: 16px 0; flex-flow: column wrap; } #wrap.product.list .banner > div > p:nth-of-type(1) { width: 180px; height: 170px; } #wrap.product.list .banner > div > p:nth-of-type(2) { font-size: 28px; } #wrap.product.list .banner > div > ul { width: 100%; } #wrap.product.list .banner > div.type4 { height: auto; font-size: 28px;} #wrap.product.main #container #main > ul > li > p:nth-of-type(2) { min-height: auto; } #wrap.product.list #container { margin-top: 0; display: flex; flex-flow: column wrap; } #wrap.product.list #container #aside { width: 100%; } #wrap.product.list #container #aside .sch { width: 100%; position: absolute; top: 445px; left: 0px; } #wrap.product.list #container #aside .filter-wrap { margin-top: 0; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: #fff; z-index: -1; padding: 28px; overflow-y: auto; } #wrap.product.list #container #aside .filter-wrap > div { display: flex; justify-content: space-between; align-items: center; } #wrap.product.list #container #aside .filter-wrap > div > svg { display: block; } #wrap.product.list #container #aside .filter-wrap > dl > dd { max-height: none; } #wrap.product.list #container #main { flex: 0 0 auto; } #wrap.product.list #container #main .page-title { height: auto; gap: 30px 0; padding-top: 164px; } #wrap.part.list #container #main .page-title { padding-top: 0; } #wrap.product.list #container #main .page-title > p:nth-of-type(2) { display: flex; justify-content: center; align-items: center; gap: 0 8px; order: 1; width: 100%; height: 50px; background: var(--text-tertiary); border-radius: 6px; color: #fff; font-size: 16px; } #wrap.product.list #container #main .page-title > p:nth-of-type(2) > span { padding-top: 2px; } #wrap.product.list #container #main .page-title .line-notice { margin-bottom: 162px; } #wrap.product.list #container #main .section1 .list { width: 100%; border: 0; } #wrap.product.list #container #main .section1 .list > ul.head { display: none; } #wrap.product.list #container #main .section1 .list > ul.body {} #wrap.product.list #container #main .section1 .list > ul.body > li { border: 1px solid #E4E7EC; border-radius: 10px; flex-wrap: wrap; } #wrap.product.list #container #main .section1 .list > ul.body > li~li { margin-top: 20px; } #wrap.product.list #container #main .section1 .list > ul > li { justify-content: flex-start; gap: 16px 9px; padding: 20px; } #wrap.product.list #container #main .section1 .list > ul > li > div { flex: 0 0 auto; justify-content: flex-start; position: relative; order: 2; } #wrap.product.list #container #main .section1 .list > ul > li > div::before { font-size: 12px; color: var(--text-secondary); font-weight: 400; height: 13px; position: absolute; left: 0; top: 0; font-weight: 300; } #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(1) { width: 100%; order: 0; } #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(2) { width: 100%; font-size: 24px; font-weight: 700; color: var(--HD-Trust-Blue); order: 0; } #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(2) > span { display: none; } #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(3), #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(4), #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(5), #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(6), #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(7), #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(9) { padding-top: 19px; font-size: 16px; min-width: 80px; } #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(8) { width: 100%; font-size: 14px; order: 1; } #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(3)::before { content: 'HP'; } #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(4)::before { content: 'Pole'; } #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(5)::before { content: 'Frame No.'; } #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(6)::before { content: 'RPM(Speed)'; } #wrap.product.list #container #main .section1 .list > ul > li > div:nth-of-type(7)::before { content: 'Volts(V)'; } #wrap.product.list #container #main .section1 .list > ul > li > div.inventory::before { content: 'Inventory'; } #wrap.product.list #container #main .section1 .list > ul > li > div.inventory { order: 2; display: flex; align-items: center; gap: 0 4px; flex-wrap: wrap; } #wrap.product.list #container #main .section1 .list > ul > li > div.inventory a { width: 15px; height: 14px; } #wrap.product.list #container #main .section1 .list > ul > li > div.inventory .backorder-btn { display: inline-block; width: auto; height: auto; padding: 3px 8px; margin-top: 5px; font-size: 11px; font-weight: 600; color: #fff; background-color: #DC2626; border-radius: 4px; text-decoration: none; flex: 0 0 100%; } #wrap.product.list #container #main .section1 .list > ul > li > div.price { width: 100%; font-size: 20px; font-weight: 700; padding-top: 18px; display: flex; order: 2; } #wrap.product.list #container #main .section1 .list > ul > li > div.price::before { content: 'Net Price'; } #wrap.product.list #container #main .section1 .list > ul > li > div.cart { flex: 1 0 0; display: flex; order: 2; } #wrap.product.list #container #main .section1 .list > ul > li > div.cart > a { width: 100%; height: 40px; font-size: 16px; font-weight: 400; } #wrap.product.list #container #main .section1 .list > ul > li > div:last-of-type { flex: 1 0 0; width: auto; padding-top: 0; } #wrap.product.list #container #main .section1 .list > ul > li > div:last-of-type > a { width: 100%; height: 40px; font-size: 16px; font-weight: 400; } #wrap.part.list #container #main .section1 .list > ul > li { align-items: stretch; } #wrap.part.list #container #main .section1 .list > ul > li > div:nth-of-type(1) {} #wrap.part.list #container #main .section1 .list > ul > li > div:nth-of-type(2) {} #wrap.part.list #container #main .section1 .list > ul > li > div:nth-of-type(3) { width: 100%; } #wrap.part.list #container #main .section1 .list > ul > li > div:nth-of-type(3)::before { content: 'Frame No.' } #wrap.part.list #container #main .section1 .list > ul > li > div:nth-of-type(4) { width: 100%; align-items: flex-start; } #wrap.part.list #container #main .section1 .list > ul > li > div:nth-of-type(4)::before { content: 'RPM(Speed)'; } #wrap.part.list #container #main .section1 .list > ul > li > div:nth-of-type(5) { width: 100%; align-items: flex-start; } #wrap.part.list #container #main .section1 .list > ul > li > div:nth-of-type(6) {} #wrap.part.list #container #main .section1 .list > ul > li > div:nth-of-type(7) { padding-top: 0; min-width: none; } #wrap.part.list #container #main .section1 .list > ul > li > div:nth-of-type(7)::before { display: none; } #wrap.part.list #container #main .section1 .list > ul > li > div:nth-of-type(8) { order: 2; } } /* ====================== product popup ====================== */ .product-popup { position: fixed; left: 0; top: 0; z-index: 11; width: 100%; height: 100vh; overflow-y: auto; display: none; } .product-popup .close { width: 90px; height: 90px; position: fixed; top: 0; transform: translate(-100%, 0); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60' fill='none'%3E%3Cpath d='M17.5 17.5L42.5 42.5M42.5 17.5L17.5 42.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat var(--text-tertiary); cursor: pointer; } .product-popup .inner { position: absolute; right: 0; top: 0; width: 1035px; min-height: 100vh; box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.25); background: #fff; } .product-popup .inner .header { padding: 30px; display: flex; gap: 0 20px; } .product-popup .inner .header > p { width: 220px; flex: 0 0 auto; } .product-popup .inner .header > p img { width: 100%; } .product-popup .inner .header > div:nth-of-type(1) { flex: 1 0 0; display: flex; flex-wrap: wrap; gap: 12px 0; align-content: flex-start; } .product-popup .inner .header > div:nth-of-type(1) > * { width: 100%; } .product-popup .inner .header > div:nth-of-type(1) > p:nth-of-type(1) { display: flex; align-items: center; gap: 0 6px; font-size: 12px; font-weight: 700; } .product-popup .inner .header > div:nth-of-type(1) > p:nth-of-type(2) { width: auto; font-size: 28px; font-weight: 700; color: var(--HD_Discovery_Blue); position: relative; padding-right: 40px; } .product-popup .inner .header > div:nth-of-type(1) > p:nth-of-type(2) > span { cursor: pointer; position: absolute; right: 0; top: 50%; margin-top: -16px; width: 30px; height: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='31' viewBox='0 0 30 31' fill='none'%3E%3Cpath d='M14.7789 3.41908C14.8727 3.2413 15.1273 3.2413 15.2211 3.41908L18.7632 10.1327C18.7994 10.2012 18.8653 10.2491 18.9417 10.2623L26.4213 11.5565C26.6194 11.5908 26.6981 11.8329 26.558 11.9771L21.2675 17.4205C21.2135 17.476 21.1883 17.5536 21.1994 17.6303L22.2799 25.1437C22.3085 25.3427 22.1025 25.4923 21.9221 25.4036L15.1103 22.0542C15.0407 22.02 14.9593 22.02 14.8897 22.0542L8.0779 25.4036C7.89751 25.4923 7.69152 25.3427 7.72013 25.1437L8.80063 17.6303C8.81167 17.5536 8.78649 17.476 8.73246 17.4205L3.44204 11.9771C3.30194 11.8329 3.38062 11.5908 3.57869 11.5565L11.0583 10.2623C11.1347 10.2491 11.2006 10.2012 11.2368 10.1327L14.7789 3.41908Z' fill='%23CED2DA' stroke='%23CED2DA' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; } .product-popup .inner .header > div:nth-of-type(1) > p:nth-of-type(2) > span.favorite { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Cpath d='M14.7789 2.91908C14.8727 2.7413 15.1273 2.7413 15.2211 2.91908L18.7632 9.63267C18.7994 9.70123 18.8653 9.74913 18.9417 9.76235L26.4213 11.0565C26.6194 11.0908 26.6981 11.3329 26.558 11.4771L21.2675 16.9205C21.2135 16.976 21.1883 17.0536 21.1994 17.1303L22.2799 24.6437C22.3085 24.8427 22.1025 24.9923 21.9221 24.9036L15.1103 21.5542C15.0407 21.52 14.9593 21.52 14.8897 21.5542L8.0779 24.9036C7.89751 24.9923 7.69152 24.8427 7.72013 24.6437L8.80063 17.1303C8.81167 17.0536 8.78649 16.976 8.73246 16.9205L3.44204 11.4771C3.30194 11.3329 3.38062 11.0908 3.57869 11.0565L11.0583 9.76235C11.1347 9.74913 11.2006 9.70123 11.2368 9.63267L14.7789 2.91908Z' fill='%23F5A300' stroke='%23F5A300' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; } .product-popup .inner .header > div:nth-of-type(1) > p:nth-of-type(3) { font-size: 12px; line-height: 16px; } .product-popup .inner .header > div:nth-of-type(1) > p:nth-of-type(4) { font-size: 12px; line-height: 17px; } .product-popup .inner .header > div:nth-of-type(1) .table-wrap {} .product-popup .inner .header > div:nth-of-type(1) .table-wrap > p { font-size: 12px; color: #141C24; font-weight: 700; } .product-popup .inner .header > div:nth-of-type(1) .table { border-radius: 10px 10px 6px 6px; border: 1px solid #E4E7EC; overflow: hidden; margin-top: 12px; } .product-popup .inner .header > div:nth-of-type(1) .table > ul { font-size: 10px; } .product-popup .inner .header > div:nth-of-type(1) .table > ul > li { display: flex; justify-content: space-between; } .product-popup .inner .header > div:nth-of-type(1) .table > ul > li > div:nth-of-type(1) { width: 123px; } .product-popup .inner .header > div:nth-of-type(1) .table > ul > li > div:nth-of-type(2) { width: 110px; } .product-popup .inner .header > div:nth-of-type(1) .table > ul > li > div:nth-of-type(3) { width: 70px; text-align: center; } .product-popup .inner .header > div:nth-of-type(1) .table > ul > li > div:nth-of-type(4) { width: 72px; text-align: center; word-break: keep-all; } .product-popup .inner .header > div:nth-of-type(1) .table > ul.thead { background: #F4F6FA; } .product-popup .inner .header > div:nth-of-type(1) .table > ul.thead > li { height: 26px; align-items: center; padding: 0 10px; } .product-popup .inner .header > div:nth-of-type(1) .table > ul.tbody {} .product-popup .inner .header > div:nth-of-type(1) .table > ul.tbody > li { border-top: 1px solid #E4E7EC; padding: 8px 10px; } .product-popup .inner .header > div:nth-of-type(2) { width: 310px; flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 10px 0; justify-content: center; text-align: right; flex-direction: column; align-items: flex-end;} .product-popup .inner .header > div:nth-of-type(2) > p:nth-of-type(1) { font-size: 36px; font-weight: 700; color: var(--HD_Discovery_Blue); } .product-popup .inner .header > div:nth-of-type(2) > a { margin-top: 6px; padding: 9px 16px 8px; border: 1px solid #CED2DA; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; } .product-popup .inner .header > div:nth-of-type(2) > a > span { font-weight: 700; color: var(--HD_Green3); padding-right: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M9.16669 4.1665H5.83335C4.91288 4.1665 4.16669 4.9127 4.16669 5.83317V14.1665C4.16669 15.087 4.91288 15.8332 5.83335 15.8332H14.1667C15.0872 15.8332 15.8334 15.087 15.8334 14.1665V10.2082M15.8334 4.1665H12.5M15.8334 4.1665V7.49984M15.8334 4.1665L7.50002 12.4998' stroke='%2300823D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center no-repeat; } .product-popup .inner .header > div:nth-of-type(2) > div { font-size: 12px; line-height: 21px; color: #000; font-weight: 700; } .product-popup .inner .header > div:nth-of-type(2) > p:nth-of-type(2) { width: 217px; height: 50px; cursor: pointer; background: var(--HD_Green2); border-radius: 6px; display: flex; align-items: center; justify-content: center; } .product-popup .inner .header > div:nth-of-type(2) > p:nth-of-type(2) > span { padding-left: 28px; color: #fff; font-size: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='20' viewBox='0 0 21 20' fill='none'%3E%3Cpath d='M3 2.5H4.16962C4.94778 2.5 5.62238 3.03848 5.79484 3.7973L6.25758 5.83333M7.58333 11.6667H14.1549C15.2114 11.6667 16.1539 11.0025 16.5092 10.0075L17.6023 6.94695C17.7961 6.40424 17.3938 5.83333 16.8175 5.83333H6.25758M7.58333 11.6667L6.25758 5.83333M7.58333 11.6667L8.0713 13.3745C8.27572 14.09 8.9297 14.5833 9.67384 14.5833H15.5M9.66667 16.6667H9.675M14.6667 16.6667H14.675' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left center no-repeat; } .product-popup .inner .nav { width: 100%; background: #F2F4F7; } .product-popup .inner .nav > ul { display: flex; justify-content: center; gap: 0 32px; border-top: 1px solid #E4E7EC; border-bottom: 1px solid #E4E7EC; } .product-popup .inner .nav > ul > li { height: 60px; line-height: 60px; font-size: 14px; color: var(--text-tertiary); font-weight: 700; position: relative; } .product-popup .inner .nav > ul > li > a { color: var(--text-tertiary); padding-right: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15.8334 12.4998V14.1665C15.8334 15.087 15.0872 15.8332 14.1667 15.8332H5.83341C4.91294 15.8332 4.16675 15.087 4.16675 14.1665V12.4998M10.0001 4.1665V12.4998M10.0001 12.4998L8.33341 10.8332M10.0001 12.4998L11.6667 10.8332' stroke='%23637083' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center no-repeat; } .product-popup .inner .nav > ul > li.on > a, .product-popup .inner .nav > ul > li:hover > a { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15.8334 12.4998V14.1665C15.8334 15.087 15.0872 15.8332 14.1667 15.8332H5.83341C4.91294 15.8332 4.16675 15.087 4.16675 14.1665V12.4998M10.0001 4.1665V12.4998M10.0001 12.4998L8.33341 10.8332M10.0001 12.4998L11.6667 10.8332' stroke='%23002F87' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center no-repeat; } .product-popup .inner .nav > ul > li:hover, .product-popup .inner .nav > ul > li.on, .product-popup .inner .nav > ul > li:hover > a, .product-popup .inner .nav > ul > li.on > a { color: var(--HD_Discovery_Blue);cursor: pointer; } .product-popup .inner .nav > ul > li:hover::after, .product-popup .inner .nav > ul > li.on::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--HD_Discovery_Blue); } .product-popup .inner .container { padding: 30px; } .product-popup .inner .container .pdf { width: 100%; height: 2000px; background: #ccc; } .product-popup.sticky .inner .nav { position: fixed; top: 0; z-index: 12; width: 975px; } .product-popup.sticky .inner .container { margin-top: 62px; } .product-popup .add-favorite { position: absolute; top: 0; right: 0; width: 413px; height: 68px; box-shadow: 0px 25px 60px -10px rgba(28, 39, 49, 0.12); display: none; align-items: center; justify-content: center; border-radius: 10px; background: var(--HD_Green2); gap: 0 20px; } .product-popup .add-favorite > p:nth-of-type(1) { width: 40px; height: 40px; border-radius: 40px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='24' viewBox='0 0 25 24' fill='none'%3E%3Cpath d='M12.2787 2.69692C12.3725 2.51913 12.6271 2.51913 12.7209 2.69692L15.414 7.8013C15.4502 7.86986 15.5161 7.91777 15.5925 7.93098L21.2793 8.91494C21.4774 8.94921 21.556 9.19137 21.4159 9.33552L17.3936 13.4742C17.3396 13.5297 17.3144 13.6073 17.3254 13.684L18.1469 19.3965C18.1756 19.5955 17.9696 19.7451 17.7892 19.6564L12.6101 17.1098C12.5406 17.0756 12.4591 17.0756 12.3895 17.1098L7.21045 19.6564C7.03006 19.7451 6.82407 19.5955 6.85268 19.3965L7.67419 13.684C7.68523 13.6073 7.66004 13.5297 7.60602 13.4742L3.58367 9.33552C3.44357 9.19137 3.52226 8.94921 3.72033 8.91494L9.4071 7.93098C9.48349 7.91777 9.54942 7.86986 9.58559 7.8013L12.2787 2.69692Z' stroke='%2300AE42' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat #fff; } .product-popup .add-favorite > p:nth-of-type(2) { font-size: 16px; color: #fff; } .product-popup .add-favorite > a { width: 85px; height: 36px; border: 1px solid #fff; border-radius: 6px; text-align: center; line-height: 34px; font-size: 14px; color: #fff; } @media (max-width: 768px) { /*================================================================================= */ .product-popup .close { width: 60px; height: 60px; position: fixed; top: 0; right: 0; transform: translate(0, 0); } .product-popup .inner { width: 100%; } .product-popup .inner .header { padding: 20px 28px; display: flex; gap: 20px 0; flex-wrap: wrap; } .product-popup .inner .header > * { width: 100%; } .product-popup .inner .header > p { width: 100%; flex: 0 0 auto; } .product-popup .inner .header > div:nth-of-type(1) { width: 100%; } .product-popup .inner .header > div:nth-of-type(2) { width: 100%; flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 10px 0; justify-content: flex-start; text-align: left; padding-top: 30px; border-top: 1px solid #E4E7EC; } .product-popup .inner .header > div:nth-of-type(2) > p:nth-of-type(1) {} .product-popup .inner .header > div:nth-of-type(2) > a { width: 100%; margin-top: 6px; padding: 9px 16px 8px; border: 1px solid #CED2DA; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; } .product-popup .inner .header > div:nth-of-type(2) > p:nth-of-type(2) { width: 100%; margin-top: 10px; } .product-popup .inner .nav { overflow-x: auto; } .product-popup .inner .nav > ul { padding: 0 30px; justify-content: flex-start; } .product-popup .inner .nav > ul > li { flex: 0 0 auto; } .product-popup .inner .container { padding: 28px; } .product-popup.sticky .inner .nav { width: 100%; } } /* ====================== catalog-brochure ====================== */ #wrap.catalog-brochure {} #wrap.catalog-brochure #container {} #wrap.catalog-brochure #container #main {} #wrap.catalog-brochure #container #main .nav { width: 100%; } #wrap.catalog-brochure #container #main .nav > ul { display: flex; justify-content: flex-start; gap: 0 47px; border-bottom: 1px solid #E4E7EC; } #wrap.catalog-brochure #container #main .nav > ul > li { height: 60px; line-height: 60px; font-size: 14px; color: var(--text-tertiary); font-weight: 700; position: relative; } #wrap.catalog-brochure #container #main .nav > ul > li > a { color: var(--text-tertiary); } #wrap.catalog-brochure #container #main .nav > ul > li:hover, #wrap.catalog-brochure #container #main .nav > ul > li.on, #wrap.catalog-brochure #container #main .nav > ul > li:hover > a, #wrap.catalog-brochure #container #main .nav > ul > li.on > a { color: var(--HD_Discovery_Blue);cursor: pointer; } #wrap.catalog-brochure #container #main .nav > ul > li:hover::after, #wrap.catalog-brochure #container #main .nav > ul > li.on::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--HD_Discovery_Blue); } #wrap.catalog-brochure #container #main .nav > ul > li > div { display: none; position: absolute; z-index: 99; background: #fff; top: 61px; left: 0; } #wrap.catalog-brochure #container #main .nav > ul > li.active > div { display: block; } #wrap.catalog-brochure #container #main .nav > ul > li > div > p { min-width: 230px; border: 1px solid #97A1AF; border-top: 0; } #wrap.catalog-brochure #container #main .nav > ul > li > div > p:nth-of-type(1) { border-top: 1px solid #97A1AF; } #wrap.catalog-brochure #container #main .nav > ul > li > div > p > a { display: block; padding: 8px 12px; line-height: normal; font-size: 12px;} #wrap.catalog-brochure #container #main .tab-content { width: 100%; display: flex; justify-content: center; flex-wrap: wrap; background: #F9FAFB; position: relative; } #wrap.catalog-brochure #container #main .tab-content::after { content: ''; width: calc(100% + 56px); height: calc(100% + 70px); background: #F9FAFB; position: absolute; left: -28px; top: -30px; } #wrap.catalog-brochure #container #main .tab-content .nav-wrap { margin-top: 20px; width: 100%; display: flex; justify-content: center; gap: 0 60px; } #wrap.catalog-brochure #container #main .tab-content .nav-wrap .pdf-down { z-index: 2; text-align: left; padding-left: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15.8337 12.5003V14.167C15.8337 15.0875 15.0875 15.8337 14.167 15.8337H5.83366C4.91318 15.8337 4.16699 15.0875 4.16699 14.167V12.5003M10.0003 4.16699V12.5003M10.0003 12.5003L8.33366 10.8337M10.0003 12.5003L11.667 10.8337' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") calc(100% - 10px) center no-repeat var(--HD_Green2); } #wrap.catalog-brochure #container #main .tab-content .nav-wrap input { box-sizing: border-box; width: 130px; height: 36px; border-radius: 6px; font-size: 12px; color: #fff; cursor: pointer; } #wrap.catalog-brochure #container #main .tab-content .navigation { display: flex; gap: 0 20px; z-index: 2; position: relative; } #wrap.catalog-brochure #container #main .tab-content .navigation::after { content: ''; position: absolute; right: -30px; top: 50%; margin-top: -9px; width: 1px; height: 18px; background: #d0d0d0; } #wrap.catalog-brochure #container #main .tab-content .navigation #prev-page { text-align: right; padding-right: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M12.9163 15.833L7.79011 10.7068C7.39959 10.3163 7.39959 9.68309 7.79011 9.29257L12.9163 4.16634' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 10px center no-repeat var(--text-tertiary);} #wrap.catalog-brochure #container #main .tab-content .navigation #next-page { text-align: left; padding-left: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.91667 4.16699L13.0429 9.29322C13.4334 9.68374 13.4334 10.3169 13.0429 10.7074L7.91667 15.8337' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") calc(100% - 10px) center no-repeat var(--text-tertiary); } #wrap.catalog-brochure #container #main .tab-content .section { position: relative; z-index: 2; width: 720px; min-height: 400px; background: #fff; box-shadow: 0px 25px 60px -10px rgba(28, 39, 49, 0.12); display: none; margin-top: 30px; } #wrap.catalog-brochure #container #main .tab-content .section.on { display: block; } @media (max-width: 768px) { /*================================================================================= */ #wrap.catalog-brochure #container #main .nav > ul { padding: 0 30px; } #wrap.catalog-brochure #container #main .tab-content .navigation { margin-top: 0; } #wrap.catalog-brochure #container #main .tab-content .section { width: calc(100% - 40px); margin-top: 10px; } } /* ====================== notice list ====================== */ #wrap.notice.list #container #main .section1 .list > ul > li { gap: 0 30px; } #wrap.notice.list #container #main .section1 .list > ul > li > div { flex: 0 0 auto; justify-content: flex-start; } #wrap.notice.list #container #main .section1 .list > ul > li > div:nth-of-type(1) { width: 60px; justify-content: center; text-align: center; } #wrap.notice.list #container #main .section1 .list > ul > li > div:nth-of-type(2) { flex: 1 0 0; } #wrap.notice.list #container #main .section1 .list > ul > li > div:nth-of-type(3) { width: 80px; } #wrap.notice.list #container #main .section1 .list > ul.body > li { min-height: 60px; } #wrap.notice.list #container #main .section1 .list > ul.body > li > div:nth-of-type(2) { font-weight: 700; font-size: 14px; } #wrap.notice.list #container #main .section1 .list > ul.body > li.notice { background: #F0FFF1; } #wrap.notice.list #container #main .section1 .list > ul.body > li.notice > div:nth-of-type(1) { height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='18' viewBox='0 0 60 18' fill='none'%3E%3Cpath d='M27.805 10.75L28.787 15.397C28.901 15.937 28.556 16.468 28.015 16.582L27.037 16.789C26.497 16.903 25.966 16.558 25.852 16.017L24.75 10.75' stroke='%2300823D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M35.185 5.91155C35.068 6.00655 35 6.14855 35 6.29955V8.69855C35 8.84955 35.068 8.99155 35.185 9.08655C35.302 9.18155 35.456 9.21855 35.603 9.18755C36.425 9.01455 37 8.31955 37 7.49855C37 6.67755 36.425 5.98255 35.603 5.80955C35.456 5.77855 35.302 5.81555 35.185 5.91055V5.91155Z' fill='%2300823D'/%3E%3Cpath d='M33.25 13.25C33.25 13.25 31.313 10.75 29 10.75C26.688 10.75 24 10.75 24 10.75C22.205 10.75 20.75 9.295 20.75 7.5C20.75 5.705 22.205 4.25 24 4.25H29C31.312 4.25 33.25 1.75 33.25 1.75V13.25Z' stroke='%2300823D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24.75 4.25V10.75' stroke='%2300823D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; text-indent: -999999px; } #wrap.notice.list #container #main .section1 .list > ul.body > li.notice > div:nth-of-type(2) > a { color: var(--HD_Green3); } /* ====================== notice view ====================== */ #wrap.notice.view #container #main .section1 { width: 1000px; display: flex; flex-wrap: wrap; gap: 20px 0; margin: 0 auto; } #wrap.notice.view #container #main .section1 .header { width: 100%; display: flex; gap: 0 50px; padding: 30px; border-top: 1px solid #E4E7EC; border-bottom: 1px solid #E4E7EC; } #wrap.notice.view #container #main .section1 .header > div:nth-of-type(1) { width: 796px; flex: 0 0 auto; } #wrap.notice.view #container #main .section1 .header > div:nth-of-type(1) > p { font-size: 12px; } #wrap.notice.view #container #main .section1 .header > div:nth-of-type(1) > div { margin-top: 10px; font-size: 24px; font-weight: 700; } #wrap.notice.view #container #main .section1 .header > div:nth-of-type(2) { flex: 1 0 0; font-size: 12px; } #wrap.notice.view #container #main .section1 .header > div:nth-of-type(2) > div { margin-top: 10px; } #wrap.notice.view #container #main .section1 .file-list { padding: 0 30px; } #wrap.notice.view #container #main .section1 .file-list > ul {} #wrap.notice.view #container #main .section1 .file-list > ul > li {} #wrap.notice.view #container #main .section1 .file-list > ul > li~li { margin-top: 16px; } #wrap.notice.view #container #main .section1 .file-list > ul > li > a { display: block; width: 100%; padding-left: 34px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath d='M16 8.3582C15.5582 8.3582 15.2 8.71638 15.2 9.1582C15.2 9.60003 15.5582 9.9582 16 9.9582V8.3582ZM8 9.9582C8.44183 9.9582 8.8 9.60003 8.8 9.1582C8.8 8.71638 8.44183 8.3582 8 8.3582V9.9582ZM5.07805 19.933L4.70927 20.643L4.70927 20.643L5.07805 19.933ZM4.22517 19.0802L4.9351 18.7114L4.9351 18.7114L4.22517 19.0802ZM19.7748 19.0802L20.4848 19.4489V19.4489L19.7748 19.0802ZM18.9219 19.933L19.2907 20.643H19.2907L18.9219 19.933ZM19.7748 10.2363L20.4848 9.86748L20.4848 9.86747L19.7748 10.2363ZM18.9219 9.38338L18.5532 10.0933H18.5532L18.9219 9.38338ZM4.22517 10.2363L3.51524 9.86747H3.51524L4.22517 10.2363ZM5.07805 9.38338L4.70927 8.67345L5.07805 9.38338ZM12.8 4.1582C12.8 3.71638 12.4418 3.3582 12 3.3582C11.5582 3.3582 11.2 3.71638 11.2 4.1582H12.8ZM12 14.1582L11.4343 14.7239C11.7467 15.0363 12.2533 15.0363 12.5657 14.7239L12 14.1582ZM10.0657 11.0925C9.75327 10.7801 9.24673 10.7801 8.93431 11.0925C8.6219 11.4049 8.6219 11.9115 8.93431 12.2239L10.0657 11.0925ZM15.0657 12.2239C15.3781 11.9115 15.3781 11.4049 15.0657 11.0925C14.7533 10.7801 14.2467 10.7801 13.9343 11.0925L15.0657 12.2239ZM19.2 12.3782V16.9382H20.8V12.3782H19.2ZM16.78 19.3582H7.22V20.9582H16.78V19.3582ZM4.8 16.9382V12.3782H3.2V16.9382H4.8ZM16 9.9582H16.78V8.3582H16V9.9582ZM7.22 9.9582H8V8.3582H7.22V9.9582ZM7.22 19.3582C6.63708 19.3582 6.24881 19.3576 5.95067 19.3328C5.6621 19.3088 5.53035 19.2665 5.44683 19.2231L4.70927 20.643C5.05923 20.8248 5.42896 20.895 5.81825 20.9273C6.19797 20.9588 6.66394 20.9582 7.22 20.9582V19.3582ZM3.2 16.9382C3.2 17.4943 3.19936 17.9602 3.23089 18.34C3.26322 18.7292 3.33345 19.099 3.51524 19.4489L4.9351 18.7114C4.89172 18.6279 4.84937 18.4961 4.8254 18.2075C4.80064 17.9094 4.8 17.5211 4.8 16.9382H3.2ZM5.44683 19.2231C5.22766 19.1092 5.04895 18.9305 4.9351 18.7114L3.51524 19.4489C3.78089 19.9603 4.19787 20.3773 4.70927 20.643L5.44683 19.2231ZM19.2 16.9382C19.2 17.5211 19.1994 17.9094 19.1746 18.2075C19.1506 18.4961 19.1083 18.6279 19.0649 18.7114L20.4848 19.4489C20.6665 19.099 20.7368 18.7292 20.7691 18.34C20.8006 17.9602 20.8 17.4943 20.8 16.9382H19.2ZM16.78 20.9582C17.3361 20.9582 17.802 20.9588 18.1817 20.9273C18.571 20.895 18.9408 20.8248 19.2907 20.643L18.5532 19.2231C18.4697 19.2665 18.3379 19.3088 18.0493 19.3328C17.7512 19.3576 17.3629 19.3582 16.78 19.3582V20.9582ZM19.0649 18.7114C18.951 18.9305 18.7723 19.1092 18.5532 19.2231L19.2907 20.643C19.8021 20.3773 20.2191 19.9603 20.4848 19.4489L19.0649 18.7114ZM20.8 12.3782C20.8 11.8221 20.8006 11.3562 20.7691 10.9765C20.7368 10.5872 20.6665 10.2174 20.4848 9.86748L19.0649 10.605C19.1083 10.6885 19.1506 10.8203 19.1746 11.1089C19.1994 11.407 19.2 11.7953 19.2 12.3782H20.8ZM16.78 9.9582C17.3629 9.9582 17.7512 9.95885 18.0493 9.98361C18.3379 10.0076 18.4697 10.0499 18.5532 10.0933L19.2907 8.67345C18.9408 8.49166 18.571 8.42142 18.1817 8.38909C17.802 8.35756 17.3361 8.3582 16.78 8.3582V9.9582ZM20.4848 9.86747C20.2191 9.35607 19.8021 8.9391 19.2907 8.67345L18.5532 10.0933C18.7723 10.2072 18.951 10.3859 19.0649 10.605L20.4848 9.86747ZM4.8 12.3782C4.8 11.7953 4.80064 11.407 4.8254 11.1089C4.84937 10.8203 4.89172 10.6885 4.9351 10.605L3.51524 9.86747C3.33345 10.2174 3.26322 10.5872 3.23089 10.9765C3.19936 11.3562 3.2 11.8221 3.2 12.3782H4.8ZM7.22 8.3582C6.66394 8.3582 6.19797 8.35756 5.81825 8.38909C5.42896 8.42142 5.05923 8.49166 4.70927 8.67345L5.44683 10.0933C5.53035 10.0499 5.6621 10.0076 5.95067 9.98361C6.24881 9.95885 6.63708 9.9582 7.22 9.9582V8.3582ZM4.9351 10.605C5.04895 10.3859 5.22766 10.2072 5.44683 10.0933L4.70927 8.67345C4.19787 8.9391 3.78089 9.35607 3.51524 9.86747L4.9351 10.605ZM11.2 4.1582V14.1582H12.8V4.1582H11.2ZM12.5657 13.5925L10.0657 11.0925L8.93431 12.2239L11.4343 14.7239L12.5657 13.5925ZM12.5657 14.7239L15.0657 12.2239L13.9343 11.0925L11.4343 13.5925L12.5657 14.7239Z' fill='%2300823D'/%3E%3C/svg%3E") left center no-repeat; } #wrap.notice.view #container #main .section1 .file-list > ul > li > a > span { color: var(--text-secondary); font-size: 16px; text-decoration: underline; text-underline-offset: 2px;line-height: 1.2; } #wrap.notice.view #container #main .section1 .file-list { padding: 0 30px; } #wrap.notice.view #container #main .section1 .file-list > ul {} #wrap.notice.view #container #main .section1 .file-list > ul > li {} #wrap.notice.view #container #main .section1 .file-list > ul > li~li { margin-top: 16px; } #wrap.notice.view #container #main .section1 .file-list > ul > li > a { display: block; width: 100%; padding-left: 34px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath d='M16 8.3582C15.5582 8.3582 15.2 8.71638 15.2 9.1582C15.2 9.60003 15.5582 9.9582 16 9.9582V8.3582ZM8 9.9582C8.44183 9.9582 8.8 9.60003 8.8 9.1582C8.8 8.71638 8.44183 8.3582 8 8.3582V9.9582ZM5.07805 19.933L4.70927 20.643L4.70927 20.643L5.07805 19.933ZM4.22517 19.0802L4.9351 18.7114L4.9351 18.7114L4.22517 19.0802ZM19.7748 19.0802L20.4848 19.4489V19.4489L19.7748 19.0802ZM18.9219 19.933L19.2907 20.643H19.2907L18.9219 19.933ZM19.7748 10.2363L20.4848 9.86748L20.4848 9.86747L19.7748 10.2363ZM18.9219 9.38338L18.5532 10.0933H18.5532L18.9219 9.38338ZM4.22517 10.2363L3.51524 9.86747H3.51524L4.22517 10.2363ZM5.07805 9.38338L4.70927 8.67345L5.07805 9.38338ZM12.8 4.1582C12.8 3.71638 12.4418 3.3582 12 3.3582C11.5582 3.3582 11.2 3.71638 11.2 4.1582H12.8ZM12 14.1582L11.4343 14.7239C11.7467 15.0363 12.2533 15.0363 12.5657 14.7239L12 14.1582ZM10.0657 11.0925C9.75327 10.7801 9.24673 10.7801 8.93431 11.0925C8.6219 11.4049 8.6219 11.9115 8.93431 12.2239L10.0657 11.0925ZM15.0657 12.2239C15.3781 11.9115 15.3781 11.4049 15.0657 11.0925C14.7533 10.7801 14.2467 10.7801 13.9343 11.0925L15.0657 12.2239ZM19.2 12.3782V16.9382H20.8V12.3782H19.2ZM16.78 19.3582H7.22V20.9582H16.78V19.3582ZM4.8 16.9382V12.3782H3.2V16.9382H4.8ZM16 9.9582H16.78V8.3582H16V9.9582ZM7.22 9.9582H8V8.3582H7.22V9.9582ZM7.22 19.3582C6.63708 19.3582 6.24881 19.3576 5.95067 19.3328C5.6621 19.3088 5.53035 19.2665 5.44683 19.2231L4.70927 20.643C5.05923 20.8248 5.42896 20.895 5.81825 20.9273C6.19797 20.9588 6.66394 20.9582 7.22 20.9582V19.3582ZM3.2 16.9382C3.2 17.4943 3.19936 17.9602 3.23089 18.34C3.26322 18.7292 3.33345 19.099 3.51524 19.4489L4.9351 18.7114C4.89172 18.6279 4.84937 18.4961 4.8254 18.2075C4.80064 17.9094 4.8 17.5211 4.8 16.9382H3.2ZM5.44683 19.2231C5.22766 19.1092 5.04895 18.9305 4.9351 18.7114L3.51524 19.4489C3.78089 19.9603 4.19787 20.3773 4.70927 20.643L5.44683 19.2231ZM19.2 16.9382C19.2 17.5211 19.1994 17.9094 19.1746 18.2075C19.1506 18.4961 19.1083 18.6279 19.0649 18.7114L20.4848 19.4489C20.6665 19.099 20.7368 18.7292 20.7691 18.34C20.8006 17.9602 20.8 17.4943 20.8 16.9382H19.2ZM16.78 20.9582C17.3361 20.9582 17.802 20.9588 18.1817 20.9273C18.571 20.895 18.9408 20.8248 19.2907 20.643L18.5532 19.2231C18.4697 19.2665 18.3379 19.3088 18.0493 19.3328C17.7512 19.3576 17.3629 19.3582 16.78 19.3582V20.9582ZM19.0649 18.7114C18.951 18.9305 18.7723 19.1092 18.5532 19.2231L19.2907 20.643C19.8021 20.3773 20.2191 19.9603 20.4848 19.4489L19.0649 18.7114ZM20.8 12.3782C20.8 11.8221 20.8006 11.3562 20.7691 10.9765C20.7368 10.5872 20.6665 10.2174 20.4848 9.86748L19.0649 10.605C19.1083 10.6885 19.1506 10.8203 19.1746 11.1089C19.1994 11.407 19.2 11.7953 19.2 12.3782H20.8ZM16.78 9.9582C17.3629 9.9582 17.7512 9.95885 18.0493 9.98361C18.3379 10.0076 18.4697 10.0499 18.5532 10.0933L19.2907 8.67345C18.9408 8.49166 18.571 8.42142 18.1817 8.38909C17.802 8.35756 17.3361 8.3582 16.78 8.3582V9.9582ZM20.4848 9.86747C20.2191 9.35607 19.8021 8.9391 19.2907 8.67345L18.5532 10.0933C18.7723 10.2072 18.951 10.3859 19.0649 10.605L20.4848 9.86747ZM4.8 12.3782C4.8 11.7953 4.80064 11.407 4.8254 11.1089C4.84937 10.8203 4.89172 10.6885 4.9351 10.605L3.51524 9.86747C3.33345 10.2174 3.26322 10.5872 3.23089 10.9765C3.19936 11.3562 3.2 11.8221 3.2 12.3782H4.8ZM7.22 8.3582C6.66394 8.3582 6.19797 8.35756 5.81825 8.38909C5.42896 8.42142 5.05923 8.49166 4.70927 8.67345L5.44683 10.0933C5.53035 10.0499 5.6621 10.0076 5.95067 9.98361C6.24881 9.95885 6.63708 9.9582 7.22 9.9582V8.3582ZM4.9351 10.605C5.04895 10.3859 5.22766 10.2072 5.44683 10.0933L4.70927 8.67345C4.19787 8.9391 3.78089 9.35607 3.51524 9.86747L4.9351 10.605ZM11.2 4.1582V14.1582H12.8V4.1582H11.2ZM12.5657 13.5925L10.0657 11.0925L8.93431 12.2239L11.4343 14.7239L12.5657 13.5925ZM12.5657 14.7239L15.0657 12.2239L13.9343 11.0925L11.4343 13.5925L12.5657 14.7239Z' fill='%2300823D'/%3E%3C/svg%3E") left center no-repeat; } #wrap.notice.view #container #main .section1 .file-list > ul > li > a > span { color: var(--text-secondary); font-size: 16px; text-decoration: underline; text-underline-offset: 2px;line-height: 1.2; } #wrap.notice.view #container #main .section1 .container { width: 100%; padding: 30px; font-size: 16px; line-height: 28px; border-top: 1px solid #E4E7EC; border-bottom: 1px solid #E4E7EC; } #wrap.notice.view #container #main .section1 .footer { width: 100%; display: flex; justify-content: center; } #wrap.notice.view #container #main .section1 .footer > a { display: block; width: 244px; height: 50px; background: #637083; border-radius: 6px; text-align: center; line-height: 50px; color: #fff; font-size: 16px; } @media (max-width: 768px) { /*================================================================================= */ #wrap.notice.view #container #main .section1 { width: 100%; padding: 0 28px; } #wrap.notice.view #container #main .section1 .header { flex-wrap: wrap; padding: 20px 0; gap: 20px 0; } #wrap.notice.view #container #main .section1 .header > div:nth-of-type(1) { width: 100%; } #wrap.notice.view #container #main .section1 .header > div:nth-of-type(2) { width: 100%; } #wrap.notice.view #container #main .section1 .file-list { padding: 0; } #wrap.notice.view #container #main .section1 .container { padding: 20px 0; } #wrap.notice.view #container #main .section1 .footer { width: 100%; display: flex; justify-content: center; } #wrap.notice.view #container #main .section1 .footer > a { width: 100%; } } /* ====================== Quotes ====================== */ #wrap.quotes #container {} #wrap.quotes #container #main {} #wrap.quotes #container #main form { display: flex; flex-flow: column wrap; gap: 30px 0; width: 100%; } #wrap.quotes #container #main .section {} #wrap.quotes #container #main .section1 { display: flex; gap: 30px; } #wrap.quotes #container #main .section1 > dl { width: 460px; } #wrap.quotes #container #main .section1 > dl > dt { line-height: 30px; font-size: 16px; color: #000; font-weight: 700; } #wrap.quotes #container #main .section1 > dl > dd { margin-top: 20px; border: 1px solid #E4E7EC; border-radius: 10px; padding: 20px 30px; } #wrap.quotes #container #main .section1 > dl > dd > div {} #wrap.quotes #container #main .section1 > dl > dd > div~div { margin-top: 10px; } #wrap.quotes #container #main .section1 > dl > dd > div > p { font-size: 14px; color: var(--text-secondary); } #wrap.quotes #container #main .section1 > dl > dd > div > div { margin-top: 8px; } #wrap.quotes #container #main .section2 > div { padding: 20px 30px; border: 1px solid #E4E7EC; border-radius: 10px; } #wrap.quotes #container #main .section2 > div > p { font-size: 14px; color: var(--text-secondary); } #wrap.quotes #container #main .section2 > div > div { margin-top: 8px; } #wrap.quotes #container #main .section3 > ul { margin-top: 20px; padding: 20px 30px; border: 1px solid #E4E7EC; border-radius: 10px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; } #wrap.quotes #container #main .section3 > ul > li > p { font-size: 14px; color: var(--text-secondary); } #wrap.quotes #container #main .section3 > ul > li > div { margin-top: 8px; } #wrap.quotes #container #main .section3 > ul > li:nth-of-type(1) { width: 130px; } #wrap.quotes #container #main .section3 > ul > li:nth-of-type(2) { width: 100px; } #wrap.quotes #container #main .section3 > ul > li:nth-of-type(3) { width: 100px; } #wrap.quotes #container #main .section3 > ul > li:nth-of-type(4) { width: 100px; } #wrap.quotes #container #main .section3 > ul > li:nth-of-type(5) { width: 200px; } #wrap.quotes #container #main .section3 > ul > li:nth-of-type(6) { width: 262px; } #wrap.quotes #container #main .section3 > ul > li:nth-of-type(7) { width: 60px; } #wrap.quotes #container #main .section3 > ul > li:nth-of-type(8) > p { color: #fff; font-size: 12px; } #wrap.quotes #container #main .section4 .list { border-radius: 10px; } #wrap.quotes #container #main .section4 .list > ul > li { justify-content: space-between; } #wrap.quotes #container #main .section4 .list > ul > li > div { flex: 0 0 auto; text-align: center; } #wrap.quotes #container #main .section4 .list > ul > li > div:nth-of-type(1) { width: 50px; } #wrap.quotes #container #main .section4 .list > ul > li > div:nth-of-type(2) { width: 250px; justify-content: flex-start; } #wrap.quotes #container #main .section4 .list > ul > li > div:nth-of-type(3) { width: 50px; } #wrap.quotes #container #main .section4 .list > ul > li > div:nth-of-type(4) { width: 50px; } #wrap.quotes #container #main .section4 .list > ul > li > div:nth-of-type(5) { width: 62px; } #wrap.quotes #container #main .section4 .list > ul > li > div:nth-of-type(6) { width: 78px; } #wrap.quotes #container #main .section4 .list > ul > li > div:nth-of-type(7) { width: 200px; justify-content: flex-start; } #wrap.quotes #container #main .section4 .list > ul > li > div:nth-of-type(8) { width: 60px; } #wrap.quotes #container #main .section4 .list > ul > li > div:nth-of-type(9) { width: 38px; } #wrap.quotes #container #main .section4 .list > ul.body > li > div:nth-of-type(2) { font-size: 14px; font-weight: 700; color: var(--HD-Trust-Blue); } #wrap.quotes #container #main .section5 textarea { width: 100%; min-height: 360px; padding: 20px; border: 1px solid #97A1AF; border-radius: 6px; font-size: 16px; line-height: 28px; resize: none; outline: none; margin-top: 20px; } #wrap.quotes #container #main .section6 { display: flex; align-items: center; gap: 0 20px; } #wrap.quotes #container #main .section6 > .hint { font-size: 12px; color: var(--text-secondary); } /* Support 의 Send 옆 문구와 동일 (2026-10-11) */ #wrap.quotes #container #main .section6 > .hint a { color: var(--HD_Discovery_Blue); font-weight: 700; } #wrap.quotes #container #main > .lead { margin-top: -22px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); } /* 제목 아래 안내 (2026-10-11) — #main gap 30 을 줄여 제목에 붙임 */ #wrap.quotes #container #main .section6 > p { width: 100px; } /* 2026-10-14 Support & Service 폼 스타일로 통일 — 라벨 12px Bold(+빨간 *), 입력 40px #D0D0D0 r4 14px, 첨부 = 읽기 전용 파일명 + Find a file, 보내기 42px 네이비 */ #wrap.quotes #container #main form .section1 > dl > dd, #wrap.quotes #container #main form .section2 > div { padding: 24px 28px; } #wrap.quotes #container #main form .section1 > dl > dd > div ~ div { margin-top: 16px; } #wrap.quotes #container #main form .section1 > dl > dd > div > label, #wrap.quotes #container #main form .section2 > div > label { display: block; font-size: 12px; font-weight: 700; color: var(--text-primary); } #wrap.quotes #container #main form label > em { color: #C93A25; font-style: normal; } #wrap.quotes #container #main form .section1 > dl > dd > div > div, #wrap.quotes #container #main form .section2 > div > div { margin-top: 6px; } #wrap.quotes #container #main form .hd-input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #D0D0D0; border-radius: 4px; font-size: 14px; color: var(--text-primary); } #wrap.quotes #container #main form .hd-input:focus { outline: none; border-color: var(--HD_Discovery_Blue); } #wrap.quotes #container #main form .file-row { display: flex; gap: 0 10px; } #wrap.quotes #container #main form .file-row > .hd-input { flex: 1 1 auto; min-width: 0; background: #F9FAFB; font-size: 13px; } #wrap.quotes #container #main form .file-row > .button-file { flex: 0 0 auto; display: flex; align-items: center; height: 40px; padding: 0 18px; border: 1px solid #CED2DA; border-radius: 4px; background: #fff; font-size: 13px; font-weight: 700; color: var(--text-primary); cursor: pointer; } #wrap.quotes #container #main form .file-row > .button-file:hover { border-color: var(--HD_Discovery_Blue); color: var(--HD_Discovery_Blue); } #wrap.quotes #container #main form .section2 .hint { display: block; margin-top: 6px; font-size: 11px; color: var(--text-tertiary); } #wrap.quotes #container #main .section5 textarea.hd-input { width: 100%; height: auto; min-height: 200px; margin-top: 20px; padding: 10px 12px; border: 1px solid #D0D0D0; border-radius: 4px; font-size: 14px; line-height: 1.6; resize: vertical; } #wrap.quotes #container #main .section6 > p { width: auto; } #wrap.quotes #container #main .section6 .button { height: 42px; padding: 0 26px; border-radius: 4px; font-size: 14px; font-weight: 700; } #wrap.quotes #container #main .section6 .button.reset { border: 1px solid #CED2DA; color: var(--text-primary); background: #fff; } #wrap.quotes #container #main .login-alert { width: 100%; height: 500px; display: flex; flex-flow: column wrap; justify-content: center; align-items: center; border-radius: 10px; border: 1px solid #E4E7EC; color: #000; line-height: 1; } #wrap.quotes #container #main .login-alert > p:nth-of-type(2) { font-size: 30px; margin: 20px 0; font-weight: 700; } #wrap.quotes #container #main .login-alert > p:nth-of-type(3) { font-size: 14px; color: #393939; margin: 0 0 10px; } #wrap.quotes #container #main .login-alert > a { width: 200px; height: 30px; border-radius: 4px; background: var(--HD_Green2); font-size: 12px; color: #fff; display: flex; align-items: center; justify-content: center; gap: 0 10px; } @media (max-width: 768px) { /*================================================================================= */ #wrap.quotes #container #main .section1 { flex-wrap: wrap; } #wrap.quotes #container #main .section1 > dl { width: 100%; } #wrap.quotes #container #main .section1 > dl > dd { padding: 20px; } #wrap.quotes #container #main .section2 > div { padding: 20px; } #wrap.quotes #container #main .section3 > ul { padding: 20px; } #wrap.quotes #container #main .section3 > ul > li:nth-of-type(1) { width: 126px; } #wrap.quotes #container #main .section3 > ul > li:nth-of-type(2) { width: 126px; } #wrap.quotes #container #main .section3 > ul > li:nth-of-type(3) { width: 126px; } #wrap.quotes #container #main .section3 > ul > li:nth-of-type(4) { width: 126px; } #wrap.quotes #container #main .section3 > ul > li:nth-of-type(5) { width: 264px; } #wrap.quotes #container #main .section3 > ul > li:nth-of-type(6) { width: 264px; } #wrap.quotes #container #main .section3 > ul > li:nth-of-type(7) { width: 60px; } #wrap.quotes #container #main .section3 > ul > li:nth-of-type(8) > p { color: #fff; font-size: 12px; } #wrap.quotes #container #main .section6 { justify-content: center; flex-wrap: wrap; gap: 12px 16px; } #wrap.quotes #container #main .section6 > p { width: calc(50% - 8px); } #wrap.quotes #container #main .section6 > p .button { width: 100% !important; } #wrap.quotes #container #main .section6 > .hint { flex: 1 1 100%; text-align: center; } /* 2026-10-14 버튼 2개 한 줄 + 연락처 다음 줄 */ #wrap.quotes #container #main .login-alert { width: calc(100% - 56px); height: 500px; display: flex; flex-flow: column wrap; justify-content: center; align-items: center; border-radius: 10px; border: 1px solid #E4E7EC; color: #000; line-height: 1; margin: 0 auto; padding: 0 20px; box-sizing: border-box; text-align: center; } #wrap.quotes #container #main .login-alert > p:nth-of-type(2) { font-size: 30px; margin: 40px 0; font-weight: 700; } #wrap.quotes #container #main .login-alert > p:nth-of-type(3) { font-size: 14px; color: #393939; margin: 0 0 10px; } #wrap.quotes #container #main .login-alert > a { width: 200px; height: 30px; border-radius: 4px; background: var(--HD_Green2); font-size: 12px; color: #fff; display: flex; align-items: center; justify-content: center; gap: 0 10px; } } /* ====================== Quotes success ====================== */ #wrap.quotes-success #container #main .section1 {} #wrap.quotes-success #container #main .section1 > div { width: 100%; border: 1px solid #E4E7EC; border-radius: 10px; display: flex; flex-flow: column wrap; align-items: center; padding: 65px 20px; text-align: center; } #wrap.quotes-success #container #main .section1 > div > p:nth-of-type(1) { font-size: 30px; margin: 10px 0; font-weight: 700; color: #000; } #wrap.quotes-success #container #main .section1 > div > p:nth-of-type(2) { font-size: 14px; color: #333; line-height: 1.4; } #wrap.quotes-success #container #main .section1 > div > a { margin-top: 40px; display: block; width: 303px; height: 40px; line-height: 40px; background: var(--HD_Green2); border-radius: 5px; color: #fff; font-size: 15px; } @media (max-width: 768px) { /*================================================================================= */ #wrap.quotes-success #container #main .section1 > div > a { width: 100%; } } /* ====================== error ====================== */ #wrap.error #container { display: flex; } #wrap.error #container #main { width: 100%; flex-flow: row wrap; } #wrap.error #container #main .section1 { width: 100%; display: flex; } #wrap.error #container #main .section1 > div { width: 100%; border: 1px solid #E4E7EC; border-radius: 10px; display: flex; flex-flow: column wrap; justify-content: center; align-items: center; padding: 65px 20px; text-align: center; } #wrap.error #container #main .section1 > div > p:nth-of-type(1) { font-size: 30px; margin: 10px 0; font-weight: 700; color: #000; } #wrap.error #container #main .section1 > div > p:nth-of-type(2) { font-size: 14px; color: #333; line-height: 1.4; } #wrap.error #container #main .section1 > div > a { margin-top: 40px; display: block; width: 303px; height: 40px; line-height: 40px; background: var(--HD_Green2); border-radius: 5px; color: #fff; font-size: 15px; } @media (max-width: 768px) { /*================================================================================= */ #wrap.error #container #main .section1 > div > a { width: 100%; } } /* ====================== Popup ====================== */ .iframe-wrap { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 999; box-shadow: 0px 25px 60px -10px rgba(28, 39, 49, 0.12); border: 1px solid #344051; border-radius: 16px; display: block; background: #fff; } .iframe-wrap .close { position: absolute; top: 26px; right: 25px; width: 24px; height: 24px; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8.66667 8.66667L12 12M12 12L15.3333 15.3333M12 12L15.3333 8.66667M12 12L8.66667 15.3333M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z' stroke='%23141C24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; } .iframe-wrap > iframe { display: block; width: 100%; height: 100%; overflow: hidden; } .iframe-wrap.alert { width: 304px; height: 260px; display: none; } .iframe-wrap.stock { width: 500px; height: 410px; overflow: hidden; display: none; } .iframe-wrap.backorder { width: 550px; height: 520px; overflow: hidden; display: none; } .iframe-wrap.address { width: 470px; height: 520px; overflow: hidden; display: none; } .iframe-wrap.change-pwd { width: 470px; height: 336px; overflow: hidden; display: none; } #iframe-container { width: 100%; height: 100%; } #iframe-container .title { font-size: 18px; line-height: 28px; font-weight: 700; } #iframe-container.alert { padding: 24px; display: flex; flex-flow: column wrap; gap: 20px; justify-content: space-between; } #iframe-container.alert > div:nth-of-type(1) { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px 0; padding: 15px 0; } #iframe-container.alert > div:nth-of-type(1) > p:nth-of-type(1) { margin: 0 auto; width: 88px; height: 88px; border-radius: 88px; background: var(--HD_Green2); display: flex; align-items: center; justify-content: center; } #iframe-container.alert > div:nth-of-type(1) > p:nth-of-type(1).black { background: var(--text-secondary); } #iframe-container.alert > div:nth-of-type(1) > p:nth-of-type(1).red { background: #F64C4C; } #iframe-container.alert > div:nth-of-type(1) > p:nth-of-type(2) { font-size: 16px; color: var(--text-secondary); line-height: 1; width: 100%; text-align: center; letter-spacing: -0.5px; } #iframe-container.alert > div:nth-of-type(2) { display: flex; gap: 0 12px; } #iframe-container.alert > div:nth-of-type(2) > * { width: 122px; } #iframe-container.alert > div:nth-of-type(2) > .full { width: 100%; } #iframe-container.alert > div:nth-of-type(2) > * > input { width: 100%; } #iframe-container.stock { width: 100%; height: 100%; padding: 24px; display: flex; flex-direction: column; gap: 20px 0; } #iframe-container.stock .list { border: 1px solid #E4E7EC; border-radius: 10px; } #iframe-container.stock .title > .code { margin-left: 10px; font-size: 13px; font-weight: 700; color: var(--HD_Discovery_Blue); } /* 차단기 재고 팝업: 코드·기준 시각 (2026-10-05) */ #iframe-container.stock .as-of { font-size: 11px; color: var(--text-tertiary); } #iframe-container.stock .list ul.body > li.empty { justify-content: center; color: var(--text-tertiary); font-size: 12px; } #iframe-container.stock .list ul.body > li.empty > div { width: auto !important; } #iframe-container.stock .list ul > li { padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; } #iframe-container.stock .list ul > li > div {} #iframe-container.stock .list ul > li > div:nth-of-type(1) { width: 160px; font-size: 12px; } #iframe-container.stock .list ul > li > div:nth-of-type(2) { width: 50px; font-size: 12px; display: flex; align-items: ceter; justify-content: flex-end; } #iframe-container.stock .list ul > li > div:nth-of-type(3) { width: 110px; font-size: 12px; text-align: center; } #iframe-container.stock .list ul.head { background: #F4F6FA; border-radius: 10px 10px 0 0; } #iframe-container.stock .list ul.body { border-radius: 0 0 10px 10px; } #iframe-container.stock .list ul.body > li { border-top: 1px solid #E4E7EC; } #iframe-container.stock .list ul.body > li > div:nth-of-type(1) { font-weight: 700; } #iframe-container.stock > span { display: flex; font-size: 14px; color: #000; line-height: 21px; font-weight: 700; flex: 1 0 0; align-items: flex-end; } #iframe-container.address { width: 100%; height: 100%; padding: 24px; display: flex; flex-direction: column; gap: 20px 0; } #iframe-container.address > ul { display: flex; flex-wrap: wrap; gap: 16px 8px; } #iframe-container.address > ul > li { flex: 0 1 auto; width: 32%; } #iframe-container.address > ul > li.full { width: 100%; } #iframe-container.address > ul > li.half { width: 49%; } #iframe-container.address > ul > li > p { font-size: 14px; color: var(--text-secondary); } #iframe-container.address > ul > li > p~* { margin-top: 8px; } #iframe-container.address > ul > li.zip-code {} #iframe-container.address > ul > li.zip-code > div { display: flex; gap: 0 8px; } #iframe-container.address > ul > li.zip-code > div input { flex: 1 0 0; } #iframe-container.address > ul > li.zip-code > div p { flex: 0 0 auto; width: 60px; height: 30px; background: var(--text-tertiary); color: #fff; color :#fff; font-size: 12px; border-radius: 6px; cursor: pointer; text-align: center; line-height: 30px; } #iframe-container.change-pwd { width: 100%; height: 100%; padding: 24px; display: flex; flex-direction: column; gap: 20px 0; } #iframe-container.change-pwd > ul { display: flex; flex-wrap: wrap; gap: 16px 8px; } #iframe-container.change-pwd > ul > li { flex: 0 1 auto; width: 100%; } #iframe-container.change-pwd > ul > li > p { font-size: 14px; color: var(--text-secondary); } #iframe-container.change-pwd > ul > li > p~* { margin-top: 8px; } @media (max-width: 768px) { /*================================================================================= */ .iframe-wrap.stock { width: 304px; height: 450px; } .iframe-wrap.backorder { width: 304px; height: 520px; } .iframe-wrap.address { width: 304px; height: 725px; } .iframe-wrap.change-pwd { width: 304px; height: 336px; } #iframe-container.stock .list ul > li { padding: 15px;} #iframe-container.stock .list ul > li > div:nth-of-type(1) { width: 86px; } #iframe-container.stock .list ul > li > div:nth-of-type(2) { width: 47px; } #iframe-container.stock .list ul > li > div:nth-of-type(3) { width: 61px;} } @media (max-width: 304px) { /*================================================================================= */ #iframe-container.address > ul > li { width: 100%; } #iframe-container.address > ul > li.half { width: 100%; } } /* ====================== login ====================== */ #wrap.login { height: 100vh; } #wrap.login > div { width: 400px; } #wrap.login > div > p:nth-of-type(2) { font-size: 35px; font-weight: 700; color: var(--HD_Discovery_Blue); margin-top: 29px; line-height: 1; } #wrap.login > div > form { margin-top: 40px; width: 100%; } #wrap.login > div > form > div { border: 1px solid #D0D0D0; border-radius: 20px; padding: 50px; gap: 30px 0; } #wrap.login > div > form > div > p { font-size: 30px; color: #000; font-weight: 700; } #wrap.login > div > form > div > ul {} #wrap.login > div > form > div > ul > li { display: flex; flex-direction: column; gap: 8px 0; } #wrap.login > div > form > div > ul > li~li { margin-top: 20px; } #wrap.login > div > form > div > ul > li > p:nth-of-type(1) { font-size: 14px; color: #000; font-weight: 400; } #wrap.login > div > form > div > ul > li > p:nth-of-type(2) {} #wrap.login > div > form > div > ul > li > p:nth-of-type(2) > input { height: 40px; width: 100%; border: 1px solid #D0D0D0; border-radius: 5px; padding: 10px 14px; font-size: 14px; color: #000; outline: none; } #wrap.login > div > form > div > ul > li > p:nth-of-type(2) > input:focus { border: 1px solid var(--HD_Green3); } #wrap.login > div > form > div > ul > li > p:nth-of-type(2) > input.warning { border: 1px solid #E52F2F; } #wrap.login > div > form > div > ul > li > span { display: none; padding-left: 17px; color: #E52F2F; font-size: 11px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10.958 8.34403L7.3413 2.08003C7.0613 1.59536 6.55997 1.30603 5.99997 1.30603C5.43997 1.30603 4.93864 1.59536 4.65864 2.08003L1.04197 8.34403C0.76197 8.8287 0.76197 9.40736 1.04197 9.89203C1.32197 10.3774 1.8233 10.6667 2.3833 10.6667H9.61664C10.1766 10.6667 10.678 10.3774 10.958 9.89203C11.238 9.40736 11.238 8.8287 10.958 8.34403ZM5.49997 4.33336C5.49997 4.05736 5.72397 3.83336 5.99997 3.83336C6.27597 3.83336 6.49997 4.05736 6.49997 4.33336V6.6667C6.49997 6.9427 6.27597 7.1667 5.99997 7.1667C5.72397 7.1667 5.49997 6.9427 5.49997 6.6667V4.33336ZM5.99997 9.04603C5.63197 9.04603 5.3333 8.7467 5.3333 8.37936C5.3333 8.01203 5.63197 7.7127 5.99997 7.7127C6.36797 7.7127 6.66664 8.01203 6.66664 8.37936C6.66664 8.7467 6.36797 9.04603 5.99997 9.04603Z' fill='%23E52F2F'/%3E%3C/svg%3E") left -1px no-repeat; } #wrap.login > div > form > div > input[type=submit] { width: 100%; height: 40px; border-radius: 5px; background: var(--HD_Green2); color: var(--White); font-size: 15px; cursor: pointer; } #wrap.login > div > dl { margin-top: 10px; padding: 7px 12px; width: 400px; } #wrap.login > div > dl > dt { color: #004AD6; font-size: 13px; text-decoration: underline; cursor: pointer; position: relative; display: inline-block; text-underline-position: under; } #wrap.login > div > dl > dt::after { content: ''; position: absolute; right: -21px; top: 0; width: 11px; height: 11px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='12' viewBox='0 0 11 12' fill='none'%3E%3Cpath d='M9.31945 4.47217L5.5 8.29161L1.68056 4.47217' stroke='%23344051' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #wrap.login > div > dl > dd { color: #393939; font-size: 12px; margin-top: 10px; line-height: 1.4; display: none; } #wrap.login > div > dl > dd > p~p { margin-top: 10px; } #wrap.login .copyright { position: absolute; left: 50%; bottom: 50px; transform: translate(-50%, 0); font-size: 10px; color: #6A6A6A; } /* ====================== New pwd ====================== */ #wrap.new-pwd { min-height: 100vh; } #wrap.new-pwd > div { width: 400px; } #wrap.new-pwd > div > p:nth-of-type(2) { font-size: 35px; font-weight: 700; color: var(--HD_Discovery_Blue); margin-top: 29px; line-height: 1; } #wrap.new-pwd > div > form { margin-top: 40px; width: 100%; } #wrap.new-pwd > div > form > div { border: 1px solid #D0D0D0; border-radius: 20px; padding: 50px; gap: 30px 0; } #wrap.new-pwd > div > form > div > p { font-size: 30px; color: #000; font-weight: 700; white-space: nowrap; } #wrap.new-pwd > div > form > div > div { font-size: 12px; color: #393939; line-height: 1.4; } #wrap.new-pwd > div > form > div > div > span { text-decoration: underline; } #wrap.new-pwd > div > form > div .warning { display: none; font-size: 11px; color: #E52F2F; padding-left: 17px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10.958 8.34391L7.3413 2.07991C7.0613 1.59524 6.55997 1.30591 5.99997 1.30591C5.43997 1.30591 4.93864 1.59524 4.65864 2.07991L1.04197 8.34391C0.76197 8.82858 0.76197 9.40724 1.04197 9.89191C1.32197 10.3772 1.8233 10.6666 2.3833 10.6666H9.61664C10.1766 10.6666 10.678 10.3772 10.958 9.89191C11.238 9.40724 11.238 8.82858 10.958 8.34391ZM5.49997 4.33324C5.49997 4.05724 5.72397 3.83324 5.99997 3.83324C6.27597 3.83324 6.49997 4.05724 6.49997 4.33324V6.66658C6.49997 6.94258 6.27597 7.16658 5.99997 7.16658C5.72397 7.16658 5.49997 6.94258 5.49997 6.66658V4.33324ZM5.99997 9.04591C5.63197 9.04591 5.3333 8.74658 5.3333 8.37924C5.3333 8.01191 5.63197 7.71258 5.99997 7.71258C6.36797 7.71258 6.66664 8.01191 6.66664 8.37924C6.66664 8.74658 6.36797 9.04591 5.99997 9.04591Z' fill='%23E52F2F'/%3E%3C/svg%3E") left center no-repeat; } #wrap.new-pwd > div > form > div .warning.on { display: block; } #wrap.new-pwd > div > form > div > ul {} #wrap.new-pwd > div > form > div > ul > li { display: flex; flex-direction: column; gap: 8px 0; } #wrap.new-pwd > div > form > div > ul > li~li { margin-top: 20px; } #wrap.new-pwd > div > form > div > ul > li > p:nth-of-type(1) { font-size: 14px; color: var(--text-secondary); font-weight: 400; } #wrap.new-pwd > div > form > div > ul > li > p:nth-of-type(2) {} #wrap.new-pwd > div > form > div > ul > li > p:nth-of-type(2) > input { height: 30px; width: 100%; border: 1px solid #D0D0D0; border-radius: 5px; padding: 0 12px; font-size: 14px; color: #000; outline: none; } #wrap.new-pwd > div > form > div > ul > li > p:nth-of-type(2) > input:focus { border: 1px solid var(--HD_Green3); } #wrap.new-pwd > div > form > div > ul > li > p:nth-of-type(2) > input.warning { border: 1px solid #E52F2F; } #wrap.new-pwd > div > form > div > ul > li > span { display: none; padding-left: 17px; color: #E52F2F; font-size: 11px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10.958 8.34403L7.3413 2.08003C7.0613 1.59536 6.55997 1.30603 5.99997 1.30603C5.43997 1.30603 4.93864 1.59536 4.65864 2.08003L1.04197 8.34403C0.76197 8.8287 0.76197 9.40736 1.04197 9.89203C1.32197 10.3774 1.8233 10.6667 2.3833 10.6667H9.61664C10.1766 10.6667 10.678 10.3774 10.958 9.89203C11.238 9.40736 11.238 8.8287 10.958 8.34403ZM5.49997 4.33336C5.49997 4.05736 5.72397 3.83336 5.99997 3.83336C6.27597 3.83336 6.49997 4.05736 6.49997 4.33336V6.6667C6.49997 6.9427 6.27597 7.1667 5.99997 7.1667C5.72397 7.1667 5.49997 6.9427 5.49997 6.6667V4.33336ZM5.99997 9.04603C5.63197 9.04603 5.3333 8.7467 5.3333 8.37936C5.3333 8.01203 5.63197 7.7127 5.99997 7.7127C6.36797 7.7127 6.66664 8.01203 6.66664 8.37936C6.66664 8.7467 6.36797 9.04603 5.99997 9.04603Z' fill='%23E52F2F'/%3E%3C/svg%3E") left -1px no-repeat; } #wrap.new-pwd > div > form > div > input[type=submit] { width: 100%; height: 40px; border-radius: 5px; background: var(--HD_Green2); color: var(--White); font-size: 15px; cursor: pointer; } /* ===== 중저압차단기 스타일(네이비) 적용 — Quotes · 로그인 · 비밀번호 재설정 (2026-09-30 사용자 요청: 저압전동기 시절 녹색 버튼 제거) ===== */ #wrap.login > div > form > div > input[type=submit], #wrap.new-pwd > div > form > div > input[type=submit] { background: var(--HD_Discovery_Blue); } #wrap.login > div > form > div > input[type=submit]:hover, #wrap.new-pwd > div > form > div > input[type=submit]:hover { background: #163f8f; } #wrap.login > div > form > div > ul > li > p:nth-of-type(2) > input:focus, #wrap.new-pwd > div > form > div > ul > li > p:nth-of-type(2) > input:focus { border-color: var(--HD_Discovery_Blue); } #wrap.login > div > dl > dt { color: var(--HD_Discovery_Blue); } #wrap.registration > div .section > input[type=submit] { background: var(--HD_Discovery_Blue); } /* 가입 요청 버튼 네이비 (2026-10-14) */ #wrap.quotes .button.submit { background: var(--HD_Discovery_Blue); border-color: var(--HD_Discovery_Blue); } #wrap.quotes .button.submit:hover { background: #163f8f; border-color: #163f8f; } #wrap.quotes #container #main .login-alert > a, #wrap.quotes-success #container #main .section1 > div > a { background: var(--HD_Discovery_Blue); } #wrap.quotes #container #main input:focus, #wrap.quotes #container #main textarea:focus { outline: none; border-color: var(--HD_Discovery_Blue); } #wrap.new-pwd > div > dl { margin-top: 10px; padding: 7px 12px; width: 400px; } #wrap.new-pwd > div > dl > dt { font-size: 13px; } #wrap.new-pwd > div > dl > dd { color: #393939; font-size: 12px; margin-top: 10px; line-height: 1.4; } #wrap.new-pwd > div > dl > dd > p { padding-left: 20px; position: relative; } #wrap.new-pwd > div > dl > dd > p::after { content: ''; position: absolute; left: 9px; top: 6px; width: 3px; height: 3px; border-radius: 3px; background: #393939; } #wrap.new-pwd > div > dl > dd > p~p { margin-top: 10px; } #wrap.new-pwd .copyright { position: absolute; left: 50%; bottom: 50px; transform: translate(-50%, 0); font-size: 10px; color: #6A6A6A; } @media (max-width: 768px) { /*================================================================================= */ #wrap.new-pwd { padding: 40px 0; } #wrap.new-pwd > div { width: 304px; } #wrap.new-pwd > div > form > div { padding: 20px; } #wrap.new-pwd > div > form > div > p { white-space: wrap; } #wrap.new-pwd > div > dl { width: 304px; } #wrap.new-pwd .copyright { position: static; left: 0; bottom: 0; transform: translate(0, 0); margin-top: 50px; } } /* ====================== New pwd ====================== */ #wrap.success { min-height: 100vh; } #wrap.success > div { width: 400px; } #wrap.success > div > p:nth-of-type(2) { font-size: 35px; font-weight: 700; color: var(--HD_Discovery_Blue); margin-top: 29px; line-height: 1; } #wrap.success > div > div { margin-top: 40px; width: 100%; border: 1px solid #D0D0D0; border-radius: 20px; padding: 50px; } #wrap.success > div > div > p { margin-top: 10px; } #wrap.success > div > div > p:nth-of-type(1) { font-size: 30px; font-weight: 700; color: #000; } #wrap.success > div > div > p:nth-of-type(2) { font-size: 12; color: #393939; } #wrap.success > div > div > a { margin-top: 30px; width: 100%; } #wrap.success .copyright { margin-top: 80px; font-size: 10px; color: #6A6A6A; } @media (max-width: 768px) { /*================================================================================= */ #wrap.success > div { width: 304px; } #wrap.success > div > div { padding: 20px; } } /* ====================== Download Center (Figma 중저압차단기 > Download 3029:64933) ====================== */ #wrap.download-center #container #main { gap: 0; } #wrap.download-center #container #main .page-title { padding-bottom: 20px; } #wrap.download-center #container #main .page-title > p { font-size: 32px; line-height: 36px; font-weight: 700; } /* 2026-09-30 제목 32px 통일 */ /* 분류 셀렉트 2개 (제품군 → 속성). 탭 대신 셀렉트: 제품군 6 × 속성 5 조합을 탭으로 펼칠 수 없어서 */ #wrap.download-center #container #main .filters { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; min-height: 60px; padding: 10px 0; border-bottom: 1px solid #E4E7EC; } #wrap.download-center #container #main .filters > label { display: flex; align-items: center; gap: 0 10px; font-size: 14px; font-weight: 700; color: var(--text-tertiary); line-height: 20px; } #wrap.download-center #container #main .filters > label > select { min-width: 200px; height: 40px; padding: 0 36px 0 12px; border: 1px solid #D0D0D0; border-radius: 4px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' stroke='%23344051' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center; font-size: 14px; font-weight: 700; color: var(--text-primary); -webkit-appearance: none; appearance: none; cursor: pointer; } /* 2026-10-14: Accessories(.acc-simple) 셀렉트와 동일 선언(굵기 700·화살표) — 한쪽을 바꾸면 다른 쪽도 */ #wrap.download-center #container #main .filters > label > select:focus { outline: none; border-color: var(--HD_Discovery_Blue); } #wrap.download-center #container #main .filters > .reset { font-size: 12px; color: var(--HD_Discovery_Blue); text-decoration: underline; } #wrap.download-center #container #main .section { margin-top: 40px; } #wrap.download-center #container #main .section .list { border-radius: 10px 10px 0 0; border: 1px solid #E4E7EC; overflow: hidden; } #wrap.download-center #container #main .section .list ul > li { display: flex; align-items: center; } #wrap.download-center #container #main .section .list ul > li > div { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-start; padding: 0; margin: 0; font-size: 12px; font-weight: 400; line-height: normal; text-align: left; } #wrap.download-center #container #main .section .list ul > li > div.type { width: 78px; } /* 뱃지 38 + 간격 40 */ #wrap.download-center #container #main .section .list ul > li > div.name { flex: 1 1 auto; min-width: 0; } #wrap.download-center #container #main .section .list ul > li > div.line { width: 90px; } #wrap.download-center #container #main .section .list ul > li > div.category { width: 100px; } #wrap.download-center #container #main .section .list ul > li > div.size { width: 80px; } #wrap.download-center #container #main .section .list ul > li > div.date { width: 100px; } #wrap.download-center #container #main .section .list ul > li > div.action { width: 139px; flex: 0 0 139px; margin-left: 20px; justify-content: flex-end; } #wrap.download-center #container #main .section .list ul > li > div.name { padding-right: 20px; } #wrap.download-center #container #main .section .list ul.head > li > div { color: var(--text-primary); } #wrap.download-center #container #main .section .list ul.head { background: #F4F6FA; } #wrap.download-center #container #main .section .list ul.head > li { height: 50px; padding: 0 30px 0 40px; font-size: 12px; color: var(--text-primary); } #wrap.download-center #container #main .section .list ul.body > li { height: 60px; padding: 0 30px 0 40px; border-top: 1px solid #E4E7EC; font-size: 12px; color: var(--text-primary); } #wrap.download-center #container #main .section .list ul.body > li.empty { height: 120px; justify-content: center; color: var(--text-tertiary); } #wrap.download-center #container #main .section .list ul.body > li > div.name { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px 0; } #wrap.download-center #container #main .section .list ul.body > li > div.name > p { font-size: 14px; font-weight: 700; line-height: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #wrap.download-center #container #main .section .list ul.body > li > div.name > span { font-size: 10px; line-height: 11px; color: #6A6A6A; } /* 파일 타입 뱃지 38x20, radius 2 */ #wrap.download-center .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 20px; padding: 0 4px; border-radius: 2px; font-size: 10px; font-weight: 700; line-height: 14px; background: #E7EBF1; color: var(--text-secondary); } #wrap.download-center .badge.pdf { background: #FFDBDB; color: #B60000; } #wrap.download-center .badge.dwg, #wrap.download-center .badge.dxf { background: #C8ECD9; color: #00652F; } #wrap.download-center .badge.zip { background: #FFDDBD; color: #7D361E; } #wrap.download-center .badge.jpg, #wrap.download-center .badge.png { background: #E7EBF1; color: #344051; } #wrap.download-center .badge.stp, #wrap.download-center .badge.step, #wrap.download-center .badge.igs, #wrap.download-center .badge.iges { background: #DDF3E4; color: #0B5A2B; } /* 3D CAD */ #wrap.download-center .badge.mp4 { background: #E9E0FF; color: #4A2B9E; } /* 영상 */ #wrap.download-center .badge.docx, #wrap.download-center .badge.doc { background: #DCE8FF; color: #1D4ED8; } #wrap.download-center .badge.pptx, #wrap.download-center .badge.ppt { background: #FFE3D3; color: #B4460F; } /* Get 버튼 139x30, border #D0D0D0, radius 4 */ #wrap.download-center .button-get { display: inline-flex; align-items: center; justify-content: center; gap: 0 6px; width: 139px; height: 30px; border: 1px solid #D0D0D0; border-radius: 4px; background: #fff; font-size: 12px; font-weight: 700; color: #000; } #wrap.download-center .button-get:hover { border-color: var(--text-secondary); } #wrap.download-center .button-get.disabled { color: #A0A0A0; border-color: #E4E7EC; cursor: default; } #wrap.download-center .paging > li { padding: 26px 0; } @media (max-width: 768px) { #wrap.download-center #container { padding: 30px 0; } #wrap.download-center #container #main .page-title, #wrap.download-center #container #main .filters { margin: 0 28px; } #wrap.download-center #container #main .page-title > p { font-size: 28px; line-height: 32px; } #wrap.download-center #container #main .filters > label { flex: 1 1 100%; } #wrap.download-center #container #main .filters > label > select { flex: 1 1 auto; } #wrap.download-center #container #main .section .list-wrap { overflow-x: auto; padding: 0 28px; } #wrap.download-center #container #main .section .list { min-width: 1000px; } #wrap.download-center #container #main .section .paging { margin: 0 28px; } } /* ====================== Main 랜딩 (Figma 중저압차단기 > main 3002:57254) ====================== */ #wrap.portal-main { width: 100%; min-height: 100vh; display: flex; flex-direction: column; background: #F2F4F7; position: relative; } #wrap.portal-main .util { position: absolute; right: 28px; top: 24px; display: flex; align-items: center; gap: 0 20px; font-size: 12px; color: var(--text-secondary); } #wrap.portal-main .util > a { color: var(--HD_Discovery_Blue); font-weight: 700; } #wrap.portal-main #main { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 80px 0; padding: 60px 28px; } #wrap.portal-main .logo { display: flex; align-items: center; gap: 0 18px; } #wrap.portal-main .logo img { height: 51px; width: auto; } #wrap.portal-main .logo span { font-size: 46px; line-height: 51px; font-weight: 700; color: var(--HD_Discovery_Blue); padding-top: 4px; white-space: nowrap; } #wrap.portal-main .lines { display: flex; justify-content: center; gap: 0 clamp(24px, 3vw, 40px); width: 100%; max-width: 1300px; } /* 카드 3개(2026-10-11 Other Products)가 1280 에 들어가게 폭 유동 */ #wrap.portal-main .lines > li { flex: 1 1 0; max-width: 421px; min-width: 0; } #wrap.portal-main .lines > li > a { display: flex; flex-direction: column; align-items: center; gap: 50px 0; height: 400px; padding: 20px; background: #fff; border: 1px solid #CED2DA; border-radius: 10px; box-shadow: 0px 25px 60px -10px rgba(28, 39, 49, 0.12); transition: transform .15s ease, box-shadow .15s ease; } #wrap.portal-main .lines > li > a:hover { transform: translateY(-4px); box-shadow: 0px 30px 60px -10px rgba(28, 39, 49, 0.2); } #wrap.portal-main .lines > li > a > p.img { height: 192px; display: flex; align-items: center; justify-content: center; margin-top: 46px; } #wrap.portal-main .lines > li > a > p.img img { max-height: 192px; max-width: 100%; width: auto; height: auto; } #wrap.portal-main .lines > li > a > p.name { font-size: 24px; line-height: 26px; font-weight: 700; color: #000; text-align: center; } /* Other Products 카드 (2026-10-11 고객 요청): 같은 크기 카드 안에 본사 제품 페이지 링크 6개, 새 창(외부 링크 화살표) */ #wrap.portal-main .copyright { font-size: 10px; color: #6A6A6A; } /* Other Products 드롭다운 (2026-10-14 사용자 요청: 세 번째 카드 → 우측 하단 스타일드 셀렉트). 본사 제품 페이지 6개, 새 창 */ #wrap.portal-main .other-products { position: absolute; right: 28px; bottom: 28px; z-index: 5; } #wrap.portal-main .other-products .op-toggle { display: flex; align-items: center; gap: 0 10px; height: 48px; min-width: 232px; padding: 0 16px 0 18px; border: 1px solid #CED2DA; border-radius: 10px; background: #fff; box-shadow: 0 12px 30px -12px rgba(28, 39, 49, .25); font-family: inherit; font-size: 15px; font-weight: 700; color: var(--text-primary); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; } #wrap.portal-main .other-products .op-toggle > .ic { color: var(--HD_Discovery_Blue); flex: 0 0 auto; } #wrap.portal-main .other-products .op-toggle > span { flex: 1 1 auto; text-align: left; } #wrap.portal-main .other-products .op-toggle > .chev { flex: 0 0 auto; color: #637083; transition: transform .2s; } #wrap.portal-main .other-products .op-toggle:hover, #wrap.portal-main .other-products.open .op-toggle { border-color: var(--HD_Discovery_Blue); box-shadow: 0 16px 34px -12px rgba(0, 47, 135, .35); } #wrap.portal-main .other-products.open .op-toggle > .chev { transform: rotate(180deg); } #wrap.portal-main .other-products .op-menu { position: absolute; right: 0; bottom: calc(100% + 8px); min-width: 100%; width: max-content; max-width: min(320px, calc(100vw - 56px)); padding: 8px; margin: 0; list-style: none; background: #fff; border: 1px solid #CED2DA; border-radius: 10px; box-shadow: 0 20px 50px -14px rgba(28, 39, 49, .3); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; } #wrap.portal-main .other-products.open .op-menu { opacity: 1; visibility: visible; transform: none; } #wrap.portal-main .other-products .op-menu > li > a { display: flex; align-items: center; gap: 0 10px; height: 40px; padding: 0 12px; border-radius: 6px; font-size: 15px; font-weight: 500; color: var(--text-primary); white-space: nowrap; } #wrap.portal-main .other-products .op-menu > li > a::after { content: ''; width: 14px; height: 14px; margin-left: auto; flex: 0 0 auto; opacity: .5; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M8 2h4v4M12 2 6.5 7.5M10.5 8.5v3.5h-9V3h3.5' stroke='%23344051' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; } #wrap.portal-main .other-products .op-menu > li > a:hover, #wrap.portal-main .other-products .op-menu > li > a:focus-visible { background: #F2F4F7; color: var(--HD_Discovery_Blue); outline: none; } #wrap.portal-main .other-products .op-menu > li > a:hover::after { opacity: 1; } /* ====================== Products 카테고리 (Figma Products-category 3002:57544) ====================== */ #wrap.product-category #container { padding: 0; } #wrap.product-category #container #main { display: flex; flex-direction: column; align-items: center; gap: 50px 0; min-height: 829px; padding: 60px 28px; background: #F2F4F7; } #wrap.product-category #container #main .head { width: 100%; max-width: 1600px; display: flex; justify-content: space-between; align-items: flex-end; } #wrap.product-category #container #main .head .eyebrow { font-size: 20px; line-height: 22px; font-weight: 700; color: #393939; } #wrap.product-category #container #main .head h2 { margin-top: 8px; font-size: 40px; line-height: 44px; font-weight: 700; color: var(--HD_Discovery_Blue); } #wrap.product-category .categories { width: 100%; max-width: 1600px; display: flex; gap: 0 clamp(16px, 2vw, 40px); } /* 2026-09-29 고객 요청: 카드 확대(1400→1600)·간격 10→16~40 */ #wrap.product-category .categories > li { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #CED2DA; border-radius: 10px; box-shadow: 0px 25px 60px -10px rgba(28, 39, 49, 0.12); padding: 70px 16px 16px; height: clamp(500px, 30vw, 600px); } #wrap.product-category .categories > li > a.card { display: flex; flex-direction: column; align-items: center; gap: 20px 0; flex: 1 1 auto; } #wrap.product-category .categories > li > a.card > img.ul { position: absolute; right: 15px; top: 16px; width: 63px; height: 51px; } /* 42×34 → 1.5배 (2026-09-21) */ #wrap.product-category .categories > li > a.card > img.ul.recognized { width: 114px; height: 51px; } /* c RU us (255×114 원본) */ #wrap.product-category .categories > li > a.card > p.img { height: clamp(220px, 15.5vw, 310px); width: 100%; display: flex; align-items: center; justify-content: center; } #wrap.product-category .categories > li > a.card > p.img img { width: 100%; height: 100%; object-fit: contain; } /* 사진은 박스에 꽉 차게(투명 여백은 PNG 에서 잘라냄, 2026-09-29) */ #wrap.product-category .categories > li > a.card > div.name { display: flex; flex-direction: column; align-items: center; gap: 5px 0; text-align: center; } #wrap.product-category .categories > li > a.card > div.name > p { font-size: 30px; line-height: 33px; font-weight: 700; color: var(--HD_Discovery_Blue); } #wrap.product-category .categories > li > a.card > div.name > span { font-size: 15px; line-height: 17px; font-weight: 700; color: #000; } #wrap.product-category .categories > li > ul.series { display: flex; gap: 0 4px; width: 100%; margin-top: auto; } #wrap.product-category .categories > li > ul.series > li { flex: 1 1 0; min-width: 0; } #wrap.product-category .categories > li > ul.series > li > a { display: flex; align-items: center; justify-content: center; height: 61px; padding: 0 8px; border: 1px solid #CED2DA; border-radius: 4px; font-size: 16px; font-weight: 700; color: #344051; white-space: nowrap; } #wrap.product-category .categories > li > ul.series > li > a:hover { border-color: var(--HD_Discovery_Blue); color: var(--HD_Discovery_Blue); } /* ====================== 차단기 제품 목록 (Figma Products - List 3007:58602) — 타이틀 바·탭 ====================== */ #wrap.breaker-list #container { padding: 0; } /* 상단 바 — Figma "상단 디자인 제안" 4안(3099:6569): 130px, #1D54BA + 사진 30% hard-light(합성본 list-title-bg.jpg, 2400×195), 하단 보더, 탭 없음 */ #wrap.breaker-list .title-bar { width: 100%; height: 130px; background: #1D54BA url("../img/breaker/list-title-bg.jpg") center / cover no-repeat; border-bottom: 1px solid #E4E7EC; color: #fff; } #wrap.breaker-list .title-bar .inner { display: flex; align-items: center; justify-content: space-between; gap: 0 20px; height: 100%; padding: 0 30px; } #wrap.breaker-list .title-bar .title { display: flex; align-items: center; gap: 0 16px; min-width: 0; } #wrap.breaker-list .title-bar .title h2 { font-size: 53px; line-height: 58px; font-weight: 700; white-space: nowrap; } #wrap.breaker-list .title-bar .title > .name { display: flex; flex-direction: column; flex: 0 0 auto; } #wrap.breaker-list .title-bar .title:has(> .name > .sub) { align-items: flex-start; } /* 부제가 있으면 영문 이름을 큰 제목 줄에 맞춤 */ #wrap.breaker-list .title-bar .title:has(> .name > .sub) > span { padding-top: 21px; } #wrap.breaker-list .title-bar .title > .name > .sub { font-size: 30px; line-height: 34px; font-weight: 400; white-space: nowrap; } /* 2026-10-16 image-7: (HGC)·(DC 1500V SW) */ #wrap.breaker-list .title-bar .title > span { font-size: 18px; line-height: 20px; font-weight: 700; padding-top: 4px; } #wrap.breaker-list .title-bar .inner a.line { flex: 0 0 auto; font-size: 24px; line-height: 26px; font-weight: 700; color: #fff; white-space: nowrap; } #wrap.breaker-list .title-bar .title > a.line { margin-left: 24px; } /* 액세서리: 카테고리 카드 칩이 없어 시리즈 탭이 유일한 이동 수단 → 제목 바 오른쪽 칩 */ #wrap.breaker-list.accessories .title-bar .tabs { display: flex; flex: 0 0 auto; gap: 0 6px; } /* Accessories 개정(2026-09-29): 제목 + Product·Category 셀렉트 (Download Center 필터와 같은 모양), 목록 표는 breaker-list 규칙 재사용 */ #wrap.breaker-list.acc-simple #container #main { flex-flow: column nowrap; align-items: stretch; gap: 0; padding-top: 40px; } #wrap.breaker-list.acc-simple #container #main .result { width: 100%; min-width: 0; margin-top: 28px; } #wrap.breaker-list.acc-simple #container #main .result .list ul > li > div.main > .group { flex: 0 0 auto; width: clamp(150px, 14vw, 220px); font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 1.4; text-align: center; } /* 분류 열 (2026-09-30), 머리·본문 가운데 정렬 */ #wrap.breaker-list.acc-simple #container #main .result .list ul.head > li > div.main > .group { font-size: 13px; font-weight: 700; color: var(--text-primary); } #wrap.breaker-list.acc-simple #container #main .result .list ul.head > li > div.main { padding-left: 0; } /* 액세서리 표에는 ★ 열이 없어 머리행 들여쓰기(39px) 제거 → 머리·본문 열 정렬 */ #wrap.breaker-list.acc-simple .acc-head h2 { font-size: 32px; line-height: 36px; font-weight: 700; color: var(--text-primary); padding-bottom: 20px; } #wrap.breaker-list.acc-simple .acc-head .filters { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; min-height: 60px; padding: 10px 0; border-bottom: 1px solid #E4E7EC; } #wrap.breaker-list.acc-simple .acc-head .filters > label { display: flex; align-items: center; gap: 0 10px; font-size: 14px; font-weight: 700; color: var(--text-tertiary); line-height: 20px; } #wrap.breaker-list.acc-simple .acc-head .filters > label > select { min-width: 200px; height: 40px; padding: 0 36px 0 12px; border: 1px solid #D0D0D0; border-radius: 4px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' stroke='%23344051' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center; font-size: 14px; font-weight: 700; color: var(--text-primary); -webkit-appearance: none; appearance: none; cursor: pointer; } #wrap.breaker-list.acc-simple .acc-head .filters > label > select:focus { outline: none; border-color: var(--HD_Discovery_Blue); } #wrap.breaker-list.acc-simple .acc-head .filters > .reset { font-size: 12px; color: var(--HD_Discovery_Blue); text-decoration: underline; } #wrap.breaker-list.accessories .title-bar .tabs > li > a { display: flex; align-items: center; justify-content: center; min-width: 56px; height: 36px; padding: 0 10px; border-radius: 6px; background: rgba(0, 20, 60, 0.55); color: #fff; font-size: 14px; font-weight: 700; } #wrap.breaker-list.accessories .title-bar .tabs > li.on > a { background: #fff; color: var(--HD_Discovery_Blue); } #wrap.breaker-list #main { padding: 40px 30px; } #wrap.breaker-list #main .desc { font-size: 12px; line-height: 1.6; color: var(--text-secondary); } @media (max-width: 768px) { #wrap.portal-main .util { right: 20px; top: 16px; } #wrap.portal-main #main { gap: 40px 0; padding: 80px 20px 40px; } #wrap.portal-main .logo img { height: 32px; } #wrap.portal-main .logo span { font-size: 28px; line-height: 32px; } #wrap.portal-main .lines { flex-direction: column; align-items: center; gap: 20px 0; } #wrap.portal-main .lines > li { flex: 0 0 auto; width: min(421px, 100%); } #wrap.portal-main .lines > li > a { height: auto; gap: 24px 0; } #wrap.portal-main .lines > li > a > p.img { margin-top: 0; height: auto; } #wrap.portal-main .lines > li > a > p.img img { max-width: 100%; max-height: 160px; } #wrap.portal-main .other-products { position: relative; right: auto; bottom: auto; width: min(421px, 100%); margin: -12px auto 0; } /* 카드 아래 가운데(데스크톱의 right/bottom 해제), 메뉴는 아래로 */ #wrap.portal-main .other-products .op-toggle { width: 100%; } #wrap.portal-main .other-products .op-menu { position: absolute; left: 0; right: 0; bottom: auto; top: calc(100% + 8px); width: auto; max-width: none; transform: translateY(-6px); } #wrap.product-category #container #main { min-height: 0; padding: 30px 20px; gap: 30px 0; } #wrap.product-category #container #main .head { flex-direction: column; align-items: flex-start; gap: 16px 0; } #wrap.product-category #container #main .head h2 { font-size: 28px; line-height: 32px; } #wrap.product-category .categories { flex-wrap: wrap; gap: 10px; } #wrap.product-category .categories > li { flex: 1 1 calc(50% - 5px); min-width: 240px; height: auto; } #wrap.breaker-list .title-bar { height: auto; } #wrap.breaker-list .title-bar .inner { flex-wrap: wrap; gap: 8px 12px; padding: 24px 20px; } #wrap.breaker-list .title-bar .title { flex-wrap: wrap; gap: 4px 12px; } #wrap.breaker-list .title-bar .title h2 { font-size: 32px; line-height: 36px; } #wrap.breaker-list .title-bar .title > .name > .sub { font-size: 20px; line-height: 24px; } #wrap.breaker-list .title-bar .inner a.line { width: 100%; margin-left: 0; font-size: 16px; line-height: 20px; } #wrap.breaker-list.accessories .title-bar .tabs { width: 100%; overflow-x: auto; } #wrap.breaker-list #main { padding: 30px 20px; } } /* ====================== Accessories 자리 페이지 (배너 = product.list 스타일 + 차단기 이미지) ====================== */ #wrap.product.list.accessories .banner > div > p:nth-of-type(1) { width: 253px; display: flex; align-items: center; } /* 746x384 이미지 → 253x130 */ #wrap.product.list.accessories #container { display: block; padding: 40px 28px; } #wrap.product.list.accessories #container #main { display: block; } #wrap.product.list.accessories #container #main .desc { margin-top: 20px; font-size: 12px; line-height: 1.6; color: var(--text-secondary); } #wrap.product.list.accessories #container #main .desc a { color: var(--HD_Discovery_Blue); font-weight: 700; } @media (max-width: 768px) { #wrap.product.list.accessories .banner > div > p:nth-of-type(1) { width: 260px; height: auto; } #wrap.product.list.accessories #container { padding: 30px 28px; } } /* ====================== 차단기 제품 목록 본문 (Figma Products - List 3007:58602: Filter 304 + 32 + Result 1206) ====================== */ #wrap.breaker-list #container #main { display: flex; flex-flow: row nowrap; align-items: flex-start; gap: 0 32px; padding: 28px 30px 40px; } #wrap.breaker-list #container #main .filter { width: 304px; flex: 0 0 auto; position: sticky; top: 0; align-self: flex-start; max-height: 100vh; overflow-y: auto; padding-right: 4px; } /* 틀고정: 필터 패널은 화면에 붙고 항목이 화면보다 길면 패널 안에서 스크롤 (2026-09-21) */ #wrap.breaker-list #container #main .filter .sub-title { display: flex; justify-content: space-between; align-items: center; height: 30px; position: sticky; top: 0; z-index: 5; background: #fff; box-shadow: 0 8px 8px -8px rgba(0,0,0,.08); padding-bottom: 8px; box-sizing: content-box; } /* 틀고정 (2026-09-21) */ #wrap.breaker-list #container #main .filter .sub-title > p { flex: 0 0 auto; font-size: 20px; line-height: 22px; font-weight: 700; color: #000; } #wrap.breaker-list #container #main .filter .button-reset { flex: 0 0 auto; width: auto; display: inline-flex; align-items: center; gap: 0 4px; height: 30px; padding: 0 10px; border: 1px solid #CED2DA; border-radius: 4px; font-size: 12px; color: var(--text-secondary); background: #fff; } #wrap.breaker-list #container #main .filter .selects { margin-top: 20px; display: flex; flex-direction: column; gap: 20px 0; } #wrap.breaker-list #container #main .filter .selects > li > label { display: flex; align-items: center; gap: 0 10px; height: 26px; padding: 0 10px; border-radius: 4px; background: #DDE3EC; } /* 2026-09-21 사용자 요청: 항목명 음영, 2026-09-29 더 진하게 */ #wrap.breaker-list #container #main .filter .selects > li > label > span { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--text-primary); } #wrap.breaker-list #container #main .filter .selects > li > label > em { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 18px; padding: 0 6px; border: 1px solid #C3D0EA; border-radius: 100px; font-size: 10px; font-style: normal; color: var(--text-primary); } #wrap.breaker-list #container #main .filter .selects > li > .select-wrap { margin-top: 10px; } /* Support (2026-09-23): 좌측 기술문의 폼 + 우측 동영상 (Download Center MP4) */ #wrap.support #container #main .page-title > p, #wrap.quotes #container #main .page-title > p { font-size: 32px; line-height: 36px; } /* 2026-09-30 제목 32px 통일 (Accessories·Download Center 도 32) */ #wrap.support #container #main .support-grid { display: flex; align-items: flex-start; gap: 0 48px; } #wrap.support #container #main .support-grid > .inquiry { flex: 1 1 auto; min-width: 0; } #wrap.support #container #main .support-grid > .videos { flex: 0 0 auto; width: clamp(420px, 36vw, 560px); position: sticky; top: 24px; } #wrap.support #container #main .support-grid h2 { font-size: 20px; line-height: 24px; font-weight: 700; color: var(--text-primary); } #wrap.support #container #main .support-grid .lead { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); } #wrap.support #container #main .inquiry form { margin-top: 16px; padding: 24px 28px; border: 1px solid #E4E7EC; border-radius: 10px; background: #fff; } #wrap.support #container #main .inquiry form .types { display: flex; gap: 0 48px; margin-bottom: 18px; } #wrap.support #container #main .inquiry form .types > label { display: flex; align-items: center; gap: 0 10px; font-size: 16px; font-weight: 700; color: var(--text-primary); cursor: pointer; } #wrap.support #container #main .inquiry form .types > label > input { width: 20px; height: 20px; margin: 0; accent-color: var(--HD_Discovery_Blue); } #wrap.support #container #main .inquiry form > ul > li > select.hd-input { padding-right: 36px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' stroke='%23344051' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center; -webkit-appearance: none; appearance: none; cursor: pointer; } #wrap.support #container #main .inquiry form .file-row { display: flex; gap: 0 10px; } #wrap.support #container #main .inquiry form .file-row > .hd-input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid #D0D0D0; border-radius: 4px; background: #F9FAFB; font-size: 13px; } #wrap.support #container #main .inquiry form .file-row > .button-file { flex: 0 0 auto; display: flex; align-items: center; height: 40px; padding: 0 18px; border: 1px solid #CED2DA; border-radius: 4px; background: #fff; font-size: 13px; font-weight: 700; color: var(--text-primary); cursor: pointer; } #wrap.support #container #main .inquiry form .file-row > .button-file:hover { border-color: var(--HD_Discovery_Blue); color: var(--HD_Discovery_Blue); } #wrap.support #container #main .inquiry form > ul > li > .hint { font-size: 11px; color: var(--text-tertiary); } #wrap.support #container #main .inquiry form > ul { display: flex; flex-wrap: wrap; gap: 16px 20px; } #wrap.support #container #main .inquiry form > ul > li { flex: 1 1 100%; display: flex; flex-direction: column; gap: 6px 0; } #wrap.support #container #main .inquiry form > ul > li.half { flex: 1 1 calc(50% - 10px); } #wrap.support #container #main .inquiry form > ul > li > label { font-size: 12px; font-weight: 700; color: var(--text-primary); } #wrap.support #container #main .inquiry form > ul > li > label > em { color: #C93A25; font-style: normal; } #wrap.support #container #main .inquiry form > ul > li > .hd-input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #D0D0D0; border-radius: 4px; font-size: 14px; color: var(--text-primary); } #wrap.support #container #main .inquiry form > ul > li > textarea.hd-input { height: auto; min-height: 160px; padding: 10px 12px; line-height: 1.6; resize: vertical; } #wrap.support #container #main .inquiry form > ul > li > .hd-input:focus { outline: none; border-color: var(--HD_Discovery_Blue); } #wrap.support #container #main .inquiry form .actions { margin-top: 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; } #wrap.support #container #main .inquiry form .button-send { height: 42px; padding: 0 26px; border: 0; border-radius: 4px; background: var(--HD_Discovery_Blue); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; } #wrap.support #container #main .inquiry form .button-send:hover { background: #163f8f; } #wrap.support #container #main .inquiry form .button-send:disabled { opacity: .6; cursor: default; } #wrap.support #container #main .support-grid .hint { font-size: 12px; color: var(--text-secondary); } #wrap.support #container #main .support-grid .hint a { color: var(--HD_Discovery_Blue); font-weight: 700; } #wrap.support #container #main .videos .player { margin-top: 16px; border-radius: 10px; overflow: hidden; background: #000; } #wrap.support #container #main .videos .player video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; } #wrap.support #container #main .videos .player .now { padding: 10px 14px; background: #141C24; color: #fff; font-size: 13px; font-weight: 700; } #wrap.support #container #main .videos .playlist { margin-top: 12px; border: 1px solid #E4E7EC; border-radius: 10px; overflow: hidden; } #wrap.support #container #main .videos .playlist > li + li { border-top: 1px solid #E4E7EC; } #wrap.support #container #main .videos .playlist > li > a { display: flex; align-items: center; gap: 0 12px; padding: 12px 14px; font-size: 13px; color: var(--text-primary); } #wrap.support #container #main .videos .playlist > li > a:hover { background: #F4F6FA; } #wrap.support #container #main .videos .playlist > li.on > a { background: #EEF3FF; color: var(--HD_Discovery_Blue); } #wrap.support #container #main .videos .playlist .idx { flex: 0 0 24px; height: 24px; border-radius: 50%; background: #E7EBF1; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; } #wrap.support #container #main .videos .playlist > li.on .idx { background: var(--HD_Discovery_Blue); color: #fff; } #wrap.support #container #main .videos .playlist .t { flex: 1 1 auto; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #wrap.support #container #main .videos .playlist .t > small { display: block; font-size: 11px; font-weight: 400; color: var(--text-tertiary); } #wrap.support #container #main .videos .playlist .sz { flex: 0 0 auto; font-size: 11px; color: var(--text-tertiary); } #wrap.support #container #main .videos > .hint { margin-top: 10px; } @media (max-width: 768px) { #wrap.support #container #main .support-grid { flex-direction: column; gap: 32px 0; } #wrap.support #container #main .support-grid > .videos { width: 100%; position: static; } } /* 코드 검색창 (목록 좌측 필터 상단 · 카테고리 페이지 우측 · 검색 결과 페이지) */ .code-search { display: flex; align-items: center; gap: 0 8px; } .code-search > label { display: block; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--text-primary); } .code-search .input-wrap { position: relative; flex: 1 1 auto; min-width: 0; } .code-search .input-wrap > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #7A8290; pointer-events: none; } .code-search .input-wrap > input { width: 100%; height: 40px; padding: 0 32px 0 36px; border: 1px solid #D0D0D0; border-radius: 4px; font-size: 14px; color: var(--text-primary); background: #fff; } .code-search .input-wrap > input::placeholder { color: #A0A0A0; } .code-search .input-wrap > input:focus { outline: none; border-color: var(--HD_Discovery_Blue); } .code-search .input-wrap > input::-webkit-search-cancel-button { display: none; } .code-search .input-wrap > a.clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #7A8290; font-size: 18px; line-height: 1; } .code-search .input-wrap > a.clear:hover { background: #F2F4F7; color: var(--text-primary); } .code-search .button-search { flex: 0 0 auto; height: 40px; padding: 0 18px; border: 0; border-radius: 4px; background: var(--HD_Discovery_Blue); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; } #wrap.product-category #container #main .head .code-search { width: 420px; max-width: 100%; } #wrap.breaker-list #container #main .result .page-title .code-search { width: 260px; flex: 0 0 auto; margin-left: auto; } /* 결과 제목 줄 가운데: 필터로 조립된 코드(굵게) + 스펙 설명(회색 작게) (2026-09-23) */ #wrap.breaker-list #container #main .result .page-title .title { flex: 0 0 auto; } #wrap.breaker-list #container #main .result .page-title .sel-code { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px 0; margin: 0 24px 0 32px; padding: 6px 20px; border: 1px solid #CED2DA; border-radius: 6px; background: #fff; } /* 2026-09-29 고객 요청: 구분선 → 박스, 검색창과 24px 간격 */ #wrap.breaker-list #container #main .result .page-title .sel-code > strong { font-size: 22px; line-height: 26px; font-weight: 700; color: var(--HD_Discovery_Blue); font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #wrap.breaker-list #container #main .result .page-title .sel-code > span { height: 32px; font-size: 12px; line-height: 16px; color: #6A6A6A; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* 2026-10-13 고객 요청(image-6): 설명 길이와 무관하게 박스 높이 고정 — 설명 칸은 항상 2줄(32px), 넘치면 말줄임 + title 툴팁 */ #wrap.breaker-list #container #main .result .page-title .code-search .input-wrap > input { padding-right: 28px; } #wrap.breaker-list #container #main .result .page-title .code-search .input-wrap > input { height: 36px; } #wrap.breaker-list #container #main .result .page-title .code-search .button-search { height: 36px; padding: 0 14px; } /* 검색어가 다른 시리즈에도 걸릴 때 안내 칩 */ #wrap.breaker-list #container #main .result .other-series { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; margin: -10px 0 16px; font-size: 12px; color: var(--text-secondary); } #wrap.breaker-list #container #main .result .other-series > a { display: inline-flex; align-items: center; gap: 0 6px; height: 28px; padding: 0 10px; border: 1px solid #CED2DA; border-radius: 14px; font-size: 12px; font-weight: 700; color: var(--text-primary); background: #fff; } #wrap.breaker-list #container #main .result .other-series > a > em { font-style: normal; font-weight: 400; color: var(--HD_Discovery_Blue); } #wrap.breaker-list #container #main .result .other-series > a:hover { border-color: var(--HD_Discovery_Blue); color: var(--HD_Discovery_Blue); } /* 통합 검색 결과 페이지 (시리즈별 그룹, Box 열 없음) */ #wrap.breaker-search #container #main { display: block; } #wrap.breaker-search #container #main .result { width: 100%; } #wrap.breaker-search #container #main .result .page-title { flex-wrap: wrap; gap: 12px 24px; } #wrap.breaker-search #container #main .result .group { margin-top: 30px; } #wrap.breaker-search #container #main .result .group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0 16px; margin-bottom: 10px; } #wrap.breaker-search #container #main .result .group-head > p { display: flex; align-items: baseline; gap: 0 10px; } #wrap.breaker-search #container #main .result .group-head > p > a { font-size: 20px; line-height: 22px; font-weight: 700; color: var(--HD_Discovery_Blue); } #wrap.breaker-search #container #main .result .group-head > p > span { font-size: 12px; color: var(--text-secondary); } #wrap.breaker-search #container #main .result .group-head > .view-all { font-size: 12px; font-weight: 700; color: var(--text-primary); white-space: nowrap; } #wrap.breaker-search #container #main .result .group-head > .view-all > em { font-style: normal; color: var(--HD_Discovery_Blue); } #wrap.breaker-search #container #main .result .group-head > .view-all:hover { color: var(--HD_Discovery_Blue); } #wrap.breaker-search #container #main .result .list ul > li > div.nums > .price { width: 120px; justify-content: flex-end; gap: 0 8px; } #wrap.breaker-search #container #main .result .list ul > li > div.nums > .price > span { width: auto; } #wrap.breaker-search #container #main .result .list ul > li > div.nums > .price > .tag-inquire { font-style: normal; font-size: 10px; font-weight: 700; color: #7A8290; border: 1px solid #CED2DA; border-radius: 3px; padding: 1px 5px; } #wrap.breaker-search #container #main .result .list ul.body > li > div.main > .code > a { font-size: 13px; font-weight: 700; color: var(--HD_Discovery_Blue); line-height: 14px; overflow-wrap: anywhere; } #wrap.breaker-search #container #main .result .list ul.body > li.more > div { width: 100%; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } #wrap.breaker-search #container #main .result .list ul.body > li.more > div > a { color: var(--HD_Discovery_Blue); } #wrap.breaker-search #container #main .result .list ul.body > li.empty > div { padding: 40px 20px; font-size: 14px; color: var(--text-secondary); } @media (max-width: 768px) { #wrap.product-category #container #main .head .code-search { width: 100%; } #wrap.breaker-list #container #main .result .page-title .code-search { width: 100%; } #wrap.breaker-search #container #main .result .group-head { flex-wrap: wrap; gap: 6px 16px; } } #wrap.breaker-list #container #main .filter .selects > li select { width: 100%; height: 36px; padding: 0 36px 0 12px; border: 1px solid #97A1AF; border-radius: 6px; font-size: 12px; color: var(--text-primary); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 7.5l6 6 6-6' stroke='%23637083' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") calc(100% - 8px) center no-repeat #fff; appearance: none; -webkit-appearance: none; outline: none; } #wrap.breaker-list #container #main .filter .selects > li select:focus { border-color: var(--HD_Discovery_Blue); } #wrap.breaker-list #container #main .result { flex: 1 1 auto; min-width: 0; } #wrap.breaker-list #container #main .result .page-title { display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding-bottom: 20px; position: sticky; top: 0; z-index: 5; background: #fff; box-shadow: 0 8px 8px -8px rgba(0,0,0,.08); } /* 틀고정 (2026-09-21) */ /* 높이 고정(50) 이면 36px 검색창이 위로 넘쳐 1600 미만(.result overflow-x:auto)에서 윗 테두리가 잘림 */ #wrap.breaker-list #container #main .result .page-title .title { display: flex; align-items: center; gap: 0 16px; } #wrap.breaker-list #container #main .result .page-title .title > p { font-size: 20px; line-height: 22px; font-weight: 700; } #wrap.breaker-list #container #main .result .page-title .title > span { font-size: 12px; font-weight: 700; color: var(--text-secondary); } #wrap.breaker-list #container #main .result .page-title .title > span > em { font-style: normal; color: var(--HD_Discovery_Blue); } /* 2026-10-11: 첫 글자만 녹색(::first-letter)이던 문제 → 숫자 전체를 em 으로 감싸고 브랜드 네이비로 (녹색은 저압전동기 잔재) */ #wrap.breaker-list #container #main .result .notice-group { display: flex; align-items: center; gap: 0 10px; font-size: 12px; color: var(--text-secondary); } #wrap.breaker-list #container #main .result .notice-group > button { width: 20px; height: 20px; border: 0; padding: 0; cursor: pointer; display: flex; } #wrap.breaker-list #container #main .result .list { border: 1px solid #E4E7EC; border-radius: 10px; overflow: hidden; } /* 행 구조 (Figma List 3029:60935, 1206×64): [★ · CODE(100) · Description(grow)] gap20 [Stock(117) gap30 UnitPrice(102)+Add(78) gap30 BoxQty(42) gap30 BoxPrice(102)+Add(78)] */ #wrap.breaker-list #container #main .result .list ul > li { display: flex; align-items: center; gap: 0 20px; padding: 0 30px 0 20px; } #wrap.breaker-list #container #main .result .list ul > li > div { flex: 0 0 auto; display: flex; align-items: center; font-size: 12px; } #wrap.breaker-list #container #main .result .list ul > li > div.main { flex: 1 1 auto; min-width: 0; gap: 0 20px; } #wrap.breaker-list #container #main .result .list ul > li > div.main > .code { flex: 0 0 auto; width: 150px; /* Figma 100px — 실데이터 코드(HGU125E 1PT4LL0000 C00015)가 길어 150 으로 확장 */ display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px 0; } #wrap.breaker-list #container #main .result .list ul > li > div.main > .desc { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px 0; } #wrap.breaker-list #container #main .result .list ul > li > div.nums { display: flex; align-items: center; justify-content: flex-end; gap: 0 30px; } #wrap.breaker-list #container #main .result .list ul > li > div.nums > .stock { width: 117px; } #wrap.breaker-list #container #main .result .list ul > li > div.nums > .qty { width: 42px; } #wrap.breaker-list #container #main .result .list ul > li > div.nums > .price { display: flex; align-items: center; gap: 0 10px; width: 190px; } #wrap.breaker-list #container #main .result .list ul > li > div.nums > .price > span { display: block; width: 102px; } #wrap.breaker-list #container #main .result .list ul > li > div.nums > .stock, #wrap.breaker-list #container #main .result .list ul > li > div.nums > .qty, #wrap.breaker-list #container #main .result .list ul > li > div.nums > .price > span { text-align: right; white-space: nowrap; } /* Technical Data 열 (제안 4안): 헤더 83px 중앙, 본문 52×30 회색 다운로드 버튼 — 문서 그룹이 있는 코드만 */ #wrap.breaker-list #container #main .result .list ul > li > div.nums > .tech { width: 83px; justify-content: center; white-space: nowrap; } #wrap.breaker-list #container #main .result .list ul > li > div.nums > .tech > .cell-blank { display: block; width: 52px; height: 30px; } #wrap.breaker-list .button-doc { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 30px; border-radius: 4px; background: #637083; } #wrap.breaker-list .button-doc:hover { background: #4A5563; } #wrap.breaker-list #container #main .result .list ul.head { background: #DDE3EC; } /* 2026-09-29 고객 요청: 본문 대비 진하게 */ #wrap.breaker-list #container #main .result .list ul.head > li { height: 50px; color: #393939; } #wrap.breaker-list #container #main .result .list ul.head > li > div, #wrap.breaker-list #container #main .result .list ul.head > li > div > div, #wrap.breaker-list #container #main .result .list ul.head > li > div > div > span { font-size: 13px; font-weight: 700; color: var(--text-primary); } /* 2026-09-30 사용자 요청: 제품·액세서리 표 머리행 12→13px 굵게 (가독성) */ #wrap.breaker-list #container #main .result .list ul.head > li > div.main { padding-left: 39px; } /* ★(24)+gap(20) 만큼 들여쓰기 → CODE 라벨이 코드와 정렬 */ #wrap.breaker-list #container #main .result .list ul.head > li > div.main > .code { width: 154px; } #wrap.breaker-list #container #main .result .list ul.head > li > div.nums > .stock, #wrap.breaker-list #container #main .result .list ul.head > li > div.nums > .qty { text-align: center; } #wrap.breaker-list #container #main .result .list ul.head > li > div.nums > .price { justify-content: center; } #wrap.breaker-list #container #main .result .list ul.head > li > div.nums > .price > span { width: auto; } #wrap.breaker-list #container #main .result .list ul.body > li { min-height: 64px; padding-top: 16px; padding-bottom: 16px; border-top: 1px solid #E4E7EC; } #wrap.breaker-list #container #main .result .list ul.body > li.empty { height: 120px; justify-content: center; color: var(--text-tertiary); } #wrap.breaker-list #container #main .result .list ul.body > li > div.main > .code > a { font-size: 13px; font-weight: 700; color: var(--HD_Discovery_Blue); line-height: 14px; overflow-wrap: anywhere; } #wrap.breaker-list #container #main .result .list ul.body > li > div.main > .code > span { max-width: 100%; font-size: 10px; line-height: 11px; color: #6A6A6A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #wrap.breaker-list #container #main .result .list ul.body > li > div.main > .desc > a { font-size: 12px; font-weight: 400; color: #393939; line-height: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: normal; overflow-wrap: anywhere; } /* 스펙 요약만 표시 — 이전 스펙 보조선(.desc > span) 톤: 400 / #393939, 13→12px, 단어 단위 줄바꿈 */ #wrap.breaker-list #container #main .result .list ul.body > li > div.main > .desc > span { font-size: 10px; line-height: 11px; color: #393939; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 제품 목록 아래 액세서리 (2026-09-23): 좌측 Accessories 필터 소제목 + 하단 목록. 하단 목록(.acc-list)은 Description 열을 보이고 코드 열은 기본 폭 */ #wrap.breaker-list #container #main .filter .sub-title.acc { margin-top: 28px; position: static; box-shadow: none; padding-top: 12px; border-top: 1px solid #E4E7EC; } #wrap.breaker-list #container #main .filter .sub-title.acc > p { font-size: 16px; line-height: 20px; } #wrap.breaker-list #container #main .result .acc-section { margin-top: 36px; } #wrap.breaker-list #container #main .result .acc-section .page-title { position: static; box-shadow: none; min-height: 0; padding-bottom: 14px; align-items: baseline; } #wrap.breaker-list #container #main .result .acc-section .page-title .hint { font-size: 12px; color: var(--text-secondary); } #wrap.breaker-list #container #main .result .list.acc-list ul > li > div.main { flex: 1 1 auto; min-width: 0; } #wrap.breaker-list #container #main .result .list.acc-list ul > li > div.main > .code { width: 150px; flex: 0 0 auto; } #wrap.breaker-list #container #main .result .list.acc-list ul > li > div.main > .code > span { display: block; } #wrap.breaker-list #container #main .result .list.acc-list ul > li > div.main > .desc { display: flex; } #wrap.breaker-list #container #main .result .list.acc-list ul > li > div.nums { flex: 0 0 auto; justify-content: flex-end; gap: 0 30px; padding-left: 0; } #wrap.breaker-list #container #main .result .list.acc-list ul.body > li.empty { height: 80px; } /* 2026-09-23 사용자 요청: 차단기 제품 목록에서 코드 아래 제품 구분(시리즈명)과 Description 열 숨김 — 액세서리 목록·통합 검색은 유지 */ #wrap.breaker-list:not(.accessories):not(.breaker-search) #container #main .result .list:not(.acc-list) ul > li > div.main > .code > span { display: none; } #wrap.breaker-list:not(.accessories):not(.breaker-search) #container #main .result .list:not(.acc-list) ul > li > div.main > .desc { display: none; } /* Description 이 빠진 뒤 열 간격 재배치: 코드 열은 고정 폭, 숫자 열들은 남는 폭에 고르게 (2026-09-23) */ #wrap.breaker-list:not(.accessories):not(.breaker-search) #container #main .result .list:not(.acc-list) ul > li > div.main { flex: 0 0 auto; } #wrap.breaker-list:not(.accessories):not(.breaker-search) #container #main .result .list:not(.acc-list) ul > li > div.main > .code { width: clamp(200px, 20vw - 56px, 320px); flex: 0 0 auto; min-width: 0; } /* 1280: 200 · 1600: 264 · 1880+: 320 */ #wrap.breaker-list:not(.accessories):not(.breaker-search) #container #main .result .list:not(.acc-list) ul > li > div.nums { flex: 1 1 auto; justify-content: space-between; gap: 0 clamp(12px, 2vw - 10px, 40px); padding-left: clamp(0px, 2vw - 20px, 40px); } #wrap.breaker-list:not(.accessories):not(.breaker-search) #container #main .result .list:not(.acc-list) ul.body > li > div.main > .code > a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 숫자 컬럼: IBM Plex Mono (Stock 500 · Unit/Box Price 700 · Box Qty 400) */ #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > .stock, #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > .qty, #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > .price > span { font-family: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 13px; line-height: 17px; color: var(--text-primary); } #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > .stock { font-weight: 500; } #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > .stock > .stock-detail { display: inline-flex; margin-left: 4px; vertical-align: -2px; } /* 재고 있는 행: 개별 재고 팝업 아이콘 (2026-10-05) */ #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > .qty { font-weight: 400; } #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > .price > span { font-weight: 700; } #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > .price > .button-add.blank { visibility: hidden; } /* Box 가격 없는 시리즈(HGL·UVC): 자리만 유지 */ /* 1280~1599(디자인 원안 1600 미만): 숫자 열을 줄여 Description 폭 확보, 그래도 모자라면 표만 가로 스크롤 (min-width 1000) */ @media (min-width: 769px) and (max-width: 1599px) { #wrap.breaker-list #container #main { gap: 0 24px; } #wrap.breaker-list #container #main .filter { width: 260px; } #wrap.breaker-list #container #main .result { min-width: 0; } #wrap.breaker-list:not(.accessories) #container #main .result .list { overflow-x: auto; } /* 표만 가로 스크롤 — .result 에 overflow 를 주면 틀고정(sticky)이 풀림. Description 열을 숨긴 뒤(2026-09-23)로는 1280 에서도 스크롤 없이 들어감 */ #wrap.breaker-list #container #main .result .list ul > li { gap: 0 16px; padding: 0 20px 0 16px; } #wrap.breaker-list #container #main .result .list ul > li > div.main { gap: 0 12px; } #wrap.breaker-list #container #main .result .list ul > li > div.main > .code { width: 130px; } #wrap.breaker-list #container #main .result .list ul.head > li > div.main > .code { width: 134px; } #wrap.breaker-list #container #main .result .list ul > li > div.nums { gap: 0 16px; } #wrap.breaker-list #container #main .result .list ul > li > div.nums > .stock { width: 80px; } #wrap.breaker-list #container #main .result .list ul > li > div.nums > .price { width: 160px; } #wrap.breaker-list #container #main .result .list ul > li > div.nums > .price > span { width: 78px; } #wrap.breaker-list #container #main .result .list ul > li > div.nums > .tech { width: 76px; } /* 머리행 'Tech. Data'(13px 굵게) 가 들어가는 폭 — 2026-09-30 가로 스크롤 방지 */ } #wrap.breaker-list .star { width: 24px; height: 24px; flex: 0 0 auto; padding: 2px; border: 0; background: none; cursor: pointer; display: flex; } #wrap.breaker-list .star svg { width: 100%; height: 100%; } #wrap.breaker-list .star svg path { fill: #E4E7EC; stroke: #CED2DA; } #wrap.breaker-list .star.on svg path { fill: #F5A300; stroke: #F5A300; } #wrap.breaker-list .button-add, #wrap.breaker-list .button-inquire { display: inline-flex; align-items: center; justify-content: center; gap: 0 6px; height: 30px; padding: 0 16px; border-radius: 4px; font-size: 10px; font-weight: 700; white-space: nowrap; } #wrap.breaker-list .button-add { background: var(--HD_Discovery_Blue); color: #fff; } #wrap.breaker-list .button-add:hover { background: #00256B; } #wrap.breaker-list .button-add.box { background: #00823D; } /* Box Price 옆 Add (Figma #00823D) */ #wrap.breaker-list .button-add.box:hover { background: #006A32; } #wrap.breaker-list .button-inquire { background: #E7EBF1; color: #333447; } #wrap.breaker-list .button-inquire:hover { background: #D9DFE9; } #wrap.breaker-list .button-add.cell, #wrap.breaker-list .button-inquire.cell { width: 78px; flex: 0 0 auto; padding: 0; } /* 문의 전용 행(가격 없음/재고 0): 전체 회색, 숫자·Add 숨기고 우측 끝 Inquire(78) 만 */ #wrap.breaker-list #container #main .result .list ul.body > li.sold-out > div.main > .code > a, #wrap.breaker-list #container #main .result .list ul.body > li.sold-out > div.main > .code > span, #wrap.breaker-list #container #main .result .list ul.body > li.sold-out > div.main > .desc > a, #wrap.breaker-list #container #main .result .list ul.body > li.sold-out > div.main > .desc > span { color: #A0A0A0; } #wrap.breaker-list #container #main .result .list ul.body > li.sold-out .star svg path { fill: #E4E7EC; stroke: #E4E7EC; } /* ---------- Products View 모달 (Figma 3029:64808, 우측 1035px 패널 + 좌측 X 90px) ---------- */ #wrap.breaker-list .product-view { position: fixed; inset: 0; z-index: 100; display: none; } #wrap.breaker-list .product-view.open { display: block; } #wrap.breaker-list .product-view .dim { position: absolute; inset: 0; background: rgba(20, 28, 36, 0.45); } #wrap.breaker-list .product-view .panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(1035px, calc(100% - 90px)); background: #fff; overflow-y: auto; box-shadow: -20px 0 60px rgba(28, 39, 49, 0.2); } #wrap.breaker-list .product-view .close { position: absolute; right: min(1035px, calc(100% - 90px)); top: 0; z-index: 1; width: 90px; height: 90px; border: 0; padding: 15px; background: #637083; cursor: pointer; display: flex; } #wrap.breaker-list .product-view .head { display: flex; align-items: center; gap: 0 40px; padding: 30px; } #wrap.breaker-list .product-view .head > p.img { width: 220px; height: 210px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; } #wrap.breaker-list .product-view .head > p.img img { max-width: 100%; max-height: 100%; } #wrap.breaker-list .product-view .head > .info { flex: 1 1 auto; min-width: 0; } #wrap.breaker-list .product-view .head .breadcrumb { display: flex; align-items: center; gap: 0 6px; font-size: 15px; font-weight: 700; } #wrap.breaker-list .product-view .head .breadcrumb > a { color: var(--text-primary); } #wrap.breaker-list .product-view .head .breadcrumb > i { width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M5.5 3l4 4.5-4 4.5' stroke='%23637083' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; } #wrap.breaker-list .product-view .head .name { display: flex; align-items: center; gap: 0 10px; margin-top: 12px; } #wrap.breaker-list .product-view .head .name > h3 { font-size: 28px; line-height: 31px; font-weight: 700; color: var(--HD_Discovery_Blue); } #wrap.breaker-list .product-view .head .name > .star { width: 30px; height: 30px; flex: 0 0 auto; } #wrap.breaker-list .product-view .head .name > h3 { min-width: 0; word-break: break-all; } #wrap.breaker-list .product-view .head hr { margin: 22px 0; border: 0; border-top: 1px solid #D0D0D0; } #wrap.breaker-list .product-view .head .prices { display: flex; gap: 0 36px; } #wrap.breaker-list .product-view .head .prices > li { display: flex; flex-direction: column; gap: 7px 0; } #wrap.breaker-list .product-view .head .prices > li > span { font-size: 12px; line-height: 16px; } #wrap.breaker-list .product-view .head .prices > li > strong { font-size: 16px; line-height: 16px; font-weight: 700; } #wrap.breaker-list .product-view .head > .buttons { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 10px 0; align-self: flex-start; margin-top: 45px; } #wrap.breaker-list .product-view .head > .buttons > a { width: auto; min-width: 160px; height: 50px; padding: 0 18px; font-size: 14px; border-radius: 6px; gap: 0 9px; } #wrap.breaker-list .product-view .head > .buttons > a > svg { flex: 0 0 auto; } /* 2026-10-14 'Box ×30' 이 길어도 카트 아이콘이 줄지 않게(8px 로 눌리던 문제) — 버튼은 내용 폭, 세로 묶음이라 둘 다 가장 넓은 쪽으로 늘어남 */ /* 탭 최대 6개(ACB DC·VCS)가 패널 폭(≤1035px)에 항상 들어가도록: 간격·여백은 폭 비례, 줄바꿈 없이 넘치면 가로 스크롤 (2026-09-23) */ #wrap.breaker-list .product-view .tabs { display: flex; align-items: center; gap: 0 clamp(18px, 3vw, 40px); height: 60px; padding: 0 clamp(20px, 3.2vw, 40px); background: #F2F4F7; border-top: 1px solid #E4E7EC; border-bottom: 1px solid #E4E7EC; overflow-x: auto; scrollbar-width: thin; } #wrap.breaker-list .product-view .tabs > li { flex: 0 0 auto; height: 60px; display: flex; align-items: center; border-bottom: 1px solid transparent; margin-bottom: -1px; } #wrap.breaker-list .product-view .tabs > li > a { display: inline-flex; align-items: center; gap: 0 2px; font-size: clamp(12px, 1vw, 14px); font-weight: 700; color: var(--text-tertiary); white-space: nowrap; } #wrap.breaker-list .product-view .tabs > li.on { border-bottom-color: var(--HD_Discovery_Blue); } #wrap.breaker-list .product-view .tabs > li.on > a { color: var(--HD_Discovery_Blue); } #wrap.breaker-list .product-view .content { padding: 30px; } #wrap.breaker-list .product-view .pdf-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px 0; height: 700px; border: 1px dashed #CED2DA; border-radius: 6px; background: #F8F9FB; color: var(--text-tertiary); font-size: 12px; } #wrap.breaker-list .product-view .pdf-placeholder > p { font-size: 16px; font-weight: 700; color: var(--text-secondary); } /* 주문 상세·완료 화면의 구매 단위 뱃지 Box ×30 (2026-10-14) */ .unit-badge { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 3px; background: #CADAF8; color: #172451; font-size: 10px; line-height: 16px; font-weight: 700; font-style: normal; vertical-align: middle; white-space: nowrap; } /* 액세서리 상세 모달 (2026-10-11, accessory/acc-view.jspf) — 제품 모달 틀 재사용, 사진 없음·설명 줄·버튼 비활성 */ #wrap.breaker-list .product-view.acc-view .head { padding: 30px 40px; } #wrap.breaker-list .product-view .head .breadcrumb > span { color: var(--text-primary); } /* 끝 항목(Main Product / 액세서리 분류)은 링크 없이 (2026-10-14) */ #wrap.breaker-list .product-view.acc-view .head .desc { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--text-secondary); } #wrap.breaker-list .product-view.acc-view .head > .buttons > a.disabled { opacity: .45; cursor: not-allowed; } #wrap.breaker-list .list ul.body > li .code a, #wrap.breaker-list .list ul.body > li .desc a { cursor: pointer; } @media (max-width: 768px) { #wrap.breaker-list #container #main { flex-flow: column nowrap; gap: 30px 0; padding: 24px 20px 40px; } #wrap.breaker-list #container #main .filter { width: 100%; } #wrap.breaker-list #container #main .result { width: 100%; } #wrap.breaker-list #container #main .result .page-title { flex-direction: column; align-items: flex-start; height: auto; gap: 10px 0; } #wrap.breaker-list #container #main .result .list { overflow-x: auto; } #wrap.breaker-list #container #main .result .list ul { min-width: 1100px; } #wrap.breaker-list .product-view .panel { width: 100%; } #wrap.breaker-list .product-view .close { left: auto; right: 0; width: 60px; height: 60px; padding: 5px; z-index: 2; } #wrap.breaker-list .product-view .head { flex-wrap: wrap; gap: 20px; padding: 70px 20px 20px; } #wrap.breaker-list .product-view .head > .buttons { flex-direction: row; margin-top: 0; width: 100%; } #wrap.breaker-list .product-view .head > .buttons > a { flex: 1 1 0; width: auto; } #wrap.breaker-list .product-view .tabs { padding-left: 20px; gap: 0 24px; overflow-x: auto; } #wrap.breaker-list .product-view .content { padding: 20px; } #wrap.breaker-list .product-view .pdf-placeholder { height: 400px; } } /* 모달 Product Details: 스펙 표 (HTML openModal 의 label/value 행) */ #wrap.breaker-list .product-view .spec-table > ul { border: 1px solid #E4E7EC; border-radius: 6px; overflow: hidden; } #wrap.breaker-list .product-view .spec-table > ul > li { display: flex; min-height: 44px; border-top: 1px solid #E4E7EC; } #wrap.breaker-list .product-view .spec-table > ul > li:first-child { border-top: 0; } #wrap.breaker-list .product-view .spec-table > ul > li > span { width: 260px; flex: 0 0 auto; padding: 13px 20px; background: #F4F6FA; font-size: 12px; font-weight: 700; color: #393939; } #wrap.breaker-list .product-view .spec-table > ul > li > strong { flex: 1 1 auto; padding: 13px 20px; font-size: 12px; font-weight: 400; color: var(--text-primary); } #wrap.breaker-list #container #main .result .paging > li { padding: 26px 0; } /* 목록 첫 화면 상위 15행 + More: 16행부터 .extra 숨김, .list.expanded 면 전부 표시, 페이징(.paging.collapsed)도 More 후에만 */ #wrap.breaker-list #container #main .result .paging.collapsed { display: none; } #wrap.breaker-list #container #main .result .list ul.body > li.extra { display: none; } #wrap.breaker-list #container #main .result .list.expanded ul.body > li.extra { display: flex; } #wrap.breaker-list #container #main .result .list .more-wrap { display: flex; justify-content: center; padding: 16px 0; border-top: 1px solid #E4E7EC; background: #fff; } #wrap.breaker-list #container #main .result .list.expanded .more-wrap { display: none; } #wrap.breaker-list #container #main .result .list .button-more { display: inline-flex; align-items: center; gap: 0 6px; height: 36px; padding: 0 22px; border: 1px solid #CED2DA; border-radius: 18px; background: #fff; font-size: 13px; font-weight: 700; color: var(--text-primary); cursor: pointer; } #wrap.breaker-list #container #main .result .list .button-more > em { font-style: normal; font-weight: 400; color: var(--HD_Discovery_Blue); } #wrap.breaker-list #container #main .result .list .button-more:hover { border-color: var(--HD_Discovery_Blue); color: var(--HD_Discovery_Blue); } /* 모달 본문: Figma PDF image 프레임(1035x1026, 패딩 30) — 목업 이미지 */ #wrap.breaker-list .product-view .content .pdf { border: 1px solid #E4E7EC; background: #fff; } #wrap.breaker-list .product-view .content .pdf img { display: block; width: 100%; height: auto; } /* 목록 버튼: 정상 행 = Add(139px), 흐린 행 = Inquire(139px) — Figma List 인스턴스 2종 */ #wrap.breaker-list .button-add.wide { width: 139px; } /* 모달 본문 TBD (Figma PDF image 프레임 자리, 1035x1026 - 패딩 30) */ #wrap.breaker-list .product-view .content .tbd { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px 0; min-height: 700px; border: 1px dashed #CED2DA; border-radius: 6px; background: #F8F9FB; } #wrap.breaker-list .product-view .content .tbd > p { font-size: 96px; line-height: 1; font-weight: 700; letter-spacing: 0.04em; color: #CED2DA; } #wrap.breaker-list .product-view .content .tbd > span { font-size: 12px; color: var(--text-tertiary); } #wrap.breaker-list .product-view .content .tbd > span > b { color: var(--text-secondary); } /* ---------- My Account 공통 LNB + 장바구니 (Figma Cart 3079:28578, LNB 693:15608) ---------- */ #wrap.member-cart #container { padding: 0; } /* 공통 규칙 `#wrap #container #main { flex-flow: column wrap }`(ID 3개)보다 우선하도록 #container 포함 */ #wrap.member-cart #container #main { display: flex; flex-flow: row nowrap; align-items: flex-start; gap: 0 32px; padding: 40px 28px 60px; min-height: 640px; } .lnb { flex: 0 0 200px; } .lnb h2 { font-size: 20px; line-height: 30px; font-weight: 700; padding: 0 14px; } .lnb ul { margin-top: 28px; display: flex; flex-direction: column; gap: 10px 0; } .lnb ul > li > a { display: flex; align-items: center; gap: 0 7px; height: 34px; padding: 0 14px; border-radius: 6px; font-size: 14px; color: #637083; } /* 2026-10-14: 높이 34 = 다른 My Account 페이지 #aside 항목(패딩 10+글자 14+10)과 동일 — Cart 를 오갈 때 LNB 글자가 세로로 안 움직이게(글자 left 69px 는 이미 같음). 모바일은 아래 블록에서 40px */ .lnb ul > li > a svg { flex: 0 0 auto; } .lnb ul > li.on > a, .lnb ul > li > a:hover { background: #F2F4F7; color: var(--text-primary); } .lnb .badge { margin-left: auto; min-width: 19px; height: 16px; padding: 0 6px; border-radius: 100px; background: #F2F4F7; color: #101820; font-size: 10px; line-height: 16px; text-align: center; font-style: normal; } .lnb .badge.primary { background: #004AD6; color: #fff; } #wrap.member-cart .content { flex: 1 1 auto; min-width: 0; } #wrap.member-cart #container #main .page-title { display: flex; justify-content: flex-start; align-items: center; gap: 0 10px; font-size: 16px; line-height: 1; font-weight: 700; margin: 0 0 30px; } /* 2026-10-14 사용자 요청: 위치 표기 글자를 GNB 메뉴(16px Bold) 수준으로 (30→16); 위 여백 5px 제거 — 다른 My Account 페이지(제목 top 120·본문 166)와 시작점 일치 */ /* 경로 표기 My Account > Cart (2026-10-11) */ #wrap.member-cart .page-title > a { color: var(--text-tertiary); font-weight: 500; } #wrap.member-cart .page-title > i { width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M5.5 3l4 4.5-4 4.5' stroke='%23637083' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; background-size: 16px 16px; } #wrap.my-account #container #main .page-title > p.path { display: flex; align-items: center; gap: 0 10px; font-size: 16px; line-height: 1; font-weight: 700; } /* 2026-10-14: GNB 메뉴 수준 16px (30→16) */ /* My Account 하위 제목 경로 표기 — Cart 와 동일 (2026-10-11) */ #wrap.my-account #container #main .page-title > p.path > a { color: var(--text-tertiary); font-weight: 500; } #wrap.my-account #container #main .page-title > p.path > i { width: 16px; height: 16px; flex: 0 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M5.5 3l4 4.5-4 4.5' stroke='%23637083' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; background-size: 16px 16px; } #wrap.member-cart .cart-table { border: 1px solid #E4E7EC; border-radius: 8px; overflow: hidden; } #wrap.member-cart .cart-table ul > li { display: flex; align-items: center; gap: 0 20px; padding: 0 28px; } #wrap.member-cart .cart-table ul.head { background: #F4F6FA; } #wrap.member-cart .cart-table ul.head > li { height: 50px; color: #141C24; font-size: 12px; } #wrap.member-cart .cart-table div.code { flex: 1 1 auto; min-width: 0; } #wrap.member-cart .cart-table div.qty { flex: 0 0 auto; width: 148px; display: flex; align-items: center; gap: 0 10px; justify-content: center; } #wrap.member-cart .cart-table div.price { flex: 0 0 auto; width: 118px; text-align: right; } #wrap.member-cart .cart-table div.del { flex: 0 0 auto; width: 24px; } #wrap.member-cart .cart-table ul.body > li { min-height: 59px; padding-top: 15px; padding-bottom: 15px; border-top: 1px solid #E4E7EC; } #wrap.member-cart .cart-table ul.body > li.empty { display: block; padding: 40px 28px; text-align: center; color: var(--text-tertiary); font-size: 13px; } #wrap.member-cart .cart-table ul.body > li.empty a { color: var(--HD_Discovery_Blue); font-weight: 700; } #wrap.member-cart .cart-table div.code { display: flex; flex-direction: column; gap: 4px 0; } #wrap.member-cart .cart-table div.code > strong { font-size: 13px; line-height: 14px; font-weight: 700; color: #141C24; overflow: hidden; text-overflow: ellipsis; } #wrap.member-cart .cart-table div.code > span { font-size: 10px; line-height: 11px; font-weight: 700; color: #6A6A6A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #wrap.member-cart .cart-table .unit { flex: 0 0 auto; padding: 3px 4px; min-width: 30px; border-radius: 2px; background: #B5DFBD; color: #003F1E; font-size: 10px; font-weight: 700; font-style: normal; text-align: center; line-height: 14px; } #wrap.member-cart .cart-table .unit.box { background: #CADAF8; color: #172451; } #wrap.member-cart .cart-table .unit > i.ea { font-style: normal; font-weight: 400; font-size: 11px; margin-left: 5px; opacity: .8; white-space: nowrap; } /* Box ×30 EA (2026-10-14 박스 = 개당 단가 × 입수) */ #wrap.member-cart .cart-alert { margin: 0 0 14px; padding: 12px 16px; border: 1px solid #F2C4BE; border-radius: 6px; background: #FDF2F0; font-size: 13px; line-height: 1.5; color: #8A2A1C; } #wrap.member-cart .cart-alert b { overflow-wrap: anywhere; } #wrap.member-cart .cart-table .stepper { display: flex; align-items: center; gap: 0 6px; } #wrap.member-cart .cart-table .stepper button { width: 20px; height: 20px; border: 0; background: none; color: #637083; font-size: 16px; line-height: 1; cursor: pointer; padding: 0; } #wrap.member-cart .cart-table .stepper input { width: 50px; height: 30px; border: 1px solid #97A1AF; border-radius: 6px; text-align: center; font-size: 13px; font-family: 'IBM Plex Mono', monospace; outline: none; -moz-appearance: textfield; } #wrap.member-cart .cart-table .stepper input::-webkit-outer-spin-button, #wrap.member-cart .cart-table .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #wrap.member-cart .cart-table ul.body div.price { font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 700; color: #141C24; white-space: nowrap; } #wrap.member-cart .cart-table div.del button { width: 24px; height: 24px; border: 1px solid #CED2DA; border-radius: 4px; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } #wrap.member-cart .cart-table div.del button:hover { background: #F4F6FA; } #wrap.member-cart .summary { flex: 0 0 270px; } #wrap.member-cart .summary h2 { font-size: 20px; line-height: 22px; font-weight: 700; margin: 5px 0 30px; } #wrap.member-cart .summary > ul { border-top: 1px solid #E4E7EC; border-bottom: 1px solid #E4E7EC; padding: 20px 0; display: flex; flex-direction: column; gap: 20px 0; } #wrap.member-cart .summary > ul > li { display: flex; justify-content: space-between; font-size: 13px; color: #333447; } #wrap.member-cart .summary > ul > li > strong { font-family: 'IBM Plex Mono', monospace; font-weight: 700; } #wrap.member-cart .summary > ul > li > strong.minus { color: #00823D; } #wrap.member-cart .summary .net { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; font-size: 20px; font-weight: 700; } #wrap.member-cart .summary .net > strong { font-family: 'IBM Plex Mono', monospace; } #wrap.member-cart .summary .button-order { width: 100%; height: 50px; margin-top: 30px; border: 0; border-radius: 6px; background: var(--HD_Discovery_Blue); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; } #wrap.member-cart .summary .button-order:hover { background: #00256B; } #wrap.member-cart .summary .button-order:disabled { background: #CED2DA; cursor: default; } #wrap.member-cart .summary .hint { margin-top: 30px; font-size: 12px; color: #344051; } @media (max-width: 1100px) { #wrap.member-cart #container #main { flex-wrap: wrap; } #wrap.member-cart .summary { flex: 1 1 100%; max-width: 420px; } } /* ---------- Checkout (Figma Cart3 3086:22785) ---------- */ #wrap.member-cart.checkout .content { max-width: 1242px; } #wrap.member-cart.checkout .cart-table div.qty { width: 170px; justify-content: flex-start; } #wrap.member-cart.checkout .cart-table .num { font-family: 'IBM Plex Mono', monospace; font-size: 13px; } #wrap.member-cart.checkout .cart-table ul.body > li.total { background: #F2F4F7; border-top: 1px solid #97A1AF; min-height: 50px; padding-top: 10px; padding-bottom: 10px; } #wrap.member-cart.checkout .addresses { display: flex; gap: 0 30px; margin-top: 30px; } #wrap.member-cart.checkout .addr { flex: 1 1 0; min-width: 0; } #wrap.member-cart.checkout .addr .head { display: flex; justify-content: space-between; align-items: center; height: 50px; } #wrap.member-cart.checkout .addr .head h3 { font-size: 16px; font-weight: 700; } #wrap.member-cart.checkout .button-line { height: 30px; padding: 0 12px; border: 1px solid #CED2DA; border-radius: 6px; background: #fff; font-size: 12px; color: #344051; cursor: pointer; } #wrap.member-cart.checkout .button-line:hover { background: #F4F6FA; } #wrap.member-cart.checkout .addr select { width: 100%; height: 36px; padding: 0 12px; border: 1px solid #97A1AF; border-radius: 6px; font-size: 13px; background: #fff; } #wrap.member-cart.checkout .addr .card { margin-top: 14px; border: 1px solid #E4E7EC; border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; min-height: 75px; } #wrap.member-cart.checkout .addr .card strong { font-size: 13px; font-weight: 700; } #wrap.member-cart.checkout .addr .card span { font-size: 12px; color: #344051; } #wrap.member-cart.checkout .summary .net.top { margin-top: 0; padding-bottom: 20px; border-bottom: 1px solid #E4E7EC; } #wrap.member-cart.checkout .summary .comments { border-bottom: 1px solid #E4E7EC; padding: 20px 0; display: flex; flex-direction: column; gap: 14px 0; } #wrap.member-cart.checkout .summary .comments li { font-size: 12px; line-height: 1.4; color: #344051; } #wrap.member-cart.checkout .summary .comments a { color: var(--HD_Discovery_Blue); font-weight: 700; } /* 차단기 거래 조건: 라벨 열 + 여러 줄 문구 (2026-09-22) */ #wrap.member-cart.checkout .summary .comments.terms li { display: flex; gap: 0 8px; } #wrap.member-cart.checkout .summary .comments.terms li > .k { flex: 0 0 68px; font-weight: 700; color: var(--text-primary); } #wrap.member-cart.checkout .summary .comments.terms li > .k::after { content: ' :'; } #wrap.member-cart.checkout .summary .comments.terms li > .v { flex: 1 1 auto; min-width: 0; } #wrap.member-cart.checkout .summary form { display: flex; flex-direction: column; gap: 10px 0; margin-top: 20px; } #wrap.member-cart.checkout .summary form label { display: flex; flex-direction: column; gap: 6px 0; font-size: 13px; font-weight: 700; color: #141C24; } #wrap.member-cart.checkout .summary form input[type=text] { height: 30px; padding: 0 10px; border: 1px solid #97A1AF; border-radius: 6px; font-size: 12px; outline: none; } #wrap.member-cart.checkout .summary .file-row { display: flex; align-items: center; gap: 0 6px; } #wrap.member-cart.checkout .summary .file-row input[type=file] { flex: 1 1 auto; min-width: 0; font-size: 11px; } #wrap.member-cart.checkout .summary .button-order { margin-top: 20px; } /* ---------- Products-List: 조합 문의(Inquire) 모달 — 코드 체계상 유효하나 레코드 없는 조합 문의 (2026-09-03) ---------- */ #wrap.breaker-list #container #main .result .list ul.body > li.empty.no-result { height: auto; padding: 56px 20px; } #wrap.breaker-list #container #main .result .list ul.body > li.empty.no-result > div { display: flex; flex-direction: column; align-items: center; gap: 10px 0; text-align: center; } #wrap.breaker-list #container #main .result .list ul.body > li.empty.no-result > div > .head { font-size: 15px; font-weight: 700; color: var(--text-primary); } #wrap.breaker-list #container #main .result .list ul.body > li.empty.no-result > div > .sub { font-size: 12px; line-height: 1.5; color: var(--text-secondary); max-width: 520px; } #wrap.breaker-list #container #main .result .list ul.body > li.empty.no-result > div > .button-inquire.big { margin-top: 8px; height: 38px; padding: 0 22px; font-size: 13px; background: var(--HD_Discovery_Blue); color: #fff; } #wrap.breaker-list #container #main .result .list ul.body > li.empty.no-result > div > .button-inquire.big:hover { background: #163f8f; } #wrap.breaker-list #container #main .result .list ul.body > li.empty.inquire { color: var(--text-secondary); } #wrap.breaker-list #container #main .result .list ul.body > li.empty.inquire > div { display: flex; align-items: center; gap: 0 14px; font-size: 12px; } #wrap.breaker-list .inquiry-view { position: fixed; inset: 0; z-index: 1100; display: none; } #wrap.breaker-list .inquiry-view.open { display: block; } #wrap.breaker-list .inquiry-view .dim { position: absolute; inset: 0; background: rgba(0, 20, 60, 0.45); } #wrap.breaker-list .inquiry-view .box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 600px; max-width: calc(100% - 40px); max-height: calc(100% - 40px); overflow: auto; padding: 30px 32px 28px; background: #fff; border-radius: 10px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22); } #wrap.breaker-list .inquiry-view .box > .close { position: absolute; right: 14px; top: 14px; width: 32px; height: 32px; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; } #wrap.breaker-list .inquiry-view .box > h3 { font-size: 22px; line-height: 26px; font-weight: 700; color: var(--HD_Discovery_Blue); } #wrap.breaker-list .inquiry-view .box > .lead { margin-top: 8px; font-size: 12px; line-height: 18px; color: var(--text-secondary); } #wrap.breaker-list .inquiry-view form > ul { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 14px 16px; } #wrap.breaker-list .inquiry-view form > ul > li { width: 100%; display: flex; flex-direction: column; gap: 6px 0; } #wrap.breaker-list .inquiry-view form > ul > li.half { width: calc(50% - 8px); } #wrap.breaker-list .inquiry-view form > ul > li > label { font-size: 12px; font-weight: 700; color: var(--text-primary); } #wrap.breaker-list .inquiry-view form > ul > li > .ro { height: 36px; padding: 0 12px; display: flex; align-items: center; gap: 0 8px; border: 1px solid #E4E7EC; border-radius: 6px; background: #F4F6FA; font-size: 13px; font-weight: 700; color: var(--HD_Discovery_Blue); } #wrap.breaker-list .inquiry-view form > ul > li > .ro > span { font-weight: 400; color: var(--text-secondary); font-size: 12px; } #wrap.breaker-list .inquiry-view form > ul > li > input, #wrap.breaker-list .inquiry-view form > ul > li > textarea { width: 100%; padding: 8px 12px; border: 1px solid #97A1AF; border-radius: 6px; font-size: 12px; line-height: 18px; color: var(--text-primary); font-family: inherit; outline: none; } #wrap.breaker-list .inquiry-view form > ul > li > input { height: 36px; } #wrap.breaker-list .inquiry-view form > ul > li > textarea { resize: vertical; } #wrap.breaker-list .inquiry-view form > ul > li > textarea[readonly] { background: #F9FAFB; color: var(--text-secondary); } #wrap.breaker-list .inquiry-view form > ul > li > input:focus, #wrap.breaker-list .inquiry-view form > ul > li > textarea:focus { border-color: var(--HD_Discovery_Blue); } #wrap.breaker-list .inquiry-view form > .buttons { margin-top: 22px; display: flex; justify-content: flex-end; gap: 0 8px; } #wrap.breaker-list .inquiry-view form > .buttons > .button-add { height: 36px; padding: 0 20px; border: 0; cursor: pointer; font-size: 12px; } #wrap.breaker-list .inquiry-view form > .buttons > .button-add:disabled { opacity: 0.6; cursor: default; } #wrap.breaker-list .inquiry-view form > .buttons > .button-inquire { height: 36px; padding: 0 20px; font-size: 12px; } @media (max-width: 767px) { #wrap.breaker-list .inquiry-view .box { padding: 24px 20px; } #wrap.breaker-list .inquiry-view form > ul > li.half { width: 100%; } } /* 조합 목록: 미등록 행의 Add 자리 빈 칸(폭 유지) */ #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > .price > .cell-blank { display: block; width: 78px; height: 30px; flex: 0 0 auto; } /* ---------- 차단기 모달 문서 탭 (breaker-doc.js): 탭 바 + 파일 세로 스택 ---------- */ #wrap.breaker-list .product-view .tabs-bar { display: flex; align-items: center; justify-content: space-between; gap: 0 20px; height: 60px; padding: 0 30px 0 50px; background: #DDE3EC; border-top: 1px solid #E4E7EC; border-bottom: 1px solid #E4E7EC; } #wrap.breaker-list .product-view .tabs-bar .tabs { flex: 1 1 auto; min-width: 0; height: 60px; padding-left: 0; background: transparent; border: 0; overflow-x: auto; scrollbar-width: none; } #wrap.breaker-list .product-view .tabs-bar .tabs::-webkit-scrollbar { display: none; } #wrap.breaker-list .product-view .tabs-bar .tabs > li { flex: 0 0 auto; } #wrap.breaker-list .product-view .tabs-bar .tabs > li > a { white-space: nowrap; } #wrap.breaker-list .product-view .tabs-bar .download-all { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0 4px; font-size: 14px; font-weight: 700; color: var(--text-tertiary); white-space: nowrap; } #wrap.breaker-list .product-view .tabs-bar .download-all:hover { color: var(--HD_Discovery_Blue); } #wrap.breaker-list .product-view .content .doc-state { display: flex; align-items: center; justify-content: center; min-height: 160px; font-size: 12px; color: var(--text-tertiary); } #wrap.breaker-list .product-view .content .doc-state.error { color: #C0392B; } #wrap.breaker-list .product-view .content .doc-file { margin-bottom: 24px; border: 1px solid #E4E7EC; border-radius: 6px; overflow: hidden; background: #fff; } #wrap.breaker-list .product-view .content .doc-file:last-child { margin-bottom: 0; } #wrap.breaker-list .product-view .content .doc-file > header { display: flex; align-items: center; justify-content: flex-end; gap: 0 12px; min-height: 44px; padding: 8px 16px; background: #F4F6FA; border-bottom: 1px solid #E4E7EC; } #wrap.breaker-list .product-view .content .doc-file > header .title { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #wrap.breaker-list .product-view .content .doc-file > header .ext { flex: 1 1 auto; font-size: 11px; font-style: normal; color: var(--text-tertiary); } /* 파일명 제거 후 뱃지가 왼쪽, 링크는 오른쪽 */ #wrap.breaker-list .product-view .content .doc-file > header .links { flex: 0 0 auto; display: flex; gap: 0 14px; } #wrap.breaker-list .product-view .content .doc-file > header .links > a { font-size: 12px; font-weight: 700; color: var(--HD_Discovery_Blue); } #wrap.breaker-list .product-view .content .doc-body { padding: 12px; } #wrap.breaker-list .product-view .content .doc-body img { display: block; max-width: 100%; height: auto; margin: 0 auto; } #wrap.breaker-list .product-view .content .doc-pdf canvas { display: block; width: 100%; height: auto; margin-bottom: 12px; box-shadow: 0 0 0 1px #E4E7EC; } #wrap.breaker-list .product-view .content .doc-pdf canvas:last-child { margin-bottom: 0; } #wrap.breaker-list .product-view .content .doc-tab[hidden] { display: none; } @media (max-width: 768px) { #wrap.breaker-list .product-view .tabs-bar { padding: 0 20px; } #wrap.breaker-list .product-view .tabs-bar .tabs { gap: 0 24px; } #wrap.breaker-list .product-view .content .doc-file > header { flex-wrap: wrap; } } /* ---------- 문서 라이트박스 (breaker-doc.js DocLightbox): 전체 화면 확대·이동 ---------- */ .doc-lightbox { position: fixed; inset: 0; z-index: 1050; display: none; background: rgba(16, 24, 32, 0.92); color: #fff; } .doc-lightbox.open { display: flex; flex-direction: column; } .doc-lightbox .bar { position: relative; flex: 0 0 auto; min-height: 56px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px; padding: 8px 20px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); z-index: 2; } .doc-lightbox .bar .title { flex: 1 1 260px; min-width: 0; font-size: 14px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .doc-lightbox .bar .hint { flex: 0 1 auto; font-size: 11px; color: rgba(255, 255, 255, 0.6); white-space: nowrap; order: 3; width: 100%; } .doc-lightbox .bar .tools { flex: 0 0 auto; display: flex; align-items: center; gap: 0 6px; } .doc-lightbox .bar .tools > i { width: 1px; height: 20px; margin: 0 6px; background: rgba(255, 255, 255, 0.25); } .doc-lightbox .bar .tools > button, .doc-lightbox .bar .tools > a.dl { height: 32px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 12px; font-weight: 700; line-height: 30px; cursor: pointer; white-space: nowrap; } .doc-lightbox .bar .tools > button:hover, .doc-lightbox .bar .tools > a.dl:hover { background: rgba(255, 255, 255, 0.2); } .doc-lightbox .bar .tools > button:disabled { opacity: 0.35; cursor: default; } .doc-lightbox .bar .tools > button.close { width: 32px; padding: 0; font-size: 20px; line-height: 28px; } .doc-lightbox .bar .tools > .zoom { min-width: 48px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; } .doc-lightbox .bar .tools > .page { min-width: 48px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, 0.8); font-variant-numeric: tabular-nums; } .doc-lightbox .stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; cursor: grab; touch-action: none; overscroll-behavior: contain; } .doc-lightbox .stage.dragging { cursor: grabbing; user-select: none; } .doc-lightbox .stage .inner { width: max-content; min-width: 100%; padding: 24px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; } .doc-lightbox .stage .page { display: block; margin: 0 0 16px; background: #fff; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); max-width: none; } .doc-lightbox .stage .page:last-child { margin-bottom: 0; } .doc-lightbox .stage .doc-state { min-height: 60vh; color: rgba(255, 255, 255, 0.7); } .doc-lightbox .stage .doc-state.error { color: #FF8A80; } #wrap.breaker-list .product-view .content .doc-body.zoomable canvas, #wrap.breaker-list .product-view .content .doc-body.zoomable img { cursor: zoom-in; } #wrap.breaker-list .product-view .content .doc-file > header .links > a.zoom { color: var(--HD_Discovery_Blue); } @media (max-width: 768px) { .doc-lightbox .bar { padding: 6px 12px; gap: 6px 10px; } .doc-lightbox .bar .hint { display: none; } .doc-lightbox .bar .tools { flex: 1 1 100%; flex-wrap: wrap; gap: 6px; } .doc-lightbox .bar .tools > i { display: none; } .doc-lightbox .bar .tools > button, .doc-lightbox .bar .tools > a.dl { height: 28px; padding: 0 8px; line-height: 26px; } .doc-lightbox .stage .inner { padding: 12px; } } /* ---- 차단기 목록 Select → 상단 선택 박스 → Add (2026-10-10, 캡처 image-4/5) ---- */ #wrap.breaker-list #container #main .result .page-title .sel-code .chips { display: flex; flex-wrap: wrap; gap: 4px 6px; } #wrap.breaker-list #container #main .result .page-title .sel-code .chips:empty { display: none; } #wrap.breaker-list .chip { display: inline-flex; align-items: center; gap: 0 6px; height: 22px; max-width: 100%; padding: 0 4px 0 8px; border-radius: 11px; background: #EEF1F6; font-size: 11px; line-height: 1; color: var(--text-primary); } #wrap.breaker-list .chip.body { background: #E3ECFA; } #wrap.breaker-list .chip > b { font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-weight: 700; white-space: nowrap; } #wrap.breaker-list .chip > i { font-style: normal; color: #6A6A6A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } #wrap.breaker-list .chip > em { font-style: normal; font-weight: 700; white-space: nowrap; } #wrap.breaker-list .chip > button { width: 16px; height: 16px; border: 0; border-radius: 50%; padding: 0; background: transparent; color: #7A8290; font-size: 14px; line-height: 1; cursor: pointer; } #wrap.breaker-list .chip > button:hover { background: #D9DFE9; color: var(--text-primary); } #wrap.breaker-list #container #main .result .page-title .sel-total { flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; gap: 0 10px; margin-right: 0; padding: 5px 10px; border: 1px solid #CED2DA; border-radius: 6px; background: #FBFCFE; } /* align-self: stretch — 선택 박스와 같은 높이 (2026-10-13 image-6) */ #wrap.breaker-list #container #main .result .page-title .sel-total > .label { font-size: 12px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; } #wrap.breaker-list #container #main .result .page-title .sel-total > strong { min-width: 84px; text-align: right; font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 16px; font-weight: 700; color: var(--text-primary); white-space: nowrap; } #wrap.breaker-list #container #main .result .page-title .sel-total > strong.tbd { font-size: 12px; color: #6A6A6A; } #wrap.breaker-list #container #main .result .page-title .sel-total > .inq-link { font-size: 12px; font-weight: 700; color: var(--HD_Discovery_Blue); text-decoration: underline; white-space: nowrap; } #wrap.breaker-list .button-add.send { height: 34px; padding: 0 16px; font-size: 12px; background: #E8622A; } /* Cart 로 전송 — 다른 버튼과 구분되는 강조색 (캡처 주석) */ #wrap.breaker-list .button-add.send:hover { background: #C94F1C; } #wrap.breaker-list .button-add.send[aria-disabled="true"] { background: #CED2DA; pointer-events: none; } #wrap.breaker-list button.button-add { border: 0; cursor: pointer; font-family: inherit; } #wrap.breaker-list button.button-add:disabled { background: #D9DFE9; color: #fff; cursor: not-allowed; } #wrap.breaker-list .button-add.on { background: #001F5C; } /* Selected (EA) */ #wrap.breaker-list .button-add.box.on { background: #005A2B; } /* Selected (Box) */ #wrap.breaker-list .button-add.on > span::before { content: '\2713\00a0'; } #wrap.breaker-list #container #main .result .list ul.body > li.selected { background: #F3F7FF; box-shadow: inset 3px 0 0 var(--HD_Discovery_Blue); } #wrap.breaker-list #container #main .result .list ul.body > li.ctx { box-shadow: inset 3px 0 0 #B9C8E4; } /* 별도 구매: 액세서리 호환 기준 본체 (보낼 건은 아님) */ #wrap.breaker-list #container #main .result .list.acc-list ul > li > div.main > .group { width: 220px; flex: 0 0 auto; font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #wrap.breaker-list #container #main .result .list.acc-list ul.head > li > div.main > .group { font-size: 13px; font-weight: 700; color: var(--text-primary); } #wrap.breaker-list #container #main .result .page-title .sel-code.has-sel > strong { white-space: normal; word-break: break-all; } /* 조합 코드는 길어 1280 에서 두 줄 허용 */ @media (min-width: 769px) and (max-width: 1599px) { #wrap.breaker-list #container #main .result .page-title .title { gap: 0 8px; } #wrap.breaker-list #container #main .result .page-title .title > p { font-size: 16px; white-space: nowrap; } #wrap.breaker-list #container #main .result .page-title .sel-code { margin: 0 12px; padding: 6px 12px; } #wrap.breaker-list #container #main .result .page-title .sel-code > strong { font-size: 17px; line-height: 22px; } #wrap.breaker-list #container #main .result .page-title .sel-total { gap: 0 8px; margin-right: 0; padding: 5px 8px; } #wrap.breaker-list #container #main .result .page-title .sel-total > .label { display: none; } /* 좁은 폭: 'Total Price' 라벨은 Add 버튼 title 로 */ #wrap.breaker-list #container #main .result .page-title .sel-total > strong { min-width: 70px; font-size: 14px; } #wrap.breaker-list #container #main .result .list.acc-list ul > li > div.main > .group { width: 160px; } } /* 2026-10-10 캡처 image-6/8: 코드 검색창은 필터 맨 위(Specification 제목 위). Inquiry 링크는 일단 제거 */ #wrap.breaker-list #container #main .filter .code-search { margin: 0 0 14px; gap: 0 6px; } #wrap.breaker-list #container #main .filter .code-search .input-wrap > input { height: 36px; padding: 0 28px 0 34px; font-size: 13px; } #wrap.breaker-list #container #main .filter .code-search .button-search { height: 36px; padding: 0 12px; font-size: 13px; } /* 2026-10-11 사용자 요청: placeholder 'Search by item code' 가 잘리지 않게 — 글자 12px, 좌우 여백·아이콘 위치 축소 */ #wrap.breaker-list #container #main .filter .code-search .input-wrap > input { padding: 0 8px 0 28px; } #wrap.breaker-list #container #main .filter .code-search .input-wrap > input:not(:placeholder-shown) { padding-right: 26px; } /* 입력값이 있을 때만 지우기(×) 자리 확보 */ #wrap.breaker-list #container #main .filter .code-search .input-wrap > input::placeholder { font-size: 12px; } #wrap.breaker-list #container #main .filter .code-search .input-wrap > svg { left: 9px; } #wrap.breaker-list #container #main .filter .code-search .button-search { width: auto; padding: 0 12px; } /* common.css 의 width:100px 해제 — 입력칸 폭 확보 */ /* 행 높이 최소화 (캡처 image-8: 아래 옵션 표가 보이도록) — 버튼 30px + 상하 5px */ #wrap.breaker-list #container #main .result .list ul.head > li { height: 40px; } #wrap.breaker-list #container #main .result .list ul.body > li { min-height: 40px; padding-top: 5px; padding-bottom: 5px; } #wrap.breaker-list #container #main .result .list ul.body > li > div.main > .desc > a { -webkit-line-clamp: 1; } #wrap.breaker-list #container #main .result .list.acc-list ul.body > li.empty { height: 56px; } /* 차례형 캐스케이드 필터 (v3, 2026-10-11): 상위 미선택 → 하위 비활성, 옵션 1개 → 값만 표시 */ #wrap.breaker-list #container #main .filter .selects > li.disabled > label > span { color: #A0A6B1; } #wrap.breaker-list #container #main .filter .selects > li.disabled select { background-color: #F5F6F8; color: #A0A6B1; cursor: not-allowed; } #wrap.breaker-list #container #main .filter .selects > li.single > .value { display: flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid #E4E7EC; border-radius: 4px; background: #F7F9FC; font-size: 13px; color: var(--text-primary); } /* 상세 모달 Select — Unit / Box 두 버튼 (2026-10-11): 단위 표기 em, Box 는 녹색 */ #wrap.breaker-list .product-view .head .buttons .button-add > em { margin-left: 6px; padding-left: 6px; border-left: 1px solid rgba(255,255,255,.45); font-style: normal; font-size: 12px; font-weight: 600; white-space: nowrap; } /* ====================== 모바일 재점검 (2026-10-11 보고: 표가 잘리고 기능이 가려짐) ====================== 원칙: ① 열이 많은 표는 머리행을 숨기고 행을 카드(줄바꿈 + 항목 라벨 ::before)로 ② 추적 표(주문 현황 12열)만 가로 스크롤 ③ 틀고정(sticky)·고정 폭(px·clamp)은 모바일에서 해제. 기존 규칙의 ID 체인 특이도가 높아 폭·줄바꿈 해제에는 !important 를 쓴다. */ @media (max-width: 768px) { /* ---- 차단기 목록 공통(제품 목록 · Accessories 페이지 · 통합 검색) ---- */ #wrap.breaker-list #container #main { flex-flow: column nowrap; gap: 24px 0; padding: 20px 16px 40px; } #wrap.breaker-list #container #main .filter { width: 100%; position: static; max-height: none; overflow: visible; padding-right: 0; } #wrap.breaker-list #container #main .filter .sub-title { position: static; box-shadow: none; } /* Specification 접이식 바(2026-10-12 사용자 결정): 접히면 바(선택 요약 + n/전체)만, 펼쳐도 비활성(상위 먼저) 항목은 숨김. 검색창·Accessories Category 는 접힘 안. 열림 판단·요약은 list.jsp 스크립트(mobileFilter) */ #wrap.breaker-list #container #main .filter form { display: flex; flex-direction: column; } #wrap.breaker-list #container #main .filter .sub-title:not(.acc) { order: -1; height: auto; min-height: 52px; padding: 8px 48px 8px 14px; margin: 0; gap: 0 10px; border: 1px solid #DDE3EC; border-radius: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M28 17L20.7071 24.2929C20.3166 24.6834 19.6834 24.6834 19.2929 24.2929L12 17' stroke='%23141C24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") calc(100% - 8px) center no-repeat #F2F4F7; cursor: pointer; } #wrap.breaker-list #container #main .filter.open .sub-title:not(.acc) { margin-bottom: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M12 25L19.2929 17.7071C19.6834 17.3166 20.3166 17.3166 20.7071 17.7071L28 25' stroke='%23141C24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #wrap.breaker-list #container #main .filter .sub-title:not(.acc) > p { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 20px; white-space: normal; overflow-wrap: anywhere; } #wrap.breaker-list #container #main .filter .sub-title:not(.acc) > p::after { content: attr(data-sum); font-size: 13px; font-weight: 400; color: #637083; } #wrap.breaker-list #container #main .filter:not(.open) form > :not(.sub-title:not(.acc)) { display: none; } #wrap.breaker-list #container #main .filter .selects { margin-top: 0; gap: 14px 0; } #wrap.breaker-list #container #main .filter .selects > li.disabled { display: none; } #wrap.breaker-list #container #main .filter .selects[data-more]::after { content: attr(data-more); font-size: 12px; line-height: 16px; color: #637083; padding: 0 2px; } #wrap.breaker-list #container #main .filter .sub-title.acc { margin-top: 20px; } #wrap.breaker-list #container #main .result { width: 100%; min-width: 0; } #wrap.breaker-list #container #main .result .page-title { position: static; box-shadow: none; flex-wrap: wrap; align-items: flex-start; gap: 12px 0; min-height: 0; padding-bottom: 14px; } #wrap.breaker-list #container #main .result .page-title .title { width: 100%; gap: 0 10px; } #wrap.breaker-list #container #main .result .page-title .sel-code { flex: 1 1 100%; width: 100%; margin: 0; padding: 8px 12px; } #wrap.breaker-list #container #main .result .page-title .sel-code > strong { font-size: 16px; line-height: 20px; white-space: normal; overflow-wrap: anywhere; word-break: normal; } #wrap.breaker-list #container #main .result .page-title .sel-code.has-sel > strong { word-break: normal; } #wrap.breaker-list #container #main .result .page-title .sel-total { width: 100%; align-self: auto; justify-content: space-between; margin: 0; } #wrap.breaker-list #container #main .result .page-title .sel-total > strong { flex: 1 1 auto; } #wrap.breaker-list #container #main .result .page-title .code-search { width: 100%; } #wrap.breaker-list #container #main .result .acc-section { margin-top: 28px; } /* 표 → 카드: 머리행 숨김, 행은 줄바꿈. (기존 모바일 규칙의 ul min-width 1100 해제) */ #wrap.breaker-list #container #main .result .list { overflow: visible; } #wrap.breaker-list #container #main .result .list ul { min-width: 0; } #wrap.breaker-list #container #main .result .list ul.head { display: none; } #wrap.breaker-list #container #main .result .list ul.body > li { flex-wrap: wrap; gap: 10px 0; padding: 12px 14px; min-height: 0; } #wrap.breaker-list #container #main .result .list ul.body > li > div.main { flex: 1 1 100% !important; width: 100%; min-width: 0; flex-wrap: wrap; gap: 6px 10px; } #wrap.breaker-list #container #main .result .list ul.body > li > div.main > .code { width: auto !important; flex: 1 1 auto !important; min-width: 0; } #wrap.breaker-list #container #main .result .list ul.body > li > div.main > .code > a { font-size: 14px; line-height: 18px; white-space: normal !important; overflow: visible !important; text-overflow: clip; overflow-wrap: anywhere; } #wrap.breaker-list #container #main .result .list ul.body > li > div.main > .group { width: auto !important; flex: 0 1 auto; max-width: 55%; white-space: normal; text-align: right; margin-left: auto; line-height: 1.3; } #wrap.breaker-list #container #main .result .list ul.body > li > div.main > .desc { flex: 1 1 100%; } #wrap.breaker-list #container #main .result .list ul.body > li > div.main > .desc > a { -webkit-line-clamp: 2; white-space: normal; } #wrap.breaker-list #container #main .result .list ul.body > li > div.nums { flex: 1 1 100% !important; width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 8px 14px !important; padding-left: 0 !important; } #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > div { width: auto !important; flex: 0 0 auto; } #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > .stock, #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > .qty, #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > .price { text-align: left; } #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > .stock::before, #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > .qty::before, #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > .price::before { font-family: var(--font-primary); font-size: 10px; font-weight: 400; color: #6A6A6A; margin-right: 6px; white-space: nowrap; } #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > .stock::before { content: 'Stock'; } #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > .qty::before { content: 'Box qty'; } #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > .stock + .price::before { content: 'Unit'; } #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > .qty + .price::before { content: 'Box'; } #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > .stock { order: 1; } #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > .qty { order: 2; } #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > .price { order: 3; flex: 1 1 calc(50% - 7px); width: auto; justify-content: space-between; gap: 0 8px; min-width: 150px; } #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > .price > span { width: auto; flex: 1 1 auto; text-align: left; } #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > .tech { order: 4; margin-left: auto; } #wrap.breaker-list #container #main .result .list ul.body > li > div.nums > .tech > .cell-blank { display: none; } #wrap.breaker-list #container #main .result .list.acc-list ul.body > li > div.nums > .price { flex: 1 1 auto; } #wrap.breaker-list #container #main .result .list ul.body > li.empty.no-result { padding: 32px 16px; } #wrap.breaker-list .button-add.cell, #wrap.breaker-list .button-inquire.cell { width: 86px; height: 32px; } #wrap.breaker-list .chip > i { max-width: 140px; } #wrap.breaker-list .star { width: 32px; height: 32px; padding: 6px; margin: -4px 0 -4px -6px; } /* 터치 타깃 32px (표시 크기는 그대로) */ /* 통합 검색: 그룹 머리 줄바꿈, 설명 두 줄 */ #wrap.breaker-search #container #main .result .list ul.body > li > div.nums > .price { justify-content: flex-start; } /* Accessories 페이지: 셀렉트 2개 세로 */ #wrap.breaker-list.acc-simple #container #main { padding-top: 24px; } #wrap.breaker-list.acc-simple .acc-head h2 { font-size: 28px; line-height: 32px; padding-bottom: 12px; } #wrap.breaker-list.acc-simple .acc-head .filters { gap: 10px 0; min-height: 0; } #wrap.breaker-list.acc-simple .acc-head .filters > label { width: 100%; } #wrap.breaker-list.acc-simple .acc-head .filters > label > span { flex: 0 0 72px; } #wrap.breaker-list.acc-simple .acc-head .filters > label > select { flex: 1 1 auto; min-width: 0; width: 100%; } #wrap.breaker-list.acc-simple #container #main .result { margin-top: 20px; } /* 상세 모달: 사진·가격 줄바꿈, 스펙 표 라벨 폭, 액세서리 모달은 닫기(X) 아래로 */ #wrap.breaker-list .product-view .head > p.img { width: 100%; height: 150px; } #wrap.breaker-list .product-view .head .name > h3 { font-size: 20px; line-height: 24px; } #wrap.breaker-list .product-view .head .prices { flex-wrap: wrap; gap: 10px 24px; } #wrap.breaker-list .product-view.acc-view .head { padding: 70px 20px 20px; } #wrap.breaker-list .product-view .spec-table > ul > li > span { width: 120px; padding: 10px 12px; } #wrap.breaker-list .product-view .spec-table > ul > li > strong { padding: 10px 12px; } #wrap.breaker-list .inquiry-view .box { padding: 24px 18px 20px; } #wrap.breaker-list .inquiry-view form > ul > li.half { width: 100%; } /* ---- Download Center: #main 이 column wrap 이라 내용 폭으로 커지던 문제 + 행 카드 ---- */ #wrap.download-center #container #main { flex-flow: column nowrap; min-width: 0; width: 100%; } #wrap.download-center #container #main .page-title, #wrap.download-center #container #main .filters { margin: 0 20px; } #wrap.download-center #container #main .filters { gap: 10px 0; min-height: 0; } #wrap.download-center #container #main .filters > label > span { flex: 0 0 72px; } #wrap.download-center #container #main .filters > label > select { min-width: 0; width: 100%; } #wrap.download-center #container #main .section { margin-top: 24px; } #wrap.download-center #container #main .section .list-wrap { overflow: visible; padding: 0 20px; } #wrap.download-center #container #main .section .list { min-width: 0; } #wrap.download-center #container #main .section .list ul.head { display: none; } #wrap.download-center #container #main .section .list ul.body > li { height: auto; flex-wrap: wrap; gap: 8px 12px; padding: 14px 16px; } #wrap.download-center #container #main .section .list ul.body > li.empty { height: 100px; } #wrap.download-center #container #main .section .list ul.body > li > div.type { width: auto; } #wrap.download-center #container #main .section .list ul.body > li > div.name { flex: 1 1 0; min-width: 60%; padding-right: 0; } #wrap.download-center #container #main .section .list ul.body > li > div.name > p { white-space: normal; line-height: 1.3; } #wrap.download-center #container #main .section .list ul.body > li > div.line, #wrap.download-center #container #main .section .list ul.body > li > div.category, #wrap.download-center #container #main .section .list ul.body > li > div.size, #wrap.download-center #container #main .section .list ul.body > li > div.date { width: auto; font-size: 11px; color: #6A6A6A; } #wrap.download-center #container #main .section .list ul.body > li > div.line::after, #wrap.download-center #container #main .section .list ul.body > li > div.category::after, #wrap.download-center #container #main .section .list ul.body > li > div.size::after { content: '·'; margin-left: 12px; color: #CED2DA; } #wrap.download-center #container #main .section .list ul.body > li > div.action { flex: 1 1 100%; width: 100%; margin-left: 0; justify-content: flex-start; } #wrap.download-center #container #main .section .list ul.body > li > div.action .button-get { width: 100%; height: 36px; } #wrap.download-center #container #main .section .paging { margin: 0 20px; } /* ---- Cart · Checkout: LNB(aside.lnb)는 다른 My Account 페이지의 #aside 와 같은 접이식 "My Account" 바(2026-10-12 보고: Cart 만 상단 메뉴가 달라 보임), 표는 카드, 요약은 전체 폭 ---- */ #wrap.member-cart #container #main { flex-flow: column nowrap; align-items: stretch; gap: 20px 0; padding: 0 16px 40px; min-height: 0; } .lnb { flex: 0 0 auto; width: calc(100% + 32px); margin: 0 -16px 10px; } /* #main 패딩을 벗어나 #aside 처럼 화면 끝까지 */ .lnb h2 { height: 60px; display: flex; align-items: center; padding: 0 20px; font-size: 14px; line-height: 1; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M28 17L20.7071 24.2929C20.3166 24.6834 19.6834 24.6834 19.2929 24.2929L12 17' stroke='%23141C24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") calc(100% - 20px) center no-repeat #F2F4F7; } .lnb h2.active { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M12 25L19.2929 17.7071C19.6834 17.3166 20.3166 17.3166 20.7071 17.7071L28 25' stroke='%23141C24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .lnb ul { display: none; position: relative; margin: 0 0 6px; padding: 10px 14px; flex-direction: row; flex-wrap: wrap; gap: 0 22px; width: min(360px, 100%); } .lnb ul::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 100vw; height: 6px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.00) 100%); } .lnb h2.active + ul { display: flex; } .lnb ul > li { flex: 0 0 auto; width: min(150px, 100%); } .lnb ul > li > a { height: 40px; padding: 0; border-radius: 0; font-size: 14px; white-space: nowrap; gap: 0 7px; } .lnb ul > li.on > a, .lnb ul > li > a:hover { background: none; } .lnb ul > li > a svg { width: 20px; height: 20px; } .lnb .badge { margin-left: 2px; } #wrap.member-cart .content { width: 100%; } #wrap.member-cart #container #main .page-title { flex-flow: row wrap; justify-content: flex-start; align-items: center; text-align: left; font-size: 22px; line-height: 1.2; gap: 6px 8px; margin: 0 0 14px; } #wrap.member-cart .cart-table ul.head { display: none; } #wrap.member-cart .cart-table ul > li { gap: 8px 12px; padding: 0 16px; } #wrap.member-cart .cart-table ul.body > li { flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; } #wrap.member-cart .cart-table ul.body > li.empty { padding: 32px 16px; } #wrap.member-cart .cart-table div.code { flex: 1 1 100%; width: 100%; } #wrap.member-cart .cart-table div.code > strong { white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 18px; } #wrap.member-cart .cart-table div.code > span { white-space: normal; line-height: 14px; } #wrap.member-cart .cart-table div.qty { width: auto; flex: 1 1 auto; justify-content: flex-start; } #wrap.member-cart.checkout .cart-table div.qty { width: auto; } #wrap.member-cart .cart-table div.price { width: auto; flex: 0 0 auto; margin-left: auto; } #wrap.member-cart .cart-table ul.body > li.total > div.qty { display: none; } #wrap.member-cart .summary { flex: 1 1 100%; width: 100%; max-width: none; } #wrap.member-cart .summary h2 { margin: 10px 0 16px; } #wrap.member-cart.checkout .content { max-width: none; } #wrap.member-cart.checkout .addresses { flex-direction: column; gap: 20px 0; margin-top: 20px; } #wrap.member-cart.checkout .addr .head { height: auto; min-height: 40px; flex-wrap: wrap; gap: 6px 10px; } #wrap.member-cart.checkout .summary .comments.terms li > .k { flex: 0 0 76px; } /* ---- My Account(History · Favorite · 주문 상세): 표 → 카드, 추적 표만 가로 스크롤 ---- */ #wrap.my-account #container #main .page-title > p.path { font-size: 22px; flex-wrap: wrap; gap: 0 8px; } #wrap.my-account #container #main .page-title > p.path > i { width: 18px; height: 18px; background-size: 18px; } #wrap #container #main .section .list-wrap { padding: 0 20px; } #wrap.my-account #container #main .section div.list ul > li { padding: 12px 16px; } #wrap.my-account #container #main .section div.list ul > li > div { justify-content: flex-start; text-align: left; } /* History & Status: 날짜·상태 / Cart No. / Order No. / 품목 / 취소 */ #wrap.my-account.history-status #container #main .section2 .list > ul.head { display: none; } #wrap.my-account.history-status #container #main .section2 .list > ul > li { flex-wrap: wrap; gap: 8px 12px; } #wrap.my-account.history-status #container #main .section2 .list > ul > li > div { width: auto; flex: 0 0 auto; } #wrap.my-account.history-status #container #main .section2 .list > ul.body > li > div:nth-of-type(1) { order: 1; font-size: 11px; color: #6A6A6A; } #wrap.my-account.history-status #container #main .section2 .list > ul.body > li > div:nth-of-type(5) { order: 2; margin-left: auto; width: auto; } #wrap.my-account.history-status #container #main .section2 .list > ul.body > li > div.no { order: 3; flex: 1 1 100%; flex-direction: row; align-items: center; gap: 0 8px; } #wrap.my-account.history-status #container #main .section2 .list > ul.body > li > div.no::before { flex: 0 0 64px; font-size: 11px; color: #6A6A6A; } #wrap.my-account.history-status #container #main .section2 .list > ul.body > li > div:nth-of-type(2)::before { content: 'Cart No.'; } #wrap.my-account.history-status #container #main .section2 .list > ul.body > li > div:nth-of-type(3)::before { content: 'Order No.'; } #wrap.my-account.history-status #container #main .section2 .list > ul.body > li > div.no > a { overflow-wrap: anywhere; } #wrap.my-account.history-status #container #main .section2 .list > ul.body > li > div.no .canceled { width: auto; padding: 0 8px; } #wrap.my-account.history-status #container #main .section2 .list > ul.body > li > div:nth-of-type(4) { order: 4; flex: 1 1 100%; } #wrap.my-account.history-status #container #main .section2 .list > ul.body > li > div:nth-of-type(6) { order: 5; flex: 1 1 100%; } #wrap.my-account.history-status #container #main .section2 .list > ul.body > li > div:nth-of-type(6):empty { display: none; } #wrap.my-account.history-status #container #main .section2 .button-cancel { width: auto; padding: 0 14px; height: 28px; line-height: 26px; } #wrap.my-account.history-status #container #main .section2 > dl { padding: 0 20px; } #wrap.my-account.history-status #container #main .search-wrap > ul > li:nth-of-type(1) { flex-wrap: wrap; } /* 주문 상세 1 (Cart No. Details): 코드 / 수량·단가·합계 */ #wrap.orders-detail.detail1 #container #main .section2 .list { width: 100%; } #wrap.orders-detail.detail1 #container #main .section2 .list > ul.head { display: none; } #wrap.orders-detail.detail1 #container #main .section2 .list > ul > li { flex-wrap: wrap; justify-content: flex-start; gap: 6px 16px; } #wrap.orders-detail.detail1 #container #main .section2 .list > ul > li > div { width: auto; } #wrap.orders-detail.detail1 #container #main .section2 .list > ul.body > li > div:nth-of-type(1) { flex: 1 1 100%; overflow-wrap: anywhere; } #wrap.orders-detail.detail1 #container #main .section2 .list > ul.body > li > div:nth-of-type(2)::before, #wrap.orders-detail.detail1 #container #main .section2 .list > ul.body > li > div:nth-of-type(3)::before { font-size: 11px; color: #6A6A6A; margin-right: 6px; font-weight: 400; } #wrap.orders-detail.detail1 #container #main .section2 .list > ul.body > li > div:nth-of-type(2)::before { content: 'Qty'; } #wrap.orders-detail.detail1 #container #main .section2 .list > ul.body > li > div:nth-of-type(3)::before { content: '@'; } #wrap.orders-detail.detail1 #container #main .section2 .list > ul.body > li > div:nth-of-type(4) { margin-left: auto; } #wrap.orders-detail.detail1 #container #main .section2 > ul.total > li { justify-content: space-between; } #wrap.orders-detail #container #main .section2 .title.inner-wrap { flex-wrap: wrap; gap: 10px; } /* 주문 상세 2 (ERP 추적 12열): 표만 가로 스크롤 — 열을 접으면 납기 추적이 안 보임 */ #wrap.orders-detail.detail2 #container #main .section2 .list-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } #wrap.orders-detail.detail2 #container #main .section2 .list.ma { width: 1100px; min-width: 1100px; } #wrap.orders-detail.detail2 #container #main .section2 .list.ma > ul > li { padding: 12px 16px; } #wrap.orders-detail.detail2 #container #main .section2 .list.ma > ul > li > div:nth-of-type(2) { word-break: normal; overflow-wrap: anywhere; } #wrap.orders-detail.detail2 #container #main .section2 .list-wrap::after { content: 'Swipe sideways to see all columns'; display: block; margin-top: 8px; font-size: 11px; color: var(--text-tertiary); position: sticky; left: 0; } #wrap.orders-detail.detail2 #container #main .section2 .as-of { padding: 0; position: sticky; left: 0; } #wrap.orders-detail #container #main .section1 > div { padding: 20px 0; } #wrap.orders-detail #container #main .section1 > div > ul > li { min-width: 0; } /* Favorite Product: 담은 시간 · 코드 / 제품 / 재고·단가 / Cart·문서·삭제 */ #wrap.favorite-product #container #main .section1 .list-wrap { overflow: visible; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul.head { display: none; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul > li { flex-wrap: wrap; gap: 8px 14px; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul > li > div { flex: 0 0 auto; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul.body > li > div.date { flex: 1 1 100%; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul.body > li > div.code { flex: 1 1 100%; white-space: normal; overflow-wrap: anywhere; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul.body > li > div.prod { flex: 1 1 100%; white-space: normal; overflow: visible; flex-wrap: wrap; gap: 2px 10px; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul.body > li > div.stock::before, #wrap.favorite-product #container #main .section1 .list.fav-list > ul.body > li > div.price::before { font-size: 11px; font-weight: 400; color: #6A6A6A; margin-right: 6px; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul.body > li > div.stock::before { content: 'Stock'; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul.body > li > div.price::before { content: 'Unit'; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul.body > li > div.cart { flex: 1 1 100%; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul.body > li > div.del { margin-left: auto; } #wrap.favorite-product #container #main .section1 .list.fav-list > ul.body > li.empty { padding: 32px 16px; } /* 햄버거 메뉴의 Sign In 버튼: 저압전동기 녹색 → 네이비(2026-09-30 로그인·Quotes 네이비 통일과 맞춤) */ #wrap #header .sign-in > a { background: var(--HD_Discovery_Blue); } /* ---- 로그인: 카드가 400px 고정이라 390px 폰에서 잘림 ---- */ #wrap.login { height: auto; min-height: 100vh; padding: 40px 16px 80px; } #wrap.login > div { width: min(400px, 100%); } #wrap.login > div > form > div { padding: 30px 20px; } #wrap.login > div > dl { width: 100%; } #wrap.login .copyright { position: static; transform: none; margin-top: 40px; text-align: center; } } /* ---- Accessories 페이지 한 화면 고정 (2026-10-13 고객 캡처 image-7): PC 에서는 머리글·필터·표 머리행·페이징·푸터가 모두 뷰포트 안에 들어가고 표 본문(.list)만 스크롤, 머리행은 sticky 로 고정. 모바일(≤768)은 기존 카드 배치 그대로 ---- */ @media (min-width: 769px) { #wrap.breaker-list.acc-simple { height: 100vh; min-height: 0; flex-wrap: nowrap; } /* #wrap 은 column wrap 이라 높이를 고정하면 둘째 열로 넘어가므로 nowrap. overflow 는 숨기지 않음 — 화면이 아주 낮으면 페이지 스크롤로 */ #wrap.breaker-list.acc-simple #header { flex: 0 0 auto; } /* 2026-10-13: 높이 고정 뒤 헤더가 flex 축소로 41px 로 눌리던 문제(GNB 깨짐) */ #wrap.breaker-list.acc-simple #container { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 20px 28px; } #wrap.breaker-list.acc-simple #container #main { flex: 1 1 auto; min-height: 0; padding: 0 30px; } #wrap.breaker-list.acc-simple #container #main .result { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-top: 20px; } #wrap.breaker-list.acc-simple #container #main .result .page-title { flex: 0 0 auto; } #wrap.breaker-list.acc-simple #container #main .result .list { flex: 1 1 auto; min-height: 120px; overflow: auto; } #wrap.breaker-list.acc-simple #container #main .result .list ul.head { position: sticky; top: 0; z-index: 2; } #wrap.breaker-list.acc-simple #container #main .result .paging { flex: 0 0 auto; } #wrap.breaker-list.acc-simple #container #main .result .paging > li { padding: 14px 0 0; } #wrap.breaker-list.acc-simple #footer { flex: 0 0 auto; } } /* ====================== 공용 다이얼로그 (static/js/hd-dialog.js — 브라우저 alert/confirm 대체, 2026-10-14) ====================== */ .hd-dialog { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(16, 24, 32, 0.45); font-family: var(--font-primary); } .hd-dialog.is-open { display: flex; } .hd-dialog__box { width: min(440px, 100%); background: #fff; border-radius: 10px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); padding: 30px 30px 22px; animation: hd-dialog-in .14s ease-out; } @keyframes hd-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } } .hd-dialog__title { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--text-primary); } .hd-dialog__msg { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-primary); white-space: pre-line; word-break: break-word; } .hd-dialog__btns { display: flex; justify-content: flex-end; gap: 0 8px; margin-top: 24px; } .hd-dialog__btn { min-width: 96px; height: 40px; padding: 0 20px; border-radius: 6px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; } .hd-dialog__btn.ok { border: 1px solid var(--HD_Discovery_Blue); background: var(--HD_Discovery_Blue); color: #fff; } .hd-dialog__btn.ok:hover { background: #00256B; border-color: #00256B; } .hd-dialog__btn.ok:focus-visible { outline: 2px solid #7FA3E6; outline-offset: 2px; } .hd-dialog__btn.cancel { border: 1px solid #CED2DA; background: #fff; color: #344051; } .hd-dialog__btn.cancel:hover { background: #F4F6FA; } @media (max-width: 768px) { .hd-dialog__box { padding: 24px 20px 18px; } .hd-dialog__btns { margin-top: 20px; } .hd-dialog__btn { flex: 1 1 0; min-width: 0; } }