.page-container {
    /* margin-top: 64px */
}

.top-banner {
    height: 480px;
    background: url(../image/2c77042c7daa4623837d22abbf86bfde.png) 50%;
    -webkit-background-size: cover;
    background-size: cover
}

.top-banner .top-banner-box {
    width: 1200px;
    margin: 0 auto;
    padding-top: 100px
}

.top-banner .top-banner-box .top-banner-title {
    color: #272e47;
    font-size: 40px;
    font-weight: 600;
    line-height: 120%
}

.top-banner .top-banner-box .top-banner-title-intro {
    color: #545a6e;
    width: 400px;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    margin-top: 24px
}

.top-banner .top-banner-box .top-banner-btns {
    margin-top: 32px
}

.top-banner .top-banner-box .top-banner-btns .top-banner-try {
    background-color: #4c6aff;
    border: none;
    padding: 12px 40px;
    border-radius: 6px;
    color: #fff;
    margin-right: 16px;
    cursor: pointer;
    font-size: 16px;
    background: -webkit-linear-gradient(353.36deg,#515aff 1.51%,#8766ff 74.19%,#a866ff 98.42%);
    background: -moz-linear-gradient(353.36deg,#515aff 1.51%,#8766ff 74.19%,#a866ff 98.42%);
    background: linear-gradient(96.64deg,#515aff 1.51%,#8766ff 74.19%,#a866ff 98.42%)
}

.top-banner .top-banner-box .top-banner-btns .top-banner-more {
    border: 1px solid #4c6aff;
    background-color: #fff;
    padding: 12px 40px;
    border-radius: 6px;
    color: #4c6aff;
    cursor: pointer
}

.module-title {
    margin-bottom: 60px
}

.module-title,.module-title-1 {
    color: #272e47;
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
    margin-top: 120px
}

.module-title-1 {
    padding-top: 120px;
    background: -webkit-gradient(linear,left top,right top,from(#f5f5ff),color-stop(74%,#f9f7ff),to(#faf7ff));
    background: -webkit-linear-gradient(left,#f5f5ff,#f9f7ff 74%,#faf7ff);
    background: -moz-linear-gradient(left,#f5f5ff 0,#f9f7ff 74%,#faf7ff 100%);
    background: linear-gradient(90deg,#f5f5ff,#f9f7ff 74%,#faf7ff)
}

.write-letter-list {
    width: 1224px;
    margin: 0 auto
}

.write-letter-pannel {
    width: 590px;
    height: 106px;
    margin: 0 20px 20px 0;
    border-radius: 8px;
    background-color: #f2f5ff;
    display: inline-block
}

.write-letter-pannel .serial-number {
    float: left;
    color: #4c6aff;
    font-size: 66px;
    line-height: 72px;
    font-weight: 400
}

.write-letter-pannel .pannel-content {
    margin-left: 55px;
    font-size: 16px
}

.write-letter-pannel .pannel-content .pannel-content-title {
    color: #080b19;
    font-weight: 500;
    line-height: 24px
}

.write-letter-pannel .pannel-content .pannel-content-art {
    color: #545a6e;
    font-weight: 400;
    line-height: 24px
}

.write-letter-pannel.pannel-content-1 {
    background: url(https://cowork-storage-public-cdn.lx.netease.com/common/2025/06/17/88311d80389547b3ae32bec153551817.png) 50%;
    -webkit-background-size: cover;
    background-size: cover
}

.write-letter-pannel.pannel-content-2 {
    background: url(https://cowork-storage-public-cdn.lx.netease.com/common/2025/06/17/6f0df93c5bb64e6ea02d1e28e8cb0cf3.png) 50%;
    -webkit-background-size: cover;
    background-size: cover
}

.write-letter-pannel.pannel-content-3 {
    background: url(https://cowork-storage-public-cdn.lx.netease.com/common/2025/07/04/b44699fc5b0a42fcb02e4b2114aafc7a.png) 50%;
    -webkit-background-size: cover;
    background-size: cover
}

.write-letter-pannel.pannel-content-4 {
    background: url(https://cowork-storage-public-cdn.lx.netease.com/common/2025/06/17/367e3bbe7311414e878522263fa37dfb.png) 50%;
    -webkit-background-size: cover;
    background-size: cover
}

.write-letter-box {
    padding: 120px 0
}

.write-letter-box .write-box-img {
    width: 640px;
    height: 500px;
    display: inline-block;
    vertical-align: middle
}

.write-letter-box:nth-of-type(odd) {
    background: -webkit-gradient(linear,left top,right top,from(#f5f5ff),color-stop(74%,#f9f7ff),to(#faf7ff));
    background: -webkit-linear-gradient(left,#f5f5ff,#f9f7ff 74%,#faf7ff);
    background: -moz-linear-gradient(left,#f5f5ff 0,#f9f7ff 74%,#faf7ff 100%);
    background: linear-gradient(90deg,#f5f5ff,#f9f7ff 74%,#faf7ff);
    position: relative
}

.write-letter-box:nth-of-type(odd) .write-box-img {
    margin-left: 136px
}

.write-letter-box:nth-of-type(2n) .write-box-img {
    margin-right: 136px
}

.write-letter-box .write-box-content {
    display: inline-block;
    vertical-align: middle
}

.write-letter-box .write-box-content .write-box-title-color {
    font-size: 32px;
    font-weight: 600;
    background: -webkit-linear-gradient(335deg,#353dd9,#6545d9 20%,#8545d9);
    background: -moz-linear-gradient(335deg,#353dd9 0,#6545d9 20%,#8545d9 100%);
    background: linear-gradient(115deg,#353dd9,#6545d9 20%,#8545d9);
    -webkit-background-clip: text;
    background-clip: text;
    color: rgba(0,0,0,0);
    -webkit-text-fill-color: rgba(0,0,0,0);
    margin-bottom: 14px
}

.write-letter-box .write-box-content .write-box-title {
    color: #272e47;
    font-size: 32px;
    font-weight: 600;
    line-height: 32px
}

.write-letter-box .write-box-content .write-box-ul {
    list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEbSURBVHgBlZE7S8RAEMdnJnsJOZJK1CaChS9E/AzXWNjdFdeJtR/JWtKlsLS4wt72Gl/lgZxglWDIY3fMuO4pnJz4L3bn8Wf2xyzClwaDW5XkR+tNW8XG6Fhq1Ou9B8q8Xt0lb86HcpzuPAVRSHsAyodf1dZFaR5vnncrknS1WaR88YzH7OH5wWyt7OntH0+eMZuRjXHCiJeu5yl8UVWfNqDR1sx80V1DtKRgYygYIJWEDUVkmqbvugx8sozDQxfJMgj+KSLy8gU/wvWyBSeLUEOpSjJFYCC2SJQicOTQZAADps7fRt4cZVVwPzvsCP0/YOpsujWlLEMNJnmQwiqz9cD3/kSj7k9UqDehhdDi66Kq6jw43p9/Du70AR7DZ/Oxu5fqAAAAAElFTkSuQmCC);
    padding-left: 20px;
    color: #545a6e;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    margin: 20px 0 40px
}

.write-letter-box .write-box-content .write-box-btn {
    color: #fff;
    background-color: #4c6aff;
    padding: 12px 48px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer
}

.write-letter-box .write-box-content .write-box-btn-color {
    color: #fff;
    background-color: #4c6aff;
    padding: 12px 48px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: -webkit-linear-gradient(335deg,#515aff,#8766ff 39%,#a866ff);
    background: -moz-linear-gradient(335deg,#515aff 0,#8766ff 39%,#a866ff 100%);
    background: linear-gradient(115deg,#515aff,#8766ff 39%,#a866ff);
    -webkit-background-size: 200% auto;
    background-size: 200% auto;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease
}

.write-letter-box .write-box-content .write-box-in {
    margin-left: 10px
}

.ai-fun-why {
    background: -webkit-gradient(linear,left top,left bottom,from(#f2e9ff),to(#fcfaff));
    background: -webkit-linear-gradient(top,#f2e9ff,#fcfaff);
    background: -moz-linear-gradient(top,#f2e9ff 0,#fcfaff 100%);
    background: linear-gradient(180deg,#f2e9ff,#fcfaff);
    padding: 120px 0
}

.ai-fun-why .ai-fun-why-container {
    width: 1200px;
    margin: 0 auto
}

.ai-fun-why .ai-fun-why-container .ai-fun-why-title {
    color: #000;
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
    margin-bottom: 24px
}

.ai-fun-why .ai-fun-why-container .ai-fun-why-sub-title {
    color: #545a6e;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 60px
}

.ai-fun-why .ai-fun-why-container .ai-fun-why-boxes {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 20px
}

.ai-fun-why .ai-fun-why-container .ai-why-box {
    background-color: #fff;
    border-radius: 20px;
    padding: 40px 20px 20px;
    width: 384px;
    height: 204px;
    display: inline-block;
    vertical-align: top
}

.ai-fun-why .ai-fun-why-container .ai-why-box:nth-of-type(3),.ai-fun-why .ai-fun-why-container .ai-why-box:nth-of-type(4) {
    padding: 40px 18px 18px
}

.ai-fun-why .ai-fun-why-container .ai-why-box:nth-of-type(6) {
    margin-right: 0
}

.ai-fun-why .ai-fun-why-container .ai-why-box .ai-why-box-content {
    color: #545a6e;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-top: 32px;
    text-align: left
}