/* reset { */
.font-8 {font-size:8px;}
.font-9 {font-size:9px;}
.font-10 {font-size:10px;}
.font-11 {font-size:11px;}
.font-12 {font-size:12px;}
.font-14 {font-size:14px;}
.font-15 {font-size:15px;}
.font-16 {font-size:16px;}
.font-17 {font-size:17px;}
.font-18 {font-size:18px;}
.font-19 {font-size:19px;}
.font-20 {font-size:20px;}
.font-22 {font-size:22px;}
.font-24 {font-size:24px;}
.font-26 {font-size:26px;}
.font-28 {font-size:28px;}
.font-30 {font-size:30px;}
.font-36 {font-size:36px;}
.font-40 {font-size:40px;}
.font-45 {font-size:45px;}
.font-50 {font-size:50px;}

.font-b {font-weight: bold;}

.cb {clear:both;}
.fl {float:left;}
.fr {float:right;}
.dn {display:none;}

.color-fff {color:#fff !important;}
.color-ddd {color:#ddd !important;}
.color-eee {color:#eee !important;}
.color-000 {color:#000 !important;}
.color-999 {color:#999 !important;}
.color-888 {color:#888 !important;}
.color-777 {color:#777 !important;}
.color-666 {color:#666 !important;}
.color-555 {color:#555 !important;}
.color-444 {color:#444 !important;}
.color-333 {color:#333 !important;}
.color-222 {color:#222 !important;}
.color-111 {color:#111 !important;}
/* } */

/* 기존: width: 350px/420px; transform: translateX(350px/420px) */
.sh-side-options{
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(92vw, 420px);        /* 화면 기준 폭 */
  transform: translateX(100%);    /* px 대신 100%로 */
  transition: transform 600ms cubic-bezier(0.86,0,0.07,1);
  z-index: 999999;                /* 충분히 높게 (너무 과도하게는 X) */
  background:#fff;
}
.sh-side-options.open{
  transform: translateX(0);
  box-shadow: 0 0 39px 10px rgba(0,0,0,.2);
}

/* 기존: right:-17px; → 가로 튐 유발 */
.sh-side-demos-container{
  position: absolute;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0; */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable; /* 크롬/삼성에서 스크롤 폭 변화 최소화 */
  background:#fff;
  padding: 22px 22px 35px;
}

/* 레이아웃 안전망 */
html, body { max-width: 100%; overflow-x: hidden; }

/* 패널 열렸을 때 바디 스크롤 잠금 */
body.nav-open { overflow: hidden; }

.close_r {
    position: absolute;
    top: 30px;
    right: 40px;
    cursor: pointer;
    z-index: 99;
}

.sh-side-demos-loop-container {position: relative; margin: 0 -10px;margin-top: 10px;}
.sh-side-options-container {bottom: 30px;left: -95px;margin-right: 15px;}

.bgs, .offcanvas-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  display: none;
  z-index: 9999;
}
.bgs.show, .offcanvas-scrim.is-open { display: block; }


.bgs {background-color: rgba(0,0,0,0.7); position: fixed; top:0px; left:0px; width: 100%; height:100%; display: none; z-index: 1001;}
.cs_div {margin-top:40px;}
.cs_tel_ul1_m {box-sizing: border-box; padding-top: 5px; padding-bottom: 15px; cursor: pointer; border-bottom: 0.1px solid rgba(0,0,0,0.1);}
.cs_tel_ul1_m li {}
.cs_txt2 {text-align: left; padding-top: 15px; padding-bottom: 15px;}
/* } */

/* 메뉴 { */
#DB_navi42{position:relative;width:100%; letter-spacing: -0.5px;}
#DB_navi42 a{text-decoration:none;display:block;}

#DB_navi42 .DB_1D{position:relative;width:100%;background:#fff;border:1px solid #eee;border-width:0 0px 1px 0;text-align:left}
#DB_navi42 .DB_1D a{font-size:16px;color:#000;height:50px;line-height:50px;}
#DB_navi42 .DB_1D a:hover{color:var(--color-main-hover);}
#DB_navi42 .DB_1D.DB_select a{color:var(--color-main)}

#DB_navi42 .DB_1D .DB_2D_wrap{display:none;text-align:left; padding-bottom: 20px;}
#DB_navi42 .DB_1D .DB_2D_wrap .DB_2D{position:relative;}
#DB_navi42 .DB_1D .DB_2D_wrap .DB_2D a{font-size:14px;color:#999;height:30px;line-height:30px;text-indent:0px;}
#DB_navi42 .DB_1D .DB_2D_wrap .DB_2D a:hover{color:#000}
#DB_navi42 .DB_1D .DB_2D_wrap .DB_2D.DB_select a{color:#000}

#DB_navi42 .DB_1D .DB_2D_wrap .DB_2D .DB_3D_wrap{display:none;position:relative;background:#f1f1f1;left:0px;top:0px;text-align:left;padding:15px 0px 15px 0px; border-bottom: 1px solid #eee;}
#DB_navi42 .DB_1D .DB_2D_wrap .DB_2D .DB_3D_wrap .DB_3D{}
#DB_navi42 .DB_1D .DB_2D_wrap .DB_2D .DB_3D_wrap .DB_3D a{font-size:13px;color:#666;background:#f1f1f1;height:30px;line-height:30px;text-indent:25px}
#DB_navi42 .DB_1D .DB_2D_wrap .DB_2D .DB_3D_wrap .DB_3D a:hover{color:#000;}
#DB_navi42 .DB_1D .DB_2D_wrap .DB_2D .DB_3D_wrap .DB_3D.DB_select a{color:#000;}
/* } */

body.nav-open { position: fixed; width: 100%; }
body.nav-open { overflow: hidden; }


/* 하단 고정 로그인/로그아웃 바 */
.side-authbar{
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: #fff;

  /* 컨테이너 패딩(22px)과 맞추기 */
  margin: 18px -22px 0;
  padding: 12px 22px 18px;
  display: flex;
  gap: 10px;
}

.side-authbar .auth-btn{
  flex: 1;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #e5e7eb;
}

.side-authbar .auth-primary{
  background: var(--color-main);
  color: #fff;
  border-color: var(--color-main);
}

.side-authbar .auth-secondary{
  background: #fff;
  color: #111;
}