.visual {position: relative; width: 100%; height: calc(100vh - 226px); margin-top: 80px; background: url(./../img/bg.png)no-repeat right 50%; background-size: cover; background-color: var(--wt); overflow: hidden;}
.visual .container {position: relative; display: flex; align-items: center; justify-content: flex-end; height: 100%; overflow: hidden;}
.visual .visual-txt {position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 2;}
.visual .visual-txt .tit {margin-bottom: 16px; font-family: 'SUIT', sans-serif; font-size: 80px; font-weight: 700; line-height: 110%; color: var(--black);}
.visual .visual-txt .sub {font-size: 24px; font-weight: 700; line-height: 116%; color: var(--black);}


/* .visual-slide {position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: flex; align-items: center; justify-content: flex-end; width: 840px; height: auto;}
.icon-cards {position: absolute; align-items: center; perspective: 1200px;}
.icon-cards__content {display: flex; align-items: center; justify-content: flex-end; transform-origin: center; transform-style: preserve-3d; transition: transform 0.5s;}

.visual-slide .icon-cards__item {position: relative; min-width: 280px; width: 280px; height: 280px; background: var(--wt); border-radius: 8px; padding: 32px 24px 24px; box-sizing: border-box; border: 1px solid var(--gray_d0); -webkit-user-drag: none;}
.visual-slide .icon-cards__item .tit {margin-bottom: 24px; font-size: 28px; font-weight: 700; color: var(--black);}
.visual-slide .icon-cards__item .sub {margin-bottom: 57px; font-size: 14px; font-weight: 500; line-height: 150%;}
.visual-slide .icon-cards__item .plus {position: absolute; bottom: 24px; right: 24px; width: 48px; height: 48px; background: url(./../img/plus2.svg)no-repeat 50% 50%; background-size: cover;}
.icon-cards {}
.visual .img-box {position: absolute; top: 50%; right: -137px; transform: translateY(-50%); width: 1127px; height: auto;}

.step-animation {animation: carousel 8s infinite steps(1) forwards;}

.visual-slide .icon-cards {display: flex; align-items: center;}
.visual-slide .icon-cards__item:first-child {transform: translateZ(-43vw) rotateY(-43deg); backface-visibility: visible;}
.visual-slide .icon-cards__item:nth-child(2) {transform: translateZ(-35vw) rotateY(0); backface-visibility: visible;}
.visual-slide .icon-cards__item:nth-child(3) {transform: translateZ(-44vw) rotateY(-320deg); backface-visibility: visible;}
.visual-slide .icon-cards__item {transform: translateZ(-44vw) rotateY(-320deg); backface-visibility: visible;} */

/* Carousel animation */
/* @keyframes carousel {
	0%,  17.5%  { transform: translateZ(-35vw) rotateY(0); }
	27.5%, 45%  { transform: translateZ(-35vw) rotateY(-120deg); }
	55%, 72.5%  { transform: translateZ(-35vw) rotateY(-240deg); }
	82.5%, 100% { transform: translateZ(-35vw) rotateY(-360deg); }
} */

.box2 > li {position: absolute; top: 50%; left: 50%; opacity: 1; transition-property: all; transition-duration: .3s; transition-timing-function: ease-in-out; color: #fff; user-select: none;}

.box2 {position: relative; width: 534px; height: 556px; /* margin: 150px auto; */ -webkit-transform: rotateY(0deg) rotateX(0deg); -webkit-transform-style: preserve-3d; -webkit-perspective: 1200px; background: url(./../img/earth.png)no-repeat 50% 50%; background-size: cover;}

.box2 > li > div:not(.li_dim) {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 75%; height: 75%; margin: 0 auto; padding: 32px 24px 24px; box-sizing: border-box; border-radius: 8px; background: var(--wt);}

.box2 > li.active > div:not(.li_dim) {border: 2px solid var(--pr);}

.box-area {position: relative; z-index: 3; padding-right: 54px;}
.li_dim {position: absolute; top: 50%; left: 52%; transform: translate(-50%, -50%); width: 100%; height: 100%; padding: 32px 24px 24px; background: transparent; opacity: 0; z-index: 9999; user-select: none;}
.li_dim a {display: block; width: 100%; height: 100%;}

.box2 > li > div > img {width:100%; height:100%;}

.box2 > li.hover div:not(.li_dim) {background: var(--pr);}
.box2 > li.hover .tit {color: var(--wt);}
.box2 > li.hover .sub {color: var(--wt);}

.box2 li .tit {margin-bottom: 24px; font-size: 28px; font-weight: 700; color: var(--black);}
.box2 li .sub {margin-bottom: 57px; font-size: 12px; font-weight: 500; line-height: 150%; color: var(--black);}
.box2 li .plus {position: absolute; bottom: 24px; right: 24px; width: 30px; height: 30px;}

/*  */
.visual .img-box {position: absolute; top: 0; right: -330px;}

.flying-icon {position: absolute; width: 50px !important; height: auto; pointer-events: none; /* 마우스 이벤트 방지 */ transition: opacity .5s ease-in-out; z-index: 1; animation: rotate 20s linear backwards infinite; transition: all .55s;}
.flying-icon img {animation: rotate2_2 2s linear infinite;}
.flying-icon {filter: blur(2px);}
@keyframes rotate {
	0% {transform: translateY(0) translateX(0)}
	30%,40% {transform: translateY(100vh) translateX(-50vh)}
	100% {transform: translateY(-100vh) translateX(-400vh)}
}

.flying-icon2 {position: absolute; width: 50px !important; height: auto; pointer-events: none; /* 마우스 이벤트 방지 */ transition: opacity .5s ease-in-out; z-index: 1; animation: rotate1 40s 1s linear backwards infinite; transition: all .55s;}
.flying-icon2 img {animation: rotate2_2 2s linear infinite;}
@keyframes rotate1 {
	0% {transform: translateY(0) translateX(0)}
	100% {transform: translateY(-100vh) translateX(-400vh)}
}


.flying-icon3 {position: absolute; width: 50px !important; height: auto; pointer-events: none; /* 마우스 이벤트 방지 */ transition: opacity .5s ease-in-out; z-index: 1; animation: rotate2 15s 1s linear both; transition: all 3s;}
.flying-icon3 img {animation: rotate2_2 2s linear infinite;}
@keyframes rotate2 {
	0% {transform: translateY(0) translateX(0)}
	100% {transform: translateY(100vh) translateX(-400vh)}
}
@keyframes rotate2_2 {
	0% {transform: rotate(0);}
	100% {transform:  rotate(360deg);}
}

.box-area {animation: kong 2s 4s linear alternate infinite;}
@keyframes kong {
	0% {top: 0;}
	50% {top: 10px;}
	100% {top: 0;}
}