#root{ max-width: 640px; margin-left: auto; margin-right: auto; }

.step1{ background:#d5f9ec; }
.step1 .uk-panel{ padding:20px; }
.step1 .uk-panel .hd{ margin-bottom: 20px; }
.step1 .uk-panel .hd img{ max-height: 80px; }
.step1 .uk-input{ border:1px solid #a0abb4; background: none; color:#000; }

.step2 .uk-panel{ padding:20px; }
.step2 .uk-panel .uk-wrap{ text-align: center; width:260px; margin-left: auto; margin-right: auto; border-radius: 5px; overflow: hidden; }
.step2 .uk-panel .uk-wrap .uk-form-custom{ display: block; background: #f4f8fe; padding:10px; }
.step2 .uk-panel .uk-wrap img{ width:100%; }
.step2 .uk-panel .uk-wrap .name{ background:#20a53a; color:#fff; padding:5px; }


.step3 .uk-panel .hd{ position: relative; border-bottom:1px solid #eee; margin-bottom: 15px; padding:10px 12px; font-size: 18px; }
.step3 .uk-panel .hd::before{ position: absolute; left: 0; top:50%; transform: translateY(-50%); content:''; display: block; width: 6px; height: 20px; background: #20a53a; }
.step3 .uk-panel .bd{ padding-left: 15px; }
.step3 .uk-panel .bd li{ border-bottom:1px solid #ebebeb;}
.step3 .uk-panel .bd li:last-child{ border-bottom:0; }
.step3 .uk-panel .bd li>div{ position: relative; padding:5px 10px 5px 100px; }
.step3 .uk-panel .bd li>div:nth-child(n+2){ border-top:1px solid #ebebeb; }
.step3 .uk-panel .bd li>div>div{ min-height: 40px;}
.step3 .uk-panel .bd li .tips{ display: block; background: #fef4f6; color: #f0506e;  padding:3px 8px; }
.step3 .uk-panel .bd li .label{ position: absolute; left: 0; top:9px; line-height: 1.2; }
.step3 .uk-panel .bd li .label em{ position: absolute; left: -10px; }
.step3 .uk-panel .bd li .uk-input{ border:1px solid #fff; background: none; color:#000; text-align: right; }
.step3 .uk-panel .bd li .avatar{ width:60px; height: 60px; border-radius: 50%; }
.step3 .uk-panel .bd li .avatar img{ width:60px; height: 60px; display: block; border-radius: 50%; object-fit: cover;}

.step3 .uk-panel .bd li .uk-select{ border:0; direction: rtl; }
.step3 .uk-panel .bd li .uk-input.layui-form-danger{ border-color:red; }
.step3 .uk-panel .bd li .uk-select.layui-form-danger{ border:1px solid red; }

.step3 .uk-panel .bd dl{ margin:0 0 0 -15px; }
.step3 .uk-panel .bd dl dt{ padding:5px 15px; margin:0; background:#20a53a20 }
.step3 .uk-panel .bd dl dd{ padding:5px 0px 0px 15px; }
.step3 .uk-panel .bd dl dd:nth-child(odd){ background: #fafafa; }
.step3 .uk-panel .bd dl dd>div{ position: relative; padding:5px 10px 5px 100px; }
.step3 .uk-panel .bd dl dd>div:nth-child(n+2){ border-top:1px solid #ebebeb; }
.step3 .uk-panel .bd dd .label{ position: absolute; left: 0; top:9px; line-height: 1.2; }
.step3 .uk-panel .bd dd .label em{ position: absolute; left: -10px; }
.step3 .uk-panel .bd dl dd .uk-input{ border:1px solid transparent; background: none; color:#000; text-align: right; }
.step3 .uk-panel .bd dl dd .uk-input.layui-form-danger{ border-color:red; }
.step3 .uk-panel .bd dl dd .uk-select.layui-form-danger{ border-color:red; }
.step3 .uk-panel .bd dl dd .uk-select{ border:0; direction: rtl; background-color: transparent; }



.insert{ height: 60px; }
.step3 .fd{ position: fixed; left: 0; bottom: 0; right: 0; }