@charset "utf-8";

@font-face {
    font-family: 'sb';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/SEBANG_Gothic_Regular.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

body, html {font-family: 'sb'; background:#e2e3e4; height:inherit !important;}

#intro_02{}
#intro_02 .top{align-items: center; display: flex; gap: 10px; margin-bottom: 70px; padding: 40px 40px 70px 40px;}
#intro_02 .top span{display:inline-block;padding:0 25px;position: relative;}
#intro_02 .top .logo:before{content:'';width: 1px;display: block;height: 60px;background: #a7a49e;position: absolute;right: 0;top: 50%;margin-top: -30px;}

#intro_02 .slider-list{width:550px;margin:0 auto;position: relative;height: 500px;}
#intro_02 .slider {display: block;position: relative;}
#intro_02 .swiper-slide a{color: #fff;text-align:center;height: 400px;line-height:1.2; display:block; padding:30px;}
#intro_02 .swiper-slide a:after{content:'';width: 100%;height: 100%;position: absolute;background: rgb(104 104 104 / 80%);left: 0;top: 0;}
#intro_02 .swiper-slide a .in{position:relative; z-index:1;}

#intro_02 .swiper-slide {position: relative; transition:ease all 1.5s;}
#intro_02 .swiper-slide-active {display:block; opacity:1; filter: blur(0); height:400px;}
#intro_02 .swiper-slide-active a{display: flex;flex-direction: column;align-items: center;justify-content: center;}
#intro_02 .swiper-slide-active a:after{background: rgb(104 104 104 / 30%);}
#intro_02 .swiper-slide-active::before{display:none;}

#intro_02 .swiper-slide1 a{background: url('../img/intro02_bg01.jpg') no-repeat center / cover;}
#intro_02 .swiper-slide2 a{background: url('../img/intro02_bg02.jpg') no-repeat center / cover;}
#intro_02 .swiper-slide3 a{background: url('../img/intro02_bg03.jpg') no-repeat center / cover;}
#intro_02 .swiper-slide4 a{background: url('../img/intro02_bg04.jpg') no-repeat center / cover;}
#intro_02 .swiper-slide5 a{background: url('../img/intro02_bg05.jpg') no-repeat center / cover;}
#intro_02 .swiper-slide6 a{background: url('../img/intro02_bg06.jpg') no-repeat center / cover;}

#intro_02 .swiper-slide{padding:0 5rem;}
#intro_02 .swiper-slide a{transition:transform 0.8s ease, top 0.8s ease, left 0.8s ease; position:relative;width: 65%;border-radius:30px;overflow:hidden;}

#intro_02 .swiper-slide-active{padding:0;}
#intro_02 .swiper-slide-active a{width:100%;}

#intro_02 .swiper-slide > p{font-size:40px; opacity:0; text-align: center; font-weight:bold; margin-top:20px; color:#27292e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#intro_02 .swiper-slide-active > p{font-size:40px; opacity:1; margin-top: 50px;}

/* slide */
#intro_02 .swiper-slide-active + .swiper-slide a{opacity: 0.8; filter: blur(0.5px);  transform:rotate(10deg);top: 35px;left: 10px;}
#intro_02 .swiper-slide-active + .swiper-slide + .swiper-slide a{opacity: 0.6; filter: blur(2px);  transform: rotate(30deg);top: 165px;left: -190px;}

#intro_02 .swiper-slide:has(+ .swiper-slide-active) a {opacity: 0.8; filter: blur(0.5px); transform: rotate(-12deg);top: 45px;left: 145px;}
#intro_02 .swiper-slide:has(+ .swiper-slide + .swiper-slide-active) a{opacity: 0.6; filter: blur(2px); transform: rotate(-23deg);top: 155px;left: 357px;}

#intro_02 .swiper-slide a .in > strong{transition:cubic-bezier(0, 1.39, 0.32, 1.28) all 1s;}
#intro_02 .tit {font-size:46px; opacity: 0.5; font-weight:bold; display:block; text-align:left;}
#intro_02 .s_tit{font-size:36px; color:#fff; display:block; font-weight:bold; opacity:0;}

#intro_02 .swiper-slide-active .tit {font-size:90px;opacity:1;text-align:center;text-shadow: 1px 1px 1px rgba(0, 0, 0);font-weight: 700;/*font-style: italic;*/}
#intro_02 .swiper-slide-active .s_tit{opacity:1; text-shadow: 1px 1px 1px rgba(0, 0, 0);}

#intro_02 .swiper-slide.disabled .tit {opacity: 0;transition: 0;}

#intro_02 .swiper-button-next,
#intro_02 .swiper-button-prev{position: absolute; transition: ease all .5s; background: url('../img/intro02_arr.png') center no-repeat; top:180px; opacity:0.5; width:25px; height:47px;}
#intro_02 .swiper-button-prev{left:-40px;}
#intro_02 .swiper-button-next{right:-40px; transform:rotate(180deg);}
#intro_02 .slider-list .subject{font-size:40px; font-weight:700; }

#intro_02 .swiper-button-next:hover, 
#intro_02 .swiper-button-prev:hover{opacity: 1;}

.quick{margin-top:80px; text-align: center;}
.quick ul{display: flex;gap: 0;justify-content: center;flex-direction: column;}
.quick ul li a{font-size:20px;color:#27292e;left:0; padding:10px 0; position:relative;display: inline-block;transition:ease-in-out all .3s;}
.quick ul li a:hover{background-color:#01b4ed; color:#fff; padding:1rem 3rem; border-radius: 5rem;;}

.marquee-wrapper {overflow: hidden;white-space: nowrap;position: absolute;top: 170px;width: 100%;}
.marquee-content {display: flex; width: max-content; animation: marquee 30s linear infinite;}
.marquee-content span {font-size: 150px; font-weight: 300; text-transform: uppercase; letter-spacing: 5px;color: transparent; -webkit-text-stroke: 1px #ccc; padding-right: 50px; white-space: nowrap;}

.footer{font-size:16px;color:#6c6859;text-align:center;width: 100%;margin: 70px 0 30px;}
.footer .copy{opacity:0.5; margin-top:5px;}

/* animation */
@keyframes marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

#intro_02 .top{position: relative; filter: blur(5px); top: 100px; opacity:0; transition:ease all 1s;}
.on #intro_02 .top{filter: blur(0); top: 0; opacity:1;}

#intro_02 .slider-list{position: relative; filter: blur(5px); opacity:0; top: 100px; transition:ease all 1s; transition-delay:.7s;}
.on #intro_02 .slider-list{filter: blur(0); top: 0; opacity:1;}

#intro_02 .quick{position: relative; filter: blur(5px); opacity:0; top: 100px; transition:ease all 1s; transition-delay:1.2s;}
.on #intro_02 .quick{filter: blur(0); top: 0; opacity:1;}

#intro_02 .footer{filter: blur(5px); opacity:0; bottom: 100px; transition:ease all 1s; transition-delay:1.6s;}
.on #intro_02 .footer{filter: blur(0); bottom: 40px; opacity:1;}

#intro_02 .swiper-slide-active + .swiper-slide{}
#intro_02 .swiper-slide-active + .swiper-slide + .swiper-slide{}
#intro_02 .swiper-slide:has(+ .swiper-slide-active){}
#intro_02 .swiper-slide:has(+ .swiper-slide + .swiper-slide-active){}

body:not(.on) #intro_02 .top,
body:not(.on) #intro_02 .slider-list,
body:not(.on) #intro_02 .quick,
body:not(.on) #intro_02 .footer{opacity: 0; transform: translateY(20px); filter: blur(6px);}

@media all and (max-width:1024px) {
	#intro_02 .slider-list{width:100%; max-width:550px;}
	#intro_02 .footer{padding:0 3rem;}
	.footer .copy{margin-top:10px;}
}

@media all and (max-width:767px) {
	#intro_02 .top{padding: 40px 40px 30px 40px;}
	#intro_02 .slider-list{padding:0 4rem; height:450px; overflow:hidden;}
	#intro_02 .swiper-slide-active .tit{font-size:60px;}
	#intro_02 .swiper-slide-active .s_tit{font-size:25px;}
	#intro_02 .swiper-slide a{transform:rotate(0) !important;top: 0 !important;left: 0 !important;}

	#intro_02 .swiper-button-prev{left:10px;}
	#intro_02 .swiper-button-next{right:10px;}
	#intro_02 .swiper-slide-active > p{font-size:20px; margin-top:20px;}
	#intro_02 .quick{margin-top:50px;}
	.marquee-wrapper{top:100px;}
	.quick ul li a{font-size:18px; padding: 5px 0;}
}