.scroll{
            display: none;
        }
        .pc main{
            overflow: hidden;
        }  
        main .control{
            display: none;
            width: 40px;
            height: 25vh;
            bottom: 20px;
            right: 20px;
            z-index: 5;
            position: absolute;
        }
        main .control i{
            width: 1px;
            height: 100%;
            top: 0px;
        }
        main .control p{
            width: 100%;
            overflow: hidden;
        }
        main .control .prev,
        main .control .next .scd{
            top: -20px;
        }
        main .control .prev:hover .dc:first-child{
            animation: move1-1 ease .8s;
        }
        main .control .prev:hover .dc:last-child{
            animation: move1 ease .8s;
        }
        main .control .next:hover .dc:first-child{
            animation: move2-2 ease .8s;
        }
        main .control .next:hover .dc:last-child{
            animation: move2 ease .8s;
        }
        @keyframes move1{
            from{margin-bottom: 0px;}
            to{margin-bottom: 38px;}
        }
        @keyframes move1-1{
            from{transform: translateY(0px);}
            to{transform: translateY(-38px);}
        }
        @keyframes move2{
            from{margin-top: 0px;}
            to{margin-top: 38px;}
        }
        @keyframes move2-2{
            from{transform: translateY(0px);}
            to{transform: translateY(38px);}
        }
        main .control .next,
        main .control .prev .scd{
            bottom: -20px;
        }
        main .control p{
            padding: 18px 0px;
        }
        main .control p .dc{
            width: 12px;
            display: block;
            margin: 0 auto;
        }
        main .control1{
            width: 40px;
            right: 40px;
            bottom: 20px;
            position: fixed;
            z-index: 10;
        }
        .mobileDevice main .control1{
            display: none;
        }
        main .control1 p{
            border-radius: 50%;
            position: relative;
            transition: transform .5s;
        }
        main .control1 p:hover{
            transform: scale(.8);
        }
        main .control1 p:first-child{
            margin-bottom: 12px;
        }
        main .control1 p:first-child .hvc img{
            transform: rotate(180deg);
        }
        main .control1 p .hvc{
            width: 10px;
        }
        main .control1 p::after{
            z-index: -1;
            content: '';
            box-sizing: border-box;
            border: 1px solid #000;
            border-radius: 50%;
        }
        main .control1 p::after{
            width: 110%;
            height: 110%;
            top: -5%;
            left: -5%;
            transform: scale(0);
            transition: transform .7s;
        }
        main .control1 p:hover::after{
            transform: scale(1);
        }
        main .tpLft{
            font-size: 18px;
            line-height: 30px;
            font-weight: bold;
            position: fixed;
            z-index: 10;
            top: 160px;
            left: 40px;
        }
        main .tpLft .en{
            font-size: 22px;
        }
        main .tpLft a{
            display: block;
            position: relative;
        }
        main .tpLft a p{
            overflow: hidden;
        }
        
        main .tpLft a span{
            display: inline-block;
            position: relative;
            transform: translateY(100%);
        }
        main .tpLft.active a span{
            animation: slideInDown 1s ease forwards;
        }
        main .tpLft a span:nth-child(2){
            animation-delay: .15s;
        }
        main .tpLft a span:nth-child(3){
            animation-delay: .3s;
        }
        main .tpLft a span::after{
            transition: left .2s cubic-bezier(.47,0,.745,.715),
            width .15s cubic-bezier(.47,0,.745,.715),
            opacity .2s cubic-bezier(.55,.055,.675,.19);
            content: "";
            width: 0%;
            height: 3px;
            bottom: 0;
            opacity: 0;
            left: 0;
            position: absolute;
        }
        main .tpLft a .diyNumBox{
            transform: translateY(-40%);
            right: auto;
            left: calc(100% - 46px);
            transition: transform .5s cubic-bezier(.215,.61,.355,1);
        }
        main .tpLft:hover a .diyNumBox{
            transform: translate(7%,-40%);
        }
        main .tpLft a .diyNumBox>*{
            width: 46px;
            transition: translateY(40%);
            opacity: 0;
            border-radius: 100px;
        }
        main .tpLft.active a .diyNumBox>*{
            animation: badgeSlideIn .5s .7s cubic-bezier(.215,.61,.355,1) forwards;
        }
        main .tpLft a .diyNum{
            font-size: 16px;
            text-align: center;
            padding: 5px 0px;
            background: rgba(219,16,16,.9);
        }
        main .tpLft a .diyNumBox .points{
           
            margin-left: 5px;
            background-color: hsla(0,0%,66.7%,.7);
            border: 1px solid hsla(0,0%,66.7%,.7);
        }
        main .tpLft a .diyNumBox .points i{
            width: 6px;
            height: 6px;
            border-radius: 50%;
            margin-left: 4px;
            background-color: #fff;
            animation: fadeLoop infinite 1.2s ease;
        }
        main .tpLft a .diyNumBox .points i:nth-child(2){
            animation-delay: .1s;
        }
        main .tpLft a .diyNumBox .points i:nth-child(3){
            animation-delay: .2s;
        }
        main .tpLft a .diyNumBox .points i:first-child{
            margin-left: 0px;
        }
        @keyframes fadeLoop{
            0%{opacity:1}40%{opacity:.3}80%{opacity:1}to{opacity:1}
        }
        main .tpLft:hover a span::after{
            width: 100%;
            opacity: 1;
            transition: left .5s cubic-bezier(.215,.61,.355,1),
            width .2s cubic-bezier(.215,.61,.355,1),
            opacity .1s cubic-bezier(.215,.61,.355,1);

        }

        main .foot{
            position: fixed;
            z-index: 10;
            left: 40px;
            bottom: 20px;
            line-height: 1;
            font-size: 14px;
            font-weight: bold;
        }
        main .foot i{
            margin: 0px 10px;
            width: 1px;
            opacity: .2;
        }
        body.active main .foot i{
            opacity: .5;
        }
      
        
        main .palace{
            position: relative;
        }
        .pc main .palace{
            height: 100vh;
        }
        main .palace section{
            transform: translateY(100%);
            transition:transform .65s cubic-bezier(.23,1,.32,1),filter .7s linear;
        }
        main .palace section:last-child .hvc{
            top:auto;
            bottom: 20px;
            transform: translateX(-50%);
            line-height: 1;
            font-size: 14px;
            width: 100%;
            text-align: center;
        }
        main .palace section:last-child .hvc p{
            display: inline-block;
        }
        main .palace section:last-child .hvc p + p{
            margin-left: 15px;
        }
        .mobileDevice main .palace section{
            height: 100vh;
            position: relative;
        }
        .mobileDevice main .rottLtr,
        .mobileDevice main .squares,
        .mobileDevice main .rttIcon{
            height: 70vh !important;
        }
        .mobileDevice main .palace section,
        main .palace section.active{
            transform: translateY(0%);
            z-index: 3;
        }
        main .palace section.leave{
            transform:translateY(-43%) scale(1.15);
            filter:grayscale(80%)
        }
        body.active main.index .palace section.g1,
        body.active main.index .palace section.g3,
        body.active main.index .palace section.g4{
            background-color: #000;
        }
        
        main .palace .rttIcon{
            display: block;
        }

       
        
        main .control1 p:hover img:last-child,
        body.active main .control1 p img:last-child,
        body.active main .control1 p:hover img:first-child,
        body.active main .rottLtr .box .row .inner .hvc img:last-child,
        body.active main .rottLtr .box .logo img:last-child,
        body.active main .rttIcon .row .dc img:last-child,
        body.active main .squares .box .deep img:last-child{
            opacity: 1;
        }
        main .rottLtr .box .row .iv .hvc,
        main .control1 p:hover img,
        body.active main .control1 p img,
        body.active main .control1 p:hover img,
        body.active main .rottLtr .box .logo img,
        body.active main .rttIcon .row .dc img,
        body.active main .rottLtr .box .row .inner .hvc img,
        body.active main .squares .box .deep img{
            opacity: 0;
        }
       

        main .rottLtr .box{
            padding: 5.2vh;
            white-space: nowrap;
        }
        main .rottLtr .box .row .iv{
            width: 20px;
            margin-left: 80px;
            position: relative;
        }
        main .rottLtr .box .row .iv:first-child{
            margin-left: 0px;
        }
        main .rottLtr .box .row .inner>*{
            transition: .5s opacity;
        }
        main .rottLtr .box .row .inner:hover>img{
            opacity: 0 !important;
        }
        main .rottLtr .box .row .inner:hover .hvc{
            opacity: 1 !important;
        }
        main .rottLtr .box .row .inner .hvc,
        main .rottLtr .box .logo{
            width: 36px;
        }
        main .rottLtr .box .row .inner .hvc img{
            transition: initial;
        }
        main .rottLtr .box .row + .row{
            margin-top: 4.4vh;
        }
        main .rottLtr .box .logo{
            position: absolute;
            bottom: 100%;
            left: calc(50% - 18px);
        }
        main .rottLtr .box .logo img{
            transition: transform .12s linear;
        }

        main .squares .box{
            max-width: 950px;
            width: calc(100% - 50px);
        }
        main .squares .box>.mid{
            animation: selfMove 8s ease infinite;
        }
        @keyframes selfMove{
            0%,25%,50%,75%,100%{
                transform: translate(0%,0%);
            }12.5%{
                transform: translate(0%,18%);
            }37.5%{
                transform: translate(-24%,0%);
            }62.5%{
                transform: translate(0%,-18%);
            }87.5%{
                transform: translate(24%,0%);
            }
        }
        main .squares .box .mid::before{
            padding-bottom: 63.5%;
        }
        main .squares .box .inner{
            border: 2px solid #000;
            width: 60%;
        }
        @keyframes sqrScale1{
            0%,25%,50%,75%,100%{
                width: 60%;top: 50%;
            }12.5%,37.5%,62.5%,87.5%{
                width: 100%;top: 50%;
            }
        }
        @keyframes sqrScale2{
            0%,25%,50%,75%,100%{
                width: 60%;top: 50%;left: 50%;
            }12.5%{
                width: 90%;top: 45%;left: 50%;
            }37.5%{
                width: 90%;left: 55%;top: 50%;
            }62.5%{
                width: 90%;left: 50%;top: 55%;
            }87.5%{
                width: 90%;left: 45%;top: 50%;
            }
        }
        @keyframes sqrScale3{
            0%,25%,50%,75%,100%{
                width: 60%;top: 50%;left: 50%;
            }12.5%{
                width: 80%;top: 40%;left: 50%;
            }37.5%{
                width: 80%;left: 60%;top: 50%;
            }62.5%{
                width: 80%;left: 50%;top: 60%;
            }87.5%{
                width: 80%;left: 40%;top: 50%;
            }
        }
        @keyframes sqrScale4{
            0%,25%,50%,75%,100%{
                width: 60%;top: 50%;left: 50%;
            }12.5%{
                width: 70%;top: 35%;left: 50%;
            }37.5%{
                width: 70%;left: 65%;top: 50%;
            }62.5%{
                width: 70%;left: 50%;top: 65%;
            }87.5%{
                width: 70%;left: 35%;top: 50%;
            }
        }
        @keyframes sqrScale5{
            0%,25%,50%,75%,100%{
                width: 60%;top: 50%;left: 50%;
            }12.5%{
                width: 65%;top: 32.5%;left: 50%;
            }37.5%{
                width: 65%;left: 67.5%;top: 50%;
            }62.5%{
                width: 65%;left: 50%;top: 67.5%;
            }87.5%{
                width: 65%;left: 32.5%;top: 50%;
            }
        }
        main .squares .box .b1{
            animation: sqrScale1 8s ease infinite;
        }
        main .squares .box .b2{
            animation: sqrScale2 8s ease infinite;
        }
        main .squares .box .b3{
            animation: sqrScale3 8s ease infinite;
        }
        main .squares .box .b4{
            animation: sqrScale4 8s ease infinite;
        }
        main .squares .box .b5{
            animation: sqrScale5 8s ease infinite;
        }
        
        main .squares .box .deep{
            width: 33%;
            max-width: 310px;
        }
        main .squares .box .deep .mid::before{
            padding-bottom: 100%;
        }
        main .squares .box .deep .dc{
            width: 95%;
        }
        
        main .rttIcon .row{
            flex-wrap: nowrap;
            white-space: nowrap;
            margin-top: 16px;
            
        }
        main .rttIcon .row:first-child{
            margin-top: 0px;
        }
        main .rttIcon .row .item{
            margin-left: 15px;
            width: 32px;
        }
        main .rttIcon .row .dc{
            transition: .8s transform linear;
            flex-shrink: 0;
        }
        main .rttIcon .row .dc.scale img{
            transform: scale(.4);
            transition-duration: 2s;
        }
        main .rttIcon .row .item:first-child{
            margin-left: 0px;
        }
        main .rttIcon .row .dc img{
            transition: transform linear 1.2s;
        }

     

        @media(max-width:1600px){
            main .rottLtr .box .row .iv{
                margin-left: 64px;
            }
        }

        @media(max-width:1200px){
            main .control{
                height: 200px;
            }

            main .rottLtr .box .row .iv{
                width: 16px;
                margin-left: 50px;
            }
            main .rottLtr .box .row + .row{
                margin-top: 32px;
            }

            main .rttIcon .row{
                margin-top: 14px;
            }
            main .rttIcon .row .item{
                margin-left: 12px;
                width: 26px;
            }
        }

        @media(max-width:1024px){
            main .tpLft{
                top: 140px;
            }
            main .control{
                height: 170px;
            }

            main .rottLtr .box{
                padding: 4vh;
            }
            main .rottLtr .box .row .iv{
                width: 14px;
                margin-left: 40px;
            }
            main .rottLtr .box .row + .row{
                margin-top: 26px;
            }
            main .rottLtr .box .row .inner .hvc,
            main .rottLtr .box .logo{
                width: 30px;
            }

            main .rttIcon .row{
                margin-top: 10px;
            }
            main .rttIcon .row .item{
                margin-left: 9px;
                width: 22px;
            }
        }
        
        @media(max-width:767px){
            header .tp{
                padding: 0px calc(6vmin + 40px) 0px 6vmin;
                top: 6vmin;
            }
            main .foot{
                left: 6vmin;
            }
            main .control{
                height: 20vw;
                display: none;
                right: calc(6vmin - 20px);
            }
            main .control p{
                padding: 8px 0;
            }
            header .tp .topic{
                margin: 0 6vmin;
            }
            main .foot{
                flex-wrap: wrap;
                width: 300px;
            }
            main .foot i:nth-child(4n){
                width: 100%;
                margin: 2px 0px;
            }
            
            

            main .tpLft{
                left: 6vmin;
                top: 20vmin;
            }

            main .rottLtr .box{
                padding: 4.9vw;
            }
            main .rottLtr .box .row .iv{
                width: 1.8vw;
                margin-left: 5.2vw;
            }
            main .rottLtr .box .row + .row{
                margin-top: 3.3vw;
            }
            main .rottLtr .box .row .inner .hvc,
            main .rottLtr .box .logo{
                width: 3.9vw;
            }

            main .squares .box .inner{
                border-width: 1px;
            }

            main .palace section:last-child .hvc p{
                display: block;
                margin-left: 0px !important;
            }
            main .palace section:last-child .hvc p + p{
                margin-top: 10px;
            }
        }