section{width:100%;height:90vh;display:flex;justify-content:center;align-items:center;border:1px solid #ddd}section .title{font-size:2em;font-weight:900}.nav-list.user-nav{position:fixed;display:flex;justify-content:flex-start;top:200px;left:320px}.nav-list.user-nav .type-nav{padding:10px 20px}.nav-list.user-nav .type-nav:hover{position:relative}.nav-list.user-nav .type-nav:hover:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:#a1a1a1}.nav-list.user-nav .type-nav.active,.nav-list.user-nav .type-nav.current{font-weight:700;position:relative}.nav-list.user-nav .type-nav.active:after,.nav-list.user-nav .type-nav.current:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:#a1a1a1}.nav-list.list{position:fixed;right:0;top:200px;margin-top:30px;padding:10px 20px;width:15%;min-width:300px;border-left:2px solid #ddd}.nav-list.list .type-nav{cursor:pointer;padding:5px}.nav-list.list .type-nav.active,.nav-list.list .type-nav.current,.nav-list.list .type-nav:hover{font-weight:700}.nav-list.dot{position:fixed;right:0;top:50%;padding:30px;transform:translateY(-50%)}.nav-list.dot .type-nav{background-color:#454545;width:16px;height:16px;border-radius:50%;margin:10px;position:relative;border:1px solid #fff;opacity:.16}.nav-list.dot .type-nav span.name{display:none;position:absolute;font-weight:600;padding:5px 10px;border-radius:4px;margin-right:10px;width:-moz-max-content;width:max-content;top:50%;right:100%;background-color:#454545;color:#fff;box-shadow:0 0 5px rgba(0,0,0,.16);transform:translateY(-50%)}.nav-list.dot .type-nav span.name:after{content:"";border-bottom:5px solid #454545;border-top:5px solid transparent;border-left:5px solid transparent;border-right:5px solid transparent;position:absolute;top:calc(50% - 5px);left:100%;transform:rotate(90deg)}.nav-list.dot .type-nav:hover{opacity:1}.nav-list.dot .type-nav:hover span.name{display:inline-block}.nav-list.dot .type-nav.active{opacity:1}