diff --git a/css/details.css b/css/details.css
index 832e877..63f409e 100644
--- a/css/details.css
+++ b/css/details.css
@@ -247,6 +247,91 @@
   border: 1px solid #ebebeb;
   border-radius: 12px;
 }
+.content .details-box .answer .hint {
+  color: #555555;
+  font-size: 13px;
+  height: 42px;
+  line-height: 42px;
+  border-bottom: 1px solid #ebebeb;
+  padding-left: 17px;
+}
+.content .details-box .answer .hint .icon {
+  width: 14px;
+  height: 14px;
+  margin-right: 6px;
+}
+.content .details-box .answer .tab {
+  flex-wrap: wrap;
+  padding: 23px 17px 26px;
+}
+.content .details-box .answer .tab .tab-item {
+  height: 32px;
+  padding: 0 12px;
+  background-color: #edf0f4;
+  border: 1px solid #ebebeb;
+  border-radius: 114px;
+  font-size: 14px;
+  color: #555555;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  cursor: pointer;
+}
+.content .details-box .answer .tab .tab-item.pitch {
+  font-weight: 650;
+  color: #ffffff;
+  background-color: #6fc16d;
+  border: none;
+}
+.content .details-box .answer .dialogue {
+  padding: 23px 17px 26px;
+}
+.content .details-box .answer .dialogue .info {
+  color: #7f7f7f;
+  font-size: 13px;
+  margin-bottom: 4px;
+}
+.content .details-box .answer .dialogue .info .avatar {
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+}
+.content .details-box .answer .dialogue .dialogue-left .avatar {
+  margin-right: 6px;
+}
+.content .details-box .answer .dialogue .dialogue-left .message {
+  margin-left: 38px;
+  border-top-left-radius: 0;
+  background-color: #f6f6f6;
+}
+.content .details-box .answer .dialogue .dialogue-right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+.content .details-box .answer .dialogue .dialogue-right .info {
+  justify-content: flex-end;
+}
+.content .details-box .answer .dialogue .dialogue-right .info .avatar {
+  margin-left: 6px;
+}
+.content .details-box .answer .dialogue .dialogue-right .message {
+  margin-right: 38px;
+  border-top-right-radius: 0;
+  background-color: #f4f8fd;
+}
+.content .details-box .answer .dialogue .message {
+  font-size: 14px;
+  color: #000000;
+  line-height: 26px;
+  padding: 10px;
+  width: fit-content;
+  max-width: 80%;
+  min-height: 46px;
+  background: inherit;
+  border: none;
+  border-radius: 16px;
+  margin-bottom: 10px;
+}
 .content .details-box .item-header {
   font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
   font-weight: 650;
diff --git a/css/details.less b/css/details.less
index 7687b47..165e22d 100644
--- a/css/details.less
+++ b/css/details.less
@@ -277,6 +277,104 @@
             border-radius: 12px;
         }
 
+        .answer {
+            .hint {
+                .icon {
+                    width: 14px;
+                    height: 14px;
+                    margin-right: 6px;
+                }
+                color: #555555;
+                font-size: 13px;
+                height: 42px;
+                line-height: 42px;
+                border-bottom: 1px solid #ebebeb;
+                padding-left: 17px;
+            }
+
+            .tab {
+                flex-wrap: wrap;
+                padding: 23px 17px 26px;
+
+                .tab-item {
+                    height: 32px;
+                    padding: 0 12px;
+                    background-color: rgba(237, 240, 244, 1);
+                    border: 1px solid rgba(235, 235, 235, 1);
+                    border-radius: 114px;
+                    font-size: 14px;
+                    color: #555555;
+                    margin-right: 10px;
+                    margin-bottom: 10px;
+                    cursor: pointer;
+
+                    &.pitch {
+                        font-weight: 650;
+                        color: #ffffff;
+                        background-color: rgba(111, 193, 109, 1);
+                        border: none;
+                    }
+                }
+            }
+
+            .dialogue {
+                padding: 23px 17px 26px;
+                .info {
+                    color: #7f7f7f;
+                    font-size: 13px;
+                    margin-bottom: 4px;
+                    .avatar {
+                        border-radius: 50%;
+                        width: 32px;
+                        height: 32px;
+                    }
+                }
+                .dialogue-left {
+                    .avatar {
+                        margin-right: 6px;
+                    }
+
+                    .message {
+                        margin-left: 38px;
+                        border-top-left-radius: 0;
+                        background-color: rgba(246, 246, 246, 1);
+                    }
+                }
+
+                .dialogue-right {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: flex-end;
+                    .info {
+                        justify-content: flex-end;
+                        .avatar {
+                            margin-left: 6px;
+                        }
+                    }
+
+                    .message {
+                        margin-right: 38px;
+                        border-top-right-radius: 0;
+                        background-color: rgba(244, 248, 253, 1);
+                    }
+                }
+
+                .message {
+                    font-size: 14px;
+                    color: #000000;
+                    line-height: 26px;
+                    padding: 10px;
+                    width: fit-content;
+                    max-width: 80%;
+                    min-height: 46px;
+                    background: inherit;
+                    border: none;
+                    border-radius: 16px;
+                    margin-bottom: 10px;
+                }
+            }
+        }
+
         .item-header {
             font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
             font-weight: 650;
diff --git a/html/details.html b/html/details.html
index 59388bf..f77d164 100644
--- a/html/details.html
+++ b/html/details.html
@@ -80,6 +80,37 @@
                     <div class="item flexcenter" :class="{'pitch': sideKey == key}" v-for="(item,key) in side" @click="cutSide(key)">{{ item }}</div>
                 </div>
                 <div class="details-box flex1" ref="detailsRef">
+                    <div class="side-item" type="basic">
+                        <div class="item-header flexacenter">招生官答网友问</div>
+                        <div class="answer block">
+                            <div class="hint flexacenter">
+                                <img class="icon" src="/img/clock-icon.png">
+                                本期内容整理自2024年10月23日香港城市大学计算学院项目宣讲会。
+                            </div>
+                            <div class="tab flexflex">
+                                <div class="tab-item pitch flexcenter">项目概述</div>
+                                <div class="tab-item flexcenter">课程设置</div>
+                                <div class="tab-item flexcenter">职业发展</div>
+                            </div>
+
+                            <div class="dialogue">
+                                <div class="dialogue-left">
+                                    <div class="info flexacenter">
+                                        <img class="avatar" src="https://axure-file.lanhuapp.com/md5__ac30938db0222358d5bdbba8925c5540.svg">
+                                        寄托网友
+                                    </div>
+                                    <div class="message">香港城市大学生物统计学系是一个什么样的系？</div>
+                                </div>
+                                <div class="dialogue-right">
+                                    <div class="info flexacenter">
+                                        寄托网友
+                                        <img class="avatar" src="https://axure-file.lanhuapp.com/md5__ac30938db0222358d5bdbba8925c5540.svg">
+                                    </div>
+                                    <div class="message">香港城市大学生物统计学系是一个什么样的系？</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                     <div class="side-item">
                         <div class="consult-list">
                             <div class="consult-item" v-for="(item,index) in offerList" :key="index" url="/pages/victoryDetails/victoryDetails?id={{ item.id || item.uniqid }}">
@@ -483,7 +514,7 @@
                 </div>
             </div>
 
-            <div class="right">
+            <div class="content-right">
                 <div class="live">
                     <div class="head flexcenter">
                         <img class="icon" src="/img/talk-live-icon.png" />
diff --git a/img/clock-icon.png b/img/clock-icon.png
new file mode 100644
index 0000000..b613dc6
Binary files /dev/null and b/img/clock-icon.png differ