@charset "utf-8";
.main-wrap{width:100%; height:100vh;height:100%; }
.mainSect{width:100%;height:100%;}

.main-loader{position:absolute;width:0;height:0;padding:30px;z-index:-2;background-color: #000;display:flex;align-items: center; display:none;}
.main-loader .loader-txt{font-size:24px;line-height: 1.2;font-weight: 700;color:#000;overflow: hidden;}
.main-loader .loader-txt span{display: inline-block;transform: translateY(100%);}

.mainSect.swiper-container{width: 100%;height: 100%;}
.mainSect .swiper-slide {text-align: center;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center; overflow:hidden;}

.mainSect .swiper-pagination{position: absolute;left:50%;  transform:translateX(-50%);  display:inline-flex; justify-content: center; width: fit-content;padding:0 30px;font-size: 30px;font-weight: 700;line-height: 1.2;text-align:center; margin-bottom:80px; box-sizing: border-box; z-index:100;}
.mainSect .swiper-pagination .swiper-pagination-bullet {display: inline-block; width: 10px;height: 10px; background: rgba(252,255,255,.7);  border-radius: 50%;  vertical-align: middle; transition: .37s ease;margin: 0 7px !important; box-sizing: border-box; }
.mainSect .swiper-pagination .swiper-pagination-bullet-active { width: 10px;height: 10px; background-image:none;  border-radius: 50%; border:1px solid #fff;  background: rgba(252,255,255,0);}
.mainSect .swiper-pagination .swiper-pagination-bullet { opacity: 1}

.mainSect .swiper-button-prev, .mainSect .swiper-button-next{position:absolute;top:50%;width:100%;height:100%;margin-top:-22px;}
.mainSect .swiper-button-prev:after,.swiper-button-next:after{display: none;}
.mainSect .swiper-button-prev{left:40px;width:0px;height:0px;background: url(/images/layout/slider-arr-prev.png) no-repeat 50% 50%; background-size:auto 44px;}
.mainSect .swiper-button-next{right:40px;width:0px;height:0px;background: url(/images/layout/slider-arr-next.png) no-repeat 50% 50%; background-size:auto 44px;}

.main-sect-work{width:100%;height:100%;overflow:hidden}
.main-sect-work .w-thumb{position:relative; width:100%; height:100%; /*width:auto;height:100%; */ display: flex;align-items: center;justify-content: center; overflow: hidden;  }
.main-sect-work .w-thumb::before{position: absolute;content: ""; width:100%;height:100%; left:0; top:0;
    background: -moz-linear-gradient(top,  rgba(0,0,0,.5) 0%, rgba(0,0,0,.2) 60%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(top,  rgba(0,0,0,.5) 0%,rgba(0,0,0,.2) 60%, rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,.5) 0%,rgba(0,0,0,.2) 60%,rgba(252,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#00fcfaf9',GradientType=0 ); 
    z-index:0; }
.main-sect-work .w-thumb img{position: absolute;top: 50%; left: 50%;transform: translateX(-50%) translateY(-50%); width: auto;min-width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: 50% 50%;  /*max-width: none; */ }
.main-sect-work video{position: absolute;transform: translateX(-50%) translateY(-50%);top: 50%;left: 50%; width:100% !important;height:100vh;object-fit: cover; object-position: 50% 50%; /*min-width: 100%;min-height: 100%;width: auto;height: auto;*/overflow: hidden;z-index: -1000;}


.main-sect-work .w-infos{position: absolute; top:0;left:50%; transform:translateX(-50%); display:flex;flex-direction: column;justify-content:center; width:100%;max-width:1400px; height:100%; margin:0px auto;color:#fff;padding:0;box-sizing: border-box; z-index: 2;}
.main-sect-work .w-infos-tit{text-align:left; font-size:65px;font-family: 'GmarketSansBold';text-transform:uppercase; /*font-weight: 800;*/ line-height:1.2;letter-spacing:-0.01em;text-shadow: 1px 1px 16px rgba(0, 0, 0, .1);}
/* .main-sect-work .w-infos-tit:after{content:'';display: block;width:100%;height:0px;background:#fff} */
.main-sect-work .w-infos-txt{text-align:left;font-size:20px;font-weight:500; line-height: 1.3;letter-spacing:-0.02em;text-shadow: 1px 1px 16px rgba(0, 0, 0, .1); margin-bottom:20px;}
.main-sect-work .w-infos-desc{text-align:left;font-size:50px;font-weight:400;line-height: 1.3;letter-spacing:-0.02em;text-shadow: 1px 1px 16px rgba(0, 0, 0, .1); margin-top:20px;}
.main-sect-work .w-infos-view{display:inline-block;border:1px solid #fff;background-color:transparent;border-radius:0px;font-weight: 400;padding:10px 30px;line-height:1;font-size:14px;color:#fff;margin-top:30px; transition:all 0.3s; /* box-shadow: 0px 0px 8px rgba(0, 0, 0, .1);*/ }
.main-sect-work .w-infos-view:hover{border:1px solid #1a1a1a;background:#1a1a1a;color:#fff;}

.swiper-slide-prev .w-flow, 
.swiper-slide-prev .w-infos,
.swiper-slide-next .w-flow, 
.swiper-slide-next .w-infos{opacity: 0;transform: translateY(200px)}

.mainSect .w-infos-tit, .main-sect-work .w-infos-txt, .mainSect .w-infos-desc{opacity: 0;transform: translateY(200px)}
.main-sect-work .w-infos-txt{animation: workAni 1s 1s both;}
.mainSect.active .w-infos-tit{animation: workAni 1s 1.5s both;} 
.mainSect.active .w-infos-desc{animation: workAni 1s 2s both;}

.white .mainSect .swiper-pagination{color:#fff}
#pc-vod{display: block;}
#mo-vod{display: none;}
.isTablet .main-sect-work video{width:auto;height:100%}

@keyframes marquee {    
    100% {transform: translateX(-100%);}
}

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

@keyframes lightSpeedIn {
    0% {transform: translateX(-100%);opacity: 0;}
    100% {transform: translateX(0);opacity: 1; }
}
@keyframes workAni {
    0% {opacity: 0;transform: translateY(200px)}
    100% {opacity: 1;transform: translateY(0)}
}

@keyframes workthumb {
    0% {opacity: 0;transform: scaleY(0)}
    100% {opacity: 1;transform: scaleY(1)}
}

@keyframes marqueePc {             
    100% {transform: translateX(-100%);}
}
@keyframes linemov {
    0% {width:0px;}
    100% {width:100%;}
}

/* iOS only */ 
@supports (-webkit-touch-callout: none){ height: -webkit-fill-available;}

@media all and (max-width:1400px) {
.main-sect-work .w-infos{padding:0 5%;}
}

/* Tablet  1024px 이하 */
@media all and (max-width:1024px) {

    .main-sect-work .w-infos-tit{font-size:5.8rem;}
    .main-sect-work .w-infos-txt{font-size:18px;margin-bottom:2rem;}
    .main-sect-work .w-infos-desc{font-size:40px;margin-top:2.5rem;}



}

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

   #pc-vod{display: none;}
   #mo-vod{display: block}

/*    .main-wrap{position: relative; width:100%;height: 0;overflow: hidden; padding-bottom: 56.25%;  }
    .mainSect{position: absolute;top: 0;left: 0;width: 100%; height: 100%;} */
    
    .main-sect-work .w-infos-tit{font-size:5.5rem;}
    .main-sect-work .w-infos-txt{font-size:17px;margin-bottom:2rem;}
    .main-sect-work .w-infos-desc{font-size:30px;margin-top:2.5rem;}

    
}

@media all and (max-width:540px) {
 /*   .m--scroll {display: none;}
    .main-wrap{ height:60vh;} */



    .main-sect-work .w-infos-tit{font-size:4.5rem;}
    .main-sect-work .w-infos-txt{font-size:16px;margin-bottom:2rem;}
    .main-sect-work .w-infos-desc{font-size:22px;margin-top:2.5rem;}

  /*  .main-sect-work .w-infos-txt > span::before{height:8px;}*/

    
}

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

    .main-sect-work .w-infos-tit{font-size:4.0rem;}
    .main-sect-work .w-infos-txt{font-size:16px;margin-bottom:2rem;}
    .main-sect-work .w-infos-desc{font-size:18px;margin-top:2.5rem;}
    
}


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

    .main-sect-work .w-infos-tit{font-size:4.0rem;}
    .main-sect-work .w-infos-txt{font-size:16px;margin-bottom:2rem;}
    .main-sect-work .w-infos-desc{font-size:16px;margin-top:2.5rem;}
    
}