@import url(https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap);
/**
* Based on
*
* - reset.css 2.0 by Eric Meyer
(public domain)
* http://meyerweb.com/eric/tools/css/reset/
*
* - normalize.css 8.0.1 by Nicolas Gallagher and Jonathan Neal
* (licensed under MIT)
* https://github.com/necolas/normalize.css
*
* - Reboot from Bootstrap 4.5.3
* (licensed under MIT)
* https://github.com/twbs/bootstrap
*/
/**
* IE10+ doesn't honor `` elements.
*/
body {
/* 1 */
line-height: 1;
/* 2 */
font-family: sans-serif;
/* 3 */
text-align: left; }
/**
* Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
* on elements that programmatically receive focus but wouldn't normally show a visible
* focus outline. In general, this would mean that the outline is only applied if the
* interaction that led to the element receiving programmatic focus was a keyboard interaction,
* or the browser has somehow determined that the user is primarily a keyboard user and/or
* wants focus outlines to always be presented.
*
* See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
* and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
*/
[tabindex="-1"]:focus:not(:focus-visible) {
outline: 0 !important; }
/**
* Lists
*/
ol, ul {
list-style: none; }
/**
* Quotes
*/
blockquote, q {
quotes: none; }
blockquote::before,
blockquote::after,
q::before,
q::after {
content: '';
content: none; }
/**
* Tables
*/
table {
border-collapse: collapse;
border-spacing: 0; }
caption {
caption-side: bottom; }
/**
* Table Headers
* 1. Matches default ` ` alignment by inheriting from the ``, or the
* closest parent with a set `text-align`.
* 2. Fix alignment for Safari
*/
th {
/* 1 */
text-align: inherit;
/* 2 */
text-align: -webkit-match-parent; }
/**
* Horizontal Lines
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
/* 1 */
box-sizing: content-box;
height: 0;
/* 2 */
overflow: visible; }
/**
* Preformatted Text
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Don't allow content to break outside
* 3. We have @viewport set which causes scrollbars to overlap content in IE11
* and Edge, so we force a non-overlapping, non-auto-hiding scrollbar to
* counteract.
*/
pre,
code,
kbd,
samp {
/* 1 */
font-family: monospace, monospace; }
pre {
/* 2 */
overflow: auto;
/* 3 */
-ms-overflow-style: scrollbar; }
/**
* Links
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
/* 1 */
background-color: transparent;
/* 2 */
-webkit-text-decoration-skip: objects; }
/**
* 1. Remove the bottom border in Chrome 57- and Firefox 39-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
* 3. Add explicit cursor to indicate changed behavior.
* 4. Prevent the text-decoration to be skipped.
*/
abbr[title] {
/* 1 */
border-bottom: 0;
/* 2 */
text-decoration: underline;
text-decoration: underline dotted;
/* 3 */
cursor: help;
/* 4 */
text-decoration-skip-ink: none; }
address {
font-style: normal;
line-height: inherit; }
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder; }
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%; }
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0; }
sub {
bottom: -0.25em; }
sup {
top: -0.5em; }
/**
* Prevent `em` being affected from global reset
*/
em {
font-style: italic; }
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none; }
/**
* Hide SVG overflow in IE
*/
svg:not(:root) {
overflow: hidden; }
/**
* Remove the default `border-radius` that macOS Chrome adds.
* Details at https://github.com/twbs/bootstrap/issues/24093
*/
button {
border-radius: 0; }
/**
* Work around a Firefox/IE bug where the transparent `button` background
* results in a loss of the default `button` focus styles.
* Credit: https://github.com/suitcss/base/
*/
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color; }
/**
* form element resets
* 1. Remove the margin in Firefox and Safari
* 2. inherit font rules
*/
input,
button,
select,
optgroup,
textarea {
/* 1 */
margin: 0;
/* 2 */
font-family: inherit;
font-size: inherit;
line-height: inherit; }
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="reset"],
[type="submit"],
[type="button"] {
/* 2 */
-webkit-appearance: button; }
/**
* Remove the default appearance of temporal inputs to avoid a Mobile Safari
* bug where setting a custom line-height prevents text from being vertically
* centered within the input.
* See https://bugs.webkit.org/show_bug.cgi?id=139848
* and https://github.com/twbs/bootstrap/issues/11266
*/
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
-webkit-appearance: listbox; }
/**
* 1. Remove the default vertical scrollbar in IE.
* 2. Textareas should really only resize vertically so they don't break their
* (horizontal) containers.
*/
textarea {
overflow: auto;
resize: vertical; }
/**
* Show the overflow in IE.
*/
button,
input {
overflow: visible; }
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
*/
button,
select {
text-transform: none; }
/**
* Set the cursor for non-`` buttons
* Details at https://github.com/twbs/bootstrap/pull/30562
*/
[role="button"] {
cursor: pointer; }
/**
* Remove the inheritance of word-wrap in Safari.
* See https://github.com/twbs/bootstrap/issues/24990
*/
select {
word-wrap: normal; }
/**
* Remove inner border and padding from Firefox, but don't restore the outline
* like Normalize.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0; }
/**
* 1. Add the correct box sizing in IE 10-
* 2. Remove the padding in IE 10-
*/
input[type="radio"],
input[type="checkbox"] {
/* 1 */
box-sizing: border-box;
/* 2 */
padding: 0; }
/**
* Suppress the focus outline on elements that cannot be accessed via keyboard.
* This prevents an unwanted focus outline from appearing around elements that
* might still respond to pointer events.
* Credit: https://github.com/suitcss/base
*/
[tabindex="-1"]:focus {
outline: 0 !important; }
/**
* Browsers set a default `min-width: min-content` on fieldsets,
* unlike e.g. ``s, which have `min-width: 0` by default.
* So we reset that to ensure fieldsets behave more like a standard block element.
* See https://github.com/twbs/bootstrap/issues/12359
* and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
*/
fieldset {
min-width: 0; }
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Set display to block for all browsers
*/
legend {
/* 1 */
max-width: 100%;
white-space: normal;
/* 2 */
color: inherit;
/* 3 */
display: block; }
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline; }
/**
* 1. Remove the default vertical scrollbar in IE 10+.
* 2. Textareas should really only resize vertically so they don't break their
* (horizontal) containers.
*/
textarea {
/* 1 */
overflow: auto;
/* 2 */
resize: vertical; }
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
/* 1 */
box-sizing: border-box;
/* 2 */
padding: 0; }
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto; }
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
/* 1 */
-webkit-appearance: textfield;
/* 2 */
outline-offset: -2px; }
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
/* 1 */
-webkit-appearance: button;
/* 2 */
font: inherit; }
/**
* Correct element display for output
*/
output {
display: inline-block; }
/**
* Add the correct display in IE 10+.
*/
template {
display: none; }
/**
* Always hide an element with the `hidden` HTML attribute (from PureCSS).
* Needed for proper display in IE 10-.
*/
[hidden] {
display: none; }
body, * {
font-family: 'Nunito', sans-serif; }
.inner {
width: 100%; }
@media (max-width: 768px) {
.inner {
width: 100%; } }
.popup, .popup__background {
width: 100vw;
height: 100vh; }
@media (max-width: 768px) {
.popup, .popup__background {
width: 100%; } }
.container {
width: 1160px;
max-width: calc(100% - 16px * 2); }
hr.split--level-1 {
height: 16px; }
hr.split--level-2 {
height: 32px; }
hr.split--level-3 {
height: 48px; }
hr.split--level-4 {
height: 64px; }
hr.split--level-5 {
height: 80px; }
* {
box-sizing: border-box;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
text-decoration: none; }
*:focus {
outline: none; }
.off {
filter: grayscale(100%);
pointer-events: none; }
@media (max-width: 768px) {
html {
overflow: auto; } }
body {
width: 100%;
overflow: auto;
height: auto;
margin: 0;
padding: 0;
background: none; }
body.page {
width: initial;
height: initial;
overflow: auto; }
.outer {
width: 100%;
top: 0;
z-index: 10; }
.outer--floating {
position: fixed;
height: 0px !important;
overflow: visible !important; }
.outer--floating .inner {
height: 0px !important;
overflow: visible !important; }
.outer--floating-bottom {
bottom: 60px !important;
top: unset; }
.outer--popup {
position: fixed;
height: 0px !important;
overflow: visible !important;
z-index: 99999; }
.outer--popup .inner {
height: 0px !important;
overflow: visible !important; }
.inner {
transform-origin: top left;
overflow: hidden; }
.section {
position: relative; }
.section__background {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden; }
.section__background img {
width: 2100px;
height: 100%;
margin-left: calc(50% - 1050px); }
@media (max-width: 768px) {
.section__background img {
width: 768px;
margin-left: calc(50% - 384px); } }
.section__content {
display: block;
position: relative;
top: 0;
left: 0px;
width: 100%;
height: 0; }
.section__iframe {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.section__iframe iframe {
width: 100%;
height: 100%;
background: none;
overflow: hidden;
pointer-events: none; }
@media (max-width: 768px) {
.section__iframe iframe {
pointer-events: all; } }
.container {
display: block;
margin: 0 auto; }
hr.split {
margin: 0;
border: 0;
background: transparent; }
.clearfix:after {
content: "";
clear: both;
display: table; }
.desktop {
display: flex; }
.mobile {
display: none; }
@media (max-width: 768px) {
.desktop {
display: none; }
.mobile {
display: flex; } }
@media (max-width: 700px) {
.desktop {
display: none; }
.mobile {
display: flex; } }
.btnimg .label {
display: none; }
.btnbg .label {
pointer-events: none; }
.watch {
position: absolute;
background: transparent; }
@media (max-width: 768px) {
.watch {
display: none; } }
.scrollContent {
display: block;
width: 100%;
height: auto;
outline: none; }
.article *, .article-detail *, .module * {
color: #a09e9e; }
.article h1, .article h3, .article .post-title, .article-detail h1, .article-detail h3, .article-detail .post-title, .module h1, .module h3, .module .post-title {
font-weight: bold;
font-size: 30px;
text-transform: uppercase;
text-align: center;
position: relative; }
@media (max-width: 768px) {
.article h1, .article h3, .article .post-title, .article-detail h1, .article-detail h3, .article-detail .post-title, .module h1, .module h3, .module .post-title {
font-size: 35px; } }
.article p, .article-detail p, .module p {
font-size: 20px;
line-height: 28px; }
@media (max-width: 768px) {
.article p, .article-detail p, .module p {
font-size: 25px; } }
.article ul, .article-detail ul, .module ul {
font-size: 20px;
line-height: 28px; }
.article h2, .article h4, .article-detail h2, .article-detail h4, .module h2, .module h4 {
font-size: 27px;
line-height: 30px;
text-transform: capitalize;
margin: 10px 0;
text-align: center;
margin: 0 auto 20px;
font-weight: bold; }
.article .notice-box, .article-detail .notice-box, .module .notice-box {
background: #a09e9e;
border: 1px solid #535252;
padding: 20px; }
.article .notice-box *, .article-detail .notice-box *, .module .notice-box * {
color: #440000; }
.article .notice-box .legend, .article-detail .notice-box .legend, .module .notice-box .legend {
display: inline-block;
font-weight: bold;
color: #535252;
padding: 10px;
background: white;
position: relative;
top: -30px; }
.article table, .article-detail table, .module table {
max-width: 100%;
margin: 0 auto 30px; }
.article table td, .article-detail table td, .module table td {
font-size: 20px;
padding: 10px;
border: 1px solid #ccc;
color: black; }
.article table tr:nth-child(odd), .article-detail table tr:nth-child(odd), .module table tr:nth-child(odd) {
background: rgba(255, 255, 255, 0.6); }
.article table tr:nth-child(even), .article-detail table tr:nth-child(even), .module table tr:nth-child(even) {
background: rgba(255, 255, 255, 0.8); }
.article img, .article-detail img, .module img {
max-width: 80%;
margin: 0 auto 30px; }
.article .TextCenter, .article-detail .TextCenter, .module .TextCenter {
text-align: center; }
.article .TextLeft, .article-detail .TextLeft, .module .TextLeft {
text-align: left; }
.article .TextRight, .article-detail .TextRight, .module .TextRight {
text-align: right; }
.article a, .article-detail a, .module a {
color: #d2d2d2; }
.popup {
pointer-events: none;
position: absolute;
top: 0;
left: 0;
z-index: 20;
display: none;
align-items: center;
justify-content: center;
opacity: 0;
transition: all .2s; }
.popup__background {
opacity: 0;
position: absolute;
background: rgba(0, 0, 0, 0.8);
transition: opacity 1s; }
@media (max-width: 700px) {
.popup__background {
width: 100%; } }
@media (min-width: 701px) and (max-width: 840px) {
.popup__background {
width: 100%; } }
.popup__content {
opacity: 0;
position: relative;
z-index: 2;
transition: all .2s;
transform: scale(0); }
.popup.active {
display: flex;
pointer-events: all;
opacity: 1; }
.popup.active .popup__background {
opacity: 1; }
.popup.active .popup__content {
opacity: 1;
transform: scale(1); }
.popup--open-image .popup__content .image img {
display: block;
max-width: 100%;
max-height: 100%; }
.popup--open-video .popup__content {
width: 70%;
height: 70%; }
@media (max-width: 768px) {
.popup--open-video .popup__content {
width: 90%;
height: 50%; } }
.popup--open-video .popup__content .embed {
width: 100%;
height: 100%; }
.popup--open-video .popup__content .embed iframe {
display: block;
width: 100%;
height: 100%; }
.section--1 {
position: relative;
width: 768px;
background: #FBFBFB;
min-height: calc(100vh - 240px);
margin: auto; }
@media (max-width: 700px) {
.section--1 {
width: 100%; } }
.section--1 .game-info {
width: 100%;
position: relative;
display: flex;
flex-direction: column;
align-items: center; }
.section--1 .game-info--banner {
width: 100%;
height: 400px;
object-fit: cover; }
@media (max-width: 700px) {
.section--1 .game-info--banner {
width: 100%;
height: auto; } }
.section--1 .game-info--appicon {
width: 182px;
height: 182px;
border-radius: 20px;
border: 4px solid white;
margin-top: -91px;
margin-bottom: 12px; }
@media (max-width: 700px) {
.section--1 .game-info--appicon {
width: 120px;
height: 120px;
margin-top: -60px; } }
.section--1 .game-info--name {
font-size: 24px;
font-weight: bold;
color: #343434;
margin-bottom: 20px; }
.section--1 .list-button-cta {
margin-bottom: 10px; }
.section--1 .list-button-cta li {
margin-right: 20px; }
.section--1 .list-button-cta li:last-child {
margin-right: 0; }
@media (max-width: 320px) {
.section--1 .list-button-cta {
transform: scale(0.8); } }
.section--1 .tab-content {
background: #FFFFFF;
box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.1);
border-radius: 16px;
width: calc(100% - 16px*2);
margin: auto;
overflow: hidden;
margin-bottom: 20px;
margin-top: 20px;
position: relative;
padding-bottom: 30px; }
.section--1 .tab-content .tab-content-box {
display: flex;
flex-direction: column;
align-items: center;
transition: 0.4s ease-in;
max-height: 2000px; }
.section--1 .tab-content .tab-content-box.hidden-tab {
max-height: 0;
overflow: hidden; }
.section--1 .tab-content .btn-tab {
background: #FFF4D8;
padding: 11px 20px;
font-size: 20px;
font-weight: bold;
color: #343434;
width: 100%;
align-items: center; }
@media (max-width: 700px) {
.section--1 .tab-content .btn-tab {
font-size: 16px; } }
.section--1 .tab-content .btn-tab .icon-show-down-black {
margin-left: auto; }
.section--1 .tab-content .btn-tab.active .icon-show-down-black {
background-image: url(images/_sprites-layout.png);
background-position: -536px -222px;
width: 12px;
height: 8px; }
.section--1 .tab-content .tab-list {
width: 100%;
padding: 0 21px;
max-height: 5000px; }
@media (max-width: 700px) {
.section--1 .tab-content .tab-list {
padding: 0 16px; } }
.section--1 .tab-content .tab-list--item {
width: 100%;
display: flex;
align-items: center;
padding: 20px 0px;
border-bottom: 2px dashed #9A9A9A; }
@media (max-width: 700px) {
.section--1 .tab-content .tab-list--item {
flex-direction: column; } }
.section--1 .tab-content .tab-list--item:last-child {
border-bottom: 0px; }
.section--1 .tab-content .tab-list--item .event-bannber {
width: 180px;
height: 80px;
object-fit: cover;
margin-right: 20px;
border-radius: 20px; }
@media (max-width: 700px) {
.section--1 .tab-content .tab-list--item .event-bannber {
width: 100%;
height: 140px;
margin-right: 0;
margin-bottom: 10px; } }
.section--1 .tab-content .tab-list--item .event-text {
width: 310px;
margin-right: 37px; }
@media (max-width: 700px) {
.section--1 .tab-content .tab-list--item .event-text {
width: 100%;
margin-right: 0;
margin-bottom: 10px; } }
.section--1 .tab-content .tab-list--item .event-text--name {
font-weight: bold;
font-size: 18px;
line-height: 25px;
color: #343434; }
@media (max-width: 700px) {
.section--1 .tab-content .tab-list--item .event-text--name {
font-size: 16px;
line-height: 22px; } }
.section--1 .tab-content .tab-list--item .event-text--time {
font-size: 16px;
color: #9A9A9A; }
@media (max-width: 700px) {
.section--1 .tab-content .tab-list--item .event-text--time {
font-size: 15px; } }
@media (max-width: 700px) {
.section--1 .tab-content .tab-list--item .btn-orange {
width: 100%; } }
.section--1 .tab-content .tab-list--item .code-name {
width: 295px;
margin-right: 10px; }
@media (max-width: 700px) {
.section--1 .tab-content .tab-list--item .code-name {
width: 100%;
margin-right: 0;
margin-bottom: 10px; } }
.section--1 .tab-content .tab-list--item .code-info {
display: flex; }
@media (max-width: 700px) {
.section--1 .tab-content .tab-list--item .code-info {
width: 100%; } }
.section--1 .tab-content .tab-list--item .code-info .code-text {
margin-right: 40px; }
@media (max-width: 700px) {
.section--1 .tab-content .tab-list--item .code-info .code-text {
margin-right: 20px; } }
.section--1 .tab-content table {
width: 100%;
margin: auto;
margin-bottom: 20px; }
.section--1 .tab-content table th {
background: #FFF4D8;
padding: 10px 21px; }
@media (max-width: 700px) {
.section--1 .tab-content table th {
font-size: 12px;
padding: 14px 12px; } }
.section--1 .tab-content table tr {
border-bottom: 1px dashed #9A9A9A; }
.section--1 .tab-content table tr:last-child {
border-bottom: none; }
.section--1 .tab-content table td {
text-align: left;
vertical-align: middle;
padding: 16px 21px; }
@media (max-width: 700px) {
.section--1 .tab-content table td {
font-size: 12px;
padding: 14px 12px; } }
.section--1 .tab-content table td:last-child {
width: 190px; }
.section--1 .tab-content table td:last-child a {
margin-right: 0;
margin-left: auto; }
.section--1 .tab-content--history table th {
font-weight: bold; }
.section--1 .tab-content--history table td:last-child {
width: 140px; }
@media (max-width: 700px) {
.section--1 .tab-content--history table td:last-child {
width: 100px; } }
.section--1 .tab-content--history table tr:first-child {
border-bottom: 0px; }
.section--1 .note-content {
width: calc(100% - 16px*2);
margin: auto; }
.section--1 .note-content p {
font-size: 16px;
line-height: 20px;
margin-bottom: 15px;
color: #343434; }
.section--1 .login-frame {
width: 400px;
box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.1);
border-radius: 16px;
padding: 40px 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 24px; }
@media (max-width: 700px) {
.section--1 .login-frame {
width: calc(100% - 16px *2);
padding: 40px 25px; } }
.section--1 .login-frame-pc {
padding: 40px 25px;
width: 370px; }
@media (max-width: 700px) {
.section--1 .login-frame-pc {
width: calc(100% - 16px *2); } }
.section--1 .login-frame .text-des {
margin-bottom: 7px;
color: #9A9A9A;
font-size: 16px;
position: relative; }
.section--1 .login-frame .text-des::before {
content: '';
width: 25px;
height: 1px;
background: #B0B0B0;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -40px; }
.section--1 .login-frame .text-des::after {
content: '';
width: 25px;
height: 1px;
background: #B0B0B0;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -40px; }
.section--1 .login-frame .btn-login {
width: 100%;
height: 44px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px; }
.section--1 .login-frame .btn-login:hover {
filter: brightness(1.2); }
.section--1 .login-frame .btn-login span {
text-transform: capitalize;
color: white;
font-weight: bold;
font-size: 16px; }
.section--1 .login-frame .btn-login--guest {
background: #CF4E40; }
.section--1 .login-frame .btn-login--zing {
background: #0095EF; }
.section--1 .login-frame .btn-login--zalo {
background: #0083EA; }
.section--1 .login-frame .btn-login--facebook {
background: #324F85; }
.section--1 .login-frame .btn-login--appleid {
background: #303030;
margin-bottom: 40px; }
.section--1 .login-frame .btn-login--line {
background: #58d037; }
.section--1 .login-frame .btn-login--google {
background: #ea4335; }
.section--1 .login-frame form {
padding: 0; }
.section--1 .login-frame form .fotgot {
text-align: center; }
.section--1 .login-frame .list-btn {
width: 100%;
justify-content: space-between; }
.section--1 .login-frame .list-btn button {
cursor: pointer;
width: calc((100% - 20px) / 2); }
.section--1 .login-frame #sso-login-form {
width: 100%;
position: relative; }
.section--1 .login-frame #sso-login-form form .row {
margin-bottom: 20px; }
.section--1 .login-frame #sso-login-form form .row label {
display: block;
margin-bottom: 10px; }
.section--1 .login-frame #sso-login-form form .form-group {
display: flex;
flex-direction: column; }
.section--1 .login-frame #sso-login-form form .form-group .col-xs-6 {
width: 100%;
display: flex;
justify-content: space-between; }
.section--1 .login-frame #sso-login-form form .form-group .col-xs-6 button {
cursor: pointer;
width: calc((100% - 20px) / 2);
height: 44px;
border-radius: 8px;
font-size: 16px;
border: none;
outline: none; }
.section--1 .login-frame #sso-login-form form .form-group .col-xs-6 .btn-submit {
background: #EC5500;
color: white; }
.section--1 .login-frame #sso-login-form form .form-group .col-xs-6 .btn-reset {
background: #fff;
color: #EC5500;
border: 1px solid #EC5500; }
.section--1 .login-frame #sso-login-form > .row {
display: flex;
align-items: center;
flex-direction: column; }
.section--1 .login-frame #sso-login-form > .row .text-right {
color: #9A9A9A;
position: relative;
margin-top: 10px; }
.section--1 .login-frame #sso-login-form > .row .text-right::before {
content: '';
width: 25px;
height: 1px;
background: #B0B0B0;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -40px; }
.section--1 .login-frame #sso-login-form > .row .text-right::after {
content: '';
width: 25px;
height: 1px;
background: #B0B0B0;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -40px; }
.section--1 .login-frame #sso-login-form > .row a {
display: block;
color: #EC5500;
text-decoration: underline;
margin: 5px 0px; }
.hidden {
display: none; }
.section--3 {
height: 160px;
position: relative;
border-top: 1px solid #E6E6E6;
padding-top: 20px; }
@media (max-width: 700px) {
.section--3 {
height: 200px; } }
.section--3 .footer-content {
width: 650px;
margin: auto;
position: relative; }
@media (max-width: 768px) {
.section--3 .footer-content {
width: 310px; } }
.section--3 .footer-content p {
color: #343434;
text-align: center;
font-size: 16px;
line-height: 20px; }
@media (max-width: 768px) {
.section--3 .footer-content p {
font-size: 14px;
line-height: 16px; } }
.btn-orange {
display: flex;
height: 44px;
background: #EC5500;
border-radius: 8px;
align-items: center;
justify-content: center;
font-size: 16px;
border: none;
color: white;
cursor: pointer; }
@media (max-width: 700px) {
.btn-orange {
font-size: 14px; } }
.btn-orange:hover {
filter: brightness(1.2); }
.btn-orange span {
color: white; }
.btn-orange.small {
width: 150px; }
@media (max-width: 700px) {
.btn-orange.small {
width: 100px; } }
.btn-orange.full {
width: 100%; }
.btn-orange.big {
width: 250px; }
.flex {
display: flex; }
.btn-border {
display: flex;
height: 44px;
border-radius: 8px;
align-items: center;
justify-content: center;
font-size: 16px; }
.btn-border.black {
border: 1px solid black;
width: 200px; }
.btn-border.black span {
color: black; }
.btn-border.white {
border: 1px solid white;
width: 100%; }
.btn-border.white span {
color: white; }
.btn-border.orange {
border: 1px solid #EC5500;
width: 150px;
background: white; }
.btn-border.orange span {
color: #EC5500; }
.btn-border.orange:hover {
background: #EC5500;
color: white; }
.btn-border.orange:hover span {
color: white; }
.btn-see-more {
color: #343434; }
.btn-see-more:hover {
color: #EC5500;
font-weight: bold; }
.underline {
text-decoration: underline; }
.orange {
color: #EC5500; }
.bold {
font-weight: bold; }
.title-tab {
font-weight: 800;
font-size: 24px;
line-height: 33px;
color: #343434;
margin-top: 20px; }
::-webkit-scrollbar {
width: 10px; }
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px; }
/* Handle */
::-webkit-scrollbar-thumb {
background: #EC5500;
border-radius: 10px; }
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #ec9900; }
a .icon {
display: block;
margin-right: 10px; }
@media (max-width: 700px) {
a .icon {
transform: scale(0.7);
transform-origin: left;
margin-right: -2px; } }
a .icon.icon-napthe {
background-image: url(images/_sprites-layout.png);
background-position: -500px -322px;
width: 27px;
height: 18px; }
a .icon.icon-napthe.gray {
background-image: url(images/_sprites-layout.png);
background-position: -500px -234px;
width: 30px;
height: 20px; }
a .icon.icon-home {
background-image: url(images/_sprites-layout.png);
background-position: -522px -380px;
width: 22px;
height: 20px; }
a .icon.icon-home.gray {
background-image: url(images/_sprites-layout.png);
background-position: -524px -360px;
width: 22px;
height: 20px; }
a .icon.icon-support {
background-image: url(images/_sprites-layout.png);
background-position: -500px -360px;
width: 24px;
height: 20px; }
a .icon.icon-support.gray {
background-image: url(images/_sprites-layout.png);
background-position: -500px -340px;
width: 24px;
height: 20px; }
a .icon.icon-code {
background-image: url(images/_sprites-layout.png);
background-position: -523px -274px;
width: 22px;
height: 24px; }
a .icon.icon-code.gray {
background-image: url(images/_sprites-layout.png);
background-position: -500px -419px;
width: 18px;
height: 20px; }
a .icon.icon-fanpage {
background-image: url(images/_sprites-layout.png);
background-position: -536px -198px;
width: 13px;
height: 24px; }
a .icon.icon-fanpage.gray {
background-image: url(images/_sprites-layout.png);
background-position: -536px -419px;
width: 11px;
height: 20px; }
a .icon.icon-down {
background-image: url(images/_sprites-layout.png);
background-position: -530px -234px;
width: 22px;
height: 20px; }
a .icon.icon-history {
background-image: url(images/_sprites-layout.png);
background-position: -530px -254px;
width: 22px;
height: 20px; }
a .icon.icon-login {
background-image: url(images/_sprites-layout.png);
background-position: -500px -298px;
width: 22px;
height: 24px; }
a .icon.icon-show-down {
background-image: url(images/_sprites-layout.png);
background-position: -527px -330px;
width: 12px;
height: 8px; }
a .icon.icon-show-down-black {
background-image: url(images/_sprites-layout.png);
background-position: -527px -322px;
width: 12px;
height: 8px; }
a .icon.icon-tab-event {
background-image: url(images/_sprites-layout.png);
background-position: -500px -274px;
width: 23px;
height: 24px; }
a .icon.icon-tab-code {
background-image: url(images/_sprites-layout.png);
background-position: -522px -298px;
width: 22px;
height: 24px; }
a.nav-sub-item:hover .icon-napthe, a.nav-bottom-item:hover .icon-napthe {
background-image: url(images/_sprites-layout.png);
background-position: -500px -254px;
width: 30px;
height: 20px; }
a.nav-sub-item:hover .icon-home, a.nav-bottom-item:hover .icon-home {
background-image: url(images/_sprites-layout.png);
background-position: -500px -380px;
width: 22px;
height: 20px; }
a.nav-sub-item:hover .icon-support, a.nav-bottom-item:hover .icon-support {
background-image: url(images/_sprites-layout.png);
background-position: -524px -340px;
width: 24px;
height: 20px; }
a.nav-sub-item:hover .icon-code, a.nav-bottom-item:hover .icon-code {
background-image: url(images/_sprites-layout.png);
background-position: -518px -419px;
width: 18px;
height: 20px; }
a.nav-sub-item:hover .icon-fanpage, a.nav-bottom-item:hover .icon-fanpage {
background-image: url(images/_sprites-layout.png);
background-position: -462px -320px;
width: 11px;
height: 20px; }
.space-float {
height: 80px; }
@media (max-width: 700px) {
.space-float {
height: 60px; } }
form {
position: relative;
width: 100%;
padding: 40px 21px 0px 21px; }
form .Input-error {
color: red;
font-size: 16px;
text-align: center;
margin-bottom: 20px; }
form input {
width: 100%;
height: 44px;
background: #f2f2f2;
border-radius: 8px;
border: none;
padding: 0 20px; }
form li {
margin-bottom: 20px; }
form li p {
display: flex;
flex-direction: column; }
form li p label {
margin-bottom: 10px;
font-size: 16px;
color: #373737; }
.nav-top {
width: 100%;
height: 80px;
background-color: #EC5500; }
@media (max-width: 700px) {
.nav-top {
height: 60px; } }
.nav-top--main {
width: 768px;
margin: auto;
height: 100%;
align-items: center;
display: flex;
position: relative; }
@media (max-width: 700px) {
.nav-top--main {
width: 100%;
padding: 0 16px; } }
.nav-top--main .open-nav {
display: block;
background-image: url(images/_sprites-layout.png);
background-position: -500px -52px;
width: 52px;
height: 52px;
margin-right: 20px; }
@media (max-width: 700px) {
.nav-top--main .open-nav {
transform: scale(0.75);
margin-right: 0px;
transform-origin: left; } }
.nav-top--main .open-nav:hover {
filter: drop-shadow(0px 2px 4px #414040); }
.nav-top--main .open-nav.toClose {
background-image: url(images/_sprites-layout.png);
background-position: -500px 0px;
width: 52px;
height: 52px; }
.nav-top--main span {
font-size: 24px; }
@media (max-width: 700px) {
.nav-top--main span {
font-size: 14px; } }
.nav-top--main .tagline {
font-size: 30px;
font-weight: bold;
color: white; }
@media (max-width: 700px) {
.nav-top--main .tagline {
font-size: 20px; } }
.nav-top--main .login {
margin-left: auto;
margin-right: 10px; }
.nav-top--main .login .btn-login, .nav-top--main .login .btn-logged {
align-items: center; }
.nav-top--main .login .btn-login:hover, .nav-top--main .login .btn-logged:hover {
filter: drop-shadow(0px 2px 4px black); }
.nav-top--main .login span {
color: white; }
.nav-top--main .login .btn-logged .icon {
margin-left: 5px; }
.nav-top--main .login .btn-logged.active .icon {
background-image: url(images/_sprites-layout.png);
background-position: -539px -322px;
width: 12px;
height: 8px; }
.nav-top .sub-nav-mb {
width: 768px;
position: absolute;
top: 80px;
max-height: 0;
height: 0;
overflow: hidden;
transition: 0.4s ease-in-out;
display: flex;
flex-direction: column;
left: 50%;
transform: translateX(-50%); }
@media (max-width: 768px) {
.nav-top .sub-nav-mb {
width: 100vw;
top: 60px; } }
.nav-top .sub-nav-mb li {
width: 100%;
position: relative; }
.nav-top .sub-nav-mb li:last-child a {
border-bottom: none; }
.nav-top .sub-nav-mb li a {
background-color: #341f00d0;
padding: 21px;
border-bottom: 2px dashed #efc97485;
font-size: 25px;
display: flex;
width: 100%;
color: #fafafa;
align-items: center; }
@media (max-width: 700px) {
.nav-top .sub-nav-mb li a {
font-size: 16px; } }
.nav-top .sub-nav-mb li a:hover {
background-color: #FFF4D8;
color: #EC5500; }
.nav-top .sub-nav-mb.Open {
max-height: 1000px;
height: auto; }
.nav-top .logged-info {
width: 340px;
padding: 16px 19px;
background: #341f00ef;
position: absolute;
right: 0;
top: 80px;
display: none; }
.nav-top .logged-info.active {
display: block; }
@media (max-width: 700px) {
.nav-top .logged-info {
top: 60px;
width: 280px;
padding: 16px 10px; } }
.nav-top .logged-info .btn-log-out {
margin-top: 10px; }
@media (max-width: 700px) {
.nav-top .logged-info .btn-log-out {
height: 35px; } }
.nav-top .logged-info .btn-log-out span {
font-size: 16px; }
@media (max-width: 700px) {
.nav-top .logged-info .btn-log-out span {
font-size: 14px; } }
.nav-top .logged-info p {
color: white;
margin-bottom: 10px;
display: flex; }
.nav-top .logged-info p label {
width: 90px;
display: block; }
.nav-top .logged-info p label, .nav-top .logged-info p span {
font-size: 16px; }
@media (max-width: 700px) {
.nav-top .logged-info p label, .nav-top .logged-info p span {
font-size: 14px; } }
.nav-bottom {
width: 100%;
height: 60px;
background-color: white;
border-top: 1px solid #E6E6E6; }
.nav-bottom ul {
width: 768px;
margin: auto;
height: 100%;
align-items: center;
display: flex;
position: relative;
justify-content: space-between; }
@media (max-width: 700px) {
.nav-bottom ul {
width: 100%; } }
.nav-bottom ul li a {
display: flex;
text-align: center;
align-items: center;
padding: 18px 24px;
position: relative; }
@media (max-width: 700px) {
.nav-bottom ul li a {
flex-direction: column;
padding: 4px 5px;
font-size: 12px; } }
.nav-bottom ul li a span {
color: #343434; }
.nav-bottom ul li a::before {
content: "";
background-image: url(images/_sprites-layout.png);
background-position: -172px -370px;
width: 126px;
height: 7px;
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0px;
display: none; }
@media (max-width: 700px) {
.nav-bottom ul li a::before {
transform: scale(0.5) translateX(-100%);
bottom: -12px; } }
.nav-bottom ul li a:hover span {
color: #EC5500; }
.nav-bottom ul li a:hover::before {
display: block; }
.popup .close-popup {
background-image: url(images/_sprites-layout.png);
background-position: -500px -104px;
width: 50px;
height: 50px;
position: absolute;
top: 0px;
right: 0px; }
.popup .close-popup:hover {
filter: brightness(1.2); }
.popup .popup__content {
width: 460px;
height: 220px;
background: white;
border-radius: 20px;
padding: 20px; }
@media (max-width: 768px) {
.popup .popup__content {
width: 300px; } }
.popup .popup__content .scroll {
width: 80%;
height: 95%;
margin: auto;
overflow-y: auto;
/* Track */
/* Handle */
/* Handle on hover */ }
.popup .popup__content .scroll::-webkit-scrollbar {
width: 8px;
border-radius: 5px; }
.popup .popup__content .scroll::-webkit-scrollbar-track {
background: white;
border-radius: 5px; }
.popup .popup__content .scroll::-webkit-scrollbar-thumb {
background: #8f0101;
border-radius: 5px; }
.popup .popup__content .scroll::-webkit-scrollbar-thumb:hover {
background: #555; }
.popup .popup__content .module {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%; }
.popup .popup__content .module .title_pop {
font-size: 18px;
line-height: 25px;
text-align: center;
font-weight: bold;
color: #343434;
margin-bottom: 20px; }
.popup .popup__content .module p {
font-size: 16px;
line-height: 22px;
text-align: center;
color: #343434; }
.popup .popup__content .module .btn-orange {
margin-top: 20px; }
/*# sourceMappingURL=main.css.map*/