/*
 * product-base.css — sena.com common.css 중 제품상세(product-view) 섹션이 의존하는
 * 공통 규칙(변수·리셋·버튼·.inner·.sub_content·.dim)만 옮긴 파일. 폰트는 사이트 기본 폰트를 상속한다.
 * Porto 전역 스타일과 충돌하지 않도록 .pv-root(템플릿 래퍼) 하위로 범위를 제한한다.
 *
 * rem 단위: sena.com은 PC(≥1181px)에서 html font-size 62.5%(=10px), 그 외 16px 기준으로
 * rem을 쓴다. 이 테마의 html font-size와 무관하게 같은 크기가 나오도록 product.css 등의
 * `Nrem`을 `calc(N * var(--pv-rem))`으로 변환해 두었고, --pv-rem 값을 여기서 정의한다.
 */
html { --pv-rem: 16px; }
@media (min-width: 1181px) { html { --pv-rem: 10px; } }


/* sena.com 브랜드 폰트 (제품명 타이틀용, sena.com common.css 원문) */
@font-face {
    font-family: 'SENA';
    font-weight: 400;
    font-style: normal;
    src: url('../fonts/sena/SENA.woff2') format('woff2'),
        url('../fonts/sena/SENA.woff') format('woff'),
        url('../fonts/sena/SENA.ttf') format('truetype');
    font-display: swap;
}

:root {
    --point-color: #B32D26;
    --font-sena: 'SENA';
}

/* ---- 스코프 리셋 (sena.com common.css 전역 리셋의 래퍼 한정판) ---- */
.pv-root {
    color: #000;
    line-height: 1;
    font-size: calc(2 * var(--pv-rem));
    word-wrap: break-word;
}
.pv-root *, .pv-root *::before, .pv-root *::after { box-sizing: border-box; }
.pv-root div, .pv-root span, .pv-root h1, .pv-root h2, .pv-root h3, .pv-root h4, .pv-root h5, .pv-root h6,
.pv-root p, .pv-root a, .pv-root em, .pv-root img, .pv-root strong, .pv-root ol, .pv-root ul, .pv-root li,
.pv-root table, .pv-root tbody, .pv-root thead, .pv-root tr, .pv-root th, .pv-root td,
.pv-root section, .pv-root video, .pv-root button {
    margin: 0; padding: 0; border: 0;
    font: inherit; font-weight: 400; vertical-align: baseline; letter-spacing: normal;
}
.pv-root ol, .pv-root ul, .pv-root li { list-style: none; }
.pv-root table { width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0; }
.pv-root a { color: #191919; text-decoration: none; }
.pv-root a:hover, .pv-root a:focus { text-decoration: none; }
.pv-root em, .pv-root address { font-style: normal; }
.pv-root strong { color: #000; font-weight: 700; }
.pv-root img { max-width: 100%; height: auto; vertical-align: top; }
.pv-root h2, .pv-root h3, .pv-root h4, .pv-root h5, .pv-root h6 { color: #000; font-weight: 700; }
.pv-root button { cursor: pointer; background: none; }
.pv-root .hidden { overflow: hidden; }

/* ---- Porto(Bootstrap) 전역 클래스 충돌 중화 ----
 * 제품상세 마크업의 클래스명 중 Porto 전역 CSS 에도 규칙이 있는 것은 .card 와 .small 뿐 (2026-09 대조).
 * .small 은 버튼 규칙(.pv-root a[class^="btn_"].small)이 더 높은 우선순위로 덮으므로 별도 처리 불필요.
 * .card 는 Bootstrap 이 flex 컬럼·흰 배경·1px 테두리를 주므로 sena.com 기본 상태(장식 없음)로 되돌린다.
 * 섹션 CSS(product.css, flexible/*.css)가 더 높은 우선순위로 뒤에 로드되므로 필요한 값은 거기서 다시 지정된다. */
.pv-root .card {
    display: block;
    flex-direction: initial;
    min-width: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
}

/* 말줄임 */
.pv-root [class*="ellipsis"] {
    overflow: hidden; white-space: normal; text-overflow: ellipsis;
    display: -webkit-box; -webkit-box-orient: vertical; word-break: break-all;
}
.pv-root .ellipsis01 { -webkit-line-clamp: 1; }
.pv-root .ellipsis02 { -webkit-line-clamp: 2; }
.pv-root .ellipsis03 { -webkit-line-clamp: 3; }

/* ---- 이하 sena.com common.css 원문 (버튼 · .inner · .sub_content · .dim) ---- */
.pv-root a[class^="btn_"],
.pv-root button[class^="btn_"] {
    display: inline-block;
    border-width: 1px;
    border-style: solid;
    border-radius: calc(99 * var(--pv-rem));
    text-align: left;
    font-weight: 700;
    isolation: isolate;
    transition: all .2s;
}
.pv-root a[class^="btn_"].small,
.pv-root button[class^="btn_"].small {
    padding: calc(.8 * var(--pv-rem)) calc(1.6 * var(--pv-rem));
    font-size: calc(1.4 * var(--pv-rem));
}
.pv-root a[class^="btn_"].medium,
.pv-root button[class^="btn_"].medium {
    padding: calc(1.2 * var(--pv-rem)) calc(2 * var(--pv-rem));
    font-size: calc(1.4 * var(--pv-rem));
}
.pv-root a[class^="btn_"].large,
.pv-root button[class^="btn_"].large {
    padding: calc(1.9 * var(--pv-rem)) calc(2.8 * var(--pv-rem));
    font-size: calc(1.6 * var(--pv-rem));
}
.pv-root a[class^="btn_"] span,
.pv-root button[class^="btn_"] span {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}
/* a[class^="btn_"] .arrow,
.pv-root button[class^="btn_"] .arrow {
    display: flex;
    align-items: center;
    height: 100%;
} */
.pv-root a[class^="btn_"] .arrow::before,
.pv-root button[class^="btn_"] .arrow::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 100%;
    transition: all .2s;
}

.pv-root a[class^="btn_"].small .arrow,
.pv-root button[class^="btn_"].small .arrow {
    padding-right: calc(1.4 * var(--pv-rem));
}
.pv-root a[class^="btn_"].small .arrow::before,
.pv-root button[class^="btn_"].small .arrow::before {
    width: calc(.6 * var(--pv-rem));
    height: calc(1 * var(--pv-rem));
}
.pv-root a[class^="btn_"].medium .arrow,
.pv-root button[class^="btn_"].medium .arrow {
    padding-right: calc(2 * var(--pv-rem));
}
.pv-root a[class^="btn_"].medium .arrow::before,
.pv-root button[class^="btn_"].medium .arrow::before {
    width: calc(1.2 * var(--pv-rem));
    height: calc(1.2 * var(--pv-rem));
}
.pv-root a[class^="btn_"].large .arrow,
.pv-root button[class^="btn_"].large .arrow {
    padding-right: calc(2.4 * var(--pv-rem));
}
.pv-root a[class^="btn_"].large .arrow::before,
.pv-root button[class^="btn_"].large .arrow::before {
    width: calc(1.2 * var(--pv-rem));
    height: calc(1.2 * var(--pv-rem));
}

/* brain 241119 font weight */
.w500 {
    font-weight: 500;
}
.w700 {
    font-weight: 700;
}

/* btn white line */
.pv-root .btn_white_line {
    border-color: rgba(255, 255, 255, 0.80);
    color: #fff;
}

.pv-root .btn_white_line.large .arrow::before {
    background-image: url("../images/common/btn_arrow_white.svg");
}

/* btn gray line */
.pv-root .btn_gray_line {
    border-color: #D9D9D9;
    color: #000;
    background: #fff;
}
.pv-root .btn_gray_line.small .arrow::before {
    background-image: url("../images/common/btn_small_arrow_black.svg")
}
.pv-root .btn_gray_line.medium .arrow::before,
.pv-root .btn_gray_line.large .arrow::before {
    background-image: url("../images/common/btn_arrow_black.svg")
}

.pv-root .btn_black_line {
    border-color: #333;
    color: #000;
    background: #fff;
}
.pv-root .btn_black_line.small .arrow::before {
    background-image: url("../images/common/btn_small_arrow_black.svg")
}
.pv-root .btn_black_line.medium .arrow::before,
.pv-root .btn_black_line.large .arrow::before {
    background-image: url("../images/common/btn_arrow_black.svg")
}

/* btn black */
.pv-root .btn_black {
    border-color: #000;
    background: #000;
    color: #fff;
}
.pv-root .btn_black .arrow::before {
    background-image: url("../images/common/btn_arrow_white.svg")
}

/* btn white */
.pv-root .btn_white  {
    border-color: #fff;
    background: #fff;
    color: #000;
}

.pv-root .btn_white.large .arrow::before,
.pv-root .btn_white.medium .arrow::before,
.pv-root .btn_white.small .arrow::before {
    background-image: url("../images/common/btn_small_arrow_black.svg")
}

/* only pc hover */
@media (hover: hover) and (min-width: 1181px) {
    .pv-root .btn_white_line:hover,
    .pv-root .btn_black:hover,
    .pv-root .btn_white:hover {
        border-color: #fff;
        color: var(--point-color);
        background: #fff;
    }

    /* brain 250821 */
    .pv-root .btn_custom_line:hover {
        border-color: #fff !important;
        color: var(--point-color) !important;
        background: #fff !important;
    }
    .pv-root .btn_custom_line:hover svg path {
        stroke: var(--point-color) !important;
    }
    /* end */

    .pv-root .btn_gray_line.small:hover .arrow::before,
    .pv-root .btn_white.small:hover .arrow::before {
        background-image: url("../images/common/btn_small_arrow_red.svg")
    }

    .pv-root .btn_gray_line.medium:hover .arrow::before,
    .pv-root .btn_white_line.large:hover .arrow::before,
    .pv-root .btn_black.medium:hover .arrow::before,
    .pv-root .btn_black.large:hover .arrow::before,
    .pv-root .btn_gray_line.large:hover .arrow::before,
    .pv-root .btn_white.large:hover .arrow::before,
    .pv-root .btn_white.medium:hover .arrow::before  {
        background-image: url("../images/common/btn_arrow_red.svg")
    }
    .pv-root .btn_gray_line:hover {
        border-color: var(--point-color);
        color: var(--point-color)
    }
}

@media (max-width: 1919px) {
    .pv-root a[class^="btn_"].small,
    .pv-root button[class^="btn_"].small {
        padding: calc(100vw * (9 / 1919)) calc(100vw * (16 / 1919));
        font-size: calc(100vw * (14 / 1919));
    }
    .pv-root a[class^="btn_"].medium,
    .pv-root button[class^="btn_"].medium {
        padding: calc(100vw * (12 / 1919)) calc(100vw * (20 / 1919));
        font-size: calc(100vw * (14 / 1919));
    }
    .pv-root a[class^="btn_"].large,
    .pv-root button[class^="btn_"].large {
        padding: calc(100vw * (19 / 1919)) calc(100vw * (28 / 1919));
        font-size: calc(100vw * (16 / 1919));
    }

    .pv-root a[class^="btn_"].small .arrow,
    .pv-root button[class^="btn_"].small .arrow {
        padding-right: calc(100vw * (14 / 1919));
    }
    .pv-root a[class^="btn_"].small .arrow::before,
    .pv-root button[class^="btn_"].small .arrow::before {
        width: calc(100vw * (12 / 1919));
        height: calc(100vw * (12 / 1919));
    }
    .pv-root a[class^="btn_"].medium .arrow,
    .pv-root button[class^="btn_"].medium .arrow {
        padding-right: calc(100vw * (20 / 1919));
    }
    .pv-root a[class^="btn_"].medium .arrow::before,
    .pv-root button[class^="btn_"].medium .arrow::before {
        width: calc(100vw * (12 / 1919));
        height: calc(100vw * (12 / 1919));
    }
    .pv-root a[class^="btn_"].large .arrow,
    .pv-root button[class^="btn_"].large .arrow {
        padding-right: calc(100vw * (24 / 1919));
    }
    .pv-root a[class^="btn_"].large .arrow::before,
    .pv-root button[class^="btn_"].large .arrow::before {
        width: calc(100vw * (12 / 1919));
        height: calc(100vw * (12 / 1919));
    }
}

@media (max-width: 1180px) {
    .pv-root a[class^="btn_"].small,
    .pv-root button[class^="btn_"].small {
        padding: calc(100vw * (11 / 1180)) calc(100vw * (20 / 1180));
        font-size: calc(100vw * (16 / 1180));
    }
    .pv-root a[class^="btn_"].medium,
    .pv-root button[class^="btn_"].medium  {
        padding: calc(100vw * (11 / 1180)) calc(100vw * (20 / 1180));
        font-size: calc(100vw * (16  / 1180));
    }
    .pv-root a[class^="btn_"].large,
    .pv-root button[class^="btn_"].large {
        padding: calc(100vw * (18 / 1180)) calc(100vw * (28 / 1180));
        font-size: calc(100vw * (18 / 1180));
    }
    .pv-root a[class^="btn_"].small .arrow,
    .pv-root button[class^="btn_"].small .arrow {
        padding-right: calc(100vw * (28 / 1180));
    }
    .pv-root a[class^="btn_"].small .arrow::before,
    .pv-root button[class^="btn_"].small .arrow::before {
        width: calc(100vw * (12 / 1180));
        height: calc(100vw * (12 / 1180));
    }
    .pv-root a[class^="btn_"].medium .arrow,
    .pv-root button[class^="btn_"].medium .arrow  {
        padding-right: calc(100vw * (20 / 1180));
    }
    .pv-root a[class^="btn_"].medium .arrow:before,
    .pv-root button[class^="btn_"].medium .arrow:before  {
        width: calc(100vw * (12 / 1180));
        height: calc(100vw * (12 / 1180));
    }
    
    .pv-root a[class^="btn_"].large .arrow,
    .pv-root button[class^="btn_"].large .arrow {
        padding-right: calc(100vw * (28 / 1180));
    }
    .pv-root a[class^="btn_"].large .arrow::before,
    .pv-root button[class^="btn_"].large .arrow::before {
        width: calc(100vw * (12 / 1180));
        height: calc(100vw * (12 / 1180));
    }

    .pv-root .btn_white_line.large {
        border-color: #fff;
        color: var(--point-color);
        background: #fff;
    }
    .pv-root .btn_white_line.large .arrow::before{
        background-image: url("../images/common/btn_arrow_red.svg")
    }

    
}

@media (max-width: 767px) {
    .pv-root a[class^="btn_"].small,
    .pv-root button[class^="btn_"].small  {
        padding: calc(100vw * (18 / 767)) calc(100vw * (40 / 767));
        font-size: calc(100vw * (28 / 767));
        line-height: 1.25;
    }
    .pv-root .btn_black .arrow::before {
        background-image: url("../images/common/btn_small_arrow_white.svg")
    }
    .pv-root a[class^="btn_"].medium,
    .pv-root button[class^="btn_"].medium {
        padding: calc(100vw * (25 / 767)) calc(100vw * (40 / 767));
        font-size: calc(100vw * (28  / 767));
        line-height: 1.25;
    }
    .pv-root a[class^="btn_"].large,
    .pv-root button[class^="btn_"].large {
        padding: calc(100vw * (30 / 767)) calc(100vw * (48 / 767)); 
        font-size: calc(100vw * (28 / 767));
        line-height: 1.25;
    }

    .pv-root a[class^="btn_"].small .arrow,
    .pv-root button[class^="btn_"].small .arrow {
        padding-right: calc(100vw * (36 / 767));
    }
    .pv-root a[class^="btn_"].small .arrow::before,
    .pv-root button[class^="btn_"].small .arrow::before {
        width: calc(100vw * (20 / 767));
        height: calc(100vw * (20 / 767));
    }
    .pv-root .btn_gray_line.small .arrow::before {
        background-image: url("../images/common/btn_arrow_black_m.svg")
    }

    .pv-root a[class^="btn_"].medium .arrow,
    .pv-root button[class^="btn_"].medium .arrow {
        padding-right: calc(100vw * (36 / 767));
    }
    .pv-root a[class^="btn_"].medium .arrow::before,
    .pv-root button[class^="btn_"].medium .arrow::before {
        width: calc(100vw * (20 / 767));
        height: calc(100vw * (20 / 767));
    }
    .pv-root .btn_gray_line.medium .arrow::before {
        background-image: url("../images/common/btn_arrow_black_m.svg")
    }

    .pv-root a[class^="btn_"].large .arrow,
    .pv-root button[class^="btn_"].large .arrow  {
        padding-right: calc(100vw * (42 / 767));
    }
    .pv-root .btn_gray_line.large .arrow::before {
        background-image: url("../images/common/btn_arrow_black_m.svg")
    }

    .pv-root a[class^="btn_"].large .arrow::before,
    .pv-root button[class^="btn_"].large .arrow::before {
        width: calc(100vw * (20 / 767));
        height: calc(100vw * (20 / 767));
    }

    .pv-root .btn_white_line,
    .pv-root .btn_gray_line {
        border-width: calc(100vw * (2 / 767));
    }
}

/* 중앙정렬 */
.pv-root .inner {
    width: 100%;
    max-width: calc(calc(176 * var(--pv-rem)) + calc(16 * var(--pv-rem)));
    margin: 0 auto;
    padding: 0 calc(8 * var(--pv-rem));
}
@media (max-width: 1919px) {
    .pv-root .inner {
        max-width: 100%;
        padding: 0 calc(100vw * (80 / 1919));
    }
}
@media (max-width: 1180px) {
    .pv-root .inner {
        max-width: 100%;
        padding: 0 calc(100vw * (50 / 1180));
    }
}
@media (max-width: 767px) {
    .pv-root .inner {
        padding: 0 calc(100vw * (40 / 767));
    }
}

.pv-root .sub_content {
    margin-top: calc(8 * var(--pv-rem)); 
    margin-bottom: calc(15 * var(--pv-rem));
}
@media (max-width: 1919px) {
    .pv-root .sub_content {
        margin-top: calc(100vw * (80 / 1919));
        margin-bottom: calc(100vw * (150 / 1919));
    }
}
@media (max-width: 1180px) {
    .pv-root .sub_content {
        margin-top: calc(100vw * (80 / 1180));
        margin-bottom: calc(100vw * (150 / 1180));
    }
}
@media (max-width: 767px) {
    .pv-root .sub_content {
        margin-top: calc(100vw * (120 / 767));
        margin-bottom: calc(100vw * (150 / 767));
    }
}

/* ---- 탭 (sena.com common.css 원문, product-tab 섹션용) ---- */
.pv-root .tab_wrap {
    overflow-x: auto;
    white-space: nowrap;
}
.pv-root .tab_wrap .tab_list {
    display: flex;
}
.pv-root .tab_wrap .tab_list li a {
    position: relative;
    display: block;
    color: #ccc;
    font-weight: 700;
}

.pv-root .tab_wrap::-webkit-scrollbar {
    display: none; 
}
/* brain 231216 active, on 분리 */
/* 2023-12-27 기존 on 스타일이 빠져서 다시 추가 */
.pv-root .tab_wrap .tab_list li.on a::before,
.pv-root .tab_wrap .tab_list li.active a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--point-color)
}
.pv-root .tab_wrap .tab_list li.active a {
    color: #000;
}
.pv-root .tab_wrap .tab_list li.on a {
    color: #000;
}
/* brain end */
.pv-root .tab_content {
    display: none;
}
.pv-root .tab_content.on {
    display: block;
}

/* tab > large */
.pv-root .tab_wrap.large {
    margin-bottom: calc(6 * var(--pv-rem));
}
.pv-root .tab_wrap.large .tab_list {
    gap: calc(2.8 * var(--pv-rem));
    justify-content: center;
}
.pv-root .tab_wrap.large .tab_list li a {
    position: relative;
    padding-bottom: calc(1.2 * var(--pv-rem));
    font-size: calc(2 * var(--pv-rem));
}

/* tab > small */
.pv-root .tab_wrap.small .tab_list {
    gap: calc(2 * var(--pv-rem));
}
.pv-root .tab_wrap.small .tab_list li a {
    position: relative;
    padding-bottom: calc(1 * var(--pv-rem));
    font-size: calc(1.8 * var(--pv-rem));
    text-transform: capitalize;
}

@media (max-width: 1919px) {
    .pv-root .tab_wrap .tab_list li.on a::before {
        height: calc(100vw * (2 / 1919));
    }
    .pv-root .tab_wrap.small .tab_list {
        gap: calc(100vw * (20 / 1919));
    }
    .pv-root .tab_wrap.small .tab_list li a {
        padding-bottom: calc(100vw * (10 / 1919));
        font-size: calc(100vw * (18 / 1919));
    }

    .pv-root .tab_wrap.large {
        margin-bottom: calc(100vw * (60 / 1919));
    }

    .pv-root .tab_wrap.large .tab_list {
        gap: calc(100vw * (28 / 1919));
    }
    .pv-root .tab_wrap.large .tab_list li a {
        padding-bottom: calc(100vw * (12 / 1919));
        font-size: calc(100vw * (20 / 1919));
    }
}
@media (max-width: 1180px) {
    .pv-root .tab_wrap .tab_list li.on a::before {
        height: calc(100vw * (2 / 1180));
    }
    .pv-root .tab_wrap.small .tab_list {
        gap: calc(100vw * (20 / 1180));
    }
    .pv-root .tab_wrap.small .tab_list li a {
        padding-bottom: calc(100vw * (10 / 1180));
        font-size: calc(100vw * (20 / 1180));
    }

    .pv-root .tab_wrap.large {
        margin-bottom: calc(100vw * (60 / 1180));
    }

    .pv-root .tab_wrap.large .tab_list {
        gap: calc(100vw * (28 / 1180));
    }
    .pv-root .tab_wrap.large .tab_list li a {
        padding-bottom: calc(100vw * (12 / 1180));
        font-size: calc(100vw * (20 / 1180));
    }
}
@media (max-width: 767px) {
    .pv-root .tab_wrap .tab_list li.on a::before {
        height: calc(100vw * (4 / 767));
    }
    .pv-root .tab_wrap.small {
        margin-right: calc(100vw * (-40 / 767));
        padding-right: calc(100vw * (40 / 767));
    }
    .pv-root .tab_wrap.small .tab_list {
        display: inline-flex;
        gap: 0;
    }
    .pv-root .tab_wrap.small .tab_list li {
        padding: 0 calc(100vw * (16 / 767));
    }
    .pv-root .tab_wrap.small .tab_list li:first-child {
        padding-left: 0;
    }
    .pv-root .tab_wrap.small .tab_list li:last-child {
        padding-right: 0;
    }
    .pv-root .tab_wrap.small .tab_list li a {
        padding-bottom: calc(100vw * (16 / 767));
        font-size: calc(100vw * (28 / 767));
    }

    .pv-root .tab_wrap.large {
        margin-bottom: calc(100vw * (60 / 767));
        margin-right: calc(100vw * (-40 / 767));
        padding-right: calc(100vw * (40 / 767));
    }
    .pv-root .tab_wrap.large .tab_list {
        display: inline-flex;
        gap: 0;
    }
    .pv-root .tab_wrap.large .tab_list li {
        padding: 0 calc(100vw * (20 / 767));
    }
    .pv-root .tab_wrap.large .tab_list li:first-child {
        padding-left: 0;
    }
    .pv-root .tab_wrap.large .tab_list li:last-child {
        padding-right: 0;
    }
    .pv-root .tab_wrap.large .tab_list li a {
        padding-bottom: calc(100vw * (18 / 767));
        font-size: calc(100vw * (32 / 767));
    }
}

/*서브 상단 비주얼 type01(h940), type02(h450), type03(100vh, 상품상세에서만 사용) */

.pv-root .dim {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9998;
}

/* ---- Porto 레이아웃 래퍼 여백 제거 (풀블리드 섹션용) ----
 * get_header() 가 #main.wide > .container-fluid(패딩 15px) > .row(마진 -15px) > .col-lg-12(패딩 15px)
 * 로 본문을 감싸 좌우 15px 여백이 남는다. 이 템플릿 페이지에서만 0 으로 되돌린다.
 * (공통 ACF 페이지의 acfp-base.css 가 같은 처리를 함) */
.page-template-product-view #main > .container-fluid,
.page-template-product-view #main .main-content.col-lg-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none;
}
.page-template-product-view #main > .container-fluid > .row.main-content-wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.page-template-product-view #main.wide.column1 .main-content {
    padding-top: 0;
    padding-bottom: 0;
}

/* ---- 서브 상단 비주얼 (sena.com common.css .sub_content .top_visual 원문) ----
 * 제품상세 상단 비주얼(일반정보 product_general: 이미지·타이틀·설명·구매링크)이 사용.
 * type03(100vh) 세부 규칙은 product.css 의 .product.detail .top_visual 에 있다. */
.pv-root .sub_content .top_visual {
    overflow: hidden;
    position: relative;
}
.pv-root .sub_content .top_visual.type01 {
    height: calc(94 * var(--pv-rem));
}
.pv-root .sub_content .top_visual.type02 {
    height: calc(40 * var(--pv-rem));
} 
.pv-root .sub_content .top_visual.type01 .hgroup {
    position: absolute;
    left: 0;
    bottom: calc(12 * var(--pv-rem));
    width: 100%;
}
.pv-root .sub_content .top_visual.type02 .hgroup {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}
.pv-root .sub_content .top_visual .hgroup .hidden {
    width: calc(98 * var(--pv-rem));
}
.pv-root .sub_content .top_visual.type02 .hgroup .hidden {
    width: calc(80 * var(--pv-rem));
    margin: 0 auto;
}
.pv-root .sub_content .top_visual .hgroup h2 {
    color: #fff;
    line-height: 1.25;
    text-transform: uppercase;
    animation: textUp .6s both cubic-bezier(0.25, 0.79, 0.58, 1);
    animation-delay: .4s;
}
.pv-root .sub_content .top_visual.type01 .hgroup h2 {
    font-size: calc(6.8 * var(--pv-rem));
}
.pv-root .sub_content .top_visual.type02 .hgroup h2 {
    font-size: calc(5.2 * var(--pv-rem));
}
.pv-root .sub_content .top_visual .hgroup .txt {
    /* overflow: hidden; */
    color: #fff;
    line-height: 1.6;
    font-weight: 500;
    font-size: calc(2 * var(--pv-rem));
    animation: textUp .6s both cubic-bezier(0.25, 0.79, 0.58, 1);
    animation-delay: .7s;
}
.pv-root .sub_content .top_visual.type01 .hgroup .txt {
    margin-top: calc(1.6 * var(--pv-rem));
}
/* brain 251105 */
.pv-root .sub_content .top_visual.type01 .hgroup .btn_area {
    display: flex;
    gap: calc(3 * var(--pv-rem));
    margin-top: calc(5.6 * var(--pv-rem));
    animation: textUp .6s both cubic-bezier(0.25, 0.79, 0.58, 1);
    animation-delay: 1s;
}
.pv-root .sub_content .top_visual .hgroup .hidden .txt.small {
    margin-top: calc(4 * var(--pv-rem));
    line-height: 1.45;
    font-size: calc(1.4 * var(--pv-rem));
    animation-delay: 1s;
}
.pv-root .sub_content .top_visual.type02 .hgroup .txt {
    margin-top: calc(1.2 * var(--pv-rem));
}

@keyframes textUp {
    0% {
        opacity: 0;
        transform: translate3d(0, calc(4 * var(--pv-rem)), 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

.pv-root .sub_content .top_visual .bg {
    position: absolute;
    top: 0;
    left: 0;
    /* z-index: -1; */
    width: 100%;
    height: 100%;
}
.pv-root .sub_content .top_visual .bg::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    opacity: 0.2;
}
.pv-root .sub_content .top_visual.type02 .bg::after {
    top: 0;
    height: 100%;
}
.pv-root .sub_content .top_visual.type01 .bg::after {
    background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.00) 100%);
}
.pv-root .sub_content .top_visual.type02 .bg::after {
    background: radial-gradient(50% 50% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.00) 100%);
}
.pv-root .sub_content .top_visual .bg :is(.pc, .tb, .mo) {
    height: 100%;
}
.pv-root .sub_content .top_visual .bg :is(.pc, .tb, .mo) img,
.pv-root .sub_content .top_visual .bg :is(.pc, .tb, .mo) video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: visualScale 4s ease-out both;
}
.pv-root .sub_content .top_visual .bg .pc {
    display: block;
}
.pv-root .sub_content .top_visual .bg .tb {
    display: none;
}
.pv-root .sub_content .top_visual .bg .mo {
    display: none;
}

@keyframes visualScale {
    0% {
        transform: translateZ(0) scale(1) rotate(0deg)
    }

    100% {
        transform: translateZ(0) scale(1.075) rotate(0.0001deg)
    }
}

@media (max-width: 1919px) {
    .pv-root .sub_content .top_visual.type01 {
        height: calc(100vw * (940 / 1919));
    }
    .pv-root .sub_content .top_visual.type02 {
        height: calc(100vw * (400 / 1919))
    }
    .pv-root .sub_content .top_visual.type01 .hgroup {
        bottom: calc(100vw * (120 / 1919));
    }
    .pv-root .sub_content .top_visual .hgroup .hidden {
        width: calc(100vw * (980 / 1919));
    }
    .pv-root .sub_content .top_visual.type02 .hgroup .hidden {
        width: calc(100vw * (800 / 1919));
    }
    
    .pv-root .sub_content .top_visual.type01 .hgroup h2 {
        font-size: calc(100vw * (68 / 1919));
    }
    .pv-root .sub_content .top_visual.type02 .hgroup h2 {
        font-size: calc(100vw * (52 / 1919));
    }
    .pv-root .sub_content .top_visual .hgroup .txt {
        font-size: calc(100vw * (20 / 1919));
    }
    .pv-root .sub_content .top_visual.type01 .hgroup .txt {
        margin-top: calc(100vw * (16 / 1919));
    }
    /* brain 251105 */
    .pv-root .sub_content .top_visual.type01 .hgroup .btn_area {
        gap: calc(100vw * (30 / 1919));
        margin-top: calc(100vw * (56 / 1919));
    }
    .pv-root .sub_content .top_visual .hgroup .hidden .txt.small {
        margin-top: calc(100vw * (40 / 1919));
        font-size: calc(100vw * (14 / 1919));
    }
    .pv-root .sub_content .top_visual.type02 .hgroup .txt {
        margin-top: calc(100vw * (12 / 1919));
    }
    @keyframes textUp {
        0% {
            opacity: 0;
            transform: translate3d(0, calc(100vw * (40 / 1919)), 0);
        }
    
        100% {
            opacity: 1;
            transform: none;
        }
    }
}
@media (max-width: 1180px) {
    .pv-root .sub_content .top_visual.type01 {
        height: calc(100vw * (940 / 1180));
    }
    .pv-root .sub_content .top_visual.type02 {
        height: calc(100vw * (450 / 1180))
    }
    .pv-root .sub_content .top_visual.type01 .hgroup {
        right: calc(100vw * (50 / 1180));
        bottom: calc(100vw * (120 / 1180));
    }
    .pv-root .sub_content .top_visual .hgroup .hidden {
        width: 100%;
    }
    .pv-root .sub_content .top_visual.type02 .hgroup .hidden {
        width: calc(100vw * (800 / 1180));
    }
    .pv-root .sub_content .top_visual.type01 .hgroup h2 {
        font-size: calc(100vw * (60 / 1180));
    }
    .pv-root .sub_content .top_visual.type02 .hgroup h2 {
        font-size: calc(100vw * (56 / 1180));
    }
    .pv-root .sub_content .top_visual .hgroup .txt {
        font-size: calc(100vw * (22 / 1180));
    }
    .pv-root .sub_content .top_visual.type01 .hgroup .txt {
        margin-top: calc(100vw * (16 / 1180));
    }
    /* brain 251105 */
    .pv-root .sub_content .top_visual.type01 .hgroup .btn_area {
        gap: calc(100vw * (30 / 1180));
        margin-top: calc(100vw * (56 / 1180));
    }
    .pv-root .sub_content .top_visual .hgroup .hidden .txt.small {
        margin-top: calc(100vw * (40 / 1180));
        font-size: calc(100vw * (16 / 1180));
    }
    .pv-root .sub_content .top_visual.type02 .hgroup .txt {
        margin-top: calc(100vw * (12 / 1180));
    }
    @keyframes textUp {
        0% {
            opacity: 0;
            transform: translate3d(0, calc(100vw * (40 / 1180)), 0);
        }
    
        100% {
            opacity: 1;
            transform: none;
        }
    }
}
@media (max-width: 767px) {
    .pv-root .sub_content .top_visual.type01 {
        height: calc(100vw * (1200 / 767));
    }
    .pv-root .sub_content .top_visual.type02 {
        height: calc(100vw * (780 / 767))
    }
    .pv-root .sub_content .top_visual.type01 .hgroup {
        right: calc(100vw * (40 / 767));
        bottom: calc(100vw * (120 / 767));
    }
    .pv-root .sub_content .top_visual.type02 .hgroup .hidden {
        width: calc(100vw * (590 / 767));
    }
    .pv-root .sub_content .top_visual .hgroup .hidden .txt.small {
        margin-top: calc(100vw * (40 / 767));
        font-size: calc(100vw * (26 / 767));
    }
    .pv-root .sub_content .top_visual.type01 .hgroup h2 {
        font-size: calc(100vw * (68 / 767));
    }
    .pv-root .sub_content .top_visual.type02 .hgroup h2 {
        font-size: calc(100vw * (68 / 767));
    }
    .pv-root .sub_content .top_visual .hgroup .txt {
        margin-top: calc(100vw * (16 / 767));
        line-height: 1.5;
        font-size: calc(100vw * (32 / 767));
    }  
    .pv-root .sub_content .top_visual.type01 .hgroup .txt {
        margin-top: calc(100vw * (16 / 767));
    }
    /* brain 251105 */
    .pv-root .sub_content .top_visual.type01 .hgroup .btn_area {
        gap: calc(100vw * (30 / 767));
        margin-top: calc(100vw * (56 / 767));
    }  
    .pv-root .sub_content .top_visual.type02 .hgroup .txt {
        margin-top: calc(100vw * (16 / 767));
    }
    @keyframes textUp {
        0% {
            opacity: 0;
            transform: translate3d(0, calc(100vw * (40 / 767)), 0);
        }
    
        100% {
            opacity: 1;
            transform: none;
        }
    }
    .pv-root .sub_content .top_visual .bg .pc {
        display: none;
    }
    .pv-root .sub_content .top_visual .bg .tb {
        display: none;
    }
    .pv-root .sub_content .top_visual .bg .mo {
        display: block;
    }
    
}