* { margin: 0; padding: 0; } .clearfix:after { display: block; clear: both; height: 0; visibility: hidden; font-size: 0; line-height: 0; content: ""; } .popular-solution-case { text-align: center; } .popular-solution-case .popular-solution-midd { position: relative; display: inline-block; width: 1200px; } .popular-solution-case .popular-solution-midd .popular-solution-title { margin-bottom: 38px; font-size: 32px; font-weight: bold; text-align: left; } .popular-solution-case .popular-solution-midd .popular-solution-left { position: relative; float: left; width: 400px; height: 375px; } .popular-solution-case .popular-solution-midd .popular-solution-left .popular-solution-left-img { width: 100%; height: 100%; } .popular-solution-case .popular-solution-midd .popular-solution-left .popular-solution-left-cover { position: absolute; text-align: left; bottom: 0; height: 110px; width: 100%; background-color: rgba(0, 0, 0, .5); } .popular-solution-case .popular-solution-midd .popular-solution-left .popular-solution-left-cover .popular-solution-left-title { padding: 0 35px 0 30px; position: absolute; top: 13px; font-size: 18px; color: #fff; letter-spacing: 0; font-weight: 400; width: 466px; overflow: hidden; height: 30px; } .popular-solution-case .popular-solution-midd .popular-solution-left .popular-solution-left-cover .popular-solution-left-context { padding: 0 35px 0 30px; position: absolute; top: 45px; font-size: 14px; color: #fff; opacity: .9; letter-spacing: 0; line-height: 22px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .popular-solution-case .popular-solution-midd .popular-solution-right { float: left; width: 800px; height: 375px; } .popular-solution-case .popular-solution-midd .popular-solution-right .popular-solution-right-down-wrap { position: absolute; top: 44px; padding: 0 36px; } .popular-solution-case .popular-solution-midd .popular-solution-right .popular-solution-right-down-wrap .popular-solution-right-down-title { text-align: left; font-size: 18px; color: #252525; font-weight: 400; height: 29px; overflow: hidden; } .popular-solution-case .popular-solution-midd .popular-solution-right .popular-solution-right-down-wrap .popular-solution-right-down-context { font-size: 12px; color: #252525; opacity: .8; text-align: justify; line-height: 20px; font-weight: 400; margin-top: 6px; overflow: hidden; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .popular-solution-case .popular-solution-midd .popular-solution-right .popular-solution-right-top { position: relative; width: 100%; height: 187.5px; background-color: #9b6528; } .popular-solution-case .popular-solution-midd .popular-solution-right .popular-solution-right-top .popular-solution-right-top-img { width: 100%; height: 100%; } .popular-solution-case .popular-solution-midd .popular-solution-right .popular-solution-right-top .popular-solution-right-top-wrap { position: absolute; top: 40px; width: 440px; margin-left: 40px; } .popular-solution-case .popular-solution-midd .popular-solution-right .popular-solution-right-top .popular-solution-right-top-wrap .popular-solution-right-top-title { text-align: left; font-size: 18px; color: #fff; height: 29px; overflow: hidden; } .popular-solution-case .popular-solution-midd .popular-solution-right .popular-solution-right-top .popular-solution-right-top-wrap .popular-solution-right-top-context { text-align: left; font-size: 12px; color: #f8f8f8; opacity: .9; letter-spacing: 0; line-height: 22px; font-weight: 400; margin-top: 8px; overflow: hidden; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .popular-solution-case .popular-solution-midd .popular-solution-right .popular-solution-right-down-left { position: relative; float: left; width: 50%; height: 187.5px; } .popular-solution-case .popular-solution-midd .popular-solution-right .popular-solution-right-down-right { position: relative; float: left; width: 50%; height: 187.5px; } .popular-solution-case .popular-solution-midd .popular-solution-right .popular-solution-right-down-left .popular-solution-right-bottom-left-img { width: 100%; height: 100%; } .popular-solution-case .popular-solution-midd .popular-solution-right .popular-solution-right-down-right .popular-solution-right-bottom-right-img { width: 100%; height: 100%; } @media screen and (min-width: 1700px) { .popular-solution-case .popular-solution-midd { width: 1600px; } .popular-solution-case .popular-solution-midd .popular-solution-left { width: 534px; height: 500px; } .popular-solution-case .popular-solution-midd .popular-solution-right { width: 1066px; height: 500px; } .popular-solution-case .popular-solution-midd .popular-solution-right .popular-solution-right-top { height: 250px; } .popular-solution-case .popular-solution-midd .popular-solution-right .popular-solution-right-down-left { height: 250px; } .popular-solution-case .popular-solution-midd .popular-solution-right .popular-solution-right-down-right { height: 250px; } .popular-solution-case .popular-solution-midd .popular-solution-right .popular-solution-right-top .popular-solution-right-top-wrap{ top:70px; } .popular-solution-case .popular-solution-midd .popular-solution-right .popular-solution-right-top .popular-solution-right-top-wrap .popular-solution-right-top-title { font-size: 22px; } .popular-solution-case .popular-solution-midd .popular-solution-right .popular-solution-right-down-wrap { top: 71px; width: 440px; } .popular-solution-case .popular-solution-midd .popular-solution-right .popular-solution-right-down-wrap .popular-solution-right-down-title { font-size: 22px; } .popular-solution-case .popular-solution-midd .popular-solution-right .popular-solution-right-top .popular-solution-right-top-wrap .popular-solution-right-top-context { margin-top: 18px; font-size: 14px; } .popular-solution-case .popular-solution-midd .popular-solution-right .popular-solution-right-down-wrap .popular-solution-right-down-context { margin-top: 18px; font-size: 14px; } .popular-solution-case .popular-solution-midd .popular-solution-left .popular-solution-left-cover .popular-solution-left-title { top: 28px; font-size: 22px; } .popular-solution-case .popular-solution-midd .popular-solution-left .popular-solution-left-cover .popular-solution-left-context { top: 64px; line-height: 22px; } .popular-solution-case .popular-solution-midd .popular-solution-left .popular-solution-left-cover { height: 146px; } }
.cms_currency_layout { width: 100%; margin: 0 auto; position: relative; }
.focus-img-div { width: 100%; position: relative; overflow: hidden; z-index: 0; height: 800px; } .fi-slide-div { width: 100%; overflow: hidden; position: relative; } .fi-slide-div .fi-item { width: 100%; overflow: hidden; text-align: center; position: absolute; top: 0; font-size: 250px; z-index: 0; background-color: #fff; } .fi-slide-div .fi-item img { width: 100%; } .fi-arrow-div { position: absolute; width: 100%; z-index: 999; } .fi-arrow-div .left { position: absolute; left: 32px; opacity: 1; filter: alpha(opacity=100); cursor: pointer; } .fi-arrow-div .left:hover { opacity: 1; filter: alpha(opacity=100); } .fi-arrow-div .right { position: absolute; right: 32px; opacity: 1; filter: alpha(opacity=100); cursor: pointer; } .fi-arrow-div .right:hover { opacity: 1; filter: alpha(opacity=100); } .focus-img-div .left { position: absolute; width: 30px; height: 52px; background: url(https://p2.lefile.cn/product/adminweb/2018/11/11/2a7f8349-14f0-42e1-afe8-7ae8afd54e1e.png) no-repeat; display: none } .focus-img-div:hover .left{ display: block; } .focus-img-div .right { position: absolute; width: 30px; height: 52px; background: url(https://p2.lefile.cn/product/adminweb/2018/11/11/cae7b801-0fe6-4691-ba99-239ba9d11576.png) no-repeat; display: none; } .focus-img-div:hover .right{ display: block; } .fi-dot-div { width: 100%; overflow: hidden; text-align: center; position: absolute; bottom: 24px; z-index: 9999; height: 28px; line-height: 28px; font-size: 0; } .fi-dot-div span { display: inline-block; margin: 0 7px; width: 24px; height: 24px; text-align: center; vertical-align: middle; } .fi-dot-div span i { display: inline-block; width: 2px; height: 8px; vertical-align: middle; background: #fff; } .fi-dot-div span.selected i { border-radius: 20px; width: 20px; height: 20px; border: 2px solid #fff; vertical-align: middle; background: transparent; } .video_hold { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .video_banner { width: 100%; height: 100%; position: absolute; left: 0; top: 0; transform: scale(1.6); -moz-transform: scale(1.6); -webkit-transform: scale(1.6); -o-transform: scale(1.6); } .fi-slide-div a { display: inline-block; height: 100%; width: 100%; }