@import url('css2.css');

@font-face {
    font-family: 'WangFont'; 
    src: url('../font/WangFonts.ttf') format('truetype');
    font-weight: normal; 
    font-style: normal; 
    font-display: swap; 
}

html, body {
    margin: 0;
    padding: 0;
}

html {
    background-color: #ec1b24;
}

body {
    font-family: "Noto Sans TC", sans-serif;
    background-color: #ec1b24;
}

main {
    background-image: url('../image/BG.png');
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: top center;
}

/* 回到上方按鈕 */
#backtotop {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 50px;
    height: 50px;
    color: white;
    font-size: medium;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 100%;

    position: fixed;
    right: 2vw;
    bottom: 2vh;
    z-index: 999;

    opacity: 0;
    visibility: hidden; 
    transition: opacity 0.3s, visibility 0.5s; 
}

#backtotop:hover {
    cursor: pointer;
}

#backtotop.show {
  opacity: 1;
  visibility: visible;
}

section {
    min-height: 10vh;
    display: flex;
}


.kv-image {
    display: flexbox;
    width: 108%;
    height: auto;
    aspect-ratio: 2501/1883;
    background-image: url(../image/KV.gif);
    background-repeat: no-repeat;
    background-size: cover;
}

.circle-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -12%;
}

.event-section {
    flex-direction: column;
}


.tab-button {
    width: 20vw;
    aspect-ratio: 1/1;
    margin: 4vw;
    border-radius: 50%;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-weight: bold;
    transform: scale(0.9);
}
.tab-button:hover {
     transform: scale(1.0);
     transition: transform .5s ease;
}

.tab-button.active {
    transform: scale(1.05);
} 

#button-A {
    background-image: url(../image/Event_A.png);
    background-repeat: no-repeat;
    background-size: cover;
}
#button-A:hover,
#button-A.active  {
    background-image: url(../image/Event_A_h.png);
}

#button-B {
    background-image: url(../image/Event_B.png);
    background-repeat: no-repeat;
    background-size: cover;
}
#button-B:hover,
#button-B.active {
    background-image: url(../image/Event_B_h.png);
}

#button-C {
    background-image: url(../image/Event_C.png);
    background-repeat: no-repeat;
    background-size: cover;
}
#button-C:hover,
#button-C.active {
    background-image: url(../image/Event_C_h.png);
}

.activity-content {
    display: none;
    color: beige;
}

.activity-content.active {
    display: block;
    color: beige;
}

.content-box { 
    width: 85%; 
    height: auto;
    margin: 50px auto; 
    align-items: center; 
    text-align: center;
    
    background: #FFD700; 
    
    position: relative; 
    z-index: 1;
    padding: 3px;
    

    clip-path: polygon(
        0 0, 
        calc(100% - 5vw) 0, 100% 5vw, 
        100% 100%,  
        5vw 100%, 0 calc(100% - 5vw)
    );
}


.inner-content {
    height: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;

    background: linear-gradient(180deg, 
        #000000 40%, 
        #c11a26 100% 
    );


    clip-path: polygon(
        0 0, 
        calc(100% - 5vw) 0, 100% 5vw, 
        100% 100%,  
        5vw 100%, 0 calc(100% - 5vw)
    );
}

.deco {
    display: block;
    width: 100px;
    height: 100px;
    background-image: url(../image/Deco.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 4vw;
    top: 8vh;

    z-index: 1;
}

#event-card {
    width: 90%;
    border-radius: 30px;
    background-color: #000000;
    border: #FFD700 4px solid;
    margin: 2% 0;
    padding: 0 1%;

    display: flex; 
    flex-direction: column; 
    align-items: center;
    justify-items: center;
}

#event-card-body {
    width: 45vw;
}

#event-card img {
    padding: 2%;
    width: 25vw; 
    height: 100%; 
    object-fit: contain; 
}

.card-divider {
    border: none; 
    border-top: 1px solid #FFD700;
    opacity: 0.8;
    margin: 2% 5%;
    width: 90%;
}

#event-title {
    margin: 2% 0 0 0;
    font-family: 'WangFont'; 
    font-size: 2.8rem;
    font-weight: 400;
}

#event-title-s,
#event-title-h {
    width: 100%;
    text-align: center;
    margin-bottom: 2%;
    font-family: 'WangFont';
    font-weight: 500;
}

#event-title-s {
    font-size: 4.5rem;
}

#event-title-h {
    font-size: 3.4rem;
}


.event-game li,
.event-prize li,
.event-caution li
 {
    font-family: "Noto Sans TC";
    margin: 5px;
    list-style-type: disc;
}

.event-game li,
.event-caution li
 {
    font-size: 1rem;
}

.event-prize li {
    font-size: 1.2rem;
    color: #FFD700;
}

#prize-button a {
    display: inline-block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    background-color: #FFD700; 
    color: #212529;

    border: 2px solid #212529;
    border-radius: 5px;
}

#prize-button a:hover {
    transform: scale(1.1);
    transition: transform .5s ease;
}

/*紅利三倍送*/
#event-title-f {
    width: 100%;
    text-align: center;
    font-family: 'WangFont'; 
    margin: 0 0 2% 0;
    font-size: 4.5rem;
    font-weight: 500;
    color: #cd65fd;
}


.funone-pay {
    width: 60vw;
    border:none;
    padding: 0;

    background: linear-gradient(-30deg, 
        #a53ef5 40%, 
        #6b0ae5 100% 
    );

    border-radius: 10px; 
    margin-top: 5%;
}

#funone-card {
    border:none;
    background: transparent;
    margin: 0;
    padding: 0;   
}

#funone-card img {
    width: 15vw;
    padding: 5%; 
}

#funone-card-body {
    width: 50vw;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;

    color: #fff;
}

#funone-text-1 {
    font-size: 1.5rem;
    text-align: left;
}

.funone-event-text-m {
    font-size: 1.5rem;
}

.highlight-l {
    font-size: 2.2rem;
}

yellow {
    font-weight: 500;
    color: #FFD700;
    margin: 0;
    padding: 0;
}

#funone-three-circle {
    width: 85%;
    margin: 5% 0 8% 0;
}

.funone-game-wrap {
    width: 70vw;
    height: auto;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;  

    margin-bottom: 2%;

}

.funone-game-title {
    width: 20vw;
    background-color: #cd65fd;
  
    padding: 10px 15px; 
  
    color: white; 
    font-size: 1.3rem;
    font-weight: 400;
    text-align: center;
    border-radius: 10px 10px 0 0;      
}

.funone-game-logo {
    width: 60vw;
    background-color: #000000;
    border: #cd65fd 4px solid;
  
    padding: 2% 0 0 0;
  
    border-radius: 10px; 
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row; 
    flex-wrap: wrap; 
}

.funone-game-logo div {
    width: 20%;
    padding-top: 20%;

    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    margin: 0 2%;
}

.flogo-1 {
    background-image: url(../image/1.CSO_LOGO.png);
}
.flogo-2 {
    background-image: url(../images/2.Jollymax\ LOGO.png);
}
.flogo-3 {
    background-image: url(../image/3.LastWarLOGO.png);
}
.flogo-4 {
    background-image: url(../image/4.PUBG_MOBILE_LOGO.png);
}
.flogo-5 {
    background-image: url(../image/5.Ragnarok-Crush_LOGO.png);
}
.flogo-6 {
    background-image: url(../image/6.ROreborn_LOGO.png);
}
.flogo-7 {
    background-image: url(../image/7.RO_LOGO.png);
}
.flogo-8 {
    background-image: url(../image/8.RO_Online_LOGO.png);
}
.flogo-9 {
    background-image: url(../image/9.DOnline_LOGO.png);
}
.flogo-10 {
    background-image: url(https://ec.gashpoint.com/event/AllbuyGASH1224/images/10.Money_LOGO.png);
}
.flogo-11 {
    background-image: url(../image/11.Monster_LOGO.png);
}
.flogo-12 {
    background-image: url(../image/12.MD_LOGO.png);
}
.flogo-13 {
    background-image: url(../image/13.TreeM_LOGO.png);
}
.flogo-14 {
    background-image: url(../image/14.World_LOGO.png);
}
.flogo-15 {
    background-image: url(../image/15.Cat_LOGO-1.png);
}
.flogo-16 {
    background-image: url(../image/16.ReDive_logo.png);
}
.flogo-17 {
    background-image: url(../image/17.Re：Code_logo白.png);
}
.flogo-18 {
    background-image: url(../image/18.G_LOGO.png);
}


/*通路加碼活動*/
.cstore-pay {
    width: 70vw;
    padding: 3% 1% 2% 1%;

    display: flex;
    align-items: center;
    justify-content: center;
}

#cstore-card {
    width: 30%;
    background-color: #FFD700;
    border: 6px solid #212529;
    padding: 1%;
    margin: 5%;
    
    border-radius: 5%;
}

#cstore-title {
    width: 100%;
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
}

#cstore-card img {
    padding: 5%;
}

#cstore-button {
    font-size: 1.3rem;
    font-weight: 400;

    display: inline-block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    background-color: #212529;

    border: 2px solid #212529;
    border-radius: 5px;

    margin: 1%;
}

#cstore-button:hover{
    transform: scale(1.1);
    transition: transform .5s ease;
}

/*未滿18*/
.age-r {
    color: #FFD700;
    font-size: 1.8rem;
    letter-spacing: 0.5rem;
    font-weight: 600;
    text-align: center;

    width: 100vw;
    height: auto;
    padding: 1vh;
    margin: 5vh 0 0 0;

    background-color: rgb(97, 25, 20);
}

/*注意事項*/
#section4 {
    background-color: rgb(61, 14, 11);
}

.C_container {
    height: auto;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.C_title {
    font-weight: 400;
    font-size: 1.6em;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: fit-content;
    margin: 2% 0 1% 0;
}

.caution {
    color: #fff;
}

.caution li {
    margin: 5px;
    list-style-type: none;
}

.C_text {
    width: 100%;
    margin-bottom: 1%;
}

.copy {
    color: #961c15;
    text-align: center;
}

.C_text a {
    color: #fcb8b5;
}

.C_text a:hover {
    color: #BE2A23;
    background-color: #f3bcb9;
}

footer {
  text-align: center;
  background-color: rgb(23, 3, 3);
  margin-bottom: 0;
}

footer p {
  color: #fff;
  padding: 0.5% 0;
  margin-bottom: 0;
}

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

.age-r {
    font-size: 1.5rem;
}

}

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

#event-title-h {
    font-size: 3rem;
}

#cstore-title {
    font-size: 1.8rem;
}

}

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

#event-title-h {
    font-size: 3rem;
}.deco {
    top: 4vw;
    left: 4vw;
}

#event-title {
    font-size: 2rem;
}

#event-title-s {
    font-size: 3rem;
}

#event-title-f {
    font-size: 2.8rem;
}

#event-title-h {
    font-size: 2.3rem;
}

#cstore-title {
    font-size: 1.6rem;
}

.age-r {
    letter-spacing: 0.2rem;
    font-weight: 500;
    padding: 1vh;
    margin: 2vh 0 0 0;
}

}


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

#cstore-title {
    font-size: 1.4rem;
}

.age-r {
    font-size: 1.2rem;
}

}


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

.kv-image {
    background-image: url(../image/KV.png);
}

.cstore-pay {
    width: 100%;
}

}

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

#funone-text-1 {
    width: 100%;
    font-size: 1rem;
    margin: 0;
}

.funone-event-text-m {
    font-size: 1rem;
}

.highlight-l {
    font-size: 1.2rem;
}

yellow {
    font-weight: 400;
}

#event-title-h {
    font-size: 2rem;
}

}


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

#backtotop { 
    width: 30px;
    height: 30px;
}

.deco {
    width: 50px;
    height: 50px;
    top: 5vw;
    left: 3vw
}


.tab-button {
    width: 23vw;
    margin: 3vw;
}

.content-box {
    margin: 10px auto; 
    padding: 2px;
}


#event-title {
    font-size: 0.8rem;
    font-weight: 300;
}

#event-title-s  {
    font-size: 1.5rem;
    font-weight: 400;
}

#event-title-h {
    font-size: 1.5rem;
    font-weight: 400;
}

.funone-game-title {
    width: 50vw;
    padding: 5px 10px; 
  
    font-size: 0.8rem;
    font-weight: 400;     
}

.funone-pay {
    width: 70vw;
    padding: 0;
}

#funone-card {
    width: 100%;

    padding: 2%; 
    margin: 0; 
    display: flex;
    flex-direction: row; 
}

#funone-card-body {
    width: 60%; 
    margin: 0;  
    padding: 0;

    justify-content: center;
}

#funone-card img {
    width: 30%;
    padding-top: 3%;
    margin: 0;
} 

#funone-text-1 {
    width: 100%;
    font-size: 0.7rem;
}

.funone-event-text-m {
    font-size: 0.7rem;
    font-weight: 400;
}

.highlight-l {
    font-size: 1rem;
}

yellow {
    font-weight: 400;
}

#funone-three-circle {
    width: 95%;
    margin: 10% 0 10% 0;
}

.funone-game-logo {    
    width: 75vw;
    padding: 2%;

}

.funone-game-logo div {
    width: 30%;
    padding-top: 20%;
    margin: 0;
}

.cstore-pay {
    width: 80vw;
    flex-direction: column;
}

#cstore-card {
    width: 70%;
}

#cstore-title {
    font-size: 1.6rem;
    font-weight: 600;
}

#cstore-card img {
    padding: 10%;
}

#cstore-button {
    font-size: 1.2rem;
    font-weight: 300;
}

.C_title {
    font-size: 1.2rem;
}

.caution li {
    font-size: 0.8rem;
}

.copy {
    margin: 0;
}

.copy p {
    font-size: 0.8rem;
    padding: 1vw;
    margin: 0;
}

.age-r {
    font-size: 0.9rem;
    letter-spacing: 0.1rem;
}

}

@media screen and (max-width: 768px) {
    
#event-card {
    width: 98%;
    padding: 2% 0;
    
    border: #FFD700 2px solid;
}

#event-card-body {
    width: 75vw;
    padding: 1%;
    
    margin-left: -2vw;
}

#event-card img {
    width: 50vw; 
    margin-top: 5vw;
}

.event-game li,
.event-caution li
 {
    font-size: 0.6rem;
}

.event-prize li {
    font-size: 0.8rem;
}

#prize-button a {
    font-size: 0.8rem;
}

#event-title-f {
    font-size: 1.2rem;
    font-weight: 400;
}

}

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

#event-title-h {
    font-size: 1.2rem;
}

.age-r {
    font-size: 0.8rem;
    letter-spacing: normal;
}

}

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

#event-title-s {
    font-size: 1.2rem;
}

#event-title-h {
    font-size: 1rem;
}

.age-r {
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: normal;
}

}

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

#event-title-h {
    font-size: 0.8rem;
}

#cstore-title {
    font-size: 1.2rem;
}

}