.modular1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 12px; background-color: #c92e29; } .modular1 { height: 9rem; box-sizing: border-box; padding: 0; display: flex; overflow: hidden; } .modular1 .left-box { padding-left: 2.8rem; background-size: cover; color: #fff; } .modular1 .left-box, .modular1 .left { height: 100%; } .modular1 .right { padding: 1rem; } .modular1 .right .scroll-box { width: 100%; } .about_sec2 ul { display: grid; grid-template-columns: repeat(3, 1fr); } .about_sec2 ul li { width: auto; } .about_sec2 .wrap { overflow: hidden; } .about_sec2 .info { color: var(--vi-color); margin-bottom: 0.5rem; } .about_sec2 .info p { margin: 1em 0; line-height: 1.6em; } .about_sec2.ot .icon { background: #fff; } .modular1 .left { position: relative; margin-right: 0.4rem; padding: 1rem 0; padding-right: 2rem; } .modular1 .left::after { /* content: ""; display: block; position: absolute; left: 0.3rem; top: 1.5rem; bottom: 1.5rem; transform: translate(-50%, 0); border: 0.01rem solid #fff; */ content: ""; position: absolute; left: 0.3rem; top: 1.5rem; bottom: 1.5rem; transform: translate(-50%, 0); padding: 0.015rem; /* 边框厚度 */ width: 0.03rem; background-image: radial-gradient( #fff 0.015rem, transparent 0.015rem ); /* 点的大小 */ background-size: 0.25rem 0.25rem; /* 控制点的间距(数值越大间距越远) */ background-position: center; mask-composite: exclude; border-radius: 0.9rem; /* 可选:添加圆角 */ } .modular1 .left .swiper-button-next, .modular1 .left .swiper-button-prev { display: none; } /* .modular1 .left .swiper-button-next, .modular1 .left .swiper-button-prev { border-radius: 0.9rem; width: 0.46rem; height: 0.46rem; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--vi-color); top: 0.3rem; left: 0.3rem; transform: translate(-50%, 0); margin-left: 0; margin-top: 0; box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.1); transition: 0.5s; } */ /* .modular1 .left .swiper-button-next { bottom: 0.3rem; top: auto; } */ .modular1 .left .swiper-container { height: 100%; } .modular1 .left .swiper-slide { display: flex; align-items: center; padding-left: 0.7rem; cursor: default; box-sizing: border-box; } .modular1 .left .swiper-slide.on .tip { display: none; } .modular1 .left .swiper-slide .tip, .modular1 .left .swiper-slide::after, .modular1 .left .swiper-slide::before { content: ""; display: block; width: 0.3rem; height: 0.3rem; background: none; position: absolute; left: 0.3rem; top: 50%; transform: translate(-50%, -50%); border-radius: 0.9rem; opacity: 0.1; transition: 0.5s; } .modular1 .left .swiper-wrapper { align-items: center; } .modular1 .left .swiper-slide::after { width: 0.08rem; height: 0.08rem; background: #fff; opacity: 1; } .modular1 .left .swiper-slide.on::after, .modular1 .left .swiper-slide.on::before { background: #c92e29; opacity: 1; width: 0.16rem; height: 0.16rem; } .modular1 .left .swiper-slide.on::after { border: 0.035rem solid #fff; box-sizing: border-box; background: none; } .modular1 .left .swiper-slide.on { font-weight: bold; color: var(--vi-color); font-size: 0.46rem; } .modular1 .left .swiper-slide.on .tip { background: #c92e29; opacity: 0.2; display: block; width: 0.6rem; height: 0.6rem; display: none; } .modular1 .right { display: flex; flex: 1; position: relative; z-index: 6; } .modular1 .right .item { display: none; } .modular1 .right .item.on { display: block; } .modular1 .right .item .title { font-weight: bold; line-height: 1; margin-bottom: 0.5em; color: var(--vi-color); padding-bottom: 0.5em; position: relative; } .modular1 .right .item .title::after{ content: ''; display: block; width: 0.5em; height: 0.03rem; background: #c92e29; position: absolute; bottom: 0; left: 0; } .modular1 .right .item .list { line-height: 1.8; } .modular1 .right .item .list .i { position: relative; margin: 0.4rem 0; } .modular1 .right .item .list .i::after { content: ""; display: block; width: 0.08rem; height: 0.08rem; border-radius: 0.3rem; background: var(--vi-color); position: absolute; left: 0; top: 1em; transform: translate(0, -50%); } .modular2 { padding: 1rem 0; } .modular2 .wrap { display: flex; } .modular2 .wrap .left { width: 7.23rem; } .modular2 .wrap .left img { width: 100%; transition: 0.5s; } .modular2 .wrap .right { flex: 1; padding-right: 0; color: var(--vi-color); height: 4310rem; overflow: hidden; padding-left: 0.7rem; margin: 0.7rem 0; } .modular2 .wrap .right p { margin-bottom: 1.5em; line-height: 1.8; } .modular .title { font-weight: 100; color: var(--vi-color); margin-bottom: 1em; text-align: center; } .modular1 .title { text-align: left; } .modular3 .right .item { display: none; } .modular3 .right .item.on { display: block; } .modular3 .wrap .left { position: relative; padding: 0 3rem; margin: 0.6rem 0; } .modular3 .wrap .left .swiper-slide { text-align: center; border-radius: 0.9rem; padding: 0.8em 1em; box-sizing: border-box; cursor: pointer; } .modular3 .wrap .left .swiper-slide.on { background: var(--vi-color); color: #fff; } .modular3 .wrap .left .swiper-button-next, .modular3 .wrap .left .swiper-button-prev { background: none; top: 50%; width: auto; height: auto; transform: translate(0, -50%); margin-top: 0; margin-left: 0; left: 2.5rem; } .modular3 .wrap .left .swiper-button-next { left: auto; right: 2.5rem; } .modular3 .wrap .left .item { font-weight: bold; } .modular3 .wrap .right .list { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0.5rem; } .modular3 .wrap .right .list .cover { overflow: hidden; } .modular3 .wrap .right .list img { width: 100%; transition: 0.5s; } .modular3 .wrap .right .list .title { text-align: center; padding: 1em; line-height: 1.6; height: 4.2em; box-sizing: border-box; font-weight: normal; color: #000; overflow: hidden; margin-bottom: 0; } .invest_wrap .sec2 { background: #fff; } .report_wrap ul { display: grid; margin-left: 0rem; margin-right: 0rem; grid-template-columns: repeat(3, 1fr); grid-gap: 0.4rem; } .invest_wrap { padding-top: 0; background: #fff; } .report_wrap li a i { color: #181818; } .invest_wrap .sec2 .tab_item li { border: 1px solid #d9d9d9; } .report_wrap li { width: auto; margin: 0; } .invest_wrap .sec2 .tab { color: #9d9d9d; } @media screen and (min-width: 1024px) { .modular1 .left .swiper-button-next:hover, .modular1 .left .swiper-button-prev:hover { background: var(--vi-color); color: #fff; } .modular3 .wrap .left .swiper-button-next:hover, .modular3 .wrap .left .swiper-button-prev:hover { color: var(--vi-color); } .report_wrap li:hover a i { color: #fff; } .modular3 .wrap .right .list .cover:hover img, .modular2 .wrap .left:hover img { transform: scale(1.03); } } @media screen and (max-width: 1023px) { .modular1 .left::after{ display: none; } .modular1 .right{ padding: 1rem 0.4rem; } .modular1{ flex-direction: column; } .modular1 .left-box{ padding-left: 0; width: 100%; } .modular1 .left{ margin: 0 0.4rem; padding: 0.4rem 0; } .about_sec2 ul { grid-template-columns: repeat(2, 1fr); } .modular1 { height: auto; } .modular1 .wrap { flex-direction: column; } .modular1 .left .swiper-slide { box-sizing: border-box; padding-left: 0; text-align: center; justify-content: center; } .modular1 .left .swiper-slide .tip, .modular1 .left .swiper-slide::after, .modular1 .left .swiper-slide::before { display: none !important; } .modular1 .wrap .left { width: auto; margin-right: 0; margin-bottom: 0.4rem; padding: 0 1rem; } .modular1 .left .swiper-button-next, .modular1 .left .swiper-button-prev { top: 50%; transform: translate(0, -50%) rotate(-90deg); } .modular1 .left .swiper-button-next { left: auto; right: 0.3rem; } .modular1 .left .swiper-slide.on { } /* .modular1 .right .item .title { display: none; } */ .modular2 .wrap { flex-direction: column; } .modular2 .wrap .right { padding-left: 0; padding: 0; height: auto; } .modular2 .wrap .left { width: auto; } .modular3 .wrap .left .swiper-button-next, .modular3 .wrap .left .swiper-button-prev { left: 0; } .modular3 .wrap .left .swiper-button-next { right: 0; left: auto; } .modular3 .wrap .left { padding: 0 0.6rem; } .report_wrap ul, .modular3 .wrap .right .list { grid-template-columns: repeat(2, 1fr); } .invest_wrap .sec2 .tab { } :root { } } @media screen and (max-width: 767px) { .report_wrap ul, .modular3 .wrap .right .list { grid-template-columns: repeat(1, 1fr); } }