@charset "utf-8";

ul {
    margin: 0 !important;
}

.side {
    position: fixed;
    width: 78px;
    right: 0;
    top: 50%;
    margin-top: -200px;
    z-index: 100;
    border: 1px solid #e0e0e0;
    background: #fff;
    border-bottom: 0
}

    .side ul li {
        width: 76px;
        height: 78px;
        float: left;
        position: relative;
        border-bottom: 1px solid #e0e0e0;
        color: #333;
        font-size: 13px;
        line-height: 38px;
        text-align: center;
        transition: all .3s;
        cursor: pointer;
        left: -40px;
    }

        .side ul li:hover {
            background: rgb(236,66,0);
            color: #fff
        }

            .side ul li:hover a {
                color: #fff
            }

        .side ul li i {
            height: 25px;
            margin-bottom: 1px;
            display: block;
            overflow: hidden;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: auto 25px;
            margin-top: 13px;
            transition: all .3s
        }

            /*    .side ul li i.bgs1 {
        background-image: url(/images/v_en_3.0/u/whatapp_b.png);
    }*/
            .side ul li i.bgs0 {
                background-image: url(/images/v_en_3.0/u/skype_b.png);
            }


            .side ul li i.bgs3 {
                background-image: url(/images/v_en_3.0/u/email_b.png)
            }

            .side ul li i.bgs4 {
                background-image: url(/images/v_en_3.0/u/whatapp_b.png)
            }
            .side ul li i.bgs6 {
                background-image: url(/images/v_en_3.0/u/right_pic6_on.png)
            }
 
/*
            .side ul li i.bgs5 {
                background-image: url(/images/right_pic3.png)
            }

            

        .side ul li:hover i.bgs1 {
            background-image: url(/images/dc835d97262678f84dd13160624b017.png);
            background-size: 28px 28px;
        }

        .side ul li:hover i.bgs2 {
            background-image: url(/images/right_pic7.png)
        }

        .side ul li:hover i.bgs3 {
            background-image: url(/images/2c0a04ba94de18497dcca6c837db3aa.png)
        }

        .side ul li:hover i.bgs4 {
            background-image: url(/images/3ba38deb10b9b6b374815693db42b04.png)
        }

        .side ul li:hover i.bgs5 {
            background-image: url(/images/right_pic3.png)
        }*/

        .side ul li .sidebox {
            position: absolute;
            width: 78px;
            height: 78px;
            top: 0;
            right: 0;
            transition: all .3s;
            overflow: hidden
        }

        .side ul li.sidetop {
            background: rgb(236,66,0);
            color: #333
        }

            .side ul li.sidetop:hover {
                background: rgb(236,66,0);
                color: #fff
            }

        .side ul li.sideewm .ewBox.son {
            width: 238px;
            display: none;
            color: #363636;
            text-align: center;
            padding-top: 235px;
            position: absolute;
            left: -240px;
            top: 0;
            background-image: url(/images/leftewm.png);
            background-repeat: no-repeat;
            background-position: center center;
            border: 1px solid #e0e0e0
        }

        .side ul li.sideetel .telBox.son {
            width: 240px;
            height: 109px;
            display: none;
            color: #fff;
            text-align: left;
            position: absolute;
            left: -240px;
            top: 0px;
            background: rgb(236,66,0);
        }

        .side ul li.sideetel .telBox dd {
            display: block;
            height: 118.5px;
            overflow: hidden;
            padding-left: 82px;
            line-height: 24px;
            font-size: 18px
        }

            .side ul li.sideetel .telBox dd span {
                display: block;
                line-height: 28px;
                height: 28px;
                overflow: hidden;
                margin-top: 32px;
                font-size: 18px
            }

            .side ul li.sideetel .telBox dd.bgs1 {
                background: url(/images/right_pic8.png) 28px center no-repeat;
                background-color: var(--main-color)
            }

            .side ul li.sideetel .telBox dd.bgs2 {
                background: url(../images/right_pic9.png) 28px center no-repeat
            }

        .side ul li:hover .son {
            display: block !important;
            animation: fadein 1s
        }

@keyframes fadein {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}