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: 10%;
    height: auto;
    object-fit: fill;
    right: -10%;
    top: 42%;
    position: absolute;
    display: none;
}

.slide-item .comfirm-2-1 {
    width: 25%;
    height: auto;
    object-fit: fill;
    left: -25%;
    top: 25%;
    position: absolute;
    display: none;
}
.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 {left: -25%;}
    to {left:10%;}
}

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

@-webkit-keyframes item-2-2 /*Safari and Chrome*/
{
    from {right: -15%;}
    to {right: 8%;}
}
.slide-item .comfirm-3-1 {
    width: 25%;
    height: auto;
    object-fit: fill;
    left: -25%;
    top: 25%;
    position: absolute;
    display: none;
}
.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 {left: -25%;}
    to {left: 10%;}
}

@-webkit-keyframes item-3-1 /*Safari and Chrome*/
{
    from {left: -25%;}
    to {left: 10%;}
}
.slide-item .comfirm-3-2 {
    width: 28%;
    height: auto;
    object-fit: fill;
    right: -25%;
    top: 30%;
    position: absolute;
    display: none;
}
.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 {right: -28%;}
    to {right: 10%;}
}

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

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

@-webkit-keyframes item-3-4 /*Safari and Chrome*/
{
    from {right: -15%;}
    to {right: 20%;}
}
.slide-item .comfirm-4-1 {
    width: 20%;
    height: auto;
    object-fit: fill;
    left: 15%;
    top: -15%;
    position: absolute;
    display: none;
}
.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 {top: -15%;}
    to {top: 30%;}
}

@-webkit-keyframes item-4-1 /*Safari and Chrome*/
{
    from {top: -15%;}
    to {top: 30%;}
}
.slide-item .comfirm-4-2 {
    width: 35%;
    height: auto;
    object-fit: fill;
    right: 25%;
    top: -25%;
    position: absolute;
    display: none;
}
.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 {top: -25%;}
    to {top: 70%;}
}

@-webkit-keyframes item-4-2 /*Safari and Chrome*/
{
    from {top: -25%;}
    to {top: 70%;}
}
.slide-item .comfirm-5-1 {
    width: 20%;
    height: auto;
    object-fit: fill;
    left: -20%;
    top: 35%;
    position: absolute;
    display: none;
}
.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 {left: -20%;}
    to {left: 10%;}
}

@-webkit-keyframes item-5-1 /*Safari and Chrome*/
{
    from {left: -20%;}
    to {left: 10%;}
}
.slide-item .comfirm-5-2 {
    width: 30%;
    height: auto;
    object-fit: fill;
    right: -30%;
    top: 70%;
    position: absolute;
    display: none;
}
.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 {right: -30%;}
    to {right: 25%;}
}

@-webkit-keyframes item-5-2 /*Safari and Chrome*/
{
    from {right: -30%;}
    to {right: 25%;}
}
.slide-item .comfirm-6-1 {
    width: 20%;
    height: auto;
    object-fit: fill;
    left: -20%;
    top: 25%;
    position: absolute;
    display: none;
}
.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 {left: -20%;}
    to {left: 15%;}
}

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

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

@-webkit-keyframes item-6-3 /*Safari and Chrome*/
{
    from {left: -20%;}
    to {left: 20%;}
}
.slide-item .comfirm-7-1 {
    width: 20%;
    height: auto;
    object-fit: fill;
    left: -20%;
    bottom: 35%;
    position: absolute;
    display: none;
}
.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 {left: -20%;}
    to {left: 8%;}
}

@-webkit-keyframes item-7-1 /*Safari and Chrome*/
{
    from {left: -20%;}
    to {left: 8%;}
}
.slide-item .comfirm-7-2 {
    width: 20%;
    height: auto;
    object-fit: fill;
    left: 30%;
    bottom: -20%;
    position: absolute;
    display: none;
}
.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 {bottom: -20%;}
    to {bottom: 10%;}
}

@-webkit-keyframes item-7-2 /*Safari and Chrome*/
{
    from {bottom: -20%;}
    to {bottom: 10%;}
}
.slide-item .comfirm-8-1 {
    width: 25%;
    height: auto;
    object-fit: fill;
    left: 20%;
    top: -20%;
    position: absolute;
    display: none;
}
.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 {top: -20%;}
    to {top: 5%;}
}

@-webkit-keyframes item-8-1 /*Safari and Chrome*/
{
    from {top: -20%;}
    to {top: 5%;}
}
.slide-item .comfirm-8-2 {
    width: 23%;
    height: auto;
    object-fit: fill;
    top: 35%;
    left: -25%;
    position: absolute;
    display: none;
}
.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 {left: -25%;}
    to {left: 20%;}
}

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

@-webkit-keyframes item-8-3 /*Safari and Chrome*/
{
    from {left: -20%;}
    to {left: 40%;}
}
.slide-item .comfirm-9-1 {
    width: 25%;
    height: auto;
    object-fit: fill;
    left: 15%;
    top: -10%;
    position: absolute;
    display: none;
}
.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 {top: -10%;}
    to {top: 35%;}
}

@-webkit-keyframes item-9-1 /*Safari and Chrome*/
{
    from {top: -10%;}
    to {top: 35%;}
}
.slide-item .comfirm-9-2 {
    width: 23%;
    height: auto;
    object-fit: fill;
    right: -25%;
    bottom: 38%;
    position: absolute;
    display: none;
}
.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 {right: -25%;}
    to {right: 15%;}
}

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

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

@-webkit-keyframes item-9-4 /*Safari and Chrome*/
{
    from {right: -26%;}
    to {right: 15%;}
}
.slide-item .comfirm-10-1 {
    width: 25%;
    height: auto;
    object-fit: fill;
    left: 25%;
    top: -15%;
    position: absolute;
    display: none;
}
.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 {top: -15%;}
    to {top: 15%;}
}

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

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

.slide-item .comfirm-11-1 {
    width: 25%;
    height: auto;
    object-fit: fill;
    left: 2%;
    bottom: -15%;
    position: absolute;
    display: none;
}
.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 {bottom: -15%;}
    to {bottom: 5%;}
}

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

@-webkit-keyframes item-11-2 /*Safari and Chrome*/
{
    from {bottom: -15%;}
    to {bottom: 7%;}
}
.slide-item .comfirm-12-1 {
    width: 30%;
    height: auto;
    object-fit: fill;
    left: 5%;
    top: -20%;
    position: absolute;
    display: none;
}
.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 {top: -20%;}
    to {top: 1%;}
}

@-webkit-keyframes item-12-1 /*Safari and Chrome*/
{
    from {top: -20%;}
    to {top: 1%;}
}
.slide-item .comfirm-12-2 {
    width: 18%;
    height: auto;
    object-fit: fill;
    left: 20%;
    bottom: -20%;
    position: absolute;
    display: none;
}
.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 {bottom: -20%;}
    to {bottom: 1%;}
}

@-webkit-keyframes item-12-2 /*Safari and Chrome*/
{
    from {bottom: -20%;}
    to {bottom: 1%;}
}

.slide-item .comfirm-13-1 {
    width: 40%;
    height: auto;
    object-fit: fill;
    right: 5%;
    top: -25%;
    position: absolute;
    display: none;
}
.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 {top: -25%;}
    to {top: 30%;}
}

@-webkit-keyframes item-13-1 /*Safari and Chrome*/
{
    from {top: -25%;}
    to {top: 30%;}
}
.slide-item .comfirm-13-2 {
    width: 20%;
    height: auto;
    object-fit: fill;
    left: -20%;
    bottom: 1%;
    position: absolute;
    display: none;
}
.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 {left: -20%;}
    to {left: 1%;}
}

@-webkit-keyframes item-13-2 /*Safari and Chrome*/
{
    from {left: -20%;}
    to {left: 1%;}
}


.slide-item .comfirm-14-1 {
    width: 25%;
    height: auto;
    object-fit: fill;
    left: -25%;
    top: 40%;
    position: absolute;
    display: none;
}
.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 {left: -25%;}
    to {left: 15%;}
}

@-webkit-keyframes item-14-1 /*Safari and Chrome*/
{
    from {left: -25%;}
    to {left: 15%;}
}

.slide-item .comfirm-14-2 {
    width: 25%;
    height: auto;
    object-fit: fill;
    right: 20%;
    bottom: -15%;
    position: absolute;
    display: none;
}
.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 {bottom: -15%;}
    to {bottom: 2%;}
}

@-webkit-keyframes item-14-2 /*Safari and Chrome*/
{
    from {bottom: -15%;}
    to {bottom: 2%;}
}


.slide-item .comfirm-15-1 {
    width: 18%;
    height: auto;
    object-fit: fill;
    left: 35%;
    bottom: -15%;
    position: absolute;
    display: none;
}
.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 {bottom: -15%;}
    to {bottom: 60%;}
}

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

@-webkit-keyframes item-15-2 /*Safari and Chrome*/
{
    from {bottom: -15%;}
    to {bottom: 25%;}
}