.sub-menu-three { margin: 50px auto; line-height: 45px; display: flex; flex-wrap: wrap; align-items: center; max-height: 90px; overflow-y: auto; } .sub-menu-three a { position:relative; font-size: 16px; color: #333; padding-right: 15px; margin-right: 15px; } .sub-menu-three a:last-child { padding-right: 0px; margin-right: 0px; } .sub-menu-three a:after { position: absolute; content: ''; height: 15px; width: 1px; background-color: #999; right: 0px; top: 50%; margin-top: -7.5px; } .sub-menu-three a:last-child::after { width: 0px; content: ''; position: absolute; } .sub-menu-three a:before { width: 0%; height: 3px; position: absolute; left: 50%; bottom: 0px; border-radius: 50px; background: #1252D4; content: ''; -webkit-transition: all .35s; } .sub-menu-three a:hover, .sub-menu-three a.active { color: #1252D4; } .sub-menu-three a:hover::before, .sub-menu-three a.active::before { width: calc(100% - 20px); left: calc(50% - 10px); -webkit-transform: translateX(-48%); } .sub-menu-three::-webkit-scrollbar { width: 6px; } .sub-menu-three::-webkit-scrollbar-track { background-color: #fff; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; } .sub-menu-three::-webkit-scrollbar-thumb { background-color: #ebebeb; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; } .body-box .title { padding: 60px 0px 30px 0px; } .gaishu-box { position:relative; min-height: 600px; background: #f7f7f7; font-size: 100%; background-image:url(../images/gaishu-box-bg.png); background-repeat: no-repeat; background-position: bottom center; } .gaishu-box:after { font-family: FRIZON-Font; content: 'SOLUTION'; font-size: 320px; font-weight: bold; color: #E9F0FA; position: absolute; top: 100px; left: 50%; -webkit-transform: translateX(-50%); } .positionRelative { position:relative; z-index: 1; } .summary { margin-bottom: 50px; font-size: 16px; text-indent: 2em; } .summary p { margin-bottom: 20px; } .imageGroup .item { text-align: center; } .imageGroup img { max-width: 100%; margin: 50px auto; } .anli-box { /*margin-top: 50px;*/ margin-bottom: 50px; min-height: 755px; background-image: url(../images/solution-bg.jpg); background-repeat: no-repeat; background-position: top center; } .anli-box .title,.anli-box .title span{ color: #fff; } .anli-box .title span:after { border: 3px solid #fff; } .anliList { margin-top: 50px; min-height: 350px; } .anliList .swiper-wrapper { align-items: center; } .anliList .swiper-slide { text-align: center; /* padding: 0 calc((100vw - 1200px) * .07); */ width: 815px; transform: scale(0.8); height: 525px; } .anliList .swiper-slide.swiper-slide-active { transform: scale(1); } .anliList .inner figure { width: 100%; } .anliList .inner figure img { width: 100%; height: 525px; /* border-radius: 6px; */ } .anliList .inner { position: relative; } .anliList .swiper-slide-prev .item-desc { transform: translateY(-70px); } .anliList .swiper-slide-next .item-desc { transform: translateY(70px); } .anliList .inner .item-desc { position: absolute; bottom: 15px; font-size: 18px; color: #fff; left: 0px; right: 0px; text-align: center; display: inline-block; opacity: 0; transition-duration: 1.2s; z-index: 1; font-weight: normal; } .anliList .inner .mask2 { opacity: 0; border-radius: 25px; height: 25%; position: absolute; left: 3px; right: 4px; bottom: 3px; background: linear-gradient(180deg, rgba(77, 77, 77, 0) 0%, #000 100%); } .anliList .init .item-desc { opacity: 1; } .anliList .swiper-slide-active .item-desc { opacity: 1; transform: translateY(0px); } .anliList .swiper-slide-active .mask2 { opacity: 1; } .indexImg { margin-top: 250px; } .indexImg img { border-radius: 6px; display: block; width: 100%; height: 100%; object-fit: fill; opacity: .5; /*border: 3px solid #aaa;*/ } .indexImg .swiper-slide{ width: 20%; } .indexImg .swiper-slide-thumb-active img { /*border: 3px solid #1252D4;*/ opacity: 1; } .indexImg .swiper-slide { height: 150px; background: #000; border-radius: 10px; } .swiper-button-prev { left: -70px; } .swiper-button-next { right: -70px; } .swiper-button-next, .swiper-button-prev, .swiper-button-next, .swiper-button-prev { width: 50px; height: 50px; background: #1252D4; display: flex; justify-content: center; align-items: center; border-radius: 50%; color: #fff; } ..swiper-button-next:hover, . .swiper-button-prev:hover, . .swiper-button-next:hover, . .swiper-button-prev:hover { background: #fff; color: #333; } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { background: #fff; color: #333; border: 1px solid #999; opacity: 1; } .swiper-button-prev .iconfont, .swiper-button-next .iconfont { font-size: 22px; } .list-paddingleft-2 li { margin-left: 50px; } .list-paddingleft-2 li p { margin-bottom: 5px; text-indent: 0em } @media screen and (max-width: 1336px) { .swiper-button-prev,.swiper-button-next { display: none; } } @media screen and (max-width: 1200px) { .sub-banner .channel-title { -webkit-transform: translateX(-40%); top: 40%; width: 220px; height: 60px; } .anliList .swiper-slide { text-align: center; padding: 0 calc((100vw - 80%) * .07); width: 70%; transform: scale(0.8); } } @media screen and (max-width: 768px) { .body-box .title { font-size: 24px; padding: 0px 0px 30px 0px; } .sub-banner .channel-title { left: 50%; top: 25%; -webkit-transform: translate(-50%,-25%) } .gaishu-box:after { content: ''; } .gaishu-box .title { padding-top: 30px; } .summary { margin-bottom: 0px; } .anli-box { /*margin-top: 20px;*/ padding-top: 50px; padding-bottom: 20px; min-height: 400px; } .anliList { margin-top: 20px; min-height: 250px; } .anliList .swiper-slide { text-align: center; padding: 0 calc((100vw - 90%) * .07); width: 90%; transform: scale(0.8); } .imageGroup img { margin: 20px auto; } .anliList .swiper-slide { height: 320px; } .anliList .inner figure img { height: 250px; } .sub-menu-three { margin: 20px auto; flex-wrap: nowrap; white-space: nowrap; overflow-x: scroll; text-align: center; position: static; width: 100%; padding-bottom: 10px; } /*瀹氫箟婊氬姩鏉℃牱寮忥紙饩煎鍙婅儗鏅級*/ .sub-menu-three::-webkit-scrollbar { height: 3px; /* 婊氬姩鏉″搴︼紝 width锛氬搴旂珫婊氬姩鏉$殑瀹藉害 height锛氬搴旀í婊氬姩鏉$殑饩煎害*/ background: #007acc; } /*瀹氫箟婊戝潡鏍峰紡*/ .sub-menu-three::-webkit-scrollbar-thumb { border-radius: 3px; height: 100px; /* 婊氬姩鏉℃粦鍧楅暱搴 */ background-color: #ccc; } } @media screen and (max-width: 390px) { .anliList .swiper-slide { height: 280px; } .anliList .inner figure img { height: 250px; } } @media only screen and (max-width: 1500px) { .gaishu-box:after{ font-size: 200px; }} @media only screen and (max-width: 1100px) { .gaishu-box:after{ font-size: 190px; }} @media only screen and (max-width: 1000px) { .gaishu-box:after{ font-size: 170px; }} @media only screen and (max-width: 900px) { .gaishu-box:after{ font-size: 150px; }} @media only screen and (max-width: 800px) { .gaishu-box:after{ font-size: 140px; }} @media only screen and (max-width: 700px) { .gaishu-box:after{ font-size: 130px; }}