@media screen and (max-width: 1800px) {
  .Char_left01 {
    display: none;
  }
  .people_right {
    display: none;
  }
  .cloud_left {
    display: none;
  }
  .cloud_rigth {
    display: none;
  }
}
@media screen and (max-width: 1600px) {}
@media screen and (max-width: 1366px) {}
@media screen and (max-width: 1200px) {
  .mCSB_inside > .mCSB_container {
    width: 90% !important;
    margin: 0 auto;
  }
  .btn .line {
    display: inline-block;
    padding-top: 4px;
    width: 45px;
    height: 42px;
  }
  a#act {
    background: rgb(46 16 119 / 88%) !important;
    border: 2px solid #862bbf !important;
    border-radius: 30px !important;
    width: 60% !important;
  }
  #darkPop .btnClose, #eventPop .btnClose {
    width: 36px;
    height: 36px;
    top: 0;
    right: -18px;
  }
  header {
    height: 1069px;
  }
  .title {
    margin-top: -4%;
  }
  .loading {
    opacity: 0;
  }
  .btn .line > span {
    display: block;
    margin-top: 10px;
    width: 45px;
    height: 6px;
    background-color: #ffffff;
    transition: .3s ease-out all;
  }
  .btn .line > :nth-child(1) {
    margin-top: 0;
  }
  .btn.close {}
  .btn.close .line > span {
    position: absolute;
  }
  .btn.close span:nth-child(1) {
    transform: translate(-5px, 10px) rotate(67deg);
  }
  .btn.close span:nth-child(2) {
    opacity: 0;
  }
  .btn.close span:nth-child(3) {
    transform: translateX(-5px) rotate(160deg);
  }
  .nav_mob, .nav_mob.on {
    display: block;
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 10;
  }
  .btn.open, .nav_mob, .game_mob {
    display: block;
    z-index: 99;
    position: fixed;
    width: 100%;
    background-color: #212056;
  }
  .nav_mob.on {
    right: 0;
    font-size: 22px;
    font-weight: bold;
  }
  .nav_mob .logo img {
    margin: 50px auto 0;
    max-width: 400px;
  }
  .nav_mob .menu {
    display: block;
    margin-top: 46%;
  }
  .nav_mob .menu li {
    display: block;
    margin: 31px auto;
    height: 64px;
    background: rgb(185 0 0 / 98%);
    border: 1px solid #ffe255;
  }
  .nav_mob a {
    width: 45%;
    display: inline-block;
    background: rgb(13 0 39 / 65%);
    border: 2px solid #250345;
    padding: 12px 6px;
    border-radius: 40px !important;
    /* margin: 24%; */
    height: 25px;
    color: #ffffff;
    position: absolute;
    margin-top: 27%;
    margin-left: -30%;
  }
  .nav_mob .menu li a:hover {
    color: #F7B68A;
  }
  .nav_mob .menu li.active a {
    color: #fff;
  }
  .nav_fb img {
    border: 1px solid rgba(225, 225, 225, .9);
    margin: 50px auto;
    width: 50px;
  }
  .nav_mob, .nav_mob.on {
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 10;
    padding-top: 7%;
    background-image: url(../images/box_m.png);
    background-position: 255;
    background-repeat: no-repeat;
  }
  .popup {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgb(10 0 30 / 90%);
    top: 0;
    left: 0;
    z-index: 999;
    display: none;
  }
  #eventPop .contents .detailInfo {
    background: none;
  }
  #darkPop .btnClose:after, #darkPop .btnClose:before, #eventPop .btnClose:after, #eventPop .btnClose:before {
    width: 36px;
  }
  .popup .btnClose:after, .popup .btnClose:before {
    content: '';
    display: block;
    position: absolute;
    left: 6px;
    height: 5px;
    background-color: #ffffff;
    width: 80px;
    right: 0;
    transition: all .3s ease-in;
    margin-top: -1%;
  }
  #darkPop .contents .classSection, #eventPop .contents .classSection {
    top: 47%;
  }
  .mCustomScrollBox {
    height: 118%;
  }
  .box {
    height: 800px;
    width: 731px;
  }
  .box ol li {
    font-size: 18px;
  }
}
@media screen and (max-width: 1100px) {}
@media screen and (max-width: 640px) {
  html, body {
    min-width: auto;
    background-repeat: no-repeat;
    background-image: none;
  }
  .time {
    margin-left: -13%;
  }
  .bg {
    width: 100%;
    height: 100%;
    background-image: url(../images/bg_s.png);
    -webkit-animation: none;
    -moz-animation: none;
    animation: none;
    background-repeat: no-repeat;
  }
  .mob {
    display: block;
    margin-top: -167%;
    margin-left: 0%;
    width: 100%;
  }
  .fot_mob .pw {
    position: relative;
    margin-top: -7%;
    margin-left: 0%;
    margin-bottom: 3%;
  }
  .logo_s {
    display: block;
    position: absolute;
    margin-top: 10%;
    margin-left: 37%;
  }
  .ribbon_right {
    display: none;
  }
  .balloon_middle {
    display: none;
  }
  .cake {
    display: none;
  }
  .ribbon_left {
    display: none;
  }
  .ribbon_right {
    display: none;
  }
  .people_right {
    display: none;
  }
  .cloud_left {
    display: none;
  }
  .cloud_rigth {
    display: none;
  }
  .pet02 {
    display: none;
  }
  .toy {
    display: none;
  }
  .Char_left {
    display: none;
  }
  .Char_left01 {
    display: none;
  }
  .wrap {
    display: none;
  }
  .balloon {
    display: none;
  }
  .cover {
    display: none;
  }
  footer {
    display: none;
  }
  .about p {
    line-height: 19px;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  footer.fot_mob {
    display: block;
    width: 80%;
    text-align: center;
    color: white;
    margin-top: 12%;
    margin: 57px auto;
  }
  .fot_mob .grade {
    margin-top: 0%;
    /* margin-left: 5%; */
    position: relative;
    display: contents;
  }
  .fot_mob .grade img {
    display: inline-block;
    vertical-align: middle;
    position: absolute;
  }
  .fot_mob .company .pw {
    width: 40%;
    margin-top: 11px;
  }
  .fot_mob p {
    margin-top: -16px;
    margin-bottom: -1%;
  }
  .fot_mob .grade ul {
    display: inline-block;
    line-height: 20px;
    vertical-align: middle;
  }
  .grade li {
    font-size: 14px;
    color: #ffffff;
    list-style-type: none;
    line-height: 17px;
  }
  img.pw {
    width: 32%;
  }
  .act1.evt1 {
    position: absolute;
    margin-left: -30%;
    margin-top: 7%;
  }
  .act2.evt2 {
    position: absolute;
    margin-left: -30%;
    margin-top: 17%;
  }
  .act3.evt3 {
    position: absolute;
    margin-top: 37%;
    margin-left: -22%;
  }
  .act4.evt4 {
    position: absolute;
    margin-top: 47%;
    margin-left: -22%;
  }
  .act5.evt5 {
    position: absolute;
    margin-top: 57%;
    margin-left: -22%;
  }
  .act6.evt6 {
    position: absolute;
    margin-top: 67%;
    margin-left: -22%;
  }
  .act7.evt7 {
    position: absolute;
    margin-top: 77%;
    margin-left: -22%;
  }
  .act8.evt8 {
    position: absolute;
    margin-top: 87%;
    margin-left: -22%;
  }
  .act9.evt9 {
    position: absolute;
    margin-top: 97%;
    margin-left: -22%;
  }
  .act10.evt10 {
    position: absolute;
    margin-top: 107%;
    margin-left: -22%;
  }
  .act11.evt11 {
    position: absolute;
    margin-top: 117%;
    margin-left: -30%;
  }
  .act12.evt12 {
    position: absolute;
    margin-top: 107%;
    margin-left: -22%;
  }
  .act13.evt13 {
    position: absolute;
    margin-top: 117%;
    margin-left: -22%;
  }
  .act14.evt14 {
    position: absolute;
    margin-top: 117%;
    margin-left: -22%;
  }
  .act15.evt15 {
    position: absolute;
    margin-top: 127%;
    margin-left: -22%;
  }
  .act16.evt16 {
    position: absolute;
    margin-top: 137%;
    margin-left: -22%;
  }
  #eventPop .contents .detailInfo {
    width: 657px;
  }
  .mCustomScrollBox {
    max-width: 84%;
  }
  .subtitle {
    font-size: 28px;
    font-weight: bold;
  }
}