.animation-item {
    position: absolute;
    overflow: hidden;
    z-index: 2;
    transition-timing-function: linear
}

.animation-item .child {
    background-size: cover;
    display: block;
    position: absolute;
    z-index: 1;
    background-position: 50% 50%
}

.animation-item.start-change {
    -ms-transform: scale(0);
    transform: scale(0)
}

.animation-item.duration-4 {
    transition: .4s
}

.animation-item.duration-6 {
    transition: .6s
}

.animation-item.duration-8 {
    transition: .8s
}

.animation-item.duration-10 {
    transition: 1s
}

.animation-item.duration-12 {
    transition: 1.2s
}

.animation-item.duration-14 {
    transition: 1.4s
}

.animation-item.duration-16 {
    transition: 1.6s
}

.animation-item.duration-18 {
    transition: 1.8s
}

.animation-item.duration-20 {
    transition: 2s
}

.change-contain .animation-item {
    width: 11.11111%;
    height: 14.28571%
}

.change-contain .animation-item .child {
    width: 900%;
    height: 700%
}

.change-contain .item-1-1 {
    top: 0;
    left: 0
}

.change-contain .item-1-1 .child {
    top: 0;
    left: 0
}

.change-contain .item-1-2 {
    top: 0;
    left: 11.11111%
}

.change-contain .item-1-2 .child {
    top: 0;
    left: -100%
}

.change-contain .item-1-3 {
    top: 0;
    left: 22.22222%
}

.change-contain .item-1-3 .child {
    top: 0;
    left: -200%
}

.change-contain .item-1-4 {
    top: 0;
    left: 33.33333%
}

.change-contain .item-1-4 .child {
    top: 0;
    left: -300%
}

.change-contain .item-1-5 {
    top: 0;
    left: 44.44444%
}

.change-contain .item-1-5 .child {
    top: 0;
    left: -400%
}

.change-contain .item-1-6 {
    top: 0;
    left: 55.55556%
}

.change-contain .item-1-6 .child {
    top: 0;
    left: -500%
}

.change-contain .item-1-7 {
    top: 0;
    left: 66.66667%
}

.change-contain .item-1-7 .child {
    top: 0;
    left: -600%
}

.change-contain .item-1-8 {
    top: 0;
    left: 77.77778%
}

.change-contain .item-1-8 .child {
    top: 0;
    left: -700%
}

.change-contain .item-1-9 {
    top: 0;
    left: 88.88889%
}

.change-contain .item-1-9 .child {
    top: 0;
    left: -800%
}

.change-contain .item-2-1 {
    top: 14.28571%;
    left: 0
}

.change-contain .item-2-1 .child {
    top: -100%;
    left: 0
}

.change-contain .item-2-2 {
    top: 14.28571%;
    left: 11.11111%
}

.change-contain .item-2-2 .child {
    top: -100%;
    left: -100%
}

.change-contain .item-2-3 {
    top: 14.28571%;
    left: 22.22222%
}

.change-contain .item-2-3 .child {
    top: -100%;
    left: -200%
}

.change-contain .item-2-4 {
    top: 14.28571%;
    left: 33.33333%
}

.change-contain .item-2-4 .child {
    top: -100%;
    left: -300%
}

.change-contain .item-2-5 {
    top: 14.28571%;
    left: 44.44444%
}

.change-contain .item-2-5 .child {
    top: -100%;
    left: -400%
}

.change-contain .item-2-6 {
    top: 14.28571%;
    left: 55.55556%
}

.change-contain .item-2-6 .child {
    top: -100%;
    left: -500%
}

.change-contain .item-2-7 {
    top: 14.28571%;
    left: 66.66667%
}

.change-contain .item-2-7 .child {
    top: -100%;
    left: -600%
}

.change-contain .item-2-8 {
    top: 14.28571%;
    left: 77.77778%
}

.change-contain .item-2-8 .child {
    top: -100%;
    left: -700%
}

.change-contain .item-2-9 {
    top: 14.28571%;
    left: 88.88889%
}

.change-contain .item-2-9 .child {
    top: -100%;
    left: -800%
}

.change-contain .item-3-1 {
    top: 28.57143%;
    left: 0
}

.change-contain .item-3-1 .child {
    top: -200%;
    left: 0
}

.change-contain .item-3-2 {
    top: 28.57143%;
    left: 11.11111%
}

.change-contain .item-3-2 .child {
    top: -200%;
    left: -100%
}

.change-contain .item-3-3 {
    top: 28.57143%;
    left: 22.22222%
}

.change-contain .item-3-3 .child {
    top: -200%;
    left: -200%
}

.change-contain .item-3-4 {
    top: 28.57143%;
    left: 33.33333%
}

.change-contain .item-3-4 .child {
    top: -200%;
    left: -300%
}

.change-contain .item-3-5 {
    top: 28.57143%;
    left: 44.44444%
}

.change-contain .item-3-5 .child {
    top: -200%;
    left: -400%
}

.change-contain .item-3-6 {
    top: 28.57143%;
    left: 55.55556%
}

.change-contain .item-3-6 .child {
    top: -200%;
    left: -500%
}

.change-contain .item-3-7 {
    top: 28.57143%;
    left: 66.66667%
}

.change-contain .item-3-7 .child {
    top: -200%;
    left: -600%
}

.change-contain .item-3-8 {
    top: 28.57143%;
    left: 77.77778%
}

.change-contain .item-3-8 .child {
    top: -200%;
    left: -700%
}

.change-contain .item-3-9 {
    top: 28.57143%;
    left: 88.88889%
}

.change-contain .item-3-9 .child {
    top: -200%;
    left: -800%
}

.change-contain .item-4-1 {
    top: 42.85714%;
    left: 0
}

.change-contain .item-4-1 .child {
    top: -300%;
    left: 0
}

.change-contain .item-4-2 {
    top: 42.85714%;
    left: 11.11111%
}

.change-contain .item-4-2 .child {
    top: -300%;
    left: -100%
}

.change-contain .item-4-3 {
    top: 42.85714%;
    left: 22.22222%
}

.change-contain .item-4-3 .child {
    top: -300%;
    left: -200%
}

.change-contain .item-4-4 {
    top: 42.85714%;
    left: 33.33333%
}

.change-contain .item-4-4 .child {
    top: -300%;
    left: -300%
}

.change-contain .item-4-5 {
    top: 42.85714%;
    left: 44.44444%
}

.change-contain .item-4-5 .child {
    top: -300%;
    left: -400%
}

.change-contain .item-4-6 {
    top: 42.85714%;
    left: 55.55556%
}

.change-contain .item-4-6 .child {
    top: -300%;
    left: -500%
}

.change-contain .item-4-7 {
    top: 42.85714%;
    left: 66.66667%
}

.change-contain .item-4-7 .child {
    top: -300%;
    left: -600%
}

.change-contain .item-4-8 {
    top: 42.85714%;
    left: 77.77778%
}

.change-contain .item-4-8 .child {
    top: -300%;
    left: -700%
}

.change-contain .item-4-9 {
    top: 42.85714%;
    left: 88.88889%
}

.change-contain .item-4-9 .child {
    top: -300%;
    left: -800%
}

.change-contain .item-5-1 {
    top: 57.14286%;
    left: 0
}

.change-contain .item-5-1 .child {
    top: -400%;
    left: 0
}

.change-contain .item-5-2 {
    top: 57.14286%;
    left: 11.11111%
}

.change-contain .item-5-2 .child {
    top: -400%;
    left: -100%
}

.change-contain .item-5-3 {
    top: 57.14286%;
    left: 22.22222%
}

.change-contain .item-5-3 .child {
    top: -400%;
    left: -200%
}

.change-contain .item-5-4 {
    top: 57.14286%;
    left: 33.33333%
}

.change-contain .item-5-4 .child {
    top: -400%;
    left: -300%
}

.change-contain .item-5-5 {
    top: 57.14286%;
    left: 44.44444%
}

.change-contain .item-5-5 .child {
    top: -400%;
    left: -400%
}

.change-contain .item-5-6 {
    top: 57.14286%;
    left: 55.55556%
}

.change-contain .item-5-6 .child {
    top: -400%;
    left: -500%
}

.change-contain .item-5-7 {
    top: 57.14286%;
    left: 66.66667%
}

.change-contain .item-5-7 .child {
    top: -400%;
    left: -600%
}

.change-contain .item-5-8 {
    top: 57.14286%;
    left: 77.77778%
}

.change-contain .item-5-8 .child {
    top: -400%;
    left: -700%
}

.change-contain .item-5-9 {
    top: 57.14286%;
    left: 88.88889%
}

.change-contain .item-5-9 .child {
    top: -400%;
    left: -800%
}

.change-contain .item-6-1 {
    top: 71.42857%;
    left: 0
}

.change-contain .item-6-1 .child {
    top: -500%;
    left: 0
}

.change-contain .item-6-2 {
    top: 71.42857%;
    left: 11.11111%
}

.change-contain .item-6-2 .child {
    top: -500%;
    left: -100%
}

.change-contain .item-6-3 {
    top: 71.42857%;
    left: 22.22222%
}

.change-contain .item-6-3 .child {
    top: -500%;
    left: -200%
}

.change-contain .item-6-4 {
    top: 71.42857%;
    left: 33.33333%
}

.change-contain .item-6-4 .child {
    top: -500%;
    left: -300%
}

.change-contain .item-6-5 {
    top: 71.42857%;
    left: 44.44444%
}

.change-contain .item-6-5 .child {
    top: -500%;
    left: -400%
}

.change-contain .item-6-6 {
    top: 71.42857%;
    left: 55.55556%
}

.change-contain .item-6-6 .child {
    top: -500%;
    left: -500%
}

.change-contain .item-6-7 {
    top: 71.42857%;
    left: 66.66667%
}

.change-contain .item-6-7 .child {
    top: -500%;
    left: -600%
}

.change-contain .item-6-8 {
    top: 71.42857%;
    left: 77.77778%
}

.change-contain .item-6-8 .child {
    top: -500%;
    left: -700%
}

.change-contain .item-6-9 {
    top: 71.42857%;
    left: 88.88889%
}

.change-contain .item-6-9 .child {
    top: -500%;
    left: -800%
}

.change-contain .item-7-1 {
    top: 85.71429%;
    left: 0
}

.change-contain .item-7-1 .child {
    top: -600%;
    left: 0
}

.change-contain .item-7-2 {
    top: 85.71429%;
    left: 11.11111%
}

.change-contain .item-7-2 .child {
    top: -600%;
    left: -100%
}

.change-contain .item-7-3 {
    top: 85.71429%;
    left: 22.22222%
}

.change-contain .item-7-3 .child {
    top: -600%;
    left: -200%
}

.change-contain .item-7-4 {
    top: 85.71429%;
    left: 33.33333%
}

.change-contain .item-7-4 .child {
    top: -600%;
    left: -300%
}

.change-contain .item-7-5 {
    top: 85.71429%;
    left: 44.44444%
}

.change-contain .item-7-5 .child {
    top: -600%;
    left: -400%
}

.change-contain .item-7-6 {
    top: 85.71429%;
    left: 55.55556%
}

.change-contain .item-7-6 .child {
    top: -600%;
    left: -500%
}

.change-contain .item-7-7 {
    top: 85.71429%;
    left: 66.66667%
}

.change-contain .item-7-7 .child {
    top: -600%;
    left: -600%
}

.change-contain .item-7-8 {
    top: 85.71429%;
    left: 77.77778%
}

.change-contain .item-7-8 .child {
    top: -600%;
    left: -700%
}

.change-contain .item-7-9 {
    top: 85.71429%;
    left: 88.88889%
}

.change-contain .item-7-9 .child {
    top: -600%;
    left: -800%
}



html,
body {
    width: 100%;
    height: 100%;
}

[id |='bg-show-wrap'] {
    max-width: 100%;
    margin: 0 auto 20px auto;
    height: 610px;
    overflow: hidden;
    -webkit-clip-path: polygon(100% 0, 100% 80%, 0 100%, 0 0);
    clip-path: polygon(100% 0, 100% 80%, 0 100%, 0 0);
    background-color: #fa534b;
    position: relative;
    z-index: 1;
}


@media(max-width:1023px) {
    [id |='bg-show-wrap'] {

        height: 310px;
    }
}



@media(max-width:767px) {
    [id |='bg-show-wrap'] {

        height: 210px;
    }
}


@media(max-width:567px) {
    [id |='bg-show-wrap'] {

        height: 160px;
    }
}