* {
    box-sizing: border-box;
    font-family: 'huninn', 'Noto Sans TC', "Arial";
    margin: 0;
    padding: 0;
}

html, body {
    margin: 0; padding: 0;
    overflow-x: hidden;
    background-image: url('./images/main_bg.png');
    background-color: #000;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}

.title {
    color: #fff;
}
.container {
    position: absolute;
    width: 84vw;
    height: 32vw; /* 固定高度，讓多餘內容可滾動 */
    top: 15vw;
    left: 10vw;
    overflow-y: scroll; /* 開啟垂直滾動 */
    overflow-x: hidden; /* 禁止水平滾動 */
}
::-webkit-scrollbar {
    width: 0; /* 隐藏横向滚动条 */
    height: 0; /* 隐藏纵向滚动条 */
    background: transparent; /* 滚动条背景透明 */
}

.col_metatag {
    padding: 1% 1%;
    text-align: center;
}

.btn_metatag {
    width: 100%;
    padding: 0.5rem 0;
    color: #000;
    /*font-size: 2rem;*/
    background: none;
    background-position: top center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-style: none !important;
}
/*
.btn_metatag:active {
    border-style: none;
}
*/
#btn_portrait{
    position: relative;
    width: 20vw;
    height: 16vw;
    left: 0vw;
    background-image: url(images/btn_g1.png);
}
#btn_virus{
    position: relative;
    width: 20vw;
    height: 16vw;
    left: 0vw;
    background-image: url(images/btn_g5.png);
}
#btn_salmon{
    position: relative;
    width: 20vw;
    height: 16vw;
    left: 0vw;
    background-image: url(images/btn_g2.png);
}
#btn_graffiti{
    position: relative;
    width: 20vw;
    height: 16vw;
    left: 0vw;
    background-image: url(images/btn_g6.png);
}
#btn_dart{
    position: relative;
    width: 20vw;
    height: 16vw;
    left: 0vw;
    background-image: url(images/btn_g3.png);
}
#btn_horse{
    position: relative;
    width: 20vw;
    height: 16vw;
    left: 0vw;
    background-image: url(images/btn_g7.png);
}
#btn_rabbit{
    position: relative;
    width: 20vw;
    height: 16vw;
    left: 0vw;
    background-image: url(images/btn_g4.png);
}
#btn_lottery{
    position: relative;
    width: 20vw;
    height: 16vw;
    left: 0vw;
    background-image: url(images/btn_g8.png);
}
#btn_catchghost{
    position: relative;
    width: 20vw;
    height: 16vw;
    left: 0vw;
    background-image: url(images/btn_g9.png);
}
#btn_booklist{
    position: relative;
    width: 20vw;
    height: 16vw;
    left: 0vw;
    background-image: url(images/btn_g10.png);
}

.threemode{
    position: absolute;
    bottom: 7vw;
}
#modezero{
    position: absolute;
    left: 20vw;
    width: 14vw;
    height: 7vw;

    background: none;
    transform: translate(-50%,0);
    background-image: url(images/btn_toairetail.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}
#modeone{
    position: absolute;
    left: 40vw;
    width: 14vw;
    height: 7vw;

    background: none;
    transform: translate(-50%,0);
    background-image: url(images/btn_toorder.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}
#modetwo{
    position: absolute;
    left: 60vw;
    width: 14vw;
    height: 7vw;

    background: none;
    transform: translate(-50%,0);
    background-image: url(images/btn_togame.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}
#modethree{
    position: absolute;
    left: 80vw;
    width: 14vw;
    height: 7vw;

    background: none;
    transform: translate(-50%,0);
    background-image: url(images/btn_toabout.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}
/* .btn_metatag.btn_portrait{
    background-image: url('./images/PurpleButtonPortrait.png');
}
.btn_metatag.btn_virus{
    background-image: url('./images/PurpleButtonVirus.png');
}
.btn_metatag.btn_salmon{
    background-image: url('./images/PurpleButtonSalmon.png');
}
.btn_metatag.btn_graffiti{
    background-image: url('./images/PurpleButtonGraffiti.png');
}
.btn_metatag.btn_dart{
    background-image: url('./images/PurpleButtonDart.png');
}
.btn_metatag.btn_horse{
    background-image: url('./images/PurpleButtonHorse.png');
}
.btn_metatag.btn_rabbit{
    background-image: url('./images/PurpleButtonRabbit.png');
}
.btn_metatag.btn_lottery{
    background-image: url('./images/PurpleButtonLottery.png');
} */