<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";
@import url('https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&amp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&amp;family=Titillium+Web:ital,wght@0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&amp;display=swap');
@import url('../../../../nariya/css/unicons/css/unicons.css');

/*-------------------------------------------------------
■ ROOT는 MINT MODE CSS입니다.
-------------------------------------------------------*/
:root {
  /* THEME COLOR LIGHT CSS */
  --color-ui-bg-primary-30: #f3f4fe;
  --color-ui-bg-primary-50: #e0f2f1;
  --color-ui-bg-primary-100: #b2dfdb;
  --color-ui-bg-primary-200: #80cbc4;
  --color-ui-bg-primary-300: #4db6ac;
  --color-ui-bg-primary-400: #26a69a;
  --color-ui-bg-primary-500: #009688;
  --color-ui-bg-primary-600: #00897b;
  --color-ui-bg-primary-700: #00796b;
  --color-ui-bg-primary-800: #00695c;
  --color-ui-bg-primary-900: #004d40;
  --color-ui-bg-primary-mix-100: #a7ffeb;
  --color-ui-bg-primary-mix-200: #64ffda;
  --color-ui-bg-primary-mix-400: #1de9b6;
  --color-ui-bg-primary-mix-700: #00bfa5;

  /* THEME TXET COLOR LIGHT CSS */
  --color-ui-white-primary: #ffffff;
  --color-ui-text-primary: #3e3f5e;
  --color-ui-mo-text-primary: #ffffff;
  --color-ui-mo-sub-active-text-primary: #009688;/*500*/
  --color-ui-slick-text-primary: rgba(255,255,255,0.7);
  --color-ui-text-secondary-primary: #45437f;
  --color-ui-text-primary-1: #3e3f5e;
  --color-ui-text-secondary-primary-1: #2f80ed;
  --color-ui-text-primary-2: #3e3f5e;
  --color-ui-text-secondary-primary-2: #2f80ed;
  --color-ui-text-primary-3: #3e3f5e;
  --color-ui-text-secondary-primary-3: #2f80ed;
  --color-ui-text-primary-4: #ffffff;
  --color-ui-outlogin-text-primary: #bdf3f8;
  --color-ui-outlogin-text-secondary-primary: #2f80ed;
  --color-ui-outlogin-icon-primary: #bfd3f8;
  --color-ui-outlogin-icon-secondary-primary: #92b4f2;
  --color-widget-side-menu-title-text-primary: #3e3f5e;
  --color-widget-side-menu-title-text-primary-1: #e4ebf5;

  /* THEME BORDER LIGHT CSS */
  --color-ui-border-primary: #dae1e6;
  --color-ui-border-secondary-primary: #eee;
  --color-ui-border-primary-1: #dae1e6;
  --color-ui-search-border-primary: #ffffff;

  /* THEME SIDEBAR CSS */
  --color-ui-header-bg-primary: #009688;/*500*/
  --color-ui-sidebar-text-primary-1: #3e3f5e;
  --color-ui-sidebar-text-primary-2: #45437f;
  --color-ui-sidebar-text-primary-3: #ffffff;
  --color-ui-sidebar-text-primary-4: #3e3f5e;
  --color-ui-sidebar-bg-primary: #ffffff;
  --color-ui-sidebar-or-text-primary: #808389;
  --color-ui-sidebar-or-bg-primary: #ffffff;

  /* card clock css */
  --color-gradient-primary-1: -webkit-linear-gradient(to right, #009688, #26a69a);/*500,400*/
  --color-gradient-primary-2: linear-gradient(to right, #009688, #26a69a);/*500,400*/
  
  /* TOP SEARCH CSS */
  --color-search-border-primary: #00796b;/*700*/
  --color-search-from-bg-primary: linear-gradient(#009688,#00695c);/*500,800*/
  --color-search-gradient-primary-1: #26a69a;/*400*/
  --color-search-gradient-primary-2: #00796b;/*700*/
  --color-search-box-shadow: 0 2px 0 #004d40;/*900*/

  --color-white-primary: #ffffff;
  --color-bg-border-secondary-primary: #44aaef;
  --color-bg-button-primary: #3163A6;
  --color-search-button-primary: #3163A6;
  --color-btn-border-primary: #3286EE;
  --color-border-primary: #dae1e6;
  --color-hexagon-primary: #378fee;
  --color-noti-border-primary: #53c5f2;
  --mong-task-title-text-primary: #2d86ba;
  --mong-task-border-primary: rgba(162,179,207,.2);
  --mong-task-title-bg-primary: #ceecfd;
  --mong-task-more-icon-primary: #c4cad3;
  --mong-task-more-icon-hover-primary: #8f9194;
  --color-widget-title-bg-primary: #92b4f2;
  --color-widget-text-primary: #ffffff;
  --color-widget-text-hover-primary: #fafafa;
  --color-widget-top-title-bg-primary: #3e9eef;
  --color-widget-title-text-primary: #ffffff;
  --color-widget-title-secondary-text-hover-primary: #009688;
  --color-widget-quick-text-primary: #ffffff;
  --color-widget-quick-text-hover-primary: #fafafa;
  --color-widget-quick-before-primary: #000;
  --color-widget-box-primary: #ffffff;
  --color-widget-box-secondary-primary: #f7f9fd;
  --color-widget-box-shadow: rgba(208, 217, 255, 40%) 0px 10px 20px, rgba(175, 191, 255, 60%) 0px 6px 6px;
  --color-widget-tab-active-primary: #ffffff;
  --color-widget-tab-gradient-primary: linear-gradient(to right,rgba(0,0,0,0) 0,#009688 20%);
  --color-widget-tab-bg-primary: #009688;
  --color-auto-login-background-primary-1: #009688;
  --color-auto-login-background-primary-2: #ed213a;
  --color-auto-login-layer-primary:#e0e7f6;
  --color-active-primary: #f8b500;
  --color-active-secondary-primary: #ffcc33;
  --color-login-input-button-primary: #ffffff;
  --color-login-button-text-primary: #ebeff9;
  --color-login-button-primary: linear-gradient(to right, #26a69a 0%, #00897b 99%);/*400 600*/
  --color-login-menu-button-primary: linear-gradient(to bottom, #26a69a 0%, #00897b 100%);/*400 600*/
  --color-login-menu-hover-button-primary: linear-gradient(to bottom, #00897b 0%, #00695c 100%);/*600 800*/
  --color-login-button-box-shadow-1: 0 12px 12px -11px #00796b;/*700*/
  --color-login-button-box-shadow-2: 0 12px 20px -11px #00796b;/*700*/
  --color-button-bg-primary-1: #367bc3;
  --color-button-bg-primary-2: #38bfa7;
  --color-link-primary-1: #e4ebf5;
  --color-link-primary-2: #c8d0e7;
  --color-link-primary-3: #ccd8f1;
  --color-link-primary-4: #9baacf;
  --color-link-bg-primary-1: #92b4f2;
  --color-progress-bg-primary: #009688;
  --color-page-title-text-primary: #3e3f5e;
  --color-page-text-primary: #6c757d;
  --color-page-hover-text-primary: #ffffff;
  --color-page-active-bg-primary: #009688;/*500*/
  --color-comment-bg-primary: #009688;
  --color-scrollbar-bg-primary: #009688;
  --color-sly-tab-border-primary: #e5e5e5;
  --color-sly-tab-border-secondary-primary: #ffffff;
  --color-picker-bg-primary: rgba(255,255,255,0.7);
  --color-picker-btton-bg-primary: #009688;/*500*/
  --color-register-bg-primary: #ffffff;
  --color-page-link-bg-primary: #ffffff;

  /* side css*/
  --color-widget-side-border-primary: #26a69a;
  --color-border-secondary-primary: #f0f3fb;
  --color-active-text-primary: #ffb347;
  --color-ui-active-bg-primary: #00695c;/*800*/
  --color-ui-active-bg-secondary-primary: #26a69a;/*400*/
  --color-active-primary: #f8b500;
  --color-active-primary-1: #3e9eef;
  --color-active-secondary-primary: #ffcc33;
  --color-card-bg-primary: #f7f9fa;
  --color-sns-layer-primary: #ececec;
  --color-badge-primary: #ff4b2b;
  --color-badge-border-primary: #ff416c;
  --color-widget-search-border-primary: #dae1e6;
  --theme-switcher-background-color: #fff;
  --theme-switcher-highlight-background-color: #ccc;

  /* MOBILE UX UI LIGHT CSS*/
  --color-ui-bg-primary-500-s: #009688;
  --color-ui-bg-primary-600-s: #00897b;
  --color-ui-bg-primary-700-s: #00796b;
  --color-ui-bg-primary-800-s: #00695c;
  --color-ui-bg-primary-900-s: #004d40;
  --color-ui-bg-primary-mix-800-s: #004d40;
  --color-ui-top-search-box-shadow-1: inset 0 0 0 1px #00897b;/*600*/
  --color-ui-top-search-box-shadow-2: 0 2px 0 #004d40;/*포토샵작업*/
  --color-ui-top-search-box-shadow-3: 0 1px 0 #000,inset 1px 0 1px #004d40;/*900*/
  --color-ui-top-search-border-left: #004d40;/*900*/
  --color-ui-mo-header-bg-primary: #464c56;
  --color-ui-mo-header-bar-primary: #2f3239;
  --color-ui-mo-search-bar-primary: #e1e4e7;
  --color-ui-mo-search-form-control-bg-primary: #ffffff;
  --color-ui-mo-search-form-submit-bg-primary: #c6cacd;
  --color-ui-mo-search-form-submit-text-primary: #383c44;

  /* footer css */
  --color-footer-text-primary: #3e3f5e;
  --color-footer-border-primary: #dae1e6;
}

[data-theme=dark] {
  /* THEME COLOR DARK CSS */
  --color-ui-bg-primary-30: #2e323c;
  --color-ui-bg-primary-300: #484B54;
  --color-ui-bg-primary-500: #373B44;
  --color-ui-bg-primary-600: #535761;
  --color-ui-bg-primary-700: #414449;
  --color-ui-bg-primary-800: #3C4049;
  --color-ui-bg-primary-mix-200: #4e515a;

  /* THEME TXET COLOR DARK CSS */
  --color-ui-text-primary: rgba(255,255,255,.4);
  --color-ui-text-secondary-primary: rgba(255,255,255,.5);
  --color-ui-mo-text-primary: #ffffff;
  --color-ui-mo-sub-active-text-primary: #d9d9d9;
  --color-ui-slick-text-primary: #d9d9d9;
  --color-ui-text-primary-1: rgba(255,255,255,.4);
  --color-ui-text-secondary-primary-1: rgba(255,255,255,.5);
  --color-ui-text-primary-2: #d9d9d9;
  --color-ui-text-secondary-primary-2: #6c6f75;
  --color-ui-text-primary-3: #a8a8a8;
  --color-ui-text-secondary-primary-3: #2f80ed;
  --color-ui-text-primary-4: #2f80ed;

  /* THEME BORDER DARK CSS */
  --color-ui-border-primary: #5a5e65;
  --color-ui-border-secondary-primary: #474a53;
  --color-ui-border-primary-1: #464a56;
  --color-ui-search-border-primary: #2f3239;

  /* THEME SIDEBAR CSS */
  --color-ui-header-bg-primary: #4e515a;
  --color-ui-sidebar-text-primary: #d0d9ff;
  --color-ui-sidebar-text-primary-1: #e7e9fd;/*50*/
  --color-ui-sidebar-text-primary-2: #afbfff;/*200*/
  --color-ui-sidebar-text-primary-3: #a8a8a8;
  --color-ui-sidebar-text-primary-4: #e7e9fd;
  --color-ui-sidebar-bg-primary: #343841;
  --color-ui-sidebar-or-text-primary: #ffffff;
  --color-ui-sidebar-or-bg-primary: #6889ff;/*mix-200*/

  --color-ui-outlogin-icon-primary: #808389;
  --color-ui-outlogin-icon-secondary-primary: #6c6f75;
  --color-white-primary: #2C303A;
  --color-widget-title-text-primary: #ffffff;
  --color-widget-title-bg-primary: #4E515A;/*위젯타이틀*/
  --color-widget-top-title-bg-primary: #4E515A;
  --color-widget-title-secondary-text-primary: #808389;
  --color-widget-title-secondary-text-hover-primary: #6C6F75;
  --color-widget-box-primary: #3A3D46;/*위젯박스*/
  --color-widget-box-secondary-primary: #2E323C;
  --color-widget-box-shadow: 0 1px 10px 0 rgb(0 0 0 / 30%);
  --color-widget-quick-text-primary: #808389;
  --color-widget-quick-text-hover-primary: #6C6F75;
  --color-widget-quick-before-primary: #000;
  --color-search-border-primary: #2E323C;
  --color-search-text-primary: #808389;
  --color-search-from-bg-primary: #2E323C;
  --color-search-gradient-primary-1: #42454E;
  --color-search-gradient-primary-2: #373B44;
  --color-widget-search-border-primary: #5A5E65;
  --color-border-secondary-primary: #343842;/*사이드메뉴보더*/
  --color-bg-border-secondary-primary: #373B44;/*사이드메뉴보더*/
  --color-link-primary-1: #808389;/*링크1*/
  --color-link-primary-3: #74777D;/*링크3*/
  --color-login-input-button-primary: #2e323c;
  --color-login-button-primary: linear-gradient(to right, #4a4d56 0%, #40444d 99%);/*400 600*/
  --color-login-menu-button-primary: linear-gradient(to bottom, #4a4d56 0%, #2e323c 100%);/*400 600*/
  --color-login-menu-hover-button-primary: linear-gradient(to bottom, #2e323c 0%, #2f3238 100%);/*400 600*/
  --color-login-button-box-shadow-1: 0 12px 12px -11px #2E323C;/*700*/
  --color-login-button-box-shadow-2: 0 12px 20px -11px #2E323C;/*700*/
  --color-auto-login-layer-primary: #4E515A;
  --color-widget-side-menu-title-text-primary: #ffffff;
  --color-widget-side-menu-title-text-primary-1: #d9d9d9;
  --color-widget-side-border-primary: #43464F;
  --color-search-box-shadow: inset 1px 1px 1px 0px rgb(255 255 255 / 20%), 4px 4px 5px 0px rgb(0 0 0 / 10%), 2px 2px 3px 0px rgb(0 0 0 / 10%);
  --color-progress-bg-primary: #2f80ed;
  --color-page-title-text-primary: #ffffff;
  --color-page-text-primary: #ffffff;
  --color-page-hover-text-primary: #ffffff;
  --color-page-active-bg-primary: #5677fc;/*500*/
  --color-comment-bg-primary: #5677fc;
  --color-scrollbar-bg-primary: #ffffff;
  --color-sly-tab-border-primary: #5a5e65;
  --color-sly-tab-border-secondary-primary: #3a3d46;
  --color-ui-active-bg-primary: #3b50ce;/*800*/
  --color-ui-active-bg-secondary-primary: #738ffe;/*400*/
  --color-picker-bg-primary: rgba(83,87,97,0.9);
  --color-picker-btton-bg-primary: #5677fc;/*500*/
  --color-register-bg-primary: #ffffff;
  --color-page-link-bg-primary: #ffffff;

  /* card clock css */
  --color-gradient-primary-1: -webkit-linear-gradient(to right, #40434c, #4e515a);
  --color-gradient-primary-2: linear-gradient(to right, #40434c, #4e515a);
  --color-footer-border-primary: #5A5E65;
  --color-footer-text-primary: #808389;

  /* MOBILE UX UI DARK CSS*/
  --color-ui-bg-primary-500-s: #464c56;
  --color-ui-bg-primary-600-s: #41454f;
  --color-ui-bg-primary-700-s: #2f3239;
  --color-ui-bg-primary-800-s: #32353c;
  --color-ui-bg-primary-900-s: #25282d;
  --color-ui-bg-primary-mix-800-s: #25282d;
  --color-ui-top-search-box-shadow-1: inset 0 0 0 1px #41454f;/*600*/
  --color-ui-top-search-box-shadow-2: 0 2px 0 #003e33;/*900*/
  --color-ui-top-search-box-shadow-3: 0 1px 0 #000,inset 1px 0 1px #191b1f;/*900*/
  --color-ui-top-search-border-left: #191b1f;/*900*/
  --color-ui-mo-header-bg-primary: #25282d;
  --color-ui-mo-header-bar-primary: #000000;
  --color-ui-mo-search-bar-primary: #383c44;
  --color-ui-mo-search-form-control-bg-primary: #464c56;
  --color-ui-mo-search-form-submit-bg-primary: #383c44;
  --color-ui-mo-search-form-submit-text-primary: #747881;
}

/********************************************************
■ 테마설정 CSS
********************************************************/
#fsetup { padding:15px; border:1px solid var(--color-ui-border-primary); border-radius:4px; background:var(--color-widget-box-primary) } 
#nt_title .page-title { color:var(--color-page-title-text-primary) } 
.sly-tab li.active a { color:var(--color-page-title-text-primary); background:var(--color-widget-box-primary); border-bottom: 1px solid var(--color-sly-tab-border-secondary-primary) } 
.sly-tab li a { color:var(--color-ui-text-primary); border: 1px solid var(--color-sly-tab-border-primary); background:var(--color-widget-box-primary) } 
.sly-tab .d-flex { border-left:1px solid var(--color-sly-tab-border-primary) } 
.sly-tab hr { border-top:1px solid var(--color-sly-tab-border-primary) } 
.list-group-item { background:var(--color-widget-box-primary) } 
.col-form-label { color:var(--color-page-title-text-primary) } 
.custom-control-label { color:var(--color-page-title-text-primary) } 
.table-bordered td, .table-bordered th { color:var(--color-page-title-text-primary); border: 1px solid var(--color-ui-border-primary) } 
.bg-light { background-color:var(--color-ui-bg-primary-30)!important } 
.login-sns h2 { color:var(--color-page-title-text-primary) } 
.list-group-item h5 { color:var(--color-page-title-text-primary) } 
#mb_confirm h5 { color:var(--color-ui-white-primary) !important } 
#mb_confirm a { color:var(--color-ui-text-primary) !important } 
.list-group-item p { color:var(--color-page-title-text-primary) } 
#captcha_info { color:var(--color-page-title-text-primary) } 
#find_info h5 { color:var(--color-ui-white-primary) !important } 
.login-color h5 { color:var(--color-ui-white-primary) !important } 
.login-color { color:var(--color-ui-text-primary) !important } 
#sns_login { border-top: 1px solid var(--color-ui-border-primary)!important }
.p-3 { color:var(--color-page-title-text-primary) } 
#memo_list { color:var(--color-page-title-text-primary)!important } 
#memo_list a { color:var(--color-page-title-text-primary)!important } 
#memo_list .text-black-50 { color:var(--color-page-title-text-primary)!important } 
#noti_cate_ul { border-left:1px solid var(--color-ui-border-primary)!important } 
.register .list-group-item .dark-register { background:var(--color-register-bg-primary) } 
#scrap a { color:var(--color-page-title-text-primary)!important } 
#scrap .text-black-50 { color:var(--color-page-title-text-primary)!important } 
#scrap_info { color:var(--color-ui-text-primary-2)!important } 
.border { border:1px solid var(--color-ui-border-primary)!important } 
.wr-list a { color:var(--color-ui-text-primary-2)!important } 
.modal-dialog .list-group-item { background:var(--color-widget-box-primary)!important } 
.modal-dialog .list-group-item a { color:var(--color-page-title-text-primary)!important } 
.modal-dialog .list-group-item b { color:var(--color-page-title-text-primary)!important } 
#sch_res_ov { color:var(--color-page-title-text-primary)!important } 
#sch_res_list a { color:var(--color-page-title-text-primary)!important } 
#sch_res_list i { color:var(--color-page-title-text-primary)!important } 
#faq_list_total { color:var(--color-page-title-text-primary)!important }
#fnotilist a { color:var(--color-page-title-text-primary)!important }
#bo_list_total { color:var(--color-page-title-text-primary)!important }
#new_list .na-table .d-md-table-cell { color:var(--color-page-title-text-primary)!important }
#new_list a { color:var(--color-ui-text-primary-1)!important }
.list-group-item b { color:var(--color-ui-text-primary-2)!important }
#topNav h5 { color:var(--color-widget-quick-text-primary) !important }
.list-group-item { border: 1px solid var(--color-ui-border-primary) }
#bo_v h1 { color:var(--color-page-title-text-primary)!important }
#bo_v_info .sv_member { color:var(--color-page-title-text-primary)!important }
#bo_v_con p { color:var(--color-page-title-text-primary)!important }

/*-------------------------------------------------------
■ DARK MODE SWITCH CSS
-------------------------------------------------------*/

/* PC에만 적용될 다크모드 스위치. */

@media screen and (min-width: 576px){
 :root { --dark-blue: #4e515a; --dark-light: #353746; --red: #da2c4d; --yellow: #f8ab37; --grey: #ecedf3; } 
 .theme-switcher [role=switch] {
    position: fixed;
    right: 20px; /* 사이트에 맞게 이부분을 조절하세요 */
    top: 3px;
    width: 70px;
    display: inline-block;
    padding: 0;
    margin: 0 auto;
    text-align: center;
    margin: 17px 0;
    margin-top: 100px;
    height: 6px;
    border-radius: 4px;
    background-image: linear-gradient(298deg, var(--red), var(--yellow));
    z-index: 100 !important;
}

 .theme-switcher [role=switch]::before { position: absolute; font-family: 'unicons-line'; cursor: pointer; top: -17px; z-index: 2; font-size: 20px; line-height: 40px; text-align: center; width: 40px; height: 40px; border-radius: 50%; -webkit-transition: all 300ms linear; transition: all 300ms linear; } 
 .theme-switcher [role=switch][aria-checked=false]::before { content: '\ea8d'; left: 0; color: var(--grey); background-color: var(--dark-light); box-shadow: 0 4px 4px rgba(0,0,0,0.15), 0 0 0 1px rgba(26,53,71,0.07); } 
 .theme-switcher [role=switch][aria-checked=true]::before { content: '\eb0f'; left: 30px; color: var(--yellow); background-color: var(--dark-blue); box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07); } 
 }

/* MOBILE에서 사용될 다크모드 스위치. */

@media screen and (max-width: 576px){
 :root { --dark-blue: #4e515a; --dark-light: #353746; --red: #da2c4d; --yellow: #f8ab37; --grey: #ecedf3; } 
 @-webkit-keyframes theme-switcher { 
 0% { -webkit-transform: translateY(0); transform: translateY(0); } 
 100% { -webkit-transform: translateY(-100px); transform: translateY(-100px); } 
 }
 @keyframes theme-switcher { 
 0% { -webkit-transform: translateY(0); transform: translateY(0); } 
 100% { -webkit-transform: translateY(-100px); transform: translateY(-100px); } 
 }
 .theme-switcher [role=switch] { position: fixed; right: 0px; bottom: 28px; width: 50px; display: inline-block; padding: 0; margin: 0 auto; text-align: center; z-index: 100 !important; -webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } 
 .theme-switcher [role=switch]::before { position: absolute; font-family: 'unicons-line'; cursor: pointer; top: -17px; z-index: 2; font-size: 20px; line-height: 40px; text-align: center; width: 50px; height: 40px; border-top-left-radius: 50rem !important; border-bottom-left-radius: 50rem !important; } 
 .theme-switcher [role=switch][aria-checked=false]::before { content: '\ea8d'; left: 0; color: var(--grey); background-color: var(--dark-light); } 
 .theme-switcher [role=switch][aria-checked=true]::before { content: '\eb0f'; left: 0px; color: var(--yellow); background-color: var(--dark-blue); } 
 }

.btn-primary,
.btn-primary.disabled, 
.btn-primary:disabled,
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active, 
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show &gt; .btn-outline-primary.dropdown-toggle,
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {background-color: var(--color-ui-bg-primary-500) !important;border-color: var(--color-ui-bg-primary-600) !important; } 

hr.hr::after,
.dropdown-item.active, 
.dropdown-item:active,
.bg-primary {background-color: var(--color-ui-bg-primary-500) !important; } 

.border-primary {border-color: var(--color-ui-bg-primary-600) !important; } 

.text-primary,
.btn-outline-primary.disabled, 
.btn-outline-primary:disabled {color : var(--color-ui-bg-primary-600) !important; } 

/* ---------------------------------------------------------- */

.btn-primary:focus, 
.btn-primary.focus,
.btn-primary:hover {background-color: var(--color-ui-bg-primary-500) !important;border-color: var(--color-ui-bg-primary-600) !important; } 

.btn-outline-primary {color: var(--color-ui-bg-primary-600) !important;border-color: var(--color-ui-bg-primary-600) !important; } 

.btn-outline-primary:hover {color: var(--color-white-primary) !important; } 

a.bg-primary:hover, 
a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {background-color: var(--color-ui-bg-primary-600) !important; } 

.btn-primary:focus, 
.btn-primary.focus,
.btn-outline-primary:focus, 
.btn-outline-primary.focus,
.custom-control-input:focus ~ .custom-control-label::before {box-shadow: 0 0 0 0.2rem rgba(51, 135, 125, 0.5) !important; } 

.btn_more { width: 2rem; height: 2rem; border-radius: 50%; box-shadow: var(--color-btn-more-shadow); display: flex; justify-content: center; align-items: center; font-size: 2rem; margin-top: -2px; margin-right: 3px; cursor: pointer; color: var(--color-toggle-primary); transition: all 0.5s ease; } 
.btn_more:active { box-shadow: var(--color-btn-more-shadow); color: var(--color-toggle--hover-primary); } 
.btn_more:hover { color: var(--color-toggle--hover-primary); } 

/*■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ 아래 CSS부터는 디자인몽 커스텀CSS 입니다. ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■*/

/*-------------------------------------------------------
■ SIDE PLACEHOLDER &amp; SCROLLBAR CSS
-------------------------------------------------------*/
::-webkit-input-placeholder { color:var(--color-white-primary) } 

:-moz-placeholder { color:var(--color-white-primary) } 

::-moz-placeholder { color:var(--color-white-primary) } 

:-ms-input-placeholder { color:var(--color-white-primary) } 

::-webkit-scrollbar { width:.2em; background:var(--color-scrollbar-bg-primary) } 

::-webkit-scrollbar-thumb { background:var(--color-white-primary) } 

::-webkit-scrollbar-thumb:window-inactive { background:var(--color-white-primary) } 

/********************************************************
■ RAYOUT 바디 CSS
********************************************************/
h1, h2, h3, h4, h5, h6, span , p, a, input, button, form, .en, .category-box, .sidebar_alarm_reaction_ui.buttons .or { font-family:"Rajdhani","NEXON Lv2 Gothic","Titillium Web" !important; } 
/*a { color: var(--color-text-primary) !important } 
a:hover { color: var(--color-text-hover-primary) !important } */
.is-pc { background: var(--color-ui-bg-primary-30) !important } 
.is-mobile { background: var(--color-ui-bg-primary-30) !important } 
.wrapper { background: var(--color-ui-bg-primary-30) !important } 
body { background: var(--color-ui-bg-primary-30) !important } 
.orangered { color:var(--color-comment-bg-primary) !important } 
.progress { background-color: var(--color-ui-bg-primary-mix-100) !important; } 
::placeholder { font-family:"Rajdhani","NEXON Lv2 Gothic","Titillium Web"; } 

/********************************************************
■ PAGINATION CSS
********************************************************/
.page-item.disabled .page-link { background-color:var(--color-widget-box-primary); border-color:var(--color-ui-border-primary) } 
.page-item.active .page-link { color:var(--color-page-link-bg-primary)!important; border-color:var(--color-page-active-bg-primary) !important; background-color:var(--color-page-active-bg-primary) !important; } 
.page-link { color:var(--color-page-text-primary); background-color:var(--color-widget-box-primary); border-color:var(--color-ui-border-primary); transition: all .4s; } 
.page-link:hover { color:var(--color-page-hover-text-primary)!important; border-color:var(--color-page-active-bg-primary) !important; background-color:var(--color-page-active-bg-primary) !important; } 

/********************************************************
■ 테마별 TEXT COLOR 
********************************************************/
.keyword-gap a { color: var(--color-ui-text-primary-3) !important; } 
.keyword-gap a:hover { color: var(--color-ui-text-secondary-primary-3) !important; } 
.media-body a { color: var(--color-ui-text-primary-2) !important; } 
.media-body a:hover { color: var(--color-ui-text-secondary-primary-2) !important; } 
.content-font { color: var(--color-ui-text-primary) !important; } 
.na-item a { color: var(--color-ui-text-primary-1) !important; } 
.na-item a:hover { color: var(--color-ui-text-secondary-primary-1) !important; } 
.member-join-grid-gap a { color: var(--color-ui-text-primary) !important; } 
.member-join-grid-gap a:hover { color: var(--color-ui-text-secondary-primary) !important; } 
#nt_footer a { color: var(--color-ui-text-primary) !important; } 
#nt_footer a: hover; { color: var(--color-ui-text-secondary-primary) !important; } 

/********************************************************
■ 768PX 이상에서 실행되는 CODE RAYOUT or GRID
********************************************************/
@media (min-width: 768px){
 .col-md-1 { -ms-flex:0 0 10%; flex:0 0 10%; max-width:10% } 
 .col-md-2 { -ms-flex:0 0 20%; flex:0 0 20%; max-width:20% } 
 .col-md-3 { -ms-flex:0 0 30%; flex:0 0 30%; max-width:30% } 
 .col-md-4 { -ms-flex:0 0 40%; flex:0 0 40%; max-width:40% } 
 .col-md-5 { -ms-flex:0 0 50%; flex:0 0 50%; max-width:50% } 
 .col-md-6 { -ms-flex:0 0 60%; flex:0 0 60%; max-width:60% } 
 .col-md-7 { -ms-flex:0 0 70%; flex:0 0 70%; max-width:70% } 
 .col-md-8 { -ms-flex:0 0 80%; flex:0 0 80%; max-width:80% } 
 .col-md-9 { -ms-flex:0 0 90%; flex:0 0 90%; max-width:90% } 
 .col-md-10 { -ms-flex:0 0 100%; flex:0 0 100%; max-width:100% } 
 .col-md-custom-3 { -ms-flex:0 0 30%; flex:0 0 30%; max-width:30% } 
 .col-md-custom-7 { -ms-flex:0 0 70%; flex:0 0 70%; max-width:70% } 
 .row { margin-left:0!important; margin-right:0!important } 
 .na-row { margin-left:0!important; margin-right:0!important } 
 .main-wrap { display:flex; flex-wrap:wrap; margin-left:-10px; margin-right:-10px } 
 .page-wrap { display:flex; flex-wrap:wrap; margin-left:-10px; margin-right:-10px } 
 .ml-side { padding-right:0; padding-left:10px } 
 .mr-side { padding-right:10px; padding-left:0 } 
 }

/********************************************************
■ 다크모드시 적용되는 INPUT COLOR 
********************************************************/
input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover { transition:background-color 5000s ease-in-out 0s; -webkit-transition:background-color 9999s ease-out; -webkit-text-fill-color:var(--color-search-text-primary)!important } 

/********************************************************
■ SIDE STICKY CSS
********************************************************/
@supports (position:sticky) or (position:-webkit-sticky){
 .side-sticky { position:-webkit-sticky; position:sticky; top:15px } 
 } 

/********************************************************
■ HEADER CSS
********************************************************/
#header_pc { position:relative; padding-top:23px; height:115px; background: var(--color-ui-bg-primary-800) !important; z-index:9 } 
#header_pc .header-logo a { color:var(--color-white-primary) !important; font-size:36px; font-weight:bold } 
#header_pc .header-logo a span { margin-left:10px } 
#header_pc .ment-title { position: absolute; display: inline-block; color: var(--color-widget-title-text-primary); font-weight: bold; left: 50%; transform: translateX(-50%); min-height: 3rem; min-width: 15rem; margin: -0.3rem 0 1.25vw; padding: 0.95em 2.8em; background-color: var(--color-ui-bg-primary-600); border-radius: 50px; overflow: hidden; backface-visibility: hidden; z-index: 3; } 
#header_pc .mong-icon { position:absolute; width:245px; top:32px; left:50%; transform: translateX(-50%) } 
.header-title-bg { position:absolute; width:100%; max-width:0px; height:70px; margin-top:-40px; left:50%; transform:translateX(-50%); background: var(--color-ui-bg-primary-30) !important; z-index:2; border-radius:50px } 
@media screen and (max-width:1199px) { 
  #header_pc .header-logo a { color:var(--color-white-primary) !important; font-size:36px; font-weight:bold; margin-left: 15px; } 
  #header_pc .ment-title { padding: 0.95em 2.1em; }
}

/*-------------------------------------------------------
■ PC HEADER SEARCH CSS VERSION HEADER공통
-------------------------------------------------------*/
.mong-site-search { width:262px; margin-top:-60px } 
@media screen and (max-width:1199px) { .mong-site-search { margin-right:15px; } }
.mong-site-search form { background:var(--color-ui-bg-primary-700-s); background:linear-gradient(var(--color-ui-bg-primary-700-s),var(--color-ui-bg-primary-800-s)); border:1px solid var(--color-ui-bg-primary-900-s); border-radius:5px; padding:10px; box-shadow:var(--color-ui-top-search-box-shadow-1); display:inline-block; font-size:0px; position:relative; z-index:1 } 
.mong-site-search input { background:var(--color-ui-bg-primary-600-s); background:linear-gradient(var(--color-ui-bg-primary-600-s),var(--color-ui-bg-primary-mix-800-s)); border:1px solid var(--color-ui-bg-primary-mix-800-s); border-radius:5px 0 0 5px; box-shadow:var(--color-ui-top-search-box-shadow-2); color:#888; display:block; float:left; font-size:13px; font-weight:400; height:40px; margin:0; padding:0 10px; width:160px } 
.ie .mong-site-search input { line-height:40px } 
.mong-site-search input::-webkit-input-placeholder { color:#999 } 
.mong-site-search input:-moz-placeholder { color:#999 } 
.mong-site-search input:focus { animation:glow .8s ease-out infinite alternate; background:#var(--color-ui-bg-primary-800-s); background:linear-gradient(var(--color-ui-bg-primary-800-s),var(--color-ui-bg-primary-900-s)); border-color:var(--color-ui-bg-primary-800-s); box-shadow:0 0 5px rgba(210,211,239,.2),inset 0 0 5px rgba(210,211,239,.1),0 2px 0 #2e3173; color:#efe; outline:0 } 
.mong-site-search input:focus::-webkit-input-placeholder { color:#30d8f6 } 
.mong-site-search input:focus:-moz-placeholder { color:#30d8f6 } 
.mong-site-search button { background:var(--color-ui-bg-primary-600-s); background:linear-gradient(var(--color-ui-bg-primary-600-s),var(--color-ui-bg-primary-mix-800-s)); border:1px solid var(--color-ui-bg-primary-mix-800-s); border-radius:5px 0 0 5px; box-shadow:var(--color-ui-top-search-box-shadow-2); box-sizing:border-box; border-left-color:var(--color-ui-top-search-border-left); border-radius:0 5px 5px 0; color:#fff; display:block; float:left; font-size:13px; font-weight:400; height:40px; line-height:40px; margin:0; padding:0; position:relative; text-shadow:0 -1px 0 #000; width:80px } 
.mong-site-search button:focus,.mong-site-search button:hover { background:var(--color-ui-bg-primary-800-s); background:linear-gradient(var(--color-ui-bg-primary-800-s),var(--color-ui-bg-primary-900-s)); box-shadow:var(--color-ui-top-search-box-shadow-3); color:#9d9fdc; outline:0 } 
.mong-site-search button:active { background:var(--color-ui-bg-primary-800-s); background:linear-gradient(var(--color-ui-bg-primary-800-s),var(--color-ui-bg-primary-900-s)); box-shadow:var(--color-ui-top-search-box-shadow-3); color:#9d9fdc; top:1px } 
@keyframes glow { 
 0% { border-color:#30d8f6; box-shadow:0 0 5px rgba(210,211,239,.2),inset 0 0 5px rgba(210,211,239,.1),0 2px 0 #1f214f } 100% { border-color:#70e3fb; box-shadow:0 0 20px rgba(210,211,239,.6),inset 0 0 10px rgba(210,211,239,.4),0 2px 0 #1f214f } 
 } 

/*-------------------------------------------------------
■ PC HEADER POPULAR VERSION CSS HEADER공통
-------------------------------------------------------*/
.mong_popular_box { width:265px; margin-top:-68px; border-radius:.4rem } 
.mong_popular_box .mong_popular_box_header { padding:.5rem .5rem .5rem .7rem; border-radius:.4rem .4rem 0 0; background-color:var(--color-ui-bg-primary-700); box-shadow:0 1px 0 0 rgba(0,0,0,.05),0 5px 15px 0 rgba(0,0,0,.1); z-index:10 } 
.mong_popular_box .mong_popular_box_body { position:relative; border-radius:0 0 .2rem .2rem; z-index:1 } 
.mong_popular_box .mong_popular_box_title { color:var(--color-widget-title-text-primary); font-size:1rem; font-weight:700 } 
#mong_popular_layer { overflow:hidden; background:var(--color-ui-bg-primary-700-s); background:linear-gradient(var(--color-ui-bg-primary-700-s),var(--color-ui-bg-primary-800-s)); border-radius:0 0 4px 4px; padding:2px 10px 25px 10px; z-index:1 } 
#mong_popular_layer li,#mong_popular_layer ul { margin:0; padding:0; border-radius:4px; list-style:none; text-align:left } 
#mong_popular_layer li a { color: #fff; font-size:12px } 
#mong_popular_scroll li&gt;div .gap { color:#fff; font-size:11px; letter-spacing:-1px; padding-right:5px } 
.box-big { height:278px } 
.box-small { height:36px } 
@media screen and (max-width:1199px) { .mong_popular_box { width:265px; margin-top:-68px; margin-right: 15px; border-radius:.4rem } }

/*-------------------------------------------------------
■ PC HEADER SEARCH POPULAR VERSION CSS HEADER공통
-------------------------------------------------------*/
.search-box { position:absolute; width:100%; max-width:356px; height:58px; border-radius:50px; margin-top:-3px; left:50%; transform:translateX(-50%); background:var(--color-ui-bg-primary-600); z-index:2 } 
.go-icon,.search-icon { position:absolute; top:0; height:60px; width:86px; line-height:61px; text-align:center } 
.search-icon { left:0; pointer-events:none; font-size:1.22em; will-change:transform; transform:rotate(0); -webkit-transform:rotate(0); -moz-transform:rotate(0); -o-transform:rotate(0); transform-origin:center center; -webkit-transform-origin:center center; -moz-transform-origin:center center; -o-transform-origin:center center; transition:transform .4s 220ms cubic-bezier(.19, 1, .22, 1); -webkit-transition:transform .4s 220ms cubic-bezier(.19, 1, .22, 1); -moz-transition:transform .4s 220ms cubic-bezier(.19, 1, .22, 1); -o-transition:transform .4s 220ms cubic-bezier(.19, 1, .22, 1) } 
.si-rotate { transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg) } 
.go-icon { right:0; pointer-events:none; font-size:1.38em; will-change:opacity; cursor:default; opacity:0; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transition:opacity 190ms ease-out,transform 260ms cubic-bezier(.19, 1, .22, 1); -webkit-transition:opacity 190ms ease-out,transform 260ms cubic-bezier(.19, 1, .22, 1); -moz-transition:opacity 190ms ease-out,transform 260ms cubic-bezier(.19, 1, .22, 1); -o-transition:opacity 190ms ease-out,transform 260ms cubic-bezier(.19, 1, .22, 1) } 
.go-in { opacity:1; pointer-events:all; cursor:pointer; transform:rotate(0); -webkit-transform:rotate(0); -moz-transform:rotate(0); -o-transform:rotate(0); transition:opacity 190ms ease-out,transform 260ms 20ms cubic-bezier(.19, 1, .22, 1); -webkit-transition:opacity 190ms ease-out,transform 260ms 20ms cubic-bezier(.19, 1, .22, 1); -moz-transition:opacity 190ms ease-out,transform 260ms 20ms cubic-bezier(.19, 1, .22, 1); -o-transition:opacity 190ms ease-out,transform 260ms 20ms cubic-bezier(.19, 1, .22, 1) } 
.search-border { display:block; width:100%; max-width:360px; height:60px } 
.border { fill:none; stroke:var(--color-ui-search-border-primary); stroke-width:5; stroke-miterlimit:10 } 
.border { stroke-dasharray:740; stroke-dashoffset:0; transition:stroke-dashoffset .4s cubic-bezier(.6, .040, .735, .99); -webkit-transition:stroke-dashoffset .4s cubic-bezier(.6, .040, .735, .99); -moz-transition:stroke-dashoffset .4s cubic-bezier(.6, .040, .735, .99); -o-transition:stroke-dashoffset .4s cubic-bezier(.6, .040, .735, .99) } 
.border-searching .border { stroke-dasharray:740; stroke-dashoffset:459; transition:stroke-dashoffset 650ms cubic-bezier(.755, .15, .205, 1); -webkit-transition:stroke-dashoffset 650ms cubic-bezier(.755, .15, .205, 1); -moz-transition:stroke-dashoffset 650ms cubic-bezier(.755, .15, .205, 1); -o-transition:stroke-dashoffset 650ms cubic-bezier(.755, .15, .205, 1) } 
#search { position:absolute; top:0; left:0; width:100%; height:100%; border-radius:50px; border:none; background:rgba(255,255,255,0); padding:3px 68px 0 68px; color:#fff; font-size:1em; font-weight:400; letter-spacing:-.015em; outline:0 } 
#search::-webkit-input-placeholder { color:var(--color-ui-white-primary) } 
#search::-moz-placeholder { color:var(--color-ui-white-primary) } 
#search:-ms-input-placeholder { color:var(--color-ui-white-primary) } 
#search:-moz-placeholder { color:var(--color-ui-white-primary) } 
#search::-moz-selection { color:var(--color-ui-white-primary); background: rgba(0,0,0,0.25) } 
#search::selection { color:var(--color-ui-white-primary); background: rgba(0,0,0,0.25) } 

/*-------------------------------------------------------
■ MOBILE HEADER CSS 
-------------------------------------------------------*/
#header_mo { position:relative; color:var(--color-ui-mo-text-primary); background-color:var(--color-ui-mo-header-bg-primary) } 
#header_mo:after { content:""; display:table; clear:both } 
#header_mo h1 { position:absolute; top:0; left:15px; z-index:0; margin:0; width:100%; line-height:60px; font-size:1.8em; font-weight:500; text-transform:uppercase; letter-spacing:.3em } 
#header_mo h1 a { color:var(--color-ui-mo-text-primary) } 
#header_mo h1 a:hover { color:var(--color-ui-mo-text-primary) }  
.header-button { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; text-indent:-119988px; overflow:hidden; text-align:left; position:relative; z-index:1; display:block; width:60px; height:60px; margin:0; padding:0; outline:0; background:url('../img/m-top-icon.png'); border:none; cursor:pointer } 
#toggle-home { float:left; background-position:0 0; background-color:#bc0023 } 
#toggle-search { float:right; background-position:-60px 0 } 
#toggle-search.open:after { top:40px } 
#toggle-search:after { -webkit-transition:top,.5s; -moz-transition:top,.5s; -o-transition:top,.5s; transition:top,.5s; position:absolute; top:52px; left:50%; margin-left:-8px; content:""; border-color:transparent transparent var(--color-ui-mo-search-bar-primary); border-style:solid; border-width:8px 8px 12px } 
#toggle-user-login { position:relative; float:right; background-position:-120px 0 } 
#toggle-user-login:before { position:absolute; left:0; width:1px; height:60px; content:""; background-color:var(--color-ui-mo-header-bar-primary) } 
#toggle-user-logout { position:relative; float:right; background-position:-180px 0 } 
#toggle-user-logout:before { position:absolute; left:0; width:1px; height:60px; content:""; background-color:var(--color-ui-mo-header-bar-primary) } 
#search-form { -webkit-transition:max-height,.5s; -moz-transition:max-height,.5s; -o-transition:max-height,.5s; transition:max-height,.5s; position:absolute; top:60px; left:0; width:100%; max-height:0; overflow:hidden; background-color:var(--color-ui-mo-search-bar-primary); z-index:9 } 
#search-form.open { min-height:54px } 
#search-form fieldset { position:relative; margin:0 60px 0 0; padding:0; border:none } 
#search-form input { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; display:block; height:54px } 
#search-form input[type=search] { width:100%; padding:0 5px 0 22px; background:0 0; border:none } 
#search-form input[type=submit] { position:absolute; bottom:0; right:0; width:60px; margin:0; padding:0; font-weight:700; text-transform:uppercase; color:var(--color-ui-mo-search-form-submit-text-primary); background:var(--color-ui-mo-search-form-submit-bg-primary); border:none; cursor:pointer } 
#mo_top_search.form-control { border:0px; border-radius:0px !important; background-color:var(--color-ui-mo-search-form-control-bg-primary) } 

/*-------------------------------------------------------
■ MOBILE MENU CSS
-------------------------------------------------------*/
.m__nav .m__nav__container { display:table !important; width:100%!important; table-layout: fixed; border-collapse: collapse } 
.m__nav .m__nav__container .m__nav__inner { display: table-row!important; } 
.m__nav .m__nav__container .m__nav__inner .m__nav__grid { display: table-cell!important; vertical-align: middle } 
.m_nav { margin:0 auto; background:var(--color-ui-bg-primary-500) } 
.m_nav ul { display:flex; background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 25%,rgba(255,255,255,.2) 75%,rgba(255,255,255,0) 100%); box-shadow:0 0 25px rgba(0,0,0,.1),inset 0 0 1px rgba(255,255,255,.6) } 
.m_nav ul li { display:inline-block } 
.m_nav ul li a { color:var(--color-ui-mo-text-primary); padding:12px 12px 10px 12px; text-transform:uppercase; font-size:18px; text-decoration:none; display:block } 
.m_nav ul li a:hover { box-shadow:0 0 10px rgba(0,0,0,.1),inset 0 0 1px rgba(255,255,255,.6); background:rgba(255,255,255,.1) } 
.m_nav ul li a.on { box-shadow:0 0 10px rgba(0,0,0,.1),inset 0 0 1px rgba(255,255,255,.6); background:rgba(255,255,255,.1); } 
.m__nav { background-color:var(--color-ui-bg-primary-500)!important } 
.sub_menu_all { display:table-cell!important; width:59px; background:rgba(255,255,255,.1) } 
.sub_menu_all i { font-size:30px; padding:0 15px; height:50px; line-height:50px } 
.m_sub_menu { position:relative; border-bottom:1px solid var(--color-ui-border-primary); padding:0px 0px 0px 15px; background:var(--color-widget-box-primary) } 
.m_sub_menu a { color:var(--color-ui-text-primary) } 
.m_sub_menu li.active a.on { color:var(--color-ui-mo-sub-active-text-primary)!important } 
.m_sub_menu .m_sub_grid { display:flex!important } 
.m_sub_menu .m_sub_sm_grid { padding-right: 1rem!important; white-space: nowrap!important; } 
.m_sub_menu .m_sub_break { display:block !important; font-size:16px !important; line-height:1.7 !important; padding: 0.6rem 0 0.5rem 0 !important } 
.m_sub_menu .m_sub_break.on { display:block !important; color:var(--color-ui-mo-sub-active-text-primary)!important; font-size:16px !important; line-height:1.7 !important; padding: 0.6rem 0 0.5rem 0 !important } 

/********************************************************
■ HEADER LOGIN CSS
********************************************************/
.member-wrap { margin-top:-10px; } 
.member-wrap .memberInfo_wrap { display:flex; align-items:center; } 
.member-wrap .memberInfo_wrap li { margin-left:20px; margin-top:2px; } 
.member-wrap .memberInfo_wrap li:first-child { margin-left:0; } 
.member-wrap .memberInfo_wrap li a { display:block; position:relative; padding-bottom:19px; } 
.member-wrap .memberInfo_wrap li a img { width:32px; height:32px; } 
.member-wrap .memberInfo_wrap li a span { position:absolute; top: 56px; bottom:0; left:50%; font-size:13px; color: var(--color-white-primary); line-height:1.462em; white-space:nowrap; transform:translate(-50%, 0); } 
.member-wrap .memberInfo_wrap li.ad_partner { width:136px; height:39px; margin-top:5px; } 
.member-wrap .memberInfo_wrap li.ad_partner + li { margin-left:34px; } 
.member-wrap .memberInfo_wrap li.ad_partner a { width:100%; height:100%; padding-bottom:0; } 
.member-wrap .memberInfo_wrap li.ad_partner a img { width:100%; height:100%; } 

.user-member-wrap { margin-right:10px; } 
.user-member-wrap .user-memberInfo-wrap { display:flex; align-items:center; } 
.user-member-wrap .user-memberInfo-wrap i { color: var(--color-link-primary-1); font-size: 24px; transition: all 0.5s ease; } 
.user-member-wrap .user-memberInfo-wrap i:hover { color: var(--color-link-primary-3); } 
.user-member-wrap .user-memberInfo-wrap li { margin-left:44px; margin-top:2px; } 
.user-member-wrap .user-memberInfo-wrap li:first-child { margin-left:0; } 
.user-member-wrap .user-memberInfo-wrap li a { display:block; position:relative; padding-bottom:19px; } 
.user-member-wrap .user-memberInfo-wrap li a img { width:32px; height:32px; } 
.user-member-wrap .user-memberInfo-wrap li a span { position:absolute; bottom:0; left:50%; font-size:13px; color: var(--color-link-primary-1); line-height:1.462em; white-space:nowrap; transform:translate(-50%, 0); transition: all 0.5s ease; } 
.user-member-wrap .user-memberInfo-wrap li a span:hover { color: var(--color-link-primary-3); } 
.label-new-badge { position:absolute; top:-55px; right:-20px; display:inline-block; min-width:6px; height:19px; padding:0 6px; background-color:var(--color-badge-primary); -webkit-border-radius:18px; border-radius:18px; border:1px solid var(--color-badge-border-primary); font-size:11px; line-height:19px; color:#fff; font-weight:700; letter-spacing:0; -webkit-box-shadow:0 1px 1px 0 rgb(0 0 0 / 10%); box-shadow:0 1px 1px 0 rgb(0 0 0 / 10%); vertical-align:top } 
.current-box { position:absolute; margin-left:35px; margin-top:-4px } 

/********************************************************
■ MONG OUTLOGIN CSS
********************************************************/
#mong-member a { color:var(--color-ui-text-primary) } 
#mong-member p { color:var(--color-ui-text-primary) } 
#mong-member span.lev { color:var(--color-ui-text-primary) } 
#mong-login-box { margin:15px } 
.margin-grid-gap { margin-bottom:10px; } 
@media (max-width:576px) { .margin-grid-gap { margin-bottom:7px; }}
.password-grid-gap { width:32px; } 
.mong-login-button-box { border-radius:8px } 
.mong-login-button-box .login-icon-line { color:var(--color-white-primary); width:56px; line-height:50px } 
.mong-login-form { background-color:var(--color-search-from-bg-primary) } 
.mong-login-form .form-control { border:1px solid var(--color-widget-search-border-primary)!important; background-color:var(--color-search-from-bg-primary)!important } 
.mong-login-form i { color:var(--color-board-blog-color-primary) } 
.mong-media-body { margin:0 5px 0 0 } 
.btn-custom { display:inline-block; font-weight:400; color:var(--color-ui-text-primary ); text-align:center; vertical-align:middle; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; border-top:1px solid var(--color-widget-search-border-primary); border-left:none; border-right:1px solid var(--color-widget-search-border-primary); border-bottom:1px solid var(--color-widget-search-border-primary); padding:.375rem .75rem; font-size:1rem; line-height:1.5; border-radius:0 .25rem .25rem 0; background:var(--color-login-input-button-primary) } 
.mong-login-form.from-grid-gap { margin:0 0 5px 0 } 
.mong-outlogin a { color: var(--color-ui-text-primary-1) !important } 
.mong-outlogin p { color: var(--color-ui-text-primary-1) !important } 
.mong-outlogin .lev { color: var(--color-ui-text-primary-1) !important } 
.mong_menu_inner__options { display:inline-block; width: 100%; text-align: center; } 
.mong_menu_inner__options .nav_menu { box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; transition: all 0.2s, box-shadow 0.01s; cursor: pointer; background-image: var(--color-login-menu-button-primary); color: white; font-weight: 200; font-size: 14px; padding: 6px 10px; } 
.mong_menu_inner__options .nav_menu:nth-of-type(3) { border-top-right-radius: 40px; border-bottom-right-radius: 40px; } 
.mong_menu_inner__options .nav_menu:nth-of-type(1) { border-top-left-radius: 40px; border-bottom-left-radius: 40px; } 
.mong_menu_inner__options a { color: #fff !important; } 
.mong_menu_inner__options .nav_menu i { transition: all 0.2s; position: relative; top: 0px; transform: scale(1); } 
@media screen and (max-width: 1199px){.mong_menu_inner__options .nav_menu i{display:none !important}}
.mong_menu_inner__options .nav_menu:hover { color: white; transition: all 0.2s, box-shadow 0.1s; background-image: var(--color-login-menu-hover-button-primary); box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; z-index: -1; } 
.outlogin-noti-badge-new { position:absolute; display:inline-block; min-width:6px; height:18px; margin-top:-5px; margin-right:5px; padding:0 6px; background-color:#1fd771; -webkit-border-radius:18px; border-radius:18px; font-size:10px; line-height:18px; color:#fff; font-weight:700; letter-spacing:0; -webkit-box-shadow:0 1px 1px 0 rgb(0 0 0 / 10%); box-shadow:0 1px 1px 0 rgb(0 0 0 / 10%); vertical-align:top } 
.na-bar { background:var(--color-link-primary-3) } 
#sidebar-sns-box { border-top:1px solid var(--color-border-primary); margin:10px 15px; padding:10px 10px 5px; margin:15px; border:1px solid var(--color-border-primary); border-radius:4px; background:var(--color-sns-layer-primary) } 
.mong-task-outlogin-box { padding:15px; background-color:var(--color-widget-box-primary) } 
#sns_outlogin .sns-icon { width:calc(50% - 10px) } 
.mong-task .login-sns { padding: 0.7em 0.5em; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; transition: all 0.2s ease-in-out; border-radius: 3px; }
.mong-task .login-sns:hover { box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px; } 
.sns-join {} 
.sns-join .login-sns { margin: 0.5em 0em 0em !important; } 
.mong-task .login-sns .sns-wrap { margin:0.05em -0.25em !important; !important; } 
.mong-task.mong-task-gap { padding:1em } 
.member-join-grid-gap { padding-top:3px; }
#sns_outlogin .sns-icon { overflow: hidden; margin: 0 3px } 
#sns_outlogin .sns-icon { border-radius:2px; border:1px solid rgba(0,0,0,0.1); background-position:center } 
.sns-wrap-over .sns-naver { background-color:#1ec800 !important } 
.sns-wrap-over .sns-kakao { background-color:#ffeb00 !important } 
.sns-wrap-over .sns-facebook { background-color:#3b579d !important } 
.sns-wrap-over .sns-google { background-color:#db4a3a !important } 
.sns-wrap-over .sns-twitter { background-color:#1da1f2 !important } 
.sns-wrap-over .sns-payco { background-color:#df0b00 !important }

/* 로그인 버튼 CSS */
.mong-outlogin-btn { font-size: 16px; display: block; background-image:var(--color-login-button-primary); border-radius: 4px; font-size: 14px; font-weight: bold; width: 100%; height: 5.12rem; padding: 20px 15px; cursor: pointer; transition: all 0.3s ease-in-out; text-align: center; color: #ffffff; box-shadow:var(--color-login-button-box-shadow-1); background-size: 200% auto; background-color:var(--color-login-button-primary)!important; } 
.mong-outlogin-btn:hover { background-position: right center; box-shadow:var(--color-login-button-box-shadow-2) } 
button, input[type=button] {cursor: pointer;margin: 0;-webkit-font-smoothing: subpixel-antialiased !important;border: none}

/********************************************************
■ MEMBER RANK CSS
********************************************************/
.mong-member-rank-wrap { position:absolute; top:128px!important; margin-left:-83px; width:70px; height:auto; border-radius:4px; background:var(--color-widget-box-primary) } 
.mong-member-rank-wrap .mong-rank-title { position:relative; margin:0 0 -2px 0; width:70px; height:40px; text-align:center; font-weight:400; z-index:1; padding-top:5px; height:40px; border:1px solid var(--color-ui-border-primary); border-bottom:none; border-radius:4px 4px 0 0; background-color:var(--color-ui-bg-primary-500) } 
.mong-rank-title span { display:block; line-height:30px; font-size:12px; font-weight:400; color:var(--color-widget-title-text-primary) } 
.mong-member-rank-wrap ul { list-style:none; padding:0; margin:0; margin-bottom:-1px; margin-top:1px; border:1px solid var(--color-ui-border-primary); border-radius: 0px 0px 4px 4px } 
.mong-member-rank-wrap li { position:relative; width:69px; height:69px; border-top:1px solid var(--color-ui-border-secondary-primary) } 
.mong-member-rank-profile { display:block; text-align:center } 
.profile_rank { margin:10px; position:relative; width:31px; height:31px } 
.member-rank-info { display:none; position:absolute; top:-1px; right:-200px; width:200px; height:69px; line-height:69px; border-radius:0 4px 4px 0; border-bottom:1px solid #5e6c79; background-color:#7e8a94; font-size:12px; text-align:center; z-index:200; color:#fff } 
.member-rank-info a { color:var(--color-white-primary) } 
.member-rank-info span { font-weight:700 } 
.mong-member-rank-wrap li:hover p { display:block } 
.mong-member-rank-wrap li.best .member-rank-info { border:1px solid #c0252c; background-color:#e22136 } 
.mong-member-rank-wrap li.two .member-rank-info { border:1px solid #0095c0; background-color:#00acd4 } 
.mong-member-rank-wrap li.three .member-rank-info { border:1px solid #f9a815; background-color:#fbb70d } 
.mong-member-rank-wrap li.best:hover { border:1px solid #cf4436; border-right:0 } 
.mong-member-rank-wrap li.two:hover { border:1px solid #0095c0; border-right:0 } 
.mong-member-rank-wrap li.three:hover { border:1px solid #f9a815; border-right:0 } 
.mong-member-rank-wrap li:hover { border:1px solid #5e6c79; border-right:0 } 
.member-rank-info span a span { color:var(--color-white-primary)!important } 
.mong-member-rank-wrap li.best .member-rank-info:after { position:absolute; top:0; right:10px; content:''; width:36px; height:36px; background:url('./img/best-user.png') no-repeat } 
.profile-rank img { width:45px; height:45px; margin-top:12px; border-radius:50%; border:1px solid var(--color-ui-border-primary) } 

/********************************************************
■ MAIN WEIGHT TASK VERSION CSS
********************************************************/
.mong-task { cursor:move; background-color:var(--color-widget-box-primary); border-radius:4px; width:100%; box-shadow:var(--color-widget-box-shadow); margin-bottom:1rem; } 
.mong-task:hover { box-shadow:var(--color-widget-box-shadow); border-color:var(--mong-task-border-primary)!important } 
.mong-task-title { border-radius:100px; padding:2px 13px 0 13px; font-size:1rem; font-weight:700; letter-spacing:0; vertical-align: top } 
.mong-task-title-bg { color:var(--color-widget-title-text-primary); background-color:var(--color-widget-title-bg-primary) } 
.mong-task-grids { width:100%; display:flex; align-items:center; justify-content:space-between } 
.mong-task-more { position:absolute; right:5px; margin-top:5px; color:var(--mong-task-more-icon-primary); background:0 0; border:0; transition:all .5s ease } 
.mong-task-more:hover { color:var(--mong-task-more-icon-hover-primary); background:0 0; border:0 } 
.mong-task-box { padding-top:15px } 
.mong-task-box ul li { color: var(--color-ui-text-primary ) } 
.mong-task-box ul li span { color: var(--color-ui-text-primary ) } 
.mong-task-outlogin-box { padding:15px; background-color:var(--color-widget-box-primary) } 
#sns_outlogin .sns-icon { width:calc(50% - 10px) } 
.mong-task .login-sns { padding: 0.7em 0.5em; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; transition: all 0.2s ease-in-out; border-radius: 3px; }
.mong-task .login-sns:hover { box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px; } 
.sns-join {} 
.sns-join .login-sns { margin: 0.5em 0em 0em !important; } 
.mong-task .login-sns .sns-wrap { margin:0.05em -0.25em !important; !important; } 
.mong-task.mong-task-gap { padding:1em } 
.member-join-grid-gap { padding-top:3px; }
#sns_outlogin .sns-icon { overflow: hidden; margin: 0 3px } 
#sns_outlogin .sns-icon { border-radius:2px; border:1px solid rgba(0,0,0,0.1); background-position:center } 
.sns-wrap-over .sns-naver { background-color:#1ec800 !important } 
.sns-wrap-over .sns-kakao { background-color:#ffeb00 !important } 
.sns-wrap-over .sns-facebook { background-color:#3b579d !important } 
.sns-wrap-over .sns-google { background-color:#db4a3a !important } 
.sns-wrap-over .sns-twitter { background-color:#1da1f2 !important } 
.sns-wrap-over .sns-payco { background-color:#df0b00 !important }

/********************************************************
■ MAIN WEIGHT LINE VERSION CSS
********************************************************/
.card-line-widget-box { cursor:move; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; position:relative; flex-direction:column; justify-content:space-between; border-radius:4px; background-color:var(--color-widget-box-primary); box-sizing:border-box; position:relative; box-shadow:var(--color-widget-box-shadow) } 
.card-line-widget-box:after { position:absolute; content:""; width:2px; height:22px; border-radius:2px; left:-2px; top:18px } 
.card-line-widget-box .m-title { color:var(--color-widget-side-menu-title-text-primary); font-weight:700; padding:15px 0 0 15px } 
.card-line-widget-box .more-icon { color: var(--color-ui-text-primary); padding:0 6px; position:absolute; top:13px; right:13px; border-radius:50%; background:var(--color-widget-box-primary); box-shadow:0px 2px 2px 0px rgb(0 0 0 / 20%) } 
.card-line-widget-box ul li span { color: var(--color-ui-text-primary-1) } 
.card-line-widget-box .m-list-box { padding: 15px } 
.card-line-widget-box:nth-of-type(1):after { background:#ff442b } 
.card-line-widget-box:nth-of-type(2):after { background:#54c2ff } 
.card-line-widget-box:nth-of-type(3):after { background:#40de8a } 
.card-line-widget-box:nth-of-type(4):after { background:#ff9816 } 
.card-line-widget-box:nth-of-type(5):after { background:#e91e63 } 
.card-line-widget-box:nth-of-type(6):after { background:#9c27b0 } 
.card-line-widget-box:nth-of-type(7):after { background:#00bcd4 } 
.card-line-widget-box:nth-of-type(8):after { background:#ab47bc } 
.card-line-widget-box:nth-of-type(9):after { background:#e040fb } 
.card-line-widget-box:nth-of-type(10):after { background:#7c4dff } 
.card-line-widget-box:nth-of-type(11):after { background:#00bcd4 } 
.card-line-widget-box:nth-of-type(12):after { background:#009688 } 
.card-line-widget-box:nth-of-type(13):after { background:#8bc34a } 
.card-line-widget-box:nth-of-type(14):after { background:#cddc39 } 
.card-line-widget-box:nth-of-type(15):after { background:#ff9800 } 

/********************************************************
■ 페이지 타이틀
********************************************************/
#nt_title { position:relative; overflow:hidden; padding:0 15px 0 15px; border-radius:4px; background:var(--color-widget-box-primary); box-shadow:var(--color-widget-box-shadow); -webkit-box-shadow:var(--color-widget-box-shadow); -moz-box-shadow:var(--color-widget-box-shadow) } 
#nt_title .nt-container { position:relative; z-index:2; height:46px } 
#nt_title .page-title { font-size:20px; font-weight:700; letter-spacing:-1px; line-height:1.4 } 
#nt_title .breadcrumb a { color:var(--color-page-title-text-primary) } 
#nt_title .breadcrumb-item+.breadcrumb-item::before { font-weight:400; color:#aaa; content:"›" } 
@media all and (max-width:991px){
 .responsive #nt_title .page-title { font-size:24px; letter-spacing:0 } 
 } 
@media all and (max-width:767px){
 .responsive #nt_title .page-title { font-size:22px } .responsive #nt_title .nt-container { height:46px } 
 } 
@media all and (max-width:575px){
 .responsive #nt_title .page-title { font-size:20px } .responsive #nt_title .nt-container { height:46px } 
 } 

/********************************************************
■ 인기검색어 CSS
********************************************************/
.keyword-box { border-radius:4px; padding:10px 15px 10px 15px; background:var(--color-widget-box-primary); box-shadow:var(--color-widget-box-shadow) } 
.keyword-gap { padding-top:4px; } 
@media (max-width:576px){
 .keyword-gap { padding-top:8px; } 
 } 

/********************************************************
■ TAB BOX CSS
********************************************************/
@media (max-width:576px){
 .tab-box { border-radius:4px; padding:15px; background:var(--color-widget-box-primary); box-shadow:var(--color-widget-box-shadow) } 
 } 
@media (min-width:768px){
 .tab-row-custom { display:flex; border-radius:4px; box-shadow:var(--color-widget-box-shadow) } 
 .tab-box-banner { border-radius:4px 0 0 8px; padding:15px 0px 15px 15px; background:var(--color-widget-box-primary) } 
 .tab-box { border-radius:0 4px 4px 0; padding:20px 15px 15px 15px; background:var(--color-widget-box-primary) } 
 }

/********************************************************
■ WIDGET-BOX TITLE STYLE CSS
********************************************************/
.mong-main-title { border-radius:4px; background:var(--color-widget-box-primary); box-shadow:var(--color-widget-box-shadow) } 
.carousel-inner { border-radius:4px; } 

/********************************************************
■ WIDGET-OWL 위치조정 STYLE
********************************************************/
.basic-banner .owl-nav { top:-3.6rem!important } 
.basic-banner .owl-nav button { width:1.5rem!important; height:1.4rem; line-height:1.4rem!important } 

/********************************************************
■ SIDEBAR CSS
********************************************************/
#nt_sidebar_header { height: 60px; background-color: var(--color-ui-header-bg-primary) } 
#nt_sidebar_header h3 { padding-top:15px; }
.sidebar-close { position:absolute; color:var(--color-white-primary)!important; top:10px; right:0px; } 
.close-button { display:block; width:40px; height:40px; overflow:hidden; transform:scale(.5) } 
.close-button&gt;div { position:relative } 
.close-button-block { width:40px; height:20px; position:relative; overflow:hidden } 
.close-button-block:after,.close-button-block:before { content:""; position:absolute; bottom:0; left:calc(55% - 4px); display:block; width:4px; height:25px; transform-origin:bottom center; background:#fff; transition:all ease-out 280ms } 
.close-button-block:last-of-type { transform:rotate(180deg) } 
.close-button .in .close-button-block:before { transition-delay:280ms; transform:translateX(20px) translateY(-20px) rotate(45deg) } 
.close-button .in .close-button-block:after { transition-delay:280ms; transform:translateX(-22px) translateY(-22px) rotate(-45deg) } 
.close-button .out { position:absolute; top:0; left:0 } 
.close-button .out .close-button-block:before { transform:translateX(-5px) translateY(5px) rotate(45deg) } 
.close-button .out .close-button-block:after { transform:translateX(5px) translateY(5px) rotate(-45deg) } 
.close-button:hover .in .close-button-block:before { transform:translateX(-5px) translateY(5px) rotate(45deg) } 
.close-button:hover .in .close-button-block:after { transform:translateX(5px) translateY(5px) rotate(-45deg) } 
.close-button:hover .out .close-button-block:before { transform:translateX(-20px) translateY(20px) rotate(45deg) } 
.close-button:hover .out .close-button-block:after { transform:translateX(20px) translateY(20px) rotate(-45deg) } 
@media (max-width: 767px){
 .sidebar-close { position:absolute; color:var(--color-white-primary)!important; top:10px; right:0px } 
 .password-grid-gap { width:32px } 
 .checkbox-grid-gap { padding-top:3px; } 
 .member-join-grid-gap { padding-top:5px; } 
 #sidebar-user-box { padding:10px 10px 0px 10px; } 
}
@media (max-width: 576px){
 .password-grid-gap { width:34px } 
}

/* 사이드 추가된 css */
.mo-nav { } 
.mo-nav ul { margin:0; padding:0; list-style:none; -ms-touch-action:pan-y; touch-action:pan-y } 
.mo-nav ul:after { clear:both; content: " "; display:block } 
.mo-nav ul li { display:table-cell; text-align:center; white-space:nowrap } 
.mo-nav ul li a { position: relative; font-size:14px; letter-spacing: -0.9px; display: inline-block } 
.mo-nav ul li:last-child a:after { background:none } 
.mong_menu_wrap.quick { border: 0; max-width: 1081px } 
.mong_menu_wrap.quick .mo-nav ul li { padding: 10px 0px 10px 10px } 
.mong_menu_wrap.quick .mo-nav ul li:last-child { padding-right:10px } 
.mong_menu_wrap.quick .mo-nav ul li a { color:var(--color-ui-text-primary); border-radius: 4px; background-color: var(--color-widget-box-primary); box-shadow: var(--color-widget-box-shadow); transition:.25s ease } 
.mong_menu_wrap.quick .mo-nav ul li a:hover { color:var(--color-ui-text-secondary-primary); } 
.mong_menu_wrap.quick .mong_menu_wrap-nav ul li a:after { content:none } 
.mong_menu_wrap.quick .mo-nav ul li a i { font-size: 20px } 
.mong_menu_wrap.quick .mo-nav ul li a p { border-top: 1px solid #9dafb9; text-align: center; padding-top: 10px } 
.sidebar_my_menu { display:flex; flex-grow:1; height:72px; max-width:370px; border-radius:4px; overflow:hidden; background-color:var(--color-widget-box-primary); box-shadow:var(--color-widget-box-shadow) } 
.my_menu_item { display:flex; flex-direction:column; justify-content:center; align-items:center; flex-grow:1; text-decoration:none } 
.my_menu_item:focus,.my_menu_item:hover { outline:0 } 
.my_menu_item:focus .m_icons,.my_menu_item:hover .m_icons { color:var(--color-ui-sidebar-text-primary-2) } 
.my_menu_item:focus .my_menu_item_label,.my_menu_item:hover .my_menu_item_label { color:var(--color-ui-sidebar-text-primary-2) } 
.m_icons { display:block; font-size:20px; color:var(--color-ui-sidebar-text-primary-1); transition:.25s ease } 
.my_menu_item_label { display:block; font-size:14px; color:var(--color-ui-sidebar-text-primary-1); transition:.25s ease }
.card_noti { position: relative; display: -ms-flexbox; display: flex;-ms-flex-direction: column; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0,0,0,.125); border-radius: 0.25rem; } 
.card_list { display:flex; align-items:center; flex-direction:row; border: none !important; margin:10px; padding:10px;; background:var(--color-widget-box-primary); box-shadow: var(--color-widget-box-shadow); } 
.card_list:last-child { margin-bottom:18px; } 
.card_list .member img { position:absolute; top:10px; width:40px; height:40px; border-radius:50% } 
.card_list a.card_cap { margin-left:50px } 
.card_list a { color:var(--color-ui-sidebar-text-primary-4)!important } 
.card_list span { color:#fff; background:var(--color-mobile-member-ux-card-bg-secondary-primary); border-radius:4px; padding:3px 8px } 
.sidebar_alarm_reaction_ui.buttons { padding:10px; margin:10px; border-radius:4px; background-color:var(--color-widget-box-primary); box-shadow:var(--color-widget-box-shadow) } 
.sidebar_alarm_reaction_ui.buttons:after { content:"."; display:block; height:0; clear:both; visibility:hidden } 
.sidebar_alarm_reaction_ui.buttons .button { float:left; border-radius:0; margin:0 } 
.sidebar_alarm_reaction_ui.button { cursor:pointer; display:inline-block; min-height:1em; outline:0; border:none; vertical-align:baseline; background-color:var(--color-ui-bg-primary-mix-200); color:var(--color-widget-title-text-primary); margin:0 .25em 0 0; padding:.78571em 1.5em; text-transform:none; text-shadow:none; font-weight:700; line-height:1; font-style:normal; text-align:center; text-decoration:none; background-image:none; border-radius:.2857rem; box-shadow:0 0 0 1px transparent inset,0 0 0 0 rgba(39,41,43,.15) inset; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-transition:opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease; transition:opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease; will-change:''; -webkit-tap-highlight-color:transparent } 
.sidebar_alarm_reaction_ui.buttons .button:first-child { width:49%; height:38px; border-radius:4px 0px 0px 4px } 
.sidebar_alarm_reaction_ui.buttons .button:last-child { width:49%; height:38px; border-radius:0px 4px 4px 0px } 
.sidebar_alarm_reaction_ui.positive.button,.sidebar_alarm_reaction_ui.positive.buttons .button { background-color:var(--color-ui-bg-primary-mix-200)!important; color:var(--color-widget-title-text-primary); text-shadow:none; background-image:none } 
.sidebar_alarm_reaction_ui.buttons .or { position:relative; float:left; width:.3em; height:2.57142em; z-index:3 } 
.sidebar_alarm_reaction_ui.buttons .or:before { position:absolute; text-align:center; border-radius:500rem; content:'OR'; top:50%; left:50%; background-color:var(--color-ui-sidebar-or-bg-primary); text-shadow:none; margin-top:-.892855em; margin-left:-.892855em; width:1.78571em; height:1.78571em; line-height:1.78571em; color:var(--color-ui-sidebar-or-text-primary); font-style:normal; font-weight:700; box-shadow:0 0 0 1px transparent inset } 
.sidebar_alarm_reaction_ui.button, .sidebar_alarm_reaction_ui.buttons .button, .sidebar_alarm_reaction_ui.buttons .or { font-size: 1rem } 
#sidebar-user { padding:15px; margin-top:10px; border-radius: 4px; background-color: var(--color-widget-box-primary); box-shadow: var(--color-widget-box-shadow) } 
#sidebar-user a { color:var(--color-ui-text-primary) } 
#sidebar-user p { color:var(--color-ui-text-primary) } 
#sidebar-user .lev { color: var(--color-ui-text-primary) } 
#sidebar-user-box { padding:0px 10px; margin-bottom:10px } 
.member-info { width: 100%; } 
.member-info .top-icons i { color: var(--color-ui-text-secondary-primary); float: right; padding-right: 0.8em; } 
.member-info .profile { margin-top: 2.2em; position: relative; } 
.member-info .profile:after { width: 100%; height: 1px; content: " "; display: block; margin-top: 1.3em; background: var(--color-ui-border-primary); } 
.member-info .profile .check { position: absolute; right: 5em; top: 4.8em; } 
.member-info .profile .check i { color: #fff; width: 26px; height: 26px; font-size: 18px; line-height: 26px; text-align: center; border-radius: 100%; background: linear-gradient(to bottom right, #c90A6D, #ff48A0); } 
.member-info .profile .thumbnail { width: 100px; height: 100px; display: flex; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; border-radius: 100%; box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px; } 
.member-info .profile .name { color: #2D354A; font-size: 20px; font-weight: 600; text-align: center; } 
.member-info .profile .nick { color: #7C8097; font-size: 1em; font-weight: 300; text-align: center; padding-top: 0.5em; padding-bottom: 0.7em; letter-spacing: 1.5px; text-transform: uppercase; } 
.member-info .profile .lev { color: #080911; font-size: 14px; font-weight: 300; text-align: center; margin-bottom: 0.3em; } 
.member-info .profile .btn { background: var(--color-login-button-primary); border-radius: 5px; font-size: 14px; padding: 11px 15px; font-weight: bold; width: 100%; cursor: pointer; transition: all 0.3s ease-in-out; text-align: center; color: #ffffff; box-shadow:var(--color-login-button-box-shadow-1); background-size: 200% auto; } 
.member-info .profile .btn:hover { background-position: right center; box-shadow:var(--color-login-button-box-shadow-2); } 
.member-info .profile .btn span { color: var(--color-ui-sidebar-text-primary-3) !important; } 
.member-info .my-menu-icons { display: flex; margin-top: 1.2em; justify-content: space-between; } 
.member-info .my-menu-icons .icon { display: flex; align-items: center; flex-direction: column; } 
.member-info .my-menu-icons .icon h4 { color: var(--color-ui-sidebar-text-primary-1); font-size: 1em; margin-top: 1.3em; margin-bottom: 0.2em; } 
.member-info .my-menu-icons .icon p { color: #666B7D; font-size: 12px; } 

/********************************************************
■ 오토로그인 CHECKBOX UI/UX CSS
********************************************************/
.auto-login-toggle-button-cover { display:table-cell; position:relative; box-sizing:border-box } 
.auto-login-button-cover,.knobs,.layer { position:absolute; top:0; right:0; bottom:0; left:0 } 
.auto-login-button { position:relative; width:60px; height:26px; overflow:hidden } 
.auto-login-button.r,.auto-login-button.r .layer { border-radius:100px; background:var(--color-auto-login-layer-primary) } 
.auto-login-button.b2 { border-radius:2px } 
.checkbox { position:relative; width:100%; height:100%; padding:0; margin:0; opacity:0; cursor:pointer; z-index:3 } 
.knobs { z-index:2 } 
.layer { width:100%; background-color:var(--color-auto-login-layer-primary); transition:.3s ease all; z-index:1 } 
.auto-login-button { overflow:visible } 
.auto-login-button .knobs:before { content:"YES"; position:absolute; top:.3em; left:.3em; width:2em; height:2em; line-height:2.2em!important; color:var(--color-widget-text-primary); font-size:.7em; font-weight:700; text-align:center; background-color:var(--color-auto-login-background-primary-1); border-radius:50% } 
.auto-login-button .knobs,.auto-login-button .knobs:before,.auto-login-button .layer { transform:rotateZ(0); transition:.4s cubic-bezier(.18, .89, .35, 1.15) all } 
.auto-login-button .checkbox:checked+.knobs { transform:rotateZ(-180deg) } 
.auto-login-button .checkbox:checked+.knobs:before { content:"NO"; color:var(--color-widget-text-primary); background-color:var(--color-auto-login-background-primary-2); transform:rotateZ(180deg) } 

/********************************************************
■ MONG SIDE MENU ---- VERSION-1 CSS
********************************************************/
.mong-side-menu { cursor:move; list-style:none; padding:0; margin:0; background:var(--color-widget-box-primary); border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; box-shadow:var(--color-widget-box-shadow) } 
.mong-side-menu li { position:relative } 
.mong-side-menu li a { display:block; text-decoration:none; padding:12px 20px; color:var(--color-widget-side-menu-title-text-primary) !important; text-align:left; height:50px; position:relative; border-bottom:1px solid var(--color-border-secondary-primary) } 
.mong-side-menu li a i { float:left; font-size:20px; margin:3px 10px 0 0 } 
.mong-side-menu li a p { float:left; margin:0 } 
.mong-side-menu li a strong { display:block; text-transform:uppercase } 
.mong-side-menu li a small { display:block; font-size:10px } 
.mong-side-menu li a i,.mong-side-menu li a small,.mong-side-menu li a strong { position:relative; transition:all .3s linear; -o-transition:all .3s linear; -ms-transition:all .3s linear; -moz-transition:all .3s linear; -webkit-transition:all .3s linear } 
.mong-side-menu li:hover&gt;a i { opacity:1; -webkit-animation:moveFromTop .3s ease-in-out; -moz-animation:moveFromTop .3s ease-in-out; -ms-animation:moveFromTop 300ms ease-in-out; -o-animation:moveFromTop .3s ease-in-out; animation:moveFromTop .3s ease-in-out } 
.mong-side-menu li:hover a strong { opacity:1; -webkit-animation:moveFromLeft .3s ease-in-out; -moz-animation:moveFromLeft .3s ease-in-out; -ms-animation:moveFromLeft 300ms ease-in-out; -o-animation:moveFromLeft .3s ease-in-out; animation:moveFromLeft .3s ease-in-out } 
.mong-side-menu li:hover a small { opacity:1; -webkit-animation:moveFromRight .3s ease-in-out; -moz-animation:moveFromRight .3s ease-in-out; -ms-animation:moveFromRight 300ms ease-in-out; -o-animation:moveFromRight .3s ease-in-out; animation:moveFromRight .3s ease-in-out } 
.mong-side-menu li:hover&gt;a { color:var(--color-text-hover-primary) } 
.mong-side-menu .me-li1.active { position:relative; color:var(--color-ui-white-primary)!important; border:0; border-radius:4px; border-left:4px solid var(--color-ui-active-bg-primary); border-right:4px solid var(--color-ui-active-bg-primary); margin:0 -4px; background: var(--color-ui-bg-primary-mix-400) } 
.mong-side-menu .me-li1.active:before { content:""; position:absolute; top:42%; left:0; border-left:5px solid var(--color-ui-active-bg-primary); border-top:5px solid transparent; border-bottom:5px solid transparent } 
.mong-side-menu .me-li1.active:after { content:""; position:absolute; top:42%; right:0; border-right:5px solid var(--color-ui-active-bg-primary); border-top:5px solid transparent; border-bottom:5px solid transparent } 
@-webkit-keyframes moveFromTop { 
 from { opacity:0; -webkit-transform:translateY(200%); -moz-transform:translateY(200%); -ms-transform:translateY(200%); -o-transform:translateY(200%); transform:translateY(200%) } 
 to { opacity:1; -webkit-transform:translateY(0); -moz-transform:translateY(0); -ms-transform:translateY(0); -o-transform:translateY(0); transform:translateY(0) } 
 } 
@-webkit-keyframes moveFromLeft { 
 from { opacity:0; -webkit-transform:translateX(200%); -moz-transform:translateX(200%); -ms-transform:translateX(200%); -o-transform:translateX(200%); transform:translateX(200%) } 
 to { opacity:1; -webkit-transform:translateX(0); -moz-transform:translateX(0); -ms-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0) } 
 } 
@-webkit-keyframes moveFromRight { 
 from { opacity:0; -webkit-transform:translateX(-200%); -moz-transform:translateX(-200%); -ms-transform:translateX(-200%); -o-transform:translateX(-200%); transform:translateX(-200%) } 
 to { opacity:1; -webkit-transform:translateX(0); -moz-transform:translateX(0); -ms-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0) } 
 } 
.mong-side-menu li ul { height:auto; padding:0; margin:0; background:#fff; transition:all .3s linear; -o-transition:all .3s linear; -ms-transition:all .3s linear; -moz-transition:all .3s linear; -webkit-transition:all .3s linear; z-index:1000; left:280px; top:0; border-left:4px solid var(--color-widget-side-border-primary) } 
.mong-side-menu li ul.on { height:auto; padding:0; margin:0; background:#fff; transition:all .3s linear; -o-transition:all .3s linear; -ms-transition:all .3s linear; -moz-transition:all .3s linear; -webkit-transition:all .3s linear; z-index:1000; left:280px; top:0; border-left:none !important } 
.mong-side-menu li ul li:hover&gt;ul,.mong-side-menu li:hover&gt;ul { display:block; visibility:visible; left:250px } 
.mong-side-menu li ul li a { color:var(--color-ui-text-primary) !important; padding:10px; text-align:left; border:0; border-bottom:1px solid var(--color-border-secondary-primary); height:auto; background-color:var(--color-widget-box-secondary-primary) } 
.mong-side-menu li ul li a:hover { color:var(--color-ui-text-secondary-primary) !important; } 
.mong-side-menu li ul li a.me-a1.active { color:var(--color-ui-active-bg-secondary-primary) !important; font-weight:bold } 
.mong-side-menu li ul li.active { border-left:4px solid var(--color-ui-bg-primary-800) } 
.mong-side-menu li ul li a i { font-size:16px; display:inline-block; padding-left:7px; margin:5px 10px 0 0 } 
.category-menu-end { height:48px; border-radius:0px 0px 4px 4px; background:var(--color-widget-box-primary) } 

/********************************************************
■ MONG SIDE MENU ---- VERSION-2 CSS
********************************************************/
.mong-side-nav { cursor:move; list-style:none; padding:0; margin:0; background:var(--color-widget-box-primary); border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; box-shadow:var(--color-widget-box-shadow) } 
.mong-side-nav li { position:relative } 
.mong-side-nav li a { display:block; text-decoration:none; padding:12px 20px; color:var(--color-widget-side-menu-title-text-primary-1) !important; text-align:left; height:50px; position:relative } 
.mong-side-nav li a i { float:left; font-size:20px; margin:3px 10px 0 0 } 
.mong-side-nav li a p { float:left; margin:0 } 
.mong-side-nav li a strong { display:block; text-transform:uppercase } 
.mong-side-nav li a small { display:block; font-size:10px } 
.mong-side-nav li a i,.mong-side-menu li a small,.mong-side-menu li a strong { position:relative; transition:all .3s linear; -o-transition:all .3s linear; -ms-transition:all .3s linear; -moz-transition:all .3s linear; -webkit-transition:all .3s linear } 
.mong-side-nav li:hover&gt;a i { opacity:1; -webkit-animation:moveFromTop .3s ease-in-out; -moz-animation:moveFromTop .3s ease-in-out; -ms-animation:moveFromTop 300ms ease-in-out; -o-animation:moveFromTop .3s ease-in-out; animation:moveFromTop .3s ease-in-out } 
.mong-side-nav li:hover a strong { opacity:1; -webkit-animation:moveFromLeft .3s ease-in-out; -moz-animation:moveFromLeft .3s ease-in-out; -ms-animation:moveFromLeft 300ms ease-in-out; -o-animation:moveFromLeft .3s ease-in-out; animation:moveFromLeft .3s ease-in-out } 
.mong-side-nav li:hover a small { opacity:1; -webkit-animation:moveFromRight .3s ease-in-out; -moz-animation:moveFromRight .3s ease-in-out; -ms-animation:moveFromRight 300ms ease-in-out; -o-animation:moveFromRight .3s ease-in-out; animation:moveFromRight .3s ease-in-out } 
.mong-side-nav .list-box { background:var(--color-bg-primary); } 
.mong-side-nav li:hover&gt;a { color:var(--color-white-primary) } 
.mong-side-nav li ul li:hover&gt;a { color:var(--color-bg-primary) } 
.mong-side-nav .me-li1.active { position:relative; color:var(--color-white-primary); border:0; border-radius:4px; box-shadow:0 0 5px var(--color-border-primary); -moz-box-shadow:0 0 5px var(--color-border-primary); -webkit-box-shadow:0 0 5px var(--color-border-primary); border-left:4px solid var(--color-bg-primary); border-right:4px solid var(--color-bg-primary); margin:0 -4px; background: var(--color-active-primary-1); } 
.mong-side-nav .me-li1.active:before { content:""; position:absolute; top:42%; left:0; border-left:5px solid var(--color-bg-primary); border-top:5px solid transparent; border-bottom:5px solid transparent } 
.mong-side-nav .me-li1.active:after { content:""; position:absolute; top:42%; right:0; border-right:5px solid var(--color-bg-primary); border-top:5px solid transparent; border-bottom:5px solid transparent } 
@-webkit-keyframes moveFromTop { 
 from { opacity:0; -webkit-transform:translateY(200%); -moz-transform:translateY(200%); -ms-transform:translateY(200%); -o-transform:translateY(200%); transform:translateY(200%) } 
 to { opacity:1; -webkit-transform:translateY(0); -moz-transform:translateY(0); -ms-transform:translateY(0); -o-transform:translateY(0); transform:translateY(0) } 
 } 
@-webkit-keyframes moveFromLeft { 
 from { opacity:0; -webkit-transform:translateX(200%); -moz-transform:translateX(200%); -ms-transform:translateX(200%); -o-transform:translateX(200%); transform:translateX(200%) } 
 to { opacity:1; -webkit-transform:translateX(0); -moz-transform:translateX(0); -ms-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0) } 
 } 
@-webkit-keyframes moveFromRight { 
 from { opacity:0; -webkit-transform:translateX(-200%); -moz-transform:translateX(-200%); -ms-transform:translateX(-200%); -o-transform:translateX(-200%); transform:translateX(-200%) } 
 to { opacity:1; -webkit-transform:translateX(0); -moz-transform:translateX(0); -ms-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0) } 
 } 
.mong-side-nav li ul { height:auto; padding:0; margin:0; background:var(--color-white-primary); transition:all .3s linear; -o-transition:all .3s linear; -ms-transition:all .3s linear; -moz-transition:all .3s linear; -webkit-transition:all .3s linear; z-index:1000; left:280px; top:0; border-left:4px solid var(--color-bg-border-secondary-primary); border-right:4px solid var(--color-bg-border-secondary-primary) } 
.mong-side-nav li ul.on { height:auto; padding:0; margin:0; background:var(--color-white-primary); transition:all .3s linear; -o-transition:all .3s linear; -ms-transition:all .3s linear; -moz-transition:all .3s linear; -webkit-transition:all .3s linear; z-index:1000; left:280px; top:0; border-left:none !important } 
.mong-side-nav li ul li:hover&gt;ul,.mong-side-menu li:hover&gt;ul { display:block; visibility:visible; left:250px } 
.mong-side-nav li ul li a { color:var(--color-ui-text-primary) !important; padding:10px 0px 10px 30px; text-align:left; border:0; border-bottom:1px solid var(--color-border-secondary-primary); height:auto } 
.mong-side-nav li ul li a:hover { color:var(--color-ui-text-secondary-primary) !important; } 
.mong-side-nav li ul li a.me-a1.active { color: var(--color-active-text-primary) !important; font-weight:bold } 
.mong-side-nav li ul li.active { border-left:4px solid var(--color-active-secondary-primary) } 
.mong-side-nav li ul li a i { font-size:16px; display:inline-block; padding-left:7px; margin:5px 10px 0 0 } 
.mong-side-nav .na-icon { position:relative; top:-1px; display:inline-block; padding:0; margin:0; color:var(--color-white-primary); overflow:hidden; vertical-align:middle; background-repeat:no-repeat; background-position:left top; width:12px; height:12px; margin-left:18px; margin-top:10px } 
.menu-last-border { border-radius: 0px 0px 4px 4px; height:4px; background:var(--color-bg-border-secondary-primary) !important } 
.category-box { text-align:center; border-radius: 4px 4px 0px 0px; height:70px; background: var(--color-bg-primary) } 
.category-menu { position:relative; display:inline-block; color:var(--color-ui-white-primary); font-size:16px; width:140px; line-height:30px; border-radius:24px; margin-top:15px } 
.category-menu-action { border:6px solid var(--color-ui-white-primary); box-shadow:0 0 4px rgb(0 0 0 / 10%),0 2px 4px rgb(0 0 0 / 20%); background:linear-gradient(to right,var(--color-button-bg-primary-1) 50%,var(--color-button-bg-primary-2) 50%); color:var(--color-ui-white-primary); overflow:hidden } 
@media screen and (max-width: 960px){
 .category-box { text-align: center; height: 80px; border-radius: 4px 4px 0px 0px; background: var(--color-bg-primary); } 
 .category-menu { position:relative; display:inline-block; color:var(--color-ui-white-primary); font-size:16px; width:140px; line-height:30px; border-radius:24px; margin-top:20px; margin-bottom:15px } 
 .category-menu-action { border:6px solid var(--color-ui-white-primary); box-shadow:0 0 4px rgb(0 0 0 / 10%),0 2px 4px rgb(0 0 0 / 20%); background:linear-gradient(to right,var(--color-button-bg-primary-1) 50%,var(--color-button-bg-primary-2) 50%); color:var(--color-ui-white-primary); overflow:hidden } 
 }
  
/********************************************************
■ TABS MENU STYLE CAROUSEL CSS - 1
********************************************************/
.carousel-menu a { color:var(--color-widget-title-text-primary); padding: 6px 12px; border-radius: 40px; background: var(--color-ui-bg-primary-300); } 
.carousel-menu .active { color:var(--color-widget-title-text-primary); padding: 6px 12px; box-shadow: rgb(0 0 0 / 16%) 0px 3px 6px, rgb(0 0 0 / 23%) 0px 3px 6px; transition: all 0.2s, box-shadow 0.01s;cursor: pointer; background-image: var(--color-login-menu-button-primary);} 
.carousel-menu b { color:var(--color-widget-title-text-primary); } 

/********************************************************
■ SLICK TABS STYLE CSS -2
********************************************************/
.swipe-body-container { border-radius:4px; background:var(--color-widget-box-primary); box-shadow:var(--color-widget-box-shadow) } 
.swipe-tab-menu-box { border-radius: 4px 4px 0px 0px; background: var(--color-ui-bg-primary-800) } 
.swipe-tabs { border-radius: 4px 4px 0px 0px; background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 25%,rgba(255,255,255,.2) 75%,rgba(255,255,255,0) 100%); box-shadow:0 0 25px rgba(0,0,0,.1),inset 0 0 1px rgba(255,255,255,.6) } 
.slick-initialized .swipe-tab { display:flex; align-items:center; justify-content:center; height:50px; line-height:50px; background:0 0; border:0; cursor:pointer; text-align:center; transition:all .2s } 
.slick-initialized .swipe-tab a { color: var(--color-ui-slick-text-primary) } 
.slick-initialized .swipe-tab.active-tab { display:block; border-bottom: 4px solid var(--color-ui-white-primary); z-index:1; border-radius:4px 4px 0 0 } 
.slick-initialized .swipe-tab.active-tab a.active { color:#fff!important } 
.swipe-tab .slider .indicator { position:relative; margin:0auto; height:4px; } 
[ripple] { z-index: 1; position: relative; overflow: hidden; } 
[ripple] .ripple { position: absolute; background: #FFFFFF; width: 12px; height: 12px; border-radius: 100%; animation: ripple 1.6s; } 

@keyframes ripple { 
 0% { transform: scale(1); opacity: 0.2; } 
 100% { transform: scale(40); opacity: 0; } 
 }
.main-container { } 

/********************************************************
■ FOOTER CSS
********************************************************/
#nt_footer { color:var(--color-footer-text-primary); background:var(--color-widget-box-primary) } 
#nt_footer .nt-links ul &gt; li::after { color: #636C73 } 
.border-top { border-top: 1px solid var(--color-footer-border-primary) !important } 
.border-bottom { border-bottom: 1px solid var(--color-footer-border-primary) !important } 
@media (max-width: 767px){
 #nt_footer { padding-bottom:60px; background:var(--color-widget-box-primary) } 
 }

/********************************************************
■ BOARD CSS
********************************************************/
.board-box { padding:15px; border-radius:4px; background:var(--color-widget-box-primary)!important; box-shadow:var(--color-widget-box-shadow) } 

/********************************************************
■ MAIN PC SIDE QUICK MENU CSS - PC에서만 실행
********************************************************/
@media screen and (min-width: 1200px){
.mong-menu-side-quick { position:absolute; top:128px; bottom:0; margin-left:1363px; background:linear-gradient(135deg,var(--color-search-gradient-primary-1),var(--color-search-gradient-primary-2)); width:50px; border-radius:30px; height:calc(100vh - 27rem); box-shadow:var(--color-widget-box-shadow); z-index:1 } 
.mong-menu-side-quick-logo img { display:flex; align-items:center; justify-content:center; margin:5px; width:40px; height:40px; border-radius:50% } 
.mong-menu-side-quick-link { display:flex; align-items:center; justify-content:center; width:100%; height:50px; color:var(--color-widget-quick-text-primary) !important; font-size:20px } 
.mong-menu-side-quick-link::before { content:""; position:absolute; width:40px; height:40px; border-radius:50%; opacity:.3; background-color:var(--color-widget-quick-before-primary); -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s; transition:all .3s; -webkit-transform:scale(0); -moz-transform:scale(0); -ms-transform:scale(0); -o-transform:scale(0); transform:scale(0) } 
.mong-menu-side-quick-dark-button { display:flex; align-items:center; justify-content:center; width:100%; height:50px; color:#fff; font-size:24px; cursor:pointer } 
.mong-menu-side-quick-dark-button::before { content:""; position:absolute; width:40px; height:40px; border-radius:50%; opacity:.3; background-color:var(--color-widget-quick-before-primary); -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s; transition:all .3s; -webkit-transform:scale(0); -moz-transform:scale(0); -ms-transform:scale(0); -o-transform:scale(0); transform:scale(0) } 
.mong-menu-side-quick-link-top { position:absolute !important; left:0; bottom:45px } 
.mong-menu-side-quick-link-bottom { position:absolute !important; left:0; bottom:0 } 
.mong-menu-side-quick-link i { display:block; position:relative } 
.mong-menu-side-quick-link.mong-menu-side-quick-link-active,.mong-menu-side-quick-link:hover { color:var(--color-widget-quick-before-primary) } 
.mong-menu-side-quick-dark-button.mong-menu-side-quick-dark-button-active,.mong-menu-side-quick-dark-button:hover { color:var(--color-widget-quick-hover-text-primary) } 
.mong-menu-side-quick-link.mong-menu-side-quick-link-active::before,.mong-menu-side-quick-link:hover::before { -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1) } 
.mong-menu-side-quick-dark-button.mong-menu-side-quick-dark-button-active::before,.mong-menu-side-quick-dark-button:hover::before { -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1) } 
.side-noti-badge-new { position:absolute; display:inline-block; min-width:6px; height:18px; margin-top:-38px; right:7px; padding:0 6px; background-color:#1fd771; -webkit-border-radius:18px; border-radius:18px; font-size:10px; line-height:18px; color:#fff; font-weight:700; letter-spacing:0; -webkit-box-shadow:0 1px 1px 0 rgb(0 0 0 / 10%); box-shadow:0 1px 1px 0 rgb(0 0 0 / 10%); vertical-align:top } 
}
@media screen and (max-width: 1199px){.mong-menu-side-quick{display: none !important}}

/********************************************************
■ TABLET PC FOOTER QUICK MENU CSS - 타블렛에서만 실행
********************************************************/
@media screen and (max-width:1199px) {
.nav_tablet { overflow: hidden; position: fixed; left: 50%; width: auto; height: 46px; bottom: 20px; border-radius: 4px; transform: translate3d(-50%, 0, 0); background-image:var(--color-login-button-primary); transition: all 0.3s ease-in-out; box-shadow:var(--color-login-button-box-shadow-1); background-size: 200% auto; background-color:var(--color-login-button-primary)!important; z-index: 9; } 
.nav_tablet:hover { background-position: right center; box-shadow:var(--color-login-button-box-shadow-2) } 
.nav__cb { z-index: -1000; position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; } 
.nav__content { position: relative; width: 46px; height: 100%; transition: width 1s cubic-bezier(0.49, -0.3, 0.68, 1.23); } 
.nav__cb:checked ~ .nav__content { transition: width 1s cubic-bezier(0.48, 0.43, 0.29, 1.3); width: 410px; } 
.nav__items a { color:var(--color-ui-mo-text-primary); } 
.nav__items { position: relative; width: 510px; height: 100%; padding-right: 110px; list-style-type: none; font-size: 0; } 
.nav__item { display: inline-block; vertical-align: top; width: 70px; text-align: center; color: var(--color-ui-mo-text-primary); font-size: 14px; line-height: 46px; font-weight: bold; perspective: 1000px; transition: color 0.3s; cursor: pointer; } 
.nav__item:hover { color: #00bdea; } 
.nav__item-text { display: block; height: 100%; transform: rotateY(-70deg); opacity: 0; transition: transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5), opacity 0.7s; } 
.nav__cb:checked ~ .nav__content .nav__item-text { transform: rotateY(0); opacity: 1; transition: transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5), opacity 0.2s; } 
.nav__item:nth-child(1) .nav__item-text { transition-delay: 0.3s; } 
.nav__cb:checked ~ .nav__content .nav__item:nth-child(1) .nav__item-text { transition-delay: 0s; } 
.nav__item:nth-child(2) .nav__item-text { transition-delay: 0.2s; } 
.nav__cb:checked ~ .nav__content .nav__item:nth-child(2) .nav__item-text { transition-delay: 0.1s; } 
.nav__item:nth-child(3) .nav__item-text { transition-delay: 0.1s; } 
.nav__cb:checked ~ .nav__content .nav__item:nth-child(3) .nav__item-text { transition-delay: 0.2s; } 
.nav__item:nth-child(4) .nav__item-text { transition-delay: 0s; } 
.nav__cb:checked ~ .nav__content .nav__item:nth-child(4) .nav__item-text { transition-delay: 0.3s; } 
.nav__btn { position: absolute; right: 0; top: 0; width: 46px; height: 46px; padding: 15px 33px 15px; cursor: pointer; } 
.nav__btn:before, .nav__btn:after { content: ""; display: block; width: 20px; height: 4px; border-radius: 2px; background: var(--color-ui-mo-text-primary); transform-origin: 50% 50%; transition: transform 1s cubic-bezier(0.48, 0.43, 0.29, 1.3), background-color 0.3s; } 
.nav__btn:before { margin-bottom: 10px; } 
.nav__btn:hover:before, .nav__btn:hover:after { background: #00bdea; } 
.nav__cb:checked ~ .nav__btn:before { transform: translateY(7px) rotate(-225deg); } 
.nav__cb:checked ~ .nav__btn:after { transform: translateY(-7px) rotate(225deg); }
}
@media screen and (min-width:1200px) {.nav_tablet{display: none;}}

/********************************************************
■ MOBILE FOOTER QUICK MENU CSS - 모바일에서만 실행
********************************************************/
.flex_row{display:flex;align-items:center}
#mong-footer-quick.scroll-down{animation:footer-scroll-down .5s ease-in-out;bottom:-96px}
#mong-footer-quick.scroll-up{animation:footer-scroll-up .5s ease-in-out;bottom:0}
@keyframes footer-scroll-down{from{bottom:0}to{bottom:-96px}}
@keyframes footer-scroll-up{from{bottom:-96px}to{bottom:0}}
#mong-footer-quick{z-index:99;width:100%;position:fixed;bottom:0}
@media (min-width: 767px){#mong-footer-quick{display:none;}}
#mong-footer-quick&gt;div{position:relative;z-index:0}
#mong-footer-quick .footer_menu{height:50px;background-color:rgba(86,87,93,.7);border-top:1px solid #43454d;z-index:1;position:absolute;bottom:0;left:0;width:100%}
#mong-footer-quick .footer_menu&gt;a{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;font-size:14px;letter-spacing:-.1em}
#mong-footer-quick .footer_menu img{margin-bottom:3px}
#mong-footer-quick .wheel_btn{width:66px;height:66px;border-radius:50px;background:#fbbe3c;position:absolute;left:50%;margin-left:-33px;bottom:18px;border:3px solid #fff;filter:drop-shadow(0px 0px 5px rgba(0, 0, 0, .2));z-index:2}
#mong-footer-quick .wheel_btn&gt;img{width:35px;animation:ani-wheel-btn 4s ease-in infinite}
@keyframes ani-wheel-btn{0%{width:45px}55%{opacity:1;width:45px}60%{opacity:.5;width:12px}70%{opacity:1;width:49px}75%{width:45px}100%{width:45px}}
#mong-footer-quick .wheel_btn span img{left:50%;margin-left:-4px}
#mong-footer-quick .wheel_btn&gt;span img{width:56px;border-radius:50px;animation:member_ani-wheel-btn 4s ease-in infinite}
#mong_wheel_menu{position:absolute;width:110vw;height:110vw;border-radius:50%;bottom:calc(-50vw + 45px);left:-5vw;background-color:var(--color-widget-box-primary);align-items:center;justify-content:center;filter:drop-shadow(0px 4px 6px rgba(0, 0, 0, .3));display:none}
#mong_wheel_menu.open_wheel{animation:openWheel .1s cubic-bezier(.39,.575,.565,1) both;-webkit-animation:openWheel .1s cubic-bezier(.39,.575,.565,1) both}
#mong_wheel_menu.close_wheel{animation:closeWheel .1s cubic-bezier(.39,.575,.565,1) both;-webkit-animation:closeWheel .1s cubic-bezier(.39,.575,.565,1) both}
@-webkit-keyframes openWheel{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}}
@keyframes openWheel{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}}
@-webkit-keyframes closeWheel{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}100%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}}
@keyframes closeWheel{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}100%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}}
#mong_wheel_menu:after{content:'';width:50vw;height:50vw;background-color:var(--color-ui-bg-primary-30);border-radius:50%}
#mong_wheel_menu .wheel_menu_wrap{position:absolute;width:80%;height:100%;border-radius:100%;display:flex;align-items:center;justify-content:space-between;padding:0 15px}
#mong_wheel_menu .wheel_menu_wrap i{font-size:20px}
#mong_wheel_menu .wheel_menu_wrap&gt;a{text-align:center;font-size:14px;letter-spacing:-.1em;color:var(--color-ui-text-primary);padding:8px}
#mong_wheel_menu .wheel_menu_wrap&gt;a&gt;p{margin-top:0}
#mong_wheel_menu .wheel_menu_wrap&gt;a:nth-of-type(2),
#mong_wheel_menu .wheel_menu_wrap&gt;a:nth-of-type(4){margin-top:-75%}
#mong_wheel_menu .wheel_menu_wrap&gt;a:nth-of-type(1),
#mong_wheel_menu .wheel_menu_wrap&gt;a:nth-of-type(5){margin-top:-25%}
#mong_wheel_menu .wheel_menu_wrap&gt;a:nth-of-type(3){margin-top:-90%}
#mong_wheel_menu .wheel_menu_wrap&gt;a:nth-of-type(2){margin-left:-40px}
#mong_wheel_menu .wheel_menu_wrap&gt;a:nth-of-type(4){margin-right:-40px}
#mong_wheel_menu .wheel_menu_wrap&gt;a:nth-of-type(1){margin-left:-10px}
#mong_wheel_menu .wheel_menu_wrap&gt;a:nth-of-type(5){margin-right:-10px}

/********************************************************
■ TOOLTIP CSS
********************************************************/
[data-tooltip] { position: relative; } 
[data-tooltip]:before,
[data-tooltip]:after { position: absolute; visibility: hidden; opacity: 0; left: 50%; bottom: calc(100% + 5px); pointer-events: none; transition: 0.2s; will-change: transform; } 
[data-tooltip]:before { content: attr(data-tooltip); padding: 10px 18px; min-width: 50px; max-width: 300px; width: max-content; width: -moz-max-content; border-radius: 3px; font-size: 12px; background-color: #3c4049; background-image: linear-gradient(30deg,
 rgba(59, 72, 80, 0.44),
 rgba(59, 68, 75, 0.44),
 rgba(60, 82, 88, 0.44)); box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; color: #fff; text-align: center; white-space: pre-wrap; transform: translate(-50%, -5px) scale(0.5); } 
[data-tooltip]:after { content: ''; border-style: solid; border-width: 5px 5px 0px 5px; border-color: #3c4049 transparent transparent transparent; transition-duration: 0s; transform-origin: top; transform: translateX(-50%) scaleY(0); } 
[data-tooltip]:hover:before,
[data-tooltip]:hover:after { visibility: visible; opacity: 1; } 
[data-tooltip]:hover:before { transition-delay: 0.3s; transform: translate(-50%, -5px) scale(1); } 
[data-tooltip]:hover:after { transition-delay: 0.5s; transition-duration: 0.2s; transform: translateX(-50%) scaleY(1); } 

[data-tooltip-location="left"]:before,
[data-tooltip-location="left"]:after { left: auto; right: calc(100% + 5px); bottom: 50%; } 

[data-tooltip-location="left"]:before { transform: translate(-5px, 50%) scale(0.5); } 
[data-tooltip-location="left"]:hover:before { transform: translate(-5px, 50%) scale(1); } 

[data-tooltip-location="left"]:after { border-width: 5px 0px 5px 5px; border-color: transparent transparent transparent rgba(55, 64, 70, 0.9); transform-origin: left; transform: translateY(50%) scaleX(0); } 
[data-tooltip-location="left"]:hover:after { transform: translateY(50%) scaleX(1); } 

[data-tooltip-location="right"]:before,
[data-tooltip-location="right"]:after { left: calc(100% + 5px); bottom: 50%; } 

[data-tooltip-location="right"]:before { transform: translate(5px, 50%) scale(0.5); } 
[data-tooltip-location="right"]:hover:before { transform: translate(5px, 50%) scale(1); } 

[data-tooltip-location="right"]:after { border-width: 5px 5px 5px 0px; border-color: transparent rgba(55, 64, 70, 0.9) transparent transparent; transform-origin: right; transform: translateY(50%) scaleX(0); } 
[data-tooltip-location="right"]:hover:after { transform: translateY(50%) scaleX(1); } 

[data-tooltip-location="bottom"]:before,
[data-tooltip-location="bottom"]:after { top: calc(100% + 5px); bottom: auto; } 

[data-tooltip-location="bottom"]:before { transform: translate(-50%, 5px) scale(0.5); } 
[data-tooltip-location="bottom"]:hover:before { transform: translate(-50%, 5px) scale(1); } 

[data-tooltip-location="bottom"]:after { border-width: 0px 5px 5px 5px; border-color: transparent transparent #3c4049 transparent; transform-origin: bottom; }

.list-group-item+.list-group-item { color:var(--color-page-title-text-primary)!important }

.sortableLists li i { color:var(--color-ui-white-primary)!important }

.sortableLists li .txt { color:var(--color-ui-text-primary)!important }

.board-box .m-auto a { color:var(--color-ui-text-primary)!important }

.board-box p { color:var(--color-ui-text-primary)!important }

#faq_wrap p a { color:var(--color-page-title-text-primary)!important }

.tbl_frm01 td { border-top: 1px solid var(--color-ui-border-primary) !important; border-bottom: 1px solid var(--color-ui-border-primary) !important; }

.list-group .list-group-item a { color:var(--color-page-title-text-primary)!important }

.list-group .list-group-item b { color:var(--color-page-title-text-primary)!important }</pre></body></html>