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; color: #333; } a:hover { text-decoration: none; } a:focus { outline-style: none; -moz-outline-style: none; } * { box-sizing: border-box; } img { max-width: 100%; height: auto; -ms-interpolation-mode: bicubic; border: 0; vertical-align: middle; } i, em { font-style: normal; } body { font-size: 16px; max-width: 1920px; margin: 0 auto; } li { list-style: none; } button, input, select, textarea { font-size: 100%; border: none; outline: none; } .wrap,.wp{ width: 94%; max-width: 1400px; margin: 0 auto; } .clearfix:after { content: ""; display: block; height: 0px; visibility: hidden; clear: both; } .clearfix { zoom: 1; } .float-left{ float: left; } .float-right{ float: right; } @font-face { font-family: flyfont; src: url("../fonts/FuturaStd-Bold.otf"); } /*main*/ .main-box{ background: url("../images/mainbg.jpg") center top no-repeat; position: relative; } .header{ border-bottom: 1px solid rgba(255,255,255,0.1); padding: 42px 0 35px; margin-bottom: 81px; } .logo{ float: left; margin-right: 50px; } .nav{ float: left; } .header .btn{ float: right; line-height: 40px; color: #ffffff; font-size: 16px; font-weight: bold; text-align: center; display: block; width: 114px; height: 40px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; background-image: -moz-linear-gradient( 90deg, rgb(251,96,90) 0%, rgb(251,96,90) 100%); background-image: -webkit-linear-gradient( 90deg, rgb(251,96,90) 0%, rgb(251,96,90) 100%); background-image: -ms-linear-gradient( 90deg, rgb(251,96,90) 0%, rgb(251,96,90) 100%); -webkit-box-shadow: 0 0 10px 0 rgba(251,96,90,0.8); -moz-box-shadow: 0 0 10px 0 rgba(251,96,90,0.8); box-shadow: 0 0 10px 0 rgba(251,96,90,0.8); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .header .btn:hover{ -webkit-box-shadow: 0 0 25px 0 rgba(251,96,90,0.9); -moz-box-shadow: 0 0 25px 0 rgba(251,96,90,0.9); box-shadow: 0 0 25px 0 rgba(251,96,90,0.9); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .nav li { float: left; margin-right: 50px; position: relative; color: #ffffff; height: 40px; font-size: 16px; line-height: 40px; } .nav li:after{ position: absolute; content: ''; width: 0; height: 3px; background: #FB605A; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s ; transition: all 0.3s; } .nav li:hover:after{ width: 50%; } .nav li a{ color: #ffffff; height: 40px; font-size: 16px; line-height: 40px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s ; transition: all 0.3s; } .nav li:last-child{ margin-right: 0; } .nav li:last-child:after{ display: none; } .nav li.active:after{ width: 50%; } .main h1{ font-size: 76px; color: #ffffff; font-weight: bold; line-height: 80px; margin-bottom: 60px; margin-top: 6px; text-transform: uppercase; font-family: flyfont; } .main{ float: left; width: 80%; } .main-pro{ float: right; width: 19.3%; max-width: 270px; background: rgba(66,91,134,0.65); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; text-align: center; color: #ffffff; padding: 30px 0 10px; position: relative; } .main-pro p{ font-size: 16px; text-transform: uppercase; margin: 12px 0 12px; } .main-pro li{ position: relative; } .main-pro li:hover a{ color: #FB605A; } .main-pro li:first-child:before{ content: 'Related Equipment'; display: block; text-transform: uppercase; font-size: 16px; font-weight: bold; margin-bottom: 36px; } .main-pro:before{ position: absolute; content: ''; width: 96%; height: 98%; border: 1px solid rgba(255,255,255,0.7); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; left: 2%; top: 1%; } .main-pro:after{ position: absolute; content: ''; width: 141px; height: 188px; background: url("../images/icon3.png") center no-repeat; background-size: 141px; bottom: -188px; left: 50%; margin-left: -90px; } .main-pro a{ color:#fff; -webkit-transition: all 0.3s ; -moz-transition: all 0.3s ; -ms-transition: all 0.3s ; -o-transition: all 0.3s ; transition: all 0.3s ; } .main .code{ display: inline-block; width: 255px; height: 96px; background: url("../images/mobg.png") center no-repeat; text-align: center; font-size: 20px; line-height: 36px; color: #ffcd56; margin-right: 36px; padding-top: 12px; margin-bottom: 45px; } .main .code span{ color: #ffffff; } .main p{ font-size: 20px; color: #ffffff; line-height: 36px; margin-bottom: 6px; } .main p span{ color: #ffcd56; } .main a.btn1,.main a.btn2{ display: inline-block; width: 256px; height: 70px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; font-size: 20px; font-weight: bold; text-align: center; line-height: 70px; margin-right: 35px; background: #ffffff; margin-top: 60px; margin-bottom: 24px; text-shadow: 3.064px 2.571px 4px rgba(40, 52, 62, 0.1); } .main a.btn1{ text-shadow: 3.064px 2.571px 4px rgba(40, 52, 62, 0.1); } .main a.btn2{ background: #f36c1d; color: #ffffff; } .h-email{ color: #ffffff; font-size: 20px; line-height: 36px; padding-left: 24px; background: url("../images/icone.png") left 12px no-repeat; } .h-email a{ color: #ffcd56; font-size: 18px; font-weight: bold; position: relative; } .h-email a:after{ position: absolute; bottom: -6px; left: 7%; width: 85%; height: 2px; background: #ffcd56; content: ''; } .main-text{ margin: 130px 0 70px; } .main-text h2{ font-size: 36px; font-weight: bold; color: #ffffff; margin-bottom: 20px; line-height: 50px; text-transform: uppercase; font-family: flyfont; } .main-text p{ font-size: 18px; line-height: 32px; color: #ffffff; } .cty-list li{ float: left; text-align: center; width: 10.4%; max-width: 146px; margin-right: 4.5%; } .cty-list li:last-child{ margin-right: 0; } .cty-list li img{ display: block; max-width: 100%; margin: 0 auto; } .cty-list li:nth-child(4) img:nth-child(3){ -webkit-box-shadow:  0 0 8px 0 rgba(0,0,0,0.2); -moz-box-shadow:  0 0 8px 0 rgba(0,0,0,0.2); box-shadow: 0 0 8px 0 rgba(0,0,0,0.2); } .cty-list p{ color: #1255da; font-size: 16px; line-height: 32px; margin: 26px 0 45px; white-space: nowrap; } .cty-center{ position: relative; padding-top: 88px; padding-bottom: 126px; } .card-text{ font-size: 18px; line-height: 32px; color: #999999; width: 40%; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #f0f0f0; padding: 24px 20px 32px 26px; position: absolute; right: 0; top: 0; } .card-text strong{ display: block; text-align: center; font-size: 18px; color: #464646; margin-bottom: 4px; text-transform: uppercase; } .card-text:before{ content: ''; position: absolute; width: 16px; height: 16px; background: url("../images/icon.png") center no-repeat; top: 16px; left: 20px; } .card-text:after{ content: ''; position: absolute; width: 16px; height: 16px; background: url("../images/icon.png") center no-repeat; top: 16px; right: 20px; } /*lc*/ .m-tit{ font-size: 36px; font-family: flyfont; line-height: 50px; font-weight: bold; text-transform: uppercase; } .lc-box{ background-image: -moz-linear-gradient( 90deg, rgb(52,77,133) 0%, rgb(32,54,75) 100%); background-image: -webkit-linear-gradient( 90deg, rgb(52,77,133) 0%, rgb(32,54,75) 100%); background-image: -ms-linear-gradient( 90deg, rgb(52,77,133) 0%, rgb(32,54,75) 100%); padding: 60px 0 64px; position: relative; margin-bottom: 90px; } .lc-img{ margin: 82px 0 94px; } .lc-info{ } .list-bar{ position: relative; } .list-bar a.btn{ position: absolute; right: 0; bottom: 0; } .lc-info h2{ color: #ffffff; margin-bottom: 26px; margin-top: 30px; text-align: center; text-transform: none; } .lc-info p{ color: #ffffff; line-height: 32px; font-size: 18px; } .lc-info ul{ margin-top: 30px; margin-bottom: 43px; } .lc-info li strong{ color: #ffcd56; line-height: 32px; font-size: 18px; } .lc-info li:first-child{ margin-bottom: 15px; } .lc-info li p{ padding-left: 32px; background: url("../images/iconli.png") left 10px no-repeat; } .lc-info a.btn{ display: block; width: 237px; height: 58px; line-height: 58px; color: #ffffff; background: #f36c1d; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; font-size: 20px; font-weight: bold; text-shadow: 3.064px 2.571px 4px rgba(40, 52, 62, 0.1); text-align: center; } /*ys*/ .ys-box{ position: relative; overflow: hidden; padding-top: 70px; margin-bottom: 126px; } .ys-box:before{ position: absolute; content: ''; width: 1660px; display: block; height: 100%; background-image: -moz-linear-gradient( 90deg, rgb(52,77,133) 0%, rgb(32,54,75) 100%); background-image: -webkit-linear-gradient( 90deg, rgb(52,77,133) 0%, rgb(32,54,75) 100%); background-image: -ms-linear-gradient( 90deg, rgb(52,77,133) 0%, rgb(32,54,75) 100%); box-shadow: 0px 0px 24px 0px rgba(5, 34, 56, 0.17); left: 0; top: 0; z-index: -1; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .ys-box h2{ color: #ffffff; text-align: center; max-width: 756px; margin: 0 auto 43px; } .ys-info{ width: 50%; padding-right: 35px; padding-top: 40px; } .ys-info li{ padding-left: 117px; color: #ffffff; font-size: 18px; line-height: 32px; margin-bottom: 50px; position: relative; } .ys-info strong{ color: #ffcd56; display: block; } .ys-info li:before{ border-radius: 50%; box-shadow: 0px 0px 24px 0px rgba(5, 34, 56, 0.17); position: absolute; width: 86px; height: 86px; background: url("../images/num1.png") center no-repeat; top: 10px; left: 0; content: ''; } .ys-info li.yitem2:before{ background: url("../images/num2.png") center no-repeat; } .ys-info li.yitem3:before{ background: url("../images/num3.png") center no-repeat; } .ys-info li.yitem3{ margin-bottom: 70px; } .ys-img{ position: absolute; width: 50%; max-width: 960px; left: 50%; bottom: 0; display: block; border-top-left-radius: 10px; } /*case*/ .case-box{ margin-bottom: 115px; } .case-box h2{ margin-bottom: 50px; color: #333; text-align: center; } .case-item{ position: relative; margin-bottom: 68px; } .case-info p i{ margin-left: 36px; } .case-info{ width: 50%; } .case-info h3 a{ color: #333333; font-size: 26px; line-height: 36px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s ; -ms-transition: all 0.3s ; -o-transition: all 0.3s ; transition: all 0.3s ; } .case-info h3{ margin-bottom: 31px; color: #333333; font-size: 26px; line-height: 36px; } .case-info p{ font-size: 16px; line-height: 26px; color: #666666; margin-bottom: 15px; } .case-info p span{ font-weight: bold; color: #4670c6; } .case-info a.btn{ display: block; width: 292px; height: 58px; line-height: 58px; text-align: center; color: #ffffff; background: #f36c1d; font-size: 20px; font-weight: bold; text-shadow: 3.064px 2.571px 4px rgba(40, 52, 62, 0.1); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; margin: 33px 0 35px; } .case-text{ width: 74%; max-width: 1032px; padding:40px 40px 44px 56px; background: url("../images/xw.png"); box-shadow: 0px 0px 24px 0px rgba(5, 34, 56, 0.17); color: #ffffff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; font-size: 16px; line-height: 32px; position: relative; } .case-text:after{ position: absolute; content: ''; width: 71px; height: 71px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: url("../images/icon_37.png") center; box-shadow: 0px 0px 24px 0px rgba(5, 34, 56, 0.17); } .case-text strong{ color: #ffcd56; font-weight: bold; font-size: 18px; } .case-img{ position: absolute; width: 50%; top: 0; overflow: hidden; } .case-img img{ display: block; width: 100%; } .case-right .case-img{ left: 0; border-top-right-radius: 80px; } .case-right .case-info,.case-right .case-text{ float: right; } .case-left .case-img{ right: 0; border-top-left-radius: 80px; } .case-left .case-info,.case-left .case-text{ float: left; } .case-right .case-info h3{ margin-top: 38px; } .case-right .case-info{ padding-left: 68px; padding-right: 60px; } .case-left .case-info h3{ margin-top: 38px; margin-bottom: 30px; } .case-left .case-info{ padding: 0 47px; } .case-left .case-info p{ margin-bottom: 12px; } .case-left .case-info a.btn{ margin-top: 44px; margin-bottom: 46px; } .case-left .case-text:after{ bottom: -35px; left: -35px; } .case-left .case-text{ padding-top: 66px; padding-bottom: 0; height: 212px; } .case-right .case-text:after{ top: -35px; right: -35px; } /*footer*/ .footer{ background: url("../images/mbg.jpg") center top no-repeat; padding-top: 102px; } .footer h2{ color: #ffffff; font-size: 40px; font-family: flyfont; margin-bottom: 12px; } .msg-text{ font-size: 18px; line-height: 36px; color: #ffffff; width: 928px; margin-bottom: 30px; } .msg{ background: #ffffff; width: 62%; max-width: 873px; -webkit-border-radius: 10px 10px 80px 10px; -moz-border-radius: 10px 10px 80px 10px; border-radius: 10px 10px 80px 10px; padding: 40px 0 40px; float: left; } .f-right{ float: right; width: 378px; margin-top: 46px; } .msg form{ width: 80%; display: block; margin: 0 auto; } .msg .msg-item{ padding-left: 20px; border-radius: 4px; height: 60px; line-height: 60px; float: left; background-color: rgb(255, 255, 255); box-shadow: 0px 3px 20px 0px rgba(4, 62, 97, 0.1); -webkit-border-radius: 4px 4px 30px 4px; -moz-border-radius: 4px 4px 30px 4px; border-radius: 4px 4px 30px 4px; width: 48.5%; margin-right: 1.5%; margin-bottom: 35px; } .msg .msg-item:nth-of-type(2n){ margin-right: 0; } .msg input{ font-size: 16px; color: #666666; width: 100%; } .msg .msg-textarea{ width: 100%; padding: 25px 20px 10px; height: auto; margin-top: -6px; } .msg .msg-textarea textarea{ width: 100%; font-size: 16px; line-height: 32px; height: 180px; resize: none; } .msg button{ width: 237px; height: 58px; background: #f36c1d; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; text-align: center; line-height: 58px; font-size: 20px; color: #ffffff; font-weight: bold; text-shadow: 3.064px 2.571px 4px rgba(40, 52, 62, 0.1); cursor: pointer; } .f-email{ color: #ffffff; font-weight: bold; font-size: 20px; } .f-email a{ font-size: 26px; color: #ffcd56; position: relative; } .f-email a:after{ content: ''; position: absolute; width: 100%; height: 2px; background: #ffcd56; bottom: -6px; left: 0; } .f-right .btn{ border-radius: 10px; background-color: rgb(243, 108, 29); width: 237px; height: 58px; display: block; line-height: 58px; text-shadow: 3.064px 2.571px 4px rgba(40, 52, 62, 0.1); color: #ffffff; text-align: center; font-weight: bold; font-size: 20px; margin: 56px 0 30px; } .f-right p{ font-size: 18px; line-height: 36px; color: #ffffff; } .f-email div{ margin-top: 44px; margin-bottom: 13px; } .f-bar{ padding-top: 58px; padding-bottom: 43px; color: #ffffff; text-align: center; font-size: 18px; } .msg-email{ position: relative; } .msg-email:before{ position: absolute; content: '*'; color: #ff0000; left: 110px; top: 0; line-height: 50px; } .hidex:before{ display: none; } /* Chat Online */ .show-fix{position: fixed;right: 12px;top:220px;width: 145px;height: 345px;z-index: 9999;} .fix-online{position: absolute;top: 0;width: 100%;height:100%; cursor: pointer;} .fix-msg{position: absolute;left: 0;bottom:0;width: 100%;color: #666;line-height: 20px;font-size: 16px;background: url(../images/fix-icon.png) no-repeat 36px top;padding: 26px 0 30px 36px;} .fix-msg:hover{color: #FB605A;background-image: url(../images/fix-icons.png);} .show-fix p{ width:140px;color:#FFF;padding:10px 15px;font-weight:400;line-height:1.6;background-color:#FB605A;left:-60px;top:12%;-webkit-transition:all .3s cubic-bezier(.86,0,.07,1);transition:all .3s cubic-bezier(.86,0,.07,1);-webkit-box-shadow:0 2px 2px rgba(0,0,0,.2);box-shadow:0 2px 2px rgba(0,0,0,.2);font-size:16px;border-radius:3px;position:absolute;transition:.5s;-ms-transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;-o-transition:.5s;opacity:0;filter:alpha(opacity=0);z-index:9;font-family:"思源黑体 cn"} .show-fix p:after{content:'';position:absolute;height:20px;width:20px;-webkit-box-shadow:none;box-shadow:none;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;z-index:50;background-color:#FB605A;-webkit-box-shadow:3px 3px 10px 0 rgba(281,37,29,.2);box-shadow:3px 3px 10px 0 rgba(281,37,29,.2);right:-6px;top:50%;margin-top:-10px} .show-fix .show{left:-150px;opacity:1;filter:alpha(opacity=100);} .fix-top{position: fixed;right: 20px;bottom:80px;width: 48px;height: 48px;cursor: pointer;z-index: 9998;display: none;} .hover-btn{ -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .hover-btn:hover{ -webkit-border-radius: 50px !important; -moz-border-radius: 50px !important; border-radius: 50px !important; } .menu{ width: 40px; height: 40px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: url("../images/menu.png") center no-repeat; background-size: 36px; display: none; } .mnav{ position: absolute; right: 3%; top: 85px; background: #ffffff; z-index: 99999; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; overflow: hidden; -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.3); -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.3) ; box-shadow: 0 0 10px 0 rgba(0,0,0,0.3) ; display: none; } .mnav li{ height: 42px; line-height: 42px; text-align: center; font-size: 14px; width: 160px; text-transform: uppercase; border-bottom: 1px solid #f1f1f1; } .mheight{ height: 60px; display: none; } .mfix-show{position: fixed;bottom: 0;width: 100%;z-index: 1000; display: none;} .mfix-show li{ display: none; float: left; width: 50%; text-align: center; height: 60px; line-height: 60px; background: -webkit-linear-gradient(left, #1057E3 0%,#30A2FB 100%); background: -moz-linear-gradient(left, #1057E3 0%, #30A2FB 100%); background: -ms-linear-gradient(left, #1057E3 0%,#30A2FB 100%); background: -o-linear-gradient(left, #1057E3 0%,#30A2FB 100%); background: linear-gradient(to right, #1057E3 0%,#30A2FB 100%); -webkit-box-shadow: 0 -10px 20px rgba(52,124,206,.4); -moz-box-shadow: 0 -10px 20px rgba(52,124,206,.4); -ms-box-shadow: 0 -10px 20px rgba(52,124,206,.4); -o-box-shadow: 0 -10px 20px rgba(52,124,206,.4); box-shadow: 0 -10px 20px rgba(52,124,206,.4); } .mfix-show li img { width: 30px; margin-right: 15px; } .mfix-show li a, .mfix-show li span { display: block; color: #A8D3FC; } .mfix-show li:nth-child(1) { -webkit-border-top-left-radius: 10px; -moz-border-top-left-radius:10px; -ms-border-top-left-radius:10px; -o-border-top-left-radius:10px; border-top-left-radius:10px; } .mfix-show li:nth-child(2) { -webkit-border-top-right-radius:10px; -moz-border-top-right-radius:10px; -ms-border-top-right-radius:10px; -o-border-top-right-radius:10px; border-top-right-radius:10px; } .xs-show{ display: none; height: 10px; } /*>1920*/ @media screen and (min-width:1921px){ } /*1600-1920*/ @media screen and (max-width:1920px){ } @media screen and (max-width:1900px){ .ys-img{ top: 280px; } .case-text:after{ width: 50px; height: 50px; background-size: 50px; } .case-right .case-text:after{ top: -25px; right: -25px; } .case-left .case-text:after{ left: -25px; bottom: -25px; } } /*1440-1600*/ @media screen and (max-width:1599px){ .nav li{ margin-right: 45px; } .lc-info a.btn{ position: static; } } /*1280-1440*/ @media screen and (max-width:1439px){ .logo{ margin-right: 30px; } .header .btn{ display: none; } .cty-list p{ font-size: 14px; } .case-img{ width: 52%; } .case-text{ width: 100%; } } /*調的是1024到1279之間*/ @media screen and (max-width:1279px){ .nav{ display: none; } .ys-info li{ padding-left: 100px; } .ys-info li:before{ width: 70px; height: 70px; -webkit-background-size: 70px 70px; background-size: 70px 70px; } .ys-info li.yitem2:before{ width: 70px; height: 70px; -webkit-background-size: 70px 70px; background-size: 70px 70px; } .menu{ display: block; float: right; } .header{ padding: 20px 0; margin-bottom: 40px; } .main{ float: none; width: 100%; } .main-pro{ width: 100%; float: none; max-width: 100%; margin-top: 20px; } .main-pro li{ float: left; width: 20%; } .main-pro:after{ clear: both; content: ''; display: block; width: 100%; height: auto; background: 0; position: static; } .main-pro:before{ width: 98%; left: 1%; height: 92%; top: 4%; } .main-pro li:first-child:before{ display: none; } .main-pro li img{ height: 57px; } .main h1{ font-size: 60px; margin-bottom: 30px; } .main-text{ margin-top: 40px; } .card-text{ width: 100%; position: static; margin-bottom: 30px; } .cty-center{ padding-top: 0; padding-bottom: 60px; } .lc-img{ display: block; margin: 15px auto; } .ys-box h2{ width: 94%; margin-left: 3%; margin-right: 3%; max-width: 1024px; } .lc-box{ padding-top: 20px; margin-bottom: 20px; } .lc-box:before{ display: none; } .ys-box{ padding-top: 60px; margin-bottom: 50px; } .ys-box h2{ margin-bottom: 20px; } .ys-img{ position: static; width: 50%; display: block; margin: 0 auto; } .ys-info{ width: 100%; } .case-img{ position: static; width: 60%; display: block; margin: 0 auto; } .case-info{ width: 100%; } .case-right .case-info, .case-right .case-text{ float: none; } .case-right .case-info h3{ margin-top: 20px; margin-bottom: 10px; } .case-text{ padding: 20px 30px; } .msg form{ width: 90%; } .f-right{ width: 35%; } } /*調的是768到1024之間*/ @media screen and (max-width:1023px){ .header{ padding: 15px 0; margin-bottom: 30px; } .main h1{ font-size: 50px; line-height: 60px; } .main .code{ margin-bottom: 30px; } .main-pro{ margin-top: 40px; } .case-text strong{ display: block; } .show-fix{ display: none !important; } .main-box{ background-size: cover; } .mheight{ display: block; } .mfix-show{ display: block !important; } .cty-list p{ margin: 20px 0; } .case-left .case-text{ padding-top: 40px; } .lc-info{ float: none; width: 100%; } .ys-img{ width: 60%; } .msg-text{ width: 100%; margin-bottom: 10px; } .case-img{ width: 70%; } .case-text:after{ display: none; } .case-text{ background: #4671b7; } .case-item{ margin-bottom: 30px; } .case-left .case-info h3{ margin: 20px 0 10px ; } .case-info a.btn,.case-left .case-info a.btn{ margin: 15px 0 20px; } .case-box{ margin-bottom: 50px; } .footer{ padding-top: 50px; background-size: cover; } .msg,.f-right{ width: 100%; float: none; } .f-email div{ display: inline-block; margin-top: 20px; } .f-right{ margin-top: 10px; } .f-email a{ margin: 0 20px; } .f-right .btn{ margin: 30px 0 10px; } .f-right p{ margin-bottom: 10px; font-size: 16px; line-height: 26px; } .f-bar{ padding: 25px 0 20px; font-size: 16px; } } /*調的是480到768之間*/ @media screen and (max-width:767px){ .xs-show{ display: block; } .case-left .case-text{ padding: 20px 30px; height: auto; } .case-info h3 a{ font-size: 22px; line-height: 32px; } .header{ margin-bottom: 20px; padding: 15px 0; } .fix-top{ right: 0.75rem; bottom: 170px; width: 36px; height: 36px; } .menu{ width: 30px; height: 30px; background-size: 30px; } .logo img{ width: 90px; } .main h1{ font-size: 40px; line-height: 50px; } .main .code{ width: 47%; margin: 0 1% 10px 1%; font-size: 16px; line-height: 32px; background-size: 100%; } .main p{ font-size: 16px; line-height: 32px; margin: 10px 0; } .main a.btn1, .main a.btn2{ width: 47%; margin: 20px 1% 20px 1%; height: 50px; line-height: 50px; font-size: 16px; } .h-email{ font-size: 16px; line-height: 32px; } .main-pro p{ font-size: 14px; } .main-pro li img{ height: 48px; } .main-text{ margin-top: 20px; margin-bottom: 20px; } .main-text h2{ font-size: 28px; line-height: 38px; margin-top: 30px; margin-bottom: 10px; } .main-text p{ font-size: 16px; line-height: 30px; } .card-text{ font-size: 16px; line-height: 30px; margin-bottom: 50px; } .cty-list li{ width: 27%; margin: 0 3%; } .cty-list li:last-child{ display: none; } .yq1{ -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.2); -moz-box-shadow: 0 0 8px rgba(0,0,0,0.2); box-shadow: 0 0 8px rgba(0,0,0,0.2); } .mq{ margin-top: -60px !important; } .cty-list p{ margin: 10px 0; } .cty-center{ padding-bottom: 20px; } .lc-img{ width: 100%; } .m-tit{ font-size: 28px; line-height: 38px; } .case-box h2{ margin-bottom: 20px; } .lc-info h2{ margin: 20px 0 10px; } .lc-info p{ font-size: 16px; line-height: 30px; } .lc-info ul{ margin: 20px 0 36px; } .lc-box:after{ display: none; } .lc-box{ padding-bottom: 30px; margin-top: 20px; margin-bottom: 40px; } .ys-box{ padding-top: 30px; } .ys-img{ width: 94%; margin: 0 auto; } .ys-info{ padding-top: 30px; padding-right: 0; } .ys-info li{ font-size: 16px; line-height: 30px; margin-bottom: 25px; padding-left: 80px; } .ys-info li:before{ width: 60px; height: 60px; background-size: 60px; } .ys-info li.yitem2:before,.ys-info li.yitem3:before{ background-size: 60px; } .case-img{ width: 94%; } .case-right .case-info,.case-left .case-info{ padding: 0; } .footer{ padding-top: 30px; } .footer h2{ font-size: 28px; line-height: 38px; } .msg-text{ font-size: 16px; line-height: 30px; margin-bottom: 10px; } .msg, .f-right{ margin-top: 20px; } .f-email{ font-size: 16px; } .f-email div{ margin-top: 12px; margin-bottom: 10px; } .f-email a{ font-size: 20px; } .msg .msg-item{ width: 100%; margin-right: 0; } .lc-info a.btn{ height: 50px; line-height: 50px; font-size: 16px; width: 200px; } .lc-info a.btn img{ width: 26px; } .case-info a.btn, .case-left .case-info a.btn{ font-size: 16px; height: 50px; line-height: 50px; } .f-right .btn{ font-size: 16px; height: 50px; line-height: 50px; } .f-right .btn img{ width: 26px; } .msg button{ width: 210px; height: 50px; line-height: 50px; font-size: 16px; } .case-info p i{ margin-left: 0; display: block; margin-top: 10px; } .case-info p{ margin-bottom: 10px; } } /*調的是360到480之間*/ @media screen and (max-width:479px){ .case-text{ padding: 15px; } .case-left .case-text{ padding: 15px; } .cty-list p{ white-space: normal; line-height: 45px; height: 45px; } .cty-list p span{ display: inline-block; line-height: 20px; vertical-align: middle; } .main-pro li{ float: none; display: inline-block; width: 31%; } .main-pro{ text-align: center; } .main h1{ font-size: 30px; line-height: 40px; margin: 10px 0; } .main .code{ font-size: 14px; line-height: 26px; padding-top: 12px; padding-bottom: 10px; height: auto; } .main a.btn1, .main a.btn2{ font-size: 14px; } .main-text h2{ font-size: 24px; line-height: 34px; margin-bottom: 10px; } .header{ padding: 10px 0; } .footer h2{ font-size: 24px; line-height: 34px; } .ys-info li{ padding-left: 0; } .ys-info li:before{ display: none; } .m-tit{ font-size: 24px; line-height: 34px; } .ys-info li.yitem3{ margin-bottom: 30px; } .case-box h2{ margin-bottom: 20px; } .ys-box{ margin-bottom: 30px; } .msg, .f-right{ margin-top: 10px; } .msg{ padding:20px 0; } .msg .msg-item{ margin-bottom: 20px; } } /*調的是320到360之間*/ @media screen and (max-width:359px){ .card-text{ padding: 30px 15px 20px; } .main a.btn1 img, .main a.btn2 img{ width: 26px; } .main .code{ width: 100%; margin: 10px 0; background: #425277; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } }