@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; } html { font-size: 16px; } button, input, select, textarea { font-size: 100%; border: none; outline: none; } .wp { width: 100%; max-width: 1440px; margin: 0 auto; } .wrap { width: 100%; max-width: 1200px; margin: 0 auto; } .clearfix:after { content: " "; display: block; height: 0px; visibility: hidden; clear: both; } .clearfix { zoom: 1; } .nav { display: none; } .head { position: relative; z-index: 10; background: url(../ore-beneficiation-plant-images/banner1.jpg) no-repeat center; height: 780px; padding-top: 89px; } .head .top ul { position: relative; } .head .top ul.u1 { float: left; width: 45%; } .head .top ul.u1 li { text-align: left; } .head .top ul.u1:before { width: 90%; height: 2px; background: #555a67; content: ""; display: block; position: absolute; top: -24px; left: 0; } .head .top ul.u2 { float: right; width: 45%; } .head .top ul.u2 li { text-align: right; } .head .top ul.u2 li:after { width: 1px; height: 16px; background: #575d69; content: ""; display: block; position: absolute; right: -25%; top: 50%; margin-top: -8px; } .head .top ul.u2:before { width: 90%; height: 2px; background: #555a67; content: ""; display: block; position: absolute; top: -24px; right: 0; } .head .top ul li { float: left; width: 25%; position: relative; } .head .top ul li:after { width: 1px; height: 16px; background: #575d69; content: ""; display: block; position: absolute; right: 25%; top: 50%; margin-top: -8px; } .head .top ul li a { color: #fff; font-size: 16px; text-transform: uppercase; display: inline-block; } .head .top ul li:hover a { color: #eb8c04; } .head .top ul li.active a, .head .top ul li:hover a { position: relative; transition: all .8s ease; } .head .top ul li.active { position: relative; } .head .top ul li.active:before { height: 4px; width: 96px; background: #eb8c04; content: ""; display: block; position: absolute; top: -25px; left: 0; } .head .top ul li.active:after { display: none; } .head .top ul li.active p { font-size: 12px; color: #9198a7; } .head .top ul li.online a { font-size: 12px; color: #eb8c04; text-decoration: underline; text-transform: lowercase; } .head .top ul li.online:after { display: none; } .head .top .logo { float: left; width: 10%; text-align: center; margin-top: -69px; } .head .middle { text-align: center; margin-top: 160px; } .head .middle p { font-size: 24px; color: #fff; text-transform: uppercase; } .head .middle h1 { font-size: 52px; color: #fff; } .head .middle h1 strong { color: #eb8c04; } .head .middle .talk { margin: 25px auto 0; width: 180px; height: 56px; line-height: 56px; background: #fff; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; text-align: center; font-size: 16px; color: #eb8c04; font-weight: bold; cursor: pointer; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; } .head .middle .talk:hover { background: #eb8c04; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; color: #fff; } .head .bottom { margin-top: 130px; box-shadow: 0 12px 65px rgba(0, 8, 56, 0.2); } .head .bottom p { text-align: center; font-size: 18px; color: #727c99; position: relative; margin-bottom: 20px; } .head .bottom p:after { width: 48px; height: 2px; background: #eb8c04; content: ""; display: block; position: absolute; left: 50%; margin-left: -24px; bottom: -6px; } .head .bottom .bot-t { background: #fff; padding: 15px 30px 10px; border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -ms-border-radius: 10px 10px 0 0; -o-border-radius: 10px 10px 0 0; } .head .bottom .bot-t ul { overflow: hidden; width: 100%; } .head .bottom .bot-t li { float: left; text-align: center; width: 13.5%; margin-left: .7%; } .head .bottom .bot-t li img { width: 100%; } .head .bottom .bot-t li span { display: block; margin-top: 5px; font-size: 14px; line-height: 1.4; color: #252c41; } .head .bottom .bot-t li a:hover span { color: #eb8c04 } .head .bottom .bot-b { background: #f2f3f7; padding: 25px 40px; } .head .bottom .bot-b ul { overflow: hidden; } .head .bottom .bot-b li { float: left; } .head .bottom .bot-b li+li { margin-left: 6.8%; } .head .bottom .bot-b li p { font-size: 18px; color: #5f6478; text-align: left; } .head .bottom .bot-b li p:after { width: 48px; height: 2px; background: #eb8c04; content: ""; display: block; position: absolute; left: 0; margin-left: 0; bottom: -10px; } .head .bottom .bot-b li strong { font-size: 18px; color: #5f6478; } .head .bottom .bot-b li strong.num-font { font-size: 24px; } .head .bottom .bot-b li span { font-weight: normal; } .head .bottom .email { display: none; } .index-gold { background: #f2f3f7; padding-top: 282px; text-align: center; } .index-gold h2, .index-flotation h2, .index-service h2 { font-size: 36px; color: #30333f; position: relative; text-align: center; } .index-gold h2:after, .index-flotation h2:after, .index-service h2:after { content: ""; display: block; position: absolute; background: url(../ore-beneficiation-plant-images/bt_icon.png) no-repeat; width: 292px; height: 20px; left: 50%; margin-left: -146px; bottom: -25px; } .index-gold p { font-size: 16px; color: #75767a; line-height: 1.6em; margin-top: 52px; padding: 0 16%; } .plant-box { overflow: hidden; margin-top: 45px; } .plant-left { float: left; width: 48.5%; } .plant-right { float: left; width: 51.5%; background: #fff; padding: 10px 4% 40px; } .plant-right p { text-align: left; color: #333; margin-top: 25px; padding: 0; } .plant-right .line { width: 140px; height: 40px; line-height: 40px; text-align: center; background: #eb8c04; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; margin-left: 10%; margin-top: 40px; } .plant-right .line a { font-size: 14px; color: #fff; font-weight: bold; display: block; } .plant-right .line:hover { background: #fff; border-radius: 30px; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; } .plant-right .line:hover a { -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; color: #eb8c04; transition: all .5s ease; box-shadow: 0 0 10px rgba(0, 8, 56, 0.2); } .index-flotation { background: #f2f3f7; padding-top: 130px; padding-bottom: 75px; } .flot-box { margin-top: 60px; } .flot-box img,.flot-box video{ width: 100%; display: block; } .flot-box .fl { float: left; } .flot-box .fr { float: right; } .flot-left { width: 58%; } .pad-left { padding-right: 5%; padding-bottom: 2%; } .pad-right { padding-left: 5%; } .flot-left h3 { font-size: 24px; color: #333; line-height: 1.5em; } .flot-left strong { font-size: 16px; color: #30333f; display: block; margin-top: 30px; line-height: 1.5em; } .flot-left p { font-size: 16px; color: #30333f; line-height: 1.5em; } .flot-right { width: 42%; } .flot-bottom { margin-top: 20px; position: relative; } .flot-bottom .link_list { position: absolute; left: 13.6%; right: 12.6%; top: 0; bottom: 0; } .flot-bottom .link_list a { width: 20%; height: 100%; float: left; } .index-case { background: url(../ore-beneficiation-plant-images/case_bg.jpg) no-repeat center; background-size: cover; padding: 102px 0 98px; width: 100%; } .index-case .case { overflow: hidden; margin-left: -3%; } .index-case .case-left { float: left; width: 47%; margin-left: 3%; } .case-img { position: relative; } .index-case .case-left h2 { position: relative; margin-top: -55px; padding: 13px 0 13px 20px; font-size: 22px; color: #fff; } .index-case .case-left h2:before { width: 6px; background: #eb8c04; content: ""; display: block; position: absolute; left: 0px; top: 0; bottom: 0; } .index-case .case-left .top { margin-top: 25px; padding-left: 20px; } .index-case .case-left p { font-size: 16px; color: #f2f3f7; line-height: 1.9em; } .index-case .case-left .bottom { margin-top: 35px; padding-left: 20px; } .index-case .case-left .bottom strong { font-size: 18px; color: #eb8c04; display: block; } .index-service { background: #f2f3f7; padding: 100px 0 80px; } .index-service .service-box { margin-top: 50px; } .index-service .service-left { float: left; width: 57%; } .index-service .service-left strong { font-size: 20px; color: #333; display: block; margin-bottom: 10px; } .index-service .service-left p { font-size: 16px; color: #666; line-height: 2em; position: relative; padding-left: 20px; } .index-service .service-left p:before { width: 10px; height: 2px; content: ""; display: block; background: #eb8c04; position: absolute; left: 0; top: 50%; margin-top: -1px; } .index-service .service-left .line { background: #eb8c04; color: #fff; cursor: pointer; transition: all .6s ease; -webkit-transition: all .6s ease; -moz-transition: all .6s ease; -ms-transition: all .6s ease; -o-transition: all .6s ease; width: 140px; height: 40px; line-height: 40px; text-align: center; margin-top: 40px; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; } .index-service .service-left .line:hover { background: #fff; color: #eb8c04; transition: all .6s ease; -webkit-transition: all .6s ease; -moz-transition: all .6s ease; -ms-transition: all .6s ease; -o-transition: all .6s ease; box-shadow: 0 0 10px rgba(0, 8, 56, 0.2); } .index-service .service-left .line a { color: #fff; } .index-service .service-left .line a:hover { color: #eb8c04; } .index-service .service-right { float: right; width: 43%; } .index-jk { background: url(../ore-beneficiation-plant-images/jk_bg.jpg) no-repeat center; height: 300px; width: 100%; text-align: center; padding-top: 80px; } .index-jk strong { text-align: center; color: #fff; font-size: 20px; } .index-jk p { font-size: 16px; color: #fff; line-height: 1.5em; padding: 20px 7%; } .index-process { padding: 55px 0 80px; } .index-process h2 { font-size: 36px; color: #30333f; position: relative; text-align: center; margin-bottom: 70px; } .index-process h2:after { content: ""; display: block; position: absolute; background: url(../ore-beneficiation-plant-images/bt_icon.png) no-repeat; width: 292px; height: 20px; left: 50%; margin-left: -146px; bottom: -40px; } .index-process .pro-left { float: left; width: 50%; } .index-process .pro-right { float: left; width: 50%; padding-left: 5%; margin-top: 20px; } .index-process .pro-right li { font-size: 15px; color: #595f75; margin-top: 5px; } .index-process .pro-right li span { font-size: 36px; color: #eb8c04; margin-right: 10px; font-family: '新宋体'; } .index-process .pro-right .line { width: 140px; height: 40px; line-height: 40px; text-align: center; background: #eb8c04; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; margin-top: 40px; font-size: 14px; color: #fff; font-weight: bold; cursor: pointer; transition: all .6s ease; -webkit-transition: all .6s ease; -moz-transition: all .6s ease; -ms-transition: all .6s ease; -o-transition: all .6s ease; } .index-process .pro-right .line:hover { background: #fff; color: #eb8c04; transition: all .6s ease; -webkit-transition: all .6s ease; -moz-transition: all .6s ease; -ms-transition: all .6s ease; -o-transition: all .6s ease; box-shadow: 0 0 10px rgba(0, 8, 56, 0.2); } .index-cact { padding: 75px 0; background: #30333f; } .index-cact .cact-left { float: left; width: 58%; } .index-cact .cact-left strong { font-size: 55px; color: #fff; display: block; margin-bottom: 40px; } .index-cact .cact-left .message ul { margin-left: -10%; overflow: hidden; } .index-cact .cact-left .message ul li { float: left; padding: 10px 30px; position: relative; width: 40%; margin-left: 10%; border-bottom: 1px solid #818a96; margin-bottom: 30px; } .index-cact .cact-left .message ul li:before { position: absolute; left: 0; top: 12px; content: ""; display: block; width: 20px; height: 20px; } .index-cact .cact-left .message ul li.m-name:before { background: url(../ore-beneficiation-plant-images/me_1.png) no-repeat; background-size: 100% 100%; } .index-cact .cact-left .message ul li.m-email:before { background: url(../ore-beneficiation-plant-images/me_2.png) no-repeat; background-size: 100% 100%; } .index-cact .cact-left .message ul li.m-phone:before { background: url(../ore-beneficiation-plant-images/me_3.png) no-repeat; background-size: 100% 100%; } .index-cact .cact-left .message ul li input { background: #30333f; width: 100%; } .index-cact .cact-left .message ul li.m-pro { background-color: #f5f5f5; border: 1px solid transparent; padding: 10px 18px; float: right; } .index-cact .cact-left .message ul li.m-pro input { background-color: #f5f5f5; font-weight: bold; color: #33495b; opacity: 1; } .index-cact .cact-left .message ul li input { border: none; font-size: 14px; color: #fff; outline: none; width: 100%; } .index-cact .cact-left .message .msg-areas textarea { border: 1px solid #818a96; width: 100%; height: 250px; padding: 15px 20px; font-size: 14px; color: #fff; background: #30333f; } .index-cact .cact-left .message ul li input::-webkit-input-placeholder, .index-cact .cact-left .message .msg-areas textarea::-webkit-input-placeholder { color: #fff; opacity: .6; } .message .line { width: 140px; height: 40px; line-height: 40px; text-align: center; background: #fff; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; margin-top: 40px; } .message .line input { cursor: pointer; transition: all .5s ease; font-size: 14px; color: #fff; font-weight: bold; width: 100%; height: 100%; background: transparent; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; } .message .line input[value] { color: #333; } .message .line:hover { background: #eb8c04; transition: all .5s ease; } .message .line:hover input { background: #eb8c04; color: #fff; } .index-cact .cact-right { float: right; width: 42%; padding-left: 3.5%; margin-top: 20px; } .index-cact .cact-right .foot-logo { float: right; margin-bottom: 90px; } .index-cact .cact-right ul { overflow: hidden; margin-top: 30px; } .index-cact .cact-right ul li { float: left; width: 48%; margin-left: 10%; } .index-cact .cact-right ul li p { font-size: 14px; color: #e8e9f0; } .index-cact .cact-right ul li strong { font-size: 14px; color: #e8e9f0; } .index-cact .cact-right ul li.fr { float: right; width: 32%; } /* 右侧固定 */ .fixed-right { position: fixed; background: #30333f; text-align: center; right: 20px; bottom: 200px; width: 90px; z-index: 999; } .fixed-right p { font-size: 14px; color: #fff; margin-top: 8px; line-height: 1.1em; } .fixed-right p a { font-size: 14px; color: #fff; } .fixed-right .top { padding: 15px 10px 5px; border-bottom: 1px solid #fff; cursor: pointer; } .fixed-right .middle { border-bottom: 1px solid #fff; padding: 15px 0 10px; cursor: pointer; } .fixed-right .bottom { background: #fff; padding: 8px 0; cursor: pointer; } /* 右侧固定 end*/ .m-foot { position: fixed; left: 0; right: 0; bottom: 0; padding: 15px 4%; z-index: 9999; background: #324a5f; display: none; } .m-foot ul { margin-left: -3%; } .m-foot li { float: left; height: 40px; line-height: 40px; width: 47%; margin-left: 3%; text-align: center; position: relative; } .m-foot li a { font-size: 16px; color: #f5f5f5; display: block; } .m-foot li:first-child { background: #415e75; } .m-foot li a:before { content: ""; width: 18px; height: 25px; display: inline-block; vertical-align: middle; margin-right: 10px; } .m-foot li:first-child a:before { background: url(../ore-beneficiation-plant-images/ly.png) center no-repeat; background-size: 100%; } .m-foot li:last-child { background: #e94c3b; } .m-foot li:last-child a:before { background: url(../ore-beneficiation-plant-images/xx.png) center no-repeat; background-size: 100%; } @media screen and (max-width: 1599px) { .wp { max-width: 1280px; } } @media screen and (max-width: 1399px) { .wp { max-width: 1150px; } .head .top ul li:after, .head .top ul.u2 li:after { display: none; } .wrap { max-width: 1160px; } .index-case { padding: 65px 0 50px; } } .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, .4); } .pop-video .close { position: absolute; right: 35px; top: 20px; width: 43px; height: 43px; background: url(../ore-beneficiation-plant-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 #eb8c04; 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: #eb8c04; display: block; background: #f4f4ff; border-radius: 30px; height: 48px; line-height: 48px; width: 230px; text-align: center; float: right; margin-right: 25%; } .pop-video .message { margin-top: 3px; } .pop-video .message li { border-bottom: 1px solid #d7d7ff; padding: 30px 0 10px 45px; position: relative; } .pop-video .message li:before { position: absolute; left: 12px; top: 50%; content: ""; display: block; } .pop-video .message li.icon-name:before { background: url(../ore-beneficiation-plant-images/rw.png) no-repeat; background-size: 100% 100%; width: 14px; height: 15px; margin-top: 2px; } .pop-video .message li.icon-email:before { background: url(../ore-beneficiation-plant-images/yx.png) no-repeat; background-size: 100% 100%; width: 16px; height: 13px; margin-top: 5px; } .pop-video .message li.icon-tel:before { background: url(../ore-beneficiation-plant-images/dh.png) no-repeat; background-size: 100% 100%; width: 16px; height: 16px; margin-top: 2px; } .pop-video .message li input { font-size: 16px; color: #adabdc; height: 30px; width: 100%; } .pop-video input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset; } .pop-video .message li textarea { height: 120px; width: 100%; background: #f7f7f7; font-size: 16px; line-height: 1.5em; color: #adabdc; resize: none; padding: 20px 30px 20px 45px; } .pop-video .message li.last { border: none; padding: 25px 0; } .pop-video .message button { border: none; background: #eb8c04; 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; } .pop-video .message button:before { content: ''; z-index: -1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #c1770c; transform-origin: center top; transform: scaleY(0); transition: 0.25s ease-in-out; border-radius: 10px; } .pop-video .message button:hover::before { transform-origin: center bottom; transform: scaleY(1); } .pop-video .message button:after { width: 21px; height: 19px; background: url(../ore-beneficiation-plant-images/zfj.png) no-repeat; background-size: 100% 100%; content: ""; display: block; position: absolute; top: 50%; margin-top: -10px; right: 50px; } .pop-video .message li textarea::-webkit-input-placeholder { color: #adabdc; } .pop-video .message li textarea::-moz-placeholder { color: #adabdc; } .pop-video .message li textarea:-moz-placeholder { color: #adabdc; } .pop-video .message li textarea:-ms-input-placeholder { color: #adabdc; } .foot { padding: 20px 4%; background: #24262f; text-align: center; font-size: 16px; color: #fff; line-height: 1.5; } .video_swt { margin-top: 30px; padding: 14px; padding-right: 60px; background-image: url(../images/icon_video3.png); background-repeat: no-repeat; background-position: right 17px center; background-size: 31px; border: 1px solid #eb8c04; border-radius: 50px; font-size: 16px; color: #eb8c04; line-height: 1.2; text-align: center; cursor: pointer; } @media screen and (max-width: 1199px) { .head .top ul.u1 li, .head .top ul.u2 li { text-align: center; } .head .top ul.u1:before, .head .top ul.u2:before { width: 100%; } .head .bottom .bot-t { padding: 15px 5px; } .head .bottom .bot-b { padding: 15px 20px 23px; } .ore-list ul { padding: 0 5% 55px; } .index-case .case-left { padding: 0 2%; } .index-cact { padding: 55px 15px; } } @media screen and (max-width: 999px) { body { padding-bottom: 70px; } .wrap { padding-left: 4%; padding-right: 4%; } .nav-on { display: block; position: absolute; z-index: 99999; right: 3%; top: 70px; background: #fff; padding: 10px 0; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; box-shadow: 0 0 10px rgba(0, 8, 56, 0.2); } .nav-on li { margin-bottom: 0; } .nav-on li a { display: block; padding: 5px 20px; font-size: 16px; color: #000; text-align: center; } .menu { overflow: hidden; margin-top: 36px; position: absolute; right: 4%; top: 0; z-index: 999; } .menu:hover i:after { transform: scaleX(1); transform-origin: 0 50%; transition-timing-function: ease; } .menu i { position: relative; display: block; width: 28px; height: 2px; margin-bottom: 6px; padding: 0; background-color: #fff; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .menu i.line-bottom { width: 22px; float: right; } .menu i:after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 3; transition: transform .35s; background-color: rgba(255, 255, 255, 0.4); transform: scaleX(0); transform-origin: 100% 50%; transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } .main-on { transform: translateX(0); transition: transform .5s; } .main-on i { display: block; } .main-on i.line-top { transform: translateY(8px) rotate(-45deg); } .main-on i.line-middle { transform: scaleX(0); -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); } .main-on i.line-bottom { width: 28px; transform: translateY(-8px) rotate(45deg); } .head { background-size: cover; } .head .top .logo { display: block; width: 100px; margin-left: 3%; } .head .top ul.u1, .head .top ul.u2 { display: none; } .head .middle { margin-top: 40px; } .head .middle h1 { font-size: 36px; } .head .middle p { font-size: 20px; } .head .middle .talk { height: 42px; line-height: 42px; display: none; } .head .bottom { margin-top: 30px; } .head .bottom .bot-t li { width: 19.2%; margin-top: 15px; } .head .bottom .bot-b li { float: none; } .head .bottom .bot-b li+li { margin-left: 0; margin-top: 20px } .head .bottom .email { margin-top: 20px; margin-bottom: 10px; display: block; } .head .bottom .email a { display: block; font-size: 16px; color: #30333f; text-transform: lowercase; font-weight: bold; text-align: center; text-decoration: underline; } .index-gold { padding-top: 24%; } .plant-left, .flot-left, .index-case .case-left, .plant-right, .flot-right, .index-service .service-left, .index-service .service-right, .index-process .pro-left, .index-process .pro-right, .index-cact .cact-left, .index-cact .cact-right { width: 100%; float: none; } .fixed-right .top, .fixed-right .middle { display: none; } .fixed-right { width: 42px; right: 4%; bottom: 90px; } .head .bottom .bot-b li+li { margin-top: 20px; } .head .bottom .bot-b li p { font-size: 16px; } .head .bottom .bot-b li strong.num-font { font-size: 20px; } .index-gold h2, .index-flotation h2, .index-service h2, .index-process h2, .index-cact .cact-left strong { font-size: 24px; } .index-gold p { padding: 0; } .plant-box { margin-top: 35px; } .plant-left img { width: 100%; display: block; } .plant-right { padding: 5px 6% 30px; } .plant-right p { margin-top: 15px; } .plant-right .line { margin-left: 0; margin-top: 25px; } .pad-left { padding-right: 0; padding-top: 20px; } .pad-right { padding-left: 0; padding-top: 20px; } .index-flotation { padding-top: 40px; padding-bottom: 40px; } .flot-box { margin-top: 45px; } .flot-left h3 { font-size: 22px; text-align: center; } .flot-left strong { margin-top: 20px; margin-bottom: 5px; } .flot-right img, .flot-bottom img { width: 100%; display: block; } .index-case { padding-top: 40px; padding-bottom: 30px; background-size: cover; } .case-img img { width: 100%; display: block; } .index-case .case-left+.case-left { margin-top: 36px; } .index-case .case-left h2 { margin-top: 0; font-size: 20px; } .index-case .case-left .top { margin-top: 20px; padding-left: 0; } .index-case .case-left .bottom { margin-top: 20px; padding-left: 0; } .index-service { padding-top: 40px; padding-bottom: 40px; } .index-service .service-left p { margin-top: 15px; line-height: 1.5; } .index-service .service-left p:before { top: 11px; margin-top: 0; } .index-service .service-left .line { margin-top: 25px; } .index-service .service-right { margin-top: 30px; } .index-service .service-right img { width: 100%; display: block; } .index-jk { height: auto; padding-top: 40px; padding-bottom: 30px; background-size: cover; } .index-jk p { padding-left: 0; padding-right: 0; padding-bottom: 0; } .index-process { padding-top: 40px; padding-bottom: 40px; } .index-process .pro-left img { width: 100%; display: block; } .index-process .pro-right { padding-left: 0; } .index-process .pro-right li { margin-top: 15px; } .index-process .pro-right li span { font-size: 22px; } .index-process .pro-right .line { margin-top: 25px; } .index-cact { padding-top: 40px; padding-bottom: 40px; } .index-cact .cact-right { margin-top: 40px; } .index-cact .cact-right .map img { width: 100%; display: block; } .index-cact .cact-right .foot-logo { display: none; } .index-cact .cact-right ul li { max-width: 48%; margin-left: 0; } .m-foot { display: block; } .video_swt { margin-top: 20px; padding: 10px; padding-right: 46px; background-position: right 12px center; background-size: 24px; font-size: 13px; } } @media screen and (max-width: 750px) { .head { height: auto; padding-bottom: 22px; } .head .bottom .bot-t li { width: 24.3%; margin-top: 15px; } .head .bottom .bot-t li+li+li+li+li { width: 32.6%; } .head .bottom .bot-t li span { font-size: 13px; line-height: 1.5; } .head .middle { margin-top: 0; } .head .middle h1 { font-size: 24px; } .head .middle .talk { width: 140px; } .index-gold { padding-top: 30px; } } @media screen and (max-width: 480px) { .index-cact .cact-left strong { margin-bottom: 25px; } .index-cact .cact-left .message ul li { width: 90%; margin-bottom: 15px; } } .body_ru .head .bottom .bot-b li { max-width: 50%; } .body_ru .head .bottom .bot-t li span { word-break: break-word; } @media screen and (max-width: 999px) { .body_ru .head .bottom .bot-b li { max-width: 100%; } }