.header_p { background-color: white; } .header_m { background-color: white; } .header_m .m_jb { background-image: none; } .list-banner { margin-top: 0.6525rem; width: 100%; height: 2.07751rem; position: relative; } .list-banner .img { width: 100%; position: absolute; top: 0; left: 0; } .list-banner .img img { width: 100%; } .list-banner .title { font-size: 0.39rem; font-weight: bold; line-height: 0.39rem; color: #ffffff; text-align: center; position: relative; padding-top: 0.7125rem; } .list-banner .p { font-size: 0.135rem; line-height: 0.135rem; color: #ffffff; margin-top: 0.2475rem; text-align: center; position: relative; } .left { width: 2.26501rem; margin-left: 0.69rem; float: left; position: relative; } .left .left-box { width: 2.26501rem; padding-top: 0.9rem; padding-bottom: 0.9375rem; position: absolute; top: 0; } .left .left-box .series { width: 100%; background-color: #ffffff; position: relative; } .left .left-box .series .series-box { width: 100%; height: 100%; cursor: pointer; border: solid 1px #c8ced2; } .left .left-box .series .series-box::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .left .left-box .series .series-box .series-value { font-size: 0.12rem; line-height: 0.465rem; font-weight: bold; color: #333333; margin-left: 0.1875rem; padding-left: 0.165rem; position: relative; float: left; } .left .left-box .series .series-box .series-value::after { content: ""; width: 0.0375rem; height: 0.135rem; background-color: #ea222d; position: absolute; top: 0.165rem; left: 0; } .left .left-box .series .series-box .icon { float: right; margin-right: 0.1875rem; } .left .left-box .series .series-box .icon i { line-height: 0.465rem; font-size: 0.18rem; font-weight: bold; color: #333333; } .left .left-box .series .series-box .icon.rotate i { transform: rotate(180deg); } .left .left-box .series ul { width: 100%; background-color: #ffffff; display: none; border: solid 1px #c8ced2; position: absolute; left: 0; top: 0.468rem; z-index: 1; height: 1.8rem; overflow: auto; } .left .left-box .series ul::-webkit-scrollbar { width: 0.045rem; } .left .left-box .series ul::-webkit-scrollbar-track { background: #e8e6e3; border-radius: 0.015rem; } .left .left-box .series ul::-webkit-scrollbar-thumb { border-radius: 0.015rem; background: #ea222d; } .left .left-box .series ul li { padding: 0.06rem 0.15rem; font-size: 0.12rem; line-height: 0.24rem; color: #333333; transition: 0.3s; } .left .left-box .series ul li:hover { background: #ea222d; color: white; } .left .left-box .series1 { width: 100%; background-color: #ffffff; margin-top: 0.2rem; position: relative; /* display: none; */ } .left .left-box .series1 .series1-box { width: 100%; height: 100%; cursor: pointer; border: solid 1px #c8ced2; } .left .left-box .series1 .series1-box::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .left .left-box .series1 .series1-box .series1-value { font-size: 0.12rem; line-height: 0.465rem; font-weight: bold; color: #333333; margin-left: 0.1875rem; padding-left: 0.165rem; position: relative; float: left; } .left .left-box .series1 .series1-box .series1-value::after { content: ""; width: 0.0375rem; height: 0.135rem; background-color: #ea222d; position: absolute; top: 0.165rem; left: 0; } .left .left-box .series1 .series1-box .icon { float: right; margin-right: 0.1875rem; } .left .left-box .series1 .series1-box .icon i { line-height: 0.465rem; font-size: 0.18rem; font-weight: bold; color: #333333; } .left .left-box .series1 .series1-box .icon.rotate i { transform: rotate(180deg); } .left .left-box .series1 ul { width: 100%; background-color: #ffffff; display: none; border: solid 1px #c8ced2; position: absolute; left: 0; top: 0.465rem; z-index: 1; height: 1.8rem; overflow: auto; } .left .left-box .series1 ul::-webkit-scrollbar { width: 0.045rem; } .left .left-box .series1 ul::-webkit-scrollbar-track { background: #e8e6e3; border-radius: 0.015rem; } .left .left-box .series1 ul::-webkit-scrollbar-thumb { border-radius: 0.015rem; background: #ea222d; } .left .left-box .series1 ul li { padding: 0.06rem 0.15rem; font-size: 0.12rem; line-height: 0.24rem; color: #333333; transition: 0.3s; } .left .left-box .series1 ul li:hover { background: #ea222d; color: white; } .left .left-box .name { width: 100%; background-color: #ffffff; margin-top: 0.2rem; position: relative; } .left .left-box .name .name-box { width: 100%; height: 100%; cursor: pointer; border: solid 1px #c8ced2; } .left .left-box .name .name-box::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .left .left-box .name .name-box .name-value { font-size: 0.12rem; line-height: 0.465rem; font-weight: bold; color: #333333; margin-left: 0.1875rem; padding-left: 0.165rem; position: relative; float: left; } .left .left-box .name .name-box .name-value::after { content: ""; width: 0.0375rem; height: 0.135rem; background-color: #ea222d; position: absolute; top: 0.165rem; left: 0; } .left .left-box .name .name-box .icon { float: right; margin-right: 0.1875rem; } .left .left-box .name .name-box .icon i { line-height: 0.465rem; font-size: 0.18rem; font-weight: bold; color: #333333; } .left .left-box .name .name-box .icon.rotate i { transform: rotate(180deg); } .left .left-box .name ul { width: 100%; background-color: #ffffff; display: none; border: solid 1px #c8ced2; position: absolute; left: 0; top: 0.465rem; z-index: 1; height: 1.8rem; overflow: auto; } .left .left-box .name ul::-webkit-scrollbar { width: 0.045rem; } .left .left-box .name ul::-webkit-scrollbar-track { background: #e8e6e3; border-radius: 0.015rem; } .left .left-box .name ul::-webkit-scrollbar-thumb { border-radius: 0.015rem; background: #ea222d; } .left .left-box .name ul li { padding: 0.06rem 0.15rem; font-size: 0.12rem; line-height: 0.24rem; color: #333333; transition: 0.3s; } .left .left-box .name ul li:hover { background: #ea222d; color: white; } .left .left-box .button { width: 100%; height: 0.465rem; background-color: #f5f5f5; border: solid 1px #f5f5f5; font-size: 0.12rem; font-weight: bold; line-height: 0.465rem; color: #ea222d; cursor: pointer; text-align: center; margin-top: 0.495rem; transition: 0.5s; position: relative; } .left .left-box .button:hover { background-color: #ea222d; color: white; } .left .left-box .condition-box { width: 100%; margin-top: 0.44rem; /* display: none; */ } .left .left-box .condition-box .title { font-size: 0.15rem; line-height: 0.15rem; letter-spacing: 0px; color: #333333; } .left .left-box .condition-box .line { width: 100%; height: 2px; background-color: #ea222d; margin-top: 0.1725rem; } .left .left-box .condition-box .condition { width: 100%; margin-top: 0.255rem; } .left .left-box .condition-box .condition .item { width: 100%; margin-bottom: 0.1rem; /* display: none; */ } .left .left-box .condition-box .condition .item::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .left .left-box .condition-box .condition .item .close { width: 0.18rem; height: 0.18rem; border-radius: 50%; background-color: #f5f5f5; float: left; cursor: pointer; } .left .left-box .condition-box .condition .item .close img { width: 0.06rem; height: 0.06rem; display: block; margin: 0 auto; padding-top: 0.06rem; } .left .left-box .condition-box .condition .item .text { float: left; font-size: 0.12rem; line-height: 0.18rem; color: #333333; margin-left: 0.1425rem; } .right { width: 10.14003rem; float: right; padding-top: 0.99rem; margin-right: 0.69rem; padding-bottom: 0.9375rem; } .right .result { text-align: right; font-size: 0.15rem; line-height: 0.15rem; color: #333333; } .right .result span { font-size: 0.36rem; font-weight: bold; line-height: 0.36rem; color: #ea222d; margin-left: 0.1725rem; } .right .list { width: calc(100% + 0.39rem); margin-left: -0.195rem; margin-top: 0.1725rem; min-height: 4.74001rem; } .right .list::after { content: ""; width: 0; height: 0; display: block; float: none; clear: both; } .right .list .item { width: calc(33.333% - 0.39rem); margin: 0 0.195rem; height: 4.74001rem; background-image: linear-gradient(#f5f5f5, #f5f5f5, #f5f5f5, #f5f5f5, #f5f5f5, white); float: left; margin-bottom: 0.45rem; } .right .list .item .img { width: 100%; overflow: hidden; height: 2.20501rem; position: relative; } .right .list .item .img a { width: 100%; height: 100%; display: block; overflow: hidden; } .right .list .item .img a img { transition: 0.5s; height: 100%; position: absolute; top: 0; left: -200px; right: -200px; margin: auto; } .right .list .item .text { margin-top: 0.405rem; margin-left: 0.36rem; margin-right: 0.36rem; } .right .list .item .text .title { font-size: 0.165rem; font-weight: bold; line-height: 0.165rem; color: #333333; transition: 0.5s; } .right .list .item .text .line { width: 100%; height: 1px; background-color: #afafaf; opacity: 0.4; margin-top: 0.225rem; position: relative; } .right .list .item .text .p { margin-top: 0.1875rem; font-size: 0.12rem; line-height: 0.12rem; color: #9a9a9a; } .right .list .item .text .p span { color: #333333; transition: 0.5s; } .right .list .item .text .button { width: 100%; height: 0.36rem; text-align: center; margin-top: 0.3975rem; transition: 0.5s; } .right .list .item .text .button .details { float: left; width: calc(66.667% - 2px); border: solid 1px #ea222d; border-right: 0; transition: 0.5s; position: relative; background-color: #ea222d; } .right .list .item .text .button .details::after { content: ""; width: 0; height: 100%; background-color: #ea222d; position: absolute; top: 0; left: 0; transition: 0.5s; } .right .list .item .text .button .details a { position: relative; width: 100%; height: 100%; display: block; font-size: 0.12rem; line-height: 0.36rem; color: #fff; transition: 0.5s; z-index: 2; } .right .list .item .text .button .details:hover { border: solid 1px #ea222d; border-right: 0; } .right .list .item .text .button .details:hover::after { width: 100%; } .right .list .item .text .button .details:hover a { color: white; padding-left: 0.1rem; } .right .list .item .text .button .case { float: left; width: calc(33.333% - 2px); position: relative; border: solid 1px #2b2b2b; border-left: #ea222d; } .right .list .item .text .button .case::after { content: ""; width: 0; height: 100%; background-color: #333; position: absolute; top: 0; left: 0; transition: 0.5s; } .right .list .item .text .button .case a { position: relative; width: 100%; height: 100%; display: block; font-size: 0.12rem; line-height: 0.36rem; color: #333333; transition: 0.5s; z-index: 2; } .right .list .item .text .button .case:hover::after { width: 100%; } .right .list .item .text .button .case:hover a { color: white; } .right .list .item:hover .img a img { transform: scale(1.1); } .right .list .item:hover .text .title { color: #ea222d; } .page { width: 100%; height: 0.15rem; padding-top: 0.375rem; padding-bottom: 0.78rem; text-align: center; display: flex; justify-content: center; } .page>div { height: 0.135rem; font-size: 0.135rem; font-weight: bold; color: #333333; line-height: 0.14rem; flex-shrink: 0; cursor: pointer; transition: all 0.5s; } .page>div:hover { color: #EA222D; } .page>div:first-of-type { padding-right: 0.1275rem; border-right: 0.0375rem solid #EA222D; margin-right: 0.375rem; padding-bottom: 0rem; } .page>div:last-of-type { padding-left: 0.1275rem; border-left: 0.0375rem solid #EA222D; margin-left: 0.375rem; padding-bottom: 0rem; } .page>div .red_:nth-child(1) { margin-right: 0; } .page>.page_num { margin: 0 0.13rem; padding-bottom: 0.0675rem; } .page .page_active { color: #EA222D; border-bottom: 2px solid #EA222D; } @media (max-width: 1020px) { .list-banner { margin-top: 1.2rem; height: 2.5rem; } .list-banner .img { height: 100%; overflow: hidden; } .list-banner .img img { width: auto; position: absolute; top: 0; left: -1000px; right: -1000px; margin: auto; height: 100%; } .list-banner .title { font-size: 0.42rem; line-height: 0.42rem; } .list-banner .p { font-size: 0.24rem; line-height: 0.24rem; color: #ffffff; margin-top: 0.2475rem; text-align: center; position: relative; } .left { width: 90%; margin-left: 5%; position: relative; float: none; } .left .left-box { width: 100%; padding-top: 0.4rem; margin-top: 0.5rem; padding-bottom: 0.4rem; position: static; top: 0; background-color: #f5f5f5; } .left .left-box .series { width: 90%; margin: 0 auto; background-color: #ffffff; position: relative; } .left .left-box .series .series-box .series-value { font-size: 0.25rem; line-height: 0.8rem; margin-left: 0.3rem; padding-left: 0.3rem; } .left .left-box .series .series-box .series-value::after { content: ""; width: 0.05rem; height: 0.25rem; background-color: #ea222d; position: absolute; top: 0.275rem; left: 0; } .left .left-box .series .series-box .icon { float: right; margin-right: 0.3rem; } .left .left-box .series .series-box .icon i { line-height: 0.8rem; font-size: 0.3rem; font-weight: bold; color: #333333; } .left .left-box .series ul { width: 100%; background-color: #ffffff; display: none; border: solid 1px #c8ced2; position: absolute; left: 0; top: 0.8rem; z-index: 1; height: 3.25rem; overflow: auto; } .left .left-box .series ul li { padding: 0.2rem 0.3rem; font-size: 0.25rem; line-height: 0.25rem; color: #333333; } .left .left-box .series1 { width: 90%; margin: 0 auto; margin-top: 0.4rem; background-color: #ffffff; position: relative; } .left .left-box .series1 .series1-box .series1-value { font-size: 0.25rem; line-height: 0.8rem; margin-left: 0.3rem; padding-left: 0.3rem; } .left .left-box .series1 .series1-box .series1-value::after { content: ""; width: 0.05rem; height: 0.25rem; background-color: #ea222d; position: absolute; top: 0.275rem; left: 0; } .left .left-box .series1 .series1-box .icon { float: right; margin-right: 0.3rem; } .left .left-box .series1 .series1-box .icon i { line-height: 0.8rem; font-size: 0.3rem; font-weight: bold; color: #333333; } .left .left-box .series1 ul { width: 100%; background-color: #ffffff; display: none; border: solid 1px #c8ced2; position: absolute; left: 0; top: 0.8rem; z-index: 1; height: 3.25rem; overflow: auto; } .left .left-box .series1 ul li { padding: 0.2rem 0.3rem; font-size: 0.25rem; line-height: 0.25rem; color: #333333; } .left .left-box .name { width: 90%; margin: 0 auto; margin-top: 0.4rem; background-color: #ffffff; position: relative; } .left .left-box .name .name-box .name-value { font-size: 0.25rem; line-height: 0.8rem; margin-left: 0.3rem; padding-left: 0.3rem; } .left .left-box .name .name-box .name-value::after { content: ""; width: 0.05rem; height: 0.25rem; background-color: #ea222d; position: absolute; top: 0.275rem; left: 0; } .left .left-box .name .name-box .icon { float: right; margin-right: 0.3rem; } .left .left-box .name .name-box .icon i { line-height: 0.8rem; font-size: 0.3rem; font-weight: bold; color: #333333; } .left .left-box .name ul { width: 100%; background-color: #ffffff; display: none; border: solid 1px #c8ced2; position: absolute; left: 0; top: 0.8rem; z-index: 1; height: 3.25rem; overflow: auto; } .left .left-box .name ul li { padding: 0.2rem 0.3rem; font-size: 0.25rem; line-height: 0.25rem; color: #333333; } .left .left-box .button { width: 90%; margin: 0 auto; height: 0.8rem; background-color: #ea222d; border: solid 1px #f5f5f5; font-size: 0.25rem; font-weight: bold; line-height: 0.8rem; color: #fff; cursor: pointer; text-align: center; margin-top: 0.4rem; transition: 0.5s; } .left .left-box .condition-box { width: 90%; margin: 0 auto; margin-top: 0.44rem; display: none; } .left .left-box .condition-box .title { display: none; } .left .left-box .condition-box .condition .item { width: 100%; margin-bottom: 0.4rem; display: none; } .left .left-box .condition-box .condition .item:last-child { margin-bottom: 0; } .left .left-box .condition-box .condition .item .close { width: 0.25rem; height: 0.25rem; border-radius: 50%; background-color: #f5f5f5; float: left; cursor: pointer; } .left .left-box .condition-box .condition .item .close img { width: 0.2rem; height: 0.2rem; display: block; margin: 0 auto; padding-top: 0.025rem; } .left .left-box .condition-box .condition .item .text { float: left; font-size: 0.25rem; line-height: 0.25rem; color: #333333; margin-left: 0.1425rem; } .right { width: 90%; margin: 0 auto; float: none; padding-top: 0.6rem; margin-right: auto; padding-bottom: 0.9375rem; } .right .result { text-align: right; font-size: 0.25rem; line-height: 0.25rem; color: #333333; } .right .result span { font-size: 0.42rem; font-weight: bold; line-height: 0.42rem; color: #ea222d; margin-left: 0.1725rem; } .right .list { width: calc(100% + 0.2rem); margin-left: -0.1rem; margin-top: 0.1725rem; } .right .list .item { width: calc(50% - 0.2rem); margin: 0 0.1rem; height: 5rem; } .right .list .item .text { margin-top: 0.405rem; margin-left: 0.2rem; margin-right: 0.2rem; } .right .list .item .text .title { font-size: 0.25rem; font-weight: bold; line-height: 0.165rem; color: #333333; transition: 0.5s; } .right .list .item .text .p b { display: none; } .right .list .item .text .p span { font-size: 0.2rem; } .right .list .item .text .button { width: 100%; height: 0.6rem; text-align: center; margin-top: 0.3975rem; transition: 0.5s; } .right .list .item .text .button .details { float: left; width: 65%; border: solid 1px #ea222d; border-right: 0; transition: 0.5s; } .right .list .item .text .button .details a { width: 100%; height: 100%; display: block; font-size: 0.2rem; line-height: 0.6rem; color: #fff; transition: 0.5s; background-color: #ea222d; } .right .list .item .text .button .case a { width: 100%; height: 100%; display: block; font-size: 0.2rem; line-height: 0.6rem; color: #fff; transition: 0.5s; background-color: #333333; } }