
/* MEDIA QUERY */

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

  .egg_subContainer{
    padding: 0 1.6rem 0;
  }

}

/* 
*
*

************************

Min 756px - Max 1046px

************************
*
*
*/
@media screen and (max-width: 62.5em) {

html{
    font-size: 50%;
    /* size of 16px / 50% = 8px */
}
    .gnb .submenu { display: none; }
    .gnb .has-sub:hover > .submenu {
        display: block;
    }
    .gnb > ul {gap: 6rem;}
    .egg_subContainer{padding: 0 2.4rem 0;}
    .timerCont{padding: 2.4rem 2.4rem 2.4rem}
    .timerCont__tit{font-size: 2.4rem;}
    .bnsWrap{
        padding: 2.4rem 2.4rem 2.4rem;
        margin: 4rem auto 0;;
    }
    .bnscontWrap{gap: 3.2rem;}
    .file-ment{font-size: 1.7rem}
    .ifp_submitbtn__btn{
        font-size: 2.4rem;
        padding: 3.2rem 4rem;
    }
    .sb_objtitle span{
        font-size: 4rem;
    }



/*
*
sub contents
*
*/

.brvContWrap, .brvContwarp {
    padding: 0 3.2rem 0;
}
.brvtop-visualWrap{height: 58rem;}
.brvtop-descrpt{gap: 1.6rem; margin-top: 4rem}
.brvtop-title{text-align: center;}
.brvtop-title dt{font-size: 4.2rem;}
.brvtop-title dd{font-size: 3.2rem; margin-top: 0.4rem; line-height: 128%;}
.descrpt-sbj__txt{padding: 1.6rem 1.2rem;}
h4.brvCont-sint{padding: 0 3.2rem; font-size: 2rem;}
.descrpt-sbj__txt br, h4.brvCont-sint br{display: none;}
h4.brvCont-sint.rsut br{display: block !important;}
.slg-item__list {
    font-size: 1.5rem;
    text-align: center;
}
.slg-item{gap: 0.8rem}
.brvbtnWrap a.brvbtn{margin-top: 2rem;}


/* 
2026-03 비바브라보클럽 추가 css
*/
.box-textcontent-txt{line-height: 150%;}
.box-textcontent-txt br{display: none;}
.mth-program-desc{text-align: center;}

/* Footer  */
.footerarea{
    padding: 3% 3.2rem 3%;
    font-size: 1.6rem;
}
.footercont {
    flex-direction: column;
    gap: 2rem;
}
.f_logo img {height: 12rem;}
.f_info li {font-size: 1.7rem; text-align: center; margin-bottom: 1.2rem;}


}





/* 
*
*

************************

Min 321px - Max 755px 

************************
*
*
*/
@media screen and (max-width: 47.2em) {

html{
    font-size: 40%; 
    /* size of 16px / 40% = 6.4px */
}
.logotype img{height: 5.4rem;}
.topWrap {justify-content: space-between;}
    .snsWrap {
        display: none; /* 모바일에선 SNS 아이콘 숨김 (선택 사항) */
    }
    .gnb-buttonWrap{
        position: absolute;
        right: 2rem;
        top: 2.9rem;
    }
    .gnb-button {display: block; /* 햄버거 버튼 표시 */}
    /* 모바일 GNB */
    .gnbContainer {
        position: fixed;
        top: 0;
        right: -35rem; /* 처음에는 화면 오른쪽에 숨김 */
        width: 35rem;
        height: 100%;
        background-color: #fff;
        padding-top: 8.4rem; /* 헤더 높이만큼 여백 */
        overflow-y: auto;
        transition: right 0.3s ease-in-out;
        z-index: 1000;
    }
    .gnbContainer.gnb--active {
        right: 0; /* 활성화 시 오른쪽에서 나타남 */
    }
    .gnb-wrap {
        display: block;
        padding: 0;
    }
    .gnb > ul {
        flex-direction: column; /* 메뉴를 세로로 배열 */
        gap: 0;
    }
    .gnb .m_menu {
        border-bottom: 1px solid #eee;
        padding: 2.4rem 2.4rem 1.2rem;
        font-size: 2.4rem;
    }
    .gnb .m_menu.first{
        border-top: 1px solid #eee;
    }
    .gnb .has-sub > a::after { /* 화살표 아이콘 추가 */
        content: '▼';
        float: right;
        font-size: 11px;
        transition: transform 0.3s;
        line-height: 4rem;
    }
    .gnb .has-sub.is-active > a::after { /* 서브메뉴 열리면 화살표 회전 */
        transform: rotate(180deg);
        line-height: 2rem;
    }
    /* 모바일 서브메뉴 */
    .gnb .submenu {
        display: none; /* 평소에는 서브메뉴 숨김 */
        position: static; /* position 해제 */
        width: 100%;
        border: none;
        background-color: #f9f9f9;
        flex-direction: column;
        box-shadow: none;
    }
    .gnb .has-sub:hover .submenu {
        display: none; /* 모바일에서는 hover 효과 제거 */
    }
    .gnb .submenu li a {
        padding: 2.4rem 2.4rem 2.4rem 3.6rem; /* 들여쓰기 */
        font-size: 2.2rem;
    }
    .gnb-mobile-logo{
        display: block;
        position: absolute;
        top: -6px;
        left: 0;
    }
    .gnb-mobile-logo img{height: 5.8rem;}
    .gnb .submenu {
        display: none;   /* hover 무효 */
    }
    .gnb .has-sub.is-active > .submenu {
        display: block;  /* 클릭(toggle) 시만 노출 */
    }
        .gnb .has-sub.is-active .submenu li{
        border-bottom: 1px solid #eee;
    }
    .gnb .has-sub.is-active .submenu li:last-child{
        border-bottom: none;
    }
    
    .bnsWrap{margin-top: 3.2rem;}
    .bnscontWrap {justify-content: space-evenly;}
    a.bnscontLink{width: 45%;}
    .bnscontlist li {
        font-size: 3.2rem;
        padding-left: 3.2rem;
        line-height: 125%;
    }        
    .bnscontlist li.arrowico {margin-top: 2rem;}
    .bnscontlist li.arrowico svg{width: 28%;}
    .bnscontlist{
        padding: 2.8rem 0 2.8rem;
        background-size: 10rem 10rem;
    }
    .prgsWrap{margin-top: 4rem;}
    .prgslist img{height: 2rem;}


/* Login & Join */
.Logincontainer {width: 100%;}
.v_logo img {height: 16rem;}
.snslog-cont__tit,
.idlogin-cont__tit{
    font-size: 2.4rem;
    margin-bottom: 2.8rem;
}
.idlogin-cont__form input,
.form-st input, .form-group input,
.form-group_srgh input{
    padding: 2rem 2rem;
    font-size: 2rem;
}
a.snslog-cont__join{font-size: 2rem;}
.chk__box{font-size: 1.85rem;}
.errmsg{margin: 2.4rem 0; font-size: 2rem;}
.joinmember{font-size: 2rem;}
.joinarrow {vertical-align: sub; width: 80%;}

.jointitWrap h4.tit{font-size: 2.4rem;}
.jointitWrap .stit, .joinform-text{font-size: 1.85rem;}
.join_schtab a{font-size: 2rem;}
.btn-ent, .button-gry{
    padding: 2rem 3.2rem ;
    font-size: 2rem;
}
.rsy_text .mtxt{font-size:2rem}
.rsy_text .stxt{font-size: 1.85rem;}
.form-group_srgh span{margin-bottom: 1.8rem;}
.jointitWrap.compl .mtxt{margin-top: 6.4rem;}
.jointitWrap.compl .stxt{font-size: 1.85rem;}
.jointitWrap.compl{font-size: 1.85rem; margin: 3.2rem 0 3.2rem;}
.jointitWrap.compl .mtxt.ant{font-size: 4rem;}


/* my page  */
.mpcontainer{display: block; margin: 3.2rem auto 0;padding: 0 2.8rem 0;}
.Mymnge-cont__sect1{margin-left:0; max-width: 100%;}
a.tmenu-item__list{font-size: 1.6rem;}
.Mymnge-cont{margin-left: 0; margin-top: 3.2rem;}
.button-dft{
    font-size: 1.85rem;
    padding: 2rem 0;
}
.button-dft.hff{width: 36%;}
.mp-tableformcont{max-width: 100%; margin: 1.6rem 0 3.2rem;}
.mp-tableformcont_tr th,
.mp-tableformcont_tr td,
.altmsg, a.txtlink, .ment{
    font-size: 1.75rem;
}
.mp-tableformcont_tr input,
.radio__circle{
    font-size: 1.8rem;
}
.radio-sel .txt{margin: 1.2rem 0;}
.sect_title{font-size: 2rem;}
/* aside menu */
.asd-container {
    width: 100%;
    text-align: center;
}
.sub-aside h4{font-size: 2.8rem; font-weight: 700;}
.sub-aside__list{
    display: flex;
    gap: 4rem;
    justify-content: center;        
    margin-top: 1.6rem;
    background: #f9f9f9;
    border-radius: 0.4rem;
    padding: 1.6rem 0;
}
.sub-aside {
    max-width: 100%;
    padding: 0;
    border-radius: 0;
    background: transparent;
}
.sub-aside__ltem {margin-bottom: 0;}
.sub-aside__ltem a.on {font-size: 2rem;}
.sub-aside__ltem a {font-size: 1.85rem;}
.sub-aside__content {
    display: none;
    padding: 10px 0 20px;
    background: #e9f0e9;
}
.sub-aside__ltem.active > .sub-aside__content {
    display: block;
}

.modal-content{padding: 3.2rem;}
.agrchck_content__tit, p.sbjtit{font-size: 2rem;}
.agrchck_content p, .wnd-compl > span{font-size: 1.75rem;}

.rbox_tit{font-size: 1.85rem; padding: 1rem 1.2rem;}
.ntlist-subtxt{font-size: 1.75rem; margin-top: 1.2rem;}
ol.ntlist li {
    font-size: 1.85rem;
    margin-bottom: 0.8rem;
    line-height: 130%;
}
.ntlist-subtxt br{display: none;}
.txtbr br{display: block;}
.mp-ifpformtableWrap{margin-top: 2.8rem}
.tnt_contWrap {
    padding-top: 1.8rem;
    margin-top: 1.8rem;
}
.maintit{font-size: 1.85rem;}
.cplist_menu__item {
    font-size: 1.75rem;
    padding: 1.6rem 2.4rem;
}
.cou_ent{font-size: 1.75rem;}

 .mp-tableformcont_col thead {
    display: none;
  }
  .mp-tableformcont_col,
  .mp-tableformcont_col tbody,
  .mp-tableformcont_col tr,
  .mp-tableformcont_col td {
    display: block;
    width: 100%;
  }
  .mp-tableformcont_col tr {
    border-bottom: 3px solid #555;
  }
  .mp-tableformcont_col td {
    position: relative;
    padding-left: 12rem;
  }
  .mp-tableformcont_col td::before {
    content: attr(data-label) " : ";
    position: absolute;
    left: 1rem;
    white-space: nowrap;
    color: #888;
    font-size: 1.75rem;
    font-weight: 600;
  }
  .coup_tit_infotxt span {
    display: block;
    font-size: 1.75rem;
    color: #888;
  }
.mp-tableformcont_trcol td{
    text-align: left;
    font-size: 1.75rem;
}
.mp-tableformcont_trcol td,
.mp-tableformcont_col tbody tr:last-child td{
    border-bottom: none;
    border-right: none;
}
.chktextcont_tit{font-size: 1.85rem !important; color: #333; margin-bottom: 1.2rem;}
.chktextcont dt, .chktextcont dd{font-size: 1.7rem;}
.chktextcont_txt span::before{
    top: 50%; 
}
.coupon-num-form input{font-size: 1.75rem}
.mypop_content__tit{font-size: 2.2rem;}
.btn-coupon, .imp_txt.cou{font-size: 1.6rem;}

/*
*
marin contents
*
*/

/* Top Main Visual*/
section.contvisual_wrap{height: auto;}
div.cultvisual_contents{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 0;
    padding: 3.2rem;
}
div.cultvisual_contents::before{
    display: none;
}
.cct-titWrap{margin-top: 0;}
.cct-tit br{display: none;}
.cct-tit {
    font-size: 4.2rem;
    line-height: 120%;
}
.cct-tit2{margin-top: 1.6rem;}
.cct-txt, .cct-txtWrap{margin-top: 1.2rem;}
.cct-txt2{margin-top: 1.2rem; line-height: 140%;}
.cct-txt, .cct-tit2{font-size: 2.4rem;}
.brvContwarp { margin: 3.2rem auto 0;}
h4.brvCont-int {font-size: 2.2rem;}
.brv-intro{
    height: 15rem;
    padding: 3.2rem 0 0 2.4rem;
    background-position: -60% center;
}
.int__tit{font-size: 2rem}
.brv-arwlink{margin-top: 1.6rem;}
.brv-arwlink img{height: 1.6rem;}
.brvContwarp{padding: 0 2.4rem;}



/*
*
sub contents
*
*/

/* Form */
input[type="text"], 
input[type="email"],
input[type="tel"],
input[type="password"]
select,
textarea {
    padding: 1.2rem 1.2rem;

}


.sub-container{
margin: 32px auto 0;
max-width: 112rem;
}    
.button_grn,
.button_org,
.button_blu{
    font-size: 2.2rem;
}
.button_grn svg,
.button_org svg,
.button_blu svg{
    width: 3.2rem;
}    
section.sub_topvisual_wrap,
section.sub_topvisual_wrap.visual2,
section.sub_topvisual_wrap.visual3{
    background-position: top;
    background-size: cover;
    height: 24rem;
}
.sb_objtitle span{font-size: 2.8rem; padding-bottom: 0.8rem;}
dl.category_title dd{font-size: 1.8rem;}
dl.category_title dt{font-size: 3.6rem;}

.viva_subContainer.scrtpform,
.noticeboard{
    padding: 0 3.2rem;
    margin: 3.2rem auto 3.2rem;
}
.iftextWrap{padding: 2.6rem 3.2rem 2.6rem;}
.iftext__tit {font-size: 2.4rem;}
.iftext__txt {
    line-height: 140%;
    font-size: 1.8rem;
    margin-top: 1.2rem;
}
.iftext__txt br{display: block;}
.scrpt-cont{padding: 0 2.4rem 0;}
.scrpt-cont-txt dt, .scrpt-cont-txt dd{font-size: 1.75rem;}
.scrpt-cont-txt dt::before{width: 0.6rem; height: 0.6rem;} 

.year_pr, .sss_text{font-size: 1.75rem}
h4.tb_title{font-size: 2.2rem;}
.tableformcont_tr th, .tableformcont_tr td {
    padding: 1.2rem 1.6rem;
    font-size: 1.7rem;
    line-height: 140%;
}
.ifp-tableformcont{margin-top: 1.6rem;}
.address-group.wdh_hf {width: 100%;}
.address-group .btn-find{font-size: 1.7rem;}
.address-group input {font-size: 1.7rem;}
.ifp_submitbtn {margin-top: 2.4rem;}
.ifp_submitbtn__btn {
    width: 18rem;
    font-size: 1.9rem;
    padding: 2.4rem 3.2rem;
}
.agrchck-detail, .agrchck-detail__text{font-size: 1.75rem; margin-top: 1.4rem;}
.brvbtnWrap a.brvbtn{font-size: 1.9rem;}
.notice-board th, .notice-board td{font-size: 1.75rem;}
.view-body__cont p {font-size: 1.8rem !important;}
.rowbox span.noti{font-size: 1.6rem;}
.pagination {margin: 4.8rem auto 4.8rem;}
.listico__btn {
    font-size: 1.7rem;
    padding: 1.2rem 2.4rem;
}


/* 
2026-03 비바브라보클럽 추가 css
*/
:root {
    --mfont: normal 4.8rem var(--main-font);
    --sfont: normal 3.2rem var(--main-font);

}
.vvclub-contvisual_wrap{height: 30rem;}
.vvclubtop-descrpt{padding: 0 3.2rem;}
.vvc-descrpt-sbj__txt{
    font-size: 1.8rem;
    line-height: 150%;
    padding: 2.4rem 2.6rem;
}
span.smtit{max-width: 4rem;}
span.smtxt {padding-left: 1.4rem;}
section.vvclubContents {
    margin: 4rem auto 0;
}
.vvclubContents-box {
    gap: 2rem;
    padding: 0 2.4rem;
    flex-direction: column;
    padding: 0 4rem;
}
.box-textcontent{padding: 2.4rem 4rem; max-width: 100%;}
.box-textcontent-txt {
    font-size: 1.85rem;
    line-height: 150%;
    padding: 0 4rem;
}
.mth-program {
    margin-top: 2.4rem;
    padding: 0 4.8rem;
}
.mth-programWrap{margin-top: 4rem;}
.mth-program-box{max-width: 100%;}
.box_tit{font-size: 2.2rem; margin-bottom: 0.6rem;}
.mth-program-box dd {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 140%;
}
.mth_tit{font-size: 1.8rem; font-weight: 700;}
.mth-program-desc{font-size: 1.8rem;}

.vvclub-infoWrap{
    padding-top: 3.2rem;
    margin: 3.2rem 4rem 0;
}
a.vvclubvbtn{max-width: 100%;}
.vv-contents-grp-stxt{padding: 0 4.8rem; font-size: 1.8rem;}
.custmWrap{
    margin-top: 3.2rem;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 1.8rem;
}
.custmWrap-tit{font-size: 2rem; font-weight: 700;}


/* Footer  */
.footercont {
    flex-direction: column;
    gap: 2rem;
}
.footerarea{
    padding: 8% 4.8rem 4%;
}
.policyWrap{
    text-align: center;
}
.plcy_content p{font-size: 1.6rem;}
.f_info li span{
    text-align: center;
    line-height: 150%;
}
.f_logo img{
    height: 8rem;
}
.modal-content{
    padding: 3.6rem;
}
.popup-box {
    width: 58vw;
}
.popup-img {
    max-width: 92vw;
    max-height: 50vh;
}
.close-btn{
    font-size: 5rem;
    top: -0.6rem;
    right: 0.6rem;
}

}


/* 
*
*

************************

min 0 ~ max 320px 

************************
*
*
*/


@media screen and (max-width: 20em) {


}

/* 사전등록 페이지 결제 방법 선택 스타일 */
@media (max-width: 768px) {
    .payment_method_options {
        flex-direction: column;
        gap: 10px;
    }
    
    .payment_option {
        flex-direction: row;
        padding: 15px;
        text-align: left;
    }
    
    .payment_icon {
        margin-right: 15px;
        margin-bottom: 0;
        font-size: 20px;
    }
}


/* 사전등록신청 설문조사 응답 테이블 반응형 대응 */
@media (max-width: 768px) {
    .earlyformtableWrap table th,
    .earlyformtableWrap table td {
        padding: 12px 15px;
        font-size: 14px;
    }
    .earlyformtableWrap table th {
        width: 35%;
        min-width: 150px;
    }
    .confirm_answer_group {
        gap: 6px;
    }
    .confirm_answer_item {
        flex-direction: column;
        gap: 4px;
    }
.confirm_label {
min-width: auto;
}

}
