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: 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; margin: 0 auto; } li { list-style: none; } button, input, select, textarea { font-size: 100%; border: none; outline: none; } textarea { resize: none; } table { border-collapse: collapse; border-right: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; } .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; } /*main*/ .main-view { background: url("../images/main-bg.jpg") top center no-repeat; background-size: cover; } .header { padding: 38px 0 38px; margin-bottom: 84px; position: relative; } .header:after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; display: block; height: 1px; background: url("../images/header-bor.png") center no-repeat; } .logo { float: left; margin-right: 54px; } .nav { float: left; } .nav li { float: left; margin-left: 50px; } .nav li:hover a { color: rgb(253, 168, 43); } .nav li:first-child { margin-left: 0; } .nav li a { display: block; line-height: 45px; color: #ffffff; font-size: 18px; -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.active a { font-weight: bold; color: rgb(253, 168, 43); } .header-code { float: right; line-height: 40px; } .header-code a { display: inline-block; width: 114px; height: 40px; text-align: center; color: #ffffff; line-height: 40px; font-size: 17px; margin-left: 36px; font-weight: bold; background: rgb(253, 168, 43); background-image: -moz-linear-gradient(90deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); background-image: -webkit-linear-gradient(90deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); background-image: -ms-linear-gradient(90deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); -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-code a:hover { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .header-code span { color: #ffffff; font-size: 14px; } .main-pro { padding: 0 54px 82px 42px; position: relative; } .main-btn { font-weight: bold; text-shadow: 0.407px 0.914px 4.95px rgba(7, 21, 36, 0.15); cursor: pointer; } .main-info { float: left; max-width: 500px; } .main-img { float: right; } .main-info h1 { font-size: 55px; line-height: 74px; color: #ffffff; font-weight: bold; margin-bottom: 80px; position: relative; } .main-info h1:after { content: ''; position: absolute; left: 0; bottom: -32px; width: 112px; height: 1px; background: url("../images/h1-bor.png") center no-repeat; } .main-info h1+span { margin-right: 18px; } .main-info span { display: inline-block; width: 224px; height: 100px; text-align: center; line-height: 36px; padding-top: 14px; font-size: 18px; color: #ffffff; background: url("../images/type-bg.png"); } .main-info span strong { color: #fda82b; font-size: 24px; } .main-info p { font-size: 18px; line-height: 36px; color: #ffffff; position: relative; margin: 45px 0 32px; } .main-info p a { color: #ffa20f; font-size: 20px; font-weight: bold; position: relative; } .main-info p a:after { content: ''; position: absolute; display: block; width: 90%; height: 1px; background: #ffa20f; left: 5%; bottom: 0; } .main-info p:before { position: absolute; content: ''; display: block; width: 30px; height: 30px; background: url("../images/main-email-icon.png") center no-repeat; left: -40px; top: 6px; } .main-btn { width: 447px; height: 62px; text-align: center; line-height: 62px; display: block; font-size: 18px; position: relative; } .main-info .btn1 { color: #000000; background: #ffffff; border: 1px solid #fd8e2b; -webkit-box-shadow: 4px 4px 0 0 #959595; -moz-box-shadow: 4px 4px 0 0 #959595; box-shadow: 4px 4px 0 0 #959595; margin-bottom: 30px; } .main-info .btn2 { color: #fff; border: 1px solid #fff; background: rgb(253, 168, 43); background-image: -moz-linear-gradient(22deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); background-image: -webkit-linear-gradient(22deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); background-image: -ms-linear-gradient(22deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); -webkit-box-shadow: 4px 4px 0 0 #6c3300; -moz-box-shadow: 4px 4px 0 0 #6c3300; box-shadow: 4px 4px 0 0 #6c3300; margin-bottom: 30px; } .main-info .btn3 { color: #fff; background: rgb(23, 84, 171); border: 1px solid #fff; background-image: -moz-linear-gradient(22deg, rgb(23, 84, 171) 0%, rgb(30, 110, 225) 100%); background-image: -webkit-linear-gradient(22deg, rgb(23, 84, 171) 0%, rgb(30, 110, 225) 100%); background-image: -ms-linear-gradient(22deg, rgb(23, 84, 171) 0%, rgb(30, 110, 225) 100%); -webkit-box-shadow: 4px 4px 0 0 #0b50b7; -moz-box-shadow: 4px 4px 0 0 #0b50b7; box-shadow: 4px 4px 0 0 #0b50b7; } .main-icon { position: absolute; top: -48px; right: 0; } /*serve*/ .serve-list { padding: 44px 0 48px; background: rgb(10, 19, 42); background-image: -moz-linear-gradient(158deg, rgb(10, 19, 42) 0%, rgb(16, 76, 138) 100%); background-image: -webkit-linear-gradient(158deg, rgb(10, 19, 42) 0%, rgb(16, 76, 138) 100%); background-image: -ms-linear-gradient(158deg, rgb(10, 19, 42) 0%, rgb(16, 76, 138) 100%); box-shadow: 0px 0px 39.6px 0.4px rgba(67, 67, 67, 0.2); } .serve-con { position: relative; background: url("../images/serve.png") center no-repeat; background-size: 100%; } .serve-top { overflow: hidden; width: 0; -webkit-transition: width 0.8s linear; -moz-transition: width 0.8s linear; -ms-transition: width 0.8s linear; -o-transition: width 0.8s linear; transition: width 0.8s linear; } .serve-top img { width: auto; max-width: none; } .serve-con:hover .serve-top { width: 100%; } .mate-bg { padding: 68px 0 15px; background: url("../images/mate-bg.jpg") center top no-repeat; overflow: hidden; margin-bottom: 40px; } .mate-info { float: right; max-width: 518px; white-space: normal; } .mate-view { position: relative; } .mate-view:before { content: ''; display: block; width: 1100px; height: 267px; background: #104c8a; position: absolute; bottom: 0; right: 560px; } .mate-img { position: absolute; top: 0; right: 600px; box-shadow: 0px 0px 39.6px 0.4px rgba(67, 67, 67, 0.2); } .mate-info h2 { font-size: 36px; line-height: 46px; font-weight: bold; color: #000; margin-bottom: 36px; margin-top: 20px; } .mate-info p { font-size: 18px; line-height: 36px; } .mate-info .btn { display: block; border: 1px solid rgb(255, 255, 255); text-align: center; line-height: 62px; width: 224px; height: 62px; background: rgb(253, 168, 43); margin-top: 60px; font-size: 18px; text-shadow: 0.407px 0.914px 4.95px rgba(7, 21, 36, 0.15); background-image: -moz-linear-gradient(22deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); background-image: -webkit-linear-gradient(22deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); background-image: -ms-linear-gradient(22deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); -webkit-box-shadow: 4px 4px 0 0 #6c3300; -moz-box-shadow: 4px 4px 0 0 #6c3300; box-shadow: 4px 4px 0 0 #6c3300; color: #ffffff; font-weight: bold; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } /*Raymond*/ .ray-view h2 { font-size: 36px; line-height: 1.3; font-weight: bold; margin-bottom: 40px; } .ray-view p { font-size: 18px; line-height: 2; } .ray-view { margin-bottom: 75px; font-size: 0; } .ray-view .wenan { width: 53%; display: inline-block; vertical-align: middle; padding-right: 5%; } .ray-view .pic { width: 47%; display: inline-block; vertical-align: middle; } .ray-view .pic img, .ray-view .pic video { width: 100%; display: block; } .ray-view .pic .img_shadow{ box-shadow: 8.135px 18.271px 39.6px 0.4px rgba(29, 75, 145, 0.2); } /*Structure*/ .str-bg { background: url("../images/wen-bg.jpg") center top no-repeat; padding-bottom: 65px; font-size: 0; } .str-img { width: 52%; display: inline-block; vertical-align: middle; box-shadow: 4px 9px 20px rgba(29, 75, 145, 0.2); } .str-bg video.str-img{ box-shadow: none; } .str-info { width: 48%; display: inline-block; vertical-align: middle; padding-left: 5%; } .str-info h2 { font-size: 36px; line-height: 46px; margin-bottom: 40px; } .str-info p,.str-info li { font-size: 18px; line-height: 1.8; } .str-info div.btn-bar { width: 224px; height: 62px; position: relative; margin-top: 70px; } .str-info a.btn { width: 224px; height: 62px; display: block; background: rgb(253, 168, 43); background-image: -moz-linear-gradient(22deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); background-image: -webkit-linear-gradient(22deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); background-image: -ms-linear-gradient(22deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); text-shadow: 0.407px 0.914px 4.95px rgba(7, 21, 36, 0.15); font-size: 18px; font-weight: bold; line-height: 62px; color: #ffffff; text-align: center; font-weight: bold; -webkit-box-shadow: 4px 4px 0 0 #6c3300; -moz-box-shadow: 4px 4px 0 0 #6c3300; box-shadow: 4px 4px 0 0 #6c3300; } .btn-bar img { position: absolute; bottom: -4px; right: -50px; } /*work*/ .work-bg { background: url("../images/work-bg.jpg") center top no-repeat; background-size: cover; padding: 44px 0; margin-bottom: 60px; } .work-img { max-width: 38%; float: left; margin-left: 4%; } .work-info { float: left; width: 58%; margin-top: 64px; } .work-info h2 { font-weight: bold; font-size: 36px; line-height: 46px; color: #ffffff; margin-bottom: 42px; } .work-info p { font-size: 18px; line-height: 36px; color: #ffffff; } .tea-view h2 { font-size: 36px; margin-bottom: 40px; text-align: center; font-weight: bold; } .tea-view { margin-bottom: 62px; } .tea-list { display: none; } .tea-tab { margin-bottom: 40px; font-size: 0; } .tea-tab-item { width: 45%; height: 62px; display: inline-block; margin: 0 2.5% 30px; font-size: 18px; line-height: 62px; text-align: center; padding: 0 40px; border: 1px solid #f5f8fc; cursor: pointer; } .tea-tab-item span { margin-right: 30px; display: inline-block; } .tea-tab-item i { display: inline-block; width: 34px; height: 34px; background-color: #fff; background-image: url('../images/tea-icon.png'); background-position: center; background-repeat: no-repeat; vertical-align: middle; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 1px solid #000000; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .tea-tab .active i { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); border: 1px solid #fff; } .tea-tab .active span { font-size: 20px; font-weight: bold; } .tea-tab .active { background: #ecf1f7; } .tea-bg td { padding: 10px 2px; word-break: break-word; font-size: 16px; cursor: pointer; border-left: 1px solid #d9d9d9; border-top: 1px solid #d9d9d9; } .tea-hover { background: #114c89; color: #ffffff; } .tea-bg p { margin-top: 20px; font-size: 18px; line-height: 1.8; } /*Features*/ .fet-view h2 { font-size: 36px; line-height: 46px; text-align: center; margin-bottom: 28px; } .fet-view { margin-bottom: 48px; } .fet-list li { float: left; width: 25%; margin-bottom: 30px; font-size: 18px; line-height: 28px; height: 28px; padding-left: 18px; position: relative; } .fet-list li:before { position: absolute; display: block; content: ''; width: 4px; height: 20px; left: 0; top: 4px; background: #0b61e2; } /*Manufacturer*/ .mf-bg { background: url("../images/mf-bg.jpg") center top no-repeat; padding-bottom: 46px; margin-bottom: 56px; } .mf-info { float: right; width: 44%; padding-top: 80px; } .mf-info h2 { margin-bottom: 40px; color: #ffffff; font-weight: bold; font-size: 36px; line-height: 46px; } .mf-info p { font-size: 18px; line-height: 36px; color: #ffffff; position: relative; margin-bottom: 3px; } .mf-info p:before { position: absolute; content: ''; display: block; width: 14px; height: 14px; background: url("../images/mf-icon.png") center no-repeat; left: -22px; top: 11px; } .mf-info a.btn { display: block; border: 1px solid rgb(255, 255, 255); text-align: center; line-height: 62px; width: 224px; height: 62px; background: rgb(253, 168, 43); margin-top: 52px; font-size: 18px; background-image: -moz-linear-gradient(22deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); background-image: -webkit-linear-gradient(22deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); background-image: -ms-linear-gradient(22deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); text-shadow: 0.407px 0.914px 4.95px rgba(7, 21, 36, 0.15); -webkit-box-shadow: 4px 4px 0 0 #6c3300; -moz-box-shadow: 4px 4px 0 0 #6c3300; box-shadow: 4px 4px 0 0 #6c3300; color: #ffffff; font-weight: bold; } .mf-top { position: relative; margin-bottom: 80px; } .mf-img { position: absolute; right: 50%; top: 0; max-width: none; width: auto; } .mf-list li { float: left; width: 31%; margin-left: 3.5%; } .mf-list li:first-child { margin-left: 0; } .mf-list li img { display: block; -webkit-box-shadow: 8.135px 18.271px 39.6px 0.4px rgba(29, 75, 145, 0.2); -moz-box-shadow: 8.135px 18.271px 39.6px 0.4px rgba(29, 75, 145, 0.2); box-shadow: 8.135px 18.271px 39.6px 0.4px rgba(29, 75, 145, 0.2); } /*case*/ .case-bg { background: url("../images/case-bg.jpg") center bottom no-repeat; padding-bottom: 40px; margin-bottom: 55px; overflow: hidden; } .case-bg h2 { text-align: center; font-size: 36px; margin-bottom: 40px; font-weight: bold; } .case-list li { float: left; width: 46.5%; margin-left: 7%; position: relative; margin-bottom: 60px; } .case-list li:first-child { margin-left: 0; } .case-list .case-item3 { margin-left: 0; } .case-img { -webkit-box-shadow: 8.135px 18.271px 39.6px 0.4px rgba(29, 75, 145, 0.2); -moz-box-shadow: 8.135px 18.271px 39.6px 0.4px rgba(29, 75, 145, 0.2); box-shadow: 8.135px 18.271px 39.6px 0.4px rgba(29, 75, 145, 0.2); overflow: hidden; -webkit-border-radius: 0 0 10px 0; -moz-border-radius: 0 0 10px 0; border-radius: 0 0 10px 0; display: block; } .case-img img { display: block; -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-name { display: block; background: url("../images/case-name.jpg") left center no-repeat; height: 80px; line-height: 80px; padding-left: 80px; font-size: 20px; color: #1c4b92; max-width: 542px; margin-top: -40px; position: relative; } .case-name span { padding-right: 36px; position: relative; background: url("../images/case-jt.png") center right no-repeat; } .case-name:before { position: absolute; width: 0; height: 80px; background: #0b50b7; content: ''; left: 0; top: 0; -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-list li:hover .case-img img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .case-list li:hover .case-name:before { width: 100%; } .case-list li:hover .case-name span { color: #ffffff; background: url("../images/case-jt2.png") center right no-repeat; } .case-view { position: relative; } .case-view:before { content: url("../images/case-dicon.png"); position: absolute; top: 16px; right: -50px; } /*Products*/ .pro-bg { background: url("../images/pro-img.jpg") right top no-repeat; padding-top: 60px; margin-bottom: 50px; } .pro-view h2 { color: #ffffff; font-size: 36px; margin-bottom: 75px; } .pro-list li { float: left; width: 24%; margin-left: 1.3%; } .pro-list li:first-child { margin-left: 0; } .pro-img { overflow: hidden; display: block; margin-bottom: 10px; } .pro-img img { display: block; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .pro-name { font-size: 18px; line-height: 32px; padding-right: 38px; display: block; background: url("../images/pro-jt.png") right 7px no-repeat; margin-right: 10px; } .pro-list li:hover .pro-name { color: #1c4b92; } .pro-list li:hover .pro-img img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } /*msg*/ .footer { text-align: center; color: #ffffff; font-size: 18px; background: #091123; height: 60px; line-height: 60px; } .msg-box { background: url("../images/msg-bg.jpg") center top no-repeat; padding: 56px 0 45px; } .msg-box h2 { color: #ffffff; font-weight: bold; font-size: 36px; line-height: 44px; } .msg-sectit { font-size: 16px; line-height: 26px; color: #ffffff; margin-bottom: 25px; } .msg-box .col-r { width: 27%; padding-right: 60px; float: right; margin-top: 74px; } .msg-box .col-l { width: 56%; margin-top: 20px; float: left; } .msg-item { height: 60px; background: #ffffff; -webkit-border-radius: 0 0 20px 0; -moz-border-radius: 0 0 20px 0; border-radius: 0 0 20px 0; float: left; width: 48%; padding-left: 16px; padding-right: 16px; margin-left: 4%; margin-bottom: 35px; } .msg-item input { width: 100%; height: 60px; line-height: 60px; font-size: 16px; color: #666; } .msg-item:first-child { margin-left: 0; } .msg-email { margin-left: 0; position: relative; } .main-email a:hover { color: #fff; text-shadow: 4px 2px 4px rgba(40, 52, 62, 0.2) } .main-email a:hover:after { background: #fff; } .msg-box .col-r strong a:hover { color: #fff; text-shadow: 4px 2px 4px rgba(40, 52, 62, 0.2) } .msg-box .col-r strong a:hover:after { background: #fff; } .msg-box .msg-textarea { margin-left: 0; width: 100%; height: 238px; box-sizing: border-box; padding-top: 25px; margin-top: -8px; margin-bottom: 40px; } .msg-box .msg-textarea textarea { width: 100%; line-height: 32px; color: #666; height: 190px; resize: none; } .sub-btn { display: block; border: 1px solid rgb(255, 255, 255); text-align: center; line-height: 62px; width: 274px; height: 62px; background: rgb(253, 168, 43); margin: 0 auto; font-size: 18px; background: rgb(253, 168, 43); text-shadow: 0.407px 0.914px 4.95px rgba(7, 21, 36, 0.3); background-image: -moz-linear-gradient(22deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); background-image: -webkit-linear-gradient(22deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); background-image: -ms-linear-gradient(22deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); -webkit-box-shadow: 4px 4px 0 0 #6c3300; -moz-box-shadow: 4px 4px 0 0 #6c3300; box-shadow: 4px 4px 0 0 #6c3300; color: #ffffff; font-weight: bold; cursor: pointer; } .sub-btn img { margin-left: 10px; } .msg-box .col-r h3 { margin-bottom: 16px; color: #ffffff; font-weight: bold; font-size: 24px; } .msg-box .col-r p { font-size: 18px; color: #ffffff; line-height: 36px; position: relative; } .msg-box .col-r p:before { content: ''; position: absolute; width: 20px; height: 20px; background: url("../images/list-icon2.png") center no-repeat; top: 8px; left: -32px; } .msg-btn { display: block; width: 224px; height: 62px; border: 1px solid rgb(255, 255, 255); text-align: center; line-height: 62px; font-size: 18px; background: rgb(253, 168, 43); background-image: -moz-linear-gradient(22deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); background-image: -webkit-linear-gradient(22deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); background-image: -ms-linear-gradient(22deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); text-shadow: 0.407px 0.914px 4.95px rgba(7, 21, 36, 0.15); -webkit-box-shadow: 4px 4px 0 0 #6c3300; -moz-box-shadow: 4px 4px 0 0 #6c3300; box-shadow: 4px 4px 0 0 #6c3300; color: #ffffff; font-weight: bold; cursor: pointer; margin: 34px 0 50px; } .msg-box .col-r strong { color: #ffffff; font-size: 20px; line-height: 40px; } .msg-box .col-r strong a { font-size: 27px; color: #ffa20f; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .msg-box .col-r strong a:after { content: ''; width: 100%; height: 2px; background: #ffa20f; position: absolute; left: 0; bottom: -4px; } .msg-email i { position: absolute; left: 110px; top: 6px; color: #ff0000; font-size: 20px; } /* 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; } .mate-info-img { display: none; } .serve-img { display: block; } .serve-sm-img { display: none; } /* 弹窗 */ .popu-msg { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 99999; display: none; } .mask-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); } .msg-close { position: absolute; right: 20px; top: 20px; background: url(../images/msg-close.png) no-repeat; width: 16px; height: 16px; cursor: pointer; } .popu-show { position: absolute; left: 50%; top: 50%; width: 96%; max-width: 800px; background-color: #FFF; -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .popu-show .msg-con { width: 100%; margin-left: 0; } .popu-show.foot-msg p { width: 100%; } .popu-show .msg-sub { left: 250px; } .popu-case { max-width: 660px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .popu-case .msg-fill { width: 100%; } .popu-case .fill-btn { text-align: center; margin-left: 0; } .popu-case .msg-close { top: -24px; right: -24px; } .msg-fill { float: left; width: 63%; padding: 22px 50px 36px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; background-color: #FFF; } .msg-fill li { position: relative; line-height: 70px; border-bottom: 1px dashed #DDD; } .msg-fill li img { position: absolute; left: 18px; top: 20px; width: 28px; height: auto; z-index: 9 } .msg-fill ul li input, .msg-fill ul li textarea { width: 100%; line-height: 30px; color: #606267; font-size: 20px; background: none; position: relative; z-index: 2; padding: 22px 20px 22px 68px; } .fl-area textarea { height: 180px; } .msg-fill span { position: absolute; left: 0; top: 0; width: 100%; line-height: 30px; color: #B5B8C1; font-size: 20px; padding: 22px 20px 22px 68px; } .msg-fill span i { color: #F3632D; padding-left: 2px; } .fill-btn { margin-top: 30px; margin-left: 50px; } .fill-btn input { color: #FFF; font-size: 20px; width: 180px; height: 50px; line-height: 50px; -webkit-border-radius: 10px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; background: -webkit-linear-gradient(top, #FFAA6E 0%, #F92C0B 100%); background: -moz-linear-gradient(top, #FFAA6E 0%, #F92C0B 100%); background: -ms-linear-gradient(top, #FFAA6E 0%, #F92C0B 100%); background: -o-linear-gradient(top, #FFAA6E 0%, #F92C0B 100%); background: linear-gradient(to bottom, #FFAA6E 0%, #F92C0B 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFAA6E, endColorstr=#F92C0B, GradientType=0); -webkit-box-shadow: 0 1px 6px rgba(255, 108, 44, .5); -moz-box-shadow: 0 1px 6px rgba(255, 108, 44, .5); -ms-box-shadow: 0 1px 6px rgba(255, 108, 44, .5); -o-box-shadow: 0 1px 6px rgba(255, 108, 44, .5); box-shadow: 0 1px 6px rgba(255, 108, 44, .5); cursor: pointer; margin-left: -6%; } .fill-btn input[type='submit'] { -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } .fill-btn input:hover { -webkit-box-shadow: inset 0 2px 16px rgba(255, 108, 44, .9); -moz-box-shadow: inset 0 2px 16px rgba(255, 108, 44, .9); -ms-box-shadow: inset 0 2px 16px rgba(255, 108, 44, .9); -o-box-shadow: inset 2px 16px rgba(255, 108, 44, 95); box-shadow: inset 0 2px 16px rgba(255, 108, 44, .9); } .msg-base { float: right; width: 30%; color: #FFF; padding-right: 2%; padding-top: 6%; } .msg-base strong { display: block; font-size: 32px; line-height: 1.1; margin: 55px 0 20px; } .msg-base a { color: #FFF; font-size: 20px; position: relative; } .msg-base a:after { content: ""; position: absolute; left: 0; bottom: 1px; width: 100%; height: 2px; background-color: #FFF; } .msg-base a:hover:after { display: none; } .msg-base span { display: inline-block; width: 190px; height: 46px; line-height: 46px; text-align: center; color: #FFF; font-size: 16px; background-color: #FF8800; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; cursor: pointer; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } .msg-base span:hover { background-color: #E5472E; } .msg-base p { font-size: 18px; line-height: 24px; margin-top: 60px; } #memail+span { left: 108px; } /* 弹窗 end */ .mate-info .btn:hover, .str-info a.btn:hover, .mf-info a.btn:hover, .sub-btn:hover, .msg-btn:hover { background-image: -moz-linear-gradient(180deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); background-image: -webkit-linear-gradient(180deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); background-image: -ms-linear-gradient(180deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); } .main-info .btn2:hover { background-image: -moz-linear-gradient(180deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); background-image: -webkit-linear-gradient(180deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); background-image: -ms-linear-gradient(180deg, rgb(253, 168, 43) 0%, rgb(253, 142, 43) 100%); } .main-info .btn3:hover { background-image: -moz-linear-gradient(180deg, rgb(23, 84, 171) 0%, rgb(30, 110, 225) 100%); background-image: -webkit-linear-gradient(180deg, rgb(23, 84, 171) 0%, rgb(30, 110, 225) 100%); background-image: -ms-linear-gradient(180deg, rgb(23, 84, 171) 0%, rgb(30, 110, 225) 100%); } .main-btn-icon2 { display: none; } .main-info .btn1:hover { color: #ffa20f; } .main-info .btn1:hover .main-btn-icon2 { display: inline; } .main-info .btn1:hover .main-btn-icon1 { display: none; } /*>1920*/ @media screen and (min-width: 1921px) { .main-view, .mate-bg, .str-bg, .work-bg, .mf-bg, .case-bg, .msg-box { background-size: 100% auto; } .pro-bg { background-position: center top; } } /*1800-1920*/ @media screen and (max-width: 1920px) {} /*1600-1800*/ @media screen and (max-width: 1799px) { .mate-img { right: 570px; } } /*1440-1600*/ @media screen and (max-width: 1599px) { .mate-view:before { bottom: 70px; } .mate-img { width: 800px; } .mate-info h2 { margin-top: 0; margin-bottom: 20px; } .mate-info .btn { margin-top: 30px; } .mf-info { width: 38%; } .mf-img { right: 43%; } .case-bg { margin-bottom: 0; } } /*1280-1440*/ @media screen and (max-width: 1439px) { .serve-list { display: none; } .header-code span { display: none; } .nav li a { font-size: 16px; line-height: 38px; height: 38px; } .logo img { width: 140px; } .header { padding: 20px 0; margin-bottom: 50px; } .main-info h1 { font-size: 42px; line-height: 50px; } .main-img { width: 52%; } .main-icon { width: 90px; height: 90px; top: -30px; right: -30px; } .main-pro { padding: 0 0 82px 42px; } .main-info span { font-size: 16px; } .main-info span strong { font-size: 22px; } .main-info p { margin-top: 30px; } .mate-info { float: none; width: 100%; max-width: none; } .mate-img { display: none; } .mate-view:before { display: none; } .ray-view h2,.str-info h2,.work-info h2{ margin-bottom: 20px; font-size: 32px; } .ray-view p,.str-info p, .str-info li,.work-info p{ font-size: 17px; } .mate-info-img { display: block; margin: 20px auto 10px; } .mate-info .btn { margin: 30px auto 0; } }