/* 字体 */ @charset "utf-8"; /*在线字体引入:网址:https://www.googlefonts.cn/english*/ /*@import url('https://fonts.font.im/css?family=Krona+One|Montserrat:400,500,600,700,800,900');*/ /* 图标icon */ /* 根变量 */ :root{ /*宽度*/ --mh_width:min(1600px,90%); /*首页宽度,当宽度大于1720时,得改成95%*/ --mn_width:min(1200px,90%); /*内页宽度*/ /*颜色*/ --mmco:#193B6D; /*主要颜色*/ /*其他*/ --bs1:0 0 10px rgba(0,0,0,0.1); /*阴影*/ --bs3:0 0 10px rgba(0,0,0,0.3); /*阴影*/ --tr3:.3s ease; /*过渡*/ --tr6:.6s ease; /*过渡*/ /*字体大小*/ --fs-72: 72px; --fs-60: 60px; --fs-58: 58px; --fs-56: 56px; --fs-54: 54px; --fs-52: 52px; --fs-50: 50px; --fs-48: 48px; --fs-46: 46px; --fs-44: 44px; --fs-42: 42px; --fs-40: 40px; --fs-38: 38px; --fs-36: 36px; --fs-34: 34px; --fs-32: 32px; --fs-30: 30px; --fs-28: 28px; --fs-26: 26px; --fs-24: 24px; --fs-22: 22px; --fs-20: 20px; --fs-18: 18px; --fs-16: 16px; } /*滚动条设置*/ html::-webkit-scrollbar { width: 10px; } html::-webkit-scrollbar-thumb { background: #c1c1c1; } html::-webkit-scrollbar-track { background: #E6E6E6; } /*锚点点击缓动*/ html{ scroll-behavior: smooth; } html{ scroll-padding-top:130px; /*当导航栏固定在顶部时,设置这个属性能让锚点点击以后不被导航栏遮挡住*/ } /*公共样式类名自定义*/ /*宽度*/ .mhw{ /*首页宽度*/ max-width: var(--mh_width); margin: 0 auto; } .mnw{ /*内页宽度*/ max-width: var(--mn_width); margin: 0 auto; } /*视差滚动*/ .main .parallax-container{ transform: unset!important; } /* 图片比例 */ .pbg{ position: relative; } .pbg img{ position: absolute; } /*其他*/ /*阴影效果*/ .bs1{ box-shadow: var(--bs1); } .bs3{ box-shadow: var(--bs3); } /*阴影移入效果*/ .bs1h:hover{ box-shadow: var(--bs1); } .bs3h:hover{ box-shadow: var(--bs3); } /*过渡效果*/ .tr3{ transition: var(--tr3); } .tr6{ transition: var(--tr6); } /*文字移入效果*/ /*单个文字*/ .txh{ transition:color var(--tr3); } .txh:hover{ color: var(--mmco)!important; } /*移入容器内文字效果*/ .ctx{ transition:color var(--tr3); } .ctxh:hover .ctx{ color: var(--mmco)!important; } /*图片移入效果*/ /*单个图片移入效果*/ .imh img{ transition: transform var(--tr6); } .imh:hover img{ transform: scale(1.05); } /*移入容器内图片效果*/ .cim img{ transition: transform var(--tr6); } .cimh:hover .cim img{ transform: scale(1.05); } /*文本换行*/ .no_blak{ white-space: pre-line; } /*rem响应式*/ /*注意前后顺序,同时存在min或者max时,后面的会覆盖前面的*/ @media (min-width:1000px) { :root { --fs-72: 30px; --fs-60: 30px; --fs-58: 30px; --fs-56: 30px; --fs-54: 30px; --fs-52: 30px; --fs-50: 30px; --fs-48: 30px; --fs-46: 30px; --fs-44: 30px; --fs-42: 30px; --fs-40: 30px; --fs-38: 30px; --fs-36: 30px; --fs-34: 30px; --fs-32: 30px; --fs-30: 28px; --fs-28: 26px; --fs-26: 24px; --fs-24: 22px; --fs-22: 20px; --fs-20: 18px; } } @media (min-width:1600px) { :root { --fs-72: 72px; --fs-60: 60px; --fs-58: 58px; --fs-56: 56px; --fs-54: 54px; --fs-52: 52px; --fs-50: 50px; --fs-48: 48px; --fs-46: 46px; --fs-44: 44px; --fs-42: 42px; --fs-40: 40px; --fs-38: 38px; --fs-36: 36px; --fs-34: 34px; --fs-32: 32px; --fs-30: 30px; --fs-28: 28px; --fs-26: 26px; --fs-24: 24px; --fs-22: 22px; --fs-20: 20px; --fs-18: 16px; } } @media (max-width: 769px) { :root { /*字体大小*/ --fs-72: 28px; --fs-60: 28px; --fs-58: 28px; --fs-56: 28px; --fs-54: 28px; --fs-52: 28px; --fs-50: 28px; --fs-48: 28px; --fs-46: 28px; --fs-44: 28px; --fs-42: 28px; --fs-40: 22px; --fs-38: 28px; --fs-36: 28px; --fs-34: 28px; --fs-32: 28px; --fs-30: 18px; --fs-28: 22px; --fs-26: 22px; --fs-24: 20px; --fs-22: 20px; --fs-20: 14px; --fs-18: 14px; --fs-16: 14px; } .mhw{ /*首页宽度*/ max-width:100%; } .mnw{ /*内页宽度*/ max-width:100%; } /*移动端padding调整*/ .mbp{ padding: 1rem 10px!important; } } /*em响应式*/ /*页面宽度是1600px*/ @media (min-width:1600px){ body{ font-size: 16px; } } @media (max-width:1600px) and (min-width:1200px){ body{ font-size: 14px; } } @media (max-width: 769px) { body { font-size: 14px; } }