@import url("https://fonts.googleapis.com/css?family=Titillium+Web:400,700&display=swap");
 *, *::before, *::after {
	 box-sizing: border-box;
}
 body {
	 margin: 0;
	 padding: 0;
	 font-family: "Titillium Web", sans-serif;
	
}
 .carousel {
	 min-height: 100vh;
	 position: relative;
}
 .progress-bar {
	 position: absolute;
	 top: 0;
	 left: 0;
	 height: 5px;
	 width: 100%;
}
 .progress-bar__fill {
	 width: 0;
	 height: inherit;
	 background: #ffbb00;
	 transition: all 0.16s;
}
 .progress-bar--primary {
	 z-index: 2;
}
 .main-post-wrapper {
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 border-radius: 20px;
}
 .slides {
	 width: 100%;
	 height: 100%;
	 position: relative;
	 overflow: hidden;
}
 .main-post {
	 position: absolute;
	 top: 100%;
	 right: 0;
	 left: 0;
	 bottom: 0;
	 width: 100%;
	 height: 100%;
}
 .main-post__image {
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 bottom: 0;
	 border-radius: 20px;
}
 .main-post__image img {
	 width: 100%;
	 height: 100%;
	 display: block;
	 object-fit: cover;
}

/*888슬라이드를 덮는 화면농도*********************************/
 .main-post__image::before {
	 content: "";
	 display: block;
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 background: rgba(14, 13, 14, 0.3);
}


 .main-post__content {
	 position: absolute;
	 top: 40%;
	 left: 4%;
	 transform: translateY(-40%);
	 color: #fff;
	 width: 90%;
}
 .main-post__tag-wrapper {
	 margin: 0;
	 display: inline-flex;
	 overflow: hidden;
}
 .main-post__tag {
	 font-size: 0.95em;
	 background: #c20000;
	 line-height: 1.3rem;
	 padding: 6px 18px;
}
 .main-post__title {
	 font-weight: 700;
	 font-size: 1.95em;
	 line-height: 1.25;
	 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.main-post__title2 {
	font-weight: 400;
	font-size: 1.3em;
	line-height: 1.5;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

 .main-post__link {
	 text-decoration: none;
	 color: #fff;
	 text-transform: uppercase;
	 letter-spacing: 1.5px;
	 display: inline-flex;
	 align-items: center;
}
 .main-post__link-text {
	 font-size: 0.9em;
}
 .main-post__link-icon--arrow {
	 margin-left: 12px;
}
 .main-post__link-icon--play-btn {
	 margin-right: 12px;
}
 .main-post__link:hover .main-post__link-text, .main-post__link:hover .main-post__link-icon--arrow path {
	 color: #c20000;
	 stroke: #c20000;
}
 .main-post--active {
	 top: 0;
	 z-index: 1;
	 transition: top 0.9s 0.4s ease-out;
}
 .main-post--not-active {
	 top: 100%;
	 z-index: 0;
	 transition: top 0.75s 2s;
}
 .main-post.main-post--active .main-post__tag-wrapper {
	 width: 25%;
	 transition: all 0.98s 1.9s;
}
 .main-post.main-post--not-active .main-post__tag-wrapper {
	 width: 0;
	 transition: width 0.3s 0.2s;
}
 .main-post.main-post--active .main-post__title {
	 opacity: 1;
	 transform: translateY(0);
	 transition: opacity 0.8s 1.42s, transform 0.5s 1.4s;
}
 .main-post.main-post--not-active .main-post__title {
	 transform: translateY(40px);
	 opacity: 0;
	 transition: transform 0.2s 0.35s, opacity 0.5s 0.2s;
}
 .main-post.main-post--active .main-post__link {
	 opacity: 1;
	 transition: opacity 0.9s 2.2s;
}
 .main-post.main-post--not-active .main-post__link {
	 opacity: 0;
	 transition: opacity 0.5s 0.2s;
}
 .posts-wrapper {
	 display: grid;
	 grid-template-columns: repeat(3, 1fr);
	 column-gap: 14px;
	 position: absolute;
	 bottom: 0;
	 max-width: 95%;
	 margin: auto;
	 left: 50%;
	 transform: translateX(-50%);
	 width: 100%;
	 z-index: 1;
}
 .post {
	 background: rgba(14, 13, 14, 0.6);
	 opacity: 0.3;
	 color: #fff;
	 position: relative;
	 padding: 16px 20px;
	 transition: opacity 0.2s linear;
}
 .post__header {
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 font-size: 0.8em;
}
 .post__tag {
	 color: #80837e;
}
 .post__title {
	 font-weight: 400;
	 font-size: 0.95em;
	 line-height: 1.5;
}
 .post--active {
	 opacity: 1;
	 background: rgba(14, 13, 14, 0.75);
	 pointer-events: none;
}
 .post--disabled {
	 pointer-events: none;
}
 .post:hover {
	 cursor: pointer;
	 opacity: 1;
}
 .hide-on-mobile {
	 display: none;
}

/********************* 상단 반응형세팅 **********************************/
 @media screen and (min-width: 768px) {
	 .main-post__title {
		 font-size: 2.9em;
	}
}

@media screen and (max-width: 768px) {
   .main-post__title2 {
	   font-size: 0.9em;
  }
   
}
 @media screen and (min-width: 1024px) {
	 .hide-on-mobile {
		 display: grid;
	}
	 .hide-on-desktop {
		 display: none;
	}
}
 @media screen and (min-width: 1440px) {
	 .main-post__content {
		 width: 45%;
	}
	 .posts-wrapper {
		 left: 80%;
		 transform: translatex(-80%);
		 max-width: 70%;
	}
}
/********************* 상단 반응형세팅 끝**********************************/