:root{ /*宽度*/ --mh_width:min(1560px,90%); /*首页宽度,当宽度大于1720时,得改成95%*/ --mn_width:min(1200px,90%); /*内页宽度*/ /*颜色*/ --mm_color:#7ed8d0; /*主要颜色*/ --mc_color:#eee; /*次要颜色*/ --mo1_color:#ccc; /*其他颜色*/ /*未设置主宽度时的margin*/ --mg_left:100px; /*其他*/ --bs_1:0 0 10px rgba(0,0,0,0.1); /*阴影*/ --tr3:.3s ease; /*过渡*/ --tr6:.6s ease; /*过渡*/ /*字体大小(超过36px)*/ --fs-72: 72px; --fs-60: 60px; --fs-54: 54px; --fs-48: 48px; --fs-44: 44px; --fs-42: 42px; --fs-40: 40px; --fs-38: 38px; --fs-36: 36px; } /*main超出隐藏*/ body .main{ overflow: hidden; position: relative; } /*滚动条设置*/ 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; } /*内页公用类名*/ /*轮播*/ div[id^=c_static] #ny_banner .swiper-container .swiper-wrapper .swiper-slide .p_img{ position: relative; padding-bottom: 38%; /*高度*/ } div[id^=c_static] #ny_banner .swiper-slide .p_img img{ object-fit: cover; position: absolute; } div[id^=c_static] #ny_banner .swiper-slide .p_info h1{ font-size: 48px; } div[id^=c_static] #ny_banner .swiper-slide .p_summary{ font-size: 24px; } /*内页分类*/ div[id^=c_static] #ny_fl{ } /*内页标题与文字*/ /*内页标题与文字*/ .ny_eh { line-height: 1.5; display-radio: 1; font-size: 48px; font-family: "2dd0ba9e-c7af-4262-92df-0b694d8bc19d"; color: var(--mm_color); text-align: center; } .ny_zh { line-height: 1; display-radio: 1; font-size: 36px; font-weight:normal; margin-bottom:0; font-family: Microsoft YaHei; color: rgba(68, 64, 63, 1); text-align: center; margin-top: 10px; } .ny_hr { width: 45px; height: 3px; background: var(--mm_color); border: unset; margin: 30px auto 0; } /*其他*/ /*阴影效果*/ .bs1{ box-shadow: var(--bs_1); } /*阴影移入效果*/ .bs1h:hover{ box-shadow: var(--bs_1); } /*过渡效果*/ .tr3{ transition: var(--tr3); } .tr6{ transition: var(--tr6); } /*文字移入效果*/ /*单个文字*/ .txh{ transition:color var(--tr3); } .txh:hover{ color: var(--mm_color)!important; } /*移入容器内文字效果*/ .ctx{ transition:color var(--tr3); } .ctxh:hover .ctx{ color: var(--mm_color)!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; } /*首页文字*/ .th{ line-height: 1; font_radio: 2; display-radio: 1; font-size: var(--fs-60); font-family: "2dd0ba9e-c7af-4262-92df-0b694d8bc19d"; color: var(--mm_color); text-align: left; } .tp{ line-height: 1; font_radio: 2; display-radio: 1; font-size: var(--fs-40); font-family: Microsoft YaHei; color: rgba(68,64,63,1); } .thr{ width: 45px; height: 3px; background:var(--mm_color); padding-top: 0px; padding-bottom: 0px; margin-left: 0px; margin-right: auto; margin-top: 30px; margin-bottom: .6rem; } /*阿里图标库引用*/ @font-face { font-family: 'iconfont'; /* Project id 3857109 */ src: url('//at.alicdn.com/t/c/font_3857109_6zy3bi548ac.woff2?t=1673252085866') format('woff2'), url('//at.alicdn.com/t/c/font_3857109_6zy3bi548ac.woff?t=1673252085866') format('woff'), url('//at.alicdn.com/t/c/font_3857109_6zy3bi548ac.ttf?t=1673252085866') format('truetype'); } /*rem响应式*/ /*注意前后顺序,同时存在min或者max时,后面的会覆盖前面的*/ @media (min-width:1000px) { html { font-size: 70px; } :root { --fs-72: 68px; --fs-60: 56px; --fs-54: 50px; --fs-48: 44px; --fs-44: 40px; --fs-42: 38px; --fs-40: 36px; --fs-38: 34px; --fs-36: 32px; } } @media (min-width:1560px) { html { font-size: 100px; } :root { --fs-72: 72px; --fs-60: 60px; --fs-54: 54px; --fs-48: 48px; --fs-44: 44px; --fs-42: 42px; --fs-40: 40px; --fs-38: 38px; --fs-36: 36px; } } @media (max-width: 769px) { html { font-size: calc(100vw/7.5); } :root { --fs-72: 64px; --fs-60: 52px; --fs-54: 46px; --fs-48: 40px; --fs-44: 36px; --fs-42: 34px; --fs-40: 32px; --fs-38: 30px; --fs-36: 28px; } .mhw{ /*首页宽度*/ max-width:100%; } .mnw{ /*内页宽度*/ max-width:100%; } /*移动端padding调整*/ .mbp{ padding: 1rem 10px!important; } } /*em响应式*/ /*页面宽度是1560px*/ @media (min-width:1560px){ body{ font-size: 16px; } } @media (max-width:1560px) and (min-width:1200px){ body{ font-size: 14px; } } @media (max-width: 769px) { body { font-size: 14px; } .th{ font-size: 44px; } div[id^=c_static] #ny_banner .swiper-slide .p_info h1{ font-size: 26px; } div[id^=c_static] #ny_banner .swiper-slide .p_summary{ font-size: 18px; } div[id^=c_static] #ny_banner .swiper-container .swiper-wrapper .swiper-slide .p_img{ padding-bottom: 45%; } div[id^=c_static] #ny_fl{ flex: 1; background: #fff; } div[id^=c_static] #ny_fl .p_list{ gap: 15px; } div[id^=c_static] #ny_fl .p_loopitem{ flex: 0 0 100%; } div[id^=c_static] #ny_fl .e_text-13{ line-height: 45px; font-size: 16px; padding: 0px; } .ny_zh{ font-size: 28px; } .ny_hr{ margin: 15px auto 0; } }