@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800&display=swap");





body {
    background-color: #000;
overflow-x:hidden;
  font-family: 'Noto Sans TC', sans-serif;
}

#bg_page {
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: url(../img/bg1.jpg);
    background-position: center calc(50% - -5.5vw);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    animation: light 8s infinite;
}


#bg_page_party {
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: url(../img/bg2.jpg);
    background-position: center calc(50% - -5.5vw);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    animation: light 8s infinite;
}


#rologo {
position: absolute;
    width: 10.3vw;
    height: 4.9vw;
    background-image: url(../img/rologo.png);
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 1;
}

#s4logo {
    position: absolute;
    width: 53.1vw;
    height: 36.44vw;
    background-image: url(../img/s4logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: -2vw;
    margin-left: 29vw;
        z-index: 1;
         pointer-events: none;
}


.npc4 {
    position: absolute;
    width: 100vw;
    height: 57vw;
    background-image: url(../img/bg1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
}



#s4logo_party {
position: absolute;
    width: 53.02vw;
    height: 36.395vw;
    background-image: url(../img/s4logo-party.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 16vw;
    margin-left: 29vw;
        z-index: 1;
         pointer-events: none;
}



#menu_bar {
width: 100%;
    height: 2.5vw;
background: linear-gradient(to right, #7ff8fe00 35%, #5dd7fb59 50%, #ff69a082 75%);

    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    align-items: center;
}

#menu_bar .links {
    display: flex;
    gap: 1.3vw;
}

#menu_bar a {
    color: #fff;
    text-decoration: none;
    font-size: 0.9vw;
    font-weight: 500;
    letter-spacing: 0.15vw;
    transition: color 0.3s;
outline: none;
}

#menu_bar a:hover {
    color: #7ff8fe;
    text-decoration: underline;
}

#login, #logout {
display: flex;
    width: 6vw;
    height: 1.6vw;
    font-size: 0.9vw;
    color: #fff;
    font-weight: 500;
    cursor: pointer;
    clip-path: polygon(7% 0%, 100% 0%, 100% 70%, 93% 100%, 0% 100%, 0% 30%);
    border: none;
    transition: all .3s ease;
    justify-content: center;
    align-items: center;
    margin: 0 1vw;

   user-select: none;
}

#login img, #logout img {
width: 1.1vw;
height: 1.1vw;
}


#login {
    background-color: #4ec0e8;
}

#login:hover{
    background-color: #6ED9FF;
}


#logout {
    background-color: #e84e84;
}

#logout:hover {
    background-color: #F9669A;
}


#login_3 {
display: none;
    width: 6vw;
    height: 1.6vw;
    transition: all .3s ease;
    justify-content: center;
    align-items: center;
    margin: 0 1vw;
   user-select: none;
}


#login_ios, #login_gp, #login_fb {
    position: relative;
    width: 1.5vw;
    height: 1.5vw;
/*    background-color: #6ed9ff;*/
    cursor: pointer;
    z-index: 1;
         filter: brightness(115%);
}

#login_ios {
        background-image: url(../img/iconIos.png);
        background-size: contain;
                background-repeat: no-repeat;
        margin: 0 0.3vw 0 0vw;
}

#login_gp {

        background-image: url(../img/iconGoogle.png);
        background-size: contain;
                background-repeat: no-repeat;
            margin: 0 0.3vw;
}

#login_fb {
        background-image: url(../img/iconFb.png);
        background-size: contain;
                background-repeat: no-repeat;
            margin: 0 0.3vw;
}

#login_ios:hover, #login_gp:hover, #login_fb:hover {
     filter: brightness(125%);
}





.icon {
    margin-left: 0.4vw;
}

.welcome-text {
    color: #fff;
    text-decoration: none;
    font-size: 0.9vw;
    font-weight: 500;
    letter-spacing: 0.15vw;
    transition: color 0.3s;
    margin-left: 1.3vw;
}



#menu_m {
    display: none;
}

#side_menu {
    display: none;
}



@keyframes light {
  0% {
    filter: brightness(100%);
  }
  10% {
    filter: brightness(130%);
  }
  12% {
    filter: brightness(100%);
  }
  50% {
    filter: brightness(100%);
  }
  60% {
    filter: brightness(150%);
  }
  70% {
    filter: brightness(100%);
  }
}


#box_main_black {
position: absolute;
    top: 28vw;
    left: 0;
    width: 100%;
     background-color: #000000db;
    z-index: 2;
    border-top: .2vw solid;
    border-image: linear-gradient(to right, #2edcff, #ff639a) 1;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
        }



#box_main_black_party {
position: absolute;
    top: 48vw;
    left: 0;
    width: 100%;
     background-color: #000000db;
    z-index: 2;
    border-top: .2vw solid;
    border-image: linear-gradient(to right, #2edcff, #ff639a) 1;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
        }


.title_h1 {
    font-size: 2vw;
    font-weight: 600;
    letter-spacing: 0.2vw;
    background: linear-gradient(to right, #7ff8fe 0%, #f66197 100%);
    background-size: 100%;
    background-position: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.title_h2 {
    font-size: 1.3vw;
    font-weight: 600;
    letter-spacing: 0.2vw;
    background: linear-gradient(to right, #7ff8fe 0%, #f66197 100%);
    background-size: 100%;
    background-position: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


.title_img{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 2.5vw 0;
}


.title_img img{
    width: auto;
    height: 5.209vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


@media screen and (min-width: 769px) and (max-width: 1023px) {

body {
    background-color: #000;
overflow-x:hidden;
  font-family: "Microsoft YaHei", Arial, sans-serif;
}

#bg_page {
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: url(../img/bg_pad.jpg);
background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

#bg_page_party {
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: url(../img/bg_pad.jpg);
background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}


#rologo {
position: absolute;
        width: 28vw;
        height: 13vw;
        background-image: url(../img/rologo.png);
        background-size: contain;
        cursor: pointer;
        z-index: 1;
}

#s4logo {
        position: absolute;
        width: 60vw;
        height: 34vw;
        background-image: url(../img/s4logo-m.png);
        background-size: contain;
        background-repeat: no-repeat;
        margin-top: 10vw;
        margin-left: 20vw;
}



#s4logo_party {
        position: absolute;
        width: 60vw;
        height: 34vw;
        background-image: url(../img/s4logo-party-m.png);
        background-size: contain;
        background-repeat: no-repeat;
        margin-top: 33vw;
        margin-left: 20vw;
}



#menu_bar {
width: 100%;
    height: 6.5vw;
background: linear-gradient(to right, #7ff8fe00 50%, #ff69a082 60%);
    position: absolute;
    z-index: 1;
display: none;
    justify-content: flex-end;
    flex-direction: row;
    align-items: center;
}

#menu_bar .links {
    display: flex;
    gap: 1.3vw;
}

#menu_bar a {
    color: #fff;
    text-decoration: none;
    font-size: 2.5vw;
    font-weight: 500;
    letter-spacing: 0.15vw;
    transition: color 0.3s;
outline: none;
margin-right: 2vw;
}

#menu_bar a:hover {
    color: #7ff8fe;
    text-decoration: underline;
}

#menu_m {
display: block;
        width: 7vw;
        height: 7vw;
        background-image: url(../img/menu.png);
        background-color: #00000035;
        background-size: cover;
        position: fixed;
        z-index: 3;
        top: 4vw;
        right: 0;
        cursor: pointer;
}

#menu_m_close {
        display: none;
        position: absolute;
        left: -7vw;
        width: 7vw;
        height: 7vw;
        background-image: url(../img/menu.png);
        background-color: #00000035;
        background-size: cover;
        z-index: 1;
        top: 0vw;
        right: 0;
        cursor: pointer;

}



#side_menu {
display: flex;
        position: fixed;
        top: 4vw;
        right: -50%;
        width: 28vw;
        height: auto;
        padding-bottom: 5vw;
        background-color: #000000e0;
        transition: right 0.3s ease;
        z-index: 100;
        align-items: center;
        flex-direction: column;
        justify-content: flex-start;
}



#side_menu ul {
  padding: 0;
  list-style-type: none;
}

#side_menu ul li {
        margin: 3vw 0;
        font-size: 2.5vw;
}

#side_menu ul li a {
  color: white;
  text-decoration: none;
}


#login-m, #logout-m {
display: flex;
        width: 19vw;
        height: 4.5vw;
        font-size: 2.5vw;
        color: #fff;
        font-weight: 500;
        cursor: pointer;
        clip-path: polygon(7% 0%, 100% 0%, 100% 70%, 93% 100%, 0% 100%, 0% 30%);
        border: none;
        transition: all .3s ease;
        margin: 0 1vw;
        user-select: none;
        justify-content: center;
        align-items: center;
}

#login-m img, #logout-m img {
        width: 3.2vw;
        height: 3.2vw;
}



#login-m {
    background-color: #4ec0e8;
}


#logout-m {
    background-color: #e84e84;
}








.icon-m {
    margin-left: 0.4vw;
}

.welcome-text-m {
margin-right: 0vw;
        color: #fff;
        text-decoration: none;
        font-size: 2vw;
        font-weight: 500;
        letter-spacing: 0.15vw;
        transition: color 0.3s;
        margin-top: 1.5vw;
        margin-left: 0vw;
}




#box_main_black {
position: absolute;
        top: 113vw;
        left: 0;
        width: 100%;
        background-color: #000000db;
        z-index: 2;
        border-top: .5vw solid;
        border-image: linear-gradient(to right, #2edcff, #ff639a) 1;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        padding: 5vw 0 0 0;
    transform: scale(1.5);
        }


#box_main_black_party {
position: absolute;
        top: 113vw;
        left: 0;
        width: 100%;
        background-color: #000000db;
        z-index: 2;
        border-top: .5vw solid;
        border-image: linear-gradient(to right, #2edcff, #ff639a) 1;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        padding: 5vw 0 0 0;
    transform: scale(1.5);
        }



.title_h1 {
    font-size: 2vw;
    font-weight: 600;
    letter-spacing: 0.2vw;
    background: linear-gradient(to right, #7ff8fe 0%, #f66197 100%);
    background-size: 100%;
    background-position: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.title_h2 {
    font-size: 1.3vw;
    font-weight: 600;
    letter-spacing: 0.2vw;
    background: linear-gradient(to right, #7ff8fe 0%, #f66197 100%);
    background-size: 100%;
    background-position: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


.title_img{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 2.5vw 0;
}


.title_img img{
    width: auto;
    height: 8.5vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


}


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


body {
    background-color: #000;
overflow-x:hidden;
  font-family: "Microsoft YaHei", Arial, sans-serif;
}


#bg_page {
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: url(../img/bg_m.jpg);
background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}



#bg_page_party {
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: url(../img/bg_m.jpg);
background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}



#rologo {
position: absolute;
        width: 28vw;
        height: 13vw;
        background-image: url(../img/rologo.png);
        background-size: contain;
        cursor: pointer;
        z-index: 1;
}

#s4logo {
        position: absolute;
        width: 90vw;
        height: 50vw;
        background-image: url(../img/s4logo-m.png);
        background-size: contain;
        background-repeat: no-repeat;
        margin-top: 30vw;
        margin-left: 8vw;
}


    .npc4 {
        position: absolute;
        top: 0;
        width: 100vw;
        height: 180vw;
        background-image: url(../img/bg_m.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top;
    }


#s4logo_party {
        position: absolute;
        width: 90vw;
        height: 50vw;
        background-image: url(../img/s4logo-party-m.png);
        background-size: contain;
        background-repeat: no-repeat;
        margin-top: 64vw;
        margin-left: 8vw;
}


#menu_bar {
width: 100%;
    height: 6.5vw;
background: linear-gradient(to right, #7ff8fe00 50%, #ff69a082 60%);
    position: absolute;
    z-index: 1;
display: none;
    justify-content: flex-end;
    flex-direction: row;
    align-items: center;
}

#menu_bar .links {
    display: flex;
    gap: 1.3vw;
}

#menu_bar a {
    color: #fff;
    text-decoration: none;
    font-size: 2.5vw;
    font-weight: 500;
    letter-spacing: 0.15vw;
    transition: color 0.3s;
outline: none;
margin-right: 2vw;
}

#menu_bar a:hover {
    color: #7ff8fe;
    text-decoration: underline;
}

#menu_m {
display: block;
        width: 8vw;
        height: 8vw;
        background-image: url(../img/menu.png);
        background-color: #00000035;
        background-size: cover;
        position: fixed;
        z-index: 3;
        top: 0;
        right: 0;
        cursor: pointer;
}

#menu_m_close {
      display: none;
  position: absolute;
left: -9vw;
        width: 9vw;
        height: 9vw;
        background-image: url(../img/menu.png);
        background-color: #00000035;
        background-size: cover;
        z-index: 1;
        top: 0;
        right: 0;
        cursor: pointer;

}



#side_menu {
        display: flex;
        position: fixed;
        top: 0;
        right: -50%;
        width: 33vw;
        height: auto;
        padding-bottom: 5vw;
        background-color: #000000e0;
        transition: right 0.3s ease;
        z-index: 100;
        align-items: center;
        flex-direction: column;
        justify-content: flex-start;
        text-align: center;
}



#side_menu ul {
  padding: 0;
  list-style-type: none;
}

#side_menu ul li {
margin: 5vw 0;
        font-size: 3.5vw;
}

#side_menu ul li a {
  color: white;
  text-decoration: none;
}


#login-m, #logout-m {
display: flex;
width: 23vw;
        height: 6vw;
        font-size: 3.5vw;
        color: #fff;
        font-weight: 500;
        cursor: pointer;
        clip-path: polygon(7% 0%, 100% 0%, 100% 70%, 93% 100%, 0% 100%, 0% 30%);
        border: none;
        transition: all .3s ease;
        margin: 0 1vw;
        user-select: none;
        justify-content: center;
        align-items: center;
}

#login-m img, #logout-m img {
        width: 4.2vw;
        height: 4.2vw;
}



#login-m {
    background-color: #4ec0e8;
}


#logout-m {
    background-color: #e84e84;
}



#login_3-m {
display: none;
    width: auto;
    height: auto;
    transition: all .3s ease;
    justify-content: center;
    align-items: center;
    margin: 0 1vw;
   user-select: none;
}


#login_ios-m, #login_gp-m, #login_fb-m {
    position: relative;
    width: 6vw;
    height: 6vw;
/*    background-color: #6ed9ff;*/
    cursor: pointer;
    z-index: 1;
         filter: brightness(115%);
}

#login_ios-m {
        background-image: url(../img/iconIos.png);
        background-size: contain;
                background-repeat: no-repeat;
                margin: 0 2vw 0 1vw;
}

#login_gp-m {

        background-image: url(../img/iconGoogle.png);
        background-size: contain;
                background-repeat: no-repeat;
            margin: 0 0.3vw;
}

#login_fb-m {
        background-image: url(../img/iconFb.png);
        background-size: contain;
                background-repeat: no-repeat;
            margin: 0 0.3vw;
}



.icon-m {
    margin-left: 0.4vw;
}

.welcome-text-m {
margin-right: 0vw;
        color: #fff;
        text-decoration: none;
        font-size: 2.5vw;
        font-weight: 500;
        letter-spacing: 0.15vw;
        transition: color 0.3s;
        margin-top: 1.5vw;
        margin-left: 0vw;
}




#box_main_black {
position: absolute;
        top: 130vw;
        left: 0;
        width: 100%;
        background-color: #000000db;
        z-index: 2;
        border-top: .5vw solid;
        border-image: linear-gradient(to right, #2edcff, #ff639a) 1;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        padding: 5vw 0 0 0;
        }


#box_main_black_party {
position: absolute;
        top: 145vw;
        left: 0;
        width: 100%;
        background-color: #000000db;
        z-index: 2;
        border-top: .5vw solid;
        border-image: linear-gradient(to right, #2edcff, #ff639a) 1;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        padding: 5vw 0 0 0;
        }




.title_h1 {
    font-size: 2vw;
    font-weight: 600;
    letter-spacing: 0.2vw;
    background: linear-gradient(to right, #7ff8fe 0%, #f66197 100%);
    background-size: 100%;
    background-position: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.title_h2 {
    font-size: 1.3vw;
    font-weight: 600;
    letter-spacing: 0.2vw;
    background: linear-gradient(to right, #7ff8fe 0%, #f66197 100%);
    background-size: 100%;
    background-position: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


.title_img{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 2.5vw 0;
}


.title_img img{
    width: auto;
    height: 13.5vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


}