#vodView{
	text-align: center;
}

#vodView .topsp{
	margin-top: 20px;
}


/***************************************************************
미리보기광고
***************************************************************/

.mainView .mainWrap .topInfoTable .buyBtnBox{
	position: relative;
}

.Jpreview_box1{
	display: inline-block;
	position: relative;
	top:-28px;
	margin-left: 10px;
}

.Jpreview_box2{
	display: none;	
	
}

.preview3_btn:hover{
	background-color:rgba(68, 140, 203, 1);
}

.preview3_btn{
	
	display: inline-block;
	padding: 10px 20px;
	
	-webkit-border-radius: 5px;
	border-radius: 5px;
	
	webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    
    cursor: pointer;
    
    /* min-width: 120px; */
    
    text-align: center;
    
    letter-spacing: -1px;
    
	background-color:rgba(68, 140, 203, 0.8);
	text-shadow: none;
	font-weight: bold;
}

.preview_box{
	
	background-color: rgba(0, 0, 0, 0.5);
    padding: 10px 20px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
    box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
   
    /* min-width: 120px; */
    text-align: center;
    letter-spacing: -1px;
    width:300px;
    height:80px;
    margin-top: 20px;
    vertical-align: middle;
   
}

.preview_box .pb_btn{
	cursor: pointer;
	display: inline-block;
	margin-top:10px;
    border: #777 solid 1px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
}


/***************************************************************
서비서 정보  
***************************************************************/
#getServerInfo{
	display: none;
}

#serverInfo{
	padding: 20px 5px;
	font-size: 12px;
	text-align: left;
	line-height: 180%;
	margin-top: 5px;
	
}

#serverInfo TABLE{
	width: 100%;	
}

#serverInfo .svtitle{
	text-align: center;
	background: #333;
	font-size: 14px;
	padding: 5px 0px;
	margin-bottom: 10px;
}

#serverInfo TD{
	padding: 5px 0px;
}


#serverInfo .fileinfo{
	
	
}

#serverInfo .useinfo SPAN{
	color: #777;
	padding: 0px 5px;
}


/***************************************************************
메인 배경 
***************************************************************/
#vodView .mainbg{
	 background-size: cover;
	 background-position: center center;
  /* 	background-position: center center;
  	background-size: cover; */
  	font-family: Nanum Gothic;  	 
   /*  height:45vw; */ 
   
   /*  height:55vw; */
     
	max-width:1800px;	
	
	margin: auto;
	
	position: relative;
	z-index: 1;
	/* border-bottom: #000 solid 2px; */
}

#vodView .sp{
	/* border-top: #444 solid 1px; */
	max-width:1800px;	
	margin: auto;
}

#vodView .rbox{
	
	background-color:rgba(0, 0, 0, 0.5);
	display: inline-block;
	padding: 10px 20px;
	
	-webkit-border-radius: 5px;
	border-radius: 5px;
	
	webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    
}

/***************************************************************
메인  
***************************************************************/
.mainView{
	
	width:100%;
	 
	position: absolute;
	top:60px;
	left:0px;
	z-index: 10;
	text-align: center;
	padding: 80px 40px  80px 40px
}

.mainView .mainWrap{
	width:100%;
	max-width:1800px;	
	min-height: 1000px;
	margin: auto;
	text-align: left;
	/* background: #ccc; */
}

.mainView .mainWrap .dan{
	text-align: left;	
}

.mainView .mainWrap .dan .danTitle{
	padding: 10px 10px 5px 10px;
	font-family: 'Jua';
	font-style: normal;
	font-size: 24px;	
	color: #aaa;
	letter-spacing: -1px;
	text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

.mainView .mainWrap .dloading{
	text-align: center;
	height: 200px;	
}

.mainView .mainWrap .dloading IMG{
	position: relative;
	top:60px;
}




/* .mainView .mainWrap .col-left{
	width: 60%;
	display:inline-block;
	padding:10px;
	
	
	
	
} */

/* .mainView .mainWrap .col-right{
	width: 40%;
	display:inline-block;
	float:right;
	
	background: #ccc;
} */

.mainView .mainWrap .topInfoTable{
	width: 100%;
	text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

.mainView .mainWrap .topInfoTable TD{
	vertical-align: top;
	
}

.mainView .mainWrap .topInfoTable .postimgTd{
	width: 250px;
	padding-right: 20px;
}

.mainView .mainWrap .topInfoTable .postimgTd .dispClassBox{
	
	padding-top: 10px;
}

.mainView .mainWrap .topInfoTable .postimgTd .dispClass{
	display: inline-block;
}

.mainView .mainWrap .topInfoTable .dmsg{
	display: inline-block;
	position: relative;
	top:-6px;
	padding-left: 5px;
}

.mainView .mainWrap .postimgBox{
	width: 230px;
	height: 330px;
	overflow: hidden;
	
	webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
    box-shadow: 0 2px 10px rgba(0,0,0,.5);
    -webkit-border-radius: 3px;
    border-radius: 3px;
    
    position: relative;
}

/*아이콘추가*/
.mainView .mainWrap .postimgBox .itt{
	position:absolute;
	z-index:110;
	top: 0px;
	left:0px;
	width: 100%;	
	display: inline-block;
	padding:5px;	
	font-size: 11px;
	text-shadow:none;
}

.mainView .mobileWrap .itt2{
	position:absolute;
	z-index:110;
	top: 50px;
	right:10px;	
	display: inline-block;
	padding:5px;	
	font-size: 11px;
	text-shadow:none;
	text-align: right;
}

.mainView .mainWrap .topInfoTable .titleBox{
	margin-top:10px;
	text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
	width: 100%;
}

.mainView .mainWrap .topInfoTable .title{	
	font-family: 'TmonMonsori';
	font-size:38px;	
	
	white-space: nowrap;
	width: 100%;
	overflow: hidden; 
	text-overflow: ellipsis;
}

.mainView .mainWrap .topInfoTable .titleEnglish{
	font-size:18px;
	color:#ccc;
	white-space: nowrap;
	width: 100%;
	overflow: hidden; 
	text-overflow: ellipsis;
}

.mainView .mainWrap .topInfoTable .subinfo{
	margin-top:10px;
	white-space: nowrap;
	width: 100%;
	overflow: hidden; 
	text-overflow: ellipsis;
}

.mainView .mainWrap .topInfoTable .subinfo SPAN{
	color: #888;
	padding: 0px 5px;
}

.mainView .mainWrap .topInfoTable .tbtn{
	background-color:rgba(0, 0, 0, 0.5);
	display: inline-block;
	padding: 10px 12px;
	
	-webkit-border-radius: 5px;
	border-radius: 5px;
	
	webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    
    cursor: pointer;
    
    /* min-width: 120px; */
    
    text-align: center;
    
    letter-spacing: -1px;
}

.mainView .mainWrap .topInfoTable .tbtn:hover{
	background-color:rgba(0, 0, 0, 1);
}

.mainView .mainWrap .topInfoTable .contentBox{
	padding: 10px 20px 10px 0px;
}

.mainView .mainWrap .topInfoTable .contentBox .content{
	width:580px;
	
}

.mainView .mainWrap .topInfoTable .contentBox .conten-show{
	
	overflow:auto;
}

.mainView .mainWrap .topInfoTable .contentBox .conten-hide{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3; /* 라인수 */
	-webkit-box-orient: vertical;
	word-wrap:break-word; 
	line-height: 1.5em;
	height: 4.5em; /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 3 = 3.6em */
	
	
}

.mainView .mainWrap .topInfoTable .contentBox .more{
	text-align: center;	
	/* min-width:450px; */
	width:580px;
	margin: 10px 0px;
}

.mainView .mainWrap .topInfoTable .contentBox .more .fa{
	font-size: 20px;
	cursor: pointer;
	color:#aaa;
}

.mainView .mainWrap .topInfoTable .contentBox .more .fa:hover{
	color:#fff;
}




.mainView .mainWrap .topInfoTable .buyBtnBox .sbtn{
	background-color:rgba(217, 83, 79, 0.8);
	text-shadow: none;
	font-weight: bold;
}

.mainView .mainWrap .topInfoTable .buyBtnBox .dbtn{
	background-color:rgba(240, 173, 78, 0.8);
	text-shadow: none;
	font-weight: bold;
	
}


.mainView .mainWrap .topInfoTable .buyBtnBox .sbtn:hover{
	background-color:rgba(217, 83, 79, 7);
}

.mainView .mainWrap .topInfoTable .buyBtnBox .dbtn:hover{
	background-color:rgba(240, 173, 78, 1);
}

.mainView .mainWrap .topInfoTable .sellInfoMsgBox{
	background-color:rgba(0, 0, 0, 0.5);
	display: inline-block;
	padding: 30px 20px;
	
	-webkit-border-radius: 5px;
	border-radius: 5px;
	
	webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    width:100%;
    max-width:500px;
    text-align: center;
}

/******************************************
모바일
******************************************/

.mobileWrap{
	/* position: absolute;	
	top:70px;
	right: 20px; */
	
	display: none;
}

.mobileWrap .dispClassBox .dmsg{
	font-size: 10px;
	position: relative;
	top:0px;
}

/* 테블릿 가로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) { 
	
	/* .mainView .mainWrap .topInfoTable .title{	
		font-size: 2.5vw;	
	}
	
	.mainView .mainWrap .topInfoTable .titleEnglish{
		font-size: 1.6vw;
	} */
}

/* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/
@media all and (min-width:480px) and (max-width:767px) { 
	
	
}

/* 모바일 가로, 테블릿 세로 (해상도 ~ 479px)*/
@media all and (max-width:479px) { 
	
	.mainView .mainWrap .topInfoTable .title{	
		font-size:30px;	
	}

	.mainView .mainWrap .topInfoTable .titleEnglish{
		font-size:12px;
	}
	
	.mainView .mainWrap .topInfoTable .btnbox1 .tbtn{
		font-size: 12px;
		padding: 10px 15px;
	}
	
	.tbtn{
		font-size: 12px;
		padding: 10px 12px;
	}
	
	.Jpreview3_btn1{
		font-size: 12px;
		padding: 10px 12px;
	}

	
}

/*  (해상도 ~ 900px)*/
@media all and (max-width:900px) { 
	
	.mainView{	
		top:0px;
	}

	.header-container .topmenu{
		display: none;
	}
	
	.header-web-logoBox{
		display: none;
	}
	
	.header-container .mobtopmenu{
		display: block;
	} 
	
	.mobileWrap{
		display: block;
	}
	
	.mainView{	
		padding: 50px 20px  80px 20px
	}	
		
	.mainView .mainWrap .topInfoTable .postimgTd{
		display: none;		
	}
	
	.Jpreview_box1{
		display: none;
	}
	
	/* 
	.Jpreview3_btn1{
		display: none;
	} */
	
	.Jpreview_box2{
		display: block;
	}
	.preview_box{
		width: 100%;
	}
	
	
	#vodView .mainbg{	 
  		width:100%;
	 /*   height:100vw;  */
	}
	
	.mainView .mainWrap .topInfoTable{
		margin-top:20px;
	}
	
	.mainView .mainWrap .topInfoTable .contentBox .content{
		width: 100%;
	}
	
	.mainView .mainWrap .topInfoTable .contentBox .more{
		width: 100%;
	}
	
	
}


/* .mainView .mainWrap .bg{
	background-color:rgba(0, 0, 0, 0.5);
	width: 100%;
	
	-webkit-border-radius: 5px;
	border-radius: 5px;
	
	webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    
    padding: 10px;
    
}

 */








/***************************************************************
메인 이미지 배경 효과
***************************************************************/
.be4{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#222222+10,000000+100&0.65+10,0+100 */
background: -moz-linear-gradient(-45deg,  rgba(34,34,34,0.65) 10%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(34,34,34,0.65) 10%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(360deg,  rgba(34,34,34,1) 10%,rgba(0,0,0,0)50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6222222', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	
	width: 100%;
	height: 100%;
	
}

.be3{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#222222+10,000000+100&0.65+10,0+100 */
background: -moz-linear-gradient(-45deg,  rgba(34,34,34,0.65) 10%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(34,34,34,0.65) 10%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(90deg,  rgba(34,34,34,1) 10%,rgba(0,0,0,0)50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6222222', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	
	width: 100%;
	height: 100%;
	
}

.be2{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#222222+10,000000+100&0.65+10,0+100 */
background: -moz-linear-gradient(-45deg,  rgba(34,34,34,0.65) 10%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(34,34,34,0.65) 10%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(-90deg,  rgba(34,34,34,1) 10%,rgba(0,0,0,0)50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6222222', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	
	width: 100%;
	height: 100%;
	
}

.be1{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#222222+10,000000+100&0.65+10,0+100 */
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#222222+10,000000+100&0.65+10,0+100 */
background: -moz-linear-gradient(-45deg,  rgba(34,34,34,0.65) 10%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(34,34,34,0.65) 10%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(34,34,34,0.65) 10%,rgba(0,0,0,0) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6222222', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	
	width: 100%;
	height: 100%;
	
}