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;
}
.swiper-slide-active .item-1-1 {
    display: block;
    animation-name: item-1-1;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-delay: 1;
    animation-fill-mode: forwards;
}
@keyframes item-1-1
{
    from {right: -10%;}
    to {right:20%;}
}

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

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

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

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

@-webkit-keyframes item-4-1 /*Safari and Chrome*/
{
    from {top: -15%;}
    to {top: 25%;}
}
.slide-item .comfirm-5-1 {
    width: 15%;
    height: auto;
    object-fit: fill;
    right: -15%;
    top: 42%;
    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 {right: -15%;}
    to {right: 38%;}
}

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

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

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

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

@-webkit-keyframes item-6-1 /*Safari and Chrome*/
{
    from {bottom: -15%;}
    to {bottom: 15%;}
}
.slide-item .comfirm-6-2 {
    width: 15%;
    height: auto;
    object-fit: fill;
    right: 20%;
    bottom: -15%;
    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 {bottom: -15%;}
    to {bottom: 18%;}
}

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

@-webkit-keyframes item-7-1 /*Safari and Chrome*/
{
    from {bottom: -15%;}
    to {bottom: 18%;}
}
.slide-item .comfirm-8-1 {
    width: 18%;
    height: auto;
    object-fit: fill;
    left: 25%;
    bottom: -15%;
    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 {bottom: -15%;}
    to {bottom: 15%;}
}

@-webkit-keyframes item-8-1 /*Safari and Chrome*/
{
    from {bottom: -15%;}
    to {bottom: 15%;}
}
.slide-item .comfirm-8-2 {
    width: 18%;
    height: auto;
    object-fit: fill;
    right: 8%;
    bottom: -15%;
    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 {bottom: -15%;}
    to {bottom: 18%;}
}

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

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

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

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

.slide-item .comfirm-10-1 {
    width: 18%;
    height: auto;
    object-fit: fill;
    left: 25%;
    bottom: -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 {bottom: -15%;}
    to {bottom: 15%;}
}

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

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

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

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

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

.slide-item .comfirm-13-1 {
    width: 20%;
    height: auto;
    object-fit: fill;
    left: 15%;
    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: 5%;}
}

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

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


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

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

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

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

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

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

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

@-webkit-keyframes item-14-4 /*Safari and Chrome*/
{
    from {left: -20%;}
    to {left: 10%;}
}

.slide-item .comfirm-15-1 {
    width: 18%;
    height: auto;
    object-fit: fill;
    left: 30%;
    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: 35%;}
}

@-webkit-keyframes item-15-1 /*Safari and Chrome*/
{
    from {bottom: -15%;}
    to {bottom: 35%;}
}
.slide-item .comfirm-15-2 {
    width: 18%;
    height: auto;
    object-fit: fill;
    right: 15%;
    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: 15%;}
}

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