.banner { position: relative; } .banner img { width: 100%; } .banner .text { position: absolute; width: 100%; top: 46%; color: #fff; } .banner .text h2 { text-align: center; font-size: 2.3rem; font-weight: bold; letter-spacing: 1px; } .banner .text p { text-align: center; font-size: 1.2rem; letter-spacing: 1px; margin-top: 0.6rem; } .sub-nav { height: 4rem; border-bottom: 1px solid #ddd; overflow: hidden; position: relative; top: 0; background: #fff; width: 100%; border-top: 1px solid #ddd; z-index: 100; } .sub-nav .content .left { float: left; } .sub-nav .content .left h6 { line-height: 4rem; font-size: 1.3rem; font-weight: bold; } .sub-nav .content .left h6 span { font-size: 1rem; color: #9f223d; margin-left: 1rem; position: relative; top: -0.1rem; } .sub-nav .content .right { float: right; } .sub-nav .content .right > ul li { float: left; width: 4.6rem; height: 4rem; text-align: center; position: relative; } .sub-nav .content .right > ul li a { line-height: 4rem; font-size: 0.8rem; display: block; } .sub-nav .content .right > ul li:not(:last-child) { margin-right: 2rem; } .sub-nav .content .right > ul li:before { content: ''; width: 0; height: 3px; background: #9f223d; position: absolute; bottom: 0; left: 0; } .sub-nav .content .right > ul li.active:before { width: 100%; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .sub-nav .content .right > ul li.active a { color: #9f223d; } .sub-nav .content .right > ul li:hover:before { width: 100%; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .sub-nav .content .right > ul li:hover a { color: #9f223d; } .report-con .con .left { float: left; width: 67%; } .report-con .con .left .text .title h2 { font-size: 1.6rem; font-weight: bold; margin: 3.5rem 0 2rem; } .report-con .con .left .text .title > ul { display: inline-block; } .report-con .con .left .text .title > ul li { float: left; margin-right: 3.5rem; font-size: 0.8rem; color: #999; } .report-con .con .left .text .title > ul li span { font-size: 0.8rem; color: #999; margin-right: 0.4rem; } .report-con .con .left .text .title > ul li span:nth-child(2) { color: #dcdcdc; } .report-con .con .left .text .title > ul li .bdsharebuttonbox { position: relative; top: -0.5rem; left: 0.5rem; } .report-con .con .left .text .title > ul li .bdsharebuttonbox a { position: relative; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #92cf46; margin-right: 0.5rem; } .report-con .con .left .text .title > ul li .bdsharebuttonbox a:before { content: '\e617'; font-family: 'iconfont'; color: #fff; font-size: 0.8rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } .report-con .con .left .text .title > ul li .bdsharebuttonbox .bds_tsina { background: #de5c47; } .report-con .con .left .text .title > ul li .bdsharebuttonbox .bds_tsina:before { content: '\e699'; } .report-con .con .left .text .title > ul li .bdsharebuttonbox .bds_copy { background: #5f5d5d; } .report-con .con .left .text .title > ul li .bdsharebuttonbox .bds_copy:before { content: '\e60c'; } .report-con .con .left .text .title > ul li .bdsharebuttonbox .bds_sqq { background: #65b3f4; } .report-con .con .left .text .title > ul li .bdsharebuttonbox .bds_sqq:before { content: '\e612'; } .report-con .con .left .text .main p { /* text-align: justify; */ /* font-size: 0.8rem; */ /* margin: 2rem 0; */ line-height: 1.8; } .report-con .con .left .text .main img { max-width: 100%!important; } .report-con .con .left .case { margin-top: 2.5rem; } .report-con .con .left .case > h2 { font-size: 1.6rem; font-weight: bold; padding-left: 1rem; position: relative; margin-bottom: 1.5rem; } .report-con .con .left .case > h2:before { content: ''; width: 3px; height: 1.5rem; background: #9f223d; position: absolute; left: 0; top: 0.6rem; } .report-con .con .left .case > ul li { float: left; width: 31.6%; margin-top: 1.5rem; } .report-con .con .left .case > ul li:not(:nth-child(3n)) { margin-right: 2.6%; } .report-con .con .left .case > ul li .top { height: 0; padding-bottom: 53%; overflow: hidden; } .report-con .con .left .case > ul li .top img { width: 100%; } .report-con .con .left .case > ul li .bottom { background: #eceef0; padding: 1.5rem 1.5rem; } .report-con .con .left .case > ul li .bottom h2 { font-size: 1.2rem; font-weight: bold; letter-spacing: 1px; margin-bottom: 1.2rem; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 1.5; height: 1.5em; } .report-con .con .left .case > ul li .bottom p { font-size: 0.7rem; -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 1.5; height: 6em; text-align: justify; margin-bottom: 1.5rem; } .report-con .con .left .case > ul li .bottom h3 { font-size: 0.8rem; color: #a83953; } .report-con .con .left .case > ul li .bottom h3 span { margin-right: 0.4rem; font-size: 1rem; position: relative; top: 0.1rem; } .report-con .con .left .case > ul li:hover .top img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); } .report-con .con .left .case > ul li:hover .bottom h3 { color: #7a1d2f; } .report-con .con .left .product { margin-top: 4rem; } .report-con .con .left .product > h2 { font-size: 1.6rem; font-weight: bold; padding-left: 1rem; position: relative; margin-bottom: 2.5rem; } .report-con .con .left .product > h2:before { content: ''; width: 3px; height: 1.5rem; background: #9f223d; position: absolute; left: 0; top: 0.6rem; } .report-con .con .left .product > ul li { float: left; width: 31.6%; } .report-con .con .left .product > ul li:not(:last-child) { margin-right: 2.6%; } .report-con .con .left .product > ul li a { display: block; } .report-con .con .left .product > ul li .top { height: 0; padding-bottom: 65%; overflow: hidden; } .report-con .con .left .product > ul li .top img { width: 100%; } .report-con .con .left .product > ul li .bottom { text-align: center; background: #eceef0; height: 0; padding: 1.5rem 1.2rem 64%; } .report-con .con .left .product > ul li .bottom h2 { font-size: 1.3rem; } .report-con .con .left .product > ul li .bottom .line { width: 0.8rem; height: 1px; background: #9f223d; margin: 1rem auto; } .report-con .con .left .product > ul li .bottom p { font-size: 0.7rem; color: #666; } .report-con .con .left .article { margin: 4rem 0 5rem; } .report-con .con .left .article a { display: block; font-size: 0.8rem; } .report-con .con .left .article a:hover { color: #9f223d; } .report-con .con .right { float: right; width: 29%; } .report-con .con .right h2 { font-size: 1.6rem; font-weight: bold; padding-top: 3.5rem; } .report-con .con .right > ul li { margin-top: 2rem; } .report-con .con .right > ul li .top { height: 0; padding-bottom: 68%; overflow: hidden; } .report-con .con .right > ul li .top img { width: 100%; } .report-con .con .right > ul li p { font-size: 0.8rem; margin-top: 1rem; font-weight: bold; } .report-con .con .right > ul li:hover .top img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); } .report-con .con .right > ul li:hover p { color: #9f223d; } @media screen and (max-width: 1366px) { .report-con .con .left .case > ul li .bottom h2 { font-size: 1rem; margin-bottom: 0.5rem; } .report-con .con .left .case > ul li .bottom p { font-size: 0.6rem; } .report-con .con .left .product > ul li .bottom .line { margin: 0.8rem auto; } .report-con .con .left .product > ul li .bottom h2 { font-size: 1.2rem; } .report-con .con .left .product > ul li .bottom { padding: 1.5rem 1.2rem 70%; } } @media screen and (max-width: 1024px) { .banner { margin-top: 5.5rem; } .banner .text { top: 38%; } .report-con .con .left .product > ul li .bottom { padding: 1rem 1.2rem 84%; } } @media screen and (max-width: 768px) { .banner .text { top: 30%; } .banner .text h2 { font-size: 18px; } .banner .text p { font-size: 13px; margin-top: 0.2rem; } .sub-nav .content .left { display: none; } .sub-nav .content .right { width: 100%; } .sub-nav .content .right > ul li { width: 20%; } .sub-nav .content .right > ul li a { font-size: 12px; } .sub-nav .content .right > ul li:not(:last-child) { margin-right: 0; } .report-con .con .left { width: 100%; } .report-con .con .left .text .title h2 { font-size: 16px; margin: 1.5rem 0 0; text-align: center; } .report-con .con .left .text .title > ul { width: 100%; display: inline; } .report-con .con .left .text .title > ul li { margin-top: 1rem; margin-right: 0; width: 50%; font-size: 12px; } .report-con .con .left .text .title > ul li span { font-size: 12px; } .report-con .con .left .text .title > ul li .bdsharebuttonbox a { width: 24px; height: 24px; } .report-con .con .left .text .title > ul li .bdsharebuttonbox a:before { font-size: 14px; } .report-con .con .left .text .title > ul li:nth-child(2) .bdsharebuttonbox { position: relative; left: 0; top: -0.7rem; } .report-con .con .left .text .main p { /* font-size: 13px; */ /* margin: 1rem 0; */ } .report-con .con .left .case > h2 { font-size: 16px; margin-bottom: 0; } .report-con .con .left .case > h2:before { top: 2px; } .report-con .con .left .case > ul li { width: 48.5%; margin-top: 1rem; } .report-con .con .left .case > ul li:not(:nth-child(3n)) { margin-right: 0; } .report-con .con .left .case > ul li:nth-child(odd) { margin-right: 3%; } .report-con .con .left .case > ul li .bottom { padding: 1rem; } .report-con .con .left .case > ul li .bottom h2 { font-size: 14px; } .report-con .con .left .case > ul li .bottom p { font-size: 12px; } .report-con .con .left .case > ul li .bottom h3 { font-size: 12px; } .report-con .con .left .case > ul li .bottom h3 span { font-size: 16px; } .report-con .con .left .product > h2 { font-size: 16px; margin-bottom: 0; } .report-con .con .left .product > h2:before { top: 2px; } .report-con .con .left .product > ul li { width: 48.5%; margin-top: 1rem; } .report-con .con .left .product > ul li:not(:last-child) { margin-right: 0; } .report-con .con .left .product > ul li:nth-child(odd) { margin-right: 3%; } .report-con .con .left .product > ul .bottom { padding: 1rem 1rem 86%; } .report-con .con .left .product > ul .bottom h2 { font-size: 14px; } .report-con .con .left .product > ul .bottom p { font-size: 13px; } .report-con .con .left .article { margin: 2rem 0; } .report-con .con .left .article a { font-size: 13px; } .report-con .con .left .article a span:first-child { width: 16%; float: left; } .report-con .con .left .article a span:last-child { width: 84%; float: left; } .report-con .con .right { width: 100%; padding-bottom: 3rem; } .report-con .con .right h2 { padding-top: 1rem; font-size: 16px; } .report-con .con .right > ul li { float: left; width: 48.5%; margin-top: 1rem; } .report-con .con .right > ul li:nth-child(odd) { margin-right: 3%; } .report-con .con .right > ul li p { font-size: 13px; } } /*# sourceMappingURL=info_news_details.css.map */