@charset "utf-8";

/*
* File       : layout.css
* Author     : B-WORKER
* Dependency : css/reset.css
*      
 * SUMMARY:
 * 1) MAIN animation
 * 2) MAIN CONTENTS
*/

/* **************************************** *
 * 사이트 시작시 커버
 * **************************************** */
.main-cover{position:fixed; opacity:1; visibility:visible; top:0; left:0; z-index:999; width:100%; height:100%; background:#121212; transition:all 1.2s ease 0s;}
.motion-on .main-cover{opacity:0; visibility:hidden;}



/* **************************************** *
 * Main animation set
 * **************************************** */
[data-txt-motion]{}
[data-txt-motion="hidden"]{overflow:hidden;}
[data-txt-motion="hidden"] > span{display:block; opacity:0;}

.swiper-slide-active [data-txt-motion="hidden"] > span{animation:text_hidden_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="left"]{animation:text_left_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="right"]{animation:text_right_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="up"]{animation:text_up_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="down"]{animation:text_down_motion 1.6s ease 0.1s forwards;}

.main-visual__text [data-txt-motion="hidden"]{opacity: 1;}
.main-visual__bg i{transform: scale(1.2); transition:transform 15s ease;}
.swiper-slide-active .main-visual__bg i{transform: scale(1);}

@keyframes text_hidden_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateY(0);}
}
@keyframes text_left_motion {
 from{opacity:0; transform:translateX(70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_right_motion {
 from{opacity:0; transform:translateX(-70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_up_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateX(0);}    
}
@keyframes text_down_motion {
 from{opacity:0; transform:translateY(-70rem);}
 to{opacity:1; transform:translateX(0);}
}

/* **************************************** *
 * Site custom
 * **************************************** */

/* main visual */
.main-visual{height:var(--height-full); position: relative;}
.main-visual-container,
.main-visual-wrapper,
.main-visual .swiper-slide{height:100% !important;}
.main-visual .swiper-slide::before{content:'';position:absolute;background-position:50% 50%;transition:all 1s ease;transform:scale(1);inset:0;background-repeat:no-repeat;background-size: cover;}
.main-visual .swiper-slide .wrap{width:100%;}
.main-visual__bg{position:absolute; top:0; left:0; width:100%; height:100%;}
.main-visual__bg i{display:block; height:100%; background-position:50% 50%; background-size: cover;}
.main-visual__video{ position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; }
.main-visual__btn{position:relative;width:30rem;height:30rem;cursor:pointer;display: flex;align-items: center;margin: 0 25rem;font-size: 16rem;color: #fff;font-weight: 600;}
.main-visual__btn::after{content:"";display:block;min-width: 30rem;height: 30rem;background:url(../img/common/arrow-basic_w.svg) no-repeat 50% 50%;background-size: 8rem;}
.main-visual__btn > i{}
.main-visual__btn.button-prev{flex-direction: row-reverse;}
.main-visual__controls{position:absolute;top: 42vh;left:0;z-index:999;width:100%;justify-content: flex-start;}
.main-visual__controls > div{ width: 100%; justify-content: center;}
.main-visual__count{display:flex; align-items:center; margin:0 50rem; font-size:17rem; color:#fff;}
.main-visual__count i{display:flex; align-items:center; position:relative;}
.main-visual__count em{}
.main-visual__count i::after{content:""; display:block; width:3rem; height:3rem; margin:0 10rem; background:#fff;}

.main-visual .swiper-pagination{display:flex; gap:18rem;}
.main-visual .swiper-pagination-bullet{background: var(--w);}
.main-visual .swiper-pagination-bullet{width: 30rem;height: 30rem;background: transparent; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center;}
.main-visual .swiper-pagination-bullet::before{content: ""; width: 8rem; height: 8rem; border-radius: 30rem; background-color: var(--w);}
.main-visual .swiper-pagination-bullet-active{border-color: var(--w);}

.main-visual__text{position:absolute; top:48vh; width:100%;  color:#fff;}
.main-visual__text h2{overflow:hidden;line-height: 1.3;font-size: 70rem;letter-spacing:-0.5rem;opacity: 0;}
.main-visual__text h2 span{font-weight:700; word-break: keep-all;}

.main-visual__text p{font-weight:700;font-size:23rem;opacity: 0;}
.main-visual__text h2 + p{margin-top:17rem;} 
.main-visual__text p + h2{margin-top: 17rem;}
.main-visual__bar{position:absolute; bottom:0; z-index:50; width:100%; height:10rem; background:rgba(255,255,255,0.3);}
.main-visual__bar > i{position:absolute; width:0%; height:100%; background:var(--c-01);}
.main-visual .swiper-slide-active .main-visual__bar > i{ width: 100%; transition: var(--progress-duration) linear; }

.main-visual__play{position:absolute; top:50%; left:0; z-index:99999; background:#fff; font-size:30rem; cursor:pointer;}
.main-visual__play:not(.on){opacity:0; visibility:hidden;}
.main-visual__play.on{opacity:1; visibility:visible;}

.srcoll-dwon__wrap{position:absolute; bottom:90rem; left: 0; z-index:30; width: 100%;}
a.scroll-down{ font-family: var(--lang-ko); font-size: 13rem; padding: 8rem 16rem;letter-spacing: 0.13rem; color: var(--w); line-height: 22rem;display: inline-flex; align-items: center; gap: 10rem; border:1px solid var(--op-w20); border-radius: 90rem; background-color: var(--op-b10);}

@media (max-width:1200px){

    .main-visual__text h2{font-size: 64rem;}
}

@media (max-width:1023px){
	.main-visual{min-height: 600rem;}
    .main-visual__text h2{font-size: 52rem;}
    .main-visual .swiper-pagination{gap: 10rem;}
    .main-visual .swiper-pagination-bullet{width: 26rem; height: 26rem;}
    .main-visual .swiper-pagination-bullet::before{width: 6rem; height: 6rem;}
    .main-visual__text p{font-size: 16rem;}
}

@media (max-width:860px){
	
}

@media (max-width:540px){
    .main-visual .swiper-pagination-bullet{width: 16rem; height: 16rem;}
    .main-visual__text h2{font-size: 32rem;}
    .main-visual__text p{font-size: 15rem;}
    .srcoll-dwon__wrap{bottom: 40rem;}
    a.scroll-down{font-size: 12rem; line-height: 16rem; padding: 8rem 16rem;}
	a.scroll-down svg{width: 10rem;}

}


.product{background-color: #121212;}
.product,
.product-wrap{height: var(--height-full); position: relative;}
.product-wrap{z-index: 2;}
.product-wrap > div{width: 20%;transition: all .5s;height: 100%;padding: 30rem;position: relative;display: flex;background-color: transparent;}
.product-wrap > div *{color: var(--w); }
.product-part__text--wrap{position: absolute;  padding: 30rem; overflow:hidden;z-index: 1;
    display: flex;flex-direction: column;justify-content: flex-end;transition: none;width: 100%; height: 100%; bottom:0; left: 0;}
.product-wrap > div::before{content: ""; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); position: absolute; left: 0; bottom: 0; z-index: 1;}
.product-part__text{z-index:2;display:flex;flex-direction:column;justify-content: flex-start;height: 60rem;overflow: hidden; transition: all .4s;}
.product-part__text ul{margin-top: 40rem; transition: transform .45s ease, opacity .45s ease;}
.product-part__text ul li{font-family: var(--lang-en);}
.product-part.on .product-part__reveal > ul{opacity:1;transform:translateY(0)}

.product-part__text [data-list="dot"] > *::before{background-color: var(--c-01);}
.product-part__text strong{font-size: 23rem; font-family: var(--lang-ko);}
.product-part__text p{margin-top: 12rem; opacity: 0; transition: all .3s;}
.product-part__bg{position: absolute;  display: block; width: 100%; height: 100%; left: 0; top: 0; background-size: cover; transition: all .4s ease;}
.product-part__bg.bg01{background-image: url(../img/main/main-product01.jpg); background-repeat: no-repeat; background-position: top;background-size: cover;background-color: #000;}
.product-part__bg.bg01::before{content: ""; position: absolute; width: 100%; height: 100%;  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 52.89%, #000 100%); left: 0; top: 0;}
.product-part__bg.bg02{background-image: url(../img/main/main-product02.jpg); background-repeat: no-repeat;  background-position: 42% 50%;}
.product-part__bg.bg02::before{content: ""; position: absolute; width: 100%; height: 100%;background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 52.89%, #000 100%); left: 0; top: 0;}
.product-part__bg.bg03{background-image: url(../img/main/main-product03.jpg); background-repeat: no-repeat;  background-position: 58% 50%;}
.product-part__bg.bg03::before{content: ""; position: absolute; width: 100%; height: 100%;background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 52.89%, rgba(0, 0, 0, 0.68) 100%) no-repeat; left: 0; top: 0;}
.product-part__bg.bg04{background-image: url(../img/main/main-product04.jpg); background-repeat: no-repeat;  background-position: 62% 50%;}
.product-part__bg.bg04::before{content: ""; position: absolute; width: 100%; height: 100%;background: linear-gradient(180deg, rgba(104, 54, 11, 0.00) 52.89%, rgba(104, 54, 11, 0.41) 100%) no-repeat; left: 0; top: 0;}
.product-part__bg.bg05{background-image: url(../img/main/main-product05.jpg);  background-repeat: no-repeat; ; background-position: 68% 50%;}
.product-part__bg.bg05::before{content: ""; position: absolute; width: 100%; height: 100%;background: linear-gradient(180deg, rgba(35, 25, 16, 0.00) 52.89%, rgba(35, 25, 16, 0.81) 100%) no-repeat; left: 0; top: 0;}
.product-part__bg.bg06{background-image: url(../img/main/main-visual04.jpg);  background-repeat: no-repeat; ; background-position: 68% 50%;}
.product-part__bg.bg06::before{content: ""; position: absolute; width: 100%; height: 100%;background: linear-gradient(180deg, rgba(35, 25, 16, 0.00) 52.89%, rgba(35, 25, 16, 0.81) 100%) no-repeat; left: 0; top: 0;}

.product-bg{z-index: -1; width: 100%; }
.product-bg, .product-bg > i{position: absolute; display: block; height: 100%; left: 0; top: 0; height: 100%; transition: all .7s }

.product-bg img{width: 100%; height: 100%; object-fit: cover;} 
.product-bg__item{ opacity: 0; left: 0;  width: 0;}

/* 2026.01.28 수정 */
.product {height: auto; padding-top: var(--gap150); background: #031425;}
.product-wrap > div {min-width: 160rem; height: 600rem; transition: var(--trans-01);}
.product-wrap > div:not(:last-child) .product-part__text {word-break: keep-all;}
.product-part__text strong {transition: var(--trans-01);}
.product-part__text p {transform: translateY(20rem);}
.product-part__list {opacity: 0; transform: translateY(20rem);}
.product-wrap {gap:20rem; height: auto;}
.product-part__text ul {margin-top: 20rem;}
.product-part__text .btn-wrap {opacity: 0; position: absolute; right: 30rem; bottom: 30rem; transition: var(--trans-01);}
.product-part__bg::before {display: none;}
.product-part__bg::after {position: absolute; left:0; bottom:0; content:''; width: 100%; height: 50%; background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 100%);}
.product-wrap:has(div:hover) > div:is(:not(:hover)) .product-part__text strong {font-size: 18rem;}
.product-wrap > div:nth-child(5) .product-part__text P {padding-right: 100rem;}

@media (prefers-reduced-motion: reduce){
  .product-wrap > div,
  .product-part__text,
  .product-part__text ul{transition: none;}
}

/* 2026.01.28 수정 */
@media (hover: hover) and (pointer: fine){
    .product-wrap > div:hover {width: 200%;}
    .product-wrap > div:hover .product-part__text {height: 39%;}
    .product-wrap > div:nth-child(1):hover .product-part__text {height: 44%;}
    .product-wrap > div:nth-child(2):hover .product-part__text {height: 50%;}
    .product-wrap > div:nth-child(5):hover .product-part__text {height: 14%;}
    .product-wrap > div:nth-child(6):hover .product-part__text {height: 27%;}
    .product-wrap > div:hover p {opacity: 1; transform: translateY(0rem); transition-delay: .1s;}
    .product-wrap > div:hover .product-part__list {opacity: 1; transform: translateY(0); transition-delay: .1s;}
    .product-wrap > div:hover .product-part__text .btn-wrap  {opacity: 1;}
}

@media (max-width:1480px){
    @media (hover: hover) and (pointer: fine){
        .product-wrap > div:nth-child(5):hover .product-part__text {height: 17%;}
    }
}

@media (max-width:1480px){
    .product-part.on{width: 40%;}
    .product-part__text ul {padding-right: 100rem;}
    .product-wrap > div:nth-child(5) .product-part__text p {padding-right: 100rem;}

    @media (hover: hover) and (pointer: fine){
        .product-wrap > div:hover .product-part__text {height:44%;}
        .product-wrap > div:nth-child(1):hover .product-part__text {height:44%;}
        .product-wrap > div:nth-child(2):hover .product-part__text {height: 55%;}
        .product-wrap > div:nth-child(5):hover .product-part__text {height:18%;}
        .product-wrap > div:nth-child(6):hover .product-part__text {height: 32%; word-break: keep-all;}
    }
}
@media (min-width:1201px){
    .product-bg:has(.on){z-index: 0;}
    .product-bg__item.on{opacity: 1; z-index: 1; width: 100%; }
    .product-part.remove .product-part__bg{opacity: 0;}
    .product-part.remove:not(.on) .product-part__text{opacity: 0;}
    
    .product-part.on{background-color:rgba(0, 0, 1, 0.29); backdrop-filter: blur(14rem); width: 35%; }
    .product-part.on#part03,
    .product-part.on#part04{background-color:rgba(126, 126, 133, 0.29);}
    .product-part.on .product-part__text{height: auto;}
    .product-part.on .product-part__text p{opacity: 1;}

}
/* @media all and (max-width:1200px){
	
    .product-wrap{flex-wrap: wrap;}
    .product-wrap > div{width: 50%;padding: 30rem;min-height: 350rem;flex-direction: column-reverse;}
    .product, .product-wrap{height: auto;}
    .product-part{padding: 100rem 0;}
    .product-part__text--wrap{position: relative; padding: 0;}
    .product-part__text{height: auto;}
    .product-part__text p{opacity: 1;}
    
    .product-wrap > div::before{background: linear-gradient(180deg, rgb(0 0 0 / 36%) 52.89%, #000 100%);}
    .product-part__text ul{opacity:  0; position: absolute; left: 0; bottom: 0; transition: all .5s;}

    .product-part__title{transition: all .5s;}
    
    .product-part.on{width: 50%; position: relative;}
    .product-part.on .product-part__text ul{opacity: 1;}
    .product-part.on .product-part__title{opacity: 0;}
    .product-part.on .product-wrap > div::before{background: rgba(0, 0, 0, 0.88);}
} */
 @media all and (max-width:1200px){
    .product-wrap > div {min-width: 120rem; word-break: break-all;}
    .product-part__text--wrap {padding: 20rem;}
    .product-wrap > div:is(:not(:hover)) .product-part__text strong {font-size: 18rem;}
    .product-part__text {height: 63rem;}
    .product-part__text .btn-wrap {right: 20rem; bottom: 20rem;}

     @media (hover: hover) and (pointer: fine){
        .product-wrap > div:hover .product-part__text {height:42%;}
        .product-wrap > div:nth-child(5):hover .product-part__text {height: 17%;}
        .product-wrap > div:nth-child(6):hover .product-part__text {height:31%;}
     }
 }

@media all and (max-width:1023px){
	.product-wrap {gap:12rem;}
    .product-wrap > div {height: 500rem;}
    .product-part__bg::after {height: 100%; background: var(--op-b30);}
    .product-wrap > div:nth-child(5) .product-part__text p {padding-right: 0;}


    @media (hover: hover) and (pointer: fine){
        .product-wrap > div:hover .product-part__text {height:100% !important;}
        .product-part__text--wrap {padding:30rem 20rem;}
        .product-part__text ul {padding-right: 0;}
    }
}
@media (max-width:860px){

    .product-part.on .product-part__title{opacity: 1;}
    .product-part__text ul{opacity:  1; position: relative;}
    .product-part__text strong{font-size: 18rem;}
    .product-part.on{width: 100%; position: relative;}

    .product-wrap {flex-direction: column; gap: 20rem;}
    .product-wrap > div {width: 100%; height: auto; height: 300rem; padding: 30rem;}
    .product-part__text--wrap {position: relative; padding: 0;}
    .product-part__text {height: 100%;}
    .product-part__text strong {font-size: 23rem !important;}
    .product-wrap > div:hover  {width: 100%;}
    .product-part__text p {opacity: 1; transform: none;}
    .product-part__text ul {opacity: 1; transform: none;}
    .product-part__text .btn-wrap {opacity: 1; right: 0; bottom: 0;}
}
@media (max-width: 540px){

    .product-wrap > div{width: 100%; height: auto;}
    .product-part__text{min-height: 125rem; gap: 28rem;}
    .product-part__text p{margin-top: 7rem;}
    .product-wrap > div{padding: 32rem 22rem 22rem;}
    .product-part__bg.bg02::before,.product-part__bg.bg04::before{background: linear-gradient(180deg, rgb(0 0 0 / 36%) 52.89%, #000 100%);}

    .product-part__text ul{margin-top: 0;}
    .product-part__text strong {font-size: 18rem !important;}

    .main-visual__text h2 + p{margin-top:14rem;} 
    .main-visual__text p + h2{margin-top: 14rem;}
}


.main-scrollWrap{background-color: #031425; position: relative;}
.global{background-color: #031425;padding-top:347rem;/* padding-bottom: 280rem; */position: relative;}
.global-title{position: absolute; left: 0; top: -147rem; z-index: 3;}
.global-title h3{color: var(--w);}
.global-count{gap: 28rem; margin-top: 46rem;}
.global-count,.global-count dl{display: flex; align-items: center; text-shadow: 5rem 5rem 20rem #000;}
.global-count > i{width: 1px; height: 27rem; border-right: 1px solid var(--op-w30); display: block;}
.global-count dt{color: var(--c-01); margin-right: 10rem;}
.global-count dd span{color: var(--w); font-size: 40rem; font-weight: 600; position: relative;}
.global-count dd i{font-size: 30rem;font-weight: 600;color: var(--w);position: relative;top: -20rem;margin-left: 6rem;}

.global-map{position: relative;}
.global-map > img{opacity: 0.9;}
.global-map .global-map__wrap{position: absolute; top: 50%; left:0; transform: translateY(-50%); z-index: 2; }
.global-map__area{position: absolute;}
.global-map__area .global-map__btn {border-radius: 90rem; color: var(--w); border:2px solid var(--c-01); display: inline-flex; padding: 10rem 30rem; background-color: rgba(17,17,17,0.75); transition: all .4s; }

@media (hover: hover) and (pointer: fine){

    .global-map__area button:hover{background-color: var(--c-01); box-shadow: 20px 14px 23px 0 rgba(0, 0, 0, 0.65);}

}
/* .global-map__area--asia{left: 427rem; top: 226rem;}
.global-map__area--europe{top: 168rem; left: 210rem;}
.global-map__area--northamerica{top: 195rem; right: 252rem;}
.global-map__area--africa{left: 120rem; top: 400rem;}
.global-map__area--oceania{left: 528rem; top: 502rem; }
.global-map__area--southAmerica{top: 465rem; right: 186rem;}
.global-map__area--middleEast{left: 250rem; top: 300rem;} */
.global-map__area--asia{left: 26%; top: 33%;}
.global-map__area--europe{top: 24%; left: 13%;}
.global-map__area--northamerica{top: 27%; right: 17%;}
.global-map__area--africa{left: 7%; top: 63%;}
.global-map__area--oceania{left: 34%; top: 74%; }
.global-map__area--southAmerica{top: 62%; right: 11%;}
.global-map__area--middleEast{left: 22%; top: 46%;}

.global-map__hover{position: absolute; width: 292rem;padding: 26rem;display: flex;flex-direction: column;gap: 10rem;border-radius: 16rem;border:1px solid var(--op-w20);background-color: var(--op-w10);box-shadow: 20px 20px 33px 0 rgba(0, 0, 0, 0.85);backdrop-filter: blur(7rem);left: 110%;top: -70%; z-index: 10;}
.global-map__hover li{background-color: var(--w); height: 80rem; border-radius: 10rem; display: flex; align-items: center; justify-content: center;}
.global-map__hover li img{max-width: 80%; max-height: 80%;}

.global-map > img,
.global-map, .global-map .global-map__wrap{width: 88%;}
.global-map .global-map__wrap img{max-width: 100%;}

.global-company {position: absolute; right: 0; top: 0; display: flex; flex-direction: column; width: 12%; height: 90%;}
.global-company::before,
.global-company::after {position: absolute; left:0; content:''; width: 100%; height: 100rem; background: linear-gradient(0deg,rgba(3, 20, 37, 1) 0%, rgba(3, 20, 37, 0) 100%);}
.global-company::before {z-index: 1; top: 0; transform: scaleY(-1);}
.global-company::after {bottom: 0;}
.global-company .rolling-img__box {flex-direction: column;animation:rolling_img_v 40s linear infinite;}
.global-company .rolling-img__box li {display: inline-flex; align-items: center; justify-content: center; width: 100%; height:90rem; margin:5rem 0; border-radius: 5rem; border: 1px solid rgba(255, 255, 255, .1); background: var(--w);}
.global-company .rolling-img__box li img {max-width: 100%; max-height: 100%; margin: 0; border-radius: 0;}


@media all and (max-width:1200px){

    .global-map__area button{padding: 9rem 22rem 6rem;font-size: 17rem;}

	.global-map__area--asia {left: 30.4%;top: 30.7%;}
    .global-map__area--europe {left: 12.3%;top: 23%;}
    .global-map__area--northamerica {right: 13.5%;top: 27.5%;}
    .global-map__area--africa {left: 7%;top: 62.7%;}
    .global-map__area--oceania {left: 33%;top: 72.7%;}
    .global-map__area--southAmerica {right: 7.3%;top: 70.5%;}
    .global-map__area--middleEast {left: 17.3%;top: 42%;}

}
@media all and (max-width:1023px){

    .global {padding-top: 260rem;}
	.global-map__hover{padding: 16rem; width: 200rem;}
    .global-map__hover li{height: 66rem;}
    .global-map__hover li img{max-height: 60%;}
    .global-map__area--northamerica .global-map__hover{left: 0; top: 120%;}

    .global-map > img,
    .global-map, .global-map .global-map__wrap {width: 100%;}
    .global-company{position: relative; right: auto; top: auto; flex-direction: row; width: 100%; height: auto;}
    .global-company::before,
    .global-company::after {display: none;}
    .global-company .rolling-img__box {flex-direction: row; animation: rolling_img 40s linear infinite;}
    .global-company .rolling-img__box li {width: 160rem; margin: 0 5rem;}
}
@media (max-width:860px){

    .global-map__area .global-map__btn {font-size: 14rem; padding: 6rem 19rem 4rem;}
    .global-map__hover li{height: 40rem; border-radius: 3rem;}
    .global-map__hover{padding: 12rem; gap: 4rem; width: 140rem;}
    .global-company .rolling-img__box li {width: 160rem; height: 70rem;}

}
@media (max-width: 540px){

    .global{padding-top: 210rem;}
    .global-count dd span{font-size: 26rem}
    .global-map__hover{display: none !important;}
    .global-map__area .global-map__btn {font-size: 10rem; padding:3rem 7rem 1rem}
    .global-count dd i {font-size: 22rem; top: -17rem; margin-left: 2rem;}
    .global-count > i{height: 17rem;}
    .global-count {gap: 20rem; margin-top: 36rem;}
    .global-company .rolling-img__box li {width: 100rem; height: 50rem;}

    
}

section.solution{position:relative;background-color: #031425;overflow: hidden;padding: 250rem 0 180rem;}
.solution-visual--wrap{padding: 40rem;/* height:100vh; */top: 0;width:100%;position: absolute;margin-top: 60rem;}
.solution-visual{display:flex;align-items: center;justify-content:center;overflow:hidden;top:0;left:0;width:100%;height: 100%;border-radius:10rem;padding:40rem;transform: scale(1);max-width:100%;aspect-ratio: 16 / 9;}

.solution-rolling-text{text-align: center;}
.solution-rolling-text span{color: var(--w); display: block; margin-top: 20rem; position: relative; z-index: 1;}
.solution-visual__bg{position:absolute;top:0;left:0;width:100%;height:100%;background-size: cover;background-repeat: no-repeat;aspect-ratio: 16 / 9;}
.solution-list__img{width: 100%;border-radius: 10rem;overflow: hidden;aspect-ratio: 628/300;}

.solution-list li *{color: var(--w);}
.solution-list li strong{display: block; margin-top: 34rem;}
.solution-list li p{margin-top: 6rem;}
.solution-list li .btn-wrap{margin-top: 40rem;}

/* .solution-list{position:relative; width:713rem; margin-left:auto;padding: 90rem 42rem 100rem;
.solution-list ul{display: flex; flex-direction: column; gap: 90rem;}} */
.solution-bg{background: rgba(0, 0, 0, 0.4);backdrop-filter: blur(3rem);position: absolute;height: 100%;bottom: 0;left: 0;width: 100%;}
.solution-list ul{ gap: 44rem; position: relative;z-index: 1;}
.rolling-con{ white-space:nowrap; will-change:transform;}
.rolling-con__txt{display:inline-block;font-weight:bold;font-size:200rem;text-transform:uppercase;will-change:transform;color: var(--op-w20);}

.solution-list{width: 100%; position: relative; z-index: 3;}
.solution-list .wrap-wide{ padding: 50rem; background: rgba(255,255,255,0.1); border-radius: 20rem; backdrop-filter: blur(10rem);}

/* gsap list */
/* @media (max-width:1400px){
    .solution-list{padding-top:380rem;}
}
@media (max-width:1350px){
    .solution-list{padding-top:420rem;}
}
@media (max-width:1280px){
    .solution-list{padding-top:540rem;}
}
@media (max-width:1150px){
    .solution-list{padding-top:700rem;}
}


@media (max-width:1480px){
    .solution-list{width: 620rem;}
} */

@media all and (max-width:1200px){
    .rolling-con__txt{font-size: 180rem;}
    .solution-list li .btn-wrap {margin-top: 50rem;}
    section.solution{padding: 200rem 0 180rem;}
    .solution-visual--wrap{margin-top: 0;}

}
@media all and (max-width:1023px){
	
      .rolling-con__txt{font-size: 140rem;}
      .solution-list ul{gap: 32rem;}
      section.solution{padding: 150rem 0 100rem;}
      .solution-list .wrap-wide{ padding: 30rem;}
    
}
@media (max-width:860px){

}
@media (max-width: 540px){
	section.solution{padding: 110rem 0 80rem;}
     .solution-list ul{grid-template-columns: 1fr;}
     .rolling-con__txt{font-size: 100rem;}
     .solution-visual--wrap{padding: 28rem 0;}
     .solution-list .wrap-wide{ padding: 16rem;}
     .solution-list li strong {margin-top: 16rem; font-size: 18rem;}
     .solution-list li .btn-wrap{margin-top: 20rem;}
     
}

.main-contact{padding: 314rem 0 647rem; overflow: hidden; position: relative;}
.main-contact__text{text-align: center; position: relative ; z-index: 6;}
.main-contact__text h3{color: var(--b-01);}
.main-contact__text h3 img{width: 294rem;display: inline-block;position: relative;top: 13rem;}

.main-contact:not(.active) .main-contact__bg{transform: scale(.7); }
.main-contact:not(.active) .main-contact__bg img {filter: blur(10rem);}
.main-contact__bg{width: 100%;  height: 100%; position: absolute;  left: 0; top: 0;  transition: all 2s; } 
.main-contact__bg img{position:absolute;border-radius:0.42vw;}
.main-contact__bg .bg01{top:-3.65vw;left:14.38vw;width:16.15vw;height:10.52vw;filter:blur(0.26vw);}
.main-contact__bg .bg02{top:21.35vw;right:3.13vw;width:17.76vw;height:11.82vw;}
.main-contact__bg .bg03{top:-2.60vw;right:10.57vw;width:11.40vw;height:8.75vw;filter:blur(0.10vw);}
.main-contact__bg .bg04{top:16.88vw;left:3.23vw;width:15.10vw;height:11.25vw;}
.main-contact__bg .bg05{top:39.94vw;left:30.36vw;width:12.71vw;height:8.70vw;}

@media (max-width:1480px){
    .main-contact{padding:194rem 0 647rem ;}
}
@media all and (max-width:1200px){
    .main-contact__bg .bg05{top: 45vw;}
	.main-contact__text h3 img{width: 211rem; top: 9rem; margin-right: 4rem;}
}
@media all and (max-width:1023px){
    .main-contact{padding: 154rem 0 577rem;}
}
@media (max-width:860px){
        .main-contact{padding: 154rem 0 537rem;}
    	.main-contact__bg .bg05{top: 52vw;}
}
@media (max-width: 540px){	
    .main-contact{padding: 100rem 0;}
    .main-contact__text h3 img{width: 130rem; display: block; margin: 10rem auto; top: 0;}    
   .main-contact__bg .bg03{top: 1.4vw; right: 10vw; width: 14.4vw; height: auto;}
    .main-contact__bg .bg04{left: -6vw;top: 24.88vw;width: 18vw;height: auto;}
    .main-contact__bg .bg02{top: 48.35vw;right: -3.87vw;width: 22.76vw;height: auto;}
    .main-contact__bg .bg05 {top: 91vw; left: 11.36vw; width:23vw; height: auto;}
}

#main{position: relative;}
.main #footer{margin-top: -395rem;}
.main-contact .btn-wrap{justify-content: center; margin-top: 52rem;}

@media (max-width:540px){
    .main #footer{margin-top: 0;}
}

/* about */
.about {
    padding: 160rem 0rem;
}

.about .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about * {
    text-align: center;
}

.about h3 {
    color: var(--b-01);
}

.about-label {
    font-family: var(--lang-ko);
    font-size: 12rem;
    padding: 5rem 16rem;
    letter-spacing: 0.13rem;
    color: var(--b-01);
    line-height: 22rem;
    display: inline-flex;
    align-items: center;
    gap: 10rem;
    border: 1px solid var(--op-b10);
    border-radius: 90rem;
    margin-bottom: 30rem;
}
.about-label::after {
    content: "";
    width: 6rem;
    height: 6rem;
    background: var(--c-01);
    border-radius: 30rem;
}

.animation-img__zoom {
    margin: 70rem 0 50rem;
}
.about .btn-wrap {
    margin-top: 30rem;
}

.animation-img__zoom{overflow:hidden;/* width:300rem; *//* height:390rem; */aspect-ratio: 882/516;border-radius: 20rem;}
.animation-img__zoom img{/* aspect-ratio:2 / 3; */object-fit:cover;max-inline-size:100%;block-size:auto;}


@media all and (max-width:1023px){
	.about {padding: 100rem 0rem;}
}
@media (max-width:860px){

}
@media (max-width: 540px){

    .about {padding: 60rem 0rem;}
    .about .btn-wrap{margin-top: 0;}
    .animation-img__zoom{margin: 34rem 44rem;}
}