@import url("common.css");


.contents{height: 100%; position: relative; z-index: 2; background: var(--main);}
 

/* visual */
.main_visual{position:sticky; top:0; width:100%; height:100vh; height:100svh; height:calc(var(--vh, 1vh) * 100); overflow:hidden; background:var(--bk000); z-index:1;}
.visual_swiper{width:100%; height:100%; transform:translateZ(0);}
.visual_swiper .swiper-slide{position:relative; width:100%; height:100%; overflow:hidden; background:var(--bk000); backface-visibility:hidden; -webkit-backface-visibility:hidden;}
.visual_img{position:absolute; inset:0; width:100%; height:100%; overflow:hidden; transform:translateZ(0);}
.visual_img::after{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, var(--bk000) 0%, rgba(0,0,0,0) 35%); opacity:0.4; z-index:1; pointer-events:none;}
.visual_img picture{display:block; width:100%; height:100%;}
.visual_img img{width:100%; height:100%; object-fit:cover; opacity:0.9; transform:scale(1) translateZ(0); backface-visibility:hidden; -webkit-backface-visibility:hidden; will-change:transform;}
@media (prefers-reduced-motion:reduce){.visual_img img{transform:none !important; transition:none !important; will-change:auto;}}
@media (max-width:980px){.main_visual{height:100svh; height:calc(var(--vh, 1svh) * 100);}}
.visual_ctrl{position:absolute; left:50%; bottom:50px; transform:translateX(-50%); z-index:5; display:flex; align-items:flex-end; justify-content:space-between; pointer-events:none; opacity:1; visibility:visible; transition:opacity 0.6s cubic-bezier(0.215,0.61,0.355,1), visibility 0s linear 0s; will-change:opacity;}
.visual_ctrl.is_hidden{opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.6s cubic-bezier(0.215,0.61,0.355,1), visibility 0s linear 0.6s;}
.visual_pager{display:flex; align-items:center; gap:10px; pointer-events:auto;}
.visual_ctrl.is_hidden .visual_pager, .visual_ctrl.is_hidden .visual_scroll{pointer-events:none;}
@media (prefers-reduced-motion:reduce){.visual_ctrl, .visual_ctrl.is_hidden{transition:none; will-change:auto;}}
.visual_pager .swiper-pagination-bullet{width:13px; height:13px; margin:0 !important; border-radius:0; background:var(--white); opacity:0.3; transition:opacity 0.5s cubic-bezier(0.215,0.61,0.355,1);}
.visual_pager .swiper-pagination-bullet-active{opacity:1;}
.visual_scroll{position:relative; width:15px; pointer-events:auto; opacity:0.5; transition:opacity 0.5s cubic-bezier(0.215,0.61,0.355,1);}
.visual_scroll:hover, .visual_scroll:focus-visible{opacity:1;}
.visual_scroll:focus-visible{outline:2px solid var(--white); outline-offset:4px;}
.visual_scroll svg{width: 100%; height: auto; pointer-events:none;}


/* info */
.main_info{padding:200px 0; display:flex; align-items:center; justify-content:center; background:transparent; position:relative; z-index:2;}
.main_info_bg{position:absolute; left:0; bottom:-2px; width:100%; height:0; background:linear-gradient(180deg, rgba(42,41,36,0) 0%, #2A2924 100%); z-index:0; pointer-events:none; will-change:height;}
.info_inner{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:40px; width:70%; max-width:780px; padding:60px; background:var(--sub); box-sizing:border-box; opacity:0.5; transform:scale(0.77); transform-origin:center center; will-change:transform, opacity;}
.info_visual{position:relative; width:100%;}
.info_img{position:relative; width:100%; height:500px; overflow:hidden;}
.info_img_wrap{display:block; position:absolute; inset:0; width:100%; height:100%; overflow:hidden; will-change:transform;}
.info_img_scale{display:block; position:absolute; left:0; top:-20%; width:100%; height:140%; transform:scale(1.2987); transform-origin:center center; will-change:transform;}
.info_img img{display:block; width:100%; height:100%; object-fit:cover; will-change:transform;}
.info_brand{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1; display:flex; flex-direction:column; align-items:center; gap:20px; width:100%; box-sizing: border-box; padding: 0 50px; text-align:center; color:var(--white);}
.info_brand_logo{display:block; width:340px; max-width:100%; height:auto; filter:brightness(0) invert(1);}
.info_brand_sub{display:flex; align-items:flex-start; justify-content:center; gap:15px; white-space:nowrap;}
.info_brand_sub span{opacity:0.3;}
.info_brand_desc{color:var(--white); text-wrap: balance;}
.info_txt{position:relative; width:100%; padding:0 30px; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap: 30px;}
.info_txt_in{display:flex; flex-direction:column; gap:10px;}
.info_tit{color:var(--black); font-weight:500; letter-spacing:0;}
.info_desc{color:rgba(42,41,36,.7);}
.info_more{position:relative; display:flex; align-items:center; justify-content:center; width:80px; height:80px; border-radius:50%; box-sizing:border-box;}
.info_more::after{content:""; display:block; width:100%; height:100%; box-sizing:border-box; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(84,70,62,0.5); transition:border-color 0.5s cubic-bezier(0.215,0.61,0.355,1);}
.info_more:hover::after, .info_more:focus-visible::after{border-color:var(--sub3);}
.info_more::before{content:""; position:absolute; left:0; top:0; width:100%; height:100%; border-radius:50%; background-color:var(--sub3); transform:scale(0); transition:0.6s;}
.info_more:hover::before, .info_more:focus-visible::before{transform:scale(1);}
.info_more_ico{display:block; width:36px; height:36px; position:relative; z-index:2;}
.info_more_ico::before{content:"add_2"; font-family:var(--icon); font-size:36px; color:var(--sub3); line-height:36px; font-weight:200; transition:0.6s;}
.info_more:hover .info_more_ico::before, .info_more:focus-visible .info_more_ico::before{color:var(--white);}
.info_more:focus-visible{outline:2px solid var(--sub3); outline-offset:4px;}
@media (prefers-reduced-motion:reduce){.main_info_bg{height:100%; will-change:auto;}.info_inner, .info_img_wrap, .info_img_scale, .info_img img{will-change:auto; transform:none;}}




/* project */
.main_project{display:flex; flex-direction:column; align-items:center; gap:50px;}
.project_tit{display:flex; align-items:center; gap:15px;}
.project_logo{display:block; width:166px; height:auto; flex-shrink:0; filter:brightness(0) invert(1);}
.project_tit_txt{color:var(--white); opacity:0.5;}
.project_grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; width:100%;}
.project_item{position:relative; height:auto; aspect-ratio:395/510; overflow:hidden; background:var(--bk000);}
.project_item:nth-child(12n+1), .project_item:nth-child(12n+6), .project_item:nth-child(12n+8), .project_item:nth-child(12n+12){grid-column:span 2; aspect-ratio:800/510;}
.project_link{display:block; position:relative; width:100%; height:100%; overflow:hidden;}
.project_img{position:absolute; inset:0; width:100%; height:100%; overflow:hidden;}
.project_img::after{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,0) 45%, var(--bk000)); opacity:0.3; z-index:1; pointer-events:none;}
.project_img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1); transition:transform 1s;}
/* 기본: 세로형 / 가로 셀(12n)에서 land 전환 */
.project_img_land{display:none;}
.project_img_tall{display:block;}
.project_item:nth-child(12n+1) .project_img_land,
.project_item:nth-child(12n+6) .project_img_land,
.project_item:nth-child(12n+8) .project_img_land,
.project_item:nth-child(12n+12) .project_img_land{display:block;}
.project_item:nth-child(12n+1) .project_img_tall,
.project_item:nth-child(12n+6) .project_img_tall,
.project_item:nth-child(12n+8) .project_img_tall,
.project_item:nth-child(12n+12) .project_img_tall{display:none;}
.project_item:hover .project_img img{transform:scale(1.08); transition:transform 2.5s cubic-bezier(0.25,0.1,0.25,1);}
.project_hover{position:absolute; inset:-1px; z-index:2; display:flex; gap:30px; align-items:flex-end; justify-content:space-between; padding:50px; background:rgba(42,41,36,0.8); opacity:0; transition:opacity 0.5s; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:translateZ(0);}
.project_item:hover .project_hover, .project_item:focus-within .project_hover{opacity:1; transition:opacity 0.5s cubic-bezier(0.215,0.61,0.355,1);}
.project_link:focus-visible{outline:2px solid var(--white); outline-offset:-4px;}
.project_info{display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; flex:1; color:var(--white);}
.project_name{display:block; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; line-height:130%;}
.project_year{display:block; opacity:0.5; line-height: 140%;}
.project_ico{flex-shrink:0; width:36px; height:36px;}
.project_ico::before{content:"add_2"; font-family:var(--icon); font-size:36px; color:var(--white); line-height:36px; font-weight:200;}


@media (prefers-reduced-motion:reduce){.project_img img, .project_hover{transition:none;}}





/* banner */
.last_banner{display:flex; flex-direction:column; align-items:center;}
.banner{position:relative; height:700px; overflow:hidden;}
.banner::before{content:""; position:absolute; inset:0; background:var(--bk000); z-index:0;}
.banner_bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.7; z-index:1; transition:opacity 0.5s cubic-bezier(0.215,0.61,0.355,1); pointer-events:none;}
.banner:has(.banner_item:hover) .banner_bg{opacity:0.3;}

.banner_bg picture{display:block; width:100%; height:100%;}
.banner_bg img{width:100%; height:100%; object-fit:cover;}

.banner_list{display:flex; align-items:stretch; width:100%; height:100%; position:relative; z-index:2;}
.banner_item{flex:1; position:relative; border-right:1px solid rgba(255,255,255,0.3); transition:opacity 0.5s cubic-bezier(0.215,0.61,0.355,1);}
.banner_item:last-child{border-right:0;}
.banner:has(.banner_item:hover) .banner_item:not(:hover){opacity:0.4;}
.banner_link{display:block; position:relative; width:100%; height:700px; overflow:hidden; box-sizing: border-box; padding: 0 20px;}
.banner_item_img{position:absolute; inset:0; width:100%; height:100%; overflow:hidden; opacity:0; transition:opacity 0.5s cubic-bezier(0.215,0.61,0.355,1); z-index:0; background-color: var(--bk000);}
.banner_item_img img{width:100%; height:100%; object-fit:cover; opacity:0.7; transform:scale(1); transition:transform 2.5s cubic-bezier(0.25,0.1,0.25,1);}
.banner_item:hover .banner_item_img{opacity:1;}
.banner_item:hover .banner_item_img img{transform:scale(1.08);}
.banner_cont{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:100%; height:100%; color:var(--white); transition:padding 0.5s cubic-bezier(0.215,0.61,0.355,1);}
.banner_item:hover .banner_cont{padding-bottom:80px;}
.banner_tit{text-align:center; line-height: 130%;}
.banner_item--contact .banner_tit{font-weight:400;}
.banner_desc{line-height: 150%; text-align:center; opacity:0; max-height:0; transition:opacity 0.5s cubic-bezier(0.215,0.61,0.355,1), max-height 0.5s cubic-bezier(0.215,0.61,0.355,1);}
.banner_item:hover .banner_desc, .banner_item:focus-within .banner_desc{opacity:0.7; max-height:28px;}
.banner_more{position:absolute; left:50%; top:410px; transform:translateX(-50%); width:36px; height:36px; opacity:0; transition:opacity 0.5s cubic-bezier(0.215,0.61,0.355,1);}
.banner_more::before{content:"add_2"; font-family:var(--icon); font-size:36px; color:var(--white); line-height:36px; font-weight:200;}
.banner_item:hover .banner_more, .banner_item:focus-within .banner_more{opacity:1;}
.banner_item:hover .banner_cont, .banner_item:focus-within .banner_cont{padding-bottom:80px;}
.banner_item:hover .banner_item_img, .banner_item:focus-within .banner_item_img{opacity:1;}
.banner_item:hover .banner_item_img img, .banner_item:focus-within .banner_item_img img{transform:scale(1.08);}
.banner:has(.banner_item:focus-within) .banner_bg{opacity:0.3;}
.banner:has(.banner_item:focus-within) .banner_item:not(:focus-within){opacity:0.4;}
.banner_link:focus-visible{outline:2px solid var(--white); outline-offset:-4px;}
@media (prefers-reduced-motion:reduce){.banner_bg, .banner_item, .banner_item_img, .banner_item_img img, .banner_cont, .banner_desc, .banner_more{transition:none;}}


/*******************************************************************************
    @media 1760px
*******************************************************************************/
@media all and (max-width:1760px){
}
/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){

/* project */
.project_hover{padding:40px;}



}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){






/* project */
.project_hover{gap:20px; padding:30px;}
.project_ico{width:30px; height:30px;}
.project_ico::before{font-size:30px; line-height:30px;}



/* banner */
.banner{height:1000px; }
.banner_list{flex-wrap: wrap;}
.banner_item{flex:auto; width: 50%;}
.banner_item:nth-child(2n){border-right: 0;}
.banner_item:nth-child(n+3){border-top: 1px solid rgba(255, 255, 255, 0.3);}
.banner_link{height:500px;}
.banner_more{top:290px;}


}
/*******************************************************************************
    @media  ~980px
*******************************************************************************/
@media all and (max-width:980px){


/* info */
.main_info{padding:160px 0;}
.info_inner{gap:20px; padding:40px;}
.info_img{height:400px;}
.info_brand{padding: 0 30px;}
.info_brand_logo{width:300px;}
.info_txt{padding:0 10px;}
.info_txt_in{gap:5px;}
.info_more{width:60px; height:60px;}
.info_more_ico{width:28px; height:28px;;}
.info_more_ico::before{font-size:28px; line-height:28px;}





/* project */
.main_project{gap:35px;}
.project_tit{gap:10px;}
.project_logo{width:140px;}
.project_grid{grid-template-columns:repeat(2, 1fr); gap:5px;}
.project_item{grid-column:span 1; height:auto; aspect-ratio:189/244;}
.project_item:nth-child(12n+1), .project_item:nth-child(12n+6), .project_item:nth-child(12n+8), .project_item:nth-child(12n+12){grid-column:span 1; aspect-ratio:189/244;}
.project_item:nth-child(15n+1), .project_item:nth-child(15n+6), .project_item:nth-child(15n+8), .project_item:nth-child(15n+10), .project_item:nth-child(15n+15){grid-column:span 2; aspect-ratio:380/243;}
.project_item:nth-child(15n+7), .project_item:nth-child(15n+9){grid-column:span 2; aspect-ratio:380/490;}
/* 모바일 가로 셀(15n) — PC 12n land/tall 규칙 리셋 후 전환 */
.project_item:nth-child(12n+1) .project_img_land,
.project_item:nth-child(12n+6) .project_img_land,
.project_item:nth-child(12n+8) .project_img_land,
.project_item:nth-child(12n+12) .project_img_land{display:none;}
.project_item:nth-child(12n+1) .project_img_tall,
.project_item:nth-child(12n+6) .project_img_tall,
.project_item:nth-child(12n+8) .project_img_tall,
.project_item:nth-child(12n+12) .project_img_tall{display:block;}
.project_item:nth-child(15n+1) .project_img_land,
.project_item:nth-child(15n+6) .project_img_land,
.project_item:nth-child(15n+8) .project_img_land,
.project_item:nth-child(15n+10) .project_img_land,
.project_item:nth-child(15n+15) .project_img_land{display:block;}
.project_item:nth-child(15n+1) .project_img_tall,
.project_item:nth-child(15n+6) .project_img_tall,
.project_item:nth-child(15n+8) .project_img_tall,
.project_item:nth-child(15n+10) .project_img_tall,
.project_item:nth-child(15n+15) .project_img_tall{display:none;}
.project_hover{padding:25px;}
.project_item:nth-child(n+7){display: none;}

/* banner */
.banner{height:800px; }
.banner_link{height:400px;}
.banner_more{top:230px;}

}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){



/* visual */
.visual_ctrl{bottom:30px;}
.visual_pager{gap:8px;}
.visual_pager .swiper-pagination-bullet{width:9px; height:9px;}


/* info */
.main_info{padding:125px 0;}
.info_inner{padding:20px;}
.info_brand{gap:15px;}
.info_brand_logo{width:250px;}
.info_brand_sub{gap:10px;}
.info_img{height: auto; aspect-ratio: 340/450;}
.info_txt{flex-direction: column; gap: 20px; align-items: flex-start;}
.info_more{width:40px; height:40px;}
.info_more_ico{width:20px; height:20px;;}
.info_more_ico::before{font-size:20px; line-height:20px;}



/* project */
.main_project{gap:20px;}
.project_logo{width:116px;}
.project_hover{padding:20px; gap:10px;}
.project_ico{width:17px; height:17px;}
.project_ico::before{font-size:17px; line-height:17px;}

/* banner */
.banner{height:700px; }
.banner_item{width: 100%; border-right: 0;}
.banner_item:nth-child(n+2){border-top: 1px solid rgba(255, 255, 255, 0.3);}
.banner_link{height:175px; padding: 0 10px;}
.banner_cont{gap:5px;}
.banner_item:hover .banner_cont{padding-bottom:50px;}
.banner_item:hover .banner_desc{max-height:24px;}
.banner_more{top:110px; width:30px; height:30px;}
.banner_more::before{font-size:30px; line-height:30px;}


}