#crumb { background: #f8f9fb; } .con .nav_tit { font-weight: 400; 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: #f8f9fa; padding: 60px 0 70px 0; } .con .page1 .swiper_page1 { margin-top: 40px; padding-bottom: 40px; } .con .page1 .swiper_page1 .swiper-slide { background: #ffffff; border: 1px solid #d2d2d2; } .con .page1 .swiper_page1 .swiper-slide .image { width: 100%; height: 0; position: relative; padding-top: 122%; overflow: hidden; } .con .page1 .swiper_page1 .swiper-slide .image img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover; transition: all 0.4s linear; } .con .page1 .swiper_page1 .swiper-slide .main_footer { border-top: 1px solid #d2d2d2; padding: 18px 18px 18px 26px; display: flex; align-items: center; justify-content: space-between; } .con .page1 .swiper_page1 .swiper-slide .main_footer div svg { margin-left: 14px; } .con .page1 .swiper_page1 .swiper-slide:hover img { transform: scale(1.05); } .con .page1 .swiper_page1 .swiper-slide:hover .tit { color: #d0121b; } .con .swiper-horizontal > .swiper-scrollbar, .con .swiper-scrollbar.swiper-scrollbar-horizontal { width: 100%; left: 0; bottom: 2px; height: 1px; background: #d2d2d2; } .con .swiper-horizontal > .swiper-scrollbar .swiper-scrollbar-drag, .con .swiper-scrollbar.swiper-scrollbar-horizontal .swiper-scrollbar-drag { height: 4px; bottom: 2px; background: #f31f2b; cursor: pointer; } .con .page1_2 { padding:70px 0; } .con .page1_2 .num_box { margin-top:40px; display: flex; align-items: flex-end; justify-content: center; } .con .page1_2 .num_box hr:last-child{ display: none; } .con .page1_2 .num_box .numCount_list > div { display: flex; align-items: flex-end; } .con .page1_2 .num_box .numCount_list > div p { font-weight: 600; line-height: 1; color: #d0111b; } .con .page1_2 .num_box .numCount_list > div .numCX { line-height: 0.9; } .con .page1_2 .num_box .numCount_list .numtit { margin-top:20px; } .con .page1_2 .num_box hr { width: 1px; height: 70px; display: inline-block; background: #dcdcdc; margin: 0 40px; } .con .page1_2 .swiper_photo { width: 100%; margin-top: 40px; padding-bottom: 40px; } .con .page1_2 .swiper_photo .image { height: 0; padding-top: 75%; overflow: hidden; position: relative; } .con .page1_2 .swiper_photo .image img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; transition: all 0.4s linear; } .con .page1_2 .swiper_photo .image:hover img { transform: scale(1.05); } .con .page1_2 .swiper_photo .info { padding: 14px 40px 0 0; } .con .page1_2 .swiper_photo .info .tit { font-weight: 600; color: #333333; } .con .page1_2 .swiper_photo .info .mes { margin-top: 10px; color: #666666; } .con .page1_2 .swiper_photo .swiper-horizontal > .swiper-scrollbar, .con .page1_2 .swiper_photo .swiper-scrollbar.swiper-scrollbar-horizontal { width: 100%; left: 0; bottom: 2px; height: 1px; background: #d2d2d2; } .con .page1_2 .swiper_photo .swiper-horizontal > .swiper-scrollbar .swiper-scrollbar-drag, .con .page1_2 .swiper_photo .swiper-scrollbar.swiper-scrollbar-horizontal .swiper-scrollbar-drag { height: 4px; bottom: 2px; background: #f31f2b; cursor: pointer; } .con .page2 { padding:0 0 70px 0; background-color: #fff; } .con .page2 .w1440 > .tit { color: #2b2b2b; } .con .page2 .main { display: flex; margin-top: 40px; justify-content: space-between; } .con .page2 .main .main_l { flex: 0 0 53.19%; } .con .page2 .main .main_l .list { margin-bottom: 20px; padding: 20px 40px; background: #f8f9fb; } .con .page2 .main .main_l .list:last-child { margin-bottom: 0; } .con .page2 .main .main_l .list .tit { color: #c9141e; } .con .page2 .main .main_l .list .mes { margin-top: 20px; font-weight: 400; text-align: left; color: #888888; line-height: 1.7; letter-spacing: 0.8px; } .con .page2 .main .main_r { flex: 0 0 35.69%; align-self: center; } .con .page2 .main .main_r img { width: 100%; } .con .page2_2 { padding: 70px 0; background: url(/static/cn/img/leyardharity_page2_bg.jpg) no-repeat; background-size: cover; } .con .page2_2 .main { display: flex; margin-top: 40px; } .con .page2_2 .main .main_l { flex: 1; padding-right: 40px; } .con .page2_2 .main .main_l .fnt_24 { color: #333333; font-weight: 600; } .con .page2_2 .main .main_l .mes { font-weight: 400; color: #666666; line-height: 2; margin-top:20px; } .con .page2_2 .main .main_l .mes p, .con .page2_2 .main .main_l .mes span, .con .page2_2 .main .main_l .mes li { font-weight: 400; color: #666666; list-style-type: disc; line-height: 2; } .con .page2_2 .main .main_l .mes li { margin-left: 1em; } .con .page2_2 .main .main_r { flex: 0 0 59%; display: flex; flex-wrap: wrap; } .con .page2_2 .main .main_r .list { flex: 0 0 calc((100% - 20px)/2); margin-right: 20px; background: rgba(255, 255, 255, 0.8); border-radius: 15px; display: flex; padding: 20px; margin-bottom: 20px; } .con .page2_2 .main .main_r .list:nth-child(2n) { margin-right: 0; } .con .page2_2 .main .main_r .list .image { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 100%; border: 1px solid #d0111b; display: flex; justify-content: center; align-items: center; } .con .page2_2 .main .main_r .list .image img { max-width: 50%; max-height: 50%; } .con .page2_2 .main .main_r .list .info { padding-left: 20px; flex: 1; } .con .page2_2 .main .main_r .list .info .tit { font-weight: bold; text-align: left; color: #333333; line-height: 1.25; letter-spacing: 0.72px; } .con .page2_2 .main .main_r .list .info .mes { margin-top: 16px; font-weight: 400; text-align: left; color: #555555; line-height: 1.7; } .con .page3 { padding: 70px 0; background: url(/static/cn/img/socialResponsibility_page3_image1.jpg) no-repeat; background-size: cover; } .con .page3 .nav_mes { margin-top: 40px; } .con .page3 .main { margin-top: 20px; } .con .page3 .main .tit { color: #ca000b; text-align: center; } .con .page3 .main > div { position: relative; } .con .page3 .main > div img { width: 100%; margin-top: 20px; } .con .page3_2 { padding: 70px 0 60px 0; background: url(/static/cn/img/leyardharity_page3_bg.jpg) no-repeat; background-size: cover; } .con .page3_2 .nav_tit { color: #fff; } .con .page3_2 .nav_tit::after { background: #d0121b; } .con .page3_2 .main { display: flex; margin-top: 40px; } .con .page3_2 .main .main_l { flex: 1; align-self: center; padding-right:40px; color: #fff; } .con .page3_2 .main .main_l .fnt_24 { color: #fff; font-weight: 600; } .con .page3_2 .main .main_l hr { width: 100%; height: 1px; margin-top: 20px; max-width: 520px; background: rgba(255, 255, 255, 0.4); } .con .page3_2 .main .main_l .mes { font-weight: 400; color: #fff; line-height: 2; margin-top: 40px; } .con .page3_2 .main .main_l .mes p, .con .page3_2 .main .main_l .mes span, .con .page3_2 .main .main_l .mes li { font-weight: 400; color: #fff; list-style-type: disc; line-height: 2; } .con .page3_2 .main .main_l .mes li { margin-left: 1em; } .con .page3_2 .main .main_r { flex: 0 0 59%; display: flex; flex-wrap: wrap; } .con .page3_2 .main .main_r .list { flex: 0 0 calc((100% - 40px)/3); margin-right: 20px; background: rgba(5, 20, 42, 0.3); border-radius: 15px; box-shadow: 0px 10px 20px 0px rgba(204, 204, 204, 0.35); padding: 20px ; margin-bottom: 20px; } .con .page3_2 .main .main_r .list:nth-child(3n) { margin-right: 0; } .con .page3_2 .main .main_r .list .image { height: 36px; } .con .page3_2 .main .main_r .list .image img { height: 100%; } .con .page3_2 .main .main_r .list .info { margin-top: 26px; } .con .page3_2 .main .main_r .list .info .tit { font-weight: bold; text-align: left; color: #fff; line-height: 1.25; letter-spacing: 0.72px; } .con .page3_2 .main .main_r .list .info .mes { margin-top: 16px; font-weight: 400; text-align: left; color: #fff; line-height: 1.7; } .con .page3_2 .main .main_r .list:nth-child(4) { flex: 0 0 100%; margin-right: 0; display: flex; padding: 20px 20px 20px 0; } .con .page3_2 .main .main_r .list:nth-child(4) .image { flex: 0 0 170px; height: 50px; text-align: center; } .con .page3_2 .main .main_r .list:nth-child(4) .info { margin-top: 0; } .con .page4 { background: url(/static/cn/img/socialResponsibility_page4_bg.jpg) no-repeat; background-size: cover; } .con .page4 .w1440 { padding:70px 0; border-left: 1px solid rgba(170, 170, 170, 0.5); } .con .page4 .nav_tit { padding-left: 40px; text-align: left; } .con .page4 .nav_tit::after { margin-left: 0; } .con .page4 .main { margin-top: 40px; display: flex; } .con .page4 .main .main_l { flex: 0 0 430px; padding-right: 30px; } .con .page4 .main .main_l .list { font-weight: bold; text-align: left; color: #333333; letter-spacing: 0.36px; margin-bottom: 40px; position: relative; padding-left: 40px; transition: all 0.2s linear; cursor: pointer; } .con .page4 .main .main_l .list.on { font-size: 130%; color: #ca000b; } .con .page4 .main .main_l .list.on:before { content: ""; width: 40px; height: 40px; position: absolute; border: 8px solid #ca000b; box-sizing: border-box; left: 0; top: 50%; border-radius: 100%; transform: translateX(-50%) translateY(-50%); } .con .page4 .main .main_l .list:last-child { margin-bottom: 0; } .con .page4 .main .main_r { flex: 1; } .con .page4 .main .main_r .list:not(:first-child) { display: none; } .con .page4 .main .main_r .list .tit { font-weight: bold; text-align: left; color: #333333; letter-spacing: 0.48px; } .con .page4 .main .main_r .list .tit::after { content: ""; display: block; margin-top:20px; width: 60px; height: 2px; background: #333333; } .con .page4 .main .main_r .list .mes { max-width: 782px; margin-top: 20px; font-weight: 400; text-align: left; color: #666666; line-height: 2; letter-spacing: 0.32px; } .con .mo { display: none; } .con .page4_2 { padding: 70px 0; background-color: #fff; } .con .page4_2 .con { width: 100%; max-width: 1680px; margin: auto; position: relative; } .con .page4_2 .con .mySwiper_page4 .swiper-slide { width: 100%; } .con .page4_2 .con .mySwiper_page4 .swiper-slide > div { position: relative; } .con .page4_2 .con .mySwiper_page4 .swiper-slide .image { padding-top: 38.1%; height: 0; border-radius: 40px; position: relative; overflow: hidden; } .con .page4_2 .con .mySwiper_page4 .swiper-slide .image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.4s linear; } .con .page4_2 .con .mySwiper_page4 .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 .page4_2 .con .mySwiper_page4 .swiper-slide .info .tit { font-weight: 400; text-align: center; color: #ffffff; } .con .page4_2 .con .mySwiper_page4 .swiper-slide:hover .image img { transform: scale(1.05); } .con .page4_2 .con .mySwiper_page5_footer_box { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 3; width: 100%; max-width: 64.28%; } .con .page4_2 .con .mySwiper_page5_footer_box .mySwiper_page5_footer { margin: auto; width: 100%; background: rgba(25, 25, 25, 0.5); border-radius: 30px 30px 0px 0px; } .con .page4_2 .con .mySwiper_page5_footer_box .mySwiper_page5_footer .swiper-slide { font-weight: 400; text-align: center; color: #ffffff; padding: 22px 0; cursor: pointer; transition: all 0.4s linear; } .con .page4_2 .con .mySwiper_page5_footer_box .mySwiper_page5_footer .swiper-slide p { position: relative; z-index: 2; } .con .page4_2 .con .mySwiper_page5_footer_box .mySwiper_page5_footer .swiper-slide:after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 0; z-index: 1; transition: all 0.4s linear; border-radius: 30px 30px 0px 0px; background: rgba(25, 25, 25, 0.6); } .con .page4_2 .con .mySwiper_page5_footer_box .mySwiper_page5_footer .swiper-slide-thumb-active:after { width: 100%; } .con .page5_2 { padding: 70px 0; background: #f3f4f5; } .con .page5_2 .main { display: flex; margin-top: 40px; position: relative; } .con .page5_2 .main .swiper{ padding-bottom: 40px; } .con .page5_2 .main .list { background: #ffffff; border-radius: 10px; overflow: hidden; } .con .page5_2 .main .list .image { width: 100%; height: 0; position: relative; padding-top: 56%; overflow: hidden; } .con .page5_2 .main .list .image img { position: absolute; height: 100%; width: 100%; top: 0; left: 0; object-fit: cover; transition: all 0.4s linear; } .con .page5_2 .main .list:hover img { transform: scale(1.05); } .con .page5_2 .main .list .info { padding: 20px; } .con .page5_2 .main .list .info .time { font-size: 14px; color: #999; } .con .page5_2 .main .list .info .tit { color: #333333; font-weight: 600; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; height: 2.8em; margin-top: 10px; } .con .page5_2 .main .list .info .mes { font-weight: 400; text-align: left; color: #666666; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin-top: 18px; } .con .page5_2 .main .list .info .toPage { display: inline-block; padding: 12px 44px; border-radius: 50px; margin-top:40px; } .con .page5_2 .main .list:hover .tit { color: #D0121B; } @media only screen and (max-width: 1720px) { .con .page4_2 .con { max-width: calc(100% - 110px); } } @media only screen and (max-width: 768px) { .con .page4_2 .con { max-width: 90%; } .con .page1_2 { padding: 40px 0; } .con .page1_2 .num_box hr{ display: none; } .con .page1_2 .num_box > div{ flex: 0 0 100%; margin-bottom: 20px; } .con .nav_tit::after { margin-top: 10px; } .con .page1_2 .num_box { flex-wrap: wrap; margin-top: 20px; justify-content: space-between; } .con .page1_2 .num_box > div { flex: 0 0 40%; } .con .page1_2 .swiper_photo { margin-top: 20px; padding-bottom: 20px; } .con .page1_2 .num_box hr:nth-of-type(2) { display: none; } .con .page2_2 { padding: 40px 0 20px 0; } .con .nav_mes { margin-top: 20px; } .con .page2_2 .main { margin-top: 20px; flex-wrap: wrap; } .con .page2_2 .main .main_r, .con .page2_2 .main .main_l { flex: 0 0 100%; padding: 0; } .con .page2_2 .main .main_r { margin-top: 20px; } .con .page2_2 .main .main_r .list { flex: 0 0 100%; padding: 20px; margin-right: 0; } .con .page2_2 .main .main_r .list .image { flex: 0 0 40px; width: 40px; height: 40px; } .con .page2_2 .main .main_r .list .info { padding-left: 20px; } .con .page2_2 .main .main_r .list .info .mes { margin-top: 10px; } .con .page3_2 { padding: 40px 0 20px 0; } .con .page3_2 .main .main_l .mes{ margin-top: 20px; } .con .page3_2 .main { margin-top: 20px; flex-wrap: wrap; } .con .page3_2 .main > div { flex: 0 0 100% !important; padding: 0 !important; } .con .page3_2 .main .main_l hr { margin-top: 10px; } .con .page3_2 .main .main_r .list { flex: 0 0 100%; margin-right: 0; padding: 20px; } .con .page3_2 .main .main_r .list:nth-child(4) { flex-wrap: wrap; padding: 20px; } .con .page3_2 .main .main_r .list:nth-child(4) .image { height: 36px; text-align: left; } .con .page3_2 .main .main_r .list:nth-child(4) .info, .con .page3_2 .main .main_r .list .info { margin-top: 20px; } .con .page3_2 .main .main_r .list .info .mes { margin-top: 10px; } .con .page3_2 .main .main_r { margin-top: 20px; } .con .page4_2 { padding: 40px 0; } .con .page4_2 .con .mySwiper_page4 .swiper-slide .image { padding-top: 56%; } .con .page4_2 .con .mySwiper_page4 .swiper-slide .info { width: 100%; } .con .page4_2 .con .mySwiper_page4 .swiper-slide .image { border-radius: 20px; } .con .page4_2 .con .mySwiper_page4 .swiper-slide .info { border-radius: 20px; padding: 10px 20px; } .con .page4_2 .con .mySwiper_page4 .swiper-slide .info .tit { font-size: 14px; } .con .page5_2 { padding:40px 0 ; } .con .page5_2 .main { margin-top: 20px; flex-wrap: wrap; } .con .page5_2 .main .list .info { padding: 20px 20px 30px 20px; } .con .page5_2 .main .list .info .toPage { padding: 10px 20px; margin-top: 20px; } } @media only screen and (max-width: 1440px) { .con .page4 .main .main_l .list.on:before { width: 30px; height: 30px; } .con .page4 .nav_tit, .con .page4 .main .main_l .list { padding-left: 30px; } } @media only screen and (max-width: 768px) { .con .page1 { padding: 20px 0 40px 0; } .con .page1 .swiper_page1 .swiper-slide .image img{ width:auto; height: auto; max-width: 100%; max-height: 100%; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .con .nav_tit::after { margin-top: 10px; } .con .page1 .swiper_page1 { margin-top: 20px; padding-bottom: 20px; } .con .page2 { padding:0 0 40px 0; } .con .page2 .main { margin-top: 20px; flex-wrap: wrap; } .con .page2 .main .main_l { flex: 0 0 100%; } .con .page2 .main .main_l .list { padding: 20px; } .con .page2 .main .main_r { flex: 0 0 100%; margin-top: 40px; } .con .page3 { padding: 40px 0; } .con .page3 .nav_mes { margin-top: 20px; } .con .page3 .main { margin-top: 20px; } .con .page4 .w1440 { padding: 40px 0; border: none; } .con .page4 .main { flex-wrap: wrap; margin-top: 20px; } .con .page4 .main .main_l .list.on:before { width: 16px; height: 16px; } .con .page4 .main .main_l .list{ margin-bottom:10px; } .con .page4 .main .main_r .list .tit, .con .page4 .nav_tit, .con .page4 .main .main_l .list { padding-left: 20px; } .con .page4 .main .main_r .list .tit::after { margin-top: 10px; } .con .page4 .main .main_r .list .mes { margin-top: 20px; } .con .page4 .main .main_l .list.on:before { border-width: 4px; } .con .page4 .main .main_r, .con .page4 .main .main_l { flex: 0 0 100%; } .con .page4 .main .main_r { margin-top: 40px; } .con .pc { display: none; } .con .mo { display: block; } }