/* Reset some default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    cursor: pointer;
    text-decoration: none;
}

body {
    overflow-x: hidden;
}

html,
body {
    height: 100%;
}


/* cyrillic-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    src: url('Inter/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2') format('woff2'),
        url('Inter/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZBhiI2B.woff2') format('woff2'),
        url('Inter/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZFhiI2B.woff2') format('woff2'),
        url('Inter/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZJhiI2B.woff2') format('woff2'),
        url('Inter/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZNhiI2B.woff2') format('woff2'),
        url('Inter/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZthiI2B.woff2') format('woff2'),
        url('Inter/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZxhiI2B.woff2') format('woff2');
}


.bar {
    display: flex;
    align-items: center;
    margin: 0 1.82rem;
    padding-top: 0.8rem;
}

.bar-logo {
    width: 1.91rem;
    height: 0.5587rem;
    background-image: url('imgs/logo.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-right: 3vw;
}
.bar ul {
    display: flex;
    align-items: center;
}

.bar ul li {
    position: relative;
    margin-left: 3vw;
}

.bar-font {
    color: rgb(255, 255, 255);
    font-family: Inter;
    font-size: 0.26rem;
    font-weight: 700;
    line-height: 0.29rem;
    white-space: nowrap;
}

.bar li:hover .bar-font {
    color: rgb(255, 97, 0);
}

.bar-font::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: 0;
    width: 0%;
    height: 8%;
    background-color: rgb(255, 97, 0);
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
}

.bar-font.active::after {
    width: 100%;
}

.bar li:hover .bar-font::after {
    width: 100%;
}

.bar-dropdown {
    position: absolute;
    top: 0;
    left: -10%;
    padding-top: 40%;
    /* background: #0000006E; */
    color: #fff;
    font-size: 0.2rem;
    width: 120%;
    display: none;
    cursor: pointer;
}

.bar li:hover .bar-dropdown {
    display: block;
}

.bar-dropdown div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.1rem 0;
    /* line-height: 1.5;
    background: linear-gradient(to right, #fff, #fff) 0 min(100%, 1.2lh) / 0 1px no-repeat;
    background-size: 100% 1px; */
}

.bar-dropdown a {
    color: #fff;
}

.reversed-link {
    background: linear-gradient(to right, #FF6100, #FF6100) 0 min(100%, 1.2lh) / 0 5% no-repeat;
    transition: background-size .3s ease-in-out;
}

.bar-dropdown :hover .reversed-link {
    background-size: 100% 5%;
}

.product-container {
    display: flex;
    align-items: center;
    margin: 0 1.82rem;
    padding-top: 0.8rem;
    position: relative;
}
.product-container ul {
    display: flex;
    align-items: center;
}

.product-container ul li {
    position: relative;
    margin-left: 3vw;
}

.product-header {
    color: rgb(255, 97, 0);
    font-family: Inter;
    font-size: 0.4rem;
    font-weight: 700;
    /* line-height: 0.58rem; */
    margin-right: 3vw;
}

.product-item {
    color: rgb(0, 0, 0);
    font-family: Inter;
    font-size: 0.26rem;
    font-weight: 400;
    /* line-height: 0.44rem; */
    cursor: pointer;
}

.product-item.active {
    color: rgb(255, 97, 0);
    font-weight: 700;
}

.product-item:hover {
    color: rgb(255, 97, 0);
    font-weight: 700;
}

.product-line {
    position: relative;
    height: 6rem;
}

.grid-layout {
    min-height: 49vh;
    margin: 0 1.82rem;
}

.item-card .tag {
    display: flex;
    align-items: center;
}

.item-card .tag-content {
    color: rgb(255, 97, 0);
    font-family: Inter;
    font-size: 0.36rem;
    font-weight: 700;
    line-height: 0.44rem;
    letter-spacing: 0%;
    margin-right: 0.2rem;
}

.item-card .tag-line {
    flex: 1;
    height: 0;
    border: 0.01rem dashed rgb(196, 196, 196);
}

.product-card-container {
    display: grid;
    /* 定义三列，每列平分空间 */
    grid-template-columns: repeat(3, 1fr); 
    /* 定义三行，每行平分空间（若高度固定） */
    /* grid-template-rows: repeat(3, 1fr);  */
    /* 设置格子间距 */
    gap: 0.5rem;
    margin: 0.5rem;
}

.product-itemCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    border-radius: 0.2rem;
    padding: 0.2rem 0.1rem;
    overflow: hidden;
    cursor: pointer;
}

.product-itemCard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* #e4e5e9 */
    background: #f6f6f6;
    /* background-image: url('your-image.jpg'); */
    background-size: cover;
    filter: blur(10px);
    z-index: -1; /* 置于底层 */
}

.product-img { 
    width: 4rem;
    height: 3rem;
}

.product-img img { 
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
    object-fit: cover; /* 等比例缩放直到覆盖容器 */
    object-position: center; /* 确保缩放后中心对齐 */
}

.product-img img:hover {
    transform: scale(1.1);
}


.product-name {
    color: rgb(51, 51, 51);
    font-family: Inter;
    font-size: 0.36rem;
    font-weight: 500;
    line-height: 0.44rem;
}

.product-desc {
    /* height: 0.48rem; */
    color: rgb(34, 34, 34);
    font-family: Inter;
    font-size: 0.2rem;
    font-weight: 400;
    line-height: 0.24rem;
    display: -webkit-box;    /* 必须：将对象作为弹性伸缩盒子模型显示 */
    -webkit-line-clamp: 2;   /* 必须：限制显示的行数为 2 行 */
    -webkit-box-orient: vertical; /* 必须：设置伸缩盒对象的子元素排列方式 */
    overflow: hidden;
}

/* .product-card {

} */



.product-item-one:hover,
.product-item-two:hover,
.product-item-three:hover,
.product-item-four:hover,
.product-item-five:hover,
.product-content ul li:hover {
    color: rgb(255, 97, 0) !important;
}


.product-console,
.product-controller,
.product-attachment,
.product-decoder,
.product-one,
.product-two,
.product-three,
.product-four,
.product-five {
    position: relative;
    border-radius: 0.2rem;
    margin: 0 0.2rem;
    padding-bottom: 0.2rem;
    overflow: hidden;
}

.product-console::before,
.product-controller::before,
.product-attachment::before,
.product-decoder::before,
.product-one::before,
.product-two::before,
.product-three::before,
.product-four::before,
.product-five::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* #e4e5e9 */
    background: #f6f6f6;
    /* background-image: url('your-image.jpg'); */
    background-size: cover;
    filter: blur(10px);
    z-index: -1; /* 置于底层 */
}

.product-console-description,
.product-console-description1,
.product-console-description2, 
.product-console-description3, 
.product-console-description4,  
.product-console-description5,
.product-decoder-description1,
.product-decoder-description3,
.product-attachment-description1,
.product-attachment-description2,
.product-attachment-description3,
.product-content-description,
.product-content-description2,
.product-content-description3 {
    display: -webkit-box;    /* 必须：将对象作为弹性伸缩盒子模型显示 */
    -webkit-line-clamp: 2;   /* 必须：限制显示的行数为 2 行 */
    -webkit-box-orient: vertical; /* 必须：设置伸缩盒对象的子元素排列方式 */
    overflow: hidden;
    line-height: normal !important;
    height: auto !important;
}

.product-DMX-list1,
.product-CNPU-list,
.product-CTPN-list,
.product-console-list {
    line-height: normal !important;
}


.product-console-image1,
.product-console-image2,
.product-console-image3,
.product-console-image4,
.product-console-image5,
.product-console-image6,
.product-console-image7,
.product-console-image8,
.product-console-image9 {
    transition: transform 0.5s ease-in-out;
}

.product-console-image1:hover,
.product-console-image2:hover,
.product-console-image3:hover,
.product-console-image4:hover,
.product-console-image5:hover,
.product-console-image6:hover,
.product-console-image7:hover,
.product-console-image8:hover,
.product-console-image9:hover {
    transform: scale(1.1, 1.1);
}

.product-controller-image1,
.product-controller-image2,
.product-controller-image3,
.product-controller-image4,
.product-controller-image5 {
    transition: transform 0.5s ease-in-out;
}

.product-controller-image1:hover,
.product-controller-image2:hover,
.product-controller-image3:hover,
.product-controller-image4:hover,
.product-controller-image5:hover {
    transform: scale(1.1, 1.1);
}

.product-attachment-image1,
.product-attachment-image2,
.product-attachment-image3,
.product-attachment-image4,
.product-attachment-image5 {
    transition: transform 0.5s ease-in-out;
}

.product-attachment-image1:hover,
.product-attachment-image2:hover,
.product-attachment-image3:hover,
.product-attachment-image4:hover,
.product-attachment-image5:hover {
    transform: scale(1.1, 1.1);
}

.product-decoder-image1,
.product-decoder-image2,
.product-decoder-image3,
.product-decoder-image4,
.product-decoder-image5 {
    transition: transform 0.5s ease-in-out;
}

.product-decoder-image1:hover,
.product-decoder-image2:hover,
.product-decoder-image3:hover,
.product-decoder-image4:hover,
.product-decoder-image5:hover {
    transform: scale(1.1, 1.1);
}

.product-content-image1,
.product-content-image2,
.product-content-image3 {
    transition: transform 0.5s ease-in-out;
}

.product-content-image1:hover,
.product-content-image2:hover,
.product-content-image3:hover {
    transform: scale(1.1, 1.1);
}

.product-controller-image1,
.product-controller-image2,
.product-controller-image3 {
    transition: transform 0.5s ease-in-out;
}

.product-controller-image1:hover 
.product-controller-image2:hover 
.product-controller-image3:hover {
    transform: scale(1.1, 1.1);
}

.product-attachment-image1,
.product-attachment-image2,
.product-attachment-image3 {
    transition: transform 0.5s ease-in-out;
}

.product-attachment-image1:hover,
.product-attachment-image2:hover,
.product-attachment-image3:hover {
    transform: scale(1.1, 1.1);
}

.product-decoder-image1,
.product-decoder-image2,
.product-decoder-image3 {
    transition: transform 0.5s ease-in-out;
}

.product-decoder-image1:hover,
.product-decoder-image2:hover,
.product-decoder-image3:hover {
    transform: scale(1.1, 1.1);
}

.footer {
    background-color: #000 !important;
}

.footer ul li:hover {
    color: rgb(255, 97, 0);
}

.footer-label {
    white-space: nowrap;
}