/*20240318*/ .ProductScreening { padding-bottom: 150px; } .obanner{ position: relative; } .obanner .img{ display: block; width: 100%; overflow: hidden; } .obanner .img img{ width: 100%; } .screenWrap{ position: absolute; left: 0; bottom: 130px; width: 100%; } .screenWrap{ display: flex; justify-content: flex-end; flex-wrap: wrap; } .screenWrap .title{ font-family: "PingFangMedium"; font-size: 60px; color: #FFFFFF; } .screenWrap ul{ display: flex; flex-wrap: wrap; margin-top: 30px; } .screenWrap ul li{ margin-right: 30px; margin-bottom: 20px; list-style: none; } .screenWrap ul li:last-child{ margin-right: 0; } .screenWrap ul li a{ display: flex; align-items: center; justify-content: center; padding: 0px 18px; font-family: "PingFangBold"; color: #646464; font-size: 21px; height: 42px; border: #646464 solid 1px; border-radius: 21px; box-sizing: border-box; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; text-decoration: none; } .screenWrap ul li.on a, .screenWrap ul li:hover a{ color: #000000; background-color: #FFFFFf; } .screenWrap ul li a i{ display: inline-block; width: 23px; height: 24px; margin-left: 5px; background: url(../imgs/318img4.png) center no-repeat; background-size: 100% auto; } .screenWrap ul li:hover a i, .screenWrap ul li.on a i{ background: url(../imgs/318img3.png) center no-repeat; background-size: 100% auto; } .ProductScreening .box{ margin-top: 60px; } .ProductScreening .header-box1-bottom-title h1{ font-family: "Manrope3-Bold"; } .header-box1-bottom-minibox-ul a{ font-family: "Manrope3-light"; } .header-box1-bottom-minibox-ul{ height: auto; max-height: 305px; overflow-y: auto; } .ProductScreening .header-box1-bottom-minibox-ul::-webkit-scrollbar { width: 3px; height: 3px; background: #dcdcdc; } .ProductScreening .header-box1-bottom-minibox-ul::-webkit-scrollbar-thumb { border-radius: 25px; background: #787878; } .ProductScreening .header-box1-bottom-btn-a{ border-radius: 50px; } @media (max-width: 1600px) { .ProductScreening { padding-bottom: 100px; } .screenWrap{ bottom: 6.8125vw; } .screenWrap ul li{ margin-right: 1vw; margin-bottom: 1vw; } .screenWrap .title{ font-size:42px; } .screenWrap ul{ margin-top: 20px; } .screenWrap ul li a{ font-size: 18px; } .ProductScreening .header-container{ margin: 0 10%; } } @media (max-width: 1400px) { .screenWrap .title{ font-size: 32px; } .screenWrap ul li a{ font-size: 16px; } .screenWrap ul li a i{ width: 20px; } } @media (max-width: 1000px) { .m-ProductScreening{ } .m-ProductScreening .m-h-xl{ display: block; position: static; overflow: inherit; } .m-ProductScreening .category05-input-box{ padding: 0px 20px; } .m-ProductScreening .mh-xx2-b .category05-input-box .p1-btn{ min-height: 37px; box-sizing: border-box; } .m-ProductScreening .mh-xx2-b .category05-input-box .p1-ul{ display: none; position: absolute; left: 0; top: 37px; z-index: 20; width: 100%; max-height: 65vh; overflow-y: auto; padding: 15px; box-sizing: border-box; border: 1px solid #d7d7d8; box-shadow: 0px 0px 10px rgba(0,0,0,0.2); border-radius: 15px; background-color: #FFFFFF; } .m-ProductScreening .mh-xx2-b .category05-input-box .p1-li{ padding: 0; border: none; margin-bottom: 5px; } .m-ProductScreening .mh-xx2-b .category05-input-box .p1-li a{ display: inline-block; font-family: "Gotham-Book"; font-weight: normal !important; color: #000000; font-size: 12px; line-height: 1.4; padding: 3px 10px; border-radius: 20px; } .m-ProductScreening .mh-xx2-b .category05-input-box .p1-li a:hover{ color: #FFFFFF; background-color: #a0a0a0; border-radius: 20px; } .m-ProductScreening .mh-xx2-b .category05-input-box .p1-txt{ font-family: "Gotham-Medium"; font-size: 12px; color: rgb(137, 137, 137); font-weight: normal !important; } .m-ProductScreening .category05-input-box{ z-index: inherit; } .m-ProductScreening .mh-xx2-b .se3{ padding: 0; background: #FFFFFF; height: auto; margin-bottom: 5%; } .m-ProductScreening .mh-xx2-b .mh-xx2-b2{ font-family: "Manrope3-Bold"; text-align: center; margin-bottom: 15px; } .m-ProductScreening .mxb-qr { display: flex; align-items: center; justify-content: center; } .m-ProductScreening .mxb-qr a { color: #FFF; background: #000; padding: 9px 10px; border-radius: 15px; font-size: 12px; line-height: 1; font-weight: normal !important; } .m-ProductScreening .category05-input-box .on .p1-img{ display: block; } .screenWrap{ bottom: 15%; justify-content: flex-start; /*position: static; padding-top: 50px;*/ } .screenWrap .header-container{ width: 90%; margin: auto; } .screenWrap .title{ font-size: 28px; } .screenWrap ul{ margin-top: 15px; } .screenWrap ul li{ margin-right: 20px; margin-bottom: 20px; } .screenWrap ul li a{ font-size: 15px; height: 40px; } .screenWrap ul li a i{ width: 18px; } .m-ProductScreening .m-h-xl{ padding-top: 40px; } .m-ProductScreening .mh-xx2{ max-width: 90%; margin: auto; display: block; } } @media (max-width: 640px) { .screenWrap .title{ font-size: 24px; } .screenWrap ul{ display: block; } .screenWrap ul li a{ display: inline-flex; font-size: 14px; padding: 0px 15px; height: 36px; } .screenWrap ul li a i{ width: 16px; } .m-ProductScreening .mh-xx2{ width: 100%; } .m-ProductScreening .category05-input-box{ margin: auto; } } @media (max-width: 414px){ .m-ProductScreening .mh-xx2-b .category05-input-box .p1-li a{ font-size: 2.5vmin; padding: 1.5vmin 2vmin; line-height: 1.2; } } @media (max-width: 400px){ .screenWrap{ bottom: 30px; } .screenWrap .title{ font-size: 22px; } .screenWrap ul li{ margin-right: 15px; margin-bottom: 15px; } .screenWrap ul li a{ padding: 0px 12px; height: 30px; } .screenWrap ul li a i{ width: 14px; } } @media (max-width: 320px){ .screenWrap ul li a{ font-size: 12px; padding: 0px 10px; height: 28px; } .screenWrap ul li a i{ width: 12px; } } .m-ProductScreening .mh-xx2-b{ margin-bottom: 8%; } .m-ProductScreening .mh-xx2-b .mh-xx2-b2{ font-size: 16px; } .m-ProductScreening .category05-input-box{ width: 100% !important; transform: none !important; background: #ffffff !important; margin: auto !important; border-radius: 30px !important; border: 1px solid #D2D2D2 !important; } .m-ProductScreening .mh-xx2-b .category05-input-box .on{ display: block; } .m-ProductScreening .mh-xx2-b .category05-input-box .p1-btn{ display: flex; align-items: center; } .m-ProductScreening .category05-input-box .p1-txt{ text-align: left; padding-right: 25px; } .ProductScreening .header-box1-bottom-minibox-ul{ min-height: 120px; }