#main{ position: relative; overflow: hidden; } 
#main::before, #main::after{ content: ""; width: 40px; height: 40px; position: absolute; z-index: 10; border-radius: 50%; background: rgba(214, 28, 24, 0.1); box-shadow: 0 0 450px 450px rgba(214, 28, 24, 0.1); }
#main::before{ top: 0; left: 0; transform: translate(-50%, -80%); }
#main::after{ bottom: 0; right: 0; transform: translate(-50%, -80%); }

#main .visual{ overflow: hidden; }
#main .visual .bg{ height: 100vh; transform: scale(1.3); }
#main .visual01 .bg{ background: url("/img/main/visual01.jpg") no-repeat center center / cover; }
#main .visual02 .bg{ background: url("/img/main/visual02.jpg") no-repeat center center / cover; }

#main .visual.slick-active .bg{ animation: size 1.5s 0.5s forwards; }

#main .content-box{ width: 100%; color: #fff; position: absolute; top: 53%; left: 0; z-index: 20; transform: translateY(-50%); overflow: hidden; }
#main .content-box ul{ display: flex; flex-direction: column; max-width: 1550px; }
#main .content-box ul li{ display: inline-block; width: fit-content; position: relative; }
#main .content-box ul li.left{ width: 53%; text-align: center; }
#main .content-box ul li.right{ left: 100%; transform: translatex(-100%); margin-top: 15px; }
#main .content-box h2{ font-size: 9.6rem; font-weight: 700; text-transform: uppercase; filter: blur(10px); opacity: 0; animation: blur 1.5s 0.5s forwards; } 
#main .content-box p{ font-size: 2.2rem; font-weight: 400; line-height: 1.7; opacity: 0; }
#main .content-box p span{ font-weight: 600; }

#main .content-box ul li.left p{ transform: translateX(-100%); animation: translate-left 1s 1.5s forwards; }
#main .content-box ul li.right p{ transform: translateX(100%); animation: translate-right 1s 1.5s forwards; }

@keyframes size{
	0%{ transform: scale(1.3); }
	100%{ transform: scale(1); }
}

@keyframes blur{
	0%{ filter: blur(10px); opacity: 0; }
	100%{ filter: blur(0); opacity: 1; }
}

@keyframes translate-left{
	0%{ opacity: 0; transform: translateX(-100%); }
	100%{ opacity: 1; transform: translateX(0); }
}

@keyframes translate-right{
	0%{ opacity: 0; transform: translateX(100%); }
	100%{ opacity: 1; transform: translateX(0); }
}

@media screen and (max-width: 1700px){
	#main .content-box h2{ font-size: 8.5rem; }
	#main .content-box p{ font-size: 2rem; }
}

@media screen and (max-width: 1500px){
	#main::before, #main::after{ box-shadow: 0 0 300px 300px rgba(214, 28, 24, 0.1); }
	#main .content-box h2{ font-size: 7.5rem; }
}

@media screen and (max-width: 1250px){
	#main .content-box h2{ font-size: 6rem; }
	#main .content-box p{ font-size: 1.8rem; }
}

@media screen and (max-width: 800px){
	/* #main::before, #main::after{ box-shadow: 0 0 200px 200px rgba(214, 28, 24, 0.1); transform: translate(0, 0); } */
	#main .content-box ul li.left{ width: 60%; }
	#main .content-box ul li.right{ margin-top: 100px; } 
	#main .content-box h2{ font-size: 5rem; }
	#main .content-box p{ font-size: 1.7rem; }
}