#crumb { background: #fff; } body { overflow-x: hidden; } .con{ } .con .nav_tit { font-weight: 600; text-align: center; color: #2b2b2b; line-height: 1; } .con .nav_tit::after { content: ""; display: block; width: 60px; height: 2px; margin: auto; margin-top: 18px; background: #d0121b; } .con .nav_mes { font-weight: 400; text-align: center; color: #2b2b2b; margin-top: 20px; } .con .page1 { background: #fff; padding:40px 0 0 0; } .con .page1 .main { margin-top: 40px; background: #fbfbfb; display: flex; } .con .page1 .main .main_l { flex: 1; height: auto; padding: 40px; } .con .page1 .main .main_l .tit { font-weight: 400; text-align: left; color: #333333; } .con .page1 .main .main_l .mes { margin-top:40px; font-weight: 400; text-align: left; color: #666666; line-height: 2; } .con .page1 .main .main_r { flex: 1; } .con .page1 .main .main_r > div { position: relative; } .con .page1 .main .main_r video { width: 100%; display: block; } .con .page1 .main .main_r .play { position: absolute; top: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.1); height: 100%; display: flex; align-items: center; justify-content: center; } .con .page1 .main .main_r .play img { cursor: pointer; width: 76px; } .con .page1 .main_footer { background: #f3f3f3; padding: 40px 0 10px 0; } .con .page1 .main_footer .w1440 { display: flex; flex-wrap: wrap; } .con .page1 .main_footer .w1440 .list { display: flex; align-items: center; flex: 0 0 calc(100% / 4); margin-bottom: 40px; } .con .page1 .main_footer .w1440 .list .image { width: 40px; } .con .page1 .main_footer .w1440 .list .image img { width: 100%; } .con .page1 .main_footer .w1440 .list .numCount_list { margin-left: 18px; } .con .page1 .main_footer .w1440 .list .numCount_list > div { display: flex; align-items: flex-end; color: #333333; } .con .page1 .main_footer .w1440 .list .numCount_list > div p { line-height: 1; } .con .page1 .main_footer .w1440 .list .numCount_list .numtit { margin-top: 10px; font-weight: 400; color: #666666; } .con .page2 { padding: 40px 0 60px 0; background-color: #fff; overflow: hidden; width: 100%; position: relative; } .con .page2 .main { width: 100%; overflow: hidden; margin-top: 40px; padding-bottom: 8px; } .con .page2 .main .swiper-slide { width: auto; position: relative; padding-left: 14px; padding-bottom: 40px; } .con .page2 .main .swiper-wrapper{ align-items: flex-end; } .con .page2 .main .swiper-slide:nth-child(2n) { margin-bottom: 100px; } .con .page2 .main .swiper-slide .tit { font-weight: 400; text-align: left; color: #c9141e; } .con .page2 .main .swiper-slide .mes { margin-top: 10px; font-size: 14px; font-weight: 400; color: #666666; } .con .page2 .main .swiper-slide .mes li { list-style: disc; margin-left: 1em; line-height: 1.7; } .con .page2 .main .swiper-slide .mes li::marker { width: 4px; height: 4px; color: #d0121b; } .con .page2 .main .swiper-slide::before { content: ""; position: absolute; left: 3px; bottom: 0; width: 2px; height: 100%; max-height: 140px; background: linear-gradient(0deg, #d0121b 0%, #ffffff 100%); } .con .page2 .main .swiper-slide::after { content: ""; position: absolute; left: 0; bottom: 0; width: 8px; height: 8px; background: #d0121b; border-radius: 100%; } .con .page2 .image { width: 200%; position: absolute; right: 0; bottom: 0%; animation: move_wave 14s linear infinite; } .con .page2 .image img { width: 100%; } .con .page3 { background-image: linear-gradient(to bottom, #f9f9f9, #ffffff); padding:40px 0; } .con .page3 .nav_mes { margin-top:40px; } .con .page3 .nav_mes span { color: #D0121B; } .con .page3 .main { margin-top:40px; position: relative; } .con .page3 .main > img { width: 100%; } .con .page3 .main .info { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .con .page3 .main .info .list { width: 5px; height: 5px; background: #ffffff; box-sizing: content-box; border: 4px solid #f21421; border-radius: 100%; position: absolute; transform: translate(-50%,-50%); } .con .page3 .main .info .list::after { content: ""; width: 26px; height: 26px; background: rgba(242, 20, 33); border-radius: 100%; animation: an1 2s linear infinite; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .con .page3 .main .info .on { width: 70px; height: 70px; background: #f21421; border: none; display: flex; align-items: center; justify-content: center; } .con .page3 .main .info .on img { max-width: 80%; } .con .page3 .main .info .on::after { content: ""; width: 120px; height: 120px; } .con .page4 { padding:40px 0; background: url(/static/cn/img/groupOverview_page4_bg.jpg) no-repeat; background-size: cover; } .con .page4 .swiper { margin-top: 40px; padding-bottom: 40px; } .con .page4 .swiper-horizontal > .swiper-scrollbar, .con .page4 .swiper-scrollbar.swiper-scrollbar-horizontal { left: 0; width: 100%; height: 3px; background: #d2d2d2; border-radius: 2px; bottom: 24px; } .con .page4 .swiper-horizontal > .swiper-scrollbar .swiper-scrollbar-drag, .con .page4 .swiper-scrollbar.swiper-scrollbar-horizontal .swiper-scrollbar-drag { height: 3px; background: #db2029; border-radius: 2px; cursor: pointer; } .con .page4 .swiper-horizontal > .swiper-scrollbar .swiper-scrollbar-drag:after, .con .page4 .swiper-scrollbar.swiper-scrollbar-horizontal .swiper-scrollbar-drag:after { content: ""; position: absolute; width: 46px; height: 46px; border-radius: 100%; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); background: url(/static/cn/img/groupOverview_page4_icon2.png) no-repeat; background-size: 100%; } .con .page4 .swiper-slide { width: auto; border-radius: 30px; position: relative; overflow: hidden; margin-right:40px; } .con .page4 .swiper-slide .image { position: relative; height: 0; padding-top: 126%; overflow: hidden; } .con .page4 .swiper-slide .image img { position: absolute; width: 100%; top: 0; left: 0; height: 100%; transition: all 0.4s linear; object-fit: cover; } .con .page4 .swiper-slide:hover img { transform: scale(1.05); } .con .page4 .swiper-slide .info { width: 100%; position: absolute; bottom: 0; left: 0; padding: 20px; text-align: left; color: #ffffff; letter-spacing: 0.6px; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); } .con .page5 { padding:40px 0; background-color: #fff; position: relative; } .con .page5 .con { width: 100%; max-width: 1680px; margin: auto; position: relative; } .con .page5 .con .swiper_page5 .swiper-slide { width: 100%; } .con .page5 .con .swiper_page5 .swiper-slide > div { position: relative; } .con .page5 .con .swiper_page5 .swiper-slide .image { padding-top: 38.1%; height: 0; border-radius: 40px; position: relative; overflow: hidden; } .con .page5 .con .swiper_page5 .swiper-slide .image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s linear; } .con .page5 .con .swiper_page5 .swiper-slide .info { position: absolute; bottom: 0; text-align: center; left: 50%; z-index: 2; transform: translateX(-50%); background: rgba(25, 25, 25, 0.6); border-radius: 30px 30px 0px 0px; padding: 22px 0; } .con .page5 .con .swiper_page5 .swiper-slide .info .tit { font-weight: 400; text-align: center; color: #ffffff; } .con .page5 .con .swiper_page5 .swiper-slide:hover .image img { transform: scale(1.05); } .con .page6 { background: #f3f3f3; padding:40px 0; max-width: 1920px; } .con .page6 .swiper_page6 { width: 100%; padding-bottom: 40px; } .con .page6 .swiper_page6 .swiper-slide { width: 100%; } .con .page6 .swiper_page6 .swiper-slide img { width: 100%; } .con .page6 .swiper_page6 .swiper-pagination { bottom: 0; } .con .page6 .swiper_page6 .swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; opacity: 0.5; background: #d0111b; } .con .page6 .swiper_page6 .swiper-pagination .swiper-pagination-bullet-active { width: 40px; opacity: 1; width: 30px; border-radius: 5px; } @keyframes move_wave { 0% { transform: translateX(0) translateZ(0) scaleY(1); } 50% { transform: translateX(25%) translateZ(0) scaleY(0.65); } 100% { transform: translateX(50%) translateZ(0) scaleY(1); } } @keyframes an1 { 0% { transform: translateX(-50%) translateY(-50%) scale(0.5); opacity: 0; } 50% { transform: translateX(-50%) translateY(-50%) scale(1.04); opacity: 0.16; } 100% { transform: translateX(-50%) translateY(-50%) scale(1.1); opacity: 0; } } @media only screen and (max-width: 1720px) { .con .page5 .con { max-width: calc(100% - 110px); } } @media only screen and (max-width: 1600px) { .con .page4 .swiper-slide .image { height: 25vw; } } @media only screen and (max-width: 1200px) { } @media only screen and (max-width: 768px) { .con .page1 { padding-top: 20px; } .con .nav_tit::after { margin-top: 10px; } .con .page1 .main { margin-top: 20px; } .con .page1 .main { flex-wrap: wrap; } .con .page1 .main .main_l { flex: 0 0 100%; } .con .page1 .main .main_r { flex: 0 0 100%; } .con .page1 .main .main_l { padding: 40px 5vw; } .con .page1 .main .main_l .mes{ margin-top: 20px; } .con .page1 .main_footer .w1440 .list { flex: 0 0 calc(100% / 2); margin-bottom: 30px; } .con .page1 .main_footer .w1440 .list .image { width: 30px; } .con .page1 .main_footer .w1440 .list .numCount_list .numtit { margin-top: 8px; font-size: 14px; } .con .page1 .main_footer { padding: 40px 0 10px 0; } .con .page2 { padding: 40px 0; } .con .page2 .main { margin-top: 20px; } .con .page2 .image img { height: 100%; width: auto; } .con .page2 .main .swiper-slide { align-self: flex-end; } .con .page2 .main .swiper-slide:nth-child(2n) { margin-bottom: 40px; } .con .page2 .image { bottom: -10%; } .con .page3 { padding:40px 0; } .con .page3 .nav_mes { margin-top: 20px; } .con .page3 .main { margin-top: 20px; } .con .page3 .main .info .on::after { width: 30px; height: 30px; } .con .page3 .main .info .list { border-width: 2px; } .con .page3 .main .info .list::after { width: 20px; height: 20px; } .con .page3 .main .info .on { width: 20px; height: 20px; } .con .nav_mes { margin-top: 20px; } .con .page4 .swiper { margin-top: 20px; } .con .page4 { padding: 40px 0; } .con .page4 .swiper-slide .image { width: 100%; height: 0; padding-top: 126%; position: relative; overflow: hidden; } .con .page4 .swiper-slide .image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .con .page4 .swiper-slide .image img { width: 100%; } .con .page4 .swiper { padding-bottom: 30px; } .con .page4 .swiper-horizontal > .swiper-scrollbar, .con .page4 .swiper-scrollbar.swiper-scrollbar-horizontal { bottom: 10px; } .con .page4 .swiper-horizontal > .swiper-scrollbar .swiper-scrollbar-drag:after, .con .page4 .swiper-scrollbar.swiper-scrollbar-horizontal .swiper-scrollbar-drag:after { width: 20px; height: 20px; } .con .page5{ padding: 40px 0; } .con .page5 .con { max-width: 90%; } .con .page5 .con .swiper_page5 .swiper-slide .image { padding-top: 56%; border-radius: 20px; } .con .page5 .con .swiper_page5 .swiper-slide .info { border-radius: 20px; width: 100%; padding: 10px; } .con .page5 .con .swiper_page5 .swiper-slide .info p { font-size: 14px; } .con .page6 .swiper_page6 .swiper-pagination .swiper-pagination-bullet { width: 6px; height: 6px; } .con .page6 { padding: 40px 0; } .con .page6 .swiper_page6 { padding-bottom: 30px; } .con .page6 .swiper_page6 .swiper-pagination .swiper-pagination-bullet-active { width: 10px; height: 6px; } }