@charset "utf-8";

/* 메인 비주얼 */
.main-visual-box{position:relative;z-index:10;height:100vh;overflow:hidden;}
.main-visual-box .main-vi-swiper{height:100%;}
.main-visual-box .main-vi-swiper .swiper-slide{position:relative;width:100%;background:var(--black100);overflow:hidden;}
.main-visual-box .main-vi-swiper .swiper-slide[data-dimmed='on']:before{content:'';display:block;position:absolute;top:0;left:0;z-index:20;width:100%;height:100%;background:var(--black10);}
.main-visual-box :is(.vi-video-box,.vi-img-box){position:relative;height:100%;}
.main-visual-box iframe{position:absolute;top:50%;left:50%;z-index:10;width:100vw;min-width:177.78vh;height:56.25vw;min-height:100vh;pointer-events:none;transform:translate(-50%,-50%) scale(1);}
.main-visual-box .vi-video{position:absolute;top:50%;left:50%;z-index:10;width:100vw;min-width:177.78vh;height:56.25vw;min-height:100vh;pointer-events:none;transform:translate(-50%,-50%) scale(1);}
.main-visual-box .vi-txt-box{position:absolute;top:50%;left:0;z-index:30;width:100%;text-align:center;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 6rem;box-sizing:border-box;}
.main-visual-box .vi-video-box+.vi-txt-box{display:none;}
.main-visual-box .vi-txt-box .vi-slogan{margin:0 auto;max-width:56.3rem;width:100%;}
.main-visual-box .vi-txt-box .vi-txt01{padding:3.7rem 0 0;width:100%;font-size:2rem;line-height:2.6rem;font-weight:var(--font-weight-bold);color:var(--white100);word-break:keep-all;}

.main-visual-box .video-control-btn{display:flex;align-items:center;justify-content:center;position:absolute;top:50%;left:calc(100% + 3.6rem);width:4.2rem;height:4.2rem;border:none;border-radius:50%;background-color:var(--black50);color:var(--white100);transition:background-color 0.3s;cursor:pointer;transform:translateY(-50%);}
.main-visual-box .video-control-btn::before{content:'';display:block;width:0.9rem;height:1.6rem;background-image:url("../img/main/ico-main-visual-pause%402x.png");background-repeat:no-repeat;background-position:center;background-size:100%;}
.main-visual-box .video-control-btn.paused::before{background-image:url("../img/main/ico-main-visual-play%402x.png");}
.main-visual-box .video-control-btn:hover{background-color:var(--black80);}
.vi-pagination-wrap{display:flex;justify-content:center;align-items:center;position:absolute;bottom:4rem;left:50%;z-index:10;transform:translateX(-50%);}

.vi-pagination-wrap .vi-pagination{display:flex;align-items:center;gap:1rem;width:auto;}
.vi-pagination-wrap .vi-pagination span.swiper-pagination-bullet{display:inline-block;margin:0;width:1.1rem;height:1.1rem;border-radius:50%;background-color:var(--white100);box-sizing:border-box;vertical-align:middle;opacity:1;}
.vi-pagination-wrap .vi-pagination span.swiper-pagination-bullet-active{width:1.9rem;height:1.3rem;border:3px solid var(--white100);border-radius:6.5px;background-color:transparent;}
.vi-pagination-wrap .vi-pagination.swiper-pagination-lock + .video-control-btn{position:static;transform:none;}

/* 자랑 */
.main-proud-box{position:absolute;bottom:0;left:0;z-index:10;padding:3.3rem 7rem 5.2rem;width:100%;background:var(--black85);box-sizing:border-box;}
.main-proud-box:before{content:'';display:block;position:absolute;bottom:100%;left:0;z-index:10;width:100%;height:60rem;background:linear-gradient(to top,var(--black85) 0%,var(--black50) 30%,transparent 100%);pointer-events:none;}
.main-proud-box .proud-txt{position:absolute;bottom: calc(100% + 4.7rem);left:0;z-index:20;padding:0 7rem;font-size:2.4rem;font-weight:var(--font-weight-bold);color:var(--white100);line-height:3rem;box-sizing:border-box;}
.main-proud-swiper{margin-left:auto;margin-right:auto;width:100%;height:100%;overflow:hidden;}
.main-proud-swiper .swiper-slide{display:flex;flex-wrap:wrap;padding:0 2rem 0 0;width:25%;box-sizing:border-box;}

.main-proud-box .proud-logo-box{width:100%;height:43px;display:flex;align-items:center;}
.main-proud-box .proud-con-box{padding:2rem 0 0;width:100%;}
.main-proud-box .proud-con-box .proud-title{display:-webkit-box;font-size:1.9rem;line-height:2.8rem;letter-spacing:-0.025rem;font-weight:var(--font-weight-semibold);color:var(--white100);word-break:keep-all;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;text-overflow:ellipsis;overflow:hidden;}
.main-proud-box .proud-con-box .proud-title.color-highlight span{color:var(--color43);}
.main-proud-box .proud-con-box .proud-more{display:inline-block;padding:1.2rem 0 0;font-size:1.3rem;line-height:1.9rem;font-weight:var(--font-weight-medium);color:var(--white40);text-decoration:underline;box-sizing:border-box;transition:color 0.2s ease;}
.main-proud-box .proud-con-box .proud-more:hover{color:var(--color01);}

.main-proud-box .proud-control-wrap{position:absolute;bottom:calc(100% + 5rem);left:0;padding:0 7rem;width:100%;z-index:10;pointer-events:none;box-sizing:border-box;}
.main-proud-box .proud-control-wrap > div{display:flex;align-items:center;justify-content:flex-end;}
.main-proud-box .proud-control-wrap > div > div{display:flex;align-items:center;font-size:1.6rem;line-height:2.6rem;color:var(--white100);font-weight:var(--font-weight-medium);letter-spacing:-0.05em;cursor:pointer;pointer-events:visible;}
.main-proud-box .proud-control-wrap > div > div span{margin:-3px 0 0;}
.main-proud-box .proud-control-wrap .main-proud-prev:before{content:'';display:inline-flex;margin:0 1rem 0 0;width:3.5rem;height:3.5rem;border-radius:50%;background:var(--black30) url(../img/main/ico-proud-prev%402x.png) no-repeat center center/1.4rem;}
.main-proud-box .proud-control-wrap .main-proud-prev:after{content:'';display:inline-flex;margin:0 2.9rem;width:1px;height:1.9rem;background:var(--color40);opacity:0.21;}
.main-proud-box .proud-control-wrap .main-proud-next:after{content:'';display:inline-flex;margin:0 0 0 1rem;width:3.5rem;height:3.5rem;border-radius:50%;background:var(--black30) url(../img/main/ico-proud-next%402x.png) no-repeat center center/1.4rem;}
.main-proud-box .pagination-wrap{position:absolute;top:0;left:0;width:100%;height:1px;}
.main-proud-box .pagination-wrap .proud-pagination.bar{display:block;background-color:var(--white50);height:1px;}
.main-proud-box .pagination-wrap .proud-pagination.bar span{display:block;position:relative;width:100%;height:1px;background-color:var(--color01);}
.main-proud-box .pagination-wrap .proud-pagination.dot{display:none;}
.main-proud-box .pagination-wrap .proud-autoplay{display:none;}

@media screen and (min-width:1025px) and (max-height: 1220px){
	.main-visual-box .vi-txt-box .vi-slogan{max-width:46.15vh;}
	.main-visual-box .vi-txt-box .vi-txt01{padding:3.03vh 0 0;}
	.vi-pagination-wrap{bottom:3.28vh;}
}

/* animation before */
.main-visual-box .vi-txt-box :is(p, button),
.main-proud-box{opacity:0;}

@media screen and (max-width:1400px){
	.main-proud-box{padding:3.3rem 4rem 5.2rem;}
	.main-proud-box .proud-txt{padding:0 4rem;}
	.main-proud-box .proud-con-box .proud-title{font-size:1.8rem;line-height:2.4rem;}
	.main-proud-box .proud-control-wrap{padding:0 4rem;}
}

@media screen and (max-width:1024.98px){
	/* 메인 비주얼 */
	.main-visual-box{height:100svh;}
	.main-visual-box .vi-video{transform:translate(-50%,-50%) scale(1.5);}
	.main-visual-box .vi-txt-box{padding:0 2rem;}
	.main-visual-box .vi-txt-box .vi-slogan{max-width:30rem;}
	.main-visual-box .vi-txt-box .vi-txt01{padding:2rem 0 0;font-size:1.6rem;line-height:2.2rem;}
	.main-visual-box .main-vi-control-wrap{top:45%;}
	.main-visual-box .vi-button-prev,
	.main-visual-box .vi-button-next{width:3rem;height:3rem;}
	.main-visual-box .vi-button-prev{left:1rem;}
	.main-visual-box .vi-button-next{right:1rem;}
	.main-visual-box .vi-button-prev::before,.vi-button-next::before{width:8px;height:1.4rem;}
	.main-visual-box .video-control-btn{bottom:1.5rem;right:1.5rem;width:3.6rem;height:3.6rem;}
	.vi-pagination-wrap{display:none;}

	/* 자랑 */
	.main-proud-box{padding:0 2rem 4rem;}
	.main-proud-box:before{height:16.8rem;}
	.main-proud-box .proud-txt{display:none;}
	.main-proud-swiper .swiper-slide{align-items:center;padding:2rem 2rem 3.5rem;width:100%;text-align:center;}
	.main-proud-box .proud-logo-box{padding:0 0 1.8rem;justify-content:center;}
	.main-proud-box .proud-logo-box img{}
	.main-proud-box .proud-con-box{padding:0;}
	.main-proud-box .proud-con-box .proud-title{font-size:1.6rem;line-height:2.2rem;}
	.main-proud-box .proud-con-box .proud-more{padding:0.8rem 0 0;}

	.main-proud-box .proud-control-wrap{bottom:60%;padding:0 2rem;width:100%;}
	.main-proud-box .proud-control-wrap > div{justify-content:space-between;}
	.main-proud-box .proud-control-wrap > div > div span{display:none;}
	.main-proud-box .proud-control-wrap .main-proud-prev:before{margin:0;width:0.9rem;height:1.6rem;background:url(../img/main/ico-proud-prev-m%402x.png) no-repeat 0 0/100%;}
	.main-proud-box .proud-control-wrap .main-proud-prev:after{display:none;}
	.main-proud-box .proud-control-wrap .main-proud-next:after{margin:0;width:0.9rem;height:1.6rem;background:url(../img/main/ico-proud-next-m%402x.png) no-repeat 0 0/100%;}

	.main-proud-box .pagination-wrap{display:flex;justify-content:center;align-items:center;position:static;height:auto;}
	.main-proud-box .pagination-wrap .proud-pagination{width:auto;font-size:0;line-height:1;}
	.main-proud-box .pagination-wrap .proud-pagination span{display:inline-block;margin:0 9px 0 0;width:1.1rem;height:1.1rem;border-radius:50%;background-color:var(--white40);box-sizing:border-box;vertical-align:middle;opacity:1;}
	.main-proud-box .pagination-wrap .proud-pagination span.swiper-pagination-bullet-active{width:1.9rem;height:1.3rem;border:3px solid var(--white100);border-radius:6.5px;background-color:transparent;}
	.main-proud-box .pagination-wrap .proud-autoplay{display:inline-block;font-size:0;line-height:1;vertical-align:middle;}
	.main-proud-box .pagination-wrap .proud-autoplay>button{display:inline-block;width:1rem;height:1.3rem;cursor:pointer;vertical-align:middle;}
	.main-proud-box .pagination-wrap .proud-autoplay .pause{background:url(../img/main/ico-proud-pause.png) no-repeat center center/100%;}
	.main-proud-box .pagination-wrap .proud-autoplay .start{background:url(../img/main/ico-proud-play.png) no-repeat center center/100%;}
	.main-proud-box .pagination-wrap .proud-autoplay.pause .pause,
	.main-proud-box .pagination-wrap .proud-autoplay.start .start{display:none;}
}
@media screen and (max-width:480px){
	.main-content-wrap{position:relative;z-index:10;background:#fff;}

	/* 메인 비주얼 */
	.main-visual-box .vi-txt-box .vi-txt01{padding:1.5rem 0 0;}
	.video-control-btn{width:3.2rem;height:3.2rem;}
	.vi-pagination-wrap{bottom:20rem;}

	/* 자랑 */
	.main-proud-box:before{height:10rem;}
}