:root {
    --frame-icon-size: 32px;
}

/* -------------------loading--------------------- */
.loading {
    position: fixed;
    width: 100vw;
    height: 100dvh;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    z-index: 999;
    pointer-events: none;
    transition: opacity .5s ease;
    touch-action: auto;
}

.loading.complete {
    opacity: 0;
}

.loading_logo {
    width: 100px;
    height: 100px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading_logo_square {
    width: 100%;
    aspect-ratio: 1;
    background: var(--primary);
    transform: rotate(0deg) scale(0.5);
    transition: all 1s .5s ease;
}

.loading.active .loading_logo_square {
    aspect-ratio: 2 / 1;
    transform: rotate(-45deg) scale(1);
}

.loading_logo_frame {
    width: 100%;
    height: 100%;
    mix-blend-mode: difference;
    position: absolute;
    transform: translate(80%, -80%);
    opacity: 0;
    transition: opacity 1s .2s ease, transform 1s ease;
}

.loading.active .loading_logo_frame {
    transform: translate(0%, 0%);
    opacity: 1;
}

.loading_title {
    display: flex;
    align-items: center;
    text-transform: uppercase;
    justify-content: center;
    transform: translateX(-0.5ch);
    transition: transform 1s ease;
    font-size: var(--ft20);
    margin-top: 16px;
}

.loading.active .loading_title {
    transform: translateX(0ch);
}

.loading_change_text {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: start;
}

.loading_change_text .ate {
    position: absolute;
}


.loading_title .ed {
    transform: translateX(3ch);
    opacity: 0;
    transition: transform 1s .5s ease, opacity 1s .5s ease;
}

.loading.active .loading_title .ed {
    transform: translateX(0);
    opacity: 1;
}

.loading .loading_title .ate {
    filter: blur(0px);
    opacity: 1;
    transition: all .5s .2s ease;
}

.loading.active .loading_title .ate {
    filter: blur(10px);
    opacity: 0;
}

.page {
    padding-top: 12vw;
    z-index: unset;
    background: var(--bg-white);
}

.page:has(.loading.complete) {
    z-index: 1;
}

.h_logo,
.gnb {
    pointer-events: visible;
}

.h_logo {
    opacity: 0;
    transition: opacity .3s ease;
}

.h_logo.show {
    opacity: 1;
}

.top_title {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 2;
    pointer-events: none;
}

.top_title ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top_title ul li {
    display: flex;
    align-items: center;
}

.top_title .sub_title {
    display: flex;
    align-items: center;
    justify-content: center;
}

.top_title .sub_title span {
    font-size: clamp(1.5rem, 2.5vw, 2.5rem);
    text-align: center;
}

.top_title .split span {
    font-size: 15rem;
    font-size: clamp(2rem, 12vw, 15rem);
    line-height: 1;
    display: inline-block;
}

video {
    scale: 1.01;
}

.frame {
    position: relative;
}

.frame div {
    width: var(--frame-size);
    height: var(--frame-size);
    position: absolute;
}

.frame .side {
    border: var(--frame-width) solid var(--frame-color);
}

.frame .top_l {
    border-right: 0;
    border-bottom: 0;
    top: 0;
    left: 0;
}

.frame .top_r {
    border-left: 0;
    border-bottom: 0;
    top: 0;
    right: 0;
}

.frame .bot_l {
    border-right: 0;
    border-top: 0;
    bottom: 0;
    left: 0;
}

.frame .bot_r {
    border-left: 0;
    border-top: 0;
    bottom: 0;
    right: 0;
}

.frame .center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.frame .center span {
    display: block;
    position: absolute;
    background: var(--frame-color);
}

.frame .center .ver {
    width: var(--frame-width);
    height: 100%;
}

.frame .center .hor {
    width: 100%;
    height: var(--frame-width);
}


.main_frame {
    width: 20vw;
    aspect-ratio: 4 / 3;
    mix-blend-mode: difference;
    --frame-color: var(--gray-100);
    --frame-width: 10px;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9;
    pointer-events: none;
}

.main_frame div {
    --frame-size: 4vw;
}

/* cube */
.cube_sec {
    width: 100%;
    position: relative;
    height: 200vh;
    display: flex;
    align-items: start;
    padding-top: 10vh;
    justify-content: center;
    z-index: 1;
}


.cube_sec .inner {
    padding: 0;
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cube_wrap {
    width: fit-content;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cube_box {
    --cube-size: 300px;
    width: var(--cube-size);
    height: var(--cube-size);
    transform-style: preserve-3d;
    transform: perspective(40rem);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transform-origin: 50% 50% calc(var(--cube-size) / 2);

}

.cube_surface {
    width: var(--cube-size);
    height: var(--cube-size);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    overflow: hidden;
}

.cube_surface.right {
    transform: rotateY(90deg);
    transform-origin: right;
}

.cube_surface.left {
    transform: rotateY(-90deg);
    transform-origin: left;
}

.cube_surface.bottom {
    transform: rotateX(-90deg);
    transform-origin: bottom;
}

.cube_surface.top {
    transform: rotateX(90deg);
    transform-origin: top;
}

.cube_surface.front {
    transform: translateZ(var(--cube-size));
    transform-origin: top;
}


/* video sec */
.video_move_sec {
    /* overflow: hidden; */
    position: relative;
    height: calc((100vh * 6) + 150vh);
}

.video_move_sec .pin_box {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: -1;
    pointer-events: none;
}

.video_move_sec .pin_box .pin {
    display: block;
    height: 100vh;
    min-height: var(--sec-min-height);
}

.video_move_sec .pin_box .pin_4 {
    height: 300vh;
    min-height: calc(var(--sec-min-height) * 3);
}

.video_move_sec .row {
    display: flex;
    align-items: center;
}

.video_move_sec .col {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.obj {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: sticky;
    top: 0;

}
.obj_frame {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* .frame_1,
  .frame_2,
  .frame_3,
  .frame_4 {
    opacity: 0;
  } 
  .frame_1 .pop,
  .frame_2 .pop,
  .frame_3 .pop,
  .frame_4 .pop {
    scale: 0.5;
  }
  .frame_1.on,
  .frame_2.on,
  .frame_3.on,
  .frame_4.on {
    opacity: 1;
  }
  .frame_1.on .pop,
  .frame_2.on .pop,
  .frame_3.on .pop, 
  .frame_4.on .pop {
    scale: 1;
  }
    */


.video_box {
    width: auto;
    height: auto;
    scale: 0;
    opacity: 0;
    position: relative;
    overflow: hidden;
    z-index: 3;
    transition: .5s ease;
}

.video_box video {
    position: relative;
    z-index: -1;
}

.video_box.frame_1_on {
    width: 100%;
    height: 100vh;
    aspect-ratio: unset;
    scale: 1;
    opacity: 1;
}

.video_box.frame_2_on,
.video_box.frame_3_on {
    width: 1100px;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 50px;
    scale: 1;
    opacity: 1;
}

.video_box.frame_3_on {
    scale: 0.7;
    transform: translateY(20vh);
}

.video_box.frame_3_on .frame_2 .play {
    background: var(--naver);
}

.video_box.frame_4_on {
    /* display: none; */
    width: auto;
    height: 77vmin;
    aspect-ratio: 1 / 2;
    border-radius: var(--border-radius);
    scale: 1;
    opacity: 1;
    transform: translateY(0);
    box-shadow: 12px 12px 20px 0px #0000004f, -12px -12px 30px 0px #ffffff4f;
    border: 5px solid #ffffff00;
}

/* frame_1  ----------------------------------------*/


.frame_1 .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.frame_1 .full_frame {
    width: 10vw;
    aspect-ratio: 1;
    position: absolute;
    --full_frame_padding: 60px;
}

.frame_1 .top_l {
    top: var(--full_frame_padding);
    left: var(--full_frame_padding);
}

.frame_1 .top_r {
    top: var(--full_frame_padding);
    right: var(--full_frame_padding);
}

.frame_1 .bot_l {
    bottom: var(--full_frame_padding);
    left: var(--full_frame_padding);
}

.frame_1 .bot_r {
    bottom: var(--full_frame_padding);
    right: var(--full_frame_padding);
}

.frame_1 .time_count {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--ft20);
    color: white;
}

/* frame_2 youtube  ----------------------------------------*/
.frame_2 {
    justify-content: space-between;
    padding: 40px;
}

.frame_2 .top,
.frame_2 .bot {
    width: 100%;
    justify-content: space-between;
    gap: 14px;
}

.frame_2 .profile {
    gap: 20px;
    width: 70%;
}

.frame_2 .p_img {
    width: 50px;
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
}

.frame_2 .p_text_box {
    width: 100%;
    min-width: 0;
}

.frame_2 .top .icon_wrap {
    gap: 10px;
    justify-content: end;
}

.frame_2 .icon {
    width: var(--frame-icon-size);
    height: auto;
}

.frame_2 i.icon {
    font-size: inherit;
    width: auto;
}

.frame_2 .p_title {
    font-size: var(--ft18);
    color: white;
}

.frame_2 .p_name {
    font-size: var(--ft13);
    color: var(--gray-200);
}

.frame_2 .timeline {
    height: 25px;
    width: auto;
}

.frame_2 .play {
    width: 150px;
    aspect-ratio: 1;
    background: var(--youtube);
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ft50);
    transition: background .3s ease;
}

/* .frame_2 .play .icon {
    transform: translateX(2px);
} */

/* frame_3 naverblog  ----------------------------------------*/

.frame_3 {
    /* align-items: end; */
}

.frame_3 .wrap {
    width: 1000px;
    height: fit-content;
    align-items: start;
    background: white;
    /* border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius); */
    border-radius: var(--border-radius);
    padding: 40px 110px;
}

.frame_3 .logo_icon {
    width: 54px;
    height: auto;
    margin-left: auto;
    margin-bottom: 40px;
}

.frame_3 .title_box {
    width: 100%;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--dark-line);
    margin-bottom: 36px;
}

.frame_3 .profile {
    gap: 14px;
}

.frame_3 .p_title {
    font-size: var(--ft28);
    font-weight: var(--medium);
    margin-bottom: 30px;
}

.frame_3 .p_img {
    width: 44px;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.frame_3 .p_name {
    font-size: var(--ft16);
    color: var(--gray-400);
}

.frame_3 .p_text {
    font-size: var(--ft16);
    color: var(--gray-300);
}

.frame_3 .title_box .bot {
    justify-content: space-between;
}

.frame_3 .title_box .bot .icon {
    width: 22px;
    height: auto;
    flex-shrink: 0;
}

.frame_3 .desc {
    text-align: center;
    line-height: 1.5;
    width: 100%;
}

.frame_3 .desc .text {
    margin-bottom: 34px;
}

.frame_3 .video_position {
    width: 100%;
    aspect-ratio: 16 / 9;
}

/* frame_4  ----------------------------------------*/
.frame_4.overlay {
    z-index: 4;
}

.frame_4.overlay .inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    padding-bottom: 80px;
    padding-top: 80px;
}

.frame_4.overlay .mobile_frame_title,
.frame_4.overlay .frame_4.overlay .mobile_frame_num,
.frame_4.overlay .mobile_frame_swiper {
    width: 100%;
}

.frame_4.overlay .mobile_frame_title,
.frame_4.overlay .mobile_frame_num {
    position: relative;
}

.frame_4.overlay .top li {
    position: absolute;
    top: 0;
    left: 0;
}

.frame_4.overlay .top p {
    font-size: var(--ft80);
    text-transform: uppercase;
    background-image: linear-gradient(to bottom, white 50%, transparent 50%);
    background-repeat: no-repeat;
    background-position-y: 100%;
    background-size: 100% 200%;
    background-clip: text;
    color: transparent;
    transition: background .5s .2s ease;
}

.frame_4.overlay .bot li {
    position: absolute;
    bottom: 0;
    right: 0;
}

.frame_4.overlay .bot p {
    text-align: right;
    font-size: var(--ft80);
    color: white;
}

/* .frame_4.overlay .mobile_frame_title  */

.frame_4.overlay .mobile_frame_swiper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.frame_4.overlay .mobile_frame_swiper .swiper-slide {
    width: 150px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.frame_4.overlay .mobile_frame_swiper .swiper-slide .icon {
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: .3s ease;
}

.frame_4.overlay .mobile_frame_swiper .swiper-slide-active .icon {
    scale: 0.3;
}

/* frame_4 mobile */

.frame_4.mobile .ui {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.frame_4.mobile .ui>.top {
    flex-grow: 1;
    padding: 20px;
    width: 100%;
}

.frame_4.mobile .ui .t_top {
    width: 100%;
    gap: 0.4rem;
}

.frame_4.mobile .ui .t_bot {
    width: 100%;
    flex-grow: 1;
    align-items: flex-end;
}

.frame_4.mobile .ui .t_left {
    flex-grow: 1;
}

.frame_4.mobile .ui .profile {
    gap: 0.4rem;
}

.frame_4.mobile .ui .p_img {
    border-radius: 50%;
    overflow: hidden;
    aspect-ratio: 1;
}

.frame_4.mobile .ui .p_name,
.frame_4.mobile .ui .p_text,
.frame_4.mobile .ui .p_title {
    color: white;
}

.frame_4.mobile .ui .top .icon {
    width: var(--frame-icon-size);
    height: auto;
}

.frame_4.mobile .ui .t_right {
    gap: 0.8rem;
}

.frame_4.mobile .ui>.bot {
    width: 100%;
    height: 10%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: start;
}

.frame_4.mobile .shorts .t_top {
    justify-content: end;
}

.frame_4.mobile .shorts .p_img {
    width: 1.625rem;
}

.frame_4.mobile .shorts .profile {
    margin-bottom: 10px;
}

.frame_4.mobile .shorts .p_name {
    font-size: var(--ft12);
}

.frame_4.mobile .shorts .p_text {
    font-size: var(--ft12);
    margin-bottom: 0.8rem;
}

.frame_4.mobile .shorts .p_title {
    font-size: var(--ft14);
}

.frame_4.mobile .shorts .t_right .p_img {
    width: 34px;
    border-radius: 6px;
}

.frame_4.mobile .shorts>.bot {
    background: #0f0f0f;
}



.frame_4.mobile .reels .profile {
    margin-bottom: 10px;
}

.frame_4.mobile .reels .p_img {
    width: 30px;
}

.frame_4.mobile .reels .p_name {
    font-size: var(--ft12);
}

.frame_4.mobile .reels .p_text {
    font-size: var(--ft12);
    color: var(--gray-200);
}

.frame_4.mobile .reels .p_title {
    font-size: var(--ft14);
}

.frame_4.mobile .reels .p_btn {
    font-size: var(--ft12);
    color: white;
    border: 1px solid #fff2;
    padding: 4px 6px;
    border-radius: 6px;
}

.frame_4.mobile .reels>.bot {
    background: #0A0F13;
}


.frame_4.mobile .clip .t_top {
    justify-content: space-between;
}

.frame_4.mobile .clip .t_top .icon_wrap {
    gap: 10px;
}

.frame_4.mobile .clip .profile {
    margin-bottom: 10px;
}

.frame_4.mobile .clip .p_img {
    width: 30px;
}

.frame_4.mobile .clip .p_name {
    font-size: var(--ft12);
}

.frame_4.mobile .clip .p_text {
    font-size: var(--ft12);
    color: var(--gray-200);
}

.frame_4.mobile .clip .p_title {
    font-size: var(--ft14);
    margin-bottom: 6px;
}

.frame_4.mobile .clip .hashtag p {
    font-size: var(--ft12);
    color: white;
}

.frame_4.mobile .clip .keycolor {
    color: #ADFF5F;
}

.frame_4.mobile .clip>.bot {
    background: #222225;
}

.frame_4.mobile .clip>.bot .icon:first-child {
    position: relative;
}

.frame_4.mobile .clip>.bot .icon:first-child::after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: var(--gray-400);
}

.bg_video.frame_4 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.bg_video.frame_4 video {
    filter: blur(8px) contrast(0.5);
    opacity: 0.4;
    transform: scale(1.05);
    pointer-events: none;
}

.frame_4.bg {
    width: 70vmin;
    height: auto;
    z-index: 2;
    aspect-ratio: 1;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    filter: blur(80px);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

span {
    font-size: inherit;
}


/* fram_4 애니메이션 */
.frame_4.overlay .mobile_frame_title li,
.frame_4.bg li,
.frame_4.mobile .ui {
    opacity: 0;
    appearance: none;
    transition: .3s ease;
}

.frame_4.overlay .mobile_frame_title li.on,
.frame_4.bg li.on,
.frame_4.mobile .ui.on {
    appearance: visible;
    opacity: 1;
}

.frame_4.overlay .mobile_frame_title li.on p {
    background-position-y: 0%;
}

/*--------------------- title_ani_sec------------------ */
.title_ani_sec {
    width: 100%;
    height: 450vh;
    margin-top: -100vh;
    display: flex;
    flex-direction: column;
    justify-content: start;
}
.t_ani_sticky {
    width: 100%;
    height: 100vh;
    min-height: var(--sec-min-height);  
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: sticky;
    top: 0;
}
.title_ani_sec .sec_content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.t_ani_box {
    width: fit-content;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.t_ani_box .frame .top_l,
.t_ani_box .frame .bot_l {
    transform: translateX(-100%);
}

.t_ani_box .frame {
    --frame-size: 50px;
}

.t_ani_box .frame .top_r,
.t_ani_box .frame .bot_r {
    transform: translateX(100%);
}

.t_ani_box .t_ani_mask_box {
    width: 0;
    overflow: hidden;
    display: flex;
    align-items: start;
    justify-content: center;
    position: relative;
}

.t_ani_text {
    width: fit-content;
    font-size: var(--ft80);
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    color: var(--gray-500);
    position: relative;
    background-clip: text;
    -webkit-background-clip: text;
    transition: opacity .3s ease;
}


.t_ani_text P {
    color: transparent;
    font-size: inherit;
    background: var(--gray-500);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.t_ani_text.gold {
    position: absolute;
    opacity: 0;
}

.t_ani_text.gold p {
    background: var(--gold);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.t_ani_box.gold .t_ani_text.gray {
    opacity: 0;
}

.t_ani_box.gold .t_ani_text.gold {
    opacity: 1;
}

.t_ani_text .change {
    white-space: nowrap;
    overflow: hidden;
}

.t_ani_text .change.last {
    width: 0;
}



.t_ani_sec_logo {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.t_ani_sec_logo .square {
    width: 260px;
    height: auto;
    aspect-ratio: 2 / 1;
    /* background: url('/images/recreed/gold_5.jpg') no-repeat center / cover; */
    background: var(--primary);
    transform: rotateZ(0deg);
    position: absolute;
}

.t_ani_sec_frame {
    --frame-color: var(--gray-500);
    --frame-width: 6px;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: opacity .3s ease;
}

.t_ani_sec_frame .side {
    border: 0;
}

.t_ani_sec_frame .side::before,
.t_ani_sec_frame .side::after {
    content: '';
    display: block;
    position: absolute;
    background: var(--frame-color);
}

.t_ani_sec_frame .top_l::before,
.t_ani_sec_frame .top_l::after {
    top: 0;
    left: 0;
}

.t_ani_sec_frame .top_r::before,
.t_ani_sec_frame .top_r::after {
    top: 0;
    right: 0;
}

.t_ani_sec_frame .bot_l::before,
.t_ani_sec_frame .bot_l::after {
    bottom: 0;
    left: 0;
}

.t_ani_sec_frame .bot_r::before,
.t_ani_sec_frame .bot_r::after {
    bottom: 0;
    right: 0;
}

.t_ani_sec_frame .top_l::before,
.t_ani_sec_frame .top_r::before,
.t_ani_sec_frame .bot_l::before,
.t_ani_sec_frame .bot_r::before {
    width: var(--frame-width);
    height: 100%;
}

.t_ani_sec_frame .top_l::after,
.t_ani_sec_frame .top_r::after,
.t_ani_sec_frame .bot_l::after,
.t_ani_sec_frame .bot_r::after {
    width: 100%;
    height: var(--frame-width);
}

.t_ani_sec_frame.gold {
    position: absolute;
    opacity: 0;
    --frame-color: linear-gradient(120deg, #C49746, #F9DB80, #BB8C34, #55381d, #C39738, #C39738);
}

.t_ani_sec_frame.gold .top_r,
.t_ani_sec_frame.gold .bot_l {
    --frame-color: linear-gradient(-120deg, #C49746, #F9DB80, #BB8C34, #55381d, #C39738, #C39738);
}

.t_ani_box.gold .t_ani_sec_frame.gray {
    opacity: 0;
}

.t_ani_box.gold .t_ani_sec_frame.gold {
    opacity: 1;
}




/*--------------------- director_sec------------------ */
.director_sec {
    width: 100%;
    padding: var(--sec-gap) 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -50vh;
}

.director_sec .sec_title {
    text-transform: uppercase;
    font-size: var(--ft50);
    margin-bottom: 50px;
}

.director_sec .con_list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--content-gap);
}

.director_sec .con {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    /* gap: 30px; */
}

.director_sec .con:nth-child(2) {
    flex-direction: column-reverse;
}

.d_name_en {
    font-size: var(--ft80);
    text-transform: uppercase;
    margin-bottom: 20px;
    /* font-family: var(--cursive); */
}

.d_card {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1.1;
    overflow: hidden;
    position: relative;
}

.d_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
    transition: all 1s ease;
}

.d_img.left {
    clip-path: inset(0 0 100% 0);
}

.d_img.right {
    clip-path: inset(100% 0 0 0);
}

.d_img img {
    transition: all 5s ease;
    filter: grayscale(0.5);
    transform: scale(1.3);
}

.d_img.on {
    clip-path: inset(0 0 0 0);
}

.d_img.on img {
    filter: grayscale(0.9);
    transform: scale(1);
}

.d_profile {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 50px;
    padding: 50px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.d_name_ko p {
    color: white;
    font-size: var(--ft22);
    font-weight: var(--semi-bold);
    display: flex;
    gap: 16px;
}

.d_name_ko p span {
    color: #fff9;
    font-weight: var(--medium);
    display: block;
    padding-left: 16px;
    position: relative;
}

.d_name_ko p span::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 70%;
    background: #fff8;
}

.d_career {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.d_career .career_list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.d_career .career_list li {
    font-size: var(--ft16);
    font-family: var(--lang-ko);
    font-weight: 400;
    color: #fff9;
    transition: color .3s ease;
}

/* .d_career .career_list li::before {
  content: '-';
  margin-right: 6px;
} */
.d_card:hover .d_career .career_list li {
    color: #fff;
}

/* -------------------contact_sec---------------------- */

.contact_sec {
    width: 100%;
    min-height: 100vh;
    height: auto;
    padding: var(--sec-gap) 0;
    /* background: var(--bg-dark); */
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact_sec .flex_box {
    width: 100%;
    height: 100%;
}

.contact_sec .inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
}

.contact_sec .sec_content {
    display: grid;
    grid-template-columns: 2fr 1fr;
}

.contact_sec .sec_title {
    margin-bottom: 40px;
}

.contact_sec .sec_title h2 {
    font-size: var(--ft50);
    color: white;
    font-weight: var(--medium);
}

.contact_sec .desc {
    margin-bottom: 80px;
}

.contact_sec .desc p {
    font-size: var(--ft18);
    color: white;
    line-height: 1.6;
}

.contact_sec .icon_list {
    display: flex;
    align-items: center;
    gap: 50px;
}

.contact_sec .icon_list .icon {
    width: 60px;
    aspect-ratio: 1;
}

.contact_sec .text p {
    font-size: var(--ft20);
    color: white;
}

.contact_sec .text p.title {
    margin-bottom: 30px;
}

.contact_sec .sec_content .right {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: end;
}

.contact_btn {
    width: 300px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    height: fit-content;
    position: relative;
    padding: 20px 40px;
}

.contact_btn .text_wrap {
    align-items: center;
}

.contact_btn .icon {
    width: 30px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact_btn .icon i {
    font-size: var(--ft30);
    transform: rotateZ(-45deg);
    transition: transform .3s ease;
}

.contact_btn:hover .icon i {
    transform: rotateZ(0);
}

@media (hover: none) and (pointer:coarse) {
    .d_career .career_list li {
        color: #fff;
    }
}

@media (pointer: coarse) {
    .cube_box {
        animation: rotateCube 9s infinite linear normal;
    }

    @keyframes rotateCube {

        0% {
            transform: rotateX(360deg) rotateY(0deg) rotateZ(0deg);
        }

        100% {
            transform: rotateX(0deg) rotateY(360deg) rotateZ(360deg);
        }
    }
}

@media all and (max-width: 1600px) {
    /* .top_title .split span {
    font-size: 12rem;
  } */
}

@media all and (max-width: 1500px) {
    .frame_4.overlay .top p {
        font-size: var(--ft60);
    }
}

@media all and (max-width: 1300px) {
    :root {
        --frame-icon-size: 28px;
    }

    .video_box.frame_2_on,
    .video_box.frame_3_on {
        width: 80vw;
        height: calc((80vw / 16) * 9);
        border-radius: 40px;
    }

    .frame_2 {
        padding: 30px;
    }

    .frame_2 .play {
        width: 120px;
    }

    .frame_3 .wrap {
        width: 800px;
        padding: 30px 80px 40px;
    }

    .frame_3 .title_box {
        padding-bottom: 16px;
        margin-bottom: 24px;
    }

    .frame_3 .p_title {
        font-size: var(--ft24);
        margin-bottom: 20px;
    }

    .frame_3 .p_img {
        width: 36px;
    }

    /* directors */
    .director_sec h2 {
        font-size: var(--ft44);
    }

    .d_name_en {
        font-size: var(--ft60);
    }

    .d_name_ko p {
        font-size: var(--ft20);
    }

    .d_profile {
        padding: 30px;
    }

    .d_career .career_list {
        gap: 6px;
    }

    .d_career .career_list li {
        font-size: var(--ft16);
    }

    /* contact */
    .contact_sec .sec_title h2 {
        font-size: var(--ft44);
    }

    .contact_btn {
        width: 240px;
        padding: 16px 32px;
    }

    .contact_sec .icon_list .icon {
        width: 50px;
    }
}

@media all and (max-width: 1060px) {

    .frame_4.mobile .ui>.top {
        padding: 10px;
    }

    .frame_4.overlay .bot li {
        right: 40px;
    }

    .director_sec .con_list {
        flex-direction: column;
    }

    .director_sec .con:nth-child(2) {
        flex-direction: column;
    }

    .d_card {
        aspect-ratio: 1 / 0.9;
    }

    .d_img.right {
        clip-path: inset(0 0 100% 0);
    }

    .d_img.on {
        clip-path: inset(0 0 0 0);
    }

}

@media all and (max-width: 960px) {

    /* video_ani_sec */
    .main_frame {
        --frame-width: 5px;
    }

    .cube_box {
        --cube-size: 200px;
    }

    .video_box.frame_2_on,
    .video_box.frame_3_on {
        border-radius: 30px;
    }

    .frame_2 {
        padding: 20px;
    }

    .frame_2 .play {
        width: 100px;
    }

    .frame_3 .wrap {
        width: 83%;
        padding: 30px 80px 80px;
        height: auto;
    }

    .video_box.frame_3_on {
        scale: 0.8;
    }

    .frame_4.overlay .mobile_frame_swiper .swiper-slide {
        width: 100px;
    }

    .frame_4.overlay .mobile_frame_swiper .swiper-slide-active .icon {
        scale: 0.5;
    }

    .frame_4.overlay .top p,
    .frame_4.overlay .bot p {
        font-size: var(--ft44);
    }

    /* t_ani_sec */
   
    .t_ani_text {
        font-size: var(--ft60);
    }

    .t_ani_box .frame {
        --frame-size: 30px;
    }

    .t_ani_sec_frame {
        --frame-width: 4px;
    }

    .t_ani_sec_logo .square {
        width: 200px;
    }

    /* contact_sec */
    .contact_sec .sec_title h2 {
        font-size: var(--ft40);
    }

    .contact_sec .desc p {
        font-size: var(--ft16);
    }

    .contact_sec .sec_content {
        grid-template-columns: 1fr;
        gap: var(--content-gap);
    }

}

@media all and (max-width: 700px) {
    .t_ani_text {
        font-size: var(--ft40);
    }

    .d_card {
        aspect-ratio: 1 / 1.2;
    }
}

@media all and (max-width: 600px) {
    :root {
        --frame-icon-size: 24px;
    }

    /* vh조정 */   
    .cube_sec {
        height: calc(var(--vh) * 200);
    }
    .cube_sec .inner {
        height: calc(var(--vh) * 100);
    }
    .obj,
    .video_box.frame_1_on,
    .t_ani_sticky {
        /* height: calc(var(--vh) * 100); */
        height: 100dvh;
    }
    .video_move_sec {
        height: calc(var(--vh) * 750);
    }
    .video_move_sec .pin_box .pin {
        height: calc(var(--vh) * 100);
    }
    .video_move_sec .pin_box .pin_4 {
        height: calc(var(--vh) * 300);
    }
    .title_ani_sec {
        height: calc(var(--vh) * 450);
    }

    .director_sec {
        margin-top: calc(var(--vh) * -50);
    }
    .contact_sec {    
        min-height: calc(var(--vh) * 100);    
    }




    .top_title {
        padding: 20px;
    }

    .top_title ul {
        flex-direction: column;
        align-items: flex-start;
    }

    .top_title .sub_title {
        order: 2;
    }

    .top_title .sub_title span {
        text-align: left;
        margin-top: 20px;
    }

    .main_frame {
        width: 40vmin;
        --frame-size:
    }

    .main_frame div {
        --frame-size: 8vmin;
    }

    /* video_sec */
    .frame_1 .full_frame {
        --full_frame_padding: 40px;
    }

    .frame_2 {
        padding: 16px;
    }

    .frame_2 .play {
        width: 70px;
    }

    .frame_2 .play {
        font-size: var(--ft30);
    }

    .frame_2 .p_img {
        width: 20%;
    }

    .frame_2 .icon_wrap {
        gap: 6px;
    }

    .frame_2 .p_rofile {
        gap: 10px;
    }

    .frame_3 .wrap {
        padding: 30px 30px 100px;
        width: 95%;
    }

    .frame_4.overlay .inner {
        padding-bottom: 30px;
        padding-top: 30px;

    }

    .frame_4.overlay .mobile_frame_title li {
        width: 100%;
    }

    .frame_4.overlay .mobile_frame_title li P {
        width: 100%;
        text-align: center;
    }

    .frame_4.overlay .bot li {
        right: 0;
    }


    .video_box.frame_2_on,
    .video_box.frame_3_on {
        width: 90vw;
        height: calc((90vw / 16) * 9);
        border-radius: 20px;
    }

    .video_box.frame_3_on {
        scale: 0.9;
        transform: translateY(calc(var(--vh) * 14.5));
    }

    .video_box.frame_4_on {
        width: 60vw;
        height: auto;
    }

    /* t_ani_sec */
    .t_ani_sec_logo .square {
        width: 180px;
    }

    /* director_sec */
    .director_sec .sec_title {
        font-size: var(--ft40);
    }

    .d_card {
        aspect-ratio: 1 / 1.3;
    }

    .d_profile {
        padding: 20px;
    }

    .d_name_en {
        font-size: var(--ft50);
    }



    /* contact_sec */
    .contact_sec .sec_content {
        gap: 80px;
    }

    .contact_sec .sec_title h2 {
        font-size: var(--ft34);
    }

    .contact_sec .icon_list {
        gap: 40px;
    }

    .contact_sec .icon_list .icon {
        width: 44px;
    }

    .contact_sec .sec_content .right {
        align-items: start;
    }

    .contact_btn {
        width: 200px;
        padding: 12px 24px;
    }
  

}

@media all and (max-width: 400px) {
   
    :root {
        --frame-icon-size: 20px;
    }

    .frame_2 .play {
        width: 54px;
    }

    .frame_2 .play i.icon {
        font-size: var(--ft24);
    }

  
    .title_ani_sec .sec_content {
        scale: 0.8;
    }

    .t_ani_sec_frame .top_l::before,
    .t_ani_sec_frame .top_r::before,
    .t_ani_sec_frame .bot_l::before,
    .t_ani_sec_frame .bot_r::before {
        height: 100%;
    }

    .t_ani_sec_frame .top_l::after,
    .t_ani_sec_frame .top_r::after,
    .t_ani_sec_frame .bot_l::after,
    .t_ani_sec_frame .bot_r::after {
        width: 100%;
    }

    .d_card {
        aspect-ratio: 1 / 1.7;
    }


    
}