@charset 'UTF-8';

@import url("https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Noto+Sans+KR&family=Gothic+A1&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cabin&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Amiko&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Monoton&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Play:wght@400;700&display=swap');

@import url("https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" );

@import url("/static/bootstrap5.3.3/css/bootstrap.min.css" );
@import url("/static/css/fs_upload.css" );
@import url("/static/css/fs_upload_theme.css" );
@import url("/static/app_project/css/project.css" );
@import url("/static/app_qnaire/css/qnaire.css" );
@import url("/static/app_monitoring/css/monitoring.css" );
/* @import url("/static/app_table/css/table.css" ); */

html, body { font-family: Lato, 'Noto Sans KR'; font-size: 16px; margin: 0 !important; padding: 0 !important; }

textarea { resize: none; }
a { color: inherit; text-decoration: none; }
a:hover { color: gray; }
a.policy { color: var(--bs4-primary); text-decoration: underline; }
input::placeholder { font-size: small; color: gray; }
.partner-frame { width: 100%; min-height: 100vh; padding: 0; overflow: visible; }
.modal .modal-header { cursor: url('/static/img/move.png') 10 10, auto; }

:root {
  --dv-origin: #086da3; --dv-origin-hover: #065c8a;
  --dv-dark1: #343a40; --dv-dark2: #373f46; --dv-dark3: #575d64; /* 48525b -> 575d64 */
  --dv-pop1: #e6e6e6; --dv-pop2: #73808c;
  --dv-ipsos1: #0fafa9; --dv-ipsos2: #3948a4;
  --dv-hr1: #22262a; --dv-hr2: #454d54;
  --dv-btn-default1: #ced4da; --dv-btn-default2: #dfe3e8; 
  --dv-border: #dee2e6; --dv-card-border: #c9c9c9;
  --dv-read: #e9ecef; --dv-layer: #076597; --dv-top: #e6f2ff; --dv-mean: #fff3cd; /* read=e5e5e5*/
  --tab-layer: gray; --tab-header: #999999;
  --dv-light: #f2f2f2; --dv-light2: #f9f9f9;
  --bs4-primary: #007bff; --bs4-success: #28a745; --bs4-warning: #ffc107; --bs4-danger: #dc3545; 
  --bs4-info: #17a2b8; --bs4-dark: #343a40; --bs4-light: #f8f9fa;

  --dv-nh: #005bac;
  --dv-drop: #eef6f3;
}

.font-monoton { font-family: Monoton; }
.font-noto-sans-kr { font-family: 'Noto Sans KR'; }
.font-righteous-regular { font-family: "Righteous"; font-weight: 400; font-style: normal; }
.font-play { font-family: "Play", sans-serif; font-weight: 400; font-style: normal; }
.power-form { color: var(--dv-origin); text-shadow: 1px 1px darkgray; }
.free-survey { color: var(--dv-origin); text-shadow: 1px 1px darkgray; }

.f70 { font-size: 70%; }
.f85 { font-size: 85%; }
.f110 { font-size: 110%; }
.f125 { font-size: 125%; }
.f165 { font-size: 165%; }
.f-large { font-size: large; }

.text-origin { color: var(--dv-origin); }
.text-gray { color: gray !important; }
.text-darkgray { color: darkgray !important; }
.text-lightgray { color: lightgray !important; }

.py-12 { padding-top: 12px; padding-bottom: 12px; }
.bg-gray { background-color: gray; }
.bg-smoke { background-color: whitesmoke; }
.bg-origin { background-color: var(--dv-origin); }
.bg-bs4-dark { background-color: var(--bs4-dark); }
.bg-transparent { background-color: transparent; }

.w-sm { min-width: 100px; width: 100px; }
.w-md { min-width: 180px; width: 180px; }
.w-fixed-50 { width: 50px; }
.w-1024 { max-width: 1024px; }
.w-1024.monitoring { opacity: 0; }

.dv-bold { font-weight: bold; }
.dv-none { display: none !important; }
.dv-spinner-wrap { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; text-align: center; background-color: rgba(0,0,0,0.3); z-index: 99999; }
.dv-spinner-wrap .d-inline-flex { position: relative; top: 30%; color: white; opacity: 1 !important; }


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
DataView
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.dv-floating { position: relative; }
.dv-floating {
  .dv-title { position: absolute; top: -10px; left: 8px; font-family: "Nanum Gothic"; font-size: 13px; color: gray; padding: 0 4px; background-color: white; }
  .form-control { font-size: 15px; padding: 12px; }
}
.dv-nowrap { white-space: nowrap; }
.dv-input-underline { width: auto; border: none; border-bottom: 1px solid var(--dv-border); border-radius: 0; } 
.dv-collapse { transition: transform 0.2s; }
.dv-collapse.rotate { transform: rotate(45deg); }

.btn-default:hover { background-color: whitesmoke; }
[contentEditable]:empty:not(:focus):before { font-size: small; color: gray; content: attr(placeholder) }
div:empty:not(:focus):before { font-size: small; color: gray; content: attr(placeholder) }
.place-holder:empty:not(:focus):before { font-size: small; color: gray; content: attr(placeholder) }


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Upload
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.fs-upload.fs-light { background-color: white; }
.fs-upload.fs-light .fs-upload-target { border: 2px dashed rgba(13, 110, 253, 0.5); border-radius: 6px; }
.fs-upload.fs-light .fs-upload-target:hover { border: 2px dashed rgba(13, 110, 253, 1); background-color: rgba(13, 110, 253, 0.1); } /*rgba(4, 170, 109, 1)*/
.filelist { margin: 0; }
.filelist {
  >li { position: relative; font-size: small; background-color: white; margin: 5px 0; }
  >li { 
    >.content { position: relative; padding: 0 10px; overflow: hidden; z-index: 1; }
    >.content {
      >.file { float: left; color: white; width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-color: transparent; }
      >.progress { float: right; color: var(--bs4-warning); white-space: nowrap; background-color: transparent; }
    }
    .bar { 
      position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: rgba(13, 110, 253, 1); 
      z-index: 0; -webkit-transition: width 0.1s linear; transition: width 0.1s linear; 
    }
  }
}
.preview-wrap { background-color: var(--bs4-dark); overflow: hidden; }
.preview-image-size { font-size: small; color: var(--bs4-danger); text-align: center; }


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Intro
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.intro-campaign { color: white; text-align: center; background-color: var(--bs4-dark); } 
.intro-wrap { max-width: 1024px; padding: 0 16px; }
.intro { position: sticky; top: 0; background-color:rgba(255, 255, 255, 0.95); z-index: 1; }
.link:hover { color: var(--bs4-primary); }
.link2 { color: var(--bs4-primary); text-decoration: underline; }
.link2:hover { color: var(--bs4-primary); }
.alert-intro { font-size: 20px; text-align: center; }
.alert-intro>h1 { text-shadow: 1px 1px lightgray; }
.alert-intro>p { margin-bottom: 8px; }
.alert-intro>.alert-flow { width: 300px; margin: 0 auto; }
.intro-price { font-size: 16px; }
.btn-origin { color: white; background-color: var(--dv-origin); }
.btn-origin:hover { color: white; background-color: var(--dv-origin-hover); }



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Login
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.login-logo .login-img { height: 30px; }
.login-box { width: 400px; padding: 30px; margin: 0 auto; }
.login-box h1.spacing { letter-spacing: 15px; }
.login-title { text-shadow: 1px 1px darkgray; }
.login-copyright { width: 100%; font-size: small; text-align: center; padding: 15px 0; }

.pw-wrap { position: relative; }
.pw-wrap {
  & input[name="password"], #pwd1, #pwd2 { padding-right: 36px; }
  >.dv-pw { position: absolute; right: 0; font-size: 85%; color: darkgray; margin: -28px 12px 0 0; }
  >.dv-pw2 { position: absolute; right: 0; font-size: 85%; color: darkgray; margin: -24px 12px 0 0; }
}
input[name="agreement"] { transform: scale(1.5, 1.5); margin-top: 7px; margin-left: 2px; }

.pw-forget { display: block; text-align: right; margin-top: 3px; }
.btn-login { background-color: var(--dv-origin); }
.btn-login:hover { background-color: var(--dv-origin-hover); }
.pw-forget {
  >a { font-style: italic; }
  >a:hover { color: var(--bs4-primary); }
}
p.annotation { font-size: 85%; color: var(--dv-dark3); }
.input-group .check-device { color: darkgray; cursor: pointer; }
.input-group.active {
  >.check-device { color: var(--bs4-primary); font-weight: bold; }
  >.form-control { color: var(--bs4-primary); }
}
.captcha-refresh { font-size: 85%; color: var(--dv-dark3); background-color: white; }
.btn-send { white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; }
.btn-send.kakao>img { height: 24px; border-radius: 8px; }


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Account
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.container.account {
  .tab-content {
    .tab-pane.container { padding: 0; }

    .account-info .alert .d-flex { width: 600px; margin-left: auto; margin-right: auto; }
    .account-info .alert .d-flex {
      .user-label { width: 100px; }
      .btn-account { font-size: small; width: 160px; padding: 2px 0; } 
    }
  }

  .purchased-find {
    & * { font-size: small; }
    .find-sales { width: auto; }
    .find-word { width: 200px;}
  }
  .purchased-list { margin-bottom: 300px; }
  .purchased-list {
    & th, & td { vertical-align: middle; }
    >thead th { text-align: center; }
    >thead th, >tbody td { font-size: small; }
    >tbody td.center { text-align: center; }
    >tbody td.right { text-align: right; }

    .btn-buy-cancel { width: 100%; font-size: small; padding: 2px 0; }
    .btn-buy-receipt, .btn-download-data, .btn-download-table { width: 100%; font-size: small; padding: 2px 0; }
  }

  /* 문의사항 */
  .contactus-info { margin-bottom: 300px; } 
  .contactus-info {
    .contactus-find {
      & * { font-size: small; }
      .select-contactus { width: auto; }
      .find-word { width: 200px;}
    }

    .list-contactus {
      .contactus-mark { font-family: Arvo; font-size: 150%; color: darkgray; }
      .contactus-mark2 { font-family: Arvo; font-size: 16px; color: darkgray; background-color: white; padding: 2px 8px; border: 1px solid lightgray; border-radius: 50%; }
      .updated-at, .created-at { color: darkgray; }
      .list-group-item { border: 1px solid lightgray !important; border-radius: 8px; }
      .contactus-header .my-question { font-size: 14px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

      .contactus-body { height: 0; overflow-y: hidden; background-color: whitesmoke; }
      .contactus-body.active { height: auto; border-top: 1px solid lightgray; overflow-y: visible; }
        
      .dv-collapse { transition: transform 0.2s; }
      .dv-collapse.rotate { transform: rotate(180deg); }
    
      .my-question, .my-answer { font-size: 16px; }
      .my-download { color: var(--bs4-primary); text-decoration: underline; }
    }
  }
}

/* 한글(HWP) 변환 */
#hwpModal.modal {
  .modal-body .d-flex>span { width: 120px; font-size: 14px }
}

/* 페이징 */
.pagination {
  .page-link { color: darkgray; border: none; background-color: transparent; }
  .page-link:hover { font-weight: bold; color: var(--bs4-primary); }
  .page-link.active { font-weight: bold; color: var(--bs4-primary); }
  .page-link:focus, .page-link:active:focus, .page-link.active:focus, .page-link.focus, .page-link:active.focus, .page-link.active.focus { outline: none !important; box-shadow: none; }
}

/* 공지사항 */
.announcement {
  .find-word { display: inline-block; width: 200px; }
  .list-group-item { border: 1px solid lightgray !important; border-radius: 8px; }
  .notice-wrap:not(.active) { height: 0; overflow-y: hidden; }
  .notice-wrap.active { height: auto; border-top: 1px solid lightgray; }
  .notice-content { position: relative; }
  .notice-content.ql-editor { height: auto; }
  .notice-email-wrap { border-top: 1px solid lightgray; border-bottom: 1px solid lightgray; border-radius: 0 0 8px 8px; background-color: whitesmoke; }
    
  .dv-collapse { transition: transform 0.2s; }
  .dv-collapse.rotate { transform: rotate(180deg); }
}
#myNotice.modal {
  #noticeTitle { font-size: 15px; }
  #notice .ql-editor { font-size: 15px; min-height: 200px; max-height: 400px; }
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Menu
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.navbar { background-color: white; }
.navbar .container-fluid { padding: 0 20px; }
.navbar .container-fluid {
  .navbar-toggler { border: none; padding: 0; }
  .navbar-toggler:focus, .navbar-toggler:active:focus, .navbar-toggler.active:focus, .navbar-toggler.focus, .navbar-toggler:active.focus, .navbar-toggler.active.focus { outline: none !important; box-shadow: none; }
  .navbar-brand { min-width: 100px; margin-right: 30px; }
  .navbar-brand>img { height: 30px; }
  .navbar-text { position: absolute; font-size: 55%; letter-spacing: 3px; color: #666666; text-shadow: -1px -1px #e6e6e6; margin: 1.5px 0 0 35px; padding: 0; }
  .nav-item>.nav-link { padding: 18px 20px !important; }
  .nav-item>.nav-link:hover { color: white; background-color: var(--bs4-dark); }
  .dv-menu-clip { font-size: small; display: flex; }
  .dv-menu-clip .clip { white-space: nowrap; }
}
.navbar-mobile { position: fixed; left: 0; width: 100%; background-color: var(--bs4-dark); z-index: 999; }
.navbar-mobile.flex-column>ul.mobile:not(:first-child) { margin-top: 0; }
.navbar-mobile.flex-column>ul.mobile:not(:last-child) { margin-bottom: 0; }
.navbar-mobile {
  >ul.mobile { font-size: small; color: lightgray; list-style-type: none; margin: 15px 0; padding: 0; }
  >ul.mobile {
    >li>a { white-space: nowrap; padding: 5px 0 5px 30px; }
    >li>a:hover { color: white; }
  }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Contents
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.container { min-height: 100vh; padding-bottom: 200px; }
.error-404 { max-width: 600px; text-align: center; margin: 0 auto; padding: 5% 20px 0 20px; } /* display: flex; align-items: center; justify-content: center; */
.error-404 {
  .key { font-size: 108px; font-weight: bold; }
  .value { font-size: 28px; margin-top: -40px; }
  .err-msg { margin-top: 50px; }
}

.page-header { padding-top: 30px; margin: 0 -10px; } /* .row=margin: 0 -15px; */
.page-header {
  .page-title { margin: 0; }
  .btn-page-wrap {
      .btn-page { font-size: small; min-width: 80px; }
    .btn-page:not(:last-child) { margin-right: 1px; }
  }
}
.page-header2 { margin-top: 30px; }
.page-header3 { margin-top: 10px; }
.page-body { margin-top: 30px; }
.page-header3, .page-body {
  .form-page { min-width: 100px; width: auto; }
  .form-page:not(:last-child) { margin-right: 5px; }
}
.page-footer { width: 100%; font-size: small; color: white; padding: 15px 0; background-color: var(--bs4-dark); } /* text-align: center; */
.page-footer .dv-name-style, .login-copyright .dv-name-style { letter-spacing: 3px; }
.page-footer {
  & a.policy, & a.announcement, & a.contactus { color: inherit; text-decoration: underline; }
  & a.policy:hover, & a.announcement:hover, & a.contactus:hover { color: var(--bs4-primary); }
}


.page-side { 
  position: fixed; bottom: 0; left: 0; width: 0; height: 100vh; color: white; 
  background-color: var(--bs4-dark); z-index: 99; transition: 0.2s; /* rgba(89, 89, 89) */
}
.page-side, .page-side-tab {
  .side-top { position: relative; width: 300px; padding: 10px; }
  .side-top .side-info {
    #surveyCode { font-size: small; color: var(--bs4-dark); }
    .side-pin { color: darkgray; opacity: 0; }
    .side-pin i.fa-thumbtack:hover { color: gray; }
  }
  
  .side-menu::-webkit-scrollbar, 
  .tab-side-qnaire::-webkit-scrollbar { width: 6px; height: 6px; }
  .side-menu::-webkit-scrollbar-thumb, 
  .tab-side-qnaire::-webkit-scrollbar-thumb { background-color: darkgray; border-radius: 0; -webkit-border-radius: 0; }
  .side-menu::-webkit-scrollbar-track, 
  .tab-side-qnaire::-webkit-scrollbar-track { background-color: transparent; }
  .side-menu::-webkit-scrollbar-corner, 
  .tab-side-qnaire::-webkit-scrollbar-corner { background-color: transparent; } /* x,y 교차 점 (우측 하단 교차점)*/

  .side-menu, .tab-side-qnaire { position: relative; margin: 0; padding: 0; overflow: auto; }
  .side-menu, .tab-side-qnaire {
    .badge { padding-left: 5px; padding-right: 5px; }

    >li { margin-bottom: 0; }
    >li:last-child { margin-bottom: 300px; }

    .question { font-size: 11px; padding: 3px 10px; }
    .question:first-child { margin-top: 7px }
    .question:last-child { margin-bottom: 7px; }
    .question:hover, .question.active { background-color: var(--dv-dark3); }
    .question {
      .i-move { font-size: 9px; color: gray; }
      .i-move:hover { color: darkgray; }
      .q-type { width: 50px; color: var(--bs4-dark); background-color: var(--bs4-light); }
      .q-type.q-40 { background-color: var(--bs4-warning); } /* 로테이션 */
      .q-type.q-98 { background-color: darkgray; } /* 더미형 */
      .q-type.q-98.param { background-color: var(--bs4-success); } /* 파라미터 */
      .q-type.q-99 { background-color: var(--bs4-info); } /* 안내형 */
      .opt-res { width: 24px; text-align: center; color: var(--bs4-light); border: 1px solid var(--bs4-light); }
      .opt-group { color: var(--bs4-warning); border: 1px solid var(--bs4-warning); }
      .opt-rotation { color: var(--bs4-dark); background-color: var(--bs4-warning); }
      .q-name:hover { color: white; text-decoration: underline; }
      .a-code:hover { color: var(--bs4-warning); }
      .a-code { width: 13px; }
      .a-wrap-icon .dv-collapse { -ms-transition: transform 0.2s; -moz-transition: transform 0.2s; -webkit-transition: transform 0.2s; transition: transform 0.2s; }
      .a-wrap-icon .dv-collapse.rotate { -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
      .a-wrap-icon .dv-collapse:hover { color: var(--bs4-warning); }
    }
    >li.param .q-param { background-color: var(--bs4-success); } /* 파라미터 */

    .answer-wrap { height: 0; font-size: 11px; text-align: right; background-color: var(--dv-dark2); padding: 0 10px; overflow: hidden; }
    .answer-wrap {
      >div.a-name-wrap:first-child { margin-top: 3px; }
      >div.a-name-wrap:last-child { margin-bottom: 3px; }
      .a-name { color: lightgray; }
      .a-name:hover { color: white; text-decoration: underline; }
      .d-code:hover { color: var(--bs4-warning); }
      .d-code { width: 13px; margin-right: 14px; }
      .mr-34 { margin-right: 34px; }
    }
  }

  .side-bottom .delete-item { font-size: 16px; background-color: rgba(220, 53, 69, 0.6); }
  .side-bottom .delete-item:hover { background-color: rgba(220, 53, 69, 0.9); }
}

.side-collapse { position: fixed; top: 0; left: 0; font-size: 18px; color: gray; line-height: 0.4; z-index: 99; transition: 0.2s; }
.side-collapse:hover { color: darkgray; }
.side-collapse.rotate { transform: rotate(180deg); }

.dv-tooltip { 
  visibility: hidden; position: absolute; top: 0; left: 0; z-index: 997; opacity: 0; transition: opacity 0.2s;
  min-width: 120px; max-width: 480px; font-size: 13px; color: #fff; background-color: rgba(64, 64, 64, 0.9); box-shadow: 0 0 1px white;
}
/* .dv-tooltip * { color: #fff; } */
.q-text.dv-tooltip { padding: 5px 10px; border-radius: 6px; }
.q-text.dv-tooltip::after { 
  content: ""; position: absolute; top: 11px; left: 0%; margin-left: -10px; 
  border-width: 5.5px; border-style: solid; border-color: transparent #555 transparent transparent;
}
.code-label { position: fixed; font-size: 13px; padding: 5px 0; max-height: 60%; overflow-y: auto; transition: 0.2s; z-index: 99; }
.code-label {
  >div { color: initial; }
  >li { padding: 2px 5px; }
  >li>.badge.code { color: white; background-color: var(--bs4-dark); }
  >li>.badge.label { font-size: 11px; color: initial; font-weight: normal !important; }
}
.code-label.dv-tooltip::-webkit-scrollbar { width: 6px; height: 6px; }
.code-label.dv-tooltip::-webkit-scrollbar-thumb { background-color: #cc9900; border-radius: 0; -webkit-border-radius: 0; }
.code-label.dv-tooltip::-webkit-scrollbar-track { background-color: transparent; }
.code-label.dv-tooltip::-webkit-scrollbar-corner { background-color: transparent; } /* x,y 교차 점 (우측 하단 교차점)*/


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Quill-Editor
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
textarea.dv-code-view:focus { outline: none; }
.ql-snow {
  >button { color: #444444; }

  /* button hover */
  >button, .ql-picker-label { border-radius: 4px; }
  >button:hover, .ql-picker-label:hover { background-color: #e6e6e6; }

  /* button disabled */
  >button:disabled { color: #b7b7b7; }
  >button:disabled:hover { color: #b7b7b7; background-color: transparent; cursor: no-drop; }
  >button:disabled>svg>* { stroke: #b7b7b7; }
  >button:disabled:hover>svg>* { stroke: #b7b7b7 !important; }
  
  .ql-picker-label[disabled='disabled'] { color: #b7b7b7 !important; border: none; }
  .ql-picker-label[disabled='disabled']:hover { color: #b7b7b7; background-color: transparent; cursor: no-drop; }
  .ql-picker-label[disabled='disabled']:hover i { color: #b7b7b7; background-color: transparent; cursor: no-drop; }
  
  .ql-picker-label[disabled='disabled'] * { stroke: #b7b7b7; border: none; }
  .ql-picker-label[disabled='disabled']:hover * { stroke: #b7b7b7 !important; background-color: transparent; cursor: no-drop; }
  
  /* color, background, dv-bg-color */
  .ql-color, .ql-background, .dv-bg-color {
    >.ql-picker-label { padding-top: 0; }

    >.ql-picker-options { width: 212px; }
    >.ql-picker-options>.ql-picker-item:nth-child(n+61):nth-child(-n+70) { margin-top: 10px; }
    >.ql-picker-options>.ql-picker-item[data-value=color-picker]:before { content: 'Pick Color'; }
    >.ql-picker-options>.ql-picker-item[data-value=color-picker] {
      width: 100% !important;
      height: 25px !important;
      text-align: center;
      color: blue;
      text-decoration: underline;
      background: none !important;
    }
  }

  /* dv-bg-color */
  .dv-bg-color {
    .ql-picker-label[aria-expanded='true'] .ql-picker-label:focus { color: lightgray; }
    .ql-picker-label .ql-color-label i { margin-top: 5px; }
    .ql-picker-options [data-value='transparent'] { background-image: url("/static/img/transparent.png"); }
  }

  /* bold/dv-table, clean */
  .ql-bold, .ql-dv-table { font-size: 90%; padding-top: 2px !important; }
  .ql-code-block { font-size: 80%; padding-top: 4px !important; }
  .dv-html { font-size: 80%; padding-top: 4px !important; }
  .ql-clean  { padding-top: 1px !important; }

  /* Font-Family */
  .ql-picker.ql-font .ql-picker-label[data-value]::before,
  .ql-picker.ql-font .ql-picker-item[data-value]::before { content: attr(data-value) !important; }
  .ql-picker.ql-font { width: 150px !important; white-space: nowrap; }

  /* Font-Size */
  .ql-picker.ql-size .ql-picker-label[data-value]::before,
  .ql-picker.ql-size .ql-picker-item[data-value]::before { content: attr(data-value) !important; }
  .ql-picker.ql-size { width: 80px !important; white-space: nowrap; }

  /* Font-Header */
  .ql-picker.ql-header { width: 120px !important; white-space: nowrap; }

  /* align */
  .ql-align>.ql-picker-label { padding-top: 0; }

  /* code-view */
  /* .dv-html:not(:focus) { color: black !important; } */
  .dv-code-view { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 10px; border: none; background-color: whitesmoke; }
  .dv-code-view.active { display: initial; }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
결제하기
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#buyModal { font-size: small; }
#buyModal {
  .modal-header { border-bottom: 1px solid var(--dv-dark1); }
  .modal-title { font-size: 16px; }
  .buy-wrap { color: white; }
  .btn { font-size: small; }
  .btn:hover { color: white !important; }
  .btn-buy-device.active { color: white !important; background-color: var(--bs4-primary); }
  .btn-buy-order { background-color: var(--dv-dark1); }
  .btn-buy-order, .btn-buy-cancel { border-radius: 16px; }
  .buy-label { width: 120px; }
  .policy, .policy:hover { color: white; }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Sortable
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
body.dragging, body.dragging * { cursor: move !important; }
.dragged { position: absolute; opacity: 0.5; z-index: 9999; }

.placeholder { position: relative; margin: 0; padding: 0; border: none; }
.placeholder:before { position: absolute; content: ""; width: 0; height: 0; border: 5px solid transparent; border-left-color: red; border-right: none; }
.question-wrap div.placeholder:before { left: -12px; top: -4px; margin-top: -5px; }
.card.a-wrap .card-body div.placeholder:before { left: 0px; top: 10px; margin-top: 0px; }
.side-menu li.placeholder:before { left: 10px; top: -4px; margin-top: 0px; }
table {
  & tr.placeholder { position: relative; margin: 0; padding: 0; border: none; }
  & tr.placeholder:before { position: absolute; content: ""; width: 0; height: 0; border: 5px solid transparent; border-left-color: red; margin-top: -5px; left: -8px; border-right: none; }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
help
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* .help-wrap { height: 100vh; } */
.help-side { position: fixed; top: 0; left: 0; width: auto; height: 100vh; background-color: whitesmoke; }
.help-side .help-menu { width: 280px; max-height: 100vh; padding: 20px 0 300px 0; overflow-y: auto; }
.help-side .help-menu {
  & li { font-size: 15px; }
  & li>a { display: block; width: 100%; padding: 4px 40px; }
  & li.home>a { padding-left: 20px; }
  & li.active, & li.active>a:hover { color: white; background-color: var(--dv-origin); }
  & li:not(.active)>a:hover { color: inherit; background-color: lightgray; }

  .title { font-size: 21px; padding: 0 0 0 20px; margin-bottom: 16px; }
  .sub-title { font-size: 15px; padding: 4px 20px; }
}
.help-main { margin-left: 280px; padding: 0; }
.help-main .help-header { padding: 20px 20px 0 20px; }
.help-main .help-header {
  .category-title { color: var(--dv-origin); }
}
.help-main .help-body { min-height: 100vh; font-size: 16px; padding: 30px 20px 100px 20px; }
.help-main .help-body {
  & hr { border-color: darkgray; }
  & ul>li { margin-top: 4px; }
  .content-title { font-size: 24px; }
  /* .content-body { padding-bottom: 300px; } */
  .btn-prev, .btn-next { width: 120px; }

  .help-title { font-size: 24px; }
  .help-title:not(:first-child) { margin-top: 30px; }
  .help-sub-title { font-size: 18px; margin-bottom: 8px; }
  .help-content>li .badge { width: 24px; font-size: small; text-align: center; padding-left: 0; padding-right: 0; }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
view-port
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media (min-width: 1600.5px), (min-height: 1020.5px) {
  .login-body { background-size: cover; }
}

@media (max-width: 767.5px) {
  /* .intro .power-form, .login-logo .power-form { display: none; } */
  .intro-price>.card { margin-left: 0 !important; }
 
  .login-flex { margin-top: 0 !important; }
  .login-logo { height: 70px; }
  .login-box { width: 100%; }
  .free-survey { display: none; }

  .navbar .container-fluid { padding: 0 10px; }
  .navbar .container-fluid {
    .navbar-nav, .dv-menu-clip { display: none; }
  }

  .page-footer .d-flex { justify-content: flex-start !important; }
}

@media (max-width: 575.5px) {
  .policy-version { margin-left: 0 !important; }
}

/*
@media (max-width: 400.5px) {
  .page-header { flex-direction: column; align-items: flex-start !important; }
  .page-header>.btn-page-wrap { margin-top: 10px; }
}

@media (max-width: 300.5px) {
  #qName { width: 120px !important; }
}
*/