html.is-loading{
    overflow: hidden;
}



.play{
    position: absolute;
    cursor: pointer;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(0deg);
    background-image: url(../images/triangle_solid_867452.svg);
    background-size: 43%;
    background-position: 59% 49%;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-color: #ffffff66;
    width: 5vw;
    height: 5vw;
    border: 1px #867452 solid;
    opacity: 0.5;
    transition: all 0.2s ease;
}
.play:hover{ 
    background-image: url(../images/triangle_solid_white.svg); 
    background-color: #ac9960; 
    opacity: 1;
}

.play{
    background-image: url(../images/triangle_solid_657ce8.svg);
    border: 0 none;opacity: 1;    background-color: #fff;
    box-shadow: 0 0 14px 0px white;
} 
.play:hover{ 
    background-image: url(../images/triangle_solid_white.svg); 
    background-color: #657ce8; 
    opacity: 1;
    box-shadow: 0 0 14px 0px #657ce8;
}






body.is-loading{
    overflow: hidden;
}
img{
    width: 100%;
}

.loading{
    position: absolute;top: 4.166666vw;
    width: 100%;height: calc(100vh - 4.166666vw);overflow: hidden;    z-index: 1000;
/*    display: none;*/
}
.loading .loading-img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: auto;
}
.loading .loading-img .loading-1{

}
.loading .motion{
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 2vw;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%; 
    z-index: 20;
}
.loading .motion.motion-1{
    width: 36.3vw;
    height: 19.4vw;
    left: 31.4vw;
    top: 13.8vw;
}
.loading .motion.motion-2{
    height: 30.2vw;
    width: 16.3vw;
    left: 46.5vw;
    top: 8vw;
}
.loading .motion.motion-3{
    height: 29.6vw;
    width: 6.9vw;
    border-radius: 2vw;
    left: 37.7vw;
    top: 11.2vw;
}
.loading .motion.motion-4{
    height: 18vw;
    width: 29.8vw;
    left: 32.9vw;
    top: 20.1vw;
}
.loading .motion.motion-5{
    height: 26.8vw;
    width: 22.1vw;
    left: 36.8vw;
    top: 16vw;
}
.loading .motion.motion-6{
    height: 11.8vw;
    width: 7.7vw;
    left: 53vw;
    top: 33vw;
}
.loading .motion.motion-7{
    height: 15.1vw;
    width: 8.1vw;
    left: 8.4vw;
    top: -2vw;
}
.loading .motion.motion-8{
    height: 26.6vw;
    width: 20.6vw;
    left: -2.4vw;
    top: 3vw;
}
.loading .motion.motion-9{
    height: 20.7vw;
    width: 12.1vw;
    left: -2.4vw;
    top: 25.3vw;
}
.loading .motion.motion-10{
    height: 6.4vw;
    width: 12.2vw;
    left: 2.6vw;
    top: 42.3vw;
} 
.loading .motion.motion-11{
    height: 26.9vw;
    width: 21.2vw;
    left: 73.2vw;
    top: -2.5vw;
}
.loading .motion.motion-12{
    height: 23.9vw;
    width: 19.2vw;
    left: 82.9vw;
    top: 17.7vw;
}
.loading .motion.motion-13{
    height: 8vw;
    width: 19.2vw;
    left: 86.6vw;
    top: 37.1vw;
}
.loading .motion.motion-14{
    height: 12vw;
    width: 13.6vw;
    left: 68.1vw;
    top: 42.6vw;
}
.loading .motion.blue-motion{
    background-color: rgba(216,224,239,1);
    z-index: 10;
/*    background-color: rgba(0,224,239,0.4);*/
/*    border: 1px solid blue; */
}
.loading .motion.blue-motion.blue-motion-1{ 
    height: 8vw;
    width: 7.8vw;
    left: -0.4vw;
    top: -6.4vw;
}
.loading .motion.blue-motion.blue-motion-2{ 
    height: 27vw;
    width: 26.2vw;
    left: 5.1vw;
    top: -2.4vw;
}
.loading .motion.blue-motion.blue-motion-3{ 
    height: 27vw;
    width: 26.2vw;
    left: 12vw;
    top: -11.2vw;
}
.loading .motion.blue-motion.blue-motion-4{ 
    height: 17.6vw;
    width: 19.2vw;
    left: 36.7vw;
    top: -11.2vw;
}
.loading .motion.blue-motion.blue-motion-5{ 
    height: 31.3vw;
    width: 26vw;
    left: 50vw;
    top: -11.2vw;
}
.loading .motion.blue-motion.blue-motion-6{ 
    height: 19.1vw;
    width: 20vw;
    left: 61.5vw;
    top: -11.2vw;
}
.loading .motion.blue-motion.blue-motion-7{ 
    height: 19.6vw;
    width: 21.1vw;
    left: 66.7vw;
    top: -11.2vw;
}
.loading .motion.blue-motion.blue-motion-8{ 
    height: 13.4vw;
    width: 16.1vw;
    left: 66.7vw;
    top: -11.2vw;
}
.loading .motion.blue-motion.blue-motion-9{ 
    height: 25.8vw;
    width: 16.1vw;
    left: 85.7vw;
    top: -11.2vw;
}
.loading .motion.blue-motion.blue-motion-10{ 
    height: 26.5vw;
    width: 16.1vw;
    left: -8vw;
    top: 5vw;
}
.loading .motion.blue-motion.blue-motion-11{ 
    height: 15.9vw;
    width: 16.1vw;
    left: -3vw;
    top: 13vw;
}
.loading .motion.blue-motion.blue-motion-12{ 
    height: 15.9vw;
    width: 16vw;
    left: 23.5vw;
    top: 19.7vw;
}
.loading .motion.blue-motion.blue-motion-13{    
    height: 15.9vw;
    width: 16vw;
    left: 62.7vw;
    top: 18.7vw; 
}
.loading .motion.blue-motion.blue-motion-14{ 
    height: 15.9vw;
    width: 16vw;
    left: 76.1vw;
    top: 10.4vw;
}
.loading .motion.blue-motion.blue-motion-15{ 
    height: 15.9vw;
    width: 16vw;
    left: 86.3vw;
    top: 19.7vw;
}
.loading .motion.blue-motion.blue-motion-16{ 
    height: 20.5vw;
    width: 16vw;
    left: -10.7vw;
    top: 20.3vw;
}
.loading .motion.blue-motion.blue-motion-17{ 
    height: 9vw;
    width: 9vw;
    left: 2.4vw;
    top: 28.1vw;
}
.loading .motion.blue-motion.blue-motion-18{ 
    height: 8.8vw;
    width: 8.8vw;
    left: 18.4vw;
    top: 32.1vw;
}
.loading .motion.blue-motion.blue-motion-19{ 
    height: 23.8vw;
    width: 8.8vw;
    left: 96.6vw;
    top: 7.7vw;
}
.loading .motion.blue-motion.blue-motion-20{ 
    height: 6.1vw;
    width: 10.4vw;
    left: -3vw;
    top: 42.4vw;
}
.loading .motion.blue-motion.blue-motion-21{ 
    height: 16vw;
    width: 16vw;
    left: 6.8vw;
    top: 36.1vw;
}
.loading .motion.blue-motion.blue-motion-22{ 
    height: 16vw;
    width: 16vw;
    left: 25.2vw;
    top: 45.6vw;
}
.loading .motion.blue-motion.blue-motion-23{ 
    height: 26vw;
    width: 26vw;
    left: 36.8vw;
    top: 31vw;
}
.loading .motion.blue-motion.blue-motion-24{ 
    height: 16vw;
    width: 26vw;
    left: 45.6vw;
    top: 32.1vw;
}
.loading .motion.blue-motion.blue-motion-25{  
    height: 18vw;
    width: 26vw;
    left: 70.4vw;
    top: 50.7vw;
}
.loading .motion.blue-motion.blue-motion-26{ 
    height: 18vw;
    width: 13.2vw;
    left: 71.9vw;
    top: 48.1vw;
}
.loading .motion.blue-motion.blue-motion-27{ 
    height: 12vw;
    width: 13.2vw;
    left: 74.9vw;
    top: 39.1vw;
}
.loading .motion.blue-motion.blue-motion-28{ 
    height: 8.7vw;
    width: 13.2vw;
    left: 81.1vw;
    top: 31.7vw;
}
.loading .motion.blue-motion.blue-motion-29{ 
    height: 26vw;
    width: 26vw;
    left: 82.8vw;
    top: 26.9vw;
}
.loading .motion.blue-motion.blue-motion-30{ 
    height: 7.9vw;
    width: 26vw;
    left: 96.6vw;
    top: 37.6vw;
} 
.loading .motion.blue-motion.blue-motion-31{ 
    height: 7.9vw;
    width: 13vw;
    left: -5vw;
    top: -0.4vw;
}
.loading .motion.blue-motion.blue-motion-32{ 
    height: 10.9vw;
    width: 17vw;
    left: 35vw;
    top: 5.6vw;
}
.loading .motion.blue-motion.blue-motion-33{ 
    height: 23.9vw;
    width: 36vw;
    left: 30vw;
    top: 11.6vw;
}
.loading .motion.blue-motion.blue-motion-34{ 
    height: 23.9vw;
    width: 36vw;
    left: 65vw;
    top: 7.6vw;
}
.loading .motion.blue-motion.blue-motion-35{ 
    height: 23.9vw;
    width: 30vw;
    left: 3vw;
    top: 15.6vw;
}
.loading .motion.blue-motion.blue-motion-36{ 
    height: 23.9vw;
    width: 30vw;
    left: -8vw;
    top: 29.6vw;
}
.loading .motion.blue-motion.blue-motion-37{ 
    height: 23.9vw;
    width: 30vw;
    left: 17vw;
    top: 29.6vw;
}
.loading .motion.blue-motion.blue-motion-38{ 
    height: 11.9vw;
    width: 16vw;
    left: 67vw;
    top: 29.6vw;
}
.loading .motion.blue-motion.blue-motion-39{ 
    height: 11.9vw;
    width: 16vw;
    left: 60vw;
    top: 40.6vw;
}
.loading .text{
    font-size: 3.2vw; 
    color: #657ce8;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    z-index: 99;
}
.loading .text small{
    font-size: 2.56vw;
}



.block-content{
    position: relative;
}
.section{ 
    position: relative; 
}
.section .regAlign{
    font-size: 2vw;
}
.section .bg-img{opacity: 0.5;}
.section > .title{
    position: absolute;
    color: #657ce8;
    left: 1%;
    line-height: 1.15;
    top: 13%;
    text-shadow: 0 0 10px #657ce8;
    font-size: 5.3vw;
    transform: skewX(-8deg);    transform: none;
    font-weight: 100;
    margin-left: 17.67676767676768%;
    z-index: 50;
}
.section > .sub-title{
    position: absolute;
    color: #657ce8;
    left: 1%;
    line-height: 1.15;
    top: 12.2%;
    text-shadow: 0 0 10px #657ce8;
    font-size: 2.8vw;
    font-weight: 400;
    margin-left: 17.67676767676768%;
    z-index: 50;
}
.section > .title .small{
    font-size: 2vw;
} 
.section > .content {
    position: absolute;
    left: 1%;
    top: 45%;
    display: flex;
    margin-left: 17.67676767676768%; 
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 63vw;
    z-index: 50;
}
.section > .content .text-container .title {
    font-size: 1.7vw;
    line-height: 1;
    font-weight: bolder;
}
.section > .content .text-container .text {
    margin-top: 13%;
    font-size: 1.14vw;
}
.section > .content .video-container { 
    position: relative;
    
}
.section > .content .video-container .img{
    border-radius: 1.4vw;
    overflow: hidden;    box-shadow: 0 0 8px #fff;
}

.section > .bg{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;  
    border-radius: 38vw 38vw 0 0;
}


.section.kv{
    height: calc(100vh - 4.166666vw);
    background-image: url(../images/kv_pc.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.section.kv .title{ 
    color: #fff;
    text-shadow: 0 0 6px #000;
    left: 50%;
    top: 88%;
    transform: translate(-50%, -50%);
    margin: auto;
    width: 100%;
    text-align: center;
    font-size: 4vw;
	font-weight: 500;
}
.section.kv .titlesl{ 
    color: #fff;
    text-shadow: 0 0 6px #000;
    left: 50%;
    top: 50%;
    transform: translate(-16%, 0%);
    margin: auto;
    width: 100%;
    text-align: center;
    font-size: 4vw;
	font-weight: 400;
}
.section.kv .titlesa{ 
    color: #fff;
    text-shadow: 0 0 6px #000;
    left: 50%;
    top: 50%;
    transform: translate(-27%, -50%);
    margin: auto;
    width: 100%;
    text-align: center;
    font-size: 4vw;
	font-weight: 400;
}
.brand-purpose{
    position: relative;margin-top:-100vh ;    padding-bottom: 54%;    background-color: rgba(218, 225, 239, 0.45);
}

.brand-purpose > .title{ 
/*    transform: none;*/
}
.brand-purpose > .title .small{ 
}
.brand-purpose > .content{ 
}
.brand-purpose > .content .text-container{
    width: 31%;padding-top: 3%;position: relative;
} 
.brand-purpose > .content .text-container .title{
    font-size: 1.7vw;
    line-height: 1;
    font-weight: bolder;
} 
.brand-purpose > .content .text-container .text{ 
    margin-top: 13%;
    font-size: 1.14vw;
} 
.brand-purpose > .content .text-container .brand-purpose-btn{
    margin-top: 17%;
    width: 45%;
    position: absolute;
    bottom: 0;
}
.brand-purpose > .content .video-container{
    width: 64%; 
}



.vr{
    position: relative;background-color: rgba(218, 225, 239, 0.45);padding-bottom: 58%;
/*    到时候注释去掉*/
    padding-bottom: 51%;
}
.vr > .title{ 
    left: 1%; 
    top: 5%; 
}
.vr > .title .small{ 
}
.vr > .content{
    position:static;
}
.vr > .content .tips{
    position: absolute;
    color: #657ce8;
    left: 40%;
    top: 80%;
    z-index: 78;
    font-size: 2vw;
/*    到时候注释去掉*/
    display: none;
}
.vr > .content .img{
    position: absolute;
    left: 50%;
    top: 20%;    z-index: 50;
    transform: translateX(-50%);
    border-radius: 2vw;
    width: 63vw;
    box-shadow: 0 0 14px #657ce8;
}
.vr > .content .vr-btn{
    position: absolute;
    left: 50%;
    top: 89%;    z-index: 50;
    transform: translateX(-50%);
    width: 10%;
}
.vr > .bg{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; 
    background: #CCDCEF;
    background: linear-gradient(180deg,rgba(204, 220, 239, 0.45) 0%, rgba(186, 214, 239, 0.45) 100%); 
}

.neorest{
    position: relative;padding-bottom: 80%;
    background-color:rgba(218, 225, 239, 0.35);
}
.neorest > .bg{
    background: #BAD6EF;
    background: linear-gradient(180deg,rgba(186, 214, 239, 0.45) 0%, rgba(150, 205, 239, 0.15) 100%);
    border-radius: 0;
}
.neorest > .title{ 
    left: 1%; 
    top: 2%;  
}
.neorest > .title .small{  
}
.neorest > .sub-title{
    
}
.neorest > .sub-title .skewX{
    transform: skewX(-14deg);
    display: inline-block;
    font-size: 2.2vw;
}
.neorest > .content{
    position: absolute; 
    width: 63vw;
    margin-left: 17.67676767676768%;
}
.neorest > .content .pic{
    border-radius: 2vw; 
    box-shadow: 0 0 14px 8px #c0d9fa;
}
.neorest > .content.pic-content-1{
/*    left: 50%;*/
    top: 17%;
/*    transform: translateX(-50%);  */
}
.neorest > .content.video-content{  
    top: 16%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}
.neorest > .content.video-content .text-container{ 
    position: relative;    margin-left: 1.4%;
}
.neorest > .content.video-content .text-container .title{
    font-size: 2.4vw;
    color: #657ce8;
}
.neorest > .content.video-content .text-container .sub-title{
    font-size: 1.8vw;margin-top: 9%;
}
.neorest > .content.video-content .text-container .text{
    margin-top: 3%;font-size: 1.14vw;
}
.neorest > .content.video-content .text-container .neorest-btn{
    bottom: 0;
    width: 88%;
    position: absolute;
}
.neorest > .content.video-content .video-container{ 
    position: relative; width: 66%;
}
.neorest > .content.video-content .video-container .img{ 
    box-shadow:0 0 14px 8px #c0d9fa; 
}
.neorest > .content.pic-content-2{ 
/*    left: 50%;*/
    top: 53.5%;
/*    transform: translateX(-50%); */
}
.neorest > .content.pic-content-2 a{
    width: 100%;
}
.neorest > .content.pic-content-2 a:hover .pic{
   opacity: 1 !important;filter: brightness(50%);
}
.neorest > .content.btn-container{
    top: 92.5%;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 6%;
}
.neorest > .neorest-btn{
    display: none;
}
.neorest > .content.btn-container .neorest-btn{
    width: 39%;
}

.cv{
    background-color: rgba(195, 219, 239, 0.447);    padding-bottom: 53%;
} 
.cv > .bg{
    background: rgba(150, 205, 239, 0.45);
    background: linear-gradient(180deg, rgb(207,217,246,0.45) 0%, rgb(51,119,255,0.15) 100%);
}
.cv > .title{
    top: 3vw;
} 
.cv > .content{ 
    top: 12vw;
    align-items: stretch;
    flex-direction: column-reverse; 
}
.cv > .content .text-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;    width: 100%;align-items: flex-end;
}
.cv > .content .text-container .title { 
    margin-top: -18%;
}
.cv > .content .text-container .text { 
    margin-top: 3%;width: 80%;
}
.cv > .content .text-container .cv-btn { 
    width: 20%;
} 
.cv > .content .video-container{ 
    width: 100%;
}
 

.remodel{
    background-color:rgba(155, 191, 244, 0.53);    padding-bottom: 70%;
} 
.remodel > .bg{
    background: #cddcef;
    background: linear-gradient(180deg, rgb(158,196,244,0.45) 0%, rgb(31,147,249,0.05) 100%); 
}
.remodel > .title{
    top: 5.5vw;    width: 100%;
}  
.remodel > .title br{
    display: none;
}

.remodel > .content.video-content{  
    top: 14vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.remodel > .content.video-content .text-container{ 
    position: relative;    margin-left: 1.4%;
}
.remodel > .content.video-content .text-container .title{
    font-size: 2.4vw;
    color: #657ce8;
}
.remodel > .content.video-content .text-container .sub-title{
    font-size: 1.8vw;margin-top: 9%;
}
.remodel > .content.video-content .text-container .text{
    margin-top: 3%; 
}
.remodel > .content.video-content .text-container .remodel{
    bottom: 0;
    width: 88%;
    position: absolute;
}
.remodel > .content.video-content .video-container{ 
    position: relative; width: 58%;
}
.remodel > .content.video-content .video-container .img{ 
    box-shadow:0 0 14px 8px #c0d9fa; 
}
.remodel > .swiper{
    width: 90%;
    margin: 0;
    top: 43vw;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
}
.remodel > .swiper .swiper-wrapper{
    padding: 2vw 0;
}
.remodel > .swiper .swiper-slide{
    transform: scale(0.8);   
}
.remodel > .swiper .swiper-slide-active{
    transform: scale(1.1);
}
.remodel > .swiper .swiper-slide .img{
    border-radius: 2vw;border: 4px solid transparent;
}
.remodel > .swiper .swiper-slide-active .img{
    border: 4px solid #9db3f2;
} 
.remodel > .swiper .swiper-slide .title{
    position: absolute;
    top: 29%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0.6vw;
    padding: 0.6vw 0;
    background-color: #5673e999;
    font-size: 1.14vw;
    width: 60%;
    text-align: center;
    color: #fff;
    display: none;
}
.remodel > .swiper .swiper-slide-active .title{
    display: block;
}
.remodel > .swiper .swiper-slide .remodel-btn{ 
    top: 76%;
    width: 40%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    background-color: #fff;
    display: none;
}
.remodel > .swiper .swiper-slide-active .remodel-btn{
    display: flex;
}
.remodel > .swiper-pagination{
    top: 66vw;
}
.remodel > .swiper-pagination .swiper-pagination-bullet{
    background-color: #5673e955;
    width: 1.666vw;
    border-radius: 0;
    opacity: 1;
    transition: all .5s ease-out;
}
.remodel > .swiper-pagination .swiper-pagination-bullet-active{
    background-color: #5673e9;
    width: calc( 1.666vw * 1.8);
    border-radius: 0.6vw;
    opacity: 1;
}


.links{
    padding-bottom: 38%;background-color: rgba(145, 186, 244, 0.553);
}
.links > .bg{
    background: #dae1ef;
    background: linear-gradient(180deg, #9ebdfb55, #c2d6ff55); 
}
.links > .links-container{
    position: absolute;
    display: flex;
    top: 7.5vw;
    border-top: solid 1px #8f9ee1;
    border-bottom: solid 1px #8f9ee1;
    padding: 3.4vw 0 2.9vw 0;
    margin: 0 18.5vw;
    gap: 2%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: space-around;
    justify-content: space-around;
    align-items: center;
}
.links > .links-container .link{
    font-size: 1.4vw;
    text-align:center;
/*    font-weight: bolder;    */
    width: 25%;
}
.links > .links-container .link .img{
    border-radius: 1vw; 
    box-shadow: 0 0 8px #fff;   margin-bottom: 0.5vw;
} 
.links > .links-container .link a:hover{
    text-decoration: none;color: #262626;
}
.links > .links-container .link a:hover .img{
    opacity: 1 !important;filter: brightness(50%);
}
.links > .e-shops{
    position: absolute;
    top: 28.5vw;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
} 
.links > .e-shops a{
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 6vw;
    display: block;
    height: 6vw;
}
.links > .e-shops .tmall{
    background-image: url(/global_common/common/images/icon_tmall.png);
}
.links > .e-shops .jd{
    background-image: url(/global_common/common/images/icon_jd.png);
}
.links > .e-shops .redbook{
    background-image: url(https://www.toto.com.cn/global_common/common/images/icon_redbook.png);
}
.links > .e-shops .tiktok{
    background-image: url(https://www.toto.com.cn/global_common/common/images/icon_tiktok.png);
}
.links > .e-shops .zhihu{
    background-image: url(https://www.toto.com.cn/global_common/common/images/icon_zhihu.png);
}
.links > .e-shops .weixin{
    position: relative;cursor: pointer;
    background-image: url(https://www.toto.com.cn/global_common/common/images/icon_wechat.png);
}
.links > .e-shops .weixin .img{
    display: none;right: -181%;
    position: absolute;
    opacity: 1 !important;
    top: -50%;
    width: 178%;
    max-width: inherit;
}
.links > .e-shops .weixin:hover .img{
    display: block;
} 

.blocks{
    position: -webkit-sticky;
    position: sticky;
    top: 0; 
    left: 0;
    height: 100vh;
    width: 100vw;    
    overflow: hidden;
}
/*.blocks{
    height: 100vh;width: 100vw;position: relative;overflow: hidden;
}*/
.blocks .block{
    transition: all 1.5s ease-out;
    position: absolute;
    left: 10%;top: 0;
    border-radius: 1vw;
    width: 10vw;height: 10vw;
    background-color: rgba(236, 240, 255, 1);
    z-index: 20;
    box-shadow: 0 0 5px #657ce8;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    font-size: 6vw;
}
.blocks .block.block-a{
    width: 28vw;
    left: -2%;
    top: -2vw;
    transform-origin: left bottom; 
}
.blocks .block.block-b{
    width: 6vw;
    height: 29vw;
    left: -1%;
    top: 18vw;
    transform-origin: left bottom; 
}
.blocks .block.block-c{
    width: 17vw;
    height: 14vw;
    left: -1%;
    top: 41vw;
    transform-origin: left bottom;

}
.blocks .block.block-d{
    width: 10vw;
    height: 22vw;
    left: auto;
    top: 5vw;
    right: 0%;
    transform-origin: left bottom;
}
.blocks .block.block-e{
    width: 15vw;
    height: 28vw;
    left: auto;
    top: 20vw;
    right: 0%;
    transform-origin: left bottom;
}
.blocks .block.block-f{
    width: 7vw;
    height: 14vw;
    left: auto;
    top: 45vw;
    right: 3%;
    transform-origin: left bottom;
}



@keyframes float {
    0% {
        transform: translate(0)
    }

    50% {
        transform: translateY(-20px)
    }

    to {
        transform: translate(0)
    }
}

.blocks .block{
/*    animation: float 3s linear infinite;*/
/*    transform-origin: center center*/
}
.blocks .block.block-a{
/*    animation-delay: 0.2s;*/
}
.blocks .block.block-b{
/*    animation-delay: 0.1s;*/
}
.blocks .block.block-c{
/*    animation-delay: -0.2s;*/
}
.blocks .block.block-d{
/*    animation-delay: -0.1s;*/
}
.blocks .block.block-e{
/*    animation-delay: 0.3s;*/
}


@keyframes floatShowBlockA {
    0% {
        transform: rotate(90deg);
    }

    50% {
        transform: rotate(90deg) translateX(-20px)
    }

    to {
        transform: rotate(90deg);
    }
}
.blocks.show .block.block-a{
    transform: rotate(90deg);
    animation: floatShowBlockA 3s linear infinite;
    animation-delay: 0.2s;
    left: 0%;
    top: 17%;
    width: 37vw;
}
.blocks.show .block.block-b{
    transform: rotate(90deg);
    animation: floatShowBlockA 3s linear infinite;
    animation-delay: 0.2s;
}

@keyframes floatShowBlockC {
    0% {
        transform: rotate(-90deg);
    }

    50% {
        transform: rotate(-90deg) translateX(-20px)
    }

    to {
        transform: rotate(-90deg);
    }
}
.blocks.show .block.block-c{
    left: 100%;
    transform: rotate(-90deg);
    width: 24vw;
    animation: floatShowBlockC 3s linear infinite;
    animation-delay: 0.1s;
}
.blocks.show .block.block-d{ 
    top: -1%;
    right: 74%;
    transform: rotate(-90deg);
    animation: floatShowBlockC 3s linear infinite;
    animation-delay: -0.2s;
}
.blocks.show .block.block-e{
    transform: rotate(-90deg);
    top: -8%;
    right: -20%;
    width: 19vw; 
    animation: floatShowBlockC 3s linear infinite;
    animation-delay: 0.16s;
}
.blocks.show .block.block-f{
    transform: rotate(-90deg);
    animation: floatShowBlockC 3s linear infinite;
    animation-delay: -0.2s;
    top: -11%;
    right: 13%;
}

 



.popup-container{
    width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;z-index: 99999;
    opacity: 0; visibility: hidden;
}

.popup-container .popup{
    border-radius: 1vw;
    background-color: #fff;
    box-shadow: 0px 0px 8px 0px #00000042;
    width: 80vw; 
    position: fixed;
    left: 50%;top: 50%;
    transform: translate(-50%,-50%);
    padding:  7vw 3vw 4vw 3vw;z-index: 999;
}
.popup-container .overlay{
    width: 100%;height: 100%;
    background-color: #00000055;
}
.popup-container .popup .close{
    width: 5%;
    padding-bottom: 5%;
    border: 1px #867452 solid;
    border-radius: 25%;
    position: absolute;
    right: 3%;
    top: 9%;
    background-color: #fff;
    cursor: pointer; 
}
.popup-container .popup .close:after,
.popup-container .popup .close:before{
    content: " ";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80%; 
    height: 1px;
    background-color: #867452;
}
.popup-container .popup .close:after{
    transform: translate(-50%,-50%) rotate(45deg);
}
.popup-container .popup .close:before{
    transform: translate(-50%,-50%) rotate(-45deg);
}
.popup-container .popup .content{
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    justify-content: space-between;
    align-items: center;
}
.popup-container .popup .content .text-container{
    width: 100%;     
}
.popup-container .popup .content .text-container .title{
    font-size: 1.8vw;
}
.popup-container .popup .content .text-container .text{
    font-size: 1.2vw;
}
.popup-container .popup .content .video-container{
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: center;
    margin-top: 2%;
    width: 100%;
}
.popup-container .popup .content .video-container .video{
    width: 48%;
    margin-right: 1%;
    position: relative;
}
.popup-container .popup .content .video-container .video .img{
    transition: all 0.25s; border-radius: 1vw;
}

.popup-container.popup1 .overlay{
    background-color: #657ce8;
}
.popup-container.popup1 .popup{
    margin-left: 17.67676767676768%;
    margin-right: 17.67676767676768%;
    transform: none;
    left: 0;
    top: 0;
    width: auto;
    position: absolute;
    color: #fff;
    background-color: transparent;
    box-shadow: none;
    padding-top: 10%;
}
.popup-container.popup1 .popup .content .text-container .title{
    margin-bottom: 3vw;
}
.popup-container.popup1 .popup .content .text-container .text{
    line-height: 2.4;
}
.popup-container.popup1 .popup .content .video-container{
    justify-content: space-between;
}
.popup-container.popup1 .popup .close{
    width: 14.14141414141414vw;
    height: 2.828282828282828vw;
    border: 0px none;
    text-align: center;
    box-shadow: 0 0 black;
    border-radius: 10vw;
    color: #657ce8;
    padding-bottom: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    font-style: italic;
    justify-content: center;
    font-size: 1.5vw;
    right: -16%;
}
.popup-container.popup1 .popup .close:before, 
.popup-container.popup1 .popup .close:after{
    background-color: #657ce8;
    width: 15%;    height: 0.13889vw;left: 20%;
/*    background-color: #657ce8; width: 1vw;height: 1vw;transform: translateY(-50%);left: 16%;*/
}


.popup-container.remodel-popup .content.sp{
    display: flex!important;
}

.popup-container.remodel-popup .popup{
    width: 67.1875vw;
/*    height: 79.6296vh;*/
    border: 4px solid #5673e8;
    border-radius: 3vw;
    padding: 3.33333vw 2.33333vw;
}
.popup-container.remodel-popup .popup .content{
    align-items: flex-start;    flex-direction: row;
}
.popup-container.remodel-popup .popup .content .text-container.left-container{
    width: 36%;
}
.popup-container.remodel-popup .popup .content .text-container.right-container{
    width: 63%;
    padding-top: 2vw;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: center;
    align-items: flex-end;
    gap: 0.2vw;
}
.popup-container.remodel-popup .popup .content .text-container.right-container .pic:first-child{
    width: 90%;
}
.popup-container.remodel-popup .popup .content .text-container.right-container .pic:nth-of-type(2){
    width: 100%;
}
.popup-container.remodel-popup .popup .close{
    width: 4%;
    padding-bottom: 4%;
    border: 1px #5d71e2 solid;
    border-radius: 25%;
    position: absolute;
    right: 2%;
    top: 3%;
    background-color: #fff;
    cursor: pointer;
    font-size: 0;
}
.popup-container.remodel-popup .popup .close:after, .popup-container.remodel-popup .popup .close:before{
    background-color: #5d71e2;
} 
    
.popup-container.remodel-popup .popup .title{
    font-size: 3.125vw;    margin-left: -2vw;    margin-bottom: 2vw;
}
.popup-container.remodel-popup .popup .title .first-letter{
    font-size: 120%;    vertical-align: super;
}
.popup-container.remodel-popup .popup .title,
.popup-container.remodel-popup .popup .blue{
    color: #4d66d9; 
}
 



.popup-container.remodel-popup.remodel-popup-up-down .popup .title{
    margin-bottom: 1vw;
}
.popup-container.remodel-popup.remodel-popup-up-down .popup .content .text-container .title{
/*    font-size: 3.125vw;*/
}
.popup-container.remodel-popup.remodel-popup-up-down .popup .content{
    flex-direction: column;
}
.popup-container.remodel-popup.remodel-popup-up-down .popup .content .up-container{
    display: flex;
    flex-direction: row;
    align-content: flex-end;
    align-items: flex-end;
    justify-content: space-between;
}
.popup-container.remodel-popup.remodel-popup-up-down .popup .content .up-container .pic{
    width: 60%;
}
.popup-container.remodel-popup.remodel-popup-up-down .popup .content .up-container .text{
    width: 38%;
} 
.popup-container.remodel-popup.remodel-popup-up-down .popup .content .down-container{
    margin-top: 0.2vw;
}
.popup-container.remodel-popup.remodel-popup-up-down .popup .content .down-container .pic{
    width: 72%;
}



.popup-container.remodel-popup.remodel-popup-up-down.remodel-popup-4 .popup .title{
    white-space: nowrap;
    position: relative;
    left: -17%;
}