@charset "UTF-8";


.marquee {
     width: 100%;
     overflow: hidden;
     white-space: nowrap;
}
.marquee span {
     display: inline-block;
     padding-left: 100%;
     
}
 .marquee_title{
    color:#000;
}

 .marquee_title a{
    color:#000;
}

.dark .marquee_title{
    color: white;
}
.dark .marquee_title a {
    color: white;
}

 @keyframes marquee {
     0% {
         transform: translateX(0);
    }
     100% {
         transform: translateX(-100%);
    }
}
 html {
     line-height: 1.5;
     -webkit-text-size-adjust: 100%;
     -moz-tab-size: 4;
     tab-size: 4;
     font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
}
 body {
     padding: 0.5rem;
     color: #797e86;
}
 .dark body {
     padding: 0.5rem;
     color: #797e86;
     background: black;
}
 h1 {
     color: #18191b;
     margin-bottom: 2rem;
}
 section {
     display: flex;
     justify-content: flex-start;
     flex-wrap: wrap;
     align-items: center;
}
 section > div {
     height:120px;
     width: calc(100%/6 - 1rem);
     min-width: 130px;
     margin: 1rem 0.5rem;
     transition: transform 0.3s ease;
}
 .dark section > div {
     height:120px;
     width: calc(100%/6 - 1rem);
     min-width: 130px;
     margin: 1rem 0.5rem;
     transition: transform 0.3s ease;
     background: black;
}
 section > div:hover {
     transform: translateY(-5px);
}
 .title-left{
     color:black;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}
 .dark .title-left{
     color:white;
}
 @media screen and (min-width: 901px) and (max-width: 1200px){
     section > div {
         height:120px;
         width: calc(100%/5 - 1rem);
         min-width: 130px;
         margin: 1rem 0.5rem;
    }
     .dark section > div {
         height:120px;
         width: calc(100%/5 - 1rem);
         min-width: 130px;
         margin: 1rem 0.5rem;
    }
}
 @media screen and (min-width: 701px) and (max-width: 900px){
     section > div {
         height:120px;
         width: calc(100%/3 - 1rem);
         min-width: 130px;
         margin: 1rem 0.5rem;
    }
     .dark section > div {
         height:120px;
         width: calc(100%/3 - 1rem);
         min-width: 130px;
         margin: 1rem 0.5rem;
    }
}
 @media screen and (min-width: 450px) and (max-width: 700px){
     section > div {
         height:120px;
         width: calc(100%/2 - 1rem);
         min-width: 130px;
         margin: 1rem 0.5rem;
    }
     .dark section > div {
         height:120px;
         width: calc(100%/2 - 1rem);
         min-width: 130px;
         margin: 1rem 0.5rem;
    }
}
 @media screen and (min-width: 80px) and (max-width: 450px){
     section > div {
         height:120px;
         width: calc(100%/2 - 1rem);
         margin: 1rem 0.5rem;
    }
     .dark section > div {
         height:120px;
         width: calc(100%/2 - 1rem);
         margin: 1rem 0.5rem;
    }
}
 input[type=radio] {
     display: none;
}
 input[type=radio]:not(:disabled) ~ label {
     cursor: pointer;
}
 input[type=radio]:disabled ~ label {
     color: #bcc2bf;
     border-color: #bcc2bf;
     box-shadow: none;
     cursor: not-allowed;
}
 label {
    /* height: 100%;
     */
     padding-top:1rem;
     display: block;
     background: white;
     border: 2px solid #20df80;
     border-radius: 10px;
     margin-bottom: 1rem;
     text-align: center;
     box-shadow: rgb(186 186 186) 4px 4px 6px;
     position: relative;
     transition: border-color 0.6s ease;
}
 .dark label{
     background: black;
}
 label:hover{
     border-color: rgba(15,118,110,1);
}
 input[type=radio]:checked + label {
     background: #20df80;
     color: white;
     box-shadow: 0px 0px 20px rgba(0, 255, 128, 0.75);
}
 input[type=radio]:checked + label::after {
     color: #3d3f43;
     font-family: FontAwesome;
     border: 2px solid #1dc973;
     content: "";
     font-size: 24px;
     position: absolute;
     top: -25px;
     left: 50%;
     transform: translateX(-50%);
     height: 50px;
     width: 50px;
     line-height: 50px;
     text-align: center;
     border-radius: 50%;
     background: white;
     box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.25);
}
 input[type=radio]#control_05:checked + label {
     background: red;
     border-color: red;
}
 p {
     font-weight: 600;
     padding: 0rem 1.25rem;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     line-height: 25px;
     text-align: left;
     color: #4f4f4f;
}
 .dark p{
     color:white;
}
 p > span{
     margin-right:7px;
}
 section svg{
     fill:gray;
     font-size:12px;
}
 .top-tips svg{
     width: 30px;
     margin-right:10px;
     border:1px solid black;
     padding:5px;
     border-radius: 3px;
     box-shadow: rgb(186 186 186) 4px 4px 6px;
     transition: transform 0.3s ease;
}
 .dark .top-tips svg{
     fill:white;
     width: 30px;
     margin-right:10px;
     border:1px solid white;
     padding:5px;
     border-radius: 3px;
     box-shadow: rgb(186 186 186) 4px 4px 6px;
     transition: transform 0.3s ease;
}
 .top-tips svg:hover{
     transform: translateY(-5px);
}
 p:hover{
    /* opacity: 0.8;
     */
     color:rgba(15,118,110,1);
}
 .top-tips{
     padding: 1rem;
     background-color: #6b72801a;
     border-radius: 10px;
     margin: 0.5rem 0.5rem;
     display: flex;
     flex-wrap: nowrap;
     justify-content: space-between;
    /* max-height: 68px;
     */
}
/*@media only screen and (max-width: 700px) {
     section {
         flex-direction: column;
    }
}
 */