/* ui-form -----------------------------------------------------------------------------*/ .input-group, .input-group *, .input-group-checkbox, .input-group-radio, .input-group-checkbox *, .input-group-radio * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .input-group { border-collapse: separate; display: table; position: relative; } .input-group label { display: block; } .input-group-addon { background-color: #fff; border: 1px solid #e1e1e1; border-radius: 4px; border-bottom-right-radius: 0; border-top-right-radius: 0; color: #333; font-size: 14px; font-weight: 400; line-height: 1; padding: 10px; text-align: center; display: table-cell; vertical-align: middle; white-space: nowrap; width: 1%; } .input-group-addon:first-child { border-right: 0; } .input-group-addon .iconfont { color: #b4b4b4; font-size: 18px; } .input-group-addon.focus .iconfont { color: #37a6ed; } .input-group-btn { position: absolute; right: 5px; top: 7px; } .input-group-btn .c-btn { padding: 5px; border: #ddd 1px solid; } .input-group .form-control, .input-group .form-select, .input-group .form-textarea { -webkit-appearance: none; appearance: none; background-color: #fff; background-image: none; border: 1px solid #e1e1e1; border-radius: 5px; color: #333; display: block; font-size: 14px; height: 45px; line-height: 1.42857; padding: 6px 12px; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; outline: 0; } .input-group .form-select-arrow { display: block; width: 10px; height: 10px; border: solid #ccc; border-width: 2px 2px 0 0; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); position: absolute; top: 15px; right: 15px; } .input-group .form-control {padding-right:30px;} .input-group.input-border .form-control, .input-group.input-border .form-select, .input-group.input-border .form-textarea { border-radius: 0px; border-right: 0; font-size: 15px; height: 45px; line-height: 1.52857; } .input-group .form-control:focus, .input-group .form-select:focus, .input-group .form-textarea:focus { color: #333; } .input-group .form-control::-webkit-input-placeholder, .input-group .form-textarea::-webkit-input-placeholder {color: #bfbfbf;} .input-group .form-control:-moz-placeholder, .input-group .form-textarea:-moz-placeholder {color: #bfbfbf;} .input-group .form-control::-moz-placeholder, .input-group .form-textarea::-moz-placeholder {color: #bfbfbf;} .input-group .form-control:-ms-input-placeholder, .input-group .form-textarea:-ms-input-placeholder {color: #bfbfbf;} .input-group .form-textarea { height: auto; resize: none; margin: 0; } .input-group .form-control:nth-child(2), .input-group .form-textarea:nth-child(2) { border-bottom-left-radius: 0; border-top-left-radius: 0; border-left: 0; padding-left: 0; } .input-group .form-control, .input-group label .form-control, .input-group label .form-select, .input-group label .form-textarea { border-radius: 4px; padding-left: 12px; border-left: 1px #e1e1e1 solid; } .input-group .input-group-addon + .form-control, .input-group .input-group-addon + .form-select { border-top-left-radius: 0px; border-bottom-left-radius: 0px; padding-left: 0px; border-left: 0px; } .input-group-text { font-size: 14px; color: #555; } .input-merge .input-group .input-group-addon, .input-group.input-border .input-group-addon { border-bottom-left-radius: 0; border-top-left-radius: 0; } .input-group.input-border .input-group-addon { border-left: 0; font-size: 15px; color: #333; padding: 10px 20px; } .input-merge .input-group .form-control, .input-merge .input-group .form-select, .input-merge .input-group .form-textarea { border-bottom-right-radius: 0; border-top-right-radius: 0; } .input-merge .input-group:first-child .input-group-addon { border-top-left-radius: 4px; } .input-merge .input-group:first-child .form-control, .input-merge .input-group:first-child .form-select, .input-merge .input-group:first-child .form-textarea { border-top-right-radius: 4px; } .input-merge .input-group:last-child .form-control, .input-merge .input-group:last-child .form-select, .input-merge .input-group:last-child .form-textarea { border-bottom-right-radius: 4px; } .input-merge .input-group:last-child .input-group-addon { border-bottom-left-radius: 4px; } .input-merge .input-group.input-border .input-group-addon, .input-merge .input-group.input-border .form-control, .input-merge .input-group.input-border .form-select, .input-merge .input-group.input-border .form-textarea, .input-merge .input-group.input-border .form-control, .input-merge .input-group.input-border .form-select, .input-merge .input-group.input-border .form-textarea, .input-merge .input-group.input-border .input-group-addon { border-radius: 0px; } .input-merge .input-group.input-border { padding-left: 20px; } .input-merge .input-group.input-border .input-group-addon { padding-left: 0 } .input-merge .input-group .input-group-addon, .input-merge .input-group .form-control, .input-merge .input-group .form-select, .input-merge .input-group .form-textarea { border-bottom: 0; } .input-merge .input-group:last-child .input-group-addon, .input-merge .input-group:last-child .form-control, .input-merge .input-group:last-child .form-select, .input-merge .input-group:last-child .form-textarea { border-bottom: 1px solid #e1e1e1; } .input-merge.input-merge-border .input-group:first-child .input-group-addon, .input-merge.input-merge-border .input-group:first-child .form-control, .input-merge.input-merge-border .input-group:first-child .form-select, .input-merge.input-merge-border .input-group:first-child .form-textarea { border-top: 0; } .input-merge.input-merge-border .input-group:last-child .input-group-addon, .input-merge.input-merge-border .input-group:last-child .form-control, .input-merge.input-merge-border .input-group:last-child .form-select, .input-merge.input-merge-border .input-group:last-child .form-textarea { border-bottom: 0; } .input-merge.input-merge-border { border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; background: #fff; } .input-group-addon-disabled, .form-control[disabled], .form-control:disabled, .form-textarea[disabled], .form-textarea:disabled, .form-textarea[disabled], .form-textarea:disabled, .form-select[disabled], .form-select:disabled { background-color: #f9f9f9; opacity: 1; -webkit-opacity: 1;} .input-group .form-input { height: 45px; border-top: 1px solid #e1e1e1; position: relative; padding: 7px 0; } .input-group .form-input-text { color: #909090; font-size: 15px; } .input-group .form-select-box { display: inline-block; position: relative; margin-right: 10px; } .input-group .form-select-box .form-select { width: 100%; } .input-group .form-select-box .form-select-arrow { top: 7px; right: 12px } .input-group .form-text-box { -webkit-box-flex: 1; box-flex: 1; border-right: 1px solid #e1e1e1; border-top: 1px solid #e1e1e1; padding: 9px 0px; line-height: 1.88; font-size: 14px;} .input-group.input-border .form-text-box {border-right: 0;} .input-group.input-border .form-input .form-control, .input-group.input-border .form-input .form-select { height: 31px; border: #e1e1e1 1px solid !important; border-radius: 2px; display: inline-block; vertical-align: baseline; line-height: 1.2; } .input-group .input-clear { position: absolute; right: .3rem; top: 50%; margin-top: -.4rem; background: #7e7e7e; border-radius: 50%; width: .8rem; height: .8rem; text-align: center; } .input-group .input-clear:before, .c-ser-main .input-clear:after { content: ''; position: absolute; height: 1px; width: .5rem; top: 50%; left: 50%; margin-top: -.025rem; margin-left: -.25rem; background: #fff; border-radius: 6px; } .input-group .input-clear:before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .input-group .input-clear:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .input-group-checkbox, .input-group-radio { display: inline-block; position: relative; font-size: 14px; color: #909090; } .input-group-checkbox input[type="checkbox"], .input-group-radio input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; } .input-group-checkbox .input-group-pack, .input-group-radio .input-group-pack { width: 20px; height: 20px; background-color: #ffffff; border: 1px #d3d3d3 solid; padding: 0; margin: 0 5px 0 0; position: relative; display: inline-block; vertical-align: middle; border-radius: 5px; overflow: hidden; top: -2px; } .input-group-radio .input-group-pack { border-radius: 50%; } .input-group-checkbox .input-group-pack.input-group-pack-disabled, .input-group-radio .input-group-pack.input-group-pack-disabled { background-color: #f0f0f0; } .input-group-checkbox .input-group-pack .tick { display: block; width: 12px; height: 2px; background: #4dcd70; margin: 8px 0 0 6px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); position: relative; top: 50px; } .input-group-checkbox .input-group-pack .tick:after { content: ''; width: 8px; height: 2px; background: #4dcd70; position: absolute; top: -3px; left: -5px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .input-group-radio .input-group-pack .disc { display: block; content: "" !important; width: 0px; height: 0px; border-radius: 50%; background-color: #4dcd70; margin: 4px; } .input-group-checkbox input[type="checkbox"]:checked ~ .tick, .input-group-checkbox .input-group-pack.checked .tick { top: 0px; } .input-group-radio input[type="radio"]:checked ~ .disc, .input-group-radio .input-group-pack.checked .disc { width: 10px; height: 10px; } .input-group-switch { position: relative; font-size: 16px; width: 52px; height: 32px; line-height: 1em; } .input-group-switch input { width: 52px; height: 32px; position: absolute; z-index: 10; border: none; background: none; -webkit-appearance: none; outline: none; } .input-group-switch input:before { content: ''; width: 50px; height: 30px; border: 1px solid #e5e5e5; background-color: #fff; border-radius: 20px; cursor: pointer; display: inline-block; position: relative; vertical-align: middle; -webkit-user-select: none; user-select: none; -webkit-box-sizing: content-box; box-sizing: content-box; border-color: #dfdfdf; -webkit-box-shadow: #dfdfdf 0px 0px 0px 0px inset; box-shadow: #dfdfdf 0px 0px 0px 0px inset; -webkit-transition: border 0.4s, -webkit-box-shadow 0.4s; transition: border 0.4s, box-shadow 0.4s; -webkit-background-clip: content-box; background-clip: content-box; } .input-group-switch input:checked:before { border-color: #4cd964; -webkit-box-shadow: #4cd964 0px 0px 0px 16px inset; box-shadow: #4cd964 0px 0px 0px 16px inset; background-color: #4cd964; transition: border 0.4s, box-shadow 0.4s, background-color 1.2s; -webkit-transition: border 0.4s, -webkit-box-shadow 0.4s, background-color 1.2s; background-color: #4cd964; } .input-group-switch input:checked:after { left: 21px; } .input-group-switch input:after { content: ''; width: 30px; height: 30px; position: absolute; top: 1px; left: 0; border-radius: 100%; background-color: #fff; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); -webkit-transition: left 0.2s; transition: left 0.2s; } .input-group-switch input.thread:before { content: ''; width: 50px; height: 3px; border: 1px solid #e5e5e5; background-color: #e5e7ea; border-radius: 20px; cursor: pointer; display: inline-block; position: relative; vertical-align: middle; -webkit-user-select: none; user-select: none; -webkit-box-sizing: content-box; box-sizing: content-box; border-color: #dfdfdf; -webkit-box-shadow: #dfdfdf 0px 0px 0px 0px inset; box-shadow: #dfdfdf 0px 0px 0px 0px inset; -webkit-transition: border 0.4s, -webkit-box-shadow 0.4s; transition: border 0.4s, box-shadow 0.4s; -webkit-background-clip: content-box; background-clip: content-box; } .input-group-switch input.thread:checked:before { border-color: #4cd964; -webkit-box-shadow: #4cd964 0px 0px 0px 16px inset; box-shadow: #4cd964 0px 0px 0px 16px inset; background-color: #4cd964; transition: border 0.4s, box-shadow 0.4s, background-color 1.2s; -webkit-transition: border 0.4s, -webkit-box-shadow 0.4s, background-color 1.2s; background-color: #4cd964; } .input-group-switch input.thread:checked:after { left: 33px; } .input-group-switch input.thread:after { content: ''; width: 20px; height: 20px; position: absolute; top: 1px; left: 0; border-radius: 100%; background-color: #fff; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); -webkit-transition: left 0.2s; transition: left 0.2s; } /* c-list -----------------------------------------------------------------------------*/ .ptb12 { padding-top: .6rem; padding-bottom: .6rem; } .c-list-group h3 { padding: .3rem .75rem; background-color: #f9f9f9; font-size: .65rem; color: #5b5b5b; margin: 0; vertical-align: middle; } .c-avatar-s { width: 1.3rem; height: 1.3rem; } .c-avatar-m { width: 2rem; height: 2rem; } .c-avatar-l { width: 2.7rem; height: 2.7rem; } .c-avatar-s img, .c-avatar-m img, .c-avatar-l img { width: 100%; height: 100%; } .c-list > li, .c-list > .c-list-div { position: relative; display: -webkit-box; display: box; -webkit-box-pack: center; box-pack: center; padding-right: 0.75rem; margin-left: 0.75rem; border-top: 1px solid #f1f1f1; line-height:1rem;} .c-list > li:first-child, .c-list > .c-list-div:first-child { border-top: none; } .c-list > .c-list-cover, .c-list > .c-list-link:active { padding-left: 0.75rem; margin-left: 0; } .c-list > .c-list-link:active { background: #f7f7f7;} .c-list-a{display: -webkit-box; display: box; width:100%; color:#333;} .c-list-title, .c-list-key, .c-list-info { display: -webkit-box; display: box; -webkit-box-orient: vertical; box-orient: vertical; -webkit-box-pack: center; box-pack: center; } .c-list-title{ -webkit-box-pack: start; box-pack: start;} .c-list-info { -webkit-box-flex: 1; box-flex: 1; } .c-list > .c-list-fun, .c-list > .c-list-label{ border-top: none; padding-right: 0; } .c-list > li:first-child, .c-list > .c-list-fun:first-child .c-list-info, .c-list > .c-list-fun:first-child .c-list-key, .c-list > .c-list-fun:first-child .c-list-title, .c-list-div:first-child { border: none; } .c-list > .list-arrow-r, .c-list > .list-arrow-u, .c-list > .list-arrow-d { padding-right: 1.5rem; } .c-list > .list-arrow-r:after, .c-list > .list-arrow-u:after, .c-list > .list-arrow-d:after { position: absolute; top: 50%; right: 0.75rem; margin-top: -0.25rem; content: ""; display: block; width: 0.4rem; height: 0.4rem; border: solid #cdcdcd; border-width: 0.1rem 0.1rem 0 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .c-list > .list-arrow-u:after { right: 0.65rem; margin-top: -0.1rem; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .c-list > .list-arrow-d:after { right: 0.65rem; margin-top: -0.4rem; -webkit-transform: rotate(135deg); transform: rotate(135deg); } .c-list-info.c-border-t, .c-list-key.c-border-t, .c-list-title.c-border-t { border-color: #f1f1f1; } .required { position: relative; } .required:before { content: "*"; position: absolute; color: #f00; font-size: 0.7rem; height: 0.6rem; line-height: 0.6rem; vertical-align: middle; left: -0.4rem; top: 50%; margin-top: -0.25rem; } .listform-text{ width:100%; height:1.5rem; line-height:normal;} .listform-sel{ display:inline-block; width:100%; position:relative;} .listform-sel:before{ position: absolute; top: 50%; right:0; margin-top: -0.35rem; content: ""; display: block; width: 0.4rem; height: 0.4rem; border: solid #cdcdcd; border-width: 0.1rem 0.1rem 0 0; -webkit-transform: rotate(135deg); transform: rotate(135deg); } .listform-sel-bor:before{ right:.5rem;} .ptb7{ padding-top:.35rem; padding-bottom:.35rem;} .listform-sel select{ width:100%; height:1.5rem; border:none;} .listform-sel-bor select{ border:1px solid #e1e1e1; border-radius:4px; padding:0 .5rem;} .listsel-two{ width:47%; margin-left:4%;} .c-list-info .listsel-two:first-child{ margin-left:0;} .listsel-three{ width:30%; margin-left:3%;} .c-list-info .listsel-three:first-child{ margin-left:0;} .listform-textarea{ display:block; width:100%; border:none; position:relative;} .listform-sel-other{width:100%; height:1.5rem; border:1px solid #e1e1e1; border-radius:.2rem; padding:0 .5rem;} /* css c-lab1 -----------------------------------------------------------------------------*/ .c-les-hold{ height:2.5rem;} .c-les-div{ width:100%; height:2.5rem; padding-top:.45rem; box-sizing:border-box; -webkit-box-sizing:border-box;} .c-labposi{ position:fixed; left:0; top:0; z-index:600;} .c-lab-les { display: -webkit-box; display: box; border: 1px solid #37a6eb; overflow: hidden;} .c-lab-les li { -webkit-box-flex: 1; box-flex: 1; width:1px; height: 1.5rem; line-height: 1.5rem; text-align: center; border-left: 1px solid #37a6eb; } .c-lab-les li:first-child { border-left: none; } .c-lab-les li a { display: block; width: 100%; height: 1.5rem; color: #0894ec; } .c-lab-les li.hit, .c-lab-les li.curr { background: #0894ec; } .c-lab-les li.hit a, .c-lab-les li.curr a { color: #fff; } /* css c-lab2 -----------------------------------------------------------------------------*/ .c-mor-hold{ height:2rem;} .c-lab-mor { width:100%; height:2rem; display: box; display: -webkit-box; background: #fff; border-bottom: 1px solid #e1e1e1;} .c-lab-mor li { -webkit-box-flex: 1; box-flex: 1; width:1px; height: 2rem; line-height: 2rem; text-align: center; position:relative;} .c-lab-mor li a { display: block; width: 100%; height: 100%; color: #5b5b5b;} .c-lab-mor li.hit:before, .c-lab-mor li.curr:before { content:''; display:block; width:100%; height:.15rem; background:#0894ec; position:absolute; left:0; bottom:-1px;} .c-lab-mor li.hit a, .c-lab-mor li.curr a { color: #0894ec;} /* buttons -----------------------------------------------------------------------------*/ .c-btn , .c-btn-full , .c-btn-large , .c-btn-big , .c-btn-small , .c-btn-tiny , .c-btn-screenful , .c-btn-icon , .c-btn-label , .c-btn-label-l , .c-btn-label-r {display:inline-block; vertical-align:baseline; outline:none; cursor:pointer; border:0; background:none; text-align:center; text-decoration:none; padding:12px 34px; color:#fff; position:relative; font: 14px/1 \5FAE\8F6F\96C5\9ED1,tahoma,arial,\5b8b\4f53; line-height:normal !important; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;} .c-btn:hover , .c-btn:active {text-decoration:none;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in; transition:all 0.3s ease-in;} .c-btn-full {width:100%; height:100%; vertical-align:middle;} .c-btn-large {padding:14px 40px; font-size:18px;} .c-btn-big {padding:10px 40px; font-size:16px;} .c-btn-small {padding:10px 18px; font-size:12px;} .c-btn-tiny {padding:6px 10px; font-size:12px;} .c-btn-disable {cursor:default; background:#ccc; border:0; color:#fff;} .c-btn-disable:hover,.c-btn-disable:active {background-color:#ccc; top:0;} .c-btn-screenful , .c-btn-label-l , .c-btn-label-r {width:100%; height:100%; display:table; padding:0; font-size:inherit;} .c-btn-screenful .c-btn-span , .c-btn-label-l .c-btn-span , .c-btn-label-r .c-btn-span{display:table-cell; vertical-align:middle;} .c-btn-icon .iconfont , .c-btn-icon .icon{margin-right:7px;} .c-btn.c-btn-arc , .c-btn-full.c-btn-arc , .c-btn-large.c-btn-arc , .c-btn-big.c-btn-arc , .c-btn-small.c-btn-arc , .c-btn-tiny.c-btn-arc , .c-btn-screenful.c-btn-arc , .c-btn-icon.c-btn-arc , .c-btn-label.c-btn-arc , .c-btn-label-l.c-btn-arc , .c-btn-label-r.c-btn-arc {border-radius:1000px;} .c-btn.c-btn-radius , .c-btn-full.c-btn-radius , .c-btn-large.c-btn-radius , .c-btn-big.c-btn-radius , .c-btn-small.c-btn-radius , .c-btn-tiny.c-btn-radius , .c-btn-screenful.c-btn-radius , .c-btn-icon.c-btn-radius , .c-btn-label.c-btn-radius , .c-btn-label-l.c-btn-radius , .c-btn-label-r.c-btn-radius {border-radius:6px;} .c-btn.c-btn-rounded , .c-btn-full.c-btn-rounded , .c-btn-large.c-btn-rounded , .c-btn-big.c-btn-rounded , .c-btn-small.c-btn-rounded , .c-btn-tiny.c-btn-rounded , .c-btn-screenful.c-btn-rounded , .c-btn-icon.c-btn-rounded , .c-btn-label.c-btn-rounded , .c-btn-label-l.c-btn-rounded , .c-btn-label-r.c-btn-rounded{border-radius:2px;} .c-btn-label {position:relative} .c-btn-label-l i.iconfont , .c-btn-label-r i.iconfont , .c-btn-label-l i.icon , .c-btn-label-r i.icon {padding:0 6px; display:inline-block; position:absolute; top:0; height:100%; line-height:200%; background:rgba(0,0,0,.04)} .c-btn-label-l i.iconfont , .c-btn-label-l i.icon {left:0;} .c-btn-label-r i.iconfont , .c-btn-label-r i.icon {right:0;} .c-btn-label:hover i.iconfont , .c-btn-label-l:hover i.iconfont , .c-btn-label-r:hover i.iconfont {background:rgba(0,0,0,.1);} .c-btn-087eff { background-color: #087eff; } .c-btn-087eff:hover { background-color: #0771e5; } .c-btn-588cd5 { background-color: #588cd5; } .c-btn-588cd5:hover { background-color: #4680d0; } .c-btn-37a6ec { background-color: #37a6ec; } .c-btn-37a6ec:hover { background-color: #3195d4; } .c-btn-4dcd70 { background-color: #4dcd70; } .c-btn-4dcd70:hover { background-color: #45b865; } .c-btn-4db944 { background-color: #4db944; } .c-btn-4db944:hover { background-color: #45a63d; } .c-btn-309765 { background-color: #309765; } .c-btn-309765:hover { background-color: #2b885b; } .c-btn-ff9600 { background-color: #ff9600; } .c-btn-ff9600:hover { background-color: #e58700; } .c-btn-ff8100 { background-color: #ff8100; } .c-btn-ff8100:hover { background-color: #e57400; } .c-btn-fc6155 { background-color: #fc6155; } .c-btn-fc6155:hover { background-color: #e2574c; } .c-btn-ff3b2f { background-color: #ff3b2f; } .c-btn-ff3b2f:hover { background-color: #e5352a; } .c-btn-f9f9f9 { background-color: #f9f9f9; color: #087eff; border: #c0c0bc 1px solid; } .c-btn-f9f9f9:hover { background-color: #e0e0e0; } .c-btn-ffffff { background-color: #ffffff; color: #4dcd70; border: #e1e1e1 1px solid; } .c-btn-ffffff:hover { background-color: #e5e5e5; } .c-btn-fff { background-color: #ffffff; color: #999999; border: #e1e1e1 1px solid; } .c-btn-fff:hover { background-color: #e5e5e5; } .c-btn-ff3 { background-color: #ffffff; color: #ff3b2d; border: #e1e1e1 1px solid; } .c-btn-ff3:hover { background-color: #e5e5e5; } /* css step -----------------------------------------------------------------------------*/ .c-step-box { width: 100%; height: 10rem; display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; border: 1px solid #ddd; } .c-step-bar { text-align: center; overflow: hidden; counter-reset: step; } .c-step-bar li { color: #909090; text-transform: uppercase; font-size: .6rem; float: left; position: relative; padding-top: 1.25rem; } .step-n2 li { width: 50%; } .step-n3 li { width: 33.33%; } .step-n4 li { width: 25%; } .step-n5 li { width: 20%; } .step-n6 li { width: 16.66%; } .c-step-bar li:before { content: counter(step); counter-increment: step; position: absolute; top: 0; left: 50%; width: 1rem; line-height: 1rem; display: inline-block; font-size: .6rem; color: #909090; background: #dcdcdc; border-radius: 50%; margin-left: -.5rem; z-index: 2; } .c-step-bar li:after { content: ""; width: 100%; height: .1rem; background: #dcdcdc; position: absolute; left: -50%; top: .45rem; z-index: 1; } .text-up li { padding-bottom: 1.25rem; } .text-up li:before { top: auto; bottom: 0; } .text-up li:after { top: auto; bottom: .45rem; } .c-step-bar li:first-child:after { content: none; } .c-step-bar li.active { color: #37a1ff } .c-step-bar li.active:before, .c-step-bar li.active:after { background: #37a1ff; color: #fff; } .step-bar-icon li { padding-top: 2.25rem; } .step-bar-icon li:before { content: none; } .step-bar-icon li:after { height: .15rem; top: .95rem; } .step-bar-icon li .step-icon { position: absolute; display: box !important; display: -webkit-box !important; ; -webkit-box-orient: vertical; -webkit-box-pack: center; top: 0; left: 50%; width: 2rem; height: 2rem; color: #909090; background: #dcdcdc; display: inline-block; margin-left: -20px; z-index: 2; border-radius: 50%; } .step-bar-icon li .step-icon i { font-size: 1.2rem; } .c-step-bar li.active .step-icon { background: #37a1ff; color: #fff; } .c-step-bar-w { display: table; width: 100%; padding: 0; margin: 0; position: relative } .c-step-bar-w li { display: table-cell; text-align: center; width: 1%; } .c-step-bar-w li .step { position: relative; display: inline-block; width: 2rem; height: 2rem; border: 4px solid #ced1d6; color: #546474; border-radius: 50%; background-color: #FFF; z-index: 2; line-height: 40px; text-align: center; vertical-align: middle; } .c-step-bar-w li:before { display: block; content: ""; width: 100%; height: .05rem; font-size: 0; overflow: hidden; border-top: 4px solid #ced1d6; position: relative; top: 1.35rem; z-index: 1 } .txt-up li { position: relative; padding-top: 1.5rem; } .txt-up li .title { width: 100%; text-align: center; position: absolute; top: 0; left: 0; } .c-step-bar-w li:last-child:before { max-width: 50%; width: 50% } .c-step-bar-w li:first-child:before { max-width: 51%; left: 50% } .c-step-bar-w li.active:before, .c-step-bar-w li.complete:before, .c-step-bar-w li.active .step, .c-step-bar-w li.complete .step { border-color: #37a1ff } .c-step-bar-w li.complete .step:before { display: block; content: ""; position: absolute; top: .55rem; left: .55rem; width: .8rem; height: .45rem; border-left: 4px solid #87ba21; border-bottom: 4px solid #87ba21; text-align: center; z-index: 3; color: #87ba21; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .c-step-bar-w li .title { display: block; margin-top: .2rem; max-width: 100%; color: #949ea7; z-index: 100; text-align: center; table-layout: fixed; word-wrap: break-word; } .c-step-bar-w li.complete .title, .c-step-bar-w li.active .title { color: #2b3d53; } .c-step-bar-w li .iconfont { color: #37a1ff; font-size: 1.4rem !important; } .c-step-bar-w li .iconfont { color: #ced1d6; font-size: 1.4rem !important; } .c-step-bar-w li.active .iconfont, .c-step-bar-w li.complete .iconfont, .c-step-bar-w li.active .step .iconfont, .c-step-bar-w li.complete .step .iconfont { color: #37a1ff; } /* css step -----------------------------------------------------------------------------*/ .c-step-box { width: 100%; height: 10rem; display: box; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; border: 1px solid #ddd; } .c-step-bar { text-align: center; overflow: hidden; counter-reset: step; } .c-step-bar li { color: #909090; text-transform: uppercase; font-size: .6rem; float: left; position: relative; padding-top: 1.25rem; } .step-n2 li { width: 50%; } .step-n3 li { width: 33.33%; } .step-n4 li { width: 25%; } .step-n5 li { width: 20%; } .step-n6 li { width: 16.66%; } .c-step-bar li:before { content: counter(step); counter-increment: step; position: absolute; top: 0; left: 50%; width: 1rem; line-height: 1rem; display: inline-block; font-size: .6rem; color: #909090; background: #dcdcdc; border-radius: 50%; margin-left: -.5rem; z-index: 2; } .c-step-bar li:after { content: ""; width: 100%; height: .1rem; background: #dcdcdc; position: absolute; left: -50%; top: .45rem; z-index: 1; } .text-up li { padding-bottom: 1.25rem; } .text-up li:before { top: auto; bottom: 0; } .text-up li:after { top: auto; bottom: .45rem; } .c-step-bar li:first-child:after { content: none; } .c-step-bar li.active { color: #37a1ff } .c-step-bar li.active:before, .c-step-bar li.active:after { background: #37a1ff; color: #fff; } .step-bar-icon li { padding-top: 2.25rem; } .step-bar-icon li:before { content: none; } .step-bar-icon li:after { height: .15rem; top: .95rem; } .step-bar-icon li .step-icon { position: absolute; display: box !important; display: -webkit-box !important; ; -webkit-box-orient: vertical; -webkit-box-pack: center; top: 0; left: 50%; width: 2rem; height: 2rem; color: #909090; background: #dcdcdc; display: inline-block; margin-left: -20px; z-index: 2; border-radius: 50%; } .step-bar-icon li .step-icon i { font-size: 1.2rem; } .c-step-bar li.active .step-icon { background: #37a1ff; color: #fff; } .c-step-bar-w { display: table; width: 100%; padding: 0; margin: 0; position: relative } .c-step-bar-w li { display: table-cell; text-align: center; width: 1%; } .c-step-bar-w li .step { position: relative; display: inline-block; width: 2rem; height: 2rem; border: 4px solid #ced1d6; color: #546474; border-radius: 50%; background-color: #FFF; z-index: 2; line-height: 40px; text-align: center; vertical-align: middle; } .c-step-bar-w li:before { display: block; content: ""; width: 100%; height: .05rem; font-size: 0; overflow: hidden; border-top: 4px solid #ced1d6; position: relative; top: 1.35rem; z-index: 1 } .txt-up li { position: relative; padding-top: 1.5rem; } .txt-up li .title { width: 100%; text-align: center; position: absolute; top: 0; left: 0; } .c-step-bar-w li:last-child:before { max-width: 50%; width: 50% } .c-step-bar-w li:first-child:before { max-width: 51%; left: 50% } .c-step-bar-w li.active:before, .c-step-bar-w li.complete:before, .c-step-bar-w li.active .step, .c-step-bar-w li.complete .step { border-color: #37a1ff } .c-step-bar-w li.complete .step:before { display: block; content: ""; position: absolute; top: .55rem; left: .55rem; width: .8rem; height: .45rem; border-left: 4px solid #87ba21; border-bottom: 4px solid #87ba21; text-align: center; z-index: 3; color: #87ba21; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .c-step-bar-w li .title { display: block; margin-top: .2rem; max-width: 100%; color: #949ea7; z-index: 100; text-align: center; table-layout: fixed; word-wrap: break-word; } .c-step-bar-w li.complete .title, .c-step-bar-w li.active .title { color: #2b3d53; } .c-step-bar-w li .iconfont { color: #37a1ff; font-size: 1.4rem !important; } .c-step-bar-w li .iconfont { color: #ced1d6; font-size: 1.4rem !important; } .c-step-bar-w li.active .iconfont, .c-step-bar-w li.complete .iconfont, .c-step-bar-w li.active .step .iconfont, .c-step-bar-w li.complete .step .iconfont { color: #37a1ff; } /* css search -----------------------------------------------------------------------------*/ .bgc-f2f4f6{ background:#f2f4f6;} .c-ser-hold{ height:2.25rem;} .c-serposi{ position:fixed; left:0; top:0; z-index:600;} .c-ser-div { width: 100%; height: 2.25rem; padding: .35rem .5rem 0 .5rem; display: -webkit-box; display: box; box-sizing:border-box; -webkit-box-sizing:border-box;} .c-ser-into { width:100%; background: #fff; height: 1.5rem; line-height: 1.5rem; border-radius: .2rem; color: #b3b3b3; padding:0 .4rem; box-sizing:border-box; -webkit-box-sizing:border-box;} .ser-icon { position: relative; display: inline-block; width: 13px; height: 13px; font-size: 1px; background: none; vertical-align:middle; margin-bottom:4px;} .ser-icon:before, .ser-icon:after { content: ""; position: absolute; left: 0; background: transparent; font-size: 1px; } .ser-icon-search:before { left: 1px; top: 1px; width: 10px; height: 10px; border: 1px solid #aaa9a9; border-radius: 50%;} .ser-icon-search:after { left: 10px; top: 12px; width: 5px; height: 1px; background: #aaa9a9; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); } .c-ser-back { width: 1rem; -webkit-box-flex: 0; box-flex: 0; overflow: hidden; } .c-ser-back .si-right { display: inline-block; width: 12px; height: 12px; border: solid #a3a3a7; border-width: 0 0 1px 1px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); margin:9px 0 0 3px;} .c-ser-main { -webkit-box-flex: 1; box-flex: 1; background: #fff; height: 1.5rem; border-radius: .2rem; font-size: .75rem; color: #8e8e93; position: relative; padding:0 .5rem 0 1.25rem; overflow: hidden; } .c-ser-main i { position: absolute; left: .35rem; top:50%; margin-top:-7px;} .c-ser-input { width: 100%; background: #fff; height: 1.5rem; line-height: 1.5rem; border: none; color: #333; border-radius: 5px;} .c-ser-btn { margin-left: .5rem; -webkit-box-flex: 0; box-flex: 0; } .c-ser-btn a { display: block; height: 1.5rem; line-height: 1.5rem; padding: 0 .5rem; background: #3aa7ed; color: #fff; font-size: .7rem; border-radius: .2rem; } .c-ser-canc { margin-left: .5rem; -webkit-box-flex: 0; box-flex: 0; } .c-ser-canc a { display: block; height: 1.5rem; line-height: 1.5rem; padding: 0 .25rem; color:#17b3ec;} .c-ser-main .input-clear { position: absolute; right: .3rem; top: 50%; margin-top: -.4rem; background: #7e7e7e; border-radius: 50%; width: .8rem; height: .8rem; text-align: center; } .c-ser-main .input-clear:before, .c-ser-main .input-clear:after { content: ''; position: absolute; height: 1px; width: .5rem; top: 50%; left: 50%; margin-top: -.025rem; margin-left: -.25rem; background: #fff; border-radius: 6px; } .c-ser-main .input-clear:before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .c-ser-main .input-clear:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } /* css c-badge -----------------------------------------------------------------------------*/ .c-badge {display:inline-block; min-width:19px; height:19px; line-height:19px; text-align:center; color:#fff; vertical-align:baseline; white-space:nowrap; background-color:#999; padding:0 6px; text-align:center; border-radius:10px;} .c-badge-orange {background-color:#f47b1c;} .c-badge-blue {background-color:#73bdec;} .c-badge-red {background-color:#f03a3a;} .c-badge-green {background-color:#4cd964;} /* css c-table two -----------------------------------------------------------------------------*/ .c-table { width: 100%; border-collapse: collapse } .c-table th { font-weight: 700; } .c-table td, .c-table th { border-bottom: 1px solid #f1f1f1; border-right: 1px solid #f1f1f1; text-align: center; padding: .5rem; } .c-table tr td:last-child, .c-table tr th:last-child { border-right: 0 } .c-table tr:last-child td { border-bottom: 0 } .glu-tab tbody{ font-size:.6rem;} .glu-tab th{ vertical-align:middle;} .glu-tab tbody td{ width:11.875%;} .glu-tab tbody tr td:first-child{ width:auto;} .bp-tab tbody{ font-size:.6rem;} .bp-tab th{ vertical-align:middle;} .bp-tab tbody td{ width:13.875%;} .bp-tab tbody tr td:first-child{ width:auto;} /* onoffswitch -----------------------------------------------------------------------------*/ .c-onoffswitch { position: relative; width: 65px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .c-onoffswitch input.onoffswitch-checkbox { opacity: 0 } .onoffswitch-label { display: block; overflow: hidden; cursor: pointer; border-radius: 6px; } .onoffswitch-inner { width: 200%; margin-left: -100%; -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { margin-left: 0; } .onoffswitch-inner:before, .onoffswitch-inner:after { float: left; width: 50%; height: 28px; padding: 0; line-height: 28px; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .onoffswitch-inner:before { content: "ON"; padding-left: 5px; background-color: #4cd964; color: #FFFFFF; } .onoffswitch-inner:after { content: "OFF"; padding-right: 5px; background-color: #e5e7ea; color: #a4a9ae; text-align: right; } .onoffswitch-switch { width: 22px; height: 22px; margin: 4px; background: #FFFFFF; border-radius: 6px; position: absolute; top: 50%; margin-top: -1px; right: 35px; -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { right: 0px; } /* css auxili -----------------------------------------------------------------------------*/ .c-reddot { position: relative; display: inline-block; padding: 0 .25rem; } .c-reddot:after { content: ''; position: absolute; display: block; width: .4rem; height: .4rem; background-color: #f76249; border-radius: 5px; right: -3px; top: -3px; -webkit-background-clip: padding-box; background-clip: adding-box; } .c-get-more a { display: block; text-align: center; line-height: 1.75rem;}