@charset "utf-8";

/***************************************************************************************************
*	COUPON
***************************************************************************************************/
.ticketList 		{position:relative; margin:30px auto; display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; flex-wrap:wrap; flex-direction:row; align-items:auto; justify-content:space-between; align-content:start;}

.ticket				{width:100%; height:180px; border-radius:8px; overflow:hidden; margin:auto; filter:drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); border-top:1px solid #DDD; display:flex; align-items:stretch; text-transform:uppercase;}
.ticket::before, 
.ticket::after		{content:""; position:absolute; top:0; width:50%; height:100%; z-index:-1;}
.ticket > div		{display:flex; align-items:center; justify-content:center;}

.ticket .left				{width:20%;}
.ticket .left div			{margin-left:15px; font-family:celmonHG; font-size:24px; font-weight:400; color:#FFF; letter-spacing:5px; text-align:center; transform:rotate(-90deg); white-space:nowrap;}

.ticket .center				{flex-grow:1; text-align:center; background-color:#FFF;}
.ticket .center .whatper	{background:#000; color:gold; padding:5px 10px; font-size:26px; font-weight:800; white-space:nowrap;}
.ticket .center .whatper em	{font-size:var(--FS18); font-weight:600;}

.ticket .center h3			{font-family:celmonHG; font-size:var(--FS40); font-weight:900; color:#000; margin-bottom:10px;}
.ticket .center h3 em		{font-size:var(--FS18); font-weight:800; margin-left:3px;}
.ticket .center small		{font-size:var(--FS14F); font-weight:600; letter-spacing:-1px; line-height:1.5;}
.ticket .center small em	{display:block; font-size:var(--FS12F); color:#999;}

.ticket .right				{width:100px; border-left:1px dashed rgba(255, 255, 255, 1.0);}
.ticket .right div			{padding-bottom:10px; font-size:20px; font-weight:600; text-align:center; transform:rotate(-90deg); color:#FFF; white-space:nowrap;}

/* Color Template [Dark(2) | More Dark(3) | Basic(1)] */
.ticket.type1 .left		{background-image:radial-gradient(circle at -6% 50%, transparent 29px, #03943d 30px, #037e34 20%, var(--IDTcolor) 100%);}
.ticket.type1 .right	{background-image:radial-gradient(circle at 108% 50%, transparent 29px, var(--IDTcolor) 30px);}

.ticket.type2 .left		{background-image:radial-gradient(circle at -6% 50%, transparent 29px, #15889a 30px, #055a67 20%, var(--cyan) 100%);}
.ticket.type2 .right	{background-image:radial-gradient(circle at 108% 50%, transparent 29px, var(--cyan) 30px);}

.ticket.type3 .left		{background-image:radial-gradient(circle at -6% 50%, transparent 29px, #c71667 30px, #9e074c 20%, var(--pink) 100%);}
.ticket.type3 .right	{background-image:radial-gradient(circle at 108% 50%, transparent 29px, var(--pink) 30px);}

.ticket.type4 .left		{background-image:radial-gradient(circle at -6% 50%, transparent 29px, #C33764 30px, #1D2671 20%, var(--purple) 100%);}
.ticket.type4 .right	{background-image:radial-gradient(circle at 108% 50%, transparent 29px, var(--purple) 30px);}

.ticket.type5 .left		{background-image:radial-gradient(circle at -6% 50%, transparent 29px, #e65c00 30px, #bb5501 20%, var(--orange) 100%);}
.ticket.type5 .right	{background-image:radial-gradient(circle at 108% 50%, transparent 29px, var(--orange) 30px);}

@media screen and (max-width:980px) {
	.ticketList 		{display:grid; grid-template-columns:repeat(1, 1fr); gap:0px;}
	.ticket				{height:150px; margin-bottom:30px;}

	.ticket .left div	{font-size:20px;}

	.ticket .right		{width:80px;}
	.ticket .right div	{font-size:16px; font-weight:600;}
}