/* 从头复制到结尾 */ .bg-img-size-nor-center { background-size: cover; background-repeat: no-repeat; background-position: top center; } /* ks-search */ .ks-search { width: 1400px; margin: 0 auto; position: relative; padding: 20px 0; box-sizing: border-box; .bg-img-size-nor-center(); .top-search { display: flex; justify-content: center; align-items: center; margin-bottom: 30px; h1 { width: 95px; font-size: 22px; font-weight: 500; color: #003277; margin-right: 20px; } input { flex: 1; padding-left: 36px; box-sizing: border-box; height: 60px; background: #ffffff; border: 1px solid #dddddd; // border-radius: 30px; border-bottom-left-radius: 30px; border-top-left-radius: 30px; } a { display: block; width: 170px; height: 60px; background: #0155c8; border-radius: 0px 29px 29px 0px; font-size: 18px; color: #ffffff; line-height: 60px; text-align: center; } } .bottom-search { display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr); div { background-color: #0155c8; padding: 57px 50px 0; box-sizing: border-box; font-size: 16px; color: #ffffff; line-height: 36px; h4 { font-size: 22px; font-weight: 500; color: #ffffff; } span.borders { display: block; width: 30px; margin: 15px 0; height: 4px; background: #ffbb04; } a { display: inline-block; font-size: 18px; color: #ffffff; line-height: 36px; transition: all 0.5s; margin: 0 5px; &:hover { color: #ffbb04; transition: all 0.5s; } } &:nth-child(1) { height: 640px; grid-column-start: 0; grid-column-end: 2; grid-row-start: 1; grid-row-end: 5; background-image: url(../images/001.png); background-size: cover; background-repeat: no-repeat; } &:nth-child(2) { background-image: url(../images/002.jpg); background-size: cover; background-repeat: no-repeat; } &:nth-child(3) { background-image: url(../images/003.jpg); background-size: cover; background-repeat: no-repeat; } &:nth-child(4) { background-image: url(../images/004.png); background-size: cover; background-repeat: no-repeat; } &:nth-child(5) { background-image: url(../images/005.png); background-size: cover; background-repeat: no-repeat; } } } .search-result { width: 100%; border-top: 1px solid #ababba; padding: 50px 0; box-sizing: border-box; .flex-nw { display: flex; align-items: end; h2 { font-size: 30px; margin-right: 20px; font-weight: bold; } p { font-size: 18px; span { font-size: 18px; color: #2268cd; } } } ul { li { box-shadow: 2.1px 2px 6.6px -1px rgba(0, 0, 0, 0.035), 17px 16px 53px -1px rgba(0, 0, 0, 0.07); box-sizing: border-box; margin-top: 30px; a { display: block; padding: 22px 30px; width: 100%; box-sizing: border-box; div { width: 100%; display: flex; h4 { font-size: 18px; span { color: #135e9e; font-size: 18px; font-weight: bold; } } h6 { margin-left: 20px; padding: 7px 14px; box-sizing: border-box; background: #0b5da0; border-radius: 4px; color: #fff; } } p { font-size: 16px; color: #919090; } } } } } } .page-wrap { width: 100%; .page-box { width: 100%; display: flex; justify-content: center; .page-item { width: 40px; height: 40px; line-height: 40px; text-align: center; cursor: pointer; margin-left: 5px; &.active { background: #1d6ddc; color: #fff; border: none; } border: 1px solid #ababab; box-sizing: border-box; &:hover { background-color: #003277; color: #fff; } } .page-item-prev { background-color: #dddddd; color: #fff; &:hover { background-color: #dddddd; color: #fff; } } .page-item-active { background-color: #003277; color: #fff; } } } /* search-content */ .search-content { width: 1400px; margin: 50px auto; padding: 103px 0 100px 70px; box-sizing: border-box; background-image: url(../images/searchjcontent.jpg); background-size: cover; background-repeat: no-repeat; border: 1px solid #1d6ddc; .content-box { width: 50%; h1 { font-size: 32px; font-weight: bold; color: #0455b6; line-height: 32px; } .borders { width: 100%; height: 1px; background: #333333; opacity: 0.3; margin: 27px 0 25px; } p { font-size: 16px; font-weight: 400; color: #343434; line-height: 26px; margin-bottom: 44px; } ul { display: flex; flex-wrap: wrap; li { padding: 15px 25px; margin-bottom: 13px; box-sizing: border-box; margin-right: 13px; background: #0960c7; a { display: block; width: 100%; height: 100%; color: #fff; font-size: 18px; } } } } } .content-search { .list { h4 { color: #FFFFFF; font-size: 24px; line-height: 60px; padding-left: 38px; margin-bottom: 21px; } ul { display: flex; flex-wrap: wrap; margin-bottom: 30px; li { width: 19.2%; margin-right:1%; background: linear-gradient(0deg, #ffffff 0%, #e0eeff 100%); border: 1px solid #3570bb; margin-bottom: 20px; &:nth-child(5n) { margin-right: 0; } a { display: flex; padding: 0 10px; box-sizing: border-box; justify-content: space-between; // width: 270px; height: 44px; line-height: 44px; p { font-weight: bold; font-size: 18px; color: #3570bb; } } transition: all 0.3s ease-in-out; &:hover{ transition: all 0.3s ease-in-out; background: #f79559; border: none; a { p { color: #fff; } span { color: #fff; } } } } .active { } } } }