#AbpContentToolbar { display: none; }

.snap-child { scroll-snap-align: start; min-height: 100vh; padding: 120px 0; overflow-x：hidden; }

.feature-card { position: relative; overflow: hidden; color: #fff; }

.feature-card img { width: 100%; height: 300px; object-fit: cover; filter: brightness(0.7); }

.feature-card .card-img-overlay { background: rgba(0, 0, 0, 0.4); top: 0; left: 0; right: 0; bottom: 0; }


.mb-70 { margin-bottom: 90px; }

/*标题*/
.section-title { font-size: 3rem; font-weight: 700; letter-spacing: 2px; color: #181b23; text-transform: uppercase; }

.spacer-line { width: 60px; height: 2px; background: #1976d2; margin: 0.75rem auto 0.75rem auto; border-radius: 2px; }

.features-desc { color: #868e96; font-size: 1.35rem; max-width: 32rem; margin-left: auto; margin-right: auto; line-height: 1.6; }

/*标题结束*/
.fade-in { opacity: 1; transform: none; transition: opacity 0.8s; }

.fade-out { opacity: 0; transform: none; transition: opacity 0.8s; }

/* feature-icon-bg: 圆形淡蓝背景，用于 feature 图标 */
.feature-icon-bg { width: 96px; height: 96px; background: #dfeeff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }

/*服务图片动画效果*/

.animated-box { width: 100%; height: 300px; position: relative; overflow: hidden; }

.details { width: 100%; height: 100%; top: 0; left: 0; font-family: georgia; color: #fff; opacity: 0; transition: opacity .8s; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;padding:20px; }

.animated-box:hover .details { opacity: 1; transition: opacity .2s .3s; }

.animated-box div { position: absolute; }

.mask { width: inherit; height: 20%; background-color: rgba(0, 0, 0, 0.5); left: 100%; }

.mask.i { top: 0; transition: all .2s; }

.mask.ii { top: 20%; transition: all .4s; }

.mask.iii { top: 40%; transition: all .6s; }

.mask.iv { top: 60%; transition: all .8s; }

.mask.v { top: 80%; transition: all 1s; }

.animated-box:hover .i { left: 0; transition: all .2s; }

.animated-box:hover .ii { left: 0; transition: all .4s; }

.animated-box:hover .iii { left: 0; transition: all .6s; }

.animated-box:hover .iv { left: 0; transition: all .8s; }

.animated-box:hover .v { left: 0; transition: all 1s; }


/* 第二个记录：从上到下，遮罩层高度逐渐增加 */
.animated-box.up-to-down .mask { width: 20%; height: 0; background-color: rgba(0, 0, 0, 0.5); top: 0; }

.animated-box.up-to-down .mask.i { left: 0; }

.animated-box.up-to-down .mask.ii { left: 20%; }

.animated-box.up-to-down .mask.iii { left: 40%; }

.animated-box.up-to-down .mask.iv { left: 60%; }

.animated-box.up-to-down .mask.v { left: 80%; }

.animated-box.up-to-down:hover .mask { height: 100%; }

.animated-box.up-to-down:hover .mask.i { transition-delay: 0s; }

.animated-box.up-to-down:hover .mask.ii { transition-delay: .1s; }

.animated-box.up-to-down:hover .mask.iii { transition-delay: .2s; }

.animated-box.up-to-down:hover .mask.iv { transition-delay: .3s; }

.animated-box.up-to-down:hover .mask.v { transition-delay: .4s; }

/* 第三个记录：从左到右，遮罩层宽度逐渐增加 */
.animated-box.right-to-left .mask { width: 0; height: 20%; background-color: rgba(0, 0, 0, 0.5); left: 0; }

.animated-box.right-to-left .mask.i { top: 0; }

.animated-box.right-to-left .mask.ii { top: 20%; }

.animated-box.right-to-left .mask.iii { top: 40%; }

.animated-box.right-to-left .mask.iv { top: 60%; }

.animated-box.right-to-left .mask.v { top: 80%; }

.animated-box.right-to-left:hover .mask { width: 100%; transition: width .6s ease; }

.animated-box.right-to-left:hover .mask.i { transition-delay: 0s; }

.animated-box.right-to-left:hover .mask.ii { transition-delay: .1s; }

.animated-box.right-to-left:hover .mask.iii { transition-delay: .2s; }

.animated-box.right-to-left:hover .mask.iv { transition-delay: .3s; }

.animated-box.right-to-left:hover .mask.v { transition-delay: .4s; }

#main-nav { position: absolute; z-index: 100; width: 100%; box-shadow: none !important; }

.helloworld { top: calc(50% - 80px); right: calc(50% + 230px); font-size: 30px; display: flex; align-items: flex-end; width: 220px; color: #dddddd; opacity: 0.6; user-select: none; }

.logicString { position: absolute; top: calc(50% + 20px); right: 50%; color: #dddddd; opacity: 0.6; user-select: none; }

.pictureString { position: absolute; left: calc(50% + 150px); top: 40%; margin-top: -200px; color: #dddddd; opacity: 0.6; user-select: none; }

.helloworld:hover,
.study:hover,
.logicString:hover,
.pictureString:hover { opacity: 1; }

@keyframes arrow-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(20px); }
}
.arrow-bounce { animation: arrow-bounce 1.5s infinite; }

@media (max-width: 1200px) {
    .pictureString { left: calc(50%); }
}
@media (max-width: 1000px) {
    .pictureString { display: none; }
}
@media (max-width: 550px) {
    .helloworld, .logicString { display: none; }
}

.bg-gradient-body { background: linear-gradient(180deg, #fafbfc 0%, #edf0f4 100%) !important; }