@charset "utf-8";
/*미디어리스트*/
.media-boxes-filter {display:flex; justify-content:center; margin-bottom:2em}
.media-boxes-filter li {margin:0 0.111em}
.media-boxes-filter li>a{position:relative; padding:12px 43px 12px 10px;border-color:#d7d7d7; border-width:0 0 0 0;/* #666 */background:transparent; font-weight:300; font-size:1.125em; letter-spacing:-1px}
.media-boxes-filter li.on>a{position:relative; padding:12px 43px 12px 10px; border-color:#d7d7d7; border-width:0 0 0 0; background:transparent; color:#333; font-weight:700; cursor:default; letter-spacing:-1px}
.media-boxes-filter li>a:before {content:""; position:absolute; bottom:0; left:0; width:0; height:3px; background:#333;}
.media-boxes-filter li>a:hover:before {width:100%; transition: width 0.3s;}
.media-boxes-filter li.on>a:before {content:""; position:absolute; bottom:0; left:0; width:100%; height:3px; background:#333; }
.media-boxes-filter li>a:hover,.media-boxes-filter li>a:focus{border:0;transition: width 0.3s;}
.media-boxes-filter li>a:after{content:'';font-family: 'Line Awesome Free'; font-weight: 900; display:block; position:absolute;right:0;top:50%; transform: translate(-50%,-50%); width:5px;height:5px; border-radius:100%;  background:#ccc;}
.media-boxes-filter li.on>a:after,.media-boxes-filter li>a:hover:after{background:#333;}

.media-grid{margin: 0 0 -2% -2%; display: flex; flex-wrap: wrap;}
.media-box{position:relative; margin: 0 0 2% 2%; overflow:hidden}

/* thumbnail overlay background */
.thumbnail-overlay {
width:100%;
text-align:center;
position:absolute;
z-index:2;
top:55%;
transform:translateY(-50%)
}
.media-box a {display:block; width:100%; height:100%}
.media-box a:before{
content:"";
display:block;
opacity:0;  
position:absolute;
z-index:1;
width:100%;
height:100%;
left:0;
top:0;
background-color: rgba(0,0,0, .20);

-webkit-transition: background-color 0.2s ease-out;
-moz-transition: background-color 0.2s ease-out;
-o-transition: background-color 0.2s ease-out;
transition: background-color 0.2s ease-out;
}


/* hover effect on the thumbnail-overlay */
.media-box:hover .thumbnail-overlay {display:block}
.media-box a:hover:before{
	opacity:1;
	background-color: rgba(0,0,0, .40) !important;
}
.thumbnail-overlay>div {position:relative;width:100%; text-align:center; color:#fff; text-shadow:0 0 6px rgb(0 0 0 / 80%); transition: transform 0.6s ease-in-out; opacity:0}
.thumbnail-overlay>span {display:none; transition: transform 0.6s ease-in-out; opacity:1}
.thumbnail-overlay>div:nth-of-type(1) {transform:translateY(-50px)}
.thumbnail-overlay>div:nth-of-type(2) {transform:translateY(50px);font-weight:400; font-size: 0.825rem;}
.media-box:hover .thumbnail-overlay>div ,.media-box:hover .thumbnail-overlay>span {transform:translateY(0%); opacity:1}

/* hover effect on the image */
.media-box img{
-webkit-transition: transform 0.6s ease-in-out;
-moz-transition: transform 0.6s ease-in-out;
-o-transition: transform 0.6s ease-in-out;
-ms-transition: transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;

-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
}
.media-box:hover img{
-webkit-transform: scale(1.2) translate(-20px);
-moz-transform: scale(1.2) translate(-20px);
-o-transform: scale(1.2) translate(-20px);
-ms-transform: scale(1.2) translate(-20px);
transform: scale(1.2) translate(-20px);
}

.media-box-title {font-size:1.25em; font-weight:500; margin-bottom:1rem}
.media-box-play-button{
display:inline-block;
width:50px;
height:50px;
line-height:50px !important;
border-radius:100%;
background: rgba(0, 0, 0, 1) !important;
color: #fff !important;
padding-left: 3px;
font-size:24px;
}
.media-box:hover .media-box-play-button {display:none}

@media only screen and (min-width:980px){

    .postschArea>form {width:80%; margin:0 auto}
    .postschArea .datepick {width:40%}
    .postschArea .ipBox {width:60%; max-width:800px}
    .datepick {float:left; border-bottom:1px solid #bdbdbd; border-right:0}
    .datepick li {display:inline-block; width:48%; max-width:200px;}
    .viewTit>h3 {width:80%}
    .viewTit>a {width:20%;}

}

@media only screen and (min-width:768px){

    .posterList > div{ width: 48%;}
    .media-box {width:48%}
}


@media only screen and (min-width:1000px){

    .posterList > div{ width: 31.33%;}
    .media-box { width: 31.33%;}

}


@media only screen and (min-width:1200px){

    .posterList > div{ width: 23%;}
    /*.media-box { width: 23%;}*/

}

@media only screen and (min-width:1600px){

    /*.posterList > div{ width: 18%;}*/

}

.moreBtn {width:100%; text-align:center; margin:2em 0}
.moreBtn a {display:inline-block; border-bottom:1px solid #e1e1e1; padding:6px 3em;}
.moreBtn a:before {content:"\f107"; font-family: 'Line Awesome Free'; font-weight: 900; display:inline-block; font-size:12px; margin-right:0.666em; transition:.2s ease-out; -webkit-animation:balloon1 .8s ease-in-out infinite; -moz-animation:balloon1 .8s ease-in-out infinite; -o-animation:balloon1 .8s ease-in-out infinite; animation:balloon1 .8s ease-in-out infinite; }
.moreBtn a:hover {border-color:#333}