@import url('./fontawesome-all.css');
@import url('./font-awesome.min.css');
@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; }

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

/* headervue */
#headervue { position: fixed; width: 100%; background: url(../images/img_header_background.jpg) 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:last-child { padding-bottom: 1px; border-bottom: 0; }
#headervue header #top_menu ul li a { overflow: hidden; position: relative; margin: 1px; padding: 5px 10px; border: 1px transparent solid; border-radius: 5px; display: block; text-align: center; }
#headervue header #top_menu ul li a b { position: relative; font-weight: 400; font-size: 17px; color: #fff; 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;padding-top: 80px;z-index: 50;}
#bannervue .slick-slider { margin-bottom: 0; }

/* wrap */
#wrap {overflow: hidden;position: relative;background: #fff9e8;}
#wrap:before {position: absolute;width: 100%;height: 100%;background: url(../images/img_body_background_top.webp) no-repeat 50% top;top: 0;left: 0;z-index: 1;content: "";}
#wrap:after {position: absolute;width: 100%;height: 100%;background: url(../images/img_wrap_background.webp) no-repeat 50% bottom;top: 0;left: 0;z-index: 1;content: "";}

#wrap .content_box {position: relative;padding-top: 40px;z-index: 3;}
#wrap .content_box:before {position: absolute;width: 100%;height: 94%;background: rgb(255 255 255 / 110%);filter: drop-shadow(-1px 0 1.5em rgb(186 175 153 / 50%));top: 0;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);content: "";border-radius: 0 0 200px 200px;}
#wrap .content_box:after {position: relative;margin-top: 4vmax;width: 100%;height: 32vw;background: url(../images/img_wrap_bottom.png) no-repeat 50% 0 / cover;background-size: contain;display: block;z-index: 9;content: "";}
#wrap .content_box section { position: relative; margin: 0 auto; width: 960px; z-index: 10; }

/* fiximgvue */

#fiximgvue .fix01 {position: absolute;width: 9.5vw;top: 10vh;left: 9vw;z-index: 4;}
#fiximgvue .fix02 {position: absolute;width: 10vw;top: 7vh;right: 5vw;z-index: 2;}
#fiximgvue .fix03 {position: absolute;width: 8vw;bottom: 130vh;left: 5vw;z-index: 3;}
#fiximgvue .fix04 {position: absolute;width: 9.5vw;top: 70vh;right: 9vw;z-index: 4;}
#fiximgvue .fix05 {position: absolute;width: 17vw;bottom: 40vh;left: -2vw;z-index: 2;}
#fiximgvue .fix06 {position: absolute;width: 13vw;bottom: 50vh;right: 0vw;z-index: 2;}

/* submenuvue */
#submenuvue {margin-bottom: 2vw;}
#submenuvue ul {display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 3px 10px;}
#submenuvue ul li { position: relative; }
#submenuvue ul li a {min-width: min(29vw, 245px);aspect-ratio: 23 / 7;background: url(../images/img_submenu.png) no-repeat 50% / 100% auto;display: flex;justify-content: center;align-items: center;line-height: 1;}
#submenuvue ul li a b {position: relative;padding: 17px 10px;width: 100%;display: flex;justify-content: center;align-items: center;line-height: 1;font-size: 1.1em;background-image: linear-gradient(to bottom, #ffffff 0%, #f0c08a 100%);-webkit-background-clip: text;background-clip: text;color: transparent;}
#submenuvue ul li.action a {background: url(../images/img_submenu_hover.png) no-repeat 50% / 100% auto;}
#submenuvue ul li.action a b{
    background-image: linear-gradient(to bottom, #ffffff 0%, #ffdcae 100%);
}
/* login_btn */
#login_btn { margin: 1vw 0 2vw; }

/* info_box */
.info_box .item_box {position: relative;margin: 40px 70px 40px 50px;padding: 15px 0 15px 50px;width: 270px;border: 4px #ad191f solid;border-right-width: 0;border-radius: .2rem;display: inline-block;}
.info_box .item_box img{}
.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: -20px;left: 7px;width: 50px;}
.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: 2vw auto 3vw;padding: 20px 10px;width: 400px;height: 250px;background: url(../images/img_welcome_bg.png) no-repeat 50%;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.welcome_txt h4 { font-size: 22px; color: #b99364; }
.welcome_txt font { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; font-weight: 500; }
.welcome_txt font b { margin: 0 4px; display: inline-block; color: #b99364; }
.welcome_txt #okBtn { display: inline-block; }

/* table_box */
.table_box {margin: 30px 0;width: 100%;border-spacing: 3px;border-collapse: separate;}
.table_box td {padding: 8px 2px;background: #f6f5f1;text-align: center;font-weight: 500;}
.table_box thead td , .table_box td.red_bg {background: linear-gradient(to bottom, #71471a 10%, #885a29 40% 30%, #e2b277 100%);color: #fff;}

/* game_info */
.game_info .row {margin: 3vmax 0;}
.game_info .row.s_box { margin: 2vmax 0; }
.game_info .title_box { margin-bottom: 30px; }
.game_info .title_box h3 { display: flex; justify-content: center; align-items: center; }
.game_info .title_box h3 img:last-child { -webkit-transform: scaleX(-1); transform: scaleX(-1); }
.game_info .title_box h3 b {margin: 0 15px;font-size: 32px;font-weight: 700;background-image: linear-gradient(to bottom, #ad0101 30%, #570000 100%);background-clip: text;color: transparent;}
.game_info .title_box p { margin-top: 10px; font-weight: 600; font-size: 20px; color: #a17d56; }
.game_info .title_box article { margin-top: 10px; font-weight: 600; font-size: 20px; }

/* exchange_box */
.exchange_box {margin: 20px 0 40px 0;}
.exchange_box ul {display: flex;grid-gap: 20px;justify-content: center;align-items: center;flex-direction: column;flex-wrap: wrap;}
.exchange_box ul li {padding: 45px 10px 55px 10px;background: url(../images/img_exchange_bg.png) no-repeat 50% / 100%;text-align: center;min-width: min(40vw, 270px);position: relative;display: flex;align-items: center;justify-content: center;}
.exchange_box ul li p { display: flex; justify-content: center; align-items: baseline; }
.exchange_box ul li p font {font-weight: 600;font-size: 32px;color: #a00d10;line-height: 100%;}
.exchange_box ul li p span {margin: 0 .3em;font-weight: 500;font-size: 18px;color: #a00d10;line-height: 100%;}
.exchange_box ul li p b {font-weight: 500;font-size: 24px;color: #a00d10;line-height: 100%;}
.exchange_box ul li.exchange_end p {max-width: 5.5em;text-align: center;font-weight: 500;font-size: 24px;color: #222;line-height: 1.2;}
.exchange_box ul li a {margin-top: 10px;padding: .5em 2em .6em;min-width: min(38vw, 150px);aspect-ratio: 20 / 7;background: url(../images/img_exchange_ok_btn.png) no-repeat 50% / 100% auto;border-radius: .3em;display: inline-block;line-height: 1;color: #fff;text-align: center;position: absolute;bottom: -30%;left: 50%;transform: translate(-50%, -50%);display: flex;align-items: center;justify-content: center;letter-spacing: 1px;font-size: 1.2rem;font-weight: 600;text-shadow: 0px 2px 1px #760001;}

/* prizerecord */
#prizerecord { margin: 30px auto 0; width: 700px; }

/* leaderboard_box */
#leaderboard_box { margin: 30px auto 50px; width: 380px; }
#leaderboard_box .title { padding: 7px 45px 7px 30px; background: #ffe6a5; background: -moz-linear-gradient(top,  #ffe6a5 6%, #ffd17a 13%, #76481d 65%, #6c3d0f 99%); background: -webkit-linear-gradient(top,  #ffe6a5 6%,#ffd17a 13%,#76481d 65%,#6c3d0f 99%); background: linear-gradient(to bottom,  #ffe6a5 6%,#ffd17a 13%,#76481d 65%,#6c3d0f 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe6a5', endColorstr='#6c3d0f',GradientType=0 ); clip-path: polygon(0 0, 90% 0%, 100% 100%, 0% 100%); display: inline-block; font-weight: 500; font-size: 20px; color: #fff; }
#leaderboard_box .list { margin-top: -1px; padding: 15px 30px; background: #1d0101; background: -moz-linear-gradient(left,  #1d0101 0%, #810b0f 57%, #861a1c 83%, #77070e 94%); background: -webkit-linear-gradient(left,  #1d0101 0%,#810b0f 57%,#861a1c 83%,#77070e 94%); background: linear-gradient(to right,  #1d0101 0%,#810b0f 57%,#861a1c 83%,#77070e 94%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d0101', endColorstr='#77070e',GradientType=1 ); }
#leaderboard_box .list ul { margin-bottom: 0; }
#leaderboard_box .list ul li { display: flex; justify-content: space-between; align-items: center; }
#leaderboard_box .list ul li font { margin: 2px 0; width: 48%; font-size: 18px; color: #fff; }

/* 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; }
.panel ul.pagination li.page.active a { 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; }

/* 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: 30px;padding: 10px 15px;background: linear-gradient(90deg, #ffffff 0%, #a70006 50%, #ffffff 100%);color: #ffffff;}

/* maskBg */
#maskBg { display: none; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 98; background: rgba(0,0,0,0.5); }
#maskBg.open { display: block; }

/* win_box */
#win_box { position: absolute; width: 100%; height: 100%; background: rgb(0 0 0 / 70%); display: flex; justify-content: center; align-items: center; top: 0; left: 0; z-index: 10; }
#win_box:before { position: absolute; width: 100%; height: 100%; background: url(../images/img_win2_bg.png) no-repeat 50% 40%; top: 0; left: 0; z-index: 2; -webkit-animation: winBg2 1.5s infinite alternate ease-in-out; animation: winBg2 1.5s infinite alternate ease-in-out; content: ""; }
#win_box article { position: relative; padding: 50px 20px 30px; width: 386px; background: url(../images/img_win_bg.png) #fff no-repeat 50% 0 / 120% auto; border-radius: 10px; text-align: center; -webkit-animation: winBg 1.5s infinite alternate ease-in-out; animation: winBg 1.5s infinite alternate ease-in-out; }
#win_box article * { position: relative; z-index: 10; }
#win_box .close_win_box { position: absolute; width: 30px; height: 30px; background: #000; border: 2px #fff solid; border-radius: 50%; display: flex; justify-content: center; align-items: center; top: -10px; right: -10px; }
#win_box .close_win_box svg { width: 55%; height: 55%; }
#win_box article h3 { font-size: 22px; }
#win_box article h2 { font-size: 42px; color: #901a1a; }
#win_box article h2 b { display: inline-block; font-size: 42px; color: #901a1a; }
#win_box article h2 span { margin: 4px 10px 0; display: inline-block; font-size: 25px; }
#win_box article a.ok_btn { margin-top: 10px; display: inline-block; }

/* 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; }

/* exchangeModal */
.ex-modal { display: none; }
.ex-modal.is-open { display: block; }
.ex-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9998; }
.ex-dialog {position: fixed;width: min(92vw, 480px);background: #fff;border-radius: 8px;box-shadow: 0 10px 30px rgba(0,0,0,.25);top: 50%;left: 50%;z-index: 9999;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
#exchangeForm h3 {margin: 0 0 40px;font-size: 18px;background: linear-gradient(to bottom, #b70000 30%, #7b0000 100%);color: #fff;text-align: center;padding: 10px 0;border-radius: 8px 8px 0 0;letter-spacing: 1px;}
.ex-field {margin-bottom: 12px;padding: 0 40px;display: grid;grid-template-columns: 80px 1fr;align-items: center;gap: 10px;}
.ex-field label {margin-bottom: 6px;display: block;font-size: 16px;font-weight: 500;letter-spacing: 1px;}
.ex-field input[type="text"], .ex-field input[type="tel"] { padding: 10px; width: 100%; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }
.ex-actions {margin-top: 30px;display: flex;justify-content: center;gap: 8px;align-items: center;margin-bottom: 30px;}
.ex-btn {color: #fff;background: transparent linear-gradient(180deg, #ed4242 0%, #b10505 50%, #5b0000 100%) 0% 0% no-repeat;color: #ffffff;font-weight: 500;font-size: 1.14rem;border-radius: 24px;padding: 11px 30px;border: none;cursor: pointer;letter-spacing: 2px;}
.ex-btn[disabled] { opacity: .7; cursor: not-allowed; }
.ex-btn--ghost {background: transparent linear-gradient(180deg, #ececec 0%, #e3e3e3 50%, #919191 100%) 0% 0% no-repeat;color: #111827;}


@-webkit-keyframes winBg { 0% , 100% { background-size: 120% auto; } 50% { background-size: 100% auto; } }
@keyframes winBg { 0% , 100% { background-size: 120% auto; } 50% { background-size: 100% auto; } }
@-webkit-keyframes winBg2 { 0% , 100% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(.8); } }
@keyframes winBg2 { 0% , 100% { transform: scale(1); } 50% { transform: scale(.8); } }

@media screen and (min-width: 1501px){
	#headervue header { width: 1480px; }
	#wrap .content_box:after {height: 510px;}
}
@media screen and (max-width: 1440px){
	#fiximgvue .fix01 { left: -2vw; }
	#fiximgvue .fix04 { right: 2vw; }
}
@media screen and (min-width: 1281px){
	#wrap .content_box:before {width: 1280px;}
	#wrap .content_box section { width: 1000px; }
}
@media screen and (max-width: 1280px){
    #wrap .content_box:before{height:94%;border-radius:0 0 50px 50px;width:102%}
}
@media screen and (min-width: 1025px){
	#headervue header #top_menu ul li:hover a { background: #ffe6a5; background: -moz-linear-gradient(top,  #ffe6a5 6%, #ffd17a 13%, #76481d 65%, #6c3d0f 99%); background: -webkit-linear-gradient(top,  #ffe6a5 6%,#ffd17a 13%,#76481d 65%,#6c3d0f 99%); background: linear-gradient(to bottom,  #ffe6a5 6%,#ffd17a 13%,#76481d 65%,#6c3d0f 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe6a5', endColorstr='#6c3d0f',GradientType=0 ); border-color: #bd9a6c; }
	#headervue header #top_menu ul li:hover a b { text-shadow: 0 0 5px rgb(72 72 72 / 20%), 0 0 10px rgb(72 72 72 / 20%), 0 0 15px rgb(72 72 72 / 20%), 0 0 20px rgb(72 72 72 / 20%); color: #fff; }
	#submenuvue ul li:hover:before , #submenuvue ul li:hover:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 334.84 35.9'%3E%3Cpath d='M308.8 34.9L332.9 1H1.94l24.1 33.9H308.8z' fill='%23a17b4a' stroke='%23fff' stroke-miterlimit='10' stroke-width='10'/%3E%3C/svg%3E"); }
	#submenuvue ul li:hover a {background: url(../images/img_submenu_hover.png) no-repeat 50% / 100% auto;}
}
@media screen and (max-width: 1024px){
	#wrap:before , #wrap:after { background-size: 140% auto; }
	#wrap .content_box:after {height: 42vw;background-size: auto 100%;}
	#wrap .content_box section {width: 95%;}
	#fiximgvue .fix04 { top: 20vw; right: -1vw; bottom: auto; }
    .exchange_box ul li a{bottom: -28%;}
    #submenuvue ul li a{min-width: min(29vw, 200px);}
}
@media screen and (max-width: 800px) {
	#prizerecord { width: 95%; }
	#submenuvue ul {grid-gap: 5px 12px;grid-template-columns: repeat(3, 1fr);}
    #exchangeForm h3{
    margin: 0 0 30px;
}
    .ex-field{
    padding: 0 20px;
}
}
@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; }
	#headervue header #top_menu ul li a b { text-shadow: 0 0 5px #e50f21, 0 0 10px #e50f21, 0 0 15px #e50f21, 0 0 20px #e50f21; }
	#bannervue {padding-top: 60px;}
	#menu_btn { display: block; }
	#wrap .content_box {padding-bottom: 40px;padding-top: 20px;}
	.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: 20px;}
	.game_info .title_box h3 b { font-size: 25px; }
	.game_info .title_box h3 svg { height: 34px; }
	.game_info .title_box p { font-size: 18px; }
	.game_info .title_box article { font-weight: 500; font-size: 17px; }
	.side_nav { display: none; }
    .exchange_box {margin: 20px 0 40px 0;}
	.exchange_box ul li {padding: 50px 10px 58px 10px;min-width: 280px;}
	.exchange_box ul li p font {font-size: 30px;}
	.exchange_box ul li p span { font-size: 16px; }
	.exchange_box ul li p b { font-size: 25px; }
    #fiximgvue .fix01{display: none;}
}
@media screen and (max-width: 640px){
    #wrap .content_box:before{height: 96%;}
	#fiximgvue .fix04 { z-index: 1; }
	#submenuvue ul li a b {padding: 12px 3px;font-size: 15px;}
	.table_box { border-spacing: 2px; }
	#win_box article { padding: 35px 20px 25px; width: 280px; }
	#win_box article h3 { font-size: 19px; }
	#win_box article h2 , #win_box article h2 b { font-size: 35px; line-height: 1.4; }
	#win_box article h2 span { font-size: 20px; }
	#win_box article p { font-size: 15px; }
	#win_box article a.ok_btn { margin-top: 0; width: 120px; }
	.exchange_box ul { grid-gap: 10px; }
	.exchange_box ul li p span { font-size: 14px; }
	.exchange_box ul li p b { font-size: 16px; }
	.exchange_box ul li a {font-size: 18px;bottom: -37%;}
}
@media screen and (max-width: 550px){
	#wrap .content_box section {width: 100%;}
	#submenuvue ul {margin: 0 5px;grid-template-columns: repeat(3, 1fr);}
	#login_btn { margin: 10vw auto; width: 60%; }
	.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; }
	#leaderboard_box { width: 100%; }
	.join_content a font { line-height: 1.5; }
    .exchange_box {margin: 10px 0 30px 0;}
	.exchange_box ul li {min-width: 220px;padding: 35px 10px 48px 10px;}
}
@media screen and (max-width: 450px){
	#submenuvue ul {grid-gap: 2px 4px;}
	.welcome_txt { width: 96%; background-size: 100% auto; }
	.exchange_box ul li {min-width: 270px;}
}
@media screen and (max-width: 380px){
	.exchange_box ul li {min-width: 260px;padding: 40px 10px 50px 10px;}
	.exchange_box ul li p font {font-size: 30px;}
	.exchange_box ul li p b { font-size: 15px; }
	.exchange_box ul li a {font-size: 17px;bottom: -26%;}
}