html,body{
    margin:0;
    padding: 0;
    user-select: none;
    overflow: hidden;
}
a{
	text-decoration: none;
}
::-webkit-scrollbar {
    width: 0px;
    height: 0px; }
  
  ::-webkit-scrollbar-button {
    display: none; }
  
  ::-webkit-scrollbar-track:vertical {
    background-color:transparent; }
  
  ::-webkit-scrollbar-track-piece {
    background: transparent; }
  
  ::-webkit-scrollbar-thumb {
    background-color: #0399E2;
    border-radius: 5px; }
  
  ::-webkit-scrollbar-thumb:hover {
    background-color: #44b0e6; }
  
  ::-webkit-scrollbar-corner {
    background-color: #0399E2; }
  
  ::-webkit-scrollbar-resizer {
    background-color: #0399E2; }

.mainbg{
    background: url(../img/nindex/bg.jpg) no-repeat center / cover;
    width: 1920rem;
    height: 1080rem;
    position: absolute;
}

.title{
    background: url(../img/nindex/title.png) no-repeat center / contain;
    width: 1300rem;
    height: 81rem;
    margin:auto;
    margin-top:142rem;
}
.left{
    background: url(../img/nindex/sbg.png) no-repeat center;
    background-size: 100% 100%;
    width: 340rem;
    height: 591rem;
    position: absolute;
    margin-top: 95rem;
    margin-left: 64rem;
    float: left;
    position: relative;    
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    transform: perspective(500rem) rotateY(12deg);
}

.middle{
    background: url(../img/nindex/mbg.png) no-repeat center;
    background-size: 100% 100%;
    width: 1053rem;
    height: 558rem;
    position: absolute;
    margin-top: 111rem;
    margin-left: 30rem;
    float: left;
    position: relative;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.right{
    background: url(../img/nindex/sbg.png) no-repeat center;
    background-size: 100% 100%;
    width: 300rem;
    height: 551rem;
    position: absolute;
    margin-top: 95rem;
    margin-left: 30rem;
    float: left;
    padding: 27rem;
    position: relative;
    transform: perspective(500rem) rotateY(-12deg);
}
.button{
    background: url(../img/nindex/btn.png) no-repeat center;
    background-size: 100% 100%;
    width: 252rem;
    height: 74rem;
    font-size: 20rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: white;
    line-height: 74rem;
    text-shadow: 0rem 1rem 3rem rgba(9, 70, 131, 0.74);
    margin:8rem;
    display: block;
    text-align: center;
}
.button span{
	text-shadow: 0rem 1rem 3rem rgba(9, 70, 131, 0.74);
	background: rgba(0,0,0,0);
    /* linear-gradient(0deg, #4EAAFF 35%, #FFFFFF 65%); */
	/* -webkit-background-clip: text;
	-webkit-text-fill-color: transparent; */
}
.button:hover span{
	
	text-shadow: inherit;
	background: rgba(0,0,0,0);
	-webkit-background-clip: inherit;
	-webkit-text-fill-color: inherit;
}
.button:hover{
    background: url(../img/nindex/btn-h.png) no-repeat center;
    background-size: 100% 100%;
}

.right .about{
    font-size: 18rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 36rem;
    display: block;
    width: 126rem;
    height: 36rem;
    text-align: center;
    margin: 0 0 10rem 0;
    border-left: solid #71AAFF 6rem;
}
.right .about:hover{
    background: url(../img/nindex/abbg.png) no-repeat center;
    background-size: 100% 100%;
    
    border-left: 0;
}
.right p{
    font-size: 18rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 26rem;
    margin:0;
    max-height: 456rem;
    text-align: center;
}

.right .text{    
    max-height: 465rem;
    overflow-y: auto;
}

.bannerroot{
    left: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-between;
}
.middle .slidercontainer .jSlider .indicator{
    display: none;
}

.mbox{
    background: url(../img/nindex/boxbg.png) no-repeat center;
    background-size: 100% 100%;
    width: 319rem;
    height: 225rem;
    margin: 10rem 8rem;
    cursor: default;
}
.mbox:hover{
	transform:scale(1.05);
}
.mbox .img{
    margin: 8rem;
    width: 303rem;
    object-fit: cover;
    height: 164rem;
}
.mbox span{
    font-size: 18rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    margin:auto;
    text-align:center;
    width: 100%;
    display: block;
}
.login{
    width: 319rem;
    height: 225rem;
    margin: 10rem 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1;    
    bottom: 32rem;
    position: absolute;
    background: rgba(0,0,0,0.3);
    border-radius: 5rem;
}

.login .ipt{
    background: url(../img/nindex/input.png) no-repeat center;
    background-size: 100% 100%;
    width: 269rem;
    height: 50rem;
    position: relative;
}
.login .ipt .usericon{
    background: url(../img/nindex/usericon.png) no-repeat center;
    background-size: 100% 100%;
    width: 19rem;
    height: 21rem;
    left: 30rem;
    top: 16rem;
    position: absolute;
}
.login .ipt .passicon{
    background: url(../img/nindex/passicon.png) no-repeat center;
    background-size: 100% 100%;
    width: 19rem;
    height: 21rem;
    left: 30rem;
    top: 16rem;
    position: absolute;
}
.login .ipt input{
    background: rgba(0, 0, 0, 0);  
    border:0;
    padding:0; 
    outline: none;
    font-size: 18rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    margin: 10rem 20rem 0 60rem;
}
.login .welcome{
    margin: 1rem;
    font-size: 18rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    text-align: left;
    width: 80%;
}

.login input{ 
    border:0;
    padding:0; 
    outline: none;
    margin: 0;
}
.login label{
    font-size: 12rem;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #FFFFFF;
}

.login .commit{
    background: url(../img/nindex/login.png) no-repeat center;
    background-size: 100% 100%;
    width: 124rem;
    height: 46rem;
    margin: 5.5rem;
}

.login .commit:hover{
    background: url(../img/nindex/login-h.png) no-repeat center;
    background-size: 100% 100%;
}
.login .register{
    background: url(../img/nindex/register.png) no-repeat center;
    background-size: 100% 100%;
    width: 124rem;
    height: 46rem;
    margin: 5.5rem;
    display: inline-block;
}

.login .register:hover{
    background: url(../img/nindex/register-h.png) no-repeat center;
    background-size: 100% 100%;
}

.login .cks{
    width: 250rem;
    display: flex;
    justify-content: space-between;
}

.login .quitlog{
    background: url(../img/nindex/quit.png) no-repeat center;
    background-size: 100% 100%;
    width: 124rem;
    height: 46rem;
    margin: 5.5rem;
}

.login .quitlog:hover{
    background: url(../img/nindex/quit-h.png) no-repeat center;
    background-size: 100% 100%;
}

/* .login .cbox{
    background: url(../img/nindex/register.png) no-repeat center;
    background-size: 100% 100%;
    width: 25rem;
    height: 24rem;
} */

.slidercontainer{
    position: absolute;
    top: 34rem;
    bottom: 20rem;
    left: 20rem;
    right: 20rem;
}

.rightimg{
    width: 300rem;
    height: 436rem;
    margin-top: 30rem;
}