@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39+Extended+Text&display=swap');
@import url('./js/colpick.css');


@font-face {
    font-family: 'TheJamsil5Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'EliceDigitalBaeum-Bd';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_elice@1.0/EliceDigitalBaeum-Bd.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Somi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_10@1.0/Somi.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.btn_confirm {padding:10px 0; text-align:center;}

/** Thumb Frame */



.ticket-frame {display:block; position:relative; width:100%; z-index:0;}
.ticket-frame .pad {position:relative; z-index:-1;}
.ticket-frame .ticket-link {display:block; position:absolute; top:0; left:0; right:0; bottom:0; z-index:0;}
.ticket-frame .ticket-inner,
.ticket-frame .ticket-inner > * {
	display:block;
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	font-family: 'TheJamsil5Bold';
	}
.ticket-frame .ticket-inner img {display:block; position:absolute; object-fit:cover; top:0; left:50%; max-width:inherit; height:100%; transform:translateX(-50%); -webkit-transform:translateX(-50%); filter:drop-shadow(0 0 20px rgba(0,0,0,0.1)); mask:url(./img/ticket.svg); mask-size:contain; mask-clip:border-box; mask-repeat: no-repeat; mask-position:50% 50%; -webkit-mask:url(./img/ticket.svg); -webkit-mask-size:contain; -webkit-mask-clip:border-box; -webkit-mask-repeat:no-repeat; -webkit-mask-position:50% 50%;}
.ticket-frame .ticket-inner svg {display:block; position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1;}
.ticket-frame .ticket-inner {transition:.4s; transform-style:preserve-3d; -webkit-transition:.4s; -webkit-transform-style:preserve-3d;}
.ticket-frame .ticket-inner > * {width:100%; height:100%; overflow:hidden; backface-visibility:hidden;}

.ticket-frame .ticket-inner {perspective:1100px;}
.ticket-frame .ticket-link .ticket-detail {transform:rotateY(180deg); -webkit-transform:rotateY(180deg);}
.ticket-frame:not(.fix) .ticket-link:hover .ticket-inner {transform:rotateY(180deg); -webkit-transform:rotateY(180deg);}

.ticket-frame .ticket-detail .txt {display:block; position:relative; height:100%; padding:25px 15px 80px; box-sizing:border-box;}
.ticket-frame .ticket-detail .txt hr {display:block; position:relative; margin:0; height:1px; clear:both; border:none;}
.ticket-frame .ticket-detail .txt .top {font-size:11px; font-weight:100; overflow:hidden; opacity:0;}
.ticket-frame .ticket-detail .txt .top > * {display:block; float:left;}
.ticket-frame .ticket-detail .txt .top > * + * {float:right;}
.ticket-frame .ticket-detail .txt .top > * + *:before {content:"no.";}
.ticket-frame .ticket-detail .txt .line-box {display:block; position:absolute; top:50px; left:15px; right:15px; bottom:75px; border:1px solid transparent; overflow:hidden;}
.ticket-frame .ticket-detail .txt .tit {display:block; position:relative; overflow:hidden; padding:20px 5px 10px;}
.ticket-frame .ticket-detail .txt .tit:before {content:"Title."; display:block; font-size:12px; position:absolute; top:10px; left:10px; opacity:.7;}
.ticket-frame .ticket-detail .txt .tit div {display:table; width:100%; box-sizing:border-box;}
.ticket-frame .ticket-detail .txt .tit div > p {
	display:table-cell;
	text-align:center;
	vertical-align:middle; 
	height:3em;
	padding:.5em 0;
	font-size:1.4em;}

.tit_camp{
	font-family:'somi'!important;
	font-size: 1em;
	padding: 0px 10px 10px;

}

.ticket-frame .ticket-detail .txt .tit div strong {font-family: 'EliceDigitalBaeum-Bd';
	max-height:4.5em; overflow:hidden;
	line-height:1.4em; display:-webkit-box;
	-webkit-line-clamp:3; -webkit-box-orient:vertical;}
.ticket-frame .ticket-detail .txt .info {display:block; position:relative; padding:10px;}
.ticket-frame .ticket-detail .txt .info p {display:table; width:100%; table-layout:fixed; position:relative;}
.ticket-frame .ticket-detail .txt .info p > * {display:table-cell; vertical-align:top; padding:.4em 0; text-align:left; font-weight:100; font-size:12px; line-height:1.4em;}
.ticket-frame .ticket-detail .txt .info p strong {width:4.5em;}
.ticket-frame .ticket-detail .txt .review {display:block; position:relative; padding:10px; max-height:4.5em; text-align:left; font-weight:100; font-size:12px; overflow:hidden; line-height:1.4em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
.ticket-frame .ticket-detail .txt .barcode {display:block; position:absolute; left:0; right:0; bottom:30px; text-align:center; font-family:'Libre Barcode 39 Extended Text', cursive; font-size:40px; font-weight:100;}

.colpick_full,
.colpick_full * {transition:none; -webkit-transition:none;}

@media all and (max-width:520px) {
	.ticket-frame .ticket-detail .txt .tit {padding:10px; height:100%; box-sizing:border-box;}
	.ticket-frame .ticket-detail .txt .tit div {height:100%;}
	.ticket-frame .ticket-detail .txt .tit div > p {height:auto; font-size:1.1em;}
	.ticket-frame .ticket-detail .txt .tit ~ * {display:none;}
}

/***********************************************
	List
***********************************************/

.log-board-wrap {position:relative; margin:0 auto; text-align:center;}
.trpg-card-list {
	display:block;
	position:relative;
	text-align:center;
	padding:20px 0;
	margin: 0 0;
	overflow:hidden;}
.trpg-card-list li {display:inline-block; position:relative; max-width:50%; padding:10px 5px; box-sizing:border-box;}



/***********************************************
	Viewer
***********************************************/

#bo_v .title {
	font-family: 'EliceDigitalBaeum-Bd';
	text-align:right;
	padding:20px 0 0px;
	font-size:29px;
    color: #FFF!important;
    line-height: 1.2em;
}
#bo_v .camp{
	font-family: 'somi';
	font-size: 20px;
	line-height: 1.2em;
	text-align:right;
	color: #B40404!important;
}
#bo_v .review {margin:10px 0; }
#bo_v .log {padding:15px; background:#f1f1f1; margin-top:10px; border-radius:1em; color:#333; font-size: 14px; line-height: 1.5em;}

.theme-box{
	font-family: 'ChosunGu'!important;
}


.title-box {display:table; position:relative; width:100%; table-layout:fixed;}
.title-box > * {display:table; vertical-align:middle;}
.title-box .thumb-box {width:100%;}
.title-box .thumb {display:block; position:relative;}
/*.title-box .thumb:before {
	content:"";
	display:block;
	position:relative;
	padding-top:60%;
}
.title-box .thumb > * {display:block; position:absolute;
	top:0; left:0; right:0; bottom:0; overflow:hidden;
	border-radius:10px 10px 0 0;
	background:no-repeat 50% 50%;
	background-size:cover;
	-webkit-box-shadow:0 0 20px 0 rgba(0,0,0,0.1);
	-moz-box-shadow:0 0 20px 0 rgba(0,0,0,0.1);
	box-shadow:0 0 20px 0 rgba(0,0,0,0.1);
}*/

.title-box .con {
	padding: 10px 30px 30px;
	vertical-align:top;
	background: linear-gradient(to top, transparent 10%, #333 20%);
}
.title-box .title-info dl + dl {margin-top:5px;}
.title-box .title-info dl {display:table; width:100%; table-layout:fixed;}
.title-box .title-info dl > * {display:table-cell; vertical-align:top; padding:.2em;}
.title-box .title-info dl dt {width:5em; font-weight: 800;}


.content-review{
	padding: 10px 30px;
	border-radius: 3px;
	background-color: rgba(255,255,255,0);
	font-family: 'ChosunGu'!important;
	width: 70%;

}

.content-default{
	display: flex;
	gap: 20px;
	margin: 0 0 50px;
}

@media all and (max-width:640px){
	.content-default{display: block; padding: 10px;}
	.content-review{margin: 0 0 5px}
	.theme-box{width: 100%!important;}

} 

@media all and (max-width:790px) {
	#bo_v .title {font-size:20px;}
	.title-box,
	.title-box > * {display:block;}
	.title-box .thumb-box {width:640px; width:100%; margin:0 auto;}
	.title-box .con {padding-left:0;}
}

.theme-box{
	width: 30%;
	margin: 0!important;
	backdrop-filter: blur(0px)!important;
	background-color: transparent!important;
	color: #fff!important;
}


@media print {
	#h_header, .copyright, .btn_confirm {display: none !important; }
}



#lightbox {
position:absolute;
top:0; 
left:0; 
min-width:100%; 
text-align:center;
z-index:99999;
}
#lightbox p {
color:#fff; 
margin-right:20px; 
font-size:12px;
}
#lightbox img {
padding:8px;
margin-top:25px;
background:url(img/overlay.png) repeat;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; 
max-width:80%;
background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.2));
backdrop-filter: blur(2px);


}


.thumb img{
	min-width: 100%;
}