@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-inner--wrap{ --wrap-offset: calc((100vw - min(100vw, var(--wrap-wd))) / 2); padding-left: var(--wrap-offset);}
.wrapper-inner{width: calc(100vw - var(--wrap-offset));}


/* main visual */
.main-visual{height:var(--height-full);}
.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;bottom: 60rem;left:0;z-index:999;width:100%;}
.main-visual__controls > div{display:flex;align-items:center;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__btn.button-next::after{/* transform:rotate(-90deg); */}
.main-visual__btn.button-prev::after{transform: rotate(180deg);}

.main-visual .swiper-pagination{display:flex; gap:18rem;}
.main-visual .swiper-pagination-bullet{background: var(--w);}
.main-visual .swiper-pagination-bullet{opacity:0.4; width:14rem; height:14rem; background:#fff;}
.main-visual .swiper-pagination-bullet-active{opacity:1;}

.main-visual__text{position:absolute; top:40vh; width:100%;  color:#fff;}
.main-visual__text h2{overflow:hidden; text-transform: uppercase; line-height:1.1;font-size:94rem;letter-spacing:-0.5rem;opacity: 0;}
.main-visual__text h2 span{font-weight: 600;}
.main-visual__text p{margin-top:32rem;font-size:34rem;opacity: 0;}
.main-visual__text p span{font-weight:600;}
.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;}

a.scroll-down{position:absolute;bottom:33rem;left:102rem;z-index:20;font-weight:700;font-size:30rem;color:var(--w);display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 16rem;}
a.scroll-down span{width: 29rem;height: 50rem;border-radius: 90rem;border:2px solid var(--w);}
a.scroll-down span i{display:block;width:5rem;height:5rem;background:var(--w);border-radius: 50%;margin: 8rem auto 0;animation: scroll-down-motion 2s infinite;}
@keyframes scroll-down-motion {     
 0%{transform: translateY(0);}
 80%{transform: translateY(26rem); opacity: 0;}
 81%{transform: translateY(0); opacity: 0;}
 100%{ opacity: 1;}
}

@media (max-width:1820px){

    .wrapper-inner{width: 92%;}
}
@media (max-width:1600px){

    
    a.scroll-down{left: 60rem;}
}
@media (max-width:1480px){

    /* .main-visual__text p{font-size: 30rem;} */
    
}

@media (max-width:1200px){
.main-visual__text p{font-size: 30rem;}
}

@media (max-width:1023px){
	.main-visual{min-height: 600rem;}
    .main-visual__text h2{font-size: 74rem;}
    .main-visual__text p{font-size: 28rem;}

    a.scroll-down{left: 40rem; gap: 10rem;}
    a.scroll-down span{width: 24rem; height: 42rem;}
}

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

@media (max-width:540px){
	.main-visual__text{top:260rem;}
	.main-visual__text h2{line-height:1.2; font-size:34rem;}
	.main-visual__text p{margin-top:10rem; font-size:15rem;}
	.main-visual__count{margin:0 10rem; font-size:15rem; line-height: 1.4;}
	.main-visual__btn{font-size:14rem;}
	
	[fullpage-ani]{opacity: 1 !important; transform:none !important;}

    a.scroll-down{left: 20rem; gap: 6rem;}
    a.scroll-down span{width: 17rem; height: 30rem; border:1px solid var(--w);}
    a.scroll-down span i{width: 3rem; height: 3rem;}
    @keyframes scroll-down-motion {     
        0%{transform: translateY(0);}
        80%{transform: translateY(14rem); opacity: 0;}
        81%{transform: translateY(0); opacity: 0;}
        100%{ opacity: 1;}
    }
}

[data-theme="dark"]{   }
/* .switch-section .swtich-section__bg{background-color: var(--bg-dark); display: block; z-index: 1; width: 100%; height: 100%;  position: absolute; left: 0; top: 0; transition:background-color .6s ease, color .6s ease;} */
.switch-section .switch-section__pattern{ display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.switch-section .switch-section__pattern::before{display: block; transition:background-image .6s ease; content: ""; z-index: 1; width: 100%; height: 100%; background-image: url(../img/layout/pattern-b.png); background-repeat: repeat; position: absolute; left: 0; top: 0;}
.switch-section{position: relative; /* transition:background-color 1s ease, color .6s ease;  */}
.switch-section > *:not(i){position: relative; z-index: 3; max-width: 100%;}
.main-intro{height: var(--height-full); overflow: hidden; width: 100% !important; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--w); }
.main-intro__conts{text-align: center; position: relative; z-index: 2;}
.main-intro__conts img{display: inline-block; margin-bottom: 57rem;}
.main-intro__conts h3 *,
.main-contact__cont h3 *{font-weight: 700;}

[data-theme="light"].switch-section .switch-section__pattern{}
[data-theme="light"].switch-section .switch-section__pattern::before{background-image: url(../img/layout/pattern-w.png); background-repeat: repeat; }

.main-about{padding:var(--space-160) 0 250rem; position: relative;}
.main-about > *{z-index: 4;}
.main-about__conts--wrap{position: absolute; left:0; top:0; width: 100%; height: 100%;  }
.main-about__conts{position:sticky; top:100rem}
.main-about__conts .comm-tit{margin-bottom: 34rem;}
/* .main-about__conts p{font-size: 22rem;} */
.main-about__conts p + p{margin-top: 38rem;}
.main-about__conts img{position: absolute;top: 0;left: -100rem; mix-blend-mode: multiply; opacity: 0; }
[data-theme="light"] .main-about img{opacity: 1;}
/* [data-theme="light"] .main-about::before{background-image: url(../img/layout/pattern-w.png); background-repeat: repeat;} */
/* [data-theme="light"] .main-about::after{content: ""; width: 100%; height: 100%; background:linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.77) 80.17%); bottom: 0; left: 0; position: absolute;} */
.main-about__list{max-width: 994rem; display: flex;flex-wrap: wrap;margin-left: auto;gap: 124rem;justify-content: flex-end;}
.main-about__list li{width: 435rem;height: 545rem;border-radius: 10rem;overflow: hidden;position: relative;}
.main-about__list li a{width: 100%;height: 100%;display: flex;align-items: flex-start;flex-direction: column;padding: 50rem 42rem;justify-content: end;}
.main-about__list li a strong{color: var(--w);position: relative;z-index: 1;}
.main-about__list li a img{width: 100%;height: 100%;object-fit: cover;position: absolute;left: 0;top: 0;}
.main-about__list li:nth-child(1){top: 391rem;}
.main-about__list li:nth-child(3){display: none;}

@media (max-width:1600px){

    .main-about__list li{width: 335rem; height: 415rem;}
    .main-about__list li a{padding: 32rem;}
    .main-about__list{gap: 110rem 84rem;}
    .main-about__conts img{width: 90%;}
}
@media (max-width:1480px){

}
@media all and (max-width:1200px){
	.main-about{padding: var(--space-160) 0 180rem }
}
@media all and (max-width:1023px){
 .main-intro__conts img{height: 40rem;}
    .main-about__conts--wrap{position: relative;}
    .main-about__list{margin-top: 80rem; gap: 32rem; flex-wrap: nowrap;}
    .main-about__list li{width: 100%; height: 315rem;}
    .main-about__list li:nth-child(1){top: 0}
    .main-about__list li a{padding: 24rem;}
    .main-about__conts img{top: 40%;}
    .main-about{padding: var(--space-160) 0 100rem }
	/*화면 768에 맞춰놓고 작업*/
}
@media (max-width:860px){
    .switch-section{overflow: hidden;}

}
@media (max-width: 540px){
    .main-intro__conts img{height: 28rem;}
    .main-intro__conts{padding: 0 20rem;}

    .main-about__list li{width: 100%; height: 235rem;}
    .main-about__list li a{padding: 20rem;}
    .main-about__list{flex-direction: column;}
    .main-about__conts p {word-break: keep-all;}
    .main-about__conts p + p{margin-top: 18rem;}

    .main-about__list{margin-top: 40rem; justify-content: flex-start; gap: 12rem;}
    .main-about__list li:nth-child(1){top: 0;}
    .main-about__list li a strong{font-size: 16rem;}
    .main-about{padding: var(--space-160) 0 64rem }

}


/* 솔루션 */
.main-solution{background-color: var(--bg-dark); padding: 180rem 0; position: relative; z-index: 10;}
.main-solution .comm-tit{text-align: center;}
.main-solution .comm-tit h3{color:var(--w)}
.main-solution__table{margin-top: 100rem; position: relative;}
.main-solution__table table{border-top: 1px solid var(--w);width: 100%;table-layout: fixed;z-index: 1;position: relative;}
.main-solution__table *{color: var(--w);}
.main-solution__table th{border-bottom: 1px solid #282828; padding: 24rem 10rem; }
.main-solution__table td{padding:20rem 2rem; vertical-align: middle;}
.main-solution__table td strong{color: var(--w); display: block; margin-bottom: 10rem;}
.main-solution__table td span{color:var(--op-w40)}
.main-solution__table .tab-bar{width: 100%;height: 13rem;border-radius: 40rem;background-color: rgba(255,255,255,0.03);display: block;position: relative;}
.main-solution__table .tab-bar i{ height: 22rem;border-radius: 0 10rem 10rem 0;width: 0; transition: var(--trans-02); transition-delay: .2s; background: linear-gradient(90deg, #101217 0%, #11A4E1 100%); position: absolute;left: 0;top: -4rem;} 
/* .is_moved .main-solution__table .tab-bar.bar01 i{width: 50%;}
.is_moved .main-solution__table .tab-bar.bar02 i{width: 90%;}
.is_moved .main-solution__table .tab-bar.bar03 i{width: 75%;}
.is_moved .main-solution__table .tab-bar.bar04 i{width: 25%;}
.is_moved .main-solution__table .tab-bar.bar05 i{width: 60%;}
.is_moved .main-solution__table .tab-bar.bar06 i{width: 80%;} */
.is_moved .main-solution__table .tab-bar.bar01 i{width: 100%;}
.is_moved .main-solution__table .tab-bar.bar02 i{width: 100%;}
.is_moved .main-solution__table .tab-bar.bar03 i{width: 100%;}
.is_moved .main-solution__table .tab-bar.bar04 i{width: 100%;}
.is_moved .main-solution__table .tab-bar.bar05 i{width: 100%;}
.is_moved .main-solution__table .tab-bar.bar06 i{width: 66.6%;}
.is_moved .main-solution__table .tab-bar.bar07 i{width: 33.3%;}


.main-solution__line{position: absolute;width: 100%;height: 100%;display: flex;justify-content: space-between;top: 0;left: 0;z-index: 0;}
.main-solution__line i{width: 1px; height: 100%; border-right: 1px solid var(--br-02); display: block;}
.main-solution__line i:nth-child(1),.main-solution__line i:last-child{border-color: transparent;}

.main-solution__slide{margin-top: 180rem;}
.main-solution__slide .swiper-slide{
    position: relative; overflow: hidden; 
    aspect-ratio: 541 / 410; background:transparent; text-align: center; 
    border-radius: 10rem; display: flex; align-items: center; justify-content: center;  
    border:2px solid transparent;
    background:
   /* linear-gradient(#101217, #101217) padding-box, 
   linear-gradient(143deg, #0091cd 0, rgba(17, 164, 225, 0) 18%, rgba(17, 164, 225, 0) 0) border-box, 
   linear-gradient(313deg, #0091cd 0, rgba(17, 164, 225, 0) 18%, rgba(17, 164, 225, 0) 0) border-box, 
   linear-gradient(220deg, #0091cd 0, rgba(17, 164, 225, 0) 18%, rgba(17, 164, 225, 0) 0) border-box, 
   linear-gradient(54deg, #0091cd 0, rgba(17, 164, 225, 0) 18%, rgba(17, 164, 225, 0) 0) border-box */

   linear-gradient(#101217, #101217) padding-box, 
   linear-gradient(143deg, rgba(255,255,255,.6) 0, rgba(17, 164, 225, 0) 18%, rgba(17, 164, 225, 0) 0) border-box, 
   linear-gradient(313deg, rgba(255,255,255,.6) 0, rgba(17, 164, 225, 0) 18%, rgba(17, 164, 225, 0) 0) border-box, 
   linear-gradient(220deg, rgba(255,255,255,.6) 0, rgba(17, 164, 225, 0) 18%, rgba(17, 164, 225, 0) 0) border-box, 
   linear-gradient(54deg, rgba(255,255,255,.6) 0, rgba(17, 164, 225, 0) 18%, rgba(17, 164, 225, 0) 0) border-box;

   transition:all 1.4s ease;
}

.main-solution__slide .swiper-slide:before{content: ""; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); position: absolute; left: 0; top: 0; z-index: 1; opacity: 0; transition: var(--trans-01);}
.main-solution__slide .swiper-slide figure{position: absolute; width: 100%; height: 100%; left: 0; object-fit: cover; opacity: 0;}
.main-solution__slide .swiper-slide *{ transition: var(--trans-01);}
.main-solution__conts{position: relative; display: flex; flex-direction: column; z-index: 2; overflow: hidden; }
.main-solution__conts strong{color:var(--w); display: block;}
.main-solution__conts p{font-weight: 500; color: var(--op-w60); margin-top: 12rem; padding: 0 20rem; word-break: keep-all;} 
.main-solution__conts .btn-wrap{justify-content: center; margin-top: 44rem; opacity: 0; transition: var(--trans-01);}
.main-solution__conts > div{transform: translateY(54rem); transition: var(--trans-02);}

.main-solution .swiper-container,
.main-news__list .swiper-container{overflow: visible; padding-bottom: 65rem;}
.swiper-scrollbar{height: 2rem; background-color: rgba(255,255,255,.08);width: 100%;}
.swiper-scrollbar-drag{background-color: var(--c-primary);}
.swiper-bar--wrap{position: absolute; bottom: 0; left: 0; width: 100%; padding-right: var(--wrap-offset);}

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

    .main-solution__slide .swiper-slide:hover figure{opacity: 1;}
    .main-solution__slide .swiper-slide:hover::before{opacity: 1;}
    .main-solution__slide .swiper-slide:hover{
        background:
        linear-gradient(#101217, #101217) padding-box, 
        linear-gradient(143deg, #0091cd 0, rgba(17, 164, 225, 0) 18%, rgba(17, 164, 225, 0) 0) border-box, 
        linear-gradient(313deg, #0091cd 0, rgba(17, 164, 225, 0) 18%, rgba(17, 164, 225, 0) 0) border-box, 
        linear-gradient(220deg, #0091cd 0, rgba(17, 164, 225, 0) 18%, rgba(17, 164, 225, 0) 0) border-box, 
        linear-gradient(54deg, #0091cd 0, rgba(17, 164, 225, 0) 18%, rgba(17, 164, 225, 0) 0) border-box
    }

    .main-solution__slide .swiper-slide:hover .main-solution__conts > div{ transform: translateY(0); }
    .main-solution__slide .swiper-slide:hover .main-solution__conts .btn-wrap{ opacity: 1; }
}

@media all and (max-width:1200px){
    .main-solution__table{margin-top: 70rem;}
	.main-solution__table th{padding: 18rem 10rem;}
    .main-solution__table td strong{margin-bottom: -1rem;}
    .main-solution__slide{margin-top: 140rem;}
    .main-solution__conts{padding: 0 20rem;}
}

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

    .main-solutionm{padding: 100rem 0;}
    .main-solution__table{margin-top: 52rem;}
    .main-solution__table .tab-bar i{height: 18rem; top: -2rem;}
    .main-solution__table td{padding: 16rem 2rem;}
    .main-solution__slide{margin-top: 120rem;}

    .main-solution__conts > div{transform: none;}
    .main-solution__conts p{word-break: keep-all;}
    .main-solution__conts .btn-wrap{opacity: 1; margin-top: 24rem;}
    .main-solution__slide .swiper-slide{aspect-ratio: 541 / 480;}
    .main-solution__slide .swiper-slide figure{opacity: 1;}
    .main-solution__slide .swiper-slide:before{opacity: 1; background-color: rgba(0,0,0,0.4);}
   .main-solution{padding: var(--space-100) 0;}
    
}
@media (max-width:860px){
    .main-solution__table td span{word-break: keep-all;}
    .main-solution__slide{margin-top: 100rem;}
    .main-solution{overflow: hidden;}

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

    .main-solution{padding: 64rem 0;}
    .main-solution__table{margin-top: 36rem;}
    .main-solution__table table{width: 100%; display: block;}
    .main-solution__table th{padding: 8rem 6rem; font-size: 14rem; border-bottom: 0;}
    .main-solution__table th:nth-child(1){display: none;}
    .main-solution__table thead,
    .main-solution__table tbody {display: block;}
    .main-solution__table tbody tr{display: flex; flex-direction: column; border-bottom: 1px solid #282828; }
      .main-solution__table thead tr{display: flex; width: 100%; justify-content: space-between; border-bottom:1px solid #282828 ;}
    .main-solution__line{display: none;}
    .main-solution__table td:nth-child(1){padding-bottom: 0;}
    .main-solution__table .tab-bar{height: 10rem;}
    .main-solution__table .tab-bar i{height: 12rem;}
    
    .main-solution__slide{margin-top:90rem ;}
    /* .main-solution .swiper-container{padding-top: 44rem;} */
}


.main-contact{height: var(--height-full); background: url(../img/main/main-bottom_bg.jpg) no-repeat; background-size: cover; display: flex; justify-content: center; align-items: center; color: var(--w); }
.main-contact__cont{ text-align: center; }

/* 뉴스 */
.main-news{padding:170rem 0; }
.main-news .comm-tit{position: relative;}
.main-news .comm-tit .btn-default{position: absolute; right: 0; bottom: 0;}
.main-news__list--wrap{margin-top: 50rem;}
.main-news .swiper-scrollbar{background-color: var(--bg-default);}
.main-news .swiper-scrollbar-drag{background-color: var(--c-primary);}


.title-wrap {margin-top: 24rem;}
.title-wrap *{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.gallery-slide p{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 8rem;}
.gallery-slide i{color: #C8C8C8;}
.gallery-slide.swiper-slide a{width: 100%;}

/* 문의 */
.main-contact{text-align: center;}
.main-contact__cont h3{color: var(--w);}
.main-contact__cont .btn-wrap{margin-top: 70rem; justify-content: center;}
  

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

    .main-news{padding: 80rem 0; overflow: hidden;}
    .main-contact__cont .btn-wrap{margin-top: 40rem;}
}
@media (max-width: 540px){
    .main-news{padding: 64rem 0}
    .main-news .btn-wrap{margin-top: 48rem; justify-content: center;}
    .main-news__list--wrap{margin-top: 32rem;}
    .main-solution .swiper-container, .main-news__list .swiper-container{padding-bottom: 44rem;}
}


.rolling-img img{margin:0 23rem; border-radius: 0;}

@media (max-width: 540px){

    .rolling-img img{margin:0 16rem; height: 26rem;}
}

#footer{background-image: url(../img/main/pattern-no-b.png); background-repeat: repeat;}
#footer::before{width: 100%;height: 100%;content: "";left: 0;top: 0;position: absolute;background: linear-gradient(180deg, #040309 0%, rgba(11, 13, 17, 0.00) 100%);}