* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}
body{
	width: 100%;
	height: 100%;
}
.flex_wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.wrap_1280 {
	max-width:1280px;
	width:100%;
	margin:0 auto;
}
.wrap_1024 {
	max-width:1024px;
	width:100%;
	margin:0 auto;
}

.swiper-slide {
	height:100vh !important;
	height:100svh !important;
	position:relative;
}

.swiper-navigation {
	display:flex;
	float:left;
	margin-right:1.5rem;
	margin-top:3px;
	align-items: center;
}

.swiper-wrapper .slide01 {
	background:url(../img/index/slide01.jpg) no-repeat;
	background-size:cover;
	background-position: 50%;
}

#Index .index_logo {
	width:17rem;
}
#Index .d-flex {
	gap:2.25rem;
	align-items: flex-end;
}
#Index .d-flex h2{
	color:#fff;
	font-size:2.9rem;
	font-weight:600;
	line-height:1.2;
	letter-spacing: -0.1rem;
}
#Index .d-flex .line {
	position:relative;
	display:inline-block;
}
#Index .d-flex .line::after {
	content: '';
    display: block;
    width: 104%;
    height: 1.35rem;
    position: absolute;
    left: -1.5%;
    bottom: 1%;
    z-index: -1;
    background: #D2232A;
	animation: Width 1.3s cubic-bezier(0.215, 0.610, 0.355, 1);
	animation-fill-mode: forwards;
}
@keyframes Width {
	from {
		width:0;
	}
	to {
		width:104%;
	}
}
#Index .d-flex .line.blue::after {
	background:#0065B3;
}
#Index .d-flex>div {
	flex-grow:1;
}
#Index .d-flex h4 {
	font-size:2.36rem;
}
#Index .d-flex p{
	font-size:1.05rem;
	color:#fff;
	font-weight:100;
	letter-spacing: 0.077rem;
}
#Index .year {
	font-size:12.6rem;
	letter-spacing: -0.75rem;
	opacity: 0;
    position: absolute;
    right: 4.5rem;
    top: 5.5rem;
    z-index: 5;
	color:#fff;
	transition: all 0.5s;
}

#Index .wrap_1720 {
	position:absolute;
	/*border: 2px solid pink;*/
	z-index: 2;
	color:#fff;
	max-width:1720px;
	width:95%;
	bottom:4.5rem;
	left:50%;
	transform:translate(-50%,0);
}
#Index .wrap_1720 .bar {
	margin:0.75rem 0;
	width: 26.5rem;
}
#Index .wrap_1720 button {
	display:inline-flex;
	display:-webkit-inline-flex;
	align-items: center;
	background:linear-gradient(to right, #1661AD, #009C96);
	padding:1rem;
	border-radius:0.5rem;
	color:#fff;
	font-size:1.3rem;
	font-weight:500;
	width:100%;
	justify-content: space-between;
	width:26.3rem;
}
#Index .wrap_1720 button img {
	width:3.1rem;
}

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
}

.modal-content {
  position: relative;
  width: 90%;
  max-width: 1280px;
  border-radius: 10px;
  text-align: center;
}

.video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9; /* 비디오 비율 유지 */
}

.video-container iframe {
  width: 100%;
  height: 100%;
}

.close img {
  	cursor: pointer;
	margin-bottom: 1rem;
	width: 2.5rem;
	margin-top: -100%;
}

@media screen and (max-width: 1680px) {
	#Index .year {
		right: 6.5rem;
	}
	#Index .wrap_1720 {
		width: 87%;
	}
	#Index .d-flex h2 {
		font-size: 2.4rem;
	}
	#Index .wrap_1720 .bar {
		width: 21.8rem;
	}
	#Index .d-flex h4 {
		font-size: 1.95rem;
	}
	#Index .d-flex p {
		font-size: 0.84rem;
	}
	#Index .wrap_1720 button {
		font-size: 1.05rem;
		width: 21.7rem;
		padding: 0.8rem 1rem;
	}
}

@media screen and (max-height: 790px) {
	.modal-content {
		max-width: 980px;
	}
}
@media screen and (max-height: 650px) {
	.modal-content {
		max-width: 860px;
	}
}
@media screen and (max-width: 1024px) {
	#Index .index_logo {
		width:15rem;
	}
	#Index .d-flex {
		flex-direction: column;
		align-items: flex-start;
		position:relative;
	}
	#Index .d-flex h2 {
		font-size:2.2rem;
		margin-bottom: 0.8rem;
	}
	#Index .d-flex>div {
		width:100%;
	}
	#Index .d-flex h4 {
		font-size: 1.8rem;
	}
	#Index .wrap_1720 .year {
		font-size: 8rem;
        position: relative;
        /* top: 9.7rem; */
        letter-spacing: -0.3rem;
		margin-bottom:2rem;
	}
	#Index .wrap_1720 .bar {
		width: 20rem;
		margin: 0.40rem 0;
	}
	#Index .wrap_1720 {
		top:auto;
		bottom:5rem;
		transform:translate(-50%,0);
	}
	#Index .d-flex p {
		margin-bottom: 1.5rem;
        font-size: 0.755rem;
	}
	#Index .wrap_1720 button {
		font-size: 1rem;
		width: 20rem;
		padding: 0.5rem 0.85rem;
	}
	#Index .wrap_1720 button img {
		width: 2.5rem;
	}
	    
}
@media screen and (max-width: 768px) {
	#Index .year {
		top: 8rem;
		right: 2.5rem;
		font-size: 13.5rem;
	}
}
@media screen and (max-width:480px) {
	.swiper-wrapper .slide01 {
		background:url(../img/index/m_slide01.jpg) no-repeat;
		background-size:cover;
	}
	#Index .year {
		top: 8rem;
		right: 2rem;
		font-size: 27vw !important;
	}
	#Index .d-flex h2 {
        font-size: 8vw;
    	margin-bottom: 1.5rem;
	}
	#Index .wrap_1720 .bar {
        width: 85%;
        margin: 1rem 0;
    }
	#Index .d-flex h4 {
        font-size: 6.5vw;
    }
	#Index .d-flex p {
        font-size: 3.03vw;
    }
	#Index .wrap_1720 button {
        font-size: 3.6vw;
        width: 85%;
        padding: 1rem 1.25rem;
    }
	#Index .wrap_1720 button img {
        width: 13.5%;
    }
}
@media screen and (max-width:425px) {
	#Index .d-flex h2 {
		font-size: 7.50vw !important;
    	margin-bottom: 1.5rem;
	}
	#Index .wrap_1720 .bar {
        width: 80% !important;
        margin: 1rem 0;
    }
	#Index .d-flex h4 {
        font-size: 6.15vw !important;
    }
	#Index .d-flex p {
		font-size: 2.78vw !important;
		letter-spacing: 0.185vw !important;
    }
	#Index .wrap_1720 button {
        font-size: 3.4vw !important;
        width: 80% !important;
        padding: 1rem 1.25rem;
    }
	#Index .wrap_1720 button img {
        width: 12.5% !important;
    }
}
@media screen and (max-width:390px) {
	#Index .wrap_1720 button {
        padding: 1rem 1.25rem;
    }
}
@media screen and (max-width:375px) {
	#Index .wrap_1720 button {
        padding: 0.85rem 1.25rem;
    }
}
@media screen and (max-width:344px) {
	#Index .d-flex h2 {
		margin-bottom: 1.20rem;
	}
	#Index .wrap_1720 .bar {
        margin: 0.6rem 0;
    }
}
@media screen and (max-width:320px) {
	#Index .d-flex h2 {
    	margin-bottom: 1.25rem;
	}
	#Index .wrap_1720 .bar {
        margin: 0.75rem 0;
    }
	#Index .wrap_1720 button {
        padding: 1.15rem 1.15rem;
    }
}