/* ============================================================
   ADD-ON 26   (게시판 상단 공용 배너 : REAL ES. + 서브 + 이미지)
   ------------------------------------------------------------
   공용 사용 예 (이미지 있는 배너) :
   <div class="bbs_top">
     <div class="bbs_top_img"><img src=".../bbs_bna.jpg" alt=""></div>
     <div class="bbs_top_in">
       <h2 class="bbs_top_ttl">REAL ES.</h2>
       <strong class="bbs_top_sub">BEFORE&amp;AFTER</strong>
     </div>
   </div>
   · 이미지 없는 배너는 .bbs_top_img 를 빼고 .bbs_top 에 .no_img 를 주면 됩니다.
   · 배너 높이는 --bbs-h 로 조절 (기본 1392u).
   · REAL ES. / 서브문구는 손글씨(브러시) 웹폰트 자리입니다.
     .bbs_top_ttl / .bbs_top_sub 의 font-family 에 사이트 브러시 폰트를 지정하세요.
   ============================================================ */

.bbs_top{--bbs-h:calc(1392 * var(--u));position:relative;min-height:var(--bbs-h);background:var(--point);overflow:hidden;}
.bbs_top.no_img{--bbs-h:auto;}

/* 우측 하단 이미지 */
.bbs_top_img{position:absolute;right:0;bottom:0;width:52%;max-width:989px;z-index:0;}
.bbs_top_img img{display:block;width:100%;}

/* 텍스트 */
.bbs_top_in{position:relative;z-index:1;padding:calc(250 * var(--u)) 0 calc(300 * var(--u)) calc(46 * var(--u));text-shadow:0 0 20px rgba(0,0,0,0.1);}
.bbs_top.no_img .bbs_top_in{padding-bottom:calc(120 * var(--u));}
.bbs_top_ttl{margin:0;font-family:'Montserrat','Apple SD Gothic Neo',sans-serif;font-size:max(60px, calc(154 * var(--u)));font-weight:800;line-height:1;letter-spacing:0.01em;color:#f4f4f4;}
.bbs_top_sub{display:block;margin-top:calc(18 * var(--u));font-family:'Montserrat','Apple SD Gothic Neo',sans-serif;font-size:max(46px, calc(120 * var(--u)));font-weight:800;line-height:1;letter-spacing:0.01em;color:#f4f4f4;}

/* ---------- responsive ---------- */
@media (max-width:1280px){
.bbs_top{--bbs-h:72vw;}
.bbs_top_in{padding:60px 0 0 30px;}
}
@media (max-width:768px){
.bbs_top{--bbs-h:auto;}
.bbs_top_in{padding:50px 20px 74vw 20px;}
.bbs_top_img{width:88%;max-width:none;}
.bbs_top_ttl{font-size:52px;}
.bbs_top_sub{font-size:40px;}
.bbs_top.no_img .bbs_top_in{padding-bottom:50px;}
.sub_select{margin-top:25px;}
}
@media (max-width:480px){
.bbs_top_in{padding-bottom:88vw;}
.bbs_top_ttl{font-size:42px;}
.bbs_top_sub{font-size:32px;}
}