/* common elements */
.wrapper{width:100%;}
.container{padding: 0 2.5rem; width: 100%;}
.section{width: 100%; height: 100vh;}


/* header style */

#header nav ul li {color: #191919; border-radius: 3px; }
#header nav ul li:hover{background-color: #FF00FF; color: #fbfbfb;}
.hamburger span{background-color: #191919;}

/* work main section css */
#work-main-section .work-main-wrap{width: 100%; height: 100%; padding: 180px 2.5rem 80px;}
#work-main-section .work-main-wrap .work-main-title .title-top{display: flex; align-items: center;  column-gap: 11px;}
#work-main-section .work-main-wrap .work-main-title span{font-size: 120px; font-weight: 300; line-height: 1;}
#work-main-section .work-main-wrap .work-main-title .scotch, #work-main-section .work-main-wrap .work-main-title .italic{font-size: 60px; text-align: center;}

#work-main-section .work-main-wrap .work-main-video{width: 100%; padding-top: 80px; display: flex; flex-direction: column; align-items: flex-end; }
#work-main-section .work-main-wrap .work-main-video .main-video-wrap{display: flex; width: 100%; justify-content: flex-end;}
#work-main-section .work-main-wrap .work-main-video .main-video-wrap .text{text-align: end; padding-right: 24px; font-size: 20px; color: #4d4d4d;}

#work-main-section .work-main-wrap .work-main-video .iframe-wrap { width: 50%; _aspect-ratio: 16 / 9; height: auto; overflow: hidden; position: relative; margin-bottom: 20px; padding-top: 28.125%;}
#work-main-section .work-main-wrap .work-main-video .iframe-wrap iframe { width: 140%; height: 120%; position: absolute; top: -20%; left: -20%; object-fit: cover; pointer-events: none; }


#work-main-section .work-main-wrap .work-main-video span, #work-main-section .work-main-wrap .work-main-video i{color: #4d4d4d;}




/* portfolio section */
#portfolio-section{width: 100%; padding: 40px 20px;}
#portfolio-section .cate-wrap{width: 100%; display: flex; justify-content: space-between; padding: 20px 0;  border-top: 1px solid #808080; }
#portfolio-section .cate-wrap .work-cate{display: flex;}
#portfolio-section .cate-wrap .work-cate .cate-box{width: 120px; height: 36px; display: flex; justify-content: center; align-items: center;}
#portfolio-section .cate-wrap .work-cate .cate-box.active{background-color: #191919; color: #fbfbfb;}

#portfolio-section .work-video-wrap {display: flex; flex-wrap: wrap; column-gap: 20px; width: 100%;}
#portfolio-section .video-wrap.hidden {display: none;}

#portfolio-section .cate-wrap .list-style{display: flex; column-gap: 24px;}
#portfolio-section .cate-wrap .list-style i{font-size: 24px; color: #dadada;}
#portfolio-section .cate-wrap .list-style i.active{color: #191919;}



/* video css grid view */
.video-wrap.grid-view {width: 49%; padding: 0; padding-bottom:20px; border-top: none; gap: 0; display: flex; flex-direction: column; position: relative;} 
.video-wrap.last.grid-view {border-bottom: none;} 
.video-wrap.grid-view .video-box {width: 100%; _aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; overflow: hidden; padding-top: 56.25%;} 
.video-wrap.grid-view .video-box video {width: 100%; height: 100%; object-fit: cover;} 


.video-wrap.grid-view .video-text { height:calc(100% - 20px); flex-direction: row; position: absolute; top: 0; left: 0;  width: 100%; background: rgba(119, 119, 119, 0.274); color: #fbfbfb; padding: 20px; box-sizing: border-box; z-index: 1; opacity:0;display: flex; align-items: flex-end; transition: all 0.3s;}
.video-wrap.grid-view .video-text .video-title p {color:#fbfbfb;}
.video-wrap.grid-view .video-title { margin-bottom: 10px; }
.video-wrap.grid-view .video-cate{display: none;}
.video-wrap.grid-view .hover-video { object-fit: cover; }

.video-wrap.grid-view .video-text:hover{opacity:1;}




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

@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
  #portfolio-section .cate-wrap .list-style i{margin-left: 24px;}
  } 
}