@charset "utf-8";



#btn-customer-service.btn-scroll-top, #fav-notification.btn-scroll-top {

    background: none;

    bottom: 30px;

    visibility: visible;

    opacity: 1;

    width: auto;

    z-index: 60;

}



#btn-customer-service.btn-scroll-top {

    z-index: 109;

}



    #btn-customer-service.btn-scroll-top.scrolling-down {

        bottom: 30px; /*220510 修*/

    }



#btn-customer-service .button {

    width: 44px;

    color: transparent;

    font-size: 18px !important;

    background: #77c6e3;

    font-weight: bold;

    text-align: left;

    padding: 0.5rem 0.5rem 0.5rem 0.8rem !important;

    padding-left: 0.8rem;

    line-height: 1.4;

    box-shadow: none;

    transition: all .4s;

    min-width: auto;

    animation: btnClose 6s;

    animation-iteration-count: 1;

    animation-fill-mode: forwards;

}



    #btn-customer-service .button .icon-chatbot {

        position: absolute;

        top: 1px;

        right: -4px;

        max-width: none;

        width: 49px;

        height: 45px;

    }



#fav-notification {

    bottom: 86px !important;

    z-index: 29;

}



    #fav-notification.btn-scroll-top.scrolling-down {

        bottom: 142px !important;

    }



    #fav-notification .button {

        margin-top: 0;

        font-size: 18px;

        font-weight: bold;

        padding: 0.45rem 0.65rem 0.5rem 0.65rem;

        text-align: left;

        line-height: 1.5;

        box-shadow: none;

        transition: all .4s;

        min-width: 44px;

    }



        #fav-notification .button:hover {

            background: #ff874d !important;

            font-size: 18px !important;

            color: #fff !important;

            width: 128px !important;

            transform: scale(1);

        }



        #fav-notification .button .iconic.in-text {

            position: fixed;

            right: 0;

            top: 0;

            background-color: #ff874d;

            width: 44px;

            height: 44px;

            padding: 0;

            border-radius: 50%;

            transform: translateY(0);

            margin-right: 0px;

        }



#btn-scroll-top .icon-arrow-up {

    width: 0.8rem;

    height: 0.8rem;

}



#btn-customer-service {

    font-size: 18px;

    justify-content: flex-end;

    border-radius: 100px;

}



    #btn-customer-service:hover {

        width: 102px;

        color: #fff;

    }



        #btn-customer-service:hover .button {

            animation: btnOpen 0.4s;

            animation-iteration-count: 1;

            animation-fill-mode: forwards;

            padding: 0.5rem 0.5rem 0.5rem 0.8rem;

            font-size: 18px;

            width: 102px;

        }



   

/*#btn-customer-service .button:hover {animation: none; color: #fff; transform: scale(1);}*/



@keyframes btnClose {

    0% {

        width: 102px;

        color: #fff;

    }



    90% {

        width: 102px;

        color: #fff;

    }



    100% {

        width: 44px;

    }

}



@keyframes btnOpen {

    0% {

        width: 44px;

    }



    50% {

        color: #fff;

        font-size: 18px;

        transform: scale(1);

    }



    100% {

        color: #fff;

        font-size: 18px;

        transform: scale(1);

        width: 102px;

    }

}