body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, 'Lucida Grande', Arial, 'Hiragino Sans GB', 'WenQuanYi Micro Hei', STHeiti, SimSun, sans-serif } h1, h2, h3, h4, h5, h6 { font-size: 100% } a { text-decoration: none; cursor: pointer } a:hover { text-decoration: none } * { box-sizing: border-box } img { max-width: 100%; height: auto; vertical-align: top; -ms-interpolation-mode: bicubic; border: 0; vertical-align: middle } i, em { font-style: normal } li { list-style: none } button, input, select, textarea { font-size: 100%; border: none; outline: none } .wrap { width: 100%; max-width: 1280px; margin: 0 auto } .clearfix:after { content: " "; display: block; height: 0px; visibility: hidden; clear: both } .clearfix { zoom: 1 } .l { float: left } .r { float: right } #LRdiv0 { display: none !important } .head { height: 95px; line-height: 95px; box-shadow: 0 0 10px rgba(30, 37, 79, 0.2); position: relative; z-index: 10 } .head ul li { float: left; width: 25% } .head ul li a { color: #3359a2; font-size: 16px; display: inline-block; transition: all .6s ease } .head ul li.active a, .head ul li:hover a { position: relative; font-weight: bold; transition: all .8s ease } .head ul li.active a:before, .head ul li:hover a:before { width: 21px; height: 6px; background: url(../images/sj_a.png) no-repeat; background-size: 100% 100%; content: ""; display: block; position: absolute; top: 20px; left: 50%; margin-left: -10.5px; opacity: 1; filter: alpha(opacity=100); -webkit-animation: slideDown .6s linear forwards; animation: slideDown .6s linear forwards } .head ul li.active a:after, .head ul li:hover a:after { width: 21px; height: 6px; background: url(../images/sj_b.png) no-repeat; background-size: 100% 100%; content: ""; display: block; position: absolute; bottom: 20px; left: 50%; margin-left: -10.5px; opacity: 0; filter: alpha(opacity=100); -webkit-animation: slideUp .6s linear forwards; animation: slideUp .6s linear forwards } @-webkit-keyframes slideUp { 0% { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(50%); transform: translateY(50%) } 100% { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes slideUp { 0% { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(50%); transform: translateY(50%) } 100% { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); transform: translateY(0) } } @-webkit-keyframes slideDown { 0% { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(-100%); transform: translateY(-100%) } 100% { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes slideDown { 0% { opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(-100%); transform: translateY(-100%) } 100% { opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); transform: translateY(0) } } .head .u1 { float: left; overflow: hidden; width: 45% } .head .u1 li { text-align: left } .head .u2 { float: right; width: 45%; overflow: hidden } .head .u2 li { text-align: right } .head .u2 li.online a { color: #fff; font-size: 14px; background: #3359a2; border-radius: 10px; line-height: 38px; padding: 0 10px; display: inline-block } .head .u2 li.online:hover a { font-weight: normal } .head .u2 li.online a:before, .head .u2 li.online a:after { display: none } .head .logo { width: 10%; text-align: center; position: absolute; left: 0; right: 0; margin: 0 auto } .head .logo a { display: block } .head .navbtn { display: none } .index-top { position: relative; background: #3359a2 } .index-top:before { width: 100%; height: 487px; background: url(../images/by.png) no-repeat center; background-size: 100% 100%; content: ""; display: block; position: absolute; top: 0 } .index-top .top-box { padding: 80px 0; position: relative; z-index: 1 } .index-top .pro-img { float: left; width: 50% } .index-top .pro-img p { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; font-size: 16px; color: #dedede; overflow: hidden; font-weight: bold } .index-top .pro-img p a { display: inline-block; vertical-align: middle; font-size: 16px; color: #dedede; text-decoration: underline; font-style: normal } .index-top .pro-img p a:hover { color: #ffbe62 } .index-top .pro-xq { float: left; width: 50%; padding-left: 3%; margin-top: 15px } .index-top .pro-xq h1 { font-size: 42px; color: #3359a2 } .index-top .pro-xq .cs-ul { overflow: hidden; margin-top: 30px } .index-top .pro-xq .cs-ul li { float: left; border: 4px solid #3359a2; border-radius: 40px; width: 47.5%; margin-left: 5%; text-align: center; padding: 6px 0 } .index-top .pro-xq .cs-ul li:first-child { margin-left: 0 } .index-top .pro-xq .cs-ul li p { font-size: 14px; color: #666 } .index-top .pro-xq .cs-ul li strong { display: block; font-size: 20px; color: #c86547 } .index-top .pro-xq .text { font-size: 18px; color: #666; margin-top: 35px; margin-bottom: 10px } .index-top .pro-xq .wl-pic { background: #3359a2; padding: 12px 20px 20px } .index-top .pro-xq .wl-pic ul { overflow: hidden; font-size: 0 } .index-top .pro-xq .wl-pic ul li:first-child { margin-left: 0 } .index-top .pro-xq .wl-pic ul li { display: inline-block; vertical-align: bottom; text-align: center; width: 18%; margin-left: 2.5% } .index-top .pro-xq .wl-pic ul li p { font-size: 12px; color: #d9d9d9; margin-bottom: 12px; text-transform: uppercase } .index-top .pro-xq .wl-pic ul li img { display: block; width: 100% } .index-top .pro-xq .wl-pic ul li i { display: block; background: url(../images/xsj.png) no-repeat; width: 10px; height: 7px; background-size: 100% 100%; margin: 7.5px auto } .index-top .pro-xq .lt-swt { overflow: hidden; margin-top: 25px } .index-top .pro-xq .lt-swt a:first-child { margin-left: 0 } .index-top .pro-xq .lt-swt a { float: left; width: 47.5%; margin-left: 5%; font-size: 16px; text-align: center; border-radius: 10px; display: block; height: 55px } .index-top .pro-xq .lt-swt .one { color: #7fa7e3; border: 2px solid #7fa7e3; line-height: 51px; position: relative; z-index: 1; overflow: hidden; transition: color 0.4s ease-in-out } .index-top .pro-xq .lt-swt .one:before { content: ""; z-index: -1; position: absolute; bottom: 100%; right: 100%; width: 4em; height: 1em; border-radius: 50%; background-color: #7fa7e3; -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translate3d(50%, 50%, 0) scale3d(0, 0, 0); transform: translate3d(50%, 50%, 0) scale3d(0, 0, 0); transition: -webkit-transform .45s ease-in-out; transition: transform .45s ease-in-out; transition: transform .45s ease-in-out, -webkit-transform .45s ease-in-out } .index-top .pro-xq .lt-swt .one:hover { cursor: pointer; color: #fff } .index-top .pro-xq .lt-swt .one:hover::before { transform: translate3d(50%, 50%, 0) scale3d(15, 15, 15) } .index-top .pro-xq .lt-swt .two { border: 2px solid #7fa7e3; color: #fff; line-height: 50px; position: relative; z-index: 1; overflow: hidden } .index-top .pro-xq .lt-swt .two:before { content: ""; z-index: -1; position: absolute; bottom: 100%; right: 100%; width: 4em; height: 1em; border-radius: 50%; background-color: #7fa7e3; -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translate3d(50%, 50%, 0) scale3d(15, 15, 15); transform: translate3d(50%, 50%, 0) scale3d(15, 15, 15); transition: -webkit-transform .45s ease-in-out; transition: transform .45s ease-in-out; transition: transform .45s ease-in-out, -webkit-transform .45s ease-in-out } .index-top .pro-xq .lt-swt .two:hover:before { transform: translate3d(50%, 50%, 0) scale3d(0, 0, 0) } .index-top .pro-xq .lt-swt .two i { display: block; position: absolute; right: 30px; top: 50%; margin-top: -6px; transition: 0.25s ease-in-out } .index-top .pro-xq .lt-swt .two:hover i { right: 20px; transition: 0.25s ease-in-out } .index-top .pro-xq .lt-swt .two i:after { width: 26px; height: 15px; background: url(../images/rjt.png) no-repeat; background-size: 100% 100%; content: ""; display: block } .index-top .swt-dh { position: fixed; top: 83%; left: 37px; background: #6070b4; border: 2px solid #fff; border-radius: 10px; box-shadow: 0 0 30px rgba(4, 0, 118, 0.2); z-index: 10; display: none } .index-top .swt-dh a { width: 250px; height: 58px; line-height: 58px; text-align: center; color: #fff; font-size: 16px; font-weight: bold; display: block; position: relative; padding-right: 40px; z-index: 1; overflow: hidden } .index-top .swt-dh a:before { content: ''; z-index: -1; background: rgba(255, 255, 255, 0.3); position: absolute; top: -50%; bottom: -50%; width: 1.25em; transform: translate3d(-525%, 0, 0) rotate(35deg) } .index-top .swt-dh a:hover:before { transition: 0.45s ease-in-out; transform: translate3d(900%, 0, 0) rotate(35deg) } .index-top .swt-dh a:after { background: url(../images/ly_xx.png) no-repeat; background-size: 100% 100%; width: 31px; height: 28px; content: ""; display: block; position: absolute; right: 35px; top: 50%; margin-top: -14px } .pop-video { position: fixed; width: 100%; height: 100%; left: 0; top: -150%; transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; z-index: 9999; opacity: 0; filter: alpha(opacity=0) } .pop-video .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4) } .pop-video .close { position: absolute; right: 35px; top: 20px; width: 43px; height: 43px; background: url(../images/close.png) center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; cursor: pointer } .pop-video video { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); max-width: 90% } .pop-video.open { top: 0; opacity: 1; filter: alpha(opacity=100) } .pop-video .message { border-top: 8px solid #c86547; background: #fff; position: relative; z-index: 5; top: 20%; width: 1000px; left: 50%; margin-left: -500px; padding: 25px 160px 40px } .pop-video .message strong { font-size: 28px; color: #3e4874; text-transform: uppercase; line-height: 48px } .pop-video .message span { font-size: 16px; color: #c86547; display: block; background: #f4f4ff; border-radius: 30px; height: 48px; line-height: 48px; width: 200px; text-align: center; float: right; margin-right: 25% } .ball-mill { margin-top: 120px } .ball-mill .mill-left { float: left; width: 50% } .ball-mill .mill-left strong { font-size: 24px; color: #333; position: relative; padding-left: 55px; display: block; margin-bottom: 13px } .ball-mill .mill-left strong:before { width: 42px; height: 31px; background: url(../images/str_qmj.png) no-repeat; background-size: 100% 100%; content: ""; display: block; position: absolute; left: 0; top: 50%; margin-top: -16px } .ball-mill .mill-left p { font-size: 16px; color: #666; line-height: 2; margin-bottom: 10px } .ball-mill .mill-left li { font-size: 16px; color: #666; line-height: 1.75; border-bottom: 1px solid #eee; padding: 10px 0 } .ball-mill .mill-left li:last-child { border: none } .ball-mill .mill-left li img { margin-right: 15px } .ball-mill .mill-left .video_swt { max-width: 100%; width: 620px; margin-top: 20px; padding: 14px 64px 14px 17px; background-image: url(../images/icon_video2.png); background-repeat: no-repeat; background-position: right 17px center; background-size: 31px; border: 1px solid #3359a2; border-radius: 10px; font-size: 16px; color: #3359a2; line-height: 1.2; text-align: center; transition: all linear 0.4s; cursor: pointer } .ball-mill .mill-right { float: right; width: 48%; text-align: center } .ball-mill .mill-right p { margin-top: -20px } .ball-mill .mill-right p .pic { width: 32px; vertical-align: middle; margin-top: -5px; margin-right: 15px; -webkit-transform: rotate(360deg); animation: rotation 3s linear infinite; -moz-animation: rotation 3s linear infinite; -webkit-animation: rotation 3s linear infinite; -o-animation: rotation 3s linear infinite } .ball-mill .mill-right video { width: 100%; height: auto; display: block } .ball-mill .mill-right p span { font-size: 16px; color: #3e4874 } .ball-mill .mill-right .video_swt { display: none } @-webkit-keyframes rotation { from { -webkit-transform: rotate(360deg) } to { -webkit-transform: rotate(0deg) } } .index-case { background: #f5f5f5; padding: 75px 0 85px; margin-top: 80px } .index-case h2 { position: relative; text-align: center } .index-case h2:after { background: url(../images/h2_bg.png) no-repeat; background-size: 100% 100%; width: 66px; height: 6px; content: ""; display: block; position: absolute; left: 50%; margin-left: -33px; bottom: -10px } .index-case h2 strong { font-size: 24px; color: #282828; position: relative } .index-case h2 strong:before { width: 300px; height: 1px; background: #365993; position: absolute; right: 120%; top: 50%; margin-top: .5px; content: ""; display: block } .index-case h2 strong:after { width: 300px; height: 1px; background: #365993; position: absolute; left: 120%; top: 50%; margin-top: .5px; content: ""; display: block } .index-case ul { margin-top: 50px } .index-case ul li:first-child { margin-left: 0 } .index-case ul li { float: left; width: 31.33%; margin-left: 3% } .index-case ul li .tx-pic { width: 68px; height: 68px } .index-case ul li .tx-pic img { width: 100%; border-radius: 50% } .index-case ul li .box { background: #fff; padding-top: 35px; margin-top: -30px; padding-bottom: 30px } .index-case ul li .box .text { font-size: 16px; color: #666; line-height: 1.6em; height: 125px; text-indent: 2em; margin-bottom: 25px; padding: 0 20px } .index-case ul li .box .pic { display: block; position: relative; overflow: hidden; padding-top: 66.75% } .index-case ul li .box .pic img { position: absolute; left: 0; top: 0; width: 100%; height: auto } .index-case .box .pic .text-desc { top: -100%; transition: 0.5s; position: absolute; left: 0; background-color: #3359a2; height: 100%; width: 100%; padding: 60px 20px 0; overflow: hidden } .index-case .box:hover .text-desc { top: 0 } .index-case .box .pic .text-desc p { color: #fff; font-size: 16px; line-height: 1.75em; text-indent: 2em; position: relative } .index-case .box .pic .text-desc p:before { position: absolute; top: -20px; left: 50%; margin-left: -42.5px; width: 85px; height: 5px; background: #fff; content: ""; display: block } .index-case ul li .box h3 { padding: 0 20px; height: 42px; overflow: hidden; margin-top: 20px; font-size: 16px; color: #c86547 } .index-case ul li .box .case-cs { padding: 0 20px; margin-top: 15px } .index-case ul li .box .case-cs p { font-size: 14px; color: #666; margin-bottom: 12px } .index-case ul li .box .case-cs p strong { font-size: 14px; color: #282828 } .index-case ul li .look-dj { text-align: center; margin-top: 25px } .index-case ul li .look-dj a { display: inline-block; border: 1px solid #3359a2; border-radius: 10px; height: 56px; line-height: 56px; color: #3359a2; font-size: 16px; font-weight: bold; padding: 0 23%; position: relative; overflow: hidden; transition: color 0.4s ease-in-out; z-index: 1 } .index-case ul li .look-dj a:before { content: ''; z-index: -1; position: absolute; top: 50%; left: 50%; width: .6em; height: 2em; border-radius: 50%; background-color: #3359a2; transform-origin: center; transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0); transition: transform 0.45s ease-in-out } .index-case ul li .look-dj a:hover { cursor: pointer; color: #fff } .index-case ul li .look-dj a:hover::before { transform: translate3d(-50%, -50%, 0) scale3d(15, 15, 15) } .index-case ul li .look-dj a:after { width: 26px; height: 15px; background: url(../images/rjt2.png) no-repeat; background-size: 100% 100%; content: ""; display: block; position: absolute; right: 12%; top: 50%; margin-top: -6px } .index-about { background: url(../images/abt_bg.jpg) no-repeat; background-size: 100% 100%; width: 100%; position: relative } .index-about .abt-left { width: 50%; padding: 5% 3% 5% 0 } .index-about .abt-left strong { font-size: 24px; color: #fff; position: relative } .index-about .abt-left strong:before { background: #c86547; width: 60px; height: 5px; content: ""; display: block; position: absolute; bottom: -18px; left: 0 } .index-about .abt-left ul { margin-top: 35px } .index-about .abt-left li { font-size: 16px; color: #fff; line-height: 1.75; margin-bottom: 13px } .index-about .abt-right { width: 50%; position: absolute; right: 0; top: 0; bottom: 0 } .index-about .abt-right img { width: 100%; height: 100%; object-fit: cover } .index-sev { margin-top: 95px } .index-sev h2 { position: relative; text-align: center } .index-sev h2:after { background: url(../images/h2_bg.png) no-repeat; background-size: 100% 100%; width: 66px; height: 6px; content: ""; display: block; position: absolute; left: 50%; margin-left: -33px; bottom: -10px } .index-sev h2 strong { font-size: 24px; color: #282828; position: relative } .index-sev h2 strong:before { width: 300px; height: 1px; background: #5664a1; position: absolute; right: 120%; top: 50%; margin-top: .5px; content: ""; display: block } .index-sev h2 strong:after { width: 300px; height: 1px; background: #5664a1; position: absolute; left: 120%; top: 50%; margin-top: .5px; content: ""; display: block } .index-sev .tit { text-align: center; font-size: 16px; color: #666; margin-top: 40px } .index-sev .tit span { color: #c86547; font-size: 16px; font-weight: bold } .index-sev ul { margin-top: 40px } .index-sev ul li { float: left; width: 25%; text-align: center } .index-sev ul li img { max-width: 222px; border-radius: 50% } .index-sev ul li strong { display: block; font-size: 22px; color: #3359a2; font-weight: bold; margin-top: 18px } .index-sev ul li p { font-size: 16px; color: #666; font-weight: bold; padding: 0 23%; line-height: 1.5em } .index-sev .sev-dj { width: 360px; height: 56px; line-height: 56px; margin: 45px auto 0; text-align: center; display: block; background: #3359a2; font-size: 16px; color: #fff; font-weight: bold; position: relative; border-radius: 10px; z-index: 1 } .index-sev .sev-dj:before { content: ''; z-index: -1; background: rgba(255, 255, 255, 0.3); position: absolute; top: -50%; bottom: -50%; width: 1.25em; transform: translate3d(-1000%, 0, 0) rotate(35deg); opacity: 0.5 } .index-sev .sev-dj:hover:before { transition: transform 0.45s ease-in-out; transform: translate3d(1500%, 0, 0) rotate(35deg) } .index-sev .sev-dj:after { width: 26px; height: 15px; background: url(../images/rjt.png) no-repeat; background-size: 100% 100%; content: ""; display: block; position: absolute; right: 30px; top: 50%; margin-top: -6px; transition: 0.45s ease-in-out } .index-sev .sev-dj:hover:after { right: 50px; transition: 0.45s ease-in-out } .index-price { margin-top: 180px } .index-price .price-left { float: left; width: 50%; margin-top: 15px } .index-price .price-left h2 { position: relative; text-align: center } .index-price .price-left h2:after { background: url(../images/h2_bg.png) no-repeat; background-size: 100% 100%; width: 66px; height: 6px; content: ""; display: block; position: absolute; left: 50%; margin-left: -33px; bottom: -10px } .index-price .price-left h2 strong { font-size: 24px; color: #282828; position: relative } .index-price .price-left h2 strong:before { width: 200px; height: 1px; background: #5664a1; position: absolute; right: 120%; top: 50%; margin-top: .5px; content: ""; display: block } .index-price .price-left h2 strong:after { width: 200px; height: 1px; background: #5664a1; position: absolute; left: 120%; top: 50%; margin-top: .5px; content: ""; display: block } .index-price .price-left .tit { text-align: center; font-size: 16px; color: #666; margin-top: 20px } .index-price .price-left .tit span { color: #c86547; font-size: 16px; font-weight: bold } .index-price .price-left .price-box { text-align: center; margin-top: 55px; padding: 0 7% } .index-price .price-left .price-box .str { font-size: 20px; color: #3359a2; line-height: 1.1em } .index-price .price-left .price-box p { font-size: 16px; line-height: 1.75; color: #999; margin-top: 20px; padding: 0 16% } .index-price .price-left .price-dj { width: 360px; height: 56px; line-height: 56px; text-align: center; position: relative; background: #3359a2; font-size: 16px; color: #fff; font-weight: bold; display: block; border-radius: 10px; margin: 98px auto 0; z-index: 1 } .index-price .price-left .price-dj:before { content: ''; z-index: -1; background: rgba(255, 255, 255, 0.3); position: absolute; top: -50%; bottom: -50%; width: 1.25em; transform: translate3d(-800%, 0, 0) rotate(35deg); opacity: 0.5 } .index-price .price-left .price-dj:hover::before { transition: transform 0.45s ease-in-out; transform: translate3d(1500%, 0, 0) rotate(35deg) } .index-price .price-left .price-dj:after { width: 26px; height: 15px; background: url(../images/rjt.png) no-repeat; background-size: 100% 100%; content: ""; display: block; position: absolute; right: 30px; top: 50%; margin-top: -6px } .index-price .price-right { float: left; width: 50%; text-align: right } .index-fote { margin-top: 128px } .index-fote h2 { position: relative; text-align: center } .index-fote h2:after { background: url(../images/h2_bg.png) no-repeat; background-size: 100% 100%; width: 66px; height: 6px; content: ""; display: block; position: absolute; left: 50%; margin-left: -33px; bottom: -10px } .index-fote h2 strong { font-size: 24px; color: #282828; position: relative } .index-fote h2 strong:before { width: 300px; height: 1px; background: #5664a1; position: absolute; right: 120%; top: 50%; margin-top: .5px; content: ""; display: block } .index-fote h2 strong:after { width: 300px; height: 1px; background: #5664a1; position: absolute; left: 120%; top: 50%; margin-top: .5px; content: ""; display: block } .index-fote ul { margin-top: 55px } .index-fote ul li:first-child { margin-left: 0 } .index-fote ul li { float: left; width: 23.5%; margin-left: 2% } .index-fote ul li .box { box-shadow: 0 0 20px rgba(94, 88, 246, 0.2); border-radius: 20px; text-align: center; padding: 45px 0 47px; margin-bottom: 48px; position: relative } .index-fote ul li .box:after { position: absolute; bottom: -36px; left: 20px; background: #c86547; width: 38px; height: 6px; border-radius: 5px; content: ""; display: block } .index-fote ul li .box img { width: 83px } .index-fote ul li .box strong { font-size: 18px; color: #3359a2; display: block; margin-top: 25px } .index-fote ul li p { font-size: 16px; color: #737491; line-height: 2em; padding-left: 20px } .index-fote ul li p span { font-weight: bold } .pro-data { background: #f7f7f7; text-align: center; padding: 60px 0 80px; margin-top: 90px } .pro-data h2 { font-size: 24px; color: #3359a2 } .pro-data .data-tab .tab { overflow: hidden; border-radius: 10px; background: #dfe0e6; display: inline-block; margin: 28px auto 26px } .pro-data .data-tab .tab li { display: inline-block; height: 52px; line-height: 52px; padding: 0 65px; font-size: 16px; color: #3359a2; cursor: pointer } .pro-data .data-tab .tab li.cur { color: #fff; background: #3359a2; font-weight: bold; border-radius: 10px } .pro-data .data-tab .list { display: none } .pro-data .data-tab .list table { border-collapse: collapse } .pro-data .data-tab .list table td { padding: 10px 5px; border: 1px solid #ddd; color: #737491; font-size: 14px } .pro-data .data-tab .on { display: block } .foot-mesg { background: url(../images/mesg_bg.png) no-repeat center; background-size: 100% 100%; width: 100%; padding: 80px 0 } .foot-mesg .mesg-left { float: left; width: 50%; text-align: center; padding: 0 3%; margin-top: 55px } .foot-mesg .mesg-left strong { font-size: 36px; color: #fff } .foot-mesg .mesg-left .tit { font-size: 14px; color: #dedede } .foot-mesg .mesg-left .box { margin-top: 48px } .foot-mesg .mesg-left .box p { font-size: 16px; color: #fff; line-height: 1.4em } .foot-mesg .mesg-left .box .last { padding: 0 5%; margin-top: 15px } .foot-mesg .mesg-left .yx-dj { width: 300px; height: 64px; line-height: 64px; display: block; margin: 107px auto 0; text-align: center; background: #7fa7e3; font-size: 18px; font-weight: bold; color: #fff; text-decoration: underline; border-radius: 10px; position: relative; padding-left: 70px; z-index: 1 } .foot-mesg .mesg-left .yx-dj:hover { animation: jelly 0.5s } @keyframes jelly { 0%, 100% { transform: scale(1, 1) } 25% { transform: scale(0.9, 1.1) } 50% { transform: scale(1.1, 0.9) } 75% { transform: scale(0.95, 1.05) } } .foot-mesg .mesg-left .yx-dj:before { width: 50px; height: 34px; background: url(../images/xf.png) no-repeat; background-size: 100% 100%; content: ""; display: block; position: absolute; left: 25px; top: 50%; margin-top: -17px } .foot-mesg .mesg-right { float: right; width: 47%; padding: 25px 60px 40px; background: #fff; border-top: 8px solid #c86547 } .foot-mesg .mesg-right strong { font-size: 28px; color: #3e4874; text-transform: uppercase; line-height: 48px } .foot-mesg .mesg-right span { font-size: 16px; color: #c86547; display: block; background: #f4f4ff; border-radius: 30px; height: 48px; line-height: 48px; width: 200px; text-align: center; float: right } .message { margin-top: 3px } .message li { border-bottom: 1px solid #d7d7ff; padding: 30px 0 10px 45px; position: relative } .message li:before { position: absolute; left: 12px; top: 50%; content: ""; display: block } .message li.icon-name:before { background: url(../images/rw.png) no-repeat; background-size: 100% 100%; width: 14px; height: 15px; margin-top: 2px } .message li.icon-email:before { background: url(../images/yx.png) no-repeat; background-size: 100% 100%; width: 16px; height: 13px; margin-top: 5px } .message li.icon-tel:before { background: url(../images/dh.png) no-repeat; background-size: 100% 100%; width: 16px; height: 16px; margin-top: 2px } .message li.icon-email::after { content: "*"; font-size: 18px; color: red; position: absolute; left: -2px; bottom: 8px } .message li input { font-size: 16px; color: #6082b9; height: 30px; width: 100% } input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset } .message li textarea { height: 120px; width: 100%; background: #f7f7f7; font-size: 16px; line-height: 1.5em; color: #6082b9; resize: none; padding: 20px 30px 20px 45px } .message li.last { border: none; padding: 25px 0 } .message li.last:before { background: url(../images/sx.png) no-repeat; background-size: 100% 100%; width: 16px; height: 16px; margin-top: 2px; position: absolute; left: 12px; top: 50px; content: ""; display: block } .message button { border: none; background: #ff511c; width: 280px; height: 56px; line-height: 56px; color: #fff; font-size: 16px; border-radius: 10px; box-shadow: 0 0 20px rgba(94, 88, 246, 0.3); display: block; margin: 0 auto; position: relative; z-index: 1; cursor: pointer } .message button:before { content: ''; z-index: -1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #d13708; transform-origin: center top; transform: scaleY(0); transition: 0.25s ease-in-out; border-radius: 10px } .message button:hover::before { transform-origin: center bottom; transform: scaleY(1) } .message button:after { width: 21px; height: 19px; background: url(../images/zfj.png) no-repeat; background-size: 100% 100%; content: ""; display: block; position: absolute; top: 50%; margin-top: -10px; right: 50px } .message li textarea::-webkit-input-placeholder { color: #6082b9 } .message li textarea::-moz-placeholder { color: #6082b9 } .message li textarea:-moz-placeholder { color: #6082b9 } .message li textarea:-ms-input-placeholder { color: #6082b9 } .foot { background: #12316b; height: 60px; line-height: 60px; text-align: center } .foot p { font-size: 14px; color: #dbdaff } .fdftm { position: fixed; width: 130px; right: 10px; top: 50%; transform: translateY(-50%); z-index: 999 } .fdftm .fdftmtop { clear: both; position: relative; margin: 0px 0px } .fdftm .fdftmtop .fdftmtoppic { clear: both; width: 100%; position: relative; z-index: 3 } .fdftm .fdftmtop .fdftmtoppic span { position: absolute; left: -81px; top: 42px; animation: widthmove 4s linear infinite; width: 100px; overflow: hidden } .fdftm .fdftmtop .fdftmtoppic span i { font-style: normal; width: 100px; height: 45px; background: url(../images/fdicon01.png) no-repeat center top; display: block; font-size: 14px; line-height: 16px; color: #5b689b; padding: 7px 15px 0px 9px } .nowebp .fdftm .fdftmtop .fdftmtoppic span i { background-image: url(../images/fdicon01.png) } .fdftm .fdftmbom { clear: both; width: 100% } .fdftm .fdftmbom .fdftmboma01, .fdftm .fdftmbom .fdftmboma02 { clear: both; width: 100%; display: block; position: relative; z-index: 5; padding: 8px 0 6px; font-size: 18px; color: #ffffff; line-height: 1.4; text-align: center; cursor: pointer } .fdftm .fdftmbom .fdftmboma01 { background: #3359a2 } .fdftm .fdftmbom .fdftmboma02 { background: #12316b } .footer-fl { display: none } .footer-fl ul { width: 91%; background: #fff; border-radius: .13333rem .13333rem .4rem .4rem; box-shadow: 0 0 .24rem #71aee1; position: fixed; left: 50%; bottom: .26667rem; z-index: 9999; transform: translate(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); padding: .2rem 0rem } .footer-fl ul li { float: left; width: 50% } .footer-fl ul li a { font-size: .37333rem; color: #121c29; font-weight: bold; line-height: .86667rem; text-align: center; display: block } .footer-fl ul li img { width: .77333rem; margin-right: .13333rem } @media (min-width: 1600px) { .fdftm .fdftmbom span { font-size: 14px } } @keyframes widthmove { 0%, 50% { width: 0px; left: 0px } 60%, 100% { width: 100px; left: -81px } } @-webkit-keyframes widthmove { 0%, 50% { width: 0px; left: 0px } 60%, 100% { width: 100px; left: -81px } } #gotoTop { width: 59px; height: 59px; z-index: 9999; bottom: 50px; background: url(../images/icon_mtop.jpg) no-repeat; background-size: 100% 100%; right: 30px; cursor: pointer; position: fixed; border-radius: 50%; box-shadow: 0 0 20px rgba(43, 75, 128, 0.4) } @media screen and (max-width: 1599px) { .index-about .abt-left { margin-top: 50px } .index-top .swt-dh a { height: 48px; line-height: 48px } .index-top .swt-dh a:after { width: 27px; height: 24px; margin-top: -12px } } @media screen and (max-width: 1287px) { .wrap { max-width: 1100px } .index-top .pro-img p, .index-top .pro-img p a { font-size: 14px } .index-top .pro-xq h1 { font-size: 32px } .index-top .pro-xq .cs-ul { margin-top: 15px } .index-top .pro-xq .text { margin-top: 18px } .index-top .pro-xq .lt-swt .two i { right: 18px } .ball-mill .mill-left p, .ball-mill .mill-left li { font-size: 14px } .index-case ul li .box .text { height: 110px; font-size: 14px } .index-case ul li .box .text { height: 110px } .index-about .abt-left { margin-top: 35px } .index-about .abt-left li { font-size: 14px } .foot-mesg .mesg-right { padding: 25px 30px 40px } .ball-mill .mill-left .video_swt { margin-top: 15px; padding-top: 12px; padding-bottom: 12px; background-size: 29px; font-size: 15px } } @media screen and (max-width: 1199px) { .wrap { max-width: 960px } .index-top .pro-xq { margin-top: 0 } .index-top .pro-xq h1 { font-size: 28px } .index-top .pro-xq .cs-ul li strong { font-size: 18px } .index-top .pro-xq .cs-ul li { border: 2px solid #49537c; padding: 4px 0 } .index-top .pro-xq { padding-left: 2% } .index-top .pro-xq .text { margin-top: 10px } .index-top .pro-img p, .index-top .pro-img p a { font-size: 13px } .index-top .pro-xq .lt-swt a { font-size: 14px; height: 48px; line-height: 48px !important } .index-top .pro-img p { margin-top: 26px } .ball-mill .mill-left li { font-size: 12px } .ball-mill .mill-left p { margin-bottom: 20px } .index-case ul li .box .text { height: 135px } .index-case .box .pic .text-desc p { font-size: 14px } .index-about .abt-left { margin-top: 15px } .index-about .abt-left strong { font-size: 20px } .index-sev ul li p { padding: 0 20% } .index-sev .sev-dj { width: 280px } .index-price { margin-top: 100px } .index-price .price-left h2 strong:before, .index-price .price-left h2 strong:after { width: 70px } .index-price .price-left .price-dj { width: 325px; margin-top: 40px } .index-price .price-left .price-box p { padding: 0 } .foot-mesg .mesg-right { padding: 25px 20px 40px } .foot-mesg .mesg-right strong { font-size: 22px } .foot-mesg .mesg-right span { width: 150px } } #p-name, #p-name2 { font-size: 16px; color: #df322a; margin-top: 15px; display: none } @media screen and (max-width: 960px) { .wrap { max-width: 750px; padding: 0 .4rem } .head { height: 1.33333rem; line-height: 1.33333rem; box-shadow: 0 0 0.26667rem rgba(30, 37, 79, 0.2) } .head .wrap { position: relative } .head img { width: 100% } .head .logo { width: 1.86667rem; position: relative; left: 0; margin: 0; float: left } .head .nav { width: 2.7rem; background: #fff; padding: .2rem 0; position: absolute; right: 0.12rem; top: 1.4rem; border-radius: .1333rem; z-index: 99999; box-shadow: 0 0.04rem 0.26667rem rgba(26, 43, 73, 0.1); overflow: visible; display: none } .head .nav:before { content: ""; width: 0; border-bottom: .2667rem solid #fff; border-right: .2667rem solid transparent; border-left: .2667rem solid transparent; position: absolute; top: -.24rem; right: .36rem } .head .nav ul { width: 100%; float: none } .head .nav ul li { width: 100%; float: none; text-align: center } .head .nav ul li a { font-size: .4rem; line-height: 0.72rem; display: block } .head .u2 .online { display: none } .head .navbtn { width: .69333rem; display: block; float: right } .head ul li.active a:before, .head ul li.active a::after { display: none } .index-top { position: relative; background: #3e4874 } .index-top:before { height: 88%; top: -.02667rem } .index-top .top-box { padding: 0.5rem 0 1rem } .index-top .pro-img { float: none; width: 100% } .index-top .pro-img img { width: 100%; display: block } .index-top .pro-img p { display: none } .index-top .pro-xq { float: none; width: 100%; padding: 0; margin-top: .53333rem } .index-top .pro-xq h1 { font-size: .69333rem } .index-top .pro-xq .cs-ul { overflow: hidden; margin-top: .48rem } .index-top .pro-xq .cs-ul li { border: .05333rem solid #49537c; border-radius: 1.33333rem; padding: .12rem 0 .16rem } .index-top .pro-xq .cs-ul li p { font-size: .4rem } .index-top .pro-xq .cs-ul li strong { font-size: .45333rem } .index-top .pro-xq .text { font-size: .4rem; margin-top: .48rem; margin-bottom: .32rem } .index-top .pro-xq .wl-pic { padding: .12rem .4rem .4rem } .index-top .pro-xq .wl-pic ul { width: 103%; position: relative; left: -3% } .index-top .pro-xq .wl-pic ul li { text-align: center; width: 22%; margin-left: 3%; margin-top: .28rem; max-width: 100%; overflow: hidden } .index-top .pro-xq .wl-pic ul li:first-child { margin-left: 3% } .index-top .pro-xq .wl-pic ul li:nth-child(3) { display: none } .index-top .pro-xq .wl-pic ul li p { font-size: .36rem; margin-bottom: .28rem } .index-top .pro-xq .wl-pic ul li img { display: block; width: 100% } .index-top .pro-xq .lt-swt { overflow: hidden; margin-top: .6rem } .index-top .pro-xq .lt-swt a { width: 48.5%; height: 1.2rem; border: .02667rem solid #697ac5; border-radius: .13333rem; margin-left: 3%; font-size: .44rem; line-height: 1.17333rem !important } .index-top .pro-xq .lt-swt .two i { height: 100%; position: relative; display: inline-block; vertical-align: top; right: 0; top: auto; bottom: 0; margin: 0 0 0 .16rem; display: none } .index-top .pro-xq .lt-swt .two i:after { width: .48rem; background-position: center; background-size: 100%; height: 100% } .ball-mill { margin-top: 1rem } .ball-mill .clearfix{ position: relative; padding-bottom: 1.8rem; } .ball-mill .mill-left { float: none; width: 100% } .ball-mill .mill-left strong { font-size: .6rem; padding-left: .88rem; margin-bottom: .32rem } .ball-mill .mill-left strong:before { width: .74667rem; height: .58667rem; background-size: 100%; margin-top: -.29333rem } .ball-mill .mill-left p { font-size: .4rem; line-height: 1.75 } .ball-mill .mill-left li { font-size: .4rem; margin-top: .4rem } .ball-mill .mill-left li span { font-size: .44rem; margin-bottom: .16rem } .ball-mill .mill-left .video_swt { display: block; position: absolute; left: 0; right: 0; bottom: 0; margin-top: .66667rem; padding: .26667rem .2rem; padding-right: 1.13333rem; background-position: right .32rem center; background-size: .66667rem; font-size: .36rem } .ball-mill .mill-right { float: none; width: 100%; text-align: center; margin-top: .74667rem } .ball-mill .mill-right img { width: 100%; display: block } .index-case { padding: 1rem 0; margin-top: 1rem } .index-case h2:after { width: 1.76rem; height: .16rem; left: 50%; margin-left: -.88rem; bottom: -.4rem } .index-case h2 strong { font-size: .6rem } .index-case h2 strong:before, .index-case h2 strong::after { display: none } .index-case ul { margin-top: 1.2rem } .index-case ul li { width: 100%; margin-left: 0 } .index-case ul li+li { margin-top: .48rem } .index-case ul li .tx-pic, .index-case ul li .box .text, .index-case .box .pic .text-desc { display: none } .index-case ul li .box { padding-top: 0; margin-top: 0 } .index-case ul li .box h3 { height: auto; font-size: .48rem; line-height: 1.4; margin: .48rem 0; padding: 0 .4rem } .index-case ul li .box .case-cs { padding: 0 .4rem } .index-case ul li .box .case-cs p { font-size: .4rem; margin-top: .32rem } .index-case ul li .box .case-cs p strong { font-size: .4rem } .index-case ul li .look-dj { width: 60%; height: 1.17333rem; margin: .64rem auto 0 } .index-case ul li .look-dj a { width: 100%; height: 100%; padding: 0; font-size: .53333rem; line-height: 1.14667rem } .index-case ul li .look-dj a:after { width: .53333rem; height: 100%; background-position: center; background-size: 100% auto; display: inline-block; vertical-align: bottom; margin-left: .18667rem; position: relative; right: 0; top: 0; margin-top: 0 } .index-about { padding: 1rem 0 } .index-about .abt-left { float: none; width: 100%; margin-top: 0 } .index-about .abt-left strong { font-size: .6rem } .index-about .abt-left strong:before { width: 1.06667rem; height: .08rem; bottom: -.36rem } .index-about .abt-left ul { margin-top: 1rem } .index-about .abt-left li { font-size: .4rem; line-height: 1.75; margin-bottom: .4rem } .index-about .abt-right { position: static; width: 100%; padding: 0 .4rem; margin: .6rem auto 0 } .index-about .abt-right img { width: 100% } .index-sev { margin-top: 1rem } .index-sev h2:after { width: 1.76rem; height: .16rem; left: 50%; margin-left: -.88rem; bottom: -.4rem } .index-sev h2 strong { font-size: .6rem } .index-sev h2 strong:before, .index-sev h2 strong:after { display: none } .index-sev .tit { font-size: .4rem; line-height: 1.75; margin-top: 1rem } .index-sev .tit span { font-size: .4rem } .index-sev ul { margin-top: .24rem } .index-sev ul li { width: 50%; margin-top: .48rem } .index-sev ul li img { max-width: 2.96rem } .index-sev ul li strong { font-size: .48rem; margin-top: .28rem; margin-bottom: .2rem } .index-sev ul li p { font-size: .4rem; line-height: 1.6; padding: 0 2% } .index-sev .sev-dj { width: 70%; height: 1.2rem; line-height: 1.17333rem; margin: .6rem auto 0; font-size: .44rem; border-radius: .13333rem } .index-sev .sev-dj:after { width: .66667rem; height: 100%; background-position: center; background-size: 100%; content: ""; display: inline-block; vertical-align: top; position: relative; right: auto; top: auto; margin-top: 0; margin-left: .2rem } .index-sev .sev-dj:hover:after { right: auto } .index-price { margin-top: 1rem } .index-price .price-left { float: none; width: 100%; margin-top: 0 } .index-price .price-left h2:after { width: 1.76rem; height: .16rem; left: 50%; margin-left: -.88rem; bottom: -.4rem } .index-price .price-left h2 strong { font-size: .6rem } .index-price .price-left h2 strong:before, .index-price .price-left h2 strong:after { display: none } .index-price .price-left .tit { font-size: .4rem; line-height: 1.75; margin-top: 1rem } .index-price .price-left .tit span { font-size: .4rem; margin-top: 1rem } .index-price .price-left .price-box { margin-top: .48rem; padding: 0 } .index-price .price-left .price-box .str { font-size: .4rem; line-height: 1.75 } .index-price .price-left .price-box p { font-size: .4rem; line-height: 1.75; margin-top: .48rem; padding: 0 } .index-price .price-left .price-dj { width: 80%; height: 1.2rem; line-height: 1.17333rem; margin: .6rem auto 0; font-size: .44rem; border-radius: .13333rem } .index-price .price-left .price-dj:after { width: .66667rem; height: 100%; background-position: center; background-size: 100%; content: ""; display: inline-block; vertical-align: top; position: relative; right: auto; top: auto; margin-top: 0; margin-left: .2rem } .index-price .price-right { float: none; width: 100%; margin-top: .74667rem } .index-price .price-right img { width: 100%; display: block } .index-fote { margin-top: 1rem } .index-fote h2:after { width: 1.76rem; height: .16rem; left: 50%; margin-left: -.88rem; bottom: -.4rem } .index-fote h2 strong { font-size: .6rem } .index-fote h2 strong:before, .index-fote h2 strong:after { display: none } .index-fote ul { margin-top: .8rem; font-size: 0; width: 102%; position: relative; left: -2% } .index-fote ul li:first-child { margin-left: 2% } .index-fote ul li { width: 48%; float: none; display: inline-block; vertical-align: top; margin-top: .6rem } .index-fote ul li .box { box-shadow: 0 0 0.13333rem rgba(94, 88, 246, 0.2); border-radius: .26667rem; padding: .53333rem 0; margin-bottom: .88rem } .index-fote ul li .box:after { position: absolute; bottom: -.48rem; left: 0; width: .74667rem; height: .08rem; border-radius: .13333rem } .index-fote ul li .box img { width: 1.6rem } .index-fote ul li .box strong { font-size: .4rem; margin-top: .32rem } .index-fote ul li p { font-size: .3rem; line-height: 1.75; padding-left: 0; margin-top: .2rem } .pro-data { padding: 1rem 0; margin-top: 1rem } .pro-data h2 { font-size: .6rem; margin-bottom: .48rem } .pro-data .data-tab { overflow: hidden } .pro-data .data-tab .tab { width: 100%; overflow: hidden; border-radius: .13333rem; background: #dfe0e6; display: inline-block; margin: 0 auto .48rem; font-size: 0 } .pro-data .data-tab .tab li { width: 33.33%; float: left; height: 1.06667rem; border-radius: .13333rem; line-height: 1.06667rem; padding: 0; font-size: .32rem; color: #737491; cursor: pointer } .pro-data .data-tab .list { overflow-x: scroll } .pro-data .data-tab .list table td { padding: .2rem 0; border: 1px solid #ddd; font-size: .32rem; line-height: 1.5 } .foot-mesg { padding: 1rem 0 2rem } .foot-mesg .mesg-left { float: none; width: 100%; padding: 0; margin-top: 0 } .foot-mesg .mesg-left strong { font-size: .6rem } .foot-mesg .mesg-left .tit { font-size: .4rem; line-height: 1.75; margin-top: .48rem } .foot-mesg .mesg-left .box { margin-top: .48rem } .foot-mesg .mesg-left .box p { display: none } .foot-mesg .mesg-left .box .last { padding: 0; margin-top: .24rem } .foot-mesg .mesg-left .yx-dj { display: none } .foot-mesg .mesg-right { float: none; width: 100%; padding: .6rem; border-top: .10667rem solid #c86547 } .foot-mesg .mesg-right strong { font-size: .4rem; line-height: .8rem } .foot-mesg .mesg-right span { font-size: .36rem; border-radius: .4rem; height: .8rem; line-height: .8rem; width: 3.2rem } .message { margin-top: .2rem } .message li { padding: 0 0 0 .88rem } .message li:before { width: .37333rem !important; height: 100% !important; margin-top: 0 !important; background-position: center !important; background-size: 100% !important; left: .2rem; top: 0 } .message li.icon-email::after { font-size: .4rem; left: -.05333rem; bottom: .10667rem } .message li input { font-size: .4rem; height: 1rem; width: 100% } .message li textarea { height: 2.96rem; font-size: .4rem; line-height: 1.5; padding: .13333rem .13333rem .13333rem .88rem } .message li.last { border: none; padding: 0; margin-top: .4rem } .message li.last:before { height: .48rem !important; margin-top: 0; left: .2rem; top: .2rem } .message button { width: 60%; height: 1.06667rem; line-height: 1.06667rem; font-size: .48rem; border-radius: .13333rem; box-shadow: 0 0 0.26667rem rgba(94, 88, 246, 0.3); margin-top: .4rem } .message button:before { content: ''; z-index: -1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #d13708; transform-origin: center top; transform: scaleY(0); transition: 0.25s ease-in-out; border-radius: 10px } .message button:hover::before { transform-origin: center bottom; transform: scaleY(1) } .message button:after { width: .48rem; height: 100%; background-position: center; background-size: 100% auto; display: inline-block; margin-left: .28rem; vertical-align: bottom; position: relative; top: 0; margin-top: 0; right: 0 } .message li textarea::-webkit-input-placeholder { color: #adabdc } .message li textarea::-moz-placeholder { color: #adabdc } .message li textarea:-moz-placeholder { color: #adabdc } .message li textarea:-ms-input-placeholder { color: #adabdc } #gotoTop { width: 1.33333rem; height: 1.33333rem; right: 3%; bottom: 2.4rem } .footer-fl { display: block } .fdftm, .foot { display: none } } .body_ru .index-top .pro-img p a { float: none } .body_ru .index-case ul li .box .text { height: 140px } .body_ru .foot-mesg .mesg-left strong { font-size: 33px } .body_ru .foot-mesg .mesg-right span { display: none } .top_box { position: relative } .top_box .m_show { display: none } .top_box .head { position: absolute; left: 0; top: 0; right: 0; z-index: 1 } .top_box .head ul li a { color: #fff; font-weight: bold } .top_box .u2 li.online a { background-color: #fff; color: #3359a2; font-weight: normal } .top_box .u2 li.online a:hover { color: #e98b22 } .ball_banner { position: relative } .ball_banner .ball_img { display: block; width: 100% } .ball_banner .ball_img img { display: block; width: 100% } .ball_banner .ball_img .m_show { display: none } .ball_banner:before, .ball_banner:after { content: ""; display: block; position: absolute; left: 0; width: 100%; height: 100% } .ball_banner:before { top: 0; background-image: url(../images/ball_top_cover.png); background-position: left top; background-size: 100% auto; background-repeat: no-repeat } .ball_banner:after { bottom: 0; background-image: url(../images/ball_bottom_cover.png); background-position: left bottom; background-size: 100% auto; background-repeat: no-repeat } .ball_banner .ball_text { position: absolute; left: 0; bottom: 40px; width: 100%; z-index: 1 } .ball_banner .ball_text .title { font-size: 90px; font-weight: bold; color: #fff; line-height: 1.2; text-transform: uppercase } .ball_banner .ball_text .ru_title { font-size: 76px } .ball_banner .ball_text .cs_ul { margin-top: 10px } .ball_banner .ball_text .cs_ul:after { content: ""; display: block; clear: both } .ball_banner .ball_text .cs_ul li { float: left } .ball_banner .ball_text .cs_ul li p { display: inline-block; vertical-align: top; font-size: 18px; line-height: 36px; color: #fff; font-weight: normal } .ball_banner .ball_text .cs_ul li span { font-size: 26px; line-height: 36px; font-weight: bold; color: #e98b22; line-height: 1.2; margin-left: 20px } .ball_banner .ball_text .cs_ul li+li { margin-left: 68px } .ball_material .wrap { padding-top: 22px; padding-bottom: 12px } .ball_material .wrap:after { content: ""; display: block; clear: both } .ball_material .wl_ul { float: left } .ball_material .wl_ul:after { content: ""; display: block; clear: both } .ball_material .wl_ul li { float: left } .ball_material .wl_ul li img { width: 90px; display: block; margin-left: auto; margin-right: auto } .ball_material .wl_ul li p { color: #000000; font-size: 16px; text-align: center; line-height: 1.2; margin-top: 10px } .ball_material .wl_ul li+li { margin-left: 132px } .ball_material .ru_wl_ul li+li { margin-left: 110px } .ball_material .zx_btn { float: right; margin-top: 30px; width: 168px; height: 60px; line-height: 60px; color: #ffffff; font-size: 16px; border-radius: 10px; text-align: center; position: relative; overflow: hidden } .ball_material .zx_btn:before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #e98b22; z-index: -1 } .ball_material .zx_btn:after { content: ""; z-index: -1; position: absolute; bottom: 100%; right: 100%; width: 4em; height: 1em; border-radius: 50%; background-color: #3359a2; -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translate3d(50%, 50%, 0) scale3d(0, 0, 0); transform: translate3d(50%, 50%, 0) scale3d(0, 0, 0); transition: transform .45s ease-in-out, -webkit-transform .45s ease-in-out } .ball_material .zx_btn:hover:after { transform: translate3d(50%, 50%, 0) scale3d(15, 15, 15) } .ball_material .ru_zx_btn { width: auto; padding: 0 20px; font-size: 14px } @media screen and (max-width: 1287px) { .ball_banner .ball_text { bottom: 40px } .ball_banner .ball_text .title { font-size: 76px } .ball_banner .ball_text .cs_ul { margin-top: 10px } .ball_banner .ball_text .cs_ul li p { font-size: 16px; line-height: 36px } .ball_banner .ball_text .cs_ul li span { font-size: 22px; line-height: 36px; margin-left: 20px } .ball_banner .ball_text .cs_ul li+li { margin-left: 50px } .ball_material .wrap { padding-top: 22px; padding-bottom: 12px } .ball_material .wl_ul li img { width: 86px } .ball_material .wl_ul li p { font-size: 16px; margin-top: 10px } .ball_material .wl_ul li+li { margin-left: 100px } .ball_material .ru_wl_ul li+li { margin-left: 80px } .ball_material .zx_btn { margin-top: 30px; width: 168px; height: 60px; line-height: 60px; font-size: 16px; border-radius: 10px } .ball_material .ru_zx_btn { width: auto } } @media screen and (max-width: 1199px) { .ball_banner .ball_text { bottom: 30px } .ball_banner .ball_text .title { font-size: 64px } .ball_banner .ball_text .ru_title { font-size: 56px } .ball_banner .ball_text .cs_ul { margin-top: 10px } .ball_banner .ball_text .cs_ul li p { font-size: 15px; line-height: 36px } .ball_banner .ball_text .cs_ul li span { font-size: 20px; line-height: 36px; margin-left: 10px } .ball_banner .ball_text .cs_ul li+li { margin-left: 40px } .ball_material .wrap { padding-top: 22px; padding-bottom: 12px } .ball_material .wl_ul li img { width: 80px } .ball_material .wl_ul li p { font-size: 15px; margin-top: 10px } .ball_material .wl_ul li+li { margin-left: 80px } .ball_material .ru_wl_ul li+li { margin-left: 70px } .ball_material .zx_btn { margin-top: 26px; width: 160px; height: 54px; line-height: 54px; font-size: 15px; border-radius: 10px } .ball_material .ru_zx_btn { width: auto } } @media screen and (max-width: 960px) { .top_box .pc_show { display: none } .top_box .m_show { display: block } .top_box .head ul li a { color: #3359a2; font-weight: normal } .top_box .head .m_show { display: inline-block } .top_box .u2 li.online a { background-color: #fff; color: #3359a2; font-weight: normal } .top_box .u2 li.online a:hover { color: #e98b22 } .ball_banner:before { background-size: auto 2.62667rem } .ball_banner:after { background-size: auto 9.86667rem } .ball_banner .ball_img .pc_show { display: none } .ball_banner .ball_img .m_show { display: block } .ball_banner .ball_text { bottom: .4rem } .ball_banner .ball_text .title { font-size: .69333rem; text-transform: capitalize } .ball_banner .ball_text .ru_title { font-size: .64rem } .ball_banner .ball_text .cs_ul { margin-top: .32rem } .ball_banner .ball_text .cs_ul li p { display: block; font-size: .37333rem; line-height: .61333rem; color: rgba(255, 255, 255, 0.8) } .ball_banner .ball_text .cs_ul li span { display: block; font-size: .42667rem; line-height: .61333rem; margin-left: 0 } .ball_banner .ball_text .cs_ul li+li { margin-left: 1.6rem } .ball_material .wrap { padding-top: .53333rem; padding-bottom: .13333rem } .ball_material .wl_ul { float: none } .ball_material .wl_ul li img { width: 1.46667rem } .ball_material .wl_ul li p { font-size: .34667rem; margin-top: .13333rem; color: #666 } .ball_material .wl_ul li+li { margin-left: 2.2% } .ball_material .ru_wl_ul li { width: 20% } .ball_material .ru_wl_ul li p { font-size: .32rem } .ball_material .ru_wl_ul li+li { margin-left: 0% } .ball_material .zx_btn { float: none; display: block; margin-left: auto; margin-right: auto; margin-top: .66667rem; width: 4.4rem; height: 1.01333rem; line-height: 1.01333rem; font-size: .37333rem; border-radius: .26667rem } .ball_material .ru_zx_btn { font-size: .37333rem; padding: 0 .53333rem; width: 6.4rem } }