:root {
	--gray : #eaeaea ;
	--black : #000 ; 
	--blue : #0000c5 ;
	--gray-500 : #707070 ; 
	--gray-400 : #808080 ; 
	--gray-300 : #9c9c9c ;
	--gray-200 : #dcdcdc ;
	--red : #ff5050 ;
	--white : #fff ; 

	--position: 0;
}
main.my ul.list.coin > li.empty {
	padding: 60px 0;
}
main.my ul.list.coin {
	display : grid ;
	grid-template-columns : repeat(3, 1fr) ;
	grid-gap : 20px ; 
  width: 100%;
	border-top: solid 1px var(--black);
	border-bottom: solid 1px var(--black);
	margin-top: 40px;
}
ul.list.coin > li {
	text-align : center ;
  padding: 20px 0;
}
ul.list.coin > li.on,
ul.list.coin > li.info,
ul.list.coin > li.empty {
	grid-column : span 3 
}
ul.list.coin > li.info {
	border-bottom : solid 1px #000 ;
}
ul.list.coin > li.info .counter {
	margin-left : 20px ;
}
ul.list.coin > li:not(.info):not(.empty) {
	position : relative ; 
	padding : 110px 0 40px 0 ;
	border-top : none ;
}
ul.list.coin > li .title {
	position : absolute ;
	top : 40px ;
	left : 0 ;
	width : 100% ;
	line-height : 15.7px ; 
}
ul.list.coin > li .zoom-buttons {
	position : absolute ;
	top : 76.5px ;
	left : 50% ;
	transform : translateX(-50%) ;
	display : flex ;
}
ul.list.coin > li .zoom-buttons button {
	width : 12px ;
	height : 12px ;
	border : solid 1px #000 ; 
	font-size : 13px ; 
	line-height : 10px ; 
	cursor : pointer 
}
ul.list.coin > li.on .zoom-buttons {
  top: 40px;
    left: inherit;
    right: 0;
    transform: translateX(0);
}
ul.list.coin > li.on .zoom-buttons button.detail,
ul.list.coin > li:not(.on) .zoom-buttons button.list {
	border-color : #dcdcdc ;
	color : #dcdcdc ;
}
ul.list.coin > li .zoom-buttons button ~ button {
	margin-left : 5px ;
}
ul.list.coin > li .coin {
	position : relative ;
}
ul.list.coin > li .coin video {
	width : 75% ;
	max-width : 320px ;
	display : block ;
	margin : auto ;
}
ul.list.coin > li .coin.soon:after {
	content : "";
	display : block ;
	position : absolute ;
	width : 100% ;
	height : 100% ;
	top : 0 ;
	left : 0 ;
	backdrop-filter : blur(4px) ;
	background : rgba(255,255,255,.7) ;
}
ul.list.coin.detail > li:not(.on),
ul.list.coin > li.on .title br,
ul.list.coin > li:not(.on) .info {
	display : none ;
}
ul.list.coin > li.on {
	padding-top : 127px ;
}
ul.list.coin > li.on .buttons {
	top : 40px ;
	left : inherit ;
	right : 0 ;
	transform : translateX(0) ;
}
ul.list.coin > li.on .info {
	position : absolute ;
	top : 75px ;
	left : 0 ;
	display : flex ;
	width : 100% ;
	justify-content: space-between;
}
ul.list.coin > li.on .coin video {
	width : 100% ;
}
dl.noti {
	margin : 40px 0 ; 
	line-height : 16px ; 
}
dl.noti > dt { 
	margin-bottom : 10px ;
}
dl.noti > dd { 
	color : var(--gray-500) ;
}
/***************** 모바일 *******************/
@media (max-width:720px) {
	ul.list.coin {
		grid-template-columns : repeat(2, 1fr) ;
		grid-gap : 10px ; 
	}
	ul.list.coin > li.on,
	ul.list.coin > li.info {
		grid-column : span 2 
	}
	ul.list.coin > li.info {
		padding : 10px 0 ;
	}
	ul.list.coin > li .coin video {
		max-width : 230px ;
	}
	ul.list.coin > li.on .info {
		display : grid ;
		grid-template-columns : repeat(2,1fr);
		grid-gap : 10px ;
		padding : 0 20px ; 
	}
	ul.list.coin > li.on {
		padding-top : 130px !important ;
	}
	ul.list.coin > li.on .info > li {
		text-align : left ;
		font-size : 10px ;
		line-height : 1 ; 
	}

}