@charset "utf-8";

/*
프로젝트 : 영화진흥위원회 온라인상영관 통합전산망 팝업
작성자 : 박주형
최종 업데이트일자 : 2022.02.22
*/

.main_tt2 > small{font-size:14px;}
.swiper {
	width: 600px;
	height: 300px;
}
.rank_num{display:block;padding:0 0 0 10px;float:left;width:35px;text-align: left;box-sizing: border-box;}
.mv_tt{display:block;float:left;padding-left:5px;width:65%;font-size:15px;box-sizing: border-box;text-align: left;}
.mv_cnt{padding-right:10px;width:20%;text-align: right;box-sizing: border-box; }
.slider{display:inline}
.slider >ul{text-align: center;}
.slider >ul > li {display:inline-block;width:250px;}

/*포스터*/
.picture .poster{position: relative; margin:30px 0 20px 0;width:420px;height:450px;overflow: hidden;transition:all 1s;transform: rotateY(0deg);opacity: 0;}
.picture .poster.swiper-slide-active{margin:0 auto;opacity: 1;}
.picture .poster.swiper-slide-next{opacity: 1;}
.picture .poster:last-child:before{display: none;}
.picture .poster:last-child .txt{display:block;}
.picture .poster.swiper-slide-prev:before{content:"";position: absolute;width:60%;height:60%;background: rgba(0,0,0,0.5);z-index: 1;}
.picture .poster.swiper-slide-next:before{content:"";position: absolute;width:60%;height:60%;background: rgba(0,0,0,0.5);z-index: 1;}
.picture .poster:hover{transform: rotateY(180deg);}
.picture .poster .bg{position: absolute;width:60%;height:100%; z-index: 0;}
.picture .poster.on .bg{transform: rotateY(0deg);}
.picture .poster .bg img{width:100%;}
.picture .poster .txt{display:none;position: absolute;top:0;left:0;padding:30px;width:100%;height:100%; background:url('../images/main/gr_bg2.png')repeat-y center; box-sizing: border-box;opacity: 0;}
.picture .poster.swiper-slide-active .txt{display: block;}
.picture .poster:hover .txt,.picture .poster.on .txt{transform: rotateY(0deg);opacity: 1;}
.picture .poster.swiper-slide-next .more{display:none;}
.picture .poster.swiper-slide-active .more{display:block;}
.picture .poster:last-child .more{display:block;}

/*종합박스오피스*/
.slick-main{display: flex; flex-direction: row;}
.slick-main > .col_row {
	width: 50%;
	box-sizing: border-box;
}

.slick-main table td {
	width: 45%;
	padding: 10px;
	vertical-align: top;
}
.slick-main.col_row table td {
	width: 45%;
	padding: 10px;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
}
.slick-main table .on{background:rgb(0, 59, 126); color:#fff;
}

.slick-main table {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	margin: 20px 10px 20px 70px;
}
.slick-main table th {
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
}

.slick-main table .rank_num{display:block;padding:0 0 0 10px;float:left;width:50px;text-align: left;box-sizing: border-box;}
/* table.type06 td { */
/*   width: 350px; */
/*   padding: 10px; */
/*   vertical-align: top; */
/* } */

/* table.type06 .even { */
/* 	background: #efefef; */
/* } */

.sub_main {
	padding: 20px 0;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

/*박스오피스 슬라이더, 테이블*/
.slick-sample table td {
	width: 320px;
	padding: 10px;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
	background:#555;
	color:#fff;
	ext-overflow:ellipsis; 
	overflow:hidden; 
	white-space:nowrap;
  
}

.slick-sample table td a{
	color:#fff;
}
.slick-sample.col_row table td {
	width: 320px;
	padding: 10px;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
}
/*.slick-sample table .on{background:rgb(0, 59, 126)}*/
.slick-sample table .on{background: #7e5da4;
	background: -moz-linear-gradient(left, #7e5da4 0%, #462a65 100%);
	background: -webkit-linear-gradient(left, #7e5da4 0%,#462a65 100%);
	background: linear-gradient(to right, #7e5da4 0%,#462a65 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e5da4', endColorstr='#462a65',GradientType=1 );}
.slick-sample li {text-align: center;)}
.slick-sample div p {padding:0 10px 10px 10px;text-align:center;}

.slick-slide{
	opacity:0.5;
	moz-transform: scale(0.7);
	ms-transform: scale(0.7);
	o-transform: scale(0.7);
	webkit-transform: scale(0.7);
	transform: scale(0.7);
}

.center .slick-center {
	moz-transform: scale(1);
	ms-transform: scale(1);
	o-transform: scale(1);
	webkit-transform: scale(1);
	transform: scale(1);
	color: #0d030f;
	opacity: 1 
}
.slick-sample > div{width:28%;}
.slick-slide img{margin:0 auto;width:50%;}

.center .slick-arrow {
	z-index:10;
	width:50px;
	height:60px;
}

.center .slick-prev {
	left : 450px;
	top : 10px;
	display: block;
	position: absolute;
	width: 50px;
	height: 50px;
	background: url(../images/main/visu_nav.png)no-repeat;
	background-position: 0px -107px;
	border: 1px solid #ddd;
	text-indent: -9999px;
}

.center .slick-next {
	top : 10px;
	right:450px;
	display: block;
	position: absolute;
	left:auto;
	width: 50px;
	height: 50px;
	border: 1px solid #ddd;
	text-indent: -9999px;
	background: url('../images/main/visu_nav.png')no-repeat;
	background-position: -50px -107px;
}

.center .slick-prev:hover, .center .slick-prev.next:focus {
	background-position:0 -58px;
	border-color:#ff0672
}

.center .slick-next:hover, .center .slick-prev.next:focus {
	background-position: -50px -58px;
	border-color: #ff0672;
}

 .center .slick-arrow::before {
	display:block;
	width:14px;
	height:26px;
	margin:0 auto;
	color: #000;
	font-size: 24px;
}



.ottDetail .swiper-slide{display: flex; padding-top: 20px; justify-content: center; align-items: center;}

.ottBtn {
	display: inline-block;
	padding: 5px 14px;
	border-width: 1px 1px 1px 1px !important;
	border-style: solid !important;
	font-size: 12px;
	box-sizing: border-box !important;
	transition: background 0.3s;
	word-break: keep-all;
	vertical-align: middle;
	width: 100px;
	height: 50px;
}

/*플랫폼별 탭*/
.platform li.on a, .platform li a:hover, .platform li a:focus {
	border: 1px solid #623c91;
	background: none;
}
.platform li a {
	display: block;
	height: 70px;
	line-height: 50px;
	text-align: center;
	border: 1px solid #dbdbdb;
	border-right: 0;
	outline-right: 0;
	font-size: 1.1em;
}

#wavveTab {background: url('../images/wavve.png'); background-position: 1px;background-size: contain;background-repeat: no-repeat; }
#cinefoxTab {background: url('../images/cinefox.png'); background-position: 1px;background-size: contain;background-repeat: no-repeat;}
#kakaoTab {background: url('../images/kakao.png'); background-position: 2px 2px;background-size: contain;background-repeat: no-repeat;}
#watchaTab {background: url('../images/watcha.png'); background-position: 1px;background-size: contain;background-repeat: no-repeat;}
#tvingTab {background: url('../images/tving.png'); background-position: 1px;background-size: contain;background-repeat: no-repeat;}

.platformButtons .swiper-pagination {
	position: absolute;
	top: 10px;
	right: 10px;
	width: auto !important;
	left: auto !important;
	margin: 0;
}
.platformButtons .swiper-pagination-bullet {
	padding: 5px 10px;
	border-radius: 0;
	width: auto;
	height: 30px;
	text-align: center;
	line-height: 30px;
	font-size: 12px;
	color:#000;
	opacity: 1;
	margin-right:2px;
	background: #f8f8f8;
}

.platformButtons .swiper-pagination-bullet-active {
	color: #fff;
	background: #f18825;
}

.platformButtons {
	text-align: center;
	margin-bottom: 1.5rem;
	font-size: 0;
}

.platformButtons button {
	cursor: pointer;
	border: 1px solid silver;
	border-right-width: 0;
	background-color: #f8f8f8;
	font-size: 1rem;
	padding: 0.5rem;
	transition-duration: 0.3s;
	margin: 0;
}

.platformButtons span:first-child {
	border-top-left-radius: 0.3em;
	border-bottom-left-radius: 0.3em;
}

.platformButtons span:last-child {
	border-top-right-radius: 0.3em;
	border-bottom-right-radius: 0.3em;
	border-right-width: 1px;
}


.platform-container{
	margin-top: 40px;
	width: 50px;
	border: 1px solid #d9d9d9;
	background: #f4f4f4;
	padding: 28px 30px;
	font-size: 24px;
	flex-wrap: wrap; 
	width:90%;
}
.platform-container a{display: flex;}
.platform-container h4{
	font-size: 20px; 
	padding-top: 20px; 
	padding-left: 20px;
}
.platform_newEst{display: flex; justify-content: center;}
.platform_newEst_inner{padding : 20px;}
.flex-container{
	display: flex;
	margin: 20px;
	margin-top: 40px;
	font-size: 24px;
}
.flex-container.wrap{
	flex-wrap: wrap; 
	width:100%; 
	justify-content: left;
}
.flex-item{
	min-width: 250px;
	height: 350px;
	margin: 5px;
	text-align: center;
	color: white;
}

.flex-container img{width: 180px; height:250px;}
.flex-container .txt{text-align: center;}

.con_inner2{
	width:63%; 
	margin: 0 auto; 
}
.ott_box_img{max-width: 250px;max-height: 100px;}


@media screen and (max-width: 1200px) {
	.slick-prev:before, .slick-next:before {
		display: none;
	}

	.slick-sample div {
		width: 100%;
	}
}

@media screen and (min-width: 2000px) {
.con_inner2{width:48%;}

}
@media (max-width : 700px) {
	.ott_box_img{display: none;}
}