/* 设置全局标题字体正常粗细 */
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
/* 根据访问设备自动调用系统字体(确保最佳视觉效果) */
body, p, h1, h2, h3, h4, h5, h6, a, button, input, textarea {
font-family: "PingFang SC","HarmonyOS Sans SC", "OPPO Sans", "Source Han Sans", "Microsoft YaHei", Arial, sans-serif;
}
h3 {
/*font-size: calc(1.5vw + 23px); */
font-size: max(2.60417vw,26px);
color: #333333;
margin-bottom: 0.8175vw;
font-weight: bold;
@media (max-width: 768px) {
h3 {
font-size: 10px;
color: #3859f3;
margin-bottom: 0.8175vw;
font-weight: bold;
}
h4{
font-size: 1.875vw;
color: #333333;
font-weight: bold;
margin-bottom: 1.14583vw;
}
h5 {
font-size: calc(0.5vw + 14px);
font-weight:400;
line-height:1.6;
color: #333333;
letter-spacing:-0.5px;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
@media (max-width: 768px) {
h5 {
font-size: 14px;
line-height: 28px;
height: auto;
margin: 8px auto 18px;
font-weight: 400;
letter-spacing:0.5px;
}
}
/*内页副标题*/
@media (max-width: 1200px) {
.ny_title_a {
font-size: 2vw;
margin-top: 1.25vw;
}
}
.ny_title_a {
width: 100%;
font-size: max(1.875vw,22px);
color:#333333;
line-height: 2.39583vw;
font-weight: bold;
margin-top: 0.625vw;
}
/*h5设定
@media (max-width: 768px) {
h5 {
font-size: 18px;
line-height: 28px;
height: auto;
margin: 8px auto 18px;
font-weight: bold;
}
}
@media (max-width: 1200px) {
h5 {
font-size: 1.25vw;
line-height: 1.9167vw;
height: 3.8333vw;
}
}
h5 {
font-size: 1.14583vw;
color: #333333;
line-height: 1.40625vw;
height: 2.8125vw;
font-weight: normal;
margin-top: 0.9375vw;
margin-bottom: 1.71875vw;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}*/
/*设置内页banner标题*/
.ny_banner_t1 {
font-size: 2.91667vw;
color: #fff;
font-weight: normal;
margin-bottom: 0.52083vw;
text-align:center;
line-height:1.5;
}
.ny_banner_t2 {
font-size: 1.14583vw;
color: #ffffff;
text-transform: uppercase;/*设置字母全部大写*/
font-weight: bold;
text-align:center;
}
@media (max-width: 768px) {
.ny_banner_t1 {
font-size: 26px;
margin-bottom: 3px;
}
}
@media (max-width: 768px) {
.ny_banner_t2 {
font-size: 14px;
margin-bottom: 4px;
}
}
/*下面为定制模块的样式*/
.m-jzys-delay1 {
animation-delay: 200ms !important;
}
.m-jzys-delay2 {
animation-delay: 300ms !important;
}
.m-jzys-delay3 {
animation-delay: 500ms !important;
}
.m-jzys-delay4 {
animation-delay: 700ms !important;
}
#m-jzys .swiper .item .m-jzys-toup {
opacity: 0;
}
#m-jzys .swiper .item.active .m-jzys-toup {
-webkit-animation: m-jzys-toup 0.6s ease 1 both;
animation: m-jzys-toup 0.6s ease 1 both;
}
@-webkit-keyframes m-jzys-toup {
0% {
-webkit-transform: translateY(100%);
opacity: 0;
}
100% {
-webkit-transform: translateY(0%);
opacity: 1;
}
}
@keyframes m-jzys-toup {
0% {
transform: translateY(100%);
opacity: 0;
}
100% {
transform: translateY(0%);
opacity: 1;
}
}
#m-jzys .swiper .item .m-jzys-pic {
opacity: 0;
}
#m-jzys .swiper .item.active .m-jzys-pic {
-webkit-animation: m-jzys-pic 0.6s ease 1 both;
animation: m-jzys-pic 0.6s ease 1 both;
}
@-webkit-keyframes m-jzys-pic {
0% {
-webkit-transform: translateY(20%);
opacity: 0;
}
100% {
-webkit-transform: translateY(0%);
opacity: 1;
}
}
@keyframes m-jzys-pic {
0% {
transform: translateY(20%);
opacity: 0;
}
100% {
transform: translateY(0%);
opacity: 1;
}
}
#m-jzys {
padding-top: 55%;
position: relative;
}
#m-jzys .swiper {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#m-jzys .swiper .item {
visibility: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#m-jzys .swiper .item.active {
visibility: visible;
}
#m-jzys .swiper .item .note {
position: absolute;
right: -0.25%;
top: 2%;
width: 54.45%;
}
#m-jzys .swiper .item .pic {
position: absolute;
right: 0.75%;
top: 2%;
width: 52.45%;
}
#m-jzys .swiper .item .title {
position: absolute;
left: 0;
top: 15%;
width: 45%;
}
#m-jzys .swiper .item p {
color: #000;
font-size: min(1.3vw, 22px);
position: absolute;
left: 0;
top: 37.27%;
line-height: 2;
}
#m-jzys .swiper .item ul {
margin-left: 0;
position: absolute;
left: 0;
bottom: 24%;
display: flex;
}
#m-jzys .swiper .item ul li {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-right: 2vw;
margin-top: auto;
margin-bottom: auto;
}
#m-jzys .swiper .item ul li .num {
font-size: min(45px, 3.2vw);
font-weight: 300;
color: #002a79;
line-height: 1;
margin-bottom: 3.5%;
}
#m-jzys .swiper .item ul li .desc {
font-size: min(14px, 1vw);
font-weight: 300;
color: #38383b;
}
#m-jzys .swiper .item ol {
margin-left: 0;
position: absolute;
left: 0;
bottom: 24%;
list-style-type: none;
}
#m-jzys .swiper .item ol li {
margin-top: 12%;
font-size: min(18px, 1.8vw);
font-weight: 200;
color: #002a79;
line-height: 1;
}
#m-jzys .swiper .item ol li i {
font-size: min(18px, 2.2vw);
margin-right: 1vw;
}
#m-jzys .menu {
position: absolute;
left: 0;
bottom: max(-4vw, -30px);
width: 100%;
height: 21.54%;
background: linear-gradient(to bottom, #fff, #dbdbdb);
border-radius: 20px 20px 0 0;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
#m-jzys .menu .title {
color: #19419a;
font-size: min(16px, 1.4vw);
position: absolute;
left: 4.8%;
top: 35.8%;
line-height: 1;
transform: translateY(-50%);
padding-left: min(10px, 1.1vw);
}
#m-jzys .menu .title::before {
width: min(6px, 0.5vw);
height: min(6px, 0.5vw);
background: #19419a;
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
border-radius: 100px;
}
#m-jzys .menu .line {
width: 1px;
background: #19419a;
height: 3%;
}
#m-jzys .menu .item {
cursor: pointer;
position: relative;
align-self: stretch;
width: 13.8%;
border-radius: 20px 20px 0 0;
overflow: hidden;
}
#m-jzys .menu .item[data-index="0"] {
background: url(http://3xxxx.com.cn/wp-content/uploads/2024/10/index_ys_icon01.png) no-repeat center 20%/38.4% auto, linear-gradient(to bottom, #fff 30%, #dbdbdb);
}
#m-jzys .menu .item[data-index="1"] {
background: url(http://3xxxx.com.cn/wp-content/uploads/2024/10/index_ys_icon02.png) no-repeat center 20%/38.4% auto, linear-gradient(to bottom, #fff 30%, #dbdbdb);
}
#m-jzys .menu .item[data-index="2"] {
background: url(http://3xxxx.com.cn/wp-content/uploads/2024/10/index_ys_icon03.png) no-repeat center 20%/38.4% auto, linear-gradient(to bottom, #fff 30%, #dbdbdb);
}
#m-jzys .menu .item[data-index="3"] {
background: url(http://3xxxx.com.cn/wp-content/uploads/2024/10/index_ys_icon04.png) no-repeat center 20%/38.4% auto, linear-gradient(to bottom, #fff 30%, #dbdbdb);
}
#m-jzys .menu .item[data-index="4"] {
background: url(http://3xxxx.com.cn/wp-content/uploads/2024/10/index_ys_icon05.png) no-repeat center 20%/38.4% auto, linear-gradient(to bottom, #fff 30%, #dbdbdb);
}
#m-jzys .menu .item .pic {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
transition: all 0.8s;
}
#m-jzys .menu .item[data-index="0"] .pic {
background: url(http://3xxxx.com.cn/wp-content/uploads/2024/10/index_ys_bg01.jpg) no-repeat center / 110% auto;
}
#m-jzys .menu .item[data-index="1"] .pic {
background: url(http://3xxxx.com.cn/wp-content/uploads/2024/10/index_ys_bg02.jpg) no-repeat center / 110% auto;
}
#m-jzys .menu .item[data-index="2"] .pic {
background: url(http://3xxxx.com.cn/wp-content/uploads/2024/10/index_ys_bg03.jpg) no-repeat center / 110% auto;
}
#m-jzys .menu .item[data-index="3"] .pic {
background: url(http://3xxxx.com.cn/wp-content/uploads/2024/10/index_ys_bg04.jpg) no-repeat center / 110% auto;
}
#m-jzys .menu .item[data-index="4"] .pic {
background: url(http://3xxxx.com.cn/wp-content/uploads/2024/10/index_ys_bg05.jpg) no-repeat center / 110% auto;
}
#m-jzys .menu .item.active .pic {
opacity: 1;
background-size: 100% auto;
}
#m-jzys .menu .item .block {
position: absolute;
left: 0;
bottom: 0;
background: #19419a;
height: 3%;
width: 100%;
transition: all 0.8s;
}
#m-jzys .menu .item.active .block {
height: 30%;
opacity: 0.9;
}
#m-jzys .menu .item .text {
position: absolute;
left: 0;
top: 60%;
width: 100%;
text-align: center;
white-space: nowrap;
color: #6e6f6f;
font-weight: 400;
font-size: min(1.8vw, 20px);
transition: all 0.8s;
}
#m-jzys .menu .item.active .text {
font-weight: 600;
top: 10%;
color: #fff;
}
#m-jzys .menu .item .note {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
transition: all 0.8s;
}
#m-jzys .menu .item[data-index="0"] .note {
background: url(http://3xxxx.com.cn/wp-content/uploads/2024/10/index_ys_b01.png) no-repeat center 94%/53.98% auto;
}
#m-jzys .menu .item[data-index="1"] .note {
background: url(http://3xxxx.com.cn/wp-content/uploads/2024/10/index_ys_b02.png) no-repeat center 94%/53.98% auto;
}
#m-jzys .menu .item[data-index="2"] .note {
background: url(http://3xxxx.com.cn/wp-content/uploads/2024/10/index_ys_b03.png) no-repeat center 94%/53.98% auto;
}
#m-jzys .menu .item[data-index="3"] .note {
background: url(http://3xxxx.com.cn/wp-content/uploads/2024/10/index_ys_b04.png) no-repeat center 94%/53.98% auto;
}
#m-jzys .menu .item[data-index="4"] .note {
background: url(http://3xxxx.com.cn/wp-content/uploads/2024/10/index_ys_b05.png) no-repeat center 94%/53.98% auto;
}
#m-jzys .menu .item.active .note {
opacity: 1;
}
/*产业生态样式*/
#m-cyst {
position: relative;
width: 100%;
padding-top: 41.8%;
}
#m-cyst .list {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
}
#m-cyst .item {
position: relative;
width: 5.75%;
border-radius: 20px;
overflow: hidden;
transition: width 0.8s;
background: no-repeat center / cover;
cursor: pointer;
}
#m-cyst .item a {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#m-cyst .item img {
display: none;
width: 100%;
}
#m-cyst .item .more {
position: absolute;
left: 24%;
bottom: 14.5%;
transform: translateY(50%);
border: 1px solid #fff;
border-radius: 1000px;
padding: 0 2.4vw;
color: #fff;
font-size: min(16px, 1.2vw);
line-height: 2.2;
opacity: 0;
white-space: nowrap;
transition: all 0.8s;
}
#m-cyst .item .note {
transition: right 0.8s;
position: absolute;
right: 50%;
bottom: 1.4vw;
transform: translateX(50%);
width: min(3vw, 46px);
height: min(3vw, 46px);
font-size: min(20px, 1.5vw);
color: #000;
background: #fff;
border-radius: 5000px;
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
}
#m-cyst .item .cen {
transition: opacity 0.8s;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#m-cyst .item .cen span {
display: block;
margin: min(2vw, 26px) auto 0;
font-size: min(28px, 1.7vw);
writing-mode: vertical-rl;
color: #fff;
letter-spacing: 3px;
}
#m-cyst .item:nth-child(odd) .cen {
background: #b3b3b3;
}
#m-cyst .item:nth-child(even) .cen {
background: #b3b3b3;
}
#m-cyst .item.active {
width: 72.75%;
}
#m-cyst .item.active .cen {
opacity: 0;
}
#m-cyst .item.active .note {
right: 3vw;
}
#m-cyst .item.active .more {
opacity: 1;
}
#m-cyst .item.active .more:hover {
border-color: #19419a;
background: #19419a;
}