@font-face { font-family: 'sans-b'; src: url("../fonts/OpenSans-Bold.woff2") format("woff2"), url("../fonts/OpenSans-Bold.woff") format("woff"), url("../fonts/OpenSans-Bold.ttf") format("truetype"); font-display: swap; } @font-face { font-family: 'sans-r'; src: url("../fonts/OpenSans-Regular.woff2") format("woff2"), url("../fonts/OpenSans-Regular.woff") format("woff"), url("../fonts/OpenSans-Regular.ttf") format("truetype"); font-display: swap; } @font-face { font-family: 'sans-l'; src: url("../fonts/OpenSans-Light.woff2") format("woff2"), url("../fonts/OpenSans-Light.woff") format("woff"), url("../fonts/OpenSans-Light.ttf") format("truetype"); font-display: swap; } * { margin: 0; padding: 0; font-style: normal; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ul, ol, li { margin: 0; padding: 0; list-style: none; } input, textarea { outline: none; border: none; -webkit-appearance: none; } a { outline: none; color: inherit; } a:link { text-decoration: none; color: inherit; } a:visited { text-decoration: none; color: inherit; } a:hover { text-decoration: none; color: inherit; } a, a:hover, a:active, a:visited, a:link, a:focus { -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; outline: none; background: none; text-decoration: none; } video { border: none; outline: none; } button { border: none; outline: none; } a:focus { outline: 0; color: inherit; text-decoration: none; } img { width: 100%; border-width: 0px; } .f-left { float: left; } .f-right { float: right; } .clearfix:after { content: ''; display: block; clear: both; } body { font-family: "sans-r"; font-size: 16px; color: #999999; line-height: 30px; } a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } *:hover { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .trans, .top_intro .intro_text .intro_zx .zx-online, .top_intro .intro_text .intro_zx .zx-online:before, .top_intro .intro_text .intro_zx .zx-free, .mid_machine .mid_chat .chat_btn .chat_text, .mid_machine .mid_chat .chat_btn .chat_text:before, .form_main .message .line { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .container { width: 1500px; margin-left: auto; margin-right: auto; } .container:after { content: ''; display: block; clear: both; } .inline-ul { font-size: 0; } .inline-ul li { display: inline-block; vertical-align: top; } @media screen and (max-width: 1600px) { .container { width: 1280px; } } @media screen and (max-width: 1440px) { .container { width: 1120px; } } @media screen and (max-width: 1280px) { .container { width: 960px; } } @media screen and (max-width: 992px) { .container { width: 750px; } } @media screen and (max-width: 782px) { .container { width: 100%; padding-left: 20px; padding-right: 20px; } } @media screen and (max-width: 375px) { .container { padding-left: 15px; padding-right: 15px; } } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #999999; } input:-moz-placeholder, textarea:-moz-placeholder { color: #999999; } input::-moz-placeholder, textarea::-moz-placeholder { color: #999999; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #999999; } .wrap_top { background: url(../images/first_bg.jpg) center center no-repeat; background-size: cover; padding-top: 34px; } .logo-bar .logo { float: left; display: block; width: 121px; height: 51px; background: url("../images/logo.png") center no-repeat; background-size: 121px 51px; margin-right: 112px; } .logo-bar .contact { float: right; width: 160px; height: 56px; border: 2px solid #e0b152; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; font-size: 18px; color: #e0b152; text-align: center; line-height: 52px; -webkit-box-shadow: 0 10px 10px 0 transparent; -moz-box-shadow: 0 10px 10px 0 transparent; box-shadow: 0 10px 10px 0 transparent; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .logo-bar .contact:hover { -webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background: #e0b152; color: #ffffff; } .logo-bar .nav, .logo-bar .nav li { float: left; } .logo-bar .nav a { display: block; color: #FFFFFF; line-height: 52px; margin-right: 67px; position: relative; background: url("../images/nav-icon.png") center -20px no-repeat; background-size: 14px 12px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; font-size: 18px; } .logo-bar .nav li:last-child a { margin-right: 0; } .logo-bar .nav li a:after { position: absolute; width: 0px; height: 4px; 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; content: ''; background: rgba(224, 177, 82, 0); } .logo-bar .nav li.active a:after { width: 100%; content: ''; background: #e0b152; } .logo-bar .nav li.active a { background: url("../images/nav-icon.png") center top no-repeat; background-size: 14px 12px; } .logo-bar .nav li:hover a { background: url("../images/nav-icon.png") center top no-repeat; } .logo-bar .nav li:hover a:after { width: 100%; content: ''; background: #e0b152; } .top_intro { margin-top: 38px; padding-bottom: 95px; } .top_intro .intro_img { float: left; width: 54.5%; overflow: hidden; height: 625px; } .top_intro .intro_img img { border-radius: 30px; display: block; } .top_intro .intro_text { width: 45.5%; float: right; padding-left: 60px; position: relative; margin-top: 30px; z-index: 1; } .top_intro .intro_text .intro_title { position: relative; color: #ffffff; font-size: 50px; line-height: 60px; font-family: 'sans-b'; } .top_intro .intro_text .intro_title:before { content: ''; display: block; position: absolute; width: 100%; height: 8px; border-radius: 4px; left: -5px; bottom: 9px; background: linear-gradient(90deg, #ff9f45 0, rgba(255, 159, 69, 0) 60%, rgba(255, 159, 69, 0) 100%); z-index: -1; } .top_intro .intro_text .canshu_ul { margin-top: 50px; } .top_intro .intro_text .canshu_ul li { font-size: 20px; line-height: 1.5; padding-left: 38px; color: #fff; background: url(../images/intro_li.png) left center no-repeat; } .top_intro .intro_text .canshu_ul li span { font-family: 'sans-b'; } .top_intro .intro_text .canshu_ul li+li { margin-top: 20px; } .top_intro .intro_text .intro_p { margin-top: 30px; color: #ffffff; line-height: 1.5; max-width: 480px; } .top_intro .intro_text .intro_zx { margin-top: 45px; } .top_intro .intro_text .intro_zx .zx-online { display: inline-block; vertical-align: top; color: #ffffff; font-size: 22px; font-family: 'sans-b'; font-style: italic; padding-left: 90px; padding-right: 40px; position: relative; line-height: 26px; padding-top: 14px; padding-bottom: 13px; cursor: pointer; } .top_intro .intro_text .intro_zx .zx-online:before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; background-color: #ffb745; background-image: linear-gradient(90deg, #ffb745 0%, #ff8b45 100%); border-radius: 16px; } .top_intro .intro_text .intro_zx .zx-online:after { content: ''; display: block; position: absolute; width: 28px; height: 24px; left: 38px; top: 15px; background: url(../images/chat_icon.png) left top no-repeat; background-size: 100% auto; } .top_intro .intro_text .intro_zx .zx-online:hover:before { border-radius: 28px; } .top_intro .intro_text .intro_zx .zx-free { display: inline-block; margin-left: 22px; vertical-align: top; color: #ffffff; font-size: 22px; font-family: 'sans-b'; font-style: italic; padding-left: 72px; padding-right: 20px; color: #ff9f45; position: relative; line-height: 26px; padding-top: 13px; padding-bottom: 12px; border-radius: 16px; border: solid 1px #ff8b45; cursor: pointer; } .top_intro .intro_text .intro_zx .zx-free:after { content: ''; display: block; position: absolute; width: 26px; height: 28px; left: 28px; top: 13px; background: url(../images/quote_icon.png) left top no-repeat; background-size: 100% auto; } .top_intro .intro_text .intro_zx .zx-free:hover { border-radius: 28px; } .top_intro .intro_text .intro_email { padding-left: 59px; margin-top: 52px; color: #9fc4ff; font-size: 18px; line-height: 1.5; background: url(../images/email_icon.png) left center no-repeat; background-size: 32px auto; } .top_intro .intro_text .intro_email a { font-family: 'sans-b'; color: #ffb145; font-style: italic; } @media screen and (max-width: 1600px) { .top_intro .intro_img { margin-top: 30px; height: 532px; } .top_intro .intro_text { margin-top: 20px; } .top_intro .intro_text .canshu_ul { margin-top: 42px; } .logo-bar .nav a { margin-right: 50px; } .top_intro .intro_text .intro_title { font-size: 46px; } .top_intro .intro_text .canshu_ul li { font-size: 18px; } .top_intro .intro_text .intro_zx .zx-online { font-size: 20px; padding-left: 80px; } .top_intro .intro_text .intro_zx .zx-free { font-size: 20px; padding-left: 66px; } .top_intro .intro_text .canshu_ul li+li { margin-top: 16px; } .top_intro .intro_text .intro_zx { margin-top: 40px; } .top_intro .intro_text .intro_email { margin-top: 40px; } } @media screen and (max-width: 1440px) { .logo-bar .contact { display: none; } .logo-bar .nav { float: right; } .top_intro .intro_text { padding-left: 50px; } .top_intro .intro_text .intro_title { font-size: 40px; line-height: 54px; } .top_intro .intro_text .canshu_ul { margin-top: 32px; } .top_intro .intro_text .canshu_ul li+li { margin-top: 14px; } .top_intro .intro_text .intro_zx .zx-online { font-size: 18px; padding-left: 70px; padding-right: 30px; } .top_intro .intro_text .intro_zx .zx-online:after { left: 30px; } .top_intro .intro_text .intro_zx .zx-free { font-size: 18px; padding-left: 60px; } .top_intro .intro_text .intro_zx .zx-free:before { left: 22px; } .top_intro .intro_text .intro_email { margin-top: 36px; padding-left: 56px; font-size: 16px; } .top_intro .intro_img { height: 466px; } } @media screen and (max-width: 1280px) { .logo-bar .logo { margin-right: 20px; } .logo-bar .nav a { font-size: 17px; margin-right: 46px; } .top_intro .intro_text { padding-left: 45px; } .top_intro .intro_text .intro_title { font-size: 36px; line-height: 46px; } .top_intro .intro_text .canshu_ul li { font-size: 16px; } .top_intro .intro_text .canshu_ul { margin-top: 25px; } .top_intro .intro_text .canshu_ul li+li { margin-top: 10px; } .top_intro .intro_text .intro_p { margin-top: 24px; } .top_intro .intro_text .intro_zx { margin-top: 25px; } .top_intro .intro_text .intro_zx .zx-online { padding-left: 52px; padding-right: 20px; font-size: 17px; padding-top: 12px; padding-bottom: 11px; } .top_intro .intro_text .intro_zx .zx-online:after { width: 24px; left: 18px; } .top_intro .intro_text .intro_zx .zx-free { padding-left: 46px; padding-right: 16px; font-size: 17px; margin-left: 16px; padding-top: 11px; padding-bottom: 10px; } .top_intro .intro_text .intro_zx .zx-free:after { width: 22px; left: 16px; } .top_intro .intro_text .intro_email { margin-top: 30px; } .top_intro .intro_img { height: 399px; } } @media screen and (max-width: 992px) { .top_intro { padding-bottom: 70px; } .wrap_top { padding-top: 20px; } .top_intro .intro_text .intro_title { font-size: 32px; line-height: 1.5; } .wrap_top .logo-bar { position: relative; } .logo-bar .menu-icon { display: block; position: absolute; width: 70px; height: 100%; right: 0; top: 3px; cursor: pointer; } .logo-bar .menu-icon .menu-btn { width: 32px; height: 4px; margin-top: 20px; margin-left: 20px; border-radius: 1px; background-color: #fff; position: relative; display: inline-block; } .logo-bar .menu-icon .menu-btn:before, .logo-bar .menu-icon .menu-btn:after { content: ''; display: block; position: absolute; width: 32px; height: 4px; background-color: #fff; border-radius: 1px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .logo-bar .menu-icon .menu-btn:before { top: -11px; left: 0; } .logo-bar .menu-icon .menu-btn:after { bottom: -11px; left: 0; } .logo-bar .icon-active .menu-btn { background: transparent; } .logo-bar .icon-active .menu-btn:before { top: 0; transform: rotate(45deg); } .logo-bar .icon-active .menu-btn:after { bottom: 0; transform: rotate(-45deg); } .logo-bar .nav { position: absolute; top: 50px; right: 10px; width: 150px; height: auto; padding-top: 12px; padding-bottom: 12px; background-color: #fff; z-index: 33; display: none; border-radius: 0 0 30px 0; } .logo-bar .nav li { float: none; } .logo-bar .nav li a { color: #666; margin-right: 0; display: block; text-align: center; } .logo-bar .nav li a:after { height: 2px; } .logo-bar .nav li.active a:after { display: none; } .logo-bar .nav li:hover a:after { display: none; } .logo-bar .nav li a:after { display: none; } .logo-bar .nav li+li a:before { content: ''; display: block; position: absolute; left: 7%; width: 86%; height: 1px; background: linear-gradient(90deg, rgba(234, 148, 75, 0), #ea944b, rgba(234, 148, 75, 0)); } .top_intro .intro_img { width: 100%; margin-top: 0; } .top_intro .intro_text { width: 100%; padding-left: 0; } .top_intro .intro_img { height: 572px; } } @media screen and (max-width: 782px) { .top_intro .intro_img { height: auto; } } @media screen and (max-width: 480px) { .wrap_top { padding-top: 10px; } .logo-bar .logo { width: 100px; background-size: 100px auto; } .top_intro { margin-top: 20px; padding-bottom: 60px; } .top_intro .intro_img img { border-radius: 15px; } .top_intro .intro_text .intro_title { font-size: 24px; } .top_intro .intro_text .intro_title:before { bottom: 6px; } .top_intro .intro_text .canshu_ul { margin-top: 15px; } .top_intro .intro_text .canshu_ul li+li { margin-top: 5px; } .top_intro .intro_text .intro_p { margin-top: 15px; } .top_intro .intro_text .intro_zx .zx-online { font-size: 16px; } .top_intro .intro_text .intro_zx .zx-online:before { border-radius: 10px; } .top_intro .intro_text .intro_zx .zx-free { font-size: 16px; margin-left: 10px; } .top_intro .intro_text .intro_email { margin-top: 25px; padding-left: 42px; background-size: 28px auto; } .top_intro .intro_text .intro_zx .zx-online { padding-left: 42px; padding-right: 18px; padding-top: 10px; padding-bottom: 9px; } .top_intro .intro_text .intro_zx .zx-online:after { width: 22px; left: 14px; top: 14px; } .top_intro .intro_text .intro_zx .zx-free { padding-left: 34px; padding-right: 10px; padding-top: 9px; padding-bottom: 8px; border-radius: 10px; } .top_intro .intro_text .intro_zx .zx-free:after { width: 18px; left: 11px; } .top_intro .intro_text .intro_zx .zx-free { margin-left: 6px; } } @media screen and (max-width: 370px) { .top_intro .intro_text .intro_zx .zx-free { margin-left: 0; margin-top: 10px; } } .top_recomcp { margin-top: -50px; position: relative; z-index: 1; } .top_recomcp .title { padding: 25px 0; font-size: 25px; text-align: center; color: #1b3c80; font-weight: bold; } .top_recomcp .recom_ul { position: relative; margin-left: -16px; margin-right: -16px; font-size: 0; text-align: center; } .top_recomcp .recom_ul:after { content: ''; display: block; clear: both; } .top_recomcp .recom_ul li { width: 200px; display: inline-block; vertical-align: top; text-align: center; } .top_recomcp .recom_ul li .cpimg { position: relative; width: 168px; overflow: hidden; margin-left: auto; margin-right: auto; box-shadow: 0px 4px 50px 0px rgba(8, 24, 38, 0.1); border-radius: 20px; } .top_recomcp .recom_ul li .cpimg img { display: block; } .top_recomcp .recom_ul li .cpimg:after { content: ''; display: block; clear: both; } .top_recomcp .recom_ul li p { color: #18497f; font-size: 20px; line-height: 1.5; margin-top: 10px; } .top_recomcp .recom_ul li p a { color: #18497f; } .top_recomcp .recom_ul li:hover p a { color: #ff9f45; } .top_recomcp .recom_ul li+li { margin-left: calc(20% - 240px); } .top_recomcp .recom_ul:before { content: ''; display: block; position: absolute; background-color: #f8fbff; left: -55px; right: -55px; top: -70px; bottom: -30px; z-index: -1; box-shadow: 0px 0px 95px 0px rgba(8, 24, 38, 0.14); border-radius: 20px; } @media screen and (max-width: 1660px) { .top_recomcp .recom_ul:before { left: -25px; right: -25px; } } @media screen and (max-width: 1440px) { .top_recomcp .recom_ul li p { font-size: 18px; } .top_recomcp .recom_ul { margin-left: -6px; margin-right: -6px; } .top_recomcp .recom_ul li { width: 180px; } .top_recomcp .recom_ul li+li { margin-left: calc(20% - 216px); } .top_recomcp .recom_ul:before { left: -25px; right: -25px; } } @media screen and (max-width: 1280px) { .top_recomcp .recom_ul li+li { margin-left: 0; } .top_recomcp .recom_ul:before { left: 6px; right: 6px; } } @media screen and (max-width: 782px) { .top_recomcp .recom_ul li { width: 50%; } } @media screen and (max-width: 650px) { .top_recomcp .title { font-size: 22px; } .top_recomcp .recom_ul:before { left: -8px; right: -8px; } .top_recomcp .recom_ul li .cpimg { width: 94%; height: auto; border-radius: 10px; } } @media screen and (max-width: 520px) { .top_recomcp { margin-top: -33px; } .top_recomcp .title { padding: 15px 0; font-size: 18px; } .top_recomcp .recom_ul:before { top: -60px; } .top_recomcp .recom_ul li+li+li { margin-top: 15px; } .top_recomcp .recom_ul li p { margin-top: 6px; font-size: 14px; } } .mid_tit_h2 { font-size: 40px; font-family: 'sans-b'; line-height: 60px; background-image: -webkit-linear-gradient(90deg, #1b3c80, #132c6b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @media screen and (max-width: 1600px) { .mid_tit_h2 { font-size: 36px; line-height: 50px; } } @media screen and (max-width: 1440px) { .mid_tit_h2 { font-size: 32px; line-height: 46px; } } @media screen and (max-width: 992px) { .mid_tit_h2 { font-size: 28px; line-height: 36px; } } @media screen and (max-width: 480px) { .mid_tit_h2 { font-size: 22px; line-height: 30px; } } .mid_intro { margin-top: 72px; } .mid_intro .mid_pic { width: 42%; float: left; overflow: hidden; } .mid_intro .mid_pic img, .mid_intro .mid_pic video { width: 100%; display: block; } .mid_intro .mid_text { width: 54%; float: right; padding: 0px 60px; } .mid_intro .mid_text p { margin-top: 22px; } @media screen and (max-width: 1600px) { .mid_intro .mid_pic { height: 402px; } } @media screen and (max-width: 1440px) { .mid_intro .mid_text { padding-right: 0; } .mid_intro .mid_text p { margin-top: 18px; } .mid_intro .mid_text { margin-top: 0; } .mid_intro .mid_pic { margin-top: 40px; height: 352px; } } @media screen and (max-width: 1280px) { .mid_intro .mid_text { padding-left: 30px; } .mid_intro .mid_pic { margin-top: 60px; height: 302px; } } @media screen and (max-width: 992px) { .mid_intro .mid_pic { margin-top: 30px; width: 100%; height: auto; } .mid_intro .mid_text { width: 100%; padding-left: 0; } } @media screen and (max-width: 480px) { .mid_intro .mid_text { margin-top: 20px; } .mid_intro { margin-top: 30px; } .mid_intro .mid_text p { margin-top: 12px; line-height: 1.8; } } .mid_intro .mid_pic { margin-top: 20px; } .mid_machine { margin-top: 50px; padding-top: 50px; padding-bottom: 100px; background-image: url(../images/middle_bg.jpg); background-position: center 120px; background-repeat: no-repeat; background-size: cover; } .mid_machine .mid_tit .mid_tit_h2 { max-width: 800px; margin-left: auto; margin-right: auto; text-align: center; } .mid_machine .machine_list { padding-top: 200px; } .mid_machine .machine_list li { display: table; position: relative; } .mid_machine .machine_list li:after { content: ''; display: block; clear: both; } .mid_machine .machine_list li .machine_pic { width: 36%; display: table-cell; vertical-align: middle; } .mid_machine .machine_list li .machine_pic img { display: block; } .mid_machine .machine_list li .machine_detail { width: 64%; display: table-cell; vertical-align: middle; } .mid_machine .machine_list li .machine_detail h3 { color: #ffffff; font-size: 30px; line-height: 30px; font-family: 'sans-b'; margin-bottom: 28px; } .mid_machine .machine_list li .machine_detail p { color: #e8f1ff; } .mid_machine .machine_list .even .machine_detail { padding-left: 52px; } .mid_machine .machine_list .odd .machine_detail { padding-right: 52px; } .mid_machine .machine_list li+li { margin-top: 104px; } .mid_machine .machine_list li+li:before { content: ''; display: block; position: absolute; width: 1px; height: 127px; background-color: #4d7cda; top: -137px; left: 50%; } .mid_machine .machine_list .mach2:before { top: -100px; } .mid_machine .machine_list .mach4:before { top: -80px; } .mid_machine .mid_chat { margin-top: 96px; text-align: center; } .mid_machine .mid_chat .chat_btn { display: inline-block; position: relative; z-index: 1; } .mid_machine .mid_chat .chat_btn:before { content: ''; display: block; position: absolute; width: 145px; height: 1px; left: -164px; top: 50%; background-image: linear-gradient(90deg, rgba(255, 183, 69, 0), #ffb745); } .mid_machine .mid_chat .chat_btn:after { content: ''; display: block; position: absolute; width: 145px; height: 1px; right: -164px; top: 50%; background-image: linear-gradient(270deg, rgba(255, 139, 69, 0), #ff8b45); } .mid_machine .mid_chat .chat_btn .chat_text { display: inline-block; vertical-align: top; color: #ffffff; font-size: 22px; font-family: 'sans-b'; font-style: italic; padding-left: 124px; padding-right: 70px; position: relative; line-height: 26px; padding-top: 14px; padding-bottom: 13px; cursor: pointer; } .mid_machine .mid_chat .chat_btn .chat_text:before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; background-color: #ffb745; background-image: linear-gradient(90deg, #ffb745 0%, #ff8b45 100%); border-radius: 16px; } .mid_machine .mid_chat .chat_btn .chat_text:after { content: ''; display: block; position: absolute; width: 28px; height: 24px; left: 70px; top: 15px; background: url(../images/chat_icon.png) left top no-repeat; background-size: 100% auto; } .mid_machine .mid_chat .chat_btn .chat_text:hover:before { border-radius: 28px; } .video_swt { max-width: 620px; margin-top: 30px; padding: 14px; background-image: url(../images/icon_video.png); background-repeat: no-repeat; background-position: right 17px center; background-size: 31px; border: 1px solid #eb8c04; border-radius: 50px; font-size: 18px; color: #eb8c04; line-height: 1.2; text-align: center; transition: all linear 0.4s; cursor: pointer; } @media screen and (max-width: 1600px) { .mid_machine .machine_list li .machine_detail h3 { font-size: 28px; } .mid_machine { background-position: center 100px; } .mid_machine .machine_list .mach3:before { top: -132px; } .mid_machine .machine_list .mach4:before { top: -90px; } .mid_machine .mid_chat { margin-top: 100px; } } @media screen and (max-width: 1440px) { .mid_machine { padding-bottom: 90px; } .mid_machine .machine_list { padding-top: 160px; } .mid_machine .machine_list li .machine_detail h3 { font-size: 26px; line-height: 28px; } .mid_machine .machine_list li+li:before { height: 100px; top: -112px; } .mid_machine .machine_list .mach2:before { top: -90px; } .mid_machine .machine_list .mach3:before { top: -118px; } .mid_machine .mid_chat { margin-top: 80px; } .mid_machine .mid_chat .chat_btn .chat_text { font-size: 20px; } } @media screen and (max-width: 1280px) { .mid_machine { margin-top: 40px; padding-top: 40px; } .mid_machine .machine_list .even .machine_detail { padding-left: 40px; } .mid_machine .machine_list .odd .machine_detail { padding-right: 40px; } .mid_machine .machine_list { padding-top: 120px; } .mid_machine .machine_list li .machine_detail h3 { font-size: 24px; line-height: 26px; margin-bottom: 20px; } .mid_machine .mid_chat { margin-top: 60px; } .mid_machine { padding-bottom: 70px; background-position: center 75px; } .mid_machine .mid_chat .chat_btn .chat_text { font-size: 18px; padding-left: 104px; padding-right: 50px; } .mid_machine .mid_chat .chat_btn .chat_text:after { left: 50px; } } @media screen and (max-width: 782px) { .mid_machine { margin-top: 20px; padding-top: 20px; background-position: center bottom; background-size: auto 101.5%; } .mid_machine .mid_tit .mid_tit_h2 { line-height: 1.5; } .mid_machine .machine_list { padding-top: 10%; } .mid_machine .machine_list li .machine_detail h3 { font-size: 22px; line-height: 24px; } .mid_machine .machine_list li .machine_detail p { line-height: 26px; } .mid_machine .machine_list li { display: block; } .mid_machine .machine_list li .machine_pic { display: block; width: 100%; } .mid_machine .machine_list .even .machine_detail { display: block; padding: 0; margin-top: 30px; width: 100%; } .mid_machine .machine_list .odd .machine_detail { display: block; float: left; padding: 0; margin-bottom: 25px; width: 100%; } .mid_machine .machine_list .even { padding-bottom: 67%; } .mid_machine .machine_list .even .machine_pic { position: absolute; left: 0; bottom: 0; } .mid_machine .machine_list li+li:before { height: 70px; top: -86px; } .mid_machine .machine_list .mach3:before { top: -86px; } .mid_machine .mid_chat .chat_btn .chat_text { padding-left: 68px; padding-right: 30px; } .mid_machine .mid_chat .chat_btn .chat_text:after { left: 30px; width: 24px; top: 17px; } .mid_machine .mid_chat .chat_btn:before { width: 100px; left: -112px; } .mid_machine .mid_chat .chat_btn:after { width: 100px; right: -112px; } .video_swt { margin-top: 20px; padding: 9px 60px 11px 14px; background-size: 28px; font-size: 16px; } } @media screen and (max-width: 480px) { .mid_machine .mid_chat { margin-top: 30px; } .mid_machine .mid_chat .chat_btn .chat_text { font-size: 16px; padding-top: 11px; padding-bottom: 10px; } .mid_machine .mid_chat .chat_btn .chat_text:before { border-radius: 10px; } .mid_machine .mid_chat .chat_btn .chat_text:after { top: 14px; } .mid_machine .mid_chat .chat_btn:before { display: none; } .mid_machine .mid_chat .chat_btn:after { display: none; } .mid_machine { margin-top: 0; padding-bottom: 40px; } .mid_machine .machine_list li+li { margin-top: 80px; } .mid_machine .machine_list li+li:before { height: 45px; top: -65px !important; } .mid_machine .machine_list li .machine_detail h3 { font-size: 20px; margin-bottom: 15px; } } .recom_case { padding: 80px 0 90px; background-color: #f1f5fd; } .recom_case .mid_tit { margin-bottom: 60px; } .recom_case .mid_tit .mid_tit_h2 { text-align: center; } .recom_case .case_ul { margin-left: -8%; } .recom_case .case_ul:after { content: ''; display: block; clear: both; } .recom_case .case_ul li { width: 42%; float: left; margin-left: 8%; } .recom_case .case_ul li .case_img { position: relative; overflow: hidden; box-shadow: 0px 0px 62px 0px rgba(8, 24, 38, 0.1); border-radius: 20px; } .recom_case .case_ul li .case_img img { display: block; } .recom_case .case_ul li .case_img h3 { position: absolute; left: 0; bottom: 0; right: 0; color: #ffffff; font-size: 20px; line-height: 30px; font-family: 'sans-b'; padding: 60px 40px 10px; background-image: linear-gradient(180deg, rgba(7, 31, 71, 0) 0%, #071f47 100%); } .recom_case .case_ul li .param { padding-left: 24px; } .recom_case .case_ul li .param:after { content: ''; display: block; clear: both; } .recom_case .case_ul li .param p { color: #999999; font-size: 18px; padding-left: 25px; position: relative; margin-top: 45px; float: left; } .recom_case .case_ul li .param p span { font-family: 'sans-b'; color: #333333; font-size: 24px; line-height: 32px; display: block; } .recom_case .case_ul li .param p:before { content: ''; display: block; position: absolute; left: 0; top: 50%; margin-top: -23px; width: 3px; height: 46px; background-color: #ff9f45; border-radius: 2px; } .recom_case .case_ul li .param .cs1 { width: 40%; } .recom_case .case_ul li .param .cs2 { width: 24%; } .recom_case .case_ul li .param .cs3 { width: 36%; } .recom_case .case_ul li .param .cs4 { width: 40%; } .recom_case .case_ul li .param .cs5 { width: 50%; } @media screen and (max-width: 1600px) { .recom_case .case_ul li .param p { font-size: 17px; margin-top: 40px; } .recom_case .case_ul li .param p span { font-size: 22px; line-height: 30px; } } @media screen and (max-width: 1440px) { .recom_case .case_ul li .param p { font-size: 17px; margin-top: 32px; } .recom_case .case_ul li .param p span { font-size: 20px; line-height: 28px; } .recom_case .case_ul { margin-left: -5%; } .recom_case .case_ul li { width: 45%; margin-left: 5%; } .recom_case .case_ul li .param { padding-left: 20px; } .recom_case .case_ul li .param p:before { height: 40px; margin-top: -20px; } } @media screen and (max-width: 1280px) { .recom_case .case_ul li .param { padding-left: 10px; } .recom_case .case_ul li .case_img h3 { font-size: 18px; } .recom_case { padding-top: 70px; padding-bottom: 70px; } .recom_case .case_ul li .param p span { font-size: 18px; line-height: 24px; } .recom_case .case_ul li .param p { font-size: 16px; padding-left: 20px; margin-top: 28px; } .recom_case .case_ul li .param p:before { height: 32px; margin-top: -16px; } } @media screen and (max-width: 992px) { .recom_case { padding-top: 60px; padding-bottom: 60px; } .recom_case .case_ul li .param .cs1 { width: 50%; } .recom_case .case_ul li .param .cs2 { width: 50%; } .recom_case .case_ul li .param .cs3 { width: 50%; } .recom_case .case_ul li .param .cs4 { width: 50%; } .recom_case .case_ul li .param .cs5 { width: 100%; } .recom_case .case_ul li .param p { margin-top: 20px; } } @media screen and (max-width: 782px) { .recom_case .case_ul { margin-left: 0; } .recom_case .case_ul li { width: 100%; margin-left: 0; } .recom_case .case_ul li+li { margin-top: 40px; } .recom_case .mid_tit { margin-bottom: 40px; } } @media screen and (max-width: 480px) { .recom_case .mid_tit { margin-bottom: 25px; } .recom_case .case_ul li+li { margin-top: 30px; } .recom_case .case_ul li .param p { font-size: 15px; margin-top: 15px; line-height: 20px; } .recom_case .case_ul li .param p span { font-size: 16px; line-height: 24px; } .recom_case { padding-top: 50px; padding-bottom: 50px; } } @media screen and (max-width: 360px) { .recom_case .case_ul li .param .cs1 { width: auto; margin-right: 10px; } .recom_case .case_ul li .param .cs2 { width: auto; margin-right: 10px; } .recom_case .case_ul li .param .cs3 { width: auto; margin-right: 10px; } .recom_case .case_ul li .param .cs4 { width: auto; margin-right: 10px; } } .process { padding: 80px 0 110px; background: url(../images/process_bg.jpg) center top no-repeat; background-size: cover; } .process .mid_tit { text-align: center; } .process .mid_tit .mid_tit_h2 { background-image: -webkit-linear-gradient(90deg, #fff, #fff); } .process .process_ul { margin-top: 70px; position: relative; z-index: 1; } .process .process_ul:before { content: ''; display: block; position: absolute; top: 64px; left: 10%; right: 10%; height: 3px; background-color: #fff; z-index: -1; } .process .process_ul:after { content: ''; display: block; clear: both; } .process .process_ul li { width: 19%; float: left; } .process .process_ul li .pro_icon { width: 130px; height: 130px; padding: 40px; margin-left: auto; margin-right: auto; border-radius: 50%; background-color: #fff; } .process .process_ul li .pro_icon img { display: block; width: 50px; } .process .process_ul li p { color: #9fc4ff; font-size: 18px; margin-top: 24px; line-height: 24px; text-align: center; padding-left: 8px; padding-right: 8px; } .process .process_ul li+li { margin-left: 1.25%; } .process .about_us { margin-top: 90px; } .process .about_us .about_img { width: 54%; float: left; } .process .about_us .about_img img { display: block; border-radius: 20px; } .process .about_us .about_text { width: 40%; float: right; position: relative; z-index: 1; padding-right: 80px; margin-top: 40px; } .process .about_us .about_text .mid_tit_h2 { position: relative; margin-bottom: 20px; background-image: -webkit-linear-gradient(90deg, #fff, #fff); } .process .about_us .about_text .mid_tit_h2:before { content: ''; display: block; position: absolute; left: -3px; bottom: 12px; width: 130px; height: 6px; border-radius: 3px; background-image: linear-gradient(270deg, rgba(255, 159, 69, 0), #ff9f45); z-index: -1; } .process .about_us .about_text p { color: #9fc4ff; font-size: 16px; line-height: 30px; } @media screen and (max-width: 1600px) { .process .about_us .about_text { margin-top: 16px; } .process .about_us .about_text .mid_tit_h2:before { bottom: 11px; } } @media screen and (max-width: 1440px) { .process .process_ul li .pro_icon { width: 110px; height: 110px; padding: 30px; } .process .process_ul:before { top: 54px; } .process .process_ul li p { font-size: 17px; } .process .about_us .about_text { padding-right: 0; margin-top: 5px; } .process .about_us { margin-top: 70px; } .process .about_us .about_text .mid_tit_h2:before { bottom: 9px; } } @media screen and (max-width: 1280px) { .process { padding: 70px 0; } .process .process_ul { margin-top: 50px; } .process .about_us .about_text { width: 42%; margin-top: 0; } .process .about_us { margin-top: 60px; } .process .about_us .about_img { margin-top: 20px; } } @media screen and (max-width: 992px) { .process { padding: 60px 0; } .process .process_ul li .pro_icon { width: 100px; height: 100px; padding: 29px; } .process .process_ul li .pro_icon img { width: 42px; } .process .process_ul:before { top: 49px; } .process .process_ul li { width: 20%; } .process .process_ul li+li { margin-left: 0; } .process .about_us { margin-top: 50px; } .process .about_us .about_img { width: 100%; margin-top: 0; } .process .about_us .about_text { width: 100%; margin-top: 40px; } } @media screen and (max-width: 782px) { .process .process_ul { font-size: 0; } .process .process_ul:before { display: none; } .process .process_ul li { width: 33.3%; float: none; display: inline-block; vertical-align: top; margin-bottom: 20px; } .process .process_ul li p { font-size: 16px; line-height: 1.5; margin-top: 16px; } .process .process_ul li:nth-child(2) p { height: auto; } .process .process_ul li:nth-child(3) p { height: 72px; } .process .about_us { margin-top: 20px; } .process .about_us .about_img img { border-radius: 10px; } .process .about_us .about_text { margin-top: 25px; } } @media screen and (max-width: 630px) { .process .process_ul li:nth-child(2) p { height: auto; } .process .process_ul li:nth-child(3) p { height: auto; } } @media screen and (max-width: 480px) { .process { padding: 50px 0; } .process .process_ul { margin-top: 30px; } .process .process_ul li .pro_icon { width: 90px; height: 90px; padding: 25px; } .process .process_ul li .pro_icon img { width: 40px; } .process .process_ul li p { margin-top: 10px; padding-left: 4px; padding-right: 4px; font-size: 14px; } .process .about_us .about_text .mid_tit_h2:before { bottom: 4px; } } @media screen and (max-width: 425px) { .process .process_ul li:nth-child(2) p { height: auto; } } @media screen and (max-width: 380px) { .process .process_ul li:nth-child(2) p { height: auto; } } .main_service { padding: 80px 0; background: url(../images/customer_service.jpg) center top no-repeat; background-size: cover; } .main_service .mid_tit { text-align: center; } .main_service .service_ul { margin-top: 60px; } .main_service .service_ul:after { content: ''; display: block; clear: both; } .main_service .service_ul li { width: 25%; float: left; padding-right: 50px; } .main_service .service_ul li p { position: relative; padding-left: 35px; color: #333333; font-size: 16px; line-height: 26px; font-family: 'sans-b'; } .main_service .service_ul li p:before { content: ''; display: block; position: absolute; left: 0; top: 4px; width: 7px; height: 44px; background-color: #ff9f45; border-radius: 3px; } @media screen and (max-width: 1600px) { .main_service .service_ul { margin-top: 50px; } } @media screen and (max-width: 1440px) { .main_service .service_ul li { padding-right: 30px; } } @media screen and (max-width: 1280px) { .main_service { padding: 70px 0; } .main_service .service_ul { margin-top: 15px; } .main_service .service_ul li { width: 50%; margin-top: 30px; } .main_service .service_ul li p { height: 52px; } } @media screen and (max-width: 992px) { .main_service { padding: 60px 0; } .main_service .service_ul li p { height: 78px; } } @media screen and (max-width: 700px) { .main_service .service_ul li { width: 100%; padding-right: 0; margin-top: 20px; } .main_service .service_ul li p { min-height: 52px; height: auto; } .main_service .service_ul li p:before { height: 40px; } } @media screen and (max-width: 480px) { .main_service { padding: 50px 0; background: #e7eef8; } .main_service .service_ul { margin-top: 0; } } .form_main { padding: 80px 0; background: url(../images/form_bg.jpg) center bottom no-repeat; background-size: cover; } .form_main .message { width: 54%; float: left; position: relative; z-index: 1; } .form_main .message .mid_tit_h2 { position: relative; background-image: -webkit-linear-gradient(90deg, #fff, #fff); } .form_main .message .mid_tit_h2:before { content: ''; display: block; position: absolute; left: -3px; bottom: 12px; width: 260px; height: 6px; border-radius: 3px; background-image: linear-gradient(270deg, rgba(255, 159, 69, 0), #ff9f45); z-index: -1; } .form_main .message .msg_ul:after { content: ''; display: block; clear: both; } .form_main .message .msg_ul li { width: 48%; float: left; margin-top: 28px; } .form_main .message .msg_ul li input { width: 100%; background-color: #ffffff; border-radius: 20px; padding: 0 12px; line-height: 60px; font-size: 16px; color: #999999; font-family: 'sans-r'; } .form_main .message .msg_ul .m-pro, .form_main .message .msg_ul .m-phone { margin-left: 4%; } .form_main .message .msg-areas { margin-top: 40px; } .form_main .message .msg-areas textarea { width: 100%; background-color: #ffffff; border-radius: 20px; padding: 20px 12px; line-height: 26px; font-size: 16px; color: #999999; height: 140px; font-family: 'sans-r'; resize: none; } .form_main .message .line { width: 263px; height: 53px; background-image: linear-gradient(90deg, #ffb745 0%, #ff8b45 100%); box-shadow: 16px 20px 21px 0px rgba(8, 24, 38, 0.22); border-radius: 16px; margin-top: 38px; margin-left: auto; margin-right: auto; cursor: pointer; } .form_main .message .line input { color: #ffffff; font-size: 24px; font-family: 'sans-b'; font-style: italic; background-color: transparent; width: 100%; height: 100%; display: block; cursor: pointer; } .form_main .message .line:hover { border-radius: 30px; } .form_main .form_text { width: 46%; float: right; margin-top: 120px; padding-left: 96px; } .form_main .form_text p { color: #ffffff; font-size: 18px; line-height: 26px; } .form_main .form_text h3 { color: #ff9f45; font-size: 24px; line-height: 26px; font-family: 'sans-b'; margin-top: 25px; margin-bottom: 25px; } @media screen and (max-width: 1600px) { .form_main .form_text { margin-top: 125px; } } @media screen and (max-width: 1440px) { .form_main .message { width: 60%; } .form_main .form_text { width: 40%; padding-left: 50px; margin-top: 70px; } .form_main .form_text p { font-size: 17px; } } @media screen and (max-width: 1280px) { .form_main { padding: 70px 0; } .form_main .form_text { margin-top: 120px; } } @media screen and (max-width: 992px) { .form_main { padding: 60px 0; } .form_main .message { width: 100%; } .form_main .form_text { width: 100%; padding-left: 0; margin-top: 40px; } .form_main .message .mid_tit_h2:before { bottom: 8px; } } @media screen and (max-width: 680px) { .form_main .message .msg_ul li { width: 100%; } .form_main .message .msg_ul .m-pro, .form_main .message .msg_ul .m-phone { margin-left: 0; } .form_main .message .msg_ul li input { line-height: 56px; } .form_main .message .msg_ul li { margin-top: 24px; } .form_main .message .msg-areas { margin-top: 25px; } .form_main .message .line { margin-top: 25px; width: 240px; } .form_main .message .line input { font-size: 20px; } .form_main .message .msg-areas textarea { height: 150px; } } @media screen and (max-width: 480px) { .form_main { padding: 50px 0; } .form_main .form_text h3 { font-size: 20px; margin-top: 18px; margin-bottom: 18px; } .form_main .message .mid_tit_h2:before { bottom: 4px; } } .footer-bar { padding: 24px 10px; background: #12316b; font-size: 16px; color: #ffffff; font-weight: bold; line-height: 24px; text-align: center; } .foot-prpo { display: inline-block; margin-left: 15px; } .foot-prpo a { display: block; padding: 3px 12px; line-height: 30px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.4); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; color: rgba(255, 255, 255, 0.4); font-size: 16px; } .foot-prpo a img { margin-right: 12px; vertical-align: middle; margin-top: -2px; width: 10px; } .foot-prpo a:hover { color: #FF8800; border-color: #FF8800; } .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; } .pc-top { position: absolute; z-index: -1; bottom: -42px; left: 19px; width: 98px; height: 86px; display: none; cursor: pointer; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 3.064px 2.571px 4px 0px rgba(40, 52, 62, 0.2); -moz-box-shadow: 3.064px 2.571px 4px 0px rgba(40, 52, 62, 0.2); box-shadow: 3.064px 2.571px 4px 0px rgba(40, 52, 62, 0.2); } .fdftm .fdftmtop { position: relative; } .fdftmtop a { display: block; cursor: pointer; } .fdftmtop span { position: absolute; left: -81px; top: 42px; animation: widthmove 4s linear infinite; width: 100px; overflow: hidden; } .fdftmtop span i { clear: both; display: block; 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: #3c65b0; padding: 7px 15px 0 9px; } .fdftmbom { width: 100%; margin-top: -45px; height: 165px; background: url("../images/kft.png") center no-repeat; position: relative; } .fdftmbom .fdftmboma01 { display: block; cursor: pointer; position: relative; z-index: 5; height: 50%; } .fdftmbom .fdftmboma02 { display: block; cursor: pointer; position: relative; z-index: 5; height: 50%; } @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; } } /*mftm*/ .footer-fl { clear: both; width: 100%; max-width: 750px; min-width: 320px; margin: 0 auto; position: fixed; left: 50%; transform: translate(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); bottom: 10px; z-index: 9999; } .footer-fl ul { width: 100%; background: #fff; border-radius: 5px 5px 15px 15px; box-shadow: 0 0 10px #71aee1; padding: 8px 0; } .footer-fl ul li { float: left; width: 50%; } .footer-fl ul li a { font-size: 16px; color: #121c29; font-weight: bold; line-height: 50px; text-align: center; display: block; } .footer-fl ul li img { width: 28px; margin-right: 10px; display: inline-block; vertical-align: top; margin-top: 9px; } #gotoTop2 { width: 40px; height: 40px; border-radius: 50%; position: fixed; right: 0; bottom: 160px; z-index: 99999; } .fdbtm { display: none; } @media screen and (max-width: 782px) { .fdbtm { display: block; } .fdftm { display: none; } body { padding-bottom: 70px; } } .min_advantages { background: #f1f5fd } .min_advantages .container { padding-top: 60px } .min_advantages .mid_tit_h2 { text-align: center } .min_advantages ul { margin-top: 44px; display: table; position: relative; z-index: 1; box-shadow: 0 50px 100px -140px #000000 } .min_advantages ul:before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; border: 2px solid #7b8cb4; border-radius: 14px } .min_advantages ul li { width: 25%; padding: 4% 2.6%; display: table-cell; vertical-align: middle; position: relative; font-size: 18px; color: #133174; line-height: 1.33333 } .min_advantages ul li:before { content: ""; position: absolute; left: 0; top: 15%; bottom: 15%; border-left: 2px dashed #7b8cb4 } .min_advantages ul li:first-child:before { display: none } @media (max-width: 992px) { .min_advantages .container { padding-top: 40px } .min_advantages ul { display: block; margin-top: 30px; box-shadow: 0 50px 100px -140px #000000; padding: 0 25px } .min_advantages ul li { width: 100%; display: block; padding: 25px 0; font-size: 16px } .min_advantages ul li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: auto; border-top: 2px dashed #7b8cb4 } } .body_ru .fdftmbom { background: url(../images/kft_ru.png) center no-repeat; }