

/* 컨텐츠 부분 */
@font-face {
  font-family: 'S-CoreDream-6Bold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-family: 'S-CoreDream-3Light';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
}
            

.common_wrap {
  width: 1200px;
  margin: 0 auto;
}

.toggle_wrap {
  text-align: right;
  margin-top: 20px;
  padding-right: 20px;
}
.toggle {
  width: 160px;
  height: 30px;
  display: inline-flex;
  border: 2px solid #082953;
  /* border-radius: 5px; */
}
.toggle li{
  width: 50%;
  text-align: center;
  line-height: 25px;
  
}
.toggle li>a{
  display: inline-block;
  width: 100%;
  height: 100%;
}
/* .toggle li:active{
  background-color:#268e6c;
  color: #fff;
} */
.active{
  background-color:#082953;
  color: #fff;
}


.grid {
  margin: 0 auto;
  padding-bottom: 80px;
}

.grid-item {
  width: 270px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin: 0 ;
  border-radius: 5px;
  margin-bottom: 40px;
  float: left;
}
.box_wrap:hover{
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
  transition: all 0.5s;
  cursor: pointer;
}
.box_wrap:hover h3{
  text-decoration:underline;
  text-underline-position: under;
  color:#268e6c;
  transition: all 0.3s;
  
}

/* .box_wrap:hover img{ 
  -webkit-filter: brightness(30%); 
  filter:  brightness(30%);
  transition: all 0.5s;

} */

.box_wrap img{
  width: 100%;
  height: auto;
  border-radius: 5px;
}
.img_wrap {
  position: relative;
}
.box_wrap:hover .overlay {
  visibility: visible;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  z-index: 1;
  transition: all 0.5s;
  border-radius: 0;
  
}
.overlay{
  visibility: hidden;
  position: relative;
}
.overlay a{
  display: inline-block;
  width: 100%;
  height: 100%;
  position: absolute;
}
.overlay i{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 50px;
  z-index: 2;
  color: #fff;
  
  
}
.overlay i:hover{
  color:#268e6c;
}
.text_box {
  padding: 0 5%;
}
.property{
  display: flex;
  margin-top: 10px;
}
.property li{
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  padding: 0 5px;
  border-radius: 0.2em;
  margin-right: 5px;
}
.push {
  background-color: #52bd9e;
}
.best {
  background-color: #cc3e4f;
}
.new {
  background-color: #FFBC42;
}

.text_box h3{
  font-size: 18px;
  margin-top: 20px;
  font-family: 'S-CoreDream-6Bold';
  line-height: 25px;
  color: #555;
  

}
.content_text{
  margin-top: 20px;
  margin-bottom: 20px;
    color: #888;
    line-height: 20px;
    font-family: 'S-CoreDream-3Light';
    font-size: 14px;
    
}

.book_title {
}

.line{
  width: 100%;
  position: absolute;
  top: -100px;
  padding: 10px 0;
  border-top: solid 1px rgba(0, 0, 0, 0.1);
}

/* ---- grid ---- */


/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}


.bottom_box{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.price{
    color: #333;
    line-height: 20px;
    font-family: 'S-CoreDream-3Light';
    font-size: 12px;
}
.bottom_box i{
  font-size: 26px;
  color: #888;
}

.bottom_btn_wrap{
}
i.xi-heart{
  color: #cc3e4f;
}
i.xi-bookmark{
  color: #268e6c;
}

/* 컨텐츠 미디어 쿼리 */


/* 화면 너비 0~1220px */

@media (max-width: 1210px) {
  .common_wrap {
    width: 100%;
  }
  
}

/* 화면 너비 0~1024px */

@media (max-width: 1080px) {
  
}

/* 화면 너비 0~960px */

@media (max-width: 960px) {
  
}


/* 화면 너비 0~768px */

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

/* 화면 너비 0~600px */

@media (max-width: 600px) {
 
  
}

/* 화면 너비 0~480px 모바일*/

@media (max-width: 480px) {}