@charset "utf-8";

/* COMMON */
#main-pg {font-family:'Bebas Neue','Noto Sans KR',Dotum,Helvetica,AppleGothic,Gulim,'Roboto','굴림',Sans-serif;}

.m-btnbox .more-btn {position:relative; display:inline-flex; height:5.6rem; align-items:center;}
.m-btnbox .more-btn .btn-bg {display:inline-block; transition:all .4s ease-out; height:5.6rem; width:6.5rem; position:absolute; top:50%; left:0; transform:translateY(-50%);}
.m-btnbox .more-btn .btn-txt {z-index:1; font-size:1.8rem; color:#211e1f; display:inline-flex; align-items:center; padding:0 2rem; letter-spacing: 0.1em !important;}
.m-btnbox .more-btn .ico-plus {display:inline-block; position:relative; margin-right:1rem; width:1.3rem; height:1.3rem; -webkit-transition:all 0.3s; transition:all 0.3s; }
.m-btnbox .more-btn .ico-plus:after {content:""; position: absolute; left:0; top:50%; width:100%; height:1px; background:#211e1f; -webkit-transform:translateY(-50%); transform:translateY(-50%); }
.m-btnbox .more-btn .ico-plus:before {content:""; position: absolute; left:50%; top:0; width:1px; height:100%; background:#211e1f; -webkit-transform:translateX(-50%); transform:translateX(-50%); }

.m-btnbox {margin-top:6rem; font-family:'Bebas Neue';}
.m-btnbox.ta-c {text-align:center;}
.m-btnbox .more-btn.wht .btn-txt {color:#fff;}
.m-btnbox .more-btn.wht .btn-bg {border:0.2rem solid rgba(255,255,255,0.3);}
.m-btnbox .more-btn.gry .btn-bg {background:#f1f1f1;}
.m-btnbox .more-btn.gry2 .btn-bg {background:#e6e6e6;}
.m-btnbox .more-btn.blk .btn-bg {background:#ffffff;}
.m-btnbox .more-btn.wht .ico-plus:after,
.m-btnbox .more-btn.wht .ico-plus:before {background:#fff;}
.m-btnbox .more-btn.blk .ico-plus:after,
.m-btnbox .more-btn.blk .ico-plus:before {background:#211e1f;}

.m-btnbox .more-btn:hover .btn-bg {width:100%;}
.m-btnbox .more-btn.wht:hover .ico-plus:after, .m-btnbox .more-btn.wht:hover .ico-plus:before {background:#211e1f;}
.m-btnbox .more-btn.wht:hover .btn-bg {background:#fff; border-color:#fff;}
.m-btnbox .more-btn.wht:hover .btn-txt {color:#211e1f;}


.mtitbox {text-align:center; margin-bottom:8.5rem;}
.mtitbox small {display:block; font-size:2rem; color:#c9ab81;}
.mtitbox h3 {font-size:6.5rem; margin-top:2.5rem;}


/* INTRO */
#intro { position: fixed; overflow: hidden; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 99; font-family:'Bebas Neue','Noto Sans KR',Dotum,Helvetica,AppleGothic,Gulim,'Roboto','굴림',Sans-serif;} 
#intro .intro-w { display:flex; align-items: center; justify-content: center; height: 100%; } 
#intro .bg { background-color: #211e1f; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
.loader-box { /* height: 128px; */ display: flex; align-items: center; justify-content: center; } 
.intro-txtbox { max-width: 0; display: flex; position: relative; flex-wrap: nowrap; width: 13rem; justify-content: center; align-items: center; transform-origin: center; color: #fff; font-size: 4rem; } 
.intro-txt-deco { /* height: 100%; width: auto; */ display:inline-block; position:relative; } 
.fill-ani { stroke-dasharray: 126.13; stroke-dashoffset:0; animation: fill-ani 4s linear forwards; } 
.open-ani { max-width:0; opacity:0; transform:translateY(100%); animation:open-ani 0.8s linear forwards; -webkit-animation:open-ani 0.8s linear forwards; animation-delay:0.3s; } 

@keyframes fill-ani { 
    from { stroke-dashoffset: -126.13; } 
    to { stroke-dashoffset: 0; } 
}

@-webkit-keyframes fill-ani { 
    from { stroke-dashoffset: -126.13; } 
    to { stroke-dashoffset: 0; } 
}

@keyframes open-ani { 
    from { max-width:0; opacity:0.5; transform:translateY(100%); } 
    to { max-width: 100%; opacity:1; transform:translateY(0); } 
}

@-webkit-keyframes open-ani { 
    from { max-width:0; opacity:0.5; transform:translateY(100%); } 
    to { max-width: 100%; opacity:1; transform:translateY(0); } 
}


/* MAIN VISUAL */
#mvisual {padding:0 5rem;}
#mvisual .slide-w {position:relative;}
#mvisual .swiper-slide {position:relative; height:100vh; max-height:76.7rem;}
#mvisual .swiper-slide .bg {width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover;}
#mvisual .txtbox {position:absolute; bottom:0; left:5rem; width:100%; padding:7rem 8rem; opacity:0; transition:all 1s ease; transition-delay:0.8s;}
#mvisual .txtbox .date {font-size:2.4rem; color:#fff; font-style:italic;}
#mvisual .txtbox h3 {font-size:6rem; color:#fff; margin-top:2rem;}
#mvisual .navi-box {display:flex; margin-left:3rem; position:absolute; bottom:0; right:0; padding:7rem 8rem; z-index: 2;}
#mvisual .navi-box .navi-btn:first-child {margin-right:3.5rem;}

#mvisual .swiper-slide-active .txtbox {opacity:1; left:0;}



/* INSIGHT */
#minsight {padding-top:15rem; margin-top:4rem;}
#minsight article {display:flex; align-items:center;}
#minsight article .slide-numbox {flex-shrink:0; padding:0 7rem; margin-left:5rem; display:inline-flex;}
#minsight article .slide-numbox .swiper-pagination-current {font-size:3.695rem;}
#minsight article .slide-numbox .slash {color:#e0e0e0; font-size:4rem; font-family: 'Noto Sans KR'; font-weight: 300;}
#minsight article .slide-numbox .swiper-pagination-total {font-size:2.026rem; color:#c9ab81; display: flex; align-items: flex-end;}
#minsight article .slide-w {width:100%;}
#minsight article .slide-w .swiper-slide {width:auto; max-width:calc(33.333% + 3rem); margin-right:3rem; overflow:hidden;}

#minsight article .slide-w .img {position:relative; overflow:hidden;}
#minsight article .slide-w .img::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index:3; background: rgba(255,255,255,1); transition:left 1.5s ease-in-out;}
#minsight article .slide-w.aos-animate .img::before {left: 100%;}

#minsight article .slide-w .txtbox {transform:translateX(5rem);  opacity:0; transition:1s ease; transition-delay:1s;}
#minsight article .slide-w.aos-animate .txtbox {transform:translate(0); opacity:1;}



#minsight .txtbox {padding:3.5rem 0;}
#minsight .txtbox small {display:block; font-size:2rem; color:#c9ab81; letter-spacing:0.025em;}
#minsight .txtbox .tit {font-size:2.4rem; color:#333; margin-top:1.5rem; font-weight:600;}



/* ABOUT BAEXANG */
#mabout {margin:15rem 5rem 0 5rem; position:relative;}
#mabout .img {position:absolute; top:-10rem; left:-21rem; z-index:1;}
#mabout .bg-deco01 {display:block; line-height:0.8; height:10rem; overflow:hidden; text-align:right; font-size:15.5rem; color:#f8f8f8; letter-spacing:0.1em; padding-right:2rem;}
#mabout article {position:relative; padding-left:calc(50% - 9rem); padding-top:11rem; padding-bottom:15rem; margin-left:21rem; background:#f8f8f8; display:flex; flex-direction:column; justify-content:center;}
#mabout article .bg-deco02 {font-size:17.5rem; color:#fff; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #e4e4e4; position:absolute; bottom:0; right:2rem; letter-spacing:0.1em; text-align:right; line-height: 0.94;}
#mabout .txtbox small {display:block; font-size:2rem; color:#c9ab81;}
#mabout .txtbox h3 {font-size:6.5rem; margin-top:2.5rem;}
#mabout .txtbox .desc {font-size:1.8rem; margin-top:4.5rem; line-height:1.55; z-index:2;}


/* ARTIST */
#martist {padding:15rem 0;}
#martist .artist-list {display:flex; flex-wrap:wrap;}
#martist .artist-list li {position:relative; margin-right:3rem; width:calc(25% - 2.25rem); overflow:hidden;}
#martist .artist-list li:nth-child(4n) {margin-right:0;}
#martist .artist-list li:nth-child(n+5) {margin-top:3rem;}
#martist .artist-list li .hovbox {opacity:0; visibility:hidden; display:block; position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; flex-wrap:wrap; background:rgba(0,0,0,0.6); transition:all .4s ease; transform:translate3d(100%,0,0);}
#martist .artist-list li .hovbox .name {font-size:3rem; color:#fff; font-style:italic; display:block; width:100%;}
#martist .artist-list li .hovbox .desc {font-size:1.8rem; color:#fff; margin-top:2rem; display:block; width:100%;}
#martist .artist-list li:hover .hovbox {opacity:1; visibility:visible; transform:translate3d(0,0,0);}
#martist .artist-list li .img {display:block; width: 100%; height: 0; padding-bottom: 116.5%;}
#martist .artist-list li .img img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;}

/* NEWS & NOTICE */
#mnotice {padding:15rem 0; margin:0 5rem 5rem;  background:#f8f8f8;}
#mnotice .list {border-top:1px solid #211e1f; border-bottom:1px solid #211e1f;}
#mnotice .list li {border-bottom:1px solid #211e1f; padding:3.5rem 0; display:flex; align-items:center;}
#mnotice .list li:last-child {border-bottom:none;}
#mnotice .list li .cate {font-size:2.4rem; margin-left:5rem; text-align:center; width:6rem; flex-shrink:0;}
#mnotice .list li .title {margin-left:5rem; width:calc(100% - 43.5rem);}
#mnotice .list li .title a {font-size:1.8rem; font-weight:600; letter-spacing:-0.025em; display:inline-block; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#mnotice .list li .date {font-size:2.4rem; color:#c9ab81; margin-left:5rem; width:10.5rem; flex-shrink:0;}
#mnotice .list li .arr { margin-left:5rem; margin-right:2.5rem; width:4.5rem; flex-shrink:0;}
#mnotice .list li:hover .arr {animation: arr-ani 0.7s ease-out;}

@keyframes arr-ani {
    0%{
        transform:translateX(0);
        opacity:1;
    }50%{
        transform:translateX(1rem);
        opacity:0.8;
    }100%{
        transform:translateX(0);
        opacity:1;
    }
}




@media ( max-width: 1750px ) {
    #mabout .img {max-width: calc(50% + 10.5rem);}
}


@media ( max-width: 1400px ) {
    #mvisual {padding:0 3%;}

    #mabout {margin: 15rem 3% 0 3%;}
    #mabout article {margin-left:3%; padding-left:52%; padding-right:3%;}
    #mabout article .bg-deco02 {font-size:11rem;}
    #mabout .bg-deco01 {font-size:9.5rem; height:6rem;}
    #mabout .img {top:-6rem; left:-3%; z-index:1; width:53%;}

    #mnotice {margin:0 3% 3%;}
}

@media ( max-width: 1024px ) {
    /* 메인의 섹션들 마진값 10rem 간격으로 통일 */

    .m-btnbox {margin-top:5rem;}

    .mtitbox {margin-bottom:6rem;}
    .mtitbox small {font-size:1.8rem;}
    .mtitbox h3 {font-size:4.4rem; margin-top:1.5rem;}

    #mvisual .txtbox {padding:6rem 4rem;}
    #mvisual .txtbox h3 {font-size:4.8rem; margin-top:1rem;}
    #mvisual .navi-box {padding:6rem 4rem;}
    #mvisual .swiper-slide {max-height:65rem;}

    #minsight {margin-top:0; padding-top:10rem;}
    #minsight article .slide-numbox {margin-left:0; padding:0 5%;}
    #minsight article .slide-w .swiper-slide {margin-right:1.5rem;}
    #minsight article .slide-numbox .swiper-pagination-current {font-size:3.2rem;}
    #minsight article .slide-numbox .slash {font-size:3.8rem;}
    #minsight article .slide-numbox .swiper-pagination-total {font-size:2rem;}
    #minsight .txtbox small {font-size:1.85rem;}
    #minsight .txtbox .tit {font-size:2rem; margin-top:1rem;}

    #mabout {margin-top:10rem;}
    #mabout article {padding-top:8rem;}
    #mabout article .bg-deco02 {font-size:9rem;}
    #mabout .bg-deco01 {font-size:8rem; height:4.8rem; padding-right:1rem;}
    #mabout .txtbox h3 {font-size:4.8rem; margin-top:1.5rem;}
    #mabout .txtbox .desc {margin-top:3.5rem; font-size:1.7rem;}

    #martist {padding:10rem 0;}
    #martist .artist-list li {margin-right:1.5rem; width: calc(25% - 1.125rem);}
    #martist .artist-list li:nth-child(n+5) {margin-top:1.5rem;}
    #martist .artist-list li .hovbox .name {font-size:2.6rem;}
    #martist .artist-list li .hovbox .desc {font-size:1.7rem; margin-top:1rem;}

    #mnotice {padding:10rem 0;}
    #mnotice .list li {padding:2rem 0;}
    #mnotice .list li .cate {font-size:2rem; margin-left:3%;}
    #mnotice .list li .title {margin-left:3%; width:calc(100% - 21rem - 15%);}
    #mnotice .list li .title a {font-size:1.7rem;}
    #mnotice .list li .date {font-size:2rem; margin-left:3%;}
    #mnotice .list li .arr {margin-left:3%; margin-right:3%;}
}   


@media ( max-width: 768px ) {
    /* 메인의 섹션들 마진값 8rem 간격으로 통일 */
    .intro-txtbox {font-size:3.2rem;}
    .intro-txt-deco {transform:scale(0.85);}


    .m-btnbox {margin-top:4rem;}

    .mtitbox {margin-bottom:4rem;}
    .mtitbox small {font-size:1.7rem;}
    .mtitbox h3 {font-size:3.6rem; margin-top:1rem;}

    #mvisual {padding:0;}
    #mvisual .txtbox {padding:5rem 3%;}
    #mvisual .txtbox h3 {font-size:4rem; margin-top:1rem;}    
    #mvisual .navi-box {padding:5rem 3%;}
    #mvisual .swiper-slide {max-height:50rem;}

    #minsight {padding-top:8rem;}
    #minsight .txtbox small {font-size:1.7rem;}
    #minsight .txtbox .tit {font-size:1.8rem; margin-top:1rem;}
    #minsight article {flex-wrap:wrap;}
    #minsight article .slide-w {order:1; padding-left:3%;}
    #minsight article .slide-numbox {width:100%; justify-content: flex-end; margin-bottom:1.5rem; padding:0 3%;}

    #mabout {margin-top:8rem;}
    #mabout .bg-deco01 {font-size:6.4rem; height:3.6rem;}
    #mabout article {padding:6rem 3%; margin-left:0;}
    #mabout article .bg-deco02 {font-size:6rem; bottom:2%; right:2%;}
    #mabout .txtbox h3 {font-size:3.6rem; margin-top:1rem;}
    #mabout .txtbox .desc {margin-top:3rem; font-size:1.6rem;}
    #mabout .img {position:inherit; top:auto; left:auto; width:100%; max-width:inherit; margin-bottom:5rem;}

    #martist {padding:8rem 0;}
    #minsight article .slide-w .swiper-slide {max-width:calc(50% + 3rem);}
    #martist .artist-list li {margin-right:1.5rem; width: calc(33.333% - 1.125rem);}
    #martist .artist-list li:nth-child(4n) {margin-right:1.5rem;}
    #martist .artist-list li:nth-child(3n) {margin-right:0;}
    #martist .artist-list li:nth-child(n+4) {margin-top:1.5rem;}
    #martist .artist-list li:nth-child(n+7) {display:none;}
    #martist .artist-list li .hovbox .name {font-size:2.2rem;}
    #martist .artist-list li .hovbox .desc {font-size:1.6rem;}
    #minsight article .slide-w .txtbox {padding:2rem 0;}

    #mnotice {padding:8rem 0; margin:0;}
    #mnotice .list li .title {width:calc(100% - 16.5rem - 9%);}
    #mnotice .list li .arr {display:none;}
    #mnotice .list li .cate {font-size:1.8rem;}
    #mnotice .list li .title a {font-size:1.6rem;}
    #mnotice .list li .date {font-size:1.8rem;}
}

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