.service-popup
{
    color: #3d3d3d;
}
.service-popup.show
{
    display: flex;
    animation: column-fade-in .8s ease;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.service-popup.show1
{
    display: flex;
    animation: column-fade-in1 .8s ease;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.service-popup .content
{
    box-shadow: 0 4px 10px #0000004d;
}
.customer-service
{
    box-shadow: 0 2px 8px #63636333;
    transition: width .2s linear,height .2s linear;
}
@media(max-width: 768px)
{
    .service-popup
    {
        bottom: 0;
        opacity: 1;
        left: 0;
        right: 0;
        top: 0;
    }
    .service-popup .content
    {
        position: relative;
        right: 0;
        top: 0;
        animation: column-fade .3s ease;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
    }
}
@keyframes column-fade
{
    0%
    {
        transform: translate(100%,-100%);
    }
    to
    {
        transform: translateY(0,0);
    }
}
@keyframes column-fade-in
{
    to
    {
        right: 100%;
        opacity: 1;
    }
}
@keyframes column-fade-in1
{
    to
    {
        left: 100%;
        right: auto;
        opacity: 1;
    }
}