/**** pc 상단공백****/
@media only all and (min-width:1301px) {

.list{ width: 100%; float: left}
.list ul{ float: left;width: 100%;  }
.list ul li{ float: left; width: 25%;cursor:pointer;}
.list ul li .inbox{ width: 100%;  background-color: #000; position: relative; overflow: hidden }
.list ul li .inbox img{ width: 100%; opacity: 0.5;  transition: all 1s; transform: scale(1)}
.list ul li:hover .inbox img{ width: 100%; opacity:0.8; transform: scale(1.1)}
.list ul li .inbox .tx_box{ width: 100%; position: absolute; bottom: 2vw; left:3vw; transition: all 1s; }
.list ul li:hover  .inbox .tx_box{ width: 100%; position: absolute; bottom:4vw; left:3vw;  }

.list ul li .inbox .tx_box .tx1{ font-size: 0.5vw; border-top: 1px solid #eee; padding-top: 3px;  color: #fff; float: left; line-height: 20px}
.list ul li .inbox .tx_box .tx2{ width: 100%;float: left;   font-size:1.5vw; margin-bottom:10px; color: #fff}
.list ul li .inbox .tx_box .tx3{ width: 100%;float: left;   font-size:14px;  color: #fff; margin-bottom:10px; }
.list ul li .inbox .tx_box .more_bbox{ width: 100%;float: left;  opacity:0 ;  transition: all 1s;; font-size:12px; }
.list ul li .inbox .tx_box .more_bbox a{ float: left;  padding: 5px 10px; border: 1px solid rgba(255, 255, 255, 0.5); color: #fff; ; font-size:12px; }
.list ul li:hover  .inbox .tx_box .more_bbox{ width: 100%;float: left;  opacity: 1 }
.list ul li:hover  .inbox .tx_box .more_bbox a{ float: left; padding: 5px 10px; border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; background-color: rgba(0, 0, 0, 0.5); margin-left: -1px ; font-size:12px; }
.list ul li:hover  .inbox .tx_box .more_bbox a:hover{ float: left; padding: 5px 10px;border: 1px solid rgba(255, 255, 255, 1); color: #fff; ; font-size:12px; }
}	
	
/**** 테블릿 ****/
@media all and (max-width:1300px) and (min-width:768px) {

.list{ width: 100%; float: left}
.list ul{ float: left;width: 100%;  }
.list ul li{ float: left; width: 33.33%;cursor:pointer;}
.list ul li .inbox{ width: 100%;  background-color: #000; position: relative; overflow: hidden }
.list ul li .inbox img{ width: 100%; opacity: 0.3;  transition: all 1s; transform: scale(1)}
.list ul li:hover .inbox img{ width: 100%; opacity:0.5; transform: scale(1.1)}
.list ul li .inbox .tx_box{ width: 100%; position: absolute; bottom: 2vw; left:3vw; transition: all 1s; }
.list ul li:hover  .inbox .tx_box{ width: 100%; position: absolute; bottom:4vw; left:3vw;  }


.list ul li .inbox .tx_box .tx1{ font-size: 18px; border-top: 1px solid #eee; padding-top: 3px;  color: #fff; float: left; line-height: 20px}
.list ul li .inbox .tx_box .tx2{ width: 100%;float: left;   font-size:20px; margin-bottom:10px; color: #fff}
.list ul li .inbox .tx_box .tx3{ width: 100%;float: left;   font-size:14px;  color: #fff; margin-bottom:10px; }
.list ul li .inbox .tx_box .more_bbox{ width: 100%;float: left;  opacity:1 ;  transition: all 1s;}
.list ul li .inbox .tx_box .more_bbox a{ float: left; padding: 7px 10px;  border: 1px solid rgba(255, 255, 255, 0.5); color: #fff; }
.list ul li:hover  .inbox .tx_box .more_bbox{ width: 100%;float: left;  opacity: 1 }
.list ul li:hover  .inbox .tx_box .more_bbox a{ float: left;  padding: 7px 10px; border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; background-color: rgba(0, 0, 0, 0.5); margin-left: -1px }
.list ul li:hover  .inbox .tx_box .more_bbox a:hover{ float: left;  padding: 7px 10px; border: 1px solid rgba(255, 255, 255, 1); color: #fff; }
}
/**** 모바일 ****/
@media only all and (max-width:767px) {

.list{ width: 100%; float: left}
.list ul{ float: left;width: 100%;  }
.list ul li{ float: left; width: 100%; cursor:pointer;}
.list ul li .inbox{ width: 100%;  background-color: #000; position: relative; overflow: hidden }
.list ul li .inbox img{ width: 100%; opacity: 0.5;  transition: all 1s; transform: scale(1)}
.list ul li:hover .inbox img{ width: 100%; opacity:0.5; transform: scale(1.1)}
.list ul li .inbox .tx_box{ width: 100%; position: absolute; bottom: 7vw; left:6vw; transition: all 1s; }
.list ul li:hover  .inbox .tx_box{ width: 100%; position: absolute; bottom:7vw; left:6vw;  }

.list ul li .inbox .tx_box .tx1{ font-size: 2vw; border-top: 1px solid #eee; padding-top: 3px;  color: #fff; float: left; line-height: 20px}
.list ul li .inbox .tx_box .tx2{ width: 100%;float: left;   font-size:5vw; margin-bottom:10px; color: #fff}
.list ul li .inbox .tx_box .tx3{ width: 100%;float: left;   font-size:3vw;  color: #fff; margin-bottom:10px; }
.list ul li .inbox .tx_box .more_bbox{ width: 100%;float: left;  opacity:1 ;  transition: all 1s; font-size:2.5vw;}
.list ul li .inbox .tx_box .more_bbox a{ float: left; padding: 7px 10px;  border: 1px solid rgba(255, 255, 255, 0.5); color: #fff; font-size:2.5vw;}
.list ul li:hover  .inbox .tx_box .more_bbox{ width: 100%;float: left;  opacity: 1 }
.list ul li:hover  .inbox .tx_box .more_bbox a{ float: left;  font-size:3vw; padding: 7px 10px; border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; background-color: rgba(0, 0, 0, 0.5); margin-left: -1px ;font-size:2.5vw;}
.list ul li:hover  .inbox .tx_box .more_bbox a:hover{ float: left;  padding: 7px 10px; border: 1px solid rgba(255, 255, 255, 1); color: #fff;font-size:2.5vw; }
}