.borad-tit{background: linear-gradient(239deg, #363686, #1c9ad6 40%  ); border-radius: 10px; padding: 18px 0 !important; margin-bottom: 2px; margin-top: -10px;}
.borad-tit *{color: #fff; text-align: center; font-size: 16px;}

.borad-con{border-bottom: 1px solid #dcdcdc; padding: 5px 0px; box-sizing: border-box; cursor: pointer;}
.borad-con > div{display: inline-block;     vertical-align: middle;}
.borad-con > div:nth-child(1){width: 10%; text-align: center;font-family: TitilliumWeb; color: #c8c8c8;  font-weight: bold; font-size: 20px;}
.borad-con > div:nth-child(2){width: 8%; text-align: center;}
.borad-con > div:nth-child(3){width: 70%; text-align: left; padding-left: 50px; box-sizing: border-box;}
.borad-con > div:nth-child(4){width: 10%; text-align: center;}

.borad-conn{border-bottom: 1px solid #dcdcdc; padding: 30px 0px; box-sizing: border-box; cursor: pointer;}
.borad-conn > div{display: inline-block;     vertical-align: middle;}
.borad-conn > div:nth-child(1){width: 10%; text-align: center;font-family: TitilliumWeb; color: #c8c8c8;  font-weight: bold; font-size: 20px;}
.borad-conn > div:nth-child(2){width: 8%; text-align: center;}
.borad-conn > div:nth-child(3){width: 70%; text-align: left; padding-left: 50px; box-sizing: border-box;}
.borad-conn > div:nth-child(4){width: 10%; text-align: center;}


.borad-tit > div:nth-child(3){text-align: center;}

.borad-tit > div:nth-child(1){color: #fff; text-align: center; font-size: 16px;}
.borad-con .date strong{font-size: 28px; font-weight: bold;letter-spacing: -1.6px; color: #c8c8c8;}
.borad-con .date p{font-size: 14px; color: #c8c8c8;}

.borad-con .info strong{font-size: 20px; color: #343434; font-weight: 600; display: block; padding-bottom: 10px;}
.borad-con .info p{color: #646464; font-size: 16px;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1;  -webkit-box-orient: vertical;    overflow: hidden;}
.borad-con .file p{padding-top: 5px; color: #999; font-weight: 600;}

.pagination{text-align: center; padding-top: 60px;}
.pagination li{ font-family: TitilliumWeb; font-size: 17px;  font-weight: 600; display: inline-block; margin: 0 30px; padding-bottom: 10px; position: relative; cursor: pointer;}
.pagination li.on::after{content: ''; display: block; width: 20px; height: 2px; position: absolute; background:  #1c9ad6; top: 100%; left: 50%;  transform: translateX(-50%);}

.search-box{text-align: center;margin: 10px auto 0; }
.search-box > span{margin-right: 20px; font-size: 16px; font-weight: 600;}
.search-box form{width: 450px;  background: #f6f6f6;  position: relative; display: inline-block;}
.search-box input{width: 100%; display: block; height: 60px; background: #f6f6f6; padding-left: 20px; box-sizing: border-box;}
.search-box input::placeholder{color: #787878;}
.search-box img{position: absolute; top: 50%; right: 5%; transform: translate(0px, -50%)}


/* 게시글작성 */

.board-section > ul{border-top: 1px solid #323232; margin-top: 30px;}
.board-section > ul > li{line-height: 90px; border-bottom: 1px solid #dcdcdc;}
.board-section > ul > li p{width: 110px;}
.board-section > ul > li .input_area{width: calc(99.999% - 110px); color: #b2b2b2;}
.board-section > ul > li .input_area *{vertical-align: middle;}
.board-section > ul > li .input_area input{width:74%; height:50px; border: 1px solid #dcdcdc; padding-left: 20px;}
.board-section > ul > li .input_area span{display: inline-block; line-height:48px; padding: 0 50px; border:1px solid #181818; box-sizing: border-box; margin: 0 10px; color: #646464;}
.board-section > ul > li .input_area input#upload{display: none;}
.board-section > ul > li .input_area .file_uplaod li.hide{display: none;}
.board-section  .textflied{width: 100%; height: 355px; border: 1px solid #dcdcdc; margin-top: 20px;}




@media screen and (max-width:1200px){
.board-section > ul > li .input_area input { width: 300px;}

}
@media screen and (max-width:768px){

.borad-con > div:nth-child(1) { width: 8%; ;}
.borad-con > div:nth-child(2) { width: 10%; ;}
.borad-con > div:nth-child(3) { width: 70%; padding-left: 40px; float: none;}
.borad-con > div:nth-child(4) { width: 15%; }    
.borad-con .date strong {font-size: 28px;}
.borad-con .date p { font-size: 16px;}
.borad-con .info strong { font-size: 18px; padding-bottom: 5px;}
.borad-con .info p{font-size: 14px;}
.borad-con .file p{font-size: 14px;}
.borad-con .file img{height: 35px;}

.borad-conn > div:nth-child(1) { width: 8%; ;}
.borad-conn > div:nth-child(2) { width: 10%; ;}
.borad-conn > div:nth-child(3) { width: 70%; padding-left: 40px; float: none;}
.borad-conn > div:nth-child(4) { width: 15%; }    
.borad-conn .date strong {font-size: 28px;}
.borad-conn .date p { font-size: 16px;}
.borad-conn .info strong { font-size: 18px; padding-bottom: 5px;}
.borad-conn .info p{font-size: 14px;}
.borad-conn .file p{font-size: 14px;}
.borad-conn .file img{height: 35px;}
.pagination li{margin: 0 20px;}
.search-box{width:100%;}

}

@media screen and (max-width:600px){

.borad-con{    padding: 20px 0px;}
.borad-con > div:nth-child(1),
.borad-con > div:nth-child(2){width:40px;}
.borad-con > div:nth-child(4){width: auto;}
.borad-con > div:nth-child(3) { width: 60%;  padding-left: 7px; }

.borad-con .info strong{font-size: 16px; text-overflow: ellipsis;  display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical;  overflow: hidden;padding: 0;    margin-bottom: 3px; }
.borad-con .info p { font-size: 12px;  }

.borad-con .date strong {font-size: 18px; }
.borad-con .date p {font-size: 14px; }
.borad-con .file img {height: 25px;}
.borad-con .file p { padding: 0; font-size: 12px; }
.search-box{width: 90%;}

.board-section > ul{    margin-top: 15px;}
.board-section > ul > li { line-height: 60px;}
.board-section > ul > li p {width: 80px; font-size: 13px; padding-left: 5px; box-sizing: border-box; }
.board-section > ul > li .input_area { width: calc(99.999% - 80px);  font-size: 13px;  }
.board-section > ul > li .input_area input { height: 35px;     padding-left: 10px; width: 180px;}
.board-section > ul > li .input_area span{line-height: 35px; padding: 0 25px;margin: 0 10px 0 0;}

.board-section > ul > li .input_area span ~ img{height: 35px;}

.pagination{    padding-top: 30px;}
.pagination li{font-size: 14px;}
.search-box { margin: 30px auto 0;}
.search-box input{height: 40px;}
.borad-tit{font-size: 12px; padding: 12px 0 !important; margin-bottom: 10px; }
.borad-tit div:nth-child(2) {text-align: center}

}

@media screen and (max-width:425px){
    .borad-tit *,.borad-tit > div:nth-child(1){font-size: 13px;}
    .borad-con > div:nth-child(3) { width: 50%;}
    .borad-con > div:nth-child(4) { width: 70px;}
    .borad-con .date strong { font-size: 16px; }
    .borad-con .date p {  font-size: 12px;   }
    .borad-con > div:nth-child(1){font-weight: normal; font-size: 13px; vertical-align: -2px;}
    .borad-con .info strong { font-size: 14px;}

	.borad-conn > div:nth-child(3) { width: 50%;}
    .borad-conn > div:nth-child(4) { width: 70px;}
    .borad-conn .date strong { font-size: 16px; }
    .borad-conn .date p {  font-size: 12px;   }
    .borad-conn > div:nth-child(1){font-weight: normal; font-size: 13px; vertical-align: -2px;}
    .borad-conn .info strong { font-size: 14px;}
    
}

@media screen and (max-width:350px){


    .borad-con > div:nth-child(4) {
        width: 50px;
    }
}