@charset "UTF-8"; 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 { background: #c86547; 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 span { max-width: 450px; display: inline-block; vertical-align: middle; padding: 14px 64px 14px 17px; background-image: url(../images/icon_video.png); background-repeat: no-repeat; background-position: right 17px center; background-size: 31px; border: 1px solid #fff; border-radius: 10px; font-size: 16px; color: #fff; line-height: 1.2; text-align: center; transition: all linear 0.4s; opacity: 0.8; cursor: pointer; } .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: 40px; color: #3359a2; } .index-top .pro-xq .cs-ul { overflow: hidden; margin-top: 30px } .index-top .pro-xq .cs-ul li:first-child { margin-left: 0 } .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 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 2.5% 20px; } .index-top .pro-xq .wl-pic ul { overflow: hidden; font-size: 0; } .index-top .pro-xq .wl-pic ul li { display: inline-block; vertical-align: bottom; text-align: center; max-width: 100px; width: 17.147%; margin: 0 1.425%; } .index-top .pro-xq .wl-pic ul li p { font-size: 16px; color: #fff; margin-bottom: 12px; text-transform: capitalize } .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 { color: #fff; line-height: 52px; border: 2px solid #7fa7e3; 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; transform-origin: center; transform: translate3d(50%, 50%, 0) scale3d(15, 15, 15); transition: 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 } .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: 28px; 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/nianjinji_tb01.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: 15px; color: #666; line-height: 2em } .ball-mill .mill-left li { font-size: 15px; color: #666; line-height: 1.75; margin-top: 30px } .ball-mill .mill-left li span { font-size: 18px; color: #3359a2; font-weight: bold; display: block; margin-bottom: 6px } .ball-mill .mill-right { float: right; width: 47%; text-align: center; margin-top: 60px } .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 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 .sty1 { margin-top: 75px; overflow: hidden } .index-case .sty1 .text, .index-case .sty1 .video { width: 50%; float: left } .index-case .sty1 .text { padding-right: 3%; margin-top: -6px } .index-case .sty1 .text p { font-size: 16px; color: #666666; line-height: 1.75 } .index-case .sty1 .text p strong { color: #3359a2; } .index-case .sty1 .text p+p { margin-top: 21px } .index-case .sty1 .text .swtbtn { width: 285px; height: 56px; background: #3359a2; border-radius: 10px; display: block; font-size: 20px; color: #ffffff; text-align: center; line-height: 56px; margin-top: 33px; overflow: hidden; position: relative; z-index: 1 } .index-case .sty1 .video video { width: 100%; height: auto; display: block } .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: 14px; color: #fff; 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: 20px } .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: 14px; 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, .index-case .sty1 .text .swtbtn:before { content: ''; z-index: -1; background: rgba(255, 255, 255, 0.3); position: absolute; top: -50%; bottom: -50%; width: 1.25em; transform: translate3d(-1200%, 0, 0) rotate(35deg) } .index-sev .sev-dj:hover:before, .index-case .sty1 .text .swtbtn: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: 14px; line-height: 1.6em; 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) } .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: #365993; display: block; margin-top: 25px } .index-fote ul li p { font-size: 16px; color: #5a6e97; 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: #5664a1 } .pro-data .data-tab { margin-top: 21px } .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: #737491; cursor: pointer } .pro-data .data-tab .tab li.cur { color: #fff; background: #365993; 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; 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: #3359a2; 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; display: none; } .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: #365993; 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: #365993; 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: #adabdc } .message li textarea::-moz-placeholder { color: #adabdc } .message li textarea:-moz-placeholder { color: #adabdc } .message li textarea:-ms-input-placeholder { color: #adabdc } .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%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-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); display: none } @media screen and (max-width: 1599px) { .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 } .index-top .pro-xq .wl-pic ul li p { font-size: 14px } .index-top .pro-img p span { background-size: 28px; font-size: 14px; } .ball-mill { margin-top: 60px } .ball-mill .mill-left p { font-size: 14px } .ball-mill .mill-left li { font-size: 14px; margin-top: 20px } .index-case { padding: 60px 0; margin-top: 60px } .index-case .sty1 .text p { font-size: 14px } .foot-mesg .mesg-right { padding: 25px 30px 40px } } @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-xq .wl-pic ul li p { font-size: 13px } .index-top .pro-img p span { background-size: 25px; font-size: 12px; } .ball-mill .mill-left li { margin-top: 10px } .ball-mill .mill-right { margin-top: 120px } .index-case .sty1 .video { margin-top: 60px } .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 } @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 .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 ul li.active a:before,.head ul li.active a:after { display: none } .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 } .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: 0.62rem } .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 .2rem .4rem; } .index-top .pro-xq .wl-pic ul li { width: 30.48%; margin-top: .28rem; max-width: 100%; overflow: hidden } .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%; height: 2.66667rem; object-fit: cover; } .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 .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-right { float: none; width: 100%; text-align: center; margin-top: .74667rem } .ball-mill .mill-right img { width: 100%; display: block } .ball-mill .mill-right .video_swt{ display: block; margin-top: .66667rem; padding: .26667rem .2rem; padding-right: 1.13333rem; background-image: url(../images/icon_video2.png); background-repeat: no-repeat; background-position: right .32rem center; background-size: .66667rem; border: 1px solid #3359a2; font-size: .36rem; color: #3359a2; line-height: 1.2; text-align: center; transition: all linear 0.4s; cursor: pointer; } .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 .sty1 { margin-top: .88rem; overflow: hidden } .index-case .sty1 .text, .index-case .sty1 .video { width: 100%; float: none } .index-case .sty1 .text { padding-right: 0; margin-top: 0 } .index-case .sty1 .text p { font-size: .4rem } .index-case .sty1 .text p+p { margin-top: .48rem } .index-case .sty1 .text .swtbtn { width: 70%; height: 1.2rem; border-radius: .13333rem; font-size: .48rem; line-height: 1.17333rem; margin: .74667rem auto 0 } .index-case .sty1 .video { margin-top: .88rem } .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 .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: .32rem; 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: 50%; display: inline-block; height: 1.06667rem; border-radius: .13333rem; line-height: 1.06667rem; padding: 0; font-size: .4rem; color: #737491; cursor: pointer } .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 .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: 0.48rem; height: 100%; background-position: center; background-size: 100% auto; display: inline-block; margin-left: 0.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 } }