* { font-family: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;} *, ::after, ::before { box-sizing: border-box; } html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; font-size: 125%;} article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {display: block;} body {padding: 0; margin: 0; font-size:.7rem; line-height: 1.5; color: #212529; text-align: left; background: #fff;} [tabindex="-1"]:focus { outline: 0} hr { box-sizing: content-box; height: 0; overflow: visible;} h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom:.25rem; font-weight: 300;} p { margin:0 0 .75rem 0;} abbr[data-original-title], abbr[title] { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; cursor: help; border-bottom: 0; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none } address { margin-bottom:.5rem; font-style: normal; line-height: inherit; } dl, ol, ul { margin: 0; padding: 0; list-style: none; } ol ol, ol ul, ul ol, ul ul { margin: 0; padding: 0; } dt { font-weight: 700; } dd { margin-bottom:.5rem; margin-left: 0; } blockquote { margin:0 0 .5rem; } b, strong { font-weight: bold; } small { font-size: 80%; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sub { bottom: -.25em; } sup { top: -.5em; } em { font-style: normal; } a { color: #333; text-decoration: none; } a:hover { color: #f30; } a:not([href]):not([tabindex]) {/*color:inherit;*/ text-decoration: none; } a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {/*color:inherit;*/ text-decoration: none } a:not([href]):not([tabindex]):focus { outline: 0 } code, kbd, pre, samp { font-size: 1em; } pre { margin-top: 0; margin-bottom:.5rem; overflow: auto; } figure { margin:0 0 .5rem; } img { vertical-align: middle; border-style: none; } table { border-collapse: collapse; } caption { padding:.75rem auto; color: #6c757d; text-align: left; caption-side: bottom } th { text-align: inherit } label { display: inline-block; } button { border-radius: 0; } button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit } button, input { overflow: visible } button, select { text-transform: none } input, button, select, textarea { outline: none; } textarea { resize: none; } select { word-wrap: normal } [type=button], [type=reset], [type=submit], button { -webkit-appearance:button } [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) { cursor: pointer } [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner { padding:0; border-style:none } input[type=checkbox], input[type=radio] { box-sizing: border-box; padding: 0 } textarea { overflow: auto; resize: vertical } progress { vertical-align: baseline } form { margin: 0; padding: 0; } fieldset { margin:.75rem 0; border: 1px solid #eaeaea; padding: 0 1rem 1rem 1rem; border-radius:.2rem; font-size:.75rem; line-height: 1.5rem; color: #333; } legend { border: 0; font-size:.85rem; width: auto; margin:.5rem; padding:0 .25rem; color: #f30; } hr { display: block; padding: 0; border: 0; height: 0; border-top: 1px solid #ddd; } @font-face { font-family: "iconfont"; src: url('../font/iconfont.eot'); src: url('../font/iconfont.eot') format('embedded-opentype'), url('../font/iconfont.woff') format('woff'), url('../font/iconfont.ttf') format('truetype'), url('../font/iconfont.svg') format('svg'); } [class*=ui-icon-], .ui-icon-font { font-family:"iconfont"; font-size:1rem; font-style:normal; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; vertical-align:middle; } .ui-icon-cart:before { content: "\e6af"; } .ui-icon-rmb:before { content: "\e836"; } .ui-icon-weixin:before { content: "\e697"; } .ui-icon-qq:before { content: "\e601"; } .ui-icon-top:before { content: "\e61e"; } .ui-icon-list:before { content: "\e64b"; } .ui-icon-hao:before { content: "\e62c"; } .ui-icon-qi:before { content: "\e633"; } .ui-icon-sheng:before { content: "\e635"; } .ui-icon-kuai:before { content: "\e63e"; } .ui-icon-man:before { content: "\e63f"; } .ui-icon-mian:before { content: "\e640"; } .ui-icon-pei:before { content: "\e642"; } .ui-icon-you:before { content: "\e648"; } .ui-icon-zheng:before { content: "\e64a"; } .ui-icon-more:before { content: "\e628"; } .ui-icon-alipay:before { content: "\e67b"; } .ui-icon-weibo:before { content: "\e608"; } .ui-icon-tel:before { content: "\e6e8"; } .ui-icon-check-circle:before { content: "\e77d"; } .ui-icon-Dollar:before { content: "\e77f"; } .ui-icon-compass:before { content: "\e780"; } .ui-icon-close-circle:before { content: "\e781"; } .ui-icon-frown:before { content: "\e782"; } .ui-icon-info-circle:before { content: "\e783"; } .ui-icon-left-circle:before { content: "\e784"; } .ui-icon-down-circle:before { content: "\e785"; } .ui-icon-copyright:before { content: "\e786"; } .ui-icon-minus-circle:before { content: "\e787"; } .ui-icon-meh:before { content: "\e788"; } .ui-icon-plus-circle:before { content: "\e789"; } .ui-icon-play-circle:before { content: "\e78a"; } .ui-icon-question-circle:before { content: "\e78b"; } .ui-icon-right-circle:before { content: "\e78c"; } .ui-icon-smile:before { content: "\e78d"; } .ui-icon-trademark:before { content: "\e78e"; } .ui-icon-time-circle:before { content: "\e78f"; } .ui-icon-timeout:before { content: "\e790"; } .ui-icon-YUAN:before { content: "\e792"; } .ui-icon-up-circle:before { content: "\e793"; } .ui-icon-warning-circle:before { content: "\e794"; } .ui-icon-sync:before { content: "\e795"; } .ui-icon-transaction:before { content: "\e796"; } .ui-icon-undo:before { content: "\e797"; } .ui-icon-redo:before { content: "\e798"; } .ui-icon-reload:before { content: "\e799"; } .ui-icon-reloadtime:before { content: "\e79a"; } .ui-icon-message:before { content: "\e79b"; } .ui-icon-issuesclose:before { content: "\e79d"; } .ui-icon-poweroff:before { content: "\e79e"; } .ui-icon-logout:before { content: "\e79f"; } .ui-icon-piechart:before { content: "\e7a0"; } .ui-icon-setting:before { content: "\e7a1"; } .ui-icon-eye:before { content: "\e7a2"; } .ui-icon-location:before { content: "\e7a3"; } .ui-icon-export:before { content: "\e7a5"; } .ui-icon-save:before { content: "\e7a6"; } .ui-icon-Import:before { content: "\e7a7"; } .ui-icon-appstore:before { content: "\e7a8"; } .ui-icon-adduser:before { content: "\e7ae"; } .ui-icon-deleteteam:before { content: "\e7af"; } .ui-icon-deleteuser:before { content: "\e7b0"; } .ui-icon-addteam:before { content: "\e7b1"; } .ui-icon-user:before { content: "\e7b2"; } .ui-icon-team:before { content: "\e7b3"; } .ui-icon-areachart:before { content: "\e7b4"; } .ui-icon-linechart:before { content: "\e7b5"; } .ui-icon-barchart:before { content: "\e7b6"; } .ui-icon-pointmap:before { content: "\e7b7"; } .ui-icon-container:before { content: "\e7b8"; } .ui-icon-database:before { content: "\e7b9"; } .ui-icon-sever:before { content: "\e7ba"; } .ui-icon-mobile:before { content: "\e7bb"; } .ui-icon-tablet:before { content: "\e7bc"; } .ui-icon-redenvelope:before { content: "\e7bd"; } .ui-icon-book:before { content: "\e7be"; } .ui-icon-filedone:before { content: "\e7bf"; } .ui-icon-reconciliation:before { content: "\e7c0"; } .ui-icon-file-exception:before { content: "\e7c1"; } .ui-icon-filesync:before { content: "\e7c2"; } .ui-icon-filesearch:before { content: "\e7c3"; } .ui-icon-solution:before { content: "\e7c4"; } .ui-icon-fileprotect:before { content: "\e7c5"; } .ui-icon-file-add:before { content: "\e7c6"; } .ui-icon-file-excel:before { content: "\e7c7"; } .ui-icon-file-exclamation:before { content: "\e7c8"; } .ui-icon-file-pdf:before { content: "\e7c9"; } .ui-icon-file-image:before { content: "\e7ca"; } .ui-icon-file-markdown:before { content: "\e7cb"; } .ui-icon-file-unknown:before { content: "\e7cc"; } .ui-icon-file-ppt:before { content: "\e7cd"; } .ui-icon-file-word:before { content: "\e7ce"; } .ui-icon-file:before { content: "\e7cf"; } .ui-icon-file-zip:before { content: "\e7d0"; } .ui-icon-file-text:before { content: "\e7d1"; } .ui-icon-file-copy:before { content: "\e7d2"; } .ui-icon-snippets:before { content: "\e7d3"; } .ui-icon-audit:before { content: "\e7d4"; } .ui-icon-diff:before { content: "\e7d5"; } .ui-icon-Batchfolding:before { content: "\e7d6"; } .ui-icon-securityscan:before { content: "\e7d7"; } .ui-icon-propertysafety:before { content: "\e7d8"; } .ui-icon-safetycertificate:before { content: "\e7d9"; } .ui-icon-alert:before { content: "\e7db"; } .ui-icon-delete:before { content: "\e7dc"; } .ui-icon-bulb:before { content: "\e7de"; } .ui-icon-bell:before { content: "\e7e0"; } .ui-icon-trophy:before { content: "\e7e1"; } .ui-icon-rest:before { content: "\e7e2"; } .ui-icon-USB:before { content: "\e7e3"; } .ui-icon-skin:before { content: "\e7e4"; } .ui-icon-home:before { content: "\e7e5"; } .ui-icon-bank:before { content: "\e7e6"; } .ui-icon-filter:before { content: "\e7e7"; } .ui-icon-funnelplot:before { content: "\e7e8"; } .ui-icon-like:before { content: "\e7e9"; } .ui-icon-unlike:before { content: "\e7ea"; } .ui-icon-unlock:before { content: "\e7eb"; } .ui-icon-lock:before { content: "\e7ec"; } .ui-icon-customerservice:before { content: "\e7ed"; } .ui-icon-flag:before { content: "\e7ee"; } .ui-icon-moneycollect:before { content: "\e7ef"; } .ui-icon-medicinebox:before { content: "\e7f0"; } .ui-icon-shop:before { content: "\e7f1"; } .ui-icon-rocket:before { content: "\e7f2"; } .ui-icon-shopping:before { content: "\e7f3"; } .ui-icon-folder:before { content: "\e7f4"; } .ui-icon-folder-open:before { content: "\e7f5"; } .ui-icon-folder-add:before { content: "\e7f6"; } .ui-icon-deploymentunit:before { content: "\e7f7"; } .ui-icon-accountbook:before { content: "\e7f8"; } .ui-icon-contacts:before { content: "\e7f9"; } .ui-icon-carryout:before { content: "\e7fa"; } .ui-icon-calendar-check:before { content: "\e7fb"; } .ui-icon-calendar:before { content: "\e7fc"; } .ui-icon-scan:before { content: "\e7fd"; } .ui-icon-select:before { content: "\e7fe"; } .ui-icon-laptop:before { content: "\e7ff"; } .ui-icon-barcode:before { content: "\e800"; } .ui-icon-camera:before { content: "\e801"; } .ui-icon-cluster:before { content: "\e802"; } .ui-icon-car:before { content: "\e803"; } .ui-icon-printer:before { content: "\e804"; } .ui-icon-read:before { content: "\e805"; } .ui-icon-cloud-server:before { content: "\e806"; } .ui-icon-cloud-upload:before { content: "\e807"; } .ui-icon-cloud:before { content: "\e808"; } .ui-icon-cloud-download:before { content: "\e809"; } .ui-icon-cloud-sync:before { content: "\e80a"; } .ui-icon-video:before { content: "\e80b"; } .ui-icon-notification:before { content: "\e80c"; } .ui-icon-sound:before { content: "\e80d"; } .ui-icon-qrcode:before { content: "\e80f"; } .ui-icon-fund:before { content: "\e810"; } .ui-icon-image:before { content: "\e811"; } .ui-icon-mail:before { content: "\e812"; } .ui-icon-table:before { content: "\e813"; } .ui-icon-idcard:before { content: "\e814"; } .ui-icon-creditcard:before { content: "\e815"; } .ui-icon-heart:before { content: "\e816"; } .ui-icon-heart-fill:before { content: "\e849"; } .ui-icon-block:before { content: "\e817"; } .ui-icon-error:before { content: "\e818"; } .ui-icon-star:before { content: "\e819"; } .ui-icon-gold:before { content: "\e81a"; } .ui-icon-wifi:before { content: "\e81b"; } .ui-icon-attachment:before { content: "\e81c"; } .ui-icon-edit:before { content: "\e791"; } .ui-icon-key:before { content: "\e81e"; } .ui-icon-api:before { content: "\e81f"; } .ui-icon-disconnect:before { content: "\e820"; } .ui-icon-link:before { content: "\e822"; } .ui-icon-pushpin:before { content: "\e824"; } .ui-icon-shake:before { content: "\e826"; } .ui-icon-tag:before { content: "\e827"; } .ui-icon-tags:before { content: "\e829"; } .ui-icon-right:before { content: "\e82a"; } .ui-icon-left:before { content: "\e82b"; } .ui-icon-up:before { content: "\e82c"; } .ui-icon-down:before { content: "\e82d"; } .ui-icon-fullscreen:before { content: "\e82e"; } .ui-icon-fullscreen-exit:before { content: "\e82f"; } .ui-icon-check:before { content: "\e830"; } .ui-icon-close:before { content: "\e831"; } .ui-icon-line:before { content: "\e832"; } .ui-icon-question:before { content: "\e833"; } .ui-icon-rollback:before { content: "\e834"; } .ui-icon-pause:before { content: "\e835"; } .ui-icon-crown:before { content: "\e842"; } .ui-icon-drag:before { content: "\e843"; } .ui-icon-desktop:before { content: "\e844"; } .ui-icon-gift:before { content: "\e845"; } .ui-icon-stop:before { content: "\e846"; } .ui-icon-fire:before { content: "\e847"; } .ui-icon-thunderbolt:before { content: "\e848"; } .ui-icon-star-fill:before { content: "\e86a"; } .ui-icon-android:before { content: "\e887"; } .ui-icon-sketch:before { content: "\e888"; } .ui-icon-windows:before { content: "\e889"; } .ui-icon-zoomout:before { content: "\e897"; } .ui-icon-apartment:before { content: "\e898"; } .ui-icon-audio:before { content: "\e899"; } .ui-icon-robot:before { content: "\e89b"; } .ui-icon-zoomin:before { content: "\e89c"; } .ui-icon-bug:before { content: "\e8ea"; } .ui-icon-comment:before { content: "\e8eb"; } .ui-icon-videocameraadd:before { content: "\e8ee"; } .ui-icon-switchuser:before { content: "\e8ef"; } .ui-icon-whatsapp:before { content: "\e8f0"; } .ui-icon-search:before { content: "\e8f1"; } .ui-icon-retweet:before { content: "\e8f2"; } .ui-icon-login:before { content: "\e8f3"; } .ui-icon-coupons:before { content: "\e6ed"; } .ui-icon-plus:before { content: "\e8fe"; } .ui-icon-doubleleft:before { content: "\e80e"; } .ui-icon-doubleright:before { content: "\e821"; } .ui-icon-pay:before { content: "\e656"; } .ui-icon-refund:before { content: "\e631"; } .ui-icon-return:before { content: "\e6cf"; } .ui-icon-shipped:before { content: "\e708"; } .ui-icon-post:before { content: "\e62f"; } .ui-icon-receive:before { content: "\e62d"; } .ui-icon-evaluate:before { content: "\e61f"; } .ui-icon-tuan:before { content: "\e618"; } .ui-icon-limit:before { content: "\e6f8"; } .ui-icon-brand:before { content: "\e671"; } .ui-icon-coupon:before { content: "\e625"; } .ui-icon-share:before { content: "\e617"; } .ui-icon-long-arrow-right:before { content: "\e7da"; } .ui-icon-external:before { content: "\e622"; } .ui-icon-square:before { content: "\e839"; } .ui-icon-cube:before { content: "\e6b8"; } .ui-icon-box:before { content: "\e769"; } .ui-icon-html5:before { content: "\eb10"; } /*Grid*/ .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { position: relative; width: 100%; } .col { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100% } .col-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100% } .col-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333% } .col-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667% } .col-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .col-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% } .col-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667% } .col-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .col-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333% } .col-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667% } .col-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75% } .col-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333% } .col-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667% } .col-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .order-first { -ms-flex-order: -1; order: -1 } .order-last { -ms-flex-order: 13; order: 13 } .order-0 { -ms-flex-order: 0; order: 0 } .order-1 { -ms-flex-order: 1; order: 1 } .order-2 { -ms-flex-order: 2; order: 2 } .order-3 { -ms-flex-order: 3; order: 3 } .order-4 { -ms-flex-order: 4; order: 4 } .order-5 { -ms-flex-order: 5; order: 5 } .order-6 { -ms-flex-order: 6; order: 6 } .order-7 { -ms-flex-order: 7; order: 7 } .order-8 { -ms-flex-order: 8; order: 8 } .order-9 { -ms-flex-order: 9; order: 9 } .order-10 { -ms-flex-order: 10; order: 10 } .order-11 { -ms-flex-order: 11; order: 11 } .order-12 { -ms-flex-order: 12; order: 12 } .offset-1 { margin-left: 8.333333% } .offset-2 { margin-left: 16.666667% } .offset-3 { margin-left: 25% } .offset-4 { margin-left: 33.333333% } .offset-5 { margin-left: 41.666667% } .offset-6 { margin-left: 50% } .offset-7 { margin-left: 58.333333% } .offset-8 { margin-left: 66.666667% } .offset-9 { margin-left: 75% } .offset-10 { margin-left: 83.333333% } .offset-11 { margin-left: 91.666667%; } .flex-row { -ms-flex-direction: row; flex-direction: row } .flex-column { -ms-flex-direction: column; flex-direction: column } .flex-row-reverse { -ms-flex-direction: row-reverse; flex-direction: row-reverse } .flex-column-reverse { -ms-flex-direction: column-reverse; flex-direction: column-reverse } .flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap } .flex-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap } .flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse } .flex-fill { -ms-flex: 1 1 auto; flex: 1 1 auto } .flex-grow-0 { -ms-flex-positive: 0; flex-grow: 0 } .flex-grow-1 { -ms-flex-positive: 1; flex-grow: 1 } .flex-shrink-0 { -ms-flex-negative: 0; flex-shrink: 0 } .flex-shrink-1 { -ms-flex-negative: 1; flex-shrink: 1 } .justify-content-start { -ms-flex-pack: start; justify-content: flex-start } .justify-content-end { -ms-flex-pack: end; justify-content: flex-end } .justify-content-center { -ms-flex-pack: center; justify-content: center } .justify-content-between { -ms-flex-pack: justify; justify-content: space-between } .justify-content-around { -ms-flex-pack: distribute; justify-content: space-around } .align-items-start { -ms-flex-align: start; align-items: flex-start } .align-items-end { -ms-flex-align: end; align-items: flex-end } .align-items-center { -ms-flex-align: center; align-items: center } .align-items-baseline { -ms-flex-align: baseline; align-items: baseline } .align-items-stretch { -ms-flex-align: stretch; align-items: stretch } .align-content-start { -ms-flex-line-pack: start; align-content: flex-start } .align-content-end { -ms-flex-line-pack: end; align-content: flex-end } .align-content-center { -ms-flex-line-pack: center; align-content: center } .align-content-between { -ms-flex-line-pack: justify; align-content: space-between } .align-content-around { -ms-flex-line-pack: distribute; align-content: space-around } .align-content-stretch { -ms-flex-line-pack: stretch; align-content: stretch } .align-self-auto { -ms-flex-item-align: auto; align-self: auto } .align-self-start { -ms-flex-item-align: start; align-self: flex-start } .align-self-end { -ms-flex-item-align: end; align-self: flex-end } .align-self-center { -ms-flex-item-align: center; align-self: center } .align-self-baseline { -ms-flex-item-align: baseline; align-self: baseline } .align-self-stretch { -ms-flex-item-align: stretch; align-self: stretch } @media (min-width:576px) { .col-sm { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100% } .col-sm-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100% } .col-sm-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333% } .col-sm-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667% } .col-sm-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .col-sm-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% } .col-sm-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667% } .col-sm-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .col-sm-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333% } .col-sm-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667% } .col-sm-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75% } .col-sm-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333% } .col-sm-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667% } .col-sm-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .order-sm-first { -ms-flex-order: -1; order: -1 } .order-sm-last { -ms-flex-order: 13; order: 13 } .order-sm-0 { -ms-flex-order: 0; order: 0 } .order-sm-1 { -ms-flex-order: 1; order: 1 } .order-sm-2 { -ms-flex-order: 2; order: 2 } .order-sm-3 { -ms-flex-order: 3; order: 3 } .order-sm-4 { -ms-flex-order: 4; order: 4 } .order-sm-5 { -ms-flex-order: 5; order: 5 } .order-sm-6 { -ms-flex-order: 6; order: 6 } .order-sm-7 { -ms-flex-order: 7; order: 7 } .order-sm-8 { -ms-flex-order: 8; order: 8 } .order-sm-9 { -ms-flex-order: 9; order: 9 } .order-sm-10 { -ms-flex-order: 10; order: 10 } .order-sm-11 { -ms-flex-order: 11; order: 11 } .order-sm-12 { -ms-flex-order: 12; order: 12 } .offset-sm-0 { margin-left: 0 } .offset-sm-1 { margin-left: 8.333333% } .offset-sm-2 { margin-left: 16.666667% } .offset-sm-3 { margin-left: 25% } .offset-sm-4 { margin-left: 33.333333% } .offset-sm-5 { margin-left: 41.666667% } .offset-sm-6 { margin-left: 50% } .offset-sm-7 { margin-left: 58.333333% } .offset-sm-8 { margin-left: 66.666667% } .offset-sm-9 { margin-left: 75% } .offset-sm-10 { margin-left: 83.333333% } .offset-sm-11 { margin-left: 91.666667% } } /*btn*/ .btn { position: relative; display: inline-block; border: 1px solid #d9d9d9; padding:0 .8rem; font-size:.7rem; line-height: 1.5rem; border-radius:.2rem; color: #595959; background: #fff; user-select: none; } .btn [class*=ui-icon-] { margin-right:.25rem; font-size:.7rem; } .btn:hover { color: #ff6f06; border-color: #ff6f06; } .btn-red { background: #ff6f06; border-color: #ff6f06; color: #fff; } .btn-red:hover { background: #c9221a; border-color: #c9221a; color: #fff; } .btn-car { background: #F37B1D; border-color: #F37B1D; color: #fff; } .btn-car:hover { background: #F3710A; border-color: #F3710A; color: #fff; } .btn-blue { background: #ff6f06; border-color: #ff6f06; color: #fff; } .btn-blue:hover { background: #c9221a; border-color: #c9221a; color: #fff; } .btn-green { background: #19BE6B; border-color: #19BE6B; color: #fff; } .btn-green:hover { background: #47CB89; border-color: #47CB89; color: #fff; } .btn-info { background: #2DB7F5; border-color: #2DB7F5; color: #fff; } .btn-info:hover { background: #57C5F7; border-color: #57C5F7; color: #fff; } .btn-lt { font-size:.6rem; line-height: 1rem; padding:0 .2rem; } .btn-sm { font-size:.6rem; line-height: 1.25rem; padding:.1rem .5rem; } .btn-big { font-size:.8rem; line-height: 2.25rem; padding: 0 1.2rem; } .btn-lg { font-size: 1rem; line-height: 2.75rem; padding: 0 2rem; } .btn-outline-red { background: #fff; color: #ED4014; } .btn-outline-yellow { background: #fff; color: #F37B1D; } .btn-outline-blue { background: #fff; color: #1890FF; } .btn-outline-green { background: #fff; color: #19BE6B; } .btn-outline-info { background: #fff; color: #2DB7F5; } .btn-block { display: block; width: 100%; text-align: center; } a.btn-red, a.btn-car, a.btn-blue, a.btn-green, a.btn-info { color: #fff; } a:hover.btn-red, a:hover.btn-car, a:hover.btn-blue, a:hover.btn-green, a:hover.btn-info { color: #fff; } a.btn-outline-red { color: #ED4014; } a.btn-outline-yellow { color: #F37B1D; } a.btn-outline-blue { color: #1890FF; } a.btn-outline-green { color: #19BE6B; } a.btn-outline-info { color: #2DB7F5; } /*btn-group*/ .btn-group { margin-left:.05rem; font-size: 0; } .btn-group-item { border: 1px solid #d9d9d9; margin-left:-.05rem; display: inline-block; cursor: pointer; padding:0 .8rem; line-height: 1.75rem; font-size:.7rem; color: #595959; background: #fff; text-align: center; } .btn-group-item:first-child { border-radius:.2rem 0 0 .2rem; } .btn-group-item:last-child { border-radius:0 .2rem .2rem 0; } .btn-group-item:hover { color: #333; border-color: #40a9ff; position: relative; z-index: 2; } .btn-group-item.active { color: #40a9ff; border-color: #40a9ff; position: relative; z-index: 2; } .btn-group-item:before { margin-right:.25rem; color: #999; font-size:.9rem; vertical-align: middle; } .btn-group-full { display: flex; } .btn-group-full .btn-group-item { flex: 1; padding: 0; } .btn-group-red .active, .btn-group-red .active:hover, .btn-group-red a.active, .btn-group-red a:hover.active { color: #ED4014; border-color: #ED4014; } .btn-group-red .btn-group-item:hover { border-color: #ED4014; } .btn-group-yellow .active, .btn-group-yellow .active:hover, .btn-group-yellow a.active, .btn-group-yellow a:hover.active { color: #F37B1D; border-color: #F37B1D; } .btn-group-yellow .btn-group-item:hover { border-color: #F37B1D; } .btn-group-blue .active, .btn-group-blue .active:hover, .btn-group-blue a.active, .btn-group-blue a:hover.active { color: #1890FF; border-color: #1890FF; } .btn-group-blue .btn-group-item:hover { border-color: #1890FF; } .btn-group-green .active, .btn-group-green .active:hover, .btn-group-green a.active, .btn-group-green a:hover.active { color: #47CB89; border-color: #47CB89; } .btn-group-green .btn-group-item:hover { border-color: #47CB89; } .btn-group-info .active, .btn-group-info .active:hover, .btn-group-info a.active, .btn-group-info a:hover.active { color: #57C5F7; border-color: #57C5F7; } .btn-group-info .btn-group-item:hover { border-color: #57C5F7; } .btn-group-red.btn-group-bg .active, .btn-group-red.btn-group-bg a.active { color: #fff; background: #ED4014; } .btn-group-yellow.btn-group-bg .active, .btn-group-yellow.btn-group-bg a.active { color: #fff; background: #F37B1D; } .btn-group-blue.btn-group-bg .active, .btn-group-blue.btn-group-bg a.active { color: #fff; background: #1890FF; } .btn-group-green.btn-group-bg .active, .btn-group-green.btn-group-bg a.active { color: #fff; background: #47CB89; } .btn-group-info.btn-group-bg .active, .btn-group-info.btn-group-bg a.active { color: #fff; background: #57C5F7; } .btn-group-sm .btn-group-item { font-size:.6rem; line-height: 1.25rem; padding:0 .2rem; } .btn-group-big .btn-group-item { font-size:.8rem; line-height: 2.25rem; padding: 0 1.2rem; } .btn-group-lg .btn-group-item { font-size: 1rem; line-height: 2.75rem; padding: 0 3rem; } /*Badge*/ .badge { min-width: 1rem; line-height: 1rem; min-height: 1rem; padding:0 .2rem; border-radius:.5rem; background: #eaeaea; display: inline-block; color: #595959; text-align: center; font-size:.6rem; vertical-align: middle; white-space: nowrap; box-shadow: 0 0 0 1px #fff; box-sizing: border-box; } .badge-dot { min-width:.3rem; height:.3rem; min-height:.3rem; padding: 0; background: #d9d9d9; border-radius: 100%; font-size:.5rem; } .badge-sm { min-width:.4rem; height:.4rem; min-height:.4rem; padding: 0; background: #d9d9d9; border-radius: 100%; font-size:.5rem; } .badge-red { background: #ED4014; color: #fff; } .badge-yellow { background: #F37B1D; color: #fff; } .badge-blue { background: #1890FF; color: #fff; } .badge-green { background: #19BE6B; color: #fff; } .badge-info { background: #2DB7F5; color: #fff; } .badge-warp { position: relative; display: inline-block; } .badge-warp .badge { position: absolute; top: -2px; right: -2px; } /*Bar*/ .bar { position: fixed; top: 0; width: 1.75rem; right: -1.75rem; height: 100%; background: #222; display: flex; align-items: center; justify-content: center; color: #fff; z-index: 40; } .bar ul { list-style: none; margin: 0; padding: 0; } .bar ul li { } .bar ul li a { line-height: 2.05rem; display: block; position: relative; } .bar ul li a i { font-size: 1.2rem; color: #fff; } .bar ul li a p { position: absolute; top:.2rem; top: 0; background: #fff; color: #333; padding:.4rem 1rem; line-height: 1.2rem; border: 1px solid #ddd; border-right: 0; display: none; border-radius:.3rem 0 0 .3rem; } .bar ul li a p:after { display: block; content: ""; background: #fff; width:.4rem; height:.4rem; position: absolute; top:.75rem; right:-.2rem; transform: rotate(45deg) } .bar ul li a:hover p { left: -5.15rem; display: block; } .bar ul:last-child { position: absolute; bottom:.25rem; right:.25rem; } .bar-red { background: #ED4014; } .bar-yellow { background: #F37B1D; } .bar-blue { background: #1890FF; } .bar-green { background: #19BE6B; } .bar-info { background: #2DB7F5; } /*web-crumb*/ .web-crumb { } .web-crumb ul { list-style: none; color: #999; } .web-crumb ul li { display: inline-block; font-size:.7rem; color: #999; } .web-crumb ul a{ color: #999; } .web-crumb ul li + li:before { padding:0 .4rem; content: "/\00a0"; color: #999; font-size:.6rem; font-family: 瀹嬩綋; } .web-mbx ul li + li:before { content: ">>"; } .web-crumb-2 ul li + li:before { content: ">"; } .web-crumb ul li a { font-size:.7rem; } .web-crumb ul li a[class*="icon"]:before { color: #999; font-size:.8rem; padding-right:.25rem; } /*Carousel*/ .carousel { position: relative; } .carousel-inner { position: relative; width: 100%; overflow: hidden; } .carousel-inner::after { display: block; clear: both; content: ""; } .carousel-item { position: relative; display: none; float: left; width: 100%; margin-right: -100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: -webkit-transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out; } .carousel-item img { width: 100%; height: auto; } .carousel-item.active, .carousel-item-next, .carousel-item-prev { display: block; } .carousel-item-next:not(.carousel-item-left), .active.carousel-item-right { -webkit-transform: translateX(100%); transform: translateX(100%); } .carousel-item-prev:not(.carousel-item-right), .active.carousel-item-left { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .carousel-prev, .carousel-next { position: absolute; top: 0; bottom: 0; z-index: 1; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; width: 15%; color: #fff; text-align: center; opacity: 0.5; transition: opacity 0.15s ease; } .carousel-prev:hover, .carousel-prev:focus, .carousel-next:hover, .carousel-next:focus { color: #fff; text-decoration: none; outline: 0; opacity: 0.9; } .carousel-prev { left: 0; } .carousel-next { right: 0; } .carousel-prev-icon, .carousel-next-icon { display: inline-block; width: 1rem; height: 1rem; background: no-repeat 50% / 100% 100%; } .carousel-prev-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"); } .carousel-next-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"); } .carousel-page { position: absolute; right: 0; bottom: 0; left: 0; z-index: 15; display: flex; justify-content: center; list-style: none; } .carousel-page li { box-sizing: content-box; flex: 0 1 auto; width: 2.5rem; height:.2rem; margin-right:.2rem; margin-left:.15rem; text-indent: -999px; cursor: pointer; background-color: #fff; background-clip: padding-box; border-top:.5rem solid transparent; border-bottom:.5rem solid transparent; opacity: .5; transition: opacity 0.6s ease; } .carousel-page .active { opacity: 1; } .carousel-control { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; display: flex; background: rgba(0,0,0,.4); } .carousel-control .carousel-title { flex: 1; display: flex; color: #fff; line-height: 2rem; padding:0 .5rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .carousel-control .carousel-page { justify-content: flex-end; align-items: center; position: static; margin-right:.5rem; } .carousel-control .carousel-page li { width:.5rem; height:.5rem; border-radius: 50%; } .carousel-pagenum { position: absolute; right:.25rem; bottom:.25rem; z-index: 15; background: rgba(0,0,0,.3); color: #fff; padding:.15rem .5rem; border-radius: 1rem; font-size:.5rem; } /*Card*/ .card { border: 1px solid #e5e5e5; background: #fff; border-radius:.1rem; } .card-header { background: #fff; padding:.75rem; border-bottom: 1px solid #F2F2F2; line-height:.9rem; display: flex; align-items: center; } .card-header h5 { font-size:.8rem; font-weight: 500; margin: 0; border-left:.1rem solid #1890FF; padding-left:.75rem; flex: 1; } .card-header h4 { font-size:.8rem; font-weight: 500; margin: 0; flex: 1; } .card-header .card-header-more { align-items: center; justify-content: flex-end; } .card-image img { width: 100%; height: auto; } .card-image svg { width: 100%; text-anchor: middle; } .card-body { padding:.75rem; } .card-body.np { padding-top: 0; } .card-body.row { margin-top:-.75rem; } .card-body .card-title { font-size:.75rem; font-weight: 600; } .card-body .card-text { word-break: break-all; color: #999; line-height: normal; } .card-body .card-text ul { list-style: none; } .card-body .list { margin-top:-.5rem; } .card-footer { background: #fff; padding:.6rem .9rem; border-top: 1px solid #F2F2F2; font-size:.7rem; border-radius:.2rem; } /*collapse*/ .collapse { margin-top:.1rem; } .collapse .card { border-radius: 0; margin-top:-.1rem; } .collapse .card .card-header { cursor: pointer; } .collapse .card .card-header h5 { font-size:.75rem; color: #444; border-left: 0; padding-left: 0; } .collapse .card .card-header .ui-icon-right, .collapse .collapse-menu .ui-icon-right { transition: all 0.4s ease; font-size:.7rem; color: #999; } .collapse .card .card-header.active .ui-icon-right, .collapse .collapse-menu.active .ui-icon-right { transform: rotate(90deg); } .collapse .card:first-child { border-radius:.1rem .1rem 0 0; } .collapse .card:last-child { border-radius:0 0 .1rem .1rem; border-bottom: 1; } /*Dropmenu*/ .dropdown { display: none; background: #fff; border: 1px solid #d9d9d9; border-radius:.2rem; padding:.5rem 0; box-shadow:1px .1rem .5rem rgba(0,0,0,0.1); line-height: 1.5; word-break: break-all; z-index: 100; } .dropdown img { max-width: 100%; } .dropdown:after { content: " "; position: absolute; width:.5rem; height:.5rem; border-left: 0; border-bottom: 0; background: #fff; border: 1px solid #d9d9d9; border-bottom: 0; border-right: 0; } .dropdown-left:after { right:-.3rem; top: 50%; transform: translateY(-50%) rotate(-225deg); } .dropdown-top:after { left: 50%; top: 100%; transform: translateX(-50%) translateY(-50%) rotate(-140deg); } .dropdown-right:after { left:-.3rem; top: 50%; transform: translateY(-50%) rotate(-45deg); } .dropdown-bottom:after { left: 50%; top: 0; transform: translateX(-50%) translateY(-50%) rotate(45deg); } .dropdown-bottom-left:after { left:.5rem; top: 0; transform: translateY(-50%) rotate(45deg); } .dropdown-top-left:after { left:.5rem; top: 100%; transform: translateY(-50%) rotate(-140deg); } .dropdown-right-top:after { left:-.3rem; top:.75rem; transform: translateY(-50%) rotate(-45deg); } .dropdown-line { height: 0; margin: 0.5rem 0; overflow: hidden; border-top: 1px solid #e9ecef; } .dropdown-item { display: block; width: 100%; padding: 0.25rem 1rem; clear: both; font-weight: 400; color: #212529; text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; } .dropdown-item.active { background: #1890FF; } a.dropdown-item.active { color: #fff; } /*Dialog*/ .dialog-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.15); z-index: 198; display: block; overflow-x: hidden; overflow-y: auto; display: none; } .dialog { z-index: 199; position: fixed; border: 1px solid #eaeaea; border-radius:.2rem; background: #fff; min-width: 15rem; max-width: 96%; margin: 0 auto; box-shadow: 0 1px 1rem rgba(0,0,0,0.3); transition: transform .2s cubic-bezier(.16, .68, .43, .99); } .dialog-header { padding:.8rem; border-bottom: 1px solid #f3f3f3; display: flex; } .dialog-header .dialog-title { flex: 1; font-size:.75rem; font-weight: 600; } .dialog-header .dialog-close { justify-content: flex-end; align-items: center; font-size: 1rem; cursor: pointer; font-weight: 700; line-height: 1; color: #999; } .dialog-header .dialog-close:hover { color: #000; } .dialog-body { padding: 1rem; max-height: 25rem; line-height: 1.2rem; overflow-y: auto; word-break: break-all; } .dialog-body .form-ip { line-height: normal; } .dialog-body-iframe { padding: 0; overflow: hidden; max-height: 100%; } .dialog-body-iframe iframe { width: 100%; height: 100%; border: 0; margin: -1px; } .dialog-body-address { padding: 0; height: 20rem; overflow: hidden; } .dialog-footer { padding:.5rem 1rem; text-align: right; font-size: 1rem; border-top: 0 solid #f3f3f3; } .dialog-footer-mobile { display: flex; border-top: 1px solid #f3f3f3; } .dialog-footer-mobile button { width: 100%; border: 0; background: #fff; padding:.6rem 0; flex: 1; color: #666; } .dialog-footer-mobile button:last-child { border-left: 1px solid #f3f3f3; color: #1890FF; } .dialog-in { transition: transform 0.3s ease-out; transform: translate(0, 2.5rem); } .dialog-out { transition: transform 0.3s ease-out; transform: translate(0); } .dialog-mobile { border-radius:.4rem; min-width: 12.5rem; border: 0; } .dialog-mobile .dialog-header { border-radius:.4rem .4rem 0 0; padding:.6rem .8rem; } .dialog-mobile .dialog-body { padding:1rem .8rem; } .dialog-mobile .dialog-body-iframe { padding: 0; overflow: hidden; max-height: 100%; } .dialog-mobile .dialog-footer-mobile { border-radius:0 0 .4rem .4rem; } .dialog-mobile .dialog-footer-mobile button:first-child { border-radius:0 0 0 .4rem; } .dialog-mobile .dialog-footer-mobile button:last-child { border-radius:0 0 .4rem 0; } /*Endtime*/ .endtime { color: #999; } .endtime i { color: #f30; font-style: normal; padding:0 .25rem; } .endtime i:first-child { padding-left: 0; } /*filter*/ .filter { background: #fff; padding:.5rem 1rem 1rem 0; } .filter .sx-fl { text-align: right; padding-top:.9rem; color: #999; } .filter .sx-fr { padding-left:.5rem; } .filter .sx-fr a { padding:.4rem .75rem; border-radius:.1rem; margin:.5rem .5rem 0 0; display: inline-block; color: #999; } .filter a:hover { border-color: #ff6f06; color: #ff6f06; cursor: pointer; } .filter a.active { color: #ff6f06; } .filter-red a:hover, .filter-red a.active { border-color: #ED4014; color: #ED4014; } .filter-yellow a:hover, .filter-yellow a.active { border-color: #F37B1D; color: #F37B1D; } .filter-blue a:hover, .filter-blue a.active { border-color: #1890FF; color: #1890FF; } .filter-green a:hover, .filter-green a.active { border-color: #19BE6B; color: #19BE6B; } .filter-info a:hover, .filter-info a.active { border-color: #2DB7F5; color: #2DB7F5; } .filter-black a:hover, .filter-black a.active { border-color: #666; color: #666; } .filter .sx-fr-pic {/*margin-right:-1px;*/ } .filter .sx-fr-pic a {/*margin-right:0;margin-left:-1px;border-radius:0;*/ } .filter .sx-fr-pic a:hover { position: relative; } .filter .sx-fr-pic a.active { position: relative; } .filter .sx-fr-pic a:first-child { margin-right:.75rem; } /*Fixed*/ .fixed-top { position: fixed; top: 0; z-index: 30; right: 0; left: 0; } .fixed-bottom { position: fixed; bottom: 0; z-index: 30; right: 0; left: 0; } .fixed-warp { z-index: 100; } /*Form*/ .form-group { margin-bottom:.5rem; padding-bottom:.25rem; position: relative; } .form-group+.hide { display: none; } .form-icon { position: absolute; top: 45%; left:.75rem; z-index: 99; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size:.9rem; vertical-align: middle; } .form-icon+.form-ip { padding-left: 2rem; } .form-group .form-ip { } .form-group > label { margin-bottom:.5rem; } .form-ip { display: block; width: 100%; padding:.6rem .8rem; font-size:.7rem; font-weight: 400; color: #495057; background: #fff; background-clip: padding-box; border: 1px solid #ced4da; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; text-align: left; } select.form-ip, textarea.form-ip { height: auto; } textarea.form-ip { min-height: 5rem; } .form-ip::-ms-expand { background-color:transparent; border:0; } .form-ip:focus { color: #495057; background: #fff; border-color: #80bdff; outline: 0; box-shadow: 0 0 0 0.1rem rgba(0,123,255,.25); } .form-ip::-webkit-input-placeholder { color:#999; } .form-ip::-moz-placeholder { color:#999; } .form-ip:-ms-input-placeholder { color:#999; } .form-ip::-ms-input-placeholder { color:#999; } .form-ip::placeholder { color:#999; } .form-ip:disabled { background: #fafafa; opacity: 1; cursor: not-allowed; } .form-ip[readonly] { background: #fafafa; opacity: 1; } .form-ip-check { margin-bottom:.15rem; margin-right:.25rem; vertical-align: middle; } .form-limit-text { position: absolute; right:.5rem; bottom:.5rem; color: #999; background: rgba(255,255,255,.5); } .form-limit-text span { color: #f30; } .col-form-label { padding-top:.5rem; color: #666; padding-right:.5rem; } .input-group { display: flex; } .input-group .before { justify-content: center; align-items: center; display: flex; padding:.3rem .6rem; font-size:.7rem; font-weight: 400; color: #495057; border: 1px solid #ced4da; border-right: 0; background: #F6F7FF; border-radius: 0.2rem 0 0 0.2rem; } .input-group .after { justify-content: center; align-items: center; display: flex; padding:.3rem 0.35rem; font-size:.7rem; font-weight: 400; color: #495057; border: 1px solid #ced4da; border-left: 0; background: #F6F7FF; white-space: nowrap; } .input-group a.after { font-size:.7rem; padding:.3rem .6rem; cursor: pointer; font-family: microsoft yahei; } .input-group a.after:before { margin-right:.25rem; font-size:.9rem; color: #999; font-family: "iconfont"; } .input-group a:hover.after, .input-group a:hover.after:before { color: #f30; } .input-group button.after { padding:.3rem .8rem; } .input-group .code { min-height: 2.2rem; justify-content: center; align-items: center; display: flex; padding:0 .6rem; border: 1px solid #ced4da; border-left: 0; background: #fff; border-radius: 0; cursor: pointer; border-radius:0 .2rem .2rem 0; } .input-group .code img { height: 2.2rem; border-radius:0 .2rem .2rem 0; } .input-group .form-ip { flex: 1; } .input-group-check { padding-top:.35rem; } .input-group-check label { margin-right:.5rem; } .input-group .radius-none { border-radius: 0; } .input-group .radius-left-none { border-radius:0 .2rem .2rem 0; } .input-group .radius-right-none { border-radius:.2rem 0 0 .2rem; } .input-group .radius-none { border-radius: 0; } .check-error { color: #ED4014; } .check-error .form-ip { border-color: #ED4014; } .check-error .form-ip:focus { box-shadow: 0 0 0 0.1rem rgba(255, 51, 0, 0.25); } .check-error .error-msg { display: inline-block; padding: .5833em .833em; margin-top:.5rem; border-radius:.25rem; text-transform: none; border: 1 solid #DB2828; position: relative; background: #fff; border: 1px solid #db2828; color: #db2828; } .check-error .error-msg:before { background: #fff; border-width: 1px 0 0 1px; border-style: solid; border-left-color: #DB2828; border-top-color: #DB2828; position: absolute; content: ''; -webkit-transform: rotate(45deg); transform: rotate(45deg); z-index: 2; width: .6666em; height: .6666em; transform: translateX(-50%) translateY(-50%) rotate(45deg); top: 0; left: 50%; } .check-error .form-icon { top: 24.5%; } .check-error .form-limit-text { bottom: 37%; } .form-ip.w-auto { width: auto; display: inline-block; } .form-inline { } .form-inline .before { border-radius: 0; } .form-inline .before:first-child { border-radius:.2rem 0 0 .2rem; } .form-inline .form-ip { border-radius: 0; border-right: 0; } .form-inline .after { border-left: 1px solid #ced4da; } /*CheckBox*/ .checkbox { display: inline-block; cursor: pointer; margin-right:.5rem; } .checkbox input[type="checkbox"] { appearance: none; -webkit-appearance: none; outline: none; display: none } .checkbox input[type="checkbox"] + i { vdisplay: inline-block; vertical-align: baseline; margin-right:.25rem; font-style: normal; } .checkbox input[type="checkbox"] + i:after { width:.8rem; height:.8rem; display: inline-block; border: 1px solid #1890FF; border-radius:.1rem; display: inline-block; font-size:.6rem; line-height:.8rem; content: '銆€'; text-align: center; } .checkbox input[type="checkbox"]:checked + i:after { content: '\e830'; font-family: iconfont; background: #1890FF; color: #fff; border-color: #1890FF; } .checkbox input[type="checkbox"]:disabled + i:after { background: #f5f5f5; color: #999; border-color: #ddd; } .checkbox input[type="checkbox"]:checked:disabled + i:after { content: '\e830'; font-family: iconfont; background: #f5f5f5; color: #999; border-color: #ddd; } .checkbox input[type="checkbox"]:disabled + i { cursor: not-allowed; } .checkbox-red input[type="checkbox"] + i:after { border-color: #ED4014; } .checkbox-red input[type="checkbox"]:checked + i:after { background: #ED4014; border-color: #ED4014; } .checkbox-yellow input[type="checkbox"] + i:after { border-color: #F37B1D; } .checkbox-yellow input[type="checkbox"]:checked + i:after { background: #F37B1D; border-color: #F37B1D; } .checkbox-blue input[type="checkbox"] + i:after { border-color: #1890FF; } .checkbox-blue input[type="checkbox"]:checked + i:after { background: #1890FF; border-color: #1890FF; } .checkbox-green input[type="checkbox"] + i:after { border-color: #19BE6B; } .checkbox-green input[type="checkbox"]:checked + i:after { background: #19BE6B; border-color: #19BE6B; } .checkbox-info input[type="checkbox"] + i:after { border-color: #2DB7F5; } .checkbox-info input[type="checkbox"]:checked + i:after { background: #2DB7F5; border-color: #2DB7F5; } .checkbox:last-child { margin-right: 0; } /*Radio*/ .radio { display: inline-block; cursor: pointer; margin-right:.5rem; } .radio input[type="radio"] { appearance: none; -webkit-appearance: none; outline: none; display: none } .radio input[type="radio"] + i { display: inline-block; vertical-align: middle; margin-right:.25rem; border: 1px solid #ddd; width:.8rem; height:.8rem; border-radius: 50%; position: relative; transition: all .3s ease 0s; } .radio input[type="radio"] + i:after { width:.4rem; height:.4rem; display: inline-block; border-radius: 50%; display: inline-block; font-size:.6rem; position: absolute; left:.15rem; top:.15rem; } .radio input[type="radio"]:checked + i { border-color: #1890FF; box-shadow:0 0 0 .1rem rgba(24,144,255,0.1); } .radio input[type="radio"]:checked + i:after { content: ''; background: #1890FF; } .radio input[type="radio"]:disabled + i { border-color: #ddd; background: #F5F5F5; cursor: not-allowed; } .radio input[type="radio"]:checked:disabled + i { border: 1px solid #ddd; box-shadow: none; } .radio input[type="radio"]:checked:disabled + i:after { background: #C4C4C4; } .radio-red input[type="radio"]:checked + i { border-color: #ED4014; } .radio-red input[type="radio"]:checked + i:after { background: #ED4014; } .radio-yellow input[type="radio"]:checked + i { border-color: #F37B1D; } .radio-yellow input[type="radio"]:checked + i:after { background: #F37B1D; } .radio-blue input[type="radio"]:checked + i { border-color: #1890FF; } .radio-blue input[type="radio"]:checked + i:after { background: #1890FF; } .radio-green input[type="radio"]:checked + i { border-color: #19BE6B; } .radio-green input[type="radio"]:checked + i:after { background: #19BE6B; } .radio-info input[type="radio"]:checked + i { border-color: #2DB7F5; } .radio-info input[type="radio"]:checked + i:after { background: #2DB7F5; } .radio:last-child { margin-right: 0; } /*Switch*/ .switch { display: inline-block; text-align: left; } .switch > input[type="checkbox"] { display: none; } .switch > input[type="checkbox"]:disabled ~ .switch-checkbox { background: #EBEBEB; cursor: not-allowed } .switch > input[type="checkbox"]:checked:disabled ~ .switch-checkbox { background: #EBEBEB; } .switch > input[type="checkbox"]:checked ~ .switch-checkbox { background: #1890FF; } .switch > input[type="checkbox"]:checked ~ .switch-checkbox::before { left: 1.45rem; } .switch > input[type="checkbox"]:checked ~ .switch-checkbox.switch-text::before { text-indent:-.9rem; content: '寮€'; font-size:.6rem; color: #fff; } .switch > input[type="checkbox"]:checked ~ .switch-checkbox.switch-icon::before { content: '\e830'; text-indent: -1.05rem; font-family: iconfont; color: #fff; font-size:.7rem; line-height: 1.1rem; } .switch > input[type="checkbox"]:checked ~ .switch-checkbox.switch-en::before { text-indent: -1.1rem; content: 'On'; font-size:.6rem; color: #fff; } .switch .switch-checkbox.switch-text::before { content: '鍏�'; text-indent: 1.2rem; font-size:.6rem; color: #fff; } .switch .switch-checkbox.switch-en::before { content: 'Off'; text-indent: 1.1rem; font-size:.6rem; color: #fff; } .switch .switch-checkbox.switch-icon::before { content: '\e831'; text-indent: 1.2rem; font-family: iconfont; color: #fff; font-size:.7rem; line-height: 1.1rem; } .switch .switch-checkbox { width: 2.5rem; height: 1.1rem; border-radius: 50rem; background: #ccc; transition: background ease 0.5s; cursor: pointer; position: relative; display: inline-block; overflow: hidden; user-select: none; } .switch .switch-checkbox::before { content: ''; font-weight: 500; width: 1rem; height: 1rem; line-height:.9rem; position: absolute; border-radius: 50rem; top: 1px; left:.1rem; background: #fff; olor: #fff; font-size: 0.75rem; transition: left ease 0.3s; } .switch-red > input[type="checkbox"]:checked ~ .switch-checkbox { background: #ED4014; } .switch-yellow > input[type="checkbox"]:checked ~ .switch-checkbox { background: #F37B1D; } .switch-blue > input[type="checkbox"]:checked ~ .switch-checkbox { background: #1890FF; } .switch-green > input[type="checkbox"]:checked ~ .switch-checkbox { background: #19BE6B; } .switch-info > input[type="checkbox"]:checked ~ .switch-checkbox { background: #2DB7F5; } /*Inputnumber*/ .inputnumber-wrap { display: inline-block; overflow: hidden; position: relative; vertical-align: middle; border: 1px solid #dadada; border-radius:.1rem; background: #fff; } .inputnumber-wrap:hover { border-color: #ff9380; } .inputnumber-text { padding:.25rem ; min-width: 2.5rem; border-radius:.1rem 0 0 .1rem; text-align: center; } .inputnumber:focus { box-shadow: none; border: 0; } .inputnumber-min, .inputnumber-max { display: inline-block; border: 1px solid #dadada; border-top: 0; border-bottom: 0; padding:.25rem .5rem .15rem .5rem; cursor: pointer; margin-right: -1px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; color: #555; } .inputnumber-min{ border-left: 0; } .inputnumber-min:hover, .inputnumber-max:hover { color: #ff6f06; border-color: #ff9380; z-index: 1; } .inputnumber-min i, .inputnumber-max i { font-size:.7rem; } .inputnumber-min.inputnumber-disabled, .inputnumber-max.inputnumber-disabled { cursor: not-allowed; color: #999; } .inputnumber-min.inputnumber-disabled:hover, .inputnumber-max.inputnumber-disabled:hover { border-color: #dadada; } .inputnumber-wrap.disabled { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; background: #fafafa; cursor: not-allowed; } .inputnumber-wrap.disabled:hover { border-color: #dadada; } .inputnumber-wrap.disabled .inputnumber-min, .inputnumber-wrap.disabled .inputnumber-max, .inputnumber-wrap.disabled .inputnumber-text { cursor: not-allowed; color: #999; } .inputnumber-wrap.disabled .inputnumber-min:hover, .inputnumber-wrap.disabled .inputnumber-max:hover { border-color: #dadada; color: #999; } .inputnumber-center .inputnumber-min { border-left: 0; border-right-width: 1px; } /*.Line*/ .line { text-align: center; width: 100%; position: relative; z-index: 0; margin:.5rem 0; min-height:.2rem; } .line:before { content: ""; display: table; position: absolute; top: 50%; width: 100%; border-top: 1px solid #e8eaec; transform: translateY(50%); z-index: -1; } .line span { background: #fff; display: inline-block; padding:0 .5rem; z-index: 1; white-space: nowrap; } .line-left { text-align: left; } .line-left span { margin-left: 1.5%; } .line-right { text-align: right; } .line-right span { margin-right: 1.5%; } .line-red:before { border-top-color: #ED4014; } .line-red span { color: #ED4014; } .line-yellow:before { border-top-color: #F37B1D; } .line-yellow span { color: #F37B1D; } .line-blue:before { border-top-color: #1890FF; } .line-blue span { color: #1890FF; } .line-green:before { border-top-color: #19BE6B; } .line-green span { color: #19BE6B; } .line-info:before { border-top-color: #2DB7F5; } .line-info span { color: #2DB7F5; } /*List*/ .list { list-style: none; } .list li { border-bottom: 1px solid #e4eaec; padding:.5rem; display: flex; justify-content: space-between; align-items: center; } .list li a { color: #333; flex: 1; } .list li a:hover { color: #f30; } .list li a .ui-icon-font { margin:0 .5rem 0 .25rem; color: #999; } .list li .arrow { padding:0 .25rem 0 .45rem; } .list li .arrow:after { content: "\e82a"; font-family: "iconfont"; color: #ccc; font-size: 1rem; } .list-border { border: 1px solid #e4eaec; border-bottom: 0; } .list-striped li:nth-child(even) { background: #F9FBFD; } .list-hover li:hover { background: #F9FBFD; } .list-border .arrow { padding:0 .45rem; } .list .active { background: #F5FAFE; } .list_border_none li { border-bottom: 0; padding: 0; } /*LightBox*/ .lightbox-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.4); z-index: 98; display: block; display: none; overflow: hidden; } .lightbox-warp { background: #fff; padding:.25rem; border-radius:.2rem; z-index: 99; position: fixed; left: 45%; top: 45%; user-select: none; } .lightbox-left { position: absolute; left: 0; top: 0; width: 30%; height: 100%; cursor: pointer; } .lightbox-left:after { content: "\e784"; font-family: iconfont; font-size: 2.1rem; color: #fff; display: flex; justify-content: flex-start; align-items: center; height: 100%; margin-left: 10%; opacity: 0; } .lightbox-right { position: absolute; right: 0; top: 0; width: 30%; height: 100%; cursor: pointer; } .lightbox-right:after { content: "\e78c"; font-family: iconfont; font-size: 2.1rem; color: #fff; display: flex; justify-content: flex-end; align-items: center; height: 100%; margin-right: 10%; opacity: 0; } .lightbox-warp:hover .lightbox-left:after, .lightbox-warp:hover .lightbox-right:after { opacity: .8; } .lightbox-image { position: relative; } .lightbox-video { background: #000; } .lightbox-image-url { width: 0; } .lightbox-bottom { position: absolute; width: 0; height: 0; bottom: 0; left: 0; background: rgba(0,0,0,.6); color: #fff; padding:0 .75rem; overflow: hidden; transition: all .3s ease 0s; } .lightbox-bottom * { line-height: 2rem; } .lightbox-bottom i { float: right; font-style: normal; float: right; padding-left:.75rem; color: #999; } .lightbox-close { position: absolute; right: -1.1rem; top: -1.1rem; font-size: 1rem; cursor: pointer; color: #333; font-family: verdana; background: #999; width: 1.5rem; height: 1.5rem; line-height: 1.5rem; border-radius: 50%; background: #fff; text-align: center; z-index: 20; } /*Modal*/ .modal-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.3); z-index: 98; display: block; overflow-x: hidden; overflow-y: auto; display: none; } .modal { display: none; z-index: 99; position: fixed; border: 1px solid #eaeaea; border-radius:.2rem; background: #fff; width: 25rem; margin: 0 auto; box-shadow:0 1px .15rem rgba(0,0,0,0.3); transition: transform .2s cubic-bezier(.16, .68, .43, .99); z-index: 999; } .modal-header { padding: 1rem; border-bottom: 1px solid #f3f3f3; display: flex; } .modal-header .modal-title { flex: 1; font-size:.75rem; font-weight: 700; } .modal-header .modal-close { justify-content: flex-end; align-items: center; font-size: 1rem; cursor: pointer; font-weight: 700; line-height: 1; color: #999; } .modal-header .modal-close:hover { color: #000; } .modal-body { padding: 1rem; max-height: 25rem; line-height: 1.2rem; overflow-y: auto; } .modal-body .form-ip { line-height: normal; } .modal-footer { padding:.5rem 1rem; border-top: 1px solid #f3f3f3; text-align: right; font-size: 1rem; } .modal-sm { width: 18rem; } .modal-sm .modal-body { max-height: 11rem; } .modal-bg { width: 40rem; } .modal-lg { width: 57rem; } .modal-in { transition: transform 0.3s ease-out; transform: translate(0, 2.5rem); } .modal-out { transition: transform 0.3s ease-out; transform: translate(0); } /*Media*/ .media-list { } .media-list .media { margin-bottom: 1rem; padding-bottom:.75rem; } .media-list .media:last-child { margin-bottom: 0; } .media { display: flex; border-bottom: 1px solid #eaeaea; padding-bottom:.25rem; } .media-img { } .media-img img, .media-img svg { border: 1px solid #eaeaea; padding:.15rem; text-anchor: middle; } .media-body { flex: 1; position: relative; } .media-header { font-size:.8rem; margin:0 0 .25rem 0; } .media-text { font-size:.7rem; line-height: 1.2rem; color: #888; word-break: break-all; } .media-other { font-size:.6rem; color: #999; margin-top:.25rem; vertical-align: middle; } .media-link { padding-left:.75rem; } .media-arrow { padding-left:.75rem; } .media-arrow:after { content: ">"; font-family: 瀹嬩綋; color: #ccc; font-size: 1.5rem; } .media-center { display: flex; align-items: center; } .media-bottom { display: flex; align-items: flex-end; } .media-border .media { border-bottom: 0; padding-bottom: 0; } .media-border .media-body { border-bottom: 1px solid #eaeaea; padding-bottom:.75rem; } .media-border .media-link, .media-border .media-arrow { border-bottom: 1px solid #eaeaea; } .media-border-none .media { border-bottom: 0; } .media-border-none .media:last-child { margin-bottom: 0; padding-bottom: 0; } /*Menu*/ .menu { display: flex; border-bottom: 1px solid #eaeaea; justify-content: space-between; align-items: center; line-height: 2rem; } .menu .webmenu-mz { color: #333; border-bottom:.1rem solid #999; margin-bottom: -1px; font-size: 15px; } .menu .menu-more a { color: #666; } .menu .menu-more a:hover { color: #f30; } .menu-red .webmenu-mz { color: #ED4014; border-bottom-color: #ED4014; } .menu-yellow .webmenu-mz { color: #F37B1D; border-bottom-color: #F37B1D; } .webmenu-ls .webmenu-mz { color: #ff6f06; border-bottom-color: #ff6f06; } .menu-green .webmenu-mz { color: #19BE6B; border-bottom-color: #19BE6B; } .menu-info .webmenu-mz { color: #2DB7F5; border-bottom-color: #2DB7F5; } .menu-noborder { border: 0; } .menu-noborder .webmenu-mz { border: 0; } /*Nav*/ .nav { } .nav ul { list-style: none; padding: 0; margin: 0; font-size: 0; } .nav ul li { display: inline-block; list-style: none; padding: 0; margin: 0; position: relative; } .nav ul li a { display: block; padding:.5rem .6rem; text-align: center; font-size:.7rem; } .nav ul li a:hover { } .nav ul li.active a { } .nav ul li ul { position: absolute; min-width: 10rem; border: 1px solid #d9d9d9; background: #fff; opacity: 0; transition: all .3s ease 0s; visibility: hidden; transform:translate3d(0, .5rem, 0); box-shadow:0 .15rem .5rem 0 rgba(51,51,51,0.1); z-index: 20; } .nav ul li ul li { display: block; z-index: 1; } .nav ul li ul li a { text-align: left; color: #333; white-space: nowrap; } .nav ul li ul li a:hover { background: #1890FF; color: #fff; } .nav ul li:hover ul { opacity: 1; transform: translate3d(0, 0, 0); visibility: visible; } .nav-full ul { display: flex; } .nav-full ul li { flex: 1; } .nav-full ul li ul, .nav-full ul li ul li { display: block; width: 100%; } .nav-bottom ul li ul { bottom: 2.05rem; } .nav-bottom ul li ul:before { width: 0; height: 0; } .nav-bg-red { background: #ED4014; border: 1px solid #ED4014; } .nav-bg-red li a { color: #fff; } .nav-bg-red li a:hover { background: #fff; color: #333; } .nav-bg-red ul li.active a { background: #fff; color: #333; } .nav-bg-yellow { background: #F37B1D; border: 1px solid #F37B1D; } .nav-bg-yellow li a { color: #fff; } .nav-bg-yellow li a:hover { background: #fff; color: #333; } .nav-bg-yellow ul li.active a { background: #fff; color: #333; } .nav-bg-blue { background: #1890FF; border: 1px solid #1890FF; } .nav-bg-blue li a { color: #fff; } .nav-bg-blue li a:hover { background: #fff; color: #333; } .nav-bg-blue ul li.active a { background: #fff; color: #333; } .nav-bg-green { background: #19BE6B; border: 1px solid #19BE6B; } .nav-bg-green li a { color: #fff; } .nav-bg-green li a:hover { background: #fff; color: #333; } .nav-bg-green ul li.active a { background: #fff; color: #333; } .nav-bg-info { background: #2DB7F5; border: 1px solid #2DB7F5; } .nav-bg-info li a { color: #fff; } .nav-bg-info li a:hover { background: #fff; color: #333; } .nav-bg-info ul li.active a { background: #fff; color: #333; } .nav-bg-black { background: #000; border: 1px solid #000; } .nav-bg-black li a { color: #fff; } .nav-bg-black li a:hover { background: #fff; color: #333; } .nav-bg-black ul li.active a { background: #fff; color: #333; } /*Offside*/ .offside-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.3); z-index: 98; overflow-y: auto; display: none; } .offside { position: fixed; min-width: 10rem; z-index: 99; -webkit-overflow-scrolling: touch; background: #fff; transition: all .3s ease 0s; } .offside-left { left: -100%; top: 0; height: 100%; } .offside-right { right: -100%; top: 0; height: 100%; } .offside-top { top: -100%; width: 100%; min-height: 5rem; } .offside-bottom { bottom: -110%; width: 100%; min-height: 5rem; } .offside-in.offside-left, .offside-in.offside-right { transform: translate3d(0, 0, 0); } .offside-right-close { position: absolute; right:.5rem; top:-.5rem; font-size: 1.2rem; font-weight: 600; background: #fff; width: 1.4rem; height: 1.4rem; line-height: 1.3rem; padding: 0; text-align: center; border: 1px solid #ddd; color: #333; border-radius: 50%; display: none; z-index: 999; } .offside-in .offside-right-close { display: inline-block; } /*web_mpx*/ .web_mpx ul { list-style: none; display: flex; } .web_mpx ul li:last-child a { border-right: unset; } .web_mpx ul li a { border-right: 1px solid #e0e0e0; padding:.5rem 1rem; color: #666; display: block; } .web_mpx ul li a:hover { color: #ff6f06; } .web_mpx ul li a i { font-size:.6rem; margin-left:.25rem; } .web_mpx ul li a.active { color: #ff6f06; } .web_mpx-red ul li a:hover { color: #ED4014; } .web_mpx-red ul li.active a { background: #ED4014; border-right-color: #ED4014; color: #fff; } .web_mpx-yellow ul li a:hover { color: #F37B1D; } .web_mpx-yellow ul li.active a { background: #F37B1D; border-right-color: #F37B1D; color: #fff; } .web_mpx-blue ul li a:hover { color: #1890FF; } .web_mpx-blue ul li.active a { background: #1890FF; border-right-color: #1890FF; color: #fff; } .web_mpx-green ul li a:hover { color: #19BE6B; } .web_mpx-green ul li.active a { background: #19BE6B; border-right-color: #19BE6B; color: #fff; } .web_mpx-info ul li a:hover { color: #2DB7F5; } .web_mpx-info ul li.active a { background: #2DB7F5; border-right-color: #2DB7F5; color: #fff; } .web_mpx-black ul li a:hover { color: #666; } .web_mpx-black ul li.active a { background: #666; border-right-color: #666; color: #fff; } /*web_imglb*/ /* 3:2 锛� 66.6% 3:4 锛� 133.3% 16:9 锛� 56.2% 涓ゅ垪鍒楀锛�48.5% 涓夊垪鍒楀锛�31.8% 鍥涘垪鍒楀锛�23.5% 浜斿垪鍒楀锛�18.5% */ .web_imglb { height: auto; margin: 0; padding: 0; list-style-type: none; } .web_imglb:after { content: " "; clear: both; display: table; } .web_imglb-item { position: relative; z-index: 1; float: left; width: 228px; margin-left: 14px; margin-bottom: 14px; background: #fff; transition: box-shadow .5s linear,-webkit-box-shadow .5s linear; box-sizing: unset; } .web_imglb-item > a { display: block; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 20px 0; } .brick-item-m-2 { height: 300px; } .brick-item-s { height: 93px; padding-top: 50px; } .brick-item-s .figure-img { position: absolute; right: 20px; top: 32px; width: 80px; height: 80px; } .brick-item-s .figure-img img { width: 80px; height: 80px; } .brick-item-s .title { margin: -10px 110px 5px 30px; font-size: 14px; font-weight: 400; color: #333; } .brick-item-s .price { margin: 0 110px 0 30px; font-size: 12px; color: #ff6700; } .web_imglb-more a{ display: block; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 20px 0; } .brick-item-s .figure-more { position: absolute; right: 35px; top: 48px; width: 48px; height: 48px; color: #ff6700; } .brick-item-s .more { display: block; margin: 0 110px 0 30px; font-size: 18px; color: #333; } .web_imglb-item:hover { box-shadow: 0 1px 20px rgba(0,0,0,0.1); } .web_imglb-tp { position: relative; overflow: hidden; } .web_imglb-tp img { width: 100%; position: absolute; z-index: 1; } .web_imglb-tp .upload { width: 100%; height: 100%; position: absolute; display: flex; justify-content: center; align-items: center; font-size: 1.6rem; color: #ccc; cursor: pointer; background: #f9f9f9; } .web_imglb-tp .upload:hover { color: #333; } .web_imglb-tp em { position: absolute; right: -3.7rem; top:.5rem; z-index: 10; width: 10rem; line-height: 1.6rem; background: #2DB7F5; color: #fff; font-size:.65rem; text-align: center; font-style: normal; transform: rotate(45deg); } .web_imglb-tp em.bg-red { background: #ED4014; } .web_imglb-tp em.bg-yellow { background: #F37B1D; } .web_imglb-tp em.bg-blue { background: #1890FF; } .web_imglb-tp em.bg-green { background: #19BE6B; } .web_imglb-tp em.bg-info { background: #2DB7F5; } /* .web_imglb-home { padding:.5rem .75rem; } */ .web_pic-tit { margin: 0 10px 2px; font-size: 14px; font-weight: 400; color: #333; text-align: center; } .web_imglb-flex { display: flex; align-items: center; } .brick-item-m .desc { margin: 0 10px 10px; height: 18px; font-size: 12px; color: #b0b0b0; } .web_imglb-price { color: #333; flex: 1; font-size:.7rem; text-align: center; } .web_imglb-price .desc { margin: 0 10px 10px; height: 18px; font-size: 12px; color: #b0b0b0; } .web_imglb-price .price { margin: 0 10px 14px; text-align: center; color: #ED4014; } .web_imglb-price .price del { margin-left: .5em; color: #b0b0b0; } /* .web_imglb-price del, .web_imglb-price span { display: block; margin: 0 10px 10px; height: 18px; font-size: 12px; color: #b0b0b0; } */ .web_imglb-flex .action { } .web_imglb-flex .action a.btn { border-radius: 2.5rem; padding: 0 1rem; } .web_imglb-col-2 .web_imglb-item { width: 48.5%; } .web_imglb-col-3 .web_imglb-item { width: 31.8%; } .web_imglb-a .web_imglb-item { width: 228px; margin-right: 14px; margin-left: 0; transition: box-shadow .5s linear,-webkit-box-shadow .5s linear; } .web_imglb-a .web_imglb-item:nth-child(5n) { margin-right: 0; } .web_pic-1 .web_imglb-tp { width: 160px; height: 160px; margin: 0 auto 18px; } .web_imglb-3-2 .web_imglb-tp { padding-bottom: 66.6%; } .web_imglb-3-4 .web_imglb-tp { padding-bottom: 133.3%; } .web_imglb-16-9 .web_imglb-tp { padding-bottom: 56.2%; } .web_pic-2 .web_imglb-tp img { min-height: 100%; } .web_imglb-tp .upload-action { position: absolute; width: 100%; height: 100%; bottom: -100%; display: flex; justify-content: center; align-items: center; font-size:.75rem; z-index: 2; background: rgba(0,0,0,.4); transition: all .5s ease 0s; } .web_imglb-tp .upload-action a { font-size: 1rem; color: #999; margin:0 .25rem; } .web_imglb-tp .upload-action a:hover { color: #fff; } .web_imglb-tp:hover .upload-action { bottom: 0; } .web_imglb-top { margin-top:-.75rem; } /*Page*/ .page { user-select: none; } .page ul { margin: 0; padding: 0; list-style: none; display: flex; margin-left:.05rem; } .page ul li { font-size: 0; list-style: none; display: inline-block; border: 1px solid #d9d9d9; margin-left:-.05rem; } .page ul li:first-child, .page ul li:first-child a { border-radius:.1rem 0 0 .1rem; } .page ul li:last-child, .page ul li:last-child a { border-radius:0 .1rem .1rem 0; } .page ul li a { font-size:.7rem; display: block; padding:0 .65rem; line-height: 1.75rem; color: #444; background: #fff; } .page ul li a:not([href]) { color: #999; cursor: not-allowed; } .page ul li.active { border-color: #ff6f06; background: #ff6f06; } .page ul li.active a { color: #fff; background: #ff6f06; } .page ul li.active a:hover { background: #ff6f06; } .page ul li:hover a { background: #f9f9f9; } .page-red ul li.active { border-color: #ED4014; background: #ED4014; } .page-red ul li.active a { background: #ED4014; } .page-red ul li.active a:hover { background: #ED4014; } .page-yellow ul li.active { border-color: #F37B1D; background: #F37B1D; } .page-yellow ul li.active a { background: #F37B1D; } .page-yellow ul li.active a:hover { background: #F37B1D; } .page-green ul li.active { border-color: #19BE6B; background: #19BE6B; } .page-green ul li.active a { background: #19BE6B; } .page-green ul li.active a:hover { background: #19BE6B; } .page-info ul li.active { border-color: #2DB7F5; background: #2DB7F5; } .page-info ul li.active a { background: #2DB7F5; } .page-info ul li.active a:hover { background: #2DB7F5; } .webpages ul li { margin-right:.3rem; } .webpages ul li { border-radius:.1rem; } .webpages ul li:first-child, .webpages ul li:last-child { border-radius:.1rem; } .web_pages ul { display: flex; color: #999; justify-content: center; align-items: center; } .page-right ul { display: flex; justify-content: flex-end; } .page-right { display: flex; } .page-right .page-other { flex: 1; justify-content: flex-start; align-items: center; display: flex; } /*Progress*/ .progress { background: #e4eaec; height:.5rem; overflow: hidden; display: flex; } .progress .progress-bar { background: #1890FF; display: flex; font-size:.6rem; color: #fff; justify-content: center; align-items: center; } .progress-radius { border-radius: 1rem; } .progress-radius .progress-bar { border-radius: 1rem 0 0 1rem; } .progress-lt { height:.1rem; } .progress-sm { height:.2rem; } .progress-big { height:.75rem; } .progress-lg { height: 1.1rem; } .progress-red .progress-bar { background: #ED4014; } .progress-yellow .progress-bar { background: #F37B1D; } .progress-green .progress-bar { background: #19BE6B; } .progress-info .progress-bar { background: #2DB7F5; } .progress-striped .progress-bar { background-image: -webkit-linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-size: 2rem 2rem; -webkit-animation: progress-bar-active 2s linear infinite normal; animation: progress-bar-active 2s linear infinite normal } @-webkit-keyframes progress-bar-active { from { background-position:1.5rem 0 } to { background-position: 0 0 } } @keyframes progress-bar-active { from { background-position:1.5rem 0 } to { background-position: 0 0 } } /*Step*/ .step-wrap { position: relative; overflow: hidden; z-index: 20; } .step-wrap .step-bg, .step-wrap .step-progress { height: 0.2rem; position: absolute; top:.85rem; left: 0; } .step-wrap .step-bg { width: 100%; background: #ccd5db; } .step-wrap .step-progress { width: 0; background: #1890FF; } .step { font-size: 0; display: flex; position: relative; } .step-item { font-size:.7rem; color: #595959; text-align: center; flex: 1; position: relative; } .step-num { width: 1.8rem; height: 1.8rem; font-size:.9rem; line-height: 1.6rem; background: #ccd5db; border:.1rem solid #ccd5db; display: block; border-radius: 50%; color: #fff; text-align: center; margin: 0 auto; } .step-title { line-height: 1.6rem; color: #999; } .step-item.active .step-num { background: #fff; color: #1890FF; border-color: #3e8ef7; } .step-item.active .step-title { color: #1890FF; } .step-bottom .step-bg, .step-bottom .step-progress { top: 2.4rem; } .step-red .step-progress { background: #ED4014; } .step-red .step-item.active .step-num { color: #ED4014; border-color: #ED4014; } .step-red .step-item.active .step-title { color: #ED4014; } .step-yellow .step-progress { background: #F37B1D; } .step-yellow .step-item.active .step-num { color: #F37B1D; border-color: #F37B1D; } .step-yellow .step-item.active .step-title { color: #F37B1D; } .step-green .step-progress { background: #19BE6B; } .step-green .step-item.active .step-num { color: #19BE6B; border-color: #19BE6B; } .step-green .step-item.active .step-title { color: #19BE6B; } .step-info .step-progress { background: #2DB7F5; } .step-info .step-item.active .step-num { color: #2DB7F5; border-color: #2DB7F5; } .step-info .step-item.active .step-title { color: #2DB7F5; } .step-arrow:after { display: block; content: " "; margin:.75rem auto 0 auto; width: 1rem; height: 1rem; border: 1px solid #eaeaea; border-left: 0; border-bottom: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); background: #fff; z-index: 30; } /*Star*/ .star { } .star-item { font-size: 1rem; font-family: 瀹嬩綋; display: inline-block; color: #999; cursor: pointer; } .star-item i { font-size: 1rem; } .star-item:hover { color: #f30; } .star-full { color: #f30; } .star-active { color: #f30; } /*Scroll*/ .scroll { overflow: hidden; position: relative; } .scroll-warp { width: 100%; } /*Table*/ .table { width: 100%; } .table th { padding:.5rem .75rem; white-space: nowrap; border-bottom:.1rem solid #eee; white-space: nowrap; } .table td { padding:.5rem .75rem; border-bottom: 1px solid #eee; font-size:.65rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-height: 2rem; } .table .thead-dark { background: #697076; } .table .thead-dark th { color: #fff; border-color: #697076; } .table .thead-gray { background: #fafafa; } .table .thead-gray th { border-color: #eee; } .table-border, .table-border th, .table-border td { border: 1px solid #eee; text-align: center; } .table .text-left { text-align: left; } .table .web-you { text-align: right; } .table-hover tr:hover { background: #EBF7FF; } .table-striped tr:nth-child(even) { background: #FBFDFF; } .table-striped tr:nth-child(even):hover { background: #EBF7FF; } .table .thead-dark tr:hover { background: #697076; } .table .thead-gray tr:hover { background: #fafafa; } .table td .switch { margin-top:.25rem; } .table td [class*=ui-icon-] { font-size:.95rem; } .table td a [class*=ui-icon-] { color: #999; } .table td a:hover [class*=ui-icon-] { color: #f30; } .table td del { color: #999; } .table .ui-active { background: #EBF7FF; } .table .ui-active tr:hover { background: #EBF7FF; } .table .border-left-none { border-left: 0; } .table .border-right-none { border-right: 0; } .table td .image { border: 1px solid #f3f3f3; width: 64px; vertical-align: text-top; margin-right: 15px; float: left; padding: 2px; } /*Tab*/ .tabs { } .tabs:after { display: table; content: " "; clear: both; } .tab-list { border-bottom: 0 solid #e4eaec; font-size: 0; flex: 1; } .tab-list li { display: inline-block; margin-right:.5rem; } .tab-list li a { display: block; color: #76838F; padding:.5rem .2rem; font-size:.75rem; } .tab-list li a:hover { color: #ff6f06; } .tab-list li:hover { } .tab-list li.active { border-bottom:.1rem solid #ff6f06; } .tab-list li.active a { color: #ff6f06; } .tab-qhnr { padding: 0; } .tab-qhnr .tab-xjnr { display: none; } .tab-qhnr .tab-xjnr img { max-width: 100%; } .tab-xjnr.active { display: block; } .tabs-vertical .tab-list { flex-direction: column; float: left; border-right: 1px solid #e4eaec; border-bottom: none } .tabs-vertical .tab-list li { display: flex; margin: 0; } .tabs-vertical .tab-list li a { padding:.5rem .8rem; } .tabs-vertical .tab-list li.active { border: 0; border-right:.1rem solid #3E8EF7; } .tabs-vertical .tab-list li:hover { border: 0; } .tabs-vertical .tab-qhnr { padding: 0 1rem; display: flex; } .tabs-white .tab-list { border: 0; } .tabs-white .tab-list li { margin: 0; } .tabs-white .tab-list li a { padding:.5rem .8rem; } .tabs-white .tab-list li:hover { border: 0; } .tabs-white .tab-list li.active { border: 0; background: #fff; border-radius:.2rem .2rem 0 0; font-weight: normal; } .tabs-white .tab-list li.active a { color: #444; } .tabs-white .tab-qhnr { border: 0; background: #fff; padding: 1rem; } .tabs-header-nav { display: flex; border-bottom: 1px solid #eaeaea; } .tabs-header-more { align-items: center; justify-content: flex-end; display: flex; } .tabs-qhsub { display: flex; line-height: 0; } .tabs-qhsub .tabs-qhtit { align-items: center; justify-content: flex-start; display: flex; flex: 1; font-size:.9rem; font-weight: 400; } .tabs-qhsub .tab-list { justify-content: flex-end; display: flex; } .tabs-qhsub .tab-list li { margin-left:.5rem; margin-right: 0; } .tab-qhnr .tab-xjnr .tab-list li.active { display: inline-block; } /*Tips*/ .tips-show { display: inline-block; background: #fff; border: 1px solid #d9d9d9; border-radius:.2rem; padding:.8rem; box-shadow:1px .1rem .5rem rgba(0,0,0,0.1); max-width: 30rem; font-size:.7rem; line-height: 1.8; word-break: break-all; z-index: 10; } .tips-show img { max-width: 100%; border: 1px solid #f3f3f3; } .tips-show:after { content: " "; position: absolute; width:.5rem; height:.5rem; border-left: 0; border-bottom: 0; background: #fff; border: 1px solid #d9d9d9; border-bottom: 0; border-right: 0; } .tips-left:after { right:-.3rem; top: 50%; transform: translateY(-50%) rotate(-225deg); } .tips-top:after { left: 50%; top: 100%; transform: translateX(-50%) translateY(-50%) rotate(-140deg); } .tips-right:after { left:-.3rem; top: 50%; transform: translateY(-50%) rotate(-45deg); } .tips-bottom:after { left: 50%; top: 0; transform: translateX(-50%) translateY(-50%) rotate(45deg); } .tips-bottom-left:after { left:.5rem; top: 0; transform: translateY(-50%) rotate(45deg); } .tips-top-left:after { left:.5rem; top: 100%; transform: translateY(-50%) rotate(-140deg); } .tips-right-top:after { left:-.25rem; top:.75rem; transform: translateY(-50%) rotate(-45deg); } .tips-red { background: #ED4014; color: #fff; border: 0; } .tips-red:after { background: #ED4014; border: 0; } .tips-title { line-height: 2rem; background: #f3f3f3; text-align: center; font-size:.65rem; } /*Toast*/ .toast-warp { z-index: 998; pointer-events: none; position: fixed; } .toast { width: 14rem; overflow: hidden; font-size:.8rem; background: #fff; border: 1px solid rgba(0,0,0,0.1); box-shadow:0 1px .25rem rgba(0,0,0,0.2); border-radius: 0.2rem; transition: transform .2s cubic-bezier(.16, .68, .43, .99); word-break: break-all; text-align: left; pointer-events: all; display: block; z-index: 999; } .toast-header { display: flex; align-items: center; padding: 0.5rem 0.8rem; border-bottom: 1px solid rgba(0,0,0,0.05); } .toast-header .toast-title { flex: 1; font-size:.7rem; color: #6c757d; } .toast-header .toast-close { justify-content: flex-end; align-items: center; font-size: 1rem; cursor: pointer; font-weight: 700; line-height: 1; color: #999; } .toast-header .toast-close:hover { color: #000; } .toast-body { padding:.5rem .75rem; font-size:.7rem; } .toast-body span { font-size: 1.2rem; vertical-align: middle; margin-right:.5rem; } .toast-body .success { color: #19BE6B; } .toast-body .error { color: #ED4014; } .toast-body .warn { color: #F37B1D; } .toast-body .loading { color: #1890FF; } .progress-toast { background: #f5f5f5; } .progress-toast .progress-bar { background: #40a9ff; } .progress-toast .progress-success { background: #19BE6B; opacity: .6; } .progress-toast .progress-error { background: #ED4014; opacity: .6; } .progress-toast .progress-warn { background: #F37B1D; opacity: .6; } .progress-toast .progress-loading { background: #ED4014; } .toast-warp-top-left { left: 0; top: 0; } .toast-warp-top-right { right: 0; top: 0; } .toast-warp-top-center { top: 0; display: flex; width: 100%; flex-direction: column; text-align: center; } .toast-warp-bottom-left { left: 0; bottom: 0; } .toast-warp-bottom-right { right: 0; bottom: 0; } .toast-warp-bottom-center { bottom: 0; left: 0; display: flex; width: 100%; flex-direction: column; text-align: center; } .toast-warp-top-left .toast, .toast-warp-top-right .toast, .toast-warp-bottom-left .toast, .toast-warp-bottom-right .toast { margin:.5rem; } .toast-warp-top-center .toast { margin:.5rem auto .25rem auto; } .toast-warp-bottom-center .toast { margin:.25rem auto .5rem auto; } .toast-red { background: #ED4014; color: #fff; } .toast-red .toast-header { border-color: #F16643; } .toast-red .toast-header .toast-title { color: #fff; } .toast-red .toast-header .toast-close { color: #fff; } .toast-red .toast-header .toast-close:hover { color: #fff; } .toast-red .ui-icon-font.success, .toast-red .ui-icon-font.error, .toast-red .ui-icon-font.warn { color: #fff; } .toast-yellow { background: #FF6C47; color: #fff; } .toast-yellow .toast-header { border-color: #FB882D; } .toast-yellow .toast-header .toast-title { color: #fff; } .toast-yellow .toast-header .toast-close { color: #fff; } .toast-yellow .toast-header .toast-close:hover { color: #fff; } .toast-yellow .ui-icon-font.success, .toast-yellow .ui-icon-font.error, .toast-yellow .ui-icon-font.warn { color: #fff; } .toast-blue { background: #1890FF; color: #fff; } .toast-blue .toast-header { border-color: #40A9FF; } .toast-blue .toast-header .toast-title { color: #fff; } .toast-blue .toast-header .toast-close { color: #fff; } .toast-blue .toast-header .toast-close:hover { color: #fff; } .toast-blue .ui-icon-font.success, .toast-blue .ui-icon-font.error, .toast-blue .ui-icon-font.warn { color: #fff; } .toast-green { background: #19BE6B; color: #fff; } .toast-green .toast-header { border-color: #47CB89; } .toast-green .toast-header .toast-title { color: #fff; } .toast-green .toast-header .toast-close { color: #fff; } .toast-green .toast-header .toast-close:hover { color: #fff; } .toast-green .ui-icon-font.success, .toast-green .ui-icon-font.error, .toast-green .ui-icon-font.warn { color: #fff; } .toast-info { background: #2DB7F5; color: #fff; } .toast-info .toast-header { border-color: #57C5F7; } .toast-info .toast-header .toast-title { color: #fff; } .toast-info .toast-header .toast-close { color: #fff; } .toast-info .toast-header .toast-close:hover { color: #fff; } .toast-info .ui-icon-font.success, .toast-info .ui-icon-font.error, .toast-info .ui-icon-font.warn { color: #fff; } .toast-red .progress-toast { background: none; } .toast-red .progress-toast .progress-bar { background: rgba(255,255,255,.4); } .toast-red .progress-toast { background: none; } .toast-red .progress-toast .progress-bar { background: rgba(255,255,255,.4); } .toast-yellow .progress-toast { background: none; } .toast-yellow .progress-toast .progress-bar { background: rgba(255,255,255,.4); } .toast-blue .progress-toast { background: none; } .toast-blue .progress-toast .progress-bar { background: rgba(255,255,255,.4); } .toast-green .progress-toast { background: none; } .toast-green .progress-toast .progress-bar { background: rgba(255,255,255,.4); } .toast-info .progress-toast { background: none; } .toast-info .progress-toast .progress-bar { background: rgba(255,255,255,.4); } /*TimeLine*/ .timeline { } .timeline-item { padding: 0 0 1rem 2rem; position: relative; } .timeline-item:last-child { padding-bottom: 0; } .timeline-item:before { content: " "; width: 1px; display: block; background: #eee; height: 100%; position: absolute; top:.25rem; left:.5rem; } .timeline-dot { position: absolute; width: 1rem; height: 1rem; border-radius: 50%; border:.1rem solid #1890FF; left: 0; top:.2rem; background: #fff; } .timeline-title { font-size:.9rem; margin-bottom:.5rem; padding: 0; } .timeline-text { font-size:.7rem; line-height: 1.1rem; color: #666; } .timeline-red .timeline-dot { border-color: #ED4014; } .timeline-yellow .timeline-dot { border-color: #F37B1D; } .timeline-blue .timeline-dot { border-color: #1890FF; } .timeline-green .timeline-dot { border-color: #19BE6B; } .timeline-info .timeline-dot { border-color: #2DB7F5; } /*address*/ .ui-address { z-index: 100; } .ui-address .col-4 { border-left: 1px solid #eaeaea; overflow: hidden; } .ui-address .col-4:first-child { border: 0; } .ui-address ul { height: 20rem; overflow-y: auto; width: 11rem; } .ui-address ul li { cursor: pointer; } @media(max-width:576px) { .modal, .dialog { max-width: 95%; } .step-wrap .step-bg, .step-wrap .step-progress { height: 0.1rem; } .step-num { width: 1.5rem; height: 1.5rem; font-size:.8rem; line-height: 1.3rem; } .web_imglb-tp em { position: absolute; right: -4rem; top:.43rem; z-index: 10; width: 10rem; height: 1.2rem; line-height: 1.3rem; background: #2DB7F5; color: #fff; font-size:.45rem; text-align: center; font-style: normal; transform: rotate(45deg); } .page ul li a { font-size:.6rem; padding:0 .6rem; line-height: 1.5rem; } .web_imglb-price strong { font-size:.75rem; font-weight: normal; } } .mwidth { width: 100%; max-width: 640px; margin: 0 auto; } /*Topbar*/ .topbar { display: flex; padding:.45rem .8rem; background: #1890FF; justfiy-content: center; align-items: center; } .topbar-logo { padding:0 .5rem .25rem 0; } .topbar-logo a { color: #fff; } .topbar-search { flex: 1; justify-content: flex-end; color: #fff; text-align: right; padding-right: 1rem; position: relative; } .topbar-search input { background: #fff; border: 1px solid rgba(255,255,255,.5); line-height: 1.5rem; height: 1.7rem; padding:0 .75rem; border-radius: 1rem; color: #666; width: 100%; margin-left: 1rem; } .topbar-search button { position: absolute; background: none; width: 1.5rem; border: 0; top: 0; right:.5rem; top:.1rem; } .topbar-search button:focus { border: 0; } .topbar-search button i { color: #999; } .topbar-search-layout { flex: 1; justify-content: flex-end; text-align: right; padding-right: 1rem; position: relative; } .topbar-search-layout a { background: #fff; border: 1px solid rgba(255,255,255,.5); line-height: 1.5rem; height: 1.7rem; padding:.5rem .75rem; border-radius: 1rem; color: #666; width: 100%; margin-left: 1rem; display: block; text-align: left; line-height: 1; } .topbar-search-layout i { position: absolute; top: 10%; right:.75rem; color: #999; } .topbar-three { justify-content: space-between; } .topbar-left { color: #fff; min-width: 1rem; cursor: pointer; } .topbar-left a { color: #fff; } .topbar-title { color: #fff; font-size:.8rem; padding: 0 1rem; } .topbar-right { color: #fff; min-width: 1rem; } .topbar-right a { color: #fff; } .topbar-red { background: #ED4014; } .topbar-yellow { background: #F37B1D; } .topbar-blue { background: #1890FF; } .topbar-green { background: #19BE6B; } .topbar-info { background: #2DB7F5; } .topbar-black { background: #222; } .topbar-white { background: #fff; } .topbar-white .topbar-left a { color: #333; } .topbar-white .topbar-title { color: #333; } .topbar-white .topbar-right { color: #333; } .topbar-white .topbar-right a { color: #333; } .topbar-opacity { background: none; z-index: 999; position: relative; } .topbar-opacity .topbar-left a { color: #fff; background: rgba(51,51,51,.2); padding: 5px; border-radius: 50%; } .topbar-opacity .topbar-right a { color: #fff; background: rgba(51,51,51,.2); padding: 5px; border-radius: 50%; } .topbar-opacity .topbar-title ul { list-style: none; display: none; margin-bottom:-.3rem; } .topbar-opacity .topbar-title ul li { font-size: 13px; padding: 0 8px; } .topbar-opacity .topbar-title ul li a { border-bottom: 2px solid transparent; display: flex; padding-bottom: 5px; } .topbar-opacity .topbar-title ul li.active a { border-bottom-color: #1890FF; color: #1890FF; } .topbar-show { background: #fff; transition: background 1s; border-bottom: 1px solid #eee; box-shadow: 1px 1px 10px rgba(0,0,0,.1); } .topbar-show .topbar-left { font-size:.8rem; color: #333; } .topbar-show .topbar-left a { color: #333; background: #fff; transition: background 1s; padding: 5px; font-size:.8rem; } .topbar-show .topbar-right a { color: #333; background: #fff; transition: background 1s; padding: 5px; } .topbar-show .topbar-title { color: #333; } .topbar-show .topbar-title ul { display: flex; } /*Footbar*/ .footbar { display: flex; background: #fff; box-shadow: 1px -2px 10px 0px rgba(0,0,0,0.05); justfily-content: center; align-items: center; } .footbar-left { display: flex; } .footbar-left a { line-height: 1rem; padding:.4rem .8rem; text-align: center; border-right: 1px solid #eee; display: block; font-size:.6rem; } .footbar-left a:last-child { border: 0; } .footbar-left a i { display: block; font-size: 1.1rem; } .footbar-left a:first-child { color: #f30; } .footbar-left a:last-child { color: #999; } .footbar-right { flex: 1; display: flex; } .footbar-right a, .footbar-right button { flex: 1; background: #f90; display: block; padding:.75rem 0; color: #fff; text-align: center; font-size:.75rem; border: 0; } .footbar-right a:last-child, .footbar-right button:last-child { background: #ED4014; } /*Footnav*/ .footnav { display: flex; background: #fff; box-shadow: 1px -2px 10px 0px rgba(0,0,0,0.05); justfily-content: center; align-items: center; } .footnav a { line-height: 1.1rem; padding:.25rem 0; text-align: center; border-right: 1px solid #f3f3f3; display: block; flex: 1; font-size:.6rem; color: #999; position: relative; } .footnav a:last-child { border: 0; } .footnav a i { display: block; font-size: 1rem; color: #666; } .footnav a .badge { position: absolute; top:.2rem; } .footnav a.active { color: #1890FF; } .footnav a.active i { color: #1890FF; } .footnav-red a.active { color: #ED4014; } .footnav-red a.active i { color: #ED4014; } .footnav-yellow a.active { color: #F37B1D; } .footnav-yellow a.active i { color: #F37B1D; } .footnav-blue a.active { color: #1890FF; } .footnav-blue a.active i { color: #1890FF; } .footnav-green a.active { color: #19BE6B; } .footnav-green a.active i { color: #19BE6B; } .footnav-info a.active { color: #2DB7F5; } .footnav-info a.active i { color: #2DB7F5; } .footnav-bg-red { background: #ED4014; } .footnav-bg-red a { color: #fff; border-right-color: rgba(255,255,255,.2); } .footnav-bg-red a i { color: #fff; } .footnav-bg-red a.active, .footnav-bg-red a.active i { color: #ff0; } .footnav-bg-yellow { background: #F37B1D; } .footnav-bg-yellow a { color: #fff; border-right-color: rgba(255,255,255,.2); ; } .footnav-bg-yellow a i { color: #fff; } .footnav-bg-yellow a.active, .footnav-bg-yellow a.active i { color: #ff0; } .footnav-bg-blue { background: #1890FF; } .footnav-bg-blue a { color: #fff; border-right-color: rgba(255,255,255,.2); ; } .footnav-bg-blue a i { color: #fff; } .footnav-bg-blue a.active, .footnav-bg-blue a.active i { color: #ff0; } .footnav-bg-green { background: #19BE6B; } .footnav-bg-green a { color: #fff; border-right-color: rgba(255,255,255,.2); ; } .footnav-bg-green a i { color: #fff; } .footnav-bg-green a.active, .footnav-bg-green a.active i { color: #ff0; } .footnav-bg-info { background: #2DB7F5; } .footnav-bg-info a { color: #fff; border-right-color: rgba(255,255,255,.2); ; } .footnav-bg-info a i { color: #fff; } .footnav-bg-info a.active, .footnav-bg-info a.active i { color: #ff0; } .footnav-bg-black { background: #444; } .footnav-bg-black a { color: #fff; border-right-color: rgba(255,255,255,.2); ; } .footnav-bg-black a i { color: #fff; } .footnav-bg-black a.active, .footnav-bg-black a.active i { color: #ff0; } /*甯哥敤*/ .w-100 { width: 100%; } .w-auto { width: auto; } .h-25 { height: 25%; } .h-50 { height: 50%; } .h-75 { height: 75%; } .h-100 { height: 100%; } .h-auto { height: auto; } .mw-100 { max-width: 100%; } .mh-100 { max-height: 100%; } .min-vw-100 { min-width: 100vw; } .min-vh-100 { min-height: 100vh; } .min-100 { min-height: 100px; } .min-200 { min-height: 200px; } .min-300 { min-height: 300px; } .min-400 { min-height: 400px; } .vw-100 { width: 100vw; } .vh-100 { height: 100vh; } .p { padding:.5rem; } .p-0 { padding: 0; } .p-sm { padding:.25rem; } .p-10 { padding:.5rem; } .p-15 { padding:.75rem; } .p-20 { padding: 1rem; } .p-30 { padding: 1.5rem; } .p-40 { padding: 2rem; } .pt { padding-top:.5rem; } .pt-0 { padding-top: 0; } .pt-sm { padding-top:.25rem; } .pt-10 { padding-top:.5rem; } .pt-15 { padding-top:.75rem; } .pt-20 { padding-top: 1rem; } .pt-30 { padding-top: 1.5rem; } .pt-40 { padding-top: 2rem; } .pb { padding-bottom:.5rem; } .pb-0 { padding-bottom: 0; } .pb-sm { padding-bottom:.25rem; } .pb-10 { padding-bottom:.5rem; } .pb-15 { padding-bottom:.75rem; } .pb-20 { padding-bottom: 1rem; } .pl { padding-left:.5rem; } .pl-0 { padding-left: 0; } .pl-sm { padding-left:.25rem; } .pl-10 { padding-left:.5rem; } .pl-15 { padding-left:.75rem; } .pl-20 { padding-left: 1rem; } .pl-30 { padding-left: 1.5rem; } .pl-40 { padding-left: 2rem; } .pr { padding-right:.5rem; } .pr-0 { padding-right: 0; } .pr-sm { padding-right:.25rem; } .pr-10 { padding-right:.5rem; } .pr-15 { padding-right:.75rem; } .pr-20 { padding-right: 1rem; } .pr-30 { padding-right: 1.5rem; } .pr-40 { padding-right: 2rem; } .m { margin:.5rem; } .m-0 { margin: 0; } .m-sm { margin:.25rem; } .m-10 { margin:.5rem; } .m-15 { margin:.75rem; } .m-20 { margin: 1rem; } .m-30 { margin: 1.5rem; } .m-40 { margin: 2rem; } .mt { margin-top:.5rem; } .mt-0 { margin-top: 0; } .mt-sm { margin-top:.25rem; } .mt-10 { margin-top:.5rem; } .mt-15 { margin-top:.75rem; } .mt-20 { margin-top: 1rem; } .mt-30 { margin-top: 1.5rem; } .mt-40 { margin-top: 2rem; } .mb { margin-bottom:.5rem; } .mb-0 { margin-bottom: 0; } .mb-sm { margin-bottom:.25rem; } .mb-10 { margin-bottom:.5rem; } .mb-15 { margin-bottom:.75rem; } .mb-20 { margin-bottom: 1rem; } .mb-30 { margin-bottom: 1.5rem; } .mb-40 { margin-bottom: 2rem; } .ml { margin-left:.5rem; } .ml-0 { margin-left: 0; } .ml-sm { margin-left:.25rem; } .ml-10 { margin-left:.5rem; } .ml-15 { margin-left:.75rem; } .ml-20 { margin-left: 1rem; } .ml-30 { margin-left: 1.5rem; } .ml-40 { margin-left: 2rem; } .mr { margin-right:.5rem; } .mr-0 { margin-right: 0; } .mr-sm { margin-right:.25rem; } .mr-10 { margin-right:.5rem; } .mr-15 { margin-right:.75rem; } .mr-20 { margin-right: 1rem; } .mr-30 { margin-right: 1.5rem; } .mr-40 { margin-right: 2rem; } .fl { float: left; } .fr { float: right; } .clear { clear: both; } .show { display: block; } .hide { display: none; } @media print { .ui-print-hide { display: none!important } } .bd { border: 1px solid #eaeaea; } .bg-white { background: #fff; } .bg-gray { background: #f6f6f6; } .bg-red { background: #ED4014; } .bg-yellow { background: #F37B1D; } .bg-blue { background: #1890FF; } .bg-green { background: #19BE6B; } .bg-info { background: #2DB7F5; } .bg-info { background: #2DB7F5; } /*瀛椾綋棰滆壊*/ .text-red { color: #ED4014; } .text-yellow { color: #F37B1D; } .text-blue { color: #1890FF; } .text-green { color: #19BE6B; } .text-info { color: #2DB7F5; } .text-white { color: #fff; } .text-black { color: #000; } .text-gray { color: #999; } /*瀵归綈鏂瑰紡*/ .text-left { text-align: left; } .text-center { text-align: center; } .web-you { text-align: right; } /*瀛椾綋澶у皬*/ .font-10 { font-size:.5rem; } .font-12 { font-size:.6rem; } .font-13 { font-size:.65rem; } .font-14 { font-size:.7rem; } .font-15 { font-size:.75rem; } .font-16 { font-size:.8rem; } .font-17 { font-size:.85rem; } .font-18 { font-size:.9rem; } .font-20 { font-size: 1rem; } .font-22 { font-size: 1.1rem; } .font-24 { font-size: 1.2rem; } .font-26 { font-size: 1.3rem; } .font-28 { font-size: 1.4rem; } .font-30 { font-size: 1.5rem; } .font-32 { font-size: 1.6rem; } .font-36 { font-size: 1.8rem; } .font-38 { font-size: 1.9rem; } .font-40 { font-size: 2rem; } /*闂磋窛*/ .height-auto { line-height: normal; } .height-18 { line-height:.9rem; } .height-20 { line-height: 1rem; } .height-22 { line-height: 1.1rem; } .height-24 { line-height: 1.2rem; } .height-26 { line-height: 1.3rem; } .height-28 { line-height: 1.4rem; } .height-30 { line-height: 1.5rem; } /*瓒呭嚭鐪佺暐*/ .web-txt { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /*浠ヤ笅浠呭湪Chrome鍐呮牳娴忚鍣ㄤ腑鐢熸晥锛屽叾浠栨祻瑙堝櫒锛氶渶瑕侀厤缃楂樺拰楂樺害浣跨敤*/ .web-txt-2, .web-txt-3, .web-txt-4, .web-txt-5, .web-txt-6 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .web-txt-2 { -webkit-line-clamp: 2; } .web-txt-3 { -webkit-line-clamp: 3; } .web-txt-4 { -webkit-line-clamp: 4; } .web-txt-5 { -webkit-line-clamp: 5; } .web-txt-6 { -webkit-line-clamp: 6; } .radius { border-radius: 50%; } .radius img, .radius svg { border-radius: 50%; } .radius-sm { border-radius:.02rem; } .disabled, button:disabled { cursor: not-allowed; } /*Animal*/ .scrollspy { opacity: 0; } .rotate { -webkit-animation: 2s infinite linear; -moz-animation: 2s infinite linear; -ms-animation: 2s infinite linear; animation: 2s infinite linear; } .rotate:hover { -webkit-animation-name: a-rotate; -moz-animation-name: a-rotate; -ms-animation-name: a-rotate; animation-name: a-rotate } @-webkit-keyframes a-rotate { 0% { -webkit-transform:rotate(0deg) } 100% { -webkit-transform:rotate(359deg) } } @-moz-keyframes a-rotate { 0% { -moz-transform:rotate(0deg) } 100% { -moz-transform:rotate(359deg) } } @-ms-keyframes a-rotate { 0% { -ms-transform:rotate(0deg) } 100% { -ms-transform:rotate(359deg) } } @keyframes a-rotate { 0% { transform:rotate(0deg) } 100% { transform:rotate(359deg) } } [class*="ui-am-"] { -webkit-animation-duration:0.5s; animation-duration:0.5s; -webkit-animation-timing-function: ease-out; animation-timing-function:ease-out; -webkit-animation-fill-mode:both; animation-fill-mode:both; } .ui-am-fade { -webkit-animation-name: fade; animation-name: fade; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-timing-function: linear; animation-timing-function: linear; } .ui-am-fade-out { -webkit-animation-name: fade-out; animation-name: fade-out; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-timing-function: linear; animation-timing-function: linear; } .ui-am-scale-up { -webkit-animation-name: scale-up; animation-name: scale-up; } .ui-am-scale-down { -webkit-animation-name: scale-down; animation-name: scale-down; } .ui-am-slide-top { -webkit-animation-name: slide-top; animation-name: slide-top; } .ui-am-slide-bottom { -webkit-animation-name: slide-bottom; animation-name: slide-bottom; } .ui-am-slide-left { -webkit-animation-name: slide-left; animation-name: slide-left; } .ui-am-slide-right { -webkit-animation-name: slide-right; animation-name: slide-right; } .ui-am-slide-top-fixed { -webkit-animation-name: slide-top-fixed; animation-name: slide-top-fixed; } .ui-am-shake { -webkit-animation-name: shake; animation-name: shake; } .ui-am-spin { -webkit-animation: spin 2s infinite linear; animation: spin 2s infinite linear; } .ui-am-left-spring { -webkit-animation: left-spring 0.3s ease-in-out; animation: left-spring 0.3s ease-in-out; } .ui-am-right-spring { -webkit-animation: right-spring 0.3s ease-in-out; animation: right-spring 0.3s ease-in-out; } .ui-am-delay-1 { -webkit-animation-delay: 1s; animation-delay: 1s; } .ui-am-delay-1-5 { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .ui-am-delay-2 { -webkit-animation-delay: 2s; animation-delay: 2s; } .ui-am-delay-2-5 { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } .ui-am-delay-3 { -webkit-animation-delay: 3s; animation-delay: 3s; } .ui-am-delay-3-5 { -webkit-animation-delay: 3.5s; animation-delay: 3.5s; } .ui-am-delay-4 { -webkit-animation-delay: 4s; animation-delay: 4s; } .ui-am-delay-4-5 { -webkit-animation-delay: 4.5s; animation-delay: 4.5s; } .ui-am-delay-5 { -webkit-animation-delay: 5s; animation-delay: 5s; } .ui-am-delay-5-5 { -webkit-animation-delay: 5.5s; animation-delay: 5.5s; } .ui-am-delay-6 { -webkit-animation-delay: 6s; animation-delay: 6s; } .ui-am-delay-6-5 { -webkit-animation-delay: 6.5s; animation-delay: 6.5s; } @-webkit-keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes scale-up { 0% { opacity:0; -webkit-transform:scale(0.2); transform:scale(0.2); } 100% { opacity:1; -webkit-transform:scale(1); transform:scale(1); } } @keyframes scale-up { 0% { opacity:0; -webkit-transform:scale(0.2); transform:scale(0.2); } 100% { opacity:1; -webkit-transform:scale(1); transform:scale(1); } } @-webkit-keyframes scale-down { 0% { opacity:0; -webkit-transform: scale(1.8); transform: scale(1.8); } 100% { opacity:1; -webkit-transform:scale(1); transform:scale(1); } } @keyframes scale-down { 0% { opacity:0; -webkit-transform: scale(1.8); transform: scale(1.8); } 100% { opacity:1; -webkit-transform:scale(1); transform:scale(1); } } @-webkit-keyframes slide-top { 0% { opacity:0; -webkit-transform:translateY(-100%); transform:translateY(-100%); } 100% { opacity:1; -webkit-transform:translateY(0); transform:translateY(0); } } @keyframes slide-top { 0% { opacity:0; -webkit-transform:translateY(-100%); transform:translateY(-100%); } 100% { opacity:1; -webkit-transform:translateY(0); transform:translateY(0); } } @-webkit-keyframes slide-bottom { 0% { opacity:0; -webkit-transform:translateY(100%); transform:translateY(100%); } 100% { opacity:1; -webkit-transform:translateY(0); transform:translateY(0); } } @keyframes slide-bottom { 0% { opacity:0; -webkit-transform:translateY(100%); transform:translateY(100%); } 100% { opacity:1; -webkit-transform:translateY(0); transform:translateY(0); } } @-webkit-keyframes slide-left { 0% { opacity:0; -webkit-transform:translateX(-100%); transform:translateX(-100%) } 100% { opacity:1; -webkit-transform:translateX(0); transform:translateX(0) } } @keyframes slide-left { 0% { opacity:0; -webkit-transform:translateX(-100%); transform:translateX(-100%) } 100% { opacity:1; -webkit-transform:translateX(0); transform:translateX(0) } } @-webkit-keyframes slide-right { 0% { opacity:0; -webkit-transform:translateX(100%); transform:translateX(100%) } 100% { opacity:1; -webkit-transform:translateX(0); transform:translateX(0) } } @keyframes slide-right { 0% { opacity:0; -webkit-transform:translateX(100%); transform:translateX(100%) } 100% { opacity:1; -webkit-transform:translateX(0); transform:translateX(0) } } @-webkit-keyframes shake { 0%, 100% { -webkit-transform:translateX(0); transform:translateX(0) } 10% { -webkit-transform:translateX(-9px); transform:translateX(-9px) } 20% { -webkit-transform:translateX(8px); transform:translateX(8px) } 30% { -webkit-transform:translateX(-7px); transform:translateX(-7px) } 40% { -webkit-transform:translateX(6px); transform:translateX(6px) } 50% { -webkit-transform:translateX(-5px); transform:translateX(-5px) } 60% { -webkit-transform:translateX(4px); transform:translateX(4px) } 70% { -webkit-transform:translateX(-3px); transform:translateX(-3px) } 80% { -webkit-transform:translateX(2px); transform:translateX(2px) } 90% { -webkit-transform:translateX(-1px); transform:translateX(-1px) } } @keyframes shake { 0%, 100% { -webkit-transform:translateX(0); transform:translateX(0) } 10% { -webkit-transform:translateX(-9px); transform:translateX(-9px) } 20% { -webkit-transform:translateX(8px); transform:translateX(8px) } 30% { -webkit-transform:translateX(-7px); transform:translateX(-7px) } 40% { -webkit-transform:translateX(6px); transform:translateX(6px) } 50% { -webkit-transform:translateX(-5px); transform:translateX(-5px) } 60% { -webkit-transform:translateX(4px); transform:translateX(4px) } 70% { -webkit-transform:translateX(-3px); transform:translateX(-3px) } 80% { -webkit-transform:translateX(2px); transform:translateX(2px) } 90% { -webkit-transform:translateX(-1px); transform:translateX(-1px) } } @-webkit-keyframes slide-top-fixed { 0% { opacity:0; -webkit-transform:translateY(-10px); transform:translateY(-10px) } 100% { opacity:1; -webkit-transform:translateY(0); transform:translateY(0) } } @keyframes slide-top-fixed { 0% { opacity:0; -webkit-transform:translateY(-10px); transform:translateY(-10px) } 100% { opacity:1; -webkit-transform:translateY(0); transform:translateY(0) } } @-webkit-keyframes slide-bottom-fixed { 0% { opacity:0; -webkit-transform:translateY(10px); transform:translateY(10px) } 100% { opacity:1; -webkit-transform:translateY(0); transform:translateY(0) } } @keyframes slide-bottom-fixed { 0% { opacity:0; -webkit-transform:translateY(10px); transform:translateY(10px) } 100% { opacity:1; -webkit-transform:translateY(0); transform:translateY(0) } } @-webkit-keyframes spin { 0% { -webkit-transform:rotate(0); transform:rotate(0) } 100% { -webkit-transform:rotate(359deg); transform:rotate(359deg) } } @keyframes spin { 0% { -webkit-transform:rotate(0); transform:rotate(0) } 100% { -webkit-transform:rotate(359deg); transform:rotate(359deg) } } @-webkit-keyframes right-spring { 0% { -webkit-transform:translateX(0); transform:translateX(0) } 50% { -webkit-transform:translateX(-20%); transform:translateX(-20%) } 100% { -webkit-transform:translateX(0); transform:translateX(0) } } @keyframes right-spring { 0% { -webkit-transform:translateX(0); transform:translateX(0) } 50% { -webkit-transform:translateX(-20%); transform:translateX(-20%) } 100% { -webkit-transform:translateX(0); transform:translateX(0) } } @-webkit-keyframes left-spring { 0% { -webkit-transform:translateX(0); transform:translateX(0) } 50% { -webkit-transform:translateX(20%); transform:translateX(20%) } 100% { -webkit-transform:translateX(0); transform:translateX(0) } } @keyframes left-spring { 0% { -webkit-transform:translateX(0); transform:translateX(0) } 50% { -webkit-transform:translateX(20%); transform:translateX(20%) } 100% { -webkit-transform:translateX(0); transform:translateX(0) } } .ui-loading { width: 1rem; height: 1rem; display: inline-block; vertical-align: middle; -webkit-animation: f 1s steps(12) infinite; animation: f 1s steps(12) infinite; background: transparent url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E") no-repeat; background-size: 100% } @-webkit-keyframes f { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg) } to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } @keyframes f { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg) } to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } }