.vid-box{width: 100%;
    height: calc(100vh - 0px);
    position: relative;
    display: block;
    overflow: hidden;}
.vid-box video{
    width: 100%;
    height: calc(100vh - 0px);
    object-fit: cover;
    position: relative;
    z-index: 1;
    }
.media-box{
    position: absolute;
    width: 100%;
    text-align: center;z-index: 999999;
    }
.media-action{color: #fff !important;
    font-size: 3em;
    position: absolute;
    width: 100%;
    text-align: center;
    opacity: 0;
  color: transparent;
  text-shadow: 0 0 15px #666;
  transition: text-shadow 2s cubic-bezier(0, 1, 0, 1);
  -webkit-transition: text-shadow 2s cubic-bezier(0, 1, 0, 1);
  -moz-transition: text-shadow 2s cubic-bezier(0, 1, 0, 1);
  -o-transition: text-shadow 2s cubic-bezier(0, 1, 0, 1);
}

.media1{
animation: mediaA 3s linear 1s 1;
/* Firefox: */
-moz-animation: mediaA 3s linear 1s 1;
/* Safari 和 Chrome: */
-webkit-animation: mediaA 3s linear 1s 1;
/* Opera: */
-o-animation: mediaA 3s linear 1s 1;
}
@keyframes mediaA
{
0%   {opacity: 0; text-shadow: 0 0 15px #666;}
50% {opacity: 1; text-shadow: 0 0 0 #666;}
80% {opacity: 1; text-shadow: 0 0 0 #666;}
100%   {opacity: 0; text-shadow: 0 0 15px #666;}
}
.media2{
animation: mediaB 3s linear 5s 1;
/* Firefox: */
-moz-animation: mediaB 3s linear 5s 1;
/* Safari 和 Chrome: */
-webkit-animation: mediaB 3s linear 5s 1;
/* Opera: */
-o-animation: mediaB 3s linear 5s 1;
}
@keyframes mediaB
{
0%   {opacity: 0; text-shadow: 0 0 15px #666;}
15% {opacity: 1; text-shadow: 0 0 0 #666;}
80% {opacity: 1; text-shadow: 0 0 0 #666;}
100%   {opacity: 0; text-shadow: 0 0 15px #666;}
}
.media3{
animation: mediaC 3s linear 9s 1;
/* Firefox: */
-moz-animation: mediaC 3s linear 9s 1;
/* Safari 和 Chrome: */
-webkit-animation: mediaC 3s linear 9s 1;
/* Opera: */
-o-animation: mediaC 3s linear 9s 1;
}
@keyframes mediaC
{
0%   {opacity: 0; text-shadow: 0 0 15px #666;}
15% {opacity: 1; text-shadow: 0 0 0 #666;}
80% {opacity: 1; text-shadow: 0 0 0 #666;}
100%   {opacity: 0; text-shadow: 0 0 15px #666;}
}
.media4{
animation: mediaD 3s linear 13s 1;
/* Firefox: */
-moz-animation: mediaD 3s linear 13s 1;
/* Safari 和 Chrome: */
-webkit-animation: mediaD 3s linear 13s 1;
/* Opera: */
-o-animation: mediaD 3s linear 13s 1;
}
@keyframes mediaD
{
0%   {opacity: 0; text-shadow: 0 0 15px #666;}
15% {opacity: 1; text-shadow: 0 0 0 #666;}
80% {opacity: 1; text-shadow: 0 0 0 #666;}
100%   {opacity: 0; text-shadow: 0 0 15px #666;}
}
.media5{
animation: mediaE 3s linear 18s 1;
/* Firefox: */
-moz-animation: mediaE 3s linear 18s 1;
/* Safari 和 Chrome: */
-webkit-animation: mediaE 3s linear 18s 1;
/* Opera: */
-o-animation: mediaE 3s linear 18s 1;
}
@keyframes mediaE
{
0%   {opacity: 0; text-shadow: 0 0 15px #666;}
15% {opacity: 1; text-shadow: 0 0 0 #666;}
80% {opacity: 1; text-shadow: 0 0 0 #666;}
100%   {opacity: 0; text-shadow: 0 0 15px #666;}
}

.kj-bg{background: url(../images/kj.webp);background-size: cover;background-position: center;}
.kj-bt{
    font-size: 2.5em;text-transform:uppercase;}
.kj-bt span{font-size: 0.7em;
    font-weight: 100;
    letter-spacing: 6px;}
.kg-wa{
  position: absolute;
    z-index: 2;
    top: 30%;
    left: 16%;
    text-align: left;
    width: 50%;
}

.c4d-ae-wa p,.qd-wa p,.video-wa p,.kg-wa p{
  margin-top: 5%;
    line-height: 38px;
}
.video-img{
    border-radius: 50%;
    position: absolute;
    right: 37%;
    width: 50%;
    top: 25%;
    z-index: 1;
  }

.Y1{position: absolute;
    right: -46%;
    width: 112%;
    opacity: 0.4;
    -webkit-animation: spin 100s linear 1s 5 alternate;
    animation: spin 100s linear infinite;
  }
@-webkit-keyframes spin {
                from {
                    -webkit-transform: rotate(0deg);
                }
                to {
                    -webkit-transform: rotate(360deg);
                }
            }
            
            @keyframes spin {
                from {
                    transform: rotate(0deg);
                }
                to {
                    transform: rotate(360deg);
                }
            }
.Y2{position: absolute;
    width: 80%;
    top: 15%;
    opacity: 0.4;
    -webkit-animation: spin-tow 100s linear 1s 5 alternate;
    animation: spin-tow 100s linear infinite;
  }
@-webkit-keyframes spin-tow {
                from {
                    -webkit-transform: rotate(360deg);
                }
                to {
                    -webkit-transform: rotate(0deg);
                }
            }
            
            @keyframes spin-tow {
                from {
                    transform: rotate(360deg);
                }
                to {
                    transform: rotate(0deg);
                }
            }

.video-wa{
    position: absolute;
    z-index: 2;
    top: 37%;
    right: 9%;
    text-align: left;
    width: 50%;
}

.qd-wa{
  position: absolute;
    z-index: 2;
    top: 37%;
    text-align: left;
    width: 50%;
    left: 13%;
}
.c4d-ae-wa{
  position: absolute;
    z-index: 2;
    top: 37%;
    text-align: left;
    width: 50%;
    left: 13%;
}
.arri{opacity: 0.4;
    position: absolute;
    top: 10%;
    width: 100%;
    left: 0;}

.hd-kt{
    width: 82%;
    position: absolute;
    right: 0%;
    top: 25%;
}
#main-panel{opacity: 0.2;}
canvas {
  background-color: #fff;
  display: block;
  margin: 0 auto;
  position: absolute;
    top: 0;
    
}
#canvaskj{opacity: 1;}

#canvaspm{opacity: 0.5;}
.c4-ae-bg{background: url(../images/1_0035.jpg) !important;background-size: cover !important;
    background-position-x: 35% !important;}
.xcgl{    background: url(../images/xcglbg.jpg) !important;
    background-size: cover !important;}
.xcgl-box{width: 56%;
    background: rgb(255 255 255 / 57%);
    transform: skewX(45deg);
    margin-left: -43%;}

.xcgl-box .video-wa{transform: skewX(-45deg);right: 0;
    left: 30%;}
.dddx-bg{width: 100%; position: absolute;}
.xcglbg{height: 100%;
    position: absolute;
    right: 0;}
.gggx-img{position: absolute;
    width: 28%;
    top: 25%;
    z-index: 1;
    left: 19%;}
.gggx-wa{right: 0% !important;}























/*口述脸谱*/
main { 
  display: flex; 
  align-items: center; 
  justify-content: center;  
  transform: rotateY(180deg);
  position: absolute;
  top: 23%;
}

container {
  width: 900px; height: 600px;
  overflow: hidden;
  -webkit-transform: scale(.8);
          transform: scale(.8);
}

.manp {
  margin: 0;
  word-break: break-all;
  text-align: right;
  line-height: 1.1;
  font-size: 10px;
  color: #F0FFF3;
  --offset: 50;
  -webkit-mask: linear-gradient(to left, #fff, transparent calc(var(--offset) * 1%));
          mask: linear-gradient(to left, #fff, transparent calc(var(--offset) * 1%));
}

.shape {
  width: 400px; height: 600px;
  float: right;
  shape-outside: polygon(
    0.25% 2px, 99.94% 0.27%, 99.75% 100%, 19.87% 100.03%, 0 100%, 30.61% 100.07%, 
    37.38% 99.82%, 44.21% 99.38%, 50.92% 99.34%, 71.39% 98.43%, 76.61% 98.79%, 
    82.65% 97.6%, 85.9% 95.73%, 90.12% 93.85%, 88.45% 89.91%, 87.41% 87.1%, 
    85.48% 85.09%, 84.96% 82.33%, 88.66% 81.41%, 90.55% 79.29%, 91.75% 77.23%, 
    91.23% 75.11%, 88.48% 73.75%, 90.93% 72.26%, 92.34% 70.16%, 91.59% 67.66%, 
    89.87% 64.91%, 87.01% 63.42%, 89.87% 62.01%, 93.04% 60.71%, 96.53% 58.57%, 
    97.8% 55.26%, 95.36% 53.2%, 91.46% 51.56%, 86.6% 49.21%, 83.43% 47%, 
    79.27% 44.12%, 77.05% 40.66%, 75.51% 37.07%, 75.49% 33.04%, 76.3% 28.93%, 
    75.99% 25.46%, 74.57% 22.25%, 72.88% 18.96%, 69.97% 15.51%, 66.59% 12.23%, 
    62.29% 9.2%, 57.33% 7.06%, 52.77% 5.2%, 46.55% 3.55%, 38.59% 1.5%, 27.73% 0.92%
  );
}

.line-box{width: 18%;
    height: 6px;
    background: red;
    margin-top: 2%;
}
.more-box{display: inline-block;
    background: #000;
    color: #fff;
    padding: 8px 12%;
    font-size: 0.7em;
    border-radius: 7px;
    margin-top: 5%;}