@font-face {
    font-family: 'fontello';
    src: url(../fonts/fontello.eot);
    src: url(../fonts/fontello.eot#iefix) format('embedded-opentype'),
    url(../fonts/fontello.woff2) format('woff2'),
    url(../fonts/fontello.woff) format('woff'),
    url(../fonts/fontello.ttf) format('truetype'),
    url(fonts/fontello.svg#fontello) format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?60496941#fontello') format('svg');
  }
}
*/

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;

    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */

    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;

    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;

    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;

    /* you can be more comfortable with increased icons size */
    /* font-size: 120%; */

    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-home:before {
    content: '\e800';
}

/* '' */
.icon-youtube:before {
    content: '\e801';
}

/* '' */
.icon-appstore:before {
    content: '\e802';
}

/* '' */
.icon-android:before {
    content: '\e803';
}

/* '' */
.icon-volume-off:before {
    content: '\e804';
}

/* '' */
.icon-twitter:before {
    content: '\e805';
}

/* '' */
.icon-facebook:before {
    content: '\e806';
}

/* '' */
.icon-google:before {
    content: '\e807';
}

/* '' */
.icon-ok-circled2:before {
    content: '\e808';
}

/* '' */
.icon-ok-circled:before {
    content: '\e809';
}

/* '' */
.icon-cancel-circled2:before {
    content: '\e80a';
}

/* '' */
.icon-cancel-circled:before {
    content: '\e80b';
}

/* '' */
.icon-th:before {
    content: '\e80c';
}

/* '' */
.icon-th-list:before {
    content: '\e80d';
}

/* '' */
.icon-plus-circled:before {
    content: '\e80e';
}

/* '' */
.icon-minus-circled:before {
    content: '\e80f';
}

/* '' */
.icon-minus:before {
    content: '\e810';
}

/* '' */
.icon-plus:before {
    content: '\e811';
}

/* '' */
.icon-cancel:before {
    content: '\e812';
}

/* '' */
.icon-ok:before {
    content: '\e813';
}

/* '' */
.icon-help-circled:before {
    content: '\e814';
}

/* '' */
.icon-info-circled:before {
    content: '\e815';
}

/* '' */
.icon-thumbs-up:before {
    content: '\e816';
}

/* '' */
.icon-thumbs-down:before {
    content: '\e817';
}

/* '' */
.icon-phone:before {
    content: '\e818';
}

/* '' */
.icon-volume-up:before {
    content: '\e819';
}

/* '' */
.icon-down-open:before {
    content: '\e81a';
}

/* '' */
.icon-left-open:before {
    content: '\e81b';
}

/* '' */
.icon-right-open:before {
    content: '\e81c';
}

/* '' */
.icon-up-open:before {
    content: '\e81d';
}

/* '' */
.icon-down-dir:before {
    content: '\e81e';
}

/* '' */
.icon-up-dir:before {
    content: '\e81f';
}

/* '' */
.icon-left-dir:before {
    content: '\e820';
}

/* '' */
.icon-right-dir:before {
    content: '\e821';
}

/* '' */
.icon-group:before {
    content: '\e822';
}

/* '' */
.icon-search:before {
    content: '\e823';
}

/* '' */
.icon-users:before {
    content: '\e824';
}

/* '' */
.icon-music:before {
    content: '\e825';
}

/* '' */
.icon-volume-off-1:before {
    content: '\e826';
}

/* '' */
.icon-volume-up-1:before {
    content: '\e827';
}

/* '' */
.icon-download:before {
    content: '\e828';
}

/* '' */
.icon-phone-squared:before {
    content: '\f098';
}

/* '' */
.icon-left-circled:before {
    content: '\f0a8';
}

/* '' */
.icon-right-circled:before {
    content: '\f0a9';
}

/* '' */
.icon-up-circled:before {
    content: '\f0aa';
}

/* '' */
.icon-down-circled:before {
    content: '\f0ab';
}

/* '' */
.icon-mail-alt:before {
    content: '\f0e0';
}

/* '' */
.icon-plus-squared:before {
    content: '\f0fe';
}

/* '' */
.icon-angle-double-left:before {
    content: '\f100';
}

/* '' */
.icon-angle-double-right:before {
    content: '\f101';
}

/* '' */
.icon-angle-double-up:before {
    content: '\f102';
}

/* '' */
.icon-angle-double-down:before {
    content: '\f103';
}

/* '' */
.icon-angle-left:before {
    content: '\f104';
}

/* '' */
.icon-angle-right:before {
    content: '\f105';
}

/* '' */
.icon-angle-up:before {
    content: '\f106';
}

/* '' */
.icon-angle-down:before {
    content: '\f107';
}

/* '' */
.icon-help:before {
    content: '\f128';
}

/* '' */
.icon-info:before {
    content: '\f129';
}

/* '' */
.icon-play-circled:before {
    content: '\f144';
}

/* '' */
.icon-minus-squared:before {
    content: '\f146';
}

/* '' */
.icon-minus-squared-alt:before {
    content: '\f147';
}

/* '' */
.icon-ok-squared:before {
    content: '\f14a';
}

/* '' */
.icon-dollar:before {
    content: '\f155';
}

/* '' */
.icon-thumbs-up-alt:before {
    content: '\f164';
}

/* '' */
.icon-thumbs-down-alt:before {
    content: '\f165';
}

/* '' */
.icon-youtube-play:before {
    content: '\f16a';
}

/* '' */
.icon-down:before {
    content: '\f175';
}

/* '' */
.icon-up:before {
    content: '\f176';
}

/* '' */
.icon-left:before {
    content: '\f177';
}

/* '' */
.icon-right:before {
    content: '\f178';
}

/* '' */
.icon-plus-squared-alt:before {
    content: '\f196';
}

/* '' */
.icon-map:before {
    content: '\f279';
}

/* '' */
:root {
    --width-desktop-safe: 1720px;
    --maxwidth-desktop-safe: calc(100% - 20px * 2);
    --width-mobile-safe: calc(100% - 20px * 2);
    --width-desktop: 2000px;
    --width-mobile: 768px;
    --height-desktop: 1000px;
    --height-mobile: 1000px;
    --font-primary: Roboto;
    --font-secondary: BeaufortForLOL;
    --fontsize-primary-desktop: 18px;
    --fontsize-primary-mobile: 24px;
    --fontheight-primary: 1.4;
    --fontweight-heavy: 900;
    --fontweight-bold: 700;
    --fontweight-semibold: 600;
    --fontweight-medium: 500;
    --fontweight-normal: 400;
    --fontweight-light: 300
}

:root {
    --color-gray-100: #F2F2F2;
    --color-gray-200: #E5E5E5;
    --color-gray-300: #B2B2B2;
    --color-gray-400: #666666;
    --color-gray-500: #444444;
    --color-gray-600: #333333;
    --color-gray-700: #222222;
    --color-gray-800: #111111;
    --color-gray-900: #000000;
    --color-primary-100: #C8E0F8;
    --color-primary-200: #94C0F1;
    --color-primary-300: #5A90D7;
    --color-primary-400: #3063AF;
    --color-primary-500: #042F7B;
    --color-primary-600: #022469;
    --color-primary-700: #021A58;
    --color-primary-800: #011247;
    --color-primary-900: #000D3B;
    --color-success-100: #DDF8CE;
    --color-success-200: #B6F19F;
    --color-success-300: #7ED769;
    --color-success-400: #4AAF3F;
    --color-success-500: #147A12;
    --color-success-600: #0D6813;
    --color-success-700: #095715;
    --color-success-800: #054615;
    --color-success-900: #033A15;
    --color-info-100: #C8FAF5;
    --color-info-200: #93F5F3;
    --color-info-300: #5ADAE1;
    --color-info-400: #31B1C4;
    --color-info-500: #007E9E;
    --color-info-600: #006287;
    --color-info-700: #004971;
    --color-info-800: #00345B;
    --color-info-900: #00254B;
    --color-warning-100: #FBEEC9;
    --color-warning-200: #F8DA95;
    --color-warning-300: #ECBB5E;
    --color-warning-400: #D99936;
    --color-warning-500: #C16D00;
    --color-warning-600: #A55600;
    --color-warning-700: #8A4200;
    --color-warning-800: #6F3000;
    --color-warning-900: #5C2400;
    --color-danger-100: #F9E1D1;
    --color-danger-200: #F3BFA5;
    --color-danger-300: #DC8C72;
    --color-danger-400: #BA5C4A;
    --color-danger-500: #8C251C;
    --color-danger-600: #781414;
    --color-danger-700: #640E15;
    --color-danger-800: #510814;
    --color-danger-900: #430514
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, main, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

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

*, ::after, ::before {
    box-sizing: inherit
}

html {
    box-sizing: border-box;
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent
}

body {
    line-height: 1;
    font-family: sans-serif;
    text-align: left
}

[tabindex="-1"]:focus:not(:focus-visible) {
    outline: 0 !important
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

blockquote::after, blockquote::before, q::after, q::before {
    content: "";
    content: none
}

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

caption {
    caption-side: bottom
}

th {
    text-align: inherit;
    text-align: -webkit-match-parent
}

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

code, kbd, pre, samp {
    font-family: monospace, monospace
}

pre {
    overflow: auto;
    -ms-overflow-style: scrollbar
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}

abbr[title] {
    border-bottom: 0;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    cursor: help;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none
}

address {
    font-style: normal;
    line-height: inherit
}

b, strong {
    font-weight: bolder
}

small {
    font-size: 80%
}

sub, sup {
    position: relative;
    font-size: 75%;
    line-height: 0
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

em {
    font-style: italic
}

img {
    border-style: none
}

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

button {
    border-radius: 0
}

button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color
}

button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button
}

input[type=date], input[type=datetime-local], input[type=month], input[type=time] {
    -webkit-appearance: listbox
}

textarea {
    overflow: auto;
    resize: vertical
}

button, input {
    overflow: visible
}

button, select {
    text-transform: none
}

[role=button] {
    cursor: pointer
}

select {
    word-wrap: normal
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[tabindex="-1"]:focus {
    outline: 0 !important
}

fieldset {
    min-width: 0
}

legend {
    max-width: 100%;
    white-space: normal;
    color: inherit;
    display: block
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto;
    resize: vertical
}

[type=checkbox], [type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

output {
    display: inline-block
}

template {
    display: none
}

[hidden] {
    display: none
}

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
    padding: 4px 4px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: .15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: rgba(0, 0, 0, 0);
    border: 0;
    margin: 0;
    overflow: visible
}

.hamburger:hover {
    opacity: .7
}

.hamburger.is-active:hover {
    opacity: .7
}

.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {
    background-color: #fff
}

.hamburger-box {
    width: 24px;
    height: 17px;
    display: inline-block;
    position: relative
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -1.5px
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 24px;
    height: 3px;
    background-color: #fff;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: .15s;
    transition-timing-function: ease
}

.hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block
}

.hamburger-inner::before {
    top: -7px
}

.hamburger-inner::after {
    bottom: -7px
}

.hamburger--3dx .hamburger-box {
    perspective: 48px
}

.hamburger--3dx .hamburger-inner {
    transition: transform .15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s .1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after {
    transition: transform 0s .1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dx.is-active .hamburger-inner {
    background-color: rgba(0, 0, 0, 0) !important;
    transform: rotateY(180deg)
}

.hamburger--3dx.is-active .hamburger-inner::before {
    transform: translate3d(0, 7px, 0) rotate(45deg)
}

.hamburger--3dx.is-active .hamburger-inner::after {
    transform: translate3d(0, -7px, 0) rotate(-45deg)
}

.hamburger--3dx-r .hamburger-box {
    perspective: 48px
}

.hamburger--3dx-r .hamburger-inner {
    transition: transform .15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s .1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after {
    transition: transform 0s .1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dx-r.is-active .hamburger-inner {
    background-color: rgba(0, 0, 0, 0) !important;
    transform: rotateY(-180deg)
}

.hamburger--3dx-r.is-active .hamburger-inner::before {
    transform: translate3d(0, 7px, 0) rotate(45deg)
}

.hamburger--3dx-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -7px, 0) rotate(-45deg)
}

.hamburger--3dy .hamburger-box {
    perspective: 48px
}

.hamburger--3dy .hamburger-inner {
    transition: transform .15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s .1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after {
    transition: transform 0s .1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dy.is-active .hamburger-inner {
    background-color: rgba(0, 0, 0, 0) !important;
    transform: rotateX(-180deg)
}

.hamburger--3dy.is-active .hamburger-inner::before {
    transform: translate3d(0, 7px, 0) rotate(45deg)
}

.hamburger--3dy.is-active .hamburger-inner::after {
    transform: translate3d(0, -7px, 0) rotate(-45deg)
}

.hamburger--3dy-r .hamburger-box {
    perspective: 48px
}

.hamburger--3dy-r .hamburger-inner {
    transition: transform .15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s .1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after {
    transition: transform 0s .1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dy-r.is-active .hamburger-inner {
    background-color: rgba(0, 0, 0, 0) !important;
    transform: rotateX(180deg)
}

.hamburger--3dy-r.is-active .hamburger-inner::before {
    transform: translate3d(0, 7px, 0) rotate(45deg)
}

.hamburger--3dy-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -7px, 0) rotate(-45deg)
}

.hamburger--3dxy .hamburger-box {
    perspective: 48px
}

.hamburger--3dxy .hamburger-inner {
    transition: transform .15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s .1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dxy .hamburger-inner::before, .hamburger--3dxy .hamburger-inner::after {
    transition: transform 0s .1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dxy.is-active .hamburger-inner {
    background-color: rgba(0, 0, 0, 0) !important;
    transform: rotateX(180deg) rotateY(180deg)
}

.hamburger--3dxy.is-active .hamburger-inner::before {
    transform: translate3d(0, 7px, 0) rotate(45deg)
}

.hamburger--3dxy.is-active .hamburger-inner::after {
    transform: translate3d(0, -7px, 0) rotate(-45deg)
}

.hamburger--3dxy-r .hamburger-box {
    perspective: 48px
}

.hamburger--3dxy-r .hamburger-inner {
    transition: transform .15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s .1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dxy-r .hamburger-inner::before, .hamburger--3dxy-r .hamburger-inner::after {
    transition: transform 0s .1s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.hamburger--3dxy-r.is-active .hamburger-inner {
    background-color: rgba(0, 0, 0, 0) !important;
    transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg)
}

.hamburger--3dxy-r.is-active .hamburger-inner::before {
    transform: translate3d(0, 7px, 0) rotate(45deg)
}

.hamburger--3dxy-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -7px, 0) rotate(-45deg)
}

.hamburger--arrow.is-active .hamburger-inner::before {
    transform: translate3d(-4.8px, 0, 0) rotate(-45deg) scale(0.7, 1)
}

.hamburger--arrow.is-active .hamburger-inner::after {
    transform: translate3d(-4.8px, 0, 0) rotate(45deg) scale(0.7, 1)
}

.hamburger--arrow-r.is-active .hamburger-inner::before {
    transform: translate3d(4.8px, 0, 0) rotate(45deg) scale(0.7, 1)
}

.hamburger--arrow-r.is-active .hamburger-inner::after {
    transform: translate3d(4.8px, 0, 0) rotate(-45deg) scale(0.7, 1)
}

.hamburger--arrowalt .hamburger-inner::before {
    transition: top .1s .1s ease, transform .1s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.hamburger--arrowalt .hamburger-inner::after {
    transition: bottom .1s .1s ease, transform .1s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.hamburger--arrowalt.is-active .hamburger-inner::before {
    top: 0;
    transform: translate3d(-4.8px, -6px, 0) rotate(-45deg) scale(0.7, 1);
    transition: top .1s ease, transform .1s .1s cubic-bezier(0.895, 0.03, 0.685, 0.22)
}

.hamburger--arrowalt.is-active .hamburger-inner::after {
    bottom: 0;
    transform: translate3d(-4.8px, 6px, 0) rotate(45deg) scale(0.7, 1);
    transition: bottom .1s ease, transform .1s .1s cubic-bezier(0.895, 0.03, 0.685, 0.22)
}

.hamburger--arrowalt-r .hamburger-inner::before {
    transition: top .1s .1s ease, transform .1s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.hamburger--arrowalt-r .hamburger-inner::after {
    transition: bottom .1s .1s ease, transform .1s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.hamburger--arrowalt-r.is-active .hamburger-inner::before {
    top: 0;
    transform: translate3d(4.8px, -6px, 0) rotate(45deg) scale(0.7, 1);
    transition: top .1s ease, transform .1s .1s cubic-bezier(0.895, 0.03, 0.685, 0.22)
}

.hamburger--arrowalt-r.is-active .hamburger-inner::after {
    bottom: 0;
    transform: translate3d(4.8px, 6px, 0) rotate(-45deg) scale(0.7, 1);
    transition: bottom .1s ease, transform .1s .1s cubic-bezier(0.895, 0.03, 0.685, 0.22)
}

.hamburger--arrowturn.is-active .hamburger-inner {
    transform: rotate(-180deg)
}

.hamburger--arrowturn.is-active .hamburger-inner::before {
    transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1)
}

.hamburger--arrowturn.is-active .hamburger-inner::after {
    transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1)
}

.hamburger--arrowturn-r.is-active .hamburger-inner {
    transform: rotate(-180deg)
}

.hamburger--arrowturn-r.is-active .hamburger-inner::before {
    transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1)
}

.hamburger--arrowturn-r.is-active .hamburger-inner::after {
    transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1)
}

.hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after {
    transition-property: none
}

.hamburger--boring.is-active .hamburger-inner {
    transform: rotate(45deg)
}

.hamburger--boring.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0
}

.hamburger--boring.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg)
}

.hamburger--collapse .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-duration: .13s;
    transition-delay: .13s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--collapse .hamburger-inner::after {
    top: -14px;
    transition: top .2s .2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity .1s linear
}

.hamburger--collapse .hamburger-inner::before {
    transition: top .12s .2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform .13s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--collapse.is-active .hamburger-inner {
    transform: translate3d(0, -7px, 0) rotate(-45deg);
    transition-delay: .22s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--collapse.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top .2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity .1s .22s linear
}

.hamburger--collapse.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-90deg);
    transition: top .1s .16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform .13s .25s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--collapse-r .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-duration: .13s;
    transition-delay: .13s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--collapse-r .hamburger-inner::after {
    top: -14px;
    transition: top .2s .2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity .1s linear
}

.hamburger--collapse-r .hamburger-inner::before {
    transition: top .12s .2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform .13s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--collapse-r.is-active .hamburger-inner {
    transform: translate3d(0, -7px, 0) rotate(45deg);
    transition-delay: .22s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--collapse-r.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top .2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity .1s .22s linear
}

.hamburger--collapse-r.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(90deg);
    transition: top .1s .16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform .13s .25s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--elastic .hamburger-inner {
    top: 1.5px;
    transition-duration: .275s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.hamburger--elastic .hamburger-inner::before {
    top: 7px;
    transition: opacity .125s .275s ease
}

.hamburger--elastic .hamburger-inner::after {
    top: 14px;
    transition: transform .275s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.hamburger--elastic.is-active .hamburger-inner {
    transform: translate3d(0, 7px, 0) rotate(135deg);
    transition-delay: .075s
}

.hamburger--elastic.is-active .hamburger-inner::before {
    transition-delay: 0s;
    opacity: 0
}

.hamburger--elastic.is-active .hamburger-inner::after {
    transform: translate3d(0, -14px, 0) rotate(-270deg);
    transition-delay: .075s
}

.hamburger--elastic-r .hamburger-inner {
    top: 1.5px;
    transition-duration: .275s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.hamburger--elastic-r .hamburger-inner::before {
    top: 7px;
    transition: opacity .125s .275s ease
}

.hamburger--elastic-r .hamburger-inner::after {
    top: 14px;
    transition: transform .275s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.hamburger--elastic-r.is-active .hamburger-inner {
    transform: translate3d(0, 7px, 0) rotate(-135deg);
    transition-delay: .075s
}

.hamburger--elastic-r.is-active .hamburger-inner::before {
    transition-delay: 0s;
    opacity: 0
}

.hamburger--elastic-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -14px, 0) rotate(270deg);
    transition-delay: .075s
}

.hamburger--emphatic {
    overflow: hidden
}

.hamburger--emphatic .hamburger-inner {
    transition: background-color .125s .175s ease-in
}

.hamburger--emphatic .hamburger-inner::before {
    left: 0;
    transition: transform .125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top .05s .125s linear, left .125s .175s ease-in
}

.hamburger--emphatic .hamburger-inner::after {
    top: 7px;
    right: 0;
    transition: transform .125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top .05s .125s linear, right .125s .175s ease-in
}

.hamburger--emphatic.is-active .hamburger-inner {
    transition-delay: 0s;
    transition-timing-function: ease-out;
    background-color: rgba(0, 0, 0, 0) !important
}

.hamburger--emphatic.is-active .hamburger-inner::before {
    left: -48px;
    top: -48px;
    transform: translate3d(48px, 48px, 0) rotate(45deg);
    transition: left .125s ease-out, top .05s .125s linear, transform .125s .175s cubic-bezier(0.075, 0.82, 0.165, 1)
}

.hamburger--emphatic.is-active .hamburger-inner::after {
    right: -48px;
    top: -48px;
    transform: translate3d(-48px, 48px, 0) rotate(-45deg);
    transition: right .125s ease-out, top .05s .125s linear, transform .125s .175s cubic-bezier(0.075, 0.82, 0.165, 1)
}

.hamburger--emphatic-r {
    overflow: hidden
}

.hamburger--emphatic-r .hamburger-inner {
    transition: background-color .125s .175s ease-in
}

.hamburger--emphatic-r .hamburger-inner::before {
    left: 0;
    transition: transform .125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top .05s .125s linear, left .125s .175s ease-in
}

.hamburger--emphatic-r .hamburger-inner::after {
    top: 7px;
    right: 0;
    transition: transform .125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top .05s .125s linear, right .125s .175s ease-in
}

.hamburger--emphatic-r.is-active .hamburger-inner {
    transition-delay: 0s;
    transition-timing-function: ease-out;
    background-color: rgba(0, 0, 0, 0) !important
}

.hamburger--emphatic-r.is-active .hamburger-inner::before {
    left: -48px;
    top: 48px;
    transform: translate3d(48px, -48px, 0) rotate(-45deg);
    transition: left .125s ease-out, top .05s .125s linear, transform .125s .175s cubic-bezier(0.075, 0.82, 0.165, 1)
}

.hamburger--emphatic-r.is-active .hamburger-inner::after {
    right: -48px;
    top: 48px;
    transform: translate3d(-48px, -48px, 0) rotate(45deg);
    transition: right .125s ease-out, top .05s .125s linear, transform .125s .175s cubic-bezier(0.075, 0.82, 0.165, 1)
}

.hamburger--minus .hamburger-inner::before, .hamburger--minus .hamburger-inner::after {
    transition: bottom .08s 0s ease-out, top .08s 0s ease-out, opacity 0s linear
}

.hamburger--minus.is-active .hamburger-inner::before, .hamburger--minus.is-active .hamburger-inner::after {
    opacity: 0;
    transition: bottom .08s ease-out, top .08s ease-out, opacity 0s .08s linear
}

.hamburger--minus.is-active .hamburger-inner::before {
    top: 0
}

.hamburger--minus.is-active .hamburger-inner::after {
    bottom: 0
}

.hamburger--slider .hamburger-inner {
    top: 1.5px
}

.hamburger--slider .hamburger-inner::before {
    top: 7px;
    transition-property: transform, opacity;
    transition-timing-function: ease;
    transition-duration: .15s
}

.hamburger--slider .hamburger-inner::after {
    top: 14px
}

.hamburger--slider.is-active .hamburger-inner {
    transform: translate3d(0, 7px, 0) rotate(45deg)
}

.hamburger--slider.is-active .hamburger-inner::before {
    transform: rotate(-45deg) translate3d(-3.4285714286px, -4px, 0);
    opacity: 0
}

.hamburger--slider.is-active .hamburger-inner::after {
    transform: translate3d(0, -14px, 0) rotate(-90deg)
}

.hamburger--slider-r .hamburger-inner {
    top: 1.5px
}

.hamburger--slider-r .hamburger-inner::before {
    top: 7px;
    transition-property: transform, opacity;
    transition-timing-function: ease;
    transition-duration: .15s
}

.hamburger--slider-r .hamburger-inner::after {
    top: 14px
}

.hamburger--slider-r.is-active .hamburger-inner {
    transform: translate3d(0, 7px, 0) rotate(-45deg)
}

.hamburger--slider-r.is-active .hamburger-inner::before {
    transform: rotate(45deg) translate3d(3.4285714286px, -4px, 0);
    opacity: 0
}

.hamburger--slider-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -14px, 0) rotate(90deg)
}

.hamburger--spin .hamburger-inner {
    transition-duration: .22s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--spin .hamburger-inner::before {
    transition: top .1s .25s ease-in, opacity .1s ease-in
}

.hamburger--spin .hamburger-inner::after {
    transition: bottom .1s .25s ease-in, transform .22s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--spin.is-active .hamburger-inner {
    transform: rotate(225deg);
    transition-delay: .12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--spin.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top .1s ease-out, opacity .1s .12s ease-out
}

.hamburger--spin.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom .1s ease-out, transform .22s .12s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--spin-r .hamburger-inner {
    transition-duration: .22s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--spin-r .hamburger-inner::before {
    transition: top .1s .25s ease-in, opacity .1s ease-in
}

.hamburger--spin-r .hamburger-inner::after {
    transition: bottom .1s .25s ease-in, transform .22s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--spin-r.is-active .hamburger-inner {
    transform: rotate(-225deg);
    transition-delay: .12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--spin-r.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top .1s ease-out, opacity .1s .12s ease-out
}

.hamburger--spin-r.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(90deg);
    transition: bottom .1s ease-out, transform .22s .12s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--spring .hamburger-inner {
    top: 1.5px;
    transition: background-color 0s .13s linear
}

.hamburger--spring .hamburger-inner::before {
    top: 7px;
    transition: top .1s .2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform .13s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--spring .hamburger-inner::after {
    top: 14px;
    transition: top .2s .2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform .13s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--spring.is-active .hamburger-inner {
    transition-delay: .22s;
    background-color: rgba(0, 0, 0, 0) !important
}

.hamburger--spring.is-active .hamburger-inner::before {
    top: 0;
    transition: top .1s .15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform .13s .22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 7px, 0) rotate(45deg)
}

.hamburger--spring.is-active .hamburger-inner::after {
    top: 0;
    transition: top .2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform .13s .22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 7px, 0) rotate(-45deg)
}

.hamburger--spring-r .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-duration: .13s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--spring-r .hamburger-inner::after {
    top: -14px;
    transition: top .2s .2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear
}

.hamburger--spring-r .hamburger-inner::before {
    transition: top .1s .2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform .13s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--spring-r.is-active .hamburger-inner {
    transform: translate3d(0, -7px, 0) rotate(-45deg);
    transition-delay: .22s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--spring-r.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top .2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s .22s linear
}

.hamburger--spring-r.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(90deg);
    transition: top .1s .15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform .13s .22s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--stand .hamburger-inner {
    transition: transform .075s .15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s .075s linear
}

.hamburger--stand .hamburger-inner::before {
    transition: top .075s .075s ease-in, transform .075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--stand .hamburger-inner::after {
    transition: bottom .075s .075s ease-in, transform .075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--stand.is-active .hamburger-inner {
    transform: rotate(90deg);
    background-color: rgba(0, 0, 0, 0) !important;
    transition: transform .075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s .15s linear
}

.hamburger--stand.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-45deg);
    transition: top .075s .1s ease-out, transform .075s .15s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--stand.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(45deg);
    transition: bottom .075s .1s ease-out, transform .075s .15s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--stand-r .hamburger-inner {
    transition: transform .075s .15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s .075s linear
}

.hamburger--stand-r .hamburger-inner::before {
    transition: top .075s .075s ease-in, transform .075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--stand-r .hamburger-inner::after {
    transition: bottom .075s .075s ease-in, transform .075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--stand-r.is-active .hamburger-inner {
    transform: rotate(-90deg);
    background-color: rgba(0, 0, 0, 0) !important;
    transition: transform .075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s .15s linear
}

.hamburger--stand-r.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-45deg);
    transition: top .075s .1s ease-out, transform .075s .15s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--stand-r.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(45deg);
    transition: bottom .075s .1s ease-out, transform .075s .15s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--squeeze .hamburger-inner {
    transition-duration: .075s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--squeeze .hamburger-inner::before {
    transition: top .075s .12s ease, opacity .075s ease
}

.hamburger--squeeze .hamburger-inner::after {
    transition: bottom .075s .12s ease, transform .075s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--squeeze.is-active .hamburger-inner {
    transform: rotate(45deg);
    transition-delay: .12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--squeeze.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top .075s ease, opacity .075s .12s ease
}

.hamburger--squeeze.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom .075s ease, transform .075s .12s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.hamburger--vortex .hamburger-inner {
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1)
}

.hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after {
    transition-duration: 0s;
    transition-delay: .1s;
    transition-timing-function: linear
}

.hamburger--vortex .hamburger-inner::before {
    transition-property: top, opacity
}

.hamburger--vortex .hamburger-inner::after {
    transition-property: bottom, transform
}

.hamburger--vortex.is-active .hamburger-inner {
    transform: rotate(765deg);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1)
}

.hamburger--vortex.is-active .hamburger-inner::before, .hamburger--vortex.is-active .hamburger-inner::after {
    transition-delay: 0s
}

.hamburger--vortex.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0
}

.hamburger--vortex.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(90deg)
}

.hamburger--vortex-r .hamburger-inner {
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1)
}

.hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after {
    transition-duration: 0s;
    transition-delay: .1s;
    transition-timing-function: linear
}

.hamburger--vortex-r .hamburger-inner::before {
    transition-property: top, opacity
}

.hamburger--vortex-r .hamburger-inner::after {
    transition-property: bottom, transform
}

.hamburger--vortex-r.is-active .hamburger-inner {
    transform: rotate(-765deg);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1)
}

.hamburger--vortex-r.is-active .hamburger-inner::before, .hamburger--vortex-r.is-active .hamburger-inner::after {
    transition-delay: 0s
}

.hamburger--vortex-r.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0
}

.hamburger--vortex-r.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg)
}

@font-face {
    font-family: BeaufortForLOL;
    font-display: swap;
    src: local("BeaufortForLOL");
    src: url(assets/fonts/BeaufortForLOL/beaufortforlol-light.otf);
    font-weight: 200
}

@font-face {
    font-family: BeaufortForLOL;
    font-display: swap;
    src: local("BeaufortForLOL");
    src: url(assets/fonts/BeaufortForLOL/beaufortforlol-regular.otf);
    font-weight: 300
}

@font-face {
    font-family: BeaufortForLOL;
    font-display: swap;
    src: local("BeaufortForLOL");
    src: url(assets/fonts/BeaufortForLOL/beaufortforlol-medium.otf);
    font-weight: 400
}

@font-face {
    font-family: BeaufortForLOL;
    font-display: swap;
    src: local("BeaufortForLOL");
    src: url(assets/fonts/BeaufortForLOL/beaufortforlol-heavy.otf);
    font-weight: 500
}

@font-face {
    font-family: BeaufortForLOL;
    font-display: swap;
    src: local("BeaufortForLOL");
    src: url(assets/fonts/BeaufortForLOL/beaufortforlol-bold.otf);
    font-weight: 600
}

@font-face {
    font-family: BeaufortForLOL;
    font-display: swap;
    src: local("BeaufortForLOL");
    src: url(assets/fonts/BeaufortForLOL/beaufortforlol-bold.otf);
    font-weight: 700
}

@font-face {
    font-family: Roboto;
    font-display: swap;
    src: local("Roboto");
    src: url(fonts/Roboto/Roboto-Light.ttf);
    font-weight: 200
}

@font-face {
    font-family: Roboto;
    font-display: swap;
    src: local("Roboto");
    src: url(../fonts/Roboto-Regular.ttf);
    font-weight: 300
}

@font-face {
    font-family: Roboto;
    font-display: swap;
    src: local("Roboto");
    src: url(../fonts/Roboto-Medium.ttf);
    font-weight: 400
}

@font-face {
    font-family: Roboto;
    font-display: swap;
    src: local("Roboto");
    src: url(../fonts/Roboto-Bold.ttf);
    font-weight: 600
}

* {
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-decoration: none
}

*:focus {
    outline: none
}

.off, .off:hover {
    filter: grayscale(100%);
    pointer-events: none
}

html {
    overflow-x: hidden;
    overflow-y: auto
}

html.popup-opened {
    position: relative;
    height: 100% !important;
    overflow: hidden;
    touch-action: none;
    -ms-touch-action: none
}

body {
    font-family: var(--font-primary), var(--font-secondary), sans-serif;
    line-height: var(--fontheight-primary);
    font-size: var(--fontsize-primary);
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 0;
    padding: 0;
    background: none
}

body.popup-opened {
    overflow: hidden
}

.row {
    display: flex;
    flex-wrap: wrap;
    width: 100%
}

.row > .col-1 {
    padding: 0 10px;
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%
}

.row > .col-offset-1 {
    padding: 0 10px;
    margin-left: 8.3333333333%;
    max-width: 8.3333333333%
}

.row > .col-2 {
    padding: 0 10px;
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%
}

.row > .col-offset-2 {
    padding: 0 10px;
    margin-left: 16.6666666667%;
    max-width: 16.6666666667%
}

.row > .col-3 {
    padding: 0 10px;
    flex-basis: 25%;
    max-width: 25%
}

.row > .col-offset-3 {
    padding: 0 10px;
    margin-left: 25%;
    max-width: 25%
}

.row > .col-4 {
    padding: 0 10px;
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%
}

.row > .col-offset-4 {
    padding: 0 10px;
    margin-left: 33.3333333333%;
    max-width: 33.3333333333%
}

.row > .col-5 {
    padding: 0 10px;
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%
}

.row > .col-offset-5 {
    padding: 0 10px;
    margin-left: 41.6666666667%;
    max-width: 41.6666666667%
}

.row > .col-6 {
    padding: 0 10px;
    flex-basis: 50%;
    max-width: 50%
}

.row > .col-offset-6 {
    padding: 0 10px;
    margin-left: 50%;
    max-width: 50%
}

.row > .col-7 {
    padding: 0 10px;
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%
}

.row > .col-offset-7 {
    padding: 0 10px;
    margin-left: 58.3333333333%;
    max-width: 58.3333333333%
}

.row > .col-8 {
    padding: 0 10px;
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%
}

.row > .col-offset-8 {
    padding: 0 10px;
    margin-left: 66.6666666667%;
    max-width: 66.6666666667%
}

.row > .col-9 {
    padding: 0 10px;
    flex-basis: 75%;
    max-width: 75%
}

.row > .col-offset-9 {
    padding: 0 10px;
    margin-left: 75%;
    max-width: 75%
}

.row > .col-10 {
    padding: 0 10px;
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%
}

.row > .col-offset-10 {
    padding: 0 10px;
    margin-left: 83.3333333333%;
    max-width: 83.3333333333%
}

.row > .col-11 {
    padding: 0 10px;
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%
}

.row > .col-offset-11 {
    padding: 0 10px;
    margin-left: 91.6666666667%;
    max-width: 91.6666666667%
}

.row > .col-12 {
    padding: 0 10px;
    flex-basis: 100%;
    max-width: 100%
}

.row > .col-offset-12 {
    padding: 0 10px;
    margin-left: 100%;
    max-width: 100%
}

@media (orientation: portrait) {
    .row > .col-mobile-1 {
        padding: 0 10px;
        flex-basis: 8.3333333333%;
        max-width: 8.3333333333%
    }

    .row > .col-mobile-offset-1 {
        padding: 0 10px;
        margin-left: 8.3333333333%;
        max-width: 8.3333333333%
    }

    .row > .col-mobile-2 {
        padding: 0 10px;
        flex-basis: 16.6666666667%;
        max-width: 16.6666666667%
    }

    .row > .col-mobile-offset-2 {
        padding: 0 10px;
        margin-left: 16.6666666667%;
        max-width: 16.6666666667%
    }

    .row > .col-mobile-3 {
        padding: 0 10px;
        flex-basis: 25%;
        max-width: 25%
    }

    .row > .col-mobile-offset-3 {
        padding: 0 10px;
        margin-left: 25%;
        max-width: 25%
    }

    .row > .col-mobile-4 {
        padding: 0 10px;
        flex-basis: 33.3333333333%;
        max-width: 33.3333333333%
    }

    .row > .col-mobile-offset-4 {
        padding: 0 10px;
        margin-left: 33.3333333333%;
        max-width: 33.3333333333%
    }

    .row > .col-mobile-5 {
        padding: 0 10px;
        flex-basis: 41.6666666667%;
        max-width: 41.6666666667%
    }

    .row > .col-mobile-offset-5 {
        padding: 0 10px;
        margin-left: 41.6666666667%;
        max-width: 41.6666666667%
    }

    .row > .col-mobile-6 {
        padding: 0 10px;
        flex-basis: 50%;
        max-width: 50%
    }

    .row > .col-mobile-offset-6 {
        padding: 0 10px;
        margin-left: 50%;
        max-width: 50%
    }

    .row > .col-mobile-7 {
        padding: 0 10px;
        flex-basis: 58.3333333333%;
        max-width: 58.3333333333%
    }

    .row > .col-mobile-offset-7 {
        padding: 0 10px;
        margin-left: 58.3333333333%;
        max-width: 58.3333333333%
    }

    .row > .col-mobile-8 {
        padding: 0 10px;
        flex-basis: 66.6666666667%;
        max-width: 66.6666666667%
    }

    .row > .col-mobile-offset-8 {
        padding: 0 10px;
        margin-left: 66.6666666667%;
        max-width: 66.6666666667%
    }

    .row > .col-mobile-9 {
        padding: 0 10px;
        flex-basis: 75%;
        max-width: 75%
    }

    .row > .col-mobile-offset-9 {
        padding: 0 10px;
        margin-left: 75%;
        max-width: 75%
    }

    .row > .col-mobile-10 {
        padding: 0 10px;
        flex-basis: 83.3333333333%;
        max-width: 83.3333333333%
    }

    .row > .col-mobile-offset-10 {
        padding: 0 10px;
        margin-left: 83.3333333333%;
        max-width: 83.3333333333%
    }

    .row > .col-mobile-11 {
        padding: 0 10px;
        flex-basis: 91.6666666667%;
        max-width: 91.6666666667%
    }

    .row > .col-mobile-offset-11 {
        padding: 0 10px;
        margin-left: 91.6666666667%;
        max-width: 91.6666666667%
    }

    .row > .col-mobile-12 {
        padding: 0 10px;
        flex-basis: 100%;
        max-width: 100%
    }

    .row > .col-mobile-offset-12 {
        padding: 0 10px;
        margin-left: 100%;
        max-width: 100%
    }
}

.wrapper {
    width: var(--width-desktop);
    transform-origin: top left;
    overflow-x: hidden;
    overflow-y: auto
}

@media (orientation: portrait) {
    .wrapper {
        width: var(--width-mobile)
    }
}

.container {
    display: block;
    margin: 0 auto;
    width: var(--width-desktop-safe);
    max-width: var(--maxwidth-desktop-safe)
}

@media (orientation: portrait) {
    .container {
        width: var(--width-mobile-safe)
    }
}

hr.split {
    margin: 0;
    border: 0;
    background: rgba(0, 0, 0, 0)
}

hr.split--low {
    height: 16px
}

hr.split--medium {
    height: 24px
}

hr.split--high {
    height: 32px
}

hr.split--giant {
    height: 48px
}

.section {
    position: relative;
    display: block;
    width: var(--width-desktop)
}

@media (max-width: 700px) {
    .section {
        width: var(--width-mobile)
    }
}

@media (orientation: portrait) {
    .section {
        width: var(--width-mobile)
    }
}

.section__background {
    display: block;
    width: 100%
}

.section__background img, .section__background video {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover
}

.section__background video {
    position: absolute;
    top: 0
}

.section__content {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px
}

.section.autoHeight .section__background {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0
}

.section.autoHeight .section__content {
    display: block;
    position: relative
}

.section--fixedHeight > .section__background {
    position: static;
    display: block;
    width: 100%;
    height: 100%
}

.section--fixedHeight > .section__background img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

@media (max-width: 700px) {
    .section--fixedHeight > .section__background img {
        height: auto
    }
}

@media (orientation: portrait) {
    .section--fixedHeight > .section__background img {
        height: auto
    }
}

.section--fixedHeight > .section__content {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px
}

.section__overlay {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, .8) 100%;
    background: linear-gradient(rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.8) 100%)
}

.desktop {
    display: block !important
}

.desktop-inline {
    display: inline-block !important
}

.desktop-flex {
    display: flex !important
}

.desktop-grid {
    display: grid !important
}

.mobile, .mobile-inline, .mobile-flex, .mobile-grid {
    display: none !important
}

@media (max-width: 700px) {
    .desktop, .desktop-inline, .desktop-flex, .desktop-grid {
        display: none !important
    }

    .mobile {
        display: block !important
    }

    .mobile-inline {
        display: inline-block !important
    }

    .mobile-flex {
        display: flex !important
    }

    .mobile-grid {
        display: grid !important
    }
}

@media (orientation: portrait) {
    .desktop, .desktop-inline, .desktop-flex, .desktop-grid {
        display: none !important
    }

    .mobile {
        display: block !important
    }

    .mobile-inline {
        display: inline-block !important
    }

    .mobile-flex {
        display: flex !important
    }

    .mobile-grid {
        display: grid !important
    }
}

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

.ml-auto {
    margin-left: auto
}

.mr-auto {
    margin-right: auto
}

.text-left {
    text-align: left;
    justify-content: flex-start !important
}

.text-center {
    text-align: center;
    justify-content: center !important
}

.text-right {
    text-align: right;
    justify-content: flex-end !important
}

.flex {
    display: flex
}

.flex-wrap {
    flex-wrap: wrap
}

.flex-column {
    flex-direction: column
}

.flex-start {
    justify-content: flex-start
}

.flex-between {
    justify-content: space-between
}

.flex-end {
    justify-content: flex-end
}

.flex-middle {
    align-items: center
}

.scrollwatch-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1px;
    height: 1px;
    background: rgba(0, 0, 0, 0);
    pointer-events: none
}

@-webkit-keyframes shine {
    100% {
        filter: brightness(120%)
    }
}

@keyframes shine {
    100% {
        filter: brightness(120%)
    }
}

@-webkit-keyframes shine_scale {
    100% {
        filter: brightness(90%);
        transform: scale(1.1);
        transform-origin: center center
    }
}

@keyframes shine_scale {
    100% {
        filter: brightness(90%);
        transform: scale(1.1);
        transform-origin: center center
    }
}

@-webkit-keyframes shine_move {
    100% {
        filter: brightness(110%);
        transform: translateX(12px)
    }
}

@keyframes shine_move {
    100% {
        filter: brightness(110%);
        transform: translateX(12px)
    }
}

.fancybox-active {
    height: 100% !important
}

.popup {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center
}

.popup__background, .popup__background--unclosable {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    background: rgba(0, 0, 0, .8);
    width: 100%;
    height: 100vh;
    transition: opacity 1s
}

.popup__content {
    opacity: 0;
    visibility: hidden;
    z-index: 2;
    transition: all .2s;
    transform: scale(0)
}

.popup__tool {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
    padding: 5px;
    display: flex;
    opacity: 0;
    visibility: hidden
}

.popup__close {
    pointer-events: all;
    background: #000;
    position: absolute;
    right: 0%;
    top: 0%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 42px;
    height: 42px
}

.popup.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all
}

.popup.active .popup__background, .popup.active .popup__background--unclosable {
    opacity: 1;
    visibility: visible
}

.popup.active .popup__content {
    opacity: 1;
    visibility: visible;
    transform: scale(1)
}

.popup.active .popup__tool {
    opacity: 1;
    visibility: visible
}

.popup--open-image .popup__content .image img {
    display: block;
    max-width: 100%;
    max-height: 100%
}

.popup--open-video .popup__content {
    width: 80%;
    height: 60%
}

.popup--open-video .popup__content .embed {
    width: 100%;
    height: 100%
}

.popup--open-video .popup__content .embed iframe {
    display: block;
    width: 100%;
    height: 100%
}

.wrapper {
    width: var(--width-desktop)
}

.wrapper__content, .wrapper__content .section {
    overflow-x: hidden;
    overflow-y: hidden;
    width: var(--width-desktop)
}

@media (orientation: portrait) {
    .wrapper__content, .wrapper__content .section {
        width: var(--width-mobile)
    }
}

.wrapper__content .inner {
    width: var(--width-desktop)
}

@media (orientation: portrait) {
    .wrapper__content .inner {
        width: var(--width-mobile)
    }
}

.wrapper__content .parallax, .wrapper__content .parallax__layer {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.subHeader .logo {
    background-size: 100%;
    width: 250px;
    height: 133px;
    position: absolute;
    top: 230px;
    left: calc(50% - 125px);
    font-size: 0
}

.subHeader .logo:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.title {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin: 0px auto 60px;
    padding-top: 50px
}

.title:before, .title:after {
    content: "";
    display: block
}

.title__content {
    margin: 0 16px;
    color: #e95819;
    font-weight: var(--fontweight-bold);
    font-size: 2.4em
}

.title img {
    margin-left: -104px
}

.overlay {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .8) 0%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%)
}

.empty {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    vertical-align: middle;
    color: #222;
    z-index: -1
}

.placeholder {
    font-size: 0
}

.panel {
    position: relative;
    display: block;
    z-index: 5;
    margin: 0 auto
}

@media (orientation: landscape) {
    .panel {
        width: 1195px
    }

    .panel__loop {
        position: relative
    }

    .panel__content {
        min-height: 2000px;
        padding-top: 50px
    }
}

.popup__close {
    position: absolute;
    right: 6px;
    top: -30px;
    display: block;
    width: 60px;
    height: 60px;
    background: #e9464a;
    border: 5px solid #b42d31;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.6)
}

@media (orientation: portrait) {
    .popup__close {
        right: -30px;
        top: -30px
    }
}

.popup__content__main a {
    display: block;
    position: relative;
    width: 650px;
    height: 400px
}

.popup__content__main a img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover
}

.wrapper__content .subContent, .wrapper__content .subContent .section__background, .wrapper__content .subContent .section__content, .wrapper__content .subContent .inner, .wrapper__content .subNews, .wrapper__content .subNews .section__background, .wrapper__content .subNews .section__content, .wrapper__content .subNews .inner, .wrapper__content .subSubweb, .wrapper__content .subSubweb .section__background, .wrapper__content .subSubweb .section__content, .wrapper__content .subSubweb .inner, .wrapper__content .subGallery, .wrapper__content .subGallery .section__background, .wrapper__content .subGallery .section__content, .wrapper__content .subGallery .inner, .wrapper__content .subSearchResult, .wrapper__content .subSearchResult .section__background, .wrapper__content .subSearchResult .section__content, .wrapper__content .subSearchResult .inner, .wrapper__content .subWiki, .wrapper__content .subWiki .section__background, .wrapper__content .subWiki .section__content, .wrapper__content .subWiki .inner, .wrapper__content .subContent, .wrapper__content .subContent .section__background, .wrapper__content .subContent .section__content, .wrapper__content .subContent .inner, .wrapper__content .subNews, .wrapper__content .subNews .section__background, .wrapper__content .subNews .section__content, .wrapper__content .subNews .inner, .wrapper__content .subSubweb, .wrapper__content .subSubweb .section__background, .wrapper__content .subSubweb .section__content, .wrapper__content .subSubweb .inner, .wrapper__content .subGallery, .wrapper__content .subGallery .section__background, .wrapper__content .subGallery .section__content, .wrapper__content .subGallery .inner, .wrapper__content .subSearchResult, .wrapper__content .subSearchResult .section__background, .wrapper__content .subSearchResult .section__content, .wrapper__content .subSearchResult .inner, .wrapper__content .subWiki, .wrapper__content .subWiki .section__background, .wrapper__content .subWiki .section__content, .wrapper__content .subWiki .inner {
    height: auto
}

.wrapper__content .subContent .section__background, .wrapper__content .subNews .section__background, .wrapper__content .subSubweb .section__background, .wrapper__content .subGallery .section__background, .wrapper__content .subSearchResult .section__background, .wrapper__content .subWiki .section__background, .wrapper__content .subContent .section__background, .wrapper__content .subNews .section__background, .wrapper__content .subSubweb .section__background, .wrapper__content .subGallery .section__background, .wrapper__content .subSearchResult .section__background, .wrapper__content .subWiki .section__background {
    position: absolute
}

.wrapper__content .subContent .section__content, .wrapper__content .subContent .inner, .wrapper__content .subNews .section__content, .wrapper__content .subNews .inner, .wrapper__content .subSubweb .section__content, .wrapper__content .subSubweb .inner, .wrapper__content .subGallery .section__content, .wrapper__content .subGallery .inner, .wrapper__content .subSearchResult .section__content, .wrapper__content .subSearchResult .inner, .wrapper__content .subWiki .section__content, .wrapper__content .subWiki .inner, .wrapper__content .subContent .section__content, .wrapper__content .subContent .inner, .wrapper__content .subNews .section__content, .wrapper__content .subNews .inner, .wrapper__content .subSubweb .section__content, .wrapper__content .subSubweb .inner, .wrapper__content .subGallery .section__content, .wrapper__content .subGallery .inner, .wrapper__content .subSearchResult .section__content, .wrapper__content .subSearchResult .inner, .wrapper__content .subWiki .section__content, .wrapper__content .subWiki .inner {
    position: relative
}

@media (orientation: landscape) {
    .wrapper__content .subContent, .wrapper__content .subNews, .wrapper__content .subSubweb, .wrapper__content .subGallery, .wrapper__content .subSearchResult, .wrapper__content .subWiki, .wrapper__content .subContent, .wrapper__content .subNews, .wrapper__content .subSubweb, .wrapper__content .subGallery, .wrapper__content .subSearchResult, .wrapper__content .subWiki {
        overflow: visible
    }
}

.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .92);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 999999;
    color: #fff;
    display: none;
    justify-content: center;
    align-items: center
}

.loading.active {
    display: flex
}

.loading .spinner {
    transform: scale(var(--ggs, 2))
}

.loading .spinner, .loading .spinner::after, .loading .spinner::before {
    box-sizing: border-box;
    position: relative;
    display: block;
    width: 20px;
    height: 20px
}

.loading .spinner::after, .loading .spinner::before {
    content: "";
    position: absolute;
    border-radius: 100px
}

.loading .spinner::before {
    -webkit-animation: spinner 1s cubic-bezier(0.6, 0, 0.4, 1) infinite;
    animation: spinner 1s cubic-bezier(0.6, 0, 0.4, 1) infinite;
    border: 3px solid rgba(0, 0, 0, 0);
    border-top-color: currentColor
}

.loading .spinner::after {
    border: 3px solid;
    opacity: .2
}

@-webkit-keyframes spinner {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(359deg)
    }
}

@keyframes spinner {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(359deg)
    }
}

.commonFooter {
    margin-top: -1px;
    font-family: Arial !important
}

.commonFooter, .commonFooter .section__background, .commonFooter .section__content, .commonFooter .inner {
    height: 260px
}

@media (orientation: portrait) {
    .commonFooter, .commonFooter .section__background, .commonFooter .section__content, .commonFooter .inner {
        height: 240px
    }
}

.commonFooter .inner--commonFooter {
    align-items: center;
    justify-content: center
}

@media (orientation: portrait) {
    .commonFooter .inner--commonFooter {
        flex-direction: column
    }
}

.commonFooter .inner--commonFooter .footer__icon {
    margin-top: 10px
}

@media (orientation: portrait) {
    .commonFooter .inner--commonFooter .footer__icon img {
        transform: scale(0.85)
    }
}

.commonFooter .inner--commonFooter .line__footer {
    margin-left: 30px;
    margin-right: 50px
}

@media (orientation: portrait) {
    .commonFooter .inner--commonFooter .footer {
        display: flex;
        flex-direction: column;
        align-items: center
    }
}

.commonFooter .inner--commonFooter .social {
    gap: 50px;
    align-items: center;
    margin-top: 20px
}

@media (orientation: portrait) {
    .commonFooter .inner--commonFooter .social {
        transform: scale(0.85)
    }
}

.commonFooter .inner--commonFooter .footer__copyright {
    margin-top: 30px;
    color: #a3a3a3
}

@media (orientation: portrait) {
    .commonFooter .inner--commonFooter .footer__copyright {
        text-align: center;
        font-size: 12px;
        line-height: 150%;
        color: #ffeed9;
        font-weight: lighter;
        margin-top: 10px
    }
}

body {
    background: #000
}

.homeError, .homeError .section__background, .homeError .section__content, .homeError .inner {
    height: 1000px
}

@media (orientation: portrait) {
    .homeError, .homeError .section__background, .homeError .section__content, .homeError .inner {
        height: 1200px
    }
}

.homeError .error_404 {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    height: 100%;
    height: 100vh
}

.homeError .error_404__logo {
    display: block;
    width: 459px;
    max-width: 80%;
    margin: 0 auto 40px
}

.homeError .error_404__big {
    display: block;
    width: 695px;
    max-width: 80%;
    margin: 0 auto 50px
}

.homeError .error_404__content {
    text-align: center
}

.homeError .error_404__content p {
    font-size: 20px;
    margin-bottom: 32px
}

.homeError .error_404__homepage {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin: 0 auto;
    width: 296px;
    height: 82px;
    background: url(assets/images/content/btn-404.webp) center top no-repeat;
    background-size: cover;
    background-position: center center;
    color: #fff3c0;
    font-size: 25px;
    line-height: 80px
}

.subSearchResult .search-results {
    padding: 180px 0 30px 0;
    max-width: 930px;
    margin: 0 auto
}

@media (orientation: portrait) {
    .subSearchResult .search-results {
        padding: 30px
    }
}

#cse.search-results b {
    font-weight: bold
}

#cse.search-results table {
    margin: 0px
}

#cse.search-results .gsc-adBlock, #cse.search-results .gsc-resultsHeader, #cse.search-results .gcsc-branding, #cse.search-results .gsc-url-top {
    display: none
}

#cse.search-results .gsc-control-cse .gs-spelling, #cse.search-results .gsc-control-cse .gs-result .gs-title, #cse.search-results .gsc-control-cse .gs-result .gs-title * {
    font-size: 18px;
    line-height: 1.4
}

@media (orientation: portrait) {
    #cse.search-results .gsc-control-cse .gs-spelling, #cse.search-results .gsc-control-cse .gs-result .gs-title, #cse.search-results .gsc-control-cse .gs-result .gs-title * {
        font-size: 24px
    }
}

#cse.search-results .gsc-control-cse, #cse.search-results .gsc-control-cse .gsc-table-result {
    font-size: 16px;
    line-height: 1.4
}

@media (orientation: portrait) {
    #cse.search-results .gsc-control-cse, #cse.search-results .gsc-control-cse .gsc-table-result {
        font-size: 20px
    }
}

#cse.search-results .gs-web-image-box .gs-image, #cse.search-results .gs-promotion-image-box .gs-promotion-image {
    max-width: 120px;
    max-height: 240px
}

@media (orientation: portrait) {
    #cse.search-results .gs-web-image-box .gs-image, #cse.search-results .gs-promotion-image-box .gs-promotion-image {
        max-width: 140px
    }
}

#cse.search-results .gs-snippet {
    width: 100%;
    padding-left: 130px
}

@media (orientation: portrait) {
    #cse.search-results .gs-snippet {
        padding-left: 160px
    }
}

#cse.search-results .gsc-result-info {
    font-size: 20px;
    color: #562815;
    font-weight: 600
}

@media (orientation: portrait) {
    #cse.search-results .gsc-result-info {
        font-size: 20px
    }
}

#cse.search-results .gsc-control-cse, #cse.search-results .gsc-control-cse-vi {
    background: none;
    border: none;
    padding: 0px
}

#cse.search-results .gsc-above-wrapper-area {
    border-bottom: none
}

#cse.search-results .gsc-webResult.gsc-result {
    border: none
}

#cse.search-results .gs-result .gs-title, #cse.search-results .gs-result .gs-title * {
    color: var(--color-gray-500);
    height: auto;
    font-weight: bold;
    text-decoration: none
}

#cse.search-results .gs-result .gs-title:hover, #cse.search-results .gs-result .gs-title:hover * {
    color: var(--color-info-600)
}

#cse.search-results .gsc-table-result tr {
    background: none
}

#cse.search-results .gsc-table-result td {
    border: none;
    padding: 0px
}

#cse.search-results .gsc-table-result, #cse.search-results .gsc-thumbnail-inside, #cse.search-results .gsc-url-top {
    padding-left: 0px;
    padding-right: 0px
}

#cse.search-results .gsc-expansionArea .gsc-webResult.gsc-result {
    background: rgba(0, 0, 0, 0);
    border-bottom: 2px solid #e3dbc2;
    margin-bottom: 20px;
    padding: 10px 0
}

#cse.search-results .gsc-results .gsc-cursor-box {
    display: flex;
    justify-content: center;
    margin: 10px 0px
}

#cse.search-results .gsc-results .gsc-cursor-box .gsc-cursor-page {
    color: #48453d;
    font-weight: 600;
    transition: all .2s cubic-bezier(0.42, 0, 0.58, 1);
    display: block;
    float: left;
    height: 25px;
    line-height: 28px;
    padding: 0 10px;
    border-radius: 4px;
    text-decoration: none
}

#cse.search-results .gsc-results .gsc-cursor-box .gsc-cursor-page.gsc-cursor-current-page {
    text-decoration: none;
    background: #bd723a;
    color: #f8dc8b
}

#cse.search-results .gcsc-find-more-on-google {
    display: none
}

.search {
    display: flex;
    align-items: center;
    align-content: center;
    position: relative;
    margin: 0 4px;
    height: 100%
}

@media (orientation: portrait) {
    .search {
        padding: 16px 0;
        justify-content: center;
        font-size: 32px
    }
}

.search__control {
    background: #fff;
    display: flex;
    align-items: center;
    align-content: center;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #ccc
}

@media (orientation: portrait) {
    .search__control {
        height: 64px
    }
}

.search__control--inline {
    padding: 0 0px 0 8px
}

.search__control--lightbox {
    padding: 0 0px 0 0px
}

.search__control input {
    border: none;
    background: none;
    font-size: .8em;
    border-right: 1px solid #ccc
}

.search__control button, .search__control a {
    display: flex;
    align-items: center;
    align-content: center;
    font-size: .8em;
    width: auto;
    padding: 0 8px;
    height: 32px;
    border: none;
    background: none;
    color: #111
}

.search__control button:focus, .search__control a:focus {
    outline: none
}

.homeHeader .overlay {
    background: rgba(0, 0, 0, .8) 10%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 10%, rgba(0, 0, 0, 0.4) 100%)
}

.homeHeader .appinfo {
    position: absolute;
    bottom: 150px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center
}

@media (orientation: portrait) {
    .homeHeader .appinfo {
        display: none
    }
}

.homeHeader .appinfo div {
    gap: 10px
}

.homeHeader .appinfo--htl div {
    align-items: center
}

.homeHeader .appinfo__content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    justify-content: space-between;
    padding: 10px
}

.homeHeader .appinfo__content .appinfo__button {
    gap: 15px
}

.homeHeader .appinfo__content .appinfo__left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px
}

.homeHeader .appinfo__content .appinfo__right {
    margin-top: -10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0
}

.homeHeader .appinfo__content .appinfo__right .right__topup {
    position: relative;
    gap: 0
}

.homeHeader .appinfo__content .appinfo__right .right__topup .appinfo__item--topup {
    margin-top: -52px;
    margin-left: -10px;
    gap: 15px
}

.homeHeader .appinfo__content .appinfo__apk a {
    margin-bottom: 1px !important
}

.homeHeader .appinfo__item--downappstore {
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -201px -354px;
    width: 163px;
    height: 49px;
    margin-bottom: 5px
}

.homeHeader .appinfo__item--downappstore:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.homeHeader .appinfo__item--downggplay {
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -366px -354px;
    width: 163px;
    height: 49px;
    margin-bottom: 5px
}

.homeHeader .appinfo__item--downggplay:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.homeHeader .appinfo__item--downapk {
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -531px -354px;
    width: 164px;
    height: 47px;
    margin-bottom: 5px
}

.homeHeader .appinfo__item--downapk:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.homeHeader .appinfo__item--code {
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: 0px -159px;
    width: 191px;
    height: 114px;
    margin-bottom: 5px
}

.homeHeader .appinfo__item--code:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.homeHeader .appinfo__item--icon {
    display: block;
    font-size: 0px;
    background-image: url(../images/main-logo.png);
    width: 103px;
    height: 103px;
    margin-bottom: 5px;
    background-size: cover;
    background-position: center;
}

.homeHeader .appinfo__item--icon:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.homeHeader .appinfo__item--qr {
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -205px -433px;
    width: 100px;
    height: 100px;
    margin-bottom: 5px
}

.homeHeader .appinfo__item--qr:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.homeHeader .appinfo__item--onelink {
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -307px -433px;
    width: 164px;
    height: 47px;
    margin-bottom: 5px
}

.homeHeader .appinfo__item--onelink:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.homeHeader .appinfo__item--ldplayer {
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -193px -239px;
    width: 48px;
    height: 33px;
    margin-bottom: 5px
}

.homeHeader .appinfo__item--ldplayer:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.homeHeader .appinfo__item--bluestacks {
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -243px -239px;
    width: 48px;
    height: 32px;
    margin-bottom: 5px
}

.homeHeader .appinfo__item--bluestacks:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.homeHeader .appinfo__item--noxplayer {
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -293px -239px;
    width: 48px;
    height: 32px;
    margin-bottom: 5px
}

.homeHeader .appinfo__item--noxplayer:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.homeHeader .appinfo__item--topup {
    width: 215px
}

.homeHeader .appinfo .bt-header {
    display: flex;
}

.homeHeader .appinfo .appinfo__bt__download {
    display: block;
    width: 171px;
    height: 171px;
    cursor: pointer;
    background-image: url(../images/main/bt-download.png);
}

.homeHeader .appinfo .appinfo__bt__download:hover {
    background-image: url(../images/main/bt-download-hover.png);
}


.homeHeader .appinfo .appinfo__bt__news {
    display: block;
    width: 171px;
    height: 171px;
    cursor: pointer;
    background-image: url(../images/main/bt-news.png);
}

.homeHeader .appinfo .appinfo__bt__news:hover {
    background-image: url(../images/main/bt-news-hover.png);
}

.homeHeader .appinfo .appinfo__bt__topup {
    display: block;
    width: 171px;
    height: 171px;
    cursor: pointer;
    background-image: url(../images/main/bt-topup.png);
}

.homeHeader .appinfo .appinfo__bt__topup:hover {
    background-image: url(../images/main/bt-topup-hover.png);
}

.homeHeader, .homeHeader .section__background, .homeHeader .section__content, .homeHeader .inner {
    height: 1000px;
    position: relative
}

.homeHeader .play__btn, .homeHeader .section__background .play__btn, .homeHeader .section__content .play__btn, .homeHeader .inner .play__btn {
    position: absolute;
    top: calc(55% - 30px);
    left: calc(55% + 50px);
    width: 85px
}

.homeHeader .play__btn:not(.off):hover, .homeHeader .section__background .play__btn:not(.off):hover, .homeHeader .section__content .play__btn:not(.off):hover, .homeHeader .inner .play__btn:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

@media (orientation: portrait) {
    .homeHeader .play__btn, .homeHeader .section__background .play__btn, .homeHeader .section__content .play__btn, .homeHeader .inner .play__btn {
        top: calc(45% - 30px);
        left: calc(57% - 15px);
        width: 70px
    }
}

@media (orientation: portrait) {
    .homeHeader, .homeHeader .section__background, .homeHeader .section__content, .homeHeader .inner {
        height: 1125px
    }
}

@media (orientation: portrait) {
    .homeHeader--frame1, .homeHeader--frame1 .section__background, .homeHeader--frame1 .section__content, .homeHeader--frame1 .inner {
        height: 1122px
    }
}

.homeHeader .overlay {
    background: rgba(0, 0, 0, .8) 10%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 10%, rgba(0, 0, 0, 0.4) 100%)
}

.homeHeader .trailer {
    position: absolute;
    top: 300px;
    left: calc(50% - 43.5px);
    -webkit-animation: blinkblink .5s linear alternate infinite;
    animation: blinkblink .5s linear alternate infinite
}

@-webkit-keyframes blinkblink {
    0% {
        transform: scale3d(1, 1, 1);
        filter: brightness(1)
    }
    40% {
        transform: scale3d(1.05, 1.05, 1);
        filter: brightness(1.1)
    }
    100% {
        transform: scale3d(1.1, 1.1, 1);
        filter: brightness(1.2)
    }
}

@keyframes blinkblink {
    0% {
        transform: scale3d(1, 1, 1);
        filter: brightness(1)
    }
    40% {
        transform: scale3d(1.05, 1.05, 1);
        filter: brightness(1.1)
    }
    100% {
        transform: scale3d(1.1, 1.1, 1);
        filter: brightness(1.2)
    }
}

@media (orientation: portrait) {
    .homeHeader .trailer {
        top: 812px;
        left: calc(50% - 43.5px);
        -webkit-animation: blinkblinkmobile .5s linear alternate infinite;
        animation: blinkblinkmobile .5s linear alternate infinite
    }

    @-webkit-keyframes blinkblinkmobile {
        0% {
            transform: scale3d(1.4, 1.4, 1);
            filter: brightness(1)
        }
        40% {
            transform: scale3d(1.45, 1.45, 1);
            filter: brightness(1.1)
        }
        100% {
            transform: scale3d(1.5, 1.5, 1);
            filter: brightness(1.2)
        }
    }@keyframes blinkblinkmobile {
         0% {
             transform: scale3d(1.4, 1.4, 1);
             filter: brightness(1)
         }
         40% {
             transform: scale3d(1.45, 1.45, 1);
             filter: brightness(1.1)
         }
         100% {
             transform: scale3d(1.5, 1.5, 1);
             filter: brightness(1.2)
         }
     }
}

.homeHeader .logo {
    background-image: url(assets/images/content/box-18.webp);
    background-size: 100%;
    width: 200px;
    height: 110px;
    position: absolute;
    top: 100px;
    right: 25px;
    font-size: 0
}

@media (orientation: portrait) {
    .homeHeader .logo {
        left: calc(50% - 160px)
    }
}

.homeHeader .icon__home {
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translateX(-50%)
}

.homeHeader .icon__home:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.homeHeader .scroll-down {
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: 0px -433px;
    width: 98px;
    height: 131px;
    position: absolute;
    bottom: -10px;
    left: calc(50% - 57px)
}

@media (orientation: portrait) {
    .homeHeader .scroll-down {
        bottom: 200px
    }
}

.homeInfo {
    margin-top: -100px
}

@media (orientation: portrait) {
    .homeInfo {
        margin-top: -290px
    }
}

.homeInfo, .homeInfo .section__background, .homeInfo .section__content, .homeInfo .inner {
    height: 1300px
}

@media (orientation: portrait) {
    .homeInfo, .homeInfo .section__background, .homeInfo .section__content, .homeInfo .inner {
        height: 1520px
    }
}

.homeInfo .inner.inner--homeInfo {
    margin-top: 370px
}

@media (orientation: portrait) {
    .homeInfo .inner.inner--homeInfo {
        margin-top: 350px
    }
}

@media (orientation: portrait) {
    .homeInfo .title img {
        margin-left: 38px
    }
}

.homeInfo .list-info {
    margin: 0 auto;
    width: 770px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media (orientation: portrait) {
    .homeInfo .list-info {
        justify-content: center;
        gap: 40px
    }
}

.homeInfo .list-info img:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

@media (orientation: portrait) {
    .homeInfo .list-info img {
        height: 20px
    }
}

.homeInfo .banner {
    width: 650px;
    height: 330px;
    position: absolute;
    top: 50%;
    left: 22%;
    z-index: 3;
    transform: translateY(-40%);
    z-index: 3
}

@media (orientation: portrait) {
    .homeInfo .banner {
        width: 620px;
        height: 310px;
        left: calc(50% - 315px);
        top: 36.5%
    }
}

.homeInfo .banner_list {
    height: 370px
}

@media (orientation: portrait) {
    .homeInfo .banner_list {
        height: 340px
    }
}

.homeInfo .banner_fraction {
    width: 550px;
    height: 100px;
    position: absolute;
    bottom: 0;
    pointer-events: none
}

@media (orientation: portrait) {
    .homeInfo .banner_fraction {
        width: 768px
    }
}

.homeInfo .banner_item {
    position: relative;
    width: 650px;
    height: 330px
}

@media (orientation: portrait) {
    .homeInfo .banner_item {
        width: 620px;
        height: 310px
    }
}

.homeInfo .banner_item a, .homeInfo .banner_item img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.homeInfo .banner .swiper-fraction {
    position: absolute;
    font-size: 0;
    width: 200px;
    left: 20px;
    bottom: 10px;
    z-index: 5
}

.homeInfo .banner .swiper-fraction .swiper-pagination-current {
    position: relative;
    color: #e0f5fd;
    font-size: 72px;
    font-weight: var(--fontweight-medium);
    padding-right: 20px;
    text-shadow: 2px 0 0 rgba(54, 74, 140, .4), -2px 0 0 rgba(54, 74, 140, .4), 0 2px 0 rgba(54, 74, 140, .4), 0 -2px 0 rgba(54, 74, 140, .4), 2px 2px 0 rgba(54, 74, 140, .4), -2px -2px 0 rgba(54, 74, 140, .4), -2px 2px 0 rgba(54, 74, 140, .4), 2px -2px 0 rgba(54, 74, 140, .4), 1px 1px 0 rgba(54, 74, 140, .4), -1px -1px 0 rgba(54, 74, 140, .4), 1px -1px 0 rgba(54, 74, 140, .4), -1px 1px 0 rgba(54, 74, 140, .4)
}

.homeInfo .banner .swiper-fraction .swiper-pagination-current:after {
    content: "";
    width: 1px;
    height: 80px;
    background: #98aee3;
    display: block;
    transform: rotate(20deg);
    position: absolute;
    right: 5px;
    bottom: 0px
}

.homeInfo .banner .swiper-fraction .swiper-pagination-total {
    color: #abd4e3;
    font-size: 32px;
    font-weight: var(--fontweight-medium)
}

.homeInfo .banner .swiper-pagination--blockHomeBannerSwiper {
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    bottom: 0
}

.homeInfo .banner .swiper-pagination--blockHomeBannerSwiper .swiper-pagination-bullet {
    width: 19px;
    background-color: rgba(0, 0, 0, 0);
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -684px -95px;
    width: 19px;
    height: 19px;
    opacity: 1;
    border-radius: 0;
    margin: 0 16px
}

.homeInfo .banner .swiper-pagination--blockHomeBannerSwiper .swiper-pagination-bullet-active {
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -684px -74px;
    width: 19px;
    height: 19px
}

.homeInfo .news {
    width: 450px;
    height: 490px;
    z-index: 2
}

@media (orientation: portrait) {
    .homeInfo .news {
        width: 670px;
        height: 600px;
        position: absolute;
        top: 800px;
        left: calc(50% - 335px)
    }
}

@media (orientation: landscape) {
    .homeInfo .news {
        position: absolute;
        top: 40%;
        left: 55%
    }
}

.homeInfo .news_tab {
    display: flex;
    justify-content: left;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #ede5c9
}

@media (orientation: portrait) {
    .homeInfo .news_tab {
        margin: 0 0px 10px 0
    }
}

.homeInfo .news_tab .tab {
    display: flex;
    justify-content: flex-start
}

@media (orientation: portrait) {
    .homeInfo .news_tab .tab {
        justify-content: space-between
    }
}

.homeInfo .news_tab .tab li:not(:last-child) {
    margin-right: 12px
}

.homeInfo .news_tab .tab__item {
    display: block;
    position: relative;
    padding: 4px 15px;
    color: #979797;
    font-size: 20px;
    border-bottom: 4px rgba(0, 0, 0, 0);
    font-weight: var(--fontweight-semibold);
    z-index: 3
}

@media (orientation: portrait) {
    .homeInfo .news_tab .tab__item {
        font-size: 24px;
        padding: 18px 12px
    }
}

.homeInfo .news_tab .tab__item:hover {
    color: #ede5c9
}

@media (orientation: portrait) {
    .homeInfo .news_tab .tab__item:hover {
        font-size: 24px
    }
}

.homeInfo .news_tab .tab__item.active, .homeInfo .news_tab .tab__item.active:hover {
    color: #ede5c9;
    border-bottom: 4px solid #ede5c9
}

@media (orientation: portrait) {
    .homeInfo .news_tab .tab__item.active, .homeInfo .news_tab .tab__item.active:hover {
        font-size: 24px
    }
}

.homeInfo .news_tab .viewall {
    margin-top: 10px
}

.homeInfo .news_tab .viewall:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.homeInfo .news_list {
    position: relative;
    margin: 0 auto 12px;
    min-height: 305px
}

@media (orientation: portrait) {
    .homeInfo .news_list {
        width: 100%;
        margin-bottom: -10px
    }
}

.homeInfo .news_list li {
    margin-bottom: 10px;
    border-bottom: 1px solid #d1c6a0
}

@media (orientation: portrait) {
    .homeInfo .news_list li {
        background-image: url(../images/main/bg-info-news.webp);
        background-repeat: no-repeat;
        margin-bottom: 0
    }
}

.homeInfo .news_list li:last-child {
    margin-bottom: 0
}

.homeInfo .news_list li img {
    opacity: 1;
    margin-right: 5px
}

.homeInfo .news_list li:not(:last-child) {
    width: 100%
}

.homeInfo .news_list li:first-child .news_item__title {
    display: flex;
    align-items: center;
    font-weight: bold;
}

.homeInfo .news_item {
    position: relative;
    z-index: 3;
    display: flex;
    padding: 0 30px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    transition: background-color .2s cubic-bezier(0.42, 0, 0.58, 1);
    border-bottom: 1px solid #373737
}

@media (orientation: portrait) {
    .homeInfo .news_item {
        justify-content: flex-start;
        height: 70px
    }
}

.homeInfo .news_item__title {
    color: #8b5131;
    font-size: 16px;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    transition: color .2s cubic-bezier(0.42, 0, 0.58, 1);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (orientation: portrait) {
    .homeInfo .news_item__title {
        font-size: 24px;
        height: 53px;
        display: flex;
        line-height: 53px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        order: 2;
    }
}

.homeInfo .news_item__title:hover {
    filter: brightness(1.25)
}

.homeInfo .news_item__title .news_item__icon {
    flex: 0 0 auto;
}

.homeInfo .news_item__title .news_item__content {
    flex: 1 1 auto; /* Grow to take remaining space */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.homeInfo .news_item__time {
    font-size: 16px;
    flex: 0 0 auto; /* Do not grow or shrink */
    margin-left: 10px; /* Optional: add some space between text and time */
}

@media (orientation: portrait) {
    .homeInfo .news_item__time {
        font-size: 24px
    }
}

.homeInfo .news_item__cate {
    font-size: 24px;
    color: #192750;
    font-weight: var(--fontweight-medium);
    border-bottom: 1px solid #7ebce9;
    width: 200px;
    height: 40px
}

@media (orientation: landscape) {
    .homeInfo .news_item__cate {
        width: 180px;
        margin-right: auto;
        margin-left: 55px
    }
}

@media (orientation: portrait) {
    .homeInfo .news_item__cate {
        display: none
    }
}

.homeInfo .news__viewall {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    vertical-align: middle
}

.homeInfo .news__viewall:hover {
    filter: brightness(110%)
}

.fancybox-active {
    height: auto !important
}

@media (orientation: portrait) {
    .fancybox-slide--iframe {
        padding: 0
    }
}

.fancybox-slide--iframe .fancybox-content {
    width: 106.6666666667vh;
    height: 80vh;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0);
    background-repeat: no-repeat;
    background-position: calc(50% - 0px) center
}

@media (orientation: portrait) {
    .fancybox-slide--iframe .fancybox-content {
        width: 80vw;
        height: 135.8904109589vw;
        background-size: 100% 100%;
        background-position: calc(50% - 0px) center
    }
}

.fancybox-slide--iframe .fancybox-content iframe {
    padding: 4% 8% 4% 8%
}

@media (orientation: portrait) {
    .fancybox-slide--iframe .fancybox-content iframe {
        padding: 9% 5% 8% 0%
    }
}

.fancybox-slide--iframe .fancybox-content .fancybox-button--close {
    width: 3vw;
    height: 3vw;
    background: rgba(0, 0, 0, 0);
    position: absolute;
    right: -2px;
    padding: 0;
    top: 2px
}

.fancybox-slide--iframe .fancybox-content .fancybox-button--close img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.fancybox-slide--iframe .fancybox-content .fancybox-button--close:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

@media (orientation: portrait) {
    .fancybox-slide--iframe .fancybox-content .fancybox-button--close {
        width: 4vh;
        height: 4vh;
        background: rgba(0, 0, 0, 0);
        position: absolute;
        right: -1px;
        padding: 0;
        top: 1px
    }
}

.info-usage-buttons {
    display: flex;
    position: absolute;
    width: 1200px;
    align-items: center;
    bottom: 235px;
    left: calc(50% - 600px);
    justify-content: center;
    z-index: 999999
}

.info-usage-buttons .bt-info-01 {
    background: url(../images/main/content/btn-info-1.webp) no-repeat center 0/cover;
    transition: all .25s linear
}

.info-usage-buttons .bt-info-01:hover {
    background: url(..//images/content/btn-info-1-hover.webp) no-repeat center 0/cover
}

.info-usage-buttons .bt-info-02 {
    background: url(../images/main/content/btn-info-2.webp) no-repeat center 0/cover;
    transition: all .25s linear
}

.info-usage-buttons .bt-info-02:hover {
    background: url(../images/main/content/btn-info-2-hover.webp) no-repeat center 0/cover
}

.info-usage-buttons .bt-info-03 {
    background: url(../images/main/content/btn-info-3.webp) no-repeat center 0/cover;
    transition: all .25s linear
}

.info-usage-buttons .bt-info-03:hover {
    background: url(../images/main/content/btn-info-3-hover.webp) no-repeat center 0/cover
}

.info-usage-buttons .bt-info-04 {
    background: url(../images/main/content/btn-info-4.webp) no-repeat center 0/cover;
    transition: all .25s linear
}

.info-usage-buttons .bt-info-04:hover {
    background: url(../images/main/content/btn-info-4-hover.webp) no-repeat center 0/cover
}

@media (orientation: portrait) {
    .info-usage-buttons .bt-info-04 .bt-info-01, .info-usage-buttons .bt-info-04 .bt-info-02, .info-usage-buttons .bt-info-04 .bt-info-03, .info-usage-buttons .bt-info-04 .bt-info-04 {
        background-size: contain !important
    }
}

.info-usage-buttons a {
    width: 280px;
    height: 100px;
    font-size: 0;
    display: block;
    margin: 0 15px 0
}

.info-usage-buttons a:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

@media (orientation: portrait) {
    .info-usage-buttons a {
        margin: 0
    }
}

@media (orientation: portrait) {
    .info-usage-buttons {
        top: 1150px;
        width: 100%;
        flex-wrap: wrap;
        left: 0px;
        gap: 10px
    }

    .info-usage-buttons a {
        width: 330px;
        height: 125px
    }
}

.list-info_tab__item.active {
    position: relative
}

.list-info_tab__item.active:after {
    content: "";
    display: block;
    left: -10%;
    width: 120%;
    position: absolute;
    background: #ac5628;
    height: 5px;
    border-radius: 8px
}

.homeRank {
    margin-top: -1px
}

.homeRank, .homeRank .section__background, .homeRank .section__content, .homeRank .inner {
    height: 1000px
}

@media (orientation: portrait) {
    .homeRank, .homeRank .section__background, .homeRank .section__content, .homeRank .inner {
        height: 1130px
    }
}

.homeRank .title {
    padding-top: 20px
}

.homeRank .rank {
    display: block;
    width: 100%
}

@media (orientation: portrait) {
    .homeRank .rank {
        width: 100%;
        left: 0;
        bottom: 0
    }
}

.homeRank .rank_filter {
    display: flex;
    justify-content: center;
    margin: 255px auto 0
}

@media (orientation: portrait) {
    .homeRank .rank_filter {
        margin: 250px auto 0
    }
}

.homeRank .rank_filter select {
    width: 240px;
    height: 40px;
    margin: 0 10px;
    padding: 0 30px 0 30px;
    border: none;
    color: #9e9e9e;
    background: #35353c url(assets/images/content/select-dropdown.webp);
    background-position: calc(100% - 15px) calc(50% + 2px);
    background-repeat: no-repeat
}

@media (orientation: portrait) {
    .homeRank .rank_filter select {
        font-size: 24px;
        height: 60px
    }
}

.homeRank .rank_tab {
    position: absolute;
    top: 320px;
    width: 1200px;
    left: calc(50% - 600px);
    display: flex;
    justify-content: center
}

@media (orientation: portrait) {
    .homeRank .rank_tab {
        top: 330px;
        width: 740px;
        padding: 0;
        left: 14px;
        overflow-x: auto;
        justify-content: flex-start
    }
}

.homeRank .rank_tab__item {
    font-size: 24px;
    color: #fee492;
    font-weight: var(--fontweight-bold);
    padding: 10px 12px;
    width: 600px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase
}

.homeRank .rank_tab__item:not(.active):hover {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    vertical-align: middle;
    color: #732303
}

.homeRank .rank_tab__item.active {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    vertical-align: middle;
    color: #732303
}

.homeRank .rank_result {
    width: 1200px;
    height: 580px;
    position: absolute;
    top: 390px;
    left: calc(50% - 600px);
    padding: 20px 40px;
    background: url(assets/images/content/bg-ranking.webp) no-repeat
}

@media (orientation: portrait) {
    .homeRank .rank_result {
        top: 400px;
        left: 14px;
        width: 740px;
        padding: 20px 30px;
        background: url(assets/images/content/mb-bg-ranking.webp) no-repeat
    }
}

.homeRank .rank_result__head {
    width: 100%;
    display: flex
}

.homeRank .rank_result__head li {
    font-weight: bold;
    font-size: 22px;
    color: #424242;
    height: 70px;
    text-transform: uppercase
}

@media (orientation: portrait) {
    .homeRank .rank_result__head li {
        font-size: 22px
    }
}

.homeRank .rank_result__body {
    margin: 0 0 15px
}

.homeRank .rank_result__body.hide {
    display: none
}

.homeRank .rank_result__body li {
    display: flex;
    transition: background-color .2s cubic-bezier(0.42, 0, 0.58, 1)
}

.homeRank .rank_result__body li:nth-child(odd) {
    background: #f1ead1
}

.homeRank .rank_result__body li span {
    font-weight: var(--fontweight-semibold);
    font-size: 20px;
    color: #424242;
    height: 40px
}

@media (orientation: portrait) {
    .homeRank .rank_result__body li span {
        font-size: 20px
    }
}

.homeRank .rank_result__head > li, .homeRank .rank_result__body > li > span {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center
}

.homeRank .rank_result__head > li:nth-child(1), .homeRank .rank_result__body > li > span:nth-child(1) {
    width: 10%
}

@media (orientation: portrait) {
    .homeRank .rank_result__head > li:nth-child(1), .homeRank .rank_result__body > li > span:nth-child(1) {
        width: 15%
    }
}

.homeRank .rank_result__head > li:nth-child(2), .homeRank .rank_result__body > li > span:nth-child(2) {
    width: 30%
}

@media (orientation: portrait) {
    .homeRank .rank_result__head > li:nth-child(2), .homeRank .rank_result__body > li > span:nth-child(2) {
        width: 25%
    }
}

.homeRank .rank_result__head > li:nth-child(3), .homeRank .rank_result__body > li > span:nth-child(3) {
    width: 15%
}

@media (orientation: portrait) {
    .homeRank .rank_result__head > li:nth-child(3), .homeRank .rank_result__body > li > span:nth-child(3) {
        width: 20%
    }
}

.homeRank .rank_result__head > li:nth-child(4), .homeRank .rank_result__body > li > span:nth-child(4) {
    width: 20%
}

@media (orientation: portrait) {
    .homeRank .rank_result__head > li:nth-child(4), .homeRank .rank_result__body > li > span:nth-child(4) {
        width: 15%
    }
}

.homeRank .rank_result__head > li:nth-child(5), .homeRank .rank_result__body > li > span:nth-child(5) {
    width: 25%
}

@media (orientation: portrait) {
    .homeRank .rank_result__head > li:nth-child(5), .homeRank .rank_result__body > li > span:nth-child(5) {
        width: 25%
    }
}

.homeRank .rank_result__foot .pagination {
    display: flex;
    justify-content: center
}

.homeRank .rank_result__foot .pagination li {
    margin: 0 15px
}

@media (orientation: portrait) {
    .homeRank .rank_result__foot .pagination li {
        margin: 0 5px
    }
}

.homeRank .rank_result__foot .pagination li.disabled {
    opacity: .5;
    pointer-events: none
}

.homeRank .rank_result__foot .pagination li.hide {
    display: none
}

.homeRank .rank_result__foot .pagination li a {
    width: 40px;
    height: 40px;
    font-weight: var(--fontweight-bold);
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    vertical-align: middle;
    background: #efe8cc;
    color: #9e9e9e;
    transition: all .2s cubic-bezier(0.42, 0, 0.58, 1)
}

.homeRank .rank_result__foot .pagination li a:not(.active):hover {
    background: rgba(185, 157, 88, .2);
    color: #b99d58
}

.homeRank .rank_result__foot .pagination li.active a {
    background: #b99d58;
    color: #f6f6f6
}

@font-face {
    font-family: myFontChar;
    src: url(assets/fonts/SVN-DHFDexsarBrush.otf)
}

.homeChar {
    margin-top: -500px
}

@media (orientation: portrait) {
    .homeChar {
        margin-top: -285px
    }
}

.homeChar, .homeChar .section__background, .homeChar .section__content, .homeChar .inner {
    height: 1560px
}

@media (orientation: portrait) {
    .homeChar, .homeChar .section__background, .homeChar .section__content, .homeChar .inner {
        height: 1360px
    }
}

@media (orientation: landscape) {
    .homeChar ::-webkit-scrollbar {
        width: 8px
    }

    .homeChar ::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, .5)
    }

    .homeChar ::-webkit-scrollbar-thumb {
        background: #666
    }

    .homeChar ::-webkit-scrollbar-thumb:hover {
        background: #999
    }
}

.homeChar #blockHomeCharSwiper {
    text-align: center
}

.homeChar .characters {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    top: 650px
}

@media (orientation: portrait) {
    .homeChar .characters {
        top: 290px
    }
}

.homeChar .characters .char__slide {
    position: relative;
    height: 800px
}

@media (orientation: portrait) {
    .homeChar .characters .char__slide {
        height: 1100px
    }
}

.homeChar .characters .char__slide .block__content {
    position: relative
}

.homeChar .characters .char__slide .block__content--one, .homeChar .characters .char__slide .block__content--two {
    position: absolute;
    font-size: 11px;
    word-break: break-word;
    text-transform: uppercase;
    color: #fff;
    width: 48px;
    z-index: 9999;
    font-weight: lighter
}

@media (orientation: portrait) {
    .homeChar .characters .char__slide .block__content--one, .homeChar .characters .char__slide .block__content--two {
        font-size: 8px;
        width: 32px
    }
}

.homeChar .characters .char__slide .block__content--one {
    top: 16%;
    left: 20.5%
}

@media (orientation: portrait) {
    .homeChar .characters .char__slide .block__content--one {
        top: 24%
    }
}

.homeChar .characters .char__slide .block__content--two {
    top: 28%;
    left: 23.25%
}

@media (orientation: portrait) {
    .homeChar .characters .char__slide .block__content--two {
        top: 30%;
        left: 25.5%
    }
}

.homeChar .characters .char__slide .block__content--three {
    position: absolute;
    word-break: break-word;
    top: 56%;
    left: 20%;
    width: 279px;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #75300b
}

@media (orientation: portrait) {
    .homeChar .characters .char__slide .block__content--three {
        top: 22%;
        left: 50%;
        font-size: 12px
    }
}

.homeChar .characters .char__slide--bg {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@media (orientation: portrait) {
    .homeChar .characters .char__slide--bg {
        width: 80%
    }
}

.homeChar .characters .char__slide--char {
    position: absolute;
    top: 46%;
    left: 50.5%;
    transform: translate(-50%, -50%);
    z-index: 9999
}

@media (orientation: portrait) {
    .homeChar .characters .char__slide--char {
        width: 80%;
        top: 45%;
        left: 50%
    }
}

.homeChar .characters .char__slide video, .homeChar .characters .char__slide .imgmobile {
    width: 650px;
    -o-object-fit: cover;
    object-fit: cover;
    height: 278px;
    position: absolute;
    top: 70.5%;
    left: 68%;
    transform: translate(-50%, -50%);
    clip-path: polygon(0% 1%, 77% 0%, 99% 100%, 22% 100%);
    -webkit-clip-path: polygon(0% 1%, 77% 0%, 99% 100%, 22% 100%)
}

@media (orientation: portrait) {
    .homeChar .characters .char__slide video, .homeChar .characters .char__slide .imgmobile {
        width: 390px;
        height: 165px;
        top: 67.5%;
        left: 64%
    }
}

.homeChar .characters .char__slide a.imgmobile {
    display: none
}

@media (orientation: portrait) {
    .homeChar .characters .char__slide a.imgmobile {
        width: 390px;
        height: 165px;
        top: 67.5%;
        left: 64%;
        z-index: 10000;
        display: block
    }

    .homeChar .characters .char__slide a.imgmobile .imgplay {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 40%;
        left: 45%;
        z-index: 10
    }
}

.homeChar .characters .swiper-button-prev {
    left: 39.5%;
    top: 80px;
    z-index: 999999;
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -528px -433px;
    width: 53px;
    height: 47px;
    opacity: 1
}

.homeChar .characters .swiper-button-prev:hover {
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -528px -433px;
    width: 53px;
    height: 47px;
    opacity: 1
}

.homeChar .characters .swiper-button-prev:after {
    content: none
}

@media (orientation: portrait) {
    .homeChar .characters .swiper-button-prev {
        left: 65px;
        top: unset;
        bottom: 430px
    }
}

.homeChar .characters .swiper-button-next {
    top: 80px;
    right: 23.5%;
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -473px -433px;
    width: 53px;
    height: 47px;
    z-index: 999999
}

.homeChar .characters .swiper-button-next:hover {
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -473px -433px;
    width: 53px;
    height: 47px;
    opacity: 1
}

.homeChar .characters .swiper-button-next:after {
    content: none
}

@media (orientation: portrait) {
    .homeChar .characters .swiper-button-next {
        right: 65px;
        top: unset;
        bottom: 430px
    }
}

.homeChar .char-thumb_list {
    position: absolute;
    top: 40px;
    right: 525px;
    width: 650px
}

@media (orientation: portrait) {
    .homeChar .char-thumb_list {
        bottom: 410px;
        top: unset;
        right: unset;
        left: 50%;
        transform: translateX(-50%);
        width: 530px
    }
}

.homeChar .char-thumb_list .char-thumb_item {
    display: flex;
    justify-content: flex-end
}

@media (orientation: portrait) {
    .homeChar .char-thumb_list .char-thumb_item {
        margin-right: unset !important
    }
}

.homeChar .char-thumb_list .char-thumb_item-active {
    display: none
}

.homeChar .char-thumb_list .swiper-slide-thumb-active .char-thumb_item-active {
    display: block
}

.homeChar .char-thumb_list .swiper-slide-thumb-active .char-thumb_item-normal {
    display: none
}

.homeChar .active {
    opacity: 1 !important;
    z-index: 3
}

@-webkit-keyframes animRota {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(359deg)
    }
}

@keyframes animRota {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(359deg)
    }
}

.homeFeature {
    margin-top: -490px
}

@media (orientation: portrait) {
    .homeFeature {
        margin-top: -155px
    }
}

.homeFeature, .homeFeature .section__background, .homeFeature .section__content, .homeFeature .inner {
    height: 1300px
}

@media (orientation: portrait) {
    .homeFeature, .homeFeature .section__background, .homeFeature .section__content, .homeFeature .inner {
        height: 820px
    }
}

.homeFeature .title {
    margin: 0 auto 20px
}

@media (orientation: portrait) {
    .homeFeature .title {
        margin: 0 auto 70px
    }

    .homeFeature .title img {
        margin-left: -5px
    }
}

.homeFeature .feature {
    position: relative;
    margin: 535px auto 0;
    width: 1400px;
    height: 700px
}

@media (orientation: portrait) {
    .homeFeature .feature {
        width: 720px;
        height: 285px;
        margin-top: 500px
    }
}

.homeFeature .feature_list {
    position: absolute;
    top: 130px;
    left: 0;
    right: 0;
    bottom: 0
}

@media (orientation: portrait) {
    .homeFeature .feature_list {
        top: -135px
    }
}

.homeFeature .feature_slide {
    width: 1000px !important;
    height: 440px;
    margin: 0 auto
}

@media (orientation: portrait) {
    .homeFeature .feature_slide {
        width: 630px !important;
        height: 362px
    }
}

.homeFeature .feature_slide.swiper-slide-active .feature_item {
    padding: 10px
}

.homeFeature .feature_item {
    display: block;
    width: 1000px;
    height: 440px;
    transition: background .4s cubic-bezier(0.42, 0, 0.58, 1)
}

@media (orientation: portrait) {
    .homeFeature .feature_item {
        width: 630px;
        height: 362px
    }
}

.homeFeature .feature_item__thumbnail {
    display: block;
    position: relative;
    width: 930px;
    height: 475px;
    overflow: hidden
}

@media (orientation: portrait) {
    .homeFeature .feature_item__thumbnail {
        width: 635px;
        height: 325px
    }
}

.homeFeature .feature_item__thumbnail img {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    font-size: 0
}

.homeFeature .feature_item__thumbnail .thumnail--swiper {
    width: 86.5%;
    height: 84%;
    top: 47.5%;
    left: 50.25%;
    -webkit-clip-path: polygon(0% 4%, 1% 4%, 2% 0%, 97.75% 0%, 99% 4%, 100% 4.5%, 100% 96.5%, 99% 97%, 98% 100%, 2% 100%, 0% 95%, 0% 100%);
    clip-path: polygon(0% 4%, 1% 4%, 2% 0%, 97.75% 0%, 99% 4%, 100% 4.5%, 100% 96.5%, 99% 97%, 98% 100%, 2% 100%, 0% 95%, 0% 100%)
}

.homeFeature .feature .swiper-3d .swiper-slide-shadow-left {
    background-color: rgba(98, 210, 219, .66)
}

.homeFeature .feature .swiper-3d .swiper-slide-shadow-right {
    background-color: rgba(98, 210, 219, .66)
}

.homeFeature .feature .swiper-button-prev--blockHomeFeatureSwiper {
    left: calc(50% - 520px);
    top: 90%;
    z-index: 999999;
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -599px -159px;
    width: 81px;
    height: 72px
}

.homeFeature .feature .swiper-button-prev--blockHomeFeatureSwiper:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.homeFeature .feature .swiper-button-prev--blockHomeFeatureSwiper:after {
    content: none
}

@media (orientation: portrait) {
    .homeFeature .feature .swiper-button-prev--blockHomeFeatureSwiper {
        transform: scale(0.75);
        transform-origin: left top;
        left: 0;
        top: 89%
    }
}

.homeFeature .feature .swiper-button-next--blockHomeFeatureSwiper {
    top: 90%;
    right: calc(50% - 500px);
    z-index: 999999;
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -601px -52px;
    width: 81px;
    height: 72px
}

.homeFeature .feature .swiper-button-next--blockHomeFeatureSwiper:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.homeFeature .feature .swiper-button-next--blockHomeFeatureSwiper:after {
    content: none
}

@media (orientation: portrait) {
    .homeFeature .feature .swiper-button-next--blockHomeFeatureSwiper {
        transform: scale(0.75);
        transform-origin: right top;
        right: 0;
        top: 89%
    }
}

.homeFeature .feature .swiper-pagination--blockHomeFeatureSwiper {
    bottom: -5px;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    margin: 0 auto
}

.homeFeature .feature .swiper-pagination--blockHomeFeatureSwiper .swiper-pagination-bullet {
    background-color: rgba(0, 0, 0, 0);
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -377px -239px;
    width: 31px;
    height: 30px;
    opacity: 1;
    border-radius: 0;
    margin: 0 25px
}

@media (orientation: portrait) {
    .homeFeature .feature .swiper-pagination--blockHomeFeatureSwiper .swiper-pagination-bullet {
        margin: 0 15px
    }
}

@media (orientation: portrait) {
    .homeFeature .feature .swiper-pagination--blockHomeFeatureSwiper .swiper-pagination-bullet {
        transform: scale(0.75)
    }
}

.homeFeature .feature .swiper-pagination--blockHomeFeatureSwiper .swiper-pagination-bullet-active {
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: 0px -566px;
    width: 63px;
    height: 93px
}

@media (orientation: portrait) {
    .homeFeature .feature .swiper-pagination--blockHomeFeatureSwiper .swiper-pagination-bullet-active {
        transform: scale(0.75)
    }
}

.homeHistory {
    margin-top: -1px
}

.homeHistory, .homeHistory .section__background, .homeHistory .section__content, .homeHistory .inner {
    height: 1220px
}

@media (orientation: portrait) {
    .homeHistory, .homeHistory .section__background, .homeHistory .section__content, .homeHistory .inner {
        height: 1320px
    }
}

.homeHistory .title {
    margin: 0 auto 20px
}

@media (orientation: portrait) {
    .homeHistory .title {
        margin: 0 auto 70px
    }

    .homeHistory .title img {
        margin-left: -5px
    }
}

.homeHistory .history {
    position: relative;
    margin: 330px auto 0;
    width: 1200px;
    height: 730px
}

@media (orientation: portrait) {
    .homeHistory .history {
        width: 720px;
        height: 820px
    }
}

.homeHistory .history_list {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.homeHistory .history_slide {
    width: 1200px !important;
    height: 626px;
    margin: 0 auto
}

@media (orientation: portrait) {
    .homeHistory .history_slide {
        width: 720px !important
    }
}

.homeHistory .history_item {
    display: block;
    width: 1200px;
    height: 626px;
    padding: 0;
    transition: background .4s cubic-bezier(0.42, 0, 0.58, 1)
}

@media (orientation: portrait) {
    .homeHistory .history_item {
        width: 580px;
        margin: 0 auto
    }
}

.homeHistory .history_item__thumbnail {
    display: block;
    position: relative;
    width: 1103px;
    height: 626px;
    margin: 0 auto;
    overflow: hidden
}

@media (orientation: portrait) {
    .homeHistory .history_item__thumbnail {
        width: 580px;
        height: 626px
    }
}

.homeHistory .history_item__thumbnail img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    font-size: 0
}

.homeHistory .history .swiper-button-prev--blockHomeHistorySwiper {
    left: 0;
    top: 40%;
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -599px -159px;
    width: 81px;
    height: 72px
}

.homeHistory .history .swiper-button-prev--blockHomeHistorySwiper:after {
    content: none
}

@media (orientation: portrait) {
    .homeHistory .history .swiper-button-prev--blockHomeHistorySwiper {
        transform: scale(0.5);
        transform-origin: left top
    }
}

.homeHistory .history .swiper-button-next--blockHomeHistorySwiper {
    top: 40%;
    right: 0;
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -601px -52px;
    width: 81px;
    height: 72px
}

.homeHistory .history .swiper-button-next--blockHomeHistorySwiper:after {
    content: none
}

@media (orientation: portrait) {
    .homeHistory .history .swiper-button-next--blockHomeHistorySwiper {
        transform: scale(0.5);
        transform-origin: right top
    }
}

.homeHistory .history .swiper-pagination--blockHomeHistorySwiper {
    bottom: 0px;
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    background: url(assets/images/content/line-paging.webp) center 15px no-repeat
}

.homeHistory .history .swiper-pagination--blockHomeHistorySwiper .swiper-pagination-bullet {
    background-color: rgba(0, 0, 0, 0);
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -684px -95px;
    width: 19px;
    height: 19px;
    opacity: 1;
    border-radius: 0;
    margin: 0 25px
}

.homeHistory .history .swiper-pagination--blockHomeHistorySwiper .swiper-pagination-bullet-active {
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -684px -74px;
    width: 19px;
    height: 19px
}

.subHeader {
    position: relative;
    margin-top: 80px
}

.subHeader, .subHeader .section__background, .subHeader .section__content, .subHeader .inner {
    height: 620px
}

@media (orientation: portrait) {
    .subHeader, .subHeader .section__background, .subHeader .section__content, .subHeader .inner {
        height: 377px
    }
}

.subHeader .overlay {
    background: rgba(255, 255, 255, .6) 1%;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.6) 1%, rgba(255, 255, 255, 0.1) 100%)
}

@media (orientation: portrait) {
    .subHeaderNews, .subHeaderNews .section__background, .subHeaderNews .section__content, .subHeaderNews .inner {
        height: 377px
    }
}

.midbar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    position: relative;
    margin-bottom: 20px
}

@media (orientation: portrait) {
    .midbar {
        width: var(--width-mobile);
        padding: 20px 36px
    }
}

.midbar__title {
    font-size: 62px;
    font-weight: var(--fontweight-bold);
    text-transform: uppercase;
    background: #6f1d06;
    background: linear-gradient(to bottom, #6f1d06, #492314);
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    margin-bottom: 10px
}

@media (orientation: portrait) {
    .midbar__title {
        margin-bottom: 20px
    }
}

.midbar__title:only-child {
    width: 100%;
    text-align: center
}

.midbar__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 20px;
    gap: 18px
}

@media (orientation: portrait) {
    .midbar__breadcrumb {
        margin-bottom: 0
    }
}

.midbar__breadcrumb a {
    position: relative;
    display: flex;
    align-content: end;
    align-items: end;
    font-size: 18px;
    color: #c9c5c5;
    padding: 0 28px 0 0px;
    font-weight: var(--fontweight-medium)
}

@media (orientation: portrait) {
    .midbar__breadcrumb a {
        color: #9d9d9d;
        font-size: 24px
    }
}

.midbar__breadcrumb a:first-child {
    font-size: 0;
    padding: 0 36px 0 0
}

.midbar__breadcrumb a:first-child:before {
    content: "";
    display: block;
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -195px -132px;
    width: 30px;
    height: 24px
}

.midbar__breadcrumb a:after {
    content: "";
    display: block;
    position: absolute;
    right: -10%;
    bottom: 10%;
    margin: 0 12px;
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -227px -132px;
    width: 10px;
    height: 14px
}

.midbar__breadcrumb span {
    display: flex;
    padding: 0 0px;
    color: #6a1e08;
    font-size: 18px
}

@media (orientation: portrait) {
    .midbar__breadcrumb span {
        font-size: 24px
    }
}

.midbar__burger {
    position: absolute;
    right: 20px;
    top: 30px;
    padding: 20px;
    background: #57210f;
    background: linear-gradient(to bottom, #57210f, #462316)
}

.midbar__menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 0;
    background-color: #e6f7ff;
    transition: all .4s;
    overflow: hidden;
    z-index: 10
}

.midbar__menu.active {
    max-height: 800px
}

.midbar__menu a {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    vertical-align: middle;
    margin: 0 auto;
    width: calc(100% - 40px);
    font-size: 26px;
    padding: 22px 0;
    border-bottom: 1px solid #5e3d00
}

.subweb {
    display: flex
}

.subweb__main {
    width: calc(100% - 290px)
}

@media (orientation: portrait) {
    .subweb__main {
        width: 100%
    }
}

.subweb__main article {
    overflow: scroll;
    height: 1700px;
    padding: 0 0 0 40px;
    overflow-x: hidden
}

.subweb__main article::-webkit-scrollbar {
    margin-right: 6px;
    width: 6px;
    -webkit-transition: width .2s;
    transition: width .2s
}

.subweb__main article:hover::-webkit-scrollbar {
    width: 6px
}

.subweb__main article::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .5)
}

.subweb__main article::-webkit-scrollbar-thumb {
    background: #ccc
}

.subweb__main article::-webkit-scrollbar-thumb:hover {
    background: #ccc
}

.subweb__main article .article__meta {
    padding: 0;
    justify-content: center
}

.subweb__main article .article__meta a, .subweb__main article .article__meta span {
    font-size: 20px;
    color: #6a1e08
}

.subweb__main article .article__meta span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #9d8d77
}

.subweb__aside {
    width: 290px
}

@media (orientation: portrait) {
    .subweb__aside {
        display: none
    }
}

.subweb .midbar {
    margin: 0 20px;
    justify-content: center
}

.subweb .midbar__title {
    width: 100%;
    font-size: 42px;
    text-align: center;
    margin: 0;
    border-bottom: 1px solid #d1c6a0;
    padding-bottom: 10px
}

.subweb .midbar__menu {
    background: #191b1a;
    position: absolute;
    top: 95px
}

.subweb .midbar__menu a {
    color: #e7d7a2;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    vertical-align: middle;
    margin: 0 auto;
    width: calc(100% - 40px);
    font-size: 25px;
    padding: 15px 0;
    border-bottom: 1px solid #434341
}

.subweb .midbar__menu a:hover {
    color: #e7d7a2;
    background: #444
}

.subweb__menu {
    background-color: #fcf6ee
}

.subweb__menu a {
    color: #661e0a;
    display: flex;
    align-items: center;
    align-content: center;
    text-align: center;
    vertical-align: middle;
    margin: 0 auto;
    width: 90%;
    font-size: 15px;
    margin-left: 30px;
    padding: 18px 0;
    border-bottom: 1px solid #c3c3c3
}

.subweb__menu a:last-child {
    border-bottom: none
}

.subweb__menu a:hover {
    color: #ed7c2b;
}

.subweb__menu a.active {
    color: #661e0a;
    background: #dcb56b
}

.subweb__menutitle {
    background-image: url(../images/main/bg-list-news-title.webp);
    background-repeat: no-repeat;
    background-position: center
}

.inner--subNews .midbar, .inner--subGallery .midbar {
    border-bottom: none
}

#subNewsPage {
    margin: 0 auto
}

#subNewsPage .main__sub {
    width: 1200px
}

#subNewsPage .main__sub .icon-sub-head {
    position: absolute;
    top: 110px;
    left: 285px
}

#subNewsPage .main__sub #blockSubNewsSwiper {
    position: absolute;
    top: 150px;
    left: 50%;
    transform: translateX(-50%);
    width: 1070px
}

@media (orientation: portrait) {
    #subNewsPage .main__sub #blockSubNewsSwiper {
        width: 32%;
        left: 65px;
        transform: translateX(0);
        top: 200px
    }
}

@media (orientation: portrait) {
    #subNewsPage .main__sub #blockSubNewsSwiper .imgBGSub {
        width: 100%
    }
}

@media (orientation: portrait) {
    #subNewsPage .main__sub #blockSubNewsSwiper .midbar {
        display: none
    }
}

#subNewsPage .main__sub #blockSubNewsSwiper .subNews__slide .imageSubNews {
    position: absolute;
    top: 25px;
    left: 24px;
    width: 300px;
    height: 150px;
    -o-object-fit: cover;
    object-fit: cover
}

@media (orientation: portrait) {
    #subNewsPage .main__sub #blockSubNewsSwiper .subNews__slide .imageSubNews {
        width: 180px;
        height: 90px;
        left: 10px;
        top: 10px
    }
}

#subNewsPage .main__sub #blockSubNewsSwiper .subNews__slide .title__subNews {
    position: absolute;
    font-size: 20px;
    color: #137a7c;
    left: 20px;
    top: 200px;
    font-weight: bold;
    width: 305px;
    word-break: break-word;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Number of lines to show */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (orientation: portrait) {
    #subNewsPage .main__sub #blockSubNewsSwiper .subNews__slide .title__subNews {
        width: 180px;
        font-size: 16px;
        line-height: 20px;
        top: 120px;
        left: 10px
    }
}

#subNewsPage .main__sub #blockSubNewsSwiper .subNews__slide .info {
    width: 300px;
    justify-content: space-between;
    position: absolute;
    bottom: 30px;
    left: 20px;
    font-size: 20px;
    font-weight: 300;
    color: #502e06
}

@media (orientation: portrait) {
    #subNewsPage .main__sub #blockSubNewsSwiper .subNews__slide .info {
        font-size: 12px;
        width: 180px;
        left: 10px;
        bottom: 25px
    }
}

#subNewsPage .main__sub .swiper-button-prev {
    top: 300px;
    left: 400px;
    z-index: 999999;
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -126px -566px;
    width: 59px;
    height: 58px;
    opacity: 1
}

@media (orientation: portrait) {
    #subNewsPage .main__sub .swiper-button-prev {
        left: 0;
        transform: scale(0.75)
    }
}

#subNewsPage .main__sub .swiper-button-prev:after {
    content: none
}

#subNewsPage .main__sub .swiper-button-next {
    top: 300px;
    right: 405px;
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -65px -566px;
    width: 59px;
    height: 58px;
    z-index: 999999
}

@media (orientation: portrait) {
    #subNewsPage .main__sub .swiper-button-next {
        left: 35.5%;
        transform: scale(0.75)
    }
}

#subNewsPage .main__sub .swiper-button-next:after {
    content: none
}

.subNews, .subSubweb {
    margin-top: -22px;
    height: 2000px !important
}

.subNews .inner, .subSubweb .inner {
    height: 1850px !important
}

@media (orientation: portrait) {
    .subNews, .subSubweb {
        margin-top: -26px;
        height: auto !important
    }
}

.subNews .section__background, .subSubweb .section__background {
    margin-top: -1px
}

.subNews .section__content--bg, .subSubweb .section__content--bg {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 40px
}

@media (orientation: portrait) {
    .subNews .section__content--bg, .subSubweb .section__content--bg {
        width: 100%;
        margin-top: 0;
        height: 100%
    }
}

.subNews .news, .subSubweb .news {
    position: relative;
    width: 100%;
    padding: 0px 0;
    margin: 20px 65px 0
}

@media (orientation: portrait) {
    .subNews .news, .subSubweb .news {
        margin: 0
    }

    .subNews .news .news_tab, .subSubweb .news .news_tab {
        flex-direction: column
    }
}

.subNews .news_tab, .subSubweb .news_tab {
    display: flex;
    justify-content: flex-start;
    margin: 0 0px 30px 0
}

@media (orientation: portrait) {
    .subNews .news_tab, .subSubweb .news_tab {
        margin: 0 0px 10px 0
    }
}

.subNews .news_tab .tab__search, .subSubweb .news_tab .tab__search {
    position: relative;
    display: flex;
    align-items: center;
    right: -45px
}

.subNews .news_tab .tab__search .place__input, .subSubweb .news_tab .tab__search .place__input {
    position: absolute;
    left: 10px;
    background: rgba(0, 0, 0, 0);
    border: none;
    border-bottom: 1px solid #994b23;
    width: 150px;
    padding-bottom: 10px;
    font-size: 18px;
    color: #994b23
}

.subNews .news_tab .tab__search .place__input::-moz-placeholder, .subSubweb .news_tab .tab__search .place__input::-moz-placeholder {
    color: #bca996
}

.subNews .news_tab .tab__search .place__input::placeholder, .subSubweb .news_tab .tab__search .place__input::placeholder {
    color: #bca996
}

.subNews .news_tab .tab__search .place__input:focus, .subSubweb .news_tab .tab__search .place__input:focus {
    color: #994b23
}

@media (orientation: portrait) {
    .subNews .news_tab .tab__search, .subSubweb .news_tab .tab__search {
        right: 0;
        margin: 0 30px;
        justify-content: space-between
    }

    .subNews .news_tab .tab__search .place__input, .subSubweb .news_tab .tab__search .place__input {
        width: 87%
    }
}

.subNews .news_tab .tab__search form, .subSubweb .news_tab .tab__search form {
    display: flex;
    align-items: center
}

.subNews .news_tab .tab__search .btn__search, .subSubweb .news_tab .tab__search .btn__search {
    position: absolute;
    right: 0;
    width: 70px;
    height: 70px;
    border: none;
    background: url(../images/main/btn-search-sub.webp) no-repeat center
}

.subNews .news_tab .tab__search .btn__search:not(.off):hover, .subSubweb .news_tab .tab__search .btn__search:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.subNews .news_tab .tab__search .btn__search:focus, .subSubweb .news_tab .tab__search .btn__search:focus {
    outline: none
}

.subNews .news_tab .tab, .subSubweb .news_tab .tab {
    display: flex;
    justify-content: flex-start
}

@media (orientation: portrait) {
    .subNews .news_tab .tab, .subSubweb .news_tab .tab {
        justify-content: space-around;
        width: 90%;
        padding: 0
    }

    .subNews .news_tab .tab li, .subSubweb .news_tab .tab li {
        width: 20%
    }
}

.subNews .news_tab .tab__item, .subSubweb .news_tab .tab__item {
    display: block;
    position: relative;
    padding: 4px 32px;
    color: rgba(0, 0, 0, 0);
    font-size: 24px;
    text-transform: uppercase;
    transition: background-image .2s cubic-bezier(0.42, 0, 0.58, 1);
    z-index: 3
}

@media (orientation: portrait) {
    .subNews .news_tab .tab__item--news, .subNews .news_tab .tab__item--event, .subNews .news_tab .tab__item--feature, .subNews .news_tab .tab__item--tutori, .subSubweb .news_tab .tab__item--news, .subSubweb .news_tab .tab__item--event, .subSubweb .news_tab .tab__item--feature, .subSubweb .news_tab .tab__item--tutori {
        transform: scale(0.85)
    }
}

.subNews .news_tab .tab__item--news, .subSubweb .news_tab .tab__item--news {
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -402px -275px;
    width: 199px;
    height: 77px
}

.subNews .news_tab .tab__item--news:hover, .subNews .news_tab .tab__item--news.active, .subNews .news_tab .tab__item--news.active:hover, .subSubweb .news_tab .tab__item--news:hover, .subSubweb .news_tab .tab__item--news.active, .subSubweb .news_tab .tab__item--news.active:hover {
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -193px -159px;
    width: 201px;
    height: 78px
}

.subNews .news_tab .tab__item--event, .subSubweb .news_tab .tab__item--event {
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: 0px -275px;
    width: 199px;
    height: 77px
}

.subNews .news_tab .tab__item--event:hover, .subNews .news_tab .tab__item--event.active, .subNews .news_tab .tab__item--event.active:hover, .subSubweb .news_tab .tab__item--event:hover, .subSubweb .news_tab .tab__item--event.active, .subSubweb .news_tab .tab__item--event.active:hover {
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -195px -52px;
    width: 201px;
    height: 78px
}

.subNews .news_tab .tab__item--feature, .subSubweb .news_tab .tab__item--feature {
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -201px -275px;
    width: 199px;
    height: 77px
}

.subNews .news_tab .tab__item--feature:hover, .subNews .news_tab .tab__item--feature.active, .subNews .news_tab .tab__item--feature.active:hover, .subSubweb .news_tab .tab__item--feature:hover, .subSubweb .news_tab .tab__item--feature.active, .subSubweb .news_tab .tab__item--feature.active:hover {
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -398px -52px;
    width: 201px;
    height: 78px
}

.subNews .news_tab .tab__item--tutori, .subSubweb .news_tab .tab__item--tutori {
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: 0px -354px;
    width: 199px;
    height: 77px
}

.subNews .news_tab .tab__item--tutori:hover, .subNews .news_tab .tab__item--tutori.active, .subNews .news_tab .tab__item--tutori.active:hover, .subSubweb .news_tab .tab__item--tutori:hover, .subSubweb .news_tab .tab__item--tutori.active, .subSubweb .news_tab .tab__item--tutori.active:hover {
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -396px -159px;
    width: 201px;
    height: 78px
}

@media (orientation: portrait) {
    .subNews .news_tab .tab__item, .subSubweb .news_tab .tab__item {
        font-size: 24px;
        padding: 18px 12px
    }
}

.subNews .news_tab .tab__item:hover, .subSubweb .news_tab .tab__item:hover {
    color: #fff
}

.subNews .news_tab .viewall, .subSubweb .news_tab .viewall {
    margin-top: 10px
}

.subNews .news_tab .viewall:not(.off):hover, .subSubweb .news_tab .viewall:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.subNews .news_list, .subSubweb .news_list {
    position: relative;
    max-width: 1080px;
    margin: 0 0 20px
}

@media (orientation: portrait) {
    .subNews .news_list, .subSubweb .news_list {
        width: 100%;
        padding: 0 20px
    }
}

.subNews .news_list ul, .subSubweb .news_list ul {
    gap: 20px
}

@media (orientation: portrait) {
    .subNews .news_list ul, .subSubweb .news_list ul {
        gap: 10px;
        margin-top: 40px
    }
}

.subNews .news_list li, .subSubweb .news_list li {
    background: #fffdfa
}

.subNews .news_item, .subSubweb .news_item {
    display: flex;
    -moz-column-gap: 16px;
    column-gap: 16px;
    row-gap: 8px;
    padding: 40px 0 40px 40px;
    justify-content: space-between
}

@media (orientation: portrait) {
    .subNews .news_item, .subSubweb .news_item {
        padding: 30px 0 30px 30px
    }
}

.subNews .news_item .content__right, .subSubweb .news_item .content__right {
    width: 560px;
    position: relative
}

.subNews .news_item .content__right .content__bottom, .subSubweb .news_item .content__right .content__bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end
}

.subNews .news_item .content__right .content__bottom p, .subSubweb .news_item .content__right .content__bottom p {
    font-size: 20px;
    color: #8b5d45
}

@media (orientation: portrait) {
    .subNews .news_item .content__right, .subSubweb .news_item .content__right {
        width: 330px
    }
}

.subNews .news_item .flex, .subSubweb .news_item .flex {
    gap: 16px;
    text-decoration: none;
}

.subNews .news_item__thumbnail, .subSubweb .news_item__thumbnail {
    display: block;
    width: 400px;
    height: 200px;
    -o-object-fit: cover;
    object-fit: cover;
    position: relative;
    overflow: hidden
}

@media (orientation: portrait) {
    .subNews .news_item__thumbnail, .subSubweb .news_item__thumbnail {
        width: 340px;
        height: 170px
    }
}

.subNews .news_item__thumbnail img, .subSubweb .news_item__thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border: 3px solid #ddcc8c
}

.subNews .news_item__cate, .subSubweb .news_item__cate {
    display: block;
    color: #8b5205;
    font-size: 20px;
    font-weight: var(--fontweight-semibold);
    transition: color .2s cubic-bezier(0.42, 0, 0.58, 1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

@media (orientation: portrait) {
    .subNews .news_item__cate, .subSubweb .news_item__cate {
        font-size: 26px
    }
}

.subNews .news_item__time, .subSubweb .news_item__time {
    position: relative;
    display: flex;
    font-size: 16px;
    display: block;
    width: 100px;
    font-weight: var(--fontweight-medium);
    padding: 0 0 0 30px;
    color: #979797
}

@media (orientation: portrait) {
    .subNews .news_item__time, .subSubweb .news_item__time {
        font-size: 20px;
        width: 70px;
        text-align: right
    }
}

.subNews .news_item__time:before, .subSubweb .news_item__time:before {
    content: "";
    display: block;
    position: absolute;
    top: 45%;
    left: 0;
    width: 16px;
    height: 1px;
    background: #979797
}

.subNews .news_item__title, .subSubweb .news_item__title {
    grid-area: shortcontent;
    color: #753a1a;
    font-size: 20px;
    font-weight: var(--fontweight-normal);
    transition: color .2s cubic-bezier(0.42, 0, 0.58, 1);
    width: 687px;
    gap: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Number of lines to show */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.subNews .news_item__title:not(.off):hover, .subSubweb .news_item__title:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

@media (orientation: portrait) {
    .subNews .news_item__title, .subSubweb .news_item__title {
        width: 315px;
        font-size: 18px
    }
}

@media (orientation: portrait) {
    .subNews .news_item__title span, .subSubweb .news_item__title span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }
}

.subNews .news_item .shortContent, .subSubweb .news_item .shortContent {
    font-weight: 300;
    font-size: 20px;
    color: #753a1a;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Number of lines to show */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.subNews .news_item__viewdetail, .subSubweb .news_item__viewdetail {
    display: flex;
    text-align: center;
    padding: 0 12px;
    color: #422d08;
    font-size: 16px;
    font-weight: var(--fontweight-medium)
}

.subNews .news_item__viewdetail:not(.off):hover, .subSubweb .news_item__viewdetail:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

@media (orientation: portrait) {
    .subNews .news_item__viewdetail, .subSubweb .news_item__viewdetail {
        padding: 0
    }
}

.subNews .news_pagination, .subSubweb .news_pagination {
    width: 1080px;
    position: absolute;
    bottom: -90px
}

@media (orientation: portrait) {
    .subNews .news_pagination, .subSubweb .news_pagination {
        width: 100%
    }
}

.subNews .news_pagination .pagination, .subSubweb .news_pagination .pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.subNews .news_pagination .pagination .first, .subNews .news_pagination .pagination .last, .subSubweb .news_pagination .pagination .first, .subSubweb .news_pagination .pagination .last {
    display: none
}

.subNews .news_pagination .pagination .prev a, .subNews .news_pagination .pagination .next a, .subSubweb .news_pagination .pagination .prev a, .subSubweb .news_pagination .pagination .next a {
    color: rgba(0, 0, 0, 0);
    background-repeat: no-repeat;
    background-position: center
}

.subNews .news_pagination .pagination .prev a:hover, .subNews .news_pagination .pagination .next a:hover, .subSubweb .news_pagination .pagination .prev a:hover, .subSubweb .news_pagination .pagination .next a:hover {
    color: rgba(0, 0, 0, 0) !important;
    background: rgba(0, 0, 0, 0) no-repeat center !important;
    opacity: .8
}

.subNews .news_pagination .pagination .prev a, .subSubweb .news_pagination .pagination .prev a {
    background-image: url(../images/main/prev-pagination.webp)
}

.subNews .news_pagination .pagination .prev a:hover, .subSubweb .news_pagination .pagination .prev a:hover {
    background-image: url(../images/main/prev-pagination.webp) !important
}

.subNews .news_pagination .pagination .next a, .subSubweb .news_pagination .pagination .next a {
    background-image: url(../images/main/next-pagination.webp)
}

.subNews .news_pagination .pagination .next a:hover, .subSubweb .news_pagination .pagination .next a:hover {
    background-image: url(../images/main/next-pagination.webp) !important
}

.subNews .news_pagination .pagination li, .subSubweb .news_pagination .pagination li {
    margin: 0 10px
}

@media (orientation: portrait) {
    .subNews .news_pagination .pagination li, .subSubweb .news_pagination .pagination li {
        margin: 0 5px
    }
}

.subNews .news_pagination .pagination li.disabled, .subSubweb .news_pagination .pagination li.disabled {
    pointer-events: none
}

.subNews .news_pagination .pagination li.hide, .subSubweb .news_pagination .pagination li.hide {
    display: none
}

.subNews .news_pagination .pagination li a, .subSubweb .news_pagination .pagination li a {
    width: 40px;
    height: 40px;
    font-weight: var(--fontweight-bold);
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    vertical-align: middle;
    color: #48453d;
    transition: all .2s cubic-bezier(0.42, 0, 0.58, 1)
}

@media (orientation: portrait) {
    .subNews .news_pagination .pagination li a, .subSubweb .news_pagination .pagination li a {
        width: 40px;
        height: 40px;
        font-size: 24px
    }
}

.subNews .news_pagination .pagination li a:not(.active):hover, .subSubweb .news_pagination .pagination li a:not(.active):hover {
    background: #bd723a;
    color: #fef3d3
}

.subNews .news_pagination .pagination li.active a, .subSubweb .news_pagination .pagination li.active a {
    background: #bd723a;
    color: #fef3d3
}

.news--blockSubNews {
    height: 2200px
}

.subGallery .gallery {
    position: relative;
    width: 100%;
    padding: 0;
    max-width: 1000px;
    margin: 0 auto
}

.subGallery .gallery_tab {
    width: 100%;
    display: flex;
    margin: 0 0 30px
}

.subGallery .gallery_tab .tab {
    display: flex;
    justify-content: flex-start
}

@media (orientation: portrait) {
    .subGallery .gallery_tab .tab {
        width: 100%;
        padding: 0 20px
    }
}

.subGallery .gallery_tab .tab li:not(:last-child) {
    margin-right: 12px
}

.subGallery .gallery_tab .tab__item {
    display: block;
    position: relative;
    padding: 4px 32px;
    color: #878787;
    font-size: 24px;
    text-transform: uppercase;
    transition: background-color .2s cubic-bezier(0.42, 0, 0.58, 1);
    z-index: 3
}

@media (orientation: portrait) {
    .subGallery .gallery_tab .tab__item {
        font-size: 24px;
        padding: 18px 30px
    }
}

.subGallery .gallery_tab .tab__item:hover {
    color: #fff;
    background: #d8ac58
}

.subGallery .gallery_tab .tab__item.active, .subGallery .gallery_tab .tab__item.active:hover {
    color: #fff;
    font-size: 24px;
    background: #d8ac58
}

@media (orientation: portrait) {
    .subGallery .gallery_tab .tab__item.active, .subGallery .gallery_tab .tab__item.active:hover {
        font-size: 24px
    }
}

.subGallery .gallery_tab .viewall {
    margin-top: 10px
}

.subGallery .gallery_tab .viewall:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.subGallery .gallery_list {
    position: relative;
    margin: 0
}

@media (orientation: portrait) {
    .subGallery .gallery_list {
        padding: 0 20px
    }
}

.subGallery .gallery_list ul {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    grid-gap: 20px
}

@media (orientation: portrait) {
    .subGallery .gallery_list ul {
        grid-template-columns:repeat(2, 1fr)
    }
}

.subGallery .gallery_list ul li {
    height: 1fr
}

.subGallery .gallery_list li {
    display: block
}

.subGallery .gallery_item {
    position: relative;
    width: 100%;
    padding-bottom: 52.5%
}

.subGallery .gallery_item__thumbnail {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.subGallery .gallery_item__thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border: 3px solid #ddcc8c
}

.subGallery .gallery_item:not(.isHot):hover {
    background-color: rgba(255, 255, 255, .4)
}

.subGallery .gallery_item:not(.isHot):hover .news_item__title {
    color: #a82a2d
}

.subGallery .gallery__viewall {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    font-size: 24px;
    font-weight: var(--fontweight-medium);
    text-transform: uppercase;
    background: #e95819;
    height: 70px;
    border-radius: 8px
}

.subGallery .gallery__viewall:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

@media (orientation: portrait) {
    .subGallery .gallery__viewall:before {
        content: "";
        margin-right: 16px
    }
}

.subGallery .gallery_pagination {
    margin-top: 20px;
    width: 100%
}

.subGallery .gallery_pagination .pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.subGallery .gallery_pagination .pagination li {
    margin: 0 10px
}

@media (orientation: portrait) {
    .subGallery .gallery_pagination .pagination li {
        margin: 0 5px
    }
}

.subGallery .gallery_pagination .pagination li.disabled {
    opacity: .5;
    pointer-events: none
}

.subGallery .gallery_pagination .pagination li.hide {
    display: none
}

.subGallery .gallery_pagination .pagination li a {
    width: 40px;
    height: 40px;
    font-weight: var(--fontweight-bold);
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    vertical-align: middle;
    color: #48453d;
    transition: all .2s cubic-bezier(0.42, 0, 0.58, 1)
}

@media (orientation: portrait) {
    .subGallery .gallery_pagination .pagination li a {
        width: 45px;
        height: 45px;
        font-size: 32px
    }
}

.subGallery .gallery_pagination .pagination li a:not(.active):hover {
    background: #48453d;
    color: #f8dc8b
}

.subGallery .gallery_pagination .pagination li.active a {
    background: #48453d;
    color: #f8dc8b
}

.subContent .article, .content-popup .article, .subSubweb .article, .subListNews .article, .subEvent .article {
    --color-content: #6b6b6b;
    --color-title: var(--color-gray-600);
    --color-heading-2: #6a1e08;
    --color-heading-3: #6e3a11;
    --color-heading-4: #6e3a11;
    --color-heading-5: #6e3a11;
    --color-heading-6: #6e3a11;
    --color-href: #2d548e;
    --color-box-bg: #c9bf9a;
    --color-box-content: #6a1e08;
    --color-table-head-bg: #5a200e;
    --color-table-body-bg: #FFF;
    --color-table-foot-bg: #FFF;
    --color-table-head-content: #fff;
    --color-table-body-content: #6b6b6b;
    --color-table-foot-content: #6b6b6b;
    --color-table-border: #aaa
}

.article {
    font-size: var(--fontsize-primary-desktop);
    color: var(--color-content);
    padding: 0 20px;
    font-family: var(--font-primary);
    margin-left: auto;
    margin-right: auto;
    overflow: auto
}

@media (orientation: portrait) {
    .article {
        font-size: var(--fontsize-primary-mobile);
        width: var(--width-mobile);
        padding: 0 2%
    }
}

.article__title {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: 40px 0
}

.article__title, .article h1 {
    font-size: 2.2em;
    font-weight: bold;
    line-height: 1.4;
    border-bottom: 1px solid var(--color-content);
    color: var(--color-title)
}

.article__meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 16px 0
}

@media (orientation: portrait) {
    .article__meta {
        padding: 16px 20px
    }
}

.article__cate {
    display: block;
    padding: 4px;
    margin-right: 12px;
    color: var(--color-content);
    border-radius: 4px;
    font-size: .8em
}

.article__time {
    color: var(--color-content);
    font-size: .8em
}

.article__short_content {
    font-size: 1em;
    font-style: italic;
    color: var(--color-content);
    line-height: 1.6;
    margin-bottom: 30px;
}

.article__content {
    font-size: 1.2em;
    color: var(--color-content);
    line-height: 1.6
}

.article__content *:not(:only-child):not(li) {
    margin-bottom: 12px
}

.article__content ul {
    margin-left: 20px
}

.article__content ul li {
    list-style-position: outside;
    margin-bottom: 6px
}

.article__content ul li, .article__content ul.bulleted li {
    list-style-type: disc
}

.article__content ul.numbered li {
    list-style-type: decimal
}

.article__content h2 {
    font-size: 1.4em;
    font-weight: bold;
    line-height: 1.4;
    color: #6a1e08
}

.article__content h3 {
    font-size: 1.3em;
    font-weight: bold;
    line-height: 1.4;
    color: var(--color-heading-3)
}

.article__content h4 {
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.4;
    color: var(--color-heading-4)
}

.article__content h5 {
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.4;
    color: var(--color-heading-5)
}

.article__content h6 {
    font-size: 1em;
    font-weight: bold;
    line-height: 1.4;
    color: var(--color-heading-6)
}

.article__content a {
    color: var(--color-href);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    transition: border-bottom .4s;
    border-bottom: 1px solid rgba(var(--color-href), 0.5)
}

.article__content a:hover {
    border-bottom: 1px solid var(--color-href)
}

.article__content a.hero {
    display: block;
    background: var(--color-box-bg);
    color: #6a1e08;
    font-weight: bold;
    padding: 20px;
    border: 0px
}

.article__content img, .article__content iframe {
    display: block;
    max-width: 100%;
    margin: 0 auto 12px
}

.article__content img {
    border: 2px solid #ddcc8c
}

.article__content img + p.caption, .article__content iframe + p.caption {
    display: block;
    max-width: calc(100% - 40px);
    margin: 0 auto 12px;
    font-style: italic;
    font-size: .8em;
    color: #888;
    text-align: center
}

.article__content img.float, .article__content img.float--left {
    float: left;
    margin-right: 20px
}

.article__content img.float--right {
    float: right;
    margin-right: 0px;
    margin-left: 20px
}

.article__content .callout {
    padding: 20px 20px;
    background: var(--color-box-bg);
    color: var(--color-box-content)
}

.article__content .table {
    width: 100%
}

@media (max-width: 700px) {
    .article__content .table {
        overflow: auto
    }
}

@media (orientation: portrait) {
    .article__content .table {
        overflow: auto
    }
}

.article__content table {
    width: 100%
}

.article__content table td {
    padding: 8px;
    border: 1px solid var(--color-table-border);
    vertical-align: middle
}

.article__content table td img {
    max-width: 100%;
    margin: 0 auto 0
}

.article__content table thead {
    background: var(--color-table-head-bg);
    color: var(--color-table-head-content);
    font-weight: bold
}

.article__content table thead tr th {
    padding: 12px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid var(--color-table-border)
}

.article__content table tbody {
    background: var(--color-table-body-bg);
    color: var(--color-table-body-content)
}

.article__content table tfoot {
    background: var(--color-table-foot-bg);
    color: var(--color-table-foot-content)
}

.content-popup .article {
    font-size: 20px;
    padding: 0px 20px
}

@media (orientation: portrait) {
    .content-popup .article {
        font-size: 16px
    }
}

.subContent .article, .subSubweb .article {
    font-size: 20px;
    padding: 0px 20px
}

@media (orientation: portrait) {
    .subContent .article, .subSubweb .article {
        font-size: 30px
    }
}

.subContent .article, .content-popup .article, .subSubweb .article {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto
}

.subContent .article__title, .content-popup .article__title, .subSubweb .article__title {
    padding: 0px 80px 10px
}

@media (orientation: portrait) {
    .subContent .article__title, .content-popup .article__title, .subSubweb .article__title {
        padding: 0 0 10px
    }
}

.subContent .article__title, .subContent .article h1, .content-popup .article__title, .content-popup .article h1, .subSubweb .article__title, .subSubweb .article h1 {
    font-size: 1.6em;
    text-align: center;
    text-transform: uppercase;
    font-weight: var(--fontweight-medium);
    border-bottom: none;
    color: #d34a00
}

@media (orientation: portrait) {
    .subContent .article__title, .subContent .article h1, .content-popup .article__title, .content-popup .article h1, .subSubweb .article__title, .subSubweb .article h1 {
        font-weight: var(--fontweight-bold);
        font-size: 1.2em
    }
}

.subContent .article__meta, .content-popup .article__meta, .subSubweb .article__meta {
    padding: 0;
    margin-bottom: 8px;
    justify-content: center
}

.subContent .article__cate, .content-popup .article__cate, .subSubweb .article__cate {
    color: #6a1e08;
    font-size: 1.2em;
    text-transform: uppercase;
    vertical-align: middle
}

@media (orientation: portrait) {
    .subContent .article__cate, .content-popup .article__cate, .subSubweb .article__cate {
        font-size: 1em
    }
}

.subContent .article__time, .content-popup .article__time, .subSubweb .article__time {
    color: #8d7b62
}

.subContent .article__time:before, .content-popup .article__time:before, .subSubweb .article__time:before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #8d7b62;
    border-radius: 12px;
    margin-right: 12px
}

.row > .col-3 {
    padding: 0
}

.subcontent__menu {
    padding-top: 32px
}

.subcontent__menu .title-hot {
    font-size: 32px;
    font-weight: var(--fontweight-bold);
    text-transform: uppercase;
    background: #6f1d06;
    background: linear-gradient(to bottom, #6f1d06, #492314);
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    margin-bottom: 20px;
    text-align: center
}

.subcontent__menu .blockRightSukien {
    padding: 0px;
    width: 100%;
    z-index: 100
}

.subcontent__menu .blockRightSukien li {
    background: #e2c16d;
    padding-bottom: 20px;
    margin-bottom: 20px
}

.subcontent__menu .blockRightSukien .blockRightSukien_item .btn-chitiet {
    margin: 0 auto
}

.subcontent__menu .blockRightSukien .blockRightSukien_item__thumbnail {
    padding: 0;
    width: auto
}

.subcontent__menu .blockRightSukien .blockRightSukien_item__thumbnail img {
    width: 100%;
    height: 170px;
    -o-object-fit: cover;
    object-fit: cover;
    border: 3px solid #ddcc8c
}

.subcontent__menu .blockRightSukien .blockRightSukien_item__title {
    width: auto;
    display: block;
    color: #242424;
    font-size: 20px;
    line-height: 24px;
    font-weight: 500;
    padding: 10px;
    text-align: left;
    border-bottom: none
}

.subcontent__menu .blockRightSukien .blockRightSukien_item__title:hover {
    background: rgba(0, 0, 0, 0);
    color: #6a1e08
}

.subcontent__menu .blockRightSukien .blockRightSukien_item__time {
    color: #242424;
    padding: 5px 10px
}

#subSearchResult {
    margin-top: -1px;
    margin-bottom: 40px
}

@media (orientation: portrait) {
    #subSearchResult {
        margin-bottom: 0;
        padding-bottom: 20px
    }
}

#subSearchResult .section__background img {
    height: 2500px
}

#subSearchResult .section__content .inner--subContent .panel {
    background-image: url(assets/images/bg/bg-content-search.webp);
    background-repeat: no-repeat;
    background-position: center
}

@media (orientation: portrait) {
    #subSearchResult .section__content .inner--subContent .panel {
        background-image: none
    }
}

#subSearchResult .section__content .inner--subContent .panel .container {
    width: 100%;
    margin: 0;
    max-width: 100%
}

#subSearchResult .gsc-above-wrapper-area {
    border-bottom: 2px solid #e3dbc2 !important
}

#subEvent {
    margin-top: -1px;
    height: 2030px
}

@media (orientation: portrait) {
    #subEvent {
        height: auto
    }
}

#subEvent .section__content {
    height: 1400px;
    position: absolute;
    left: 50%;
    transform: translateX(-30%)
}

@media (orientation: portrait) {
    #subEvent .section__content {
        left: 0;
        transform: translateX(0)
    }
}

#subEvent .section__content .panel {
    position: absolute;
    top: 110px;
    width: 1165px;
    margin-left: 20px
}

@media (orientation: portrait) {
    #subEvent .section__content .panel {
        width: 100%;
        margin-left: 0;
        margin-top: 40px
    }
}

#subEvent .section__content .midbar__line--head {
    position: absolute;
    align-items: flex-end;
    gap: 10px;
    top: 70px;
    left: 60px
}

#subEvent .section__content .midbar__line--head div {
    height: 20px;
    font-size: 18px
}

#subEvent .section__content .midbar__line--head .child-1 {
    color: #868383
}

#subEvent .section__content .midbar__line--head .child-2 {
    color: #794510
}

#subEvent .subweb__main {
    padding: 0 20px
}

@media (orientation: portrait) {
    #subEvent .subweb__main {
        padding: 0
    }
}

#subEvent .subweb__main .midbar {
    margin: 0;
    padding: 0
}

#subEvent .subweb__main .midbar .midbar__menu {
    top: -33px
}

#subEvent .subweb__main .midbar .midbar__menu a {
    color: #fff;
    background: #ad9570;
    width: 100%;
    font-weight: 300
}

#subEvent .subweb__main .midbar .midbar__menu.active {
    top: -33px
}

#subEvent .subweb__main .midbar .midbar__burger {
    top: -120px;
    background: rgba(0, 0, 0, 0)
}

#subEvent .subweb__main .subweb__content .article {
    padding: 0 40px 20px
}

@media (orientation: portrait) {
    #subEvent .subweb__main .subweb__content .article {
        height: 1350px
    }
}

.subListNews {
    margin-top: -1px;
    height: auto
}

.subListNews .section__content {
    left: 50%;
    transform: translateX(-30%)
}

@media (orientation: portrait) {
    .subListNews .section__content {
        left: 0;
        transform: translateX(0)
    }
}

.subListNews .sub-list-news {
    display: flex;
    position: absolute;
    top: 150px;
    padding: 0 20px 0 40px;
    width: 1200px
}

@media (orientation: portrait) {
    .subListNews .sub-list-news {
        padding: 0;
        width: 100%
    }
}

.subListNews .sub-list-news .subListNews__article .midbar__line--head {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid #d7cda9;
    width: 98%
}

@media (orientation: portrait) {
    .subListNews .sub-list-news .subListNews__article .midbar__line--head {
        padding-bottom: 0;
        border-bottom: none;
        position: absolute;
        top: -80px;
        left: 65px
    }
}

.subListNews .sub-list-news .subListNews__article .midbar__line--head .child-1, .subListNews .sub-list-news .subListNews__article .midbar__line--head .child-2 {
    font-size: 18px;
    height: 20px
}

.subListNews .sub-list-news .subListNews__article .midbar__line--head .child-1 {
    color: #868383
}

.subListNews .sub-list-news .subListNews__article .midbar__line--head .child-2 {
    color: #6a1e08
}

.subListNews .sub-list-news .subListNews__article .midbar {
    margin: 0 20px 0 0
}

.subListNews .sub-list-news .subListNews__article .midbar__title {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 0;
    font-size: 42px;
    text-align: center
}

.subListNews .sub-list-news .subListNews__article .subweb__content .article__meta {
    justify-content: center
}

.subListNews .sub-list-news .subListNews__article .subweb__content .article__meta a {
    font-size: 24px;
    text-transform: uppercase;
    color: #661e0a
}

.subListNews .sub-list-news .subListNews__article .subweb__content .article__meta span {
    font-size: 18px;
    display: flex;
    gap: 10px;
    align-items: center;
    color: #8d7b62
}

.subListNews .sub-list-news .subListNews__article .subweb__content .article__content {
    overflow: auto;
    height: 1300px;
    padding-right: 10px
}

.subListNews .sub-list-news .subListNews__article .subweb__content .article__content::-webkit-scrollbar {
    margin-right: 6px;
    width: 6px;
    -webkit-transition: width .2s;
    transition: width .2s
}

.subListNews .sub-list-news .subListNews__article .subweb__content .article__content:hover::-webkit-scrollbar {
    width: 6px
}

.subListNews .sub-list-news .subListNews__article .subweb__content .article__content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .5)
}

.subListNews .sub-list-news .subListNews__article .subweb__content .article__content::-webkit-scrollbar-thumb {
    background: #cecece
}

.subListNews .sub-list-news .subListNews__article .subweb__content .article__content::-webkit-scrollbar-thumb:hover {
    background: #cecece
}

@media (orientation: portrait) {
    .subListNews .sub-list-news .subListNews__article .subweb__content .article__content {
        height: 1200px
    }
}

@media (orientation: portrait) {
    .subListNews .sub-list-news .subListNews__aside {
        display: none
    }
}

.subListNews .sub-list-news .subListNews__menutitle {
    background: url(../images/main/bg-list-news-title.webp) no-repeat center;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    width: 280px;
    height: 50px;
    background-size: cover
}

.subListNews .sub-list-news .child__menu {
    display: flex;
    flex-direction: column;
    gap: 30px
}

.subListNews .sub-list-news .child__menu a {
    background-color: #fff;
    width: 280px
}

.subListNews .sub-list-news .child__menu a .thumnail {
    position: relative
}

.subListNews .sub-list-news .child__menu a .thumnail img {
    width: 280px;
    height: 140px;
    border: 3px solid #fff;
    -o-object-fit: cover;
    object-fit: cover
}

.subListNews .sub-list-news .child__menu a .thumnail img:hover {
    border: 3px solid #ddcc8c
}

.subListNews .sub-list-news .child__menu a .thumnail__border {
    position: absolute;
    top: 0
}

.subListNews .sub-list-news .child__menu a .thumnail .content {
    padding: 15px;
    background: #fff;
}

.subListNews .sub-list-news .child__menu a .thumnail .title {
    font-size: 20px;
    font-weight: 600;
    color: #661e0a;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Number of lines to show */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.subListNews .sub-list-news .child__menu a .thumnail .date {
    font-weight: 300;
    color: #661e0a
}

body.locate-th {
    font-family: Kanit, sans-serif
}

.locate-th .article {
    font-family: Kanit, sans-serif
}

.locate-th .appinfo {
    bottom: 90px
}

.locate-th .homeHeader .appinfo__item--topup {
    display: none
}

.locate-th .homeHeader .appinfo__item--code {
    display: none
}

.locate-ph .floating .floatright__item--social {
    position: relative
}

.locate-ph .floating .floatright__item--home {
    position: absolute;
    top: 0;
    left: -4px
}

.locate-ph .floating .floatright__item--fanpage {
    position: absolute;
    top: 0;
    left: 56px
}

.locate-ph .floating .floatright__item--youtube {
    position: absolute;
    top: 0;
    left: 116px
}

.locate-ph .floating .floatright__item--instagram {
    position: absolute;
    top: 30px;
    left: 26px
}

.locate-ph .floating .floatright__item--tiktok {
    position: absolute;
    top: 30px;
    left: 86px
}

.locate-ph .floating .floatright__item--top {
    position: absolute;
    bottom: -17px;
    left: 71px
}

.locate-id .floating .floatright__item--social {
    position: relative
}

.locate-id .floating .floatright__item--home {
    position: absolute;
    top: 0;
    left: -4px
}

.locate-id .floating .floatright__item--fanpage {
    position: absolute;
    top: 0;
    left: 56px
}

.locate-id .floating .floatright__item--youtube {
    position: absolute;
    top: 0;
    left: 116px
}

.locate-id .floating .floatright__item--instagram {
    position: absolute;
    top: 30px;
    left: 26px
}

.locate-id .floating .floatright__item--tiktok {
    position: absolute;
    top: 30px;
    left: 86px
}

.locate-id .floating .floatright__item--top {
    position: absolute;
    bottom: -17px;
    left: 71px
}

.floating {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center
}

.floating * {
    pointer-events: all
}

@media (orientation: portrait) {
    .floating {
        position: absolute
    }
}

.floating .floatright {
    position: absolute;
    top: 30%;
    right: 10px;
    pointer-events: none;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.floating .floatright * {
    pointer-events: all
}

.floating .floatright .floating__main--right {
    position: relative
}

.floating .floatright .floating__main--right .hidden-right {
    position: absolute;
    right: -15px;
    opacity: 1;
    transition: all .5s linear
}

.floating .floatright .floating__main--right .hidden-right.active {
    right: -40px;
    opacity: 0
}

.floating .floatright__inertia {
    transition: transform 100ms linear
}

.floating .floatright__background {
    display: block
}

.floating .floatright__cute {
    position: absolute;
    top: -100px;
    width: 203px;
    height: 144px;
    z-index: -1
}

.floating .floatright__cute .red {
    font-size: 0;
    margin: 0 auto;
    -webkit-animation: red_bouncing 1.2s infinite forwards;
    animation: red_bouncing 1.2s infinite forwards
}

@-webkit-keyframes red_bouncing {
    0% {
        transform: rotate(0deg) scaleX(1) translateY(0)
    }
    40% {
        transform: rotate(2deg) scaleX(0.95) translateY(2px)
    }
    60% {
        transform: rotate(0deg) scaley(1.15) translateY(-10px)
    }
    80% {
        transform: rotate(-2deg) scaleX(0.95) translateY(2px)
    }
    100% {
        transform: rotate(0deg) scaleX(1) translateY(0)
    }
}

@keyframes red_bouncing {
    0% {
        transform: rotate(0deg) scaleX(1) translateY(0)
    }
    40% {
        transform: rotate(2deg) scaleX(0.95) translateY(2px)
    }
    60% {
        transform: rotate(0deg) scaley(1.15) translateY(-10px)
    }
    80% {
        transform: rotate(-2deg) scaleX(0.95) translateY(2px)
    }
    100% {
        transform: rotate(0deg) scaleX(1) translateY(0)
    }
}

@-webkit-keyframes red_bounce {
}

@keyframes red_bounce {
}

.floating .floatright__cute .red_background {
    position: absolute;
    width: 203px;
    height: 144px
}

.floating .floatright__cute .red_background__item {
    display: block;
    font-size: 0;
    position: absolute;
    background: #cbe8fe
}

.floating .floatright__cute .red_background__item--1 {
    opacity: 15%;
    top: 16%;
    left: 32%;
    right: 12%;
    bottom: 40%;
    -webkit-animation: anim1 2s infinite alternate;
    animation: anim1 2s infinite alternate
}

@-webkit-keyframes anim1 {
    25% {
        top: 38%;
        left: 28%;
        right: 35%;
        bottom: 25%
    }
    50% {
        top: 21%;
        left: 25%;
        right: 38%;
        bottom: 22%
    }
    75% {
        top: 48%;
        left: 47%;
        right: 36%;
        bottom: 15%
    }
}

@keyframes anim1 {
    25% {
        top: 38%;
        left: 28%;
        right: 35%;
        bottom: 25%
    }
    50% {
        top: 21%;
        left: 25%;
        right: 38%;
        bottom: 22%
    }
    75% {
        top: 48%;
        left: 47%;
        right: 36%;
        bottom: 15%
    }
}

.floating .floatright__cute .red_background__item--2 {
    opacity: 36%;
    top: 10%;
    left: 40%;
    right: 19%;
    bottom: 20%;
    -webkit-animation: anim2 3s infinite alternate;
    animation: anim2 3s infinite alternate
}

@-webkit-keyframes anim2 {
    25% {
        top: 27%;
        left: 8%;
        right: 18%;
        bottom: 6%
    }
    50% {
        top: 31%;
        left: 48%;
        right: 2%;
        bottom: 18%
    }
    75% {
        top: 30%;
        left: 7%;
        right: 1%;
        bottom: 43%
    }
}

@keyframes anim2 {
    25% {
        top: 27%;
        left: 8%;
        right: 18%;
        bottom: 6%
    }
    50% {
        top: 31%;
        left: 48%;
        right: 2%;
        bottom: 18%
    }
    75% {
        top: 30%;
        left: 7%;
        right: 1%;
        bottom: 43%
    }
}

.floating .floatright__cute .red_background__item--3 {
    opacity: 15%;
    top: 1%;
    left: 32%;
    right: 20%;
    bottom: 7%;
    -webkit-animation: anim3 2s infinite alternate;
    animation: anim3 2s infinite alternate
}

@-webkit-keyframes anim3 {
    25% {
        top: 33%;
        left: 31%;
        right: 10%;
        bottom: 2%
    }
    50% {
        top: 48%;
        left: 15%;
        right: 11%;
        bottom: 12%
    }
    75% {
        top: 14%;
        left: 42%;
        right: 10%;
        bottom: 46%
    }
}

@keyframes anim3 {
    25% {
        top: 33%;
        left: 31%;
        right: 10%;
        bottom: 2%
    }
    50% {
        top: 48%;
        left: 15%;
        right: 11%;
        bottom: 12%
    }
    75% {
        top: 14%;
        left: 42%;
        right: 10%;
        bottom: 46%
    }
}

.floating .floatright__cute .red_background__item--4 {
    opacity: 58%;
    top: 13%;
    left: 29%;
    right: 38%;
    bottom: 12%;
    -webkit-animation: anim4 2s infinite alternate;
    animation: anim4 2s infinite alternate
}

@-webkit-keyframes anim4 {
    25% {
        top: 31%;
        left: 15%;
        right: 16%;
        bottom: 19%
    }
    50% {
        top: 22%;
        left: 12%;
        right: 8%;
        bottom: 46%
    }
    75% {
        top: 32%;
        left: 28%;
        right: 9%;
        bottom: 6%
    }
}

@keyframes anim4 {
    25% {
        top: 31%;
        left: 15%;
        right: 16%;
        bottom: 19%
    }
    50% {
        top: 22%;
        left: 12%;
        right: 8%;
        bottom: 46%
    }
    75% {
        top: 32%;
        left: 28%;
        right: 9%;
        bottom: 6%
    }
}

.floating .floatright__cute .red_background__item--5 {
    opacity: 36%;
    top: 19%;
    left: 4%;
    right: 40%;
    bottom: 5%;
    -webkit-animation: anim5 2s infinite alternate;
    animation: anim5 2s infinite alternate
}

@-webkit-keyframes anim5 {
    25% {
        top: 45%;
        left: 19%;
        right: 47%;
        bottom: 35%
    }
    50% {
        top: 20%;
        left: 17%;
        right: 44%;
        bottom: 33%
    }
    75% {
        top: 47%;
        left: 16%;
        right: 45%;
        bottom: 22%
    }
}

@keyframes anim5 {
    25% {
        top: 45%;
        left: 19%;
        right: 47%;
        bottom: 35%
    }
    50% {
        top: 20%;
        left: 17%;
        right: 44%;
        bottom: 33%
    }
    75% {
        top: 47%;
        left: 16%;
        right: 45%;
        bottom: 22%
    }
}

.floating .floatright__cute .red_background__item--6 {
    opacity: 25%;
    top: 31%;
    left: 32%;
    right: 48%;
    bottom: 18%;
    -webkit-animation: anim6 3s infinite alternate;
    animation: anim6 3s infinite alternate
}

@-webkit-keyframes anim6 {
    25% {
        top: 37%;
        left: 5%;
        right: 40%;
        bottom: 20%
    }
    50% {
        top: 12%;
        left: 49%;
        right: 22%;
        bottom: 31%
    }
    75% {
        top: 33%;
        left: 1%;
        right: 9%;
        bottom: 3%
    }
}

@keyframes anim6 {
    25% {
        top: 37%;
        left: 5%;
        right: 40%;
        bottom: 20%
    }
    50% {
        top: 12%;
        left: 49%;
        right: 22%;
        bottom: 31%
    }
    75% {
        top: 33%;
        left: 1%;
        right: 9%;
        bottom: 3%
    }
}

.floating .floatright__cute .red_background__item--7 {
    opacity: 51%;
    top: 21%;
    left: 1%;
    right: 9%;
    bottom: 43%;
    -webkit-animation: anim7 2s infinite alternate;
    animation: anim7 2s infinite alternate
}

@-webkit-keyframes anim7 {
    25% {
        top: 18%;
        left: 15%;
        right: 49%;
        bottom: 50%
    }
    50% {
        top: 9%;
        left: 39%;
        right: 2%;
        bottom: 41%
    }
    75% {
        top: 49%;
        left: 32%;
        right: 49%;
        bottom: 20%
    }
}

@keyframes anim7 {
    25% {
        top: 18%;
        left: 15%;
        right: 49%;
        bottom: 50%
    }
    50% {
        top: 9%;
        left: 39%;
        right: 2%;
        bottom: 41%
    }
    75% {
        top: 49%;
        left: 32%;
        right: 49%;
        bottom: 20%
    }
}

.floating .floatright__cute .red_background__item--8 {
    opacity: 44%;
    top: 37%;
    left: 24%;
    right: 47%;
    bottom: 1%;
    -webkit-animation: anim8 2s infinite alternate;
    animation: anim8 2s infinite alternate
}

@-webkit-keyframes anim8 {
    25% {
        top: 42%;
        left: 8%;
        right: 31%;
        bottom: 49%
    }
    50% {
        top: 38%;
        left: 23%;
        right: 38%;
        bottom: 10%
    }
    75% {
        top: 34%;
        left: 42%;
        right: 16%;
        bottom: 22%
    }
}

@keyframes anim8 {
    25% {
        top: 42%;
        left: 8%;
        right: 31%;
        bottom: 49%
    }
    50% {
        top: 38%;
        left: 23%;
        right: 38%;
        bottom: 10%
    }
    75% {
        top: 34%;
        left: 42%;
        right: 16%;
        bottom: 22%
    }
}

.floating .floatright__cute .red_background__item--9 {
    opacity: 43%;
    top: 48%;
    left: 15%;
    right: 8%;
    bottom: 19%;
    -webkit-animation: anim9 3s infinite alternate;
    animation: anim9 3s infinite alternate
}

@-webkit-keyframes anim9 {
    25% {
        top: 4%;
        left: 44%;
        right: 46%;
        bottom: 12%
    }
    50% {
        top: 35%;
        left: 36%;
        right: 9%;
        bottom: 43%
    }
    75% {
        top: 16%;
        left: 32%;
        right: 11%;
        bottom: 40%
    }
}

@keyframes anim9 {
    25% {
        top: 4%;
        left: 44%;
        right: 46%;
        bottom: 12%
    }
    50% {
        top: 35%;
        left: 36%;
        right: 9%;
        bottom: 43%
    }
    75% {
        top: 16%;
        left: 32%;
        right: 11%;
        bottom: 40%
    }
}

.floating .floatright__cute .red_background__item--10 {
    opacity: 53%;
    top: 23%;
    left: 11%;
    right: 48%;
    bottom: 40%;
    -webkit-animation: anim10 3s infinite alternate;
    animation: anim10 3s infinite alternate
}

@-webkit-keyframes anim10 {
    25% {
        top: 1%;
        left: 30%;
        right: 13%;
        bottom: 10%
    }
    50% {
        top: 25%;
        left: 7%;
        right: 16%;
        bottom: 27%
    }
    75% {
        top: 31%;
        left: 6%;
        right: 41%;
        bottom: 22%
    }
}

@keyframes anim10 {
    25% {
        top: 1%;
        left: 30%;
        right: 13%;
        bottom: 10%
    }
    50% {
        top: 25%;
        left: 7%;
        right: 16%;
        bottom: 27%
    }
    75% {
        top: 31%;
        left: 6%;
        right: 41%;
        bottom: 22%
    }
}

.floating .floatright__cute .red_background__item--11 {
    opacity: 20%;
    top: 9%;
    left: 2%;
    right: 10%;
    bottom: 32%;
    -webkit-animation: anim11 3s infinite alternate;
    animation: anim11 3s infinite alternate
}

@-webkit-keyframes anim11 {
    25% {
        top: 15%;
        left: 43%;
        right: 2%;
        bottom: 13%
    }
    50% {
        top: 32%;
        left: 36%;
        right: 4%;
        bottom: 2%
    }
    75% {
        top: 9%;
        left: 27%;
        right: 14%;
        bottom: 7%
    }
}

@keyframes anim11 {
    25% {
        top: 15%;
        left: 43%;
        right: 2%;
        bottom: 13%
    }
    50% {
        top: 32%;
        left: 36%;
        right: 4%;
        bottom: 2%
    }
    75% {
        top: 9%;
        left: 27%;
        right: 14%;
        bottom: 7%
    }
}

.floating .floatright__cute .red_background__item--12 {
    opacity: 15%;
    top: 26%;
    left: 26%;
    right: 44%;
    bottom: 23%;
    -webkit-animation: anim12 2s infinite alternate;
    animation: anim12 2s infinite alternate
}

@-webkit-keyframes anim12 {
    25% {
        top: 18%;
        left: 22%;
        right: 4%;
        bottom: 28%
    }
    50% {
        top: 22%;
        left: 48%;
        right: 30%;
        bottom: 5%
    }
    75% {
        top: 31%;
        left: 16%;
        right: 38%;
        bottom: 2%
    }
}

@keyframes anim12 {
    25% {
        top: 18%;
        left: 22%;
        right: 4%;
        bottom: 28%
    }
    50% {
        top: 22%;
        left: 48%;
        right: 30%;
        bottom: 5%
    }
    75% {
        top: 31%;
        left: 16%;
        right: 38%;
        bottom: 2%
    }
}

.floating .floatright__cute .red_background__item--13 {
    opacity: 38%;
    top: 39%;
    left: 23%;
    right: 27%;
    bottom: 9%;
    -webkit-animation: anim13 3s infinite alternate;
    animation: anim13 3s infinite alternate
}

@-webkit-keyframes anim13 {
    25% {
        top: 14%;
        left: 13%;
        right: 22%;
        bottom: 15%
    }
    50% {
        top: 40%;
        left: 3%;
        right: 16%;
        bottom: 14%
    }
    75% {
        top: 23%;
        left: 34%;
        right: 4%;
        bottom: 6%
    }
}

@keyframes anim13 {
    25% {
        top: 14%;
        left: 13%;
        right: 22%;
        bottom: 15%
    }
    50% {
        top: 40%;
        left: 3%;
        right: 16%;
        bottom: 14%
    }
    75% {
        top: 23%;
        left: 34%;
        right: 4%;
        bottom: 6%
    }
}

.floating .floatright__cute .red_background__item--14 {
    opacity: 36%;
    top: 7%;
    left: 17%;
    right: 14%;
    bottom: 42%;
    -webkit-animation: anim14 2s infinite alternate;
    animation: anim14 2s infinite alternate
}

@-webkit-keyframes anim14 {
    25% {
        top: 33%;
        left: 38%;
        right: 11%;
        bottom: 26%
    }
    50% {
        top: 50%;
        left: 6%;
        right: 34%;
        bottom: 27%
    }
    75% {
        top: 10%;
        left: 38%;
        right: 44%;
        bottom: 42%
    }
}

@keyframes anim14 {
    25% {
        top: 33%;
        left: 38%;
        right: 11%;
        bottom: 26%
    }
    50% {
        top: 50%;
        left: 6%;
        right: 34%;
        bottom: 27%
    }
    75% {
        top: 10%;
        left: 38%;
        right: 44%;
        bottom: 42%
    }
}

.floating .floatright__cute .red_background__item--15 {
    opacity: 57%;
    top: 45%;
    left: 43%;
    right: 27%;
    bottom: 12%;
    -webkit-animation: anim15 3s infinite alternate;
    animation: anim15 3s infinite alternate
}

@-webkit-keyframes anim15 {
    25% {
        top: 28%;
        left: 43%;
        right: 28%;
        bottom: 4%
    }
    50% {
        top: 42%;
        left: 20%;
        right: 17%;
        bottom: 4%
    }
    75% {
        top: 14%;
        left: 25%;
        right: 21%;
        bottom: 44%
    }
}

@keyframes anim15 {
    25% {
        top: 28%;
        left: 43%;
        right: 28%;
        bottom: 4%
    }
    50% {
        top: 42%;
        left: 20%;
        right: 17%;
        bottom: 4%
    }
    75% {
        top: 14%;
        left: 25%;
        right: 21%;
        bottom: 44%
    }
}

.floating .floatright__cute .red_background__item--16 {
    opacity: 13%;
    top: 50%;
    left: 12%;
    right: 22%;
    bottom: 28%;
    -webkit-animation: anim16 2s infinite alternate;
    animation: anim16 2s infinite alternate
}

@-webkit-keyframes anim16 {
    25% {
        top: 14%;
        left: 26%;
        right: 9%;
        bottom: 7%
    }
    50% {
        top: 45%;
        left: 34%;
        right: 25%;
        bottom: 28%
    }
    75% {
        top: 7%;
        left: 49%;
        right: 48%;
        bottom: 15%
    }
}

@keyframes anim16 {
    25% {
        top: 14%;
        left: 26%;
        right: 9%;
        bottom: 7%
    }
    50% {
        top: 45%;
        left: 34%;
        right: 25%;
        bottom: 28%
    }
    75% {
        top: 7%;
        left: 49%;
        right: 48%;
        bottom: 15%
    }
}

.floating .floatright__cute .red_background__item--17 {
    opacity: 33%;
    top: 14%;
    left: 23%;
    right: 48%;
    bottom: 36%;
    -webkit-animation: anim17 2s infinite alternate;
    animation: anim17 2s infinite alternate
}

@-webkit-keyframes anim17 {
    25% {
        top: 38%;
        left: 17%;
        right: 4%;
        bottom: 36%
    }
    50% {
        top: 1%;
        left: 17%;
        right: 36%;
        bottom: 33%
    }
    75% {
        top: 5%;
        left: 20%;
        right: 21%;
        bottom: 9%
    }
}

@keyframes anim17 {
    25% {
        top: 38%;
        left: 17%;
        right: 4%;
        bottom: 36%
    }
    50% {
        top: 1%;
        left: 17%;
        right: 36%;
        bottom: 33%
    }
    75% {
        top: 5%;
        left: 20%;
        right: 21%;
        bottom: 9%
    }
}

.floating .floatright__cute .red_background__item--18 {
    opacity: 48%;
    top: 20%;
    left: 41%;
    right: 7%;
    bottom: 31%;
    -webkit-animation: anim18 2s infinite alternate;
    animation: anim18 2s infinite alternate
}

@-webkit-keyframes anim18 {
    25% {
        top: 43%;
        left: 26%;
        right: 43%;
        bottom: 15%
    }
    50% {
        top: 26%;
        left: 32%;
        right: 38%;
        bottom: 21%
    }
    75% {
        top: 33%;
        left: 42%;
        right: 46%;
        bottom: 40%
    }
}

@keyframes anim18 {
    25% {
        top: 43%;
        left: 26%;
        right: 43%;
        bottom: 15%
    }
    50% {
        top: 26%;
        left: 32%;
        right: 38%;
        bottom: 21%
    }
    75% {
        top: 33%;
        left: 42%;
        right: 46%;
        bottom: 40%
    }
}

.floating .floatright__cute .red_background__item--19 {
    opacity: 37%;
    top: 14%;
    left: 26%;
    right: 21%;
    bottom: 40%;
    -webkit-animation: anim19 3s infinite alternate;
    animation: anim19 3s infinite alternate
}

@-webkit-keyframes anim19 {
    25% {
        top: 47%;
        left: 37%;
        right: 25%;
        bottom: 50%
    }
    50% {
        top: 7%;
        left: 38%;
        right: 46%;
        bottom: 30%
    }
    75% {
        top: 32%;
        left: 5%;
        right: 44%;
        bottom: 24%
    }
}

@keyframes anim19 {
    25% {
        top: 47%;
        left: 37%;
        right: 25%;
        bottom: 50%
    }
    50% {
        top: 7%;
        left: 38%;
        right: 46%;
        bottom: 30%
    }
    75% {
        top: 32%;
        left: 5%;
        right: 44%;
        bottom: 24%
    }
}

.floating .floatright__cute .red_background__item--20 {
    opacity: 46%;
    top: 17%;
    left: 16%;
    right: 47%;
    bottom: 6%;
    -webkit-animation: anim20 2s infinite alternate;
    animation: anim20 2s infinite alternate
}

@-webkit-keyframes anim20 {
    25% {
        top: 25%;
        left: 43%;
        right: 25%;
        bottom: 22%
    }
    50% {
        top: 37%;
        left: 34%;
        right: 10%;
        bottom: 28%
    }
    75% {
        top: 22%;
        left: 36%;
        right: 23%;
        bottom: 37%
    }
}

@keyframes anim20 {
    25% {
        top: 25%;
        left: 43%;
        right: 25%;
        bottom: 22%
    }
    50% {
        top: 37%;
        left: 34%;
        right: 10%;
        bottom: 28%
    }
    75% {
        top: 22%;
        left: 36%;
        right: 23%;
        bottom: 37%
    }
}

.floating .floatright__content {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.floating .floatright__main {
    display: flex;
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    align-content: flex-start;
    justify-content: center;
    transform-origin: bottom center;
    transform: translateY(0px) translateX(205px);
    transition: transform .4s cubic-bezier(0.42, 0, 0.58, 1)
}

.floating .floatright__main .floatright__item--toggle {
    left: -30px
}

.floating .floatright__main.active {
    transform: translateY(0px) translateX(0px)
}

.floating .floatright__main.active .floatright__item--toggle {
    left: -5px
}

.floating .floatright__main li {
    display: flex;
    justify-content: center;
    margin-bottom: 10px
}

.floating .floatright__item--downapk {
    margin: 0 auto;
    display: block;
    font-size: 0px;
    background-image: url(../images/main/GROUP.webp);
    width: 137px;
    height: 37px;
    transform: scale(0.7)
}

.floating .floatright__item--downapk:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.floating .floatright__item--onelink {
    margin: 0 auto;
    display: block;
    font-size: 0px;
    background-image: url(../images/main/ZALO.webp);
    width: 137px;
    height: 37px;
    transform: scale(0.7)
}

.floating .floatright__item--onelink:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.floating .floatright__item--downappstore {
    margin: 0 auto;
    display: block;
    font-size: 0px;
    background-image: url(../images/main/header/TRANGCHU.webp);
    width: 163px;
    height: 49px;
    transform: scale(0.7)
}

.floating .floatright__item--downappstore:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.floating .floatright__item--downggplay {
    margin: 0 auto;
    display: block;
    font-size: 0px;
    background-image: url(../images/main/FANPAGE.webp);
    width: 137px;
    height: 37px;
    transform: scale(0.7)
}

.floating .floatright__item--downggplay:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.floating .floatright__item--home {
    margin: 0 auto;
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-float.webp);
    background-position: -65px -104px;
    width: 63px;
    height: 43px;
    transform: scale(0.7)
}

.floating .floatright__item--home:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.floating .floatright__item--fanpage {
    margin: 0 auto;
    display: block;
    font-size: 0px;
    background-image: url(../images/main/QR.webp);
    width: 133px;
    height: 132px;
    transform: scale(0.7)
}

.floating .floatright__item--fanpage:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.floating .floatright__item--youtube {
    margin: 0 auto;
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-float.webp);
    background-position: 0px -149px;
    width: 63px;
    height: 43px;
    transform: scale(0.7)
}

.floating .floatright__item--youtube:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.floating .floatright__item--tiktok {
    margin: 0 auto;
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-float.webp);
    background-position: -130px -104px;
    width: 63px;
    height: 43px;
    transform: scale(0.7)
}

.floating .floatright__item--tiktok:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.floating .floatright__item--top {
    margin: 0 auto;
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-float.webp);
    background-position: -162px 0px;
    width: 68px;
    height: 96px;
    transform: scale(0.7)
}

.floating .floatright__item--top:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.floating .floatright__item--topup img {
    width: 150px;
    margin: 30px 0 20px 20px
}

.floating .floatright__item--iconapp {
    position: absolute;
    top: -125px;
    left: 20px
}

.floating .floatright__item--topup {
    margin-left: -4px
}

.floating .floatright__item--qr {
    margin-bottom: 20px
}

.floating .floatright__item--social {
    width: 150px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around
}

.floating .floatright__item--social .floatright__item {
    transform: scale(0.95) !important;
    margin: 0;
    margin-bottom: 10px
}

.floating .floatright__item--downloading {
    margin-top: -34px
}

.floating .floatright__item--downloading .floatright__item {
    transform: scale(0.85) !important;
    margin-top: 6px
}

.floating .floatright__item--top {
    margin-top: 35px
}

.floating .floatright__item--toggle {
    position: absolute;
    top: 40%;
    left: -10px;
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-float.webp);
    background-position: -65px -149px;
    width: 29px;
    height: 29px
}

.floating .floatright__item--toggle:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.floating .floatright__main.active .asideright__item--toggle {
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-float.webp);
    background-position: -195px -104px;
    width: 29px;
    height: 29px
}

.floating .floatright__main.active .floatright__item--toggle {
    display: block;
    font-size: 0px;
    background-image: url(../images/main/_sprites-float.webp);
    background-position: -195px -104px;
    width: 29px;
    height: 29px
}

.floating .floattop {
    position: absolute;
    top: 0%;
    left: 0%;
    pointer-events: all;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: flex-start
}

@media (orientation: portrait) {
    .floating .floattop {
        position: fixed;
        width: var(--width-mobile);
        background-color: rgba(255, 255, 255, 0);
        padding: 0 14px
    }

    .floating .floattop:before {
        content: "";
        display: block;
        position: absolute;
        z-index: -1
    }
}

.floating .floattop__background {
    display: block
}

.floating .floattop__content {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    height: 80px
}

@media (orientation: portrait) {
    .floating .floattop__content {
        justify-content: flex-start;
        gap: 12px;
        padding: 0 20px;
        height: 100%
    }
}

.floating .floattop__content .itemBurger {
    display: none;
    width: 100%;
    position: absolute;
    background: #ad9570;
    top: 100px;
    left: 0;
    text-align: center
}

.floating .floattop__content .itemBurger li {
    border-bottom: 1px solid #434341
}

.floating .floattop__content .itemBurger li a {
    padding: 10px 0;
    color: #fff;
    font-size: 16px
}

.floating .floattop__item--appicon {
    position: relative;
    z-index: 3;
    margin-right: auto;
    width: 80px;
    height: 80px
}

.floating .floattop__item--appicon img {
    width: 40px;
    height: 80px;
    -o-object-fit: contain;
    object-fit: contain
}

@media (orientation: portrait) {
    .floating .floattop__item--app {
        margin-top: 20px
    }
}

.floating .floattop .floatnav {
    display: flex !important;
    position: relative;
    width: 1200px;
    justify-content: flex-end
}

@media (orientation: portrait) {
    .floating .floattop .floatnav {
        transform: translateX(-100%);
        position: absolute;
        transition: all .4s linear;
        left: 0;
        width: 100%;
        top: 104px
    }

    .floating .floattop .floatnav ul {
        width: 100%
    }

    .floating .floattop .floatnav.active {
        transform: translateX(0)
    }
}

.floating .floattop .floatnav__logo {
    position: absolute;
    left: -18px;
    top: -7px;
    width: 300px;
}

.floating .floattop .floatnav ul {
    display: flex
}

@media (orientation: portrait) {
    .floating .floattop .floatnav ul {
        flex-direction: column;
        align-items: center;
        background-color: #ad9570
    }
}

.floating .floattop .floatnav ul li {
    margin: 0 23px;
    position: relative
}

@media (orientation: portrait) {
    .floating .floattop .floatnav ul li {
        margin: 0;
        border-bottom: 1px solid rgba(102, 91, 73, .5);
        width: 100%;
        text-align: center
    }

    .floating .floattop .floatnav ul li:last-child {
        border-bottom: none
    }
}

.floating .floattop .floatnav ul li a {
    display: block;
    padding: 15px 0;
    color: #fff;
    position: relative;
    font-size: 17px;
    text-transform: uppercase;
    z-index: 50;
    font-weight: bold;
    text-decoration: none
}

.floating .floattop .floatnav ul li a::after {
    content: "";
    position: absolute;
    background-image: url(../images/main/icon-nav.webp);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    margin-left: 15px;
    top: 50%;
    transform: translateY(-50%)
}

@media (orientation: portrait) {
    .floating .floattop .floatnav ul li a::after {
        background-image: none
    }
}

.floating .floattop .floatnav ul li a:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.floating .floattop .floatnav ul li .active__dropdown {
    width: 190px;
    background-color: rgba(102, 91, 73, .95);
    left: -40px;
    top: 0;
    display: none;
    position: absolute;
    flex-direction: column;
    padding-top: 70px
}

@media (orientation: portrait) {
    .floating .floattop .floatnav ul li .active__dropdown {
        top: 0;
        left: 0;
        width: 100%;
        padding-top: 55px;
        position: relative;
        top: initial;
        padding-top: 0
    }
}

.floating .floattop .floatnav ul li .active__dropdown ul {
    flex-direction: column
}

@media (orientation: portrait) {
    .floating .floattop .floatnav ul li .active__dropdown ul {
        background-color: rgba(102, 91, 73, .95)
    }
}

.floating .floattop .floatnav ul li .active__dropdown ul li {
    width: 100%;
    margin: 0
}

.floating .floattop .floatnav ul li .active__dropdown ul li:hover {
    background-color: #665b49
}

@media (orientation: portrait) {
    .floating .floattop .floatnav ul li .active__dropdown ul li:hover {
        background-color: #918470
    }
}

@media (orientation: landscape) {
    .floating .floattop .floatnav ul li .active__dropdown ul li a {
        padding: 15px 0 15px 22px
    }
}

.floating .floattop .floatnav ul li .active__dropdown ul li a:not(.off):hover {
    cursor: pointer;
    pointer-events: all;
    filter: brightness(110%)
}

.floating .floattop .floatnav ul li .active__dropdown ul li a::after {
    background-image: none !important
}

.floating .floattop .floatnav ul li .active__dropdown ul li a span {
    display: flex;
    align-items: center;
    text-transform: capitalize !important;
    font-weight: 300
}

@media (orientation: portrait) {
    .floating .floattop .floatnav ul li .active__dropdown ul li a span {
        width: 300px;
        margin: 0 auto
    }
}

.floating .floattop .floatnav ul li .active__dropdown ul li a span .icon__social {
    margin-left: 15px;
    margin-right: 20px
}

.floating .floattop .floatnav ul li .active__dropdown:hover {
    display: flex !important
}

.floating .floattop .floatnav ul li .dropdown:hover + .floatnav__dropdown + .active__dropdown {
    display: flex !important
}

.floating .floattop .floatnav ul li:last-child a::after {
    background-image: none;
    background-repeat: no-repeat;
    width: 50px
}

@media (orientation: portrait) {
    .floating .floattop .floatnav ul li:last-child a::after {
        background-image: none
    }
}

.floating .floattop .floatnav ul li .floatnav__dropdown {
    display: block;
    position: absolute;
    background-image: url(../images/main/_sprites-common.webp);
    background-position: -343px -239px;
    width: 32px;
    height: 32px;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
    z-index: 100
}

@media (orientation: landscape) {
    .floating .floattop .floatnav ul li .floatnav__dropdown:hover + .active__dropdown, .floating .floattop .floatnav ul li .floatnav__dropdown:checked + .active__dropdown {
        display: flex !important
    }
}

@media (orientation: portrait) {
    .floating .floattop .floatnav ul li .floatnav__dropdown {
        left: auto;
        bottom: auto;
        top: 22px;
        right: 0;
        transform: translateX(-50%);
        bottom: 6px
    }

    .floating .floattop .floatnav ul li .floatnav__dropdown:checked + .active__dropdown {
        display: flex !important
    }
}

.floating .floattop--frame1 {
    padding: 0
}

.floating .floattop--frame1 .floattop__content {
    justify-content: flex-end
}

.floating .floattop--frame1 .floatnav__logo {
    top: -35px
}