/* 设置全局标题字体正常粗细 */
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;
}
h1{
font-size: calc(2vw + 22px);
color:#19419a;
line-height:1.2;
}
h2{
font-size: calc(1.8vw + 20px);
color:#19419a;
line-height:1.2;
}
h3 {
font-size: calc(1.5vw + 18px);
color:#333333;
line-height:1.5;
font-weight:500;
}
h4{
font-size: calc(1.2vw + 16px);
color:#333333;
line-height:1.5;
font-weight:600;
}
h5{
font-size: calc(1vw + 14px);
color:#333333;
margin-top:0;
line-height:1.5;
}
h6{
font-size: calc(0.6vw + 12px);
color:#333333;
line-height:1.8;
}
@media (max-width: 768px) {
h5{
font-size: 16px;
}
}
/*设置英文版产品左菜单*/
.eng_p_menu{
font-size:14px;
text-align:left;
}
/*设置内页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;
}
}
/*医药零售序号手机端*/
@media (max-width: 768px) {
.container_xh {
text-align: center;
}
}
/* ======================= */
/* ======================= */
/* ======================= */
#m-ppgs {
position: relative;
display: flex;
justify-content: flex-end;
}
#m-ppgs::before {
content: '';
position: fixed;
left: 0;
top: 50%;
height: 1px;
transform: translateY(-50%);
width: 100%;
background: #19419a;
}
#m-ppgs .sidebar {
position: sticky;
left: 0px;
top: 0px;
height: 100vh;
pointer-events: none;
display: none;
align-items: center;
justify-content: center;
flex: 1;
margin-right: 2.5vw;
}
@media (min-width: 768px) {
#m-ppgs .sidebar {
display: flex;
}
}
#m-ppgs .sidebar .box {
padding-top: 100%;
flex: 1;
position: relative;
}
#m-ppgs .sidebar .box .roundBox {
position: absolute;
width: 140%;
padding-bottom: 140%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#m-ppgs .sidebar .box .roundBox svg {
position: absolute;
left: 0;
top: 0;
}
#m-ppgs .sidebar .box .roundBox .path-loop {
fill: none;
stroke: #ccc;
stroke-miterlimit: 10;
stroke-width: 0.2px;
}
#m-ppgs .sidebar .box .roundBox .path-loop1 {
fill: none;
stroke: #19419a;
stroke-miterlimit: 10;
stroke-width: 0.4px;
stroke-dashoffset: 157;
transition: all 0.8s ease;
transform: rotate(-90deg);
transform-origin: center center;
}
#m-ppgs .sidebar .box .year {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: min(10vw, 145px);
font-weight: 300;
text-indent: -4px;
}
#m-ppgs .sidebar .box .year .l {
color: #e7e7e7;
line-height: 1.2;
position: relative;
z-index: 2;
}
#m-ppgs .sidebar .box .year .r {
color: transparent;
line-height: 3.6;
position: relative;
}
#m-ppgs .sidebar .box .year .r .ruler-box {
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#m-ppgs .sidebar .box .year .r .ruler {
transition: all 0.8s;
position: absolute;
left: 0;
top: 33.33%;
width: 100%;
display: flex;
flex-direction: column;
color: #e7e7e7;
}
#m-ppgs .sidebar .box .year .r .ruler span {
line-height: 1.2;
transition: all 0.3s;
text-align: center;
}
#m-ppgs .sidebar .box .year .r .ruler .in {
color: #19419a;
}
#m-ppgs .main {
box-sizing: border-box;
width: 100%;
padding: 20px 0px 40px;
}
@media (min-width: 768px) {
#m-ppgs .main {
width: 66%;
padding: 0 0 12.5vw 0;
}
}
#m-ppgs .main .list .item {
padding-bottom: 1.2vw;
}
#m-ppgs .main .list .item .nr {
background: #fff;
border-radius: 10px;
display: flex;
padding: max(8px, 1.1vw) max(12px, 2vw);
transition: all 0.8s;
align-items: flex-start;
text-align: justify;
}
#m-ppgs .main .list .item.in .nr {
box-shadow: 0 3px 12px 0px rgba(0, 0, 0, 0.25);
}
#m-ppgs .main .list .item .at-time {
color: #19419a;
font-weight: bolder;
margin-right: 10px;
font-size: min(4vw, 32px);
line-height: 1;
}
#m-ppgs .main .list .item .text {
font-size: min(3vw, 18px);
}
.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: #19419a;
}
#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;
}
