@charset "utf-8";
/* CSS Document */
.banner-wrapper{ height:350px; background:url(../images/banner/blog-banner.jpg) no-repeat center #fae6b3; background-size: cover;
	display: flex; align-items: center; justify-content: center;}

.banner-wrapper img{ height:150px;}

/* --------blog-------- */
h1{position: relative; z-index: 2;}
.filter-wrapper{margin-top:50px;}


.post-box{box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; margin:0px auto 50px;  border-radius: 15px; padding:8%; transition: all 0.6s;
	border: 1px solid #f7f6f6;}

.box-img{margin-top: 30px; overflow: hidden; height:280px;}

.post-box .title-wrapper{ display: flex; flex-direction: row; margin-top: 50px;
    grid-column-gap: 20px; grid-row-gap: 20px;justify-content: space-between; align-self: stretch;
 align-items: center;}

.box-img img{object-fit: cover;  transition-duration: 4s; display:block; 
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.link{border: 1px solid #c8c8c8;
    border-radius: 40px;
    display: flex;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 69px;
    height: 91px;
	transition: all 0.6s;
}

.link img{ width:15px; transition: all 0.6s;}

.post-date{letter-spacing: 1.4px;
    text-transform: uppercase;
	color: var(--red);
    border-bottom: .6px solid #bdbcbc4d;
    padding-bottom: 10px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 600;
	transform: translateY(0px);
	transition: all 0.6s;
	display: flex;
	justify-content: space-between;
	align-items: center;

}

.post-date img{width:16px; cursor: pointer;}
.post-date a{color: var(--red);}
 .title, .bog-content h2{font-size:28px; font-weight: 600; line-height: 1.2; color:#000000;  transform: translateY(0px);
	transition: all 0.5s; }

.post-box:hover{border: 1px solid hsl(0, 0%, 78%);  box-shadow: 0 10px 30px 0 rgba(0,0,0,.3);}
.post-box:hover .post-date{transform: translateY(5px); border-color: #c8c8c8;}
.post-box:hover	.title {  transform: translateY(-5px);}
.post-box:hover .box-img img {
	transform: scale(1.07);
	-webkit-transform: scale(1.07);
	-moz-transform: scale(1.07);
	z-index: 0;
  }

.post-box:hover .link{border-color:#da8105;}
.post-box:hover .link img{ animation: bounce 0.75s alternate infinite;
	filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(70%) hue-rotate(124deg) brightness(102%) contrast(100%);
}

@keyframes bounce {
	0%, 100% {
	  transform: translateX(0px);
	}
	40% {
	  transform: translateX(6px);
	}
	60% {
	  transform: translateX(0px);
	}
  }

/* ------------------detail page------------------ */
.bog-content{width: 80%; margin: 0 auto;}
.bog-content h2{margin:20px 0;}
.bog-content img{margin:20px auto; border-radius:5px; display: block; /*border:4px solid #da8105; padding:9px;*/}
.share img{width: 15px !important; margin: 0 !important;}


.bog-content iframe {width:50vw;  height: 28.125vw; /*16:9*/ margin:20px auto; display: block;}





  /*------------------------------------responsive------------------------------------------- */

  @media only screen and (min-width:768px) {.categories .swiper-wrapper {justify-content: center;}}
  @media only screen and (max-width:1400px){.filter-wrapper{margin-top: 0;}}

  @media only screen and (max-width:1200px){
	.bog-content iframe {  width:100%; height:39vw; /*16:9*/}
	.bog-content{width: 100%;}
  }


@media only screen and (max-width:768px) {
    h1{font-size: 30px; line-height: 36px;}
	.title, .bog-content h2 {font-size:21px; line-height: 1;}
	.link{width:40px; height: 53px;}
	.post-box .title-wrapper{margin-top: 30px;}
	.bog-content img { margin: 20px auto; display: block; }
	
}

@media only screen and (max-width:720px){.bog-content iframe { height:48vw;}}
@media only screen and (max-width:575px){.bog-content iframe { height:51vw;}}

@media only screen and (max-width:480px) {.bog-content img{ width: 95%;}
}