:root {
	/* Layout */
	--container-max: 1280px;
	--container-width: min(98vw, var(--container-max));
	--container-space: calc((100% - var(--container-width)) / 2);
	--wrap_bottom: 512px;
	--fix-width: 100%;

	/* Animation */
	--swing-duration: 2s;
	--ease: ease-in-out;
	--trans-default: color .2s linear, background-color .2s linear, opacity .2s linear, transform .2s linear, box-shadow .2s linear, filter .2s linear;

	/* Colors - Brand / Red */
	--clr-red-dark: #5b1919;
	--clr-red-base: #c40200;
	--clr-red-bright: #ff1500;
	--clr-red-accent: #a71f17;

	/* Colors - Gold / Brown / Orange */
	--clr-gold-base: #b38745;
	--clr-gold-light: #fecd95;
	--clr-brown-dark: #5b3f15;
	--clr-brown-base: #71330d;
	--clr-orange-base: #c57519;
	--clr-orange-light: #fff2df;
	--clr-orange-text: #aa591a;

	/* Colors - Neutral */
	--clr-white: #fff;
	--clr-black: #111;
	--clr-gray-dark: #7a7a7a;
	--clr-gray-light: #e3e3e3;
	--clr-bg-mask: rgba(0, 0, 0, 0.65);
	--clr-bg-mask-dark: rgba(0, 0, 0, 0.8);

	/* Gradients */
	--grad-red: linear-gradient(to bottom, #e73131 16%, #c51717 56%, #8f1210 91%);
	--grad-gray: linear-gradient(to bottom, #959595 16%, #6d6d6d 56%, #3f3c3c 91%);
	--grad-gold-txt: -webkit-linear-gradient(top, #fff 0%, #fecd95 100%);
	--grad-red-hover: -webkit-linear-gradient(top, #ef2735 0%, rgba(218,10,24,1) 25%, #a00404 100%);
	--grad-nav-hover: -webkit-linear-gradient(20deg, #790000 0%, #e40000 45%, #790000 83%, #790000 100%);
	--grad-side-nav: -webkit-linear-gradient(top, #7a7a7a 0%, #111 100%);

	/* Shadows */
	--shadow-txt: 0 6px 6px rgba(65, 65, 65, 0.18);
	--shadow-box: 0 0 20px rgba(0, 0, 0, 0.2);
}

*:focus { outline: none; }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; transition: var(--trans-default); }

html, body { font-family: 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-size: 16px; line-height: 1.7; color: var(--clr-black); word-wrap: break-word; word-break: break-word; }

header, footer, div, nav, article, h2, h3, h4, h5, h6, hr, p, form, label, input, textarea, ul, ol, li, img, svg, span, font, strong, b, a, i { text-align: left; vertical-align: middle; border-width: 0; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }

ul , ol { list-style: none; }

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

/* links */
a , a:link , a:visited , a:hover { text-decoration: none; white-space: pre-wrap; }
a.tblink { vertical-align: baseline; cursor: auto; color: currentColor; }

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

/* fixed helper */
.fix--left { left: calc(var(--container-space) - var(--offset-x)); }
.fix--right { right: calc(var(--container-space) - var(--offset-x)); }
.fix--top { top: var(--offset-y); }
.fix--bottom { bottom: var(--offset-y); }
.fix--top.fix--bottom { top: auto; bottom: auto; }
[class^="fix"] { position: absolute; width: var(--w, var(--fix-width)); aspect-ratio: var(--ratio); }

/* headervue */
#headervue { position: sticky; top: 0; left: 0; z-index: 999; width: 100%; background: url(../images/header_background.webp) no-repeat 50%; }
#headervue header { position: relative; margin: auto; padding: 10px 0; width: min(90%, 1480px); 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: var(--clr-white); }
#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 { opacity: 1; pointer-events: auto; z-index: 99; }
#headervue header #top_menu ul { width: 226px; background: var(--clr-bg-mask-dark); }
#headervue header #top_menu ul li:not(:last-child) { border-bottom: 1px var(--clr-gray-dark) 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; z-index: 2; font-weight: 700; font-size: 17px; color: transparent; background: var(--clr-white); background-clip: text; -webkit-background-clip: text; }

/* menu_btn */
#menu_btn { position: absolute; top: 50%; right: 15px; z-index: 100; width: 30px; height: 22px; display: none; transform: translateY(-50%); }
#menu_btn span { position: absolute; top: 0; right: 0; width: 100%; height: 2px; background: var(--clr-white); display: block; 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%; transform: rotate(45deg); }
#menu_btn.open span:nth-child(2) { opacity: 0; }
#menu_btn.open span:nth-child(3) { top: 50%; transform: rotate(-45deg); }

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

/* wrap */
#wrap { position: relative; z-index: 15; background: url(../images/wrap_background.webp) no-repeat 50% 0 / cover; }
#wrap .content_box { position: relative; overflow: hidden; padding-top: 40px; padding-bottom: 2%; }
#wrap .content_box::before { position: absolute; top: 0; left: 50%; transform: translateX(-50%); content: ""; width: var(--container-width); height: calc(100% - (var(--wrap_bottom) / 3)); background: var(--clr-white); border-radius: 0 0 50% 50% / 0 0 8% 8%; }
#wrap .content_box::after { position: relative; z-index: 9; pointer-events: none; content: ""; display: block; max-width: 100%; height: var(--wrap_bottom); background: url(../images/wrap_bottom.webp) no-repeat 50% 0 / auto 100%; }
#wrap .content_box section { position: relative; z-index: 20; margin: 0 auto; width: 960px; }

/* fiximgvue */
#fiximgvue { overflow: hidden; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#fiximgvue .fix_box { height: 186px; background: url(../images/wrap_top.webp) no-repeat 50% 0; }
#fiximgvue .fix_box::before, #fiximgvue .fix_box::after { position: absolute; top: 0; z-index: 10; content: ""; width: var(--w, var(--fix-width)); background-repeat: no-repeat; background-position: 50% 0; background-size: cover; transform-origin: top center; animation: swing var(--swing-duration) infinite var(--ease); }
#fiximgvue .fix_box::before { --w: 160px; aspect-ratio: 160 / 411; left: calc(var(--container-space) - (var(--w) / 1.1)); background-image: url(../images/lantern_left.webp); }
#fiximgvue .fix_box::after { --w: 154px; aspect-ratio: 22 / 45; right: calc(var(--container-space) - (var(--w) / 1.1)); background-image: url(../images/lantern_right.webp); animation-delay: 1.2s; }

#fiximgvue .fix01 { --w: 130px; --ratio: 65 / 73; --offset-x: calc(var(--w) / .8); --offset-y: 19%; animation: float-swing 5s infinite var(--ease); }
#fiximgvue .fix02 { --w: 137px; --ratio: 137 / 127; --offset-x: calc(var(--w) / .6); --offset-y: 16%; }
#fiximgvue .fix03 { --w: 259px; --ratio: 259 / 312; --offset-x: calc(var(--w) / .8); --offset-y: 30%; }
#fiximgvue .fix04 { --w: 422px; --ratio: 211 / 157; --offset-x: calc(var(--w) / 2); --offset-y: 25%; }
#fiximgvue .fix05 { --w: 150px; --ratio: 50 / 81; --offset-x: calc(var(--w) / .7); --offset-y: 40%; animation: float-swing 6s infinite var(--ease); }
#fiximgvue .fix06 { --w: 210px; --ratio: 105 / 284; --offset-x: calc(var(--w) / .8); --offset-y: 42%; animation: float-swing 3s infinite var(--ease); }
#fiximgvue .fix07 { --w: 378px; --ratio: 189 / 169; --offset-x: calc(var(--w) / 1.5); --offset-y: 22%; }
#fiximgvue .fix08 { --w: 277px; --ratio: 277 / 204; --offset-x: calc(var(--w) / .8); --offset-y: 31%; }

/* 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: 225/62; background: url(../images/submenu.webp) no-repeat 50% / 100% auto; display: flex; justify-content: center; align-items: center; }
#submenuvue ul li a b { position: relative; z-index: 1; font-weight: 700; font-size: 20px; color: transparent; text-shadow: var(--shadow-txt); background: var(--grad-gold-txt); background-clip: text; -webkit-background-clip: text; }
#submenuvue ul li a b::before, #submenuvue ul li a b::after { position: absolute; top: 0; z-index: -1; content: ""; pointer-events: none; opacity: 0; width: 25px; height: 100%; background: url(../images/submenu_firecracker.webp) no-repeat 50% / 100% auto; left: -1.5em; transform: translateX(5px); }
#submenuvue ul li a b::after { left: auto; right: -1.5em; transform: translateX(-5px) scaleX(-1); }

#submenuvue ul li.action a { background-image: url(../images/submenu_hover.webp); }
#submenuvue ul li.action a b { background-image: var(--grad-red-hover); }
#submenuvue ul li.action a b::before { transform: translateX(0); opacity: 1; }
#submenuvue ul li.action a b::after { transform: translateX(0) scaleX(-1); opacity: 1; }

/* welcome_txt */
.welcome_txt { position: relative; margin: auto; padding: 6% 6% 4%; width: min(80vw, 364px); aspect-ratio: 364/349; background: url(../images/welcome_background.webp) no-repeat 50% / cover; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.welcome_txt font { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; font-weight: 500; color: var(--clr-red-dark); }
.welcome_txt font b { margin: 0 4px; display: inline-block; color: var(--clr-red-base); }
.welcome_txt font span { margin: 0 .3em; color: var(--clr-red-bright); }
.welcome_txt .btn { margin-top: 1em; }

/* table_box */
.table_box { margin: auto; width: 100%; border-spacing: 2px; border-collapse: separate; }
.table_box td { padding: 8px 2px; background: var(--clr-orange-light); text-align: center; font-weight: 500; color: var(--clr-brown-dark); }
.table_box thead td, .table_box td.red_bg { background: var(--clr-orange-base); color: var(--clr-white); }
.table_box.small_table { width: min(100%, 600px); }

#task_list { width: min(100%, 830px); }

/* game_info */
.game_info { position: relative; padding-bottom: 3vmax; display: flex; flex-direction: column; gap: 4vmax; }
.game_info .row { display: flex; flex-direction: column; gap: 2vmax; }

/* title_box */
.title_box h3 { position: relative; margin: auto; width: 302px; aspect-ratio: 302/115; background: url(../images/title_background.webp) no-repeat 50% / cover; display: flex; justify-content: center; align-items: center; }
.title_box h3 b { position: absolute; padding-bottom: 11%; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 1.6em; color: var(--clr-brown-base); }
.title_box .sub_box { margin-bottom: 1em; color: var(--clr-black); }
.title_box .sub_box h4 { font-size: 1.35em; color: var(--clr-red-base); }
.title_box .activity_tit { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1em; }
.title_box .activity_tit img:last-child { transform: scaleY(-1); }
.title_box .activity_tit b { line-height: 1; font-size: 1.35em; color: var(--clr-gold-base); }
.title_box p { font-weight: 600; font-size: 20px; color: var(--clr-orange-text); }
.title_box article { color: var(--clr-brown-dark); }
.title_box article span { color: var(--clr-red-base); vertical-align: baseline; }

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

/* note_box */
.note_box { margin-top: 2em; display: flex; justify-content: center; align-items: center; gap: 2em; }
.note_box::before, .note_box::after { content: ""; width: 160px; height: 1.5em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 298.7'%3E%3Cpath d='M431.41 0v174.35H554v-50h-72.59V50H622.5v198.7H368.72V0H0v298.7h248.02V117H109v50h89.02v81.7H50V50h268.72v248.7H672.5V0z' fill='%23b38745'/%3E%3Cpath d='M672.5 0H800v298.7H672.5z' fill='none'/%3E%3C/svg%3E") repeat-x 0 50% / auto 10px; }
.note_box b { min-width: 15em; color: var(--clr-gold-base); }

/* win_box */
#win_box { position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; opacity: 0; pointer-events: none; background: var(--clr-bg-mask); display: flex; flex-direction: column; justify-content: center; align-items: center; }
#win_box .win_area { position: relative; margin-bottom: 1.5em; width: min(90vw, 262px); aspect-ratio: 131/158; background: url(../images/win_background.webp) no-repeat 50% / cover; }
#win_box .win_area::before { position: absolute; inset: 0; content: ""; background: url(../images/win_light.webp) no-repeat 50% / cover; }
#win_box .win_area::after { position: absolute; content: ""; width: 86px; aspect-ratio: 86/69; background: url(../images/cloud.webp) no-repeat 50% / cover; top: 10%; left: -15%; }
#win_box .win_area .txt { position: absolute; inset: 0; padding: 0 5%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#win_box .win_area .txt::before, #win_box .win_area .txt::after { position: absolute; content: ""; bottom: 6%; left: 0; width: 56px; aspect-ratio: 7/5; background: url(../images/yuanbao01.webp) no-repeat 50% / cover; }
#win_box .win_area .txt::after { left: auto; right: 0; bottom: 5%; width: 77px; aspect-ratio: 77/58; background-image: url(../images/yuanbao02.webp); }
#win_box .win_area .txt * { color: var(--clr-white); }
#win_box .win_area .txt p { display: flex; align-items: baseline; line-height: 1.3; }
#win_box .win_area .txt #winprice { margin: .3em 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; font-family: 'Noto Sans'; line-height: 1.3; font-size: 2em; color: var(--clr-red-bright); text-shadow: -1px -1px 0 var(--clr-white), 1px -1px 0 var(--clr-white), -1px 1px 0 var(--clr-white), 1px 1px 0 var(--clr-white); }
#win_box .win_area .txt #winprice b { line-height: 1.2; font-weight: bold; font-size: .8em; color: currentColor; }
#win_box .win_area .txt #winprice b:not(:last-child)::after { content: "、"; font-size: .6em; }
#win_box .bottom_btn { position: absolute; bottom: -10%; left: 50%; transform: translateX(-50%); z-index: 10; width: 100%; display: block; }
#win_box .win_area .txt font { font-size: .9em; }

#win_box[data-type="2"] { opacity: 1; pointer-events: auto; z-index: 9999; }
#win_box[data-type="2"] .win_area::before { animation: celebrate1 1s infinite alternate var(--ease); }
#win_box[data-type="2"] .win_area::after { animation: celebrate2 1s infinite alternate var(--ease); }
#win_box[data-type="2"] .win_area .txt::before, #win_box[data-type="2"] .win_area .txt::after { animation: celebrate3 1.5s infinite alternate var(--ease); }
#win_box[data-type="2"] .win_area .txt::after { animation-delay: .3s; -webkit-animation-delay: .3s; }

/* alert_box */
#alert_box { position: fixed; top: 0; left: 0; z-index: 90; width: 100%; height: 100%; background: var(--clr-bg-mask-dark); display: flex; justify-content: center; align-items: center; }
#alert_box article { position: relative; padding-top: 30px; width: min(95%, 385px); background: var(--clr-white); border-radius: 10px; text-align: center; }
#alert_box .close_alert_box { position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; background: var(--clr-black); border: 2px var(--clr-white) solid; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
#alert_box .close_alert_box svg { width: 55%; height: 55%; }
#alert_box article h3 { font-size: 22px; }
#alert_box #alert_list { margin: 10px 20px 20px; text-align: center; }
#alert_box #alert_list p { display: flex; justify-content: center; align-items: center; }
#alert_box #alert_list p.final, #alert_box #alert_list p.final:nth-child(2n) { background-color: transparent; border: 0; }
#alert_box #alert_list p svg { margin-right: 10px; width: 24px; height: 24px; fill: var(--clr-red-accent); }
#alert_box #alert_btn { padding: 15px 5px; display: flex; justify-content: center; align-items: center; gap: 1em; border-top: 1px var(--clr-gray-light) solid; }
#alert_box #alert_btn .btn { position: relative; padding: .2em .5em .4em; min-width: 120px; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5); border-radius: 2em; display: inline-block; text-align: center; font-weight: 500; color: var(--clr-white); }
#alert_box #alert_btn .btn::before { content: ""; position: absolute; margin: 4px 5px; border: 1px rgba(255, 255, 255, 0.3) solid; border-radius: 2rem; inset: 0; }
#alert_box #alert_btn .btn.btn_red { background: var(--grad-red); }
#alert_box #alert_btn .btn.btn_gray { background: var(--grad-gray); }

/* gotop */
.gotop { position: fixed; z-index: 97; right: 20px; bottom: 70px; background-color: var(--clr-gray-dark); cursor: pointer; }
.gotop a { display: block; }
.gotop svg { padding: 10px; width: 40px; height: 40px; fill: var(--clr-white); }

/* home and 客服 */
.side_nav { position: fixed; z-index: 50; top: 460px; right: 0; }
.side_nav li a { margin: 4px 0; padding: 10px; border-radius: 5px; display: block; background: var(--grad-side-nav); }
.side_nav i { font-size: 40px; color: var(--clr-white); }

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

/* Animations */
@keyframes swing { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }
@keyframes float-swing { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(4px); } }
@keyframes celebrate1 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes celebrate2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3px, -5px); } }
@keyframes celebrate3 { 0%, 10%, 50%, 100% { transform: rotate(0deg); } 5%, 15% { transform: rotate(7deg); } }

@media screen and (min-width: 1441px) {
	#fiximgvue img:not(.fix04, .fix07) { z-index: 10; }
}
@media screen and (max-width: 1440px) {
	#fiximgvue .fix_box::before { --w: 8vw; }
	#fiximgvue .fix_box::after { --w: 7vw; }
	#fiximgvue .fix01 { --w: 6vw; }
	#fiximgvue .fix02 { --w: 7vw; --offset-x: calc(var(--w)); }
	#fiximgvue .fix03 { --w: 14vw; --offset-x: calc(var(--w) / 2); }
	#fiximgvue .fix04 { --w: 25vw; }
	#fiximgvue .fix05 { --w: 7vw; --offset-x: calc(var(--w) / 1.5); }
	#fiximgvue .fix06 { --w: 12vw; --offset-x: calc(var(--w) / 2); }
	#fiximgvue .fix07 { --w: 24vw; --offset-x: calc(var(--w) / 3); }
	#fiximgvue .fix08 { --w: 17vw; --offset-x: calc(var(--w) / 2); }
	#wrap .content_box::before { background: rgb(255 255 255 / 80%); backdrop-filter: blur(4px); }
}
@media screen and (min-width: 1281px) {
	#wrap .content_box section { width: 1000px; }
}
@media screen and (min-width: 1025px) {
	#headervue header #top_menu ul li:hover a { background: var(--grad-nav-hover); }
	#headervue header #top_menu ul li:hover a b { background-image: var(--grad-gold-txt); text-shadow: var(--shadow-txt); }
	#submenuvue ul li:hover a { background-image: url(../images/submenu_hover.webp); }
	#submenuvue ul li:hover a b { background-image: var(--grad-red-hover); }
	#submenuvue ul li:hover a b::before { transform: translateX(0); opacity: 1; }
	#submenuvue ul li:hover a b::after { transform: translateX(0) scaleX(-1); opacity: 1; }
}
@media screen and (max-width: 1024px) {
	#wrap:before, #wrap:after { background-size: 140% auto; }
	#wrap .content_box section { width: 95%; }
	#fiximgvue .fix_box { display: none; }
}
@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; }
	.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: rgba(0, 0, 0, 0.35); right: 0; }
	#headervue header #top_menu ul { position: fixed; top: 60px; right: -300px; height: calc(100vh - 60px); }
	#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: var(--shadow-txt); }
	#menu_btn { display: block; }
	#wrap .content_box { padding-bottom: 20px; }
	#wrap .content_box::before { height: calc(100% - (var(--wrap_bottom) / 3.5)); border-radius: 0 0 80vw 90vw / 0 0 30vw 30vw; }
	#wrap .content_box::after { --wrap_bottom: 60vw; }
	#submenuvue ul { grid-template-columns: repeat(3, 1fr); grid-gap: .3em; }
	#submenuvue ul li a b::before, #submenuvue ul li a b::after { display: none; }
	.table_box td { font-weight: 500; font-size: 14px; }
	.title_box { margin-bottom: 15px; }
	.title_box h3 svg { height: 34px; }
	.title_box p { font-size: 18px; }
	.title_box article { font-weight: 500; font-size: 17px; }
}
@media screen and (max-width: 640px) {
	#submenuvue ul li a b { font-size: 3vw; }
	.table_box { border-spacing: 2px; }
}
@media screen and (max-width: 550px) {
	#wrap:before, #wrap:after { background-size: 190% auto; }
	#wrap .content_box section { width: 99%; }
	#login_btn { margin: 5vmax auto 3vmax; width: 40vw; }
	.game_info { margin: 0 10px; }
	.title_box h3 { width: 45vw; }
	.title_box h3 b { padding-bottom: 9%; font-size: 110%; }
	.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; }
}