section{
    height: calc(100vh - 64px);
    text-align: center;
    padding: 32px 14%;
    margin-top: 64px;
}
.check-in{
    align-items: center;
    justify-content: center;
    height: auto;
    background: url(../images/bg/bg_pic_02_bg_01.webp)no-repeat center bottom/cover;
    padding: 0;
    overflow: hidden;
}
[class^="check-in-title"] {
    /* position: absolute; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
    margin: 0;
}
.check-in .grid-container{
    display: grid;
    grid-template-rows: 3.5fr 3.5fr 3fr;
    grid-template-columns: repeat(3, 1fr);
    width: 54vw;
    height: 40vw;
    margin: -5vw 0 0vw;
}
.check-in .grid-item{
    flex-direction: column;
    background: url(../images/frame/frame1_signup_normal.webp)no-repeat center/contain;
}
.check-in .grid-item:nth-child(7){
    grid-row: 3;
    grid-column: span 3;
    background-color: transparent;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 10vw 100%, 15vw 100%, calc(100% - 25vw + 2px) 100%;
    background-position: left, right, top left calc(10vw - 1px);
    background-image: url(../images/frame/frame2-1_signup_normal.webp), url(../images/frame/frame2-3_signup_normal.webp), url(../images/frame/frame2-2_signup_normal.webp);
}
.check-in .grid-item.finish::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/frame/black.webp)no-repeat center/contain;
    z-index: 1;
}
.check-in .grid-item.finish::after{
    content: '';
    position: absolute;
    top: 12.5%;
    left: 12.5%;
    width: 75%;
    height: 75%;
    background: url(../images/chr.webp)no-repeat center/contain;
    animation: seal .4s ease-in-out;
    z-index: 1;
}
@keyframes seal {
    0%{
        opacity: .5;
        transform: scale(.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.check-in .grid-item.click{
    animation: filter .8s ease-in-out alternate infinite;
    z-index: 1;
}
@keyframes filter {
    0%{
        filter: drop-shadow(0px 0px 0px #ffc107);
        box-shadow: 0 0 0px 0px #ffc107;
    }
    100% {
        filter: drop-shadow(0px 0px 15px #ffc107);
        box-shadow: 0 0 40px 0px #ffc107;
    }
}
.check-in .grid-item>div{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 62%;
}
.check-in img{
}
.check-in h1{
    /* top: 0; */
    width: 80%;
    margin-top: 8px;
    z-index: 2;
}
.check-in h1 img{
    width: 100%;
    height: auto;
    margin: 0;
}
.check-in h2{
    /* position: absolute; */
    bottom: 0;
    width: 100%;
    color: #ffffff;
    font-weight: bolder;
    font-size: 4vw;
    text-shadow: 3px 3px #650001, 3px 0px #650001, 3px -3px #650001, 0px -3px #650001, -3px -3px #650001, -3px 0px #650001, -3px 3px #650001, 0px 3px #650001;
    animation: scale 1.6s ease-in-out infinite;
}
.point-bg{
    width: 100%;
    height: auto !important;
    margin: 0 !important;
}
.check-in span{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 38%;
    color: #fdcf6c;
    font-weight: bolder;
    font-size: 2.5vw;
}
.point-icon{
    width: 50%;
    height: auto;
}
.check-in p{
    color: #fff;
    font-size: 3vw;
    text-shadow: 1px 1px #79171b,1px 0px #79171b,1px -1px #79171b,0px -1px #79171b,-1px -1px #79171b,-1px 0px #79171b,-1px 1px #79171b,0px 1px #79171b;
    margin: 0;
}
.check-in .grid-item.day-7>div{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
}
.day-7 span{
    position: absolute;
    top: 0;
    left: 0px;
    width: 13.5%;
    height: 30%;
    color: #591101;
}
.day-7 p{
    font-size: 7vw;
}
.day-7 img{
    height: 75%;
    width: auto;
}

.dail-task .grid-container{
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}
.dail-task h1 img{
    max-width: fit-content;
}
.dail-task .grid-item{
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: space-between; */
    /* background: #02556b; */
    /* border-radius: 16px; */
    /* box-shadow: 16px 8px #79171b; */
    /* color: #ffffff; */
    /* font-size: 1.5vw; */
    /* padding: 16px; */
}
.task-box{
    position: absolute;
    top: 8.5%;
    left: 4%;
    display: flex;
    justify-content: end;
    width: 92%;
    height: 83%;
}
.dail-task p{
    position: absolute;
    top: 50%;
    right: -24px;
    color: #fff;
    font-size: 2vw;
    text-shadow: 1px 1px #79171b,1px 0px #79171b,1px -1px #79171b,0px -1px #79171b,-1px -1px #79171b,-1px 0px #79171b,-1px 1px #79171b,0px 1px #79171b;
    transform: translateY(-50%);
}
.dail-task img{
    width: 100%;
}
.task-box .task-icon{
    position: absolute;
    top: 20%;
    left: 5.5%;
    width: 17.5%;
}
.task-icon.icon-7{
    top: 21%;
    left: 7.5%;
    width: 12.5%;
}
.task-icon.icon-8{
    top: 25%;
    left: 7%;
    width: 14.5%;
}
.task-icon.icon-9{
    top: 20%;
    left: 8%;
    width: 15%;
}
.task-main{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    width: 70%;
    height: 70%;
    color: #660f13;
    font-size: 2vw;
    font-weight: bolder;
    text-align: start;
    padding-right: 5%;
}
.task-left span{
    margin-bottom: 8px;
}
.progress{
    width: 100%;
    height: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0;
}
.progress-box{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 2% 2.5%;
}
.progress-bar{
    height: 100%;
    background: linear-gradient(180deg, #01e4fa, #352358);
    box-shadow: 0px 1px 5px #000 inset;
}
.progress-word{
    position: absolute;
    top: 50%;
    left: 50%;
    color: #ffffff;
    font-size: 1.25vw;
    transform: translate(-50%, -50%);
}
.btn-box{
    position: absolute;
    bottom: 0;
    left: 10%;
    display: flex;
    align-items: center;
    width: 80%;
    color: #801825;
}
.btn-box .btn{
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}
.btn-box .btn:hover{
    /* transform: scale(0.95); */
}
.small-word{
    position: absolute;
    top: -20%;
    left: 35%;
    width: 50%;
    font-size: .875vw;
}
.bounes{
    position: absolute;
    top: 48%;
    left: 35%;
    width: 50%;
    font-size: 32px;
    font-weight: bolder;
    font-family: 'Skia', serif;
    transform: translateY(-50%);
}
.long-term .grid-item .unlock-bg{
    display: none;
}
.long-term .grid-item .show-bg{
    display: block;
}
.long-term .grid-item:not(.show) .task-box{
    display: none;
}
.long-term .grid-item:not(.show) .unlock-bg{
    display: block;
}
.long-term .grid-item:not(.show) .show-bg{
    display: none;
}
.long-term .task-box {
    top: 14%;
    height: 74%;
}
.long-term  .gift-icon{
    position: absolute;
    top: 40%;
    left: -25%;
    width: 35%;
    transform: translateY(-50%);
    z-index: 1;
}
.long-term .gift-word{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-weight: bolder;
    font-family: 'Skia', serif;
    transform: scaleX(.875) scaleY(1.675);
    transform-origin: top;
    font-size: 1.25vw;
}
.long-term  .small-word {
    top: -32%;
    left: 11%;
    width: auto;
}
.model-collect {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    height: 100%;
    flex-direction: column;
    transform: translate(-50%, -50%);
}
.model-collect-bouns{
    position: absolute;
    top: 48%;
    left: 50%;
    height: 15% !important;
    transform: translate(-50%, -50%);
}
.my-code{
    position: absolute;
    top: 66.8%;
    left: 49.4%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46.5%;
    height: 5.5% !important;
    color: #f7b627;
    font-size: 1.5rem;
    transform: translate(-50%, -50%);
}
@keyframes typing {
    from { width: 0 }
    to {width: 3.5em;}
}
@keyframes caret {
    50% { border-color: transparent; }
}
.text{
    position: absolute;
    top: 81.15%;
    left: 50%;
    display: flex;
    align-items: center;
    height: 1.5rem !important;
    width: 0;
    color: #f7b627;
    font-size: 1.25rem;
    border-right: .05em solid;
    letter-spacing: 3px;
    overflow: hidden;
    white-space: nowrap;
    animation: typing 1s .5s steps(5) forwards, caret 1s steps(1) infinite;
    transform: translate(-50%, -50%);
}
.collect-close-btn{
    position: absolute;
    top: 90%;
    left: 49%;
    height: 9% !important;
    width: 36%;
    background: transparent;
    border: unset;
    transform: translate(-50%, -50%);
}
.model-check-collect-main{
    position: absolute;
    top: 60%;
    left: 23%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 55%;
    color: #f5d548;
    font-size: 1.5vw;
    font-weight: bolder;
    text-align: center;
    text-shadow: 2px 2px #912b32;
    transform: translateY(-50%);
    gap: calc(32px + 1vw);
    padding: 0 calc(2px + 1vw);
}
.model-check-collect-main img{
    width: 100%;
}
.check-word{
    font-size: 2vw;
}
.model-check-collect-btn-group{
    width: 75%;
}
.model-check-collect-btn-group button{
    background: transparent;
    border: none;
}

.swiper-announcement-banner,
.swiper-howtoplay-banner,
.swiper-all-game-banner{
    width: 100%;
    height: 0;
    padding-bottom: 23.44%;
    margin-top: 64px;
}
.swiper-announcement-banner .swiper-wrapper,
.swiper-howtoplay-banner .swiper-wrapper,
.swiper-all-game-banner .swiper-wrapper{
    position: absolute;
}

.swiper-announcement-banner .swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-howtoplay-banner .swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-all-game-banner .swiper-pagination-bullets.swiper-pagination-horizontal{
    bottom: 2%;
}
.swiper-pagination-bullet{
    width: 30px;
    border-radius: 10px;
}
section.announcement{
    margin-top: 0;
    height: auto;
    min-height: unset;
}
.announcement .grid-container{
    grid-template-columns: repeat(1, 1fr);
}
.announcement .grid-item::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #79171b;
}
.announcement .grid-item:last-child::after{
    content: unset;
}
.announcement h1{
    color: #79171b;
    font-size: 4vw;
    margin-bottom: 16px;
}
.announcement span{
    color: #79171b;
    font-size: 2.5vw;
}
.announcement p{
    display: -webkit-box;
    flex: 1;
    font-size: 1.75vw;
    text-align: left;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    white-space: normal;
    word-break: break-all;
    overflow: hidden;
    margin-left: 32px;
}

.announcement-main-page{
    height: auto;
    background: url(../images/announcement-demo/bg.webp) center / contain;
    text-align: start;
    padding: 0;
    overflow: hidden;
}
.announcement-bg{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 100% 88.64vw, 100% 43.33vw, 100% calc(100% - 131.97vw + 2px);
    background-position: top, bottom, top 88.64vw left;
    background-image: url(../images/announcement-demo/top_pic.webp), url(../images/announcement-demo/down_pic.webp), url(../images/announcement-demo/main_bg.webp);
}
.page-main{
    left: 15%;
    display: flex;
    flex-direction: column;
    width: 70%;
    gap: 11.5vw;
    padding: 16vw 0 44vw;
}
.page-main-top{
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1.5vw;
}
.page-main-promotion{
    margin: 0;
}
.page-main-banner{
    width: 100%;
    border-radius: 1rem;
}
.page-main-top-group{
    display: flex;
    width: 105%;
    align-items: center;
    justify-content: flex-start;
    margin-left: -5%;
}
.icon-title{
    width: 15%;
}
.page-main-msg{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    padding-left: 2.5%;
}
.page-main-date{
    font-size: 1.5vw;
    margin-bottom: .5vw;
}
.page-main-name{
    font-size: 2vw;
    font-weight: bolder;
    margin: 0;
}
.page-main-bottom{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 3vw;
    padding: 2vw 2vw 0;
}
.page-main-bonus{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 1.5vw;
    font-weight: bolder;
}
.icon-title-2{
    width: 30px;
    margin-right: .5vw
}
.page-main-wd{
    font-size: 1.25vw;
    font-weight: bolder;
}
.page-main-number-box{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75vw;
    width: 100%;
}
.page-main-number-group{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .5vw;
}
.page-main-number{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: #541416;
    border-radius: .5rem;
    color: #f5e3b7;
    font-size: 32px;
    font-style: normal;
    font-weight: bolder;
    gap: 1.25vw;
}

.all-game{
    padding: 16px 14%;
    margin-top: 0;
    min-height: auto;
    height: auto;
}
.navbar-expand-lg.all-game-nav {
    align-items: center;
}
.navbar.all-game-nav>.container-fluid{
    justify-content: center;
    gap: 16px;
}
.all-game-nav form{
    background: #fff;
    border: 2px solid #02556b;
    border-radius: 50px;
    padding: 4px;
}
.all-game-nav input{
    background: transparent;
    border: 0;
    padding: 0 .75rem;
}
.form-control:focus{
    border-radius: 50px 0 0 50px;
}
.btn.all-game-search{
    margin: 0;
    background: #02556b;
    border: 0;
    color: #fff;
    padding: 12px;
    border-radius: 50%;
}
.btn.all-game-kind{
    background: #fff;
    border: 2px solid #02556b;
    border-radius: 50px;
    color: #02556b;
    padding: 12px;
}
.dropdown-menu.nav{
    display: none;
    border: 2px solid #02556b;
    border-radius: 32px;
}
.nav-pills.all-game-menu button{
    width: 100%;
    background: transparent !important;
    border-top: 1px solid #02556b;
    border-bottom: 1px solid #02556b;
    border-radius: 0;
    color: #02556b !important;
    padding: .5rem 0;
}
.nav-pills.all-game-menu li:nth-child(1) button{border-top: none;}
.nav-pills.all-game-menu li:last-child button{border-bottom: none;}
.tab-content.all-game-contant{
    background: transparent;
    border: unset;
    padding: 0;
    overflow: unset;
}
.all-game-contant h2{
    background: linear-gradient(to bottom, #f4e2b7, #791719, #f4e2b7);
    background: -webkit-linear-gradient(to bottom, #f4e2b7, #791719, #f4e2b7);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-family: 'CordelCircoMambembeOutline', serif;
    text-align: center;
    margin-bottom: 16px;
}
.all-game-grid-container{
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 每行5個格子 */
    grid-template-rows: repeat(3, 1fr);   /* 每列3個格子 */
    gap: 10px; /* 格子之間的間距 */
}
.all-game-grid-container .grid-item-child{
    display: flex;
    border: 6px solid #791719;
    border-radius: 2rem;
    overflow: hidden;
}
.all-game-grid-container .grid-item-child:nth-child(1){
    grid-column: span 2;
    grid-row: span 2;
}
.all-game-grid-container img{
    width: 100%;
}

.nav-tabs .nav-link{
    background: #f4e2b7;
    border: 2px solid #04546b !important;
    border-bottom: 0 !important;
    color: #04546b;
    margin-left: 8px;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active, .nav-tabs .nav-link:hover{
    color: #f4e2b7 !important;
    background-color: #04546b !important;
    border-color: #04546b !important;
}
.tab-content{
    background-color: #ffffff;
    border: 2px solid #04546b;
    border-radius: .25rem;
    padding: 16px;
    overflow-y: scroll;
}
.tab-pane{
    text-align: left;
}

.play-page{
    padding: 0;
    background: url(./images/bg/play_game_bg-pc.webp)no-repeat center/cover;
    /* margin-top: 0; */
    overflow: unset;
}
.iframe-width{
    width: 55%;
    margin: auto;
}
.iframe-box{
    width: 100%;
    height: 0;
    padding-bottom: 75%;
}
iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
}
.play-page-name{
    color: #760700;
    font-size: calc(1rem + 1.5vw);
    font-weight: bolder;
    text-shadow: 2px 2px #e4946e, 2px 0px #e4946e, 2px -2px #e4946e, 0px -2px #e4946e, -2px -2px #e4946e, -2px 0px #e4946e, -2px 2px #e4946e, 0px 2px #e4946e;
    margin-bottom: -3.5%;
    z-index: 1;
}
.play-page-btn-group{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    margin-top: -2.5%;
}
.play-page-btn-group>button{
    background: transparent;
    border: unset;
}
.play-page-btn-group>* img{
    width: 100%;
}

.game-bottom-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    background: #f4e2b7;
    padding: 0 16px;
}
.game-name{
    background: linear-gradient(to bottom, #f4e2b7, #791719, #f4e2b7);
    background: -webkit-linear-gradient(to bottom, #f4e2b7, #791719, #f4e2b7);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-family: 'CordelCircoMambembeOutline', serif;
    font-size: 1.75rem;
}
.game-btn-group{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 16px;
}
.game-bottom-bar button{
    background: transparent;
    border: none;
    color: #791719;
}

.page-404,
.coming-soon{
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    background: url(../images/0cfb2ebc01f689f628855a1aa63bee31.webp)no-repeat center/cover;
}
.page-404 h1{
    color: #f4e2b7;
    font-size: 20vw;
    font-weight: bolder;
    text-shadow: 2px 2px #04546b,2px 0px #04546b,2px -2px #04546b,0px -2px #04546b,-2px -2px #04546b,-2px 0px #04546b,-2px 2px #04546b,0px 2px #04546b, .75vw .75vw #79171b;
    margin-bottom: 32px;
}
.page-404 h1 span,
.coming-soon h1 span{
    z-index: 1;
}
.page-404 h1::after{
    content: '';
    position: absolute;
    bottom: 0;
    right: -55%;
    width: 65%;
    height: 100%;
    background: url(../images/側躺.webp)no-repeat center/cover;
}
.page-404 h3,
.coming-soon h3{
    color: #f4e2b7;
    font-size: 5vw;
    text-shadow: 2px 2px #04546b,2px 0px #04546b,2px -2px #04546b,0px -2px #04546b,-2px -2px #04546b,-2px 0px #04546b,-2px 2px #04546b,0px 2px #04546b, 4px 4px #79171b;
}
.page-404 a,
.coming-soon a{
    height: auto;
    background: #fbf6dc;
    border: 4px solid #005269;
    color: #005269;
    font-size: 2.5vw;
    padding: .5vw 4vw;
    margin-top: 32px;
}

.coming-soon h1{
    color: #f4e2b7;
    font-size: 10vw;
    font-weight: bolder;
    text-shadow: 2px 2px #04546b,2px 0px #04546b,2px -2px #04546b,0px -2px #04546b,-2px -2px #04546b,-2px 0px #04546b,-2px 2px #04546b,0px 2px #04546b, .75vw .75vw #79171b;
    margin-bottom: 32px;
}
.coming-soon h1::after{
    content: '';
    position: absolute;
    top: 0;
    right: -35%;
    width: 40%;
    padding-bottom: 40%;
    background: url(../images/牛.webp) no-repeat center / cover;
    z-index: 0;
}

section.footer-link{
    height: auto;
    min-height: calc(100vh - 328px);
}
.footer-link>*{
    text-align: start;
}
.footer-link h1,
.footer-link h3{
    font-weight: bolder;
}
.bolder{
    font-weight: bolder;
}

.footer-link p{
    font-size: calc(.875rem + .6vw);
}
.footer-link p.bolder{
    font-size: calc(1rem + .6vw);
}
.box-border{
    border: 1px solid #000;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
}
*.mb-0{
    margin-bottom: 0 !important;
}
.num{
    counter-reset:num;
    margin-bottom: 1rem;
}
.eng{
    counter-reset:num1;
    padding-left: 1rem;
    margin-bottom: 1rem;
}
.node{
    counter-reset:num2;
    padding-left: 1rem;
    margin-bottom: 1rem;
}
.roman{
    counter-reset:num3;
    padding-left: 1rem;
    margin-bottom: 1rem;
}
.num{
    display: block;
}
.li{
    display: block;
}
.num>.li,
.eng>.li,
.node>.li,
.roman>.li{
    display: block;
    font-size: 1.25rem;
}
.eng>.li::before{
    counter-increment: num1 !important;
    content: counter(num1, lower-alpha) '. ' !important;
    font-size: 1.25rem;
}
.node>.li::before{
    counter-increment: num2 !important;
    content: '。' !important;
    font-size: 1.25rem;
}
.roman>.li::before{
    counter-increment: num3 !important;
    content: counter(num3, lower-roman) '. ' !important;
    font-size: 1.25rem;
}
.num>.li::before,
.num>div>.li::before{
    counter-increment:num; 
    content:counter(num) '.';
    margin-right: 4px;
}
.num .h3{
    display: block;
    font-weight: bolder;
    font-size: calc(1.25rem + .6vw);
}
.num h3{
    margin: 0;
}

@media screen and (max-width: 967px){
    .all-game-grid-container {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media screen and (max-width: 768px){
    .all-game-grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
    .check-in{
        height: auto;
        background: url(../images/bg/bg_pic_02_bg_01.webp)no-repeat center bottom/contain;
        /* padding: 16px 0; */
    }
}
@media screen and (max-width: 500px){
    section{
        padding: 16px 5%;
    }

    .check-in h1{
        position: relative;
        width: 100%;
    }
    .check-in h2{
    position: relative;
    font-size: 9vw;
    }
    .check-in .grid-container{
        grid-template-rows: auto;
        grid-template-columns: repeat(2, 1fr);
        width: 100vw;
        height: auto;
        gap: 8px;
        margin-top: -5%;
    }
    .check-in .grid-item{
        justify-content: center;
        height: 39vw;
    }
    .check-in .grid-item:nth-child(7) {
        grid-row: 4;
        grid-column: span 2;
        background-size: 29vw 100%, 46vw 100%, calc(100% - 75vw + 2px) 100%;
        background-position: left, right, top left calc(29vw - 1px);
    }
    .check-in span{
        font-size: 6vw;
    }
    .check-in p{
        bottom: 8px;
        right: auto;
        font-size: 8vw;
    }
    .day-7 p{
        bottom: 0;
        transform: translateY(0);
        font-size: 15vw;
    }
    .day-7 span{
        top: 0px;
        left: 0px;
        width: 22%;
        font-size: 6vw;
    }
    .check-in .day-7 img{
        height: auto;
        width: 75%;
        margin-top: 0;
    }
    .check-in img{
        width: 50%;
        margin-top: 0;
    }

    .dail-task h1{
        font-size: 8vw;
        margin-bottom: 16px;
    }
    .dail-task .grid-container{
        grid-template-columns: repeat(1, 1fr);
        height: auto;
    }
    .task-main {
        font-size: 22px;
    }
    .long-term .task-main {
        font-size: 18px;
    }
    .progress-word {
        font-size: 1.125rem;
    }
    .small-word{
        font-size: 12px;
    }
    .bounes{
        font-size: 22px;
    }
    .model-finish{
        width: 100%;
    }
    .model-check-collect-main{
        font-size: 5vw;
    }
    .check-word{
        font-size: 8vw;
    }

    .page-main {
        padding: 64px 0 44vw;
    }
    .announcement .grid-item{
        flex-direction: column;
    }
    .announcement h1{
        font-size: 8vw;
    }
    .announcement span{
        font-size: 6vw;
    }
    .announcement p{
        font-size: 4vw;
        margin-left: 0;
    }

    .page-main {
        gap: 6vw;
    }
    .page-main-promotion{
        font-size: 2vw;
    }
    .page-main-date{
        font-size: 2vw;
    }
    .page-main-name{
        font-size: 4vw;
        line-height: 5vw;
    }
    .page-main-wd p{
        font-size: 3.25vw;
    }

    .play-page{
        background: url(./images/bg/play_game_bg-ph.webp)no-repeat center/cover;
    }
    .iframe-width{
        width: 90%;
        margin: auto;
    }
    .iframe-box{
        width: 100%;
        height: 0;
        padding-bottom: 177.8%;
    }
    .play-page-name{
        font-size: calc(1.5rem + 1.5vw);
        text-shadow: 1px 1px #e4946e, 1px 0px #e4946e, 1px -1px #e4946e, 0px -1px #e4946e, -1px -1px #e4946e, -1px 0px #e4946e, -1px 1px #e4946e, 0px 1px #e4946e;
        margin-bottom: 0%;
    }
    .play-page-btn-group{
        margin-top: 0%;
    }

    .all-game-nav input {
        /* width: 140px; */
    }
    .all-game-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .all-game-grid-container .grid-item-child {
        border: 4px solid #791719;
        border-radius: 1rem;
    }
    .swiper-all-game-banner{
        padding-bottom: 64.2%;
    }

    .swiper-announcement-banner,
    .swiper-howtoplay-banner,
    .swiper-all-game-banner{
        padding-bottom: 64.2%;
    }

    .page-404 h1{font-size: 25vw;}
    .coming-soon h1{font-size: 15vw;}
    .coming-soon h1::after{
        top: 200%;
        right: -10%;
    }
    .page-404 h3, .coming-soon h3{font-size: 7vw;}
    .page-404 a,
    .coming-soon a{
        font-size: 7.5vw;
        padding: 1vw 12vw;
    }
}