/*-----------------[初始化]--------------*/
|
*{ font-family: PingFang SC;}
|
/* 清理浮动 */
|
.cle:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
|
.cle:after{zoom:1;}
|
.clear{clear: both;}
|
.tc{text-align:center;}
|
.tl{text-align:left}
|
.tr{text-align:right}
|
.fl{float: left;}
|
.fr{float: right;}
|
|
.wp{ width: 94%; margin: 0 auto;}
|
.w30{ width: 30%;}.w40{ width: 40%;}.w47{ width: 47%;}.w48{ width: 48%;}.w49{ width: 49%;}.w50{ width: 50%;}.w60{ width: 60%;}.w80{ width: 80%;}.w90{ width: 90%;}
|
|
.bg_fa{ background-color: #fafafa;}.bg_f2{ background-color: #f2f2f2;}.bg_f1{ background-color: #f1f1f1;}.bg_f5{ background-color: #f5f5f5;}.bg_f6{ background-color: #f6f6f6;}.bg_f7{ background-color: #f7f7f7;}.bg_f8{ background-color: #f8f8f8;}.bg_e{ background-color: #eee;}.bg_d{ background-color: #ddd;}.bg_w{ background-color: #fff;}.bg_3{ background-color: #333;}.bcf{ color: #fff;}.bc3{ color: #333;}.bcc{ color: #ccc;}.bc9{ color: #999;}.bc6{ color: #666;}
|
|
.rd4{border-radius: 4px;}.rd5{border-radius: 5px;}.rd6{border-radius: 6px;}.rd8{border-radius: 8px;}.rd10{border-radius: 10px;}.rd15{border-radius: 15px;}.rd20{border-radius: 20px;}.rd30{border-radius: 30px;}.rd40{border-radius: 40px;}.rd50{border-radius: 50px;}.rd60{border-radius: 60px;}.rd70{border-radius: 70px;}.rd80{border-radius: 80px;}.rd90{border-radius: 90px;}.rd100{border-radius: 100px;}.rd120{border-radius: 120px;}.rdhalf{ border-radius:50%}
|
|
.ml5{ margin-left: 5px;}.ml10{ margin-left: 10px;}.ml15{ margin-left: 15px;}.ml20{ margin-left: 20px;}.ml25{ margin-left: 25px;}.ml30{ margin-left: 30px;}.ml40{ margin-left: 40px;}.ml50{ margin-left: 50px;}.ml60{ margin-left: 60px;}
|
|
.mt5{ margin-top: 5px;}.mt10{ margin-top: 10px;}.mt15{ margin-top: 15px;}.mt20{ margin-top: 20px;}.mt25{ margin-top: 25px;}.mt30{ margin-top: 30px;}.mt35{ margin-top: 35px;}.mt40{ margin-top: 40px;}.mt45{ margin-top: 45px;}.mt50{ margin-top: 50px;}.mt60{ margin-top: 60px;}.mt70{ margin-top: 70px;}.mt80{ margin-top: 80px;}.mt90{ margin-top: 90px;}.mt100{ margin-top:100px;}.mt150{ margin-top:150px;}.mt200{ margin-top:200px;}.mt-20{ margin-top: -20px;}.mt-30{ margin-top: -30px;}.mt-40{ margin-top: -40px;}
|
|
.mb5{ margin-bottom: 5px;}.mb10{ margin-bottom: 10px;}.mb15{ margin-bottom: 15px;}.mb20{ margin-bottom: 20px;}.mb25{ margin-bottom: 25px;}.mb30{ margin-bottom: 30px;}.mb40{ margin-bottom: 40px;}.mb50{ margin-bottom: 50px;}.mb60{ margin-bottom: 60px;}.mb80{ margin-bottom: 80px;}
|
|
.mr5{ margin-right: 5px;}.mr10{ margin-right: 10px;}.mr15{ margin-right: 15px;}.mr20{ margin-right: 20px;}.mr25{ margin-right: 25px;}.mr30{ margin-right: 30px;}.mr40{ margin-right: 40px;}.mr60{ margin-right: 60px;}.mr80{ margin-right: 80px;}.mr100{ margin-right: 100px;}
|
|
.pl10{ padding-left: 10px;}.pl20{ padding-left: 20px;}.pl25{ padding-left: 25px;}.pl30{ padding-left: 30px;}.pl40{ padding-left: 40px;}.pl50{ padding-left: 50px;}.pl60{ padding-left: 60px;}.pl80{ padding-left: 80px;}.pl100{ padding-left: 100px;}
|
|
.pr10{ padding-right: 10px;}.pr20{ padding-right: 20px;}.pr25{ padding-right: 25px;}.pr30{ padding-right: 30px;}.pr40{ padding-right: 40px;}.pr50{ padding-right: 50px;}.pr60{ padding-right: 60px;}.pr80{ padding-right: 80px;}.pr100{ padding-right: 100px;}
|
|
.pb10{ padding-bottom: 10px;}.pb20{ padding-bottom: 20px;}.pb25{ padding-bottom: 25px;}.pb30{ padding-bottom: 30px;}.pb40{ padding-bottom: 40px;}.pb50{ padding-bottom: 50px;}.pb100{ padding-bottom: 100px;}
|
|
.pt10{ padding-top: 10px;}.pt20{ padding-top: 20px;}.pt25{ padding-top: 25px;}.pt30{ padding-top: 30px;}.pt40{ padding-top: 40px;}.pt50{ padding-top: 50px;}.pt100{ padding-top: 100px;}
|
|
.plr{ padding-left: 10px; padding-right: 10px;}.plr20{ padding-left: 20px; padding-right: 20px;}.plr25{ padding-left: 25px; padding-right: 25px;}.plr30{ padding-left: 30px; padding-right: 30px;}.plr40{ padding-left: 40px; padding-right: 40px;}.plr50{ padding-left: 50px; padding-right: 50px;}.plr60{ padding-left: 60px; padding-right: 60px;}
|
|
.ptb10{padding-bottom: 10px; padding-top: 10px;} .ptb15{padding-bottom: 15px; padding-top: 15px;} .ptb20{padding-bottom: 20px; padding-top: 20px;}.ptb25{padding-bottom: 25px; padding-top: 25px;}.ptb30{padding-bottom: 30px; padding-top: 30px;}.ptb35{padding-bottom: 35px; padding-top: 35px;}.ptb40{padding-bottom: 40px; padding-top: 40px;}.ptb50{padding-bottom: 50px; padding-top: 50px;}.ptb60{padding-bottom: 60px; padding-top: 60px;}.ptb80{padding-bottom: 80px; padding-top: 80px;}.ptb100{padding-bottom: 100px; padding-top: 100px;}.ptb150{padding-bottom: 150px; padding-top: 150px;}.ptb200{padding-bottom: 200px; padding-top: 200px;}
|
|
.p5{ padding:5px}.p10{ padding:10px} .p20{ padding:20px}.p30{ padding:30px}.p2030{ padding:20px 30px}.p40{ padding:40px}.p3040{ padding:30px 40px}
|
|
.f0{ font-size: 0px;} .f11{ font-size: 11px;}.f12{ font-size: 12px;}.f13{ font-size: 13px;}.f14{ font-size: 14px;}.f16{ font-size: 16px;}.f18{ font-size: 18px;}.f20{ font-size: 20px;}.f26{ font-size: 26px;}.f28{ font-size: 28px;}.f30{ font-size: 30px;}.f32{ font-size: 32px;}.f34{ font-size: 34px;} .f38{ font-size: 38px;}.f40{ font-size: 40px;} .f42{ font-size: 42px;}.f44{ font-size: 44px;}.f48{ font-size: 48px;}.f50{ font-size: 50px;}.f60{ font-size: 60px;}.f64{ font-size: 64px;}.f70{ font-size: 70px;}.f80{ font-size: 80px;}.f90{ font-size: 90px;}.f100{ font-size: 100px;}
|
|
.img16{ width: 16px; height: 16px;}
|
.img20{ width: 20px; height: 20px;}
|
.img24{ width: 24px; height: 24px;}
|
.img26{ width: 26px; height: 26px;}
|
.img30{ width: 30px; height: 30px;}
|
.img32{ width: 32px; height: 32px;}
|
.img36{ width: 36px; height: 36px;}
|
.img40{ width: 40px; height: 40px;}
|
.img48{ width: 48px; height: 48px;}
|
.img60{ width: 60px; height: 60px;}
|
.img66{ width: 66px; height: 66px;}
|
.img80{ width: 80px; height: 80px;}
|
.img86{ width: 86px; height: 86px;}
|
.img90{ width: 90px; height: 90px;}
|
.img100{ width: 100px; height: 100px;}
|
.img110{ width: 110px; height: 110px;}
|
.img120{ width: 120px; height: 120px;}
|
.img150{ width: 150px; height: 150px;}
|
.img180{ width: 180px; height: 180px;}
|
.img200{ width: 200px; height: 200px;}
|
.imgfull{ width: 100%;}
|
|
.rimb{ border-bottom: 1px solid #F1F1F1;}
|
.rimt{ border-top: 1px solid #F1F1F1;}
|
|
|
.bcover{ background-size: cover; background-position: center center; background-repeat: no-repeat;}
|
.bfull{ background-size: 100% 100%; background-position: center center; background-repeat: no-repeat;}
|
|
.b{ font-weight: bold;}
|
.ibm{ display: inline-block; vertical-align: middle;}
|
.bbox{ box-sizing: border-box;}
|
.rauto{ margin-left:auto; margin-right:auto}
|
.fixedBottom{position: fixed; left: 0; bottom: 0; width: 100%;}
|
.lh1-6{line-height: 1.6;}
|
.lh1-6{line-height: 1.6;}
|
.lh1-8{line-height: 1.8;}
|
.lh2{line-height: 2;}
|
|
.sbtn{ display: inline-block; padding: 0.7em 2em; border: 1px solid transparent; box-sizing: border-box; text-align: center;}
|
.mini{ font-size: 18px;}
|
.med{ font-size: 26px;}
|
.def{ font-size: 34px;}
|
.sbtn_w100{ width: 100%; padding-left: 0; padding-right: 0;}
|
.sbtn_green{ color: #fff; background:#65C35D; }
|
.sbtn_green_rim{ color: #65C35D; border-color:#65C35D; }
|
.sbtn_black{ color: #fff; background:#333; }
|
.sbtn_gray{ color: #333; background:#F7F7F7; }
|
.sbtn_black_rim{ color: #333; border-color:#eee; }
|
.sbtn_gray_rim{ color: #999; border-color:#ccc; }
|
/* flex */
|
.flex{ display: flex; flex-wrap: wrap; justify-content: space-between;}
|
.cXY{ display: flex; align-items: center;justify-content: center;}
|
.cY{ display: flex; align-items: center;}
|
.cX{display: flex; justify-content: center}
|
.rowW{ display: flex; flex-wrap: wrap;}
|
.bX{ display: flex; flex-direction: row; justify-content: space-between;}
|
.bY{ display: flex; flex-direction:column; justify-content: space-between;}
|
.bcX{ display: flex; justify-content: space-between; align-items: center;}
|
.fx1{ flex: 1; overflow: hidden; }
|
|
.cAXY{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
|
.shadowA{box-shadow: 0 0 5px 0 #ddd;}
|
.shadowB{ position: relative;}
|
.shadowB::after{ content: ""; display: block; width: 100%; height: 8px; box-shadow: 0 6px 12px rgba(0,0,0,.08); top: -8px; left: 0; position: absolute; }
|
|
|
.orange{ color: #EA531B;}
|
.green{ color: #65C35D;}
|
.blue{ color: #3C77DA;}
|
.red{ color: #f00;}
|
.success{ color: #70B603; }
|
.waring{ color: #F59A23; }
|
.error{ color: #f00; }
|
/* /deep/ .uicon-close .u-icon--right{ position: absolute; right: 30px; top: 30px; z-index: 999;} */
|
.popCloseBtn{ position: absolute; width:50px; height:50px; right: 20px; top: 20px;}
|
.fixedHeader{ position: absolute; left: 0; top: 0;}
|
