@charset "UTF-8";

@history-shadow: 0 2px 8px 0 rgba(0,0,0,.14);
.about-history-all{
//  max-height:600px;
//  overflow-x: hidden;
//  overflow-y: auto;
}
.about-history-content{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    width: 78%;
    margin: auto;
    transition: all .3s ease-in-out;
    @media (min-width:768px) and (max-width:1023px){
        width: 98%;
    }
    @media (max-width:767px){
        flex-direction: column;
        width: 100%;
    }
    .history-box{
        width: 46%;
        border-radius: 4px;
        background-color: @color-ff;
        box-shadow: @history-shadow;
        margin: 10px 0;
        text-align: left;
        height: 230px;
        transition: all .3s ease-in-out;
        @media (max-width:767px){
            width: 100%;
            height: auto;
        }
    }
    .box-info{
        padding: 3em 2em;
        z-index: 2;
        .h3-title{
            color: @primary;
        }
    }
    .left-arrow{
        position: relative;
        transition: all .3s ease-in-out;
        z-index: 9;
        &:before{
            position: absolute;
            top: 20px;
            content: "";
            display: block;
            background-color: @color-ff;
            right: -10px;
            width: 20px;
            height: 20px;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            @media (max-width:767px){
                display: none;
            }
        }
        &:after{
            position: absolute;
            top: 20px;
            content: "";
            display: block;
            background-color: @color-ff;
            right: -10.5%;
            width: 16px;
            height: 16px;
            border: 2px solid @primary;
            border-radius: 50%;
            z-index: 3;
            @media (max-width:767px){
                display: none;
            }
        }
    }
    .right-arrow{
        position: relative;
        transition: all .3s ease-in-out;
        &:before{
            position: absolute;
            bottom: 20px;
            content: "";
            display: block;
            background-color: @color-ff;
            right: auto;
            left: -10px;
            width: 20px;
            height: 20px;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            @media (max-width:767px){
                display: none;
            }
        }
        &:after{
            position: absolute;
            bottom: 20px;
            content: "";
            display: block;
            background-color: @color-ff;
            left: -10.5%;
            width: 16px;
            height: 16px;
            border: 2px solid @primary;
            border-radius: 50%;
            z-index: 3;
            @media (max-width:767px){
                display: none;
            }
        }
    }
    .history-line{
        display: block;
        position: relative;
        width: 8%;
        align-self: stretch;
        transition: all .3s ease-in-out;
        .time-line{
            background-color: @primary;
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            margin-left: -1px;
            width: 2px;
        }
    }
}