.content1{ padding-bottom: 0; } .newsList{ position: relative; margin-top: 30px; margin-bottom: 90px; .newsSwiper{ padding-bottom: 40px; padding-left: 15px; padding-right: 15px; margin-left: -15px; margin-right: -15px; } .listItem{ position: relative; width: 33%; background: #FFFFFF; box-shadow: 0 5px 15px 0 rgba(0,0,0,0.05); .picBox{ position: relative; overflow: hidden; .pic{ width: 100%; display: block; } .mask{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0.5; background-image: linear-gradient(180deg, rgba(230,0,18,0.30) 0%, rgba(230,0,18,0.00) 100%); } } .infoBox{ padding: 25px 30px; .title{ font-weight: bold; font-size: 18px; color: #333436; line-height: 26px; min-height: 52px; } .bar{ height: 1px; background: #EAECEE; margin-top: 20px; } .timeBox{ display: flex; align-items: center; justify-content: space-between; margin-top: 16px; .time{ font-weight: 300; font-size: 13px; color: #8A8D92; line-height: 20px; } .arrow{ width: 20px; height: 20px; margin-right: -7px; } } } } .swiper-button-next{ right: 0; width: 40px; height: 120px; background: url(../images/r.png); background-size: 100%; margin-top: -90px; } .swiper-button-prev{ left: 0; width: 40px; height: 120px; background: url(../images/l.png); background-size: 100%; margin-top: -90px; } } .imageList{ .listItem{ .pic{ width: 100%; } .infoBox{ position: absolute; bottom: 66px; left: 0; width: 100%; .t1{ font-weight: bold; font-size: 30px; color: #FFFFFF; text-align: center; line-height: 40px; } .t2{ font-weight: 300; font-size: 16px; color: #FFFFFF; text-align: center; line-height: 30px; margin-top: 10px; } .button{ justify-content: center; margin-top: 10px; .txt{ font-weight: bold; font-size: 15px; color: #fff; line-height: 32px; } } } } .swiper-pagination{ bottom: 30px; } } @media (max-width: 767px) { .content1{ .newsList{ margin-top: 15px; margin-bottom: 50px; .listItem{ width: 100%; .infoBox{ padding: 20px 25px; .title{ min-height: auto; font-size: 15px; line-height: 22px; } .bar{ margin-top: 15px; } .timeBox{ margin-top: 12px; } .time{ font-size: 12px; line-height: 18px; } } } } } .imageList{ .listItem{ display: flex; justify-content: center; overflow: hidden; .pic{ width: auto; height: 660px; } .infoBox{ padding: 0 20px; .t1{ font-size: 22px; line-height: 32px; } .t2{ font-size: 14px; line-height: 22px; } } } } } .content2{ position: relative; .listBox{ position: relative; display: flex; justify-content: space-between; margin-top: 30px; .listItem{ position: relative; width: 18.5%; background: #FFFFFF; box-shadow: 0 5px 30px 0 rgba(0,0,0,0.05); .picBox{ position: relative; width: 100%; .pic{ width: 100%; display: block; } .black{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #000; opacity: 0.5; } .icon{ position: absolute; width: 88px; height: 88px; left: 50%; top: 50%; margin-left: -44px; margin-top: -44px; } } .infoBox{ padding-top: 55px; padding-left: 15px; padding-right: 15px; padding-bottom: 60px; .title{ font-weight: bold; font-size: 20px; color: #222325; text-align: center; line-height: 32px; } .bar{ width: 12px; height: 3px; background: #E60012; margin: 15px auto; } .text{ font-size: 15px; color: #727476; text-align: center; line-height: 24px; padding: 0 16px; } } } } } @media (max-width: 991px) { .content2{ .listBox{ flex-wrap: wrap; .listItem{ width: 48.5%; margin-bottom: 20px; } } } } @media (max-width: 767px) { .content2{ .listBox{ flex-wrap: wrap; .listItem{ width: 48.5%; margin-bottom: 10px; .picBox{ .icon{ width: 66px; height: 66px; margin-left: -33px; margin-top: -33px; } } .infoBox{ padding: 30px 12px; .title{ font-size: 15px; line-height: 22px; } .bar{ height: 2px; margin: 12px auto; } .text{ padding: 0 13px; font-size: 13px; line-height: 20px; } } } } } } .content3{ position: relative; padding-top: 278px; padding-bottom: 278px; overflow: hidden; .mask{ position: absolute; left: 0; top: 0; width: 100%; height: 200px; background-image: linear-gradient(180deg, #F1F3F5 0%, #FFFFFF 100%); } .logoBox{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; .pic{ position: absolute; width: 14%; // height: 200px; left: 0; top: 0; margin-left: -100px; margin-top: -100px; } .f{ left: 10%; top: 30%; } .e{ left: 26%; top: 67%; } .s{ left: 96%; top: 47%; } .c{ left: 64%; top: 27%; } .o{ left: 78%; top: 87%; } &.move{ .f{ left: 22%; top: 47%; } .e{ left: 36%; top: 47%; } .s{ left: 50%; top: 47%; } .c{ left: 64%; top: 47%; } .o{ left: 78%; top: 47%; } } } .bg{ width: 100%; } .infoBox{ position: relative; width: 100%; .title{ position: relative; font-weight: bold; font-size: 32px; color: #333436; text-align: center; line-height: 44px; } .text{ font-weight: 300; font-size: 18px; color: #333436; text-align: center; line-height: 30px; margin-top: 10px; } .icon{ width: 16px; height: 16px; display: block; margin: 30px auto; } } } @media (max-width: 767px) { .content3{ padding-top: 50px; padding-bottom: 50px; .logoBox{ .pic{ width: 20%; margin-left: -50px; margin-top: -50px; } } .infoBox{ width: 100%; padding: 0 30px; .title{ font-size: 26px; line-height: 44px; } .text{ font-size: 14px; line-height: 26px; } } } } .videoContainer{ position: relative; .pic{ width: 100%; display: block; } .play{ position: absolute; width: 80px; height: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; display: block; } } @media (max-width: 767px) { .videoContainer{ .play{ width: 50px; height: 50px; margin-left: -25px; margin-top: -25px; } } }