/* main */
.main_tit {margin-bottom: 80px; display: flex; flex-direction: column; gap: 20px;}
.main_tit .big {font-size: 3.25rem; line-height: 1.2; font-weight: 700;}
.main_tit .small {font-size: 1.5rem;}
/* 
.main_top {
    width: 100%; height: 100%; min-height: 100vh; overflow: hidden; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.main_top .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main_top .bg::before {
    display: block; content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0;
    background: #000; opacity: .5; z-index: 1;
}  */
.main_top {
    width: 100%; height: auto; overflow: hidden; position: relative;
    display: flex; align-items: center; justify-content: center; margin-top: 90px;
}
.main_top .bg {width: 100%; max-height: calc(100vh - 90px); aspect-ratio: 16/8.45; font-size: 0; position: relative;}
.main_top .bg::before {
    display: block; content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0;
    z-index: 1;
}   
.main_top .bg_video {width: 100%; height: 100%;}
.main_top .bg_video video,
.main_top .bg_video .video_container {width: 100%; height: 100%; padding-bottom: 0;}

/* .main_top .bg {position: absolute; top: 90px; left: 0; width: 100%; }
.main_top .bg::before {
    display: block; content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0;
    z-index: 1;
}    
.main_top .bg_video {width: 100%; height: 100%;}
.main_top .bg_video video {width: 100%; height: 100%;} */

.main_top .soon_box {
    display: block; content: ""; position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); z-index: 2;
    width: 90%; max-width: 1720px; display: flex; justify-content: flex-end;
}
.main_top .soon {
    
    border-radius: 5px; font-size: 1.5rem; text-align: center; padding: 15px; width: max-content;
    background: linear-gradient(97deg, #483EDA 0%, #C13CFF 102.43%); margin-right: 123px;
}
.main_top .soon span {display: block; line-height: 1.2}
.main_top .inner {
    position: relative; z-index: 2; padding: 150px 20px; gap: 60px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.main_top .title {font-size: 3.25rem; text-align: center; line-height: 1.2;}
.main_top .title .logo {margin-bottom: 20px;}
.main_top .btn {width: max-content;}

.main_bnn {display: flex; align-items: center; position: relative; background: linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,.9) 50%);}
.main_bnn::after {
    display: block; content: ""; z-index: -1;
    width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url('../../img/bg_main_bnn.webp') no-repeat right top / cover;
}
.main_bnn .inner { position: relative; }
.main_bnn .cont_box {display: flex; gap: 40px; align-items: center;}
.main_bnn .logo {width: 350px; mix-blend-mode: difference;}
.main_bnn .cont {display: flex; flex-direction: column; gap: 30px;}
.main_bnn .tit .big {font-size: 3.25rem; font-weight: 700; line-height: 1.2}
.main_bnn .tit .small {font-size: 1.875rem}
.main_bnn .text .big {font-size: 1.25rem; font-weight: 700}
.main_bnn .text .small {margin-top: 10px;}

.main_ben .list {display: flex; gap: 30px;}
.main_ben .item {padding: 30px; position: relative; display: flex; gap: 20px 60px; flex-wrap: wrap; align-items: stretch; align-content:flex-start}
.main_ben .item:nth-child(1) {flex: 2;}
.main_ben .item:nth-child(2) {flex: 1;}
.main_ben .item:nth-child(3) {flex: 1;}
.main_ben .item::after {
    display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
    border: 2px solid transparent; border-radius: 10px;
    background-image: linear-gradient(#000, #000), linear-gradient(97deg, #483EDA 0%, #C13CFF 102.43%);
    background-origin: border-box; background-clip: content-box, border-box;
}
.main_ben .item .title {width: 100%; font-size: 1.5rem; padding-bottom: 15px; border-bottom: 1px solid #555;}
.main_ben .item .box {display: flex; flex-direction: column; gap: 15px; width: 100%; position: relative; width: calc(50% - 30px); height: calc(100% - 60px);}
.main_ben .item .box.w100 {width: 100%;}
/* .main_ben .item .box::after {
    display: block; content: ""; width: 1px; height: 100%; background: #555;
    position: absolute; right: -30px; top: 0;
} */
.main_ben .item .box:last-child:after {display: none;}
.main_ben .item .text {flex: 1 0 0;}
.main_ben .item .text .big {font-size: 1.25rem; font-weight: 700;}
.main_ben .item .text .small {margin-top: 15px;}
.main_ben .item .icon {width: 80px; font-size: 0; flex-shrink: 0; margin-left: auto;}

.main_cnt {overflow: hidden;}
.main_cnt .item {border-radius: 10px; overflow: hidden; width: 30%; display: flex; flex-direction: column;}
.main_cnt .item .text {background: #0D0D0D; padding: 30px; display: flex; flex-direction: column; gap: 10px; flex: 1 0 0;}
.main_cnt .item .text .name {font-size: 1.5rem; font-weight: 700;}
.main_cnt .item .text .descript {font-size: 1rem;}
.main_cnt .swiper {overflow: unset;}

.main_app {background: url('../../img/bg_main_app.jpg') no-repeat center center / cover; position: relative;}
.main_app::after {
    display: block; content: ""; width: 100%; height: 100%; background: #000; opacity: .7;
    position: absolute; top: 0; left: 0;
}
.main_app .inner {position: relative; z-index: 1;}
.main_app .cont_box {width: max-content; max-width: 100%; display: flex; gap: 60px; align-items: center; margin: 0 auto;}
/* .main_app .img {font-size: 0; max-width: 400px; width: 40%;} */
.main_app .main_tit {text-align: center; margin-bottom: 0 !important;}
.main_app .main_tit .logo {display: inline-block; vertical-align: middle;}
.main_app .main_tit .logo img {height: 42px;}
.main_app .btn_box { display: flex; justify-content: center; gap: 10px; font-size: 0;}

.main_gal {overflow: hidden;}
.main_gal .inner {max-width: unset; width: 100%;}
.main_gal .swiper_box {width: 140%; left: 50%; transform: translateX(-50%);}
.main_gal .swiper_box::after,
.main_gal .swiper_box::before {
    display: block; content: "";  height: 100%; width: 20%;
    position: absolute; top: 0; z-index: 2; opacity: .5;
}
.main_gal .swiper_box::before {left: 0; background: linear-gradient(to left, transparent 0%, #000 30%)}
.main_gal .swiper_box::after {right: 0; background: linear-gradient(to right, transparent 0%,#000 30%)}
.main_gal .item {border-radius: 10px; overflow: hidden; cursor: pointer;}
.main_gal .item .thumb {aspect-ratio: 7/5; overflow: hidden;}
.main_gal .swiper_btn {width: 100vw; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3;}
.swiperMainGalPrev {left: 40px;}
.swiperMainGalNext {right: 40px;}

#popGalleryView .layer {width: max-content;}
#popGalleryView .img {width: 100%; height: 100%; font-size: 0; max-height: calc(90vh - 30px); overflow: hidden; border-radius: 10px;}
#popGalleryView .img img {width: 100%; height: 100%; object-fit: contain; max-height: calc(90vh - 30px);}


/* about */
.about_top {
    width: 100%; height: auto; padding: 230px 0 150px; overflow: hidden; position: relative;
    display: flex; align-items: center; justify-content: center; background: #18181C;
    margin-bottom: 40px;
}
.about_top::after {
    display: block; content: "";
    position: absolute; bottom: 0; left: 25%; width: 100%; height: 100%;
    background: url('../../img/bg_about_top.webp') no-repeat center bottom / auto 150%;
}
.about_top::before {
    display: block; content: ""; width: 60%; height:100%; background: linear-gradient(to right, #18181C 50%, rgba(24, 24, 28, 0.00) 100%); 
    position: absolute; top:0; left: 0; z-index: 1;
}

/* .about_top::after {
    display: block; content: ""; width: 100%; height:100px; background: linear-gradient(to bottom, transparent 0%, #000 100%); 
    position: absolute; bottom: 0; left: 0; 
}  */
.about_top .inner {position: relative; z-index: 2;}
.about_top .title {display: flex; flex-direction: column;}
.about_top .title .big {font-size: 3.75rem;font-weight: 700; line-height: 1.2;}
.about_top .title .big span {display: inline-block;}
.about_top .title .small {font-size: 1.5rem;}
.about_top .text {margin-top: 40px; font-size: 1.125rem;}
.about_top .cmnt {margin-top: 40px; opacity: .8;}

.about_bra {margin-top: 40px;}

.about_tab {padding:40px 0;display: flex; justify-content: center; align-items: flex-end; gap: 40px;}
.about_tab a {font-size: 1.5rem; color: #777; padding-bottom: 7px; text-align: center;}
.about_tab a:hover {color: #fff; font-weight: 700;}
.about_tab a.active {font-weight: 700; color: #fff; border-bottom: 3px solid var(--lightPurple)}

.about_tab.fixed {
    position: fixed;
    top: 90px;
    left: 0;
    width: 100%;
    background: #000;
    border-top: 1px solid #333;
    z-index: 1000; /* 다른 요소보다 위로 */
}


.about_sec_top {position: relative; height: 600px; overflow: hidden;}
.about_sec_top .inner {position: relative; z-index: 1; display: flex; align-items: center; height: 100%;}

.about_sec_top .title .big {font-size: 3.75rem; line-height: 1.3; font-weight: 700;} 
.about_sec_top .bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 0;
}
.about_sec_top .bg img {width: 100%; height: 100%; object-fit: cover; object-position: right center;}
.about_sec_top .bg::after {display: block; content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.about_sec_top.sound .bg::after {    
    background: linear-gradient(to right,rgba(0,0,0,.8) 50%, transparent 100%);
}
.about_sec_top.xr .bg::after {
    background: linear-gradient(to right,rgba(0,0,0,.9) 0%, transparent 100%);
}
.about_sec_top .bg::before {
    display: block; content: ""; width: 100%; height: 50%; position: absolute; bottom: 0; left: 0; 
    background: linear-gradient(to top,#000 0%, transparent 100%);
    }

.about_cont .cont_box {display: flex; gap: 120px; flex-direction: column;}
.about_cont .cont_box .img {display: flex; gap: 20px; width: 100%; flex-shrink: 0;}
.about_cont .cont_box .img > div {width: 100%; aspect-ratio: 16/9; overflow: hidden;}
.about_cont .cont_box .img img {width: 100%; height: 100%; object-fit: cover;}
.about_cont .cont_box .cont {
    font-size: 1.5rem; display: flex; flex-direction: column; gap: 30px; font-weight: 400; width: 100%;
    max-width: 880px; text-align:justify; text-justify:inter-word; word-break: break-all;
}


.about_bra .img {display: flex; align-items: center; justify-content: center; width: 100%; max-height: 100vh; overflow: hidden;}
.about_bra .img img {width: 100%; height: 100%; object-fit: contain; }
.about_bra .img1 {background: url('../../img/bg_about_bra01.jpg') no-repeat center center / 100% 100%; position: relative;}
.about_bra .img2 {background: url('../../img/bg_about_bra02.jpg') no-repeat center center / 100% 100%}
.about_bra .img3 {background: #121212;}
/* .about_bra .img1::after {
    display: block; content: ""; background: linear-gradient(to bottom,#000 0%, transparent 100%);
    width: 100%; height: 100px; position: absolute; top: 0; left: 0;
} */

.about_nar {padding-bottom: 80px;}
.about_nar .list {display: flex; gap: 60px;}
.about_nar .item {width: 100%;}
.about_nar .item .img {aspect-ratio: 8/5; overflow: hidden; width: 100%; max-width: 540px;}
.about_nar .item .img img {width: 100%; height: 100%; object-fit: cover;}
.about_nar .item .cont {margin-top: 30px;}
.about_nar .item .name {font-size: 1.75rem;}
.about_nar .item .text {margin-top: 8px; font-size: 1.125rem; display: flex; flex-direction: column; gap: 5px;}
.about_nar .item .text p {padding-left: 12px; position: relative;}
.about_nar .item .text p::before {
    display: block; content: ""; width: 4px; height: 4px; background: var(--lightPurple);
    position: absolute; left: 0; top: 9px;
}

.about_crew {background: #121212; padding-top: 80px;}
.about_crew .box_wrap {display: flex; gap: 100px;}
.about_crew .box_list {display: flex; flex-direction: column; gap: 60px; width: 100%;}
.about_crew .box_tit {font-size: 1.5rem; font-weight: 700; padding-bottom: 10px; border-bottom: 1px solid #aaa;}
.about_crew .box {padding-top: 25px; display: flex; flex-direction: column; gap: 30px;}
.about_crew .box .tit {display: flex; flex-direction: column; gap: 3px;}
.about_crew .box .tit .big {font-size: 1.25rem; font-weight: 700; color: #fff;}
.about_crew .box .tit .sub {font-size: 1.125rem; font-weight: 700;}
.about_crew .box .list {display: flex; flex-direction: column; gap: 15px;}
.about_crew .box .item {color: #ddd; display: flex; gap: 10px;}
.about_crew .box .item .gu {font-weight: 700; display: flex; gap: 10px; flex-shrink: 0;}
/* .about_crew .box .item .gu::before {
    content: "·"; 
} */

.about_crew .box1 .item .gu,
.about_crew .box2 .item .gu {width: 400px;}
.about_crew .box3 .item .gu {width: 250px;}
.about_crew .box4 .item .gu {width: 100%;}
.about_crew .box5 .item .gu {width: 250px;}




/* press */
.prs_list {display: flex; flex-wrap: wrap; gap: 40px;}
.prs_list .item {width: calc(25% - 30px); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column;}
.prs_list .item .info {padding: 20px; background: #0D0D0D; display: flex; flex-wrap: wrap; gap: 10px;}
.prs_list .item .subject {
    font-size: 1.15rem; height: 55px; text-overflow: ellipsis; overflow:hidden; word-break: break-all; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 100%;
}
.prs_list .item .date {width: 100%; font-size: 0.875rem; color: #ccc; margin-bottom: 10px;}

.prs_view {max-width: 1000px; margin: 0 auto;}
.prs_view .contents {display: flex; flex-direction: column; gap: 60px; padding-bottom: 60px; border-bottom: 1px solid #fff; }
.prs_view .title {padding-bottom: 20px; border-bottom: 1px solid #fff;}
.prs_view .title .subject {font-size: 2rem;}
.prs_view .title .date { font-size: 0.875rem; margin-top: 10px; color: #7a6161;}
.prs_view .goList {margin-left: auto; margin-top: 60px; width: 150px;}


/* faq */
.faq_wrap .inner {max-width: 1000px;}
.faq_sec {display: flex; flex-direction: column; gap: 60px;}
.faq_sec .ready {border: 1px solid #fff; padding: 30px 20px; text-align: center;}
.faq_sec .ready .big {font-weight: 700; font-size: 1.25rem;}
.faq_sec .ready .small {margin-top: 10px;}
.faq_sec .supp_box {text-align: center; font-size: 1.25rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 10px;}
.faq_tit {font-size: 1.5rem; color: var(--lightPurple); font-weight: 700; margin-bottom: 15px;}
.faq_list {border: 1px solid #fff; border-bottom: 0;}
.faq_list li {border-bottom: 1px solid #fff;width: 100%; padding: 0 20px;}
.faq_list .ask {font-size: 1.125rem; position: relative; padding: 30px 30px 30px 55px; cursor: pointer;}
.faq_list .ask::before {
    display: block; content: "Q"; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 100px; background: var(--mainColor);
    position: absolute; left: 0; top: 24px;
}
.faq_list .ask::after {
    display: block; content: ""; width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff;
    transform: rotate(135deg); position: absolute; right: 2px; top: 37px;
}
.faq_list .answer { padding: 20px; margin-bottom: 30px; background:#222; display: none;}


/* creators */
.crd_wrap .inner {max-width: max-content; width: 100%;}
.crd_list {border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; padding: 40px 0; display: flex; flex-direction: column; gap: 30px;}
.crd_list .item { font-size: 1.125rem; display: flex;}
.crd_list .item .gu {font-weight: 700; width: 150px; flex-shrink: 0;}
.crd_list .item .nae {color: #ccc;}


/* terms */
.terms_wrap .inner {max-width: 1000px;}
.terms_box {color: #ccc; line-height: 1.5; word-break: break-all;}
.terms_box .tit {font-weight: 700; font-size: 1.5rem; margin-bottom: 5px; color: #fff;}
.terms_box .stit {font-weight: 700; margin-bottom: 5px; color: #fff;}