@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 {overflow: hidden; font-family: 'sb';}

#intro_01{height:100vh; transition:ease all 1s;}
#intro_01:before{content:'';width: 100%;height: 100%;display: block;position: absolute;left: 0;top: 0;background: #d6d2c6;opacity: 0.8;}

#intro_01.intro_bg_1{ background:url(./../img/intro01_bg01.jpg) center / cover no-repeat;}
#intro_01.intro_bg_2{ background:url(./../img/intro01_bg02.jpg) center / cover no-repeat;}
#intro_01.intro_bg_3{ background:url(./../img/intro01_bg03.jpg) center / cover no-repeat;}
#intro_01.intro_bg_4{ background:url(./../img/intro01_bg04.jpg) center / cover no-repeat;}
#intro_01.intro_bg_5{ background:url(./../img/intro01_bg05.jpg) center / cover no-repeat;}

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

#intro_01 .swiper{width: 100%;position:relative; height:550px;}
#intro_01 .swiper:before{content: ''; animation: spin 20s linear infinite;  width: 550px;height: 100%;position: absolute;display: block;border-radius: 100%;background:url(./../img/intro01_circle_line.png) center / cover no-repeat; left: 50%; margin-left:-275px;}

#intro_01 .swiper .swiper-wrapper{align-items: anchor-center;margin-left: -100px;}
#intro_01 .swiper-slide{display: flex;flex-direction: column;position:relative;justify-content: center;align-items: center;text-align: center;transition: all 1s cubic-bezier(0, 0, 0.09, 0.83);cursor: pointer;}
#intro_01 .year{font-size: 46px; font-style: italic; color: #8f8464;margin-bottom: 10px;position:relative;transition: color 0.3s ease;font-weight:700;width: 100%;border-bottom: 1px solid #8f8464;padding-bottom: 20px;}
#intro_01 .year:before{content: ''; width: 1px;height: 12px;display: block;background: #8f8464;position: absolute;left: 50%;bottom: -6px;}
#intro_01 .title{font-size:36px; display:none;}
#intro_01 .description{font-size: 22px;color: #555; display:none;}
#intro_01 .swiper-slide-active {opacity: 1;z-index: 10;padding:0;margin:0 20px;border-bottom:none;height:550px;margin: 0 100px;}
#intro_01 .swiper-slide-active .year {color: #1a2b50;font-size:120px; padding:0; border-bottom:none; line-height: 1.2;}
#intro_01 .swiper-slide-active .year:before{display:none;}
#intro_01 .swiper-slide-active .year{background:url(./../img/intro_01_txt.jpg) no-repeat;  background-position: -600px -320px; background-clip: text;-webkit-text-fill-color: transparent;}
#intro_01 .swiper-slide-active .title{display:block;}
#intro_01 .swiper-slide-active .description {display:block;}

@keyframes spin {
	from {
		transform: rotate(0deg);  
	}
	to {
		transform: rotate(360deg);
	}
}

.quick{position:absolute; right:100px; bottom:50px; z-index: 10;}
.quick ul{display: flex; flex-direction: column; gap: 10px;}
.quick ul li{}
.quick ul li a{font-size:20px;color:#554721;left:0; padding:10px 0; position:relative;display: inline-block; transition:ease-in-out all .3s;padding-right: 5px;}
.quick ul li a:after,
.quick ul li a:before{content:''; opacity:0; transition:ease all .3s;}
.quick ul li a:after{ width: 5px;height: 5px;display: inline-block;background: #a39c8a; transform:rotate(45deg); vertical-align: middle;margin-left: 20px;}
.quick ul li a:before{width: 500%;position: absolute;left: 100%;top: 50%;background: #a39c8a;display: block;height: 1px;}

.quick ul li:hover a{left:-50px; background: #223d89; color: #fff; padding-left: 2rem;}
.quick ul li:hover a:after,
.quick ul li:hover a:before{opacity:1;}

.footer{position:absolute; left:40px; bottom:20px; font-size:20px; color:#6c6859;}
.footer .copy{opacity:0.5; margin-top:5px;}

@media all and (max-width:1600px) {
	#intro_01 .swiper-slide-active .year{font-size:100px;}
	.quick{right:50px;}
	.quick ul{gap:0;}
}

@media all and (max-width:1100px) {
	body{overflow:auto;}
	#intro_01{height:auto;}
	#intro_01 .swiper{height:350px;}
	#intro_01 .swiper .swiper-wrapper{margin-left:-10px;}
	#intro_01 .swiper:before{width:350px; margin-left: -150px;}
	#intro_01 .swiper-slide-active{height: 350px; margin:0 30px;}
	#intro_01 .swiper-slide-active .year{font-size:60px;}
	#intro_01 .description{font-size:17px;}
	#intro_01 .year{font-size:36px;}
	
	.quick{position:relative;margin-top: 90px; text-align: right;}
	.footer{position:relative; text-align:center; left:0; font-size:17px; margin-top:30px;}
	.footer i{display:none;}
	.footer .tel{display:block;}
	.footer .copy{font-size:14px;}
}

@media all and (max-width:768px) {
	#intro_01{height:auto;}
	#intro_01 .list{padding-top: 20px;}
	#intro_01 .top{transform:scale(.8); margin-bottom: 20px;}
	#intro_01 .swiper{height:260px;}
	#intro_01 .swiper .swiper-wrapper{margin-left:-40px;}
	#intro_01 .swiper:before{width: 260px; margin-left: -130px;}
	#intro_01 .swiper-slide-active{height: 260px; margin:0 40px;}
	#intro_01 .swiper-slide-active .year{font-size:40px; margin-bottom:0; background-position: -600px -340px;}
	#intro_01 .title{font-size:25px;}
	#intro_01 .description{font-size:17px;}
	#intro_01 .year{font-size:30px;}
	.quick{right:20px; margin-top: 60px;}
	.quick ul li a{padding:5px 0;}
}