﻿/*
通用CSS，不需要修改，也不影响其它页面，适合所有网站
作者：张洪
邮箱：zhanghong@web100.cc
版本：v2.2.20181118.1
*/

/* 高度 */
.wd-h1{ height: 1px!important;}
.wd-h5{ height: 5px!important;}
.wd-h10{ height: 10px!important;}
.wd-h15{ height: 15px!important;}
.wd-h20{ height: 20px!important;}
.wd-h30{ height: 30px!important;}
.wd-h40{ height: 40px!important;}
.wd-h50{ height: 50px!important;}
.wd-h60{ height: 60px!important;}
.wd-h100{ height: 100px!important;}

/* 宽度 */
.wd-w30{ width: 30px!important;}
.wd-w50{ width: 50px!important;}
.wd-w100{ width: 100px!important;}
.wd-w200{ width: 200px!important;}
.wd-w300{ width: 300px!important;}
.wd-w400{ width: 400px!important;}
.wd-w500{ width: 500px!important;}

/* margin&padding */
.wd-m0{ margin: 0px !important;}
.wd-m10{ margin: 10px !important;}
.wd-p0{ padding: 0px !important;}
.wd-p5{ padding: 5px !important;}
.wd-p10{ padding: 10px !important;}

.wd-mt0{ margin-top: 0px !important;}
.wd-mt5{ margin-top: 5px !important;}
.wd-mt10{ margin-top: 10px !important;}
.wd-mt20{ margin-top: 20px !important;}
.wd-mt30{ margin-top: 30px !important;}
.wd-mt40{ margin-top: 40px !important;}
.wd-mt50{ margin-top: 50px !important;}
.wd-mt100{ margin-top: 100px !important;}

.wd-mb0{ margin-bottom: 0px !important;}
.wd-mb5{ margin-bottom: 5px !important;}
.wd-mb10{ margin-bottom: 10px !important;}
.wd-mb20{ margin-bottom: 20px !important;}
.wd-mb30{ margin-bottom: 30px !important;}
.wd-mb40{ margin-bottom: 40px !important;}
.wd-mb50{ margin-bottom: 50px !important;}
.wd-mb100{ margin-bottom: 100px !important;}

.wd-ml0{ margin-left: 0px !important;}
.wd-ml5{ margin-left: 5px !important;}
.wd-ml10{ margin-left: 10px !important;}
.wd-ml20{ margin-left: 20px !important;}
.wd-ml30{ margin-left: 30px !important;}
.wd-ml40{ margin-left: 40px !important;}
.wd-ml50{ margin-left: 50px !important;}
.wd-ml100{ margin-left: 100px !important;}

.wd-mr0{ margin-right: 0px !important;}
.wd-mr5{ margin-right: 5px !important;}
.wd-mr10{ margin-right: 10px !important;}
.wd-mr20{ margin-right: 20px !important;}
.wd-mr30{ margin-right: 30px !important;}
.wd-mr40{ margin-right: 40px !important;}
.wd-mr50{ margin-right: 50px !important;}
.wd-mr100{ margin-right: 100px !important;}

.wd-pt0{ padding-top: 0px !important;}
.wd-pt5{ padding-top: 5px !important;}
.wd-pt10{ padding-top: 10px !important;}
.wd-pt20{ padding-top: 20px !important;}
.wd-pt30{ padding-top: 30px !important;}
.wd-pt40{ padding-top: 40px !important;}
.wd-pt50{ padding-top: 50px !important;}
.wd-pt100{ padding-top: 100px !important;}

.wd-pb0{ padding-bottom: 0px !important;}
.wd-pb5{ padding-bottom: 5px !important;}
.wd-pb10{ padding-bottom: 10px !important;}
.wd-pb20{ padding-bottom: 20px !important;}
.wd-pb30{ padding-bottom: 30px !important;}
.wd-pb40{ padding-bottom: 40px !important;}
.wd-pb50{ padding-bottom: 50px !important;}
.wd-pb100{ padding-bottom: 100px !important;}

.wd-pl0{ padding-left: 0px !important;}
.wd-pl5{ padding-left: 5px !important;}
.wd-pl10{ padding-left: 10px !important;}
.wd-pl20{ padding-left: 20px !important;}
.wd-pl30{ padding-left: 30px !important;}
.wd-pl40{ padding-left: 40px !important;}
.wd-pl50{ padding-left: 50px !important;}
.wd-pl100{ padding-left: 100px !important;}

.wd-pr0{ padding-right: 0px !important;}
.wd-pr5{ padding-right: 5px !important;}
.wd-pr10{ padding-right: 10px !important;}
.wd-pr20{ padding-right: 20px !important;}
.wd-pr30{ padding-right: 30px !important;}
.wd-pr40{ padding-right: 40px !important;}
.wd-pr50{ padding-right: 50px !important;}
.wd-pr100{ padding-right: 100px !important;}



/* 浮动 */
.wd-fleft,.wd-fl{ float: left!important; }
.wd-fright,.wd-fr{ float: right!important; }
.wd-clear{ clear:both!important; }

/* 对齐 */
.wd-c{ margin-left: auto; margin-right: auto;}
.wd-center{ text-align:center!important; }
.wd-left{ text-align:left!important; }
.wd-right{ text-align:right!important; }
.wd-vm { vertical-align: middle!important;}

/* 显示方式 */
.wd-in { display: inline!important;}
.wd-inb { display: inline-block!important;}
.wd-block { display: block!important;}

/* 粗体 */
.wd-bold{font-weight: bold!important;}
.wd-nobold{font-weight: normal!important;}

/* 边框 */
.wd-border{ border: 1px solid red!important; }
.wd-radius{ border-radius:5px; }
.wd-circle{ border-radius:50%!important; }

/* Color */
.wd-red { color: red!important; }
.wd-green { color: green!important; }
.wd-blue { color: blue!important; }
.wd-white { color: white!important; }
.wd-black { color: black!important; }
.wd-orange { color: orange!important; }
.wd-purple { color: purple!important; }
.wd-333 { color: #333!important; }
.wd-666 { color: #666!important; }
.wd-999 { color: #999!important; }
.wd-ccc { color: #ccc!important; }
.wd-efefef { color: #efefef!important; }

/* 背景色Color */
.wd-bg-red { background-color: red!important; }
.wd-bg-green { background-color: green!important; }
.wd-bg-blue { background-color: blue!important; }
.wd-bg-white { background-color: white!important; }
.wd-bg-black { background-color: black!important; }
.wd-bg-orange { background-color: orange!important; }
.wd-bg-purple { background-color: purple!important; }
.wd-bg-cyan { background-color: cyan!important; }
.wd-bg-lightgray { background-color: #F0F0F0!important; }
.wd-bg-ccc { background-color: #ccc!important; }
.wd-bg-999 { background-color: #999!important; }


/* 字体 */
.wd-f-geo { font-family: "Georgia"!important;}
.wd-f-yahei { font-family: "微软雅黑"!important;}

/*字号*/
.wd-fs10{font-size:10px!important;}
.wd-fs12{font-size:12px!important;}
.wd-fs14{font-size:14px!important;}
.wd-fs16{font-size:16px!important;}
.wd-fs18{font-size:18px!important;}
.wd-fs20{font-size:20px!important;}
.wd-fs22{font-size:22px!important;}
.wd-fs24{font-size:24px!important;}
.wd-fs26{font-size:26px!important;}

/*响应式*/
.wd-resps{max-width: 100%;}


/* flex 栅格 */
.wd-flex-g{ display: flex; }
.wd-flex-g-1{ width: 100%}
.wd-flex-g-2{ width: 50%}
.wd-flex-g-3{ width: 33.33%}
.wd-flex-g-4{ width: 25%}
.wd-flex-g-5{ width: 20%}
.wd-flex-g-8{ width: 12.5%}
.wd-flex-g-10{ width: 10%}


/*--------------------以下为复杂样式---------------------------*/

/*链接*/
.wd-link{ cursor: pointer; }

/* 按钮 */
.wd-btn { box-sizing: content-box; display:inline-block; padding: 8px 16px; height: 18px; line-height: 18px; background-color:#ccc; color:#333; text-align:center; font-size: 16px; border:0px; }
.wd-btn-blue { background-color:#0e90d2; color:#fff; }
.wd-btn-green { background-color:#5eb95e; color:#fff; }
.wd-btn-orange { background-color:#F37B1D; color:#fff; }
.wd-btn-red { background-color:#dd514c; color:#fff; }
.wd-btn-xs{ height: 14px; line-height: 14px; padding: 6px 12px; font-size: 12px; }
.wd-btn-xs.wd-radius{ border-radius: 2px; }
.wd-btn-sm{ height: 16px; line-height: 16px; padding: 7px 14px; font-size: 14px; }
.wd-btn-sm.wd-radius{ border-radius: 3px; }
.wd-block { display: block; }

/*一幅图轮播*/
.wd-lunbo{ position: relative;}
.wd-lunbo .bd{ overflow: hidden; }
.wd-lunbo .bd ul{ margin:0px; padding:0px; }
.wd-lunbo .bd ul li{ background-repeat: no-repeat; background-attachment: scroll; background-position:center; list-style:none; padding:0; margin:0;}
.wd-lunbo>.bd>ul>li>img{ border:0; max-width: 100%;}
.wd-lunbo .hd{ position: absolute;}
.wd-lunbo .hd ul{ text-align:center;}
.wd-lunbo .hd ul li{display: inline-block;}
.wd-lunbo .hd ul li.on{}

/*分页*/
.wd-page-div { text-align:center; font-size:14px;}
.wd-page-div a{ margin-right:10px; display: inline!important; color:#999;}
.wd-page-div span{ margin-right:10px; display: inline!important;}

/*分割线*/
.wd-line{width:100%;height:1px; border-bottom:1px solid #ccc;}
.wd-line-dashed{border-bottom:1px dashed #ccc!important;}



/*上传图片*/
.wd-up-p{position: relative; width:140px; height:30px;}
.wd-up-s{width:140px; height:30px; background-color: #e6e6e6; border-radius:2px; font-size:1.4rem; line-height:30px; text-align:center; color:#666;}
.wd-up-f{position: absolute; top:0; left:0; width:0px; height:0px;}
.wd-up-item{ margin-top:10px; width:100px; height:120px; text-align: center; display: table-cell; vertical-align: top;}
.wd-up-item-div{ width:100px; height:100px; border:1px solid #efefef; padding:1px; display: table-cell; vertical-align: middle; text-align: center;}
.wd-up-item-img{max-width:100px; max-height:100px;}
.wd-up-item-del{color: #666;}
.wd-up-split{ display: table-cell; width:10px;}



/* wdvalidate */
.wd-valid-errmsg{display: block; margin-top: 5px; margin-bottom: 10px; color: #ff3322;
}
.wd-valid-errborder{border-color:#ff3322!important;}


/*数量加减*/
.wd-numinput{ box-sizing: border-box; width: 120px; height: 35px; border: solid 1px #bbb; border-radius: 3px; display: flex; }
/*减号*/
.wd-numinput-sub{ width: 40px; height:33px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #555; background-color: #f9f9f9; }
/*加号*/
.wd-numinput-add{ width: 40px; height:33px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #555; background-color: #f9f9f9; }
/*数字*/
.wd-numinput-num{ box-sizing: border-box; width: 40px !important; height: 33px !important; padding:4px !important; border:0 !important; border-left: 1px solid #ccc !important; border-right: 1px solid #ccc !important; text-align: center; line-height:33px; color: #666 !important; }