/* 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;}


/* 히든 슬라이더 */
.sh-side-options {position:fixed; top:0; bottom:0; right:0; z-index:9999999999; padding:0 0; width:350px; transform:translateX(350px); transition:all 600ms cubic-bezier(0.86, 0, 0.07, 1); letter-spacing:-0.5px; background-color:#fff;}

.sh-side-options.open {transform:translateX(0px); box-shadow:0 0px 39px 10px rgba(0, 0, 0, 0.2); transition:all 600ms cubic-bezier(0.86, 0, 0.07, 1);}

.sh-side-demos-container {top:0; left:0; right:-17px; bottom:0; position:absolute; overflow-y:scroll; background-color:#fff; background-repeat:no-repeat; background-position:right top; padding:22px; padding-bottom:35px;}

.close-r {width:48px; height:48px; display:-webkit-flex; display:flex; justify-content:center; align-items:center; position:absolute; top:0; right:26px; cursor:pointer; z-index:999;}

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

.sh-side-demos-loop-container a {color:var(--darkgray);}

.sh-side-demos-loop-container>ul {display:flex; justify-content:start; align-items:center; width:100%;}
.sh-side-demos-loop-container>ul>li {display:flex; justify-content:start; align-items:center; width:100%;}
.sh-side-demos-loop-container #login, .sh-side-demos-loop-container #logout {border:1px solid var(--darkgray);}
.sh-side-demos-loop-container .btn {display:block; width:100%; max-width:300px; height:40px; line-height:40px; background:var(--highlight); border-radius:6px; text-align:center; color:#fff;}
.sh-side-demos-loop-container .member {font-weight:400; font-size:1rem; color:var(--primary); letter-spacing:-0.2px;}

.bgs {background-color:rgba(0,0,0,0.7); position:fixed; top:0px; left:0px; width:100%; height:100%; display:none; z-index:999;}
.cs-wrap {margin-top:40px;}
.cs-tel {display:block; box-sizing:border-box; padding-top:5px; padding-bottom:15px; cursor:pointer; border-bottom:1px solid #eee; color:var(--primary);}
.cs-tel::after {display:block; content:''; clear:both;}
.cs-tel li a {color:var(--darkgray);}
.cs-txt2 {text-align:left; padding-top:15px; padding-bottom:15px;}


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

#DB_navi42 .DB-1D {position:relative; width:100%; background:#fff; border-bottom:1px solid #eee; text-align:left;}
#DB_navi42 .DB-1D a,
#DB_navi42 .DB-1D button {font-size:16px; color:#000; height:50px; line-height:50px;}
#DB_navi42 .DB-1D a:hover,
#DB_navi42 .DB-1D button:hover {color:#23c3fe;}
#DB_navi42 .DB-1D.DB_select a,
#DB_navi42 .DB-1D.DB_select button {color:#23c3fe;}

#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;}





@media screen and (max-width:480px){
    .sh-side-options {width:80%; transform:translateX(100%);}
}