body,html { background-color:#fff; cursor:default; } .banner-img { background:url("../../uploads/news/banner.png") no-repeat center; background-size:120rem 27.5rem; -webkit-background-size:120rem 27.5rem; -o-background-size:120rem 27.5rem; } .banner-img > img { position:absolute; z-index:1; width:100%; height:15rem; } .news-swiper { padding:3.75rem 0 0 0; } .news-header { text-align:center; } .news-header > h1 { font-size:1.875rem; font-weight:400; color:rgba(9,15,33,1); line-height:2.625rem; } .news-header > h2 { margin-top:0.5rem; font-size:0.875rem; font-weight:400; color:rgba(9,15,33,.2); line-height:1.25rem; letter-spacing:0.625rem; text-indent:0.625rem; } .news-swiper-box { position:relative; width:75rem; margin:2.5rem auto 3.75rem; } .news-description-box { box-sizing:border-box; position:absolute; top:0; left:0; width:43.75rem; height:16.0625rem; background:rgba(255,255,255,1); box-shadow:0 0.25rem 0.875rem 0 rgba(12,37,91,0.1); padding:2.5rem 0 0 3.75rem; z-index:1; color:rgba(51,51,51,1); font-weight:400; overflow:hidden; } .swiper-button-right { position:absolute; top:5.625rem; left:40.625rem; display:inline-block; width:3.125rem; height:3.125rem; z-index:99; } .swiper-button-left { position:absolute; top:5.625rem; left:-2.8125rem; display:inline-block; width:3.125rem; height:3.125rem; z-index:99; } .news-description-box h1 { font-size:1.125rem; font-weight:500; color:rgba(9,15,33,1); line-height:1.5625rem; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; width:36.25rem; } .news-description-box p { margin-top:0.875rem; width:36.25rem; font-size:0.875rem; font-weight:400; color:rgba(9,15,33,1); line-height:1.625rem; } .news-description-box .content { height:3.625rem; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .see-more p { margin-top:0; width:4rem; } .see-more { margin-left:26.625rem; } .news-description-box .news-date { margin-top:0.625rem; font-size:0.875rem; font-weight:400; color:rgba(9,15,33,1); line-height:1.25rem; opacity:.5; } .news-description-box .news-detail { display:flex; align-items:center; box-sizing:border-box; padding:0.5625rem 0 0.5625rem 1.5rem; margin:0 26.25rem; font-size:1rem; color:rgba(9,15,33,1); line-height:1.375rem; width:9.625rem; height:2.5rem; border:1px solid rgba(9,15,33,1); } .news-img-box { position:relative; top:3.75rem; left:29.6875rem; width:43.75rem; height:16.0625rem; background-color:black; z-index:0; } .news-img-box > img { width:100%; height:100%; } .news-wrap { width:75rem; margin:auto; padding-top:5rem; } .news-filter { display:flex; align-content:center; flex-wrap:wrap; font-weight:400; text-align:center; margin-top:1.625rem; } .news-filter a { display:inline-block; text-align:left; width:9.0625rem; margin-top:0.875rem; height:1.25rem; font-size:0.875rem; font-weight:400; color:rgba(9,15,33,.5); line-height:1.25rem; } .news-filter a:hover { color:rgba(51,51,51,1); cursor:pointer; } .news-filter .filter-current { color:rgba(51,51,51,1); font-weight:500; } /*.news-filter a:first-child { */ /* color:rgba(51,51,51,1); */ /* font-weight:500; */ /* } */ .news-underline { margin:1.25rem auto; width:75rem; height:0.0625rem; background:rgba(223,226,228,1); } @media (min-width:1920px) { .news-content-box{ width: 76rem!important; } } .news-content-box { width:75rem; margin-top:0.625rem; display:flex; align-content:space-between; justify-content:flex-start; align-items:center; flex-wrap:wrap; } .news-content-box a { width:25rem; height:22.5rem; margin:1.25rem 0; } .news-item { position:relative; display:flex; flex-direction:column; align-items:center; /*margin:1.25rem 0; */ width:23.75rem; height:22.5rem; background:rgba(255,255,255,1); box-shadow:0 0.25rem 0.875rem 0 rgba(185,185,185,0.1); transition:all .2s; } .news-content-box a:nth-child(6n-1) .news-item { margin-right:0; } .news-item > .item-img { width:23.75rem; height:10rem; transition:all 0.2s; } .news-item > .item-img > img { width:100%; height:100%; transition:all 0.2s; } .news-item > .item-content > h1 { width:20rem; margin-top:1.5rem; font-weight:500; font-size:1rem; color:rgba(9,15,33,1); line-height:1.875rem; } .news-item > .item-content > p { margin-top:0.625rem; width:20rem; font-weight:400; word-break:break-all; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; font-size:0.875rem; color:rgba(9,15,33,.5); line-height:1.625rem; } .news-item > .news-date { box-sizing:border-box; position:absolute; top:-0.375rem; left:0; padding:0.75rem 1.25rem 0.375rem 0.9375rem; visibility:hidden; width:6rem; height:2.875rem; font-size:1.25rem; font-weight:400; background:url("../../uploads/news/news-time.svg"); background-size: 100% 100%; color:rgba(255,255,255,1); line-height:1.75rem; opacity:0; transition:all .2s; } .news-item:hover { margin:-1.5625rem 1.25rem -1.5625rem -0.625rem; width:25rem; height:25.625rem; background:rgba(255,255,255,1); box-shadow:0 0.375rem 1.25rem 0 rgba(129,225,237,0.3); transition:all .2s; } .news-item:hover .news-date { visibility:visible; opacity:1; transition:all .2s; } .news-content-box a:nth-child(6n-1) .news-item { margin-right:-1.875rem; } /*.news-item:nth-child(6n):hover { */ /* margin:-1.5625rem -0.625rem -1.5625rem 0.3125rem; */ /* } */ /*.news-item:nth-child(6n+1):hover { */ /* margin:-1.5625rem -0.625rem -1.5625rem -0.625rem; */ /* } */ .news-item:hover .item-img { width:25rem; height:10.5rem; transition:all .2s; } .news-item:hover > .item-content > p { word-break:break-all; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; } .activity-content { position:relative; width:75rem; margin:0 auto; z-index:1; } .industry-box { margin-top:3.625rem; width:75rem; height:23.125rem; background:rgba(255,255,255); box-shadow:0rem 0.375rem 1.25rem rgba(10,44,115,0.1); border-radius:1.25rem; /* justify-content:space-between; align-items:flex-start; */ } .industry-box-content { height:23.125rem; display:flex; flex-direction:column; justify-content:center; margin-left:5.0625rem; } .see-more { margin:2.125rem 0 0; } .industry-title { width:24.5rem; font-size:1.375rem; line-height:2.3125rem; } .industry-p { width:24.5625rem; /* height:4.5rem; */ margin-top:1.9375rem; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; } .industry-box img { display:block; width:42.5rem; height:18.125rem; margin:0; border-radius:0 1.25rem 0 0; } .img-content-bottom { width:42.5rem; height:5rem; background:#F5F7FA; border-radius:0rem 0rem 1.25rem 0rem; } .industry-flex { display:flex; justify-content:space-between; } .industry-box .swiper-container-horizontal > .swiper-pagination-bullets { bottom:2.25rem; right:3.1875rem; width:auto; text-align:right; /* left:0; */ /* width:100%; */ } /* 鍒嗛〉 */ .pagination { text-align:center; margin-top:3.75rem; margin-bottom:1.25rem; width:100%; line-height:1.5625rem; } .pagination ul { display:flex; justify-content:center; align-items:center; } .pagination li { margin:0 0.625rem; border:0px solid #e6e6e6; border-radius:50%; display:inline-block; font-size:0.75rem; width:1.5rem; height:1.5rem; } .pagination li a { display: block; width: 1.5rem; height: 1.5rem; /* padding:0.25rem 8.3rem; */ color:#000; } .pagination li span { /*padding:0.25rem 8.3rem; */ width:1.5rem; height:1.5rem; text-align:center; } /* .pagination li:nth-child(-n+2),.pagination li:nth-last-child(-n+2) { transform:scale(1); } */ .pagination li:nth-child(1) { color:#fff; background:url(../img/turnpage-left-first.svg) no-repeat; background-position:center center; background-size:0.75rem 0.6875rem; } .pagination li:nth-child(2) { color:#fff; background:url(../img/turnpage-left-prev.svg) no-repeat; background-position:center center; background-size:0.4375rem 0.6875rem; } .pagination li:nth-last-child(1) { color:#fff; background:url(../img/turnpage-right-last.svg) no-repeat; background-position:center center; background-size:0.75rem 0.6875rem; } .pagination li:nth-last-child(2) { color:#fff; background:url(../img/turnpage-right-next.svg) no-repeat; background-position:center center; background-size:0.4375rem 0.6875rem; } .pagination .active { background:rgba(77,183,221,0.2); color:rgba(77,183,221,1); } .pagination .disabled { color: #aaa; opacity: 0.5; } .pagination ul li a:hover { border-radius:50%; } .page-wrap { margin:3.125rem auto; color:#0d1d3a; font-size:0.875rem; } .ui-paging-container { color:#666; font-size:0.75rem; } .ui-paging-container li { display:inline-block; padding:0.5rem 0.6875rem; margin:0 0.3125rem; color:#0d1d3a; cursor:pointer; font-size:0.875rem; } .ui-paging-container li.focus,.ui-paging-container li.ui-pager:hover { background-color:#288df0; color:#FFF; } .ui-paging-container li.ui-pager-disabled,.ui-paging-container li.ui-pager-disabled:hover { background:none; cursor:default; color:#ddd } .ui-paging-container .page-total { color:#666; float:right; }