.main{
    width: 1200px;
    height: auto;
    min-height: 600px;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin: 20px auto;
}

.content{flex: 1; display: flex; flex-direction: column; background-color: #ffffff; min-height: 700px; padding: 30px;}

.content .title{font-size: 28px; text-align: center; padding: 20px; font-weight: 100;}
.content .attr{border-bottom: 1px dashed #cccccc; line-height: 50px; text-align: center; display: flex; gap: 20px; align-items: center; justify-content: center; color: #666666;}

.content .detail{ all: unset; min-height: 50vh; margin-top: 30px;}
.content .detail img{max-width: 100% !important; display: inline-block;}

.content .action{margin: 30px auto; display: flex; justify-content: center; width: 100%;  align-items: center;}
.content .action .left{line-height: 1; color: #666666; max-width: calc(100% - 230px); display: flex; flex-direction: column; gap: 10px;}
.content .action .left .involved{width: 160px; height: 40px; color: #ffffff; background-color: var(--theme-color); text-align: center; line-height: 40px;}
.content .action .left a{line-height: 1;}
.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}