@charset "utf-8";
/* CSS Document */



body {
	margin: 0;
	padding: 0;
	display:flex; flex-direction: column;height:100vh;background-color:#000;
	font-family: "微软雅黑", Arial;
	font-size:16px;
	line-height: 1.5; color:#fff;
	width: 100%;
	margin: 0px auto;
	overflow-x: auto;
	position:relative;
}

a {
	color: #333;
	text-decoration: none;
}

a:hover {}

img {
	border: 0;
	display: inline;
	vertical-align: bottom;
	width: auto;
	height: auto;
	max-width: 100%;
}

div,
ul,
li,
dl,
dd,
span,
h1,
h2,
p,
h4,
h3 {
	margin: 0;
	padding: 0;
	list-style: none;
}

.clear {
	clear: both;
}


* {
	box-sizing: border-box;
}

.flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.flex-center-y {
	display: flex;
	align-items: center;
}



/* 首页 */
#app{ display:flex; flex-direction: column; flex:1;}
.bg{ position:absolute; left:0px; top:0px; width:100%; height:100%;object-fit: cover;
 object-position: center center; z-index:-1;opacity:.15;}
.grid{height:100%;width:100%;background-image:linear-gradient(to right,#0f0f10 1px,transparent 1px),linear-gradient(to bottom,#0f0f10 1px,transparent 1px);background-size:1rem 1rem;background-position:center center;position:absolute;z-index:-1;filter:blur(1px);}
#main .p_right .white,#main .p_right .border,#main .p_right .darkBorderBg,#main .p_right .glow{max-height:70px;max-width:314px;height:100%;width:100%;position:absolute;overflow:hidden;z-index:-1;border-radius:12px;filter:blur(3px); left:0px; top:0px;}
#main .p_right .input{background-color:#010201;border:none;box-sizing:border-box;width:100%;height:56px;border-radius:10px;color:white;padding-inline:59px;font-size:18px; }
#poda{display:flex;align-items:center;justify-content:center; flex:1;}
.input::placeholder{color:#c0b9c0;}
.input:focus{outline:none;}
#main:focus-within > #input-mask{display:none;}
#input-mask{pointer-events:none;width:100px;height:20px;position:absolute;background:linear-gradient(90deg,transparent,black);top:18px;left:70px;}
#pink-mask{pointer-events:none;width:30px;height:20px;position:absolute;background:#cf30aa;top:10px;left:5px;filter:blur(20px);opacity:0.8;transition:all 2s;}
#main:hover > #pink-mask{opacity:0;}
#main .p_right .white{max-height:63px;max-width:307px;border-radius:10px;filter:blur(2px);}
#main .p_right .white::before{content:"";z-index:-2;text-align:center;top:50%;left:50%;transform:translate(-50%,-50%) rotate(83deg);position:absolute;width:600px;height:600px;background-repeat:no-repeat;background-position:0 0;filter:brightness(1.4);background-image:conic-gradient(
   rgba(0,0,0,0) 0%,#a099d8,rgba(0,0,0,0) 8%,rgba(0,0,0,0) 50%,#dfa2da,rgba(0,0,0,0) 58%
    );transition:all 2s;}
#main .p_right .border{max-height:59px;max-width:303px;border-radius:11px;filter:blur(0.5px);}
#main .p_right .border::before{content:"";z-index:-2;text-align:center;top:50%;left:50%;transform:translate(-50%,-50%) rotate(70deg);position:absolute;width:600px;height:600px;filter:brightness(1.3);background-repeat:no-repeat;background-position:0 0;background-image:conic-gradient(
   #1c191c,#402fb5 5%,#1c191c 14%,#1c191c 50%,#cf30aa 60%,#1c191c 64%
    );transition:all 2s;}
.darkBorderBg{max-height:65px;max-width:312px;}
.darkBorderBg::before{content:"";z-index:-2;text-align:center;top:50%;left:50%;transform:translate(-50%,-50%) rotate(82deg);position:absolute;width:600px;height:600px;background-repeat:no-repeat;background-position:0 0;background-image:conic-gradient(
   rgba(0,0,0,0),#18116a,rgba(0,0,0,0) 10%,rgba(0,0,0,0) 50%,#6e1b60,rgba(0,0,0,0) 60%
    );transition:all 2s;}
#main .p_right:hover > .darkBorderBg::before{transform:translate(-50%,-50%) rotate(262deg);}
#main .p_right:hover > .glow::before{transform:translate(-50%,-50%) rotate(240deg);}
#main .p_right:hover > .white::before{transform:translate(-50%,-50%) rotate(263deg);}
#main .p_right:hover > .border::before{transform:translate(-50%,-50%) rotate(250deg);}
#main .p_right:hover > .darkBorderBg::before{transform:translate(-50%,-50%) rotate(-98deg);}
#main .p_right:hover > .glow::before{transform:translate(-50%,-50%) rotate(-120deg);}
#main .p_right:hover > .white::before{transform:translate(-50%,-50%) rotate(-97deg);}
#main .p_right:hover > .border::before{transform:translate(-50%,-50%) rotate(-110deg);}
#main .p_right:focus-within > .darkBorderBg::before{transform:translate(-50%,-50%) rotate(442deg);transition:all 4s;}
#main .p_right:focus-within > .glow::before{transform:translate(-50%,-50%) rotate(420deg);transition:all 4s;}
#main .p_right:focus-within > .white::before{transform:translate(-50%,-50%) rotate(443deg);transition:all 4s;}
#main .p_right:focus-within > .border::before{transform:translate(-50%,-50%) rotate(430deg);transition:all 4s;}
#main .p_right .glow{overflow:hidden;filter:blur(30px);opacity:0.4;min-height:150px;width:100%; margin:0px auto; margin-top:-40px;}
#main .p_right .glow:before{content:"";z-index:-2;text-align:center;top:50%;left:50%;transform:translate(-50%,-50%) rotate(60deg);position:absolute;width:999px;height:999px;background-repeat:no-repeat;background-position:0 0;background-image:conic-gradient(
   #000,#402fb5 5%,#000 38%,#000 50%,#cf30aa 60%,#000 87%
    );transition:all 2s;}
	@keyframes rotate{100%{transform:translate(-50%,-50%) rotate(450deg);}}
	@keyframes leftright{0%{transform:translate(0px,0px);opacity:1;}49%{transform:translate(250px,0px);opacity:0;}80%{transform:translate(-40px,0px);opacity:0;}100%{transform:translate(0px,0px);opacity:1;}}
	#filter-icon{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;z-index:2;max-height:40px;max-width:38px;height:100%;width:100%;isolation:isolate;overflow:hidden;border-radius:10px;background:linear-gradient(180deg,#161329,black,#1d1b4b);border:1px solid transparent;}
	.filterBorder{height:42px;width:40px;position:absolute;overflow:hidden;top:7px;right:7px;border-radius:10px;}
	.filterBorder::before{content:"";text-align:center;top:50%;left:50%;transform:translate(-50%,-50%) rotate(90deg);position:absolute;width:600px;height:600px;background-repeat:no-repeat;background-position:0 0;filter:brightness(1.35);background-image:conic-gradient(
   rgba(0,0,0,0),#3d3a4f,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 50%,#3d3a4f,rgba(0,0,0,0) 100%
    );animation:rotate 4s linear infinite;}
	#main { position:relative;}
	#main .box{ display:flex; align-items: center; margin:0px auto;  justify-content: center;}
	#main .box .txt{  margin-right:10px;}
	#main .p_right{position:relative; flex:1; max-width:400px;}
	#search-icon{position:absolute;left:20px;top:15px;}
	.copyright{ margin-bottom:20px; text-align:center; padding:0px 2%; font-size:14px;}
	.copyright a{ color:#fff;}
	#main .pic{ max-width:550px; width:100%; margin:0px auto; margin-bottom:30px;}
.music{ position:absolute; width:20px; right:2%; top:2%; cursor:pointer;-webkit-filter: drop-shadow(0px 0px 3px #999);
  filter: drop-shadow(0px 0px 3px #999); z-index:10}
  
  #bgsound{ display:none;}
.animated {
	-webkit-animation-duration: 5s;
	animation-duration: 5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
}
.rotate {
	-webkit-animation-name: rotate;
	animation-name: rotate;
}
@keyframes rotate {
 0% {
 transform:rotate(0deg);
 -webkit-transform:rotate(0deg);
}
 100% {
 transform:rotate(360deg);
 -webkit-transform:rotate(360deg);
}
}
 @-webkit-keyframes rotate {
 0% {
 transform:rotate(0deg);
 -webkit-transform:rotate(0deg);
}
 100% {
 transform:rotate(360deg);
 -webkit-transform:rotate(360deg);
}
}
@media screen and (max-width: 1200px) {
	
}
@media screen and (max-width: 768px) {
	#main .box{ flex-direction: column;align-items:flex-start; }
	#main .box .txt{ margin-bottom:15px;}
	#main { padding:0px 6%;}
	#main .p_right{ width:100%;}
}


.music_chico{display: flex;
    align-items: center;
    justify-content: center; flex-wrap: wrap; margin:30px auto 20px;}

@-webkit-keyframes wipe {
    0% {
        -webkit-mask-position: 200% center;
                mask-position: 200% center;
    }
    100% {
        -webkit-mask-position: 0% center;
                mask-position: 0% center;
    }
}

@keyframes wipe {
    0% {
        -webkit-mask-position: 200% center;
                mask-position: 200% center;
    }
    100% {
        -webkit-mask-position: 0% center;
                mask-position: 0% center;
    }
}
.music_chico button,.music_chico .textShine{ margin:5px 5px;padding:0px 15px;
    position: relative;
    isolation: isolate;
    box-shadow: 0 2px 3px 1px hsl(222deg 50% 20% / 50%);
    outline: none;
    border-radius: 5px; border:1px #2d1e90 solid;background: linear-gradient(180deg, #161329, black, #1d1b4b); color:#fff; font-size:16px; height:40px; line-height:normal; cursor: pointer;}
.music_chico button.active,.music_chico .textShine.active  {
   
    font-weight: 600;    
    scale: 1;
    text-transform: normal;
}
.music_chico .textShine{ display: flex; align-items: center;justify-content: center;}

.shimmer {
    position: absolute;
    inset: -40px;
    border-radius: inherit;
    mix-blend-mode: color-dodge;
    mix-blend-mode: plus-lighter;
    pointer-events: none;
	display:none;
}
.music_chico button.active .shimmer { display:block;}
.shimmer::before,
.shimmer::after {
    transition: all 0.5s ease;
    opacity: 0;
    content: "";
    border-radius: inherit;
    position: absolute;
    inset: 40px;
}
.shimmer::before {
    box-shadow: 0 0 2px 1px hsl(213deg 20% 95%),
        0 0 5px 2px hsl(213deg 20% 80%),
        0 0 7px 4px hsl(248deg 40% 60%),
        0 0 15px 3px hsl(248deg 20% 40%);
    z-index: -1;
}
.shimmer::after {
    box-shadow: inset 0 0 0 1px hsl(248deg 70% 95%),
        inset 0 0 3px 1px hsl(248deg 100% 80%),
        inset 0 0 9px 1px hsl(248deg 100% 70%);
    z-index: 2;
}
button:not([disabled])[data-effect=wave] .shimmer {
    -webkit-mask-image: linear-gradient(
        90deg, transparent 15%, black 45%, black 55%, transparent 85%
    );
            mask-image: linear-gradient(
        90deg, transparent 15%, black 45%, black 55%, transparent 85%
    );
    -webkit-mask-size: 200% 200%;
            mask-size: 200% 200%;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-animation: wipe 3s linear infinite both -0.5s;
            animation: wipe 3s linear infinite both -0.5s;
}
button:not([disabled]) .shimmer::before, button:not([disabled]) .shimmer::after{opacity: 1;}

.music_chico button.active:hover:not(:active):not([disabled]){    scale: 1.1;
    transition-duration: calc(1.33s* 0.5);}
	
.online{ position: fixed; right:0px; bottom:7%;z-index:9999;}
.online ul li .icon{box-shadow: 0 2px 3px 1px hsl(222deg 50% 20% / 50%);
    outline: none; width:40px; height:40px;
    border-radius:50%;
    border: 1px #2d1e90 solid;
    background: linear-gradient(180deg, #161329, black, #1d1b4b);display: flex;
    align-items: center;
    justify-content: center; cursor:pointer;}
.online ul li .icon img{ width:25px; height:auto;}
.online ul li{ margin:10px 0px; position:relative;}
.online ul li .content{ position:absolute; right:100px; background-color:#fff; text-align:center; border-radius:6px; color:#333; font-size:18px; padding:5px 10px; top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%); width:110px;transition: all .3s ease;-webkit-transition: all .3s ease;opacity:0;visibility:hidden}
.online ul li .content img{ width:100px; height:auto;}
.online ul li .content:before{ content:""; position:absolute;border: 6px solid transparent;border-left: 6px solid #fff; right:-12px;top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);}
.online ul li .content.no1{ width:160px;}
.online ul li:hover .content{opacity:1;visibility: visible; right:48px;visibility: visible;}
	
@media screen and (max-width: 768px) {
.music_chico button{ font-size:14px; height:35px;}
}