body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,legend,button
form,fieldset,input,textarea,p,blockquote,th,td {   
    padding: 0;   
    margin: 0;   
}
html,body{
    width: 100%;
    height: 100%;
}
body {
    font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
}
 
/* 短引用的内容可取值：''或"" */
q:before,q:after {content:'';}  
 
/* 缩写，图片等无边框 */
fieldset,img,abbr,acronym {border: 0 none;}
abbr,acronym {font-variant: normal;}
legend {color:#000;}
 
/* 清除特殊标记的字体和字号 */
address,caption,cite,code,dfn,em,strong,th,var {   
    font-weight: normal;   
    font-style: normal;   
}
 
/* 上下标 */
sup {vertical-align: text-top;}
sub {vertical-align: text-bottom;}
 
/* 设置表格的边框被合并为一个单一的边框, 指定分隔边框模型中单元格边界之间的距离为0*/
table {   
    border-collapse: collapse;   
    border-spacing: 0;   
}   
 
/* 表格标题及内容居左显示 */
caption,th {text-align: left;}
input,img,select {vertical-align:middle;}
 
/* 清除列表样式 */
ol,ul {list-style: none;}  
 
/* 输入控件字体 */
input,button,textarea,select,optgroup,option {
    font-family:inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
    background: none;
    border: none;
    outline: none;
}
input[type="number"] {
    -moz-appearance: textfield;
    /* 去除 Firefox 中的 spinner */
}

/* 针对 Chrome 和 Safari */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    /* 去除 Chrome/Safari 中的 spinner */
    margin: 0;
    /* 可能需要设置 margin 为 0 */
}
 
/* 标题元素样式清除 */ 
h1,h2,h3,h4,h5,h6 {   
    font-weight: normal;   
    font-size: 100%;   
}   
 
/* 链接样式，颜色可酌情修改 */
del,ins,a {text-decoration:none !important;color: #fff !important;}
 
/* 鼠标样式 */
input[type="submit"] {cursor: pointer;}
button {cursor: pointer;}
input::-moz-focus-inner { border: 0; padding: 0;}
 
.clear {clear:both;}

/* 添加渐入渐出动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* 为所有主要部分添加动画类 */
.section-animate {
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
}

/* 为不同部分设置不同的动画延迟 */
#home {
    animation-delay: 0.1s;
}

#ours-service {
    animation-delay: 0.3s;
}

#our-product {
    animation-delay: 0.5s;
}

#about-us {
    animation-delay: 0.7s;
}

#faq {
    animation-delay: 0.9s;
}

/* 滚动时触发的动画类 */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 平滑滚动 */
html {
    scroll-behavior: smooth;
}

/* 为图片添加渐入效果 */
img {
    opacity: 0;
    transition: opacity 0.8s ease;
}

img.loaded {
    opacity: 1;
}

/* 为文本内容添加渐入效果 */
.text-content {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease;
}

.text-content.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 为所有主要部分添加基础样式 */
section, .section-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease;
}

section.visible, .section-animate.visible {
    opacity: 1;
    transform: translateY(0);
}