/* 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;}

/* hero */
.hero{width: 100%; height: 920px; 
display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; position: relative;
overflow: hidden;}

.hero_video {position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: brightness(70%);}

.hero .hero_main_title{position: absolute; top: 72px; text-align: center;
    font-family: "Cormorant", serif; font-size: 64px; font-weight: 500; line-height: 90%; letter-spacing: -2px; color: #fff; z-index: 1;}

.hero .hero_title_wrap{display: flex; flex-wrap: wrap; flex-direction: column; gap: 30px; z-index: 1;}
.hero .hero_title_wrap .contents_title_medium_bold_kr{letter-spacing: 0.5px; text-align: center; color: #fff;}
.hero .hero_title_wrap .contents_title_small_medium_kr{text-align: center; color: #fff;}

/* slogan */
.slogan{width: 100%; padding: 0 64px; box-sizing: border-box; 
display: flex; flex-wrap: wrap; flex-direction: column; gap: 40px; align-items: flex-end;}

.slogan_title_wrap{width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 80px;}
.slogan_title_wrap_left{display: flex; flex-wrap: wrap; flex-direction: column; gap: 0; align-items: flex-start;}
.slogan_title_wrap_right{display: flex; flex-wrap: wrap; flex-direction: column; gap: 0; align-items: flex-end;}

.slogan_title{font-family: "Cormorant", serif; font-size: 96px; font-weight: 300; line-height: 100%; letter-spacing: -5px;}

.slogan_box_wrap{width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}

.slogan_box:first-child{width: calc(( 100% - 66px ) * ( 640 / 1726 )); display: flex; flex-wrap: wrap; flex-direction: column; gap: 20px;}
.slogan_img_01{width: 100%; height: 874px; background: url(../images/slogan_01.png) no-repeat 50% 50% /cover;}

.slogan_box:nth-child(2){width: calc(( 100% - 66px ) * ( 360 / 1726 )); display: flex; flex-wrap: wrap; flex-direction: column; gap: 20px; padding-top: 132px;}
.slogan_img_02{width: 100%; height: 430px; background: url(../images/slogan_02.jpg) no-repeat 50% 50% /cover;}

.slogan_box:nth-child(3){width: calc(( 100% - 66px ) * ( 405 / 1726 )); display: flex; flex-wrap: wrap; flex-direction: column; gap: 20px; padding-top: 66px;}
.slogan_img_03{width: 100%; height: 580px; background: url(../images/slogan_03.jpg) no-repeat 50% 50% /cover;}

.slogan_box:last-child{width: calc(( 100% - 66px ) * ( 280 / 1726 )); display: flex; flex-wrap: wrap; flex-direction: column; gap: 20px; padding-top: 132px;}
.slogan_img_04{width: 100%; height: 380px; background: url(../images/slogan_04.jpg) no-repeat 50% 50% /cover;}

/* hover */
.slogan_img{position: relative; cursor: pointer; overflow: hidden;}

.slogan_img .slogan_img_title_wrap{position: absolute; top: 0; left: 0; width: 100%; height: 100%;
display: flex; flex-wrap: wrap; flex-direction: column; gap: 30px; align-items: center; justify-content: center; text-align: center;
background: rgba(0, 0, 0, 0.3); color: #fff; opacity: 0; transition: opacity 0.4s ease;}

.slogan_img .slogan_img_title_wrap .contents_article_xsmall_kr{color: #f0f0f0;}

.slogan_img:hover .slogan_img_title_wrap{opacity: 1;}

.slogan_box_title{font-family: "Cormorant", serif; font-size: 48px; font-weight: 200;}

.slogan_img_04 .contents_title_medium_bold_kr{font-size: 20px;}
.slogan_img_04 .contents_article_xsmall_kr{font-size: 14px;}


/* portfolio */
.portfolio_wrap{width: 100%;}

.portfolio{width: 100%; display: flex; flex-wrap: wrap; flex-direction: column; gap: 40px;}

.portfolio_main_01{width: 100%; height: 1024px; background: url(../images/art_01.jpg) no-repeat 50% 50% /cover;
display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; position: relative;}

.portfolio_main_02{width: 100%; height: 1024px; background: url(../images/eco_01.jpg) no-repeat 50% 50% /cover;
display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; position: relative;}

.portfolio_title{position: absolute; top: 30px;
    font-size: 188px; font-weight: 700; line-height: 90%; letter-spacing: -12px; color: #fff;}
.portfolio_article{font-size: 50px; font-weight: 500; line-height: 150%; letter-spacing: -1px; color: #fff;}

.portfolio_box_wrap{width: 100%; box-sizing: border-box;}
.portfolio_box{height: 600px; padding: 0 16px 16px 16px;
display: flex; flex-wrap: wrap; flex-direction: column; justify-content: flex-end; color: #fff;}

.portfolio_box_01{background: url(../images/art_02.jpg) no-repeat 50% 50% /cover;}
.portfolio_box_02{background: url(../images/art_03.jpg) no-repeat 50% 50% /cover;}
.portfolio_box_03{background: url(../images/art_04.jpg) no-repeat 50% 50% /cover;}
.portfolio_box_04{background: url(../images/art_05.jpg) no-repeat 50% 50% /cover;}
.portfolio_box_05{background: url(../images/art_06.jpg) no-repeat 50% 50% /cover;}
.portfolio_box_06{background: url(../images/art_07.jpg) no-repeat 50% 50% /cover;}
.portfolio_box_07{background: url(../images/art_08.jpg) no-repeat 50% 50% /cover;}

.portfolio_box_08{background: url(../images/eco_02.jpg) no-repeat 50% 50% /cover;}
.portfolio_box_09{background: url(../images/eco_03.jpg) no-repeat 50% 50% /cover;}
.portfolio_box_10{background: url(../images/eco_04.jpg) no-repeat 50% 50% /cover;}
.portfolio_box_11{background: url(../images/eco_05.jpg) no-repeat 50% 50% /cover;}
.portfolio_box_12{background: url(../images/eco_06.jpg) no-repeat 50% 50% /cover;}
.portfolio_box_13{background: url(../images/eco_07.jpg) no-repeat 50% 50% /cover;}
.portfolio_box_14{background: url(../images/eco_08.jpg) no-repeat 50% 50% /cover;}

.portfolio .prev,
.portfolio .next {position: absolute;  top: 31%;  background: none;  border: none;
cursor: pointer;  font-size: 40px;  color: #fff;  transition: 0.3s;  z-index: 10;}

.portfolio .prev {left: 30px;}
.portfolio .next {right: 30px;}

.portfolio .prev:hover,
.portfolio .next:hover {color: #999;}

/* partners */
.partners{width: 100%; padding: 0 64px; box-sizing: border-box;
    display: flex; flex-wrap: wrap; flex-direction: column; gap: 80px;}

.partners .contents_title_wrap{width: 100%; display: flex; flex-wrap: wrap; flex-direction: column; gap: 16px;}

.partners_box{width: ; height: 160px;}

.partners_box_01{background: url(../images/partner01.png) no-repeat 50% 50% /cover;}
.partners_box_02{background: url(../images/partner02.png) no-repeat 50% 50% /cover;}
.partners_box_03{background: url(../images/partner03.png) no-repeat 50% 50% /cover;}
.partners_box_04{background: url(../images/partner04.png) no-repeat 50% 50% /cover;}
.partners_box_05{background: url(../images/partner05.png) no-repeat 50% 50% /cover;}
.partners_box_06{background: url(../images/partner06.png) no-repeat 50% 50% /cover;}
.partners_box_07{background: url(../images/partner07.png) no-repeat 50% 50% /cover;}
.partners_box_08{background: url(../images/partner08.jpg) no-repeat 50% 50% /cover;}

.partners .owl-carousel .owl-stage {transition-timing-function: linear !important;}

/* process */
.process {width: 100%; height: 1000px;
  display: flex; justify-content: center; align-items: center; position: relative; transition: background 0.1s ease;
  background-image: url(../images/Process01.jpg); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.process::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 1;}

.process_wrap {display: flex; width: 73%; height: 750px; position: relative; z-index: 2;}

.process_box {width: 350px; height: 100%; border-right: 1px solid rgba(255,255,255,0.2); padding: 60px 40px; box-sizing: border-box;
  color: #fff; transition: all 0.3s ease; cursor: pointer; background-size: cover; background-position: center; position: relative; overflow: hidden;}

.process_box:last-child { border-right: none; }

/* 호버 시 박스 자체에 이미지가 나타남 */
.process_box:hover, .process_box.active {
  background-image: inherit; /* JS에서 넣어준 배경을 그대로 사용 */
}

.process_box .num { font-size: 24px; font-weight: bold; display: block; margin-bottom: 400px; }
.process_box .title { font-size: 28px; margin-bottom: 20px; }
.process_box .desc { font-size: 16px; line-height: 1.6; opacity: 0; transition: 0.3s; }

/* 활성화된 박스의 설명글 보이기 */
.process_box:hover .desc, .process_box.active .desc { opacity: 1; }

/* history */
.history{width: 100%; padding: 0 64px; box-sizing: border-box;}
.history .contents_title_wrap{width: 100%; display: flex; flex-wrap: wrap; flex-direction: column; gap: 16px;}

.history_list_wrap{width: 100%; border-top: 1px solid #000;}

.history_item {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  width: 100%; padding: 40px 100px; border-bottom: 1px solid #111; box-sizing: border-box; transition: all 0.3s ease;
    position: relative; background-color: #fff; cursor: pointer;}

.history_item:hover {padding: 50px 100px; background-color: #f9f9f9; z-index: 10; box-shadow: 0 10px 30px rgba(0,0,0,0.05);}

.history_list_wrap .contents_article_wrap {display: flex; flex-wrap: wrap; gap: 250px;}

.history_item .subject { flex: 1; transition: 0.3s; }
.history_item .contents_article_small_kr { text-align: right; color: #666; transition: 0.3s; line-height: 1.5; }

.history_item:hover .subject { font-size: 24px; color: #000; }
.history_item:hover .desc { font-size: 22px; color: #000; }

/* contact */
.contact{width: 100%; margin: 240px auto 0 auto; text-align: center;
display: flex; flex-wrap: wrap; flex-direction: column; gap: 100px;}

.contact_title{font-family: "Cormorant", serif; font-size: 100px; font-weight: 100; line-height: 120%; letter-spacing: -7px;}

.contact_form_item_wrap{width: 100%; max-width: 800px; margin: 0 auto; text-align: left;}

.contact_form_item{display: flex; gap: 16px; align-items: flex-end; margin-bottom: 40px; border-bottom: 1px solid #000; padding: 10px 10px;}

.contact_form_item .contents_article_large_en{width: 120px; flex-shrink: 0;}

.contact_form_item input, .contact_form_item textarea 
{flex: 1; border: none; outline: none; font-size: 18px; padding: 0 0 5px 0; background: transparent;}

.contact_form_item input[type="textarea"] { padding-bottom: 100px;}

.contact_form_item input::placeholder {color: #ccc; font-size: 16px;}

.contact_form_item textarea {width: 100%; height: 100px; resize: none; display: block; line-height: 1.6; font-family: inherit;}
.contact_form_item textarea::placeholder {color: #ccc; font-size: 16px; font-family: inherit;}

.contact_form_item:last-child{flex-direction: column; align-items: flex-start; padding-bottom: 0; margin-bottom: 0;}

.contact .btn{align-self: center;}

/* footer */
footer{width: 100%; height: 320px; padding: 40px 64px 60px 64px; box-sizing: border-box; margin-top: 120px; 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;}