@import url('sub.css');

/*** Contents ***/
/* LIFE — DORM */
.dorm { overflow:hidden; }
.dorm .basic_in { display:flex; flex-direction:column; gap:60px; }
.dorm_gallery { display:flex; flex-direction:column; gap:30px; min-width:0; }
.dorm_slide { width:100%; overflow:visible; }
.dorm_slide .swiper-slide { width:750px; aspect-ratio:3/2; border-radius:var(--borderR30); overflow:hidden; }
.dorm_slide .swiper-slide img { width:100%; height:100%; object-fit:cover; }
.dorm_slide:not(.swiper-initialized) .swiper-slide { margin-right:30px; }
.dorm .slide_ctrl { display:flex; align-items:center; gap:30px; width:100%; }
.dorm .slide_ctrl.hide { display:none; }
.dorm .slide_arrows { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.dorm .slide_arrows button { display:flex; align-items:center; justify-content:center; width:56px; height:56px; border:1px solid var(--border); border-radius:40px; background:transparent; color:var(--black); cursor:pointer; transition:border-color 0.3s linear, color 0.3s linear, background 0.3s linear; }
.dorm .slide_arrows button::before { font-family:'Material Symbols Outlined'; font-size:24px; line-height:100%; color:inherit; opacity:0.5; transition:opacity 0.3s linear; }
.dorm .slide_arrows .dorm_prev::before { content:"\e5c4"; }
.dorm .slide_arrows .dorm_next::before { content:"\e5c8"; }
.dorm .slide_arrows button:hover { border-color:var(--main); color:var(--white); background:var(--main); }
.dorm .slide_arrows button:hover::before { opacity:1; }
.dorm .slide_arrows button.swiper-button-disabled { cursor:default; opacity:0.4; pointer-events:none; }
.dorm_progress { position:relative; flex:1 1 auto; min-width:80px; height:2px; background:rgba(42,38,35,0.1); }
.dorm_progress .swiper-pagination-progressbar-fill { position:absolute; left:0; top:-2px; width:12.5%; height:6px; transition:width 0.6s ease; }
.dorm_progress .swiper-pagination-progressbar-fill::before { content:''; position:absolute; left:0; right:3px; top:2px; height:2px; background:var(--main); }
.dorm_progress .swiper-pagination-progressbar-fill::after { content:''; position:absolute; right:0; top:0; width:6px; height:6px; border-radius:50%; background:var(--main); }

/* LIFE — DORM TABLE */
.dorm_table { border-top:2px solid var(--main); }
.dorm_table table { width:100%; border-collapse:separate; border-spacing:0px; table-layout:fixed; }
.dorm_table th, .dorm_table td { padding:16px 18px; border-bottom:1px solid var(--border); word-break:keep-all; }
.dorm_table th { width:300px; background:var(--grayBg); font-weight:600; color:var(--black); text-align:center; border-right:1px solid var(--border); box-sizing:border-box; }
.dorm_table td { background:var(--white); color:var(--basic); line-height:170%; }

/* LIFE — ALBUM */
.album_top { padding:120px 0px; background:var(--grayBg); }
.album_feature { position:relative; }
.album_slide { width:100%; overflow:hidden; }
.album_item { display:flex; align-items:stretch; }
.album_img { width:50%; aspect-ratio:765 / 498; flex-shrink:0; border-radius:var(--borderR30); overflow:hidden; }
.album_img img { display:block; width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; }
.album_txt { display:flex; flex-direction:column; gap:20px; width:50%; padding:70px 100px 156px; box-sizing:border-box; min-width:0; }
.album_date { display:flex; align-items:center; gap:3px; color:rgba(42,38,35,0.5); letter-spacing:0; }
.album_date::before { content:"\ebcc"; font-family:var(--icon); font-size:20px; line-height:100%; }
.album_tit { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; transition:color 0.3s ease; }
.album_desc { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; color:rgba(42,38,35,0.65); word-break:keep-all; }
.album_ctrl { display:flex; align-items:center; gap:30px; position:absolute; left:calc(50% + 100px); bottom:70px; z-index:2; }
.album_ctrl.hide { display:none; }
.album_num { display:flex; align-items:flex-start; gap:6px; }
.album_num b { font-size:1.2222rem; line-height:154.55%; font-weight:700; color:var(--main); }
.album_num span { padding-top:10px; font-size:0.8889rem; line-height:175%; color:rgba(42,38,35,0.65); opacity:0.5; white-space:pre; }
.album_arrows { display:flex; align-items:center; gap:1px; }
.album_arrows button { display:flex; align-items:center; justify-content:center; width:56px; height:56px; border:1px solid var(--border); border-radius:var(--borderR40); background:var(--white); color:var(--black); cursor:pointer; transition:border-color 0.3s linear, color 0.3s linear, background 0.3s linear; }
.album_arrows button::before { font-family:var(--icon); font-size:24px; line-height:100%; color:inherit; opacity:0.5; transition:opacity 0.3s linear; }
.album_arrows .album_prev::before { content:"\e5c4"; }
.album_arrows .album_next::before { content:"\e5c8"; }
.album_arrows button:hover { border-color:var(--main); background:var(--main); color:var(--white); }
.album_arrows button:hover::before { opacity:1; }




/*******************************************************************************
    @media 1680px
*******************************************************************************/
@media all and (max-width:1680px){



}
/*******************************************************************************
    @media ~1500px
*******************************************************************************/
@media all and (max-width:1500px){
/* LIFE — ALBUM */
.album_top { padding:100px 0px; }
.album_txt { padding:50px 60px 136px; }
.album_ctrl { left:calc(50% + 60px); bottom:50px; }


}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* LIFE — DORM */
.dorm .basic_in { gap:50px; }
.dorm_slide .swiper-slide { width:600px; }

/* LIFE — DORM TABLE */
.dorm_table th { width:220px; }

/* LIFE — ALBUM */
.album_top { padding:80px 0px; }
.album_txt { gap:15px; padding:30px 40px 110px; }
.album_ctrl { left:calc(50% + 40px); bottom:30px; gap:20px; }
}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
/* LIFE — DORM */
.dorm .basic_in { gap:40px; }
.dorm_gallery { gap:20px; }
.dorm_slide .swiper-slide { width:480px; border-radius:var(--borderR20); }
.dorm_slide:not(.swiper-initialized) .swiper-slide { margin-right:20px; }
.dorm .slide_ctrl { gap:20px; }
.dorm .slide_arrows button { width:48px; height:48px; }
.dorm .slide_arrows button::before { font-size:20px; }

/* LIFE — DORM TABLE */
.dorm_table th { width:160px; }
.dorm_table th, .dorm_table td { padding:14px 16px; }

/* LIFE — ALBUM */
.album_top { padding:60px 0px; }
.album_item { flex-direction:column; }
.album_img { width:100%; border-radius:var(--borderR20); }
.album_txt { width:100%; gap:12px; padding:30px 0px 90px; }
.album_ctrl { left:0; bottom:0; }
.album_arrows button { width:48px; height:48px; }
.album_arrows button::before { font-size:20px; }
}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* LIFE — DORM */
.dorm .basic_in { gap:30px; }
.dorm_gallery { gap:16px; }
.dorm_slide .swiper-slide { width:84%; }
.dorm_slide:not(.swiper-initialized) .swiper-slide { margin-right:12px; }
.dorm .slide_ctrl { gap:16px; }
.dorm .slide_arrows button { width:40px; height:40px; }
.dorm .slide_arrows button::before { font-size:18px; }

/* LIFE — DORM TABLE */
.dorm_table th { width:90px; }
.dorm_table th, .dorm_table td { padding:12px 10px; }

/* LIFE — ALBUM */
.album_top { padding:50px 0px; }
.album_txt { gap:10px; padding:20px 0px 70px; }
.album_date::before { font-size:18px; }
.album_ctrl { gap:16px; }
.album_num span { padding-top:6px; }
.album_arrows button { width:40px; height:40px; }
.album_arrows button::before { font-size:18px; }
}