:root {
  --columns: 3;
  --yellow:#1a3e6e;
  --pink: #396ba6;
  --blue: #71a7d5;
  --green:#b3d4e5;
  --white:#e4eae8;
}
*{margin:0 auto;}
body{
  text-align:center;
}
.main{position: fixed;width: 100%;height: 100vh;pointer-events: none;z-index:-1}
.banner{width:100%;height:100vh;position:relative;overflow:hidden;perspective:500px;transform-style:preserve-3d;}
.banner .bg{min-width:2200px;height:1432px;z-index:-1;position:absolute;left:-22%;right:-22%;top:-22%;bottom:-22%;transform:rotateX(15deg);transform-origin:center;vertical-align:middle;border:1px solid red}
.banner .bg .bg1{height:120vh;background:url(../img/22.jpg) 50% no-repeat;background-size:100% 100%;animation:bg1 30s linear infinite;}
.banner .bg .bg2 {margin-top:-1vh;height:120vh;background:url(../img/22.jpg)50% no-repeat;background-size:100% 100%;animation:bg2 30s linear infinite;}
@keyframes bg1 {0% {transform: translateY(0)}to {transform: translateY(-100vh)}}
@keyframes bg2 {0% {transform: translateY(0)}to {transform: translateY(-100vh)}}
.banner:before{content:"";position:absolute;right:0;top:-2%;bottom:0;left:0;background-size:105% 105%;z-index:-1;}
.banner:after{content:"";position:absolute;right:4%;top:38%;bottom:0;width:1266px;height:337px;z-index:-1;}
.title1{height:250px;padding-top:30px;}
.footer{margin-top:-100px;}
@media (max-width:750px) {
	.title1{width:100vw;height:320px;padding-top:20px;}
	.title1 img{width:90%;}
	.footer{margin-top:10px;width:100vw;height:80px;}
	.footer img{width:90%;}
}
.wg-box{
  display:grid;
  grid-template-columns: repeat(var(--columns),1fr);
  margin: 20px 0;
}

.wg-box li{
  grid-column-end: span 2;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  margin-top: -50%;
}

.wg-box li:nth-child(2n){
  grid-column-start:2;
}

.wg-box li::before, .wg-box li::after {
  content:'';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-size: 50.1% 100%,50.1% 100%;
  background-position: left, right;
}

.wg-box li::before{
  z-index: -10;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background-repeat: no-repeat;
  background-image: linear-gradient(-45deg,var(--yellow) 53.5%,var(--green) 53.5%,var(--green) 60%,var(--yellow) 60%), linear-gradient(45deg,var(--yellow) 53.5%,var(--green) 53.5%,var(--green) 60%,var(--yellow) 60%);
}

.wg-box li::after{
  clip-path: polygon(100% 50%, 50% 100%, 0 50%, 20% 50%, 50% 80%,80% 50%);
  -webkit-clip-path: polygon(100% 50%, 50% 100%, 0 50%, 20% 50%, 50% 80%,80% 50%);
  background-repeat: no-repeat;
  background-image: linear-gradient(45deg,var(--yellow) 40%,var(--green) 40%), linear-gradient(-45deg,var(--yellow) 40%,var(--green) 40%);
}

.wg-box li:nth-child(2n)::before{
  background-image: linear-gradient(-45deg,var(--pink) 53.5%,var(--blue) 53.5%,var(--blue) 60%,var(--pink) 60%), linear-gradient(45deg,var(--pink) 53.5%,var(--blue) 53.5%,var(--blue) 60%,var(--pink) 60%);
}

.wg-box li:nth-child(2n)::after{
  background-image: linear-gradient(45deg,var(--pink) 40%,var(--blue) 40%), linear-gradient(-45deg,var(--pink) 40%,var(--blue) 40%);
}

.wg-box li:nth-child(5n)::before{
  background-image: linear-gradient(-45deg,var(--green) 53.5%,var(--pink) 53.5%,var(--pink) 60%,var(--green) 60%), linear-gradient(45deg,var(--green) 53.5%,var(--pink) 53.5%,var(--pink) 60%,var(--green) 60%);
}

.wg-box li:nth-child(5n)::after{
  background-image: linear-gradient(45deg,var(--green) 40%,var(--pink) 40%), linear-gradient(-45deg,var(--green) 40%,var(--pink) 40%);
}

.wg-box li:nth-child(7n)::before,.wg-box li:nth-child(7n-4)::before{
  background-image: linear-gradient(-45deg,var(--blue) 53.5%,var(--white) 53.5%,var(--white) 60%,var(--blue) 60%), linear-gradient(45deg,var(--blue) 53.5%,var(--white) 53.5%,var(--white) 60%,var(--blue) 60%);
}

.wg-box li:nth-child(7n)::after,.wg-box li:nth-child(7n-4)::after{
  background-image: linear-gradient(45deg,var(--blue) 40%,var(--white) 40%), linear-gradient(-45deg,var(--blue) 40%,var(--white) 40%);
}

.wg-box li:nth-child(9n)::before,.wg-box li:nth-child(9n-5)::before{
  background-image: linear-gradient(-45deg,var(--white) 53.5%,var(--green) 53.5%,var(--green) 60%,var(--white) 60%), linear-gradient(45deg,var(--white) 53.5%,var(--green) 53.5%,var(--green) 60%,var(--white) 60%);
}

.wg-box li:nth-child(9n)::after,.wg-box li:nth-child(9n-5)::after{
  background-image: linear-gradient(45deg,var(--white) 40%,var(--green) 40%), linear-gradient(-45deg,var(--white) 40%,var(--green) 40%);
}

.wg-box img{
  position: absolute;
  width: 43%;
  left: 50%;
  top: 40%;
  transform: translateX(-50%) translateY(-60%);
  box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.3);
  transition-property: transform;
  transition-duration: .3s;
}

.wg-box img:hover{
  transform: translateX(-40%) translateY(-70%) rotatez(25deg);
}
@media (min-width:450px){
  .wg-box{
    margin: 190px 40px;
  }
}
@media (min-width:600px){
  :root {
    --columns: 5;
  }
  .wg-box li:nth-child(2n){
    grid-column-start:auto;
  }
  .wg-box li:nth-child(4n-1){
    grid-column-start:2;
  }
}
@media (min-width:900px){
  :root {
    --columns: 7;
  }
  .wg-box li:nth-child(4n-1){
    grid-column-start:auto;
  }
  .wg-box li:nth-child(6n-2){
    grid-column-start:2;
  }
}
@media (min-width:1200px){
  :root {
    --columns: 9;
  }
  .wg-box li:nth-child(6n-2){
    grid-column-start:auto;
  }
  .wg-box li:nth-child(8n-3){
    grid-column-start:2;
  }
}
@media (min-width:1500px){
  :root {
    --columns: 11;
  }
  .wg-box li:nth-child(8n-3){
    grid-column-start:auto;
  }
  .wg-box li:nth-child(10n-4){
    grid-column-start:2;
  }
}
@media (min-width:1800px){
  :root {
    --columns: 13;
  }
  .wg-box li:nth-child(10n-4){
    grid-column-start:auto;
  }
  .wg-box li:nth-child(12n-5){
    grid-column-start:2;
  }
}
@media (min-width:2100px){
  :root {
    --columns: 15;
  }
  .wg-box li:nth-child(12n-5){
    grid-column-start:auto;
  }
  .wg-box li:nth-child(14n-6){
    grid-column-start:2;
  }
}