/*
    登录页基本样式
*/

/*滚动条样式*/
::-webkit-scrollbar {
    width: 6px;
    height: 12px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.2);
    background: rgba(0,0,0,.2);
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.2);
    border-radius: 0;
    background: rgba(0,0,0,.2);
}

/*占位符字体样式*/
input:-moz-placeholder {
    color: #AEAEAE;
    font-size: 14px;
}

input:-ms-input-placeholder {
    color: #AEAEAE;
    font-size: 14px;
}

input::-webkit-input-placeholder {
    color: #AEAEAE;
    font-size: 14px;
}

.company_Name:-moz-placeholder, .new_User:-moz-placeholder, .tel_Phone:-moz-placeholder {
    font-size: 12px;
}

.company_Name:-ms-input-placeholder, .new_User:-ms-input-placeholder .tel_Phone:-ms-input-placeholder {
    font-size: 12px;
}

.company_Name::-webkit-input-placeholder, .new_User::-webkit-input-placeholder, .tel_Phone::-webkit-input-placeholder {
    font-size: 12px;
}

/*基本样式*/

body {
    overflow: hidden;
    font-family: '微软雅黑';
    box-sizing: border-box;
    min-width: 768px;
}

    body > .mian {
        height: 100vh;
        position: relative;
    }

    body > div.bgColor {
        background: url('images/bgimage-1.png') no-repeat;
    }

    body > div.bgColor.mian > div:nth-child(5) {
        padding-top: 90px;
    }


/* 密码提示样式 */
.myfont {
    width:410px;
    color: #c8c8c8;
    font-size: 12px;
}

/*0.背景图片*/

.btn-login:hover {
    background: rgba(46,172,230,.95);
    transform: scale(1.001);
}

div.other > span:last-child > span:hover {
    transform: scale(1.001);
}

.unselect {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



.login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.login-img {
    padding: 0 45px;
}

.login-container, .forgetPassword-container {
    background: #fff;
    padding: 0 50px;
}

.forgetPassword-container {
    padding: 30px 45px 0 45px;
}

.login-container > div.txt_login_first_child {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0 35px 0;
}

.login-container > div.text {
    display: flex;
    align-items: center;
}

    .login-container > div.text > button.get-code { /* 获取验证码按钮样式 */
        width: 120px;
        height: 33px;
        line-height: 33px;
        font-size: 14px;
        text-align: center;
        border: none;
        border-left: 1px solid #d8d8d8;
        color: #6B6B6B;
        cursor: pointer;
        padding: 0;
    }

#dj > img, #r_dj > img {
    padding-left: 3px;
    width: 25px;
    opacity:0.5;
}

.forgetPassword {
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
}

    .forgetPassword > div.layui-form {
        position: relative;
        width: 70%;
    }

        .forgetPassword > div.layui-form > a {
            color: #03A1EA;
            position: absolute;
            left: 42px;
            top: 2px;
        }

    .forgetPassword > a {
        font-size: 14px;
        color: #666;
    }

    /* 2.2账户名框 */
    div.txt_container {
        padding-left: 55px;
    }

div.text {
    border: 1px solid #DADADA;
    height: 35px;
    line-height: 35px;
    margin-bottom: 35px;
}

#loginBox > div > div:nth-child(3),
#forgetBox > div > div:nth-child(4),
#registerBox > div > div:nth-child(4) {
    margin-bottom: 25px;
}

#forgetBox > div > div:nth-child(6),
#registerBox > div > div:nth-child(6) {
    padding-bottom: 19px;
}

div.text input {
    width: 100%;
    height: 94%;
    font-size: 14px;
    padding-left: 10px;
}
/* | */
span.line {
    display: inline-block;
    font-size: 23px;
    color: #DADADA;
    padding-bottom: 3px;
}

.text > span:first-child {
    padding: 0 9px 0 9px;
}

/* 登录按钮 */
.btn-login {
    background: #03A1EA;
    font-size: large;
    color: #fff;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    transition: all .5s linear;
    height: 50px;
    line-height: 50px;
}

div.other {
    padding: 45px 0;
    display: flex;
    justify-content: space-between;
}

    div.other > span {
        color: #666;
        font-size: 14px;
    }

        div.other > span:last-child > span {
            padding-left: 10px;
            justify-content: flex-end;
            cursor: pointer;
            transition: all .5s linear;
        }

.footer {
    position: absolute;
    bottom: 0;
    font-size: 16px;
    width: 100%;
    background-color: #fff;
    text-align: center;
    line-height: 40px;
    color: #595959;
    height: 50px;
    line-height: 20px;
}

    .footer > div:nth-child(2) {
        font-size:14px;
    }

    .footer a {
        color: #595959;
    }

.welcome_login {
    color: #00a0e9;
    font-size: 30px;
    font-weight: 500;
}

.logo, .header {
    position: absolute;
    top: 20px;
    left: 25px;
}

.login-container {
    width: 460px;
    background-color: #fff;
    box-shadow: 2px 2px 10px #909090;
}

.loginTitle {
    text-align: center;
    margin-bottom: 50px;
}

.WeChat {
    display: flex;
    justify-content: space-between;
    width: 460px;
}

    .WeChat > div {
        position:relative;
        margin-top: 50px;
        text-align: center;
        width: 192px;
    }

        .WeChat > div > img {
            width: 110px;
        }

        .WeChat > div > p {
            font-size: 14px;
            color: #3d3d3d;
            font-weight: 500;
            margin-top: 10px;
        }

        .WeChat > div > div.tips {
            position: absolute;
            background-color: #facf4e;
            color: #000;
            border-radius: 5px;
            width: 300px;
            text-align: left;
            padding: 10px;
            display: none;
            font-size: 12px;
        }

        .WeChat > div > div.tips_1 {
            right: 80%;
            top: 50%;
        }

        .WeChat > div > div.tips_2 {
            left: 95%;
            top: 25%;
        }


.right-box {
    position: fixed;
    right: 10px;
    bottom: 110px;
    z-index: 999;
}

    .right-box > div {
        display: flex;
    }

        .right-box > div > div:last-child {
            width: 55px;
        }

    .right-box .callMe {
        background-color: #03A1EA;
        margin-bottom: 10px;
        text-align: center;
        padding: 10px;
        border-radius: 5px;
        cursor: pointer;
    }

    .right-box .free {
        background-color: #03A1EA;
        text-align: center;
        border-radius: 5px;
        cursor: pointer;
    }

        .right-box .free span {
            font-size: 18px;
            color: #fff;
            padding: 15px;
        }

    .right-box .details {
        width: 300px;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 2px 2px 10px #909090;
        margin-right: 10px;
        border-radius: 3px;
    }

        .right-box .details img {
            width: 38px;
            margin-right: 15px;
        }

        .right-box .details .tel, .right-box .details .weixin {
            display: flex;
            align-items: center;
        }

        .right-box .details .tel {
            margin-bottom: 30px;
        }


.tel p, .weixin p {
    font-size: 18px;
    color: #646565;
}

    .weixin p + p {
        font-size: 16px;
    }

    .tel p:first-child, .weixin p:first-child {
        font-weight: 500;
    }

    .tel p:last-child {
        color: #00a0e9;
        font-weight: bold;
        letter-spacing: 4px;
    }
    .tel a{
        font-size:16px;
        color: #00a0e9 !important;
        font-weight: bold !important;
        letter-spacing: 4px !important;
    }
    .weixin p:last-child {
        letter-spacing: 4px;
        font-weight: bold;
    }

.weixin p:last-child {
    color: #595959;
}

.weixin p {
    cursor: pointer;
}

    .weixin p:hover {
        color: #b7b7b7;
    }

.barcode {
    padding: 31px;
    background-color: #fff;
    box-shadow: 2px 2px 10px #909090;
    margin-right: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .barcode img {
        width: 100px;
    }

    .barcode p {
        color: #646565;
        font-size: 14px;
        margin-top: 6px;
        font-weight: 500;
        letter-spacing: 4px;
    }

.writeInfo, .submitInfo {
    width: 323px;
    background-color: #fff;
    box-shadow: 2px 2px 10px #909090;
    margin-right: 10px;
    position: absolute;
    right: 70px;
    bottom: 60px;
}

    .writeInfo > div, .submitInfo > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

        .submitInfo > div > div:first-child {
            margin-top: 60px;
        }

        .submitInfo > div > div:last-child {
            text-align:center;
        }

    .submitInfo > div > div > p {
        font-size: 16px;
        color: #5f5f5f;
        padding: 40px 20px;
    }

        .submitInfo > div > div:last-child {
            margin-bottom: 20px;
        }

        .writeInfo > div > div > span {
            font-size: 24px;
            color: #00a0e9;
            padding-top: 22px;
        }

        .writeInfo > div > div:nth-child(2) {
            width: 100%;
            padding: 15px 20px 30px 20px;
            text-align: center;
        }

.company_Name, .new_User, .tel_Phone {
    height: 35px;
    line-height:35px;
    background-color: #f4f2f2;
    margin-bottom: 22px;
    width: 100%;
    padding-left: 40px;
}

#tryUserTel {
    margin-bottom: 20px;
}

.company_Name {
    background-image: url('images/company-1.png');
    background-repeat: no-repeat;
    background-position: 10px 8px;
}

.new_User {
    background-image: url('images/user-01.png');
    background-repeat: no-repeat;
    background-position: 10px 12px;
}

.tel_Phone {
    background-image: url('images/tel-10.png');
    background-repeat: no-repeat;
    background-position: 10px 12px;
}

.submit_btn {
    padding: 5px 15px;
    background-color: #00a0e9;
    color: #fff;
    margin-top: 10px;
    border: none;
    font-size: 14px;
    cursor: pointer;
}

.layui-form-label {
    width: 90px;
    padding-right: 10px;
    padding-left: 0;
}

.layui-form-item {
    margin-bottom:25px;
    display:flex;
    justify-content:space-between;
}

.layui-form-item:first-child {
    margin-bottom: 35px;
    justify-content:center;
}

.layui-form-checkbox[lay-skin=primary] {
    padding-left:20px;
}

    .layui-form-checkbox[lay-skin=primary] span {
        padding-right:10px;
    }

#agreeOn > div > span {
    margin-left:20px;
    margin-bottom:8px;
}

/*
    注册弹框适配
*/

.registerInfo {
    margin: 20px 80px;
}
    .registerInfo > div .layui-form-item > label {
        font-size: 18px;
        font-weight: 500;
    }

    .registerInfo > div:last-child {
        margin-bottom: 25px;
        display: flex;
        justify-content: space-between;
    }

        .registerInfo > div:last-child > button.layui-btn {
            width: 120px;
            border-radius: 5px;
        }

.jump-content {
    height: 100%;
}

    .jump-content > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        padding: 15px;
    }

        .jump-content > div > img {
            margin-bottom: 40px;
        }

        .jump-content > div > span {
            font-size: 18px;
            color: #666;
            margin-bottom: 60px;
        }

        .jump-content > div > button {
            width: 120px;
            border-radius: 5px;
        }

.agree-text {
    display: none;
    padding: 15px;
}

    .agree-text > div:first-child {
        text-align: center;
        font-size: 18px;
        font-weight: bold;
    }

    .agree-text > div:nth-child(2) {
        font-size:14px;
    }

        .agree-text > div:nth-child(2) > span.agree-title {
            font-weight: bold;
            margin-left: 0;
        }

        .agree-text > div:nth-child(2) > span.agree-bold {
            font-weight:bold;
        }

.layui-layer-tips .layui-layer-content {
    padding:2px 10px;
}


/*下拉框样式调整*/
.textbox .textbox-prompt {
    width: 100% !important;
    height: 100% !important;
}

.textbox {
    width: 100% !important;
    border: 1px solid #d2d2d2;
    border-radius: 0;
}

.combo-arrow {
    background-color: transparent;
    height:38px;
    line-height:38px;
}

#CORP_TYPE + .textbox .combo-arrow, #CORP_NAME + .textbox .combo-arrow {
    height: 38px !important;
    line-height: 38px !important;
}

.textbox-text {
    width:100% !important;
    height:100% !important;
    margin:0 !important;
}

.panel {
    z-index: 99999999 !important;
}

.panel-body {
    color: #666;
    border: 1px solid #e5e6e7;
}

.textbox-focused {
    box-shadow: 0 0 0 0;
}

#CORP_NAME {
    width:378px;
}

/*只读*/
.layui-input[readonly] {
    background-color: #f2f2f2;
}

/*只读样式*/
.textbox-readonly, .textbox-readonly .validatebox-readonly, .textbox-readonly .combo-arrow {
    background-color: #f2f2f2;
}

.layui-form-checked[lay-skin=primary] i {
    background-color: #03a1ea;
    border-color: #03a1ea;
}

.layui-form-checkbox[lay-skin=primary]:hover i {
    border-color: #03a1ea;
}



/*
    媒体查询
*/
@media screen and (max-width:1600px) {
    .tips {
        padding: 4px;
    }

    .tips_1 {
        right: 90%;
        top: 20%;
    }

    .tips_2 {
        left: 95%;
        top: 5%;
    }

    body > div.bgColor.mian > div:nth-child(5) {
        padding-top: 60px;
    }

    body > div.bgColor {
        background-size: 100% 65%;
    }

    .login-container, .WeChat {
        width: 381px;
    }

    .loginTitle {
        margin-bottom: 40px;
    }

        .loginTitle img {
            width: 300px;
        }

    .welcome_login {
        font-size: 27px;
    }

    .logo img, .header img {
        width: 90px;
    }

    div.text {
        height: 33px;
        line-height: 33px;
        margin-bottom: 26px;
    }

    #loginBox > div > div:nth-child(3), #forgetBox > div > div:nth-child(4) {
        margin-bottom: 21px;
    }

    #forgetBox > div > div:nth-child(6) {
        padding-bottom: 24px;
    }

    div.text input {
        font-size: 13px;
        padding-left: 7px;
    }


    .forgetPassword {
        margin-bottom: 24px;
    }

        .forgetPassword a, div.other > span {
            font-size: 14px;
        }

    .btn-login {
        height: 35px;
        line-height: 35px;
        font-size: 16px;
    }

    div.other {
        padding: 42px 0;
    }

    .WeChat > div {
        margin-top: 25px;
    }

        .WeChat > div > p {
            margin-top: 0;
            font-size: 14px;
        }

    .footer {
        font-size: 15px;
        height: 37px;
        line-height: 37px;
    }
        .footer > div:first-child {
            margin-bottom: 3px;
        }

        .footer > div:nth-child(2) {
            font-size:13px;
        }
            .footer > div:nth-child(2) > a:first-child {
                text-decoration:none;
            }
            .footer > div:nth-child(2) > a:last-child {
                color: #939393;
                text-decoration: none
            }

            .right-box {
                bottom: 65px;
            }

        .right-box > div > div:last-child {
            width: 48px;
        }

        .right-box .callMe {
            padding: 5px 0;
        }

        .right-box .free span {
            font-size: 19px;
        }

    .writeInfo > div > div > span {
        font-size: 19px;
        padding-top: 18px;
    }

    .company_Name, .new_User, .tel_Phone {
        height: 31px;
        line-height: 31px;
        background-position: 10px 9px;
        padding-left: 37px;
        margin-bottom: 18px;
    }

    #tryUserTel {
        margin-bottom: 18px;
    }

    .submit_btn {
        padding: 3px 15px;
        margin-top: 0;
    }

    .writeInfo, .submitInfo {
        width: 250px;
        bottom: 65px;
        right: 60px;
    }

        .writeInfo > div > div:nth-child(2) {
            padding: 15px 15px 20px 15px;
        }

    .right-box .details {
        width: 240px;
    }

    .barcode {
        padding: 20px;
    }

        .barcode p {
            font-size: 16px;
        }

    .tel p, .weixin p {
        font-size: 18px;
    }

        .weixin p + p {
            font-size: 16px;
        }

    .right-box .details img {
        width: 30px;
    }

    .submitInfo > div > div:first-child {
        margin-top: 25px;
    }

    .submitInfo > div > div > p {
        font-size: 14px;
        padding: 30px 20px;
    }

    .submitInfo > div > div:last-child > button {
        font-size: 15px;
    }

    .myfont {
        width: 465px;
    }

        .myfont > a > img {
            width: 17px;
        }
}

@media screen and (max-width:1440px) {
    /*占位符样式*/
    input:-moz-placeholder {
        font-size: 12px;
    }

    input:-ms-input-placeholder {
        font-size: 12px;
    }

    input::-webkit-input-placeholder {
        font-size: 12px;
    }

    div.text input {
        font-size: 12px;
    }

    .registerInfo {
        margin: 45px 60px 15px 60px;
    }

    .registerInfo .layui-form-item {
        margin-bottom: 15px;
    }

        .registerInfo .layui-form-item:first-child {
            margin-bottom: 30px;
        }

    .registerInfo .layui-form-label {
        padding: 6px 5px;
    }

    .layui-form-item > .layui-input {
        padding-left: 5px;
        height: 32px;
        line-height: 32px;
        font-size:12px;
    }

    .registerInfo .layui-btn {
        width:100px;
        height:32px;
        line-height:32px;
    }
    
    #CORP_TYPE + .textbox, #CORP_NAME + .textbox , #CORP_TYPE + .textbox .combo-arrow, #CORP_NAME + .textbox .combo-arrow {
        height: 32px !important;
        line-height: 32px !important;
    }

    #CORP_NAME {
        width:265px;
    }

    .layui-form-label, .textbox .textbox-text {
        font-size: 12px;
    }

    .layui-layer.layui-layer-page {
        top: 22% !important;
    }

    .tips {
        padding: 2px;
    }

    .tips_1 {
        right: 95%;
        top: 30%;
    }

    .tips_2 {
        left: 95%;
        top: 20%;
    }

    body > div.bgColor.mian > div:nth-child(5) {
        padding-top: 30px;
    }

    .login-container > div.text > button.get-code {
        height: 30px;
        line-height: 30px;
        font-size: 12px;
    }

    body > div.bgColor {
        background-size: 100% 60%;
    }
    .WeChat > div {
        margin-top: 25px;
    }

        .WeChat > div > p {
            margin-top: 10px;
            font-size: 12px;
        }

        .WeChat > div > img {
            width: 90px;
        }

    .weixin p + p {
        font-size:14px;
    }

    .right-box, .writeInfo, .submitInfo {
        bottom: 100px;
    }

    .footer {
        font-size: 14px;
        height: 30px;
        line-height: 12px;
    }
        .footer > div:nth-child(2) {
            font-size:12px;
        }
        .right-box .details .tel {
            margin-bottom: 20px;
        }
    div.text > span > img {
        width:16px;
    }
    .company_Name, .new_User, .tel_Phone {
        background-position:10px 7px;
    }
    .myfont {
        width:545px;
    }
    .myfont > a > img {
        width: 17px;
    }

    #dj > img, #r_dj > img {
        width:22px;
    }
    .right-box .free span {
        padding: 8px;
    }
    .right-box .callMe {
        margin-bottom:7px;
    }
    .callMe > img {
        width: 32px;
    }

}

@media screen and (max-width:1368px) {

    .layui-layer.layui-layer-page {
        top: 18% !important;
    }

    .tips {
        padding:3px;
        font-size:12px;
    }

    .tips_1 {
        right: 95%;
        top: 10%;
    }

    .tips_2 {
        left: 95%;
        top: 20%;
    }

    body > div.bgColor.mian > div:nth-child(5) {
        padding-top: 20px;
    }

    .logo, .header {
        top: 18px;
        left: 15px;
    }

        .logo img, .header img {
            width: 80px;
        }

    .loginTitle {
        margin-bottom: 30px;
    }

        .loginTitle img {
            width:280px;
        }

        .login-container, .WeChat {
            width: 330px;
        }

    .login-container, .forgetPassword-container {
        padding: 0 30px;
    }

    .welcome_login {
        font-size: 26px;
    }

    #loginBox > div > div.txt_login_first_child > span {
        padding-bottom:10px;
    }

    div.txt_login_first_child {
        padding: 20px 0 10px 0;
    }

    div.text {
        height: 28px;
        line-height: 28px;
        margin-bottom: 15px;
    }

    .login-container > div.text > button.get-code {
        height: 26px;
        line-height: 26px;
    }

    .registerInfo {
        margin: 25px 30px 10px 30px;
    }

        .registerInfo .layui-form-item > .layui-input {
            height: 28px;
            line-height: 28px;
            font-size: 12px;
        }

        .registerInfo .layui-form-label {
            padding:4px 5px;
        }

    #CORP_TYPE + .textbox, #CORP_NAME + .textbox, #CORP_TYPE + .textbox .combo-arrow, #CORP_NAME + .textbox .combo-arrow {
        height: 28px !important;
        line-height: 28px !important;
    }

    #registerBox > div > div:nth-child(4) {
        margin-bottom: 17px;
    }

    #loginBox > div > div:nth-child(3), #forgetBox > div > div:nth-child(4) {
        margin-bottom:20px;
    }

    .forgetPassword a, div.other > span, .layui-form-checkbox span {
        font-size: 12px;
    }

    .btn-login {
        height: 32px;
        line-height: 32px;
        font-size: 14px;
    }

    .forgetPassword {
        margin-bottom: 20px;
    }

    div.other {
        padding: 25px 0;
    }

    .WeChat > div {
        margin-top: 35px;
    }

        .WeChat > div > img {
            width: 80px;
        }
    .footer {
        font-size: 13px;
        height: 29px;
        line-height: 12px;
    }
        .footer > div:nth-child(2) {
            font-size:12px;
        }

    #forgetBox > div > div:nth-child(6) {
        padding-bottom: 20px;
    }

    .right-box > div > div:last-child {
        width: 35px;
    }

    .right-box .free span {
        font-size: 15px;
        padding: 5px;
    }

    .right-box, .writeInfo, .submitInfo {
        bottom: 55px;
    }

    .writeInfo, .submitInfo {
        right: 45px;
    }

        .callMe > img {
            width: 30px;
        }

    .company_Name, .new_User, .tel_Phone {
        height: 28px;
        line-height: 28px;
        margin-bottom: 16px;
        background-position: 7px 5px;
        padding-left: 31px;
    }

    .writeInfo > div > div > span {
        font-size: 17px;
        padding-top: 15px;
    }

    #tryUserTel {
        margin-bottom: 21px;
    }

    .writeInfo, .submitInfo {
        width: 234px;
    }

        .writeInfo > div > div > button {
            font-size: 14px;
        }

        .writeInfo input {
            font-size:12px;
        }

        .submit_btn {
            padding: 3px 10px;
        }

    .submitInfo > div > div > img {
        width: 90px;
    }

    .submitInfo > div > div > p {
        font-size: 12px;
        padding: 25px 20px;
    }

    .submitInfo > div > div:last-child > button {
        font-size: 14px;
    }

    .submitInfo > div > div:first-child {
        margin-top: 20px;
    }

    .right-box .callMe {
        margin-bottom: 4px;
    }

    .right-box .details .tel {
        margin-bottom: 20px;
    }

    .tel a {
        font-size:14px;
    }

    .tel p, .weixin p {
        font-size: 16px;
    }

        .weixin p + p {
            font-size: 12px;
        }

    .right-box .details {
        width: 218px;
    }

    .barcode {
        padding: 15px;
    }

        .barcode img {
            width: 80px;
        }

    .myfont {
        width:585px;
    }

    #dj > img, #r_dj > img {
        width: 18px;
    }

    .jump-content > div > span {
        font-size:16px;
    }

    .jump-content > div > button {
        width:90px
    }

    .layui-form-checkbox[lay-skin=primary] i {
        width:14px;
        height:14px;
    }

    .layui-form-checkbox[lay-skin=primary] {
        padding-left:16px;
    }
   
}




/*
    动画
*/
@keyframes run1 {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0);
        opacity: 0;
    }
}

@keyframes run {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.active {
    animation: run1 .4s ease;
}

.active-for {
    animation: run .4s ease;
}