/* 公共样式 */ body { margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; overflow-x: hidden; } .secure { width: 100%; height: 100%; min-height: 100vh; font-family: 'PingFang SC','Helvetica Neue','Microsoft YaHei UI','Microsoft YaHei','Noto Sans CJK SC',Sathu,EucrosiaUPC,Arial,Helvetica,sans-serif; background: url("../images/bg5.jpg"); background-repeat: no-repeat; background-size: cover; } .secure-content { max-width: 75%; margin: 1.5rem auto 0; } .secure-content--desc { display: flex; align-items: start; justify-content: space-between; } .secure-content--desc__title { font-size: 2.25rem; font-weight: 400; color: #333333; width: 12rem; } .secure-content--desc__detail { /* width: 61rem; */ flex: 1; font-size: 1.125rem; font-weight: 400; color: #333333; line-height: 1.875rem; text-align: justify; } .secure-content--images { width: 100%; height: auto; margin-top: 2rem; margin-bottom: 2.5rem; text-align: center; } .secure-content--images__image { width: 100%; height: 100%; } .secure-content--tab { display: flex; flex-wrap: wrap; justify-content: space-around; } .secure-content--tab__item { cursor: pointer; color: #777677; } .secure-content--tab__item--line{ width: 271px; height: 3px; background: #777677; } .secure-content--tab__item--title { font-size: 1.5rem; font-weight: 400; line-height: 3.875rem; } .secure-content--tab__item--desc { font-size: 1.125rem; font-weight: 400; line-height: 1.875rem; } #footer{ margin-top: 1rem; } /* 适配1360*768的电脑屏幕: */ /* 适配1366*768的电脑屏幕: */ /* 适配1440*900的电脑屏幕: */ /* 适配1400*1050的电脑屏幕: */ @media screen and (min-width: 1360px) and (max-width: 1440px){ /* 样式 */ /* CSS 样式 */ .secure-content { max-width: 60rem; } .secure-content--desc__detail { width: 48rem!important; } .secure-content--desc__detail{ font-size: 1rem; } .secure-content--images{ margin-top: 1.5rem; margin-bottom: 1.5rem; } .secure-content--tab__item--title{ line-height: 3.5rem; } .secure-content{ margin: 0 auto; } } /* 适配1024*768的电脑屏幕 */ @media only screen and (max-width: 1024px) and (max-height: 768px) { /* 在屏幕宽度小于等于1024px且屏幕高度小于等于768px时应用以下样式 */ .secure-content { max-width: 50rem; margin-top: 1rem; } .secure-content--desc__title { font-size: 2rem; } .secure-content--desc__detail { font-size: 1rem; width: 40rem!important; } .secure-content--images { width: 100%; height: 20rem; } .secure-content--tab { flex-wrap: nowrap; max-width: 45rem; margin: auto; } .secure-content--tab__item--line { width: 210px; } .secure-content--tab__item--title { font-size: 22px; } .secure-content--tab__item--desc { font-size: 15px; } .secure-popup { top: 3rem!important; } } /* 当屏幕宽度小于等于 768px 时,应用以下样式 */ @media screen and (max-width: 768px) { /* 移动端样式 */ .secure-content { margin: 0!important; } .secure-content--desc__title{ text-align: center; width: 100%; font-size: 1.5rem; } .network--content__left { width: 100%!important; } .secure-content--images { width: 100%; height: 100%; } #image { width: 100%; height: 100%; } .secure-content--desc { flex-wrap: wrap; padding: 0 1rem; padding-top: 1rem; } .secure-content--desc__detail{ font-size: 1rem; margin-top: .5rem; text-align: justify; } .secure-content--tab { margin-bottom: 3rem!important; flex-wrap: wrap; } .secure-content--tab__item { margin-bottom: 2rem; min-width: 273px; } .secure-content--tab__item--line { width: 200px!important; } .secure-content--tab__item--title{ font-size: 1.25rem; line-height: 3; } .secure-content--tab__item--desc{ font-size: 1rem; line-height: 1.5; } }