@charset "UTF-8";
/* 自定义CSS */
/* 导航栏样式 */
.navbar {
    position: sticky; /* 固定在顶部 */
    top: 0;
    z-index: 1000; /* 确保导航栏始终位于最顶层 */
}
.navbar-nav .nav-item {
    margin-right: 20px; /* 调整导航项之间的间距 */
}

.navbar-nav .nav-item:last-child {
    margin-right: 0; /* 最后一个导航项不加间距 */
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu {
    display: none;
}

.dropdown:hover .dropdown-menu.show {
    display: block;
}

.carousel-item {
    /*background-color: #E0E0E0; /* 辅助色调 */
    /* background-color:#F5F5F5 */
    background: linear-gradient(90.98deg, #F4F3FF 16.29%, #E1DDFF 98.3%)!important;
}

.carousel-item img {
    width: 100%; /* 宽度为100% */
    height: auto; /* 自动高度 */
    max-height: 400px; /* 最大高度 */
    min-height: 400px; /* 最小高度 */
    object-fit: contain; /* 保持图片宽高比 */
}

.carousel-item video {
    width: 100%; /* 宽度为100% */
    height: auto; /* 自动高度 */
    max-height: 400px; /* 最大高度 */
    min-height: 400px; /* 最小高度 */
    object-fit: contain; /* 保持图片宽高比 */
    
}

.carousel-item .item-margin{
    margin-top: 10px;
    margin-bottom: 10px;
}

.carousel-indicators {
    bottom: 10px; /* 调整指示器的位置 */
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.carousel-indicators li {
    width: 40px!important; /* 调整宽度 */
    height: 5px!important; /* 调整高度 */
    border-radius: 4px; /* 圆形指示器 */
    background-color: #ccc; /* 默认颜色 */
    cursor: pointer;
    margin: 0 5px; /* 间距 */
}

.carousel-indicators .active{
    background-color: #3505f5;
}


.card-space {
    margin: 20px;
}

.card {
    border: none;
}

.card img {
    width: 100%; /* 宽度为100% */
    height: auto; /* 自动高度 */
    object-fit: contain; /* 保持图片宽高比 */
}

.card-title {
    display: inline-flex;
    align-items: center; /* 垂直居中 */
    gap: 1px; /* 文本与图片之间的间距 */
  }

  .card-title-text {
    margin: 0; /* 移除默认的外边距 */
    margin-top: 4px;
  }
  
.card .card-title-img {
    width: 50px !important;
    object-fit: cover; /* 保持图片原始比例 */
}

a {
    text-decoration: none; /* 移除下划线 */
    color: black; /* 设置颜色 */
}

.card a:hover {
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}



.container {
    display: grid;
    place-items: center; /* 居中对齐 */
    min-height: 40vh; /* 至少占满视口高度 */
    padding: 20px;
}

.equal-width {
    width: 100%; /* 宽度相同 */
}

.mybg-gradient {
    background: linear-gradient(90.98deg, #F4F3FF 16.29%, #E1DDFF 98.3%)!important;
}

.reversemybg-gradient {
    background: linear-gradient(90.98deg,  #E1DDFF 98.3%,#F4F3FF 16.29%)!important;
}

.blur {
    filter: blur(2px);
}

.image-comparison {
    position: relative;
    width: 500px;
    height: 500px;
    overflow: hidden;
}

.image-comparison .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: fit-content;
    object-fit: cover;
}

.image-comparison .image2 {
    clip-path: inset(0 0 0 50%);
    z-index: 2; /* 确保第二张图片在第一张之上 */
}

.image-comparison .slider {
    position: absolute;
    top: 0;
    left: 50%; /* 初始位置在中间 */
    width: 2px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    cursor: ew-resize;
    z-index: 4;
}



.rounded-10{
    border-radius: 10px;
}

.rounded-20{
    border-radius: 20px;
}

.rounded-footer{
    border-radius: 20px 20px 0 0;
}

.twentytwenty-handle {
    height: 38px;
    width: 38px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -22px;
    margin-top: -22px;
    border: 3px solid #FFFF00;
    box-shadow: 0 0 12px rgba(51,51,51,.5);
    -webkit-border-radius: 1000px;
    -moz-border-radius: 1000px;
    border-radius: 15px;
    z-index: 40;
    
}
.twentytwenty-handle1 {
    position: absolute;
    top: calc(50% - 8px);
    left: -23px;
    border-radius: 50%;
    content: '';
    width: 48px;
    height: 48px;
    background: url(/static/index/img/slider-handle.svg);
    
}

.padding-15{
    padding: 1.5rem;
}

.Original {
    position: absolute;
    bottom: 10px;
    left: 17px;
    color: #fff;
    width: 80px;
    height: 26px;
    background-color: #000;
    border-radius: 4px;
    opacity: .7;
    font-size: 14px;
    text-align: center;
    z-index: 1;
}

.Gigapiel {
    position: absolute;
    bottom: 10px;
    right: 17px;
    color: #fff;
    width: 100px;
    height: 26px;
    background-color: #000;
    border-radius: 4px;
    opacity: .7;
    font-size: 14px;
    text-align: center;
    z-index: 2;
}

.flex-col-center {
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center
}

.step {
    display: flex;
}

.step ul  {
    display: block;
    list-style: none;
    width:100%;
}
 
.step ul li {
    flex: 1;
    color: #808080;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 30px;
    margin-left: 0px;
    cursor: pointer;
}

.step ul li .num-text{
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    margin-left: 10px;
}

.step ul li b{
    font-weight: bold;
}


 
.step ul li.active .num{
    background-color: white;
    color: black;
    border-radius:10px;

}


.step ul li.active b{
    color: blue;
}

.swiper .swiper-slide .swiper-img {
    height: auto;
    width: 90%;
    object-fit: contain
}