@keyframes scroll { 0% { transform: translateY(0); } 100% { transform: translateY(100%); } } @keyframes shu { 0% { transform: translateY(0); } 100% { transform: translateY(-400px); } } .banner .swiper-container .swiper-wrapper .swiper-slide { overflow: hidden; } .banner .swiper-container .swiper-wrapper .swiper-slide > img { width: 100%; height: 100%; object-fit: cover; } .banner .swiper-container .swiper-wrapper .swiper-slide video { width: 100%; height: 100%; object-fit: cover; } .banner .swiper-container .swiper-wrapper .swiper-slide .text { position: absolute; width: 100%; top: 50%; left: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); } .banner .swiper-container .swiper-wrapper .swiper-slide .text h2 { color: #fff; font-family: Poppins-SemiBold; line-height: 1.2; letter-spacing: -1px; margin-bottom: 1.5vw; position: relative; top: 60px; opacity: 0; transition: all 1s ease 0.5s; -webkit-transition: all 1s ease 0.5s; -moz-transition: all 1s ease 0.5s; -ms-transition: all 1s ease 0.5s; } .banner .swiper-container .swiper-wrapper .swiper-slide .text p { color: #fff; position: relative; top: 40px; opacity: 0; transition: all 1s ease 0.8s; -webkit-transition: all 1s ease 0.8s; -moz-transition: all 1s ease 0.8s; -ms-transition: all 1s ease 0.8s; } .banner .swiper-container .swiper-wrapper .swiper-slide .tu_one { position: absolute; width: 38%; height: 100%; right: 0; top: 0; } .banner .swiper-container .swiper-wrapper .swiper-slide .tu_one .di { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: all 0.5s ease 1s; -webkit-transition: all 0.5s ease 1s; -moz-transition: all 0.5s ease 1s; -ms-transition: all 0.5s ease 1s; } .banner .swiper-container .swiper-wrapper .swiper-slide .tu_one .yuan { position: absolute; width: 3.8%; opacity: 0; transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); } .banner .swiper-container .swiper-wrapper .swiper-slide .tu_one .tu1 { left: 54%; top: 30.9%; transition: all 0.5s ease 1.1s; -webkit-transition: all 0.5s ease 1.1s; -moz-transition: all 0.5s ease 1.1s; -ms-transition: all 0.5s ease 1.1s; } .banner .swiper-container .swiper-wrapper .swiper-slide .tu_one .tu2 { left: 31%; top: 49.8%; transition: all 0.5s ease 1.3s; -webkit-transition: all 0.5s ease 1.3s; -moz-transition: all 0.5s ease 1.3s; -ms-transition: all 0.5s ease 1.3s; } .banner .swiper-container .swiper-wrapper .swiper-slide .tu_one .tu3 { left: 0; top: 58.9%; transition: all 0.5s ease 1.5s; -webkit-transition: all 0.5s ease 1.5s; -moz-transition: all 0.5s ease 1.5s; -ms-transition: all 0.5s ease 1.5s; } .banner .swiper-container .swiper-wrapper .swiper-slide .tu_one .tu4 { left: 31.5%; top: 58%; transition: all 0.5s ease 1.7s; -webkit-transition: all 0.5s ease 1.7s; -moz-transition: all 0.5s ease 1.7s; -ms-transition: all 0.5s ease 1.7s; } .banner .swiper-container .swiper-wrapper .swiper-slide .tu_one .tu5 { left: 42.5%; top: 71.5%; transition: all 0.5s ease 1.7s; -webkit-transition: all 0.5s ease 1.7s; -moz-transition: all 0.5s ease 1.7s; -ms-transition: all 0.5s ease 1.7s; } .banner .swiper-container .swiper-wrapper .swiper-slide .tu_one .tu6 { left: 77.5%; top: 71.9%; transition: all 0.5s ease 1.9s; -webkit-transition: all 0.5s ease 1.9s; -moz-transition: all 0.5s ease 1.9s; -ms-transition: all 0.5s ease 1.9s; } .banner .swiper-container .swiper-wrapper .swiper-slide .tu_two { position:absolute; top:0; left:0; width:100%; height:100%; } .banner .swiper-container .swiper-wrapper .swiper-slide .tu_two img { width:8%; height:auto; max-width:144px; max-height:100%; position: absolute; opacity: 0; } .banner .swiper-container .swiper-wrapper .swiper-slide .tu_two .tu1{ width:9%; max-width:170px; } .banner .swiper-container .swiper-wrapper .swiper-slide .tu_two .tu1 { transition: all 0.5s ease 1.1s; -webkit-transition: all 0.5s ease 1.1s; -moz-transition: all 0.5s ease 1.1s; -ms-transition: all 0.5s ease 1.1s; left: 56%; top: 35%; } .banner .swiper-container .swiper-wrapper .swiper-slide .tu_two .tu2 { transition: all 0.5s ease 1.3s; -webkit-transition: all 0.5s ease 1.3s; -moz-transition: all 0.5s ease 1.3s; -ms-transition: all 0.5s ease 1.3s; left: 83.5%; top: 55%; } .banner .swiper-container .swiper-wrapper .swiper-slide .tu_two .tu3 { transition: all 0.5s ease 1.5s; -webkit-transition: all 0.5s ease 1.5s; -moz-transition: all 0.5s ease 1.5s; -ms-transition: all 0.5s ease 1.5s; left: 70%; top: 73.5%; } .banner .swiper-container .swiper-wrapper .swiper-slide .tu_two .tu4 { transition: all 0.5s ease 1.7s; -webkit-transition: all 0.5s ease 1.7s; -moz-transition: all 0.5s ease 1.7s; -ms-transition: all 0.5s ease 1.7s; left: 72%; top: 23%; } .banner .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .text h2 { top: 0; opacity: 1; } .banner .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .text p { top: 0; opacity: 1; } .banner .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .tu_one .di { opacity: 1; } .banner .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .tu_one .yuan { opacity: 1; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); } .banner .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .tu_two img { opacity: 1; } .banner .swiper-container .swiper-pagination { bottom: 2vw; } .banner .swiper-container .swiper-pagination .swiper-pagination-bullet { width: 18px; height: 18px; background: #fff; opacity: 1; margin: 0 8px; position: relative; } .banner .swiper-container .swiper-pagination .swiper-pagination-bullet-active { width: 24px; height: 24px; opacity: 1; border: 6px solid #fff; background: transparent; top: 3px; } .ctn1 { overflow: hidden; position: relative; background: #f2f2f2; } .ctn1 .top { padding: 5vw 0; background: #fff; position: relative; z-index: 2; } .ctn1 .top .con { position: relative; top: 0; } .ctn1 .top .con h2 { font-family: Poppins-SemiBold; color: #000; } .ctn1 .top .con p { color: #000; margin-top: 0.6vw; } .ctn1 .bottom { position: absolute; width:100%; bottom: -400px; opacity: 0.8; z-index: 1; } .ctn1 .bottom .tu { position: relative; width:100%; overflow: hidden; } .ctn1 .bottom .tu img { width: 100%; position: relative; z-index: 3; } .ctn1 .bottom .tu .shu { position: absolute; width:100%; left: 0; top: 0; z-index: 1; animation-name: shu; animation-iteration-count: infinite; transform-origin: center center; animation-duration: 20s; animation-fill-mode: both; } .ctn1 .bottom .tu .shu img { width: 100%; } .ctn1 .bottom .text { position: absolute; top: 40%; width: 100%; text-align: center; z-index: 4; } .ctn1 .bottom .text p { position: absolute; left: 50%; top: 0; opacity: 0; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); } .ctn1 .bottom .text p:first-child { opacity: 1; } .ctn1 .bottom .mobile-swiper { display: none; } .ctn1 .bottom .line-box { width: 2px; height: 7vw; overflow: hidden; position: absolute; bottom: 130px; left: 50%; opacity: 0; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); z-index: 6; } .ctn1 .bottom .line-box .line { width: 2px; height: 7vw; background: #ccc; position: absolute; left: 0; top: 0; animation-name: scroll; animation-iteration-count: infinite; transform-origin: center bottom; animation-duration: 1s; animation-fill-mode: both; } .ctn2 { padding: 8vw 0; overflow: hidden; } .ctn2 .ctn-box { width: 100%; position: relative; } .ctn2 .ctn-box .title { padding-left: 50px; } .ctn2 .ctn-box .title h2 { font-family: Poppins-SemiBold; color: #000; letter-spacing: -1px; } .ctn2 .ctn-box .ctn-list { margin-top: 3.5vw; } .ctn2 .ctn-box .ctn-list .swiper-container { padding: 0 50px; } .ctn2 .ctn-box .ctn-list .swiper-pagination-progressbar { width: 20%; height: 3px; right: 50px; top: 2.5vw; } .ctn2 .ctn-box .ctn-list .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #0e3778; } .ctn2 .ctn-box .ctn-list .swiper-slide .tu { height: 0; padding-bottom: 76.6%; overflow: hidden; border-radius: 20px; position: relative; } .ctn2 .ctn-box .ctn-list .swiper-slide .tu img { width: 100%; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .ctn2 .ctn-box .ctn-list .swiper-slide .tu .mask { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); left: 0; top: 0; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .ctn2 .ctn-box .ctn-list .swiper-slide .tu .mask p { color: #fff; position: absolute; width: 80%; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } .ctn2 .ctn-box .ctn-list .swiper-slide .tu:hover img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); } .ctn2 .ctn-box .ctn-list .swiper-slide h2 { margin-top: 1vw; color: #000; width: 66%; } .ctn2 .ctn-box .ctn-list .swiper-slide:hover .tu .mask { opacity: 1; } .ctn3 { padding: 6vw 0; background: #fff; overflow: hidden; } .ctn3 .title { display: flex; justify-content:center; align-items: center; } .ctn3 .title h2 { color: #000; font-weight:bold; } .ctn3 .title a { width: 170px; line-height: 46px; text-align: center; border: 1px solid #ccc; border-radius: 23px; color: #000; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .ctn3 .title a:hover { border: 1px solid #0e3778; background: #0e3778; color: #fff; } .ctn3 .ctn-list { margin-top: 3.5vw; } .ctn3 .ctn-list .swiper-container{ overflow:visible; } .ctn3 .swiper-slide{ opacity:0.5; } .ctn3 .swiper-slide.swiper-slide-active{ opacity:1!important; } .ctn3 .solution_box{ width:100%; display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; } .ctn3 .ctn-list .swiper-slide .tu { border-radius: 20px; overflow: hidden; position: relative; width:65%; max-width:920px; } .ctn3 .ctn-list .swiper-slide .tu img { width: 100%; } .ctn3 .ctn-list .swiper-slide .tu .mask { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .ctn3 .ctn-list .swiper-slide .tu .mask .xian { width: 100%; transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); transition: all 0.5s ease 0.5s; -webkit-transition: all 0.5s ease 0.5s; -moz-transition: all 0.5s ease 0.5s; -ms-transition: all 0.5s ease 0.5s; } .ctn3 .ctn-list .swiper-slide .tu .mask .yuan { width:2.8%; max-width:26px; position: absolute; opacity: 0; transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); } .ctn3 .ctn-list .swiper-slide .tu .mask .yuan1{ left: 56.3%; top: 19%; } .ctn3 .ctn-list .swiper-slide .tu .mask .yuan2 { left: 62%; top: 44%; } .ctn3 .ctn-list .swiper-slide .tu .mask .yuan3 { left: 42.5%; top: 45%; } .ctn3 .ctn-list .swiper-slide .tu .mask .yuan4 { left: 38.3%; top: 79%; } .ctn3 .ctn-list .swiper-slide .tu .mask .yuan5 { left: 19.6%; top: 72%; } .ctn3 .ctn-list .swiper-slide .tu .mask .yuan6 { left: 5%; top: 74%; } .ctn3 .ctn-list .swiper-slide .tu .mask .tuu { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); } .ctn3 .ctn-list .swiper-slide .tu .mask .icons { position: absolute; width: 10%; opacity: 0; } .ctn3 .ctn-list .swiper-slide .tu .mask .i1 { left: 10%; top: 32%; } .ctn3 .ctn-list .swiper-slide .tu .mask .i2 { left: 22%; top: 32%; } .ctn3 .ctn-list .swiper-slide .tu .mask .i3 { left: 34%; top: 32%; } .ctn3 .ctn-list .swiper-slide .tu .mask .i4 { left: 46%; top: 32%; } .ctn3 .ctn-list .swiper-slide .tu .mask .i5 { top: 57%; left: 10%; } .ctn3 .ctn-list .swiper-slide .tu .mask .i6 { top: 57%; left: 22%; } .ctn3 .ctn-list .swiper-slide .tu .mask .i7 { top: 57%; left: 34%; } .ctn3 .ctn-list .swiper-slide .tu .mask .i8 { top: 57%; left: 46%; } .ctn3 .ctn-list .swiper-slide .right_con{ width:35%; padding-left:4%; } .ctn3 .ctn-list .swiper-slide h2 { font-weight:bold; color: #093682; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .ctn3 .ctn-list .right_con .right_ms{ color:#777; line-height:1.5; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .ctn3 .ctn-list .right_con .con_btn{ display:block; width:160px; height:46px; border-radius:23px; padding:0 30px; color:#fff; line-height:46px; position:relative; background:#093682; transition:all .5s; } .ctn3 .ctn-list .right_con .con_btn:before{ content:""; position:absolute; top:50%; right:20px; transform:translateY(-50%); width:7px; height:12px; background:url(https://omo-oss-image.thefastimg.com/portal-saas/ngc202304200031/cms/image/2c4d4459-2f4e-49c0-8e97-40d6b4459614.png) no-repeat center; } .ctn3 .ctn-list .swiper-slide-active .tu .mask .xian { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); } .ctn3 .ctn-list .swiper-slide-active .tu .mask .yuan { opacity: 1; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); } .ctn3 .ctn-list .swiper-slide-active .tu .mask .yuan1 { transition: all 0.5s ease 0.6s; -webkit-transition: all 0.5s ease 0.6s; -moz-transition: all 0.5s ease 0.6s; -ms-transition: all 0.5s ease 0.6s; } .ctn3 .ctn-list .swiper-slide-active .tu .mask .yuan2 { transition: all 0.5s ease 0.7s; -webkit-transition: all 0.5s ease 0.7s; -moz-transition: all 0.5s ease 0.7s; -ms-transition: all 0.5s ease 0.7s; } .ctn3 .ctn-list .swiper-slide-active .tu .mask .yuan3 { transition: all 0.5s ease 0.8s; -webkit-transition: all 0.5s ease 0.8s; -moz-transition: all 0.5s ease 0.8s; -ms-transition: all 0.5s ease 0.8s; } .ctn3 .ctn-list .swiper-slide-active .tu .mask .yuan4 { transition: all 0.5s ease 0.9s; -webkit-transition: all 0.5s ease 0.9s; -moz-transition: all 0.5s ease 0.9s; -ms-transition: all 0.5s ease 0.9s; } .ctn3 .ctn-list .swiper-slide-active .tu .mask .yuan5 { transition: all 0.5s ease 1s; -webkit-transition: all 0.5s ease 1s; -moz-transition: all 0.5s ease 1s; -ms-transition: all 0.5s ease 1s; } .ctn3 .ctn-list .swiper-slide-active .tu .mask .yuan6 { transition: all 0.5s ease 1.1s; -webkit-transition: all 0.5s ease 1.1s; -moz-transition: all 0.5s ease 1.1s; -ms-transition: all 0.5s ease 1.1s; } .ctn3 .ctn-list .swiper-slide-active .tu .mask .tuu { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); opacity: 1; } .ctn3 .ctn-list .swiper-slide-active .tu .mask .tu1 { transition: all 0.5s ease 0.5s; -webkit-transition: all 0.5s ease 0.5s; -moz-transition: all 0.5s ease 0.5s; -ms-transition: all 0.5s ease 0.5s; } .ctn3 .ctn-list .swiper-slide-active .tu .mask .tu2 { transition: all 0.5s ease 0.7s; -webkit-transition: all 0.5s ease 0.7s; -moz-transition: all 0.5s ease 0.7s; -ms-transition: all 0.5s ease 0.7s; } .ctn3 .ctn-list .swiper-slide-active .tu .mask .tu3 { transition: all 0.5s ease 0.9s; -webkit-transition: all 0.5s ease 0.9s; -moz-transition: all 0.5s ease 0.9s; -ms-transition: all 0.5s ease 0.9s; } .ctn3 .ctn-list .swiper-slide-active .tu .mask .tu4 { transition: all 0.5s ease 1.1s; -webkit-transition: all 0.5s ease 1.1s; -moz-transition: all 0.5s ease 1.1s; -ms-transition: all 0.5s ease 1.1s; } .ctn3 .ctn-list .swiper-slide-active .tu .mask .icons { opacity: 1; } .ctn3 .ctn-list .swiper-slide-active .tu .mask .i1 { top: 29%; transition: all 0.5s ease 0.5s; -webkit-transition: all 0.5s ease 0.5s; -moz-transition: all 0.5s ease 0.5s; -ms-transition: all 0.5s ease 0.5s; } .ctn3 .ctn-list .swiper-slide-active .tu .mask .i2 { top: 29%; transition: all 0.5s ease 0.6s; -webkit-transition: all 0.5s ease 0.6s; -moz-transition: all 0.5s ease 0.6s; -ms-transition: all 0.5s ease 0.6s; } .ctn3 .ctn-list .swiper-slide-active .tu .mask .i3 { top: 29%; transition: all 0.5s ease 0.7s; -webkit-transition: all 0.5s ease 0.7s; -moz-transition: all 0.5s ease 0.7s; -ms-transition: all 0.5s ease 0.7s; } .ctn3 .ctn-list .swiper-slide-active .tu .mask .i4 { top: 29%; transition: all 0.5s ease 0.8s; -webkit-transition: all 0.5s ease 0.8s; -moz-transition: all 0.5s ease 0.8s; -ms-transition: all 0.5s ease 0.8s; } .ctn3 .ctn-list .swiper-slide-active .tu .mask .i5 { top: 53%; transition: all 0.5s ease 0.9s; -webkit-transition: all 0.5s ease 0.9s; -moz-transition: all 0.5s ease 0.9s; -ms-transition: all 0.5s ease 0.9s; } .ctn3 .ctn-list .swiper-slide-active .tu .mask .i6 { top: 53%; transition: all 0.5s ease 1s; -webkit-transition: all 0.5s ease 1s; -moz-transition: all 0.5s ease 1s; -ms-transition: all 0.5s ease 1s; } .ctn3 .ctn-list .swiper-slide-active .tu .mask .i7 { top: 53%; transition: all 0.5s ease 1.1s; -webkit-transition: all 0.5s ease 1.1s; -moz-transition: all 0.5s ease 1.1s; -ms-transition: all 0.5s ease 1.1s; } .ctn3 .ctn-list .swiper-slide-active .tu .mask .i8 { top: 53%; transition: all 0.5s ease 1.2s; -webkit-transition: all 0.5s ease 1.2s; -moz-transition: all 0.5s ease 1.2s; -ms-transition: all 0.5s ease 1.2s; } .ctn3 .ctn-list .scroll-box { width:100%; position: absolute; bottom: 0; left: 50%; transform:translateX(-50%); height: 3px; } .ctn3 .ctn-list .scroll-box .swiper-scrollbar { height: 1px; width:100%; background: rgba(11,28,70,.1); } .ctn3 .ctn-list .scroll-box .swiper-scrollbar .swiper-scrollbar-drag { background: #0e3778; height:3px; border-radius:0; z-index:2; top:-1px; } .ctn4 { padding: 8.8vw 0; overflow: hidden; } .ctn4 .title { display: flex; justify-content: space-between; align-items: center; } .ctn4 .title h2 { font-family: Poppins-SemiBold; color: #000; letter-spacing: -1px; } .ctn4 .title a { width: 170px; line-height: 46px; text-align: center; border: 1px solid #ccc; border-radius: 23px; color: #000; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .ctn4 .title a:hover { border: 1px solid #0e3778; background: #0e3778; color: #fff; } .ctn4 .ctn-list { margin-top: 3vw; } .ctn4 .ctn-list .left { float: left; width: 66%; } .ctn4 .ctn-list .left .top { height: 27.8vw; border-radius: 12px; overflow: hidden; position: relative; } .ctn4 .ctn-list .left .top img { width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .ctn4 .ctn-list .left .top .text { position: absolute; width: 60%; left: 30px; bottom: 20px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .ctn4 .ctn-list .left .top .text h2 { font-family: Poppins-Medium; color: #fff; line-height: 1.3; } .ctn4 .ctn-list .left .top .text h3 { color: #fff; margin-top: 20px; } .ctn4 .ctn-list .left .top:hover img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); } .ctn4 .ctn-list .left .top:hover .text { left: 40px; } .ctn4 .ctn-list .left .bottom { margin-top: 30px; } .ctn4 .ctn-list .left .bottom ul li { float: left; width: 48.4%; border: 2px solid #dfdfdf; border-radius: 12px; padding:27px 30px; } .ctn4 .ctn-list .left .bottom ul li:nth-child(even) { float: right; } .ctn4 .ctn-list .left .bottom ul li h2 { font-family: Poppins-Medium; color: #000; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 1.5; height: 4.5em; line-height: 1.3; height: 3.9em; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .ctn4 .ctn-list .left .bottom ul li h3 { color: #666; margin: 20px 0 50px; } .ctn4 .ctn-list .left .bottom ul li p { color: #444; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 1.5; height: 4.5em; margin-bottom: 30px; } .ctn4 .ctn-list .left .bottom ul li span { color: #aaa; font-weight: bold; position: relative; left: 0; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .ctn4 .ctn-list .left .bottom ul li:hover h2 { color: #0e3778; } .ctn4 .ctn-list .left .bottom ul li:hover span { color: #0e3778; left: 4px; } .ctn4 .ctn-list .right { width: 32%; float: right; } .ctn4 .ctn-list .right ul li .tu { height: 13.5vw; border-radius: 12px 12px 0px 0px; overflow: hidden; } .ctn4 .ctn-list .right ul li .tu img { width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .ctn4 .ctn-list .right ul li .text { border-left: 2px solid #dfdfdf; border-right: 2px solid #dfdfdf; border-bottom: 2px solid #dfdfdf; border-radius: 0px 0px 12px 12px; padding: 20px; } .ctn4 .ctn-list .right ul li .text h2 { font-family: Poppins-Medium; color: #000; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 1.5; height: 3em; line-height: 1.3; height: 2.6em; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .ctn4 .ctn-list .right ul li .text h3 { color: #666; margin: 20px 0 23px; } .ctn4 .ctn-list .right ul li .text span { color: #aaa; font-weight: bold; position: relative; left: 0; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .ctn4 .ctn-list .right ul li:hover .tu img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); } .ctn4 .ctn-list .right ul li:hover .text h2 { color: #0e3778; } .ctn4 .ctn-list .right ul li:hover .text span { color: #0e3778; left: 4px; } .ctn4 .ctn-list .right ul li:nth-child(2) { margin-top: 30px; } @media screen and (max-width: 1440px) { .banner .swiper-container .swiper-pagination .swiper-pagination-bullet { width: 14px; height: 14px; margin: 0 6px; } .banner .swiper-container .swiper-pagination .swiper-pagination-bullet-active { width: 20px; height: 20px; border: 5px solid #fff; } .ctn4 .ctn-list .left .bottom ul li{ padding:25px 30px; } } @media screen and (max-width: 1366px){ .ctn2 .ctn-box .ctn-list .swiper-slide .tu .mask p{ font-size: 14px; width: 90%; } .ctn4 .ctn-list .left .bottom ul li{ padding:26px 30px; } #c_static_001-1691474909087 .e_scrollNumber-7 .p_num{ font-size:60px; } } @media screen and (max-width: 1200px) { .ctn4 .ctn-list .right ul li .text { padding: 18px 20px; } #c_static_001-1691474909087 .e_scrollNumber-7 .p_num{ font-size:50px; } } @media screen and (max-width: 1024px) { .banner { margin-top: 60px; } .ctn1 .bottom { bottom: 0; opacity: 1; position: relative; } .ctn1 .bottom .text { display: none; } .ctn1 .bottom .mobile-swiper { display: block; position: absolute; width: 60%; left: 20%; top: 50%; text-align: center; } .ctn1 .bottom .mobile-swiper .swiper-pagination { position: relative; bottom: 0; margin-top: 30px; } .ctn1 .bottom .mobile-swiper .swiper-pagination .swiper-pagination-bullet-active { background: #0e3778; } .ctn2 .ctn-box .ctn-list .swiper-slide h2 { width: 80%; } #c_static_001-1691474909087 .e_scrollNumber-7 .p_num{ font-size:40px; } } @media screen and (max-width: 768px) { .banner .swiper-container .swiper-wrapper .swiper-slide .text { top: 46%; } .banner .swiper-container .swiper-wrapper .swiper-slide .text h2 { font-size: 16px; line-height: 1.5; margin-bottom: 4px; } .banner .swiper-container .swiper-wrapper .swiper-slide .text p { font-size: 12px; } .banner .swiper-container .swiper-pagination { bottom: 10px; } .banner .swiper-container .swiper-pagination .swiper-pagination-bullet { width: 6px; height: 6px; margin: 0 3px; } .banner .swiper-container .swiper-pagination .swiper-pagination-bullet-active { width: 12px; height: 12px; border: 4px solid #fff; } .ctn1 .top { padding: 30px 0; } .ctn1 .top .con p { margin-top: 6px; } .ctn1 .bottom { padding: 30px 0 20px; } .ctn1 .bottom .tu { display: none; } .ctn1 .bottom .mobile-swiper { position: relative; width: 90%; left: 5%; } .ctn1 .bottom .mobile-swiper .swiper-slide p { font-size: 12px; } .ctn1 .bottom .mobile-swiper .swiper-pagination { margin-top: 20px; } .ctn1 .bottom .mobile-swiper .swiper-pagination .swiper-pagination-bullet { width: 6px; height: 6px; margin: 0 3px; } .ctn2 { padding: 30px 0; } .ctn2 .ctn-box .title { padding-left: 5%; } .ctn2 .ctn-box .ctn-list { margin-top: 20px; } .ctn2 .ctn-box .ctn-list .swiper-container { padding: 0 5%; } .ctn2 .ctn-box .ctn-list .swiper-pagination-progressbar { width: 90%; right: 0; margin-left: 5%; bottom: 0; top: auto; position: relative; margin-top: 20px; } .ctn2 .ctn-box .ctn-list .swiper-slide h2 { margin-top: 10px; } .ctn3 { padding: 30px 0; } .ctn3 .title a { width: 130px; line-height: 32px; } .ctn3 .ctn-list .swiper-container{ padding-bottom:0; } .ctn3 .ctn-list .swiper-slide h2 { margin-top: 10px; } .ctn3 .ctn-list .swiper-slide .tu{ width:100%; } .ctn3 .ctn-list .swiper-slide .right_con{ width:100%; padding-left:0; } .ctn3 .ctn-list .scroll-box { position: relative; margin-top: 30px; } .ctn3 .ctn-list .scroll-box .swiper-scrollbar { width: 100%; bottom: 0; } .ctn4 { padding: 30px 0; } .ctn4 .title a { width: 130px; line-height: 32px; } .ctn4 .ctn-list { margin-top: 20px; } .ctn4 .ctn-list .left { width: 100%; } .ctn4 .ctn-list .left .top { height: auto; } .ctn4 .ctn-list .left .top .text { bottom: 20px; left: 20px!important; } .ctn4 .ctn-list .left .top .text h3 { margin-top: 14px; } .ctn4 .ctn-list .left .bottom { margin-top: 20px; } .ctn4 .ctn-list .left .bottom ul li { width: 100%; padding: 20px; } .ctn4 .ctn-list .left .bottom ul li h3 { margin: 14px 0 20px; } .ctn4 .ctn-list .left .bottom ul li p { margin-bottom: 20px; } .ctn4 .ctn-list .left .bottom ul li:last-child { margin-top: 20px; } .ctn4 .ctn-list .right { width: 100%; margin-top: 20px; } .ctn4 .ctn-list .right ul li .tu { height: auto; } .ctn4 .ctn-list .right ul li:nth-child(2) { margin-top: 20px; } .ctn4 .ctn-list .right ul li .text { padding: 20px; } .ctn4 .ctn-list .right ul li .text h3 { margin: 14px 0 20px; } }