@charset "utf-8";

* { margin: 0; padding: 0; list-style: none; border: none; box-sizing: border-box; font-family: "Microsoft YaHei", "simsun", "Helvetica Neue", Arial, Helvetica, sans-serif; }
body { font-size: 16px; color: #333; background: #FFF; }
img { border: 0; vertical-align: bottom; max-width: 100%; }
h1, .h1 { font-size: 36px; padding: 18px 0; }
h2, .h2 { font-size: 28px; padding: 14px 0; }
h3, .h3 { font-size: 22px; padding: 11px 0; }
h4, .h4 { font-size: 18px; padding: 9px 0; }
h5, .h5 { font-size: 16px; padding: 7px 0; }
h6, .h6 { font-size: 12px; padding: 6px 0; }
hr { background: #DDD; color: #DDD; clear: both; float: none; width: 100%; height: 1px; margin: 10px 0; border: none; box-sizing: content-box; }
a { color: #333; text-decoration: none; }
p { line-height: 26px; }

/*12列布局*/
.container { max-width: 1200px; margin: 0 auto ;}
.container-full { }





/*表格部分*/
.table { width: 100%; max-width: 100%; border-collapse: collapse; border-spacing: 0; }
.table th { border-bottom: 1px solid #DDD; padding: 8px; background: #F2F2F2; }
.table td { border-top: 1px solid #DDD; padding: 8px; }
.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th { background-color: #F9F9F9; }
.table-bordered th, .table-bordered td { border: solid 1px #DDD; }
.table-bordered th { border-bottom: 2px solid #DDD; }
.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th { background-color: #F5F5F5; }
.table-large th, .table-large td { padding: 15px; font-size: 16px; }
.table-big th, .table-big td { padding: 10px; }
.table-middle th, .table-middle td { padding: 5px; font-size: 12px; }
.table-small th, .table-small td { padding: 3px; font-size: 12px; }
.table-little th, .table-little td { padding: 1px; font-size: 12px; }

/*表单部分*/
.input { padding: 0 10px; border: solid 1px #DDD; width: 100%; height: 42px; display: block; font-size: 16px; }
.input:focus { border-color: #09c; outline: none; }
.label { padding-bottom: 7px; display: block; line-height: 20px; }
.label label { font-weight: bold; font-size: 16px; }
.input-note { color: #999; font-size: 14px; padding-top: 10px; }
.field { position: relative; }
.form-group { padding-bottom: 10px; }
textarea.input { border: solid 1px #DDD; height: 100px; width: 100%; font-size: 16px; padding: 10px; }

.form-auto .input { width: auto; display: inline-block; }
.form-auto textarea.input { width: auto; }

.form-x .form-group { display: grid; grid-template-columns: minmax(80px,180px) 1fr; }
.form-x-border .form-group .label { display: grid; align-content: center; padding: 0 10px; background: #FAFAFA; border: 1px solid #DDDEEE; }
.form-x .form-group .label { display: grid; align-content: center; padding-bottom: 0; text-align: right; padding-right: 10px; }


/*输入框组*/
.input-group { border-collapse: separate; display: table; position: relative; }
.input-group .addon, .input-group .addbtn, .input-group .input { display: table-cell; }
.input-group .addon, .input-group .addbtn { width: 1%; white-space: nowrap; vertical-align: middle; }
.input-group .addon { background-color: #FFF; border: 1px solid #DDD; text-align: center; min-width: 42px;}
.input-group .addon:first-child, .input-group .addbtn:first-child .btn { border-right: 0 none; }
.input-group .addon:last-child, .input-group .addbtn:last-child .btn { border-left: 0 none; }

/*验证提示*/
.input-help { position: absolute; z-index: 1; top: 100%; font-size: 14px; }
.input-help ul { margin-bottom: 8px; background-color: rgb(238,51,51,0.9); padding: 5px; width: auto; box-shadow: 0 0 10px #666; border-radius: 2px; color: #FFF; z-index: 1; }
.input-help ul:after { content: ""; position: absolute; bottom: 100%; left: 10px; border: solid transparent; border-bottom-color: #E33; border-width: 5px; opacity: 0.9;  }
.check-error { color: #E33; }
.check-error .input { border-color: #e33; }
.check-success { color: #2c7; }
.check-success .input { border-color: #2c7; }
.badge { display: inline-block; min-width: 10px; padding: 3px 7px; font-size: 12px; line-height: 1; color: #FFF; text-align: center; white-space: nowrap; vertical-align: baseline; background-color: #999; border-radius: 5px; }
.badge-corner { position: relative }
.badge-corner .badge { position: absolute; right: -10px; top: -9px; font-weight: normal; cursor: pointer }

/*面板*/
.panel { border: solid 1px #DDD; }
.panel-hd { background-color: #f5f5f5; padding: 10px 15px; border-bottom: solid 1px #DDD; }
.panel-bd { padding: 15px; }
.panel-ft { background-color: #f5f5f5; padding: 10px 15px; border-top: solid 1px #DDD; }

/*列表组*/
.list-group { border: solid 1px #DDD; }
.list-group li { padding: 10px 15px; display: block; border-bottom: solid 1px #DDD; }
.list-group li:last-child { border-bottom: 0 none; }

/*引用*/
.quote { padding: 15px; border: solid 1px #DDD; border-left-width: 6px; }

/*按钮部分*/
.btn { padding: 0 20px; height: 42px; line-height: 40px; font-size: 16px; border: solid 1px #DDD; cursor: pointer; background: transparent;  margin: 0; display: inline-block; }
.btn-large { padding: 0 40px; height: 62px; font-size: 24px; line-height: 60px; text-align: center; }
.btn-big { padding: 0 30px; height: 52px; font-size: 18px; line-height: 50px; text-align: center; }
.btn-middle { padding: 0 10px; height: 38px; font-size: 16px; font-weight: normal; line-height: 36px; text-align: center; }
.btn-small { padding: 0 8px; height: 32px; font-size: 14px; font-weight: normal; line-height: 30px; text-align: center; }
.btn-little { padding: 0 5px; height: 22px; font-size: 12px; font-weight: normal; line-height: 20px; text-align: center; }
.btn:hover { transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1) 0s; z-index: 2; position: relative; }
.btn-block { display: block; width: 100%; text-align: center; }

.btn-radius { border-radius: 21px;}
.btn-large-radius { border-radius: 31px;}
.btn-big-radius { border-radius: 26px;}
.btn-middle-radius { border-radius: 19px;}
.btn-small-radius { border-radius: 16px;}
.btn-little-radius { border-radius: 11px;}

.btn.bg-black { border-color: #000; color: #FFF; }
.btn.bg-gray { border-color: #999; color: #FFF; }
.btn.bg-white { border-color: #FFF; color: #000; }
.btn.bg-red { border-color: #e33; color: #FFF; }
.btn.bg-yellow { border-color: #f60; color: #FFF; }
.btn.bg-blue { border-color: #0ae; color: #FFF; }
.btn.bg-green { border-color: #2c7; color: #FFF; }
.btn.bg-main { border-color: #0a8; color: #FFF; }
.btn.bg-sub { border-color: #0ae; color: #FFF; }
.btn.bg-back { border-color: #efe; color: #FFF; }
.btn.bg-mix { border-color: #aed; color: #FFF; }
.btn.bg-dot { border-color: #e33; color: #FFF; }
.btn.bg-main:hover, .btn.bg-main:focus { color: #FFF; border-color: #0ab; background-color: #0ab !important; }
.btn.bg-sub:hover, .btn.bg-sub:focus { color: #FFF; border-color: #09f; background-color: #09f !important; }
.btn.bg-back:hover, .btn.bg-back:focus { color: #333; border-color: #cec; background-color: #cec !important; }
.btn.bg-mix:hover, .btn.bg-mix:focus { color: #333; border-color: #cec; background-color: #cec !important; }
.btn.bg-dot:hover, .btn.bg-dot:focus { color: #FFF; border-color: #f00; background-color: #f00 !important; }
.btn.bg-black:hover, .btn.bg-black:focus { color: #FFF; border-color: #666; background-color: #666 !important; }
.btn.bg-gray:hover, .btn.bg-gray:focus { color: #FFF; border-color: #aaa; background-color: #aaa !important; }
.btn.bg-white:hover, .btn.bg-white:focus { color: #333; border-color: #f5f5f5; background-color: #f5f5f5 !important; }
.btn.bg-red:hover, .btn.bg-red:focus { color: #FFF; border-color: #f00; background-color: #f00 !important; }
.btn.bg-yellow:hover, .btn.bg-yellow:focus { color: #FFF; border-color: #f90; background-color: #f90 !important; }
.btn.bg-blue:hover, .btn.bg-blue:focus { color: #FFF; border-color: #3bd; background-color: #3bd !important; }
.btn.bg-green:hover, .btn.bg-green:focus { color: #FFF; border-color: #5d8; background-color: #5d8 !important; }

/*背景*/
.bg-black { background-color: #000 !important; }
.bg-gray { background-color: #999 !important; }
.bg-white { background-color: #FFF !important; }
.bg-red { background-color: #e33 !important; }
.bg-yellow { background-color: #f60 !important; }
.bg-blue { background-color: #0ae !important; }
.bg-green { background-color: #2c7 !important; }
.bg-main { background-color: #0a8 !important; }
.bg-sub { background-color: #0ae !important; }
.bg-back { background-color: #efe !important; }
.bg-mix { background-color: #aed !important; }
.bg-dot { background-color: #e33 !important; }

/*颜色*/
.color-black { color: #000 !important; }
.color-gray { color: #999 !important; }
.color-white { color: #FFF !important; }
.color-red { color: #e33 !important; }
.color-yellow { color: #f60 !important; }
.color-blue { color: #0ae !important; }
.color-green { color: #2c7 !important; }
.color-main { color: #0a8 !important; }
.color-sub { color: #0ae !important; }
.color-back { color: #efe !important; }
.color-mix { color: #aed !important; }
.color-dot { color: #e33 !important; }

/*边框*/
.bn { border: none !important; }
.border { border: solid 1px #DDD !important; }
.border-black { border-color: #000 !important; }
.border-gray { border-color: #999 !important; }
.border-white { border-color: #FFF !important; }
.border-red { border-color: #e33 !important; }
.border-yellow { border-color: #f60 !important; }
.border-blue { border-color: #0ae !important; }
.border-green { border-color: #2c7 !important; }
.border-main { border-color: #0a8 !important; }
.border-sub { border-color: #0ae !important; }
.border-back { border-color: #efe !important; }
.border-mix { border-color: #aed !important; }
.border-dot { border-color: #e33 !important; }
.border:hover { border-color: #DDD !important; }
.border-main:hover { border-color: #0ab !important; }
.border-sub:hover { border-color: #09f !important; }
.border-back:hover { border-color: #cec !important; }
.border-mix:hover { border-color: #cec !important; }
.border-dot:hover { border-color: #f00 !important; }
.border-black:hover { border-color: #666 !important; }
.border-gray:hover { border-color: #aaa !important; }
.border-white:hover { border-color: #F5F5F5 !important; }
.border-red:hover { border-color: #f00 !important; }
.border-yellow:hover { border-color: #f90 !important; }
.border-blue:hover { border-color: #3bd !important; }
.border-green:hover { border-color: #5d8 !important; }

/*间距*/
.p0 { padding: 0 !important; }
.ptb0 { padding: 0px 0 !important; }
.plr0 { padding: 0 0px !important; }
.pt0 { padding-top: 0px !important; }
.pb0 { padding-bottom: 0px !important; }
.pl0 { padding-left: 0px !important; }
.pr0 { padding-right: 0px !important; }
.p2 { padding: 2px !important; }
.ptb2 { padding: 2px 0 !important; }
.plr2 { padding: 0 2px !important; }
.pt2 { padding-top: 2px !important; }
.pb2 { padding-bottom: 2px !important; }
.pl2 { padding-left: 2px !important; }
.pr2 { padding-right: 2px !important; }
.p4 { padding: 4px !important; }
.ptb4 { padding-top: 4px !important; padding-bottom: 4px !important; }
.plr4 { padding-left: 4px !important; padding-right: 4px !important; }
.pt4 { padding-top: 4px !important; }
.pb4 { padding-bottom: 4px !important; }
.pl4 { padding-left: 4px !important; }
.pr4 { padding-right: 4px !important; }
.p6 { padding: 6px !important; }
.ptb6 { padding-top: 6px !important; padding-bottom: 6px !important; }
.plr6 { padding-left: 6px !important; padding-right: 6px !important; }
.pt6 { padding-top: 6px !important; }
.pb6 { padding-bottom: 6px !important; }
.pl6 { padding-left: 6px !important; }
.pr6 { padding-right: 6px !important; }
.p8 { padding: 8px !important; }
.ptb8 { padding-top: 8px !important; padding-bottom: 8px !important; }
.plr8 { padding-left: 8px !important; padding-right: 8px !important; }
.pt8 { padding-top: 8px !important; }
.pb8 { padding-bottom: 8px !important; }
.pl8 { padding-left: 8px !important; }
.pr8 { padding-right: 8px !important; }
.p10 { padding: 10px !important; }
.ptb10 { padding-top: 10px !important; padding-bottom: 10px !important; }
.plr10 { padding-left: 10px !important; padding-right: 10px !important; }
.pt10 { padding-top: 10px !important; }
.pb10 { padding-bottom: 10px !important; }
.pl10 { padding-left: 10px !important; }
.pr10 { padding-right: 10px !important; }
.p20 { padding: 20px !important; }
.ptb20 { padding-top: 20px !important; padding-bottom: 20px !important; }
.plr20 { padding-left: 20px !important; padding-right: 20px !important; }
.pt20 { padding-top: 20px !important; }
.pb20 { padding-bottom: 20px !important; }
.pl20 { padding-left: 20px !important; }
.pr20 { padding-right: 20px !important; }
.p30 { padding: 30px !important; }
.ptb30 { padding-top: 30px !important; padding-bottom: 30px !important; }
.plr30 { padding-left: 30px !important; padding-right: 30px !important; }
.pt30 { padding-top: 30px !important; }
.pb30 { padding-bottom: 30px !important; }
.pl30 { padding-left: 30px !important; }
.pr30 { padding-right: 30px !important; }
.p40 { padding: 40px !important; }
.ptb40 { padding-top: 40px !important; padding-bottom: 40px !important; }
.plr40 { padding-left: 40px !important; padding-right: 40px !important; }
.pt40 { padding-top: 40px !important; }
.pb40 { padding-bottom: 40px !important; }
.pl40 { padding-left: 40px !important; }
.pr40 { padding-right: 40px !important; }
.p50 { padding: 50px !important; }
.ptb50 { padding-top: 50px !important; padding-bottom: 50px !important; }
.plr50 { padding-left: 50px !important; padding-right: 50px !important; }
.pt50 { padding-top: 50px !important; }
.pb50 { padding-bottom: 50px !important; }
.pl50 { padding-left: 50px !important; }
.pr50 { padding-right: 50px !important; }
.p60 { padding: 60px !important; }
.ptb60 { padding-top: 60px !important; padding-bottom: 60px !important; }
.plr60 { padding-left: 60px !important; padding-right: 60px !important; }
.pt60 { padding-top: 60px !important; }
.pb60 { padding-bottom: 60px !important; }
.pl60 { padding-left: 60px !important; }
.pr60 { padding-right: 60px !important; }
.p70 { padding: 70px !important; }
.ptb70 { padding-top: 70px !important; padding-bottom: 70px !important; }
.plr70 { padding-left: 70px !important; padding-right: 70px !important; }
.pt70 { padding-top: 70px !important; }
.pb70 { padding-bottom: 70px !important; }
.pl70 { padding-left: 70px !important; }
.pr70 { padding-right: 70px !important; }
.p80 { padding: 80px !important; }
.ptb80 { padding-top: 80px !important; padding-bottom: 80px !important; }
.plr80 { padding-left: 80px !important; padding-right: 80px !important; }
.pt80 { padding-top: 80px !important; }
.pb80 { padding-bottom: 80px !important; }
.pl80 { padding-left: 80px !important; }
.pr80 { padding-right: 80px !important; }
.p90 { padding: 90px !important; }
.ptb90 { padding-top: 90px !important; padding-bottom: 90px !important; }
.plr90 { padding-left: 90px !important; padding-right: 90px !important; }
.pt90 { padding-top: 90px !important; }
.pb90 { padding-bottom: 90px !important; }
.pl90 { padding-left: 90px !important; }
.pr90 { padding-right: 90px !important; }
.p100 { padding: 100px !important; }
.ptb100 { padding-top: 100px !important; padding-bottom: 100px !important; }
.plr100 { padding-left: 100px !important; padding-right: 100px !important; }
.pt100 { padding-top: 100px !important; }
.pb100 { padding-bottom: 100px !important; }
.pl100 { padding-left: 100px !important; }
.pr100 { padding-right: 100px !important; }
.m0 { margin: 0 !important; }
.mt0 { margin-top: 0 !important; }
.mb0 { margin-bottom: 0 !important; }
.ml0 { margin-left: 0 !important; }
.mr0 { margin-right: 0 !important; }
.mtb2 { margin-top: 2px !important; margin-bottom: 2px !important; }
.mt2 { margin-top: 2px !important; }
.mb2 { margin-bottom: 2px !important; }
.ml2 { margin-left: 2px !important; }
.mr2 { margin-right: 2px !important; }
.mtb4 { margin-top: 4px !important; margin-bottom: 4px !important; }
.mt4 { margin-top: 4px !important; }
.mb4 { margin-bottom: 4px !important; }
.ml4 { margin-left: 4px !important; }
.mr4 { margin-right: 4px !important; }
.mtb6 { margin-top: 6px !important; margin-bottom: 6px !important; }
.mt6 { margin-top: 6px !important; }
.mb6 { margin-bottom: 6px !important; }
.ml6 { margin-left: 6px !important; }
.mr6 { margin-right: 6px !important; }
.mtb8 { margin-top: 8px !important; margin-bottom: 8px !important; }
.mt8 { margin-top: 8px !important; }
.mb8 { margin-bottom: 8px !important; }
.ml8 { margin-left: 8px !important; }
.mr8 { margin-right: 8px !important; }
.mtb10 { margin-top: 10px !important; margin-bottom: 10px !important; }
.mt10 { margin-top: 10px !important; }
.mb10 { margin-bottom: 10px !important; }
.ml10 { margin-left: 10px !important; }
.mr10 { margin-right: 10px !important; }
.mtb20 { margin-top: 20px !important; margin-bottom: 20px !important; }
.mt20 { margin-top: 20px !important; }
.mb20 { margin-bottom: 20px !important; }
.ml20 { margin-left: 20px !important; }
.mr20 { margin-right: 20px !important; }
.mtb30 { margin-top: 30px !important; margin-bottom: 30px !important; }
.mt30 { margin-top: 30px !important; }
.mb30 { margin-bottom: 30px !important; }
.ml30 { margin-left: 30px !important; }
.mr30 { margin-right: 30px !important; }
.mtb40 { margin-top: 40px !important; margin-bottom: 40px !important; }
.mt40 { margin-top: 40px !important; }
.mb40 { margin-bottom: 40px !important; }
.ml40 { margin-left: 40px !important; }
.mr40 { margin-right: 40px !important; }
.mtb50 { margin-top: 50px !important; margin-bottom: 50px !important; }
.mt50 { margin-top: 50px !important; }
.mb50 { margin-bottom: 50px !important; }
.ml50 { margin-left: 50px !important; }
.mr50 { margin-right: 50px !important; }
.mtb60 { margin-top: 60px !important; margin-bottom: 60px !important; }
.mt60 { margin-top: 60px !important; }
.mb60 { margin-bottom: 60px !important; }
.ml60 { margin-left: 60px !important; }
.mr60 { margin-right: 60px !important; }
.mtb70 { margin-top: 70px !important; margin-bottom: 70px !important; }
.mt70 { margin-top: 70px !important; }
.mb70 { margin-bottom: 70px !important; }
.ml70 { margin-left: 70px !important; }
.mr70 { margin-right: 70px !important; }
.mtb80 { margin-top: 80px !important; margin-bottom: 80px !important; }
.mt80 { margin-top: 80px !important; }
.mb80 { margin-bottom: 80px !important; }
.ml80 { margin-left: 80px !important; }
.mr80 { margin-right: 80px !important; }
.mtb90 { margin-top: 90px !important; margin-bottom: 90px !important; }
.mt90 { margin-top: 90px !important; }
.mb90 { margin-bottom: 90px !important; }
.ml90 { margin-left: 90px !important; }
.mr90 { margin-right: 90px !important; }
.mtb100 { margin-top: 100px !important; margin-bottom: 100px !important; }
.mt100 { margin-top: 100px !important; }
.mb100 { margin-bottom: 100px !important; }
.ml100 { margin-left: 100px !important; }
.mr100 { margin-right: 100px !important; }
.fr { float: right !important; }
.fl { float: left !important; }
.fc { clear: both !important; margin: 0 0 0 0 !important; padding: 0 0 0 0 !important; }
.show, .db { display: block; }
.hide, .dn { display: none; }
.ac { text-align: center !important; }
.ar { text-align: right !important; }
.al { text-align: left !important; }
.oh { overflow: hidden !important; }
.ov { overflow: visible !important; }
.oa { overflow: auto !important; }
.os { overflow: scroll !important; }
.wa { width: auto !important; }
.cut { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.fn { font-weight: normal !important; }
.fb { font-weight: bold !important; }
.fs {font-family: "simsun" !important;}
.f10 { font-size: 10px !important; }
.f12 { font-size: 12px !important; }
.f14 { font-size: 14px !important; }
.f16 { font-size: 16px !important; }
.f18 { font-size: 18px !important; }
.f20 { font-size: 20px !important; }
.f22 { font-size: 22px !important; }
.f24 { font-size: 24px !important; }
.f26 { font-size: 26px !important; }
.f28 { font-size: 28px !important; }
.f30 { font-size: 30px !important; }
.f32 { font-size: 32px !important; }
.f34 { font-size: 34px !important; }
.f36 { font-size: 36px !important; }
.f38 { font-size: 38px !important; }
.f40 { font-size: 40px !important; }
.f42 { font-size: 42px !important; }
.f44 { font-size: 44px !important; }
.f46 { font-size: 46px !important; }
.f48 { font-size: 48px !important; }
.f50 { font-size: 50px !important; }
.f52 { font-size: 52px !important; }
.f54 { font-size: 54px !important; }
.f56 { font-size: 56px !important; }
.f58 { font-size: 58px !important; }
.f60 { font-size: 60px !important; }
.f62 { font-size: 62px !important; }
.f64 { font-size: 64px !important; }
.f66 { font-size: 66px !important; }
.f68 { font-size: 68px !important; }
.f70 { font-size: 70px !important; }
.f72 { font-size: 72px !important; }
.f74 { font-size: 74px !important; }
.f76 { font-size: 76px !important; }
.f78 { font-size: 78px !important; }
.f80 { font-size: 80px !important; }
.f82 { font-size: 82px !important; }
.f84 { font-size: 84px !important; }
.f86 { font-size: 86px !important; }
.f88 { font-size: 88px !important; }
.f90 { font-size: 90px !important; }
.f92 { font-size: 92px !important; }
.f94 { font-size: 94px !important; }
.f96 { font-size: 96px !important; }
.f98 { font-size: 98px !important; }
.f100 { font-size: 100px !important; }
.cp { cursor: pointer !important; }
.pr { position: relative !important;}


.grid {display: grid;}

.justify-content-start { justify-content: start !important; }
.justify-content-end { justify-content: end !important;}
.justify-content-center { justify-content: center !important;}
.justify-content-stretch { justify-content: stretch !important;}
.justify-content-space-around { justify-content: space-around !important; }
.justify-content-space-between { justify-content: space-between !important;}
.justify-content-space-evenly { justify-content: space-evenly !important;}

.align-content-start { align-content: start !important;}
.align-content-end { align-content: end !important;}
.align-content-center { align-content: center !important;}
.align-content-stretch { align-content: stretch !important;}
.align-content-space-around { align-content: space-around !important;}
.align-content-space-between { align-content: space-between !important;}
.align-content-space-evenly { align-content: space-evenly !important;}

.align-items-start { align-items: start !important; }
.align-items-end { align-items: end !important;}
.align-items-center { align-items: center !important;}
.align-items-stretch { align-items: stretch !important;}

.justify-items-start { justify-items: start !important; }
.justify-items-end { justify-items: end !important;}
.justify-items-center { justify-items: center !important;}
.justify-items-stretch { justify-items: stretch !important;}

.align-self-start { align-self: start !important; }
.align-self-end { align-self: end !important;}
.align-self-center { align-self: center !important;}
.align-self-stretch { align-self: stretch !important;}

.auto-fit { grid-template-columns:repeat(auto-fit,minmax(1px,1fr));} 
.auto-fill { grid-template-columns:repeat(auto-fill,minmax(1px,1fr));} 
.a1 { grid-template-columns:repeat(1,minmax(1px,1fr));} 
.a2 { grid-template-columns:repeat(2,minmax(1px,1fr));} 
.a3 { grid-template-columns:repeat(3,minmax(1px,1fr));} 
.a4 { grid-template-columns:repeat(4,minmax(1px,1fr));} 
.a5 { grid-template-columns:repeat(5,minmax(1px,1fr));} 
.a6 { grid-template-columns:repeat(6,minmax(1px,1fr));} 
.a7 { grid-template-columns:repeat(7,minmax(1px,1fr));} 
.a8 { grid-template-columns:repeat(8,minmax(1px,1fr));} 
.a9 { grid-template-columns:repeat(9,minmax(1px,1fr));} 
.a10 { grid-template-columns:repeat(10,minmax(1px,1fr));} 
.a11 { grid-template-columns:repeat(11,minmax(1px,1fr));} 
.a12 { grid-template-columns:repeat(12,minmax(1px,1fr));} 

.gap100 { gap: 100px;}
.gap90 { gap: 90px; }
.gap80 { gap: 80px; }
.gap70 { gap: 70px; }
.gap60 { gap: 60px; }
.gap50 { gap: 50px; }
.gap40 { gap: 40px; }
.gap30 { gap: 30px; }
.gap20 { gap: 20px; }
.gap10 { gap: 10px; }
.gap8 { gap: 8px; }
.gap6 { gap: 6px; }
.gap4 { gap: 4px; }
.gap2 { gap:2px; }
.gap1 { gap:1px; }

.line { display: grid; grid-template-columns:repeat(12,minmax(1px,1fr));  }
.l100 { display: grid; grid-template-columns:repeat(12,minmax(1px,1fr)); gap: 100px;}
.l90 { 	display: grid; grid-template-columns:repeat(12,minmax(1px,1fr)); gap: 90px; }
.l80 { 	display: grid; grid-template-columns:repeat(12,minmax(1px,1fr)); gap: 80px; }
.l70 { 	display: grid; grid-template-columns:repeat(12,minmax(1px,1fr)); gap: 70px; }
.l60 { 	display: grid; grid-template-columns:repeat(12,minmax(1px,1fr)); gap: 60px; }
.l50 { 	display: grid; grid-template-columns:repeat(12,minmax(1px,1fr)); gap: 50px; }
.l40 { 	display: grid; grid-template-columns:repeat(12,minmax(1px,1fr)); gap: 40px; }
.l30 { 	display: grid; grid-template-columns:repeat(12,minmax(1px,1fr)); gap: 30px; }
.l20 { 	display: grid; grid-template-columns:repeat(12,minmax(1px,1fr)); gap: 20px; }
.l10 { 	display: grid; grid-template-columns:repeat(12,minmax(1px,1fr)); gap: 10px; }
.l8 {  	display: grid; grid-template-columns:repeat(12,minmax(1px,1fr)); gap: 8px; }
.l6 {  	display: grid; grid-template-columns:repeat(12,minmax(1px,1fr)); gap: 6px; }
.l4 {  	display: grid; grid-template-columns:repeat(12,minmax(1px,1fr)); gap: 4px; }
.l2 {  	display: grid; grid-template-columns:repeat(12,minmax(1px,1fr)); gap: 2px; }
.l1 {  	display: grid; grid-template-columns:repeat(12,minmax(1px,1fr)); gap: 1px; }

.x { grid-column: span auto;} 
.x1 { grid-column: span 1;} 
.x2 { grid-column: span 2;} 
.x3 { grid-column: span 3;} 
.x4 { grid-column: span 4;} 
.x5 { grid-column: span 5;} 
.x6 { grid-column: span 6;} 
.x7 { grid-column: span 7;} 
.x8 { grid-column: span 8;} 
.x9 { grid-column: span 9;} 
.x10 { grid-column: span 10;} 
.x11 { grid-column: span 11;} 
.x12 { grid-column: span 12;} 

/* 小于768宽度 */
@media screen and (max-width:768px){
	.ma1 { grid-template-columns:repeat(1,1fr);} 
	.ma2 { grid-template-columns:repeat(2,1fr);} 
	.ma3 { grid-template-columns:repeat(3,1fr);} 
	.ma4 { grid-template-columns:repeat(4,1fr);} 
	.ma5 { grid-template-columns:repeat(5,1fr);} 
	.ma6 { grid-template-columns:repeat(6,1fr);} 
	.ma7 { grid-template-columns:repeat(7,1fr);} 
	.ma8 { grid-template-columns:repeat(8,1fr);} 
	.ma9 { grid-template-columns:repeat(9,1fr);} 
	.ma10 { grid-template-columns:repeat(10,1fr);} 
	.ma11 { grid-template-columns:repeat(11,1fr);} 
	.ma12 { grid-template-columns:repeat(12,1fr);} 

	.mx1 { grid-column: span 1;} 
	.mx2 { grid-column: span 2;} 
	.mx3 { grid-column: span 3;} 
	.mx4 { grid-column: span 4;} 
	.mx5 { grid-column: span 5;} 
	.mx6 { grid-column: span 6;} 
	.mx7 { grid-column: span 7;} 
	.mx8 { grid-column: span 8;} 
	.mx9 { grid-column: span 9;} 
	.mx10 { grid-column: span 10;} 
	.mx11 { grid-column: span 11;} 
	.mx12 { grid-column: span 12;} 
	.container { overflow: hidden;}
	.mdn { display: none;}
	.mdb { display: block;}
	.moa { overflow: auto;}
	.table th { min-width: 100px; }
}

.h-100 { height: 100% !important;}
.h-90 { height: 90% !important;}
.h-80 { height: 80% !important;}
.h-70 { height: 70% !important;}
.h-60 { height: 60% !important;}
.h-50 { height: 50% !important;}
.h-40 { height: 40% !important;}
.h-30 { height: 30% !important;}
.h-20 { height: 20% !important;}
.h-10 { height: 10% !important;}
.h-auto { height: auto !important;}
.w-100 { width: 100% !important;}
.w-90 { width: 90% !important;}
.w-80 { width: 80% !important;}
.w-70 { width: 70% !important;}
.w-60 { width: 60% !important;}
.w-50 { width: 50% !important;}
.w-40 { width: 40% !important;}
.w-30 { width: 30% !important;}
.w-20 { width: 20% !important;}
.w-10 { width: 10% !important;}
.w-auto { width: auto !important;}

.vh-100 { height: 100vh !important; }
.min-vh-100 { min-height: 100vh !important; }
.max-vh-100 { max-height: 100vh !important; }

.thumbnail img { height: 100%; width: 100%; object-fit: cover;}