.viewport{max-width: 640px; min-width: 320px; margin: 0 auto;}
.jiazai_mengban{position: fixed; width: 100%; height: 100%; z-index: 9; display: none;} /* 加载提示 */
.zaizhong{ display: none; background:#000; width:200px; height:100px; position:fixed; border-radius:10px; opacity:0.7; color:#FFF; text-align:center; line-height:100px; top:50%; left:50%; margin-top:-50px; margin-left:-100px; font-size:16px; z-index: 999;}

/* common */
.exchange_box{display: block;}
.mask{position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: #333; opacity: .5; z-index: 99;}
.exchange_box_list{position: fixed; width: 280px; height: 220px; margin:auto; padding: 15px 0 15px 15px; top: 90px; left:0; right: 0; background-color: #fff;}
.exchange_box_list h2{margin-bottom: 15px; font-size: 16px;}
.exchange_box_list ul li{height: 20px; line-height: 14px; margin-bottom: 5px; overflow: hidden; word-break:break-all;}
.exchange_opt_coupon{display: inline-block; width: 90px;}
.exchange_opt_cost{display: inline-block; width: 105px;}
.exchange_opt_count, .exchange_opt_done{color: #B12399;}
#exchange_quit{position: absolute;top: 5px; right: 5px; width: 30px; height: 30px; background: url(../img/exit_btn.png) no-repeat 5px 5px;}
#exchange_confirm{ position: absolute; width: 100px; height: 22px; padding: 3px 0; left: 95px; bottom: 15px; background-color: #F1376C; color: #fff; font-family: "微软雅黑","Microsoft YaHei"; font-size: 15px; text-align: center; line-height: 20px; border-radius: 4px;}

/* 信息弹窗组件 showTipBox */
/*.waiting_msg{width: 80px; height: 22px; padding-left: 25px; background:#fff url(../img/gun.gif) no-repeat 5px; position: fixed; margin: auto; top: 150px; left: 0; right: 0; line-height: 22px; border-radius: 2px; border: 2px solid #F1376C;}*/
/*.tip_msg_content{text-align: center; font-size: 16px; margin-top: 20px;}*/
.confirm_btn{position: absolute; width: 100px; height: 24px; margin-left: -50px; padding: 3px 0; left: 50%; bottom: 15px; background-color: #F1376C; color: #fff; font-family: "微软雅黑","Microsoft YaHei"; font-size: 15px; text-align: center; line-height: 24px; border-radius: 4px;}
.waiting_msg{width: 80px; height: 22px; padding-left: 25px; background:#fff url(../images/gun.gif) no-repeat 5px; position: fixed; margin: auto; top: 150px; left: 0; right: 0; line-height: 22px; border-radius: 2px; border: 2px solid #F1376C;}
.tip_msg{width: 80%; /*height: 100px;*/ padding: 15px; background-color: #fff; position: fixed; margin: auto; top: 150px; left: 0; right: 0;
  -webkit-animation:scaleToBig .4s;
  animation:scaleToBig .4s;
}
/* tipmsg2 */
.tip_msg2{width:80%;height: 75%; padding: 15px; background-color: #fff; position: fixed; margin: auto; top: 60px; left: 0; right: 0; z-index: 99;
  -webkit-animation:scaleToBig .4s;
  animation:scaleToBig .4s;
  OVERFLOW-Y: auto;
}
.tip_msg_content{text-align: center; font-size: 16px; margin-bottom: 42px;}
.tip_msg_content p{line-height: 1.5;}
.tip_msg_content_title{color: #F1376C;}
.tip_msg_content_body{overflow-x: hidden; overflow-y: auto; max-height: 200px; margin-top: 10px; padding: 10px; border: 1px solid #ddd;}
.tip_msg_content_body p{font-size: 13px; text-align: left;}
.tip_msg_detail {margin-bottom: 36px;}
.tip_msg_detail li {overflow: hidden; position: relative;}
.tip_msg_detail li:first-child div{overflow: hidden;}
.tip_msg_detail li:first-child p{margin-top: 5px;}
.tip_msg_detail .tip_msg_detail_store{position: absolute; right: 20px; bottom: 12px;}
.tip_msg_detail .tip_msg_detail_store span{color: #F1376C;}
.tip_msg_detail .tip_msg_detail_item{padding: 5px;}
.tip_msg_detail .tip_msg_detail_item span{float: left;margin-top: 5px; margin-right: 12px;}
.tip_msg_detail .tip_msg_detail_item b{display: inline-block; margin-right: 10px; margin-bottom: 8px; padding: 5px 10px; border: 1px solid #F1376C;}
.tip_msg_detail .tip_msg_detail_item b.active{background: #F1376C; color: #fff;}
.tip_msg_detail .tip_msg_detail_item div{overflow: hidden;}
.tip_msg_detail_item .tip_msg_detail_item_num{color: #F1376C;}
.tip_msg_detail .tip_msg_detail_item .tip_msg_detail_price span{float: none;}
.tip_msg_detail .tip_msg_detail_item:nth-child(4) div{margin-top: 5px;}
.tip_msg_detail_price{font-size: 18px; color: #F1376C; line-height: 1.3;}
.tip_msg_detail .tip_msg_detail_img{float: left; margin: 5px 10px 10px 5px; width: 100px;}
.confirm_btn2{position: absolute; width: 90px; height: 24px; padding: 3px 0; right: 28px;margin-bottom: 5%;background-color: #F1376C; color: #fff; font-family: "微软雅黑","Microsoft YaHei"; font-size: 15px; text-align: center; line-height: 24px; border-radius: 4px;}
.cancel_btn{position: absolute;width: 90px;  height: 24px; padding: 3px 0; left: 28px;margin-bottom: 5%;background-color: #F1376C; color: #fff; font-family: "微软雅黑","Microsoft YaHei"; font-size: 15px; text-align: center; line-height: 24px; border-radius: 4px;}




/* bargain.php */
.bargain-header{text-align: center; padding: 3em 0; background: url(../images/kanjia-header.jpg) no-repeat top center;background-size: cover;}
.bargain-header h1{font-size: 30px; color: #F1376C;}
.bargain-header p{line-height: 1.5; color: #F1376C; padding: 0 30px;}
.bargain-container{padding: 10px;}
.bargain-product img{width: 100%;}
.bargin-productmsg{overflow: hidden; padding: 10px 20px; color: #888;}
.bargin-productmsg p{margin: 10px 0; overflow: hidden;}
.bargin-productmsg .bargin-product-name{}
.bargin-productmsg .bargin-product-price{float: left;}
.bargin-productmsg .bargin-product-bargain-price{float: right; color: #F1376C;}
.bargain-btn{text-align: center;}
.bargain-btn span{display: inline-block; margin-top: 10px; padding: 10px 28px; color: #fff;border-radius: 6px; background-color: rgb(26, 189, 69);}
.bargain-intro{text-align: center;margin-top: 30px;}
.bargain-intro p{line-height: 1.7; color: #888; padding: 20px 30px; border: 1px solid #cecece; font-size: 13px;}
.bargain-intro span{color: #888; text-decoration: underline;}

/* my-bargain-list.php */
.my-bargain{}
.my-bargain-header{padding: 2em; position: relative; background: #D92559; margin-bottom:22px;}
.my-bargain-header h1{display: none; text-align: center; text-indent: -999px; font-size: 20px; color: #fff;}
.my-bargain-header img{width: 100%;}
.my-bargain-data {margin-top: 20px; color: #fff; font-size: 12px; text-align: center;}
.my-bargain-data span:first-child{margin-right: 10px;}
.my-bargain-data-font {position: relative; top: 2px; color: yellow; font-size: 20px;}
.my-bargain ul .bargain-item{overflow: hidden; margin: 0 0 10px; background: #fff; position: relative;}
.my-bargain ul .bargain-item .item-header{position: relative; overflow: hidden; padding: 10px;}
.item-header-left{float: left; width: 28%; margin-right: 10px;}
.item-img{display: block; width: 100%; }
.item-header-right{overflow: hidden;}
.item-header-right del{color: #999; margin-left: 12px;}
.item-header-right-bottom{position: absolute; bottom: 10px; width: -webkit-calc(72% - 25px); width: calc(72% - 25px);}
.item-title{overflow: hidden;}
.item-title h3{
  font-weight: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /*word-wrap: break-word;*/
  line-height: 1.2;
  text-overflow: ellipsis;
}
.count-down-wrapper{margin-top: 2px; font-size: 14px; color: #999; overflow: hidden; letter-spacing: 1px;}
.current-stock{float: right;}
.item-price{margin-bottom: 4px;}
.item-process{overflow: hidden; width: 81%; margin-top: 4px; border: 1px solid #af3a99; height: 12px; border-radius: 4px; background-color: #cf8ccc;}
.item-process div{height:100%; background:#af3a99; border-radius: 2px;}
.item-schedule{float: right;}

.item-bottom{padding: 0 10px 10px; overflow: hidden;}
.item-bottom .go-bargain-detail{float: left; padding: 8px 0;}
.item-bottom .item-bottom-handle{float: right;}
.item-bottom .item-bottom-handle a{display: inline-block; background: #af3a99; color: #fff; margin-left: 10px; padding: 8px 20px; border-radius: 15px;}
.item-handle{padding-bottom: 18px; overflow: hidden; text-align:center;}
.item-handle span, .item-handle a{float: left; padding: 8px 10px; color: #fff; background-color: #F1376C; border-radius: 4px;}
.item-handle a.end{background-color: #888;}
.item-handle a.end-check-result{display: inline-block; background-color: rgb(26, 189, 69); float: none; padding: 8px 20px;}
.item-handle span.item-btn2, .item-handle span.item-btn3{float: right;}
.item-handle span.item-btn3 {background-color: #888;}
.item-handle .end-data-hook{position: absolute; width: 100%; height: 100%; top: 0; right: 0; background: url(../images/bargain-over.png) no-repeat 100px 0; background-size: 120px 120px; z-index: 99;}
.item-handle .end-data-hook2{position: absolute; width: 100%; height: 160px; top: 0; right: 0; background: url(../images/bargain-over2.png) no-repeat 100px 0; background-size: 120px 120px; z-index: 99;}
.item-bottom p{margin-top: 10px; color: #888; text-align: center;}
.item-bottom .item-bottom-bar{position: relative;}
.item-bottom-bar .get-bargain-qrcode, .item-bottom-bar .get-bargain-qrcode-end{display: block; margin-top: 10px; padding: 8px 10px; background: rgb(26, 189, 69); color: #fff; border-radius: 4px;}
.item-bottom-bar .get-bargain-qrcode-end{background-color: #888;}
.item-bottom-bar .get-bargain-detail{text-decoration: underline; position: relative; left: 5px;}
.item-bottom p span{font-size: 20px; /*color: #F1376C;*/margin-left: 5px;}

.bargain-stamp{position: absolute; right: 40px; top: -4px; width: 20%; opacity: .6;}
.bargain-stamp img{display: block; width: 100%;}

/* animation */
.scaleToSmall{
  -webkit-animation:scaleToSmall .4s;
  animation:scaleToSmall .4s;
}

.slideUp{
  transition:all 1s;
  -webkit-animation:slideUp 1s forwards;
  animation:slideUp 1s forwards;
}
@keyframes scaleToBig{
  0%   {opacity: 0; transform:scale(0);}
  100% {opacity: 1;transform:scale(1);}
}
@-webkit-keyframes scaleToBig{
  0%   {opacity: 0; -webkit-transform:scale(0);}
  100% {opacity: 1; -webkit-transform:scale(1);}
}

@keyframes scaleToSmall{
  0%   {opacity: 1; transform:scale(1);}
  100% {opacity: 0; transform:scale(0);}
}
@-webkit-keyframes scaleToSmall{
  0%   {opacity: 1; -webkit-transform:scale(1);}
  100% {opacity: 0; -webkit-transform:scale(0);}
}

@keyframes slideUp{
  0%   {}
  100% {height: 0; }
}
@-webkit-keyframes slideUp{
  0%   {}
  100% {height: 0; }
}