body {
	/* margin:0;
	height:100vh;
	display:flex;
	align-items:center;
	justify-content:center; */
    position: relative;
    height: 100vh;
    padding: 0;
    margin: 0;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #2c3e50;
    background: #f6f8f9 /*#f2c3c6*/ /*#f0a9ac*/ /*#f6f8f9*/;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}
.body-container {
    background: url('../blocks-4.png') repeat;
    height: 100vh;
    /* background-size: 100% 100%; */
    padding: 1rem;
}

.loading-content-inner {
    margin: 0;
	height: 100%;
	display: flex;
    flex-direction: column;
	align-items: center;
	justify-content: center;
    line-height: 1.15;
    /* border: 0.3rem solid #fff; */
}

.login-border {
    position: absolute;
    top: 1rem;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    /* width: calc(100% - 2rem); */
    /* height: calc(100vh - 2rem);  calc(100vh - 2rem); */
    /* width: calc(100vw - 2rem);  calc(100vw - 2rem); */
    /* padding: 1rem; */
    border: 0.3rem solid #fff; /*#e38c8c;*/
}

.login-border-inner {
    border: 0.3rem solid #fff; /*#e38c8c;*/
    height: 100%;
}

.loading-img {
    /* margin-bottom: 1.5rem; */
    /* margin-bottom: 3rem; */
    width: 20rem; /* 18rem; */
    height: 6rem; /* 5rem;*/
}
.app-text {
    /* padding: 0 0 0 1.35rem; */
    /* margin: 0 0 -1.5rem 0; */
    margin: 5rem 0 -1.5rem -1.8rem;
    /* margin-bottom: 6rem; */
    /* text-align: center; */
    /* font-size: 15px; */
    /* position: absolute; */
    /* color: #f00056; */
    color: #be3939;
    /* font-weight: bold; */
    /* animation: opp 2s infinite linear; */
    animation: bounce 0.75s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
    /* font: normal 500 1rem 'Varela Round', sans-serif; */
    font: normal 500 1.41rem 'Varela Round', sans-serif; 
    letter-spacing: 0.1rem;
    /* margin-left: -6.8rem; */
    text-align: left;
    /* width: 18rem; */
    width: 15.3rem;
}
.loading-text{
    /* margin-top: 2rem; */
    text-align: center;
    /* font-size: 14px; */
    font-size: 1rem; 
    /* color: #d03636; */
    /* color: #f00056; */
    color: #be3939;
    /* animation: opp 2.5s infinite linear; */
    /* position: absolute; */
}
@keyframes opp{
	0%{
		opacity: 1;
	}
	25%{
		opacity: 0.9;
	}
	50%{
		opacity: 0.8;
	}
    75%{
		opacity: 0.9;
	}
	100%{
		opacity: 1;
	}
}

.letter {
    /* animation: bounce 0.75s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate; */
    display: inline-block;
    transform: translate3d(0, 0, 0);
    /* margin: 0 0.1rem; */
    /* margin-top: 0.5em; */
    /* text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em; */
    font: normal 500 1rem 'Varela Round', sans-serif;
}
/* .letter:nth-child(1) {
    animation-delay: 0s;
}
.letter:nth-child(2) {
    animation-delay: 0.0833333333s;
}
.letter:nth-child(3) {
    animation-delay: 0.1666666667s;
}
.letter:nth-child(4) {
    animation-delay: 0.25s;
}
.letter:nth-child(5) {
    animation-delay: 0.3333333333s;
}
.letter:nth-child(6) {
    animation-delay: 0.4166666667s;
} */
  
@keyframes bounce {
    0% {
      transform: translate3d(0, 0, 0);
      text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
    }
    100% {
      transform: translate3d(0, -1em, 0);
      text-shadow: rgba(255, 255, 255, 0.4) 0 1em 0.35em;
    }
}

.masked h4{
    /*渐变背景*/
    background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,
    #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
    color: transparent; /*文字填充色为透明*/
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: none;          /*背景剪裁为文字，只将文字显示为背景*/
    background-size: 200% 100%;            /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
    /* 动画 */
    animation: masked-animation 4s infinite linear;
}
@keyframes masked-animation {
    0% {
        background-position: 0 0;   /*background-position 属性设置背景图像的起始位置。*/
    }
    100% {
        background-position: -100% 0;
    }
}

.slogan-title {
    position: absolute;
    z-index: 2;
    background: url('../chongaili-slogan.png') no-repeat;
    background-size: 100% 100%;
}
.chongaili-title {
    position: absolute;
    z-index: 2;
    background: url('../chongaili-title.png') no-repeat;
    background-size: 100% 100%;
    width: 12rem;
    height: 3rem;
    margin-top: 7rem;
    margin-left: 35rem;
}
.top-right-heart {
    background: url('../top-right-heart.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

/* //<=767的设备 } 手机 */
@media(max-width: 767px) {
    .slogan-title {
        top: 20vh;
        width: 20rem;
        height: 2rem;
    }
    .chongaili-title {
        top: 20vh;
        margin-left: 15rem;
        width: 6rem;
        height: 1.5rem;
        margin-top: 4rem;
    }
    .top-right-heart {
        height: 12rem;
        width: 12rem;
    }  
} 
/* //>=768的设备 } 平板 */
@media(min-width: 768px) { 
    .slogan-title {
        top: 18vh;
        width: 40rem;
        height: 5rem;
    }
    .chongaili-title {
        top: 18vh;
    }
    .top-right-heart {
        height: 15rem;
        width: 15rem;
    }   

} 
/* //>=992的设备 } 电脑 */
@media(min-width: 992px) { 
    .slogan-title {
        top: 13vh;
        width: 40rem;
        height: 5rem;
    }
    .chongaili-title {
        top: 12vh;
    }
    .top-right-heart {
        height: 20rem;
        width: 20rem;
    }   
} 
/* //>=1200的设备 } 大显示器 */
@media(min-width: 1200px) { 
    .slogan-title {
        top: 13vh;
        width: 40rem;
        height: 5rem;
    }
    .chongaili-title {
        top: 13vh;
    }
    .top-right-heart {
        height: 20rem;
        width: 20rem;
    }    
}

.top-left-heart {
    background: url('../top-left-heart.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: 20rem;
    width: 20rem;
    z-index: 1;
}

.chongaili-copyright {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    color: #8f92a1;
    font-size: 0.91rem;
    display: inline-flex;
}
.chongaili-copyright-c {
    margin-top: 0.1rem;
}


.chongbeiyun-server{
    position: absolute;
    bottom: 4rem;
    right: 2rem;
    color: #8f92a1;
    font-size: 0.9rem;
    display: inline-flex;
}
.chongbeiyun-server-ip{
    font-size: 0.6rem;
    border: 1px solid;
    border-radius: 0.1rem;
    padding: 0.15rem 0.05rem 0 0.05rem;
    /* margin-top: -0.05rem; */
    /* height: 1.1rem; */
}
.chongaili-text{
    margin: 0 0.1rem;
}

