@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ROEHOE-CHAN';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/ROEHOE-CHAN.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

:root {
	--title-font: 'GmarketSansMedium';
	--subtit-font: 'ROEHOE-CHAN';
	--content-font: 'Pretendard-Regular';
	--point-col: rgba(0,0,255); /*포인트 색상*/
	--content-col: rgb(12, 12, 12);
	--text-col1: #fff;
	--back-color: linear-gradient(to top, rgba(253, 253, 253, 0.603), rgba(253, 253, 253, 0.445)); /*배경색*/
	--bo-radius: 10px; /*게시판 둥글기*/

	--tape-gray: #dcdee6;
	--tape-edge-gray: #b7b49d;
	--paper-color: #ffffff;
	--paper-dark: #dee0e3b0;
	--shadow-size: 3px;
	--transparent: rgba(213, 224, 249, 0);

	}

#navi_category {
	text-align:center;
	padding:20px 0;
}
#navi_category ul {
	background:var(--default-box-color);
	border-radius:15px;
	display:inline-block;
	padding:5px 40px;
	color:var(--default-txt-color);
}
#navi_category ul a {
	color:var(--default-txt-color);
	font-weight:600;
}
#navi_category li {
	display:inline-block;
}
#navi_category li+li:before {
	content:'|';
	padding:0 20px;
}
.skip {
	position:absolute;
	width:1px;
	height:1px;
	left:-9999px;
	text-indent:-9999px;
	line-height:0;
	font-size:0;
	overflow:hidden
}
.review-list {
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
}
.review-list .review-item {
	width:50%;
	justify-content: center;
}
.review-list .review-item.notice {
	width:100%
}
.review-list .review-item.notice .review-item-content {
	color:var(--color-default)
}
.review-list .review-item.notice .review-item-content:hover {
	text-decoration:underline
}
.review-list .review-item.notice .review-item-content span {
	padding:2px 10px
}
.review-list .review-item.notice .review-item-content span.hash {
	background:var(--color-default);
	color:#fff
}
.review-list .review-item.empty {
	text-align:center;
	padding:15px ;
}
.review-list .review-item .review-item-content {
	display:flex;
	flex-direction:row; 
	flex-wrap:wrap;width:50%; 
	margin:5px ; padding:10px;
}
.review-list .review-item .review-item-content .review-item-img {
	position:relative;border:1px solid black;
	overflow:hidden;width:100%;     
	box-shadow:inset 0px 0px 50px 10px rgba(0,0,0,.4)
}
.review-list .review-item .review-item-content .review-item-img img {
	position:relative;transform:scale(1.1);   
	display:block;
	width:100%;
	z-index:1
}
.review-list .review-item .review-item-content .review-item-img.no-image {
	width:100%;
	padding-top:100%
}
.review-list .review-item .review-item-content .review-item-img.is-blur img {
	filter:blur(10px)
}
.review-list .review-item .review-item-content .review-item-img .badge {
	display:block;
	position:absolute;
	left:8px;
	top:8px;
	padding:0 8px;
	border-radius:4px;
	z-index:2;
	color:#fff;
	background:var(--point_color)
}
.review-list .review-item .review-item-content .review-item-text {
	padding:5px;
	position: relative; 
}
.review-list .review-item .review-item-content .review-item-text .rit-head {
	margin-bottom:10px;
}
.review-list .review-item .review-item-content .review-item-text .rit-head .badge {
	opacity:.5
}
.review-list .review-item .review-item-content .review-item-text .rit-head .rit-title {
	display:block;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	font-family: var(--title-font);
	font-size: 18px;
	font-weight: normal;
}
.review-list .review-item .review-item-content .review-item-text .rit-content {
	display:block;
	position: absolute; 
	left: 5px;
	top: 16px; 
	color:var(--point-col);
	font-family: var(--subtit-font);
	font-size: 16px;
	margin-bottom:10px;
	white-space:nowrap;
	 width:70%;
	text-overflow:ellipsis;
	line-height:1.2;
	max-height:2.4em;
	text-align:left;
	word-wrap:break-word;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical
}
.review-list .review-item .review-item-content .review-item-text .rit-date {
	color:var(--text-color);
	margin-bottom:10px;
	line-height:1.3em;
	opacity:.5
}
@media only screen and (max-width:650px) {
	.review-list .review-item { 
		width:100%;
		justify-content: center;
		display:flex;
		flex-flow:wrap;
	}
	.vinyl-jacket:hover > .vinyl-wrapper {
		left: 30%;
	  }
	
}
@media only screen and (min-width:680px)and (max-width:899px) {
	.review-list .review-item {
		width:33.3%;
		border-top:0;
		justify-content: center;
	}
	.review-list .review-item.notice {
		width:100%
	}
}
@media only screen and (min-width:900px) {
	.review-list {
		display:flex;
		flex-flow:wrap;
		justify-content: center;
	}
	.review-list .review-item {
	width:33.3%;
	display:flex;
	flex-flow:wrap; 
	justify-content: center;
	}
	.review-list .review-item:last-child {
		border-bottom:none
	}
	.review-list .review-item:hover .review-item-content .review-item-img {
	
	}
	.review-list .review-item:hover .review-item-content .review-item-text .rit-title {
		text-decoration: none;
	}
	.review-list .review-item .review-item-content .review-item-img {
		width:100%;
		margin-right:20px;
	}
	.review-list .review-item .review-item-content .review-item-img.no-image {
		width:200px;
		height:200px;
		padding-top:0
	}
	.review-list .review-item .review-item-content .review-item-text {
		flex:1 1 auto;
		margin:0 auto;width:100%;
		padding:5px 0
	}
}
.review-view .review-view-head {
	margin-bottom:10px
}
.review-view .review-view-body .review-right .review-content .review-info {
	opacity:.5;
	padding-top:10px;
	line-height:1.4em
}
.review-view .review-view-body .review-right #bo_vc article {
	padding:1em .5em;
	margin:1em 0;
	border-bottom:1px solid var(--color-default)
}
.review-view .review-view-body .review-right #bo_vc article header {
	padding:0
}
.comment-secret {
	margin:1em 0;
	text-align:center;
	color:var(--text-color)
}
.comment-secret.is-hide {
	display:none
}
.comment-secret div {
	font-weight:800
}
.comment-content.is-hide {
	display:none
}


.comment-content .comment-text {
	margin:5px 0;
	padding:0
}
.comment-date {
	padding:0;
	opacity:.5;
	font-size:.9em
}

@media only screen and (min-width:900px) {
	.review-view-body .review-left {
		flex:0 0 445px;		padding:10px; 
		margin-right:20px; max-height:560px;   overflow: auto; 
	}

	.review-view-body .review-right {
		flex:1 1 auto
	}
	.review-view-body .review-left.bo_v_img {
		padding:10px; 

	}

}

#bo_vc a {color: var(--point-col) !important;}

.act-btn {
	font-size: 15px;
	line-height:200%;
	margin-left:10px;
}

  .vinyl-jacket {
	position: relative;
	border-radius: 1px;
	width: 200px;
	height: 200px;
	perspective: 200px;
	transform-style: preserve-3d;
	background-image: linear-gradient(rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0));
	background-size: cover;
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 1px 0 1px rgba(0, 0, 0, 0.3), inset 0 -1px 1px rgba(0, 0, 0, 0.6);
	cursor: pointer;
  }
  
  .vinyl-wrapper {
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	top: 0;
	left: 16%;
	width: 100%;
	height: 100%;
	transform: translateZ(-8px);
	filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
	transition: left 0.4s;
  }
  
  .vinyl-jacket:hover > .vinyl-wrapper {
	left: 30%;
  }

  .vinyl {
	border-radius: 50%;
	width: 100%;
	height: 100%;
	background-color: #21201e;
	background-image: conic-gradient(from 45deg, rgba(255, 255, 255, 0.25), transparent 6.25% 43.75%, rgba(255, 255, 255, 0.25) 50%, transparent 56.25% 93.75%, rgba(255, 255, 255, 0.25)), radial-gradient(farthest-side, transparent 0 calc(100% - 1px), #342d2b 95.23% 100%), radial-gradient(farthest-side, transparent 0 95.23%, #342d2b 95.23% 100%), radial-gradient(farthest-side, rgba(255, 255, 255, 0.06) 0 40%, rgba(0, 0, 0, 0.2) 40% calc(40% + 1px), rgba(0, 0, 0, 0.12) calc(40% + 1px) 48%, #282826 48% calc(48% + 1px), transparent calc(48% + 1px) 100%), radial-gradient(farthest-side, transparent 63.8%, rgba(255, 255, 255, 0.03) 63.8% calc(63.8% + 1px), transparent calc(63.8% + 1px) 81.9%, rgba(255, 255, 255, 0.03) 81.9% calc(81.9% + 1px), transparent 0), repeating-radial-gradient(farthest-side, rgba(255, 255, 255, 0.005) 0 1px, transparent 1px 2px), repeating-radial-gradient(farthest-side, rgba(255, 255, 255, 0.005) 0 1px, transparent 1px 5px), repeating-radial-gradient(farthest-side, #1e1d1c, #21201e 12.5%);
	-webkit-mask-image: radial-gradient(transparent 2.4%, #fff 2.4%);
	box-shadow: inset 0 0 1px 1px #000, inset 0 0 0 2px rgba(110, 100, 101, 0.6);
  }

  .youtube{
	border-style: none; 
	border-radius:var(--bo-radius); 
	width: 300px !important; 
	height:150px !important; 
  }

  .comment-content .viedo_wrapper {    padding-bottom: 150px !important; }
  .comment-content .viedo_wrapper iframe {position:static !important;   }

  #bo_vc {border-top: 0px !important;}
  #bo_v_bot {border-top: 0px !important;}

  #bo_vc .is-reply {
    border-left: 0px solid #ddd !important;
    padding-left: 0em !important;
    margin: 0px 0 !important;
}

  .bo_vc_act {
	display:flex;
	 float: right;
	 margin: 0;
	 list-style: none;
	 zoom: 1;
	 position:relative;
 }
 
 .bo_vc_act:after {
	 display:flex;
	 visibility: hidden;
	 clear: both;
	 content: "";
 }

 #bo_vc footer:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}

 #bo_v_img {	text-align:center;   }
 #bo_v_img img {
	border-radius:var(--bo-radius);
	max-height:350px;
	margin: 20px auto 0 !important;
    box-shadow: 0 10px 6px -6px #3131317c;
  }

  .view-title{
	display:block;
	white-space:nowrap;
	text-overflow:ellipsis;
	font-family: var(--title-font);
	font-size: 23px;
	font-weight: normal;
	margin-top:20px;
	color:var(--content-col)
}

.view-subtitle {
	display:block;
	color:var(--point-col);
	font-family: var(--subtit-font);
	font-size: 16px;
	white-space:nowrap;
	overflow:hidden; width:70%;
	text-overflow:ellipsis;
	white-space:normal;
	line-height:1.2;
	max-height:2.4em;
	text-align:center;
	word-wrap:break-word;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
    margin: -5px auto 10px;
}

.view-content{
	display:block;
	white-space:pre-line;
	font-family: var(--content-font);
	font-size: 13px;
	font-weight: normal;
	color:var(--content-col);
	margin: 20px auto 15px;
	text-align: center;
}

.view-dj{
	display:inline-block;
	white-space:pre-wrap;
	font-family: var(--content-font);
	font-size: 13px;
	font-weight: normal;
	margin-top:5px;
	background-color:var(--point-col);
	border-radius: 5px;
    padding: 0px 5px 0px 5px;
	color:var(--text-col1);
}

.view-date{
	display:block;
	white-space:pre-wrap;
	font-family: var(--content-font);
	font-size: 14px;
	font-weight: normal;
	color:var(--content-col);
}

.comment-content{
	display:block;
	white-space:nowrap;
	font-family: var(--content-font);
	font-size: 13px;
	font-weight: normal;
	color:var(--content-col);
	text-align:center;
	margin-top: 5px; 
}

.comment-phase{
	content:"#";
	display:block;
	white-space:nowrap;
	font-family: var(--title-font);
	font-size: 18px;
	font-weight: bold;
	color:var(--point-col);
	text-align:center;
	margin-bottom: 5px;
	margin-top: 10px;
}

.comment-phase:before{
	content:"#";
}

.comment-timing{
	display:block;
	white-space:nowrap;
	font-family: var(--title-font);
	font-size: 14px;
	font-weight: normal;
	color:var(--content-col);
	text-align:center;
	margin-bottom: 5px;
	left:7px
}

.comment-timing:before{
	display:block;
	white-space:nowrap;
	color:var(--point-col);
	margin-bottom: 5px;
	left:0px;
	weight:4px;
	text-align:center;
	background:var(--point-col);
}


#bo_v_con {margin-top: 10px !important;}

.board-content { padding: 0em 1em !important; }

.grid-container {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto; 
    grid-template-columns: 1fr 1fr; 
	gap: 10px; 
	justify-content: flex-start; 
	place-items: center;
}
.grid-item {
	padding: 0px;
	width: 100%; 
    box-sizing: border-box; 
}

.grid-item.right {
	padding: 20px;
	justify-content: center;
	text-align: center;

	backdrop-filter: blur(5px);
	background-image:var(--back-color);
	border-radius: 0;
	background: linear-gradient(
		to bottom right,
		var(--paper-dark),
		20%,
		var(--transparent)
	  ),
	  var(--paper-color);
	  box-shadow: var(--shadow-size) var(--shadow-size) 2px var(--paper-dark);
}

.grid-item.right:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top:0;
	background: linear-gradient(
		var(--transparent),
		50%,
		var(--paper-dark),
		51%,
		var(--transparent)
	  ),
	  linear-gradient(
		to right,
		var(--transparent),
		50%,
		var(--paper-dark),
		51%,
		var(--transparent)
	  );
  }

.grid-item.full-width {
	grid-column: 1 / 3; 
	padding: 20px;
	overflow: auto;
	max-height: 600px;
	width: 100%;
	box-shadow: inset 0px 11px 8px -10px  #ffffff27,	inset 0px -11px 8px -10px  #ffffff27; 

	backdrop-filter: blur(5px);
	background-image:var(--back-color);
	border-radius:var(--bo-radius);
}


@media (min-width: 720px) {
	.grid-container {
		grid-template-columns: 1fr 1fr; 
	}
}
@media (max-width: 650px) {
	.grid-container {
			grid-template-columns: 1fr; 
			justify-content: center; 
	  }
	.grid-item.right {
		grid-row: 2; 
	}
}

.top-tape {
	position: absolute;
	height: 35px;
	top: -15px;
	width: 90%;
	background-color: var(--tape-gray);
	border-right: 1px dotted var(--tape-edge-gray);
	border-left: 1px dotted var(--tape-edge-gray);
	opacity: 0.5;
	transform: rotate(2deg)
  }

  label {	color:var(--content-col)   }

  .comment-img {
	margin:5px auto;
	max-width:550px !important;
}