@charset "utf-8";

.title-visual-bg{background-color: #273123;}
.title-visual-wrap{background: url(/image/subpage/title/visual-media.jpg) center center no-repeat; background-size: cover; 
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/image/subpage/title/visual-media.jpg',sizingMethod='scale');
	-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/image/subpage/title/visual-media.jpg', sizingMethod='scale');
}
.media{background-color: #f7f7f7;}
.media .content-top{border-bottom: 3px solid #bfbfbf;margin-bottom: 50px;padding-top: 30px;}
.media .content-top h6{font-family: 'NanumBarunGothicBold';padding-bottom: 25px;font-size: 2.2em; color: #eca446; margin-bottom: -3px; border-bottom: 3px solid #eca446;display: inline-block; position: relative;z-index: 1;}
.media .content-top .select-wrap{float: right;}
.media .content-top .select-wrap select{font-size: 1.4em;color: #373641;height: 40px;line-height: 40px;border: 1px solid #d3d2d1;width: 180px;padding: 10px;cursor: pointer;}

.media-list li{float: left;width: 24%;margin-right: 1.333333%;margin-bottom: 3%;background-color: #fff;-webkit-transition: .3s width ease;transition: .3s width ease;}
.media-list li:nth-child(4n){margin-right: 0;}
.media-list li > a{display: block;}
.media-list li .picture{width: 100%;position: relative;background-position: center center; background-repeat: no-repeat;-webkit-background-size: cover;background-size: cover;}
.media-list .default {background: url(/image/subpage/media/media-default.png) center center no-repeat;}
.media-list .default, .media-list .no-image{border: 1px solid #d7d9db;}
.media-list .default .picture:before,
.media-list .no-image .picture:before{content:'';display: block;width: 100%;height: 161px;background: none;}
.media-list .no-image .picture{background: #f2f2f2 url(/image/subpage/media/media-no-image.png) center center no-repeat; background-size: initial;}
.media-list .default .info, .media-list .no-image .info{border: none;}
.media-list li .picture img{width: 100%;}
.media-list li .picture:before{content:'';display: block;width: 100%;height: 161px;background: url(/image/main/bg-shadow.png) 0 bottom no-repeat;-webkit-background-size: 100% 100%;background-size: 100% 100%;z-index: 1;position: absolute; left: 0;bottom: -1px;}
.media-list li .picture:after{display: inline-block;width: 22px;height: 12px;background: url(/image/common/bg-section-arrow.png) 0 0 no-repeat;position: absolute;left: 50%;bottom: -1px;margin-left: -11px;z-index: 2;content:'';}
.media-list li.default .picture:after {display: inline-block;width: 22px;height: 12px;background: none;}
.media-list li .info{height: 290px;padding: 10% 8%;position: relative;border: 1px solid #d7d9db;border-top: 0;-webkit-transition: .3s height ease;transition: .3s height ease;}

.media-list li.movie,
.media-list li.vod{position: relative;}
.media-list li.movie > a:after,
.media-list li.vod > a:after{display: inline-block;width: 88px;height: 88px;content:'';background: url(/image/common/btn-play.png) 0 0 no-repeat;position: absolute;left: 50%;top: 18%;margin-left: -44px;z-index: 3;-webkit-transition: .3s top ease;transition: .3s top ease;}

.media-list li .info .post-type{height: 12px;text-indent: -999em;overflow: hidden;background-repeat: no-repeat;margin-bottom: 2em;}
.media-list li .info .post-head{font-size: 1.8em;line-height: 1.5;letter-spacing: -0.1px;color: #1a1a1a;font-family: NanumBarunGothicBold;}
.media-list li .info .post-body{font-size: 1.4em;letter-spacing: -0.25px;line-height: 1.6;color: #4c4c4c;}
.media-list li .info .post-date{position: absolute;left: 10%;bottom: 12%;z-index: 1;font-size: 1.4em;color: #808080;font-family: NanumBarunGothicBold;height: 35px;line-height: 35px;background-repeat: no-repeat;padding-left: 40px;}

.media-list li .info-case2 .post-head{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-bottom: 0.3em;}

.media-list li.facebook .info .post-type{background-image: url(/image/main/title-facebook.png);}
.media-list li.photo .info .post-type{background-image: url(/image/main/title-gallery.png);}
.media-list li.movie .info .post-type{background-image: url(/image/main/title-movie.png);}
.media-list li.facebook .info .post-date{background-image: url(/image/common/icon-facebook3.png);}
.media-list li.photo .info .post-date{background-image: url(/image/common/icon-gallery.png);}
.media-list li.movie .info .post-date{background-image: url(/image/common/icon-gallery.png);}

.media-list li:hover,
.media-list li > a:focus{background-color: #375476;}
.media-list li:hover .picture:after,
.media-list li > a:focus .picture:after{background-image: url(/image/common/bg-section-arrow-on.png);}
.media-list li:hover .info,
.media-list li > a:focus .info{border-color: #375476;}
.media-list li.default:hover {background-color: #f7f7f7;}
.media-list li.default:hover .picture:after {background: none;}

.media-list li > a:hover .post-date,
.media-list li > a:focus .post-date{color: #abb3c0;}

.media-list li.facebook > a:hover .info .post-type,
.media-list li.facebook > a:focus .info .post-type{background-image: url(/image/main/title-facebook-on.png);}
.media-list li.photo > a:hover .info .post-type,
.media-list li.photo > a:focus .info .post-type{background-image: url(/image/main/title-gallery-on.png);}
.media-list li.movie > a:hover .info .post-type,
.media-list li.movie > a:focus .info .post-type{background-image: url(/image/main/title-movie-on.png);}
.media-list li.facebook > a:hover .info .post-date,
.media-list li.facebook > a:focus .info .post-date{background-image: url(/image/common/icon-facebook3-on.png);}
.media-list li.photo > a:hover .info .post-date,
.media-list li.photo > a:focus .info .post-date{background-image: url(/image/common/icon-gallery-on.png);}
.media-list li.movie > a:hover .info .post-date,
.media-list li.movie > a:focus .info .post-date{background-image: url(/image/common/icon-gallery-on.png);}

.media-list li > a:hover .post-head,
.media-list li > a:focus .post-head,
.media-list li > a:hover .post-body,
.media-list li > a:focus .post-body{color: #fff;}

@media screen and (min-width:768px) and (max-width:1168px) {
	.media-list li.movie > a:after,
	.media-list li.vod > a:after{top: 15%;}
}
@media screen and (min-width:768px) and (max-width:1023px) {
	.media-list li{width: 32%;margin-right: 2%;}
	.media-list li:nth-child(4n){margin-right: 2%;}
	.media-list li:nth-child(3n){margin-right: 0;}
}
@media screen and (max-width:1024px) {
	.media-list li.movie > a:after,
	.media-list li.vod > a:after{width: 66px;height: 66px;top: 18%;margin-left: -33px;-webkit-background-size: cover;	background-size: cover;}
}
@media screen and (max-width:767px) {	
	.content-wrap{margin: 25px 18px 0 18px;padding: 0;}
	.media .content-top{padding-top: 0;margin-bottom: 15px;border-bottom-width: 2px;}	
	.media .content-top h6{font-size: 14px; padding-bottom: 16px;margin-bottom: -2px; border-bottom-width: 2px;}
	.media-list li{width: 49.5%;}
	.media-list li:nth-child(odd){margin-right: 1% !important;}
	.media-list li:nth-child(even){margin-right: 0 !important;}
	.media-list li.movie > a:after,
	.media-list li.vod > a:after{width: 50px;height: 50px;top: 24%;margin-left: -25px;}

	.media .content-top .select-wrap{padding-top: 5px;}
	.media .content-top .select-wrap select{font-size: 10px;height: 22px;line-height: 1;;width: 90px;padding: 0px;}
	.media-list li .picture:before{height: 80px;}
	.media-list li .picture:after{width: 11px;height: 6px;-webkit-background-size: 100%;background-size: 100%;}
	.media-list li .info{height: 220px;padding: 10% 6%;border: 0;}
	.media-list li .info .post-type{height: 12px;margin-bottom: 1em;-webkit-background-size: auto 10px;background-size: auto 10px;}
	.media-list li .info .post-head{font-size: 11px;}
	.media-list li .info .post-body{font-size: 10px;letter-spacing: -0.12px;line-height: 1.3;}
	.media-list li .info .post-date{font-size: 10px;left: 5%;bottom: 8%;padding-left: 22px;height: 18px;line-height: 18px;-webkit-background-size: auto 18px;background-size: auto 18px;}	
}
@media screen and (max-width:480px) {
	.media-list li.movie > a:after{top: 21%;width: 40px;height: 40px;margin-left: -20px;}
	.media-list li .info{height: 180px;padding: 8% 5%;}

	.media-list .default {background-size: 60%;}
	.media-list .no-image .picture{background-size: 50%;}
}