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: 17%;
    height: auto;
    object-fit: fill;
    left: 35%;
    top: 33%;
    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: 28%;}
    to { opacity: 1;top: 30%;}
}

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

.slide-item .comfirm-1-2 {
    width: 18%;
    height: auto;
    object-fit: fill;
    right: 5%;
    bottom: 6%;
    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;bottom: 6%;}
    to { opacity: 1;bottom: 8%;}
}

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

.slide-item .comfirm-2-1 {
    width: 15%;
    height: auto;
    object-fit: fill;
    left: 17%;
    top: 3%;
    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: 3%;}
    to { opacity: 1;top: 5%;}
}

@-webkit-keyframes item-2-1 /*Safari and Chrome*/
{
    from { opacity: 0;top: 3%;}
    to { opacity: 1;top: 5%;}
}
.slide-item .comfirm-2-2 {
    width: 25%;
    height: auto;
    object-fit: fill;
    left: 22%;
    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: 45%;}
    to { opacity: 1;top: 43%;}
}

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

.slide-item .comfirm-3-1 {
    width: 18%;
    height: auto;
    object-fit: fill;
    left: 33%;
    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: 36%;}
    to { opacity: 1;top: 38%;}
}

@-webkit-keyframes item-3-1 /*Safari and Chrome*/
{
    from { opacity: 0;top: 36%;}
    to { opacity: 1;top: 38%;}
}
.slide-item .comfirm-3-2 {
    width: 25.5%;
    height: auto;
    object-fit: fill;
    right: 13%;
    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: 42%;}
    to { opacity: 1;bottom: 40%;}
}

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

@-webkit-keyframes item-3-3 /*Safari and Chrome*/
{
    from { opacity: 0;bottom: 8%;}
    to { opacity: 1;bottom: 10%;}
}
.slide-item .comfirm-4-1 {
    width: 20%;
    height: auto;
    object-fit: fill;
    left: 25%;
    top: 38%;
    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: 38%;}
    to { opacity: 1;top: 40%;}
}

@-webkit-keyframes item-4-1 /*Safari and Chrome*/
{
    from { opacity: 0;top: 38%;}
    to { opacity: 1;top: 40%;}
}
.slide-item .comfirm-4-2 {
    width: 25%;
    height: auto;
    object-fit: fill;
    right: 32%;
    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: 58%;}
    to { opacity: 1;top: 60%;}
}

@-webkit-keyframes item-4-2 /*Safari and Chrome*/
{
    from { opacity: 0;top: 58%;}
    to { opacity: 1;top: 60%;}
}
.slide-item .comfirm-4-3 {
    width: 25%;
    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: 20%;
    height: auto;
    object-fit: fill;
    left: 35%;
    top: 23%;
    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: 23%;}
    to { opacity: 1;top: 25%;}
}

@-webkit-keyframes item-5-1 /*Safari and Chrome*/
{
    from { opacity: 0;top: 23%;}
    to { opacity: 1;top: 25%;}
}
.slide-item .comfirm-5-2 {
    width: 20%;
    height: auto;
    object-fit: fill;
    right: 35%;
    bottom: 13%;
    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;bottom: 17%;}
    to { opacity: 1;bottom: 15%;}
}

@-webkit-keyframes item-5-2 /*Safari and Chrome*/
{
    from { opacity: 0;bottom: 17%;}
    to { opacity: 1;bottom: 15%;}
}
.slide-item .comfirm-6-1 {
    width: 15%;
    height: auto;
    object-fit: fill;
    left: 15%;
    top: 28%;
    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: 28%;}
    to { opacity: 1;top: 30%;}
}

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

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

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

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

.slide-item .comfirm-7-1 {
    width: 17%;
    height: auto;
    object-fit: fill;
    left: 30%;
    top: 3%;
    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;top: 3%;}
    to { opacity: 1;top: 5%;}
}

@-webkit-keyframes item-7-1 /*Safari and Chrome*/
{
    from { opacity: 0;top: 3%;}
    to { opacity: 1;top: 5%;}
}
.slide-item .comfirm-7-2 {
    width: 13.5%;
    height: auto;
    object-fit: fill;
    left: 10%;
    bottom: 48%;
    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: 52%;}
    to { opacity: 1;bottom: 50%;}
}

@-webkit-keyframes item-7-2 /*Safari and Chrome*/
{
    from { opacity: 0;bottom: 52%;}
    to { opacity: 1;bottom: 50%;}
}
.slide-item .comfirm-7-3 {
    width: 22%;
    height: auto;
    object-fit: fill;
    left: 65%;
    top: 38%;
    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: 47%;}
    to { opacity: 1;top: 45%;}
}

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

@-webkit-keyframes item-7-4 /*Safari and Chrome*/
{
    from { opacity: 0;top: 68%;}
    to { opacity: 1;top: 66%;}
}
.slide-item .comfirm-8-1 {
    width: 17%;
    height: auto;
    object-fit: fill;
    left: 20%;
    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: 33%;}
    to { opacity: 1;top: 35%;}
}

@-webkit-keyframes item-8-1 /*Safari and Chrome*/
{
    from { opacity: 0;top: 33%;}
    to { opacity: 1;top: 35%;}
}
.slide-item .comfirm-8-2 {
    width: 23%;
    height: auto;
    object-fit: fill;
    bottom: 13%;
    right: 36%;
    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: 24%;}
    to { opacity: 1;bottom: 22%;}
}

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

@-webkit-keyframes item-8-3 /*Safari and Chrome*/
{
    from { opacity: 0;bottom: 3%;}
    to { opacity: 1;bottom: 6%;}
}
.slide-item .comfirm-9-1 {
    width: 15%;
    height: auto;
    object-fit: fill;
    left: 10%;
    top: 23%;
    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: 32%;}
    to { opacity: 1;top: 34%;}
}

@-webkit-keyframes item-9-1 /*Safari and Chrome*/
{
    from { opacity: 0;top: 32%;}
    to { opacity: 1;top: 34%;}
}
.slide-item .comfirm-9-2 {
    width: 23%;
    height: auto;
    object-fit: fill;
    left: 48%;
    bottom: 18%;
    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;bottom: 34%;}
    to { opacity: 1;bottom: 32%;}
}

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

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

@-webkit-keyframes item-9-4 /*Safari and Chrome*/
{
    from { opacity: 0;bottom: 8%;}
    to { opacity: 1;bottom: 10%;}
}
.slide-item .comfirm-10-3 {
    width: 30%;
    height: auto;
    object-fit: fill;
    left: 45%;
    bottom: 23%;
    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: 23%;}
    to { opacity: 1;bottom: 25%;}
}

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

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

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

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

.slide-item .comfirm-11-1 {
    width: 20%;
    height: auto;
    object-fit: fill;
    left: 17%;
    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: 8%;}
    to { opacity: 1;top: 10%;}
}

@-webkit-keyframes item-11-1 /*Safari and Chrome*/
{
    from { opacity: 0;top: 8%;}
    to { opacity: 1;top: 10%;}
}
.slide-item .comfirm-11-2 {
    width: 26%;
    height: auto;
    object-fit: fill;
    right: 14%;
    top: 18%;
    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;top: 18%;}
    to { opacity: 1;top: 20%;}
}

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

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

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

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

@-webkit-keyframes item-12-3 /*Safari and Chrome*/
{
    from { opacity: 0;bottom: 9%;}
    to { opacity: 1;bottom: 11%;}
}
.slide-item .comfirm-13-1 {
    width: 15%;
    height: auto;
    object-fit: fill;
    left: 30%;
    top: 3%;
    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: 3%;}
    to { opacity: 1;top: 5%;}
}

@-webkit-keyframes item-13-1 /*Safari and Chrome*/
{
    from { opacity: 0;top: 3%;}
    to { opacity: 1;top: 5%;}
}
.slide-item .comfirm-13-2 {
    width: 21%;
    height: auto;
    object-fit: fill;
    right: 10%;
    top: 8%;
    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;top: 13%;}
    to { opacity: 1;top: 15%;}
}

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

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

.slide-item .comfirm-13-4 {
    width: 40%;
    height: auto;
    object-fit: fill;
    left: 8%;
    bottom: 5%;
    position: absolute;
}

.slide-item .comfirm-14-1 {
    width: 17%;
    height: auto;
    object-fit: fill;
    left: 13%;
    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: 28%;}
    to { opacity: 1;top: 30%;}
}

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

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

@-webkit-keyframes item-14-2 /*Safari and Chrome*/
{
    from { opacity: 0;bottom: 42%;}
    to { opacity: 1;bottom: 40%;}
}

.slide-item .comfirm-14-3 {
    width: 23%;
    height: auto;
    object-fit: fill;
    right: 5%;
    bottom: 3%;
    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: 15%;
    height: auto;
    object-fit: fill;
    right: 20%;
    top: 8%;
    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: 12%;}
    to { opacity: 1;top: 14%;}
}

@-webkit-keyframes item-15-1 /*Safari and Chrome*/
{
    from { opacity: 0;top: 12%;}
    to { opacity: 1;top: 14%;}
}
.slide-item .comfirm-15-2 {
    width: 25%;
    height: auto;
    object-fit: fill;
    left: 20%;
    top: 53%;
    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: 47%;}
    to { opacity: 1;top: 45%;}
}

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