/* 定义字体 */
@font-face {
    font-family: 'cufangsong';
    src: url('static/font/HYCuFangSongJ-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ruanbixingshu';
    src: url('static/font/AiDianQianFengXingshu-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


.flipcard {
    transform-style: preserve-3d;
    transform: rotateY(-180deg);
    transition: transform 1s ease-out, opacity 1s ease-out;
}

.flipcard.visible {
    transform: rotateY(0deg);
    opacity: 1;
}

/* 定义淡入动画 */
@keyframes opacity {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes opacity2 {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.1;
    }
}

/* 定义渐显动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(500px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 定义从小变大的动画 */
@keyframes scaleUp {
    from {
        transform: scale(0.1); /* 初始缩放比例 */
        opacity: 1; /* 初始透明度 */
    }
    to {
        transform: scale(1); /* 最终缩放比例 */
        opacity: 1; /* 最终透明度 */
    }
}

/*发光文字效果*/
@-webkit-keyframes shining {
    from {
        text-shadow: 0 0 10px skyblue, 0 0 20px skyblue, 0 0 30px skyblue, 0 0 40px skyblue;
    }
    to {
        text-shadow: 0 0 5px skyblue, 0 0 10px skyblue, 0 0 15px skyblue, 0 0 20px skyblue;
    }
}

/* 应用动画到标题和段落 */
.main-slider__content1 h2,
.main-slider__content1 p {
    transform: scale(0.1); /* 初始缩放比例 */
    transition-delay: 1500ms; /* 延迟2500毫秒开始过渡 */
    transition: transform 5000ms ease, /* 2秒变换缩放比例，缓入缓出 */
    opacity 3000ms ease; /* 2秒透明度变化，缓入缓出 */
}
/*.main-slider__content1 img{
    opacity: 0;
    animation: scaleUp 3s ease-in-out forwards; // 2秒动画，缓入缓出，保持最终状态 /
}*/

/* 应用动画到标题和段落 */
.main-slider__content2 h2,
.main-slider__content2 p {
    opacity: 0; /* 初始状态为透明 */
    transform: translateX(200px);
    transition-delay: 2000ms; /* 延迟2500毫秒开始过渡 */
    transition: transform 5000ms ease, /* 2秒变换位置，缓入缓出 */
    opacity 9000ms ease; /* 2秒透明度变化，缓入缓出 */
}

.main-slider__content1 {
    position: relative;
    display: block;
    z-index: 30;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin-top: 0;
}

.main-slider__content2 {
    position: relative;
    z-index: 30;
    flex-direction: column;
    width: 70%;

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin-top: 0;
}

.main-slider__content3 {
    position: relative;
    z-index: 30;
    flex-direction: column;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin-top: 0;
}

.title1text {
    font-size: 80px;
    letter-spacing: 1px;
    text-align: center;
    /*text-shadow: 0px 10px 18px #CDCDD0;*/
    font-family: 'cufangsong', sans-serif;
    color: #ffffff;
    font-size: 100px;
    font-weight: 500;
    margin-bottom: 20%;
    /*animation: shining 1s alternate infinite;*/
    text-shadow:
            0 1px 1px rgba(0, 0, 0, 0.1), /* 小阴影 */
            0 2px 2px rgba(0, 0, 0, 0.2), /* 中阴影 */
            0 4px 4px rgba(0, 0, 0, 0.4), /* 大阴影 */
            0 8px 8px rgba(0, 0, 0, 0.5), /* 超大阴影 */
            0 16px 16px rgba(0, 0, 0, 0.6); /* 极大阴影 */
}

.title2text1 {
    font-size: 80%;
    color: #ffffff;
    letter-spacing: 25px;
    text-shadow:
            1px 1px 0px #20AD65,
            -1px -1px 0px #20AD65,
            1px -1px 0px #20AD65,
            -1px 1px 0px #20AD65;
    font-family: 'cufangsong', sans-serif;
}

.title2text2 {
    font-size: 50px;
    color: #8CD790;
    margin-left: 35px;
    font-family: 'cufangsong', sans-serif;
}

.title2text3 {
    font-size: 70%;
    color: #ffffff;
    letter-spacing: 5px;
    text-shadow:
            1px 1px 0px #20AD65,
            -1px -1px 0px #20AD65,
            1px -1px 0px #20AD65,
            -1px 1px 0px #20AD65;
    font-family: 'cufangsong', sans-serif;
    margin-left: 30%;
}

.title2text4 {
    font-size: 300%;
    color: #20AD65;
    letter-spacing: -10px;
    text-shadow:
            1px 1px 20px #ffffff,
            1px -1px 20px #ffffff,
            -1px 1px 20px #ffffff,
            -1px -1px 20px #ffffff;
    font-family: 'ruanbixingshu', sans-serif;
    margin-left: 10%;
    line-height: 100%;
}

.title3text1 {
    font-family: 'cufangsong', sans-serif;
    letter-spacing: 10px;
    margin-left: 20%;
    text-shadow:
            0 1px 1px rgba(0, 0, 0, 0.1), /* 小阴影 */
            0 2px 2px rgba(0, 0, 0, 0.2), /* 中阴影 */
            0 4px 4px rgba(0, 0, 0, 0.4), /* 大阴影 */
            0 8px 8px rgba(0, 0, 0, 0.5), /* 超大阴影 */
            0 16px 16px rgba(0, 0, 0, 0.6); /* 极大阴影 */
}

/*
brightness(0.8): 将图片的亮度降低到原来的 80%，使图片变暗。
contrast(1.2): 将图片的对比度提高到原来的 120%，使图片的颜色更加鲜明。
 */
.image-darken {
    filter: brightness(0.6) contrast(1);
}

/* 导航栏 */
.transparent-navbar {
    background-color: rgba(255, 255, 255, 0); /* 透明背景 */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.main-menu__list li a:hover {
    color: #ffcc00; /* 悬停时的颜色变化 */
}

.main-menu__list li a {
    /*text-shadow: -1px -1px 0 #868686,*/
    /*            1px -1px 0 #868686,*/
    /*            -1px 1px 0 #868686,*/
    /*            1px 1px 0 #868686;*/
}

.main-menu-wrapper-inner.clearfix {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-menu-wrapper__left {
    flex: 1;
}

.main-menu-wrapper__main-menu {
    flex: 1;
    text-align: right;
}


/*标题1背景蒙层*/
.large-transparent-image {
    width: 245px;
    margin: 0 0px 0px 0;
}
.large-transparent-image {
    animation: opacity2 3s ease-in-out forwards; /* 3秒动画，缓动效果，动画结束后保持最终状态 */
}
.large-transparent-text {
    position: absolute;
    font-size: 200px; /* 巨大字体 */
    color: rgba(255, 255, 255, 0.1); /* 半透明白色 */
    z-index: 0;
    font-weight: bold;
    font-family: 'ruanbixingshu', sans-serif;
    animation: opacity 3s ease-in-out forwards; /* 3秒动画，缓动效果，动画结束后保持最终状态 */
}
.bottom-left {
    bottom: 150px;
    left: -50px;
}
.bottom-right {
    bottom: 150px;
    right: -50px;
}



.product-introduction {
    padding: 50px 0;
}

.gallery-top {
    height: 80%;
    width: 100%;
}

.gallery-top .swiper-slide {
    background-size: cover;
    background-position: center;
    position: relative;
}

.gallery-top .product-description {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    padding: 15px;
    border-radius: 5px;
}

.gallery-thumbs {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
}

.gallery-thumbs .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}






/**********测试代码***********/


/*彩虹文字效果（跑马灯）*/
.text1 {
    letter-spacing: 0.2rem;
    font-size: 1.5rem;
    background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: maskedAnimation 4s infinite linear;
}
@keyframes maskedAnimation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}

/*金属质感*/
/*<div class="metallic-text">这是金属质感的文字</div>*/
/*<div class="metallic-box">这是金属质感的盒子</div>*/
.metallic-text {
    color: #fff; /* 文字颜色为白色 */
    text-shadow:
            0 1px 1px rgba(0, 0, 0, 0.1), /* 小阴影 */
            0 2px 2px rgba(0, 0, 0, 0.2), /* 中阴影 */
            0 4px 4px rgba(0, 0, 0, 0.4), /* 大阴影 */
            0 8px 8px rgba(0, 0, 0, 0.5), /* 超大阴影 */
            0 16px 16px rgba(0, 0, 0, 0.6); /* 极大阴影 */
    /* 可以添加更多的阴影层次来增加金属质感 */
}
.metallic-box {
    background-color: #ccc; /* 背景颜色 */
    box-shadow:
            0 1px 1px rgba(0, 0, 0, 0.1),
            0 2px 2px rgba(0, 0, 0, 0.2),
            0 4px 4px rgba(0, 0, 0, 0.4),
            0 8px 8px rgba(0, 0, 0, 0.5),
            0 16px 16px rgba(0, 0, 0, 0.6);
    /* 同样增加多层阴影来表现金属质感 */
}