@charset "UTF-8";
@keyframes expandUp { from { height: 0;
    opacity: 0;
    /* 可选：开始时透明 */ }
  to { height: 72px;
    /* 目标高度 */
    opacity: 1;
    /* 可选：结束时完全不透明 */ } }

@keyframes expandDown { from { height: 72px;
    opacity: 1;
    /* 可选：开始时透明 */ }
  to { height: 0;
    /* 目标高度 */
    opacity: 0;
    /* 可选：结束时完全不透明 */ } }

.right-hover { position: fixed; top: 50%; transform: translateY(-50%); right: 0; width: 92px; z-index: 9999; }

.right-hover .hide { display: none; }

.right-hover #consult { margin-bottom: -4px; cursor: pointer; position: relative; left: -3px; }

.right-hover #consult i { width: 98px; height: 98px; background: url("../images/yg-43ca8f13b3.png") no-repeat center center; background-size: 100%; }

.right-hover > ul { width: 72px; padding: 8px 0; background-color: #fff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); border-radius: 12px; margin-left: 10px; }

.right-hover > ul > li { height: 72px; position: relative; }

.right-hover > ul > li > a { padding-top: 16px; height: 56px; display: block; text-align: center; font-size: 0; }

.right-hover > ul > li > a > i { position: relative; width: 28px; height: 28px; display: block; margin: 0 auto; background-position: center; background-repeat: no-repeat; background-size: 100%; }

.right-hover > ul > li > a > span { display: block; height: 18px; line-height: 18px; margin-top: 2px; font-size: 12px; color: #333; }

.right-hover > ul > li > a em { position: absolute; font-size: 12px; background-color: #ff0000; color: #fff; width: 22px; height: 14px; line-height: 14px; top: -4px; right: -10px; text-align: center; border-radius: 8px; }

.right-hover > ul > li.down-app { position: relative; }

.right-hover > ul > li.down-app i { background-image: url("../images/download-609ddad61a.png"); }

.right-hover > ul > li.down-app .second-center { position: absolute; display: none; left: -190px; top: 0; width: 180px; height: 233px; }

.right-hover > ul > li.down-app .second-center img { width: 100%; height: 100%; }

.right-hover > ul > li.go-buy i { background-image: url("../images/buy-054d95da11.png"); }

.right-hover > ul > li.go-sell i { background-image: url("../images/sell-1f83e24860.png"); }

.right-hover > ul > li.go-shopCar i { background-image: url("../images/car-b01eaf6db9.png"); }

.right-hover > ul > li.go-collect i { background-image: url("../images/collect-f74a430c3b.png"); }

.right-hover > ul > li.go-order-detail { display: none; }

.right-hover > ul > li.go-order-detail i { background-image: url("../images/message-86214b8baa.png"); }

.right-hover > ul > li.go-top { display: none; }

.right-hover > ul > li.go-top i { background-image: url("../images/go-top-72e0cc7e05.png"); }

.right-hover > ul > li.go-top.expand-up { height: 0; /* 初始高度为0 */ overflow: hidden; /* 防止内容溢出 */ animation: expandUp 1s ease-out forwards; /* 应用动画 */ }

.right-hover > ul > li.go-top.expand-down { height: 0; /* 初始高度为0 */ overflow: hidden; /* 防止内容溢出 */ animation: expandDown 1s ease-out forwards; /* 应用动画 */ }

.right-hover > ul > li:hover span { color: #FF5B01; }

.right-hover > ul > li:hover.down-app i { background-image: url("../images/download_active-fcf053b190.png"); }

.right-hover > ul > li:hover.go-buy i { background-image: url("../images/buy_active-c81ba748af.png"); }

.right-hover > ul > li:hover.go-sell i { background-image: url("../images/sell_active-564dd243e9.png"); }

.right-hover > ul > li:hover.go-shopCar i { background-image: url("../images/car_active-8a14115d1f.png"); }

.right-hover > ul > li:hover.go-collect i { background-image: url("../images/collect_active-57c47f2557.png"); }

.right-hover > ul > li:hover.go-order-detail i { background-image: url("../images/message_active-1783595546.png"); }

.right-hover > ul > li:hover.go-top i { background-image: url("../images/go-top-active-1d2585a574.png"); }

.goodschat-box { position: fixed; right: 0; top: 94px; max-height: 306px; width: 435px; overflow: hidden; z-index: 2347483646; transition: move 1s linear; }

.goodschat-box .goodschat-li { padding: 16px; background: #FFFFFF; height: 86px; width: 341px; box-sizing: border-box; box-shadow: 0px 0px 12px 0px rgba(4, 20, 71, 0.15); margin-bottom: 24px; transition: height 0.1s ease,margin-top 0.1s ease; animation: move 0.5s linear; -webkit-animation: move 0.5s linear; overflow: hidden; cursor: pointer; }

.goodschat-box .goodschat-li > div { float: left; }

.goodschat-box .goodschat-li .goods-img { width: 54px; height: 54px; border-radius: 10px; overflow: hidden; margin-right: 10px; }

.goodschat-box .goodschat-li .goods-img img { width: 100%; height: 100%; object-fit: cover; }

.goodschat-box .goodschat-li p { color: #333333; font-size: 14px; }

.goodschat-box .goodschat-li .last-msg { color: #999999; margin-top: 8px; width: 215px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.goodschat-box .goodschat-li .close-icon { height: 54px; line-height: 54px; }

.goodschat-box .goodschat-li .close-icon i { vertical-align: middle; background: url(../images/icon-close-d307ed2690.png) no-repeat 0px 0px; background-size: 100% 100%; width: 20px; height: 20px; cursor: pointer; }

.goodschat-box .moveright { animation: move-right 0.5s linear; -webkit-animation: move-right 0.5s linear; }

@keyframes move { 0% { margin-left: 100px; }
  100% { margin-left: 0; } }

@keyframes move-right { 0% { margin-top: 0px;
    opacity: 1; }
  100% { margin-top: -100px;
    opacity: 0; } }