@charset "utf-8"; @import url("./base.css"); /* flex布局 */ .disflex{display: flex;} .flexCenter{display: flex;justify-content: center;align-items: center;} .flexBetween{display: flex;justify-content: space-between;align-items: center;} .flexAlignCenter{display: flex;align-items: center;} /*文字截断*/ .TXTovehid{display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .TXTovehid-two{overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .TXTovehid-three{overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;} /*transition*/ .tran200{-webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -ms-transition:all 0.2s linear; transition:all 0.2s linear;} .tran300{-webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -ms-transition:all 0.3s linear; transition:all 0.3s linear;} .tran400{-webkit-transition:all 0.4s linear; -moz-transition:all 0.4s linear; -ms-transition:all 0.4s linear; transition:all 0.4s linear;} .tran500{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -ms-transition:all 0.5s linear; transition:all 0.5s linear;} .tran1000{-webkit-transition:all 1s linear; -moz-transition:all 1s linear; -ms-transition:all 1s linear; transition:all 1s linear;} /*动效*/ .scaleimg:hover .pic img, .scaleimg:hover .pic em{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);} /* 背景图片 */ .bgStyle{position: absolute;left: 0;top:0;width: 100%;height: 100%;background-repeat: no-repeat;background-position: center;background-size: cover;} .bgCover{background-position: center;background-repeat: no-repeat;background-size: cover;} .bgContain{background-position: center;background-repeat: no-repeat;background-size: contain;} .topic-page{padding: 140px 0;background: #F7F8FD url(../images/topic_bg.png) no-repeat center top;background-size: cover;overflow: hidden;font-family: 'Source Han Sans CN';} /* 标题 */ .topic_title{margin-bottom: 100px;} .topic_title.margin_bottom_20{margin-bottom: 20px;} .topic_title h2{padding: 20px 0 46px 63px;position: relative;font-weight: bold;line-height: 60px;} .topic_title h2 .bg{position: absolute;left: 0;top: 0;height: 100%;} .topic_title h2 span{display: block;background: linear-gradient(90deg, #5D61D5 0%, #7ED6FC 95%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-fill-color: transparent;} /* 副标题 */ .topic_sub_title{color: #060000;line-height: 1.4375;text-align: center;margin-bottom: 40px;} .topic_sub_title.margin_bottom_60{margin-bottom: 60px;} /* 展开按钮 */ .fold_btn{font-weight: normal;color: #5D61D5;cursor: pointer;position: relative;text-align: center;} .fold_btn::after{content: '';position: absolute;left: 50%;top: calc(100% + .5em);width: 16px;height: 16px;margin-left: -8px;background-image: url(../images/icon_down.svg);background-size: 100% 100%;animation: arrowAni 2s linear infinite;} @keyframes arrowAni{ 20%{transform: translateY(50%);} 40%{transform: translateY(20%);} 60%{transform: translateY(50%);} 80%{transform: translateY(0);} } /* 相关报道 */ .part1 .container{position: relative;width: 100%;padding: 0 30px 90px;margin-left: -30px;overflow: hidden;} .part1 .container .wrap{display: block;background: rgba(255, 255, 255, 0.6);border-radius: 16px;color: #3D3D3D;} .part1 .container .pic{padding-bottom: 65.43%;position: relative;overflow: hidden;border-radius: 16px 16px 0 0;} .part1 .container .text{padding: 30px;} .part1 .container .title{line-height: 28px;height: 56px;overflow: hidden;margin-bottom: 100px;} .part1 .container .date{color: #A1A1A1;} .part1 .container .date .icon{margin-right: 10px;} .part1 .container .arr{filter: brightness(0) invert(0.5);opacity: 0.6;} .part1 .container .wrap:hover{background: #fff;box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);color: #5D61D5;} .part1 .container .wrap:hover .arr{filter: brightness(1) invert(0);opacity: 1;} .part1 .container .swiper-pagination{bottom: 0;} .part1 .container .swiper-pagination .swiper-pagination-bullet{width: 10px;height: 10px;border-radius: 5px;margin: 0 7px;background: #7DD1FB;opacity: 1;transition: 0.3s;} .part1 .container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 47px;background: linear-gradient(90deg, #5D61D5 0%, #7ED6FC 95%);} /* 精彩看点一 */ .part2{padding: 140px 0 228px;} .part2 .pic img{max-width: 100%;} /* 精彩看点二 */ .part3 .container{padding: 58px;border: 2px solid rgba(204, 207, 255, 0.6);border-radius: 16px;box-shadow: 0px 0px 29px 0px rgba(93, 97, 212, 0.18);background: rgba(255, 255, 255, 0.6);} .part3 .container li{padding: 30px 0;border-top: 1px solid #D8D8D8;display: flex;justify-content: space-between;} .part3 .container li:first-child{padding-top: 0;border-top: none;} .part3 .container li .num{color: #5D61D5;font-weight: 300;line-height: 60px;width: 21%;} .part3 .container li dl{color: #4A4A4A;line-height: 32px;font-weight: bold;} .part3 .container li dl:nth-child(2){width: 28%;} .part3 .container li dl:nth-child(3){width: 38%;} .part3 .container li dl:nth-child(4){width: 130px;} .part3 .container li dl dt{color: #5D61D5;margin-bottom: 18px;} /* 精彩看点三 */ .part4{padding: 140px 0;} .part4 .cont-t{padding: 10px 0 70px;text-align: center;color: #060000;line-height: 30px;} .part4 .cont-t .title{padding: 18px 0;line-height: 1.44;} .part4 .cont-t .title span{display: block;background: linear-gradient(90deg, #5D61D5 0%, #7ED6FC 95%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-fill-color: transparent;} .part4 .cont-t .desc > div{margin: 0 40px;color: #606060;font-weight: bold;} .part4 .cont-t .desc img{margin-right: 10px;} .part4 .list{padding-bottom: 60px;} .part4 .list li{margin-bottom: 20px;padding: 45px 80px;position: relative;display: flex;overflow: hidden;justify-content: space-between;} .part4 .list li::before, .part4 .list li::after{content: "";width: 100%;height: 100%;position: absolute;left: 0;top: 0;border-radius: 16px;background: url(../images/topic_bg1.png) no-repeat center right;background-size: cover;transition: 0.6s;} .part4 .list li::after{background-image: url(../images/topic_bg2.png);opacity: 0;} .part4 .list li dl{position: relative;z-index: 2;width: 18%;color: #4A4A4A;line-height: 30px;font-weight: bold;} .part4 .list li dl:nth-child(2){width: 56%;box-sizing: border-box;padding-right: 30px;} .part4 .list li dt{margin-bottom: 18px;color: #5D61D5;} .part4 .list li:hover::before{opacity: 0} .part4 .list li:hover::after{opacity: 1;} /* 展区导览 */ .part5 .pic img{max-width: 100%;} /*笔记本1920*1080显示放大比例为125%,实际分辨率为1920/1.25=1536*/ @media screen and (max-width: 1550px){ .topic-page{padding: 80px 0;} /* 标题 */ .topic_title{margin-bottom: 50px;} .topic_title h2{padding: 10px 0 20px 30px;} .part1 .container{padding-bottom: 50px;} .part1 .container .title{margin-bottom: 60px;} .part2{padding: 80px 0 100px;} .part4{padding: 80px 0;} } /*中屏PC,分辨率1366*/ @media screen and (max-width: 1440px){ } /*小屏PC,分辨率1280*/ @media screen and (max-width: 1300px){ } /*pad横屏,分辨率1024*/ @media screen and (max-width: 1024px){ } /*phone和pad竖屏,分辨率820*/ @media screen and (max-width: 820px){ .topic-page{padding: 40px 0;} /* 标题 */ .topic_title{margin-bottom: 20px;} .topic_title.margin_bottom_20{margin-bottom: 10px;} .topic_title h2{padding: 5px 0 10px 20px;line-height: 40px;} /* 副标题 */ .topic_sub_title{margin-bottom: 20px;} .topic_sub_title.margin_bottom_60{margin-bottom: 30px;} .part1 .container{padding-bottom: 30px;} .part1 .container .text{padding: 15px;} .part1 .container .title{margin-bottom: 30px;} .part1 .container .date .icon, .part1 .container .arr{height: 18px;} .part2{padding: 30px 0 40px;} .part2 .pic img{width: 80%;} .part3 .container{padding: 20px;} .part3 .container li{padding: 15px 0;display: block;} .part3 .container li .num{line-height: 40px;} .part3 .container li dl{width: 100% !important;display: flex;padding-right: 0 !important;} .part3 .container li dl dt{margin-bottom: 0;flex-shrink: 0;margin-right: 12px;} .part3 .container li dl dd{flex: 1;overflow: hidden;} .part4{padding: 30px 0 50px;} .part4 .cont-t{padding: 0 0 30px;} .part4 .cont-t .title{padding: 10px 0;} .part4 .cont-t .desc{display: block;font-size: 13px;line-height: 20px;} .part4 .cont-t .desc > div{margin: 0;} .part4 .cont-t .desc img{height: 18px;margin-right: 5px;display: none;} .part4 .list{padding-bottom: 20px;} .part4 .list li{padding: 15px;display: block;} .part4 .list li dl{width: 100% !important;display: flex;padding-right: 0;} .part4 .list li dl dt{margin-bottom: 0;flex-shrink: 0;margin-right: 12px;} .part4 .list li dl dd{flex: 1;overflow: hidden;} }