html{cursor: url(/yunqi/img/imgs/1499563659.cur),auto;}
*{margin: 0;padding: 0}
.li{display: flex;align-items: center}
.nav>div:first-child{width: 1200px;min-width: 1200px;margin: 0 auto;justify-content: space-between;cursor: pointer;color: #333333;font-size: 16px;font-weight: bold}
.mid{width: 52%;justify-content: space-between;}
.mid>div{line-height: 40px;padding: 16px 0;width: calc(100% / 6);text-align: center}
.mid>div:hover{color: #426bf1}
.co{color: #426bf1;border-bottom: 3px solid #426bf1;padding-bottom: 22px}
.phone>img{transform: scale(.7);vertical-align: middle;margin-right: 6px}
.nav{    position: fixed;top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: white;}
.lb_div{margin-top: 72px}
.pos:hover>.tab{color: #000}
.tab{background: #FFFFFF;width: 100%;position: absolute;top: 71px;left: 0;z-index: 888;min-width: 1200px;padding: 10px calc((100% - 900px) / 2) 32px;box-sizing: border-box}/*justify-content: space-between;*/
.tab>div{padding: 16px;border: 1px solid #f5f5f5;border-radius: 4px;cursor: pointer;margin-right: 50px}
.tab>div:hover{background: #426bf1;color: #FFFFFF}
.content{width: 1200px;min-width: 1200px;margin: 0 auto;padding: 36px 0 100px}
body{font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif}


.public_project_list{overflow: hidden;margin-top: 40px;list-style: none}
.public_project_list .public_project_li{padding-bottom: 1px;float: left;margin-right: 20px;margin-bottom: 20px;border: 1px solid #e2e2e2;width: calc((100% - 46px) / 3)}
.public_project_list .public_project_li:nth-child(3n){margin-right: 0}
.public_project_pic{position: relative;overflow: hidden;padding-top: 30px;border-bottom: 1px solid #e2e2e2;}
.public_project_pic_type{float: left;position: relative;width: 130px;margin-top: 166px}
.public_project_pic_type img{width: 100%}
.public_project_pic_type span{font-size: 24px;color: white;position: absolute;left: 0;right: 0;top: 0;bottom: 0;display: flex;align-items: center;justify-content: center}
.public_project_image{float: left;width: 240px;height: 210px}
.public_project_title{position: absolute;left: 15px;top: 25px}
.public_project_title div:nth-of-type(1){font-size: 20px;font-weight: bold;color: #333333}
.public_project_title div:nth-of-type(2){margin: 5px 0;height: 2px;width: 50px;background: #4568DC}
.public_project_title div:nth-of-type(3){font-size: 12px;color: #666666}
.public_project_nr{padding: 0 15px;font-size: 13px;color: #999999;line-height: 20px;height: 60px;margin: 15px 0;}
.djhsl{overflow: hidden;text-overflow: ellipsis;white-space: normal;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}

/*首页*/
#index .lb_div{min-width: 1200px;font-size: 0;}
#index .lb_div .swiper-container{height: auto;}
#index .lb_div #html5zoo-1{width: 100% !important;}
#index .lb_div img{height: auto;width: 100% !important;}
#index .swiper-pagination-bullet-active{background: #FFFFFF !important;opacity: 1}

#index .fl{text-align: center;color: #a6a6a6;font-size: 16px;letter-spacing: 1px}
#index .tit{color: #333333 !important;font-size: 28px;font-weight: bolder;margin: 4px 0;font-family: "苹方 特粗";}
#index .lis{margin-top: 40px;align-items: normal}
#index .lis>div{width: calc((100% - 180px) / 4);margin-right: 60px;background: #f5f5f5;padding:36px 30px;box-sizing: border-box;border-radius: 6px;text-align: center;cursor: pointer}
#index .lis>div:last-child{margin-right: 0}
#index .lis>div:hover{background: #5f93f9;}
#index .lis>div:hover .num{color: #FFFFFF !important;}
#index .lis>div:hover .ti{color: #FFFFFF !important;}
#index .lis>div:hover .nr{color: #FFFFFF !important;}
#index .lis>div:hover img{animation: xuanzhuan 2.5s .15s linear infinite;}
#index .num{font-size: 50px;font-family: 楷体;color: #cccccc;line-height: 46px;font-weight: bolder;letter-spacing: -1px}
#index .nr{text-align: left;font-size: 14px;line-height: 28px;color: #4e4e4e;margin-bottom: 24px;height: 84px}
#index .ti{font-size: 21px;margin: 6px 0 10px;color: #4e4e4e}

#index .adv{background-image: url("/yunqi/img/imgs/index-advbg.png");min-width: 1200px}
#index .adv>div{padding-bottom: 50px}
#index .adv-ti{font-size: 28px;margin-bottom: 16px}
#index .adv-al{color: #FFFFFF}
#index .adv-lis{justify-content: space-between;margin-top: 46px}
#index .adv-lis img{transform: scale(0.9)}
#index .adv-lis>div{position: relative}
#index .adv-nr{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);text-align: center;margin-top: 22px;width: 80%;}
#index .ev h1{margin-bottom: 6px}
#index .ev p{color: #909090;line-height: 26px;font-size: 13px}
#index .od h1{margin-bottom: 6px;color: #FFFFFF;}
#index .od p{color: #FFFFFF;line-height: 26px;font-size: 13px}

#index .prod{margin-top: 30px}
#index .prod-lis{display: flex;align-items: center;flex-wrap: wrap;margin-top: 40px}
#index .prod-lis>div{width: calc((100% - 32px) / 3);margin-right: 16px;margin-bottom: 16px;cursor: pointer}
#index .prod-img>img{transition: all .5s ease;}
#index .prod-img{border-radius: 12px;overflow: hidden;height: 327px}
#index .prod-img:hover>img{transform: scale(1.1);}
#index .tex{font-size: 19px;color: #4b4b4b;margin: 10px 0}
#index .prod-lis>div:nth-child(3n){margin-right: 0}
#index .prod-btn{width: 170px;padding: 10px 0;background: #5f93f9;margin: 30px auto 0;text-align: center;color: #FFFFFF;cursor: pointer}

#index .pro{padding-top: 0}
#index .proc-tex{text-align: center;margin-top: 60px}
#index .proc-tit{font-size: 38px;color: #4e4e4e}
#index .proc-tit span{color: #5f93f9}
#index .proc-des{font-size: 16px;line-height: 34px;letter-spacing: 1px;margin-top: 14px;color: #727272}
#index .proc-ys{margin-top: 46px}
#index .proc-ys>div{width: calc(100% / 3);text-align: center}
#index .proc-num{font-size: 70px;letter-spacing: -4px;color: #4e4e4e}
#index .num-des{font-size: 16px;color: #727272;letter-spacing: 1px;margin-top: 6px}

#index .partner{background: #fafafa;min-width: 1200px}
#index .partner>div{padding-bottom: 50px;padding-top: 50px}
/*#index .part-lis{width: 100%;flex-wrap: wrap;margin-top: 50px;height: 200px;overflow: auto}*/
#index .part-lis>img{width: 232px;height: 101px;margin: 0 calc((100% - 232px * 4) / 3) 40px 0}
#index .part-lis>img:nth-child(4n){margin-right: 0}

#index .news>div{padding-bottom: 50px}
#index .news-lis{margin-top: 40px;align-items: normal}
#index .news-lis>div{width: calc((100% - 60px) / 3);margin-right: 30px;cursor: pointer}
#index .news-lis>div:hover{box-shadow: 0 0 20px #CCCCCC}
#index .news-lis>div:hover .news-tit{color: #5f93f9}
#index .news-lis>div:hover .text{color: #5f93f9}
#index .news-lis>div:last-child{margin-right: 0}
#index .new{padding: 14px;box-sizing: border-box}
#index .news-tit{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 18px;margin-bottom: 10px;color: #363636}
#index .news-nr{color: #828282;overflow: hidden;line-height: 23px;word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
#index .more{justify-content: space-between;margin-top: 24px;font-size: 13px;color: #828282;}
/*关于我们*/
#about .img{min-width: 1200px;position: relative}
#about .cont{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);text-align: center;color: #FFFFFF}
#about .fr-tex{font-size: 50px;letter-spacing: 5px}
#about .fr-des{font-size: 18px;margin: 45px 0;letter-spacing: 1px}
#about .fr-more{width: 180px;background: #5f93f9;margin: 0 auto;padding: 12px 0;box-sizing: border-box;border-radius: 10px;letter-spacing: 1px}
#about .fr-lis{align-items: normal;width: 1000px;position: relative;left: calc((100% - 1000px) / 2);top: -60px;box-sizing: border-box;font-size: 22px;color: #494949}
#about .fr-lis img{margin-bottom: 20px}
#about .fr-lis>div{width: calc(100% - 150px);margin-right: 50px;text-align: center;box-shadow: 0 0 10px #ebebeb;padding: 40px 0;border-radius: 6px;background: #FFFFFF}
#about .fr-lis>div:last-child{margin-right: 0}
#about .fr-lis>div:hover{background: #f1f9ff;color: #5f93f9}


#about .content{width: 1200px;min-width: 1200px;margin: 0 auto;padding: 42px 0 60px}
#about .intr{text-align: center;padding-top: 0px}
#about .intr h1{letter-spacing: 1px;margin-bottom: 20px;color: #333333}
#about .intr-text{font-size: 17px;line-height: 34px;color: #696969}

#about .culture{text-align: center}
#about .culture h1{margin-bottom: 12px;color: #333333}
#about .cul-lis{margin-top: 40px;align-items: normal}
#about .cul-lis>div{width: calc((100% - 150px) / 4);margin-right: 50px;border: 1px dashed #eeeeee;padding: 60px 0;}
#about .cul-lis>div:last-child{margin-right: 0px}
#about .cul-lis>div:hover{animation: xuanzhuan 0.5s 1;}
#about .cul-tex{font-size: 32px;color: #333333;margin-top: 14px}

#about .offer{background-image: url("/yunqi/img/imgs/about-bg.png");padding: 32px 0;text-align: center}
#about .offer h1{color: #FFFFFF;letter-spacing: 2px;font-size: 34px}
#about .off-btns{width: 500px;margin: 0 auto;justify-content: space-between;margin-top: 30px}
#about .off-btns>div{width: 200px;color: #5f93f9;background: #FFFFFF;padding: 12px 0;border-radius: 10px;font-size: 20px;font-weight: 600;cursor: pointer}

#about .link h1{text-align: center;color: #333333}
#about .link-lis{margin-top: 40px;padding: 34px 50px;box-sizing: border-box;box-shadow: 0 0 6px #ebebeb;border-radius: 10px}
#about .link-lis>div{width: calc(100% / 2)}
#about #map{width: calc(100% / 2);height: 300px;border-radius: 10px}
/*#about .text{padding-left: 50px;line-height: 50px;font-size: 17px;color: #6e6e6e}*/
/*案例详情*/
#case-detail .img{min-width: 1200px}
#case-detail .content{width: 1200px;min-width: 1200px;margin: 0 auto;padding: 42px 0 60px}

#case-detail .house{text-align: center}
#case-detail .hou-tex{color: #6b6b6b;margin-top: 18px;line-height: 32px;letter-spacing: 2px}
#case-detail .lb_div{min-width: 1200px;font-size: 0;width: 1200px;margin: 0 auto}
#case-detail .lb_div .swiper-container{height: auto;}
#case-detail .lb_div #html5zoo-1{width: 100% !important;}
#case-detail .lb_div img{height: auto;width: 100% !important;}
#case-detail .swiper-slide {text-align: center;font-size: 18px;background: #fff; 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;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;transition: 300ms;transform: scale(0.8);}
#case-detail .swiper-slide-active,.swiper-slide-duplicate-active{transform: scale(1);}

#case-detail .tj{margin-top: 26px}
#case-detail .fl{text-align: center;color: #a6a6a6;font-size: 16px;letter-spacing: 1px}
#case-detail .tit{color: #333333 !important;font-size: 28px;font-weight: bolder;margin: 4px 0;font-family: "苹方 特粗"}

#case-detail .tj-lis{align-items: normal;margin-top: 45px}
#case-detail .tj-lis>div{width: calc((100% - 98px) / 4);margin-right: 30px;border-radius: 12px;overflow: hidden;border: 1px solid #f5f5f5;cursor: pointer}
#case-detail .tj-lis>div:last-child{margin-right: 0}
#case-detail .tj-lis>div:hover{box-shadow: 0 0 10px #ebebeb}
#case-detail .tj-cont{padding: 16px 16px 22px;box-sizing: border-box;color: #333333}
#case-detail .tj-cont .tex{font-size: 17px;font-weight: 600;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
#case-detail .tj-cont .des{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin:8px 0}
#case-detail .tj-cont .more{text-align: right;font-size: 13px;color: #6b6b6b;}
#case-detail .tj-cont .more img{vertical-align: middle;transform: scale(0.8);margin-left: 3px}
/*案例*/
#case .img{min-width: 1200px}
#case .content{width: 1200px;min-width: 1200px;margin: 0 auto;padding: 42px 0 60px}
#case .tj{margin-top: 26px}
#case .fl{text-align: center;color: #a6a6a6;font-size: 16px;letter-spacing: 1px}
#case .tit{color: #333333 !important;font-size: 28px;font-weight: bolder;margin: 4px 0;font-family: "苹方 特粗"}

#case .tj-lis{align-items: normal;margin-top: 45px;flex-wrap: wrap}
#case .tj-lis>div{width: calc((100% - 98px) / 4);margin-right: 30px;margin-bottom: 30px;border-radius: 12px;overflow: hidden;border: 1px solid #f5f5f5;cursor: pointer}
#case .tj-lis>div:nth-child(4n){margin-right: 0}
#case .tj-lis>div:hover{box-shadow: 0 0 20px #ebebeb}
#case .tj-cont{padding: 16px 16px 22px;box-sizing: border-box;color: #333333}
#case .tj-cont .tex{font-size: 17px;font-weight: 600;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
#case .tj-cont .des{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;margin:8px 0}
#case .tj-cont .more{text-align: right;font-size: 13px;color: #6b6b6b;}
#case .tj-cont .more img{vertical-align: middle;transform: scale(0.8);margin-left: 3px}
#case .tj-xz{margin-top: 40px;border-radius: 6px;background: #eeeeee;overflow: hidden;color: #676767;font-size: 17px}
#case .tj-xz>div{width: calc(100% / 5);text-align: center;padding: 10px 0;cursor: pointer}
#case .cos{background: #5f93f9;border-radius: 6px;color: #FFFFFF !important;}
/*养老*/
#penison .img{min-width: 1200px}
#penison .content{width: 1200px;min-width: 1200px;margin: 0 auto;padding: 42px 0 60px}
#penison .align{text-align: center;}
#penison h1{color: #333333}
#penison .plan h1{margin-bottom: 20px}
#penison .plan p{color: #757575 !important;line-height: 34px;font-size: 17px}

#penison .sys-lis{justify-content: space-between;align-items: normal;margin-top: 40px}
#penison .sys-lis>div{cursor: pointer;width: calc((100% - 36px) / 4);margin-right: 12px;box-shadow: 0 0 10px #cdd8fc;border-radius: 6px;padding: 54px 22px 32px}
#penison .sys-lis>div:last-child{margin-right: 0}
#penison .sys-lis>div:hover{background: #5f93f9;}
#penison .sys-lis>div:hover .sys-tit{color: #FFFFFF !important;}
#penison .sys-lis>div:hover .sys-des{color: #FFFFFF !important;}
#penison .sys-lis>div:hover .sys-line{background: #ff9000;}
#penison .sys-tit{font-size: 22px;letter-spacing: 1px;color: #333333}
#penison .sys-line{width: 36%;margin: 16px auto 40px;height: 3px;border-radius: 10px;background: #5f93f9;}
#penison .sys-des{text-align: left;letter-spacing: 0.5px;line-height: 36px;color: #757575 }

#penison .tar{background: #f1f9ff;min-width: 1200px;font-size: 26px;font-weight: 600;margin-top: 20px}
#penison .tar-tit{width: 160px;}
#penison .fl{width: calc(100% - 160px);justify-content: space-between;color: #5f93f9}
#penison .fl>span{width: calc(100% / 7);text-align: center}
#penison .sec{margin-top: 60px}

#penison .frame>div{padding-bottom: 30px}
#penison .frame-lis{margin-top: 40px;border: 1px dashed #5f93f9;padding: 24px 110px;box-sizing: border-box;justify-content: space-between;color: #5f93f9;}
#penison .frame-lis img{margin-bottom: 10px}
#penison .frame-btn{flex-wrap: wrap;margin-top: 40px;color: #5f93f9}
#penison .frame-btn>div{width: calc((100% - 90px) / 4);margin-right: 30px;font-size: 24px;padding: 14px 0;box-sizing: border-box;border-radius: 80px;border: 1px solid #5f93f9;margin-bottom: 30px}
#penison .frame-btn>div:nth-child(4n){margin-right: 0}
#penison .fra-chose{margin-top: 40px;background: #eeeeee;font-size: 18px;color: #333333}
#penison .fra-chose>div{width: calc(100% / 6);padding: 16px 0;cursor: pointer}
#penison .cos{background: #5f93f9;color: #FFFFFF}

#penison .kjImg{margin-top: 80px}
/*房产*/

#prop .img{min-width: 1200px}
#prop .content{width: 1200px;min-width: 1200px;margin: 0 auto;padding: 42px 0 60px}
#prop .xcx{text-align: center;color: #333333}
#prop .xcx h1{margin-bottom: 10px;font-size: 30px}
#prop .xcx p{line-height: 30px;color: #3e3e3e;letter-spacing: 1px}
#prop .xcx-lis{width: 100%;justify-content: space-between;margin-top: 40px}
#prop .xcx-lis>div{width: calc((100% - 80px) / 5);margin-right: 20px;position: relative}
#prop .xcx-lis>div:last-child{margin-right: 0}
#prop .icon{position: absolute;top: calc(50% - 50px);right: -20px}
#prop .xcx-btn{width: 70%;border: 1px solid #74a1f9;margin: 14px auto 0;padding: 6px 0;border-radius: 60px;background: #f1f9ff;color: #74a1f9}
#prop .show{background: #f1f9ff;padding: 50px 0;min-width: 1200px}
#prop .show div{margin: 0 auto;width:1200px}

#prop .research img{min-width: 1200px}
#prop .align{text-align: center;padding-bottom: 30px;color: #333333;padding-top: 60px}
#prop .align p{margin-top: 16px}
#prop .res-lis{background-image: url("/yunqi/img/imgs/dc-yf.png");padding: 60px 0;min-width: 1200px}
#prop .res-lis>div{padding: 0}
#prop .res-fls>div{background: rgba(59,57,62,0.6);border-radius: 8px;color: #FFFFFF;width: 60%;padding: 20px 30px;box-sizing: border-box;margin: 0 auto}
#prop .res-fls>div:nth-child(2){margin: 40px auto }
#prop .res-tex{font-size: 26px;width: 80px;}
#prop .res-des{line-height: 36px;width: calc(100% - 100px);margin-left: 20px;font-size: 15px}

#prop .case{text-align: center;margin-top: 40px}
#prop .case video{margin-top: 40px}

#prop .sale>div{text-align: center}
#prop .sale-lis{margin-top: 90px;align-items: normal}
#prop .sale-fls{text-align: left;margin-left: 70px;font-size: 18px;width: calc(50% - 70px);color: #FFFFFF;letter-spacing: 1px}
#prop .sale-fls>div{height: 60px;line-height: 60px;background: #5f93f9;margin-bottom: 30px;border-radius: 80px;padding: 0 30px 0 40px;box-sizing: border-box}
#prop .sale-fls>div:last-child{margin-bottom: 0}

#prop .center{text-align: center}
#prop .cen-lis{padding: 20px;box-sizing: border-box;border: 1px solid #e1e1e1;border-radius: 8px;margin-top: 50px;align-items: normal}
#prop .cen-lis>div{width: calc(100% / 5);border-right: 1px dashed #e1e1e1;padding: 46px 20px }
#prop .cen-lis>div:last-child{border-right:none}
#prop .cen-tit{font-size: 24px;font-weight: 600;color: #393939;margin: 12px 0 24px}
#prop .cen-des{font-size: 14px;line-height: 24px;color: #686868}

#prop .achieve{text-align: center}
#prop .ach-lis{color: #717171;font-size: 20px;justify-content: space-between;margin-top: 80px}
#prop .ach-lis img{margin-bottom: 24px}
#prop .ach-lis span{font-size: 50px}
#prop .co1{color: #87c94e}
#prop .co2{color: #4b87f1}
#prop .co3{color: #7765f3}
#prop .co4{color: #fa6470}

@keyframes xuanzhuan {
    from {
        transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        animation-timing-function: linear;
    }
    20% {
        transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, -300deg);
        animation-timing-function: linear;
    }
    40% {
        transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, -240deg);
        animation-timing-function: linear;
    }
    60% {
        transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, -180deg);
        animation-timing-function: linear;
    }
    80% {
        transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, -60deg);
        animation-timing-function: linear;
    }
    to {
        transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);;
        animation-timing-function: linear;
    }
}



.foot{padding: 20px 0 0;background: #212121;min-width: 1200px}
/*.foot span{color: #ecba40}*/
.foot-fr img{vertical-align: middle;margin-right: 8px}
.foot-lis{justify-content: space-between;width: 1200px;min-width: 1200px;padding: 14px 100px 30px;margin: 0 auto 40px;box-sizing: border-box;color: #FFFFFF;font-size: 18px;border-bottom: 1px solid #313131}
.foot-lis img{vertical-align: middle;transform: scale(0.8);margin-right: 6px}
.foot-nr{width: 1200px;min-width: 1200px;padding: 0 100px 20px;box-sizing: border-box;color: #6f6f71;margin: 0 auto;line-height: 32px;font-size: 14px;justify-content: space-between}
.foot-tex{font-size: 18px;padding-left: 10px;border-left: 2px solid #5f93f9;line-height: 24px;margin-bottom: 6px;color: #FFFFFF !important;}
.code{width: 120px;height: 120px;background: #FFFFFF}
.erCode>div:first-child{margin-right: 100px}
.erCode{font-size: 12px;text-align: center}
.bot{background: #131313;text-align: center;padding: 14px 0}
.link{color: #ababab;font-size: 12px;}
.link a{margin-right: 8px;color: #ababab;text-decoration: none;line-height: 20px}
/*.link a:hover{color: #5f93f9;text-decoration: none}*/
.copy{font-size: 12px;margin-top: 10px;color: #ababab}
.copy a{color: #ababab;text-decoration: none}
.bot a:hover{color: #5f93f9;}
.bot-fls{width: 1200px;min-width: 1200px;margin: 0 auto;text-align: left;padding: 0 100px;box-sizing: border-box}


/*右侧*/
.suspension{position: fixed;top:60%;right: 0;z-index: 555}
.suspension>div{cursor: pointer;position: relative;width: 50px;height: 50px;background: #426bf1;justify-content: center;margin-top: 5px;text-align: center;color: #FFFFFF}
.suspension>a{cursor: pointer;position: relative;width: 50px;height: 50px;background: #426bf1;justify-content: center;margin-top: 5px;text-align: center;color: #FFFFFF}

.su-call{transition: all 0.5s;font-size: 18px;position: absolute;height: 50px;right: 48px;top: 0;overflow: hidden;white-space: nowrap;width: 0px;background: #00F7DE;line-height: 50px;text-align: center;background: rgba(66,107,241,0.8);border-radius: 50px 0 0 50px;}
.phone:hover .su-call{width: 160px;}
.su-code{position: absolute;right: 50px;width: 0;height: 0;transition: all 0.5s;justify-content: center;overflow: hidden}
/*.sus-code:hover .su-code{width: 120px;height: 120px;right: 56px}*/
.sus-code:hover .su-code{width: 140px;height: 140px;right: 56px;background: rgba(0,0,0,0.6)}