@charset "utf-8";
body{
    word-break: keep-all;
}
.d-none{
    display: none;
}
/* Intro */
#intro {
    width: 100%; height: 100%;
    position: fixed; top: 0; left: 0;
    background-color: rgba(0, 0, 0, 1);
    z-index: 9999;
    transition: all 0.5s ease-in-out;
}

#progress-container {
    position: absolute; right:0; bottom:0;
}

#progress-text {    
    display: block; line-height: 1;
    font-size: 9rem;
    transition: bottom 0.03s linear;  /* 위치 변화 애니메이션 */
}
#intro.fade-out {
    opacity: 0;
    transform: translateY(-100%);
}

/* Index */
.idx-keyVisual{
    margin-right: 3.6rem; padding-top: 15rem;
    text-align: center;
}
.idx-keyVisual-copy1{
    display: inline-block; position: relative;
    font-size: 16rem; font-weight: 700; color:#0D1011;
    line-height: 1;
    animation: keyVisualCopy1 0.8s ease-in-out 1 forwards;
    -webkit-text-stroke-color: #fff; -webkit-text-stroke-width: 1px;
}
.idx-keyVisual-copy1:after {
    position: absolute; left: 0px; content: attr(data-text);
    line-height: 1;
    -webkit-text-stroke: 3px #fff; z-index: -1;
}
.idx-keyVisual-copy2{
    display: inline-block; margin-top: -0.2em; margin-bottom: 0.1em;
    font-size: 10.2rem; font-weight: 700; color:#2AF3D6;
    animation: keyVisualCopy2 0.8s ease-in-out 0.3s 1 forwards;
    opacity: 0;
}
.idx-keyVisual-copy2 + p{
    animation: keyVisualCopy3 0.8s ease-in-out 0.6s 1 forwards;
    opacity: 0;
}
.idx-keyVisual-copy2 + p + .btn{
    animation: keyVisualBtn 0.8s ease-in-out 0.9s 1 forwards;
    opacity: 0;
}
@keyframes keyVisualCopy1 {
    0%{
        opacity: 0;
        transform: translateY(50%);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes keyVisualCopy2 {
    0%{
        opacity: 0;
        transform: translateY(50%);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes keyVisualCopy3{
    0%{
        opacity: 0;
        transform: translateY(50%);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes keyVisualBtn {
    0%{
        opacity: 0;
        transform: translateY(50%);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}
.idx-keyVisual .scroll-info{
    position: relative; width: 100%; display: block;
}
.main-slide{ 
    position: relative; padding-bottom: 2.4rem; margin-right: 7.4rem;
}
.idx-works{
    margin:9rem 0 0 2.4rem; height: calc(100vh - 4.8rem);
}
.idx-works .workInfo{
    left: 50%; bottom:20%; transform: translateX(-50%);
    text-align: center;
}

.idx-works-thumb-wrap{
    position: absolute; bottom:7%; left:50%; transform: translateX(-50%); width:568px; padding:0 1.6rem 1.6rem; max-height: 10.4rem;
    border:1px solid #fff; border-radius: 2rem; background-color: rgba(255,255,255,0.2); backdrop-filter: blur(4px); 
    z-index: 9988;
}
.swiper.idx-works-thumb{
    padding-top: 5.5rem;
    margin-top: -3.8rem;
}
.scroll-info{
    position: absolute;left: 50%; bottom:-3rem; transform: translate(-50%,0);
    font-size: 1.2rem; opacity: 0.7;
    animation: scrollInfo 1.5s ease-in-out infinite forwards;
}
.scroll-info-vertical{
    animation:scrollInfoVertical 1.5s ease-in-out infinite forwards;
}

@keyframes scrollInfo {
    0%{
        left: 50%;
        /* bottom:-3rem; */
    }
    50%{
        left: 51%;
        /* bottom:-2.5rem; */
    }
    100%{
        left: 50%;
        /* bottom:-3rem; */
    }
}

@keyframes scrollInfoVertical {
    0%{
        transform: translate(-50%, 0);
    }
    50%{
        transform: translate(-50%, -30%);
    }
    100%{
        transform: translate(-50%, 0);
    }
}
.idx-works-thumb .swiper-wrapper{
    align-items: flex-end; margin-left: -2.3rem;
}
.idx-works-thumb .swiper-slide{
    border-radius: 0.8rem;
    /* width: 4.6rem!important; height: 4.6rem; */
    transition: all 0.2s ease-in-out;
}
.idx-works-thumb .swiper-slide img{
    border-radius: 0.8rem; filter: brightness(60%); 
}
.idx-works-thumb-wrap .bubble{
    display: none; padding:0.7rem 1rem; height: auto; width:auto; min-width: 8rem;
    position: absolute; left:50%; transform: translateX(-50%); bottom:calc(100% + 0.5rem);
    background-color:rgba(0,0,0,0.9); border-radius: 0.8rem; text-wrap: nowrap;
    font-size: 1.3rem; 
}
.idx-works-thumb .swiper-slide .bubble::before{
    content: ''; position: absolute; bottom:-1rem; left:50%; transform: translateX(-50%);
    border-bottom: 0.5rem solid transparent;
    border-top: 1rem solid rgba(0,0,0,0.9);
    border-left: 0.5rem solid transparent;
    border-right: 0.5rem solid transparent;
}
.idx-works-thumb .swiper-slide:not(.swiper-slide-active):hover .bubble{
    display: block;
}
.idx-works-thumb .swiper-slide.swiper-slide-active{
    transform: scale(2);
    margin: 0 5rem;
    transform-origin: right bottom;
    /* width: 7.2rem!important; height: 7.2rem; */
}

.idx-works-thumb .swiper-slide.swiper-slide-active img{
    border-radius: 0.5em;    
    filter: brightness(100%);
}

.idx-works .swiper-wrapper .swiper-slide{
    overflow: hidden;  position: relative;
    border-radius: 1.8rem;
}
/* .idx-works .swiper-wrapper .swiper-slide img{    
    transition: opacity 0.3s ease-in-out 0.4s;
    opacity: 0;
}
.idx-works .swiper-wrapper .swiper-slide.swiper-slide-active img{
    opacity: 1;
}  */
/* .idx-works .swiper-wrapper .swiper-slide img.right{
    transform: translateX(100%);
}
.idx-works .swiper-wrapper .swiper-slide img.left{
    transform: translateX(-100%);
}
*/
.idx-works .swiper-wrapper .swiper-slide::before{
    content: ''; position: absolute; left:0; top:0; width: 100%; height: 100%;
    background: linear-gradient(to top,rgba(0,0,0,0.5), rgba(0,0,0,0),rgba(0,0,0,0) ); z-index: 9988;
    z-index: 9988;
}
.overlay-box {
    position: absolute;
    top: 0;
    width: 0%;
    height: 100%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    pointer-events: none;
    z-index: 9999;
    transition: all 0.5s ease-out; border-radius: 1.8rem;
  }
  .overlay-box.active{
    width:100%;
  }
.idx-works .swiper-slide > img{
    height: 100%; width: calc(100% + 2px); transform: translateX(-1px); object-fit: cover;
    transition: all 0.3s ease-in-out 0.8s;
}
.idx-works .swiper-slide:not(.swiper-slide-active) > img{
    opacity: 0; 
  }
.idx-works .swiper-slide.swiper-slide-active > img{
    opacity: 1;
}
.overlay-box.right{
    right:0%;
    /* border-bottom-left-radius: 500px; border-top-left-radius: 500px;
    border-bottom-right-radius: 0; border-top-right-radius: 0; */
}
.overlay-box.left{
    left:0%;
    /* border:0;
    border-bottom-right-radius: 500px; border-top-right-radius: 500px; 
    border-bottom-left-radius: 0; border-top-left-radius: 0; */
}

/* Company */
.company-keyVisual-wrap{
    position: relative; margin-top: 10.4rem;
}
.bg-company-keyVisual{
    height: calc(100vh - 12rem); margin:0 auto;
}
.bg-company-keyVisual .top, .bg-company-keyVisual .bottom-right{
    background-color: #252728; border-radius: 4.8rem;
}
.bg-company-keyVisual .top{
    width:100%; height:83%; max-height: 100%;
    border-bottom-right-radius: 0; 
}
.bg-company-keyVisual .bottom{
    display: flex; height: 17%; max-height: 12.2rem; 
    transform: translateY(-0.1rem);
    
}
.bg-company-keyVisual .bottom .bottom-left{
    display: flex; flex-shrink: 0; justify-content: center; align-items: center; flex-basis:auto; position: relative; 
    border-radius: 4.8rem;
    z-index: 1;
}
.bg-company-keyVisual .bottom .bottom-left::before{
    content: ''; position: absolute; right:0; top:0; width:4.8rem; height: 4.8rem;
    background-color: #252728;
    z-index: -1;
}
.bg-company-keyVisual .bottom .bottom-left .bottom-left-btn{
    display: flex; align-items: center; height: 100%; padding:3.4rem 3rem 1.7rem 2rem; 
    background-color: #0D1011; border-radius: inherit; 
}

.bg-company-keyVisual .bottom .bottom-right{
    position: relative; width: 100%; height:100%;
    border-top-right-radius: 0; border-top-left-radius: 0;
} 
.btn-inquiry {
    display: none; padding:0; width: 7rem; height: 7rem;
    border-radius: 50%;
}
.company-keyVisual-wrap .company-keyVisual{
    display: flex; position:absolute; top: 20%; left: 16.5rem; width:70%;
}
.company-keyVisual-wrap .company-keyVisual .heading-2{
    line-height: 1.2;
}
.company-keyVisual-wrap .company-keyVisual .heading-5{
    margin:2.8rem 0 2rem;
}
.company-keyVisual .left{
    width:100%;
}
.company-keyVisual .keyboard {
    position: fixed; top:0%; right:-30%; width:100%; height: 100%;    
    /* z-index: -9999; */
}
.company-keyVisual .keyboard #canvas3d {
    position: absolute; top:10%;
    width: 100%;
    height: 100%;
}
.bg-company-keyVisual .keyVisual-blur{
    position: absolute; right:6rem; top: 6rem; height: 650px;
    pointer-events: none;
}
.bg-company-keyVisual .keyVisual-blur > div{
    width:325px; height: 325px;
    background-color: #2AF3D6; filter: blur(23rem);
}
.bg-company-keyVisual .keyVisual-blur .blur-2{
    background-color: #FF470D; margin-left: -200px; margin-top: -100px;
}
#section1{
    height:100vh;
}
#section2{
    height: 500vh;
}
.copyright{
    position: relative;
    text-align: center;
}
.copyright .heading-3{
    position: absolute; top:260px; width:80%; left:50%; transform: translateX(-50%)!important;
}


.zeroBug-wrap{
    padding:27.6rem 0 39rem;
    background: #fff url(../img/bg_zeroBug.png) no-repeat 100% calc(100% - 6.3rem);
    color:#0D1011;
}
.zeroBug-wrap .zeroBug .numberWorks{
    display: flex; flex-wrap: wrap; width: 33.7rem; margin-top: 6.2rem;
}
.zeroBug-wrap .zeroBug .numberWorks li{
    width:50%; margin-bottom: 4.2rem;
    line-height: 1;
}
.zeroBug-wrap .zeroBug .numberWorks li strong{
    display: block; margin-left: -0.5rem; margin-top: 0.1em;
    font-size: 5.2rem; font-weight: 700;
}
.ourWorks-wrap{
    margin:150px 0;
    text-align: center;
}
.ourWorks-wrap .ourWorks{
   margin-left: 7.4rem; margin-top: 6rem; 
}
.ourWorks-wrap .ourWorks,
.ourWorks-wrap .ourWorks .swiper-slide{
    display: block;    
}
.ourWorks-wrap .ourWorks .swiper-slide{
    overflow: hidden; height: 850px;
    border-radius: 4.8rem;
}
.ourWorks-wrap .ourWorks .swiper-slide::before{
    content: ''; position: absolute; width:100%; height: 100%;
    background-color: rgba(0,0,0,0.3);
}
.ourWorks-wrap .ourWorks .swiper-slide img{
    width: calc(100% + 2px); height: 100%; margin-left: -2px;
    object-fit: cover; object-position: center;
}
.ourWorks-wrap .swiper-pagination-bullet{
    background-color: #fff; margin:0 0.8rem!important;
    z-index: 9999;
}
.ourWorks-wrap .swiper-pagination-bullet-active{
    position: relative; width:1rem; height: 1rem; margin:0 1.2rem!important;
    background-color: #2AF3D6;
}
.ourWorks-wrap .swiper-pagination-bullet-active::before{
    content: ''; position: absolute; top:50%; left: 50%; width: 2.2rem; height: 2.2rem;
    border:1px solid #2AF3D6; background-color: rgba(42,243,214,0.17); border-radius: 50%;
    transform: translate(-50%, -50%);
}
.navi-wrap{
    display: flex; position: absolute; right:12%; top:11%; width: 15rem;
}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
    content: unset;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{
    content: unset;
}
.swiper-button-next, .swiper-button-prev{
    display: flex; align-items: center; justify-content: center; width:6rem; height: 6rem;    
    border-radius: 50%;
    font-size: 3rem; color:#fff;
    transition: all 0.4s ease-in-out;
}
.swiper-button-next:hover, .swiper-button-prev:hover{
    border:1px solid #ffffff55;  background-color: rgba(255,255,255,0.16);
    font-size: 4rem;
}
.workInfo{
    position: absolute; left: 10rem; bottom:8rem;
    color:#fff; z-index: 9998; text-align: left;
}
.ourWorks-wrap .ourWorks .workInfo{
    bottom:unset; top:8rem;
}
.workInfo .date{
    font-size: 2rem; line-height: 1;
}
.workInfo .workName{
    display: block; margin-bottom: 1.2rem;
    font-size: 4rem;
}
.workInfo .workBadge{
    display: flex;
}
.workInfo .workBadge li{
    display: block; margin-right: 0.5rem; padding:0.3rem 1.2rem;
    border:1px solid #fff; border-radius: 5rem; background-color: rgba(255,255,255,0.16);
    font-size: 1.3rem; line-height: 1;
}
.ourWorks .swiper-pagination{
    width:auto; left: 10rem; bottom: 8rem;
    text-align: left;
}
.ourClients-wrap{
    text-align: center; margin:20rem 0;
}
.ourClients-wrap  .clients-list{
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; max-width: 1016px; margin:4.5rem auto 0;
}
.ourClients-wrap  .clients-list li{
    width:calc(25% - 4rem); margin:2rem;
}
.ourClients-wrap  .clients-list li img{
    width: 100%;
}
.inquiry{
    display: flex; align-items: center;
}
.inquiry .left{
    flex-shrink: 0; overflow: hidden; width:53rem; height: 72.2rem; margin-right: 10rem;
    border-radius: 4.8rem;
}
.inquiry-form{
    display: flex; justify-content: center; flex-wrap: wrap; margin:0 -0.5rem;
}
.inquiry-form .form-wrap{
    width:100%; padding:1.2rem;
}
.inquiry-form .form-wrap:has(input.form-control){
    width:50%;
}

.inquiry-form .btn-primary{
    width:37rem; margin:2rem auto 0;
}

/* ------------ responsive ------------ */
@media screen and (max-width:1600px) {
    .idx-keyVisual-copy1{
        font-size: 12rem;
    }
    .idx-keyVisual-copy2{
        font-size: 7.6rem;
    }
    .idx-keyVisual-copy2 + p{
        font-size: 1.8rem;
    }
    .zeroBug-wrap .zeroBug .numberWorks li strong {
        font-size: 4.6rem;
    }
}
@media screen and (max-width:1440px) {
    .company-keyVisual-wrap .company-keyVisual {
        top: 15%; left: 10%;
    }
    .idx-keyVisual{
        margin-right: 3rem; padding-top: 15rem;
        text-align: center;
    }
    .idx-keyVisual-copy1{
        font-size: 10rem;
    }
    .idx-keyVisual-copy2{
        font-size: 6rem;
    }
    .idx-keyVisual-copy2 + p{
        font-size: 1.7rem;
    }
    .ourWorks-wrap .ourWorks .swiper-slide{
        border-radius: 3.6rem;
    }
}
@media screen and (max-width:1280px) {        
    .company-keyVisual-wrap{
        margin-top: 8rem;
    }
    .company-keyVisual-wrap .company-keyVisual .heading-2{
        font-size: 5vw;
    }
    .company-keyVisual .keyboard #canvas3d{
        top: 15%;
    }
    .idx-keyVisual-copy1{
        font-size: 8rem;
    }
    .idx-keyVisual-copy2{
        font-size: 5rem;
    }
    .idx-keyVisual-copy2 + p{
        font-size: 1.7rem;
    }
    .inquiry{
        flex-wrap: wrap;
    }
    .inquiry .left{
        width:100%; height: 30rem; margin-bottom: 4rem;
        border-radius: 3.6rem;
    }
    .inquiry .left img{
        width:100%; height:100%;
        object-fit: cover; object-position: center center;
        transform: translateY(-30%);
    }
    .zeroBug-wrap .zeroBug .numberWorks li strong {
        font-size: 4rem;
    }
}
@media screen and (max-width:1024px) {
    .idx-works-thumb-wrap{

    }
}
@media screen and (max-width:991px) {
    .idx-keyVisual-copy1{
        font-size: 6rem;
    }
    .idx-keyVisual-copy2{
        font-size: 3.8rem;
    }
    .idx-keyVisual-copy2 + p{
        font-size: 1.6rem; margin-top: 2rem;
    }
    .idx-keyVisual-copy2 + .btn{
        margin-top: 2.4rem;
    }
    .company-keyVisual .keyboard{
        /* top:15%; */
    }
    .zeroBug-wrap .zeroBug .numberWorks li strong {
        font-size: 3.6rem;
    }
    .ourClients-wrap .clients-list li{
        width: calc(33.333333% - 4rem); margin:1rem;
    }
    .ourWorks-wrap .ourWorks .swiper-slide{
        border-radius: 3rem;
    }
    .ourWorks-wrap .ourWorks{
        margin-left: 5rem;
    }
    .workInfo {
        left: 5rem; bottom: 5rem;
    }
    .ourWorks .swiper-pagination{
        left:5rem
    }
    .workInfo .workName{
        font-size: 3rem;
    }
    .footer-wrap{
        padding: 10rem 0;;
    }
    
    .idx-works-thumb-wrap{
        width:433px;
    }
    .ourWorks-wrap .ourWorks .swiper-slide {
        height: calc(70vh - 100px);
    }
}
@media screen and (max-width:768px) {
    #progress-text{
        font-size: 5rem;
    }
    .company-keyVisual-wrap .company-keyVisual{
        top:10%; left: 15%; width: 70%;
    }
    .company-keyVisual-wrap .company-keyVisual .heading-2{
        font-size: 7vw;
    }
    .bg-company-keyVisual .bottom .bottom-left .bottom-left-btn{
        padding:1rem 1rem 0 0;
    }
    .bg-company-keyVisual .top{
        height: calc(100% - 80px);
    }
    .bg-company-keyVisual .bottom{
        height: 80px;
    }
    .company-keyVisual .keyboard{
        top:0%; width:130%; right: -35%;
    }
    .company-keyVisual .keyboard #canvas3d{
        transform: scale(1);
    }
    .idx-keyVisual{
        margin-right: 0;
    }
    .idx-keyVisual-copy1{
        font-size: 4.8rem;
    }
    .idx-keyVisual-copy2{
        font-size: 3rem;
    }
    .idx-keyVisual-copy2 + p{
        font-size: 1.5rem; margin-top: 2rem;
    }
    .idx-keyVisual-copy2 + .btn{
        margin-top: 2.4rem;
    }
    
    .main-slide{
        margin-right: 0;
    }
    .scroll-info{
        bottom:-2.5rem; font-size: 1.4rem;
    }
    .idx-works{
        margin-right: 2.4rem;;
    }
    .idx-works .workInfo{
        left:50%;
    }
    .idx-works-thumb-wrap{
        left:50%;
    }
    .idx-works{
        height: calc(100vh - 4.8rem - 50px);
    }
    .idx-works-thumb .swiper-wrapper {
        margin-left: -1.3rem;
    }
    .idx-works-thumb .swiper-slide.swiper-slide-active {
        transform: scale(1.48);
        margin: 0 2.5rem;
    }
    .btn-inquiry {
        display: block;
    }
    .zeroBug-wrap .zeroBug .numberWorks li strong {
        font-size: 3.2rem;
    }
    .zeroBug-wrap{
        padding:20rem 0;
        background-size: contain;
    }
    .ourWorks-wrap{
        margin:10rem 0;
    }
    .ourClients-wrap{
        margin:10rem 0;
    }
    .ourWorks-wrap .ourWorks .swiper-slide{
        height:calc(100vh - 100px) ;
    }
    .ourWorks-wrap .ourWorks .swiper-slide img {
        object-fit: cover;
        height: 100%;
    }    
    .inquiry-form .form-wrap{
        padding:1.2rem 0.5rem;
    }
    
}
@media screen and (max-width:575px) {
    .idx-keyVisual-copy1{
        font-size: 10vw;
    }
    .idx-keyVisual-copy2{
        font-size: 6.5vw;
    }
    .idx-keyVisual-copy2 + p{
        font-size: 1.4rem; margin-top: 1.5rem;
    }
    .idx-keyVisual-copy1:after{
        -webkit-text-stroke: 1px #fff;
    }
    .idx-works-thumb .swiper-slide.swiper-slide-active {
        transform: scale(1.7);
    }
    .inquiry .left {
        border-radius:1.5rem; margin-right: 0;
    }
    .ourWorks-wrap {
        padding-right: 0;
    }
    .ourWorks-wrap .ourWorks{
        margin-left: 0;
    }
    .company-keyVisual .keyboard{
        right:-50%; width:200%;
    }
    .company-keyVisual .keyboard #canvas3d{
        transform: scale(0.8);
    }
    .idx-works-thumb-wrap{
        width:300px;
    }
    .navi-wrap{
        top:5rem; right:8%;
    }
    .ourWorks-wrap .ourWorks .workInfo{
        left: 2.4rem; top:5rem;
    }
    .ourWorks .swiper-pagination{
        left:2.4rem
    }
    .ourClients-wrap .clients-list li{
        width: calc(33.333333% - 2rem);
    }
}
@media screen and (max-width:412px) {
    
}
@media screen and (max-width:360px) {
    
}
@media screen and (max-width:320px) {
    
}