/* header */
header{width: 100%; height: 80px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
padding: 0 64px; box-sizing: border-box; background: #000;}
.logo{width: 112px; height: 44px;}

.gnb ul{display: flex; flex-wrap: wrap; gap: 64px;}
.gnb ul li a{display: block; font-size: 18px; font-weight: 600; line-height: 150%; letter-spacing: -0.1px; color: #fff; transition: .3s;}
.gnb ul li a:hover{text-decoration: underline;}

/* sub_main */
.sub_main{width: 100%; height: 920px;
background: url(../images/sub_main.jpg) no-repeat 50% 50% /cover;
display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;}

.sub_main .contents_titlte_small_bold_kr{width: 100%; text-align: center; padding-top: 64px;}

.sub_main_contents{margin-top: 318px; display: flex; flex-wrap: wrap; flex-direction: column; gap: 14px;}

.sub_main_box_wrap{display: flex; flex-wrap: wrap; gap: 24px; justify-content: center;}

.sub_main_box{display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;}

.sub_main_title{font-size: 60px; font-weight: 700; line-height: 100%; letter-spacing: -1px;}
.sub_main_article{font-size: 24px; font-weight: 300; line-height: 150%; letter-spacing: -1px;}

/* sub_contents_box_wrap */

.sub_contents_box_wrap{width: 100%; padding: 0 64px; box-sizing: border-box; margin: 240px auto 0 auto;
display: flex; flex-wrap: wrap; gap: 30px;}

.sub_contents_box{width: calc( ( 100% - 60px ) / 3 );}

.sub_contents_box:first-child, .sub_contents_box:last-child
{display: flex; flex-wrap: wrap; flex-direction: column; gap: 20px;}

.sub_contents_01{width: 100%; height: 400px;
background: url(../images/portfolio_img_01.jpg) no-repeat 50% 50% /cover;}

.sub_contents_wrap{display: flex; flex-wrap: wrap; justify-content: space-between;}

.sub_contents_02{width: calc( ( 100% - 20px ) / 2); height: 400px;
background: url(../images/portfolio_img_02.jpg) no-repeat 50% 50% /cover;}
.sub_contents_03{width: calc( ( 100% - 20px ) / 2); height: 400px;
background: url(../images/portfolio_img_03.jpg) no-repeat 50% 50% /cover;}

.sub_contents_04{background: url(../images/portfolio_img_04.jpg) no-repeat 50% 50% /cover;}

.sub_contents_05{width: calc( ( 100% - 20px ) / 2); height: 290px;
background: url(../images/portfolio_img_05.jpg) no-repeat 50% 50% /cover;}
.sub_contents_06{width: calc( ( 100% - 20px ) / 2); height: 290px;
background: url(../images/portfolio_img_06.jpg) no-repeat 50% 50% /cover;}

.sub_contents_07{width: 100%; height: 510px;
background: url(../images/portfolio_img_07.jpg) no-repeat 50% 50% /cover;}

/* project */
.project{width: 100%; padding: 0 64px; box-sizing: border-box;}

.project_intro{width: 100%; border-bottom: 1px solid #000; padding-bottom: 40px;}
.project_title{font-family: "Cormorant", serif; font-size: 96px; font-weight: 300; line-height: 100%; letter-spacing: -5px;}

.art{width: 100%; padding: 40px 0 80px 0; border-bottom: 1px solid #000;
display: flex; flex-wrap: wrap; flex-direction: column; gap: 60px;}

.project_grid{width: 100%; display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; margin-bottom: 60px;}

.project_header{width: calc( ( 100% - 60px ) / 3); display: flex; flex-wrap: wrap; flex-direction: column; gap: 16px;}

.project_subtitle{font-family: "Cormorant", serif; font-size: 32px; font-weight: 500; line-height: 100%; letter-spacing: -1px;}
.project_article{font-size: 18px; font-weight: 400; line-height: 150%; letter-spacing: -1px;}

.project_item{width: calc( ( 100% - 60px ) / 3); max-width: 32%; 
  display: flex; flex-wrap: wrap; flex-direction: column; gap: 12px;
position: relative; overflow: hidden; cursor: pointer;}

/* hover */
.project_media_wrap {position: relative; overflow: hidden;}

.project_media_wrap img,
.project_media_wrap video {object-fit: cover; display: block; transition: opacity 0.3s ease;}

.project_media_wrap video {width: 100%; height: auto;
  position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; z-index: 1;}

.project_media_wrap:hover img {opacity: 0;}

.project_media_wrap:hover video {opacity: 1; z-index: 2;}


.project_title_wrap{display: flex; flex-wrap: wrap; flex-direction: column; gap: 2px;}
.project_title_wrap .contents_article_xsmall_kr{color: #666;}

.project .btn_more{text-align: center;}

.environment{width: 100%; padding: 40px 0 80px 0; border-bottom: 1px solid #000;
display: flex; flex-wrap: wrap; flex-direction: column; gap: 60px;}

.environment .project_header{text-align: right;}

/* view more */
.art_select{display: none;}
.environment_select{display: none;}

/* timeline */
.timeline {width: 100%; padding: 0 64px; box-sizing: border-box; margin: 240px auto 0 auto;}

.timeline_item_wrap {width: 100%; position: relative; display: flex; flex-direction: column; align-items: center;}

/* 기본 상태 */
.timeline_item {position: relative; width: 100%; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 456px; align-items: center; border-bottom: 1px solid #000;
  height: 231px; opacity: 0.6; cursor: pointer; overflow: hidden;
  transition: height 0.6s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.6s ease; z-index: 1;}



.timeline_inner {
  width: 100%; max-width: 1392px; margin: 0 auto; display: flex;
  align-items: center; gap: 456px; position: relative; box-sizing: border-box;
}

.timeline_number {
  font-family: "Cormorant", serif; font-size: 480px; font-weight: 100;
  color: #000; position: absolute; top: -60px; left: 0; line-height: 0.8;
  transition: top 0.7s cubic-bezier(0.25, 1, 0.3, 1), opacity 1 ease;
  pointer-events: none;
}

.timeline_content {
   padding: 84px 0;
  margin-left: 600px; /* 숫자와 겹치지 않도록 여백 */
  transition: margin-top 0.6s ease;
}

.timeline_heading {font-family: "Cormorant", serif; font-size: 72px; font-weight: 300; line-height: 100%; letter-spacing: -2.3px; margin-bottom: 58px;}

.timeline_content .contents_article_large_kr{margin-bottom: 18px;}
.timeline_content .contents_article_large_kr,
.timeline_tags {opacity: 0; transition: opacity 0.4s ease;}

/* Hover / Active 상태 */
.timeline_item:hover,
.timeline_item.active {height: 448px; opacity: 1; z-index: 2;}

.timeline_item:hover .timeline_number,
.timeline_item.active .timeline_number {
  top: -50px; opacity: 1;}

  .timeline_item:hover:last-child .timeline_number,
.timeline_item.active:last-child .timeline_number {
  top: -120px; opacity: 1;}

.timeline_item:hover .contents_article_large_kr,
.timeline_item.active .contents_article_large_kr,
.timeline_item:hover .timeline_tags,
.timeline_item.active .timeline_tags {
  opacity: 1;}

.timeline_tags {width: 360px; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px;}

.timeline_tags span {border: 1px solid #000; border-radius: 100px; padding: 10px 20px; box-sizing: border-box;}

/* hire */
.hire{width: 100%; height: 680px; display: flex; flex-wrap: wrap; flex-direction: column; gap: 40px;
justify-content: center; align-items: center; color: #fff; text-align: center; margin: 240px auto 0 auto;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.8) 100%), url(../images/contact.jpg) lightgray 0px -177.291px / 100% 186.516% no-repeat;}

/* for_your */
.for_your{width: 100%; display: flex; flex-wrap: wrap; flex-direction: column; gap: 220px; padding: 30px 0 0 0; box-sizing: border-box;}

.for_your_title{font-family: "Cormorant", serif; font-size: 24px; font-weight: 300; line-height: 150%; letter-spacing: 25px; text-align: center;}

.for_your_item_wrap{width: 100%; height: 460px; display: block;}

.for_your_item_wrap .owl-stage-outer,
.for_your_item_wrap .owl-stage,
.for_your_item_wrap .owl-item {
  height: 100% !important;
}

.for_your_item{height: 100% !important; display: flex !important; flex-direction: column; gap: 8px; 
  justify-content: flex-end; align-items: flex-start;}


.for_your_item .contents_title_wrap{width: 100%; display: flex; flex-wrap: wrap; flex-direction: column; gap: 4px;}
.for_your_item .contents_title_wrap .contents_article_xsmall_kr{color: #555; line-height: 120%;}

/* footer */
footer{width: 100%; height: 320px; padding: 40px 64px 60px 64px; box-sizing: border-box; border-top: 1px solid #C5C5C5;
display: flex; flex-wrap: wrap; flex-direction: column; justify-content: space-between;}

.footer_top{width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}

.footer_gnb ul{display: flex; flex-wrap: wrap; gap: 40px;}
.footer_gnb ul li a{display: block; color: #000; transition: .2s;}
.footer_gnb ul li a:hover{color: #999;}

.footer_gnb .contents_title_small_bold_kr{font-size: 16px;}

.footer_top .sns{display: flex; flex-wrap: wrap; gap: 16px;}
.footer_top .sns a i{font-size: 26px; color: #000; transition: .2s;}
.footer_top .sns a i:hover{color: #999;}

.footer_btm{width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;}
.footer_info{display: flex; flex-wrap: wrap; flex-direction: column; gap: 40px;}

.copyright{font-size: 14px; font-weight: 100; letter-spacing: -0.5px;}