@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');
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

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

@font-face {
    font-family: 'Binggrae';
    font-style: normal;
    font-weight: 600;
    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: 'NexonBold';
    src: url('/skins/default/fonts/Nexon_Gothic_Bold.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Nexon';
    src: url('/skins/default/fonts/Nexon_Gothic_Light.woff') format('woff');
    font-weight: 100;
    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: 'Maple';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/MaplestoryOTFBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MapleLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/MaplestoryOTFLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html {
    height: 100%;
}

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

body.body_home {
    font-family: 'Nexon', 'Noto Sans KR', 'sans-serif';
}

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

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[module=school] {
    background: #fff url(/skins/default/images/school/loading_bg.jpg) no-repeat top center/cover;
}

body.noscroll {
    overflow: 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;
}

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

.mshow {
    display: none !important;
}

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

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

.mt5 {
  margin-top: 5px;
}

.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mb5 {
  margin-bottom: 5px;
}

.mb10 {
  margin-bottom: 10px;
}

.mb15 {
  margin-bottom: 15px;
}

.mb20 {
  margin-bottom: 20px;
}

.mr5 {
  margin-right: 5px;
}

.ml5 {
  margin-left: 5px;
}

.ml10 {
  margin-left: 10px;
}

.tcenter,
.center {
  text-align: center;
}

.tright {
    text-align: right;
}

.w100 {
    width: 100px !important;
}

.w50 {
    width: 50px !important;
}

.wp100 {
    width: 100%;
}

.w150 {
    width: 150px !important;
}

.w200 {
    width: 200px !important;
}

.w300 {
    width: 300px !important;
}

.cursor {
    cursor: pointer;
}

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

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

.iblock {
    display: inline-block;
}

.lnk:not(.lock) {
    cursor: pointer;
}

form .invalid {
    font-size: 12px;
    padding-top: 5px;
    color: #db391e;
    display: none;
}

form .invalid.chk {
    display: inline-block;
}

form .required::before {
    content: "*";
    color: red;
}

nav .pagination {
    margin: 10px 0;
}

nav .pagination > li > span,
nav .pagination > li > a {
    border: none;
    font-size: 15px;
}

nav .pagination > li.active > a {
    border-radius: 5px;
}

.btn-dark {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}

.lstItems > .item {
  background-color: #f1f6ff;
  border: 1px solid #93b7f6;
  line-height: 25px;
  overflow: hidden;
  font-weight: 300;
  position: relative;
  padding: 5px 25px 5px 15px;
  margin: 5px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lstItems > .item .name {
    display: inline-block;
}

.lstItems > .item > span[data-role="remove"],
.lstItems > .item > a.btn-remove,
.lstItems > .item > a.btnDel {
  position: absolute;
  right: 5px;
  padding: 2px 5px;
  line-height: 14px;
  text-align: center;
  text-decoration: none;
  color: #657695;
}

.lstItems > .item a > i {
    margin-top: 3px;
}

/* animation */

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

/* side menu */
.sidepanel {
  width: 0px;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 102;
  -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: #FFF;
  overflow: hidden;
}

.sidepanel > .wrap {
  width: 360px;
  height: 100%;
  overflow-y: auto;
}

.sidepanel.right {
  right: 0;
  -moz-box-shadow: -3px 0 5px rgba(12,12,12,0.02);
  -webkit-box-shadow: -3px 0 5px rgba(12,12,12,0.02);
  box-shadow: -3px 0 5px rgba(0,0,0,0.2);
}

.mnu-expand .sidepanel {
  width: 360px;
  display: block;
  position: fixed;
}

.ibg {
  cursor: pointer;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 101;
  background: rgba(0,0,0,0.5);
  display: none;
}

.bgon > .ibg,
.mnu-expand > .ibg {
  display: block;
}

/* view */

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

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


body > section > .view:first-child:not(.overpanel) .headerbar .page-title:not(.sback)>i {
    display: none;
}

/* login */

.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%);
}

body[module=school] .signpanel {
    width: 400px;
}

.signinpanel .logopanel {
    float: none;
    width: auto;
    padding: 0;
    background: url(/common/images/logo_dabisu.svg) no-repeat left top;
    background-size: auto 90%;
    color: #1d2939;
    height: 60px;
    cursor: pointer;
}

body[module=school] .signinpanel .logopanel {
    background: url(/common/images/logo_dabischool.png) no-repeat center center;
    background-size: 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;
    text-align: center;
}

.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.home .bxCSPanel .guide,
.body_login.home .signinpanel .guide {
    display: inline-block;
}

.bxCSPanel .guide {
    top: 0px;
    padding: 5px 10px 0px 0px;
}

.body_login.home .bxCSPanel.step2 .guide.step1,
.body_login.home .bxCSPanel .guide.step2 {
    display: none;
}

.body_login.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(239, 239, 239, .9);
    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;
}

body[module=school] .signinpanel form {
    border: none;
    box-shadow: 1px 3px 7px rgba(0, 0, 0, .5);
    background: rgba(255, 255, 255, .8);
    padding: 50px 30px;
}

.signinpanel form a {
    color: #00c0bd;
    display: inline-block;
}

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



/* register */

.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;
    display: inline-block;
}

.body_login .header .page-title > i {
    vertical-align: middle;
}

.body_login .view[page=default] .header .page-title > i {
    font-size: 40px;
}

.body_login .header .page-title > span {
    vertical-align: middle;
}

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

.body_login .bxCSPanel {
    width: 360px;
    padding: 10px 30px;
    background-color: rgba(255, 255, 255, .8);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.body_login .bxCSPanel .title {
    margin: 5px 0px 10px;
    position: relative;
    font-weight: 400;
    text-align: center;
}

.body_login .bxCSPanel .title .notice {
    position: absolute;
    bottom: 0px;
    right: 5px;
    font-size: 11px;
    font-weight: normal;
    color: #f8760b;
}

.body_login .bxCSPanel .form-group {
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    position: relative;
}

.body_login .bxCSPanel .bxcoupon {
    padding: 10px;
    background-color: rgba(255, 238, 206, 0.9);
    border: 2px dotted #f8931e;
    border-radius: 10px;
}

.body_login .bxCSPanel .bxcoupon label {
    background-color: #3e4a53;
    color: #fff;
    display: inline-block;
    padding: 3px 15px;
    font-size: 13px;
    border-radius: 10px;
}

.body_login .bxCSPanel .bxcoupon .desc {
    padding: 0 0 5px;
    color: #F05C22;
    ;
}

.body_login .bxCSPanel .devider {
    margin: 5px 0px 10px;
    border-top: 1px dashed #aaa;
}

.body_login .bxCSPanel .form-group.required .form-control {
    border: 1px solid #a6d5d4;
}

.body_login .bxCSPanel.check .form-ext {
    display: inline-block;
}

.body_login .bxCSPanel.check .msg {
    display: none;
}

.body_login .bxCSPanel .form-ext {
    display: none;
}

.body_login .bxCSPanel.step2 .form-ext {
    display: block;
}

.body_login .bxCSPanel .input-group .btn-search {
    line-height: 24px;
}

.body_login .bxCSPanel .alert {
    padding: 5px;
    font-size: 11px;
    margin-bottom: 10px;
}

.body_login .bxCSPanel .msg {
    text-align: center;
    font-size: 11px;
    margin: 10px 0;
}

.body_login .bxCSPanel .cmd {
    text-align: center;
}

.body_login .bxCSPanel .cmd .btn {
    width: 100%;
    margin-bottom: 15px;
}





/* header */

.mainpanel > .headerbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
    height: 60px;
}

.fixon .mainpanel > .headerbar {
    background-color: rgba(0, 0, 0, .5);
}

.fixon .mainpanel > .headerbar .title,
.fixon .mainpanel > .headerbar a {
    color: #fff;
}

.mainpanel > .headerbar > div {
    line-height: 60px;
}

.mainpanel > .headerbar .hleft {
    position: absolute;
    top: 0px;
    left: 10px;
}

.mainpanel > .headerbar .hleft > a {
    font-size: 17px;
}

.mainpanel > .headerbar .hcenter {
    text-align: center;
}

.mainpanel > .headerbar .hright {
    position: absolute;
    top: 0px;
    right: 10px;
}

.mainpanel > .headerbar .hcenter .title {
    margin: 0px;
    vertical-align: middle;
    font-weight: 600;
}

.headerbar .btn {
    background-color: transparent;
    padding: 0px;
    width: 50px;
    height: 50px;
    vertical-align: middle;
    font-size: 20px;
}

.headerbar .btn + .btn {
    margin-left: 5px;
}

.headerbar .btn > i {
    line-height: 50px;
}

.mainpanel:not(.coursepanel) .headerbar .btn-back::before {
    content: '\f053';
    display: inline-block;
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    margin-right: 5px;
}

.headerbar .btn-profile {
    padding: 0px;
}

.headerbar .btn-profile .pic {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.headerbar .menus {
    background-color: #4b80b8;
    padding: 5px 10px;
    border-radius: 40px;
    display: inline-block;
    line-height: 35px;
    max-width: 400px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    box-shadow: 0 1px 3px #333;
    vertical-align: middle;
}

.view[page=ocymath] .headerbar .menus {
    box-shadow: 0 1px 5px #222;
    background-image: linear-gradient( 90deg, #60655f 10%, #3e453d 100%);
}

.headerbar .menus > li {
    margin-right: 0px;
}

.headerbar .menus > li:last-child {
    margin-right: 10px;
}

.headerbar .menus > li > a {
    display: inline-block;
    color: #fff;
    padding: 5px 20px;
    line-height: 22px;
}

.headerbar .menus > li.active > a {
    background-color: rgba(255, 255, 255, .5);
    border-radius: 35px;
    font-size: 15px;
}


/* mainpanel */

.view > .mainpanel {
    height: 100%;
    padding-top: 60px;
    position: relative;
}

/* overpanel */

.view.overpanel {
    background-color: #000;
}

.view.overpanel > .mainpanel {
    padding: 0px;
}

.view > .mainpanel .viewcontent {
}

.view > .mainpanel .viewcontent .item {
    height: 100vh; 
}

.view > .mainpanel .viewcontent .plyr {
    height: 100%;
}

.view > .mainpanel .viewcontent .plyr__video-wrapper {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
}

.view > .mainpanel .viewcontent .plyr video {
    height: 100%;
}


/* sidepanel */

.view > .sidepanel {
}

.view > .sidepanel .profile {
    padding: 25px 15px 5px;
    margin-bottom: 30px;
    background-color: #707994;
    color: #fff;
    box-shadow: 0px 2px 3px #555;
}

.view > .sidepanel .profile > li {
}

.view > .sidepanel .profile > li.prop {
    padding-left: 85px;
    width: 100%;
    position: relative;
}

.view > .sidepanel .profile .pic {
    position: absolute;
    top: 15px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid #fff;
    margin-right: 10px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    box-shadow: 0px 2px 3px #555;
}

.view > .sidepanel .profile .info {
}

.view > .sidepanel .profile .info > span {
    display: block;
}

.view > .sidepanel .profile .info > span + span {
    margin-top: 5px;
}

.view > .sidepanel .profile .name {
    font-size: 15px;
}

.view > .sidepanel .profile .organ {
    font-size: 13px;
    color: #f9f9f9;
}

.view > .sidepanel .profile .btn {
    border-radius: 25px;
    padding: 5px 20px;
    position: absolute;
    right: 0px;
    bottom: 0px;
}

.view > .sidepanel .mnu {
}

.view > .sidepanel .mnu > li + li {
}

.view > .sidepanel .mnu > li a {
    display: block;
    padding: 5px 20px;
    color: #000;
    position: relative;
}

.view > .sidepanel .mnu > li a:hover {
    color: #eb4d45;
    background-color: #F9F9F9;
}

.view > .sidepanel .mnu > li a:hover i,
.view > .sidepanel .mnu > li a:hover::after {
    color: #000;
}

.view > .sidepanel .mnu > li a::after {
    content: '\f054';
    display: inline-block;
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    color: #ccc;
}

.view > .sidepanel .mnu > li i {
    width: 40px;
    padding: 10px 0;
    border-radius: 8px;
    text-align: center;
    margin-right: 5px;
    color: #777;
}

.view > .sidepanel .mnu > li > span {
    display: inline-block;
}


/* default page */

.view[name=school] {
    background: url(/skins/default/images/school/bg_main.png) no-repeat center center/cover;
}

.view[name=school] .mainpanel .headerbar .hcenter::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    width: 150px;
    height: 55px;
    background: url(/common/images/logo_dabischool.png) no-repeat center center/contain;
    transform: translateX(-50%);
}

.view[name=school] .mainpanel .headerbar .hcenter .title {
    display: none;
}

.view .mainpanel > .wrappanel {
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
}

.view .mainpanel.vscroll > .wrappanel {
    overflow: initial;
    height: auto;
}

.view .mainpanel .wrappanel .boxs {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
}

.view .mainpanel .wrappanel .boxs.over {
    white-space: nowrap;
    padding-left: 25px;
}

.view .mainpanel .wrappanel .boxs.over > .box {
    display: inline-block;
    background-color: #F9F9F9;
    border-radius: 10px;
    position: relative;
    width: 25%;
    margin-right: 25px;
    transition: all .2s ease-in-out;
    cursor: pointer;
}

.view[page=default] .mainpanel .wrappanel .boxs.over > .box {
    overflow: hidden;
}

.view .mainpanel .wrappanel .boxs.over > .box.lock::before {
    background-color: rgba(0, 0, 0, .3);
    border-radius: 10px;
}

.view .mainpanel .wrappanel .boxs.over > .box.lock::after {
    content: '\f023';
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: .9;
    color: #fff;
    text-shadow: 0 2px 5px #000;
    z-index: 2;
}

.view .mainpanel.coursepanel .wrappanel .boxs.over .box::before {
    content: '';
    display: block;
    padding-bottom: 100%;
}

.view[page=default] .mainpanel .wrappanel .boxs.over > .box .thumb {
    padding-bottom: 80%;
}

.view .mainpanel.coursepanel .wrappanel .boxs.over .box .info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.view[page=default] .mainpanel .boxs.over .box .info {
    position: absolute;
    top: 10px;
    width: 100%;
    padding: 5px 0;
    color: #fff;
}

.view .mainpanel .wrappanel .boxs.over .box .info h5 {
    font-family: "NexonBold";
    font-size: 20px;
    font-weight: 600;
}

.view .mainpanel.coursepanel .wrappanel .boxs.over .box > h5 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0px;
    font-size: 17px;
}

.view .mainpanel .wrappanel .boxs.over .box .info .desc {
    display: block;
    margin-bottom: 5px;
}

.view[page=default] .mainpanel .wrappanel .boxs.over .box::before {
    content: '';
    display: block;
    padding-bottom: 120%;
}

.view[page=default] .mainpanel .wrappanel .boxs .box.dabisukids {
    background: #62D18F url(/skins/default/images/school/bxbg_dabisukids2.png) no-repeat bottom 5px center/80% auto;
}

.view[page=default] .mainpanel .wrappanel .boxs .box.dabisujr {
    background: #4D8AFF url(/skins/default/images/school/bxbg_dabisujr2.png) no-repeat bottom 5px center/100% auto;
}

.view[page=default] .mainpanel .wrappanel .boxs .box.gugudan {
    background: #8C66F9 url(/skins/default/images/school/bxbg_gugudan2.png) no-repeat bottom center/90% auto;
}

.view[page=default] .mainpanel .wrappanel .boxs .box.hangeul {
    background: #FE665B url(/skins/default/images/school/bxbg_hangeul2.png) no-repeat bottom 5px center/90% auto;
}

.view[page=default] .mainpanel .wrappanel .boxs .box.ocymath {
    background: #FFB35B url(/skins/default/images/school/bxbg_ocymath2.png) no-repeat bottom center/90% auto;
}

/* course page */


.view .mainpanel.coursepanel .wrappanel .boxs.over > .box:focus,
.view .mainpanel.coursepanel .wrappanel .boxs.over > .box:hover {
    transform: scale(1.1);
    z-index: 5;
}


/* step page */

.view .mainpanel.steppanel .wrappanel .boxs {
    top: 40%;
}

.view .mainpanel.steppanel .wrappanel .boxs.over > .box {
    width: 22%;
}

/* footer page */

.mainpanel > .footer {
    position: fixed;
    width: 100%;
    right: 0px;
    bottom: 0px;
}

.mainpanel > .footer > div {
    position: relative;
    padding: 5px 20px;
}

.mainpanel > .footer .fleft {
    float: left;
}

.mainpanel > .footer .fright {
    float: right;
}

.mainpanel > .footer .fleft::before {
    border-top-right-radius: 10px;
}

.view .mainpanel > .footer .fright::before {
    border-top-left-radius: 10px;
}

.view:not([page=dabisu]) .mainpanel > .footer > div::before {
    content: '';
    display: block;
    background-color: #f9f9f9;
    width: 100%;
    height: 65%;
    position: absolute;
    right: 0px;
    bottom: 0px;
}

.mainpanel > .footer .btn {
    position: relative;
    display: inline-block;
    text-align: center;
    padding: 0px 10px;
    z-index: 1;
}

.mainpanel > .footer .btn + .btn {
    margin-left: 10px;
}

.mainpanel > .footer .btn > span {
    display: block;
    font-size: 13px;
}


/* lesson page */

.view .mainpanel .activity {
    cursor: pointer;
}

.view .mainpanel .headerbar .hcenter .box.title {
    position: relative;
    display: inline-block;
    padding: 5px 60px;
    border-radius: 35px;
    background-color: #2668a3;
    color: #fff;
    font-size: 22px;
    font-family: NexonBold;
    font-weight: initial;
}

.view .mainpanel .headerbar .hcenter .box.title::before {
    content: '';
    position: absolute;
    top: -25px;
    left: 30px;
    height: 100%;
    width: 3px;
    background-color: #ccc;
    z-index: -1;
}

.view .mainpanel .headerbar .hcenter .box.title::after {
    content: '';
    position: absolute;
    top: -25px;
    right: 30px;
    height: 100%;
    width: 3px;
    background-color: #ccc;
    z-index: -1;
}

.view .mainpanel .headerbar .hcenter .box.title > a {
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
}

.view .mainpanel .headerbar .hcenter .box.title > a.btnLeft {
    left: 10px;
}

.view .mainpanel .headerbar .hcenter .box.title > a.btnRight {
    right: 10px;
}

.view .mainpanel .wrappanel .lessons.over {
    white-space: nowrap;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.view .mainpanel .wrappanel .lessons .lesson {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 200px;
    border-radius: 10px;
    margin: 30px 2%;
}

.view .mainpanel.tplkids .wrappanel .lessons .lesson {
    width: 17%;
    max-width: 300px;
    height: auto;
}

.view .mainpanel .wrappanel .lessons .lesson .wrap {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}


.view .mainpanel.tplkids .wrappanel .lessons .lesson:nth-child(odd) {
    top: -30px;
}

.view .mainpanel.tplkids .wrappanel .lessons .lesson:nth-child(even) {
    bottom: -30px;
}

.view .mainpanel.tplkids .wrappanel .lessons .lesson:not(:last-child)::after {
    content: '';
    position: absolute;
    width: 130%;
    height: 70%;
    border: 2.5vw solid #ccc;
    border-color: transparent transparent #ccc #ccc;
    border-radius: 50%/0 0 70% 100%;
    z-index: -1;
}

.view .mainpanel.tplkids .wrappanel .lessons .lesson:nth-child(odd)::after {
    top: 60%;
    right: -90%;
    transform: rotate(-15deg);
}

.view .mainpanel.tplkids .wrappanel .lessons .lesson:nth-child(even)::after {
    top: -30%;
    right: -90px;
    transform: rotate(160deg);
}

.view .mainpanel .wrappanel .lessons .lesson .thumb {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.view .mainpanel .wrappanel .lessons .lesson label {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    padding: 5px 20px;
    background-color: #333;
    color: #fff;
    border-radius: 25px;
}

.view .mainpanel .wrappanel .lessons .lesson .status {
    position: absolute;
    bottom: 10px;
    right: 10px;
    text-align: center;
    padding: 3px 15px;
    border-radius: 10px;
    border: 2px solid #fff;
    background-color: #cd3b49;
    color: #fff;
}

.view .mainpanel .wrappanel .lessons .lesson.lock {
    filter: grayscale(.95);
    -webkit-filter: grayscale(.95);
}

.view .mainpanel .wrappanel .lessons .lesson.lock .status {
    display: none;
}

.view .mainpanel .wrappanel .lessons .lesson.ing label::before {
    content: '\f3c5';
    display: inline-block;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 40px;
    position: absolute;
    top: -10px;
    left: -25px;
    color: #fb3838;
    z-index: 2;
}

.view[name=school_dabisu_step] .mainpanel .wrappanel .lessons .lesson.lock .wrap::after,
.view .mainpanel .wrappanel .lessons .lesson.lock::after {
    content: '\f023';
    display: inline-block;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 40px;
    color: #fff;
    opacity: .9;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 0 2px 5px #000;
    z-index: 2;
}

.view .mainpanel .wrappanel .lessons .lesson::before {
    content: '';
    display: block;
    padding-bottom: 95%;
}


/* unit page */


.view .mainpanel .wrappanel .units {
    white-space: nowrap;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.view .mainpanel .wrappanel .units > .unit {
    position: relative;
    display: inline-block;
    padding: 15px;
    background-color: #F9F9F9;
    border: 1px solid #eee;
    border-radius: 10px;
    margin: 0 15px;
}

.view .mainpanel .wrappanel .units > .unit::before {
    content: attr(title);
    position: absolute;
    top: -50px;
    left: 20px;
    padding: 10px;
    border-radius: 5px;
    z-index: 1;
    background-color: #ccc;
    font-size: 15px;
}

.view .mainpanel .wrappanel .units > .unit + .unit::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -35px;
    width: 35px;
    height: 10px;
    background-color: #ddd;
}

.view .mainpanel .wrappanel .units > .unit .activity {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 150px;
    border: 1px solid #eee;
    border-radius: 10px;
    background-color: #F9F9F9;
}

.view .mainpanel .wrappanel .units > .unit .activity + .activity {
    margin-left: 5px;
}

/* activity page */

.view .mainpanel .activities {
}

.view .mainpanel .activities.over {
    position: relative;
    top: 45%;
    transform: translateY(-50%);
    white-space: nowrap;
    padding: 0 0 0 20px;
}

.view .mainpanel .activities .activity {
    display: inline-block;
    position: relative;
}

.view .mainpanel .activities .activity.box {
    width: 25%;
    border-radius: 10px;
    margin-right: 15px;
    overflow: hidden;
    background-color: #F9F9F9;
    box-shadow: 0 1px 5px #555;
}

.view .mainpanel .activities .activity.box::before {
    content: '';
    display: block;
    height: 0;
    padding-bottom: 100%;
}

.view .mainpanel .activities .activity.box .no {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 10px;
    border-radius: 10px;
    background-color blue;
    background-color: #e3644f;
    text-align: center;
    color: #fff;
}

.view .mainpanel .activities .activity.box .title {
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    position: absolute;
    bottom: 0px;
    width: 100%;
    margin: 0px;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.view[page=dabisu_step] .headerbar .btn-back {
    background: url(/common/images/logo_dabisu_new_w.png) no-repeat center center/contain;
    display: inline-block;
    width: 110px;
    margin-left: 20px;
}

.view[page=dabisu_step] .headerbar .btn-back::before {
    margin-left: -15px;
    color: #fff;
}

.view[page=dabisu_step] .headerbar .btn-back span {
    display: none;
}

.view[page=dabisu_lesson] .mainpanel .activities {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 90%;
    text-align: center;
    padding-right: 20px;
}

.view[page=dabisu_lesson] .mainpanel .activities .activity {
    background-color: #F9F9F9;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
}

.view[page=dabisu_lesson] .mainpanel .activities .wrap:nth-child(n+2) .activity {
    border-radius: 15px;
}

.view[page=dabisu_lesson] .mainpanel .activities .activity.video h5 {
    margin: 0px;
}

.view[page=dabisu_lesson] .mainpanel .activities .wrap {
    padding: 20px;
}

.view[page=dabisu_lesson] .mainpanel .activities .wrap:first-child {
    width: 50%;
    height: 100%;
    border-radius: 30px;
    float: left;
}

.view[page=dabisu_lesson] .mainpanel .activities .wrap:first-child .activity.video h5 {
    position: absolute;
    bottom: 0px;
    width: 100%;
    margin: 0px;
    padding: 5px;
    background-color: rgba(0, 0, 0, .5);
    color: #fff;
}

.view .mainpanel .activity::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 50px;
    color: rgba(255, 255, 255);
    text-shadow: 0 0 10px #333;
    opacity: .8;
}

.view .mainpanel .activity.video::after {
    content: '\f144';
}

.view .mainpanel .activity.mission::after {
    content: '\f8bc';
}

.view[page=dabisu_lesson] .mainpanel .activities.half .wrap:nth-child(n+2) .activity h5 {
    text-align: left;
    margin: 10px 0;
}

.view[page=dabisu_lesson] .mainpanel .activities.quarter .wrap:nth-child(n+2) .activity h5 {
    position: absolute;
    bottom: 0px;
    width: 100%;
    margin: 0px;
    padding: 5px;
    background-color: rgba(0, 0, 0, .5);
    color: #fff;
}

.view[page=dabisu_lesson] .mainpanel .activities.quarter .wrap:nth-child(n+2) .activity::after {
    top: 40% !important;
}

.view[page=dabisu_lesson] .mainpanel .activities.quarter .wrap:nth-child(n+2) .activity.video::before {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

.view[page=dabisu_lesson] .mainpanel .activities.half .wrap:nth-child(n+2) {
    position: relative;
    float: left;
    width: 50%;
    height: calc(50% - 10px);
}

.view[page=dabisu_lesson] .mainpanel .activities.quarter .wrap:nth-child(n+2) {
    position: relative;
    float: left;
    width: 25%;
    height: calc(50% - 10px);
}

.view[page=dabisu_lesson] .mainpanel .activities .wrap:nth-child(n+2) {
    padding: 20px 0px 0px 20px;
}

.view[page=dabisu_lesson] .mainpanel .activities.half .wrap:nth-child(n+2) .activity::before {
    content: '';
    float: left;
    display: block;
    width: 80px;
    height: 100%;
    background-color: #eee;
    position: relative;
    margin-right: 10px;
}

.view[page=dabisu_lesson] .mainpanel .activities .wrap:nth-child(n+2) .activity:not(.video)::after {
    content: '';
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 40px;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.view[page=dabisu_lesson] .mainpanel .activities.half .wrap:nth-child(n+2) .activity:not(.video)::after {
    left: 40px;
}

.view[page=dabisu_lesson] .mainpanel .activities .wrap:nth-child(n+2) .activity.quiz::after {
    content: '\f0ae';
}

.view[page=dabisu_lesson] .mainpanel .activities .wrap:nth-child(n+2) .activity.test::after {
    content: '\f733';
}

/* dabisukids page */

.view[page=dabisukids]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f8f3ea url(https://i.pinimg.com/736x/d0/38/40/d03840cb72cdf14e0e3f38bad7a2b108.jpg) no-repeat bottom center/cover;
    /*
    filter: grayscale(.5);
    opacity: .3
    */
}

.view[page=dabisukids] .headerbar .menus {
    background-image: linear-gradient( 135deg, #FAD7A1 10%, #E96D71 100%);
    box-shadow: 0 1px 3px #625587;
}

.view[page=dabisukids] .headerbar .menus > li.active > a {
    color: #3d3b48;
}

.view[page=dabisukids] .headerbar .hright .btn:not(.btn-profile) {
    color: #fff;
    text-shadow: 0 1px 3px #613325;
    font-size: 20px;
}

.view[page=dabisukids] .mainpanel.coursepanel .boxs.over > .box {
    box-shadow: 0 1px 3px #555;
    border-radius: 30px;
    position: relative;
    background: linear-gradient(133deg, rgba(103,163,231,1) 35%, rgba(20,82,152,1) 100%);
    color: #fff;
}

.view[page=dabisukids] .mainpanel.coursepanel .boxs.over > .box:nth-child(2) {
    background: linear-gradient(133deg, rgba(231,103,187,1) 35%, rgba(152,20,100,1) 100%);
}

.view[page=dabisukids] .mainpanel.coursepanel .boxs.over > .box:nth-child(3) {
    background: linear-gradient(133deg, rgba(103,231,144,1) 35%, rgba(22,152,20,1) 100%);
}

.view[page=dabisukids] .mainpanel.coursepanel .boxs.over > .box::after {
    content: '';
    position: absolute;
    bottom: 0px;
    right: -10px;
    width: 130px;
    height: 110px;
    background: url(/skins/default/images/dabisu/ilbong.png) no-repeat center center/contain;
}

.view[page=dabisukids] .mainpanel.coursepanel .boxs.over > .box:nth-child(2)::after {
    background: url(/skins/default/images/dabisu/cholssak.png) no-repeat center center/contain;
    width: 160px;
    height: 130px;
    bottom: -5px;
}

.view[page=dabisukids] .mainpanel.coursepanel .boxs.over > .box:nth-child(3)::after {
    background: url(/skins/default/images/dabisu/ssangssang.png) no-repeat center center/contain;
    width: 140px;
    height: 130px;
    right: -20px;
    bottom: -15px;
}

.view[page=dabisukids] .mainpanel.coursepanel .boxs.over .box .info {
    top: 10%;
    transform: translateX(-50%);
    padding: 10px;
    z-index: 1;
    padding: 0px;
}

.view[page=dabisukids] .mainpanel .wrappanel .boxs.over .box .info h5 {
}

.view[page=dabisukids] .mainpanel.coursepanel .boxs.over .box .info span {
    display: block;
    padding: 7px 20px;
    border-radius: 15px;
    background-color: rgba(0, 0, 0, .5);
    font-size: 15px;
    text-shadow: none;
}

.view[page=dabisukids] .mainpanel.coursepanel .footer a {
    color: #453633;
    text-shadow: 0 0 5px #fff;
}

.view[page=dabisukids] .mainpanel.coursepanel .footer a span {
}

.view[page=dabisukids] .mainpanel.coursepanel .footer > div::before {
    background-color: transparent;
}

.view[page=dabisukids] .mainpanel.coursepanel .footer .fleft::before {
}

.view[page=dabisukids] .mainpanel.coursepanel .footer .fright::before {
}

.view[page=dabisukids_step] .mainpanel.steppanel .headerbar .btn-back {
    display: inline-block;
    background: url(/common/images/logo_dabikids_w.png) no-repeat center center/contain;
    width: 130px;
    height: 60px;
    margin-left: 20px;
    color: #fff;
}

.view .mainpanel.coursepanel .headerbar .btn-back > span,
.view[page=dabisukids_step] .mainpanel.steppanel .headerbar .btn-back > span {
    display: none;
}

.view .mainpanel.steppanel .headerbar .btn-back::before,
.view .mainpanel.coursepanel .headerbar .btn-back > span::before {
    content: '\f053';
    margin-left: -20px;
    font-size: 23px;
    text-shadow: 0 1px 3px #000;
}

.view[page=dabisukids_step] .mainpanel.steppanel .lessons .lesson {
    width: 20%;
    height: auto;
}

.view[path$="9819"] {
    background: url(https://i.pinimg.com/564x/7a/0e/42/7a0e4217fe91f50dab1323a97dfa7a15.jpg) no-repeat center center/cover fixed;
}

.view[path$="9820"] {
    background: url(https://i.pinimg.com/564x/7a/0e/42/7a0e4217fe91f50dab1323a97dfa7a15.jpg) no-repeat center center/cover fixed;
}

.view[path$="9821"] {
    background: url(https://i.pinimg.com/564x/7a/0e/42/7a0e4217fe91f50dab1323a97dfa7a15.jpg) no-repeat center center/cover fixed;
}

/* dabisukids guide page */

.view[page=dabisukids_guide] {
}

ul.tabs {
    text-align: center;
    background-color: #F9F9F9;
}

ul.tabs > .tab {
    display: inline-block;
}

ul.tabs > .tab a {
    display: inline-block;
    color: #999;
    font-size: 17px;
    margin-top: 5px;
    padding: 10px 40px 5px;
    border-bottom: 2px solid transparent;
}

ul.tabs > .tab.active a {
    color: #fb3c84;
    border-bottom: 2px solid #f976a7;
    font-family: NexonBold;
}

.tab-panels > .panel {
    display: none;
    margin: 0px;
    background-color: #fff;
}

.tab-panels > .panel.active {
    display: block;
}

.view[page=dabisukids_guide] .box {
    border-radius: 20px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .1);
    overflow: hidden;
    background-color: #fff;
    margin-bottom: 30px;
}

.view[page=dabisukids_guide] .box > h4 {
    font-family: 'BinggraeBold';
    color: #fff;
    font-size: 22px;
    margin: 0px;
    padding: 10px;
    background: #fff url(/skins/default/images/home/20190812_158.png) repeat-x top left;
}

.view[page=dabisukids_guide] .box > .body {
    padding: 20px;
}

.view[page=dabisukids_guide] .videobx video {
    width: 100%;
    object-fit: fill; 
}

.view[page=dabisukids_guide] .wrappanel .panel p {
    font-size: 15px;
    line-height: 22px;
}

.view[page=dabisukids_guide] .section.area1 {
  background: #fff url(/skins/default/images/home/program/program_concept_deco01.png) no-repeat 70px top / 25% auto;
  padding: 10px 10px 30px 300px;
  margin-top: 30px;
  height: 220px;
}

.view[page=dabisukids_guide] .section.area2::before {
  content: '';
  position: absolute;
  background: #fff url(/skins/default/images/home/program/program_baseline_darkblue.png) no-repeat left top / 100% auto;
  width: 100%;
  height: 15px;
  top: -15px;
  left: 0px;
}

.view[page=dabisukids_guide] .section.area2 {
  position: relative;
  background-color: #4c5e96;
  margin-top: 20px;
  padding: 25px 40px;
  color: #fff;
}

.view[page=dabisukids_guide] .section.area2 .box {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 10px;
    margin: 20px 0px;
    color: #ffc600;
    font-size: 17px;
    line-height: 30px;
}

.view[page=dabisukids_guide] .section.area3 {
    position: relative;
    background-color: #4c5e96;
    padding: 25px 40px;
}


.view[page=dabisukids_guide] .concept-box {
  max-width: 800px;
  margin: auto;
  position: relative;
  margin-bottom: 25px;
}

.view[page=dabisukids_guide] .concept-box::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    top: 20px;
    right: 70px;
    background: url(/skins/default/images/dabisu/program_concept_ch01_top.png) no-repeat left top/contain;
    transform: rotate(-20deg);
    z-index: 1;
}

.view[page=dabisukids_guide] .concept-box::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    bottom: 30px;
    left: 50px;
    background: url(/skins/default/images/dabisu/program_concept_ch01_bottom.png) no-repeat left top/contain;
    z-index: 1;
}

.view[page=dabisukids_guide] .concept-box.concept-box-02::before {
    background-image: url(/skins/default/images/dabisu/program_concept_ch02_top.png);
}

.view[page=dabisukids_guide] .concept-box.concept-box-02::after {
    background-image: url(/skins/default/images/dabisu/program_concept_ch02_bottom.png);
}

.view[page=dabisukids_guide] .concept-box.concept-box-03::before {
    background-image: url(/skins/default/images/dabisu/program_concept_ch03_top.png);
}

.view[page=dabisukids_guide] .concept-box.concept-box-03::after {
    background-image: url(/skins/default/images/dabisu/program_concept_ch03_bottom.png);
}

.view[page=dabisukids_guide] .concept-box.concept-box-04::before {
    background-image: url(/skins/default/images/dabisu/program_concept_ch04_top.png);
}

.view[page=dabisukids_guide] .concept-box.concept-box-04::after {
    background-image: url(/skins/default/images/dabisu/program_concept_ch04_bottom.png);
}

.view[page=dabisukids_guide] .concept-box.concept-box-05::before {
    background-image: url(/skins/default/images/dabisu/program_concept_ch05_top.png);
}

.view[page=dabisukids_guide] .concept-box.concept-box-05::after {
    background-image: url(/skins/default/images/dabisu/program_concept_ch05_bottom.png);
}

.view[page=dabisukids_guide] .concept-desc {
  color: #fff;
  font-size: 15px;
  line-height: 30px;
}

.view[page=dabisukids_guide] .concept-box.concept-desc span {
  color: #ffe400;
  font-weight: 900;
}

.view[page=dabisukids_guide] .concept-box .box-header {
  position: relative;
  height: 73px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  overflow: hidden;
  background-color: #257ad2;
  text-shadow: 0 1px 2px #333;
}

.view[page=dabisukids_guide] .concept-box .box-header label {
    position: absolute;
    top: 5px;
    left: 20px;
    font-size: 40px;
    color: #fff;
    line-height: 73px;
}

.view[page=dabisukids_guide] .concept-box .box-header .box-header-title {
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  text-align: center;
  height: 73px;
  width: 100%;
  line-height: 73px;
  margin: 0;
}

.view[page=dabisukids_guide] .concept-box .box-header .label-concept {
  position: absolute;
  top: 0px;
  left: 0px;
}

.view[page=dabisukids_guide] .concept-box .box-body {
  background: #fff;
  padding: 30px 25px 140px;
  border-bottom: 4px solid #dadada;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
  position: relative;
  min-height: 250px;
}

.view[page=dabisukids_guide] .concept-box > .box-body::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100px;
    left: 0px;
    bottom: 0px;
    background: url(/skins/default/images/dabisu/program_concept_bottom_bg_01.png) repeat-x left top/contain;
}

.view[page=dabisukids_guide] .concept-box.concept-box-02 > .box-body::after {
    background-image: url(/skins/default/images/dabisu/program_concept_bottom_bg_02.png);
}

.view[page=dabisukids_guide] .concept-box.concept-box-03 > .box-body::after {
    background-image: url(/skins/default/images/dabisu/program_concept_bottom_bg_03.png);
}

.view[page=dabisukids_guide] .concept-box.concept-box-04 > .box-body::after {
    background-image: url(/skins/default/images/dabisu/program_concept_bottom_bg_04.png);
}

.view[page=dabisukids_guide] .concept-box.concept-box-05 > .box-body::after {
    background-image: url(/skins/default/images/dabisu/program_concept_bottom_bg_05.png);
}

.view[page=dabisukids_guide] .concept-box .box-body > figure {
  position: absolute;
  top: 60px;
}

.view[page=dabisukids_guide] .concept-box.concept-box-02 .box-body > figure {
}

.view[page=dabisukids_guide] .concept-box.concept-box-03 .box-body > figure {
  top: 30px;
}

.view[page=dabisukids_guide] .concept-box.concept-box-04 .box-body > figure {
}

.view[page=dabisukids_guide] .concept-box.concept-box-05 .box-body > figure {
  top: 80px;
}

.view[page=dabisukids_guide] .concept-box .box-body > p {
  border: 5px solid #eee;
  border-radius: 10px;
  margin-left: 250px;
  padding: 20px;
  font-size: 15px;
  line-height: 30px;
  color: #000;
}

.view[page=dabisukids_guide] .concept-box.concept-box-05 .box-body > p {
    margin-left: 350px;
}

.view[page=dabisukids_guide] .concept-box .box-body > .videobx {
    margin-left: 250px;
}

.view[page=dabisukids_guide] .concept-box.concept-box-05 .box-body > .videobx {
    margin-left: 350px;
}

.view[page=dabisukids_guide] .concept-box .box-body > .videobx video {
    width: 100%;
    object-fit: fill; 
}

.view[page=dabisukids_guide] .concept-box .box-body > p > img {
  margin: 0 auto;
}

.view[page=dabisukids_guide] .concept-box .box-header::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
  background: url(/skins/default/images/dabisu/program_concept_head_pattern_bg.png) top left repeat-x;
  background-size: 60%;
  opacity: .2;
}

.view[page=dabisukids_guide] .concept-box.concept-box-02 .box-header {
    background-color: #ffa6c1;
}

.view[page=dabisukids_guide] .concept-box.concept-box-03 .box-header {
    background-color: #b3e15a;
}

.view[page=dabisukids_guide] .concept-box.concept-box-04 .box-header {
    background-color: #eba6e3;
}

.view[page=dabisukids_guide] .concept-box.concept-box-05 .box-header {
    background-color: #ffcf41;
}

.view[page=dabisukids_guide] .section.top {
    background: #fff url(/skins/default/images/home/program/program_4grade.jpg) no-repeat left bottom/ auto 100%;
    padding: 10px 10px 50px 50%;
}

.view[page=dabisukids_guide] .section.top video {
    max-width: 100%;
}

.view[page=dabisukids_guide] .section.area21 {
    position: relative;
    background-color: #41af84;
    padding: 20px;
}

.view[page=dabisukids_guide] .section.area21::before {
    content: '';
    width: 100%;
    background-image: url(/skins/default/images/dabisu/program_baseline_green.png);
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    height: 38px;
    top: -38px;
    left: 0px;
}

.view[page=dabisukids_guide] .section.area21 .box .header {
    padding: 15px;
}

.view[page=dabisukids_guide] .section.area21 .box ul.figures {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.view[page=dabisukids_guide] .section.area21 .box ul.figures > li {
    float: left; 
    width: 20%;
    text-align: center;
    padding: 5px;
}

.view[page=dabisukids_guide] .section.area21 .box ul.figures > li figure {
    display: block;
    background: #fff;
    padding: 0;
    margin: 0;
    position: relative;
    width: 100%;
}

.view[page=dabisukids_guide] .section.area21 .box ul.figures > li figure label {
    display: block;
    color: #333;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    background: #eaeaea;
    padding: 15px 0px;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    border-bottom: 4px solid #d2d2d2;
}

.view[page=dabisukids_guide] .section.area21 .box ul.figures > li figure img {
    width: 100%;
    display: block;
    border: 4px solid #eaeaea;
    border-bottom-color: rgb(234, 234, 234);
    border-bottom-style: solid;
    border-bottom-width: 4px;
    border-bottom: 0px;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

.view[page=dabisukids_guide] .section.area21 .box .footer {
    position: relative;
    padding: 25px 50px 25px 150px;
    color: #333;
    font-size: 15px;
    line-height: 20px;
    font-weight: 300;
    background: #f8f8f8;
    border-top: 1px dashed #d2d2d2;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border-bottom: 5px solid #dadada;
}

.view[page=dabisukids_guide] .section.area21 .box .footer .label {
    position: absolute;
    top: 25px;
    left: 50px;
    font-size: 18px;
    color: #fff;
    padding: 8px 15px;
    border-radius: 14px;
}

.view[page=dabisukids_guide] .section.area21 .box:nth-child(1) > .header {
    background-image: url(/skins/default/images/home/program/program_box_header_1.jpg);
}

.view[page=dabisukids_guide] .section.area21 .box:nth-child(1) > .footer .label {
    background: #22644a;
}

.view[page=dabisukids_guide] .section.area21 .box:nth-child(2) > .header {
    background-image: url(/skins/default/images/home/program/program_box_header_2.jpg);
}

.view[page=dabisukids_guide] .section.area21 .box:nth-child(2) > .footer .label {
    background: #1a6c96;
}

.view[page=dabisukids_guide] .section.area21 .box:nth-child(3) > .header {
    background-image: url(/skins/default/images/home/program/program_box_header_3.jpg);
}

.view[page=dabisukids_guide] .section.area21 .box:nth-child(3) > .footer .label {
    background: #7a5e9a;
}

.view[page=dabisukids_guide] .section.area21 .box:nth-child(4) > .header {
    background-image: url(/skins/default/images/home/program/program_box_header_4.jpg);
}

.view[page=dabisukids_guide] .section.area21 .box:nth-child(4) > .footer .label {
    background: #e0a700;
}

/* hangeul guide page */

.view[page=hangeul_guide] ul.tabs {
    background-color: transparent;
}

.view[page=hangeul_guide] .tab-panels {
  background: #f3f3f3 url(/skins/default/images/hangeul/20190812_156.png) repeat-y left top / 100% auto;
}

.view[page=hangeul_guide] .tab-panels #intro > h3 {
    text-align: center;
    font-family: 'BinggraeBold';
    font-size: 24px;
    word-break: keep-all;
    color: #ee436b;
    line-height: 35px;
}

.view[page=hangeul_guide] .tab-panels > .panel {
    background-color: transparent;
}

.view[page=hangeul_guide] .section.area1 {
  background: url(/skins/default/images/hangeul/20190812_154.png) no-repeat left top 30px / auto 100%;
  padding-left: 40%;
  margin: 0px;
}

.view[page=hangeul_guide] .section.area11 > .wrap,
.view[page=hangeul_guide] .section.area21 > .wrap,
.view[page=hangeul_guide] .section.area1 > .wrap {
    background-color: rgba(247, 247, 247, 0.9);
    padding: 10px;
}

.view[page=hangeul_guide] .section.top h4 {
    margin: 15px 0;
}

.view[page=hangeul_guide] .section.top h4 > b {
    color: #ff7200;
}

.view[page=hangeul_guide] .section {
  position: relative;
  padding: 0px 20px;
}

.view[page=hangeul_guide] .section .box {
    border-radius: 20px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .1);
    overflow: hidden;
    background-color: #fff;
    margin-bottom: 30px;
}

.view[page=hangeul_guide] .section .box > h4 {
    font-family: 'BinggraeBold';
    color: #fff;
    font-size: 22px;
    margin: 0px;
    padding: 10px;
    background: #fff url(/skins/default/images/hangeul/20190812_158.png) repeat-x top left;
}

.view[page=hangeul_guide] .section .box > .body {
    padding: 20px;
}

.view[page=hangeul_guide] .box > .body img {
    max-width: 100%;
    width: 100%;
}

.view[page=hangeul_guide] .box > .body .desc {
    font-size: 15px;
}

.view[page=hangeul_guide] .section p {
    font-size: 15px;
    padding: 15px 0;
    margin: 0px;
    line-height: 22px;
}

.view[page=hangeul_guide] .section.area4 {
}

.view[page=hangeul_guide] .section.area4 .head {
    margin-bottom: 20px;
}

.view[page=hangeul_guide] .section.area4 .head img {
    vertical-align: bottom;
    margin-right: 20px;
}

.view[page=hangeul_guide] .section .body .card {
    padding: 15px;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 20px;
    min-height: 570px;
}

.view[page=hangeul_guide] .section .body .card > h5 {
    color: #000;
    font-family: 'BinggraeBold';
    font-size: 20px;
    line-height: 30px;
    margin: 10px 0;
}

.view[page=hangeul_guide] .section .body .card > p {
    font-size: 14px;
    line-height: 25px;
    margin: 10px 0;
}

.view[page=hangeul_guide] .section .body .card img {
    width: 100%;
}

.view[page=hangeul_guide] .section.area4 .body div:nth-child(1) > .card {
    background-color: #f6b4d1;
}

.view[page=hangeul_guide] .section.area4 .body div:nth-child(2) > .card {
    background-color: #f179ab;
}

.view[page=hangeul_guide] .section.area4 .body div:nth-child(3) > .card {
    background-color: #32beef;
}

.view[page=hangeul_guide] .section.area4 .body div:nth-child(4) > .card {
    background-color: #9adaf0;
}

.view[page=hangeul_guide] .section.area11 {
  background: url(/skins/default/images/hangeul/20190812_168.png) no-repeat left top 30px / auto 100%;
  padding-left: 40%;
  margin: 0px;
}

.view[page=hangeul_guide] .section.area21 {
  background: url(/skins/default/images/hangeul/20190812_176.png) no-repeat left top 30px / auto 100%;
  padding-left: 40%;
  margin: 0px;
}

.view[page=hangeul_guide] .section.area23 .card {
    min-height: 450px;
}

.view[page=hangeul_guide] .section .body .card .iwrap {
    height: 220px;
    position: relative;
}

.view[page=hangeul_guide] .section .body .card .iwrap > img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
}

.view[page=hangeul_guide] .section.area23 .body div:nth-child(1) > .card {
    background-color: #feede3;
}

.view[page=hangeul_guide] .section.area23 .body div:nth-child(2) > .card {
    background-color: #c5d0e9;
}

.view[page=hangeul_guide] .section.area23 .body div:nth-child(3) > .card {
    background-color: #d1ecec;
}

.view[page=hangeul_guide] .section.area23 .body div:nth-child(4) > .card {
    background-color: #e6dbec;
}

.view[page=hangeul_guide] .section.area23 .body div:nth-child(5) > .card {
    background-color: #ffeed2;
}

.view[page=hangeul_guide] .section.area23 .body div:nth-child(6) > .card {
    background-color: #d0e7c9;
}

/* gugudan page */

.view[page=gugudan] {
    background: url(/skins/default/images/gugudan/main_bg.jpg) no-repeat center center/cover;
}

.view[page=gugudan] .headerbar .btn-back  {
    width: 50px;
    height: 50px;
    display: inline-block;
    background: initial !important;
}

.view[page=gugudan] .headerbar .btn-back > span {
    display: none;
}

.view[page=gugudan] .headerbar .btn-back::before {
    content: '\f137';
    display: inline-block;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 45px;
    color: #fff;
    line-height: 100%;
    text-shadow: 2px 1px 2px #333;
    margin: 0px;
    vertical-align: middle;
}

.view[page=gugudan] .headerbar .hcenter {
    content: "";
    position: absolute;
    width: 270px;
    height: 80px;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    background: url(/skins/default/images/gugudan/title.png) no-repeat center top/contain;
}

.view[page=gugudan] .headerbar .menus {
    display: none;
}

.view[page=gugudan] .headerbar .btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    vertical-align: middle;
    overflow: hidden;
}

.view[page=gugudan] .headerbar .menu .btn {
    box-shadow: 0px 2px 3px #333;
}

.view[page^=gugudan] .headerbar .btn.btn-store {
    background-color: #ffc107;
    color: #fff;
    border-radius: 50%;
}

.view[page=gugudan] .headerbar .btn.btn-guide {
    background-color: #e76d59;
    color: #fff;
}

.view[page=gugudan] .headerbar .btn > i {
    line-height: 50px;
    text-shadow: 0 1px 3px #333;
}

.view[page=gugudan] .headerbar .btn > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.view[page=gugudan] .mainpanel .wrappanel {
    padding: 0px 20px 0px 60px;
    top: 55%;
    transform: translateY(-50%);
    overflow-x: initial;
    overflow-y: initial;
    height: initial;
}

.view[page=gugudan] .mainpanel .wrappanel .row,
.view[page=gugudan] .mainpanel .wrappanel .row > .col-xs-3 {
    height: 100%;
}

.view[page=gugudan] .mainpanel .box {
    position: relative;
    display: block;
    height: 0;
    padding-bottom: 100%;
    background: transparent url(/skins/default/images/gugudan/btn_menu_bg.png) no-repeat center center/contain;
}

.view[page=gugudan] .mainpanel .row.dans {
}

.view[page=gugudan] .mainpanel .row.dans .box::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -15%;
    transform: translateX(-50%);
    width: 70%;
    height: 80px;
}

.view[page=gugudan] .mainpanel .row.dans .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: 100px;
}

.view[page=gugudan] .mainpanel .row .box.menu2::before {
    background: transparent url(/skins/default/images/gugudan/btn_2dan.png) no-repeat center center/contain;
    width: 45%;
}

.view[page=gugudan] .mainpanel .row .box.menu3::before {
    background: transparent url(/skins/default/images/gugudan/btn_3dan.png) no-repeat center top/contain;
}

.view[page=gugudan] .mainpanel .row .box.menu4::before {
    background: transparent url(/skins/default/images/gugudan/btn_4dan.png) no-repeat center top/contain;
}

.view[page=gugudan] .mainpanel .row .box.menu5::before {
    background: transparent url(/skins/default/images/gugudan/btn_5dan.png) no-repeat center top/contain;
}

.view[page=gugudan] .mainpanel .row .box.menu6::before {
    background: transparent url(/skins/default/images/gugudan/btn_6dan.png) no-repeat center top/contain;
}

.view[page=gugudan] .mainpanel .row .box.menu7::before {
    background: transparent url(/skins/default/images/gugudan/btn_7dan.png) no-repeat center top/contain;
}

.view[page=gugudan] .mainpanel .row .box.menu8::before {
    background: transparent url(/skins/default/images/gugudan/btn_8dan.png) no-repeat center top/contain;
}

.view[page=gugudan] .mainpanel .row .box.menu9::before {
    background: transparent url(/skins/default/images/gugudan/btn_9dan.png) no-repeat center top/contain;
}

.view[page=gugudan] .mainpanel .box h5 {
    position: absolute;
    left: 50%;
    bottom: 35%;
    transform: translateX(-50%);
    padding: 5px 20px;
    font-family: 'Maple';
    color: #fff;
    font-size: 30px;
    margin: 0px;
    white-space: nowrap;
    text-shadow: -1px -1px 1px #5e231a;
    z-index: 1;
}

.view[page=gugudan] .mainpanel .box.game {
    background: transparent url(/skins/default/images/gugudan/btn_game.png) no-repeat center center/contain;
    display: inline-block;
    width: 80%;
    padding-top: 40%;
}

.view[page=gugudan] .mainpanel .box.game h5 {
    display: none;
}

.view[page=gugudan_lesson] {
    background: url(/skins/default/images/gugudan/lecture_bg.png) no-repeat center top/cover fixed;
}

.view[page=gugudan_lesson] .mainpanel {
    background: url(/skins/default/images/gugudan/track.png) repeat-x center bottom;
}

.view[page=gugudan_lesson] .mainpanel .activities {
    position: absolute;
    top: initial;
    transform: initial;
    bottom: 20px;
}

.view[page=gugudan_lesson] .mainpanel .activities .box {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 270px;
    border: none;
    margin: 0px;
    margin-left: 0px;
    cursor: pointer;
    overflow: initial;
}

.view[page=gugudan_lesson] .mainpanel .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;
}

.view[page=gugudan_lesson] .mainpanel .activities .box:last-child {
    margin-right: 25px;
}

.view[page=gugudan_lesson] .mainpanel .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;
}

.view[page=gugudan_lesson] .mainpanel .activities .box:first-child {
    width: 300px;
      margin-left: 10px;
}

.view[page=gugudan_lesson] .mainpanel .activities .box:first-child::after {
    background: url(/skins/default/images/gugudan/train01.png) no-repeat center bottom/contain;
}

.view[page=gugudan_lesson] .mainpanel .activities .activity {
    position: absolute;
    top: 37%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 60%;
    height: 40%;
    border-radius: 15px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.view[page=gugudan_lesson] .mainpanel .activities .box:first-child .activity {
    left: 63%;
    bottom: 22%;
    width: 40%;
}

.view[page=gugudan_lesson] .mainpanel .activities .activity .no {
    display: none;
}

.view[page=gugudan_lesson] .mainpanel .activities .activity .title {
    position: absolute;
    margin: 0px;
    width: 100%;
    line-height: 40px;
    height: 40px;
    left: 0px;
    bottom: 0px;
    text-align: center;
    font-family: "Maple";
    font-size: 22px;
    background-color: rgba(0, 0, 0, .7);
    color: #f9e3b0;
    text-shadow: 0 2px 2px #783e0a;
}

.view[page=gugudan_guide] {
    background: url(/skins/default/images/gugudan/setting_bg.png) no-repeat center center/cover;
}

.view[page=gugudan_guide] .headerbar .title {
    position: relative;
    top: 10px;
    font-family: "Maple";
    font-size: 27px;
    background-color: #c06712;
    color: #fff;
    border-radius: 20px;
    padding: 7px 35px;
    box-shadow: 0 1px 5px #333;
    text-shadow: 0 1px 1px #333;
}

.view[page=gugudan_guide] .headerbar .btn {
    color: #fff;
}

.view[page=gugudan_guide] .headerbar .btn-back {
    color: #fff;
}

.view[page=gugudan_guide] .headerbar .title::before {
    position: absolute;
    content: '';
    top: -20px;
    left: 20px;
    height: 100%;
    width: 3px;
    background-color: #ccc;
    z-index: -1;
}

.view[page=gugudan_guide] .headerbar .title::after {
    position: absolute;
    content: '';
    top: -20px;
    right: 20px;
    height: 100%;
    width: 3px;
    background-color: #ccc;
    z-index: -1;
}

.view[page=gugudan_guide] .mainpanel .activities.over {
    top: 47%;
}

.view[page=gugudan_guide] .mainpanel .activities .activity {
    background-image: url(/skins/default/images/gugudan/lesson_panel.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-color: transparent;
    box-shadow: initial;
    width: 25%;
    height: initial;
    border: none;
    position: relative;
}

.view[page=gugudan_guide] .mainpanel .activities .activity.video::after {
    top: 50%;
    left: 47%;
}

.view[page=gugudan_guide] .mainpanel .activities .activity::before {
    content: "";
    display: block;
    padding-bottom: 120%;
    height: 0;
}

.view[page=gugudan_guide] .mainpanel .activities .activity.box h5 {
    position: absolute;
    transform: translateX(-50%);
    top: 0px;
    bottom: initial;
    left: 50%;
    padding: 10px 20px;
    font-family: "Maple";
    font-size: 19px;
    margin: 0px;
    width: 100%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: transparent;
    text-shadow: 1px 2px 2px #481d0d;
}

.view[page=gugudan_guide] .mainpanel .activities .activity .thumb {
    width: 65%;
    height: 60%;
    position: absolute;
    top: 23%;
    left: 48%;
    transform: translateX(-50%);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0px 2px 5px #e7e1c2 inset;
}

.view[page=gugudan_game] {
    background: url(https://i.pinimg.com/564x/d3/48/34/d34834902cac91b3ddfd023c2b93548c.jpg) no-repeat bottom center/cover fixed;
}


/* dabisu */

.view[page=dabisu] {
    background: url(/skins/default/images/dabisu/footer_bg.png) no-repeat center bottom -25px / contain fixed, url(/skins/default/images/dabisu/main_bg.jpg) no-repeat center center / cover fixed;
}

.view[page=dabisu] .headerbar .menus {
    background-image: linear-gradient( 120deg, #AE58CD 10%, #661c6b 100%);
    box-shadow: 0 1px 3px #3c1b3e;
}

.view[page=dabisu] .headerbar .btn-back {
    color: #fff;
}

.view[page=dabisu] .headerbar .btn-store {
    color: #fff;
    text-shadow: 0 1px 3px #613325;
    font-size: 20px;
}

.view[page=dabisu] .headerbar .btn > i {
    line-height: 50px;
    text-shadow: 0 1px 3px #333;
}

.view[page=dabisu] .mainpanel .wrappanel .boxs {
    top: 43%;
}

.view[page=dabisu] .mainpanel .wrappanel .boxs .box {
    width: 27%;
    background-color: transparent;
    background-position: center top;
    background-size: contain;
    background-repeat: no-repeat;
}

.view[page=dabisu] .wrappanel .boxs .box.victory {
    background-image: url(/skins/default/images/dabisu/stage01.png);
}

.view[page=dabisu] .wrappanel .boxs .box.basic {
    background-image: url(/skins/default/images/dabisu/stage02.png);
}

.view[page=dabisu] .wrappanel .boxs .box.inter {
    background-image: url(/skins/default/images/dabisu/stage03.png);
}

.view[page=dabisu] .mainpanel .wrappanel .boxs .box::after {
    content: "";
    position: absolute;
    z-index: 3;
    left: 0px;
    bottom: 0px;
    width: 115%;
    height: 100px;
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
}

.view[page=dabisu] .mainpanel .wrappanel .boxs .box.victory::after {
    background-image: url(/skins/default/images/dabisu/stage01_link.png);
}

.view[page=dabisu] .mainpanel .wrappanel .boxs .box.basic::after {
    bottom: 5px;
    background-image: url(/skins/default/images/dabisu/stage02_link.png);
}

.view[page=dabisu] .mainpanel .wrappanel .boxs .box.inter::after {
    bottom: 5px;
    background-image: url(/skins/default/images/dabisu/stage03_link.png);
}

.view[page=dabisu] .mainpanel.coursepanel .wrappanel .boxs .box > h5 {
    color: #fff;
    text-shadow: 2px 1px 2px #333;
    top: 7%;
    transform: translateX(-50%);
    font-family: "Maple";
    font-size: 25px;
}

.view[page=dabisu] .mainpanel .footer .btn-guide {
    color: #fff;
    background: url(/skins/default/images/dabisu/btn_green_circle.png) no-repeat center center/contain;
}

.view[page=dabisu] .mainpanel .footer .btn-game {
    color: #fff;
    background: url(/skins/default/images/dabisu/btn_orange_circle.png) no-repeat center center/contain;
}

.view[page=dabisu] .mainpanel .footer .btn-tool {
    color: #fff;
    background: url(/skins/default/images/dabisu/btn_blue_circle.png) no-repeat center center/contain;
}

.view[page=dabisu] .mainpanel .footer > div {
    padding: 0px 28px 5px;
}

.view[page=dabisu] .mainpanel .footer > div .btn + .btn {
    margin-left: 38px;
}

.view[page=dabisu] .mainpanel .footer > div .btn > i {
    font-size: 25px;
    text-shadow: 0 1px 2px #333;
}

.view[page=dabisu] .mainpanel .footer .btn {
    width: 60px;
    height: 60px;
    line-height: 60px;
}

.view[page=dabisu] .mainpanel .footer .btn span {
    display: none;
}

.view[path$="step/448027"] {
    background: url(https://i.pinimg.com/564x/7a/0e/42/7a0e4217fe91f50dab1323a97dfa7a15.jpg) no-repeat center center/cover fixed;
}

.view[path$="step/448028"] {
    background: url(https://i.pinimg.com/564x/7a/0e/42/7a0e4217fe91f50dab1323a97dfa7a15.jpg) no-repeat center center/cover fixed;
}

.view[path$="step/449058"] {
    background: url(https://i.pinimg.com/564x/7a/0e/42/7a0e4217fe91f50dab1323a97dfa7a15.jpg) no-repeat center center/cover fixed;
}

/* ocymath */

.view[page=ocymath] {
    background: url(https://i.pinimg.com/564x/a6/5d/d2/a65dd21b1985ac68dfc630ffe24f5158.jpg) no-repeat top center /cover fixed;
}

.view .mainpanel.coursepanel .headerbar .btn-back {
    display: inline-block;
    background: url(/common/images/logo_dabischool_w.png) no-repeat center center/contain;
    width: 130px;
    height: 60px;
}

.view#ocymath .mainpanel .headerbar .btn:not(.btn-profile) {
    color: #fff;
    text-shadow: 0 1px 3px #333;
}

.view[page=ocymath] .footer {
}

.view[page=ocymath] .footer::before {
    content: '';
    position: absolute;
    width : 100%;
    height: 100%;
    top: 30px;
    left: 0px;
    background: #90614b url(https://i.pinimg.com/564x/1a/66/13/1a66136a1196753352d38c54febefd3c.jpg) no-repeat center top/cover;
    box-shadow: 0 -2px 5px #413a39;
}

.view[page=ocymath] .mainpanel .footer > div::before {
    background-color: transparent;
}

.view[page=ocymath] .mainpanel .footer .btn {
    color: #fff;
    text-shadow: 0 2px 5px #000;
}

.view[page=ocymath] .mainpanel .wrappanel .boxs.over {
    top: 42%;
}

.view[page=ocymath] .mainpanel .wrappanel .boxs.over > .box {
    width: 20%;
    border-radius: 10px;
}

.view[page=ocymath] .mainpanel .wrappanel .boxs.over > .box::before {
    padding-bottom: 120%;
}

.view[page=ocymath] .mainpanel .wrappanel .boxs.over > .box.lock::after {
    font-size: 30px;
    top: 10%;
    transform: translateX(-50%);
}

.view[page=ocymath] .mainpanel .wrappanel .boxs.over .status {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 15px;
    background-color: #222;
    color: #fff;
    border-radius: 5px;
}

.view[page=ocymath_lesson]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://i.pinimg.com/564x/b7/9d/4e/b79d4edef595d92680fb56f5d28248ac.jpg) no-repeat center center/cover fixed;
    /*background: url(https://i.pinimg.com/564x/dc/ce/81/dcce81fc6b45fe53e781bad434343486.jpg) no-repeat center center/cover fixed;*/
    /*background: url(https://i.pinimg.com/564x/15/b3/89/15b38966e55a9e650eefe8aef2f0a6a8.jpg) no-repeat center center/cover fixed;*/
    /*-webkit-filter: grayscale(.5);*/
    /*filter: grayscale(.5);*/
    /*opacity: .5;*/
}

.view[page=ocymath_lesson] .headerbar a {
    color: #fff;
}

.view[page=ocymath_lesson] .mainpanel .headerbar .hcenter .box.title {
    background: #b56153 url(https://i.pinimg.com/564x/d7/53/09/d753099aa21babfc63297f1582d4d3bf.jpg) no-repeat;
    padding: 10px 55px;
    box-shadow: 0 1px 5px #333;
}

.view[page=ocymath_lesson] .headerbar .btn-back {
    background: url(/common/images/logo_ocymath.jpg) no-repeat center center/contain;
    display: inline-block;
    width: 130px;
    margin-left: 20px;
}

.view[page=ocymath_lesson] .headerbar .btn-back::before {
    margin-left: -15px;
}

.view[page=ocymath_lesson] .headerbar .btn-back span {
    display: none;
}


/* hangeul */

.view[page=hangeul]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://i.pinimg.com/564x/43/01/95/4301958243f55a6036b1a0f14f54b467.jpg) no-repeat center center/cover;
    filter: grayscale(.5);
}

.view[page=hangeul] .headerbar .menus {
    background-color: #502c1bc7;
}

.view[page=hangeul] .headerbar .hright .btn:not(.btn-profile) {
    color: #613d37;
    text-shadow: 0 1px 3px #fff;
}

.view[page=hangeul] .mainpanel .footer > div::before {
    height: 50%;
    background-color: transparent;
}

.view[page=hangeul] .footer .btn {
    color: #613d37;
    text-shadow: 0 0 5px #fff;
}


.view[page=hangeul] .mainpanel.coursepanel .boxs.over > .box {
    background-color: #e3c49ca3;
    box-shadow: 0 1px 3px #555;
    border-radius: 30px;
    border: 3px solid #fff;
}

.view[page=hangeul] .mainpanel.coursepanel .boxs.over > .box:nth-child(2) {
    background-color: #edcc8db5;
}

.view[page=hangeul] .mainpanel.coursepanel .boxs.over > .box:nth-child(3) {
    background-color: #C3BFA3B5;
}

.view[page=hangeul] .mainpanel.coursepanel .boxs.over > .box::after {
    content: '';
    position: absolute;
    bottom: 0px;
    right: -20px;
    width: 100px;
    height: 130px;
    background: url(/skins/default/images/hangeul/hangul_char001.png) no-repeat center center/contain;
}

.view[page=hangeul] .mainpanel.coursepanel .boxs.over > .box:nth-child(2)::after {
    background: url(/skins/default/images/hangeul/hangul_char002.png) no-repeat center center/contain;
    width: 100px;
}

.view[page=hangeul] .mainpanel.coursepanel .boxs.over > .box:nth-child(3)::after {
    background: url(/skins/default/images/hangeul/hangul_char003.png) no-repeat center center/contain;
    width: 100px;
}

.view[page=hangeul] .mainpanel.coursepanel .boxs.over .box .info {
    top: 10%;
    transform: translateX(-50%);
    padding: 0px;
    z-index: 1;
}

.view[page=hangeul] .mainpanel .wrappanel .boxs.over .box .info h5 {
}

.view[page=hangeul] .mainpanel .wrappanel .boxs.over .box .info span {
    display: block;
    padding: 7px 20px;
    border-radius: 15px;
    background-color: rgba(255, 255, 255, .5);
    font-size: 15px;
    color: #000;
    text-shadow: none;
}


.view[page=hangeul_step] .headerbar .btn-back {
    background: url(/common/images/logo_hangeul.png) no-repeat center center/contain;
    display: inline-block;
    width: 90px;
    margin-left: 20px;
}

.view[page=hangeul_step] .headerbar .btn-back::before {
    color: #fff;
}

.view[page=hangeul_step] .headerbar .btn-back span {
    display: none;
}

.view[page="hangeul_step"] .mainpanel.steppanel .lessons .lesson {
    width: 170px;
    height: 170px;
}

.view[path$="/step/9822"] {
    background: url(https://i.pinimg.com/564x/bd/4d/fe/bd4dfeb7217ab848f37095c93ca3712a.jpg) no-repeat bottom center/cover fixed;
}

.view[path$="/step/9823"] {
    background: url(https://i.pinimg.com/564x/44/95/52/4495521cbcf1308d8beba605e34c230b.jpg) no-repeat bottom center/cover fixed;
}

.view[path$="/step/9824"] {
    background: url(https://i.pinimg.com/564x/18/b3/64/18b364303588b7b45d668ea4370af4ae.jpg) no-repeat top center/cover fixed;
}




/* store */

.view[name=store] {
}

.view[name=store] .mainpanel > .wrappanel {
    overflow: initial;
    padding: 15px;
}

.view[name=store] .wrappanel .banner {
  border-radius: 15px;
  color: #fff;
  position: relative;
  background-color: #b48aaf;
  margin: 0px 0px 30px;
  overflow: hidden;
  padding-left: 41%;
}

.view[name=store] .wrappanel .banner::before {
    content: '';
    position: absolute;
    width: 40%;
    height: 100%;
    left: 0px;
    background: url(/skins/default/images/dcode/dcode_bg.png) no-repeat right bottom / auto 90%;
}

.view[name=store] .wrappanel .banner .info {
    padding: 20px 0px;
}

.view[name=store] .wrappanel .banner .info > h5 {
  font-size: 15px;
}

.view[name=store] .wrappanel .banner .info > .desc {
  font-size: 15px;
  margin: 15px 0;
  line-height: 22px;
}

.view[name=store] .wrappanel .banner .info > .desc > b{
  color: #ffe300;
}

.view[name=store] .wrappanel .banner .info > p {
  font-size: 13px;
  margin: 0px;
  line-height: 22px;
}

.view[name=store] .wrappanel .banner .info > p .dc {
  text-decoration: line-through;
}

.view[name=store] .wrappanel .banner .info > p .price {
  font-weight: 600;
}

.view[name=store] .wrappanel .banner .info > .btn {
  background-color: #f9c15a;
  color: #fff;
  padding: 5px 20px;
  border-radius: 15px;
  margin-top: 15px;
  font-weight: 600;
}

.view[name=store] .wrappanel .courses {
}

.view[name=store] .wrappanel .courses .course {
  margin-bottom: 10px;
  margin-left: 0px;
  margin-right: 0px;
  border-bottom: 1px solid #ddd;
}

.view[name=store] .wrappanel .course > div {
  position: relative;
  font-size: 11px;
  padding-left: 5px;
  padding-right: 5px;
}

.view[name=store] .wrappanel .course .logo {
  display: inline-block;
  width: 80px;
  position: absolute;
  margin: 10px;
}

.view[name=store] .wrappanel .course .info {
  padding-left: 120px;
}

.view[name=store] .wrappanel .course .info > h5 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
}

.view[name=store] .wrappanel .course .info > p {
}

.view[name=store] .wrappanel .course .price {
  text-align: center;
  line-height: 40px;
  font-size: 13px;
}

.view[name=store] .wrappanel .course .btn {
  margin-top: 5px;
  background-color: #f69079;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
}

.view[name=store] .wrappanel h2 {
  font-weight: 600;
  font-size: 17px;
  margin: 20px 0px;
}

.view[name=store] .wrappanel .products {
  margin: 15px 0px;
}

.view[name=store] .wrappanel .product {
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, .9);
  margin-bottom: 15px;
  height: 150px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.view[name=store] .wrappanel .product h5 {
  font-size: 12px;
  font-weight: 600;
  margin: 0px;
  padding: 5px;
  background-color: rgba(173, 98, 168, 0.89);
  color: #fff;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.view[name=store] .wrappanel .product .price {
  border-radius: 20px;
  background-color: #fff;
  color: red;
  border: 1px solid #ddd;
  font-size: 13px;
  padding: 5px 10px;
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.view[name=store] .wrappanel .product .price strike {
    color: #777;
    font-size: 90%;
    margin-right: 5px;
    text-decoration-color: #fb3f3f;
}

/* user profile page */

.view[name=user_profile] .wrappanel {
}

.view[name=user_profile] .frmUser {
    padding: 20px 40px;
}

.view[name=user_profile] .picbx {
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    background-color: #EFEFEF;
    margin-top: 50px;
    box-shadow: 1px 1px 1px #aaa;
}

.view[name=user_profile] .picbx > .label {
    display: inline-block;
    font-family: "NexonBold";
    font-size: 22px;
    text-shadow: 0 1px 3px #000;
    opacity: .8;
}

.view[name=user_profile] .form-horizontal .control-label {
    padding-top: 9px;
}

body form .btn-check,
body form .btn-radio {
    background-color: #fff;
    border-radius: 25px;
    padding-left: 30px;
    padding-right: 30px;
    margin-right: 15px;
    border: 1px solid #ccc;
}

body form .btn-check.active,
body form .btn-radio.active {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}

body form .desc {
    font-weight: 300;
}

/* event page */

.view[name=school_event] .eventpanel .headerbar .title {
    font-size: 22px;
    font-weight: normal;
}

.view[name=school_event] .mainpanel .wrappanel .events {
    text-align: initial;
    padding: 0 25px;
}

.view[name=school_event] .mainpanel .wrappanel .events .event {
    display: inline-block;
    width: 220px;
    vertical-align: top;
    background-color: #fff;
    border: 1px solid #eee;
    padding: 5px;
    margin: 0px;
}

.view[name=school_event] .mainpanel .wrappanel .events .event.end .thumb {
    filter: grayscale(.85);
    -webkit-filter: grayscale(.85);
}

.view[name=school_event] .mainpanel .wrappanel .events .event.end::before {
    content: '종료';
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 15px;
    border-radius: 10px;
    background-color: #333;
    color: #fff;
    z-index: 1;
}

.view[name=school_event] .mainpanel .wrappanel .events .event + .event {
    margin-left: 20px;
}

.view[name=school_event] .events .event .thumb {
    padding-bottom: 110%;
    background-color: #F9F9F9;
    border-radius: 10px;
}

.view[name=school_event] .events .event .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 15px;
    margin: 10px 0 5px;
}

.view[name=school_event] .events .event .period {
    font-size: 13px;
    font-weight: 300;
}

.view[name=school_event] .events .event .prop {
}

.view[name=school_event] .eventpanel .article {
    padding: 0 10px 20px;
}

.view[name=school_event] .eventpanel .article h5 {
    font-size: 22px;
}

.view[name=school_event] .eventpanel .article .prop {
    font-weight: 300;
    margin-bottom: 10px;
    background-color: #F9F9F9;
    padding: 10px 5px;
}

/* user order */

.view[page=order] .wrappanel {
    padding: 5px 10px;
}

.view[page=order] .wrappanel .wraplst {
}

table.base {
    font-size: 15px;
    font-weight: 300;
}

table.base thead tr th {
    text-align: center;
    background-color: #ea6153;
    color: #fff;
}

.view[page=order] table.base thead tr th {
    background-color: #ea6153;
}

.view[page=order] nav .pagination > li.active > a {
    background-color: #ea6153;
}

.view[page=order] .invoice-box {
    padding: 20px;
    background-color: #fff;
    margin: 0 20px 20px;
    border: 1px solid #eee;
    font-size: 15px;
    font-weight: 300;
    line-height: 22px;
}

.view[page=order] .invoice-box > h4 {
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    padding: 5px 30px;
    margin-left: -30px;
    color: #fff;
    background-color: #f95161;
    box-shadow: 1px 1px 2px #999;
}

.view[page=order] .invoice-box .row label {
    margin: 15px 0px 5px;
    width: 100%;
    padding: 5px 0;
    border-bottom: 2px solid #555;
}

.view[page=order] .invoice-box .prodinfo {
    position: relative;
}

.view[page=order] .invoice-box .prodinfo .thumb {
    display: inline-block;
    max-width: 100px;
    min-height: 100px;
    margin-right: 10px;
}

.view[page=order] .invoice-box .prodinfo .info {
    display: inline-block;
    margin-left: 0px;
    position: relative;
}

.view[page=order] .invoice-box .prodinfo .info .cate {
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 11px;
    color: #fff;
}

.view[page=order] .invoice-box .prodinfo .info .title {
    color: #000;
    margin: 0;
}

.view[page=order] .invoice-box .bxbill {
    text-align: right;
    margin-top: 20px;
}

.view[page=order] .invoice-box .bxbill .wrapbill {
    width: 250px;
    float: right;
}

.view[page=order] .invoice-box .bxbill .wrapbill > div {
    line-height: 30px;
    padding: 5px 10px;
}

.view[page=order] .invoice-box .bxbill .wrapbill > div > label {
    margin: 0px;
}

.view[page=order] .invoice-box .bxbill .wrapbill > div > span {
    display: inline-block;
    width: 150px;
    margin-left: 20px;
    text-align: right;
}

.view[page=order] .invoice-box .bxbill .wrapbill > .total {
    border-top: 2px solid #333;
}

.view[page=order] .invoice-box .bxbill .wrapbill > .total > span {
    font-weight: 800;
    font-size: 22px;
    color: red;
}

.view[page=order] table {
    font-size: 15px;
    font-weight: 300;
    margin: 0px;
}

/* user notice */

.boardpanel .headerbar .title {
    font-size: 22px;
    font-weight: normal;
}

.boardpanel .wrappanel {
    padding: 5px 10px;
}

.boardpanel .wrappanel .article .title {
    border-bottom: 2px solid #000;
    padding: 10px 0;
    margin: 0;
}

.boardpanel .wrappanel .article .prop {
    background-color: #F9F9F9;
    margin-bottom: 10px;
    padding: 10px 5px;
}

/* user setting page */

.view[name=user_setting] .wrappanel {
}

.view[name=user_setting] form {
    padding: 20px 25px;
    font-size: 15px;
    background-color: #F9F9F9;
    border-radius: 15px;
    margin: 0 auto;
    min-width: 600px;
    width: 70%;
    box-shadow: 1px 1px 5px #ccc;
}

.view[name=user_setting] form .control-label {
    padding-top: calc(.375rem + 1px);
    padding-bottom: calc(.375rem + 1px);
    margin-bottom: 0;
    line-height: 1.5;
}

.view[name=user_setting] .udate {
    font-weight: 300;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}


/* Validate Adult Popup */

body.bgon .validAdult {
    display: block;
}

.validAdult {
    display: none;
    z-index: 201;
    width: 90%;
    height: 90%;
    transform: translate(-50%, -50%);
    position: fixed;
    top: 50%;
    left: 50%;
    max-width: 500px;
    max-height: 300px;
    color: #fff;
    font-family: "Maple";
}

.validAdult .wrap {
    border-radius: 15px;
    background-color: #f9c958;
    text-shadow: 1px 1px 1px #000;
    box-shadow: 0 0 5px #000;
    height: 100%;
}

.validAdult.incorrect .wrap{
    animation: shake 0.82s both;
}

.validAdult .wrap .btnClose{
    position: absolute;
    top: -7px;
    right: -7px;
    z-index: 1;
    color: #ff7633;
    font-size: 20px;
    text-shadow: none;
}

.validAdult .info {
    position: absolute;
    width: 50%;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}

.validAdult .info p {
    font-family: "MapleLight";
}

.validAdult .btns {
    margin-left: 50%;
    height: 100%;
    position: relative;
}

.validAdult .btns > .bx {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    padding-right: 10%;
}

.validAdult .btns .row {
    text-align: center;
    display: block;
    margin: 0px;
}

.validAdult .btns .row .btn {
    display: inline-block;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 100%;
    font-size: 30px;
    border-radius: 50%;
    box-shadow: 0px -1px 1px #000; 
    margin: 5px;
    background-color: #000;
    color: #fff;
}

.validAdult .info .qt {
    width: 70%;
    margin: 0 auto;
    font-size: 25px;
    padding: 5px 10px;
    background-color: #000;
}

.validAdult .info .qt > i,
.validAdult .info .qt > span {
    display: inline-block;
    margin: 0 5px;
}

.validAdult .info .an {
    position: relative;
    margin-top: 5px;
}

.validAdult .info .an .no {
    width: 40px;
    height: 50px;
    border-bottom: 2px solid #000;
    margin-right: 5px;
    display: inline-block;
    font-size: 30px;
    line-height: 60px;
    vertical-align: text-bottom;
}

.validAdult .info .an .btnDel {
    margin-top: -10px;
    padding: 0px;
    color: #fff;
}

/***  product  ***/

.view[page=product] {
}

.view[page=product] .wrappanel {
    padding: 10px 20px 20px;
}

.productpanel .prodinfo {
    font-size: 13px;
    background-color: #fff;
    padding: 20px;
    margin: 0 -20px;
    /*box-shadow: 1px 2px 3px #aaa;*/
    border-bottom: 1px solid #eee;
}

.productpanel .prodinfo .title {
    font-size: 22px;
    font-weight: 800;
}

.productpanel .prodinfo .pic {
    width: 90%;
    padding-bottom: 50%;
}

.productpanel .prodinfo .pricebx {
}

.productpanel .prodinfo .pricebx .drate {
    display: inline-block;
    color: #f44336;
    font-size: 35px;
    font-weight: 600;
    margin-right: 10px;
}

.productpanel .prodinfo .pricebx .drate > span {
    line-height: 100%;
}

.productpanel .prodinfo .pricebx .dprice {
    font-size: 17px;
    font-weight: 700;
}

.productpanel .prodinfo .pricebx .price {
    font-size: 13px;
    text-decoration: line-through;
    color: #aaa;
    display: inline-block;
}

.productpanel .prodinfo .cntbx {
}

.productpanel .prodinfo .stock {
    margin-bottom: 10px;
}

.productpanel .prodinfo .shipbx {
    padding: 10px 0;
}

.productpanel .prodinfo .totalbx {
    text-align: right;
    padding: 10px 0;
}

.productpanel .prodinfo .totalbx .price {
    font-size: 25px;
    font-weight: 800;
    font-family: "Apple SD Gothic Neo";
    margin-left: 20px;
}

.productpanel .proddetail > .desc {
    position: relative;
    min-height: 100px;
}

.productpanel .proddetail > .desc .proddesc article img {
    width: 100%;
}

.productpanel .proddetail .tabs {
    margin-top: 20px;
    border-bottom: 2px solid #333;
    background-color: transparent;
    text-align: left;
}

.productpanel .proddetail .tabs > .tab {
    font-size: 17px;
    font-weight: bold;
}

.productpanel .return > h4 {
    margin-top: 20px;
    border-bottom: 2px solid #333;
    background-color: transparent;
    text-align: left;
}

.productpanel .return .desc {
    line-height: 22px;
}

.productpanel .return .desc ul {
    padding: 0px 15px;
}

.productpanel .return .desc li {
    margin-top: 10px;
}

/***  checkout  ***/

.view[page=checkout] .wrappanel {
    padding: 0 30px 30px;
}

.checkoutpanel form .col-form-label {
    text-align: right;
}

.checkoutpanel form .sumprice {
    text-align: right;
    padding: 0 15px;
    font-size: 17px;
}

.checkoutpanel form .sumprice label {
    margin: 0px;
}

.checkoutpanel form .sumprice .prodprice {
    font-weight: 800;
    margin-left: 50px;
}

.checkoutpanel form > .title {
    font-size: 17px;
    font-weight: 800;
    padding: 10px 0;
}

.checkoutpanel form > .title:not(:first-child) {
    border-top: 1px dashed #777;
    margin-top: 20px;
}

.checkoutpanel form .bxTotal {
    text-align: right;
    border-top: 1px dashed #777;
    font-size: 23px;
    line-height: 33px;
    margin: 20px 0;
    padding: 20px 10px 5px;
}

.checkoutpanel .lstProd {
    padding: 0 15px;
}

.checkoutpanel .lstProd .prod {
    position: relative;
    padding: 10px 0px;
    margin-bottom: 0px;
}

.checkoutpanel .lstProd .prod .pic {
    float: left;
    width: 80px;
    min-height: 100px;
    text-align: center;
}

.checkoutpanel .lstProd .prod .thumb {
    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);
}

.checkoutpanel .lstProd .prod .info {
    margin-left: 100px;
}

.checkoutpanel .lstProd .prod .info .name {
    font-size: 17px;
    margin: 5px 0px;
}

.checkoutpanel .lstProd .prod .info .desc {
    line-height: 30px;
}

.checkoutpanel .lstProd .prod .info .option {
    line-height: 30px;
}

.checkoutpanel .lstProd .prod .info .amount {
    position: relative;
    line-height: 30px;
}

.checkoutpanel .lstProd .prod .info .price {
    position: absolute;
    bottom: 10px;
    right: 10px;
    line-height: 30px;
    font-weight: bold;
}

.checkoutpanel .btn-payment {
    border-radius: 25px;
    padding-left: 20px;
    padding-right: 20px;
}


/***  history  ***/

.view .historypanel .activities.over {
    padding-top: 30px;
    width: 100%;
}

.historypanel .activities::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 1px;
    background-color: #ccc;
}

.historypanel .activities > .wrap {
    display: inline-block;
    position: relative;
}

.historypanel .activities > .wrap::before {
    content: attr(title);
    position: absolute;
    top: -40px;
    left: 0px;
    padding: 3px 20px;
    border-radius: 20px;
    background-color: #000;
    color: #fff;
}

.historypanel .activities > .wrap + .wrap {
    margin-left: 30px;
}

.historypanel .activities .activity {
    display: inline-block;
    width: 200px;
    min-height: 200px;
    border: 1px solid #ddd;
    border-radius: 10px;
    vertical-align: top;
    box-shadow: 0 1px 8px #ccc;
}

.historypanel .activities .activity + .activity {
    margin-left: 10px;
}

.view .mainpanel.historypanel .activity::after {
    top: 35%;
}

.historypanel .activities .activity .thumb {
    padding-bottom: 80%;
    background-color: #f9f9f9;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.historypanel .activities .activity .info {
    padding: 0 5px 5px;
}

.historypanel .activities .activity .info h5 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.historypanel .activities .activity .info .date {
    font-size: 13px;
    font-weight: 300;
}

/***  mentor  ***/

.view .mentorpanel {
}

.view .mentorpanel .filter {
    padding: 0 20px;
}

.view .mentorpanel .tutors.over {
    padding: 0 20px;
}

.view .mentorpanel .tutor {
    display: inline-block;
    position: relative;
    min-width: 170px;
    min-height: 250px;
    border: 1px solid #eee;
    border-radius: 10px;
    vertical-align: top;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 1px 3px #ccc;
}

.view .mentorpanel .tutor + .tutor {
    margin-left: 10px;
}

.view .mentorpanel .tutor::before {
    position: absolute;
    top: 10px;
    left: 5px;
    z-index: 1;
    color: #fff;
    background-color: #a54fbc;
    border-radius: 20px;
    padding: 5px 10px;
}

.view .mentorpanel .tutor[data-type=학원]::before {
    content: '학원';
}

.view .mentorpanel .tutor[data-type=교습소]::before {
    content: '교습소';
}

.view .mentorpanel .tutor[data-type=방문]::before {
    content: '방문';
}

.view .mentorpanel .tutor .pic {
    position: relative;
    display: inline-block;
    margin: 10px auto;
    background-color: #eee;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.view .mentorpanel .tutor.valid .pic::before {
    content: '\f5a2';
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 27px;
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: 2;
}

.view .mentorpanel .tutor .info {
}

.view .mentorpanel .tutor .info h5 {
    font-size: 17px;
}

.view .mentorpanel .tutor .info > span {
    display: block;
    font-weight: 300;
    padding: 3px;
}

.view .mentorpanel .tutor .info .organ {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.view .mentorpanel .tutor .info .rate {
    display: block;
}

.view .mentorpanel .tutor .info .tags {
    margin-top: 10px;
}

/***  tutor  ***/

.view .tutorpanel {
}

.view .tutorpanel .wrappanel {
    padding: 0 10px;
}

.view .tutorpanel .smrybrd {
    height: calc(100vh - 70px);
    background-color: #F9F9F9;
    border-radius: 10px;
    text-align: center;
    padding: 20px 30px;
    position: fixed;
    width: 330px;
}

.view .tutorpanel .smrybrd .pic {
    position: relative;
    display: inline-block;
    background-color: #eee;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.view .tutorpanel .smrybrd .smry {
    border-top: 1px solid #ddd;
    margin-top: 15px;
    padding-top: 5px;
}

.view .tutorpanel .smrybrd .smry .title {
    font-size: 13px;
}

.view .tutorpanel .smrybrd .smry .score {
    display: block;
    font-size: 22px;
}

.view .tutorpanel .propbrd {
    margin-left: 340px;
}

.view .tutorpanel .propbrd .desc {
    line-height: 22px;
    font-weight: 300;
    padding: 10px 0;
}

.view .tutorpanel .propbrd h5 {
}

.view .tutorpanel .propbrd .tags {
    padding: 0 0 5px;
}

.view .tutorpanel .propbrd .tags .tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 15px;
    background-color: #ff0078;
    color: #fff;
    margin-bottom: 5px;
    font-size: 13px;
}

.view .tutorpanel .propbrd .tags .tag + .tag {
    margin-left: 5px;
}

.view .tutorpanel .propbrd .info {
    font-weight: 300;
    font-size: 15px;
}

/***  review  ***/

.view[name=tutor_review] .top {
    padding: 5px 0;
    border-bottom: 1px solid #ccc;
    margin: 0 0 10px;
}

.view[name=tutor_review] .reviews {
}

.view[name=tutor_review] .review {
    position: relative;
}

.view[name=tutor_review] .review .pic {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    float: left;
    margin-left: 25px;
}

.view[name=tutor_review] .review .body {
    padding-left: 100px;
}

.view[name=tutor_review] .review .body .prop {
    padding: 5px 0;
}

.view[name=tutor_review] .review .body .msg {
}

/***  video player  ***/

.mainpanel.videopanel .headerbar {
    display: none;
    background: linear-gradient(#000000bf, #0000);
}

.mainpanel.videopanel:hover .headerbar {
    display: block;
}

.mainpanel.videopanel .headerbar .btn-back {
    display: inline-block;
    color: #fff;
    line-height: 60px;
}

.mainpanel.videopanel .headerbar .btn-back::before {
    content: '\f137';
    font-size: 33px;
    line-height: 30px;
    vertical-align: middle;
}

/***  mission player  ***/

.body_game {
    background-color: #000;
}

.gameview .mainpanel {
    padding-top: 0px;
}

.gameview .viewcontent {
    height: 100vh;
}

.gameview .viewcontent .wrap_mission {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/***  payment  ***/

#popup-payment {}

#popup-payment .modal-body {
    padding: 0px;
}

#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 screen and (max-width: 1388px) {
}

@media screen and (min-width: 1200px) {
}

@media screen and (max-width: 1024px) {
}

@media screen and (min-width: 1024px) {
}

@media screen and (max-width: 980px) {
}

@media screen and (max-width: 980px) and (orientation: landscape) {
    .signinpanel {
        width: 300px;
    }

    body[module=school] .signinpanel .logopanel {
    }

    body[module=school] .signinpanel::before {
    }

    body[module=school] .signinpanel form {
        padding: 10px 20px;
    }

    .signinpanel .form-control {
        margin-top: 10px;
    }
}

@media screen and (max-width: 768px) {
}

@media screen and (max-width: 640px) {
}

@media screen and (max-width: 480px) {
}

@media screen and (max-width: 360px) {
}

@media screen and (max-width: 768px) and (orientation: landscape) {
    .view[page=gugudan] .headerbar .hcenter {
        width: 250px;
    }

    .view[page=gugudan] .mainpanel .wrappanel {
        padding: 0px 10px 0px 30px;
    }
}