/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */

@font-face {
  font-family: "PingFang Regular";src: url("../font/PingFang Regular.otf");
  font-display: swap;
}
html {margin:0;padding:0;border:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; -webkit-tap-highlight-color:rgba(0,0,0,0); font-size: 62.5%;font-family: Arial, Helvetica, sans-serif;
}
body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,q,dl,dt,dd,ol,ul,li,fieldset,form,legend,caption,tbody,tfoot,thead,article,aside,dialog,figure,footer,header,hgroup,nav,section {margin:0;padding:0;border:0;font-size:14px;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,dialog,footer,header,hgroup,menu,nav,section {display:block}
body {font-size:14px;color:#333;background:#fff;font-family: "PingFang Regular",Arial, Helvetica, sans-serif;
}
img {border:0;vertical-align:bottom}
::-webkit-input-placeholder {color:#666}
:-moz-placeholder {color:#666}
::-moz-placeholder {color:#666}
:-ms-input-placeholder {color:#666}
* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
*:before,*:after {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
button::-moz-focus-inner,input::-moz-focus-inner {padding:0;border:0}
textarea {overflow:auto}
input:focus,textarea:focus,button:focus,select:focus {outline:0}
input::-ms-clear {display:none}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {display:block}
audio,canvas,progress,video {display:inline-block;vertical-align:baseline}
audio:not([controls]) {display:none;height:0}
[hidden],template {display:none}
a {background:transparent}
a:active,a:hover {outline:0}
a:focus {outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
abbr[title] {border-bottom:1px dotted}
b,strong {font-weight:bold}
dfn {font-style:italic}
mark {color:#121212;background:#ff0}
small {font-size:80%}
sub,sup {position:relative;font-size:75%;line-height:0;vertical-align:baseline}
sup {top:-.5em}
sub {bottom:-.25em}
svg:not(:root) {overflow:hidden}
figure {margin:1em 40px}
hr {height:0;-moz-box-sizing:content-box;box-sizing:content-box}
pre {overflow:auto}
code,kbd,pre,samp {font-family:monospace,monospace;font-size:1em}
button,input,optgroup,select,textarea {margin:0;font:inherit}
button {overflow:visible}
button,select {text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled] {cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner {padding:0;border:0}
input {line-height:normal}
input[type="checkbox"],input[type="radio"] {box-sizing:border-box;padding:0}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {height:auto}
input[type="search"] {-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance:none}
fieldset {padding:.35em .625em .75em;margin:0 2px;border:1px solid #c0c0c0}
legend {padding:0;border:0}
optgroup {font-weight:bold}
table {border-spacing:0;border-collapse:collapse}
td,th {padding:0}

.line {margin:0;padding:0}
.w-100{
  width: 100vw;
}
.h-100{
  height: 100vh;
}
.overflow-hidden{
  overflow: hidden;
}
.p-relative{
  position: relative;
}
.mingyan-img{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.mingyan-img img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mingyan-text{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90%;
  margin: 0 auto;
}
.mingyan-text div,
.mingyan-text p{
  letter-spacing: 2px;
  font-size: 2.4rem;
  color: #fff;
  max-width: 800px;
  
}
.mingyan-text div{
  padding: 30px 30px;
  border-radius: 8px;
}
@media (max-width: 769px){
    .mingyan-text div{
        padding: 30px 0;
        max-width: calc(100% - 60px);
    }
    .danceWord-s5{
        width: 100%;
        overflow: hidden;
    }
}
.drop {
   background: rgba(255,255,255,0.1)!important;
   border-radius: 10px;
   border: 1px solid rgba(255,255,255,0.1)!important;
   position: absolute;
   backdrop-filter: blur(14px)!important;
  -webkit-backdrop-filter: blur(14px)!important;
   display: block;
   margin: 0 auto;
   padding: 0!important;
}
.drop2 {
    width: 40px;
    height: 40px;
    top: -30px;
    left: -80%;
    right: 0;
    z-index: 4;
}

.drop3 {
    width: 60px;
    height: 60px;
    top: 90%;
    right: 30px;
    z-index: 3;
}

.drop4 {
   width: 40px!important;
   height: 40px!important;
   border-radius: 50%!important;
   top: -55px;
   right: 20px;
}

.drop5 {
   width: 80px!important;
   height: 80px!important;
   border-radius: 10px!important;
   top: -20px;
   left: 45%;
   z-index: -1;
}
.music-icon {
            width: 30px;
            transition: transform 0.5s ease;
            transform-origin: center;
            /* 初始旋转角度（如果需要的话，可以设置为0deg或任何你想要的初始角度） */
            /*transform: rotate(0deg);*/
        }
[class^="danceWord"]{
  word-break:break-all;
  white-space:pre-wrap;
}
[class^="danceWord"] span{
  display:inline-block;
  opacity:0;
    white-space:pre-wrap;
}
.danceWord-s5 .ele{
		-webkit-animation:a5 .5s ease-out forwards;
		-ms-animation:a5 .5s ease-out forwards;
		-moz-animation:a5 .5s ease-out forwards;
		-o-animation:a5 .5s ease-out forwards;
		-ms-animation:a5 .5s ease-out forwards;
	}
  @keyframes a5{
		0%{
			opacity:1;
			-webkit-transform:rotateY(-180deg);
			-ms-transform:rotateY(-180deg);
			-moz-transform:rotateY(-180deg);
			-o-transform:rotateY(-180deg);
			transform:rotateY(-180deg);
		}
		
		100%{
			opacity:1;
			-webkit-transform:rotateY(0deg);
			-ms-transform:rotateY(0deg);
			-moz-transform:rotateY(0deg);
			-o-transform:rotateY(0deg);
			transform:rotateY(0deg);
		}
	}
	@-webkit-keyframes a5{
		0%{
			opacity:1;
			-webkit-transform:rotateY(-180deg);
			-ms-transform:rotateY(-180deg);
			-moz-transform:rotateY(-180deg);
			-o-transform:rotateY(-180deg);
			transform:rotateY(-180deg);
		}
		
		100%{
			opacity:1;
			-webkit-transform:rotateY(0deg);
			-ms-transform:rotateY(0deg);
			-moz-transform:rotateY(0deg);
			-o-transform:rotateY(0deg);
			transform:rotateY(0deg);
		}
	}
	@-ms-keyframes a5{
		0%{
			opacity:1;
			-webkit-transform:rotateY(-180deg);
			-ms-transform:rotateY(-180deg);
			-moz-transform:rotateY(-180deg);
			-o-transform:rotateY(-180deg);
			transform:rotateY(-180deg);
		}
		
		100%{
			opacity:1;
			-webkit-transform:rotateY(0deg);
			-ms-transform:rotateY(0deg);
			-moz-transform:rotateY(0deg);
			-o-transform:rotateY(0deg);
			transform:rotateY(0deg);
		}
	}
	@-moz-keyframes a5{
		0%{
			opacity:1;
			-webkit-transform:rotateY(-180deg);
			-ms-transform:rotateY(-180deg);
			-moz-transform:rotateY(-180deg);
			-o-transform:rotateY(-180deg);
			transform:rotateY(-180deg);
		}
		
		100%{
			opacity:1;
			-webkit-transform:rotateY(0deg);
			-ms-transform:rotateY(0deg);
			-moz-transform:rotateY(0deg);
			-o-transform:rotateY(0deg);
			transform:rotateY(0deg);
		}
	}
	@-o-keyframes a5{
		0%{
			opacity:1;
			-webkit-transform:rotateY(-180deg);
			-ms-transform:rotateY(-180deg);
			-moz-transform:rotateY(-180deg);
			-o-transform:rotateY(-180deg);
			transform:rotateY(-180deg);
		}
		
		100%{
			opacity:1;
			-webkit-transform:rotateY(0deg);
			-ms-transform:rotateY(0deg);
			-moz-transform:rotateY(0deg);
			-o-transform:rotateY(0deg);
			transform:rotateY(0deg);
		}
	}
audio {

    display: inline;

    float: left;

}

.music {

    width: 70px;

    height: 70px;

    text-align: center;

    /*line-height: 80px;*/

/*    background: url(../images/off.png) ;*/

    background-size: 100%;

    position: fixed;

    top: 30px;

    right: 30px;

    z-index: 100;

    float: left;

}

.music-off {

/*    background: url(../images/on.png) ;*/

    background-size: 100%;

}

.music-ani {

    animation:musicRound 1s infinite linear;

    -webkit-animation:musicRound 1s infinite linear;



}

@keyframes musicRound {

    0% {

        transform: rotate(0deg)

    }

    100% {

        transform:rotate(360deg);

    }

}

@-webkit-keyframes musicRound {

    0% {

        -webkit-transform: rotate(0deg)

    }

    100% {

        -webkit-transform:rotate(360deg);

    }

}



.arrow {

    position: fixed;

    z-index: 100;

    width: 96px;

    height: 96px;

    background: url(../ke01_img/up.png);

    background-size:100%; 

    bottom: 30px;

    left: 50%;

    text-align: center;

    font-size: 90px;

    color: red;

    margin-left: -50px;

    animation: arrowUp 3s infinite ease-in;

    -webkit-animation: arrowUp 2s infinite ease-in;

}



@keyframes arrowUp {

    0% {

        transform:translateY(42px);

        opacity: 0;

    }

    60% {

        transform:translateY(12px);

        opacity: 1;

    }

    100% {

        transform:translateY(0px);

        opacity: 0;

    }

}

@-webkit-keyframes arrowUp {

    0% {

        -webkit-transform:translateY(20px);

        opacity: 0;

    }

    60% {

        -webkit-transform:translateY(12px);

        opacity: 1;

    }

    100% {

        -webkit-transform:translateY(0px);

        opacity: 0;

    }

}