.linehide { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; } .clearfix:after { content: ""; clear: both; height: 0; overflow: hidden; visibility: hidden; display: block; } .clearfix { zoom: 1; } body { background: no-repeat; background-size: cover; min-width: 1200px; } header { position: relative; } header .buttonbox { position: absolute; left: 50%; bottom: 23%; transform: translatex(-50%); display: flex; justify-content: center; } header .buttonbox li:nth-child(1) { margin-right: 105px; } header .buttonbox li a { display: block; width: 208px; height: 57px; background: linear-gradient(180deg, #e50202 0%, #b30000 49%, #eb0202 100%); border-radius: 32px; font-family: pingfangsc, pingfang sc; font-weight: 500; font-size: 18px; color: #ffffff; line-height: 57px; text-align: center; } header .buttonbox li a:hover { color: #fff !important; } .title { font-family: sourcehanserifsc, sourcehanserifsc; font-weight: 800; font-size: 40px; color: #cb191d; text-align: center; } .part1 { min-width: 1200px; padding: 0 0 57px 0; margin-top: -67px; background: no-repeat; background-size: 100% 100%; } .part1 .layout .notice { position: relative; height: 254px; background: no-repeat; background-size: 100% 100%; } .part1 .layout .notice .box { padding-top: 69px; margin: 0px 0 0 270px; } .part1 .layout .notice .box .title { margin-bottom: 20px; width: 805px; font-family: sourcehanserifsc, sourcehanserifsc; font-weight: 800; font-size: 24px; color: #ffffff; text-align: center; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } .part1 .layout .notice .box .smalltext { width: 796px; font-family: pingfangsc, pingfang sc; font-weight: 400; font-size: 16px; color: #ffffff; line-height: 24px; } .part1 .layout .notice .box .smalltext a { font-family: pingfangsc, pingfang sc; font-weight: 400; font-size: 16px; color: #f9d58d; line-height: 24px; } .part1 .layout .notice .box .smalltext a:hover { color: #f9d58d !important; } .part2 { min-width: 1200px; padding: 52px 0 83px; background: #ffe9e6; } .part2 .layout .title { margin-bottom: 20px; } .part2 .layout .box { background-image: linear-gradient(to bottom, transparent 0%, transparent 59px, #ffffff 59px, #ffffff 100%); padding: 0 27px 57px; } .part2 .layout .box .content { margin-bottom: 37px; } .part2 .layout .box .content li { display: none; align-items: center; } .part2 .layout .box .content li .imgbox { margin-right: 46px; width: 247px; height: 247px; border-radius: 50%; overflow: hidden; } .part2 .layout .box .content li .imgbox img { display: block; width: 100%; height: 100%; } .part2 .layout .box .content li .intro .writer { margin-bottom: 12px; font-family: pingfangsc, pingfang sc; font-weight: 600; font-size: 20px; color: #434343; } .part2 .layout .box .content li .intro .writer span { font-family: sourcehansanscn, sourcehansanscn; font-weight: bold; font-size: 24px; color: #434343; } .part2 .layout .box .content li .intro .smalltext { font-family: pingfangsc, pingfang sc; font-weight: 400; font-size: 16px; color: #434343; } .part2 .layout .box .content .on { display: flex; } .part2 .layout .box .tab li { float: left; margin-right: 10px; width: 87px; height: 87px; border-radius: 50%; overflow: hidden; cursor: pointer; } .part2 .layout .box .tab li:hover img { transform: scale(1.3); } .part2 .layout .box .tab li:nth-last-child(1) { margin-right: 0; } .part2 .layout .box .tab li img { transition: all .3s; display: block; width: 100%; height: 100%; } .part3 { padding: 50px 0 39px; min-width: 1200px; max-width: 1676px; margin: 0 auto; } .part3 img { display: block; width: 100%; margin: 0 auto; } .part4 { background: no-repeat; background-size: 100% 100%; padding: 80px 0 126px; } .part4 .layout .title { margin-bottom: 56px; } .part4 .layout .list { height: 734px; overflow: hidden; } .part4 .layout .list .item { margin-top: 20px; position: relative; margin-bottom: 72px; background: #ffffff; border-radius: 9px; padding: 87px 36px 55px 47px; } .part4 .layout .list .item .top { background-color: #cb191d; position: absolute; left: 50%; top: -20px; transform: translatex(-50%); padding: 15px 47px; display: flex; align-items: center; } .part4 .layout .list .item .top::before { content: ""; position: absolute; top: 0; left: -6px; width: 0; height: 0; display: block; border-left: 6px solid transparent; border-bottom: 20px solid #720000; } .part4 .layout .list .item .top::after { content: ""; position: absolute; top: 0; right: -6px; width: 0; height: 0; display: block; border-right: 6px solid transparent; border-bottom: 21px solid #720000; } .part4 .layout .list .item .top .performance { margin-right: 32px; font-family: pingfangsc, pingfang sc; font-weight: 500; font-size: 20px; color: #ffffff; white-space: nowrap; } .part4 .layout .list .item .top .time { font-family: pingfangsc, pingfang sc; font-weight: 400; font-size: 18px; color: #ffffff; white-space: nowrap; } .part4 .layout .list .item ul li { float: left; margin-right: 89px; } .part4 .layout .list .item ul li:nth-child(2n) { margin-right: 0; } .part4 .layout .list .item ul li a { display: flex; } .part4 .layout .list .item ul li a .imgbox { margin-right: 12px; width: 270px; height: 153px; } .part4 .layout .list .item ul li a .imgbox img { display: block; width: 100%; height: 100%; } .part4 .layout .list .item ul li a .intro .title { margin-top: 10px; margin-bottom: 21px; width: 232px; font-family: pingfangsc, pingfang sc; font-weight: 400; font-size: 16px; color: #c73831; line-height: 22px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } .part4 .layout .list .item ul li a .intro .writer { font-family: pingfangsc, pingfang sc; font-weight: 400; font-size: 14px; color: #999999; } .part4 .layout .all { width: fit-content; margin: 0 auto; display: block; font-family: pingfangsc, pingfang sc; font-weight: 400; font-size: 14px; color: #666666; text-align: center; } .part5 { padding: 50px 0 75px; background: no-repeat; background-size: 100% 100%; } .part5 .layout .title { margin-bottom: 63px; } .part5 .layout .tab { margin-bottom: 37px; display: flex; justify-content: center; } .part5 .layout .tab li { margin-right: 37px; padding: 14px 65px; background: #e9e9e9; border-radius: 28px; font-family: pingfangsc, pingfang sc; font-weight: 600; font-size: 21px; color: #666666; transition: all .3s; cursor: pointer; } .part5 .layout .tab li:nth-last-child(1) { margin-right: 0; } .part5 .layout .tab .on { transform: translatey(-15px); background: #cb191d; color: #fff; } .part5 .layout .list .item { display: none; position: relative; background: #ffffff; box-shadow: 0px 4px 15px 0px rgba(160, 160, 160, 0.5); padding: 55px 34px 37px 47px; } .part5 .layout .list .item ul li { float: left; margin-top: 14px; margin-right: 48px; } .part5 .layout .list .item ul li:nth-child(2n) { margin-right: 0; } .part5 .layout .list .item ul li:nth-child(1), .part5 .layout .list .item ul li:nth-child(2) { margin-top: 0; } .part5 .layout .list .item ul li:hover a .title p { color: #cb191d; } .part5 .layout .list .item ul li a { display: flex; align-items: center; } .part5 .layout .list .item ul li a .title { margin-right: 44px; margin-bottom: 0; display: flex; align-items: center; } .part5 .layout .list .item ul li a .title i { margin-right: 13px; display: block; width: 6px; height: 6px; background: #cb191d; border-radius: 50%; } .part5 .layout .list .item ul li a .title p { width: 430px; font-family: pingfangsc, pingfang sc; font-weight: 400; font-size: 18px; color: #666666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } .part5 .layout .list .item ul li a .time { font-family: microsoftyahei; font-size: 14px; color: #999999; } .part5 .layout .list .item .more { position: absolute; top: 22px; right: 34px; font-family: pingfangsc, pingfang sc; font-weight: 400; font-size: 14px; color: #666666; } .part5 .layout .list .on { display: block; } .part6 { padding: 53px 0 96px; background: no-repeat; background-size: 100% 100%; } .part6 .layout .title { margin-bottom: 47px; } .part6 .layout .questionsandanswers { padding: 60px 77px 46px 73px; background: #ffffff; box-shadow: 0px 2px 10px 0px rgba(47, 25, 25, 0.04); border-radius: 6px; } .part6 .layout .questionsandanswers .questionsbox .title, .part6 .layout .questionsandanswers .answersbox .title { margin-bottom: 14px; display: flex; } .part6 .layout .questionsandanswers .questionsbox .title img, .part6 .layout .questionsandanswers .answersbox .title img { width: 25px; height: 27px; display: block; margin-right: 8px; } .part6 .layout .questionsandanswers .questionsbox .title div, .part6 .layout .questionsandanswers .answersbox .title div { font-family: sourcehansanscn, sourcehansanscn; font-weight: 500; font-size: 20px; color: #656565; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } .part6 .layout .questionsandanswers .questionsbox .content, .part6 .layout .questionsandanswers .answersbox .content { margin-bottom: 24px; font-family: sourcehansanscn, sourcehansanscn; font-weight: 400; font-size: 14px; color: #656565; line-height: 34px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } .part6 .layout .questionsandanswers .questionsbox .intro, .part6 .layout .questionsandanswers .answersbox .intro { display: flex; } .part6 .layout .questionsandanswers .questionsbox .intro .name, .part6 .layout .questionsandanswers .answersbox .intro .name, .part6 .layout .questionsandanswers .questionsbox .intro .time, .part6 .layout .questionsandanswers .answersbox .intro .time, .part6 .layout .questionsandanswers .questionsbox .intro .browse, .part6 .layout .questionsandanswers .answersbox .intro .browse { font-family: sourcehansanscn, sourcehansanscn; font-weight: 400; font-size: 12px; color: #898989; } .part6 .layout .questionsandanswers .questionsbox .intro .name, .part6 .layout .questionsandanswers .answersbox .intro .name, .part6 .layout .questionsandanswers .questionsbox .intro .time, .part6 .layout .questionsandanswers .answersbox .intro .time { margin-right: 5px; } .part6 .layout .questionsandanswers .questionsbox .content { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } .part6 .layout .questionsandanswers hr { margin: 22px 0 24px; width: 100%; height: 1px; background: #c7c7c7; } .part6 .layout a { display: block; width: fit-content; margin: 22px auto 0; } .part7 { padding: 58px 0 74px; } .part7 .layout .title { margin-bottom: 50px; } .part7 .layout ul { width: fit-content; margin: 0 auto; } .part7 .layout ul li { float: left; margin-right: 48px; padding-right: 48px; border-right: 1px solid #cb191d; } .part7 .layout ul li:nth-last-child(1) { margin: 0; padding: 0; border: 0; } .part7 .layout ul li a { margin: 0; } .part7 .layout ul li a .title { margin-bottom: 21px; width: 306px; font-family: pingfangsc, pingfang sc; font-weight: 500; font-size: 18px; color: #333333; text-align: left; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } .part7 .layout ul li a .smalltext { width: 290px; font-family: pingfangsc, pingfang sc; font-weight: 400; font-size: 16px; color: #666666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } .part7 .layout a { margin: 36px auto 0; display: block; width: fit-content; font-family: pingfangsc, pingfang sc; font-weight: 400; font-size: 14px; color: #666666; } .part8 .title { margin-bottom: 63px; } .part8 .tab { margin-bottom: 37px; display: flex; justify-content: center; } .part8 .tab li { margin-right: 37px; padding: 14px 65px; background: #e9e9e9; border-radius: 28px; font-family: pingfangsc, pingfang sc; font-weight: 600; font-size: 21px; color: #666666; transition: all .3s; cursor: pointer; } .part8 .tab li:nth-last-child(1) { margin-right: 0; } .part8 .tab .on { transform: translatey(-15px); background: #cb191d; color: #fff; } .part8 ul li { margin-right: 0 !important; padding: 27px 97px 21px 123px; } .part8 ul li a { display: flex; align-items: center; } .part8 ul li a .imgbox { margin-right: 76px; width: 224px; height: 300px; background: no-repeat bottom left; background-size: 100% 156px; flex-shrink: 0; } .part8 ul li a .imgbox img { width: 198px; height: 288px; display: block; margin: 0 auto; } .part8 ul li a .intro .title { margin-bottom: 22px; font-family: microsoftyahei, microsoftyahei; font-weight: bold; font-size: 20px; color: #424242; text-align: left; } .part8 ul li a .intro .smalltext { font-family: microsoftyahei; font-size: 14px; color: #7b6c6c; line-height: 28px; }