body, html { height: 100%; min-height: 100%; position: relative }
body { font-family: arial, microsoft yahei; font-family: microsoft yahei, arial\0/; color: #fff; font-size: 14px; background: #001c4d !important; overflow: hidden }

h1,h2,h3,h4,h5,h6{ margin:0; font-weight:bold}
p{ margin:0}
a{ color:#318fff}
a:hover{ color:#fff}
.row{ margin:0 -0.75rem}
.panel{ border-radius:8px} 

/*button*/
.btn{ background:linear-gradient(to right, #002884, #0052ca); border-radius:8px; font-weight:bold; font-size:16px; line-height:48px; height:48px; box-shadow:none}
.btn:hover{ background:linear-gradient(to right, #002884, #0052ca)}
.btn:not(.btn-small){ min-width:120px}
.btn i{ vertical-align:top}
.btn-default{ background:linear-gradient(to bottom, rgba(0,46,152,0), rgba(0,46,152,0.5)); border:1px solid rgba(6,120,253,.5)}
.btn-success,
.btn-success:hover{ background:linear-gradient(to right, #01781d, #09b431)}
.btn-warning,
.btn-warning:hover { background: linear-gradient(to right, #f68015, #f69b48)}
.btn-small{ height:32px; line-height:32px; font-size:14px; font-weight:normal}
.btn-radius{ border-radius:30px}
.btn-large { height:60px; line-height:60px; font-size:18px}

/*icon*/
.icon{ display:inline-block; width:40px; height:40px; background-repeat:no-repeat; background-size:contain; vertical-align:middle}
.icon-town{ background-image:url(images/brand//icon-town.png)}
.icon-rural{ background-image:url(images/brand//icon-rural.png)}


/*scrollbar*/
::-webkit-scrollbar { width:8px; height:12px; background:transparent}
::-webkit-scrollbar-track{ background:transparent}
::-webkit-scrollbar-thumb{ border-radius:6px; background-color:#0074ff}
::-webkit-scrollbar-thumb:hover{ background-color:#bbb}

/*form*/
label,
.input-field>label{ color:#fff}
[type="checkbox"] + span:not(.lever):before, 
[type="checkbox"]:not(.filled-in) + span:not(.lever):after { border-color:#0074ff; border-radius:4px}
[type="checkbox"] + span:not(.lever){ padding-left:25px}
checkboxlist label{ display:inline-block; margin-top:10px; margin-right:20px}
input[type=text]:not(.browser-default),input[type=number]:not(.browser-default) { border-bottom-color: rgba(0,46,152,1); color:#f69b48}


/*app-container*/
.app-container{ height:100%; padding:115px 0 60px}
.app-container:after{ content:""; position:fixed; top:0; left:0; right:0; bottom:0; background:url(images/brand/bg.png) no-repeat; background-size:100% 100%; z-index:1}


/*header*/
.header{ position:fixed; top:0; left:0; right:0; text-align:center; z-index:2}
.nav-container{ height:70px;background:url(images/brand/navbg.png) no-repeat center bottom; background-size:auto 100%; display:flex}
.nav-container .item{ flex:1; position:relative; color:#318fff; text-align:left; padding-left:20px}
.nav-container .item:before{ content:""; position:absolute; height:1px; top:29px; left:0; right:0; background:linear-gradient(to right, rgba(6,120,253,0), rgba(6,120,253,1))}
.nav-container .item:after{ content:""; position:absolute; height:12px; top:40px; left:0; right:-50px; background:linear-gradient(to right, rgba(6,120,253,0), rgba(6,120,253,.3)); border-radius:0 14px 0 0}
.nav-container .item:last-child{ text-align:right; padding:0 20px 0 0}
.nav-container .item:last-child:before{ background:linear-gradient(to left, rgba(6,120,253,0), rgba(6,120,253,1))}
.nav-container .item:last-child:after{ left:-50px; right:0; background:linear-gradient(to left, rgba(6,120,253,0), rgba(6,120,253,.5)); border-radius:14px 0 0}
.nav-container .item a{ display:inline-block; margin-top:20px; position:relative; z-index:1}
.nav-container .item i{ margin-right:4px}
.nav-container .item .sub-menu .name{ display:inline-block; margin-top:20px} 
.nav-container .item .sub-menu a{ display:none}
.nav-container .item .sub-menu:hover a{ display:block; background:rgba(0,0,0,.3); margin-top:0; border-radius:4px; padding:4px 8px; width:50px; text-align:center}
.nav-container .item:last-child .sub-menu a{ margin-left:auto}
.nav-container a.logo{ display:block; width:526px; line-height:65px}
.nav-container a.logo img{ vertical-align:middle; height:40px}
.header .title{ margin-top:20px; font-size:22px; font-weight:bold; display:flex; align-items:center; justify-content:center}
.header .title img{ height:24px; margin-right:5px}
.header .title span { background: linear-gradient(to bottom, #fba8a8, #fd0303); -webkit-background-clip: text; -webkit-text-fill-color:transparent }
.header .title span+span{ background:linear-gradient(to bottom, #fff, #0074ff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-left:10px}
/*short*/
.header.short .nav-container{ height:60px;background-image:url(../css/images/brand/navbg2.png)}
.header.short .nav-container a.logo{ display:block; width:367px; line-height:55px}
.header.short .nav-container .item:before{ top:26px}
.header.short .nav-container .item:after{ top:40px}

/*main-body*/
.main-body{ height:100%; position:relative; z-index:2}
/*container*/
.container{ width:auto; max-width:initial; padding:0 20px}
/*index*/
.main-body.index{ display:flex; align-items:center; justify-content:center; flex-direction:column}
.main-body.index>h5{ margin-bottom:40px; font-weight:normal; color:#c4ddff; font-size:20px}
/*menu*/
.main-menu{ text-align:center; position:relative; z-index:2}
.main-menu li{ display:inline-block; min-width:140px; transition:.3s}
.main-menu a{ display:block; border:1px solid rgba(6,120,253,.5); background:linear-gradient(to top, rgba(0,43,131,.5), rgba(0,43,131,0)); border-radius:16px; overflow:hidden; position:relative; transition:.3s}
.main-menu a>div{ padding:20px; background:url(images/brand/light.png) no-repeat center top; background-size:contain}
.main-menu h1{ font-size:24px; background:linear-gradient(to bottom, #fff, #0074ff); -webkit-background-clip:text; -webkit-text-fill-color:transparent}
.main-menu p{ color:#57a3ff; font-size:12px; font-family:Tahoma}
.main-menu p+img{ margin-top:10px; width:80px}
.main-menu .text{ float:right; text-align:left; word-break:keep-all; margin-left:10px}
.main-menu li+li{ margin-left:15px}
.main-menu li:after{ content:""; display:block; height:30px; background:url(images//brand//shadow.png) no-repeat; background-size:100% 100%; opacity:.8}
.main-menu li a:hover{ background:linear-gradient(to top, rgba(0,43,131,.8), rgba(0,43,131,.3))}
.main-menu li:hover{ transform:translateY(-15px)}

/*page*/
.page-container{ display:flex; flex-direction:column; height:100%; position:relative}
/*标题栏*/
.titleBar{ display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(6,120,253,.3); height:50px; margin-bottom:15px}
.titleBar .lbox h1{ font-size:20px; display:inline-block; position:relative; line-height:50px}
.titleBar .lbox h1:after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:4px; background:linear-gradient(to right, #002884, #0052ca); border-radius:8px}
/*工具栏*/
.toolBar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:15px}
.toolBar .btn+.btn{ margin-left:10px}
/*主体*/
.page-content{ border:1px solid rgba(6,120,253,.3); border-radius:8px; background:rgba(0,32,97,.5); padding:20px; height:100%; overflow-y:auto; box-shadow:0 0 10px rgba(0,82,202,.1)}
.content-title{ font-weight:bold; margin-top:15px; display:flex; align-items:center; justify-content:space-between; background:linear-gradient(to right, rgba(0,82,202,.4), rgba(0,82,202,0)); padding:10px 15px; border-radius:8px}
.content-title h5{ font-size:16px}
.page-printer{ background:#fff; color:#000; border:none}
/**/
.box{ background:rgba(0,0,0,.3); border-radius:8px; padding:20px; margin-top:8px}
.title-small{ margin-bottom:10px; color:#f69b48; display:flex; align-items:center; justify-content:space-between}
.title-small h6{ font-size:15px}


/*footer*/
.footer{ background:linear-gradient(to right, rgba(8,118,251,0), rgba(8,118,251,0.2), rgba(8,118,251,0)); text-align:center; font-size:14px; color:#318fff; line-height:40px; position: fixed;left:0; right:0; bottom:0; z-index:2}
.footer:before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(to right, rgba(6,120,253,0), rgba(6,120,253,.3), rgba(6,120,253,0))}
.footer a{ position:absolute; left:25px; top:0}

/*canvas-bg*/
.canvas-bg{ position:fixed; top:0; left:0; right:0; bottom:0; transform:scale(1.2)}


/*帮办代办*/
.form-list{ margin:-5px; display:flex; flex-wrap:wrap}
.form-list .col{ padding:5px; margin:0 !important}
.form-list .item{ display:flex; align-items:center; background:rgba(0,0,0,.2); font-size:15px; color:#fff; padding:10px; border-radius:8px; height:100%}
.form-list .item p{ flex:1}
.form-list .item p span{ background:#0052ca; display:inline-block; min-width:18px; border-radius:4px; text-align:center; font-size:12px; margin:1px 5px 0 0; vertical-align:top}
.form-list .item .btn+.btn{ margin-left:10px}
.form-list .item:hover{ font-weight:bold;  background:rgba(0,0,0,.3)}


/*table-data-list*/
.table-data-list thead tr th{ background:rgba(0,40,132,.8); color:#fff}
.table-data-list thead tr th{ border-left-color:rgba(255,255,255,.2)}
.table-data-list tbody tr:nth-child(even){ background:rgba(0,0,0,.2) !important}
.table-data-list tr td{ border-left-color:rgba(255,255,255,.1)}
.table-data-list tr td .btn{ min-width:auto; font-weight:normal}
.table-data-list tr td .btn+.btn{ margin-left:4px}
.table-data-list tr:hover td{ color:#fff !important; background:rgba(6,120,253,.4)}


/*layui-layer*/
.layui-layer{ background:#001c4d !important; border:1px solid rgba(6,120,253,.3); border-radius:8px}
.layui-layer iframe{ background-color:transparent !important}
.layui-layer-title{  background:rgba(0,82,202,.3); color:#fff; border:none; border-radius:8px 8px 0 0}


/*layui-layer 移动端样式*/
.layui-m-layerchild { background-color: #001c4d !important; border-radius:16px 16px 0 0 !important}
.layui-m-layerbtn { border: 0 !important; background-color: #002566 !important;}
.layui-m-layerbtn span[no] { border: 0 !important;}
.layui-m-layerbtn span[yes] { background-color: #e98c00; color: #fff !important; }


/**/
.window-container{ display:flex; flex-direction:column; height:100%}
.window-header{ background:rgba(0,82,202,.3); height:50px; min-height:50px; display:flex; align-items:center; border-radius:8px 8px 0 0; padding:0 20px}
.window-body{ height:100%; display:flex; flex-direction:column; overflow:hidden}
.window-body .window-content{ padding:20px; height:100%; overflow-y:auto}
.window-toolbar{ padding:20px}
.window-toolbar .btn+.btn{ margin-left:10px}
.window-footer{ text-align:center; padding:20px}
.window-footer .btn+.btn{ margin-left:10px}


/*datepicker-modal*/
.datepicker-modal{ border-radius:8px}
.datepicker-date-display{ background:linear-gradient(to bottom, rgba(0,40,132,1), #0052ca)}
.datepicker-table td{ color:#000}
.datepicker-table td.is-selected{ background:#0052ca}
.datepicker-table td.is-today,
.datepicker-done,
.datepicker-cancel{ color:#0052ca}


.list .item{ background:rgba(255,255,255,.08); margin-bottom:10px; padding:10px 15px; border-radius:8px}
.list .hd{ display:flex; justify-content:space-between; align-items:center; font-size:16px}
.list .hd span{ color:#318fff; margin-left:10px}
.list ul li{ margin-top:5px}
.list ul li span{ margin-right:10px; opacity:.5}
.list .item:last-child{ margin-bottom:0}


/*ticket*/
.ticket .wrap{ background:rgba(8,118,251,0.15); border-radius:8px; padding:20px 25px}
.ticket .hd{ border-bottom:1px dashed rgba(6,120,253,.5); padding-bottom:10px}
.ticket .hd .green-text{ font-size:16px; font-weight:bold}
.ticket .bd{ padding:30px 0; text-align:center}
.ticket .desc{ text-align:center; border-top:1px dashed rgba(6,120,253,.5); padding-top:10px}
.ticket:after{ content:""; display:block; height:40px; background:url(images//brand//shadow.png) no-repeat; background-size:100% 100%; opacity:.5}


.order_num{ display:flex; font-size:16px; font-weight:bold}
.order_num .text{ flex:1; background:linear-gradient(to right, rgba(0,82,202,0), rgba(0,82,202,.3), rgba(0,82,202,0)); padding:10px 20px; display:flex; align-items:center; justify-content:center; margin:0 10px}
.order_num span{ margin:0 8px; font-weight:bold}
.order_num .num{ letter-spacing:2px; font-size:2rem; color:#f69b48; font-family:Tahoma}
.order_num .text:nth-child(2) .num{ color:#1fbf85}
.order_num .text:nth-child(3) .num{ color:#57a3ff}