@charset "utf-8";
@import url('bootstrap.min.css');
@import url('bootstrap-override.css');
@import url('jquery-ui.min.css');
@import url('../font-awesome-pro-5/css/all.min.css');
@import url('ionicons.min.css');
@import url('animate.min.css');
@import url('toggles.css');

@font-face {
    font-family: 'Binggrae';
    font-style: normal;
    font-weight: 700;
    src: local("?"), url('/skins/default/fonts/Binggrae_Bold.woff') format('woff');
}

@font-face {
    font-family: 'Binggrae';
    font-style: normal;
    font-weight: 500;
    src: local("?"), url('/skins/default/fonts/Binggrae.woff') format('woff');
}

@font-face {
    font-family: 'CookieRun';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/CookieRun-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Nexon';
    src: url('/skins/default/fonts/Nexon_Gothic_Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Nexon';
    src: url('/skins/default/fonts/Nexon_Gothic_Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Nexon';
    src: url('/skins/default/fonts/Nexon_Gothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GSans';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NotoSerifKR';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NotoSerifKR.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    --green: #74D240;
    --greent: #74D2401C;
    --purple: #9558FE; 
    --purplet: #9558FE1C; 
    --blue: #64C1FF; 
    --gray: #736767; 
    --yellow: #fbc931;
    --orange: #ffa152; 
    --bluet: #64C1FF1C; 
    --swiper-navigation-color: #333;
    --box: 9%;
}

html {
    height: 100%;
}

body {
    height: 100%;
    background: #e4e7ea;
    font-family: "Nexon", "Noto Sans KR", "Apple SD Gothic Neo", 나눔고딕, NanumGothic, "맑은 고딕", "Malgun Gothic";
    line-height: 17px;
    color: #333;
    padding: 0px !important;
    /*
  -webkit-touch-callout: none !important;
  -webkit-user-select: none;
  */
}

body[data-module=_dabisu][data-role=student],
body.body_common,
body.body__dcode,
body.body__drcode,
body.body_print,
body.body_home {
    background-color: #fff;
}

body[data-module=_dabisu][data-role=student],
body.body_home {
    font-family: 'Nexon', 'Noto Sans KR', 'sans-serif';
}

body.body_print {
    height: auto;
}

body>section {
    min-height: 100%;
}

body .container {
    padding: 0px;
}

body .tleft {
    text-align: left;
}

body .tright {
    text-align: right;
}

body .vcenter {
    vertical-align: middle !important;
}

body.notfound,
body.body_policies,
body.body_privacy,
body.body_make {
    background-color: #FFF;
}

body.body_login {
    background: url(/skins/default/images/home/20190812_143.png) no-repeat left bottom, url(/skins/default/images/home/20190812_144.png) no-repeat right bottom, url(/skins/default/images/home/20190812_142.png) no-repeat right top, url(/skins/default/images/home/20190812_141.png) no-repeat left top;
    background-color: #fceecb;
}

body.body_login[data-module=_dabisu] {
    background: #fff url(/skins/default/images/drcode/20211207_016.jpg) no-repeat top center/cover;
}

body.body_login._tutor365 {
    background: #fff url(/skins/default/images/_tutor365/20170612_004.png) no-repeat center top/cover;
}

body.body_login[data-module=engready] {
    background: #fff url(/skins/default/images/engready/mainbg.png) no-repeat center center/auto 120%;
}


body.noscroll {
    overflow: hidden;
}

body.open {
    overflow: hidden;
}

body.over {
    overflow: hidden;
}

body.over>section {
    opacity: 0;
    visibility: hidden;
}

input,
select,
textarea {
    color: #636e7b;
}

textarea {
    resize: vertical;
}

nav {
    text-align: center;
}

a {
    -webkit-user-select: none !important;
}

a:focus,
a:active {
    outline: none;
    text-decoration: none
}

a:hover {
    text-decoration: none
}

button:focus,
button:active {
    outline: none;
    text-decoration: none
}

h1,
h2,
h3,
h4,
h5 {}

button:focus {
    outline: 0 !important
}

code {
    padding: 2px 4px;
    background-color: #f9f2f4;
    border-radius: 4px;
}

p.empty {
    color: #777;
    font-weight: 300;
}

iframe.hframe {
    visibility: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
}

.mshow {
    display: none !important;
}

.bb1 {
    border-bottom: solid 1px #343E4D;
}

.bt1 {
    border-top: solid 1px #343E4D;
}

.cursor {
    cursor: pointer;
}

.alert-message {
    font-size: 12px;
    color: #ec562e;
    margin: 10px;
}

.exit-message {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 10000;
    text-align: center;
}

.exit-message>div {
    display: inline-block;
    padding: 10px 20px;
    height: 30px;
    margin: auto;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    font: 12px arial;
    line-height: 30px;
    color: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

.overx {
    overflow-x: auto;
}

.nwrap {
    white-space: nowrap;
}

.media {
    padding: 0px;
}

.tover {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile>.thumb {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 40px;
    display: inline-block;
    margin-right: 5px;
}

.profile>.name {
    display: block;
}

.profile>.info {
    display: inline-block;
    vertical-align: middle;
}

.profile>.info>.name {
    font-weight: 600;
    margin: 0px;
}

.userbx .profile .wrap {
    padding: 10px;
    background-color: #F9F9F9;
    margin-top: 5px;
}

.userbx .profile .thumb {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 40px;
    margin-right: 10px;
    float: left;
}

.userbx .profile .info {
    display: inline-block;
    line-height: 21px;
}

.userbx .profile .info>.phone {
    display: block;
}

table p.desc,
form p.desc {
    line-height: 25px;
    color: #22A7F0;
}

form p.notice {
    color: #ff4f4f;
    font-size: 13px;
}

.inline-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

.fa-company::before {
    content: '\f1ad';
}

.fa-role::before {
    content: '\f507';
}

.fa-service::before {
    content: '\f187';
}

.fa-mission::before {
    content: '\f121';
}

.fa-pdf::before {
    content: '\f1c1';
}

.fa-paper::before {
    content: '\f733';
}

.fa-zip::before {
    content: '\f1c6';
}

.lock .lesson .fa-play-circle::before {
    content: '\f023';
}

.lesson-panel .fa-youtube::before,
.lesson-panel .fa-video::before {
    content: '\f144';
}


/* lang */

font:not(.ko) {
    display: none;
}

html[lang=vi] font.vi {
    display: inline-block;
}

html[lang=vi] font:not(.vi) {
    display: none;
}

html[lang=en] font.en {
    display: inline-block;
}

html[lang=en] font:not(.en) {
    display: none;
}

/* certification */

.page.cert {
    width: 887px;
    height: 1260px;
    margin: 0px auto;
    position: relative;
    background: url(/skins/default/images/dabisu/cert_bg.png) no-repeat center center/cover;
}

.page.cert .page-head {
    height: 180px;
    position: relative;
}

.page.cert .no {
    position: absolute;
    top: 150px;
    left: 100px;
    font-size: 17px;
}

.page.cert .page-body {
    position: relative;
    margin: 50px 0;
    font-family: NanumMyeongjo, serif;
    padding: 0 80px;
}

.page.cert .page-body .prop {
    position: relative;
    font-size: 22px;
    margin: 100px 0 80px;
    padding-left: 300px;
}

.page.cert .page-body .prop li {
    padding: 10px 0;
}

.page.cert .title {
    font-weight: 700;
    text-align: center;
    margin: 0 auto;
    font-size: 50px;
}

.page.cert .title::before {
    content: 'Certified Dabisu Teacher(CDT)';
    display: block;
    font-family: NanumMyeongjo, serif;
    font-size: 20px;
    font-style: italic;
    font-weight: 600;
    margin-bottom: 10px;
    color: #CFA565;
}

.page.cert.student .title::before {
    content: 'Certified Dabisu Student(CDS)';
}

.page.cert .prop::before {
    content: '';
    width: 300px;
    height: 300px;
    position: absolute;
    top: -40px;
    left: 0px;
    background: url(/skins/default/images/dabisu/ribon.png) no-repeat center top/contain;
}

.page.cert .prop label {
    width: 100px;
    display: inline-block;
    text-align: justify;
    text-align-last: justify;
    -moz-text-align-last: justify; 
    text-justify: inter-character;
    vertical-align: top;
    margin-right: 10px;
}

.page.cert .desc {
    text-align: center;
    font-size: 22px;
    line-height: 50px;
    margin: 50px 0;
}

.page.cert .pdate {
    text-align: center;
    font-size: 25px;
}

.page.cert .page-footer {
    padding: 50px 0 0 100px;
}

.page.cert .page-footer .compsign {
    margin:0 auto;
    position: relative;
    font-size: 22px;
    line-height: 32px;
    width: 280px;
    padding: 0px;
}

.page.cert .page-footer .compsign::before {
    content: '';
    position: absolute;
    top: 0px;
    left: -140px;
    width: 130px;
    height: 50px;
    background: url(/skins/default/images/dabisu/logo2.svg) no-repeat center top/contain;
}

.cert .compsign h5 {
    font-size: 120%;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.cert .compsign .logo {
    width: 150px;
}

.cert .compsign h5 {
    text-align: left;
}

.cert .compsign h5::before {
    top: -10px;
}

.cert .compsign h5::after {
    content: 'CEO, Dabisu Digital Ltd.';
    display: block;
    font-size: 17px;
    font-weight: 300;
}

.cert .compsign {
    margin-top: 100px; 
}

.cert .compsign::after {
    content: '';
    position: absolute;
    top: -15px;
    right: -10px;
    z-index: 0;
    width: 70px;
    height: 70px;
    opacity: .8;
    background: url(/skins/default/images/sign_company.png) no-repeat center top/cover;
}

/* chatbot */

.chatbot {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 90%;
    max-width: 400px;
    z-index: 10;
    opacity: .9;
    pointer-events: none;
}

.chatbot .wrapchat {
    display: none;
    width: 100%;
    border-radius: 5px;
    background-color: #F9F9F9;
    box-shadow: 1px 2px 3px #aaa;
    margin-bottom: 10px;
    overflow: hidden;
    pointer-events: auto;
}

.chatbot.active .wrapchat {
    display: block;
}

.chatbot .wrapchat .header {
    padding: 10px;
    position: relative;
    background-color: #474b5b;
    color:#fff;
}

.chatbot .wrapchat .header .title {
    margin: 0px;
}

.chatbot .wrapchat .header .close {
    position: absolute;
    top: 10px;
    right: 5px;
    font-size: 30px;
    margin-top: 0px !important;
    line-height: 0.8em;
    color: #fff;
    opacity: 1;
}

.chatbot .wrapchat .body {
    overflow-y: auto;
    overflow-x: hidden;
    height: 500px;
    background-color: #EFEFEF;
    padding: 10px 5px;
}

.chatbot .wrapchat .body .msg {
    position: relative;
    padding: 10px;
}

.chatbot .wrapchat .body .msg + .msg {
}

.chatbot .wrapchat .body .msg.me {
    padding-left: 60px;
}

.chatbot .wrapchat .body .msg.other {
    padding-top: 0px;
    padding-right: 60px;
}

.chatbot .wrapchat .body .msg .thumb {
    position: absolute;
    bottom: 10px;
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #bebfe6;
}

.chatbot .wrapchat .body .msg.me .thumb {
    left: 5px;
}

.chatbot .wrapchat .body .msg.other .thumb {
    right: 5px;
    background: #fff url(/common/images/logo_dabisu_v.png) no-repeat center center/70% auto;
}

.chatbot .wrapchat .body .msg .content {
    padding: 10px;
    min-height: 50px;
    line-height: 22px;
    background-color: #fff;
    display: flex;
    align-items: center;
}

.chatbot .wrapchat .body .msg.me .content {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    margin-right: 50px;
}

.chatbot .wrapchat .body .msg.other .content {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    margin-left: 50px;
    background-color: #d5e2ea;
}

.chatbot .wrapchat .body .msg.wait .content {
    background-color: #a5b1b9;
    text-align: center;
}

.chatbot .wrapchat .body .msg.error .content {
    background-color: #ead8d5;
}

.chatbot .wrapchat .body .msg .time {
    display: block;
    margin-top: 5px;
    font-size: 12px;
}

.chatbot .wrapchat .body .msg.other .time {
    text-align: right;
}

.chatbot .wrapchat .footer {
    position: relative;
    padding: 5px 60px 5px 5px;
    border-top: 1px solid #ddd;
}

.chatbot .wrapchat .footer textarea {
    border: none;
}

.chatbot .wrapchat .footer .btn-send {
    position: absolute;
    top: 5px;
    right: 5px;
}

.chatbot .btnChat.chatgpt {
    display: inline-block;
    float: right;
    border-radius: 50%;
    line-height: 50px;
    width: 50px;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    box-shadow: 1px 2px 3px #aaa;
    pointer-events: auto;
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 60px;
}
.lds-ellipsis div {
    position: absolute;
    top: 23px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #000;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}
@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(24px, 0);
    }
}

.lds-ripple {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 70px;
}
.lds-ripple div {
    position: absolute;
    border: 4px solid #fff;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}
@keyframes lds-ripple {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }
    4.9% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }
    5% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}




/* summernote */

.note-modal-footer {
    height: auto !important;
}

.compsign {
    padding: 25px 0;
}

.compsign>span {
    position: relative;
    display: inline-block;
}
.compsign>span::before {
    content: '';
    position: absolute;
    top: -15px;
    right: -70px;
    z-index: 0;
    width: 70px;
    height: 70px;
    opacity: .8;
    background: url(/skins/default/images/sign_company.png) no-repeat center center/cover;
}


/********** 3. HEADER PANEL **********/

body.editmode .baseheader,
body.selmode .editheader,
body.selmode .baseheader {
    display: none;
}

body.editmode .editheader,
body.selmode .selheader {
    display: initial;
}


/*
body.selmode .headerbar {
  background-color: #1d2939;
}

body.selmode .mainpanel2 .headerbar .header-right {
  background-color: #1d2939;
}

body.selmode .headerbar button {
  background-color: #1d2939;
}
*/

.editheader .headerbar,
.selheader .headerbar {
    background-color: #1d2939;
}

.bx::after {
    clear: both;
    display: block;
    content: '';
}

ul.clear {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.clear::after {
    clear: both;
    display: block;
    content: '';
}

body .editheader,
body .selheader {
    display: none;
}

.headerbar {
    background: #1582dc;
}

.headerbar::after {
    clear: both;
    display: block;
    content: '';
}

.headerbar .optmenu {
    display: none;
}

.headerbar .btn {
    height: 50px;
    padding: 13px 10px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    font-size: 16px;
}

.headerbar .btn-record:not(.off):focus,
.headerbar .btn-record:not(.off) {
    color: #ff0d0d;
    font-size: 130%;
    text-shadow: 0 0 5px #fff;
}

.headerbar .mobileonly {
    display: none;
}

.mode-pc .cellview .extmenu.tgmnu,
.mode-pc .cubeview .extmenu.tgmnu,
.mode-pc .noteview .extmenu.tgmnu,
.mode-pc .programview .extmenu.tgmnu,
.mode-pc .ebookview .extmenu.tgmnu,
.mode-pc .bookview .extmenu.tgmnu,
.mode-pc .testview .extmenu.tgmnu,
.mode-pc .paperview .extmenu.tgmnu {
    display: none;
}

.mode-pc .cellview .optmenu.tgmnu .hmnu,
.mode-pc .cubeview .optmenu.tgmnu .hmnu,
.mode-pc .noteview .optmenu.tgmnu .hmnu,
.mode-pc .ebookview .optmenu.tgmnu .hmnu,
.mode-pc .bookview .optmenu.tgmnu .hmnu,
.mode-pc .testview .optmenu.tgmnu .hmnu,
.mode-pc .paperview .optmenu.tgmnu .hmnu {
    display: none;
}

.mode-pc .cellview .optmenu.tgmnu,
.mode-pc .cubeview .optmenu.tgmnu,
.mode-pc .noteview .optmenu.tgmnu,
.mode-pc .programview .optmenu.tgmnu,
.mode-pc .ebookview .optmenu.tgmnu,
.mode-pc .bookview .optmenu.tgmnu,
.mode-pc .testview .optmenu.tgmnu,
.mode-pc .paperview .optmenu.tgmnu {
    display: inline-block;
}

.mode-mobile .headermenu .pcmnu {
    display: none;
}

.mode-mobile .extmenu.tgmnu {
    display: none;
}

.mode-mobile .optmenu.tgmnu {
    display: inline-block;
}

.mode-mobile .optmenu.tgmnu .hmnu {}

.mode-mobile .headermenu .dropdown-menu-usermenu:after {
    right: 7px;
}

.userview:not([tab="note"]) .headerbar .btn-append {
    display: none;
}

.userview:not([tab="archive"]) .headerbar .btn-report {
    display: none;
}


/***** 3.1 HEADER LEFT *****/

.logo {
    position: absolute;
    z-index: 1;
    left: 25px;
    padding-top: 20px;
}

.logo>img {
    width: 130%;
}

.mlogo {
    display: none;
}

._dcodeview .mlogo {
    display: inline-block;
}

.menutoggle {
    float: left;
    width: 50px;
    height: 50px;
    font-size: 22px;
    cursor: pointer;
    float: left;
    color: #FFF;
    -moz-transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
}

.menutoggle:hover {
    color: #F0F0F0;
    background: #1377c9;
}

.menutoggle .fa,
.menutoggle .glyphicon {
    margin: 14px 0 0 15px;
}

.book-title {
    float: left;
    font-size: 22px;
    color: #FFF;
    margin: 11px 5px;
}

.searchform input {
    width: 250px;
    background: #fff url(../images/icon-search.png) no-repeat 95% center;
    float: left;
    margin: 5px 10px;
    padding: 8px 10px;
    border: 0;
    border-right: 1px solid #eee;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    font-size: 14px;
}

.searchform input:focus {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: #ddd;
}


/***** 3.2 HEADER RIGHT *****/

.header-center {
    position: absolute;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 50px;
    left: 50%;
    transform: translateX(-50%);
}

.overpanel .header-center {
    font-size: 27px;
    font-weight: initial;
}

.header-right {
    position: absolute;
    right: 0px;
    border-right: 0;
}

.headermenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.headermenu:after {
    clear: both;
    display: block;
    content: '';
}

.headermenu>li {
    display: inline-block;
    float: left;
    position: relative;
}

.headermenu>li.smnu {
    display: none;
}

.headermenu>li.smnu.active {
    display: inline-block;
}

.headermenu .dropdown-toggle {
    padding: 12px 10px;
    border-color: #fff;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border: 0;
}

.headermenu .dropdown-toggle:hover,
.headermenu .dropdown-toggle:focus,
.headermenu .dropdown-toggle:active,
.headermenu .dropdown-toggle.active,
.headermenu .open .dropdown-toggle.dropdown-toggle {
    background: #1377c9;
    color: #F0F0F0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.headermenu .dropdown-toggle img {
    vertical-align: middle;
    margin-right: 5px;
    width: 26px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

.headermenu .dropdown-toggle .caret {
    margin-left: 5px;
}

.headermenu .dropdown-menu {
    border: 0;
    margin-top: 0px;
    margin-right: -1px;
    -moz-border-radius: 2px 0 2px 2px;
    -webkit-border-radius: 2px 0 2px 2px;
    border-radius: 2px 0 2px 2px;
    -moz-box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
    -webkit-box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
    box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
    padding: 5px;
}

.headermenu .dropdown-menu:after {
    border-bottom: 6px solid #1d2939;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    content: "";
    display: inline-block;
    right: 17px;
    position: absolute;
    top: -6px;
}

.overpanel .headermenu .dropdown-menu:after {
    border-bottom: 6px solid #fff;
}

.headermenu .dropdown-menu .divider {
    margin: 5px 0 !important;
    background-color: #555;
}

.headermenu .dropdown-grid .grid-list {
    padding: 20px;
}

.headermenu .dropdown-menu li {
    display: block;
    margin: 0;
    float: none;
    background: none;
    padding: 15px 5px;
    position: relative;
}

.headermenu .dropdown-menu-usermenu li {
    padding: 0;
}

.headermenu .dropdown-menu-usermenu:after {
    right: 45px;
}

.headermenu .optmenu .dropdown-menu-usermenu:after {
    right: 5px;
}

.overpanel .headermenu .dropdown-menu li a {
    color: #000;
}

.headermenu .dropdown-menu li a {
    color: #b2b7c3;
    padding: 7px 10px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
}

.headermenu .dropdown-menu li a:hover {
    background: #1caf9a;
    color: #fff;
}

.headermenu .dropdown-menu li i {
    width: 10px;
    margin-right: 5px;
}

.headermenu .dropdown-menu-head {
    padding: 0;
    min-width: 300px;
}

.view[tab="users"] .headermenu .btn-new.hideuser {
    display: none;
}

.headermenu .tp-icon {
    padding: 12px 15px;
    height: 50px;
    font-size: 16px;
    color: #333;
    border-color: #fff;
    -moz-transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
}

.headermenu .btn-menu {
    padding: 13px 15px;
    font-size: 16px;
    height: 50px;
    color: #333;
    border: none;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    -moz-transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
}

.headermenu .btn-menu:hover,
.headermenu .btn-menu:focus,
.headermenu .btn-menu:active,
.headermenu .btn-menu.active {
    background: #1377c9;
    color: #F0F0F0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}


/*
body.selmode .headerbar .btn:hover,
body.selmode .headerbar .btn:focus,
body.selmode .headerbar .btn:active,
body.selmode .headerbar .btn.active,
*/

.editmode .headermenu .dropdown-toggle:hover,
.editmode .headermenu .dropdown-toggle:focus,
.editmode .headermenu .dropdown-toggle:active,
.editmode .headermenu .dropdown-toggle.active,
.editmode .headermenu .open .dropdown-toggle.dropdown-toggle,
.editmode .headerbar .btn-menu:hover,
.editmode .headerbar .btn-menu:focus,
.editmode .headerbar .btn-menu:active,
.editmode .headerbar .btn-menu.active {
    background: #2a3949;
}

.selmode .headerbar .btn,
.selmode .mainpanel2 .headerbar .header-right,
.selmode .headerbar {
    background-color: #2a3949;
}

.selmode .headerbar a.page-title:hover,
.selmode .headerbar a.page-title:focus,
.selmode .headerbar a.page-title:active,
.selmode .headerbar .btn:hover,
.selmode .headerbar .btn:focus,
.selmode .headerbar .btn:active {
    background-color: #334559;
}

.selmode .headerbar .btn-nosel,
body .headerbar .btn-selmode {
    display: none;
}

.selmode .headerbar .btn-selhide,
.selmode .headerbar .btn-setting,
.selmode .headerbar .btn-new {
    display: none;
}

.selmode .headerbar .btn-selmode {
    display: inline-block;
}

.selmode .lecturepanel[substype=full] .btn-unlock,
.selmode .lecturepanel[substype=full] .btn-lock {
    display: none;
}

.selmode .headerbar .search {
    display: none !important;
}

.headermenu .tp-icon+.dropdown-menu:after {
    right: 17px;
}

.headermenu .chat-icon {
    border-right: 0;
}

.headermenu .dropdown-menu-usermenu {
    background: #1d2939;
    min-width: 150px;
}

.headermenu .dropdown-menu-head ul {
    border: 1px solid #ddd;
    border-top: 0;
    padding: 0 10px;
}

.headermenu .dropdown-menu-head ul.gen-list>li.new {
    cursor: pointer;
}

.headermenu .dropdown-menu-head ul.user-list>li.new:hover,
.headermenu .dropdown-menu-head ul.gen-list>li.new:hover {
    background-color: #F5F5F5;
}

.headermenu .dropdown-list span[data-role="remove"] {
    position: absolute;
    top: 23px;
    right: 15px;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
    color: #999;
    font-size: 14px;
}

.dropdown-list span[data-role="remove"]::after {
    display: inline-block;
    content: '✖'
}

.headermenu .dropdown-menu-head li a {
    color: #333;
    padding: 0;
    opacity: 1;
}

.headermenu .dropdown-menu-head li a:hover {
    background: none;
    color: #428BCA;
    text-decoration: none;
}

.headermenu .dropdown-commonmenu li {
    padding: 0;
}

.headermenu .dropdown-commonmenu:after {
    right: 15px;
}

.headermenu .dropdown-commonmenu {
    background: #1d2939;
}

.overpanel .headermenu .dropdown-commonmenu {
    background: #fff;
}

.headermenu .btn-group {
    margin-bottom: 0;
}

.headermenu .btn-default {
    background: #1582dc;
    color: #FFF;
}

.headermenu .btn-default.off:focus,
.headermenu .btn-default.off:hover,
.headermenu .btn-default.off {
    color: #32373c;
}

.headermenu .access {
    display: none;
}

.practicepanel .headermenu .btn-omr,
.epaperpanel .headermenu .btn-send {
    display: none;
}

.testview .mainpanel:not(.practicepanel) .headermenu .btn-send {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 70px;
    height: 70px;
    font-size: 30px;
    border-radius: 50%;
    box-shadow: 1px 1px 3px #333;
}

.edit .headermenu .access {
    display: inline-block;
}

.headermenu .btn-user {
    font-size: 13px;
}

.dropdown-list li {
    padding: 15px;
    overflow: hidden;
    border-bottom: 1px solid #eee;
}

.dropdown-list li:last-child {
    border-bottom: 0;
}

.dropdown-list .thumb {
    width: 36px;
    float: left;
}

.dropdown-list .thumb img {
    width: 100%;
    display: block;
    vertical-align: middle;
}

.dropdown-list.gen-list .thumb img,
.dropdown-list.user-list .thumb img {
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.dropdown-list .desc {
    margin-left: 45px;
    display: block;
    line-height: 13px;
}

.dropdown-list .desc h5 {
    font-size: 13px;
    margin: 3px 0px;
}

.dropdown-list .cmd {
    position: absolute;
    right: 10px;
    top: 20px;
}

.dropdown-list li:last-child {
    padding: 7px 5px;
}

.dropdown-list li .badge {
    float: right;
}

.dropdown-list.user-list li .badge {
    line-height: 25px;
    cursor: pointer;
}

.user-list {
    width: 300px;
}

.gen-list li a {
    display: block;
}

.gen-list li a:hover {
    color: #333 !important;
    text-decoration: none;
}

.gen-list li .name {
    font-size: 13px;
    line-height: 21px;
    display: block;
}

.gen-list li .msg {
    font-size: 11px;
    line-height: normal;
    color: #999;
    display: block;
}


/***** 3.3 HEADER EXPAND *****/

.header-expand {
    clear: both;
    padding: 10px 20px 0px;
    background-color: #1d2939;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    line-height: initial;
    height: 38px;
}

.header-expand:after {
    content: '';
    display: block;
    clear: both;
}

.headerbar .header-expand .btn:hover,
.headerbar .header-expand .btn:focus {
    color: #F0F0F0 !important;
    background: transparent !important;
}

.headerbar .header-expand .active .btn:hover,
.headerbar .header-expand .active .btn:focus {
    color: #111 !important;
}

.header-expand ul.tabs {
    border: none;
    background: none;
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: inline-block;
    position: relative;
}

.header-expand ul.tabs>li {
    display: inline-block;
    position: relative;
    margin-right: 10px;
}

.header-expand ul.tabs>li>i {
    position: relative;
    top: -1px;
    right: 20px;
    font-size: 12px;
    color: #BBB;
    cursor: pointer;
}

.header-expand ul.tabs>li>a {
    background-color: #343E4D;
    font-size: 13px;
    text-align: center;
    padding-left: 30px;
    padding-right: 40px;
    color: #BBB;
    line-height: 28px;
    display: inline-block;
}

.header-expand ul.tabs>li>a:active,
.header-expand ul.tabs>li>a:focus,
.header-expand ul.tabs>li>a:hover {
    text-decoration: none;
    color: #FFF;
}

.header-expand ul.tabs>li.active>i {
    color: #666;
}

.header-expand ul.tabs>li.active>a {
    background-color: #FFF;
    color: #666;
}

.preview .header-expand a.btnAdd {
    display: none;
}

.header-expand a.btnAdd {
    /*line-height: 27px;*/
    font-size: 13px;
    color: #BBB;
    text-decoration: none;
}

.header-expand a.btnAdd:hover {
    color: #FFF;
}

.headerbar>a.swExpand {
    position: absolute;
    top: 50px;
    right: 5px;
    z-index: -1;
    padding: 2px 20px;
    background-color: #1d2939;
    color: #BBB;
    font-size: 12px;
    text-decoration: none;
    line-height: initial;
}

.mode-mobile .headerbar>a.swExpand {
    display: none;
}

.headerbar>a.swExpand.expand {
    top: 88px;
}


/********** 4. LEFT PANEL **********/

.leftpanel {
    width: 0px;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 102;
    color: #8f939e;
    -moz-box-shadow: 3px 0 5px rgba(12, 12, 12, 0.05);
    -webkit-box-shadow: 3px 0 5px rgba(12, 12, 12, 0.05);
    box-shadow: 3px 0 5px rgba(0, 0, 0, 0.5);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    background-color: #1d2939;
    overflow: hidden;
}

.leftpanel .wrap {
    width: 320px;
    height: 100%;
    overflow-y: auto;
    padding: 5px;
}

.sticky-leftpanel {
    position: fixed;
    height: 100%;
    overflow-y: auto;
}

.logopanel h1 span {
    color: #1caf9a;
}

.leftpanelinner {
    padding: 5px 15px;
}

.leftpanel .searchform {
    display: none;
}

.leftpanel .searchform::after {
    content: '';
    display: block;
    clear: both;
}

.leftpanel .searchform input {
    padding: 10px;
    height: auto;
    width: 100%;
    margin: 5px 0 20px 0;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

.leftpanel .userlogged {
    margin: 0;
    padding: 0;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.leftpanel-collapsed .leftpanel .userlogged {
    display: none;
}

.leftpanel .userlogged .media-object {
    width: 40px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    float: left;
    border: 2px solid #1CAF9A;
    padding: 2px;
    margin-left: 2px;
}

.leftpanel .userlogged .img-cover {
    width: 57px;
    border-radius: 0;
    border: none;
    border: 1px solid #FFF;
}

.leftpanel .userlogged .media-body {
    margin-left: 50px;
    color: #ccc;
}

.leftpanel .userlogged .media-body h4 {
    font-size: 15px;
    margin: 0;
}

.leftpanel .infobook .media-body h4 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: bold;
}

.leftpanel .userlogged .media-body span {
    font-style: italic;
    font-size: 11px;
    opacity: 0.5;
}

.leftpanel .userlogged ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.leftpanel .infobook .media-body {
    display: block;
    margin-left: 67px;
}

.leftpanel .infobook .media-body .summary {
    font-size: 12px;
    opacity: 0.5;
}


/********** 4. RIGHT PANEL **********/

.sidepanel {
    width: 380px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 102;
    color: #FFF;
}

.sidepanel.wide {
    width: 700px;
}

.sidepanel .closex {
    position: absolute;
    right: 10px;
    top: 13px;
    padding: 0;
    font-size: 30px;
    background: transparent;
    border: none;
    color: #fff;
    opacity: 0.5;
    z-index: 1;
}

.sidepanel nav {
    text-align: center;
}

.sidepanel .control-label {
    color: #8f939e;
    font-size: 12px;
    word-break: break-all;
    overflow: hidden;
    white-space: nowrap;
    padding-top: 7px;
}

.sidepanel .input-sm {
    line-height: 19px;
}

input.form-control.input-sm-view {
    /* 일정조회 모달 */
    background-color: #ffffff;
    border: 0;
}


/***** 4.1 NAVIGATION STYLES *****/

.scrollTop {
    position: absolute;
    bottom: 50px;
    right: -30px;
    width: 50px;
    height: 50px;
    z-index: 1;
}

.scrollTop>.wrap {
    position: fixed;
    bottom: 20px;
    border-radius: 50%;
    line-height: 50px;
    width: 50px;
    background-color: #ddd;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    box-shadow: 1px 2px 3px #aaa;
}

.sidebartitle {
    font-size: 11px;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 10px;
}

.nav-bracket {
    margin-bottom: 30px;
}

.nav-bracket>li>a {
    color: #8f939e;
    padding: 7px 10px;
}

.nav-bracket>li>a:hover,
.nav-bracket>li>a:active,
.nav-bracket>li>a:focus {
    background-color: #fff;
    color: #1d2939;
    -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}

.nav-bracket>li.nav-parent>a {
    background: transparent url(../images/plus-white.png) no-repeat 92% center;
}

.nav-bracket>li.nav-parent>a:focus {
    background-color: none;
    color: #8F939E;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.nav-bracket>li.nav-parent>a:hover,
.nav-bracket>li.nav-parent>a:active {
    color: #1d2939;
    background-color: #fff;
    background-image: url(../images/plus.png);
}

.nav-bracket>li.nav-active>a {
    background-color: #fff;
    background-image: url(../images/minus.png);
    color: #1d2939;
    -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}

.nav-bracket>li.nav-active>a:hover {
    background-image: url(../images/minus.png);
    background-repeat: no-repeat;
}

.nav-bracket>li.nav-active>a:focus {
    color: #1d2939;
}

.nav-bracket>li.active>a,
.nav-bracket>li.active>a:hover,
.nav-bracket>li.active>a:focus {
    background-color: #1caf9a;
    color: #fff;
}

.nav-bracket>li.active>a {
    -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}

.nav-bracket>li.nav-parent.active>a {
    background-image: url(../images/plus.png);
}

.nav-bracket>li.nav-active.active>a {
    background-image: url(../images/minus.png);
}

.nav-bracket>li.nav-active.active>a:hover {
    background-image: url(../images/minus.png);
}

.nav-bracket li .fa,
.nav-bracket li .glyphicon {
    font-size: 16px;
    vertical-align: middle;
    margin-right: 10px;
    width: 16px;
    text-align: center;
}

.nav-bracket>li>a>.badge {
    margin-top: 2px;
}

.nav-bracket .children {
    list-style: none;
    display: none;
    margin: 5px 0;
    padding: 0;
}

.nav-bracket .children>li>a {
    color: #94989d;
    font-size: 13px;
    display: block;
    padding: 5px 0 5px 27px;
    -moz-transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
}

.nav-bracket .children>li>a>span {
    margin-top: 2px;
}

.nav-bracket .children>li>a:hover,
.nav-bracket .children>li>a:active,
.nav-bracket .children>li>a:focus {
    text-decoration: none;
    color: #1caf9a;
}

.nav-bracket .children>li .fa {
    font-size: 12px;
    opacity: 0.5;
    margin-right: 5px;
    text-align: left;
    width: auto;
    vertical-align: baseline;
}

.nav-bracket .children>li.active>a {
    color: #1caf9a;
}

.nav-bracket .children ul {
    margin-left: 12px;
    border: 0;
}

.infoprofile {}

.infoprofile>ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.infoprofile>ul>li {
    padding: 5px 0;
}

.infoprofile ul:after {
    clear: both;
    display: block;
    content: '';
}

.infostatus {
    border-top: 1px solid #e3e6f3;
    border-bottom: 1px solid #e3e6f3;
    margin: 5px 0;
    padding: 10px 0;
}

.infostatus ul {
    text-align: center;
}

.infostatus ul>li {
    width: 33%;
    cursor: pointer;
}

.infostatus h2 {
    font-size: 25px;
    margin: 0;
}

.infoprofile .mypoint {
    cursor: pointer;
}

.infoprofile .mypoint .round {
    border-radius: 5px;
    background-color: #fff;
    padding: 5px;
}

.infoprofile .myreport .row,
.infoprofile .mypoint .row {
    margin-left: 0px;
    margin-right: 0px;
}

.infoprofile .mypoint .btline {
    border-bottom: 2px solid #333;
    line-height: 50px;
}

.infoprofile .mypoint i.fa-wallet,
.infoprofile .myreport i.fa-tachometer-alt {
    font-size: 4em;
    color: #999;
    margin: 5px 0px 0px;
}

.infoprofile .myreport {
    cursor: pointer;
}

.infoprofile .score {
    padding-top: 25px;
    text-align: right;
    line-height: 25px;
    border-bottom: 2px solid #333;
}

.infoprofile .myreport b {
    color: #d9534f;
    font-size: 20px;
}

.infoprofile .mypoint b {
    color: #d9534f;
    font-size: 20px;
    line-height: 0;
    vertical-align: bottom;
    display: inline-block;
    margin-bottom: 14px;
}

.contentpanel>.row {
    background-color: #FFF;
}


/***** 4.2 INFO SUMMARY *****/

.infosummary {
    margin: 30px 0;
}

.infosummary ul {
    padding: 0;
    margin: 20px 0 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.infosummary li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.infosummary li:after {
    clear: both;
    display: block;
    content: '';
}

.infosummary .datainfo {
    float: left;
    line-height: normal;
}

.infosummary .datainfo h4 {
    margin: 0;
    font-size: 16px;
    color: #fff;
    opacity: 0.7;
}

.infosummary span {
    font-size: 11px;
    line-height: normal;
    text-transform: uppercase;
    font-size: 10px;
    opacity: 0.4;
}

.infosummary .chart {
    float: right;
    margin-top: 5px;
    opacity: 0.6;
}


/********** 5. MAIN PANEL **********/

section > .view {
    display: none;
    min-height: 100vh;
}

section > .view > iframe {
    width: 100%;
    height: 100dvh;
    position: absolute;
    top: 0px;
    left: 0px;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        visibility: visible;
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        visibility: hidden;
        opacity: 0;
    }
}

section>.view:last-child {
    display: block;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.mainpanel {
    padding-top: 70px;
}

.single-panel {
    margin: 0px;
    background: #f1f4f9;
    min-height: auto;
}

.pageheader {
    padding: 15px;
    border-bottom: 1px solid #d3d7db;
    border-top: 1px solid #eee;
    background: #f7f7f7;
    position: relative;
}

.pageheader h2 {
    font-size: 28px;
    color: #1D2939;
    letter-spacing: -0.5px;
    margin: 0;
}

.pageheader .glyphicon,
.pageheader .fa {
    font-size: 24px;
    margin-right: 5px;
    padding: 6px 7px;
    border: 2px solid #1D2939;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

.pageheader .fa.fa-pencil {
    padding: 6px 9px;
}

.pageheader .fa.fa-hand-o-up {
    padding: 6px 9px 6px 7px;
}

.pageheader .fa-file-o {
    padding: 6px 10px;
}

.pageheader .fa-user {
    padding: 6px 10px;
}

.pageheader .fa-file-text {
    padding: 6px 10px;
}

.pageheader .fa-map-marker {
    padding: 6px 12px;
}

.pageheader .fa-dollar {
    padding: 6px 12px;
}

.pageheader .fa-clock-o {
    padding: 6px 8px;
}

.pageheader h2 span {
    font-size: 13px;
    text-transform: none;
    color: #999;
    font-style: italic;
    vertical-align: middle;
    letter-spacing: 0;
}

.pageheader h2 span::before {
    content: '/';
    margin: 0 10px 0 5px;
    color: #ccc;
}

.pageheader .breadcrumb-wrapper {
    position: absolute;
    top: 23px;
    right: 25px;
}

.pageheader .breadcrumb-wrapper .label {
    color: #999;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: normal;
    display: inline-block;
}

.pageheader .breadcrumb {
    background: none;
    display: inline-block;
    padding: 0;
}

.pageheader .breadcrumb li {
    font-size: 12px;
}

.pageheader .breadcrumb li.active {
    color: #333;
}

.contentpanel {
    padding: 20px;
    position: relative;
}

.contentpanel::after {
    clear: both;
    display: block;
    content: '';
}

.modal-body .contentpanel {
    padding: 0px;
}

form .form-group:last-child {
    margin-bottom: 0;
}


/********** 11. LEFT PANEL COLLAPSED **********/


/**********************************************/

.leftpanel-collapsed .logopanel {
    display: none;
}

.leftpanel-collapsed .headerbar {
    margin-left: -50px;
}

.leftpanel-collapsed .leftpanel {
    width: 50px;
    top: 50px;
}

.leftpanel-collapsed .leftpanel .leftpanelinner {
    padding: 0;
    margin-top: 55px;
}

.leftpanel-collapsed .leftpanelinner .sidebartitle {
    display: none;
}

.leftpanel-collapsed .nav-bracket {
    margin: 5px;
}

.leftpanel-collapsed .nav-bracket li a {
    text-align: center;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    padding: 10px;
    line-height: 22px;
    position: relative;
}

.leftpanel-collapsed .nav-bracket>li>a:hover {
    border-radius: 2px 0 0 2px;
}

.leftpanel-collapsed .nav-bracket>li.nav-parent>a {
    background-image: none;
}

.leftpanel-collapsed .nav-bracket>li>a>span:last-child {
    position: absolute;
    background: #fff;
    padding: 10px 10px 10px 5px;
    left: 40px;
    top: 0;
    min-width: 209px;
    text-align: left;
    z-index: 100;
    display: none;
    -moz-box-shadow: 0 3px 0 rgba(12, 12, 12, 0.03);
    -webkit-box-shadow: 0 3px 0 rgba(12, 12, 12, 0.03);
    box-shadow: 0 3px 0 rgba(12, 12, 12, 0.03);
    -moz-border-radius: 0 2px 2px 0;
    -webkit-border-radius: 0 2px 2px 0;
    border-radius: 0 2px 2px 0;
}

.leftpanel-collapsed .nav-bracket>li>a .badge {
    display: none;
}

.leftpanel-collapsed .nav-bracket>li.active>a>span:last-child {
    -moz-border-radius: 0 2px 0 0;
    -webkit-border-radius: 0 2px 0 0;
    border-radius: 0 2px 0 0;
}

.leftpanel-collapsed .nav-bracket ul {
    display: none;
}

.leftpanel-collapsed .nav-bracket>li.nav-hover>a {
    background: #fff;
    color: #1d2939;
}

.leftpanel-collapsed .nav-bracket>li.nav-hover.active>a {
    background: #1CAF9A;
    color: #fff;
}

.leftpanel-collapsed .nav-bracket>li.nav-hover>a>span:last-child {
    display: block;
}

.leftpanel-collapsed .nav-bracket>li.nav-hover.active>a>span:last-child {
    background: #1CAF9A;
    color: #fff;
}

.leftpanel-collapsed .nav-bracket li.nav-hover ul {
    display: block;
    position: absolute;
    top: 41px;
    left: 45px;
    margin: 0;
    min-width: 204px;
    background: #1d2939;
    z-index: 100;
    -moz-border-radius: 0 0 2px 0;
    -webkit-border-radius: 0 0 2px 0;
    border-radius: 0 0 2px 0;
}

.leftpanel-collapsed .nav-bracket ul a {
    text-align: left;
    padding: 6px 10px;
    padding-left: 0;
}

.leftpanel-collapsed .nav-bracket ul a:hover {
    background: none;
}

.leftpanel-collapsed .nav-bracket li a i {
    margin-right: 0;
}

.leftpanel-collapsed .mainpanel {
    margin-left: 50px;
}

.leftpanel-collapsed .infosummary {
    display: none;
}

.leftpanel-collapsed .sticky-leftpanel {
    overflow-y: visible;
}

.leftpanel-collapsed .nav-bracket .children {
    display: none;
}


/***** 17.2 ICON *****/

.tp-icon {
    padding: 10px 20px;
    line-height: 20px;
    border-color: #ddd;
    position: relative;
}

.tp-icon .badge {
    position: absolute;
    font-size: 10px;
    font-weight: normal;
    right: 4px;
    top: 10px;
    line-height: 13px;
    background-color: #D9534F;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    padding: 2px 5px;
}


/***** 17.5 STICKY HEADER */

.stickyheader .logopanel {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    z-index: 100;
}

.stickyheader .leftpanel {
    top: 50px;
    background: #1d2939;
}

.stickyheader .sticky-leftpanel {
    top: 0;
}

.stickyheader .leftpanelinner {
    margin-top: 0px;
}

.stickyheader .headerbar {
    position: fixed;
    top: 0;
    left: 240px;
    width: 100%;
    z-index: 103;
    box-shadow: 0 1px rgba(0, 0, 0, 0.05);
}

.single-panel .headerbar {
    left: 0px;
}

.stickyheader .mainpanel {
    padding-top: 50px;
}

.stickyheader .header-right {
    margin-right: 240px;
}

.single-panel .header-right {
    margin-right: 0px;
}

.stickyheader.leftpanel-collapsed .headerbar {
    left: 50px;
}

.stickyheader.leftpanel-collapsed .header-right {
    margin-right: 0;
}

.stickyheader.chat-view .headerbar {
    right: 240px;
    width: auto;
}


/***** 9.5 PROFILE STYLES *****/

.img-profile {
    display: inline-block;
    max-width: 200px;
}

.hprofile .img-profile {
    max-width: 90px;
    cursor: pointer;
}

.hprofile .progress {
    background-color: #EFEFEF;
}

.img-online {
    border: 2px solid #5cb85c;
    padding: 2px;
    background-color: #fff;
}

.img-offline {
    border: 2px solid #ccc;
    padding: 2px;
    background-color: #fff;
}

.nav-center {
    text-align: center;
}

.nav-center>li {
    display: inline-block;
    float: initial;
}

.nav-line {
    background: none;
    border: 0;
    margin-bottom: 3px;
    -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
}

.nav-fixed {
    z-index: 99;
    position: fixed;
    top: 50px;
    left: 0;
    width: 100%;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 0px;
}

.nav-fixed>li {
    float: none;
    display: inline-block;
}

.nav-fixed>li>a {
    padding: 10px 20px;
    font-size: 13px;
}

.nav-line>li {
    margin: 0;
}

.nav-tabs>li>a {
    font-size: 15px;
    font-weight: 300;
}

.nav-line>li>a,
.nav-line>li>a:hover,
.nav-line>li>a:active,
.nav-line>li>a:focus {
    border: 0;
    margin: 0 !important;
    font-weight: 300;
}

.nav-line>li.active>a,
.nav-line>li.active>a:hover,
.nav-line>li.active>a:active,
.nav-line>li.active>a:focus {
    background-color: transparent;
    border: 0;
    font-weight: 500;
}

.nav-line>li.active>a,
.nav-line>li.active>a:hover,
.nav-line>li.active>a:active,
.nav-line>li.active>a:focus {
    -moz-box-shadow: 0 3px 0 #428bca;
    -webkit-box-shadow: 0 3px 0 #428bca;
    box-shadow: 0 3px 0 #428bca;
    margin: 0;
    color: #000;
}

.box-tabs:after {
    clear: both;
    display: block;
    content: '';
}

.tabs-left .nav-tabs {
    float: left;
    border: none;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

.tabs-left .nav-tabs>li {
    float: none;
    margin: 0px;
}

.tabs-left>.nav-tabs>li.active>a {
    margin: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border: none;
}

.tabs-left .tab-content {
    overflow: hidden;
    border: none;
}

.tabs-vertical .nav-tabs {
    border: none;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

.tabs-vertical .nav-tabs>li {
    float: none;
    margin: 0px;
}

.tabs-vertical>.nav-tabs>li.active>a {
    margin: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border: none;
}

.tabs-vertical .tab-content {
    overflow: hidden;
    border: none;
}

.tab-content {
    position: relative;
}

.form-control {
    border: 1px solid #e3e6f3;
    border-radius: 2px;
    box-shadow: none;
    -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
    transition: border .25s linear, color .25s linear, background-color .25s linear;
    -webkit-appearance: none;
    font-weight: 400;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
}

.form-control:focus,
#focusedInput {
    outline: 0;
    border-color: #ccc;
    box-shadow: none;
}

.no-resize {
    resize: none;
}

.postbx {
    box-shadow: none;
    border-radius: 2px;
    position: relative;
}

.postbx textarea {
    border: none;
}

.modal .postbx textarea {
    border: 1px solid #ccc;
}

body>.postbx textarea {
    border: 1px solid #ccc;
    margin-bottom: 5px;
}

.postbx .wrappost {
    background-color: #fcfcfc;
}

.postbx.active .wrappost {}

.editbx .items {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.editbx .items .item {
    width: 80px;
    height: 80px;
    position: relative;
    display: inline-block;
    margin: 5px 0 0 5px;
    padding: 0px;
}

.editbx .items .item .symbol {
    position: absolute;
    width: 100%;
    height: 100%;
}

.editbx .items .item .symbol>i {
    font-size: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.editbx .items .item .prop {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: rgba(0, 0, 0, .5);
}

.editbx .items .item .prop .title {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    white-space: nowrap;
    padding: 2px 5px;
    color: #fff;
    font-size: 12px;
    margin: 0px;
}

.editbx .items .item .prop .progress {
    height: 5px;
    margin: 2px;
}

.editbx .items .item .bg {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.editbx .items .item:hover .bg {
    display: inline-block;
}

.editbx .items .item .bg span[data-role="remove"]:hover {
    color: #fff;
}

.editbx .items .item span[data-role="remove"] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    color: #fff;
    text-align: center;
    margin: 0px;
    z-index: 2;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.editbx .items .item:hover .symbol::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    z-index: 1;
}

.editbx .items .item:hover span[data-role="remove"] {
    display: inline-block;
}

.editbx .items .item .title {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    padding: 2px 5px;
    margin: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    line-height: 13px;
}

.editbx .items .item .ico-type,
.editbx .items .item .ico {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3em;
}

.editbx .linkbx {
    padding: 5px;
    position: relative;
}

.editbx .linkbx span[data-role="remove"] {
    position: absolute;
    padding: 5px;
    right: 5px;
    color: #fff;
    font-size: 30px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    cursor: pointer;
    display: none;
}

.editbx .linkbx:hover span[data-role="remove"] {
    display: block;
}

.editbx .linkbx img.thumb {
    max-width: 100%;
}

.postbx .users {
    padding: 5px;
}

.postbx .users .user {
    width: 40px;
    height: 40px;
    display: inline-block;
    overflow: hidden;
    position: relative;
    margin-right: 5px;
    background-color: #eee;
    text-align: center;
}

.postbx .users .user.circle {
    border-radius: 50%;
}

.postbx .users .user .bg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    text-align: center;
    color: #fff;
    font-size: 25px;
    line-height: 35px;
    display: none;
}

.postbx .users .user:hover .bg {
    display: block;
}

.postbx .users .user img {
    width: 100%;
    height: 100%;
}

.postbx .users .user i {
    font-size: 25px;
    padding-top: 10px;
}

.postbx .panel-footer {
    padding: 10px;
    background-color: #fcfcfc;
}


/* 접근권한 */

.roles-bx .users {
    padding: 4px;
    text-align: left;
    padding-left: 8px;
}

.roles-bx .users .user {
    width: 40px;
    height: 40px;
    display: inline-block;
    overflow: hidden;
    position: relative;
    margin-right: 5px;
    background-color: #eee;
    text-align: center;
}

.roles-bx .users .user.circle {
    border-radius: 50%;
    background-color: #eee;
}

.roles-bx .users .user .bg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    text-align: center;
    color: #fff;
    font-size: 25px;
    line-height: 35px;
    display: none;
}

.roles-bx .users .user:hover .bg {
    display: block;
}

.roles-bx .users .user>img {
    width: 100%;
    height: 100%;
}

.roles-bx .users .user i {
    font-size: 25px;
    padding-top: 10px;
}

.panel-timeline {
    box-shadow: none;
    position: relative;
}

.panel-timeline .panel-heading {
    padding: 10px 10px 6px 10px;
    border-bottom: 0;
}
.panel-timeline .panel-status {
    position: absolute;
    left: -20px;
    margin-top: 8px;
    background-color: #F9BC28;
    padding: 4px;
    border-radius: 4px;
}
.panel-timeline .panel-status span{
    font-size: 12px;
}
.panel-timeline .panel-body {
    padding: 0 10px;
}
.panel-timeline .panel-body .hashtag {
    color: #5f5f5f;
    font-size: 13px;
}
.panel-timeline .panel-body .desc {
    margin: 5px 0px 5px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 300;
}

.panel-timeline:hover .panel-heading .option {
    display: block;
}

.panel-timeline .panel-heading .option {
    position: absolute;
    top: 5px;
    right: 5px;
    display: none;
}

.panel-timeline .panel-heading .option .btn {
    padding: 5px;
    background: none;
    border: none;
    line-height: 1px;
    color: #777;
    text-shadow: none;
}

.panel-timeline .panel-heading .media {
    margin: 0;
    padding: 0;
}

.panel-timeline .panel-heading .media-object,
.panel-timeline .panel-footer .media-object {
    width: 32px;
}

.view-list .panel-body .media,
.panel-timeline .panel-body .media {
    margin-top: 5px;
    padding: 2px;
    background-color: #fff;
}

.panel-timeline .panel-body .media[type="avi"] {
    text-align: center;
}

.panel-timeline .panel-body .media:nth-child(n+3) {
    display: none;
}

.view-list .panel-body .media.image,
.panel-timeline .panel-body .media.image {
    margin-top: 0px;
}

.view-list .panel-body .media.image .media-object,
.panel-timeline .panel-body .media.image .media-object {
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 150px;
    cursor: pointer;
    background-position: top center;
}

.panel-body .media.image .media-object:hover {
    background-size: contain;
}

.panel-timeline .panel-body .itemview.allview .media {
    display: block;
}

.panel-timeline .panel-body .itemview.allview .vmore {
    display: none;
}

.view-list .panel-body .media.link {}

.view-list .panel-body .media.link .thumb {
    width: 100%;
}

.view-list .panel-body .media.link .thumb.vthumb {
    width: 35%;
    padding-right: 5px;
    float: left;
}

.panel-timeline .panel-body .vmore {
    padding: 5px 10px;
    background-color: #fff;
    cursor: pointer;
}

.panel-timeline .panel-body .vmore:hover {
    background-color: #f9f9f9;
    color: #000;
}

.view-list .panel-body .media-object,
.panel-timeline .panel-body .media-object {
    max-width: 100%;
}

.view-list .panel-body .media.file .ico,
.panel-timeline .panel-body .media.file .ico {
    padding: 11px;
    background-color: #eee;
}

.view-list .panel-body .media .pull-left {
    width: 100px;
    padding: 5px 10px 5px 5px;
    text-align: center;
}

.view-list .panel-body .media.file .pull-left {
    width: 50px;
}

.view-list .panel-body .media .pull-left img {
    -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

.panel-timeline .panel-body .media .media-body.info {
    display: inline-block;
}

.panel-timeline .panel-body .media .media-body.info h5.name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    padding: 3px 0px;
}

.panel-timeline .panel-body .media .media-body.info time {}

.panel-timeline .panel-body .media h5 {
    margin: 5px 0px 1px;
    font-size: 13px;
    font-weight: 300;
}

.panel-timeline .panel-body .media img {
    width: 100%;
    cursor: pointer;
}

.panel-timeline .panel-body .media.avi video {
    width: 100%;
}

.panel-timeline .panel-body .media.file .info .size {
    font-size: 11px;
}

.panel-timeline .panel-body .img-paper {
    border: 1px solid #eee;
    min-height: 70px;
}

.panel-timeline .panel-body h4 {
    font-size: 14px;
    margin-top: 5px;
    color: #333;
}

.panel-timeline h4 {
    margin: 0;
    font-size: 13px;
    line-height: normal;
}

.panel-timeline .panel-footer {
    padding: 5px 10px;
}

.panel-timeline .panel-footer .form-control {
    padding: 8px 10px;
    border-radius: 0;
}

.panel-timeline .panel-footer .comments {}

.panel-timeline .panel-footer .comments .comment {
    margin: 5px 0px;
}

.panel-timeline .panel-footer .comments .comment.del p,
.panel-timeline .panel-footer .comments .comment.del .name,
.panel-timeline .panel-footer .comments .comment.del {
    color: #999;
}

.panel-timeline .panel-footer .comments .comment .name {
    margin-right: 5px;
    color: #9b712c;
}

.panel-timeline .panel-footer .comments .comment time {
    font-size: 11px;
}

.panel-timeline .panel-footer .comments .comment p {
    color: #333;
    margin-bottom: 5px;
    font-weight: 300;
}

.panel-timeline .panel-footer .comments .comment .cmd {
    margin-bottom: 10px;
}

.panel-timeline .panel-footer .comments .comment .cmd>a {
    color: #555;
}

.panel-timeline .panel-footer .comments .comment .cmd>a:hover {
    color: #000;
}

.panel-timeline .panel-footer .comments .comment .cmd>a>i {
    margin-right: 3px;
}

.wrapboard .commentbx {
    padding: 5px;
}

.commentbx .media-object {
    width: 32px;
}

.wrapboard .commentbx .media-object {
    width: 60px;
}

.wrapboard .commentbx .message {
    line-height: 22px;
    margin-top: 5px;
    font-size: 15px;
}

.wrapboard .commentbx .cmd a {
    font-weight: 300;
    color: #aaa;
    font-size: 13px;
}

.wrapboard .commentbx .cmd a:hover {
    color: #333;
}

.commentbx textarea {
    height: 38px;
    overflow-y: hidden;
    resize: none;
    margin-bottom: 5px;
}

.commentbx .postbx.board {}

.commentbx .postbx.board .wrapbx {
    background-color: #F9F9F9;
    padding: 10px;
}

.commentbx .postbx.board textarea {
    height: auto;
    margin: 0px;
}

.commentbx .postbx.board .toolbar {
    padding: 10px 0px 0px 5px;
    text-align: right;
}

.commentbx .btn-cancel {
    display: none;
}

.postbx.reply .btn-cancel,
.postbx.edit .btn-cancel,
.commentbx.reply .btn-cancel,
.commentbx.edit .btn-cancel {
    display: inline-block;
}

.wrapboard .commentbx .comments {}

.wrapboard .commentbx .comments .comment {
    padding: 10px 0px 5px;
    margin: 10px 0;
}

.wrapboard .commentbx .comments .comment:not(:first-child) {
    border-top: 1px dotted #eee;
}

.wrapboard .commentbx .comments .comment.del {
    color: #aaa;
}

.panel-timeline ul {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 21px;
}

.timeline-btns {
    padding: 5px;
}

.timeline-btns a {
    display: inline-block;
    font-size: 14px;
    width: 20px;
    height: 20px;
    color: #ccc;
    text-align: center;
    margin-right: 5px;
}

.timeline-btns a:hover {
    color: #666;
}

#activity .empty {
    margin: 40px 0px;
    text-align: center;
    color: #ccc;
}

.blog-media {
    padding-bottom: 0;
}

.blog-media .media-object {
    width: 120px;
    margin-right: 10px;
    margin-top: 5px;
}

.blog-media .media-title {
    margin: 0;
}

.ul-nostyle {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.ul-list {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.ul-list>li {
    float: left;
}

.ul-list>li.alright {
    float: right;
}

.ul-list:after {
    clear: both;
    display: block;
    content: '';
}

.ul-iblock,
.ul-block {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.ul-iblock>li,
.ul-block>li {
    display: inline-block;
}


/***** 17.1 DROPDOWN *****/

.dropdown-menu-head {
    background: #fff
}

.dropdown-menu-head .title {
    background: #1d2939;
    color: #94989d;
    padding: 15px;
    text-transform: uppercase;
    font-size: 11px;
    margin: 0;
}


/****************** MyPage ***********************/

.mypageview .lectures.list>div {
    width: 100%;
    margin-bottom: 5px;
}

.mypageview .lectures.list>div.lecture {
    box-shadow: initial;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 0px;
}

.mypageview .lectures.list>div>.lecture .info {
    margin-left: 110px;
    overflow: hidden;
}

.mypageview .lectures.list>div>.lecture .bgImg2 {
    width: 100px;
    float: left;
}

.mypageview .lectures.list>div>.lecture .info .expire {
    padding: 0 0 10px;
    text-align: left;
    height: auto;
}

.mypageview .lectures.list>div>.lecture .info .cmd {
    display: block;
}

.mypageview .lectures .lecture.box .cate {
    text-align: left;
    position: relative;
    top: 0px;
}

.mypagepanel .contentpanel>.wrapcontent {
    max-width: 1000px;
    margin: 0 auto;
}

.mypagepanel .contentpanel>.wrapcontent .hprofile {
    padding: 15px 0;
}

.mypagepanel .contentpanel>.wrapcontent .hprofile .addr {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cardinfo {
    overflow: hidden;
    position: relative;
}

.cardinfo .thumb {
    float: left;
    width: 230px;
    padding: 5px;
}

.cardinfo .profile {
    margin-left: 230px;
    padding: 10px 5px;
}

.cardinfo .profile .benefit {
    display: inline-block;
    vertical-align: top;
}

.cardinfo .card {
    position: relative;
    width: 100%;
    height: 130px;
    display: inline-block;
    padding: 10px;
    border-radius: 5px;
    color: #000;
    background: #faad43 url(/skins/default/images/home/kids/char_05.png) no-repeat 105% 105%;
    background-size: 25%;
    box-shadow: 1px 2px 2px #ccc;
}

.cardinfo .card.ic {
    background: #8bc34a url(/skins/default/images/home/kids/char_03.png) no-repeat 105% 105%/30%;
    color: #fff;
}

.cardinfo .card .balance {
    display: inline-block;
    line-height: 30px;
    font-size: 20px;
    font-weight: 700;
    padding: 1px 10px;
    border-radius: 5px;
    border-bottom: 2px solid #fff;
    background-color: rgba(255, 255, 255, .5);
}

.cardinfo .card.ic .balance {
    text-shadow: 1px 1px 1px #000;
}

.cardinfo .card label {
    content: '잔액';
    font-size: 12px;
    color: #fff;
    margin-right: 10px;
}

.cardinfo .card .balance::after {
    content: '원';
    font-size: 15px;
    margin-left: 2px;
}

#mypage_dashboard > .row {
    margin-bottom: 10px;
}

#mypage_dashboard .excels {
    padding: 30px 10px 10px;
    margin: 20px 0;
    background-color: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

#mypage_dashboard .excels::before {
    content: 'excel download';
    background-color: #333;
    color: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 3px 15px;
    border-bottom-right-radius: 10px;
}

#mypage_dashboard .excels ul li+li {
    margin-left: 5px;
}

#mypage_dashboard .excels .btn {
    border-radius: 50%;
    width: 70px;
    height: 70px;
    line-height: 60px;
    text-align: center;
}

#mypage_dashboard .excels .btn>span {
    display: block;
}

#mypage_dashboard .mtitle {
    position: relative;
}

#mypage_dashboard .mtitle>.btns {
    position: absolute;
    top: -5px;
    right: 5px;
}

#mypage_dashboard .smryboard {}

#mypage_dashboard .smryboard .box {
    padding: 10px;
    color: #fff;
    border-radius: 10px;
    position: relative;
    margin-bottom: 10px;
    min-height: 210px;
    cursor: pointer;
}

#mypage_dashboard .smryboard .box.bg-success h1,
#mypage_dashboard .smryboard .box.bg-primary h1 {
    font-size: 60px;
    line-height: 155px;
}

#mypage_dashboard .smryboard .box::after {
    position: absolute;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 60px;
    opacity: .3;
    bottom: 5px;
    left: 0;
}

#mypage_dashboard .smryboard .box.bg-primary::after {
    content: '\f234';
}

#mypage_dashboard .smryboard .box.school::after {
    content: '\f549';
}

#mypage_dashboard .smryboard .box.board::after {
    content: '\f51b';
}

#mypage_dashboard .smryboard .box.bg-success::after {
    content: '\f0c0';
}

#mypage_dashboard .smryboard .box.bg-danger::after {
    content: '\f81d';
}

#mypage_dashboard .smryboard .box>label {
    font-size: 13px;
    color: #fff;
}

#mypage_dashboard .smryboard .box>h1 {
    text-align: right;
    margin: 20px 0px;
    position: relative;
    z-index: 1;
    font-size: 50px;
    line-height: 90px;
}

#mypage_dashboard .smryboard .box>h1>small {
    font-size: 15px;
    color: #fff;
}

#mypage_dashboard .smryboard .box .detail {
    text-align: center;
    color: #fff;
}

#mypage_dashboard .smryboard .box .detail span {
    display: block;
    padding: 5px 0px;
    border-bottom: 1px solid #fff;
}

#mypage_dashboard .smryboard .box .detail h5 {
    font-size: 17px;
}

#mypage_dashboard .smryboard .box .detail h5 small {
    color: #fff;
}

#mypage_dashboard .openmodal {
    cursor: pointer;
}

#mypage_dashboard table {
    margin: 0px;
}

#mypage_dashboard .widget .smryboard .box {
    min-height: initial;
}

#mypage_dashboard .widget .smryboard .box>h1 {
    font-size: 36px;
    line-height: 40px;
    margin: 10px 0;
}

#mypage_dashboard .widget {
    position: relative;
}

#mypage_dashboard .widgetgrp {
    position: relative;
}

#mypage_dashboard .widget a.title {
    color: #333;
    font-size: 13px;
    font-weight: 300;
}

#mypage_dashboard .widget .title {
    position: relative;
    font-weight: 600;
    margin-top: 20px;
}

#mypage_dashboard .widget .title>.btns {
    position: absolute;
    top: -5px;
    right: 0px;
    font-weight: 300;
}

#mypage_dashboard .widget .box {
    font-size: 14px;
    padding: 10px;
}

#mypage_dashboard .widget .widget-body.box {
    padding: 5px;
    min-height: 200px;
}

#mypage_dashboard .widget .widget-body.box table td {
    font-weight: 300;
    font-size: 14px;
    white-space: nowrap;
}

#mypage_dashboard .widget .widget-body table.fixed {
    table-layout: fixed;
}

#mypage_dashboard .widget .widget-body table.fixed td > a {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

#mypage_dashboard .widget .articles .article {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 300;
}

#mypage_dashboard .widget .articles .article .no {
    display: inline-block;
    width: 31px;
    text-align: center;
    margin-right: 5px;
}

#mypage_dashboard .widget .articles .article+.article {
    padding-top: 10px;
}

#mypage_dashboard .widget .articles .article.notice::before {
    content: '공지';
    display: inline-block;
    margin-right: 5px;
    font-size: 80%;
    background-color: #f99457;
    color: #fff;
    border-radius: 10px;
    padding: 2px 5px;
}

#mypage_dashboard .widget .fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: .5em;
}

#mypage_dashboard .widget .fc .fc-toolbar-title {
    font-size: 1em;
}

#mypage_dashboard .widget .fc .fc-button {
    padding: .2em .65em;
    font-size: 13px;
}

#mypage_dashboard .widget .fc .fc-daygrid-day-number {
    font-size: 12px;
}

#mypage_dashboard .widget .consults {
    min-height: 200px;
}

#mypage_dashboard .widget .consults>li {
    line-height: 33px;
    position: relative;
}

#mypage_dashboard .widget .consults>li::before {
    content: '대기';
    display: inline-block;
    margin-right: 5px;
    padding: 3px 5px 2px;
    background-color: #ccc;
    border-radius: 5px;
    line-height: initial;
    color: #fff;
    background-color: #d28060;
    font-size: 11px;
}

#mypage_dashboard .widget .consults>li.end::before {
    content: '완료';
    background-color: #ccc;
}

#mypage_dashboard .widget .consults>li>span {
    float: right;
}

#mypage_dashboard .widget .users.box {
    height: 200px;
    padding: 0px;
    overflow-y: auto;
}

#mypage_dashboard .widget .bxTimeTbl {
    margin: 10px 0;
    height: 250px;
    overflow-y: auto;
}

#mypage_dashboard .widget .bxTodayUsers {
    min-height: 300px;
}

#mypage_dashboard .widget .bxTimeZone {
    margin-top: 5px;
    padding: 5px 0;
}

#mypage_dashboard .widget .bxTimeZone .hour {
    position: relative;
    margin: 0px;
}

#mypage_dashboard .widget .bxTimeZone .hour label {
    background-color: #fff;
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 3px 5px;
}

#mypage_dashboard .widget .bxTimeZone .hour::before {
    content: '';
    position: absolute;
    top: 10px;
    border-top: 1px dashed #999;
    width: 100%;
}

#mypage_dashboard .widget .bxTimeZone .users {
    min-height: auto;
    padding: 0 15px 0 15px;
    border-left: 3px solid #e4aa9d;
    background-color: #fbf8f5;
}

#mypage_dashboard .widget .bxTimeZone .users > .user {
    position: relative;
    text-align: center;
    cursor: pointer;
}

#mypage_dashboard .widget .bxTimeZone .users > .user .thumb {
    float: none;
}

#mypage_dashboard .widget .bxTimeZone .users > .user .thumb > img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

#mypage_dashboard .widget .bxTimeZone .users > .user .name {
    font-size: 13px;
}

#mypage_dashboard .widget .bxTimeZone .users > .user .phone {
    font-size: 10px;
}

#mypage_dashboard .widget .bxTimeZone .users > .user .rtime {
    position: absolute;
    top: 10px;
    left: 0px;
    border-radius: 5px;
    min-width: 40px;
    text-align: center;
    line-height: 22px;
    font-size: 12px;
    background-color: #6f1189; 
    color: #fff;
}

#mypage_dashboard .widget .profile {
    position: relative;
    padding: 10px 5px 0px;
    font-size: 13px;
    margin: 5px;
}

#mypage_dashboard .widget .profile + .profile {
    border-top: 1px dashed #ccc;
}

#mypage_dashboard .widget .profile>.thumb {
    float: left;
    position: relative;
}

#mypage_dashboard .widget .profile>.prop {
    padding: 5px 5px 0px 50px;
    font-size: 13px;
    line-height: 20px;
}

#mypage_dashboard .widget .profile>.rdate {
    position: absolute;
    top: 5px;
    right: 0px;
    min-width: 50px;
    line-height: 35px;
    font-size: 13px;
    background-color: #000;
    color: #fff;
    padding: 0px 10px;
    border-radius: 5px;
    text-align: center;
}

#mypage_dashboard .widget table.tbl-monthlysale thead th:nth-child(even) {
    border-right: 1px double #fff;
}

.modal .smryboard .box {}

.modal .smryboard .box label {
    color: #fff;
}

.modal .smryboard .box h1 {
    color: #fff;
    text-align: right;
}

.modal .smryboard .box h1>small {
    color: #fff;
    font-size: 13px;
}

.modal .smryboard .profile {
    padding: 10px;
}

.modal .smryboard .profile .thumb {
    width: 50px;
    vertical-align: top;
    margin: 0 5px 0 !important;
}

/****************** MyPage > Dashboard ***********************/

.bxTodayUsers {
    position: relative;
    margin: 0;
}

.bxTodayUsers .month {
    color: #fff;
    display: block;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #000;
    text-align: center;
    margin: 0px auto;
}

.bxTodayUsers .btn {
    position: absolute;
    top: 45px;
}

.bxTodayUsers .btn.btnPrev {
    left: 0px;
}

.bxTodayUsers .btn.btnNext {
    right: 0px;
}

.bxTodayUsers .week {
    width: 90%;
    margin: 0 auto;
}

.bxTodayUsers .week > .day {
    width: 14.2%;
    margin: 0px;
    text-align: center;
    padding: 5px;
}

.bxTodayUsers .week > .day:not(.active) {
    cursor: pointer;
}

.bxTodayUsers .week > .day h2 {
    margin: 5px 0;
}

.bxTodayUsers .week > .day.active {
    background-color: #d9534f;
    border-radius: 10px;
}

.bxTodayUsers .week > .day.active {
    color: #fff;
    font-weight: 600;
}

.bxTodayUsers .week > .day.active span {
    color: #fff;
}

/****************** Dabisu Student Common ***********************/

.mainpanel.studentpanel .mnutoggle {
    position: fixed;
    z-index: 101;
    top: 0px;
    color: #333;
    line-height: 48px;
    padding: 10px 15px;
    border-radius: 0;
    font-size: 22px;
}

.mainpanel.studentpanel .headerbar {
    background-color: transparent;
    box-shadow: initial;
}

.overpanel .headerbar > div,
.mainpanel.studentpanel .headerbar > div {
    padding: 10px;
}

.mainpanel.studentpanel .headerbar > .header-left {
    padding-left: 60px;
}

.mainpanel.studentpanel .headerbar .btn {
    font-size: 22px;
    background: transparent;
    min-width: 50px;
    border: none;
    color: #333;
}

.mainpanel.studentpanel .headerbar .btn-user {
    padding: 0px;
}

.mainpanel.studentpanel .headerbar .btn-user img {
    width: 50px;
    margin: 0px;
}

.mainpanel.studentpanel .headerbar .btn-user span,
.mainpanel.studentpanel .headerbar .btn-user i {
    display: none;
}

.overpanel .headerbar .btn {
    font-size: 27px;
}

.overpanel .headerbar .page-title ,
.mainpanel.studentpanel .headerbar .page-title {
    display: inline-block;
    font-size: 27px;
    font-weight: normal;
    line-height: 50px;
    padding: 0px;
    color: #333;
}

.mainpanel.studentpanel .headerbar .page-title:hover,
.mainpanel.studentpanel .headerbar .page-title:focus {
    text-decoration: none;
    background: none;
}


.mainpanel.studentpanel .headerbar .headermenu li.search .btn {
    color: #333;
    margin-top: 10px;
}

.mainpanel .headerbar .btn img {
    height: 100%;
}

.mainpanel .headerbar .btn-profile {
    padding: 0px;
    border-radius: 50%;
    overflow: hidden;
}

.mainpanel .headerbar .btn-profile img {
}

/****************** MyPage Student ***********************/

.body_mypage .mainpanel.studentpanel {
    padding-top: 150px;
}

.body_mypage .mainpanel.studentpanel .headerbar {
    background-color: var(--yellow);
    height: 150px;
}

.body_mypage .view[name=mypage_default] .mainpanel.studentpanel .headerbar::before {
    content: '';
    position: absolute;
    left: 0px;
    bottom: -11px;
    width: 100%;
    height: 110px;
    background: url(/skins/default/images/dabisu/main_header_ch_s.png) no-repeat center bottom/auto 100%;
}


.body_mypage .mainpanel.studentpanel .contentpanel {
    padding: 80px 50px 180px;
}

.body_mypage .mainpanel.studentpanel .courses .course {
    display: inline-block;
    height: calc(100dvh - 415px);
    border: 1px solid #eee;
    border-radius: 30px;
    position: relative;
    box-shadow: 0px; 
    cursor: pointer;
}

.body_mypage .mainpanel.studentpanel .courses .victory .course {
    background: #fdcb1c url(/skins/default/images/dabisu/ch_ilbong_face.png) no-repeat bottom center/100% auto;
}

.body_mypage .mainpanel.studentpanel .courses .basic .course {
    background: #4db6e5 url(/skins/default/images/dabisu/ch_ssangssang_face.png) no-repeat bottom center/100% auto;
}

.body_mypage .mainpanel.studentpanel .courses .inter .course {
    background: #d14c75 url(/skins/default/images/dabisu/ch_odong_face.png) no-repeat bottom center/100% auto;
}

.body_mypage .mainpanel.studentpanel .courses .course .title {
    position: absolute;
    width: 70%;
    text-align: center;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50px;
    border: 5px solid #fff;
    margin: 0px;
    padding: 10px;
    background-color: #F9F9F9;
    font-family: "Nexon";
    font-weight: bold;
    font-size: 40px;
    color: #fff;
}

.body_mypage .mainpanel.studentpanel .courses .victory .course .title {
    background-color: #4db6e5;
}

.body_mypage .mainpanel.studentpanel .courses .basic .course .title {
    background-color: #9ece65;
}

.body_mypage .mainpanel.studentpanel .courses .inter .course .title {
    background-color: #f8c631;
}

.body_mypage .mainpanel.studentpanel .pagefooter {
    position: fixed;
    bottom: 0px;
    width: 100%;
}

.body_mypage .mainpanel.studentpanel .pagefooter .wrap {
}

.body_mypage .mainpanel.studentpanel .pagefooter .menubx {
    position: relative;
}

.body_mypage .mainpanel.studentpanel .pagefooter .menubx::before {
    content: '';
    position: absolute;
    width: 100%;
    background-color: #DDD;
    top: 35%;
    bottom: 0px;
}

.body_mypage .mainpanel.studentpanel .pagefooter .menubx.fleft::before {
    border-top-right-radius: 20px;
}

.body_mypage .mainpanel.studentpanel .pagefooter .menubx.fright::before {
    border-top-left-radius: 20px;
}

.body_mypage .mainpanel.studentpanel .pagefooter .btn {
    position: relative;
    margin: 0 50px;
    color: #000;
}

.body_mypage .mainpanel.studentpanel .pagefooter .btn i {
    background-color: rgba(255, 255, 255, 1);
    padding: 3px;
    border-radius: 5px;
}

.body_mypage .mainpanel.studentpanel .pagefooter .btn span {
    display: block;
    font-size: 17px;
    margin-top: 8px;
}


/********** Course ***********/

.body_course {
    overflow: hidden;
}

.body_course .mainpanel.studentpanel .contentpanel {
    padding: 150px 50px 200px;
    height: calc(100dvh - 60px);
    overflow-x: auto;
}

.body_course .mainpanel.studentpanel .contentpanel .mtitle {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 30px;
    border: 2px solid #000;
    background-color: #fff;
    padding: 7px 50px;
    margin: 0px;
    font-family: "Nexon";
    font-weight: bold;
    z-index: 2;
}

.body_course .mainpanel.studentpanel .contentpanel .mtitle::before,
.body_course .mainpanel.studentpanel .contentpanel .mtitle::after {
    content: '';
    position: absolute;
    top: -102px;
    width: 5px;
    height: 100px;
    background-color: #000;
}

.body_course .mainpanel.studentpanel .lectures {
    white-space: nowrap;
    height: 100%;
}

.body_course .mainpanel.studentpanel .lectures .lecture {
    display: inline-block;
    width: 30%;
    min-width: 300px;
    max-width: 400px;
    background-color: #EFEFEF;
    border: 1px solid #eee;
    border-radius: 20px;
    height: 100%;
    margin-right: 50px;
    cursor: pointer;
    transition: all .2s ease-out;
}

.body_course .mainpanel.studentpanel .lectures .lecture .title {
    text-align: center;
    font-size: 22px;
    background-color: #F9F9F9;
    padding: 7px;
    margin: 10px 10px;
    border-radius: 10px;
    font-family: "Nexon";
    font-weight: bold;
}

.body_course .mainpanel.studentpanel .lectures .lecture:hover {
    transform: scale(1.1);
}

/********** Student Lecture Roadmap ***********/

.body_lecture .mainpanel.studentpanel {
    padding: 0px;
    width: calc(736 * (100dvh / 414));
    height: 100dvh;
    background: url(https://i.pinimg.com/736x/0b/7c/a2/0b7ca29725d8acfe43e2b267894cc2ca.jpg) no-repeat left center/cover;
    overflow: hidden;
}

.body_lecture .mainpanel.studentpanel .contentpanel.roadmap {
    padding: 0px;
    position: relative;
    display: block;
    height: 100%;
}

.body_lecture .roadmap .lessons {
    height: 100%;
}

.body_lecture .roadmap .lessons .lesson {
    position: absolute;
    width: 10%;
    display: inline-block;
    background-color: rgba(255, 255, 255, .9);
    border-radius: 20px;
    top: 50%;
    box-shadow: 0 2px 5px #555;
}

.body_lecture .roadmap .lessons .lesson::before {
    content: '';
    display: block;
    padding-bottom: 100%;
}

.body_lecture .roadmap .lessons .lesson .no,
.body_lecture .roadmap .lessons .lesson .point {
    position: absolute;
}

.body_lecture .roadmap .lessons .lesson .no {
    font-family: "CookieRun";
    font-size: 17px;
    line-height: 27px;
    background-color: #333;
    color: #fff;
    border-radius: 10px;
    display: block;
    text-align: center;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid #fff;
    width: 70%;
    margin: 0px;
}

.body_lecture .roadmap .lessons .lesson .point {
    font-size: 27px;
    color: var(--yellow);
    text-shadow: 0 0 5px #791a04;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.body_lecture .roadmap .lessons .lesson:nth-child(1) {
    top: 25%;
    left: 2%;
}
.body_lecture .roadmap .lessons .lesson:nth-child(2) {
    top: 45%;
    left: 10%;
}
.body_lecture .roadmap .lessons .lesson:nth-child(3) {
    top: 35%;
    left: 23%;
}
.body_lecture .roadmap .lessons .lesson:nth-child(4) {
    top: 40%;
    left: 36%;
}
.body_lecture .roadmap .lessons .lesson:nth-child(5) {
    top: 20%;
    left: 46%;
}
.body_lecture .roadmap .lessons .lesson:nth-child(6) {
    top: 50%;
    left: 50%;
}
.body_lecture .roadmap .lessons .lesson:nth-child(7) {
    top: 45%;
    left: 63%;
}
.body_lecture .roadmap .lessons .lesson:nth-child(8) {
    left: 75%;
}
.body_lecture .roadmap .lessons .lesson:nth-child(9) {
    top: 30%;
    left: 84%;
}
.body_lecture .roadmap .lessons .lesson:nth-child(10) {
    top: 50%;
    left: 94%;
}

/********** Student Lecture ***********/

.body_lecture .mainpanel.studentpanel .contentpanel {
    height: calc(100dvh - 240px);
    padding: 10px 20px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.body_lecture .mainpanel.studentpanel .contentpanel .notepanel {
    position: relative;
    height: 80%;
    width: 80%;
}

.body_lecture .mainpanel.studentpanel .contentpanel .notepanel > div {
    height: 100%;
}

.body_lecture .mainpanel.studentpanel .contentpanel .notepanel .page {
    height: 100%;
    background-color: #EFEFEF;
    border-radius: 30px;
    position: relative;
}

.body_lecture .mainpanel.studentpanel .contentpanel .notepanel .page.left::before {
    content: '';
    position: absolute;
    top: 20%;
    right: -60px;
    width: 100px;
    height: 20px;
    border-radius: 20px; 
    background-color: #ddd;
    z-index: 2;
}

.body_lecture .mainpanel.studentpanel .contentpanel .notepanel .page.left::after {
    content: '';
    position: absolute;
    bottom: 20%;
    right: -60px;
    width: 100px;
    height: 20px;
    border-radius: 20px; 
    background-color: #ddd;
    z-index: 2;
}

.body_lecture .mainpanel.studentpanel .contentpanel .notepanel .page .wrap {
    height: 100%;
    width: 80%;
    margin: 0 auto;
}

.body_lecture .view > .lessons {
    position: fixed;
    bottom: 0px;
    width: 100%;
    background-color: #EFEFEF;
    padding: 10px 50px;
    white-space: nowrap;
    overflow-x: auto;
    z-index: 2;
    box-shadow: -2px 0 5px #ddd;
}

.body_lecture .view > .lessons .lesson {
    display: inline-block;
    width: 150px;
    height: 150px;
    background-color: #fff;
    border-radius: 15px;
    margin: 0 15px 0 0;
    cursor: pointer;
}

.body_lecture .view > .lessons .lesson:last-child {
}

.body_lecture .mainpanel.studentpanel .page.left {
    padding-top: 100px;
}

.body_lecture .mainpanel.studentpanel .page .title {
    position: absolute;
    top: 0px;
    left: 0px;
    text-align: center;
    font-size: 32px;
    font-family: "Nexon";
    font-weight: bold;
    margin: 0px;
    width: 100%;
    line-height: 100px;
}

.body_lecture .mainpanel.studentpanel .page .title .no {
    color: #fff;
    display: inline-block;
    border-radius: 10px;
    background-color: #594e8e;
    padding: 5px 15px;
    line-height: initial;
}

.body_lecture .mainpanel.studentpanel .page .videobx {
    position: relative;
    background-color: #fff;
    border-radius: 15px;
}

.body_lecture .mainpanel.studentpanel .page .item {
    position: relative;
    cursor: pointer;
}

.body_lecture .mainpanel.studentpanel .page .item::before {
    content: '';
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
}

.body_lecture .mainpanel.studentpanel .page .item[data-type=video]::before {
    content: '\f144';
}

.body_lecture .mainpanel.studentpanel .page .item[data-type=quiz]::before {
    content: '\f815';
}

.body_lecture .mainpanel.studentpanel .page .item[data-type=test]::before {
    content: '\f733';
}

.body_lecture .mainpanel.studentpanel .page .wrap .box {
    padding: 50px 0px 15px;
    border: none;
    background-color: transparent;
    display: inline-block;
    width: 100%;
    height: 50%;
}

.body_lecture .mainpanel.studentpanel .page.left .wrap .box {
    padding: 0px 0px 15px;
}

.body_lecture .mainpanel.studentpanel .page .wrap.single .box {
    height: 100%;
    padding: 0 0 50px;
}

.body_lecture .mainpanel.studentpanel .page .wrap.double .box {
    height: 50%;
}

.body_lecture .mainpanel.studentpanel .page .wrap.quad .box {
    height: 50%;
    width: calc((100% / 2) - 5px);
    padding: 50px 25px 25px 0;
}

.body_lecture .mainpanel.studentpanel .page.left .wrap.double .title + .box {
    height: 45%;
}

.body_lecture .mainpanel.studentpanel .page .wrap.quad .box:nth-child(3) {
    padding: 25px 25px 50px 0;
}

.body_lecture .mainpanel.studentpanel .page .wrap.quad .box:nth-child(even) {
    padding-left: 25px;
    padding-right: 0px;
}

.body_lecture .mainpanel.studentpanel .page.left .wrap.double .box + .box {
    padding: 15px 0px 30px;
}

.body_lecture .mainpanel.studentpanel .page .wrap.double .box + .box {
    padding: 15px 0px 50px;
}

.body_lecture .mainpanel.studentpanel .page .wrap .box .item {
    border-radius: 15px;
    background-color: #fff;
    height: 100%;
}



/********** book STYLES ***********/

.leftpanel .profile .wrap {
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) -o-linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) -moz-linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
    padding: 10px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.leftpanel .profile .wrap:after {
    clear: both;
    display: block;
    content: '';
}

.leftpanel .profile .book-cover {
    width: 80px;
    float: left;
    -moz-box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
    -webkit-box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
    box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
    opacity: 0.9;
    filter: alpha(opacity=90);
}

.leftpanel .profile .wrap .info {
    overflow-x: hidden;
    margin-left: 85px;
}

.leftpanel .profile .wrap .info h4 {
    line-height: 18px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leftpanel .profile .wrap .info .summary {
    list-style: none;
    margin: 0px;
    padding: 0px;
    font-size: 12px;
}

.sidepanel .mnuhead {
    background-color: #1A1A1A;
    font-size: 14px;
    color: #eee;
    border-top: 1px solid #333;
    line-height: 40px;
    padding: 0px 10px;
    position: relative;
    cursor: pointer;
}

.sidepanel .mnuhead .btn {
    color: #bbb;
    width: 30px;
    text-align: center;
    display: none;
    float: right;
}

.sidepanel.edit .mnuhead .btn {
    display: inline-block;
}

.sidepanel .mnucontent.index {
    padding: 5px;
    background-color: #1d1f26;
}

.sidepanel .mnucontent.index.sorton {
    background-color: rgba(0, 0, 0, 0.7);
}

.sidepanel>.index .section>.idx,
.sidepanel>.index .index>.idx {
    display: block;
}

.sidepanel .index .idx {}

.sidepanel.edit .index .expand>.addzone,
.sidepanel .index .expand>.idx {
    display: block;
}

.sidepanel .index .idx.expand>.mnu>a>i.fa-caret-right::before {
    content: "\f0d7";
}

.sidepanel .addzone {
    border: 1px dashed #445165;
    text-align: center;
    margin: 5px 0 5px 15px;
    padding: 5px 0px;
    font-size: 15px;
    cursor: pointer;
    display: none;
    background-color: rgba(0, 0, 0, 0.2);
}

body .preview .sidepanel .addzone {
    display: none !important;
}

.resrcview .sidepanel .addzone {
    display: none;
}

.cubeview .sidepanel .addzone {
    display: block;
    margin: 5px 0px;
}

.sidepanel .addzone:hover {
    background-color: #fff;
    opacity: 0.2;
    color: #000;
    border: 1px dashed #333;
}

.sidepanel .index .list>.mnu>a,
.sidepanel .index .midx>.mnu>a {
    border-bottom: 1px solid #343e4d;
}

.sidepanel .index .list>.mnu>a>i,
.sidepanel .index .midx>.mnu>a>i {
    display: inline-block;
    width: 10px;
}

.sidepanel .index .idx .mnu>a {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.sidepanel .index .mnu {
    position: relative;
}

.sidepanel .index .mnu>.cmd {
    display: none;
}

.wrap_player .list .clip .cmd,
.sidepanel .index .mnu .cmd {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    z-index: 1;
    font-size: 0px;
    display: none;
}

.wrap_player.edit .list .clip:hover .cmd,
.sidepanel.edit .index .mnu:hover .cmd {
    display: block;
}

.wrap_player .list .clip .cmd>a,
.sidepanel .index .mnu .cmd>a {
    padding: 5px;
    display: inline-block;
    width: 30px;
    text-align: center;
    font-size: 13px;
    color: #fff;
}

.wrap_player .list .clip .cmd>a.btn-edit,
.sidepanel .index .mnu .cmd>a.btn-edit {
    background-color: #d55959;
}

.wrap_player .list .clip .cmd>a.btn-del,
.sidepanel .index .mnu .cmd>a.btn-del {
    background-color: #598fd5;
}

.sidepanel .index .mnu>a {
    display: block;
    line-height: 30px;
    padding: 0 5px;
    margin: 3px 0;
    font-size: 12px;
    color: #bbb;
    text-decoration: none;
}

.sidepanel .index .midx>.mnu>a>span.no {
    display: inline-block;
    width: 15px;
    margin-right: 5px;
}

.sidepanel .index .idx>.mnu>a>span.cnt {
    display: inline-block;
    padding: 2px 5px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-color: #d5613b;
    color: #fff;
    line-height: 10px;
    font-size: 9px;
    margin-left: 5px;
}

.sidepanel .index .midx>.mnu>a>.expand-state {
    display: inline-block;
    width: 10px;
    font-size: 15px;
}

.sidepanel .index .mnu>a>span.no {
    display: inline-block;
    width: 20px;
}

.sidepanel .index .mnu>a>span.page {
    position: absolute;
    right: 15px;
}

.sidepanel.edit .index .idx .mnu>a>span.page {
    display: none;
}

.sidepanel .index .option {
    position: absolute;
    top: 0px;
    right: 0px;
    display: none;
    margin: 0px;
}

body .preview .sidepanel .index .mnu:hover>.option {
    display: none !important;
}

.sidepanel .index .option .btn {
    padding: 0px 15px;
    line-height: 30px;
    margin: 0px;
    border: none;
    background-color: transparent;
    font-size: 12px;
    color: #bbb;
}

.sidepanel .index .option .dropdown-menu {
    margin: 0px;
}

.sidepanel>.index .idx .option .mnu-copy {
    display: none;
}

.sidepanel .index .mnu.active>a,
.sidepanel .index .mnu:hover>a {
    background-color: #343e4d;
    color: #fff;
    text-decoration: none;
}

.preview .sidepanel .index .mnu>.option {
    display: none !important;
}

.touchon .cubeview .sidepanel .index .mnu .option,
.touchoff .cubeview .sidepanel .index .mnu:hover>.option,
.sidepanel.edit .index .mnu.edit .option,
.sidepanel.edit .index .idx .mnu.active .option,
.sidepanel.edit .index .mnu:hover>.option {
    display: inherit;
}

body .sidepanel>.active {
    display: inherit;
}

.overright>div,
.sidepanel>div {
    display: none;
}

.sidepanel.searchpanel .panel-body {
    padding: 10px 5px;
}

.sidepanel .nav-tabs {
    -moz-box-shadow: 0 3px 0 rgba(255, 255, 255, 0.5);
    -webkit-box-shadow: 0 3px 0 rgba(255, 255, 255, 0.5);
    box-shadow: 0 3px 0 rgba(255, 255, 255, 0.5);
    margin-bottom: 5px;
}

.sidepanel .nav-tabs>li>a {
    padding: 5px 40px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    color: #ccc;
    background-color: #343E4D;
}

.sidepanel .nav-tabs>li.active>a.hover,
.sidepanel .nav-tabs>li.active>a.focus,
.sidepanel .nav-tabs>li.active>a {
    color: #555;
    background-color: #fff;
}

.sidepanel .tab-content {}

.sidepanel .tab-content .condbox {
    padding-top: 5px;
}

.sidepanel .search2 .btn-search {
    width: 100%;
    margin-top: 10px;
}

.sidepanel .search2 .extract .btn-addcond {
    width: 100%;
}

.sidepanel .form-group {
    margin-bottom: 10px;
    margin-right: 0px;
    margin-left: 0px;
}

.sidepanel .tab-content .results {}

.sidepanel .tab-content .condlist,
.sidepanel .tab-content .results .item-list {
    margin: 0px;
    padding: 5px;
    background-color: rgba(52, 62, 77, 0.36);
    font-size: 12px;
    position: relative;
    min-height: 180px;
}

.sidepanel .tab-content .condlist {
    position: relative;
}

.sidepanel .tab-content .condlist>.item {
    background-color: #fff;
    border: none;
}

.sidepanel .tab-content .condlist>.item>.title {
    color: #000;
}

.sidepanel .tab-content .extract .cmds {
    position: fixed;
    width: 283px;
    bottom: 10px;
}

.view .qtview {
    position: absolute;
    right: 330px;
    width: 400px;
    min-height: 400px;
    padding: 10px;
    border: 1px solid #aaa;
    background-color: #fff;
    -moz-box-shadow: 3px 0 5px rgba(12, 12, 12, 0.5);
    -webkit-box-shadow: 3px 0 5px rgba(12, 12, 12, 0.5);
    box-shadow: 2px 2px 5px rgba(12, 12, 12, 0.5);
    z-index: 91;
}

.view .qtview>img {
    max-width: 90%;
    max-height: 90%;
}

.sidepanel .tab-content .results table.item-list {}

.sidepanel .tab-content .results .item-list .wrapitem {
    text-align: center;
}

.sidepanel .tab-content .results .item-list .wrapitem i {
    line-height: 50px;
    height: 50px;
}

.sidepanel .tab-content .results .item-list .wrapitem .src {
    position: relative;
    height: 70px;
}

.sidepanel .tab-content .results .item-list .title {
    font-size: 11px;
}

.sidepanel .tab-content .results table .title {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    max-width: 180px;
    padding-left: 20px;
}

.sidepanel .tab-content .results table td {
    position: relative;
}

.sidepanel .tab-content .results table td i {
    position: absolute;
    line-height: 1.1em;
}

.sidepanel .tab-content .results table .ion-ios-folder {
    font-size: 17px;
}

.sidepanel .tab-content .results .item-list .wrapitem .title {}

.sidepanel .tab-content .results .item-list .desc {
    display: none;
}

.sidepanel .tab-content .btn-add {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: #F0AD4E;
    border-color: #EEA236;
    border-radius: 50%;
    display: inline-block;
    line-height: 40px;
    width: 40px;
    height: 40px;
    color: #fff;
    font-weight: normal;
    font-size: 18px;
    text-align: center;
    cursor: pointer;
    padding: 0px;
    -moz-box-shadow: 3px 0 5px rgba(12, 12, 12, 0.5);
    -webkit-box-shadow: 3px 0 5px rgba(12, 12, 12, 0.5);
    box-shadow: 2px 2px 5px rgba(12, 12, 12, 0.5);
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 10;
    display: none;
}

.sidepanel .tab-content .cmds {
    margin: 0px;
    padding: 5px 0px;
    background-color: #343E4D;
}

.sidepanel .tab-content .cmds .btn-default:hover {
    background-color: #E4E7EA;
}

.sidepanel .tab-content .cmds .btn-default.active {
    color: #000;
}

.sidepanel .tab-content .cmds .btn-default.active:hover {
    background-color: #fff;
    color: #000;
}

.sidepanel .tab-content .cmds .btn-group {
    margin-bottom: 0px;
}

.sidepanel .tab-content .results .smry {
    margin: 0px;
    padding: 5px;
    font-size: 12px;
}

.sidepanel .tab-content .results .smry b {
    color: #D7C609;
}

.sidepanel .tab-content .results .lstSearch .col-sm-4 {
    padding-left: 5px;
    padding-right: 5px;
}

.search.item-list.ui-draggable-dragging {
    max-width: 260px;
    background-color: rgba(52, 62, 77, 0.2);
    padding-left: 5px;
    padding-bottom: 5px;
    opacity: 0.8;
}

.search.item-list.ui-draggable-dragging:after {
    clear: both;
    display: block;
    content: '';
}

.search.item-list.ui-draggable-dragging .item {
    width: 80px;
    min-height: 50px;
    margin: 5px 5px 0 0;
    padding: 0px;
    text-align: center;
    font-size: 12px;
    float: left;
}

.item-list.ui-draggable-dragging .cell {
    width: 80px;
    min-height: 20px;
    line-height: 20px;
    margin: 5px 5px 0 0;
    padding: 0px;
    text-align: center;
    font-size: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    color: #000;
    display: inline-block;
}

.search.item-list.ui-draggable-dragging .item i {
    display: block;
    margin: 0px !important;
    font-size: 55px;
    line-height: 58px;
}

.search.item-list.ui-draggable-dragging .item .src {
    height: 70px;
}

.search.item-list.ui-draggable-dragging .item .title {
    margin: 0px;
    font-size: 12px;
    line-height: 12px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search.item-list.ui-draggable-dragging .item p.desc {
    display: none;
}

.sidepanel .tab-content .item-list div.item {
    cursor: pointer;
    height: 80px;
    opacity: 0.6;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 5px;
}

.sidepanel .tab-content .tab-pane.find .more,
.sidepanel .tab-content .tab-pane.find div.item {
    height: 50px;
    margin: 5px 0;
    cursor: pointer;
}

.sidepanel .tab-content .tab-pane.find .more {
    display: block;
    text-align: center;
    line-height: 50px;
}

.sidepanel .tab-content .item-list .item.active,
.touchoff .sidepanel .tab-content .item-list .item:hover,
.sidepanel .tab-content .item-list .item:focus {
    opacity: 1;
}

.sidepanel .breadcrumb>li+li::before {
    content: '\f105';
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}

.sidepanel .breadcrumb {
    margin-bottom: 0px;
    padding: 5px 0;
    background-color: transparent;
    font-size: 12px;
}

.sidepanel .tab-content .tab-pane table>tbody>tr {
    cursor: pointer;
}

.sidepanel .tab-content .tab-pane .table-hover>tbody>tr.active,
.sidepanel .tab-content .tab-pane .table-hover>tbody>tr.active>td,
.sidepanel .tab-content .tab-pane .table-hover>tbody>tr.active:hover>td,
.sidepanel .tab-content .tab-pane .table-hover>tbody>tr:hover {
    background-color: rgba(66, 139, 202, 0.26);
}

.sidepanel .results nav {
    text-align: center;
}

.sidepanel .results nav .pagination {
    margin: 10px 0px 0px 0px;
}

.sidepanel .results nav .pagination>li>a {
    padding: 6px 10px;
    font-size: 12px;
}

.preview .header-expand .extmnu {
    display: none;
}

.header-expand .extmnu {
    padding: 0px;
    margin: 0px;
    top: 0.2em;
    right: 0px;
    position: absolute;
    cursor: pointer;
}

.header-expand .extmnu .btn {
    padding: 0px 5px;
    margin: 0px;
    border: none;
    background-color: transparent;
    font-size: 12px;
    height: initial;
}

.header-expand .active .extmnu .btn:hover {
    color: #333;
}

.header-expand .extmnu .btn:hover {
    color: #eee;
}


/********** 10. eBook STYLES **********/

.ebookpanel .pages {
    width: 900px;
    margin: 0 auto;
}

.ebookpanel .pages .page {
    background-color: #FFF;
    margin-bottom: 20px;
    -moz-box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
    -webkit-box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
    box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
    position: relative;
}

.ebookpanel .pages .page .theory {
    margin-bottom: 15px;
}

.ebookpanel .pages .page>.page-head {
    height: 120px;
}

.ebookpanel .pages .page>.page-body {
    min-height: 980px;
}

.ebookpanel .pages .page>.page-footer {
    height: 120px;
}

.page .page-head h4 {
    position: relative;
    display: inline-block;
    font-weight: bold;
    color: #FFF;
    font-size: 37px;
    top: 63px;
    left: 60px;
}

.page .page-body {
    width: 100%;
}

.page-only .page-body {
    padding-top: 80px;
    padding-left: 13%;
    position: relative;
}

.page-only .page-body .tip {
    position: absolute;
    top: 130px;
    right: 230px;
}

.page-mix .page-body {
    padding-top: 15px;
    padding-left: 0;
}

.page .page-cols {
    padding-left: 0;
}

.page .page-cols:after {
    clear: both;
    display: block;
    content: '';
}

.page .page-cols .page-block {
    float: left;
    width: 50%;
}

.page .page-cols .col1 {
    padding-left: 60px;
}

.page .page-cols .col2 {
    padding-left: 20px;
}

.page .page-cols .col3 {
    padding-left: 90px;
}

.page .page-cols .col4 {
    padding-left: 20px;
}

.page .qitem {
    min-height: 400px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.page .qitem>li {
    margin-bottom: 5px;
}

.page .qitem .info {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 0;
}

.page .qitem .info:after {
    clear: both;
    display: block;
    content: '';
}

.page .qitem .info>div {
    float: left;
    line-height: 30px;
}

.page .qitem .info>li {
    float: left;
}

.page .qitem2 {
    min-height: 400px;
}

.page .qitem2:after {
    clear: both;
    display: block;
    content: '';
}

.page .qitem2>span.qno {
    float: left;
    margin-right: 5px;
    color: #333;
    margin-top: 30px;
}

.page .qitem2>.qbody {
    overflow: hidden;
}

.page .qitem2>.qbody>div {
    margin-bottom: 10px;
}

.page .qitem2>.qbody>.qtcode {
    background: none;
    background-color: #999;
    display: inline-block;
    font-size: 12px;
    padding: 0px 10px;
    margin-bottom: 5px;
    color: #FFF;
}

.page-type01 .page-head,
.page-type01 .page-footer {
    position: relative;
}

.page-type01 .page-head span,
.page-type01 .page-footer span {
    position: absolute;
    color: #555;
    display: inline-block;
    text-align: center;
    font-weight: bold;
}

.page-type01 .page-head .school {
    top: 60px;
    left: 90px;
    width: 100px;
    font-size: 17px;
}

.page-type01 .page-head .papertype {
    top: 95px;
    left: 90px;
    width: 100px;
    font-size: 17px;
}

.page-type01 .page-head .extype {
    top: 170px;
    left: 100px;
    width: 100px;
    font-size: 17px;
}

.page-type01 .page-head .papercnt {
    top: 110px;
    right: 90px;
    width: 100px;
    font-size: 27px;
}

.page-type01 .page-head h1 {
    color: #000;
    padding-top: 80px;
    text-align: center;
    font-weight: bold;
}

.page-type01 .page-footer .pageno {
    top: 73px;
    left: 408px;
}

.page-type01 .page-footer .pagecnt {
    top: 80px;
    left: 460px;
}

.page .qno {
    font-size: 33px;
    font-weight: bold;
    color: #A0A0A0;
}

.page .qno>span {
    color: #000;
}

.page .clinic-qitem .qno {
    text-align: center;
    display: inline-block;
    min-width: 75px;
    color: #555;
    font-size: 15px;
    line-height: 20px;
}

.page .clinic-qitem .qno .no {
    color: #000;
}

.page .qcode {
    position: relative;
    background: url(/skins/default/images/book/58585/qt.png) no-repeat;
    background-size: 100% auto;
    width: 120px;
    height: 40px;
    padding-left: 20px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
}

.page .qlvl {
    position: relative;
}

.page .qlvl>img {
    width: 35px;
}

.page .qitem .bxextra {
    height: 20px;
}

.page .qitem .bxextra .statistics {
    width: 100%;
}

.page .qitem .statistics {
    display: none;
}

.page .qitem .statistics a.btn {
    font-size: 13px;
    margin: 0;
    padding: 0;
}

.page .qitem .qt {
    margin-bottom: 15px;
}

.page .qitem .omr {
    margin: 10px 0;
}

.page .qitem .omr input {
    padding: 3px 10px;
}

.page .qitem .omr .btn {
    padding: 2px 10px;
}

.page .qitem .omr .selnum {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.page .qitem .omr .selnum li {
    color: #EEE;
    cursor: pointer;
    position: relative;
    display: inline-block;
    margin-right: 10px;
}

.page .qitem .omr .selnum li>span {
    position: absolute;
    top: 4px;
    left: 2px;
    color: #999;
    font-size: 15px;
    font-weight: bold;
    width: 20px;
    text-align: center;
}

.page .qitem .omr .selnum li.sel {
    /*color: #d9534f;*/
    /*color: #337ab7;*/
    color: #222;
}

.page .qitem .omr .selnum li.sel>span {
    color: #FFF;
}

.page .qitem .omr .selnum li:hover {
    color: #222;
}

.page .qitem .omr .selnum li:hover>span {
    color: #FFF;
}

.page .qitem .ex {}

.page .qitem .sol {
    display: none;
    position: relative;
}

.page .qitem .sol a.btn {
    position: absolute;
    right: 10px;
}

.page .qitem .show {
    display: block;
}

.page .theory .bx-top {
    background: url(/skins/default/images/book/58591/bx_top.png) no-repeat;
    background-size: 100% auto;
    height: 60px;
}

.page .theory .bx-rp {
    background: url(/skins/default/images/book/58591/bx_rp.png) repeat-y;
    background-size: 100% auto;
    padding-left: 110px;
    vertical-align: middle;
}

.page .theory .bx-bt {
    background: url(/skins/default/images/book/58591/bx_bt.png) no-repeat;
    background-size: 100% auto;
    height: 60px;
}

.page .theory .bx-rp img {
    margin-top: 15px;
}

.page .ox {
    position: absolute;
    width: 100px;
    height: 100px;
    top: -30px;
    left: -10px;
}

.page .wrong {
    background: url(/skins/default/images/book/x.png) no-repeat;
    background-size: 100% 100%;
}

.page .correct {
    background: url(/skins/default/images/book/o.png) no-repeat;
    background-size: 100% 100%;
}

.page .clinic-qitem {
    display: none;
}

.page-mix .no-theory {
    padding-top: 120px;
}

.page-mix .qitem {
    padding-top: 10px;
    padding-left: 100px;
    min-height: 300px;
}

.page-mix .qitem:after {
    clear: both;
    display: block;
    content: '';
}

.page-mix .qitem>li {
    float: left;
    margin-bottom: 0;
}

.page-mix .qitem>li.nobx {
    width: 15%;
    margin-right: 10px;
    position: relative;
}

.page-mix .qitem>li.nobx .code {
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    min-width: 75px;
    text-align: center;
    text-decoration: none;
    background-color: #337ab7;
    color: #FFF;
    margin-top: 15px;
    padding: 3px;
    cursor: pointer;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.page-mix .clinic-qitem>li.nobx .code {
    background-color: #d9534f;
}

.page-mix .qitem>li.qtbody .info {
    margin-bottom: 10px;
    line-height: 20px;
}

.page-mix .qitem>li.qtbody .info .statistics {
    float: right;
}

.page-mix .qitem>li.qtbody .info .statistics a.btn {
    font-size: 13px;
    margin: 0;
    padding: 0;
}

.page-mix .qitem>li.qtbody .prop {
    line-height: 25px;
}

.page-mix .qitem>li.qtbody .prop i {
    color: #c12e2a;
    font-size: 12px;
}

.page-mix .qitem>li.tip {
    position: absolute;
    left: 710px;
    padding-top: 10px;
    width: 120px;
    font-size: 12px;
}

.page-mix .qitem>li.tip i {
    color: #428bca;
}

.error-page .page-head {
    position: relative;
}

.error-page .page-head span.no {
    position: absolute;
    font-size: 45px;
    font-weight: bold;
    color: #FFF;
    top: 95px;
    left: 80px;
}

.error-page .page-head h1.title {
    position: absolute;
    font-weight: bold;
    color: #FFF;
    top: 68px;
    left: 150px;
}

.error-page .page-cols .col1 {
    padding-left: 50px;
    padding-right: 5px;
}

.error-page .qitem {}

.error-page .qitem table {
    margin-bottom: 10px;
}

.error-page .qitem .qtprop {
    margin-bottom: 5px;
}

.error-page .qitem .qtprop>li {
    line-height: 28px;
}

.error-page .qitem .qtprop a.btn {
    vertical-align: initial;
    margin-right: 3px;
}

.error-page .qitem .qtprop .cmd a.btn {
    padding: 0px;
}

.error-page .qitem .qtcode {
    display: inline;
    background-color: #428bca;
    color: #FFF;
    padding: 2px 10px;
    font-weight: bold;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.error-page .qitem .qtlvl {
    color: #d9534f;
}

.error-page .qitem .qtlvl>i {
    margin-right: 2px;
}

.error-page .qitem .btn-qcode {
    padding: 0px 10px;
    font-size: 13px;
    font-weight: bold;
}

.error-page .clinic-qt {
    margin-top: 20px;
}

.hide {
    display: none;
}

.guide-page {}

.guide-page .page-head .title {
    margin: 0px auto;
    width: 85%;
}

.guide-page .page-head .title>h3 {
    padding-top: 100px;
    margin: 0px;
}

.guide-page .page-head .title>h1 {
    margin: 0px;
    padding: 10px 0px;
    border-bottom: 3px solid #f0ad4e;
    font-weight: bold;
}

.guide-page .page-head .title>h1>i {
    color: #d9534f;
}

.guide-page .page-body {
    padding-top: 100px;
}

.guide-page .page-body .desc-col {
    padding-left: 70px;
}

.guide-page .page-body .screenshot {
    padding-top: 10px;
    padding-right: 60px;
}

.guide-page .page-body .wrap-screenshot {
    min-height: 800px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 10px;
}

.guide-page .page-body .popover {
    display: block;
    margin: 20px;
    position: relative;
    width: 260px;
    border: none;
    color: #8a6d3b;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-color: #fcf8e3;
    line-height: 23px;
    z-index: 0;
}

.guide-page .page-body .popover.left .arrow:after {
    border-left-color: #fcf8e3;
}

.guide-page .page-body .popover.left .arrow {
    border-left-color: #fcf8e3;
}

.guide-page .page-body .mb20 {
    margin-bottom: 20px;
}

.guide-page .page-body .mb40 {
    margin-bottom: 40px;
}

.guide-page .page-body .mb50 {
    margin-bottom: 50px;
}

.guide-page .page-body .mb100 {
    margin-bottom: 100px;
}

.guide-page .page-body .mb200 {
    margin-bottom: 200px;
}

.page .page-footer .path {
    position: absolute;
    width: 87%;
    font-weight: bold;
    margin: 0;
    left: 55px;
    padding-top: 40px;
}

.page .page-footer .rpath {
    text-align: right;
}

.page .page-footer .pageno {
    display: table;
    width: 50px;
    margin: 0 auto;
    text-align: center;
    font-weight: bold;
    color: #000;
    padding-top: 40px;
}

.page1 {
    background: url(/skins/default/images/book/58594/bgf_top.png) left top no-repeat, url(/skins/default/images/book/58594/bgf_foot.png) left bottom no-repeat, url(/skins/default/images/book/58594/bgf_mid.png) left top repeat-y;
    background-size: 100% auto;
}

.page2 {
    background: url(/skins/default/images/book/58594/bgr_top.png) left top no-repeat, url(/skins/default/images/book/58594/bg_foot.png) left bottom no-repeat, url(/skins/default/images/book/58594/bg_mid.png) left top repeat-y;
    background-size: 100% auto;
}

.page3 {
    background: url(/skins/default/images/book/58594/bgl_top.png) left top no-repeat, url(/skins/default/images/book/58594/bg_foot.png) left bottom no-repeat, url(/skins/default/images/book/58594/bg_mid.png) left top repeat-y;
    background-size: 100% auto;
}

.page4 {
    background: url(/skins/default/images/book/58593/bgf_top.png) left top no-repeat, url(/skins/default/images/book/58593/bgf_foot.png) left bottom no-repeat, url(/skins/default/images/book/58593/bgf_mid.png) left top repeat-y;
    background-size: 100% auto;
}

.page5 {
    background: url(/skins/default/images/book/58593/bgl_top.png) left top no-repeat, url(/skins/default/images/book/58593/bg_foot.png) left bottom no-repeat, url(/skins/default/images/book/58593/bg_mid.png) left top repeat-y;
    background-size: 100% auto;
}

.page6 {
    background: url(/skins/default/images/book/58591/bgf_top.png) left top no-repeat, url(/skins/default/images/book/58591/bgf_foot.png) left bottom no-repeat, url(/skins/default/images/book/58591/bgf_mid.png) left top repeat-y;
    background-size: 100% auto;
}

.page7 {
    background: url(/skins/default/images/book/58591/bgl_top.png) left top no-repeat, url(/skins/default/images/book/58591/bg_foot.png) left bottom no-repeat, url(/skins/default/images/book/58591/bg_mid.png) left top repeat-y;
    background-size: 100% auto;
}

.page8 {
    background: url(/skins/default/images/book/58591/bgr_top.png) left top no-repeat, url(/skins/default/images/book/58591/bg_foot.png) left bottom no-repeat, url(/skins/default/images/book/58591/bg_mid.png) left top repeat-y;
    background-size: 100% auto;
}

.page9 {
    background: url(/skins/default/images/book/58613/bgf_top.png) left top no-repeat, url(/skins/default/images/book/58613/bgf_foot.png) left bottom no-repeat, url(/skins/default/images/book/58613/bgf_mid.png) left top repeat-y;
    background-size: 100% auto;
}

.page10 {
    background: url(/skins/default/images/book/58613/bgr_top.png) left top no-repeat, url(/skins/default/images/book/58613/bg_foot.png) left bottom no-repeat, url(/skins/default/images/book/58613/bg_mid.png) left top repeat-y;
    background-size: 100% auto;
}

.clinic-page {
    display: none;
}

.index-page {
    background: url(/skins/default/images/book/58585/index_top.png) no-repeat;
    /*
  background: url(/skins/default/images/book/58585/index_top.png) left top no-repeat, url(/skins/default/images/book/58585/index_foot.png) left bottom no-repeat, url(/skins/default/images/book/58585/index_mid.png) left top repeat-y;
  */
    background-size: 100% auto;
}

.page12 {
    background: url(/skins/default/images/book/58585/empty_top.png) left top no-repeat, url(/skins/default/images/book/58585/empty_foot.png) left bottom no-repeat, url(/skins/default/images/book/58585/empty_mid.png) left top repeat-y;
    background-size: 100% auto;
}

.page15 {
    background: url(/skins/default/images/book/error/bgf_top.png) left top no-repeat, url(/skins/default/images/book/error/bg_foot.png) left bottom no-repeat, url(/skins/default/images/book/error/bg_mid.png) left top repeat-y;
    background-size: 100% auto;
}

.page16 {
    background: url(/skins/default/images/book/error/bgl_top.png) left top no-repeat, url(/skins/default/images/book/error/bg_foot.png) left bottom no-repeat, url(/skins/default/images/book/error/bg_mid.png) left top repeat-y;
    background-size: 100% auto;
}

.hide-page {
    display: none;
}

.index-page .container-fluid {
    background-color: #FFF;
    width: 80%;
    margin-top: 100px;
    font-size: 13px;
}

.index-page .container-fluid .row {
    line-height: 30px;
}

.index-page .container-fluid .idxunit {
    line-height: 40px;
}

.index-page .container-fluid .idxunit {
    margin-top: 25px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #A9A9A9;
}

.index-page .container-fluid .row .progress {
    margin-top: 9px;
    background-color: #EFEFEF;
}

.index-page .container-fluid .idxunit .progress {
    padding: 10px 0;
}

.index-page .container-fluid .row .progress span {}

.widget.lessonbx {
    position: relative;
}

.tplbase .widget.lessonbx .widget-header .title {
    cursor: pointer;
    font-weight: 400;
}

.tplbase .widget.lessonbx.expand .widget-header .title::before {
    content: '\f0d7';
    color: #333;
}

.tplbase .widget.lessonbx .widget-header .title::before {
    content: '\f0d8';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    font-size: 15px;
    margin-right: 5px;
    color: #ccc;
}

.tplbase .widget.lessonbx.expand .widget-body {
    display: block;
}

.tplbase .widget.lessonbx .widget-body {
    display: none;
}

.tplbase .widget.lessonbx:not(:first-child) {
    padding-top: 20px;
}

.widget .progress {
    background-color: #ddd;
}

.widget .table tbody tr td .progress {
    margin-top: 5px;
}

.widget .table.table-xs tbody tr td .progress {
    margin-top: 0px;
}

.widget .smry .box {
    position: relative;
    min-height: 50px;
    padding: 20px;
    margin-bottom: 10px;
    text-align: center;
}

.widget .smry .box>i {
    display: inline-block;
    margin: 0px 5px;
    color: #888;
}

.widget .smry .box>.data {
    display: inline-block;
}

.widget .widget-header {
    position: relative;
}

.widget .widget-header.clear>.title {
    float: left;
    margin: 0px;
    line-height: 27px;
}

.widget .widget-header .title {
    color: #333;
}

.widget .widget-header .title .more,
.widget .widget-header .title .icoexpand {
    position: absolute;
    right: 5px;
    bottom: 8px;
    cursor: pointer;
}

.widget .widget-header.clear>.filter {
    float: right;
}

.widget .widget-header.clear>.filter .btn-group {
    margin-bottom: 0px;
}

.widget .boxes {
    font-size: 20px;
}

.widget .box {
    min-height: 80px;
    margin: 0px 0px 10px 0px;
    font-size: 12px;
}

.widget .box.sel {
    background-color: #DDD;
}

.widget .boxes .box {
    display: inline-block;
}

.widget .box>.thumb {
    width: 80px;
    height: 70px;
    margin-right: 5px;
    float: left;
}

.widget .box>.info {
    list-style: none;
    padding: 0px;
    font-size: 12px;
    position: relative;
    min-height: 45px;
}

.widget .box .name>span {
    font-size: inherit;
    opacity: 1;
}

.widget .box>.info .cate {
    color: #000;
}

.widget .box>.thumb>.bg {
    width: 100%;
    height: 100%;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.widget .box>.info .title {
    font-size: 14px;
    margin: 5px 0px;
    font-weight: 600;
}

.widget .box>.info .rate>.desc {
    margin-top: 5px;
}

.widget .box>.info .rate>.desc>span {
    margin-right: 2px;
    color: #000;
}

.widget .box>.info .rdate {
    font-size: 11px;
    margin-top: 2px;
}

.widget .box>.info .option {
    position: absolute;
    top: 0px;
    right: 5px;
}

.box {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #fcfcfc;
    border: 0;
    /*
   -moz-box-shadow: 0 3px 0 rgba(12,12,12,0.03);
   -webkit-box-shadow: 0 3px 0 rgba(12,12,12,0.03);
   box-shadow: 0 3px 0 rgba(12,12,12,0.03);
   */
    min-height: 140px;
    padding: 15px;
}

.box .ul-list>li>i {
    margin-top: 5px;
    color: #999;
}

.box .ul-list>li {
    margin: 0px 10px;
}

.box .ul-list>li h1 {
    display: inline;
    color: #d9534f;
}

.box .ul-list>li span {
    color: #333;
}

.jqstooltip {
    width: 50px;
    height: 25px!important;
}

.btn-facebook {
    color: #ffffff;
    background-color: #3b5998;
    border-color: #3b5998;
}

a.btn-facebook {
    color: #ffffff;
}

.btn-facebook:hover,
.btn-facebook:focus,
.btn-facebook:active,
.btn-facebook.active,
.open .dropdown-toggle.btn-facebook {
    color: #ffffff;
    background-color: #344e86;
    background-image: none;
    border-color: #344e86;
}

.btn-twitter {
    color: #ffffff;
    background-color: #55acee;
    border-color: #55acee;
}

a.btn-twitter {
    color: #ffffff;
}

.btn-twitter:hover,
.btn-twitter:focus,
.btn-twitter:active,
.btn-twitter.active,
.open .dropdown-toggle.btn-twitter {
    color: #ffffff;
    background-color: #3ea1ec;
    background-image: none;
    border-color: #3ea1ec;
}

.box-success {
    background-color: #1caf9a;
}

.box-danger {
    background-color: #d9534f;
}

.box-primary {
    background-color: #428bca;
}

.box-info {
    background-color: #15acdc;
}

.box-dark {
    background-color: #4f5061;
}

.box-default {
    background-color: #F0F0F0;
    color: #59595a;
}

.box h1 {
    margin: 0;
    font-weight: bold;
}

.box h4 {
    margin: 0;
}

h5.subtitle {
    font-size: 14px;
    font-weight: bold;
    position: relative;
}


/********** 15. MODALS **********/

.modal {
    text-align: center;
}

.modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
    margin-right: -4px;
}

.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    position: relative;
}

.modal-dialog .blue {
    color: blue;
}

.modal-dialog .gray {
    color: gray;
}

.modal .users>label.item {
    display: inline-block;
}

#popup-confirm .modal-dialog {
    width: auto;
}

#popup-confirm .modal-content {
    padding: 10px;
}

.modal-body .nav-tabs a[data-toggle=tab] {
    padding: 5px 20px;
}

.modal-viewer {
    margin-top: 0;
    margin-bottom: 0;
    top: 50%;
    left: 50%;
    width: auto;
    position: absolute;
}

.modal-viewer .modal-content {
    position: relative;
    width: 900px;
    margin-left: -50%;
    margin-top: -300px;
    padding: 0px;
}

.modal-info .modal-content {
    padding: 10px;
}

#popup-mission.modal-menu .modal-dialog {}

.modal-menu .modal-content {
    display: none;
}
.modal-menu .modal-content:last-child {
    display: block;
}

.modal-viewer .modal-photo-left,
.modal-viewer .modal-photo-right {}

.modal-viewer .modal-photo-left {
    height: 100%;
    padding: 20px;
}

.modal-viewer .modal-photo {
    top: 50%;
    position: relative;
}

.modal-viewer .row {
    margin-left: 0;
    margin-right: 0;
}

.modal-viewer .info-rate {
    background-color: #FCFCFC;
    padding: 5px;
    font-size: 12px;
}

.modal-viewer .info-rate span {
    font-weight: bold;
}

.modal-viewer .info-rate .progress {
    background-color: #d0dbec;
    margin: 5px 0;
}

.modal-viewer .dropdown-menu {
    font-size: 12px;
}

.modal-viewer .img-responsive {
    max-height: 600px;
    margin: auto;
}

.modal-viewer .panel-heading {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.modal-viewer .panel {
    background-color: #FFF;
    box-shadow: none;
}

.modal-viewer .panel-body {
    background-color: #FFF;
}

.modal-viewer .close {
    font-weight: none;
    color: #FFF;
    opacity: 1;
}

.modal-info .modal-viewer .close {
    color: #000;
}

.modal-viewer .panel-body .btn-remove {
    color: #d9534f;
}

.modal-viewer .panel-body select {
    padding: 5px;
}

.modal-viewer .panel-body .filter {
    padding: 10px;
    border: 1px solid #e3e6f3;
}

.modal-viewer .panel-body .filter>li {
    line-height: 30px;
    font-size: 12px;
}

.modal-viewer .panel-body .filter>li>span.lbl {
    display: inline-block;
    padding-right: 5px;
}

.modal-viewer div.qt {
    margin-bottom: 10px;
}

.modal-viewer div.ex {
    margin-bottom: 10px;
}

.modal-viewer .categ {
    font-size: 13px;
}

.modal-info .modal-viewer .media-title {
    font-size: 17px;
    font-weight: bold;
}

.modal-info .modal-viewer .media-title span {
    display: inline;
    padding: 0px 10px 2px 10px;
    margin-right: 10px;
    color: #FFF;
    background-color: #5BC0DE;
}

.modal-info .modal-viewer .box {
    min-height: auto;
    padding: 5px;
    margin-bottom: 5px;
}

.modal-info .modal-viewer .chart small.title {
    display: inline-block;
    margin-bottom: 10px;
}

.modal-info .modal-viewer .chart .progress {
    background-color: #F0F0F0;
    margin-bottom: 5px;
}

.modal-info .modal-viewer .box .row div:first-child>i {
    margin-top: 5px;
}

.modal-info .modal-viewer .box h3 {
    margin: 0px;
    font-size: 15px;
    font-weight: bold;
}

.modal-theory .wrapcontent:after {
    clear: both;
    display: block;
    content: '';
}

.modal-theory .wrapcontent {
    padding: 10px;
}

.modal-theory .modal-viewer .close {
    color: #000;
}

.modal-theory video {
    width: 300px;
    float: left;
    margin-right: 10px;
}

.modal-theory .theory {
    overflow: hidden;
}

.panel-comments {
    padding: 5px;
    font-size: 12px;
    margin-bottom: 10px;
}

.panel-comments .media {
    padding: 5px 0 !important;
}

.panel-comments .comment {
    overflow: hidden;
}

.panel-comments .comment .comment-author {
    margin-top: 3px;
}

.panel-comments .comment .comment-author a {
    color: #d2c2a7;
}

.panel-comments .comment .comment-meta {
    margin-bottom: 5px;
}

.panel-comments .media .media-object {
    width: 32px;
}

.panel-comments p {
    margin: 0px 0px 5px;
}

.panel-comments hr {
    margin: 0px;
}

.panel-comments input {
    font-size: 12px;
}

.panel-comments button {
    font-size: 13px;
    padding-bottom: 6px;
    margin-bottom: 1px;
}

.panel-comments .panel-footer {
    padding: 10px 25px;
}

.frmCard .mark {
    background-color: #F9F9F9;
    padding: 5px 0;
}

.frmCard legend {
    font-size: 17px;
    padding-bottom: 5px;
}

.frmCard .items {
    background-color: #F9F9F9;
}

.modal fieldset {}

.modal fieldset legend {
    font-size: 15px;
    padding-bottom: 5px;
    margin-bottom: 10px;
}


/********** 11. TABLE STYLES **********/

.table-action {
    text-align: center;
}

.table-action-hide a {
    opacity: 0;
}

.table-action a,
.table-action-hide a {
    display: inline-block;
    margin-right: 5px;
    color: #666;
}

.table-action a:hover,
.table-action-hide a:hover {
    color: #333;
}

.table-action a:last-child,
.table-action-hide a:last-child {
    margin-right: 0;
}

.table-primary thead tr th {
    background-color: #428BCA;
}

.table-success thead tr th {
    background-color: #1CAF9A;
}

.table-warning thead tr th {
    background-color: #F0AD4E;
}

.table-danger thead tr th {
    background-color: #D9534F;
}

.table-info thead tr th {
    background-color: #5BC0DE;
}

.table-dark thead tr th {
    background-color: #1D2939;
}

.table-white thead tr th {
    background-color: #F5F5F5;
}

.table.table-primary thead tr th,
.table.table-success thead tr th,
.table.table-danger thead tr th,
.table.table-warning thead tr th,
.table.table-info thead tr th,
.table.table-dark thead tr th {
    color: #fff;
    border-bottom: 0;
}

.table-bordered.table-primary thead tr th,
.table-bordered.table-success thead tr th,
.table-bordered.table-warning thead tr th,
.table-bordered.table-danger thead tr th,
.table-bordered.table-info thead tr th,
.table-bordered.table-dark thead tr th {
    border-color: rgba(255, 255, 255, 0.2);
}

.table-vbordered {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.table-vbordered tr th:not(:last-child),
.table-vbordered tr td:not(:last-child) {
    border-right: 1px solid #ddd;
}


/********** 11. PROGRESS BAR STYLES **********/

.progress {
    position: relative;
    overflow: hidden;
    margin-bottom: 0px;
    border-radius: 2px;
    background-color: #FFF;
    padding: 0;
    height: 20px;
    box-shadow: none;
}

.progress-bar {
    position: relative;
    padding: 0 5px;
    text-align: left;
    box-shadow: none;
    background-color: #1582dc;
    -webkit-transition: width 800ms ease;
    transition: width 800ms ease;
}

.progress-bar>span {
    vertical-align: middle;
    text-shadow: 1px 1px 1px #333;
}

.progress-bar-success {
    background-color: #15db81;
}

.progress-striped .progress-bar-success {
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-bar-info {
    background-color: #15acdc;
}

.progress-striped .progress-bar-info {
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-bar-warning {
    background-color: #ffc107;
}

.progress-striped .progress-bar-warning {
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-bar-danger {
    background-color: #d9534f;
}

.progress-striped .progress-bar-danger {
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-bar-default {
    background-color: #ccc;
}

.progress-bar>span.rate {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}


/* Progress bar sizing */

.progress-xs {
    height: 5px;
}

.progress-sm {
    height: 10px;
}

.progress-md {
    height: 15px;
}

.progress-lg {
    height: 25px;
}


/********** 12. Signin STYLES **********/


/***************************************/

.signinpanel {
    width: 360px;
    display: inline-block;
    vertical-align: middle;
    text-align: justify;
    padding: 10px 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.signinpanel .logopanel {
    float: none;
    width: 100%;
    padding: 0;
    background: url(/common/images/logo_dabisu.svg) no-repeat left top;
    background-size: auto 90%;
    color: #1d2939;
    height: 60px;
    cursor: pointer;
}

body._dcode .signinpanel .logopanel {
    background: url(/common/images/logo_dcode.png) no-repeat left top;
    background-size: auto 70%;
}

body._khome .signinpanel .logopanel {
    background: url(/common/images/logo_khome.svg) no-repeat center top;
    background-size: auto 90%;
}

body._homengo .signinpanel .logopanel {
    background: url(/common/images/logo_dabischool.png) no-repeat center top;
    background-size: auto 100%;
    margin-bottom: 20px;
}

body[data-module=engready] .signinpanel .logopanel {
    background: url(/common/images/logo_engready.png) no-repeat center top;
    background-size: auto 100%;
    height: 80px;
}

body[data-module=engready] .view[name=login_default] .signinpanel::before {
    content: url(/skins/default/images/engready/mainbg_symbol_02.png);
    position: absolute;
    left: -300px;
}

body[data-module=engready] .view[name=login_default] .signinpanel::after {
    content: url(/skins/default/images/engready/mainbg_symbol_01.png);
    position: absolute;
    right: -350px;
    bottom: -100px;
}

body[data-module=engready] .signinpanel form {
    background-color: rgba(255, 255, 255, .8);
}

body._tutor365 .signinpanel form {
    padding: 30px 30px 40px;
    border: none;
}

body[data-module=_dabisu] .signinpanel form {
    background: rgba(239, 239, 239, .9);
    border: none;
    box-shadow: 1px 3px 7px rgba(0, 0, 0, .5);
}

body._tutor365 .signinpanel .logopanel {
    background: url(/skins/default/images/_tutor365/logo_b.svg) no-repeat center top;
    background-size: auto 100%;
    height: 80px;
}

body.home .signinpanel .logopanel {
    background: url(/common/images/logo_home.svg) no-repeat center top/60%;
}

body._drcode .signinpanel .logopanel {
    background: url(/skins/default/images/drcode/dcode_logo.png) no-repeat center top/auto 100%;
}

.signinpanel .exlogin {
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding: 20px 10px;
}

.signinpanel .exlogin .kakao {
    margin-bottom: 10px;
}

.signinpanel .exlogin a {
    display: block;
}

.signinpanel .exlogin a>img {
    width: 100%;
}

.signinpanel .logopanel h1 {
    margin-bottom: 30px;
    font-size: 25px;
    display: none;
}

.signinpanel .signin-info ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.signinpanel .title {
    font-size: 22px;
    margin: 10px 0px;
}

.signinpanel form .alert {
    padding: 15px;
    background-color: #e86464;
    color: #fff;
    line-height: 22px;
    position: relative;
    font-size: 15px;
}

.signinpanel form .alert i.btn-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
}

.signinpanel form .alert a {
    display: inline-block;
    padding: 5px 10px;
    background-color: rgba(255, 255, 255, .6);
    border-radius: 5px;
    color: #000;
    margin-top: 10px;
}

.bxCSPanel .guide,
.signinpanel .guide {
    position: absolute;
    top: 0px;
    right: -310px;
    width: 300px;
    border-radius: 10px;
    overflow: hidden;
    padding: 10px;
    background-color: #fff;
    display: none;
}

.body_login[data-module=home] .bxCSPanel .guide,
.body_login[data-module=home] .signinpanel .guide {
    display: inline-block;
}

.bxCSPanel .guide {
    top: 0px;
    padding: 5px 10px 0px 0px;
}

.body_login[data-module=home] .bxCSPanel.step2 .guide.step1,
.body_login[data-module=home] .bxCSPanel .guide.step2 {
    display: none;
}

.body_login[data-module=home] .bxCSPanel.step2 .guide {
    display: inline-block;
    padding: 5px 10px 10px 10px;
}

.bxCSPanel .guide>img,
.signinpanel .guide>img {
    width: 100%;
}

.bxCSPanel .guide>i,
.signinpanel .guide>i {
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
}

.signinpanel .extra {
    font-size: 12px;
}

.signinpanel .form-control {
    display: block;
    margin-top: 15px;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 10px;
    font-weight: normal;
    color: #000;
}

.signinpanel .uname {
    background: #fff url(/skins/default/images/user.png) no-repeat 95% center;
}

.signinpanel .pword {
    background: #fff url(/skins/default/images/locked.png) no-repeat 95% center;
}

.signinpanel .uid {
    background: #fff url(/skins/default/images/mobile.png) no-repeat 95% center;
}

.signinpanel .btn {
    margin-top: 20px;
    margin-bottom: 5px;
    background-color: #34cdcb;
    border-color: #34cdcb;
    color: #fff;
}

.signinpanel .btn:hover,
.signinpanel .btn:active {
    background-color: #34cdcb;
    border-color: #34cdcb;
}

.signinpanel form {
    background: rgba(255, 255, 255, .5);
    border: 1px solid #eee;
    -moz-box-shadow: 1px 3px 4px rgba(12, 12, 12, 0.01);
    -webkit-box-shadow: 1px 3px 4px rgba(12, 12, 12, 0.01);
    box-shadow: 1px 3px 4px rgba(12, 12, 12, 0.01);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 50px 30px;
    border-radius: 10px;
}

.signinpanel form a {
    color: #00c0bd;
    display: inline-block;
}

._tutor365 .signinpanel form a {
    color: #fff;
}

.signinpanel .footer {
    font-size: 11px;
    margin-top: 10px;
}

.signup-footer {
    border-top: 1px solid #ddd;
    margin-top: 30px;
    padding-top: 10px;
    font-size: 12px;
    font-weight: 100;
}


/********** 12. MYNOTE STYLES **********/


/***************************************/

.notepanel .nav-tabs>li>a {
    padding: 10px 20px;
}

.taskbar {
    background-color: #f5f5f5;
    padding: 5px;
}

.taskbar>.info {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.taskbar>.info>h2 {
    margin: 0px;
    font-weight: 600;
    font-size: 15px;
    line-height: 25px;
}

.taskbar>.info>small {}

.taskbar b {
    color: #333;
}

.taskbar>.option {
    float: right;
}

.taskbar>.option .view-options {
    margin-top: 5px;
}

.taskbar .smry {
    background-color: #F0F0F0;
    padding: 5px 0px;
    margin: 0px 0px 10px;
}

.taskbar .smry h5 {
    line-height: 33px;
    margin: 0px;
}

.taskbar .smry span {
    display: inline-block;
}

.taskbar .smry span b {
    font-size: 13px;
}

.taskbar .smry .btn-group {
    margin: 0px;
}

.tags {}

.tags>span {
    color: #333;
    font-weight: 500;
    display: inline-block;
    padding: 0px 12px;
    border: 1px solid #eee;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    font-size: 12px;
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: #fff;
    cursor: pointer;
    line-height: 25px;
    margin-bottom: 5px;
}

.tags>span.active {
    background-color: #d9534f;
    color: #fff;
    border: 1px solid #841f1c;
}

.tags>span:not(.active):hover {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
}

.wrapnote .notes {
    /*margin: 0 auto;*/
    margin-bottom: 10px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.wrapnote .notes .note {
    width: 130px;
    max-height: 200px;
    margin: 5px;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    position: relative;
}

.wrapnote .notes .note:hover .cover,
.wrapnote .notes .note:hover .new {
    border-color: #bbb;
}

.wrapnote .notes .note:hover .new .plus {
    color: #d9534f;
}

.wrapnote .notes .note:hover>span[data-role="remove"] {
    display: inline-block;
}

.wrapnote .notes .note>.cover {
    height: 160px;
    -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
    background: url(/skins/default/images/renote_cover.png) left center no-repeat;
    background-size: cover;
}

.wrapnote .notes .note>.cover i {
    margin: 10px;
    color: #d9534f;
}

.wrapnote .notes .note>span[data-role="remove"] {
    position: absolute;
    top: -5px;
    right: -5px;
    display: none;
}

.mode-mobile .wrapnote .notes .note>span[data-role="remove"] {
    display: inline-block;
}

.wrapnote .notes .note>.name {
    margin: 5px 0px 0px;
    line-height: 20px;
    font-size: 12px;
    font-weight: 700;
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 0px 5px;
    text-align: center;
}

.wrapnote .notes .note>.new {
    height: 160px;
    border: 1px dashed #DDD;
    position: relative;
}

.wrapnote .notes .note>.new .plus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: #bf7f7d;
}

.wrapnote .notes .note>.tag {
    font-size: 11px;
}

.wrapnote .searchbx button,
.wrapnote .searchbx input {
    border-color: #ccc;
}

.wrapnote .searchbx .input-group-addon,
.wrapnote .searchbx .input-group-btn {
    display: table-cell;
    background-color: #fff;
}

.wrapnote .searchbx .date {
    width: 150px;
    display: inline-table;
}

.wrapnote .searchbx .keyword {
    width: 200px;
    display: inline-table;
}

.modal .notes .note {}

.modal .notes .note .cover {
    max-width: 100%;
    width: 150px;
    -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

.renotes {}

.renotes>.renote {
    display: inline-block;
    width: 100px;
    padding: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    position: relative;
}

.renotes>.renote .cover {
    border: 1px solid #F0F0F0;
    height: 120px;
    background: url(/skins/default/images/renote_cover.png) left center no-repeat;
    background-size: cover;
}

.renotes>.renote .title {
    font-size: 12px;
    margin: 5px 0px 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.renotes>.renote.sel .bg {
    display: inherit;
}

.renotes>.renote .bg {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.renotes>.renote .bg i {
    text-align: center;
    color: #fff;
    margin: 5px;
}

.note-content .btn-group label {
    margin-bottom: 0px;
}

.note-content .btn-group ul>li {
    font-size: 12px;
}

.note-content .btn-group .btn-sm {
    font-size: 14px;
}

.view-list {
    font-size: 12px;
}

.view-list .panel {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    position: relative;
}

.view-list .panel.active {
    z-index: 1;
    box-shadow: 2px 2px 2px #ccc;
}

.selmode .view-list .panel {
    cursor: pointer;
}

.view-list .panel:hover {
    box-shadow: 2px 2px 2px #ccc;
}

.view-list .panel.sel>input.checkbox,
.view-list .panel:hover>input.checkbox {
    display: inline-block;
}

.view-list .panel>input.checkbox {
    display: none;
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 2;
}

.view-list .panel .bg {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.view-list .panel.sel .bg {
    display: block;
}

.view-list .panel .panel-heading {
    padding: 10px;
}

.view-list .panel .panel-heading .info {}

.wrapfaults .view-list .panel .panel-heading .info {
    padding-left: 45px;
}

.wrapfaults .view-list .panel .panel-heading .cover {
    position: absolute;
    font-size: 35px;
    color: #bbbcbf;
}

.view-list .panel .panel-heading .info .prop {
    margin-bottom: 5px;
}

.view-list .panel .panel-heading .symbol {
    margin-right: 10px;
}

.view-list .panel .panel-heading .btns>a {
    color: #59595a;
    font-size: 14px;
}

.view-list .panel .panel-heading .symbol img {
    width: 48px;
    height: 63px;
    border: 1px solid #F0F0F0;
}

.view-list .panel .panel-heading .symbol>i {
    padding: 4px 0;
}

.view-list .panel .panel-heading .symbol>i.fa-bug {
    color: #d9534f;
}

.view-list .panel .panel-heading .symbol>i.fa-life-ring {
    color: #337ab7;
}

.view-list .panel .panel-heading .qcode {
    padding: 0 10px;
    line-height: 15px;
    font-weight: bold;
}

.view-list .panel .panel-heading .prop .level {
    line-height: 17px;
    color: #d9534f;
}

.view-list .panel .panel-heading .title {
    margin: 0px;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    padding: 0px 50px 5px 0px;
}

.view-list .panel .panel-heading .no {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #F9F9F9;
    margin-left: 10px;
    padding: 2px 10px;
    font-size: 12px;
    position: absolute;
    top: 10px;
    right: 7px;
    line-height: 30px;
}

.view-list .panel .panel-btns>a {
    font-size: 13px;
    font-weight: normal;
}

.view-list .panel .panel-body {
    padding: 5px;
}

.wrapfaults .view-list .panel .panel-body {}

.view-list .panel .panel-body div.qt {
    margin-bottom: 10px
}

.panel .panel-body .itemview .imgs {}

.panel .panel-body .itemview .imgs img {
    width: 100%;
}

.panel .panel-body .itemview .imgs>.img {
    float: left;
    background-color: #FAFAFA;
    font-size: 0;
    cursor: pointer;
    width: 100%;
    overflow: hidden;
}

.panel .panel-body .itemview .imgs[cnt="2"]>.img {
    width: 49.3181%;
    width: calc(50% -1px);
    margin-top: 2px;
}

.panel .panel-body .itemview .imgs[cnt="3"]>.img {
    width: 33.1%;
    width: calc(33.24% -1px);
    margin-top: 2px;
}

.panel .panel-body .itemview .imgs[cnt="4"]:not(:nth-child(1))>.img {
    width: 33.1%;
    width: calc(33.24% -1px);
    margin-top: 2px;
}

.view-list .panel .panel-body .tags {
    font-weight: bold;
    color: #1d2939;
    margin-top: 10px;
}

.view-list .panel .panel-footer {
    padding: 5px;
}

.panel-note .panel-body>.media {
    border: 1px solid #e3e6f3;
    padding: 0px;
}

.panel-note .panel-body .img-paper {
    width: 60px;
    height: 68px;
}

.panel-note .panel-body h4 {
    font-size: 14px;
    margin-bottom: 5px;
}

.view-list .subject>h5 {
    font-size: 14px;
    margin: 3px;
    font-weight: bold;
}

.view-list .panel-dark {
    background-color: #EFEFEF;
    border: none;
}

.wrapnote .taskbar {
    margin-bottom: 10px;
}

.wrapnote .taskbar .smry {
    padding: 7px 0;
    background-color: transparent;
    margin: 0px;
}

.taskbar .smry {
    float: left;
}

.taskbar .filter {
    float: right;
    padding: 5px;
}

.taskbar .ddlcate .btn-cate {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.taskbar .smry>li {
    width: 33%;
    font-size: 14px;
}

.taskbar .smry>li>h5 {
    font-weight: bold;
    font-size: 21px;
}

.taskbar .smry>li i.fa-bug {
    color: #d9534f;
}

.taskbar .smry>li i.fa-life-ring {
    color: #337ab7;
}

.taskbar .smry>li i.fa-crop {
    color: #5cb85c;
}

#classroom .book-list>li {
    margin: 15px;
    font-size: 13px;
    cursor: pointer;
}

#classroom .book-list>li>.book {
    border: 1px solid #EFEFEF;
    padding: 10px;
    -moz-box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
    -webkit-box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
    box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
}

#classroom .book-list .book .img-cover {
    width: 150px;
    height: 220px;
    border: 1px solid #F3F3F3;
}

#classroom .book-list .book h3.title {
    font-weight: bold;
    font-size: 13px;
    margin: 10px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#classroom .cmd-list>li {
    margin-right: 5px;
}

#classroom .cmd-list>li.search {
    width: 40%;
    min-width: 200px;
}

#classroom .btn-class-add {
    line-height: 1.5;
}

#classroom .class-list {
    margin: 10px 0;
}

#classroom .group-title {
    margin: 20px 0;
    line-height: 35px;
    border-bottom: 1px solid #ECF0F1;
}

#classroom .group-title h5 {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    margin: 0px;
}

#classroom ul.classroom {
    height: 80px;
    overflow: hidden;
    padding: 0px;
    margin-right: 10px;
    border: 1px solid #e3e6f3;
    -moz-box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
    -webkit-box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
    box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

#classroom ul.classroom>li {
    display: inline-block;
}

#classroom ul.classroom>li.head {
    width: 80px;
    height: 100%;
    margin: 0px;
    background-color: #EFEFEF;
}

#classroom ul.classroom>li.body {
    width: 170px;
}

#classroom ul.item {
    list-style: none;
    width: 250px;
    overflow: hidden;
    padding: 0px;
    margin-right: 10px;
    border: 1px solid #e3e6f3;
    -moz-box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
    -webkit-box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
    box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

#classroom ul.item>li {
    width: 100%;
}

#classroom ul.item>li.head {
    height: 200px;
    margin: 0;
    padding: 0;
    background-color: #EFEFEF;
}

#classroom ul.item>li.body {
    height: 80px;
}

#library .path i {
    margin: 0 10px;
}

#library .cmd-list {
    border: 1px solid #e3e6f3;
    padding: 0 3px;
}

#library .cmd-list>li {}

#library .cmd-list>li.path {
    margin-right: 10px;
    line-height: 55px;
}

#library .cmd-list>li .btn {
    padding: 6px 12px;
}

#library .content table>tbody>tr.sel {
    background-color: #16A085;
    color: #FFF;
}

#library .content table>tbody>tr.sel:hover {
    background-color: #1ABC9C;
}

#library .content table>tbody>tr:hover {
    background-color: #F0F0F0;
}

#library .content table>tbody>tr>td>span.draggable {
    cursor: pointer;
}


/********** 6. FORM STYLES **********/

span.disable {
    color: #ddd;
}

.ckbox,
.rdio {
    position: relative;
}

.ckbox input[type="checkbox"],
.rdio input[type="radio"] {
    opacity: 0;
}

.ckbox label,
.rdio label {
    padding-left: 10px;
    cursor: pointer;
    margin-bottom: 7px !important;
}

.ckbox label:before {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 1px;
    left: 0;
    content: '';
    display: inline-block;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    border: 1px solid #bbb;
    background: #fff;
}

.ckbox input[type="checkbox"]:disabled+label {
    color: #999;
}

.ckbox input[type="checkbox"]:disabled+label:before {
    background-color: #eee;
}

.ckbox input[type="checkbox"]:checked+label::after {
    font-family: "Font Awesome 5 Pro";
    content: "\F00C";
    font-weight: 900;
    position: absolute;
    top: 0;
    left: 3.5px;
    display: inline-block;
    font-size: 11px;
    width: 16px;
    height: 16px;
    color: #fff;
}

.ckbox-default input[type="checkbox"]:checked+label:before {
    border-color: #999;
}

.ckbox-default input[type="checkbox"]:checked+label::after {
    color: #333;
}

.ckbox-primary input[type="checkbox"]:checked+label:before {
    border-color: #357EBD;
    background-color: #428BCA;
}

.ckbox-warning input[type="checkbox"]:checked+label:before {
    border-color: #EEA236;
    background-color: #F0AD4E;
}

.ckbox-success input[type="checkbox"]:checked+label:before {
    border-color: #1CAF9A;
    background-color: #1CAF9A;
}

.ckbox-danger input[type="checkbox"]:checked+label:before {
    border-color: #D43F3A;
    background-color: #D9534F;
}

.rdio label:before {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 1px;
    left: 0;
    content: '';
    display: inline-block;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    border: 1px solid #bbb;
    background: #fff;
}

.rdio input[type="radio"]:disabled+label {
    color: #999;
}

.rdio input[type="radio"]:disabled+label:before {
    background-color: #eee;
}

.rdio input[type="radio"]:checked+label::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 4px;
    display: inline-block;
    font-size: 11px;
    width: 10px;
    height: 10px;
    background-color: #444;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

.rdio-default input[type="radio"]:checked+label:before {
    border-color: #999;
}

.rdio-primary input[type="radio"]:checked+label:before {
    border-color: #428BCA;
}

.rdio-primary input[type="radio"]:checked+label::after {
    background-color: #428BCA;
}

.rdio-warning input[type="radio"]:checked+label:before {
    border-color: #F0AD4E;
}

.rdio-warning input[type="radio"]:checked+label::after {
    background-color: #F0AD4E;
}

.rdio-success input[type="radio"]:checked+label:before {
    border-color: #1CAF9A;
}

.rdio-success input[type="radio"]:checked+label::after {
    background-color: #1CAF9A;
}

.rdio-danger input[type="radio"]:checked+label:before {
    border-color: #D9534F;
}

.rdio-danger input[type="radio"]:checked+label::after {
    background-color: #D9534F;
}


/********** admin styles **********/

.cates {}

.adminpanel .cates .cate {}

.adminpanel .cates .cate>a {
    display: block;
    line-height: 100px;
    font-size: 17px;
    color: #000;
}

.modal .banners {}

.modal .banners .banner {
    padding-bottom: 100%;
    margin-bottom: 20px;
    border: 1px solid #eee;
}

.modal .banners a.new {
    position: relative;
    padding-bottom: 50%;
    border: 1px dashed #ddd;
    color: #d97979;
    overflow: hidden;
    margin-bottom: 20px;
    padding-bottom: 100%;
    cursor: pointer;
    transition: all .2s ease;
    display: block;
}

.modal .banners a.new>i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.modal .banners a.new:hover {
    background-color: #fcf3cb;
    font-size: 25px;
}


/********** 12. CUSTOM STYLES **********/


/***************************************/

.m10 {
    margin: 10px
}

.mtm5 {
    margin-top: -5px;
}

.mt0 {
    margin-top: 0 !important;
}

.mt5 {
    margin-top: 5px !important;
}

.mt10 {
    margin-top: 10px !important;
}
.mt15 {
    margin-top: 15px !important;
}
.mt50 {
    margin-top: 50px;
}

.mt100 {
    margin-top: 100px !important;
}

.mt20 {
    margin-top: 20px !important;
}

.mt25 {
    margin-top: 20px !important;
}

.mt30 {
    margin-top: 30px !important;
}

.mt40 {
    margin-top: 40px !important;
}

.mr10 {
    margin-right: 10px !important;
}

.mr20 {
    margin-right: 20px !important;
}

.ml2 {
    margin-left: 2px !important;
}

.ml5 {
    margin-left: 5px !important;
}

.ml10 {
    margin-left: 10px !important;
}

.ml15 {
    margin-left: 15px !important;
}
.ml40{
    margin-left: 40px !important;
}
.ml350 {
    margin-left: 350px !important;
}

.mr3 {
    margin-right: 3px !important;
}

.mr5 {
    margin-right: 5px !important;
}

.mr15 {
    margin-right: 15px !important;
}

.mr20 {
    margin-right: 20px !important;
}

.mr30 {
    margin-right: 30px !important;
}

.mb0 {
    margin-bottom: 0px;
}

.mb5 {
    margin-bottom: 5px;
}

.mb8 {
    margin-bottom: 8px;
}

.mb9 {
    margin-bottom: 9px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb15 {
    margin-bottom: 15px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb30 {
    margin-bottom: 30px;
}

.mb50 {
    margin-bottom: 50px !important
}

.nomargin {
    margin: 0;
}

.no-m {
    margin: 0;
}

.nopadding {
    padding: 0;
}

.no-p {
    padding: 0 !important;
}

.padding10 {
    padding: 10px;
}

.p10 {
    padding: 10px
}

.pt5 {
    padding-top: 5px;
}

.pt7 {
    padding-top: 7px;
}

.pt0 {
    padding-top: 0px;
}

.pt10 {
    padding-top: 10px;
}

.pb10 {
    padding-bottom: 10px;
}

.pb15 {
    padding-bottom: 15px;
}

.pb50 {
    padding-bottom: 50px;
}

.pb100 {
    padding-bottom: 100px;
}

.pr0 {
    padding-right: 0px !important;
}

.pt1 {
    padding-top: 1px;
}

.pr5 {
    padding-right: 5px;
}

.pr10 {
    padding-right: 10px;
}

.pr300 {
    padding-right: 300px;
}

.pl5 {
    padding-left: 5px;
}

.pl0 {
    padding-left: 0px !important;
}

.pl10 {
    padding-left: 10px;
}

.pl15 {
    padding-left: 15px;
}

.pl20 {
    padding-left: 20px;
}

.pl30 {
    padding-left: 30px;
}

.pl40 {
    padding-left: 40px;
}

.pl50 {
    padding-left: 50px;
}

.padding15 {
    padding: 15px;
}

.p5 {
    padding: 5px;
}

.p15 {
    padding: 15px;
}

.padding20 {
    padding: 20px;
}

.noborder {
    border: 0;
}

.no-b {
    border: 0;
}

.lh40 {
    line-height: 40x;
}

.height200 {
    height: 200px;
}

.height300 {
    height: 300px;
}

.width100p {
    width: 100%;
}

.width300 {
    width: 300px;
}

.wauto {
    width: auto !important;
}

.w300 {
    width: 300px !important;
}

.w250 {
    width: 250px !important;
}

.w200 {
    width: 200px !important;
}

.w180 {
    width: 180px !important;
}

.w150 {
    width: 150px !important;
}

.w120 {
    width: 120px !important;
}

.w130 {
    width: 130px !important;
}

.w100 {
    width: 100px !important;
}

.w80 {
    width: 80px !important;
}

.w50 {
    width: 50px !important;
}

.w40 {
    width: 40px !important;
}

.w20 {
    width: 20px !important;
}

.w25 {
    width: 25px !important;
}

.w15 {
    width: 15px !important;
}

.w30 {
    width: 30px !important;
}

.w35 {
    width: 30px;
}

.h35 {
    height: 35px;
}

.wp100 {
    width: 100%
}

.wp80 {
    width: 80%
}

.wp90 {
    width: 90%
}

.wp50 {
    width: 50%
}

.wp30 {
    width: 30%
}

.wp20{
    width: 20%;
}
.mw90 {
    max-width: 90px;
    margin: 0 auto
}

.vmiddle {
    vertical-align: middle !important;
}

.tcenter {
    text-align: center;
}

.tleft {
    text-align: left !important;
}

.tright {
    text-align: right;
}

.fleft {
    float: left
}

.fright {
    float: right
}

.iblk {
    display: inline-block
}

.minha {
    min-height: auto !important
}

.fs11 {
    font-size: 11px
}

.fs12 {
    font-size: 12px
}

.fs13 {
    font-size: 13px
}

.fs15 {
    font-size: 15px
}

.prelative {
    position: relative
}

.zidx1 {
    z-index: 1
}

.lineh20 {
    line-height: 20px
}

.lh35 {
    line-height: 35px
}

.lh40 {
    line-height: 40px
}

.blkcenter {
    display: block;
    text-align: center
}

.link {
    cursor: pointer
}

.bb2 {
    border-bottom: 2px solid #333
}

.noround {
    -moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    border-radius: 0px !important;
}

.text-black {
    color: #000;
}

.iblock {
    display: inline-block;
}

.inline-block {
    display: inline-block;
}

.block {
    display: block;
}

.font12 {
    font-size: 12px
}

.bordered {
    border: 1px solid #e3e6f3;
}

.w20tc {
    width: 20px;
    text-align: center;
}


/*
.bg-danger { background-color: #da3e16; color: #FFF; }
.bg-warning { background-color: #c39a14; color: #FFF; }
.bg-primary { background-color: #1582dc; color: #FFF; }
.bg-info { background-color: #15acdc; color: #FFF; }
.bg-success { background-color: #15db81; color: #FFF; }
*/

.bg-danger {
    background-color: #d9534f;
    color: #FFF;
}

.bg-warning {
    background-color: #f0ad4e;
    color: #FFF;
}

.bg-primary {
    background-color: #428bca;
    color: #FFF;
}

.bg-info {
    background-color: #5bc0de !important;
    color: #FFF;
}

.bg-success {
    background-color: #1caf9a;
    color: #FFF;
}

.bg-default {
    background-color: #D8DCEE;
    color: #59595A;
}

.bg-dark {
    background-color: #333;
    color: #FFF;
}

.bg-gray {
    background-color: #F5F5F5
}

.bg-good {
    background-color: #931ca4;
    color: #FFF;
}

.bg-reading {
    background-color: #aa27b5;
    color: #FFF;
}

.bg-none {
    background-color: #795548;
    color: #FFF;
}

.txt-danger {
    color: #d9534f !important;
}

.txt-warning {
    color: #f0ad4e !important;
}

.txt-primary {
    color: #428bca !important;
}

body .lectures .lecture.box .bgLec {
    height: 70px;
    background-position: center center;
    background-size: cover;
}

.txt-success {
    color: #1caf9a !important;
}

.txt-default {
    color: #D8DCEE !important;
}

.btn-round {
    border-radius: 25px;
}

.btn-action {
    background-color: #34cdcb;
    border-color: #06c0be;
    color: #fff;
}

.btn-action:hover,
.btn-action:active {
    background-color: #06c0be;
    border-color: #0bb0ae;
}

.btn-transparent {
    background-color: transparent;
    border: none
}

.color-primary {
    color: #1582dc
}




/*************** school css ************/

.mainpanel2 .contentpanel .wrapcontent {
    max-width: 1000px;
    margin: 0 auto;
}

.mod_school .mainpanel2 .nav-tabs li>a {
    padding: 10px 15px;
}

.adminview .filter {
    position: relative;
    padding: 5px;
    line-height: 30px;
    border-bottom: 1px solid #ddd;
}

.filterbar {
    position: relative;
    padding: 5px;
    line-height: 30px;
    border-bottom: 1px solid #ddd;
}

.filterbar .btn-group {
    margin-bottom: 0px;
}

.filterbar .wrapsearch {
    float: left;
    width: 50%;
}

.filterbar .filter {
    float: right;
}

.filterbar .search,
.filterbar .smry {
    float: left;
}

.filterbar .search.clear {
    float: none;
}

.mod_school .items {
    padding: 10px 0px;
}

.mod_school .items .box {
    padding: 10px;
    margin-bottom: 10px;
    min-height: auto;
    cursor: pointer;
    position: relative;
}

.mod_school .items .box:hover {
    border: 1px solid #ccc;
}

.mod_school .items .box:hover input[type="checkbox"],
.mod_school .items .box:hover .option {
    display: inline-block;
}

.mod_school .items .box.sel:hover,
.mod_school .items .box.sel {
    background-color: #F0F0F0;
}

.mod_school .items .box.sel input[type="checkbox"] {
    display: inline-block;
}

.mod_school .items .box .option {
    display: none;
}

.box.course {
    width: 100%;
    height: auto;
}

.lectures .box.course>.thumb {
    float: left;
    width: 80px;
    height: 70px;
    position: relative;
    background-color: #ababab;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.lectures .box.course>.thumb>i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
}

.lectures .box.course>.thumb .pic {
    width: 100%;
    height: 100%;
}

.lectures .box.course>.info {
    list-style: none;
    margin: 0px 0px 0px 85px;
    padding: 0px;
    font-size: 12px;
    border: none;
    position: relative;
}

.lectures .box.course>.info .cate {
    top: auto;
}

.box.course>.thumb>.bg {
    width: 100%;
    height: 100%;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.box.course>.info .title {
    font-size: 14px;
    margin: 5px 0px;
    font-weight: 600;
}

.box.course>.info .rate>.desc {
    margin-top: 5px;
}

.box.course>.info .rate>.desc>span {
    margin-right: 2px;
    color: #000;
}

.box.course>.info .rdate {
    font-size: 11px;
    margin-top: 2px;
}

.item .option,
.card .option,
.widget .option,
.box .option {
    position: absolute;
    top: 0px;
    right: 5px;
    display: none;
    z-index: 1;
}

.btnbx .item .option {
    top: -5px;
    right: -5px;
    border: 1px solid #eee;
    background-color: #fff;
    border-radius: 5px;
}

.btnbx .item .option>.btn {
    line-height: 1px;
}

.box .checkbox {
    position: absolute;
    top: 0px;
    left: 5px;
    display: none;
    z-index: 3;
}

.box.sel .option,
.box.sel .checkbox,
.lesson-panel.edit .item:hover .option,
.box:hover .option,
.box:hover .checkbox {
    display: inline-block;
}

.box .option>span[data-role="remove"] {
    font-size: 25px;
}

.option .btn {
    color: #fff;
    background-color: transparent;
    padding: 3px;
    text-shadow: 1px 1px 2px #333;
}

.lecture .option .btn {
    color: #000;
    text-shadow: none;
}

.widget .option .btn {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.mod_school .buddy>.thumb {
    float: left;
    position: relative;
    margin-right: 5px;
}

.mod_school .buddy .thumb>img {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 45px;
}

.mod_school .buddy>.thumb>.status {
    position: absolute;
    width: 12px;
    height: 12px;
    top: 2px;
    right: 2px;
    border: 2px solid #FFF;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-color: #ddd;
}

.mod_school .buddy {
    font-size: 12px;
}

.mod_school .buddy>.info h5 {
    margin: 5px 0px;
    color: #000;
}

.mod_school .buddy>.info h5 .name {
    font-size: 14px;
    font-weight: 600;
}

.mod_school .buddy>.info .organ {
    color: #777;
}


/* gauge-bar */

.gauge-bar {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 100px;
    overflow: hidden;
    background-color: #eee;
    border-radius: 150px 150px 0 0;
    margin: 7px 0;
}

.gauge-bar > .percent {
    position: absolute;
    top: 100px;
    left: -200%;
    width: 400%;
    height: 400%;
    margin-left: 100px;
    background-color: #434f90;
    transform-origin: top center; 
}

.gauge-bar > .mask {
    position: absolute;
    border-radius: 150px 150px 0 0;
    background-color: #fff;
    top: 30px;
    left: 30px;
    height: 100%;
    right: 30px;
}

.gauge-bar > .value {
    position:absolute; 
    left:0; 
    bottom: 5px;
    width:100%;  
    font-size: 40px;
    font-weight:700;
    text-align: center;
}

/*************** my history  ************/

.body_mypage .studentpanel.logpanel {
    padding-top: 70px;
}

.body_mypage .studentpanel.logpanel > .headerbar {
    height: initial;
}

.studentpanel.logpanel > .wrappanel {
    padding: 10px 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.studentpanel.logpanel .smry {
    margin-bottom: 20px;
}

.studentpanel.logpanel .smry .gauge-bar {
    margin-top: 10px; 
}

.studentpanel.logpanel .smry .stitle {
    margin: 5px 0;
    font-size: 15px;
}

.studentpanel.logpanel .smry .dashboard {
    min-height: 200px;
    margin: 0px;
    padding: 5px 0;
}

.studentpanel.logpanel .smry .chart {
    height: 180px;
    position: relative;
    padding-bottom: 20px;
    text-align: center;
}

.studentpanel.logpanel .smry .chart::before {
    content: '';
    display: inline-block;
    height: 100%;
}

.studentpanel.logpanel .smry .chart .bar {
    display: inline-block;
    width: 10%;
    vertical-align: bottom;
    background-color: #fa6c4b;
    position: relative;
    border-radius: 5px;
    cursor: pointer;
}

.studentpanel.logpanel .smry .chart .bar + .bar {
    margin-left: 5px;
}

.studentpanel.logpanel .smry .chart .bar::before {
    content: attr(day);
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: -40px;
    text-align: center;
    color: #000;
}

.studentpanel.logpanel .smry .calendar {
    min-height: 200px;
}

.studentpanel.logpanel .smry .usagebar {
    background-color: #efefef;
    border-radius: 5px;
    overflow: hidden;
}

.studentpanel.logpanel .smry .usagebar > div {
    float: left;
    line-height: 40px;
    text-align: center;
}

.studentpanel.logpanel .smry .usagebar > div.video {
    background-color: #e95b3a;
    color: #fff;
}

.studentpanel.logpanel .smry .usagebar > div.game {
    background-color: #504294;
    color: #fff;
}

.studentpanel.logpanel .smry .usagebx {
    min-height: 200px;
}

.studentpanel.logpanel .smry .usagebx .title {
    font-size: 15px;
}

.studentpanel.logpanel .smry .usagebx .chart {
    height: 140px;
    padding-top: 5px;
    text-align: center;
}

.studentpanel.logpanel .smry .usagebx .chart .bar {
    width: 27%;
}

.studentpanel.logpanel .smry .usagebx .chart .bar.victory {
    background-color: var(--purple);
}

.studentpanel.logpanel .smry .usagebx .chart .bar.basic {
    background-color: var(--blue);
}

.studentpanel.logpanel .smry .usagebx .chart .bar.inter {
    background-color: var(--orange);
}

.studentpanel.logpanel .history {
}

.studentpanel.logpanel .history .period {
}

.studentpanel.logpanel .history .month {
    text-align: center;
}

.studentpanel.logpanel .history .month > span {
    display: inline-block;
    padding: 5px 10px;
    margin-bottom: 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 17px;
}

.studentpanel.logpanel .history .month > span:hover {
    background-color: #EFEFEF;
}

.studentpanel.logpanel .history .days {
    position: relative;
    margin-bottom: 5px;
    text-align: center;
    overflow: hidden;
    --swiper-navigation-sides-offset: 0px;
    --swiper-navigation-size: 27px;
}

.studentpanel.logpanel .history .days .day {
    display: inline-block;
    width: auto;
    border-radius: 10px;
    text-align: center;
    font-size: 15px;
    padding: 5px 20px;
    cursor: pointer;
}

.studentpanel.logpanel .history .days .day.today::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    line-height: 0;
    border-radius: 50%;
    background-color: #f84c30;
}

.studentpanel.logpanel .history .days .day.cur {
    color: #fff;
    background-color: #f84c30;
}

.studentpanel.logpanel .history .days .day.cur > label {
    color: #fff;
}

.studentpanel.logpanel .history .days .day > label {
    display: block;
    margin: 5px 0;
}

.studentpanel.logpanel .history .days .day > span {
    display: inline-block;
    font-size: 17px;
}

.studentpanel.logpanel .history .lessons {
}

.studentpanel.logpanel .history .lessons .lesson {
    background-color: #fff;
    padding: 0px;
}

.studentpanel.logpanel .history .lessons .lesson .thumb {
    padding-bottom: 100%;
    background-color: #EFEFEF;
}

.studentpanel.logpanel .history .lessons .lesson .thumb::before {
    content: '';
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 55px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.studentpanel.logpanel .history .lessons .lesson[data-type=video] .thumb::before {
    content: '\f144';
}

.studentpanel.logpanel .history .lessons .lesson .mtitle {
    margin: 5px 0px 0px;
}

.studentpanel.logpanel .history .lessons .lesson .title {
}

/* game main */

.body_game .gamepanel.studentpanel .contentpanel {
    padding: 100px 50px 150px;
}

.body_game .gamepanel.studentpanel .box {
    position: relative;
    border-radius: 25px;
    display: block;
    background-color: #EFEFEF;
}

.body_game .gamepanel.studentpanel .main .box {
    height: calc(100dvh - 320px);
}

.body_game .gamepanel.studentpanel .etc {
    margin-top: -20px;
}

.body_game .gamepanel.studentpanel .etc .box {
    margin-top: 20px;
    height: calc((100dvh - 340px) / 2);
}

.body_game .gamepanel.studentpanel .box h1 {
    font-size: 22px;
    padding: 10px 30px;
    white-space: nowrap;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 25px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #000;
}

/* game gugudan */

.view[name=game_gugudan] {
    background: url(/skins/default/images/gugudan/main_bg.jpg) no-repeat center center/cover;
}

.view[name^=game_gugudan] .mainpanel.studentpanel .mnutoggle,
.view[name^=game_gugudan] .mainpanel.studentpanel .headerbar .page-title,
.view[name^=game_gugudan] .mainpanel .headerbar .headermenu li .btn {
    color: #fff;
    text-shadow: 0 1px 1px #000;
}

.gugudanpanel .contentpanel {
    padding: 0px 20px;
    height: calc(100dvh - 70px);
}

.gugudanpanel .dans {
    min-width: 70%;
    max-width: 90%;
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.gugudanpanel .dans::before {
    content: "";
    position: absolute;
    width: 35%;
    height: 25%;
    top: -25%;
    left: 50%;
    transform: translateX(-50%);
    background: url(/skins/default/images/gugudan/title.png) no-repeat center top/contain;
}

.gugudanpanel .dans .row .box {
    display: block;
    height: 0;
    margin-bottom: 20px;
    cursor: pointer;
    position: relative;
    background: transparent url(/skins/default/images/gugudan/btn_menu_bg.png) no-repeat center center/contain;
    border: none;
    padding-bottom: 100%;
}

.gugudanpanel .dans .box.lock {
    filter: grayscale(.8);
    -webkit-filter: grayscale(.8);
}

.gugudanpanel .dans .row .box::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 50%;
}

.gugudanpanel .dans .row .box.dan2::before {
    background: transparent url(/skins/default/images/gugudan/btn_2dan.png) no-repeat center center/contain;
    width: 35%;
}

.gugudanpanel .dans .row .box.dan3::before {
    background: transparent url(/skins/default/images/gugudan/btn_3dan.png) no-repeat center top/contain;
}

.gugudanpanel .dans .row .box.dan4::before {
    background: transparent url(/skins/default/images/gugudan/btn_4dan.png) no-repeat center top/contain;
}

.gugudanpanel .dans .row .box.dan5::before {
    background: transparent url(/skins/default/images/gugudan/btn_5dan.png) no-repeat center top/contain;
}

.gugudanpanel .dans .row .box.dan6::before {
    background: transparent url(/skins/default/images/gugudan/btn_6dan.png) no-repeat center top/contain;
}

.gugudanpanel .dans .row .box.dan7::before {
    background: transparent url(/skins/default/images/gugudan/btn_7dan.png) no-repeat center top/contain;
}

.gugudanpanel .dans .row .box.dan8::before {
    background: transparent url(/skins/default/images/gugudan/btn_8dan.png) no-repeat center top/contain;
}

.gugudanpanel .dans .row .box.dan9::before {
    background: transparent url(/skins/default/images/gugudan/btn_9dan.png) no-repeat center top/contain;
}

.gugudanpanel .dans .row .box::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 13%;
    transform: translateX(-50%);
    background: transparent url(/skins/default/images/gugudan/btn_menu_label.png) no-repeat center center/contain;
    width: 60%;
    height: 40%;
}

.gugudanpanel .dans .row .box .title {
    position: absolute;
    left: 50%;
    bottom: 20%;
    transform: translateX(-50%);
    padding: 5px 20px;
    font-family: 'Binggrae';
    font-weight: 700;
    color: #fff;
    font-size: 40px;
    margin: 0px;
    white-space: nowrap;
    text-shadow: -1px -1px 1px #5e231a;
    z-index: 1;
}

/* game tools */

.gameview .contentpanel.center {
    height: calc(100dvh - 70px);
    padding: 0 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gameview .contentpanel.hpanel .box {
    position: relative;
    padding-bottom: 100%;
    margin: 10px 0;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 1px 1px 5px #ccc;
}

.gameview .contentpanel.hpanel .box .title {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    text-align: center;
    font-size: 17px;
    padding: 10px;
    background-color: rgba(0, 0, 0, .7);
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0px;
}

/* game dabikids step */

.view[name^=game_kids] {
}

.mainpanel.kidsgamepanel {
    padding-top: 130px;
}

.mainpanel.kidsgamepanel .headerbar {
    background-color: var(--yellow);
}

.mainpanel.kidsgamepanel .contentpanel {
    padding: 0 20px 20px;
}

.mainpanel.kidsgamepanel .contentpanel .tabs {
    text-align: center;
    background-color: var(--yellow);
    position: fixed;
    width: 100%;
    top: 70px;
    left: 0px;
    z-index: 2;
    padding: 0 10px;
    border-bottom: 2px solid #fff;
}

.mainpanel.kidsgamepanel .contentpanel .tabs > li > a {
    display: block;
    font-size: 22px;
    width: 150px;
    line-height: 50px;
    color: #000;
}

.mainpanel.kidsgamepanel .contentpanel .tabs > li.active > a {
    font-weight: bold;
    background-color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.mainpanel.kidsgamepanel .contentpanel .row .box {
    position: relative;
    padding-bottom: 100%;
    margin: 10px 0;
    border-radius: 20px;
    overflow: hidden;
}

.mainpanel.kidsgamepanel .contentpanel .box .no {
    position: absolute;
    padding: 5px 10px;
    border-radius: 15px;
    background-color: #fff;
    font-weight: bold;
    font-size: 17px;
    display: none;
}

/* game gugudan step */

.view[name^=game_gugudan_] {
    background: url(/skins/default/images/gugudan/lecture_bg.png) no-repeat center bottom/cover fixed;
}

.mainpanel.gugudansteppanel .contentpanel {
    padding: 20px 0;
    height: calc(100dvh - 70px);
    overflow-x: auto;
    overflow-y: hidden;
    background: url(/skins/default/images/gugudan/track.png) repeat-x center bottom 150px;
}

.mainpanel.gugudansteppanel .activities {
    position: absolute;
    top: initial;
    bottom: 150px;
    padding: 20px 50px;
    white-space: nowrap;
    animation: wslidein 0.8s ease-out forwards;
}

.mainpanel.gugudansteppanel .activities .box {
    position: relative;
    display: inline-block;
    width: 300px;
    height: 370px;
    border: none;
    margin: 0px;
    margin-left: 0px;
    cursor: pointer;
    overflow: initial;
    background-color: transparent;
}

.mainpanel.gugudansteppanel .activities .box + .box::before {
    content: '';
    position: absolute;
    left: -28px;
    bottom: 40px;
    z-index: 0;
    width: 40px;
    height: 20px;
    background: url(/skins/default/images/gugudan/train_link.png) no-repeat center bottom/cover;
    padding-bottom: initial;
}

.mainpanel.gugudansteppanel .activities .box:last-child {
    margin-right: 25px;
}

.mainpanel.gugudansteppanel .activities .box::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: url(/skins/default/images/gugudan/train02.png) no-repeat center bottom/contain;
    z-index: 1;
}

.mainpanel.gugudansteppanel .activities .box:first-child {
    width: 450px;
    margin-left: 10px;
}

.mainpanel.gugudansteppanel .activities .box:first-child::after {
    background: url(/skins/default/images/gugudan/train01.png) no-repeat center bottom/contain;
}

.mainpanel.gugudansteppanel .activities .activity {
    position: absolute;
    top: 34%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 59%;
    height: 40%;
    border-radius: 15px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.mainpanel.gugudansteppanel .activities .box:first-child .activity {
    left: 63%;
    width: 40%;
}

.mainpanel.gugudansteppanel .activities .activity .no {
    display: none;
}

.mainpanel.gugudansteppanel .activities .activity .title {
    position: absolute;
    margin: 0px;
    width: 100%;
    line-height: 40px;
    height: 40px;
    left: 0px;
    bottom: 0px;
    text-align: center;
    font-size: 22px;
    background-color: rgba(0, 0, 0, .7);
    color: #f9e3b0;
    text-shadow: 0 2px 2px #783e0a;
}

/*************** home2 css ************/

.mod_home .extraprofile .box {
    margin-bottom: 20px;
}

.mod_home .wrapcontent {
    max-width: 1280px;
    margin: 0 auto;
}

.mod_home .widget table .score {
    font-size: 15px;
    font-weight: 600;
}

.mod_home .widget table .score>span {
    margin-left: 3px;
    font-size: 11px;
    font-weight: normal;
}

.mod_home .widget table .score>span i {
    margin-right: 3px;
}

.mod_home .widget table .score>span.plus {
    color: #d9534f;
}

.mainpanel2 {
    padding-top: 60px;
    -webkit-transition: width 300ms;
    -moz-transition: width 300ms;
    -o-transition: width 300ms;
    transition: width 300ms;
}

.missionview .mainpanel2 .contentpanel {
    padding: 0px;
    background-color: #333;
}

.mainpanel2 .contentpanel {
    background-color: #FFF;
    padding: 10px;
    margin: 0px 10px 10px 10px;
    min-height: calc(100vh - 70px);
}

.mainpanel2.hasmnu .contentpanel {
    min-height: calc(100vh - 110px);
}

.programview .mainpanel2 .contentpanel {
    position: relative;
}

.programview .mainpanel2 .contentpanel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    /*background-color: rgb(140, 109, 98);*/
}

.headerbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    -moz-box-shadow: 0 3px 5px rgba(12, 12, 12, 0.05);
    -webkit-box-shadow: 0 3px 5px rgba(12, 12, 12, 0.05);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
    opacity: 0.98;
    line-height: 3.2em;
}

.hasmnu .headerbar {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.mainpanel2.hasmnu .contentpanel {
    margin: 40px 10px 10px 10px;
}

.headerbar .header-right .dropdown-menu {
    right: 0;
    left: auto;
}

.headerbar .btn:hover,
.headerbar .btn:focus {
    color: #F0F0F0;
    background: #1377c9;
}

.headerbar .header-left {
    float: left;
    white-space: nowrap;
}

.headerbar.header .header-left {
    padding-left: 38px;
}

.testview .headerbar .header-left {
    padding-left: 5px;
}

.overpanel .headerbar .header-left {
}

.headerbar .btn-paste {
    position: relative;
}

.headerbar .btn-paste .badge {
    position: absolute;
    font-size: 10px;
    font-weight: normal;
    right: 2px;
    top: 5px;
    line-height: 13px;
    background-color: #D9534F;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    padding: 2px 5px;
}

.headerbar .page-title {
    display: inline-block;
    font-size: 15px;
    font-weight: bold;
    line-height: 50px;
    padding: 0px 5px;
    margin-left: -5px;
    vertical-align: middle;
    color: #FFF;
    white-space: nowrap;
}

.headerbar a.page-title:hover,
.headerbar a.page-title:focus {
    text-decoration: none;
    background: #1377c9;
    color: #F0F0F0;
}

.selheader .page-title {
    padding-left: 10px;
}

.mnutoggle {
    padding: 10px;
}


/*
.mnutoggle {
  display: inline-block;
  width: 50px;
  cursor: pointer;
  color: #FFF;
  text-align: center;
  -moz-transition: all 0.2s ease-out 0s;
  -webkit-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
}

.mnutoggle:hover {
  color: #F0F0F0;
  background: #1377c9;
}

.mnuback {
  cursor: pointer;
  padding: 0 5px;
}

.mnuback:hover {
  color: #F0F0F0;
  background: #1377c9;
  text-decoration: none;
}
*/

.modal-header .modal-title {
    display: inline-block;
}

.modal-header .modal-title>.no {
    border-radius: 5px;
    background-color: #3675d7;
    padding: 0px 7px;
    color: #fff;
}

.modal-header .mnuback {
    cursor: pointer;
    text-decoration: none;
}

.modal-header .mnuback:active,
.modal-header .mnuback:hover {
    text-decoration: none;
}

.modal-header .close {
    font-size: 33px;
    font-weight: 300;
    margin-top: 0px !important;
    line-height: 0.8em;
}

.modal-header .btn-max {
    font-size: 22px;
    float: right;
    color: #000;
    opacity: .2;
    filter: alpha(opacity=20);
    cursor: pointer;
    background: transparent;
    -webkit-appearance: none;
    padding: 3px;
}

.modal-header .btn-max>span {
    display: inline-block;
    width: 23px;
    height: 23px;
    background-color: #fff;
    border: 3px solid #000;
}

.modal-header .btn-max:hover {
    opacity: .6;
}

.mainpanel2 .headerbar .header-right {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1;
    background-color: #1582dc;
}

body .mainpanel2 .headerbar a {
    color: #FFF;
}

.mainpanel2 .headerbar a.btn {
    color: #FFF;
    padding-bottom: 10px;
}

.mainpanel2 .headerbar .header-right .btn-group {
    margin-bottom: 0px;
}

.mainpanel2>a.mnutoggle {
    position: fixed;
    z-index: 101;
    top: 0px;
    color: #fff;
    line-height: 48px;
    padding: 0 10px;
    border-radius: 0;
}

.stickyheader .leftpanel {
    display: block;
}

.sidepanel {
    background-color: #1d2939;
    display: none;
}

.mnu-expand section {
    overflow-x: hidden;
}

.mnu-expand .leftpanel {
    width: 320px;
    display: block;
    position: fixed;
}

.mnu-expand .mainpanel2 {}

.mnu-expand .mainpanel2 .headerbar .header-left {
    /*margin-left: 280px;*/
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3ms;
    transition: 0.3s;
}

.expand-right .sidepanel {
    height: 100%;
    display: block;
    overflow-y: auto;
    position: fixed;
    -webkit-overflow-scrolling: touch;
}

.expand-right .mainpanel2 {}

.expand-right .mainpanel2 .headerbar .header-right {
    /*margin-right: 300px;*/
}

.panel-book .leftpanel {
    background-color: #1d1f26;
}

body[data-module=_dabisu][data-role=student] .leftpanel {
    background-color: #fff;
    -moz-box-shadow: 3px 0 5px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 3px 0 5px rgba(0, 0, 0, 0.1);
    box-shadow: 3px 0 5px rgba(0, 0, 0, 0.1);
}

.leftpanel .profile {
    padding: 10px;
    background: url(/skins/default/images/menubak.jpg) left top no-repeat;
    background-size: 100% auto;
    color: #FFF;
}

body[data-module=_dabisu][data-role=student] .leftpanel .profile {
    background: var(--yellow);
    text-align: center;
    padding: 20px 10px;
    margin-bottom: 10px;
}

body[data-module=_dabisu][data-role=student] .leftpanel .wrap {
    padding: 0px;
}

body[data-module=_dabisu][data-role=student] .leftpanel .profile img {
    width: 100px;
}

.leftpanel .profile img {
    width: 100px;
    display: inline-block;
}

body[data-module=_dabisu][data-role=student] .leftpanel .profile .info {
    font-size: 17px;
    text-shadow: initial;
    color: #000;
}

.leftpanel .profile .info {
    display: block;
    position: relative;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    color: #FFF;
}

body[data-module=_dabisu][data-role=student] .leftpanel .profile .info h5 {
    font-size: 17px;
    margin: 15px 0 5px;
}

.leftpanel .profile .info h5 {
    margin: 10px 0 5px;
}

.leftpanel .profile .info .btn-group {
    position: absolute;
    top: 0px;
    right: 0px;
    margin: 0px;
}

body[data-module=_dabisu][data-role=student] .leftpanel .profile .info .btn-group .dropdown-toggle {
    color: #000;
}

.leftpanel .profile .info .btn-group .dropdown-toggle {
    background-color: transparent;
    padding: 3px 8px;
    border: none;
    color: #fff;
    line-height: 13px;
}

body[data-module=_dabisu][data-role=student] .leftpanel .profile .dropdown-menu > li > a {
    font-size: 15px;
    font-weight: 300;
}

body[data-module=_dabisu][data-role=student] .leftpanel .profile .dropdown-menu > li > a i {
    width: 20px;
    text-align: center;
}

body[data-module=_dabisu][data-role=student] .leftpanel .profile .info label {
    color: #000;
    font-size: 15px;
    font-weight: 300;
    margin: 0px;
}

.leftpanel .profile .info label {
    color: #fff;
}

.leftpanel .menu {
    list-style: none;
    margin: 0;
    padding: 10px 0;
}

.leftpanel .menu + .mneu {
    border-top: 1px solid #343E4D;
}

body[data-module=_dabisu][data-role=student] .leftpanel .menu + .mneu {
    border: none;
}

.leftpanel .menu li {}

body[data-module=_dabisu][data-role=student] .leftpanel .menu li.active {
    background-color: #fff;
}

.leftpanel .menu li.active {
    background-color: #3f485a;
}

body[data-module=_dabisu][data-role=student] .leftpanel .menu li a {
    color: #000;
    font-size: 17px;
    font-weight: 300;
    padding: 5px 10px;
    line-height: 33px;
}

.leftpanel .menu li a {
    color: #b2b7c3;
    display: block;
    padding: 10px 15px;
    width: 100%;
    position: relative;
}

.leftpanel .menu li a:hover {
    text-decoration: none;
    color: #FFF;
}

body[data-module=_dabisu][data-role=student] .leftpanel .menu li a i {
    width: 50px;
}

.leftpanel .menu li a i {
    min-width: 30px;
    padding-right: 15px;
    line-height: 20px;
    text-align: center;
}

.leftpanel .menu li a i.dir-right {
    position: absolute;
    right: 0px;
}

.leftpanel .menu li a i.mnu-expand.expand::before {
    content: "\f107";
}

.leftpanel .menu .smenu {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.leftpanel .menu .smenu li {
    padding-left: 25px;
}

.panelbar .ddlcate .btn-cate {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.contentpanel .panelbar {
    position: relative;
    background-color: #F5F5F5;
    padding: 5px;
}

.contentpanel .panelbar .mnu {}

.contentpanel .panelbar .mnu .btn-group {
    margin-bottom: 0px;
}

.contentpanel .panelbar .mnu .dropdown-menu li i {
    width: 15px;
    margin-right: 10px;
    text-align: center;
}

.contentpanel .wrapcontent .category {
    padding: 10px 5px;
    position: relative;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    font-size: 15px;
}

.contentpanel .wrapcontent .category.icollapse {
    background-color: #F9F9F9;
    color: #999;
}

.contentpanel .wrapcontent .category.icollapse i.icon::before {
    content: "\f077";
}

.contentpanel .wrapcontent .category>i.icon {
    float: right;
}

.mod_home .tab-pane .panelbar .mnu .btn-group-mobile-new {
    position: fixed;
    bottom: 15px;
    right: 15px;
    display: none;
    z-index: 1;
}

.mod_home .tab-pane .panelbar .mnu .btn-group-mobile-new .btn {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: #F0AD4E;
    border-color: #EEA236;
    border-radius: 50%;
    line-height: 40px;
    width: 40px;
    height: 40px;
    color: #fff;
    font-weight: normal;
    font-size: 18px;
    text-align: center;
    cursor: pointer;
    padding: 0px;
    -moz-box-shadow: 3px 0 5px rgba(12, 12, 12, 0.5);
    -webkit-box-shadow: 3px 0 5px rgba(12, 12, 12, 0.5);
    box-shadow: 2px 2px 5px rgba(12, 12, 12, 0.5);
}

.picbx {
    background-color: rgba(0, 0, 0, 0.3);
    min-height: 110px;
    cursor: pointer;
    font-size: 0px;
    line-height: 0;
    position: relative;
    -moz-user-select: none;
    direction: ltr !important;
}

#popup-user .modal-body .picbx {
    background-color: #F5F5F5;
}

.picbx .label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0px;
    color: #777;
}

.form-group .required::before {
    content: '*';
}

.form-group.required label::before {
    content: '*';
}

.form-group.required label {
    color: #db5b1e;
}

.form-group .required {
    color: #db5b1e;
}

form .form-group .desc {
    margin-top: 5px;
    font-size: 12px;
    line-height: 20px;
    color: #22A7F0;
}

.modal .form-group .msg {
    display: inline-block;
    margin-top: 9px;
}

.modal .form-group .bgsort {
    background-color: #F5F5F5;
    padding: 0px 10px 10px;
}

.tab-pane.initial .panelbar .mnu .btn-new {
    display: none;
}

.contentpanel .panelbar .mnu>.initials>span {
    display: inline-block;
    padding-right: 8px;
    font-size: 15px;
    font-weight: 500;
}

.contentpanel .panelbar .mnu>.initials>span+span::before {
    content: '|';
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    color: #ccc;
    padding-right: 8px;
}

.contentpanel .panelbar .filter {
    float: right;
}

.contentpanel .panelbar .filter .btn-group {
    margin-bottom: 0px;
}


/*
.contentpanel .panelbar .filter .btn-group .btn-white {
  background: #F7F7F7 none repeat scroll 0% 0%;
}

.contentpanel .panelbar .filter .btn-group .btn-white:active,
.contentpanel .panelbar .filter .btn-group .btn-white:hover,
.contentpanel .panelbar .filter .btn-group .btn-white.active {
  background: #FFF none repeat scroll 0% 0%;
}
*/

.contentpanel .filterbx .btn-group .btn-white {
    background: #F7F7F7 none repeat scroll 0% 0%;
}

.contentpanel .filterbx .btn-group .btn-white:active,
.contentpanel .filterbx .btn-group .btn-white:hover,
.contentpanel .filterbx .btn-group .btn-white.active {
    background: #FFF none repeat scroll 0% 0%;
}

.panelcontent .category {
    font-size: 14px;
    font-weight: bold;
    padding: 5px 5px 0px 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    position: relative;
}

.panelcontent .category:hover {
    background-color: #F5F5F5;
}

.panelcontent .category .badge {
    font-size: 10px;
    font-weight: normal;
    padding: 2px 5px;
    margin-bottom: 3px;
    line-height: 12px;
    background-color: #1CAF9A;
}

.panelcontent .category.share .badge {
    background-color: #D9534F;
}

.panelcontent .category.default .badge {
    background-color: #428bca;
}

.panelcontent .category>.control {
    display: inline-block;
}

.panelcontent .category>.control>a {
    text-decoration: none;
}

.panelcontent .category>.control .dropdown-menu i {
    width: 10px;
    text-align: center;
}

.panelcontent .category>.control .dropdown-menu>li.master {
    display: none;
}

.panelcontent .category>.control .dropdown-menu.master-menu>li.master {
    display: inherit;
}

.panelcontent .category>.control .dropdown-menu.lock-menu>li.lock {
    display: none;
}

.panelcontent .category>i.icoex {
    font-size: 16px;
    font-weight: normal;
    color: #333;
    position: absolute;
    right: 10px;
    padding: 2px 5px;
}

#home_friends .panelcontent .category.expand i.icoex::before {
    content: "\f107";
}

.panelcontent .buddys {
    min-height: 50px;
    position: relative;
}

.panelcontent .buddys.hover {
    background-color: #F5F5F5;
}

.panelcontent .buddys.active {
    border: 1px dashed #eee;
}

.panelcontent .nogrp .option .mnu-drop {
    display: none;
}

.user[role]::before {
    position: absolute;
    top: 5px;
    left: 5px;
    content: '학생';
    font-size: 10px;
    background-color: #c94444;
    color: #fff;
    padding: 1px 5px;
    border-radius: 5px;
    box-shadow: 1px 1px 1px #777;
    z-index: 1;
}

.buddy {
    margin: 5px 0px;
    padding: 5px;
    cursor: pointer;
    position: relative;
}
.new-buddy {
    cursor: pointer;
}
.uproduct-outer {
    display: flex;
    border-top: 0.5px solid #eee;
    padding: 10px;
    padding-top: 20px;
}
.uproduct-inner {
    align-self: center;
}
.buddy.sel:hover,
.buddy.sel {
    background-color: #F0F0F0;
}

.buddy.sel input[type="checkbox"] {
    display: inline-block;
}

.buddy input[type="checkbox"] {
    position: absolute;
    top: 0px;
    left: 3px;
    z-index: 1;
    display: none;
}

.buddys .more {
    height: 70px;
    display: flex;
    align-items: center;
}

.buddys .more>a {
    display: inline-block;
    margin-left: 10px;
    width: 100%;
    text-decoration: none;
}

.buddys .more>a:hover,
.buddys .more>a:hover {
    text-decoration: none;
}

.buddy:after {
    clear: both;
    display: block;
    content: '';
}

.buddy:hover {
    background-color: #F9F9F9;
}

.buddy:hover input[type="checkbox"] {
    display: inline-block;
}

.buddy>.thumb {
    float: left;
    position: relative;
}

.profile .thumb>img,
.buddy .thumb>img {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 45px;
    height: 45px;
}

.profile .thumb::before {
    content: '학생';
    position: absolute;
    z-index: 1;
    top: -2px;
    left: -5px;
    font-size: 9px;
    opacity: .8;
    background-color: #c94444;
    color: #fff;
    padding: 0px 5px;
    box-shadow: 0px 1px 1px #333;
    border-radius: 5px;
}

.buddy .thumb>.status {
    position: absolute;
    top: 2px;
    right: -7px;
    font-size: 9px;
    opacity: .8;
}

.buddy .thumb .status::after {
    content: '학생';
    background-color: #c94444;
    color: #fff;
    padding: 1px 5px;
    box-shadow: 0px 1px 1px #333;
}

.buddy .info .status {
    content: '학생';
    background-color: #c94444;
    color: #fff;
    padding: 1px 5px;
    box-shadow: 0px 1px 1px lightgray;
    margin: 5px 0;
}

.user[role=admin]::before,
.buddy[role=admin] .thumb .status::after,
.buddy[role=admin] .info .status {
    content: '본사';
}

.user[role=master]::before,
.buddy[role=master] .thumb .status::after,
.buddy[role=master] .info .status {
    content: '본부';
    background-color: #df359c;
}

.user[role=head]::before,
.buddy[role=head] .thumb .status::after,
.buddy[role=head] .info .status {
    content: '지사';
    background-color: #df359c;
}

.user[role=mentor]::before,
.buddy[role=mentor] .thumb .status::after,
.buddy[role=mentor] .info .status {
    content: '멘토';
    background-color: #68b787;
}

.user[role=school]::before,
.buddy[role=school] .thumb .status::after,
.buddy[role=school] .info .status {
    content: '원장';
    background-color: #2680df;
}

.user[role=tutor]::before,
.buddy[role=tutor] .thumb .status::after,
.buddy[role=tutor] .info .status {
    content: '방문';
    background-color: #c6a440;
}

.user[role=manager]::before,
.buddy[role=manager] .thumb .status::after,
.buddy[role=manager] .info .status {
    content: '실장';
    background-color: #40b3c6;
}

.user[role=teacher]::before,
.buddy[role=teacher] .thumb .status::after,
.buddy[role=teacher] .info .status {
    content: '강사';
    background-color: #7c3db3;
}

.user[role=student]::before,
.profile[role=student] .thumb::before,
.buddy[role=student] .thumb .status::after,
.buddy[role=student] .info .status {
    content: '학생';
    background-color: #ff9104;
}

.user[role=free]::before,
.buddy[role=free] .thumb .status::after,
.buddy[role=free] .info .status {
    content: '대기';
    background-color: #636280;
}

.buddy_status {
    margin-top: 10px;
    font-size: 12px;
}

.buddy_status li {
    margin-right: 10px;
    padding: 3px 0px;
}

.buddy_status .status {
    display: inline-block;
    width: 12px;
    height: 12px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin-right: 3px;
    position: relative;
    top: 0.07em;
}

.buddy_status .status.free {
    background-color: #D8DCEE;
}

.buddy_status .status.student {
    background-color: #1caf9a;
}

.buddy_status .status.teacher {
    background-color: #d9534f;
}

.buddy_status .status.manager {
    background-color: #428bca;
}

.buddy_status .status.school {
    background-color: #f0ad4e;
}

.buddy_status .status.master {
    background-color: #333;
}

.buddy_status a {
    text-decoration: none;
}

.buddy>.thumb.free>.status {
    background-color: #D8DCEE;
}

.buddy>.thumb.student>.status {
    background-color: #1caf9a;
}

.buddy>.thumb.teacher>.status {
    background-color: #d9534f;
}

.buddy>.thumb.manager>.status {
    background-color: #428bca;
}

.buddy>.thumb.school>.status {
    background-color: #f2dede;
}

.buddy>.thumb.master>.status {
    background-color: #333;
}

.buddy>.info {
    overflow: hidden;
    padding-left: 10px;
    color: #727274;
    font-size: 11px;
}

.buddy>.minfo {
    display: grid;
    align-content: center;
    justify-content: center;
}

.buddy>.info>.prop {
    margin: 7px 0px 5px;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.buddy>.info>.prop>span {
    display: inline-block;
}

.buddy>.info>.prop>span.name {
    color: #000;
}

.buddy>.info>.btn-sms {}

.buddy.block>.checkbox,
.buddy.block>.option,
.block .buddy>.checkbox,
.block .buddy>.option {
    display: none !important;
}

.buddy>.option {
    position: absolute;
    top: 0px;
    right: 8px;
    display: none;
    font-size: 12px;
}

.buddy>.option i {
    width: 10px;
    text-align: center;
}

.buddy>.option>.dropdown-toggle {
    color: #777;
    background-color: transparent;
    padding: 3px 5px;
    text-shadow: none;
}

.buddy:hover>.option {
    display: inline-block;
}

.report .chart {
    height: 200px;
}

.report .report-head,
.printpanel .report .filter,
.printpanel .report .rhide,
.tab-pane.report .userinfobx,
.printpanel .report .mylevel {
    display: none;
}

.printpanel .report .report-head {
    display: block;
    position: relative;
}

.report .report-head .logo {
    position: absolute;
    bottom: 10px;
    right: 5px;
}

.report .report-head .title {
    margin: 0px;
    padding: 10px;
    color: #000;
    font-size: 40px;
    font-weight: 600;
    margin-top: 10px;
    border-bottom: 2px solid #334869;
    /*
  background-color: #25344d;
  color: #fff;
  border-radius: 5px;
  font-size: 20px;
  margin-bottom: 10px;
  position: relative;
  */
}

.report .report-head .title>.period {
    font-size: 17px;
    color: #333;
}

.report .report-head .infobx {
    position: relative;
    border-top: 2px solid #334869;
    background-color: #F9F9F9;
    padding: 5px;
    color: #333;
}

.report .report-head .publish {
    float: right;
}

.report .mylevel {
    background-color: #F9F9F9;
    padding: 0px 10px;
}

.report .mylevel>.title {
    font-size: 12px;
    padding: 3px;
    display: block;
}

.report .mylevel-status {
    padding: 5px 10px 10px;
    margin-top: 0px;
}

.report .mylevel-status .cur-level {
    width: 95px;
}

.report .mylevel-status .cur-level .info {
    text-align: center;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-color: #2fad92;
    width: 85px;
    height: 85px;
    padding: 25px 0px 0px;
    color: #fff;
}

.report .mylevel-status .cur-level .info h2 {
    margin: 0px;
    font-weight: 600;
    font-size: 20px;
}

.report .mylevel-status .cur-level .info span {
    font-size: 12px;
}

.report .mylevel-status .statusbar {
    font-size: 12px;
    position: relative;
    margin: 15px 30px 0px 95px;
}

.indicator {
    padding: 3px 5px;
    background-color: #4c9ed9;
    color: #fff;
    font-weight: 600;
    position: relative;
    top: -10px;
    left: -25px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.indicator:before {
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    /*should be set to 100% */
    left: 20px;
    width: 0;
    height: 0;
    border-color: #4c9ed9 transparent transparent transparent;
    border-style: solid;
    border-width: 5px;
}

.report .mylevel-status .statusbar .progress {
    background-color: #F0F0F0;
}

.report .mylevel-status .statusbar .progress .score {
    position: absolute;
    right: 3px;
    font-size: 11px;
    color: #777;
    line-height: 20px;
}

.report .mylevel-status .statusbar .progress .progress-bar {}

.report .mylevel-status .statusbar .desc {
    font-size: 11px;
    line-height: 27px;
}

.report .mylevel-status .next-level {
    position: absolute;
    top: 0px;
    right: -35px;
}

.report .mylevel-status .next-level span {
    display: inline-block;
    font-size: 15px;
    line-height: 53px;
    color: #333;
    font-weight: 600;
}

.report table .mark {
    background-color: transparent;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    color: #f01fd0;
}

.report .vtable th,
.report .vtable td {
    vertical-align: middle;
}

.report .table .score>.plus {
    color: #cb4636;
    margin-left: 3px;
}


/*******************  ******************/

.contentpanel .item-list {
    font-size: 12px;
    min-height: 300px;
}

.contentpanel .item-list .panel {
    position: relative;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #FFF;
    -webkit-user-select: none;
    height: 165px;
}

.contentpanel .item-list .panel .item .symbol .fa-unlink {
    position: absolute;
    top: 5px;
    left: 5px;
    display: none;
}

.contentpanel .item-list .panel.unlink .item .symbol .fa-unlink {
    display: inherit;
    color: #fff;
    font-size: 15px;
    line-height: 3.3em;
    width: 2.2em;
}

.contentpanel .item-list .panel .bg {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.contentpanel .item-list .panel.sel .bg {
    display: block;
}

.contentpanel .item-list .panel:hover {}

.contentpanel .item-list .cate {
    font-size: 15px;
    border-bottom: 1px solid #e3e6f3;
    margin: 0px 0px 10px;
    padding: 10px;
    position: relative;
    cursor: pointer;
}

.contentpanel .item-list .cate.down {
    color: #999;
}

.contentpanel .item-list .cate>span {}

.contentpanel .item-list .cate>i {
    position: absolute;
    right: 10px;
    font-size: 20px;
}

.contentpanel .item-list .cate.down>i:before {
    content: '\f106';
}

.contentpanel .list-filter>li {
    padding: 0px;
}

.contentpanel .list-filter>li .badge {}

.contentpanel .item-list .fa-check {
    display: none;
}

.contentpanel .item-list .fa-info-circle {
    position: absolute;
    top: 15px;
    right: 10px;
    color: #B0B0B0;
}

.contentpanel .item-list .sel {
    background-color: rgba(0, 0, 0, 0.05);
}

.contentpanel .item-list .sel .checkbox {
    display: inline-block;
}

.contentpanel .item-list .sel .symbol {}

.contentpanel .item-list .sel .fa-check {
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 5px;
    color: #4ECDB4;
    vertical-align: bottom;
}

.contentpanel .item-list .img-circle {
    width: 60px;
    margin: 0px 10px;
}

.contentpanel .item-list .symbol {
    width: 70px;
    text-align: center;
    line-height: 80px;
    position: relative;
    margin-right: 10px;
    background-color: #fbfbfb;
}

.contentpanel .item-list .tleft .symbol {
    text-align: left;
}

.contentpanel .item-list .share .symbol {
    background-color: #f8f5ff;
}

.libpanel .item-list .prop {}

.contentpanel .item-list .symbol>i.fa-folder {
    font-size: 45px !important;
}

.contentpanel .item-list .symbol>i.ico-type {
    display: inline-block;
    font-size: 40px;
    vertical-align: middle;
}

.sidepanel .cmds .btn-xs {
    font-size: 1em;
    padding: 3px 10px 1px;
    height: 2em;
    color: #999;
    vertical-align: top;
}

.contentpanel .item-list .symbol>i.ico-share {
    position: absolute;
    bottom: 17px;
    right: 22px;
    color: #d9534f;
}

.contentpanel .item-list .symbol>i.ico-share.mine {
    color: #428bca;
}

.contentpanel nav {
    text-align: center;
}

.modal-body .item-list .item {
    text-align: center;
    cursor: pointer;
    padding: 5px;
    position: relative;
}

.modal-body .item-list .item>i {
    display: none;
}

.modal-body .item-list .item.sel:not(tr)>i {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #ef450d;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    font-size: 30px;
    display: block;
    transform: translate(-50%, -50%);
}

.modal-body .item-list .item .wrapitem {
    height: 100px;
    padding: 5px;
    position: relative;
}

.modal-body .item-list .item .wrapitem:hover {
    background-color: #f5f5f5;
}

.modal-body .item-list .item.sel .wrapitem {
    background-color: #f5f5f5;
}

.modal-body .item-list .item .wrapitem .src {
    position: relative;
    height: 90px;
}

.modal-body .item-list .item .wrapitem i.ico-type {
    line-height: 70px;
}

.item-list .fa-archive {
    color: #1582dc;
}

.item-list .fa-file-text {
    color: #6C7A89;
}

.item-list .wrapitem .fa-file-text {
    font-size: 4em;
}

.item-list .question .item .fa-list-alt {
    color: #5cb85c;
}

.item-list .theory .fa-list-alt {
    color: #f0ad4e;
}

.item-list .item .title {
    margin: 0px;
    font-size: 11px;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-list .item div.title {
    position: absolute;
    width: 100%;
    bottom: 0px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
}

.item-list .item p.desc {
    margin: 0px;
    color: #22A7F0;
    font-size: 11px;
}

.contentpanel .item-list .symbol .fa-file-text-o {}

.contentpanel .item-list h4 {
    font-size: 12px;
    margin: 5px 0;
}

.contentpanel .item-list h4>span {
    font-size: 12px;
    margin-left: 5px;
}

.contentpanel .item-list .info {
    margin-top: 3px;
}

.contentpanel .item-list .info>a {
    margin-right: 5px;
}

.contentpanel .item-list .info>a:hover,
.item-list .info>a:focus {
    text-decoration: none;
}

.contentpanel .item-list .score {
    margin-right: 10px;
    text-align: center;
    padding-top: 25px;
}

.contentpanel .item-list .score>span {
    display: inline-block;
    font-size: 30px;
    font-weight: bold;
    color: #E74C3C;
}

.contentpanel .item-list .btns {
    padding: 5px 10px;
}

.contentpanel .item-list .btns>a {
    cursor: pointer;
    color: #AAA;
}

.chatpanel .form-box {
    margin: 10px;
    padding: 20px;
    background-color: #EFEFEF;
}

.chatpanel .form-box .form-control:focus {
    background-color: #FFF;
}

.chat {
    padding: 10px;
}

.chat:after {
    clear: both;
    display: block;
    content: '';
}

.chat .user-pic {
    display: block;
    width: 48px;
    padding-top: 5px;
}

.chat .user-pic img {
    width: 100%;
}

.chat .panel {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-bottom: 5px;
}

.chat .message:before {
    content: "";
    position: absolute;
    top: 20px;
}

.chat .panel-body {
    display: table;
    width: 100%;
}

.chat-box .panel {
    background-color: #ecf0f1;
}

.chat-box .message {
    margin-left: 65px;
    position: relative;
}

.chat-box .message:before {
    left: 0;
    border-right: 6px solid #ecf0f1;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    margin-left: -6px;
}

.chat-box .chat-time {
    display: block;
    text-align: right;
}

.chat-box-right .message {
    position: relative;
    margin-left: 0;
    margin-right: 65px;
}

.chat-box-right .message .panel {
    background-color: #7f8c8d;
    color: #fff;
}

.chat-box-right .message .chat-time {
    text-align: left;
}

.chat-box-right .message:before {
    left: 100%;
    margin-right: 6px;
    margin-left: 0;
    border-right: 6px solid transparent;
    border-left: 6px solid #7f8c8d;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.chat-box p {
    margin: 0;
}

.clipbrd .clip {
    color: #8a6d3b;
    border: 1px solid #faebcc;
    background-color: #fcf8e3;
    line-height: 25px;
    padding: 0 5px;
    margin-bottom: 5px;
    font-size: 12px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.clipbrd .clip button.close {
    position: relative;
    top: 5px;
    right: 0px;
    font-size: 13px;
}

.clipbrd .ul-list>li {
    width: 50%;
}

.row-target {
    margin-top: 5px;
}

.bxPerms .btn-del {
    cursor: pointer;
}

.ui-autocomplete {
    background-color: #FFF;
    border: 1px solid #EEE;
}

.ui-autocomplete>li.ui-menu-item {}

.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active {
    background-color: #F0F0F0;
    margin: 0px;
}

.item.clear {
    width: auto;
    display: block;
    padding: 5px;
}

.buddies .item {
    cursor: pointer;
}

.buddies .item.clear:hover,
.buddies .item.sel {
    background-color: #eee;
}

.item.clear .thumb {
    width: 40px;
    height: 40px;
    float: left;
    position: relative;
    text-align: center;
}

.item.group .thumb i {
    color: #777;
    line-height: 40px;
}

.item.lecture .thumb img {
    width: 100%;
    height: 100%;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.item.user .thumb img {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 40px;
}

.item.clear .info {
    margin-left: 45px;
    font-size: 12px;
    position: relative;
}

.item.clear .info>.name {
    margin: 5px 0px;
    font-size: 13px;
}

.suggestions {
    background-color: #FFF;
    border: 1px solid #EEE;
}

.suggestions .item {
    padding: 5px;
    margin: 3px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: auto !important;
    font-size: 12px;
    position: relative;
    cursor: pointer;
    color: #333;
}

.suggestions .item span {
    display: inline-block;
    min-width: 100px;
}

.bxCSPanel .suggestions .item span {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suggestions .current {
    background-color: #EFEFEF;
}

.suggestions .item .btn-expand {
    cursor: pointer;
    position: absolute;
    top: 0px;
    right: 0px;
    line-height: 2.5em;
    display: none;
}

.suggestions .item.folder {
    padding-right: 10px;
}

.suggestions .item.folder .btn-expand {
    display: block;
}

.suggestions .item.book .thumb {
    float: left;
    width: 40px;
}

.suggestions .item.user .pic {
    float: left;
    width: 40px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.suggestions .item.book .info,
.suggestions .item.user .info {
    margin-left: 45px;
}

.suggestions .item.book .info>div,
.suggestions .item.user .info>div {
    line-height: 20px;
}

.suggestions .item.book .info>.name,
.suggestions .item.user .info>.name {
    font-weight: 600;
    color: #333;
    margin: 0px;
}

.suggestions .item.user .info>.tag {
    display: block;
}

.suggestions .item.book .info>.desc,
.suggestions .item.user .info>.desc {
    font-size: 11px;
    color: #777;
}

.modal-body form .form-group {
    margin-bottom: 5px;
    margin-left: 0px;
    margin-right: 0px;
}

.modal-body form .none {
    display: none;
}

.modal-body input[type="checkbox"],
.modal-body input[type="radio"] {
    position: static;
}

.bxbtn {
    padding: 15px;
    text-align: center;
    background-color: #EFEFEF;
    cursor: pointer;
    font-size: 12px;
}

select.input-sm {
    height: auto;
    padding: 9px 10px;
    line-height: initial;
}

select.selinline {
    display: block !important;
    width: 100% !important;
    margin-bottom: 10px;
}

.modal-body form .control-inline input {
    display: inline-block;
}

.input-group-btn .btn {}

body .input-group.qty input {
    text-align: center;
}

.input-group-btn .btn-sm {
    line-height: 2;
}

.modal .src-wrap {
    margin-top: 5px;
    background-color: #EFEFEF;
    padding: 5px;
}

.modal .src-wrap:after {
    clear: both;
    display: block;
    content: '';
}

.modal .src-wrap i.fa-chevron-right {
    margin: 0 5px;
}

.modal .condlist {
    margin-top: 10px;
    border-top: solid 1px #EEE;
    padding-top: 10px;
}

.modal .condlist .label {
    font-size: 13px;
    cursor: pointer;
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 0px;
    display: inline-block;
}

.modal .condlist .title {
    display: inline-block;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.modal .condlist .badge {
    background-color: #FFF;
    color: #da3e16;
}

.modal .badge {
    margin-left: 3px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.label.user {
    cursor: pointer;
    display: inline-block;
}

.label [data-role="remove"] {
    margin-left: 5px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1px;
    /*vertical-align: middle;*/
}

.label [data-role="remove"]::after {
    content: "x";
    padding: 2px;
}

.label [data-role="remove"]:hover {
    color: #EEE;
}

.modal-footer .total-cnt {
    line-height: 43px;
    font-size: 20px;
}

.modal-footer .total-cnt>span {
    color: #000;
}

.modal-footer .total-cnt .cnt {
    font-weight: bold;
    padding: 0px 5px;
}

#popup-search .nav>li>a {
    padding: 5px 40px;
}

#popup-search form .history {
    display: none;
}

#popup-search .mod-explore .modal-footer .ul-cmds,
#popup-search .modal-footer>.btn-add {
    display: none;
}

#popup-search .mod-explore .modal-footer>.btn-add {
    display: inline-block;
}

#popup-search .btn-sm {
    padding: 6.2px 10px !important
}

#popup-library .modal-body {
    height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

.modal-body .cmd-zone {
    padding: 5px;
    background-color: #F7F7F7;
    margin-bottom: 5px;
}

.modal-body .cmd-zone>div {}

.modal-body .cmd-zone .title {
    line-height: 35px;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-body .cmd-zone .title a {
    text-decoration: none;
}

#popup-library .cmd-zone>div:first-child {}

.modal-body .cmd-zone>div:first-child>span {
    height: 37px;
    display: table-cell;
    vertical-align: middle;
}

.modal-body .cmd-zone>div .btn {
    padding-top: 7px;
}

.modal-body .cmd-zone>div:nth-child(2) {
    text-align: right;
}

.modal-body .cmd-zone>div .btn-group {
    margin-bottom: 0px;
}

.modal-body .cmd-zone .btn-grey {
    background-color: #FFF;
    border: 1px solid #CCC;
    color: #666;
}

.modal-body .cmd-zone .btn-grey:hover,
.modal-body .cmd-zone .btn-grey.active,
.modal-body .cmd-zone .open .dropdown-toggle.btn-grey {
    background-color: #D2D7D3;
    color: #FFF;
}

.modal-body table.item-list {
    font-size: 14px;
}

.modal-body .item-list>li {
    width: 110px;
    min-height: 120px;
    text-align: center;
}

.modal-body .item-list>li>i {
    cursor: pointer;
    padding: 5px 10px;
}

.modal-body .item-list>li>i:hover {
    background-color: #F0F0F0;
}

.modal-body .item-list>li.sel>i {
    background-color: #EFEFEF;
}

.item-list .item .ion-ios-folder,
.item-list .item .fa-folder {
    color: #22a7f0;
}

.modal-body .item-list>li>h4.title {
    margin: 0px;
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-body .item-list>li>p.desc {
    margin: 0px;
    color: #22A7F0;
    font-size: 11px;
}

.modal-body table.item-list td {
    vertical-align: bottom;
    font-size: 12px;
}

.modal-body table.item-list td .udate {
    font-size: 12px;
}

.modal-body table.item-list tbody tr {
    cursor: pointer;
}

.modal-body table.item-list tbody tr.sel td {
    background-color: #1D2939 !important;
    color: #FFF;
}

#popup-tpl .list-filter {
    margin: 0px 5px 5px 5px;
}

.list-filter>li {
    padding: 0px 5px;
    margin: 5px;
    cursor: pointer;
    display: inline-block;
    border-bottom: 3px solid #fff;
}

.list-filter>li.active {
    font-weight: bold;
    border-bottom: 3px solid #e74c3c;
}

.list-filter>li .badge {
    margin-left: 3px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#popup-tpl .items {
    padding: 5px;
}

#popup-tpl .items>.item {
    min-height: 185px;
    padding: 5px 0px;
    position: relative;
}

#popup-tpl .items>.item .cover {
    width: 120px;
    height: 175px;
    background-color: #F0F0F0;
    position: absolute;
    cursor: pointer;
}

#popup-tpl .items .item .info {
    padding-left: 125px;
}

#popup-tpl .items .item .info {
    line-height: 18px;
    font-size: 12px;
    padding-right: 5px;
}

#popup-tpl .items .item .info .title {
    font-weight: bold;
}

#popup-tpl .items .item .info .desc {
    border-top: 1px solid #EEE;
    margin-top: 5px;
    padding-top: 5px;
}

.modal #tpl-view {
    padding: 5px 60px;
    min-height: 300px;
}

.modal #tpl-view .item {
    font-size: 12px;
}

.modal #tpl-view .cover {
    background-size: auto 90%;
    width: 100%;
    height: 300px;
    background-position: center center;
    background-color: #f5f5f5;
    background-repeat: no-repeat;
    text-align: center;
    padding: 10px 0px;
}

.modal #tpl-view .cover>img {
    height: 100%;
}

.modal #tpl-view .cover>span {
    display: inline-block;
    padding-top: 140px;
    color: #777;
}

.modal #tpl-view .item .title {
    font-weight: bold;
}

.modal #tpl-view .item .desc {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #EEE;
}

.modal #tpl-view .item .info>.thumb {
    height: 70px;
    margin: 10px 0px;
}

.modal #tpl-view .item .info>.thumb>img {
    display: inline-block;
    height: 100%;
    border: 1px solid #eee;
    padding: 2px;
    cursor: pointer;
}

.modal #tpl-view .item .info>.thumb>img:hover,
.modal #tpl-view .item .info>.thumb>img.active {
    border: 1px solid #f3ac90;
}

.modal #tpl-view .carousel-control {
    background-image: none;
    width: 8%;
    color: #CCC;
}

.sidepanel {
    padding: 5px;
    text-align: left;
}

.sidepanel .panel-header {
    padding: 0 5px;
    border-bottom: 1px solid #4a535e;
}

.sidepanel .panel-header h4 {
    margin-top: 5px;
    margin-bottom: 5px;
}

.sidepanel .panel-header h4.back {
    cursor: pointer;
}

.sidepanel .slide {
    position: absolute;
    background-color: #1d2939;
    top: 5px;
    height: 100%;
}

.sidepanel .panel-header p {
    color: #8899a6;
}

.sidepanel .panel-body {
    padding: 10px 0px 10px;
}

.sidepanel > .player .panel-body {
    padding: 0px;
}

.sidepanel .form-setting {
    padding-top: 10px;
}

.sidepanel .panel-footer {
    border-top: 1px solid #4a535e;
    text-align: center;
    padding: 10px;
    background-color: transparent;
}

.form-group p.desc {
    margin: 0px;
    padding-top: 5px;
    font-size: 12px;
    line-height: 17px;
    color: #22A7F0;
}

#popup-assign .modal-body {
    padding: 5px;
    min-height: 370px;
}

#popup-assign .box-tabs {}

#popup-assign .box-tabs:after {
    clear: both;
    display: block;
    content: '';
}

#popup-assign .nav-tabs {
    float: left;
    border: none;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

#popup-assign .nav-tabs>li {
    float: none;
    margin: 0px;
}

#popup-assign .nav-tabs>li>a {
    margin: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border: none;
}

#popup-assign .nav-tabs>li.active>a {}

#popup-assign .tab-content {
    overflow: hidden;
    border: none;
}

#popup-assign .tab-content {
    text-align: left;
}

#popup-assign .tab-content .form-group .btn-sm {
    padding: 4px 10px 5px;
}

#popup-assign .col-to {
    position: relative;
}

#popup-assign .col-to .fa-minus {
    position: absolute;
    top: 10px;
    left: -6px;
    color: #ccc;
}

#popup-assign .targetlist {
    margin: 10px 0px 20px;
}

#popup-publish .targetlist>label,
#popup-assign .targetlist>label {
    margin-right: 5px;
}

#popup-assign p.desc {
    margin-top: 7px;
    margin-bottom: 0px;
    padding: 0px 5px;
    color: #22A7F0;
    font-size: 12px;
}

#popup-assign p.desc>b {
    color: #d9534f;
}

.sidepanel .btn-sm {
    padding: 6px 10px;
}

.sidepanel .cmds .btn-xs {
    font-size: 1em;
    padding: 3px 10px 1px;
    height: 2em;
    color: #999;
    vertical-align: top;
}

.sidepanel .cmds .btn-xs.active {
    color: #333;
}

.sidepanel .form-group label.radio-inline {
    color: #fff;
}

.sidepanel input[type="checkbox"],
.sidepanel input[type="radio"] {
    position: initial;
}

.sidepanel .checkbox label {
    color: #8f939e;
    font-size: 13px;
}

#popup-print .property {
    margin-bottom: 15px;
}

#popup-print .subtitle>span {
    font-size: 12px;
    font-weight: normal;
}

#popup-print .list-jobs {}

#popup-print .list-jobs .row>div {
    padding: 8px;
}

#popup-print .list-jobs .ibtn {
    cursor: pointer;
}

#popup-print .list-jobs .row .progress {
    background-color: #efefef;
}

#popup-print .edate::before {
    content: '';
    position: absolute;
    top: 17px;
    left: -12px;
    width: 5px;
    height: 2px;
    background-color: #999;
}

.modal-footer .price {
    vertical-align: middle;
    margin-right: 10px;
    font-size: 17px;
}

.modal-footer .price>b {
    padding: 0px 5px;
    color: #c82929;
}

#popup-wizard .modal-body {
    padding: 0px;
}

#popup-wizard .modal-footer {
    text-align: initial;
}

#popup-wizard .nav-tabs {
    border: none;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

#popup-wizard .nav-tabs>li {
    margin: 0px;
}

#popup-wizard .nav-tabs>li>a {
    margin: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border: none;
}

#popup-wizard .nav-tabs>li.active>a {}

#popup-wizard .tab-content {
    overflow: hidden;
    border: none;
}

#popup-wizard .tab-content {
    text-align: left;
}

#popup-wizard .lstSect {}

#popup-wizard .lstSect>div {
    margin-bottom: 10px;
}

#popup-wizard .ddlSect {
    width: 86%;
}

#popup-wizard .confirm {
    background-color: #F7F7F7;
    padding: 10px;
    margin-bottom: 15px;
}

#popup-wizard .subTbl>div {
    margin-bottom: 10px;
}

.modal .targetlist {
    margin: 10px 0;
}

.modal .modal-footer .targetlist {
    margin-bottom: 0px;
}

.modal .targetlist>label {
    display: inline-block;
    line-height: 1.5;
}

#popup-wizard .tab-content .form-group .btn-sm {
    padding: 6.5px 10px;
}

#popup-wizard .ui-slider-horizontal {
    margin: 20px 25px 10px;
}

#popup-wizard .ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 3.5em;
    height: 2em;
    cursor: default;
    margin: 0 -25px auto !important;
    text-align: center;
    line-height: 28px;
    color: #FFFFFF;
    font-size: 15px;
}

#popup-wizard .ui-slider .ui-slider-handle .glyphicon {
    color: #FFFFFF;
    margin: 0 3px;
    font-size: 13px;
    opacity: 0.5;
}

#popup-wizard .ui-corner-all {
    border-radius: 15px;
}

#popup-wizard .ui-slider-horizontal .ui-slider-handle {
    top: -.8em;
}

#popup-wizard .ui-state-default,
#popup-wizard .ui-widget-content .ui-state-default {
    border: none;
}

#popup-wizard .ui-slider-horizontal .ui-slider-handle {
    margin-left: -0.5em;
}

#popup-wizard .ui-slider .ui-slider-handle {
    cursor: pointer;
}

#popup-wizard .ui-slider a,
#popup-wizard .ui-slider a:focus {
    cursor: pointer;
    outline: none;
}

#popup-wizard .ui-slider a>label {
    color: #FFF;
    font-weight: bold;
}


/*
.popup-resrc .modal-dialog {
  width: 800px;
}

.popup-resrc .modal-body {
  padding-right: 20px;
  min-height: 460px;
  overflow-y: auto;
}

#popup-equestion .modal-dialog {
  width: 400px;
}
*/

#popup-equestion .modal-body {
    min-height: 250px;
}

.popup-resrc .panelc2 {
    position: relative;
    height: 100%;
}

.popup-resrc .panelc2 h5.subtitle {
    margin-top: 0px;
}

.popup-resrc .panelc2>.preview {
    position: absolute;
    width: 400px;
    height: 100%;
    border: 1px solid #eee;
}

.panelc2>.preview>.wrapImgs {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.panelc2>.preview .srcImg {
    margin: 5px;
    padding-bottom: 5px;
}

.panelc2>.preview .srcImg:not(:last-child) {
    border-bottom: 1px dotted #A9A9A9;
}

.popup-resrc .panelc2>.property {
    margin-left: 410px;
}

.uploadbox #queue {
    border: 1px solid #E5E5E5;
    background-color: #F0F0F0;
    height: 80px;
    overflow: auto;
    margin-bottom: 10px;
    padding: 0 3px 3px;
    width: 100%;
}

.uploadbox .uploadifive-button {
    border: none;
    border-radius: 0px;
    cursor: pointer;
}

.uploadbox .drop {
    line-height: 20px;
    border: 1px dashed #ccc;
    text-align: center;
    padding: 20px 0;
    margin-bottom: 10px;
    cursor: pointer;
    color: #aaa;
    font-size: 12px;
}

.sidepanel .uploadbox .drop {
    background-color: rgba(255, 255, 255, 0.1);
    color: #eee;
    border: none;
}

.sidepanel .uploadbox .drop:hover {
    border: none;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2);
}

.uploadbox .drop:hover {
    border: 1px dashed #aaa;
    color: #333;
    background-color: rgba(0, 0, 0, 0.02);
}

.uploadbox .drop>p {
    margin: 0px;
}

.modal .uploadbox .files {}

.uploadbox .files>.file {
    position: relative;
    margin-bottom: 5px;
}

.uploadbox .files .file .thumb {
    float: left;
    width: 100px;
    height: 50px;
    cursor: pointer;
    text-align: center;
    margin-right: 5px;
}

.uploadbox .files .file .thumb>i {
    line-height: 50px;
    color: #8293a1;
}

.uploadbox .files .file>h5 {
    margin: 6px 0;
    font-size: 12px;
}

.uploadbox .files .file>.size {
    font-size: 11px;
}

.uploadbox .files .file>.date {
    margin: 0px;
    font-size: 11px;
}

.uploadbox .files .file>.progress {
    height: 15px;
    margin-right: 20px;
    background-color: #f5f5f5;
}

.uploadbox .files .file>.progress .progress-bar {
    font-size: 9px;
    line-height: 17px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 1);
}

.uploadbox .files>.file .btn-remove {
    position: absolute;
    top: 5px;
    right: 5px;
}

.uploadbox .files .item {
    background-color: #fff;
    border: 1px solid #eee;
}

.uploadbox .files .item .name {
    display: initial;
}

.uploadbox .files .item>.progress {
    height: 2px;
    margin-top: 5px;
    background-color: #ccc;
}

.popup-resrc .nav-tabs {
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

.popup-resrc .nav-tabs>li {}

.popup-resrc .nav-tabs>li>a {
    margin: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border: none;
}

.popup-resrc .nav-tabs>li.active>a {}

.popup-resrc .tab-content {
    overflow: hidden;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

.popup-resrc .tab-content .form-group .btn-sm {
    padding: 6px 10px;
}

.lnkResrcs {}

.lnkResrcs>label.label {
    display: inline-block;
    margin-top: 10px;
    margin-right: 5px;
}

.lstItems {
    margin: 0px;
    padding: 0px;
}

.lstItems>.item {
    background-color: #f1f6ff;
    border: 1px solid #93b7f6;
    line-height: 20px;
    font-size: 13px;
    font-weight: 300;
    overflow: hidden;
    position: relative;
    padding: 5px 25px 5px 8px;
    margin: 5px 0;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lstItems.iblock>.item {
    display: inline-block;
    border-radius: 15px;
    padding: 3px 25px 3px 10px;
    margin-right: 5px;
}

.lstItems>.item .name {
    display: inline-block;
}

.row .item>span[data-role="del"] {
    position: absolute;
    right: 0px;
    font-size: 30px;
    top: -7px;
    z-index: 2;
    display: none;
    cursor: pointer;
}

.row .item:hover>span[data-role="del"] {
    display: inline-block;
}

.lstItems>.item>span[data-role="remove"],
.lstItems>.item>a.btn-remove,
.lstItems>.item>a.btn-remove-target,
.lstItems>.item>a.btnDel {
    position: absolute;
    right: 5px;
    padding: 2px 5px;
    line-height: 15px;
    text-align: center;
    text-decoration: none;
    color: #657695;
}

.lstItems.users>label.item {
    color: #333;
    display: inline-block;
}

.modal .lstItems .label [data-role="remove"]:hover {
    color: #000;
}

.input-group .form-control {
    z-index: 0;
}

.slide-modal {
    position: absolute;
    width: 100%;
    top: 0px;
    z-index: 3;
}

.lstIdx {
    padding: 5px;
    border: 1px solid #EEE;
    height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
}

.lstTpl {
    background-color: #f5f5f5;
    padding: 5px;
}

.bxTpl .lstTpl {
    height: 120px;
    overflow-y: auto;
}

.lstTpl>.item {
    background-color: #FFF;
    width: 80px;
    height: 100px;
    border: 1px solid #DDD;
    margin: 5px 3px;
    cursor: pointer;
}

.lstTpl>.item:hover {
    background-color: #f9f9f9;
}

.lstTpl>.item.chk,
.lstTpl>.item.sel {
    border: 3px solid #DE7777;
}

.lstTpl>.item img {
    width: 100%;
    height: 100%;
}

.bxTplPreview {
    /*background-color: #f4f0ed;*/
    min-height: 400px;
    margin-top: 5px;
}


/******************* lecture  ******************/

.bgLecHeader {
    background-color: #707d91;
    background-size: cover;
    background-position: center center;
    height: 200px;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}

.bgLecHeader>div {
    height: 100%;
    background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, .3) 0%, rgba(100, 100, 100, 0) 100%);
    background: -o-linear-gradient(0deg, rgba(0, 0, 0, .3) 0%, rgba(100, 100, 100, 0) 100%);
    background: -moz-linear-gradient(0deg, rgba(0, 0, 0, .3) 0%, rgba(100, 100, 100, 0) 100%);
    background: linear-gradient(0deg, rgba(0, 0, 0, .3) 0%, rgba(100, 100, 100, 0) 100%);
}

.lecPanel {
    max-width: 1000px;
    min-height: 1000px;
    margin: 0 auto;
    position: relative;
}

.lecHeader {
    height: 200px;
    position: relative;
}

.lecHeader .logo {
    width: 150px;
    height: 150px;
    margin: 0px;
    background-color: #FFF;
    position: absolute;
    left: 10px;
    bottom: -30px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 3px solid #FFF;
}

.edit .lecHeader .logo {
    cursor: pointer;
}

.lecHeader h2.title {
    color: #FFF;
    font-weight: 700;
    position: absolute;
    padding-left: 180px;
    left: 0px;
    bottom: 5px;
    width: 100%;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.lecHeader h2.title a.btnJoin {
    background-color: #ffb01a;
    border-radius: 30px;
    padding: 7px 15px 5px;
    font-family: "Nexon";
    color: #fff;
    font-size: 13px;
    text-shadow: none;
    margin-bottom: 5px;
    display: none;
    position: absolute;
    right: 0px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    text-align: center;
    padding-top: 20px;
}

.lecHeader h2.title a.btnJoin>i {
    font-size: 20px;
    margin-bottom: 5px;
}

.lecHeader h2.title a.btnJoin>span {
    display: block;
}

.classroomview .lecturepanel.online .lecHeader h2.title a.btnJoin {
    display: inline-block;
}

.lecHeader h2.title span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
}

.lecHeader h2.title span.expire {
    font-size: 13px;
    font-family: "Nexon";
    font-weight: normal;
    margin-top: 5px;
}

.lecHeader .setting {
    color: #4e5665;
    font-size: 11px;
    padding: 2px 5px;
    font-weight: 500;
    position: absolute;
    right: 5px;
    line-height: 1px;
    bottom: 20px;
    background-color: #f6f7f8;
    text-shadow: 0 1px 0 #fff;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

.mnuLec {
    display: table;
    margin: 10px auto;
}

.mnuLec>li.cmd {
    position: absolute;
    right: 0px;
    padding: 10px;
}

.mnuLec>li.cmd>a {
    text-decoration: none;
    cursor: pointer;
}

.mnuLec>li.mnu:hover {
    -moz-box-shadow: 0 3px 0 #AAA;
    -webkit-box-shadow: 0 3px 0 #AAA;
    box-shadow: 0 3px 0 #AAA;
    background-color: #F8F8F8;
}

.mnuLec>li.mnu.active {
    -moz-box-shadow: 0 3px 0 #428bca;
    -webkit-box-shadow: 0 3px 0 #428bca;
    box-shadow: 0 3px 0 #428bca;
}

.mnuLec>li.mnu>a {
    text-decoration: none;
    display: inline-block;
    text-align: center;
    padding: 10px 40px;
    color: #555;
}

.bxLecUsrs {
    background-color: #f9f9f9;
    border: solid 1px #ddd;
    padding: 10px;
    margin-bottom: 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    min-height: 93px;
    position: relative;
}

.bxLecUsrs h5 {
    margin: 0px;
    font-size: 12px;
}

.bxLecUsrs h5 span.cnt {
    font-weight: bold;
}

.bxLecUsrs h5 span.close {
    font-size: 12px;
    line-height: 1px;
}

.bxLecUsrs .lstUsrs {
    margin-top: 7px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.bxLecUsrs .lstUsrs>li {
    margin-right: 10px;
    position: relative;
    width: 72px;
    height: 68px;
    padding: 0px;
    display: inline-block;
    float: none;
    overflow: hidden;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    cursor: pointer;
}

.bxLecUsrs .lstUsrs>li.expire {
    opacity: .3;
}

.bxLecUsrs .lstUsrs>li>div.new {
    border: 1px dashed #ccc;
    height: 100%;
    line-height: 60px;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
}

.bxLecUsrs .lstUsrs>li>div.new:hover {
    background-color: #efefef;
    color: #000;
}

.bxLecUsrs .lstUsrs>li>a {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) -o-linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) -moz-linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
}

.bxLecUsrs .lstUsrs>li>img {
    display: inline-block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.bxLecUsrs .lstUsrs>li>label,
.bxLecUsrs .lstUsrs>li>.name {
    color: #FFF;
    font-weight: bold;
    text-align: center;
    position: absolute;
    width: 100%;
    font-size: 11px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    left: 0px;
    bottom: 1px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: rgba(0, 0, 0, 0.2);
}

.classroomview .users>.user.teacher::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #ff4851;
    border-radius: 50%;
    width: 10px;
    height: 10px;
}

.classroomview .lessonusers .users>.user.teacher::after {
    top: 5px;
    right: 14px;
}

.bxLecUsrs .lstUsrs>li>video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lecturepanel .users .user span[data-role="del"],
.bxLecUsrs .lstUsrs>li>span[data-role="del"] {
    position: absolute;
    top: 2px;
    right: 3px;
    color: #EFEFEF;
    font-size: 20px;
    text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.9);
    cursor: pointer;
    display: none;
    z-index: 2;
}

.lecturepanel .users .user span[data-role="del"] {
    font-size: 20px;
}

.lecturepanel .lessonusers .user span[data-role="del"] {
    font-size: 20px;
}

.lesson-panel.edit .users .user:hover span[data-role="del"],
.bxLecUsrs.edit .lstUsrs>li:hover>span[data-role="del"] {
    display: inline-block;
}

.whiteboardview .bxLecUsrs .users {
    margin: 0px;
}

.whiteboardview .bxLecUsrs .client,
.whiteboardview .bxLecUsrs .user {
    background: url(/common/images/profile_tm.png) no-repeat center center/cover;
}

.whiteboardview .bxLecUsrs .client.active::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: #ff4851;
    border-radius: 50%;
    width: 10px;
    height: 10px;
}

.whiteboardview.screenon .wrapwboard {
    display: none;
}

.whiteboardview.screenon .wscreen {
    display: block;
}

.whiteboardview .wscreen {
    display: none;
    width: 100%;
    height: calc(100vh - 195px);
    position: relative;
    border: 1px solid #ddd;
}

.whiteboardview .wscreen>video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.whiteboardview .wrapwboard {
    border: 1px solid #ddd;
    border-radius: 5px;
}

.whiteboardview .wboard {
    height: calc(100vh - 195px);
    position: relative;
    overflow: hidden;
}

.whiteboardview.active .wboard,
.whiteboardview .edit .wboard {
    height: calc(100vh - 265px);
}

.whiteboardview .toolbar {
    z-index: 1;
    background-color: #F9F9F9;
    padding: 10px;
    display: none;
    white-space: nowrap;
    overflow: auto;
}

.whiteboardview .toolbar .btn-group {
    margin-bottom: 0px;
    position: initial;
}

.whiteboardview .toolbar li:not(.handle) {
    z-index: 1;
}

.whiteboardview .toolbar li.split {
    margin-left: 10px;
}

.whiteboardview .toolbar li.handle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.whiteboardview .btn-group ul.dropdown-menu {
    min-width: auto;
    padding: 5px;
    border-radius: 5px;
}

.whiteboardview .btn-group .dropdown-menu:after {
    border-bottom: 6px solid #1d2939;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    content: "";
    display: inline-block;
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
}

.whiteboardview .toolbar li.expand {
    z-index: 3;
}

.whiteboardview .toolbar .btn-slider {
    width: 190px;
    cursor: default;
    position: relative;
}

.whiteboardview .toolbar .btn-slider>img {
    position: absolute;
    left: 11px;
    top: -10px;
    height: 14px;
    width: 130px;
}

.whiteboardview .toolbar .btn-slider>input[type=range] {
    position: absolute;
    left: 9px;
    width: 130px;
    top: -8px;
    -webkit-appearance: none;
    height: 10px;
    border-radius: 3px;
    background: transparent;
    outline: none;
    opacity: 1;
    -webkit-transition: opacity 0.15s ease-in-out;
    transition: opacity 0.15s ease-in-out;
}

.whiteboardview .toolbar .btn-slider #whiteboardColorpicker {
    width: 26px;
    height: 23px;
    border-radius: 5px;
    background-color: #000;
    border: none;
    color: #000;
    cursor: pointer;
}

.whiteboardview .toolbar .btn-slider .clr-field button {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.whiteboardview .toolbar .btn-slider .colorpickerbx {
    position: absolute;
    top: -14px;
    right: 10px;
}

.whiteboardview .toolbar .picker_wrapper {
    left: initial;
    top: 30px;
    right: -50px;
    margin: 0;
}

.whiteboardview .toolbar .picker_wrapper>.picker_arrow {
    display: none;
}

.whiteboardview .wrapwboard .wrapcontainer .imgbar {
    height: 100px;
    padding: 5px;
    white-space: nowrap;
    overflow: auto;
    background-color: #aaa;
    position: relative;
}

.whiteboardview .wrapwboard .wrapcontainer .imgbar>span[data-role="remove"] {
    position: absolute;
    top: 5px;
    right: 3px;
    font-size: 22px;
    z-index: 1;
    cursor: pointer;
    color: #fff;
    text-shadow: 1px 1px 3px #333;
    opacity: .7;
}

.whiteboardview .wrapwboard .wrapcontainer .imgbar>span[data-role="remove"]:hover {
    opacity: 1;
    color: #ee6129;
    text-shadow: 1px 1px 3px #ddd;
}

.whiteboardview .wrapwboard .wrapcontainer .imgbar>img {
    margin-right: 5px;
    height: 100%;
    border: 2px solid transparent;
    cursor: pointer;
}

.whiteboardview .wrapwboard .wrapcontainer .imgbar>img:hover {
    border-color: #fd3608;
}

.whiteboardview .wrapwboard .wrapcontainer .imgbar>img.active {
    border-color: #fd3608;
}

.whiteboardview .wboard .zoombar {
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1;
}

.whiteboardview .wboard .zoombar>li:not(:first-child) {
    margin-top: 5px;
}

.whiteboardview .headerbar .btn-screen {
    display: none;
}

.whiteboardview .edit .headerbar .btn-screen,
.whiteboardview.active .headerbar .btn-screen {
    display: inline-block;
}

.whiteboardview.active .toolbar,
.whiteboardview .edit .toolbar {
    display: block;
}

.whiteboardview .toolbar .btn {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border: 1px solid #ccc;
    border-radius: 50%;
    color: #aaa;
    background-color: #fff;
    text-align: center;
    padding: 0px;
    font-size: 2em;
}

.whiteboardview .toolbar .btn.active {
    color: #333;
}

.whiteboardview .toolbar .btn:hover {
    color: #333;
}

.lecContent {}

.lecContent:after {
    clear: both;
    display: block;
    content: '';
}

.lecContent .panelL {
    float: left;
    width: 220px;
}

.lecContent .panelR {
    padding-left: 20px;
    overflow: hidden;
}

.lecContent .intro .overview {
    padding: 5px;
}

.lecContent .intro .overview .videobx {
    height: 150px;
    border: 1px dashed #ddd;
    position: relative;
}

.lecturepanel.edit .intro .overview .videobx .new {
    display: none;
}

.lecturepanel.edit .intro .overview .videobx .new {
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: block;
}

.lecturepanel.edit .intro .overview .videobx .new>i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.lecContent .intro .overview .desc {
    padding: 5px;
    line-height: 17px;
}

.lecturepanel .intro .overview .desc {
    min-height: 150px;
    cursor: pointer;
}

.lecturepanel.edit .intro .overview .desc {
    border: 1px dashed #ddd;
}

.lecContent .intro .overview .desc.edit:hover {
    border-color: #ddd;
}

.panelR.intro .teachers {
    padding: 0px;
}

.box {
    padding: 5px;
    border: 1px solid #EEE;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    min-height: auto;
}

.lecContent .panelR .newbox {
    cursor: pointer;
}

.lecContent .panelR .newbox:hover {
    background-color: #F5F5F5;
    color: #c23c1f;
}

.lecContent .bxBook {}

.lecContent .bxBook:after {
    clear: both;
    display: block;
    content: '';
}

.lecContent .bxBook .cover {
    float: left;
    width: 100px;
    height: 110px;
    border: 1px solid #EEE;
    background-color: #F0F0F0;
}

.lecContent .bxBook .prop {
    margin-left: 105px;
}

.lecContent .bxProp {
    list-style: none;
    margin: 0px;
    padding: 15px;
}

.lecContent .bxProp>li {
    line-height: 26px;
    font-size: 14px;
}

.lecContent .bxProp>li>label {
    font-weight: 300;
}

.md-title {
    font-weight: bold;
    position: relative;
}

.md-title:not(:first-child) {
    margin-top: 5px;
}

.mypage-my-service-header:not(:first-child) {
    margin-top: 20px;
}

.md-title .btn-introedit {
    position: absolute;
    top: -5px;
    right: 0px;
    line-height: 20px;
}

.md-title.bb1 {
    line-height: 35px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.md-title.bb1 .btn-more {
    top: -3px;
}

.md-title .btn-more {
    position: absolute;
    right: 0px;
    padding: 0px 15px;
    font-size: 12px;
    background-color: #EFEFEF;
}

.md-title .btn {
    float: right;
    background-color: #fff;
    color: #ec4a4a;
    border-radius: 35px;
    padding: 3px 25px;
    font-weight: 300;
    border: 1px solid #ee575e;
}

.cards.wrap {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.cards .card {
    height: 100%;
    text-align: left;
    padding: 15px;
    border-radius: 5px;
    height: 100px;
    color: #000;
    background: #faad43 url(/skins/default/images/home/kids/char_05.png) no-repeat 105% 105%;
    background-size: 25%;
    box-shadow: 1px 2px 2px #ccc;
    cursor: pointer;
    position: relative;
    vertical-align: top;
    overflow: hidden;
}

.cards .card.ic {
    background: #8bc34a url(/skins/default/images/home/kids/char_03.png) no-repeat 105% 105%/30%;
    color: #fff;
}

.cards .card .bxprice .price {
    color: #000;
}

.cards .new {
    height: 100px;
    position: relative;
    display: block;
    cursor: pointer;
    border-radius: 5px;
    border: 1px dashed #ccc;
    color: #aaa;
}

.cards .new:hover {
    color: #000;
}

.cards.wrap .card {
    width: 170px;
    display: inline-block;
    max-width: 250px;
}

.cards.wrap .card.size1 {
    width: 99%;
}

.cards.wrap .card.new {
    background: #faad43;
}

.cards .card i.fa-plus {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 17px;
}

.cards .new i.fa-plus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 17px;
}

.cards .card .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cards .card .bxprice {
    padding-top: 10px;
}

.frmOrder .cards .card .bxprice {
    padding: 0px;
}

.cards .card .bxprice label {
    color: #fff;
    font-size: 90%;
}

.cards .card .bxprice .price {
    margin-top: 5px;
    font-weight: 700;
    font-size: 130%;
    background-color: rgba(255, 255, 255, .5);
    border-bottom: 2px solid #fff;
    border-radius: 5px;
    padding: 1px 5px;
}

.lecturepanel .nav-tabs {
    display: table;
    margin: 0px auto 10px;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.lecturepanel .nav-tabs.nav-fixed {
    -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
}

.lecturepanel .nav-tabs>li>a {
    padding: 10px 40px;
    font-size: 17px;
}

.lecturepanel .widget .nav-tabs {
    margin: 0px 0px 10px;
}

.overview .video {}

.overview .desc {
    font-size: 12px;
    position: relative;
}


/*
.overview .desc:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}
*/

.review .stars {
    padding: 5px 0px;
}

.review .stars>i {
    color: #aaa;
    font-size: 15px;
    cursor: pointer;
}

.review .stars>i.active {
    color: #ee5281;
}

.reviews section {
    margin: 10px auto;
}

.reviews .board {
    font-size: 12px;
}

.reviews .board:after {
    clear: both;
    display: block;
    content: '';
}

.reviews .board>.info {
    width: 110px;
    float: left;
    text-align: center;
}

.reviews .board>.info h2 {
    margin: 5px 0;
    font-size: 40px;
}

.reviews .board>.info>div {
    margin: 5px;
}

.reviews .board>.rate {
    padding-left: 5px;
    overflow: hidden;
}

.reviews .board>.rate>div {
    padding: 2px 0;
}

.reviews .board>.rate>div:after {
    clear: both;
    display: block;
    content: '';
}

.reviews .board>.rate>div>label {
    float: left;
    width: 30px;
    margin-bottom: 0px;
    vertical-align: top;
}

.reviews .board>.rate .progress {
    padding-left: 5px;
    overflow: hidden;
    height: 11px;
    position: relative;
    top: 4px;
}

.reviews .review {
    min-height: 90px;
    padding: 10px 5px;
}

.reviews .review:after {
    clear: both;
    display: block;
    content: '';
}

.reviews .review>.img-profile {
    margin-left: 5px;
    width: 50px;
    float: left;
}

.reviews .review>div {
    padding-left: 15px;
    overflow: hidden;
}

.reviews .review>div .author {
    font-weight: bold;
}

.reviews .review>div .date {
    padding-left: 10px;
    font-size: 12px;
    color: #777;
}

.reviews .review>div .rating {
    padding: 5px 0;
}

.reviews .review>div .text {
    font-size: 12px;
}

.reviewbx .smry {}

.reviewbx .smry .scorebx {
    float: left;
    width: 200px;
    padding: 20px 0;
}

.reviewbx .smry .scorebx .score {
    font-size: 50px;
    font-weight: 200;
    line-height: 45px;
    text-align: center;
}

.reviewbx .smry .scorebx .rate {
    display: block;
    text-align: center;
}

.reviewbx .smry .chartbx {
    overflow: hidden;
}

.reviewbx .smry .chartbx>div {
    padding: 3px;
}

.reviewbx .smry .chartbx>div label {
    display: inline-block;
    width: 30px;
    text-align: center;
    margin: 0px;
    font-size: 13px;
    font-weight: 300;
    float: left;
}

.reviewbx .smry .chartbx>div .progress {
    overflow: hidden;
    border-radius: 0px;
}

.reviewbx .smry .chartbx>div .progress-bar {
    background-color: #42b5a5;
}

.reviewbx .smry .chartbx>div.like5 .progress-bar {
    background-color: #428fb5;
}

.reviewbx .smry .chartbx>div.like3 .progress-bar {
    background-color: #7bc660;
}

.reviewbx .smry .chartbx>div.like2 .progress-bar {
    background-color: #ecc631;
}

.reviewbx .smry .chartbx>div.like1 .progress-bar {
    background-color: #ec9b45;
}

.reviewbx .reviews {}

.reviewbx .comment {
    margin-bottom: 10px;
    position: relative;
    padding: 10px 5px;
}

.reviewbx .comment .pic {
    float: left;
    width: 60px;
    height: 60px;
    background-color: #eee;
    border-radius: 50%;
    margin-right: 10px;
}

.reviewbx .comment .pic>img {
    width: 100%;
}

.reviewbx .comment .body {
    padding: 0px;
    overflow: hidden;
}

.reviewbx .comment .body .stars {
    padding: 0 0 5px;
}

.reviewbx .comment .body .stars i {
    color: #e35e5e;
}

.reviewbx .comment .info {}

.reviewbx .comment .info>.attr {
    margin: 10px 0;
}

.reviewbx .comment .body>.msg {
    font-weight: 300;
    padding: 5px 0;
}

.reviewbx .comment .option {
    position: absolute;
    right: 10px;
    top: 10px;
    display: none;
}

.reviewbx .comment:hover .option {
    display: inline-block;
}

.sline {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}


/*
.sline .lstItems {
  white-space: nowrap;
}

.sline .lstItems > li {
  float: none;
  display: inline-block;
}

.lstItems {
  margin: 10px -10px 20px;
}

.lstItems > li {
  display: inline-block;
}
*/

.sline.lectures>.lecture {
    width: 300px;
    margin-bottom: 0px;
}

ul.lecture {
    list-style: none;
    margin: 5px 10px;
    padding: 5px 5px 5px 110px;
    width: 300px;
    height: 90px;
    min-height: 0px;
    background: url(/skins/default/images/menubak.jpg) left center no-repeat;
    background-size: 100px 100%;
    position: relative;
}

ul.lecture>li {
    line-height: 20px;
}

ul.lecture>li.title {
    font-weight: bold;
}

ul.lecture>li.info {
    padding: 3px 0;
}

ul.lecture>li.info .rate {}

.lecture .redbox {
    display: inline-block;
    width: 50px;
    line-height: 25px;
    background-color: red;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: #FFF;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

ul.lecture>li.info .ucnt {
    position: absolute;
    bottom: 0px;
    left: 50px;
}

ul.lecture>li.desc {
    font-size: 12px;
}

div.lecture {
    width: 200px;
    height: 200px;
    display: inline-block;
    position: relative;
}

.sline div.lecture {
    margin-right: 5px;
}

div.lecture .bgLec {
    height: 100px;
    margin-bottom: 5px;
    position: relative;
}

div.lecture .bgImg1 {
    background: url(/skins/default/images/photos/thumb_lecture01.jpg) left center no-repeat;
    background-size: cover;
}


/*
div.lecture .bgImg2 {
  background: #F5F5F5 url(/skins/default/images/victory_cover.png) center top no-repeat;
  background-size: cover;
}

div.lecture.bg114 .bgImg2 {
  background: #F5F5F5 url(/files/library/file/2019/0920/1_5d8429958229a_0001_s.png) center top no-repeat;
  background-size: cover;
}
*/

div.lecture .bgLec {
    background-color: #F5F5F5;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
}

div.lecture .bgLec .img-circle {
    border: 2px solid #FFF;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    width: 60px;
    position: absolute;
    left: 10px;
    bottom: -20px;
}

div.lecture .bgLec .pic {
    display: inline-block;
    width: 60px;
    height: 60px;
    position: absolute;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    width: 60px;
    position: absolute;
    left: 10px;
    bottom: -20px;
    opacity: 1;
    border: 2px solid #fff;
    background-color: #fff;
}

div.lecture .bgLec .pic i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #aaa;
}

div.lecture .bgLec .ucnt {
    position: absolute;
    bottom: 0px;
    right: 0px;
    display: none;
}

div.lecture .info {
    position: relative;
}

div.lecture .info .title {
    font-weight: bold;
}

div.lecture.box .info .title {
    padding: 5px 0px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.lecture.box .info .expire {
    font-weight: 300;
    font-size: 12px;
    margin: 5px 0;
}

div.lecture.box .info .expire .tag,
div.lecture.box .info .expire>b {
    float: right;
    font-weight: normal;
}

div.lecture.box .info .expire>.price {
    font-weight: bold;
    color: #f54b23;
}

div.lecture>.rate {
    text-align: right;
}

div.lecture .desc {
    font-size: 12px;
    margin-bottom: 5px;
    display: none;
}

div.lecture .price {
    font-size: 12px;
    text-align: right;
}

.lessons div.lesson {
    margin: 5px 0px;
    position: relative;
}

.lessons div.lesson>.thumb {
    margin-bottom: 5px;
    position: relative;
}

.lessons div.lesson>.thumb>img {
    width: 100%;
    height: 100%;
}

.lessons div.lesson>.thumb>.time {
    position: absolute;
    right: 3px;
    bottom: 3px;
    background-color: #000;
    opacity: 0.7;
    color: #FFF;
    font-size: 11px;
    padding: 0px 5px;
    height: 14px;
    line-height: 14px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.lessons div.lesson .rate {
    color: #daac16;
    font-size: 12px;
}

.lessons div.lesson .title {
    margin: 8px 0 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lessons div.lesson .thumb .no {
    padding: 5px 8px;
    color: #FFF;
    font-size: 15px;
    font-weight: bold;
    position: absolute;
    top: -7px;
    left: -7px;
}

.lessons div.lesson .info {
    position: relative;
    font-size: 12px;
}

.lessons div.lesson .info .comments {
    position: absolute;
    right: 0px;
}

.papers div.paper,
.tests div.test {
    position: relative;
    border: 1px solid #ddd;
    height: 105px;
    margin-bottom: 10px;
    cursor: pointer;
    background-color: transparent;
}

.tests div.test span {
    opacity: 1;
}

.cards .card .option,
.resrcs div.resrc .option,
.books div.book .option,
.papers div.paper .option,
.tests div.test .option {
    display: none;
}

.papers div.paper:hover,
.tests div.test:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.schoolview .tests div.test:hover {
    background-color: #f9f9f9;
}

.schoolview .box .option .btn {
    color: #333;
    text-shadow: none;
}

.tests div.test:hover .thumb .score {
    color: red;
}

.papers div.paper:hover>.thumb>.options,
.tests div.test:hover>.thumb>.options {
    background-color: rgba(0, 0, 0, 0.7);
}

.tests div.test:hover .thumb .imgbg {
    display: none;
}

.cards .card:hover .option,
.resrcs div.resrc:hover .option,
.books div.book:hover .option,
.papers div.paper:hover .option,
.tests div.test:hover .option {
    display: inline-block;
}

.tests.tile div.test {
    border: none;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    height: auto;
    width: 90%;
    margin: 5px auto;
}

.papers div.paper:after,
.tests div.test:after {
    clear: both;
    display: block;
    content: '';
}

.papers div.paper>.thumb,
.tests div.test>.thumb {
    float: left;
    width: 70px;
    height: 100%;
    position: relative;
    background-color: #FCFCFC;
    padding: 2px;
    margin-right: 10px;
    box-shadow: 3px 3px 3px rgba(12, 12, 12, 0.2);
    overflow: hidden;
}

.papers div.paper>.thumb {
    padding: 0px;
    box-shadow: 1px 1px 1px rgba(12, 12, 12, 0.2);
}

.tests.tile .test>.thumb {
    float: none;
    width: 100%;
    height: 100%;
    margin: 0px;
    overflow: hidden;
}

.tests.tile .test .thumb:after {
    content: '';
    display: block;
    padding-top: 140%;
}

.papers div.paper>.thumb>img,
.tests div.test>.thumb>img {
    width: 100%;
    height: 100%;
    position: absolute;
}

.papers div.paper>.thumb>i,
.tests div.test>.thumb>i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
}

.tests div.test>.thumb>div.imgbg,
.tests div.test>.thumb>div.ibg {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /*
  background-color: #000;
  opacity: 0.05;
  */
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(rgba(0, 0, 0, 0) 10%, rgba(205, 205, 205, 0.15) 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) -o-linear-gradient(rgba(0, 0, 0, 0) 10%, rgba(205, 205, 205, 0.15) 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) -moz-linear-gradient(rgba(0, 0, 0, 0) 10%, rgba(205, 205, 205, 0.15) 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(rgba(0, 0, 0, 0) 10%, rgba(205, 205, 205, 0.15) 100%) repeat scroll 0 0;
}

.tests div.test>.thumb>.score {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    color: #d9534f;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}

.papers div.paper>.thumb>.options,
.tests div.test>.thumb>.options {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 25px;
    line-height: 25px;
    padding: 0px 5px;
    background-color: rgba(0, 0, 0, 0.3);
    font-weight: bold;
    text-align: right;
    color: #FFF;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
    z-index: 1;
}

.tests div.test>.thumb>.options>span {
    font-size: 15px;
}

.tests div.test>.thumb>.time {
    position: absolute;
    bottom: 0px;
    right: 0px;
    display: inline-block;
    width: 40px;
    height: 20px;
    line-height: 20px;
    background-color: rgba(239, 43, 28, 0.8);
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: #FFF;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    z-index: 1;
}

.papers div.paper .info,
.tests div.test .info {
    overflow: hidden;
    font-size: 12px;
}

.papers div.paper ul.info {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.papers div.paper ul.info>li {
    margin: 3px 0px;
}

.tests div.test .info .wrapinfo {}

.tests div.test .info .cate {
    padding: 2px 0px;
}

.papers div.paper .info .cate {
    margin-top: 3px;
    font-size: 11px;
    display: inline-block;
}

.tests.tile .test>.info .adate,
.tests.tile .test>.info .result,
.tests.tile .test>.info .cate {
    display: none;
}

.papers div.paper .info .title,
.tests div.test .info .title {
    font-size: 14px;
    font-weight: normal;
    margin: 0px;
    padding: 5px 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.papers div.paper .info .title {
    padding: 7px 0px;
    font-weight: 500;
}

.tests div.test .info .smry {
    height: 15px;
}

.tests div.test .info .adate,
.tests div.test .info .period {
    font-size: 12px;
    margin: 4px 0;
}

.tests div.test .info .result {}

.tests div.test .info .graph {
    padding-top: 10px;
}

.tests div.test .info .graph label {}

.tests div.test .info .graph .progress {
    background-color: #F0F0F0;
    height: 5px;
}

.newbox {
    border: 1px dashed #ddd;
    min-height: 105px;
    width: 100%;
    position: relative;
    margin: 10px 0px;
}

.newbox>div {
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    white-space: nowrap;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

.newbox .label {
    display: block;
    color: inherit;
}

.tests div.new>div>span {
    display: inline-block;
    font-size: 25px;
    font-weight: 500;
    margin-bottom: 10px;
}

.mainItems {}

.lectures.rows {
    margin-left: -10px;
    margin-right: -10px;
}

.lectures .lecture.box {
    width: auto;
    height: auto;
    display: inherit;
}

.lectures .lecture.box.paid::before {
    content: '\f09d';
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    position: absolute;
    z-index: 1;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    background-color: #ff3c00;
    top: -5px;
    left: -5px;
    color: #fff;
    display: none;
}

.lectures .lecture.box.sel,
.lectures .lecture.box:hover {
    border: 1px solid #ccc;
    background-color: #F5F5F5;
}

.lectures .lecture.box:hover .bgLec {
    background-size: contain;
}

.lectures .lecture.box .cate {
    text-align: right;
    position: relative;
    top: -30px;
    margin-right: 5px;
}

.lectures .lecture.box .cate>span {
    background-color: #000;
    color: #fff;
    padding: 2px 5px;
    display: inline-block;
    border-radius: 5px;
}

.lectures .lecture.box .progress {
    background-color: #ccc;
}

.lectures .lecture.box .smry {
    font-size: 12px;
    padding: 5px 0px;
    position: absolute;
    top: -5px;
    right: 0px;
}

.lectures div.lecture {
    background-color: #FFF;
    height: 120px;
    width: 100%;
    margin-bottom: 10px;
    cursor: pointer;
}

.lectures div.lecture:after {
    clear: both;
    display: block;
    content: '';
}

.lectures div.lecture .thumb {
    float: left;
    width: 120px;
    height: 100%;
    position: relative;
}

.lectures div.lecture .thumb img.bg {
    width: 100%;
    height: 100%;
}

.lectures div.lecture .thumb img.pic {
    border: 1px solid #FFF;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 60px;
    position: absolute;
    right: 5px;
    bottom: 5px;
}

.lectures div.lecture .thumb .ucnt {
    display: inline-block;
    width: 50px;
    line-height: 25px;
    opacity: 0.8;
    background-color: red;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: #FFF;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.lectures div.lecture ul.info {
    list-style: none;
    margin: 0px;
    padding: 0px 5px;
    overflow: hidden;
    border: 1px solid #eee;
    height: 100%;
    position: relative;
}

.lectures div.lecture ul.info>li {
    margin: 3px 0px;
    font-size: 12px;
}

.lectures div.lecture ul.info .option {
    position: absolute;
    top: 0px;
    right: 5px;
}

.lectures div.lecture ul.info .cate {
    display: inline-block;
    color: #111;
    font-size: 11px;
}

.sline .lecture .title,
.lectures div.lecture ul.info h3.title {
    margin: 0px;
    padding: 3px 0px;
    font-weight: normal;
    font-size: 15px;
}

.lectures div.lecture ul.info .rdate {
    font-size: 11px;
    color: #999;
}

.lectures div.lecture ul.info .rate {
    margin: 5px 0px;
}

.lectures div.lecture ul.info .rate .progress {
    background-color: #F0F0F0;
}

.lesson-panel {
    /*overflow: hidden;*/
}

.lesson-panel .dropdown-toggle {}


/*
.homeview .lesson-panel .descbx {
    font-weight: 300;
    padding: 5px 10px;
    background-color: #F9F9F9;
    border-radius: 10px;
    margin-bottom: 20px;
    min-height: 100px;
}
*/

.lesson-panel .sidebtns {
    position: absolute;
    top: -50px;
    right: -100px;
    width: 80px;
    height: 170px;
    display: none;
}

.selmode .lesson-panel .sidebtns {
    display: inline-block;
}

.lesson-panel .sidebtns .floating {
    position: fixed;
}

.floating .btn {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: #D050B0;
    border-radius: 50%;
    display: block;
    line-height: 80px;
    width: 80px;
    color: #fff;
    font-weight: normal;
    font-size: 30px;
    text-align: center;
    cursor: pointer;
    padding: 0px;
    -moz-box-shadow: 3px 0 5px rgba(12, 12, 12, 0.5);
    -webkit-box-shadow: 3px 0 5px rgba(12, 12, 12, 0.5);
    box-shadow: 2px 2px 5px rgba(12, 12, 12, 0.5);
}

.lesson-panel.lesson-admin .lpanel {
    display: none;
}

.lesson-panel.lesson-admin .cpanel {
    margin-left: 0px;
}

.lesson-panel .cpanel {
    margin-left: 265px;
    font-size: 14px;
    overflow: hidden;
}

.lesson-panel .lpanel {
    float: left;
    width: 250px;
    position: -webkit-sticky;
    position: sticky;
    top: 60px;
}

.lesson-panel.expand .lpanel {
    display: none;
}

.topline {
    border-top: solid 1px #eee;
    margin-top: 10px;
}

.lesson-panel.expand .cpanel {
    float: none;
    margin-left: 0px;
}

.lesson-panel.expand .cpanel>.btn-expand>i::before {
    content: '\f054';
}

.index.box {
    min-height: 250px;
    width: 250px;
}

.lesson-panel .cpanel>.btn-expand {
    position: absolute;
    z-index: 1;
    color: #fff;
    padding: 5px 10px;
    line-height: 50px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.lesson-panel .cpanel>.btn-expand:hover {
    background-color: rgba(0, 0, 0, .5);
}

.kids-panel .indexbx {
    position: relative;
    padding: 15px;
    border-radius: 5px;
    background-color: #5b8ddb;
    margin-bottom: 10px;
    text-align: center;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.kids-panel .indexbx a {
    color: #fff;
    display: inline-block;
    min-width: 50px;
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
    font-size: 15px;
    margin-right: 5px;
    text-decoration: none;
    font-family: 'Binggrae';
    font-weight: bold;
    position: relative;
}

body .kids-panel .indexbx a.btn-wait,
body .kids-panel .indexbx a.btn-lock {
    color: #445da5;
}

.kids-panel .indexbx a.btn-expand {
    position: absolute;
    left: 10px;
}

.kids-panel .indexbx a.btn-new {
    width: 50px;
}

.kids-panel .indexbx a:hover {
    background-color: rgba(255, 255, 255, .5);
    color: #000;
}

.kids-panel .indexbx a.active {
    background-color: #fff;
    color: #000;
}

.kids-panel .indexbx a:not(:last-child):after {
    content: '';
    display: block;
    position: absolute;
    width: 3px;
    height: 10px;
    top: 50%;
    right: -5px;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, .5);
    border-radius: 25px;
    overflow: hidden;
}

.lesson-panel .lpanel .index.box>.title {
    margin: 5px 0px 10px;
    font-size: 15px;
    font-weight: 600;
    position: relative;
    border-bottom: 1px dashed #eee;
    padding-bottom: 10px;
}

.lesson-panel .lpanel .index.box>.title>a.btn-add {
    position: absolute;
    top: -5px;
    right: 0px;
    padding: 4px 5px;
    display: none;
}

.lesson-panel.edit .lpanel .index.box>.title>a.btn-add {
    display: inline-block;
    color: #333;
    padding: 4px 8px;
}

.lesson-panel .lpanel .index.box .list {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.lesson-panel .lpanel .index.box .list>li .title,
.lesson-panel .lpanel .index.box .list>li {
    padding: 5px;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    cursor: pointer;
    color: #000;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lesson-panel .lpanel .index.box .list>li>span {
    font-size: 14px;
}

.lesson-panel .lpanel .index.box .list>li .btn-remove {
    display: none;
    position: absolute;
    right: 0px;
}

.lesson-panel .lpanel .index.box .list>li:hover {
    background-color: #eee;
}

.lesson-panel.edit .lpanel .index.box .list>li:hover .btn-remove {
    display: inline-block;
}

.lesson-panel .lpanel .index.box .list>li>span.no {
    margin-right: 5px;
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
}

.lesson-panel .intro {
    display: inline-block;
    width: 100%;
    cursor: pointer;
}

.lesson-panel .intro .descbx {
    font-size: 15px;
    font-weight: 300;
    line-height: 25px;
}

.lesson-panel .intro .descbx p {
    font-size: 15px;
    font-weight: 300;
    line-height: 25px;
}

.screen.youtube,
.lesson-panel .intro .videobx {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0;
}

.screen.youtube.shorts {
    padding-bottom: 177.8%;
}

.panel-body .shorts .plyr {
    height: calc(100dvh - 78px);
}

.panel-body .shorts .plyr--stopped.plyr__poster-enabled .plyr__poster {
    background-size: auto;
}

.screen .plyr {
    height: 100%;
}

.screen video,
.lesson-panel .intro .videobx video {
    max-width: 100%;
    max-height: 100%;
    position: relative;
}

.youtube iframe,
.lesson-panel .videobx iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.lesson-panel .intro .videobx .new,
.lesson-panel .intro .videobx .item {
    height: 150px;
    cursor: pointer;
}

.lesson-panel .intro .videobx .new {
    border: 1px dashed #ddd;
}

.lesson-panel .intro .videobx .new>.icon {
    display: inline-block;
}

.lesson-panel .intro .videobx .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.lesson-panel .intro .videobx .item .title {
    position: absolute;
    bottom: 0px;
    width: 100%;
    line-height: 25px;
    padding: 2px 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: rgba(0, 0, 0, .5);
    color: #fff;
}

.lesson-panel .item>span[data-role="remove"] {
    position: absolute;
    top: -10px;
    right: -5px;
    cursor: pointer;
    z-index: 1;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
    display: none;
    font-size: 20px;
}

.lesson-panel.edit .widget .item:hover>span[data-role="remove"] {
    display: block;
}

.lesson-panel .wrap_lesson {
    display: none;
}

.lesson-panel .wrap_lesson.active {
    display: block;
}

.lesson_kidshome .wrap_lesson>.title {
    text-align: center;
    background-color: #EFEFEF;
    border-radius: 40px;
    line-height: 60px;
    font-family: "Binggrae";
    font-weight: bold;
    font-size: 20px;
    padding-right: 50px;
    position: relative;
}

.lesson_kidshome .wrap_lesson>.title>.no {
    border-radius: 50%;
    position: absolute;
    top: -10px;
    left: 0px;
    width: 80px;
    line-height: 80px;
    text-align: center;
    background-color: #37a7c2;
    color: #fff;
}

.lesson-panel .wrap_lesson .desc.alert {
    text-align: center;
    margin: 50px 0;
}

.lesson-panel .wrap_lesson .desc.alert h5 {
    font-size: 33px;
    color: #F92272;
    font-weight: bold;
}

.lesson-panel .wrap_lesson .desc.alert p {
    font-size: 22px;
    line-height: 27px;
    padding: 10px 0px;
}

.lesson-panel .wrap_lesson .desc.alert p > span {
    display: inline-block;
    padding: 5px 10px;
}

.lesson-panel .wrap_lesson .desc.alert::before {
    content: '';
    display: block;
    height: 200px;
    background: url(/skins/default/images/dabisu/ch_sarang_02_s.png) no-repeat top center/contain;
    margin-bottom: 20px;
}

.lesson_kidshome .alert_popup {
    padding: 30px;
    line-height: 23px;
    font-weight: 300;
}

.lesson_kidshome .widget {
    text-align: left;
    margin: 20px 0px 30px;
}

.lesson_kidshome .widget>.widget-header {
    text-align: left;
    margin: 10px 0;
    border-bottom: none;
}

.lesson_kidshome .widget>.widget-header>h5 {
    line-height: 40px;
    font-size: 15px;
    display: inline-block;
    font-family: "Binggrae";
    font-weight: bold;
    background-color: #f8c133;
    color: #fff;
    border-radius: 40px;
    padding: 0px 50px 0px 5px;
    position: relative;
    white-space: nowrap;
}

.lesson_kidshome .widget.step02>.widget-header>h5 {
    background-color: #7dc36d;
}

.lesson_kidshome .widget.step03>.widget-header>h5 {
    background-color: #ef5282;
}

.lesson_kidshome .widget.step04>.widget-header>h5 {
    background-color: #4796db;
}

.lesson_kidshome .widget>.widget-header>h5>span {
    width: 50px;
    line-height: 30px;
    display: inline-block;
    background-color: #fff;
    border-radius: 20px;
    color: #ED8A4F;
    text-align: center;
    margin-right: 10px;
}

.lesson_kidshome .widget>.widget-header>h5>b {
    color: #fff;
}

.edit .lesson_kidshome .widget>.widget-header>h5>.option {
    right: 10px;
    z-index: 3;
}

.edit .lesson_kidshome .widget>.widget-header>h5:hover>.option {
    display: inline-block;
}

.lesson_kidshome .widget.step02>.widget-header>h5>span {
    color: #4ebd5a;
}

.lesson_kidshome .widget.step03>.widget-header>h5>span {
    color: #ef5282;
}

.lesson_kidshome .widget.step04>.widget-header>h5>span {
    color: #4796db;
}

.lesson_kidshome .widget>.widget-body {
    padding: 0;
}

.lesson_kidshome .widget>.widget-body .lesson {
    height: 0;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    padding-bottom: 75%;
    box-shadow: 1px 1px 5px #aaa;
    cursor: pointer;
}

.lesson_kidshome .widget>.widget-body .lesson>.thumb {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transition: all .2s ease;
}

.lesson_kidshome .widget>.widget-body .lesson>.icon {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    color: #fff;
    border-radius: 15px;
    opacity: .7;
    background-color: #000;
    padding: 20px;
    display: none;
    z-index: 1;
}

.lesson_kidshome .widget>.widget-body .lesson.new {
    display: none;
    width: 100%;
    box-shadow: none;
    border: 1px dashed #ddd;
    color: #d97979;
}

.lesson_kidshome .widget.edit>.widget-body .lesson.new,
.edit .lesson_kidshome .widget>.widget-body .lesson.new {
    display: inline-block;
    transition: all .2s ease;
}

.lesson_kidshome .widget.edit>.widget-body .lesson:hover .option,
.edit .lesson_kidshome .widget>.widget-body .lesson:hover .option {
    display: inline-block;
}

.lesson_kidshome .widget>.widget-body .lesson.new>i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.edit .lesson_kidshome .widget>.widget-body .lesson.new:hover {
    background-color: #fcf3cb;
    font-size: 25px;
}

.lesson_kidshome .widget>.widget-body .lesson:hover>.thumb {
    transform: scale(1.2);
}

.lesson_kidshome .widget>.widget-body .lesson:hover>.icon {
    display: inline-block;
}

.lesson_kidshome .widget>.widget-body .lesson>.icon .fa-youtube::before {
    content: "\f144";
}

.lesson_kidshome .widget>.widget-body .lesson>.title {
    position: absolute;
    width: 100%;
    bottom: 0px;
    line-height: 30px;
    background-color: rgba(0, 0, 0, .8);
    color: #fff;
    padding: 0px 10px;
    z-index: 1;
}

.lesson_kidshome .widget>.widget-body .lesson>.title>span {
    float: right;
}

.lesson_kidshome .wrap_lesson>.circle.btn-new {
    background-color: #fff;
    border: 2px dotted #f69a9a;
    color: #f69a9a;
    border-radius: 50%;
    width: 55px;
    line-height: 55px;
    text-align: center;
    display: none;
    position: relative;
    transition: all .2s ease;
    margin: 10px;
}

.edit .lesson_kidshome .wrap_lesson>.circle.btn-new {
    display: inline-block;
}

.edit .lesson_kidshome .wrap_lesson>.circle.btn-new:hover {
    background-color: #fcf3cb;
    font-size: 25px;
}

.lesson-panel .intro .video video {
    width: 100%;
}

.video.new {
    height: 150px;
    border: 1px dashed #ddd;
    position: relative;
    cursor: pointer;
}

.video.new>i {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #ccc;
    transform: translate(-50%, -50%);
}

.video.new .toolbar {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.6);
    width: 110px;
}

.video.new .toolbar>a {
    display: inline-block;
    text-align: center;
    padding: 5px 10px;
    color: #eee;
}

.video.new .toolbar>a:hover {
    color: #fff;
}

.lesson-panel .notice {
    color: #aaa;
    line-height: 50px;
}

.lesson-panel.edit .notice {
    display: none;
}

.lesson-panel .intro .desc {
    border: 1px dashed #eee;
    min-height: 150px;
    padding: 5px;
    line-height: 17px;
    cursor: pointer;
}

.lesson-panel .intro .desc:hover {
    border-color: #ddd;
}

.lesson-panel .books {}

.lesson-panel .books .book {
    position: relative;
    padding: 0px;
}

.lesson-panel .books .book span[data-role="del"] {
    position: absolute;
    right: -5px;
    font-size: 30px;
    top: -5px;
    z-index: 2;
    display: none;
    cursor: pointer;
}

.edit .lesson-panel .books .book:hover span[data-role="del"] {
    display: inline-block;
}

.lesson-panel .books .book .thumb {
    float: left;
    width: 140px;
    padding-bottom: 190px;
    background-color: #ccc;
    border: 1px solid #eee;
    margin-right: 20px;
    position: relative;
    cursor: pointer;
}

.lesson-panel .books .book .info {
    overflow: hidden;
}

.lesson-panel .books .book .info>h4 {
    font-size: 17px;
    line-height: 25px;
}

.lesson-panel .books .book .info>.author {
    font-weight: 300;
}

.lesson-panel .books .book .info>.price {
    padding: 10px 0;
}

.lesson-panel .books .book .info>.price .discount {
    font-size: 17px;
    font-weight: bold;
}

.lesson-panel .books .book .info>.btnOrder {
    display: inline-block;
    padding: 7px 20px;
    border-radius: 20px;
    background-color: #ea4f4f;
    color: #fff;
    margin-top: 10px;
}

.lesson-panel .books .book .cover {
    width: 100%;
    float: none;
}

.lesson-panel .books .book .title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 2px 5px;
    position: absolute;
    bottom: 0px;
    width: 100%;
}

.lesson-panel .books .new {
    display: inline-block;
    width: 150px;
    height: 200px;
    border: 1px dashed #ccc;
    color: #f69a9a;
    position: relative;
    cursor: pointer;
    vertical-align: top;
    margin: 0px;
}

.lesson-panel .books .new:hover {
    border-color: #e75e5e;
    color: #e75e5e;
}

.lesson-panel .books .new>i,
.lesson-panel .books .item>i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.lesson-panel .books .item {
    width: 150px;
    height: 180px;
    position: relative;
    float: left;
    cursor: pointer;
    border-radius: 3px;
    box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1);
    margin-left: 15px;
    margin-bottom: 15px;
}

.edit .lesson-panel .users .new,
.edit .lesson-panel .items .item.new {
    display: inline-block;
}

.lesson-panel .users .new,
.lesson-panel .books .item.new {
    display: none;
}

.wraplecture {
    max-width: 1100px;
    margin: 0 auto;
}

.kids-panel .widget.hangul {
    border-radius: 10px;
}

.kids-panel .table-kids {
    font-size: 14px;
    border-bottom: 1px solid #e3e6f3;
}

.kids-panel .table-kids thead tr th {
    background-color: #F9F9F9;
    border-bottom: 1px solid #00bbb4;
    border-top: 2px solid #00bbb4 !important;
}

.widget.lessonbx .widget-header>h2.title {
    margin: 5px 0px;
    font-size: 15px;
    font-weight: 600;
    line-height: 25px;
}

.kids-panel .widget.lessonbx .widget-header>h2.title {
    font-family: "CookieRun";
    font-size: 20px;
    line-height: 40px;
}

.kids-panel .widget.lessonbx .widget-header {
    border: none;
}

.kids-panel .widget.lessonbx .widget-header h2.title {
    font-size: 25px;
    font-weight: 700;
}

.kids-panel.edit .widget.lessonbx .widget-header>h2.title {
    padding-right: 50px;
}

.kids-panel .widget.lessonbx.dabisukids .widget-header>h2.title:after {
    display: none;
}

.widget.lessonbx .widget-header h2.title>.no {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    margin-right: 5px;
    display: inline-block;
    text-align: center;
    padding: 10px;
    background-color: #37a7c2;
    color: #fff;
    line-height: 20px;
}

.lesson-panel .widget .nav-tabs {
    display: block;
    margin-bottom: 3px;
    -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}

.lesson-panel .widget .nav-tabs > li {
    display: inline-block;
    float: none;
}

.lesson-panel .widget .nav-tabs > li.ing::before {
    content: '\f3c5';
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 33px;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    animation: .5s linear infinite alternate vmotion;
    z-index: 2;
}

.lesson-panel .widget .nav-tabs > li.end::after {
    content: '\f456';
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 22px;
    position: absolute;
    top: -20px;
    left: 10px;
    z-index: 2;
}

.lesson-panel .widget .nav-tabs > li.active.end::after {
    color: #ff8418;
}

.lesson-panel .widget.dabisukids .nav-tabs {
    text-align: center;
}

.lesson-panel .widget .infobx .wrap {
    padding: 0;
    position: relative;
}

.lesson-panel .widget.dabisukids .infobx .wrap {
    padding: 0px 155px;
}

.lesson-panel .widget .contentbx {
    padding: 0;
}

.lesson-panel .widget .infobx {
    background-color: #f9f9f9;
    padding: 10px;
}

.lesson-panel .widget.hangul .infobx {
    background-color: #fff;
}

.lesson-panel .widget .infobx .title {
    position: relative;
    z-index: 1;
}

.lesson-panel .widget .infobx .title h2 {
    margin: 0 0 10px;
    font-size: 22px;
}

.lesson-panel .widget .infobx .title .no {
    display: inline-block;
    border-radius: 5px;
    padding: 5px;
}

.lesson-panel .widget .infobx .title .control {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
}

.lesson-panel .widget .infobx .title .control>button {
    padding: 7px;
}

.widget .widget-body .btn-add {
    padding: 7px 10px;
    border: 1px dashed #ddd;
    color: #d97979;
    border-radius: 5px;
    display: none;
    background-color: #fff;
}

.widget.edit .widget-body .btn-add,
.lesson-panel.edit .widget .widget-body .btn-add {
    display: inline-block;
}

.widget .widget-body table .btn-add {
    width: 100%;
    text-align: center;
}

.widget .widget-body .infobx table .btn-add {
    width: initial;
}

.widget .widget-body .resrcbx .btn-add {
    width: 80px;
    height: 100px;
    position: relative;
}

.kids-panel .widget .widget-body .resrcbx:not(td):not(.ml0) {
    padding: 5px;
    margin-left: -15px;
}

.kids-panel .widget .widget-body .resrcbx .item {
    width: 150px;
    height: 180px;
    position: relative;
    cursor: pointer;
    border-radius: 3px;
    box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1);
    margin-left: 15px;
    margin-bottom: 15px;
}

.kids-panel .widget .widget-body .infobx .resrcbx .item {
    margin: 0px;
    min-height: 100%;
}

.kids-panel.edit .widget .widget-body .resrcbx .item.btn-add,
.kids-panel .widget .widget-body .resrcbx .item:not(.btn-add) {
    display: inline-block;
}

.kids-panel.edit .widget .widget-body .infobx .resrcbx .item.btn-add {
    display: block;
}

.kids-panel.lesson-dabisukids .widget .widget-body .infobx .resrcbx .item {
    margin: 0px;
}

.kids-panel .widget .widget-body .resrcbx.ebook .item {
    box-shadow: none;
    margin: 0px;
    float: none;
    width: 100%;
}

.kids-panel .widget .widget-body .resrcbx.hsize:not(.h4size) .item {
    width: 30%;
}

.kids-panel .widget .widget-body .resrcbx.hsize.h4size .item {
    width: 22%;
}

.kids-panel .widget .widget-body .wrapbx .resrcbx .item {
    height: 100px;
}

.kids-panel .widget .widget-body .resrcbx .item:hover {
    box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.5);
    background-size: contain !important;
}

.kids-panel .widget .widget-body .resrcbx.ebook .item:hover {
    box-shadow: none;
}

.kids-panel .widget .widget-body .resrcbx .item:hover .title,
.kids-panel .widget .widget-body .resrcbx .item:hover .icon {
    opacity: .8;
}

.kids-panel .widget .widget-body td.resrcbx .item {
    margin: 0px 0px 10px 0px;
    width: 90px;
    height: 125px;
}

.kids-panel .widget .widget-body td.resrcbx .btn-add {
    width: 100%;
    height: auto;
    box-shadow: none;
    padding: 7px 10px;
}

.kids-panel .widget .widget-body td.resrcbx .btn-add:hover {
    box-shadow: none;
}


/*********  kids english template  *************/

.kids-panel .widget.english .common {
    padding: 15px;
    background-color: #f9f9f9;
}

.kids-panel .widget.english .item{
    width: 100%;
    height: 0;
    position: relative;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 0 0 75% 0 !important;
    box-shadow: 1px 1px 5px #aaa;
    background-color: #fff !important;
    cursor: pointer;
    border: none !important;
}
.kids-panel .widget.dabisukids .days4 .item {
    width: 23%;
    height: 140px;
    position: relative;
    border-radius: 10px;
    margin: 4px 4px 0 0;
    padding: 0 !important;
    box-shadow: 1px 1px 5px #aaa;
    background-color: #fff !important;
    cursor: pointer;
    border: none !important;
}
.kids-panel .widget.english .common .item {
    margin: 0px 0px 10px;
}

.kids-panel .widget.english .common .item .title {
    position: absolute;
    left: 0px;
    bottom: 0px;
    display: block;
    padding: 5px;
    background-color: #000;
    opacity: .5;
    width: 100%;
    color: #fff;
    font-size: 12px;
    font-weight: 300;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.kids-panel .widget.english .item:hover>.thumb {
    transform: scale(1.2);
}

.kids-panel .widget.english .btn-add:hover {
    background-color: #fcf3cb;
    font-size: 25px;
}

body .kids-panel .widget.english .items .btn-add,
body .kids-panel .widget.dabisukids .days4 .btn-add {
    box-shadow: none;
    border: 1px dashed #ddd !important;
    color: #d97979;
    display: none;
    transition: all .2s ease;
}

body .kids-panel.edit .widget.english .items .btn-add,
body .kids-panel.edit .widget.dabisukids .days4 .btn-add {
    display: inline-block;
}

.kids-panel .widget.english .btn-add>i,
body .kids-panel .widget.dabisukids .days4 .btn-add>i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.kids-panel .weeks {
    position: relative;
    margin-top: 20px;
}
.kids-panel .body-2024 .plus-box.btn-new {
    cursor: pointer;
    border: 1px dashed lightgray;
    border-radius: 30px;
    padding: 10px;
    text-align: center;
}
.kids-panel .body-2024 .plus-box.btn-new a {
    color: #d97979;
}
.kids-panel .body-2024 .weeks {
    margin-left: 60px;
    margin-top: 30px;
}
.kids-panel .widget.english .weeks .tab-content {
    border: 1px solid #ddd;
    margin-right: 30px;
    min-height: 500px;
    overflow: auto;
}

.kids-panel .widget.english .weeks .tab-content>.tab-pane {
    min-width: 600px;
}

.kids-panel .widget.english .weeks .nav-tabs {
    position: absolute;
    top: 10px;
    right: 0px;
    z-index: 1;
    background: none;
    box-shadow: none;
}

.kids-panel .widget.english .weeks .nav-tabs li {
    margin-bottom: 5px;
    float: none;
    display: block;
}

.kids-panel .widget.english .weeks .nav-tabs a {
    width: 25px;
    text-align: center;
    padding: 10px 0;
    margin: 0px;
    border: 1px solid transparent;
    border-top-left-radius: 0px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 5px;
    background-color: #eee;
}

.kids-panel .widget.english .weeks .nav-tabs li.active>a {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left: 1px solid #fff;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: #fff;
    font-weight: 500;
    width: 30px;
    position: relative;
    left: -1px;
}

.kids-panel .weeks .week .day {
    float: left;
    width: 20%;
    padding: 10px;
}

.kids-panel .weeks .week .days4 {
    float: left;
    width: 100%;
    padding: 4px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}
.kids-panel .weeks .week .day>label {
    display: block;
    padding: 7px 0;
    margin-bottom: 10px;
    text-align: center;
    border-radius: 5px;
    background-color: #45464d;
    color: #fff;
    text-shadow: 1px 1px 2px #333;
    box-shadow: 1px 1px 3px #333;
}
.kids-panel .weeks .week .day>.daylabel {
    display: inline-block;
    writing-mode: vertical-lr;
    height: 140px;
    margin-right: 4px;
    margin-bottom: 0;
    padding: 0 !important;
}
.kids-panel .weeks .week .day.mon>label{
    background-color: #ff5859;
}
.kids-panel .weeks .week .day1label {
    background-color: #FFCC00 !important;
}

.kids-panel .weeks .week .day.tue>label{
    background-color: #ffad1d;
}
.kids-panel .weeks .week .day2label {
    background-color: #99CC00 !important;
}

.kids-panel .weeks .week .day.wed>label{
    background-color: #ffd700;
}
.kids-panel .weeks .week .day3label {
    background-color: #0099FF !important;
}

.kids-panel .weeks .week .day.thu>label{
    background-color: #0da873;
}
.kids-panel .weeks .week .day4label {
    background-color: #FF6666 !important;
}

.kids-panel .weeks .week .day.fri>label {
    background-color: #67b2e7;
}

.kids-panel .widget .weeks .week .day>.btn-add {
    display: none;
    text-align: center;
}


/*********  dabisu homes teaching    *************/

.kids-panel.lesson-hangul_home .indexbx,
.kids-panel.lesson-dabisukids_home .indexbx {
    background-color: transparent;
    border-radius: 0px;
    margin-bottom: 40px;
    text-align: left;
    padding: 30px 20px 0px;
    position: relative;
    box-shadow: 0 10px 0 #4c5273;
}

.kids-panel.lesson-hangul_home .cpanel .indexbx,
.kids-panel.lesson-dabisukids_home .cpanel .indexbx {
    padding-top: 0px;
}

.kids-panel.lesson-hangul_home .indexbx a,
.kids-panel.lesson-dabisukids_home .indexbx a {
    padding: 10px 20px;
    width: auto;
    background-color: #F9F9F9;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    font-size: 22px;
    color: #333;
    position: relative;
    bottom: -2px;
}

body .kids-panel.edit>.indexbx a.btn-new {
    display: inline-block;
}

.kids-panel.lesson-hangul_home .indexbx a.btn-new,
.kids-panel.lesson-dabisukids_home .indexbx a.btn-new {
    color: #da6969;
    display: none;
}

.kids-panel.lesson-hangul_home .indexbx a.active,
.kids-panel.lesson-dabisukids_home .indexbx a.active {
    background-color: #4c5273;
    color: #fff;
}

body .kids-panel.lesson-hangul_home .indexbx a.btn-wait,
body .kids-panel.lesson-dabisukids_home .indexbx a.btn-wait,
body .kids-panel.lesson-hangul_home .indexbx a.btn-lock,
body .kids-panel.lesson-dabisukids_home .indexbx a.btn-lock {
    color: #aaa;
}

.homeview .kids-panel .alert_popup {
    background-color: #F9F9F9;
    padding: 50px 0;
    border-radius: 10px;
}

.homeview .wrappanel>section.body>.rpanel .alert_popup .desc {
    line-height: 30px;
    font-size: 17px;
    color: #F44336;
    text-align: center;
}

.homeview .kids-panel .alert_popup .desc a.btn {}

.kids-panel .stepbx {}

.lesson-dabisukids_home2 .stepbx>h1::before,
.lesson-dabisukids_home .stepbx>h1::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 100px;
    background: url(/skins/default/images/home/kids/characters/cha_006.png) no-repeat center center/contain;
    top: -35px;
    left: 5px;
}

.lesson-hangul_home2 .stepbx>h1::before,
.lesson-hangul_home .stepbx>h1::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 100px;
    background: url(/skins/default/images/home/kids/hangul_char005.png) no-repeat center center/contain;
    top: -35px;
    left: 5px;
}

.lesson-panel .stepbx>h1 {
    position: relative;
    margin-top: 50px;
    padding-left: 90px;
    font-family: "Binggrae";
    font-weight: bold;
    font-size: 30px;
}

.lesson-panel .stepbx>.desc {
    padding-left: 90px;
}

.lesson-panel .stepbx>ul {
    text-align: center;
    padding: 10px 0px;
}

.lesson-panel .stepbx ul>li {
    position: relative;
    display: inline-block;
    margin: 10px;
}

.homeview .lesson-panel .stepbx ul>li {
    margin: 10px 20px;
}

.lesson-panel .stepbx.hangul ul>li {
    padding: 70px 0px 35px;
    width: 150px;
}

.lesson-dabisukids_home2 .stepbx ul>li::before,
.lesson-dabisukids_home .stepbx ul>li::before {
    content: "";
    display: inline-block;
    width: 120px;
    height: 120px;
    background-color: #ffbd78;
    border-radius: 50%;
}

.lesson-panel .stepbx ul>li:not(:last-child)::after {
    right: -30px;
}

.lesson-panel .stepbx ul>li:not(:last-child)::after {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: '\f0da';
    position: absolute;
    top: 30%;
    right: -20px;
    font-size: 30px;
    color: #aaa;
}

.lesson-hangul_home .stepbx ul>li:not(:last-child)::after {
    top: 60%;
    right: -18px;
}

.lesson-dabisukids_home2 .stepbx ul>li.step1::before,
.lesson-dabisukids_home .stepbx ul>li.step1::before {
    background: #f8c159 url(/skins/default/images/home/kids/characters/cha_001.png) no-repeat center center/60% auto;
}

.lesson-dabisukids_home2 .stepbx ul>li.step2::before,
.lesson-dabisukids_home .stepbx ul>li.step2::before {
    background: #4ebd5a url(/skins/default/images/home/kids/characters/cha_002.png) no-repeat center center/60% auto;
}

.lesson-dabisukids_home2 .stepbx ul>li.step3::before,
.lesson-dabisukids_home .stepbx ul>li.step3::before {
    background: #e96990 url(/skins/default/images/home/kids/characters/cha_003.png) no-repeat center center/60% auto;
}

.lesson-dabisukids_home2 .stepbx ul>li.step4::before,
.lesson-dabisukids_home .stepbx ul>li.step4::before {
    background: #4893d6 url(/skins/default/images/home/kids/characters/cha_004.png) no-repeat center center/60% auto;
}

.lesson-dabisukids_home2 .stepbx ul>li.step5::before,
.lesson-dabisukids_home .stepbx ul>li.step5::before {
    background: #aa5fdd url(/skins/default/images/home/kids/characters/cha_005.png) no-repeat center center/60% auto;
}

.lesson-hangul_home .stepbx ul>li {
    padding: 70px 0px 35px;
    width: 150px;
}

.lesson-hangul_home2 .stepbx ul>li.step1,
.lesson-hangul_home .stepbx ul>li.step1 {
    background: url(/skins/default/images/home/kids/hangul_001.png) no-repeat bottom center/100% auto, url(/skins/default/images/home/kids/hangul_char004.png) no-repeat top 20px center/40% auto;
}

.lesson-hangul_home2 .stepbx ul>li.step2,
.lesson-hangul_home .stepbx ul>li.step2 {
    background: url(/skins/default/images/home/kids/hangul_001.png) no-repeat bottom center/100% auto, url(/skins/default/images/home/kids/hangul_char001.png) no-repeat top center/35% auto;
}

.lesson-hangul_home2 .stepbx ul>li.step3,
.lesson-hangul_home .stepbx ul>li.step3 {
    background: url(/skins/default/images/home/kids/hangul_001.png) no-repeat bottom center/100% auto, url(/skins/default/images/home/kids/hangul_char002.png) no-repeat top center/40% auto;
}

.lesson-hangul_home2 .stepbx ul>li.step4,
.lesson-hangul_home .stepbx ul>li.step4 {
    background: url(/skins/default/images/home/kids/hangul_001.png) no-repeat bottom center/100% auto, url(/skins/default/images/home/kids/hangul_char003.png) no-repeat top center/48% auto;
}

.lesson-panel .stepbx ul>li>.no {
    position: absolute;
    top: -5px;
    left: -5px;
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    background-color: #ff8250;
    padding: 10px;
    border-radius: 25px;
    box-shadow: 1px 1px 1px #333;
}

.lesson-panel.lesson-hangul_home2 .stepbx ul>li>.no,
.lesson-panel.lesson-hangul_home .stepbx ul>li>.no {
    top: 0px;
    left: 0px;
    font-size: 20px;
    padding: 7px;
    background-color: #418c69;
}

.lesson-panel .stepbx ul>li>h5 {
    font-size: 17px;
}

.lesson-panel.lesson-hangul_home2 .stepbx ul>li>h5,
.lesson-panel.lesson-hangul_home .stepbx ul>li>h5 {
    color: #fff;
}

.lesson-panel.lesson-hangul_home2 .stepbx ul>li>.subject,
.lesson-panel.lesson-hangul_home .stepbx ul>li>.subject {
    color: #ffcb00;
}

.lesson-panel .stepbx ul>li>.subject {
    font-size: 17px;
    font-weight: 600;
}

.lesson-panel .commonbx>h1 {
    position: relative;
    padding-left: 110px;
    font-family: "Binggrae";
    font-weight: bold;
    font-size: 25px;
    padding-top: 15px;
}

.lesson-hangul_home .commonbx>h1 {
    padding-left: 90px;
}

.lesson-panel .commonbx>p.desc {
    padding-left: 110px;
}

.lesson-hangul_home .commonbx>p.desc {
    padding-left: 100px;
}

.lesson-panel .commonbx>.row {
    margin: 30px 10px 20px;
}

.lesson-panel .commonbx>h1::before {
    content: "";
    position: absolute;
    top: -15px;
    left: 0px;
    background: url(/skins/default/images/home/program/program_concept_deco01.png) no-repeat left top/contain;
    display: inline-block;
    width: 100px;
    height: 100px;
}

.lesson-hangul_home .commonbx>h1::before {
    background: url(/skins/default/images/home/kids/hangul_char005_1.png) no-repeat center top/contain;
}

.lesson-panel .commonbx .btn-add {
    padding: 7px 10px;
    border: 1px dashed #ddd;
    color: #d97979;
    border-radius: 5px;
    display: none;
    height: 150px;
    position: relative;
}

.lesson-panel .commonbx .btn-add>i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.lesson-panel.edit .commonbx .btn-add {
    display: block;
}

.lesson-panel .commonbx .item {
    height: 180px;
    position: relative;
    cursor: pointer;
    border-radius: 3px;
    box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1);
    margin-bottom: 15px;
}

.lesson-panel .commonbx>.items .title {
    text-align: center;
    font-weight: 500 !important;
}

.lesson-panel .commonbx .items .subject {
    text-align: center;
}

.kids-panel .widget.homeschool>.widget-header {
    border: none;
}

.kids-panel .widget.homeschool>.widget-header h2.title>.no {
    border-radius: 50%;
    position: absolute;
    top: -10px;
    left: 0px;
    width: 80px;
    line-height: 80px;
    padding: 0px;
}

.kids-panel .widget.homeschool .widget-header>h2.title {
    text-align: center;
    margin-left: 40px;
    background-color: #EFEFEF;
    border-radius: 40px;
    line-height: 60px;
}

.kids-panel .widget.homeschool>.widget-header>h2.title::after {
    content: none;
}

.kids-panel .widget.homeschool>.widget-header .control {
    margin-top: 20px;
    right: 30px;
    background-color: #fff;
}

.kids-panel .widget.homeschool>.widget-body .infobx {
    background-color: transparent;
    margin-top: 20px;
}

.kids-panel .widget.homeschool>.widget-body .infobx>.table {
    margin: 5px auto;
    width: 80%;
}

.kids-panel .widget.homeschool>.widget-body .infobx>.table td {
    vertical-align: middle;
}

.kids-panel .widget.homeschool>.widget-body .infobx>.table td .btn-add {
    background-color: #fff;
}

.kids-panel .widget.homeschool>.widget-body .infobx .ebook {
    width: 150px;
    min-height: 170px;
    position: relative;
}

.kids-panel .widget.homeschool>.widget-body .infobx .ebook .cover {
    width: 100%;
}

.kids-panel .widget.homeschool.dabisu .infobx .info {
    margin-left: 160px;
    padding: 0px;
}

.kids-panel .widget.homeschool>.widget-body .infobx .btn-new {
    margin: 0px auto;
    display: block;
    width: 80%;
    border: 1px dashed #ddd;
}

.kids-panel .widget.homeschool>.widget-body {
    position: relative;
}

.kids-panel .widget.homeschool>.widget-body .weeks {
    border: 2px solid #ff8418;
    border-radius: 30px;
}

.kids-panel .widget.homeschool>.widget-body .weeks>a.btn-new {
    display: none;
    line-height: 35px;
    border: 1px dashed #ccc;
    margin: 10px 15px;
    border-radius: 30px;
}

.edit .widget.homeschool>.widget-body .weeks>a.btn-new {
    display: block !important;
}

.kids-panel .widget.homeschool>.widget-body .week {
    padding: 10px;
}

.kids-panel .widget.homeschool>.widget-body .week .content {
    display: none;
}

.kids-panel .widget.homeschool>.widget-body .week.active .content {
    display: block;
}

.kids-panel .widget.homeschool>.widget-body .week>h3 {
    line-height: 45px;
    text-align: center;
    color: #fff;
    background-color: #ff8418;
    border-radius: 50px;
    cursor: pointer;
}

.kids-panel .widget.homeschool>.widget-body .week>h3>.btn-expand {
    color: #fff;
    position: absolute;
    left: 20px;
    font-size: 35px;
}

.kids-panel .widget.homeschool>.widget-body .week.active>h3>.btn-expand>i:before {
    content: '\f056';
}

.kids-panel .widget.homeschool>.widget-body .week>h3>.no {
    background-color: transparent;
}

.kids-panel .widget.homeschool>.widget-body .week i>h3>.title {
    font-size: 17px;
}

.kids-panel .widget.homeschool>.widget-body .week>h3>.control {
    right: 20px;
}

.kids-panel .widget.homeschool>.widget-body .week .content {
    padding: 10px 20px;
}

.kids-panel .widget.homeschool>.widget-body .resrcbx .item {
    box-shadow: none;
    float: none;
    width: auto;
    display: block;
    margin: 0px;
}

.edit .widget.homeschool>.widget-body .resrcbx .item.btn-add {
    display: block !important;
}

.kids-panel .widget.homeschool>.widget-body .resrcbx .item.btn-add {
    display: none;
}

.kids-panel .widget.homeschool>.widget-body .week .box {
    position: relative;
    border: 2px solid #ef5282;
    margin-top: 30px;
    border-radius: 20px;
    padding: 0px 20px 20px;
}

.kids-panel .widget.homeschool>.widget-body .week h5 {
    position: relative;
    top: -25px;
    margin: 0 auto;
    overflow: initial !important;
}

.kids-panel .widget.homeschool.dabisu>.widget-body .week .step1 h5>span {
    background-color: #ffa700;
}

.kids-panel .widget.homeschool.dabisu>.widget-body .week .step2 h5>span {
    background-color: #1ac62d;
}

.kids-panel .widget.homeschool.dabisu>.widget-body .week .step3 h5>span {}

.kids-panel .widget.homeschool.dabisu>.widget-body .week .step4 h5>span {
    background-color: #4796db;
}

.kids-panel .widget.homeschool.dabisu>.widget-body .week .step5 h5>span {
    background-color: #994ace;
}

.kids-panel .widget.homeschool>.widget-body .week .step1 .box {
    border-color: #ffa700;
}

.kids-panel .widget.homeschool>.widget-body .week .step2 .box {
    border-color: #1ac62d;
}

.kids-panel .widget.homeschool>.widget-body .week .step3 .box {}

.kids-panel .widget.homeschool>.widget-body .week .step4 .box {
    border-color: #4796db;
}

.kids-panel .widget.homeschool>.widget-body .week .step5 .box {
    border-color: #994ace;
}

.kids-panel .widget.homeschool>.widget-body .week .content .resrcbx {
    margin-left: 0px;
    margin-top: 40px;
}

.kids-panel .widget.homeschool>.widget-body .week .content .step5 .table {
    margin-top: 40px;
}

.kids-panel .widget.homeschool>.widget-body .week .content .step5 .table thead>tr>th {
    background-color: #F9F9F9;
    text-align: center;
}

.kids-panel .widget.homeschool>.widget-body .week .step1 h5>.no {
    background: #ffa700 url(/skins/default/images/home/kids/characters/cha_001.png) no-repeat center center/80% auto;
}

.kids-panel .widget.homeschool>.widget-body .week .step2 h5>.no {
    background: #1ac62d url(/skins/default/images/home/kids/characters/cha_002.png) no-repeat center center/70% auto;
}

.kids-panel .widget.homeschool>.widget-body .week .step3 h5>.no {
    background: #ef5282 url(/skins/default/images/home/kids/characters/cha_003.png) no-repeat center center/70% auto;
}

.kids-panel .widget.homeschool>.widget-body .week .step4 h5>.no {
    background: #4796db url(/skins/default/images/home/kids/characters/cha_004.png) no-repeat center center/70% auto;
}

.kids-panel .widget.homeschool>.widget-body .week .step5 h5>.no {
    background: #994ace url(/skins/default/images/home/kids/characters/cha_005.png) no-repeat center center/70% auto;
}

.kids-panel.lesson-hangul_home .widget.homeschool>.widget-body .week .step1 h5>.no {
    background: transparent url(/skins/default/images/home/kids/hangul_char004.png) no-repeat center center/80% auto;
}

.kids-panel.lesson-hangul_home .widget.homeschool>.widget-body .week .step2 h5>.no {
    background: transparent url(/skins/default/images/home/kids/hangul_char001.png) no-repeat center center/60% auto;
}

.kids-panel.lesson-hangul_home .widget.homeschool>.widget-body .week .step3 h5>.no {
    background: transparent url(/skins/default/images/home/kids/hangul_char002.png) no-repeat center center/70% auto;
}

.kids-panel.lesson-hangul_home .widget.homeschool>.widget-body .week .step4 h5>.no {
    background: transparent url(/skins/default/images/home/kids/hangul_char003.png) no-repeat center center/70% auto;
}

.kids-panel.lesson-hangul_home .widget.homeschool>.widget-body .week h5 {
    background: transparent url(/skins/default/images/home/kids/hangul_002.png) no-repeat center center/80% 100%;
    color: #fff;
}

.kids-panel .widget.homeschool>.widget-body .week h5>.no {
    position: absolute;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    top: -7px;
    opacity: 1;
    z-index: 1;
}

.kids-panel.lesson-hangul_home .widget.homeschool>.widget-body .week h5>.no {
    top: 0px;
    border-radius: 0px;
}

.kids-panel .widget.homeschool>.widget-body .week h5>.title {
    display: block;
    width: 100%;
    line-height: 25px;
    font-size: 17px;
    padding-left: 60px;
    opacity: 1;
    font-family: "Binggrae";
    font-weight: bold;
}

.kids-panel.lesson-hangul_home .widget.homeschool>.widget-body .week h5>.title {
    line-height: 50px;
}

.kids-panel .widget.homeschool>.widget-body .week .box p {
    margin: 0px;
    min-height: 135px;
    cursor: pointer;
    font-size: 15px;
    line-height: 22px;
}

.kids-panel .widget.homeschool .widget-body .btn-add {
    background-color: #fff;
}


/********* dabisukids template     *************/

.kids-panel .widget.dabisukids>.widget-header {
    border: none;
}

.kids-panel .widget.dabisukids>.widget-header>h2.title>.no {
    border-radius: 50%;
    position: absolute;
    top: -10px;
    left: 0px;
    width: 80px;
    line-height: 80px;
    padding: 0px;
}

.kids-panel .widget.dabisukids>.widget-header>h2.title {
    text-align: center;
    margin-left: 40px;
    background-color: #EFEFEF;
    border-radius: 40px;
    line-height: 60px;
}

.kids-panel .widget.lessonbx.dabisukids>.widget-header::after {
    content: none;
}

.kids-panel .widget.dabisukids>.widget-header .control {
    margin-top: 10px;
    right: 30px;
    background-color: #fff;
}

.widget.dabisukids .infobx {
    margin: 30px 0 20px;
    padding: 10px;
    border-radius: 5px;
    background-color: #fff;
    min-height: 180px;
}

.homeview .widget.dabisukids .infobx .wrap {
    min-height: 180px;
    padding: 0 160px;
}

.widget.dabisukids .infobx .ebook {
    position: absolute;
    left: 0;
    width: 150px;
    height: 100%;
    min-height: auto;
    float: none;
}

.widget.dabisukids .infobx .ebook .cover {
    width: 100%;
    height: 100%;
    min-height: 180px;
    background-color: #fff;
    position: relative;
    border: 1px dashed #ddd;
}

.widget.dabisukids .infobx .guide {
    position: absolute;
    right: 0;
    width: 150px;
    height: 100%;
}

.widget.dabisukids .infobx .guide .resrcbx {
    margin: 0;
    padding: 0;
    height: 100%;
}

.widget.dabisukids .infobx .guide a.btn-add {
    box-shadow: none;
    width: auto;
    margin: 0px;
}

.widget.dabisukids .infobx .guide a.btn-add:hover {
    box-shadow: none;
}

.widget.dabisukids .infobx .attachment:first-child {}

.widget.dabisukids .infobx .data {
    padding: 0;
}

.widget.dabisukids .infobx .data table {
    margin: 0px;
}

.widget.dabisukids .infobx .data table th {
    background-color: #f9f9f9;
}

.kids-panel .widget.dabisukids .nav-tabs {
    text-align: center;
    border: none;
    background-color: transparent;
    box-shadow: none;
    margin: 0px 0px -3px 0px;
    min-height: 46px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 50px;
}
.kids-panel .widget.dabisukids .body-2024 .nav-tabs {
    margin: 0;
    position: absolute;
    left: -60px;
    height: 50px;
    margin-top: 40px;
    padding: 0px;
    overflow: initial;
}
.kids-panel .widget.dabisukids .body-2024 .nav-tabs>li {
    display: block;
    z-index: 1;
}
.kids-panel.edit .widget.dabisukids .nav-tabs>li {
    margin-bottom: -1px;
}

.kids-panel .widget.dabisukids .nav-tabs>li>a {
    border: 2px solid transparent;
    border-radius: 10px 10px 0 0;
    background-color: #EFEFEF;
    padding: 10px 20px;
}
.kids-panel .widget.dabisukids .body-2024 .nav-tabs>li>a {
    padding: 10px !important;
    font-size: 14px;
    border-radius: 10px 0 0 10px;
    width: 60px;
    margin-top: 5px;
}
.kids-panel .widget.dabisukids .nav-tabs>li.active>a {
    border-top: 2px solid #ff8418;
    border-left: 2px solid #ff8418;
    border-right: 2px solid #ff8418;
    border-bottom: none;
    background-color: #fff;
    position: relative;
    z-index: 1;
    font-weight: 600;
    padding: 10px 35px;
}
.kids-panel .widget.dabisukids .body-2024 .nav-tabs>li.active>a {
    border-top: 2px solid #ff8418;
    border-left: 2px solid #ff8418;
    border-bottom: 2px solid #ff8418;
    border-right: none;
    border-radius: 10px 0 0 10px;
    background-color: #fff;
    position: relative;
    z-index: 1;
    right: -2px;
    font-weight: 600;
    padding: 10px !important;
    font-size: 14px;
    width: 60px;
}
.kids-panel .widget.dabisukids .nav-tabs>li>a.task {
    padding: 10px 15px;
}

.kids-panel .widget.dabisukids .nav-tabs>li>a.btn-new {
    display: none;
}

.kids-panel.edit .widget.dabisukids .nav-tabs>li>a.btn-new {
    display: inline-block;
}

.kids-panel .widget.dabisukids .nav-tab-content {
    min-height: 100px;
}

.kids-panel .widget.dabisukids>.widget-body .weeks>.btn-new {
    position: absolute;
    top: 0px;
    right: 30px;
    border: 1px dashed #ccc;
    color: #d97979;
}

.kids-panel .widget.dabisukids>.widget-body .week {
    padding: 5px;
    border: 2px solid #ff8418;
    border-radius: 30px;
    background-color: #fff;
}

.kids-panel .widget.dabisukids>.widget-body .week .box {
    position: relative;
    border: 2px solid #ef5282;
    margin-top: 30px;
    border-radius: 20px;
    padding: 0px 20px 20px;
    background-color: #fff;
}

.kids-panel .widget.dabisukids>.widget-body .week>h3 {
    line-height: 25px;
    text-align: center;
    color: #fff;
    background-color: #ff8418;
    border-radius: 50px;
    padding: 10px 25px;
    cursor: pointer;
    margin-bottom: 10px;
    position: relative;
}

.kids-panel .widget.dabisukids>.widget-body .week h5 {
    position: relative;
    top: -20px;
    margin: 0 auto;
    overflow: initial !important;
}

.kids-panel .widget.dabisukids>.widget-body .week .step1 h5>span {
    background-color: #ffa700;
}

.kids-panel .widget.dabisukids>.widget-body .week .step2 h5>span {
    background-color: #1ac62d;
}

.kids-panel .widget.dabisukids>.widget-body .week .step3 h5>span {}

.kids-panel .widget.dabisukids>.widget-body .week .step4 h5>span {
    background-color: #4796db;
}

.kids-panel .widget.dabisukids>.widget-body .week .step5 h5>span {
    background-color: #994ace;
}

.kids-panel .widget.dabisukids>.widget-body .week h5 .control {
    position: absolute;
    top: 5px;
    right: 20px;
    display: none
}

.kids-panel.edit .widget.dabisukids>.widget-body .week h5 .control {
    display: inline-block;
}

.kids-panel .widget.dabisukids>.widget-body .week .step1 .box {
    border-color: #ffa700;
}

.kids-panel .widget.dabisukids>.widget-body .week .step2 .box {
    border-color: #1ac62d;
}

.kids-panel .widget.dabisukids>.widget-body .week .step3 .box {}

.kids-panel .widget.dabisukids>.widget-body .week .step4 .box {
    border-color: #4796db;
}

.kids-panel .widget.dabisukids>.widget-body .week .step5 .box {
    border-color: #994ace;
}

.kids-panel .widget.dabisukids>.widget-body .week>h3>.no {
    background-color: transparent;
}

.kids-panel .widget.dabisukids>.widget-body .week i>h3>.title {
    font-size: 17px;
}

.kids-panel .widget.dabisukids>.widget-body .week>h3>.control {
    right: 20px;
}

.kids-panel .widget.dabisukids>.widget-body .week .content .resrcbx {
    margin-left: 0px;
    margin-top: 40px;
}

.kids-panel .widget.dabisukids>.widget-body .week .resrcbx .item {
    box-shadow: none;
    float: none;
    width: auto;
    display: block;
    margin: 0px;
    height: 185px;
}

.kids-panel .widget.dabisukids>.widget-body .week .resrcbx .item.btn-add {
    display: none;
}

.kids-panel.edit .widget.dabisukids>.widget-body .week .resrcbx .item.btn-add {
    display: block;
}

.kids-panel .widget.dabisukids>.widget-body .week h5>.no,
.kids-panel .widget.dabisukids>.widget-body .week h5>.noitem {
    position: absolute;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    top: -7px;
    opacity: 1;
    z-index: 1;
}

.kids-panel .widget.dabisukids>.widget-body .week .step1 h5>.no {
    background: #ffa700 url(/skins/default/images/home/kids/characters/cha_001.png) no-repeat center center/80% auto;
}

.kids-panel .widget.dabisukids>.widget-body .week .step2 h5>.no {
    background: #1ac62d url(/skins/default/images/home/kids/characters/cha_002.png) no-repeat center center/70% auto;
}

.kids-panel .widget.dabisukids>.widget-body .week .step3 h5>.no {
    background: #ef5282 url(/skins/default/images/home/kids/characters/cha_003.png) no-repeat center center/70% auto;
}

.kids-panel .widget.dabisukids>.widget-body .week .step4 h5>.no {
    background: #4796db url(/skins/default/images/home/kids/characters/cha_004.png) no-repeat center center/70% auto;
}

.kids-panel .widget.dabisukids>.widget-body .week .step5 h5>.no {
    background: #994ace url(/skins/default/images/home/kids/characters/cha_005.png) no-repeat center center/70% auto;
}

/** 다비키즈-한글방글-선생님방*/

.kids-panel .widget.dabisukids>.widget-body .week .step1 h5>.noitem {
    background: transparent url(/skins/default/images/home/kids/hangul_char001.png) no-repeat center center/80% auto;
}

.kids-panel .widget.dabisukids>.widget-body .week .step2 h5>.noitem {
    background: transparent url(/skins/default/images/home/kids/hangul_char002.png) no-repeat center center/70% auto;
}

.kids-panel .widget.dabisukids>.widget-body .week .step3 h5>.noitem {
    background: transparent url(/skins/default/images/home/kids/hangul_char003.png) no-repeat center center/70% auto;
}

.kids-panel .widget.dabisukids>.widget-body .week .step4 h5>.noitem {
    background: transparent url(/skins/default/images/home/kids/hangul_char004.png) no-repeat center center/70% auto;
}

.kids-panel .widget.dabisukids>.widget-body .week .step5 h5>.noitem {
    background: transparent url(/skins/default/images/home/kids/hangul_char005.png) no-repeat center center/70% auto;
}

.kids-panel .widget.dabisukids>.widget-body .week h5>.title {
    position: relative;
    display: block;
    width: 100%;
    line-height: 25px;
    font-size: 17px;
    opacity: 1;
    font-family: "Binggrae";
    font-weight: bold;
    text-align: initial;
    color: #fff;
    border-radius: 20px;
    padding: 7px 7px 7px 60px;
    background-color: #ef5282;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kids-panel .widget.dabisukids>.widget-body .week h5 > .option {
    right: 10px;
}

.kids-panel .widget.dabisukids>.widget-body .week .box p {
    margin: 0px;
    min-height: 135px;
    cursor: pointer;
    font-size: 15px;
    line-height: 22px;
}

.kids-panel .widget.dabisukids>.widget-body .week .content .resrcbx {
    margin-left: 0px;
    margin-top: 35px;
    padding: 0px;
}

.kids-panel.edit .widget.dabisukids>.widget-body .week .content .task.btn-add,
.kids-panel .widget.dabisukids>.widget-body .week .content .task.btn-new {
    margin: 10px 0;
    border: 1px dashed #ff8418;
    border-radius: 30px;
    text-align: center;
    padding: 15px 0;
    display: none;
    color: #ff8418;
    float: left;
    background-color: #fff;
    width: 100%;
}

.kids-panel.edit .widget.dabisukids>.widget-body .week .content .task.btn-add,
.kids-panel.edit .widget.dabisukids>.widget-body .week .content .task.btn-new {
    display: block;
}

.classroomview .kids-panel:not(.expand) .widget.dabisukids>.widget-body .week .content .task.btn-new {
    float: none;
    width: initial;
    line-height: initial;
}

.kids-panel .widget.dabisukids>.widget-body .week .content .task.btn-new:hover {
    font-size: 130%;
}

.kids-panel .widget.dabisukids>.widget-body .expert {
    margin: 30px 0;
    border: 2px solid #834089;
    padding: 5px;
    border-radius: 25px;
}

.kids-panel .widget.dabisukids>.widget-body .expert h5 {
    font-size: 17px;
    font-weight: 600;
    padding: 12px 20px 10px;
    margin: 0 0 10px;
    color: #fff;
    background-color: #834089;
    border-radius: 25px;
}


/*********      *************/

.lesson-panel .item .icon {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    color: #fff;
    border-radius: 5px;
    opacity: .5;
    background-color: #333;
    padding: 10px;
    display: none;
}

.lesson-panel .item:hover .icon {
    display: inline-block;
}

.lesson-panel .item .icon>a {
    color: #fff;
}

.kids-panel .widget .widget-body .item .title {
    position: absolute;
    left: 0px;
    bottom: 0px;
    display: block;
    padding: 5px;
    background-color: rgba(0, 0, 0, .5);
    width: 100%;
    color: #fff;
    font-size: 13px;
    font-weight: 300;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.kids-panel .widget .widget-body .item:hover .title {
    opacity: 1;
}

.kids-panel .widget.english .widget-body .week .item .title,
.kids-panel .widget.dabisukids .widget-body .week .days4 .item .title {
    display: none;
}

.widget .widget-body .resrcbx:not(td) .btn-add>i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.widget.lessonbx .widget-body .week h3 {
    font-family: "Binggrae";
    font-weight: bold;
    font-size: 16px;
    margin: 0px;
    padding: 7px 0px;
    color: #000;
    position: relative;
    border-bottom: 1px solid #ddd;
}

.widget.lessonbx .widget-body .control {
    position: absolute;
    top: 5px;
    right: 0px;
    display: none;
    z-index: 99;
}

.lesson-panel.edit .widget.lessonbx .widget-body .control {
    display: inline-block;
}

.widget.lessonbx .widget-body .week h3 .no {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    margin-right: 5px;
    display: inline-block;
    padding: 0px 10px;
    line-height: 25px;
    text-align: center;
    background-color: #00bbb4;
    color: #fff;
}

.widget.lessonbx .widget-body .week h5 {
    font-size: 14px;
}

.widget.lessonbx.dabisu .widget-body .week h5>span {
    display: inline-block;
    padding: 7px 7px 7px 15px;
    background-color: #ef5282;
    width: 120px;
    color: #fff;
    border-radius: 20px;
}

.widget.lessonbx .widget-body .week .content {
    padding: 5px;
    min-height: 70px;
    position: relative;
}

.widget.lessonbx .widget-body .week .content .tabs {
    padding: 0 20px 0 50px;
}

.widget.lessonbx .widget-body .week .content .tabs > li {
    width: 20%;
    position: relative;
}

.widget.lessonbx .widget-body .week .content .tabs > li.active {
    width: 40%;
}

.widget.lessonbx .widget-body .week .content .tabs > li .control {
    top: 10px;
    right: 20px;
    display: none;
}

.lesson-panel.edit .widget.lessonbx .widget-body .week .content .tabs > li.active .control {
    display: inline-block;
}

.kids-panel .widget.dabisukids>.widget-body .content .btnPlayAll {
    border-radius: 25px;
    background-color: #ff8418;
    color: #fff;
    line-height: 17px;
    margin-bottom: 5px;
}

.widget.lessonbx .widget-body .week .content .tabs > li > h4,
.kids-panel .widget.dabisukids>.widget-body .content .sections .h4 {
    display: block;
    background-color: #ff;
    font-size: 17px;
    line-height: 40px;
    text-align: center;
    color: #999;
    padding: 5px 5px 0;
    margin: 0 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: relative;
    top: 1px;
    border: 1px solid transparent;
    cursor: pointer;
}

.widget.lessonbx .widget-body .week .content .tabs>li.active>h4,
.kids-panel .widget.dabisukids>.widget-body .content .sections .h4 {
    background-color: #fff2bb;
    color: #000;
    font-weight: 600;
    z-index: 1;
}

.kids-panel .widget.dabisukids>.widget-body .tabs>li .btnPlayAll {
    position: absolute;
    left: 5px;
    border-radius: 25px;
    background-color: #ff8418;
    color: #fff;
    line-height: 17px;
    display: none;
}

.widget.lessonbx .widget-body .week .content .tabs>li.active .btnPlayAll {
    display: inline-block;
}

.widget.lessonbx .widget-body .week .content .step.btn-new {
    padding: 10px 15px;
    border: 1px dashed #ff8418;
    color: #d97979;
    border-radius: 5px;
    display: none;
    background-color: #fff;
    position: absolute;
    top: 10px;
    left: 10px;
}

.lesson-panel.edit .widget.lessonbx .widget-body .week .content .step.btn-new {
    display: inline-block;
}

.widget.lessonbx .widget-body .week .content .sections {
    display: none;
    background-color: #fff2bb;
    padding: 7px;
    border-radius: 20px;
    position: relative;
    min-height: 300px;
    z-index: 1;
}

.widget.lessonbx .widget-body .week .content .sections.active {
    display: block;
}

.widget.lessonbx .widget-body .week .content .section {
    width: 50%;
    float: left;
    padding: 5px;
}

.dabisuview .widget.lessonbx .widget-body .week .content.studentmode .section {
    float: initial;
    width: auto;
}

.classroomview .lesson-panel:not(.expand) .widget.lessonbx .widget-body .week .content .section {
    float: none;
    width: auto;
}

.widget.lessonbx .widget-body .week .content .wrapbx {
    border: 4px solid #37a7c2;
    border-radius: 10px;
    padding: 10px;
    position: relative;
    min-height: 300px;
}

.widget.lessonbx .widget-body .week .content .wrapbx .info {
    padding-right: 270px;
}

.widget.lessonbx .widget-body .week .content .wrapbx .ebook {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.widget.lessonbx .widget-body .week .content .wrapbx .ebook i.fa-plus {
    position: absolute;
    top: 50%;
    left: 50px;
    transform: translate(-50%, -50%);
    display: none;
}

.edit .widget.lessonbx .widget-body .week .content .wrapbx .ebook i.fa-plus {
    display: inline-block;
}

.widget.lessonbx .widget-body .week .content .wrapbx label {
    background-color: #5b8ddb;
    color: #fff;
    border-radius: 15px;
    padding: 5px 15px;
}

.widget.lessonbx .widget-body .week .content .wrapbx .ebook .cover {
    float: left;
    width: 180px;
    height: 250px;
    padding: 5px;
    position: relative;
    cursor: pointer;
    border-radius: 3px;
    box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1);
}

.edit .widget.lessonbx .widget-body .week .content .wrapbx .ebook .cover {
    display: inline-block;
}

.widget.lessonbx .widget-body .week .content .wrapbx .ebook .cover>i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.widget.lessonbx .widget-body .week .content .wrapbx .ebook .thumbs {
    float: left;
    width: 70px;
    height: 250px;
}

.widget.lessonbx .widget-body .week .content .wrapbx .ebook .thumbs .slick-slide {
    height: 100px;
    margin-bottom: 5px;
    cursor: pointer;
}

.widget.lessonbx .widget-body .week .content .wrapbx .ebook .thumbs .slick-arrow {
    display: block;
    text-align: center;
    cursor: pointer;
}

.widget.lessonbx .widget-body .week .content .wrapbx .ebook .thumbs .slick-arrow:first-child {
    margin: 2px 0;
}

.widget.lessonbx .widget-body .week .content .wrapbx .ebook .thumbs>img {
    width: 100%;
    margin-bottom: 5px;
    cursor: pointer;
}

.widget.lessonbx .widget-body .week .content .wrapbx .descbx {
    min-height: 20px;
    margin: 5px;
}

.edit .widget.lessonbx .widget-body .week .content .wrapbx .descbx {
    cursor: pointer;
}

.widget.lessonbx .widget-body .week .content .wrapbx .descbx.nodata {
    color: #999;
    font-size: 12px;
}

.widget.lessonbx .widget-body .week .content .wrapbx .descbx.nodata::before {
    content: '클릭해서 내용을 입력해주세요.';
}

.lesson-panel .smry {
    font-size: 14px;
    font-weight: 300;
    padding: 5px;
}

.lesson-panel .ratebx {
    padding: 30px 30px 10px;
    white-space: nowrap;
}

.lesson-panel .ratebx .indicator {
    background-color: #d9564c;
}

.lesson-panel .ratebx .indicator:before {
    border-color: #d9564c transparent transparent transparent;
}

.lesson-panel .lessonusers .user.expire {
    opacity: .4;
}

.lesson-panel .lessonusers .user .thumb {
    float: none;
    display: inline-block;
    overflow: hidden;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
}

.lesson-panel .ratebx .progress .status {
    position: absolute;
    right: 20px;
    line-height: 20px;
    font-weight: 600;
    color: #777;
    display: none;
}

.lesson-panel .ratebx>.desc {
    margin-top: 5px;
    font-weight: 300;
}

.lesson-panel .newbox {
    min-height: 50px;
    cursor: pointer;
    background-color: #F5F5F5;
    display: none;
}

.lesson-panel.edit .newbox {
    display: block;
}

.lesson-panel .newbox:hover {
    border-color: #f56b6b;
    background-color: #fcf3cb;
    color: #000;
}

.widget .widget-header {
    border-bottom: 1px solid #eee;
    position: relative;
    padding: 0px;
}

.widget .widget-header.p5 {
    padding: 5px;
}

.widget .widget-header .input-xs {
    padding: 3px 10px;
    font-size: 12px;
}

.widget.lessonbx .widget-header .control {
    position: absolute;
    top: 0px;
    right: 5px;
    display: none;
}

.dashboard .widget .table .notb>th,
.dashboard .widget .table .notb>td {
    border-color: transparent;
}

.widget.edit .widget-header .control,
.lesson-panel.edit .widget.lessonbx .widget-header .control {
    display: inline-block;
}

.widget.lessonbx .widget-header .control>.btn {
    background-color: transparent;
}

.widget.lessonbx>.widget-body>.prop {
    background-color: #F9F9F9;
    padding: 5px;
    line-height: 25px;
}

.widget.lessonbx>.widget-body>.desc {
    padding: 5px;
    line-height: 25px;
    font-weight: 300;
}

.widget.lessonbx>.widget-body table {
    font-size: 14px;
}

.widget[type=kids] table .items:not(.resrcbx) .item {
}

.lesson-dabisukids .widget .infobx table .items:not(.resrcbx) .item {
    width: initial;
}

.widget[type=kids] .items:not(.resrcbx) .item {
    position: relative;
    display: inline-block;
    padding: 7px;
    border: 1px solid rgb(221, 221, 221);
    border-radius: 10px;
    cursor: pointer;
    background-color: rgb(245, 245, 245);
}

.widget[type="kids"] .infobx .items:not(.resrcbx) .item {
    background-color: #fff;
}

.widget[type=kids] td.items .item {
    margin-bottom: 10px;
    padding: 10px;
    text-align: center;
}

.widget .infobx {
    position: relative;
    margin-bottom: 20px;
}

.widget .infobx .ebook {
    float: left;
    width: 190px;
    min-height: 270px;
}

.widget .infobx .ebook .cover {
    position: absolute;
    top: 0px;
    width: 190px;
    height: 100%;
    cursor: pointer;
    font-size: 20px;
}

.widget .infobx .ebook i.fa-plus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #d97979;
    font-size: 13px;
    display: none;
}

.lesson-panel.edit .widget .infobx .ebook i.fa-plus {
    display: inline-block;
}

.widget.dabisu .infobx .info {
    margin-left: 200px;
    padding: 10px;
    /*overflow: hidden;*/
}

.widget .infobx .info .desc {
    padding: 5px 0;
    margin-bottom: 5px;
}

.widget .infobx .info .desc>label {
    font-family: "Binggrae";
    font-weight: bold;
    font-size: 17px;
    display: block;
    margin-bottom: 10px;
}

.widget .infobx .attachment {
    padding: 5px 0;
}

.widget .infobx .attachment>label {
    background-color: #2f415e;
    color: #fff;
    text-align: center;
    padding: 2px 10px;
    border-radius: 5px;
    display: block;
}

.widget .infobx .attachment .items {
    display: inline-block;
}

.widget.hangul .linkbx {
    padding-top: 10px;
}

.widget.hangul .linkbx .btn {
    width: 100%;
    border-radius: 10px;
    border-width: 3px;
    border: 2px solid #5b8ddb;
    padding-left: 70px;
    text-align: left;
    height: 64px;
}

.widget.hangul .linkbx .btn.btn-new {
    border-style: dashed;
    padding: 0px;
    text-align: center;
    line-height: 60px;
    color: #d97979;
    border-color: #aaa;
    display: none;
}

.lesson-panel.edit .widget.hangul .linkbx .btn.btn-new {
    display: block;
}

.widget.hangul .linkbx .btn i.fa-folder {
    position: absolute;
    left: 30px;
    top: 55%;
    transform: translateY(-50%);
}

.widget.hangul .linkbx .btn span {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
}

.widget.hangul .linkbx .btn label {
    font-family: "Binggrae";
    font-weight: bold;
    display: block;
    margin: 0px;
}

.widget.lessonbx.lock {}

.widget.lessonbx .list {}

.widget.lessonbx .list .lesson {
    position: relative;
    padding: 10px 0px;
    overflow: hidden;
    cursor: pointer;
}

.tplbase .widget.lessonbx .list .lesson {
    padding: 10px 5px;
}

.tplbase .widget.lessonbx .list .lesson:not(.new)::before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 70px;
    border: 1px dashed #aaa;
    /*height: 17px;*/
    height: 100%;
}

.tplbase .widget.lessonbx .list .lesson:not(.new):first-child::before {
    top: 10px;
}

.tplbase .widget.lessonbx .list .lesson:not(.new):last-child::before {
    top: -10px !important;
}

.tplbase .widget.lessonbx .list .lesson:not(.new)+.lesson:not(.new)::before {
    top: 0px;
}

.widget.lessonbx.lock .list .lesson:not(.preview) {
    cursor: not-allowed;
}

.widget.lessonbx.lock .list .lesson:not(.preview) .thumb::after {
    content: "\f023";
}

.widget.lessonbx .task.new,
.widget.lessonbx .list .lesson.new {
    display: none;
}

.lesson-panel.edit .widget.lessonbx .task.new,
.lesson-panel.edit .widget.lessonbx .list .lesson.new {
    display: inline-block;
}

.widget.lessonbx .task>.status,
.widget.lessonbx .list .lesson>.status {
    width: 50px;
    height: 50px;
    margin: 0px 20px;
    float: left;
    position: relative;
    z-index: 1;
}

.tplbase .widget.lessonbx .list .lesson>.status {
    margin: 0px 40px;
}

.widget.lessonbx .lesson .thumb {
    height: 51px;
    width: 90px;
    border-radius: 5px;
}

.tplbase .widget.lessonbx .lesson .thumb {
    width: 130px;
    height: 70px;
    z-index: 1;
    background-color: #F9F9F9;
}

.tplbase .widget.lessonbx .lesson.epaper .thumb,
.tplbase .widget.lessonbx .lesson.paper .thumb {
    background-size: contain !important;
    background-color: #F9F9F9 !important;
}

.tplbase .widget.lessonbx .lesson .thumb>i {
    font-size: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.widget.lessonbx .task>.status>.circle,
.widget.lessonbx .list .lesson>.status>.circle {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    border: 2px solid #ccc;
    background-color: #f0f0f0;
    text-align: center;
    line-height: 55px;
    position: relative;
    color: #ccc;
}

.widget.lessonbx .list .lesson.clinic>.status .circle {
    background-color: #fff;
}

.widget.lessonbx .task.new>.status .circle,
.widget.lessonbx .list .lesson.new>.status .circle {
    background-color: #fff;
    border-color: #f69a9a;
    color: #f69a9a;
}

.widget.lessonbx .task.new>.status .circle,
.widget.lessonbx .task.new>.status:before,
.widget.lessonbx .list .lesson.new>.status .circle,
.widget.lessonbx .list .lesson.new>.status:before,
.widget.lessonbx .list .lesson.clinic>.status .circle,
.widget.lessonbx .list .lesson.clinic>.status:before,
.widget.lessonbx .list .lesson.clinic>.status:after {
    border-style: dotted;
}

.widget.lessonbx .list .lesson>.option {
    position: absolute;
    top: 0px;
    right: 0px;
    display: none;
    height: 100%;
    font-size: 0px;
}

.widget.lessonbx .list .lesson>.option>a {
    height: 100%;
    display: inline-block;
    text-align: center;
    padding: 17px 15px;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
}

.tplbase .widget.lessonbx .list .lesson>.option>a {
    padding: 30px 15px;
}

.widget.lessonbx .list .lesson>.option>a:first-child {
    background-color: #f8bb61;
}

.widget.lessonbx .list .lesson>.option>a:last-child {
    background-color: #f86b6b;
}

.widget.lessonbx .list .lesson>.option>a>span {
    display: table-cell;
    padding: 2px 0px;
}

.widget.lessonbx .list .lesson>.option>.btn {
    background-color: transparent;
}

.widget.lessonbx .list .lesson>.option>.btn>i {
    cursor: pointer;
    font-size: 15px;
    color: #333;
}

.widget.lessonbx .list .lesson:not(.new):hover {
    background-color: #F0F0F0;
}

body .mode-pc .lesson-panel.edit .widget.lessonbx .list .lesson:hover>.option {
    display: inline-block;
}

.widget.lessonbx .list .lesson:hover>.status .circle {
    color: #333;
}

.widget.lessonbx .list .lesson.new:hover>.status .circle {
    background-color: #fcf3cb;
    border-color: #e75e5e;
    color: #e75e5e;
}

.widget.lessonbx .list .lesson>.status:before {
    content: "";
    display: block;
    position: absolute;
    top: -15px;
    left: 50%;
    border: 0px solid #ccc;
    border-width: 0 0 0 2px;
    width: 1px;
    /*height: 17px;*/
    height: 100%;
}

.widget.lessonbx .list .lesson>.status:after {
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    border: 0px solid #ccc;
    border-width: 0 0 0 2px;
    width: 1px;
    /*height: 16px;*/
    height: 100%;
}

.widget.lessonbx .list .lesson.completed>.status .circle {
    border: 2px solid #FF9800;
    background-color: #FFC107;
    color: #F9F9F9;
    left: 1px;
}

.widget.lessonbx.lock .list .lesson>.status .circle i::before {
    content: "\f023";
}

.widget.lessonbx .list .lesson.completed>.status:before,
.widget.lessonbx .list .lesson.completed>.status:after {
    border: 1px solid #FF9800;
    border-width: 0 0 0 2px;
}

.widget.lessonbx .list .lesson:first-child>.status:before {
    display: none;
}

.widget.lessonbx .list .lesson:last-child>.status:after {
    display: none;
}

.widget.lessonbx .list .lesson>.info {
    position: relative;
}

.widget.lessonbx .list .lesson>.info>.title {
    font-size: 14px;
    margin: 0px;
    line-height: 25px;
}

.widget.lessonbx .list .lesson>.info:before {
    display: inline-block;
    padding: 2px 5px;
    background-color: #4978d2;
    color: #fff;
    border-radius: 5px;
    margin-top: 5px;
}

.widget.lessonbx .list .lesson .thumb:after,
.widget.lessonbx .list .lesson .thumb:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 27px;
    color: #fff;
    opacity: .5;
}

.widget.lessonbx .list .lesson:hover .thumb:after,
.widget.lessonbx .list .lesson:hover .thumb:before {
    opacity: 1;
}

.widget.lessonbx .list .lesson.video:not(.lock) .thumb:before {
    content: '\f144';
}

.widget.lessonbx .list .lesson.paper>.info:before,
.widget.lessonbx .list .lesson.epaper>.info:before {
    content: '평가';
    background-color: #4978d2;
}

.widget.lessonbx .list .lesson.clinic>.info:before {
    content: '클리닉';
    background-color: #ec4fc5;
}

.widget.lessonbx .list .lesson.clinic:not(.lock) .thumb:before {
    content: '\f48e';
}

.widget.lessonbx .list .lesson>.info>.title>.option {}

.widget.lessonbx .list .lesson>.info>.prop {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget.lessonbx .list .lesson>.info>.prop>span {
    display: inline-block;
    margin-right: 3px;
    padding: 2px 5px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.widget.lessonbx .list .lesson>.info>.prop>span.time {
    background-color: #24394f;
    color: #fff;
}

.widget.lessonbx .list .lesson>.info>.prop .level>i {
    font-size: 10px;
    color: #333;
}

.widget.lessonbx .list .lesson>.info>.popover {
    display: block;
    top: 5px;
    left: 80px;
    font-size: 12px;
}

.paymentbx.popup {
    position: absolute;
    top: 0px;
    right: 0px;
    min-width: 220px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    z-index: 2;
    overflow: hidden;
}

.popup.paymentbx .close {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 5px;
    cursor: pointer;
    z-index: 2;
    font-weight: 300;
    font-size: 27px;
}

.popup.paymentbx .step {
    position: relative;
    display: none;
}

.popup.paymentbx .step.checkout {
    min-width: 500px;
}

.popup.paymentbx .step:last-child {
    display: block;
}

.popup.paymentbx .step.checkout {
}

.popup.paymentbx .header {
    position: absolute;
    top: 0px;
    width: 100%;
    border-bottom: 1px solid #eee;
    cursor: move;
    background-color: #fff;
    z-index: 1;
}

.popup.paymentbx .header .title {
    margin: 0px;
    padding: 0 10px;
    line-height: 40px;
    font-size: 17px;
}

.popup.paymentbx .body {
    padding: 50px 10px;
    height: 300px;
    overflow-y: auto;
}

.popup.paymentbx .body .item {
    position: relative;
    line-height: 27px;
    white-space: nowrap;
}

.popup.paymentbx .body .item + .item {
    border-top: 1px solid #eee;
}

.popup.paymentbx .body .item > span {
    display: inline-block;
}

.popup.paymentbx .body .item .name {
    width: 33%;
}

.popup.paymentbx .body .item .prod {
    width: 33%;
    text-align: center;
}

.popup.paymentbx .body .item .price {
    width: 33%;
    text-align: right;
}

.popup.paymentbx .body .item .del {
    position: absolute;
    right: 0px;
    display: none;
    background-color: #cd555b;
    color: #fff;
    padding: 0 10px;
    font-size: 13px;
    cursor: pointer;
}

.popup.paymentbx .body .item:hover .del {
    display: inline-block;
}

.popup.paymentbx .footer {
    position: absolute;
    width: 100%;
    bottom: 0px;
    padding: 5px;
    background-color: #fff;
    z-index: 1;
}

.popup.paymentbx .footer .total {
    text-align: right;
    line-height: 37px;
    border-top: 1px solid #ddd;
}

.popup.paymentbx .footer .total::before {
    content: '합계:';
    display: inline-block;
    margin-right: 5px;
}

.popup.paymentbx .footer .total .price {
    display: inline-block;
    font-weight: bold;
    font-size: 17px;
}

.popup.paymentbx .footer .btn {
    width: 100%;
    font-size: 17px;
}

.lesson-panel .lessonusers .users {
    float: left;
    width: 80px;
    text-align: center;
    margin: 0px;
    padding: 20px 0 0;
}

.lecturepanel[substype=free] .lesson-panel .lessonusers .users,
.lecturepanel[substype=self] .lesson-panel .lessonusers .users {
    padding: 20px 0px 0px;
}

.lesson-panel .lessonusers .user {
    margin: 0px 0px 10px 0px;
    padding: 0px;
    height: 80px;
    position: relative;
}

.lesson-panel .lessonusers .user .thumb {
    float: none;
    display: inline-block;
    overflow: hidden;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
}

.lesson-panel .lessonusers .user .thumb img {
    width: 60px;
    border-radius: 0px;
}

.lesson-panel .lessonusers .user .thumb .name {
    color: #FFF;
    font-weight: bold;
    text-align: center;
    position: absolute;
    width: 100%;
    font-size: 11px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    left: 0px;
    bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: rgba(0, 0, 0, 0.2);
}

.lesson-panel .lessonusers .lessons {
    margin-left: 80px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: 10px;
}

.lesson-panel .lessonusers .lessons .list {
    height: 80px;
    white-space: nowrap;
    margin-bottom: 10px;
}

.lesson-panel .lessonusers .box.lesson.wait {
    color: #bbb;
}

.lesson-panel .lessonusers .columns {
    white-space: nowrap;
    display: none;
}

.lecturepanel[substype=free] .lesson-panel .lessonusers .columns,
.lecturepanel[substype=self] .lesson-panel .lessonusers .columns {
    display: none;
}

.lesson-panel .lessonusers .columns>span {
    display: inline-block;
    width: 80px;
    margin-right: 10px;
    text-align: center;
}

.lesson-panel .lessonusers .columns>span>input {
    display: inline-block;
}

.lesson-panel .lessonusers .box.lesson {
    display: inline-block;
    margin: 0px 10px 0px 0px;
    padding: 0px;
    position: relative;
    color: #333;
    vertical-align: top;
    min-width: 80px;
}

.lesson-panel .lessonusers .box.lesson.active::before {
    content: '\f21d';
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 22px;
    position: absolute;
    top: -10px;
    left: 0px;
    z-index: 2;
    padding: 5px;
    color: #fff;
    text-shadow: 0px 0px 3px #000;
}

.lesson-panel .lessonusers .box.lesson .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1;
    cursor: pointer;
    display: none;
}

.lesson-panel .lessonusers .box.lesson.chk .bg,
.lesson-panel .lessonusers .box.lesson.sel .bg {
    display: block;
}

.lesson-panel .lessonusers .box.lesson>.no {
    display: block;
    text-align: center;
    background-color: #EFEFEF;
    font-weight: bold;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.lesson-panel .lessonusers .box.lesson.success>.no {
    background-color: #e54e1b !important;
    color: #fff;
}

.lesson-panel .lessonusers .box.lesson:not(.wait)>.no {
    background-color: #107dc2;
    color: #fff;
}

.lesson-panel .lessonusers .box.lesson.lock:not(.wait)>.no {
    background-color: #36393e;
    color: #fff;
}

.lesson-panel .lessonusers .box.lesson.active>.no {
    background-color: #ff9800;
    color: #fff;
}

.lesson-panel .lessonusers .box.lesson>.option>.btn {
    padding: 0px;
    line-height: 0px;
}

.lesson-panel .lessonusers .box.lesson.lock>.option {
    display: none;
}

.lesson-panel .lessonusers .box.lesson>.option .dropdown-menu {
    min-width: auto;
}

.lesson-panel .lessonusers .box.lesson .boxes {
    padding: 5px;
    background-color: #fcf8e3;
    position: relative;
    max-width: 180px;
    min-height: 60px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    font-size: 0px;
    text-align: center;
}

.lesson-panel .lessonusers .box.lesson.lock .boxes {
    overflow: hidden;
}

.lesson-panel .lessonusers .box.lesson .boxes>.mark {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 1;
    cursor: pointer;
}

.lesson-panel .lessonusers .box.lesson:not(.lock) .boxes>.mark {
    display: none;
}

.lesson-panel .lessonusers .box.lesson .boxes>.mark>span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
}

.lesson-panel .lessonusers .box.lesson .mbox {
    display: inline-block;
    width: 50px;
    height: 50px;
    position: relative;
    text-align: center;
    vertical-align: top;
    border: 1px solid #eee;
    cursor: pointer;
    background-color: #fff;
    border-radius: 5px;
    opacity: 1;
}

.lesson-panel .lessonusers .box.lesson .mbox.open {
    color: #f16759;
}

.lesson-panel .lessonusers .box.lesson .mbox+.mbox {
    margin-left: 5px;
}

.lesson-panel .lessonusers .box.lesson .mbox+.mbox::after {
    content: "";
    position: absolute;
    border-top: 2px solid #777;
    left: -5px;
    height: 2px;
    width: 5px;
    top: 50%;
}

.lesson-panel .lessonusers .box.lesson .mbox::before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 27px;
    opacity: .5;
}

.lesson-panel .lessonusers .box.lesson .mbox:hover::before {
    opacity: 1;
}

.lesson-panel .lessonusers .box.lesson .mbox.icovideo::before {
    content: '\f144';
}

.lesson-panel .lessonusers .box.lesson .mbox.icoepaper::before,
.lesson-panel .lessonusers .box.lesson .mbox.icopaper::before {
    content: '\f15c';
}

.lesson-panel .lessonusers .box.lesson .mbox.icozip::before {
    content: '\f1c6';
}

.lesson-panel .lessonusers .box.lesson>.mark {
    display: block;
    padding: 0;
    text-align: center;
    height: 55px;
    position: relative;
}

.lesson-panel .lessonusers .box.lesson:not(.wait)>.mark {
    cursor: pointer;
}

.lesson-panel .lessonusers .box.lesson>.mark>span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: 700;
}

.lesson-panel .lessonusers .box.lesson .mark>span>i {
    display: none;
}

.lesson-panel .lessonusers .box.lesson.lock .mark>span>i {
    display: inline-block;
}

.view:not(.selmode) .lesson-panel .lessonusers .box.lesson.lock:not(.wait):not(.sel):hover .mark>span>i:before {
    content: "\f3c1";
}

.teacher-group[data-type='unit'],
.teacher-group[data-type='full'] {
    display: none;
}


/******** report **************/

.overpanel .overbody.panel-report {
    padding: 70px 0 0;
}

.overpanel .overbody.panel-report .wrapcontent {
    min-height: calc(100dvh - 70px);
}

.panel-report .widget .ratebx {
    margin: 30px 20px 20px 30px;
}

.panel-report .widget .ratebx .desc {
    margin-top: 10px;
    font-weight: 300;
}

.panel-report .ratebx .indicator {
    background-color: #d9564c;
}

.panel-report .ratebx .indicator:before {
    border-color: #d9564c transparent transparent transparent;
}

.panel-report .ratebx .progress {
    background-color: #f0f0f0;
    position: relative;
}

.panel-report .ratebx .progress .status {
    position: absolute;
    right: 20px;
    line-height: 20px;
    font-weight: 600;
    color: #777;
}

.panel-report .widget .index {
    margin-left: 0px;
    margin-right: 0px;
}

.panel-report .widget .index .progress {
    margin-top: 10px;
    height: 20px;
}

.panel-report .widget .index .progress .sr-only {
    position: static;
}

.panel-report .widget .list {
    margin: 0 10px;
}

.panel-report .widget .list .index .no {
    padding: 0 10px;
}

.panel-report .widget .section>.info::before {
    content: '\002B';
    font-weight: 100;
    position: absolute;
    font-size: 33px;
    line-height: 35px;
    padding: 0 5px;
    cursor: pointer;
    width: 30px;
    text-align: right;
}

.panel-report .widget .section.expand>.info:before {
    content: '\2212';
    font-size: 20px;
}

.panel-report .widget .section>.info:hover::before {
    color: #a884f7;
}

.panel-report .widget .section>.info {
    padding: 10px 0;
    border-bottom: 1px dashed #ccc;
    cursor: pointer;
    position: relative;
}

.panel-report .widget .section>.info .no {
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 10px;
    background-color: #72748c;
    color: #fff;
    margin-right: 10px;
    position: relative;
}

.panel-report .widget .section.expand>.info .no {
    background-color: #a884f7;
}

.panel-report .widget .section.run>.info .no {
    background-color: #ff9800;
}

.panel-report .widget .section.run>.info .no::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    width: 15px;
    height: 15px;
    background-color: #ff5722;
    border-radius: 50%;
    box-shadow: 0px 0px 3px #fff;
}

.panel-report .widget .section>.info:hover .no {
    background-color: #a884f7;
}

.panel-report .widget .section>.info .title {
    font-size: 17px;
    line-height: 38px;
    padding-left: 30px;
    margin: 0px;
    font-weight: 300;
}

.panel-report .widget .section.expand>.info .title {
    font-weight: 500;
}

.panel-report .widget .section>.info .rate {
    position: absolute;
    width: 25%;
    top: 20px;
    right: 10px;
}

.panel-report .widget .section .lessons {
    display: none;
    padding: 10px 0px;
}

.panel-report .widget .section.expand .lessons {
    display: block;
}

.panel-report .widget .section .lesson {
    padding: 10px 20px;
    cursor: pointer;
}

.panel-report .widget .section .lesson::before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 70px;
    border: 1px dashed #aaa;
    height: 100%;
}

.panel-report .widget .section .lesson+.lesson::before {}

.panel-report .widget .section .lesson:first-child::before {
    top: 10px;
}

.panel-report .widget .section .lesson:last-child::before {
    top: 0px;
    height: 50%;
}

.panel-report .widget .section .lesson:hover {
    background-color: #F9F9F9;
}

.panel-report .widget .section .lesson>.thumb {
    float: left;
    width: 100px;
    margin-right: 10px;
    border: 1px solid #eee;
    height: 60px;
    position: relative;
}

.panel-report .widget .section .lesson.completed > .thumb::before {
    content: '완료';
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 3px 5px;
    border-radius: 5px;
    background-color: #c63029;
    color: #fff;
    font-size: 12px;
}

.panel-report .widget .section .lesson > .thumb > span {
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-color: #eee;
}

.panel-report .widget .section .lesson>.info {}

.panel-report .widget .section .lesson>.info>.title {
    font-size: 17px;
    font-weight: 300;
    margin: 5px 0px;
}

.panel-report .widget .section .lesson>.info>.title .no {
    display: inline-block;
    padding: 3px;
    border-radius: 5px;
    width: 40px;
    background-color: #000;
    font-size: 15px;
    vertical-align: middle;
    color: #fff;
    margin-right: 5px;
    text-align: center;
}

.panel-report .widget .section .lesson>.info>.prop>li {
    line-height: 22px;
    font-weight: 300;
    margin-right: 20px;
    min-width: 50px;
}

.panel-report .widget .section .lesson>.cmd {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    overflow: hidden;
    display: none;
}

.panel-report .widget .section .lesson:hover>.cmd {
    display: block;
}

.panel-report .widget .section .lesson>.cmd>a {
    float: left;
    height: 100%;
    text-align: center;
    width: 80px;
    padding: 25px 0px;
    color: #fff;
    opacity: .6;
}

.panel-report .widget .section .lesson>.cmd>a:hover {
    opacity: 1;
}

.panel-report .widget .section .lesson>.cmd>a>span {
    display: block;
    font-weight: 300;
    margin-top: 5px;
}

.panel-report .widget .section .lesson>.cmd>.btnReport {
    background-color: #ffae36;
}

.panel-report .widget .section .lesson>.cmd>.btnAlert {
    background-color: #f86b6b;
}

.panel-report .widget .lessons .lesson {
    margin: 0px;
}

body .panel-report .widget .list .lessons .lesson:hover>.option,
.panel-report .widget .lessons .lesson>.option {
    display: none;
}

.panel-report .widget .list .idx {
    margin-bottom: 0px;
    border-bottom: 2px solid #ccc;
    padding: 5px 0px;
    line-height: 40px;
}

.panel-report .widget .list .idx .title {
    font-weight: 600;
}

.panel-report .widget .list .sidx .no,
.panel-report .widget .list .idx .no {
    padding: 0px;
    margin-right: 5px;
}

.panel-report .widget .list .sidx {
    border-bottom: 1px solid #eee;
}

.panel-report .widget .list .sidx>div {
    line-height: 40px;
}

.panel-report .widget .list .sidx .progress {
    margin-top: 13px;
    background-color: #eee;
}

.toc {
    line-height: 25px;
}

.toc .wrapidx.expand .idxes {
    display: block;
}

.toc .wrapidx.expand .midx i.fa-angle-down:before {
    content: '\f106';
}

.toc .midx {
    padding: 5px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    margin-bottom: 10px;
    position: relative;
    background-color: #F5F5F5;
    cursor: pointer;
}

.toc .title {
    margin: 0px;
    line-height: 25px;
    font-weight: normal;
}

.toc .midx .no {}

.toc .midx .fa-angle-down {
    position: absolute;
    top: 0px;
    right: 10px;
    line-height: 40px;
}

.toc .idxes {
    margin-bottom: 10px;
    display: none;
}

.toc .idxes .idx {
    margin-top: 5px;
    padding-left: 20px;
    font-size: 13px;
    position: relative;
}

.toc .idxes .idx:hover {}

.toc .idxes .idx>.no {}

.toc .idxes .idx>.page {
    position: absolute;
    top: 0px;
    right: 10px;
}

.toc .idxes .idx .seces {
    padding-top: 5px;
}

.toc .idxes .idx .seces>.sec {
    display: inline-block;
    position: relative;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 1px 10px;
    cursor: pointer;
    background-color: #ccc;
    color: #fff;
    margin-right: 5px;
}

.toc .idxes .idx .seces>.sec.sel,
.toc .idxes .idx .seces>.sec:hover {
    background-color: #d75d43;
}

#popup-link .preview {
    min-height: 200px;
}

#popup-link .preview .load {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#popup-desc .desc,
#popup-desc #descedit {
    overflow: auto;
    width: 100%;
    height: 300px;
    border: 1px solid #ddd;
    padding: 10px;
    color: #333;
}

#popup-desc .btn-toolbar .btn-group {
    margin-bottom: 5px;
}

#popup-coupon_uselist .modal-content {
    height: 800px;
    overflow: auto;
}
/************ note **************************/

.note-content {}

.note-content .note-panel {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border: none;
}

.note-content .note-panel .panel-heading {
    background-color: #1d2939;
    color: #FFF;
    padding: 10px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border: 1px solid #1d2939;
}

.note-content .note-panel .panel-heading:after {
    clear: both;
    display: block;
    content: '';
}

.note-content .note-panel .panel-heading .subject {
    font-weight: bold;
    font-size: 14px;
}

.note-content .note-panel .panel-heading .more {
    float: right;
}

.note-content .note-panel .panel-body {
    background-color: #FFF;
    border: 1px solid #e3e6f3;
    padding: 5px 0px;
    overflow-x: auto;
    overflow-y: hidden;
}

.note-content .note-panel .lstItems {
    margin: 0px;
    white-space: nowrap;
}

.blkcate .md-title {
    padding: 5px 0;
    position: relative;
    cursor: pointer;
}

.tgExpand.off i.fa-chevron-down::before {
    content: '\f077';
}

.blkcate .md-title>span {
    display: inline-block;
    color: #FFF;
    font-weight: bold;
    background-color: #1d2939;
    padding: 5px 10px;
    position: absolute;
}

.blkcate .md-title.off>span {
    background-color: #68717e;
}

.blkcate .md-title>hr {
    border-top: 1px dashed #8c8b8b;
    border-bottom: 1px dashed #EEE;
    margin: 12px 0;
}

.mod_note .overpanel .pages {
    margin-top: 60px;
}


/*
.note-content .notes {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0px 5px;
  white-space: nowrap;
}

.note-content .note {
  display: inline-block;
  margin: 5px;
  width: 140px;
  height: 200px;
  border: 1px solid #EEE;
  -moz-box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
  -webkit-box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
  box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
}

.note-content .note .cover {
  position: relative;
  height: 150px; 
}

.note-content .note .cover img {
  width: 100%;
  height: 100%;
}

.note-content .note .cover span {
  position: absolute;
  bottom: 3px;
  right: 3px;
  opacity: 0.7;
  color: #FFF;
  background-color: #C00000;
  font-size: 11px;
  padding: 0px 5px;
  height: 17px;
  line-height: 17px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.note-content .note .title h5 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
  font-size: 12px;
  margin: 5px 0;
}

.note-content .note .info {
  font-size: 12px;
  position: relative;
}

.note-content .note .body {
  padding: 5px;
}

.note-content .note .info .updated {
  position: absolute;
  right: 0px;
}
*/


/*************** select-menu *******************/

.select-menu {
    position: fixed;
    bottom: 0px;
    width: 100%;
    background-color: #000;
    text-align: center;
    opacity: 0.7;
    z-index: 103;
    color: #aaa;
    overflow: hidden;
    display: none;
}

.select-menu button {
    background-color: transparent;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #aaa;
}

.select-menu button:hover {
    color: #FFF;
}

.select-menu button i {
    font-size: 19px;
}

.select-menu .close {
    float: right;
    font-weight: normal;
    opacity: initial;
    text-shadow: initial;
}

.select-menu span.message {
    position: absolute;
    top: 12px;
    left: 10px;
}


/*
.testpanel > .carousel {
  height: 100%;
}

.papers {
  height: 100%;
}

.papers .paper {
  height: 100%;
}

.papers .paper img {
  height: 100%;
}

.papers .owl-wrapper-outer {
  height: 100%;
}

.papers .owl-wrapper-outer .owl-wrapper {
  height: 100%;
}

.papers .owl-wrapper-outer .owl-wrapper .owl-item {
  height: 100%;
}
*/

.papers {
    overflow: hidden;
    position: relative;
    height: 100%;
}

.papers .wrap_papers {
    float: left;
    display: inline;
    height: 100%;
    padding: 0;
    margin: 0;
    width: 3510px;
    white-space: nowrap;
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
    transform: translate(0, 0);
}

.papers .wrap_papers .paper {
    white-space: nowrap;
    float: left;
    padding: 0;
    margin: 0;
    height: 100%;
    transform: translate(0, 0);
}

.testpanel .pages {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
}

.testpanel .pages .ui-slider-horizontal {
    margin: 15px;
    height: 3px;
}

.testpanel .pages .ui-slider .ui-slider-handle {
    top: -0.6em;
}


/*************** omr *******************/

.omr {
    display: none;
    background-color: #fff;
    width: 270px;
    height: 480px;
    position: fixed;
    top: 70px;
    padding: 40px 0px;
    border: 1px solid #ccc;
    -moz-box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
    -webkit-box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
    box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
}

body .omron .omr {
    display: block;
}

.omr .wrap-omr {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.omr .head {
    position: absolute;
    width: 100%;
    top: 0px;
    background-color: #000;
    opacity: 0.8;
    color: #fff;
    cursor: move;
}

.omr .head h2 {
    font-size: 15px;
    font-weight: bold;
    line-height: 40px;
    margin: 0px;
    text-align: center;
}

.omr .head .btn-close {
    position: absolute;
    top: 0px;
    right: 8px;
    font-size: 20px;
    line-height: 40px;
    color: #eee;
}

.omr form {
    height: 100%;
}

.omr .cmd {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 0px;
    line-height: 40px;
}

.omr .cmd .btn {
    margin-bottom: 5px;
    width: 90%;
}

.omr label.no {
    float: left;
    width: 40px;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    height: 100%;
    line-height: 2.8em;
    margin: 0px;
    padding: 0px;
    vertical-align: middle;
}

.omr:not(.dap) .ox_x label.no::before,
.omr:not(.dap) label.ox_x::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 25%;
    width: 50%;
    height: 2px;
    background: red;
    transform: rotate(45deg) translateY(-50%);
    z-index: 1;
}

.omr:not(.dap) .ox_x label.no::after,
.omr:not(.dap) label.ox_x::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 25%;
    width: 50%;
    height: 2px;
    background: red;
    transform: rotate(-45deg) translateY(-50%);
    z-index: 1;
}

.omr:not(.dap) .ox_o label.no::after,
.omr:not(.dap) label.ox_o:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25px;
    height: 25px;
    border: 2px solid red;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    /*margin: -14.5px 0px 0px -12.5px;*/
    transform: translate(-50%, -50%);
    z-index: 1;
}

.omr span.sel {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    line-height: 35px;
    color: #999;
    width: 35px;
    height: 35px;
    border: 1px solid #ccc;
    background-color: #fff;
    font-size: 15px;
    font-weight: bold;
    margin-left: 3px;
    display: inline-block;
    cursor: pointer;
    text-align: center;
}

.omr input {
    display: inline-block;
    padding: 7px 10px;
    vertical-align: middle;
}

.omr .row input[type=text] {
    width: 185px;
    margin-left: 5px;
}

.omr input[type=radio] {
    width: 20px;
}

.omr.dap input[type=radio] {
    margin: 0px;
}

.omr.dap div.row>span.fa-stack {
    padding: 0px;
    font-size: 15px;
    color: #ddd;
}

.omr.dap div.row:not(.disabled)>span.fa-stack {
    cursor: pointer;
}

.omr.dap div.row>span.fa-stack.ox_o.chk,
.omr.dap div.row:not(.disabled)>span.fa-stack.ox_o:hover {
    color: #4c8dce;
}

.omr.dap div.row>span.fa-stack.ox_x.chk,
.omr.dap div.row:not(.disabled)>span.fa-stack.ox_x:hover {
    color: #da4343;
}

.omr.dap .fa-stack-1x {
    color: #fff;
    font-size: 20px;
}

.omr input[type=text] {}

.omr.dap .frmOMR input[type=text] {
    display: none;
    margin-left: 10px;
    width: 50px;
}

.omr.dap .frmOMR input[type=text].desc {
    display: inline-block;
}

.omr.dap .frmOMR .row button {
    display: none;
}

.omr input[type=file] {
    border: none;
    padding: 0px;
    font-size: 13px;
}

.table-omr span.sel,
.pages span.sel {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 1px solid #ccc;
    background-color: #fff;
    display: inline-block;
    text-align: center;
    margin-left: 3px;
    cursor: pointer;
    vertical-align: middle;
}

.table-omr span.sel {
    line-height: 25px;
    color: #999;
    width: 25px;
    height: 25px;
}

.table-omr span.sel.chk,
.omr span.sel.chk {
    background-color: #303030 !important;
    color: #fff !important;
    border: 1px solid #303030 !important;
}

.omr div.row {
    text-align: left;
    padding: 5px;
    position: relative;
    white-space: nowrap;
    margin: 0px;
}

.omr.dap div.row {
    font-size: 13px;
}

.omr.dap div.row>span {
    padding: 10px 0px 0px;
    display: inline-block;
    vertical-align: top;
}

.omr div.row:nth-child(even) {
    background-color: #F5F5F5;
}

.omr div.row:after {
    clear: both;
    display: block;
    content: '';
}

.omr div.row.disabled>input[type=file] {
    display: none;
}

.pages .omr {
    background-color: #fff;
}


/*********** paper, book common ******************/

.pages .preview-pages {
display: none;
}


.pages[mode="sol"] .page,
.pages .page.sol {
    display: none;
}

.pages[mode="sol"] .page.sol,
.pages[mode="all"] .page.sol {
    display: block;
}

.pages .page .item .item-prop .btn-group {
    margin: 0px;
}

.pages>.score {
    position: absolute;
    z-index: 1;
    font-size: 50px;
    right: 30px;
    top: 40px;
    font-weight: bold;
    color: #f30808;
    border-bottom: 5px solid #ccc;
    width: 80px;
    text-align: center;
    padding: 10px;
}

body .mode-pc .pages.end>.score {
    border-bottom: 5px solid red;
    padding-bottom: 20px;
}

.mode-mobile .pages>.score {}

#popup-tpl .desc {
    font-size: 12px;
    margin-bottom: 5px;
}

#popup-section .bxTpl,
#popup-tpl .bxTpl {
    padding-top: 5px;
}

.subtitle .btn {
    position: absolute;
    top: -6px;
    right: 0px;
}

.wraptplpreview {
    position: relative;
}

.wraptplpreview>.btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    background-color: transparent;
    border: none;
    opacity: 0.5;
}

.wraptplpreview>.btn-left {
    left: 0px;
}

.wraptplpreview>.btn-right {
    right: 0px;
}

.modal .extinfo {
    display: none;
}

#popup-paper.modal .extinfo {
    display: block;
}

#popup-paper.modal .modal-body .form-group.epaper {
    display: none;
}

#popup-paper.modal .modal-body.epaper .form-group.epaper {
    display: block;
}

#popup-paper.modal .modal-body.epaper .extinfo {
    display: none;
}

.modal .modal-body[type='master'] .extinfo,
.modal .modal-body[type='school'] .extinfo,
.modal .modal-body[type='head'] .extinfo {
    display: block;
}

.modal .extinfo .btn-toggle {
    color: #333;
    cursor: pointer;
    border-bottom: 1px dashed #ccc;
    padding: 5px 10px 10px;
}

.modal .extinfo .btn-toggle:hover {
    color: #333;
}

.modal .extinfo.expand .btn-toggle>i:before {
    content: '\f0d8';
}

.modal .extinfo.expand>.hide {
    display: block !important;
}

.modal .extinfo .services label {
    display: inline-block;
}

.bxTplPreview {
    overflow: hidden;
    min-height: initial;
}

.bxTplPreview .wrap {
    background-color: #fff;
}


/*
.bxTplPreview .item {
  font-size: 12px;
  position: relative;
  min-height: 300px;
}
*/

.bxTplPreview .item .fa-paperclip {
    display: none;
}

.bxTplPreview .item.active .fa-paperclip {
    display: inline-block;
}

.bxTplPreview .item:after {
    clear: both;
    display: block;
    content: '';
}

.bxTplPreview .item.active>i {
    color: #428bca;
    position: absolute;
    top: 0px;
    left: 10px;
    font-size: 35px;
}

.bxTplPreview .wrap .item .cover {
    margin: 10px;
}

.bxTplPreview .wrap .item .cover {
    float: left;
    width: 280px;
    height: 300px;
    background-color: #EFEFEF;
    padding: 5px;
    text-align: center;
    cursor: pointer;
}

.bxTplPreview .item .icover {
    background-color: #F5F5F5;
    min-height: 300px;
    text-align: center;
    padding: 10px;
}

.bxTplPreview .item .icover img {
    width: 100%;
}

.bxTplPreview .item .cover img {
    height: 100%;
}

.bxTplPreview .wrap .item .info {
    margin: 10px 10px 10px 300px;
}

.bxTplPreview .item .desc {
    margin-top: 10px;
    padding-top: 10px;
}

.bxTplPreview .item .info>.thumb {
    margin: 10px 0px;
}

.bxTplPreview .item .info>.thumb>img {
    display: inline-block;
    height: 70px;
    border: 1px solid #eee;
    padding: 2px;
    cursor: pointer;
}

.bxTplPreview .item .info>.thumb>img:hover,
.bxTplPreview .item .info>.thumb>img.active {
    border: 1px solid #f3ac90;
}

.bxTplPreview h1.title {
    font-size: 17px;
    font-weight: 700;
    margin: 5px 0px 10px;
    padding: 5px 0px;
    border-bottom: 1px dashed #ddd;
    position: relative;
}

.bxTplPreview h1.title>time {
    position: absolute;
    right: 0px;
    font-size: 12px;
    font-weight: normal;
    line-height: 25px;
}

.bxTplPreview .imgs {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 400px;
}

.bxTplPreview .imgs>img {
    width: 50%;
    display: inline-block;
    margin-bottom: 10px;
    -moz-box-shadow: 2px 2px 5px rgba(12, 12, 12, 0.5);
    -webkit-box-shadow: 2px 2px 5px rgba(12, 12, 12, 0.5);
    box-shadow: 2px 2px 5px rgba(12, 12, 12, 0.5);
}

.touch-slide .wrap {
    height: 100%;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    /*
  transition-property: transform;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
  transform: translate(0, 0);
  */
}

.touch-slide .wrap .touch-item .qt {
    white-space: initial;
}

.touch-slide .wrap .touch-item {
    white-space: nowrap;
    display: inline-block;
    padding: 5px;
    margin: 0px;
    height: 100%;
    vertical-align: top;
    transform: translate(0, 0);
    min-height: calc(100vh - 70px);
    background-color: #fff;
}

.touch-slide .wrap .touch-item>video,
.touch-slide .wrap .touch-item>img,
.touch-slide .wrap .touch-item>div {}


/*
.touch-slide .wrap .touch-item.avi {
  background-color: rgba(0, 0, 0, 0.8);
}

.touch-slide .wrap .touch-item video {
  max-width: 100%;
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
}
*/


/*********** library ***********************/

.mod_library .breadcrumb {
    line-height: 30px;
    position: relative;
}

.mod_library .breadcrumb>li+li::before {
    content: '\f105';
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}

.mod_library .breadcrumb>li.active span {
    font-weight: bold;
    color: #555;
}

.mod_library .breadcrumb .btn-sort {
    position: absolute;
    top: 10px;
    right: 10px;
}

.preview-pages {
    cursor: pointer;
    min-height: calc(100vh - 65px);
}

.paperpanel .preview-pages {
    display: none;
}

.epaperpanel .preview-pages {
    display: block;
    max-width: 800px;
    margin: 0 auto;
}

body .preview-pages .page {
    text-align: center;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0px;
    margin-bottom: 10px;
}

body .preview-pages .page>img {
    max-width: 100%;
}

body .preview-pages .page.sol {
    display: none;
}

.pages.epaper .preview-pages .page.nopaper {
    height: 1000px;
    cursor: initial;
}

.paper .nopaper {
    display: none;
}

.preview-pages .page.nopaper .alert {
    color: #ccc;
    font-size: 17px;
    position: relative;
    top: 40%;
}

.preview-pages.touch-slide .page.nopaper .alert {
    font-size: 15px;
}

.preview-pages .page.nopaper .alert .btn-upload {
    margin-top: 10px;
    padding: 10px;
    background-color: #F9F9F9;
    color: #777;
    border: 1px dashed #ddd;
    cursor: pointer;
}

.preview-pages .wrap .page>img {
    display: inline-block !important;
    position: initial;
    transform: initial;
}

.overpanel .overbody:not(type=paper) .preview-pages .page>img {
    display: none;
    max-width: 100%;
    max-height: 100%;
    background-color: #fff;
    position: relative;
    transform: translateY(-50%);
    top: 50%;
}

.overpanel .preview-pages {
    display: block !important;
    height: 100%;
    overflow: hidden;
}

form .items {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.modal form .items {}

#popup-product.modal form .items {
    border-top: 1px solid #eee;
    padding-top: 5px;
    padding-bottom: 5px;
}

form .items>li.box {
    position: relative;
    padding: 0px;
    margin-bottom: 10px;
    min-height: initial;
    background-color: transparent;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-size: 13px;
    border: none;
}

form .items>li.box>.item {
    height: 70px;
    padding: 5px 5px 5px 45px;
    background-color: #fff;
}

form .items>li.box>.item:not(:first-child) {
    border-top: 1px dashed #1D2939;
}

form .items>li.box .base-prop {
    position: absolute;
    background-color: #fff;
    z-index: 1;
}

form .items>li.box .item.expand .base-prop {
    z-index: 3;
}

form .items>li.box .ext-prop {
    position: absolute;
    background-color: #fff;
    display: none;
    padding-right: 10px;
}

form .items>li.box .ext-prop>div {
    white-space: nowrap;
    overflow: hidden;
}

form .items>li.box .ctrlbar {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 5px;
    color: #fff;
    height: 70px;
    line-height: 70px;
    background-color: #ccc;
    cursor: pointer;
    z-index: 10;
}

form .items>li.box .item.expand .ctrlbar {
    left: 0px;
}

form .items>li.box .item:hover {}

form .items>li.box .item:hover .ctrlbar {
    width: 10px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.3);
}

form .items>li.box .item:hover .ctrlbar:after {
    content: '\f100';
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}

form .items>li.box .item.expand:hover .ctrlbar:after {
    content: '\f101';
}

form .items>li.box .dropzone {
    text-align: center;
}

form .items>li.box .dropzone.active {
    background-color: rgba(255, 255, 255, 0.5);
}

form .items>li.box .dropzone.active::before {
    content: '+';
}

form .items>li.box .dropzone.hover {
    background-color: #c9302c;
}

form .items>li.newbox {
    padding: 0px;
    cursor: pointer;
    border: none;
    text-align: center;
    margin: 0px;
    min-height: 70px;
}

form .items>li.newbox a.btn {
    color: #fff;
    width: 80px;
    height: 80px;
    line-height: 60px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: inline-block;
    -moz-box-shadow: 3px 0 5px rgba(12, 12, 12, 0.5) !important;
    -webkit-box-shadow: 3px 0 5px rgba(12, 12, 12, 0.5) !important;
    box-shadow: 2px 2px 5px rgba(12, 12, 12, 0.5) !important;
}

form .items>li.newbox a.btn:hover {
    color: #000;
}

form .summary {
    margin-bottom: 10px;
    padding: 8px;
    background-color: rgba(255, 255, 255, 0.2);
}

form .items .desc {
    font-size: 12px;
    padding: 5px 0px;
    color: #ccc;
}

form .items>li .field {
    margin-bottom: 5px;
}

form .items>li label {
    margin-bottom: 0px;
    display: inline-block;
    margin-right: 5px;
    background-color: #eee;
    text-align: center;
    padding: 5px;
    vertical-align: top;
}

form .items>li span {
    opacity: initial;
}

#popup-additem form .items>li span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

form .items>li span.no {
    color: #000;
    width: 40px;
    height: 100%;
    cursor: move;
    text-align: center;
    padding: 10px 5px;
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    top: 0px;
    left: 0px;
}

form .items>li .title {
    line-height: 13px;
    font-size: 13px;
    margin: 5px 0px;
}

form .items>li span.level {
    display: inline-block;
    color: #ccc;
}

form .items>li span.level>i {
    font-size: 14px;
    line-height: 14px;
    vertical-align: middle;
    cursor: pointer;
}

form .items>li .ex {
    margin-bottom: 5px;
    white-space: nowrap;
}

form .items>li select {
    display: inline-block;
    width: inherit;
    padding: 3px 2px;
    width: 80px;
    vertical-align: top;
}

form .items>li .hide-control {
    display: none;
}

form .items>li .ex input {
    height: 2.4em;
}

form .items>li .ex select {
    height: 2.4em;
}

form .items>li .ex>span {
    line-height: 1.9em;
    color: #999;
    width: 2em;
    height: 2em;
    font-size: 13px;
    font-weight: bold;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 1px solid #ccc;
    background-color: #fff;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    vertical-align: top;
}

form .items>li .ex>span.chk {
    background-color: #17A08C;
    color: #fff;
    border-color: #17A08C;
}

form .items>li input {
    padding: 3px 5px;
    display: inline-block;
    vertical-align: middle;
    height: 2.4em;
}

form .items>li .input-group {}

form .items>li .input-group input {
    line-height: 1.7em;
}

form .items>li .input-group-btn .btn {
    padding: 3px 10px;
    line-height: 1.7em;
    height: 2.4em;
}

form .items>li .btn-remove {
    position: absolute;
    bottom: 5px;
    left: 15px;
    border: none;
    padding: 0px;
    font-size: 14px;
    color: #777;
}

form .items>li .btn-remove:hover {
    color: #337ab7;
}

.overpanel .content .imgs {
    position: relative;
}

.overpanel .content .imgs.wrapimgs {
    padding: 20px;
    background-color: #fff;
    display: inline-block;
}

.overpanel .content video {
    max-width: 90%;
    max-height: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.overpanel .content .imgs>img {
    background-color: #fff;
    display: inline-block;
    max-width: 90%;
    max-height: 90%;
}

.overpanel .content .imgs.wrapimgs>img {
    display: block;
    max-width: 100%;
}

.overpanel .content .imgs>img:not(:first-child) {
    margin-top: 10px;
}

.overpanel .content .imgs>.sol {
    margin-top: 10px;
}

.overpanel .msgbox {
    text-align: left;
}

.overpanel .msgbox .content {
    text-align: left;
}

.overpanel .msgbox p {
    font-size: 13px;
    line-height: 17px;
    text-align: left;
    margin-top: 20px;
}

.overpanel > .sidepanel {
    padding: 5px;
    text-align: left;
    background-color: #1d2939;
    display: none;
    width: 380px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1002;
    color: #FFF;
}

.overpanel.expand-right>.sidepanel {
    height: 100%;
    display: block;
    overflow-y: auto;
    position: fixed;
    -webkit-overflow-scrolling: touch;
}

.overpanel.expand-right>.sidepanel>div {
    display: none;
}

.overpanel.expand-right>.sidepanel .closex {
    position: absolute;
    right: 10px;
    padding: 0;
    font-size: 30px;
    background: transparent;
    border: none;
    color: #fff;
    opacity: 0.5;
    z-index: 1;
}

.overpanel.expand-right>.ibg {
    display: block;
}

.sidepanel .panel-header {
    padding: 3px 5px;
    border-bottom: 1px solid #4a535e;
}

.sidepanel .index .panel-body {
    padding: 0px 0px 10px;
}

.sidepanel .panel-header h4 {
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: 700;
    font-size: 17px;
}

.sidepanel .panel-header p {
    color: #8899a6;
}

.overpanel.expand-right>.sidepanel>div.active {
    display: block;
}

.sidepanel .mnuhead {
    background-color: #1A1A1A;
    font-size: 17px;
    color: #eee;
    border-top: 1px solid #333;
    line-height: 40px;
    padding: 0px 10px;
    position: relative;
    cursor: pointer;
}

.sidepanel .mnuhead .btn {
    color: #bbb;
    text-align: center;
    position: absolute;
    right: 0px;
    padding: 10px;
}

.sidepanel .mnubody {
    padding: 5px;
    background-color: #1d1f26;
}

.sidepanel .mnubody .mnu {
    position: relative;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 5px 45px 5px 40px;
    border-bottom: 1px solid #343e4d;
    line-height: 30px;
    cursor: pointer;
}

.sidepanel .mnubody .mnu:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

.sidepanel .mnubody .mnu .no {
    position: absolute;
    padding: 0 5px;
    left: 5px;
    border-radius: 5px;
    background-color: #406cbf;
    line-height: 25px;
    margin-top: 2px;
}

.sidepanel .mnubody .mnu .page {
    position: absolute;
    right: 5px;
}

.sidepanel .mnubody .mnu .no>i {
    margin-right: 5px;
}

.view.view_article .sidepanel .closex {
    color: #000;
}

.view.view_article .sidepanel .setting {
    height: 100%;
    background-color: #fff;
}

.view.view_article .sidepanel .setting .panel-timeline .panel-heading .option {
    top: 8px;
    right: 30px;
}

.view.view_article .sidepanel .setting .panel-footer {
    border-top: 1px solid #eee;
}


/*********** modal boxes ***********************/

.modal .boxes .box {
    position: relative;
    height: 100%;
    padding: 15px;
    border-radius: 5px;
    height: 100px;
    color: #000;
    background-color: #faad43;
    box-shadow: 1px 2px 2px #ccc;
    cursor: pointer;
    position: relative;
    border: none;
}

.modal .boxes .new {
    height: 100px;
    position: relative;
    display: block;
    cursor: pointer;
    border-radius: 5px;
    border: 1px dashed #ccc;
    background-color: transparent;
    color: #aaa;
}

.modal .boxes .new>i.fa-plus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.modal .boxes .new:hover {
    color: #000;
}

.modal .box>span[data-role="del"] {
    position: absolute;
    font-size: 30px;
    top: -7px;
    right: -7px;
    z-index: 2;
    display: none;
    cursor: pointer;
}

.modal .box:hover>span[data-role="del"] {
    display: inline-block;
}

.modal .boxes .box .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*********** admin_code ***********************/

.mod_admin .adminpanel .path {
    line-height: 30px;
    margin-bottom: 10px;
    position: relative;
}

.mod_admin .adminpanel .path .label {
    position: absolute;
    display: inline-block;
    left: 10px;
    line-height: 32px;
    padding: 8px 0px;
    color: #999;
    font-size: 14px;
}

l.mod_admin .adminpanel .breadcrumb {
    margin-bottom: 0px;
}

.mod_admin .adminpanel .breadcrumb>li+li::before {
    content: '\f054';
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}

.mod_admin .item-list .panel {}

.codepanel .boxes {
    font-size: 0px;
}

.codepanel .box {
    min-height: 80px;
    margin: 8px 0px;
    font-size: 12px;
}

.codepanel .boxes .box {
    position: relative;
}

.codepanel .boxes .box h4 {
    margin: 0px 0px 5px;
    font-size: 15px;
}

.codepanel .boxes .box .checkbox {
    position: absolute;
    top: 5px;
    display: none;
}

.codepanel .boxes .box.sel {
    background-color: rgb(255, 247, 244);
    border-color: rgb(252, 195, 161);
}

.codepanel .boxes .box:hover {
    border-color: rgb(252, 195, 161);
}

.codepanel .boxes .box.sel .checkbox,
.codepanel .boxes .box:hover .checkbox {
    display: inline-block;
}

.codepanel .boxes .box .prop {
    padding-left: 20px;
}

.codepanel .boxes .box .option {
    position: absolute;
    top: 5px;
    right: 10px;
}


/*********** admin_ipool ***********************/

.ipoolpanel #fldbox {
    height: 100%;
    overflow: hidden;
}

.ipoolpanel .node {
    cursor: pointer;
}

.ipoolpanel .node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
}

.ipoolpanel .node text {
    font: 10px sans-serif;
}

.ipoolpanel .link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
}

.ipoolpanel .board {
    background-color: #fff;
}

.ipoolpanel .templink {
    fill: none;
    stroke: red;
    stroke-width: 1.5px;
}

.ipoolpanel .ghostCircle.show {
    display: block;
}

.ipoolpanel .ghostCircle,
.activeDrag .ghostCircle {
    display: none;
}

.d3-context-menu {
    position: absolute;
    display: none;
    background-color: #f2f2f2;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    min-width: 150px;
    border: 1px solid #d4d4d4;
    z-index: 1200;
}

.d3-context-menu ul {
    list-style-type: none;
    margin: 4px 0px;
    padding: 0px;
    cursor: default;
}

.d3-context-menu ul li {
    padding: 4px 16px;
    font-size: 12px;
    cursor: pointer;
}

.d3-context-menu ul li.toggle {
    display: none;
}

.d3-context-menu.on ul li.toggle {
    display: block;
}

.d3-context-menu ul li:hover {
    background-color: #4677f8;
    color: #fefefe;
}


/*********** setting ***********************/

.mod_setting .list-group .list-group-item::after {
    content: '\f054';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    position: absolute;
    right: 10px;
}

.mod_setting .list-group a>i {
    width: 25px;
    text-align: center;
}

.content-header {
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

.mod_setting .content-body {}

.mod_setting .content-body .form-group {
    margin-right: 0px;
    margin-left: 0px;
}

.mod_setting .content-body .form-group .notification,
.helpRegionArea .notification {
    font-size: 13px;
    color: #8899A6;
    margin-top: 10px;
}


/*********** admin ***********************/

.mod_admin .content-body {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.mod_admin .content-body>li {
    display: inline-block;
    text-align: center;
}

.mod_admin .content-body>li>div {
    display: inline-block;
    width: 120px;
    margin: 7px;
    overflow: hidden;
    position: relative;
}

.mod_admin .content-body>li>div>a {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: rgba(255, 255, 255, 0.4) none repeat scroll 0% 0%;
    opacity: 0.5;
}

.mod_admin .content-body>li>div>a:hover {
    text-decoration: none;
    opacity: 0;
}

.mod_admin .content-body>li>div>span.thumb {
    display: block;
    line-height: 95px;
    height: 95px;
    font-size: 40px;
    text-align: center;
    background-color: #f5f5f5;
    border: 1px solid #eee;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.mod_admin .content-body>li>div>h5 {
    text-align: center;
    margin: 10px 0px 0px;
}

.adminpanel .commands .command {
    display: inline-block;
    text-align: center;
    width: 170px;
    border-radius: 10px;
    background-color: #EFEFEF;
    padding: 0px;
    overflow: hidden;
}

.adminpanel .commands .command i {
    padding: 30px 0;
    font-size: 40px;
    color: #000;
}

.adminpanel .commands .command span {
    display: block;
    line-height: 33px;
    font-size: 17px;
    color: #fff;
    background-color: rgba(0, 0, 0, .5);
}


/************* help **********************/

nav .breadcrumb {
    background-color: #F5F5F5;
    padding: 5px 10px;
    margin-bottom: 5px;
    text-align: left;
    line-height: 35px;
}

.mod_help .contentpanel {
    position: relative;
}

.mod_help .contentpanel .header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100px;
    background: url(/skins/default/images/photos/bg_book2.png) left center no-repeat;
    background-size: cover;
    border-bottom: 1px solid #eee;
    text-align: center;
}

.mod_help .contentpanel .header>.searchbox {
    margin-top: 30px;
    display: inline-block;
    width: 50%;
}

.mod_help .contentpanel .header>.searchbox .form-control {}

.mod_help .contentpanel .header>.searchbox .button {}

.mod_help .contentpanel .header>.searchbox>.search-terms {
    white-space: nowrap;
}

.mod_help .contentpanel .header>.searchbox>.search-terms a {
    font-size: 11px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin: 5px;
}

.mod_help .contentpanel .header>.searchbox>.search-terms a:hover {
    text-decoration: none;
}

.mod_help .contentpanel .container {
    margin-top: 100px;
}

.mod_help .contentpanel .container>h1 {
    border-bottom: 2px solid #333;
    font-size: 25px;
    line-height: 50px;
    margin: 0px 0px 25px;
}

.mod_help .contentpanel .container>.menu {}

.mod_help .contentpanel .container>.menu>div>div {
    border: 1px solid #d6dde1;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 10px;
    height: 150px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 15px;
}

.mod_help .contentpanel .container>.menu>div>div:hover {
    background-color: #F5F5F5;
    color: #000;
}

.mod_help .contentpanel .container>.menu>div>div>i {
    font-size: 40px;
    margin-top: 10px;
    line-height: 40px;
    color: #1e2630;
}

.mod_help .contentpanel .container>.menu>div>div>h5 {
    font-size: 17px;
    margin: 0px;
    padding: 10px;
    color: #333;
}

.container .sidebar {
    padding-top: 10px;
    padding-bottom: 15px;
}

.container .sidebar>.title {
    margin: 0px;
    color: #333;
    line-height: 35px;
}

.container .sidebar>ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    line-height: 40px;
}

.container .sidebar>ul>li {
    cursor: pointer;
    padding: 0px 10px;
    position: relative;
}

.container .sidebar>ul>li:hover {
    color: #333;
    background-color: #f5f5f5;
}

.container .sidebar>ul>li.active {}

.container .sidebar>ul>li.active>span {
    color: #000;
    font-weight: 500;
}

.container .sidebar>ul>li>span.badge {
    color: #fff;
    background-color: #D9534F;
    font-size: 10px;
    margin-bottom: 2px;
}

.container .sidebar>ul.menu>li>.mark {
    display: none;
    position: absolute;
    right: 5px;
    padding: 0px;
    line-height: 40px;
    background-color: transparent;
}

.container .sidebar>ul.menu>li.active>.mark {
    display: inline-block;
    color: #1479ea;
}

.container .taskbar {
    background-color: transparent;
    border-bottom: 2px solid #333;
}

.container .taskbar .title {
    font-size: 17px;
    font-weight: 600;
    color: #333;
    margin: 0px;
    line-height: 35px;
}

.container .taskbar .ddlcate .dropdown-goggle {
    padding: 0px;
    line-height: 35px;
}

.container .list>ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.container .list>ul>li {
    position: relative;
    line-height: 22px;
    padding: 10px 5px;
    cursor: pointer;
}

.container .list>ul>li:not(:first-child) {
    border-top: 1px solid #ddd;
}

.container .list>ul>li.sel,
.container .list>ul>li:hover {
    background-color: #f5f5f5;
}

.container .list>ul>li>input.checkbox {
    display: none;
    position: absolute;
    top: 5px;
    left: 8px;
    z-index: 2;
}

.container .list>ul>li.sel>input.checkbox,
.container .list>ul>li:hover>input.checkbox {
    display: inline-block;
}

.container .list>ul>li>.pic {
    -weibkit-border-radius: 50%;
    border-radius: 50%;
    border: 1px solid #aaa;
    padding: 2px;
    width: 50px;
    float: left;
    margin-right: 10px;
}

.container .list>ul>li>.info {
    position: relative;
    margin-top: 3px;
}

.container .list>ul>li>.info>.name {}

.container .list>ul>li>.info>.date {
    position: absolute;
    right: 0px;
    font-size: 11px;
}

.container .list>ul>li>.option {
    position: absolute;
    top: 0px;
    right: 0px;
    display: none;
    height: 100%;
    font-size: 0px;
    overflow: hidden;
}

body .mode-pc .container .list>ul>li:hover>.option {
    display: inline-block;
}

.container .list>ul>li>.option>a {
    height: 100%;
    display: inline-block;
    text-align: center;
    padding: 0px 10px;
    line-height: 70px;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    background-color: #f86b6b;
}

.container .list>ul>li.message {
    font-weight: 500;
    color: #333;
}

.container .list>ul>li.message.read {
    font-weight: normal;
    color: #777;
}

.container .list>ul>li>.smry {
    margin: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
}

.container .list>ul>li.faq>.title {
    line-height: 40px;
    position: relative;
    font-size: 15px;
}

.container .list>ul>li.faq>.title>i.expand {
    position: absolute;
    line-height: 40px;
    right: 10px;
    font-size: 25px;
}

.modal .modal-header .message-info {}

.modal .modal-header .message-info .pic {
    width: 50px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    float: left;
    margin-right: 10px;
}

.modal .modal-header .message-info .name {
    padding-top: 7px;
}

.modal .modal-header .message-info .name>span {
    font-weight: 600;
    color: #333;
}

.modal .modal-header .message-info .date {
    font-size: 12px;
}


/*
.mod_help .contentpanel .body ul.index {
  border: 1px solid #DDD;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.mod_help .contentpanel .body ul > li {
  line-height: 35px;
  position: relative;
}

.mod_help .contentpanel .body ul > li > a {
  display: block;
  padding: 2px 15px;
  color: #555;
}

.mod_help .contentpanel .body ul > li > a.page1:after {
  content: '\f054';
  position: absolute;
  right: 15px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
}

.mod_help .contentpanel .body ul > li > a.active:hover,
.mod_help .contentpanel .body ul > li > a.active {
  color: #fff;
  background-color: #337AB7;
  z-index: 2;
  margin-left: -1px;
  margin-right: -1px;
  margin-top: -1px;
}

.mod_help .contentpanel .body ul.index > li:first-child > a.active {
  -moz-border-top-left-radius: 5px;
  -moz-border-top-right-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.mod_help .contentpanel .body ul.index > li:last-child > ul.sindex > li:last-child > a.active {
  -moz-border-bottom-left-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.mod_help .contentpanel .body ul > li > a:focus, 
.mod_help .contentpanel .body ul > li > a:hover {
  text-decoration: none;
}

.mod_help .contentpanel .body ul > li > a:hover {
  background-color: #F5F5F5;
}

.mod_help .contentpanel .body ul > li > a > i {
  width: 20px;
  text-align: center;
}

.mod_help .contentpanel .body ul.index > li > a {
  position: relative;
}

.mod_help .contentpanel .body ul.index > li > a.section {
  border-top: 1px solid #ddd;
}

.mod_help .contentpanel .body ul.index > li > a.section:after {
  content: '\f067';
  position: absolute;
  right: 15px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
}

.mod_help .contentpanel .body ul.index > li > a.section.expand:after {
  content: '\f068';
}

.mod_help .contentpanel .body ul.index {
}

.mod_help .contentpanel .body ul.sindex {
  display: none;
}

.mod_help .contentpanel .body ul.sindex > li > a {
  padding-left: 40px;
}

.mod_help .contentpanel .content .panel {
  background-color: transparent;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.mod_help .contentpanel .content .panel .panel-title {
  margin: 10px 0px;
}
*/


/************* common **********************/

.item-list ul.item {
    list-style: none;
    margin: 0px;
    padding: 0px;
    position: relative;
}

.item-list ul.item:after {
    clear: both;
    display: block;
    content: '';
}

.item-list ul.item>li {}

.item-list ul.item>li.symbol {
    float: left;
    cursor: pointer;
}

.item-list ul.item>li.prop {
    margin-left: 75px;
    margin-right: 20px;
}

.item-list ul.item>li.prop>h4 {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0px;
    padding-top: 5px;
}

.item-list ul.item>li.prop small {
    margin-right: 5px;
}

.item-list ul.item>li.option {
    position: absolute;
    right: 5px;
    top: 10px;
    z-index: 2;
}

.item-list ul.item>li.option .btn {
    padding: 0px;
    background: none;
    border: none;
    line-height: 1px;
}


/*********** library *****************/

.lib-content .loading {
    color: rgba(0, 0, 0, 0.3);
    padding: 10px 0;
    text-align: center;
}

.lib-content .lblpages {
    text-align: center;
    position: relative;
    border-bottom: 1px dashed #ccc;
    clear: both;
    margin-bottom: 20px;
}

.lib-content .lblpages span {
    display: inline-block;
    padding: 2px 10px;
    background-color: #333;
    color: #fff;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translate(-50%, 0);
}

.lib-content section.panel:hover {}

.lib-content section.panel:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.modal .lib-content section.panel .checkbox {
    display: none !important;
}

.lib-content section.panel:hover .checkbox {
    display: initial;
}

.lib-content section.panel .checkbox {
    display: none;
    position: absolute;
    top: 5px;
    left: 8px;
    z-index: 2;
}

.lib-content ul.item {
    padding: 5px;
}

.lib-content ul.item>li {}

.lib-content ul.item>li.header {
    margin-bottom: 5px;
}

.lib-content ul.item>li.header .code {
    display: inline-block;
    vertical-align: middle;
    padding: 2px;
    min-width: 60px;
    line-height: 15px;
    text-align: center;
    font-weight: bold;
    color: #fff;
}

.lib-content ul.item>li.header a {
    display: inline-block;
    line-height: 15px;
    vertical-align: bottom;
    color: #555;
}

.lib-content ul.item>li.symbol {
    float: none;
    width: auto;
    height: 105px;
    padding: 0px;
    margin-right: 0px;
    overflow: hidden;
}

.lib-content ul.item>li.symbol:hover img {
    max-height: 100%;
}

.lib-content ul.item>li.symbol img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.lib-content .epaper ul.item>li.symbol img {
    background-color: #fff;
}

.lib-content ul.item>li.symbol .ico-type {
    font-size: 50px;
    line-height: 55px;
    vertical-align: bottom;
}

.lib-content .program ul.item>li.symbol .ico-type {
    color: rgb(0, 136, 122);
}

.lib-content .cube ul.item>li.symbol .ico-type {
    color: #d9534f;
}

.lib-content ul.item>li.symbol .ion-ios-folder {
    color: #428bca;
}

.lib-content ul.item>li.prop {
    margin-left: 0px;
    margin-right: 0px;
    font-size: 11px;
    position: relative;
    white-space: nowrap;
}

.lib-content ul.item>li.prop>.info {
    position: absolute;
    top: -30px;
    right: 5px;
    display: inline-block;
    padding: 2px 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
}

.modal-body .lib-content ul.item:hover>li.option {
    display: none;
}

.lib-content ul.item:hover>li.option {
    display: initial;
}

.lib-content ul.item>li.option {
    display: none;
}

.lib-content ul.item>li.option .btn {
    width: 50px;
    height: 30px;
    padding: 5px 10px;
    text-align: right;
    color: #FFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

#popup-perms .target-group>div {
    display: none;
}

#popup-perms [data-type="company"] .target-group>.company,
#popup-perms [data-type="role"] .target-group>.role,
#popup-perms [data-type="service"] .target-group>.service,
#popup-perms [data-type="user"] .target-group>.user {
    display: block;
}

.lstPerms {
    padding: 10px 0px 5px;
}

.lstPerms .header {
    background-color: #3b4760;
    color: #fff;
    margin-left: 0px;
    margin-right: 0px;
    padding: 5px 0px;
}

.lstPerms .body {
    height: 410px;
    overflow-y: auto;
}

.discount-lstPerms .body {
    height: fit-content;
    min-height: 30px;
    max-height: 100px;
    margin-bottom: 10px;
}

.fee-lstPerms .body {
    min-height: 100px;
    margin-bottom: 10px;
    overflow-y: auto;
}

.lstPerms .body .row {
    margin-left: 0px;
    margin-right: 0px;
    padding: 5px 0px;
    border-bottom: 1px solid #eee;
}

.lstPerms .body .row .target i {
    width: 20px;
    text-align: center;
}


/* 선입금관리-선불카드발급 */

#popup-card .discount-open {
    display: block;
}

#popup-card .discount-close {
    display: none;
}


/*********** library *****************/


/************ tree menu **************/

.tree,
.tree ul {
    margin: 0 0 0 1em;
    /* indentation */
    padding: 0;
    list-style: none;
    color: #369;
    position: relative;
}

.overpanel>.alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.overpanel.reportview {
    background-color: transparent;
}


/* (indentation/2) */

.tree:before,
.tree ul:before {
    content: "";
    display: block;
    width: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-left: 1px solid;
}

.tree>li {}

.tree>li>div {
    background-color: #1D2939;
    color: #fff;
}

.tree li {
    margin: 0;
    padding: 0 1em;
    /* indentation + .5em */
    line-height: 2em;
    /* default list item's `line-height` */
    font-weight: bold;
    position: relative;
}

.tree li:before {
    content: "";
    display: block;
    width: 10px;
    /* same with indentation */
    height: 0;
    border-top: 1px solid;
    margin-top: -1px;
    /* border top width */
    position: absolute;
    top: 1em;
    /* (line-height/2) */
    left: 0;
}

.tree li:last-child:before {
    background: white;
    /* same with body background */
    height: auto;
    top: 1em;
    /* (line-height/2) */
    bottom: 0;
}


/************ fieldbox ****************/

.fldbox {
    border: 1px solid #eee;
}

.fldbox .node {
    cursor: pointer;
}

.fldbox .node circle-blue {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
}

.fldbox .node circle {
    fill: #FFA07A;
    stroke: #f00;
    stroke-width: 1px;
}

.fldbox .node text {
    font-size: 12px;
    font-weight: bold;
    font-family: "Apple SD 산돌고딕 Neo", "Apple SD Gothic Neo", 나눔고딕, NanumGothic, "맑은 고딕", "Malgun Gothic";
}

.fldbox .link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
}


/************ user profile ***********/

.bgHeader {
    background-color: #707d91;
    background-image: url(/skins/default/images/menubak.jpg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 200px;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}

.bgHeader>div {
    height: 100%;
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) -o-linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) -moz-linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
    background: rgba(0, 0, 0, 0) linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
}

.panel.question .content {
    cursor: pointer;
}

.contentpanel > .content {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

.contentpanel .wrap800 {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.overpanel .overbody .viewport .viewcontent .wrap_youtube {
    position: relative;
    width: 99vw;
}

.overpanel .overbody .viewport .viewcontent .wrap_youtube .yvideo {
    width: 100%;
    padding-right: 480px;
}

.overpanel .overbody .viewport .viewcontent .wrap_youtube .yvideo .wrap_video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.overpanel .overbody .viewport .viewcontent .wrap_youtube .yvideo .wrap_video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.overpanel .overbody .viewport .viewcontent .wrap_youtube .chat {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 480px;
    padding: 0px;
    height: 100%;
}

.overpanel .overbody .viewport .viewcontent .wrap_youtube .chat .wrap_chat {
    position: relative;
    height: 100%;
    min-height: 250px;
}

.overpanel .overbody .viewport .viewcontent .wrap_youtube .chat .wrap_chat>iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.overpanel .overbody[type=mission] .viewport {}

.contentpanel .wrap800 .warning {
    margin-top: 100px;
    text-align: center;
    color: #aaa;
}

.contentpanel .wrap800 .warning>i {
    font-size: 50px;
}

.contentpanel .wrap800 .warning .desc {
    font-size: 30px;
    line-height: 50px;
}

.pointsmry {
    position: relative;
    padding: 10px 0;
}

.pointsmry .price {
    font-size: 30px;
    display: inline-block;
    color: #000;
    line-height: 40px;
    font-weight: bold;
    padding: 0px 30px;
    position: absolute;
    border-bottom: 2px solid #3e3e4a;
}

.pointsmry .price::before {
    content: '적립금';
    margin-right: 10px;
    font-size: 17px;
    color: #333;
}

.pointsmry .price::after {
    content: '원';
    font-size: 17px;
    font-weight: normal;
    color: #333;
}

.wrapsch {
    text-align: right;
    position: relative;
    line-height: initial;
}

.wrapsch>select {
    display: inline-block;
    width: auto;
    vertical-align: top;
}

.wrapsch>.input-group {
    width: 150px;
    display: inline-table;
}

.wrapsch>.btn,
.wrapsch>.btn-group {
    vertical-align: top;
    margin: 0px;
}

.wrapsch>.btn,
.wrapsch>.btn-group>button {
    height: 35px;
}

.wraplst table>thead>tr>th {
    text-align: center;
}

.wraplst table>tbody>tr>td {
    cursor: pointer;
}


/*
.lecHeader img.logo {
  width: 150px;
  height: 150px;
  margin: 0px;
  background-color: #FFF;
  position: absolute;
  left: 10px;
  bottom: -30px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 3px solid #FFF;
}

.lecHeader h2.title  {
  color: #FFF;
  font-weight: 500;
  position: absolute;
  left: 180px;
  bottom: 5px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
*/

.contentheader {
    height: 190px;
    position: relative;
}

.contentheader .img-profile {
    position: absolute;
    left: 20px;
    bottom: -50px;
    max-width: 150px;
    padding: 5px;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    z-index: 1;
}

.contentheader .title {
    position: absolute;
    left: 180px;
    bottom: 10px;
    color: #fff;
}

.contentheader .profile-name {
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 28px;
    line-height: 35px;
}

.contentheader .profile-name>i {
    color: #9FFF00;
}

.contentheader .title .alias {
    font-size: 14px;
}

.contentheader .btn-bg {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    padding: 5px 10px;
    color: #fff;
    font-size: 13px;
}

.contentheader .summary {
    position: absolute;
    right: 0px;
    bottom: 5px;
    color: #fff;
    padding: 5px 20px;
    /*background-color: rgba(0, 0, 0, 0.15);*/
}

.contentheader .summary>li {
    width: 80px;
    text-align: center;
    cursor: pointer;
}

.contentheader .summary>li h2 {
    margin: 5px 0;
}

.content-left .info {
    margin-top: 60px;
    margin-bottom: 0;
    font-size: 13px;
}

.content-left .info i {
    width: 20px;
    text-align: center;
}

.content-left .btn-reqbuddy {
    width: 100%;
    margin: 10px 0;
    font-weight: bold;
}

.content-left .info div {
    line-height: 25px;
}

.content-left .mpanel {
    margin: 0 0 5px 0px;
}

.content-left .mpanel .md-title>i {
    color: #777;
}

.content-left .mpanel .mpanel-body {
    background-color: #f0f0f0;
    min-height: 200px;
}

.tab-pane#user_profile>form {
    padding: 10px;
}


/************ file upload ************/

.fileUpload {
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}

.fileUpload input#upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

.cropContainer {
    min-height: 100px;
    font-size: 0px;
    line-height: 0;
    position: relative;
    -moz-user-select: none;
    direction: ltr !important;
    background-color: #F5F5F5;
}

.jcrop-holder {
    margin: 0 auto;
}

.jcrop-keymgr {
    opacity: 0;
}


/************ overlay ****************/

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10000;
    background: #000;
    opacity: 0;
    display: none;
    -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
    transition: opacity 0.5s, visibility 0s 0.5s;
}

.mloading {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.1);
    color: #fb3e3e;
    -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
    transition: opacity 0.5s, visibility 0s 0.5s;
}

.mloading .infobx {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 12px;
}

.mloading .infobx.white {
    background-color: rgba(255, 255, 255, 0.5);
}

.loading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.5);
    -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
    transition: opacity 0.5s, visibility 0s 0.5s;
}

.loading .infobx {
    width: 250px;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 12px;
}

.loading.icon {}

.loading.icon .infobx {
    width: 260px;
    background-color: transparent;
}

.loading .infobx.circle {
    width: 260px;
    background-color: #fff;
}

.loading .infobx .desc {
    margin: 5px 0px 0px 0px;
    font-size: 11px;
    text-align: justify;
}

.loading.animation .infobx {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
    background-color: transparent;
}

.loading.animation .infobx div {
    position: absolute;
    top: 27px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.loading.animation .infobx div:nth-child(1) {
    left: 6px;
    animation: lds-ellipsis1 0.6s infinite;
}

.loading.animation .infobx div:nth-child(2) {
    left: 6px;
    animation: lds-ellipsis2 0.6s infinite;
}

.loading.animation .infobx div:nth-child(3) {
    left: 26px;
    animation: lds-ellipsis2 0.6s infinite;
}

.loading.animation .infobx div:nth-child(4) {
    left: 45px;
    animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(19px, 0);
    }
}

.loading .infobx .progress-bar span {
    display: none;
}

.dropdown-menu {
    font-size: 12px;
}

.modal-footer .dropdown-menu>li:hover {
    background-color: #EFEFEF;
}


/* Effects */

.open .overlay {
    opacity: 1;
    display: initial;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}


/* Overlay closing cross */

.overlay .closex {
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 0;
    font-size: 30px;
    background: transparent;
    border: none;
    color: #fff;
    opacity: 0.5;
    z-index: 10001;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.overlay.itemview .closex {
    width: 50px;
    height: 50px;
}

.overlay.itemview .closex:hover {
    opacity: 1;
}

.overlay.itemview .closex::before {
    content: '';
    position: absolute;
    left: 0%;
    width: 100%;
    height: 2px;
    background: #fff;
    transform: rotate(45deg);
    z-index: 1;
}

.overlay.itemview .closex::after {
    content: '';
    position: absolute;
    left: 0%;
    width: 100%;
    height: 2px;
    background: #fff;
    transform: rotate(-45deg);
    z-index: 1;
}

.overlay.itemview:hover>a.navi {
    display: inline-block;
}

.overlay.itemview>a.navi {
    position: fixed;
    top: 50%;
    opacity: 0.5;
    transform: translateY(-50%);
    color: #777;
    font-size: 30px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
    display: none;
}

.overlay.itemview>.btn-add {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: #F0AD4E;
    border-color: #EEA236;
    border-radius: 50%;
    display: inline-block;
    line-height: 50px;
    width: 50px;
    height: 50px;
    color: #fff;
    font-weight: normal;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    padding: 0px;
    -moz-box-shadow: 3px 0 5px rgba(12, 12, 12, 0.5);
    -webkit-box-shadow: 3px 0 5px rgba(12, 12, 12, 0.5);
    box-shadow: 2px 2px 5px rgba(12, 12, 12, 0.5);
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10;
}


/*
.overlay.itemview > .btn-add{
  width: 40px;
  height: 50px;
  position: absolute;
  right: 75px;
  top: 10px;
  background: transparent;
  border: none;
  color: #fff;
  opacity: 0.5;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.overlay.itemview > .btn-add:hover {
  opacity: 1;
}

.overlay.itemview > .btn-add::before {
  content: '';
  position: absolute;
  left: 0%;
  width: 100%;
  height: 2px;
  background: #fff;
  z-index: 1;
}

.overlay.itemview > .btn-add::after {
  content: '';
  position: absolute;
  left: 0%;
  width: 100%;
  height: 2px;
  background: #fff;
  transform: rotate(-90deg);
  z-index: 1;
}
*/

.overlay.itemview>a.navi:hover {
    color: #fff;
}

.overlay.itemview>a.btnPrev {
    left: 5%;
}

.overlay.itemview>a.btnNext {
    right: 5%;
}

.overlay .mnuback.title {
    position: absolute;
    top: 10px;
    left: 5px;
    font-size: 17px;
    color: #ccc;
    z-index: 1;
    text-decoration: none;
}

.mod_paper .overlay .closex {
    top: 13px;
}

.overlay .body {
    position: relative;
    height: 100%;
    width: 100%;
    /*
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  */
    white-space: nowrap;
    text-align: center;
}

body .overlay .body.autoscroll {
    overflow-x: hidden;
    overflow-y: auto;
}

.overlay .body .imgs {
    background-color: #fff;
    display: inline-block;
    margin: 10px;
    padding: 20px;
    vertical-align: middle;
    text-align: justify;
    max-width: 90%;
}

.overlay .body .imgs img {
    max-width: 100%;
    height: auto;
}

.overlay .body::before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.overlay .body .wrapzoom {
    height: 100%;
    background-color: #fff;
}

.overlay .body .wrapzoom:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.overlay .body .wrapzoom img {
    max-width: 100%;
    max-height: 100%;
}

.overlay .body .imgs>div:not(:first-child) {
    margin-top: 10px;
}


/***********/

.overpanel:hover .cmdbar {
    opacity: 1;
}

.overpanel .cmdbar {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.7);
    left: 0px;
    bottom: 0px;
    color: #B2B2B2;
    font-size: 12px;
    position: absolute;
    opacity: 0;
    height: 30px;
    line-height: 30px;
    width: 100%;
    color: #fff;
    padding-left: 350px;
    margin-left: -350px;
}

.overpanel .cmdbar a {
    color: #fff;
    margin: 0 5px;
}

.overpanel .cmdbar>li {
    padding: 0 5px;
}

.overpanel .cmdbar .title {
    font-weight: 700;
}

.overpanel .overright .property>.media {
    padding: 5px;
    margin: 0px;
}

.overpanel .overright .property>.media .img-circle {
    width: 50px;
}

.overpanel .overright .property>.media strong {
    display: block;
    padding: 4px 0;
    font-size: 15px;
}

.overpanel .overright .property>.media {
    position: relative;
    overflow: visible;
}

.overpanel .overright .property>.media a.text-muted {
    color: #999;
}

.overpanel .overright .property>.media .option {
    position: absolute;
    top: -5px;
    right: 0px;
}

.overpanel .overright .property>.media .option .btn {
    padding: 0 5px;
    background: none;
    border: none;
    line-height: 1px;
}

.overpanel .overright .wrapinfo .media {
    padding: 5px;
}

.overpanel .overright .wrapinfo .media .img-circle {
    width: 35px;
}

.overpanel .overright .prop {
    font-size: 12px;
    min-height: 50px;
    padding: 5px;
    margin: 0px;
    background-color: rgba(255, 255, 255, 0.1);
}

.overpanel .overright .prop label {
    color: #aaa;
    width: 50px;
}

.sidepanel .nav {
    box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.1);
    margin-bottom: 10px;
}

.sidepanel .nav>li {}

.sidepanel .nav>li>a {
    padding: 5px 15px;
    background-color: transparent;
    font-size: 13px;
    font-weight: normal;
    color: #ccc;
}

.sidepanel .nav>li>a:hover {
    color: #eee;
    box-shadow: 0px 2px 0px #eee;
}

.sidepanel .nav>li.active>a {
    font-weight: bold;
    background-color: transparent;
    color: #fff;
    box-shadow: 0px 2px 0px #428BCA;
}

.sidepanel .tab-pane {
    padding: 5px;
    margin-bottom: 5px;
}

.sidepanel .tab-pane.extract {
    margin-bottom: 50px;
}

.leftpanel .sidepanel .tab-pane {
    padding: 0px;
}

.overpanel .overright .postbx {
    margin: 0px;
}

.overpanel .overright .postbx .panel-footer {
    padding: 5px;
    border: none;
}

.overpanel #comments .filter {
    padding: 0 5px;
}

.overpanel #comments a.text-muted {
    color: #fff;
}

.overpanel #comments a.text-danger {
    color: #c29c84;
}

.overpanel #comments .filter>li {
    line-height: 30px;
    font-size: 12px;
}

.overpanel #comments .panel-comments {
    margin-bottom: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: rgba(255, 255, 255, 0.1);
}

.overpanel #history {
    background-color: rgba(255, 255, 255, 0.1);
}

.overpanel #report {
    background-color: rgba(255, 255, 255, 0.1);
}

.overpanel #report .summary {
    white-space: nowrap;
}

.overpanel #report .summary .box {
    display: inline-block;
    width: 48%;
    margin-left: 5px;
    min-height: initial;
    text-align: center;
    color: #fff;
    background-color: transparent;
    border: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.overpanel #report .summary .box h3 {
    margin: 10px 0px 0px;
    text-align: center;
}

.overpanel #report .chart .qtchart {
    margin: 0 5px;
}

.overpanel #report h5.title {
    font-size: 12px;
}


/************ actionpanel ****************/

.actionpanel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    display: none;
    background-color: #e4e7ea;
    opacity: 0;
    -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
    transition: opacity 0.5s, visibility 0s 0.5s;
    z-index: 101;
}

.action>.actionpanel {
    display: block;
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.actionpanel .headerbar .header-left {
    max-width: 70%;
}

.actionpanel .headerbar .header-left a.page-title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    margin-left: 0px;
}

.actionpanel .headerbar .header-left a.page-title:hover,
.actionpanel .headerbar .header-left a.page-title:focus {
    background-color: transparent;
}

.actionpanel .headerbar {
    background-color: #2A2A2A;
}

.actionpanel .headerbar .headermenu .btn-default {
    background-color: transparent !important;
}

.actionpanel .overbody {
    padding: 60px 10px 10px;
    margin: 0px;
    height: 100%;
}

.actionpanel .overbody>.content {
    height: 100%;
    background-color: #fff;
}

.actionpanel .headerbar .title::before {
    content: '통합분석';
}

.actionpanel.applicant .headerbar .title::before {
    content: '응시자리스트';
}

.actionpanel .headerbar .btn-report,
.actionpanel.applicant .headerbar .btn-applicant {
    display: none;
}

.actionpanel.applicant .headerbar .btn-report {
    display: inline-block;
}


/************ oversection ****************/

.oversection {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    display: none;
    opacity: 0;
    -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
    transition: opacity 0.5s, visibility 0s 0.5s;
}

.over>.sections>.oversection:last-child {
    display: block;
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    z-index: 102;
}

.oversection .headerbar {
    padding: 0px 5px;
}

.oversection .headerbar .btn {
    border: none;
}

.oversection .overbody {
    padding-top: 60px;
}

.oversection .overbody>.contentpanel {
    background-color: #FFF;
    padding: 10px;
    margin: 0px 10px 10px 10px;
    position: relative;
    height: 100%;
}

.oversection .overright {
    background-color: #3b414a;
    display: none;
    width: 380px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 102;
    color: #FFF;
    padding: 5px;
    -moz-box-shadow: -3px 0 5px rgba(12, 12, 12, 0.05);
    -webkit-box-shadow: -3px 0 5px rgba(12, 12, 12, 0.05);
    box-shadow: -3px 0 5px rgba(0, 0, 0, 0.5);
    overflow-x: hidden;
}


/************ overpanel ****************/

.overpanel {
    /*
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
  transition: opacity 0.5s, visibility 0s 0.5s;
  -webkit-overflow-scrolling: touch;
  */
    background-color: rgba(0, 0, 0, 0.85);
    text-align: center;
    min-height: 100vh;
}

.overpanel.reportview {
    background-color: transparent;
}

/*
.overpanel.center::before {
    display: inline-block;
    vertical-align: middle;
    content: "";
    height: 100%;
    min-height: 100vh;
    margin-right: -8px;
}
*/

.over>.panels>.overpanel:last-child {
    display: block;
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.overright .closex {
    position: absolute;
    right: 10px;
    top: 13px;
    padding: 0;
    font-size: 30px;
    background: transparent;
    border: none;
    color: #fff;
    opacity: 0.5;
    z-index: 1;
}

.overpanel:hover>a.navi {
    display: inline-block;
}

.overpanel>a.navi {
    position: fixed;
    top: 50%;
    opacity: 0.5;
    transform: translateY(-50%);
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
    color: #777;
    font-size: 30px;
    display: none;
}

.overpanel>a.navi:hover {
    color: #fff;
}

.overpanel>a.btnPrev {
    left: 5%;
}

.overpanel>a.btnNext {
    right: 5%;
}

.overpanel .headerbar .header-left {
    max-width: 65%;
    position: absolute;
}

.overpanel .headerbar .header-left a.page-title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    margin-left: 0px;
    color: #fff;
}

.overpanel .headerbar .header-left a.page-title:hover,
.overpanel .headerbar .header-left a.page-title:focus {
    background-color: transparent;
}

.overpanel .headerbar {
    background-color: rgba(0, 0, 0, .5);
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    white-space: nowrap;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    min-height: 70px;
}

.overpanel .headerbar:hover {
    transform: translateY(0px) !important;
}

.overpanel.hhide .headerbar {
    transform: translateY(-70px);
}

@keyframes vtfadeout {
    from { transform: translateY(0) }
    to { transform: translateY(-50px);}
}

.overpanel .headerbar .headermenu {
}

.mod_paper .overpanel .headerbar .headermenu {
    display: initial;
}

.overpanel .headerbar .headermenu .btn-default {
    background-color: transparent !important;
    border: none;
    color: #fff;
}

.overpanel .overbody {
    padding: 0px;
    margin: 0px auto;
    vertical-align: middle;
}

.overpanel:not(.center) .overbody {
}

.overpanel .overbody[type="image"] {}

.overpanel .overbody[type="image"]>.viewport {}

.overpanel .overbody[type="image"]>.viewport>.viewcontent {}

.overpanel .overbody[type="image"]>.viewport>.viewcontent>img {}

.overpanel .overbody .viewport .viewcontent {
    height: 100dvh;
}

.overpanel .overbody[type=book] .viewport .viewcontent {
    display: flex;
    justify-content: center;
    align-items: center;
}

.overpanel .overbody .item {
    height: 100%;
}

.overpanel .overbody .viewport.vmid .viewcontent {
    display: table-cell;
    vertical-align: middle;
    overflow-y: auto;
}

.overpanel .overbody[type=mission] .viewport {}

.overpanel .overbody[type=mission] .viewport .viewcontent {
    width: 90%;
    max-height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    margin: 0px;
}

.overpanel .overbody[type=mission] .viewport .viewcontent .btn-max {
    position: absolute;
    z-index: 2;
    right: 10px;
    top: 10px;
    font-size: 40px;
    color: #fff;
    text-shadow: 1px 1px 5px #333;
    cursor: pointer;
}

.overpanel .overbody .viewport .viewcontent .wrap_mission {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 50px;
}

.overpanel .overbody .viewport .viewcontent .plyr {
    height: 100dvh;
}

.overpanel .overbody .viewport .viewcontent video {
    max-width: 100%;
    max-height: 100%;
}

.overpanel .overbody .viewport .viewcontent .items {
    height: 100%;
}

.overpanel .overbody .viewport .viewcontent .items>.item {
    position: relative;
    height: 100%;
}

.overpanel .overbody .viewport .viewcontent .items .item .plyr,
.overpanel .overbody .viewport .viewcontent .items .item video,
.overpanel .overbody .viewport .viewcontent .items .item img {
    max-width: 98%;
    max-height: 98%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.overpanel .overbody .viewport .viewcontent .items .item .plyr {
    min-width: 360px;
}

.overpanel .overbody[type="image"] .viewport .viewcontent .btn-download {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    color: #fff;
    text-align: center;
}

.overpanel .overbody[type="image"] .viewport .viewcontent:not(.lock) .item:hover .btn-download {
    display: inline-block;
}

.overpanel .overright {
    /*background-color: #1d2939;*/
    background-color: #3b414a;
    display: none;
    width: 380px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 102;
    color: #FFF;
    padding: 5px;
    -moz-box-shadow: -3px 0 5px rgba(12, 12, 12, 0.05);
    -webkit-box-shadow: -3px 0 5px rgba(12, 12, 12, 0.05);
    box-shadow: -3px 0 5px rgba(0, 0, 0, 0.5);
    overflow-x: hidden;
}

.ibg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 101;
    background: rgba(0, 0, 0, 0.5);
    display: none;
}

body>.bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 101;
    background: rgba(0, 0, 0, 0.5);
}

body>.postbx {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 102;
    box-shadow: 0px 4px 4px #333;
    padding: 5px;
}

.oversection .overright>div,
.overpanel .overright>div {
    display: none;
}

.panel-expand-right .overright {
    height: 100%;
    display: block;
    overflow-y: auto;
    position: fixed;
    text-align: left;
}

.end > .ibg,
.start > .ibg,
.bgon > .ibg,
.msgon > .ibg,
.mnu-expand > .ibg,
.expand-right > .ibg,
.panel-expand-right > .ibg {
    display: block;
}

.nobg .ibg {
    display: none !important;
}

.panel-expand-right .overright div.active {
    display: block;
}

.overpanel .viewport {
    height: 100dvh;
}

.overpanel .viewport.vmid {
    display: table;
}

.overpanel .content {
    margin: 0px;
    text-align: center;
}

.overpanel:not(.center) .overbody[type='image'],
.overpanel:not(.center) .overbody[type='file'],
.overpanel:not(.center) .overbody[type='article'] {
    overflow: hidden;
    display: block;
    height: 100%;
}

.overpanel .overbody[type='article'] .content {
    max-width: 600px;
    text-align: left;
    display: inline-block;
}

.overpanel .overbody[type='article'] .content .panel {
    height: 99%;
}

.overpanel .overbody[type='article'] .content .panel .panel-heading .option {
    display: none !important;
}

.overpanel .overbody .viewport,
.overpanel .overbody .content,
.overpanel .overbody .content>.wrapfile,
.overpanel .overbody .content>.wrapfile .items {
    height: 100%;
}

.overpanel .overbody[type='pdf'] .content,
.overpanel .overbody[type='theory'] .content,
.overpanel .overbody[type='question'] .content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.overpanel .overbody[type='file'] .content>.wrapfile .media.image img {
    max-width: 98%;
    max-height: 98%;
}

.overpanel .overbody[type='file'] .content>.wrapfile .media {
    height: 100%;
}

.overpanel .overbody[type='file'] .content>.wrapfile .media video,
.overpanel .overbody[type='file'] .content>.wrapfile .media img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.overpanel .overbody .swiper-container:hover .btns {
    display: inline-block;
}

.overpanel .overbody .swiper-container .btns {
    position: absolute;
    top: 50%;
    color: #fff;
    z-index: 1;
    cursor: pointer;
    margin-top: -50px;
    text-shadow: 2px 2px 2px #333;
    opacity: .5;
    display: none;
}

.overpanel .overbody .swiper-container .btns:hover {
    color: rgba(255, 255, 255, 1);
}

.overpanel .overbody .swiper-container .btns.left {
    left: 5%;
}

.overpanel .overbody .swiper-container .btns.right {
    right: 5%;
}

.overpanel .overbody[type='paper'] .content {
    text-align: left;
}

.sidepanel form .input-sm {
    line-height: 19px;
}

.sidepanel form .btn-sm {
    padding: 6px 10px;
    line-height: 21px;
}

form .form-header {
    border-bottom: 1px solid #777;
    margin-bottom: 10px;
}

form .form-footer {
    border-top: 1px solid #777;
    margin-top: 10px;
    padding: 10px 0;
    text-align: center;
}

.sidepanel .form-header .subject {
    margin: 5px 0;
}

.sidepanel .form-header .desc {
    color: #fff;
}

.sidepanel form .form-group {
    margin-left: 0px;
    margin-right: 0px;
    color: #555;
    font-size: 12px;
}

.sidepanel form.frmReport .form-group {
    font-size: 13px;
}

.sidepanel form.frmReport .form-group .control-label {
    font-size: 14px;
}

.sidepanel form.frmReport .form-body h5 {
    font-size: 13px;
}

.sidepanel form.frmReport .form-blk {
    margin: 0px 5px;
    font-size: 12px;
    color: #eee;
}

.sidepanel form.frmReport .form-blk>li {
    line-height: 25px;
}

.sidepanel form.frmReport .form-blk .desc {
    font-size: 11px;
    color: #cedaff;
    line-height: normal;
}

.sidepanel form.frmReport .form-group {
    color: #eee;
    font-size: 12px;
}

.sidepanel form .control-label {
    color: #ccc;
    font-size: 12px;
}

.sidepanel form .form-control {
    font-size: 12px;
}

.input-group-btn .btnddl.btn-sm {
    padding: 6px 5px;
}

.sidepanel form .form-inline .input-group {
    display: inline-table;
    vertical-align: middle;
}

.sidepanel form .checkbox-inline,
.sidepanel form .radio-inline {
    /*padding-top: 0px;*/
    line-height: 20px;
    color: #fff;
    vertical-align: middle;
}

.overpanel .modalbg {
    z-index: 103;
}

.modalbg .progress {
    width: 150px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ibg.on {
    display: inline-block;
}

.ibg .msgbx {
    width: 200px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 5px 10px;
    background-color: rgba(255, 255, 255, 0.8);
}

.ibg .msgbx .msg {
    padding-bottom: 5px;
    font-size: 12px;
}

.ibg .msgbx .progress {
    background-color: #ccc;
}

.frmFile .uploadbox {
    margin-left: -5px;
    margin-right: -5px;
}

.col-xs-3.control-label {
    padding-top: 7px;
}

.modal .form-group .checkbox-inline {
    padding-top: 9px;
}


/************ test ****************/

.sidepanel .infobx {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 5px;
    /*padding: 5px 40px 5px 5px;*/
    margin-bottom: 5px;
    position: relative;
}

.sidepanel .infobx .btn-group {
    width: 100%;
    margin-bottom: 0px;
}

.sidepanel .infobx .btn-group .btn,
.sidepanel .infobx .btn-group .btn-test {
    width: 100%;
    text-align: left;
    font-size: 13px;
    border-radius: unset;
    color: #333;
    position: relative;
    background-color: #eee;
}

.sidepanel .infobx .btn-group .btn>i,
.sidepanel .infobx .btn-group .btn-test>i {
    position: absolute;
    top: 10px;
    right: 10px;
}

.sidepanel .infobx .btn-group .dropdown-menu {
    width: 100%;
    color: #333;
}

.sidepanel .infobx .btn-group .dropdown-menu>li {
    padding: 5px;
    position: relative;
    cursor: pointer;
}

.sidepanel .infobx .btn-group .dropdown-menu>li:hover {
    background-color: #EFEFEF;
}

.sidepanel .infobx .btn-group .dropdown-menu>li .badge {
    position: absolute;
    right: 5px;
}

.sidepanel .infobx .btn-season-add {
    position: absolute;
    right: 5px;
}

.sidepanel .infobx .prop {
    font-size: 12px;
    padding: 5px;
}

.sidepanel .cmds {
    margin: 0px 0px 10px;
    padding: 5px 0px;
    background-color: #343E4D;
}

.sidepanel .cmds>div {
    padding-left: 5px;
    padding-right: 5px;
}

.sidepanel .extract .cmds .tcnt {
    line-height: 35px;
}

.sidepanel .smry {
    margin: 5px;
    font-size: 13px;
    line-height: 20px;
}

.sidepanel .smry b {
    color: #febf6d;
    padding: 3px;
}

.cubeview .sidepanel .books .smry {
    background-color: rgba(255, 255, 255, 0.1);
    margin: 0px;
    padding: 5px;
}

.sidepanel .profile {
    color: #ccc;
    white-space: nowrap;
}

.sidepanel .profile>input[type="checkbox"] {
    display: none;
    position: absolute;
    top: -5px;
    left: 5px;
    z-index: 1;
}

.sidepanel .profile .cover,
.sidepanel .profile .thumb {
    float: left;
    cursor: pointer;
}

.sidepanel .profile .cover {
    width: 30px;
    margin-right: 10px;
}

.sidepanel .profile .thumb.fa-file-alt {
    line-height: 40px;
    text-align: center;
    font-size: 30px;
    color: #fff;
}

.sidepanel .profile .title,
.sidepanel .profile .name {
    color: #fff;
    font-size: 13px;
    font-weight: normal;
}

.sidepanel .profile .info {
    padding-top: 5px;
    font-size: 11px;
}

.sidepanel .profile .info .desc {
    margin-right: 5px;
}

.sidepanel.wide .profile .info .desc {
    display: none;
}

.sidepanel .wshow {
    display: none;
}

.sidepanel.wide .wshow {
    display: initial;
}

.qnos .no {
    width: 20px;
    height: 20px;
    display: inline-block;
    overflow: hidden;
    line-height: 20px;
    text-align: center;
    -webkit-border-radius: 5px;
    font-size: 11px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    color: #000;
    margin-bottom: 5px;
    cursor: pointer;
}

.qnos .no:hover {
    background-color: #eee;
    border: 1px solid #000;
}

.qnos .no.o {
    background-color: #337fd5;
    color: #fff;
    border-color: #337fd5;
}

.qnos .no.x {
    background-color: #d53833;
    color: #fff;
    border-color: #d53833;
}

.sidepanel .wraplist {
    margin: 5px 0px;
    font-size: 12px;
}

.sidepanel .wraplist .row {
    position: relative;
    padding: 10px 0px;
    border-bottom: 1px solid #ccc;
    margin: 0px;
}

.cubeview .sidepanel .wraplist .books>.row:first-child {
    border-top: 2px solid #ccc;
}

.sidepanel .wraplist .row.clinic {
    border-bottom: 1px dashed #ccc;
    margin: 0px;
}

.sidepanel .wraplist .row.clinic.type8363 .fa-file-text {
    color: #fff;
}

.sidepanel .wraplist .row.clinic.type8363 .info .title::before {
    content: "[유사]";
}

.sidepanel .wraplist .row.clinic.type8364 .fa-file-text {
    color: #fff870;
    /*fff870*/
}

.sidepanel .wraplist .row.clinic.type8364 .info .title::before {
    content: "[취약]";
}

.sidepanel .wraplist .row.header {
    background-color: rgba(255, 255, 255, 0.1);
    font-size: 11px;
}

.sidepanel .wraplist>.row {
    cursor: pointer;
}

.sidepanel .wraplist .row.header .col-xs-8 {
    padding-right: 10px;
}

.sidepanel .wraplist .row .col-xs-8 {
    padding-right: 2px;
}

.sidepanel .wraplist .row .col-xs-2 {
    text-align: center;
    padding-left: 2px;
    padding-right: 2px;
}

.sidepanel .wraplist .row .rate {
    color: #fff;
}

.sidepanel .wraplist .row span.rate,
.sidepanel .wraplist .row .rate>span {
    font-size: 17px;
    font-weight: 700;
    line-height: 35px;
}

.sidepanel .wraplist .btn-target {
    color: #fff;
    text-decoration: none;
}

.sidepanel .wraplist .users {
    display: none;
}

.sidepanel .wraplist .users .row.test {
    background-color: #1b1d24;
}

.sidepanel .wraplist .users.group {
    background-color: rgba(0, 0, 0, 0.3);
}

.sidepanel .wraplist .users.list,
.sidepanel .wraplist .users.expand {
    display: inherit;
}

.sidepanel .wraplist .score {
    color: #f0e9dc;
    font-size: 20px;
    line-height: 40px;
}

.sidepanel .wraplist .applyok .score {
    cursor: pointer;
}

.sidepanel .wraplist span.clinic {
    color: #f0e9dc;
    font-size: 20px;
    line-height: 40px;
}

.sidepanel .wraplist span.clinic.on {
    cursor: pointer;
}

.sidepanel .wraplist .smsok {
    color: #8be456;
}

.sidepanel .wraplist .option {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    font-size: 0px;
    display: none;
}

.sidepanel .wraplist .optionbar {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 10px;
    background-color: rgba(255, 255, 255, 0.2);
    font-size: 10px;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.sidepanel .wraplist .row.open .option {
    display: inline-block;
}

.sidepanel .wraplist .row.open .optionbar {
    display: none;
}

.sidepanel .wraplist .row:hover .optionbar {
    display: flex;
}

.sidepanel .wraplist>.row.sel {
    background-color: #405671;
}

.sidepanel .wraplist>.row .ico-expand {
    width: 15px;
    text-align: center;
    position: absolute;
    left: 0px;
    line-height: 1.2em;
}

.sidepanel .wraplist .users .row.sel {
    background-color: #36485c;
}

.sidepanel .wraplist>.row.expand .ico-expand::before {
    content: '\f0d7';
}

.sidepanel .wraplist .row.sel .profile>input[type="checkbox"] {
    display: initial;
}

.sidepanel .wraplist .row:hover .profile>input[type="checkbox"] {
    display: initial;
}

.sidepanel .wraplist .option>a {
    height: 100%;
    width: 50px;
    display: inline-block;
    text-align: center;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    position: relative;
}

.sidepanel .wraplist .option>a::before {
    content: " ";
    display: inline-block;
    height: 100%;
    width: 1%;
    vertical-align: middle;
}

.sidepanel .wraplist .option>a:first-child {
    background-color: #f8bb61;
}

.sidepanel .wraplist .option>a:last-child {
    background-color: #f86b6b;
}

.sidepanel .wraplist .option>a i {
    margin-right: 3px;
}

.sidepanel .search .wrapbody {
    padding: 5px;
}

.sidepanel .search .frmSearch .btn-search {
    margin-top: 0px;
}

.sidepanel .search .results {
    padding-top: 5px;
}

.sidepanel .search .results .smry {
    margin: 5px 0px;
    font-size: 12px;
    color: #eee;
}

.sidepanel .search .results h5 {}

.sidepanel .search .results .buddy .info .prop>a.name {
    color: #fff;
}

.sidepanel .search .results .buddy:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.sidepanel .search .results .buddy .btn-reqbuddy {
    margin-top: 14px;
}

.sidepanel .search .resrc {
    margin-left: 0px;
    margin-right: 0px;
    padding: 5px 0px;
    cursor: pointer;
}

.sidepanel .search .resrc:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.sidepanel .search .resrc .thumb {
    position: absolute;
    top: 3px;
}

.sidepanel .search .resrc .info {
    margin-left: 35px;
    font-size: 12px;
}

.sidepanel .search .resrc .info .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidepanel .search .resrc .info .title a {
    color: #f9f9da;
    text-decoration: none;
}

.sidepanel .search .resrc .info>.date {
    font-size: 11px;
}

.sidepanel .search .resrc .btn {
    margin-top: 3px;
    padding: 2px 10px;
    font-size: 12px;
}


/**************************** acitivy *********************/

#home_activity .more {
    text-align: center;
    background-color: #f5f5f5;
    padding: 10px;
    border: 1px solid #eee;
    cursor: pointer;
}

#home_activity .more:hover {
    color: #000;
}


/**************************** store *********************/

.product .status {
    display: inline-block;
    width: 15px;
    height: 15px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background-color: #eee;
}

.product .status.on {
    background-color: #8a2edc;
}

.products {}

.storeview .products.list>div {
    width: 100%;
    margin-bottom: 5px;
}

.storeview .products.list>div>.product {
    box-shadow: initial;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 0px;
}

.storeview .products.list>div>.product .thumb {
    width: 100px;
    float: left;
}

.storeview .products.list>div>.product .thumb .cover {
    height: 120px;
}

.storeview .products.list>div>.product .info {
    margin-left: 110px;
    overflow: hidden;
}

.products .product {
    position: relative;
    cursor: pointer;
    -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
}

.products .product>input[type=checkbox] {
    position: absolute;
    margin: 10px;
    z-index: 1;
    display: none;
    transform: scale(2);
    -ms-transform: scale(2);
    -webkit-transform: scale(1.5);
}

.products .product .thumb {
    position: relative;
    padding: 5px;
    overflow: hidden;
}

.products .product.new .thumb::before {
    content: "new";
    position: absolute;
    padding: 3px 10px;
    opacity: 0.9;
    transform: rotate(-45deg);
    background-color: #de4444;
    color: #fff;
    top: 5px;
    left: -32px;
    width: 100px;
    text-align: center;
    z-index: 1;
}

.products .product .thumb .cover {
    padding-bottom: 100%;
}

.products .product:hover .thumb .cover {
    background-size: contain !important;
    position: relative;
}

.modal .products .product:hover .thumb .back::before,
.modal .products .product.sel .thumb .back::before {
    content: '\f058';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    font-size: 30px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.products .product:hover {
    -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}

.products .product .back {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.products .product .back>i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: #fff;
    text-shadow: 1px 1px 3px #000;
    display: none;
}

.products .product .back a {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.products .product .back a>span {
    display: none;
}

.products .product .back .cmd {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.products .product.sel .back .cmd {
    display: none;
}

.products .product.sel .back>i {
    display: inline-block;
}

.products .product.sel input[type=checkbox],
.products .product:hover input[type=checkbox],
.products .product.sel .back,
.products .product:hover .back {
    display: block;
}

.products .product .info {
    padding: 5px;
}

.products .product .info label,
.frmProduct .info label {
    margin: 0px;
    font-size: 11px;
    border-radius: 5px;
    padding: 0px 7px;
    background-color: #5782d7;
    color: #fff;
}

.products .product .info .title {
    margin: 10px 0;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.frmProduct .info .title {
    margin: 10px 0;
    font-size: 15px;
    text-overflow: ellipsis;
}

.products .product .info .cmd {
    display: none;
    font-size: 13px;
}

.products .product .info .cmd>a {
    text-decoration: none;
    color: #333;
}

.storeview .products.list>div>.product .thumb .cmd {
    display: none;
}

.storeview .products.list>div>.product .info .cmd {
    display: block;
}

.storeview .products.list>div>.product .info .price,
.frmProduct .info .price {
    padding: 0 0 10px;
    text-align: left;
    height: auto;
}

.products .product .info .price {
    text-align: right;
    height: 20px;
}

.products .product .info .price b,
.frmProduct .info .price b {
    color: #e73e3e;
}

.products .product .info .price .discount {
    font-size: 11px;
    text-decoration: line-through;
    color: #999;
}

.prodview .pathinfo {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.prodview .prodinfo {
    margin-bottom: 20px;
}

.prodinfo .input-group .btn {
    border-left: initial;
    border-radius: 0;
    z-index: 1;
}

.prodinfo .pic {
    width: 100%;
    height: 360px;
    background-color: #f5f5f5;
}

.prodinfo .cate {
    padding: 0px 7px;
    border-radius: 5px;
    font-size: 11px;
}

.prodinfo .title {
    color: #000;
    margin: 0;
}

.prodview .prodinfo .title {
    line-height: 65px;
}

.prodinfo .stock {}

.prodinfo .shipbx {
    margin: 10px 0;
    padding: 10px 0;
}

.prodinfo .pricebx {
    margin: 20px 0;
    font-size: 20px;
}

.prodinfo .drate>span {
    display: inline-block;
    color: #f44336;
    font-size: 35px;
    font-weight: 600;
    margin-top: 25px;
}

.prodinfo .pricebx .dprice {
    font-size: 25px;
    font-weight: 700;
    color: #000;
    display: inline-block;
}

.prodinfo .pricebx .price {
    font-size: 15px;
    text-decoration: line-through;
    color: #f44336;
    display: inline-block;
}

.prodinfo .cntbx {
    margin: 10px 0;
}

.prodinfo .cntbx label {}

.prodinfo .cntbx .price {
    font-size: 20px;
    font-weight: 700;
    color: #000;
}

.prodinfo .totalbx {
    margin: 20px 0;
    text-align: right;
}

.prodinfo .totalbx .price {
    font-size: 25px;
    font-weight: 700;
    color: #000;
    display: inline-block;
    width: 150px;
}

.prodview .tabs {
    padding: 20px 20px 0;
    background-color: #333;
    color: #fff;
    font-size: 15px;
}

.prodview .tabs li {
    width: 100px;
    text-align: center;
    border-bottom: 2px solid transparent;
    padding: 5px;
}

.prodview .tabs li.active {
    border-bottom: 2px solid #e92828;
}

.bar {
    /*background-color: rgba(0, 0, 0, 0.1);*/
    padding: 0 5px !important;
    margin-bottom: 7px !important;
    line-height: 45px;
}

.bar>li {
    float: left;
}

.bar>li .title {
    margin: 0px;
    display: inline-block;
}

.bar>li .title b {
    color: #d9534f;
}

.bar>li.filter {
    float: right;
}

.bar .btn-group {
    margin: 5px 0;
}

.bar .btn-cate {
    background: transparent;
    font-size: 16px;
    font-weight: bold;
    padding: 5px 0;
}

.mainpanel2 .listpanel {
    margin: 0px 10px 10px 10px;
}

.storepanel .nav-tabs {
    margin-bottom: 10px;
    white-space: nowrap;
}

.storepanel .row .col {
    margin-bottom: 15px;
}

.storepanel .item-list .item {
    cursor: pointer;
    background-color: #fff;
}

.storepanel .item-list .item:hover .cover .bg {
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.storepanel .item-list .item>.cover {
    position: relative;
    height: 200px;
    overflow: hidden;
    background-color: #fcfcfc;
}

.storepanel .item-list .item>.cover .bg {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

.storepanel .item-list .item>.cover>.thumb {
    width: 100%;
}

.storepanel .item-list .item>.cover>.img-circle {
    position: absolute;
    left: 10px;
    bottom: -30px;
}

.storepanel .item-list .item>.cover>.redbox {
    position: absolute;
    right: 0px;
    bottom: 0px;
    display: inline-block;
    width: 50px;
    height: 20px;
    line-height: 20px;
    background-color: rgba(255, 0, 0, 0.8);
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: #FFF;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.storepanel .item-list .item>.info {
    line-height: 20px;
}

.storepanel .hbox .item {
    overflow: hidden;
    height: 120px;
    white-space: nowrap;
}

.storepanel .hbox .item::after {
    clear: both;
    display: block;
    content: '';
}

.storepanel .hbox .item>.cover {
    float: left;
    width: 80px;
    height: 100%;
    overflow: hidden;
}

.storepanel .hbox .item>.cover>.thumb {
    width: 100%;
}

.storepanel .hbox .item>.cover>.img-circle {
    left: 2px;
    bottom: 2px;
    width: 35px;
    margin: 0px;
}

.storepanel .hbox .item>.info {
    margin: 0px 5px 5px 85px;
}

.storepanel .item-list .item>.info .rate {
    color: #F0AD4E;
}

.storepanel .item-list .item>.info .title {
    position: static;
    font-size: 14px;
    width: 100%;
    margin: 3px 0;
    color: #333;
    line-height: 17px;
    background-color: transparent;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storepanel .item-list .item>.info .price {
    color: rgb(203, 92, 92);
    text-align: right;
}

.storepanel .items {}

.storepanel .items>.item {
    float: left;
    width: 200px;
    margin: 0px 5px 15px;
}

.storepanel .bgheader {}

.storepanel .content .contentheader {}

.storepanel .content .contentheader .intro {
    padding: 0px;
    margin: 0px;
    list-style: none;
    position: relative;
    height: 100%;
}

.storepanel .content .contentheader .intro .cover {
    position: absolute;
    left: 40px;
    bottom: -50px;
    width: 150px;
    padding: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.3);
}

.storepanel .content .contentheader .intro .cover>img {
    width: 100%;
    background-color: #fff;
}

.storepanel .content .contentheader .intro .prop {
    position: absolute;
    left: 205px;
    bottom: 10px;
    color: #fff;
}

.storepanel .content .contentheader .intro .prop .rate i {
    width: 14px;
}

.storepanel .content .contentheader .intro .prop .title {
    position: initial;
    color: initial;
    margin: 10px 0;
    font-weight: 700;
    color: #fff;
}

.storepanel .content .contentheader .smry {
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: #fff;
}

.storepanel .content .smry li {
    width: 80px;
    text-align: center;
}

.storepanel .content .wrapcontent .smry {
    display: none;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    margin-bottom: 10px;
}

.storepanel .content .wrapcontent .smry li {
    width: 33%;
}

.storepanel .content .wrapcontent .smry h2 {
    margin: 0 0 10px;
    font-size: 20px;
}

.storepanel .content .ctrls {
    padding: 10px 0px 10px 205px;
}

.storepanel .bxProp {
    list-style: none;
    margin: 0px;
    padding: 10px 15px;
}

.storepanel .bxProp>li {
    line-height: 28px;
    font-size: 12px;
}

.storepanel .bxProp>li>label {
    font-weight: bold;
    margin: 0px;
}

.storepanel .bxProp>li>label>i {
    width: 12px;
    text-align: center;
}

.headermenu li.search {
    position: relative;
    line-height: 50px;
    font-size: 0px;
}

.headermenu li.search.open .search-container {
    width: 300px;
    overflow: initial;
}

.headermenu li.search .search-container {
    width: 0;
    -webkit-transition: width 300ms;
    -moz-transition: width 300ms;
    -o-transition: width 300ms;
    transition: width 300ms;
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    overflow: hidden;
    z-index: 1;
}

.headermenu li.search .search-container .form-control {
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    padding: 0px 5px;
    height: 30px;
}

.headermenu li.search .btn {
    padding: 3px !important;
    width: 30px;
    height: 30px;
    /*line-height: 18px;*/
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background: #1582dc;
    color: #FFF;
    vertical-align: top;
    margin-top: 10px;
}

.overpanel .headermenu li.search .btn {
    background: transparent;
}

.headermenu li.search.open .btn {
    background: #1377c9;
    border: 1px solid #1377c9;
    position: relative;
    z-index: 2;
}

.studentpanel .headermenu li.search.open .btn {
    background: transparent;
    border: none;
}

.storepanel .tab-content.maxw {
    max-width: 1024px;
    margin: 0 auto;
}

.storepanel .table-center th,
.storepanel .table-center td {
    text-align: center;
}

.storepanel .tab-content .tab-pane>.intro {
    line-height: 1.5em;
    margin: 10px;
    font-size: 13px;
}

.storepanel .tab-content .notice {
    background-color: #f0f0f0;
    margin-bottom: 20px;
    padding: 10px 25px;
    line-height: 20px;
    font-size: 12px;
}

.storepanel .tab-content .notice>li {
    padding: 3px 0px;
}

.storepanel .tab-content .mtitle {
    font-size: 17px;
    padding: 0px 5px;
    margin: 10px 0px 5px;
}

.storepanel .tab-content .voucher-list {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 20px;
}

.storepanel .tab-content .voucher-list .voucher {
    text-align: center;
    padding: 5px 5px 15px;
    margin-bottom: 20px;
    border-top: 3px solid #333;
    background-color: #FBFBFB;
    -moz-box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
    -webkit-box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
    box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
}

.storepanel .tab-content .voucher-list .voucher.dark-theme {
    border-color: #333;
}

.storepanel .tab-content .voucher-list .voucher.dark-theme .btn {
    background-color: #444;
    color: #fff;
}

.storepanel .tab-content .voucher-list .voucher.dark-theme .btn:hover {
    background-color: #292727;
}

.storepanel .tab-content .voucher-list .voucher.success-theme {
    border-color: #1caf9a;
}

.storepanel .tab-content .voucher-list .voucher.primary-theme {
    border-color: #428bca;
}

.storepanel .tab-content .voucher-list .voucher.danger-theme {
    border-color: #d9534f;
}

.storepanel .tab-content .voucher-list .voucher>h2 {
    margin: 0px;
    font-weight: 600;
    font-size: 17px;
    text-align: center;
    padding: 10px 5px;
    border-bottom: 1px solid #ccc;
}

.storepanel .tab-content .voucher-list .voucher .info {
    height: 150px;
    position: relative;
}

.storepanel .tab-content #institution .voucher-list .voucher .info {
    height: 200px;
}

.storepanel .tab-content .voucher-list .voucher .info .wrap {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

.storepanel .tab-content .voucher-list .voucher .price {
    font-size: 35px;
    font-weight: 600;
    line-height: 40px;
}

.storepanel .tab-content #institution .voucher-list .voucher .price {
    padding: 0px;
}

.storepanel .tab-content .voucher-list .voucher .price .unit {
    font-size: 13px;
    font-weight: normal;
}

.storepanel .tab-content .voucher-list .voucher .price .discount {
    line-height: 30px;
    font-size: 16px;
    color: #aaa;
    text-decoration: line-through;
}

.storepanel .tab-content .voucher-list .voucher .price .discount>span {
    color: #aaa;
}

.storepanel .tab-content .voucher-list .voucher .desc {
    line-height: 20px;
}

.storepanel .tab-content .voucher-list .voucher .btn {
    width: 90%;
    font-size: 14px;
    font-weight: 600;
}

.storepanel .buypanel .wraplst {
    position: relative;
}

.wraplst .total {
    position: absolute;
    top: -40px;
    left: 10px;
    line-height: 30px;
}

.wraplst .total label {
    color: #000;
}

.wraplst .total>b {
    font-size: 20px;
    color: #e12b2b;
}

.wraplst .head {
    padding: 7px 0px;
    background-color: #3E3E4A;
    text-align: center;
    color: #fff;
}

.wraplst .head.row {
    margin: 0px;
}

.wraplst .head .row {
    margin: 0px;
}

.wraplst .head .row .sort {
    cursor: pointer;
}

.wraplst .head .row .sort.asc>i::before {
    content: "\f0d8";
}

.wraplst .head .date {
    display: block;
}

.wraplst .body .row {
    border-bottom: 1px solid #e3e6f3;
    cursor: pointer;
    margin-left: 0px;
    margin-right: 0px;
}
.wraplst .tuitionbox {
    cursor: pointer;
}
.wraplst .body .row>a {
    display: inline-block;
}

.wraplst .body .nocursor {
    cursor: default;
}
.wraplst .body .cursor {
    cursor: pointer;
}
.wraplst.fakeorder .body .row {
    line-height: 40px;
}

.wraplst.fakeorder .body .row.isel {
    background-color: #fff3e6;
}

.wraplst .footer {
    background-color: #f9f9f9;
    padding: 5px;
}

.wraplst .footer .totalprice {
    font-size: 23px;
    line-height: 44px;
    display: inline-block;
}

.wraplst .footer .btn {
    vertical-align: top;
}

.adminview .feelst .body .row.disable {
    background-color: #f9f9f9;
}

.adminview .wraplst .body .row .status {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #ddd;
}

.adminview .wraplst .body .row .status.on {
    background-color: #1c1cca;
}

.adminview .wraplst .body .row .status.covered {
    background-color: #ffcb01;
}

.wraplst .body .row.notice .title::before {
    content: '공지';
    display: inline-block;
    padding: 2px 5px;
    border-radius: 5px;
    background-color: #d52c2c;
    color: #fff;
    font-size: 12px;
    font-weight: 300;
}

.wraplst .body .row.private .title::before {
    content: '\f023';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    margin-right: 5px;
}

.wraplst .body .row .checkbox {
    display: inline-block;
}

.wraplst .body .row .detail {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.wraplst .body .row.addr {
    font-size: 12px;
}

.wraplst .body .row.card {
    line-height: 25px;
}

.wraplst .body .row.statusok {
    background-color: #f9f9f9;
}

.wraplst .body .row.status28 {
    color: #ccc;
}

.wraplst .body .row.status28 a,
.wraplst .body .row.status28 .title {
    color: #ccc;
}

.wraplst .body .row.status28 label,
.wraplst .body .row.status28 img {
    opacity: .5;
}

.wraplst .body .row:not(.nocursor):hover {
    background-color: #f5f5f5;
}

.wraplst .body .row>div {
    font-size: 14px;
    padding: 10px;
    border: none;
    background-color: initial;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wraplst .body .row>div.overflow {
    overflow: visible;
    white-space: normal;
}
.wraplst .body .row>div .notpaid {
    color: #e12b2b;
    font-weight: bold;
}
.wraplst .body .schedule>div {
    white-space: normal;
}
.wraplst.fakeorder .body .row>div {
    padding: 5px;
}

.wraplst .body .row.deleted {
    opacity: .3;
}

.wraplst .body .row>div.control {
    overflow: initial;
}

.wraplst .body .row div.option {
    position: absolute;
    top: 0px;
    right: 0px;
    display: none;
    height: 100%;
    font-size: 0px;
}

.wraplst .body .row div.option>a {
    height: 100%;
    display: inline-block;
    text-align: center;
    padding: 10px 10px 0px;
    color: #fff;
    text-decoration: none;
    font-size: 11px;
}

.wraplst .body .row div.option>a:first-child {
    background-color: #f8bb61;
}

.wraplst .body .row div.option>a:last-child {
    background-color: #f86b6b;
}

.wraplst .body .row div.option>a>i {
    margin-right: 5px;
}

.wraplst .body .row>div.desc {
    font-weight: 300;
}

.wraplst .row.order>div {
    min-height: 80px;
    position: relative;
}

.headview .wraplst .row.order>div {
    min-height: auto;
}

.wraplst.history .row.order>div {
    min-height: auto;
}

.adminpanel .wraplst .row.order>div {
    min-height: auto;
}

.wraplst .body .row.returnok {
    opacity: .5;
}

.wraplst .row.order .block {
    font-size: 13px;
}

.wraplst .row.order .empty,
.wraplst .row.order .fee {
    line-height: 40px;
}

.wraplst .row.fee .balance {
    display: inline-block;
    background-color: #d45540;
    color: #fff;
    padding: 2px 5px;
    border-radius: 5px;
}

.wraplst .row.order>div>div.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}

.wraplst .row.order input.checkbox {
    position: absolute;
    left: 5px;
}

.wraplst .orderno {
    display: block;
    margin-bottom: 5px;
}

.wraplst .info .orderno {
    display: inline-block;
    margin: 0px;
}

.wraplst .organ,
.wraplst .date {
    font-size: 90%;
}

.storepanel .prodinfo {}

.storepanel .prodinfo>.thumb {
    display: inline-block;
    float: left;
    max-width: 50px;
    margin-right: 5px;
    box-shadow: 2px 3px 3px #ddd;
}

.storepanel .prodinfo>div.thumb {
    width: 50px;
    height: 65px;
}

.storepanel .prodinfo>.info {
    vertical-align: top;
    overflow: hidden;
    margin-left: 70px;
}

.storepanel.adminpanel .prodinfo>.info {
    margin-left: 0px;
}

.storepanel .lstReturn .prodinfo>.info {
    margin-left: 0px;
}

.modal .wrapcompleted {
    padding: 10px;
}

.modal .wrapcompleted .wrap-invoice {
    padding: 10px 0px 20px;
}

.modal .wrapcompleted .bxcmd {
    padding: 10px 0px;
}

.overpanel .wrap-invoice {
    position: relative;
    width: 800px;
    min-height: 600px;
    margin: 0 auto;
    padding: 10px 20px;
    background-color: #fff;
}

.orderpanel .wrap-invoice {
    padding: 20px;
    border: 1px solid #eee;
    margin-bottom: 20px;
}

.wrap-invoice .orderinfo {
    padding-bottom: 10px;
}

.wrap-invoice .orderinfo label {
    font-weight: 500;
    margin: 15px 0px 5px;
    width: 100%;
    padding: 5px;
    border-bottom: 2px solid #555;
}

.wrap-invoice .orderinfo div {
    line-height: 20px;
}

.wrap-invoice .orderinfo div.vbank {
    background-color: #374450;
    color: #fff;
    padding: 5px;
    line-height: 20px;
}

.wrap-invoice .orderinfo div.notice {
    background-color: #34374f;
    color: #fff;
    padding: 3px 5px;
    margin-top: 5px;
}

.wrap-invoice .row>div>label+div {
    padding: 0 5px;
}

.wrap-invoice .table {
    font-size: 13px;
}

.wrap-invoice .table thead>tr>th {
    border-bottom: 2px solid #555;
}

.wrap-invoice .table tbody td {
    vertical-align: middle;
}

.wrap-invoice .table tbody tr.lock input[type=checkbox] {
    display: none;
}

.wrap-invoice .table tbody tr.lock {
    position: relative;
}

.wrap-invoice .table tbody tr.chk>td {
    background-color: #eee;
}

.wrap-invoice .table tbody tr.lock>td {
    background-color: #F9F9F9;
    opacity: .4;
}

.wrap-invoice .table tbody tr.lock .prodinfo:after {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: rotate(-15deg) translateY(-50%);
    color: #fff;
    padding: 5px;
    opacity: .8;
}

.wrap-invoice .table tbody tr.del .prodinfo:after {
    content: '주문취소';
    background-color: #333;
}

.wrap-invoice .table tbody tr.return .prodinfo:after {
    content: '반품신청';
    background-color: #fe2f2f;
}

.wrap-invoice .table tbody tr.returnok .prodinfo:after {
    content: '반품완료';
    background-color: #333;
}

.wrap-invoice .table tbody td.prodinfo {
    position: relative;
    /* white-space: nowrap; */
}

.wrap-invoice .table tbody td.prodinfo>.thumb {
    float: left;
    max-width: 50px;
    margin-right: 10px;
}

.wrap-invoice input[type="checkbox"], .wrap-invoice input[type="radio"] {
    position: absolute;
    left: 5px;
}

.wrap-invoice .table tbody td.prodinfo>.info {
    margin-left: 0px;
    padding-left: 60px;
    position: relative;
}

.wrap-invoice .table .price {}

.wrap-invoice .table .dprice {
    font-size: 12px;
    text-decoration: line-through;
    color: #d25b5b;
    display: block;
}

.wrap-invoice .bxbill {
    text-align: right;
    margin-top: 20px;
}

.wrap-invoice .bxbill .wrapbill {
    width: 250px;
    float: right;
}

.wrap-invoice .bxbill .wrapbill>div {
    line-height: 30px;
    padding: 5px 10px;
    border-bottom: 1px solid #ddd;
}

.wrap-invoice .bxbill .wrapbill>div>label {
    margin: 0px;
}

.wrap-invoice .bxbill .wrapbill>div>span {
    display: inline-block;
    width: 150px;
    margin-left: 20px;
    text-align: right;
}

.wrap-invoice .bxbill .wrapbill>div.total {
    font-size: 20px;
    font-weight: 600;
}

.coupons {}

.coupons .coupon {
    padding: 10px 30px 10px 10px;
    cursor: pointer;
    position: relative;
    margin: 10px 0;
    height: 130px;
}

.coupons .coupon.ticket .cnt {
    display: none;
}

.coupons .coupon span[data-role="del"] {
    cursor: pointer;
    font-size: 20px;
    line-height: 1px;
    padding: 2px;
    /*vertical-align: middle;*/
    position: absolute;
    right: -5px;
    top: -5px;
    display: none;
    z-index: 2;
}

.coupons.edit .coupon:hover span[data-role="del"] {
    display: inline-block;
}

.modal .coupons .coupon {
    height: 100px;
}

.coupons .coupon .cnt {
    position: absolute;
    top: -10px;
    right: -10px;
    display: inline-block;
    padding: 7px 15px;
    border-radius: 15px;
    color: #fff;
    background-color: #e65e5e;
    z-index: 1;
    font-weight: 600;
}

.coupons.edit .coupon .cnt {
    top: 50%;
    left: 50%;
    right: initial;
    transform: translate(-50%, -50%);
    background-color: rgba(232, 0, 0, 0.5);
}

.coupons .coupon.expire,
.coupons .coupon.used {
    border-color: rgba(0, 0, 0, .3) !important;
}

.coupons .coupon .bg {
    display: none;
}

.coupons .coupon .bg>i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25px;
    color: #fff;
    text-shadow: 2px 2px 2px #000;
    display: none;
}

.coupons .coupon.sel .bg>i {
    display: inline-block;
}

.modal .coupons .coupon:hover .bg,
.coupons .coupon.sel .bg,
.coupons .coupon.expire .bg,
.coupons .coupon.used .bg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .3);
    z-index: 1;
}

.coupons .coupon.used .expire::before {
    content: '사용완료';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    padding: 5px 10px;
    background-color: rgba(235, 40, 40, 1);
    color: #fff;
    z-index: 2;
}

.coupons .coupon.expire .expire::before {
    content: '기간만료';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    padding: 5px 10px;
    background-color: rgba(235, 40, 40, 1);
    color: #fff;
    z-index: 2;
}

.coupons .coupon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    border: 5px solid #e4dfdf;
}

.coupons .coupon::after {
    content: 'COUPON';
    position: absolute;
    width: 30px;
    height: 100%;
    top: 0px;
    right: 0px;
    background-color: #e4dfdf;
    border-left: 3px dotted #fff;
    text-align: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-weight: bold;
    color: #fff;
    letter-spacing: 3px;
    padding-right: 5px;
}

.coupons .coupon[type=lesson]:before {
    border-color: #70b1df;
}

.coupons .coupon[type=lesson]::after {
    background-color: #70b1df;
}

.coupons .coupon:hover {
    background-color: #F9F9F9;
}

.coupons .coupon>i {
    position: absolute;
    color: #777;
    top: -7px;
    left: -7px;
}

.coupons .coupon h2 {
    margin: 5px 0px 10px;
    color: #000;
    font-weight: 700;
    font-size: 110%;
    /*
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  */
}

.modal .coupons .coupon h2 {
    font-size: 15px;
}

.coupons .coupon h2>span {
    font-size: 50%;
}

.coupons .coupon .expire>label {
    font-size: 13px;
}

.coupons .coupon .expire>span {
    font-size: 13px;
}

.coupons .coupon .regist {
    font-size: 11px;
}


/****************** Fees *****************/

.smry.fees .box {
    position: relative;
    margin-bottom: 5px;
}

.smry.fees .box.balance label {
    color: #fff;
}

.smry.fees .box.paid::before {
    content: '\f068';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -17px;
    color: #777;
}

.smry.fees .box.balance::before {
    content: '\f52c';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -17px;
    color: #777;
}

.smry.fees .box.bg-danger::after {
    position: absolute;
    content: '\f81d';
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 60px;
    opacity: .3;
    bottom: 5px;
    left: 0;
}

.smry.fees .box.bg-danger label {
    color: #fff;
}

.smry.fees .box .price {
    text-align: right;
}

.smry.fees .box .price::after {
    content: '원';
    font-size: 12px;
}

.log.row.minus {
    background-color: #fffdf8;
}

.log span.minus {
    color: #ef3939;
}

.adminview .userinfobx {
    position: relative;
    margin-bottom: 10px;
}

.adminview .userinfobx .thumb {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    margin: 0 10px;
    float: left;
}

.adminview .userinfobx .info {
    margin-left: 110px;
}


/** 정산관리 */

.caret-toggle-sort {
    cursor: pointer;
}


/** 주문관리-정산-카드뷰 */

.adjust-card {
    margin: 5px 0;
    padding: 10px;
    text-align: center;
    cursor: pointer;
}

.adjust-card:hover {
    background-color: #f5f5f5;
}

.adjust-card>.img-view {
    width: 64px;
    height: 64px;
    margin: auto;
    text-align: center;
}

.adjust-card>.img-view>.img {
    border-radius: 50%;
}

.adjust-card>.name {
    text-align: center;
    margin-top: 10px;
}

.adjust-card>.value {
    color: #727274;
    margin-top: 10px;
    line-height: 20px;
}

.adjust-card .balance-view {
    width: fit-content;
    padding: 2px 4px;
    background-color: #d9534f;
    border-radius: 5px;
    margin: auto;
    margin-top: 5px;
    color: white;
}


/****************** paper *****************/

.panel-paper .history_smry {}

.panel-paper .history_smry>li {
    text-align: center;
    margin: 10px 15px;
}

.panel-paper .history_smry>li>h5 {
    margin: 0px;
    font-size: 13px;
}

.panel-paper .history_smry>li>div {
    font-weight: 700;
    font-size: 30px;
    line-height: 50px;
    color: #333;
}

.panel-paper .history_smry>li>div>span {
    font-weight: normal;
    font-size: 12px;
    color: #59595a;
}

.panel-paper .contentpanel .filterbx {
    background-color: #F0F0F0;
    padding: 5px 0px;
    margin: 0px;
}

.panel-paper .contentpanel .filterbx>div {
    line-height: 33px;
}

.panel-paper .contentpanel .filterbx .btn-group {
    margin: 0px;
}

.panel-paper .contentpanel ul.smry {
    padding: 5px;
}

.panel-paper .contentpanel ul.smry b {
    color: #d9534f;
}

.panel-paper .contentpanel ul.smry>li {
    line-height: 27px;
}

.panel-paper .contentpanel table thead th i {
    margin-left: 3px;
}

.panel-paper .resultpanel .historybx .box {}

.panel-paper .resultpanel .historybx .box .md-title {
    /*background-color: #1D2939;*/
    background-color: #575D65;
    color: #FFF;
    line-height: 33px;
    padding: 0px 5px;
    position: relative;
    margin: 3px 0px;
}

.panel-paper .resultpanel .historybx .box .md-title .btn {
    position: absolute;
    right: 0px;
    top: 3px;
    color: #fff;
}

.panel-paper .resultpanel .historybx .box .item-list {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.panel-paper .resultpanel .historybx .box .item-list>li {
    line-height: 33px;
    padding: 0px 3px;
    position: relative;
    border-bottom: 1px solid #DDD;
    cursor: pointer;
}

.panel-paper .resultpanel .historybx .box .item-list>li.active:hover,
.panel-paper .resultpanel .historybx .box .item-list>li.active {
    background-color: #F0F0F0;
    font-weight: 600;
}

.panel-paper .resultpanel .historybx .box .item-list>li.active .badge {
    background-color: #428bca;
    color: #fff;
}

.panel-paper .resultpanel .historybx .box .item-list>li:hover {
    background-color: #F9F9F9;
}

.panel-paper .resultpanel .historybx .box .item-list>li>.badge {
    position: absolute;
    right: 5px;
    top: 8px;
}

.panel-paper .resultpanel .infobx {
    background-color: #f9f9f9;
    padding: 5px;
}

.panel-paper .resultpanel .infobx .btn-group {
    width: 100%;
    margin-bottom: 0px;
}

.panel-paper .resultpanel .infobx .btn-test {
    width: 100%;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    background-color: transparent;
    padding: 5px;
}

.panel-paper .resultpanel .infobx .btn-test .select {
    position: absolute;
    line-height: 18px;
    right: 5px;
}

.panel-paper .resultpanel .infobx .test-list {
    width: 100%;
}

.panel-paper .resultpanel .infobx .test-list>li {
    position: relative;
    line-height: 2em;
    padding: 0px 5px;
    cursor: pointer;
}

.panel-paper .resultpanel .infobx .test-list>li:hover {
    background-color: #F5F5F5;
}

.panel-paper .resultpanel .infobx .test-list>li>.badge {
    position: absolute;
    top: 0.3em;
    right: 5px;
}

.panel-paper .resultpanel .infobx>.prop {
    font-size: 12px;
    padding: 5px;
}

.panel-paper .resultpanel .infobx>.prop>li>span {
    display: inline-block;
    padding: 0px 5px;
    text-align: center;
}

.pages .smrybrd {
    position: fixed;
    z-index: 2;
    padding: 5px;
    border-top: 5px solid #b33b3b;
    background-color: rgba(0, 0, 0, 0.7);
    margin: 10px 0px 0px 790px;
    color: #fff;
}

.pages .smrybrd li {
    text-align: center;
    line-height: 25px;
}

.pages .smrybrd li:not(:first-child) {
    border-top: 1px solid #fff;
}

.panel-paper .chart-page#report {
    max-width: 1024px;
}

.panel-report .qno {
    font-size: 0px;
}

.panel-report .nowrap {
    white-space: nowrap;
}

.panel-report .widget-field .col-md-6 .table {
    font-size: 11px;
}

.panel-report .col-md-6 .fname {
    font-size: 11px;
}

.panel-report .qno span {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #fff;
    font: 12px Arial;
    display: inline-block;
    text-align: center;
    margin: 2px;
    width: 20px;
    height: 20px;
    line-height: 20px;
}

.panel-report .qno span.x {
    background-color: #e48989;
    color: #fff;
    border: 1px solid #a84a4a;
}

.panel-report .qno span.bg-danger {
    background-color: #e48989;
    color: #fff;
    border: 1px solid #a84a4a;
}

.panel-report .qno span.bg-warning {
    background-color: #f0ad4e;
    color: #FFF;
    border: 1px solid #f0ad4e;
}

.panel-report .qno span.bg-primary {
    background-color: #428bca;
    color: #FFF;
    border: 1px solid #428bca;
}

.panel-report .qno span.bg-info {
    background-color: #5bc0de;
    color: #FFF;
    border: 1px solid #5bc0de;
}

.panel-report .qno span.bg-success {
    background-color: #1caf9a;
    color: #FFF;
    border: 1px solid #1caf9a;
}

.panel-paper .chart-page .chart1 {
    height: 200px;
}

.panel-paper .chart-page .chart2 {
    display: inline-block;
    width: 280px;
    height: 250px;
}

.panel-paper .chart-page .chart3 {
    display: inline-block;
    width: 280px;
    height: 250px;
}

.panel-paper table>tbody>tr>td {
    vertical-align: middle;
}

.panel-paper table .btn-edit,
.panel-paper table .btn-del {
    width: 32px;
}

.mod_test .wrapcontent,
.mod_paper .wrapcontent,
.panel-report .wrapcontent {
    max-width: 980px;
    margin: 0 auto;
}

.panel-report .wrapcontent,
.panel-report .wrapcontent.v2 {
    width: 980px;
    padding: 10px;
    background-color: #fff;
}

.printpanel .panel-report .wrapcontent.v2 {
    page-break-after: always;
}

.overpanel .wrapcontent {
    width: 1000px;
    padding: 10px;
    background-color: #fff;
    text-align: left;
    min-height: 100%;
}

.panel-report .prttitle {
    text-align: center;
    background-color: #1D2939;
    width: 100%;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 40px;
    margin: 0px 0px 10px;
    display: none;
}

.panel-report .nav-tabs a {
    padding: 5px 15px;
}

.panel-report .widget .widget-header>.title {
    padding: 7px 5px;
    margin: 0px;
    position: relative;
    cursor: pointer;
    line-height: 27px;
    font-size: 17px;
}

.panel-report .widget.off .widget-header>.title {
    background-color: #F9F9F9;
    color: #aaa;
}

.panel-report .widget .widget-header>.title>i {
    position: absolute;
    right: 10px;
}

.panel-report .widget.off .widget-header>.title>i::before {
    content: "\f077";
}

.panel-report .widget .widget-header>.filter {
    position: absolute;
    right: 5px;
    bottom: 10px;
}

.panel-report .widget.off .widget-body {
    display: none;
}

.panel-report .widget .widget-body .nobx {
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    background-color: #337ab7;
    color: #FFF;
    cursor: pointer;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.panel-report .userinfobx {
    position: relative;
    margin: 0px;
    padding: 10px;
}

.panel-report .userinfobx .thumb {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    margin: 0 10px;
    float: left;
}

.panel-report .userinfobx .info {
    margin-left: 110px;
}

.panel-report .report_user .userinfobx {
    margin-left: 10px;
    padding: 20px 10px;
    margin-bottom: 0px;
}

.panel-report .report_user .userinfobx table tbody tr th,
.panel-report .report_user .userinfobx table tbody tr td {
    border: none;
}

.panel-report .report_user .userinfobx .info {
    margin-left: 105px;
}

.panel-report .userinfobx .score {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 10px;
    background-color: #fff;
    width: 200px;
    text-align: center;
    font-size: 50px;
    font-weight: 700;
    line-height: 50px;
    margin-left: 10px;
    color: #e67070;
}

.panel-report .userinfobx>.score span {
    border-bottom: 3px double #ccc;
}

.panel-report .userinfobx .smry {}

.panel-report .userinfobx .smry>div {
    float: left;
    width: 50%;
    padding: 5px;
    text-align: center;
    position: relative;
}

.panel-report .userinfobx .smry>div:only-child {
    float: none;
    width: 100%;
}

.panel-report .userinfobx .scorebx {
    text-align: center;
}

.panel-report .userinfobx .scorebx>span,
.panel-report .userinfobx .smry>div>span {
    display: block;
    font-size: 30px;
    font-weight: 500;
    line-height: 70px;
    color: #CB5B38;
}

.panel-report .userinfobx .scorebx>label,
.panel-report .userinfobx .smry>div>label {
    display: block;
    background-color: #F5F5F5;
    padding: 5px 10px;
}

.panel-report .widget {
    margin-bottom: 10px;
}

.panel-report .chart {}

.panel-report .chart.chartScoreRange {
    height: 200px;
}

.panel-report .widget h5 {
    position: relative;
    line-height: 30px;
}

.panel-report .widget h5 .btn-excel {
    position: absolute;
    right: 5px;
}

.panel-report table {
    margin: 0px;
}

.panel-report table thead tr th {
    text-align: center;
    vertical-align: middle;
}

.panel-report table.tblw tbody tr td {
    padding: 8px;
}

.panel-report table.tblm tbody tr td {
    padding: 5px 8px;
}

table.table-sm tr th,
table.table-sm tr td {
    padding: 8px;
}

table.table-md tr th,
table.table-md tr td {
    padding: 5px 8px;
}

table.table-xs tr th,
table.table-xs tr td {
    padding: 3px;
}

.panel-report table.table-qt tbody tr th,
.panel-report table.table-qt tbody tr td {
    padding: 5px;
    font-size: 11px;
    text-align: center;
    line-height: 20px;
}

.panel-report table.table-qt tbody tr.qno th,
.panel-report table.table-qt tbody tr.qno td {
    font-weight: bold;
    background-color: #F5F5F5;
}

.panel-report table.table-qt tbody tr.qno td>span {
    margin: 0px;
    font-size: 11px;
}

.panel-report table.table-qt tbody tr td .weak {
    color: #e71414;
}

.panel-report .widget.compsmry table tr.head.childs {
    cursor: pointer;
}

.panel-report .widget.compsmry table tr.comp {
    display: none;
    background-color: #fff9f1;
}

.panel-report .widget.compsmry table tr.comp>td:first-child {
    padding-left: 22px;
}

.panel-report .widget.compsmry table tr.head.active .btn-expand::before {
    content: "\f146";
}

.panel-report .widget.compsmry table tr.comp.open {
    display: table-row;
}

.panel-report .smry {}

.panel-report .cover {
    height: 100px;
    box-shadow: 1px 1px 1px rgba(12, 12, 12, 0.2);
}

.panel-report .smry .title {
    margin: 0px;
    font-weight: normal;
    font-size: 20px;
    color: #000;
}

.panel-report .smry .prop {
    padding: 5px 15px;
}

.panel-report .smry .info {
    font-size: 12px;
}

.panel-report .smry .info>li {
    padding: 3px;
}

.panel-report .report_user .dashboard {
    background-color: #F9F9F9;
    margin: 0px;
}

.panel-report .rptdabisu .indexbx {
    position: relative;
    padding: 15px;
    border-radius: 5px;
    background-color: var(--yellow);
    margin-bottom: 10px;
    text-align: center;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.panel-report .rptdabisu .indexbx a {
    color: #fff;
    display: inline-block;
    min-width: 50px;
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
    font-size: 17px;
    margin-right: 5px;
    text-decoration: none;
    position: relative;
}

.panel-report .rptdabisu .indexbx a.active {
    background-color: #fff;
    color: #000;
}

.panel-report .rptdabisu .widget-header {
    position: relative;
    padding: 20px 10px;
    border: none;
}

.panel-report .rptdabisu .widget-header::before {
    content: '';
    display: inline-block;
    float: left;
    width: 100px;
    height: 120px;
    background-color: #EFEFEF;
    margin-right: 10px;
}

.panel-report .rptdabisu .widget-header h1 {
    font-size: 23px;
    margin: 0px;
    padding: 10px 0;
}

.panel-report .rptdabisu .widget-header .ratebx {
    margin: 20px 0px 0px 110px;
}

.panel-report .rptdabisu .widget-body {
    padding: 10px;
}

.panel-report .rptdabisu .widget .tasks {
    position: relative;
}

.panel-report .rptdabisu .widget .task {
    padding-left: 50px;
    position: relative;
    padding-bottom: 20px;
}

.panel-report .rptdabisu .widget .task::before {
    content: '\f067';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
    font-size: 20px;
    position: absolute;
    top: 35px;
    left: 10px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #FFF;
    border: 1px solid #999;
    border-radius: 50%;
    z-index: 1;
}

.panel-report .rptdabisu .widget .task::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 25px;
    width: 2px;
    height: 100%;
    border-left: 1px dashed #aaa; 
}

.panel-report .rptdabisu .widget .task:first-child::after {
    top: 35px;
}

.panel-report .rptdabisu .widget .task:last-child::after {
    height: 35px;
}

.panel-report .rptdabisu .widget .task > .wrap {
    background-color: #EFEFEF;
    border-radius: 10px;
    padding: 10px;
}

.panel-report .rptdabisu .widget .task.expand {
}

.panel-report .rptdabisu .widget .task.expand::before {
    content: '\f068';
}

.panel-report .rptdabisu .widget .task .task-header {
    padding: 10px;
}

.panel-report .rptdabisu .widget .task.expand .task-header {
    border-bottom: 1px solid #ccc;
}

.panel-report .rptdabisu .widget .task .task-header .no {
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 23px;
    background-color: #FFF;
    color: #000;
    float: left;
    margin-right: 10px;
    border-radius: 10px;
}

.panel-report .rptdabisu .widget .task.end .task-header .no {
    background-color: var(--purple);
    color: #fff;
}

.panel-report .rptdabisu .widget .task .task-header .prop {
}

.panel-report .rptdabisu .widget .task .task-header .prop h5 {
    margin: 0px;
    padding: 5px 0;
    font-size: 17px;
    line-height: 27px;
}

.panel-report .rptdabisu .widget .task .task-header .prop .info span {
    display: inline-block;
    font-size: 13px;
}

.panel-report .rptdabisu .widget .task .task-header .progress {
    position: absolute;
    top: 30px;
    right: 20px;
    width: 100px;
    border-radius: 10px;
}

.panel-report .rptdabisu .widget .task .task-body {
    display: none;
    min-height: 100px;
}

.panel-report .rptdabisu .widget .task.expand .task-body {
    display: block;
    position: relative;
}

.panel-report .rptdabisu .widget .task.expand .task-body .items {
}

.panel-report .rptdabisu .widget .task.expand .task-body .items .item {
    position: relative;
    display: inline-block;
    width: 130px;
    height: 100px;
    border-radius: 10px;
    background-color: #FFF;
    margin: 20px 15px 0px;
}

.panel-report .rptdabisu .widget .task.expand .task-body .items .item h5 {
    margin: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    line-height: 30px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #777;
    color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.panel-report .rptdabisu .widget .task.expand .task-body .items .item.end h5 {
    background-color: #333;
}

.panel-report .rptdabisu .widget .task.expand .task-body .items .item.end::before {
    content: '\f005';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    font-size: 22px;
    color: var(--yellow);
    position: absolute;
    top: -5px;
    left: -10px;
    z-index: 1;
}

.panel-report .rptdabisu .widget .task.expand .task-body .items .item .views {
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 3px 5px;
    background-color: #A40F40;
    color: #fff;
    border-radius: 5px;
    min-width: 30px;
    text-align: center;
    z-index: 1;
}

.panel-report .rptdabisu .widget .task.expand .task-body .items .item::after {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    font-size: 30px;
    color: #777;
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.panel-report .rptdabisu .widget .task.expand .task-body .items .item[data-type=video]::after {
    content: '\f03d';
}

.panel-report .rptdabisu .widget .task.expand .task-body .items .item[data-type=pdf]::after {
    content: '\f1c1';
}

.panel-report .rptdabisu .widget .task.expand .task-body .items .item[data-type=paper]::after {
    content: '\f733';
}

.dashboard .gauge {
    text-align: center;
    padding: 5px 0px;
    font-weight: 300;
}

.dashboard .gauge.ldr {
    border-left: 5px solid #4b5d68;
    margin: 10px -5px;
    background-color: #eee;
}

.dashboard .gauge small {}

.dashboard .del span[role=del],
.dashboard .free span[role=free],
.dashboard .master span[role=master],
.dashboard .head span[role=head],
.dashboard .school span[role=school],
.dashboard .tutor span[role=tutor],
.dashboard .mentor span[role=mentor],
.dashboard .teacher span[role=manager_teacher],
.dashboard .teacher span[role=teacher],
.dashboard .student span[role=student] {
    color: #e85340;
    font-weight: 400;
}

.dashboard .gauge .score {
    font-weight: 300;
    margin: 5px 0px;
    color: #000;
}

.dashboard .gauge .score>span {
    font-size: 12px;
}

.dashboard .gauge .score.rbox {
    line-height: 85px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.dashboard .gauge>div.rate {
    display: inline-block;
    position: relative;
    margin: 5px;
}

.dashboard .gauge .progress-circle {
    margin: 0px;
    font-size: 17px;
}

.dashboard .gauge .progress-circle>span {
    font-size: 25px;
    line-height: inherit;
    width: 100%;
    color: #000;
}

.dashboard .gauge .progress-circle.p60 .value-bar {
    border-color: #BC4212;
}

.dashboard .gauge .progress-circle.p60 .first50-bar {
    background-color: #BC4212;
}

.dashboard .gauge .progress-circle.p90 .value-bar {
    border-color: #53567A;
}

.dashboard .gauge .progress-circle.p90 .first50-bar {
    background-color: #53567A;
}

.panel-report .qts {
    padding: 10px 0;
}

.panel-report .qts .qt {
    float: left;
    width: 35px;
    text-align: center;
    font-size: 12px;
}

.panel-report .qts .header {
    float: left;
    width: 55px;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    color: #444;
}

.panel-report .qts .header>div,
.panel-report .qts .qt>div {
    padding: 5px;
    height: 30px;
}

.panel-report .qts .header>.no,
.panel-report .qts .qt>.qno {
    background-color: #F5F5F5;
    border-bottom: 1px solid #ccc;
}

.panel-report .qts .qt>.qno>span {
    margin: 0px;
    vertical-align: bottom;
    font-size: 12px;
}

.panel-report .qts .qt .weak {
    color: #a84a4a;
}

.panel-report table tbody tr td {
    vertical-align: middle;
    cursor: pointer;
}

.panel-report table.table-xs tbody tr td {
    padding: 2px 8px;
}

.panel-report .row.userdata {
    padding: 5px 0px 0px;
}

.panel-report .row.userdata:not(:first-child) {
    border-top: 1px solid #eee;
}

.panel-report .profile>.thumb {}

.panel-report .profile .name {
    font-size: 12px;
    font-weight: 500;
    color: #000;
    white-space: nowrap;
}

.panel-report .profile {
    text-align: center;
}

.panel-report .profile>.info {
    display: inline-block;
    vertical-align: middle;
    padding: 5px 0px;
    font-size: 12px;
}

.panel-report .profile>.info .name {
    display: block;
}

.panel-report .userdata .rate {
    font-weight: bold;
    line-height: 45px;
    color: #000;
}

.panel-report table.tblsection td span.cell {
    display: inline-block;
    width: 10px;
    height: 20px;
    border: 1px solid #eee;
    cursor: pointer;
}

.panel-report table.tblsection td span.rate {
    font-size: 20px;
    font-weight: 600;
    color: #000;
}

.panel-report table.tblcutline thead tr th,
.panel-report table.tblcutline tbody tr td {
    padding: 5px;
}

.panel-report table.tblcutline thead tr th.header {
    background-color: #FFF;
}

.panel-report table.tblcutline thead tr th.univ {
    background-color: #fcf8e3;
}

.panel-report table.tblcutline tbody tr td {
    vertical-align: top;
}

.panel-report table.tblcutline tbody tr td>div {
    height: 14.5em;
    overflow: hidden;
    position: relative;
}

.panel-report table.tblcutline tbody tr td>div:after {
    content: "";
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30%;
    height: 3em;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

.panel-report table code {
    padding: 4px 7px;
    margin: 3px;
    display: inline-block;
}

.panel-report table span.toflow {
    white-space: nowrap;
}

.panel-report table td.univ {
    cursor: pointer;
}

.panel-report table td.univ code {
    background-color: #dff0d8;
    color: #3c763d;
}

section[type=test] .printpanel .panel-report .wrapcontent.v2 {
    width: 800px;
    padding: 30px;
}

section[type=test] .printpanel .panel-report .wrapcontent table {
    font-size: 10px;
}

section[type=test] .printpanel .panel-report .wrapcontent table.table thead>tr>th,
section[type=test] .printpanel .panel-report .wrapcontent table.table tbody>tr>th,
section[type=test] .printpanel .panel-report .wrapcontent table.table tfoot>tr>th,
section[type=test] .printpanel .panel-report .wrapcontent table.table thead>tr>td,
section[type=test] .printpanel .panel-report .wrapcontent table.table tbody>tr>td,
section[type=test] .printpanel .panel-report .wrapcontent table.table tfoot>tr>td {
    padding: 4px;
}

section[type=test] .printpanel .panel-report .wrapcontent .userinfobx .thumb {
    width: 70px;
}

section[type=test] .printpanel .panel-report .wrapcontent .userinfobx .info {
    margin-left: 100px;
}

section[type=test] .printpanel .panel-report .wrapcontent .userinfobx .score {
    width: 150px;
    line-height: 35px;
}

section[type=test] .printpanel .panel-report .wrapcontent .gtable .row {
    font-size: 10px;
    line-height: 25px;
}

section[type=test] .printpanel .panel-report .wrapcontent .widget .widget-header>.title {
    font-size: 11px;
    padding: 3px 10px;
}

section[type=test] .printpanel .panel-report .wrapcontent .qno span {
    font-size: 10px;
    width: 17px;
    height: 17px;
    line-height: 17px;
    margin: 0px 2px;
}

section[type=test] .printpanel .panel-report .wrapcontent .comment {
    min-height: 60px;
    font-size: 10px;
}

section[type=test] .printpanel .panel-report .wrapcontent .prttitle {
    font-size: 13px;
    line-height: 30px;
}

.overlay .viewcontent {
    /*
  padding-top: 40px;
  max-width: 1200px;
  margin: 0 auto;
  */
    margin: 50px 10px 10px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cutlinecontent td span {
    display: inline-block;
    border: 1px solid #000;
    width: 10px;
    height: 7px;
}

.cutlinecontent span.uni1 {
    background-color: red;
}

.cutlinecontent span.uni2 {
    background-color: yellow;
}

.cutlinecontent span.uni3 {
    background-color: red;
}

.cutlinecontent span.uni3::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 5px;
    background-color: yellow;
}

.cutlinecontent table {
    margin-bottom: 0px;
    background-color: #fff;
    position: relative;
}

.cutlinecontent table tbody tr.header {
    background-color: #F9F1E4;
}

.cutlinecontent table tbody tr.header th,
.cutlinecontent table tbody tr.header td {
    height: 25px;
    padding: 0px;
    text-align: center;
    vertical-align: middle;
    border-color: #555;
}

.cutlinecontent table tbody tr td {
    font-size: 12px;
    padding: 0px;
    text-align: center;
    vertical-align: middle;
    height: 15px;
    line-height: 1px;
    border-color: #555;
}

.cutlinecontent table tbody tr th.mark,
.cutlinecontent table tbody tr td.mark {
    background-color: transparent;
    font-size: 0px;
}

.cutlinecontent table tbody tr td.mark.im {
    background-color: #FFCCCC;
}

.cutlinecontent table tbody tr td.mark.jm {
    background-color: #3399FF;
}

.cutlinecontent table tbody tr.devide td {
    font-size: 0px;
    height: 3px;
    background-color: #fff;
}

.cutlinecontent table tbody tr td.sel {}


/*
.panel-paper .panel-report table span.o {
}

.panel-paper .panel-report table span.x {
  position: relative;
}

.panel-paper .panel-report table span.x:after {
  content:"";
  position:absolute;
  border-top: 4px solid red;
  width: 30px;
  transform: rotate(-45deg);
  transform-origin: 15px 27px;
  opacity: 0.3;
}
*/

.panel-report table thead.thead-dark tr th {
    background-color: #343a40;
    color: #fff;
}

.panel-report table thead tr th {
    background-color: #ddd;
}

.panel-report .gtable .row {
    font-size: 12px;
    margin: 0px 0px 3px 0px;
    line-height: 25px;
}

.panel-report .gtable .row>div {
    padding: 0 2px;
}

.panel-report .gtable .row>div>label {
    font-weight: bold;
    margin: 0px;
    background-color: #ddd;
    width: 100px;
    text-align: center;
    float: left;
}

.panel-report .gtable .row>div>span {
    display: block;
    padding: 0 5px;
    text-align: center;
    width: 100%;
    border-bottom: 1px solid #eee;
}

.panel-report .gtable .chartbx {
    margin-top: 15px;
}

.panel-report .comment {
    background-color: #F9F9F9;
    padding: 10px;
    font-size: 12px;
}

.modal .frmComment .form-group {
    margin-left: 0px;
    margin-right: 0px;
}

.modal .modal-footer .cond {
    display: none;
}

.modal .frmComment .form-group .cond {
    padding: 10px 0px;
    border-bottom: 1px dashed #ccc;
}

.modal .frmComment .form-group .cond:last-child {
    border-bottom: 0px;
}

.modal .frmComment .form-group .scope {
    width: 70px;
    float: left;
    text-align: right;
}

.modal .frmComment .form-group .desc {
    margin-left: 80px;
    margin-right: 40px;
    position: relative;
}

.modal .frmComment .form-group .scope input {
    text-align: right;
}

.modal .frmComment .form-group .desc textarea {
    height: 70px;
}

.modal .frmComment .form-group .desc .ctrl {
    position: absolute;
    top: 0px;
    right: -40px;
    line-height: 70px;
}

.modal .frmComment .form-group .btn-new {
    border: 1px dashed #bd9c9c;
    margin: 10px;
    padding: 10px;
    cursor: pointer;
    background-color: #F9F9F9;
}

.modal .frmComment .form-group .btn-new:hover {
    border: 1px dashed #dd6a6a;
    background-color: #fbf1dd;
}


/****************** papers *****************/

.header-expand ul.lstPapers {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: inline-block;
    position: relative;
    white-space: nowrap;
}

.header-expand ul.lstPapers>li {
    display: inline-block;
    position: relative;
    margin-right: 10px;
}

.header-expand ul.lstPapers>li.active {}

.header-expand ul.lstPapers>li>i {
    position: relative;
    top: -1px;
    right: 20px;
    font-size: 12px;
    color: #BBB;
    cursor: pointer;
}

.header-expand ul.lstPapers>li>a {
    background-color: #343E4D;
    font-size: 13px;
    text-align: center;
    padding-left: 10px;
    padding-right: 20px;
    color: #BBB;
    line-height: 28px;
    display: inline-block;
}

.header-expand ul.lstPapers>li>a>span {
    display: inline-block;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.header-expand ul.lstPapers>li>a:active,
.header-expand ul.lstPapers>li>a:focus,
.header-expand ul.lstPapers>li>a:hover {
    text-decoration: none;
    color: #FFF;
}

.header-expand ul.lstPapers>li.active>i {
    color: #666;
}

.header-expand ul.lstPapers>li.active>a {
    background-color: #FFF;
    color: #666;
}

.header-expand ul.lstPapers .extmnu {
    padding: 0px;
    margin: 0px;
    top: 0.2em;
    right: 0px;
    position: absolute;
    cursor: pointer;
}

.header-expand ul.lstPapers .extmnu .btn {
    padding: 0px 5px;
    margin: 0px;
    border: none;
    background-color: transparent;
    font-size: 12px;
    height: initial;
}

.header-expand ul.lstPapers .active .extmnu .btn:hover {
    color: #333;
}

.header-expand .extmnu .btn:hover {
    color: #eee;
}

.header-option-menu {
    min-width: 130px;
}

#popup-add .modal-body {
    padding: 5px;
}

#popup-add .modal-body .nav-tabs {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    padding: 0 10px;
}

#popup-add .modal-body .nav-tabs>li {
    margin-top: 5px;
}

#popup-add .modal-footer {
    padding: 10px;
}

#popup-add .modal-body .nav-tabs>li>a {
    padding: 10px 20px;
}

#popup-add .modal-body .nav-content {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}


/************* single view ******************/

section.singleview {}

.singleview .header {
    position: fixed;
    width: 100%;
    top: 0px;
    line-height: 60px;
    z-index: 1;
    background-color: rgba(255, 255, 255, .9);
    border-bottom: 1px solid #dbdbdb;
    padding: 0px 10px;
}

.singleview .header .page-title {
    color: #000;
    line-height: 60px;
    padding: 0px 5px;
    margin: 0px;
    font-size: 20px;
    font-weight: 300;
    vertical-align: top;
    display: block;
    text-align: center;
}

.singleview .header .mnuback>i {
    color: #777;
}

.singleview .header .page-title:focus,
.singleview .header .page-title:hover {
    background-color: transparent;
}

.singleview .header .logo {
    width: 100px;
    position: absolute;
    background: url(/skins/default/images/intro/20160119_056.svg) no-repeat center center;
    background-size: 100% auto;
    height: 100%;
    margin: 0px;
}

.singleview .header .logo h5 {
    color: #333;
    margin: 0px;
    line-height: 45px;
    display: none;
    font-weight: 700;
    font-size: 20px;
}

.singleview .header .logo span {
    color: #1caf9a;
}

.singleview .mainpanel {
    margin: 0 auto;
    max-width: 800px;
    min-height: auto;
    background: #fff;
    padding: 70px 10px 0px;
}

.singleview .mainpanel pre {
    text-align: justify;
    white-space: pre-line;
    margin: 30px 0;
    color: #333;
    font-size: 12px;
    background-color: #F9F9F9;
    border: none;
    font-family: "Noto Sans KR", "Apple SD Gothic Neo", 나눔고딕, NanumGothic, "맑은 고딕", "Malgun Gothic";
}

.termspanel h5 {
    color: #333;
}


/************* Register ******************/

form .invalid {
    font-size: 12px;
    padding-top: 5px;
    color: #db391e;
    display: none;
}

form .invalid.chk {
    display: inline-block;
}

.body_login>section {
    height: 100%;
}

.body_login .header {
    position: fixed;
    width: 100%;
    top: 0px;
    line-height: 60px;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .3), rgba(109, 109, 109, .015));
}

.body_login .header .page-title {
    color: #fff;
    line-height: 60px;
    padding: 0px 5px;
    margin: 0px;
    font-size: 17px;
    font-weight: 100;
    vertical-align: top;
}

.body_login .header .page-title>i {}

.body_login .header .page-title:focus,
.body_login .header .page-title:hover {
    background-color: transparent;
}

.body_login .header .logo {
    width: 150px;
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
    background: url(/skins/default/images/intro/20160119_055.svg) no-repeat center center;
    background-size: 80% auto;
    height: 100%;
}

.body_login .header .logo h5 {
    color: #333;
    margin: 0px;
    line-height: 45px;
    display: none;
    font-weight: 700;
    font-size: 20px;
}

.body_login .header .logo span {
    color: #1caf9a;
}

.bxCSPanel {
    width: 360px;
    padding: 30px;
    margin-top: 20px;
    background-color: rgba(255, 255, 255, .5);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.bxCSPanel .title {
    margin: 5px 0px 10px;
    position: relative;
    font-weight: 400;
}

.bxCSPanel .title .notice {
    position: absolute;
    bottom: 0px;
    right: 5px;
    font-size: 11px;
    font-weight: normal;
    color: #f8760b;
}

.bxCSPanel .form-group {
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    position: relative;
}

.bxCSPanel .bxcoupon {
    padding: 10px;
    background-color: rgba(255, 238, 206, 0.9);
    border: 2px dotted #f8931e;
    border-radius: 10px;
}

.bxCSPanel .bxcoupon label {
    background-color: #3e4a53;
    color: #fff;
    display: inline-block;
    padding: 3px 15px;
    font-size: 13px;
    border-radius: 10px;
}

.bxCSPanel .bxcoupon .desc {
    padding: 0 0 5px;
    color: #F05C22;
    ;
}

.bxCSPanel .devider {
    margin: 5px 0px 10px;
    border-top: 1px dashed #aaa;
}

.bxCSPanel .form-group.required .form-control {
    border: 1px solid #a6d5d4;
}

.bxCSPanel.check .form-ext {
    display: inline-block;
}

.bxCSPanel.check .msg {
    display: none;
}

.bxCSPanel .form-ext {
    display: none;
}

.bxCSPanel.step2 .form-ext {
    display: block;
}

.bxCSPanel .input-group .btn-search {
    line-height: 24px;
}

.bxCSPanel .alert {
    padding: 5px;
    font-size: 11px;
    margin-bottom: 10px;
}

.bxCSPanel .msg {
    text-align: center;
    font-size: 11px;
    margin: 10px 0;
}

.bxCSPanel .cmd {
    text-align: center;
}

.bxCSPanel .cmd .btn {
    width: 100%;
    margin-bottom: 15px;
}


/****************** notes ******************/

.notes .newbox {
    height: 145px;
}


/****************** ----store---- ******************/


/****************** store_pointcharge ******************/

ul.alert {
    list-style: none;
    padding: 10px;
    font-size: 12px;
}

ul.alert>li {
    padding: 5px 0px;
}

.storepanel .pointpanel h3 {
    font-size: 15px;
    font-weight: 700;
}

.pointpanel .lstProd {
    text-align: center;
}

.pointpanel .lstProd>div {
    margin: 10px 0px;
}

.pointpanel .lstProd .product {
    box-shadow: none;
    margin: 0px;
}

.pointpanel .lstProd>div h5 {
    margin: 0px;
    font-weight: 700;
}

.bxBill {
    padding: 10px 0px;
}

.bxBill>.form-group {
    line-height: 30px;
}

.bxBill>.form-group>label {}

.bxBill>.form-group>.control-label {
    line-height: initial;
}

.bxBill>.qty input {
    display: inline-block;
    text-align: right;
}

.bxBill>.devider {
    border-top: 1px dashed #ddd;
    padding-top: 15px;
}

.bxBill .method>div {
    display: none;
}

.bxBill .method>div.active {
    display: block;
}

.bxBill .method .text {
    line-height: 40px;
    background-color: #eee;
    padding: 5px 10px;
}

.bxBill .notice {
    text-align: center;
    font-size: 17px;
    color: #D25454;
}

.bxBill .stab {
    display: none;
}

.bxBill .stab.active {
    display: block;
}

.bxBill .cards {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
}

.bxBill .wrapcard {
    width: 180px;
    text-align: center;
    display: inline-block;
}

.bxBill .wrapcard input[type=radio] {
    margin: 10px;
}

.bxBill .card {
    text-align: left;
    padding: 15px;
    border-radius: 5px;
    width: 100%;
    height: 100px;
    color: #000;
    background-color: #faad43;
    box-shadow: 1px 2px 2px #ccc;
}

.bxBill .card h5 {
    margin-bottom: 10px;
}

.bxBill .card label {
    margin-bottom: 0px;
    color: #fff;
    line-height: 35px;
    display: none;
}

.bxBill .card .price {
    font-weight: 700;
    float: right;
    background-color: rgba(255, 255, 255, .3);
    padding: 2px 5px;
    border-radius: 5px;
    font-size: 120%;
    line-height: 25px;
}

.bxPay .bxBill {
    display: none;
}

.bxPay[data-type=CHECK] .cards {
    display: block;
}

.storepanel .bxcmd {
    margin-top: 10px;
}

.storepanel .bxcmd .btn {}


/****************** store_cart ******************/

.cartpanel .notice {
    padding: 10px;
    background-color: #f8f8f8;
    margin-bottom: 20px;
}

ul.lstProd {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

ul.lstProd>li {
    position: relative;
    padding: 10px 0px;
    margin-bottom: 0px;
}

ul.lstProd>li:not(:first-child) {
    border-top: 1px solid #eee;
}

ul.lstProd>li.empty {
    text-align: center;
    padding: 50px 0px;
    font-size: 17px;
    color: #aaa;
}

ul.lstProd>li .btnDel {
    position: absolute;
    top: 20px;
    right: 10px;
}

ul.lstProd>li .btnOrder {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

ul.lstProd>li>.pic {
    float: left;
    width: 80px;
    min-height: 100px;
    text-align: center;
}

ul.lstProd>li>.pic .img {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    background-color: #EFEFEF;
}

ul.lstProd>li>.pic img {
    width: 100%;
    -moz-box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
    -webkit-box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
    box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.05);
}

ul.lstProd>li>.pic>div.empty_thumb {
    height: 100px;
    border: 1px solid #eee;
    width: 100%;
    -moz-box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.1);
    -webkit-box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.1);
    box-shadow: 3px 3px 0 rgba(12, 12, 12, 0.1);
    position: relative;
    background: #F5F5F5 url(/common/images/no_image.jpg) no-repeat center center;
    background-size: cover;
}

ul.lstProd>li>.pic>div.empty_book::before {
    content: '';
    position: absolute;
    width: 1px;
    left: 10px;
    background-color: #ddd;
    height: 100%;
}

ul.lstProd>li>.pic .btn-xs {
    padding: 2px 7px;
}

ul.lstProd>li>.info {
    margin-left: 100px;
}

ul.lstProd>li>.info .name {
    font-size: 17px;
    margin: 5px 0px;
}

ul.lstProd>li>.info .input-sm {
    padding: 3px 10px;
}

ul.lstProd>li>.info .amount {
    position: relative;
    line-height: 30px;
}

ul.lstProd>li>.info .desc {
    line-height: 20px;
}

ul.lstProd>li>.info .amount input {
    display: inline-block;
}

ul.lstProd>li>.info .amount .btn-group {
    margin-bottom: 3px;
}

ul.lstProd>li>.info .amount .btn-group>button {
    padding: 4px 7px;
    font-size: 10px;
}

ul.lstProd>li>.info .option {
    line-height: 30px;
}

ul.lstProd>li>.info .option>span {
    padding: 2px 5px;
    background-color: #eee;
    margin-right: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

ul.lstProd>li>.info .price {
    position: absolute;
    bottom: 10px;
    right: 10px;
    line-height: 30px;
    font-weight: bold;
}

ul.lstProd>li>.info .price>.dprice {
    font-size: 13px;
    font-weight: normal;
    color: #d25b5b;
    margin-right: 5px;
}

ul.lstProd>li>.ext {
    line-height: 30px;
}

.bxBill .form-group.total {
    border-top: 1px dashed #333;
    padding-top: 10px;
    font-size: 17px;
}


/*********** library imsi *****************/

.lib-content .wrapcontent {}

.lib-content .wrapcontent .cate {
    font-size: 15px;
    border-bottom: 1px solid rgb(204, 204, 204);
    padding: 10px;
    position: relative;
}

.lib-content .wrapcontent .cate>span {}

.lib-content .wrapcontent .cate>i {
    position: absolute;
    right: 10px;
    font-size: 20px;
}

.lib-content .wrapcontent .items {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.lib-content .wrapcontent .items>li {
    display: inline-block;
    text-align: center;
    margin: 0px 10px 10px;
    width: 100px;
}

.lib-content .wrapcontent .items>li .cover {
    background-color: #F9F9F9;
    padding: 10px;
}

.lib-content .wrapcontent .items>li .ico-type {
    font-size: 80px;
    color: #a7a7a7;
}

.lib-content .wrapcontent .items>li .ion-ios-folder {
    color: #62a3da;
}

.lib-content .wrapcontent .items>li h4 {
    font-size: 12px;
    margin: 0px;
    padding: 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*********** order *****************/

#popup-order .modal-footer {
    line-height: 45px;
}


/*********** DAP *****************/

#popup-dap .userschbx {}

#popup-dap .userschbx .btn-user-search {
    /*line-height: 1.9em;*/
}

#popup-dap .applicants {
    padding: 5px;
    background-color: #F5F5F5;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    white-space: nowrap;
}

#popup-dap .applicants>.user {
    text-align: center;
    display: inline-block;
    position: relative;
    cursor: pointer;
}

#popup-dap .applicants>.user.sel::before {
    content: '';
    width: 15px;
    height: 15px;
    position: absolute;
    top: 3px;
    right: 3px;
    -webkit-border-radius: 50%;
    background-color: #d9534f;
    border: 2px solid #fff;
    z-index: 1;
}

#popup-dap .applicants>.user:not(:last-child) {
    margin-right: 5px;
}

#popup-dap .applicants>.user>.thumb {
    position: relative;
    width: 45px;
}

#popup-dap .applicants>.user:not(.sel)>.thumb::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
}

#popup-dap .applicants>.user:hover>.thumb::after {
    background-color: rgba(0, 0, 0, 0);
}

#popup-dap .applicants>.navi {
    font-size: 30px;
    line-height: 60px;
    opacity: 0.5;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    padding: 0px 5px;
}

#popup-dap .applicants>.navi:hover {
    opacity: 1;
}

.frmDap>.warning {
    display: block;
    text-align: center;
    margin-top: 70px;
    color: #ff5100;
}

.overbox .frmDap .profile,
.frmDap.multi .profile {
    display: none;
}

.frmDap .scorebx {
    padding: 5px;
    background-color: #F9F9F9;
}

.frmDap .scorebx label {
    margin-bottom: 0px;
}

.frmDap .profile {
    padding: 10px 5px;
    margin: 10px 0px 0px;
    background-color: #F5F5F5;
}

.frmDap .profile .info {
    font-size: 12px;
}

.frmDap .table {
    margin-top: 10px;
    margin-bottom: 0px;
}

.frmDap .table thead tr th {
    text-align: center;
}

.frmDap .table tbody tr td {
    vertical-align: middle;
}

.frmDap .table tbody tr td.no {
    cursor: pointer;
}

.frmDap .input-xs {
    padding: 3px 10px;
}

.frmDap table .input-xs {
    width: 100%;
}

.frmDap table .ex {
    position: relative;
}

.frmDap table .ex .input-xs {
    width: 100%;
}

.frmDap table .ex input[type=file] {
    position: absolute;
    top: 10px;
}

.frmDap .bgdap {
    background-color: #F5F5F5;
}

.modal-footer .smry {
    text-align: left;
}

.modal-footer .smry label {
    margin-bottom: 0px;
    padding: 8px 10px;
    background-color: #1d2939;
    margin-right: 5px;
    vertical-align: bottom;
    font-size: 12px;
    color: #fff;
}

.modal-footer .smry span {
    font-size: 11px;
}
#popup-company_invoice .modal-footer .sum-container,
#popup-company_invoice .modal-footer .account-container
{
    display: none;
}
#popup-adap .modal-body .row:not(:last-child) {
    border-bottom: 1px solid #ddd;
}


/*********** sms ***************/

.frmSMS h2 {
    margin: 0px 0px 5px 0px;
    font-size: 16px;
    position: relative;
}

.frmSMS h2:not(:first-child) {
    margin-top: 10px;
}

.frmSMS h2 select {
    position: absolute;
    top: -2px;
    right: 0px;
    font-size: 12px;
}

.frmSMS .message textarea {
    width: 100%;
    height: 270px;
    border: 5px solid #ABBAC2;
    padding: 10px;
    background-color: #FEFEFE;
}

.frmSMS .message .desc {
    margin: 0px;
    text-align: right;
    font-size: 12px;
    color: #fff;
    background-color: #ABBAC2;
}

.frmSMS .target {
    overflow-y: auto;
    height: 210px;
}

.frmSMS .option {
    margin: 0px 0px 5px;
    padding: 5px;
    background-color: #F9F9F9;
    font-size: 12px;
}

.frmSMS .target>li {
    position: relative;
    line-height: 25px;
    font-size: 13px;
    border-bottom: 1px dashed #ccc;
    padding: 3px 0px;
    margin: 0px 3px;
}

.frmSMS .target>li .name {
    font-weight: 600;
}

.frmSMS .target>li .desc {
    color: #999;
}

.frmSMS .target>li .btn-remove {
    position: absolute;
    right: 0px;
}

.frmSMS .option .timecond {
    margin-top: 5px;
}

.frmSMS .option .timecond .date {
    width: 70%;
    float: left;
}

.frmSMS .option .timecond .time {
    width: 25%;
    float: left;
    margin-left: 7px;
}

.frmSMS .option .timecond .time .form-control {
    padding: 5px;
}

.frmSMS .option .input-xs {
    padding: 5px 7px;
}

.frmSMS .option .timecond select.form-control {
    height: 30px;
}


/*********** new group ***************/

.frmGroup {}

.frmGroup .targetlist {
    margin: 10px 0px;
}

.frmGroup .targetlist>label {
    margin-right: 5px;
}


/*********** group move ***************/

.frmMove {
    height: 100%;
}

.frmMove h5 {
    margin-top: 0px;
}

.frmMove .form-group,
.frmMove select {
    margin-bottom: 10px;
}

.frmMove .buddies {
    height: 80%;
    overflow-x: hiddenx;
    overflow-y: auto;
    padding: 5px;
    border: 1px dashed #ddd;
}

.frmMove .wrap {
    white-space: nowrap;
    height: 100%;
}

.frmMove .ctrlbar {
    text-align: center;
    display: inline-block;
    width: 9%;
    vertical-align: top;
    position: relative;
    top: 50%;
    transform: translateY(-30%);
}

.frmMove .src {
    display: inline-block;
    width: 45%;
    height: 100%;
    vertical-align: top;
}

.frmMove .ctrlbar>a {
    display: block;
    margin: 20px 0px;
    padding: 10px;
    background-color: #F5F5F5;
}

.frmMove .buddy>.thumb>img {
    width: 40px;
}

.frmMove .buddy>.info {
    padding-top: 5px;
}


/*********** suggestions ***************/

.users .box {
    min-height: 50px;
    position: relative;
}

.books .box {
    min-height: 70px;
    position: relative;
}

.items .item .thumb {
    float: left;
    width: 40px;
}

.items .item .pic {
    float: left;
    width: 40px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.items .item .info {}

.items .item .info>div {
    line-height: 20px;
}

.items .item .info>.name {
    font-weight: 600;
    color: #333;
}

.items .item .info>.desc {
    font-size: 12px;
    color: #777;
}

.items span[data-role="remove"] {
    margin-left: 5px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1px;
    padding: 2px;
    /*vertical-align: middle;*/
    position: absolute;
    right: 5px;
    top: 10px;
}

.items .item span[data-role="remove"]:hover {}


/*********** test print ***************/

body section.panel-print .wrapcontent {
    max-width: 800px;
}


/*********** Lecture ***************/

.modal .roles {
    padding: 5px;
    background-color: #f9f9f9;
    margin-top: 5px;
}

.modal .roles .role {
    padding: 5px;
    position: relative;
}

.modal .roles .role:not(:last-child) {
    border-bottom: 1px solid #eee;
    margin-bottom: 5px;
}

.modal .roles .role .name {}

.modal .roles .role .access {
    float: right;
    margin-right: 50px;
}

.modal .roles .role .btn-remove,
.modal .roles .role .btn-remove-user {
    position: absolute;
    right: 10px;
}

.modal .toolbar {
    padding: 7px;
    background-color: #f5f5f5;
    margin-bottom: 5px;
}

.modal .toolbar:not(.small)>button {
    font-size: 15px;
}

.modal .toolbar>button:hover {
    color: #337ab7;
}

.modal .modal-dialog .overpopup {
    background-color: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    min-height: 100%;
}

.modal .modal-dialog .overbox {
    display: none;
    background-color: #fff;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 3;
}

.modal .modal-dialog .modal-content .overbox {
    position: absolute;
}

.modal .modal-dialog .overbox:not(:last-child) {
    display: none !important;
}

.modal .modal-dialog .overbox .modal-body {
    overflow-y: auto;
}

.modal .overbox .overback {
    cursor: pointer;
}

.modal .overbox .overback>i {
    color: #aaa;
}

.lib-panel .optionbar,
.modal .overbox.over-library .optionbar {
    position: absolute;
    right: 15px;
    padding: 5px;
}

.lib-panel .breadcrumb,
.modal .overbox.over-library .breadcrumb {
    padding: 10px 105px 10px 10px;
    margin-bottom: 10px;
}

#popup-lessonedit .overbox .covers {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

#popup-lessonedit .overbox .covers>.cover {
    display: inline-block;
    width: 100px;
    text-align: center;
    padding: 5px;
    cursor: pointer;
    margin-right: 5px;
}

#popup-lessonedit .overbox .covers>.cover:hover,
#popup-lessonedit .overbox .covers>.cover.sel {
    background-color: #f5f5f5;
}

#popup-lessonedit .overbox .covers>.cover>.thumb {
    height: 80px;
}

#popup-lessonedit .overbox .covers>.cover>h5 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    margin: 5px 0px 0px 0px;
}

#popup-lessonedit .items .item {
    padding: 10px;
    border-bottom: 1px dashed #eee;
    position: relative;
}

#popup-lessonedit .items .item i.fa-check-circle {
    display: none;
}

#popup-lessonedit .items .item .src,
#popup-lessonedit .items .item .ico-type {
    width: 80px;
    line-height: 50px;
    height: 50px;
    font-size: 40px;
    float: left;
    text-align: center;
    color: #CB503B;
    background-color: #f5f5f5;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

#popup-lessonedit .items .item .info {
    margin-left: 90px;
}

#popup-lessonedit .items .item .info .cate {
    font-size: 12px;
}

#popup-lessonedit .items .item .info .title {
    font-size: 14px;
    font-weight: normal;
    margin: 0px;
}

#popup-lessonedit .items .item span[data-role="remove"] {
    font-size: 13px;
    top: inherit;
    bottom: 15px;
}

.overlay.itemview .body video {
    height: 90%;
    vertical-align: middle;
}

.mod_lecture .overpanel .overbody {
    padding: 60px 0px 0px;
}

.mod_lecture .overpanel .overbody .wrapvideo {
    text-align: center;
    height: 100%;
}

.mod_lecture .overpanel .overbody .wrapvideo video {
    max-width: 90%;
    height: 90%;
}

.panel .btn-group .dropdown-menu {
    width: 100%;
    color: #333;
}

.panel .btn-group .dropdown-menu>li {
    padding: 5px;
    position: relative;
    cursor: pointer;
}

.panel .btn-group .dropdown-menu>li:hover {
    background-color: #EFEFEF;
}

.panel .btn-group .dropdown-menu>li>i {
    width: 20px;
    text-align: center;
}

.modal .lib-panel .cmd-zone {
    position: absolute;
    right: 15px;
    background-color: transparent;
}

.modal .lib-panel.saveas .wrap-list {
    min-height: 300px;
}

.modal .lib-panel.saveas .frmLib {
    padding: 5px;
    background-color: #eee;
}

.modal .lib-panel.saveas .frmLib .form-group {
    margin: 0px;
}

.modal .modal-body.lib-panel .cmd-zone>div .btn {
    padding-top: 2px;
}

.modal .lib-panel .breadcrumb {
    padding: 10px 105px 10px 10px;
}

.modal .libpanel .toolbar {
    position: absolute;
    right: 15px;
    background-color: transparent;
    padding: 5px;
}

.modal .modal-body.libpanel .toolbar .filter .btn {
    padding-top: 2px;
}

.modal .libpanel .breadcrumb {
    padding: 10px 105px 10px 10px;
}

.modal .users.list {}

.modal .users.list .user {
    text-align: center;
    display: inline-block;
    cursor: pointer;
    padding: 5px 5px 5px 5px;
    max-width: 80px;
    position: relative;
}

.modal .users.list .user.sel .pic>.bg,
.modal .users.list .user:hover .pic>.bg {
    display: block;
}

.modal .users.list .user.sel .pic>.bg>i::before {
    content: '\f058';
}

.modal .users.list .user .pic {
    overflow: hidden;
    position: relative;
}

.modal .users.list .user .pic.circle {
    border-radius: 50%;
    width: 68px;
    height: 68px;
}

.modal .users.list .user .pic>img {
    width: 100%;
}

.modal .users.list .user .pic>i {
    width: 65px;
    height: 65px;
    padding: 15px 10px 0px;
    background-color: #eee;
    color: #333;
}

.modal .users.list .user .pic>.bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    top: 0px;
    left: 0px;
    display: none;
}

.modal .users.list .user .pic>.bg>i {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.modal .users.list .user>label {
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    width: 100%;
    font-size: 12px;
}

.modal .users.list .user .btn-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #EFEFEF;
    font-size: 20px;
    text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.9);
    cursor: pointer;
    display: none;
    z-index: 2;
}

.modal .users.list .user:hover .btn-remove {
    display: block;
}


/** 자료실 - 글등록 - 사용자 선택 */

#popup-post .users .user {
    text-align: center;
    display: inline-block;
    cursor: pointer;
    padding: 5px 5px 5px 5px;
    max-width: 80px;
    position: relative;
}

#popup-post .users .user.sel .pic>.bg,
#popup-post .users .user:hover .pic>.bg {
    display: block;
}

#popup-post .users .user.sel .pic>.bg>i::before {
    content: '\f058';
}

#popup-post .users .user .pic {
    overflow: hidden;
    position: relative;
}

#popup-post .users .user .pic.circle {
    border-radius: 50%;
    width: 68px;
    height: 68px;
}

#popup-post .users .user .pic>img {
    width: 100%;
}

#popup-post .users .user .pic>i {
    width: 65px;
    height: 65px;
    padding: 15px 10px 0px;
    background-color: #eee;
    color: #333;
}

#popup-post .users .user .pic>.bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    top: 0px;
    left: 0px;
    display: none;
}

#popup-post .users .user .pic>.bg>i {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#popup-post .users .user>label {
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    width: 100%;
    font-size: 12px;
}

#popup-post .user-profileimg {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 6px;
}


/*********** popup bookwizard ***************/

#popup-bookwizard .status .progress {
    margin-right: 20px;
}


/*********** poppup preview ***************/

.over-preview .cmd {
    background-color: #F5F5F5;
}

.over-preview .status .progress {
    background-color: #ddd;
}

.modal .status .log {
    height: 310px;
    margin-top: 10px;
    overflow: auto;
    border: 1px solid #ddd;
    font-size: 12px;
}

.overpanel .wrapbook {
    overflow: hidden;
    z-index: 1;
}

.overpanel .wrapbook .page {
    background-color: #fff;
}

.overpanel .wrapbook .page img {
    width: 100%;
    height: 100%;
}

.overpanel .wrapbook .p15,
.overpanel .wrapbook .p10,
.overpanel .wrapbook .p5 {
    padding: 0px !important;
}

.overpanel .wrapbook .cover {
    overflow: hidden;
    position: relative;
}

.overpanel .overbody[type="book"] .wrapbook .page::before,
.overpanel .overbody[type="book"] .wrapbook .cover::before {
    content: '복사금지';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotate(-30deg) translate(-40%, -100%);
    padding: 30px;
    border: 10px solid red;
    border-radius: 20px;
    color: red;
    opacity: .2;
    font-size: 50px;
    font-weight: 600;
}

.overpanel .wrapbook .even:not(.cover)::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    right: 0px;
    z-index: 1000;
    background: -webkit-gradient(linear, left top, right top, color-stop(0.95, transparent), color-stop(1, #dadada));
    background-image: -webkit-linear-gradient(left, transparent 95%, #dadada 100%);
    background-image: -moz-linear-gradient(left, transparent 95%, #dadada 100%);
    background-image: -ms-linear-gradient(left, transparent 95%, #dadada 100%);
    background-image: -o-linear-gradient(left, transparent 95%, #dadada 100%);
    background-image: linear-gradient(left, transparent 95%, #dadada 100%);
}

.overpanel .wrapbook .odd:not(.cover)::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    right: 0px;
    z-index: 1000;
    background: -webkit-gradient(linear, right top, left top, color-stop(0.95, transparent), color-stop(1, #cacaca));
    background-image: -webkit-linear-gradient(right, transparent 95%, #cacaca 100%);
    background-image: -moz-linear-gradient(right, transparent 95%, #cacaca 100%);
    background-image: -ms-linear-gradient(right, transparent 95%, #cacaca 100%);
    background-image: -o-linear-gradient(right, transparent 95%, #cacaca 100%);
    background-image: linear-gradient(right, transparent 95%, #cacaca 100%);
}


/*********** poppup order ***************/

.frmOrder .bxSmry {
    line-height: 30px;
    font-size: 17px;
    border-bottom: 1px dashed #aaa;
    padding: 5px;
}

.frmOrder .bxSmry b {
    margin-left: 10px;
}

.frmOrder .bxBill {
    border-bottom: 1px dashed #aaa;
}

.pointpanel .frmOrder .bxBill {
    border: none;
}

.frmOrder .bxAddr {
    border-bottom: 1px dashed #aaa;
    padding-bottom: 10px;
}


/*
.frmOrder .bxAddr.shipoff .form-group.addr {
    display: none;
}
*/

.frmOrder .bxTotal {
    font-size: 23px;
    margin-bottom: 20px;
    padding: 20px 10px 5px;
}

.frmOrder .bxTotal .shipinfo {
    font-size: 20px;
}

.frmOrder .bxTotal .pointinfo {
    font-size: 17px;
}

.frmOrder .bxTotal .pointinfo>b {
    color: #e66666;
}

.frmOrder .bxTotal b {
    color: #4B7DC8;
}

.frmOrder .bxTotal .total {
    border-top: 1px solid #ddd;
    display: inline-block;
    padding-top: 10px;
}

.frmOrder .form-group {
    margin-left: 0px;
    margin-right: 0px;
}

.frmOrder .form-group .form-inline .form-control {
    display: inline-block;
}


/*********** poppup mark ***************/

#popup-mark .frmOption .options>div {
    display: none;
}

#popup-mark .frmOption .options>div.active {
    display: block;
}


/*********** poppup saveas ***************/

#popup-saveas .modal-footer {
    background-color: #F5F5F5;
}

#popup-publish .modal-footer .form-group {
    margin-bottom: 0px;
    text-align: left;
}

#popup-publish .modal-footer .btn-save {
    padding: 25px 15px;
}


/*********** popup-schoolorder_management ***************/

.popup-over .nav-tabs {
    display: none;
}


/*********** poppup zip ***************/

.modal .zip {
    padding: 0px;
    min-height: 400px;
}

.modal .zip .schbx {
    position: relative;
    padding-right: 65px;
}

.zip .schbx .btn {
    position: absolute;
    top: 0px;
    right: 0px;
}

.zip .lstaddr {
    margin-top: 10px;
    padding-top: 5px;
    border-top: 1px solid #eee;
}

.zip .lstaddr .addr {
    position: relative;
    padding: 5px;
    cursor: pointer;
    margin-bottom: 5px;
    font-size: 15px;
}

.zip .lstaddr .addr:hover {
    background-color: #eee;
}

.zip .lstaddr .addr .code {
    position: absolute;
    color: #d25353;
}

.zip .lstaddr .addr .name {
    margin-left: 50px;
}

.zip .lstaddr .addr .name .doro {
    color: #000;
}

.zip .lstaddr .addr .name .other {
    font-size: 90%;
}

.zip .lstaddr .guide {
    padding: 0px 20px;
}

.zip .lstaddr .guide .desc_tip {
    margin-bottom: 5px;
}

.zip .lstaddr .guide .txt_example {
    display: block;
    margin-bottom: 15px;
    color: #4a86b9;
}

.modal .modal-body.contentpanel {
    padding: 15px;
}

.uploadbx .items .item,
.modal .items .item {
    position: relative;
    padding: 5px;
    cursor: pointer;
}

.uploadbx .items .item .bg,
.modal .items .item .bg {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.modal .items .item .bg>i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25px;
    color: #fff;
    text-shadow: 2px 2px 2px #000;
}

.uploadbx .items .item:hover,
.modal .items:not(.sels) .item:hover {
    background-color: #F5F5F5;
}

.uploadbx .items .item.sel,
.modal .items:not(.sels) .item.sel {
    background-color: #EFEFEF;
}

.uploadbx .items .item.sel .bg,
.modal .items .item.sel .bg {
    display: initial;
}

.uploadbx .items .item .ico,
.modal .items .item .ico {
    position: absolute;
    top: 40%;
    left: 50%;
    display: none;
    color: #fff;
    z-index: 2;
    text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.8);
    transform: translate(-50%, -55%);
}

.uploadbx .items .item.sel .ico,
.modal .items .item.sel .ico {
    display: inherit;
}

.uploadbx .items.nosel .item:not(:first-child),
.modal .items.nosel .item:not(:first-child) {
    border-top: 1px dashed #ccc;
}

.uploadbx .items.nosel .item .symbol,
.modal .items.nosel .item .symbol {
    width: 80px;
    line-height: 50px;
    min-height: 50px;
    font-size: 30px;
    float: left;
    padding: 3px;
    text-align: center;
    color: #CB503B;
    background-color: #f5f5f5;
}

.modal .items.nosel.papers .item .symbol {
    width: 50px;
}

.uploadbx .items.nosel .item .symbol>img,
.modal .items.nosel .item .symbol>img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: top;
}

.modal .items.nosel .item .symbol>img+i {
    display: none;
}

.uploadbx .items.nosel .item .prop,
.modal .items.nosel .item .prop {
    margin-left: 90px;
    padding-right: 30px;
}

.modal .items.nosel.papers .item .prop {
    margin-left: 60px;
}

.uploadbx .items.nosel .item .prop h4,
.modal .items.nosel .item .prop h4 {
    font-size: 13px;
    line-height: 15px;
    margin: 5px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uploadbx .items.nosel .item .prop time,
.modal .items.nosel .item .prop time {
    font-size: 12px;
}

.uploadbx .items.nosel .item .prop .progress,
.modal .items.nosel .item .prop .progress {
    background-color: #F9F9F9;
}

.uploadbx .items.nosel .item>i.fa-check-circle,
.modal .items.nosel .item>i.fa-check-circle,
.modal .items.nosel .item .option {
    display: none;
}

.uploadbx .items.nosel .item span[data-role="remove"],
.modal .items.nosel .item span[data-role="remove"] {
    top: initial;
    bottom: 5px;
    font-size: 15px;
}

.modal .users .user .thumb {
    display: inline-block;
    width: 60px;
    height: 60px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    float: none;
}

.books .book .cover {
    position: relative;
}

.books .book .cover {
    width: 100%;
}

.books.list .book {
    position: relative;
    padding: 5px;
    border: 1px solid #ddd;
}

.books.list .book .cover {
    width: 70px;
    height: 99px;
    float: left;
    margin-right: 5px;
}

.books .book .cover .thumb {
    width: 100%;
    -moz-box-shadow: 3px 1px 0 rgba(12, 12, 12, 0.05);
    -webkit-box-shadow: 3px 1px 0 rgba(12, 12, 12, 0.05);
    box-shadow: 3px 1px 0 rgba(12, 12, 12, 0.05);
}

body .modal .books .book {
    height: 180px;
    margin: 5px auto;
    padding: 5px;
    cursor: pointer;
}

.widget .resrcs .resrc:not(.lock):hover,
.widget .books .book:not(.lock):hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.sline.tile>div[class^=col] {
    display: inline-block;
    float: none;
}

.resrcs .resrc,
.books .book {
    margin: 10px auto;
    cursor: pointer;
    padding: 5px;
    position: relative;
    background-color: transparent;
}

.resrcs .resrc .bglock,
.books .book .bglock {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.1);
    text-align: center;
}

.resrcs .resrc .bglock>i,
.books .book .bglock>i {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.8);
}

.resrcs.tile .resrc,
.books.tile .book {
    width: 90%;
    height: auto;
    border: none;
}

.resrcs .resrc .thumb {
    width: 120px;
    float: left;
    margin-right: 10px;
    position: relative;
    overflow: hidden;
    text-align: center;
    background-color: #fbfbfb;
}

.resrcs .resrc .thumb>i {
    font-size: 50px;
    line-height: 55px;
    vertical-align: bottom;
}

.resrcs .resrc .thumb>img {
    width: 100%;
    height: auto;
}

.books .book .cover {
    width: 120px;
    float: left;
    margin-right: 10px;
    box-shadow: 3px 3px 3px rgba(12, 12, 12, 0.2);
    overflow: hidden;
}

.resrcs.list .resrc>.thumb {
    line-height: 65px;
}

.resrcs.tile .resrc>.thumb {
    float: none;
    width: 100%;
    height: 105px;
    margin: 0px;
    line-height: 80px;
}

.resrcs.tile .resrc>.thumb>img {
    max-width: 100%;
    height: auto;
}

.resrcs.tile .resrc.avi .thumb:after {
    content: '';
    display: block;
    padding-top: 57%;
}

.resrcs .resrc.avi .thumb .time {
    position: absolute;
    bottom: 2px;
    right: 2px;
    display: inline-block;
    width: 80px;
    height: 20px;
    line-height: 20px;
    background-color: rgba(0, 0, 0, 0.8);
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: #FFF;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    z-index: 1;
}

.resrcs.album .resrc {
    margin-bottom: 20px;
}

.resrcs.album .resrc .thumb {
    width: auto;
    position: relative;
    float: none;
    margin: 0px;
}

.resrcs.album .resrc .thumb .cover {
    height: 150px;
    cursor: pointer;
    background-color: #ddd;
}

.resrcs.album .resrc:hover .thumb .cover {
    background-size: contain !important;
}

.resrcs.album .resrc .thumb .cover>i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: #777;
    opacity: .5;
}

.resrcs.album .resrc:hover:not(.lock) .thumb .cover>i {
    color: #fff;
    opacity: .9;
}

.books .book .badge {
    position: absolute;
    z-index: 1;
    top: 5px;
    left: 5px;
}

.books.tile .book .cover {
    float: none;
    width: 100%;
    margin: 0px;
}

.books.tile .book .cover:after {
    content: '';
    display: block;
    padding-top: 140%;
}

.books.tile .book .cover>img {
    position: absolute;
}

.resrcs .resrc .name,
.books .book .name,
.modal .items .item .name {
    display: block;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 10px;
}

.modal .items .item.user .name {
    padding-top: 0px;
}

.resrcs .resrc .smry {
    font-size: 12px;
}

.books.tile .info .cate {
    display: none;
}

.resrcs .resrc .option,
.books .book .option {
    position: absolute;
    top: 0px;
    right: 5px;
}

.books .book .option.left {
    top: -3px;
    left: -3px;
    right: none;
}

.pagebar {
    margin-top: 10px;
    padding: 5px;
    background-color: #F5F5F5;
    line-height: 25px;
}

.pagebar .ddlcate {
    color: #333;
}

.pagebar .ddlcate .btn-cate {
    font-size: 16px;
    font-weight: bold;
}


/*********** common ***************/

.users.tile {}

.users.tile .user {
    width: 70%;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.users.tile .new .user {
    min-height: auto;
    border-radius: 50%;
    width: 70%;
    height: 100px;
    margin: 0 auto;
    box-sizing: border-box;
    padding-top: 70%;
    border: 1px dashed #ddd;
    position: relative;
    cursor: pointer;
}

.users.tile .new .user>i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.users.tile .new .user:hover {
    border: 1px dashed #aaa;
    background-color: #F9F9F9;
}

.users.tile .user.master::before {
    content: '담임';
    position: absolute;
    top: 20px;
    left: -10px;
    background-color: #c94444;
    color: #fff;
    padding: 2px 5px;
    border-radius: 5px;
}

.users.tile .user .pic {
    width: 100%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.users.tile .user .info {
    margin: 10px 0px;
    position: relative;
}

.users.tile .user .info .name {
    color: #000;
    font-weight: bold;
}

.users.tile .user .info label.name {
    display: block;
}

.users.tile .user .info .tag {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}

.users.tile .user .option {}

.users.tile .user .option .btn {
    padding: 0px;
    background: none;
    border: none;
    line-height: 1px;
    color: #333;
}

.users.tile .newbox {
    min-height: auto;
    border-radius: 50%;
    width: 70%;
    height: 100px;
    margin: 0 auto;
    box-sizing: border-box;
    padding-top: 70%;
}

.modal .bxClinic .row {
    position: relative;
    padding: 10px 0px;
    border-bottom: 1px dashed #ccc;
}

.modal .bxClinic .row:hover {
    background-color: #eee;
}

.modal .bxClinic .row:hover .profile>.thumb {
    color: #333;
}

.modal .bxClinic input[type=checkbox],
.modal .bxClinic .option,
.modal .bxClinic .optionbar {
    display: none;
}

.modal .bxClinic .profile>.thumb {
    font-size: 40px;
    line-height: 40px;
    width: 60px;
    color: #aaa;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}


/*********** program view ****************/

.programview .wrapcontent {
    max-width: 1000px;
    position: relative;
    margin: 0 auto;
}


/*********** archive ****************/

.wraplib .breadcrumb {
    background-color: transparent;
    padding: 5px;
    margin-bottom: 5px;
}

.wraplib .breadcrumb .btn-sort {
    display: none;
}


/*********** ebook ****************/

.sidepanel .resrcs {
    position: relative;
}

.sidepanel .resrcs>.resrc {
    position: relative;
    margin: 0px;
    padding-right: 50px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 30px;
    border-bottom: 1px solid #343e4d;
    font-size: 13px;
    cursor: pointer;
}

.sidepanel .resrcs>.resrc:hover {
    background-color: rgba(125, 125, 125, 0.2);
}

.sidepanel .resrcs>.resrc>.page {
    position: absolute;
    right: 0px;
    top: 5px;
    display: inline-block;
    padding: 1px 15px;
}

.wrapidx {}

.wrapidx .no {
    display: inline-block;
    width: 20px;
    margin-right: 5px;
}

.wrapidx .midx {
    position: relative;
    padding: 5px;
    border-bottom: 1px solid #ddd;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.sidepanel .wrapidx .midx {
    border-bottom: 1px solid #343e4d;
}

.wrapidx .midx:hover {
    background-color: #f5f5f5;
}

.sidepanel .wrapidx .midx:hover {
    background-color: #343e4d;
}

.wrapidx .midx>h5 {
    font-size: 13px;
    margin: 3px 0px;
}

.wrapidx .midx>i {
    position: absolute;
    right: 5px;
    top: 10px;
}

.wrapidx .midx.expand>i::before {
    content: "\f106";
}

.wrapidx .sidxes {
    padding: 0px;
    margin: 5px 0px;
    display: none;
}

.sidepanel .wrapidx .sidxes {
    background-color: rgba(0, 0, 0, 0.2);
}

.wrapidx .sidxes.expand {
    display: block;
}

.wrapidx .sidx {
    position: relative;
    cursor: pointer;
    padding: 2px 5px 2px 20px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wrapidx .sidx:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.wrapidx .sidx.sel {
    background-color: #343e4d;
    color: #fff;
}

.wrapidx .sidx i {
    display: none;
    position: absolute;
    left: 3px;
}

.wrapidx .sidx.sel i {
    display: inline-block;
}

.sidepanel .wrapidx .sidx.sel,
.sidepanel .wrapidx .sidx:hover {
    background-color: #343e4d;
}

.wrapidx .sidx>h5 {
    font-size: 12px;
    padding: 3px 0px;
    margin: 3px 0px;
}

.sidepanel .wrapidx .sidx .no {
    background-color: #756c69;
    border-radius: 3px;
    text-align: center;
    padding: 2px;
}

.wrapidx .sidx>.page {
    position: absolute;
    right: 5px;
    top: 8px;
    font-size: 12px;
}

.wrapidx .seces {
    padding: 5px 0px 5px 20px;
}

.wrapidx .seces>span.sec {
    display: inline-block;
    padding: 5px 10px;
    background-color: #eee;
    font-size: 12px;
    margin-right: 5px;
}

.wrapidx .seces>span.sec.sel,
.wrapidx .seces>span.sec:hover {
    background-color: #555;
    color: #fff;
}


/*********** book report ****************/

.widget .dashbrd .box {
    color: #fff;
}

.widget .dashbrd .box label {
    display: block;
    color: #fff;
}

.widget .dashbrd .box i.fa-3x {
    line-height: 50px;
}

.widget .dashbrd .box b {
    font-size: 30px;
}

.widget .dashbrd .box .row {
    padding: 5px;
}

.widget table.tblgrade tbody tr td {
    padding: 8px;
}


/******* popup-option *******/

#popup-option .preview img {
    max-width: 150px;
    width: 100%;
}


/*********** book order ****************/

.wizardpanel {
    margin: 0px auto;
    padding: 10px 15px 30px;
    max-width: 800px;
    background-color: #fff;
}

.wizardpanel .title {
    padding: 10px 0px;
    border-bottom: 1px dashed #ccc;
}

.wizardpanel .title>span {
    margin-right: 5px;
}

.wizardpanel .bxTpl {
    padding: 10px;
}

.wizardpanel .bxBase {
    padding: 10px;
}

.wizardpanel .bxBase .notice {
    margin-top: -10px;
    margin-bottom: 20px;
}

.wizardpanel .bxBase .notice>span {
    color: #d22a2a;
}

.wizardpanel .bxBase .form-group.required .control-label {
    color: #d22a2a;
}

.wizardpanel .bxBase .form-group.required .control-label:before {
    content: '*';
}

.wizardpanel .bxBase .uploadbox .drop {
    margin: 0px;
    font-weight: normal;
}

.wizardpanel .bxBase .uploadbox .drop .thumb {
    width: 50px;
    height: 50px;
    display: inline-block;
}

.wizardpanel .bxBase .uploadbox .drop.has>p {
    display: none;
}

.wizardpanel .bxBase .uploadbox .drop>p {
    margin: 0px;
}

.wizardpanel .bxBase .uploadbox .drop>p>span {
    display: block;
}

.wizardpanel .bxBase .uploadbox .drop h5 {
    margin: 3px 0px;
}

.wizardpanel .bxBill {
    margin: 0px;
    padding: 10px;
    border: none;
}


/*********** cube ***************/

.wrapcube {
    position: relative;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}

.wrapcube table {
    margin: 0px;
}

.wrapcube .indexpanel {
    float: left;
    width: 200px;
    position: sticky;
    position: -webkit-sticky;
    left: 0;
    z-index: 2;
    background-color: #fff;
    overflow: hidden;
}

.wrapcube .indexpanel::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 100%;
    bottom: 0px;
    left: 200px;
    background-color: #eee;
}

.wrapcube .indexpanel table thead tr th:first-child {
    border-bottom: 4px solid #555;
}

.wrapcube .indexpanel table tbody tr td {
    white-space: nowrap;
}

.wrapcube .sectionpanel {
    margin-left: 205px;
    padding-top: 101px;
    position: relative;
}

.wrapcube .sectionpanel table thead {
    position: absolute;
    top: 0px;
    z-index: 1;
}

.wrapcube .sectionpanel table thead tr th {
    text-align: center;
    width: 200px;
    min-width: 50px;
    border-left: 1px solid #ddd;
    position: relative;
}

.wrapcube .sectionpanel table thead tr th>span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wrapcube .sectionpanel table tbody {
    position: absolute;
}

.wrapcube .sectionpanel table tbody tr td:first-child,
.wrapcube .sectionpanel table thead tr th:first-child {
    border-left: none;
}

.wrapcube .sectionpanel table thead tr:last-child th {
    border-bottom: 4px solid #555;
}

.wrapcube .sectionpanel table tbody tr td {
    border-left: 1px solid #ddd;
    width: 200px;
    min-width: 50px;
    cursor: pointer;
    text-align: center;
}

.wrapcube .sectionpanel table tbody tr td:not(.sel):hover {
    background-color: #ddd;
}

.wrapcube .sectionpanel table tbody tr td.cell.active.hover {
    background-color: #f2b26a;
}

.wrapcube .sectionpanel table tbody tr td.sel {
    background-color: #337ab7;
    color: #fff;
}

.wrapcube .sectionpanel table tbody tr td.context {
    background-color: #ddd;
}

.wrapcube .h100 {
    height: 100px;
    vertical-align: middle;
}

.wrapcube .h60 {
    height: 60px;
    vertical-align: middle;
}

.wrapcube .h40 {
    height: 40px;
    vertical-align: middle;
}

.cubeview.expand-right .contentpanel {
    margin-right: 330px;
}


/*********** dashboard ***************/

.dashboard .smry .box {
    text-align: center;
    color: #fff;
    font-weight: normal;
}

.dashboard .smry .box.bgdark {
    background-color: #4C4743;
}

.dashboard .smry .box.bgred {
    background-color: #ED6C44;
}

.dashboard .box.tbox {
    background-color: #fff;
    border: none;
    text-align: center;
    margin-top: 30px;
}

.report .dashboard .box.tbox .score {
    font-weight: 500;
    color: #333;
}

.dashboard .box span {
    opacity: 1;
}

.dashboard .box .info {
    padding: 10px 0px;
}

.dashboard .box .score {
    line-height: 40px;
    font-size: 30px;
}

.dashboard .box .title {
    color: #fff;
    padding: 10px 0 0;
    font-size: 13px;
    margin: 0px;
}

.dashboard .widget {}

.dashboard .vcardbx {
    position: relative;
    text-align: center;
    height: 70px;
    margin-top: 35px;
    right: 0px;
    width: 80px;
    display: inline-block;
}

.dashboard .vcardbx .card .lbl {
    font-size: 12px;
}

.dashboard .vcardbx .card .val {
    font-size: 20px;
    font-weight: 500;
    color: #333;
    line-height: 25px;
}

.dashboard .vcardbx .card {
    position: absolute;
}

.dashboard .vcardbx .card:first-child {}

.dashboard .vcardbx .card:first-child::after {
    content: '';
    position: absolute;
    top: 55px;
    left: 20px;
    border-top: 1px solid #eee;
    width: 40px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    transform-origin: 0% 0%;
}

.dashboard .vcardbx .card:nth-child(2) {
    right: 0px;
    bottom: 0px;
}

.dashboard .gauge {
    text-align: center;
    font-weight: normal;
    padding: 5px 0px;
}

.report .dashboard .gauge {
    padding: 0px;
}

.dashboard .gauge .title {
    font-weight: normal;
    font-size: 12px;
    padding: 3px;
    display: block;
}

.dashboard .gauge .cmark {
    width: 85px;
    height: 85px;
    display: inline-block;
    background-color: #eee;
    border-radius: 50%;
    font-size: 25px;
    line-height: 80px;
    margin: 5px;
    color: #000;
}

.dashboard .gauge .smark {
    border-radius: 10px;
}

.dashboard .gauge .score {
    display: block;
    font-size: 22px;
    line-height: 35px;
    cursor: pointer;
}

.dashboard .gauge .score>i {
    font-size: 12px;
    font-style: initial;
}

.dashboard .widget .chart {
    height: 250px;
    background-color: #F9F9F9;
}

.dashboard .widget .cxheader .title {
    line-height: 36px;
}

.dashboard .widget .cxheader .filter {
    margin-top: 5px;
}

.dashboard .widget .info {}

.dashboard .widget .info>.title {
    text-align: center;
    padding: 10px 0px;
    font-size: 12px;
    border-bottom: 1px solid #eee;
}

.dashboard .widget .card {
    text-align: center;
}

.dashboard .widget .card .lbl {
    font-size: 12px;
    display: inline-block;
    padding: 5px;
}

.dashboard .widget .card .val {
    font-size: 20px;
    line-height: 40px;
    color: #000;
}

.dashboard .buddy .info {
    margin-top: 3px;
    white-space: nowrap;
}

.dashboard .buddy .info>.name {
    display: block;
    font-weight: bold;
    padding: 2px 0px;
}

.dashboard .buddy .bxscore {
    padding: 10px 5px;
    text-align: right;
}

.dashboard .buddy .bxscore .score {
    font-size: 20px;
    color: #000;
}

.dashboard .buddy .bxscore .inc {}

.dashboard .buddy .bxscore .inc>i.fa {
    color: #e32121;
    margin-right: 3px;
}

.dashboard .widget .h300 {
    max-height: 300px;
    overflow-y: auto;
}

.dashboard .widget .table .buddy:first-child>td {
    border-color: transparent;
}

.stackbar {
    margin: 10px 5px 5px;
}

.stackbar .blk {
    float: left;
    height: 30px;
    padding: 5px;
    font-size: 12px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

.legend {
    font-size: 12px;
    margin-top: 10px;
}

.legend .series {
    position: relative;
    display: inline-block;
    padding-left: 18px;
}

.legend .series::before {
    content: '';
    background-color: #ccc;
    width: 10px;
    height: 10px;
    position: absolute;
    left: 5px;
    top: 5px;
}

.legend .series.warning::before {
    background-color: #f0ad4e;
}

.legend .series.success::before {
    background-color: #1caf9a;
}

.legend .series.info::before {
    background-color: #5bc0de;
}

.legend .series.primary::before {
    background-color: #428bca;
}

.legend .series.danger::before {
    background-color: #d9534f;
}

.legend .series.dark::before {
    background-color: #333;
}


/*********** payment ***************/

#popup-payment {}

#popup-payment .modal-body {
}

#popup-payment .modal-body .notice-danger {
    padding: 20px;
    margin-bottom: 1rem;
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
    font-size: 20px;
}

#popup-payment .modal-body .ordrsmry {
    background-color: #3c749c;
    color: #fff;
    padding: 20px 10px;
}

#popup-payment .modal-body .ordrsmry .price {
    font-size: 35px;
    font-weight: 700;
}

#popup-payment .modal-body .row {
    padding: 10px;
}

#popup-payment .modal-body .row input[type=checkbox] {
    margin-right: 3px;
}

#popup-payment .modal-body .row .all {
    display: inline-block;
}

#popup-payment .modal-body .wrapinfo {
    overflow: hidden;
}

#popup-payment .modal-body .wrapinfo .form-group .control-label {
    padding-top: 7px;
    font-size: 14px;
    text-align: right;
}

#popup-payment .modal-body .wrapinfo .form-group .control-span {
    margin-top: 3px;
    padding-top: 7px;
    display: inline-block;
}

#popup-payment .modal-body .wrapinfo .form-group .form-inline input {
    display: inline-block;
}


/*********** media print mode ***************/

@media only print {
    body {
        background-color: transparent;
    }
    .mainpanel2 {
        padding: 0px;
    }
    .mainpanel2 .headerbar {
        display: none;
    }
    .mainpanel2 .contentpanel {
        padding: 0px;
        margin: 0px;
    }
    .panel-report {}
    .panel-report .wrapcontent {
        width: 980px;
    }
    .panel-report .wrapcontent .prttitle {
        display: block;
    }
    .panel-report .wrapcontent .col-lg-2 {
        width: 16%;
    }
    .panel-report .wrapcontent .col-lg-3 {
        width: 25%;
    }
    .panel-report .wrapcontent .col-lg-4 {
        width: 34%;
    }
    .panel-report .wrapcontent .col-lg-6 {
        width: 50%;
    }
    .panel-report .wrapcontent .col-lg-5 {
        width: 41%;
    }
    .panel-report .wrapcontent .col-lg-8 {
        width: 66%;
    }
    .panel-report .wrapcontent .col-lg-7 {
        width: 58%;
    }
    .panel-report .wrapcontent .col-lg-9 {
        width: 75%;
    }
    .panel-report .wrapcontent .col-6 {
        width: 50%;
    }
    .panel-report .nav-tabs {
        display: none;
    }
    .page-break {
        page-break-after: always;
    }
    .page-break+.widget {
        border-top: 30px solid #fff;
    }
    .widget .widget-header>.title>i {
        display: none;
    }
    .widget.print {
        position: relative;
    }
    .widget.print>.widget-header {
        position: absolute;
        width: 100%;
    }
    .widget.print thead {
        border-top: 30px solid #fff;
    }
    table {
        page-break-after: auto
    }
    tr {
        page-break-inside: avoid;
        page-break-after: auto
    }
    td {
        page-break-inside: avoid;
        page-break-after: auto
    }
    thead {
        display: table-header-group
    }
    tfoot {
        display: table-footer-group
    }
}


/*************  banner ************/

.lessonusers .banner {
    position: absolute;
    top: 50px;
    left: 50%;
    width: 60%;
    transform: translateX(-50%);
    border: 1px solid #333;
    box-shadow: 2px 2px 5px #333;
}

.lessonusers span[data-role="remove"] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 33px;
    height: 33px;
    display: inline-block;
    cursor: pointer;
}

.lessonusers .banner>img {
    width: 100%;
}

.lessonusers span[data-role="remove"]:before,
.lessonusers span[data-role="remove"]:after {
    position: absolute;
    display: inline-block;
    right: 15px;
    height: 33px;
    width: 2px;
    content: ' ';
    background-color: #333;
}

.lessonusers span[data-role="remove"]:before {
    transform: rotate(45deg);
    box-shadow: 1px 1px 1px #aaa;
}

.lessonusers span[data-role="remove"]:after {
    transform: rotate(-45deg);
    box-shadow: 1px 1px 1px #aaa;
}


/*************  kids mall ************/

.kidsmall {
    font-family: 'Binggrae';
    font-weight: bold;
}

.kidsmall .proddesc {
    background-color: #F9F9F9;
    padding: 20px 50px;
}

.kidsmall .proddesc .section {
    padding: 0 0 20px;
    margin-bottom: 20px;
    background-color: #fff;
    overflow: hidden;
    border-radius: 10px;
    text-align: center;
}

.kidsmall .proddesc .profile {
    margin-bottom: 20px;
}

.kidsmall .proddesc .profile .pic {
    float: left;
    width: 300px;
    text-align: right;
}

.kidsmall .proddesc .profile .message {
    margin-left: 310px;
    padding: 50px;
    font-size: 25px;
    line-height: 40px;
    font-weight: bold;
    text-align: left;
}

.kidsmall .proddesc .profile .message>span {
    display: block;
    margin-top: 10px;
    font-size: 17px;
}

.kidsmall .proddesc .section>.title {
    padding: 5px;
    text-align: center;
    color: #fff;
}

.kidsmall .proddesc .section>.body {}

.kidsmall .proddesc .section h1 {
    font-size: 40px;
    margin: 20px 0 30px;
}

.kidsmall .proddesc .section h2 {
    font-size: 30px;
    font-weight: bold;
    line-height: 40px;
    margin-bottom: 20px;
}

.kidsmall .proddesc .section h3 {
    font-size: 30px;
    font-weight: bold;
    line-height: 80px;
    margin: 0 0 20px;
}

.kidsmall .proddesc .section p {
    font-size: 17px;
    line-height: 30px;
}

.kidsmall .proddesc .section .highlight {
    font-size: 25px;
    line-height: 35px;
}

.kidsmall .proddesc .section .bold {
    font-weight: bold;
}

.kidsmall .proddesc .section .table {
    font-size: 17px;
}

.kidsmall .proddesc .section .table>thead {}

.kidsmall .proddesc .section .table>tbody {}

.kidsmall .proddesc .section .table>tbody td {
    vertical-align: middle;
}

.kidsmall .proddesc .section .box {
    width: 55%;
    margin: 30px auto;
    padding: 20px 30px;
    font-size: 20px;
    line-height: 40px;
    font-weight: bold;
    border: 5px solid #333;
}

.kidsmall .proddesc .section .bg {
    padding: 50px 0;
}

.kidsmall .proddesc .section .box>ul {
    text-align: left;
}

.kidsmall .proddesc .section .box>ul>li {
    line-height: 50px;
}

.kidsmall .proddesc .section .box>ul>li .btn {
    font-size: 17px;
    font-weight: bold;
}

.kidsmall .section5 .body {
    padding: 5px 20px;
}

.kidsmall .proddesc .section1 {
    padding: 20px 0;
}

.kidsmall .proddesc .section2 {
    background: #fff url(/skins/default/images/home/shop/package01/bar01.png) no-repeat top left / 100% auto;
}

.kidsmall .proddesc .section3 {
    background: #fff url(/skins/default/images/home/shop/package01/bar02.png) no-repeat top left / 100% auto;
}

.kidsmall .proddesc .section4 {
    background: #fff url(/skins/default/images/home/shop/package01/bar03.png) no-repeat top left / 100% auto;
}

.kidsmall .proddesc .section3 .box {
    border-color: #e8729e;
}

.kidsmall .proddesc .section4 .box {
    border-color: #4eba48;
}

.kidsmall .proddesc .section5 .title {
    background-color: #78aec4;
}

.kidsmall .proddesc .section6 {
    background-color: transparent;
}

.kidsmall .proddesc .section6 p {
    font-size: 30px;
    font-weight: bold;
    line-height: 50px;
}


/*************  Faq ************/

.tab-pane .wrapboard {
    padding: 10px 0px;
}

.wrapboard .faqs {}

.wrapboard .faqs .faq {
    position: relative;
    padding: 10px 0;
}

.wrapboard .faqs .faq:not(:last-child) {
    border-bottom: 1px dashed #eee;
}

.wrapboard .faqs .faq .question {
    font-size: 17px;
    margin: 5px 0;
}

.wrapboard .faqs .faq .answer {
    font-size: 15px;
    font-weight: 300;
    line-height: 25px;
    padding: 5px;
}

.faq .option {
    position: absolute;
    right: 10px;
    top: 10px;
    display: none;
}

.faq:hover .option {
    display: inline-block;
}


/*************  Board ************/

.boardpanel .section.top {
    background: url(/skins/default/images/dabisu/20190117_019.png) no-repeat center center/cover;
}

.wrapboard {
    margin-bottom: 50px;
    min-height: 1000px;
}

.wrapboard .tags {
    overflow: hidden;
}

.wrapboard .tag {
    display: inline-block;
    padding: 7px 10px;
    border-radius: 5px;
    background-color: #eee;
    margin-right: 5px;
    margin-bottom: 5px;
    color: #777;
}

.wrapboard .tag:hover,
.wrapboard .tag.on {
    background-color: #00a6b1;
    color: #fff;
}

.wrapboard .filter b {
    color: #000;
}

.wrapboard .filter .smry {
    line-height: 35px;
    width: 50%;
}

.wrapboard .filter .smry span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    width: 100%;
}

.wrapboard .filter .search {
    float: right;
    text-align: right;
    width: 50%;
}

.wrapboard .filter .search>div.btnSearch {
    position: relative;
    display: inline-block;
}

.wrapboard .filter .search input {
    border-radius: 30px;
    display: inline-block;
}

.wrapboard .filter .search a {
    position: absolute;
    top: 0px;
    right: 10px;
    line-height: 35px;
}

.wrapboard .articles {}

.wrapboard .btns {
    margin: 15px 0;
    float: right;
}

.wrapboard .events {
    border-top: 2px solid #333;
    padding: 0px 10px;
}

.wrapboard .events .event {
    padding: 10px;
    border: none;
    cursor: pointer;
    background-color: transparent;
    position: relative;
    margin: 10px;
}

.wrapboard .events .event .thumb {
    width: 100%;
}

.wrapboard .events .event .title {
    margin: 5px 0;
}

.wrapboard .events .event::before {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 5px 15px;
    border-radius: 30px;
}

.wrapboard .events .event.on::before {
    content: '진행중';
    background-color: #e73232;
    color: #fff;
}

.wrapboard .events .event.off::before {
    content: '종료';
    background-color: #ddd;
    color: #fff;
}

.wrapboard .events .event .smry {
    line-height: 22px;
}

.wrapboard table {
    font-size: 15px;
    font-weight: 300;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    margin-top: 10px;
}

.wrapboard table thead>tr>th {
    border-bottom: 1px solid #d7d5ce;
    background-color: #fbfbfb;
    color: #333;
    font-weight: 400;
}

.wrapboard table td {
    line-height: 30px;
}

.wrapboard table .no {
    text-align: center;
}

.wrapboard table .no>span {
    background-color: #ffd44c;
    color: #fff;
    border-radius: 15px;
    font-size: 13px;
    padding: 2px 14px 3px;
    font-weight: 400;
    line-height: 1;
}

.wrapboard table .disable .no>span {
    background-color: #333;
}

.wrapboard table .secret .title::before {
    content: '\f023';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    margin-right: 5px;
}

.wrapboard table tbody tr.disable {
    background-color: #EFEFEF;
}

.wrapboard table .secret .title .comments {
    display: inline-block;
    border-radius: 10px;
    padding: 2px 10px;
    font-size: 11px;
    background-color: #51bcfd;
    color: #fff;
}

.wrapboard nav {}

.wrapboard .pagination {}

.wrapboard .pagination li {
    margin: 0 5px;
}

.wrapboard .article {}

.wrapboard .article>.title {
    font-size: 22px;
    padding: 25px 5px;
    border-top: 2px solid #443811;
    border-bottom: 1px solid #d7d5ce;
    background-color: #fbfbfb;
    margin: 0;
    text-align: left;
}

.wrapboard .article>.prop {
    border-bottom: 1px solid #d7d5ce;
    line-height: 25px;
    padding: 0 5px;
}

.wrapboard .article>.prop>li.author {
    float: left;
    font-size: 13px;
    opacity: .5;
    text-align: left;
    padding: 5px 0;
}

.wrapboard .article>.prop>li.rdate {
    float: right;
    font-size: 13px;
    opacity: .5;
    padding: 5px 0;
}

.wrapboard .article>.files {
    border-bottom: 1px solid #d7d5ce;
    padding: 5px 0;
}

.wrapboard .article>.files>.file {
    line-height: 25px;
}

.wrapboard .article>.files>.file>a {
    color: #333;
    font-weight: 300;
}

.wrapboard .article>.content {
    min-height: 400px;
    max-width: 100%;
    padding: 30px 5px;
    border-bottom: 2px solid #443811;
    line-height: 25px;
}

.wrapboard .article>.content>.files {}

.wrapboard .article>.content>.files img {
    max-width: 90%;
    margin-bottom: 10px;
}

.wrapboard .article>.content>.files video {
    max-width: 90%;
    margin-bottom: 10px;
}

.wrapboard .article>.content .poster>img {
    padding: 10px 0;
    width: 100%;
}

.wrapboard .article>.btns {
    text-align: right;
    padding: 5px 0;
    margin: 5px 0;
    float: none;
}

.wrapboard .article>.btns a {
    display: inline-block;
    background-color: #ffd44c;
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
}

.jrdabisu .tabs,
.wrapboard .tabs {
    border-bottom: 2px solid #3b4b6d;
    margin: 10px 0;
    white-space: nowrap;
    overflow-x: auto;
}

.jrdabisu .tabs>a,
.wrapboard .tabs>li {
    display: inline-block;
    padding: 15px 30px;
    background-color: #F5F5F5;
    font-size: 15px;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    margin-right: 5px;
    font-weight: "Binggrae";
    color: #333;
}

.jrdabisu .tabs>a.active,
.wrapboard .tabs>li.active {
    background-color: #3b4b6d;
    color: #fff;
}

.jrdabisu .tabs>a:not(.active),
.wrapboard .tabs>li:not(.active) {
    cursor: pointer;
}

.jrdabisu .tabs>a:hover:not(.active),
.wrapboard .tabs>li:hover:not(.active) {
    background-color: #8d93a0;
    color: #fff;
}

.wrapboard .articles.album .article {
    margin-bottom: 20px;
    border: 1px solid #ddd;
}

.wrapboard .articles.album .article .thumb {
    position: relative;
    overflow: hidden;
}

.wrapboard .articles.album .article>h5 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 300;
}

.wrapboard .articles.album .article .thumb .cover {
    cursor: pointer;
    padding-bottom: 100%;
}

.datapanel .wrapboard .articles.album .article .thumb .cover {
    padding-bottom: 140%;
}

.wrapboard .articles.album .article:hover .thumb .cover {
    background-size: contain !important;
}

.wrapboard .articles.album .article .thumb .vcnt {
    position: absolute;
    bottom: 5px;
    right: 5px;
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.8);
}

.wrapboard .articles.album .article .thumb .cover>i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    opacity: .5;
    background-color: #eee;
    padding: 5px;
    border-radius: 5px;
}

.wrapboard .articles.album .article .bg {
    display: none;
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.wrapboard .articles.album .article:hover .bg {
    display: inline-block;
}

.wrapboard .articles.album .article:hover .cover>i {
    color: #333;
    opacity: .8;
}

.wrapboard .articles.album .article .bg>i,
.wrapboard .articles.album .article .bg>a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.8);
    text-align: center;
    border-radius: 5px;
    padding: 10px;
    background-color: rgba(255, 255, 255, .8);
    color: #000;
}

.wrapboard .articles.album .article .bg>a>span {
    font-size: 13px;
    display: block;
}

.wrapboard .articles.album .article .cate {
    border-radius: 5px;
    display: inline-block;
    background-color: #e72c16;
    padding: 2px 5px;
    color: #fff;
}

.wrapboard .articles.homet {}

.wrapboard .articles.homet .article {
    padding: 10px 0;
    margin-bottom: 10px;
}

.wrapboard .articles.homet .article:not(:last-child) {
    border-bottom: 1px dashed #eee;
}

.wrapboard .articles.homet .article .book {
    float: left;
    width: 110px;
    text-align: center;
}

.wrapboard .articles.homet .article .info {
    margin-left: 115px;
    position: relative;
}

.wrapboard .articles.homet .article .book .cover {
    width: 90px;
    height: 120px;
    border: 1px solid #eee;
    display: inline-block;
}

.wrapboard .articles.homet .article .title {
    font-family: "Binggrae";
    font-weight: bold;
    font-size: 15px;
    line-height: 30px;
    padding: 0 5px;
    margin: 0px;
    color: #000;
}

.wrapboard .articles.homet .article .item .title {
    font-size: 13px;
    font-weight: bold;
    line-height: 30px;
    padding: 0 5px;
    margin: 0px;
    position: absolute;
    bottom: 0px;
    width: 100%;
    color: #fff;
    background-color: rgba(0, 0, 0, .5);
}

.wrapboard .articles.homet .article {
    padding: 0px;
}

.wrapboard .articles.homet .article .desc {
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
}

.wrapboard .articles.homet .article .items {
    padding: 10px 0;
}

.wrapboard .articles.album .article:hover .control,
.wrapboard .articles.homet .article.edit:hover .control {
    display: inline-block;
}

.wrapboard .articles.homet .article .control {
    position: absolute;
    top: 0px;
    right: 5px;
    display: none;
    z-index: 2;
}

.wrapboard .articles.album .article .control {
    position: absolute;
    top: 10px;
    right: 20px;
    display: none;
    z-index: 2;
}

.wrapboard[tpl=homet] .widget .widget-body .resrcbx .item {
    width: 150px;
    height: 180px;
    position: relative;
    float: left;
    cursor: pointer;
    border-radius: 3px;
    box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1);
    margin-right: 15px;
    margin-bottom: 15px;
}

.wrapboard[tpl=homet] .widget .widget-body .resrcbx .item.zip {
    background: url(/skins/default/images/icon/zip_icon.png) no-repeat center center / 80% auto;
}

.wrapboard[tpl=homet] .widget .widget-body .resrcbx .item:hover {
    box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.5);
    background-size: contain !important;
}

.wrapboard .widget .item .icon {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    color: #fff;
    border-radius: 5px;
    opacity: .8;
    background-color: #333;
    padding: 15px;
    display: none;
}

.widget .item:hover .icon,
.widget.edit .item:hover .option {
    display: inline-block;
}

.wrapboard[tpl=homet] .widget.edit .item .option .btn {
    font-size: 20px;
}

#popup-guide table {
    font-size: 13px;
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
}


/**** katex ***/

body .katex-display {
    display: inline-block;
}

/**** practice ***/

.studypanel .headerbar .btn-send,
.headerbar .btn-clear {
    display: none;
}

.view.quiz:not(.end) .mainpanel .headerbar .btn-send,
.view.quiz:not(.end):not(.tmode) .mainpanel:not(.end) .headerbar .btn-clear {
    display: inline-block;
}

.view.quiz .headerbar .iboard {
    display: inline-block !important;
    vertical-align: middle;
    margin-right: 5px;
}

.headerbar .iboard .progress {
    width: 150px;
    height: 30px;
    border-radius: 30px;
}

.headerbar .iboard .progress span {
    line-height: 30px;
    font-size: 15px;
    position: absolute;
    right: 10px;
    color: #fff;
    text-shadow: 0 1px 0 #000;
}

.view.quiz {
    background-color: var(--yellow) !important;
}

.studentpanel .headerbar .btn-sound.off i::before {
    content: '\f2e2';
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
}

.mainpanel.practicepanel .headerbar {
}

.mainpanel.practicepanel .headerbar > .header-left {
    padding-left: 20px;
}

.mainpanel.practicepanel .headerbar > .header-center {
}

.mainpanel.practicepanel .headerbar > .header-right {
}

.mainpanel.studypanel .headerbar > .header-right .btn-menu,
.mainpanel.practicepanel .headerbar > .header-right .btn {
    border-radius: 50%;
    background-color: #000;
    color: #fff;
}

.mainpanel.practicepanel .headerbar > .header-right .btn.dropdown-toggle {
    background-color: transparent;
    border-radius: 5px;
    color: #000;
    padding: 10px;
    min-width: 20px;
}

.mainpanel.practicepanel .headerbar .headermenu > li {
    line-height: 50px;
}

.mainpanel.practicepanel .iboard {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.mainpanel.practicepanel .iboard .progress {
    position: relative;
    border-radius: 25px;
    width: 200px;
    height: 30px;
    background-color: rgba(255, 255, 255, .7);
}

.mainpanel.practicepanel .iboard .progress-bar {
    border-radius: 25px;
}

.mainpanel.practicepanel .iboard .progress-bar span {
    position: absolute;
    right: 10px;
    line-height: 30px;
    font-size: 17px;
}

.mainpanel.practicepanel .timer {
    display: inline-block;
    margin-right: 5px;
}

.mainpanel.practicepanel .timer label {
    display: none;
}

.mainpanel.practicepanel .timer span {
    display: inline-block;
    background-color: #000;
    color: #fff;
    border-radius: 25px;
    padding: 0 20px;
    font-size: 17px;
}

.mainpanel.practicepanel .headerbar .page-title {
    font-size: 22px;
}

/**** question card ***/

.mainpanel .contentpanel.qcardpanel {
    padding: 0px 40px;
}

.mainpanel .qcardpanel .wrapqcard {
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden;
}

.qcardpanel .qcard > .wrap {
    margin: 0 auto;
    max-width: 1000px;
    padding: 10px 20px;
}

.qcardpanel .wrapqcard .navi {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    max-width: 800px;
    width: 100%;
}

.qcardpanel .wrapqcard .navi a {
    color: #ccc;
    font-size: 50px;
    opacity: 0;
}

.qcardpanel .wrapqcard:hover .navi a {
    opacity: 0.5;
}

.qcardpanel .wrapqcard .navi a:hover {
    color: #333;
    opacity: .9;
}

.qcardpanel .wrapqcard .btn-navi-prev,
.qcardpanel .wrapqcard .btn-navi-next {
}

.qcardpanel .qcards {
    height: 100%;
    position: relative;
    z-index: 1;
}

.qcardpanel .qcards .qcard {
    position: relative;
    font-weight: 300;
    font-size: 16px;
    line-height: 22px;
    padding: 0px;
    background-color: #fff;
    width: 100%;
    height: calc(100vh - 220px);
    overflow-y: auto;
}
.studypanel .qcardpanel .qcards .qcard {
    height: calc(100vh - 200px);
}

.invisible {
    visibility: hidden;
}

.qt img,
.question img {
    max-width: 100%;
    max-height: 100%;
}

.question .qt img.myanswer {
    max-width: 100% !important;
}

.qt .qdesc.answer.active img.my,
.qt .dput.active img {
    display: none;
}

.question .qt .answer.qdesc img {
    width: 100%;
}

.question .active.wsol .bg,
.question .active .feedback,
.question .active .myanswer {
    display: none;
}

.question .qt.active .bg+.data+.feedback,
.question .qt.active .bg+.feedback,
.question .qt.active .data+.feedback {
    display: none;
}

.question .gbx.active .feedback,
.question .gbx.active .myanswer,
.question .qt .bg,
.question .gbx .bg,
.question .gbx .data,
.question .qt .data {
    display: none;
}

.question .gbx.active .bg,
.question .active .bg {
    display: block !important;
}

.question .active .feedback {
    display: none;
}

.qcardpanel .tutorbx {
}

.qcardpanel .comment {
    padding: 10px 0px 20px;
    position: relative;
    z-index: 1;
}

.qcardpanel .comment .pic {
    width: 80px;
    border-radius: 50%;
    float: left;
}

.qcardpanel .comment .msg {
    border-radius: 10px;
    min-height: 80px;
    margin-left: 100px;
    position: relative;
    background-color: #fff;
    padding: 10px;
    line-height: 27px;
    display: flex;
    align-items: center;
    font-size: 17px;
    font-weight: 300;
}

.qcardpanel .comment .msg:after,
.qcardpanel .comment .msg:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.qcardpanel .comment .msg:after {
    border-color: rgba(136, 183, 213, 0);
    border-right-color: #fff;
    border-width: 10px;
    margin-top: -10px;
}

.qcardpanel .comment .msg:before {
    border-color: rgba(194, 225, 245, 0);
    border-right-color: #ddd;
    border-width: 11px;
    margin-top: -11px;
}

.qcardpanel .qcards .qcard .btn-check {
    display: none;
    white-space: initial;
}

.qcardpanel .qcards .qcard .item {
    padding: 20px;
    position: relative;
}

.qcardpanel .qcards .qcard .item .prop {
    position: relative;
}

.qcardpanel .qcards .qcard .item .prop .ox {
    position: absolute;
    left: -70px;
    display: none;
}

.qcardpanel .qcards .qcard:hover .item .prop .ox {
    display: inline-block;
}

.qcardpanel .qcards .qcard .item .prop .ox .btn_ox {
    font-size: 40px;
    display: block;
    color: #fff;
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
}

.qcardpanel .qcards .qcard .item .prop .ox .success {
    background-color: blue;
}

.qcardpanel .qcards .qcard .item .prop .ox .fail {
    background-color: red;
}

.qcardpanel .qcards .qcard .item .no {
    padding: 0 30px;
    border-radius: 25px;
    line-height: 40px;
    display: inline-block;
    background-color: #273751;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-bottom: 10px;
}

.qcardpanel .qcards .qcard.fail .item .no::before {
    content: url(/skins/default/images/ox_x.png);
    position: absolute;
    opacity: .4;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.qcardpanel .qcards .qcard.success .item .no::before {
    content: url(/skins/default/images/ox_o.png);
    position: absolute;
    opacity: .4;
    font-size: 70px;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.qcardpanel .qcards .qcard.clinic .item .no::after {
    content: "클리닉";
    position: absolute;
    top: -7px;
    left: 6px;
    border-radius: 8px;
    background-color: #32af5d;
    padding: 5px;
    font-size: 10px;
    line-height: 1;
}

.qcardpanel .qcards .qcard .item .prop .check {
    display: none;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    position: relative;
    top: 2px;
}

.qcardpanel.teacher .qcards .qcard .item .prop ul:hover .check {
    display: inline-block;
}

.qcardpanel .qcards .qcard .item .prop .check a {
    color: #ccc;
    display: inline-block;
    vertical-align: middle;
}

.qcardpanel .qcards .qcard .item .prop .check a:hover {
    color: #e86464;
}

.qcardpanel .qcards .qcard .item .body {
    padding: 5px;
}

.qcardpanel .qcards .qcard.lock .item .body {
    margin-top: 0px;
    padding-top: 5px;
}

.qcardpanel .qcards .qcard .item .tags {
}

.qcardpanel .qcards .qcard .item .tags .tag {
    overflow: initial;
    max-width: initial;
    line-height: 27px;
    font-size: 17px;
    border: none;
    margin: 0px;
}

.qcardpanel .qcards .qcard .prop .btns {
    float: right;
    position: absolute;
    right: 0px;
}

.qcardpanel .qcards .qcard .prop .btns .btn {
    padding: 0 15px;
    border-radius: 25px;
    line-height: 35px;
    display: inline-block;
    background-color: var(--purple);
    color: #fff;
    font-size: 15px;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
}

.paper:not(.end) .qcards .qcard .prop .btns .btn-clear,
.paper:not(.end) .qcards .qcard .prop .btns .btn-video,
.paper:not(.end):not(.edit) .qcards .qcard .prop .btns .btn-sol {
    display: none;
}

.question .prop .btns > .btn-clear {
    display: none !important;
}

.paper:not(.end):not(.tmode) .question.wait .prop .btns .btn-clear,
.paper:not(.end):not(.tmode) .question.testok .prop .btns .btn-clear {
    display: inline-block !important;
}

.question .prop .btns .btn-sol {
    background-color: var(--gray);
}

.qcardpanel .qcards .qcard.lock .item .sol {
    display: block;
}

.qcardpanel .qcards .qcard .item .sol {
    display: none;
    border-top: 1px dashed #ccc;
    margin: 20px 0;
    padding: 40px 0 20px;
    position: relative;
    font-weight: 300;
}

.qcardpanel .qcards .qcard .item .sol::before {
    content: '정답';
    position: absolute;
    top: 5px;
    padding: 2px 10px;
    background-color: #ed4023;
    color: #fff;
    border-radius: 5px;
    font-size: 14px;
}

.qcardpanel .qcards .qcard.lock .btn-check {
    display: inline-block;
}

.testview .mnutoggle {
    display: none;
}

#popup-testinfo .modal-content {
    border-radius: 20px;
}

#popup-testinfo .modal-dialog .modal-body {
    padding-bottom: 100px;
    min-height: 400px !important;
}

#popup-testinfo .modal-body.info .btn-close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 50px;
    line-height: 70px;
    border-radius: 50%;
    background-color: #fff;
    color: #333;
    height: 50px;
    text-align: center;
    cursor: pointer;
}

#popup-testinfo .modal-body.info .cate {
    text-align: center;
}

#popup-testinfo .modal-body.info.testonly.testok .cate {
    display: none;
}

#popup-testinfo .modal-body.info.testonly.testok .title {
    font-size: 17px;
}

#popup-testinfo .modal-body.info .title {
    text-align: center;
    position: relative;
    padding: 10px 0;
}

#popup-testinfo .modal-body.info h1 {
    margin: 40px 0;
    font-size: 50px;
    text-align: center;
}

#popup-testinfo .modal-body.info .score {
    font-size: 70px;
    text-align: center;
}

#popup-testinfo .modal-body.info .score::after {
    content: '점';
    display: inline-block;
    font-size: 20px;
}

#popup-testinfo .modal-body.info .desc {
    font-size: 17px;
    line-height: 27px;
    text-align: center;
}

#popup-testinfo .modal-body.info .info {}

#popup-testinfo .modal-body.info .prop {
    background-color: #333;
    border-radius: 10px;
    padding: 20px 0;
    margin: 20px 0;
}

#popup-testinfo .modal-body.info .prop>li {
    width: 50%;
    text-align: center;
    font-size: 22px;
}

#popup-testinfo .modal-body.info .prop.single li {
    width: 100%;
}

#popup-testinfo .modal-body.info .prop li label {
    margin: 0px;
    color: #fff;
}

#popup-testinfo .modal-body.info .prop li span {
    margin-left: 15px;
    color: #ffc61b;
}

#popup-testinfo .modal-body.info .cate {}

#popup-testinfo .modal-body.info .cate li {
    width: 33%;
    text-align: center;
    font-size: 17px;
}

#popup-testinfo .modal-body.info .cate li label {
    display: block;
    margin-bottom: 10px;
}

#popup-testinfo .modal-body.info .cate li span {
    width: 70%;
    padding-bottom: 70%;
    height: 0;
    display: inline-block;
    position: relative;
    background-color: #fff;
    border-radius: 50%;
}

#popup-testinfo .modal-body.info .cate li.isel span {
    background-color: #5bc0de;
}

#popup-testinfo .modal-body.info .cate li.itext span {
    background-color: #1caf9a;
}

#popup-testinfo .modal-body.info .cate li.idesc span {
    background-color: #f0ad4e;
}

#popup-testinfo .modal-body.info .cate li span b {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 33px;
    color: #fff;
}

#popup-testinfo .modal-body.info .guide {
    margin-top: 20px;
    line-height: 27px;
}

#popup-testinfo .modal-body.info .end .title::after {
    content: '평가완료';
    position: absolute;
    padding;
    5px;
    bottom: -20px;
    left: 50%;
    font-size: 20px;
    transform: translateX(-50%);
    color: #c6512e;
}

#popup-testinfo .modal-body.info .btn-exit,
#popup-testinfo .modal-body.info .btn-report,
#popup-testinfo .modal-body.info .btn-start {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 30px;
    padding: 17px 30px;
}

#popup-testinfo .modal-body.info .frmVerify {
    margin: 10px 0 0;
    padding: 15px 0;
    background-color: #F9F9F9;
    border-top: 1px solid #ccc;
}

#popup-testinfo .modal-body.info .frmVerify .timer {
    color: #d75858;
}

/**** breakpanel ***/

.view .breakpanel {
    display: none;
    position: fixed;
    bottom: 0px;
    width: 100%;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px; 
    text-align: center;
    z-index: 102;
    background-color: #fff;
    animation: step-vhslidein 0.3s linear;
}

.view.popup .breakpanel {
    display: block;
}

.view.popup .ibg {
    display: block;
}

.view .breakpanel .wrap {
    position: relative;
    padding: 30px 20px 50px;
}

.view .breakpanel .wrap::before {
    content: '';
    display: block;
    width: 200px;
    height: 200px;
    margin: 0px auto;
    background-image: url(/skins/default/images/exit.gif);
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center center;
}

.view .breakpanel h2 {
}

.view .breakpanel h2 span {
    display: block;
    font-weight: 300;
    margin-bottom: 10px;
    font-size: 20px;
}

.view .breakpanel .btns {
    margin-top: 30px;
}

.view .breakpanel .btns button {
    background-color: #74d240;
    min-width: 100px;
    height: 45px;
    line-height: 45px;
    border: 0;
    border-radius: 1.8vh;
    box-shadow: 0 10px 0 0 #60bf2c;
    color: #fff;
    display: inline-block;
    text-align: center;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    font-size: 27px;
    font-weight: 500;
    padding: 0 20px;
}

.view .breakpanel .btns button:active {
    box-shadow: 0 5px 0 0 #60bf2c;
}

.view .breakpanel .btns button + button {
    margin-left: 15px;
}

/**** qt html print ***/

.printpanel>.question[type="sol"] .qt,
.printpanel>.question[type="question"] .sol {
    display: none !important;
}


/**** qt html editor ***/

.qteditor {}

.qteditor .note-toolbar .btnMath {
    line-height: 1.56;
}

.qteditor .toolbar {
    font-size: 13px;
}

.qteditor .btn-makeid,
.qteditor .btn-direct-upload {
    display: none;
}

.qteditor .preview {
    height: 400px;
    border: 1px solid #eee;
    padding: 10px;
    overflow-y: auto;
}

.qteditor .log {
    cursor: pointer;
    margin: 5px;
}

.sidepanel .qteditor .log {
    color: #fff;
}

.sidepanel .qteditor .preview {
    background-color: rgba(255, 255, 255, 0.1);
    height: 300px;
    border: none;
    color: #fff;
}

.sidepanel .qteditor .preview .qt {
    color: #fff;
}

.sidepanel .qteditor .preview>.content {
    text-align: unset;
    margin: 0;
}

.sidepanel .qteditor .preview>.content .sol {
    margin-top: 30px;
}

.sidepanel .qteditor .toolbar li {
    float: none;
    color: #fff;
    margin-top: 5px;
}

.sidepanel .qteditor textarea {
    border: none;
    height: 300px;
}

.qteditor .preview img {
    max-width: 100%;
    max-height: 100%;
}

.qteditor .editor {
    display: none;
    background-color: #333;
    color: #fff;
}

.qteditor.on .preview {
    display: none;
}

.qteditor.on .btn-makeid,
.qteditor.on .btn-direct-upload {
    display: inline-block;
}

.qteditor.on .editor {
    display: block;
}

.homeview .article-effect .figure {
    margin: 0;
}

.homeview .article-effect .clearbox {
    margin: 50px auto;
}


.homeview .article-effect .clearbox:after {
    clear: both;
    content: '';
    display: table;
}

.homeview .article-effect .clearbox .eff01 {
    position: relative;
    margin-bottom: 24px;
}

.homeview .article-effect .clearbox .eff01.eff01-half {
    float: left;
    width: calc(50% - 12px);
}

.homeview .article-effect .clearbox .eff01.eff01-half+.eff01-half {
    margin-left: 24px;
}

.homeview .article-effect .clearbox .eff01:nth-child(2n+1) {
    clear: both;
    margin-left: 0px !important;
}

.homeview .article-effect .clearbox .eff01 .header {
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    background: #e9b346;
    height: 57px;
    border: 1px solid #cf9f3e;
    position: relative;
}

.homeview .article-effect .clearbox .eff01 .header .header-label {
    width: 45px;
    height: 45px;
    background: #fff;
    margin-top: -22.5px;
    line-height: 45px;
    text-align: center;
    color: #bb8f15;
    font-weight: 800;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 15px;
}

.homeview .article-effect .clearbox .eff01 .header .header-label:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 8.8px solid #fff;
    border-left: 23px solid #e9b346;
    border-right: 23px solid #e9b346;
    width: 18.48px;
    height: 0;
}

.homeview .article-effect .clearbox .eff01 .header .header-label:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 8.8px solid #fff;
    border-left: 23px solid #e9b346;
    border-right: 23px solid #e9b346;
    width: 18.48px;
    height: 0;
}

.homeview .article-effect .clearbox .eff01 .header .header-title {
    padding-left: 70px;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    line-height: 35px;
}

.homeview .article-effect .clearbox .eff01 .body {
    background: #fef6cb;
    border: 1px solid #e7dca5;
    border-top: 0px;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    height: 260px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.homeview .article-effect .clearbox .eff01 .body img {
    max-width: 100%;
    display: block;
    margin: auto;
}

.homeview .article-effect .clearbox .eff02 {
    float: left;
}

.homeview .article-effect .clearbox .eff02 img {
    max-width: 100%;
    display: block;
    margin: auto;
}

.homeview .article-effect .clearbox .eff02.eff02-01 {
    width: 30%;
}

.homeview .article-effect .clearbox .eff02.eff02-02 {
    width: 42%;
    position: relative;
}

.homeview .article-effect .clearbox .eff02.eff02-02:before {
    display: block;
    position: absolute;
    left: 0px;
    bottom: 24%;
    content: '';
    width: 36px;
    height: 19px;
    background-image: url(/skins/default/images/home/program/effect_02_equal.jpg);
    background-repeat: no-repeat;
    background-position: center;
}

.homeview .article-effect .clearbox .eff02.eff02-02:after {
    display: block;
    position: absolute;
    right: 36px;
    bottom: 24%;
    content: '';
    width: 36px;
    height: 19px;
    background-image: url(/skins/default/images/home/program/effect_02_equal.jpg);
    background-repeat: no-repeat;
    background-position: center;
}

.homeview .article-effect .clearbox .eff02.eff02-03 {
    width: 28%;
}

.homeview .article-effect .clearbox .eff03 {
    float: left;
    width: 48%;
    height: 395px;
    border-radius: 14px;
    border: 1px solid #e4e4e4;
    display: flex;
    justify-content: center;
    align-items: center;
}

.homeview .article-effect .clearbox .eff03+.eff03 {
    margin-left: 20px;
}

.homeview .article-effect .clearbox .eff03 img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

.homeview .article-effect .eff04 {
    width: 100%;
    height: 365px;
    float: left;
    margin-bottom: 20px;
    border: 1px solid #e3e3e3;
    background: #fff;
    position: relative;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 55px;
}

.homeview .article-effect .eff04 img {
    width: 100%;
}

.homeview .article-effect .eff04 figcaption {
    background: #f5f5f5;
    border-top: 1px solid #e3e3e3;
    color: #4c4c4c;
    font-size: 18px;
    text-align: center;
    height: 55px;
    line-height: 55px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

.homeview .article-effect .eff05 {
    border: 1px solid #d8ded7;
    border-radius: 14px;
}

.homeview .article-effect .eff05 img {
    display: block;
    margin: auto;
    max-width: 100%;
}

.homeview .article-effect .eff05.eff05-01 {
    background: #f3f9f2;
    margin-right: 50px;
}

.homeview .article-effect .eff05.eff05-01:after {
    content: '';
    background: url(/skins/default/images/home/program/effect_05_arrow.png) center center no-repeat;
    background-size: 100% auto;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -25px;
}

.homeview .article-effect .eff05.eff05-02 {
    margin-left: 50px;
    background: #fdf4f8;
}

.homeview .article-effect .eff03-list {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-top: 20px;
}

.homeview .article-effect .eff03-list li {
    vertical-align: middle;
    margin-bottom: 15px;
    color: #4f4f4f;
    font-size: 18px;
    padding-left: 40px;
    position: relative;
    line-height: 25px;
}

.homeview .article-effect .eff03-list li:before {
    position: absolute;
    content: '';
    display: inline-block;
    width: 31px;
    height: 31px;
    line-height: 31px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    border-radius: 100%;
    background: #1aa7cf;
    vertical-align: middle;
    top: 50%;
    margin-top: -15.5px;
    left: 0px;
}

.homeview .article-effect .eff03-list li:nth-child(1):before {
    content: '01';
}

.homeview .article-effect .eff03-list li:nth-child(2):before {
    content: '02';
}

.homeview .article-effect .eff03-list li:nth-child(3):before {
    content: '03';
}

.homeview .article-effect .circlebox {
    margin: 20px auto;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.homeview .article-effect .circlebox li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 115px;
    height: 115px;
    border-radius: 20px;
    color: #fff;
    font-size: 20px;
    line-height: 1em;
    margin-bottom: 20px;
    font-weight: bold;
}

.homeview .article-effect .circlebox li+li {
    margin-left: 20px;
}

.homeview .article-effect .circlebox li:nth-child(1) {
    background: #d8b795;
}

.homeview .article-effect .circlebox li:nth-child(2) {
    background: #ed1d85;
}

.homeview .article-effect .circlebox li:nth-child(3) {
    background: #4ab456;
}

.homeview .article-effect .circlebox li:nth-child(4) {
    background: #8d3995;
}

.homeview .article-effect .circlebox li:nth-child(5) {
    background: #1fafe5;
}

.homeview .article-effect .circlebox li:nth-child(6) {
    background: #f68f36;
}

.homeview #story-slide {
    position: relative;
    margin: 50px;
}

.homeview #story-slide .swiper-button-prev,
.homeview #story-slide .swiper-button-next {
    width: 50px;
    height: 83px;
    margin-top: -41px;
    z-index: 1;
}

.homeview #story-slide .swiper-button-prev:active,
.homeview #story-slide .swiper-button-prev:focus,
.homeview #story-slide .swiper-button-next:active,
.homeview #story-slide .swiper-button-next:focus {
    outline: 0;
}

.homeview #story-slide .swiper-button-prev:hover,
.homeview #story-slide .swiper-button-next:hover {
    opacity: 0.8;
}

.homeview #story-slide .swiper-button-prev {
    background-image: url(/skins/default/images/home/kids/slide_prev.png);
    left: -55px;
}

.homeview #story-slide .swiper-button-next {
    background-image: url(/skins/default/images/home/kids/slide_next.png);
    right: -60px;
}

.homeview #story-slide #dabisu-character-slider .swiper-wrapper {
    margin: 0;
}

.homeview #story-slide #dabisu-character-slider .swiper-wrapper .swiper-slide {
    position: relative;
}

.homeview #story-slide #dabisu-character-slider .swiper-wrapper .swiper-slide .swiper-information {
    position: absolute;
    top: 30px;
    left: 30px;
}

.homeview #story-slide #dabisu-character-slider .swiper-wrapper .swiper-slide .swiper-information .swiper-title {
    font-size: 25px;
    color: #292929;
    font-weight: bold;
    letter-spacing: -0.06em;
    margin-bottom: 20px;
}

.homeview #story-slide #dabisu-character-slider .swiper-wrapper .swiper-slide .swiper-information .swiper-desc {
    font-size: 17px;
    color: #3b3b3b;
    line-height: 30px;
    letter-spacing: -0.06em;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 10px;
}

.homeview #story-slide #dabisu-character-slider .swiper-wrapper .swiper-slide .slide-image.slide-image-desktop {
    display: block;
    width: 100%;
}

.homeview #story-slide #dabisu-character-slider .swiper-wrapper .swiper-slide .slide-image.slide-image-mobile {
    display: none;
}

.homeview #story-slide-actions {
    text-align: center;
}

.homeview #story-slide-actions .swiper-pagination {
    position: static;
    margin: 28px 0px;
    z-index: 1;
}

.homeview #story-slide-actions .swiper-pagination .swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    background: #dedede;
    opacity: 1;
}

.homeview #story-slide-actions .swiper-pagination .swiper-pagination-bullet:focus,
.homeview #story-slide-actions .swiper-pagination .swiper-pagination-bullet:active {
    outline: 0;
}

.homeview #story-slide-actions .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #ff738d;
}

.homeview #story-slide-actions .swiper-pagination .swiper-pagination-bullet+.swiper-pagination-bullet {
    margin-left: 10px;
}

.homeview #story-slide-actions .swiper-pagination-char {
    margin: 0px 0 100px 0;
    padding: 0;
    list-tyle: none;
    text-align: center;
    font-size: 0;
    display: inline-block;
}

.homeview #story-slide-actions .swiper-pagination-char>li {
    width: 160px;
    height: 170px;
    display: inline-block;
    background-image: url(/skins/default/images/home/kids/bg_indicator.png);
    background-size: 100%;
    background-repeat: no-repeat;
    vertical-align: middle;
    float: none;
}

.homeview #story-slide-actions .swiper-pagination-char>li+li {
    margin-left: 10px;
}

.homeview #story-slide-actions .swiper-pagination-char>li .char {
    margin: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.homeview #story-slide-actions .swiper-pagination-char>li .char .img-wrapper {
    width: 50%;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.homeview #story-slide-actions .swiper-pagination-char>li .char img {
    max-width: 90%;
}

.homeview #story-slide-actions .swiper-pagination-char>li .char figcaption {
    color: #3e3e3e;
    font-size: 20px;
    text-align: center;
}

.homeview #story-slide-actions .swiper-pagination-char>li.active {
    background-image: url(/skins/default/images/home/kids/bg_indicator_active.png);
}

.homeview #story-slide-actions .swiper-pagination-char>li.active .char figcaption {
    color: #fff;
}

.homeview .kids-map {}

.homeview .kids-map>h5 {
    font-size: 24px;
    font-weight: bold;
    border-top: 1px solid #e7e7e7;
    padding: 30px 0 20px 0;
    word-break: keep-all;
    white-space: normal;
    color: #000;
}

.homeview .kids-map>h5.title-bottom {
    border-top: none;
    padding: 20px 0;
}

.homeview .kids-map .kids-map-box .map-container>#map {
    min-height: 500px;
    background-color: #F9F9F9;
    margin-bottom: 20px;
}

.homeview .kids-map .homeview .kids-map-box {
    border: 1px solid #e4e4e4;
    margin-bottom: 40px;
}

.homeview .kids-map .homeview .kids-map-box .map-container {
    width: 100%;
    position: relative;
}

.homeview .kids-map .homeview .kids-map-box .map-container .map {
    height: 300px;
}

.homeview .kids-map .homeview .kids-map-box .location-info {
    background-color: #f3f3f3;
    padding: 30px 25px 30px 35px;
    margin-bottom: 0px;
}

.homeview .kids-map .homeview .kids-map-box .location-info dl {
    margin-bottom: 0px;
    font-size: 16px;
    line-height: 28px;
    color: #474747;
    padding-left: 90px;
    position: relative;
    word-break: keep-all;
    white-space: normal;
}

.homeview .kids-map .homeview .kids-map-box .location-info dl::after {
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: #e56f85;
    border-radius: 5px;
    left: -10px;
    top: 11px;
    content: "";
}

.homeview .kids-map .homeview .kids-map-box .location-info dl dt {
    position: absolute;
    left: 10px;
}

.homeview .kids-map .homeview .kids-map-info-box figure {
    padding: 30px 10px;
    border: 1px solid #e4e4e4;
    min-height: 400px;
    margin-bottom: 20px;
}

.homeview .kids-map .homeview .kids-map-info-box figure>img {
    width: 100%;
    max-width: 158px;
}

.homeview .kids-map .homeview .kids-map-info-box figure>figcaption {
    color: #2f2f2f;
    word-break: keep-all;
    white-space: normal;
}

.homeview .kids-map .homeview .kids-map-info-box figure>figcaption>strong {
    color: #1e1e1e;
    font-size: 20px;
    margin: 30px 0 20px 0;
    display: block;
}

.homeview .kids-map .homeview .kids-map-info-box figure>figcaption>hr {
    width: 30px;
    height: 2px;
    border: none;
    margin-bottom: 20px;
    background-color: #dbdbdb;
}

.homeview .hangulcontent {
    color: #333;
}

.homeview .hangulcontent>.R1 {
    min-height: 280px;
}

.homeview .hangul_principle>.R1 {
    background: url("/skins/default/images/home/20190812_154.png") no-repeat left top/cover;
}

.homeview .hangul_curriculum>.R1 {
    background: url("/skins/default/images/home/20190812_168.png") no-repeat left top/cover;
}

.homeview .hangul_method>.R1 {
    background: url("/skins/default/images/home/20190812_176.png") no-repeat left top/cover;
}

.homeview .hangul_book>.R1 {
    background: url("/skins/default/images/home/20190812_197.png") no-repeat left top/cover;
}

.homeview .hangulcontent>.R1 .body {
    float: right;
    padding: 40px 5px 5px;
    width: 400px;
}

.homeview .hangulcontent .body h4 {
    font-family: "Binggrae";
    font-weight: bold;
    font-size: 30px;
    padding: 10px 0;
}

.homeview .hangulcontent>.R1 .body h4>b {
    color: #ff7200;
}

.homeview .hangulcontent>.R1 .body p>b {
    font-size: 17px;
    font-weight: 600;
    padding: 5px 0 10px;
    display: block;
}

.homeview .hangulcontent>.bgbx {
    background: url("/skins/default/images/home/20190812_156.png") top left repeat;
    background-color: #f3f3f3;
    padding: 30px 30px;
}

.homeview .hangulcontent .box {
    border-radius: 20px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .1);
}

.homeview .hangul_principle .box {
    background: #fff url("/skins/default/images/home/20190812_158.png") top left no-repeat;
}

.homeview .hangul_curriculum .box {
    background: #fff url("/skins/default/images/home/20190812_169.png") top left no-repeat;
    text-align: center;
}

.homeview .hangul_method .box {
    background: #fff url("/skins/default/images/home/20190812_177.png") top left no-repeat;
}

.homeview .hangul_book .box {
    background: #fff url("/skins/default/images/home/20190812_197.png") top left no-repeat;
}

.homeview .hangul_book .R2 .box {
    background: #fff url("/skins/default/images/home/20190812_190.png") top left no-repeat;
}

.homeview .hangul_book .R3 .box {
    background: #fff url("/skins/default/images/home/20190812_191.png") top left no-repeat;
}

.homeview .hangul_book .R4 .box {
    background: #fff url("/skins/default/images/home/20190812_194.png") top left no-repeat;
}

.homeview .hangulcontent>.bgbx .box>h4 {
    font-family: 'Binggrae';
    font-weight: bold;
    color: #fff;
    font-size: 22px;
    padding: 21px;
}

.hangulcontent .box .body {
    padding: 20px;
    overflow: hidden;
}

.homeview .hangulcontent .box .body .row {
    text-align: center;
}

.homeview .hangul_principle>.R2 .box .row {
    margin-top: 40px;
    margin-bottom: 40px;
}

.homeview .hangulcontent .box .body h5 {
    font-size: 18px;
    font-weight: 500;
    padding: 10px 0;
}

.homeview .hangul_principle>.R2 .box .row .desc {
    padding: 0px;
}

.homeview .hangulcontent .box img {
    width: 90%;
}

.homeview .hangulcontent .box p {
    padding: 0 20px;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 27px;
}

.homeview .hangulcontent>.bgbx>p {
    padding: 15px;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 22px;
}

.homeview .hangul_principle>.R4 h4 {
    display: block;
    text-align: center;
    font-family: 'Binggrae';
    font-weight: bold;
    font-size: 24px;
    word-break: keep-all;
    padding: 30px 0 0;
    color: #ee436b;
    line-height: 35px;
}

.homeview .hangul_principle>.R5 .head {
    padding: 10px;
}

.homeview .hangul_principle>.R5 .head>img {
    vertical-align: bottom;
    margin-right: 20px;
}

.homeview .hangul_principle>.R5 .body {
    overflow: hidden;
    display: block;
    background: url(/skins/default/images/home/20190812_156.png) top left repeat;
    background-color: #f3f3f3;
    padding: 50px 30px 50px 20px;
}

.homeview .hangul_principle>.R5 .body h5 {
    font-family: 'Binggrae';
    font-weight: bold;
    font-size: 24px;
    padding: 30px 0;
    text-align: center;
    color: #000;
}

.homeview .hangul_principle>.R5 .body img {
    width: 80%;
}

.homeview .hangul_principle>.R5 .body p {
    padding: 10px 20px;
    color: #000;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 22px;
}

.homeview .hangulcontent .box .body .cover {
    float: left;
    width: 300px;
    padding: 10px 0px 0px;
}

.homeview .hangulcontent .box .body .info {
    margin-left: 310px;
}

.homeview .hangulcontent .body .card {
    text-align: center;
    border-radius: 20px;
    height: 0;
    margin-bottom: 10px;
    padding-bottom: 125%;
}

.homeview .hangulcontent .body .card h5 {
    font-family: 'Binggrae';
    font-weight: 600;
    font-size: 22px;
    padding: 30px 0 10px 0;
    color: #4769b2;
    white-space: initial !important;
    overflow: initial !important;
}

.homeview .hangul_method .box .body .card {
    height: 500px;
}

.homeview .hangul_principle .body .card h5 {
    color: #000;
    font-family: 'Binggrae';
    font-weight: bold;
    font-size: 24px;
    line-height: 50px;
}

.homeview .hangul_principle>.R5 .body>div:nth-child(1)>.card {
    background-color: #f6b4d1;
}

.homeview .hangul_principle>.R5 .body>div:nth-child(2)>.card {
    background-color: #f179ab;
}

.homeview .hangul_principle>.R5 .body>div:nth-child(3)>.card {
    background-color: #32beef;
}

.homeview .hangul_principle>.R5 .body>div:nth-child(4)>.card {
    background-color: #9adaf0;
}

.homeview .hangul_method .box .body .card {
    padding: 50px 30px;
    margin-bottom: 10px;
}

.homeview .hangulcontent .box .body .card .iwrap {
    height: 220px;
    position: relative;
}

.homeview .hangulcontent .box .body .card .iwrap img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.homeview .hangul_method .body>div:nth-child(1)>.card {
    background-color: #feede3;
}

.homeview .hangul_method .body>div:nth-child(2)>.card {
    background-color: #c5d0e9;
}

.homeview .hangul_method .body>div:nth-child(3)>.card {
    background-color: #d1ecec;
}

.homeview .hangul_method .body>div:nth-child(4)>.card {
    background-color: #e6dbec;
}

.homeview .hangul_method .body>div:nth-child(5)>.card {
    background-color: #ffeed2;
}

.homeview .hangul_method .body>div:nth-child(6)>.card {
    background-color: #d0e7c9;
}

.homeview .hangul_book .box .body .info h5 {
    font-family: 'Binggrae';
    font-weight: bold;
    font-size: 28px;
    display: block;
    border-bottom: 3px dotted #ebebeb;
    padding-bottom: 3px;
}

.homeview .hangul_book .R2 .box .body .info h5 {
    color: #9352a0;
}

.homeview .hangul_book .R3 .box .body .info h5 {
    color: #00b9b5;
}

.homeview .hangul_book .R4 .box .body .info h5 {
    color: #6ebe44;
}

.homeview .hangul_book .box .body .info label {
    font-family: 'Binggrae';
    font-weight: bold;
    font-size: 18px;
    opacity: .9;
    padding-bottom: 12px;
    margin: 0px;
    padding: 10px 0;
    color: #333;
}


/*************  dcode ************/

._dcodeview .contentpanel a {
    /*color: #111;*/
}

._dcodeview .header .quickmnu {
    margin: 0 auto;
    width: 90%;
    max-width: 1200px;
    position: relative;
    display: block;
    overflow: hidden;
    padding: 8px 0;
    line-height: 1;
    text-align: right;
}

._dcodeview .header .quickmnu .sitemap {
    line-height: 30px;
}

._dcodeview .header .quickmnu ul {
    margin-bottom: 0px;
    padding: 3px 0;
    display: inline-block;
}

._dcodeview .header .quickmnu ul>li {
    display: inline-block;
    line-height: 20px;
}

._dcodeview .header .quickmnu ul>li a {
    font-size: 13px;
    font-weight: 300;
    margin-right: 10px;
}

._dcodeview .header .quickmnu .btn-login {
    padding: 5px 13px 5px 8px;
    background-color: #ffd44c;
    font-size: 13px;
    font-weight: 300;
    color: #fff;
    border-radius: 15px;
    font-weight: 500;
    display: inline-block;
}

._dcodeview .header .logobx {
    width: 90%;
    max-width: 1200px;
    position: relative;
    text-align: center;
    margin: 0 auto 0;
    padding-bottom: 15px;
}

._dcodeview .header .logobx .btn-mnu {
    display: none;
}

._dcodeview .header .logobx .mlogo>img {
    height: 36px;
}

._dcodeview .header .logobx .btnEvent {
    position: absolute;
    right: 0;
    top: 45%;
    transform: translateY(-50%);
}

._dcodeview .header nav.mobile {
    display: none;
}

._dcodeview .header nav.mobile {
    width: 280px;
    height: 100%;
    display: block;
    position: fixed;
    top: 0;
    background-color: #fff;
    transform: translateX(-100%);
    transition-delay: 0s;
    transition-duration: 0.3s, 0s;
    transition-property: transform, opacity;
    transition-timing-function: ease, ease;
    overflow-y: auto;
    z-index: 102;
}

.mnu-expand ._dcodeview .header nav.mobile {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
}

._dcodeview .header nav.mobile>.wrap {
    width: 280px;
    padding: 20px;
}

._dcodeview .header nav.screen.fixed {
    position: fixed;
    top: 0px;
    z-index: 2;
    background-color: #fff;
}

._dcodeview .header nav.screen {
    margin: 0 auto;
    width: 100%;
    position: relative;
    display: block;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
}

._dcodeview .header nav.screen ul.mnu {
    width: 100%;
    margin: 0 auto;
    width: 90%;
    max-width: 1200px;
    position: relative;
    display: block;
}

._dcodeview .header nav.screen ul.mnu>li:not(.nomnu) {
    float: left;
    width: 20%;
}

._dcodeview .header nav.screen ul.mnu>li>div>a {
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    color: #333;
    display: block;
}

._dcodeview .header nav.screen>.primary li:not(.nomnu)>div {
    border-bottom: 2px solid transparent;
    padding: 12px 30px;
    display: inline-block;
}

._dcodeview .header nav.screen.on[mnu=intro]>.primary li>div[mnu=intro],
._dcodeview .header nav.screen.on[mnu=start]>.primary li>div[mnu=start],
._dcodeview .header nav.screen.on[mnu=notice]>.primary li>div[mnu=notice],
._dcodeview .header nav.screen.on[mnu=worksheet]>.primary li>div[mnu=worksheet],
._dcodeview .header nav.screen>.primary li:not(.nomnu):hover>div {
    border-bottom: 2px solid #ffd44c;
}

._dcodeview .header nav.screen>.expand {
    position: absolute;
    left: 0;
    width: 100%;
    border-bottom: 2px solid #ffd44c;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.9);
    opacity: 0;
    display: none;
    z-index: 9999;
    transform: translate3d(0px, 0px, 0px);
    transition-delay: 0.1s;
    transition-duration: 0.3s, 0.3s;
    transition-property: transform, opacity;
    transition-timing-function: ease, ease;
}

._dcodeview .header nav.screen.on>.expand {
    opacity: 1;
    display: block;
    transform: translate3d(0px, 0px, 0px);
}

._dcodeview .header nav.screen>.expand li>div {
    margin: 0 auto;
    display: inline-block;
    text-align: left;
}

._dcodeview .header nav.screen .btn-family>button {
    border: 1px solid #a3a3a3;
    font-size: 10px;
    font-weight: 300;
    padding: 4px 20px 4px 25px;
    color: #4d4d4d;
    border-radius: 15px;
    display: inline-block;
    overflow: hidden;
    opacity: .6;
    line-height: 15px;
    margin-top: 17px;
}

._dcodeview .header nav.screen .btn-family .dropdown-menu {
    z-index: 10000;
}

._dcodeview .header nav.mobile .logo {
    height: 30px;
    float: none;
}

._dcodeview .header nav.mobile .btn {
    color: #fff;
    border-radius: 30px;
    padding: 5px 20px;
    margin-top: 30px;
}

._dcodeview .header nav.mobile .mnu {
    text-align: left;
    margin-top: 30px;
}

._dcodeview .header nav.mobile .mnu>ul>li {
    display: block;
    margin-top: 10px;
}

._dcodeview .header nav.mobile .mnu>ul>li a {
    display: inline-block;
    padding: 10px 0;
    white-space: nowrap;
    font-size: 15px;
    vertical-align: middle;
    font-weight: 500;
    color: #000;
}

._dcodeview .header nav.mobile .mnu>ul>li>ul {}

._dcodeview .header nav.mobile .mnu>ul>li>ul>li {
    border-top: 1px solid #eeeeee;
}

._dcodeview .header nav.mobile .mnu>ul>li>ul>li>a {
    font-weight: 300;
    padding: 10px 0 10px 20px;
}

._dcodeview .contentpanel {
    padding: 0px;
}

._dcodeview .contentpanel h3 {
    font-size: 20px;
    margin-bottom: 20px;
    color: #333;
    position: relative;
}

._dcodeview .contentpanel h3 .btn-more {
    position: absolute;
    right: 0px;
}

._dcodeview .contentpanel .banners {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    text-align: center;
    min-height: 480px;
    max-height: 480px;
}

._dcodeview .contentpanel .banner>img {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    min-height: 480px;
    max-height: 480px;
    object-fit: cover;
    object-position: center left;
}

._dcodeview .contentpanel .banner>div {
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: 1200px;
    position: absolute;
    display: block;
    overflow: hidden;
    transform: translateX(-50%);
    left: 50%;
}

._dcodeview .contentpanel .banner>div>.leftbg {
    position: absolute;
    left: 5%;
    top: 50%;
    max-width: 310px;
    min-width: 310px;
    transform: translateY(-50%);
    object-fit: cover;
    object-position: left;
    z-index: 1;
}

._dcodeview .contentpanel .banner>div>.rightbg {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 101%;
    object-fit: cover;
    object-position: right;
}

._dcodeview section>.wrap {
    margin: 0 auto;
    width: 90%;
    max-width: 1200px;
    position: relative;
    display: block;
    overflow: hidden;
}

._dcodeview .quickbar {
    margin: 0 auto;
    width: 100%;
    position: relative;
    display: block;
    overflow: hidden;
    background-color: #ffd44c;
    padding: 10px 0;
}

._dcodeview .quickbar ul {
    display: inline-block;
}

._dcodeview .quickbar ul>li {
    float: left;
    margin-right: 20px;
}

._dcodeview .quickbar a {
    color: #fff;
    font-size: 17px;
}

._dcodeview .intro {
    position: relative;
}

._dcodeview .intro .notice h5 {
    font-size: 20px;
    line-height: 35px;
}

._dcodeview .intro .row>div {
    padding-top: 30px;
}

._dcodeview .intro .notice ul {}

._dcodeview .intro .notice li {
    display: block;
    overflow: hidden;
    padding: 0 0 13px;
}

._dcodeview .intro .notice li>a {
    font-weight: 300;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333;
    padding-right: 80px;
    position: relative;
}

._dcodeview .intro .notice li a>span {
    position: absolute;
    right: 0px;
}

._dcodeview .intro .box {
    overflow: hidden;
    position: relative;
    display: block;
    min-height: 212px;
    max-height: 212px;
    border-radius: 15px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border: none;
    padding: 0px;
}

._dcodeview .intro .box.video .title {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    color: #ffd44c;
    font-size: 17px;
    font-weight: 300;
    text-align: center;
    background-color: rgba(0, 0, 0, .4);
    padding: 5px 0;
    line-height: 1;
}

._dcodeview .intro .box.video .title>img {
    height: 16px;
}

._dcodeview .intro .box.start .title {
    position: absolute;
    max-height: 85%;
    max-width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    object-position: center center;
}

._dcodeview .intro .box.guide .title {
    position: absolute;
    max-height: 45%;
    top: 20px;
    left: 10px;
    object-fit: cover;
    object-position: center center;
}

._dcodeview .intro .box.video .fa-play-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    opacity: 0.5;
}

._dcodeview .intro .box.video:hover .fa-play-circle {
    opacity: 1;
}

._dcodeview .intro .box.guide .chrct {
    position: absolute;
    max-height: 65%;
    bottom: 0;
    right: 0;
    object-fit: cover;
    object-position: center center;
}

._dcodeview .activity {
    position: relative;
}

._dcodeview .activity .row>div {
    padding-top: 10px;
}

._dcodeview .activity .box img {
    min-height: 260px;
    max-height: 260px;
    object-fit: cover;
    object-position: center top;
    width: 100%;
}

._dcodeview .activity .box p {
    font-weight: 300;
    height: 60px;
    line-height: 20px;
}

._dcodeview .characters {
    position: relative;
    padding: 40px 0 50px;
}

._dcodeview .characters ul.clear>li {
    float: left;
    padding-left: 10px;
    width: 20%;
    display: inline-block;
}

._dcodeview .characters .box {
    display: inline-block;
    position: relative;
    width: 100%;
    white-space: normal;
    overflow: hidden;
    background-color: #fff;
    border-radius: 15px;
    background-image: url(/skins/default/images/home/20181121_204.png);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
    cursor: pointer;
}

._dcodeview .characters .box>div {
    height: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

._dcodeview .characters .box>h5 {
    text-align: center;
    font-size: 20px;
    padding: 20px 0;
}

._dcodeview .characters .box.ch1>h5 {
    color: #2997d1;
}

._dcodeview .characters .box.ch2>h5 {
    color: #ec5798;
}

._dcodeview .characters .box.ch3>h5 {
    color: #a0b829;
}

._dcodeview .characters .box.ch4>h5 {
    color: #c33cdd;
}

._dcodeview .characters .box.ch5>h5 {
    color: #beb129;
}

._dcodeview .footer {
    margin: 0 auto;
    width: 100%;
    position: relative;
    display: block;
    overflow: hidden;
    background-image: url(/skins/default/images/home/20181121_046.png);
    background-size: cover;
    background-position: left top;
    background-repeat: repeat;
}

._dcodeview .footer>nav {
    margin: 0 auto;
    width: 95%;
    max-width: 1200px;
    position: relative;
    display: block;
    overflow: hidden;
    padding-top: 90px;
}

._dcodeview .footer>nav li {
    float: left;
    display: block;
    padding: 0 50px;
}

._dcodeview .footer>nav li:not(:first-child) {
    border-left: 1px solid rgba(255, 255, 255, .3);
}

._dcodeview .footer>nav li a {
    color: #fff;
}

._dcodeview .footer>section {
    margin: 0 auto;
    width: 95%;
    max-width: 1200px;
    position: relative;
    display: block;
    overflow: hidden;
    color: rgba(255, 255, 255, .6);
    font-size: 14px;
    padding: 30px 0 50px 150px;
}

._dcodeview .footer>section>.logo {
    position: absolute;
    left: 0;
    top: 40px;
    width: 120px;
}

._dcodeview .footer>section>p {}

._dcodeview .wrappanel>.top {
    margin: 0 auto;
    width: 100%;
    position: relative;
    display: block;
    overflow: hidden;
    height: 140px;
}

._dcodeview .wrappanel>.top {
    background: url(/skins/default/images/home/20181121_223.png) center 60% no-repeat;
    background-size: 100% auto;
}

._dcodeview[spage="start"] .wrappanel>.top {
    background: url(/skins/default/images/home/20181121_224.png) center 60% no-repeat;
    background-size: 100% auto;
}

._dcodeview[spage="board"] .wrappanel.community_board>.top {
    background: url(/skins/default/images/home/20181121_225.png) center 60% no-repeat;
    background-size: 100% auto;
}

._dcodeview[spage="board"] .wrappanel.data_board>.top {
    background: url(/skins/default/images/home/20181121_226.png) center 60% no-repeat;
    background-size: 100% auto;
}

._dcodeview .wrappanel>.top>.btimg {
    width: 90%;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: right;
    background-image: url(/skins/default/images/home/20181121_153.png);
    background-repeat: no-repeat;
    background-position: right bottom;
}

._dcodeview .wrappanel>.top>div.desc {
    width: 90%;
    max-width: 1200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 54px;
    color: #fff;
}

._dcodeview .wrappanel>.top>div.desc>h4 {
    margin: 4px 0;
}

._dcodeview .wrappanel>.top>div.desc>img {
    float: left;
    height: 54px;
    margin-right: 10px;
}

._dcodeview .wrappanel>section.path,
._dcodeview .wrappanel>section.body {
    margin: 0 auto;
    width: 95%;
    max-width: 1200px;
    position: relative;
    display: block;
    overflow: hidden;
    padding: 5px 0;
}

._dcodeview .wrappanel>section.path {
    text-align: right;
    font-weight: 300;
    padding: 10px 0;
}

._dcodeview .wrappanel>section.path span {
    font-weight: 500;
    color: #2196F3;
}

._dcodeview .wrappanel>section.body>.lpanel {
    width: 20%;
    float: left;
    display: block;
    overflow: hidden;
    padding-right: 25px;
}

._dcodeview .wrappanel>section.body>.rpanel {
    width: 80%;
    float: left;
    display: block;
    overflow: hidden;
    background: url(/skins/default/images/home/20181121_051.png) top left no-repeat;
    min-height: 550px;
    padding-left: 50px;
    padding-top: 10px;
}

._dcodeview .wrappanel>section.body>.lpanel>ul {}

._dcodeview .wrappanel>section.body>.lpanel>ul>li {
    border-bottom: 1px solid #e9e9e9;
    padding: 15px 0 2px;
}

._dcodeview .wrappanel>section.body>.lpanel>ul>li a {
    font-size: 15px;
    font-weight: 300;
}

._dcodeview .wrappanel>section.body>.lpanel .btnStart {
    display: inline-block;
    margin-top: 50px;
    border-radius: 10px;
    overflow: hidden;
}

._dcodeview .wrappanel>section.body>.rpanel .introduce {}

._dcodeview .wrappanel>section.body>.rpanel h2 {
    margin: 5px 0 20px;
}

._dcodeview .wrappanel>section.body>.rpanel h3 {}

._dcodeview .wrappanel>section.body>.rpanel h5 {
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

._dcodeview .wrappanel>section.body>.rpanel>b {
    color: #aaa;
    font-weight: 400;
}

._dcodeview .wrappanel>section.body>.rpanel p {
    font-size: 15px;
    font-weight: 300;
    line-height: 25px;
    margin: 10px 0;
}

._dcodeview .wrappanel>section.body>.rpanel .introduce .primaryR1 {
    background-image: url(/skins/default/images/home/20181121_156.png);
    background-position: left top;
    background-repeat: repeat;
    background-color: #f8f8f8;
    border: 1px solid #ededed;
    padding: 25px;
    position: relative;
    border-radius: 20px;
    margin-bottom: 50px;
}

._dcodeview .wrappanel>section.body>.rpanel .introduce .primaryR1 .R1L {
    width: 35%;
    float: left;
}

._dcodeview .wrappanel>section.body>.rpanel .introduce .primaryR1 .R1L img {
    width: 65%;
    margin: 65px auto 0;
    display: block;
}

._dcodeview .wrappanel>section.body>.rpanel .introduce .primaryR1 .R1R {
    width: 65%;
    padding-left: 20px;
    float: left;
}

._dcodeview .wrappanel>section.body>.rpanel .introduce .primaryR2 {
    margin-bottom: 50px;
}

._dcodeview .wrappanel>section.body>.rpanel .introduce .primaryR2 img {
    width: 80%;
}

._dcodeview .wrappanel>section.body>.rpanel .caption {
    display: block;
    font-weight: 300;
    margin: 10px 0px;
}

._dcodeview .wrappanel>section.body>.rpanel .introduce .primaryR3 {
    margin-bottom: 50px;
}

._dcodeview .wrappanel>section.body>.rpanel .introduce .primaryR3 h5 {
    display: inline-block;
    border-radius: 10px;
    padding: 5px 20px;
    color: #fff;
}

._dcodeview .wrappanel>section.body>.rpanel .introduce .primaryR3 .victory h5 {
    background-color: #5b9bd5;
}

._dcodeview .wrappanel>section.body>.rpanel .introduce .primaryR3 .basic h5 {
    background-color: #ffcc66;
}

._dcodeview .wrappanel>section.body>.rpanel .introduce .primaryR3 .inter h5 {
    background-color: #7030a0;
}

._dcodeview .wrappanel>section.body>.rpanel .introduce .primaryR3 img {
    width: 80%;
    margin: 10px 0px;
}

._dcodeview .wrappanel>section.body>.rpanel .introduce .primaryR3 section {
    background-color: #F8F8F8;
    text-align: center;
    padding: 20px 10px;
    border-radius: 10px;
}

._dcodeview .wrappanel>section.body>.rpanel .introduce .primaryR3 section p {
    display: inline-block;
    width: 80%;
}

.characterpanel {
    background-color: transparent;
}

.characterpanel>article {}

.characterpanel ul {
    overflow: hidden;
    padding: 0px 50px;
}

.characterpanel ul:not(:last-child) {
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.characterpanel ul li.pic {
    width: 30%;
    text-align: center;
    min-width: 150px;
    margin: 10px 0;
}

.characterpanel ul li.pic>img {
    width: 50%;
}

.characterpanel ul li.info {
    line-height: 30px;
    font-size: 15px;
    font-weight: 300;
}

.characterpanel ul li.info h4 {
    display: inline-block;
    padding: 5px 15px;
    background-color: #d9534f;
    border-radius: 20px;
    color: #fff;
}

.characterpanel ul#ilbong li.info h4 {
    background-color: #2769b0;
}

.characterpanel ul#cholssak li.info h4 {
    background-color: #ee5281;
}

.characterpanel ul#ssangssang li.info h4 {
    background-color: #8dc63f;
}

.characterpanel ul#sarang li.info h4 {
    background-color: #624ea0;
}

.characterpanel ul#odong li.info h4 {
    background-color: #ffb413;
}

.characterpanel ul li.info>span {
    display: block;
}

.characterpanel ul:nth-of-type(odd) li.pic {
    float: left;
}

.characterpanel ul:nth-of-type(even) li.pic {
    float: right;
}

._dcodeview .wrappanel>section.body>.rpanel .wrapboard {
    margin-bottom: 50px;
    min-height: 600px;
}

._dcodeview .wrappanel>section.body>.rpanel .wrapboard .filter b {
    color: #000;
}

._dcodeview .wrappanel>section.body>.rpanel .wrapboard .filter .smry {
    line-height: 35px;
    width: 50%;
}

._dcodeview .wrappanel>section.body>.rpanel .wrapboard .filter .smry span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    width: 100%;
}

._dcodeview .wrappanel>section.body>.rpanel .wrapboard .filter .search {
    float: right;
    text-align: right;
    width: 50%;
}

._dcodeview .wrappanel>section.body>.rpanel .wrapboard .filter .search>div.btnSearch {
    position: relative;
    display: inline-block;
}

._dcodeview .wrappanel>section.body>.rpanel .wrapboard .filter .search input {
    border-radius: 30px;
    display: inline-block;
}

._dcodeview .wrappanel>section.body>.rpanel .wrapboard .filter .search a {
    position: absolute;
    top: 0px;
    right: 10px;
    line-height: 35px;
}

._dcodeview .wrappanel>section.body>.rpanel .wrapboard table {
    font-size: 15px;
    font-weight: 300;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    margin-top: 10px;
}

._dcodeview .wrappanel>section.body>.rpanel .wrapboard table thead>tr>th {
    border-bottom: 1px solid #d7d5ce;
    background-color: #fbfbfb;
    color: #333;
    font-weight: 400;
}

._dcodeview .wrappanel>section.body>.rpanel .wrapboard table td {
    line-height: 30px;
}

._dcodeview .wrappanel>section.body>.rpanel .wrapboard table .no {
    text-align: center;
}

._dcodeview .wrappanel>section.body>.rpanel .wrapboard table .no>span {
    background-color: #ffd44c;
    color: #fff;
    border-radius: 15px;
    font-size: 13px;
    padding: 2px 14px 3px;
    font-weight: 400;
    line-height: 1;
}

._dcodeview .wrappanel>section.body>.rpanel .wrapboard nav {}

._dcodeview .wrappanel>section.body>.rpanel .wrapboard .pagination {}

._dcodeview .wrappanel>section.body>.rpanel .wrapboard .pagination li {
    margin: 0 5px;
}

._dcodeview .wrappanel>section.body>.rpanel .wrapboard .article {}

._dcodeview .wrappanel>section.body>.rpanel .wrapboard .article>.title {
    font-size: 16px;
    padding: 25px 0;
    border-top: 2px solid #443811;
    border-bottom: 1px solid #d7d5ce;
    background-color: #fbfbfb;
    margin: 5px 0;
}

._dcodeview .wrappanel>section.body>.rpanel .wrapboard .article>.prop>li.author {
    float: left;
    font-size: 13px;
    opacity: .5;
    text-align: left;
    padding: 5px 0;
}

._dcodeview .wrappanel>section.body>.rpanel .wrapboard .article>.prop>li.rdate {
    float: right;
    font-size: 13px;
    opacity: .5;
    padding: 5px 0;
}

._dcodeview .wrappanel>section.body>.rpanel .wrapboard .article>.content {
    min-height: 400px;
    padding: 30px 0;
    border-bottom: 2px solid #443811;
    font-weight: 300;
}

._dcodeview .wrappanel>section.body>.rpanel .wrapboard .article>.btns {
    text-align: right;
    padding: 10px 0;
}

._dcodeview .wrappanel>section.body>.rpanel .wrapboard .article>.btns a {
    display: inline-block;
    background-color: #ffd44c;
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
}

._dcodeview .articles.album .article {
    margin-bottom: 20px;
}

._dcodeview .articles.album .article .thumb {
    position: relative;
}

._dcodeview .articles.album .article .thumb .cover {
    height: 200px;
    cursor: pointer;
}

._dcodeview .articles.album .article:hover .thumb .cover {
    background-size: contain !important;
}

._dcodeview .articles.album .article .thumb .vcnt {
    position: absolute;
    bottom: 5px;
    right: 5px;
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.8);
}

._dcodeview .articles.album .article .thumb .cover>i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    opacity: .5;
}

._dcodeview .articles.album .article .bg {
    display: none;
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

._dcodeview .articles.album .article:hover .bg {
    display: inline-block;
}

._dcodeview .articles.album .article:hover .cover>i {
    color: #333;
    opacity: .8;
}

._dcodeview .articles.album .article .bg>i,
._dcodeview .articles.album .article .bg>a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.8);
    text-align: center;
    border-radius: 5px;
    padding: 10px;
    background-color: rgba(255, 255, 255, .8);
}

._dcodeview .articles.album .article .bg>a>span {
    font-size: 13px;
    display: block;
}

._dcodeview .articles.album .article .cate {
    border-radius: 5px;
    display: inline-block;
    background-color: #e72c16;
    padding: 2px 5px;
    color: #fff;
}

._dcodeview .startpanel .world {
    background-color: #1be3e4;
    text-align: center;
    position: relative;
    overflow: hidden;
}

._dcodeview .startpanel .world>.bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

._dcodeview .startpanel .world>.bgChr1 {
    position: absolute;
    left: 75%;
    top: 15%;
    transform: translate(-50%, -50%);
    height: 10%;
    z-index: 1;
}

._dcodeview .startpanel .world>.map {
    position: relative;
    max-width: 1200px;
    width: 1000px;
    height: 900px;
    margin: 200px auto;
    background: transparent url(/skins/default/images/home/20181121_213.png) no-repeat top left;
    background-size: 100% auto;
}

._dcodeview .startpanel .world>.map>li {
    display: inline-block;
    position: relative;
}

._dcodeview .startpanel .world>.map>.basic {
    width: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

._dcodeview .startpanel .world>.map>.victory {
    width: 53%;
    z-index: 1;
    position: absolute;
    left: 50px;
    bottom: 190px;
}

._dcodeview .startpanel .world>.map>.inter {
    width: 44%;
    z-index: 1;
    position: absolute;
    right: 60px;
    bottom: 230px;
}

._dcodeview .startpanel .world>.map>li>a {
    display: inline-block;
    position: relative;
}

._dcodeview .startpanel .world>.map>li>a:hover .back {
    display: inline-block;
}

._dcodeview .startpanel .world>.map>.victory>a {}

._dcodeview .startpanel .world>.map>.inter>a {}

._dcodeview .startpanel .world>.map>li>a>img {
    width: 100%;
}

._dcodeview .startpanel .world>.map>li>a>.title {
    width: auto;
    height: 48px;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
}

._dcodeview .startpanel .world>.map>li .back {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

._dcodeview .lessons.album .lesson {
    margin-bottom: 20px;
}

._dcodeview .lessons.album .lesson .thumb {
    position: relative;
}

._dcodeview .lessons.album .lesson .thumb .cover {
    height: 150px;
    cursor: pointer;
    background-color: #ddd;
}

._dcodeview .lessons.album .lesson:hover .thumb .cover {
    background-size: contain !important;
}

._dcodeview .lessons.album .lesson .thumb .cover>i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: #333;
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    opacity: .8;
}

._dcodeview .lessons.album .lesson:hover:not(.off) .thumb .cover>i {
    color: #000;
    opacity: 1;
}

._dcodeview .lessons.album .lesson.lock .thumb .cover>i::before {
    content: '\f023';
}

._dcodeview .lessons.album .lesson h5>span {
    display: inline-block;
    border-radius: 5px;
    width: 20px;
    height: 20px;
    background-color: #ca4d18;
    text-align: center;
    margin: 0px;
    line-height: 20px;
    color: #fff;
    margin-right: 5px;
}

._dcodeview .lessons.album .lesson.off h5>span {
    background-color: #aaa;
}

._dcodeview .resrcs.album .resrc {
    margin-bottom: 20px;
}

._dcodeview .resrcs.album .resrc .thumb {
    width: auto;
    position: relative;
    float: none;
    margin: 0px;
}

._dcodeview .resrcs.album .resrc .thumb .cover {
    height: 150px;
    cursor: pointer;
    background-color: #ddd;
}

._dcodeview .resrcs.album .resrc:hover .thumb .cover {
    background-size: contain !important;
}

._dcodeview .resrcs.album .resrc .thumb .cover>i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: #777;
    opacity: .5;
}

._dcodeview .resrcs.album .resrc:hover:not(.lock) .thumb .cover>i {
    color: #fff;
    opacity: .9;
}


/*************  player ************/

#popup-player .modal-dialog {
    width: auto;
    max-width: 960px;
}

#popup-player .modal-content {
    font-size: 12px;
}

#popup-player .modal-header {
    padding: 10px;
}

#popup-player .modal-body {
    padding: 0px;
    min-height: auto !important;
    height: auto !important;
}

#popup-player .over-library .modal-body.contentpanel {
    padding: 15px;
}

.wrap_player {
    height: auto;
    overflow: hidden;
    background-color: #000;
}

.wrap_player>.screen {
    max-width: 100%;
    width: 640px;
    float: left;
    background-color: #000;
    position: relative;
}

.wrap_player>.screen:not(.youtube) {
    height: 480px;
}

.wrap_player>.screen .plyr {
    width: 100%;
    height: 100%;
}

.wrap_player>.screen video {
    max-width: 100%;
}

.wrap_player>.screen .plyr video {
    height: 100%;
}

.wrap_player>.screen>video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wrap_player>.screen .plyr__video-wrapper {
    height: 100%;
}

.wrap_player>.list {
    display: none;
    border-left: 2px solid #eee;
    margin-left: 640px;
    height: 480px;
    overflow: hidden;
    position: relative;
}

.wrap_player.expand .btnExpand>i::before {
    content: '\f053';
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}

.wrap_player:hover .btnExpand {
    display: inline-block;
}

.wrap_player .btnExpand {
    background-color: rgba(0, 0, 0, .5);
    border: none;
    line-height: 480px;
    padding: 0px 5px;
    margin: 0px;
    font-size: 22px;
    color: #ccc;
    position: absolute;
    z-index: 1;
    top: 0px;
    right: 0px;
    display: none;
}

.wrap_player.expand>.list {
    display: block;
}

.wrap_player>.list .head {
    position: relative;
    line-height: 30px;
    background-color: #1A1A1A;
    font-size: 14px;
    color: #eee;
    border-bottom: 1px solid #999;
    line-height: 40px;
    padding: 0px 10px;
}

.wrap_player>.list .head a {
    color: #fff;
    float: right;
    display: none;
}

.wrap_player.edit>.list .head a {
    display: inline-block;
}

.wrap_player>.list .body {
    min-width: 300px;
    max-height: 440px;
    overflow-y: auto;
}

.wrap_player .list .idx.active {
    background-color: rgba(255, 255, 255, 0.2);
}

.wrap_player .list .idx:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.wrap_player .list .idx {
    padding: 5px 45px 5px 5px;
    line-height: 25px;
    border-bottom: 1px solid #555;
    position: relative;
    cursor: pointer;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wrap_player .list .idx .badge {
    border-radius: 5px;
    margin-right: 5px;
}

;
.wrap_player .list .idx.active .badge {
    background-color: #4399f1;
}

.wrap_player .list .idx .time {
    position: absolute;
    right: 5px;
}

.popupidx {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.9);
    padding: 40px;
    width: 400px;
    z-index: 2;
    text-align: right;
    border-radius: 10px;
}

.view>.clipedit,
#popup-player .modal-content .editbx {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.9);
    padding: 40px;
    width: 50%;
    z-index: 2;
    text-align: right;
    border-radius: 10px;
}

.view>.clipedit .form-group,
.popupidx .editbx .form-group,
#popup-player .modal-content .editbx .form-group {
    font-size: 17px;
    font-weight: 700;
    text-align: left;
    margin-bottom: 10px;
    color: #000;
}

.view>.clipedit.file .form-group.cliptime,
#popup-player .modal-content .editbx.file .form-group.cliptime {
    display: none;
}


/*************  Mission ************/

.missionview .wrap-body {
    background-color: #000;
    overflow: hidden;
    margin: 0px;
}

.missionview .wrap-body .stage {
    float: none;
    text-align: center;
}

.missionview .wrap-body.horizontal .stage {
    float: left
}

.missionview #animation_container {
    display: block;
    margin: 0 auto
}

.missionview .command {
    height: 30px;
    margin: 0px;
    padding: 5px
}

.missionview .body {
    position: relative;
    width: 100%;
    min-height: 300px
}

.missionview #blocklyArea {
    height: 100%;
}

.missionview #blocklyDiv {
    position: absolute;
    width: 100%;
    height: 100%
}

.missionview .missionpanel .container {
    width: 50%;
    height: 100%;
    float: left;
    background-color: #fff;
}

.missionview .missionpanel .stage {
    min-height: 10px;
}

.missionview .missionpanel .stage canvas {
    height: 100%;
    margin: 0 auto;
}

.missionview .missionpanel .command {
    height: auto;
    position: relative;
}

.missionview .missionpanel.ready .command {}

.missionview .missionpanel .command .btnStart.ing {
    background-color: #1CAF9A;
    border-color: #17a08c;
}

.missionview .missionpanel .command .btnStart.ing>span {
    visibility: hidden;
    position: relative;
}

.missionview .missionpanel .command .btnStart.ing>span::after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "중지하기";
}

.missionview .missionpanel .command .btnStart.ing>i::before {
    content: '\f04d';
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}

.missionview .nav-tabs>li>a {
    font-size: 17px;
}

.missionview .missionpanel .blkeditor {
    height: 100%;
}

.missionview .missionpanel .blkeditor .blkarea {
    height: 100%;
}

.missionview .blk {
    display: inline-block;
    position: absolute;
}

.missionview .blk.left {
    right: 0px;
}

#popup-mission .closex {
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 0;
    font-size: 30px;
    background: transparent;
    border: none;
    color: #fff;
    opacity: 0.5;
    z-index: 10001;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

#popup-mission .closex {
    width: 50px;
    height: 50px;
}

#popup-mission .closex:hover {
    opacity: 1;
}

#popup-mission .closex::before {
    content: '';
    position: absolute;
    left: 0%;
    width: 100%;
    height: 2px;
    background: #000;
    transform: rotate(45deg);
    z-index: 1;
}

#popup-mission .closex::after {
    content: '';
    position: absolute;
    left: 0%;
    width: 100%;
    height: 2px;
    background: #000;
    transform: rotate(-45deg);
    z-index: 1;
}

#popup-mission .modal-content .content {
    width: 100%;
    padding: 30px 0px;
    text-align: center;
}

#popup-mission .modal-body .viewer .wrap_mission {
    max-width: 100%;
    width: 800px;
    height: 400px;
    margin: 0 auto;
    display: block;
    background-color: #fff;
}

.missionview .titlebar {
    position: relative;
    height: 30px;
    background-color: #8c9294;
    font-size: 14px;
    color: #fff;
    text-align: center;
}

.missionview .titlebar>.toolboxtitle {
    width: 235px;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.4);
    height: 30px;
    padding: 5px;
    text-align: center;
}

.missionview .titlebar>.workspacetitle {
    padding: 5px 5px 5px 240px;
}

.missionview .wrap-body.vertical .content {
    padding: 0px;
    position: relative;
    width: auto;
    margin: 0px;
    max-width: none;
    background-color: #000;
}

.missionview .wrap-body.vertical .stage {
    padding-top: 0px;
    background-color: #000;
    text-align: center;
    display: inline-block;
    float: left;
}

.missionview .wrap-body.vertical .workspace {
    overflow: hidden;
    background-color: #fff;
}

.missionview .wrap-body.vertical.passive .stage {
    float: none;
    display: block;
}

.missionview .wrap-body.vertical.passive .workspace {
    padding-left: 0px;
}

.missionview #snippetDiv>div {
    border-radius: 0.5em;
    background: #528ac1;
    color: white;
    padding: .5em;
    cursor: pointer;
    margin: .2em;
}

.missionview #snippetDiv {
    padding: 10px;
    background-color: #fff;
}

.missionview #snippetDiv>div.variable {
    background: #7d52c1;
}

.missionview #snippetDiv>div>span.title {
    font-weight: bold;
}

.missionview #snippetDiv>div>span.desc {
    color: #1e2d4e;
    padding-left: 1em;
    font-size: .8em;
}


/*********** Report ***********************/

.reportview i.btn-expand {
    padding: 0 5px;
}

.reportview .empty {
    padding-left: 37px;
}

.reportview .empty>i.btn-expand {
    display: none;
}

.reportview .progressgrp>span {
    float: left;
}

.reportview .progressgrp .progress {}

.reportview .widget .row {
    line-height: 25px;
    padding: 5px 0;
}

.reportview .widget.clsusage .row {
    cursor: pointer;
}

.reportview .grpbx>.grpbx {
    display: none;
}

.reportview .grpbx.expand>.row .btn-expand::before {
    content: "\f146";
}

.reportview .grpbx.expand>.grpbx {
    display: block;
}

.reportview .chart-daily {
    height: 200px;
}

.reportview .chart-monthly {
    height: 200px;
}


/*********** Teacher Profile *************/

.teacher-profile {}

.teacher-profile>.profile {
    text-align: center;
}

.teacher-profile .profile .pic {
    width: 100px;
    border-radius: 50%;
}

.teacher-profile .rate {
    display: block;
}

.teacher-profile>.career {
    text-align: center;
    padding: 15px 0;
    border-top: 1px solid #eee;
}

.teacher-profile>.license {
    text-align: center;
    padding: 15px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.teacher-profile .career label,
.teacher-profile .license label {
    display: block;
    font-size: 15px;
    margin-top: 5px;
}

.teacher-profile>.career .row b {
    line-height: 30px;
}

.teacher-profile .message p {
    line-height: 22px;
}

.teacher-profile .review .info {}

.teacher-profile .review .info .name {
    display: block;
}

.teacher-profile .review .info .rate {}

.teacher-profile .review .info .rdate {}

.teacher-profile .review .info p {}


/*********** kids learn *************/

.mainpanel2 .learnpanel {
    padding: 0px;
    min-height: 800px;
}

.mainpanel2 .learnpanel>.wrapcontent {
    margin: 0 auto;
    max-width: 1120px;
    position: relative;
    padding: 0 10px;
}

.learnpanel .wrap {
    margin: 0 auto;
    max-width: 1120px;
    position: relative;
    padding: 0 10px;
}

.learnpanel .viewer {
    background-color: #000;
}

.learnpanel .viewer>.wrap.mission {
    text-align: center;
}

.learnpanel .wrap_player {
    max-width: 100%;
    width: 854px;
    height: 480px;
    margin: 0 auto;
}

.learnpanel .wrap_player video {
    height: 100%;
    width: 100%;
}

.learnpanel .wrap_mission {
    max-width: 100%;
    width: 800px;
    height: 400px;
    margin: 0 auto;
    display: block;
}

.learnpanel .wrap_player .plyr {
    height: 100%;
}

.learnpanel .wrap_player .plyr__video-wrapper {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
}

.learnpanel .wrap_player .plyr video {
    height: 100%;
}

.learnpanel .player {}

.learnpanel .lpanel {
    min-height: 400px;
    width: 700px;
    float: left;
    padding: 5px;
    position: relative;
}

.learnpanel .rpanel {
    margin-left: 705px;
    min-height: 400px;
    overflow: hidden;
}

.learnpanel .wrapcontent h3 {
    margin: 15px 0;
    line-height: 33px;
}

.learnpanel .wrapcontent h4 {
    font-size: 15px;
}

.learnpanel .wrapcontent h4>span.more {
    font-weight: normal;
    font-size: 13px;
    float: right;
}

.learnpanel .wrapcontent .title {
    position: relative;
}

.learnpanel .wrapcontent .title>.option {
    position: absolute;
    top: 0px;
    right: 10px;
    display: none;
}

.learnpanel.edit .wrapcontent .info:hover .title>.option {
    display: inline-block;
}

.learnpanel.edit .wrapcontent .title>.option {}

.learnpanel .wrapcontent .title>.option>.btn {
    color: #333;
    text-shadow: none;
}

.learnpanel .wrapcontent .info .title {
    padding-right: 50px;
}

.learnpanel .wrapcontent .info .body {
    background-color: #fafafa;
    padding: 5px;
    border-top: 2px solid #ddd;
}

.learnpanel .wrapcontent .menu {
    text-align: right;
    padding: 10px 0;
}

.learnpanel .wrapcontent .menu a {
    margin-right: 10px;
    color: #333;
}

.learnpanel .wrapcontent .lpanel .desc {
    min-height: 100px;
    padding: 10px 0;
    line-height: 25px;
    font-size: 15px;
}

.learnpanel .attachment.items {
    padding: 10px 0;
}

.learnpanel .attachment.items>.item {
    width: 150px;
    height: 112px;
    padding-bottom: 15%;
    position: relative;
    float: left;
    cursor: pointer;
    border-radius: 3px;
    margin-left: 15px;
    margin-bottom: 15px;
}

.learnpanel.edit .attachment.items>.item:hover>.option {
    display: inline-block;
}

.learnpanel .attachment.items>.item:first-child {
    margin-left: 0px;
}

.learnpanel .attachment.items>.item .icon {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    color: #fff;
    border-radius: 5px;
    opacity: .5;
    background-color: #333;
    padding: 10px;
    display: none;
}

.learnpanel .attachment.items>.item:hover .icon {
    display: inline-block;
}

.learnpanel .attachment.items>.item .title {
    position: absolute;
    left: 0px;
    bottom: 0px;
    display: block;
    padding: 5px;
    background-color: #000;
    opacity: .5;
    width: 100%;
    color: #fff;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.learnpanel .attachment.items>.btn-add {
    padding: 7px 10px;
    border: 1px dashed #ddd;
    color: #d97979;
    border-radius: 5px;
    display: none;
}

.learnpanel .wrapcontent .review {
    min-height: 200px;
    border-top: 1px solid #ddd;
    margin-bottom: 20px;
}

.learnpanel .wrapcontent .review .postbx {
    margin-bottom: 10px;
    background-color: #F9F9F9;
    padding: 10px;
}

.learnpanel .wrapcontent .review .postbx .body {
    margin-left: 70px;
    overflow: hidden;
}

.kids-panel .widget.dabisukids>.widget-header>h2.title {
    font-size: 22px;
    padding-left: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.learnpanel .wrapcontent .review .postbx textarea {
    height: 100px;
}
.learnpanel .wrapcontent .review .form-group>label {
    display: none;
}
.learnpanel .wrapcontent .review .form-group .col-sm-10 {
    width: 100%;
    padding: 0px;
}
.learnpanel .wrapcontent .review .form-group .toolbar {
    display: none;
}
.learnpanel .wrapcontent .review .postbx .cmd {
    padding: 7px 0;
}
.learnpanel .wrapcontent .review .comments {}
.learnpanel .wrapcontent .review .comments .comment {
    margin-bottom: 10px;
    position: relative;
}
.learnpanel .review .pic {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #EFEFEF;
    float: left;
}
.learnpanel .review .pic>img {
    width: 100%;
}
.learnpanel .review .comments .comment>.body {
    margin-left: 80px;
    overflow: hidden;
}
.learnpanel .review .comments .comment>.body>.info {
    padding: 7px 0;
}
.learnpanel .review .comments .comment>.body>.msg {
    line-height: 22px;
}
.learnpanel .review .comments .comment>.items {}
.learnpanel .review .comments .comment .items .item {
    width: 100px;
    height: 80px;
    position: relative;
    display: inline-block;
    margin: 5px 5px 5px 0;
    padding: 0px;
    cursor: pointer;
}
.learnpanel .review .comments .option {
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
}
.learnpanel .review .comments .option .btn {
    text-shadow: none;
    color: #333;
}
.learnpanel .review .comments .comment:hover {}
.learnpanel .review .comments .comment:hover .option {
    display: inline-block;
}
.learnpanel .wrapcontent .products {
    min-height: 200px;
    border-top: 1px solid #ddd;
}
.learnpanel .wrapcontent .products .product {
    margin-bottom: 10px;
    box-shadow: none;
}
.learnpanel .src span[data-role="del"] {
    position: absolute;
    top: -5px;
    right: -5px;
    color: #333;
    font-size: 20px;
    cursor: pointer;
    z-index: 2;
    display: none;
}
.learnpanel.edit .src:hover span[data-role="del"] {
    display: inline-block;
}
.learnpanel .wrapcontent .products .product .wrapthumb {
    overflow: hidden;
}
.learnpanel .wrapcontent .products .product .thumb {
    padding-bottom: 90%;
    background-color: #F9F9F9;
    transition: all .2s ease;
}
.learnpanel .wrapcontent .products .product:hover .thumb {
    transform: scale(1.2);
}
.learnpanel .wrapcontent .products .product h5 {}
.learnpanel .wrapcontent .products .product .discount {}
.learnpanel .wrapcontent .products .product .price {
    text-decoration: line-through;
    color: red;
    font-size: 13px;
}
.learnpanel .wrapcontent .products .btn-new {
    padding-bottom: 90%;
    margin-bottom: 10px;
    position: relative;
    background-color: rgba(255, 255, 255, .5);
    border: 1px dashed #ddd;
    color: #f72121;
    width: 100%;
    display: inline-block;
    transition: all .2s ease;
}
.learnpanel .wrapcontent .products .product.btn-new:hover {
    background-color: #fcf3cb;
    font-size: 25px;
}
.learnpanel .wrapcontent .products .btn-new>i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #d97979;
}
.learnpanel .wrapcontent .next {
    margin-bottom: 10px;
}
.learnpanel .wrapcontent .similar {
    border-top: 1px solid #ddd;
    margin-bottom: 10px;
}
.learnpanel .wrapcontent .lessons {
    min-height: 200px;
}
.learnpanel .wrapcontent .lessons .lesson {
    overflow: hidden;
    cursor: pointer;
}
.learnpanel .wrapcontent .lessons .lesson>.thumb {
    width: 40%;
    padding-bottom: 30%;
    float: left;
    background-color: #F9F9F9;
    position: relative;
    margin-right: 5px;
}
.learnpanel .wrapcontent .lessons .lesson>.thumb>.like {
    padding: 0px 5px;
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, .8);
    color: #fff;
    border-radius: 5px;
    font-size: 10px;
}
.learnpanel .wrapcontent .lessons .lesson>.thumb>.like>i {
    margin-right: 3px;
}
.learnpanel .wrapcontent .lessons .lesson>.info {
    overflow: hidden;
}
.learnpanel .wrapcontent .mentor {
    border-top: 1px solid #ddd;
}
.learnpanel .wrapcontent .mentor .teachers {}
.learnpanel .wrapcontent .mentor .teacher {
    margin-bottom: 10px;
    cursor: pointer;
}
.learnpanel .wrapcontent .mentor .teacher .pic {
    float: left;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #F9F9F9 url(/common/images/profile_tf.png) no-repeat center center/cover;
}
.learnpanel .wrapcontent .mentor .teacher .pic.man {
    background: #F9F9F9 url(/common/images/profile_tm.png) no-repeat center center/cover;
}
.learnpanel .wrapcontent .mentor .teacher .info {
    margin-left: 90px;
    overflow: hidden;
    line-height: 25px;
}
.learnpanel .wrapcontent .mentor .teacher .info>span {
    display: block;
}
.learnpanel .wrapcontent .mentor .teacher .info>.name {
    font-weight: 600;
}
.learnpanel .wrapcontent .mentor .teacher .info>.rate {}
.learnpanel .wrapcontent .mentor .teacher .info>.rate>i.fa-star {
    color: #ef5382;
}

/*********** Use Coupon *************/
.wrapcoupon {
    margin: 0 auto;
    max-width: 600px;
    padding: 10px;
}
.wrapcoupon .info {
    text-align: center;
    padding: 20px 10px;
}
.wrapcoupon h1 {
    font-size: 30px;
}
.wrapcoupon .info .bxcoupon {
    background: #a3a5ea url(/skins/default/images/home/20190812_127.png) no-repeat center center /cover;
    width: 300px;
    margin: 30px auto 10px;
    padding: 10px;
    text-align: center;
    border-left: 10px dotted #fff;
    border-right: 10px dotted #fff;
    height: 130px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.wrapcoupon .info .bxcoupon h3 {
    font-size: 17px;
    margin: 10px 0px;
    color: #fff;
    text-shadow: 1px 1px 3px #333;
}
.wrapcoupon .info .condition {
    padding: 10px;
    margin: 10px 0;
}
.wrapcoupon .btnCoupon {
    border-radius: 30px;
    margin: 10px 0;
}
.wrapcoupon .info .bxcoupon h5>span {
    background-color: #49494f;
    display: inline-block;
    padding: 5px 15px;
    color: #fff;
    border-radius: 15px;
}
.wrapcoupon .bxresult {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    padding: 50px;
    box-shadow: 1px 1px 5px #ddd;
    border-radius: 10px;
    text-align: center;
    background-color: #F9F9F9;
}
.wrapcoupon .bxresult .invalid {
    color: #999;
}
.wrapcoupon .guide {
    border-top: 1px solid #ddd;
    padding: 10px;
}
.wrapcoupon .guide label {}
.wrapcoupon .guide ul {}
.wrapcoupon .guide ul>li {
    line-height: 20px;
    font-weight: 300;
}

/****** question  && eqteditor  *************/
.latex {
    display: inline-block;
}
.question .katex-display {
    margin: 0px;
}
.ex .answer:not(img),
.question .answer:not(img) {
    display: inline-block;
    cursor: pointer;
    padding: 2px;
    vertical-align: middle;
    color: #0d9ef5;
    position: relative;
}

.ex span.answer,
.question .answers > .answer {
    border: 1px solid #ddd;
    text-align: center;
}

.qcardpanel:not(.teacher) .question .qt .content .answer.wait:not(.active):not(.ok) {
    animation: .5s linear infinite alternate sign;
    border: 2px dashed #ff258b;
}

@keyframes sign {
    from {
        border-color: transparent;
    }
    
    to {
        border-color: var(--green);
    }
}

.qcardpanel:not(.teacher) .question .answer.wait:not(.active):not(.ok)::before {
    content: '\f0a5';
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 47px;
    position: absolute;
    top: 0px;
    right: -45px;
    color: #fda61e;
    text-shadow: 1px 1px 1px #333;
    animation: .7s linear infinite alternate hmotion;
}

@keyframes hmotion { 
    0% { margin-right: -10px; }
    to { margin-right: 0px; }
}

.qcard.question .qt .answers > .answer:not(img) {
    display: flex;
    justify-content: center;
    align-items: center;
}

.qcard.question .qt .answer:not(img) {
    min-width: 10px;
    min-height: 10px;
}

.page .question .qt .answer:not(img) {
    font-size: 22px;
}

.question.vsol .qt .answers > .answer > img.my,
.question.vsol .qt .answers > .answer > span {
    opacity: .3;
}

.question .qt .answers > .answer::after {
    content: attr(data-sol);
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    color: red;
}

.question .qt .answers > .answer.qdesc::after,
.question .qt .answers > .answer.dput::after {
    content: '';
}

.question.vsol .qt .answers > .answer::after {
    display: flex;
    justify-content: center;
    align-items: center;
}

.qt .tips {
}

.qt .tip {
    position: absolute;
    display: none;
    font-size: 13px;
    line-height: 17px;
}

.qt .tip.on {
    display: inline-block;
    padding: 3px;
    cursor: pointer;
}

.qt .tip.video {
    background: url(/skins/default/images/video-camera.png) no-repeat center center/contain;
}

.qt .tip.img {
}

.qt .tip .desc {
    display: none;
    font-size: 13px;
    line-height: 17px;
    padding: 3px;
    background-color: #FFF8F0;
}

.qt .tip.popup {
    width: auto !important;
    height: auto !important;
}

.qt .tip.text {
    height: auto !important;
    background-color: rgba(255, 255, 255, .8);
    padding: 0px;
}

.qt .tip.popup .desc {
    min-width: 100px;
    max-width: 250px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    border-radius: 5px;
    position: relative;
}

.qt .tip.popup .desc:after,
.qt .tip.popup .desc:before {
    left: 5px;
    top: -5px;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.qt .tip.popup .desc:after {
    border-color: rgba(136, 183, 213, 0);
    border-right-color: #fff;
    border-width: 5px;
    margin-top: -4px;
    transform: rotate(90deg);
}

.qt .tip.popup .desc:before {
    border-color: rgba(194, 225, 245, 0);
    border-right-color: #ddd;
    border-width: 5px;
    margin-top: -5px;
    transform: rotate(90deg);
}

.qt .tip.popup::before {
    content: '\f059';
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    color: var(--purple);
    font-size: 17px;
    padding: 3px;
    display: block;
}

.qt .tip.text::before {
    content: '힌트';
    color: var(--purple);
    display: block;
    padding: 3px;
    border-bottom: 1px solid var(--purple);
}

.qt .tip.text .desc,
.qt .tip.expand.popup .desc {
    display: block;
}

#popup-tip .modal-header {
    border-bottom: none;
}

#popup-tip .modal-content {
    border-radius: 20px;
    border: 10px solid #79acee;
}

#popup-tip .modal-title {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    padding: 5px 20px;
    font-weight: bold;
    border-radius: 40px;
    text-align: center;
    font-size: 27px;
    background-color: #79acee;
    color: #fff;
    box-shadow: 0 5px 0px #598ed3;
    z-index: 1;
    cursor: move;
}

#popup-tip .modal-title::before {
    background: url(/skins/default/images/dabisu/ch_sarang_s.png) no-repeat center center/contain;
    width: 150px;
    height: 150px;
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
}

#popup-tip .modal-header .close {
    position: absolute;
    top: -20px;
    right: -20px;
    background-color: #79acee;
    border-radius: 50%;
    padding: 10px;
    color: #fff;
    opacity: 1;
    box-shadow: 0 5px 0px #598ed3;
    z-index: 1;
}

#popup-tip .modal-body {
    background-color: #fff;
    border-radius: 0 0 20px 20px;
    font-size: 17px;
    min-height: 150px !important;
}

.question .ex.disabled .answer:not(img) {
    text-align: left;
    border: none;
    background-color: transparent;
}

.ex .answer:not(img) {
    width: 100%;
    display: block;
}
.ex .answer:not(img):not(:first-child) {
    margin-top: 5px;
}
.omr .ex .bx {
    width: 100%;
    padding: 3px 10px 0px 45px;
}
.ex img.answer {
    max-width: 90%;
    cursor: pointer;
}
.omr .answer>img {
    height: 99%;
}

.omr .answer.active,
.question .answers > .answer.active:not(img) {
    border: 2px dashed #f00 !important;
}

.question .answers > .answer.active:not(img):not(.qdesc) {
    background-color: #fffdfa !important;
}

.question .qt {
    color: #000;
}

.question .qt .katex .strut {
    display: none;
}

.question .qt .content {
    max-width: 600px;
}

.qcard.question .qt {
    font-family: "NotoSerifKR";
    font-size: 22px !important;
    line-height: 33px;
}

body .page .question .qt .title {
    font-size: 17px !important;
}

body .question .qt .title,
body .question .qt h5 {
    margin: 0px 0px 20px;
    font-size: 22px !important;
    line-height: 33px;
    font-family: "NotoSerifKR";
}
.question[data-atype$=desc]:not(.lock) .qt {
    cursor: pointer;
}
.question[data-atype=desc] .gbx {
    position: relative;
    /*
    background-image: linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 0px);
    background-size: 100% 2em;
    background-position-y: 24px;
    line-height: 2em;
    */
    
    background: radial-gradient(#ccc 1px, transparent 1px);
    background-size: 25px 25px;
    cursor: pointer;
    overflow: initial;
}
.question[data-atype=desc]:not(.lock) .gbx:not(.on)::before {
    content: "클릭 후 풀이과정을 입력하세요.";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ccc;
    white-space: nowrap;
}
.question .ans:not(.active) {
    position: relative;
    margin: 20px 0;
    padding: 20px 0;
    border-top: 1px dashed #ccc;
    cursor: pointer;
}
.edit .question.lock:not([data-atype$=desc]) .qt,
.edit .question[data-atype$=desc] .myanswerbx {
    cursor: pointer;
}
.qcard.question .ans:not(.active)::before {
    content: "답안";
    display: inline-block;
    border-radius: 5px;
    padding: 2px 10px;
    background-color: #4174ab;
    color: #fff;
    position: absolute;
    top: 10px;
    left: -57px;
    font-size: 14px;
}
.qcard.question .ans.feedbackbx:not(.active)::before {
    content: "첨삭";
    background-color: #ab4195;
}
.question .myanswerbx>img {
    max-width: 100%;
}
.qcard.question .ans img {
    display: block;
    max-width: 100%;
}

.numberpad {
    position: fixed;
    left: 0px;
    bottom: -150px;
    width: 100%;
    z-index: 1;
    text-align: center;
    transition: all 0.2s ease-out 0s;
}

.padon .numberpad {
    bottom: 0px;
}

.numberpad > .wrap {
    display: inline-block;
    border-radius: 10px 10px 0 0;
    padding: 10px 20px;
    background-color: #efefef;
    box-shadow: 0 -1px 10px rgba(0, 0, 0, .4);
    position: relative;
    white-space: nowrap;
}

.numberpad > .wrap > div {
    display: inline-block;
}

.numberpad .btn {
    display: inline-block;
    line-height: 50px;
    min-width: 50px; 
    border-radius: 10px;
    padding: 0px 10px;
    font-size: 33px;
    font-weight: bold;
}

.numberpad .numbers .btn {
    background-color: #fff;
    border: 1px solid #aaa;
}

.numberpad .mode .btn {
    color: #fff;
    background-color: var(--purple);
}

.numberpad .numbers > .btnDel,
.numberpad .btnEnter {
    color: #fff;
    background-color: var(--purple);
}

.numberpad .console {
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #efefef;
    padding: 10px 10px 5px;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -4px 5px rgba(0, 0, 0, .3);
}

.numberpad .console .panel {
    color: #fff;
    background-color: #000;
    width: 300px;
    height: 55px;
    line-height: 50px;
    margin: 0px;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    overflow: hidden;
}

.eqbg {
    display: none;
    position: absolute;
    width: 100%;
    top: 0;
}
.eqon .eqbg {
    display: block;
}

.eqeditor {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .3);
    z-index: 103;
}
.eqeditor .wrapeqpad {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.eqeditor .wrapeqpad>img {
    position: absolute;
    top: 70px;
    left: 10px;
    z-index: -1;
    display: none;
}
.view.eqon {
    overflow: hidden;
}
.view.eqon .qts {
    padding-top: 65px;
}
.view.eqon .eqeditor {
    display: block;
}
.view.wsol .eqeditor .wrapeqpad>img,
.view.owsol .eqeditor .wrapeqpad>img {
    display: block;
    max-width: 90%;
}
.eqeditor>nav {
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 100;
}
.eqeditor .btns {
    padding: 10px;
    background-color: rgba(0, 0, 0, .8);
}
.eqeditor .btns .btn-group {
    margin: 0px;
}
.eqeditor .btns .btn-group .dropdown-menu {
    padding: 5px;
    min-width: 180px;
}
.eqeditor .btns .btn-group .dropdown-menu::before {
    border-bottom: 6px solid #fff;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    content: "";
    display: inline-block;
    position: absolute;
    top: -6px;
    left: 10px;
}
.eqeditor .btns .colorpicker {
    padding: 5px 0 0;
}
.eqeditor .btns .colorpicker>.color {
    display: inline-block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    border: 5px solid #fff;
    border-radius: 50%;
}
.eqeditor .btns .colorpicker>.color.active {
    border-color: #ccc;
}
.eqeditor .btns .colorpicker>.color.black {
    background-color: black;
}
.eqeditor .btns .colorpicker>.color.red {
    background-color: red;
}
.eqeditor .btns .colorpicker>.color.blue {
    background-color: blue;
}
.eqeditor .btns .colorpicker>.color.yellow {
    background-color: #ffc107;
}
.eqeditor .btns .colorpicker>.color.green {
    background-color: green;
}
.eqeditor .btns .nav-btn {
    border-radius: 5px;
    width: 45px;
    height: 45px;
    vertical-align: top;
    border: none;
    background-color: transparent;
    color: #fff;
    -webkit-appearance: none;
    cursor: pointer;
}
.eqeditor .btns .nav-btn.active,
.eqeditor .btns .nav-btn:hover {
    background-color: rgba(255, 255, 255, .5);
}
.eqeditor .btns>input {
    display: inline-block;
    width: 100px;
    vertical-align: middle;
}
.eqeditor .btns .btn-close {
    font-size: 40px;
    font-weight: 300;
    margin-top: 0px !important;
    line-height: 0.8em;
    float: right;
    cursor: pointer;
}
.eqeditor .eqpad {}
.eqeditor.move .bgpad {
    display: block;
}
.eqeditor .bgpad {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.eqeditor #convert {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 80px;
    height: 80px;
    border: none;
    border-radius: 50%;
    background-color: #ffc107;
    color: #fff;
    box-shadow: 1px 1px 5px #000;
    cursor: pointer;
    text-align: center;
}
.eqeditor #convert:hover {
    background-color: #ffb907;
}
.eqeditor #convert>i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.spinner {
    display: inline-block;
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.spinner div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #fcf;
    border-radius: 50%;
    animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fdd transparent transparent transparent;
}
.spinner div:nth-child(1) {
    animation-delay: -0.45s;
}
.spinner div:nth-child(2) {
    animation-delay: -0.3s;
}
.spinner div:nth-child(3) {
    animation-delay: -0.15s;
}

/** 마이페이지 내정보 사이드바 */
.infoprofile .my-service-header {
    margin-top: 10px;
}
.infoprofile .mypage-my-service-header {
    margin-top: 20px;
}
.infoprofile .my-service-name {
    display: inline-block;
    background-color: #ffffff;
    border-radius: 16px;
    padding: 4px 8px;
    margin: 2px 0;
}
.infoprofile .my-service-name>.service-tag {
    display: inline-block;
    color: #ffffff;
    font-size: 12px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    text-align: center;
    vertical-align: bottom;
    background-color: lightgray;
}
.infoprofile .my-service-name>.service-tag[title=다비수] {
    background-color: #8081e4;
}
.infoprofile .my-service-name>.service-tag[title=홈앤고] {
    background-color: #33b15e;
}
.infoprofile .my-service-name>.service-tag[title=리딩앤써] {
    background-color: #8646e4;
}
.infoprofile .my-service-name>.service-tag[title=다비수키즈] {
    background-color: #cd873d;
}
.infoprofile .my-service-name>.service-tag[title=다비수코드] {
    background-color: #e833e6;
}
.infoprofile .my-service-name>.service-tag[title=오창영논술수학] {
    background-color: #e44646;
}
.infoprofile .my-service-name>.service-tag[title="The T-Math"] {
    background-color: #6B6275;
}
.infoprofile .my-service-name>.service-tag[title=기타] {
    background-color: #333333;
}
.infoprofile .my-service-name>.service-tag[title=한글방글] {
    background-color: #F8B800;
}
.infoprofile .my-service-name>.service-tag[title="한글방글(학원)"] {
    background-color: #A40B5E;
}
.infoprofile .my-service-name>.service-tag[title="다비키즈(홈스쿨)"] {
    background-color: #DB6050;
}
.infoprofile .my-service-name>.service-tag[title=방문수업용] {
    background-color: #0097FF;
}
.infoprofile .my-service-name>.service-tag[title=키즈영어] {
    background-color: #6C4598;
}
.infoprofile .my-service-name>.service-tag[title="새다론"] {
    background-color: #4b4a4a;
}

/********** headpanel  *********************/


.contentpanel.examlist .wraplst .body .row {
    line-height: 33px;
}

.modal .exam-body table {
    font-size: 14px;
    font-weight: 300;
}

.modal .exam-body > h4 {
    font-size: 15px;
    background-color: #F9F9F9;
    border-radius: 5px;
    padding: 3px 5px;
}

.modal .exam-body .guide {
    font-weight: 300;
    line-height: 22px;
}

.wrong {
  animation: shake 0.3s 2;
}

.wrongtoast {
    width: 300px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    visibility: visible;
    z-index: 1;
    text-align: center;
}

.wrongtoast > img {
    width: 100%;
}

.wrongtoast > h2 {
    margin: 0px;
    font-size: 22px;
    line-height: 33px;
    border-radius: 30px;
    background-color: #794682c9;
    display: inline-block;
    padding: 10px 20px;
    color: #fff;
}

.wrongtoast.show {
    visibility: hidden;
    -webkit-animation: mshake 0.3s 4;
    animation: mshake 0.3s 4;
}


/* study view */

.view[name=lesson_study] {
    background-color: var(--yellow);
}

.msgon .headerbar .btn-tutor {
    display: none;
}

.mainpanel.studypanel .contentpanel {
    padding: 0 15px 15px;
}

.mainpanel.studypanel .infopanel {
    height: 100px;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 15px;
    position: relative;
    box-shadow: 0 2px 0px #ccac4a;
}

.mainpanel.studypanel .infopanel .subject {
    float: left;
    width: 50%;
    position: relative;
    padding: 45px 10px 10px;
    font-size: 17px;
    font-weight: 300;
    height: 100px;
}

.mainpanel.studypanel .infopanel .subject::before {
    content: '학습주제';
    position: absolute;
    top: 10px;
    border-radius: 15px;
    padding: 5px 15px;
    background-color: #000;
    color: #FFF;
    font-size: 15px;
    font-weight: normal;
}

.mainpanel.studypanel .infopanel .steps {
    float: left;
    width: 50%;
    height: 100%;
    text-align: left;
    padding: 10px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.mainpanel.studypanel .infopanel .steps .step {
    position: relative;
    display: inline-block;
    max-width: 150px;
    width: 20%;
    height: 100%;
    background-color: #EFEFEF;
    border-radius: 10px;
    cursor: pointer;
    opacity: .3;
}

.mainpanel.studypanel .infopanel .steps .step.completed::after {
    content: '\f46c';
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    position: absolute;
    top: 0px;
    right: -5px;
    font-size: 30px;
    color: #e35822;
}

.mainpanel.studypanel .infopanel .steps .step.active {
    opacity: 1;
}

.mainpanel.studypanel .infopanel .steps .step > h5 {
    position: absolute;
    bottom: 0px;
    padding: 10px;
    width: 100%;
    background-color: #000;
    color: #fff;
    text-align: center;
    margin: 0px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.mainpanel.studypanel .infopanel .steps .step + .step {
    margin-left: 50px;
}

.mainpanel.studypanel .infopanel .steps .step + .step::before {
    content: '\f0da';
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: -35px;
    transform: translateY(-50%);
    font-size: 50px;
    color: #999;
}

.mainpanel.studypanel .contentpanel > .screen {
    position: relative;
    height: calc(100dvh - 200px);
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.mainpanel.studypanel .contentpanel > .screen[data-type=video] {
    background-color: #333;
}

.view.end > .endbox,
.view.start > .startbox {
    display: inline-block;
}

.view > .infobox {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    max-width: 90%;
    width: 600px;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 25px;
    z-index: 102;
    box-shadow: 0 0 10px #555;
}

.view > .infobox .title {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 33px;
    font-weight: bold;
    background-color: var(--purple);
    color: #fff;
    border-radius: 50px;
    padding: 20px 80px;
    border: 7px solid #fff;
    white-space: nowrap;
}

.view > .infobox .content {
    width: 100%;
    height: 100%;
    min-height: 400px;
    padding: 70px 30px 70px;
    font-size: 27px;
    line-height: 47px;
}

.view > .infobox > .btn-close {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #fff;
    font-size: 50px;
    color: #777;
    z-index: 1;
}

.view > .infobox > .btn-close:hover {
    color: #000;
}

.view > .endbox .content::before {
    content: '';
    display: block;
    height: 200px;
    background: url(/skins/default/images/dabisu/ch_sarang_s.png) no-repeat top center/contain;
    margin: 0 0 30px;
}

.view > .endbox .content {
    padding: 70px 50px 120px;
}

.view > .endbox .content .prop {
    border-radius: 10px;
    margin-top: 20px;
    overflow: hidden;
    background-color: #333;
    text-align: center;
}

.view > .endbox .content .prop label {
    margin: 0px;
    float: left;
    width: 40%;
    padding: 10px 20px;
    background-color: #EFEFEF;
}

.view > .endbox .content .prop span {
    display: block;
    padding: 10px 20px;
    font-weight: bold;
    color: #fff;
}

.view > .infobox .btns {
    position: absolute;
    bottom: -30px;
    width: 100%;
    text-align: center;
}

.view > .infobox .btns > .btn {
    display: inline-block;
    font-size: 33px;
    font-weight: bold;
    border-radius: 40px;
    padding: 20px 30px;
    color: #fff;
    border: 7px solid #fff;
}

.view > .infobox .btns > .btn + .btn {
    margin-left: 20px;
}

.view > .infobox .btn-start {
    background-color: #fb5a4a;
}

.view > .infobox .btn-repeat {
    background-color: var(--yellow);
}

.view > .infobox .btn-next {
    background-color: var(--green);
}

.view.msgon > .msgbox {
    display: block;
    bottom: 20px;
}

.view > .msgbox {
    position: fixed;
    left: 20px;
    bottom: -300px;
    width: calc(100dvw - 40px);
    min-height: 150px;
    padding: 30px 10px 30px 190px;
    border-radius: 30px;
    background-color: #FFF;
    z-index: 102;
    font-size: 23px;
    line-height: 37px;
    transition: all .5s ease-out;
}

.view > .msgbox::before {
    content: '';
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 180px;
    height: 120%;
    background: url(/skins/default/images/dabisu/ch_odong_s.png) no-repeat left top/contain;
}

.view:not(.msgon) > .msgbox::before {
    bottom: 320px;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    background: #fff url(/skins/default/images/dabisu/ch_odong_s.png) no-repeat center center/70%;
    transition: all .5s ease-out;
    opacity: 0.5;
    cursor: pointer;
}

.view:not(.msgon) > .msgbox:hover::before {
    opacity: 1;
}


/********** keyframes  *********************/

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes step-vhslidein {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wslidein {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0%); }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
    -webkit-transform: translateX(0);
  }
  30% {
    transform: translateX(-1%);
    -webkit-transform: translateX(-1%);
  }
  70% {
    transform: translateX(1%);
    -webkit-transform: translateX(1%);
  }
}

@keyframes mshake {
  0%, 60% {
    visibility: visible;
    margin-left: -2px;
  }
  30%, 90% {
    margin-left: 2px;
  }
}


@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }
    
    100% {
        transform: rotate(360deg);
    }
}

/********** 18. MEDIA QUERIES **********/

@media screen and (max-width: 1388px) {
    .homeview .wrappanel>.quicklink {
        display: none;
    }
}

@media screen and (min-height: 1300px) {
    .body_course .mainpanel.studentpanel .contentpanel {
        padding: 300px 50px 400px;
    }

    body[data-module=_dabisu][data-role=student] .leftpanel .profile img {
        width: 130px;
    }
}

@media screen and (min-width: 1300px) and (min-height: 900px) and (orientation: landscape) {
    .body_mypage .mainpanel.studentpanel .contentpanel {
        padding: 90px 50px 170px;
    }

    .body_mypage .mainpanel.studentpanel .courses .course {
        height: calc(100dvh - 420px);
    }

    .body_game .gamepanel.studentpanel .contentpanel {
        padding: 200px 50px 250px;
    }

    .body_game .gamepanel.studentpanel .main .box {
        height: calc(100dvh - 520px);
    }

    .body_game .gamepanel.studentpanel .etc .box {
        margin-top: 20px;
        height: calc((100dvh - 540px) / 2);
    }
}

@media screen and (max-width: 1300px) {
    body.body_game .gamepanel.studentpanel .contentpanel {
        padding: 30px 20px 60px;
    }

    body.body_game .gamepanel.studentpanel .main .box {
        height: calc(100dvh - 160px);
    }

    body.body_game .gamepanel.studentpanel .etc .box {
        margin-top: 20px;
        height: calc((100dvh - 180px) / 2);
    }

    body .gugudanpanel .dans {
        min-width: 80%;
    }

    .body_lecture .mainpanel.studentpanel .page .wrap.quad .box {
        height: 50%;
        width: calc((100% / 2) - 5px);
        padding: 50px 10px 10px 0;
    }

    .body_lecture .mainpanel.studentpanel .page .wrap.quad .box:nth-child(3) {
        padding: 10px 10px 50px 0;
    }

    .body_lecture .mainpanel.studentpanel .page .wrap.quad .box:nth-child(even) {
        padding-left: 10px;
        padding-right: 0px;
    }

    body.body_lecture .mainpanel.studentpanel .contentpanel .notepanel .page.left::after,
    body.body_lecture .mainpanel.studentpanel .contentpanel .notepanel .page.left::before {
        width: 60px;
        right: -40px;
    }

    .body_lecture .mainpanel.studentpanel .contentpanel .notepanel {
        width: 90%;
        height: 90%;
    }
}

@media screen and (max-width: 1300px) and (orientation: portrait) {
    body.body_mypage .mainpanel.studentpanel .courses .victory,
    body.body_mypage .mainpanel.studentpanel .courses .basic {
        width: 50%;
        margin-bottom: 15px;
    }

    .body_mypage .mainpanel.studentpanel .contentpanel {
        padding: 50px 20px 70px;
    }

    .body_mypage .mainpanel.studentpanel .courses .course {
        height: calc(100dvh - 400px);
    }

    body.body_mypage .mainpanel.studentpanel .courses .inter {
        width: 100%;
    }

    body.body_mypage .mainpanel.studentpanel .courses .course {
        height: calc((100dvh / 2) - 180px);
    }

    body.body_mypage .mainpanel.studentpanel .courses .inter .course {
        background: #d14c75 url(/skins/default/images/dabisu/ch_odong_face.png) no-repeat bottom -50px center/60% auto;
    }

    body.body_mypage .mainpanel.studentpanel .courses .course .title {
        bottom: initial;
        top: 10px;
        padding: 5px;
        width: 50%;
        min-width: 200px; 
        max-width: 250px; 
    }

    .body_game .gamepanel.studentpanel .main {
        width: 100%;
    }

    .body_game .gamepanel.studentpanel .etc {
        width: 100%;
    }

    body.body_game .gamepanel.studentpanel .main .box {
        height: calc((100dvh - 200px) / 3);
    }

    body.body_game .gamepanel.studentpanel .etc {
        margin-top: 0px;
    }

    body.body_game .gamepanel.studentpanel .etc .box {
        height: calc((100dvh - 200px) / 3);
    }

    body .contentpanel.center {
        padding: 0 50px;
    }

    body .contentpanel.center .row > div {
        width: 50%;
    }
}

@media screen and (max-width: 1000px) and (orientation: portrait) {
    body.body_lecture .view .mainpanel.studentpanel {
        width: 100%;
        height: calc(960 * (100vw / 480));
        background: url(/skins/default/images/dabisu/roadmap_bg_s.jpg) no-repeat left center/cover;
        overflow: hidden;
        padding: 0px;
    }

    .body_lecture .roadmap .lessons .lesson {
        width: 15%;
    }

    .body_lecture .roadmap .lessons .lesson:nth-child(1) {
        top: 5%;
        left: 10%;
    }

    .body_lecture .roadmap .lessons .lesson:nth-child(2) {
        top: 10%;
        left: 35%;
    }
    .body_lecture .roadmap .lessons .lesson:nth-child(3) {
        top: 13%;
        left: 70%;
    }
    .body_lecture .roadmap .lessons .lesson:nth-child(4) {
        top: 30%;
        left: 83%;
    }
    .body_lecture .roadmap .lessons .lesson:nth-child(5) {
        top: 40%;
        left: 50%;
    }
    .body_lecture .roadmap .lessons .lesson:nth-child(6) {
        top: 34%;
        left: 25%;
    }
    .body_lecture .roadmap .lessons .lesson:nth-child(7) {
        top: 54%;
        left: 27%;
    }
    .body_lecture .roadmap .lessons .lesson:nth-child(8) {
        top: 60%;
        left: 53%;
    }
    .body_lecture .roadmap .lessons .lesson:nth-child(9) {
        top: 52%;
        left: 78%;
    }
    .body_lecture .roadmap .lessons .lesson:nth-child(10) {
        top: 72%;
        left: 70%;
    }

    body.body_course .mainpanel.studentpanel .contentpanel {
        padding: 250px 50px 300px;
    }

    body.body_lecture .mainpanel.studentpanel .contentpanel {
        padding: 20px 20px 40px;
    }

    body .gugudanpanel .dans {
        top: 53%;
        width: 85%;
    }

    body .gugudanpanel .dans::before {
        width: 60%;
        top: -23%;
    }

    body .gugudanpanel .dans .row > div {
        width: 33%;
    }

    .body_lecture .mainpanel.studentpanel .contentpanel .notepanel {
        padding: 0px;
        height: 98%;
        width: 90%;
    }

    body .kids-panel.edit .widget.dabisukids .nav-tabs > li {
        margin-bottom: 1px;
    }

    .body_lecture .mainpanel.studentpanel .page.left .wrap.double .box + .box {
        padding: 15px 0px 20px;
    }

    .view > .msgbox {
        font-size: 22px;
    }
}

@media screen and (min-width: 1200px) {
    body .container {
        max-width: 1000px;
        width: auto;
    }
    .qcardpanel .iboard .items .wrap {
        scrollbar-width: thin;
    }
    .qcardpanel .iboard .items .wrap::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    .qcardpanel .iboard .items .wrap::-webkit-scrollbar-thumb {
        background: #ddd;
        border-radius: 16px;
    }
    .qcardpanel .iboard .items .wrap::-webkit-scrollbar-track {
        background-color: #fff;
    }
}

@media screen and (min-width: 1024px) {
    body .messagepanel .container .nav-tabs {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    body {
        position: relative;
    }
    body .container {
        max-width: 1000px;
        width: auto;
    }
    .overpanel .overbody {}
    .leftpanel {
        width: 0px;
    }
    .mainpanel {
        margin-left: 0;
        width: 100%;
    }
    .leftpanel-collapsed .leftpanel {
        display: none;
    }
    .leftpanel-collapsed .mainpanel {
        margin-left: 0;
    }
    .leftpanel-collapsed .headerbar {
        margin-left: 0;
    }
    .leftpanel-show section {
        overflow-x: hidden;
    }
    .leftpanel-show .leftpanel {
        display: block;
    }
    .leftpanel-show .mainpanel {
        margin-left: 240px;
    }
    .stickyheader .headerbar {
        left: 0;
    }
    .stickyheader.leftpanel-show .headerbar {
        left: 240px;
    }
    .stickyheader.chat-relative-view .headerbar {
        right: 240px;
        left: auto;
    }
    .stickyheader .header-right {
        margin-right: 0;
    }
    .btn-demo {
        margin-bottom: 20px;
    }
    .leftpanelinner {
        padding: 5px 10px;
    }
    .leftpanelinner .searchform input {
        background: #131b26;
        border: 0;
    }
    /* horizontal menu related */
    .nav-horizontal {
        position: relative;
    }
    .horizontal-menu .menutoggle {
        display: block;
    }
    .horizontal-menu .headerbar .logopanel {
        display: none;
    }
    .nav-horizontal .caret {
        display: none;
    }
    .horizontal-menu .header-left,
    .horizontal-menu .topnav {
        float: none;
    }
    .horizontal-menu-sidebar .header-left,
    .horizontal-menu-sidebar .topnav {
        float: none;
    }
    .fixed-noleft .menutoggle {
        display: block;
    }
    .fixed-noleft .headerbar .logopanel {
        display: none;
    }
    .fixed-noleft .header-left,
    .fixed-noleft .topnav {
        float: none;
    }
    .overpanel .panel-report .wrapcontent {
        max-width: 1000px;
    }
    body .overpanel .panel-report .wrapcontent {
        width: 100%;
    }
    .widget[type="kids"] table thead th.w300 {
        width: 150px !important;
    }
    body .widget[type="kids"] table .items:not(.resrcbx) .item {
        width: 100%;
    }
    body .mainpanel.kidsgamepanel .contentpanel .row > div .box .title {
        font-size: 14px;
    }
}

@media screen and (max-width: 1080px) and (orientation: landscape) {
    body .mainpanel.practicepanel .contentpanel {
        padding: 0px 10px 10px;
    }

    .body_lecture .mainpanel.studentpanel .contentpanel {
        height: calc(100dvh - 240px);
    }

    body .qcardpanel .qcards .qcard {
        height: calc(100vh - 140px);
    }

    body .qcardpanel .comment {
        padding: 0 0 10px;
    }

    body .qcardpanel .comment .pic {
        width: 50px;
    }

    body .qcardpanel .comment .msg {
        min-height: 50px;
        margin-left: 70px;
    }

    .leftpanel .menu {
        margin: 0px;
    }

    .leftpanel .profile {
        padding: 10px;
        text-align: left;
        margin-bottom: 10px;
    }

    .leftpanel .profile .info {
    }

    .leftpanel .profile .media-object {
        width: 80px;
        display: inline-block;
    }

    .body_course .mainpanel.studentpanel .contentpanel .mtitle {
        top: 35px;
        font-size: 27px;
    }

    body.body_lecture .view .mainpanel.studentpanel .contentpanel .notepanel > div {
        width: 50%;
        height: 100%;
    }

    .body_course .mainpanel.studentpanel .lectures .lecture {
        min-width: 200px;
        margin-right: 20px;
    }

    .body_lecture .mainpanel.studentpanel .page.left {
        padding-top: 60px;
    }

    .body_lecture .mainpanel.studentpanel .page .title {
        padding: 0px 5px;
        font-size: 27px;
        line-height: 60px;
    }

    .body_lecture .mainpanel.studentpanel .page .videobx {
    }

    .body_lecture .mainpanel.studentpanel .page .videobx::after {
        padding-bottom: 70%;
    }

    .body_lecture .mainpanel.studentpanel .contentpanel .notepanel .page .wrap {
        padding: 10px;
        width: 90%;
    }

    .body_lecture .mainpanel.studentpanel .page .item.box {
        height: 50%; 
    }

    body.body_lecture .mainpanel.studentpanel .contentpanel .notepanel .page.left::before {
        top: 20%;
        left: initial;
        right: -35px;
        width: 50px;
        height: 20px;
    }

    body.body_lecture .mainpanel.studentpanel .contentpanel .notepanel .page.left::after {
        bottom: 20%;
        right: -35px;
        width: 50px;
        height: 20px;
    }

    body.body_lecture .mainpanel.studentpanel .page .wrap .box {
        padding: 10px 0px 5px;
    }

    body.body_lecture .mainpanel.studentpanel .page.left .wrap .box {
        padding: 0px 0px 10px;
    }

    .body_lecture .mainpanel.studentpanel .page.left .wrap.double .title + .box {
         height: 100%;
    }

    body.body_lecture .mainpanel.studentpanel .page.left .wrap.double .box {
        float: left;
        width: 47%;
        height: 100%;
        padding: 0px 0px 10px;
    }

    body.body_lecture .mainpanel.studentpanel .page.left .wrap.double .box + .box {
        margin-left: 6%;
        padding: 0px 0px 10px;
    }

    body.body_lecture .mainpanel.studentpanel .page .wrap.double .box + .box {
        padding: 5px 0px 10px;
    }

    body.body_lecture .mainpanel.studentpanel .page .wrap.quad .box {
        padding: 20px 5px 5px 0;
    }

    body.body_lecture .mainpanel.studentpanel .page .wrap.quad .box:nth-child(3) {
        padding: 10px 5px 10px 0;
    }

    body .gugudanpanel .dans::before {
        width: 100%;
        top: -30%;
    }
}

@media screen and (max-width: 980px) and (max-height: 500px) and (orientation: landscape) {
    .body_lecture .roadmap .lessons .lesson .no {
        border: none;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #000;
        background-color: transparent;
        width: auto;
        line-height: initial;
    }

    .body_lecture .roadmap .lessons .lesson .no > span {
        display: none;
    }

    .body_lecture .roadmap .lessons .lesson .point {
        font-size: 15px;
    }

    .body_mypage .view[name=mypage_default] .mainpanel.studentpanel .headerbar::before {
        display: none;
    }

    .body_course .mainpanel.studentpanel .contentpanel {
        padding: 40px 20px 50px;
    }

    body.body_lecture .view .mainpanel.studentpanel .contentpanel {
        height: calc(100dvh - 70px);
        padding: 5px 10px 10px;
    }

    .body_lecture .view > .lessons {
        padding: 10px 35px;
        transform: translateY(100%);
        transition: all .2s ease-out;
    }

    .body_lecture .lectureview.over .lessons {
        transform: translateY(0%);
    }

    .body_lecture .view > .lessons .lesson {
        width: 80px;
        height: 80px;
        margin-right: 10px;
    }


    body .leftpanel .menu {
        padding: 0px;
    }

    body .signinpanel form {
        padding: 20px;
    }

    body .sidepanel .panel-header p {
        display: none;
    }

    body .panel-body .shorts .plyr {
        height: calc(100dvh - 52px);
    }

    body .screen.youtube.shorts {
        padding-bottom: 87%;
    }

    body .view .breakpanel {
        border-radius: initial;
        height: 100%;
    }

    body .view .breakpanel .wrap {
        padding: 10px;
    }

    body .view .breakpanel h2 {
        margin: 5px 0;
    }

    body .view .breakpanel .btns {
        margin-top: 10px;
    }

    body[data-module="_dabisu"][data-role="student"] .leftpanel .profile .media-object {
        float: left;
        width: 80px;
    }

    body[data-module="_dabisu"][data-role="student"] .leftpanel .profile .info {
        text-align: left;
        padding: 10px 0 10px 90px;
    }

    .mainpanel.studentpanel .mnutoggle {
        padding: 5px 10px;
    }

    .overpanel .headerbar > div {
        padding: 5px 10px;
    }

    .mainpanel.studentpanel .headerbar > div {
        padding: 5px;
    }

    .mainpanel.studentpanel .headerbar > .header-left {
    }

    .overpanel .headerbar .page-title, 
    .mainpanel.studentpanel .headerbar .page-title {
        font-size: 22px;
    }

    body .view .mainpanel.studentpanel {
        padding-top: 60px;
    }

    body .overpanel .headerbar,
    body .view .mainpanel.studentpanel .headerbar {
        height: 60px;
    }

    body .overpanel .headerbar .btn {
        font-size: 22px;
    }

    body .view .mainpanel.studentpanel .pagefooter .btn {
        margin: 0 20px;
    }

    body .view .mainpanel.studentpanel .pagefooter .btn i {
        font-size: 27px;
    }

    body .view .mainpanel.studentpanel .pagefooter .btn span {
        font-size: 15px;
        margin-top: 5px;
    }

    .body_mypage .mainpanel.studentpanel .contentpanel {
        padding: 20px 40px 75px;
    }

    .body_mypage .mainpanel.studentpanel .courses .course {
        height: calc(100dvh - 160px);
    }

    .body_mypage .mainpanel.studentpanel .courses .course .title {
        top: 10px;
        bottom: initial;
        font-size: 27px;
        padding: 5px;
    }

    body.body_game .gamepanel.studentpanel .contentpanel {
        padding: 30px 20px 50px;
    }

    body.body_game .gamepanel.studentpanel .contentpanel > .row {
        white-space: nowrap;
    }

    body .gameview .contentpanel.hpanel {
        white-space: nowrap;
        overflow-y: hidden;
        overflow-x: auto;
    }

    body .gameview .contentpanel.hpanel .box .title {
        font-size: 17px;
    }

    body.body_game .view .gamepanel.studentpanel .row .box {
        width: 250px;
        height: calc(100dvh - 150px);
        margin: 0px;
    }

    body.body_game .gamepanel.studentpanel .main {
        width: auto;
        float: initial;
        display: inline-block;
    }

    body.body_game .gamepanel.studentpanel .etc {
        width: auto;
        float: initial;
        display: inline-block;
    }

    body.body_game .gamepanel.studentpanel .etc .row {
        display: inline-block;
    }

    body.body_game .gamepanel.studentpanel .etc .row > div {
        width: auto;
        float: initial;
        display: inline-block;
    }

    body .gugudanpanel .contentpanel {
        height: calc(100dvh - 60px);
    }

    body .gugudanpanel .dans {
        min-width: 70%;
    }

    body .gugudanpanel .dans .row .col-xs-6 {
        width: 25%;
    }

    body .gugudanpanel .dans .row .box {
        margin-bottom: 5px;
    }

    body .gugudanpanel .dans .row .box .title {
        font-size: 3dvw;
    }

    body .mainpanel.gugudansteppanel .contentpanel {
        height: calc(100dvh - 60px);
        background-position: center bottom 20px;
    }

    body .mainpanel.gugudansteppanel .activities {
        bottom: 20px;
    }

    body .mainpanel.gugudansteppanel .activities .box {
        width: 200px;
        height: 270px;
    }

    body .mainpanel.gugudansteppanel .activities .box:first-child {
        width: 350px;
    }

    body .gameview .contentpanel.hpanel {
        white-space: nowrap;
        overflow-y: hidden;
        overflow-x: auto;
        height: calc(100dvh - 60px);
    }

    body .gameview .contentpanel.hpanel .row {
        min-width: 100%;
        position: absolute;
        left: 0px;
        top: 48%;
        transform: translateY(-50%);
        margin: 0px;
    }

    body .gameview .contentpanel.hpanel .row > div {
        display: inline-block;
        float: initial;
    }

    body .gameview .contentpanel.hpanel .row > div .box {
        margin: 0px;
    }

    body .gameview .contentpanel.hpanel .row > div:last-child {
        margin-right: 20px;
    }

    body .mainpanel.kidsgamepanel .contentpanel .tabs {
        top: 10px;
        left: 50%;
        width: auto;
        z-index: 101;
        transform: translateX(-50%);
        overflow: hidden;
    }

    body .mainpanel.kidsgamepanel .contentpanel .tabs > li > a {
        font-size: 17px;
        width: 80px;
        line-height: 50px;
    }

    .mainpanel.studypanel .contentpanel {
        height: calc(100dvh - 60px);
        padding: 0 10px 10px;
    }

    .mainpanel.studypanel .infopanel {
        float: left;
        margin: 0 5px 0 0;
        width: 30%;
        height: 100%;
    }

    .mainpanel.studypanel .contentpanel > .screen {
        height: 100%;
    }

    .mainpanel.studypanel .infopanel .subject {
        float: initial;
        width: 100%;
        height: 50%;
    }

    .mainpanel.studypanel .infopanel .steps {
        float: initial;
        width: 100%;
        height: 50%;
        white-space: nowrap;
    }

    .mainpanel.studypanel .infopanel .steps .step {
        display: block;
        width: 100%;
        max-width: initial;
        height: auto;
    }

    .mainpanel.studypanel .infopanel .steps .step + .step {
        margin: 15px 0 0 0;
    }

    .mainpanel.studypanel .infopanel .steps .step + .step::before {
        font-size: 17px;
        top: -12px;
        left: 50%;
        transform: rotate(90deg) translateX(-50%);
    }

    .mainpanel.studypanel .infopanel .steps .step h5 {
        position: initial;
        border-radius: 5px;
    }

    body .qcardpanel .qcards .qcard {
        height: calc(100vh - 130px);
    }

    body .studypanel .qcardpanel .qcards .qcard {
        height: calc(100vh - 70px);
    }

    body .studypanel .qcardpanel .qcard > .wrap {
        padding: 0px;
    }

    .view > .msgbox {
        font-size: 20px;
    }

    .view > .infobox {
        max-width: 70%;
    }

    .view > .infobox::before {
        padding-bottom: 45%;
    }

    .view > .infobox .title {
        font-size: 27px;
        padding: 15px 20px;
    }

    .view > .infobox .content {
        font-size: 19px;
        line-height: 29px;
        padding: 40px 20px 40px;
        min-height: 250px;
    }

    .view > .infobox .content::before {
        display: none;
    }

    .view > .infobox .btns > .btn {
        font-size: 27px;
        padding: 15px 25px;
    }
} 

@media screen and (max-width: 980px) {
    .header-center {
    }
    .practicepanel .header-center {
        display: block;
    }
    .signinpanel form {
        background: rgba(255, 255, 255, .8);
        padding: 50px 30px;
    }
    body .container {
        max-width: 970px;
        width: auto;
    }
    body .messagepanel .container .sidebar {
        display: none;
    }
    .panel-paper .resultpanel .wrapcontent {
        margin: 0px -10px;
    }
    body .lecHeader h2.title a.btnJoin {
        position: initial;
        border-radius: 15px;
        width: auto;
        height: auto;
        padding: 7px 15px 5px;
    }
    body .lecHeader h2.title a.btnJoin>i {
        margin: 0 5px 0 0;
        font-size: initial;
    }
    body .lecHeader h2.title a.btnJoin>span {
        display: initial;
        content: '온라인 수업중';
    }

    .mainpanel.studypanel .contentpanel {
        padding: 0 10px 10px;
    }

}

@media screen and (max-width: 800px) {
    .signinpanel,
    .signuppanel {
        margin: 0 auto;
        width: 480px;
        padding: 20px;
    }
    body .panel-report table span.toflow {
        white-space: initial;
    }
    .storepanel .content .wrapcontent .smry {
        display: block !important;
    }
    .storepanel .content .intro .smry {
        display: none;
    }
    body .lecturepanel .nav-tabs>li>a {
        padding: 10px 30px;
    }
    body .wrapsch>select {
        margin-bottom: 5px;
    }
    body .wrapsch>.input-group {
        display: table;
        width: 100%;
        margin-bottom: 5px;
    }
    body .wrapsch>input {
        width: 100% !important;
        margin-bottom: 5px;
    }
    body .wrapsch>.btn {
        width: 100% !important;
        margin-bottom: 10px;
    }

    body.body_game .gamepanel.studentpanel .box h1 {
        font-size: 17px;
        padding: 10px 20px;
        text-align: center;
        min-width: 125px;
    }
}

@media screen and (max-width: 768px) and (orientation: portrait) {
    .body_lecture .roadmap .lessons .lesson .no {
        border: none;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #000;
        background-color: transparent;
        width: auto;
        line-height: initial;
    }

    .body_lecture .roadmap .lessons .lesson .no > span {
        display: none;
    }

    .body_lecture .roadmap .lessons .lesson .point {
        font-size: 15px;
    }

    body.body_mypage .mainpanel.studentpanel .courses .course {
        background-position: bottom -10px center !important;
        background-size: 70% auto !important;
    }

    body .studentpanel.logpanel .smry {
        margin-bottom: 0px;
    }

    body .studentpanel.logpanel .smry .dashboard,
    body .studentpanel.logpanel .smry .usagebx {
        display: none;
    }

    body .studentpanel.logpanel .history .btn-datepicker {
        font-size: 17px;
        padding: 10px;
        background-color: #EFEFEF;
        margin-bottom: 10px;
    }

    body .studentpanel.logpanel .history .days {
    }

    body .gugudanpanel .dans {
        width: 80%;
        top: 53%;
    }

    body .gugudanpanel .contentpanel {
        padding: 0px 20px;
        height: calc(100dvh - 60px);
    }

    body .gugudanpanel .dans::before {
        width: 90%;
        height: 12%;
        top: -13%;
    }

    body .gugudanpanel .dans .row > div {
        width: 50%;
    }

    body .gugudanpanel .dans .row .box .title {
        font-size: 3dvh;
    }

    body .gugudanpanel .dans .row .box::after {
    }


    body .contentpanel.center {
        padding: 0 20px;
    }

    body .contentpanel.center .row > div {
        width: 100%;
    }

    body .contentpanel.center .row .box {
        padding-bottom: initial;
        height: calc((100dvh - 190px) / 4);
    }

    body.body_lecture .mainpanel.studentpanel .contentpanel .notepanel .page.left::after,
    body.body_lecture .mainpanel.studentpanel .contentpanel .notepanel .page.left::before {
        width: 20px;
        right: 20%;
    }

    body .kids-panel .widget.dabisukids .nav-tabs {
        margin: -2px 30px -3px 30px;
        padding: 5px 5px 0 0;
    }

    .view > .msgbox {
        width: calc(100dvw - 20px); 
        left: 10px;
        padding: 40px 10px 10px 10px;
        border-radius: 10px;
        font-size: 17px;
        line-height: 27px;
    }

    .view > .msgbox::before {
        width: 100px;
        height: 100px;
        top: -70px;
        bottom: initial;
    }

    .body_lecture .mainpanel.studentpanel .page.left .wrap.double .title + .box {
        height: 50%;
    }

    .body_lecture .mainpanel.studentpanel .page.left .wrap.double .box + .box {
        padding: 5px 0 0;
    }

    .body_lecture .mainpanel.studentpanel .page .item::before {
        font-size: 40px;
    }

    .view > .infobox .title {
        font-size: 27px;
        padding: 15px 20px;
    }

    .view > .infobox .content {
        font-size: 19px;
        line-height: 29px;
        padding: 70px 20px 70px;
    }

    .view > .infobox .btns > .btn {
        font-size: 27px;
        padding: 15px 25px;
    }

    .view > .infobox .btns > .btn-repeat > span,
    .view > .infobox .btns > .btn-next > span {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .mdhide {
        display: none;
    }
    .mshow {
        display: block !important;
    }
    .mhide {
        display: none !important;
    }
    .wraplst .row>.col-xs-2:not(.lock) {
        width: 100%;
    }
    .signin-info .logopanel>h1 {
        margin: 0px;
    }
    body .container {
        max-width: 750px;
        width: auto;
    }
    body .container .sidebar {
        display: none;
    }
    .signin-info .desc {
        display: none;
    }
    .headerbar .mobileonly {
        display: inline-block;
    }
    .infoprofile>ul>li {
        float: left;
        width: 50%;
    }
    .infoprofile>ul>li.extraprofile {
        padding-left: 10px;
    }
    .infoprofile>ul>li.extraprofile .support-title,
    .infoprofile>ul>li.extraprofile .extlnk,
    .infoprofile>ul>li.myurl {
        display: none;
    }
    .infoprofile .box {
        height: 100px;
    }
    .infoprofile .box .pt10 {
        padding-top: 0px;
    }
    .infoprofile .box .row>div>i {
        font-size: 2em;
    }
    .userview .content-left,
    .userpanel.contentpanel .content-left {
        display: none;
    }
    .contentpanel .content-right .nav-tabs {
        text-align: center;
        padding-left: 120px;
    }
    .contentpanel .content-right .nav-tabs>li {
        display: inline-block;
        float: initial;
    }
    body .nav-tabs>li>a {
        padding: 10px 12px;
    }
    .contentpanel .bgHeader {
        height: 150px;
    }
    .contentpanel .contentheader {
        height: 140px;
    }
    .contentpanel .contentheader .img-profile {
        max-width: 100px;
        bottom: -30px;
    }
    .userpanel .contentheader .title {
        left: 130px;
        bottom: 5px;
    }
    .userpanel .contentheader .title .profile-name {
        font-size: 23px;
        line-height: 28px;
    }
    .userpanel .contentheader .title .alias {
        font-size: 14px;
    }
    .userpanel .contentheader .summary h2 {
        font-size: 23px;
        line-height: 23px;
    }

    .body_lecture .mainpanel.studentpanel {
        padding-top: 60px;
    }

    body.body_lecture .mainpanel.studentpanel .contentpanel {
        height: calc(100dvh - 170px);
        padding: 0px 10px;
    }

    body.body_lecture .mainpanel.studentpanel .contentpanel .notepanel > div {
        width: 100%;
        height: 50%;
        padding: 10px;
    }

    .body_lecture .mainpanel.studentpanel .contentpanel .notepanel .page {
    }

    .body_lecture .mainpanel.studentpanel .contentpanel .notepanel .page.left::before {
        bottom: -35px;
        right: initial;
        top: initial;
        left: 20%;
        width: 20px;
        height: 50px;
    }
    .body_lecture .mainpanel.studentpanel .contentpanel .notepanel .page.left::after {
        bottom: -35px;
        left: initial;
        top: initial;
        right: 20%;
        width: 20px;
        height: 50px;
    }

    .body_lecture .view > .lessons {
        padding: 10px 30px;
    }

    .body_lecture .view > .lessons .lesson {
        width: 80px;
        height: 80px;
        margin-right: 10px;
    }

    .body_lecture .view > .lessons .lesson:last-child {
    }

    .body_lecture .mainpanel.studentpanel .contentpanel .notepanel {
        max-width: 600px;
    }

    .body_lecture .mainpanel.studentpanel .page.left {
        padding-top: 60px;
    }

    .body_lecture .mainpanel.studentpanel .page .title {
        padding: 0px 25px;
        font-size: 22px;
        line-height: 60px;
    }

    .body_lecture .mainpanel.studentpanel .page .item {
    }

    .body_lecture .mainpanel.studentpanel .page .videobx {
    }

    .body_lecture .mainpanel.studentpanel .page .videobx::after {
        padding-bottom: 70%;
    }

    .body_lecture .mainpanel.studentpanel .contentpanel .notepanel .page.left .wrap {
        padding: 0 0 30px;
    }

    .body_lecture .mainpanel.studentpanel .contentpanel .notepanel .page .wrap {
        padding: 30px 0;
    }

    .body_lecture .mainpanel.studentpanel .page .item.box {
        height: 50%; 
    }

    .body_lecture .mainpanel.studentpanel .contentpanel .notepanel .page.left::before {
        right: -60px;
    }

    body.body_lecture .mainpanel.studentpanel .page .wrap .box {
        padding: 5px 0px;
    }

    body.body_lecture .mainpanel.studentpanel .page.left .wrap .box {
        padding: 0px 0px 5px;
    }

    .body_lecture .mainpanel.studentpanel .page .wrap.double .box + .box {
        padding: 5px 0px 0px;
    }

    .body_lecture .mainpanel.studentpanel .contentpanel .notepanel .page .wrap.quad {
        padding: 5px 0;
    }

    body.body_lecture .mainpanel.studentpanel .page .wrap.quad .box {
        padding: 20px 5px 5px 0;
    }

    body.body_lecture .mainpanel.studentpanel .page .wrap.quad .box:nth-child(3) {
        padding: 5px 5px 20px 0;
    }
}

@media screen and (max-width: 767px) {
    body .panel-report .wrapcontent,
    body .panel-report .wrapcontent.v2 {
        width: 100%;
        padding: 0px;
    }
    body.body_login {
        background: none;
    }
    body.body_login .header {
        background: none;
        padding: 0 5px;
        border-bottom: 1px solid #eee;
    }
    body.body_login .header .page-title {
        color: #333;
    }
    body.body_login .header .logo {
        background: url(/common/images/logo_naenote.svg) no-repeat right center;
        left: auto;
        right: 0px;
        transform: translateX(0%);
        display: none;
    }

    body.body_game .gamepanel.studentpanel .main .box {
        height: calc((100dvh - 190px) / 3);
    }

    body.body_game .gamepanel.studentpanel .etc {
        margin-top: 0px;
    }

    body.body_game .gamepanel.studentpanel .etc .box {
        height: calc((100dvh - 190px) / 3);
    }
    .signinpanel form {
        border: none;
        margin: 0px;
        padding: 20px;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    .wrapnote .searchbx {
        text-align: left;
    }
    .panel-report table tbody tr td {
        line-height: 22px;
    }
    .col-sm-hide {
        display: none;
    }
    .xmt10 {
        margin-top: 10px;
    }
    body .headermenu li.search.open .search-container {
        width: 200px;
    }
    .mod_home #home_friends .filter .btn span,
    .mod_home #home_friends .mnu .btn span {
        display: none;
    }
    .modal .form-horizontal .radio,
    .modal .form-horizontal .checkbox,
    .modal .form-horizontal .radio-inline,
    .modal .form-horizontal .checkbox-inline {
        padding-top: 0px;
    }
    .panel-report .userinfobx>.score {
        display: none;
    }
    .sidepanel .tab-content .btn-add {
        display: inline-block;
    }
    .panel-paper .pages .smrybrd {
        display: none;
    }
    .modal .modal-header {
        padding: 10px;
    }
    .modal .form-search .form-group {
        margin-bottom: 0px;
    }
    .modal .form-search .form-group .col-xs-9 {
        margin-bottom: 10px;
    }
    .modal .form-search .control-label {
        color: #8f939e;
        font-size: 12px;
        word-break: break-all;
        overflow: hidden;
        white-space: nowrap;
    }
    .modal .form-search .input-sm {
        line-height: 19px;
    }
    .modal form .form-group {
        margin-left: 0px;
        margin-right: 0px;
        color: #555;
        font-size: 12px;
    }
    .modal form .control-label {
        /*color: #ccc; */
    }
    .modal form .form-control {
        /*font-size: 12px;*/
    }
    .modal form .form-inline .input-group {
        display: inline-table;
        vertical-align: middle;
    }
    .modal form .checkbox-inline,
    .modal form .radio-inline {
        line-height: 25px;
        /*color: #fff;*/
    }
    .storepanel .tab-content .voucher-list .col-xs-6 {
        padding-left: 5px;
        padding-right: 5px;
    }
    .storepanel .tab-content .voucher-list .col-xs-6 .voucher {
        margin-bottom: 10px;
    }
    .storepanel .tab-content .voucher-list .col-xs-6 .voucher>h2 {
        font-size: 15px;
    }
    .storepanel .tab-content .voucher-list .col-xs-6 .voucher>.info {
        height: 100px;
    }
    .storepanel .tab-content #institution .voucher-list .col-xs-6 .voucher>.info {
        height: 130px;
    }
    .storepanel .tab-content .voucher-list .col-xs-6 .voucher .price {
        font-size: 20px;
        line-height: 20px;
    }
    .storepanel .tab-content .voucher-list .col-xs-6 .voucher .desc {
        font-size: 13px;
    }
    .chart-page .widget .smry {
        margin-left: 0px;
        margin-right: 0px;
    }
    .chart-page .widget .smry .col-xs-6 {
        padding-left: 5px;
        padding-right: 5px;
    }
    .lesson-panel .panelL,
    .lesson-panel .lpanel {
        display: none;
    }
    body .lecContent .panelR {
        padding-left: 0px;
    }
    .lesson-panel .cpanel {
        margin-left: 0px !important;
    }
    .panel-paper .gtable .row>div>label,
    .panel-paper .gtable .row>div>span {
        width: 100% !important;
    }
    .searchform {
        position: relative;
    }
    .mod_paper .row .historybx {
        display: none;
    }
    .panel-paper .resultpanel .infobx .btn-test {
        background-color: #eee;
        border-bottom: 1px solid #ddd;
    }
    .editcontent .nav-tabs {
        display: block !important;
    }
    .editcontent .questions .items {
        margin-left: -10px;
        margin-right: -10px;
    }
    .editcontent.tabon .frmResrc .questions {
        display: block;
    }
    .editcontent.tabon .frmResrc .property,
    .editcontent .frmResrc .questions,
    .editcontent h4.subject {
        display: none;
    }
    .leftpanel .searchform,
    .leftpanel .userlogged {
        display: block;
    }
    .breadcrumb-wrapper {
        display: none;
    }
    .mod_library .path {
        display: none;
    }
    .headermenu .dropdown-menu:after {
        display: none;
    }
    .sidepanel .nav-tabs.nav-justified>li>a,
    .sidepanel .nav-justified>li>a {
        margin-bottom: 0;
    }
    .panel-email .col-sm-3 {
        display: none;
    }
    .mod_help .contentpanel>.header>.searchbox {
        width: 80% !important;
    }
    .storepanel .intro .cover {
        left: 10px !important;
        bottom: -40px !important;
        width: 120px !important;
    }
    .storepanel .intro .prop {
        left: 140px !important;
    }
    .storepanel .content .ctrls {
        padding: 10px 0px 10px 140px !important;
    }
    .lectures .lecture.box .bgLec {
        float: left;
        width: 100px;
        margin-right: 5px;
        margin-bottom: 0px;
    }
    .lectures .lecture.box .bgLec .pic,
    .lectures .lecture.box .bgLec .img-circle {
        width: 40px;
        height: 40px;
        bottom: 5px;
        left: 5px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        overflow: hidden;
        font-size: 9px;
    }
    body .lectures .lecture.box .smry {
        position: static;
    }
    .lectures .lecture.box .rate,
    .lectures .lecture.box .bgLec .ucnt {
        display: none;
    }
    body .lectures .lecture.box .cate {
        text-align: inherit;
        position: static;
    }
    body .lectures .lecture.box .bgLec {
        height: 70px;
    }
    .mod_setting.menuon .contentpanel .content,
    .mod_setting .contentpanel .menu {
        display: none;
    }
    .mod_setting.menuon .contentpanel .menu {
        display: block;
    }
    body .mod_help .contentpanel .body .container>h1 {
        font-size: 20px;
        margin-bottom: 10px;
    }
    body .mod_help .contentpanel .body .container>ul {
        -webkit-column-count: 1;
        column-count: 1;
    }
    body .mod_help .contentpanel .body .container>ul>li>div {
        border: none;
        border-bottom: 1px solid #d6dde1;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        border-radius: 0px;
        padding: 5px;
        height: auto;
        text-align: left;
        cursor: pointer;
        line-height: 40px;
    }
    body .mod_help .contentpanel .body .container>ul>li>div:hover {
        background-color: #F5F5F5;
    }
    body .mod_help .contentpanel .body .container>ul>li>div>i {
        display: inline-block;
        font-size: 15px;
        width: 30px;
        margin: 0px;
        height: auto;
        line-height: 15px;
    }
    body .mod_help .contentpanel .body .container>ul>li>div>h5 {
        display: inline-block;
        font-size: 15px;
        padding: 0px;
    }
    body .mod_help .contentpanel .body .container>ul>li>div>p {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    #popup-product .modal-dialog {
        width: 800px;
    }
}

@media screen and (min-width: 640px) {
    body>.postbx {
        min-width: 500px;
    }
    body>.postbx textarea {
        height: 200px;
    }
}

@media screen and (max-width: 640px) {
    .body_mypage .view[name=mypage_default] .mainpanel.studentpanel .headerbar::before {
        display: none;
    }

    body .view .mainpanel.studentpanel {
        padding-top: 60px;
    }

    body .view .mainpanel.kidsgamepanel {
        padding-top: 110px;
    }

    body .view .mainpanel.studentpanel .mnutoggle {
        font-size: 17px;
        padding: 5px 10px;
    }

    body .view .mainpanel.studentpanel .headerbar {
        height: 60px;
    }

    body .view .mainpanel.studentpanel .headerbar > div {
        padding: 5px 5px 5px 45px;
    }

    body .view .mainpanel.studentpanel .headerbar .page-title {
        font-size: 20px;
    }

    .mainpanel.studentpanel .headerbar .btn {
        font-size: 17px;
        min-width: 40px;
    }

    .mainpanel .headerbar .btn-profile {
        width: 40px;
        height: 40px;
    }

    .mainpanel .headerbar .btn img {
        height: 100%;
    }

    .body_mypage .view .mainpanel.studentpanel .courses .victory,
    .body_mypage .view .mainpanel.studentpanel .courses .basic,
    .body_mypage .view .mainpanel.studentpanel .courses .inter {
        width: 100%;
    }

    body.body_mypage .mainpanel.studentpanel .courses .course {
        height: calc((100dvh - 220px)/3);
        background-size: 80% auto;
    }

    body.body_mypage .mainpanel.studentpanel .courses .course .title {
        font-size: 27px;
        width: 50%;
    }

    body.body_mypage .mainpanel.studentpanel .contentpanel {
        padding: 20px;
        margin: 0px;
    }

    body.body_course .mainpanel.studentpanel .contentpanel {
        padding: 80px 10px 50px;
        height: calc(100dvh - 60px);
    }

    body.body_course .mainpanel.studentpanel .contentpanel .mtitle {
        top: 65px;
        font-size: 27px;
        width: 50%;
        padding: 7px;
        max-width: 200px;
        text-align: center;
    }

    body.body_course .mainpanel.studentpanel .contentpanel .mtitle::after {
        display: none;
    }

    body.body_course .mainpanel.studentpanel .contentpanel .mtitle::before {
        left: 50%;
        transform: translateX(-50%);
    }

    body.body_course .mainpanel.studentpanel .lectures {
        white-space: initial;
        height: initial;
        text-align: center;
    }

    body.body_course .mainpanel.studentpanel .lectures .lecture {
        margin-right: 0px;
        margin-bottom: 10px;
        width: 60%;
        display: inline-block;
        position: relative;
        min-width: initial;
        aspect-ratio: .8;
    }

    body.body_course .mainpanel.studentpanel .lectures .lecture .title {
    }

    body .view .mainpanel.studentpanel .pagefooter .btn {
        margin: 0px 10px;
    }

    body .view .mainpanel.studentpanel .pagefooter .btn i {
        font-size: 27px;
    }

    body .view .mainpanel.studentpanel .pagefooter .btn span {
        font-size: 15px;
        margin-top: 5px;
    }

    body .lecturepanel .nav-tabs {
        padding-left: 0px;
    }
    .widget[type="kids"] table thead th.w300 {
        width: 100px !important;
    }
    body .widget[type="kids"] table .items:not(.resrcbx) .item {
        padding: 5px;
    }
    .storepanel .buypanel#admin_order_list .wraplst {
        margin-top: 40px;
    }
    .wraplst .row>.col-xs-2:not(.lock),
    .wraplst .row>.col-xs-4:not(.lock),
    .wraplst .row>.col-xs-3:not(.lock),
    .wraplst .row>.col-xs-6:not(.lock) {
        width: 100%;
    }
    body .wraplst .body .row:hover div.option {
        display: inline-block;
    }
    body .storepanel .prodinfo>.info .title {
        margin: 7px 0px;
        font-size: 15px;
    }
    body .frmMove .buddies {
        height: 300px;
    }
    body .frmMove .group {
        width: 100%;
        display: inherit;
        height: auto;
    }
    body .frmMove .src {
        width: 100%;
        display: inherit;
        height: auto;
        margin-bottom: 10px;
    }
    body .frmMove .ctrlbar {
        width: 100%;
        margin: 10px 0px 0px;
        padding: 5px 0px;
        position: inherit;
    }
    body .frmMove .ctrlbar>a {
        display: inline-block;
        margin: 3px 5px;
    }
    body .frmMove .ctrlbar a.btn-left i::before {
        content: '\f077';
    }
    body .frmMove .ctrlbar a.btn-right i::before {
        content: '\f078';
    }
    #popup-tpl .list-filter {
        font-size: 12px;
        margin: 0px 0px 5px !important;
        text-align: center;
        white-space: nowrap;
    }
    #popup-tpl .list-filter>li {
        margin: 0px;
    }
    #popup-tpl #tpl-view {
        padding: 5px 0px !important;
    }
    #popup-tpl #tpl-view .carousel-control {
        display: none;
    }
    #popup-assign .nav-tabs {
        float: none !important;
    }
    #popup-assign .nav-tabs>li {
        float: left !important;
    }
    #popup-assign .modal-body {
        min-height: auto;
    }
    .userpanel .contentheader .summary {
        display: none;
    }
    .userpanel .contentheader .img-profile {
        max-width: 80px;
        left: 5px;
        bottom: 10px;
        padding: 3px;
    }
    .userpanel .contentheader .title {
        left: 90px;
        bottom: 20px;
    }
    .userpanel .contentheader .title .alias {
        font-size: 14px;
    }
    .userpanel .contentheader .title .profile-name {
        font-size: 19px;
        line-height: 25px;
    }
    .userpanel .contentpanel .content-right .nav-tabs {
        padding-left: 0px;
        white-space: nowrap;
    }
    .contentpanel .content-right .nav-tabs {
        padding-left: 0px;
    }
    body .nav-tabs>li>a {
        text-align: center;
        padding: 10px 5px;
    }
    .panelc2>.preview {
        display: none;
    }
    .modal-dialog .modal-body {
        overflow-y: auto;
        overflow-x: hidden;
        min-height: initial !important;
    }
    .modal-dialog .modal-footer {
        padding: 5px 10px;
    }
    /*
    .circle-btn {
      z-index: 10;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      background-color: #F0AD4E !important;
      border-color: #EEA236 !important;
      border-radius: 50%;
      display: inline-block;
      line-height: 40px !important;
      width: 40px !important;
      height: 40px !important;
      color: #fff !important;
      font-weight: normal;
      font-size: 18px !important;
      text-align: center;
      cursor: pointer !important;
      padding: 0px !important;
      margin: 0px !important;
      -moz-box-shadow: 3px 0 5px rgba(12,12,12,0.5) !important;
      -webkit-box-shadow: 3px 0 5px rgba(12,12,12,0.5) !important;
      box-shadow: 2px 2px 5px rgba(12,12,12,0.5) !important;
      position: fixed !important;
      bottom: 80px;
      right: 15px;
    }
    
    .circle-btn > div {
      line-height: 13px;
    }

    .circle-btn .label {
      display: none !important;
    }
    */
    .headerbar .extmenu {
        display: none;
    }
    .headerbar .optmenu {
        display: inline-block;
    }
    .mod_home .extraprofile .md-title {
        display: none;
    }
    .mod_home .extraprofile .box {
        margin-bottom: 10px !important;
    }
    .mod_home .infoprofile .myurl {
        padding-left: 10px;
    }
    .bgLecHeader {
        height: 100px !important;
    }
    .lecPanel>.lecHeader {
        height: 90px;
    }
    .lecPanel>.lecHeader>.logo {
        display: none;
    }
    .lecPanel>.lecHeader>h2.title {
        padding-left: 5px;
        font-size: 25px;
    }
    .lecPanel>.lecHeader>.setting {
        right: 0px;
        bottom: 15px;
    }
    .lecPanel>.lecHeader>.setting>i {
        margin: 0px !important;
    }
    .lecPanel>.lecHeader>.setting>span {
        display: none;
    }
    .lecPanel>.mnuLec {
        margin: 0px auto 10px;
    }
    .lecPanel>.mnuLec>li.mnu>a {
        padding: 10px 20px;
    }
    .lecPanel .lecContent>.panelL {
        display: none;
    }
    .lecPanel .lecContent>.panelR {
        padding-left: 0px;
    }
    .notfoundpanel {
        width: auto;
        padding: 0 20px;
    }
    .notfoundpanel h1 {
        font-size: 72px;
        line-height: 72px;
    }
    .notfoundpanel h3 {
        font-size: 14px;
        line-height: normal;
    }
    .notfound h4 {
        font-size: 12px;
        line-height: 18px;
    }
    .notfoundpanel form {
        width: auto;
    }
    .notfoundpanel .form-control {
        float: none;
        width: 100%;
    }
    .notfoundpanel .btn {
        margin-top: 10px;
        width: 100%;
    }
    .signinpanel,
    .signuppanel {
        margin: 0 auto;
        width: 480px;
        padding: 20px;
    }
    .signup-footer {
        margin-bottom: 10px;
    }
    .signuppanel .form-control {
        margin-bottom: 10px;
    }
    .signup-footer .pull-left,
    .signup-footer .pull-right {
        float: none !important;
        text-align: center;
    }
    .widget-quick-status-post .nav-tabs.nav-justified>li {
        display: table-cell;
        width: 1%;
        margin-bottom: -5px;
    }
    .widget-quick-status-post .nav-tabs.nav-justified>li a {
        margin: 0;
    }
    .nav-tabs.nav-justified.nav-profile li {
        float: none;
        margin-bottom: 0;
        display: table-cell;
        width: 1%;
    }
    .nav-tabs.nav-justified.nav-profile li a {
        margin: 0;
        -moz-border-radius: 3px 3px 0 0;
        -webkit-border-radius: 3px 3px 0 0;
        border-radius: 3px 3px 0 0;
    }
    .dataTables_info {
        float: none !important;
        text-align: center;
        margin-bottom: 10px;
    }
    .dataTables_paginate {
        margin-bottom: 10px;
        text-align: center !important;
        float: none !important;
    }
    .paginate_disabled_previous,
    .paginate_enabled_previous,
    .paginate_disabled_next,
    .paginate_enabled_next {
        float: none !important;
    }
    .dataTables_filter,
    .dataTables_length {
        float: none !important;
        padding: 10px 0 0 10px;
        margin: auto !important;
        display: inline-block;
    }
    .table.dataTable th,
    .table.dataTable td {
        font-size: 13px;
        min-width: 150px;
    }
    .paging_full_numbers {
        min-width: 500px;
        margin: 0 0 10px 10px;
    }
    .paging_full_numbers:after {
        clear: both;
        display: block;
        content: '';
    }
    .notepanel .taskbar .smry span {
        display: none;
    }
    /* 일정관리 캘린더*/
    button.fc-dayGridMonth-button.fc-button.fc-button-primary,
    button.fc-timeGridWeek-button.fc-button.fc-button-primary,
    button.fc-timeGridDay-button.fc-button.fc-button-primary,
    button.fc-custom1-button.fc-button.fc-button-primary {
        display: none;
    }

    body .gameview .contentpanel.hpanel .box .title {
        font-size: 17px;
    }

    body .mainpanel.kidsgamepanel .contentpanel .tabs {
        top: 60px;
        white-space: nowrap;
        overflow-x: auto;
    }

    body .mainpanel.kidsgamepanel .contentpanel .tabs > li > a {
        font-size: 17px;
        width: 80px;
        line-height: 37px;
    }

    .overpanel .headerbar > div {
        padding: 5px 10px;
    }

    .overpanel .headerbar > .header-center {
        display: none;
    }

    .overpanel .headerbar .page-title {
        font-size: 22px;
    }

    body .overpanel .headerbar {
        height: 60px;
        min-height: 60px;
    }

    body .overpanel .headerbar .btn {
        font-size: 22px;
    }

    .overpanel .overbody.panel-report {
        padding: 60px 0 0;
    }

    .overpanel .overbody.panel-report .userinfobx {
        padding: 10px;
    }
}

@media screen and (max-width: 1024px) {
    ._dcodeview .header .quickmnu,
    ._dcodeview .header .logobx .btnEvent,
    ._dcodeview .header nav.screen {
        display: none;
    }
    
    ._dcodeview .header .logobx {
        width: 100%;
        padding: 5px 10px;
        line-height: 50px;
        text-align: initial;
        position: fixed;
        top: 0px;
        background-color: #fff;
        z-index: 2;
        box-shadow: 0 1px #eee;
    }
    
    ._dcodeview .header .logobx .btn-mnu {
        display: inline-block;
        font-size: 25px;
        color: #ffd44c;
    }
    
    ._dcodeview .header .logobx .mlogo {
        float: right;
    }
    
    ._dcodeview .header .logobx .mlogo img {
        height: 25px;
    }
    
    ._dcodeview .footer>nav>ul {
        display: inline-block;
    }
    
    ._dcodeview .footer>nav li {
        padding: 0 5px;
    }
    
    ._dcodeview .footer>section {
        padding: 10px;
        font-size: 12px;
        line-height: 20px;
    }
    
    ._dcodeview .footer>section .logo {
        position: initial;
        margin: 10px 0 20px;
        display: block;
        float: none;
    }
    
    ._dcodeview .footer>section p {
        margin: 0px;
    }
    
    ._dcodeview .contentpanel .banner>div>.rightbg {
        height: 60%;
    }
    
    ._dcodeview .characters ul.clear>li {
        width: 50%;
    }
    
    ._dcodeview .characters .box {
        padding: 10px;
        margin-top: 10px;
    }
    
    ._dcodeview .characters .box>div {
        height: 100px;
    }
    
    ._dcodeview .characters .box>h5 {
        padding: 10px 0;
    }
    
    ._dcodeview .wrappanel .top {
        margin-top: 60px;
        height: 100px;
    }
    
    ._dcodeview .wrappanel .top .desc {
        display: none;
    }
    
    ._dcodeview .wrappanel .top .btimg {}
    
    ._dcodeview .wrappanel>section.path {
        text-align: left;
    }
    
    ._dcodeview .wrappanel>section.body>.lpanel {
        display: none;
    }
    
    ._dcodeview .wrappanel>section.body>.rpanel {
        width: 100%;
        padding: 0px;
        background: none;
    }
    
    ._dcodeview .wrappanel>section.body>.rpanel .introduce .primaryR1 .R1L {
        width: auto;
        float: none;
        text-align: center;
    }
    
    ._dcodeview .wrappanel>section.body>.rpanel .introduce .primaryR1 .R1L img {
        width: 60%;
        margin: 10px 0 30px;
        display: inline-block;
    }
    
    ._dcodeview .wrappanel>section.body>.rpanel .introduce .primaryR1 .R1R {
        width: auto;
        float: none;
        padding: 0px;
    }
    
    ._dcodeview .startpanel .world>.map {
        width: 700px;
        height: 800px;
    }
    
    ._dcodeview .startpanel .world>.map>.victory {
        left: 30px;
        bottom: 290px;
    }
    
    ._dcodeview .startpanel .world>.map>.basic {}
    
    ._dcodeview .startpanel .world>.map>.inter {
        right: 40px;
        bottom: 330px;
    }
    
    body .kids-panel.lesson-dabisukids_home .stepbx ul>li {
        margin: 10px;
    }
    
    body .kids-panel.lesson-dabisukids_home .stepbx ul>li::before {
        width: 110px;
        height: 110px;
    }
    
    body .homeview .kids-panel.lesson-dabisukids_home .stepbx ul>li::after {
        right: -20px;
    }
    
    body .kids-panel.lesson-dabisukids_home .indexbx a {
        padding: 10px 20px;
    }
    
    .frmOrder.form-horizontal .form-group .control-label {
        text-align: left;
        margin-bottom: 5px;
    }
    
    .overpanel .overbody[type='file'] .content>.wrapfile:hover .btns {
        display: none;
    }
    
    .kids-panel .widget.homeschool>.widget-body .weeks {
        border: none;
    }
    
    .homeview>.banners .wrap {
        position: absolute;
    }
    
    .widget.lessonbx .widget-body .week .content .section {
        float: none;
        width: auto;
    }
    
    .kids-panel .widget.dabisukids>.widget-body .week .content .task.btn-new {
        float: none;
        width: auto;
        line-height: initial;
    }
    
    .overpanel .overbody>.viewport>.viewcontent .wrap_youtube {
        padding-bottom: 5px;
    }
    
    .overpanel .overbody>.viewport>.viewcontent .wrap_youtube .yvideo {
        width: 100%;
        padding-right: 0px;
    }
    
    .overpanel .overbody>.viewport>.viewcontent .wrap_youtube .yvideo .wrap_video {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
    }
    
    .overpanel .overbody>.viewport>.viewcontent .wrap_youtube .yvideo .wrap_video iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .overpanel .overbody>.viewport>.viewcontent .wrap_youtube .chat {
        position: initial;
        top: initial;
        right: initial;
        width: 100%;
        padding: 0px;
        height: 100%;
    }
    
    .overpanel .overbody>.viewport>.viewcontent .wrap_youtube .chat .wrap_chat {
        min-height: 350px;
    }
}

@media screen and (max-width: 1000px) {
    .scrollTop {
        right: 0px;
    }

    .numberpad .btn {
        font-size: 27px;
        min-width: 40px;
    }

    .kids-panel .widget.dabisukids .days4 .item {
        width: 22%;
        height: 110px;
        margin: 2px 2px 0 0;
    }
    .kids-panel .weeks .week .day>.daylabel {
        height: 110px !important;
        margin-right: 2px !important;
    }

    .mainpanel .contentpanel.qcardpanel {
        padding: 0 20px;
    }
    
    .storepanel .buypanel .wraplst {
        margin-top: 50px;
    }

    .homeview .kids-map h5 {
        border-top: 0px;
    }
    
    .loginview .guide {
        display: none;
    }

    #popup-player .modal-dialog {
        width: 90%;
    }
    
    .mypageview .cards.wrap {
        height: 80px;
    }
    
    .mypageview .cards.wrap .card {
        height: 80px;
    }
    
    .mypageview .cards.wrap .card .title {
        margin: 0px;
        padding-bottom: 5px;
    }
    
    .mypageview .infoprofile .box {
        height: 80px;
    }
    
    .mypageview .infoprofile .box-service {
        height: max-content;
    }
    
    .mypageview .infoprofile .btn-facebook {
        margin-right: 0px !important;
    }
    
    .mypageview .infoprofile .btn-facebook,
    .mypageview .infoprofile .btn-social {
        line-height: 30px;
        text-align: left;
        margin-bottom: 5px;
    }
    
    .infoprofile .mypoint i.fa-wallet,
    .infoprofile .myreport i.fa-tachometer-alt {
        display: none;
    }
    
    .mypageview .infoprofile .mypoint .btline {
        line-height: 60px;
    }
    
    .mypageview .infoprofile .myreport .score {
        border-bottom: 2px solid #333;
        text-align: right;
    }
    
    .mypageview .infoprofile .myreport b {
        line-height: 30px;
    }
    
    .mypageview .infoprofile .my-service-name {
        display: inline-block;
        font-size: 12px;
    }
    
    .infoprofile .my-service-name>.service-tag {
        display: inline-block;
        color: #ffffff;
        font-size: 11px;
        width: 18px;
        height: 18px;
        line-height: 18px;
        border-radius: 50%;
        text-align: center;
        vertical-align: center;
        background-color: lightgray;
    }
    
    .wrap_player>.screen {
        float: none;
        width: auto;
    }
    
    .wrap_player>.screen.youtube {
        width: 100%;
    }
    
    .wrap_player>.list {
        border: none;
        margin: 0px;
    }
    
    .homeview .hangulcontent>.R1 .body {
        background: rgba(255, 255, 255, .8);
        border-radius: 10px;
    }
    
    .practicepanel .headerbar {
        box-shadow: none;
    }

    .mainpanel.practicepanel .headerbar .header-right {}

    
    .qcardpanel .wrapqcard {
    }
    
    .qcardpanel .qcards {
        padding-top: 0px;
        height: 100%;
    }
    
    .qcardpanel .qcards .qcard {
        height: calc(100vh - 200px);
    }
    
    .qcardpanel .qcards .qcard .item .body {
        position: relative;
        z-index: 1;
    }
    
    .view .lecturepanel .widget.dabisukids .infobx .wrap {
        padding: 0px;
    }
    
    .widget.dabisukids .infobx .wrap .ebook {
        position: initial;
        float: left;
        width: 50%;
        padding: 5px;
    }
    
    .widget.dabisukids .infobx .wrap .ebook .cover .item.book {
        min-height: 180px;
    }
    
    .widget.dabisukids .infobx .wrap .guide {
        position: initial;
        float: left;
        width: 50%;
        padding: 5px;
        text-align: center;
    }
    
    .kids-panel .widget .widget-body .resrcbx .item {
        width: 100%;
    }
    
    .kids-panel .widget .widget-body .resrcbx.hsize.h4size .item {
        width: 45%;
    }

    .widget.dabisukids .infobx .data {
        padding: 10px 5px;
        float: left;
        width: 100%;
    }
    
    .kids-panel .widget.dabisukids .nav-tabs {
        margin: -2px 30px -2px 30px;
        padding-top: 5px;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
    }
    
    body .kids-panel .widget.dabisukids .nav-tabs>li>a {
        padding: 7px 15px;
    }
    
    .kids-panel .widget.dabisukids .nav-tabs>li>a:not(.btn-new)>i {
        display: none;
    }
    
    .kids-panel .widget.dabisukids>.widget-body .weeks>.btn-new {
        right: 0px;
    }
    
    .kids-panel .widget.dabisukids>.widget-header>h2.title {
        font-size: 17px;
        padding-left: 0px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .homeview #story-slide #dabisu-character-slider .swiper-wrapper .swiper-slide .swiper-information {
        top: 35px;
        left: 30px;
        right: 30px;
    }
    .homeview #story-slide #dabisu-character-slider .swiper-wrapper .swiper-slide .swiper-information .swiper-desc {
        font-size: 17px;
    }

    .homeview .article-effect .image-box-title {
        font-size: 25px;
    }

    .concept-box.concept-box-05 .box-body > p {
        margin-left: 0px;
    }

    .homeview .article-effect .clearbox {
        margin: 25px auto;
    }

    .homeview #story-slide #dabisu-character-slider .swiper-wrapper .swiper-slide .slide-image.slide-image-desktop {
        display: none;
    }

    .homeview #story-slide #dabisu-character-slider .swiper-wrapper .swiper-slide .slide-image.slide-image-mobile {
        display: block;
        width: 100%;
        margin: auto;
    }
}

@media screen and (max-width: 800px), (min-aspect-ratio: 16/9) {
    body .omr {
        position: relative;
        top: 0px;
        left: 0px;
        width: 100%;
        height: auto;
        min-height: calc(100vh - 70px);
        padding: 0px 0px 0px;
        border: none;
    }
    
    body .omr .head {
        position: initial;
    }
    
    body .omr .wrap-omr {
        overflow: initial;
        height: auto;
    }
    
    body .omr div.row {
        margin-left: 0px;
        margin-right: 0px;
    }
    
    body .omr .cmd {
        width: auto !important;
    }
    
    body .paperpanel:not(.epaperpanel) .omr .cmd {
        display: none;
    }
    
    body .omr div.head {}
    
    body .omr div.cmd {
        position: fixed;
        bottom: 15px;
        right: 15px;
    }
    
    body .omr div.cmd .btn-save {
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        display: inline-block;
        line-height: 60px;
        width: 60px;
        height: 60px;
        font-size: 25px;
        text-align: center;
        cursor: pointer;
        padding: 0px;
        -moz-box-shadow: 3px 0 5px rgba(12, 12, 12, 0.5);
        -webkit-box-shadow: 3px 0 5px rgba(12, 12, 12, 0.5);
        box-shadow: 2px 2px 5px rgba(12, 12, 12, 0.5);
    }
    
    body .omr div.cmd .btn-save>span {
        display: none;
    }
    
    body .omr span.sel {
        line-height: 35px;
        color: #999;
        width: 35px;
        height: 35px;
        font-size: 18px;
        font-weight: bold;
        margin-left: 3px;
        display: inline-block;
        vertical-align: middle;
    }
}

@media screen and (max-width: 768px) {
    .kids-panel .widget.dabisukids>.widget-body .week .content .resrcbx {
        margin-top: 0px;
    }
    
    .kids-panel .widget.dabisukids>.widget-body .week .btnPlayAll {}
    
    .kids-panel .widget.dabisukids>.widget-body .week .btnPlayAll>span {
        display: none;
    }
    
    .kids-panel .widget.dabisukids>.widget-body .content .btnPlayAll>span {
        display: inline-block;
    }
    
    .modal-dialog {
        width: 90%;
    }
    
    #popup-testinfo .btn-close {
        top: 5px;
        right: 5px;
    }

    .studentpanel.logpanel .smry .dashboard {
        margin-bottom: 10px;
    }

    .studentpanel.logpanel .smry .usagebx > h5 {
        text-align: center;
    }

    .studentpanel.logpanel > .wrappanel {
    }

    .numberpad {
        bottom: -500px;
    }

    .numberpad .btnMode {
        border-radius: 50%;
    }

    .numberpad > .wrap {
        white-space: initial;
    }

    .numberpad > .wrap > div {
        display: block;
    }

    .numberpad .mode {
        margin-bottom: 10px;
    }

    .numberpad .console .panel {
        width: 100%;
    }

    .numberpad .console {
        position: initial;
        transform: initial;
        box-shadow: initial;
        padding: 0px;
    }

    .numberpad .numbers {
        margin: 5px 0;
    }

    .numberpad .numbers .btn {
        width: 29%;
        margin: 5px;
    }

    .numberpad .cmd .btn {
        width: 100%;
    }
}

@media screen and (max-width: 700px) {
    body ._dcodeview .startpanel .world>.map {
        margin: 150px auto 100px;
    }
    
    body ._dcodeview .startpanel .world>.map {
        background: none;
        width: auto;
        height: auto;
        margin: 100px 10px;
    }
    
    body ._dcodeview .startpanel .world>.map>li {
        display: block;
        position: inherit !important;
        text-align: left;
    }
    
    body ._dcodeview .startpanel .world>.map>li>a {
        display: inline-block;
        width: 100%;
        margin: 0px !important;
    }
    
    body ._dcodeview .startpanel .world>.map>li>a>img.title {}
    
    body ._dcodeview .startpanel .world>.map>.basic {
        width: auto;
        right: inherit;
        left: inherit;
        bottom: inherit;
        transform: inherit;
    }
    
    body ._dcodeview .startpanel .world>.map>.victory {
        width: auto;
        right: inherit;
        left: inherit;
        bottom: inherit;
    }
    
    body ._dcodeview .startpanel .world>.map>.inter {
        width: auto;
        right: inherit;
        left: inherit;
        bottom: inherit;
    }
    
    #mypage_dashboard .smryboard .box {
        min-height: initial;
    }
    
    #mypage_dashboard .smryboard .box h1 {
        line-height: initial !important;
    }
}

@media screen and (max-width: 640px) {
    body:not(.body__homengo) .lectures.row>div {
        width: 100%;
    }
    .uproduct-outer {
        display: block;
    }
    .mainpanel2:not(.paperpanel)>a.mnutoggle {
        position: fixed;
        top: initial;
        bottom: 10px;
        left: 10px;
        background-color: #1582dc;
        border-radius: 50%;
        width: 50px;
        height: 50px;
    }
    
    .mainpanel.practicepanel>a.mnutoggle {
        display: none;
    }
    
    .mainpanel2:not(.paperpanel) .headerbar .header-left {
        padding-left: 5px;
    }

    .practicepanel .headerbar .header-left {
        padding-left: 10px !important;
    }

    .mainpanel.practicepanel .timer {
        line-height: 30px;
        vertical-align: middle;
        margin: 0 0 0 5px;
    }

    .mainpanel.practicepanel .timer span {
        padding: 0 10px;
        font-size: 13px;
    }

    .mainpanel.practicepanel .iboard {
        margin: 0px;
    }

    .mainpanel.practicepanel .iboard .progress {
        width: 50px;
    }

    .mainpanel.practicepanel .iboard .progress-bar span {
        font-size: 13px;
    }
    
    .mainpanel.practicepanel .contentpanel {
        padding: 0px;
    }

    .qcardpanel .qcards .qcard .prop .btns .btn {
        border-radius: 50%;
        font-size: 22px;
        width: 40px;
        height: 40px;
        text-align: center;
        padding: 0px;
    }
    .qcardpanel .qcards .qcard .prop .btns .btn span {
        display: none;
    }

    .qcardpanel .comment {
        padding: 0px 10px 10px;
    }

    .qcardpanel .comment .msg {
        font-size: 15px;
    }

    .qcardpanel .qcards .qcard {
        height: calc(100vh - 150px);
    }

    .studypanel .qcardpanel .qcards .qcard {
        height: calc(100vh - 280px);
    }

    .qcardpanel .qcard > .wrap {
        padding: 0px;
    }

    .mainpanel.practicepanel .wrapqcard {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    
    body .homeview .wrappanel section.frontR1 a img {
        height: auto;
    }
    
    body .homeview .wrappanel>section.body>.rpanel h1 {
        font-size: 20px;
        margin: 10px 0;
    }
    
    body .kids-panel .stepbx ul>li>.no {
        font-size: 15px;
        padding: 5px;
    }
    
    body .kids-panel.lesson-hangul_home .stepbx>h1::before,
    body .kids-panel.lesson-dabisukids_home .stepbx>h1::before {
        top: 0px;
    }
    
    body .kids-panel.lesson-dabisukids_home .stepbx ul>li::before {
        width: 80px;
        height: 80px;
    }
    
    body .kids-panel .stepbx>ul {
        white-space: nowrap;
        overflow-x: auto;
        padding: 10px 0px;
    }
    
    body .kids-panel .stepbx ul>li>h5 {
        font-size: 13px;
    }
    
    body .kids-panel .stepbx ul>li>.subject {
        font-size: 13px;
    }
    
    body .kids-panel.lesson-dabisukids_home .indexbx a {
        font-size: 13px;
        padding: 5px 10px;
    }
    
    body .kids-panel .commonbx .item {
        height: 80px;
    }
    
    body .kids-panel .commonbx .items h4 {
        font-size: 13px;
        line-height: 15px;
    }
    
    body .kids-panel .commonbx .items .subject {
        font-size: 11px;
    }
    
    body .kids-panel .widget.lessonbx>.widget-header h2.title {
        font-size: 17px;
    }
    
    body .kids-panel .widget.homeschool>.widget-header h2.title>.no {
        width: 60px;
        line-height: 60px;
    }
    
    body .kids-panel .widget.homeschool>.widget-header h2.title {
        font-size: 17px;
        line-height: 40px;
    }
    
    body .kids-panel .widget.homeschool>.widget-header .control {
        margin-top: 8px;
        right: 15px;
    }
    
    body .kids-panel .widget.homeschool>.widget-body .week .content .resrcbx {
        margin-top: 10px;
    }
    
    .pointsmry .price {
        position: initial;
        width: 100%;
        text-align: right;
    }
    
    .storepanel .prodinfo>.thumb {
        max-width: none;
        width: 60px !important;
    }
    
    .missionview .titlebar>.toolboxtitle {
        width: 169px;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.4);
        height: 30px;
        padding: 5px;
    }
    
    .missionview .titlebar>.workspacetitle {
        padding: 5px 5px 5px 175px;
    }
    
    ._dcodeview .wrappanel>section.body>.rpanel table .rdate {
        display: none;
    }
    
    ._dcodeview .wrappanel>section.body>.rpanel .wrapboard table .no>span {
        padding: 5px;
        border-radius: 5px;
        white-space: nowrap;
    }
    
    body .homeview .wrappanel section .wrapsection {
        width: 90%;
    }
    
    body .homeview .wrappanel>section>.wrapsection>ul {
        margin: 0px 10px !important;
        width: 90%;
    }
    
    body .homeview .wrappanel>section>.wrapsection>ul>li {
        width: auto !important;
        float: none !important;
        padding: 0px !important;
        display: block !important;
    }
    
    body .homeview .wrappanel section h3 {
        font-size: 25px;
        margin-bottom: 10px;
    }
    
    body .homeview .wrappanel section .wrapsection>p {
        font-size: 15px;
        margin-bottom: 15px;
    }
    
    body .homeview .footer>nav li {
        padding: 0 5px;
    }
    
    body .homeview .wrappanel>section.quickArea .wrapsection a {
        margin-right: 10px;
    }
    
    body .homeview .wrappanel section.frontR1 h3 {
        font-size: 17px !important;
    }
    
    body .homeview .wrappanel section.frontR1 .notice ul li a {
        font-size: 13px;
    }
    
    body .homeview .wrappanel section.frontR4 .info {
        margin: 10px auto;
        padding: 20px 40px;
        width: auto;
        border-radius: 10px;
    }
    
    body .homeview .wrappanel section.frontR4 .info h5 {
        font-size: 30px;
    }
    
    body .homeview .wrappanel section.frontR4 .info p {
        font-size: 15px;
    }
    
    body .homeview .wrappanel section.frontR4 .wrapsection {
        margin: 20px auto;
    }
    
    body .homeview .article-image-box {
        background: none !important;
        padding-left: 0px !important;
    }
    
    body .homeview .article-body.article-body-green {
        margin-top: 0px;
    }
    
    body .homeview .program-box {
        padding: 0 10px;
    }
    
    body .homeview .program-box .program-box-header {
        line-height: 40px;
        font-size: 20px;
    }
    
    body .homeview .program-box .program-box-body .figures>li {
        width: 50%;
    }
    
    body .homeview .program-box .program-box-body .figures {
        text-align: left;
    }
    
    body .homeview .program-box .program-box-footer {
        padding: 25px;
    }
    
    body .homeview .program-box .program-box-footer .label {
        position: initial !important;
        display: block !important;
        margin-bottom: 20px !important;
    }
    
    body .homeview .kids-panel .indexbx a {
        width: 15%;
        padding: 10px 0;
    }
    
    .wrapboard .tabs>li {
        padding: 10px 20px;
    }
    
    body .homeview #story-slide {
        margin: 20px 5px;
    }
    
    body .homeview #story-slide .swiper-button-prev {
        left: 0px;
    }
    
    .form-inline .form-control {
        display: inline-block;
    }
    
    body .homeview #story-slide .swiper-button-next {
        right: 0px;
    }
    
    body .homeview #story-slide-actions .swiper-pagination-char>li+li {
        margin-left: 5px;
    }
    
    body .homeview #story-slide-actions .swiper-pagination-char>li .char .img-wrapper {
        width: 85px;
        height: 85px;
    }
    
    body .homeview .kids-map {
        margin-top: 0px;
    }
    
    body .homeview .article-image-box .image-box-title {
        font-size: 25px;
        line-height: 35px;
    }
    
    body .homeview .program-concept .deco {
        display: none;
    }
    
    body .homeview .wrappanel>section.body>.rpanel p.pb50 {
        padding: 5px;
    }
    
    body .homeview .article-body.article-body-darkblue {
        padding-top: 20px;
    }
    
    body .homeview .concept-box {
        padding: 10px;
    }
    
    body .homeview .concept-box.concept-desc {}
    
    body .homeview .concept-box .box-header .box-header-title {
        font-size: 20px;
    }
    
    body .homeview .concept-box .box-body {
        padding: 10px;
    }
    
    body .homeview .concept-box .box-body>figure {
        position: initial;
        transform: initial;
    }
    
    body .homeview .concept-box .box-body>p {
        margin-left: 0px !important;
    }
    
    body .homeview .concept-box.concept-box-05 .box-body>p {
        margin-left: 0px !important;
    }
    
    body .homeview .books-list>li .info-body .thumb {
        float: none;
        width: auto;
    }
    
    body .homeview .books-list>li .info-body .info {
        margin-left: 0px;
    }
    
    body .homeview .books-list>li .info-body .info .book-actions>a {
        width: 150px;
    }
    
    body .homeview .books-list>li .info-body .info .book-actions>a img {
        width: 100%;
    }
    
    body .homeview .curriculum-content .article-body .wrap-article-body {
        padding: 10px;
    }
    
    body .homeview .curriculm-header {
        display: none;
    }
    
    body .homeview .curriculm>li figure {
        float: none;
        width: auto;
    }
    
    body .homeview .curriculm>li>ul {
        padding-left: 0px;
    }
    
    body .homeview .curriculm>li>ul dl dt {
        width: auto;
        display: block;
        border-left: none;
        border-right: none;
    }
    
    body .homeview .curriculm>li>ul dl dd {
        width: 100%;
    }
    
    body .homeview .effect-box .box-header {
        height: auto;
    }
    
    body .homeview .effect-box .box-body .box-body-title {
        font-size: 17px;
    }
    
    body .homeview .effect-box .box-header .box-header-title {
        height: auto;
        font-size: 17px;
        line-height: 50px;
        margin: 0px;
    }
    
    body .homeview .article-effect .clearbox .eff05 {
        width: 100%;
        height: auto;
    }
    
    body .homeview .article-effect .clearbox .eff05.eff05-arrow {
        width: 100%;
        margin: 15px 0px;
    }
    
    body .homeview .article-effect .clearbox .eff05.eff05-arrow img {
        transform: rotate(90deg);
    }
    
    body .homeview .article-effect .clearbox .eff03+.eff03 {
        margin-left: 0px;
        margin-top: 20px;
    }
    
    body .homeview .article-effect .clearbox .eff03 {
        width: 100%;
        padding: 30px;
        height: auto;
    }
    
    body .homeview .article-effect .clearbox .eff02.eff02-02:after {
        position: static;
        margin: 15px 0px;
        transform: rotate(90deg);
        width: 100%;
    }
    
    body .homeview .article-effect .clearbox .eff02.eff02-02:before {
        position: static;
        margin: 15px 0px;
        transform: rotate(90deg);
        width: 100%;
    }
    
    body .homeview .article-effect .clearbox .eff02 {
        width: 100% !important;
        float: none;
    }
    
    body .homeview .article-effect .clearbox .eff01 .header .header-label {
        width: 24px;
        height: 24px;
        margin-top: -12px;
        font-size: 12px;
        line-height: 24px;
    }
    
    body .homeview .article-effect .clearbox .eff01 .header .header-label:before {
        border-bottom-width: 4.4px;
        border-left-width: 12.5px;
        border-right-width: 12.5px;
        width: 14.24px;
    }
    
    body .homeview .article-effect .clearbox .eff01 .header .header-label:after {
        border-top-width: 4.4px;
        border-left-width: 12.5px;
        border-right-width: 12.5px;
        width: 14.24px;
    }
    
    body .homeview .article-effect .clearbox .eff01 .header .header-title {
        font-size: 16px;
        padding-left: 45px;
    }
    
    body .homeview .effect-box .box-body .box-body-desc {
        padding: 10px;
    }
    
    body .homeview .article-effect .clearbox .eff01 .body {
        height: auto;
        padding: 15px;
    }
    
    body .homeview .article-effect .eff03-list {
        margin-top: 10px;
    }
    
    body .homeview .article-effect .eff03-list li {
        font-size: 14px;
        padding-left: 36px;
    }
    
    body .homeview .article-effect .eff03-list li:before {
        width: 25px;
        height: 25px;
        line-height: 25px;
        font-size: 14px;
    }
    
    body .homeview .article-effect .circlebox {
        display: block;
    }
    
    body .homeview .article-effect .circlebox:after {
        clear: both;
        content: '';
        display: table;
    }
    
    body .homeview .article-effect .circlebox li {
        float: left;
        width: calc(33.3333% - 20px);
        font-size: 17px;
        position: relative;
        padding-top: 10%;
        padding-bottom: 10%;
        white-space: nowrap;
    }
    
    body .homeview .article-effect .circlebox li:after {
        content: "";
        display: block;
        padding-bottom: 100%;
    }
    
    body .homeview .article-effect .circlebox li:nth-child(3n+1) {
        margin-left: 0px;
        clear: both;
    }
    
    body .homeview .article-effect .eff04 {
        height: 200px;
    }
    
    body .homeview .article-effect .eff05.eff05-01 {
        margin-right: 20px;
    }
    
    body .homeview .article-effect .eff05.eff05-02 {
        margin-left: 20px;
    }
    
    body .homeview .article-effect .clearbox .eff01.eff01-half {
        width: 100%;
        float: none;
    }
    
    body .homeview .article-effect .clearbox .eff01.eff01-half+.eff01-half {
        margin-left: 0px;
    }
    
    .wrapsch>.btn-group.btn-orderstatus {
        margin-bottom: 5px;
        margin-right: 10px;
        float: left;
    }
    
    .wrapboard table .rdate,
    .wrapboard table .no {
        display: none;
    }
    
    .prodview .tabs li {
        width: auto;
        padding: 5px 15px;
    }
    
    body .homeview .hangulcontent>.bgbx .box>h4 {
        font-size: 17px;
    }
    
    body .homeview .hangulcontent>.R1 {
        background: none;
    }
    
    body .homeview .hangulcontent .body h4 {
        font-size: 25px;
    }
    
    body .homeview .hangulcontent>.R1 .body {
        float: none;
        width: auto;
    }
    
    .hangulcontent .box .body {
        padding: 10px;
    }
    
    body .homeview .hangulcontent>.bgbx {
        padding: 5px;
    }
    
    body .homeview .hangul_principle>.R2 .box .row .desc {
        padding: 0px;
    }
    
    body .homeview .hangul_principle>.R5 .head>img:nth-child(2) {
        width: 100%;
    }
    
    body .homeview .hangulcontent .box p {
        padding: 0px;
    }
    
    body .homeview .hangulcontent>.bgbx>p {
        padding: 20px 10px;
    }
    
    body .homeview .hangul_method .box .body .card {
        padding: 30px 10px;
        height: 430px;
    }
    
    body .homeview .hangulcontent .body .card {
        height: 450px;
    }
    
    body .homeview .hangulcontent .body .card h5 {
        padding: 10px 0;
        margin: 0px;
    }
    
    body .homeview .hangulcontent .box .body .cover {
        float: none;
    }
    
    body .homeview .hangulcontent .box .body .info {
        margin: 0px;
    }
    
    .widget.lessonbx .widget-body .week .content .wrapbx .info {
        padding-right: 0px;
    }
    
    .widget.lessonbx .widget-body .week .content .wrapbx .ebook {
        position: initial;
        transform: none;
    }
    
    .dashboard .gauge .score {
        font-size: 20px;
    }
    
    .widget.lessonbx .lesson .thumb {
        display: none;
    }
    
    .widget.base .lesson .thumb {
        display: inline-block;
    }
    
    .kids-panel .widget.homeschool>.widget-body .infobx>table {
        display: none;
    }
    
    .kids-panel .widget.homeschool>.widget-body .week .content {
        padding: 10px 0;
    }
    
    body .homeview>.banners .wrap {
        width: 100%;
    }
    
    body .homeview>.banners .banner {
        width: 100%;
        margin: 5px 0;
    }
    
    .coupons .row .col-xs-12 {
        width: 100%;
    }
    
    .qcardpanel .wrapqcard .navi {
        display: none;
    }
    
    body .kids-panel .widget .widget-body .resrcbx:not(td):not(.m10) {
        margin: 0px;
    }
    
    .kids-panel .widget .widget-body .resrcbx.hsize .item {
        width: 100% !important;
        margin: 0px;
    }
    
    .whiteboardview .toolbar {
        min-width: 90%;
        border-radius: 10px;
    }
    
    .whiteboardview .toolbar .btn {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 1.5em;
    }
    
    .widget.dabisukids .infobx .wrap .guide,
    .widget.dabisukids .infobx .wrap .ebook {
        float: initial;
        width: initial;
    }
    
    #popup-player .modal-dialog {
        width: 90%;
    }
    
    .dashboard .widget.roles .col-xs-2 {
        width: 25%;
    }
    
    .eqeditor .btns .nav-btn {
        width: 30px;
        height: 30px;
    }

    .eqeditor .btns .nav-btn#photo {
        display: none;
    }
    
    .eqeditor .btns .btn-close {
        font-size: 33px;
        width: auto;
        padding: 0px;
    }
    
    .eqeditor #convert {
        width: 60px;
        height: 60px;
    }
    
    .qcardpanel .qcards .qcard>.item .prop {
        float: none;
        display: none;
    }
    
    .qcardpanel .qcards .qcard>.item .prop>ul {
        position: initial;
        display: inline-block;
        margin-bottom: 10px;
    }
    
    .qcardpanel .qcards .qcard::before {
        display: none;
    }
    
    .qcardpanel .qcards .qcard .comment {
        padding: 10px;
    }
    
    .qcardpanel .qcards .qcard .comment>.pic {
        margin-top: 15px;
    }
    
    .qcardpanel .qcards .qcard>.item>.body {
        margin: 0px;
    }
    
    .qcardpanel .qcards .qcard>.item {
        padding: 0px 10px 10px;
    }
    
    .qcardpanel .qcards .qcard>.item::before {
        display: none;
    }
    
    .question .ans:not(.active)::before {
        position: initial;
        margin-bottom: 20px;
        display: block;
    }
    
    .qcardpanel .qcards .qcard>.item .sol::before {
        position: initial;
        margin-bottom: 20px;
        display: block;
    }
    /*
  body .mainpanel2 .nav-tabs {
      overflow-x: auto;
  }
  */
    .homeview .kids-map .homeview .kids-map-info-box {
        width: 100%;
        max-width: 350px;
        float: none;
        padding: 25px 10px;
        margin: 0 auto;
        min-height: auto;
    }
    .homeview .kids-map .homeview .kids-map-info-box.center {
        margin: 10% auto;
    }

    body .studentpanel.logpanel .history .lessons > div {
        width: 100%;
    }

    body .studentpanel.logpanel .history .lessons .lesson .thumb {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100px;
        height: 100%;
        padding: 0px;
        margin: 0px;
    }

    body .studentpanel.logpanel .history .lessons .lesson .thumb::before {
        font-size: 27px;
    }

    body .studentpanel.logpanel .history .lessons .lesson .prop {
        padding: 10px 5px 10px 110px;
    }

    .view.dabisuview .contentpanel.lecturepanel .section.top > .wrap .logo {
        display: none;
    }

    body .view.dabisuview .contentpanel.lecturepanel .section.top > .wrap .prop {
        bottom: initial;
        top: 50%;
        left: 50%;
        white-space: nowrap;
        transform: translate(-50%, -50%);
    }

}

@media screen and (max-width: 480px) {
    .signinpanel,
    .signuppanel {
        width: 320px;
        padding: 0px;
    }

    body .sidepanel {
        width: 100%;
    }
    .signinpanel .footer {
        display: none;
    }
    .cardinfo .thumb {
        float: none;
        width: auto;
    }
    .cardinfo .profile {
        margin-left: 0px;
    }
    .kids-panel .widget.dabisukids .days4 .item {
        width: 22%;
        height: 70px;
    }
    .kids-panel .weeks .week .day>.daylabel {
        height: 70px !important;
    }

    body .wizardpanel .bxTpl {
        padding: 0px;
    }
    body .wizardpanel .form-inline input {
        display: inline-block;
    }
    body .wizardpanel .form-inline input.w100 {
        width: 80px !important;
    }
    .widget .smry .box i {
        display: none;
    }
    body .wrap-tabs {
        z-index: 99;
        position: fixed;
        top: 50px;
        left: 0;
        width: 100%;
        text-align: center;
        background-color: rgba(255, 255, 255, 0.9);
        white-space: nowrap;
        overflow-x: auto;
    }
    body .nav-tabs.maintabs>li {
        float: initial;
        display: inline-block;
        padding: 0 5px;
    }
    body .lecturepanel .nav-tabs {
        display: block;
        margin: 0 0 3px;
        padding: 0px;
        -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
        box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
    }
    body .lecturepanel .nav-tabs li a {
        padding: 10px 20px;
    }
    body .mainpanel .headerbar .btn-profile {
        padding: 0px;
    }
    .headerbar .header-right .btn {
        padding: 13px 5px;
    }
    .headermenu .btn-menu {
        padding: 13px 7px;
    }
    .expand-right .headerbar,
    .mnu-expand .headerbar {
        /*min-width: 480px !important;*/
    }
    body.mnu-expand .mainpanel2 .headerbar .header-left {
        margin-left: 0px;
        left: 280px;
    }
    .mnu-expand .mainpanel2 .headerbar .header-left {
        /*margin-left: 0px !important;*/
    }
    .expand-right .headerbar {
        /*right: 300px;*/
    }
    .expand-right .mainpanel2 .headerbar .header-right {
        margin-right: 0px !important;
    }
    body .nav-tabs>li>a {
        text-align: center;
        padding: 10px 5px;
    }
    .messageview .headerbar,
    .schoolview .headerbar,
    .userview .headerbar,
    .mypageview .headerbar,
    .classroomview .headerbar {
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    body .userview .contentpanel,
    body .classroomview .contentpanel,
    body .mypageview .contentpanel {
        margin-top: 40px;
    }
    body .mypageview .couponpanel .contentpanel,
    body .mypageview .storepanel {
        margin-top: 0px;
    }
    .etests .test {
        height: auto !important;
    }
    .etests .test .thumb {
        float: none !important;
        width: auto !important;
    }
    .etests .test .thumb>.time {
        top: 5px;
        bottom: initial;
    }
    .etests .test .info {
        position: relative;
        overflow: initial !important;
        padding: 0px !important;
        margin: 2px;
    }
    .etests .test .wrapinfo {
        position: absolute;
        width: 100%;
        bottom: 3px;
        left: 0px;
        background-color: #000;
        color: #fff;
        opacity: 0.7;
        padding: 3px;
        font-size: 11px !important;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    }
    .etests .test .info .title {
        padding: 3px 0px !important;
        font-size: 11px !important;
    }
    .etests .test .info .period,
    .etests .test .info .graph,
    .etests .test .info .result .comments {
        display: none;
    }
    .panel-email .pull-right {
        float: none !important;
    }
    .pageheader h2 {
        font-size: 18px;
    }
    .pageheader .glyphicon,
    .pageheader .fa {
        font-size: 18px;
    }
    .pageheader h2 span {
        font-size: 11px;
    }
    .fc-header td {
        display: block !important;
        text-align: center;
        width: 100%;
        border: 1px solid #eee;
        padding: 10px !important;
        margin-top: -1px;
    }
    .fc-button {
        padding: 2px 5px !important;
        margin: 0 !important;
    }
    .fc-header-title h2 {
        margin: 0 !important;
    }
    .filemanager-options li {
        padding: 5px 7px;
    }
    .filemanager-options .filter-type {
        display: block;
        float: none;
        border-top: 1px solid #eee;
    }
    .comment-list .media-object {
        width: 30px;
        padding: 2px;
    }
    .comment-list .media>.pull-left {
        margin: 0;
    }
    .comment-list h4 {
        font-size: 13px;
    }
    .comment-list .reply {
        font-size: 10px;
        padding: 2px 5px;
    }
    .comment-list .media-body {
        font-size: 12px;
        line-height: 18px;
    }
    .blog-content form {
        margin-bottom: 20px;
    }
    .letter-list {
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .letter-list::after {
        clear: both;
        display: block;
        content: '';
    }
    .letter-list li {
        float: left;
        width: auto;
        display: inline-block;
    }
    .letter-list li a {
        display: block;
        padding: 2px 5px;
    }
    .btn-invoice:before {
        display: block;
        content: '';
        clear: both;
    }
    .btn-invoice .btn {
        display: block;
        width: 100%;
        margin-top: 10px;
    }
    .nav-tabs.nav-justified.nav-profile>li a {
        font-size: 13px;
        padding: 14px 10px;
    }
    #bloglist>div {
        padding: 0;
        margin: 0;
        float: none;
        width: auto;
    }
    .infoprofile {
        display: none;
    }
    .storepanel .intro .cover {
        display: none;
    }
    .storepanel .intro .prop {
        left: 0px !important;
    }
    .storepanel .content .ctrls {
        padding: 10px 0 !important;
    }
    body .panel-report .gtable .row>div>label {
        width: 100%;
    }
    body .btn-toolbar .btn {
        padding: 5px 13px;
    }
    .wrapnote .searchbx .date,
    .wrapnote .searchbx .keyword {
        width: 100%;
    }
    body .widget[type="kids"] .items:not(.resrcbx):not(.days4) .item {
        display: block;
    }
    .mod_admin .content-body>li {
        width: 49%;
    }

    .widget.lessonbx .widget-body .week .content .tabs {
        white-space: nowrap;
        overflow-x: auto;
    }

    .widget.lessonbx .widget-body .week .content .tabs > li {
        width: auto;
        display: inline-block;
        float: initial;
    }

    .widget.lessonbx .widget-body .week .content .tabs > li.active {
        width: auto;
    }

    .widget.lessonbx .widget-body .week .content .tabs > li.active h4 {
        padding: 5px 10px 5px 50px;
    }

    .widget.lessonbx .widget-body .week .content .tabs > li.active .btnPlayAll > span {
        display: none;
    }

    .lesson-panel .widget .nav-tabs > li {
        margin-bottom: 1px;
    }

    .mainpanel.studypanel .infopanel {
        height: 200px;
        margin-bottom: 10px;
    }

    .mainpanel.studypanel .infopanel .subject {
        float: initial;
        width: 100%;
        height: 50%;
    }

    .mainpanel.studypanel .infopanel .steps {
        float: initial;
        width: 100%;
        height: 50%;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .mainpanel.studypanel .infopanel .steps > .step {
        width: 30%;
    }

    .mainpanel.studypanel .infopanel .steps > .step + .step {
        margin-left: 10px;
    }

    .mainpanel.studypanel .infopanel .steps > .step + .step::before {
        font-size: 17px;
        left: -10px;
    }

    .mainpanel.studypanel .contentpanel > .screen {
        height: calc(100dvh - 280px);
    }

    .panel-report .rptdabisu .widget .task.expand .task-body .items .item {
        width: 120px;
        margin: 20px 10px 0;
    }

    .panel-report .rptdabisu .widget .task .task-header .prop h5 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .panel-report .rptdabisu .widget .task .task-header .progress {
        position: initial;
        width: 100%;
        margin-top: 15px;
        height: 10px;
    }

    .mainpanel.practicepanel .wrapqcard {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

}

@media screen and (max-width: 360px) {
    body .products .product .thumb .cover {
        height: 100px;
    }
    body .lesson-panel .smry {
        font-size: 12px;
    }
    body.body_login .bxCSPanel {
        padding: 0px 20px;
        width: 320px;
    }
    .pageheader h2 span {
        display: none;
    }
    .modal {
        bottom: initial;
        height: 100%;
    }
    /*
    .modal-dialog {
      width: 300px !important;
    }
    */
    .editcontent .questions .items>li select.think {
        width: 100%;
        margin-bottom: 5px;
    }
    .blog-title {
        font-size: 14px;
        line-height: 18px;
    }
    .blog-summary {
        font-size: 12px;
        line-height: 18px;
    }
    .blog-summary .btn {
        padding: 2px 5px;
        display: block;
        width: 100%;
    }
    .mod_home .tab-pane .panelbar .mnu .btn-group-new {
        display: none;
    }
    body.body_home .tab-pane .panelbar .mnu .btn-group-mobile-new {
        display: inline-block;
    }
    .mod_home .tab-pane .panelbar .mnu .btn-new {
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        background-color: #F0AD4E;
        border-color: #EEA236;
        border-radius: 50%;
        display: inline-block;
        line-height: 40px;
        width: 40px;
        height: 40px;
        color: #fff;
        font-weight: normal;
        font-size: 18px;
        text-align: center;
        cursor: pointer;
        padding: 0px;
        -moz-box-shadow: 3px 0 5px rgba(12, 12, 12, 0.5);
        -webkit-box-shadow: 3px 0 5px rgba(12, 12, 12, 0.5);
        box-shadow: 2px 2px 5px rgba(12, 12, 12, 0.5);
        position: fixed;
        bottom: 15px;
        right: 15px;
    }
    .mod_home .tab-pane .panelbar .mnu .btn-new>span {
        display: none;
    }
    body .nav-tabs>li>a {
        text-align: center;
        padding: 10px 5px;
    }
    body .nav-tabs>li>a>i {
        /*display: none;*/
    }
    .headermenu li:first-child .dropdown-menu {
        /*margin-right: -130px; */
    }
    .headermenu li:nth-child(2) .dropdown-menu {
        /*margin-right: -85px;*/
    }
    .headermenu li:nth-child(3) .dropdown-menu {
        /*margin-right: -37px;*/
    }
    .nav-tabs.nav-justified.nav-profile>li {
        float: none;
        display: block;
        width: auto;
    }
    .blog-media .media-body {
        overflow: visible;
    }
    .follower-list .btn {
        display: block;
        margin: 0 0 5px 0;
        width: 100%;
    }
    .filemanager-options li {
        display: block;
        border-top: 1px solid #eee;
    }
    .filemanager-options li:first-child {
        border-top: 0;
    }
    .authorpanel .media-object {
        width: 80px;
        margin-right: 10px;
    }
    .people-item .media-object {
        width: 80px !important;
        height: 80px !important;
    }
    .pagination {
        margin-bottom: 20px;
    }
    .storepanel .bar .title span {}
    .storepanel .bar .view-options .btn i {
        margin: 0px !important;
    }
    .storepanel .bar .view-options .btn span {
        display: none;
    }
    .wraplst .col-xs-2,
    .wraplst .col-xs-4,
    .storepanel .item-list>.col-xs-6 {
        width: 100% !important;
    }
    .mod_school .headerbar .header-right li>.btn-new {
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        background-color: #F0AD4E;
        border-color: #EEA236;
        border-radius: 50%;
        display: inline-block;
        line-height: 40px;
        width: 40px;
        height: 40px;
        color: #fff;
        font-weight: normal;
        font-size: 18px;
        text-align: center;
        cursor: pointer;
        padding: 0px;
        -moz-box-shadow: 3px 0 5px rgba(12, 12, 12, 0.5);
        -webkit-box-shadow: 3px 0 5px rgba(12, 12, 12, 0.5);
        box-shadow: 2px 2px 5px rgba(12, 12, 12, 0.5);
        position: fixed;
        bottom: 15px;
        right: 15px;
    }

    .wrapsch>select {
        display: block;
        width: 100%;
    }

    .homeview .wrappanel section.frontR2 .wrapsection .row {
        padding: 10px;
    }
    
    .homeview .wrappanel section .wrapsection .row:not(.link)>.col-xs-6 {
        width: 100%;
    }
    
    .row.mobile .col-xs-6,
    ._dcodeview .wrappanel section .wrap .col-xs-6 {
        width: 100%;
    }
    
    #popup-members .users .row .col-xs-2 {
        width: 50%;
    }
    
    .whiteboardview .toolbar .btn {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 1.3em;
    }
    
    .wrap-invoice .table tbody td.prodinfo>.thumb {
        display: none;
    }
}

@media screen and (max-width: 320px) {
    body .pages>.score {
        top: 10px;
        right: 20px;
        width: 50px;
        font-size: 30px;
    }
    /*
    .modal-dialog {
      width: 280px;
    }
    */
    .col-xs-hide {
        display: none !important;
    }
    body .panel-report .userinfobx .thumb {
        margin: 0px 0px 0px 5px;
        width: 80px;
    }
    body .panel-report .userinfobx>.info {
        margin-left: 90px;
    }
}