KN_CAMP_SOFTWARE_TEST/Code/智慧营区/MHManageAPP/OA/CarMap/style0712.css

*{margin: 0;padding: 0;border: none;text-decoration: none;list-style: none;}
body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";position: relative;}
.am-flexbox[am-mode~=average] .am-flexbox-item{width:100%}
.am-flexbox{display:-webkit-box;display:-webkit-flex;-webkit-box-align:center;-webkit-align-items:center}.am-flexbox .am-flexbox-item{-webkit-box-sizing:border-box;-webkit-box-flex:1;-webkit-flex:1;margin-left:15px;min-width:20px}.am-flexbox .am-flexbox-item:first-child{margin-left:0}

.img-responsive> a > img {display: block;max-width: 100%; height: auto;}
.center-block {display: block; margin-right: auto; margin-left: auto;}
.text-center{text-align: center;}
.clear{clear: both;}

.mainbox{width: calc(100% - 2px);width: -moz-calc(100% - 2px);width: -webkit-calc(100% - 2px);height: calc(100% - 2px);height: -moz-calc(100% - 2px);height: -webkit-calc(100% - 2px);float: left;position: relative;}
#allmap{width:100%;height: 100%;position: absolute;top:0;border: 1px solid #e2e2e2;}
.mainbox .mainfootbox{width:50%;height:0;position: absolute;bottom:16px;z-index: 100;}
.mainfootbox ul.tab01{height:40px;position: absolute;bottom:-17px;}
.mainfootbox ul.click{bottom:30%;}
.mainfootbox ul li{line-height:40px;padding:0 15px;background:#e2e2e2;float:left;cursor:pointer; position:relative;border-right:1px solid #eee;}
.mainfootbox ul li:last-child{border-right: 0;}
.mainfootbox ul li:hover{ background:rgba(48,119,217,0.3); color: #153ce4;}
.mainfootbox ul li.one{ background:#153ce4;color: #fff;}
.mainfootbox .mainfootcon{width:calc(100% + 22px);width:-moz-calc(100% + 22px);width:-webkit-calc(100% + 22px);height: calc(100% - 54px);height:-moz-calc(100% - 54px);height:-webkit-calc(100% - 54px);padding:10px;border:1px solid #e2e2e2;overflow: auto;padding-bottom: 20px;background: rgba(255,255,255,0.9);display: none;}
/*.mainfootbox .mainfootcon:hover,.mainfootbox .mainfootcon:focus{background: rgba(255,255,255,0.5);}*/
.mainfootbox .mainfootcon.click{display: block;}
.mainfootbox .mainfootcon h4{position: relative;height: 36px;line-height: 36px;padding: 5px 0 5px 30px;font-size: 18px;border-bottom: 1px solid #e2e2e2;}
.mainfootbox .mainfootcon h4 .titlable{width: 4px; height: 20px;background: #153ce4;position: absolute;top:15px;left: 15px;}
.mainfootcon .table01{width: calc(50% - 31px);width: -moz-calc(50% - 31px);width: -webkit-calc(50% - 31px);float: left;padding: 0 15px;}
.mainfootcon .table01:first-child{padding-left: 0;}
.table01 table{border-collapse:collapse;border: 1px solid #e2e2e2;border-top: none;}
.table01,table,.table01 tr{width: 100%;}
.table01 tr td{padding: 8px 10px;}
.table01 tr td:first-child{padding-left: 15px;text-align: right;width: 80px;border-right: 1px solid #e2e2e2;}
.tdwidthauto tr td:first-child{width:auto !important;text-align: center;}
.table01 tr:nth-child(2n){background: rgba(48,119,217,0.3);}
.table02{width: 100%;}
.table02 table{border-collapse:collapse;border:1px solid #e2e2e2;margin: 15px 0;}
.table02 .slt{width: 300px;float: left;}
.table02 tr td{padding: 8px 10px;border-right: 1px solid #e2e2e2;min-width: 100px;}
.table02 tr td:last-child{border-right:none;}
.table02 tr:nth-child(2n){background: rgba(48,119,217,0.3);}
.table02 .jjmc{padding-left: 320px;padding-top: 20px;}
.table02 .btnzu{padding: 20px 0;}
.table02 .btnzu .btn-dxdt{width: 70%;margin: 0 15%;padding: 10px 10px;background: rgba(48,119,217,0.3);border-radius: 5px;cursor: pointer;}
.table02 .btnzu .btn-dxdt:hover{background: rgba(48,119,217,0.5);}


.mainfootbox02{width:calc(100% - 30px);width:-moz-calc(100% - 30px);width:-webkit-calc(100% - 30px); height: calc(100% - 50px);height: -moz-calc(100% - 50px);height: -webkit-calc(100% - 50px);position: absolute;margin-top: 20px;overflow: auto;}
.mainfootbox02 ul.tab02{height:40px;width: 380px; margin: 0 auto;}
.mainfootbox02 ul.tab02 li{line-height:40px;padding:0 15px;background:#e2e2e2;float:left;cursor:pointer; position:relative;margin:0 10px 30px;border-radius: 5px;}
.mainfootbox02 ul.tab02 li:last-child{border-right: 0;}
.mainfootbox02 ul.tab02 li:hover{background:rgba(48,119,217,0.3); color: #153ce4;}
.mainfootbox02 ul.tab02 li.one02{background:rgba(48,119,217,0.5);color: #fff;}
.mainfootbox02 .mainfootcon02{width:calc(100% - 30px);width:-moz-calc(100% - 30px);width:-webkit-calc(100% - 30px);padding:10px;height:auto;}
.mainfootbox02 .mainfootcon02 .hhh3{width: 100%;padding: 5px 0;background: #e2e2e2;}
.mainfootbox02 .mainfootcon02 .table01{width: 100%;}
.mainfootbox02 .mainfootcon02 .table01 tr{padding: 8px 10px;height: 36px;}
.mainfootbox02 .mainfootcon02 .list000{margin-bottom: 20px;}
.mainfootcon02 .cxk01{border: 1px solid #e2e2e2;height: 40px;}
.mainfootcon02 .cxk01 .div0001{border-right: 1px solid #e2e2e2;width: 200px;}
.mainfootcon02 h5{font-size: 16px;font-weight: normal;margin: 20px 0 10px;}
.mainfootcon02 .cxk01 select{width:200px;height: 38px;padding: 0 15px;color: #1b1b1b;}
.mainfootcon02 .cxk01 input{width:100%;background: transparent;}
.mainfootcon02 .cxk01 span{position: absolute;right:15px;}
.mainfootcon02 .cxk01 .btn-ss{padding: 0 20px;background: rgba(48,119,217,0.5);height: 40px;}
.mainfootcon02 .cxk01 .btn-ss img{width: 20px;}
.mainfootcon02 .cxk01 .div0001 input{width:calc(100% - 15px);width:-moz-calc(100% - 15px);width:-webkit-calc(100% - 15px);padding-left: 15px;}

.mainfootbox03{width:calc(100% - 30px);width:-moz-calc(100% - 30px);width:-webkit-calc(100% - 30px); height: calc(100% - 50px);height: -moz-calc(100% - 50px);height: -webkit-calc(100% - 50px);position: absolute;margin-top: 20px;overflow: auto;}
.mainfootbox03 ul.tab03{height:40px;width: 380px; margin: 0 auto;}
.mainfootbox03 ul.tab03 li{line-height:40px;padding:0 15px;background:#e2e2e2;float:left;cursor:pointer; position:relative;margin:0 10px 30px;border-radius: 5px;}
.mainfootbox03 ul.tab03 li:last-child{border-right: 0;}
.mainfootbox03 ul.tab03 li:hover{background:rgba(48,119,217,0.3); color: #153ce4;}
.mainfootbox03 ul.tab03 li.one03{background:rgba(48,119,217,0.5);color: #fff;}
.mainfootbox03 .mainfootcon03{width:calc(100% - 30px);width:-moz-calc(100% - 30px);width:-webkit-calc(100% - 30px);padding:10px;height:auto;}
.mainfootbox03 .mainfootcon03 .hhh3{width: 100%;padding: 5px 0;background: #e2e2e2;}
.mainfootbox03 .mainfootcon03 .table01{width: 100%;}
.mainfootbox03 .mainfootcon03 .table01 tr{padding: 8px 10px;height: 36px;}
.mainfootbox03 .table01 tr td{border-right: 1px solid #e2e2e2;}
.mainfootbox03 .table01 tr td:last-child{border-right:0;}
.mainfootcon03 td{text-align: center;}
.footerliclick{clear:bottom;top:0 !important;z-index: -1;}
.footerboxclick{display: block !important;bottom: -18px !important;position: absolute;}
.mainfootbox_show{height: 70% !important;}


/*.rightbox-mhws{width: 280px;height:calc(100% - 32px);height:-moz-calc(100% - 32px);height:-webkit-calc(100% - 32px);border:1px solid #e2e2e2;position: absolute;right:15px;z-index: 100;background: rgba(255,255,255,0.35);}*/
/*.rightbox-mhws:hover,.rightbox-mhws:focus{background: rgba(255,255,255,0.5);}*/
.rightbox-mhws h3{position: relative;height: 36px;line-height: 36px;padding: 5px 0 5px 30px;font-size: 18px;background: rgba(255,255,255,0.9);}


.accordion { width: 280px;border:1px solid #e2e2e2;position: absolute;right:15px;z-index: 100;background: rgba(255,255,255,0.35);max-height: calc(100% - 80px);overflow: auto;}

.accordion .maplink {cursor: pointer;display: block;
    border-bottom: 1px solid #CCC;
    position: relative;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.rightbox-mhws .titlable{width: 4px; height: 20px;background: #153ce4;position: absolute;top:15px;left: 15px;}
.customers{ width:100%;background: rgba(255,255,255,0.9);border-collapse:collapse;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;}
table.customers tr:nth-child(2n) td{color:#1b1b1b; background-color:rgba(48,119,217,0.3);width: 50%;}
.accordion li:first-child table.customers{border-bottom:1px solid #e2e2e2;}
.customers td,.customers th{padding:8px 10px;text-align: center;height: 30px;line-height: 30px;}
.customers .newinfo td{color:red !important; }
.customers .newinfo td:first-child{text-align: left;}
.tixinggif{width: 26px;float: left;margin-right: 10px;}
.customers th{padding:6px 10px;background:#153ce4;color:#fff;}
/*.customers tr.alt td{color:#1b1b1b; background-color:rgba(48,119,217,0.3);width: 50%;}*/
.customers tr td:first-child{ border-right:1px solid #e2e2e2;}


.accordion li i.icon-down-trangle-copy {position:absolute;right: 15px;top:8px; font-size: 14px;
    -webkit-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;}


.accordion li.open i {color: #153ce4;}
.accordion li.open i.icon-down-trangle-copy {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.submenu{display: none;opacity: 0;
    -webkit-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;}

.accordion li.open .submenu{opacity: 1;}

.icon-xiaofangzhan{position: absolute;top:30px;left: 30px;}
.icon-xiaofangzhan button{display: inline-block;position: relative;padding: 15px 20px 15px 45px;background: rgba(21,60,228,0.75);color: #fff;cursor: pointer;border-radius: 3px;}
.icon-xiaofangzhan button:hover{background: rgba(21,60,228,0.9);}
.icon-xiaofangzhan button i{position: absolute;left: 10px;top:7px;font-size:30px;line-height: 36px;color: #fff;}
.icon-xiaofangzhan:before{display: none;}


.imghjbox{width: 100%;padding: 0;}
.imghuojing{width: auto;min-width:100%;overflow-x: auto;margin: 20px 0;}
.imghuojing img{width:31%;margin-right: 2%;margin-bottom:10px;display: inline-block;}
.imghuojing img:nth-child(3n){margin-right: 0;}





/*左上按钮组*/
.bar {
    display: block;
    width: 40px;
    height: 5px;
    margin: 5px auto;
    background-color: #fff;
    border-radius: 2px;
    transition: all 0.4s linear 0.1s;
    -webkit-transition: all 0.4s linear 0.1s;
    -moz-transition: all 0.4s linear 0.1s;
    -o-transition: all 0.4s linear 0.1s;
    -ms-transition: all 0.4s linear 0.1s;
}
.bar:first-child {
    margin-top: 27px;
}

.btnwrap {
    position: absolute;
    top: 20px;
    left: 20px;
    margin: auto;
    width: 150px;
    height: 100px;
    filter: url("../index.html/#filt");
    -webkit-filter: url("#filt");
}
.btnwrap .blob {
    display: block;
    cursor: pointer;
    border: none;
    outline: none;
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 0;
    z-index: -9999999;
    /*background-color: #153ce4;*/
    /*box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.3) inset;*/
    /*-webkit-box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.3) inset;*/
    /*-moz-box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.3) inset;*/
    /*-o-box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.3) inset;*/
    /*-ms-box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.3) inset;*/
}

.btnwrap .blob[for="checking"] {
    z-index: 30;
    font-size: 60px;
    text-align: center;
    color: #fff;
    transition: transform 0.5s ease-in-out 0.2s;
    -webkit-transition: -webkit-transform 0.5s ease-in-out 0.2s;
    -moz-transition: transform 0.5s ease-in-out 0.2s;
    -o-transition: transform 0.5s ease-in-out 0.2s;
    -ms-transition: transform 0.5s ease-in-out 0.2s;
}

.btnwrap .blob:not([for="checking"]) {
    width:120px;padding-left: 30px;border-bottom: 1px solid #e8e8e8;
    height: 80px;
    top: 0;
    left: 0;
    opacity:0;
    font-size: 14px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
}

.btnwrap .blob i{
    font-size: 30px;
    position: absolute;
    top:20px;left: 10px;
}



.blob.clicked{background: #3976ff;color: #fff;}

.btnwrap > #checking:checked ~ .blob:nth-child(2) {
    margin-left: 85px;
    margin-top: 0;
    /*background-color: #fff;*/
    opacity: 1;z-index: 100000;
}
.btnwrap > #checking:checked ~ .blob:nth-child(3) {
    margin-top:  80px;
    margin-left: 85px;
    /*background-color: #fff;*/
    opacity: 1;z-index: 100000;
}

.btnwrap > #checking:checked ~ .blob:nth-child(4) {
    margin-top: 160px;
    margin-left: 85px;
   /*background-color: #fff;*/
   opacity: 1;z-index: 100000;
}
.btnwrap > #checking:checked ~ .blob:nth-child(5) {
    margin-top: 240px;
    margin-left: 85px;
    /*background-color: #fff;*/
    opacity: 1;z-index: 100000;
}
.btnwrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(1) {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    margin-top: 37px;
}
.btnwrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(2) {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    margin-top: -10px;
}
.btnwrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(3) {
    opacity: 0;
}
.btnwrap > #checking:checked ~ .blob[for="checking"] > .bar:nth-child(4) {
    opacity: 0;
}
.btnwrap .blob:not([for="checking"]):hover {
    color: #3976ff;
    animation: harlem 0.5s linear forwards;
    -webkit-animation: harlem 0.5s linear forwards;
    -moz-animation: harlem 0.5s linear forwards;
    -o-animation: harlem 0.5s linear forwards;
    -ms-animation: harlem 0.5s linear forwards;
    opacity:1;
}


/*地图自定义信息框*/
.mapModel{background: #fff;border: 1px solid #ccc;padding: 20px;min-width:400px;max-width: 600px;}
.mapModel .am-flexbox{position: relative;}
.mapModel .am-flexbox .modelimg{width: 160px;height: 120px;}
.mapModel .am-flexbox .modelimg img{width: 100%;height: 120px;}
.mapModel .am-flexbox .am-flexbox-item{margin-left:10px;margin-top: -25px;height: 95px;overflow-y: auto;}
.mapModel .am-flexbox .am-flexbox-item h3{font-size: 16px;margin-bottom: 10px;}
.mapModel .am-flexbox .am-flexbox-item .modelp{font-size: 14px;color: #666;}
.mapModel .am-flexbox .am-flexbox-item .modelmore{position:absolute;bottom:0;right:0;font-size: 14px;cursor: pointer;}
.mapModel .jiao{position: absolute;bottom:-20px;right:30px;}
.mapModel .jiao img{height: 20px;}
.mapModel .btnclosse{position: absolute;right: -8px;top:-8px;color: #666;}



.tableabc{width: 100%;margin: 15px 0;}
.tableabc .hhh3{width: 100%;padding: 5px 0;background: #e2e2e2;}
.tableabc tr{padding: 8px 10px;height: 36px;}
.tableabc tr td{border-right: 1px solid #e2e2e2;}
.tableabc tr td:last-child{border-right:0;}
.tableabc td{text-align: center;}