@warn: #ff8f3e;
@success: #07c160;
@danger: #ea2d2d;
@prim: #fdfb60;
@info: #939599;
@text0: #181818;
@text1: #323233;
@text2: #606266;
@text3: #939599;
@text4: #c6c8cc;
@border1: #f5f7fa;
@border2: #f2f3f5;
@border3: #dfe1e6;
@border4: #f2f6fc;
@bg: #f5f7fa;
@red: #fd4d49;
@menuFont: 16px;
.flex1 {
    flex-grow: 1;
}
.flex() {
    display: flex;
    align-items: center;
}
.flex-col() {
    display: flex;
    flex-direction: column;
}

.ellipsis() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ellipsis-line( @line:2 ) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @line;
    overflow: hidden;
}
.pagination(){
     display: flex;
     margin: 80px 375px;

     /deep/.el-pagination {
         button:disabled {
             background-color: transparent;
             color: #939599;
         }

         .btn-next,
         .btn-prev {
             background: transparent;
             color: #939599;
         }

         .el-pager li {
             background-color: transparent;
             color: #939599;

             &.active {
                 color: @prim;
             }
         }
     }
}
.min-height(@subHeight:462px, @screenHeight:969px) {
    min-height: calc(100vh - @subHeight);
    @media screen and (max-height: @screenHeight) {
        min-height: calc(@screenHeight - @subHeight);
    }
}

.bg() {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

@keyframes iconAnimate {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    20% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }

    80% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
.iconAnimate {
    animation: iconAnimate ease-in-out 0.3s;
}

.center-content( @width:1300px ) {
    width: 100%;
    box-sizing: border-box;
    padding: 0 50px;
    max-width: @width;
    margin: 0 auto;
}

.icon-button {
    .flex();
    display: inline-flex;
    vertical-align: middle;
    &.is-plain {
        background-color: #fff;
        &:active,
        &:hover,
        &:visited,
        &:focus {
            background-color: @prim;
        }
    }

    span {
        font-size: 12px;
        font-weight: normal;
        .flex();
    }

    i {
        font-size: 22px;
        display: inline-block;
        vertical-align: sub;
        margin-right: 4px;
    }
    padding: 0 20px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.line(@bg:#1c1e26,@radius:6px,@color1:@prim,@color2:@warn) {
    background-image: linear-gradient(135deg, @color1, @color2);
    position: relative;
    padding: 1px;
    border-radius: @radius;
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;

    &::before {
        position: absolute;
        z-index: 1;
        content: '';
        left: 1px;
        right: 1px;
        bottom: 1px;
        top: 1px;
        background-color: @bg;
        border-radius: @radius;
    }
    &::after {
        position: absolute;
        z-index: 0;
        content: '';
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background-image: linear-gradient(135deg, @color1, @color2);
        transform-origin: center center;
        animation: spin ease-in-out 3s;
        animation-iteration-count: 0;
    }

    * {
        z-index: 3;
        position: relative;
    }

    &:hover {
        &::after {
            animation-iteration-count: infinite;
        }
    }
}

.center-content( @width:1300px ) {
    width: 100%;
    box-sizing: border-box;
    padding: 0 50px;
    max-width: @width;
    margin: 0 auto;
}
