/* common elements */
.wrapper{width:100%; _overflow:hidden;}
.container{padding: 0 2.5rem; width: 100%;}
.section{width: 100%; height: 100vh;}
.scotch{font-family: "scotch-display"; font-size: 32px;}
.italic{font-family: "scotch-display"; font-style: italic; font-size: 32px;}


/* header style */
#header{position:fixed; width:100%; height:auto; z-index:20; _transition:all .3s;}
#header.active{background:#fff; }

header .container{display: flex; justify-content: space-between; align-items: center; width: 100%; padding: .5rem 2.5rem;}

header .logo img{width: 7.1875rem;}
header nav{display: flex; align-items: center;}
header nav ul{display: flex; justify-content: space-between; column-gap: 1rem;}
header nav ul li{cursor: pointer; color: #fbfbfb;  height: 24px; padding: 4px 8px; border-radius: 3px; display: flex; justify-content: center; align-items: center; _transition:all .3s;}
header nav ul li:hover{background-color: #FF00FF; }
#header.active nav ul li {color: #191919;}
#header.active nav ul li:hover{color: #fbfbfb;}



/* 기본 햄버거 메뉴 스타일 */
.hamburger { display: none; flex-direction: column; justify-content: space-between; width: 20px; height: 18px; cursor: pointer; }
.hamburger span { display: block; height: 2px; background-color: #fbfbfb; transition: all 0.3s; }



/* 햄버거 버튼 애니메이션 */
.hamburger.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }



/* Hero section CSS */


#main-section { width: 100%; height: 100vh; max-height: 100vh; position: relative; overflow: hidden; } 
#main-section .main-section-wrap { width: 100%; height: 100%; } 
#main-section .landing-text-box { width: 100%; position: absolute; bottom: 60px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 20px; z-index: 3; } 
#main-section .main-section-wrap .main-video { width: calc(100vw * 1.45);  height: 100%; position: absolute; left: 50%;top: 0; display: block; margin: 0 auto; object-fit: cover;  transform: translateX(-50%) scale(1.10); pointer-events: none; } 



#main-section::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 30%; background: linear-gradient(to bottom, rgba(110, 110, 110, 0.5), rgba(0, 0, 0, 0)); z-index: 2; pointer-events: none; } 
.main-video { opacity: 1; transition: opacity 0.5s ease; } 

#main-section .landing-text-box .video-text p { font-size: 20px; color: #DADADA; padding-bottom: 20px; } 
#main-section .landing-text-box .video-text span { font-size: 32px; color: #DADADA; line-height: normal; } 
#main-section .landing-text-box .video-text span.span-bold { color: #fbfbfb; line-height: 1.5; } 

#main-section .video-desc { width: fit-content; display: flex; flex-direction: column; row-gap: 28px; } 
#main-section .video-desc .video-title-wrap { width: 100%; display: flex; flex-direction: column; row-gap: 5px; } 
#main-section .video-desc .video-title { cursor: pointer; box-sizing: content-box; display: flex; width: 100%; column-gap: 10px; color: #DADADA;  pointer-events: auto; } 
#main-section .video-desc .video-title:hover { color: #FF00FF; transition: all 0.3s; } 
#main-section .video-desc .video-title .ring { display: flex; align-items: center; } 
#main-section .video-desc .video-title .ring lottie-player { width: 14px; height: 14px; visibility: hidden; opacity: 0; } 
#main-section .video-desc .ring.active lottie-player { visibility: visible; opacity: 1; } 
#main-section .video-desc .video-title .span { margin-left: 16px; } 
#main-section .video-desc .story { padding-left: 22px; color: #fbfbfb; font-size: 14px; } 
#main-section .video-desc .video-title .video-name { width: 100%; display: flex; } 
#main-section .video-desc .video-title .video-name .art-name { width: 188px; } 
#main-section .video-desc .video-title .video-name span { font-size: 14px; } 

.video-title .ring.active + .video-name { color: #fbfbfb; }







/* Meet section CSS */
#meet-section{display: flex; flex-direction: column; align-items: center; justify-content: center;width: 100%; padding: 200px 0; _height: 100vh;}
#meet-section img{width: 753px; padding: 60px 0;}
#meet-section .meet-section-top{text-align: center;}

#meet-section .meet-section-top span{font-size: 40px; font-weight: 500;}
#meet-section .meet-section-bottom{text-align: center;}
#meet-section .meet-section-bottom p{font-size: 24px; color: #4D4D4D;}



/* Art section CSS */
#art-section{display: flex; flex-direction: column; width: 100%; position: relative;}
#art-section .section-title{display: flex; justify-content: space-between; border-top: 1px solid #808080; padding-top: 20px; margin: 0 2.75rem;}
#art-section .section-title span{font-size: 40px;}
#art-section .section-title a{cursor: pointer;}

#art-section .art-main-wrap{width: 100%; height: 80vh; margin: 40px 0; max-height: 900px; position:relative;}
#art-section .art-main{width: 100%; height: 100%;}
#art-section .art-main-img{width: 100%; height: 100%; position:absolute; left:0; top:0; display: block; margin: 0 auto; object-fit: cover;}
#art-section .art-title{position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; padding: 0 2.75rem 60px; text-align: end;}
#art-section .art-title p{font-size: 24px; color: #BDBDBD;}
#art-section .art-title span{font-size: 160px; color: #fbfbfb; font-weight: 100; line-height: 160px; margin-bottom: 40px;}
.art-video-wrap{width: 100%;}



/* video css */
.video-wrap { width: 100%; display: flex; padding: 40px 0; border-top: 1px solid #808080; column-gap: 40px; } 
.video-wrap.last { border-bottom: 1px solid #808080; } 


.video-wrap .video-box { width: 40%; height: auto; position: relative; overflow: hidden; _aspect-ratio: 16 / 9; padding-top: 22.5%;}


.video-wrap .video-box iframe { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; pointer-events: none; display: none; transform: scale(1.035);}
.video-wrap .video-box .thumbnail { width: 100%; height: 100%;  object-fit: cover; display: block; cursor: pointer; position: absolute; top: 0; left: 0; z-index: 1; transition: opacity 0.3s ease; }
.video-wrap .video-box:hover .thumbnail {  opacity: 0; }
.video-wrap .video-box:hover iframe {display: block; }


.video-wrap .video-text { width: 60%; display: flex; justify-content: space-between;  flex-direction: column;} 
.video-wrap .video-text .video-title span { font-size: 32px; } 
.video-wrap .video-text .video-title p { font-size: 24px; padding-top: 12px; color: #4D4D4D; } 
.video-wrap .video-text .video-cate { width: 100%; display: flex; column-gap: 5px; color: #4D4D4D; justify-content: flex-end; } 
.video-wrap:hover .play-overlay { opacity: 1; } 
.play-overlay { position: absolute; bottom: 20px; right: 20px; background-color: #191919; color: #fbfbfb; padding: 2px 8px; border-radius: 5px; opacity: 0; transition: opacity 0.3s ease;  z-index: 10; pointer-events: none; transition: all 0.3s;}




/* Mind section CSS */
#mind-section{display: flex; flex-direction: column; align-items: center; justify-content: center;width: 100%; padding: 200px 0; _height: 100vh;}
#mind-section video{width: 870px; padding: 60px 0 0;}
#mind-section .mind-section-top{text-align: center; padding-bottom: 24px;}
#mind-section .mind-section-top span{font-size: 40px; font-weight: 500;}
#mind-section .mind-section-bottom{text-align: center;}
#mind-section .mind-section-bottom p{font-size: 24px; color: #4D4D4D;}



/* Environment section CSS */
#environment-section{display: flex; flex-direction: column; width: 100%; position: relative;}
#environment-section .section-title{display: flex; justify-content: space-between; border-top: 1px solid #808080; padding-top: 20px; margin: 0 2.75rem;}
#environment-section .section-title span{font-size: 40px;}
#environment-section .section-title a{cursor: pointer;}

#environment-section .art-main-wrap{width: 100%; height: 80vh; margin: 40px 0; max-height: 900px; position:relative;}
#environment-section .art-main{width: 100%; height: 100%;}
#environment-section .art-main-img{width: 100%; height: 100%; position:absolute; left:0; top:0; display: block; margin: 0 auto; object-fit: cover;}
#environment-section .art-title{position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; padding: 0 2.75rem 60px; text-align: end;}
#environment-section .art-title p{font-size: 24px; color: #BDBDBD;}
#environment-section .art-title span{font-size: 160px; color: #fbfbfb; font-weight: 100; line-height: 160px; margin-bottom: 40px;}



/* voice section CSS */
#voice-section{display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 200px 0; _height: 100vh;}
#voice-section .voice-section-top{text-align: center; padding-bottom: 24px;}
#voice-section .voice-section-top span{font-size: 40px; font-weight: 500;}
#voice-section .voice-section-bottom{text-align: center;}
#voice-section .voice-section-bottom p{font-size: 24px; color: #4D4D4D;}
#voice-section .voice-img-wrap{display: flex; height: fit-content;padding: 120px 0 80px;}
#voice-section .voice-img-wrap img{width: 680px; }
#voice-section .voice-img-wrap .voice-line{width: 1px; height: 900px; background-color: #808080; margin: 0 20px;}


#voice-section .voice-img-wrap .voice-img{position: relative; width: 100%;}

#voice-section .voice-img-wrap .voice-img .voice-text{width: 100%;position: absolute;bottom: 40px; left: 0; display: flex; justify-content: center; align-items: center; flex-direction: column;} 
#voice-section .voice-img-wrap .voice-img .voice-text h4{color: #fbfbfb; font-size: 36px; font-weight: 100;}
#voice-section .voice-img-wrap .voice-img .voice-text span{color: #808080; font-size: 20px; text-align: center; padding: 23px 0;}
#voice-section .voice-img-wrap .voice-img .voice-text p{font-size: 16px; color: #808080;}



/* Partners section css */
#partners-section{width: 100%; overflow-x: hidden;}
#partners-section .section-title{ border-top: 1px solid #808080; padding-top: 20px; margin: 0 2.75rem;}
#partners-section .section-title span{font-size: 40px;}
#partners-section .section-title p{font-size: 24px; color: #4D4D4D; padding-top: 20px;}




  @keyframes slide {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }
  
  #partners-section .partners-logo {
    
    _overflow: hidden;
    white-space: nowrap;
    display: flex;
    padding: 120px 0 200px;
    position: relative;
    align-items: center; 
  }
  
  #partners-section .partners-logo .logos-slide {
    display: flex;
    animation: 20s slide infinite linear;
    position: relative;
    padding-left: 0; 
  }
  
  #partners-section .partners-logo .logos-slide img {
    height: 180px;
    margin: 0;
  }
  



/* Ongoing section css */
#ongoing-section{width: 100%; height: 100%; padding-bottom: 200px; overflow-x: hidden;}
#ongoing-section .section-title{ display: flex; column-gap: 8px; align-items: center; border-top: 1px solid #808080; padding-top: 20px; margin: 0 2.75rem;}
#ongoing-section .section-title span{font-size: 40px;}
#ongoing-section .section-title dotlottie-player{width: 30px; height: 18px;}
#ongoing-section .ongoing-project-box{display: flex; justify-content: space-around; margin-top: 160px;}
#ongoing-section .ongoing-project-box .ongoing-box{display: flex; flex-direction: column; align-items: center; row-gap: 40px;}
#ongoing-section .ongoing-project-box .ongoing-box img{width: 286px;}
#ongoing-section .ongoing-project-box .ongoing-box span, #ongoing-section .ongoing-project-box .ongoing-box p{color: #4D4D4D;}
#ongoing-section .ongoing-project-box .ongoing-box p{font-size: 20px;}
#ongoing-section .ongoing-project-box .ongoing-box h4{text-align: center; font-size: 32px; font-weight: 300;}





/* Footer section */
footer{width: 100%; height: 1000px; background-color: #191919; color: #fbfbfb;}
footer h3{font-size: 120px; font-weight: 100; padding: 0 2.5rem 40px; width: 100%;}
footer .footer-section{display: flex; width: 100%;}
footer .footer-section .contact-section{display: flex; width: 60%; max-width: 840px;  flex-direction: column; row-gap: 40px;}
footer .footer-section .contact-section h5{font-size: 20px; font-weight: 200;}

footer form{display: flex; flex-direction: column; row-gap: 40px;}
footer form .form-align{display: flex; column-gap: 40px;}
footer form .form-align .input-box{width: 400px; display: flex; flex-direction: column;}
footer form input{background-color: transparent; padding: 16px 0;border: none; border-bottom: 1px solid #808080; color: #fbfbfb; outline: none; border-radius: 0;}
footer form .message-box{width: 100%; display: flex; flex-direction: column; row-gap: 24px;}
footer form .message-box #message{outline: none; width: 100%; border: 1px solid #808080; height: 144px; background-color: transparent; color: #fbfbfb; padding: 12px;resize: none; border-radius: 0;}
footer form .send-btn{width: 100%; display: flex; justify-content: flex-end;}
footer form .send-btn button{width: 400px; height: 44px; border: 1px solid #808080;background-color: transparent; color: #FBFBFB; padding: 14px 0; transition:all .3s;}
footer form .send-btn button:hover{background-color: #FF00FF; border: none;}

footer .company-info{display: flex; flex-direction: column; row-gap: 80px; padding-left: 250px;}
footer .company-info span{font-size: 21px; color: #808080;}
footer .company-info p{padding-top: 20px;}



footer .sns-wrap{display: flex; justify-content: flex-end; padding: 80px 80px 0 0;}
footer .sns-wrap{font-size: 21px;}
footer .sns-wrap .sns{display: flex; align-items: center; column-gap: 32px; padding-right: 125px;}
footer .sns-wrap .sns span{color: #808080;}
footer .sns-wrap i{padding-right: 8px; color: #808080;}

.scotch{font-family: "scotch-display"; font-size: 32px;}
.italic{font-family: "scotch-display"; font-style: italic; font-size: 32px;}











/* 사파리 크로스브라우징 이슈 해결 */

@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
    header nav ul{margin-left: -16px;}
    header nav ul li{margin-left: 16px;}
    #main-section .video-desc .video-title{padding-bottom: 5px;}
    #main-section .video-desc .story{margin-bottom: 20px;}
    #main-section .video-desc .video-title .ring{margin-right: 10px;}
    .video-wrap .video-text{margin-left: 40px;}
    #ongoing-section .section-title span{margin-left: 8px;}
    #ongoing-section .ongoing-project-box .ongoing-box img{margin-bottom: 40px;}
    footer form .form-align, footer form .message-box, footer form .send-btn{margin-top: 40px;}
    footer .sns-wrap .sns a{margin-left: 32px;}
    footer form .message-box label{margin-bottom: 24px;}
    footer .company-info .info-box{margin-bottom: 80px;}

    #main-section .main-section-wrap .main-video { width: calc(100vw * 1.45);  height: 100%; position: absolute; left: 50%;top: 0; display: block; margin: 0 auto; object-fit: fill;  transform: translateX(-50%) scale(1.10); pointer-events: none; } 


  }
}