/* -------------------------- 공통 */
.sub_top_txt { display: flex; gap:3.125rem; flex-direction: column; margin-bottom:3.125rem; } 
.sub_top_txt .lg { font-size: 3.5rem; font-weight: 700; line-height: 140%; word-break: keep-all; } 
.sub_top_txt .desc { font-size: 1.25rem; line-height: 160%; } 

@media screen and (max-width:768px){
 .sub_top_txt .lg { font-size: 2.25rem; } 
 .sub_top_txt .lg br { display: none; } 
 .sub_top_txt .lg br.m_block { display: block !important; } 

 .sub_top_txt .desc br { display: none; } 
 }



/* -------------------------- 컴퍼니 */
/** 브랜드 스토리 **/
.brand_stroy .brand_img { width:100%; } 
.brand_stroy .brand_img img { width:100%; } 
.brand_stroy .brand_name { margin-top:3.75rem; text-align: right; } 
.brand_stroy .brand_name .name { display: flex; gap:1rem; align-items: center; justify-content: flex-end; margin-top:1rem; font-size: 2.5rem; font-weight: 700; text-align: right; } 
.brand_stroy .brand_name .name span { font-size: 1rem; font-weight: 500; line-height: 130%; } 

/** 연혁 **/
/* .history article { margin-top:100px; } */
.history article:first-of-type { margin-top:0; } 
.history article h3 { margin-bottom:2rem; font-size: 2.5rem; font-weight: 700; } 

.history .tab_box { margin-bottom:5rem; position: relative; z-index: 98; } 
.history .tab_box ul { display: flex; gap:0.375rem; } 
.history .tab_box ul li { width:300px; } 
.history .tab_box ul li a { display: block; padding:1rem; border: 1px solid var(--gray-300, #B7B7B7); background: var(--gray-50, #FCFCFC); text-align: center; border-radius: 6px; } 
.history .tab_box ul li.active a { border:1px solid #000; background-color: #fff; font-weight: bold; } 

 @media screen and (max-width: 640px){
 .history .tab_box ul li { width:50%; } 
 }


.hiystor .history_list { display: flex; flex-direction: column; } 
.history .history_list > li { display: flex; justify-content: space-between; padding-top:6.25rem; padding-bottom:6.375rem; position: relative; } 
.history .history_list > li::after { display: block; position: absolute; right:0; bottom:0; width:31.25rem; height:5.5rem; background: url("../../images/sub/logo_history.svg"); background-size: cover; font-size: 5.625rem; font-weight: 800; color: #F6F6F6; content: ''; } 
.history .history_list > li:last-child::after { display:none; } 
.history .history_list > li:first-child { padding-top:0; } 
.history .history_list > li p.year { width:35%; font-size: 5rem; font-weight: 800; } 
.history .history_list > li ul.month_list { flex:1; } 
.history .history_list > li ul.month_list li { display: flex; padding:1rem 0; border-bottom:1px solid #f5f5f5; word-break: keep-all; } 
.history .history_list > li ul.month_list li:first-child { padding-top:0; } 
.history .history_list > li ul.month_list li p.month { flex-shrink: 0; width:9.375rem; font-size: 1.25rem; line-height: 140%; } 
.history .history_list > li ul.month_list li .desc { font-size: 1.25rem; font-weight: 500; line-height: 140%; color: var(--gray-700, #555); } 


@media screen and (max-width:640px){
 .history .history_list > li { gap:2.6rem; flex-direction: column; } 
 .history .history_list > li p.year { width:100%; font-size: 4.25rem; } 
 .history .history_list > li ul.month_list li p.month { width:6rem; } 

 .history .history_list > li::after { width:240px; height:42px; } 
 }

/** 비잔 **/
.vision .vision_img { margin-bottom:6.25rem; width:100%; } 
.vision .vision_img img { width:100%; } 




/* -------------------------- 아티스트 */
/** 아티스트 리스트 **/
.artists ul.artist_list { display: grid; gap:2.875rem; grid-template-columns: repeat(3,1fr); } 
.artists ul.artist_list li a { display: flex; gap:0.5rem; flex-direction: column; } 
.artists ul.artist_list li .img { display: block; padding-top: 84.79%; overflow: hidden; position: relative; } 
.artists ul.artist_list li .img img { position: absolute; top:0; left:0; width:100%; height:100%; transition: all 0.3s; object-fit: cover; } 

.artists ul.artist_list li a:hover .img img { transform: scale(1.05); } 

.artists ul.artist_list li .name { display: flex; gap:0.875rem; align-items: center; justify-content: flex-end; font-size: 1.375rem; font-weight: 700; letter-spacing: -1.1px; } 
.artists ul.artist_list li .name::before { display: block; width:2.25rem; height:2.25rem; background: url("../../images/sub/ico_more.svg"); background-size: cover; content: ""; } 

@media screen and (max-width:1024px){
 .artists ul.artist_list { grid-template-columns: repeat(2,1fr); } 
 }

@media screen and (max-width:640px){
 .artists ul.artist_list { grid-template-columns: repeat(1,1fr); } 
 }


 /** 아티스트 페이지 **/
.artist_wrap { overflow: hidden; position: relative; width:100vw; height:100svh; } 
.artist_wrap .video { position: absolute; top:0; right:0; bottom:0; left:0; } 
.artist_wrap .video::after { position: absolute; top:0; left:0; z-index: 10; width:100%; height:100%; background-color: rgba(0, 0, 0, 0.75); content: ""; } 
.artist_wrap .video video { width:100%; height:100%; object-fit: cover; } 

.artist_wrap .artist_box { display: flex; gap:4rem; position: absolute; top:0; right:0; bottom:0; left:0; z-index:100; } 
.artist_wrap .artist_box .artist_info { display: flex; gap:2.5rem; justify-content: center; flex-direction: column; padding-left:6.25rem; width:500px; height:100%; } 
.artist_wrap .artist_box .artist_info .name .en { margin-bottom:1rem; font-family: var(--inter); font-size: 3rem; font-weight: 800; line-height: 100%; color: #FFF; text-transform: uppercase; } 
.artist_wrap .artist_box .artist_info .name .kr { font-size: 3.75rem; font-weight: 300; line-height: 100%; color: #A5A5A5; letter-spacing: -3px; } 
.artist_wrap .artist_box .artist_info ul.social_links { display: flex; gap:0.875rem; } 

.artist_wrap .artist_box .artist_info .debut_date { font-size:1.125rem; line-height: 160%; color:#fff; } 

.artist_wrap .artist_box .artist_scroll { flex:1; padding-top:5rem; padding-right:10rem; padding-bottom:5rem; padding-left:0; overflow: hidden; overflow-y: auto; height:100%; } 
.artist_wrap .artist_box .scroll_box { display: flex; gap:3.75rem; flex-direction: column; padding-top:100vh; } 
.artist_wrap .artist_box .scroll_box .album_box h3 { margin-bottom:1.25rem; font-size: 2.5rem; font-weight: 800; line-height: 140%; color: #FFF; text-transform: uppercase; letter-spacing: -2px; } 
.artist_wrap .artist_box .scroll_box .album_box ul li { font-size: 1.25rem; font-weight: 400; line-height: 160%; color: #FFF; letter-spacing: -1px; } 
.artist_wrap .artist_box .scroll_box .artist_photo { display: grid; gap:1rem; grid-template-columns: repeat(3,1fr); } 
.artist_wrap .artist_box .scroll_box .artist_photo li { overflow: hidden; } 
.artist_wrap .artist_box .scroll_box .artist_photo li img { width:100%; } 
.artist_wrap .artist_box .artist_scroll::-webkit-scrollbar { width: 0px; } 

@media screen and (max-width:1024px){
 .artist_wrap .artist_box { flex-direction: column; padding:5rem 1rem 1rem; } 
 .artist_wrap .artist_box .artist_info .name .en { font-size: 2.75rem; } 
 .artist_wrap .artist_box .artist_info .name .kr { font-size: 2.25rem; letter-spacing: 0; } 
 .artist_wrap .artist_box .artist_info { padding-left:1.5rem; } 

 .artist_wrap .artist_box .artist_scroll { padding-right:16px; } 

 .artist_wrap .artist_box .artist_info { gap:2rem; padding:0; width:100%; height:auto; } 
 .artist_wrap .artist_box .artist_scroll { padding:0; } 
 .artist_wrap .artist_box .scroll_box { display: flex; gap:3.75rem; padding-top:0; } 
 .artist_wrap .artist_box .scroll_box .artist_photo { display: grid; gap:1rem; grid-template-columns: repeat(1,1fr); } 
 }

@media screen and (max-width:640px){
 .artist_wrap .artist_box { gap:2rem; } 
 .artist_wrap .artist_box .artist_info { gap:1rem; } 
 .artist_wrap .artist_box .artist_info .name .en { font-size: 2rem; } 
 .artist_wrap .artist_box .artist_info .name .kr { font-size: 1.875rem; letter-spacing: 0; } 
 .artist_wrap .artist_box .artist_info .name .kr br {display: none;} 
 .artist_wrap .artist_box .artist_scroll { padding:0; } 
 .artist_wrap .artist_box .scroll_box .album_box ul li { font-size: 1.125rem; } 

 .artist_wrap .artist_box .scroll_box .album_box h3 { font-size: 1.875rem; letter-spacing: -0.02em; } 
 .artist_wrap .artist_box .artist_info ul.social_links {position: absolute; top:24px; right:16px; } 
 }








.artist_wrap .btn_prev { display: flex; gap:1.5625rem; flex-direction: column; position: absolute; top:1rem; left:6.25rem; z-index: 10; z-index: 9999; color:#fff; } 

.artist_wrap .btn_scroll { display: flex; gap:1.5625rem; flex-direction: column; position: absolute; right:1.25rem; bottom:2.875rem; z-index: 10; z-index: 900; color:#fff; } 
.artist_wrap .btn_scroll span.txt { font-style: italic; transform: rotate(-90deg) translateY(-50%); } 
.artist_wrap .btn_scroll span.ico { animation: bounce 1.5s infinite ease-in-out; } 

@media screen and (max-width:1024px){
 .artist_wrap .btn_scroll span.txt { font-style: normal; } 
 .artist_wrap .btn_prev { left:1.5rem; } 
 }

@media screen and (max-width:640px){
 .artist_wrap .btn_prev { top:16px; left:16px; } 

 .artist_wrap .btn_scroll { display: none; } 
 }




@keyframes bounce { 0%, 100% { transform: translateY(0); } 
 50% { transform: translateY(10px); } 
 }