@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');



/* 網頁捲軸【寬度】 */
::-webkit-scrollbar {
    width: 10px;
}

/* 網頁捲軸【背景】顏色 */
::-webkit-scrollbar-track {
    background: #e8e6e6;
}

/* 網頁捲軸【把手】顏色 */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #fe21e4;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    /* background: url(../images/1920.jpg) no-repeat;
    background-size: 100% auto; */
    background-color: #e8e6e6;
    font-family: "Noto Sans JP", sans-serif;
 user-select: none;

}

img {
    padding: 0;
    margin: 0;
    border: 0;
}


.section_top {
    position: relative;
    width: 100vw;
    height: 63.8vw;
    background: url(../images/topBg.jpg) no-repeat;
    background-size: 100% auto;
    overflow: hidden;
    z-index: 0;
}

.marqueeStyle {
    position: absolute;
    color: #ffffff;
    background-color: #fe21e4;    
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.activeZindex .marqueeStyle {
    z-index: 0;
}

.maequeeScroll{
    display: flex;
}

.marqueeContainer{
    font-size: 1.6vw;
    line-height: 2.4vw;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.marqueeContainer:nth-child(1){
    white-space: nowrap;
    text-transform: uppercase;
    animation: scroll1 60s linear infinite;
}

.marqueeContainer:nth-child(2){
    white-space: nowrap;
    text-transform: uppercase;
    animation: scroll2 60s linear infinite;
    animation-delay: -30s;
}

@keyframes scroll1{
    from{
        transform: translateX(100%);
    }
    to{
        transform: translateX(-100%);
    }
}

@keyframes scroll2{
    from{
        transform: translateX(0%);
    }
    to{
        transform: translateX(-200%);
    }
}

.visionBox {
    position: absolute;
    margin: 0 0 0 1vw;
}

.topBgPaint {
    position: absolute;
    width: 96.6vw;
    height: 60vw;
    background: url(../images/topBgPaint.png) no-repeat;
    background-size: 100% auto;
    z-index: -1;
}

.topBgRole {
    position: absolute;
    width: 90.5vw;
    height: 55vw;
    background: url(../images/topBgRole.png) no-repeat;
    background-size: 100% auto;
    left: 3.6vw;
    top: 1.3vw;
    z-index: -1;
}

.topBgDecorate {
    position: absolute;
    width: 81.2vw;
    height: 27vw;
    background: url(../images/topBgDecorate.png) no-repeat;
    background-size: 100% auto;
    left: 14.2vw;
    top: 26vw;
    z-index: -1;
}

.fivethLogo {
    position: absolute;
    width: 29.5vw;
    height: 24.5vw;
    background: url(../images/5thLogo.png) no-repeat;
    background-size: 100% auto;
    left: 1.6vw;
    top: 32.2vw;
}

.followUs {
    position: absolute;
    top: 29vw;
    display: flex;
    flex-direction: column;
    z-index: 999;
}

.followUsBtn {
    width: 2vw;
    height: 2vw;
    margin: 1vw;
    z-index: 999;
}

.followUsBtn:nth-child(1) {
    background: url(../images/btnHome.png) no-repeat;
    background-size: 100% auto;
    background-position: center center;
    cursor: pointer;
}

.followUsBtn:nth-child(2) {
    background: url(../images/btnTwitter.png) no-repeat;
    background-size: 100% auto;
    background-position: center center;
    cursor: pointer;
}

.followUsBtn:nth-child(3) {
    background: url(../images/btnYoutube.png) no-repeat;
    background-size: 100% auto;
    background-position: center center;
    cursor: pointer;
}

.section1 {
    position: relative;
    width: 100vw;
    height: 19vw;
    background: url(../images/ytBg.jpg) no-repeat;
    background-size: 100% auto;
    overflow: hidden;
}


.section2 {
    position: relative;
    width: 100vw;
    height: 38.4vw;
    background: url(../images/skinBg.jpg) no-repeat;
    background-size: 100% auto;
    overflow: hidden;
}

.section3 {
    position: relative;
    width: 100vw;
    height: 47.9vw;
    overflow: hidden;
    background-color: #e8e6e6; 
}

.section4 {
    position: relative;
    width: 100vw;
    height: 67vw;
    overflow: hidden;
    background-color: #e8e6e6; 
}

.section5 {
    position: relative;
    width: 100vw;
    height: 50vw;
    overflow: hidden;
    /* background-color: #e8e6e6;  */
    background: url(../images/section5BG.jpg) no-repeat;
    background-size: 100% auto;
}

.section6 {
    position: relative;
    width: 100vw;
    height: 78.8vw;
    overflow: hidden;
    /* background-color: #e8e6e6;  */
    background: url(../images/section6BG.jpg) no-repeat;
    background-size: 100% auto;
}

.section7 {
    position: relative;
    width: 100vw;
    height: 65.5vw;
    overflow: hidden;
    /* background-color: #e8e6e6;  */
    background: url(../images/section7BG.jpg) no-repeat;
    background-size: 100% auto;
}

.section1 ul {
    display: flex;
    flex-direction: row;
}

.ytBtn {
    /* position: relative */
    width: 33.333vw;
    height: 19vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fe21e4;
    font-size: 2vw;

}

.ytBtn:nth-child(1) {
    background: url(../images/yt01.png) no-repeat;
    background-size: 100% auto;
    background-position: center center;
    cursor: pointer;
}

.ytBtn:nth-child(2) {
    background: url(../images/yt02.png) no-repeat;
    background-size: 100% auto;
    background-position: center center;
    cursor: pointer;
}

.ytBtn:nth-child(3) {
    background: url(../images/yt03.png) no-repeat;
    background-size: 100% auto;
    background-position: center center;
    cursor: pointer;
}

.ytBtn img {
    width: 20.5vw;
    transform: scale(1, 1);
    transition: all .5s ease-out;
    margin: 0 auto;
    margin-top: 3.5vw;
}

.ytBtn img:hover {
    transform: scale(1.1, 1.1);
}



.titleBox {
    margin: 0 auto;
    position: relative;
}

.titleBoxS3, .titleBoxS4, .titleBoxS5, .titleBoxS7{
    margin-top: -1.8vw;
}

.titleBoxS5{
    -webkit-transform:rotate(-10deg);
    transform:rotate(-10deg);
    text-align: center;
}

.strokeText{
    color: #e8e6e600;
    -webkit-text-stroke: .1vw #00fff6;
    text-stroke: .1vw #00fff6;
    font-weight: 900;
    font-style: normal;
    font-size: 18.2vw;
    line-height: 20.6vw;
    text-transform: uppercase;/*大寫*/
    white-space: nowrap; /*不斷行*/
    letter-spacing: -1vw;/*字母間距*/        

}

.strokeTextS2{
    position:relative;
    left: 50%;
    transform: translate(-67%,0) ;
    z-index: 1; 
}

.strokeTextS3{
    position: relative;
    left: 50%;
    transform: translate(-64%, 0);
    z-index: 1;
    letter-spacing: -.2vw;
}

.strokeTextS4{
    position: relative;
    left: 50%;
    transform: translate(-64%, 0);
    z-index: 1;
    letter-spacing: 1vw;
}

.strokeTextS5{
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1;
    letter-spacing: -.1vw;
    -webkit-text-stroke: .1vw #fe21e4;
    text-stroke: .1vw #fe21e4;
    text-transform:capitalize
}

.strokeTextS6{
    position: relative;
    left: 50%;
    transform: translate(-64%, 0);
    z-index: 1;
    letter-spacing: 1vw;
}

.strokeTextS7{
    position: relative;
    left: 50%;
    transform: translate(-61.5%, 0);
    z-index: 1;
    letter-spacing: 1.5vw;
}

.narrowText{
    transform: scale(.8,1); 
    z-index: 1;
}

.title {
    position: relative;
    font-weight: 900;
    font-size: 6.1vw;
    line-height: 7.4vw;
    margin-bottom: 1.4vw;
    margin-top: -10.8vw;
    /* z-index:2; */
}

.titleColorPink {
    color: #fe21e4;
    font-weight: 900;
    font-size: 6.1vw;
    line-height: 6.1vw;
    z-index:5;
}

.titleColorBlack{
    color: #000000;
    font-weight: 900;
    font-size: 6.1vw;
    line-height: 6.1vw;
    z-index:5;
}

.titleS2 {
    margin-left: 4.6vw;
    /* z-index:2; */
}

.titleS3{
    margin-left: 49.3vw;
}

.titleS4, .titleS6, .titleS7{
    position: relative;
    text-align: center;
}

.titleS3Control, .titleS6Control, .titleS7Control{
    display: block;
}
.titleS3ControlM, .titleS6ControlM, .titleS7ControlM {
    display: none;
}

.titleS5{
    position: relative;
    text-align: center;
    margin-top: -12.8vw;
}

.note{
    display: block;
    position: absolute;
    top: 13.6vw;
    left: 69vw;
    width: 2.5vw;
    height: 2.5vw;
    cursor: pointer;
}

.noteM{
    display: none;
}


.note img {
    width: 100%;
}

.textContent{
    font-weight: 500;
    font-size: 1.6vw;
    
}

.textContentS2{
    margin-left: 5vw;
    width: 44vw;
}

.textContentS3{
    margin-left: 50vw;
    width: 45vw;
}

.textContentS4, .textContentS6{
    text-align: center;
}

.textContentS6{
margin-bottom: 1vw;
}

.textContentColorPink{
    color: #fe21e4;
    font-weight: 500;
    font-size: 1.6vw;
    line-height: 2.4vw;
}

.newSkin{
    position: absolute;
    width: 41.7vw;
    height: 42.5vw;
    left: 53.9vw;
  top: 1.8vw;
  /* z-index: 10; */
}

.skin{
    width: 41.7vw;
    height: 42.5vw;
    background: url(../images/skin.png) no-repeat;
    background-size: 100% auto;
}

.skinDecorate{
    position: absolute; 
    width: 7vw;
    height: 7vw;
    background: url(../images/heart.png) no-repeat;
    background-size: 100% auto;
    left: 25vw;
    top: 5.3vw;
}


.star{
width: 5.5vw;
}

.giftBox{
    position: absolute;
    width: 44vw;
    height: 33vw;
    background: url(../images/gift.png) no-repeat;
    background-size: 100% auto;
    left: 5vw;
    top: 10.3vw;
}

.findBtnS3{
    position: relative;
    width: 46vw;
    height: 2.5vw;
    background-color: #00fff6;
    border-radius: 3vw;
    left: 50vw;
    display: flex;
    justify-content: center;
    margin-top: 2vw;
}

.findBtnS3 p{
    font-weight:700;
    font-size: 1.8vw;
    line-height: 0vw;
    margin-top: 1.3vw;
}

.findBtnS3:hover{
color: #fe21e4;
}


.s4GiftBox{
    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    margin-top: 2vw;

}

.gifeBoxLeftBg{
    width: 58vw;
    height: 50vw;
    background: url(../images/iconBgLeft.png) no-repeat;
    background-size: 100% auto;
    position: relative;
}

.gifeBoxRightBg{
    position: relative;
    width: 41.2vw;
    background: url(../images/iconBgRight.png) no-repeat;
    background-size: 100% auto;
    margin-top: -6.5vw;
}

.giftBoxLeftText{
    display: flex;
    flex-direction:column;
    position: absolute;
    top: -3.2vw;
    left: 5.3vw;
}

.giftBoxRightText{
    display: flex;
    flex-direction:column;
    position: absolute;
    top: 32.4vw;
    left: 1vw;
}



.giftBoxTiTle{    
    font-weight: 800;
    font-style: normal;
    font-size: 3.2vw;
}

.giftBoxTiTle2{
    font-weight: 700;
    font-style: normal;
    font-size: 3.2vw;
    transform: scale(.9, 1);
    margin-left: -1vw;
}

.giftBoxTiTleColorPink{
    font-weight: 700;
    font-style: normal;
    font-size: 3.2vw;
    color: #fe21e4;
}

.giftBoxText{
    color: #00fff6;
    font-size: 1.7vw;
    background-color: black;
    border-radius: 3vw;
    width: fit-content;
    padding: 0.15vw 1vw;
    margin-bottom: 0.4vw;
    cursor: pointer;
}

.findBtnS4:hover{
    color: #f0ff00;
}

.giftBoxSubtitle{
    font-weight: 400;
    padding: 0 1vw 0.15vw 1vw;
}

.findBtnS4{
    font-weight: 600;
}

.giftIconLeft{
    margin-top: 10vw;
    margin-left: 7.4vw;
    width: 49.5vw;
    height: 22.4vw;
    background: url(../images/iconLeft.png) no-repeat;
    background-size: 100% auto;
}

.giftIconRight{
    margin-top: 7.9vw;
    margin-left: 6vw;
    width: 27vw;
    height: 22.4vw;
    background: url(../images/iconRight.png) no-repeat;
    background-size: 100% auto;
}

.galleryStyle {
    position: absolute;
    background-color: #fe21e4;
    padding: 0.5vw 0;
    /* z-index: 99; */
    width: 108vw;
    margin-left: -4vw;
    margin-top: -1vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
}

.galleryScroll{
    display: flex;
    
}

.galleryContainer{
    display: flex;
    margin: .5vw 0;
    
}

.galleryContainer:nth-child(1){
    white-space: nowrap;
    text-transform: uppercase;
    animation: scroll1 60s linear infinite;
}

.galleryContainer:nth-child(2){
    white-space: nowrap;
    text-transform: uppercase;
    animation: scroll2 60s linear infinite;
    animation-delay: -30s;
}

.canvas{
    width: 20vw;
    margin: 0 .5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow:hidden;
}

.canvas img{
    width: 100%;
    transform: scale(1,1);
    transition: all 1s ease-out;
}

.canvas img:hover{
    transform: scale(1.2,1.2);
}


.badgeStyle{
width: 88.8vw;
margin: 0 auto;
display: flex;
flex-direction:row;
flex-wrap:wrap;
overflow: hidden;
}

.badgeBox{
margin: .8vw 0;
display: flex;
flex-direction:column;
align-items:center;
cursor: pointer;
}

.badge{
    width: 13.6vw;
    height: 13.6vw;
    border: #000000 0.5vw solid;
    border-radius: 50%;
    margin: 0.6vw;
    overflow: hidden;
}

.badge img{
    width: 100%;
    transform: scale(1.2,1.2);
    transition: all .5s ease-out;
}

.badge img:hover{
    transform: scale(1.5,1.5);
}

.badgeName{
    width: 13vw;
    color: #e8e6e6;
    font-size: 1.7vw;
    background-color: black;
    border-radius: 10vw;
    text-align: center;
    margin: 0.4vw 0;
    
}

.blessStyle{
    width: 90vw;
    height: 42vw;
    margin: 0 auto;
    margin-top: 2vw;
    display: flex;
    flex-direction:row;
    flex-wrap:wrap;
    overflow: hidden;
    overflow-y: scroll;
}


/* 網頁捲軸【背景】顏色 */
.blessStyle::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #000000;
}

.blessBox{
    position: relative;
    width: 24vw;
    padding: 1vw;
    margin: 0vw -1vw;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

}

.blessLabel{
    position: absolute;
    top: -0.9vw;
    left: 2.1vw;
}

.number{
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
    transform: scale(1, .8);
    color: #f0ff00;
    margin-left: -.5vw;
    padding: 0.05vw 0.5vw;
    background-color: #f0ff00;
    -webkit-text-stroke: 0.07vw #000000;
    text-stroke: 0.07vw #000000;
    font-size: 2.5vw;
    width: fit-content;
}

.platerName {
    color: #000000;
    font-size: 1.5vw;
    font-weight: 700;
    line-height: 1.7vw;
    transform: scale(.8, 1);
    background-color: #f0ff00;
    border-radius: 3vw;
    width: fit-content;
    max-width: 23vw;
    padding: 0.05vw 0.5vw;
    margin-top: -1.6vw;
    margin-left: -0.9vw;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bless{
    width: 21vw;
    height: 12vw;
    font-size: .7vw;
    font-weight: 400;
    border: #000000 0.01vw solid;
    padding: 2.5vw 1vw 1vw 1vw;
}

 /* hamburgerMenu */

 .hamburgerMenu {
    display: inline-block;
    cursor: pointer;
    padding: 0 0 0 2px;
    transition: 0.4s;
    position: fixed;
    top: 40vw;
    left: -2.5vw;
}

.hamburgerMenu:hover{
    left: 1vw;
}

  .bar {
    width: 6vw;
    height: 6vw;
    background: url(../images/menuIcon.png) no-repeat;
    background-size: 100% auto;
    margin: 2vw 0;
    border-radius: 2px;
    position: relative;
    z-index: 99;
  }

  .active .bar {
    background: url(../images/menuIconX.png) no-repeat;
    background-size: 100% auto;
    position: relative;
    z-index: 99;
  }

  .active .menuBox {
    display: flex;
    opacity: 1;
    bottom: 0;
    z-index: 50;
    overflow-y: hidden !important;
  }

  .menuBox {
    position: fixed;
    top: 0;
    bottom: 100%;
    left: 0;
    right: 0;
    opacity: 0;
    transition: .5s;
    overflow: hidden;
    background-color: rgb(0 0 0 / 81%);
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    z-index: 50;
}

.menucontent {
    color: #fe21e4;
    font-weight: 900;
    font-size: 2.4vw;
    line-height: 4.5vw;
}

.menucontent:hover{
    color: #f0ff00;
    margin-left: .5vw;
    font-size: 2.6vw;
}

.menucontent:active{
    color: #f0ff00;
    margin-left: .5vw;
}
  
  .hamburgerMenuNone {
    display: none;
  }

  .activeNone {
    display: none;
  }

  /* hamburgerMenuEnd */

footer {
    width: 100vw;
    height: 5vw;
    font-size: .6vw;
    font-weight: 200;
    color: #ffffff;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: -50;
}

.brandLogo {
    width: 20vw;
    margin-bottom: 0.2vw;
}

.brandLogo img{
    width: 100%;
}

.modal {
    background-color: rgba(0, 0, 0, 0.6);
}

.modal-content {
    background-color: rgba(0, 0, 0, 0);
    border: 0px solid rgba(0, 0, 0, .2);
}