@charset "utf-8";

.banner_box{ padding: 0px; position: relative; z-index: 3; }
.banner{ overflow: hidden; }
.banner .a{ display: block; position: relative; z-index: 1; overflow: hidden; }
.banner .imgBox{ overflow: hidden; width: 100%; transform: scale(1);}
.banner .imgBox .img{padding-bottom: 100vh;transition: 0s;transform: scale(1) !important;background: #000;}
.banner .imgBox .img img{ opacity: .85;}
.banner .txt{position: absolute;top: 0;right: 0;bottom: 0;left: 0;justify-content: center;align-items: center;display: flex;}
.banner h3{font-size: .4rem;color: #fff !important;opacity: 0;position: relative;z-index: 1;font-family: 'Alibaba PuHuiTi 3.0 Light';font-weight: normal; line-height: 1.25}
.banner h4{font-size: .4rem;color: #fff !important;opacity: 0;position: relative;z-index: 1;font-family: 'Alibaba PuHuiTi 3.0 Light';font-weight: normal; line-height: 1.25}
.banner h5{font-size: .4rem;color: #fff !important;opacity: 0;position: relative;z-index: 1;font-family: 'Alibaba PuHuiTi 3.0 Light';font-weight: normal; line-height: 1.25}
.banner .left{flex: 1;overflow: hidden;padding: .5rem 0;display: flex;flex-direction: column;align-items: flex-start;}
.banner .right{align-items: center;margin: 0 0 0 .2rem;}

.banner.on ul li.swiper-slide-active .a .imgBox1, .banner.on ul li.swiper-slide-duplicate-active .a .imgBox1, .banner.on ul li.swiper-slide-prev .a .imgBox1{ animation: sca 6s linear 0s normal both;}
@keyframes sca {
    0% {
        transform: scale(1.06);
    }
    100% {
        transform: scale(1);
    }
}

.banner .swiper-slide.swiper-slide-active h4{ animation: enter 1.2s forwards .2s;}
.banner .swiper-slide.swiper-slide-active h3{ animation: enter 1.2s forwards .3s;}
.banner .swiper-slide.swiper-slide-active h5{ animation: enter 1.2s forwards .4s;}
.banner .swiper-slide.swiper-slide-active .more1{ animation: enter 1.2s forwards .5s;}

@-webkit-keyframes enter {
    0% { opacity: 0; transform:translateY(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); }
    20% { opacity: 0; transform:translateY(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); }
    100% { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); }
}
@keyframes enter {
    0% { opacity: 0; transform:translateY(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); }
    20% { opacity: 0; transform:translateY(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); }
    100% { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); }
}

.banner .dotsw{ position: absolute; z-index: 1; bottom: .7rem;left: 0;right: 0;justify-content: center;align-items: center;}
.banner .dots{margin: 0;width: auto;font-size: .24rem;color: #fff;font-family: 'Alibaba PuHuiTi 3.0 Heavy';}
.banner .dots span{opacity: 1 !important;margin: 0;transition: all .5s;}
.banner .dots span.swiper-pagination-current{ font-size: .48rem}

.arrow1{flex-direction: column;margin: 0 0 0 .44rem;}
.arrow1 .arrow{width: .5rem;padding: .09rem 0;cursor: pointer;}
.arrow1 .arrow img{ width: 100%;}

.numBox{position: absolute;right: 0;bottom: 10vh;left: 0;z-index: 10;}
.numBox .wp{ justify-content: flex-end;}
.list1{ max-width: 100%;}
.list1 li{ margin: 0 0 0 5vw}
.list1 .h3{align-items: center;}
.list1 .h3 big{font-size: .72rem;color: #fff;font-family: 'Alibaba PuHuiTi 3.0 Heavy';line-height: 1;}
.list1 .h3 small{font-size: .24rem;color: #fff;font-family: 'Alibaba PuHuiTi 3.0 Light';margin: 0 0 0 .1rem;}
.list1 h6{font-size: .16rem;color: #fff;margin: .1rem 0 0;}

.pad1{ padding: 1.2rem 0; overflow: hidden;}

.tit1{ margin-bottom: .7rem}
.tit1 h4{ font-size: .24rem; color: #7e87d2; font-family: 'Alibaba PuHuiTi 3.0 Bold';}
.tit1 h3{font-size: .47rem;color: #282828;font-family: 'Alibaba PuHuiTi 3.0 Medium';font-weight: normal;align-items: flex-end;margin: .15rem 0 0;line-height: 1.25;}
.more1{font-size: .52rem;color: #e7e7e7;font-family: 'lib';margin: 0 0 0 3.5vw; transition: .5s;}

.home1{ background: url(../images/home1_b.png) center 1.1rem no-repeat; background-size: 100% auto;}
.arrow2{ width: 1.2rem; align-items: center;}
.arrow2 .arrow{width: .5rem;height: .5rem;border: #e7e7e7 1px solid;border-radius: 50vw;font-size: .26rem;color: #000;cursor: pointer;font-family: 'lib';align-items: center;justify-content: center;display: flex;transition: .5s}
.home1 .box1{ justify-content: flex-end;}
.home1 .con{width: 7.6rem;max-width: 100%;flex-direction: column;align-items: flex-end;margin: -1.3rem 0 0;}
.home1 .arc-con{text-align: right;margin: .4rem 0 0;}
.list9Box{ width: 100%}

.list2{ margin: .8rem 0 0;}
.list2 li{ width: 18.79%;}
.list2 li:nth-child(4){margin-top: .3rem;}
.list2 li:nth-child(5){margin-top: .8rem;}
.list2 .a{ position: relative; display: block; border-radius: .1rem; overflow: hidden;}
.list2 li:nth-child(2), .list2 li:nth-child(3){ width: 19.14%;}
.list2 .imgBox .img{ padding-bottom: 101.03%;}
.list2 li:nth-child(2) .imgBox .img, .list2 li:nth-child(3) .imgBox .img{ padding-bottom: 117.01%;}
.list2 .txt{position: absolute;right: 0;bottom: 0;left: 0;height: .77rem;align-items: center;z-index: 1;background: rgba(182,184,197,.6); text-align: center; padding: 0 .15rem; transition: .5s;}
.list2 h4{ font-size: .22rem; color: #fff !important}

.list2 li:nth-child(2) .a{ transform: translateY(.66rem);}
.list2 li.on .a .txt{ background: #a4aadb;}

.list3{ margin: 0 -4px}
.list3 li{flex: 1;padding: 0 4px; transition: .5s;}
.list3 .a{ display: block; position: relative; border-radius: .2rem; overflow: hidden}
.list3 .imgBox .img{ padding-bottom: 5.74rem;}
.list3 .imgBox .img img{transform: scale(1) !important;filter: grayscale(80%);}
.list3 .imgBox:after{content: "";position: absolute;right: 0;bottom: 0;left: 0;background: linear-gradient(0deg, rgba(0, 0, 0, .9) 0%, transparent 100%);height: 2rem;transition: .5s;}
.list3 .txt{ position: absolute; right: 0; bottom: .4rem; left: 0; padding: 0 .15rem; text-align: center; transition: .5s;}
.list3 .txt h4{font-size: .22rem;color: #fff !important;line-height: 1.5;}
.list3 .txt1{ position: absolute; right: 0; bottom: .4rem; left: 0; padding: 0 .5rem; text-align: left; transform: translateY(101%); opacity: 0; transition: .5s;}
.list3 .txt1 h4{ font-size: .3rem; color: #fff !important}
.list3 .txt1 i{display: flex;justify-content: center;align-items: center;width: .43rem;height: .43rem;background: #fff;border-radius: 50vw;font-size: .2rem;color: #a4aadb;font-family: 'lib';margin: .22rem 0 0;}



.home3Box{position: relative;z-index: 1;display: flex;align-items: flex-start; margin: .6rem 0;}
/* .home3Box:before{ content: ""; display: block; width: .1px; height: 300vh; } */
.home3{/*position: sticky;top: 0;overflow: hidden;left: 0;right: 0;*/width: 100%;background: url(../images/home3_b.png) left top no-repeat;background-size: 100% auto;position: sticky;top: 0;}
.home3 .wp{ align-items: flex-start;}
.home3 .left{position: sticky;position: -webkit-sticky;top: 0;width: 6.4rem;height: 100vh;align-items: center;flex-direction: column;justify-content: center;}
.home3 .left .tit1{ width: 100%;}
.home3 .left .arc-con{ width: 100%;}
.home3 .right{width: calc(100% - 6.4rem - 1.5rem);position: relative;z-index: 1;padding: 0 1.5rem 0 0;}
.home3 .right::before{content: "";position: absolute;top: .5rem;right: calc((100vw - 16rem)/2*-1);bottom: .5rem;left: 59%;background: #a4aadb;z-index: -1;border-radius: .1rem 0 0 .1rem;}
.list4Box{height: 100vh;}
.list4 li{ height: 100%; display: flex; align-items: center;}
.list4 .imgBox{ border-radius: .1rem;min-width: 6.6rem;}
.list4 .txt{ padding: .26rem 0; border-bottom: #e0e0e0 1px solid}
.list4 h4{font-size: .32rem;font-family: 'Alibaba PuHuiTi 3.0 Medium';margin: 0 0 .26rem;color: #0a0a0a !important;}

.arrow3{flex-direction: column;position: absolute;right: 0;top: 50%;transform: translateY(-50%);margin-top: -.8rem;}
.arrow3 .arrow{width: .5rem;height: .5rem;transform: rotate(90deg);background: rgba(255,255,255,.3);border-radius: 50vw;font-size: .26rem;color: #fff;cursor: pointer;font-family: 'lib';align-items: center;justify-content: center;display: flex;transition: .5s;margin: .1rem 0;}

.home4{ padding-bottom: .5rem;}
.home4 .wps1{ justify-content: flex-end;}
.home4 .tit1{text-align: right;position: relative;z-index: 2;margin-bottom: -.9rem;}
.home4 .tit1 h3 .more1{order: -1;margin: 0 3.5vw 0 0;}

.home4 .left{width: 7.24rem;position: relative;z-index: 3;}
.home4 .center{width: 16.5625vw;height: 6.34rem;background: #a4aadb;border-radius: 0 .1rem .1rem 0;position: relative;z-index: 2;}
.home4 .right{width: calc(100% - 7.24rem - 16.5625vw);padding: 0 0 0 6.25vw;}

.home4 .wps2{ align-items: flex-end;}

.list5Box{margin: 0 0 0 calc((100vw - 16rem)/2*-1);/* height: 8.16rem; */}
.list5 .a{display: block;position: relative;z-index: 1;overflow: hidden;border-radius: 0 .1rem 0 0;height: 100%;}
.list5 .imgBox .img{ padding-bottom: 92.30%;}
.list5Box a .txt{ position: absolute; bottom: .56rem; right: .68rem; width: 1.82rem; height: 1.82rem; background: #fff; border-radius: 50vw; z-index: 1; flex-direction: column; align-items: center; justify-content: center;}
.list5Box h6{font-size: .14rem;color: #2c2d2e;font-family: 'Alibaba PuHuiTi 3.0 Medium';text-transform: uppercase;}
.list5Box .bottom{align-items: center;width: 1.16rem;margin: .15rem 0 0;}
.list5Box .bottom i{font-size: .36rem;color: #2c2d2e;font-family: 'lib';transition: .5s;}
.shichang{font-size: .18rem;color: #444547;font-family: 'Alibaba PuHuiTi 3.0 Medium';text-transform: uppercase;}

.main-visual-slider .slide-inner {width: 100%;height: 100%;position: relative;left: 0;top: 0;z-index: 1;background-size: cover;background-position: center;display: flex;justify-content: center;align-items: center;text-align: left;}
.main-visual-slider .swiper-slide .visual-img{position: relative;top:0px;left:0px;bottom:0px;right:0px;height: 100%;width:100%;}

.list6 li{ height: 6.34rem; display: flex; align-items: center;}
.list6 .a{ display: block; width: 100%;}
.list6 h4{font-size: .36rem;color: #000000;font-family: 'Alibaba PuHuiTi 3.0 Medium';transition: .5s;margin-bottom: .36rem; }

/* .list6 .swiper-slide.swiper-slide-active h4{ animation: enter1 1.2s forwards .2s;}
.list6 .swiper-slide.swiper-slide-active .arc-con{ animation: enter1 1.2s forwards .3s;}

@-webkit-keyframes enter1 {
    0% { opacity: 0; transform:translateY(50px); -webkit-transform:translateY(50px); -moz-transform:translateY(50px); -ms-transform:translateY(50px); -o-transform:translateY(50px); }
    20% { opacity: 0; transform:translateY(50px); -webkit-transform:translateY(50px); -moz-transform:translateY(50px); -ms-transform:translateY(50px); -o-transform:translateY(50px); }
    100% { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); }
}
@keyframes enter1 {
    0% { opacity: 0; transform:translateY(50px); -webkit-transform:translateY(50px); -moz-transform:translateY(50px); -ms-transform:translateY(50px); -o-transform:translateY(50px); }
    20% { opacity: 0; transform:translateY(50px); -webkit-transform:translateY(50px); -moz-transform:translateY(50px); -ms-transform:translateY(50px); -o-transform:translateY(50px); }
    100% { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); }
} */


.kongzhi1{position: absolute;z-index: 1;width: 24.84375vw;height: 24.84375vw;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.slider-nav__outline{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;}
.slider-nav__outline rect {fill: none;width: calc(100% - 2px);height: calc(100% - 2px);transform-origin: 50% 50%;stroke: #fff;opacity: .3;stroke-width: 1.25;stroke-dasharray: 1,1;stroke-dashoffset: 2;rx: 50vw;ry: 50vw;}

.slider-nav__outline rect+rect{stroke-dashoffset: 1;opacity: 1;stroke: rgba(0,0,0,.5);transition: .5s; transform: rotateY(180deg);}
.slider-nav__outline rect+rect.ani{-webkit-animation-name: anil;animation-name: anil;-webkit-animation-duration: 9.5s;animation-duration: 9.5s;-webkit-animation-timing-function: linear;animation-timing-function: linear;} 

.kongzhi1 .dots{position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;justify-content: center;align-items: center;display: flex;flex-direction: column;font-size: 0;}
.kongzhi1 .dots span{ font-size: .16rem; color: #fff}
.kongzhi1 .dots span.swiper-pagination-current{font-size: 1.2rem;color: #fff;font-family: 'Alibaba PuHuiTi 3.0 Light';}
.kongzhi1 .dots span.swiper-pagination-total{ position: absolute; top: 78%; left: 50%; transform: translateX(-50%); padding: 0 0 0 .1rem}
.kongzhi1 .dots span.swiper-pagination-total:before{ content: ""; position: absolute; width: 1px; height: .12rem; background: #fff; transform: rotate(20deg); left: 0; top: 50%; margin: -.05rem 0 0; }

@-webkit-keyframes anil{
    0%{ stroke-dashoffset: 1}
    100%{ stroke-dashoffset: 2.6}
}
@keyframes anil{
    0%{ stroke-dashoffset: 1}
    100%{ stroke-dashoffset: 2.6}
}

.arrow4{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);cursor: pointer;}
.arrow4 svg{width: .7rem;height: .7rem;fill: #0a0a0d; transition: .5s;}
.arrow4:hover svg{ fill: #7e87d2;}


.home5{ background: url(../images/home5_b.png) center bottom no-repeat; background-size: 100% auto; padding-bottom: 1.48rem;}

.list7 .a{ width: 2.74rem; display: block; border: #e2e3eb 1px solid; border-right: none; transition: .5s;}
.list7 .imgBox .img{ background: none; padding-bottom: 71.53%;}
.list7 .imgBox .img img{top: 50%; left: 50%; object-fit: contain; max-width: 2rem;max-height: .6rem;transform: translateY(-50%) translateX(-50%);}
.slideBox2{margin-top: -1px;}

#app{ position: relative; z-index: 1;}
.background{position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: -1;overflow: hidden;}
.background .circle{position: absolute;background: black;width: 40vw;height: 40vw;margin: 1vw;border-radius: 50%;transform-origin: center;-webkit-animation-name: beat;animation-name: beat;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-duration: 10s;animation-duration: 10s;-webkit-animation-timing-function: linear;animation-timing-function: linear;-webkit-filter: blur(80px);filter: blur(80px);background: rgba(164,170,219,.3);}
.background .c1{left: -20vw;top: 47vh;}
.background .c2{right: -20vw;top: 13%;}
.background .c3{left: -20vw;top: 41%;}
.background .c4{right: -20vw;top: 73%;}
.background .c5{left: -20vw;top: 77%;}

@-webkit-keyframes beat{
    0%{
        -webkit-transform: scale(1) translateX(0px) translateY(0);
                transform: scale(1) translateX(0px) translateY(0);
    }
    50%{
        -webkit-transform: scale(1.9) translateX(60px) translateY(90px);
                transform: scale(1.9) translateX(60px) translateY(90px);
    }
    100%{
        -webkit-transform: scale(1) translateX(0px) translateY(0);
                transform: scale(1) translateX(0px) translateY(0);
    }
}

@keyframes beat{
    0%{
        -webkit-transform: scale(1) translateX(0px) translateY(0);
                transform: scale(1) translateX(0px) translateY(0);
    }
    50%{
        -webkit-transform: scale(1.9) translateX(60px) translateY(90px);
                transform: scale(1.9) translateX(60px) translateY(90px);
    }
    100%{
        -webkit-transform: scale(1) translateX(0px) translateY(0);
                transform: scale(1) translateX(0px) translateY(0);
    }
}


@media(min-width: 1024px){
    .more1:hover{ color: #7e87d2;}

    .arrow2 .arrow:hover{ background: #7e87d2; color: #fff; border: #7e87d2 1px solid}

    

    .list7 .a:hover{ background: rgba(173,180,240,.2);}

    .list5Box .a:hover .bottom i{ color: #7e87d2; }
}
@media(max-width: 1024px){
    .banner .imgBox .img{padding-bottom: 70%;}
}
@media(min-width: 769px){
    .list3 li.on{flex: 3.4;}
    .list3 li.on .txt1{ transform: translateY(0); opacity: 1;}
    .list3 li.on .txt{ transform: translateY(101%); opacity: 0;}
    .list3 li.on .imgBox:after{ background: linear-gradient(0deg, #a4aadb 0%, transparent 100%);}
    .list3 li.on .imgBox .img img{ filter: grayscale(0)}
} 
@media(max-width: 769px){
    .banner .left{width: 100%;flex: auto;}
    .banner .right{/* width: 100%; */position: absolute;bottom: .1rem;right: 15px;}
    .banner h4{font-size: .16rem;}
    .banner h3{font-size: .16rem;}
    .banner h5{margin: 0;}
    .banner h5{font-size: .16rem;line-height: 1.5;}

    .scroll_d{ bottom: .15rem;}

    .more1{font-size: .24rem;}

    .banner .dots{ font-size: .14rem;}
    .banner .dots span.swiper-pagination-current{ font-size: .2rem;}
    .arrow1 .arrow{width: .24rem;padding: .05rem 0;}
    .arrow1{ margin: 0 0 0 .25rem;}
    .banner h4::before{width: .6rem;height: .06rem;bottom: .04rem;}
    .banner h3::before{width: .6rem;height: .06rem;bottom: .04rem;left: 70%;}

    .list1 li{width: 30%;margin: 0 2% 0 0;}
    .list1 .h3 big{font-size: .26rem;}
    .list1 .h3 small{font-size: .14rem;margin: 0 0 0 .04rem;}
    .list1 h6{font-size: .14rem;margin: .04rem 0 0;}

    .numBox{bottom: .15rem;}

    .pad1{ padding: .5rem 0;}
    .tit1{ margin-bottom: .3rem}
    .tit1 h4{ font-size: .18rem;}
    .tit1 h3{font-size: .24rem;margin: .1rem 0 0;}

    .home1 .con{margin: 0;align-items: flex-start;}

    .arrow2{ width: 1rem}
    .arrow2 .arrow{ width: .44rem; height: .44rem; font-size: .2rem}
    .home1 .arc-con{margin: .25rem 0 0;text-align: left;}

    .list2{margin: .4rem 0 0;padding: 0;}

    .list2 li{width: calc(50% - 4px);margin-bottom: .1rem;}
    .list2 li:nth-child(2), .list2 li:nth-child(3){width: calc(50% - 4px);}
    .list2 li:nth-child(2) .a{ transform: translateY(0);}
    .list2 .imgBox .img{padding-bottom: 100% !important;}

    .list2 .txt{ height: .5rem}

    .home1{ padding-bottom: 0}
    .list3{overflow: hidden;overflow-x: scroll;display: block;font-size: 0;white-space: nowrap;}
    .list3 li{width: 50% !important;flex: auto;margin-bottom: .1rem;display: inline-block;}
    .list3 li.on{ flex: auto;}
    .list3 .imgBox .img{padding-bottom: 147%;}
    .list3 .txt{ bottom: .15rem}
    .list3 .imgBox:after{ height: 30%}

    .home3Box{margin: 0;}
    .home3{position: relative;padding: .5rem 0 0;}
    .home3 .left{position: relative;height: auto; width: 100%}
    .home3 .right{width: 100%;padding: .4rem 0 0;}

    .list4Box{ height: auto;}
    .list4 .txt{ border: none}
    .arrow3{position: relative;top: auto;transform: none;margin: .1rem auto 0;flex-direction: row;justify-content: space-between;width: 1rem;}
    .arrow3 .arrow{border: #e7e7e7 1px solid;color: #000;margin: 0;width: .44rem;height: .44rem;font-size: .2rem;}

    .home4 .left{ width: 100%;}
    .list5Box{margin: 0;height: auto;width: 100%;}
    .main-visual-slider .slide-inner{ position: relative;}
    .main-visual-slider .swiper-slide .visual-img{ position: relative;}

    .home4 .center{width: 100%;height: 36vw;border-radius: 0 0 0.1rem 0;order: 1;display: none;}
    .home4 .right{width: 100%;padding: .3rem 0 0;}
    .list6 li{ height: auto}

    .list5Box .txt{width: 1.4rem;height: 1.4rem;right: .2rem;bottom: .2rem;}
    .list5Box .bottom{width: .8rem;margin: .1rem 0 0;}
    .list5Box h6{ font-size: .12rem;}
    .list5Box .bottom i{ font-size: .24rem;}
    .shichang{ font-size: .15rem}

    .kongzhi1{ width: 50vw; height: 50vw}
    .kongzhi1 .dots span.swiper-pagination-current{ font-size: .4rem;}
    .kongzhi1 .dots span.swiper-pagination-total{ top: 70%;}
    .arrow4 svg{ width: .5rem; height: .5rem}
    .list6 h4{margin-bottom: .25rem;font-size: .24rem;}

    @-webkit-keyframes anil{
        0%{ stroke-dashoffset: 1}
        100%{ stroke-dashoffset: 2.6}
    }
    @keyframes anil{
        0%{ stroke-dashoffset: 1}
        100%{ stroke-dashoffset: 2.6}
    }

    .home4{ padding-bottom: 0;}
    .list7 .a{width: 1.3rem;}
    .slideBox2{ margin: .1rem 0 0;}

    .list3 .imgBox .img img{ filter: grayscale(0);}

    .background .circle{background: rgba(164, 170, 219, 1);width: 30vw;height: 30vw;}
    .background .circle:nth-child(2n-1){left: -15vw;}
    .background .circle:nth-child(2n){right: -15vw;}
} 
@media(max-width: 560px){
}