@charset "UTF-8";

/*--------------------------------------------------------- MAIN ---------------------------*/
.main-visual {width: 100%;height: calc(var(--vh, 1vh) * 100) !important;background-size: cover;background-repeat: no-repeat;background-position: bottom;position: relative;}
.main-visual:after{content:'';position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.main-visual__pc{
    padding: 56.25% 0px 0px;
    position: absolute;
    user-select: auto;
    bottom: 0;
    left: 0;
    width: 100%;
}
.main-visual__mo{
    position: absolute;
    user-select: auto;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.main-visual__pc iframe{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    user-select: auto;
}
.main-visual__mo iframe{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    user-select: none;
}
.main-visual__pc{display:block}
.main-visual__mo{display:none}


/*--------------------------------------------------------- COMMON ---------------------------*/
[class^=pt-page]{position: absolute;width: 100%;height: 100%;top: 0;left: 0;background-color: #000;}
.current-page{z-index: 5;}
.pt-page-main {position: absolute;width: 100%;height: 100%;top: 0;left: 0;overflow: hidden;z-index: 9;}
.pt-page-list {position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 4;overflow: hidden;}
.pt-page-detail {position: absolute;width: 100%;height: 100%;top: 0;left: 0;height: 100vh !important;overflow-y: auto;}

/* .pt-page-main.current-page{z-index: 11;} */
[class*=pt-page-move].pt-page-main{z-index: 9;}
[class*=pt-page-move].pt-page-list{z-index: 7;}
[class*=pt-page-move].pt-page-detail{}

.pt-page-main .hd{/* z-index: 7; */position: absolute;}
.pt-page-main .logo{opacity:0}
.pt-page-list .hd{z-index: 0;}
.hd.open-about .logo{opacity:1}



/*--------------------------------------------------------- bbs ---------------------------*/
/* 갤러리 목록 */



/*--------------------------------------------------------------------- 반응형 --------------------------*/
@media screen and (max-width: 1280px) {

}





@media screen and (max-width: 768px) {

    /*--------------------------------------------------------- MAIN ---------------------------*/
    .main-visual__pc{display:none}
    .main-visual__mo{display:block}

    /* 갤러리 목록 */

    /* 게시판 읽기 */
    #bo_v {}

    .hd.isDetail {
        height: 49px;
    }

    .hd.isDetail #hd_wrapper {
        display: none;
    }

    /*쓰기*/
    #bo_w {
        margin-top: 300px;
    }
    .bo_w_text__wrap {flex-direction: column;padding: 0 14px;}
    .bo_w_text {width: 100%;padding-left: 28px;}
    .bo_w_text:not(:first-child){
        margin-left: 0;
        margin-top: 40px;
    }
    .bo_w_num {
        width: 14px;
        height: 14px;
        top: 0;
    }
    .bo_w_num:after {
        font-size: 5px;
    }

    .bo_w_text-li label {
        height: 25px;
        width: 84px;
        font-size: 7px;
    }
    .bo_w_text-li input {
        height: 25px;
        width: calc(100% - 84px);
        font-size: 12px;
    }

    .bo_w_text-li textarea{
        width: calc(100% - 84px);
        font-size: 8px;
    }
    .bo_w_text-li.li-rowspan-4 {
        height: 99px;
    }
    .bo_w_text-li.li-rowspan-4 textarea{
        height: 99px;
    }
    .bo_w_text button{
        height: 100px;
        font-size: 11px;
    }
    .bo_w_text-info {
        margin-top: 56px;
        font-size: 12px;
    }

}


/*--------------------------------------------------------------------- sub-page --------------------------*/
/* common */
#container {padding: 130px 0 160px;}
#container .hd-loca {font-size: 18px; font-weight: 500; color: #424242; margin-bottom: 15px; display: flex; align-items: center;}
#container .hd-loca.page-arrow::after {content: ''; background-image: url("../../../assets/images/user/page-arrow.svg"); background-repeat: no-repeat; background-size: cover; display: inline-block; width: 14px; height: 9px; margin-left: 8px;}
#container_title {font-size:50px; font-weight: 700; font-family: 'Pretendard', sans-serif;}
#container_title span {margin:0 auto 10px;display:block;line-height:30px;}

#hd {}
#hd.none {background-color: unset;}

/*sub-menu*/
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}
.sub-menu {position: fixed; top: 0; left: 0; background-color: #191919; width: 100%; height: calc((var(--vh, 1vh) * 100)); z-index: 8; padding: 50px; color: #fff; display: none; animation: fadeOut .3s ease; opacity: 0;}
.sub-menu h2 {font-size: 70px; font-weight: 900;}
.sub-menu > ul {margin-top: 50px; overflow: auto; max-height: calc((var(--vh, 1vh) * 100) - 300px); width: 100%; scrollbar-width: auto;}
.sub-menu > ul::-webkit-scrollbar{width:5px; height:5px; background-color: rgba(0,0,0,0.9); border-radius: 3px;}
.sub-menu > ul::-webkit-scrollbar-thumb{background: #E9F7F6; border-radius: 5px;}
.sub-menu > ul > li {}
.sub-menu > ul > li:not(:last-child) {margin-bottom: 30px;}
.sub-menu > ul > li .li-tit {font-size: 40px; font-weight: 900; color: #fff; display: flex; align-items: center;}
.sub-menu > ul > li .li-tit .menu-li-btn {position: relative; margin-left: 15px;}
.sub-menu > ul > li .li-tit .menu-li-btn::before, .sub-menu > ul > li .li-tit .menu-li-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    display: inline-block;
    width: 21px;
    height: 4px;
    transition: transform 500ms ease;
}
.sub-menu > ul > li .li-tit .menu-li-btn::before {transform: rotate(90deg)}
.sub-menu > ul > li .li-tit .menu-li-btn::after {transform-origin: center;}
.sub-menu > ul > li .li-tit.on .menu-li-btn::before {transform: rotate(180deg);}
.sub-menu .menu-list {margin-top: 30px; display: none;}
.sub-menu .menu-list > ul {}
.sub-menu .menu-list > ul > li {}
.sub-menu .menu-list > ul > li:not(:last-child) {margin-bottom: 24px;}
.sub-menu .menu-list > ul > li a {font-size: 24px; color: #fff;}


/*sub-menu-btn*/
.sub-menu-btn {width: 40px;height: 40px;position: relative;border-radius: 10px;z-index: 9;padding: 0;display: none;}
.sub-menu-btn span{display: block;width: 26px;height: 3px;background: #000;position: absolute;top: 50%;left: 50%;transform: translateX(-50%);transition: all 0.5s;}
.sub-menu-btn span:before,
.sub-menu-btn span:after{content:'';display: block;height: 100%;width: 100%;background: #000;position: absolute;top: -10px;transform: rotate(0deg);transition: all 0.5s;}
.sub-menu-btn span:after{top: 10px;}
.sub-menu-btn.active span { background: transparent; } 
.sub-menu-btn.active span:before { transform: rotate(135deg); top: 0; background: #fff;}
.sub-menu-btn.active span:after { transform: rotate(-135deg); top: 0; background: #fff;}

.topMenu-bg {position: absolute; top: 70px; width: 100%; background-color: #fff; display: none;}
.topMenu-bg p {height: 190px; border-bottom: 1px solid #E6E6E6;}
.topMenu-bg.active {display: block;}

/*sub-page head*/
#container .sub-hd {background-repeat: no-repeat; background-size: cover; width: 100%; height: 370px; display: flex; align-items: end; margin: 24px 0 90px;}
#container .sub-hd.about {background-image: url("../../../assets/images/user/about-bg.png");}
#container .sub-hd.community {background-image: url("../../../assets/images/user/notice-bg.png");}
#container .sub-hd.archive {background-image: url("../../../assets/images/user/archive-bg.png"); background-position: center;}
#container .sub-hd.archive .inner {display: flex; align-items: end;}
#container .sub-hd.archive .sub-hd-txt {font-size: 150px; font-family: 'Pretendard', sans-serif; font-weight: 900; color: rgba(255,255,255,0.5); line-height: 0.7;}
#container .sub-hd.archive .sub-page-info p {font-size: 18px; margin-top: 20px; line-height: 1.5;}

#container .sub-hd.program {background-image: url("../../../assets/images/user/program-bg.png"); background-position: center;}
#container .sub-hd.program.detail {background-image: url("../../../assets/images/user/program-detail-bg.png");}
#container .sub-hd.program .inner {display: flex; align-items: end;}
#container .sub-hd.program .sub-hd-txt {font-size: 140px; font-family: 'Pretendard', sans-serif; font-weight: 900; color: rgba(255,255,255,0.5); line-height: 0.7;}
#container .sub-hd.program .sub-page-info p {font-size: 18px; margin-top: 20px; line-height: 1.5;}

#container .sub-page-info {background-color: #fff; width: 100%; max-width: 465px; padding: 40px 50px; color: #292929; transform: translateY(-0.2px); flex: none;}
#container .sub-page-info h2 {font-size: 32px; font-weight: 700; font-family: 'Pretendard', sans-serif;}
#container .sub-page-info p {font-size: 22px; margin-top: 10px;}
#container .sub-page-info.community h2 {font-weight: 900; font-family: 'SUIT', sans-serif;}

/*--------------------------------------------------------------------- 반응형 --------------------------*/
@media screen and (max-width: 1280px) {
    /*sub-menu*/
    .sub-menu.on {display: block; animation: fadeIn .3s ease; opacity: 1;}
    .sub-menu h2 {font-size: 50px;}
    .sub-menu > ul > li .li-tit {font-size: 34px;}
    .sub-menu > ul > li .li-tit .menu-li-btn::before {transform: rotate(90deg) translateX(-2px);}
    .sub-menu > ul > li .li-tit .menu-li-btn::after {transform: translateY(-2px);}
    .sub-menu > ul > li .li-tit.on .menu-li-btn::before {transform: rotate(180deg) translateY(2px);}
    
    /*sub-menu-btn*/
    .sub-menu-btn {display: block;}

    /*common*/
    #container {padding: 110px 0 140px;}
    #container .hd-loca {font-size: 18px; margin-bottom: 10px;}
    #container .hd-loca.page-arrow::after {width: 12px; height: 8px; margin-left: 6px;}
    #container_title {font-size: 32px;}
    #container .sub-hd {height: 300px; margin-top: 40px;}
    #container .sub-page-info {padding: 23px 33px;}
    #container .sub-page-info h2 {font-size: 28px;}
    #container .sub-page-info p {margin-top: 6px;}

    /*archive*/
    #container .sub-hd.archive .sub-hd-txt {font-size: 100px;}
    #container .sub-hd.archive .sub-page-info p {font-size: 16px;}

    /*program*/
    #container .sub-hd.program .sub-hd-txt {font-size: 90px;}
}

@media screen and (max-width: 1000px) {
    /*archive & program*/
    #container .sub-hd.archive .sub-hd-txt, #container .sub-hd.program .sub-hd-txt {display: none;}
    #container .sub-hd.archive .sub-page-info p, #container .sub-hd.program .sub-page-info p {font-size: 16px; margin-top: 14px;}

}

@media screen and (max-width: 768px) {
    #container {padding: 100px 0;}
    #container .hd-loca {font-size: 14px;}
    #container .hd-loca.page-arrow::after {width: 10px; height: 6.6px; margin-left: 4px;}
    #container_title {font-size: 26px;}
    #container .sub-hd {margin-top: 30px; margin-bottom: 50px; height: 180px;}
    #container .sub-page-info {padding: 25px 20px 21px; max-width: 280px;}
    #container .sub-page-info h2 {font-size: 24px;}
    #container .sub-page-info p {font-size: 18px;}

    /*sub-menu-btn*/
    .sub-menu {padding: 30px 20px 40px;}
    .sub-menu-btn-wrap {top: 30px; right: 30px;}
    .sub-menu-btn {width: 30px; height: 30px;}
    .sub-menu h2 {font-size: 30px; padding-top: 35px;}
    .sub-menu > ul {max-height: calc((var(--vh, 1vh) * 100) - 240px)}
    .sub-menu > ul {margin-top: 26px;}
    .sub-menu > ul > li:not(:last-child) {margin-bottom: 23px;}
    .sub-menu > ul > li .li-tit {font-size: 20px;}
    .sub-menu > ul > li .li-tit .menu-li-btn::before, .sub-menu > ul > li .li-tit .menu-li-btn::after {width: 18px;}
    .sub-menu .menu-list {margin-top: 13px;}
    .sub-menu .menu-list > ul > li a {font-size: 16px;}
    .sub-menu .menu-list > ul > li:not(:last-child) {margin-bottom: 13px;}

    /*archive & program*/
    #container .sub-hd.archive .sub-page-info h2, #container .sub-hd.program .sub-page-info h2 {font-size: 20px;}
    #container .sub-hd.archive .sub-page-info p, #container .sub-hd.program .sub-page-info p {font-size: 12px; margin-top: 10px;}
    #container .sub-hd.program {height: 300px;}
    #container .sub-hd.program.detail {height: 180px;}
}