@charset "utf-8";

/* common */

body{
	background:#1a1a1a;
}

h1,
h2,
h3,
h4,
p,
span{
	color:#fff;
}

.swiper-button-next,
.swiper-button-prev{
	/* opacity:0.5; */
	opacity:1;
	transform:translateY(-82%);
	/* background: linear-gradient(135deg, rgba(000, 000, 000, 0.2), rgba(255, 255, 255, 0.3));
	border-radius: 10px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px); */
}

.swiper-button-next::after,
.swiper-button-prev::after{
	display:none;
}

.section_wrap h2 > sub{
	float:right;
	font-size:13px;
	font-weight:300;
	padding-top:10px;
}

/* main_visual_wrap */

.main_visual_wrap{
	position:relative;
	top: 80px;
	padding:0px 0px 20px 0px;
	overflow:hidden;
}

.main_visual_wrap .main_visual_box{
	position:relative;
	height: auto;
}

.main_visual_wrap .visual_slider li{
	width:100%;
	overflow:hidden;
	cursor:pointer;
	background-size:cover;
}

.main_visual_wrap .visual_slider li .container{
	position:absolute; top:68%; left:3%;
	width:100%;
}

.main_visual_wrap .visual_slider li h1,
.main_visual_wrap .visual_slider li p{
	color:#fff;
}

.main_visual_wrap .visual_slider li p{
	font-size:21px;
	margin-top:15px;
}

.main_visual_wrap .visual_slider li .visual_img_box{
	position:relative;
	padding-top:31.53125%;
	/*padding-top:600px;*/

	overflow:hidden;
}

.main_visual_wrap .visual_slider li img{
	position:absolute; top:0px; left:0px;
	width:100%;
	height:100%;
}

.main_visual_wrap .visual_slider li img.visual_mo_ver{
	display:none;
}

.main_visual_wrap .visual_prev_btn, 
.main_visual_wrap .visual_next_btn{
    position: absolute; top: 50%;
    width: 13px; height: 22px;
	color:#fff;
    margin-top: -22px;
    z-index: 10;
    cursor: pointer;
	opacity:0.5;
    background-size: 13px 22px;
    background-position: center;
    background-repeat: no-repeat;
}

.main_visual_wrap .visual_next_btn{
	right:20px;
	left:auto;
}

.main_visual_wrap .visual_prev_btn{
	left:20px;
	right:auto;
}

.visual_slider_thumbs{
	height: 20%;
	box-sizing: border-box;
}

.visual_slider_thumbs .swiper-slide{
	width: 25%; height: 50%;
	margin-top:10px;
	border-radius:5px;
}

.visual_slider_thumbs .swiper-slide .thumbnail{
	position:relative;
	padding-top:36.25%;
	overflow:hidden;
	border-radius:5px;
	cursor:pointer;
	background:#000;
}


.visual_slider_thumbs .swiper-slide img{
	position:absolute;
	top:7%; left:0px;
	opacity:0.4;
	max-width: 100%;
	height: auto;
}

.visual_slider_thumbs .swiper-slide:hover img,
.visual_slider_thumbs .swiper-slide:focus img{
	opacity:1;
}

.visual_slider_thumbs .swiper-slide iframe{
	width:100%; height:100%;
}

.visual_slider_thumbs .swiper-slide p{
	position:absolute; top:50%; left:50%;
	color:#fff;
	opacity:1;
	transform:translate(-50%, -50%);
}

.visual_slider_thumbs .swiper-slide:hover p,
.visual_slider_thumbs .swiper-slide:focus p{
	display:none;
}

.visual_slider_thumbs .swiper-slide-thumb-active .thumbnail{
	opacity:1;
	background:none;
}

.visual_slider_thumbs .swiper-slide-thumb-active img{
	opacity:1;
}

.visual_slider_thumbs .swiper-slide-thumb-active p{
	display:none;
}

/* section01_wrap ~ section06_wrap */

.choice_slider,
.new_slider,
.popularity_slider{
	margin-top:30px;
	overflow:visible;
}

.swiper-wrapper li p.vod_title{
	font-size:16px;
	margin-top:15px;
	text-align: center;
}

/* .vod_text_box .vod_title {
	text-align: center;
} */

.vod_text_box .price_box {
	text-align: center;
}

.main_section03_wrap .choice_slider ul li .price_box {
	text-align: center;
}

.swiper-wrapper li{
	width:100%;
	border-radius:5px;
}

.swiper-wrapper li .vod_img_box{
	position:relative;
	padding-top:56.25%;
	overflow:hidden;
	cursor:pointer;
}

.swiper-wrapper li .vod_img_box img{
	position:absolute; top:0px; left:0px;
	width:100%; height:100%;
	border-radius:5px;
}

.swiper-wrapper li .vod_detail_box{
	position:absolute; top:0px; left:0px;
	display:none;
	width:100%; height:100%;
	padding:5%;
	overflow:hidden;
	border-radius:5px;
	background:url(../images/common/bk60.png);
}

.swiper-wrapper li .vod_detail_box h2,
.swiper-wrapper li .vod_detail_box h3,
.swiper-wrapper li .vod_detail_box p{
	line-height:1.5;
}

.swiper-wrapper li .vod_detail_box h3{
	color:#ccc;
}

.swiper-wrapper li .vod_detail_box h2{
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
}

.swiper-wrapper li .vod_detail_box p{
	display: -webkit-box;
	height:4.5em;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-wrap:break-word; 
	text-overflow:ellipsis;
	overflow:hidden;	
}

.swiper-wrapper li .price_box span{
	display: inline-block;
	margin-top: 10px;
}

.swiper-wrapper li .price_box span.sale_box{
	font-size:13px;
	padding:1px 5px;
	border-radius:3px;
	background:#dc1e1e;
}

.swiper-wrapper li .price_box span.msrp_price{
	color:#666;
	text-decoration:line-through;
	margin:0px 5px;

}

.swiper-wrapper li .vod_type_box{
	position:absolute; top:-1px; right:0px;
}

.swiper-wrapper li h4{
	display: -webkit-box;
	height:3em;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
	font-weight:300;
    word-wrap:break-word; 
	line-height:1.5;
	margin-top:15px;
	overflow:hidden;
}

.banner_slider .banner_img_box{
	position:relative;
	padding-top:16.67%;
	overflow:hidden;
}

.banner_slider .banner_img_box img{
	position:absolute; top:0px; left:0px;
	width:100%; height:100%;
}

.banner_slider .swiper-button-next,
.banner_slider .swiper-button-prev{
	transform:translateY(0%);
}

.choice_slider .swiper-button-next,
.choice_slider .swiper-button-prev{
	transform:translateY(-150%);
}

.event_box{
	margin-top:30px;
}

.event_slider{
	margin-top:30px;
}

.event_slider .event_img_box{
	position:relative;
	padding-top:42.85714285%;
	overflow:hidden;
}

.event_slider .event_img_box img{
	position:absolute; top:0px; left:0px;
	width:100%; height:100%;
	border-radius:5px;
}

.event_slider .swiper-button-next,
.event_slider .swiper-button-prev{
	transform:translate(0%);
}


/* main_section07_wrap */

.main_section07_wrap{
	margin-bottom:30px;
}

.main_section07_wrap .main_section07_box > h2{
	display: none;
}

.main_category_slider{
	margin-top:30px;
	overflow:hidden;
}

.main_category_slider ul {
	justify-content: center;
}

.main_category_slider ul li{
	width:auto !important;
}

.main_category_slider ul li a{
	display: block;
	font-size: 24px;
    color: #fff;
    margin: 0px 5px 0px 0px;
    padding: 5px 20px;
    border-radius: 5px;
    background: #333;
}

.main_section07_wrap .swiper-button-next, 
.main_section07_wrap .swiper-button-prev{
	top:122%;
}

/* pupup_wrap */

.event_popup_wrap .popup_box{
	position:fixed; top:50%; left:50%;
	width:420px; height:612px;
	border:none;
	border-radius:5px;
	overflow:hidden;
	transform:translate(-50%, -50%);
	z-index:9001;
}

.event_popup_wrap:before{
	position:fixed; top:0px; left:0px;
	display:block;
	width:100%; height:100%;
	content:"";
	z-index:9000;
	background:rgba(0,0,0,0.5);
}

.event_popup_wrap .popup_img_box{
	width:420px; height:560px;
	overflow:hidden;
}

.event_popup_wrap .popup_img_box img{
	width:100%; height:100%;
}

.event_popup_wrap ul li:first-child{
	border-right:1px solid #efefef;
}

.event_popup_wrap ul li{
	float:left;
	width:50%;
	border-top:1px solid #efefef;
	background:#fff;
}

.event_popup_wrap ul li a{
	display:block;
	color:#333;
	text-align:center;
	line-height:50px;
}

.event_popup_wrap_bk{
	position:fixed; top:0px; left:0px;
	width:100%; height:100%;
	z-index:2099;
	background:url(../images/common/bk40.png) repeat;
}

@media all and (max-width: 1024px){
	
	/* section01_wrap section02_wrap section03_wrap */

	.swiper-wrapper li .vod_detail_box h2{
		font-size:18px;
	}

	.swiper-wrapper li .vod_detail_box h3{
		font-size:13px;
	}

	.swiper-wrapper li .vod_detail_box p{
		font-size:14px;
	}

	.swiper-wrapper li .vod_detail_box p{
		display: -webkit-box;
		height:3em;
		-webkit-line-clamp: 2; /* 라인수 */
	}

	/* pupup_wrap */

	.event_popup_wrap .popup_box{
		width:320px; height:480px;	
	}

	.event_popup_wrap .popup_img_box{
		width:320px; height:427px;
	}
	
	.choice_slider .swiper-button-prev,
	.new_slider .swiper-button-prev,
	.popularity_slider .swiper-button-prev,
	.choice_slider .swiper-button-next,
	.new_slider .swiper-button-next,
	.popularity_slider .swiper-button-next{
		display:none;
	}

	.main_category_slider ul {
		justify-content: left;
	}
}

@media (max-width:768px){

	/* common */
	
	h1{
		font-size:24px;
	}

	h2{
		font-size:20px;
	}

	h3{
		font-size:18px;
	}

	p{
		font-size:16px;
	}
	
	/* main_visual_wrap */
	.main_visual_wrap .main_visual_box{
		position:relative;
/*		height: 230px;*/
	}

	.main_visual_wrap .visual_slider li p{
		display:none;
	}

	.main_visual_wrap .visual_slider li img.visual_pc_ver{
		display:none;
	}
	
	.main_visual_wrap .visual_slider li .visual_img_box{
		padding-top:138.8335704125178%;
		/*padding-top:100%;*/
	}

	.main_visual_wrap .visual_slider li .visual_img_box img{
		width:100%; height: auto;
	}
	
	.main_visual_wrap .visual_slider li img.visual_mo_ver{
		display:block;
	}

	.visual_slider_thumbs .swiper-slide p{
		display:none;
	}
	
	.choice_slider .swiper-button-prev,
	.new_slider .swiper-button-prev,
	.popularity_slider .swiper-button-prev,
	.choice_slider .swiper-button-next,
	.new_slider .swiper-button-next,
	.popularity_slider .swiper-button-next{
		display:none;
	}
		
	.main_category_slider ul {
		justify-content: left;
	}

}	



@media (max-width:576px){
	
	/* main_section07_box */
	
	.main_category_slider ul li a{
		font-size:14px;
	}

	.main_section07_wrap .swiper-button-next, 
	.main_section07_wrap .swiper-button-prev{
		top:134%;
	}

	/* pupup_wrap */

	.event_popup_wrap .popup_box{
		width:300px; height:452px;	
	}

	.event_popup_wrap .popup_img_box{
		width:300px; height:400px;
	}

	.main_visual_wrap .main_visual_box{
		position:relative;
	}
}	

@media (max-width:420px){
	
	.main_visual_wrap .main_visual_box{
		position:relative;

	}
}	