@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;
}

#special4 .title { position: relative;  padding: 0px 0; }
#special4 .title > div { color:#fff; text-align:center }
#special4 .title .tt1 {
	font-size: 1.1rem; line-height: 1; font-family: 'Nanum Myeongjo'; font-weight: 400; letter-spacing: -1px;
	transform:translateY(50px); opacity: 0; margin-bottom: 10px;
}
#special4 .title .tt2 {
	font-size: 2.4rem; line-height: 1; font-weight: 500; margin: 0px 0; letter-spacing: -1px; color: #fff; opacity: 0;
	transform:translateY(50px);
}
#special4 .title .tt2 span { color: #FFFF80; font-weight: 800; font-style: italic }

#special4 .wrap-special4 .wrap-box {
	position: relative; display: flex; gap: 40px; margin-top: 50px; 
}

#special4 .wrap-special4 .wrap-box .img {
	position: relative; width:320px; height:500px; background: url() no-repeat center / cover;
	border-top-left-radius: 30px; border-bottom-right-radius: 30px; overflow: hidden;
	box-shadow: 5px 5px 20px rgba(0,0,0,0.5); opacity: 0; transform:translateX(100px);
	transition: 0.7s 0s ease;
}
#special4 .wrap-special4 .wrap-box .img:nth-child(1) {  background-image: url('./img/img1.jpg') }
#special4 .wrap-special4 .wrap-box .img:nth-child(2) {  background-image: url('./img/img2.jpg') }
#special4 .wrap-special4 .wrap-box .img:nth-child(3) {  background-image: url('./img/img3.jpg') }
#special4 .wrap-special4 .wrap-box .img:nth-child(4) {  background-image: url('./img/img4.jpg') }

#special4 .wrap-box .img ul {
	position: absolute; top: 68%; padding:0 30px; color:#fff; transition: 0.7s ease; opacity: 0;
	transform:translateY(70px);
}
#special4 .wrap-box .img ul li {  letter-spacing: -1px; word-break: keep-all; }
#special4 .wrap-box .img ul .t1 { font-size: 1rem; opacity: 0.8; }
#special4 .wrap-box .img ul .t2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -1.5px; }
#special4 .wrap-box .img ul .t2-1 { color: #B7DBFF }
#special4 .wrap-box .img ul .t2-2 { color: #F2D6F3 }
#special4 .wrap-box .img ul .t3 { font-size: 0.9rem; }



#special4.on .tt1 { transition: 0.7s 0.5s; opacity:1; transform:translateY(0); }
#special4.on .tt2 { transition: 0.7s 1.0s; opacity:1; transform:translateY(0); }

#special4.on .wrap-box .img:nth-child(1) { transition-delay:1.0s; opacity:1; transform:translateX(0); }
#special4.on .wrap-box .img:nth-child(2) { transition-delay:1.2s; opacity:1; transform:translateX(0); }
#special4.on .wrap-box .img:nth-child(3) { transition-delay:1.4s; opacity:1; transform:translateX(0); }
#special4.on .wrap-box .img:nth-child(4) { transition-delay:1.6s; opacity:1; transform:translateX(0); }

#special4.on .wrap-box .img:nth-child(1) ul { transition-delay:1.4s; opacity:1; transform:translateY(0); }
#special4.on .wrap-box .img:nth-child(2) ul { transition-delay:1.6s; opacity:1; transform:translateY(0); }
#special4.on .wrap-box .img:nth-child(3) ul { transition-delay:1.8s; opacity:1; transform:translateY(0); }
#special4.on .wrap-box .img:nth-child(4) ul { transition-delay:2.0s; opacity:1; transform:translateY(0); }

@media (max-height: 800px) {
	#special4 .title .tt1 { font-size:1rem }
	#special4 .title .tt2 { font-size:2rem }
	#special4 .wrap-special4 .wrap-box { margin-top:30px; }
	#special4 .wrap-special4 { width: 1144px; height: auto  }
	#special4 .wrap-special4 .wrap-box .img { width: 256px; height:400px; } 
	#special4 .wrap-box .img ul .t1 { font-size: 0.875rem }
	#special4 .wrap-box .img ul .t2 { font-size: 1.2rem }
	#special4 .wrap-box .img ul .t3 { font-size: 0.75rem }
}
@media (max-height: 700px) {
}


#special4 .wrap-special4 .wrap-box .img .imgcut {
	position: absolute; display: inline-block; right: 20px; bottom: 10px;
	font-size: 0.75rem; letter-spacing: -0.5px; color: rgba(255,255,255, 0.5); text-shadow: 0 0 5px rgba(0,0,0,0.5);
}