@charset "utf-8";

.skip_snb_menu {display:none;}

#fs_container_wrap { min-height: auto; }

/* ===== INTRO ===== */
#intro_wrap { position:fixed; top:0; left:0; width:100%; height:100%; background:var(--white); z-index:9000; overflow:hidden; }
.intro_inner { position:fixed; top:0; left:0; max-width:calc(100vw - 8rem); }
.i_tit_top { font-size:7.5rem; font-weight:900; color:#111; line-height:1; letter-spacing:-0.4rem; }
.i_tit_bot { font-size:7.5rem; font-weight:900; color:#999; line-height:1; letter-spacing:-0.4rem; }
.i_sub { font-size:1.8rem; color:#7c7c7c; margin-top:1.5rem; }
.char_wrap { display:inline-block; overflow:hidden; vertical-align:bottom; padding:0 0.5rem 0; margin:-0.8rem -0.5rem 0; line-height:1.2; }
.char_inner { display:inline-block; will-change:transform; padding:0 0.15rem; }
.i_sub .char_inner { padding:0 0.05rem; }

/* 인트로 진행 중 헤더 강제 제어 */
body.intro_running #fs_header { transition: none !important; pointer-events: none; }

/* 비주얼 */
.fs_main_visual { position:relative; background:var(--white); padding-bottom:20.4rem; }
.mvis_wrap .swiper-slide { overflow:hidden; position:relative; }
.mvis_img img { width: 100%; height: auto; display: block; }
.mvis_wrap { width:100%; height:calc(100vh - 22.5rem); min-height:70rem; }
.mvis_img { width:120%; height:100%; margin-left:-10%; background-size:auto 115%; background-position:center center; background-repeat:no-repeat; will-change:transform; }

.mvis_text_box { position:absolute; bottom:8.9rem; left:0; width:100%; z-index:10; }
.mvis_text_box .inner { max-width:154rem; margin:0 auto; }
.mvis_text_box .tit_top { font-size:7.5rem; font-weight:900; line-height:1; color:var(--white); text-transform:uppercase; margin-left:-5px; }
.mvis_text_box .tit_top .char_wrap { padding:0 0.4rem; }
.mvis_text_box .bottom_row { display:flex; justify-content:space-between; align-items:flex-end; margin-top:-8px; }
.mvis_text_box .left_text .tit_bot { font-size:7.5rem; font-weight:900; line-height:1; color:#999; text-transform:uppercase; margin-left:-5px; }
.mvis_text_box .left_text .tit_bot .char_wrap { padding:0 0.4rem; }
.mvis_text_box .left_text .sub { font-size:2rem; color:#7c7c7c; letter-spacing:-0.5px; margin-top:-5px; }
.mvis_text_box .left_text .sub .char_wrap { padding:0 0.4rem; }
.mvis_text_box .right_ctrl { display:flex; align-items:flex-end; margin-bottom:4.2rem; flex:1; margin-left:6rem; }

.progress_wrap { flex:1; width:auto; display:flex; flex-direction:column; justify-content:flex-end; margin-right:2rem; padding-bottom:3px; }
.mvis_pager { align-self:flex-end; font-size:1.6rem; color:#aaa; margin-bottom:1rem; letter-spacing:1px; line-height:1; text-align: right; }
.mvis_pager .swiper-pagination-current { color:#666; font-weight:900; }
.mvis_pager .swiper-pagination-total {  }
.mvis_progress { width:100%; height:6px; background:#e0e0e0; position:relative; border-radius:2px; }
.mvis_progress_bar { position:absolute; top:0; left:0; bottom:0; width:0; background:#888; border-radius:2px; }

.btn_mvis_auto { display:inline-flex; align-items:center; justify-content:center; }
.btn_mvis_auto:is(:hover, :focus, :active) { color:#333; }
.btn_mvis_auto img { display:block; max-width:100%; height:auto; pointer-events:none; }

/* 컨텐츠 시작 */
.fs_main_contents { background:var(--white); }

/* 포트폴리오 */
.grid { max-width: 184.4rem; margin: 0 auto; position: relative; width: 100%; overflow: hidden; padding: 0 2rem; display: grid; grid-template-columns: 3fr 4fr 3fr; column-gap: 2.2173%; row-gap: 0; grid-auto-rows: calc( (min(100vw, 184.4rem) - 4rem) / 902 ); }
.grid .grid_item {  }
.grid .grid_item a { display: block; width: 100%; height: 100%; }
.grid .grid_item .img_box { position: relative; overflow: hidden; width: 100%; height: 100%; }
.grid .grid_item .img_box img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.grid .grid_item:hover .img_box img { transform: scale(1.05); }
.grid .grid_item .item_overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.grid .grid_item .item_info { position: absolute; left: 1rem; bottom: 1rem; color: #fff; text-align: left; padding: 2.5rem 3rem; z-index: 2; width: max-content; max-width: calc(100% - 6rem); }
.grid .grid_item .item_info .tit { font-size: 2.6rem; font-weight: 500; opacity: 0; transform: translateX(-1.5rem); transition: all 0.4s ease 0.1s; }
.grid .grid_item .item_info .btn_view { display: inline-block; margin-top: 1.5rem; padding: 0.5rem 2.5rem; border: 1px solid #fff; color: #fff; font-size: 1.4rem; letter-spacing: 1px; opacity: 0; transform: translateX(-1.5rem); transition: all 0.4s ease 0.2s; }
.grid .grid_item:hover .item_info .tit, .grid .grid_item:hover .item_info .btn_view { opacity: 1; transform: translateX(0); }

/* 왼쪽 (1,4,7,10,13) */
.grid_item:nth-child(1) { grid-column: 1; grid-row: 1 / span 206; }
.grid_item:nth-child(4) { grid-column: 1; grid-row: 227 / span 177; }
.grid_item:nth-child(7) { grid-column: 1; grid-row: 424 / span 165; }
.grid_item:nth-child(10) { grid-column: 1; grid-row: 609 / span 178; }
.grid_item:nth-child(13) { grid-column: 1; grid-row: 807 / span 177; }

/* 중간 (2,5,8,11) */
.grid_item:nth-child(2) { grid-column: 2; grid-row: 1 / span 229; }
.grid_item:nth-child(5) { grid-column: 2; grid-row: 250 / span 249; }
.grid_item:nth-child(8) { grid-column: 2; grid-row: 519 / span 230; }
.grid_item:nth-child(11) { grid-column: 2; grid-row: 769 / span 216; }

/* 오른쪽 (3,6,9,12,14) */
.grid_item:nth-child(3) { grid-column: 3; grid-row: 1 / span 206; }
.grid_item:nth-child(6) { grid-column: 3; grid-row: 227 / span 177; }
.grid_item:nth-child(9) { grid-column: 3; grid-row: 424 / span 165; }
.grid_item:nth-child(12) { grid-column: 3; grid-row: 609 / span 178; }
.grid_item:nth-child(14) { grid-column: 3; grid-row: 807 / span 177; }
@media screen and (max-width: 1199px) {

}
@media screen and (max-width: 767px) {
    .grid { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem; }
    .grid_item { width: 100%; }

    /* .grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 20px; gap: 1.5rem; padding: 1.5rem; grid-auto-flow: dense; }

    .grid_item:nth-child(1) { grid-column: auto; grid-row: span 21; }
    .grid_item:nth-child(4) { grid-column: auto; grid-row: span 18; }
    .grid_item:nth-child(7) { grid-column: auto; grid-row: span 16; }
    .grid_item:nth-child(10) { grid-column: auto; grid-row: span 18; }
    .grid_item:nth-child(13) { grid-column: auto; grid-row: span 18; }

    .grid_item:nth-child(2) { grid-column: auto; grid-row: span 23; }
    .grid_item:nth-child(5) { grid-column: auto; grid-row: span 25; }
    .grid_item:nth-child(8) { grid-column: auto; grid-row: span 23; }
    .grid_item:nth-child(11) { grid-column: auto; grid-row: span 22; }

    .grid_item:nth-child(3) { grid-column: auto; grid-row: span 15; }
    .grid_item:nth-child(6) { grid-column: auto; grid-row: span 15; }
    .grid_item:nth-child(9) { grid-column: auto; grid-row: span 18; }
    .grid_item:nth-child(12) { grid-column: auto; grid-row: span 44; } */
}
@media screen and (max-width: 479px) {
    .grid { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem; }
    .grid_item { width: 100%; }
}


/* 동영상 영역 */
.video_area { position:relative; width:100%; height:87rem; margin-top:12rem; overflow:hidden; background:#111; }
.video_bg { position:absolute; top:0; left:0; width:100%; height:100%; }
/* 유튜브 플레이어 */
.yt_overlay { position:absolute; top:0; left:0; width:100%; height:100%; z-index:5; cursor:pointer; transition:opacity 0.4s ease; }
.yt_overlay .video_bg div { width:100%; height:100%; background-position: center; background-size: cover; background-repeat: no-repeat; filter:grayscale(100%); opacity:0.5; }
.yt_play_btn { position:absolute; top:50%; left:50%; width:12rem; height:12rem; border-radius:100%; display:flex; justify-content:center; align-items:center; background-color:rgba(255,0,0,0.7); transform:translate(-50%,-50%); border:none; cursor:pointer; padding:0; transition:transform 0.3s ease; }
.yt_play_btn:is(:hover, :focus, :active) { transform:translate(-50%,-50%) scale(1.1); }
.yt_play_btn img { display:block; max-width:12rem; height:auto; }
.yt_frame_wrap { position:absolute; top:0; left:0; width:100%; height:100%; z-index:4; display:none; overflow:hidden; background:#000; }
.yt_frame_wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }
@media screen and (max-width: 1719px) {
    .mvis_text_box .inner { max-width:96%; }
}
@media only screen and (max-width:1199px){
    .mvis_text_box { bottom:9.6rem; }
    .mvis_text_box .tit_top, .mvis_text_box .left_text .tit_bot { font-size:7rem; }
    .mvis_text_box .inner { max-width:92%; }
}
@media only screen and (max-width:1023px){
    .mvis_wrap { min-height:45rem; max-height:45rem; height:calc(100vh - 12.5rem); }
    .mvis_text_box .right_ctrl { margin-top:20px; width:100%; }
}
@media only screen and (max-width:767px){
    .fs_main_visual { padding-bottom:16.2rem; }
    .mvis_wrap { height:calc(100vh - 10rem); }
    .mvis_text_box { bottom:-3rem; }
    .mvis_text_box .bottom_row { flex-direction:column; align-items:flex-start; margin-top:0; }
    .mvis_text_box .right_ctrl { margin-top:20px; width:100%; margin-left:0; }
    .intro_inner { max-width:calc(100vw - 8rem); }
    .i_tit_top { font-size:5.2rem; }
    .i_tit_bot { font-size:5.2rem; }
    .i_sub { font-size:1.6rem; }
    .mvis_text_box .tit_top, .mvis_text_box .left_text .tit_bot { font-size:5rem; }
    .video_area { height:40rem; margin-top:8rem; }
    .logo_text { font-size:4rem; }
    .red_circle { width:12rem; height:12rem; }

    .fs_main_contents {margin-top:8rem;}
}
@media only screen and (max-width:479px) {
    .mvis_wrap { min-height:35rem; max-height:35rem; }
}