@charset "utf-8";
/* ===================================================== */
/* MAIN-COMMON */
.body-main #skip-nav::before {content: ''; position: fixed; inset: 0; pointer-events: none; background-color: #000; z-index: 9999; animation: fade-out .8s ease-in .2s both;}



@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 1280px){
}
@media (max-width: 1024px){
}
@media (max-width: 768px){
}
@media (max-width: 576px){
}
@media (max-width: 480px){
}
/* MAIN-COMMON */
/* ===================================================== */


/* ===================================================== */
/* MAIN-VISUAL */

.main__visual {display: flex; height: 100vh;height: calc(var(--vh, 1vh) * 100); min-height:70rem; overflow: hidden; color:#fff; position: relative;--radius-vl: 200rem 200rem 0 0; transition: height 0.3s ease-in-out;}
.main__visual-wrap {display: flex; height:100%; min-width: 0; width: 100%;}

.visual-cols {width:50%; flex-shrink: 0; height:100%; display: flex; flex-direction: column; justify-content: center; transition: all 0.5s ease-in-out; overflow:hidden; position: relative;}
.visual-cols.is-active {width:75%;}
.visual-cols.is-off {width:25%;}

.visual-cols .bg {height: 100%; width:100%; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index: 1;}
.visual-cols .bg span {display: block;width:100%; height: 100%;background-repeat:no-repeat ; background-size: cover;}
.visual-cols.nth-1 .bg span{background-image:url('../images/main/visual01.png'); background-position: 0% 0%; animation: scale 50s linear infinite;}
.visual-cols.nth-2 .bg span{background-image:url('../images/main/visual02.png'); background-position: 100% 0%; animation: scale 50s linear 1s infinite;}

.visual-cols .area {height: 100%; width:50%; position: absolute; top:50%; left:0%; transform: translate(0%, -50%); z-index: 2;}
.visual-cols.nth-2 .area {left:auto; right:0;}
.visual-cols.is-off .area {width:100%;}



.visual-cols .desc {position: absolute; z-index: 1; top:50%; transform: translateY(-50%); width: 58rem; transition: all 0.5s ease-in-out; display: flex; flex-direction: column; }
.visual-cols.is-active .desc {z-index: 1;}

.visual-cols.nth-1 .desc {left:var(--inner-padding);}
.visual-cols.nth-2 .desc {right:var(--inner-padding); text-align: right; align-items: flex-end;}
.visual-cols.is-off .desc {opacity: 0;}




.visual-cols .desc .title {font-size:6rem; font-weight: 800;}
.visual-cols .desc .title em {font-weight: 100;}

.visual-cols .desc .text {font-size: 1.9rem; font-weight: 700; display: flex; flex-direction: column; opacity: 0; max-height:0; transition: all 0.5s ease-in-out;}
.visual-cols .desc .text span {display: inline-flex; align-items: center; justify-content: center; width: 7rem; height:3rem; margin:3rem 0 1rem; border-radius: 3rem; background-color: var(--color-main);}
.visual-cols.nth-2 .desc .text {align-items: flex-end;}

.visual-cols.is-off .desc .text {max-height:0; opacity: 0;}
.visual-cols.is-active .desc .text {max-height:40rem; opacity: 1;}




.visual-cols .desc .link {display: block; line-height: 1; width:8.8rem; height:0rem; font-size:0; position: relative; text-indent: -888888px; overflow: hidden;  transition: all 0.5s ease-in-out;  opacity: 0;}
.visual-cols .desc .link::before {content:''; height:2rem; width:2rem; border-radius: 50%; background-color: var(--color-main); position: absolute; left:0; top:50%; transform: translate(0, -50%); z-index: -1; transition: all 0.5s ease-in-out; opacity: 0;}

.visual-cols.nth-2 .desc .link {transform: rotate(180deg);}

.visual-cols.is-active .area:hover + .bg + .desc .link {transform: translateX(1rem);}
.visual-cols.is-active .area:hover + .bg + .desc .link::before {left:100%;transform: translate(-100%, -50%); opacity: 1;}

.visual-cols.is-active.nth-2 .area:hover + .bg + .desc .link {transform: rotate(180deg) translateX(1rem);}

.visual-cols .desc .link span {display: block; width:100%; height: 100%; background: url('../images/main/ico_arrow01.png') 50% 50% no-repeat; background-size:contain;}


.visual-cols.is-off .desc .link {height:0; opacity: 0;}
.visual-cols.is-active .desc .link {height:2rem; opacity: 1; margin-top:3rem;}


.visual-cols .link-area {position: absolute; top:0; left:0; display: block;}
.visual-cols.is-active .link-area { animation: linkscale 0.1s linear 0.5s both;}

@keyframes linkscale {
	0%   {width:0%; height:0%;}
	100% {width:100%; height:100%;}
}


.plasma {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);z-index: 10; transition: all 0.5s ease-in-out; cursor:pointer;}
.plasma.nth-1 {left:75%;}
.plasma.nth-2 {left:25%;}
.plasma.is-drag {cursor: grab;transition: all 0s ease-in-out;}
.plasma.is-active .v_center{animation: bounce 1s linear both;}

.plasma.is-active {top:95%; opacity: 0; transition:top 1s ease-in 0.5s, opacity 0.5s ease-in 1s; }


.v_center-circle {position: relative;width:15rem; height:15rem; }

.v_center-circle .bg {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:100%; height:100%; border-radius: 50%; }
.v_center-circle .bg::before {content: ""; position: absolute;top: 0;left: 0; width: 100%; height: 100%; filter: blur(4rem); background: rgba(0, 0, 0, 0.5); mix-blend-mode: color-burn; z-index: -1; pointer-events: none;}

.v_center-circle .bg::after {content: ""; position: absolute;top: 50%;left: 50%; width: 135%; height: 135%; z-index: -1; background:url('../images/main/plasma_text.png') no-repeat center/contain;animation: rotate_image 12s linear infinite;}
@keyframes rotate_image {
	0% {transform: translate(-50%, -50%) rotate(0);}
	100% {transform: translate(-50%, -50%) rotate(360deg);}
}

.v_center-circle .bg span {border-radius: 50%; display: block; overflow: hidden; width:100%; height:100%; border:1px solid #154a6b;}

.v_center-circle .bg em{display: block; width:100%; height:100%; background:url('../images/main/c_img01.png') 50% 50% no-repeat; background-size: contain; animation: scale 10s linear infinite;}
/*.plasma.is-active .v_center-circle .bg {border:2px solid rgba(230, 6, 18, 0.5); border-color:var(--color-white-a4);}*/
.plasma.is-active .v_center-circle .bg::before {filter: blur(3rem); background: rgba(255, 255, 255, 0.8);}

.v_center::before,
.v_center-circle::before,
.v_center-circle::after {content:''; display: block; width:110%; height:110%; border-radius: 50%; border:1px solid #00d6ff; position: absolute; top:-5%; left:-5%; transition: all 0.3s ease-in-out; opacity: 0.8;}


.v_center::before {animation: circle1 5s linear infinite; z-index: -1;}
.v_center::after {animation: circle1 20s linear infinite; z-index: -1;}
.v_center-circle::after {animation: circle1 8s linear infinite; z-index: -1;}



/*
.plasma.is-active .v_center::before,
.plasma.is-active .v_center::after,
.plasma.is-active .v_center-circle::after,
.plasma.is-active .v_center-circle::before {border-color: var(--color-white-a4);}
*/

@keyframes scale {
	0%   { transform:translate(0) scale(1); }
	50%  { transform:translateX(0) scale(1.5); }
	100% { transform:translate(0) scale(1); }
}



@keyframes circle1 {
	0%   { transform: scale(0.9) rotate(0); }
	50%  { transform: scale(1.3) rotate(-180deg); }
	100% { transform: scale(0.9)  rotate(-360deg); }
}

@keyframes move1 {
  0%   { transform: scale(1) translate(5rem, -1rem); }
  25%  { transform: scale(0.9) translate(8rem, 3rem); }
  50%  { transform: scale(1.1) translate(-10px, 30px); }
  75%  { transform: scale(0.9) translate(0px, 1rem); }
  100% { transform: scale(1)   translate(5rem, -1rem); }
}




.visual__link,
.visual__link-wrap {width:60rem; height:30rem; position: absolute; bottom:0; left:50%; transform: translate(-50%, 100%); border-radius:var(--radius-vl); z-index: 6; transition: all 0.3s ease-in-out;} 
.visual__link.is-active {z-index: 11;transform: translate(-50%, 8rem); }
.visual__link-wrap.is-active {transform: translate(-50%, 8rem); animation: zOut 0.5s ease-in-out 1.4s both;}


@keyframes zOut {
  0%   { }
  100%   { width:200rem; height:100rem;  opacity: 0; }
}



.visual__link-wrap::before {content:'';filter: blur(4rem); background: rgba(0, 0, 0, 0.7); height: 100%; width:100%; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); border-radius:var(--radius-vl); z-index: -1;}

.visual__link-wrap .bg {height: 100%; width:100%; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); border-radius:var(--radius-vl); overflow: hidden; }
.visual__link-wrap .bg::before{content:''; width:100%; height:100%; position: absolute; top:0; left:0; background-image: linear-gradient(to top, transparent, #010d24); z-index: 2; opacity: 0.7; border-radius:var(--radius-vl); overflow: hidden;}
.visual__link-wrap .bg span {display: block;width:100%; height: 100%;background-image:url('../images/main/b_img01.png'); background-position: 50% 0%; animation: move2 10s linear infinite;}
.visual__link-wrap .bg video {
position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;}

@keyframes move2 {
	0%   { transform: scale(1) translate(-2rem, -2rem); }
	25%   { transform: scale(1.1) translate(2rem, -2rem); }
	50%   { transform: scale(1.3) translate(-2rem, 2rem); }
	75%   { transform: scale(1.1) translate(2rem, 2rem); }
	100%   { transform: scale(1) translate(-2rem, -2rem); }
}


.visual__link-wrap .text {position: relative; z-index: 1; font-weight: 800; text-align: center; padding:10rem 10rem; transition: all 0.5s ease-in-out; transition-delay: 0.3s; opacity: 0;}
.visual__link-wrap.is-active .text {padding-top:5rem; opacity: 1;}






.main__custom {position: relative; z-index: 5;}
.main__custom-wrap{position: absolute; width:100%; bottom:0; left:0; display: flex; height:7.4rem; align-items: center; border-top:1px solid var(--color-white-a4); transition: all 0.5s ease-in-out;}

.main__custom.is-active .main__custom-wrap {opacity: 0; transform: translateY(100%);}


.main__custom-wrap .item {width:50%; height:100%;}
.main__custom-wrap .item a {display: flex; align-items: center; gap:2rem; height:100%; transition: all 0.3s ease-in-out; position: relative;}
.main__custom-wrap .item a::before {content:''; display: block; height: 100%; position: absolute; top:50%; transform: translate(0, calc(-50% - 1px)); transition: all 0.3s ease-in-out; background-color: rgba(230, 6, 18, 0.7); z-index: -1; width:0;}

.main__custom-wrap .item.nth-1 a{padding:0 2.8rem 0 var(--inner-padding);}
.main__custom-wrap .item.nth-1 a::before {right:0;}
.main__custom-wrap .item.nth-1 .txt {margin-left:auto;}
.main__custom-wrap .item.nth-2 a{padding:0 var(--inner-padding) 0 2.8rem;}
.main__custom-wrap .item.nth-2 a::before {left:0;}
.main__custom-wrap .item.nth-2 .txt {margin-right:auto;}

.main__custom-wrap .item .txt {font-size:2.5rem; color: #fff; font-weight: 800; text-transform: uppercase;}
.main__custom-wrap .item .ico {opacity: 0.4;  transition: all 0.3s ease-in-out;}
.main__custom-wrap .item .arrow {opacity: 0; transform: translate(20rem, 0) rotate(180deg); transition: all 0.3s ease-in-out;}
.main__custom-wrap .item.nth-2 .arrow {transform: translate(-20rem, 0);}

.main__custom-wrap .item a:hover::before {width:100%;}
.main__custom-wrap .item a:hover .ico {opacity: 1;}
.main__custom-wrap .item a:hover .arrow {opacity: 1; transform: translate(0rem, 0) rotate(180deg);}
.main__custom-wrap .item.nth-2 a:hover .arrow {transform: translate(0rem, 0);}



@media (max-width: 1280px){
	.visual-cols .desc .title {font-size:5rem;}
}
@media (max-width: 1024px){
	.main__visual {--radius-vl: 25rem 25rem 0 0;}
	.visual-cols .area { width:75%;}
	
	.visual-cols .desc {width: 50rem;}
	
	.visual-cols.nth-1.is-active .desc {left:50%; transform: translate(-50%, -50%);}
	.visual-cols.nth-2.is-active .desc {right:50%; transform: translate(50%, -50%);}
	
	.visual-cols .desc .title {font-size:4.6rem; max-width:38rem;}
	
	.v_center-circle {width:13rem; height:13rem; }

	.visual__link,
	.visual__link-wrap {width:50rem; height:25rem;} 
}


@media (max-width: 768px){
	.main__visual {min-height:80rem;}
	.main__visual-wrap {flex-direction: column;}

	.visual-cols {width:100%; height:50%; display: flex; flex-direction: column; }
	.visual-cols.is-active {width:100%; height:75%;}
	.visual-cols.is-off {width:100%; height:25%}

	.visual-cols.nth-1 .bg span{ background-position: 50% 50%;}
	.visual-cols.nth-2 .bg span{ background-position: 50% 50%;}

	.visual-cols .area {height: 100%; width:100%;}

	.visual-cols.nth-1 .desc {transform: translateY(0%);}
	.visual-cols.nth-2 .desc {transform: translateY(-100%);}

	.visual-cols.is-active .desc .link::before {left:100%;transform: translate(-100%, -50%); opacity: 1;}

	.plasma.nth-1 {left:50%; top:75%;}
	.plasma.nth-2 {left:50%; top:25%;}
}
@media (max-width: 576px){

	.visual-cols .desc {width: calc(100% - var(--inner-padding) * 2); }
	.visual-cols .desc .title {text-align: center; max-width: none; width: 100%; transition: all 0.5s ease-in-out;}

	.visual-cols.nth-1.is-active .desc .title {text-align: left;}
	.visual-cols.nth-2.is-active .desc .title {text-align: right;}
	

	.main__custom-wrap{height:6rem;}

	.main__custom-wrap .item a {gap:1rem;}
	.main__custom-wrap .item .txt {font-size:2rem;}
	.main__custom-wrap .item .ico {width:3.6rem;}
	.main__custom-wrap .item .arrow {display: none;}

}
@media (max-width: 480px){
}
/* MAIN-VISUAL */
/* ===================================================== */


/*20250612 추가
.visual-copy {overflow: hidden; margin-bottom:-1rem; width:100%; position: absolute; z-index: 5; bottom:0rem; transition: all 0.5s ease-in-out;}
.visual-copy.aos-animate {bottom:10rem;}
.visual-copy .item { font-size:11rem; color:rgba(255, 255, 255, 1); font-weight: 100; text-transform: uppercase; line-height:1; }
.visual-copy .item::before {content: attr(data-mtext) attr(data-mtext); display: inline-block; white-space: pre; animation: c_marquee 25s linear infinite;}
.visual-copy.is-active .item::before {-webkit-animation-play-state: paused; animation-play-state: paused;}
@keyframes c_marquee {
	0% {transform: translateX(0%);}
	100% {transform: translateX(-50%);}
}
.visual-copy.is-active {opacity: 0;}

@media (max-width: 768px) {
	.visual{--color-main-a5:rgba(230, 6, 18, 5);}
	.visual-copy,
	.visual-copy.aos-animate {top:50%; bottom:auto; left:50%; transform: translate(-50%, -50%); margin:0; background-color:var(--color-black-a5) ; padding:2rem 0;}
	.visual-copy .item { font-size:4rem; color:rgba(255, 255, 255, 0.8);}
	.visual-copy .item::before {animation-duration: 15s;}
}
*/

/* 20250710 수정 */
.visual-copy {position: absolute; z-index: 1; width:calc(50% - var(--inner-padding)); top:calc(var(--header-height) + 6rem); left:50%; transform: translate(-50%, 0);  transition: all 0.3s ease-in-out; }
.visual-copy::before {content:''; display: block; width:100%; height:100%; background-color: var(--color-black-a2); position: absolute; top:0; left:0;filter: blur(3rem); z-index: -1;}

.visual-copy .item { font-size:4rem; color:rgba(255, 255, 255, 1); font-weight: 700; text-transform: uppercase; line-height:1.3; position: relative; letter-spacing: -0.03em; animation: clip-center 1s linear 0.5s both; text-align: center; }
.visual-copy .item span{color:#0dc0ea;}

.visual-copy.is-active {opacity: 0; z-index: -1;}


@media (max-width: 1024px) {
	.visual-copy {top:calc(var(--header-height) + 3rem);}
	.visual-copy .item {font-size:3.2rem; line-height: 1.2;}
}

@media (max-width: 768px) {
	.visual-copy {width:100%; top:calc(var(--header-height) + 0rem); margin:0; padding:1rem var(--inner-padding); background-color: rgba(0, 0, 0, 0.5);}

	.visual-copy .item {font-size:2.4rem; font-weight: 700; line-height: 1.2; text-align: center; color:rgba(255, 255, 255, 1); animation: clip-center 1s linear 0.5s both; }
}