@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Roboto&family=Noto+Serif+TC:wght@400;500;600&family=Noto+Sans:wght@300;400;500;700&display=swap");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
				margin: 0;
				padding: 0;
				border: 0;
				font: inherit;
				vertical-align: baseline;
}

ol, ul {
				list-style: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
				display: block;
}

audio, canvas, video {
				display: inline-block;
}

audio:not([controls]) {
				display: none;
				height: 0;
}

[hidden] {
				display: none;
}

a, input {
				-webkit-tap-highlight-color: transparent;
}
a:focus, input:focus {
				outline: 0;
}
a:active, a:hover, input:active, input:hover {
				outline: 0;
}

abbr[title] {
				border-bottom: 1px dotted;
}

b, strong {
				font-weight: bold;
}

dfn {
				font-style: italic;
}

hr {
				box-sizing: content-box;
				height: 0;
}

mark {
				background: #ff0;
				color: #000;
}

code, kbd, pre, samp {
				font-family: monospace, serif;
				font-size: 1em;
}

pre {
				white-space: pre-wrap;
}

q {
				quotes: "“" "”" "‘" "’";
}

small {
				font-size: 80%;
}

sub {
				font-size: 75%;
				line-height: 0;
				position: relative;
				vertical-align: baseline;
}

sup {
				font-size: 75%;
				line-height: 0;
				position: relative;
				vertical-align: baseline;
				top: -0.5em;
}

sub {
				bottom: -0.25em;
}

img {
				width: 100%;
				height: auto;
				display: block;
}

svg:not(:root) {
				overflow: hidden;
}

figure {
				margin: 0;
}

fieldset {
				border: 1px solid #c0c0c0;
				margin: 0 2px;
				padding: 0.35em 0.625em 0.75em;
}

legend {
				border: 0;
				padding: 0;
}

button, input, select, textarea {
				font-family: inherit;
				font-size: 100%;
				margin: 0;
}

button, input {
				line-height: normal;
				background-color: transparent;
				border: none;
}

button, select {
				text-transform: none;
}

select, input {
				-webkit-appearance: none;
				outline: none;
				border: none;
				background-color: transparent;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
				-webkit-transition: background-color 5000s ease-in-out 0s;
				transition: background-color 5000s ease-in-out 0s;
}

button, html input[type=button] {
				-webkit-appearance: button;
				cursor: pointer;
}

input[type=reset], input[type=submit] {
				-webkit-appearance: button;
				cursor: pointer;
}

button[disabled], html input[disabled] {
				cursor: default;
}

input[type=checkbox], input[type=radio] {
				box-sizing: border-box;
				padding: 0;
}
input[type=search] {
				-webkit-appearance: textfield;
				box-sizing: content-box;
}
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
				-webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
				border: 0;
				padding: 0;
}

textarea {
				overflow: auto;
				vertical-align: top;
}

table {
				border-collapse: collapse;
				border-spacing: 0;
}

.clearfix {
				zoom: 1;
}
.clearfix:before {
				content: "";
				display: table;
}
.clearfix:after {
				content: "";
				display: table;
				clear: both;
}

html {
				font-family: sans-serif;
				line-height: 1;
				font-size: 16px;
}

a {
				text-decoration: none;
				color: black;
				display: block;
				cursor: pointer;
}

@font-face {
				font-family: "ProximaNova";
				src: url(../fonts/Proxima-Nova.ttc);
}
@font-face {
				font-family: "ProximaNova";
				src: url(../fonts/Proxima-Nova-Bold.otf);
				font-weight: bold;
}
@font-face {
				font-family: "ProximaNova";
				src: url(../fonts/Proxima-Nova-Xbold.otf);
				font-weight: 800;
}
@keyframes aniLoading {
				0% {
								transform: translateY(0);
				}
				25% {
								transform: translateY(-10px);
				}
				75% {
								transform: translateY(10px);
				}
				100% {
								transform: translateY(0);
				}
}
@keyframes aniFloat {
				100% {
								top: 5%;
				}
}
@keyframes aniShake {
				0% {
								transform: rotate(12deg);
				}
				50% {
								transform: translateY(0%);
				}
				100% {
								transform: rotate(-10deg);
				}
}
html, body {
				font-size: 100px;
				font-family: "Noto Sans TC", Arial, Helvetica, "微軟正黑體", Microsoft JhengHei, Apple LiGothic, "蘋果儷中黑";
}
html.lock, body.lock {
				overflow: hidden;
}

#wrapper #main {
				position: relative;
				max-width: 768px;
				margin: auto;
				font-size: 0.2rem;
}
@media screen and (max-width: 768px) {
				#wrapper #main {
								font-size: 4.67vw;
				}
}
#wrapper #main .alert {
				width: 100%;
				height: 100%;
				position: fixed;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				background-color: #ffffff;
				z-index: 99999999;
				justify-content: center;
				align-items: center;
				display: none;
}
#wrapper #main .alert.active {
				display: flex;
}
#wrapper #main .alert .qrcode {
				width: 50%;
				max-width: 1440px;
}
#wrapper #main .btn-box a {
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 1.4em;
				margin: auto;
}
#wrapper #main .btn-box a.gray {
				background-image: linear-gradient(to bottom, #9199a0, #737b82);
}
#wrapper #main .btn-box a.red {
				background-image: linear-gradient(to bottom, #cf0a2c, #af001e);
}
#wrapper #main .btn-box a .txt {
				color: #fff;
				font-weight: 500;
}
#wrapper #main .btn-box a .icon {
				margin-left: 0.5em;
}

#__vconsole {
				position: relative;
				z-index: 1000000;
}

.fade-leave-active {
				transition: opacity 0.25s;
}

.fade-enter-active {
				transition: opacity 0.35s;
}

.fade-enter-from,
.fade-leave-to {
				opacity: 0.1;
}

.fade-enter-to,
.fade-leave-from {
				opacity: 1;
}

.fadeLoading-enter-active {
				transition: 0.5s;
}

.fadeLoading-leave-active {
				transition: 0.5s;
}

.fadeLoading-enter-from, .fadeLoading-leave-to {
				opacity: 0;
}

.fadeLoading-enter-to, .fadeLoading-leave-from {
				opacity: 1;
}

.loading {
				width: 100%;
				height: calc(var(--vh, 1vh) * 100);
				background-color: #F3F3F3;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 999999;
}
.loading .container {
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
}
.loading .container .dot {
				width: 0.2em;
				height: 0.2em;
				border-radius: 99999px;
				background-color: #cf0a2c;
				animation-name: aniLoading;
				animation-iteration-count: infinite;
				animation-duration: 1.5s;
				margin: 0 0.05em;
}
.loading .container .dot:first-of-type {
				animation-delay: 0.1s;
}
.loading .container .dot:nth-of-type(2) {
				animation-delay: 0.25s;
}
.loading .container .dot:last-of-type {
				animation-delay: 0.4s;
}

header {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				z-index: 99;
}
header .container {
				display: flex;
				justify-content: space-between;
				background-color: #898989;
				padding: 0.18rem 0.25rem 0.18rem 0.3rem;
}
header .container a.logo {
				width: 0.63rem;
}
header .container a.btn-book {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #ffffff;
				padding: 0 0.125rem 0 0.1rem;
				border-radius: 9999px;
}
header .container a.btn-book .book {
				width: 0.18rem;
}
header .container a.btn-book .arrow {
				width: 0.069rem;
}
header .container a.btn-book .txt {
				color: #cf0a2c;
				font-size: 0.15rem;
				font-weight: 500;
				margin: 0 0.5em;
				padding-bottom: 0.1em;
}

.section .container {
				background: url("../images/bg-page.png") no-repeat center/contain;
				background-repeat: repeat-y;
				background-position-y: 0.25em;
}
.section .container .nav {
				display: flex;
				justify-content: flex-end;
				margin-bottom: 0.9em;
}
.section .container .nav a.btn-back, .section .container .nav a.btn-link {
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				z-index: 10;
}
.section .container .nav a.btn-back .icon, .section .container .nav a.btn-link .icon {
				width: 0.775em;
				margin-right: 0.35em;
}
.section .container .nav a.btn-back .txt, .section .container .nav a.btn-link .txt {
				color: #737b82;
				font-size: 0.9em;
				font-weight: bold;
				text-decoration: underline;
}
.section .container h2.title {
				color: #151415;
				font-size: 1.5em;
				font-weight: 900;
				text-align: center;
				line-height: 1.25;
				letter-spacing: 0.05em;
				border-bottom: 1px solid rgba(188, 188, 188, 0.5);
				padding: 0em 0em 0.78em 0em;
				box-sizing: border-box;
				width: 11.66em;
				margin: auto;
				position: relative;
}
.section .container h2.title::after {
				content: "";
				width: 1.66em;
				height: 0.115em;
				background-color: #cf0a2c;
				position: absolute;
				bottom: 0.05em;
				left: 50%;
				transform: translateX(-50%);
}
.section .container h2.title .style {
				font-family: ProximaNova;
}

.popup {
				position: fixed;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				z-index: 9999;
				background-color: rgba(21, 20, 21, 0.8);
				display: flex;
				justify-content: center;
				align-items: center;
}
.popup .container {
				background: url("../images/bg-page.png") no-repeat center/100% auto;
				background-repeat: repeat-y;
				background-position-y: 0.25em;
}

.main .container {
				padding-top: 5.65em;
				padding-bottom: 0.9em;
				height: 100vh;
				height: calc(var(--vh, 1vh) * 100);
				box-sizing: border-box;
				background: url("../images/bg-kv.png") no-repeat center/cover;
}
.main .container .sub-logo {
				width: 5.3em;
				margin: auto;
				margin-bottom: 1.3em;
}
.main .container .title {
				width: 13em;
				margin: auto;
				margin-bottom: 0.07em;
}
.main .container .subtitle {
				color: #151415;
				font-size: 1.3em;
				font-weight: 900;
				line-height: 1.15;
				text-align: center;
				margin-bottom: 1em;
				position: relative;
				z-index: 1;
}
.main .container .subtitle::before {
				content: "";
				width: 10em;
				height: 0.6em;
				position: absolute;
				bottom: 0em;
				left: 50%;
				background-color: #F5EBDD;
				z-index: -1;
				transform: rotate(-1.25deg) translateX(-50%);
				border-radius: 1.4em;
}
.main .container .subtitle .style {
				font-family: ProximaNova;
}
.main .container .info-box {
				padding-left: 3.8em;
				margin-bottom: 1em;
				position: relative;
}
.main .container .info-box::before {
				content: "";
				width: 6.095em;
				height: 6.095em;
				position: absolute;
				right: 0.1em;
				top: 0;
				background: url("../images/ic-qualified.png") no-repeat center/contain;
}
.main .container .info-box p {
				color: #151415;
				font-size: 1em;
				font-weight: bold;
				line-height: 1.5;
				margin-bottom: 0.35em;
				position: relative;
}
.main .container .info-box p::before {
				content: "";
				width: 1.5em;
				height: 1.5em;
				position: absolute;
				top: -0.1em;
				left: -1.7em;
				background: url("../images/ic-checkmark.svg") no-repeat center/contain;
}
.main .container .info-box p .red {
				color: #cf0a2c;
				font-family: ProximaNova;
}
.main .container .info-box p .size {
				font-family: ProximaNova;
				font-size: 1.5em;
}
.main .container .info-box p .coin {
				display: inline-block;
				width: 1.35em;
				margin: 0 0.15em;
}
.main .container .info-box p .line {
				position: relative;
				z-index: 1;
				font-family: ProximaNova;
				margin-left: 0.5em;
}
.main .container .info-box p .line::before {
				content: "";
				width: 115%;
				height: 0.8em;
				position: absolute;
				bottom: -0.25em;
				left: 50%;
				background-color: #F5EBDD;
				z-index: -1;
				transform: rotate(-2deg) translateX(-50%);
				border-radius: 1.4em;
}
.main .container .dec-box {
				position: relative;
}
.main .container .dec-box .book {
				width: 7.45em;
				margin: auto;
				margin-bottom: 0.5em;
				position: relative;
}
.main .container .dec-box .book .coin {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-40%, -50%);
				width: 3.3em;
}
.main .container .dec-box .dec {
				position: absolute;
				animation-name: aniFloat;
				animation-iteration-count: infinite;
				animation-direction: alternate;
				animation-duration: 1s;
}
.main .container .dec-box .dec:first-of-type {
				animation-delay: 0.1s;
}
.main .container .dec-box .dec:nth-of-type(1) {
				animation-delay: 0.3s;
}
.main .container .dec-box .dec:nth-of-type(2) {
				animation-delay: 0.1s;
}
.main .container .dec-box .dec:nth-of-type(3) {
				animation-delay: 0.2s;
}
.main .container .dec-box .dec:nth-of-type(4) {
				animation-delay: 0.3s;
}
.main .container .dec-box .gift {
				width: 1.7em;
				top: 0;
				left: 50%;
				transform: rotate(-15deg) translate(-6em, -1.5em);
}
.main .container .dec-box .check {
				width: 1.9em;
				top: 0;
				left: 50%;
				transform: translate(4em, 1em);
}
.main .container .dec-box .math {
				width: 3.05em;
				top: 0%;
				left: 50%;
				transform: translate(-7.5em, 4em);
}
.main .container .dec-box .vip {
				width: 2em;
				top: 0%;
				left: 50%;
				transform: rotate(-12deg) translate(3.25em, 6.5em);
}
.main .container .dec-box .wrong {
				width: 1.55em;
				top: 0%;
				left: 50%;
				transform: translate(-5.5em, 6.5em);
}
.main .container .btn-box {
				margin-bottom: 1.2em;
}
.main .container .btn-box a {
				width: 12.7em;
				height: 3em;
}
.main .container .btn-box a .txt {
				font-size: 1.2em;
}
.main .container .btn-box a .icon {
				width: 0.43em;
}
.main .container .link-box {
				display: flex;
				justify-content: space-around;
				padding: 0 1.5em;
}
.main .container .link-box a {
				display: flex;
}
.main .container .link-box a .icon {
				width: 1em;
				margin-right: 0.5em;
}
.main .container .link-box a .txt {
				color: #737b82;
				font-size: 0.8em;
				font-weight: bold;
				text-decoration: underline;
}

.note .container {
				padding: 4.5em 1.2em 2em 2.2em;
}
.note .container h2.title {
				margin-bottom: 1.9em;
}
.note .container h2.title::before {
				content: "";
				width: 2.47em;
				height: 3.135em;
				position: absolute;
				bottom: -0.4em;
				left: 0.15em;
				transform: rotate(-10deg);
				background: url("../images/ic-book.svg") no-repeat center/contain;
}
.note .container .coin-box, .note .container .exchange-box {
				background-color: #f3f3f3;
				margin: auto;
				margin-bottom: 2.5em;
				position: relative;
}
.note .container .coin-box > h3, .note .container .exchange-box > h3 {
				color: #fff;
				font-size: 1.2em;
				font-weight: bold;
				position: absolute;
				left: 0.375em;
				top: 0;
				z-index: 1;
				transform: translateY(-50%);
}
.note .container .coin-box > h3 span, .note .container .exchange-box > h3 span {
				font-family: ProximaNova;
}
.note .container .coin-box > h3::before, .note .container .exchange-box > h3::before {
				content: "";
				height: 2.08em;
				position: absolute;
				left: 49.5%;
				top: 70%;
				transform: translate(-50%, -50%);
				z-index: -1;
}
.note .container .coin-box {
				padding-top: 2.2em;
}
.note .container .coin-box > h3::before {
				width: 8.6em;
				background: url("../images/dec-coupon-short.png") no-repeat center/contain;
}
.note .container .coin-box .note-box p {
				color: #e7e7e7;
				font-size: 0.8em;
				font-weight: bold;
				line-height: 1.5;
				position: relative;
}
.note .container .coin-box .level-box {
				margin-bottom: 1.4em;
}
.note .container .coin-box .level-box .item {
				display: flex;
				align-items: center;
				padding: 0.5em 1.2em 0.65em 1.2em;
				position: relative;
}
.note .container .coin-box .level-box .item::after {
				content: "";
				width: 15.35em;
				height: 1px;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				background-color: rgba(112, 112, 112, 0.2);
}
.note .container .coin-box .level-box .item .title {
				color: #fff;
				font-size: 0.8em;
				font-weight: bold;
				width: 6.25em;
				height: 2.5em;
				border-radius: 0.3125em;
				line-height: 2.5em;
				text-align: center;
				margin-right: 1.1875em;
}
.note .container .coin-box .level-box .item .title span {
				font-family: ProximaNova;
}
.note .container .coin-box .level-box .item .title.normal {
				background-color: #737b82;
}
.note .container .coin-box .level-box .item .title.vip {
				background-color: #cd9c55;
}
.note .container .coin-box .level-box .item p.txt {
				color: #151415;
				font-size: 0.8em;
				font-weight: bold;
				display: flex;
				justify-content: center;
				align-items: center;
}
.note .container .coin-box .level-box .item p.txt .icon {
				width: 1.25em;
				margin: 0 0.1em;
}
.note .container .coin-box .level-box .item p.txt .num {
				font-size: 1.625em;
				font-family: ProximaNova;
}
.note .container .coin-box .gift-box {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				position: relative;
}
.note .container .coin-box .gift-box::before {
				content: "";
				width: 1px;
				height: 15.35em;
				background-color: rgba(112, 112, 112, 0.2);
				position: absolute;
				top: 0.3em;
				left: 47%;
				transform: translateX(-50%);
}
.note .container .coin-box .gift-box .item {
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				align-items: center;
				margin-bottom: 2.3em;
}
.note .container .coin-box .gift-box .item:first-of-type, .note .container .coin-box .gift-box .item:nth-of-type(3) {
				width: 40%;
}
.note .container .coin-box .gift-box .item:nth-of-type(4), .note .container .coin-box .gift-box .item:nth-of-type(2) {
				width: 52%;
}
.note .container .coin-box .gift-box .item:first-of-type, .note .container .coin-box .gift-box .item:nth-of-type(2) {
				position: relative;
}
.note .container .coin-box .gift-box .item:first-of-type::before, .note .container .coin-box .gift-box .item:nth-of-type(2)::before {
				content: "";
				width: 6.35em;
				height: 1px;
				background-color: rgba(112, 112, 112, 0.2);
				position: absolute;
				bottom: -1.29em;
				left: 50%;
				transform: translateX(-50%);
}
.note .container .coin-box .gift-box .item .icon {
				width: 4.15em;
				margin-bottom: 0.5em;
}
.note .container .coin-box .gift-box .item .txt h3 {
				color: #151415;
				font-size: 0.9em;
				font-weight: bold;
				line-height: 1.33;
				text-align: center;
				margin-bottom: 0.27em;
}
.note .container .coin-box .gift-box .item .txt h3 span {
				font-family: ProximaNova;
}
.note .container .coin-box .gift-box .item .txt p {
				color: #151415;
				font-weight: bold;
				font-size: 0.8em;
				display: flex;
				justify-content: center;
				align-items: center;
}
.note .container .coin-box .gift-box .item .txt p .small {
				color: #fff;
				font-size: 0.75em;
				background-color: #cd9c55;
				padding: 0.25em 0.5em;
				border-radius: 0.25em;
				margin-right: 0.2em;
}
.note .container .coin-box .gift-box .item .txt p .style {
				font-family: ProximaNova;
}
.note .container .coin-box .gift-box .item .txt p .highlight {
				font-size: 1.625em;
				font-family: ProximaNova;
}
.note .container .coin-box .gift-box .item .txt p .coin {
				width: 1.25em;
				margin: 0 0.1em;
}
.note .container .coin-box > p {
				color: #151415;
				font-size: 0.8em;
				font-weight: bold;
				line-height: 1.5;
				display: flex;
				align-items: center;
				justify-content: center;
}
.note .container .coin-box > p .highlight {
				color: #cf0a2c;
}
.note .container .coin-box > p .icon {
				width: 1.25em;
}
.note .container .exchange-box {
				padding: 3.4em 0 0.1em 0;
}
.note .container .exchange-box > h3::before {
				width: 10.5em;
				background: url("../images/dec-coupon-long.png") no-repeat center/contain;
}
.note .container .exchange-box .gift-box .item {
				display: flex;
				align-items: center;
				padding: 0 1.75em 1.2em 2.025em;
				margin-bottom: 1em;
				position: relative;
}
.note .container .exchange-box .gift-box .item:not(:last-of-type)::after {
				content: "";
				width: 15.35em;
				height: 1px;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				background-color: rgba(112, 112, 112, 0.2);
}
.note .container .exchange-box .gift-box .item .icon {
				width: 4.5em;
				margin-right: 1.1em;
}
.note .container .exchange-box .gift-box .item .txt h3 {
				color: #151415;
				font-size: 0.9em;
				line-height: 1.3;
				font-weight: bold;
				display: flex;
				flex-direction: column;
}
.note .container .exchange-box .gift-box .item .txt h3 .small {
				color: #fff;
				text-align: center;
				font-size: 0.66em;
				background-color: #cd9c55;
				padding: 0.3em 0.4em;
				max-width: 48px;
				border-radius: 0.25em;
				margin-bottom: 0.325em;
}
.note .container .exchange-box .note-box p {
				color: #e7e7e7;
				font-weight: bold;
}
.note .container .exchange-box .note-box p:nth-of-type(1) {
				font-size: 0.7em;
				line-height: 1.71;
}
.note .container .exchange-box .note-box p:nth-of-type(2) {
				font-size: 0.9em;
}
.note .container .detail-box {
				margin: auto;
				margin-bottom: 3em;
}
.note .container .detail-box h3 {
				color: #cf0a2c;
				font-size: 1.2em;
				text-align: center;
				font-weight: bold;
				margin-bottom: 0.625em;
				padding-left: 1em;
}
.note .container .detail-box .content {
				padding-right: 0.1em;
}
.note .container .detail-box .content > .item {
				margin-bottom: 0.75em;
}
.note .container .detail-box .content > .item.active .short-info {
				background-color: #737b82;
				transition: 0.5s;
}
.note .container .detail-box .content > .item.active .short-info p.title {
				color: #fff;
}
.note .container .detail-box .content > .item.active .short-info .btn-open img {
				content: url("../images/ic-arrow-circle-w.svg");
}
.note .container .detail-box .content > .item.active .full-info {
				height: auto;
				padding: 0.25em 1.4em 0.45em 1.4em;
				transition: 0.3s;
}
.note .container .detail-box .content > .item .short-info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				position: relative;
				background-color: #e7e7e7;
				padding: 1.5em 3.15em 1.5em 1em;
				border-radius: 0.25em;
				box-sizing: border-box;
				transition: 0.3s;
}
.note .container .detail-box .content > .item .short-info p.title {
				color: #737b82;
				font-size: 0.8em;
				font-weight: bold;
				line-height: 1.35;
}
.note .container .detail-box .content > .item .short-info .btn-open {
				position: absolute;
				top: 50%;
				right: 1.48em;
				transform: translateY(-50%);
}
.note .container .detail-box .content > .item .full-info {
				background-color: #f3f3f3;
				padding: 0 1.4em;
				border-radius: 0.25em;
				height: 0;
				overflow: hidden;
				transition: 0.5s;
}
.note .container .detail-box .content > .item .full-info .item {
				padding-top: 0.75em;
				padding-bottom: 0.7em;
}
.note .container .detail-box .content > .item .full-info .item:nth-of-type(2) {
				border-top: 1px solid #f1f1f1;
}
.note .container .detail-box .content > .item .full-info .item p.title {
				color: #fff;
				font-size: 0.6em;
				padding: 0.35em 0.5em;
				border-radius: 0.25em;
				display: inline-block;
				margin-bottom: 0.66em;
}
.note .container .detail-box .content > .item .full-info .item p.title.cost {
				background-color: #cd9c55;
}
.note .container .detail-box .content > .item .full-info .item p.title.event {
				background-color: #cf0a2c;
}
.note .container .detail-box .content > .item .full-info .item .txt {
				color: #151415;
				font-size: 0.8em;
				line-height: 1.35;
}
.note .container .detail-box .content > .item .full-info .item .txt .icon {
				display: inline-block;
				width: 1.25em;
				vertical-align: bottom;
				margin: 0 0.15em;
}
.note .container .detail-box .content > .item .full-info .item .txt .highlight {
				color: #cf0a2c;
}
.note .container .btn-box {
				margin-bottom: 1.2em;
}
.note .container .btn-box a {
				width: 12.7em;
				height: 3em;
}
.note .container .btn-box a .txt {
				font-size: 1.2em;
}
.note .container .btn-box a .icon {
				width: 0.43em;
}

.game .container {
				height: 100vh;
				height: calc(var(--vh, 1vh) * 100);
				box-sizing: border-box;
				padding: 2.35em 1.2em 1.5em 1.2em;
				position: relative;
}
.game .container::before {
				content: "";
				width: 100%;
				height: 3.5em;
				background-color: #cf0a2c;
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
}
.game .container .nav {
				background-color: #c6c6c6;
				border-radius: 1.6em;
				display: flex;
				justify-content: space-between;
				padding: 0.6em 1.2em;
				position: relative;
				z-index: 1;
				margin-bottom: 2.65em;
}
.game .container .nav > div {
				display: flex;
				align-items: center;
}
.game .container .nav .count-box {
				justify-content: center;
				width: 3.6em;
				height: 3.6em;
				border-radius: 9999px;
				background-color: #fff;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				font-family: ProximaNova;
				line-height: normal;
}
.game .container .nav .count-box::before {
				content: "";
				width: 3.4em;
				height: 3.4em;
				border: 3px solid #c6c6c6;
				box-sizing: border-box;
				border-radius: 9999px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 1;
}
.game .container .nav .count-box .current {
				color: #cf0a2c;
				font-size: 1.2em;
				font-weight: bold;
}
.game .container .nav .count-box .total {
				color: #898989;
				font-size: 0.65em;
				font-weight: 500;
				margin-left: 0.25em;
				transform: translateY(0.1em);
}
.game .container .nav .timer-box, .game .container .nav .score-box {
				width: 4.6em;
				height: 1.25em;
				border-radius: 5em;
				border: solid 1px #fff;
				padding: 0 0.7em 0 0.5em;
				box-sizing: border-box;
}
.game .container .nav .timer-box .icon, .game .container .nav .score-box .icon {
				width: 0.75em;
				flex-shrink: 0;
				margin-right: 0.65em;
}
.game .container .nav .timer-box p, .game .container .nav .score-box p {
				color: #fff;
				font-size: 0.8em;
				font-weight: bold;
				font-family: ProximaNova;
				transform: translateY(0.05em);
				margin-left: auto;
}
.game .container .nav .timer-box.shake {
				border-color: #cf0a2c;
				animation: aniShake 0.1s infinite alternate;
				transition: 0.15s;
}
.game .container .nav .timer-box.shake .icon img {
				content: url("../images/ic-timer-r.svg");
}
.game .container .nav .timer-box.shake p {
				color: #cf0a2c;
				transition: 0.15s;
}
.game .container .game-box {
				transform: translateY(0em);
				opacity: 1;
				transition: 0.3s 0.15s;
}
.game .container .game-box.hide {
				transform: translateY(1em);
				opacity: 0;
				transition: 0.3s;
				pointer-events: none;
}
.game .container .question-box {
				width: 14.5em;
				margin-left: auto;
				margin-right: 0.65em;
				box-sizing: border-box;
				margin-bottom: 1.65em;
				position: relative;
}
.game .container .question-box .question {
				color: #151415;
				font-size: 1.1em;
				font-weight: bold;
				line-height: 1.36;
				background-image: linear-gradient(0deg, #F5EBDD 40%, transparent 40%);
				position: relative;
				z-index: 2;
}
.game .container .question-box .title {
				color: #cf0a2c;
				font-size: 1.7em;
				font-weight: bold;
				font-family: ProximaNova;
				margin-right: 0.14em;
				position: absolute;
				top: 0;
				left: -0.14em;
				transform: translateX(-100%);
}
.game .container .question-box .des {
				color: #cf0a2c;
				font-size: 0.75em;
				text-align: center;
				display: block;
				margin-top: 0.93em;
				padding-right: 1em;
}
.game .container .question-box .math1 {
				position: absolute;
				width: 3.75em;
				bottom: -3.25em;
				right: 0;
}
.game .container .question-box .math2 {
				position: absolute;
				width: 2.8em;
				left: -2.8em;
				bottom: -1.65em;
}
.game .container .question-box .dec {
				width: 2.5em;
				position: absolute;
				top: 2.5em;
				right: 0.5em;
				z-index: 1;
}
.game .container .question-box .dec.rotate {
				transform: rotate(20deg);
}
.game .container .hint-box {
				margin: 1.65em 0;
				position: relative;
				z-index: 5;
}
.game .container .hint-box .btn-hint {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 1em;
}
.game .container .hint-box .btn-hint .light {
				width: 0.81em;
}
.game .container .hint-box .btn-hint .txt {
				color: #cf0a2c;
				font-size: 0.9em;
				font-weight: bold;
				text-decoration: underline;
				margin: 0 0.5em;
}
.game .container .hint-box .btn-hint .arrow {
				width: 0.75em;
				transform: translateY(0.05em);
}
.game .container .hint-box p.hint {
				color: #ffffff;
				font-size: 0.8em;
				background-color: #737b82;
				padding: 0 0.65em;
				width: 20.5em;
				box-sizing: border-box;
				margin: auto;
				line-height: 1.25;
				height: 0;
				overflow: hidden;
				transition: 0.15s;
}
.game .container .hint-box p.hint.active {
				padding: 0.5em 0.65em;
				height: auto;
				transition: 0.15s;
}
.game .container .answer-box.trueorfalse {
				display: flex;
				justify-content: center;
				align-items: center;
}
.game .container .answer-box.trueorfalse a {
				width: 8em;
				border-radius: 0.5em;
				border: solid 1px #d6d6d6;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 1.65em 0.25em 1.5em 0.25em;
				box-sizing: border-box;
				margin: 0 0.37em;
				position: relative;
}
.game .container .answer-box.trueorfalse a .pic {
				width: 2em;
				margin-bottom: 1.35em;
}
.game .container .answer-box.trueorfalse a .txt {
				display: none;
				width: 95%;
				text-align: center;
				color: #737b82;
				font-size: 0.9em;
				line-height: 1.2;
				position: absolute;
				top: 4.888em;
				left: 50%;
				transform: translateX(-50%);
}
.game .container .answer-box.draw .canvas-box {
				width: 16.5em;
				height: 13em;
				border-radius: 0.5em;
				margin: auto;
				margin-bottom: 2.5em;
				border: solid 1px #d6d6d6;
				position: relative;
				overflow: hidden;
}
.game .container .answer-box.draw .canvas-box #canvas2 {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 1;
				display: none;
}
.game .container .answer-box.draw .canvas-box #canvas {
				position: relative;
				z-index: 2;
}
.game .container .answer-box.draw .canvas-box .title {
				width: 6.25em;
				height: 2.5em;
				display: inline-block;
				color: #ffffff;
				font-size: 1em;
				font-weight: 500;
				text-align: center;
				line-height: 2.5em;
				border-radius: 0.5em;
				position: absolute;
				left: 0.75em;
}
.game .container .answer-box.draw .canvas-box .title::before {
				content: "";
				width: 0.3em;
				height: 0.3em;
				background-color: #898989;
				border-radius: 9999px;
				position: absolute;
				top: 50%;
				right: -0.7em;
				transform: translateY(-50%);
}
.game .container .answer-box.draw .canvas-box .title.friend {
				top: calc(var(--titleY1) - 1.25em);
				background-color: #737b82;
}
.game .container .answer-box.draw .canvas-box .title.vip {
				top: calc(var(--titleY2) - 1.25em);
				background-color: #CD9C55;
}
.game .container .answer-box.draw .canvas-box .option {
				color: #151415;
				font-size: 1em;
				line-height: normal;
				font-family: ProximaNova;
				position: absolute;
				right: 0.75em;
				width: 4.1em;
				height: 1em;
				text-align: center;
}
.game .container .answer-box.draw .canvas-box .option:nth-of-type(1) {
				top: calc(var(--optionY1) - 0.5em);
}
.game .container .answer-box.draw .canvas-box .option:nth-of-type(2) {
				top: calc(var(--optionY2) - 0.5em);
}
.game .container .answer-box.draw .canvas-box .option:nth-of-type(3) {
				top: calc(var(--optionY3) - 0.5em);
}
.game .container .answer-box.draw .canvas-box .option:nth-of-type(4) {
				top: calc(var(--optionY4) - 0.5em);
}
.game .container .answer-box.draw .canvas-box .option::before {
				content: "";
				width: 0.3em;
				height: 0.3em;
				background-color: #898989;
				border-radius: 9999px;
				position: absolute;
				top: 50%;
				left: -0.4em;
				transform: translateY(-50%);
}
.game .container .answer-box.draw .btn-box a {
				width: 11em;
				height: 2.5em;
}
.game .container .answer-box.draw .btn-box a .txt {
				font-size: 0.9em;
}
.game .container .answer-box.draw .btn-box a .icon {
				width: 0.43em;
}
.game .container .answer-box.choice {
				display: flex;
				flex-direction: column;
				justify-content: center;
}
.game .container .answer-box.choice a {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0.8em 1em 0.8em 1.445em;
				border: solid 1px #d6d6d6;
				border-radius: 0.5em;
				width: 16.5em;
				box-sizing: border-box;
				margin: auto;
				margin-bottom: 1em;
				transition: 0.15s;
}
.game .container .answer-box.choice a .txt {
				color: #898989;
				font-size: 1em;
				font-weight: 500;
				line-height: 1.25;
}
.game .container .answer-box.lock {
				pointer-events: none;
}
.game .container .answer-box > a.checked {
				border: solid 3px #737b82;
				transition: 0.15s;
}
.game .container .answer-box > a.checked .txt {
				color: #737b82;
}
.game .container .answer-box > a.checked .icon {
				border: none;
}
.game .container .answer-box > a.checked .icon::before {
				background: url("../images/ic-checkmark-g.svg") no-repeat center/contain;
}
.game .container .answer-box > a.wrong {
				border: solid 3px #737b82;
}
.game .container .answer-box > a.wrong .txt {
				color: #737b82;
}
.game .container .answer-box > a.wrong .icon {
				border: none;
}
.game .container .answer-box > a.wrong .icon::before {
				background: url("../images/ic-wrong.svg") no-repeat center/contain;
}
.game .container .answer-box > a.correct {
				border: solid 3px #cf0a2c;
}
.game .container .answer-box > a.correct .txt {
				color: #cf0a2c;
}
.game .container .answer-box > a.correct .icon {
				border: none;
}
.game .container .answer-box > a.correct .icon::before {
				background: url("../images/ic-checkmark-r.svg") no-repeat center/contain;
}
.game .container .answer-box > a .icon {
				width: 1.5em;
				height: 1.5em;
				border-radius: 9999px;
				border: solid 1px #d6d6d6;
				flex-shrink: 0;
				box-sizing: border-box;
				position: relative;
}
.game .container .answer-box > a .icon::before {
				content: "";
				width: 100%;
				height: 100%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
}

.info .container {
				padding: 4.5em 1.2em 2em 2.2em;
				height: 100vh;
				height: calc(var(--vh, 1vh) * 100);
				box-sizing: border-box;
}
.info .container a.btn-top {
				position: fixed;
				right: 0.5em;
				bottom: 3.25em;
				width: 2.5em;
				height: 2.5em;
				z-index: 100;
				border-radius: 9999px;
				box-shadow: 5px 5px 10px 0 #898989;
}
.info .container p.notice {
				color: #151415;
				font-size: 0.9em;
				font-weight: bold;
				line-height: 1.33;
				margin-bottom: 1.77em;
				margin-top: 3.3em;
				padding: 0 1.11em;
}
.info .container ul.info-box {
				list-style: decimal;
				padding-left: 2.25em;
				padding-right: 0.5em;
				padding-bottom: 3em;
}
.info .container ul.info-box > li {
				color: #151415;
				font-size: 0.8em;
				line-height: 1.5;
				margin-bottom: 0.9375em;
}
.info .container ul.info-box > li a {
				display: inline-block;
				text-decoration: underline;
}
.info .container ul.info-box > li span.highlight {
				color: #cd9c55;
				font-weight: bold;
}
.info .container ul.info-box > li span.red {
				color: #cf0a2c;
				font-weight: bold;
}
.info .container ul.info-box > li p.sub {
				display: flex;
				transform: translateX(-1.3em);
				margin: 1.25em 0 0.15em 0;
}
.info .container ul.info-box > li p.sub .star {
				font-size: 1em;
				margin-right: 0.3em;
}
.info .container ul.info-box > li p.sub .txt {
				color: #cf0a2c;
				font-size: 1.375em;
				font-weight: 500;
}
.info .container ul.info-box > li ul.txt {
				margin-top: 0.5em;
				margin-bottom: 0.5em;
				list-style: disc;
				padding-left: 1.35em;
				text-align: justify;
}
.info .container ul.info-box > li p.notice {
				font-size: 1em;
				margin-top: 0;
				margin: 0.5em 0 0.25em 0;
				padding-left: 0;
}
.info .container ul.info-box > li .pic {
				width: 22.56em;
				transform: translateX(-2.2em);
}

.list .container {
				padding: 4.5em 1.4em 2em 2.5em;
}
.list .container .nav {
				justify-content: space-between;
				margin-bottom: 1.2em;
}
.list .container .nav a.btn-link {
				position: relative;
				left: -0.75em;
}
.list .container .nav a.btn-link .txt {
				color: #cd9c55;
}
.list .container .txt-box {
				text-align: center;
				margin-bottom: 0.9em;
}
.list .container .txt-box h4 {
				color: #151415;
				font-size: 1em;
				font-weight: bold;
				line-height: 1.5;
				margin-bottom: 0.35em;
				position: relative;
				z-index: 1;
}
.list .container .txt-box h4::before {
				content: "";
				width: 15em;
				height: 0.75em;
				position: absolute;
				bottom: -0.1em;
				left: 50%;
				background-color: #F5EBDD;
				z-index: -1;
				transform: translateX(-50%);
				border-radius: 1.4em;
}
.list .container .txt-box p {
				color: #cf0a2c;
				font-size: 0.8em;
				line-height: 1.25;
}
.list .container .list-box {
				box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
				background-color: #ffffff;
				border-radius: 0.25em;
				margin-bottom: 0.9em;
				padding-bottom: 0.65em;
}
.list .container .list-box .personal-box {
				display: flex;
				justify-content: center;
				align-items: flex-end;
				position: relative;
				top: -1.9em;
				z-index: 1;
}
.list .container .list-box .personal-box::before {
				content: "";
				width: 19em;
				height: 4em;
				background: url("../images/board-list.png") no-repeat center/contain;
				position: absolute;
				bottom: -0.795em;
				left: 50%;
				transform: translateX(-50%);
				z-index: -1;
}
.list .container .list-box .personal-box .score-box, .list .container .list-box .personal-box .rank-box {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: calc((100% - 7.8em) / 2);
}
.list .container .list-box .personal-box .score-box p.title, .list .container .list-box .personal-box .rank-box p.title {
				color: #ffffff;
				font-size: 0.6em;
				line-height: 1.8;
				border: 1px solid #ffffff;
				border-radius: 9999px;
				padding: 0em 0.83em;
				box-sizing: border-box;
				margin-bottom: 0.5em;
}
.list .container .list-box .personal-box .score-box p.score, .list .container .list-box .personal-box .score-box p.rank, .list .container .list-box .personal-box .rank-box p.score, .list .container .list-box .personal-box .rank-box p.rank {
				color: #ffffff;
				font-size: 1.3em;
				font-family: Roboto;
				line-height: 0.92;
}
.list .container .list-box .personal-box .profile {
				width: 4.75em;
				border: solid 5px #cd9c55;
				border-radius: 9999px;
				box-sizing: border-box;
				margin: 0 1em;
				margin-bottom: 0.35em;
				position: relative;
}
.list .container .list-box .personal-box .profile::before, .list .container .list-box .personal-box .profile::after {
				content: "";
				width: 1px;
				height: 1.5em;
				background-color: #ffffff;
				position: absolute;
				bottom: 0;
}
.list .container .list-box .personal-box .profile::before {
				left: -0.95em;
}
.list .container .list-box .personal-box .profile::after {
				right: -0.95em;
}
.list .container .list-box .personal-box .profile img {
				border: solid 2px #ffffff;
				border-radius: 9999px;
				box-sizing: border-box;
}
.list .container .list-box p.note {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: -0.75em;
				margin-bottom: 0.75em;
}
.list .container .list-box p.note .icon {
				width: 0.775em;
				margin-right: 0.25em;
}
.list .container .list-box p.note .txt {
				color: #737b82;
				font-size: 0.6em;
				line-height: 1.67;
}
.list .container .list-box .tab-box {
				display: flex;
				justify-content: center;
				padding-bottom: 0.65em;
				border-bottom: 1px solid #737b82;
				margin: 0 0.25em;
				margin-bottom: 0.65em;
}
.list .container .list-box .tab-box a {
				font-size: 0.8em;
				line-height: 1.25;
				color: #737b82;
				text-align: center;
				position: relative;
				transition: 0.15s;
}
.list .container .list-box .tab-box a::before {
				content: "";
				width: 2.8125em;
				border-radius: 5em;
				height: 0;
				background-image: linear-gradient(to right, #d6d6d6, #a7a7a7);
				position: absolute;
				bottom: -0.8125em;
				left: 50%;
				transform: translateX(-50%);
				transition: 0.15s;
}
.list .container .list-box .tab-box a::after {
				content: "";
				width: 0.6875em;
				height: 0.625em;
				position: absolute;
				top: 50%;
				right: 5%;
				transform: translateY(-40%);
				background: url("../images/ic-arrow-down-g.svg") no-repeat center/contain;
}
.list .container .list-box .tab-box a:nth-of-type(1) {
				width: 40%;
}
.list .container .list-box .tab-box a:nth-of-type(2) {
				width: 45%;
}
.list .container .list-box .tab-box a.active {
				color: #cf0a2c;
				transition: 0.15s;
}
.list .container .list-box .tab-box a.active::after {
				background: url("../images/ic-arrow-down-r.svg") no-repeat center/contain;
}
.list .container .list-box .tab-box a.active::before {
				height: 0.3125em;
				transition: 0.15s;
}
.list .container .list-box ul.rank-box {
				padding: 0 1em;
				min-height: 10.5em;
				height: 10.5em;
				overflow-y: scroll;
}
.list .container .list-box ul.rank-box li {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				background-color: rgba(231, 231, 231, 0.4);
				border-radius: 0.25em;
				margin-bottom: 0.75em;
				padding: 0.25em 0.6em;
}
.list .container .list-box ul.rank-box li .rank {
				width: 1.61em;
				color: #737b82;
				font-size: 0.9em;
				font-weight: bold;
				font-family: Roboto;
				text-align: center;
				margin-right: 0.3em;
}
.list .container .list-box ul.rank-box li .profile {
				width: 2.4em;
				border-radius: 9999px;
				overflow: hidden;
				border: 0.5px solid #ffffff;
				margin-right: 0.6em;
}
.list .container .list-box ul.rank-box li p.null {
				color: #737b82;
				font-size: 0.8em;
				width: 100%;
				text-align: center;
				padding: 1.15em 0;
}
.list .container .list-box ul.rank-box li p.name {
				color: #737b82;
				font-size: 0.8em;
				width: 7.5em;
				overflow: hidden;
				white-space: nowrap;
				position: relative;
}
.list .container .list-box ul.rank-box li p.score {
				color: #151415;
				font-size: 1em;
				font-weight: 500;
				font-family: Roboto;
				margin-left: auto;
}
.list .container .btn-box {
				margin-bottom: 1.2em;
}
.list .container .btn-box a {
				width: 12.7em;
				height: 3em;
}
.list .container .btn-box a .txt {
				font-size: 1.2em;
}
.list .container .btn-box a .icon {
				width: 0.43em;
}

.start {
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 99999;
}
.start a.btn-close {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
}
.start .container {
				width: 19em;
				padding-bottom: 1.63em;
				padding-top: 4em;
				border-radius: 0.25em;
				transform: translateY(1.65em);
				position: relative;
}
.start .container .title {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 17em;
				padding: 1.15em 0.15em 0.6em 0;
				box-sizing: border-box;
				position: absolute;
				left: 50%;
				top: 0%;
				transform: translate(-50%, -50%);
				z-index: 1;
}
.start .container .title::before {
				content: "";
				width: 4.32em;
				height: 4.59em;
				position: absolute;
				top: 0;
				right: -2.65em;
				transform: scaleX(-1);
				background: url("../images/ic-clip.png") no-repeat center/contain;
}
.start .container .title.first {
				background-color: #cf0a2c;
				padding-right: 1.5em;
}
.start .container .title.first > .icon {
				width: 2.32em;
				margin-right: 0.5em;
}
.start .container .title.first h3 {
				margin-bottom: 0.18em;
}
.start .container .title.second {
				background-color: #cd9c55;
}
.start .container .title.second > .icon {
				width: 3.85em;
				margin-right: 0.5em;
}
.start .container .title.second .num {
				margin-left: 0.15em;
}
.start .container .title.second h3 {
				margin-bottom: 0.22em;
}
.start .container .title h3 {
				color: #ffffff;
				font-size: 1.2em;
				font-weight: bold;
				text-align: center;
				line-height: 1.08;
}
.start .container .title h4 {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #ffffff;
				font-size: 0.9em;
				font-weight: bold;
				line-height: 1.33;
}
.start .container .title h4 .icon {
				width: 1.11em;
				margin: 0 0.15em;
}
.start .container .title h4 .num {
				font-size: 1.44em;
				font-family: ProximaNova;
				transform: translateY(0.05em);
}
.start .container .txt-box h5 {
				color: #cf0a2c;
				font-size: 1.1em;
				font-weight: bold;
				font-family: ProximaNova;
				line-height: 1.36;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
}
.start .container .txt-box h5.first {
				margin-bottom: 0.55em;
}
.start .container .txt-box h5.second {
				margin-bottom: 0.15em;
}
.start .container .txt-box h5 .icon {
				width: 0.9em;
				margin: 0 0.2em;
				transform: translateY(-0.1em);
}
.start .container .txt-box p {
				color: #151415;
				font-size: 0.9em;
				font-weight: 500;
				font-family: ProximaNova;
				text-align: center;
				line-height: 1.67;
				margin-bottom: 1.65em;
}
.start .container .btn-box {
				padding-left: 3em;
}
.start .container .btn-box a.btn-book {
				width: 9.93em;
				height: 2.5em;
				position: relative;
}
.start .container .btn-box a.btn-book::before {
				content: "";
				width: 2.3125em;
				height: 2.96em;
				position: absolute;
				left: -0.65em;
				top: 50%;
				transform: translate(-100%, -50%) rotate(-5deg);
				background: url("../images/ic-book.svg") no-repeat center/contain;
}
.start .container .btn-box a.btn-book .txt {
				font-size: 0.9em;
}
.start .container .link-box {
				margin-top: 2em;
				display: flex;
				justify-content: center;
}
.start .container .link-box a.btn-game {
				color: #737b82;
				font-size: 0.8em;
				font-weight: bold;
				line-height: 1.88;
				text-decoration: underline;
				text-align: center;
}

.result .container {
				width: 19em;
				min-height: 490px;
				padding-bottom: 1.2em;
				padding-top: 1.2em;
				box-sizing: border-box;
				border-radius: 0.25em;
				position: relative;
				transform: translateY(1.5em);
}
.result .container .info-box {
				transform: translate(-0.225em, -2.5em);
				position: relative;
}
.result .container .info-box::before {
				content: "";
				width: 20em;
				height: 6em;
				position: absolute;
				top: 55%;
				left: 50%;
				transform: translate(-50%, -50%);
				background: url("../images/board-result.png") no-repeat center/contain;
}
.result .container .info-box .score-box {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 0.25em;
				transform: translateX(-1.25em);
				position: relative;
				z-index: 1;
}
.result .container .info-box .score-box p.title {
				color: #ffffff;
				font-size: 0.9em;
				font-weight: 500;
				line-height: 1.67;
}
.result .container .info-box .score-box .icon {
				width: 1.25em;
				margin: 0 0.75em;
}
.result .container .info-box .score-box p.score {
				color: #ffffff;
				font-size: 2em;
				font-family: ProximaNova;
}
.result .container .info-box .list-box {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #ffffff;
				position: relative;
				z-index: 1;
}
.result .container .info-box .list-box .rank-box {
				display: flex;
				justify-content: center;
				align-items: center;
				padding-right: 1.5em;
				position: relative;
}
.result .container .info-box .list-box .rank-box::before {
				content: "";
				width: 1px;
				height: 1.65em;
				background-color: #ffffff;
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
}
.result .container .info-box .list-box .rank-box p.title {
				font-size: 0.6em;
				border-radius: 9999px;
				border: 1px solid #ffffff;
				padding: 0.3em 0.7em;
				margin-right: 0.83em;
}
.result .container .info-box .list-box .rank-box p.rank {
				font-size: 1.3em;
				font-weight: 500;
				font-family: Roboto;
}
.result .container .info-box .list-box a.btn-list {
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 1.4em;
				width: 4.66em;
				height: 1.65em;
				margin-left: 1.5em;
				background-image: linear-gradient(to bottom, #f7c883, #cd9c55);
}
.result .container .info-box .list-box a.btn-list .txt {
				color: #ffffff;
				font-size: 0.75em;
				font-weight: bold;
}
.result .container .info-box .list-box a.btn-list .icon {
				width: 0.41em;
				transform: translateY(0.1em);
				margin-left: 0.5em;
}
.result .container .prize-box {
				position: relative;
}
.result .container .prize-box::before {
				content: "";
				width: 6.36em;
				height: 6.36em;
				position: absolute;
				right: 0;
}
.result .container .prize-box.failed {
				padding-top: 1em;
}
.result .container .prize-box.failed::before {
				top: -1em;
				background: url("../images/ic-failed.png") no-repeat center/contain;
}
.result .container .prize-box.qualified.dec::before {
				top: 2em;
				background: url("../images/ic-qualified.png") no-repeat center/contain;
}
.result .container .prize-box.qualified h2 {
				margin-bottom: 1em;
}
.result .container .prize-box.qualified > .txt-box {
				margin-bottom: 0.75em;
}
.result .container .prize-box.qualified + .btn-box + .txt-box {
				margin-bottom: 0.5em;
}
.result .container .prize-box.qualified .ani {
				position: absolute;
				left: 50%;
				top: 0.5em;
				transform: translateX(-50%);
				width: 11em;
				height: 11em;
				z-index: 1;
				transition: 0.3s;
}
.result .container .prize-box.qualified .ani.hidden {
				opacity: 0;
				transition: 0.3s;
				pointer-events: none;
}
.result .container .prize-box.second h2 {
				padding-top: 1.5em;
				margin-bottom: 0.7em;
}
.result .container .prize-box h2 {
				color: #cf0a2c;
				font-size: 1.4em;
				font-weight: bold;
				line-height: 1.07;
				text-align: center;
				margin-bottom: 0.5em;
}
.result .container .prize-box p.prize {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #737b82;
				font-size: 1.2em;
				font-weight: bold;
				margin-bottom: 0.41em;
				opacity: 1;
				transition: 0.3s;
}
.result .container .prize-box p.prize.hidden {
				opacity: 0;
				transition: 0.3s;
}
.result .container .prize-box p.prize .icon {
				width: 1.54em;
				margin: 0 0.2em;
}
.result .container .prize-box p.prize .num {
				color: #cf0a2c;
				font-size: 2em;
				font-weight: bold;
				transform: translateY(-0.2em);
				margin: 0 0.1em;
}
.result .container .prize-box p.prize .red {
				color: #cf0a2c;
				margin-left: 0.15em;
}
.result .container .href-box {
				display: flex;
				justify-content: center;
				align-items: center;
}
.result .container .href-box .icon {
				width: 2.08em;
				margin-right: 0.5em;
}
.result .container .href-box a {
				color: #737b82;
				font-size: 0.8em;
				font-weight: bold;
				line-height: 1.88;
				text-decoration: underline;
}
.result .container .txt-box {
				text-align: center;
				margin-bottom: 1.9em;
				opacity: 1;
				transition: 0.3s;
}
.result .container .txt-box.hidden {
				opacity: 0;
				transition: 0.3s;
}
.result .container .txt-box h5 {
				color: #151415;
				font-size: 1em;
				font-weight: bold;
				line-height: 1.5;
				margin-bottom: 0.3em;
				position: relative;
				z-index: 1;
}
.result .container .txt-box h5::before {
				content: "";
				width: 15.087em;
				height: 0.75em;
				position: absolute;
				bottom: 0em;
				left: 50%;
				background-color: #F5EBDD;
				z-index: -1;
				transform: translateX(-50%);
				border-radius: 1.4em;
}
.result .container .txt-box p {
				color: #cf0a2c;
				font-size: 0.8em;
				line-height: 1.25;
}
.result .container .btn-box {
				margin-bottom: 1em;
				opacity: 1;
				transition: 0.3s;
}
.result .container .btn-box.hidden {
				opacity: 0;
				transition: 0.3s;
}
.result .container .btn-box a.btn-book {
				width: 11em;
				height: 2.5em;
				position: relative;
}
.result .container .btn-box a.btn-book .txt {
				font-size: 0.9em;
}
.result .container .btn-box a.btn-exchange {
				width: 8.35em;
				height: 2.5em;
				position: relative;
}
.result .container .btn-box a.btn-exchange .txt {
				font-size: 0.9em;
}
.result .container .link-box {
				display: flex;
				justify-content: space-around;
				padding: 0 1.5em;
}
.result .container .link-box a {
				color: #737b82;
				font-size: 0.8em;
				font-weight: bold;
				text-decoration: underline;
}
/*# sourceMappingURL=main.css.map */