@keyframes myCircle {
    0% {
        transform: scale(0.5);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@-moz-keyframes myCircle /* Firefox */
{
    0% {
        transform: scale(0.5);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@-webkit-keyframes myCircle /* Safari 和 Chrome */
{
    0% {
        transform: scale(0.5);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@-o-keyframes myCircle /* Opera */
{
    0% {
        transform: scale(0.5);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@keyframes myCircle3 {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@-moz-keyframes myCircle3 /* Firefox */
{
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@-webkit-keyframes myCircle3 /* Safari 和 Chrome */
{
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@-o-keyframes myCircle3 /* Opera */
{
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.myCircle {
    animation: myCircle 2.8s ease infinite;
    -moz-animation: myCircle 2.8s ease infinite; /* Firefox */
    -webkit-animation: myCircle 2.8s ease infinite; /* Safari 和 Chrome */
    -o-animation: myCircle 2.8s ease infinite; /* Opera */
    /*animation-direction:alternate;*/
}

.myCircle2 {
    animation: myCircle 2.8s ease-in-out infinite;
    -moz-animation: myCircle 2.8s ease-in-out infinite; /* Firefox */
    -webkit-animation: myCircle 2.8s ease-in-out infinite; /* Safari 和 Chrome */
    -o-animation: myCircle 2.8s ease-in-out infinite; /* Opera */
    /*animation-direction:alternate;*/
}

.myCircle3 {
    animation: myCircle3 1.5s ease-out infinite;
    -moz-animation: myCircle3 1.5s ease-out infinite; /* Firefox */
    -webkit-animation: myCircle3 1.5s ease-out infinite; /* Safari 和 Chrome */
    -o-animation: myCircle3 1.5s ease-out infinite; /* Opera */
    /*animation-direction:alternate;*/
}

@keyframes myfirst {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;

    }
}

@-moz-keyframes myfirst /* Firefox */
{
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fadein {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@-moz-keyframes fadein {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@-webkit-keyframes fadein {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@-o-keyframes fadein {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

@-o-keyframes myfirst /* Opera */
{
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.hi1 {
    animation: myfirst 2.5s ease-in-out infinite;
    -moz-animation: myfirst 2.5s ease-in-out infinite; /* Firefox */
    -webkit-animation: myfirst 2.5s ease-in-out infinite; /* Safari 和 Chrome */
    -o-animation: myfirst 2.5s ease-in-out infinite; /* Opera */
    /*animation-direction:alternate;*/
    -ms-transform-origin: bottom right; /* IE 9 */
    -webkit-transform-origin: bottom right; /* Safari and Chrome */
    -moz-transform-origin: bottom right; /* Firefox */
    -o-transform-origin: bottom right; /* Opera */

}

.onlineService {
    position: relative;
    width: 100px;
    height: 180px;
    margin-left: 55px;
    border: 2px solid #0d87ff;
    background: #0d87ff;
    border-radius: 100px 100px 0 60px;
    cursor: pointer;
}

.avater {
    position: absolute;
    width: 60px;
    height: 60px;
    left: 50%;
    transform: translateX(-50%);
    top: -70px;
    border-radius: 100%;
    background-color: #d4e2ff;
    z-index: 2;

}

.circle {
    position: absolute;
    width: 70px;
    height: 70px;
    left: 18px;
    top: -70px;
    border-radius: 100%;
    background-color: #d4e2ff;
    opacity: 0.17;
    transition: all 5s;
    z-index: 1;
}

.circle_scale {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    border: 2px solid #3083EB;
    opacity: 0.12;
    z-index: 1;
}

.hi {
    position: absolute;
    left: -4px;
    top: -80px;
    border-radius: 5px 5px 0 5px;
    transition: all 10s;
    width: 27px;
    height: 19px;
    z-index: 3;
}

.hi img {
    display: block;
    width: 31px;
    height: 24px;
}

.onlineService > .wenzi,
.onlineService .dianji {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 35px;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

.wenzi > p {
    letter-spacing: 1px;
    line-height: 19px;
    margin: 0;
}

.wenzi2 > p {
    font-size: 12px;
    font-family: MicrosoftYaHei;
    color: #333333;
    line-height: 16px;
}

.fs-16.f-bold p {
    font-size: 14px;
    font-weight: bolder;
    margin-top: 3px;
}

.wenzi2 > p:first-child {
    margin-top: 10px;
}

.onlineService .dianji {
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    background: #fff;
    color: #0081ff;
    border-radius: 3px;
    margin-top: 3px;
    padding: 1px 1px;
    font-size: 13px;
    width: 68px;
    font-weight: 600;
}

.right_box {
    /* width: 88px; */
    height: 468px;
    background: #FFFFFF;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.12);
    border-radius: 9px 9px 0 0;
    border: 1px solid #EEEEEE;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    transition: 0.5s all;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.right_box img {
    -webkit-user-drag: none;
}
.right_box li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
    width: 100%;
    cursor: pointer;
}

.right_box .hot_line {
    padding: 18px 5px 14px;
}

.right_box .download_app {
    padding: 12px 5px 16px;
    /* padding: 16px 5px 16px; */
}

.right_box .customer_show {
    padding: 16px 5px 16px;
}

.right_box .hot_line, .right_box .download_app, .right_box .customer_show {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.right_box .show_hot, .right_box .show_download {
    position: absolute;
    display: none;
    top: -15px;
    right: 85px;
    width: 334px;
}

.right_box .show_zixun {
    position: absolute;
    display: none;
    top: 0px;
    right: 85px;
    width: 226px;
}

.right_box .show_hot .img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding: 42px 40px 0;
    height: 140px;
    background: url(/front/img/index/tel_bg.png) no-repeat center center/cover;
    text-align: left;
}

.right_box .show_hot .img .title {
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #333333;
    line-height: 14px;
}

.right_box .show_hot .img .phone-number {
    padding: 15px 0 0;
    font-size: 28px;
    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
    font-weight: bold;
    color: #3083EB;
    line-height: 28px;
    letter-spacing: 1px;
}
.fw{
    font-weight: bold;
}

.right_box .show_zixun .img3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding: 38px 48px 0 38px;
    height: 90px;
    left: 130px;
    background: url(/front/img/index/zixun_bg.png) no-repeat center center/cover;
    text-align: left;
}

.right_box .show_zixun .img3 .title {
    width: 140px;
    height: 14px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #333333;
    line-height: 14px;
}

.right_box .show_download .img2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding: 27px 35px 0 27px;
    height: 218px;
    background: url(/front/img/index/qr_bg.png) no-repeat center;
    background-size: 100% 100%;
    text-align: center;
}

.right_box .show_download .img3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding: 27px 37px 0 27px;
    height: 215px;
    background: url(/front/img/index/qr_bg.png) no-repeat center ;
    background-size: 100% 100%;
    text-align: center;
}

.right_box .show_download .img2 .tips-qr ,
.right_box .show_download .img3 .tips-qr {
    height: 14px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #333333;
    line-height: 14px;
    margin-top: 8px;
}

.show-right-float {
    margin-top: -1px;
    height: 24px;
    background: #F5F6F7;
    border-radius: 0 0 9px 9px;
    width: 100%;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
    border: 1px solid #EEEEEE;
    border-top: 0;
}
.show-right-float img {
    vertical-align: bottom;
    margin-bottom: 1px;
    width: 10px;
}
.show-right-float img.down-img {
    transform: rotate(0deg);
}
.show-right-float img.up-img {
    transform: rotate(-180deg);
    margin-bottom: 2px;
}

.tips-down {
    padding-top: 6px;
    font-size: 13px;
    font-family: MicrosoftYaHei;
    color: #3083EB;
}

.pd-t {
    padding-top: 1px !important;
}

.right_box .show_download {
    width: 180px !important;
}

.right_box .hot_line:hover .show_hot, .right_box .customer_show:hover .show_zixun, .right_box .download_app:hover .show_download {
    display: block;
    animation: fadein 300ms ease-in-out;
    -moz-animation: fadein 300ms ease-in-out; /* Firefox */
    -webkit-animation: fadein 300ms ease-in-out; /* Safari 和 Chrome */
    -o-animation: fadein 300ms ease-in-out; /* Opera */
}

.line_btm {
    width: 68px;
    height: 1px;
    background: #E5E5E5;
}

.circle_show {
    margin: 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    border: 2px solid #3083EB;
}

/*ie10/11兼容样式*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .floating-window {
        right: 20px !important;
    }

    .myCircle3 {
        left: 20px;
    }
}