section { padding: 54px 0 72px; } .section1 { padding: 50px 0; } .section1 .content { background: url(../images/img1.jpg) no-repeat; height: 505px; color: #fff; padding: 32px 70px 0 716px; box-sizing: border-box; font-size: 16px; font-weight: lighter; line-height: 27px; text-align: justify; } .section1 .content .title-zsjz { font-size: 36px; font-weight: bold; line-height: 1; letter-spacing: 2px; } .section2 { background-color: rgba(210, 216, 255, 0.6); } .section-title { font-size: 40px; font-weight: bold; color: #155BB1; text-align: center; } .section-title-en { font-size: 23px; font-weight: lighter; color: #474747; text-align: center; margin-top: 10px; } .section2 .cards { display: flex; justify-content: space-between; margin-top: 50px; } .section2 .card { width: 370px; border-radius: 22px; overflow: hidden; background: #155BB1; background: linear-gradient(to bottom, transparent 50%, #155BB1 50%); font-size: 16px; font-weight: lighter; line-height: 26px; padding-bottom: 11px; } .section2 .card-img { display: block; margin-bottom: -20px; } .section2 .card-content { background-color: #fff; border-radius: 20px; position: relative; padding: 34px 40px; } .section2 .card-title { font-size: 25px; font-weight: bold; text-align: center; color: #155BB1; } .section3 .cards { display: grid; grid-template-columns: repeat(3, 371px); grid-auto-rows: 372px; justify-content: space-between; row-gap: 30px; margin-top: 50px; } .section3 .card { border-radius: 22px; overflow: hidden; background: url(../images/card1.jpg) no-repeat; font-size: 16px; font-weight: lighter; line-height: 26px; padding: 20px 43px 0; display: grid; grid-template-rows: 130px 25px auto; } .section3 .card-img { justify-self: center; align-self: center; } .section3 .card-content { text-align: justify; } .section3 .card-title { font-size: 25px; font-weight: bold; text-align: center; color: #155BB1; } .section4 { background-color: #155BB1; } .section4 .section-title { color: #fff; } .section4 .section-title-en { color: #fff; } .section4 .cards { display: grid; grid-template-columns: repeat(5, 213px); grid-auto-rows: 618px; justify-content: space-between; row-gap: 30px; margin-top: 50px; } .section5 .cards { margin-top: 50px; } .section5 .card { background-color: #D2D8FF; border: 1px solid #155BB1; border-radius: 20px; height: 330px; box-sizing: border-box; padding: 36px 30px 0; text-align: justify; } .section5 .card-title { font-size: 25px; font-weight: bold; text-align: center; color: #155BB1; } .section5 .swiper-utils { display: grid; grid-template-columns: 1fr repeat(10, 32px) 1fr; grid-template-rows: 32px; align-items: center; gap: 8px; margin-top: 55px; } .section5 .swiper-prev, .section5 .swiper-next { width: 17px; height: 30px; background: url(../images/arrow.png) no-repeat; cursor: pointer; } .section5 .swiper-next { justify-self: end; transform: rotate(180deg); } .section5 .swiper-pagination { border-radius: 50%; overflow: hidden; line-height: 30px; text-align: center; background-color: #D2D8FF; border: 1px solid #155BB1; font-size: 20px; font-weight: lighter; color: #155BB1; cursor: pointer; } .section5 .swiper-pagination.active { background-color: #155BB1; color: #fff; } .section6 { background-color: rgba(210, 216, 255, 0.7); } .section6 .cards { display: grid; grid-template-columns: repeat(4, 282px); grid-auto-rows: 338px; justify-content: space-between; margin-top: 50px; } .section6 .card { border-radius: 20px; font-size: 23px; font-weight: lighter; line-height: 26px; color: #fff; padding-top: 40px; display: grid; grid-template-rows: 138px auto; } .section6 .card:nth-child(1) { background: #913B4A; } .section6 .card:nth-child(2) { background: #3E3372; } .section6 .card:nth-child(3) { background: #E87C72; } .section6 .card:nth-child(4) { background: #7BA6AA; } .section6 .card-img { justify-self: center; align-self: center; } .section6 .card-content { text-align: center; margin-top: 27px; } .section6 .card-title { font-size: 32px; line-height: 1; } .section6 .card-content p { margin: 0; margin-top: 22px; } .section7 .cards { display: grid; grid-template-columns: repeat(3, 1fr); justify-content: space-between; margin-top: 50px; } .section7 .card { display: grid; grid-template-rows: 100px auto; } .section7 .card-img { justify-self: center; align-self: center; width: 100px; height: 100px; } .section7 .card-content { font-size: 20px; font-weight: lighter; color: #515151; text-align: center; margin-top: 27px; } .section8 { background-color: rgba(210, 216, 255, 0.6); } .section8 .swiper-banner { width: 1200px; margin: auto; } .section8 .swiper-banner a { display: block; width: 1200px; height: 504px; overflow: hidden; border-radius: 20px; position: relative; } .section8 .swiper-banner img { width: 100%; height: 100%; display: block; } .section8 .swiper-banner a .title { position: absolute; bottom: 0; color: #fff; text-align: center; width: 100%; line-height: 55px; background-color: rgba(0,0,0,0.53); font-size: 18px; } .section8 #swiper-pagination{ height: 11px; display: flex; justify-content: center; gap: 6px; margin-top: 22px; } .section8 #swiper-pagination .swiper-pagination-bullet { display: block; width: 11px; height: 11px; border-radius: 11px; background-color: #B1BDC9; cursor: pointer; } .section8 #swiper-pagination .swiper-pagination-bullet-active { background-color: #155BB1; } .section9 { display: grid; grid-template-columns: 697px 448px; justify-content: space-between; width: 1200px; margin: auto; } .section9 .title { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; } .section9 .section-title, .section9 .section-title-en { text-align: left; } .section9 .news-part .news, .section9 .information-part .information { padding-bottom: 42px; } .section9 .img { height: 255px; overflow: hidden; border-radius: 15px; } .section9 .img img { display: block; width: 100%; height: 100%; object-fit: cover; } .section9 a { text-decoration: none; color: inherit; } .section9 .content { width: 100%; height: 255px; display: grid; margin-top: 28px; } .section9 .news-part .content { grid-template-rows: repeat(6, 1fr); } .section9 .news-part .news-item { display: flex; justify-content: space-between; align-items: center; width: 100%; height: auto; padding: 0; } .section9 .news-part .news-item--title { all: revert; color: #1E1E1E; font-size: 18px; } .section9 .news-part .news-item--date { all: revert; color: #155BB1; font-size: 14px; } .section9 .more { align-self: center; grid-row-start: 1; grid-column-start: 2; font-size: 14px; color: #fff; background-color: #155BB1; display: block; width: 120px; line-height: 26px; text-align: center; border-radius: 26px; margin-left: auto; margin-right: 0; } .section9 .information-part .content { grid-template-rows: repeat(4, 1fr); align-items: center; } .section9 .information-part .news-item { all: revert; display: flex; text-decoration: none; gap: 10px; } .section9 .information-part .news-item--title { all: revert; color: #282828; font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .section9 .information-part .news-item--date { all: revert; width: 33px; height: 44px; color: #fff; background-color: #155BB1; border-radius: 3px; font-size: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; line-height: 1; flex-shrink: 0; } .section9 .information-part .news-item--day { all: revert; font-size: 16px; border-bottom: 1px solid #fff; width: 20px; margin-bottom: 2px; padding-bottom: 2px; } .section10 { background-color: #155BB1; } .section10 .section-title { color: #fff; } .section10 .section-title-en { color: #fff; } .section10 .more { display: block; width: 77px; line-height: 26px; text-align: center; background-color: #fff; font-size: 14px; color: #155BB1; border-radius: 26px; margin: auto; text-decoration: none; } .section10 .students { margin-top: 40px; margin-bottom: 40px; width: 1116px; } .section10 swiper-slide { display: grid; grid-template-columns: repeat(5, 203px); justify-content: space-between; color: #fff; } .section10 swiper-slide .student-img { width: 100%; border-radius: 50%; overflow: hidden; } .section10 swiper-slide .student-name { margin-top: 20px; text-align: center; font-size: 21px; font-weight: bold; } .section10 swiper-slide .student-info { text-align: center; font-size: 18px; font-weight: 100; } .section10 .swiper-prev, .section10 .swiper-next { width: 22px; height: 56px; border-radius: 3px; cursor: pointer; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAA6CAYAAABbGMJIAAAACXBIWXMAAAsSAAALEgHS3X78AAABJUlEQVRYhWP8//8/AwMDgyYDA4M8AwMDF4hDAfjNwMDwkIGB4TqIDTJcE2o4NQHIgrNMDAwMKlQ2mAEaCqwgw1lpYDgICDDRyGAwGDV81PBRw0cNHzV8eBjOQqoG19oDSc/f/VCA8a9M9aijiuE2ZXtzbz377ECseqKDhVSDiTacHIOJMpxcgwkaTonBeA3vWHNdmxKD8RpODTAwhgdYSD8Q4GZ9QBPDNWT4vm6qta2jxAK8wQKzgJWZ6RvVDYdZ0BKrS5YFREVooovifXIsIDq1kGMBSaUiyAJJIc7iC/feixKjHtQnCiLFAhLA4dE6dNTwUcNHDR81fNRwQuAryPA3NDAYVM9+Axl+hoGB4SOVDT4OYsAGLUGAqEqXCPAarIaBgQEAp+xccAGUr6kAAAAASUVORK5CYII="); } .section10 .swiper-next { transform: rotate(180deg); } .section10 .content { position: relative; } .section10 .swiper-utils { position: absolute; left: 0px; top: 206px; width: 1200px; display: flex; justify-content: space-between; }