<template>
	<div class="mint pagebg">
		<div class="cats_part">
			<div class="sell_bg_div">
				<!-- <p class="sell_title special-font">{{sellInfo.title}}</p> -->
        <p class="sell_title special-font">10000 hero NFT Sales Activity</p>
				<div class="data_part clearfix">
					<div>
						<!-- <p class="font30 special-font num_p">{{catleft}}</p> -->
						<p class="font30 special-font num_p">10000</p>
						<p class="b_title font16 colorf60">Left</p>
					</div>
					<div>
						<!-- <p class="font30 special-font num_p">{{catsell}}</p> -->
						<p class="font30 special-font num_p">0</p>
						<p class="b_title font16 colorf60">Sold</p>
					</div>
					<div>
						<p class="font30 special-font num_p flex_p"><img src="@/assets/images/sell/bnb-icon.png"
								class="icon_img" />1.80</p>
						<p class="b_title font16 colorf60">Unit price</p>
					</div>
					<div class="noborder">
						<p class="font30 special-font num_p flex_p"><img src="@/assets/images/sell/bnb-icon.png"
								class="icon_img" /><span>2</span>
						</p>
						<p class="b_title font16 colorf60">Wallet</p>
					</div>
				</div>
			</div>

			<div class="cats_list main_border">
				<div class="main_box">
					<div class="tool_part">
						<div class="sales_status flexspan">
              <img src="@/assets/images/sell/shijian.png" class="time_icon"/>
              <div class="flexspan sales_status_main">
                <div class="flexspan">
                <span class="font16 colorf60" style="white-space: nowrap;">Start sales countdown:</span>
								<!-- <span class="font18 colorf60" v-if="sellInfo.status!=2">{{$t('Salesstatus')}}:</span>
								<span class="font18 colorf60 flexspan" v-if="sellInfo.status==2"><i
										class="font30 el-icon-time marginR8"></i>{{$t('Kreattystatus2')}}:</span> -->
							</div>
							<span class="special-font font24 marL10">
								<span class="colorf">Coming Soon</span>
								<!-- <span v-if="sellInfo.status==2" class="font30 colorf">{{sellInfo.remain_time}}</span>
								<span v-if="sellInfo.status==3" class="gradualcolor">{{$t('Kreattystatus3')}}</span>
								<span v-if="sellInfo.status==4" class="colorf60">{{$t('Kreattystatus4')}}</span> -->
							</span>
              </div>
						</div>
						<div class="btn_group">
							<div class="refresh_btn_div">
                <img src="../assets/images/sell/refresh.png" class="refresh_btn btn1"/>
                <img src="../assets/images/sell/refresh-s.png" class="refresh_btn btn2"/>
								<!-- <img src="../assets/images/sell/refresh.png" @click="refreshherolist"
									class="refresh_btn btn1" v-if="sellInfo.status!=4&&!isdaojishiing" />
								<img src="../assets/images/sell/refresh-s.png" @click="refreshherolist"
									class="refresh_btn btn2" v-if="sellInfo.status!=4&&!isdaojishiing" /> -->
								<!-- <div v-if="sellInfo.status!=4&&isdaojishiing">
									<div class="flex_part"><span
											class="gradualcolor marginR2">{{herolistRemaintime}}</span>s</div>
								</div> -->
							</div>
							<!-- <div class="buy-btn btn_border disabled" @click="gotoBuy()">
								<div class="font18">
									Random Purchase
								</div>
							</div> -->
              <div class="buy-btn btn_border disabled">
								Random Purchase
							</div>
							<div class="view_btn btn_border pc_show">
								Check My Hero
							</div>
						</div>
					</div>
					<ul class="clearfix">
						<li v-for="(item,index) in herolist" :key="index">
							<div v-if="item.sale_status==0" class="herolist_div">
								<label class="id_label">#{{item.token_id}}</label>
								<div class="cat_data_div">
									<div class="cat_img_div">
										<img :src="item.image" />
									</div>
								</div>
								<!-- <div class="deposit-btn buying" v-if="sellInfo.status!=1&&item.buying">
									<span>Buying...({{item.remain_time}}s)</span>
								</div> -->
							</div>
							<!-- <div v-else class="herolist_div opcityhalf">
								<div class="soldout_div">
									<img src="../assets/images/sell/soldout.png" />
								</div>
								<label class="id_label">#{{item.token_id}}</label>
								<div class="cat_data_div">
									<div class="cat_img_div">
										<img :src="item.image" />
									</div>
								</div>
							</div>
							<div class="pop_progess_div" v-if="item.sale_status==0&&item.buying"
								:style="'width:' + item.buyprogressW + '%'" :class="item.buyprogressW>=100?'brr':''">
							</div> -->
						</li>
					</ul>
					<!-- <div class="view_btn btn_border phone_show" @click="gotomyBag" v-if="sellInfo.status!=1">
							Check My Hero
					</div> -->
          <div class="view_btn btn_border phone_show">
						Check My Hero
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	// import Utils from '@/util/Utils.js';
	// import global_ from '@/global.js';
	// import BigNumber from 'bignumber.js';
	export default {
		name: 'Mint',
		components: {
		},
		data() {
			return {
				herolist: [{sale_status:0,token_id:'00082',image:require("../assets/images/sell/box.png")},{sale_status:0,token_id:'00082',image:require("../assets/images/sell/box.png")},{sale_status:0,token_id:'00082',image:require("../assets/images/sell/box.png")},{sale_status:0,token_id:'00082',image:require("../assets/images/sell/box.png")},{sale_status:0,token_id:'00082',image:require("../assets/images/sell/box.png")},{sale_status:0,token_id:'00082',image:require("../assets/images/sell/box.png")}],
				sellInfo: '',
				currentId: null,
				islogin: false,
				bnbnum: '*',
				randomArr: [],
				GetCatRemaint: null,
				buybtnClickflag: 1,
				isclicked: false,
				isdaojishiing: false,
				herolistRemaintime: 60,
				startTime: 60,
				catleft: 0,
				catsell: 0,
				cattotal: 0,
			}
		},
		methods: {
			// 定时器
			minReturn(item, _time) {
				let $this = this
				let t = setInterval(() => {
					_time--
					let movetime = Utils.formatSeconds(_time)
					item.remain_time = movetime
					if (_time <= 0) {
						clearInterval(t)
					}
				}, 1000)
			},
			// async getcatStatus(_i) {
			// 	let $this = this
			// 	let api = global_.cat_sell_status
			// 	let data = {
			// 		params: {
			// 			contract_cat_id: _i.id
			// 		}
			// 	}
			// 	let _status = await this.axios.get(api, data).then(resp => {
			// 		if (resp.code == 10000) {
			// 			let status = resp.data.status
			// 			if (status == 1) {
			// 				_i.status = status
			// 			}
			// 			return status
			// 		}
			// 	})
			// 	return _status
			// },
			// 倒计时
			daojishi(item, _index, _time) {
				let $this = this
				let temporaryobj = $this.randomArr[_index]
				$this.randomArr.splice(_index, 1)
				$this.buybtnClickflag = 1
				let fixtime = _time
				let t = setInterval(() => {
					_time--
					if (_time%5==0) {
						$this.getcatStatus(item).then((res) => {
							if (res == 1) {
								clearInterval(t)
								item.buying = false
								item.sale_status = 1
								item.buyprogressW = 100
								$this.getBalance()
							}
						})
					}
					item.buyprogressW += parseFloat(100 / fixtime)
					item.remain_time = _time
					if (_time <= 0 || item.buyprogressW >= 100) {
						clearInterval(t)
						item.buying = false
						item.buyprogressW = 100
						$this.getcatStatus(item).then((res) => {
							// console.log(res)
							if (res != 1) {
								$this.$message.error('Purchase failed.Please try again.');
								$this.randomArr.push(temporaryobj)
							}
						})
					}
				}, 1000)
			},
			goHome() {
				this.$router.push('/')
			},
			gotomyBag() {
				if (this.islogin) {
					this.$router.push('/mynft')
				} else {
					this.$message({
						message: this.$t('message1') + '!',
						type: 'warning'
					});
				}

			},
			refreshherolist() {
				this.herolistRemaintime = 60
				this.startTime = 60
				// this.getherolist()
				this.setItemProgress(this.startTime)
			},
			// 创世猫出售
			// async getherolist() {
			// 	let $this = this
			// 	this.buybtnClickflag = 1
			// 	this.isclicked = true
			// 	let api = global_.cat_sell
			// 	let data = {
			// 	}
			// 	await this.axios.get(api, data).then(resp => {
			// 		let respdata = resp
			// 		if (respdata.code == 10000) {
			// 			$this.sellInfo = respdata.data
			// 			$this.herolist = respdata.data.cats
			// 			$this.cattotal = respdata.data.total
			// 			setTimeout(function () {
			// 				$this.$walletMgr.getDpkNFTByWarehouseBalance(function (res) {
			// 					if (res.code == 0) {
			// 						$this.catleft = res.data
			// 						if (parseInt($this.cattotal) > parseInt(res.data)) {
			// 							$this.catsell = parseInt($this.cattotal) - parseInt(res.data)
			// 						} else {
			// 							$this.catsell = 0
			// 						}
			// 					}
			// 				})
			// 			}, 1000)
			// 			let newarr = []
			// 			$this.randomArr = newarr.concat(respdata.data.cats)
			// 			for (let i of this.herolist) {
			// 				$this.$set(i, "buying", false)
			// 				$this.$set(i, "visible", false)
			// 				$this.$set(i, "buyprogressW", 0)
			// 			}
			// 			if ($this.sellInfo.status == 2) {
			// 				let remaintime = $this.sellInfo.start - Date.parse(new Date()) / 1000
			// 				if (!(remaintime > 0)) {
			// 					remaintime = 0
			// 					let movetime = Utils.formatSeconds(remaintime)
			// 					$this.$set($this.sellInfo, "remain_time", movetime)
			// 				} else {
			// 					let movetime = Utils.formatSeconds(remaintime)
			// 					$this.$set($this.sellInfo, "remain_time", movetime)
			// 					$this.minReturn($this.sellInfo, remaintime)
			// 				}
			// 			}
			// 			this.isclicked = false
			// 			$this.IntervalGetCatRemain()
			// 		}
			// 	})
			// },
			// 购买
			gotoBuy() {
				let $this = this
				if (this.buybtnClickflag == 2) return
				this.buybtnClickflag = 2
				let randomcat = Math.round(Math.random() * parseInt($this.randomArr.length - 1))
				// console.log(randomcat)
				if ($this.randomArr.length > 0) {
					let _i = $this.randomArr[randomcat]
					if (this.islogin) {
						this.$walletMgr.buyBaseCatNft(_i.token_id, function (resp) {
							// console.log(resp)
							if (resp.code == 0) {
								_i.buying = true
								$this.$set(_i, 'remain_time', 30)
								$this.daojishi(_i, randomcat, 30)
							} else {
								_i.buying = false
								if (resp.message) {
									$this.$message({
										message: resp.message,
										type: 'warning'
									});
								} else {
									$this.$message({
										message: resp.data,
										type: 'warning'
									});
								}
							}
						})
					} else {
						this.$message({
							message: this.$t('message1') + '!',
							type: 'warning'
						});
					}
				} else {
					//当前界面10个猫猫已经卖完了
				}
			},
			getBalance() {
				let $this = this
				this.$walletMgr.getBalance(function (resp) {
					if (resp.code) {
						if (resp.message) {
							$this.$message({
								message: resp.message,
								type: 'warning'
							});
						} else {

						}
					} else {
						let bignum = new BigNumber(resp).times(10 ** -18)
						$this.bnbnum = Utils.myTofixed(bignum, 2)
					}
				})
			},
			refresh() {
				let $this = this
				if (!(localStorage.getItem('authdata') == null || localStorage.getItem('authdata') == 'null')) {
					this.islogin = true
					setTimeout(function () { $this.getBalance() }, 500)
				} else {
					this.islogin = false
				}
			},
			popbtnClick(_i) {
				_i.visible = !_i.visible
				if (_i.visible) {
					setTimeout(function () {
						_i.visible = false
					}, 2000)
				}
			},
			IntervalGetCatRemain() {
				let $this = this
				clearInterval(this.GetCatRemaint)
				this.GetCatRemaint = setInterval(() => {
					$this.$walletMgr.getDpkNFTByWarehouseBalance(function (res) {
						// console.log(res.data)
						if (res.data == 0) {
							clearInterval($this.GetCatRemaint)
						}
						if (res.code == 0) {
							$this.catleft = res.data
							if (parseInt($this.cattotal) > parseInt(res.data)) {
								$this.catsell = parseInt($this.cattotal) - parseInt(res.data)
							} else {
								$this.catsell = 0
							}
						}
					})
				}, 3000)
			},
			setItemProgress(_time) {
				this.isdaojishiing = true
				let t = setInterval(() => {
					_time--
					this.herolistRemaintime = _time
					if (_time <= 0) {
						this.isdaojishiing = false
						clearInterval(t)
						this.startTime = 60
						this.herolistRemaintime = 60
					}
					localStorage.setItem('sellRefrshremaintime', _time)
					localStorage.setItem('localsellInfo', JSON.stringify(this.sellInfo))
					localStorage.setItem('localrandomArr', JSON.stringify(this.randomArr))
				}, 1000)
			},
		},
		beforeDestroy() {},
		mounted() {
			let $this = this
			// $this.refresh()
			// this.$eventHub.$on('refreshSell', (res) => {
			// 	$this.refresh()
			// })
			// 刷新时判断是否正在倒计时中...
			// if (localStorage.getItem('sellRefrshremaintime') <= 0) {
			// 	this.getherolist()
			// } else {
			// 	this.isdaojishiing = true
			// 	this.herolistRemaintime = localStorage.getItem('sellRefrshremaintime')
			// 	this.startTime = localStorage.getItem('sellRefrshremaintime')
			// 	this.setItemProgress(this.startTime)
			// 	this.sellInfo = JSON.parse(localStorage.getItem('localsellInfo'))
			// 	this.herolist = this.sellInfo.cats
			// 	this.cattotal = this.sellInfo.total
			// 	this.randomArr = JSON.parse(localStorage.getItem('localrandomArr'))
			// 	setTimeout(function () {
			// 		$this.$walletMgr.getDpkNFTByWarehouseBalance(function (res) {
			// 			if (res.code == 0) {
			// 				$this.catleft = res.data
			// 				if (parseInt($this.cattotal) > parseInt(res.data)) {
			// 					$this.catsell = parseInt($this.cattotal) - parseInt(res.data)
			// 				} else {
			// 					$this.catsell = 0
			// 				}
			// 			}
			// 		})
			// 	}, 1000)
			// 	this.IntervalGetCatRemain()
			// }
		}
	}
</script>
<style>
	/* loading进度条 */
	.el-progress__text {
		color: #fff;
	}
</style>
<style scoped>
	.flex_part {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* loading进度条 */
	.el-progress>>>path:first-child {
		stroke: #111f52;
	}

	.mint {
		padding: calc(28.14815px + 6.7037vw) 0 20px;
    background: url(../assets/images/pagebg.png) no-repeat center;
    background-size: cover;
	}

	.sell_bg_div {
		background: url(../assets/images/sell/sell-bg.png) no-repeat center;
		padding: 20px 0;
		background-size: cover;
	}

	.sell_title {
		text-align: center;
		color: #fff;
		font-size: 36px;
		margin: 25px auto;
	}

	.data_part {
		background: rgba(255, 255, 255, 0.08);
		border-radius: 8px;
		border: 1px solid rgba(255, 255, 255, 0.08);
		width: 584px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 35px;
	}

	.data_part>div {
		border-right: 1px solid rgba(255, 255, 255, 0.08);
		width: calc(25% - 1px);
		text-align: center;
		padding: 20px 0 10px;
	}

	.data_part>div.noborder {
		border: none;
	}

	.num_p {
		line-height: 1em;
		margin-bottom: 10px;
	}

	.num_p.flex_p {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.num_p.flex_p .icon_img {
		margin-right: 3px;
	}

	.cats_list.main_border {
		width: 90%;
		margin: 20px auto;
	}

	.cats_list .main_box {
		padding-bottom: 0;
	}

	.cats_list ul {
		padding: 20px 10px 0;
		box-sizing: border-box;
	}

	.cats_list ul li {
		float: left;
		width: 230px;
		height: 271px;
		font-size: 14px;
		background: rgba(255, 255, 255, 0.08);
		border-radius: 8px;
		color: #fff;
		font-weight: 100;
		margin: 0 10px 20px;
		border: 1px solid transparent;
		position: relative;
		overflow: hidden;
	}

	.herolist_div {
		position: relative;
		width: 100%;
		height: 100%;
		padding-top: 45px;
		box-sizing: border-box;
	}

	.herolist_div.opcityhalf {
		cursor: default;
	}

	.herolist_div.opcityhalf .id_label,
	.herolist_div.opcityhalf .cat_data_div,
	.herolist_div.opcityhalf .deposit-btn.cannotclick {
		opacity: 0.3;
	}

	.cats_list ul li .id_label {
		display: inline-block;
		font-size: 12px;
		background: #EABA99;
		min-width: 63px;
		border-radius: 0px 100px 100px 0px;
		padding: 3px 6px;
		box-sizing: border-box;
		position: absolute;
		left: 0;
		top: 12px;
	}

	.cat_img_div {
		width: 100%;
		height: 230px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.cat_data_div img {
		display: block;
		margin: 0 auto;
		width: auto;
		height: 100%;
		max-height: 230px;
		border-radius: 8px;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
	}

	.tool_part {
		width: 100%;
		padding: 10px 20px 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		position: static;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	}

	.sales_status {
		text-align: left;
	}
  .time_icon{width: 26px;margin-right: 12px;}

	.soldout_div {
		width: 100%;
		height: 100%;
		z-index: 3;
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn_group {
		display: flex;
		align-items: center;
	}

	.refresh_btn_div {
		width: 26px;
		display: flex;
		align-items: center;
		justify-content: center;
    margin-left: 20px;
	}

	.refresh_btn {
		display: block;
		cursor: pointer;
		width: 24px;
		height: 24px;
	}

	.refresh_btn.btn2 {
		display: none;
	}
	.refresh_btn_div:hover .refresh_btn.btn1 {
		display: none;
	}

	.refresh_btn_div:hover .refresh_btn.btn2 {
		display: block;
	}

	.refresh_btn_div:hover .refresh_btn {
		width: 26px;
		height: 26px;
	}

	.refresh_btn.clicked {
		width: 26px;
		height: 26px;
		animation: spin 1s linear infinite;
		-webkit-animation: spin 1s linear infinite;
	}

	@keyframes spin {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.view_btn {
		margin: 0 25px;
    width: 172px;
    height: 48px;line-height: 46px;
    border-radius: 24px;
    border: 1px solid #EABA99;
    font-size: 16px;
    font-weight: 500;
    color: #EABA99;
	}

	.view_btn.phone_show {
		display: none;
	}


	.buy-btn {
		width: 172px;
    height: 48px;
    background: linear-gradient(90deg, #eaba99 0%, #ddc8b7 100%);
		border-radius: 24px;
		text-align: center;
		cursor: pointer;font-size: 16px;line-height: 46px;
		margin-left: 30px;
	}
  .buy-btn.disabled{
    cursor: default;
    opacity: 0.4;
    border: 1px solid #FFFFFF;
    background: none;
  }

	.el-icon-right {
		margin-left: 5px;
	}

	.faq_div {
		width: 86%;
		margin: 80px auto 40px;
		max-width: 1180px;
		text-align: center;
		font-style: italic;
	}

	.faq_div .inlineblock {
		display: inline-block;
		font-style: normal;
	}

	.answer_div {
		padding-left: 18px;
		line-height: 1.5em;
	}

	.answer_div p {
		margin-bottom: 20px;
	}


	.deposit-btn {
		width: 120px;
		height: 32px;
		background: linear-gradient(245deg, #32C5FF 0%, #B620E0 51%, #F7B500 100%);
		border-radius: 4px;
		margin-top: 10px;
		cursor: pointer;
		padding: 2px;
		font-size: 14px;
		margin: 7px auto 0;
	}

	.deposit-btn.buying {
		background: none;
		border: 1px solid #fff;
		padding: 0;
	}

	.deposit-btn.cannotclick {
		background: none;
		border: 1px solid rgba(255, 255, 255, 0.3);
	}

	.deposit-btn span {
		display: block;
		width: 115px;
		height: 28px;
		line-height: 28px;
		text-align: center;
		background: rgba(255, 255, 255, 0.25);
		border-radius: 4px;
	}

	.deposit-btn.cannotclick span {
		background: none;
		color: rgba(255, 255, 255, 0.3);
	}

	.deposit-btn.buying span {
		background: none;
	}

	/* comming */
	#sec_div {
		padding: calc(30.37037px + 6.25926vw) 0 0;
	}

	.comesoon {
		width: 90%;
		margin: 0 auto 50px;
		max-width: 320px;
	}

	#sec_div .ct {
		text-align: center;
	}

	#sec_div .w1,
	#sec_div .w2 {
		font-style: italic;
		padding: 12px 0;
		font-size: 14px;
	}

	#sec_div .w2 {
		display: inline-block;
	}

	#sec_div .w1 {
		font-size: 18px;
	}

	.pop_progess_div {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 4px;
		width: 100%;
		background: linear-gradient(225deg, #32C5FF 0%, #B620E0 51%, #F7B500 100%);
		border-bottom-left-radius: 4px;
		max-width: 100%;
		transition: width 2s;
		-webkit-transition: width 2s;
	}

	.pop_progess_div.brr {
		border-bottom-right-radius: 4px;
	}

	@media screen and (max-width:950px) {
		.tool_part {
			flex-flow: column;
		}

		.btn_group {
			margin-top: 20px;
		}
	}

	@media screen and (max-width:750px) {
		.phone_hide {
			display: none;
		}

		.data_part {
			display: block;
			width: 292px;
		}

		.data_part>div {
			float: left;
			width: 50%;
			border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		}

		.data_part div:nth-of-type(2) {
			border-right: none;
		}

		.data_part div:nth-of-type(3) {
			border-bottom: none;
		}


		.cats_list.main_border {
			width: 100%;
			padding: 0;
      border: none;
		}

		.cats_list ul {
			width: 520px;
			margin: 0 auto;
		}
		.btn_group {
			flex-direction: row-reverse;
		}

		.buy-btn {
			margin-left: 0;
			margin-right: 30px;
		}

		.tool_part {
			flex-direction: column;
			justify-content: center;
			text-align: center;
      border: none;
		}

		.pc_show {
			display: none;
		}

		.view_btn.btn_border {
			margin: 20px 0 0;
		}

		.view_btn.phone_show {
			display: block;
			margin: 20px auto 0;
		}

		.phone_show.refresh_btn {
			margin: 30px 0 20px;
		}

		.sales_status {
			width: auto;
			text-align: center;
		}

		.sell_title {
			text-align: center;
			color: #fff;
			font-size: 30px;
			margin: 25px auto;
		}

		.num_p.font30 {
			font-size: 24px;
		}

		.num_p.flex_p .icon_img {
			width: 20px;
		}

		.font36.special-font.inlineblock {
			font-size: 30px;
		}

	}

	@media screen and (max-width:520px) {
		.cats_list ul {
			width: auto;
		}

		.cats_list ul li {
			width: calc(50% - 20px);
			height: auto;
		}

		.cat_img_div {
			height: auto;
			margin: 0 auto;
		}

		.cat_data_div img {
			width: 100%;
			height: auto;
		}

		.deposit-btn {
			margin: 15px auto 12px;
		}
    .sales_status_main.flexspan{flex-flow: column;}
    .sales_status_main .marL10{margin: 10px 0 0;}
	}

	@media screen and (max-width:430px) {
		.tool_part {
			padding: 10px 10px 20px;
		}

		.cats_list ul {
			padding: 0 5px;
		}

		.cats_list ul li {
			margin: 0 5px 10px;
			width: calc(50% - 10px);
		}
	}
</style>