.bannerbox { position: relative; } .bannerbox::before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 0; padding-bottom: 22.76%; background: url(../images/bannerleft.png) no-repeat left; background-size: 100% 100%; } .banner { margin-left: 60px; } .banner a { display: block; position: relative; } .bannerPic { padding-bottom: 37.85%; } .bannertxt { position: absolute; left: -60px; bottom: 0; padding-bottom: 33px; box-sizing: border-box; width: calc(100% + 60px); } .bannertxt::before { content: ''; display: block; width: calc(100% - 60px); height: 0; position: absolute; left: 60px; bottom: 0; z-index: 50; padding-bottom: calc(153% / 19.2); background: rgba(0, 0, 0, .7); background: -o-linear-gradient(top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); background: -moz-linear-gradient(top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); } .bannertxt h2 { font-weight: normal; font-size: 3rem; position: relative; z-index: 100; /* padding-left: 60px; */ box-sizing: border-box; } .banner .slick-dots { left: 100px; width: 16px; bottom: auto; top: 50%; transform: translateY(-50%); } .banner .slick-dots li { width: 16px; height: 12px; margin: 10px 0; } .banner .slick-dots li button { background: none; border-radius: 0; background: url(../images/dot.png) no-repeat; background-size: 100% 100%; position: absolute; left: 0; bottom: 0; } .banner .slick-dots li.slick-active button { background: url(../images/dota.png) no-repeat; } .banner .slick-arrow { margin: 0; width: 66px; height: 66px; } .banner .slick-prev { background: #93171f url(../images/l.png) center no-repeat; left: calc(100% - 66px); top: calc(50% - 79px); } .banner .slick-next { background: #93171f url(../images/r.png) center no-repeat; right: 0; top: calc(50% + 13px); } .line { position: absolute; right: 0; top: calc(50% - 13px); width: 66px; height: 26px; z-index: 50; background: #93171f; } .line::before { content: ''; display: block; width: 1px; height: calc(100% - 2px); background: rgba(255, 255, 255, .3); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* mode1 */ .mode1 { position: relative; /* overflow: hidden; */ padding-top: 40px; box-sizing: border-box; } .mode1::before { content: ''; display: block; width: 100%; height: calc(100% - 147px); background: url(../images/mode2bg.png) no-repeat; background-size: cover; position: absolute; left: 0; top: 0; } .title { position: relative; z-index: 10; padding: 25px 0; box-sizing: border-box; overflow: hidden; }.mode3 .title:nth-child(2) i{ margin-left: 25px; } i{ content: ''; display: block; width: 39px; height: 31px; overflow: hidden; /* background: url(../images/tit.png) no-repeat; */ background-size: 100% 100% !important; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .title h2 { color: #222 !important; position: relative; /* line-height: 40px; */ padding-left: 55px; box-sizing: border-box; font-weight: normal; display: inline-block; vertical-align: middle; } .title h2::before { content: ''; display: block; width: 39px; height: 31px; overflow: hidden; /* background: url(../images/tit.png) no-repeat; */ /* background-size: 100% 100% !important; */ position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .title span { display: inline-block; vertical-align: bottom; } .title span a { font-size: 2.2rem; position: relative; /* line-height: 40px; */ margin-left: 15px; text-transform: uppercase; color: #999; display: inline-block; position: relative; font-family: "DidotLTStd-Bold"; } .more { display: inline-block; width: 80px; height: 46px; /* margin-top: 18px; */ line-height: 46px; color: #999; border-radius: 46px; margin-right: 6px; position: relative; text-align: center; z-index: 10; /* background: rgba(0, 0, 0, .1); */ box-shadow: 0px 0px 16px rgba(0, 0, 0, .08); } .more::before { content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: #93171f; position: absolute; right: -2px; top: calc(50% - 2px); } .more:hover{ transform:scale(1.06); transition: all 0.2s ease-in-out; background-color: #93171f; color: #fff; } .mode1Ul { /* overflow: hidden; */ margin: 0 -20px; position: relative; z-index: 10; } .mode1Ul li { transition: all .3s ease-in-out; margin-bottom: 40px; } .mode1Ul li:hover { transform: translateX(5px); } .mode1Ul li:hover .mode1txt { color: #93171f; font-weight: 700; } .mode1Ul a { display: block; margin: 0 20px; /* padding-bottom: 10px; */ background: #fff; box-shadow: 20px 15px 55px rgba(0, 0, 0, .1); } .mode1Pic { padding-bottom: 66.6%; } .mode1Infor { padding: 20px 35px 40px; box-sizing: border-box; } .mode1Infor .mode1txt { line-height: 28px; color: #222; margin-bottom: 20px; } .dateout { text-align: left; position: relative; } .dateout::before { content: ''; display: block; width: 44px; height: 1px; background: #e5e5e5; position: absolute; right: 0; top: 50%; } .date { line-height: 54px; color: #999; text-align: left; padding-left: 66px; box-sizing: border-box; display: inline-block; position: relative; } .date::before { content: ''; display: block; width: 54px; height: 54px; background: url(../images/datea.png) no-repeat; position: absolute; left: 0; right: 0; } /* mode2 */ .mode2 { padding-top: 0; box-sizing: border-box; /* overflow: hidden; */ } .mode2ul { margin: 0 -0.5px; } .mode2ul a { display: block; margin: 0 0.5px; padding: 18px 36px 56px; box-sizing: border-box; background: #fff; box-shadow: 20px 15px 55px rgba(0, 0, 0, .1); transition: all .3s ease-in-out; } .mode2ul li:hover a { transform: translateX(5px); } .mode2ul li:hover .mode2info { color: #93171f; font-weight: 700; } .mode2top { padding-bottom: 20px; box-sizing: border-box; margin-bottom: 30px; border-bottom: 1px solid rgba(0, 0, 0, .06); }.mode2bot{overflow:hidden} .mode2info { line-height: 28px; min-height: 56px; color: #222; font-weight: normal; } .date2 { display: inline-block; background: rgba(147, 23, 31, .1); width: 78px; height: 78px; padding: 10px 0; box-sizing: border-box; text-align: center; } .date2 span:nth-child(1) { color: #757575; line-height: 28px; } .date2 h2 { color: #93171f; font-size: 28px; line-height: 28px; font-weight: normal; } .date2Infor { margin-left: 100px; line-height: 24px; color: #999; -webkit-line-clamp: 3; } /* mode3 */ .mode3 { padding-top: 40px; box-sizing: border-box; position: relative; /* overflow: hidden; */ } .mode03 { position: relative; } .mode3::before { content: ''; display: block; width: 100%; height: calc(100% - 150px); height: 100%; background: url(../images/mode3bg.png) no-repeat; background-size: cover; position: absolute; left: 0; top: 0; } .mode3 .title h2::before { /* background: url(../images/tit2.png) no-repeat; */ } .mode3 .title { display: inline-block; } .mode3 .title.on h2 { font-weight: bold; } .mode3 .title:nth-child(2) { margin-left: 25px; position: relative; } .mode3 .title:nth-child(2) h2{ padding-left: 70px; } .mode3 .title:nth-child(2) h2::before{ left: 0; } .mode3 .title:nth-child(2) h2::after{ content: ''; display: block; width: 1px; height: 25px; background: #fff; position: absolute; left: 0; top: calc(50% - 10px); } .mode3 .mores { display: inline-block; position: absolute; right: 0; width: 80px; height: 46px; overflow: hidden; top: 28px; } .mode3 .title span a, .mode3 .more { color: #fff; } .mode3 .more { display: none } .mode3 .more.on { display: block; position: absolute; right: 0; top: 28px; } .mode3 .more::before { background: #fff; } .mode3ul { margin: 0 -15px; /* overflow: hidden; */ position: relative; z-index: 10; display: none; } .mode3ul.on { display: block; } .mode3ul li { margin-bottom: 25px; } .mode3ul li a { display: block; margin: 0 15px; background: #fff; padding: 10px; box-sizing: border-box; overflow: hidden; transition: all .3s ease-in-out; box-shadow: 20px 15px 55px rgb(0 0 0 / 10%); } .mode3ul li:hover a { transform: translateX(5px); } .mode3l { width: 200px; overflow: hidden; } .mode3pic { padding-bottom: 56%; } .mode3r { margin-left: 0; } .mode3ul li:hover .mode3info { color: #93171f; font-weight: 700; } .mode3info { line-height: 28px; height: 56px; color: #222; font-weight: normal; } .date3 { width: 117px; height: 33px; line-height: 33px; text-align: center; color: #93171f; background: #f5f5f5; } /* mode4 */ .mode4 { padding-top: 15px; box-sizing: border-box; overflow: hidden; } .mode4 .title { overflow: visible } .mode4 .more { box-shadow: 0px 0px 16px rgba(0, 0, 0, .08); background: #fff; } .mode4ul { margin: 0 -21px; overflow: hidden; } .mode4ul li { margin-bottom: 28px; } .mode4ul li a { display: block; margin: 0 21px; transition: all .3s ease-in-out; background: #fff; position: relative; z-index: 2; } .mode4box { position: relative; padding: 20px 35px 35px; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, .06); background: #fff; z-index: 3; } .mode4ul li a::before { content: ''; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, .04); position: absolute; left: 8px; top: 8px; z-index: -1; transition: all .3s ease-in-out; } .mode4ul li a::after { content: ''; display: block; width: 0; height: 100%; background: #93171f; position: absolute; left: 8px; top: 8px; z-index: -1; transition: all .3s ease-in-out; } .mode4ul li:hover a { transform: translateX(5px); } .mode4ul li:hover a::after { width: 100%; z-index: 2; } .mode4ul li:hover .mode4info { color: #93171f; font-weight: 700; } .mode4info { line-height: 28px; color: #222; font-weight: normal; padding-bottom: 15px; box-sizing: border-box; position: relative; } .mode4info::before { content: ''; display: block; width: 44px; height: 1px; background: rgba(0, 0, 0, .06); position: absolute; left: 0; bottom: 0; } .mode4bot { overflow: hidden; } .date4 { width: 62px; height: 70px; padding: 7px; background: rgba(0, 0, 0, .04); } .date2 h2 { font-size: 24px; } .mode4sunmmary { margin-right: 82px; line-height: 24px; color: #999; padding-top: 15px; box-sizing: border-box; } /* mode5 */ .mode5 { padding-top: 20px; padding-bottom: 55px; overflow: hidden; box-sizing: border-box; } .mode5ul { overflow: hidden; margin: 0 -5px; font-size: 0; } .mode5ul li { display: inline-block; margin-bottom: 10px; width: calc(100% / 7); } .mode5ul li a { display: block; margin: 0 5px; position: relative } .mode5ul li a::before { content: ''; display: block; width: 0%; height: 100%; background: rgba(0, 0, 0, .0); position: absolute; left: 0; top: 8px; z-index: -1; transition: all .3s ease-in-out; } .mode5ul li:hover a::before { width: calc(100% + 3px); background: #93171f } .mode5Pic { padding-bottom: 139.79%; } .mode5txt { padding: 10px; box-sizing: border-box; } .mode5ul li:hover .name, .mode5ul li:hover .mode5info { color: #fff } .name { line-height: 26px; color: #222; font-weight: normal; } .mode5info { line-height: 18px; color: #999; } /* mode6 */ .mode6 { padding: 40px 0 70px; box-sizing: border-box; background: url(../images/mode6bg.png) no-repeat center bottom; background-size: cover; overflow: hidden; } .mode6ul { margin: 0 -17px; overflow: hidden; font-size: 0; } .mode6ul li { width: calc(100% / 5); display: inline-block; } .mode6ul a { display: block; margin: 0 17px; background: #fff; } .mode6Pic { padding-bottom: 56.45%; } .mode6box { padding: 20px 35px 25px; box-sizing: border-box; } .mode6bot::before { content: ''; display: block; width: 44px; height: 1px; background: rgba(0, 0, 0, .06); position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .mode6info { -webkit-line-clamp: 2; line-height: 26px; height: 52px; font-weight: normal; overflow: hidden; margin-bottom: 5px; color: #222; } .mode6bot { overflow: hidden; position: relative; } .mode6bot i { display: block; width: 16px; } .mode6ul li:hover .mode6info { color: #93171f; font-weight: bold; } .mode6ul li:hover .mode6bot i { -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0); transform: rotate(0) } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg) } } @keyframes spin { 0% { -webkit-transform: rotate(0); transform: rotate(0) } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg) } } /* mode7 */ .mode7 { padding-top: 40px; box-sizing: border-box; overflow: hidden; position: relative; z-index: 5; } .mode7r { width: 320px; position: relative; z-index: 22; } .mode7l { margin-right: 380px; position: relative; z-index: 21; } .mode7ul { margin: 0 -5px; overflow: hidden; font-size: 0; } .mode7ul li { width: 25%; display: inline-block; margin-bottom: 10px; } .mode7ul li a { display: block; margin: 0 5px; border: 1px solid rgba(0, 0, 0, .06); background: #fff; } .mode7box { padding-bottom: 100%; background: #fff; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; position: relative; } .mode7Pic { position: absolute; top: 50%; transform: translateY(-50%); max-width: 240px; overflow: hidden; } .link li .linkbox { padding: 33px 37px; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, .06); height: 245px; background: #fff; display: block; box-shadow: 20px 15px 55px rgba(0, 0, 0, .06); } .ic1.on { transform: rotate(180deg); transition: all .35s ease-in-out; } .mode7info { margin-right: 20px; margin-bottom: 13px; } .mode07 { position: relative; } .mode07::before { content: ''; display: block; width: 197px; height: 72px; background: url(../images/7b.png) no-repeat; position: absolute; right: 4%; bottom: 77px; z-index: 20; } main { display: block; overflow: hidden; } .linkdl dd { margin-bottom: 2px } .linkdl a { display: block; padding: 13px 20px; box-sizing: border-box; background: #f5f5f5; color: #757575; } .linkdl { height: 148px; overflow-y: scroll; } /*滚动条样式*/ .linkdl::-webkit-scrollbar { width: 4px; } .linkdl::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #ededed; } .linkdl::-webkit-scrollbar-track { box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0; background: rgba(0, 0, 0, 0); } @media screen and (max-width: 1460px) {} @media screen and (max-width: 1360px) {.link li .linkbox{ height: 197.5px; padding: 20px 27px; }.linkdl{ height: 116px; }} @media screen and (max-width: 1301px) { .banner { margin-left: 35px; } .bannertxt h2 { padding-left: 60px; font-size: 2.6rem; } } @media screen and (max-width: 1201px) { .mode2ul a { padding: 18px 20px 30px; } .link li .linkbox{ height: 147.5px; padding: 15px 27px; }.linkdl{ height: 87px; } .title span a{ font-size: 2.4rem; } } @media screen and (max-width: 1101px) { .mode6ul { margin: 0 -10px; } .mode6ul a { margin: 0 10px; } .mode6box { padding: 10px 20px; } .title { padding: 15px 0; } .mode3 .more.on { top: 17px } .more { width: 50px; height: 30px; line-height: 30px; margin-top: 2px; } .mode1 { padding-top: 20px; } .mode1Ul li { margin-bottom: 20px; } .mode3 { padding-top: 20px; } .mode4, .mode5 { padding-top: 0; } .mode5 { padding-bottom: 25px; } .mode6 { padding-top: 20px; padding-bottom: 35px; } .mode7 { padding-top: 20px; } .link li .linkbox{ height: 122.5px; padding: 15px 27px; }.linkdl{ height: 59px; } .title span a{ font-size: 2rem; } } @media screen and (max-width:997px) { .bannertxt { padding-bottom: 30px; } .bannertxt h2 { padding-left: 75px; font-size: 2rem; } .banner { margin-left: 30px; } .mode2ul li { margin-bottom: 1px; } .mode7r { width: 100%; float: none; margin-bottom: 20px; } .mode7l { margin: 0; } .mode3 .title:nth-child(2) h2 { padding-left: 55px; } .link li .linkbox{ height: 262.5px; padding: 15px 27px; }.linkdl{ height: 193px; } } @media screen and (max-width:997px){ .title span{ /* display:none; */ } } @media screen and (max-width:768px) { .banner .slick-prev { left: calc(100% - 57px); top: calc(50% - 69px); } .banner .slick-next { right: -9px; top: calc(50% + 3px); } .line { width: 46px; right: 1px; top: calc(50% - 13px); } .banner .slick-dots { left: 15px; } .bannerbox::after { bottom: 15px } .title span a { font-size: 2.6rem; margin-left: 10px; } .mode1Ul { margin: 0 -10px; } .mode1Ul li { margin-bottom: 20px; } .mode1Ul a { margin: 0 10px; } .mode1Infor { padding: 15px 20px 25px; } .mode1Infor .mode1txt { margin-bottom: 10px } .mode3 { padding-top: 25px; } .mode4 { padding-top: 15px; } .mode4box { padding: 10px 20px; } .mode5 { padding-top: 10px; padding-bottom: 20px; } .mode6 { padding: 35px 0 40px; } .mode7 { padding-top: 35px; } .mode7ul li { width: 50%; } } @media screen and (max-width:700px) { .banner { margin-left: 0; overflow: hidden; } .bannerbox::after { display: none; } .bannertxt h2 { padding: 0; } .bannertxt { width: 100%; left: 0; bottom: 0; padding-bottom: 15px; display: none; } .banner .slick-dots { width: 100%; bottom: 10px; top: auto; transform: translate(0); } .banner .slick-dots li { margin: 0 5px; } .mode6ul { margin: 0 -5px; } .mode3 .more.on { top: 10px; } .title { padding: 5px 0; margin-left: 5px !important; } .mode3ul { margin-top: 15px } .mode3 .title.on h2 { font-size: 20px }.mode3 .title h2{ font-size: 20px; } .mode6ul a { margin: 0 5px; } .mode6box { padding: 10px 15px; } .mode6info { margin-bottom: 18px; } } @media screen and (max-width:479px) { .title h2::before { width: 29px; height: 22px; } .mode2info{min-height:auto;max-height: 56px;} .mode3 .title span{ display: none; } .mode3 .title.on h2 { font-size: 18px }.mode3 .title h2{ font-size: 18px; } .title h2 { /* padding-left: 35px !important; */ } .mode3 .more.on { top: 13px; } .title span a { font-size: 2.2rem; margin-left: 5px; } .mode3 .title{ display: inline-block !important; vertical-align: middle; } .date::before { transform: scale(.8); } .mode3l { width: 160px; } .mode3r { } .mode3info { line-height: 20px; height: auto; max-height: 40px; margin-bottom: 15px; } .mode3ul li a { padding-right: 15px; } .mode3ul li { margin-bottom: 10px; } .title { padding: 10px 10px 10px 0 !important; margin: 0; } .mode2top { padding-bottom: 10px; margin-bottom: 15px; } .link li .linkbox { padding: 15px 15px; } } @media screen and (max-width:414px) { .banner .slick-arrow, .line { display: none !important; } .mode3l { width: 100%; float: none; } .mode3r { margin-left: 0; /* margin-top: 15px; */ } .mode3ul li a { padding: 15px; } .mode3 .title:nth-child(2){ margin-left:0 } .mode3 .title{ display:block; } .mode3 .title:nth-child(2) i{ margin-left:0 } .mode3 .title:nth-child(1){ padding-bottom: 0; } .mode3 .title:nth-child(2) h2::after{ display:none; } .title h2 { padding-left: 35px !important; } .title i{ width: 29px; height: 29px; } }