@import url('https://fonts.googleapis.com/css2?family=Bilbo&display=swap');
#special4 {
	position: relative; background-color: #ddd; /*background:linear-gradient(#b8b8b8, 10%, #fff);*/
	background: url('./img/bg.jpg') no-repeat center / cover;
}

#special4 .wrap-special4 {
	position: absolute;  top: 55%; left: 49%; transform: translate(-50%, -50%);
	width: 1400px; height: auto; height: auto; display: flex; gap: 100px;
}

#special4 .title { position: relative; width: 300px; padding: 60px 0 }
#special4 .title > div { color:#fff }
#special4 .title .tt1 {
	font-size: 2.5rem; font-family: 'Nanum Myeongjo'; font-weight: 400; letter-spacing: -1px;
	line-height: 2.7rem; transform:translateY(100px); opacity: 0;
}
#special4 .title .tt1 b { font-weight: 500; color:yellow }
#special4 .title .tt2 { font-size: 0.9rem; font-weight: 300; margin: 50px 0; letter-spacing: -1px; color: #D8D8D8; }
#special4 .title .tt2 > div { transform: translateX(100px); opacity: 0 }
#special4 .title .tt3 { transform:translateY(-100px);  opacity: 0; }
#special4 .title .tt3 img { position: relative; width:40%; }



#special4 .wrap-swiper {
	position: relative; width: 1000px; height: 550px; padding: 50px 50px;
	opacity: 1; border: 10px solid rgba(255,255,255,0.3); text-align: center; color: #fff;
	box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.2);
}
#special4 .wrap-swiper .t1 { font-size: 1.5rem; font-weight: 300; color:#ADDEF8;  font-family: "Bilbo", cursive;}
#special4 .wrap-swiper .t2 { font-size: 1.5rem; font-weight: 400; }
#special4 .wrap-swiper .t3 {
	position: relative; margin: 20px auto; border-top-left-radius: 20px; border-bottom-right-radius: 20px; overflow: hidden;
	width: 340px; height: 230px;
}
#special4 .wrap-swiper .t4 { font-size: 1rem; font-weight: 300; letter-spacing: -0.5px;  }
#special4 .wrap-swiper { opacity: 0; transform:translateX(-100px); }



/* 네비게이션 변경하기 */
#special4 .wrap-btns {
	position: absolute; display: block; width: 200px; right: 2%; bottom: -35px; /*transform: translateX(-50%);*/
}
#special4 .swiper-button-prev:after, #special4 .swiper-button-next:after { content: ''; color:#fff; }
#special4 .swiper-button-prev, #special4 .swiper-button-next {
}


/* 페이지네이션 변경하기 */
#special4 .swiper-pagination-bullet {
	width:12px; height:12px; border-radius: 10px; 
	transition: all .3s ease; background-color: #fff;
}
#special4 .swiper-pagination-bullet-active { width:50px; background-color: #ADDEF8 }
#special4 .swiper-pagination {
	--swiper-pagination-bullet-inactive-color:  #111;/* 색 */
	--swiper-pagination-bullet-inactive-opacity: .2;/* 투명도 */
	--swiper-pagination-bottom:-50px;/*하단 위치 높이 변경*/
	--swiper-pagination-bullet-horizontal-gap: 5px;/*불렛간 간격 조정 - 가로*/
	--swiper-pagination-bullet-vertical-gap: 10px;/*불렛간 간격 조정 - 세로*/
	text-align: left !important;
}

#special4 .play-paused {
	position: relative; display: inline-block; font-size:1.4rem; padding: 0 !important; top:2px; left: 25px;
	border: 0px solid red;
}

#special4.active .title .tt1 { opacity: 1; transform:translateY(0px); transition: all 1s ease .4s;  }
#special4.active .title .tt2 > div:nth-child(1) { opacity: 1; transform:translateX(0px); transition: all 1.5s ease .7s;  }
#special4.active .title .tt2 > div:nth-child(2) { opacity: 1; transform:translateX(0px); transition: all 1.5s ease .9s;  }
#special4.active .title .tt2 > div:nth-child(3) { opacity: 1; transform:translateX(0px); transition: all 1.5s ease 1.1s;  }
#special4.active .title .tt3 { opacity: 1; transform:translateX(0); transition: all 1s ease 0.4s;  }
#special4.active .wrap-swiper { opacity: 1; transform:translateX(0px);  transition: all 1.5s ease 0.7s; }



.special4 .swiper-slide { letter-spacing: -1px; opacity:0.7;  }
.special4 .swiper-slide .t1 {   }
.special4 .swiper-slide img { filter: brightness(0.3); }

.special4 .swiper-slide.swiper-slide-active { opacity:1; transform: scale(1);  }
.special4 .swiper-slide.swiper-slide-active img { filter: brightness(1); transition: all 1s 0s ease; }

.special4 .swiper-slide.swiper-slide-active .t1 { opacity: 1; transition: all 1s 0s ease;  transform:scale(1); }
.special4 .swiper-slide.swiper-slide-active .t2 { opacity: 1; transform:translateY(0px); transition: all 1s 0s ease;  }
.special4 .swiper-slide.swiper-slide-active .t3 { opacity: 1; transform:translateX(0px); transition: all 1s 0.2s ease; }
.special4 .swiper-slide.swiper-slide-active .t4 { opacity: 1; transform:translateX(0px); transition: all 1s 0.4s ease; }


/*#special4.active .wrap-swiper { opacity: 1; transform: translateX(-50%); transition: all 1s ease .5s; }*/



@media (max-height: 800px) {
}
@media (max-height: 700px) {
}