button{
 position: absolute;
 border: 0px, solid, red;
 /* margin: 20px; */
}

button svg{
 width: 40px;
 height: 40px;
 pointer-events: none;
}

.custom-btn{
 display: inline-block;
 align-items: center;
 justify-content: center;
 padding: 0px 25px;
 width: 130px;
 height: 40px;
 border-radius: 3px;
 background: transparent;
 box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,0.5),
 7px 7px 20px 0px rgba(0,0,0,0.1),
 4px 4px 5px 0px rgba(0,0,0,0.1);
 color: #ffffff;
 text-align: center;
 font-weight: 300;
 font-size: 18px;
 font-family: "Lato", sans-serif;
/*  cursor: pointer; */
 transition: all 0.3s ease;
}

/* 1 */
.btn-1{
 border: none;
 background: rgb(6,14,131);
 background: linear-gradient(0deg, rgba(6,14,131,1) 0%, rgba(12,25,180,1) 100%);
}
.btn-1:hover{
 background: rgb(0,3,255);
 background: linear-gradient(0deg, rgba(0,3,255,1) 0%, rgba(2,126,251,1) 100%);
}

/* 2 */
.btn-2{
 border: none;
 background: linear-gradient(0deg, rgb(9, 144, 240) 0%, rgb(5, 162, 240) 100%);
}
.btn-2:before{
 width: 2px;
 height: 0%;
}
.btn-2:hover, .btn-2_checked{
 border: none;
 background: linear-gradient(0deg, rgb(205, 52, 192) 0%, rgb(151, 10, 139) 100%);

/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,0.5),
 -4px -4px 6px 0 rgba(116, 125, 136, 0.5),
 inset -4px -4px 6px 0 rgba(255,255,255,0.2),
 inset 4px 4px 6px 0 rgba(0, 0, 0, 0.4);*/
 font-weight: 700;
}


/* 3 */
.btn-3{
 padding: 0;
 width: 130px;
 height: 40px;
 border: none;
 background: rgb(0,172,238);
 background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
 line-height: 42px;
}
.btn-3 span{
 position: relative;
 display: block;
 width: 100%;
 height: 100%;
}
.btn-3:before, .btn-3:after{
 position: absolute;
 top: 0;
 right: 0;
 background: rgba(2,126,251,1);
 content: "";
 transition: all 0.3s ease;
}
.btn-3:before{
 width: 2px;
 height: 0%;
}
.btn-3:after{
 width: 0%;
 height: 2px;
}
.btn-3:hover{
 background: transparent;
 box-shadow: none;
}
.btn-3:hover:before{
 height: 100%;
}
.btn-3:hover:after{
 width: 100%;
}
.btn-3 span:hover{
 color: rgba(2,126,251,1);
}
.btn-3 span:before, .btn-3 span:after{
 position: absolute;
 bottom: 0;
 left: 0;
 background: rgba(2,126,251,1);
 content: "";
 transition: all 0.3s ease;
}
.btn-3 span:before{
 width: 2px;
 height: 0%;
}
.btn-3 span:after{
 width: 0%;
 height: 2px;
}
.btn-3 span:hover:before{
 height: 100%;
}
.btn-3 span:hover:after{
 width: 100%;
}

/* 4 */
.btn-4{
 padding: 0;
 border: none;
 background-color: #59c5ff;

/*background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);*/
 line-height: 42px;
}
.btn-4:hover{
 background-color: #59c5ff;
 /*background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);*/
}

.btn-4 span{
 position: relative;
 display: block;
 width: 100%;
 height: 100%;
}

.btn-4:before, .btn-4:after{
 position: absolute;
 top: 0;
 right: 0;
 box-shadow: 4px 4px 6px 0 rgba(255,255,255,0.9),
 -4px -4px 6px 0 rgba(116, 125, 136, 0.2),
 inset -4px -4px 6px 0 rgba(255,255,255,0.9),
 inset 4px 4px 6px 0 rgba(116, 125, 136, 0.3);
 content: "";
 transition: all 0.3s ease;
}
.btn-4:before{
 width: 0.1px;
 height: 0%;
}
.btn-4:after{
 width: 0%;
 height: 0.1px;
}
.btn-4:hover:before{
 height: 100%;
}
.btn-4:hover:after{
 width: 100%;
}
.btn-4 span:before, .btn-4 span:after{
 position: absolute;
 bottom: 0;
 left: 0;
 box-shadow: 4px 4px 6px 0 rgba(255,255,255,0.9),
 -4px -4px 6px 0 rgba(116, 125, 136, 0.2),
 inset -4px -4px 6px 0 rgba(255,255,255,0.9),
 inset 4px 4px 6px 0 rgba(116, 125, 136, 0.3);
 content: "";
 transition: all 0.3s ease;
}
.btn-4 span:before{
 width: 0.1px;
 height: 0%;
}
.btn-4 span:after{
 width: 0%;
 height: 0.1px;
}
.btn-4 span:hover:before{
 height: 100%;
}
.btn-4 span:hover:after{
 width: 100%;
}


/* 5 */
.btn-5{
 padding: 0;
 width: 130px;
 height: 40px;
 border: none;
 background: rgb(255,27,0);
 background: linear-gradient(0deg, rgba(255,27,0,1) 0%, rgba(251,75,2,1) 100%);
 line-height: 42px;
}
.btn-5:hover{
 background: transparent;
 box-shadow: none;
 color: #f0094a;
}
.btn-5:before, .btn-5:after{
 position: absolute;
 top: 0;
 right: 0;
 width: 0;
 height: 2px;
 background: #f0094a;
 box-shadow: -1px -1px 5px 0px #ffffff,
 7px 7px 20px 0px #0003,
 4px 4px 5px 0px #0002;
 content: "";
 transition: 400ms ease all;
}
.btn-5:after{
 top: inherit;
 right: inherit;
 bottom: 0;
 left: 0;
}
.btn-5:hover:before, .btn-5:hover:after{
 width: 100%;
 transition: 800ms ease all;
}


/* 6 */
.btn-6{
 padding: 0;
 border: none;
 background: rgb(247,150,192);
 background: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%);
 line-height: 42px;
}
.btn-6 span{
 position: relative;
 display: block;
 width: 100%;
 height: 100%;
}
.btn-6:before, .btn-6:after{
 position: absolute;
 width: 1px;
 height: 0%;
 box-shadow: -1px -1px 20px 0px rgba(255,255,255,1),
 -4px -4px 5px 0px rgba(255,255,255,1),
 7px 7px 20px 0px rgba(0,0,0,0.4),
 4px 4px 5px 0px rgba(0,0,0,0.3);
 content: "";
}
.btn-6:before{
 top: 0;
 right: 0;
 transition: all 500ms ease;
}
.btn-6:after{
 bottom: 0;
 left: 0;
 transition: all 500ms ease;
}
.btn-6:hover{
 background: transparent;
 box-shadow: none;
 color: #76aef1;
}
.btn-6:hover:before{
 height: 100%;
 transition: all 500ms ease;
}
.btn-6:hover:after{
 height: 100%;
 transition: all 500ms ease;
}
.btn-6 span:before, .btn-6 span:after{
 position: absolute;
 box-shadow: -1px -1px 20px 0px rgba(255,255,255,1),
 -4px -4px 5px 0px rgba(255,255,255,1),
 7px 7px 20px 0px rgba(0,0,0,0.4),
 4px 4px 5px 0px rgba(0,0,0,0.3);
 content: "";
}
.btn-6 span:before{
 top: 0;
 left: 0;
 width: 0%;
 height: 0.5px;
 transition: all 500ms ease;
}
.btn-6 span:after{
 right: 0;
 bottom: 0;
 width: 0%;
 height: 0.5px;
 transition: all 500ms ease;
}
.btn-6 span:hover:before{
 width: 100%;
}
.btn-6 span:hover:after{
 width: 100%;
}

/* 7 */
.btn-7{
 padding: 0;
 border: none;
 background: linear-gradient(0deg, rgba(255,151,0,1) 0%, rgba(251,75,2,1) 100%);
 line-height: 42px;
}
.btn-7 span{
 position: relative;
 display: block;
 width: 100%;
 height: 100%;
}
.btn-7:before, .btn-7:after{
 position: absolute;
 right: 0;
 bottom: 0;
 background: rgba(251,75,2,1);
 box-shadow: -7px -7px 20px 0px rgba(255,255,255,0.9),
 -4px -4px 5px 0px rgba(255,255,255,0.9),
 7px 7px 20px 0px rgba(0,0,0,0.2),
 4px 4px 5px 0px rgba(0,0,0,0.3);
 content: "";
 transition: all 0.3s ease;
}
.btn-7:before{
 width: 2px;
 height: 0%;
}
.btn-7:after{
 width: 0%;
 height: 2px;
}
.btn-7:hover{
 background: transparent;
 color: rgba(251,75,2,1);
}
.btn-7:hover:before{
 height: 100%;
}
.btn-7:hover:after{
 width: 100%;
}
.btn-7 span:before, .btn-7 span:after{
 position: absolute;
 top: 0;
 left: 0;
 background: rgba(251,75,2,1);
 box-shadow: -7px -7px 20px 0px rgba(255,255,255,0.9),
 -4px -4px 5px 0px rgba(255,255,255,0.9),
 7px 7px 20px 0px rgba(0,0,0,0.2),
 4px 4px 5px 0px rgba(0,0,0,0.3);
 content: "";
 transition: all 0.3s ease;
}
.btn-7 span:before{
 width: 2px;
 height: 0%;
}
.btn-7 span:after{
 width: 0%;
 height: 2px;
}
.btn-7 span:hover:before{
 height: 100%;
}
.btn-7 span:hover:after{
 width: 100%;
}

/* 8 */
.btn-8{
 padding: 0;
 border: none;
 background-color: #f0ecfc;
 background-image: linear-gradient(315deg, #f0ecfc 0%, #c797eb 74%);
 line-height: 42px;
}
.btn-8 span{
 position: relative;
 display: block;
 width: 100%;
 height: 100%;
}
.btn-8:before, .btn-8:after{
 position: absolute;
 right: 0;
 bottom: 0;
 background: #c797eb;
 content: "";

/*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
 transition: all 0.3s ease;
}
.btn-8:before{
 width: 2px;
 height: 0%;
}
.btn-8:after{
 width: 0%;
 height: 2px;
}
.btn-8:hover:before{
 height: 100%;
}
.btn-8:hover:after{
 width: 100%;
}
.btn-8:hover{
 background: transparent;
}
.btn-8 span:hover{
 color: #c797eb;
}
.btn-8 span:before, .btn-8 span:after{
 position: absolute;
 top: 0;
 left: 0;
 background: #c797eb;
 content: "";

/*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
 transition: all 0.3s ease;
}
.btn-8 span:before{
 width: 2px;
 height: 0%;
}
.btn-8 span:after{
 width: 0%;
 height: 2px;
}
.btn-8 span:hover:before{
 height: 100%;
}
.btn-8 span:hover:after{
 width: 100%;
}


/* 9 */
.btn-9{
 overflow: hidden;
 border: none;
 line-height: 0px;
 transition: all 0.3s ease;
}
.btn-9:after{
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 width: 100%;
 height: 100%;
 background-color: #1fd1f9;
 background-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%);
 content: " ";
 transition: all 0.3s ease;
}
.btn-9:hover{
 background: transparent;
 box-shadow: 4px 4px 6px 0 rgba(255,255,255,0.5),
 -4px -4px 6px 0 rgba(116, 125, 136, 0.2),
 inset -4px -4px 6px 0 rgba(255,255,255,0.5),
 inset 4px 4px 6px 0 rgba(116, 125, 136, 0.3);
 color: #ffffff;
}
.btn-9:hover:after{
 box-shadow: 4px 4px 6px 0 rgba(255,255,255,0.5),
 -4px -4px 6px 0 rgba(116, 125, 136, 0.2),
 inset -4px -4px 6px 0 rgba(255,255,255,0.5),
 inset 4px 4px 6px 0 rgba(116, 125, 136, 0.3);
 -webkit-transform: scale(2) rotate(180deg);
         transform: scale(2) rotate(180deg);
}

/* 10 */
.btn-10{
 overflow: hidden;
 border: none;
 background: rgb(22,9,240);
 background: linear-gradient(0deg, rgba(22,9,240,1) 0%, rgba(49,110,244,1) 100%);
 color: #ffffff;
 transition: all 0.3s ease;
}
.btn-10:after{
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 width: 100%;
 height: 100%;
 content: " ";
 transition: all 0.3s ease;
 -webkit-transform: scale(0.1);
         transform: scale(0.1);
}
.btn-10:hover{
 border: none;
 background: transparent;
 color: #ffffff;
}
.btn-10:hover:after{
 background: rgb(0,3,255);
 background: linear-gradient(0deg, rgba(2,126,251,1) 0%,  rgba(0,3,255,1)100%);
 -webkit-transform: scale(1);
         transform: scale(1);
}

/* 11 */
.btn-11{
 overflow: hidden;
 border: none;
 background: rgb(251,33,117);
 background: linear-gradient(0deg, rgba(251,33,117,1) 0%, rgba(234,76,137,1) 100%);
 color: #ffffff;
}
.btn-11:hover{
 color: #ffffff;
 text-decoration: none;
}
.btn-11:before{
 position: absolute;
 top: -180px;
 left: 0;
 display: inline-block;
 width: 30px;
 height: 100%;
 background-color: #ffffff;
 content: "";
 animation: shiny-btn1 3s ease-in-out infinite;
}
.btn-11:hover{
 opacity: 0.7;
}
.btn-11:active{
 box-shadow: 4px 4px 6px 0 rgba(255,255,255,0.3),
 -4px -4px 6px 0 rgba(116, 125, 136, 0.2),
 inset -4px -4px 6px 0 rgba(255,255,255,0.2),
 inset 4px 4px 6px 0 rgba(0, 0, 0, 0.2);
}

/* 12 */
.btn-12{
 position: relative;
 right: 20px;
 bottom: 20px;
 width: 130px;
 height: 40px;
 border: none;
 box-shadow: none;
 line-height: 42px;

 -webkit-perspective: 230px;
         perspective: 230px;
}
.btn-12 span{
 position: absolute;
 display: block;
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
 margin: 0;
 width: 130px;
 height: 40px;
 border-radius: 5px;
 background: rgb(0,172,238);
 background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
 box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,0.5),
 7px 7px 20px 0px rgba(0,0,0,0.1),
 4px 4px 5px 0px rgba(0,0,0,0.1);
 text-align: center;
 -webkit-transition: all 0.3s;
         transition: all 0.3s;
}
.btn-12 span:nth-child(1){
 box-shadow: -7px -7px 20px 0px #fff9,
 -4px -4px 5px 0px #fff9,
 7px 7px 20px 0px #0002,
 4px 4px 5px 0px #0001;
 -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
         transform: rotateX(90deg);
 -webkit-transform-origin: 50% 50% -20px;
    -moz-transform-origin: 50% 50% -20px;
         transform-origin: 50% 50% -20px;
}
.btn-12 span:nth-child(2){
 -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
         transform: rotateX(0deg);
 -webkit-transform-origin: 50% 50% -20px;
    -moz-transform-origin: 50% 50% -20px;
         transform-origin: 50% 50% -20px;
}
.btn-12:hover span:nth-child(1){
 box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,0.5),
 7px 7px 20px 0px rgba(0,0,0,0.1),
 4px 4px 5px 0px rgba(0,0,0,0.1);
 -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
         transform: rotateX(0deg);
}
.btn-12:hover span:nth-child(2){
 box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,0.5),
 7px 7px 20px 0px rgba(0,0,0,0.1),
 4px 4px 5px 0px rgba(0,0,0,0.1);
 color: transparent;
 -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
         transform: rotateX(-90deg);
}


/* 13 */
.btn-13{
 z-index: 1;
 border: none;
 background-color: #89d8d3;
 background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
}
.btn-13:after{
 position: absolute;
 bottom: 0;
 left: 0;
 z-index: -1;
 width: 100%;
 height: 0;
 border-radius: 5px;
 background-color: #4dccc6;
 background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
 box-shadow: -7px -7px 20px 0px #fff9,
 -4px -4px 5px 0px #fff9,
 7px 7px 20px 0px #0002,
 4px 4px 5px 0px #0001;
 content: "";
 transition: all 0.3s ease;
}
.btn-13:hover{
 color: #ffffff;
}
.btn-13:hover:after{
 top: 0;
 height: 100%;
}
.btn-13:active{
 top: 2px;
}


/* 14 */
.btn-14{
 z-index: 1;
 border: none;
 background: rgb(255,151,0);
}
.btn-14:after{
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 width: 100%;
 height: 0;
 border-radius: 5px;
 background-color: #eaf818;
 background-image: linear-gradient(315deg, #eaf818 0%, #f6fc9c 74%);
 box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,0.5),
 7px 7px 20px 0px rgba(0,0,0,0.1),
 4px 4px 5px 0px rgba(0,0,0,0.1);
 content: "";
 transition: all 0.3s ease;
}
.btn-14:hover{
 color: #000000;
}
.btn-14:hover:after{
 top: auto;
 bottom: 0;
 height: 100%;
}
.btn-14:active{
 top: 2px;
}

/* 15 */
.btn-15{
 z-index: 1;
 border: none;
 background: #0990f0;
}
.btn-15:after{
 position: absolute;
 top: 0;
 right: 0;
 z-index: -1;
 width: 0;
 height: 100%;
 border-radius: 5px;
 background-color: #b621fe;
 box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,0.5),
 7px 7px 20px 0px rgba(0,0,0,0.1),
 4px 4px 5px 0px rgba(0,0,0,0.1);
 content: "";
 transition: all 0.2s ease;
}
.btn-15:hover{
 color: #ffffff;
}
.btn-15:hover:after{
 left: 0;
 width: 100%;
}
.btn-15:active{
 top: 2px;
}


/* 16 */
.btn-16{
 border: none;
 color: #000000;
}
.btn-16:after{
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 width: 0;
 height: 100%;
 box-shadow: -7px -7px 20px 0px #fff9,
 -4px -4px 5px 0px #fff9,
 7px 7px 20px 0px #0002,
 4px 4px 5px 0px #0001;
 content: "";
 transition: all 0.3s ease;
 direction: rtl;
}
.btn-16:hover{
 color: #000000;
}
.btn-16:hover:after{
 right: 0;
 left: auto;
 width: 100%;
}
.btn-16:active{
 top: 2px;
}


/* 17 */
.btn-17{
 position: relative;
 z-index: 1;
 z-index: 1;
 display: inline-block;
 overflow: hidden;
 margin: 40px 50px 40px 0;
 padding: 0 30px;
 border-radius: 3px;
 background: linear-gradient(315deg, #59c5ff 0%, #b621fe 74%);
 box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,0.5),
 7px 7px 20px 0px rgba(0,0,0,0.1),
 4px 4px 5px 0px rgba(0,0,0,0.1);
 color: white;
 text-decoration: none;
 text-transform: uppercase;
 letter-spacing: 4px;
 font-weight: 400;
 transition: color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, transform 0.2s ease;
 transition: color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}

.btn-17::before{
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 width: 100%;
 height: 100%;
 background: linear-gradient(135deg, #59c5ff 0%, #b621fe 74%); /* 镜像方向 */
 content: "";
 opacity: 0; /* 默认不显示 */
 transition: opacity 0.5s ease-in-out;
}

.btn-17:hover::before{
 opacity: 1; /* Hover 时显示镜像背景 */
}

.btn-17:hover{
 box-shadow: 0 0 5px #b621fe,
 0 0 25px #b621fe,
 0 0 50px #b621fe,
 0 0 200px #b621fe;
 color: #f9f9f9;
}

.btn-17::after{
 position: absolute;
 top: -3px;
 right: -3px;
 bottom: -3px;
 left: -3px;
 z-index: -1;
 border-radius: inherit;
 background: linear-gradient(270deg, #59c5ff, #b621fe, #59c5ff);
 background-size: 600% 600%;
 content: "";
 opacity: 0;
 transition: opacity 0.3s ease-in-out;
 animation: Glow 8s ease-in-out infinite;
 pointer-events: none;
}

.btn-17:hover::after{
 opacity: 1;
}

@keyframes Glow{
 0%{
  background-position: 0% 50%;
 }
 100%{
  background-position: 100% 50%;
 }
}



/* 18 */
.btn-18{
 border-color: #59c5ff;
 background-color: #282728c9;
 box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,0.5),
 color： #ffffff;
 transition: all 150ms ease-in-out;
}

.btn-18:hover{
 background-color: #00000000;
 box-shadow: 0 0 10px 0 #b42b27 inset,
 0 0 10px 4px #b42b27;
 color: #b42b27;
 font-weight: 700;
}


/* 19 */
.btn-19{
 border-color: #59c5ff;
 background-color: #282728c9;
 box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,0.5),
 color： #ffffff;
 transition: all 150ms ease-in-out;
}

.btn-19:hover{
 background-color: #00000000;
 box-shadow: 0 0 10px 0 #59c5ff inset,
 0 0 10px 4px #59c5ff;
 color: #59c5ff;
 font-weight: 700;
}


/* 20 */
.btn-20{
 position: absolute;
 --clip: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 70%);
 padding: 0;
 min-width: 50px;
 min-height: 25px;
 outline: transparent;
 --border: 4px;
 border: 0;
 background: transparent;
 color: #f9f9f9;
 text-transform: uppercase;
/*  cursor: pointer; */
 transition: background 0.2s;

 --clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
 --clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
 --clip-one: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
 --clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
 --clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
 --clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
 --clip-two: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
 --label-size: 9px;
 --primary: #59c5ff;
 --primary-end: rgb(9, 155, 240);
 --primary-hue: 0;
 --primary-lightness: 50;
 --primary-start: #59c5ff;
 --shadow-primary: hsl(var(--shadow-primary-hue), 90%, 50%);
 --shadow-primary-hue: 180;
 --shadow-secondary: hsl(var(--shadow-secondary-hue), 90%, 60%);
 --shadow-secondary-hue: 60;
 --shimmy-distance: 5;
}

.btn-20:hover{
 animation: btn-shake-natural 0.5s ease-in-out 2;

 --primary-end: #b621fe;
 --primary-start: #bd47f8;
}

@keyframes btn-shake-natural{
 /* 0%{
  transform: translate(0, 0) rotate(0deg);
 }
 15%{
  transform: translate(-2px, 1px) rotate(-1deg);
 }
 30%{
  transform: translate(1px, -1px) rotate(1deg);
 }
 45%{
  transform: translate(-1px, 2px) rotate(0.5deg);
 }
 60%{
  transform: translate(2px, -2px) rotate(-0.5deg);
 }
 75%{
  transform: translate(-1px, 1px) rotate(1deg);
 }
 90%{
  transform: translate(1px, -1px) rotate(0deg);
 }
 100%{
  transform: translate(0, 0) rotate(0deg);
 } */
}


.btn-20:active{
 --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 0.6%));
}

.btn-20:after, .btn-20:before{
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: -1;
 content: "";

 clip-path: var(--clip);
}

.btn-20:before{
 background: var(--shadow-primary);
 transform: translate(var(--border), 0);
}

.btn-20:after{
 position: absolute;
 z-index: -1;
 background: linear-gradient(0deg, var(--primary-start) 0%, var(--primary-end) 100%);
 content: "";
 transition: background 0.3s ease;

 clip-path: var(--clip);
 inset: 0;
}


.custom-btn2{
 display: inline-block;
 align-items: center;
 justify-content: center;
 padding: 0px 25px;
 width: 130px;
 height: 75px;
 border-radius: 3px;
 background: transparent;
 color: #ffffff;
 text-align: center;
 font-weight: 300;
 font-size: 18px;
 font-family: "Lato", sans-serif;
/*  cursor: pointer; */
 transition: all 0.3s ease;
}




.btn-20_checked{
 position: absolute;
 --clip: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 70%);
 padding: 0;
 min-width: 50px;
 min-height: 25px;
 outline: transparent;
 --border: 4px;
 border: 0;
 background: transparent;
 color: #f9f9f9;
 text-transform: uppercase;
 font-weight: 700;
/*  cursor: pointer; */
 transition: background 0.2s;

 --clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
 --clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
 --clip-one: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
 --clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
 --clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
 --clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
 --clip-two: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
 --label-size: 9px;
 --primary-hue: 0;
 --primary-lightness: 50;
 --shadow-primary: #47f856;
 --shadow-primary-hue: 180;
 --shadow-secondary: hsl(var(--shadow-secondary-hue), 90%, 60%);
 --shadow-secondary-hue: 60;
 --shimmy-distance: 5;
}


.btn-20_checked:active{
 --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 0.6%));
}

.btn-20_checked:after, .btn-20_checked:before{
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: -1;
 content: "";

 clip-path: var(--clip);
}

.btn-20_checked:before{
 background: var(--shadow-primary);
 transform: translate(var(--border), 0);
}

.btn-20_checked:after{
 background: linear-gradient(0deg, #bd47f8 0%, #b621fe 100%);
}


/* canvas */
canvas
{
    position: absolute;
    margin: none;
    border: none;
    padding: 0px;
    /* left: 0px;
    top: 0px;
    width: 100%;
    height: 100%; */
}

/* 画布 */
.canvas_wave
{
    border: 0px, solid, red;
    border-radius: 3px;
}


*{
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
 margin: 0;
 padding: 0;
 background-color: transparent;
 white-space: pre-line;  /* 可以换行 */

 user-select: none;  /* 禁止文本选择 */
}

/* 颜色宏定义，暂未使用 */
/* 示例：background-color: var(--bc1);*/
:root{
 --color: rgb(84, 186, 241);              /* 前景色 */

 --main-bg-color: #222222;      /* 背景色*/
}

body{
 /* display: block; */
 margin: 0px;
}

/* div */
div{
 position: absolute;
 margin: none;
 padding: 0px;
 border: 0px, solid, red;
 border-radius: none;

/* 文字 */
 color: #c6cbcd;
 text-align: center;
 font-weight: 200;
 font-style: normal;
 font-size: 21px;
 font-family: "PingFang SC";
 line-height: 24px;

 gap: 21px; /* 在子元素之间增加间距 */
}

/* 网页背景 */
.div_root{
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;

 /*平铺图*/
 /* background-image: url('../res/bg_star.png');
    background-repeat: repeat;
    background-size: ""; */

 /*单张图*/
 /* background-image: url('../res/bg.jpg');
    background-repeat: no-repeat;
    background-size: cover; */

 /* CSS渐变 */
 /* background: linear-gradient(to bottom right, rgb(124, 132, 136), rgb(46, 50, 54)); */
}

/* 网页背景 */
.div_main_page{
 top: 0px;
 left: 0px;
 width: 1920px;
 height: 950px;
}

/* 校准说明 */
.div_cali_desp{
 align-items: left;
 justify-content: left;
 width: 35px;
 height: 35px;
 border: 0px, solid, red;
 color: #f9f9f9;
 text-align: left;
 text-shadow: 0 0 5px #ff9f4538;
 font-weight: 300;
 font-size: 20px;

 gap: 21px;
}

/* 升级记录 */
.div_upgrade{
 top: 30px;
 left: 550px;
 overflow-y: auto; /* 允许垂直滚动条 */
 padding: 20px;
 width: 820px;
 height: 900px;
 border-radius: 3px;
 background-color: rgba(9, 144, 240, 0.5);
 color: rgb(205, 52, 192);
 text-align: center;
 font-weight: 400;
 font-size: 16px;
 line-height: 18px;
 filter: blur(0px); /* 确保自身内容不模糊 */

 -webkit-backdrop-filter: blur(10px); /* 兼容旧版WebKit浏览器 */
         backdrop-filter: blur(5px); /* 毛玻璃效果 */
}
.div_upgrade::-webkit-scrollbar{
 display: none;  /* 隐藏滚动条 */
}
ul, ol, li{
 list-style-type: none; /* 移除符号 */
}
li{
 color: rgba(9, 144, 240, 0.9);
 font-weight: 600;
}

/* 下方通用区域 */
.div_area_general{
 top: 130px;
 left: 0px;
 width: 1920px;
 height: 800px;
 border: 0px, solid, red;
}

.div_image_box{
 border-radius: 3px;
 background: rgba(10, 10, 10, 0.15);
 box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
 font-size: 14px;
}

.div_image_box:hover{
 background: rgba(20, 20, 20, 0.25);
}

.div_image_area{
 position: relative; /* 伪元素定位基准 */
 background: rgba(0, 0, 0, 0.25);
 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}



.instruction {
text-align: center;
padding: 20px;
background: rgba(255, 255, 255, 0.8);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.particle {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
pointer-events: none;
}

/* 渐变LOGO-调试环境 */
.gradient-mask-debug {
    width: 100px;
    height: 100px;
    
    background: linear-gradient(90deg, 
        #ff0000, #ff9900, #ffff00, #00ff00, 
        #00ffff, #0000ff, #9900ff, #ff00ff, #ff0000);
    background-size: 500% 500%;
    animation: gradientAnimation 25s linear infinite;
    
    /* 应用PNG图像作为蒙版 */
    -webkit-mask-image: url('../res/HM_LAB_Logo.png');
    mask-image: url('../res/HM_LAB_Logo.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* 渐变LOGO-正式环境 */
.gradient-mask {
    width: 100px;
    height: 100px;
    
    background: linear-gradient(90deg, 
        #ff0000, #ff9900, #ffff00, #00ff00, 
        #00ffff, #0000ff, #9900ff, #ff00ff, #ff0000);
    background-size: 500% 500%;
    animation: gradientAnimation 25s linear infinite;
    
    /* 应用PNG图像作为蒙版 */
    -webkit-mask-image: url('./res/HM_LAB_Logo.png');
    mask-image: url('./res/HM_LAB_Logo.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    100% { background-position: 500% 50%; }
}


/* img */
img{
 position: absolute;
 top: 0px;
 left: 0px;
 margin: none;
 padding: 0px;
 width: 100%;
 height: 100%;
 border: none;
 pointer-events: none;
}

/* 键盘背景图 */
.img_kb{
 width: 100%;
 height: 100%;
 border-radius: 10px;
}


/* input */
input
{
    position: absolute;
    margin: none;
    border: none;
    border-radius: 3px;
    padding: 0px;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;

    /* 文字 */
    color: #FFF;
    text-align: center;
    font-family: "PingFang SC";
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

/* 颜色按钮 */
.input_color
{
    width: 80px;
    height: 30px;

    border-radius: 3px;
    padding: 1px;
}

/* 数字编辑框 */
.input_number
{
    width: 200px;
    height: 30px;
    
    border: 1px, solid, #959798;
    background-color: rgba(70, 75, 78, 0.50);
    color: #F9F9F9;

    text-align: right;
}
.input_number:hover
{
    background-color: #464B4E;
    color: #F9F9F9;
}

/* 复选框-未选中 */
.input_checkbox_unchecked
{
    border-radius: 0px;
    background-color: hsl(233, 10%, 53%);
    left: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
}
.input_checkbox_unchecked:hover
{
    background-color: hsl(234, 46%, 48%);
}
.input_checkbox_unchecked:active
{
    background-color: hsl(236, 24%, 33%);
}

/* 复选框-已选中 */
.input_checkbox_checked
{
    border-radius: 0px;
    background-color: hsl(78, 74%, 41%);
    left: 10px;
    top: 10px;
    width: 80px;
    height: 30px;
}
.input_checkbox_checked:hover
{
    background-color: hsl(79, 36%, 37%);
}
.input_checkbox_checked:active
{
    background-color: hsl(79, 21%, 29%);
}

/* 滑条 */
.input_slider
{
    left: 0px;
    top: 0px;
    width: 250px;
    height: 30px;

    background-color: #464B4E;
    color: #F9F9F9;
}

/* 文本输入框 */
.input_text
{
    left: 0px;
    top: 0px;
    width: 250px;
    height: 30px;

    border: 1px, solid, #959798;
    background-color: #464B4E;
    color: #F9F9F9;

    text-align: center;
}


/* progress */
.progress {
  top: 700px;
  left: 700px;
  width: 240px;
  height: 30px;
  
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.25);  
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.progress-bar {
  top: 5px;
  left: 5px;
  width: 0px;
  height: 20px;

  border-radius: 30px;
  /* background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); */
  /* transition: 0.2s linear;   */
  transition-property: width, background-color;    
}

.progress-moved .progress-bar {
  background-color: #EF476F;  
}

/* 滚动条 */
.scroll-container::-webkit-scrollbar {
    width: 14px;
}

.scroll-container::-webkit-scrollbar-track {
    background: rgba(30, 30, 50, 0.3);
    border-radius: 30px;
    margin: 0px 0;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
}

.scroll-container::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #00dbde, #fc00ff);
    border-radius: 10px;
    border: 0px solid rgba(255, 255, 255, 0.2);
    /* box-shadow: 
        0 0 10px rgba(0, 219, 222, 0.7),
        0 0 15px rgba(252, 0, 255, 0.5);
    transition: all 0.3s ease; */
}

.scroll-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #00c9ff, #ff00cc);
    box-shadow: 
        0 0 15px rgba(0, 201, 255, 0.9),
        0 0 20px rgba(255, 0, 204, 0.7);
}

.scroll-container::-webkit-scrollbar-thumb:active {
    background: linear-gradient(45deg, #00b4db, #ff00b3);
}

.scroll-container::-webkit-scrollbar-corner {
    background: transparent;
}


/* select */
select{
 position: absolute;
 top: 10px;
 left: 10px;
 align-items: center;
 flex-shrink: 0;
 justify-content: center;
 margin: none;
 padding: 0px;
 width: 30px;
 height: 20px;
 border: 0px, solid, red;
 border-radius: 6px;

/* 文字 */
 color: #59c5ff;
 text-align: center;
 font-weight: 400;
 font-style: normal;
 font-size: 18px;
 font-family: "PingFang SC";
 line-height: 5px;
}

/*下拉框的选项-非hover*//*下拉框的选项-hover-找不到方法*/
select option{
 position: absolute;
 top: 0px;
 left: 0px;
 margin: none;
 padding: 0px;
 width: 100%;
 height: 100%;
 border: none;
 background-color: rgba(180, 180, 180, 0.8);

/* 文字 */
 color: #28272877;
 text-align: center;
 font-weight: 400;
 font-style: normal;
 font-size: 24px;
 font-family: "PingFang SC";
 line-height: 5px;
}

/* 选中项的背景颜色，暂时没用到，也设置为和普通下拉框一样颜色 */
select option:checked{
 background-color: #59c5ff;
 color: #f9f9f9;
 font-weight: 700;
}

/*通用下拉框-1*/
.select_general_1{
 width: 50px;
 height: 50px;
 border-radius: 3px;
 background-color: #f9f9f911;
 color: #f9f9f9f7;
}

/*
.select_general_1:hover{
 background-color: #f9f9f973;
 box-shadow: 0 0 15px #59c5ff;
}*/


/* span */
span{
 position: absolute;
 top: 0px;
 left: 0px;
 align-items: center;
 justify-content: center;
 margin: none;
 padding: 0px;
 border: 0px, solid, red;
 background-color: transparent;

/* 文字 */
 color: #c6cbcd;
 text-align: center;
 font-weight: 500;
 font-style: normal;
 font-size: 21px;
 font-family: "PingFang SC";
 line-height: 24px;

/* 点击穿透 */
 pointer-events: none;

 gap: 21px; /* 在子元素之间增加间距 */
}

span svg{
 width: 24px;
 height: 24px;
 pointer-events: none;
}

/* ICP备案 */
.span_icp{
 z-index: 9999;
 align-items: center;
 justify-content: center;
 width: 140px;
 height: 24px;
 color: #f9f9f9b0;
 font-size: 10px;
 pointer-events: auto;
}

/* WEB程序版本号 */
.span_web_ver{
 top: 915px;
 left: 10px;
 width: 170px;
 height: 30px;
 z-index: 9999;
 align-items: left;
 justify-content: left;
 border: 0px, solid, red;
 color: #f9f9f9b0;
 font-size: 19px;
 pointer-events: auto;
}

/* 帮助标签-普通 */
.span_tooltip_normal{
 top: 900px;
 left: 0px;
 align-items: center;
 justify-content: center;
 width: 1920px;
 height: 50px;
 background-color: rgba(89, 197, 255, 0.4);
 color: #f9f9f9;
 font-size: 18px;

 gap: 6px; /* 在子元素之间增加间距 */
}

/* 帮助标签-警告 */
.span_tooltip_warning{
 top: 900px;
 left: 0px;
 align-items: center;
 justify-content: center;
 width: 1920px;
 height: 50px;
 background-color: #b42b27;
 color: #f9f9f9;
 font-size: 20px;

 gap: 6px; /* 在子元素之间增加间距 */
}

/* 描述 */
.span_desc{
 top: 4px;
 left: 0px;
 overflow: hidden;    /* 隐藏溢出的文本 */
 align-items: center;
 justify-content: center;
 height: 24px;
 border: 0px, solid, red;
 color: rgb(230, 230, 230);
 text-align: right;
 font: normal normal "Microsoft YaHei";
 font-weight: 300;
 font-size: 18px;
 line-height: 26px;
 pointer-events: auto;
}

/* HUB接口标识 */
.span_hub_port{
 top: 4px;
 left: 0px;
 align-items: center;
 justify-content: center;
 width: 230px;
 height: 30px;
 border: 0px, solid, red;
 color: rgb(230, 230, 230);
 font: normal normal "Microsoft YaHei";
 font-weight: 500;
 font-size: 24px;
}