@charset 'utf-8';



/* 메인카테고리 리스트 */
.main_cate { margin-top:125px; }
.ch_list { display:inline-block; width:1413px; font-size:0; line-height:0; letter-spacing:-5px; }
.ch_list li.each { display:inline-block; *display:inline; width:391px; margin:0 80px 80px 0; font-size:14px; line-height:1; letter-spacing:0; text-align:center; }

.ch_list li.each * { box-sizing:border-box !important; -webkit-box-sizing:border-box !important; -moz-box-sizing:border-box !important; }
.ch_list li.each p.tit { margin-top:18px; }
.ch_list li.each p.tit a { font-size:28px; font-weight:bold; color:#fff; }
.ch_list li.each span.bookmark i { display:inline-block; width:20px; height:20px; background:url('/images/phoenixTV/icon_01.png') center center no-repeat; background-size:20px auto; }
.ch_list li.each span.bookmark:hover i { background:url('/images/phoenixTV/icon_01_on.png') center center no-repeat; background-size:20px auto; }
.ch_list li.each span.bookmark.done i { background:url('/images/phoenixTV/icon_01_done.png') center center no-repeat; background-size:20px auto; }
/*
.ch_list li.each a.link i { display:inline-block; width:20px; height:20px; background:url('/images/phoenixTV/icon_02.png') center center no-repeat; background-size:20px auto; }
.ch_list li.each a.link:hover i { background:url('/images/phoenixTV/icon_02_on.png') center center no-repeat; background-size:20px auto; }
*/
.ch_list li.each span.share i { display:inline-block; width:20px; height:20px; background:url('/images/phoenixTV/icon_03.png') center center no-repeat; background-size:20px auto; }
.ch_list li.each span.share:hover i { background:url('/images/phoenixTV/icon_03_on.png') center center no-repeat; background-size:20px auto; }
.ch_list li.each a.m_img_link { display:none; }

/* Common style */
.ch_list li.each div {
	position: relative;
	overflow: hidden;
	max-height: 240px;
	width: 391px;
	margin:0;
	height: auto;
	text-align: center;
	cursor: pointer;
	border:1px solid #575757;
}

.ch_list li.each div img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
}

.ch_list li.each div figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.ch_list li.each div figcaption::before,
.ch_list li.each div figcaption::after {
	pointer-events: none;
}

.ch_list li.each div figcaption,
.ch_list li.each div figcaption > span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.ch_list li.each div figcaption > span {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.ch_list li.each div h2 {
	word-spacing: -0.15em;
	font-weight: 300;
	font-size:30px;
}

.ch_list li.each div h2 span {
	font-weight: 800;
}

.ch_list li.each div h2,
.ch_list li.each div p {
	margin: 0;
}

.ch_list li.each div p {
	letter-spacing: 1px;
	font-size: 68.5%;
}



/*-----------------*/
/***** Winston *****/
/*-----------------*/

div.effect-winston {
	text-align: left;
}

div.effect-winston img {
	/*
	-webkit-transition: opacity 0.45s;
	transition: opacity 0.45s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	*/
}

div.effect-winston figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('/images/phoenixTV/triangle.svg') no-repeat center center;
	background-size: 100% 100%;
	content: '';
	-webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
	transition: opacity 0.45s, transform 0.45s;
	-webkit-transform: rotate3d(0,0,1,45deg);
	transform: rotate3d(0,0,1,45deg);
	-webkit-transform-origin: 0 132%;
	transform-origin: 0 132%;
}


div.effect-winston p {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 0 1.5em 15px 0;
}

div.effect-winston span {
	margin: 0 0 0 10px;
	color: #5d504f;
	font-size: 170%;
}

div.effect-winston span:hover,
div.effect-winston span:focus {
	color: #cc6055;
}

div.effect-winston p span i {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,50px,0);
	transform: translate3d(0,50px,0);
}

div.effect-winston:hover img {
	/*opacity: 0.6;*/
}

div.effect-winston:hover figcaption::before {
	opacity: 0.6;
	-webkit-transform: rotate3d(0,0,1,16deg);
	transform: rotate3d(0,0,1,21deg);
}

div.effect-winston:hover p i {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

div.effect-winston:hover p span:nth-child(3) i {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

div.effect-winston:hover p span:nth-child(2) i {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

div.effect-winston:hover p span:first-child i {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}



/*-----------------*/
/***** Apollo *****/
/*-----------------*/

div.effect-apollo {
}

div.effect-apollo img {
	/*
	opacity: 0.95;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	*/
	/*-webkit-transform: scale3d(1.05,1.05,1);
	transform: scale3d(1.05,1.05,1);*/
}

div.effect-apollo figcaption::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.5);
	content: '';
	-webkit-transition: -webkit-transform 0.6s;
	transition: transform 0.6s;
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,-45deg) translate3d(0,110%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,-45deg) translate3d(0,110%,0);
	opacity: 0.3;
}

div.effect-apollo h2 {
	text-align: left;
}

div.effect-apollo:hover img {
	/*opacity: 0.6;*/
	/*-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);*/
}

div.effect-apollo:hover figcaption::after {
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,-45deg) translate3d(0,-110%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,-45deg) translate3d(0,-110%,0);
	opacity: 0.3;
}



/*---------------*/
/***** Lexi *****/
/*---------------*/

div.effect-lexi {
	background: -webkit-linear-gradient(-45deg, #000 0%,#fff 100%);
	background: linear-gradient(-45deg, #000 0%,#fff 100%);
}

div.effect-lexi img {
	margin: -10px 0 0 -10px;
	max-width: none;
	width: -webkit-calc(100% + 10px);
	width: calc(100% + 10px);
	opacity: 0.9;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(10px,10px,0);
	transform: translate3d(10px,10px,0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

div.effect-lexi figcaption::before,
div.effect-lexi p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

div.effect-lexi figcaption::before {
	position: absolute;
	right: -50px;
	bottom: -50px;
	width: 200px;
	height: 200px;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 900px rgba(255,255,255,0.2);
	content: '';
	opacity: 0;
	-webkit-transform: scale3d(0.5,0.5,1);
	transform: scale3d(0.5,0.5,1);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

div.effect-lexi:hover img {
	opacity: 0.6;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

div.effect-lexi h2 {
	text-align: left;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(5px,5px,0);
	transform: translate3d(5px,5px,0);
}

div.effect-lexi p {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 0 1.5em 1.5em 0;
	width: 140px;
	text-align: right;
	opacity: 0;
	-webkit-transform: translate3d(20px,20px,0);
	transform: translate3d(20px,20px,0);
}

div.effect-lexi:hover figcaption::before {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

div.effect-lexi:hover h2,
div.effect-lexi:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}


/*-----------------*/
/***** Phoebe *****/
/*-----------------*/

div.effect-phoebe {
	background: #675983;
}

div.effect-phoebe img {
	opacity: 0.85;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

div.effect-phoebe:hover img {
	opacity: 0.6;
}

div.effect-phoebe figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('/images/phoenixTV/triangle2.svg') no-repeat center center;
	background-size: 100% 100%;
	content: '';
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(6,2.5,1);
	transform: scale3d(6,2.5,1);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

div.effect-phoebe:hover figcaption::before {
	opacity: 0.6;
	-webkit-transform: scale3d(1.25,1,1);
	transform: scale3d(1.25,1,1);
}

div.effect-phoebe h2 {
	margin-top: 1em;
	-webkit-transition: transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,40px,0);
	transform: translate3d(0,40px,0);
}

div.effect-phoebe:hover h2 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

div.effect-phoebe p span {
	color: #fff;
	font-size: 140%;
	opacity: 0;
	position: relative;
	display: inline-block;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

div.effect-phoebe p span:first-child {
	-webkit-transform: translate3d(-60px,-60px,0);
	transform: translate3d(-60px,-60px,0);
}

div.effect-phoebe p span:nth-child(2) {
	-webkit-transform: translate3d(0,60px,0);
	transform: translate3d(0,60px,0);
}

div.effect-phoebe p span:nth-child(3) {
	-webkit-transform: translate3d(60px,-60px,0);
	transform: translate3d(60px,-60px,0);
}

div.effect-phoebe:hover p span {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}








/* _모바일 ---------------------------------------------------------------------------------- */
@media all and (max-width:768px){

	.main_cate { margin:45px 10% 0 10%; }
	.ch_list { width:100%; }
	.ch_list li.each { width:100%; margin:0 0 35px 0; }
	.ch_list li.each p.tit { margin-top:10px; }
	.ch_list li.each p.tit a { font-size:21px; }
	.ch_list li.each div {
		width: 100%;
	}
	.ch_list li.each span.bookmark i { display:inline-block; width:16px; height:16px; background:url('/images/phoenixTV/m_icon_01.png') center center no-repeat; background-size:16px auto; }
	.ch_list li.each span.bookmark:hover i { background:url('/images/phoenixTV/icon_01_on.png') center center no-repeat; background-size:15px auto; }
	.ch_list li.each span.bookmark.done i { background:url('/images/phoenixTV/icon_01_done.png') center center no-repeat; background-size:15px auto; }
	/*
	.ch_list li.each a.link i { display:inline-block; width:15px; height:15px; background:url('/images/phoenixTV/icon_02.png') center center no-repeat; background-size:15px auto; }
	.ch_list li.each a.link:hover i { background:url('/images/phoenixTV/icon_02_on.png') center center no-repeat; background-size:15px auto; }
	*/
	.ch_list li.each span.share i { display:inline-block; width:16px; height:16px; background:url('/images/phoenixTV/m_icon_03.png') center center no-repeat; background-size:16px auto; }
	.ch_list li.each span.share:hover i { background:url('/images/phoenixTV/icon_03_on.png') center center no-repeat; background-size:15px auto; }
	div.effect-winston span { margin:0 0 0 8px; }
	div.effect-winston p { bottom:auto; top:0; padding:7px 8px 0 0; }
	div.effect-winston p span i { opacity:1; transform: translate3d(0,0,0); }
}