@charset "utf-8";

.btn:hover {background: #00ccff}

.videoInner {margin-top: 80px; margin-bottom: 100px;}
.video ul {}
.video li {width: 32%; margin-bottom: 17px; cursor: pointer}
.video .videoInner ul li:nth-child(3n+2) {margin: 0 13px;}  
.video li .thumnail {width: 100%; height: 156px;}
.video li .videoInfo {    background: #fff;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 20px;}
.video li .videoInfo img {margin-right: 7px;}
.video li .videoInfo h6 {text-overflow:ellipsis;
  white-space:nowrap;
  word-wrap:normal;
  width:219px;
  overflow:hidden;}
.video li .videoInfo p {text-align: right; margin-top: 10px;
    font-size: 0.8em;
    color: #999;}

/*글보기*/
.videoView {background: #fff;}
.videoViewInner {width: 700px; margin: 0 auto; margin-top: 60px;}
.videoView .title {width: 87%; margin-bottom: 30px;}
.videoView  .date {    font-size: 0.8em;
    color: #838383;
    line-height: 2.5em;}
.videoView  .date img {margin-right: 3px;}
.videoView .content {width: 100%; float: left;text-align: center; margin-bottom: 120px;}
.videoView iframe {width: 700px; height: 400px;}
.videoView .btnList {border-top: 1px dotted #999; padding: 10px 80px 50px 20px;}

/*글쓰기+수정하기*/
.form-horizontal .form-group {margin-left: 0; margin-right: 0;}
.videoEdit .btnList {text-align: center;}
.videoEdit .btnList .btn {border: none;}

/*모바일*/
@media (max-width: 1024px) { 
    .video {margin-top: 59px;}

}


/*모바일*/
@media (max-width: 800px) { 
    .videoInner {margin-top: 50px}
    .video li .thumnail {height: 124px;}
    .video li .videoInfo h6 {width: 100%;} 

    .writeBtn {padding: 10px 30px; border-radius: 10px;}
    
    
    /*글보기*/
    .videoViewInner {width: 100%; margin-top: 20px; padding: 20px;}
    .videoView .content {margin-bottom: 50px;}
    .videoView iframe {width: 100%; height: 320px;}
    .videoView .btnList {padding: 0; text-align: center; width: 100%; float: left}
    

}

/*모바일*/
@media (max-width: 420px) { 
    
    .video li {width: 100%; margin-bottom: 17px; cursor: pointer}
    .video li .thumnail {height: 163px;}
    .video .videoInner ul li:nth-child(3n+2) {margin: 0 0 17px 0;}  
    
    /*글보기*/
    .videoView .title {margin-bottom: 0; width: 100%;}
    .videoView  .date {margin-bottom: 10px;}
    .videoView iframe {height: 200px;}

}