.banner { margin-top: 100px; /** height: 0; padding-bottom:40%; overflow: hidden; **/ } .banner img { width: 100%; } .ctn1 { position: relative; overflow: hidden; height: 0; padding-bottom: 46.8%; } .ctn1 img { width: 100%; } .ctn1 .text { position: absolute; left: 0; top: 3.5vw; } .ctn1 .text .title h2 { text-align: center; font-family: Poppins-SemiBold; letter-spacing: -1px; color: #000; } .ctn1 .text .content { margin-top: 6vw; width: 60%; } .ctn1 .text .content h3 { font-family: Poppins-Medium; letter-spacing: -1px; color: #000; margin-bottom: 1.5vw; } .ctn1 .text .content .txt { font-size: 16px; color: #333; height: 22vw; } .ctn1 .text .content .txt p { margin-top: 1vw; line-height: 1.6; } .ctn2 { position: relative; overflow: hidden; height: 0; padding-bottom: 46.7%; } .ctn2 img { width: 100%; position:relative; z-index:1; } .ctn2 .text { position: absolute; width: 100%; left: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); z-index:2; } .ctn2 .text .right { width: 40%; float: right; } .ctn2 .text .right .top h2 { font-family: Poppins-SemiBold; color: #000; letter-spacing: -1px; margin-bottom: 1.5vw; } .ctn2 .text .right .top p { color: #000; line-height: 1.6; } .ctn2 .text .right .bottom { margin-top: 3vw; } .ctn2 .text .right .bottom ul li { float: left; width: 50%; position: relative; } .ctn2 .text .right .bottom ul li:nth-child(odd):after { content: ''; width: 2px; height: 40px; background: #ebebeb; position: absolute; right: 2vw; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); } .ctn2 .text .right .bottom ul li:nth-child(even) { width: 228px; float: right; } .ctn2 .text .right .bottom ul li h2 { font-family: AlibabaPuHuiTiB; font-size: 4.6vw; color: #0e3778; letter-spacing: -5px; line-height: 1.2; } .ctn2 .text .right .bottom ul li p { color: #000; } .ctn2 .text .right .bottom ul li:nth-child(n+3) { margin-top: 1vw; } .ctn3 { position: relative; overflow: hidden; padding-bottom: 43.7%; height: 0; } .ctn3 img { width: 100%; } .ctn3 .text { position: absolute; width: 100%; left: 0; top: 4vw; } .ctn3 .text .title h2 { text-align: center; font-family: Poppins-SemiBold; letter-spacing: -1px; color: #fff; } .ctn3 .text .ctn-list ul li { float: left; width: 25%; margin-top: 6.5vw; padding: 0 1vw 0 1.8vw; position: relative; } .ctn3 .text .ctn-list ul li:before { content: ''; width: 4px; height: 5vw; background: #fff; position: absolute; left: 0; top: 12px; } .ctn3 .text .ctn-list ul li h2 { font-family: AlibabaPuHuiTiR; font-size: 3.125vw; letter-spacing: -2px; color: #fff; line-height: 1.2; } .ctn3 .text .ctn-list ul li p { color: #fff; } .ctn4 { padding: 3.5vw 0 6vw; overflow: hidden; } .ctn4 .title h2 { font-family: Poppins-SemiBold; color: #000; letter-spacing: -1px; text-align: center; } .ctn4 .text { margin-top: 4vw; } .ctn4 .text .left { float: left; width: 50%; } .ctn4 .text .left .txt h2 { font-family: Poppins-SemiBold; letter-spacing: -1px; color: #333; } .ctn4 .text .left .txt p { color: #333; } .ctn4 .text .left .txt .box { margin-top: 1.5vw; } .ctn4 .text .left .txt .box h3 { font-family: Poppins-Medium; letter-spacing: -1px; color: #0e3778; } .ctn4 .text .left .txt .box ul { margin-top: 1vw; } .ctn4 .text .left .txt .box ul li { font-size: 16px; margin-top: 0.8vw; } .ctn4 .text .left .txt .box ul li h4 { float: left; width: 130px; font-family: Poppins-Medium; color: #333; } .ctn4 .text .left .txt .box ul li p { overflow: hidden; color: #333; } .ctn4 .text .left .txt:not(:first-child) { margin-top: 1.5vw; } .ctn4 .text .right { float: right; width: 47.2%; height:0; padding-bottom: 50.8%; overflow: hidden; } .ctn4 .text .right img { width: 100%; } .ctn5 { padding: 9vw 0 10vw; background: #f2f3f5; position: relative; overflow: hidden; } .ctn5 .tu{ width:100%; height: auto; position:relative; overflow:hidden; } .ctn5 .bz_box{ width:100%; max-width:490px; display:flex; align-items:center; justify-content:space-between; } .ctn5 .bz_list{ width:auto; display:flex; align-items:center; } .ctn5 .bz_list img{ width:auto; height:auto; max-width:100%; max-height:100%; } .ctn5 .bz_list span{ padding-left:15px; color:#000; font-weight:bold; } .ctn5 .title { position: absolute; width: 100%; top: 3.5vw; left: 0; } .ctn5 .title h2 { text-align: center; font-family: Poppins-SemiBold; letter-spacing: -1px; color: #000000; } .ctn5 .text { width: 100%; } .ctn5 .text ul li { float: left; width: 31.333%; padding: 0 1vw; text-align: center; } .ctn5 .text ul li h2 { font-family: AlibabaPuHuiTiB; font-size: 3.75vw; letter-spacing: -3px; color: #0e459b; line-height: 1.2; } .ctn5 .text ul li h3 { font-family: Poppins-SemiBold; letter-spacing: -1px; color: #000; } .ctn5 .text ul li p { color: #333; margin-top: 6px; } .ctn6 { position: relative; overflow: hidden; height: 0; padding-bottom: 45.7%; } .ctn6 img { width: 100%; } .ctn6 .text { position: absolute; width: 100%; left: 0; top: 5vw; } .ctn6 .text .title h2 { font-family: Poppins-SemiBold; letter-spacing: -1px; color: #000000; } .ctn6 .text .ctn-list { width: 36%; height: 31vw; overflow: hidden; margin-top: 3vw; position: relative; } .ctn6 .text .ctn-list:before { content: ''; width: 1px; height: 120%; background: linear-gradient(to bottom, #ccc, transparent); position: absolute; left: 7px; top: 1.5vw; } .ctn6 .text .ctn-list .swiper-slide { padding-left: 2.5vw; } .ctn6 .text .ctn-list .swiper-slide:before { content: ''; width: 16px; height: 16px; background: #ccc; border-radius: 50%; position: absolute; left: 0; top: 1.5vw; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .ctn6 .text .ctn-list .swiper-slide h2 { font-size: 2.9vw; font-family: AlibabaPuHuiTiB; color: #333; letter-spacing: -3px; line-height: 1.3; opacity: 0.1; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .ctn6 .text .ctn-list .swiper-slide h3 { font-family: Poppins-SemiBold; color: #000; opacity: 0.1; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .ctn6 .text .ctn-list .swiper-slide p { color: #333; line-height: 1.3; margin-top: 0.6vw; opacity: 0.1; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .ctn6 .text .ctn-list .swiper-slide:hover:before { background: #0e459b; } .ctn6 .text .ctn-list .swiper-slide:hover h2 { color: #0e459b; opacity: 1; } .ctn6 .text .ctn-list .swiper-slide:hover h3 { opacity: 1; } .ctn6 .text .ctn-list .swiper-slide:hover p { opacity: 1; } .ctn6 .text .ctn-list .swiper-slide-active:before { background: #0e459b; } .ctn6 .text .ctn-list .swiper-slide-active h2 { color: #0e459b; opacity: 1; } .ctn6 .text .ctn-list .swiper-slide-active h3 { opacity: 1; } .ctn6 .text .ctn-list .swiper-slide-active p { opacity: 1; } .ctn6 .text .ctn-list .swiper-slide-next:before { background: #333; } .ctn6 .text .ctn-list .swiper-slide-next h2 { opacity: 1; } .ctn6 .text .ctn-list .swiper-slide-next h3 { opacity: 1; } .ctn6 .text .ctn-list .swiper-slide-next p { opacity: 0.5; } @media screen and (max-width: 1600px) { .ctn2 .text .right .bottom ul li:nth-child(odd):after { right: 3vw; } } @media screen and (max-width: 1440px) { .banner { margin-top: 80px; } .ctn1 .text .content .txt { font-size: 14px; } .ctn2 .text .right .bottom ul li h2 { letter-spacing: -3px; } .ctn2 .text .right .bottom ul li:nth-child(even) { width: 200px; width:50%; } .ctn4 .text .left .txt .box ul li { font-size: 14px; } .ctn5 .text ul li h3 { font-size: 16px; } .ctn5 .text ul li p { font-size: 14px; } .ctn6 .text { top: 4vw; } } @media screen and (max-width: 1200px) { .ctn2 .text .right .bottom ul li:nth-child(even) { width: 50%; } .ctn2 .text .right .bottom ul li:nth-child(odd):after { right: 5vw; } } @media screen and (max-width: 1024px) { .banner { margin-top: 60px; } .ctn3 .text .ctn-list ul li { margin-top: 5vw; } .ctn4 .text .left .txt .box ul li h4 { width: 110px; } .ctn5 { padding: 10vw 0 12vw; } .ctn6 .text .ctn-list:before { left: 6px; top: 12px; } .ctn6 .text .ctn-list .swiper-slide:before { width: 12px; height: 12px; top: 12px; } } @media screen and (max-width: 768px) { .ctn1 { height: 400px; } .ctn1 img { height: 100%; object-fit: cover; } .ctn1 .text { top: 30px; } .ctn1 .text .title h2 { letter-spacing: 0; } .ctn1 .text .content { width: 100%; margin-top: 20px; } .ctn1 .text .content h3 { margin-bottom: 10px; letter-spacing: 0; } .ctn1 .text .content .txt { height: 240px; } .ctn1 .text .content .txt p { margin-top: 10px; } .ctn2 { padding: 30px 0; } .ctn2 .text { position: relative; top: 0; transform: translateY(0%); -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); } .ctn2 .text .right { width: 100%; } .ctn2 .text .right .top h2 { margin-bottom: 10px; letter-spacing: 0; } .ctn2 .text .right .bottom { margin-top: 20px; margin-bottom: 20px; } .ctn2 .text .right .bottom ul li h2 { font-size: 30px; letter-spacing: 0; } .ctn2 .text .right .bottom ul li:nth-child(n+3) { margin-top: 20px; } .ctn3 { height: 700px; } .ctn3 img { height: 100%; object-fit: cover; } .ctn3 .text { top: 30px; } .ctn3 .text .title h2 { letter-spacing: 0; } .ctn3 .text .ctn-list ul { display: flex; flex-wrap: wrap; } .ctn3 .text .ctn-list ul li { width: 50%; margin-top: 20px; padding: 0 10px 0 14px; } .ctn3 .text .ctn-list ul li:before { width: 2px; height: 60px; top: 8px; } .ctn3 .text .ctn-list ul li h2 { font-size: 30px; letter-spacing: 0; } .ctn4 { padding: 30px 0; } .ctn4 .title h2 { letter-spacing: 0; } .ctn4 .text { margin-top: 20px; } .ctn4 .text .left { width: 100%; margin-top: 20px; } .ctn4 .text .left .txt:not(:first-child) { margin-top: 10px; } .ctn4 .text .left .txt h2 { letter-spacing: 0; } .ctn4 .text .left .txt .box { margin-top: 10px; } .ctn4 .text .left .txt .box h3 { letter-spacing: 0; } .ctn4 .text .left .txt .box ul { margin-top: 10px; } .ctn4 .text .left .txt .box ul li { margin-top: 8px; } .ctn4 .text .right { width: 100%; } .ctn5 { padding: 30px 0; } .ctn5 .title { position: relative; top: 0; margin-bottom: 20px; } .ctn5 .title h2 { letter-spacing: 0; } .ctn5 .text { position: relative; bottom: 0; } .ctn5 .text ul li { width: 100%; text-align: left; margin-top: 20px; padding: 0; } .ctn5 .text ul li h2 { font-size: 30px; } .ctn5 .text ul li h3 { letter-spacing: 0; } .ctn6 { height: 600px; } .ctn6 img { height: 100%; object-fit: cover; } .ctn6 .text { top: 30px; } .ctn6 .text .title h2 { letter-spacing: 0; } .ctn6 .text .ctn-list { width: 90%; height: 480px; margin-top: 20px; } .ctn6 .text .ctn-list .swiper-slide { padding-left: 30px; } .ctn6 .text .ctn-list .swiper-slide h2 { font-size: 24px; letter-spacing: 0; } .ctn6 .text .ctn-list .swiper-slide p { font-size: 14px; } .banner{ /** height:auto; padding-bottom:0; **/ } .ctn1{ padding-bottom:0; } .ctn2{ height:auto; } .ctn3 { padding-bottom:0; } .ctn4 .text .right{ height:auto; padding-bottom:0; } .ctn5{ } .ctn6{ padding-bottom:0; } } .ctn66 { padding: 8vw 0; } .ctn66 .title h2 { font-family: Poppins-SemiBold; letter-spacing: -1px; color: #000000; text-align: center; } .ctn66 .ctn-list { margin-top: 6vw; } .ctn66 .ctn-list .swiper-slide { text-align: center; } .ctn66 .ctn-list .swiper-slide h2 { font-family: AlibabaPuHuiTiB; color: #333; letter-spacing: -3px; position: relative; padding-bottom: 1.5vw; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .ctn66 .ctn-list .swiper-slide h2:before { content: ''; width: 100%; height: 1px; background: #ccc; position: absolute; left: 0; bottom: 0; } .ctn66 .ctn-list .swiper-slide h2:after { content: ''; width: 16px; height: 16px; border-radius: 50%; background: #333; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .ctn66 .ctn-list .swiper-slide h3 { margin-top: 1.5vw; font-family: Poppins-SemiBold; color: #000; padding: 0 1vw; } .ctn66 .ctn-list .swiper-slide p { color: #333; line-height: 1.6; margin-top: 10px; padding: 0 1vw; } .ctn66 .ctn-list .swiper-slide:hover h2 { color: #0e3778; } .ctn66 .ctn-list .swiper-slide:hover h2:after { background: #0e3778; } .ctn66 .ctn-list .swiper-pagination { display: none; } @media screen and (max-width: 1440px) { .ctn66 .ctn-list .swiper-slide h2:after { width: 12px; height: 12px; bottom: -5px; } } @media screen and (max-width: 768px) { .ctn66 { padding: 30px 0; } .ctn66 .ctn-list { margin-top: 20px; } .ctn66 .ctn-list .swiper-container { padding-bottom: 50px; } .nums_box span{ font-size: 30px; } .ctn66 .ctn-list .swiper-slide h2 { font-size: 30px; padding-bottom: 20px; letter-spacing: 0; } .ctn66 .ctn-list .swiper-slide h3 { margin-top: 20px; padding: 0; } .ctn66 .ctn-list .swiper-slide p { padding: 0; } .ctn66 .ctn-list .swiper-pagination { display: block; bottom: 0; } .ctn66 .ctn-list .swiper-pagination .swiper-pagination-bullet { width: 6px; height: 6px; margin: 0 3px; } .ctn66 .ctn-list .swiper-pagination .swiper-pagination-bullet-active { background: #0e3778; } }