body {
    margin: 0;
    padding: 0;
}
.swiper {
    width: 100%;
    height: 100%;
}
.slide-item {
    width: 100%;
    position: relative;
}
.slide-item .img {
    width: 100%;
    height: auto;
    object-fit: fill;
}
.slide-item .comfirm {
    width: 100%;
    height: auto;
    object-fit: fill;
    position: absolute;
    z-index: 10;
}
.swiper-button-next, .swiper-button-prev {
    padding: 0 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255,.4);
    padding: 7px 15px;
}
.swiper-button-next:after, .swiper-button-prev:after {
    color: rgba(0, 0, 0, .7);
}
.slide-item .comfirm-1-1 {
    width: 23%;
    height: auto;
    object-fit: fill;
    left: 45%;
    top: 43%;
    position: absolute;
    display: none;
    opacity: 0;
}

.swiper-slide-active .item-1-1 {
    display: block;
    animation-name: item-1-1;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes item-1-1
{
    from { opacity: 0;top: 43%;}
    to{ opacity: 1;top: 45%;}
}

@-webkit-keyframes item-1-1 /*Safari and Chrome*/
{
    from { opacity: 0;top: 43%;}
    to{ opacity: 1;top: 45%;}
}

.slide-item .comfirm-1-2 {
    width: 13%;
    height: auto;
    object-fit: fill;
    right: 10%;
    top: 60%;
    position: absolute;
    display: none;
    opacity: 0;
}

.swiper-slide-active .item-1-2 {
    display: block;
    animation-name: item-1-2;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}

@keyframes item-1-2
{
    from { opacity: 0;top: 74%;}
    to{ opacity: 1;top: 72%;}
}

@-webkit-keyframes item-1-2 /*Safari and Chrome*/
{
    from { opacity: 0;top: 74%;}
    to{ opacity: 1;top: 72%;}
}

.slide-item .comfirm-2-1 {
    width: 19%;
    height: auto;
    object-fit: fill;
    left: 5%;
    top: 23%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-2-1 {
    display: block;
    animation-name: item-2-1;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-delay: 1;
    animation-fill-mode: forwards;
}
@keyframes item-2-1
{
    from { opacity: 0;top: 33%;}
    to{ opacity: 1;top: 35%;}
}

@-webkit-keyframes item-2-1 /*Safari and Chrome*/
{
    from { opacity: 0;top: 33%;}
    to{ opacity: 1;top: 35%;}
}
.slide-item .comfirm-2-2 {
    width: 12%;
    height: auto;
    object-fit: fill;
    left: 33%;
    top: 48%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-2-2 {
    display: block;
    animation-name: item-2-2;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}
@keyframes item-2-2
{
    from { opacity: 0;top: 62%;}
    to{ opacity: 1;top: 60%;}
}

@-webkit-keyframes item-2-2 /*Safari and Chrome*/
{
    from { opacity: 0;top: 62%;}
    to{ opacity: 1;top: 60%;}
}
.slide-item .comfirm-2-3 {
    width: 38%;
    height: auto;
    object-fit: fill;
    left: 10%;
    bottom: 3%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-2-3 {
    display: block;
    animation-name: item-2-3;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}
@keyframes item-2-3
{
    from { opacity: 0;bottom: 3%;}
    to{ opacity: 1;bottom: 5%;}
}

@-webkit-keyframes item-2-3 /*Safari and Chrome*/
{
    from { opacity: 0;bottom: 3%;}
    to{ opacity: 1;bottom: 5%;}
}
.slide-item .comfirm-2-4 {
    width: 15%;
    height: auto;
    object-fit: fill;
    right: 18%;
    top: 23%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-2-4 {
    display: block;
    animation-name: item-2-4;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-delay: 3s;
    animation-fill-mode: forwards;
}
@keyframes item-2-4
{
    from { opacity: 0; top: 18%;}
    to{ opacity: 1; top: 20%;}
}

@-webkit-keyframes item-2-4 /*Safari and Chrome*/
{
    from { opacity: 0; top: 18%;}
    to{ opacity: 1; top: 20%;}
}
.slide-item .comfirm-3-1 {
    width: 20%;
    height: auto;
    object-fit: fill;
    left: 5%;
    top: 28%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-3-1 {
    display: block;
    animation-name: item-3-1;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-3-1
{
    from { opacity: 0;top: 43%;}
    to{ opacity: 1;top: 45%;}
}

@-webkit-keyframes item-3-1 /*Safari and Chrome*/
{
    from { opacity: 0;top: 43%;}
    to{ opacity: 1;top: 45%;}
}
.slide-item .comfirm-3-2 {
    width: 14.5%;
    height: auto;
    object-fit: fill;
    right: 7%;
    bottom: 8%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-3-2 {
    display: block;
    animation-name: item-3-2;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}
@keyframes item-3-2
{
    from { opacity: 0;bottom: 3%;}
    to{ opacity: 1;bottom: 5%;}
}

@-webkit-keyframes item-3-2 /*Safari and Chrome*/
{
    from { opacity: 0;bottom: 3%;}
    to{ opacity: 1;bottom: 5%;}
}
.slide-item .comfirm-4-1 {
    width: 22.5%;
    height: auto;
    object-fit: fill;
    left: 5%;
    top: 28%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-4-1 {
    display: block;
    animation-name: item-4-1;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-4-1
{
    from { opacity: 0;top: 28%;}
    to{ opacity: 1;top: 30%;}
}

@-webkit-keyframes item-4-1 /*Safari and Chrome*/
{
    from { opacity: 0;top: 28%;}
    to{ opacity: 1;top: 30%;}
}
.slide-item .comfirm-4-2 {
    width: 21.5%;
    height: auto;
    object-fit: fill;
    right: 40%;
    top: 58%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-4-2 {
    display: block;
    animation-name: item-4-2;
    animation-duration: 2s;
    animation-delay: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-4-2
{
    from { opacity: 0;top: 67%;}
    to{ opacity: 1;top: 65%;}
}

@-webkit-keyframes item-4-2 /*Safari and Chrome*/
{
    from { opacity: 0;top: 67%;}
    to{ opacity: 1;top: 65%;}
}
.slide-item .comfirm-4-3 {
    width: 32%;
    height: auto;
    object-fit: fill;
    right: 15%;
    top: 8%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-4-3 {
    display: block;
    animation-name: item-4-3;
    animation-duration: 2s;
    animation-delay: 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-4-3
{
    from { opacity: 0;top: 8%;}
    to{ opacity: 1;top: 10%;}
}

@-webkit-keyframes item-4-3 /*Safari and Chrome*/
{
    from { opacity: 0;top: 8%;}
    to{ opacity: 1;top: 10%;}
}
.slide-item .comfirm-5-1 {
    width: 18%;
    height: auto;
    object-fit: fill;
    left: 5%;
    top: 13%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-5-1 {
    display: block;
    animation-name: item-5-1;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-5-1
{
    from { opacity: 0;top: 15%;}
    to{ opacity: 1;top: 17%;}
}

@-webkit-keyframes item-5-1 /*Safari and Chrome*/
{
    from { opacity: 0;top: 15%;}
    to{ opacity: 1;top: 17%;}
}
.slide-item .comfirm-5-2 {
    width: 18%;
    height: auto;
    object-fit: fill;
    right: 55%;
    top: 18%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-5-2 {
    display: block;
    animation-name: item-5-2;
    animation-duration: 2s;
    animation-delay: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-5-2
{
    from { opacity: 0;top: 25%;}
    to{ opacity: 1;top: 27%;}
}

@-webkit-keyframes item-5-2 /*Safari and Chrome*/
{
    from { opacity: 0;top: 25%;}
    to{ opacity: 1;top: 27%;}
}

.slide-item .comfirm-5-3 {
    width: 22%;
    height: auto;
    object-fit: fill;
    right: 15%;
    bottom: 3%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-5-3 {
    display: block;
    animation-name: item-5-3;
    animation-duration: 2s;
    animation-delay: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-5-3
{
    from { opacity: 0;bottom: 3%;}
    to{ opacity: 1;bottom: 5%;}
}

@-webkit-keyframes item-5-3 /*Safari and Chrome*/
{
    from { opacity: 0;bottom: 3%;}
    to{ opacity: 1;bottom: 5%;}
}
.slide-item .comfirm-6-1 {
    width: 24%;
    height: auto;
    object-fit: fill;
    left: 35%;
    top: 8%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-6-1 {
    display: block;
    animation-name: item-6-1;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-6-1
{
    from { opacity: 0;top: 8%;}
    to{ opacity: 1;top: 10%;}
}

@-webkit-keyframes item-6-1 /*Safari and Chrome*/
{
    from { opacity: 0;top: 8%;}
    to{ opacity: 1;top: 10%;}
}

.slide-item .comfirm-7-1 {
    width: 25%;
    height: auto;
    object-fit: fill;
    left: 8%;
    bottom: 33%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-7-1 {
    display: block;
    animation-name: item-7-1;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-7-1
{
    from { opacity: 0;bottom: 33%;}
    to{ opacity: 1;bottom: 35%;}
}

@-webkit-keyframes item-7-1 /*Safari and Chrome*/
{
    from { opacity: 0;bottom: 33%;}
    to{ opacity: 1;bottom: 35%;}
}
.slide-item .comfirm-7-2 {
    width: 26%;
    height: auto;
    object-fit: fill;
    left: 50%;
    bottom: 8%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-7-2 {
    display: block;
    animation-name: item-7-2;
    animation-duration: 2s;
    animation-delay: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-7-2
{
    from { opacity: 0;bottom: 8%;}
    to{ opacity: 1;bottom: 10%;}
}

@-webkit-keyframes item-7-2 /*Safari and Chrome*/
{
    from { opacity: 0;bottom: 8%;}
    to{ opacity: 1;bottom: 10%;}
}
.slide-item .comfirm-7-3 {
    width: 13%;
    height: auto;
    object-fit: fill;
    left: 40%;
    top: 18%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-7-3 {
    display: block;
    animation-name: item-7-3;
    animation-duration: 2s;
    animation-delay: 4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-7-3
{
    from { opacity: 0;top: 11%;}
    to{ opacity: 1;top: 13%;}
}

@-webkit-keyframes item-7-3 /*Safari and Chrome*/
{
    from { opacity: 0;top: 11%;}
    to{ opacity: 1;top: 13%;}
}
.slide-item .comfirm-8-1 {
    width: 18%;
    height: auto;
    object-fit: fill;
    left: 3%;
    top: 33%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-8-1 {
    display: block;
    animation-name: item-8-1;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-8-1
{
    from { opacity: 0;top: 40%;}
    to{ opacity: 1;top: 42%;}
}

@-webkit-keyframes item-8-1 /*Safari and Chrome*/
{
    from { opacity: 0;top: 40%;}
    to{ opacity: 1;top: 42%;}
}
.slide-item .comfirm-8-2 {
    width: 13%;
    height: auto;
    object-fit: fill;
    bottom: 3%;
    right: 15%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-8-2 {
    display: block;
    animation-name: item-8-2;
    animation-duration: 2s;
    animation-delay: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-8-2
{
    from { opacity: 0;bottom: 3%;}
    to{ opacity: 1;bottom: 5%;}
}

@-webkit-keyframes item-8-2 /*Safari and Chrome*/
{
    from { opacity: 0;bottom: 3%;}
    to{ opacity: 1;bottom: 5%;}
}

.slide-item .comfirm-9-1 {
    width: 13%;
    height: auto;
    object-fit: fill;
    left: 45%;
    top: 48%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-9-1 {
    display: block;
    animation-name: item-9-1;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-9-1
{
    from { opacity: 0; top: 48%;}
    to{ opacity: 1; top: 50%;}
}

@-webkit-keyframes item-9-1 /*Safari and Chrome*/
{
    from { opacity: 0; top: 48%;}
    to{ opacity: 1; top: 50%;}
}
.slide-item .comfirm-9-2 {
    width: 23%;
    height: auto;
    object-fit: fill;
    right: 15%;
    top: 73%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-9-2 {
    display: block;
    animation-name: item-9-2;
    animation-duration: 2s;
    animation-delay: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-9-2
{
    from { opacity: 0;top: 77%;}
    to{ opacity: 1;top: 75%;}
}

@-webkit-keyframes item-9-2 /*Safari and Chrome*/
{
    from { opacity: 0;top: 77%;}
    to{ opacity: 1;top: 75%;}
}
.slide-item .comfirm-10-3 {
    width: 13%;
    height: auto;
    object-fit: fill;
    left: 43%;
    bottom: 18%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-10-3 {
    display: block;
    animation-name: item-10-3;
    animation-duration: 1s;
    animation-delay: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-10-3
{
    from { opacity: 0;bottom: 38%;}
    to{ opacity: 1;bottom: 40%;}
}

@-webkit-keyframes item-10-3 /*Safari and Chrome*/
{
    from { opacity: 0;bottom: 38%;}
    to{ opacity: 1;bottom: 40%;}
}
.slide-item .comfirm-10-4 {
    width: 18%;
    height: auto;
    object-fit: fill;
    right: 15%;
    bottom: 3%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-10-4 {
    display: block;
    animation-name: item-10-4;
    animation-duration: 2s;
    animation-delay: 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-10-4
{
    from { opacity: 0;bottom: 3%;}
    to{ opacity: 1;bottom: 5%;}
}

@-webkit-keyframes item-10-4 /*Safari and Chrome*/
{
    from { opacity: 0;bottom: 3%;}
    to{ opacity: 1;bottom: 5%;}
}
.slide-item .comfirm-10-1 {
    width: 25%;
    height: auto;
    object-fit: fill;
    left: 5%;
    top: 3%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-10-1 {
    display: block;
    animation-name: item-10-1;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-10-1
{
    from { opacity: 0;top: 3%;}
    to{ opacity: 1;top: 5%;}
}

@-webkit-keyframes item-10-1 /*Safari and Chrome*/
{
    from { opacity: 0;top: 3%;}
    to{ opacity: 1;top: 5%;}
}
.slide-item .comfirm-10-2 {
    width: 18%;
    height: auto;
    object-fit: fill;
    left: 2%;
    bottom: 43%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-10-2 {
    display: block;
    animation-name: item-10-2;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-10-2
{
    from { opacity: 0;bottom: 53%;}
    to{ opacity: 1;bottom: 55%;}
}

@-webkit-keyframes item-10-2 /*Safari and Chrome*/
{
    from { opacity: 0;bottom: 53%;}
    to{ opacity: 1;bottom: 55%;}
}

.slide-item .comfirm-11-1 {
    width: 14%;
    height: auto;
    object-fit: fill;
    left: 8%;
    top: 6%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-11-1 {
    display: block;
    animation-name: item-11-1;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-11-1
{
    from { opacity: 0;top: 6%;}
    to{ opacity: 1;top: 8%;}
}

@-webkit-keyframes item-11-1 /*Safari and Chrome*/
{
    from { opacity: 0;top: 6%;}
    to{ opacity: 1;top: 8%;}
}
.slide-item .comfirm-11-2 {
    width: 32%;
    height: auto;
    object-fit: fill;
    right: 4%;
    bottom: 5%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-11-2 {
    display: block;
    animation-name: item-11-2;
    animation-duration: 2s;
    animation-delay: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-11-2
{
    from { opacity: 0;bottom: 5%;}
    to{ opacity: 1;bottom: 7%;}
}

@-webkit-keyframes item-11-2 /*Safari and Chrome*/
{
    from { opacity: 0;bottom: 5%;}
    to{ opacity: 1;bottom: 7%;}
}
.slide-item .comfirm-12-1 {
    width: 25%;
    height: auto;
    object-fit: fill;
    left: 5%;
    top: 1%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-12-1 {
    display: block;
    animation-name: item-12-1;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-12-1 {
    from { opacity: 0;top: 1%;}
    to{ opacity: 1;top: 3%;}
}

@-webkit-keyframes item-12-1 /*Safari and Chrome*/
{
    from { opacity: 0;top: 1%;}
    to{ opacity: 1;top: 3%;}
}
.slide-item .comfirm-12-2 {
    width: 24%;
    height: auto;
    object-fit: fill;
    left: 30%;
    bottom: 64%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-12-2 {
    display: block;
    animation-name: item-12-2;
    animation-duration: 2s;
    animation-delay: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-12-2 {
    from { opacity: 0;bottom: 64%;}
    to{ opacity: 1;bottom: 66%;}
}

@-webkit-keyframes item-12-2 /*Safari and Chrome*/
{
    from { opacity: 0;bottom: 64%;}
    to{ opacity: 1;bottom: 66%;}
}
.slide-item .comfirm-12-3 {
    width: 17%;
    height: auto;
    object-fit: fill;
    left: 30%;
    bottom: 13%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-12-3 {
    display: block;
    animation-name: item-12-3;
    animation-duration: 2s;
    animation-delay: 4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-12-3 {
    from { opacity: 0;bottom: 13%;}
    to{ opacity: 1;bottom: 15%;}
}

@-webkit-keyframes item-12-3 /*Safari and Chrome*/
{
    from { opacity: 0;bottom: -20%;}
    to{ opacity: 1;bottom: 15%;}
}
.slide-item .comfirm-13-1 {
    width: 20%;
    height: auto;
    object-fit: fill;
    left: 5%;
    top: 28%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-13-1 {
    display: block;
    animation-name: item-13-1;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-13-1 {
    from { opacity: 0;top: 28%;}
    to{ opacity: 1;top: 30%;}
}

@-webkit-keyframes item-13-1 /*Safari and Chrome*/
{
    from { opacity: 0;top: 28%;}
    to{ opacity: 1;top: 30%;}
}
.slide-item .comfirm-13-2 {
    width: 32%;
    height: auto;
    object-fit: fill;
    left: 30%;
    bottom: 3%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-13-2 {
    display: block;
    animation-name: item-13-2;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}
@keyframes item-13-2
{
    from { opacity: 0;bottom: 3%;}
    to{ opacity: 1;bottom: 5;}
}

@-webkit-keyframes item-13-2 /*Safari and Chrome*/
{
    from { opacity: 0;bottom: 3%;}
    to{ opacity: 1;bottom: 5%;}
}


.slide-item .comfirm-14-1 {
    width: 18%;
    height: auto;
    object-fit: fill;
    left: 15%;
    top: 18%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-14-1 {
    display: block;
    animation-name: item-14-1;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-14-1 {
    from { opacity: 0;top: 18%;}
    to{ opacity: 1;top: 20%;}
}

@-webkit-keyframes item-14-1 /*Safari and Chrome*/
{
    from { opacity: 0;top: 18%;}
    to{ opacity: 1;top: 20%;}
}

.slide-item .comfirm-14-2 {
    width: 25%;
    height: auto;
    object-fit: fill;
    right: 20%;
    bottom: 38%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-14-2 {
    display: block;
    animation-name: item-14-2;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}
@keyframes item-14-2 {
    from { opacity: 0;bottom: 38%;}
    to{ opacity: 1;bottom: 40%;}
}

@-webkit-keyframes item-14-2 /*Safari and Chrome*/
{
    from { opacity: 0;bottom: 38%;}
    to{ opacity: 1;bottom: 40%;}
}
.slide-item .comfirm-14-3 {
    width: 15%;
    height: auto;
    object-fit: fill;
    right: 40%;
    bottom: -15%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-14-3 {
    display: block;
    animation-name: item-14-3;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}
@keyframes item-14-3 {
    from {opacity: 0;bottom: 5%;}
    to {opacity: 1;bottom: 7%;}
}

@-webkit-keyframes item-14-3 /*Safari and Chrome*/
{
    from {opacity: 0;bottom: 5%;}
    to {opacity: 1;bottom: 7%;}
}


.slide-item .comfirm-15-1 {
    width: 21%;
    height: auto;
    object-fit: fill;
    left: 1%;
    top: -15%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-15-1 {
    display: block;
    animation-name: item-15-1;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-15-1
{
    from {opacity: 0;top: 8%;}
    to {opacity: 1;top: 10%;}
}

@-webkit-keyframes item-15-1 /*Safari and Chrome*/
{
    from {opacity: 0;top: 8%;}
    to {opacity: 1;top: 10%;}
}
.slide-item .comfirm-15-2 {
    width: 15%;
    height: auto;
    object-fit: fill;
    left: 36%;
    top: -25%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-15-2 {
    display: block;
    animation-name: item-15-2;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-15-2
{
    from {opacity: 0;top: 13%;}
    to {opacity: 1;top: 15%;}
}

@-webkit-keyframes item-15-2 /*Safari and Chrome*/
{
    from {opacity: 0;top: 13%;}
    to {opacity: 1;top: 15%;}
}

.slide-item .comfirm-15-3 {
    width: 17%;
    height: auto;
    object-fit: fill;
    left: 16%;
    bottom: -25%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-15-3 {
    display: block;
    animation-name: item-15-3;
    animation-duration: 1s;
    animation-delay: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-15-3
{
    from {opacity: 0;bottom: 8%;}
    to {opacity: 1;bottom: 10%;}
}

@-webkit-keyframes item-15-3 /*Safari and Chrome*/
{
    from {opacity: 0;bottom: 8%;}
    to {opacity: 1;bottom: 10%;}
}

.slide-item .comfirm-16-1 {
    width: 22%;
    height: auto;
    object-fit: fill;
    left: 3%;
    bottom: -15%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-16-1 {
    display: block;
    animation-name: item-16-1;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-16-1
{
    from {opacity: 0;bottom: 47%;}
    to {opacity: 1;bottom: 45%;}
}

@-webkit-keyframes item-16-1 /*Safari and Chrome*/
{
    from {opacity: 0;bottom: 47%;}
    to {opacity: 1;bottom: 45%;}
}
.slide-item .comfirm-16-2 {
    width: 15%;
    height: auto;
    object-fit: fill;
    left: 36%;
    bottom: -25%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-16-2 {
    display: block;
    animation-name: item-16-2;
    animation-duration: 2s;
    animation-delay: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-16-2
{
    from {opacity: 0;bottom: 47%;}
    to {opacity: 1;bottom: 45%;}
}

@-webkit-keyframes item-16-2 /*Safari and Chrome*/
{
    from {opacity: 0;bottom: 47%;}
    to {opacity: 1;bottom: 45%;}
}

.slide-item .comfirm-16-3 {
    width: 10%;
    height: auto;
    object-fit: fill;
    right: 25%;
    bottom: -25%;
    position: absolute;
    display: none;
    opacity: 0;
}
.swiper-slide-active .item-16-3 {
    display: block;
    animation-name: item-16-3;
    animation-duration: 2s;
    animation-delay: 4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes item-16-3
{
    from { opacity: 0;bottom: 20%;}
    to { opacity: 1;bottom: 22%;}
}

@-webkit-keyframes item-16-3 /*Safari and Chrome*/
{
    from { opacity: 0;bottom: 20%;}
    to { opacity: 1;bottom: 22%;}
}