.cur_wrap_sidebar ul{ position: fixed; top: 70%; //margin-top: -162px; margin-right:45px; right: 0; z-index: 1000; } .cur_wrap_sidebar ul li{ width: 56px; height: 56px; position: relative; font-size: 16px; color: #fff; border-radius: 4px; margin-bottom: 5px; } .cur_wrap_sidebar ul li .wrap_btn{ overflow: hidden; /*border-bottom: 1px solid rgba(255, 255, 255, 0.4);*/ width: 56px; height: 56px; position: absolute; right: 0; background:rgba(120,127,144,0.65); text-align: center; line-height: 56px; cursor: pointer; transition: width 0.3s ease; -webkit-transition: width 0.3s ease; -o-transition: width 0.3s ease; -moz-transition: width 0.3s ease; } .cur_wrap_sidebar ul li .wrap_btn .iconfont{ font-size: 20px; color: #fff; } .cur_wrap_sidebar ul li span{ vertical-align: middle; } .cur_wrap_sidebar ul li span.text{ display: none; padding-bottom: 1px; } .cur_wrap_sidebar ul li.li_one .wrap_btn{ border-radius: 2px 0 0 0; } .cur_wrap_sidebar ul li:hover.li_two .wrap_btn, .cur_wrap_sidebar ul li:hover.li_four .wrap_btn{ background-color:#dab866; } //.cur_wrap_sidebar ul li:hover span.text{ // display: inline-block; //} //.cur_wrap_sidebar ul li:hover span.iconfont{ // margin-right: 8px; //} .cur_wrap_sidebar ul li.li_two:hover .wrap_left, .cur_wrap_sidebar ul li.li_four:hover .wrap_left{ visibility: visible; transition-property: visibility; -webkit-transition-property: visibility; -o-transition-property: visibility; -moz-transition-property: visibility; transition-delay: 0.2s; -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; -moz-transition-delay: 0.2s; } .cur_wrap_sidebar ul li.li_two .wrap_left{ position: absolute; left: -143px; top: 0; visibility: hidden; border-bottom: 1px solid rgba(230, 232, 238, 0.17); box-shadow: 5px 5px 5px #69808c; } .cur_wrap_sidebar ul li.li_four .wrap_left{ position: absolute; left: -120px; top: 0; visibility: hidden; border-bottom: 1px solid rgba(230, 232, 238, 0.17); box-shadow: 5px 5px 5px #69808c; } .cur_wrap_sidebar ul li.li_two .wrap_left .wrap_img p, .cur_wrap_sidebar ul li.li_four .wrap_left .wrap_img p{ font-size: 14px; color: #555; line-height: 20px; } .cur_wrap_sidebar ul li.li_two .wrap_left .wrap_img, .cur_wrap_sidebar ul li.li_four .wrap_left .wrap_img{ background: rgba(255,255,255,1); box-shadow: 0px 1px 12px 0px rgba(230,230,230,0.5); border: 1px solid rgba(241,243,245,1); } .cur_wrap_sidebar ul li.li_two .wrap_left:after, .cur_wrap_sidebar ul li.li_four .wrap_left:after{ content: ''; width: 10px; height: 10px; border-right: 1px solid rgba(241,243,245,1); border-top: 1px solid rgba(241,243,245,1); transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); position: absolute; right: 5px; top: 20px; background: #fff; } .cur_wrap_sidebar ul li.li_four .wrap_left .wrap_img img{ width: 70px; height: 70px; } .cur_wrap_sidebar ul li.li_five .wrap_btn{ border-radius: 2px 0 0 2px; border: none; } /*----CONSULT-20200615-----*/ .consult{ z-index: 600; position: fixed; right: 40px; bottom: 80px; } .consult-button { position: relative; width: 72px; height: 72px; border-radius: 50%; background-color: #328ce4; box-shadow: 0 13px 28px 0 rgba(0,0,0,.2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .consult-button .icon-gif{ width: 52px; height: 52px; } .consult-button .icon-gif:hover{ -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); }