html {
    font-size: 625%;
}

body {
    overflow: hidden;
}

body img {
    user-select: none;
}

#loginApp {
    width: 100%;
    height: 100%;
}

.tas-login-top {
    width: 13rem;
    height: 60%;
    background-color: #FFFFFF;
    margin: auto;
    padding-left: 1rem;
    padding-top: 0.40rem;
}

.tas-login-top .fd-logo img {
    width: 2.8rem;
    height: 0.6rem;
}

.tas-login-top .fd-center {
    padding-top: 0.40rem;
    display: flex;
}

.tas-login-top .fd-center .fd-center-pic {
    width: 33.33%;
    position: relative;
}

.tas-login-top .fd-center .fd-center-pic img {
    position: absolute;
}

.tas-login-top .fd-center .fd-center-pic .pic-smile1 {
    top: 0.5rem;
    left: 2.28rem;
    width: 0.22rem;
    height: 0.25rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-smile2 {
    top: 0;
    left: 1.78rem;
    width: 0.34rem;
    height: 0.38rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-smile3 {
    top: 0.64rem;
    left: 1.71rem;
    width: 0.34rem;
    height: 0.38rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-box_empty {
    top: 1.63rem;
    left: 2.51rem;
    width: 0.97rem;
    height: 1.06rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-dialog_instagram {
    top: 0.42rem;
    left: 0.61rem;
    width: 0.92rem;
    height: 1.86rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-dialog_love {
    top: 0.37rem;
    left: 2.98rem;
    width: 0.77rem;
    height: 0.95rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-laptop {
    top: 1.67rem;
    left: 2.04rem;
    width: 0.87rem;
    height: 0.69rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-like {
    top: 0.75rem;
    left: 0.31rem;
    width: 0.48rem;
    height: 0.41rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-love {
    top: 1.23rem;
    left: 0.76rem;
    width: 0.49rem;
    height: 0.48rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-man1 {
    top: 1.3rem;
    left: 0;
    width: 1.03rem;
    height: 2.03rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-man2 {
    top: 0.99rem;
    left: 2.25rem;
    width: 0.92rem;
    height: 1.8rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-paper1 {
    top: 1.61rem;
    left: 1.61rem;
    width: 0.58rem;
    height: 0.34rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-paper2 {
    top: 1.62rem;
    left: 1.61rem;
    width: 0.59rem;
    height: 0.35rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-plant {
    top: 2.46rem;
    left: 1.42rem;
    width: 0.92rem;
    height: 1.86rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-table {
    top: 1.42rem;
    left: 1.16rem;
    width: 2.21rem;
    height: 1.96rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-g2-laptop {
    top: 0.82rem;
    left: 0.22rem;
    width: 3.07rem;
    height: 3.17rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-g2-chat1 {
    top: 0.83rem;
    left: 1.92rem;
    width: 1.03rem;
    height: 1.09rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-g2-chat2 {
    top: -0.22rem;
    left: 1.28rem;
    width: 0.92rem;
    height: 1.29rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-g2-chat3 {
    top: 0.71rem;
    left: -0.11rem;
    width: 1.12rem;
    height: 1.38rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-g2-chilun {
    top: 1.15rem;
    left: 0.29rem;
    width: 0.41rem;
    height: 0.57rem;
    transform: rotateX(0) rotateY(-52deg) rotateZ(-101deg) scale(1.3);
}

.tas-login-top .fd-center .fd-center-pic .pic-g2-fill1 {
    top: 0.12rem;
    left: 1.60rem;
    width: 0.36rem;
    height: 0.58rem;
    transform: rotateX(-151deg) rotateY(2deg) rotateZ(183deg);
}

.tas-login-top .fd-center .fd-center-pic .pic-g2-man1 {
    top: 0.71rem;
    left: 2.08rem;
    width: 0.78rem;
    height: 1.09rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-g2-ornament_digital {
    top: 0.15rem;
    left: 0.30rem;
    width: 0.47rem;
    height: 0.51rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-g2-playbutton {
    top: 3.39rem;
    left: 1.66rem;
    width: 1.09rem;
    height: 0.76rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-g3-flag {
    top: 0.81rem;
    left: 1.69rem;
    width: 0.26rem;
    height: 0.44rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-g3-likebutton {
    top: 1.12rem;
    left: 0.01rem;
    width: 3.59rem;
    height: 2.65rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-g3-man {
    top: 0.88rem;
    left: 1.03rem;
    width: 0.38rem;
    height: 0.88rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-g3-man1 {
    top: 2.41rem;
    left: -0.19rem;
    width: 0.43rem;
    height: 0.83rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-g3-man2 {
    top: 2.47rem;
    left: 2.86rem;
    width: 0.38rem;
    height: 0.76rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-g3-digital {
    top: 0.61rem;
    left: 0.30rem;
    width: 0.56rem;
    height: 0.61rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-g3-playbutton {
    top: 1.74rem;
    left: 0.31rem;
    width: 0.76rem;
    height: 0.45rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-g3-pool {
    top: 2.24rem;
    left: 1.76rem;
    width: 0.95rem;
    height: 0.55rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-g3-right {
    top: 1rem;
    left: -0.09rem;
    width: 0.38rem;
    height: 0.45rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-g3-slide {
    top: 2.56rem;
    left: 0.62rem;
    width: 1.50rem;
    height: 1.44rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-g3-smile2 {
    top: 1.03rem;
    left: 2.38rem;
    width: 0.37rem;
    height: 0.42rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-g3-smile3 {
    top: 1.07rem;
    left: 2.91rem;
    width: 0.46rem;
    height: 0.52rem;
}

.tas-login-top .fd-center .fd-center-pic .pic-g3-stairs {
    top: 1.92rem;
    left: 1.52rem;
    width: 0.46rem;
    height: 0.45rem;
}

.tas-login-top .fd-center .fd-center-desc {
    width: 33.33%;
    position: relative;
}

.tas-login-top .fd-center .fd-center-desc .content {
    position: absolute;
    top: 1.50rem;
    left: 0.10rem;
}

.tas-login-top .fd-center .fd-center-desc .content .first {
    font-size: 0.22rem;
    color: #414141;
}

.tas-login-top .fd-center .fd-center-desc .content .second {
    font-size: 0.3rem;
    color: #5C79A6;
    margin: 0.1rem 0;
}

.tas-login-top .fd-center .fd-center-desc .content .third {
    width: 3rem;
    font-size: 0.16rem;
    color: #767888;
}

.tas-login-top .fd-center .fd-center-desc .content .third div {
    display: inline-block;
    margin-right: 0.15rem;
}

.tas-login-top .fd-center .fd-center-input {
    width: 33.33%;
    position: relative;
}

.tas-login-top .fd-center .fd-center-input .fd-login-main {
    position: absolute;
    width: 3.17rem;
    top: 1.20rem;
    left: -0.3rem;
}

.tas-login-top .fd-center .fd-center-input .fd-login-main .fd-login-input {
    margin-bottom: 0.25rem;
    height: 0.40rem;
    font-size: 0.14rem;
    color: #5C79A6;
}

.tas-login-top .fd-center .fd-center-input .fd-login-main .fd-login-input .aty-input {
    padding: 0.05rem 0.15rem;
    border: 0.01rem solid #CEDEED;
}

.tas-login-top .fd-center .fd-center-input .fd-login-main .fd-login-input .aty-input:focus {
    border-color: #5C79A6;
    border-width: 0.02rem;
    box-shadow: #5C79A6 0 0.02rem 0.04rem;
}

.tas-login-top .fd-center .fd-center-input .fd-login-main .fd-login-input .aty-input:hover {
    border-color: #5C79A6;
    border-width: 0.02rem;
    box-shadow: #5C79A6 0 0.02rem 0.04rem;
}

.tas-login-top .fd-center .fd-center-input .fd-login-main .fd-login-button {
    width: 1.49rem;
    height: 0.40rem;
    background: #5C79A6;
    color: #FFFFFF;
    font-size: 0.14rem;
    padding: 0.06rem 0.15rem;
}

.tas-login-top .fd-center .fd-center-input .fd-login-main .fd-login-button:last-child {
    margin-left: 0.118rem;
}

.tas-login-top .fd-center .fd-center-input .fd-login-main .fd-login-error {
    margin-top: 0.15rem;
    text-align: center;
    color: red;
}

.tas-login-bottom {
    width: 100%;
    height: 40%;
    background-image: linear-gradient(to right, #f4f5fc, #ffffff);
}

.tas-login-bottom .fd-function {
    display: flex;
    width: 13rem;
    margin: auto;
    padding-top: 0.70rem;
}

.tas-login-bottom .fd-function-item {
    width: 25%;
    height: 1.64rem;
    margin-right: 8%;
}

.tas-login-bottom .fd-function-item:last-child {
    margin-right: 0;
}

.tas-login-bottom .fd-function-item .function-img-name {
    text-align: center;
}

.tas-login-bottom .fd-function-item .function-img-name .img {
    width: 0.38rem;
    height: 0.38rem;
}

.tas-login-bottom .fd-function-item .function-img-name .manage-server {

}

.tas-login-bottom .fd-function-item .function-img-name .manage-app {

}

.tas-login-bottom .fd-function-item .function-img-name .manage-datasource {

}

.tas-login-bottom .fd-function-item .function-img-name .manage-user-role {

}

.tas-login-bottom .fd-function-item .function-img-name .name {
    padding: 0.15rem 0;
    font-size: 0.16rem;
    color: #414141;
}

.tas-login-bottom .fd-function-item .function-desc {
    font-size: 0.12rem;
    color: #797FAC;
}

.tas-corp-right {
    width: 100%;
    position: absolute;
    text-align: center;
    bottom: 0.30rem;
    color: #656987;
    font-size: 0.12rem;
}

.d50t05-enter-active {
    animation: d50-in 0.5s linear;
}

@keyframes d50-in {
    0% {
        transform: translate(0.50rem, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}

.d50t05-reverse-enter-active {
    animation: d50-reverse-in 0.5s linear;
}

@keyframes d50-reverse-in {
    0% {
        transform: translate(-0.50rem, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}

.d80t05-reverse-enter-active {
    animation: d80-reverse-in 0.5s linear;
}

@keyframes d80-reverse-in {
    0% {
        transform: translate(-0.80rem, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}

.o10-leave-active {
    animation: o10-out 1s linear;
}

@keyframes o10-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.o01-enter-active {
    animation: o01-in 1s linear;
}

@keyframes o01-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.blue {
    width: 2.49rem;
    height: 2.83rem;
}

.blue-location-0 {
    position: absolute;
    left: -1.26rem;
    top: calc(100% - 1.90rem);
    transform: rotate(0deg);
}

.blue-location-1 {
    position: absolute;
    left: calc(100% - 1.90rem);
    top: calc(100% - 1.73rem);
    transform: rotate(-91deg);
}

.blue-location-2 {
    position: absolute;
    top: 0.06rem;
    left: calc(100% - 1.28rem);
    transform: rotate(-159deg);
}

.blue-location-3 {
    position: absolute;
    top: -1.33rem;
    left: calc(50% + 0.70rem);
    transform: rotate(-234deg);
}

.blue-state-1 {
    animation: blue-state1-d 0.7s linear;
}

@keyframes blue-state1-d {
    0% {
        left: -1.26rem;
        top: calc(100% - 1.90rem);
        transform: rotate(0deg);
    }
    50% {
        left: calc(50% - 1rem);
        top: calc(100% - 0.70rem);
        transform: rotate(-46deg);
    }
    100% {
        left: calc(100% - 1.90rem);
        top: calc(100% - 1.73rem);
        transform: rotate(-91deg);
    }
}

.blue-state-2 {
    animation: blue-state2-d 0.7s linear;
}

@keyframes blue-state2-d {
    0% {
        left: calc(100% - 1.90rem);
        top: calc(100% - 1.73rem);
        transform: rotate(-91deg);
    }
    100% {
        top: 0.06rem;
        left: calc(100% - 1.28rem);
        transform: rotate(-159deg);
    }
}

.blue-state-3 {
    animation: blue-state3-d 0.5s linear;
}

@keyframes blue-state3-d {
    0% {
        top: 0.06rem;
        left: calc(100% - 1.28rem);
        transform: rotate(-159deg);
    }
    100% {
        top: -1.33rem;
        left: calc(50% + 0.70rem);
        transform: rotate(-234deg);
    }
}

.green {
    width: 3.68rem;
    height: 3rem;
}

.green-location-0 {
    position: absolute;
    left: calc(100% - 1.15rem);
    top: 0;
    transform: rotate(0deg);
}

.green-location-1 {
    position: absolute;
    left: calc(50% - 1rem);
    top: -1.88rem;
    transform: rotate(-32deg);
}

.green-location-2 {
    position: absolute;
    top: 44%;
    left: -1.72rem;
    transform: rotate(-146deg);
}

.green-location-3 {
    position: absolute;
    top: calc(100% - 0.87rem);
    left: 0.23rem;
    transform: rotate(-225deg);
}

.green-state-1 {
    animation: green-state1-d 0.7s linear;
}

@keyframes green-state1-d {
    0% {
        left: calc(100% - 1.15rem);
        top: 0;
        transform: rotate(0deg);
    }
    100% {
        left: calc(50% - 1rem);
        top: -1.88rem;
        transform: rotate(-32deg);
    }
}

.green-state-2 {
    animation: green-state2-d 0.7s linear;
}

@keyframes green-state2-d {
    0% {
        left: calc(50% - 1rem);
        top: -1.88rem;
        transform: rotate(-32deg);
    }
    25% {
        left: calc(50% - 5.3rem);
        top: -1.6rem;
        transform: rotate(-44deg);
    }
    50% {
        left: -0.5rem;
        top: -0.45rem;
        transform: rotate(-65deg);
    }
    75% {
        left: -1.6rem;
        top: 2.12rem;
        transform: rotate(-110deg);
    }
    100% {
        top: 44%;
        left: -1.72rem;
        transform: rotate(-146deg);
    }
}

.green-state-3 {
    animation: green-state3-d 0.6s linear;
}

@keyframes green-state3-d {
    0% {
        top: 41%;
        left: -1.97rem;
        transform: rotate(-150deg);
    }
    100% {
        top: calc(100% - 0.87rem);
        left: 0.23rem;
        transform: rotate(-225deg);
    }
}

.square {
    width: 0.63rem;
    height: 0.63rem;
}

.square-location-0 {
    position: absolute;
    left: 2.05rem;
    top: calc(100% - 2.90rem);
    transform: rotate(0deg);
}

.square-location-1 {
    position: absolute;
    left: calc(50% + 1.06rem);
    top: 0.86rem;
    transform: rotate(142deg) scale(0.65);
}

.square-location-2 {
    position: absolute;
    left: calc(100% - 1.12rem);
    top: 3.13rem;
    transform: rotate(-55deg) scale(0.65);
}

.square-location-3 {
    position: absolute;
    top: calc(100% - 1.16rem);
    left: 4.33rem;
    transform: rotate(58deg) scale(0.65);
}

.square-state-1 {
    animation: square-state1-d 0.7s linear;
}

@keyframes square-state1-d {
    0% {
        left: 2.05rem;
        top: calc(100% - 2.90rem);
        transform: rotate(0deg);
    }
    100% {
        left: calc(50% + 1.06rem);
        top: 0.86rem;
        transform: rotate(142deg) scale(0.65);
    }
}

.square-state-2 {
    animation: square-state2-d 0.7s linear;
}

@keyframes square-state2-d {
    0% {
        left: calc(50% + 1.06rem);
        top: 0.86rem;
        transform: rotate(142deg) scale(0.65);
    }
    100% {
        left: calc(100% - 1.12rem);
        top: 3.13rem;
        transform: rotate(-55deg) scale(0.65);
    }
}

.square-state-3 {
    animation: square-state3-d 0.8s linear;
}

@keyframes square-state3-d {
    0% {
        top: 3.13rem;
        left: calc(100% - 1.12rem);
        transform: rotate(-55deg) scale(0.65);
    }
    14% {
        top: 4.65rem;
        left: calc(100% - 2.49rem);
        transform: rotate(-39deg) scale(0.65);
    }
    28% {
        top: 5.86rem;
        left: calc(100% - 4.32rem);
        transform: rotate(-23deg) scale(0.65);
    }
    42% {
        top: 6.48rem;
        left: calc(100% - 6.50rem);
        transform: rotate(-7deg) scale(0.65);
    }
    56% {
        top: 7.48rem;
        left: calc(100% - 8.50rem);
        transform: rotate(9deg) scale(0.65);
    }
    70% {
        top: 7.93rem;
        left: calc(100% - 10.53rem);
        transform: rotate(25deg) scale(0.65);
    }
    84% {
        top: 8.12rem;
        left: calc(100% - 12.43rem);
        transform: rotate(41deg) scale(0.65);
    }
    100% {
        top: calc(100% - 1.16rem);
        left: 4.33rem;
        transform: rotate(58deg) scale(0.65);
    }
}

/****************************************************************************************************/
/**                覆蓋Artery确认框样式
/****************************************************************************************************/
.aty-modal {
    width: 466px !important;
    top: 135px;
}

.aty-modal-content {
    border-radius: 3px;
}

.aty-modal-content .aty-modal-close {
    z-index: 1;
}

.aty-modal-content:after {
    content: "";
    position: absolute;
    top: 47px;
    width: 100%;
    border-bottom: 1px solid #CDE4FA;
}

.aty-modal-content .aty-modal-body {
    padding: 11px 16px 16px 16px;
}

.aty-modal-content .aty-modal-body .aty-modal-confirm .aty-modal-confirm-head {
    padding-left: 12px;
}

.aty-modal-content .aty-modal-body .aty-modal-confirm .aty-modal-confirm-head-title {
    color: #00376D;
    font-size: 16px;
    font-weight: normal;
}

.aty-modal-content .aty-modal-body .aty-modal-confirm:before {
    content: "";
    border-left: 4px solid #44B0A9;
    position: absolute;
    top: 15px;
    height: 16px;
}

.aty-modal-content .aty-modal-body .aty-modal-confirm-body {
    padding: 80px 60px 60px 60px;
    font-size: 16px;
}

.aty-modal-content .aty-modal-body .aty-modal-confirm-footer {
    text-align: center;
    margin-bottom: 10px;
}

.aty-modal-content .aty-modal-body .aty-modal-confirm-footer button {
    font-size: 14px;
    padding: 4px 33px;
}

.aty-modal-content .aty-modal-body .aty-modal-confirm-footer button:first-child {
    border: 1px solid #44B0A9;
    color: #44B0A9;
    transform: translate(110px, 0);
}

.aty-modal-content .aty-modal-body .aty-modal-confirm-footer button:last-child {
    background-color: #44B0A9;
    border-color: #44B0A9;
    transform: translate(-110px, 0);
}

.aty-modal-content .aty-modal-body .aty-modal-confirm-footer button:first-child:hover {
    border-color: #6bc1bb;
    color: #6bc1bb;
}

.aty-modal-content .aty-modal-body .aty-modal-confirm-footer button:last-child:hover {
    border-color: #44b0a9;
    background: #6bc1bb;
}

/****************************************************************************************************/
/**                媒体自适应
/****************************************************************************************************/

@media screen and (min-height: 600px) and (max-height: 700px) {
    html {
        font-size: 425%;
    }

    .tas-login-bottom .fd-function {
        padding-top: 0.30rem;
    }
}

@media screen and (min-height: 700px) and (max-height: 800px) {
    html {
        font-size: 500%;
    }
}

@media screen and (min-height: 800px) and (max-height: 900px) {
    html {
        font-size: 550%;
    }

    .tas-login-top {
        padding-top: 0.70rem;
    }
}

.tas-login-captcha .aty-captcha-slide-img-wrapper {
    width: 300px;
    height: 150px;
    transition: none;
}

.tas-login-captcha .aty-captcha-slide-img-wrapper .aty-captcha-slide-img {
    width: 300px;
    height: 150px;
}

.tas-login-captcha .aty-captcha-slide-img-wrapper .aty-captcha-slide-tmp {
    width: 60px !important;
    height: 60px !important;
}