h3.title { font-size: 34px; font-family: Microsoft YaHei; font-weight: 400; color: #333333; position: relative; margin-top: 60px; margin-bottom: 30px; line-height: 1; } h3.title::after { content: ""; display: block; width: 50px; height: 4px; background: #f08200; border-radius: 2px; margin-top: 20px; } .container-box { background-color: #fafafa; padding-bottom: 60px; overflow: hidden; } .team .desc { font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #666666; margin-bottom: 12px; line-height: 1; } .team-list { display: flex; justify-content: space-between; margin-top: 40px; } .team-list .team-item { width: calc(100% / 6 - 100px / 6); height: 140px; position: relative; /* background-color: rgba(0, 0, 0, 0.3); */ text-align: center; line-height: 140px; } .team-title { font-size: 18px; font-weight: bold; color: #ffffff; z-index: 1; position: relative; } .team-item img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; } .information-box { padding: 40px 40px 30px; background-color: #fff; max-height: 600px; } .information-box .information-title { display: flex; justify-content: space-between; align-items: center; border-bottom: solid 1px rgba(0, 0, 0, 0.1); padding-bottom: 22px; margin-bottom: 33px; } .information-box .information-title .left-title { position: relative; font-size: 20px; font-family: Microsoft YaHei; font-weight: bold; color: #333; } .information-box .information-title .left-title::after { content: ""; display: block; position: absolute; width: 80px; height: 3px; background: #f08200; bottom: -24px; } .information-box .more-information { display: flex; align-items: center; color: #f08200; cursor: pointer; line-height: 1; } .information-box .more-information img { margin-left: 12px; } .information-box .layui-tab .layui-tab-bar { display: none; } .information-box .layui-tab .layui-tab-title { display: flex; border: none; overflow-x: auto; } .information-box .layui-tab .layui-tab-title li { padding: 0; font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #666; white-space: nowrap; width: auto; height: 38px; border: 1px solid rgba(153, 153, 153, 0.5); border-radius: 19px; line-height: 36px; padding: 0 23px; margin-right: 22px; min-width: auto; } .information-box .layui-tab-title .layui-this:after { display: none; } .information-box .layui-tab .layui-tab-title .layui-this { color: #f08200; border-color: #f08200; } .information-box .layui-tab-content { padding: 0; margin-top: 33px; } .news-box { display: none; justify-content: space-between; } .news-box.active { display: flex; } .news-list { width: calc(50% - 30px); overflow: hidden; max-height: 400px; } .news-list li { width: 100%; display: flex; margin-bottom: 30px; } .news-list .first { padding: 10px; background-color: #f7f7f7; margin-top: 0; } .news-list .first img { margin-right: 17px; width: 150px; height: 94px; } .news-list .first .right { flex: 1; } .news-list .first .title { font-size: 17px; line-height: 30px; font-family: Microsoft YaHei; font-weight: bold; color: #333333; margin-bottom: 13px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .news-list li.news-item:first-child { margin-top: 8px; } .news-list li.news-item { justify-content: space-between; } .news-list li.news-item .title { font-size: 16px; line-height: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #666666; display: flex; align-items: center; width: calc(100% - 80px); } .news-list li.news-item .title span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: calc(100% - 20px); } .news-list li.news-item .title::before { content: ""; display: inline-block; width: 6px; height: 6px; background: #cccccc; margin-right: 10px; vertical-align: middle; } .news-list li .date { font-size: 15px; font-family: Microsoft YaHei; font-weight: 400; color: #999999; line-height: 1; } .yanjiuSwiper { position: relative; padding-bottom: 30px; margin-bottom: 30px; } .yanjiuSwiper .swiper-wrapper .swiper-slide{ width: 236px; height: 160px; border-radius: 10px; overflow: hidden; background: #f08200; } .yanjiuSwiper .swiper-wrapper .swiper-slide a{ display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 20px; } .yanjiuSwiper .swiper-wrapper .swiper-slide a .tit{ font-size: 20px; line-height: 1.75; font-weight: bold; color: #fff; } .yanjiuSwiper .swiper-wrapper .swiper-slide a span{ display: block; width: 19px; height: 2px; margin: 8px 0 9px; background: #fff; } .yanjiuSwiper .swiper-wrapper .swiper-slide a p{ font-size: 14px; line-height: 1.75; color: #fff; } .yanjiuSwiper .swiper-pagination{ font-size: 0; bottom: 0; } .yanjiuSwiper .swiper-pagination span{ opacity: 1; width: 10px; height: 10px; margin: 0 10px; border-radius: 50%; background: rgba(0,0,0,.2); } .yanjiuSwiper .swiper-pagination .swiper-pagination-bullet-active{ background: rgba(230,140,0,1); } .yanjiuMob{ display: none; } @media (max-width: 1024px) { .information-box { max-height: none; } .news-box { flex-direction: column; } .news-list { width: 100%; max-height: none; } .news-list li:last-child { margin-bottom: 20px; } } @media (max-width: 768px) { h3.title { font-size: 20px; font-weight: bold; margin-top: 50px; } .team-title{ font-size: 14px; } .team .desc { font-size: 14px; line-height: 22px; } .team-list { flex-wrap: wrap; } .team-list .team-item { width: calc(100% / 3 - 40px / 3); margin-bottom: 20px; height: 100px; line-height: 100px; } .information-box { padding: 20px; } .information-box .information-title { margin-bottom: 20px; padding-bottom: 15px; } .information-box .information-title .left-title::after { bottom: -17px; } .information-box .information-title .left-title { font-size: 16px; } .information-box .more-information { font-size: 14px; } .layui-tab[overflow] > .layui-tab-title { overflow: auto; height: auto; } .layui-tab .layui-tab-title { white-space: wrap; } .information-box .layui-tab .layui-tab-title li { font-size: 14px; padding: 0 15px; height: 30px; line-height: 28px; margin-right: 10px; } .information-box .layui-tab-content { margin-top: 20px; } .news-list .first img { width: 100px; height: 80px; } .news-list .first .title { font-size: 14px; line-height: 24px; } .news-list li .date, .news-list li.news-item .title { font-size: 14px; } .news-list li{ margin-bottom: 20px; } .news-list:nth-child(2) li.news-item:first-child{ margin-top: 0; } } @media (max-width: 750px) { .yanjiuSwiper{ display: none ; } .yanjiuMob{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; margin-bottom: 30px; } .yanjiuMob .list{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; background: #f08200; border-radius: 10px; overflow: hidden; } .yanjiuMob .list .tit{ font-size: 20px; line-height: 1.75; font-weight: bold; color: #fff; } .yanjiuMob .list span{ display: block; width: 19px; height: 2px; margin: 8px 0 9px; background: #fff; } .yanjiuMob .list p{ text-align: center; font-size: 14px; line-height: 1.75; color: #fff; } }