@charset "utf-8";

.optics-page,
.optics-page .sub_contents {
    background: #fff;
    color: #172331;
}

.optics-page .floating-widget,
.optics-page .top-btn i {
    display: none;
}

.optics-page .top-btn {
    border-radius: 0;
}

.optics-page footer {
    border-top: 1px solid #e2e7ed;
    background: #fff;
}

.optics-page .optics-container {
    width: calc(100% - 72px);
    max-width: 1600px;
}

.optics-page .optics-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 48px;
    margin: 0;
}

.optics-page .optics-layout::before,
.optics-page .optics-layout::after {
    display: none;
}

.optics-page .optics-layout > .sub_left,
.optics-page .optics-layout > .sub_right {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
}

.optics-page .sub_left .title {
    padding: 25px 0 27px;
    background: #fff;
    color: #172331;
    border-top: 3px solid #172331;
    border-bottom: 1px solid #dfe5eb;
    font-size: 32px;
    font-weight: 700;
}

.optics-page .sub_left .title::before,
.optics-page .sub_left .title::after {
    display: none;
}

.optics-page .sub_left .sub_menu {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.optics-page .sub_left .sub_menu li {
    border: 0;
    border-bottom: 1px solid #e2e7ed;
}

.optics-page .sub_left .sub_menu a {
    display: block;
    padding: 22px 0;
    color: #465363;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 500;
    word-break: keep-all;
}

.optics-page .sub_left .sub_menu a::before,
.optics-page .sub_left .sub_menu a::after {
    display: none;
}

.optics-page .sub_left .sub_menu .active a,
.optics-page .sub_left .sub_menu a:hover {
    color: #154492;
    font-weight: 700;
}

.optics-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-height: 32px;
    margin: 0 0 20px;
    color: #66717d;
    font-size: 14px;
}

.optics-breadcrumb a { color: inherit; }
.optics-breadcrumb [aria-current="page"] { color: #154492; }
.optics-breadcrumb > span[aria-hidden] { color: #bec6cf; }

.optics-tabs {
    display: grid;
    grid-template-columns: repeat(var(--solution-tab-count, 3), minmax(0, 1fr));
    border-top: 1px solid #dce2e9;
    border-bottom: 1px solid #dce2e9;
    background: #fff;
}

.optics-tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 76px;
    padding: 20px 12px;
    border-right: 1px solid #e5e9ef;
    border-radius: 0;
    color: #465363;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    word-break: keep-all;
    transition: color .15s ease;
}

.optics-tab:last-child { border-right: 0; }
.optics-tab:hover,
.optics-tab:focus,
.optics-tab.is-active { color: #154492; text-decoration: none; }
.optics-tab.is-active { font-weight: 700; }
.optics-tab.is-active::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 4px;
    background: #154492;
    content: "";
}

.optics-tab:focus-visible,
.optics-page .sub_left a:focus-visible {
    outline: 2px solid #154492;
    outline-offset: -5px;
}

.optics-title {
    margin: 38px 0 26px;
    color: #172331;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.025em;
    word-break: keep-all;
}

.optics-media { min-height: 160px; }
.optics-figure { margin: 0 0 32px; background: #fff; }
.optics-figure > a { display: block; cursor: zoom-in; }
.optics-figure img { display: block; width: 100%; max-width: 100%; height: auto; border: 0; }

.solution-sidebar-group { margin: 0; padding: 0; border-bottom: 1px solid #e2e7ed; }
.solution-sidebar-group > summary { padding: 20px 0; color: #465363; font-size: 17px; font-weight: 600; line-height: 1.6; list-style: none; cursor: pointer; word-break: keep-all; overflow-wrap: anywhere; }
.solution-sidebar-group > summary::-webkit-details-marker { display: none; }
.solution-sidebar-group[open] > summary { color: #154492; }
.solution-sidebar-group > summary:focus-visible { outline: 2px solid #154492; outline-offset: 2px; }
.solution-sidebar-group > ul { margin: -6px 0 20px; padding: 0 0 0 13px; border-left: 2px solid #e2e7ed; list-style: none; }
.solution-sidebar-group li a { display: block; padding: 8px 0; color: #657180; font-size: 15px; line-height: 1.6; word-break: keep-all; }
.solution-sidebar-group li a:hover,
.solution-sidebar-group li a[aria-current="page"] { color: #154492; font-weight: 700; text-decoration: none; }
.solution-pending { display: flex; align-items: center; justify-content: center; min-height: 320px; margin-bottom: 40px; border-top: 1px solid #dce2e9; border-bottom: 1px solid #dce2e9; color: #66717d; font-size: 22px; font-weight: 500; }

.lighting-categories {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-bottom: 46px;
    border: 1px solid #dce2e9;
    border-top: 2px solid #172331;
    background: #fff;
}
.lighting-categories.controller-categories { grid-template-columns: repeat(2,minmax(0,1fr)); }
.controller-categories .lighting-category-group { padding: 0 22px 22px; }
.controller-categories .lighting-category-group li a { padding: 3px 0; font-size: 15px; }
.lighting-category-group { min-width: 0; padding: 0 12px 18px; border-right: 1px solid #e4e8ed; }
.lighting-category-group:last-child { border-right: 0; }
.lighting-category-group h2 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.5; }
.lighting-category-group h2 a { display: block; min-height: 66px; padding: 20px 0 14px; color: #172331; word-break: keep-all; }
.lighting-category-group ul { margin: 0; padding: 0; list-style: none; }
.lighting-category-group li + li { margin-top: 10px; }
.lighting-category-group li a { display: block; color: #5b6674; font-size: 14px; line-height: 1.6; word-break: keep-all; overflow-wrap: break-word; }
.lighting-category-group.is-current { box-shadow: inset 0 3px #154492; }
.lighting-category-group.is-current h2 a,
.lighting-category-group a:hover,
.lighting-category-group a[aria-current="page"] { color: #154492; }
.lighting-category-group a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.lighting-products { scroll-margin-top: 140px; }
.lighting-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid #dce2e9; }
.lighting-list-heading h2 { margin: 0; color: #172331; font-size: 23px; font-weight: 700; line-height: 1.5; }
.lighting-list-heading h2 span { display: inline-block; margin-left: 12px; color: #687381; font-size: 16px; font-weight: 400; }
.lighting-text-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 17px; border: 1px solid #d5dde7; border-radius: 0; color: #465363; font-size: 15px; font-weight: 600; background: #fff; line-height: 1.5; }
.lighting-text-button:hover,
.lighting-text-button.is-active { border-color: #154492; color: #154492; text-decoration: none; }
.lighting-product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; margin-top: 26px; }
.lighting-product-card { min-width: 0; border: 1px solid #e1e6ec; background: #fff; transition: border-color .15s; }
.lighting-product-card > a { display: block; height: 100%; color: #172331; text-decoration: none; }
.lighting-card-image { aspect-ratio: 4 / 3; margin: 18px 18px 0; overflow: hidden; background: #fff; }
.lighting-card-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lighting-product-card h3 { margin: 0; padding: 20px 22px 23px; border-top: 1px solid #edf0f4; font-size: 18px; font-weight: 600; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.lighting-product-card:hover { border-color: #154492; }
.lighting-product-card:hover h3 { color: #154492; }
.lighting-categories a:focus-visible,
.lighting-product-card > a:focus-visible,
.lighting-text-button:focus-visible,
.lighting-inquiry:focus-visible,
.lighting-thumbnail:focus-visible { outline: 2px solid #154492; outline-offset: 3px; }
.lighting-detail-navigation { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; }
.lighting-detail-navigation > span { color: #657180; font-size: 15px; line-height: 1.6; }
.lighting-product-overview { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 40px; margin-bottom: 52px; }
.lighting-gallery { min-width: 0; }
.lighting-hero { display: block; aspect-ratio: 4 / 3; border: 1px solid #e1e6ec; cursor: zoom-in; background: #fff; }
.lighting-hero img { display: block; width: 100%; height: 100%; padding: 16px; object-fit: contain; }
.lighting-thumbnails { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.lighting-thumbnail { appearance: none; min-width: 0; padding: 3px; aspect-ratio: 1; border: 1px solid #dce2e9; border-radius: 0; background: #fff; cursor: pointer; }
.lighting-thumbnail[aria-pressed="true"] { border: 2px solid #154492; padding: 2px; }
.lighting-thumbnail img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lighting-product-facts h2,
.lighting-product-detail > h2 { margin: 0; padding: 0 0 17px; border-bottom: 2px solid #172331; color: #172331; font-size: 23px; font-weight: 700; line-height: 1.5; }
.lighting-product-facts dl { margin: 0 0 28px; }
.lighting-product-facts dl > div { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 16px; padding: 17px 0; border-bottom: 1px solid #e2e7ed; font-size: 16px; line-height: 1.65; }
.lighting-product-facts dt { color: #687381; font-weight: 500; }
.lighting-product-facts dd { margin: 0; color: #172331; overflow-wrap: anywhere; }
.lighting-model { display: block; }
.lighting-inquiry { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 30px; background: #154492; border: 1px solid #154492; border-radius: 0; color: #fff; font-size: 16px; font-weight: 600; line-height: 1.5; }
.lighting-inquiry:hover,
.lighting-inquiry:focus { background: #113876; color: #fff; text-decoration: none; }
.lighting-product-detail { margin-bottom: 40px; }
.lighting-product-detail > h2 { margin-bottom: 30px; }
.lighting-detail-image { display: block; width: 100%; max-width: 1000px; margin: 0 auto; cursor: zoom-in; }
.lighting-detail-image img { display: block; width: 100%; height: auto; }
.lighting-detail-text { font-size: 17px; line-height: 1.8; white-space: normal; }
.lighting-empty { padding: 45px 0; color: #465363; font-size: 18px; }

@media (max-width: 1199px) {
    .optics-page .optics-container { width: calc(100% - 48px); }
    .optics-page .optics-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; }
    .optics-tab { font-size: 17px; }
    .lighting-category-group { padding-right: 9px; padding-left: 9px; }
    .lighting-category-group h2 { font-size: 15px; }
    .lighting-category-group li a { font-size: 13px; }
    .lighting-product-grid { gap: 18px; }
    .lighting-product-overview { gap: 28px; }
}

@media (max-width: 991px) {
    .optics-page .optics-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .optics-page .optics-layout > .sub_left { display: none !important; }
    .optics-page .optics-layout > .sub_right { margin: 0; }
    .lighting-categories { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .lighting-category-group { padding: 0 16px 20px; border-bottom: 1px solid #e4e8ed; }
    .lighting-category-group:nth-child(4) { border-right: 0; }
    .lighting-category-group:nth-child(n+5) { border-bottom: 0; }
    .lighting-category-group h2 { font-size: 16px; }
    .lighting-category-group li a { font-size: 14px; }
}

@media (max-width: 767px) {
    .optics-page .optics-container { width: calc(100% - 28px); }
    .optics-page .sub_contents { padding-top: 24px; }
    .optics-breadcrumb { font-size: 12px; gap: 9px; margin-bottom: 16px; }
    .optics-tab { min-height: 78px; padding: 16px 7px; font-size: 15px; }
    .optics-title { font-size: 26px; margin: 28px 0 20px; }
    .optics-figure { margin-bottom: 20px; }
    .optics-tabs[data-columns="4"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .optics-tabs[data-columns="4"] .optics-tab { min-height: 62px; border-bottom: 1px solid #e5e9ef; }
    .optics-tabs[data-columns="4"] .optics-tab:nth-child(even) { border-right: 0; }
    .optics-tabs[data-columns="4"] .optics-tab:nth-child(n+3) { border-bottom: 0; }
    .solution-pending { min-height: 260px; font-size: 20px; }
    .lighting-categories { grid-template-columns: repeat(2,minmax(0,1fr)); margin-bottom: 30px; }
    .lighting-category-group { padding: 0 12px 18px; border-right: 1px solid #e4e8ed; }
    .lighting-category-group:nth-child(even) { border-right: 0; }
    .lighting-category-group:nth-child(n+5) { border-bottom: 1px solid #e4e8ed; }
    .lighting-category-group:last-child { border-right: 1px solid #e4e8ed; border-bottom: 0; }
    .lighting-category-group h2 a { min-height: 58px; padding-top: 17px; }
    .lighting-list-heading { gap: 12px; }
    .lighting-list-heading h2 { font-size: 20px; }
    .lighting-list-heading h2 span { margin-left: 8px; font-size: 14px; }
    .lighting-text-button { min-height: 40px; padding: 8px 12px; font-size: 14px; flex-shrink: 0; }
    .lighting-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 20px; }
    .lighting-card-image { margin: 10px 10px 0; }
    .lighting-product-card h3 { padding: 14px 12px 16px; font-size: 15px; }
    .lighting-detail-navigation { gap: 14px; }
    .lighting-detail-navigation > span { font-size: 14px; }
    .lighting-product-overview { grid-template-columns: minmax(0,1fr); gap: 30px; margin-bottom: 38px; }
    .lighting-product-facts h2,
    .lighting-product-detail > h2 { font-size: 21px; }
    .lighting-products { scroll-margin-top: 100px; }
    .controller-categories .lighting-category-group { padding-right: 12px; padding-left: 12px; border-bottom: 0; }
    .controller-categories .lighting-category-group li a { font-size: 14px; }
}