@charset "utf-8";
/* CSS Document */

  /* ──────────────────────────────────────
│                                                                                                                   │
│ * File Name: video_l.css                                                                                  │
│ * Description: video_l.php를 사용하는 페이지 style 지정                                       │
│ * Update: 2020-12-29                                                                                    │
│                                                                                                                   │
  ────────────────────────────────────── */

/* float 초기화 */
.video-search:after, .video-list:after, #pagination ul:after{ content:''; display:block; clear:both; height:0; visibility:hidden; }

/* 공통 setup */
select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; }
select::-ms-expand{ display:none; }
.noPost{ float:none; width:100%; text-align:center; border-top:2px solid #333; border-bottom:1px solid #ddd; padding:18px 0; }

/* 01 */
.video-style01 #search-wrap{ text-align:right; margin-bottom:30px; }
.video-style01 #search-wrap .video-search{ display:inline-block; }
.video-style01 #search-wrap .video-search div select:focus, .video-style01 #search-wrap .video-search p input:focus, .video-style01 #search-wrap .video-search button:focus{ outline:none; }
.video-style01 #search-wrap .video-search div, .video-style01 #search-wrap .video-search p, .video-style01 #search-wrap .video-search button{ float:left; }
.video-style01 #search-wrap .video-search div{ width:120px; height:40px; }
.video-style01 #search-wrap .video-search div select{ width:100%; height:100%; background:url('../images/select_icon.gif') no-repeat right 10px center; background-size:13px; border:1px solid #c1c1c1; border-radius:3px; padding:0 10px; box-shadow:none; }
.video-style01 #search-wrap .video-search div select:focus, .video-style01 #search-wrap .video-search input:focus{ border:1px solid #555; outline:none; }
.video-style01 #search-wrap .video-search p{ width:300px; height:40px; margin:0 5px; }
.video-style01 #search-wrap .video-search p input{ width:100%; height:100%; border:1px solid #c1c1c1; border-radius:3px; padding:0 10px; box-shadow:none; }
.video-style01 #search-wrap .video-search button{ width:40px; height:40px; color:#fff; background:#555; border-radius:3px; }
.video-style01 .video-list .video-box{ float:left; width:32%; border:1px solid #ddd; margin-top:50px; position:relative; }
.video-style01 .video-list .video-box:nth-child(1), .video-style01 .video-list .video-box:nth-child(2), .video-style01 .video-list .video-box:nth-child(3){ margin-top:0; }
.video-style01 .video-list .video-box:nth-child(3n+2){ margin-left:2%; margin-right:2%; }
.video-style01 .video-list .video-box .img-area{ height:20vw; max-height:320px; border-bottom:1px solid #ddd; position:relative; overflow:hidden; }
.video-style01 .video-list .video-box .img-area img{ max-width:100%; min-height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:.5s; }
.video-style01 .video-list .video-box:hover .img-area img{ transform:translate(-50%,-50%) scale(1.1); transition:.5s; }
.video-style01 .video-list .video-box .txt-area{ padding:25px 20px; }
.video-style01 .video-list .video-box .txt-area{ font-size:20px; font-weight:400; }
.video-style01 .video-list .video-box .txt-area p{ color:#f90; font-size:14px; margin-bottom:10px; }
.video-style01 .video-list .video-box .txt-area h5{ height:56px; line-height:28px; text-overflow:ellipsis; overflow:hidden; }
.video-style01 .video-list .video-box .txt-area .arrow{ display:inline-block; width:44px; height:10px; margin-top:20px; position:relative; }
.video-style01 .video-list .video-box .txt-area .arrow:before{ content:''; width:43px; height:2px; background:#2f2f2f; position:absolute; top:4px; left:0; }
.video-style01 .video-list .video-box .txt-area .arrow:after{ content:''; height:0; border-top:5px solid transparent; border-left:5px solid #2f2f2f; border-bottom:5px solid transparent; position:absolute; right:0; }
.video-style01 .video-list .video-box input{ position:absolute; top:5px; left:5px; z-index:1; }
.video-style01 #pagination{ text-align:center; margin:30px auto 0; }
.video-style01 #pagination ul{ display:inline-block; }
.video-style01 #pagination ul li{ display:inline; float:left; width:40px; height:40px; line-height:40px; border:1px solid #ddd; margin-left:-1px; }
.video-style01 #pagination ul li:first-child{ background:url('../images/icon01.gif') no-repeat center center; margin:0; }
.video-style01 #pagination ul li:nth-child(2){ background:url('../images/icon02.gif') no-repeat center center; }
.video-style01 #pagination ul li:nth-last-child(2){ background:url('../images/icon03.gif') no-repeat center center; }
.video-style01 #pagination ul li:last-child{ background:url('../images/icon04.gif') no-repeat center center; }
.video-style01 #pagination ul li > a{ display:block; width:100%; height:100%; position:relative; text-decoration:none; }
.video-style01 #pagination ul li > a > span{ display:block; width:100%; height:100%; color:transparent; }
.video-style01 #pagination ul li.active{ border:none; }
.video-style01 #pagination ul li.active > a{ color:#fff; font-weight:400; background:#555; position:relative; }
@media screen and (max-width: 978px){
	.video-style01 .video-list .video-box{ width:48%; }
	.video-style01 .video-list .video-box:nth-child(odd){ margin-left:0; margin-right:2%; }
	.video-style01 .video-list .video-box:nth-child(even){ margin-left:2%; margin-right:0; }
	.video-style01 .video-list .video-box:nth-child(3){ margin-top:50px; }
	.video-style01 .video-list .video-box .img-area{ height:30vw; }
}
@media screen and (max-width: 640px){
	.video-style01 #search-wrap .video-search{ display:block; }
	.video-style01 #search-wrap .video-search div{ width:100%; margin-bottom:5px; }
	.video-style01 #search-wrap .video-search p{ width:calc(100% - 45px); margin-left:0; }
	.video-style01 .video-list .video-box{ width:100%; margin-left:0 !important; margin-right:0 !important; }
	.video-style01 .video-list .video-box:nth-child(2){ margin-top:50px; }
	.video-style01 .video-list .video-box .img-area{ height:60vw; }
	.video-style01 .video-list .video-box .txt-area{ font-size:18px; }
}