@import url(https://fonts.googleapis.com/earlyaccess/notosanssc.css);
*{box-sizing:border-box;}
html,html{-webkit-text-size-adjust:none;}
body{background:#393d49;color:#333;margin:0;padding:0;}
a,a:link,a:checked{text-decoration:none;}
ul{padding:0;margin:0;font-size:0;line-height:0;}
img{font-size:0;line-height:0;}
#body{background:url(../img/bg.png) center top no-repeat}
.container{width:96%;max-width:720px;margin:0 auto;box-sizing:border-box;text-align:center;transition:.2s;padding-bottom:100px;}
header{position:relative;}
.logo{margin:15px 0;height:80px;}

/* 搜尋 */
.searchBox{position:absolute;height:35px;width:150px;border:1px solid #c2c2c2;border-radius:50px;top:30px;right:0;}
.searchBox input{color:#333 !important;background:none;outline:none;border:none;padding:0 10px;font-size:1rem;line-height:35px;width:calc(100% - 50px);display:inline-block;vertical-align:middle;}
.search{display:inline-block;vertical-align:middle;height:70%;}
.searchBox input::placeholder{color:#666;}

/* 輪播 */
.swiper{width:100%;max-width:720px;margin:0 auto 10px auto;transition:.2s;border-radius:1rem;}
.swiper-wrapper{width:100%;height:initial;}
.swiper-slide{width:100%;}
.swiper-slide img{width:100%;height:100%;display:block;object-fit:cover;}
.swiper-pagination{bottom:20px;left:50%;transform:translateX(-50%);}
.swiper-pagination-bullet{margin:0 5px;}
.swiper-pagination-bullet-active{background:#fff;}

/* 跑馬燈 */
.newsBox{width:100%;background:#dcebfd;box-sizing:border-box;margin:0 0 15px 0;border-radius:0.5rem;}
.marquee-1{max-width:100vw;overflow:hidden;position:relative;display:flex;grid-template-columns:7rem auto;padding:0 .2rem 0 0;line-height:40px;box-sizing:border-box;}
.marquee-1 div.marquee-1-content{overflow:hidden;flex:1;}
.marquee-1_newicon{width:7rem;background:url(../img/xpx.png);background-size:contain;background-repeat:no-repeat;background-position:left center;}
.marquee-1_newicon img,.marquee-1_newicon span{display:inline-block;vertical-align:middle;}
.marquee-1_newicon img{margin:0 5px 0 0;}
.marquee-1_newicon,.marquee-1-content{display:inline-block;vertical-align:middle;color:#333;font-size:.9rem;}
.socialBox{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;background:#FFF;padding:15px;border-radius:0.5rem;border:1px #e6edf7 solid}
.social{margin:0 10px;opacity:1;transition:.2s;text-align:center;display:inline-block;}
.social:hover{opacity:.7;}
.social span{width:100%;display:inline-block;color:#5e6877;font-size:1rem;font-weight:normal;margin:0;}
.web{vertical-align:middle;display:inline-block;width:100%;max-width:168px;margin-top:5px;}
.container p{margin:0 0 0.5rem 0;text-align:left;font-size:1rem;line-height:1.5;}
.container p a{color:red;}

/* 表格 */
.container table{text-align:center;width:100%;background:rgba(0,0,0,.4);border:1px solid #aaa;border-collapse:collapse;border-spacing:0;font-size:1.1rem;margin:0 0 10px;}
.container table th{padding:15px 10px;background:linear-gradient(#df1f1a,#7d0000);color:#fef7cb;border:1px solid #ddd;font-size:1.4rem;font-weight:normal;}
.container table td{padding:25px 20px;border:1px solid #aaa;outline:0;color:#fff;}
.container table tr td:nth-of-type(2){text-align:left;}
.tableBox p{color:#fff;font-size:1.15rem;font-weight:normal;margin:5px auto;}
.tableBox .btn{display:inline-block;}
.tableBox .btn:hover{transform:scale(.97);}
.container h1{color:#fff;font-size:2.8rem;margin:60px 0;}
.container h1 span,.container h1 a{vertical-align:middle;display:inline-block;}
.container h1 a{display:inline-block;width:296px;height:95px;background:url(../img/btn03.png) 50% 50% no-repeat;background-size:100% auto;}
.container h1 a:hover{background:url(../img/btn03_h.png) 50% 50% no-repeat;background-size:100% auto;}
.tab_contentBox{margin-top:15px;}

/* 遊戲列表 */
.tab_content{background:#edf4ff;padding:10px;display:none;max-height:71vh;overflow-y:scroll;box-sizing:border-box;border-radius:15px;border:1px #e5eaf9 solid}
.tab_content::-webkit-scrollbar-thumb{background:#444;border-radius:5px;}
.tab_content::-webkit-scrollbar{width:5px;background:none;}
.tab_content_grid{}
.tabBox{display:grid;grid-template-columns:32% 68%;}
.tabBox ul{width:100%;margin:0;text-align:left;}
.tabBox ul li{margin:0}
.tabBox .tab{max-width:214px;width:100%;padding-top:40.8%;display:inline-block;}
.tabmenuBox{margin-top:10px;}
.tab01{background:url(../img/menu01.png) 50% 50% no-repeat;background-size:99% auto;}
.tab01:hover,.tab01.active{background:url(../img/menu01_h.png?t=1) 50% 50% no-repeat;background-size:99% auto;}
.tab02{background:url(../img/menu02.png) 50% 50% no-repeat;background-size:99% auto;}
.tab02:hover,.tab02.active{background:url(../img/menu02_h.png?t=1) 50% 50% no-repeat;background-size:99% auto;}
.tab03{background:url(../img/menu03.png) 50% 50% no-repeat;background-size:99% auto;}
.tab03:hover,.tab03.active{background:url(../img/menu03_h.png?t=1) 50% 50% no-repeat;background-size:99% auto;}
.tab04{background:url(../img/menu04.png) 50% 50% no-repeat;background-size:99% auto;}
.tab04:hover,.tab04.active{background:url(../img/menu04_h.png?t=1) 50% 50% no-repeat;background-size:99% auto;}
.tab05{background:url(../img/menu05.png) 50% 50% no-repeat;background-size:99% auto;}
.tab05:hover,.tab05.active{background:url(../img/menu05_h.png?t=1) 50% 50% no-repeat;background-size:99% auto;}
.tab06{background:url(../img/menu06.png) 50% 50% no-repeat;background-size:99% auto;}
.tab06:hover,.tab06.active{background:url(../img/menu06_h.png?t=1) 50% 50% no-repeat;background-size:99% auto;}
.tab07{background:url(../img/menu07.png) 50% 50% no-repeat;background-size:99% auto;}
.tab07:hover,.tab07.active{background:url(../img/menu07_h.png?t=1) 50% 50% no-repeat;background-size:99% auto;}
.tab08{background:url(../img/menu08.png) 50% 50% no-repeat;background-size:99% auto;}
.tab08:hover,.tab08.active{background:url(../img/menu08_h.png?t=1) 50% 50% no-repeat;background-size:99% auto;}
.tab09{background:url(../img/menu09.png) 50% 50% no-repeat;background-size:99% auto;}
.tab09:hover,.tab09.active{background:url(../img/menu09_h.png?t=1) 50% 50% no-repeat;background-size:99% auto;}
.tab10,.tab010{background:url(../img/menu10.png) 50% 50% no-repeat;background-size:99% auto;}
.tab10:hover,.tab10.active
.tab010:hover,.tab010.active{background:url(../img/menu10_h.png?t=1) 50% 50% no-repeat;background-size:99% auto;}
.tab_content.active{display:block;}
.gameBox{display:inline-block;padding:0px;text-align:center;transition:.2s;margin:2%;width:46%;float:left;height:14rem;overflow:hidden;background:linear-gradient(to bottom,rgb(0 0 0 / 0%),#bf4f0f);border:1px #73a6ff solid;position:relative;border-radius:15px;}
.gameBox img{width:100%;padding-top:0px;border-radius:15px 15px 0 0;}
.gameBox p{display:inline-block;width:100%;font-size:1rem;text-align:left;margin:0;transition:.2s;position:absolute;left:0px;bottom:0px;height:3.5rem;line-height:2.2;padding-top:8%;padding-left:15px;border-radius:0 0 15px 15px;color:#d2d2d2;background:linear-gradient(to bottom,rgb(191 79 15 / 1%) 0%,rgb(191 79 15 / 80%) 35%,rgb(191 79 15) 100%);}
.gameBox:hover.gameBox p{color:#f7f1d4;}

/* footer */
footer{height:80px;display:block;background:linear-gradient(#f3f6ff,#e8f0ff);width:100%;max-width:750px;margin:0 auto;text-align:center;position:fixed;bottom:0;left:calc(50% - 750px / 2);box-shadow:0 0 3px rgba(0,0,0,.4);}
.footer_menu{height:100%;}
.footer_menu ul{height:100%;width:100%;}
.footer_menu ul li{display:inline-block;height:100%;width:25%;}
.footer_menu ul li a{display:inline-block;width:100%;height:100%;color:#263951;font-size:1rem;line-height:1.2rem;padding:50px 0 0 0;}
.footer_menu ul li:nth-of-type(1) a{background:url(../img/footer_menu01.png) 50% 28% no-repeat;background-size:auto 27px;}
.footer_menu ul li:nth-of-type(2) a{background:url(../img/footer_menu02.png) 50% 28% no-repeat;background-size:auto 27px;}
.footer_menu ul li:nth-of-type(3) a{background:url(../img/footer_menu03.png) 50% 28% no-repeat;background-size:auto 27px;}
.footer_menu ul li:nth-of-type(4) a{background:url(../img/footer_menu04.png) 50% 28% no-repeat;background-size:auto 27px;}
.copyright{font-size:.9rem;line-height:1.2rem;color:#eee;}

/* 彈窗 */
#lightbox_lightboxbg{display:none;background:rgba(0,0,0,0.65);position:fixed;top:0px;left:0px;min-width:100%;min-height:100%;z-index:1000;}
.lightbox{display:none;position:fixed;z-index:1001;width:90%;max-width:1400px;height:80vh;max-height:857px;padding:25px;background:url(../img/popBg.png) 50% 50% no-repeat;background-size:cover;text-align:center;border-radius:15px;box-shadow:inset 5px 5px 15px rgba(200,246,255,0.5),inset -5px -5px 15px rgba(95,228,255,0.3);border:2px solid #fbe38a;}
.lightbox_close{width:28px;height:28px;background:url(../img/pop_close.png) 50% 50% no-repeat;background-size:100% auto;position:absolute;right:15px;top:15px;transition:.2s;}
.lightbox_close:hover{transform:scale(.95);}
.lightbox_title{color:#feee3f;margin:0 0 25px 0;font-size:2rem;font-weight:bold;}
.lightbox_title img,.lightbox_title h2{display:inline-block;vertical-align:middle;margin:0;font-size:2rem;line-height:2.2rem;}
#lightbox-1 .lightbox_title h2{font-size:1.5rem;}
.lightbox_title .line:nth-of-type(2){transform:rotate(180deg);}
.lightbox_content{height:57vh;text-align:left;color:#fff;font-size:1.2rem;line-height:1.8rem;overflow-y:scroll;}
.lightbox_content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.4);border-radius:5px;}
.lightbox_content::-webkit-scrollbar{width:5px;background:none;}

/* 公告 */
#lightbox-2{width:90%;max-width:1200px;background:url(../img/popBg02.png) 50% 50% no-repeat;box-shadow:inset 5px 5px 15px rgba(138,138,138,0.5),inset -5px -5px 15px rgba(139,139,139,0.5);}
#lightbox-2 p{font-size:1.1rem;border-bottom:1px dotted rgba(255,255,255,0.6);margin:0;padding:20px 0;}

/* 分頁 */
.title{margin:30px 0;max-width:300px;}
.promoBox{max-width:650px;border-radius:15px;border:1px solid #555;background:rgba(0,0,0,.5);overflow:hidden;margin:30px auto 30px auto;}
.promoBox .content{padding:30px;}
.detail{max-height:150px;overflow:auto;}
.detail::-webkit-scrollbar-thumb{width:5px;background:#444;}
.detail::-webkit-scrollbar{width:5px;background:none;}
.promoBox .logo{margin:0 0 10px;position:relative;display:inline-block;}
.promoBox .logo::before{content:"";bottom:0;position:absolute;background:#ddd;height:1px;left:-25%;right:-25%;}
.detail p{font-size:1rem;line-height:1.5rem;margin:0;color:white;}
.promoBtnBox{background:#ddd;display:grid;grid-template-columns:50% 50%;}
.promoBtn{color:#fff;font-weight:bold;padding:20px 0;display:inline-block;text-shadow:1px 1px 3px rgba(0,0,0,.5);}
.promoBtn01{background:linear-gradient(#950000,#ed0000);}
.promoBtn01:hover{background:linear-gradient(#ed0000,#950000);}
.promoBtn02{background:linear-gradient(#2c54b1,#069bf4);}
.promoBtn02:hover{background:linear-gradient(#069bf4,#2c54b1);}
.promoBtn img,.promoBtn span{display:inline-block;vertical-align:middle;}
.promoBtn img{margin-right:.6rem;}
.promoBtn span{font-size:1.5rem;}

@media screen and (max-width:767px){
.logo{height:40px;margin:8px 0 18px 0;}
#body{background-size:100%;}
.newsBox{margin:0 0 10px 0;}
.tabBox{grid-column-gap:10px;}
.tabmenuBox{margin-top:6px;}
.tab_contentBox{margin-top:8px;}
.lightbox_content{height:66vh;}
footer{left:0;}
}
@media screen and (max-width:720px){
html,body{background-position:50% 50%;}
.social{width:10vw;margin:0;}
.social img{width:50%;}
.tabBox ul li{margin:0 0 2vw;}
.gameBox{height:10rem}
.gameBox img{width:100%;}
}
@media screen and (max-width:500px){
body,html{font-size:14px;}
.logo{height:40px;}
.searchBox{width:75px;height:25px;top:25px;}
.searchBox input{line-height:25px;height:25px;padding:0 1px;width:calc(100% - 36px);font-size:.9rem;}
.swiper-pagination{bottom:5px;}
.social{width:12vw;}
.social span{font-size:.9rem;}
.tab_content{padding:15px;padding-right:0;background:none;padding:0;max-height:66vh;}
.gameBox{padding:0 0 5px 0;}
.gameBox p{margin:0;height:3rem;}
.promoBox .logo{height:initial;margin:0 0 10px;position:relative;display:inline-block;}
.title{margin:10px 0 30px 0;}
.promoBtn{padding:12px;}
.promoBox .content{padding:10px 15px 20px 10px}
footer{height:70px;}
.footer_menu ul li:nth-of-type(1) a,.footer_menu ul li:nth-of-type(2) a,.footer_menu ul li:nth-of-type(3) a,.footer_menu ul li:nth-of-type(4) a{background-size:auto 20px;}
.footer_menu ul li a{padding:40px 0 0 0;}
}
@media screen and (max-width:429px){
.gameBox{height:10rem}
}
@media screen and (max-width:375px){
.tab_content{max-height:85vh;}
}
@media screen and (max-width:340px){
.logo{height:35px;margin:10px 0;}
.searchBox{top:18px;}
.promoBtn img{height:25px;}
.promoBtn span{font-size:1.2rem;line-height:1.2rem;}
}