.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;top: 130px;
    width: 100%;height: calc(100vh - 130px);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: 6.3vw;
    transform: skewX(-8deg);
    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.2vw;
}
.section > .content .video-container { 
    position: relative;
    
}
.section > .content .video-container .img{
    border-radius: 2vw;
    overflow: hidden;    box-shadow: 0 0 8px #fff;
}


.section.kv{
    height: calc(100vh - 130px);
    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: 60%;
    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%);text-align: center;*/
    margin: auto;
    width: 100%;
    
    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 ;
}

.brand-purpose > .title{ 
}
.brand-purpose > .title .small{ 
}
.brand-purpose > .content{ 
}
.brand-purpose > .content .text-container{
    width: 31%;
} 
.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%;
}
.brand-purpose > .content .video-container{
    width: 64%; 
}



.vr{
    position: relative;
}
.vr > .title{ 
    left: 1%; 
    top: 9%; 
}
.vr > .title .small{ 
}
.vr > .content{
    position:static;
}
.vr > .content .tips{
    position: absolute;
    color: #fff;
    left: 20%;
    top: 74%;
    text-shadow: 0 0 6px black;
    z-index: 88;
    font-size: 2vw;
}
.vr > .content .img{
    position: absolute;
    left: 50%;
    top: 25%;    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: 86%;    z-index: 50;
    transform: translateX(-50%);
    width: 19%;
}

.neorest{
    position: relative;
}
.neorest > .title{ 
    left: 1%; 
    top: 6%; 
    font-size: 6.3vw; 
}
.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: 43%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.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: 8%;
}
.neorest > .content.video-content .video-container{ 
    position: relative; width: 72%;
}
.neorest > .content.video-content .video-container .img{ 
    box-shadow:0 0 14px 8px #c0d9fa; 
}
.neorest > .content.pic-content-2{ 
/*    left: 50%;*/
    top: 65.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 > .content.btn-container .neorest-btn{
    width: 39%;
}

.cv > .title{
    top: 7%;
} 
.cv > .content{ 
    top: 30%;align-items: stretch;
}
.cv > .content .text-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;    width: 40%;
}
.cv > .content .text-container .title { 
    margin-top: -18%;
}
.cv > .content .text-container .text { 
    margin-top: 6%;
}
.cv > .content .text-container .cv-btn { 
    position: absolute;left: 0;bottom: 11%;width: 100%;
} 
.cv > .content .video-container{ 
    width: 50%;
}

.ub > .title{
    top: 11%;
} 
.ub > .content{
    flex-direction: row-reverse;top: 26%;
} 
.ub > .content .text-container{
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.ub > .content .text-container .ub-btn {
    position: absolute;
    left: 0;
    bottom: 11%;
    width: 100%;
} 
.ub > .content .text-container .title{
    margin-top: -54%;
    padding-left: 6%;
}
.ub > .content .text-container .text{
    margin-top: 6%;
    padding-left: 6%;
}
.ub > .content .text-container a.ub-btn:nth-of-type(1){
    bottom: 21%;
}
.ub > .content .text-container a.ub-btn:nth-of-type(2){
    bottom: 5%;bottom: 0%;
}
.ub > .content .text-container a.ub-btn:nth-of-type(2) ._text{
    text-align: center;
}
.ub > .content .text-container a.ub-btn:nth-of-type(2) ._text small{
    font-size: 1vw;
}
.ub > .content .video-container{ 
    width: 50%;
}

.sc > .title{
    top: 7.5%;    width: 100%;
} 
.sc > .slider{
    top: 19.5%;    z-index: 50;
    position: absolute;
} 
.sc > .slider .items{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    align-content: flex-start;
/*    gap: 1%;    */
    transform: translateX(19vw);
}
.sc > .slider .items .item{
    width: 36.6vw;margin-right: 0.6%;
}
.sc > .slider .items .item .img{
    border-radius: 2vw;
    overflow: hidden;
    box-shadow: 0 0 8px #fff;
}
.sc > .slider .items .item a:hover{
    text-decoration: none;color: #262626;
}
.sc > .slider .items .item a:hover .img{
    opacity: 1 !important;
}
.sc > .slider .items .item .title{
    font-size: 1.4vw;padding-left: 1vw;padding-top: 0.8vw;
}
.sc > .slider .items .item .text{
    font-size: 1.2vw;padding-left: 1vw;
}
.sc > .links{
    position: absolute;
    display: flex;
    top: 66.5%;
    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;
}
.sc > .links .link{
    font-size: 1.4vw;font-weight: bolder;    width: 25%;
}
.sc > .links .link .img{
    border-radius: 1vw; 
    box-shadow: 0 0 8px #fff;   margin-bottom: 0.5vw;
} 
.sc > .links .link a:hover{
    text-decoration: none;color: #262626;
}
.sc > .links .link a:hover .img{
    opacity: 1 !important;filter: brightness(50%);
}
.sc > .e-shops{
    position: absolute;
    top: 91%;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
} 
.sc > .e-shops a{
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 6vw;
    display: block;
    height: 6vw;
}
.sc > .e-shops .tmall{
    background-image: url(/global_common/common/images/icon_tmall.png);
}
.sc > .e-shops .jd{
    background-image: url(/global_common/common/images/icon_jd.png);
}
.sc > .e-shops .redbook{
    background-image: url(https://www.toto.com.cn/global_common/common/images/icon_redbook.png);
}
.sc > .e-shops .tiktok{
    background-image: url(https://www.toto.com.cn/global_common/common/images/icon_tiktok.png);
}
.sc > .e-shops .zhihu{
    background-image: url(https://www.toto.com.cn/global_common/common/images/icon_zhihu.png);
}
.sc > .e-shops .weixin{
    position: relative;cursor: pointer;
    background-image: url(https://www.toto.com.cn/global_common/common/images/icon_wechat.png);
}
.sc > .e-shops .weixin .img{
    display: none;right: -181%;
    position: absolute;
    opacity: 1 !important;
    top: -50%;
    width: 178%;
    max-width: inherit;
}
.sc > .e-shops .weixin:hover .img{
    display: block;
}
.sc .icon-720{
    width: 5vw;
    display: inline-block;
    transform: skewX(8deg);    vertical-align: bottom;
}
/*.pin-spacer{background-color: #a5d0f0;}*/

.blocks{
    position: -webkit-sticky;
    position: sticky;
    top: 0; 
    left: 0;
    height: 100vh;
    width: 100vw;    
    overflow: hidden;
    display: none;
}
/*.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: 30%;
    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%;*/
}

.brand-purpose{
    margin-top: auto;
}
.section.concept,
.section.feature,
.section.idea,
.section.case,
.section.service,
.section.qa{
    background-color: #f9f9fc;
    width: 100%;
    padding: 0 15.625vw;
    padding-top: 4.2vw;
/*    margin-top: -100vh;*/
}

 
.section.concept > .title,
.section.feature > .title,
.section.idea > .title,
.section.case > .title,
.section.service > .title,
.section.qa > .title{
    color: #000;
    transform: none;
    text-shadow: none;
    position: static;
    margin-left: 0;
    font-size: 2vw;
    font-weight: 600;
    text-align: center;
    padding-bottom: 0.8vw;
/*    margin-top: 4.2vw;*/
    border-bottom: #3252a3 2px solid;
}
.section.concept .text{
    padding: 3.65vw 0;    font-size: 1.14vw;
}
 
.section.feature{ 
    margin-top: auto;    margin-bottom: 0;
} 
.section.feature > .title{
    margin-bottom: 3.65vw;
}
.section.feature .feature-items{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: space-between;
    align-items: flex-start;
}
.section.feature .feature-items .items{
    width: 50%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-around;
}
.section.feature .feature-items .items .item{
    width: 47%;
    border: 2px solid #657ce8;
    border-radius: 0.8vw;
    padding: 0.8vw 1vw;
    margin-bottom: 2%;
    font-size: 1.14vw;
}
.section.feature .feature-items .items.items-1 .item{
    background-color: #657ce8;color: #fff;
} 
.section.feature .feature-items .items .item .title{
    font-size: 1.24vw;
}    
.section.feature .feature-items .items .item.item-2 br,
.section.feature .feature-items .items .item.item-4 br,
.section.feature .feature-items .items .item.item-5 br{
    display: none;
}

.section.idea{
    margin-top: auto;       padding-bottom: 4vw;
}
.section.idea > .title{
    margin-bottom: 3.65vw;
}
.section.idea .content{
    position: static;flex-direction: row-reverse;margin-left: auto;
    width: 100%;
}
.section.idea .content.btn-container{
    display: none;
}
.section.idea .content .text-container{
    width: 47%;    position: relative;
}
.section.idea .content .text-container .text{
    margin-top: 0;
}
.section.idea .content .text-container .ub-btn {
    position: absolute;
    left: 17%;
    bottom: 0%;
    width: 77%;    min-width: 315px;
}
.section.idea .content .text-container a.ub-btn:nth-of-type(1){
    transform: translateY(-130%);
}
.section.idea .content .text-container a.ub-btn:nth-of-type(2){
    
}
.section.idea .content .video-container{
    width: 50%;
}
.section.idea .content .video-container .img{
    border-radius: 0;
}


.section.case{
    background-color: #fff;
}

.section.service{
    background-color: #fff;
}
.section.service .text{
    padding: 3.65vw 0;    font-size: 1.14vw;
}
.section.service .text .title{
    font-size: 1.24vw;
    margin-bottom: 1vw;
    padding-left: 2.2vw;
    position: relative;
}
.section.service .text .title:before{
    content: "◆";
    font-size: 184%;
    color: #657ce8;
    left: 0;
    position: absolute;
    top: -42%;
}
.section.service .text a{
    word-break: break-all;
}

.case-list{
  width:100%;
  margin: auto;
  padding-bottom: 2vw;
  position: relative;
}
.case-list .title{
  display: inline-block;
  background-color: #25429e;
  padding: 0.2vw 1vw;
  color: #fff;
  position: relative;
  border-radius: 0.4vw;
  text-align: center;
  margin: auto;
  font-size: 200%;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 0) and (max-width: 1440px)
{ 
  .case-list .title{ 
    font-size: 168%; 
  }
}
@media screen and (min-width: 0) and (max-width: 1280px)
{ 
  .case-list .title{ 
    font-size: 162%; 
  }
}
.case-list .text{
  margin-top: 1rem;margin-bottom: 1rem;
}
.case-list .swiper-container .swiper-slide{
  width: 25%; position: relative;
} 
.case-list .swiper-container .swiper-slide .pic-container{
      margin-top: 23%;    position: relative;
}
.case-list .swiper-container .swiper-slide .pic-container .new,
.case-list .swiper-container .swiper-slide .pic-container .logo-img,
.case-list .swiper-container .swiper-slide .pic-container .portrait-img,
.case-list .swiper-container .swiper-slide .icon-3D{
  position: absolute;left: 0; top: 0;
} 
.case-list .swiper-container .swiper-slide .pic-container .new{
  background-color: #25429e;
  color: #fff;
  font-size: 140%;
  text-transform: uppercase;
  padding: 0 0.4vw;
  border-radius: 1vw 1vw 1vw 0;
  transform: translate(10%,-120%);
}
.case-list .swiper-container .swiper-slide .pic-container .pic{
  width: 100%;
}
.case-list .swiper-container .swiper-slide .pic-container .portrait-img{
    border: 4px solid #3252a3;
    width: 22%;
    top: 89%;
    left: 50%;
    border-radius: 50%;
    transform: translateX(-50%);
}
.case-list .swiper-container .swiper-slide .pic-container .logo-img{
  width: 100%;
  top: 108%;
}
.case-list .swiper-container .swiper-slide .icon-3D{
  left: auto;
  top: 15%;
  width: 17%;
  right: 0%;
  transform: translate(-20%, 0%);
  z-index: 111;
} 
@keyframes rotation {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
.case-list .swiper-container .swiper-slide .icon-3D .icon-3D-1{
  width:100%;
  animation-name: rotation;
  animation-duration: 2.5s;animation-iteration-count: infinite;animation-timing-function: linear;
}
.case-list .swiper-container .swiper-slide .icon-3D .icon-3D-2{
  position: absolute;
  left: 0;
  top: 0;
}
.case-list .swiper-container .swiper-slide .text{
  margin-top: 33%;
  font-weight: bolder;
  text-align: left;
  display: block;
  padding-left: 0.6vw;
  width: 100%;
  font-size: 110%;    font-size: 1.14vw;
  height: 2rem;    height: calc(1.14vw* 2.4);
}

@media screen and (min-width: 1980px) and (max-width: 3840px) {
  .case-list .swiper-container .swiper-slide .text{
    height: 8rem;
  }
}
.case-list .swiper-container .swiper-slide .text .arrow{
  position: absolute;
  width: 5%;
  transform: rotate(90deg) translateY(-50%);
  right: 3%;
  bottom: 0%;
}
.case-list .swiper-container .swiper-slide a:hover img{
  opacity: 1!important;
}
.case-list .swiper-company-list{
  /* margin-bottom: 2vw; */
}
.case-list .swiper-kol-list{
  margin-bottom: 6vw;
}
.case-list .swiper-kol-list .swiper-slide .pic-container .new{
  background-color: #cc9495;
} 
.case-list .swiper-kol-list .swiper-slide .pic-container .portrait-img{
  border: 6px solid #cc9495;
}
.case-list .swiper-ub-list .swiper-slide .pic-container .new {
    background-color: #8ac1bd;
}
.case-list .swiper-case-list .swiper-slide .pic-container{
/*  margin-top: 0%;*/
}
.case-list .swiper-case-list .swiper-slide .pic-container .new {
    background-color: #ffc107;
    color: #262626;
}
.case-list .swiper-case-list .swiper-slide .text{
  height: auto;
  margin: auto;
  padding: 1rem;
  text-align: center;
}

.section.qa > .title {
    margin-bottom: 3.65vw;
}
.section.qa .search-box{
    color: #3252a3;
    display: flex;
    font-size: 1.24vw;
} 
.section.qa .search-box-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
/*    padding: 0 8vw;*/
    margin: auto;
    width: 52vw;
}
.section.qa .search-box-container .search-box{
    width: 50%;margin-bottom: 1vw;
}
.section.qa .search-box-container .search-box .sub-categories,
.section.qa .search-box-container .search-box .keywords{
    color: #657ce8;border: 1px #657ce8 solid;padding:0 1vw;
}
.section.qa .search-box-container .search-box .keywords{
    width: 35.83vw;
}
.section.qa .search-box-container .search-box .keywords::placeholder{
    color: #657ce8; font-size: 80%;
}
.section.qa .search-box-container .search-box .categories{
    display: flex;    gap: 0.5vw;
}
.section.qa .search-box-container .search-box .category{ 
    border: 1px #657ce8 solid;
    border-radius: 0.5vw;
    color: #657ce8;
    width: 4vw;
    text-align: center;
    background-color: #fff;
    cursor: pointer;
}
.section.qa .search-box-container .search-box .category.selected{
    color: #fff;
    background-color: #657ce8;
}
.section.qa .search-box-container .search-box:nth-of-type(3){
    width: 100%;
}
.section.qa .search-box-container .search-box:nth-of-type(2){
    justify-content: flex-end;
}
.section.qa .search-box-container .search-box .search-button{
    border: 1px #657ce8 solid;
    border-radius: 0.5vw;
    color: #fff;
    width: 4vw;
    text-align: center;
    background-color: #657ce8; 
    margin-left: 1vw;
}
.section.qa .qa-title{
    color: #3252a3;font-size: 1.875vw;
} 
.section.qa .qa-list{
    padding-bottom: 2vw;
}
.section.qa .question,
.section.qa .answer{
    font-size: 1.14vw;
    margin: 0 2.70833333vw;
    color: #3252a3;
} 
.section.qa .question{
    padding-right: 2vw;
	font-weight: 600;
    width: 34vw;
    cursor: pointer;
    position: relative;
}
.section.qa .question:after{
    content: "";
    position: absolute;
    background-image: url(../images/arrow_up_blue.svg);
    background-repeat: no-repeat;
    background-position: 100% 76%;
    background-size: contain;
    right: 0;
    top: 50%;
    height: 2vw;
    width: 2vw;
    transform: translateY(-26%) rotate(180deg);
    transition: all 0.2s ease;
}
.section.qa .question.open:after{
    transform: translateY(-26%) rotate(0deg);
}
.section.qa .question .letter{
    font-size: 180%;
}
.section.qa .answer{
    border: 1px solid #3252a3;
    margin: 1vw 5vw;
    padding: 1vw 2vw;
    background-color: #fff;
    color: inherit;
    display: none;
    width: 42vw;
}
.section.qa .answer.open{
    display: block;
}
.section.qa .answer sub{
    vertical-align: super;
}
.section.qa .answer a{
    color: #367eb3;
    text-decoration: underline;
} 

@media screen and (min-width: 0) and (max-width: 1024px)
{ 
  .case-list{ 
    width: 85.648%;
  } 
  .case-list .title{
    border-radius: 2.4vw;font-size: 160%;
  }
  .case-list .swiper-container .swiper-slide .pic-container {
    margin-top: 40px; 
  }
  .case-list .swiper-container .swiper-slide .pic-container .new{
    padding: 0 1.4vw;        font-size: 120%;
    border-radius: 3vw 3vw 3vw 0;
  }
  .case-list .swiper-container .swiper-slide .icon-3D{
    width: 24%;
  }
  .case-list .swiper-company-list {
    margin-bottom: 5vw;    
  }
  .case-list .swiper-container .swiper-slide .text{
    height: 4rem;        font-size: 3.733333333333333vw;
  }
  .case-list .button-prev, .case-list .button-next{
    top: 48%;
  }
  .button-prev, .button-next{
    width: 6vw;
    height: 6vw;
  }
}
    



@media screen and (max-width: 640px) { 
    .loading{
        top: 72px;
    }
    .section.concept, .section.feature, .section.idea,.section.case,.section.service,.section.qa{
        width: 100%; padding-top: 4vh;
        padding-left: 0;
        padding-right: 0;
    }
    .section.concept > .title,
    .section.feature > .title,
    .section.idea > .title,
    .section.case > .title,
    .section.service > .title,
    .section.qa > .title{
        font-size: 5.333333333333333vw;    padding-bottom: 1.8vw;
    }

    .section.concept .text{
        font-size: 3.733333333333333vw;
        padding: 8.65vw 6.65vw;
    }
    .section.feature{
        margin-bottom: 0;
    }
    .section.feature > .title{
        margin-bottom: 8.65vw;
    }
    .section.feature .feature-items{
        margin-left: 6.65vw;margin-right: 6.65vw;
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .section.feature .feature-items .items{
        width: 100%;
    }
    .section.feature .feature-items .items .item{
        font-size: 3.733333333333333vw;    border-radius: 2.8vw;            padding: 1.8vw 1vw 1.8vw 4vw;   margin-bottom: 6%;    width: 43%;
    }
    .section.feature .feature-items .items .item .title{
        font-size: 4.15vw;
    }    
    .section.feature .feature-items .items .item.item-2 br,
    .section.feature .feature-items .items .item.item-4 br,
    .section.feature .feature-items .items .item.item-5 br{
        display: block;
    }

    .section.idea > .title{
        margin-bottom: 8.65vw;
    }
    .section.idea .content{
        flex-direction: column;
    }
    .section.idea .content .text-container,
    .section.idea .content .video-container{
        width: auto;
        margin: 0 10.6666vw;
    }
    .section.idea .content .video-container{
        margin-top: 10.6666vw;
    }
    .section.idea .content .text-container .ub-btn{
        display: none;
    }
    .section.idea .content.btn-container{
        display: flex;
        gap: 9vw;
        padding-top: 9vw;
        padding-bottom: 9vw;
        margin: auto;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
    }
    .section.idea .content.btn-container .ub-btn{
        width: 18.3rem;
    } 
    .section.idea .content.btn-container .ub-btn ._text{
        font-size: 5vw;
        left: 47%;
        transform: translateX(-61%) translateY(-3%);
    }
    .section.idea .content.btn-container .ub-btn ._icon{
        height: 4rem; width: 4rem;transform: translateY(3%);
    }

    .section.case > .title{
      margin-top: 5vw;  margin-bottom: 8.65vw; 
    } 

    .section.service .text{
        font-size: 3.733333333333333vw;
        padding: 8.65vw 6.65vw;
    }
    
    .section.service .text .title{
        font-size: 4.15vw;     padding-left: 8.6vw;
    }
    .section.service .text .title:before{
        font-size: 226%;    top: -59%;
    }


    .section.qa .search-box-container { 
        width: 61.35vw;
    }
    .section.qa .search-box-container .search-box{
        width: 100%;justify-content: space-between;        margin-bottom: 4vw;
    }
    .section.qa .search-box-container .label,
    .section.qa .search-box-container .search-box .category,
    .section.qa .search-box-container .search-box .sub-categories, .section.qa .search-box-container .search-box .keywords,
    .section.qa .search-box-container .search-box .search-button{
        font-size: 4vw;
    }
    .section.qa .search-box-container .search-box .category{
        width: 12vw;    border-radius: 1.5vw;
    }
    .section.qa .search-box-container .search-box:nth-of-type(2){
        justify-content: space-between;    
    }
    .section.qa .search-box-container .search-box:nth-of-type(2) select{
        width: 24.5vw;border-radius: 1.5vw;
    }
    .section.qa .search-box-container .search-box .keywords{
        width: 61.3vw;        height: 9vw;
    }
    .section.qa .search-box-container .search-box:nth-of-type(3){
        display: block;
    }
    .section.qa .search-box-container .search-box .search-button{
        display: block;width: 16vw;   margin: auto;     margin-top: 4vw;
    }
    .section.qa .qa-title,
    .section.qa .qa-list{
        width: 72vw;margin: auto;
    } 
    .section.qa .qa-title{
        font-size: 4.8vw;
    }
    .section.qa .qa-list{
        font-size: 3.733333333333333vw;width: 80vw;    padding-bottom: 12vw;
    }
    .section.qa .question, .section.qa .answer{
        font-size: 3.2vw;width: 76vw;
    }
    .section.qa .question{padding-right: 8vw;}
    .section.qa .question:after{
        height: 4vw;
        width: 4vw;top: 4vw;    transform: rotate(180deg);
    }
    .section.qa .question:after{
        height: 4vw;
        width: 4vw;top: 4vw;    transform: rotate(180deg);
    }
    .section.qa .question.open:after {
        transform: rotate(0deg);
    }
    .section.qa .answer{
        width: 74vw;
    }
}