/* main page reponsive css */
@media (min-width: 1900px) {
    #main-section .main-section-wrap .main-video {
        width: 100%; 
        height:180%;
        left: 0;
        top: 50%;
        transform: translateY(-50%) scale(1.10);
    }
}


@media screen and (max-width: 1571px){

    /* Hero section CSS */
    #main-section .landing-text-box .video-text span{font-size: 28px;}

    /* Meet section CSS */
    #meet-section .meet-section-top span{font-size: 32px;}
    #meet-section .meet-section-bottom p{font-size: 20px;}

    #meet-section img{width: 728px;}
    #main-section .video-desc{row-gap: 24px;}
    #main-section .video-desc .video-title-wrap{row-gap: 3px;}
    #main-section .video-desc .video-title .video-name .art-name{width: 184px;}


    /* Art section CSS */
    #art-section .section-title span{font-size: 32px;}
    #art-section .section-title a p{font-size: 14px;}

    #art-section .art-title span{font-size: 120px; line-height: 1; }
    #art-section .art-title p{font-size: 20px;}


    /* video css */
    .video-wrap .video-text{ width: 60%;}
    .video-wrap .video-text .video-title span{font-size: 24px;}
    .video-wrap .video-text .video-title p{font-size: 20px;}
    .video-wrap .video-text .video-cate{font-size: 14px;}

    
    /* Mind section CSS */
    
    #mind-section .mind-section-top span{font-size: 28px;}
    #mind-section .mind-section-bottom p{font-size: 20px;}


    /* Environment section CSS */
    #environment-section .section-title span{font-size: 32px;}
    #environment-section .section-title a p{font-size: 14px;}
    #environment-section .art-title span{font-size: 120px; line-height: 1; }
    #environment-section .art-title p{font-size: 20px;}


    /* voice section CSS */
    #voice-section .voice-section-top span{font-size: 32px;}
    #voice-section .voice-section-bottom p{font-size: 16px;}
    #voice-section .voice-img-wrap{padding: 60px 0 0 ; display: flex; justify-content: center;}
    #voice-section .voice-img-wrap .voice-img{width: 45%;}
    #voice-section .voice-img-wrap img{width: 100%;}
    #voice-section .voice-img-wrap .voice-line{height: auto; }

    #voice-section .voice-img-wrap .voice-img .voice-text h4{font-size: 24px;}
    #voice-section .voice-img-wrap .voice-img .voice-text p{font-size: 12px;}
    #voice-section .voice-img-wrap .voice-img .voice-text span{font-size: 14px; padding: 20px 0;}



    /* Partners section css */
    #partners-section .section-title{padding-top: 20px;}
    #partners-section .section-title span{font-size: 32px;}
    #partners-section .section-title p{font-size: 20px; }


    /* Ongoing section css */
    #ongoing-section .section-title span{font-size: 32px;} 
    #ongoing-section .section-title{ padding-top: 20px;}
    #ongoing-section .ongoing-project-box .ongoing-box img{padding-bottom: 12px;}
    #ongoing-section .ongoing-project-box .ongoing-box h4{font-size: 28px;}
    #ongoing-section .ongoing-project-box .ongoing-box{row-gap: 28px;}
    #ongoing-section .ongoing-project-box .ongoing-box span{font-size: 14px;}

    
    /* Footer section */
    footer{height: 100%;}
    footer h3{padding: 40px 2.5rem ;}
    footer .footer-section{flex-direction: column; row-gap: 200px; align-items: flex-end;}
    footer .company-info{width: 65%;  padding-left: 0; }
    footer .footer-section .contact-section{max-width: none; width: 65%;}
    footer .sns-wrap{padding: 140px 40px 40px 0;}
    footer .sns-wrap .sns{width: 45%;}


    @media not all and (min-resolution: 0.001dpcm) {
        @supports (-webkit-appearance: none) {
        #ongoing-section .ongoing-project-box .ongoing-box img{margin-bottom: 28px;}
        footer .footer-section .contact-section{margin-bottom: 200px;}
      }
    }
    
}




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



    /* header style */

    header .container{padding: .5rem 20px;}


    /* Hero section CSS */

    #main-section{height: 900px; position:relative; overflow:hidden; }
    #main-section .main-section-wrap .main-video{ width: calc(100vw * 2.10);}
    #main-section .video-desc .video-title .video-name, #main-section .video-desc .story{display: none;}
    #main-section .landing-text-box{padding: 0 20px 32px; bottom:0px;}
    #main-section .video-title .ring {position: absolute; bottom: 32px; right: 20px; width: 24px; height: 25px; z-index: 10;}
    #main-section .video-desc .video-title .ring lottie-player{width: 24px; height: 24px;}


    /* Meet section CSS */
    #meet-section{padding: 160px 0;}


    /* Art section CSS */
    #art-section .art-main-wrap {max-height: 600px;}
    #art-section .art-title{padding-bottom: 40px;}
    #art-section .art-title span{font-size: 80px; margin-bottom: 20px;}


   /* video css */
   .video-wrap .video-box{width: 55%; padding-top: 28.125%;}
   .video-wrap .video-text{ width: 50%;}
   .video-wrap .video-text .video-title span { font-size: 20px; }
   .video-wrap .video-text .video-title p { font-size: 16px; }
   .video-wrap .video-text .video-cate{font-size: 12px;}
   .video-wrap:hover .play-overlay{font-size: 14px;}



    /* Mind section CSS */
    #mind-section{padding: 160px 0;}
    #mind-section video{width: 614px;}



    /* Environment section CSS */
    #environment-section .art-title {padding-bottom: 40px;}
    #environment-section .art-title span{font-size: 80px; margin-bottom: 20px;}
    #environment-section .art-title p{font-size: 20px;}

    
    
    /* voice section CSS */
    #voice-section{padding: 160px 0;}
    #voice-section .voice-section-top{padding-bottom: 20px;}
    #voice-section .voice-section-top span{font-size: 24px;}
    #voice-section .voice-img-wrap .voice-img .voice-text span{font-size: 14px; padding: 20px 0;}
    #voice-section .voice-img-wrap .voice-img .voice-text p{font-size: 12px;}


    /* Partners section css */
    #partners-section .partners-logo{padding: 100px 0 150px;}
    #partners-section .partners-logo .logos-slide img{height: 120px;}

    /* Ongoing section css */
    #ongoing-section{padding-bottom: 160px;}
    #ongoing-section .ongoing-project-box{margin-top: 100px;}
    #ongoing-section .ongoing-project-box .ongoing-box img{width: 140px;}
    #ongoing-section .ongoing-project-box .ongoing-box h4{font-size: 20px;}
    #ongoing-section .ongoing-project-box .ongoing-box span{font-size: 12px;}
    #ongoing-section .ongoing-project-box .ongoing-box p{font-size: 16px;}
    #ongoing-section .ongoing-project-box .ongoing-box{row-gap: 20px;}


    
    /* Footer section */
    footer h3{font-size: 80px;}
    footer .company-info{width: 85%;  }
    footer .footer-section .contact-section{width: 85%;}
    footer .sns-wrap .sns{width: 60%;}

    @media not all and (min-resolution: 0.001dpcm) {
        @supports (-webkit-appearance: none) {
        #ongoing-section .ongoing-project-box .ongoing-box img{margin-bottom: 20px;}
      }
    }
}




@media screen and (max-width: 900px) {

    .container{padding: 0 20px; width: 100%;}


    /* Hero section CSS */

    #main-section .landing-text-box .video-text span{font-size: 24px;}
    #main-section .main-section-wrap .main-video { width: calc(100vw * 2.80);}


    /* Meet section CSS */
    #meet-section .meet-section-top span{font-size: 24px;}
    #meet-section img{padding: 32px 0; width: 568px;}
    #meet-section .meet-section-bottom p{font-size: 16px;}



    /* Art section CSS */
    #art-section .section-title{margin: 0 20px; padding-top: 16px;}
    #art-section .section-title span{font-size: 24px;}
    #art-section .art-main-wrap{margin: 20px 0;}

    #art-section .art-title{padding: 0 20px 32px;}
    #art-section .art-title span{font-size: 80px; line-height: 1; margin-bottom: 20px;}
    #art-section .art-title p{font-size: 16px;}
   


    /* video css */
    .video-wrap{flex-direction: column; padding: 20px 0;}
    .video-wrap .video-box{width: 100%; _aspect-ratio: 16 / 9; height: auto;  overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative; padding-top: 56.25%;}
    .video-wrap .video-box video { width: 100%; height: 100%; object-fit: cover; transition: none; } 
    .video-wrap .video-text{width: 100%; row-gap: 80px;}
    .video-wrap .video-text .video-title{display: flex; flex-direction: column;}
    .video-wrap .video-text .video-title span{padding-top: 16px;}
    .video-wrap .video-box iframe{transform: scale(1);}


    /* Mind section CSS */

    #mind-section{padding: 160px 20px;}
    #mind-section .mind-section-top span{font-size: 24px;}
    #mind-section video{padding: 24px 0; width: 500px;}
    #mind-section .mind-section-bottom p{font-size: 16px;}



    /* Environment section CSS */
    #environment-section .section-title span{font-size: 24px;}
    #environment-section .section-title{margin: 0 20px; padding-top: 16px;}
    
    #environment-section .art-main-wrap{margin: 20px 0;}
    #environment-section .art-title{padding: 0 20px 32px;}
    #environment-section .art-title span{font-size: 80px; line-height: 1; margin-bottom: 20px;}
    #environment-section .art-title p{font-size: 16px;}





    /* voice section CSS */
    #voice-section{padding: 160px 20px;}
    #voice-section .voice-section-top{padding-bottom: 12px;}
    #voice-section .voice-section-top span{font-size: 24px;}
    #voice-section .voice-img-wrap img{width: 100%;}
    #voice-section .voice-img-wrap .voice-line{margin: 0 16px;}
    
    #voice-section .voice-img-wrap .voice-img .voice-text span{font-size: 12px;padding: 16px 0;}
    #voice-section .voice-img-wrap .voice-img .voice-text{bottom: 20px;}
    #voice-section .voice-img-wrap .voice-img .voice-text h4{font-size: 20px;}



    /* Partners section css */
    #partners-section .section-title{margin: 0 20px; padding-top: 16px;}
    #partners-section .section-title span{font-size: 24px;}
    #partners-section .section-title p{font-size: 16px;}
    
    /* #partners-section .partners-logo img{height: 73px;} */

    #partners-section .partners-logo{padding: 80px 0 120px;}
    #partners-section .partners-logo .logos-slide img{height: 80px;}



    /* Ongoing section css */
    #ongoing-section .section-title dotlottie-player{width: 20px; height: 12px;}
    #ongoing-section .ongoing-project-box{margin-top: 60px;}
    #ongoing-section .section-title{margin: 0 20px; padding-top: 16px;}
    #ongoing-section .section-title span{font-size: 24px;}



    /* Footer section */
    footer{height: 100%;}
    footer h3{font-size: 60px; padding: 40px 20px 80px;}
    footer .footer-section{row-gap: 120px;}
    footer .footer-section .contact-section{ width: 100%; row-gap: 20px; padding-left: 0;}
    footer .footer-section .contact-section h5{font-size: 16px;}
    footer form{row-gap: 20px; font-size: 14px;}
    footer form .form-align{column-gap: 20px;}
    footer form .send-btn button{width: 100%;}
    footer .company-info{padding-left: 0; row-gap: 40px; width: 100%;}
    footer .company-info span{font-size: 17px;}
    footer .company-info p{font-size: 14px; padding-top: 12px;}
    footer .sns-wrap{padding: 80px 20px 20px; justify-content: space-between; font-size: 17px;}
    footer .sns-wrap .sns {margin-right: 0;}
    footer form .message-box{row-gap: 12px;}


    @media not all and (min-resolution: 0.001dpcm) {
        @supports (-webkit-appearance: none) {
            
            .video-wrap .video-text{margin-left: 0;}
            .video-wrap .video-text .video-title{margin-bottom: 80px;}
            footer .footer-section .contact-section{margin-bottom: 120px;}
      }
    }




}


@media screen and (max-width: 580px) {

    /* header style */
    #header.active .hamburger span{background-color: #191919;}
    #header .hamburger { display: flex; }
    #header .hamburger.open span{background-color: #191919;}
    #header nav{ display: none; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; z-index: 10; padding: 1.5rem 0; _transition:all .3s;}
    #header nav.active { display: flex;  background-color: #fff;}
    #header nav ul { flex-direction: column; align-items: flex-end; row-gap: 1.5rem; width: 100%; padding-right: 16px;}
    #header.active nav ul li { color: #191919; padding: 4px 8px;}



    /* Hero section CSS */
    #main-section{height: 580px;}
    #main-section .landing-text-box{padding: 0 20px 20px;}
    #main-section .landing-text-box .video-text p{font-size: 12px;}
    #main-section .landing-text-box .video-text span{font-size: 16px;}
    #main-section .video-title .ring{width: 16px; height: 17px; bottom: 20px;}



    /* Meet section CSS */
    #meet-section{padding: 120px 0;}
    #meet-section .meet-section-top span{font-size: 20px;}
    #meet-section img{width: 328px;}
    #meet-section .meet-section-bottom p{font-size: 12px;}


    /* Art section CSS */
    #art-section .section-title span{font-size: 20px;}
    #art-section .section-title a p{font-size: 12px;}
    #art-section .art-main-wrap{margin: 16px 0; max-height: 400px;}
    #art-section .art-title span{font-size: 40px; margin-bottom: 10px;}
    #art-section .art-title p{font-size: 12px;}



    /* video css */
    .video-wrap{padding: 16px 0;}
    .video-wrap .video-text .video-title span{font-size: 16px;}
    .video-wrap .video-text .video-title p{font-size: 12px;}


    /* Mind section CSS */
    #mind-section{padding: 120px 20px;}
    #mind-section .mind-section-top span{font-size: 20px;}
    #mind-section .mind-section-bottom p{font-size: 12px;}
    #mind-section video{width: 320px;}


    /* Environment section CSS */
    #environment-section .section-title span{font-size: 20px;}
    #environment-section .section-title a p{font-size: 12px;}
    #environment-section .art-main-wrap{margin: 16px 0; max-height: 400px;}
    #environment-section .art-title span{font-size: 40px; margin-bottom: 10px;}
    #environment-section .art-title p{font-size: 12px;}


    /* voice section CSS */
    #voice-section{padding: 120px 0;}
    #voice-section .voice-section-top span{font-size: 20px;}
    #voice-section .voice-section-bottom p{font-size: 12px;}
    #voice-section .voice-img-wrap{flex-direction: column; padding: 20px 0 0; align-items: center;}
    #voice-section .voice-img-wrap .voice-img{width: 360px;}
    #voice-section .voice-img-wrap .voice-line{display: none;}




    /* Partners section css */
    #partners-section .section-title span{font-size: 20px;}
    #partners-section .section-title p{font-size: 12px;}
    /* #partners-section .partners-logo{padding: 100px 0 200px;} */
    #partners-section .partners-logo .logos-slide img{height: 73px;}


    /* Ongoing section css */
    #ongoing-section{padding-bottom: 120px;}
    #ongoing-section .section-title span{font-size: 20px;}
    #ongoing-section .ongoing-project-box{margin-top: 60px;}
    #ongoing-section .ongoing-project-box .ongoing-box h4{font-size: 17px;}
    #ongoing-section .ongoing-project-box .ongoing-box p{font-size: 14px;}



    /* Footer section */
    footer h3{font-size: 40px; padding-top: 30px;}
    footer form .form-align{flex-direction: column; row-gap: 20px;}
    footer form .form-align .input-box{width: 100%;}
    footer .company-info span{font-size: 15px;}
    footer .company-info p{font-size: 12px;}
    footer .sns-wrap{font-size: 15px;}
    footer .sns-wrap .sns{padding-right: 0; column-gap: 20px;}
    footer .footer-section{row-gap: 80px;}
    footer .sns-wrap .sns span{display: none;}
    footer .sns-wrap i{padding-right: 0; font-size: 24px;}
    
    @media not all and (min-resolution: 0.001dpcm) {
        @supports (-webkit-appearance: none) {
        footer .sns-wrap .sns{margin-left: 20px;}
        footer form .form-align .input-box{margin-top: 20px;}
      }
    }
}