diff --git a/css/details.css b/css/details.css
index 93062a0..fd7d239 100644
--- a/css/details.css
+++ b/css/details.css
@@ -960,11 +960,11 @@
   width: 14px;
   margin-right: 5px;
 }
-.right {
+.content-right {
   width: 290px;
   margin-left: 10px;
 }
-.right .live {
+.content-right .live {
   width: 100%;
   margin-bottom: 20px;
   background: linear-gradient(-24.24254087deg, #d6dcf0 0%, #dae6f2 19%, #eff2cc 62%, #eff9f1 100%);
@@ -972,15 +972,15 @@
   padding-top: 20px;
   padding-bottom: 30px;
 }
-.right .live .head {
+.content-right .live .head {
   margin-bottom: 17px;
 }
-.right .live .head .icon {
+.content-right .live .head .icon {
   width: 89px;
   height: 28px;
   margin-right: 8px;
 }
-.right .live .head .text {
+.content-right .live .head .text {
   width: 104px;
   height: 24px;
   background-color: #026277;
@@ -989,7 +989,7 @@
   font-size: 13px;
   position: relative;
 }
-.right .live .head .text .triangle {
+.content-right .live .head .text .triangle {
   position: absolute;
   top: 50%;
   left: -3px;
@@ -997,10 +997,10 @@
   width: 6px;
   height: 11px;
 }
-.right .live .content-box {
+.content-right .live .content-box {
   position: relative;
 }
-.right .live .content-box .triangle {
+.content-right .live .content-box .triangle {
   width: 14px;
   height: 5px;
   position: absolute;
@@ -1008,26 +1008,26 @@
   left: 50%;
   transform: translateX(-50%) rotate(180deg);
 }
-.right .live .content-box .point {
+.content-right .live .content-box .point {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   bottom: 28px;
 }
-.right .live .content-box .point .item {
+.content-right .live .content-box .point .item {
   width: 10px;
   height: 4px;
   background-color: #d7d7d7;
   border-radius: 20px;
   cursor: pointer;
 }
-.right .live .content-box .point .item:not(:last-of-type) {
+.content-right .live .content-box .point .item:not(:last-of-type) {
   margin-right: 4px;
 }
-.right .live .content-box .point .item.pitch {
+.content-right .live .content-box .point .item.pitch {
   background-color: #fa6b11;
 }
-.right .live .content {
+.content-right .live .content {
   height: 340px;
   background-color: rgba(255, 255, 255, 0.80392157);
   border-radius: 8px;
@@ -1036,19 +1036,19 @@
   overflow: hidden;
   position: relative;
 }
-.right .live .content .swiper {
+.content-right .live .content .swiper {
   margin-bottom: 5px;
   display: flex;
 }
-.right .live .content .swiper .swiper-item {
+.content-right .live .content .swiper .swiper-item {
   width: 268px;
   padding-top: 8px;
 }
-.right .live .content .swiper .swiper-item .item {
+.content-right .live .content .swiper .swiper-item .item {
   position: relative;
   padding-bottom: 13px;
 }
-.right .live .content .swiper .swiper-item .item:not(:last-of-type)::after {
+.content-right .live .content .swiper .swiper-item .item:not(:last-of-type)::after {
   content: "";
   position: absolute;
   width: calc(100% - 50px);
@@ -1057,14 +1057,14 @@
   bottom: 0;
   border-bottom: 1px dotted #ebebeb;
 }
-.right .live .content .swiper .swiper-item .item .icon-box {
+.content-right .live .content .swiper .swiper-item .item .icon-box {
   padding-left: 9px;
   padding-right: 13px;
 }
-.right .live .content .swiper .swiper-item .item .icon-box .icon {
+.content-right .live .content .swiper .swiper-item .item .icon-box .icon {
   width: 28px;
 }
-.right .live .content .swiper .swiper-item .item .text {
+.content-right .live .content .swiper .swiper-item .item .text {
   font-size: 14px;
   color: #000000;
   line-height: 26px;
@@ -1076,7 +1076,7 @@
   padding-top: 8px;
   padding-right: 8px;
 }
-.right .live .content .swiper .swiper-item .item .text .admissionState {
+.content-right .live .content .swiper .swiper-item .item .text .admissionState {
   height: 20px;
   background-color: #b30081;
   border-radius: 115px;
@@ -1086,43 +1086,43 @@
   display: inline-flex;
   width: fit-content;
 }
-.right .live .content .swiper .swiper-item .item .text .admissionState.state2 {
+.content-right .live .content .swiper .swiper-item .item .text .admissionState.state2 {
   background-color: #bec105;
 }
-.right .live .content .swiper .swiper-item .item .text .admissionState.state3 {
+.content-right .live .content .swiper .swiper-item .item .text .admissionState.state3 {
   background-color: #04b0d5;
 }
-.right .live .word {
+.content-right .live .word {
   margin-bottom: 9px;
 }
-.right .live .word .item {
+.content-right .live .word .item {
   width: 34px;
   height: 22px;
   padding: 0 5px;
   box-sizing: content-box;
 }
-.right .live .word .item:not(:last-of-type) {
+.content-right .live .word .item:not(:last-of-type) {
   border-right: 1px solid #aaaaaa;
 }
-.right .live .hint {
+.content-right .live .hint {
   font-size: 13px;
   color: #333333;
   line-height: 26px;
   text-align: center;
   margin-bottom: 13px;
 }
-.right .live .QR-code {
+.content-right .live .QR-code {
   width: 120px;
   height: 120px;
   background-color: #ffffff;
   border-radius: 8px;
   margin: 0 auto;
 }
-.right .live .QR-code .icon {
+.content-right .live .QR-code .icon {
   width: 103px;
   height: 103px;
 }
-.right .else {
+.content-right .else {
   width: 100%;
   background: -webkit-linear-gradient(270.00883066deg, #f7fbf7 0%, #eaf6ea 100%);
   background: -moz-linear-gradient(179.99116934deg, #f7fbf7 0%, #eaf6ea 100%);
@@ -1131,10 +1131,10 @@
   border-radius: 12px;
   padding: 20px 10px 0;
 }
-.right .else .school {
+.content-right .else .school {
   margin-bottom: 20px;
 }
-.right .else .school .logo {
+.content-right .else .school .logo {
   width: 50px;
   height: 50px;
   background-color: #ffffff;
@@ -1142,10 +1142,10 @@
   border-radius: 8px;
   margin-right: 10px;
 }
-.right .else .school .logo .img {
+.content-right .else .school .logo .img {
   height: 30px;
 }
-.right .else .school .info .name {
+.content-right .else .school .info .name {
   font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
   font-weight: 650;
   font-style: normal;
@@ -1153,17 +1153,17 @@
   color: #000000;
   margin-bottom: 5px;
 }
-.right .else .school .info .name-en {
+.content-right .else .school .info .name-en {
   font-size: 13px;
   color: #555555;
 }
-.right .else .case {
+.content-right .else .case {
   width: 270px;
   background-color: #ffffff;
   border-radius: 8px;
   margin-bottom: 20px;
 }
-.right .else .case .head {
+.content-right .else .case .head {
   width: 270px;
   height: 45px;
   border-bottom: 1px dotted #ebebeb;
@@ -1172,7 +1172,7 @@
   border-radius: 8px 8px 0 0;
   overflow: hidden;
 }
-.right .else .case .head .dot {
+.content-right .else .case .head .dot {
   width: 14px;
   height: 14px;
   background-color: #e7f7ee;
@@ -1181,7 +1181,7 @@
   position: relative;
   margin-right: 10px;
 }
-.right .else .case .head .dot::after {
+.content-right .else .case .head .dot::after {
   content: "";
   width: 6px;
   height: 6px;
@@ -1195,59 +1195,59 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
-.right .else .case .head .text {
+.content-right .else .case .head .text {
   font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
   font-weight: 650;
   font-style: normal;
   font-size: 16px;
   color: #000000;
 }
-.right .else .case .head .img {
+.content-right .else .case .head .img {
   width: 14px;
   height: 14px;
   transform: rotate(270deg);
 }
-.right .else .case .list .item {
+.content-right .else .case .list .item {
   padding: 20px 10px;
   display: block;
 }
-.right .else .case .list .item:not(:last-of-type) {
+.content-right .else .case .list .item:not(:last-of-type) {
   border-bottom: 1px solid #f6f6f6;
 }
-.right .else .case .list .item .name {
+.content-right .else .case .list .item .name {
   font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
   font-weight: 650;
   font-size: 15px;
   color: #000000;
   margin-bottom: 8px;
 }
-.right .else .case .list .item .brief {
+.content-right .else .case .list .item .brief {
   font-size: 14px;
   color: #7f7f7f;
 }
-.right .else .case .list .item .brief span {
+.content-right .else .case .list .item .brief span {
   color: #d7d7d7;
   margin: 0 8px;
 }
-.right .else .case.mj .list .item {
+.content-right .else .case.mj .list .item {
   padding-top: 15px;
 }
-.right .else .case.mj .list .item:not(:last-of-type) {
+.content-right .else .case.mj .list .item:not(:last-of-type) {
   border-bottom: 1px dotted #ebebeb;
 }
-.right .else .case.mj .list .name {
+.content-right .else .case.mj .list .name {
   font-weight: 650;
   font-style: normal;
   font-size: 15px;
   color: #000000;
 }
-.right .else .case.mj .list .brief-box {
+.content-right .else .case.mj .list .brief-box {
   padding: 10px 15px 10px 10px;
   width: 251px;
   border-radius: 6px;
   background-color: #f7f7f7;
 }
-.right .else .case.mj .list .brief {
+.content-right .else .case.mj .list .brief {
   display: inline-block;
   font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
   font-weight: 400;
@@ -1261,7 +1261,7 @@
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
-.right .else .case.mj .list .brief .avatar {
+.content-right .else .case.mj .list .brief .avatar {
   width: 20px;
   height: 20px;
   margin-right: 5px;
diff --git a/css/details.less b/css/details.less
index a4379a8..bbb6e8d 100644
--- a/css/details.less
+++ b/css/details.less
@@ -1104,7 +1104,7 @@
     }
 }
 
-.right {
+.content-right {
     width: 290px;
     margin-left: 10px;