@charset "utf-8";
:root {
    --color: #60606f; /*for normal text*/
    --fr:#26d0ce;
    --bg:#1a2980;

}



html{font-size:16px; height:100%; width:100%;}

body{color:white; background-color: var(--bg);  
    font:1rem/1.5 system-ui, "-apple-system", "Segoe UI",sans-serif, "Helvetica Neue",Tahoma,Verdana,"Microsoft YaHei",Arial; clear:both;
    /* height:100%; width:100%; overflow:hidden; */
    position:relative;
}

html,body,ul,li,ol,dl,dt,dd,img,form,h1,h2,h3,h4,h5,div,section,footer,header,main,aside,
img,hr,p,a,button,input,nav,article,small,i,textarea,fieldset,label,figure,figcaption,
*::before,*::after
    {padding:0;margin:0;box-sizing:border-box;border:none;list-style: none;text-decoration: none;font-family: inherit; outline: 0;}


img{max-width:100%;}
img[src='']{visibility:hidden;}

dialog{border:none;outline: 0;}


h1,h2,h3,h4,h5{font-weight:bold;}
h1{font-size: 2.2rem;}
h2{font-size: 1.9rem;}
h3{font-size: 1.5rem;}
h4{font-size: 1.2rem;}
h5{font-size: 1.1rem;}

small{font-size:0.6rem;}
.xs{font-size:0.5rem;}

a{text-decoration:none; }
a:not([class*=B]),a:link:not([class*=B]),a:visited:not([class*=B])
{color:var(--h_color);}
a:not([class*=B]),a:focus:not([class*=B]),a:active:not([class*=B]),a:hover:not([class*=B])
{color:var(--c_color);}


/*================*/

body {
    background-color: #1a2980; 
    --x-position: 6vw;
    background-image: radial-gradient(
        circle at 50% 50%,
        #26d0ce 0%,
        rgba(38, 208, 206, 0.3) 40%,
        rgba(38, 208, 206, 0) 70%
    );
    background-size: 200% 200%; 
    background-position: 80% 90%; 
    background-repeat: no-repeat; 

    height: 100%;
    display: flex;
    flex-direction: column;
    transition: background-position 5s ease-in-out;

}
.bgmove {
    background-position: 30% 100%;
}


header section{position: relative; text-align: center; padding-top:5rem;}

#Logo{width:100px; height:160px; margin:1rem auto; position: relative;}
#Logo_svg {
    width: 100px; height: 100px;fill:white;    
    position: absolute; top:0; left:0;
    transition: top 300ms cubic-bezier(0.2, 1, 1, 1);
}
#Logo_svg use{ x:5px; y:5px; width:91px; height:91px; }


#Logo .logoBounce {
    animation: logoBounce 1s forwards;
}
@keyframes logoBounce {
    0% { top: 0px; transform: rotateY(0); }
    25% {top: -30px; transform: rotateY(-60deg);}
    45% {top: -5px; transform: rotateY(-10deg);}
    50% {top: 0; transform: rotateY(0d);}
    55% {top: -5px; transform: rotateY(-10deg);}
    75% {top: -6px;    transform: rotateY(20deg);}
    100% {top: 0px;    transform: rotateY(0);}
}


#Logo_shadow {
    width: 100px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); 
    border-radius: 40px; 
    filter: blur(18px);
    transform: scaleY(0.2);
    opacity: 0.3;
    margin:1rem auto;
    position: absolute; bottom: -30px; left:0;
    transition: topacity 300ms cubic-bezier(0.2, 1, 1, 1);
    
  }

#Logo .shadowBounce {
    animation: logoShadow 1s forwards;
}
@keyframes logoShadow {
    0% { opacity: 0.3;}
    25% {opacity: 0.05;}
    50% {opacity: 0.3;}
    75% {opacity: 0.2;}
    100% {opacity: 0.3;}
}


  
nav ul{margin:5rem auto; display:flex; flex-wrap:wrap; justify-content: center; 
    max-width: 1280px; cursor:default;
    min-height: 204px;;
}
nav li{
    margin:1rem auto; border-radius: 5px; padding:1rem; 
    background-color: rgba(255, 255, 255, 0.5); 
    width: 300px;
    border-left: 2px solid #ffffff1a;
    box-shadow: #00000011 10px -15px 15px;
    transition: box-shadow 5s ease-in-out, transform 0.3s ease-in-out;

}
nav li a{display: block;}
nav li:first-of-type{transform: rotate(3deg) scale(1);  background-color: #64C1F0cc;}
nav li:nth-of-type(2){transform: rotate(-1deg); background-color: #059FD8cc;}
nav li:nth-of-type(3){transform: rotate(5deg); background-color: #26d0cecc;}

nav .lishadow{
    box-shadow: #00000044 -10px 15px 15px;
}

nav li:hover{
    transform: scale(1.1);
}

nav p{font-size: 0.8rem; color:#FFFFFFcc;}

footer{min-height: 5rem; background-color: #00000099; flex:1;}
footer p{margin:1rem auto; text-align: center; color:#26d0ce44; font-size: 0.8rem;}

#tanslate{width: 2.5rem; height: 2.5rem; line-height: 2.5rem; text-align: center;
    cursor: pointer;
    border-radius: 0.6rem; 
    background-color: #059FD899;
    position: fixed; right: 1rem; bottom: 1rem;
    user-select: none;

}
#tanslate:hover{background-color: #059FD8CC;}

/*带有lan属性的元素 */
[lan]{
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}
[lan].out{
    opacity: 0;
}


.arrow_r::after{content:" \00BB";} /*  » » */