/*---- 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) {
  /*header_SNS*/
  .menu_open {
    padding-top: 36%;
    width: 523.25%;
    left: -195%;
  }

  .menu_cont:after {
    top: -4px;
  }

  /*預約按鈕*/
  header .btn_warmup2 {
    margin-top: 39%;
    width: 30%;
    left: 66.11%;
  }

  /* 彈窗 */
  .modal img {
    width: 50%;
  }

  .modal-body ol li {
    font-size: 0.8rem;
  }



  .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(https://images3.iwplay.com.tw/image/p5xsea/main/zh/image/ad/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(https://images3.iwplay.com.tw/image/p5x/events/prelogin_1222/image/noke_flex/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(https://images3.iwplay.com.tw/image/p5xsea/main/zh/image/bg.jpg)
      repeat-y center top;
    background-size: 100%;
  }

  nav {
    position: fixed;
    height: 14.5vw;
    background: url(https://images3.iwplay.com.tw/image/p5xsea/main/zh/image/nav/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 {
    right: 2%;
    width: 46%;
    height: 7vw;
    justify-content: center;
  }

  nav .menu_right .menu,
  nav .menu_right .btn_music,
  nav .menu_right a.followUs_fb,
  nav .menu_right a.menu_language {
    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(https://images3.iwplay.com.tw/image/p5xsea/main/zh/image/nav/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 top;
  }

  nav .menu_right .btn_music:hover {
    transform: initial;
  }

  nav .menu_right a.followUs_fb {
    background: url(https://images3.iwplay.com.tw/image/p5xsea/main/zh/image/snslink/followUs_fb_m.png)
      no-repeat center top;
    background-size: 100%;
  }

  nav .menu_right a.menu_language {
    background: url(https://images3.iwplay.com.tw/image/p5xsea/main/zh/image/language/menu_language_en.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(https://images3.iwplay.com.tw/image/p5xsea/main/zh/image/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(https://images3.iwplay.com.tw/image/p5xsea/main/zh/image/nav/menu_nav_cont.png)
      no-repeat left -4% rgba(0, 0, 0, 0.9);
    background-size: contain;
    z-index: 8;
    transition: 0.5s;
  }

  .menu_mob.on {
    top: 0;
  }

  .pop_close {
    display: block;
    position: absolute;
    padding-top: 10.13%;
    width: 10.13%;
    background: url(https://images3.iwplay.com.tw/image/p5xsea/main/zh/image/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: 7.56%;
    left: 14.2%;
    width: 23.53%;
    background: url(https://images3.iwplay.com.tw/image/p5xsea/main/zh/image/nav/menu_n1.png)
      no-repeat 0 0;
    background-size: 100%;
  }

  /* 有新聞版 */
  .menu_nav.m2 {
    padding-top: 13.46%;
    top: 17.26%;
    left: 25.33%;
    width: 32.33%;
    background: url(https://images3.iwplay.com.tw/image/p5xsea/main/zh/image/nav/menu_n2.png)
      no-repeat 0 0;
    background-size: 100%;
  }

  .menu_nav.m3 {
    padding-top: 11.46%;
    top: 29.33%;
    left: 34.2%;
    width: 32.53%;
    background: url(https://images3.iwplay.com.tw/image/p5xsea/main/zh/image/nav/menu_n3.png)
      no-repeat 0 0;
    background-size: 100%;
  }

  .menu_nav.m4 {
    padding-top: 11.46%;
    top: 41.1%;
    left: 40.13%;
    width: 32.53%;
    background: url(https://images3.iwplay.com.tw/image/p5xsea/main/zh/image/nav/menu_n4.png)
      no-repeat 0 0;
    background-size: 100%;
  }

  .menu_nav.m5 {
    padding-top: 13.73%;
    top: 53.13%;
    left: 48.13%;
    width: 35.73%;
    background: url(https://images3.iwplay.com.tw/image/p5xsea/main/zh/image/nav/menu_n5.png)
      no-repeat 0 0;
    background-size: 100%;
  }

  .menu_nav.m6 {
    padding-top: 13.73%;
    top: 66.13%;
    left: 48.13%;
    width: 35.73%;
    background: url(https://images3.iwplay.com.tw/image/p5xsea/main/zh/image/nav/menu_n6.webp)
      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(https://images3.iwplay.com.tw/image/p5xsea/main/zh/image/nav/menu_n2.png) no-repeat 0 0;
    background-size: 100%;
    display: none;
  }

  .menu_nav.m3 {
    padding-top: 11.46%;
    top: 31.33%;
    left: 31.2%;
    width: 32.53%;
    background: url(https://images3.iwplay.com.tw/image/p5xsea/main/zh/image/nav/menu_n3.png) no-repeat 0 0;
    background-size: 100%;
  }

  .menu_nav.m4 {
    padding-top: 11.46%;
    top: 45.1%;
    left: 40.13%;
    width: 32.53%;
    background: url(https://images3.iwplay.com.tw/image/p5xsea/main/zh/image/nav/menu_n4.png) no-repeat 0 0;
    background-size: 100%;
  }*/

  .wrap_line {
    background: url(https://images3.iwplay.com.tw/image/p5xsea/main/zh/image/wrap_line_m.png)
      no-repeat left top;
    background-size: 100%;
  }

  header {
    height: 160vw;
  }

  .header_bg {
    margin-top: -13%;
    background: url(https://images3.iwplay.com.tw/image/p5xsea/main/zh/image/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%;
    width: 90%;
    left: 0%;
  }

  header .btn_warmup2 {
    position: absolute;
    margin-top: 76.77%;
    width: 46%;
    left: 51.11%;
    opacity: 1;
    animation: infinite-shake 3s infinite;
    animation-delay: 1s;
    transition: 0.5s;
    transition-delay: 0.5s;
    z-index: 2;
  }

  header .btn_warmup2 img {
    width: 100%;
  }

  /*---- app_store ----*/
  .app_icon_box {
    margin-top: 152%;
    padding-bottom: 23%;
    width: 96%;
    left: 2%;
    background: url(https://images1.iwplay.com.tw/image/p5xsea/main/zh/image/app_box_tb.webp) no-repeat center top;
    background-size: 100%;
  }

  .app_icon_box .apple_store {
    width: 39%;
    left: 8%;
    padding-bottom: 14.5%;
    top: 14%;
  }

  .app_icon_box .google_play {
    width: 47%;
    left: 48.5%;
    padding-bottom: 14.5%;
    top: 14%;
  }

  .app_icon_box .windows {
    display: none;
  }
  /* 儲值 */
  #home .pay_box_pc {
    display: none;
  }

  /*儲值區塊_sp*/
  .menu_mob .pay_box_sp {
    position: absolute;
    width: 85%;
    height: auto;
    padding-bottom: 29%;
    top: 74.5%;
    left: 0%;

    background: url(https://images1.iwplay.com.tw/image/p5xsea/main/zh/image/nav/menu_pay_box.webp)
      no-repeat 0 0;
    background-size: 100%;

    display: block;
  }

  .menu_mob .pay_box_sp .pay_word {
    position: absolute;
    width: 75%;
    height: auto;
    padding-bottom: 0%;
    top: 41%;
    left: 11%;
    z-index: 60;

    background-color: #61fbe900;
    /*顏色標記*/

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
  }
  .menu_mob .pay_box_sp .pay_word > a {
    text-decoration: none;
  }
  .menu_mob .pay_box_sp .pay_word .pay_list {
    font-size: 3.9vw;
    color: #fff;
    margin-block-start: 0em;
    margin-block-end: 0em;
  }

  .menu_mob .pay_box_sp .pay_word .pay_list:hover {
    color: #c20000;
  }

  .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: -6%;
    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 0.7%;
  }

  .news_list_item {
    padding: 2.13% 3.33%;
  }

  .news_list_item ul li a {
    padding: 0.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: 3.2vw;
  }

  .news_list_item .system-title .tt {
    font-size: 4vw;
  }

  .news_list_item .systemtime {
    font-size: 2.6vw;
  }

  .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: 0.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.5%;
    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: 51.13%;
    top: 25.52%;
    left: 45.53%;
  }

  .character .role3_2.mob.show {
    width: 74.26%;
    top: 20.63%;
    left: initial;
    right: 6%;
  }

  .character .role4_bg {
    top: 4%;
  }

  .character .role4_bg.mob {
    top: 4%;
  }

  .character .role4_1 {
    width: 52.99%;
    top: 26.62%;
    left: initial;
    right: 14.75%;
  }

  .character .role4_2 {
    top: 18.62%;
  }

  .character .role4_2.mob.show {
    width: 95.78%;
    top: 18.62%;
    left: 29.64%;
  }

  /*切換按鈕*/
  .character .role_change {
    padding-top: 14.93%;
    top: 20.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: 3.4vw;
    font-size: 3vw;
    background: url(https://images3.iwplay.com.tw/image/p5xsea/main/zh/image/character/text_m.png)
      no-repeat center top;
    background-size: 100%;
  }

  .character .roleTextHide {
    padding-top: 12.8%;
    width: 12.8%;
    top: initial;
    bottom: -4.5%;
    right: 4.5%;
  }

  .character .roleTextShow {
    padding-bottom: 5%;
    width: 26.01%;
    height: 6.8vw;
    top: -2%;
    left: initial;
    right: -38.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%;
    padding-bottom: 19%;
  }

  .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(https://images3.iwplay.com.tw/image/p5xsea/main/zh/image/school/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: 75.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: 48%;
    left: 23.79%;
    bottom: 27.7%;
    line-height: 4.26vw;
    font-size: 2.95vw;
    width: 43vw;
  }

  .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(https://images3.iwplay.com.tw/image/p5xsea/main/zh/image/metaverse/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: 47.5%;
    left: 26%;
    line-height: 4.76vw;
    font-size: 2.95vw;
    width: 58.8vw;
  }

  .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: 175.54vw;
  }

  .feature .title {
    width: 62.53%;
  }

  .feature .s1 {
    display: block;
    padding-top: 15.58%;
    width: 14.9%;
    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: 21.5%;
    transform: translate(-50%, 0);
    width: 82.74%;
    height: 27.28%;
  }

  .shape-focus .slider {
    border: 2.66vw solid #fff;
    padding: 2.66vw;
    left: 0;
    top: 0;
    width: 87.2%;
    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: 28.35%;
  }

  .follow_us_bottom {
    bottom: 7%;
    width: 70%;
  }

  .follow_us.follow_us_bottom a {
    padding-top: 15%;
    width: 15%;
    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%;
  }

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