.banner{ position: relative; } .banner .swiper .swiper-slide { position: relative; } .banner .swiper .swiper-slide .pic img { display: block; width: 100%; height: 100vh; object-fit: cover; } .banner .swiper .swiper-slide .slide-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .banner .swiper .swiper-slide .slide-box label { display: inline-block; font-size: 30px; font-family: harmonyos_sans_sc_bold; color: #ffffff; line-height: 1; padding: 15px 44px; background: #398fca; border-radius: 35px; } .banner .swiper .swiper-slide .slide-box .title { font-size: 60px; font-family: alimamashuheiti-bold; color: #ffffff; line-height: 1.33; margin-top: 1em; } .banner .swiper .swiper-slide .slide-box .des { font-size: 30px; font-family: harmonyos sans sc; font-weight: 300; color: #ffffff; line-height: 1.2; margin-top: 1.66em; } .banner .swiper-pagination { text-align: left; left: 50%; transform: translatex(-50%); width: 1400px; bottom: 125px; } .banner .swiper-pagination-bullet { position: relative; width: 80px; height: 4px; background: rgba(250, 250, 250, .4); border-radius: 0; } .banner .swiper-pagination-bullet:not(:last-child) { margin-right: 10px; } .banner .swiper-pagination-bullet::before { position: absolute; content: ""; left: 0; top: 0; width: 0; height: 100%; background-color: rgba(57, 143, 202, 1); } .banner .swiper-pagination-bullet-active::before { transition: all 6s; width: 100%; } .banner .drop-mouse { position: absolute; left: 50%; transform: translatex(-50%); bottom: 50px; z-index: 2; } .banner .drop-mouse .iconfont { display: block; font-size: 30px; animation: bump .8s ease-in-out infinite alternate; color: #fff; } @keyframes bump { 0% { transform: translatey(10px); } 100% { transform: translatey(-10px); } } body { background-color: rgba(250, 250, 250, 1); } .box1 { padding: 110px 0 20px; text-align: center; } .index-title .en { font-size: 48px; font-family: rany-bold; color: #060c17; line-height: 1; text-transform: uppercase; } .index-title .zh { font-size: 18px; font-family: harmonyos sans sc; font-weight: bold; color: #222222; line-height: 1; margin-top: 10px; } .box1 .box-t{ margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; } .box1 .box-t a{ padding: 0 20px; border: 1px solid #dce3e9; line-height: 58px; font-size: 18px; font-family: harmonyos sans sc; font-weight: 400; color: #666666; margin-right: 10px; margin-top: 10px; } .box1 .box-t a.active, .box1 .box-t a:hover{ background-color: rgba(57, 143, 202, 1); border-color: rgba(57, 143, 202, 1); color: #fff; } .box1 .box-c { display: none; margin-top: 60px; } .box1 .box-c.active{ display: block; } .box1 .box-c .list { /* display: grid; */ grid-template-columns: repeat(3, 1fr); /* gap: 15px; */ } .box1 .box-c .list li { position: relative; background-color: #fff; } .box1 .box-c .list li a { display: block; padding: 19.86% 0 17.93%; } .box1 .box-c .list li .text-des { font-size: 16px; font-family: harmonyos sans sc; font-weight: 400; color: #333333; line-height: 1; } .box1 .box-c .list li .text-title { font-size: 36px; font-family: alimamashuheiti-bold; color: #333333; line-height: 1; margin-top: 48px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .box1 .box-c .list li .img { position: relative; margin-top: 49px; padding-top: 47.93%; } .box1 .box-c .list li .img .pic { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .box1 .box-c .list li .img .pic img { display: block; margin: 0 auto; max-width: 90%; max-height: 90%; width: auto; } .box1 .box-c .list li .li-box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: rgba(5, 18, 28, .8); opacity: 0; transition: all .6s; } .box1 .box-c .list li:hover .li-box { opacity: 1; } .box1 .box-c .list li .li-box .iconfont { width: 92px; height: 92px; line-height: 92px; text-align: center; background: #398fca; box-shadow: 5px 9px 30px 0px rgba(57, 143, 202, 0.3); border-radius: 50%; color: #fff; font-size: 24px; font-weight: bold; } .box2 { background-image: url(/uploads/image/sacimg/index-box2-bg.jpg); background-size: cover; } .box2 .box-c { display: flex; justify-content: space-between; } .box2 .box-c .l { padding: 140px 0 0 5.2%; width: 46.9%; } .box2 .box-c .l .index-title .en, .box2 .box-c .l .index-title .zh { color: #fff; } .box2 .box-c .l .des { margin-top: 110px; font-size: 30px; font-family: harmonyos sans sc; font-weight: 400; color: #ffffff; line-height: 1.6; } .box2 .box-c .l .playbtn { display: flex; align-items: center; font-size: 14px; font-family: harmonyos sans sc; font-weight: 400; color: #ffffff; line-height: 1; margin-top: 100px; cursor: pointer; } .box2 .box-c .l .playbtn .iconfont { font-size: 80px; margin-right: 15px; } .box2 .box-c .r { width: 50%; } .box2 .box-c .r .list { display: flex; flex-wrap: wrap; } .box2 .box-c .r .list li { position: relative; width: 33.33%; padding-top: 33.33%; } .box2 .box-c .r .list li .li-box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 60px 40px 40px; display: flex; flex-direction: column; justify-content: space-between; background-color: rgba(57, 143, 202, .6); } .box2 .box-c .r .list li:nth-child(5) .li-box { background-color: rgba(57, 143, 202, 1); box-shadow: 5px 9px 30px 0px rgba(57, 143, 202, 0.3); } .box2 .box-c .r .list li:nth-child(4) .li-box { background-color: rgba(57, 143, 202, .2); } .box2 .box-c .r .list li .number { font-size: 20px; font-family: harmonyos sans sc; font-weight: 400; color: #ffffff; line-height: 1; } .box2 .box-c .r .list li .number .counter { font-size: 60px; font-family: rany-bold; color: #ffffff; line-height: 1; padding-right: 11px; } .box2 .box-c .r .list li .li-text { font-size: 20px; font-family: harmonyos sans sc; font-weight: 400; color: #ffffff; line-height: 1; } .box2 .box-c .r .r-b { position: relative; padding-top: 33.33%; } .box2 .box-c .r .text-box { position: absolute; left: 0; top: 0; height: 100%; width: 66.66%; background-color: rgba(57, 143, 202, .6); padding: 55px 53px 40px; display: flex; flex-direction: column; height: 100%; justify-content: space-between; } .box2 .box-c .r .text-box .text { font-size: 20px; font-family: harmonyos sans sc; font-weight: 400; color: #ffffff; line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .box2 .box-c .r .text-box .more { font-size: 16px; font-family: harmonyos sans sc; font-weight: 400; color: #ffffff; line-height: 1; } .box2 .box-c .r .text-box .more .iconfont { padding-left: 5px; transition: all .6s; } .box2 .box-c .r .text-box .more:hover .iconfont{ padding-left: 10px; } .box3 { padding: 119px 0 0; text-align: center; } .box3 .box-c { margin-top: 60px; background-image: url(/uploads/image/sacimg/index-box3-bg.jpg); background-size: cover; padding: 130px 0 87px; } .box3 .box-c .des { font-size: 30px; font-family: harmonyos sans sc; font-weight: 400; color: #fafafa; line-height: 1.6; } .box3 .box-c .list { display: grid; height: 340px; grid-template-columns: repeat(5, 1fr); gap: 13px; margin-top: 100px; } .box3 .box-c .list li { overflow: hidden; display: flex; align-items: flex-end; } .box3 .box-c .list li a { display: block; width: 100%; height: 160px; padding: 23px 38px; border: 2px solid rgba(255, 255, 255, .5); transition: all .6s; } .box3 .box-c .list li a:hover { height: 100%; background-color: rgba(57, 143, 202, 1); border-color: rgba(57, 143, 202, 1); padding-top: 40px; } .box3 .box-c .list li .li-box-t { display: flex; justify-content: space-between; } .box3 .box-c .list li .li-box-t-l { text-align: left; transition: all .6s; margin-top: 57px; } .box3 .box-c .list li a:hover .li-box-t-l { margin-top: 0; } .box3 .box-c .list li .number { font-size: 24px; font-family: bahnschrift; font-weight: 400; color: #ffffff; line-height: 1; } .box3 .box-c .list li .name { font-size: 18px; font-family: harmonyos sans sc; font-weight: 400; color: #ffffff; line-height: 1; margin-top: 13px; white-space: nowrap; } .box3 .box-c .list li .icon .iconfont { font-size: 48px; color: #fff; } .box3 .box-c .list li .more { display: flex; align-items: center; justify-content: center; width: 92px; height: 92px; border: 2px solid #ffffff; box-shadow: 5px 9px 30px 0px rgba(57, 143, 202, 0.3); border-radius: 50%; } .box3 .box-c .list li .more { margin-top: 100px; } .box3 .box-c .list li .more .iconfont { font-size: 25px; cursor: pointer; font-weight: bold; color: #fff; } .box4 { padding: 120px 0 140px; text-align: center; } .box4 .box-c { margin-top: 60px; } .box4 .box-c .swiper-slide { width: 22.91%; border-radius: 5px; background-color: #fff; opacity: .2; } .box4 .box-c .swiper-slide-active, .box4 .box-c .swiper-slide-next, .box4 .box-c .swiper-slide-prev { opacity: 1; } .box4 .box-c .swiper-slide:not(:last-child) { margin-right: 2.08%; } .box4 .box-c .swiper-slide-prev { margin-right: 0 !important; } .box4 .box-c .swiper-slide-active { margin: 0 2.08%; } .box4 .box-c .swiper-slide .text-box { padding: 37px 30px 0; text-align: left; } .box4 .box-c .swiper-slide .text-box .text-title { font-size: 18px; font-family: harmonyos sans sc; font-weight: 400; color: #333333; line-height: 1; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .box4 .box-c .swiper-slide .text-box .text-des { font-size: 14px; font-family: harmonyos sans sc; font-weight: 400; color: #777777; line-height: 22px; margin-top: 24px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .box4 .box-c .swiper-slide .text-box-b { margin-top: 55px; border-top: 1px solid rgba(236, 236, 236, 1); padding: 26px 0; display: flex; justify-content: space-between; } .box4 .box-c .swiper-slide .text-box-b .date { font-size: 16px; font-family: harmonyos sans sc; font-weight: 400; color: #999999; line-height: 1; } .box4 .box-c .swiper-slide .text-box-b .iconfont { font-size: 20px; color: rgba(57, 143, 202, 1); font-weight: bold; transition: all .6s; } .box4 .box-c .swiper-slide:hover .text-box-b .iconfont{ transform: rotate(45deg); } .box4 .btn { position: absolute; top: 50%; transform: translatey(-50%); z-index: 2; width: 50px; height: 50px; line-height: 50px; background: #dedede; border-radius: 50%; color: #fff; } .box4 .btn:hover { background: #398fca; box-shadow: 5px 9px 30px 0px rgba(15, 99, 175, 0.3); border-radius: 50%; cursor: pointer; } .box4 .btn.btn-prev { left: 5.2%; } .box4 .btn.btn-next { right: 5.2%; } .box4 .more { width: 92px; height: 92px; border: 1px solid #dedede; border-radius: 50%; margin: 70px auto 0; display: flex; align-items: center; justify-content: center; } .box4 .more:hover{ background-color: rgba(57, 143, 202, 1); border-color: rgba(57, 143, 202, 1); box-shadow: 5px 9px 30px 0px rgba(57,143,202,0.3); } .box4 .more::before { font-size: 14px; font-family: harmonyos sans sc; font-weight: 400; color: #999999; line-height: 36px; content: "更多"; } .box4 .more:hover::before { content: "\e7cc"; font-family: "iconfont" !important; color: #fff; font-weight: bold; font-size: 24px; } @media (max-width:1700px) { .box2 .box-c .r .text-box .text{ font-size: 18px; } .box2 .box-c .r .text-box{ padding: 35px 40px; } .box2 .box-c .r .list li .number .counter{ font-size: 48px; } } @media (max-width:1440px) { .box1 .box-t a{ /* padding: 0 24px; */ line-height: 50px; font-size: 16px; } .box2 .box-c .l{ padding-left: 3%; } .box3 .box-c .des{ font-size: 26px; } .box2 .box-c .l .des{ font-size: 26px; margin-top: 80px; } .box2 .box-c .l .playbtn .iconfont{ font-size: 60px; } .box2 .box-c .r .list li .number .counter{ font-size: 40px; } .box2 .box-c .r .list li .li-box{ padding: 45px 30px 30px; } .box2 .box-c .r .list li .li-text{ font-size: 18px; } .box2 .box-c .r .text-box{ padding: 30px; } .box2 .box-c .r .text-box .text{ font-size: 16px; } .box2 .box-c .r .text-box .more{ font-size: 14px; } .banner .swiper .swiper-slide .slide-box .des, .banner .swiper .swiper-slide .slide-box label{ font-size: 26px; } .banner .swiper .swiper-slide .slide-box label{ padding: 15px 30px; } .banner .swiper .swiper-slide .slide-box .title{ font-size: 40px; } .index-title .en{ font-size: 40px; } .box1 .box-c .list li .text-title{ font-size: 30px; margin-top: 35px; } .box4 .btn.btn-prev{ left: 3%; } .box4 .btn.btn-next{ right: 3%; } } @media (max-width: 1280px) { .box3 .box-c .list{ height: 300px; } .box3 .box-c .list li .more{ width: 60px; height: 60px; } .box2 .box-c .r .list li .li-box{ padding: 30px 20px 20px; } .box2 .box-c .r .list li .number .counter{ font-size: 30px; } .box2 .box-c .r .text-box{ padding: 20px; } .banner .swiper .swiper-slide .slide-box .des, .banner .swiper .swiper-slide .slide-box label{ font-size: 24px; } .banner .swiper .swiper-slide .slide-box .title{ font-size: 36px; } .index-title .en{ font-size: 36px; } .box1 .box-c .list li .text-title{ font-size: 24px; margin-top: 30px; } .box3 .box-c .des{ font-size: 24px; } .box2 .box-c .l .des{ font-size: 24px; margin-top: 50px; } .box2 .box-c .l .playbtn .iconfont{ font-size: 44px; } .box3 .box-c .list{ margin-top: 50px; } .box3 .box-c .list li .icon .iconfont{ font-size: 40px; } .box3 .box-c .list li a{ padding: 20px; } } @media (max-width:1199px) { .box4 .btn{ width: 40px; height: 40px; line-height: 40px; } .box3 .box-c .list li a{ height: auto; } .box3 .box-c .list li a:hover{ padding-top: 20px; } .box3 .box-c .list li a .li-box-t-l{ margin-top: 57px !important; } .box3 .box-c .list li .more{ display: none; } .box3 .box-c .list{ height: auto; } .box3 .box-c .list li a:hover{ height: auto; background-color: transparent; } .box2 .box-c .r{ width: 680px; max-width: 100%; margin-top: 40px; } .box3 .box-c .des{ font-size: 20px; } .box2 .box-c .l .des{ font-size: 20px; margin-top: 30px; } .box2 .box-c .l .playbtn{ margin-top: 30px; } .box2 .box-c .l{ width: 100%; } .box2 .box-c{ flex-direction: column; padding: 0 3%; } .box2 .box-c .l{ padding-left: 0; } .box2 .box-c .l, .box1,.box3{ padding-top: 70px; } .box3 .box-c,.box4{ padding: 70px 0; } .box1 .box-c,.box3 .box-c, .box4 .box-c,.box3 .box-c .list{ margin-top: 45px; } .index-title .en{ font-size: 30px; } .banner .swiper .swiper-slide .slide-box .des, .banner .swiper .swiper-slide .slide-box label{ font-size: 22px; } .banner .swiper .swiper-slide .slide-box .title{ font-size: 30px; } .banner .swiper .swiper-slide .pic img{ height: auto; min-height: 490px; } .banner .swiper-pagination, .banner .drop-mouse{ bottom: 30px; } .banner .swiper-pagination-bullet{ width: 30px; } .box1 .box-c .list li .li-box .iconfont{ width: 60px; height: 60px; line-height: 60px; font-size: 20px; } .box4 .more{ width: 60px; height: 60px; margin-top: 45px; } .box4 .box-c .swiper-slide{ width: 270px; } } @media (max-width:1024px) { .box1 .box-t a{ padding: 0 18px; line-height: 40px; font-size: 16px; } .box1 .box-t{ margin-top: 20px; } .box3 .box-c .list li .icon .iconfont{ font-size: 30px; } .box3 .box-c .list{ grid-template-columns: repeat(3,1fr); } .box3 .box-c .des{ font-size: 18px; } .box2 .box-c .l .des{ font-size: 18px; } .box2 .box-c .l, .box1,.box3{ padding-top: 60px; } .box3 .box-c,.box4{ padding: 60px 0; } .box3 .box-c .list, .box1 .box-c,.box3 .box-c, .box4 .box-c, .box4 .more{ margin-top: 40px; } .index-title .en{ font-size: 28px; } .banner .swiper .swiper-slide .slide-box .des, .banner .swiper .swiper-slide .slide-box label{ font-size: 20px; } .banner .swiper .swiper-slide .slide-box .title{ font-size: 28px; } .box1 .box-c .list li .text-title{ font-size: 20px; margin-top: 20px; } } @media (max-width: 768px) { .box3 .box-c .list{ grid-template-columns: repeat(2,1fr); } .box2 .box-c .r .text-box .more{ font-size: 12px; } .box2 .box-c .r .list li .number .counter{ font-size: 24px; } .box2 .box-c .r .list li .li-text, .box2 .box-c .r .text-box .text{ font-size: 14px; } .box2 .box-c .r .r-b{ padding-top: 50%; } .box2 .box-c .r .text-box{ width: 100%; padding: 30px 20px; } .box2 .box-c .r .list li:nth-child(5) .li-box{ /* background-color: rgba(57, 143, 202, .2); */ /* box-shadow: none; */ } .box2 .box-c .r .list li.empty{ display: none; } .box2 .box-c .r .list li{ width: 50%; } .box2 .box-c .r{ width: 100%; } .box1 .box-c .list{ grid-template-columns: repeat(2,1fr); } .box2 .box-c .l, .box1,.box3{ padding-top: 50px; } .box3 .box-c,.box4{ padding: 50px 0; } .box4 .more, .box3 .box-c .list, .box1 .box-c,.box3 .box-c, .box4 .box-c{ margin-top: 30px; } .index-title .en{ font-size: 26px; } .banner .swiper .swiper-slide .slide-box .des, .banner .swiper .swiper-slide .slide-box label{ font-size: 18px; } .banner .swiper .swiper-slide .slide-box .title{ font-size: 26px; } } @media (max-width: 500px) { .box1 .box-t{ margin-top: 10px; } .box1 .box-t a{ padding: 0 14px; line-height: 34px; font-size: 14px; } .box4 .box-c .swiper-slide .text-box{ padding: 20px 20px 0; } .box4 .box-c .swiper-slide .text-box .text-des{ margin-top: 15px; } .box4 .box-c .swiper-slide .text-box-b{ margin-top: 20px; } .box4 .box-c .swiper-slide .text-box-b{ padding: 15px 0; } .box4 .more:hover::before{ font-size: 20px; } .box4 .more::before{ font-size: 12px; } .box4 .more{ width: 45px; height: 45px; } .box3 .box-c .list li .number{ font-size: 22px; } .box3 .box-c .list li .name{ font-size: 16px; } .box3 .box-c .list li a .li-box-t-l{ margin-top: 30px !important; } .box1 .box-c .list li .li-box .iconfont{ width: 40px; height: 40px; line-height: 40px; } .box1 .box-c .list li .text-title{ font-size: 18px; margin-top: 10px; } .box2 .box-c .l, .box1,.box3{ padding-top: 40px; } .box3 .box-c,.box4{ padding: 40px 0; } .box4 .more, .box3 .box-c .list, .box1 .box-c,.box3 .box-c, .box4 .box-c{ margin-top: 25px; } .index-title .en{ font-size: 22px; } .banner .swiper .swiper-slide .slide-box label{ padding: 10px 20px; } .banner .swiper .swiper-slide .slide-box .des, .banner .swiper .swiper-slide .slide-box label{ font-size: 16px; } .banner .swiper .swiper-slide .slide-box .title{ font-size: 22px; } }