@charset "utf-8";

.mypage-btn{background:#ff4a97;color:white;padding:5px 12px 5px 12px;border-radius:3px;font-size:18px;font-weight:700;margin-right: 104px;cursor:pointer;}
.twitter-timeline {margin: 0 auto; margin-bottom: 100px !important;}
.twitter{padding: 0 20px;}
table{text-align:center; word-break:keep-all;}
table thead{background:#f5f6f7;}
table tr{border-bottom:1px solid #f5f6f7; }
table th{padding:10px 5px;}
table td{border-bottom:1px solid #f5f6f7; padding: 10px 0;}
table .fare-info{text-align:left;    background: #f5f6f7;}
table .fare-btn {border-bottom: 2px solid #aaa;    background: #f5f6f7;}
table .fare-btn > div{display: flex;justify-content: center;}
table .fare-btn a{position:relative;background:#5BB6E2; padding:1.4rem; display:inline-block; color:#FFFFFFF2; border-radius:2px;transition:all 0.3s;margin:0 5px;width:14%;word-break: keep-all;vertical-align:middle;}
table .fare-btn a span{position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
table .fare-btn a:hover{background:#2499fd;}

/* 미등록 */
table .fare-btn a.no{background: #c7d2db!important; color:#FFFFFFF2!important;}
table .fare-btn a.no:hover{background: #c7d2db!important; color:#FFFFFFF2!important;}

/* 마감 */
table .fare-btn a.magam{background: #d95353!important;color:#FFFFFFF2!important;}
table .fare-btn a.magam:hover{background: #a73838!important;}

#info-tab-ul{
	display:flex;
	margin-top:24px;
}

#info-tab-ul li{
	background:grey;
	background: #dbdbdb;
    padding: 10px 37px;
    font-weight: bold;
    font-size: 0.95rem;
    border-bottom-left-radius: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin-right: 2px;
	cursor:pointer;
	transition:all 0.3s;
}

#info-tab-ul li:hover{
	background:#5BB6E2;
	color:#fff;
}

#info-tab-ul li.on{
	color:#fff;
	background:#5BB6E2;
}

table td.fare-btn.mongu a{
	background:var(--mongu-color);
	color:var(--mongu-font-color);
	f
}

table td.fare-btn.mongu a:hover{
	background:var(--mongu-hover-color);
	color:var(--mongu-font-color);
}

#info-tab-ul li.mongu.on{
	background:var(--mongu-color);
	color:var(--mongu-font-color);
}

#info-tab-ul li.mongu:hover{
	background:var(--mongu-hover-color);
	color:var(--mongu-font-color);
}

/* 스펙버튼 별도의 width */
.spec-btn div a{width: calc((100% - 30px) / 4);}

.end{
    /* position: relative; */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 12px 3px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #5BB6E2;
    background: rgb(109 187 255 / 8%);
    border-radius: 999px;
    backdrop-filter: blur(4px);
    margin-left: 5px;
    margin-right: 5px;
    color: #fff;
}

.end.no{background:#19a6f9;}
.end.ing{background:#5ebb6a;}
.event-tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 12px 3px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #5BB6E2;
        background: rgb(109 187 255 / 8%);
    border-radius: 999px;
    /* border: 1px solid rgba(59, 130, 246, 0.35); */
    /* box-shadow: 0 1px 1px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.6) inset; */
    backdrop-filter: blur(4px);
    margin-left: 5px;
}

.event-tag::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 1px;
    height: 35%;
    border-radius: 999px;
    pointer-events: none;
}

.event-tag.mobile{
	display:none;
}

/* mobile */
@media screen and (max-width:740px) {
	.event-tag{
		display:none;
	}
	.event-tag.mobile{
        display: block;
	}
	.event-title{
		display: block;
        margin: 4px 0 4px 5px;
	}
	.event-date{
		display:none;
	}
	.event-place{
		display:none;
	}
	.mobile-display{
		display:none;
	}
	.mobile-display.mobile{
		display:block;
	}
	.mobile-align{
		text-align:center;
	}
	table .fare-btn a{width: 12%; padding:2rem 0;}
	table .fare-btn .btn_end{padding:0;}
	.spec-btn div a{width: calc((100% - 30px) / 4);}
}