@charset "utf-8";
body {
    background-color: #000000;
    color: #ffffff;
}

.main-title-h2 {
    font-size: 45px;
    line-height: 1.2;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
    text-align: center;
}

.main-suhead {
    font-size: 23px;
    line-height: 1.4;
    font-weight: 400;
    color: #fefefe;
    margin-bottom: 50px;
    text-align: center;
}
.main-suhead-small {
    font-size: 19px;
    line-height: 1.3;
    font-weight: 400;
    color: #8a8a8a;
    margin-bottom: 50px;
    text-align: center;
}
.logo-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.ai-section-down {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}
.button-down, .button-more {
    width: 300px;
}
.button-more a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #b7b1ff;
    font-size: 17px;
    text-decoration: none;
    font-weight: 700;
    width: 100%;
    padding: 12px 0;
    border: 2px solid transparent;
    border-radius: 30px;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #7d31e4, #654cff);
}
.button-more a:hover {
    background-image: linear-gradient(135deg, #9233ff, #654cff, #654cff, #9233ff);
    color: #ffffff;
}

.details-more {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
    height: 44px;
    border: 1px solid #ffffff;
    border-radius: 30px;
    color: #ffffff;
}

.details-more a {
    width: 100%;
}

@media (max-width: 1200px) {
    .main-title-h2 {
        font-size: 1.4375rem;
    }
    .main-suhead {
        font-size: 1.0625rem;
    }
}
@media (max-width: 992px) {

}
@media (max-width: 768px) {

}
@media (max-width: 576px) {
    .main-title-h2 {
        font-size: 1.1875rem;
    }
    .main-suhead {
        font-size: .8125rem;
    }
}


/* ```````````````````````````````````` AiartyJP-Video ``````````````````````````````````````` */
.AiartyJP-Video {
    padding: 50px 0;
}
.AiartyJP-Video-flex {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.AiartyJP-Video-item {
    width: 772px;
    position: relative;
}
.AiartyJP-Video-item video {
    border-radius: 1.2rem;
}
.AiartyJP-Video-item-tips {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 50%);
    bottom: 8%;
    background-color: rgba(0, 0, 0, 0.9);
    color: #ffffff;
    font-size: 17px;
    padding: 0 15px;
    border-radius: 30px;
    margin-bottom: 0;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
}

@media (max-width: 1200px) {

}
@media (max-width: 992px) {

}
@media (max-width: 768px) {

}
@media (max-width: 576px) {

}

/* ```````````````````````````````````` AiartyJP-Image ``````````````````````````````````````` */
.AiartyJP-Image {
    padding: 50px 0;
}

.AiartyJP-Image .wrapper-video-list {
    height: 620px;
    display: flex;
    width: 100%;
    border-top: 1px solid #25262a;
    border-bottom: 1px solid #3c3c3c;
    margin-top: 50px;
}

@media screen and (min-width:1681px) {
    .AiartyJP-Image .wrapper-video-list {
        height: 760px
    }
}

.AiartyJP-Image .wrapper-video-list .wrapper-item {
    width: 50%;
    height: 100%;
    position: relative;
    transition: all .3s cubic-bezier(.33, 0, .25, 1)
}
.AiartyJP-Image .wrapper-video-list .wrapper-item > a {
    position: relative;
}

.AiartyJP-Image .wrapper-video-list .wrapper-item .btn-play-pause {
    z-index: 1
}

.AiartyJP-Image .wrapper-video-list .wrapper-item:after {
    content: "";
    position: absolute;
    left: -.5px;
    bottom: 0;
    height: 240px;
    width: 100%;
    background: linear-gradient(180deg, transparent, #000);
    pointer-events: none;
    padding: 0 2px
}

.AiartyJP-Image .wrapper-video-list .wrapper-item.w-480 {
    width: 40%
}

.AiartyJP-Image .wrapper-video-list .wrapper-item.w-960 {
    width: 60%
}

.AiartyJP-Image .wrapper-video-list .wrapper-item .wrapper-video {
    width: 100%;
    height: 100%;
    position: relative
}

.AiartyJP-Image .wrapper-video-list .wrapper-item .wrapper-video .progress {
    position: absolute;
    bottom: 0;
    height: 3px;
    left: 0;
    width: 0;
    background: #3da0f0;
    z-index: 1
}

.AiartyJP-Image .wrapper-video-list .wrapper-item .wrapper-video .cover {
    position: absolute;
    opacity: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    transition: all .3s ease
}

.AiartyJP-Image .wrapper-video-list .wrapper-item .wrapper-video:first-child {
    border-right: 1px solid #25262a
}

.AiartyJP-Image .wrapper-video-list .wrapper-item video {
    width: 100%;
    height: 100%;
    background: #1f1f1f;
    -o-object-fit: cover;
    object-fit: cover
}

.AiartyJP-Image .wrapper-video-list .wrapper-item .item-title {
    position: absolute;
    top: 30px;
    left: 100px;
    color: #ffffff;
}

.AiartyJP-Image .wrapper-video-list .wrapper-item .item-desc {
    position: absolute;
    bottom: 47.89px;
    left: 64px;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #898a8e;
    max-width: 430px;
    z-index: 1;
    white-space: pre-wrap;
    display: flex;
    align-items: center;
    gap: 10px;
}
.AiartyJP-Image .wrapper-video-list .wrapper-item .item-desc p {
    flex: 1;
    margin-bottom: 0;
}

.AiartyJP-Image .wrapper-video-list .wrapper-item:first-child video {
    background: #141414
}

.AiartyJP-Image .wrapper-video-list .wrapper-item:first-child .item-desc,
.AiartyJP-Image .wrapper-video-list .wrapper-item:first-child .item-title {
    /* left: calc(50vw - 540px) */
    left: calc(50vw - 700px)
}

.AiartyJP-Image-title {
    font-size: 31px;
    line-height: 1.3;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
}
.AiartyJP-Image-desc {
    font-size: 36px;
    line-height: 1.3;
    font-weight: 400;
    color: #ffffff;
}

@media (max-width: 1400px) {
    .AiartyJP-Image-title {
        font-size: 1.4375rem;
    }
    .AiartyJP-Image-desc {
        font-size: 1.4375rem;
    }
    .AiartyJP-Image .wrapper-video-list .wrapper-item:first-child .item-desc,
    .AiartyJP-Image .wrapper-video-list .wrapper-item:first-child .item-title {
        left: calc(50vw - 585px);
    }
}
@media (max-width: 1200px) {
    .wrapper-video-list {
        flex-wrap: wrap;
        height: auto !important;
    }
    .AiartyJP-Image .wrapper-video-list .wrapper-item {
        width: 100%;
    }
    .AiartyJP-Image .wrapper-video-list .wrapper-item.w-480 {
        width: 100%
    }
    .AiartyJP-Image .wrapper-video-list .wrapper-item.w-960 {
        width: 100%
    }
    .AiartyJP-Image .wrapper-video-list .wrapper-item:first-child .item-desc,
    .AiartyJP-Image .wrapper-video-list .wrapper-item:first-child .item-title {
        left: 15%;
    }
    .AiartyJP-Image .wrapper-video-list .wrapper-item .item-title{
        left: 15%;
    }
    .AiartyJP-Image .wrapper-video-list .wrapper-item .item-desc {
        left: 15%;
    }
}
@media (max-width: 992px) {

}
@media (max-width: 768px) {

}
@media (max-width: 576px) {
    .AiartyJP-Image-title {
        font-size: 1.1875rem;
    }
    .AiartyJP-Image-desc {
        font-size: 1.0625rem;
    }
    .AiartyJP-Image .wrapper-video-list .wrapper-item:first-child .item-desc,
    .AiartyJP-Image .wrapper-video-list .wrapper-item:first-child .item-title {
        left: 10%;
        font-size: .8125rem;
    }
    .AiartyJP-Image .wrapper-video-list .wrapper-item .item-title{
        left: 10%;
    }
    .AiartyJP-Image .wrapper-video-list .wrapper-item .item-desc {
        left: 10%;
        font-size: .8125rem;
    }
}

/* ```````````````````````````````````` tianmu-main ``````````````````````````````````````` */
.tianmu-main {
    padding-top: 50px;
}

.tab-intro {
    height: 52px;
    line-height: 52px;
    text-align: center;
    color: rgba(255, 255, 255, .6);
    background: #FFFFFF1A;
    border-radius: 0.75rem;
    margin: 0 6px;
    padding: 0 3rem;
}

.tab-intro.active {
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255);
}

.tab-intro:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
}

.tab-intro:first-child {
    margin: 0 6px 0 0;
}

.tab-intro:last-child {
    margin: 0 0 0 6px;
}

.ws-video {
    position: relative;
    padding-top: calc(620 / 1050 * 100%);
    width: 1050px;
    max-width: 100%;
}

.ws-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 24px;
}

.tianmu-scroll .swiper-container .swiper-slide {
    max-width: 1050px;
    opacity: 1;
}

.swiper-pagination-bullet {
    background: rgba(255, 255, 255, .3);
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: #fff;
}

@media (max-width: 1200px) {

}
@media (max-width: 992px) {

}
@media (max-width: 768px) {

}
@media (max-width: 576px) {

}

@media(max-width: 768px) {
    .tab-intro-mobile {
        height: 52px;
        line-height: 1;
        text-align: center;
        color: rgba(255, 255, 255, .6);
        background: transparent;
        border-radius: 0rem;
        margin: 0 6px;
        padding: 0rem;
        flex: 1;
        text-decoration: none;
    }

    .tab-intro-mobile.active,
    .tab-intro-mobile:hover {
        /* background: linear-gradient(312.6deg, #1BE4FF -3.21%, #0575E6 79.57%); */
        color: #fff;
        background: transparent;
        border: none;
        text-decoration: none;
        border-bottom: 2px solid #806FFF;
    }
}

/* ```````````````````````````````````` AiartyJP-Solution ``````````````````````````````````````` */
.AiartyJP-Solution {
    padding: 100px 0 80px;
}

.solution-list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 15px;
    row-gap: 30px;
}
.solution-item {
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
}
.solution-item-cover {
    width: 392px;
    height: 274px;
    position: relative;
}
.solution-item-mask {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 68px;
    padding: 0 15px;
    box-sizing: border-box;
    z-index: 10;
}
.solution-item-mask .logo-flex {
    gap: 5px;
}
.solution-item-title {
    font-size: 19px;
    line-height: 1.3;
    font-weight: 400;
    color: #ffffff;
}

.solution-item-video video {
    width: 100%;
    height: 100%;
    background: #1f1f1f;
    -o-object-fit: cover;
    object-fit: cover;
}
.solution-item-video img {
    position: absolute;
    opacity: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    transition: all .3s ease;
}

.solution-cover-a {
    position: relative;
    z-index: 0;
}
.solution-cover-b {
    position: absolute;
    width: 0;
    height: 100%;
    opacity: 0;
    left: 0;
    top: 0;
    background-color: #000;
    /* animation: analysis 2s infinite; */
    z-index: 1;
}
.solution-cover-b::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #fff;
    right: -0.5px;
    top: 0;
}
.solution-item-animation img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 0;
}
@keyframes analysis {
    0% {
        width: 0;
        opacity: 1;
    }

    100% {
        width: 100%;
        opacity: 1;
    }
}

@media (max-width: 1200px) {

}
@media (max-width: 992px) {

}
@media (max-width: 768px) {

}
@media (max-width: 576px) {

}

/* ```````````````````````````````````` AiartyJP-Instantiate ``````````````````````````````````````` */
.AiartyJP-Instantiate {
    padding: 80px 0;
    background-color: #111111;
}
.instantiate-flex {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: -120px;
}
.instantiate-list {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.instantiate-item a {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.instantiate-cover {
    position: relative;
    font-size: 0;
}
.instantiate-more {
    position: absolute;
    left: 10px;
    bottom: 10px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 0;
}
.instantiate-more::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url("../images/index-refresh/i-arrow.png") no-repeat center;
    opacity: 0;
}
.instantiate-item:hover .instantiate-cover img {
    filter: blur(5px);
}
.instantiate-item:hover .instantiate-more {
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 50%);
}
.instantiate-item:hover .instantiate-more::after {
    opacity: 1;
}

@media (max-width: 1400px) {
    .instantiate-flex {
        margin-top: 0;
        align-items: flex-start;
    }
}
@media (max-width: 992px) {

}
@media (max-width: 768px) {

}
@media (max-width: 576px) {

}

/* `````````````````````````` ai-product-section `````````````````````````` */
.ai-product-section {
    background-image: url("../images/index-revision/bg-ai-product.jpg");
    background-image: image-set(
        url("../images/index-revision/bg-ai-product.webp") type('image/webp'),
        url("../images/index-revision/bg-ai-product.jpg") type('image/jpeg')
    );
    background-repeat:  no-repeat;
    background-position: center top;
    background-color: #000;
    background-size: 1920px auto;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid #1a1a1a;
    color: #ffffff;
}
.main-title-h1 {
    font-size: 23px;
    font-weight: 400;
    line-height: 1.4;
    color: #999999;
    opacity: 0;
    transform: translateY(50px);transition: all 0.6s 0.2s;
    margin-bottom: 50px;
}
.ai-product-section.active .main-title-h1 {
    opacity: 1;transform: none;
}
.main-aiarty {
    font-size: 57px;
    font-weight: 700;
    line-height: 1.4;
    color: #ffffff;
    opacity: 0;transform: translateY(50px);transition: all 0.6s 0.2s;
}
.ai-product-section.active .main-aiarty {
    opacity: 1;transform: none;
}

.list-info-data {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
}
.item-info-data {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 0;transform: translateX(-50px);transition: all 0.6s 1.2s;
}
.item-info-data:nth-child(2) {transition-delay: 1.4s;}
.item-info-data:nth-child(3) {transition-delay: 1.6s;}
.item-info-data:nth-child(4) {transition-delay: 1.8s;}
.ai-product-section.active .item-info-data {
    opacity: 1;transform: none;
}
.gradient-info {
    background: linear-gradient(135deg, #1ed94f, #ffa81f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 21px;
    line-height: 1;
}
.gradient-info strong {
    font-size: 60px;
    line-height: 1;
    margin-right: 10px;
}
.supplement-info {
    font-size: 21px;
    line-height: 1.4;
    color: #6b6b6b;
}
.ai-product-exhibit {
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin-bottom: 50px;
    gap: 20px;
    opacity: 0;transform: translateY(50px);transition: all 0.6s 0.9s;
}
.ai-product-section.active .ai-product-exhibit {
    opacity: 1;transform: none;
}
.ai-product-box {
    flex: 1;
    max-width: 510px;
    border-radius: 40px;
    overflow: hidden;
    position: relative;
    background-color: #000;
}
.ai-product-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 40px;
    z-index: 10;
}
.ai-product-diagram img {
    max-width: 100%;
    height: auto;
	vertical-align: middle;
}
.ai-product-box svg {vertical-align: middle;}
.ai-product-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}
.logo-tips-area {
    position: relative;
}
.ai-product-logo .logo-tips {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
    padding: 3px 10px;
    background-color: #ff1d1d;
    color: #ffffff;
    font-size: 21px;
    border-radius: 20px;
    transform: translate(50%, -50%);
}
.ai-product-name {
    font-size: 37px;
    font-weight: 400;
    line-height: 1.3;
    color: #ffffff;
}
.ai-product-desc {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: #99928a;
    width: 90%;
    margin: 0 auto 25px;
}
.ai-product-down {
    display: flex;
    justify-content: center;
    align-items: center;
}
.ai-product-down span {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0171e3;
    color: #ffffff;
    font-size: 25px;
    text-decoration: none;
    padding: 15px 50px;
    border-radius: 30px;
}
.ai-product-down a:hover {
    background-color: #0f9bff;
}

#lottie-chaofen {
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    opacity: 1;
    width: 100%;
    z-index: 8;
}
#lottie-bg-chaofen {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    width: 100%;
    z-index: 7;
}
#lottie-koutu {
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    opacity: 1;
    width: 100%;
    z-index: 8;
}
#lottie-bg-koutu {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    width: 100%;
    z-index: 7;
}

.ai-enhance-replenish {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 260px;
    z-index: 9;
}
.slant-text {
    font-size: 21px;
    line-height: 1.4;
    color: #8a83a8;
    position: absolute;
    top: 75px;
    transform: rotateX(22deg) rotateY(31deg) rotate(324deg);
    font-style: italic;
}
.replenish-text-1 {
    left: 10px;
}
.replenish-text-2 {
    left: 125px;
}
.replenish-text-3 {
    left: 230px;
}
.replenish-text-4 {
    left: 340px;
}
.replenish-right {
    position: absolute;
    right: 30px;
    bottom: 40px;
    text-align: right;
}
.replenish-text-5 {
    font-size: 45px;
    font-weight: 700;
    line-height: 1;
    color: #8167e5;
    font-style: italic;
    padding-right: 10px;
}
.replenish-text-6 {
    font-size: 17px;
    line-height: 1.6;
    color: #4f3973;
    font-style: italic;
}

.ai-matting-replenish {
    position: absolute;
    bottom: 0;
    left: 50px;
    right: 50px;
    height: 260px;
    z-index: 9;
}
.matting-key-1 {
    position: absolute;
    left: 36px;
    bottom: 30px;
    font-size: 13px;
    line-height: 1;
    color: #6c4c1f;
}
.matting-key-2 {
    position: absolute;
    left: -25px;
    width: 100px;
    text-align: center;
    bottom: 130px;
    font-size: 14px;
    line-height: 1.4;
    color: #d8ae76;
}

.matting-key-3 {
    position: absolute;
    left: 50px;
    bottom: 220px;
    font-size: 13px;
    line-height: 1.4;
    color: #a18962;
    width: 60px;
}
.matting-key-4 {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    font-size: 15px;
    line-height: 1.4;
    color: #816035;
}
.matting-key-5 {
    position: absolute;
    right: 50px;
    width: 62px;
    text-align: center;
    bottom: 222px;
    font-size: 11px;
    line-height: 1.4;
    color: #9e8360;
}
.matting-key-6 {
    position: absolute;
    left: 50%;
    bottom: 100px;
    transform: translateX(-50%);
    font-size: 27px;
    line-height: 1.2;
    color: #f2d199;
}
.matting-key-7 {
    position: absolute;
    right: 80px;
    bottom: 100px;
    font-size: 12px;
    line-height: 1.4;
    color: #886130;
}
.matting-key-8 {
    position: absolute;
    right: -20px;
    bottom: 125px;
    font-size: 15px;
    line-height: 1.4;
    color: #e2c091;
    width: 80px;
    text-align: center;
}
.matting-key-9 {
    position: absolute;
    right: 55px;
    bottom: 30px;
    font-size: 13px;
    line-height: 1.2;
    color: #6c4c1f;
}

.matting-key-10 {
    position: absolute;
    left: 95px;
    bottom: 128px;
    font-size: 14px;
    line-height: 1;
    color: #886130;
}
/* 中间板块 */
.ai-product-exhibit{transform-style: preserve-3d;perspective: 500px;}
 .ai-product-enhancer{transform-origin: right 0;max-width: 520px;margin: 29px 0;transform: rotateY(-7deg);} /*scaleY(0.95) */
.ai-product-matting{transform-origin: left 0;max-width: 520px;margin: 29px 0;transform: rotateY(7deg);}
.ai-product-video-desc{color: #a1b8e5;font-size: 20px; width: 95%;}
.ai-product-video-desc span{color: #fff;}
#lottie-video {position: absolute; bottom: 0; left: 0;  opacity: 1;  width: 100%;  z-index: 8;}
#lottie-bg-video {position: absolute; bottom: 0; left: 0;  opacity: 0.6;  width: 100%;  z-index: 8;}
.ai-video-replenish{position: absolute;left: 0;bottom: 0;right:0;height: 280px;font-size: 15px;z-index: 9;}
.video-key-1{color: #838ceb;font-size: 18px;}
.video-key-2{color: #acb2f1;padding: 23px 14px 0 0;display: flex;align-items: flex-end;justify-content: flex-end;}
.video-key-2 span{color: rgb(172, 178, 241);font-size: 30px;border-radius: 7px;background:#0d1540;line-height: 39px;padding: 0 15px;display: inline-block; margin-right: 20px;position: relative; margin-bottom: 5px;}
.video-key-3{padding: 0 0 30px 90px;text-align: left;}
.video-key-3 span{display: inline-block; background:linear-gradient(#151d54,#151d54) no-repeat ,linear-gradient(105deg,#6865c9,#313aad) no-repeat;border:1px solid transparent;line-height: 30px;padding: 0 10px;border-radius: 16px;background-clip: padding-box, border-box;background-origin: padding-box, border-box;transform: translateX(-50%);}
.video-key-3 span::before{content: "";display: inline-block;width: 16px;height: 12px;background: url(../images/index-revision/enhancer-video.svg);margin-right: 5px;color: #acb2f1;}
.video-key-4{color: #acb2f1;text-align: right;padding-left:410px;}
.video-key-4 span{display: inline-block; background:linear-gradient(#151d54,#151d54) no-repeat ,linear-gradient(105deg,#6865c9,#313aad) no-repeat;border:1px solid transparent;line-height: 30px;padding: 0 10px;border-radius: 16px;background-clip: padding-box, border-box;background-origin: padding-box, border-box;transform: translateX(-50%);min-width:max-content;}
.video-key-4 span::before{content: "";display: inline-block;width: 19px;height: 13px;background: url(../images/index-revision/frame.svg);margin-right: 5px;color: #acb2f1;}
.video-key-5{padding:8px 0 0 90px;text-align: left;}
.video-key-5 span{display: inline-block; font-size:24px;width: 82px;line-height: 1;text-align: center;}
.video-key-6{text-align: left;padding-left: 30px;line-height: 1;}
.video-key-6 span{color: #6a6edd;}
.video-key-6 var{color: #4852c1;font-style: normal;}

@media (max-width: 1400px) {
    .ai-product-exhibit {
        flex-wrap: wrap;
        align-items: stretch;
    }
    .ai-product-box {
        flex: none;
    }
    .ai-product-enhancer {
        transform: rotateY(0);
        margin: 0;
    }
    .ai-product-matting {
        transform: rotateY(0);
        margin: 0;
    }
}
@media (max-width: 1200px) {
    .list-info-data {
        gap: 30px;
        flex-wrap: wrap;
    }
    .main-aiarty {
        font-size: 2.1875rem;
    }
    .main-title-h1 {
        font-size: 1.1875rem;
    }
    .main-title-h1 br {
        display: none;
    }
    .ai-product-name {
        font-size: 1.3125rem;
    }
    .ai-product-desc {
        font-size: .9375rem;
    }
    .supplement-info {
        font-size: .8125rem;
    }
    .gradient-info {
        font-size: .8125rem;
    }
    .gradient-info strong {
        font-size: 1.4375rem;
    }
}
@media (max-width: 992px) {
     .main-aiarty {
        font-size: 1.4375rem;
    }
    .main-title-h1 {
        font-size: .9375rem;
    }
    .ai-product-desc {
        font-size: .8125rem;
    }
}
@media (max-width: 768px) {

}
@media (max-width: 576px) {
    .ai-product-diagram img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    .ai-product-box {
        width: 100%;
    }
    .ai-enhance-replenish {
        zoom: 0.8;
    }
    .ai-product-logo img {
        width: 70px;
        height: 70px;
    }
    .ai-product-down span {
        font-size: .9375rem;
    }
    .ai-product-wrapper {
        padding-top: 15px;
    }
}

/* `````````````````````````` ai-product-section `````````````````````````` */
/* `````````````````````````` ai-section-course `````````````````````````` */

.ai-section-course {
    text-align: center;
    background-color: #ffffff;
    position: relative;
    padding-top: 80px;
    overflow-x: hidden;
}
.bg-course img{
    max-width: 100%;
    height: auto;
}
.course-container {
    position: absolute;
    left: 0;
    top: 80px;
    width: 100%; 
    text-align: left;
}
.course-container .ai-section-desc {
   width: 850px;
   font-size: 17px;
   line-height: 1.4;
   margin-bottom: 15px;
}

.ai-section-course .main-title-h2 {
    color: #0c0d0d;
}
.ai-section-course .ai-section-desc {
    color: #333333;
}
.course-buttom {
    width: 185px;
    color: #fff;
    font-size: 19px;
}
.course-list {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1920px;
}
.course-item {
    color: #000000;
    border-radius: 8px;
    height: 58px;
    line-height: 58px;
    display: inline-block;
    font-size: 25px;
    position: absolute;
    padding: 0 60px;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    border: 1px solid transparent;
}
.course-item-1 {
    bottom: 100px;
    right: 1150px;
    background-image: linear-gradient(to right, #fdf3fd, #f5f5ff), linear-gradient(90deg, #ffd7f9, #dbe0ff);
}
.course-item-2 {
    bottom: 190px;
    right: 820px;
    background-image: linear-gradient(to right, #f1f4ff, #e8fcff), linear-gradient(90deg, #babfff, #95f9ff);
}
.course-item-3 {
    bottom: 280px;
    right: 580px;
    background-image: linear-gradient(to right, #eaffec, #e5fffb), linear-gradient(90deg, #b8ffb8, #a5fffb);
}
.course-item-4 {
    bottom: 370px;
    right: 230px;
    background-image: linear-gradient(to right, #fff8ee, #ffede9), linear-gradient(90deg, #ffedca, #ffc0b5);
}

@media (max-width: 1400px) {
    .course-list {
        zoom: 0.8;
    }
    .course-container {
        position: relative;
        top: 0;
    }
}
@media (max-width: 1200px) {
    .course-list {
        zoom: 0.7;
    }
}
@media (max-width: 992px) {
    .course-list {
        zoom: 0.5;
    }
    .course-container .ai-section-desc {
        width: 100%;
    }
}
@media (max-width: 768px) {
    .course-list {
        zoom: 0.4;
    }
}
@media (max-width: 576px) {
    .course-list {
        zoom: 0.3;
    }
}
/* `````````````````````````` ai-section-course `````````````````````````` */