@charset "utf-8";

html,
body {
    background: linear-gradient(180deg, #eaf5ee 675px, #ffffff 50%);
    scroll-behavior: smooth;
}
body > nav {
    background: #fff;
}

img {
    max-width: 100%;
}

.container {
    max-width: 1224px;
    width: 100%;
    margin: 0 auto;
}

.digiarty-timer {font-size: 41px;color: #98cbad;line-height: 78px;text-align: center;margin: 10px 0 35px;}
.digiarty-timer li {display: inline-block; vertical-align: top; width: 86px; height: 76px; border: 1px solid #ffffff; font-size: 41px;line-height: 55px;text-align: center;border-radius: 4px; position: relative;background-color: #ffffff;color: #03bb76;}
.digiarty-timer li::after {width: 100%;font-size: 17px;text-align: center;line-height: 17px;position: absolute;bottom: 4px;left: 0;color: #62676a;}
.digiarty-timer li[data-provider="days"]::after {content: "DAY";}
.digiarty-timer li[data-provider="hours"]::after {content: "HOUR"}
.digiarty-timer li[data-provider="minutes"]::after {content: "MINS"}
.digiarty-timer li[data-provider="seconds"]::after {content: "SECS"}

.input-submit-info{line-height:1.4;padding-left:25px;position:relative;text-align:left;font-size:15px;margin-top: 15px;}
.input-submit-info span{color:red;}
.input-submit-info input{display:none;}
.input-submit-info label{position:absolute;top:1px;left:0;width:14px;height:14px;border:1px solid #666666;border-radius:4px;cursor:pointer;}
.input-submit-info label::before{content:"";display:none;width:3px;height:10px;border-right:2px solid #4fc452;border-bottom:2px solid #4fc452;transform:rotate(45deg);margin-left:5px;}
.input-submit-info input:checked+label::before{display:block;}
.input-submit-info input:checked~span{color:#939292;}
.input-submit-info a {color:inherit;}

.banner-wrapper .switch-system{position:absolute;right:20px;top:20px;}
.switch-flex{display:flex;justify-content:center;align-items:center;gap:10px;}
.switch-wrapper{display:inline-block;height:15px;margin:0;position:relative;width:32px;}
.switch-wrapper input{height:0;opacity:0;width:0;}
.switch-slider{background-color:#ffffff;border:1px solid #ababab;border-radius:15px;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.4s;}
input:checked+.switch-slider:before{left:calc(100% - 13px);}
.switch-slider:before{background-color:#4c7fff;border-radius:50%;bottom:1px;content:"";height:11px;left:2px;position:absolute;transition:.4s;width:11px;}
.system-item{display:flex;justify-content:center;align-items:center;gap:10px;color:#4f4f4f;font-size:17px;}
.system-item.activated{color:#4c7fff;}



@media (max-width:1200px){
    .container {
        padding: 0 15px;
        box-sizing: border-box;
    }
}
@media (max-width:992px){

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

}
@media (max-width:576px){
    .digiarty-timer {
        zoom: 0.7;
    }
}


/* `````````````````````````````````````````````````````````````````````````````````````` */
.part-calendar {
    padding: 0 0 80px;
}
.calendar {
    position: relative;
    background-color: #faf0c2;
    border: 20px solid #ffcb5a;
    border-radius: 100px;
    box-shadow: 0 0 10px 0 #ffcb5a;
}
.calendar::before {
    content: "";
    position: absolute;
    top: -14px;
    left: -14px;
    right: -15px;
    bottom: -14px;
    border: 9px dotted #fef5cb;
    border-radius: 95px;
}
.calendar-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    border-radius: 80px;
    overflow: hidden;
}
.tips-card { 
    grid-area: 6 / 3 / 7 / 5; 
    background: url("../images/adventscalender/tips-calendar.png") no-repeat right bottom #fffdf0;
    background-size: contain;
    border-radius: 10px;
}

.calendar .card {
    width: 290px;
    height: 330px;
    perspective: 1000px;
    position: relative;
    color: #656565;
    font-size: 17px;
    line-height: 1.2;
}
.card-container {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.card.locked .card-container {
    transform: rotateY(0deg);
}

.card.turnover .card-container {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 17px;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.card-front {
    background: #fffdf0;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    padding: 20px 0;
}

.card-back {
    background-color: #32b972;
    transform: rotateY(180deg);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;
    color: #fff;
    position: relative;
}
.card-back::before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    background: url("../images/adventscalender/bt-arrow.svg") no-repeat center;
    background-size: cover;
    position: absolute;
    left: 35px;
    top: 10px;
    transform: rotate(90deg);
    cursor: pointer;
}

.box-card {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 10px;
}
.card-name {
    color: #1c1c1c;
    font-size: 19px;
}
.card-name em {
    color: #f02900;
    font-style: normal;
}
.card-name del {
    color: #f02900;
    font-style: normal;
}
.card-name a {
    color: inherit;
    text-decoration: none;
}
.card-name a:hover {
    text-decoration: underline;
}
.card-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 设置为 2 行 */
    line-clamp: 2; /* 设置为 2 行 */
    line-height: 1.2; /* 行高 */
    max-height: 2.4; /* 2 行高度 = 行高 * 行数 */
    overflow: hidden;
    padding:  0 20px;
}
.card-button button {
    outline: none;
    border: none;
    border-radius: 30px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 9px 43px;
    background: linear-gradient(90deg, #ff9f1b, #ff832b);
    font-size: 19px;
    cursor: not-allowed;
    filter: grayscale(100);
}
.card-back-title {
    color: #fff5b9;
    font-size: 25px;
}
.card-email-submit {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    overflow: hidden;
}
.card-email-submit input {
    flex: 1;
    background-color: #fff;
    height: 33px;
    border: none;
    outline: none;
    padding: 0 5px;
    color: #000;
}
.card-email-submit button {
    outline: none;
    border: none;
    background-color: #ffef8f;
    color: #20bf83;
    height: 33px;
    padding: 0 15px;
    cursor: pointer;
}
.card-back-desc {
    line-height: 1.4;
}
.locked-mask {
    position: absolute;
    z-index: 3;
    background: rgba(0, 0, 0, 0.6);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}
.card.locked .locked-mask {
    display: block;
}
.mask-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: #ffb24e;
    padding: 20px;
    color: #ffffff;
}

.IObit-over {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    left: 0;
    top: 0;
}
.IObit-over-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
}

@media (max-width:1200px){
    .calendar-container {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(8, 1fr);
    }
    .tips-card { 
        grid-area: 8 / 2 / 9 / 4;
    }
    .calendar .card {
        width: 100%;
    }
}
@media (max-width:992px){
   
}
@media (max-width:768px){
    .calendar-container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(12, 1fr);
    }
    .tips-card { 
        grid-area: 12 / 1 / 13 / 3;
    }
}
@media (max-width:576px){
    .calendar-container {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(22, 1fr);
    }
    .tips-card { 
        display: none;
    }
}

/* ``````````````````````````````````````````````````````````````````````````` */
.part-banner {
    background: url("../images/adventscalender/bg-banner.jpg") no-repeat center top;
    background-size: 100% auto;
    text-align: center;
    padding: 80px 0;
}

.title-h1 {
    font-size: 41px;
    font-weight: 700;
    color: #235636;
    line-height: 1.2;
    margin-bottom: 10px;
}
.title-suhead {
    font-size: 21px;
    font-weight: 400;
    color: #00b571;
    line-height: 1.4;
    margin-bottom: 30px;
}
.main-suhead {
    font-size: 19px;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 30px;
    text-align: center;
}
.title-h2 {
    font-size: 33px;
    font-weight: 700;
    color: #000000;
    line-height: 1.2;
    margin-bottom: 10px;
    text-align: center;
}
.title-h2 a {
    text-decoration: none;
    color: inherit;
}
.title-h2 a:hover {
    text-decoration: underline;
    color: #2691fc;
}
.title-h3 {
    font-size: 31px;
    font-weight: 700;
    color: #000000;
    line-height: 1.2;
    margin-bottom: 10px;
}


.inner-videos-wrap {
    position: relative;
}

.inner-videos li {
    display: none;
}

.inner-videos li.active {
    display: block;
}

.inner-videos .video-wrap {
    width: 528px;
    position: relative;
}

.inner-videos .video-wrap::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}

.inner-videos .video-wrap video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px;
}

.inner-videos p {
    font-size: 19px;
    color: #000;
    line-height: 1;
    text-align: center;
    padding: 10px 0 0;
    margin-bottom: 15px;
}

.inner-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.inner-dots li {
    width: 40px;
    height: 8px;
    cursor: pointer;
    background-color: #e0e0e0;
}

.inner-dots li.active {
    background-color: #33c973;
}


.banner-tab {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
}
.banner-tab-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    color: #5b7567;
    border-radius: 30px;
}
.banner-tab-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px;
    padding: 0 20px;
    border-radius: 30px;
    font-size: 21px;
    min-width: 250px;
    position: relative;
    text-decoration: none;
    color: inherit;
}
.banner-tab-item.active {
    background-color: #ffe28b;
    color: #284a23;
}
.banner-tab-item img {
    position: absolute;
    left: 0;
    bottom: 0;
}

.banner-wrapper {
    position: relative;
    margin-bottom: 50px;
}
.banner-container {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 20px 0 #bfd4d2;
}

.banner-content-wrapper {
    padding: 30px 45px;
    background-color: #fff;
}


.banner-content-flex {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 40px;
    padding-top: 20px;
}
.content-right {
    flex: 1;
    text-align: left;
}
.content-right p {
    font-size: 17px;
    line-height: 1.4;
}
.content-right-desc {
    font-size: 19px;
}
.content-right-list {
    padding: 30px 0;
}
.content-right-list li {
    position: relative;
    padding: 3px 0 3px 20px;
}
.content-right-list li::before {
    content: '';
    display: block;
    width: 3px;
    height: 10px;
    border: 2px solid #37ba43;
    transform: rotate(45deg);
    border-top-color: transparent;
    border-left-color: transparent;
    position: absolute;
    left: 0;
    top: 6px;
}
.content-right-btns {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
}
.button-base {
    width: 270px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
    margin: 0 auto;
}
.button-fold {
    background-color: #36cd79;
    font-size: 21px;
}
.button-fold span {
    color: #fff667;
}
.button-buy {
    background-color: #fca033;
    font-size: 23px;
}
.button-buy-type {
    font-size: 15px;
    line-height: 1;
    color: #37240e;
    display: none;
}
.button-buy-price {
    font-size: 15px;
    line-height: 1;
    color: #fff;
}

@media (max-width:1200px){

}
@media (max-width:992px){
    .banner-content-flex {
        flex-wrap: wrap;
    }
    .content-right-btns {
        justify-content: center;
        flex-wrap: wrap;
    }
    .part-banner {
        padding: 30px 0;
    }
    .banner-wrapper {
        margin-bottom: 20px;
    }
}
@media (max-width:768px){
    .title-h1 {
        font-size: 1.6875rem;
    }
    .title-h2 {
        font-size: 1.4375rem;
    }
    .title-suhead {
        font-size: 1.1875rem;
    }
    .main-suhead {
        font-size: 1.0625rem;
    }
}
@media (max-width:576px){
    .banner-tab-wrap {
        flex-wrap: wrap;
    }
    .inner-videos .video-wrap {
        width: 100%;
        max-width: 528px;
    }
}

/* ``````````````````````````````````````````````````````````````````````````` */
.banner-content-fold {
    background-color: #f7f7f7;
    padding: 35px 45px;
}
.banner-fold-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    position: relative;
}
.banner-fold-left {
    flex: 1;
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.banner-fold-right {
    flex: 1;
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
}
.banner-fold-mid {
    position: absolute;
    left: 50%;
    top: 50px;
    transform: translateX(-50%);
}

.fold-desc {
    font-size: 17px;
    line-height: 1.4;
    color: #000000;
    margin-bottom: 10px;
}
.fold-content {
    background-color: #fff;
    padding: 40px 60px 15px;
}
.rights-content {
    background-color: #f1f1f1;
    padding: 20px;
    display: flex;
    justify-content: center;
    text-align: left;
}
.rights-item {
    margin-bottom: 30px;
}
.rights-name {
    font-size: 17px;
    margin-bottom: 5px;
}
.rights-list li {
    position: relative;
    padding: 3px 0 3px 20px;
}
.rights-list li.rights-true::before {
    content: '';
    display: block;
    background: url("../images/adventscalender/i-yes.png") no-repeat center;
    width: 15px;
    height: 15px;
    position: absolute;
    left: 0;
    top: 8px;
}
.rights-list li.rights-false::before {
    content: '';
    display: block;
    background: url("../images/adventscalender/i-no.png") no-repeat center;
    width: 13px;
    height: 2px;
    position: absolute;
    left: 1px;
    top: 15px;
}

.fold-email-submit {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #36cd79;
}
.fold-email-submit input {
    flex: 1;
    background-color: #fff;
    height: 53px;
    border: none;
    outline: none;
    padding: 0 10px;
    font-size: 15px;
    color: #000;
}
.fold-email-submit button {
    outline: none;
    border: none;
    background-color: #36cd79;
    color: #fff;
    height: 53px;
    padding: 0 25px;
    cursor: pointer;
    font-size: 24px;
}
.hide-btn {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 100%);
    color: #000;
    background: linear-gradient(180deg, #36cd79, #d2fae1);
    width: 120px;
    height: 35px;
    line-height: 35px;
    font-size: 17px;
    text-align: center;
    border-radius: 0 0 10px 10px;
    cursor: pointer;
}

.buy-payment-service {padding-top: 18px;display: flex;justify-content: center;align-items: flex-end;gap: 120px;flex-wrap: wrap;}
.buy-service {display: flex;flex-wrap: wrap;}
.buy-service>li {min-width: 200px;display: flex;justify-content: center;align-items: center;gap: 15px;font-size: 14px;color: #b5c8bc;line-height: 1.3;text-align: center;position: relative;}
.buy-service>li::before {content: "";width: 51px;height: 41px;background: url(../images/adventscalender/service-icons.png) no-repeat left center;}
.buy-service>li+li::after {content: "";width: 1px;height: 33px;background-color: #b5c8bc;position: absolute;left: 0;top: 50%;margin-top: -16px;}
.buy-service>li:nth-child(2)::before {width: 39px;background-position-x: -207px;}
.buy-service>li:nth-child(3)::before {width: 38px;background-position-x: -409px;}


@media (max-width:1200px){
    .fold-content {padding: 40px 40px 15px;}
}
@media (max-width:992px){
    .buy-payment-service {
        gap: 30px;
    }
    .banner-fold-flex  {
        flex-wrap: wrap;
    }
    .banner-fold-left {
        flex: none;
        width: 100%;
    }
    .banner-fold-right {
        flex: none;
        width: 100%;
    }
    .banner-fold-mid {
        top: 0;
        left: 0;
        transform: translate(0, 0);
        position: relative;
        text-align: center;
        margin: 0 auto;
    }
}
@media (max-width:768px){
    .buy-service {
        justify-content: center;
        gap: 10px;
    }
}
@media (max-width:576px){
    .banner-content-fold {
        padding: 20px;
    }
    .fold-content {
        padding: 40px 10px 15px;
    }
    .fold-email-submit button {
        font-size: 19px;
    }
}

/* ````````````````````````````````````````````````````````````````````````````` */
.ai-face-features{padding: 70px 0 20px;background-color: #f7f7f7;}
.ai-face-features .features{display: flex;justify-content: center;align-items: center;gap: 15px;padding-top: 30px;}
.ai-face-features .features a{display: inline-block;position: relative;}
.ai-face-features .features a span{color: #fff5e7;position: absolute;width: 100%;text-align: right;padding-right: 10px;box-sizing: border-box;left: 0;top: 10px;font-size: 15px;line-height: 1.1;}
.ai-face-features .features a span var{font-style: normal;color: #fff;display: inline-block;background: #ff4444;border-radius: 5px;line-height: 1.2;padding: 0 3px;}
.ai-face-features .features a img{transition: all 0.2s;border-radius: 10px;}
.ai-face-features .features a:not(.face):hover img{transform: scale(1.1);}

/* ````````````````````````````````````````````````````````````````````````````` */
.faq{padding:50px 0; background-color: #f7f7f7;}
.slide-container {padding: 10px 0 0;}
.slide-container .qes_one{border-bottom:1px solid #e6e6e6;padding:18px 0 8px;}
.slide-container .t{font-size:18px;line-height:20px;cursor:pointer;padding-bottom:10px;position:relative;padding-right:25px;}
.slide-container .t::before{content:"";width:17px;height:3px;background-color:#ffb069;position:absolute;top:8px;right:0;}
.slide-container .t::after{content:"";width:3px;height:17px;background-color:#ffb069;position:absolute;top:1px;right:7px;}
.slide-container .t.focus::after{display:none;}
.slide-container .qes_ans{color:#737480;display:none;}
.slide-container a{color:#2691fc;}


@media (max-width:1200px){

}
@media (max-width:992px){
    .ai-face-features .features{flex-wrap: wrap;justify-content: space-evenly;gap: 10px;}
}
@media (max-width:768px){

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


.hide-share{text-align:center;margin-top:35px;}
.hide-share-title {margin-bottom: 10px;color: #000;font-size: 17px;}
.m01-share-a{display:inline-block;color:#000;padding:0 4px;text-decoration:none;}
.m01-share-a::before{content:'';display:block;margin:0 auto;height:30px;width:30px;background:url(https://www.aiarty.com/images/event/matting-giveaway/m01-share-icons.svg) no-repeat center top/100% auto;}
.m01-share-a-1:not([href])::before{background-position-y:-162px;}
.m01-share-a-2::before{background-position-y:-32px;}
.m01-share-a-3::before{background-position-y:-65px;}
.m01-share-a-4::before{background-position-y:-97px;}
.m01-share-a-5::before{background-position:4px -129px;}
.m01-share-a-1 span:last-of-type,.m01-share-a-1:not([href]) span:first-of-type{display:none;}
.m01-share-a-1:not([href]) span:last-of-type{display:initial;}

.mobile-flex-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
}


.slide-bar{position: fixed;display: none; width: 215px;right: 2%;top: 50%;transform: rotateY(-50%); padding: 40px 0 0;}
.slide-bar::before{content:''; background: url(../images/adventscalender/egg.png) no-repeat left center;position: absolute;left: -20px;top: 40px;width: 41px;height: 55px;}
.slide-bar.active{display: block;}
.slide-bar .link-box a{font-size: 19px;text-decoration: none;cursor: pointer;color: inherit;border: 2px solid #000;border-radius: 30px;display: inline-block;width: 210px;text-align: center;margin-top: 10px;height: 55px;display: flex;justify-content: center;align-items: center;white-space: nowrap;}
.slide-bar .link-box a:hover{background: #ffe28b;color: #284a23;}


.giveaway-version-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
}

.giveaway-version-mask p {
    color: #fff;
    font-size: 21px;
    line-height: 26px;
    text-align: center;
}

.giveaway-version-mask a {
    text-decoration: underline;
    color: #538ffe;
}

.giveaway-version-mask a:hover {
    color: #538ffe;
}