*{padding: 0;margin: 0;font-family: 'Hiragino Sans GB', 'Microsoft Yahei', "WenQuanYi Micro Hei", SimSun, Tahoma, Arial, Helvetica, 'STHeiti', serif;}
html, body{height: 100%;background-color: #f5f6fa;scrollbar-width: none;-ms-overflow-style: none;}
ul, ol, li{list-style: none;}
a{text-decoration: none;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none;}
input[type="number"]{-moz-appearance: textfield;}
select{background-color: #fff;appearance: none;-moz-appearance: none;-webkit-appearance: none;}
.data-null{text-align: center;font-size: 13px;font-weight: normal;color: #888;background-color: #fcfcfc;padding: 60px 30px;}
img{object-fit: cover;}

body{scrollbar-arrow-color: red;scrollbar-face-color: #926dde;scrollbar-3dlight-color: blue;scrollbar-highlight-color: #aaa;scrollbar-shadow-color: #926dde;scrollbar-darkshadow-color: green;scrollbar-track-color: #aaa;scrollbar-base-color: black;scrollbar-width: none;-ms-overflow-style: none;}
::-webkit-scrollbar {width: 4px;height: 4px;}
::-webkit-scrollbar-button {display: none;}
::-webkit-scrollbar-track {background-color: #ddd;border-radius: 4px;}
::-webkit-scrollbar-track-piece {background-color: transparent;}
::-webkit-scrollbar-thumb {border-radius: 4px; background-color: #aaa !important;}
::-webkit-scrollbar-thumb:hover {background: #c570e8 !important;}

header .header{display: flex;align-items: center;justify-content: space-between;height: 60px;position: fixed;top: 0;right: 0;left: 0;box-shadow: 0 0 0px #666;z-index: 99;background-color: #48b0f7;font-size: 14px;}
header .header .logo{min-width: 200px;display: flex;align-items: center;justify-content: center;height: inherit;border-right: 1px solid rgba(0, 0, 0, .02);background-color: rgba(0, 0, 0, .1);color: #fff;font-size: 18px;transition: all .3s;}
header .header .logo a{color: inherit;display: flex;align-items: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
header .header .head{display: flex;align-items: flex-start;width: 100%;height: inherit;justify-content: space-between;padding: 0 20px;color: #fff;}
header .header .head .head-links>li{display: inline-block;position: relative;}
header .header .head .head-links li a{display: block;padding: 0 10px;height: inherit;line-height: 60px;color: inherit;}
header .header .head .head-links li.abonement{padding: 0;}
header .header .head .head-links li.abonement:hover>a{background-color: rgba(0, 0, 0, .1);}
header .header .head .head-links li.abonement a i{transition: all .5s;}
header .header .head .head-links li.abonement:hover>a i:last-child{transform: rotate(-180deg);}
header .header .head .head-links li.abonement ol{position: absolute;color: #444;box-shadow: 0 2px 5px #eee;background-color: #fff;border-radius: 0 0 2px 2px;top: 60px;right: 0;left: 0;z-index: 8;display: none;box-sizing: border-box;overflow: hidden;}
header .header .head .head-links li.abonement:hover ol{display: block;}
header .header .head .head-links li.abonement ol li{height: 45px;line-height: 45px;}
header .header .head .head-links li.abonement ol li:last-child{border-top: 1px solid #f5f5f5;text-align: center;background-color: #e64340;color: #fff;}
header .header .head .head-links li.abonement ol li a{height: inherit;line-height: inherit;padding: 0 20px;}
[menu-active-status=close] .header .logo{min-width: 0;width: 0;}

aside{position: fixed;width: 200px;top: 0;left: 0;bottom: 0;z-index: 98;transition: all .3s;}
aside .aside{position: fixed;width: inherit;top: 60px;right: 0;bottom: 0;left: 0;box-shadow: 0 0 5px #ccc;z-index: 8;background-color: #fff;transition: all .3s;}
aside .aside::-webkit-scrollbar{display: none;}
aside .aside .menu{font-size: 14px;position: absolute;top: 0;bottom: auto;width: 100%;}
aside .aside .menu li{position: relative;}
aside .aside .menu li .menu-tips{padding: 0 30px;position: absolute;top: 0;right: 0;bottom: 0;display: flex;align-items: center;justify-content: center;}
aside .aside .menu li .menu-tips .number{background-color: #09f;border-radius: 50%;width: 20px;height: 20px;display: flex;align-items: center;justify-content: center;font-size: 12px;color: #fff;box-sizing: border-box;}
aside .aside .menu li .menu-title{color: #444;border-top: 0 solid #fff;box-sizing: border-box;}
aside .aside .menu li.menu-active .menu-title{border-right: 3px solid #48b0f7;background-color: rgba(0, 153, 255, .1);font-weight: bold;color: #48b0f7;}
aside .aside .menu li .menu-title a{display: block;height: 50px;line-height: 50px;padding: 0 20px;color: inherit;position: relative;transition: all .2s;}
aside .aside .menu li .menu-title a:hover{background-color: rgba(0, 0, 0, .02);color: #48b0f7;}
aside .aside .menu li .menu-title a span{padding: 0;}
aside .aside .menu li .menu-title a span.icon{padding: 0 10px;position: absolute;top: 0;right: 0;bottom: 0;}
aside .aside .menu li .menu-title a span.icon i{transition: all .35s;}
aside .aside .menu li.menu-active .menu-title a span.icon i{transform: rotate(90deg);}
aside .aside .menu li ol{padding: 0;background-color: #fafafa;box-sizing: border-box;overflow: hidden;transition: .35s;max-height: 0;}
aside .aside .menu li.menu-active ol{display: block;}
aside .aside .menu li ol li a{display: flex;height: 45px;line-height: 45px;padding: 0 42px;color: #666;font-size: 13px;}
aside .aside .menu li ol li a span{padding: 0 10px;}
aside .aside .menu li ol li a:hover{background-color: rgba(0, 0, 0, .1);}
aside .aside .menu li ol li.active a{color: #48b0f7;}
aside .aside .menu li ol li.active .menu-tips .number{background-color: #09f;}
[menu-active-status=close] .aside{width: 60px;}
[menu-active-status=close] .aside .menu>li>.menu-title span{display: none;}
[menu-active-status=close] .aside li>ol{position: absolute;z-index: 99;background-color: #fff;top: 0;left: 70px;width: 150px;box-shadow: 0 0 5px #ccc;border-radius: 2px;}
[menu-active-status=close] .aside li>ol::before{content: '';position: absolute;top: 0;bottom: 0;left: -10px;width: 10px;background-color: transparent;}
[menu-active-status=close] .aside li>ol li a{padding: 0!important;}

main .main{padding: 80px 20px 20px 220px;box-sizing: border-box;transition: all .3s;}

footer .footer{position: fixed;bottom: 0;right: 0;z-index: 99;padding: 5px;text-align: center;font-size: 12px;color: #999;}
footer .footer a{color: inherit;}


/* red theme style */
[theme=red] .header{background-color: rgba(231, 76, 60, 1)!important;}
[theme=red] .header .logo{color: #fff;}
[theme=red] .header .head{color: #fff;}
[theme=red] .menu li.menu-active .menu-title{border-right-color: rgba(231, 76, 60, 1)!important;background-color: rgba(231, 76, 60, .05)!important;color: rgba(231, 76, 60, 1)!important;}
[theme=red] .menu li.menu-active .menu-tips .number{background-color: rgba(231, 76, 60, 1)!important;}
[theme=red] .menu li .menu-title a:hover{color: rgba(231, 76, 60, 1)!important;}
[theme=red] .menu li ol li.active a{color: rgba(231, 76, 60, 1)!important;}
[theme=red] .menu li ol li.active .menu-tips .number{background-color: rgba(77, 82, 89, .05)!important;}

/* yellow theme style */
[theme=yellow] .header{background-color: rgba(243, 156, 18, 1)!important;}
[theme=yellow] .header .logo{color: #fff;}
[theme=yellow] .header .head{color: #fff;}
[theme=yellow] .menu li.menu-active .menu-title{border-right-color: rgba(243, 156, 18, 1)!important;background-color: rgba(243, 156, 18, .05)!important;color: rgba(243, 156, 18, 1)!important;}
[theme=yellow] .menu li.menu-active .menu-tips .number{background-color: rgba(243, 156, 18, 1)!important;}
[theme=yellow] .menu li .menu-title a:hover{color: rgba(243, 156, 18, 1)!important;}
[theme=yellow] .menu li ol li.active a{color: rgba(243, 156, 18, 1)!important;}
[theme=yellow] .menu li ol li.active .menu-tips .number{background-color: rgba(77, 82, 89, .05)!important;}

/* green theme style */
[theme=green] .header{background-color: rgba(24, 188, 156, 1)!important;}
[theme=green] .header .logo{color: #fff;}
[theme=green] .header .head{color: #fff;}
[theme=green] .menu li.menu-active .menu-title{border-right-color: rgba(24, 188, 156, 1)!important;background-color: rgba(24, 188, 156, .05)!important;color: rgba(24, 188, 156, 1)!important;}
[theme=green] .menu li.menu-active .menu-tips .number{background-color: rgba(24, 188, 156, 1)!important;}
[theme=green] .menu li .menu-title a:hover{color: rgba(24, 188, 156, 1)!important;}
[theme=green] .menu li ol li.active a{color: rgba(24, 188, 156, 1)!important;}
[theme=green] .menu li ol li.active .menu-tips .number{background-color: rgba(24, 188, 156, 1)!important;}

/* purple theme style */
[theme=purple] .header{background-color: rgba(146, 109, 222, 1)!important;}
[theme=purple] .header .logo{color: #fff;}
[theme=purple] .header .head{color: #fff;}
[theme=purple] .menu li.menu-active .menu-title{border-right-color: rgba(146, 109, 222, 1)!important;background-color: rgba(146, 109, 222, .05)!important;color: rgba(146, 109, 222, 1)!important;}
[theme=purple] .menu li.menu-active .menu-tips .number{background-color: rgba(146, 109, 222, 1)!important;}
[theme=purple] .menu li .menu-title a:hover{color: rgba(146, 109, 222, 1)!important;}
[theme=purple] .menu li ol li.active a{color: rgba(146, 109, 222, 1)!important;}
[theme=purple] .menu li ol li.active .menu-tips .number{background-color: rgba(146, 109, 222, 1)!important;}

/* black theme style */
[theme=black] .header{background-color: rgba(77, 82, 89, 1)!important;}
[theme=black] .header .logo{color: #fff;}
[theme=black] .header .head{color: #fff;}
[theme=black] .menu li.menu-active .menu-title{border-right-color: rgba(77, 82, 89, 1)!important;background-color: rgba(77, 82, 89, .05)!important;color: rgba(77, 82, 89, 1)!important;}
[theme=black] .menu li.menu-active .menu-tips .number{background-color: rgba(77, 82, 89, .05)!important;}
[theme=black] .menu li .menu-title a:hover{color: rgba(77, 82, 89, 1)!important;}
[theme=black] .menu li ol li.active a{color: rgba(77, 82, 89, 1)!important;}
[theme=black] .menu li ol li.active .menu-tips .number{background-color: rgba(77, 82, 89, 1)!important;}



[control=drop][drop-status=close] .menu-title a span.icon i{transform: rotate(0deg)!important;}
[control=drop][drop-status=open] .menu-title a span.icon i{transform: rotate(90deg)!important;}
[control=drop][drop-status=close] .drop-main{max-height: 0;}
[control=drop][drop-status=open] .drop-main{max-height: 800px;transition: 1s;}

/* pane style */
.pane{display: flex;justify-content: space-between;flex-wrap: wrap;margin: 0 0 -20px 0;}
.pane .pane-item{display: flex;align-items: center;justify-content: space-between;background-color: #48b0f7;padding: 30px 20px;box-sizing: border-box;color: #fff;width: 100%;margin: 0 0 20px 0;min-width: 200px;max-width: 25%;cursor: pointer;}
.pane .pane-item .pane-icon{width: 40%;text-align: center;}
.pane .pane-item .pane-info{width: 60%;}
.pane .pane-item .pane-info .pane-title{font-size: 12px;}
.pane .pane-item .pane-info .pane-value{font-size: 24px;}
.pane-2n .pane-item{width: 49.2%;}
.pane-3n .pane-item{width: 32.5%;}
.pane-4n .pane-item{width: 24.2%;}
.pane-5n .pane-item{width: 19.2%;}
.pane-primary{background-color: #33cabb!important;}
.pane-danger{background-color: #f96868!important;}
.pane-success{background-color: #15c377!important;}
.pane-purple{background-color: #926dde!important;}

.chunk{display: flex;align-items: flex-start;justify-content: space-between;padding: 20px 0 0 0;}
.chunk .chunk-item{width: 50%;}
.chunk .chunk-item:first-child{padding: 0 10px 0 0;}
.chunk .chunk-item:last-child{padding: 0 0 0 10px;}
.section{padding: 0;}
.section-white{background-color: #fff;}
.section h4{padding: 18px 20px;color: #666;font-size: 15px;font-weight: normal;border-bottom: 1px solid #eee;}

.table{background-color: #fff;padding: 20px;}
.table>div{margin-bottom: 10px;}
.table .table-header{font-size: 16px;color: #333;padding: 10px 0;display: flex;align-items: center;justify-content: space-between;}
.table .table-explain{padding: 15px;background-color: rgba(0, 153, 255, .05);font-size: 13px;color: #e64340;}
.table .table-search{display: flex;align-items: center;justify-content: flex-start;flex-wrap: wrap;padding: 10px;background-color: rgba(0, 153, 0, .02);}
.table .table-search .search-item{margin: 5px;display: flex;align-items: center;font-size: 13px;}
.table .table-search .search-item .item-title{width: 70px; text-align: right;}
.table .table-search .search-item .item-input{height: 32px;box-sizing: border-box;min-width: 240px;}
.table .table-search input{height: inherit;width: 100%;outline: none;padding: 0 1em;border: 1px solid #ddd;transition: all .2s;border-radius: 2px;box-sizing: border-box;margin: 2px;}
.table .table-search input:focus{border-color: #48b0f7;box-shadow: 0 0 5px #48b0f7;}
.table .table-search select{height: inherit;width: 100%;box-sizing: border-box;outline: none;padding: 0 1em;border: 1px solid #ddd;transition: all .2s;border-radius: 2px;}
.table .table-search select:focus{border-color: #48b0f7;box-shadow: 0 0 5px #48b0f7;}
.table table.table-main{width: 100%;border-collapse:collapse;color: #4d5259;box-sizing: border-box;}
.table table.table-main tr th, .table table.table-main tr td{text-align: center;border: 1px solid #eee;border-left: 1px solid #f8f8f8;border-right: 1px solid #f8f8f8;}
.table table.table-main tr th{font-size: 14px;padding: 15px 1em;border: 1px solid #eee;border-bottom: 1px solid #ddd;box-sizing: border-box;background-color: #fafafa;white-space: nowrap;}
.table table.table-main tr td{font-size: 13px;padding: 10px 1em;box-sizing: border-box;}
.table table.table-main tr td.table-data-null{padding: 100px 0;text-align: center;}
/*.table table.table-main tr:nth-child(odd) td{background-color: #fdfdfd;}*/
.table table.table-main tr:hover td{background-color: #fdfdfd;}
.table table.table-main input[type=number],
.table table.table-main input[type=text]{border: none;text-align: center;outline: none;}
.table table.table-main input[type=checkbox]{position: relative;width: initial;}
.table table.table-main input[type=checkbox]::before{content: '';display: block;width: 16px;height: 16px;border: 2px solid #ddd;position: relative;top: -.1em;left: -.1em;box-sizing: border-box;background-color: #fff;border-radius: 2px;}
.table table.table-main input[type=checkbox]:checked::before{content: '';display: block;width: 16px;height: 16px;border: 2px solid #48b0f7;position: relative;top: -.1em;left: -.1em;box-sizing: border-box;background-color: #48b0f7;z-index: 8;}
.table table.table-main input[type=checkbox]:checked::after{content: '';display: block;width: 10px;height: 5px;border-left: 2px solid #fff;border-bottom: 2px solid #fff;position: absolute;top: 2px;left: 1px;z-index: 9;transform: rotate(-45deg);border-radius: 2px;}
.table table.table-main input[control=sort]{width: 100%; box-sizing: border-box; height: 30px; text-align: center; border-radius: 2px; overflow: hidden; outline: none; font-size: 14px; color: #666;border: 1px solid transparent;background-color: transparent;}
.table table.table-main input[control=sort]:focus{border: none;}
.table table.table-main input[control=input]{width: 100%;outline: none; font-size: 14px; color: #666;border: 1px solid transparent;background-color: transparent;}
.table table.table-main input[control=input]:focus{border: none;}

.table .table-scroll{overflow-x: auto;}
.table .table-scroll table.table-main{min-width: 100%;}

.table .table-pager{padding: 40px 0 20px 0;text-align: center;font-size: 14px;}
.table .table-pager a{border: 1px solid #dee2e6;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;margin: 0 2px;color: #6c757d;border-radius: 2px;}
.table .table-pager a.active{background-color: #48b0f7;border-color: #48b0f7;color: #fff;}
.table .table-pager .pager-text{color: #666;padding: 20px 0;}
.table .table-pager .pager-list{display: flex;align-items: center;justify-content: center;}
.table .table-pager .pager-list .pager-first{width: auto;padding: 0 10px;}
.table .table-pager .pager-list .pager-last{width: auto;padding: 0 10px;}


.status{display: inline-block;color: #888;border: 1px solid #ddd;padding: 2px 8px;font-size: 12px;border-radius: 2px;line-height: 18px;background-color: #fff;overflow: hidden; white-space: nowrap;vertical-align: middle;}
.status.status-default{color: #888;}
.status.status-default:hover,
.status.status-default:focus{background-color: #fafafa;}
.status.status-default:active{background-color: #f5f5f5;}

.status.status-primary{color: #33cabb;border-color: #33cabb;}
.status.status-primary:hover,
.status.status-primary:focus{border-color: #52d3c7;}
.status.status-primary:active{border-color: #2ba99d;}

.status.status-success{color: #15c377;border-color: #15c377;}
.status.status-success:hover,
.status.status-success:focus{border-color: #16d17f;}
.status.status-success:active{border-color: #14b56f;}

.status.status-info{color: #48b0f7;border-color: #48b0f7;}
.status.status-info:hover,
.status.status-info:focus{border-color: #65bdf8;}
.status.status-info:active{border-color: #2ba3f6;}

.status.status-warning{color: #faa64b;border-color: #faa64b;}
.status.status-warning:hover,
.status.status-warning:focus{border-color: #fbb264;}
.status.status-warning:active{border-color: #f99a32;}

.status.status-danger{color: #f96868;border-color: #f96868;}
.status.status-danger:hover,
.status.status-danger:focus{border-color: #fa8181;}
.status.status-danger:active{border-color: #f84f4f;}

.status.status-secondary{color: #4d5259;border-color: #e4e7ea;}
.status.status-secondary:hover,
.status.status-secondary:focus{border-color: #edeff1;}
.status.status-secondary:active{border-color: #dbdfe3;}

.status.status-dark{color: #465161;border-color: #465161;}
.status.status-dark:hover,
.status.status-dark:focus{border-color: #515d70;}
.status.status-dark:active{border-color: #3b4552;}

.status.status-purple{color: #926dde;border-color: #926dde;}
.status.status-purple:hover,
.status.status-purple:focus{border-color: #a282e3;}
.status.status-purple:active{border-color: #8258d9;}

.status.status-pink{color: #f96197;border-color: #f96197;}
.status.status-pink:hover,
.status.status-pink:focus{border-color: #fa75a4;}
.status.status-pink:active{border-color: #f84d8a;}

.status.status-cyan{color: #57c7d4;border-color: #57c7d4;}
.status.status-cyan:hover,
.status.status-cyan:focus{border-color: #77d2dc;}
.status.status-cyan:active{border-color: #37bccc;}

.status.status-yellow{color: #fcc525;border-color: #fcc525;}
.status.status-yellow:hover,
.status.status-yellow:focus{border-color: #fdd04d;}
.status.status-yellow:active{border-color: #f5b703;}

.status.status-brown{color: #8d6658;border-color: #8d6658;}
.status.status-brown:hover,
.status.status-brown:focus{border-color: #9d7162;}
.status.status-brown:active{border-color: #7d5b4e;}

.status.status-link{color: #48b0f7;border-color: transparent;background-color: transparent;}
.status.status-link:hover,
.status.status-link:focus{background-color: transparent;border-color: transparent;}
.status.status-link:active{background-color: transparent;border-color: transparent;}

.status.status-1x{font-size: 12px;line-height: 18px;padding: 2px 5px;}
.status.status-2x{font-size: 13px;line-height: 20px;padding: 5px 10px;}
.status.status-3x{font-size: 14px;line-height: 22px;padding: 8px 15px;}
.status.status-4x{font-size: 15px;line-height: 24px;padding: 10px 20px;}
.status.status-5x{font-size: 16px;line-height: 28px;padding: 12px 24px;}


.btn{display: inline-block;color: #888;border: 1px solid #ddd;font-size: 13px;border-radius: 2px;line-height: 20px;background-color: #fff;outline: none;cursor: pointer;padding: 5px 10px;overflow: hidden; white-space: nowrap;vertical-align: middle;margin: 2px;}
.btn.disabled{cursor: no-drop;}
.btn.btn-default{color: #888;}
.btn.btn-default:hover,
.btn.btn-default:focus{background-color: #fafafa;}
.btn.btn-default:active{background-color: #f5f5f5;}

.btn.btn-primary{color: #fff;border-color: #33cabb;background-color: #33cabb;}
.btn.btn-primary:hover,
.btn.btn-primary:focus{background-color: #52d3c7;border-color: #52d3c7;}
.btn.btn-primary:active{background-color: #2ba99d;border-color: #2ba99d;}

.btn.btn-success{color: #fff;border-color: #15c377;background-color: #15c377;}
.btn.btn-success:hover,
.btn.btn-success:focus{background-color: #16d17f;border-color: #16d17f;}
.btn.btn-success:active{background-color: #14b56f;border-color: #14b56f;}

.btn.btn-info{color: #fff;border-color: #48b0f7;background-color: #48b0f7;}
.btn.btn-info:hover,
.btn.btn-info:focus{background-color: #65bdf8;border-color: #65bdf8;}
.btn.btn-info:active{background-color: #2ba3f6;border-color: #2ba3f6;}

.btn.btn-warning{color: #fff;border-color: #faa64b;background-color: #faa64b;}
.btn.btn-warning:hover,
.btn.btn-warning:focus{background-color: #fbb264;border-color: #fbb264;}
.btn.btn-warning:active{background-color: #f99a32;border-color: #f99a32;}

.btn.btn-danger{color: #fff;border-color: #f96868;background-color: #f96868;}
.btn.btn-danger:hover,
.btn.btn-danger:focus{background-color: #fa8181;border-color: #fa8181;}
.btn.btn-danger:active{background-color: #f84f4f;border-color: #f84f4f;}

.btn.btn-secondary{color: #4d5259;border-color: #e4e7ea;background-color: #e4e7ea;}
.btn.btn-secondary:hover,
.btn.btn-secondary:focus{background-color: #edeff1;border-color: #edeff1;}
.btn.btn-secondary:active{background-color: #dbdfe3;border-color: #dbdfe3;}

.btn.btn-dark{color: #fff;border-color: #465161;background-color: #465161;}
.btn.btn-dark:hover,
.btn.btn-dark:focus{background-color: #515d70;border-color: #515d70;}
.btn.btn-dark:active{background-color: #3b4552;border-color: #3b4552;}

.btn.btn-purple{color: #fff;border-color: #926dde;background-color: #926dde;}
.btn.btn-purple:hover,
.btn.btn-purple:focus{background-color: #a282e3;border-color: #a282e3;}
.btn.btn-purple:active{background-color: #8258d9;border-color: #8258d9;}

.btn.btn-pink{color: #fff;border-color: #f96197;background-color: #f96197;}
.btn.btn-pink:hover,
.btn.btn-pink:focus{background-color: #fa75a4;border-color: #fa75a4;}
.btn.btn-pink:active{background-color: #f84d8a;border-color: #f84d8a;}

.btn.btn-cyan{color: #fff;border-color: #57c7d4;background-color: #57c7d4;}
.btn.btn-cyan:hover,
.btn.btn-cyan:focus{background-color: #77d2dc;border-color: #77d2dc;}
.btn.btn-cyan:active{background-color: #37bccc;border-color: #37bccc;}

.btn.btn-yellow{color: #fff;border-color: #fcc525;background-color: #fcc525;}
.btn.btn-yellow:hover,
.btn.btn-yellow:focus{background-color: #fdd04d;border-color: #fdd04d;}
.btn.btn-yellow:active{background-color: #f5b703;border-color: #f5b703;}

.btn.btn-brown{color: #fff;border-color: #8d6658;background-color: #8d6658;}
.btn.btn-brown:hover,
.btn.btn-brown:focus{background-color: #9d7162;border-color: #9d7162;}
.btn.btn-brown:active{background-color: #7d5b4e;border-color: #7d5b4e;}

.btn.btn-link{color: #48b0f7;border-color: transparent;background-color: transparent;}
.btn.btn-link:hover,
.btn.btn-link:focus{background-color: transparent;border-color: transparent;}
.btn.btn-link:active{background-color: transparent;border-color: transparent;}

.btn.btn-1x{font-size: 12px;line-height: 18px;padding: 2px 5px;}
.btn.btn-2x{font-size: 13px;line-height: 20px;padding: 5px 10px;}
.btn.btn-3x{font-size: 14px;line-height: 22px;padding: 8px 15px;}
.btn.btn-4x{font-size: 15px;line-height: 24px;padding: 10px 20px;}
.btn.btn-5x{font-size: 16px;line-height: 28px;padding: 12px 24px;}

.form{background-color: #fff;padding: 0 0 30px 0;}
.form .form-header{border-bottom: 1px solid #ddd;display: flex;align-items: center;justify-content: space-between;padding: 20px;}
.form .form-header .header-title{font-size: 17px;color: #4d5259;}
.form .form-item{margin-bottom: 15px;padding: 0 40px;}
.form .form-item:last-child{margin-bottom: 0;}
.form .form-item .item-title{font-size: 14px;padding: 5px 0;color: #444;display: flex;align-items: center;position: relative;height: 40px;}
.form .form-item .item-title.item-must::before{content: '*';color: #e64340;font-size: inherit;font-weight: bold;height: inherit; padding-right: 3px; transform: translateY(calc(50% - 7px));}
.form .form-item .item-stratum{padding: 5px 0;}
.form .form-item .item-stratum input[type=text]{padding: 0 1em;border: 1px solid #ebebeb;height: 40px;box-sizing: border-box;outline: none;width: 100%;border-radius: 2px;transition: all .2s;}
.form .form-item .item-stratum input[type=number]{padding: 0 1em;border: 1px solid #ebebeb;height: 40px;box-sizing: border-box;outline: none;width: 100%;border-radius: 2px;transition: all .2s;}
.form .form-item .item-stratum input[type=file]{padding: 8px 1em;border: 1px solid #ebebeb;height: 40px;box-sizing: border-box;outline: none;width: 100%;border-radius: 2px;transition: all .2s;}
.form .form-item .item-stratum .focus{border-color: #48b0f7;box-shadow: 0 0 5px #48b0f7;}
.form .form-item .item-stratum input[type=text]:focus{border-color: #48b0f7;box-shadow: 0 0 5px #48b0f7;}
.form .form-item .item-stratum input[type=number]:focus{border-color: #48b0f7;box-shadow: 0 0 5px #48b0f7;}
.form .form-item .item-stratum .explain{font-size: 12px;color: #888;padding: 5px 0;}
.form .form-item .item-stratum textarea{padding: 1em;border: 1px solid #ebebeb;box-sizing: border-box;outline: none;width: 100%;resize: none;border-radius: 2px;font-size: 13px;}
.form .form-item .item-stratum textarea:focus{border-color: #48b0f7;box-shadow: 0 0 5px #48b0f7;}
.form .form-item .item-stratum .words{height: 40px;display: flex;align-items: center;justify-content: flex-start;font-size: 14px;}
.form .form-item .item-stratum .inp label{padding-right: 10px;}
.form .form-item .item-stratum .inp input[type=radio]{position: relative;margin-right: 10px;}
.form .form-item .item-stratum .inp input[type=radio]::before{content: '';display: block;width: 18px;height: 18px;border-radius: 50%;background-color: #fff;border: 2px solid #ddd;position: relative;top: -2px;left: -2px;box-sizing: border-box;}
.form .form-item .item-stratum .inp input[type=radio]:checked::before{content: '';display: block;width: 18px;height: 18px;border-radius: 50%;background-color: #fff;border: 5px solid #48b0f7;position: relative;top: -2px;left: -2px;box-sizing: border-box;}
.form .form-item .item-stratum .inp input[type=checkbox]{position: relative;margin-right: 10px;}
.form .form-item .item-stratum .inp input[type=checkbox]::before{content: '';display: block;width: 18px;height: 18px;border-radius: 2px;background-color: #fff;border: 2px solid #ddd;position: relative;top: -2px;left: -2px;box-sizing: border-box;}
.form .form-item .item-stratum .inp input[type=checkbox]:checked::before{content: '';display: block;width: 18px;height: 18px;border-radius: 2px;background-color: #fff;border: 2px solid #48b0f7;position: relative;top: -2px;left: -2px;box-sizing: border-box;}
.form .form-item .item-stratum .inp input[type=checkbox]:checked::after{content: '';display: block;width: 10px;height: 6px;border-left: 2px solid #48b0f7;border-bottom: 2px solid #48b0f7;position: absolute;top: 3px;left: 2px;box-sizing: border-box;transform: rotate(-45deg);}
.form .form-item .item-stratum .inp-inline{display: flex;align-items: center;justify-content: flex-start;}
.form .form-item .item-stratum select{padding: 0 1em;border: 1px solid #ebebeb;box-sizing: border-box;outline: none;width: 100%;resize: none;border-radius: 2px;height: 40px;transition: all .2s;}
.form .form-item .item-stratum select:focus{border-color: #48b0f7;box-shadow: 0 0 5px #48b0f7;}
.form .form-item .form-table{width: 100%;border-collapse: collapse;}
.form .form-item .form-table tr th{padding: 15px 10px;background-color: #fcfcfc;border: 1px solid #f2f2f2;border-bottom: 1px solid #ddd;font-size: 13px;color: #333;text-align: center;white-space:nowrap;}
.form .form-item .form-table tr td{padding: 8px 10px;background-color: #fff;border: 1px solid #f5f5f5;text-align: center;font-size: 13px;color: #333;}
.form .form-item .form-table tr td.data-null{padding: 20px;text-align: center;color: #888;}
.form .form-item .form-table input[type=number],
.form .form-item .form-table input[type=text]{width: 100%;height: 24px;background-color: transparent;border: none;text-align: center;outline: none;}
.form .form-item .form-table input[type=date]{width: 100%;height: 24px;background-color: transparent;border: none;text-align: center;outline: none;}
.form .form-item .form-table select{width: auto;height: 24px;background-color: transparent;border: none;text-align: center;outline: none;}

.form.form-grid .form-items{display: flex;justify-content: flex-start;flex-wrap: wrap;padding: 40px 80px 40px 40px;border-top: 1px solid #eee;}
.form.form-grid .form-items:first-child{border-top: none;}
.form.form-grid .form-items .form-item{display: flex;align-items: flex-start;padding: 0 20px;box-sizing: border-box;}
.form.form-grid .form-items .form-item .item-title{justify-content: flex-end;}
.form.form-grid .form-items .form-item .item-title.item-must::before{content: '*';color: #e64340;font-size: inherit;}
.form.form-grid .form-items .form-item:last-child{margin-bottom: 15px;}
.form.form-grid .form-items .form-item.form-col-1x{width: 8.333333333333333%;}
.form.form-grid .form-items .form-item.form-col-2x{width: 16.66666666666667%;}
.form.form-grid .form-items .form-item.form-col-3x{width: 25%;}
.form.form-grid .form-items .form-item.form-col-4x{width: 33.33333333333333%;}
.form.form-grid .form-items .form-item.form-col-5x{width: 41.66666666666667%;}
.form.form-grid .form-items .form-item.form-col-6x{width: 50%;}
.form.form-grid .form-items .form-item.form-col-7x{width: 58.33333333333333%;}
.form.form-grid .form-items .form-item.form-col-8x{width: 66.66666666666667%;}
.form.form-grid .form-items .form-item.form-col-9x{width: 75%;}
.form.form-grid .form-items .form-item.form-col-10x{width: 83.33333333333333%;}
.form.form-grid .form-items .form-item.form-col-11x{width: 91.66666666666667%;}
.form.form-grid .form-items .form-item.form-col-12x{width: 100%;}
.form.form-grid .form-items .form-item.form-item-column{flex-direction: column;}
.form.form-grid .form-items .form-item .item-title{width: 100px;box-sizing: border-box;padding: 0 15px;}
.form.form-grid .form-items .form-item .item-stratum{flex: 1;padding: 0;}
.form.form-grid .form-items .form-item.form-item-column .item-title,
.form.form-grid .form-items .form-item.form-item-column .item-stratum {width: 100%;}

.tags-element-layer{border: 1px solid #ebebeb;height: 40px;display: flex;align-items: center;padding: 0 1em;}
.tags-element-layer .tags-list-layer{display: flex;align-items: center;}
.tags-element-layer .tags-list-layer .tags-item{background-color: #48b0f7;color: #fff;padding: 2px 10px;margin-right: 10px;border-radius: 2px;cursor: pointer;}
.tags-element-layer .tags-list-layer .tags-item i{font-style: normal;padding: 0 0 0 10px;}
.tags-element-layer .tags-input{border: none;outline: none;height: 40px;}

.image-list-layer{padding: 0;display: flex;align-items: center;flex-wrap: wrap;margin: 0 -10px -10px 0;}
.image-list-layer .image-layer{border: 1px dashed #48b0f7;min-width: 100px;max-width: none;height: 100px;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;cursor: pointer;position: relative;top: 0;margin: 0 10px 10px 0;box-shadow: 0 0 5px rgba(204, 181, 247, .2);overflow: hidden;transition: all .2s;}
.image-list-layer .image-layer:hover{box-shadow: 0 0 5px rgba(204, 181, 247, .8);}
.image-list-layer .image-layer[image-status=icon]{border-color: #48b0f7;}
.image-list-layer .image-layer[image-status=image]{border-color: #48b0f7;}
.image-list-layer .image-layer[image-status=image]:hover{top: -5px;box-shadow: 0 5px 10px rgba(204, 181, 247, .2);}
.image-list-layer .image-layer::before{content: '+';display: inline-block;font-size: 30px;color: #48b0f7;}
.image-list-layer .image-layer[image-status=icon]::before{display: block;}
.image-list-layer .image-layer[image-status=image]::before{display: none;}
.image-list-layer .image-layer .image-show{display: flex;align-items: center;justify-content: center;background-color: #fff;height: 100px;}
.image-list-layer .image-layer .image-show img{max-width: 100%;max-height: 100%;}
.image-list-layer .image-layer .image-delete{position: absolute;top: 0;right: 10px;width: 20px;height: 20px;background-color: #e64340;border-radius: 50%;line-height: 20px;text-align: center;color: #fff;box-shadow: 0 0 5px #888;font-size: 12px;}

.region-layer{width: 900px;height: 400px;border: 1px solid #eee;display: flex;justify-content: flex-start;position: relative;top: 10px;}
.region-layer .region-item{width: 300px;height: inherit;border-right: 1px solid #eee; display: flex; flex-direction: column;}
.region-layer .region-item:last-child{border-right: none;}
.region-layer .region-item .item-title{background-color: #fafafa;text-align: center;font-size: 15px;padding: 10px 0;border-bottom: 1px solid #eee;}
.region-layer .region-item .lists{padding: 0;box-sizing: border-box;overflow-y: scroll; flex: 1;}
.region-layer .region-item .lists .list-item{padding: 10px 20px;font-size: 15px;color: #333;cursor: pointer;border-bottom: 1px solid #fafafa;}
.region-layer .region-item .lists .list-item:hover{background-color: rgba(0, 153, 255, .1);}
.region-layer .region-item .lists .list-item.active{background-color: rgba(0, 153, 255, .1);}

/* record details style start */
.msx-details{background-color: #fff;padding: 0 0 30px 0;}
.msx-details .msx-details-header{border-bottom: 1px solid #ddd;display: flex;align-items: center;justify-content: space-between;padding: 20px;}
.msx-details .msx-details-header .header-title{font-size: 17px;color: #4d5259;}
.msx-details .msx-details-main{padding: 30px;}
.msx-details .msx-details-main .details-lists{display: flex;align-items: center;justify-content: flex-start;flex-wrap: wrap;}
.msx-details .msx-details-main .details-lists .details-lists-item{width: auto;font-size: 15px;padding: 10px;color: #333;box-sizing: border-box;display: flex;align-items: center;justify-content: flex-start;}
.msx-details .msx-details-main .details-lists .details-lists-item .item-title{font-size: 13px;color: #888;}
.msx-details .msx-details-main .details-lists .details-lists-item .item-value{font-size: 14px;color: #333;padding: 0 1rem;}
.msx-details .msx-details-main .details-lists .item-col-1x{width: 8.333333333333333%;}
.msx-details .msx-details-main .details-lists .item-col-2x{width: 16.66666666666667%;}
.msx-details .msx-details-main .details-lists .item-col-3x{width: 25%;}
.msx-details .msx-details-main .details-lists .item-col-4x{width: 33.33333333333333%;}
.msx-details .msx-details-main .details-lists .item-col-5x{width: 41.66666666666667%;}
.msx-details .msx-details-main .details-lists .item-col-6x{width: 50%;}
.msx-details .msx-details-main .details-lists .item-col-7x{width: 58.33333333333333%;}
.msx-details .msx-details-main .details-lists .item-col-8x{width: 66.66666666666667%;}
.msx-details .msx-details-main .details-lists .item-col-9x{width: 75%;}
.msx-details .msx-details-main .details-lists .item-col-10x{width: 83.33333333333333%;}
.msx-details .msx-details-main .details-lists .item-col-11x{width: 91.66666666666667%;}
.msx-details .msx-details-main .details-lists .item-col-12x{width: 100%;}
.msx-details .msx-details-main .details-table{padding: 20px 0px;}
.msx-details .msx-details-main .details-table table{width: 100%;border-top: 1px solid #eee;border-collapse: collapse;}
.msx-details .msx-details-main .details-table table tr th,
.msx-details .msx-details-main .details-table table tr td{border: 1px solid #fafafa;text-align: center;}
.msx-details .msx-details-main .details-table table tr th{border-bottom: 1px solid #eee;padding: 15px;color: #666;font-size: 14px;}
.msx-details .msx-details-main .details-table table tr td{font-size: 13px;padding: 10px;}
.msx-details .msx-details-main .details-table table tr td input[type=text],
.msx-details .msx-details-main .details-table table tr td input[type=number]{outline: none;border: 1px solid #eee;height: 24px;vertical-align: top;padding: 0 10px;box-sizing: border-box;}
.msx-details .msx-details-main .details-search{display: flex;align-items: center;justify-content: flex-start;flex-wrap: wrap;padding: 10px;background-color: rgba(0, 153, 0, .02);}
.msx-details .msx-details-main .details-search .search-item{margin: 5px;display: flex;align-items: center;font-size: 13px;}
.msx-details .msx-details-main .details-search .search-item .item-title{width: 70px; text-align: right;}
.msx-details .msx-details-main .details-search .search-item .item-input{height: 32px;box-sizing: border-box;min-width: 240px;}
.msx-details .msx-details-main .details-search .search-item .item-input input{height: inherit;width: 100%;outline: none;padding: 0 1em;border: 1px solid #ddd;transition: all .2s;border-radius: 2px;box-sizing: border-box;}
.msx-details .msx-details-main .details-search .search-item .item-input input:focus{border-color: #48b0f7;box-shadow: 0 0 5px #48b0f7;}
.msx-details .msx-details-main .details-search .search-item .item-input select{height: inherit;width: 100%;box-sizing: border-box;outline: none;padding: 0 1em;border: 1px solid #ddd;transition: all .2s;border-radius: 2px;}
.msx-details .msx-details-main .details-search .search-item .item-input select:focus{border-color: #48b0f7;box-shadow: 0 0 5px #48b0f7;}

/* record details style end */

/* 地图 */
.msx-map{width: 100%; height: 600px; position: relative; overflow: hidden;display: block; box-shadow: 0 0 4px #eee;}
.msx-map #map-container {width: 100%;height: 100%;}
.msx-map .operation{position: absolute;top: 30px;left: 30px;width: 300px;z-index: 111110; background: #fff; border-radius: 2px; padding: 10px; box-sizing: border-box; display: flex; align-items: center; box-shadow: 0 0 4px #eee;}
.msx-map .operation input{flex: 1; height: 100%; border: none; outline: none; font-size: 14px; color: #666; background: transparent;}
.msx-map .operation input::placeholder{font-size: 14px; color: #666;}
.msx-map .operation span{font-size: 18px; color: #999; border-left: 1px solid #ccc; margin-left: 10px; font-weight: normal; padding-left: 10px; box-sizing: border-box; cursor: pointer;}

/* 步进器 */
.process{padding: 60px 0;margin-bottom: 15px;display: flex;justify-content: center; background: #fafafa;}
.process .content{display: flex;}
.process .content .item-process{font-size: 15px;display: flex;align-items: center;position: relative;margin-left: 150px; cursor: pointer;}
.process .content .item-process:first-child{margin: 0;}
.process .content .item-process::before{content: '';position: absolute;top: auto;left: -135px;width: 120px;height: 3px;background-color: #ddd;z-index: 0; border-radius: 3px;}
.process .content .item-process:first-child::before{content: none;}
.process .content .item-process .number{width: 32px;height: 32px;text-align: center;border-radius: 50%;margin-right: 5px;font-size: 13px;color: #FFF;background: #aaa;display: flex;align-items: center;justify-content: center;}
.process .content .item-process .text{color: #666;}
.process .content .item-process.active .number{background: #48b0f7 !important;}
.process .content .item-process.active .text{color: #48b0f7;}
.process .content .item-process.active::before{background: #48b0f7;}
.process .content .line>div{width: 100%;border-top:1px solid #ccc;}

/* 老版搜索条件样式 */
.search-main{padding: 20px 20px 0 20px;background: #FFF;margin-bottom: 10px;font-size: 14px;color: #666;display: flex;flex-wrap: wrap;}
.search-main .search-clm{margin-right: 20px;margin-bottom: 20px;}
.search-main input{color: #555;}
.search-main .search-clm input{height: 30px;border: 1px solid #ccc;outline: none;text-indent: 1em;width: 180px;}
.search-main .search-clm select{width: 120px;outline: none;height: 32px;border: 1px solid #ccc;color: #444;}

[control=process-block]{display: none !important;}
[control=process-block].active{display: block !important;}
[control=process-block].form-items.active{display: flex !important;}

/* 下拉选框 */
.select-rewrite{border:1px solid #ebebeb;position: relative;user-select: none;box-sizing: border-box;border-radius: 2px;}
.select-rewrite.open{border-color: #48b0f7;box-shadow: 0 0 5px #48b0f7;}
.select-rewrite.open .input-div .symbol-span{transform: rotate(180deg);}
.select-rewrite.open .option-pack{display: block;}
.select-rewrite.disabled {cursor: no-drop;}
.select-rewrite.disabled .input-div{cursor: no-drop;}
.select-rewrite.disabled .input-div input{cursor: no-drop;}

.select-rewrite .input-div{display: flex;align-items: center;cursor: pointer;position: relative;width: 100%;height: 100%;}
.select-rewrite .input-div .symbol-span{height: 10px;width: 10px;position: absolute;right: 10px;top: calc(50% - 5px);display: flex;justify-content: center;align-items: center;transition: all .3s;}
.select-rewrite .input-div .symbol-span:after{content: " ";display: inline-block;height: 6px;width: 6px;border-width: 2px 2px 0 0;border-color: #aaa;border-style: solid;transform: rotate(135deg);transition: all 3s;}
.select-rewrite .input-div input{border: 0 !important;cursor: pointer;font-size: 13px;color: #454545;user-select: none;opacity: 0;position: absolute;width: 100%;height: 100%;border-radius: 2px;}
.select-rewrite .input-div span.text{font-size: 14px;color: #ccc;margin-left: 1em;}
.select-rewrite .input-div span.text.active{color: #666;}

.select-rewrite .option-pack{width: 100%;max-height: 350px;box-sizing: border-box;overflow: hidden;overflow-y: auto;background: #fff;border:1px solid #ccc;padding: 5px 0;border-radius: 3px;display: none;position: relative; top: 5px;z-index: 9999;}
.select-rewrite .option-pack .option-list{width: 100%;color: #555;font-size: 12px;}
.select-rewrite .option-pack ul li{padding: 5px 15px;cursor: pointer;}
.select-rewrite .option-pack ul li.disabled {background-color: #f5f7fa;cursor: no-drop;}
.select-rewrite .option-pack ul li:hover{background: #f5f7fa;}
.select-rewrite .option-pack ul li.disabled:hover{background-color: #f5f7fa;}
.select-rewrite .option-pack ul li.active{background: #1890ff;color: #fff;}

[msx=msx-popup]{position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 999;display: none;align-items: center;justify-content: center;}
[msx=msx-popup].show{display: flex;}
[msx=msx-popup].show .msx-popup-layer{-webkit-animation: animationPopIn .4s;animation: animationPopIn .4s;}
[msx=msx-popup] .msx-popup-mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 8;background-color: rgba(0, 0, 0, .2);}
[msx=msx-popup] .msx-popup-layer{width: 900px;height: 600px;background-color: #ffff;position: relative;z-index: 9;border-radius: 5px;overflow: hidden;display: flex;flex-direction: column;}
[msx=msx-popup] .msx-popup-layer .popup-layer-header{background-color: #fafafa;height: 50px;display: flex;align-items: center;padding: 0 15px;border-bottom: 1px solid #eee;box-sizing: border-box;}
[msx=msx-popup] .msx-popup-layer .popup-layer-header .popup-layer-header-title{color: #333;font-size: 14px;}
[msx=msx-popup] .msx-popup-layer .popup-layer-header .popup-layer-header-close{width: 50px;height: 50px;position: absolute;top: 0;right: 0;display: flex;align-items: center;justify-content: center;cursor: pointer;}
[msx=msx-popup] .msx-popup-layer .popup-layer-header .popup-layer-header-close::before{content: '';width: 18px;height: 2px;display: block;position: absolute;background-color: #666;transform: rotate(45deg);border-radius: 10px;}
[msx=msx-popup] .msx-popup-layer .popup-layer-header .popup-layer-header-close::after{content: '';width: 18px;height: 2px;display: block;position: absolute;background-color: #666;transform: rotate(135deg);border-radius: 10px;}
[msx=msx-popup] .msx-popup-layer .popup-layer-main{flex: 1;overflow-y: auto;padding: 10px;box-sizing: border-box;}
[msx=msx-popup] .msx-popup-layer .popup-layer-main .popup-table{width: 100%;border-collapse:collapse;color: #4d5259;box-sizing: border-box;}
[msx=msx-popup] .msx-popup-layer .popup-layer-main .popup-table tr th,
[msx=msx-popup] .msx-popup-layer .popup-layer-main .popup-table tr td{text-align: center;border: 1px solid #fafafa;}
[msx=msx-popup] .msx-popup-layer .popup-layer-main .popup-table tr th{font-size: 13px;padding: 12px 1em;border-bottom: 1px solid #eee;box-sizing: border-box;background-color: #fdfdfd;}
[msx=msx-popup] .msx-popup-layer .popup-layer-main .popup-table tr td{font-size: 13px;padding: 10px 1em;box-sizing: border-box;}
[msx=msx-popup] .msx-popup-layer .popup-layer-main .popup-layer-input input{width: 100%;height: 40px;box-sizing: border-box;border: 1px solid #eee;border-radius: 2px;padding: 0 1em;outline: none;}
[msx=msx-popup] .msx-popup-layer .popup-layer-main .popup-layer-input textarea{width: 100%;height: 200px;box-sizing: border-box;border: 1px solid #eee;border-radius: 2px;padding: 1em;outline: none;}
[msx=msx-popup] .msx-popup-layer .popup-layer-main .popup-layer-button{padding: 10px 0 0 0;}

@-webkit-keyframes animationPopIn { 0% {-webkit-transform: scale3d(0, 0, 0);transform: scale3d(0.5, 0.5, 0.5);opacity: 0;} 50% {-webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);} 100% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);-webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);opacity: 1;} }
@keyframes animationPopIn { 0% {-webkit-transform: scale3d(0, 0, 0);transform: scale3d(0.5, 0.5, 0.5);opacity: 0;} 50% {-webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);} 100% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);-webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);opacity: 1;} }