.box{margin:40px 0;position:fixed;z-index:1000}
.change-type{min-width:40px;min-height:160px;position:absolute;z-index:99;left:0;top:0;display:flex}
.change-type .type-left{width:0;background:rgba(255,255,255,.96);height:100%;box-shadow:0 12px 32px rgba(15,23,42,.18);border-bottom-right-radius:14px;border-top-right-radius:14px;margin-left:-40px;overflow:hidden;transition:width .35s ease;backdrop-filter:blur(12px)}
.change-type .showListType{width:130px;transition:width .35s ease}
.change-type .type-left ul{margin-bottom:0;padding-left:0}
.change-type .type-left ul li{line-height:40px;height:40px;text-align:left;width:100%;position:relative;cursor:pointer;list-style:none}
.change-type .type-left ul li a{display:block;height:100%;position:absolute;left:0;top:0;z-index:9;padding-left:15px;overflow:hidden;width:calc(100% - 17px);color:#374151;font-size:14px;border-left:2px solid #7c3aed}
.change-type .type-left ul li span{display:block;position:absolute;width:0;height:100%;left:0;top:0;z-index:8;overflow:hidden;transition:width .35s ease}
.change-type .type-left ul li:hover span{transition:width .35s ease}
.type-left ul li:hover span,.type-left ul li.active span{background:linear-gradient(135deg,#6677ff,#7a48e8);width:100%;box-shadow:0 4px 12px rgba(102,87,242,.24)}
.type-left ul li:hover a,.type-left ul li.active a{border-left:2px solid #7a48e8;color:#fff}
ul.navbar-nav.mr-auto{margin-left:46px}
.type-right{position:fixed;top:38px;left:18px;width:36px;height:36px;border-radius:18px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(15,23,42,.12);cursor:pointer}
.type-right svg{width:22px;height:22px}
.type-right svg path{fill:#fff}
@media screen and (max-width:992px){.type-right{position:fixed;top:13px;right:58px;left:auto}}