@charset "euc-kr";

/********************************************************************************************************************************
* °ψΕλ
********************************************************************************************************************************/
.sub-media-wp {}
	.sub-media-wp .Hityoutube-img {
		clear: both;
		position: relative;
		height: 200px;
		margin: -30px 0 15px 0; padding: 40px 440px 0 0;
		font-size: 15.5px; color: #444; line-height: 160%;
		background: url('/pds/images/sub/media_Visual.png') no-repeat right bottom;
		overflow: hidden;
		}
		.sub-media-wp .Hityoutube-img .stit {display: block; margin: 0 0 15px 0; font-size: 37px; color: #333; letter-spacing: -2px; line-height: 120%; font-weight: 500;}


	.sub-media-wp .list {
		display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 20px; row-gap: 50px;
		padding: 10px 0 50px 0;
		border-bottom: 1px solid #ccc;
		}
		.sub-media-wp .list a {display: block; text-decoration: none !important;}
			.sub-media-wp .list .thumbs {
				display: flex;
				position: relative;
				text-align: center;
				justify-content: center; align-items: center;
			    border: 1px solid #ddd;
				border-radius: 8px;
				transition: all 0.2s;
				image-rendering: crisp-edges;
				overflow: hidden;
				}
				.sub-media-wp .list a:hover .thumbs {border-color: #999; box-shadow: 4px 8px 8px 0 rgba(0,0,0, 0.2);}
				.sub-media-wp .list .thumbs::after {
					content: "";
					display: block;
					position: absolute; top: 50%; left: 50%;
					width: 50px; height: 50px;
					margin: -25px 0 0 -25px;
					background: url('/pds/images/comm/media_playBtn.png') no-repeat 0 0;
					background-size: 50px auto;
					opacity: 0.8;
					z-index: 2;
					}
				.sub-media-wp .list .thumbs img {display: inline-block; width: 100%; height: auto;}
				
			.sub-media-wp .list .subj {
				display: block; display: -webkit-box;
				position: relative;
				min-height: 34px;
				margin: 10px 0 0px 0; padding: 0 0 0 40px;
				font-size: 14px; letter-spacing: -0.5px; line-height: 130%;
				word-wrap: break-word; text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				}
				/*
				.sub-media-wp .list .subj::before {
					content: "";
					display: block;
					position: absolute; top: 50%; left: 0;
					width: 32px; height: 32px;
					margin: -16px 0 0 0;
					border: 1px solid #fd5a5a;
					border-radius: 100%;
					background: url('/pds/images/sub/media_icon(youtube).png') no-repeat 50% 50%;
					background-size: 22px auto;
					}
				*/
				.sub-media-wp .list .subj::before {
					content: "";
					display: block;
					position: absolute; top: 50%; left: 0;
					width: 34px; height: 34px;
					margin: -17px 0 0 0;
					border: 1px solid #ddd;
					border-radius: 100%;
					background-repeat: no-repeat;
					background-position: 50% 50%;
					background-size: 33px 33px;
					overflow: hidden;
					}
					.sub-media-wp .list.channel1 .subj::before {background-image: url('/pds/images/sub/media_ic1.png');}
					.sub-media-wp .list.channel2 .subj::before {background-image: url('/pds/images/sub/media_ic2.png');}
					.sub-media-wp .list.channel3 .subj::before {background-image: url('/pds/images/sub/media_ic3.png');}
					.sub-media-wp .list.channel4 .subj::before {background-image: url('/pds/images/sub/media_ic4.png');}
					.sub-media-wp .list.channel5 .subj::before {background-image: url('/pds/images/sub/media_ic5.png');}
					.sub-media-wp .list.channel6 .subj::before {background-image: url('/pds/images/sub/media_ic6.png');}
					.sub-media-wp .list.channel7 .subj::before {background-image: url('/pds/images/sub/media_ic7.png');}

			.sub-media-wp .list a.active .thumbs {border-color: #ff5529;}

	.sub-media-wp .list .youtube-modal {
		display: none; 
		position: fixed; top: 50%; left: 50%;
		width: 840px; height: 490px;
		margin: -230px 0 0 -420px; padding: 20px 0 0 0;
		text-align: center;
		border: 1px solid #333;
		background: #fff;
		box-shadow: 10px 10px 15px 0 rgba(0,0,0, 0.3);
		transition: all 0.2s;
		z-index: 1000;
		}
		.sub-media-wp .list .youtube-modal.show {display: block;}
		/*
		.sub-media-wp .list .youtube-modal::before {content: ""; display: block; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0, 0.5); z-index: 9999999999;}
		*/
		.sub-media-wp .list .youtube-modal iframe {width: 800px; height: 450px;}

		.sub-media-wp .list .youtube-modal > div {position: relative;}
			.sub-media-wp .list .youtube-modal > div::after {
				content: "";
				display: block;
				position: absolute; top: 50%; left: 50%;
				width: 100px; height: 100px;
				margin: -50px 0 0 -50px;
				background: url('/images/loding.gif') no-repeat 50% 50%;
				animation: youtube_ani 2s linear forwards;
				opacity: 1;
				}
				@keyframes youtube_ani {
					70% {opacity: 1;}
					100% {display: none !important; opacity: 0; z-index: -1;}
					}

		.sub-media-wp .list .youtube-modal > div .close {
			display: flex;
			position: absolute; top: -40px; right: -25px;
			width: 50px; height: 50px;
			padding: 0 0 10px 1px;
			font-size: 50px; color: #fff; line-height: 0;
			justify-content: center; align-items: center;
			border-radius: 100%;
			background: #333;
			transition: all 0.2s;
			cursor: pointer;
			}
			.sub-media-wp .list .youtube-modal > div .close:hover {background: #ff5529;}
		/*
		.sub-media-wp .list .youtube-modal.up {margin-top: -320px;}
		*/