/* public */
html{ height:100%;}
body{ color:#282828; min-width:1200px; font-size:13px; font-family:helvetica,microsoft yahei,hiragino sans gb,wenquanyi micro hei,sans-serif; background:#f0f2f5;}
*{ padding:0; margin:0; outline:none; list-style:none; border:none;}
article,aside,dialog,header,section,footer,nav,figure,menu{display:block}
p img{ max-width:100%;}
input,textarea{ font-family: helvetica,microsoft yahei,hiragino sans gb,wenquanyi micro hei,sans-serif;}
input::-webkit-input-placeholder{ color:#a1a1a1;}
input::-moz-placeholder{ color:#a1a1a1;}
input:-ms-input-placeholder{ color:#a1a1a1;}
/*  a  */
a{ color:#282828; text-decoration:none; cursor:pointer;}
a:hover,.a:hover{ color:#0099ff;}


/* layout */
.wrap{ position:relative; width:1200px; margin:0 auto; z-index:1;}
.wrap.mainh{ min-height: 600px;}
header{ position: fixed; height: 50px; background-color: #ffffff; border-bottom: #e6e6e6 1px solid; left: 0; top: 0; right: 0; z-index: 8;}
header .logo{ height: 36px; padding: 5px 0; float: left;}
header .logo img{ height: 100%; float: left;}
header nav{ height: 50px; float: left;}
header nav a{ position: relative; line-height: 50px; text-align: center; font-size: 14px; color: #282828; margin-left: 35px; margin-right: 20px; float: left;}
header nav a:hover{ color: #0099ff;}
header nav a.selected{ color: #0099ff;}
header nav a.selected:after{ position: absolute; height: 3px; background: #0099ff; left: 0; bottom: -1px; right: 0; content: "";}

header .app{ position: relative; height: 50px; line-height: 50px; padding-left: 30px; background: url(/uploads/image/pimages/icon-phone2.png) left center no-repeat; margin-right: 30px; float: left;}
header .app .ewm{ position: absolute; width: 260px; height: 120px; padding: 10px; background: #ffffff; border-radius: 4px; box-shadow: 0 5px 10px rgba(0,0,0,0.2); top: 50px; right: 0; display: none;}
header .app .ewm img{ width: 120px; height: 120px; float: left;}
header .app .ewm span{ height: 50px; line-height: 25px; color: #282828; padding: 35px 0; margin-left: 140px; display: block;}
header .app:hover .ewm{ display: block;}

header .side{ position: relative; height: 50px; float: right;}
header .side .search{ position: relative; width: 200px; height: 32px; background: #f6f6f6; border-radius: 16px; margin: 9px 10px; float: left;}
header .side .search input{ width: 100%; height: 32px; line-height: 32px; background: none; border: none; padding: 0 15px; box-sizing: border-box; float: left;}
header .side .search .iconbox{ position: absolute; width: 32px; height: 32px; background: url(/uploads/image/pimages/icon-search.png) center no-repeat; top: 0; right: 5px; cursor: pointer;}
header .side .search .clear{ position: absolute; width: 32px; height: 32px; background: url(/uploads/image/pimages/icon-clear.png) center no-repeat; top: 50%; margin-top: -16px; right: 30px; content: "";}

header .login{ height: 50px; float: left;}
header .login .nologin{ height: 32px; line-height: 32px; margin: 9px 0; float: left;}
header .login .nologin a{ width: 60px; height: 32px; text-align: center; color: #282828; border-radius: 16px; margin: 0 2px; float: left;}
header .login .nologin a:hover{ background: #f6f6f6;}

header .login .logined{ position: relative; height: 32px; line-height: 32px; padding: 9px 0; margin-left: 20px; cursor: pointer;}
header .login .logined a{ text-align: center; color: #666666; display: block;}
header .login .logined a img{ width: 32px; height: 32px; border-radius: 16px; float: left;}
header .login .logined label{ margin-left: 42px; max-width:80px; min-width: 60px; height: 32px; line-height: 32px; text-align: left; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor: pointer; display: block;}
header .login .logined ul{ position: absolute; background: #ffffff; left: 0; top: 50px; right: 0; border-radius: 4px; overflow: hidden; box-shadow: 0 5px 10px rgba(0,0,0,0.2); display: none;}
header .login .logined:hover ul{ display: block;}
header .login .logined ul li{ height: 40px; line-height: 40px; text-align: center;}
header .login .logined ul li a{ width: 100%; color: #282828;}
header .login .logined ul li a:hover{ color: #0099ff; background: #fafafa;}
header .login .logined ul li a.selected{ color: #0099ff; background: #fafafa;}


footer{ height: 120px; background-color: #363636;}
footer menu{ height: 30px; line-height: 30px; padding: 15px 0;}
footer menu a{ color: #ffffff; margin-right: 60px; float: left;}
footer menu a:hover{ color: #0099ff;}
footer .ewm{ position: absolute; height: 100px; top: 10px; right: 0;}
footer .ewm .imgbox{ width: 90px; height: 90px; background: #ffffff; padding: 5px; float: right;}
footer .ewm .imgbox img{ width: 90px; height: 90px; float: left;}
footer .ewm span{ height: 40; line-height: 20px; color: #ffffff; text-align: right; padding-top: 46px; margin-right: 110px; display: block;}
.footer_fixed {width: 100%; position: fixed; bottom: 0px; z-index: 10;}

.main-l{ width: 840px; background: #ffffff; border-radius: 5px; float: left;}
.main-r{ width: 350px; float: right;}

.gotop{ position: fixed; width: 30px; height: 30px; background-color: #282828; border-radius: 5px; background-image: url(/uploads/image/pimages/icon-gotop.png); background-repeat: no-repeat; background-position: center; right: 30px; bottom: 140px; z-index: 9;}
.fixedphone{ position: fixed; width: 30px; height: 30px; background-color: #282828; border-radius: 5px; background-image: url(/uploads/image/pimages/icon-fixed-phone.png); background-repeat: no-repeat; background-position: center; right: 30px; bottom: 180px; cursor: pointer; z-index: 9;}
.fixedphone .fixedewm{ position: absolute; width: 130px; height: 160px; background: #282828; border-radius: 5px; padding: 5px; left: -150px; top: -70px; display: none;}
.fixedphone:hover .fixedewm{ display: block;}
.fixedphone .fixedewm:after{ position: absolute; width: 0; height: 0; border: transparent 7px solid; border-left: #282828 8px solid; top: 78px; right: -13px; content: "";}
.fixedphone .fixedewm .imgbox{ width: 120px; height: 120px; background: #ffffff; padding: 5px; float: left;}
.fixedphone .fixedewm img{ width: 120px; height: 120px; float: left;}
.fixedphone .fixedewm label{ height: 30px; line-height: 35px; text-align: center; color: #ffffff; font-size: 12px; display: block;}

.prompt{ height: 40px; line-height: 40px; padding-left: 25px;}
.prompt.error{ color: #ff3366; background: url(/uploads/image/pimages/icon-error.png) left center no-repeat;}

.nodata{ position: relative; height: 300px; background: url(/uploads/image/pimages/search-none.png) center no-repeat;}
.nodata span{ position: absolute; height: 30px; line-height: 30px; color: #a1a1a1; text-align: center; left: 0; right: 0; top: 50%; margin-top: 60px;}

/* pop */
.mask{ position: fixed; background: #000000; opacity: 0.1; top: 0; left: 0; right: 0; bottom: 0; z-index: 10;}
.pop{ position: fixed; background: #ffffff; box-shadow: 0 0 15px rgba(0,0,0,0.6); top: 50%; left: 50%; z-index: 11;}
.pop .close{ position: absolute; width: 40px; height: 40px; line-height: 40px; background-image: url(/uploads/image/pimages/pop-close.png); background-repeat: no-repeat; background-position: center; background-size: 40%; top: 10px; right: 10px; cursor: pointer; z-index: 99;}
.pop .close:hover{ transform:rotate(180deg); -ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg);}

/* logo pop */
.loginpop{ width: 400px; height: 520px; text-align: center; background: #ffffff; border-radius: 8px; margin-left: -200px; margin-top: -260px;}
/* .loginpop:after{ position: absolute; height: 200px; background: #0099ff; border-top-left-radius: 8px; border-top-right-radius: 8px; left: 0; top: -2px; right: 0; content: ""; z-index: 0;
	background:-moz-linear-gradient(top, #013367 0%, #2f30c0 100%);
	background: -webkit-gradient(linear, top top, top bottom, color-stop(0%,#013367), color-stop(100%,#2f30c0));
	background: -webkit-linear-gradient(top, #013367 0%, #2f30c0 100%); background: -o-linear-gradient(top, #013367 0%, #2f30c0 100%);
	background: -ms-linear-gradient(top, #013367 0%, #2f30c0 100%);
	background: linear-gradient(to bottom, #013367 0%, #2f30c0 100%);
} */
.loginpop .logo{ position: relative; width: 169px; height: 40px; margin: 30px auto; z-index: 1;}
.loginpop .form{ position: relative; width: 360px; height: 350px; background: #ffffff; border-radius: 8px; padding: 10px 20px; box-sizing: border-box; margin: 0 auto; z-index: 1;}

.loginpop .inputbox{ position: relative; height: 40px; border-bottom: #eeeeee 1px solid; box-sizing: border-box; background-repeat: no-repeat; background-position: 10px 10px;}
.loginpop .inputbox .phonecode{ position: relative; width: 70px; height: 38px; line-height: 38px; text-align: left; color: #868686; padding-left: 40px; cursor: pointer; float: left;}
.loginpop .inputbox .phonecode:after{ position: absolute; width: 1px; height: 20px; background: #eeeeee; top: 10px; right: 0; content: "";}
.loginpop .inputbox .phonecode ul{ position: absolute; width: 300px; height: 188px; border: #cccccc 1px solid; background: #ffffff; box-shadow: 0 0 5px rgba(0,0,0,0.2); padding: 5px 0; overflow: auto; left: 0; top: 34px; z-index: 8; display: none;}
.loginpop .inputbox .phonecode ul li{ width: 270px; height: 24px; line-height: 24px; color: #888888; background: #ffffff; border-radius: 0; margin: 0; padding: 0 15px; text-align: left; cursor: pointer;}
.loginpop .inputbox .phonecode ul li:hover{ background: #f2f2f2;}
.loginpop .inputbox input{ height: 38px; line-height: 38px; padding: 0 10px; background: none; border: none; box-sizing: border-box;}
.loginpop .inputbox.phone{ background-image: url(/uploads/image/pimages/icon-phone.png);}
.loginpop .inputbox.key{ background-image: url(/uploads/image/pimages/icon-key.png);}
.loginpop .inputbox.code{ background-image: url(/uploads/image/pimages/icon-code.png);}
.loginpop .sendcode{ width: 110px; height: 40px; line-height: 38px; text-align: center; color: #0099ff; border: #0099ff 1px solid; border-radius: 4px; box-sizing: border-box; cursor: pointer; float: right;}
.loginpop .sendcode:hover{ color: #0066ff; border-color: #0066ff;}
.loginpop .sendcode.disabled{ color: #a1a1a1; border-color: #fafafa; background: #fafafa;}
.loginpop a:hover{ color: #0066ff;}
.loginpop .btn{ font-size: 16px;}

.loginpop .iconlist{ height: 30px; line-height: 30px; text-align: center; padding: 15px 0;}
.loginpop .iconlist a{ width: 30px; height: 30px; margin: 0 40px; background-repeat: no-repeat; background-position: center; background-size: 100%; display: inline-block;}
.loginpop .iconlist a.icon-weixin{ background-image: url(/uploads/image/pimages/login-wx.png);}
.loginpop .iconlist a.icon-weibo{ background-image: url(/uploads/image/pimages/login-wb.png);}

/* tabpanel */
.tabpanel-a .tap-head{ position: relative; height: 50px; line-height: 50px; padding: 0 10px;}
.tabpanel-a .tap-head:after{ position: absolute; height: 1px; background: #eeeeee; left: 0; right: 0; bottom: 0; content: "";}
.tabpanel-a .tap-head li{ position: relative; height: 50px; font-size: 14px; color: #868686; text-align: center; padding: 0 15px; cursor: pointer; float: left;;}
.tabpanel-a .tap-head li a{ color: #868686; display: block;}
.tabpanel-a .tap-head li:hover{ color: #282828;}
.tabpanel-a .tap-head li.selected{ color: #282828; font-weight: bold;}
.tabpanel-a .tap-head li.selected:after{ position: absolute; width: 20px; height: 4px; background: #0099ff; border-radius: 2px; left: 50%; margin-left: -10px; bottom: 0; content: "";}


/* panner */
.pannel-a{ background: #ffffff; border-radius: 5px;}
.pannel-a h3{ position: relative; height: 50px; line-height: 50px; color: #0099ff; font-size: 16px; padding: 0 20px;}
.pannel-a h3:after{ position: absolute; height: 1px; background: #eeeeee; left: 0; right: 0; bottom: 0; content: "";}

/* list */
.list-a dl{ background: #ffffff; padding: 20px;}
.list-a dl:hover{ background: #fafafa;}
.list-a dt{ width: 200px; height: 150px; border-radius: 5px; overflow: hidden; float: left;}
.list-a dt img{ width: 200px; height: 150px; float: left;}
.list-a dd{ position: relative; min-height: 150px; margin-left: 220px;}
.list-a dd h2{ max-height: 50px; line-height: 25px; font-size: 18px; color: #282828; padding-top: 8px; margin-bottom: 10px;}
.list-a dd p{ max-height: 40px; font-size: 13px; line-height: 20px; color: #868686;}
.list-a dd label{ position: absolute; height: 24px; line-height: 24px; color: #aaaaaa; left: 0; bottom: 8px; right: 0;}
.list-a dd label img{ width: 24px; height: 24px; border-radius: 50%; margin-right: 10px; float: left;}

.titlelist .list-a dl{ padding: 0 20px; border-bottom: #eeeeee 1px solid;}
.titlelist .list-a dl:first-child{ margin-top: 10px;}
.titlelist .list-a dt{ display: none;}
.titlelist .list-a dd{ position: relative; min-height: auto; height: 60px; padding-left: 20px; margin-left: 0;}
.titlelist .list-a dd:before{ position: absolute; width: 6px; height: 6px; background: #0088ff; border-radius: 50%; left: 0; top: 50%; margin-top: -3px; content: "";}
.titlelist .list-a dd h2{ max-height: 60px; line-height: 60px; font-weight: normal; padding: 0; margin: 0; margin-right: 100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -webkit-line-clamp: 1;}
.titlelist .list-a dd p,.titlelist .list-a dd label a{ display: none;}
.titlelist .list-a dd label{ width: auto; left: auto; bottom: 15px;}

/* btn */
.btn{ height: 40px; line-height: 40px; text-align:center; color:#fff; font-size:13px; padding:0px 10px; border-radius: 4px; box-sizing: border-box; cursor:pointer;}
.btn.btn-a{ background:#0099ff;}
.btn.btn-a:hover{ background:#0088ff;}
.btn.btn-b{ color: #282828; background: #ffffff; border: #eeeeee 1px solid;}
.btn.btn-b:hover{ color: #0099ff;}
.btn.btn-small{ height: 30px; line-height: 30px;}

.btn.disabled{ border-color:#ccc; background:#ccc; color:#888; cursor:default;}
.btn.disabled:hover{ color:#888; background:#ccc;}

/* switch */
.switch{ position:relative; width:32px; height:17px; border-radius:9px; cursor:pointer; background-color:#dddddd; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s;}
.switch i{ position:absolute; left:2px; top:2px; width:13px; height:13px; border-radius:50%; background-color:#ffffff; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s;}
.switch.selected{ background-color:#1890ff}
.switch.selected i{ left:17px;}


/* page */
.page{ height:32px; padding:15px 0; text-align:right;}
.page ul{ float: right;}
.page li{ width:30px; height:30px; line-height:30px; text-align:center; font-size:14px; border: #eeeeee 1px solid; background:#fff; cursor:pointer; margin:0 5px; float:left;}
.page li a{ color: #a0a0a0; display:block;}
.page li:hover{ border-color: #aaaaaa;}
.page li:hover a{ color: #333333;}
.page li.active,.page li.selected{ border-color:#555555; background: #555555;}
.page li.active a,.page li.selected a{ color: #ffffff;}
.page li.disabled{ color: #aaaaaa;}
.page li.disabled:hover{ border-color: #eeeeee;}
.page li.prev,.page li.next{ width:60px;}


/* loading */
.loading{ position:absolute; background: rgba(0,0,0,0.1); left: 0; top: 0; right: 0; bottom: 0; z-index:11;}
.loading:after{ position:absolute; width: 60px; height: 60px; background-image:url(/uploads/image/pimages/loading.gif); background-size: contain; top:50%; left: 50%; margin-left: -30px; margin-top: -30px; content: "";}
.loading.fixed{ position: fixed; background-color: transparent;}
.loading-more{ position:absolute; width: 20px; height: 20px; background-image:url(/uploads/image/pimages/loading-s.png); background-position: center; background-repeat: no-repeat; top:50%; left: 50%; margin-left: -10px; margin-top: -10px; animation: loading 1s linear infinite; z-index:11;}
@keyframes loading{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-webkit-keyframes loading
{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-moz-keyframes loading
{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* img */
img.overtobig{ transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s;}
img.overtobig.gray{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);}
img.overtobig:hover{ filter: grayscale(0%); -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1);}

.fade3s{ transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s;}
.fade5s{ transition:all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s;}

/* width */
.w-auto{ width:auto;}
.w-per5{ width:5%;}
.w-per10{ width:10%;}
.w-per15{ width:15%;}
.w-per20{ width:20%;}
.w-per25{ width:25%;}
.w-per30{ width:30%;}
.w-per35{ width:35%;}
.w-per40{ width:40%;}
.w-per45{ width:45%;}
.w-per50{ width:50%;}
.w-per55{ width:55%;}
.w-per60{ width:60%;}
.w-per65{ width:65%;}
.w-per70{ width:70%;}
.w-per75{ width:75%;}
.w-per80{ width:80%;}
.w-per85{ width:85%;}
.w-per90{ width:90%;}
.w-per95{ width:95%;}
.w-per100{ width:100%;}

.w-0{ width:0px;}
.w-5{ width:5px;}
.w-10{ width:10px;}
.w-15{ width:15px;}
.w-20{ width:20px;}
.w-25{ width:25px;}
.w-30{ width:30px;}
.w-35{ width:35px;}
.w-40{ width:40px;}
.w-45{ width:45px;}
.w-50{ width:50px;}
.w-60{ width:60px;}
.w-70{ width:70px;}
.w-80{ width:80px;}
.w-90{ width:90px;}
.w-100{ width:100px;}
.w-120{ width:120px;}
.w-150{ width:150px;}
.w-180{ width:180px;}
.w-200{ width:200px;}
.w-240{ width:240px;}
.w-250{ width:250px;}
.w-300{ width:300px;}
.w-350{ width:350px;}
.w-500{ width:500px;}

/* height */
.h-auto{ height:auto;}
.h-0{ height:0px;}
.h-5{ height:5px;}
.h-10{ height:10px;}
.h-15{ height:15px;}
.h-20{ height:20px;}
.h-25{ height:25px;}
.h-30{ height:30px;}
.h-35{ height:35px;}
.h-40{ height:40px;}
.h-45{ height:45px;}
.h-50{ height:50px;}
.h-55{ height:55px;}
.h-60{ height:60px;}
.h-80{ height:80px;}
.h-100{ height:100px;}
.h-per100{ height:100%;}

/* line-height */
.line-h-0{ line-height:0px;}
.line-h-5{ line-height:5px;}
.line-h-10{ line-height:10px;}
.line-h-15{ line-height:15px;}
.line-h-20{ line-height:20px;}
.line-h-22{ line-height:22px;}
.line-h-24{ line-height:24px;}
.line-h-25{ line-height:25px;}
.line-h-28{ line-height:28px;}
.line-h-30{ line-height:30px;}
.line-h-35{ line-height:35px;}
.line-h-40{ line-height:40px;}
.line-h-45{ line-height:45px;}
.line-h-50{ line-height:50px;}
.line-h-55{ line-height:55px;}
.line-h-60{ line-height:60px;}
.line-h-80{ line-height:80px;}
.line-h-per100{ line-height:100%;}

/* other */
.opacity-hide{ width:0px; height:0px; filter:alpha(opacity=0); opacity:0; display: inherit;}
.relative{ position:relative;}
.absolute{ position:absolute;}
.fixed{ position:fixed;}

.show{ display:block;}
.hide{ display:none;}
.vhide{ visibility: hidden;}
.inline-block{ display:inline-block;}

.over-hidden{ overflow:hidden;}
.over-x-auto{ overflow-x:auto;}
.over-y-auto{ overflow-y:auto;}
.over-visible{ overflow:visible;}
.over-auto{ overflow:auto;}

.clear{ clear:both;}

.break-word{ word-wrap:break-word; word-break:normal;} /* 强制换行 */
.ellipsis-1{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} /* 单行省略 */
.ellipsis-2{ display:-webkit-box;overflow:hidden; white-space:normal!important; text-overflow:ellipsis; word-wrap:break-word; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.ellipsis-3{ display:-webkit-box;overflow:hidden; white-space:normal!important; text-overflow:ellipsis; word-wrap:break-word; -webkit-line-clamp:3; -webkit-box-orient:vertical}
.ellipsis-4{ display:-webkit-box;overflow:hidden; white-space:normal!important; text-overflow:ellipsis; word-wrap:break-word; -webkit-line-clamp:4; -webkit-box-orient:vertical}


.pointer{ cursor:pointer;}
.curdef{ cursor:default;}

/* text */
.bold{ font-weight:bold;}
.normal{ font-weight:normal; font-style:normal;}
.through{ text-decoration:line-through;}
.underline{ text-decoration:underline;}

/* radius */
.radius-0{ border-radius:0;}
.radius-3{ border-radius:3px;}
.radius-5{ border-radius:5px;}
.radius-10{ border-radius:10px;}
.radius-per50{ border-radius:50%;}
.radiu-tln{ border-top-left-radius:0;}
.radiu-trn{ border-top-right-radius:0;}
.radiu-bln{ border-bottom-left-radius:0;}
.radiu-brn{ border-bottom-right-radius:0;}

/* margin */
.margin-0{ margin:0px;}
.margin-5{ margin:5px;}
.margin-10{ margin:10px;}
.margin-15{ margin:15px;}
.margin-20{ margin:20px;}
.margin-30{ margin:30px;}
.margin-50{ margin:50px;}

.margin-t0{ margin-top:0px;}
.margin-t1{ margin-top:1px;}
.margin-t2{ margin-top:2px;}
.margin-t3{ margin-top:3px;}
.margin-t5{ margin-top:5px;}
.margin-t10{ margin-top:10px;}
.margin-t15{ margin-top:15px;}
.margin-t20{ margin-top:20px;}
.margin-t25{ margin-top:25px;}
.margin-t30{ margin-top:30px;}
.margin-t35{ margin-top:35px;}
.margin-t40{ margin-top:40px;}
.margin-t45{ margin-top:45px;}
.margin-t50{ margin-top:50px;}

.margin-b0{ margin-bottom:0px;}
.margin-b1{ margin-bottom:1px;}
.margin-b2{ margin-bottom:2px;}
.margin-b3{ margin-bottom:3px;}
.margin-b5{ margin-bottom:5px;}
.margin-b10{ margin-bottom:10px;}
.margin-b15{ margin-bottom:15px;}
.margin-b20{ margin-bottom:20px;}
.margin-b25{ margin-bottom:25px;}
.margin-b30{ margin-bottom:30px;}
.margin-b40{ margin-bottom:40px;}
.margin-b45{ margin-bottom:45px;}
.margin-b50{ margin-bottom:50px;}

.margin-l0{ margin-left:0px;}
.margin-l1{ margin-left:1px;}
.margin-l2{ margin-left:2px;}
.margin-l3{ margin-left:3px;}
.margin-l5{ margin-left:5px;}
.margin-l10{ margin-left:10px;}
.margin-l15{ margin-left:15px;}
.margin-l20{ margin-left:20px;}
.margin-l25{ margin-left:25px;}
.margin-l30{ margin-left:30px;}
.margin-l35{ margin-left:35px;}
.margin-l40{ margin-left:40px;}
.margin-l45{ margin-left:45px;}
.margin-l50{ margin-left:50px;}
.margin-l80{ margin-left:80px;}
.margin-l100{ margin-left:100px;}
.margin-l120{ margin-left:120px;}
.margin-l180{ margin-left:180px;}

.margin-r0{ margin-right:0px;}
.margin-r1{ margin-right:1px;}
.margin-r2{ margin-right:2px;}
.margin-r3{ margin-right:3px;}
.margin-r5{ margin-right:5px;}
.margin-r10{ margin-right:10px;}
.margin-r15{ margin-right:15px;}
.margin-r20{ margin-right:20px;}
.margin-r25{ margin-right:25px;}
.margin-r30{ margin-right:30px;}
.margin-r35{ margin-right:35px;}
.margin-r40{ margin-right:40px;}
.margin-r45{ margin-right:45px;}
.margin-r50{ margin-right:50px;}


/* padding */
.padding-0{ padding:0px;}
.padding-3{ padding:3px;}
.padding-5{ padding:5px;}
.padding-10{ padding:10px;}
.padding-15{ padding:15px;}
.padding-20{ padding:20px;}
.padding-30{ padding:30px;}
.padding-50{ padding:50px;}

.padding-t0{ padding-top:0px;}
.padding-t1{ padding-top:1px;}
.padding-t2{ padding-top:2px;}
.padding-t3{ padding-top:3px;}
.padding-t5{ padding-top:5px;}
.padding-t10{ padding-top:10px;}
.padding-t15{ padding-top:15px;}
.padding-t20{ padding-top:20px;}
.padding-t25{ padding-top:25px;}
.padding-t30{ padding-top:30px;}
.padding-t35{ padding-top:35px;}
.padding-t40{ padding-top:40px;}
.padding-t50{ padding-top:50px;}

.padding-b0{ padding-bottom:0px;}
.padding-b5{ padding-bottom:5px;}
.padding-b10{ padding-bottom:10px;}
.padding-b15{ padding-bottom:15px;}
.padding-b20{ padding-bottom:20px;}
.padding-b25{ padding-bottom:25px;}
.padding-b30{ padding-bottom:30px;}
.padding-b40{ padding-bottom:40px;}
.padding-b40{ padding-bottom:50px;}

.padding-l0{ padding-left:0px;}
.padding-l5{ padding-left:5px;}
.padding-l10{ padding-left:10px;}
.padding-l15{ padding-left:15px;}
.padding-l20{ padding-left:20px;}
.padding-l30{ padding-left:30px;}
.padding-l40{ padding-left:40px;}
.padding-l50{ padding-left:50px;}

.padding-r0{ padding-right:0px;}
.padding-r5{ padding-right:5px;}
.padding-r10{ padding-right:10px;}
.padding-r15{ padding-right:15px;}
.padding-r20{ padding-right:20px;}
.padding-r30{ padding-right:30px;}
.padding-r40{ padding-right:40px;}
.padding-r50{ padding-right:50px;}


/* float or align */
.float-l{ float:left;}
.float-r{ float:right;}
.float-c{ margin:auto;}
.align-l{ text-align:left;}
.align-r{ text-align:right;}
.align-c{ text-align:center;}
.align-j{ text-align:justify;}
.align-m{ align-items:center; display: flex;}

/* font */
.color-a{ color:#fff;}
.color-b{ color:#b2bbcd;}
.color-c{ color:#a1a1a1;}
.color-d{ color:#868686;}
.color-e{ color:#666;}
.color-f{ color:#282828;}
.color-g{ color:#000;}
.color-h{ color:#0099ff;}/*蓝色*/
.color-i{ color:#00aa00;}/*绿色*/
.color-j{ color:#3e8fe2;}/*蓝色*/
.color-k{ color:#ff9900;}/*黄色*/
.color-red{ color: #ff3366;}/*红色*/

.size-12{ font-size:12px;}
.size-13{ font-size:13px;}
.size-14{ font-size:14px;}
.size-15{ font-size:15px;}
.size-16{ font-size:16px;}
.size-17{ font-size:17px;}
.size-18{ font-size:18px;}
.size-20{ font-size:20px;}
.size-22{ font-size:22px;}
.size-24{ font-size:24px;}

.indent0{ text-indent:0px;}
.indent24{ text-indent:24px;}
.indent28{ text-indent:28px;}
.indent32{ text-indent:32px;}
.indent36{ text-indent:36px;}

/* bg */
.bg-a{ background:#fff;}
.bg-b{ background:#fafafa;}
.bg-c{ background:#dddddd;}
.bg-n{ background:none;}