@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Sans:wght@400;700&display=swap');

*:focus { outline: none; }
*, ::after, ::before { margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; transition: all .2s linear; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; -o-transition: all .2s linear; -ms-transition: all .2s linear; }

header, footer, div, nav, article, h2, h3, h4, h5, h6, hr, p, form, label, input, textarea, ul, li, img, svg, span, font, strong, b, a, i { text-align: left; vertical-align: middle; word-wrap: break-word; word-break: break-word; line-height: 170%; border-width: 0; font-family: 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-size: 16px; color: #111; }

ul , ol { list-style: none; }

/* img */
img { max-width: 100%; }
.img_cover { object-fit: cover; }
.img_contain { object-fit: contain; }

a , a:link , a:visited , a:hover { text-decoration: none; white-space: pre-wrap; }

#header_box { margin: 10px 0; padding: 0 2vw; height: 40px; background-color: #fff; display: flex; justify-content: space-between; align-items: center; }
#header_box img { max-width: 130px; width: 130px; max-height: 130px; height: 130px; }
#header_box .login_reg { display: flex; justify-content: flex-end; align-items: center; }
#header_box .login_reg a { margin-left: 10px; padding: 2px 2px 2px 33px; width: 90px; background: url(../images/main/btn_join2.svg) #ffa71a no-repeat 10px 50% / 17px auto; border-radius: 20px; display: inline-block; color: #fff; }
#header_box .login_reg a#login { background-image: url(../images/main/btn_login2.svg); background-color: #4bab9a; }

.swiper2 { margin: 5px auto 10px; width: 97vw; border-radius: .7rem; }
.swiper2 img { width: 100%; }
.swiper2 .swiper-pagination-clickable .swiper-pagination-bullet { background: #cbdeed; opacity: .5; }
.swiper2 .swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; }

.GameList { padding: 0 2vw; display: flex; width: 100%; height: calc(100vh - (140px + 40vw)); box-sizing: border-box; }
.GameList.iosview .GameList_L , .GameList.iosview .GameList_R { padding-bottom: 10vh; }
.GameList .GameList_L { position: relative; overflow-y: scroll; padding-right: 4%; display: grid; grid-gap: 1vh; flex: 20%; -ms-overflow-style: none; scrollbar-width: none; right: auto; left: 0; }
.GameList .GameList_L [class*="btn_GL"] { padding: 1px; width: 100%; background: #dff2f6; border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-direction: column; outline: none; }
.GameList .GameList_L [class*="btn_GL"].on { padding: 0; border: 1px solid #499ea5; }
.GameList .GameList_L h2 { margin: .5vh 2px .2vh; font-weight: 400; font-size: .9em; text-align: center; color: #535867; }
.GameList .GameList_L [class*="ic_GL"] { margin-bottom: .2vh; width: 3vh; height: 3vh; min-width: 18px; min-height: 18px; background: no-repeat 50% / 75% auto; }
.GameList .GameList_L .ic_GLhot { background-image: url(../images/icon_hot.svg); background-size: contain; }
.GameList .GameList_L .ic_GLlive { background-image: url(../images/icon_live.svg); }
.GameList .GameList_L .ic_GLslot { background-image: url(../images/icon_slot.svg); }
.GameList .GameList_L .ic_GLsport { background-image: url(../images/icon_sport.svg); }
.GameList .GameList_L .ic_GLloto { background-image: url(../images/icon_loto.svg); }
.GameList .GameList_L .ic_GLfish { background-image: url(../images/icon_fish.svg); background-size: 80% auto; }
.GameList .GameList_L .ic_GLchess { background-image: url(../images/icon_chess.svg); }
.GameList .GameList_RBox { flex: 76%; }
.GameList .GameList_R { display: grid; grid-gap: 2%; }
.GameList .GameList_R.Hot { grid-template-columns: repeat(2, 1fr); grid-template-rows: 32% 32% 15% 14%; }
.GameList .GameList_R.Live ,
.GameList .GameList_R.wholeSix { grid-template-columns: repeat(2, 1fr); }
.GameList .GameList_R.Ball ,
.GameList .GameList_R.Chess { grid-template-rows: repeat(2, 1fr); }
.GameList .GameList_R.Fish { grid-template-rows: repeat(3, 1fr); }
.GameList .GameList_R [class*="btn_GL"] { position: relative; border-radius: 10px; background: #dff2f6 no-repeat 50% 0 / cover; }
.GameList .GameList_R .t_GL { position: relative; margin: 15px; z-index: 2; }
.GameList .GameList_R .t_GL h1 { font-weight: 500; font-size: 16px; color: #535867; }
.GameList .GameList_R .t_GL h1 span { display: block; font-size: 1.1em; font-size: .6em; color: #535867; }
.GameList .GameList_R .t_GL img { margin-top: -10px; height: 44px; }
.GameList .GameList_R .img_GL { position: absolute; overflow: hidden; width: 100%; height: 100%; right: 0; bottom: 0; z-index: 1; }
.GameList .GameList_R .img_GL:after { position: absolute; margin: auto; width: 46vw; height: 31vw; border-radius: 10px; background-position: 1em -1px; background-repeat: no-repeat; bottom: 0; right: 0; content: ""; }
.GameList .GameList_R .GL_hot ,
.GameList .GameList_R .GL_new { position: absolute; width: 40px; height: 40px; background: no-repeat center; top: 0; right: 0; z-index: 5; }
.GameList .GameList_R .GL_hot { background-image: url(../images/main/icon_hot.png); background-size: cover; }
.GameList .GameList_R .GL_new { background-image: url(../images/main/icon_new.png); background-size: cover; }

.GameList .GameList_R [class*="btn_GLhot"] .img_GL:after { background-image: url(../images/img_hotOT4.png); background-size: 100.5% auto; }
.GameList .GameList_R .btn_GLhotLive { background-image: url(../images/img_liveHotBG.png); }
.GameList .GameList_R .btn_GLhotLive .img_GL:after ,
.GameList .GameList_R .btn_GLliveAB .img_GL:after ,
.GameList .GameList_R .btn_GLslotBNG .img_GL:after ,
.GameList .GameList_R .btn_GLsportJZ .img_GL:after { background-position-y: 11.1%; }
.GameList .GameList_R .btn_GLhotSlot { background-image: url(../images/img_slotHotBG.png); }
.GameList .GameList_R .btn_GLhotSlot .img_GL:after { background-position-y: 22.5%; }
.GameList .GameList_R .btn_GLhotSport { background-image: url(../images/img_sportHotBG.png); }
.GameList .GameList_R .btn_GLhotLoto { background-image: url(../images/img_lotoHotBG.png); }
.GameList .GameList_R .btn_GLhotLoto .img_GL:after { background-position-y: 32.5%; height: 25vw; }
.GameList .GameList_R .btn_GLhotCool { background-image: url(../images/img_hotBG.png); grid-row-start: 3; grid-row-end: 5; }
.GameList .GameList_R .btn_GLhotCool .img_GL:after { width: 168%; height: 92%; background-position-y: 55.5%; }
.GameList .GameList_R .btn_GLhotCool .t_GL img { margin-top: 10px; }
.GameList .GameList_R .btn_GLhotCAO ,
.GameList .GameList_R .btn_GLhotStudio { background: #f2dbb9; background: -moz-linear-gradient(-45deg,#f8f5ed 0%,#f2dbb9 100%); background: -webkit-linear-gradient(-45deg,#f8f5ed 0%,#f2dbb9 100%); background: linear-gradient(135deg,#f8f5ed 0%,#f2dbb9 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f5ed',endColorstr='#f7c1f3',GradientType=1); }
.GameList .GameList_R .btn_GLhotStudio .t_GL ,
.GameList .GameList_R .btn_GLhotCAO .t_GL { margin: 15px 6px; height: calc(100% - 30px); display: flex; justify-content: space-between; align-items: center; }
.GameList .GameList_R .btn_GLhotStudio .t_GL h1 ,
.GameList .GameList_R .btn_GLhotCAO .t_GL h1 { font-size: 1.1em; font-weight: 400; }
.GameList .GameList_R .btn_GLhotStudio .img_GL:after { height: 100%; background-position-y: 44.5%; }
.GameList .GameList_R .btn_GLhotCAO .t_GL h1 { font-size: 1em; line-height: 1.2; }
.GameList .GameList_R .btn_GLhotCAO .t_GL img { margin-top: 4px; width: 25px; content: url(../images/logo_CAO.png); }

.GameList .GameList_R [class*="btn_GLlive"] { background-image: url(../images/img_liveBG.png); }
.GameList .GameList_R [class*="btn_GLlive"] .img_GL:after { background-image: url(../images/img_liveOT2.png); background-size: 100% auto; }
.GameList .GameList_R .btn_GLliveKU ,
.GameList .GameList_R .btn_GLsportKU { grid-column-start: 1; grid-column-end: 3; }
.GameList .GameList_R .btn_GLliveKU .t_GL ,
.GameList .GameList_R .btn_GLsportKU .t_GL ,
.GameList .GameList_R [class*="btn_GLloto"] .t_GL , 
.GameList .GameList_R [class*="btn_GLfish"] .t_GL , 
.GameList .GameList_R [class*="btn_GLchess"] .t_GL { width: 31vw; height: calc(100% - 10px); display: flex; flex-direction: column; justify-content: center; align-items: center; }
.GameList .GameList_R .btn_GLliveDG .img_GL:after ,
.GameList .GameList_R .btn_GLslotDS .img_GL:after ,
.GameList .GameList_R .btn_GLsportPIN .img_GL:after { background-position-y: 22%; }
.GameList .GameList_R .btn_GLliveWM .img_GL:after ,
.GameList .GameList_R .btn_GLslotPS .img_GL:after ,
.GameList .GameList_R .btn_GLsportAVIA .img_GL:after { background-position-y: 33%; }
.GameList .GameList_R .btn_GLliveSA .img_GL:after ,
.GameList .GameList_R .btn_GLslotFTG .img_GL:after { background-position-y: 44%; }
.GameList .GameList_R .btn_GLliveOG .img_GL:after ,
.GameList .GameList_R .btn_GLslotAT .img_GL:after { background-position-y: 55%; }
.GameList .GameList_R .btn_GLliveHG .img_GL:after { background-position-y: 65.9%; }

.GameList .GameList_R [class*="btn_GLslot"] { background-image: url(../images/img_slotBG.png); }
.GameList .GameList_R [class*="btn_GLslot"] .img_GL:after { background-image: url(../images/img_slotOT2.png); background-size: 100.5% auto; }

.GameList .GameList_R [class*="btn_GLsport"] { background-image: url(../images/img_sportBG.png); }
.GameList .GameList_R [class*="btn_GLsport"] .img_GL:after { background-image: url(../images/img_sportOT2.png); background-size: 100% auto; }
.GameList .GameList_R .btn_GLsportKU .img_GL { right: 7vw; }
.GameList .GameList_R .btn_GLsportKU .img_GL:after { background-position: right 44%; }

.GameList .GameList_R [class*="btn_GLloto"] { background-image: url(../images/img_lotoBG.png); }
.GameList .GameList_R [class*="btn_GLloto"] .t_GL ,
.GameList .GameList_R [class*="btn_GLchess"] .t_GL { width: 24vw; }
.GameList .GameList_R [class*="btn_GLloto"] .t_GL h1 ,
.GameList .GameList_R [class*="btn_GLchess"] .t_GL h1 { font-size: 1.1em; }
.GameList .GameList_R [class*="btn_GLloto"] .img_GL:after { width: 61vw; max-height: 54vw; height: 100%; background-image: url(../images/img_lotoOT2.png); background-size: 100% auto; }
.GameList .GameList_R .btn_GLlotoNot .img_GL { width: 56vw; background: url(../images/img_lotoNOT.png) no-repeat right center; background-size: 100% auto; }

.GameList .GameList_R [class*="btn_GLfish"] { background-image: url(../images/img_fishBG.png); background-size: cover; }
.GameList .GameList_R [class*="btn_GLfish"] .img_GL:after { width: 61vw; max-height: 54vw; height: 100%; background-image: url(../images/img_fishOT2.png); background-size: 100% auto; }
.GameList .GameList_R .btn_GLfishKS .img_GL:after { background-position-y: -56vw; }
.GameList .GameList_R .btn_GLfishDS .img_GL:after { background-position-y: -111vw; }

.GameList .GameList_R [class*="btn_GLchess"] { background-image: url(../images/img_chessBG.png); background-size: cover; }
.GameList .GameList_R [class*="btn_GLchess"] .img_GL:after { width: 61vw; max-height: 54vw; height: 100%; background-image: url(../images/img_chessOT2.png); background-size: 100% auto; }
.GameList .GameList_R .btn_GLchessNot .img_GL { width: 56vw; background: url(../images/img_chessNOT.png) no-repeat right center; background-size: 100% auto; }

.GameList .GameList_R [class*="btn_GLlotoNot"] ,
.GameList .GameList_R [class*="btn_GLchessNot"] ,
.GameList .GameList_R [class*="btn_GLlotoNot"]:not(.maintain):active ,
.GameList .GameList_R [class*="btn_GLchessNot"]:not(.maintain):active { background: #dfe2e7; background: -moz-linear-gradient(-45deg,#fff 0%,#dfe2e7 100%); background: -webkit-linear-gradient(-45deg,#fff 0%,#dfe2e7 100%); background: linear-gradient(135deg,#fff 0%,#dfe2e7 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff',endColorstr='#dfe2e7',GradientType=1); }

.GameList .GameList_R [class*="btn_GLlotoNot"] .img_GL:after ,
.GameList .GameList_R [class*="btn_GLchessNot"] .img_GL:after ,
.GameList .GameList_R [class*="btn_GLlotoNot"]:not(.maintain):active .img_GL:after ,
.GameList .GameList_R [class*="btn_GLchessNot"]:not(.maintain):active .img_GL:after { display: none; }

#footer_box { position: fixed; width: 100%; height: 56px; background-color: #fff; border-top: 1px #e1e1e2 solid; display: flex; align-items: center; bottom: 0; left: 0; right: 0; z-index: 10; }
#footer_box a { position: relative; width: 20%; height: 100%; background-color: #fff; text-decoration: none; line-height: 1em; z-index: 1; }
#footer_box .footer_img_new { margin: 7px auto 2px; width: 25px; height: 25px; background: no-repeat top / 100% auto; }
#footer_box div { text-align: center; font-weight: 400; font-size: .85rem; }
#footer_box .btn_footer_gift .footer_img_new { margin: auto; width: 100%; height: 34px; background: url(../images/icon_footer_gift01.png) no-repeat 69% 0 / auto 100%; }
#footer_box #aTraderec .footer_img_new { background-image: url(../images/icon_footer_tradeRec_new.svg); }
#footer_box #aFooterDW .footer_img_new { position: relative; margin-top: -7px; width: 39px; height: 39px; background-image: url(../images/icon_footer_DW.svg); }
#footer_box #aFooterSC .footer_img_new { background-image: url(../images/icon_footer_service_new.svg); }
#footer_box #aHYZX .footer_img_new { background-image: url(../images/icon_footer_member.svg); }

@media screen and (max-width: 350px){
	.GameList .GameList_R .btn_GLhotCAO .t_GL h1 { font-size: .8em; }
}