.main{
    width: 1200px;
    height: auto;
    min-height: 600px;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin: 0 auto 30px;
}

.sidebar{width: 200px; background-color: #FFFFFF; position: sticky; top: calc(var(--header-height) + 15px);}
.sidebar .title{width: 100%; height: 80px; background-color: #2259fd; line-height: 80px; font-size: 18px; font-weight: bold; color: #ffffff; padding-left: 33px; box-sizing: border-box;}
.sidebar .list{width: 100%; height: auto; box-sizing: border-box; border: 1px solid #e5e5e5; padding: 10px;}
.sidebar .list .listItem{height: 60px; font-size: 1.6rem; line-height: 60px; display: flex; padding-left: 33px; font-weight: bold; position: relative; border-bottom: 1px dashed #e5e5e5;}
.sidebar .list .listItem:last-child{border-bottom: none}
.sidebar .list .listItem::before{content: ''; position: absolute; width: 6px; height:6px; border-radius: 3px; background-color: #d1d1d1; top: 50%; margin-top: -3px; left: 16px;}
.sidebar .list .listItem:hover,.sidebar .list .listItem.active{color: var(--theme-color);}
.sidebar .list .listItem:hover::before, .sidebar .list .listItem.active::before{background-color: var(--theme-color);}

.content{flex: 1; display: flex; flex-direction: column; padding: 15px 15px 0; background-color: #ffffff; min-height: 700px;}
.content .title{font-size: 2rem; line-height: 4rem; padding: 30px; text-align: center; font-weight: 100;}
.content .attr{border-bottom: dashed 1px #e5e5e5; line-height: 40px; color: #7e7e7e; display: flex; align-items: center; justify-content: center; gap: 40px;}
.content .text, .content .text *{all: revert;}
.content .text{line-height: 1.5; min-height: 600px; padding: 0 30px 30px; font-weight: 100; border-bottom: dashed 1px #e5e5e5;}
.content .action{margin: 30px auto; display: flex; justify-content: space-between; width: 100%;  align-items: center;}
.content .action .left p{display: flex;}
.content .action .left{line-height: 1; color: #666666; max-width: calc(100% - 230px); display: flex; flex-direction: column; gap: 10px;}
.content .action .left a{line-height: 1;}
.content .action .left a:hover{text-decoration: underline;}
.content .action .right{display: flex; justify-content: flex-end; align-items: center; gap: 10px;}
.content .action .right .btn{width: 70px; height: 32px; text-align: center; line-height: 32px; background-color: #00aaf1; color: #FFFFFF; cursor: pointer; border-radius: 3px}
