* { box-sizing: border-box; } html { background: #EEF6F8; } body { position: relative; } #fromBg { position: absolute; bottom: 0; left: 0; width: 100% } .fromSec { width: 1100px; margin: 0 auto; } .header { background: #282E3B; padding: 20px 0; height: 80px; line-height: 40px; font-size: 30px; color: #fff } .header a { color: #59A7FF; } .headerLine { margin: 0 20px; } .chickT { color: #3E3F3F; font-size: 24px; font-weight: bold; text-align: center; margin-bottom: 40px } .chickForm_sec { margin: 80px 0 70px; position: relative; z-index: 9; } .chickForm_sec .fromSec { background: #fff; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .1); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .1); box-shadow: 0 0 10px rgba(0, 0, 0, .1); border-radius: 4px; padding: 40px 35px 60px; } .chickRemind { margin: 0 20px; height: 40px; line-height: 38px; font-size: 12px; color: #E62D31; padding: 0 10px; border: 1px dashed #E62D31; margin-bottom: 30px; } .chickRemind img { margin-right: 6px; width: 20px; position: relative; top: -1px; } .chickInput { margin: 20px auto 0; width: 720px; font-size: 14px; color: #222222; } .yz { /* width: 60%; */ position: relative; } .chickInput p input { width: 50%; } .variCode { position: absolute; right: 0; top: 2%; height: 100%; width: 110px; line-height: 0; } .variCode img { width: 100%; height: 100%; } .variCode #btn { background: #0094DE; padding: 7px 17px; } .variCode #btnCode { background: #0094DE; padding: 7px 17px; margin-top: 30%; } .variCode input { padding: 0; color: #fff; } .chickInputLable { float: left; width: 20%; padding-right: 10px; text-align: right; line-height: 40px; color: #6A6A6A } .chickInputLable span { color: #E62D31; } .chickInput > input { height: 40px; width: 80%; margin-left: 20%; display: block; border: 1px solid #DDDDDD; padding: 7px 12px; line-height: 24px; } .chickInput2 > input { width: 530px; } .layui-input-inline { width: 100%; } .chickInputBox .layui-input-inline > img { position: absolute; height: 24px; right: 5px; top: 0; bottom: 0; margin: auto; z-index: 0 } .chickInputBox { line-height: 40px; color: #666666; margin-left: 20%; } .chickInputTxt { font-size: 12px; color: #E62D31 } #chickUpload { width: 107px; height: 107px; border: 1px solid #E9E9E9; overflow: hidden; margin: 0; cursor: pointer; text-align: center; } #chickUpload img { width: 100%; height: 100%; } #chickUpload .layui-upload-img { width: 50%; height: auto; margin-top: 8px; } #chickUpload div { font-size: 14px; color: #DCDBDB; } .chickUploadTxt { height: 36px; width: 255px; line-height: 34px; text-align: center; font-size: 12px; color: #E62D31; border: 1px solid #E9E9E9; } .chickFormSec1Img { position: absolute; top: 12px; right: 30px; width: 311px; max-height: 432px; border: 1px solid #CCCCCC; overflow: hidden; font-size: 0; display: none; } .chickFormSec1Img img { width: 100%; } .chickLine { position: relative; height: 28px; line-height: 28px; overflow: hidden; margin: 40px 0; } .chickLine:after { content: ''; position: absolute; border-top: 1px #E1E1E1 dashed; width: 100%; height: 1px; left: 0; top: 0; bottom: 0; margin: auto; } .chickLine > * { background: #fff; position: relative; z-index: 3 } .chickLine span { color: #E62D31; font-size: 12px; } .chickLine span:first-child { padding-right: 15px; float: left; } .chickLineR { padding-left: 15px; float: right; cursor: pointer; } .chickLineR img { width: 10px; margin-right: 5px; position: relative; top: -1px; transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; -webkit-transition: all .5s; } .chickInputBox .layui-form-select { height: 40px; width: 100%; } .chickInputBox > input { width: 255px; float: left; margin-left: 20px; } .chickInputBox > a { color: #E62D31; } .chickSec2Box .chickInput:first-child { margin: 0; } .chickForm_sec2.active .chickLineR img { transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transform: rotate(180deg); } .chickBtn { width: 465px; height: 40px; border-radius: 8px; background: #F9A810; font-size: 16px; color: #fff; text-align: center; line-height: 40px; margin: 40px auto 0; cursor: pointer; } .footer { font-size: 13px; color: #fff; padding-bottom: 50px; position: relative; z-index: 9; text-align: center; } @media(max-width:1100px) { .fromSec { width: 84% } .chickInput { width: 80% } } @media(max-width:768px) { .chickBtn { width: 80%; } .chickInputLable { width: 100%; float: initial; } .chickInput > input, .chickInputBox { width: 100%; margin-left: 0; } .header { font-size: 18px; line-height: 24px; padding: 10px; height: 44px; } .headerLine { margin: 0 8px; } .fromSec { width: 94%; } .chickForm_sec { margin: 50px 0 30px; position: relative; z-index: 9; } .chickForm_sec .fromSec { padding: 30px 0; } .chickT { font-size: 16px; margin-bottom: 30px; } .chickInput { margin: 15px auto 0; width: 94%; font-size: 13px; } .footer { padding-bottom: 10px; } }