body { background: #f7f7f7; } .main .container { position: relative; background: #fff; padding: 48px 58px; margin-top: -117px; -webkit-box-sizing: border-box; box-sizing: border-box; } .main .container .head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #505050; } .main .container .head h3 { position: relative; font-size: 24px; font-weight: normal; padding-left: 48px; } .main .container .head h3::before { content: ""; display: block; width: 24px; height: 4px; background: #0688d2; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .main .container .head ul > li { float: left; margin-right: 20px; } .main .container .head ul > li > a { display: block; font-size: 16px; } .main .container .cover { margin-top: 32px; } .main .container .cover img { display: block; width: 100%; } .main .container .content .form-title { padding: 40px 0; } .main .container .content .form-title .title { font-size: 24px; } .main .container .content .form-title .line { width: 100%; height: 1px; margin-top: 18px; background: #e8e8e8; position: relative; } .main .container .content .form-title .line::before { content: ""; display: block; width: 32px; height: 2px; background: #0688d2; position: absolute; left: 0; bottom: 0; } .main .container .content .contact { margin-top: 80px; margin-bottom: 80px; } .main .container .content .contact .item { float: left; } .main .container .content .contact .item:nth-child(1) { padding-right: 68px; } .main .container .content .contact .item:nth-child(2) { padding-left: 68px; padding-right: 68px; border-left: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; } .main .container .content .contact .item:nth-child(3) { padding-left: 68px; } .main .container .content .contact .item .label { font-size: 16px; color: #999999; } .main .container .content .contact .item .text { font-size: 16px; font-weight: bold; margin-top: 16px; } .main .container .content .map { position: relative; width: 100%; height: 430px; background: #f7f7f7; } .main .container .content .map .map-tip { position: absolute; z-index: 9; font-size: 14px; color: #fff; min-width: 228px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 24px 16px; background: linear-gradient(156deg, #0688d2 0%, rgba(32, 155, 212, 0.7) 100%); border-radius: 8px; left: 0; bottom: 0; -webkit-transform: translate(-47%, -50px); transform: translate(-47%, -50px); line-height: 24px; } .main .container .content .map .map-tip::after { position: absolute; left: 50%; bottom: 0; content: ""; width: 0; height: 0; border-style: solid; border-width: 12px 10px 0 10px; border-color: #0688d2 transparent transparent transparent; -webkit-transform: translate(-50%, 100%); transform: translate(-50%, 100%); opacity: 0.7; } .main .container .content .consult { margin-top: 80px; } .main .container .content .consult .form-item:nth-child(-n+6) .form-control input { padding-left: 66px; } .main .container .content .consult .form-item:nth-child(7) .form-control input { padding-left: 80px; } .main .container .content .consult .form-item:nth-child(8) .form-control input { padding-left: 100px; } .main .container .content .consult .form-item .form-control { position: relative; } .main .container .content .consult .form-item .form-control .form-label { position: absolute; left: 16px; top: 0; min-width: auto; color: #505050; } .main .container .content .consult .form-item .form-control textarea::-webkit-input-placeholder { color: #999; } .main .container .content .consult .form-item .form-control textarea::-moz-placeholder { color: #999; } .main .container .content .consult .form-item .form-control textarea:-ms-input-placeholder { color: #999; } .main .container .content .consult .form-item .form-control textarea::-ms-input-placeholder { color: #999; } .main .container .content .consult .form-item .form-control textarea::placeholder { color: #999; } .main .container .content .consult .form-submit { margin-top: 68px; } .main .container .content .consult .form-submit button { width: 526px; } .main .container .content .title { font-size: 24px; margin: 40px 0 29px; } .main .container .content .collapse .collapse-wrapper { overflow: hidden; } .main .container .content .job-list .job { margin-top: 24px; } .main .container .content .job-list .job.active .name { background-color: #0688d2; color: #fff; background-image: url(/img/contact-icon-down.png); } .main .container .content .job-list .job .name { line-height: 48px; padding: 0 16px; border: 1px solid #dedede; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; -webkit-transition: background-color 0.2s; transition: background-color 0.2s; background-repeat: no-repeat; background-position: 99% center; background-image: url(/img/contact-icon-up.png); background-color: #fff; } .main .container .content .job-list .job .requirements { font-size: 16px; line-height: 36px; padding: 16px; margin: 16px 0; } .main .container .content .job-list .job .link { padding: 0 16px; margin-bottom: 24px; } .main .container .content .job-list .job .link a { font-size: 16px; color: #0688d2; } .footer { margin-top: 80px; }