#main_Wrap .mainslide{overflow: hidden; position: relative; width: 100%; height: 100vh; aspect-ratio: 16/9; transition: transform .6s cubic-bezier(.32,.94,.6,1); z-index: -1;}
#main_Wrap .mainslide .video_wrap{opacity: 1; transform: scale(1); width: 100%; height: 100%; transition: all 2s cubic-bezier(.32,.94,.6,1);}
#main_Wrap .main_vd {position: relative; width: 100%; height: 100vh; overflow: hidden; color: white; text-align: center;}
#main_Wrap .main_vd .slide_title{position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;}

/* ------- 공통 -------- */
section h2{line-height: 1.0;}

/* 버튼 */
.m_btn{display: flex; align-items: center; justify-content: flex-end;}
.m_btn .m_circ{background-color: #000; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.m_btn .m_circ > img{transform: rotate(0); transition: transform 0.4s;}

/* 버튼 hover */
.m_btn:hover .m_circ > img{transform: rotate(-45deg);}

@media (max-width: 768px){
	.m_btn .m_circ{
		width: 28px;
		height: 28px;
	}

	.m_btn .m_circ > img{
		width: 50%;
	}
}



/* --------- about --------- */
.conts_sec1{
	--border: #DDD;
	--clipPath: 10%;
	--round: 2.5rem;
}

.conts_sec1 .top_box.flexList[layoutStyle="fullbox"] {--y-gap: 0;}
.conts_sec1 .top_box{border-bottom: 1px solid #ccc; border-top: 1px solid #ccc;}
.conts_sec1 .top_box .imgbox{overflow: hidden; border-right: 1px solid #ccc;}
.conts_sec1 .top_box .imgbox img{width: 100%;}
.conts_sec1 .top_box .txtbox{position: relative;}
.conts_sec1 .top_box .txtbox .txt{position: absolute; left: 3rem; bottom: 4rem;}
.conts_sec1 .top_box .txtbox .m_btn{padding: 3.750rem;}


.conts_sec1 .btm_box{padding-bottom: 2em;}
.conts_sec1 .btm_box.flexList[layoutStyle="fullbox"] {--y-gap: 0;}
.conts_sec1 .btm_box .box{position: relative;}
.conts_sec1 .btm_box .box::before{content: ''; display: block; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; background: var(--border); z-index: 10;}
.conts_sec1 .btm_box .box::after{content: ''; display: block; width: 1px; height: 100%; position: absolute; top: 0; right: 0; background: var(--border); z-index: 10;}
.conts_sec1 .btm_box .box > a{height: 100%; display: flex; align-items: center; flex-direction: column; padding: 6em 0; cursor: grab;}

.conts_sec1 .btm_box .box > a .text{padding: 0 3em 3em; width: 100%; height: 13em; box-sizing: border-box;}
.conts_sec1 .btm_box .box > a .text *{color: transparent; background: linear-gradient(to right, var(--pointcolor) 50%, rgba(17, 17, 17, 0.3) 50%); background-clip: text;
-webkit-background-clip: text; background-size: 200% 100%; background-position: 100%; transition: background-position 1s; text-align: center;}
.conts_sec1 .btm_box .box:hover > a .text *{background-position: 0;}
.conts_sec1 .btm_box .box > a .text p {height: auto; min-height: 0; line-height: 1.25; word-break: normal; overflow-wrap: break-word;}

.conts_sec1 .btm_box .box > a .b_img{position: relative; width: 100%;}
.conts_sec1 .btm_box .box > a .b_img figure{width: 100%; position: relative; z-index: 10; overflow: hidden; padding-bottom: 62.43%; clip-path: inset(0 0 0 0 round 0);
-webkit-clip-path: inset(0 0 0 0 round 0); transition: clip-path 0.5s;}
.conts_sec1 .btm_box .box > a .b_img figure > img{width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.conts_sec1 .btm_box .box > a .b_img .m_circ{width: 4em; height: 4em; display: flex; justify-content: center; align-items: center; background: #111; border-radius: 50%;
position: absolute; bottom: 0; left: 50%; z-index: 20; transform: translate(-50%, 50%);}
.conts_sec1 .btm_box .box > a .b_img .m_circ > img{transform: rotate(0); transition: transform 0.4s;}


/* hover */
.conts_sec1 .btm_box .box:hover > a .b_img figure{clip-path: inset(0 var(--clipPath) 0 var(--clipPath) round var(--round)); -webkit-clip-path: inset(0 var(--clipPath) 0 var(--clipPath) round var(--round));}
.conts_sec1 .btm_box .box:hover > a .b_img .m_circ > img{transform: rotate(-45deg);}

/* =========================
   about 반응형
========================= */
@media (max-width: 768px){
	.conts_sec1 .top_box .txtbox{
		padding: 4rem 3.75rem;
	}

	.conts_sec1 .top_box .txtbox .m_btn{
		padding: 0 0 3.75rem 0;
	}

	.conts_sec1 .top_box .txtbox .txt{
		position: static;
	}

	.mb-br{
		display: none;
	}

	.conts_sec1 .top_box .txtbox .txt p{
		font-size: 16px;
	}
}


/* =========================
   SWIPER PC / 태블릿 기본
========================= */

.conts_sec1 .btm_box .swiper-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.conts_sec1 .btm_box .swiper-slide {
    width: 20%;
    flex-shrink: 0;
}

@media (max-width: 1600px){

    .conts_sec1 .btm_box .swiper-slide {
        width: 25%;
    }
	.conts_sec1 .btm_box .box > a{
		padding: 4em 0 0;
	}
}

@media (max-width: 991px){

    .conts_sec1 .btm_box .swiper-slide {
        width: 33.333%;
    }
}

/* =========================
   MOBILE SWIPER
========================= */

@media (max-width: 768px){

     /* 전체 영역 */
    .conts_sec1 .btm_box {
        display: block;
        overflow: hidden;
        padding-bottom: 0;
    }


    /* JS에서 생성되는 각각의 슬라이드 */
    .conts_sec1 .btm_box .mobile_swiper {
        width: 100%;
        overflow: hidden;
    }


    /* 각 줄은 무조건 한 줄 */
    .conts_sec1 .btm_box .mobile_swiper .swiper-wrapper {
        display: flex;
        flex-wrap: nowrap;
    }


    /* Swiper가 카드 너비를 계산하도록 */
    .conts_sec1 .btm_box .mobile_swiper .swiper-slide {
        width: auto;
        flex-shrink: 0;
    }


    /* 모바일 카드 */
    .conts_sec1 .btm_box .box > a {
        padding: 4em 0;
    }


    /* 텍스트 영역 */
    .conts_sec1 .btm_box .box > a .text {
        width: 100%;
        height: 13em;
        padding: 0 2.5em;
        box-sizing: border-box;
    }


    .conts_sec1 .btm_box .box > a .text p {
        height: auto;
        min-height: 0;
        line-height: 1.25;
        word-break: normal;
        overflow-wrap: break-word;
    }

}

@media (max-width: 480px) {

    .conts_sec1 .btm_box .box > a {
        padding: 2.5em 0 3.5em;
    }

    .conts_sec1 .btm_box .box > a .text {
        height: 12em;
        padding: 0 1.5em 2em;
    }

    .conts_sec1 .btm_box .box > a .b_img .m_circ {
        width: 38px;
        height: 38px;
    }
}



/* --------- overview --------- */
.conts_sec2 .inner_wrap .box{width: calc((50% - 60px) / 2); background: #efefef; margin-right: 20px; border-radius: 0; overflow: hidden; position: relative; 
transition: width 0.5s, border-radius 0.5s;}
.conts_sec2 .inner_wrap .box .openimg{position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; transition: opacity 0.5s;}
.conts_sec2 .inner_wrap .box .openimg::before {content: ""; width: 100%; height: 80%; background: linear-gradient(to bottom, transparent, #000); opacity: 0.9; position: absolute; bottom: 0; left: 0;}
.conts_sec2 .inner_wrap .box .openimg img {min-width: 100%; height: 100%; object-fit: cover;}

.conts_sec2 .inner_wrap .box .text {position: relative; margin-top: 290px;}
.conts_sec2 .inner_wrap .box .text .txtabsol{position: absolute; top: 0; left: 0; transform: translateY(0); transition: top 0.5s, transform 0.5s; will-change: transform, top; }
.conts_sec2 .inner_wrap .box .text dl:not(.txtabsol){ opacity: 0; pointer-events: none; }
.conts_sec2 .inner_wrap .box .text dl{ padding: 50px; }
.conts_sec2 .inner_wrap .box .text dl dt{color: #333; letter-spacing: -0.02em; line-height: 1.5; transition: color 0.5s; }
.conts_sec2 .inner_wrap .box .text dl dd{ width: calc(200% + 60px); display: flex; align-items: flex-end; color: #FFF; letter-spacing: -0.02em; line-height: 1.75; margin-top: 50px; opacity: 0; transition: width 0.5s, opacity 0.5s, color 0.5s; }
.conts_sec2 .inner_wrap .box .text dl dd p{ width: 100%; font-weight: inherit; line-height: inherit; }
.conts_sec2 .inner_wrap .box .text dl dd div{ width: 180px; justify-items: end; -webkit-justify-items: end; }
.conts_sec2 .inner_wrap .box .text .icon{ margin-bottom: 20px; filter: invert(0) brightness(0); -webkit-filter: invert(0) brightness(0); transition: filter 0.5s; }

.conts_sec2 .inner_wrap .box.on{width: 50%; border-radius: 40px;}
.conts_sec2 .inner_wrap .box.on .openimg{opacity: 1; }
.conts_sec2 .inner_wrap .box.on .txtabsol{top: 100%; transform: translateY(-100%);}
.conts_sec2 .inner_wrap .box.on dl dt{color: #FFF;}
.conts_sec2 .inner_wrap .box.on dl dd{width: 100%; opacity: 1;}
.conts_sec2 .inner_wrap .box.on .icon{filter: invert(1) brightness(2); -webkit-filter: invert(1) brightness(2);}

#overview .text-slide{ width: 100%; display: flex; overflow: hidden; }
#overview .text-slide h3{font-weight: 500; color: #efefef; letter-spacing: -0.06em; white-space: nowrap; }
#overview .text-slide h3 span{font-weight: 600; letter-spacing: -0.04em; }  
#overview .text-slide h3.origin{animation: 40s linear 0s infinite normal forwards running origin_left; }
#overview .text-slide h3.clone{ animation: 40s linear 0s infinite normal none running clone_left; }

@keyframes origin_left{
	0%{ transform: translateX(0); }
	50%{ transform: translateX(-100%); }
	50.01%{ transform: translateX(100%) }
	100%{ transform: translateX(0); }
}

@keyframes clone_left{
	0%{ transform: translateX(0); }
	100%{ transform: translateX(-200%) }
}

/* =========================
   overview 반응형
========================= */
@media (max-width: 1024px) {
	.conts_sec2 .inner_wrap .box{
		width: 100% !important;
		margin-right: 0;
	}

	.conts_sec2 .inner_wrap .box:not(:last-of-type) {
        margin-bottom: 20px;
    }

	.conts_sec2 .inner_wrap .box .text{
		margin-top: 120px;
	}
}

/* --------- Center --------- */
.conts_sec3 .title{border-bottom: 1px solid #000; display: flex; align-items: center; justify-content: space-between;}

.conts_sec3 .slide_wrap{display: flex;}
.conts_sec3 .slide_wrap .swiper{width: 80%; margin-right: initial;}

.conts_sec3 .slide_wrap .navbox{display: flex;}
.conts_sec3 .slide_wrap .navbox .nav{position: relative; width: 60px; height: 60px; margin-top: 0; border-radius: 50%; border: 1px solid #ddd; overflow: hidden; 
transition: background 0.5s, border 0.5s;}
.conts_sec3 .slide_wrap .navbox .nav{left: 0; right: 0; top: 0;}
.conts_sec3 .slide_wrap .navbox .next:after, .conts_sec3 .slide_wrap .navbox .prev:after{display: none;}
.conts_sec3 .slide_wrap .navbox .nav img{filter: invert(1); position: absolute; top: 50%; transform: translateY(-50%); transition: left 0.5s, transform 0.5s, filter 0.5s;}
.conts_sec3 .slide_wrap .navbox .next .before{left: 0; transform: translate(-100%, -50%);}
.conts_sec3 .slide_wrap .navbox .next .after{left: 50%; transform: translate(-50%, -50%);}
.conts_sec3 .slide_wrap .navbox .prev .after{left: 100%; transform: translate(100%, -50%);}
.conts_sec3 .slide_wrap .navbox .prev .before{left: 50%; transform: translate(-50%, -50%);}


.conts_sec3 .slide_wrap .navbox .nav:hover{background: #111; border: 1px solid #111;}
.conts_sec3 .slide_wrap .navbox .nav:hover img{filter: invert(0); -webkit-filter: invert(0);}

.conts_sec3 .slide_wrap .navbox .next:hover .before{left: 50%;transform: translate(-50%, -50%);}
.conts_sec3 .slide_wrap .navbox .next:hover .after{left: 100%; transform: translate(100%, -50%);}

.conts_sec3 .slide_wrap .navbox .prev:hover .after{left: 50%; transform: translate(-50%, -50%);}
.conts_sec3 .slide_wrap .navbox .prev:hover .before{left: 0; transform: translate(-100%, -50%);}

@media (max-width: 1300px){
	.conts_sec3 .slide_wrap .navbox .nav{
		width: 45px;
		height: 45px;
	}
}

@media (max-width: 768px){
	.conts_sec3 .slide_wrap{flex-wrap: wrap; flex-direction: column-reverse;}
	.conts_sec3 .slide_wrap .swiper{width: 100%;}
	.conts_sec3 .slide_wrap .navbox{width: 100%; justify-content: end; margin-top: 2em;}
}

@media (max-width: 500px){
	.conts_sec3 .title{align-items: flex-end;}
	.conts_sec3 .title h2{width: 50%;}
	.conts_sec3 .title a{width: 50%;}
}

/* --------- Updates --------- */
.conts_sec4{background-color: #111;}
.conts_sec4 .flex_wrap{align-items: center; justify-content: space-between;}
.conts_sec4 .flex_wrap .box{width: 50%;}

.conts_sec4 .flex_wrap .box.leftbox .m_btn{justify-content: flex-start;}
.conts_sec4 .flex_wrap .box.leftbox .m_btn .m_circ{background-color: #fff;}
.conts_sec4 .flex_wrap .box.leftbox .m_btn .m_circ > img{filter: invert(1); transform: rotate(0);}


.conts_sec4 .flex_wrap .box.rightbox ul{border-top: 2px solid #fff; border-bottom: 2px solid #fff;}
.conts_sec4 .flex_wrap .box.rightbox ul li{padding: 1.5rem 2rem; display: flex; align-items: center; border-top: 1px solid #aaa;}
.conts_sec4 .flex_wrap .box.rightbox ul li:first-child{border-top: none;}

@media (max-width: 1300px){
	.conts_sec4 .flex_wrap{align-items: flex-end;}
	.conts_sec4 .flex_wrap .box.leftbox{padding-right: 2%;}
	.conts_sec4 .flex_wrap .box.rightbox{padding-left: 2%;}
}

@media (max-width: 991px){
	.conts_sec4 .flex_wrap{flex-wrap: wrap;}
	.conts_sec4 .flex_wrap .box{width: 100%;}
	.conts_sec4 .flex_wrap .box.leftbox{padding-right: 0;}
	.conts_sec4 .flex_wrap .box.rightbox{padding-left: 0; padding-top: 5.000rem;}
}



/* --------- Official --------- */
.conts_sec5 .item{margin: auto; /* display: flex; justify-content: center; align-items: center; */}
.conts_sec5 .item img{margin: auto;}

.rolling-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* 흐릿한 그라데이션(양옆) */
.rolling-wrap::before, .rolling-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  width: 10%;           /* 그라데이션 너비 */
  height: 100%;
  z-index: 2;
  pointer-events: none;   /* 클릭 막지 않음 */
}

.rolling-wrap::before {
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}

.rolling-wrap::after {
  right: 0;
  background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}

.rolling-list {
  display: flex;
  width: max-content;
  animation: rolling 40s linear infinite;
}

.rolling-list .item {
  margin-right: 5rem;
}

.rolling-list img {
  /* height: 60px; */
  display: block;
}

@keyframes rolling {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (min-width: 1921px){
	.conts_sec5 .container{max-width: 90%;}
}


@media (max-width: 500px){
	.rolling-list {display: flex; align-items: center; width: max-content; gap: 40px; animation: rolling 40s linear infinite;}
	.rolling-list .item {margin-right: 0; flex: 0 0 auto; width: auto; min-width: 0;}
	.conts_sec5 .item img{width: 120px; height: auto;}
}