.slide-top-banner { width: 100%; max-height: 40rem; overflow: hidden; } .slide-top-banner img { margin: 0 auto; } .main-container { max-width: 90rem; margin: 1.5rem auto; display: flex; flex-direction: column; } .main-container .column-group { display: flex; margin-bottom: 2.625rem; align-items: flex-start; } .column-group.column-group-plate { /* margin-left: -1.875rem; */ } .column-group .column-plate { width: 33.33%; } .column-plate.column-plate--base { padding-right: 1.875rem; } .column-plate.column-plate--culture { padding-right: 1.875rem; } .column-plate.column-plate--media { align-self: stretch; display: flex; flex-direction: column; } .cross-line { } .cross-line span { display: inline-block; width: 4.125rem; height: 0.125rem; background: #ffcbca; margin: 1.375rem 0; } .column-content img { height: 6.5rem; float: left; clear: both; margin: 0 1.125rem 0 0; } .column-article { display: flex; align-items: center; flex-wrap: wrap; } .column-article .column-article-title { color: #515151; flex: 1; line-height: 1.8; padding: 0.1875rem 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .column-article .column-article-title::before { content: ''; display: inline-block; background-image: ; width: 9px; height: 10px; margin-right: 3px; } .column-content__base > ul li:first-child { display: block; height: 6.5rem; overflow: hidden; } .column-content__base > ul li:first-child .column-article { height: 2.5rem; align-items: flex-start; } .column-content__base > ul li:first-child .column-article-title::before { display: none; } .column-content__culture > ul li:first-child .column-article-title::before { display: none; } .column-content__base > ul li:first-child .column-article-title { color: #333333; font-weight: bold; line-height: 1.15; padding: 0; } .column-content__culture > ul li:first-child { display: block; height: 6.5rem; overflow: hidden; } .column-content__culture > ul li:first-child .column-article { height: 2.5rem; align-items: flex-start; } .column-content__culture > ul li:first-child .column-article-title { color: #333333; font-weight: bold; line-height: 1.15; padding: 0; } .column-content__base > ul li:nth-child(2) { padding-top: 1.25rem; } .column-content__base > ul li:nth-child(2) .column-article-title { color: #333333; } .column-content__culture > ul li:nth-child(2) { padding-top: 1.25rem; } .column-content__culture > ul li:nth-child(2) .column-article-title { color: #333333; } .column-article .column-article-content { display: none; } .column-content__base > ul li:first-child .column-article-content { display: block; line-height: 1.375rem; } .column-content__culture > ul li:first-child .column-article-content { display: block; line-height: 1.375rem; } .column-article .column-article-date { line-height: 1.8; color: #999999; } .column-content__media { flex: 1; display: flex; flex-direction: column; } .column-content__media .media-img-wrapper { flex: 1; display: flex; justify-content: center; } .column-content__media img { max-height: 12.5rem; /* width: 100%; */ } .column-content__media .column-article-title { /* display: block; */ text-align: center; line-height: 1.5rem; font-weight: bold; color: #333333; padding: 0.375rem; padding-bottom: 0; /* overflow: hidden; text-overflow: ellipsis; white-space: nowrap; */ display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; } .column-content__media .column-article-abs { display: flex; align-items: center; justify-content: center; padding: 0.25rem; } .column-content__media .column-article-abs > span { color: #333333; line-height: 1.5rem; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; } .column-content__media .column-article-abs > a { color: #bf2725; line-height: 1.5rem; white-space: nowrap; } .mid-banner .mid-banner-imgs { position: relative; margin-top: 2rem; } .mid-banner-imgs > table { width: 100%; } .mid-banner img.show-on-mobile { display: none; } .mid-banner img { height: 100%; border-color: transparent; } .mid-banner .mid-banner__link { position: absolute; right: 5rem; top: 50%; transform: translatey(-50%); border: 1px solid #999999; border-radius: 10px; padding: 1rem 2.125rem; } .mid-banner .mid-banner__link a { color: #666666; } .column-books { margin-top: 2.75rem; } .column-books .header-container { width: 100%; } .books-content { padding: 2rem 0; } .books-content > ul { display: flex; } .books-content > ul > li { flex: 0 0 20%; } .books-content .book-item { padding: 1.125rem; } .books-content .book-item:hover { box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); cursor: pointer; } /* .book-item .book-img__wrap { display: flex; justify-content: center; } */ .books-content .book-item img { display: block; height: 15rem; margin: 0 auto 1.75rem auto; transition: transform 0.4s ease-in; } .books-content .book-item .book-title { height: 3rem; overflow: hidden; } .books-content .book-item .book-title > a { line-height: 1.5rem; color: #333333; } .books-content .book-item .book-author { color: #999999; } .books-content .book-item .book-author span { line-height: 2rem; } footer.index-footer { position: relative; } aside.report-stick--right { position: absolute; right: 0; top: -100%; transform: translatey(-100%); width: 12.5rem; } /* 轮播图分页圆形按钮样式 */ .slide-dot { height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.7s ease-in; } /* .slide-banner-img { width: 400px; height: 240px; } */ /* 轮播图的样式重新放到最后 */ .column-group .slide-banner { float: left; max-width: calc(100% - 27.5rem); overflow: hidden; } .slide-banner .slide-imgs { position: relative; min-height: 32.5rem; } .column-group .slide-banner img { display: block; width: 100%; height: 32.5rem; margin: 0 auto; } .slide-banner .slide-panel { position: absolute; width: 100%; height: 8.125rem; background: #000000; z-index: 9; opacity: 0.3; left: 0; bottom: 0; } .slide-banner .slide-panel > p { display: block; color: #fff; font-weight: bold; font-size: 1.875rem; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .column-group .column-news { width: 27.5rem; height: 32.6rem; background: #f9f9f9; padding: 2.25rem 1.625rem 0 2rem; margin-left: auto; } .header-container { display: flex; align-items: center; } .header-container .column-title { margin-left: 2rem; font-size: 1.5rem; color: #666666; cursor: pointer; } .header-container .column-title.selected { font-size: 1.875rem; color: #333333; font-weight: bold; } .column-news-content ul { display: none; animation-name: fade; animation-duration: 0.6s; } @keyframes fade { from { opacity: 0.2; } to { opacity: 1; } } .column-news-content ul.on-view { display: block; } .header-container .column-main-title { font-size: 1.875rem; color: #333333; font-weight: bold; } .header-container .column-sub-title { margin-left: 2rem; font-size: 1.5rem; color: #666666; } .header-container .column-more-info { float: right; margin-left: auto; color: #999999; } .column-news .header-container .column-more-info { display: none; } .column-news .header-container .column-more-info.selected { display: inline-block; } .column-news .column-news-content { margin-top: 1.25rem; } .column-news-content > ul { } .column-news-content > ul > li { padding: 1.125rem 0; border-bottom: 0.0625rem solid #d8d8d8; display: flex; align-items: center; } .column-news-content > ul > li > a { line-height: 1.5rem; color: #333333; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .column-news-content > ul > li:first-child::before { content: ''; display: inline-block; width: 2.375rem; height: 1.25rem; margin-right: 0.5rem; background: no-repeat; background-size: 2.375rem 1.25rem; } .column-news-content > ul > li:hover a { font-weight: bold; } .column-news-content > ul > li:nth-child(2)::before { content: ''; display: inline-block; width: 2.375rem; height: 1.25rem; margin-right: 0.5rem; background: no-repeat; background-size: 2.375rem 1.25rem; } .column-news-content > ul > li:nth-child(3)::before { content: ''; display: inline-block; width: 2.375rem; height: 1.25rem; margin-right: 0.5rem; background: no-repeat; background-size: 2.375rem 1.25rem; } .column-news-content > ul > li:nth-child(4)::before { content: ''; display: inline-block; width: 2.375rem; height: 1.25rem; margin-right: 0.5rem; background: no-repeat; background-size: 2.375rem 1.25rem; } .column-news-content > ul > li:last-child { border: none; } .dots-container { position: absolute; bottom: 1rem; left: 50%; transform: translate(-50%); z-index: 11; } .dots-container li { display: inline-block; } .slide-dot { height: 15px; width: 15px; margin: 0 6px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.5s ease-in; } .slick-active .slide-dot { background-color: #ffcbca; } .slide { position: absolute; top: 50%; margin-top: -22px; padding: 10px; cursor: pointer; color: #fff; } .slide { font-size: 2em; } .slide.slide--pre { left: 0; } .slide.slide--next { right: 0; } .slide:hover { background: #000; opacity: 0.2; } /* 文字轮播效果 */ .text-carousel { width: 100%; white-space: nowrap; overflow: hidden; margin-top: 1.5rem; } .carousel-words { position: relative; width: fit-content; animation: move 20s linear infinite; padding-left: 50px; font-size: 13px; color: #333; line-height: 2; vertical-align: middle; } .carousel-words:hover { color: #bf2725; } .carousel-words a { font: inherit; color: inherit; } .carousel-words::before { content: ''; display: inline-block; background-image: ; width: 18px; height: 16px; margin-right: 6px; margin-top: -3px; vertical-align: middle; } .carousel-words::after { position: absolute; right: -100%; content: attr(text); } @keyframes move { 0% { transform: translatex(100%); } 100% { transform: translatex(-100%); } } .book-item img:hover { transform: translate(20%, -20%) scale(2); z-index: 20; }