@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Reddit+Sans:ital,wght@0,200..900;1,200..900&display=swap');
@font-face {
    font-family: 'S-CoreDream-6Bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'HumaneBlack';
    src: url('/font/Humane-Black.woff2') format('woff2'), /* Modern Browsers */
         url('/font/Humane-Black.otf') format('opentype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}
@font-face {
    font-family: 'Humane';
    src: url('/font/Humane-Bold.woff2') format('woff2'), /* Modern Browsers */
         url('/font/Humane-Bold.otf') format('opentype'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

/************ 프리텐다드 ***********/

html, body { 
    /* font-family: 'Pretendard', sans-serif; */ 
    font-family: "Noto Sans", sans-serif; letter-spacing: var(--letter);
    font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height:normal; overflow-x: hidden; 
    background: var(--black); color:var(--gray); scroll-behavior: smooth;
}
html.noScroll, body.noScroll {min-height:100%; overflow:hidden !important; touch-action:none;}

:root {
    --white: #fff;
    --black: #050505;
    --gray: #ccc;
    --grey-border: 1px solid #E6E6E6;
    --yellow: #FFD703;

    --font14: 0.875rem;
    --font15: 0.9375rem;
    --font16: 1rem;
    --font17: 1.0625rem;
    --font18: 1.125rem;
    --font20: 1.25rem;
    --font22: 1.375rem;
    --font25: 1.5625rem;
    --font27: 1.6875rem;
    --font30: 1.875rem;
    --font32: 2rem;
    --font40: 2.5rem;
    --font45: 2.8125rem;
    --font50: 3.125rem;
    --font200: 12.5rem;

    --thin: 100;
    --light: 300;
    --reg: 400;
    --medi: 500;
    --semi: 600;
    --bold: 700;
    --heavy: 800;

    --letter: -0.5px;
    
    --headerHei: 90px;
}

.noto {font-family: "Noto Sans", sans-serif;}
.reddit {font-family: "Reddit Sans", sans-serif; letter-spacing: 0;}
.humaneB {font-family: 'HumaneBlack';}
.humane {font-family: 'Humane';}
#hamPage nav li a > h5,
.content_title,
.video_box .title,
.content_title.sm,
#directorSec2 article .director_name_wrap .director_name,
#mainSec4 .title_wrap .more_btn {font-family: 'Humane'; letter-spacing: .5px;}

/* 헤더 */
#header {width: 100%; height: var(--headerHei); background: transparent; color: var(--white); position: fixed; top: 0; left: 0; z-index: 1000; transition: background .5s;}
/* #header::after {content: ""; display: block; width: 100%; height: 2px; background: red; position: absolute; top: 50%; transform: translateY(-50%); left: 0;} */
#header .inner {width: 100%; height: 100%; padding: 0 50px; display: flex; align-items: center; justify-content: space-between ;}
#header .logo img {max-height: 70px; margin-top: 15px;}
#header.bg_b {background: var(--black);}
#header .hamberger {width: 50px; height: 50px; row-gap: 7px; cursor: pointer; display: flex; flex-direction: column; transition: row-gap .3s; justify-content: center; align-items: center;}
#header .hamberger span {display: block; width: 50px; height: 3px; background: var(--white); transition: margin .3s, transform .6s; transform-origin: center;}
#header .hamberger.open {row-gap: 0;}
#header .hamberger.open span:first-child {transform: rotate(14deg); margin-bottom: -1.5px;}
#header .hamberger.open span:last-child {transform: rotate(-14deg); margin-top: -1.5px;}

#hamPage {width: 100%; height: 100vh; background: var(--black); position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center; display: none; z-index: 999;}
#hamPage nav {max-width: calc(100% - 40px);}
#hamPage nav ul {display: flex; align-items: center; flex-wrap: wrap; column-gap: 100px; row-gap: 30px;}
#hamPage nav li {opacity: 0; transition: opacity 1s;}
#hamPage nav li a {display: flex; column-gap: 15px; font-weight: var(--bold); line-height: 1;}
#hamPage nav li a > span {font-size: var(--font18); margin-top: 5px; color: #828282;}
#hamPage nav li a > h5 {position: relative; font-size: 140px; color: var(--white); transition: color .2s cubic-bezier(0.0, 0.0, 0.58, 1.0);}
#hamPage nav li a:hover > h5 {color: var(--yellow);}
#hamPage nav li a > h5::before {display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: transparent; z-index: 10; content: attr(data-text); transition: clip-path .4s, color .4s; transition-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0); clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%);}
#hamPage .copy {font-size: var(--font16); color: #333; position: absolute; left: 50%; transform: translateX(-50%); bottom: 30px; width: 100%; text-align: center;}


/* 푸터 */
#footer {padding: 110px 50px 30px;}
#footer .copy {font-size: var(--font16); color: #333;}

#topBtn {position: fixed; right: 30px; bottom: 30px; cursor: pointer; z-index: 10; visibility: hidden; opacity: 0; transform: translateY(-15px); transition: visibility .3s, opacity .5s ease-in, transform .5s ease-in;}
#topBtn.show {visibility: visible; opacity: 1; transform: translateY(0); transition: visibility .5s, opacity .3s ease-in, transform .3s ease-in;}


/* 공통 */
.wrapper {width: 100%; max-width: 1440px; padding: 0 20px; margin: 0 auto;}

.content_title {margin-bottom: 2.25rem; color: var(--white); font-size: 190px; line-height: 75%;}
.content_title.sm {font-size: 120px;}
.color_y {color: var(--yellow);}
.content_subs,
.txt_font20 {font-size: var(--font20); line-height: 150%;}
.txt_font25 {font-size: var(--font25); font-weight: bold;}
.content_subs p:not(:last-child) {margin-bottom: 30px;}
.content_subs.sm {font-size: var(--font18);}
.content_subs.sm p:not(:last-child) {margin-bottom: 20px;}

.portfolioList.half_grid {display: grid; grid-template-columns: repeat(2, 1fr);}

.video_box {position: relative; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; cursor: pointer;}
.video_box .thumbnail::after {content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: rgba(0,0,0,0.5); transition: opacity .3s; opacity: 0;}
.video_box .thumbnail img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
.video_box .title {font-size: var(--font30); color: var(--white); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; word-break: keep-all; padding: 0 20px; transition: opacity .4s; opacity: 0; font-size: 110px;}
.video_box:hover .thumbnail::after {opacity: 1;}
.video_box:hover .title {opacity: 1;}

.youtube_popup {width: 100%; height: 100vh; position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center; display: none; z-index: 998;}
.youtube_popup .back_layer {width: 100%; height: 100%; background: rgba(0,0,0,0.85);}
.youtube_popup #videoPop {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 1080px; height: 608px; overflow: hidden;}
.youtube_popup #videoPop iframe {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.youtube_popup .x_btn {position: absolute; right: 40px; transform: translateY(-50%); top: 50%;}
.youtube_popup .x_btn::before {content: ""; display: block; width: 100%; height: 1px; border-radius: 50%; border: 1px solid var(--white); box-sizing: border-box; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity .2s, .5s height .2s;}
.youtube_popup .x_btn:hover::before {opacity: 1; height: 100%;}

.bg_txt {padding: 275px 0 200px; position: relative; overflow-x: hidden;}
.bg_txt::before {content: "FRAME STORE"; display: block; position: absolute; top: 70px; right: -100px; font-size: var(--font200); opacity: 0.03; color: var(--white); clip-path: polygon(0 0,100% 100%,100% 100%,100% 100%); transition: clip-path 1s cubic-bezier(.5,.7,.8,1), right 1s cubic-bezier(.5,.7,.8,1); will-change: clip-path, right; font-family: 'Humane'; font-size: 400px;}
.bg_txt.active::before {clip-path: polygon(0 0,100% 0,100% 100%,0 100%); right: 0; width: max-content;}

.fadeAni {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
    -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
    transition: opacity 1s ease, -webkit-transform 1s ease;
    transition: transform 1s ease, opacity 1s ease;
    transition: transform 1s ease, opacity 1s ease, -webkit-transform 1s ease;
}
.fadeAni.active {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
}
.active.delay1 {transition-delay: .2s;}
.active.delay2 {transition-delay: .4s;}
.active.delay3 {transition-delay: .6s;}
.active.delay4 {transition-delay: .8s;}


@media screen and (max-width: 1440px) {
    #hamPage nav ul {column-gap: 5vw;}

    .bg_txt {padding: 18vw 0 200px;}
    .bg_txt::before {top: 6vw; font-size: 25vw;}
}

@media screen and (max-width: 1240px) {
    #hamPage nav li a {column-gap: 12px;}
    #hamPage nav li a > span {font-size: var(--font17); margin-top: 4px;}
    #hamPage nav li a > h5 {font-size: var(--font40); font-size: 110px;}
    #hamPage .copy {font-size: var(--font15);}

    #topBtn {right: 25px; bottom: 25px;}
    #topBtn img {width: 90px;}
}

@media screen and (max-width: 1080px) {
    .youtube_popup #videoPop {height: 0; padding-bottom: 56.25%;}
    .youtube_popup .x_btn {top: auto; bottom: 50px; right: auto; left: 50%; transform: translate(-50%, 0);}
    .youtube_popup .x_btn img {width: 50px;}
    .youtube_popup .x_btn::before {opacity: 1; height: 100%;}
}

@media screen and (max-width: 1024px) {
    #hamPage nav ul {row-gap: 40px; flex-direction: column; align-items: center;}
    #hamPage nav li {width: 100%;}

    .content_title {font-size: var(--font45); margin-bottom: 1.875rem; font-size: 130px;}
    .content_title.sm {font-size: var(--font27); font-size: 84px;}
    .content_subs,
    .txt_font20 {font-size: var(--font18);}
    .txt_font25 {font-size: var(--font25);}
    .content_subs.sm {font-size: var(--font16);}
    
    .video_box .title {font-size: var(--font25); font-size: 65px;}

    .bg_txt {padding: 22vw 0 160px;}
    .bg_txt::before {top: 10vw;}
}

@media screen and (max-width: 768px) {
    html, body {font-size: 15px;}

    :root {--headerHei: 75px;}
    #header .inner {padding: 0 30px;}
    #header .logo img {max-height: 55px; margin-top: 12px;}
    #header .hamberger {width: 45px; height: 45px;}
    #header .hamberger span {width: 45px;}
    #hamPage nav ul {row-gap: 35px;}
    #hamPage nav li a > span {margin-top: 5px;}
    #hamPage nav li a > h5 {font-size: 100px;}

    #footer {padding: 50px 30px 20px;}
    #footer .copy {font-size: var(--font15);}

    #topBtn {right: 20px; bottom: 20px;}
    #topBtn img {width: 70px;}

    .content_title {font-size: var(--font40); margin-bottom: 1.625rem; font-size: 120px;}
    .content_title.sm {font-size: var(--font25); margin-bottom: 1.325rem; font-size: 72px;}
    .content_subs,
    .txt_font20 {font-size: var(--font17);}
    .txt_font25 {font-size: var(--font22);}
    .content_subs p:not(:last-child) {margin-bottom: 20px;}
    .content_subs.sm {font-size: var(--font15);}
    .content_subs.sm p:not(:last-child) {margin-bottom: 15px;}
    
    .video_box .title {font-size: var(--font20); font-size: 50px;}
    .youtube_popup .x_btn img {width: 45px;}

    .bg_txt {padding: 28vw 0 120px;}
    .bg_txt::before {top: 14.5vw; font-size: 27vw;}
}

@media screen and (max-width: 540px) {
    html, body {font-size: 14px;}

    :root {--headerHei: 65px;}
    #header .inner {padding: 0 20px;}
    #header .logo img {max-height: 45px; margin-top: 10px;}
    #header .hamberger {width: 40px; height: 40px;}
    #header .hamberger span {width: 40px; height: 2px;}
    #header .hamberger.open span:first-child {margin-bottom: -1px;}
    #header .hamberger.open span:last-child {margin-top: -1px;}
    #hamPage nav ul {row-gap: 30px;}
    #hamPage nav li a > h5 {font-size: 85px;}
    #hamPage .copy {font-size: var(--font14); bottom: 20px;}

    #footer {padding: 40px 20px 20px;}
    #footer .copy {font-size: var(--font14); text-align: center;}

    #topBtn {right: 10px; bottom: 15px;}
    #topBtn img {width: 50px;}

    .content_title {font-size: var(--font32); margin-bottom: 1.25rem; font-size: 90px;}
    .content_title.sm {font-size: var(--font22); margin-bottom: 1rem; font-size: 60px;}
    .content_subs,
    .txt_font20 {font-size: var(--font16);}
    .txt_font25 {font-size: var(--font20);}
    .content_subs p:not(:last-child) {margin-bottom: 15px;}
    .content_subs.sm {font-size: var(--font15);}
    .content_subs.sm p:not(:last-child) {margin-bottom: 12px;}
    
    .video_box .title {font-size: var(--font18); font-size: 50px;}
    .youtube_popup .x_btn {display: none;}
    
    .bg_txt {padding: 32vw 0 100px;}
    .bg_txt::before {top: 18vw; font-size: 30vw;}
    
    .portfolioList.half_grid {grid-template-columns: repeat(1, 1fr);}
}