@import url('./fontawesome-all.css');
@import url('./font-awesome.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@200..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&display=swap');
@font-face { font-family: '36 days ago Thick BRK'; src: url(../fonts/36daythk.eot?) format('eot'), url(../fonts/36daythk.woff) format('woff'), url(../fonts/36daythk.ttf) format('truetype'), url(../fonts/36daythk.svg#36daysagoThickBRK) format('svg'); font-weight: normal; font-style: normal; }

body { background: #fff4dc; }

*:focus { outline: none; }
*, ::after, ::before { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .2s linear; 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; }

button { background: none; border: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; }

/* 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; }
a.tblink { vertical-align: baseline; cursor: auto; }

.left_txt { text-align: left; }
.center_txt { text-align: center; }

/* headervue */
#headervue { position: sticky; width: 100%; background: url(../images/img_header_background.webp) no-repeat 50%; top: 0; left: 0; z-index: 999; }
#headervue header { position: relative; margin: auto; padding: 10px 0; width: 90%; display: flex; align-items: center; justify-content: space-between; }
#headervue header #logo a { display: block; }
#headervue header #logo a svg { width: 130px; height: 60px; fill: #fff; }
#headervue header .btns_box { display: flex; justify-content: flex-end; align-items: center; }
#headervue header .btns_box >li { margin-left: 10px; display: block; }
#headervue header #top_menu { position: fixed; top: 0; right: 276px; opacity: 0; pointer-events: none; }
#headervue header #top_menu.open { position: fixed; opacity: 1; z-index: 99; pointer-events: auto; z-index: 99; }
#headervue header #top_menu ul { width: 226px; }
#headervue header #top_menu ul li { border-bottom: 1px #707070 solid; }
#headervue header #top_menu ul li a { overflow: hidden; position: relative; padding: 5px 10px; display: block; text-align: center; }
#headervue header #top_menu ul li a b { position: relative; font-weight: 700; font-size: 1em; background-image: linear-gradient(to bottom, #f7f7f7, #b4b6ba 100%); -webkit-background-clip: text; background-clip: text; color: transparent; z-index: 2; }

/* menu_btn */
#menu_btn { position: absolute; width: 30px; height: 22px; display: none; top: 50%; right: 15px; z-index: 100; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
#menu_btn span { position: absolute; width: 100%; height: 2px; background: #fff; display: block; top: 0; right: 0; transition: transform .4s cubic-bezier(.215,.61,.355,1),opacity .4s cubic-bezier(.215,.61,.355,1), -webkit-transform .4s cubic-bezier(.215,.61,.355,1); }
#menu_btn span:nth-child(2) { top: calc((100% - 2px) / 2); }
#menu_btn span:nth-child(3) { top: calc(100% - 2px); }
#menu_btn.open span { transition: .4s cubic-bezier(.645,.045,.355,1); }
#menu_btn.open span:nth-child(1) { top: 50%; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#menu_btn.open span:nth-child(2) { opacity: 0; }
#menu_btn.open span:nth-child(3) { top: 50%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

/* bannervue */
#bannervue { position: relative; z-index: 10; }

/* wrap */
#wrap { position: relative; background: linear-gradient(to bottom, #ede1d1 0%,#fefdfa 89%); z-index: 15; }
#wrap .content_box { position: relative; padding-top: 6vh; background: url(../images/img_wrap_background.webp) no-repeat 50% bottom; z-index: 3; }
#wrap .content_box:before { position: absolute; width: 100%; height: 6vh; background: linear-gradient(to bottom, rgba(237, 225, 211, 1) 0%, rgba(237, 225, 211, 0) 100%);  top: 0; left: 0; z-index: 5; content: ""; }
#wrap .content_box:after { position: relative; margin: auto; width: min(100%, 1225px); aspect-ratio: 25/9; background: url(../images/img_wrap_bottom.webp) no-repeat 50% 0 / cover; display: block; z-index: 30; content: ""; }
#wrap .content_box .content_box_bg { overflow: hidden; position: absolute; width: min(100%, 1280px); height: calc(100% - 200px); filter: drop-shadow(0 6vh 1em rgba(0, 0, 0, .2)); top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
#wrap .content_box .content_box_bg:before , #wrap .content_box .content_box_bg:after { position: absolute; width: 100%; height: calc(100% - 330px); background: #fff; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); content: ""; }
#wrap .content_box .content_box_bg:after { width: 100%; height: 690px; border-radius: 50%; top: auto; bottom: 0; }
#wrap .content_box section { position: relative; margin: 0 auto; width: min(95%, 960px); z-index: 20; }

/* fiximgvue */
#fiximgvue { overflow: hidden; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; }
#fiximgvue .fix01 { position: absolute; width: 20vw; aspect-ratio: 193/479; top: 11%; left: 0; z-index: 2; }
#fiximgvue .fix02 { position: absolute; width: 10vw; aspect-ratio: 69/178; top: 5%; right: 4vw; z-index: 2; }
#fiximgvue .fix03 { position: absolute; width: 18vw; aspect-ratio: 181/212; top: 35%; right: 1vw; z-index: 2; }
#fiximgvue .fix04 { position: absolute; width: 15vw; aspect-ratio: 305/547; bottom: 20%; left: 4vw; z-index: 2; }
#fiximgvue .fix05 { position: absolute; width: 100vw; aspect-ratio: 480/373; top: 2vh; left: 0; z-index: 1; }
#fiximgvue .fix06 { position: absolute; width: 100vw; aspect-ratio: 120/43; bottom: 26%; right: 0; z-index: 1; }

/* submenuvue */
#submenuvue { margin-bottom: 5vmax; }
#submenuvue ul { margin: auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: .5em 1em; }
#submenuvue ul li a { overflow: hidden; position: relative; width: 100%; aspect-ratio: 211/49; background: url(../images/img_submenu.webp) no-repeat 50% / 100% auto; display: flex; justify-content: center; align-items: center; }
#submenuvue ul li a b { position: relative; font-weight: 700; font-size: 1.1em; background-image: linear-gradient(to bottom, #ffffff 0%,#aeaeae 100%); -webkit-background-clip: text; background-clip: text; color: transparent; z-index: 1; -webkit-transform: translateY(-1px); transform: translateY(-1px); }
#submenuvue ul li.action a { background-image: url(../images/img_submenu_hover.webp); }
#submenuvue ul li.action a b { background-image: linear-gradient(to bottom, #ffffff 0%,#f6d3a5 100%); }

/* example_box */
.example_box { overflow: hidden; margin: 2vmax auto; width: min(100%, 610px); background: #fbf6ee; border-radius: 1em; }
.example_box .ex_title { padding: .5em .2em; background: #af7847; letter-spacing: .5em; font-weight: 500; color: #fff; }
.example_box .ex_body { padding: 1.2em 2em; }
.example_box .ex_body * { line-height: 2; color: #552f30; }

/* login_btn */
#login_btn { margin-top: 2vmax; }
#login_btn p:not(:last-child) { margin-bottom: 1.5em; }

/* info_box */
.info_box .item_box { position: relative; margin: 40px 70px 40px 50px; padding: 15px 0 15px 50px; width: 270px; border: 4px #900707 solid; border-right-width: 0; border-radius: .2rem; display: inline-block; }
.info_box .item_box:before { position: absolute; width: 75px; height: 75px; border: #900707 solid; border-width: 0 4px 4px 0; border-radius: 0.2rem; top: 11px; right: -36px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); content: ""; }
.info_box .item_box img { position: absolute; top: -17px; left: 20px; }
.info_box .item_box h3 { position: relative; font-size: 21px; color: #9c1616; z-index: 3; }
.info_box .item_box p { position: relative; z-index: 3; }

/* welcome_txt */
.welcome_txt { position: relative; margin: 2vmax auto 4vmax; padding: 2%; width: min(100%, 434px); aspect-ratio: 434/235; background: url(../images/img_welcome_bg.webp) no-repeat 50% / cover; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.welcome_txt h4 { font-size: 22px; color: #504539; }
.welcome_txt font { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3em; font-weight: 500; color: #504539; }
.welcome_txt font b { margin: 0 .3em; display: inline-block; font-weight: 500; color: #9d0112; }
.welcome_txt font span { color: #9d0112; }
.welcome_txt font.bonustip { margin-top: .5em; align-items: baseline; }
.welcome_txt font.bonustip b { line-height: 1; letter-spacing: .2em; font-size: 1.7em; }
.welcome_txt font.bonustip b:first-letter { font-size: .6em; }
.welcome_txt font.exchange { margin-top: 1.2em; gap: .3em 1em; }
.welcome_txt font.exchange a { width: 153px; aspect-ratio: 153/49; display: block; background: url(../images/img_exchange.webp) no-repeat 50% / cover; -webkit-transition: none; transition: none; }

.welcome_txt #okBtn { display: inline-block; }

/* table_box */
.table_box { margin: 30px auto; width: 100%; border-spacing: 2px; border-collapse: separate; }
.table_box td { padding: .5em .2em; background: #fbf6ee; text-align: center; font-weight: 500; color: #552f30; }
.table_box thead td , .table_box td.red_bg { background: #af7847; color: #fff; }
.table_box.small_table { width: min(100%, 610px); }

/* game_info */
.game_info .row { margin: 3vmax 0 5vmax; }
.game_info .row.s_box { margin: 2vmax 0; }
.game_info .title_box { margin-bottom: 30px; }
.game_info .s_box .title_box { margin-bottom: 15px; }
.game_info .title_box h3 { margin-bottom: 1.5em; display: flex; justify-content: center; align-items: flex-end; }
.game_info .title_box h3 b { margin: 0 .8em; padding-bottom: .2em; text-align: center; line-height: 1; font-size: 1.65em; color: #ad0101; }
.game_info .title_box h3 img:last-child { -webkit-transform: scaleX(-1); transform: scaleX(-1); }
.game_info .title_box p { margin-top: .5em; font-weight: 600; font-size: 1.35em; color: #ad0101; }
.game_info .title_box p.sub { font-size: 1.1em;}
.game_info .title_box article { margin-top: 10px; }
.game_info .title_box article span { color: #ab0707; vertical-align: baseline; }
.game_info .row.rulelist ol { margin-left: 1.5rem; list-style: decimal; }
.game_info .row.rulelist ol li { margin: 2px 0; padding-left: .5rem; font-weight: 500; }
.game_info .row.rulelist ol li.red p { font-weight: 500; color: #b30103; }
.game_info .row.rulelist .note_box { margin-top: 40px; }
.game_info .row.rulelist .note_box b { padding: 20px 10px; border: 1px #b30103 solid; border-width: 2px 0; display: inline-block; line-height: 1; color: #b30103; }

/* panel */
.panel .pagination { display: flex; justify-content: center; align-items: stretch; }
.panel ul.pagination li.page { margin: 0 3px; }
.panel ul.pagination li.page a { width: 24px; height: 24px; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #7d7d7d; }
.panel ul.pagination li.page.active a { font-weight: bold; color: #111; }
.panel ul.pagination li.prev , .panel ul.pagination li.next { margin: 0 5px; line-height: 1; }
.panel ul.pagination li.prev a , .panel ul.pagination li.next a { display: flex; align-items: center; font-size: 25px; color: #838383; line-height: .75; }
.panel ul.pagination li.disabled { opacity: .5; }
.panel ul.pagination li.disabled a { cursor: not-allowed; }

/* rulelist */
ol.rulelist { margin-left: 1.5rem; list-style: decimal; }
ol.rulelist li { margin: 2px 0; font-weight: 400; color: #504539; }

/* note_box */
.note_box { margin-top: 2em; font-weight: 500; color: #ad0101; }

/* win_box */
#win_box { position: absolute; background: rgb(0 0 0 / 85%); display: flex; flex-direction: column; justify-content: center; align-items: center; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; opacity: 0; pointer-events: none; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; }
#win_box .win_content { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#win_box .win_content .closewin { position: absolute; width: 25px; aspect-ratio: 1/1; background: #000; border-radius: 50%; outline: 2px #fff solid; display: flex; justify-content: center; align-items: center; top: 20%; right: 20%; }
#win_box .win_content .closewin svg { width: 50%; aspect-ratio: 1/1; }
#win_box .win_content * { color: #fff; }
#win_box .win_content >h4 { position: absolute; top: 20%; }
#win_box .win_content .txt { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1em; top: calc(50% + 1em); left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
#win_box .win_content .txt * { text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff; font-size: 22px; color: #2f2222; }
#win_box .win_content .txt p { display: flex; align-items: baseline; line-height: 1.3; gap: .3em; }
#win_box .win_content .txt p span { color: #9d0112; }
#win_box .win_content .txt p.bouns_txt { font-weight: bold; font-size: 1em; color: #9d0112; }
#win_box .win_content .txt p.bouns_txt b { line-height: 1; font-size: 2.5em; color: #9d0112; }
#win_box .win_content .txt font { font-size: .9em; }
#win_box .win_content .txt #winprice { margin-right: .2em; line-height: 1.3; font-size: 2em; }
#win_box .win_content #btnOK { position: absolute; width: 33%; text-align: center; bottom: 0; }

#win_box[data-type="2"] { opacity: 1; pointer-events: auto; }

/* gotop */
.gotop { position: fixed; z-index: 97; right: 20px; bottom: 70px; background-color: #7a7a7a; cursor: pointer; }
.gotop a { display: block; }
.gotop svg { padding: 10px; width: 40px; height: 40px; fill: #fff; }

/*home and 客服*/
.side_nav { position: fixed; z-index: 50; top: 460px; right: 0; }
.side_nav li a { display: block; margin: 4px 0; padding: 10px; border-radius: 5px; background: rgba(122,122,122,1); background: -moz-linear-gradient(top, rgba(122,122,122,1) 0%, rgba(18,3,3,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(122,122,122,1)), color-stop(100%, rgba(18,3,3,1))); background: -webkit-linear-gradient(top, rgba(122,122,122,1) 0%, rgba(18,3,3,1) 100%); background: -o-linear-gradient(top, rgba(122,122,122,1) 0%, rgba(18,3,3,1) 100%); background: -ms-linear-gradient(top, rgba(122,122,122,1) 0%, rgba(18,3,3,1) 100%); background: linear-gradient(to bottom, rgba(122,122,122,1) 0%, rgba(18,3,3,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a7a7a', endColorstr='#120303', GradientType=0 ); }
.side_nav i{ font-size: 40px; color: #fff; }

/* join_content */
.join_content { position: fixed; width: 100%; background: #ddd; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 1px; box-shadow: 0 0 20px rgb(0 0 0 / 20%); bottom: 0; left: 0; z-index: 80; }
.join_content a { padding: 10px 5px 5px; background: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.join_content a * { font-size: 20px; color: #e21415; }
.join_content a font { font-weight: 400; font-size: 15px; }

/* animation */
@-webkit-keyframes celebrate { 0% , 100% { -webkit-transform: translateX(-50%) scale(1); } 50% { -webkit-transform: translateX(-50%) scale(.8); } }
@keyframes celebrate { 0% , 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(.8); } }

@media screen and (min-width: 1501px){
	#headervue header { width: 1480px; }
}
@media screen and (min-width: 1281px){
	#wrap .content_box section { width: min(95%, 1000px); }
}
@media screen and (min-width: 1025px){
	#headervue header #top_menu ul li:hover a { background: linear-gradient(to bottom, #b10f24 0%,#b20422 14%,#620814 70%,#b10f24 100%); }
	#headervue header #top_menu ul li:hover a b { background-image: linear-gradient(to bottom, #ffffff 0%,#f6d3a5 100%); }
	#submenuvue ul li:hover a { background-image: url(../images/img_submenu_hover.webp); }
	#submenuvue ul li:hover a b { background-image: linear-gradient(to bottom, #ffffff 0%,#f6d3a5 100%); }
}
@media screen and (max-width: 1024px){
	#wrap .content_box .content_box_bg:before { height: 97%; }
	#wrap .content_box .content_box_bg:after { width: 190%; height: 15%; }
}
@media screen and (max-width: 960px){
	#wrap .content_box:before { height: 15vw; }
}
@media screen and (min-width: 769px){
	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 { font-size: 18px; }
	#headervue header #top_menu { position: absolute; top: 63px; }
	#headervue header .menu_box:hover #top_menu { padding-top: 17px; opacity: 1; pointer-events: auto; }
	#headervue header #top_menu ul { background: rgb(17 17 17 / 85%); }
	.join_content { display: none; }
}
@media screen and (max-width: 768px){
	#headervue header #logo a svg { width: 90px; height: 40px; }
	#headervue header .btns_box li >a { display: none; }
	#headervue header #top_menu { width: 100vw; height: 100vh; background: rgb(0 0 0 / 35%); right: 0; }
	#headervue header #top_menu ul { position: fixed; height: calc(100vh - 60px); background: rgb(0 0 0 / 80%); box-shadow: 0 5px 20px rgb(255 255 255 / 40%); border-left: 1px rgb(255 255 255 / 20%) solid; top: 60px; right: -300px; }
	#headervue header #top_menu.open ul { right: 0; }
	#headervue header #top_menu ul li a { padding: 10px; }
	#menu_btn { display: block; }
	#wrap .content_box .content_box_bg { height: 95%; }
	#submenuvue ul { grid-template-columns: repeat(3, 1fr); grid-gap: .3em; }
	.info_box .item_box { margin: 20px 50px 20px 10px; }
	.info_box .item_box:before { width: 73px; height: 73px; top: 10px; }
	.table_box td { font-weight: 500; font-size: 14px; }
	.game_info .title_box { margin-bottom: 15px; }
	.game_info .title_box h3 b { font-size: 25px; }
	.game_info .title_box h3 img { width: 3em; }
	.game_info .title_box p { font-size: 18px; }
	.game_info .title_box article { font-weight: 500; font-size: 17px; }
	.example_box .ex_body { padding: 2%; }
}
@media screen and (max-width: 640px){
	#submenuvue ul li a b { font-size: 3.5vw; }
	.table_box { border-spacing: 2px; }
}
@media screen and (max-width: 550px){
	#wrap .content_box section { width: 99%; }
	#login_btn { margin: 5vmax auto 3vmax; width: min(90%, 220px); }
	.game_info { margin: 0 10px; }
	.info_box .item_box:before { width: 68px; height: 68px; right: -32px; }
	.info_box .item_box h3 , .join_content a i { font-size: 18px; }
	.join_content a font { line-height: 1.5; }
}
@media screen and (max-width: 480px){
	#wrap .content_box:after { aspect-ratio: 5/3; }
	#win_box .win_content .txt * { font-size: 18px; }
}