/*---- Mobile ----*/
@media screen and (max-width: 1200px) {
  footer .copyright p {
    margin-top: 0;
  }
  footer .company {
    margin-bottom: 0;
  }
  footer .company img {
    margin: 0 3px;
  }
  footer .company img:nth-child(2), footer .company img:nth-child(3) {
    max-width: 80px;
  }
}

@media screen and (max-width: 1100px) {
  .noke_flex_pc {
    display: none;
  }
  .noke_flex_sp img {
    width: 100%;
    height: 100%;
  }
  .noke_flex_sp {
    position: fixed;
    width: 100%;
    height: auto;
    padding-bottom: 23.5%;
    bottom: 0;
    left: 0%;
    z-index: 70;
    overflow: hidden;
    background-image: url(../noke_flex_tb.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    cursor: pointer;
    transition: all 0.5s ease;
    display: block;
    /*左邊*/
  }
  .noke_flex_sp .noke_left {
    position: absolute;
    width: 28%;
    height: auto;
    padding-bottom: 25.5%;
    bottom: 0%;
    left: 0%;
    z-index: 60;
  }
  .noke_flex_sp .noke_left .noke_red_sl {
    position: absolute;
    width: 100%;
    height: auto;
    padding-bottom: 0%;
    top: 23%;
    left: 0%;
    z-index: 1;
    animation: spin_star 15s linear infinite;
  }
  .noke_flex_sp .noke_left .noke_rie {
    position: absolute;
    width: 96%;
    height: auto;
    padding-bottom: 0%;
    top: 8%;
    left: 0%;
    z-index: 2;
  }
  @keyframes spin_star {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .noke_flex_sp.scroll {
    bottom: 0%;
    transition: all 0.5s ease;
    /*星星*/
  }
  .noke_flex_sp .star_1 {
    position: absolute;
    width: 2%;
    height: auto;
    padding-bottom: 0%;
    top: 25%;
    left: 2%;
    z-index: 61;
    animation: spin_star 3s linear infinite;
  }
  .noke_flex_sp .star_2 {
    position: absolute;
    width: 5.2%;
    height: auto;
    padding-bottom: 0%;
    top: 82%;
    left: -2%;
    z-index: 61;
    animation: spin_star 5s linear infinite;
  }
  .noke_flex_sp .star_3 {
    position: absolute;
    width: 4%;
    height: auto;
    padding-bottom: 0%;
    top: 13%;
    left: 24%;
    z-index: 61;
    animation: spin_star 4s linear infinite;
  }
  .noke_flex_sp .star_4 {
    position: absolute;
    width: 3%;
    height: auto;
    padding-bottom: 0%;
    top: 88%;
    left: 25%;
    z-index: 61;
    animation: spin_star 3s linear infinite;
  }
  .noke_flex_sp .star_5 {
    position: absolute;
    width: 3%;
    height: auto;
    padding-bottom: 0%;
    top: 72%;
    left: 30%;
    z-index: 61;
    display: none;
    animation: spin_star 6.5s linear infinite;
  }
  .noke_flex_sp .star_6 {
    position: absolute;
    width: 5%;
    height: auto;
    padding-bottom: 0%;
    top: 48%;
    left: 90%;
    z-index: 61;
    display: none;
    animation: spin_star 2s linear infinite;
  }
}


@media (max-width:767px) {
  .noke_flex_sp {
    padding-bottom: 30.5%;
    background-image: url(../noke_flex_sp.webp);
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .noke_flex_sp .noke_left {
    width: 37%;
    padding-bottom: 32.5%;
  }
  .noke_flex_sp.scroll {
    bottom: 0%;
  }
  /*星星*/
  .noke_flex_sp .star_1 {
    width: 3%;
    top: 21%;
    left: 2%;
    transform-origin: center center;
  }
  .noke_flex_sp .star_2 {
    width: 6.2%;
    top: 72%;
    left: 2%;
    transform-origin: center center;
  }
  .noke_flex_sp .star_3 {
    width: 4%;
    top: 13%;
    left: 30%;
    transform-origin: center center;
  }
  .noke_flex_sp .star_4 {
    width: 5%;
    top: 62%;
    left: 38%;
    transform-origin: center center;
    display: none;
  }
  .noke_flex_sp .star_5 {
    width: 3%;
    top: 82%;
    left: 27%;
    transform-origin: center center;
  }
  .noke_flex_sp .star_6 {
    width: 5%;
    top: 48%;
    left: 90%;
    transform-origin: center center;
  }
}

@media screen and (max-width: 750px) {
  body {
    background: url(../bg.jpg) repeat-y center top;
    background-size: 100%;
  }
  nav {
    position: fixed;
    height: 14.5vw;
    background: url(../fixed_top.jpg) no-repeat center top;
  }
  .content, .news {
    width: 100%;
  }
  nav .content {
    display: none;
  }
  nav .content.mob {
    display: block;
  }
  nav .gameinfo_mob {
    position: absolute;
    padding-top: 1.8%;
    padding-left: 1.33%;
    top: 0;
    display: flex;
    align-items: center;
  }
  nav .gameinfo_mob .icon {
    width: 10.88%;
  }
  nav .gameinfo_mob dl {
    margin-left: 2%;
    color: #fff;
  }
  nav .gameinfo_mob dt {
    font-size: 3.46vw;
  }
  nav .gameinfo_mob dd {
    font-size: 2.66vw;
  }
  nav .menu_right {
    right: 21%;
    width: 28%;
    height: 7vw;
    justify-content: center;
  }
  nav .menu_right .menu, nav .menu_right .btn_music, nav .menu_right a.followUs_fb {
    position: relative;
    margin: 0 3.5%;
    padding-top: 24.97%;
    width: 24.97%;
    transition: initial;
    cursor: pointer;
    overflow: hidden;
  }
  nav .menu_right .menu {
    background: url(../menu_nav_open.png) no-repeat center top;
    background-size: 100%;
  }
  nav .menu_right .menu::after {
    display: none;
  }
  nav .menu_right .btn_music.off {
    background-position: center bottom;
  }
  nav .menu_right .btn_music:hover {
    transform: initial;
  }
  nav .menu_right a.followUs_fb {
    background: url(../followus_fb_m.png) no-repeat center top;
    background-size: 100%;
  }
  nav .btn_prelogin {
    position: absolute;
    margin-top: 0;
    padding-top: 15.6%;
    top: 0;
    right: 0;
    width: 22%;
    z-index: 5;
    background: url(../btn-join.png) no-repeat right top;
    background-size: 100%;
    transform: initial;
    transition: initial;
  }
  nav .btn_prelogin:hover {
    background-position: initial;
    transform: initial;
  }
  .menu_mob {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../menu_nav_cont.png) no-repeat left -4% rgba(0, 0, 0, 0.9);
    background-size: contain;
    z-index: 8;
    transition: .5s;
  }
  .menu_mob.on {
    top: 0;
  }
  .pop_close {
    display: block;
    position: absolute;
    padding-top: 10.13%;
    width: 10.13%;
    background: url(../pop_close.png) no-repeat 0 0;
    background-size: 100%;
    cursor: pointer;
  }
  .menu_mob .pop_close {
    top: 3.7%;
    right: 6.26%;
  }
  .menu_nav {
    position: absolute;
  }
  a.menu_nav {
    transition: initial;
  }
  .menu_nav.m1 {
    padding-top: 12%;
    top: 19.56%;
    left: 23.2%;
    width: 22.53%;
    background: url(../menu_n1.png) no-repeat 0 0;
    background-size: 100%;
  }
  .menu_nav.m2 {
    padding-top: 13.46%;
    top: 28.26%;
    left: 25.33%;
    width: 31.33%;
    background: url(../menu_n2.png) no-repeat 0 0;
    background-size: 100%;
  }
  .menu_nav.m3 {
    padding-top: 11.46%;
    top: 37.33%;
    left: 41.2%;
    width: 32.53%;
    background: url(../menu_n3.png) no-repeat 0 0;
    background-size: 100%;
  }
  .menu_nav.m4 {
    padding-top: 11.46%;
    top: 48.1%;
    left: 40.13%;
    width: 32.53%;
    background: url(../menu_n4.png) no-repeat 0 0;
    background-size: 100%;
  }
  .menu_nav.m5 {
    padding-top: 13.73%;
    top: 58.13%;
    left: 48.13%;
    width: 35.73%;
    background: url(../menu_n5.png) no-repeat 0 0;
    background-size: 100%;
  }
  .wrap_line {
    background: url(../wrap_line_m.png) no-repeat left top;
    background-size: 100%;
  }
  header {
    height: 160vw;
  }
  .header_bg {
    margin-top: -13%;
    background: url(../header2_m.png) no-repeat center bottom;
    background-size: 100%;
  }
  .logo.mob {
    display: block;
    margin-top: 18%;
    width: 28.66%;
    left: 5%;
    z-index: 5;
  }
  .role1 {
    margin-top: 31.7%;
    width: 100%;
  }
  .role1 img {
    display: none;
  }
  .role1 img.mob {
    display: block;
  }
  .s1, .s2, .s3, .s4, .s5, .s6, .s7 {
    display: none;
  }
  header .s1 {
    display: block;
    margin-top: 27.86%;
    padding-top: 9.33%;
    width: 9.33%;
    left: initial;
    right: 1.9%;
  }
  header .s2 {
    display: block;
    margin-top: 40%;
    padding-top: 6.66%;
    width: 6.66%;
    left: 2%;
  }
  .slogan {
    margin-top: 128.6%;
    width: 96.2%;
    left: -15%;
  }
  .pv_box {
    margin-top: 123.27%;
    padding-top: 13%;
    width: 13%;
    right: 6%;
  }
  header .btn_prelogin {
    position: absolute;
    margin-top: 141.27%;
    width: 85%;
    right: 5.92%;
  }
  header .btn_warmup {
    position: absolute;
    margin-top: 105.77%;
    width: 80%;
    left: -3%;
  }
  .news {
    padding-bottom: 0;
    background: none;
  }
  .news .title {
    position: relative;
    margin-top: 25.7%;
    width: 50.66%;
  }
  .news .title img {
    display: none;
  }
  .news .title img.mob {
    display: block;
  }
  .news .content {
    margin-top: 0;
    padding-top: 0;
    width: 100%;
  }
  .news .more {
    margin-top: 59.5%;
    padding-top: 10.66%;
    right: 3.2%;
    top: 0;
    width: 11.33%;
  }
  .bn, .news_content {
    width: 100%;
    left: 0;
  }
  .news_content {
    padding: 5% 0 1.5%;
  }
  .news_list li {
    margin: 0 .7%;
  }
  .news_list_item {
    padding: 2.13% 3.33%;
  }
  .news_list_item ul li a {
    padding: .95% 0 1.43%;
    padding-left: 1.66%;
  }
  .news_list_item ul li .newsdetails-badge, .newsdetails-newsbadge, .newsdetails-sysbadge {
    padding: 0.33% 2.2%;    
  }
  .news_list_item .system-title {
    font-size: 2.2vw;
  }
  .news_list_item .system-title .tt {
    font-size: 3.2vw;
  }
  .news_list_item .systemtime {
    font-size: 2vw;
  }
  .news .s1.mob {
    display: block;
    top: -7%;
    padding-top: 14.13%;
    width: 14%;
    left: 31.96%;
    z-index: 5;
  }
  .news .s2.mob {
    display: block;
    top: 12.7%;
    padding-top: 13.2%;
    width: 13.6%;
    right: 1.33%;
    z-index: 5;
  }
  .character, .character_wrap, .school, .school_wrap, .metaverse, .metaverse_wrap, .feature {
    width: 100%;
  }
  .character {
    height: 249.26vw;
  }
  .character .title {
    width: 69.33%;
    top: .3%;
  }
  .character_wrap {
    margin-left: 0;
    left: 0;
  }
  .character .role1_bg, .character .role1_2, .character .role2_bg, .character .role3_bg, .character .role3_2, .character .role4_bg, .character .role4_2 {
    display: none;
  }
  .character .role1_bg.mob, .character .role1_2.mob.show, .character .role2_bg.mob, .character .role3_bg.mob, .character .role3_2.mob.show, .character .role4_bg.mob, .character .role4_2.mob.show {
    display: block;
    width: 100%;
    left: 0;
  }
  .character .role1_bg.mob {
    top: 13.5%;
  }
  .character .role1_1 {
    width: 55.86%;
    top: 27.55%;
    right: 6.1%;
  }
  .character .role1_2 {
    top: 26.04%;
  }
  .character .role2_bg.mob {
    width: 88.13%;
    top: 9.5%;
  }
  .character .role2_1 {
    width: 69.86%;
    top: 31.50%;
    left: initial;
    right: 10.5%;
  }
  .character .role2_2 {
    width: 73.86%;
    top: 28.41%;
    left: initial;
    right: 4.3%;
  }
  .character .role3_bg {
    top: 5.67%;
  }
  .character .role3_1 {
    width: 56.13%;
    top: 22.52%;
    left: 45.53%;
  }
  .character .role3_2.mob.show {
    width: 74.26%;
    top: 18.63%;
    left: initial;
    right: 0;
  }
  .character .role4_bg {
    top: 4%;
  }
  .character .role4_1 {
    width: 52.99%;
    top: 26.62%;
    left: initial;
    right: 14.75%;
  }
  .character .role4_2 {
    top: 18.62%;
  }
  .character .role_change {
    padding-top: 14.93%;
    top: 19.1%;
    right: 6.6%;
    width: 28%;
  }
  .character .text {
    padding: 0 15.77%;
    width: 100%;
    height: 65.2vw;
    top: 57.25%;
    left: 2.66%;
    line-height: 4.8vw;
    font-size: 3.2vw;
    background: url(../text_m.png) no-repeat center top;
    background-size: 100%;
  }
  .character .roleTextHide {
    padding-top: 8.8%;
    width: 8.8%;
    top: initial;
    bottom: -.5%;
    right: 3.5%;
  }
  .character .roleTextShow {
    padding-bottom: 0;
    width: 21.01%;
    height: 2.8vw;
    top: 0;
    left: initial;
    right: -9.5%;
  }
  .character .mask_role {
    top: -16.5%;
    left: 1.33%;
    width: 25.64%;
  }
  .character .mark_role {
    display: none;
  }
  .character .name_role {
    left: 1.33%;
    top: 80%;
  }
  .character .name_role1 {
    padding-top: 37.46%;
    width: 52.8%;
  }
  .character .name_role2 {
    padding-top: 40.93%;
    width: 62%;
  }
  .character .name_role3 {
    padding-top: 45.06%;
    width: 66.53%;
    top: 79%;
  }
  .character .name_role4 {
    padding-top: 45.06%;
    width: 66.53%;
    background-size: 75%;
  }
  .character .prev, .character .next {
    width: 10.22%;
  }
  .character .prev {
    top: 39.71%;
    left: 0%;
  }
  .character .next {
    top: 40.31%;
    right: 1%;
  }
  .character .pagination_box {
    top: 11.3%;
    right: 8%;
    width: 64.8%;
  }
  .character .s1 {
    display: block;
    padding-top: 24.4%;
    width: 23.2%;
    top: 0;
    left: 6%;
  }
  .character .s8 {
    display: block;
    padding-top: 13.86%;
    width: 13.86%;
    bottom: 3.5%;
    left: 1%;
  }
  .school {
    height: 121.4vw;
  }
  .school .title {
    width: 88.93%;
    top: -1.2%;
    left: 0;
  }
  .school .wrap {
    padding-top: 92.93%;
    width: 94%;
    top: 6.4%;
    left: initial;
    right: 0;
    background: url(../wrap_m.png) no-repeat center top;
    background-size: 100%;
  }
  .school .slide1_role, .school .slide2_role, .school .slide3_role {
    display: none;
  }
  .school .slide1_role.mob, .school .slide2_role.mob, .school .slide3_role.mob {
    display: block;
  }
  .school .slide1_tit {
    width: 91.86%;
    left: 6.2%;
  }
  .school .slide1_role {
    width: 34%;
    right: 0;
    top: initial;
    bottom: 12.1%;
  }
  .school .slide2_tit {
    width: 61.06%;
    top: 24%;
    left: 14%;
    z-index: 1;
  }
  .school .slide2_role {
    width: 29.73%;
    right: 0;
    top: initial;
    bottom: 20.2%;
  }
  .school .slide3_tit {
    width: 58.53%;
    left: 15.5%;
    top: 23.5%;
  }
  .school .slide3_role {
    width: 31.46%;
    right: 0;
    top: initial;
    bottom: 20.2%;
  }
  .school .slide_text .pc {
    display: none;
  }
  .school .slide_text, .school .slide_text p.mob {
    display: block;
    top: initial;
    left: 23.79%;
    bottom: 27.7%;
    line-height: 4.26vw;
    font-size: 2.95vw;    
  }
  .school .thumbnail_box {
    padding-top: 35.46%;
    top: initial;
    left: initial;
    right: 3.1%;
    bottom: 1%;
    width: 43.6%;
  }
  .school .thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .school .prev, .school .next {
    width: 10.34%;
    top: 46%;
  }
  .school .s1 {
    display: block;
    padding-top: 8.8%;
    width: 8.4%;
    top: initial;
    bottom: 7.5%;
    left: 18%;
  }
  .metaverse {
    height: 144.67vw;
  }
  .metaverse .title {
    width: 90.8%;
    top: -1.6%;
    left: 3.5%;
  }
  .metaverse .wrap {
    padding-top: 92.93%;
    width: 95.6%;
    left: 0;
    top: 11%;
    background: url(../wrap_m.png) no-repeat center top;
    background-size: 100%;
  }
  .metaverse .slide1_role, .metaverse .slide2_role, .metaverse .slide3_role, .metaverse .slide4_role {
    display: none;
  }
  .metaverse .slide1_role.mob, .metaverse .slide2_role.mob, .metaverse .slide3_role.mob, .metaverse .slide4_role.mob {
    display: block;
    left: 0;
  }
  .metaverse .slide1_tit {
    width: 81.73%;
    left: initial;
    right: 1.33%;
    top: 21.5%;
    z-index: 1;
  }
  .metaverse .slide1_role.mob {
    width: 30.4%;
    top: 16.5%;
  }
  .metaverse .slide2_tit {
    width: 72.53%;
    left: initial;
    right: 4.3%;
    top: 20.5%;
    z-index: 1;
  }
  .metaverse .slide2_role.mob {
    width: 36.4%;
    top: 12%;
  }
  .metaverse .slide3_tit {
    width: 73.73%;
    left: initial;
    right: 1.33%;
    top: 21.6%;
    z-index: 1;
  }
  .metaverse .slide3_role.mob {
    width: 39.6%;
    top: 4.3%;
  }
  .metaverse .slide4_tit {
    width: 72.93%;
    top: 19.5%;
    left: initial;
    right: 2.8%;
    z-index: 1;
  }
  .metaverse .slide4_role.mob {
    width: 35.2%;
    top: 14.3%;
  }
  .metaverse .slide_text {
    top: 50.5%;
    left: 26%;
    line-height: 4.26vw;
    font-size: 3.2vw;
  }
  .metaverse .slide_text.t3 {
    top: 53.5%;
    left: 33.5%;
  }
  .metaverse .slide_text.t4 {
    top: 52.8%;
    left: 32.3%;
  }
  .metaverse .slide_text p.pc {
    display: none;
  }
  .metaverse .slide_text p.mob {
    display: block;
  }
  .metaverse .thumbnail_box {
    padding-top: 33.46%;
    width: 43.26%;
    left: 1.33%;
    top: initial;
    bottom: 9.5%;
  }
  .metaverse .thumbnail {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .metaverse .prev, .metaverse .next {
    width: 10.34%;
    top: 46%;
  }
  .feature {
    height: 312.54vw;
  }
  .feature .title {
    width: 62.53%;
  }
  .feature .s1 {
    display: block;
    padding-top: 15.58%;
    width: 14.90%;
    left: initial;
    right: 27%;
    top: -1.8%;
  }
  .feature .s2 {
    display: block;
    padding-top: 8.6%;
    width: 8.73%;
    left: initial;
    right: 19%;
    top: -1.5%;
  }
  .shape-focus {
    margin-left: 5%;
    top: 11.5%;
    transform: translate(-50%, 0);
    width: 79.74%;
    height: 42.28%;
  }
  .shape-focus .slider {
    border: 2.66vw solid #fff;
    padding: 2.66vw;
    left: 0;
    top: 0;
    width: 87.20%;
    height: 92.83%;
  }
  .shape-focus .slider-panel .slider .content img.pc {
    display: none;
  }
  .shape-focus .slider-panel .slider .content img.mob {
    display: block;
  }
  .shape-focus .prev-btn, .shape-focus .next-btn {
    padding-top: 17.19%;
    width: 12.97%;
    top: 45.3%;
    z-index: 5;
  }
  .shape-focus .prev-btn, .shape-focus .prev-btn:hover {
    left: -16%;
  }
  .shape-focus .next-btn, .shape-focus .next-btn:hover {
    right: -4%;
  }
  .concept_box {
    width: 43.33%;
    bottom: 23.35%;
  }
  .follow_us_bottom {
    bottom: 5%;
    width: 75%;
  }
  .follow_us.follow_us_bottom a {
    padding-top: 11.45%;
    width: 11.45%;
    opacity: 1;
  }
  .go_top {
    display: block;
    position: absolute;
    margin: 0 auto;
    padding-top: 15.84%;
    width: 15.84%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 3.6%;
  }
  .pop_bigPic_cont {
    border: 1.06vw solid #979797;
    width: 94%;
    height: 52.53vw;
  }
  .pop_bigPic_cont .pop_close {
    top: initial;
    left: 50%;
    bottom: -25%;
    transform: translateX(-50%);
  }
  footer .company {
    max-width: 300px;
  }
  footer .company img {
    margin: 3px;
    max-width: 120px;
  }
}