@charset "utf-8";

@import url('fontawesome.min.css');

@font-face {
  font-family:"CookieRunB";
  font-style: normal;
  font-weight: 500;
  src: url('../webfonts/cookierun_bold.woff') format('woff'),
  url('../webfonts/cookierun_bold.woff2') format('woff2');
}

@font-face {
  font-family:"Binggrae";
  font-style: normal;
  src: url('../webfonts/Binggrae.woff') format('woff');
}

@font-face {
  font-family:"BinggraeBold";
  font-style: normal;
  src: url('../webfonts/Binggrae_Bold.woff') format('woff');
}

@font-face {
  font-family:"MapleBold";
  font-style: normal;
  src: url('../webfonts/MapleBold.woff') format('woff');
}

@font-face {
  font-family:"Jua";
  font-style: normal;
  font-weight: 500;
  src: url('../webfonts/BMJUA.woff') format('woff');
}

@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

html,body {
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

html {
  height: 100%;
}

body {
  height: 100%;
  font-family: CookieRunB, "Noto Sans KR", "Apple SD Gothic Neo", 나눔고딕, NanumGothic, "맑은 고딕", "Malgun Gothic" !important;
  line-height: 17px;
  color: #59595a;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none;
}

/* common */

* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
a { -webkit-user-select: none !important; text-decoration: none !important; }

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

h1,h2,h3,h4,h5 {
}

button:focus {outline:0 !important}

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

.hide {
    display: none;
}

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

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

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

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

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

.bg-green {
  background-color: #3CB371;
}

.bg-coral {
  background-color: #F080BA;
}

.bg-yellow {
  background-color: #f7b12f;
}

.bg-blue {
  background-color: #6495ED;
}

.bg-violet {
  background-color: #673ab7;
}

.bg-red {
    background-color: #CD5C5C;
}

.bg-black {
    background-color: #a0a0a0;
}

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

.ml10 {
  margin-left: 10px;
}

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

.tright {
  text-align: right;
}

.w100 {
    width: 100px !important;
}

.w50 {
    width: 50px !important;
}

.wp100 {
    width: 100%;
}

.w300 {
    width: 300px !important;
}

.disabled {
    pointer-events: none;
    cursor: default;
    opacity: .6;
}

.modal {
    font-family: "NanumSquare";
    text-align: center;
}

.modal::before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
    margin-right: -4px;
}

.modal .modal-dialog {
    max-width: 550px;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    position: relative;
}

.modal .close {
    font-size: 180%;
}

.modal-body.zip {
    min-width: 550px;
}

.mloading {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.3);
  -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
  transition: opacity 0.5s, visibility 0s 0.5s;
}

.mloading .infobx {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 13px;
  color: #fbed7a;
  text-shadow: 1px 1px 1px #000;
}

/* pagination */

nav .pagination {
    display: inline-block;
    margin: 0px;
}

nav .pagination.mlm45 {
    margin-left: -45px;
}

nav .pagination > li {
    display: inline-block;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
}

nav .pagination > li.disabled {
    color: #aaa;
}

nav .pagination > li > a {
    position: relative;
    display: inline-block;
    color: #2c3e50;
    text-decoration: none;
    font-size: 1.2rem;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

nav .pagination > li.active > a {
    color: #fff;
    background-color: #ea2d7c;
    scale(1.2);
}

/* form */

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

/* suggestion */
.suggestions {
  background-color: #FFF;
  border: 1px solid #ddd;
}

.suggestions .item {
  padding: 5px;
  margin: 3px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: auto !important;
  font-size: 12px;
  position: relative;
  cursor: pointer;
  color: #333;
}

.suggestions .item span {
  display: inline-block;
  min-width: 100px;
}

.suggestions .current {
  background-color: #EFEFEF;
}

.lstItems > .item {
  background-color: #f1f6ff;
  border: 2px solid #93b7f6;
  line-height: 20px;
  font-size: 12px;
  overflow: hidden;
  position: relative;
  padding: 5px 25px 5px 15px;
  margin: 5px 0;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "Binggrae";
}

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


/* layout */

.headerbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px;
  z-index: 100;
  opacity: 0.98;
  line-height: 3.2em;
  font-size: 25px;
}

.fixon:not(.body_login) .headerbar {
  background-color: rgba(0, 0, 0, .3);
}

.fixon .headerbar .btn-guide,
.fixon .headerbar .btn-notice,
.fixon .headerbar .title {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.headerbar > .header-left {
  height: 100%;
  padding-left: 20px;
}

.headerbar > .header-right {
  position: absolute;
  top: 0px;
  right: 20px;
  height: 100%;
  z-index: 1;
}

.headerbar a {
  vertical-align: middle;
  display: inline-block;
  margin-top: 7px;
  margin-right: 10px;
  color: #333;
}

.headerbar .btn-menu {
}

.img-circle {
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  width: 100%;
}

body > .body {
  height: 100%;
  -webkit-transition: width 300ms;
  -moz-transition: width 300ms;
  -o-transition: width 300ms;
  transition: width 300ms;
}

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

.side > .wrap {
  width: 360px;
  height: 100%;
  overflow-y: auto;
  font-family: 'Binggrae';
}

.side.right {
  right: 0;
}

.mnu-expand .side {
  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;
}

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

body.popup > .validAdult {
  display: block;
}

.headerbar .btn-notice {
  position: relative;
  margin-top: 7px;
}

.body_main .headerbar .btn {
    color: #fff;
    text-shadow: 0 2px 3px #333;
    font-size: 40px;
    padding: 0;
    margin: 10px 0 0;
}

.body_main .headerbar .btn > i {
}

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

.headerbar .btn-notice > span {
  position: absolute;
  top: -7px;
  right: -7px;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ef5382;
  color: #fff;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
}

.headerbar .pic {
    display: inline-block;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: #eee;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* side menu */

.side .profile {
  overflow: hidden;
  position: relative;
  padding: 15px;
  background: #F9F9F9 url(../images/side_headerbg.jpg) no-repeat center top / 230% auto;
  color: #fff;
  /*
  box-shadow: 0 3px 5px rgba(0,0,0,0.1);
  */
}

.side .profile > .pic {
  float: left;
  /*box-shadow: 2px 3px 5px rgba(0,0,0,0.5);*/
  border: 2px solid #fff;
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #fff;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.side .profile > .info {
  margin-left: 70px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.side .profile > .info > .name {
  font-size: 17px;
  margin: 15px 0 0;
}

.side .profile > .info > .organ {
  font-size: 14px;
}

.side .profile .btn-auth {
  position: absolute;
  right: 15px;
  top: 35px;
  padding: 5px 20px;
  border-radius: 20px;
  border: 3px solid #aa7ab9;
  /*background-color: rgba(255, 255, 255, .9);*/
  background-color: #fff;
  color: #9346ab;
}

.side .mnu {
}

.side .mnu > li:first-child {
}

.side .mnu > li > a {
  color: #333;
  display: block;
  padding: 15px 10px;
  width: 100%;
  position: relative;
  font-size: 13px;
}

.side .mnu > li > a:hover {
  text-decoration: none;
}

.side .mnu > li.active {
  background-color: #335c92;
}

.side .mnu > li > a > i:first-child {
  display: inline-block;
  text-align: center;
  width: 40px;
}

.side .mnu > li > a > i:last-child {
  position: absolute;
  right: 20px;
  line-height: 25px;
}

.side .mnus {
  margin-right: 0px;
  margin-left: 0px;
  padding: 10px;
}

.side .mnus > div {
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
}

.side .mnus a {
  color: #333;
  display: block;
  border: 1px solid #eee;
  border-radius: 5px;
  padding: 15px 0px;
  margin-bottom: 10px;
  text-decoration: none;
  background-color: #F9F9F9;
  box-shadow: 1px 1px 1px #d4c8d8;
}

.side .mnus a > span {
  display: block;
  font-size: 12px;
  color: #777;
}

.side .mnus a > i {
  display: inline-block;
  margin-bottom: 5px;
  font-size: 25px;
  color: #b57bb4;
}


/* The slider */
.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%;
}

/* login */

.body_login {
  /*
   background: url(../images/20190812_143.png) no-repeat left bottom, url(../images/20190812_144.png) no-repeat right bottom, url(../images/20190812_142.png) no-repeat right top, url(../images/20190812_141.png) no-repeat left top;
  background-size: 30%, 20%, 20%, 30%;
  background-color: #fffaec;
   */
    background-image: url(../images/loading_bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
  min-height: 350px;
}

.body_login .headerbar {
  width: auto;
  height: auto;
}

.body_login .headerbar .header-left {
  padding-top: 15px;
  padding-left: 15px;
}

.body_login .body {
  height: 100%;
  position: relative;
}

.body_login .body > .wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding-left: 250px;
}

.body_login .body > .wrap > .logo {
  width: 220px;
  margin-bottom: 10px;
  position: absolute;
  top: 40px;
  left: 0px;
}

.body_login .body > .wrap .loginbx {
    background-color: rgba(255, 255, 255, .8);
    padding: 10px;
    border-radius: 15px;
    min-width: 250px;
    max-width: 300px;
}

.body_login .body > .wrap > .loginbx > .logo {
    display: none;
    margin-bottom: 10px;
}

#kakao_login,
#naver_login {
    display: none;
}

.third #kakao_login,
.third #naver_login {
    display: block;
}

#appleid-signin > div {
    width: 100% !important;
}

#naver_login img,
#kakao_login img {
  margin-bottom: 5px;
  max-width: 100%;
  min-width: 100%;
}

#appleid-signin {
    cursor: pointer;
}

.body_login .loginbx .dabikids {
  border-top: 1px solid #ddd;
  padding: 10px 0;
  margin-top: 5px;
  font-size: 12px;
  font-family: "Apple SD Gothic Neo", "NanumGothic";
}

.body_login .loginbx .dabikids > .frmlogin {
}

.body_login .loginbx .dabikids > .frmlogin > input {
  margin-bottom: 5px;
  font-size: 12px;
}

.body_login .loginbx .dabikids > .frmlogin .btn-login {
  width: 100%;
  font-size: 13px;
  padding: 10px;
  font-weight: 800;
}

.body_login .loginbx .dabikids > .help {
  margin-top: 10px;
}

.body_login .loginbx .dabikids > .help > a {
  color: #333;
  font-size: 11px;
  text-decoration: none;
}

.body_login .loginbx .dabikids > .help > a.btn-register {
    float: left;
}

.body_login .loginbx .dabikids > .help > a.btn-find {
  float: right;
}

.body_pwdfind .headerbar .title::before {
    content: '비밀번호 찾기';
}

.body_pwdfind .btn-find > span::before {
    content: '찾기';
}

.frmUser .pwdbx,
.body_pwdfind.pwdmode .frmUser .findbx {
    display: none;
}

.body_pwdfind.pwdmode .frmUser .pwdbx {
    display: block;
}

.body_pwdfind.pwdmode .headerbar .title::before {
    content: '비밀번호 변경';
}

.body_pwdfind.pwdmode .frmUser .btn-find > i::before {
    content: '\f084';
}

.body_pwdfind.pwdmode .btn-find > span::before {
    content: '변경하기';
}

/* main */
.body_main .header-left .logo {
    width: 180px;
    height: initial;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

body.body_main {
  background: #fff url(../images/main_bg.jpg) no-repeat center center / cover fixed;
  height: 100%;
}

body.body_main .body {
  height: 100%;
  overflow: hidden;
  padding-top: 80px;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
}

body.body_main .body .content {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    padding-top: 50px;
}

.body_main .map {
    white-space: nowrap;
    padding: 0 30px;
    text-align: center;
}

.body_main .map .area {
    width: 32%;
}

.body_main .map .area > a {
    position: relative;
    display: inline-block;
    width: 100%; 
    height: 0;
    padding-bottom: 100%;
    background-position: center top;
    background-size: contain;
    background-repeat: no-repeat;
}

.body_main .map .area + .area {
}

.body_main .map .area > a.lock {
    filter: grayscale(.8);
    -webkit-filter: grayscale(.8);
}

.body_main .map .area > a.lock::before {
    content: '\f023';
    position: absolute;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 60px;
    color: rgba(255, 255, 255, 1);
    text-shadow: 0px 2px 5px #333;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: .8;
}

.body_main .map .area > a::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;
}

.body_main .map .area.dabisu > a {
    background-image: url(../images/stage01.png);
}

.body_main .map .area.dabisu > a::after {
    background-image: url(../images/stage01_link.png);
}

.body_main .map .area.hangul > a {
    background-image: url(../images/stage02.png);
}

.body_main .map .area.hangul > a::after {
    bottom: 5px;
    background-image: url(../images/stage02_link.png);
}

.body_main .map .area.code > a {
    background-image: url(../images/stage04.png);
}

.body_main .map .area.code > a::after {
    bottom: 5px;
    height: 40px;
    background-image: url(../images/stage04_link.png);
    background-position: left 20px bottom;
}

.body_main .map .area.gugudan > a {
    background-image: url(../images/stage03.png);
}

.body_main .map .area.gugudan > a::after {
    bottom: 5px;
    background-image: url(../images/stage03_link.png);
}

.body_main .map .area h5 {
    color: #fff;
    text-shadow: 2px 1px 2px #333;
    margin-top: 6%;
    font-size: 25px;
}

.body_main .map .area::after {
}


/* dabisu */

body.body_dabisu {
  background-color: #fff9eb;
  padding-top: 80px;
}

.headerbar .btn-back {
  padding: 10px 20px;
  border-radius: 50px;
  background-color: #fbc359; 
  color: #fff;
}

.headerbar .header-left img {
  display: inline-block;
  height: 40%;
}

.headerbar .header-left .title {
    font-size: 110%;
}

.body_dabisu .body .content {
  padding: 30px 30px 20px;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.body_games .body .content.row {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 20px 30px 40px;
    display: block;
}

.body_games .body .content.row > div {
    display: inline-block;
    max-width: 30%;
}

body.body_dabisu .body .content > .smry {
  position: fixed;
  top: 80px;
  font-size: 13px;
  line-height: 20px;
  color: #333;
  font-family: "BinggraeBold";
}

body .body .content.hblocks {
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    padding: 20px 25px 40px;
}

body .body .content.hblocks .btn-block {
    display: inline-block;
    width: 25%;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 3px 3px 5px #aaa;
}

body.body_tool .body .content.hblocks .btn-block {
    background-repeat: no-repeat;
    background-position: center top;
    background-size: auto 80%;
}

body .body .content .btn-block > .no {
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 20px;
    padding: 5px 20px;
    color: #fff;
    font-size: 22px;
    background-color: rgba(0, 0, 0, .5);
    text-shadow: 1px 1px 2px #000;
}

body .body .content.hblocks .btn-block + .btn-block {
    margin-left: 20px;
}

body .body .content.hblocks .btn-block:last-child {
    margin-right: 20px;
}

body .body .content .btn-block::after {
    position: absolute;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 60px;
    color: rgba(255, 255, 255, 1);
    text-shadow: 0px 2px 5px #333;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

body .body .content .btn-block.video::after {
    content: '\f144';
}

body .body .content .btn-block.mission::after {
    content: '\f11b';
}

body .body .content .btn-block h3 {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    left: 50%;
    padding: 10px 20px;
    text-shadow: 0px 0px 5px #333;
    font-size: 22px;
    margin: 0px;
    width: 100%;
    background-color: rgba(0, 0, 0, .5);
    overflow: hidden;
    text-overflow: ellipsis;
}

body.body_dabisu .body .content.hrow {
  overflow-x: auto;
  overflow-y: hidden;
}

body.body_dabisu .body .content.hrow > .row {
  height: 100%;
  white-space: nowrap;
  display: block;
  padding: 10px 20px 10px 0px;
}

body.body_dabisu .body .content.hrow .row > div {
  height: 100%;
  display: inline-block;
}

body.body_dabisu .body .btn-block {
  position: relative;
  display: inline-block;
  text-align: center;
  border-radius: 30px;
  height: 100%;
  color: #fff;
  background-repeat: no-repeat;
  background-position: center bottom 30px;
  background-size: 70%;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 2px 2px 5px #ccc;
  overflow: hidden;
}

body.body_dabisu .body .btn-block.lock::before {
    content: '\f023';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 57px;
    position: absolute;
    top: 62%;
    left: 50%;
    z-index: 2;
    text-shadow: 1px 1px 4px #000;
    transform: translate(-50%, -50%);
}

body.body_dabisu .body .btn-block.game {
  background-image: url(../images/dcode_char00.png);
  background-size: 50%;
}

body.body_dabisu .body .btn-block.tool {
  background-image: url(../images/ilbong.png);
}

body.body_dabisu .body .btn-block.step1 {
  background-image: url(../images/cholssak.png);
  background-size: 90%;
}

body.body_dabisu .body .btn-block.step2 {
  background-image: url(../images/ssangssang.png);
  background-position: center bottom 15px;
}

body.body_dabisu .body .btn-block.step3 {
  background-image: url(../images/sarang.png);
}

body.body_dabisu .body .btn-block.gugudan {
  background-image: url(../images/odong.png);
}

body.body_dabisu .body .btn-block .label {
  position: absolute;
  top: 30%;
  transform: translateY(-50%);
  width: 100%;
  z-index: 2;
}

body.body_dabisu .body .btn-block.lock .label .roundbx {
    color: #777;
}

body.body_dabisu .body .btn-block span {
  display: block;
  font-size: 15px;
  text-shadow: 1px 1px 1px #333;
}

body.body_dabisu .body .btn-block .roundbx {
  display: inline-block;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, .8);
  color: #000;
  padding: 5px 30px;
  font-size: 17px;
  text-shadow: none;
  margin-top: 5px;
}


/* dabisu k1 */
.body_dabisu_k3 ,
.body_dabisu_k2 ,
.body_dabisu_k1 {
  background: #faefd4 url(../images/route_sample02.jpg) no-repeat left top / cover fixed;
}

.body_lessons .headerbar .header-left img {
  height: 30%;
}

.headerbar.bgbar .btn-menu > img,
.headerbar.bgbar .btn-back {
  box-shadow: 2px 3px 5px rgba(0,0,0,0.5);
}

.headerbar.bgbar .btn-notice,
.headerbar.bgbar .title {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.body_lessons .body > .content {
}

.body_lessons .lectures {
  padding: 0px;
  margin: 0px;
  display: block;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: auto;
  height: 100vh;
}

.body_lessons .lectures > div {
    display: inline-block;
    float: initial;
    height: 100%;
}

.body_lessons .lectures .box {
  position: relative;
  margin: 40px 0px 0px;
  background-color: #fff;
  border-radius: 15px;
  cursor: pointer;
  padding-bottom: 100%;
  top: 50%;
  transform: translateY(-50%);
}

.body_lessons .lectures .box .title {
  position: absolute;
  top: -20px;
  font-size: 27px;
  white-space: nowrap;
  background-color: #f24ca9;
  padding: 5px 50px;
  color: #fff;
  border-radius: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.body_lessons .lectures .box.lock .title {
  background-color: #333;
}

.body_lessons .lectures .box > i {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 3em;
  color: #eee;
  text-shadow: 1px 1px 5px #000;
}

.body_lessons .lectures .box.lock {
    -webkit-filter: grayscale(.7);
    filter: grayscale(.7);
}

.body_lessons .lectures .box.lock > i {
  display: block; 
}

/* dabisu lesson */

.body_dabisu_k3_lesson,
.body_dabisu_k2_lesson,
.body_dabisu_k1_lesson {
  background: #8a6a37 url(../images/bg_sample04.jpg) no-repeat left top / cover fixed;
}

.body_lessons .coursework {
    margin-top: 80px;
  padding: 10px 30px;
}

.body_lessons .coursework .title {
  display: inline-block;
  background-color: #f96e57;
  border-radius: 30px;
  color: #fff;
  padding: 5px 15px 5px 5px;
  line-height: 30px;
  font-size: 17px;
  margin: 0px;
  opacity: .9;
}

.body_lessons .coursework .title > span {
  display: inline-block;
  width: 30px;
  height: 30px;
  font-size: 20px;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  color: #f96e57;
  margin-right: 5px;
}

.body_lessons .coursework .lesson {
  position: relative;
  margin: 20px 0px;
  border-radius: 10px;
  background-color: #fff;
  padding-bottom: 75%;
  cursor: pointer;
  overflow: hidden;
}

.body_lessons .coursework .lesson > span {
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding: 5px;
  background-color: rgba(0, 0, 0, .9);
  color: #fff;
  font-size: 12px;
  font-family: Jua;
  display: none;
}

.body_lessons .coursework .lesson > span > i {
  margin-right: 5px;
  font-size: 17px;
  vertical-align: middle;
}

.body_lessons.body_dabisu_k1 .lectures .box.step1 {
  background: transparent url(../images/dabisu/1-1.png) no-repeat center center/cover;
}

.body_lessons.body_dabisu_k1 .lectures .box.step2 {
  background: transparent url(../images/dabisu/1-2.png) no-repeat center center/cover;
}

.body_lessons.body_dabisu_k1 .lectures .box.step3 {
  background: transparent url(../images/dabisu/1-3.png) no-repeat center center/cover;
}

.body_lessons.body_dabisu_k1 .lectures .box.step4 {
  background: transparent url(../images/dabisu/1-4.png) no-repeat center center/cover;
}

.body_lessons.body_dabisu_k1 .lectures .box.step5 {
  background: transparent url(../images/dabisu/1-5.png) no-repeat center center/cover;
}

.body_lessons.body_dabisu_k1 .lectures .box.step6 {
  background: transparent url(../images/dabisu/1-6.png) no-repeat center center/cover;
}

.body_lessons.body_dabisu_k1 .lectures .box.step7 {
  background: transparent url(../images/dabisu/1-7.png) no-repeat center center/cover;
}

.body_lessons.body_dabisu_k1 .lectures .box.step8 {
  background: transparent url(../images/dabisu/1-8.png) no-repeat center center/cover;
}

.body_lessons.body_dabisu_k1 .lectures .box.step9 {
  background: transparent url(../images/dabisu/1-9.png) no-repeat center center/cover;
}

.body_lessons.body_dabisu_k1 .lectures .box.step10 {
  background: transparent url(../images/dabisu/1-10.png) no-repeat center center/cover;
}

/* dabisu guide */

body.body_guide {
  padding-top: 80px;
}

.body_guide .headerbar {
  background: #fff url(../images/headerbg01.png) no-repeat left top / cover;
}

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

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

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

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

.tab-panels {
}

.tab-panels > .panel {
  display: none;
}

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

.section {
  color: #333;
}

.dabisu_guide .section.area1 {
  background: url(../images/program_concept_deco01.png) no-repeat 70px top / 25% auto;
  padding: 10px 10px 30px 300px;
  margin-top: 30px;
}

.section.top h3 {
  font-family: CookieRunB;
  padding: 10px 0;
}

.section.top h3 > b {
  color: red;
}

.section.top h5 {
  margin: 10px 0;
  font-family: Jua;
}

.section p {
  font-size: 15px;
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", 나눔고딕, NanumGothic, "맑은 고딕", "Malgun Gothic";
  margin: 10px 0;
}

.dabisu_guide .section.area2:before {
  content: '';
  position: absolute;
  background: #fff url(../images/program_baseline_darkblue.png) no-repeat left top / 100% auto;
  width: 100%;
  height: 15px;
  top: -15px;
  left: 0px;
}

.dabisu_guide .section.area2 {
  position: relative;
  background-color: #4c5e96;
  margin-top: 50px;
  padding: 25px 40px;
  color: #fff;
}

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

.dabisu_guide .section.area3 {
    position: relative;
    background-color: #4c5e96;
    padding: 25px 40px;
}


.dabisu_guide .concept-box {
  max-width: 800px;
  margin: auto;
  position: relative;
  margin-bottom: 25px;
}

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

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

.dabisu_guide .concept-box.concept-box-02::before {
    background-image: url(../images/dabisu/program_concept_ch02_top.png);
}

.dabisu_guide .concept-box.concept-box-02::after {
    background-image: url(../images/dabisu/program_concept_ch02_bottom.png);
}

.dabisu_guide .concept-box.concept-box-03::before {
    background-image: url(../images/dabisu/program_concept_ch03_top.png);
}

.dabisu_guide .concept-box.concept-box-03::after {
    background-image: url(../images/dabisu/program_concept_ch03_bottom.png);
}

.dabisu_guide .concept-box.concept-box-04::before {
    background-image: url(../images/dabisu/program_concept_ch04_top.png);
}

.dabisu_guide .concept-box.concept-box-04::after {
    background-image: url(../images/dabisu/program_concept_ch04_bottom.png);
}

.dabisu_guide .concept-box.concept-box-05::before {
    background-image: url(../images/dabisu/program_concept_ch05_top.png);
}

.dabisu_guide .concept-box.concept-box-05::after {
    background-image: url(../images/dabisu/program_concept_ch05_bottom.png);
}

.dabisu_guide .concept-desc {
  color: #fff;
  font-size: 15px;
  line-height: 30px;
}

.dabisu_guide .concept-box.concept-desc span {
  color: #ffe400;
  font-weight: 900;
}

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

.dabisu_guide .concept-box .box-header label {
    position: absolute;
    top: 5px;
    left: 20px;
    font-size: 40px;
    color: #fff;
}

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

.dabisu_guide .concept-box .box-header .label-concept {
  position: absolute;
  top: 0px;
  left: 0px;
}

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

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

.dabisu_guide .concept-box.concept-box-02 > .box-body::after {
    background-image: url(../images/dabisu/program_concept_bottom_bg_02.png);
}

.dabisu_guide .concept-box.concept-box-03 > .box-body::after {
    background-image: url(../images/dabisu/program_concept_bottom_bg_03.png);
}

.dabisu_guide .concept-box.concept-box-04 > .box-body::after {
    background-image: url(../images/dabisu/program_concept_bottom_bg_04.png);
}

.dabisu_guide .concept-box.concept-box-05 > .box-body::after {
    background-image: url(../images/dabisu/program_concept_bottom_bg_05.png);
}

.dabisu_guide .concept-box .box-body > figure {
  position: absolute;
  top: 60px;
}

.dabisu_guide .concept-box.concept-box-02 .box-body > figure {
}

.dabisu_guide .concept-box.concept-box-03 .box-body > figure {
  top: 30px;
}

.dabisu_guide .concept-box.concept-box-04 .box-body > figure {
}

.dabisu_guide .concept-box.concept-box-05 .box-body > figure {
  top: 80px;
}

.dabisu_guide .concept-box .box-body > p {
  border: 5px solid #eee;
  border-radius: 10px;
  margin-left: 250px;
  padding: 20px;
  font-size: 17px;
  line-height: 30px;
  color: #000;
}

.dabisu_guide .concept-box.concept-box-05 .box-body > p {
    margin-left: 350px;
}

.dabisu_guide .concept-box .box-body > .videobx {
    margin-left: 250px;
}

.dabisu_guide .concept-box.concept-box-05 .box-body > .videobx {
    margin-left: 350px;
}

.dabisu_guide .concept-box .box-body > .videobx video {
    width: 100%;
    object-fit: fill; 
    object-position: 0 -14px;
}

.dabisu_guide .concept-box .box-body > p > img {
  margin: 0 auto;
}

.dabisu_guide .concept-box .box-header::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
  background: url(../images/dabisu/program_concept_head_pattern_bg.png) top left repeat-x;
  background-size: 60%;
  opacity: .2;
}

.dabisu_guide .concept-box.concept-box-02 .box-header {
    background-color: #ffa6c1;
}

.dabisu_guide .concept-box.concept-box-03 .box-header {
    background-color: #b3e15a;
}

.dabisu_guide .concept-box.concept-box-04 .box-header {
    background-color: #eba6e3;
}

.dabisu_guide .concept-box.concept-box-05 .box-header {
    background-color: #ffcf41;
}


.dabisu_guide .section.area21 .box .header {
    padding: 15px;
}

.dabisu_guide .section.area21 .box ul.figures {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.dabisu_guide .section.area21 .box ul.figures > li {
    float: left; 
    width: 20%;
    text-align: center;
    padding: 5px;
}

.dabisu_guide .section.area21 .box ul.figures > li figure {
    display: block;
    background: #fff;
    padding: 0;
    margin: 0;
    position: relative;
    width: 100%;
}

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

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

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

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

.dabisu_guide .section.area21 .box:nth-child(1) > .header {
    background-image: url(../images/dabisu/program_box_header_1.jpg);
}

.dabisu_guide .section.area21 .box:nth-child(1) > .footer .label {
    background: #22644a;
}

.dabisu_guide .section.area21 .box:nth-child(2) > .header {
    background-image: url(../images/dabisu/program_box_header_2.jpg);
}

.dabisu_guide .section.area21 .box:nth-child(2) > .footer .label {
    background: #1a6c96;
}

.dabisu_guide .section.area21 .box:nth-child(3) > .header {
    background-image: url(../images/dabisu/program_box_header_3.jpg);
}

.dabisu_guide .section.area21 .box:nth-child(3) > .footer .label {
    background: #7a5e9a;
}

.dabisu_guide .section.area21 .box:nth-child(4) > .header {
    background-image: url(../images/dabisu/program_box_header_4.jpg);
}

.dabisu_guide .section.area21 .box:nth-child(4) > .footer .label {
    background: #e0a700;
}

/* hangul_guide */

.hangul_guide .tab-panels {
  background: #f3f3f3 url(../images/20190812_156.png) repeat-y left top / 100% auto;
}

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

.hangul_guide .section.area1 {
  background: url(../images/20190812_154.png) no-repeat left top 30px / auto 100%;
  padding-left: 40%;
  margin: 0px;
}

.hangul_guide .section.area11 > .wrap,
.hangul_guide .section.area21 > .wrap,
.hangul_guide .section.area1 > .wrap {
    background-color: rgba(247, 247, 247, 0.9);
    padding: 10px;
    border-radius: 10px;
}

.hangul_guide .section.top > h4 {
    margin: 15px 0;
}

.hangul_guide .section.top > h4 > b {
    color: #ff7200;
}

.hangul_guide .section.top > p {
    padding: 0px;
    margin: 0px;
}

.hangul_guide .section {
  position: relative;
  padding: 10px 20px;
}

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

.section .box > h4 {
    font-family: 'BinggraeBold';
    color: #fff;
    font-size: 22px;
    padding: 10px;
    background: #fff url(../images/20190812_158.png) repeat-x top left;
}

.section .box > .body {
    padding: 20px;
}

.hangul_guide .box > .body img {
    max-width: 100%;
    width: 100%;
}

.hangul_guide .box > .body .desc {
    font-size: 15px;
    font-family: "Noto Sans KR", "Apple SD Gothic Neo", 나눔고딕, NanumGothic, "맑은 고딕", "Malgun Gothic";
}

.hangul_guide .section > p {
    padding: 15px;
    margin: 0px;
}

.hangul_guide .section.area4 {
}

.hangul_guide .section.area4 .head {
    margin-bottom: 20px;
}

.hangul_guide .section.area4 .head img {
    vertical-align: bottom;
    margin-right: 20px;
}

.hangul_guide .section .body .card {
    padding: 15px;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 20px;
}

.hangul_guide .section .body .card > h5 {
    color: #000;
    font-family: 'BinggraeBold';
    font-size: 20px;
    line-height: 30px;
    margin: 10px 0;
}

.hangul_guide .section .body .card > p {
    font-size: 14px;
    line-height: 25px;
    margin: 10px 0;
}

.hangul_guide .section .body .card img {
    width: 100%;
}

.hangul_guide .section.area4 .body div:nth-child(1) > .card {
    background-color: #f6b4d1;
}

.hangul_guide .section.area4 .body div:nth-child(2) > .card {
    background-color: #f179ab;
}

.hangul_guide .section.area4 .body div:nth-child(3) > .card {
    background-color: #32beef;
}

.hangul_guide .section.area4 .body div:nth-child(4) > .card {
    background-color: #9adaf0;
}

.hangul_guide .section.area11 {
  background: url(../images/20190812_168.png) no-repeat left top 30px / auto 100%;
  padding-left: 40%;
  margin: 0px;
}

.hangul_guide .section.area21 {
  background: url(../images/20190812_176.png) no-repeat left top 30px / auto 100%;
  padding-left: 40%;
  margin: 0px;
}

.hangul_guide .section.area23 .card {
    min-height: 450px;
}

.hangul_guide .section .body .card .iwrap {
    height: 220px;
    position: relative;
}

.hangul_guide .section .body .card .iwrap > img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
}

.hangul_guide .section.area23 .body div:nth-child(1) > .card {
    background-color: #feede3;
}

.hangul_guide .section.area23 .body div:nth-child(2) > .card {
    background-color: #c5d0e9;
}

.hangul_guide .section.area23 .body div:nth-child(3) > .card {
    background-color: #d1ecec;
}

.hangul_guide .section.area23 .body div:nth-child(4) > .card {
    background-color: #e6dbec;
}

.hangul_guide .section.area23 .body div:nth-child(5) > .card {
    background-color: #ffeed2;
}

.hangul_guide .section.area23 .body div:nth-child(6) > .card {
    background-color: #d0e7c9;
}


/* shop */

body.body_shop {
  background-color: #fffbf1;
  padding-top: 80px;
}

.headerbar .btn-back {
  padding: 10px 20px;
  border-radius: 50px;
  background-color: #fbc359; 
  color: #fff;
  margin: 0;
}

body.body_shop .body .content {
  padding: 10px 30px;
  height: 100%;
  position: relative;
  font-family: "Binggrae";
}

.body_shop .banner {
  border-radius: 15px;
  color: #fff;
  position: relative;
  background-color: #b48aaf;
  margin: 0px 0px 30px;
  overflow: hidden;
}

.body_shop .banner .bg {
  background: url(../images/dcode_bg.png) no-repeat right bottom / auto 90%;
}

.body_shop .banner .info {
    padding: 20px 0px;
}

.body_shop .banner .info > h5 {
  font-size: 15px;
}

.body_shop .banner .info > .desc {
  font-family: CookieRunB;
  font-size: 15px;
  margin: 15px 0;
}

.body_shop .banner .info > .desc > b{
  color: #ffe300;
}

.body_shop .banner .info > p {
  font-size: 13px;
  margin: 0px;
}

.body_shop .banner .info > p .dc {
  text-decoration: line-through;
}

.body_shop .banner .info > p .price {
  font-weight: 600;
}

.body_shop .banner .info > .btn {
  background-color: #f9c15a;
  color: #fff;
  padding: 5px 20px;
  border-radius: 15px;
  margin-top: 15px;
  font-weight: 600;
}

.body_shop .courses {
}

.body_shop .courses .course {
  margin-bottom: 10px;
  margin-left: 0px;
  margin-right: 0px;
  border-bottom: 1px solid #ddd;
}

.body_shop .course > div {
  position: relative;
  font-size: 11px;
  padding-left: 5px;
  padding-right: 5px;
}

.body_shop .course .logo {
  display: inline-block;
  width: 80px;
  position: absolute;
  margin: 10px;
}

.body_shop .course .info {
  padding-left: 120px;
}

.body_shop .course .info > h5 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
}

.body_shop .course .info > p {
}

.body_shop .course .price {
  text-align: right;
  line-height: 40px;
  font-size: 13px;
}

.body_shop .course .dprice {
    text-decoration: line-through;
    color: red;
    margin-right: 5px;
}

.body_shop .course .btn {
  margin-top: 5px;
  background-color: #f69079;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
}

.body_shop h2 {
  font-weight: 600;
  font-size: 17px;
  margin: 20px 0px;
}

.body_shop .products {
  margin: 15px 0px;
}

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

.body_shop .product h5 {
  font-size: 12px;
  font-weight: 600;
  padding: 5px;
  background-color: rgba(173, 98, 168, 0.89);
  color: #fff;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

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

.body_shop .product .price strike {
    color: #777;
    font-size: 90%;
    margin-right: 5px;
    text-decoration-color: #fb3f3f;
}

/***  body product  ***/

body.body_product {
  background-color: #fffbf1;
  padding-top: 80px;
}

body.body_product .body {
    font-family: "NanumSquare";
    padding: 0px 30px;
    margin-bottom: 30px;
    height: auto;
}

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

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

.prodinfo .pic {
    height: 100%;
    width: 100%;
    position: absolute;
}

.prodinfo .pricebx {
}

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

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

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

.prodinfo .cntbx {
    padding: 0 15px;
}

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

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

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

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

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

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

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

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

/***  body checkout  ***/

body.body_checkout {
  background-color: #fffbf1;
  padding-top: 80px;
}

body.body_checkout .body {
    font-family: "NanumSquare";
    padding: 0px 30px 30px;
    height: auto;
    background-color: #fff;
    border-top: 1px solid #eee;
}

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

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

body.body_checkout form .sumprice label {
    margin: 0px;
}

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

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

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

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

body.body_checkout .lstProd {
    padding: 0 15px;
}

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

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

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

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

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

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

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

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

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

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


/***  body side  ***/
body.body_side {
  background-color: #fffbf1;
  padding-top: 80px;
}

body.body_side .body {
    padding: 0 10px;
}

body.body_side .body form {
    font-family: "Jua";
    background-color: #fff5de;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 3px 3px 3px #a99d83;
}

body.body_side form .form-control {
    border: none;
    border-bottom: 2px solid #aaa;
    font-family: "NanumSquare"
}

body.body_side form .input-group-append > .input-group-text {
    border-top: none;
    border-right: none;
    border-bottom: 2px solid #aaa;
}

body.body_side .lpanel {
    float: left;
    width: 150px;
    text-align: center;
}

body.body_side .cpanel {
    margin-left: 155px;
    overflow: hidden;
    padding-right: 5px;
}

body.body_side .lpanel .picbx {
    display: inline-block;
    width: 130px;
    height: 130px;
    line-height: 130px;
    text-align: center;
    border-radius: 50%;
    background-color: rgba(255, 78, 78, 0.5);
    color: #fff;
    cursor: pointer;
    font-size: 22px;
    box-shadow: 1px 1px 1px #aaa;
}

body.body_side .lpanel .picbx .label {
    opacity: .5;
    text-shadow: 1px 1px 1px #333;
}

body.body_side .body {
    padding: 10px 30px;
}

body.body_side .body .box {
    margin: 0px 0px 30px;
    font-family: "NanumSquare";
    background-color: #fff5de;
    padding: 20px;
    border-radius: 10px;
    min-height: 95%;
    box-shadow: 3px 3px 3px #a99d83;
}

body.body_side .body .box table tr {
    cursor: pointer;
}

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

.frmUser .btn-save {
    padding-left: 40px;
    padding-right: 40px;
}

.article .prop {
    border-bottom: 2px solid #333;
    padding: 5px;
    margin-bottom: 10px;
}

.article .prop .author {
    float: left;
}

.article .prop .rdate {
    float: right;
}

.article .content .poster {
    margin-top: 10px;
}

body.body_side .body .table thead > tr > th {
    text-align: center;
    background-color: #ffd678;
    border: none;
}

body.body_side .body .table tbody > tr > td {
    font-family: "NanumSquare"
}

body.body_side .table-light, body.body_side .table-light > td, body.body_side .table-light > th {
    background-color: #fffbf1;
}

body.body_subscription .detail-box {
    font-family: "NanumSquare";
    padding: 10px;
    background-color: #fff;
    margin-bottom: 20px;
    border: 1px solid #eee;
}

body.body_subscription .detail-box .panel {
    margin-bottom: 30px;
}

body.body_subscription .detail-box .panel > h5 {
    font-weight: bold;
    display: inline-block;
    padding: 5px 30px;
    margin-left: -25px;
    color: #fff;
    background-color: #f95161;
    font-size: 17px;
    box-shadow: 1px 1px 2px #999;
}

table .order {
    cursor: pointer;
}

body.body_side .table a {
    color: #333;
}

body.body_event .body {
    padding: 10px 30px;
    margin-bottom: 50px;
}

body.body_event .body .events {
    padding: 0 20px;
}

body.body_event .events .event {
    background-color: #fff5de;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 3px 3px 3px #a99d83;
    cursor: pointer;
}

body.body_event .event:not(:last-child) {
    padding-bottom: 20px;
    margin-bottom: 20px;
}

body.body_event .event .thumb {
    background-color: #fff;
    height: 100px;
    border-radius: 10px;
}

body.body_event .event .title {
    font-family: "NanumSquareRound";
    font-weight: 800;
}

body.body_event .event .title b {
    border-radius: 15px;
    background-color: #aaa;
    padding: 5px 15px;
    font-size: 13px;
    margin: 0px 0px 10px 0px;
    color: #fff;
    display: inline-block;
}

body.body_event .event.running .title b {
    background-color: #5d82f2;
}

body.body_event .event.running .title span {
    display: block;
}

body.body_event .event .smry {
    font-family: "NanumSquare"
}

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

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

.article .title {
    font-weight: 800;
}

.article .title > b {
    border-radius: 15px;
    background-color: #5d82f2;
    padding: 5px 15px;
    font-size: 15px;
    margin-right: 5px;
    color: #fff;
    display: inline-block;
}

.article .title > span {
    display: inline-block;
}

.article .content {
    font-family: "NanumSquare";
}

.article .content .poster img {
    width: 100%;
}

form .desc {
    font-family: "NanumSquare";
    color: #ff1b7b;
    font-size: 15px;
    margin: 5px 0;
}

/***  payment  ***/

#popup-payment .modal-dialog {
    min-width: 500px;
}

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

#popup-payment .modal-body .ordrsmry {
    background-color: #3c749c;
    color: #fff;
    padding: 10px;
}

#popup-payment .modal-body .wrapinfo {
    overflow: hidden;
    padding: 15px 0px;
}

#popup-payment .modal-body .row {
    padding: 5px;
    margin: 0px;
    font-size: 15px;
}

#popup-payment .modal-body .row.consign,
#popup-payment .modal-body .row.usage,
#popup-payment .modal-body .row.finance {
    margin-top: 10px;
}


#popup-payment .modal-body .form-control {
    font-size: 15px;
}

#popup-payment .modal-body .ordrsmry .lblprice {
    display: block;
    margin-top: 15px;
}

#popup-payment .modal-body .ordrsmry .price {
    font-size: 35px;
    font-weight: 700;
}

#popup-payment .modal-body .row input[type="checkbox"] {
    margin-right: 3px;
}

#popup-payment .modal-body .row .control-span {
    display: inline-block;
    padding: 7px 0;
}

/***  inovoice  ***/

body.body_invoice {
  background-color: #fffbf1;
  padding-top: 80px;
}

body.body_invoice .body {
    padding: 0 10px;
    font-family: "NanumSquare";
}

body.body_invoice .invoice-box {
    padding: 20px;
    background-color: #fff;
    margin: 0 20px 20px;
    border: 1px solid #eee;
}

body.body_invoice .invoice-box > h5 {
    font-weight: bold;
    display: inline-block;
    padding: 5px 30px;
    margin-left: -25px;
    color: #fff;
    background-color: #f95161;
    box-shadow: 1px 1px 2px #999;
}

body.body_invoice .invoice-box .row label {
    margin: 15px 0px 5px;
    width: 100%;
    padding: 5px;
    border-bottom: 2px solid #555;
}

body.body_invoice .invoice-box .prodinfo {
    position: relative;
}

body.body_invoice .invoice-box .prodinfo .thumb {
    display: inline-block;
    max-width: 50px;
    min-height: 60px;
    margin-right: 10px;
}

body.body_invoice .invoice-box .prodinfo .info {
    display: inline-block;
    margin-left: 0px;
    position: relative;
}

body.body_invoice .invoice-box .prodinfo .info .cate {
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 11px;
    color: #fff;
}

body.body_invoice .invoice-box .prodinfo .info .title {
    color: #000;
    margin: 0;
}

body.body_invoice .invoice-box .bxbill {
    text-align: right;
    margin-top: 20px;
}

body.body_invoice .invoice-box .bxbill .wrapbill {
    width: 250px;
    float: right;
}

.invoice-box .bxbill .wrapbill > div {
    line-height: 30px;
    padding: 5px 10px;
}

.invoice-box .bxbill .wrapbill > div > label {
    margin: 0px;
}

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

.invoice-box .bxbill .wrapbill > .total {
    border-top: 2px solid #333;
}

.invoice-box .bxbill .wrapbill > .total > span {
    font-weight: 800;
    font-size: 22px;
    color: red;
}


/***  hangul  ***/

.body_hangul .headerbar .header-left img {
    height: 50%;
    margin-top: 5px;
}

body.body_dabisu.body_hangul .body .btn-block .label {
    top: 35%;
}

body.body_dabisu.body_hangul .body .btn-block.step2 .label {
    top: 31%;
}

body.body_dabisu .body .btn-block.lock {
  filter: grayscale(.8);
  -webkit-filter: grayscale(.8);
}

body.body_dabisu.body_hangul .body .btn-block.game {
  background-image: url(../images/hangul_char004.png);
  background-size: 80%;
  background-position: center bottom 20px;
}

body.body_dabisu.body_hangul .body .btn-block.tool {
  background-image: url(../images/hangul_char005.png);
  background-size: 63%;
}

body.body_dabisu.body_hangul .body .btn-block.step1 {
  background-image: url(../images/hangul_char001.png);
  background-size: 50%;
}

body.body_dabisu.body_hangul .body .btn-block.step2 {
  background-image: url(../images/hangul_char002.png);
  background-position: center bottom 30px;
  background-size: 55%;
}

body.body_dabisu.body_hangul .body .btn-block.step3 {
  background-image: url(../images/hangul_char003.png);
  background-position: right 10px bottom 30px;
  background-size: 65%;
}

.body_hangul_k3,
.body_hangul_k2,
.body_hangul_k1 {
  background: #faefd4 url(../images/bg/hangul_bg01.jpg) no-repeat center top / 130% fixed;
}

.body_lessons.body_hangul_k1 .lectures .box.step1 {
  background: transparent url(../images/hangul/1-1.png) no-repeat center center/cover;
}

.body_lessons.body_hangul_k1 .lectures .box.step2 {
  background: transparent url(../images/hangul/1-2.png) no-repeat center center/cover;
}

.body_lessons.body_hangul_k1 .lectures .box.step3 {
  background: transparent url(../images/hangul/1-3.png) no-repeat center center/cover;
}

.body_lessons.body_hangul_k1 .lectures .box.step4 {
  background: transparent url(../images/hangul/1-4.png) no-repeat center center/cover;
}

.body_lessons.body_hangul_k1 .lectures .box.step5 {
  background: transparent url(../images/hangul/1-5.png) no-repeat center center/cover;
}

.body_lessons.body_hangul_k1 .lectures .box.step6 {
  background: transparent url(../images/hangul/1-6.png) no-repeat center center/cover;
}

.body_lessons.body_hangul_k1 .lectures .box.step7 {
  background: transparent url(../images/hangul/1-7.png) no-repeat center center/cover;
}

.body_lessons.body_hangul_k1 .lectures .box.step8 {
  background: transparent url(../images/hangul/1-8.png) no-repeat center center/cover;
}

.body_hangul_k3_lesson,
.body_hangul_k2_lesson,
.body_hangul_k1_lesson {
  background: #faefd4 url(../images/hangul_k1_1_bg.jpg) repeat-y left top / cover fixed;
}

.dabisu_guide .section.top {
    background: #fff url(../images/dabisu/program_4grade.jpg) no-repeat left bottom/ auto 100%;
    padding: 10px 10px 50px 50%;
}

.dabisu_guide .section.top video {
    max-width: 100%;
}

.dabisu_guide .section.area21 {
    position: relative;
    background-color: #41af84;
    padding: 20px;
}

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

/* gugudan */

.body_gugudan {
    color: #fff;
}

.body_gugudan_main {
    background: url(../images/gugudan/main_bg.jpg) no-repeat center center/cover;
}

.body_gugudan_main .headerbar::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 100px;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    background: url(../images/gugudan/title.png) no-repeat center top/contain;
}

.body_gugudan .headerbar .btn-back {
    background-color: transparent;
    padding: 0px;
    border-radius: initial;
    font-size: 32px;
}

.body_gugudan .lectures .row .box {
    display: block;
    height: 0;
    margin-bottom: 5px;
    cursor: pointer;
    position: relative;
    background: transparent url(../images/gugudan/btn_menu_bg.png) no-repeat center center/contain;
    border: none;
    padding-bottom: 100%;
}

.body_gugudan .lectures .box.lock {
    filter: grayscale(.8);
    -webkit-filter: grayscale(.8);
}

.body_gugudan .lectures .box.game {
    width: 100%;
    height: 0;
    font-family: 'MapleBold';
    cursor: pointer;
    background: transparent url(../images/gugudan/btn_game.png) no-repeat center center/contain;
    border: none;
    padding-bottom: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.body_gugudan .lectures .box.game h4 {
    display: none;
}

.body_gugudan .lectures .row .box::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -15%;
    transform: translateX(-50%);
    width: 70%;
    height: 80px;
}

.body_gugudan .lectures .row .box.menu2::before {
    background: transparent url(../images/gugudan/btn_2dan.png) no-repeat center center/contain;
    width: 45%;
}

.body_gugudan .lectures .row .box.menu3::before {
    background: transparent url(../images/gugudan/btn_3dan.png) no-repeat center top/contain;
}

.body_gugudan .lectures .row .box.menu4::before {
    background: transparent url(../images/gugudan/btn_4dan.png) no-repeat center top/contain;
}

.body_gugudan .lectures .row .box.menu5::before {
    background: transparent url(../images/gugudan/btn_5dan.png) no-repeat center top/contain;
}

.body_gugudan .lectures .row .box.menu6::before {
    background: transparent url(../images/gugudan/btn_6dan.png) no-repeat center top/contain;
}

.body_gugudan .lectures .row .box.menu7::before {
    background: transparent url(../images/gugudan/btn_7dan.png) no-repeat center top/contain;
}

.body_gugudan .lectures .row .box.menu8::before {
    background: transparent url(../images/gugudan/btn_8dan.png) no-repeat center top/contain;
}

.body_gugudan .lectures .row .box.menu9::before {
    background: transparent url(../images/gugudan/btn_9dan.png) no-repeat center top/contain;
}

.body_gugudan .lectures .row .box::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 13%;
    transform: translateX(-50%);
    background: transparent url(../images/gugudan/btn_menu_label.png) no-repeat center center/contain;
    width: 60%;
    height: 100px;
}

.body_gugudan .lectures .row .box .title {
    position: absolute;
    left: 50%;
    bottom: 35%;
    transform: translateX(-50%);
    padding: 5px 20px;
    font-family: 'MapleBold';
    color: #fff;
    font-size: 30px;
    margin: 0px;
    white-space: nowrap;
    text-shadow: -1px -1px 1px #5e231a;
    z-index: 1;
}



.body_gugudan .headerbar a {
    color: #fff;
    text-shadow: 2px 1px 2px #333;
    display: inline-block;
    margin: 0px;
}

body.body_gugudan_main .headerbar .btn-back i {
    color: #fff;
}

.body_gugudan .headerbar a.btn {
    padding: 15px;
    font-size: 22px;
    box-shadow: 0px 2px 3px #333;
    border-radius: 50%;
}

.body_gugudan .headerbar .header-left::after {
    content: "";
    display: inline-block;
}

.body_gugudan .headerbar .title {
    text-shadow: 1px 1px 2px #333;
    font-size: 120%;
}

.body_gugudan_main .body {
    position: relative;
}

.body_gugudan_main .body .content {
      position: absolute;
      width: 100%;
      top: 50%;
      transform: translateY(-50%);
      height: initial;
      padding: 30px 30px 0px 40px;
      overflow: initial;
      margin: 0;
}

.body_gugudan_guide {
    background: url(../images/gugudan/setting_bg.png) no-repeat center center/cover fixed;
}

.body_gugudan_guide .body {
}

.body_gugudan_guide .body .content.hblocks {
    padding: 0px 30px;
}

.body_gugudan_guide .body .content.hblocks .btn-block {
    background-image: url(../images/gugudan/lesson_panel.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    box-shadow: initial;
    min-width: 200px;
    width: 25%;
    height: initial;
    border: none;
    position: relative;
    top: 45%;
    transform: translateY(-50%);
}

body.body_gugudan .body .content.hblocks .btn-block::before {
    content: "";
    display: block;
    padding-bottom: 120%;
    height: 0;
}

.body_gugudan .headerbar .btn-back span {
    color: #ffda92;
    font-size: 27px;
    display: inline-block;
}

.body_gugudan .headerbar .btn-back i {
    color: #ffcc03;
    vertical-align: middle;
}

.body_gugudan_guide .body .content .btn-block h3 {
    top: 0px;
    bottom: initial;
    background-color: transparent;
    text-shadow: 1px 2px 2px #481d0d;
}

.body_gugudan_guide .body .content .btn-block .thumb {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    padding: 60px 45px 45px 36px;
}

.body_gugudan_guide .body .content .btn-block .thumb .wrap {
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0px 2px 5px #e7e1c2 inset;
}

.body_gugudan .body .content .btn-block::after {
    display: none;
}

.body_gugudan_step {
    background: url(../images/gugudan/lecture_bg.png) no-repeat center top/cover fixed;
}

.body_gugudan_step .body {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
}

.body_gugudan_step .body .content {
    padding: 0px;
    overflow: initial;
}

.body_gugudan_step .body .content.lessons > .wrap {
    padding: 0px 30px;
    white-space: nowrap;
    animation: slideOut 0.8s;
    position: absolute;
    bottom: 20px;
    height: initial;
}

.body_gugudan_step .body::after {
    content: '';
    position: fixed;
    width: 100%;
    left: 0px;
    bottom: 0px;
    background: url(../images/gugudan/track.png) repeat-x left bottom;
    height: 40px;
}


.body_gugudan_step .lessons .lesson {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 270px;
    border: none;
    margin: 0px;
    cursor: pointer;
}

.body_gugudan_step .lessons .lesson::after {
    content: '';
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    background: url(../images/gugudan/train02.png) no-repeat center bottom/contain;
    z-index: 1;
}

.body_gugudan_step .lessons .lesson + .lesson {
    margin-left: 10px;
}

.body_gugudan_step .lessons .lesson + .lesson::before {
    content: '';
    position: absolute;
    left: -28px;
    bottom: 40px;
    z-index: 0;
    width: 40px;
    height: 20px;
    background: url(../images/gugudan/train_link.png) no-repeat center bottom/cover;
}

.body_gugudan_step .lessons .lesson.lesson01 {
    width: 300px;
    margin-left: 10px;
}

.body_gugudan_step .lessons .lesson01::after {
    background: url(../images/gugudan/train01.png) no-repeat center bottom/contain
}

.body_gugudan_step .lessons .lesson .wrap {
    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;
}

.body_gugudan_step .lessons .lesson.lesson01 .wrap {
    left: 63%;
    bottom: 22%;
    width: 40%;
}

.body_gugudan_step .lessons .lesson .wrap::before {
    position: absolute;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 27px;
    color: #fff;
    text-shadow: 0px 2px 2px #333;
    top: 10px;
    left: 5px;
}

.body_gugudan_step .lessons .lesson[data-type="video"] .wrap::before {
    content: '\f144';
}

.body_gugudan_step .lessons .lesson[data-type="mision"] .wrap::before {
    content: '\f11b';
}

.body_gugudan_step .lessons .lesson .wrap .title {
    position: absolute;
    margin: 0px;
    width: 100%;
    line-height: 40px;
    height: 40px;
    left: 0px;
    bottom: 0px;
    text-align: center;
    font-family: "MapleBold";
    font-size: 22px;
    background-color: rgba(0, 0, 0, .7);
    color: #f9e3b0;
    text-shadow: 0 2px 2px #783e0a;
}


/* common */


/*  dabisu guide  */

/*  dcode  */
.body_dcode .headerbar .header-left img {
}

body.body_dabisu.body_dcode .body .btn-block {
  background-position: center bottom 10px;
}

body.body_dabisu.body_dcode .body .btn-block.guide {
  background-image: url(../images/dcode_char00.png);
  background-size: 60%;
  background-position: center bottom 15px;
}

body.body_dabisu.body_dcode .body .btn-block.step1 {
  background-image: url(../images/dcode_char01.png);
  background-size: 50%;
}

body.body_dabisu.body_dcode .body .btn-block.step2 {
  background-image: url(../images/dcode_char02.png);
  background-size: 80%;
  background-position: right 10px bottom 10px;
}

body.body_dabisu.body_dcode .body .btn-block.step3 {
  background-image: url(../images/dcode_char03.png);
  background-size: 80%;
}

.body_dcode_k1 {
  background: #faefd4 url(../images/dcode_k1.jpg) no-repeat left top / cover;
}

.body_lessons.body_dcode_k1 .lectures .box.step1 {
  background: transparent url(../images/dcode_snapshot_01.png) no-repeat center center/cover;
}

.body_lessons.body_dcode_k1 .lectures .box.step2 {
  background: transparent url(../images/dcode_snapshot_02.png) no-repeat center center/cover;
}

.body_lessons.body_dcode_k1 .lectures .box.step3 {
  background: transparent url(../images/dcode_snapshot_03.png) no-repeat center center/cover;
}

.body_lessons.body_dcode_k1 .lectures .box.step4 {
  background: transparent url(../images/dcode_snapshot_04.png) no-repeat center center/cover;
}

.body_lessons.body_dcode_k1 .lectures .box.step5 {
  background: transparent url(../images/dcode_snapshot_05.png) no-repeat center center/cover;
}

.body_lessons.body_dcode_k1 .lectures .box.step6 {
  background: transparent url(../images/dcode_snapshot_06.png) no-repeat center center/cover;
}

/* privacy */

.privacy  {
    font-size: 14px;
}

.privacy  h3 {
    font-size: 16px;
    font-weight: 600;
}

.privacy  p {
    font-size: 14px;
}

/* Validate */

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

.validAdult .wrap {
    border-radius: 15px;
    background-color: #f9c958;
    text-shadow: 1px 1px 1px #000;
}

.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 .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: 40px;
    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;
    vertical-align: text-bottom;
}

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

/* Banner */

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

.fullbanner .wrap {
    background-color: #fff;
    width: 90%;
    height: 90%;
    max-width: 600px;
    max-height: 800px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 1px 1px 5px #333;
}

.fullbanner .wrap .banner {
    display: block;
    width: 100%;
    height: 100%;
}

.fullbanner .close {
    font-size: 50px;
    font-weight: 100;
}

.fullbanner .btns {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: rgba(0, 0, 0, .8);
    overflow: hidden;
}

.fullbanner .btns > a {
    font-size: 17px;
    color: #fff;
    float: left;
    width: 50%;
    padding: 10px;
    text-align: center;
}

.fullbanner .btns > a+a {
    border-left: 1px solid #aaa;
}

.authphone .form-inline {
    display: initial;
}

body form .authphone .pin {
    display: block;
}


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

}

@media screen and (min-width: 1000px) {
  .headerbar .btn-back {
    padding: 10px 30px;
    font-size: 30px;
  }

  .body_main .map .area h5 {
      margin-top: 7%;
      font-size: 40px;
  }

  body.body_dabisu .body .content {
    padding: 100px 30px;
  }

    body.body_dabisu .body .btn-block.lock::before {
        font-size: 80px;
        top: 50%;
    }

  body.body_gugudan_main .headerbar::before {
      width: 400px;
      height: 150px;
      top: 50px;
  }

  .body_gugudan_step .lessons .lesson {
      width: 300px;
      height: 370px;
  }

  .body_gugudan_step .lessons .lesson.lesson01 {
      width: 450px;
  }


  .body_gugudan .lectures .row .box::after {
      bottom: 18%;
  }

  body.body_gugudan .lectures .lecture {
      height: calc((100vh - 300px)/2);
  }

  body.body_dabisu .body .btn-block span {
    font-size: 30px;
    margin-bottom: 10px;
  }

  body.body_dabisu .body .btn-block span.roundbx {
    font-size: 23px;
  }

  body.body_dabisu .body .content > .smry {
    font-size: 25px;
    line-height: 70px;
  }

  #naver_login img, #kakao_login img {
    width: 255px;
  }

  .body_login .loginbx .dabikids > .frmlogin > input {
    font-size: 17px;
  }

  .body_login .loginbx .dabikids > .frmlogin .btn-login {
    font-size: 17px;
  }

  .body_login .loginbx .dabikids > .help > a {
    font-size: 15px;
  }

    body .body .content.hblocks .btn-block {
        width: 33% !important;
    }

    .body_gugudan_guide .body .content .btn-block h3 {
        top: 8px;
        font-size: 30px;
    }

    .body_gugudan_guide .body .content .btn-block .thumb {
        padding: 90px 75px 65px 60px;
    }

    body .body .content.row .btn-block {
        height: 0;
        padding-bottom: 100%;
        margin-bottom: 20px;
        overflow: hidden;
    }

    body.body_games .body .content.row {
        margin: 0px;
        padding: 15px 0px;
        overflow: initial;
        white-space: initial;
        display: flex;
    }

    body.body_games .body .content.row > div {
    }

    body.body_lessons .lectures {
        display: block;
        white-space: initial;
        overflow-x: initial;
        overflow-y: initial;
        height: auto;
        padding: 80px 0px 20px;
    }

    body.body_lessons .lectures > div {
        height: auto;
    }

    body.body_lessons .lectures .box {
        top: initial;
        transform: initial;
    }

}

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

  body.body_gugudan_main .body .row > div {
      padding-left: 5px;
      padding-right: 5px;
  }

  body.body_dabisu .body .content .row > div {
    padding-left: 10px;
    padding-right: 10px;
  }

  .body_lessons .lectures .box .title {
    padding: 5px 30px;
  }

  .body_lessons .lessons > div {
    padding: 0 10px;
  }

}

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

    .body_login .body > .wrap .loginbx {
        margin-left: 0px;
    }

  .hangul_guide .section.area1,
  .hangul_guide .section.area11,
  .hangul_guide .section.area21 {
      padding: 10px 20px;
  }

  .dabisu_guide .section.area2::before {
      height: 10px;
      top: -10px;
  }

  .body_gugudan_main .headerbar::before {
      left: 45%;
  }

  .body_gugudan_main .body .content {
      padding: 10px 15px 0 25px;
  }

  body.body_dabisu .body .content > .smry {
      font-family: "Binggrae";
  }

    body.body_side form .form-control.w300 {
        max-width: 60%;
    }
}

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

  body.body_shop .body .content {
      padding: 10px 20px;
  }


    body.body_profile .col-form-label {
        text-align: left;
    }

    body form .authphone .phone {
        display: inline-block;
    }
}

@media (orientation: portrait) {
    .body_login .body > .wrap {
        padding-left: 0px;
    }

    .body_login .body > .wrap > .logo {
        display: none;
    }

    .body_login .body > .wrap > .loginbx > .logo {
        display: inline-block;
        width: 90%;
    }
}

@keyframes shake {
    10%, 90% {
        transform: translate(-1px, 0);
    }

    20%, 80% {
        transform: translate(2px, 0);
    }

    30%, 50%, 70% {
        transform: translate(-4px, 0);
    }

    40%, 60% {
        transform: translate(4px, 0);
    }
}

@keyframes slideOut {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0%); }
}