@charset "utf-8";
/**
 * Lists
 */
 .newsLists {
	width: min(calc(958 / var(--vw-min) * 100vw), 958px);
	margin: 0 auto;
}
@media screen and (max-width:768px){
	.newsLists {
		width: 100%;
	}
}

/* item */
.newsLists__item {
	height: min(calc(70 / var(--vw-min) * 100vw), 70px);
}
.newsLists__item:not(:first-child) {
	margin-top: min(calc(10 / var(--vw-min) * 100vw), 10px);
}
.newsLists__link {
	background-color: #000;
	border: 2px solid #e50069;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 0 min(calc(13 / var(--vw-min) * 100vw), 13px);
	position: relative;
	text-decoration: none;
	transition: background-color .3s ease;
}
.newsLists__link:hover {
	background-color: #e50069;
}
@media screen and (max-width:767px){
	.newsLists__item {
		height: calc(111 / var(--vw-min) * 100vw);
	}
	.newsLists__link {
		padding: calc(2 / var(--vw-min) * 100vw);
	}
}

/* time,title */
.newsLists__time {
	background-color: #e50069;
	color: #fff33f;
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(calc(140 / var(--vw-min) * 100vw), 140px);
	height: min(calc(38 / var(--vw-min) * 100vw), 38px);
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	letter-spacing: 0;
	transition: color .3s ease,
				background-color .3s ease;
}
.newsLists__link:hover .newsLists__time {
	background-color: #fff33f;
	color: #e50069;
}
.newsLists__title {
	color: #fff;
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	width: calc(100% - min(calc(140 / var(--vw-min) * 100vw), 140px));
	padding-left: min(calc(20 / var(--vw-min) * 100vw), 20px);
}
@media screen and (max-width:767px){
	.newsLists__time {
		height: 100%;
		font-size: calc(20 / var(--vw-min) * 100vw);
	}
	.newsLists__title {
		font-size: calc(20 / var(--vw-min) * 100vw);
		-webkit-line-clamp: 2;
	}
}

/**
 * detail
 */
.newsDetail__inner {
	background-color: #000;
	border: 2px solid #e50069;
	width: min(calc(958 / var(--vw-min) * 100vw), 958px);
	margin: 0 auto;
}
@media screen and (max-width:768px){
	.newsDetail__inner {
		width: 100%;
	}
}

/* title */
.newsDetail__title {
	background-color: #e50069;
	display: flex;
	align-items: center;
	width: 100%;
	padding: min(calc(13 / var(--vw-min) * 100vw), 13px);
	position: relative;
	text-decoration: none;
	transition: background-color .3s ease;
}
@media screen and (max-width:768px){
	.newsDetail__title {
		align-items: stretch;
	}
}

/* time,title */
.newsDetail__title--time {
	background-color: #fff33f;
	color: #e50069;
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(calc(140 / var(--vw-min) * 100vw), 140px);
	height: min(calc(38 / var(--vw-min) * 100vw), 38px);
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	letter-spacing: 0;
	transition: color .3s ease,
				background-color .3s ease;
}
.newsDetail__title--text {
	color: #fff;
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	width: calc(100% - min(calc(140 / var(--vw-min) * 100vw), 140px));
	padding-left: min(calc(20 / var(--vw-min) * 100vw), 20px);
}
@media screen and (max-width:768px){
	.newsDetail__title--time {
		height: auto;
		font-size: calc(20 / var(--vw-min) * 100vw);
	}
	.newsDetail__title--text {
		font-size: calc(20 / var(--vw-min) * 100vw);
	}
}

/* textWrap */
.newsDetail__textWrap {
	color: #fff;
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	width: min(calc(790 / var(--vw-min) * 100vw), 790px);
	margin: 0 auto;
	padding: min(calc(50 / var(--vw-min) * 100vw), 50px) 0;
}
@media screen and (max-width:768px){
	.newsDetail__textWrap {
		width: 100%;
		font-size: calc(20 / var(--vw-min) * 100vw);
		padding: calc(50 / var(--vw-min) * 100vw) calc(70 / var(--vw-min) * 100vw);
	}
}

/* image */
.newsDetail__textWrap img{
    height: auto !important;
    max-width: 100%;
}

/* iframe */
.newsDetail__textWrap .ytifWrap{
    display: block;
    position: relative;
	width: min(calc(640 / var(--vw-min) * 100vw), 640px);
	height: min(calc(360 / var(--vw-min) * 100vw), 360px);
}
@media screen and (max-width: 767px) {
	.newsDetail__textWrap .ytifWrap{
	    width: 100%;
		height: auto;
	    padding-top: 56.25%;
	}
}
.newsDetail__textWrap iframe[src*="youtube"]{
	border: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

/* a */
.newsDetail__textWrap a{
	color: #e50069;
}


/**
 * pager
 */
.pagingListsWrap {
	margin-top: min(calc(40 / var(--vw-min) * 100vw), 40px);
}
.pagingLists {
	display: flex;
	justify-content: center;
}

/* item */
.pagingLists__item {
	width: min(calc(34 / var(--vw-min) * 100vw), 34px);
	height: min(calc(34 / var(--vw-min) * 100vw), 34px);
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	margin: 0 min(calc(5 / var(--vw-min) * 100vw), 5px);
}
.pagingLists__active {
	background-color: #000;
	border: 2px solid #fff33f;
	color: #fff33f;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.pagingLists__link {
	background-color: #e50069;
	border: 2px solid #e50069;
	color: #fff33f;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
	transition: background-color .3s ease;
}
.pagingLists__link:hover {
	background-color: #000;
}
@media screen and (max-width:768px){
	.pagingLists__item {
		width: calc(50 / var(--vw-min) * 100vw);
		height: calc(50 / var(--vw-min) * 100vw);
		font-size: calc(20 / var(--vw-min) * 100vw);
	}
}

/*
.itemLists {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
  .itemLists__item {
    width: calc((100% - 18px) / 2);
    margin-bottom: 46px;
  }
  .itemLists__item img{
    width: 100%;
    height: auto;
    transition: all .4s ease;
  }
  @media screen and (max-width: 768px) {
    .itemLists__item {
        width: calc((100% - calc(24 / var(--vw-min) * 100vw)) / 2);
        margin-bottom: calc(80 / var(--vw-min) * 100vw);
    }
  }

  .itemLists__item .visual-img{
    overflow: hidden;
  }
  .itemLists__item:hover img{
    transform:  scale(1.05);

  }

.movieBoxWrap {
    background: #000;
    display: block;
    width: 100%;
    padding-top: 56.25%;
    position: relative;
    overflow: hidden;
	border: 1px solid #fff;
  }
  .movieBoxWrap::before {
    background: #000;
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
    width: 100%;
    display: block;
    z-index: 1;
    opacity: 0.3;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }
  .itemLists__item:hover .movieBoxWrap::before {
    opacity: 0;
  }

.movieBox {
    width: 100%;
    height: 100%;
    transition: 0.3s ease;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-size: 100% auto;
    background-repeat: no-repeat;
  }
*/

.movie {
	background:#000;
	overflow: hidden;
	position: relative;
	z-index: 10;
}
.movie__lists {
	display: flex;
	flex-wrap: wrap;
	width:100%;
	padding:0 min(calc(20 / var(--vw-min) * 100vw),20px);
}
@media screen and (max-width:768px){
	.movie__lists {
		flex-wrap: wrap;
	}
}
.movie__list {
	width:calc(50% - min(calc(40 / var(--vw-min) * 100vw),40px));
	position: relative;
	overflow: hidden;
	padding:0;
	margin:0 min(calc(20 / var(--vw-min) * 100vw),20px) min(calc(40 / var(--vw-min) * 100vw),40px);
}
.movie__list:before {
	content: "";
	display: block;
	width: 100%;
	padding-top: 56.25%;
	position: relative;
	top: 0;
	z-index: 0;
}
@media screen and (max-width:768px){
	.movie__list {
		/*width: 50%;*/
	}
	.movie__list:first-child {
		/*width: 100%;*/
	}
}
/* @media screen and (max-width:768px){
	.movie__list {
		width:100%;
		padding-top:56.25%;
	}
} */
.movie__playLink {
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease;
	background-size:cover;
	background-position: center center;
}
.movie__playLink:before {
	content:'';
	position: absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background:var(--color-pink);
	opacity:0.5;
	z-index:40;
	transition: all 0.8s ease;
}
.movie__list:nth-child(odd) .movie__playLink:before {
	background:var(--color-pink);
}
.movie__list:nth-child(even) .movie__playLink:before {
	background:var(--color-yellow);
}
/* @media screen and (min-width:769px){
	.movie__list:nth-child(4n + 1) .movie__playLink:before,
	.movie__list:nth-child(4n) .movie__playLink:before {
		background:var(--color-pink);
	}
	.movie__list:nth-child(4n + 2) .movie__playLink:before,
	.movie__list:nth-child(4n + 3) .movie__playLink:before {
		background:var(--color-yellow);
	}
}
@media screen and (max-width:768px){
	.movie__list:nth-child(odd) .movie__playLink:before {
		background:var(--color-pink);
	}
	.movie__list:nth-child(even) .movie__playLink:before {
		background:var(--color-yellow);
	}
} */
.movie__playLink img {
	transition: all 0.8s ease;
	position: absolute;
	left:0;
	top:0;
	display: block;
	width:100%;
	height:100%;
	object-fit: cover;
}
@media screen and (hover:hover){
	.movie__playLink:hover img {
		transform:scale(1.1);
	}
	.movie__playLink:hover:before {
		opacity:0.3;
	}
}
.movie__playLinkIcon {
	width:min(calc(100 / var(--vw-min) * 100vw),100px);
	height:min(calc(100 / var(--vw-min) * 100vw),100px);
	border:1px solid #000;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index:50;
}
.movie__playLinkIcon:before {
	content:'';
	width:min(calc(30 / var(--vw-min) * 100vw),30px);
	height:min(calc(23 / var(--vw-min) * 100vw),23px);
	display: block;
	-webkit-mask:url(../img/common/t_play.svg) no-repeat center center / contain;
	mask:url(../img/common/t_play.svg) no-repeat center center / contain;
	background:#000;
	transition: all 0.3s ease;
	z-index:50;
}
@media screen and (hover:hover){
	.movie__list:nth-child(4n + 1) .movie__playLink:hover .movie__playLinkIcon:before,
	.movie__list:nth-child(4n) .movie__playLink:hover .movie__playLinkIcon:before {
		background:var(--color-yellow);
	}
	.movie__list:nth-child(4n + 2) .movie__playLink:hover .movie__playLinkIcon:before,
	.movie__list:nth-child(4n + 3) .movie__playLink:hover .movie__playLinkIcon:before {
		background:var(--color-pink);
	}
}
.play-circle {
	position:absolute;
	left:-1px;
	right:-1px;
	top:-1px;
	bottom:-1px;
}
.play-circle circle {
	fill: transparent;
	stroke-width: 2px;
	stroke-dasharray: 0 312;
	transition: 0.3s linear;
}
@media screen and (min-width:769px){
	.movie__list:nth-child(4n + 1) .play-circle circle,
	.movie__list:nth-child(4n) .play-circle circle {
		stroke:var(--color-yellow);
	}
	.movie__list:nth-child(4n + 2) .play-circle circle,
	.movie__list:nth-child(4n + 3) .play-circle circle {
		stroke:var(--color-pink);
	}
}
@media screen and (hover:hover){
	.movie__playLink:hover .play-circle circle{
		stroke-dasharray:312 312;
	}
}
.movie__playTitle {
	display: block;
	position: absolute;
	left:min(calc(20 / var(--vw-min) * 100vw),20px);
	right:min(calc(20 / var(--vw-min) * 100vw),20px);
	bottom:min(calc(14 / var(--vw-min) * 100vw),14px);
	font-size:min(calc(16 / var(--vw-min) * 100vw),16px);
	font-weight: 600;
	text-align: right;
	color:#000;
	z-index:60;
}
@media screen and (max-width:768px){
	.movie__playTitle {
		font-size:min(calc(20 / var(--vw-min) * 100vw),20px);
		line-height: 1.3;
	}
}

