:root {
    --bg: #040000; 
}

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* common */
html { font-size:10px; overflow-y: hidden; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; color:#fff; scroll-behavior: smooth;} 
body { margin:0 auto; padding:0; overflow-y: auto; font-size: 2rem; scroll-behavior: smooth;} 
html, body {height: 100%; margin:0; background: var(--bg);}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img { margin:0; padding:0; border:0 } 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block } 
ul, dl,dt,dd { margin:0; padding:0; list-style:none } 
legend { position:absolute; margin:0; padding:0; font-size:0; line-height:0; text-indent:-9999em; overflow:hidden } 
label, input, button, select, img { vertical-align:middle; } 
input, button { margin:0; padding:0;} 
input[type="submit"] { cursor:pointer } 
button { cursor:pointer; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;} 
select { margin:0 } 
p { margin:0; padding:0; word-break:keep-all; white-space: pre-line; line-height: 2.4rem; font-weight: 200;} 
hr { display:none } 
a { text-decoration:none ; color: #ffffff; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;} 
a:hover { text-decoration: none; } 
.un_reboot_a { color: var(--main); text-decoration: underline; } 
*, :after, :before { 
 -webkit-box-sizing:border-box; 
 -moz-box-sizing:border-box; 
 box-sizing:border-box; 
 word-break: keep-all; 
 } 

img { max-width:100%; display:inline-block; height: auto; } 
.d-none{ display: none;}

.fs_8 { font-size: 0.8rem; } 
.fs_9 { font-size: 0.9rem; } 
.fs_10 { font-size: 1.0rem; } 
.fs_11 { font-size: 1.1rem; } 
.fs_12 { font-size: 1.2rem; } 
.fs_13 { font-size: 1.3rem; } 
.fs_14 { font-size: 1.4rem; } 
.fs_15 { font-size: 1.5rem; } 
.fs_16 { font-size: 1.6rem; } 
.fs_17 { font-size: 1.7rem; } 
.fs_18 { font-size: 1.8rem; } 
.fs_19 { font-size: 1.9rem; } 
.fs_20 { font-size: 2.0rem; } 
.fs_21 { font-size: 2.1rem; } 
.fs_22 { font-size: 2.2rem; } 
.fs_23 { font-size: 2.3rem; } 
.fs_24 { font-size: 2.4rem; } 
.fs_25 { font-size: 2.5rem; } 
.fs_26 { font-size: 2.6rem; } 
.fs_27 { font-size: 2.7rem; } 
.fs_28 { font-size: 2.8rem; } 
.fs_29 { font-size: 2.9rem; } 
.fs_30 { font-size: 3.0rem; } 
.fs_31 { font-size: 3.1rem; } 
.fs_32 { font-size: 3.2rem; } 
.fs_33 { font-size: 3.3rem; } 
.fs_34 { font-size: 3.4rem; } 
.fs_35 { font-size: 3.5rem; } 
.fs_36 { font-size: 3.6rem; } 
.fs_37 { font-size: 3.7rem; } 
.fs_38 { font-size: 3.8rem; } 
.fs_39 { font-size: 3.9rem; } 
.fs_40 { font-size: 4.0rem; } 
.fs_41 { font-size: 4.1rem; } 
.fs_42 { font-size: 4.2rem; } 
.fs_43 { font-size: 4.3rem; } 
.fs_44 { font-size: 4.4rem; } 
.fs_45 { font-size: 4.5rem; } 
.fs_46 { font-size: 4.6rem; } 
.fs_47 { font-size: 4.7rem; } 
.fs_48 { font-size: 4.8rem; } 
.fs_49 { font-size: 4.9rem; } 
.fs_50 { font-size: 5.0rem; } 
.fs_51 { font-size: 5.1rem; } 
.fs_52 { font-size: 5.2rem; } 
.fs_80 { font-size: 8.0rem; } 

.fc_wh{ color: #fff;}
.fc_txt{ color: #4e4c4b;}
.fc_777{ color: #777;}

.fw_100 { font-weight: 100; } 
.fw_200 { font-weight: 200; } 
.fw_300 { font-weight: 300; } 
.fw_400 { font-weight: 400; } 
.fw_500 { font-weight: 500; } 
.fw_600 { font-weight: 600; } 
.fw_700 { font-weight: 700; } 
.fw_800 { font-weight: 800; } 
.fw_900 { font-weight: 900; }

.text-right{text-align: right;}
.text-left{text-align: left;}
.text-center{text-align: center;}

.pd20{padding:2rem;}

.mb10{margin-bottom: 1rem;}
.mb20{margin-bottom: 2rem;}
.mb30{margin-bottom: 3rem;}
.mb50{margin-bottom: 5rem;}
.mb70{margin-bottom: 7rem;}
.mb80{margin-bottom: 8rem;}
.mb100{margin-bottom: 10rem;}
.mrl5{margin: 0 5px;}
.mr5{margin-right: 0.5rem;}
.mr10{margin-right: 1rem;}
.ml10{margin-left: 1rem;}

.w-100{width:100%;}

.inner_100{
    width:100%;
    padding: 0 10rem;
}

.inner_1440{
    max-width: 1440px;
    margin:0 auto;
}

.d-flex{
    display: flex;
}

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

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

/* button */
button{
    border:none;
}

/* input */
input, textarea{
    padding: 1rem;
    background-color: transparent;
    border:none;
    font-size: 1.6rem;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

input::placeholder, textarea::placeholder{
    color:#999;
}


/* index */
.page-content{
    position: relative;
    z-index: 2; /* 별 레이어보다 위 */
    margin: 0 auto;
    mix-blend-mode: lighten;
}

#starfield{
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    z-index: 1;
    pointer-events: none; /* 클릭 방해하지 않음 */
    overflow: hidden;
    will-change: transform;
    height: 100vh;
}

/* 개별 별 기본 스타일 (사이즈와 색은 JS에서 설정) */
.star{
    position: absolute;
    border-radius: 50%;
    opacity: 0.9;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.06));
    transform: translate3d(0,0,0); /* GPU 가속 유도 */
}

/* 별에 애니메이션 적용: twinkle과 drift를 조합 */
.star {
    animation: twinkle var(--tw-speed, 6s) ease-in-out var(--tw-delay, 0s) infinite,
               drift var(--drift-speed, 20s) ease-in-out var(--drift-delay, 0s) infinite;
    transform-origin: center;
    mix-blend-mode: screen; /* 더 자연스러운 밝기 효과 */
    will-change: transform, opacity;
}

/* 우주에 둥둥 떠다니는 이미지 스타일 - 메인 3d 로고 */
#floating-object{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50rem; /* 이미지 크기 */
    height: 50rem;
    background-image: url('../img/3d_logo.png'); /* 이미지 경로 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    animation: floatSpace 18s ease-in-out infinite;
}

/* navigation */
nav {
    width:100%;
    position: fixed;
    top:0;
    left: 0;
    z-index: 9999;
    padding: 3rem 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#nav h1 img{
    width: 19rem;
}

#nav ul li{
    text-align: center;
    margin-right: 8rem;
}

#nav ul li a{
    display: block;
    font-weight: 300;
    letter-spacing: 0.1rem;
}

#nav ul li a:hover{
    color:#EB6120;
    transition: 0.1s ease-in;
}

/* title, explanation*/
.tit{
    font-size: 8rem;
    font-family: "Roboto", sans-serif;
    font-weight: 800;
    margin-bottom: 1rem;
}

.sub_tit{
    font-size: 3rem;
    color:#aaa;
    font-weight: 700;
}

.exp{
    font-size: 3rem;
    line-height: 4.8rem;
}

.exp_b{
    font-weight: 700;
}

/* sec01 */
.sec01{
    height: 100vh;
}

.sec_com{
    width:100%;
    position: relative;
    top:0;
    left: 0;
    z-index: 3;
}

/* sec02 : Vision */
.sec02{
    padding: 16rem 0 10rem;
    background: url('../img/vision_bg.png') no-repeat;
    background-size: 52.5%;
    background-position: 105% center;
    background-color: #040000;
}

.sec02_inner{
    padding: 0 10rem;
    margin: 0 auto;
}


.slogan{
    width: fit-content;
    padding: 2rem 5rem;
    border: 1px solid #fff;
    margin-bottom: 20rem;
}

.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.marquee-track {
  display: flex;
  width: max-content;
}

.marquee-track img {
  height: 3rem;
  flex-shrink: 0;
  margin-right: 5rem;
  user-select: none;
  pointer-events: none;
}

.bgimg1{
    width:100%;
    height: 100rem;
    background:url('../img/bg_img01.jpg') no-repeat;
    background-position: center;
    background-size: cover;
}

/* sec03 : Artists*/
.sec03{
    padding: 15rem 0 10rem;
}

.artist_list{
    max-width: 1440px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.artist_item{
    width: 32%;
    text-align: center;
    margin-bottom: 5rem;
}

.at_thumb {
  width: 100%;
  aspect-ratio: 1 / 1; 
  overflow: hidden;
  border: 2px solid #fff;
  margin-bottom: 2rem;
}

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

.at_name{
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.at_job{
    font-weight: 200;
    color:#aaa;
}

/* sec04 : Strength */
.sec04{
    padding: 12rem 0;
    margin: 0 auto;
    background-color: #040000;
}

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

.st_box{
    width:110rem;
    max-width: 110rem;
    text-align: center;
    padding: 5rem 0 4.5rem;
    background-color: #0a0a0a;
    border: 1px solid #aaa;
}

.st_tit{
    font-size: 4rem;
    font-weight: 800;
    color:#fff;
    margin-bottom: 2.4rem;
    font-family: "Roboto", sans-serif;
}

.st_exp{
    font-size: 2.4rem;
    color:#aaa;
}

.bgimg2{
    width:100%;
    height: 80rem;
    background:url('../img/bg_img02.jpg') no-repeat;
    background-position: center;
    background-size: cover;
}

/* sec05 : Strength */
.sec05{
    padding: 12rem 0;
    margin: 0 auto;
}

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

.sv_box{
    width:80rem;
    max-width: 80rem;
    text-align: center;
    padding: 3rem 0;
    background-color: #0a0a0a;
    border: 1px solid #aaa;
    margin-bottom: 1rem;
}

.sv_box p{
    font-size: 3rem;
    font-weight: 600;
    color:#fff;
}


/* footer / contact */
.f_area{
    width:100%;
    position: relative;
    top:0;
    left: 0;
    z-index: 3;
    padding: 16rem 0 10rem;
    background-color: #040000;
}

.f_area > div > div{
    width:100%;
}

.footer{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.f_logo{
    width: 15rem;
    margin-bottom: 5rem
}

.f_info p{
    font-size: 1.6rem;
    font-weight: 200;
    line-height: 2.8rem;
}

.f_info p b{
    font-weight: 500;
    margin-right: 1rem;
}

.f_btns button{
    background: transparent;
}

.copyright{
    font-size: 1.4rem;
    font-weight: 200;
}

.contact .tit{
    font-size: 4rem;
    font-family: "Roboto", sans-serif;
}

.contact .sub_tit{
    font-size: 2rem;
    font-weight: 300;
    line-height: 2.8rem;
}

.info_form{
    padding-top: 6rem;
}

.info_form .if_each{
    width: 100%;
    margin: 1.5rem 2rem 1.5rem 0;
}

.info_form .if_each.if_mg{
    margin: 1.5rem 0 1.5rem;
}

.info_form .if_each > p{
    font-weight: 500;
    margin-bottom: 1rem;
}

.info_form .if_each input[type="text"], .info_form .if_each input[type="tel"],
.info_form .if_each textarea{
    width: 100%;
    border:none;
    padding: 1rem 2rem;
    background: none;
    font-size: 1.6rem;
    border-bottom: 1px solid #aaa;
    color:#fff;
}

textarea{
    resize: none;
}

input,
input:focus,
input:not(:placeholder-shown) {
  background: transparent !important;
}

input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: currentColor !important;
}

.perinfo_agree{
    width:100%;
    display: flex;
    align-items: center;
}

.ag_chk{
    position: relative;
    display: flex;
}

.ag_chk p{
    margin-left: 1rem;
}

#agreement{
    display: none;
}

#agreement label{
    display: inline-block;
    width: 2.4rem;
    height: 2.4rem;
}

#agreement + label{
    width:2.4rem;
    height: 2.4rem;
    background-image: url('../img/check.png');
    background-repeat: no-repeat;
    background-size: cover;
}

#agreement:checked + label{
    background-image: url('../img/check-on.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.agree_btn{
    background: none;
    font-size: 1.6rem;
    font-weight: 800;
    color:#EB6120;
    text-decoration: underline;
    margin-left: 1rem;
}

.submit_btn_area{
    width:100%;
    display: flex;
    flex-direction: row-reverse;
    padding-top: 1rem;
}

.submit_btn{
    background: none;
    padding: 2rem 3rem;
    border: 1px solid #fff;
    font-size: 2rem;
    font-weight: 400;
    color:#fff;
}

.submit_btn:hover{
    background-color: #fff;
    color: #040404;
    transition: 0.1s ease-in-out;
}

/* modal */
.modal{
    display: none;
    width:100%;
    height: 100vh;
    position: relative;
    z-index: 9999;
}

.modal .modal_bg{
    width:100%;
    height: 100vh;
    position: fixed;
    top:0;
    left: 0;
    background: rgba(0,0,0,0.5);
}

.modal .modal_pop{
    width: 50%; 
    height: 80vh; 
    padding: 50px; 
    background-color: #fff; 
    position: fixed; 
    left:25%; 
    top:10vh; 
    z-index: 9999;
}

.modal .modal_pop .modal_tit{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 50px;
}

.modal .modal_pop .modal_tit h4{
    color:#040000;
    font-size: 3rem;
    font-weight: 800;
}

.modal .modal_pop .modal_tit  button{
    background: transparent;
}

.modal .modal_pop .modal_tit  button i{
    color:#040000;
    font-size: 2.4rem;
}

.modal .modal_pop .modal_con{
    height: calc(70vh - 100px); 
    overflow-y: scroll;
    font-size: 1.6rem;
    color: #040000;
    white-space: pre-line;
    word-break: keep-all;
}

html.no-scr{overflow: hidden;}

.fade {
  opacity: 0;
  transform: translateY(-50px);
  transition:
    opacity 1s ease,
    transform 1s ease;
  will-change: opacity, transform;
}

.fade.active {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--delay, 0ms);
}

.rotate-90 {
  animation: rotate90 4s linear infinite;
}

.menu_btn{
    display: none;
}

.menu_pop{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

.menu_pop.open{
    display: block;
}

.menu_bg{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.75);
    z-index: 1;
}

.menu_wrap{
    position: relative;
    z-index: 2;
    width: 50%;
}

.menu_on{
    height:100vh;
    background:#040000;
}

.menu_pop .menu_on ul{
    padding: 20px;
}

.menu_pop .menu_on ul li{
    width:100%;
    padding: 1.5rem 0;
}

.menu_pop .menu_on ul li a{
    display: block;
    width:100%;
    font-size: 1.6rem;
    font-weight: 600;
}

#vision,
#artists,
#strength,
#service,
#contact{
    scroll-margin-top: 6rem;
}

.top_btn{
    position: fixed;
    right: 3rem;
    bottom: 3rem;
    width: 8rem;
    height: 8rem;
    z-index: 9;
    border: 1px solid #aaa;
}

.top_btn img{
    width:100%;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.3);
  border-radius: 10px;
}


/* animation */
@keyframes twinkle {
    0%   { opacity: 0.2; transform: translate3d(var(--tx,0), var(--ty,0), 0) scale(var(--s,1)); }
    20%  { opacity: 1;   transform: translate3d(calc(var(--tx) * 0.3), calc(var(--ty) * 0.3), 0) scale(calc(var(--s) * 1.1)); }
    60%  { opacity: 0.5; transform: translate3d(calc(var(--tx) * -0.2), calc(var(--ty) * -0.2), 0) scale(var(--s)); }
    100% { opacity: 0.25; transform: translate3d(var(--tx), var(--ty), 0) scale(var(--s)); }
}

@keyframes drift {
    0%   { transform: translate3d(var(--dx0,0), var(--dy0,0), 0) scale(var(--s,1)); }
    50%  { transform: translate3d(var(--dx1,0), var(--dy1,0), 0) scale(calc(var(--s) * 1.02)); }
    100% { transform: translate3d(var(--dx0,0), var(--dy0,0), 0) scale(var(--s,1)); }
}

@keyframes floatSpace {
  0%   { transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(0deg); }
  25%  { transform: translate(-50%, -50%) translate3d(-14px, -13px, 0) rotate(3deg); }
  50%  { transform: translate(-50%, -50%) translate3d(13px, 14px, 0) rotate(-2deg); }
  75%  { transform: translate(-50%, -50%) translate3d(-12px, 12px, 0) rotate(1deg); }
  100% { transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(0deg); }
}

@keyframes rotate90 {
  0% {
    transform: rotate(0deg);
  }
  12.5% {
    transform: rotate(90deg);
  }
  25% {
    transform: rotate(90deg);
  }
  37.5% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  62.5% {
    transform: rotate(270deg);
  }
  75% {
    transform: rotate(270deg);
  }
  87.5% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}