html, body{margin: 0px; padding: 0px; height: 100%; width:100%;}
body{
    font-family: -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';
    line-height: 1.6;
    font-size: 16px;
    box-sizing: border-box;
}

ul{list-style:none; padding:0px;}
a{text-decoration: none; }

.nav-wrap  nav {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: fixed;
    width: 100%;
    background: rgba(70,100,254,0.9);
    box-shadow: 0px 3px 7px 0px rgb(68 90 208 / 50%);
    z-index: 20;
}

.n-left{
    display:flex;
    align-items: center;
    padding-top:15px; padding-left:15px; 
}

.n-logo-wrap img{width: 50px; }

.nav-wrap {
    background: url("./images/bg.jpg") no-repeat;
    background-size:100% 100%;
    background-attachment:fixed;
}

.nav-bg{
    background-image: linear-gradient(to bottom, rgba(70,100,254,0.9) , rgba(112,132,254,0.9));
    max-height:780px; 
    height: 780px;
    
}

.n-left h1{margin: 0px; padding:0px; font-weight: bold; color: white; margin-left: 10px; white-space:nowrap; }

.n-menu li{padding: 5px; text-align:center; display:flex; flex-direction: column; align-items:center; }
.n-menu{display:flex;align-items: center;/* margin-top: 15px; */}
.n-menu a, .n-menu a:visited{color: rgba(208,215,255);font-weight:600;letter-spacing: 2px; white-space:nowrap; }
.n-menu a:hover, .n-menu a:active{color:white; }
.n-menu li:after{
    content: '';
    width: 0;
    height: 3px;
    background: rgba(252,190,0,1);
    display:block;
    text-align:center;
    margin-top:3px;
    animation: borderOutAni;
    animation-duration: 0.2s;
  
}

.n-menu li.active:after{
    width:100%;
}

.n-menu li.avtive:after, .n-menu li:hover:after{
    animation-name: borderInAni;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}

.n-right{position:relative;}
.n-right .menu-btn{
    display: none;
    position: relative;
    top: 20px;
    margin-right:25px; 
}

.n-right .menu-btn svg{
    fill: rgba(208,215,255);
    cursor: pointer;
    
}
.n-right .menu-btn:hover svg{
    fill: white;
    cursor: pointer;
    
}

@keyframes borderInAni{
    from {width: 0;}
    to {width: 100%;}
}

@keyframes borderOutAni{
    from {width: 100%;}
    to {width: 0;}
}

.n-menu .n-menu-item-login a{display:flex; align-items: center; padding-right: 15px;
    color: rgba(252,190,0,1);                            
}
.n-menu-item-login svg {fill: rgba(252,190,0,1);}
.n-menu .n-menu-item-login{padding-top:0px;}
.n-menu .n-menu-item-login:after{
    display:none;
}

.n-menu .n-menu-item-login a:hover{
    color: rgba(252,205,60,1);    
}
.n-menu .n-menu-item-login a:hover svg{fill:rgba(252,205,60,1); }

.banner-wrap > div{
    display:flex; justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
}

.b-icon img{width: 600px; opacity: 0.7;}
.b-title h2, .b-title p{white-space:nowrap; padding-left: 40px; }

.b-title{color: white; }

.find, .desc, .develop{width: 100%; margin: 0px auto;}
.find-wrap, .desc-wrap, .develop-wrap{width: 1100px; margin:0px auto; text-align: left;}
.sub-head {
    text-align: center;  border-bottom:2px solid rgba(70,100,254,0.2);
    font-size: 20px; font-weight: 600; padding: 15px;
    letter-spacing: 3px;
    color: rgba(70,100,254,1);
}

.find-content ul{display: flex;flex-wrap: wrap;/* justify-content: center; */align-items: center;box-sizing: border-box;/* text-align: center; */margin-left: 8px;}
.find-content li{flex: 0 0 33%;padding: 10px 0px;border: 1px solid #eee;cursor:pointer;height: 96px;box-sizing: border-box;}
.find-content li:hover {background: #eee;}
.find-content li a,  .find-content li a:visited, .find-content li a:active{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #666;
        font-weight: 500;
        height: 76px;
}

.find-content li a:hover{
   color: rgba(70,100,254,1);
}
.find-content li a:hover img{
    animation-name: angleAni;
    animation-duration: 1s;
}

@keyframes angleAni{
    0%{transform: rotateY(0deg);}
    50%{transform: rotateY(360deg);}
    100%{transform: rotateY(0deg);}
}

.find-content a img{
    max-width: 100px;
    max-height: 50px;
}


.desc{
    background-image: linear-gradient(to left bottom, rgb(83 117 239), rgb(188 198 247));
    width: 100%; overflow:hidden; position:relative;
    box-sizing: border-box;
    margin-top: 45px;
}



.desc:before, .desc:after {
    content: "";
    width: 300px;
    height: 300px;
    display:inline-block;
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    box-shadow: -2px 2px 20px 0px rgba(51, 92, 238,0.5);
    animation-name: myTranslate1;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.desc:before {
    top:-120px;
    right: -120px;
    background: rgb(51 92 238);
    box-shadow: -2px 2px 20px 0px rgba(51, 92, 238,0.5);
    animation-name: myTranslate1;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.desc:after {
    width: 200px;
    height: 200px;
    left:-100px;
    bottom: -100px;
    background: rgb(107 135 236);
    box-shadow: 2px -2px 20px 0px rgba(51, 92, 238,0.5);
    animation-name: myTranslate2;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-direction: alternate;

}

.desc-head{position: relative; z-index: 2; color: white; border-color: white;}
.desc-inner{position: relative; z-index: 2;
    display: flex; justify-content: space-around; 
    
}

.desc-inner > * {
    flex: 50%;
    box-sizing: border-box;
    background: white;
    margin: 0px 20px 35px 0px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px rgba(51, 92, 238,1);
}

.desc-inner p{display: flex;  flex-direction: column; 
    align-items: center; font-size: 30px;   color:#333;
}

.desc-inner p svg{
    fill: #0082ff;
}

    
.desc-inner ul {display: flex; flex-wrap: wrap; padding: 0px 20px 20px 20px; 
                margin:0px;}
.desc-inner li{padding: 1px 8px; color: #666;}

.dev-content ul{display:flex; }
.div-content li{display: flex; }



@keyframes myTranslate1{
    0%{transform: translate(0px, 0px);}
    100%{transform: translate(20px, -20px);}
}

@keyframes myTranslate2{
    0%{transform: translate(0px, 0px);}
    100%{transform: translate(-20px, 20px);}
}

.develop-wrap{
    background: #f6f7fb;
}

.dev-head{
    display: flex; border-bottom-width: 0px;
    flex-direction: column;
    padding:20px; margin:0px;

}
.dev-title{ border-bottom:2px solid rgba(70,100,254,0.2); padding-bottom: 15px;}
.dev-subtitle{font-size: 16px; text-align:left; color:#888;
    font-weight:500; padding-top:10px;
}
.dev-subtitle1{font-size: 16px; text-align:center; color:#888;
    font-weight:500; padding-top:10px;
}

.dev-content ul{display:flex; justify-content: space-around; }
.dev-content li{display: flex; flex-direction: column; flex: 0 0 33%;
    box-sizing: border-box; padding: 0px 15px; margin: 15px 0px;
    align-items: center;
}

.dev-content li svg{fill:red;}
.dev-content li p{margin: 8px; font-size: 18px; font-weight: 500px; color: #333;}
.dev-content li span{font-size: 14px; color: #888;}

.footer{width: 100%; text-align:center; margin: 0px auto;
    background: #242328;
}
.footer-wrap{width: 1100px; margin: 0px auto; 
             text-align:center; padding-top: 15px;
}
.contact-head{font-size: 20px; color: white;}
.contact-head1{font-size: 15px; color: #a9a9a9;}
.ct-img-wrap{margin-bottom: 15px;}
.ct-img-wrap img{width: 150px;}
.bk{padding: 15px; font-size: 15px; color: #525354; text-align: center;}
.bk a, .bk a:visited, .bk a:active{color: #525354; margin-left: 15px;}

@media (max-width: 900px) {
    .b-title{position: absolute; text-shadow: 2px 2px #333; z-index: 3; }
    .b-title h2{font-size: 36px;}
    .b-title p{font-size:24px;}
}

@media (min-width: 900px) {
    .b-title{position: absolute; text-shadow: 2px 2px #333; z-index: 3; }
    .b-title h2{font-size: 36px;}
    .b-title p{text-align: right;font-size:28px;}
}

@media (min-width: 1100px) {
    .b-title{position: static;  }
    .b-title h2{font-size: 50px;}
    .b-title p{font-size:20px;}
}

@media (min-width: 1300px) {
    .b-title h2{font-size: 50px;}
    .b-title p{font-size:24px;}
}

@media (max-width: 1100px) {
    .find-wrap, .desc-wrap, .develop-wrap{width: 100%;}
}

@media (max-width: 700px) {
    .b-title{
        position:absolute;
        /* left: 30px; */
        z-index: 10;
    }
}

@media (max-width: 600px) {
    
    .n-right .menu-btn {
        display: inline-block;
    }
    .n-right{position: relative;}
    .n-menu{
        display: none;
        flex-direction: column;
        background: white;
        position: absolute;
        right: 20px;
        align-items: flex-start; 
        z-index: 10;
        box-shadow: 0px 3px 10px 10px rgb(145 155 207 / 0.2);
        
    }
    .n-menu li{padding: 0px; width:100%; text-align:left; box-sizing: border-box; }
    .n-menu{padding-top: 5px; padding-bottom: 5px;}
    .n-menu a{padding: 0px 10px; display: block; width:100%; box-sizing: border-box;}

    .n-menu a, .n-menu a:visited, .n-menu a:active{color: #666;}
    .n-menu a:hover{color: rgba(70,100,254,0.9); }
    .b-title h2, .b-title p{margin: 0px; padding: 0px; text-align: center; text-shadow: 2px 2px #333;}
    .b-icon img{width: 100%;}
    .nav-bg{height: 500px;}

    .find-wrap, .desc-wrap, .develop-wrap{width: 100%;}
    .find-content li{flex: 0 0 49%;}
    .desc-inner{
        box-sizing: border-box; margin-left: 20px; flex-wrap: wrap;
    }
    .desc-inner > *{flex: 0 0 100%; }
    .footer-wrap{width: 100%;}
    
    .b-title h2{font-size: 24px;}
    .b-title p{font-size: 18px;}
}

.login-alert{
    position: fixed;
    left:0px; top: 0px;
    z-index: 20;
    background: rgba(0,0,0,0.4);
    width:100vw;
    height:100vh;
}

.login-alert-shadow{
    display:flex;
    align-items:center;
    justify-content:center;
    height:calc(100vh - 200px);
    
}

.login-wrap{
    background: white;padding: 20px;
    border-radius: 6px;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0, 0.2);
}

.login-title{text-align:center; font-size:20px; letter-spacing: 8px; font-weight: 600; color:#333; margin-bottom: 10px;}

.form-line{display: flex; padding: 10px; align-items:center; }

.form-line > span{display:inline-block; width:80px;text-align:right;
    font-size:16px; font-weight:500; letter-spacing: 2px;        
}

.form-line input[type='text'], .form-line input[type='password']{
    padding: 7px 10px; outline:none; 
    border: 1px solid #999;
    width:200px;
}

.form-line input[type='text']:focus, .form-line input[type='password']:focus{
    border-color: #409eff;
    box-shadow: 0px 0px 3px 0px #409eff;
}

.form-line.code-line input{width: 116px;}
.code-line img{height:33px;}

.form-line.err-info{
    display: block;
    text-align:center;
    font-size:14px; letter-spacing: 1.5px;
    color: #f53333;
    padding:5px;
}

.form-line.btn-line{
    display:block;
    text-align:center;
}
.btn-line button{
    border: 0px;
    opacity: 0.85;
    font-size:16px; letter-spacing: 3px;
    padding: 8px 25px;
    cursor: pointer;
    color: white;
}

#enter-btn{
    background :#409eff;
}
#exit-btn{
    background :#f53333;
    margin-left:15px;
}

.btn-line button:hover{
    opacity: 1;
}