/*! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com*/

*,
:after,
:before {
    border: 0 solid
}

:after,
:before {
    --tw-content: ""
}

:host,
html {
    -webkit-text-size-adjust: 100%;
    font-feature-settings: normal;
    -webkit-tap-highlight-color: transparent;
    font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-variation-settings: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4
}

body {
    line-height: inherit;
    margin: 0
}

hr {
    border-top-width: 1px;
    color: inherit
}

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit;
    text-decoration: inherit
}

code,
kbd,
pre,
samp {
    font-feature-settings: normal;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-variation-settings: normal
}

table {
    border-color: inherit;
    text-indent: 0
}

button,
input,
optgroup,
select,
textarea {
    font-feature-settings: inherit;
    color: inherit;
    font-size: 100%;
    font-variation-settings: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    padding: 0
}

button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
}

:-moz-focusring {
    outline: auto
}

:-moz-ui-invalid {
    box-shadow: none
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
    margin: 0;
}

menu,
ol,
ul {
    list-style: none;
    margin: 0;
    padding: 0
}

dialog {
    padding: 0
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #9ca3af;
    opacity: 1
}

input::placeholder,
textarea::placeholder {
    color: #9ca3af;
    opacity: 1
}

[role=button],
button {
    cursor: pointer
}

:disabled {
    cursor: default
}

audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
    display: block;
    vertical-align: middle
}

img,
video {
    height: auto;
    max-width: 100%
}

[hidden] {
    display: none;
}

*,
:after,
:before {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

#loading {
    background-color: #fff;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 11111
}

.cl-w {
    color: #fff
}

.bgcl-w {
    background-color: #fff
}

.cl-b {
    color: #000
}

.bgcl-b {
    background-color: #000
}

.cl-do {
    color: #db4444
}

.bgcl-do {
    background-color: #db4444
}

.cl-xam {
    color: #777
}

.bgcl-xam {
    background-color: #777
}

.cl-xam1 {
    color: #c9c9c9
}

.bgcl-xam1 {
    background-color: #c9c9c9
}

.cl-xanh {
    color: #00529C
}

.bgcl-xanh {
    background-color: #00529C
}

.cl-vang {
    color: #00529C
}

.bgcl-vang {
    background-color: #00529C
}

.cl-la {
    color: #008736
}

.bgcl-la {
    background-color: #008736
}

.cl-text {
    color: #fafafa
}

.bgcl-text {
    background-color: #fafafa
}

*,
:after,
:before {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

:root {
    --cl-w: #fff;
    --cl-b: #000;
    --cl-main: #007b8d;
    --cl-sub: #f26122;
    --cl-title: #000;
    --cl-content: #777;
    --wContainer: calc(100vw - 32px);
    --hHeader: 50px
}

@media (min-width:360px) {
    :root {
        --wContainer:
    }
}

@media (min-width:420px) {
    :root {
        --wContainer:
    }
}

@media (min-width:576px) {
    :root {
        --wContainer:
    }
}

@media (min-width:768px) {
    :root {
        --wContainer: 96vw
    }
}

@media (min-width:1024px) {
    :root {
        --wContainer:
    }
}

@media (min-width:1280px) {
    :root {
        --wContainer: 1172px
    }
}

@media (min-width:1440px) {
    :root {
        --wContainer: 1172px
    }
}

@media screen and (min-width:1024px) {
    :root {
        --hHeader: 148px
    }
}

body,
html {
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
    background-color: var(--cl-w);
    color: var(--cl-content, #000);
    font-family: Sarabun, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    line-height: 1
}

body.hideScroll {
    max-height: 100vh;
    overflow: hidden
}

::-webkit-scrollbar {
    width: 10px
}

::-webkit-scrollbar-track {
    background: #f1f1f1
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1
}

::-webkit-scrollbar-thumb:hover {
    background: #c8c8c8
}

main {
    height: auto;
    position: relative;
    width: 100%
}

#banner,
#bannerSub,
#breadcrumb,
main {
    margin-left: auto;
    margin-right: auto
}

ol,
ul {
    padding-left: 0
}

ul.rmd {
    list-style-position: inside;
    list-style-type: none;
    margin: 0;
    padding: 0
}

a {
    color: currentColor
}

a.icon svg [stroke]:not([stroke=none]) {
    stroke: currentColor
}

a.icon svg [fill]:not([fill=none]) {
    fill: currentColor
}

.swiper-button-next [stroke]:not([stroke=none]),
.swiper-button-prev [stroke]:not([stroke=none]) {
    stroke: currentColor
}

.swiper-button-next [fill]:not([fill=none]),
.swiper-button-prev [fill]:not([fill=none]) {
    fill: currentColor
}

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

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

a[data-fancybox] img {
    cursor: zoom-in
}

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

.hidden {
    display: none
}

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

b,
strong {
    font-weight: bolder;
    font-weight: 700
}

small {
    font-size: 80%
}

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

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

a {
    background-color: transparent;
    text-decoration: none
}

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

pre {
    margin-bottom: 0;
    margin-top: 0;
    overflow: auto
}

figure {
    margin: 0
}

img {
    border-style: none;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%
}

img.icon,
img.svg {
    width: auto
}

svg {
    overflow: hidden;
    vertical-align: middle
}

table {
    border-collapse: collapse
}

caption {
    caption-side: bottom;
    padding-bottom: 0;
    padding-top: 0;
    text-align: left
}

th {
    text-align: inherit
}

label {
    display: inline-block;
    margin-bottom: 0
}

button {
    border-radius: 0
}

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

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

select {
    word-wrap: normal
}

[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled),
button:not(:disabled) {
    cursor: pointer
}

[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
}

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

textarea {
    overflow: auto;
    resize: vertical
}

fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0
}

legend {
    color: inherit;
    display: block;
    font-size: 1.5rem;
    line-height: inherit;
    margin-bottom: 0;
    max-width: 100%;
    padding: 0;
    white-space: normal;
    width: 100%
}

progress {
    vertical-align: baseline
}

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

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

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

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

output {
    display: inline-block
}

summary {
    cursor: pointer;
    display: list-item
}

template {
    display: none
}

:active,
:focus {
    outline: none
}

.container,
.container-left,
.container-right,
.container2 {
    margin-left: auto;
    margin-right: auto;
    width: calc(100vw - 32px)
}

.container-left,
.container-right {
    width: calc((100vw - var(--wContainer))/2 + var(--wContainer))
}

.container-right {
    margin-left: auto;
    margin-right: 0
}

.container-left {
    margin-left: 0;
    margin-right: auto
}

@media (min-width:576px) {
    .container2 {
        width: 96vw
    }
}

@media (min-width:768px) {
    .container {
        width: 96vw
    }
}

@media (min-width:1280px) {
    .container {
        width: 1172px
    }
}

@media (min-width:1440px) {
    .container {
        width: 1172px
    }
    .container2 {
        width: 1074px
    }
}

.col {
    display: block;
    flex: 1 0 0%
}

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0px;
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--bs-gutter-x, 0px)*-.5);
    margin-right: calc(var(--bs-gutter-x, 0px)*-.5);
    margin-top: calc(var(--bs-gutter-y, 0px)*-1);
    width: calc(100% + var(--bs-gutter-x, 0px)*.5*2)
}

.row>* {
    box-sizing: border-box;
    flex-shrink: 0;
    max-width: 100%;
    padding-left: calc(var(--bs-gutter-x, 0px)*.5);
    padding-right: calc(var(--bs-gutter-x, 0px)*.5);
    padding-top: var(--bs-gutter-y, 0);
    width: 100%
}

.row-cols-auto>* {
    flex: 0 0 auto;
    width: auto
}

.row-cols-1>* {
    flex: 0 0 auto;
    width: 100%
}

.row-cols-2>* {
    flex: 0 0 auto;
    width: 50%
}

.row-cols-3>* {
    flex: 0 0 auto;
    width: 33.3333333333%
}

.row-cols-4>* {
    flex: 0 0 auto;
    width: 25%
}

.row-cols-5>* {
    flex: 0 0 auto;
    width: 20%
}

.row-cols-6>* {
    flex: 0 0 auto;
    width: 16.6666666667%
}

@media (min-width:360px) {
    .col-ss {
        display: block;
        flex: 1 0 0%
    }
    .row-cols-ss-auto>* {
        flex: 0 0 auto;
        width: auto
    }
    .row-cols-1-ss>* {
        flex: 0 0 auto;
        width: 100%
    }
    .row-cols-2-ss>* {
        flex: 0 0 auto;
        width: 91.66667%
    }
    .row-cols-3-ss>* {
        flex: 0 0 auto;
        width: 83.33333%
    }
    .row-cols-4-ss>* {
        flex: 0 0 auto;
        width: 75%
    }
    .row-cols-5-ss>* {
        flex: 0 0 auto;
        width: 66.66667%
    }
    .row-cols-6-ss>* {
        flex: 0 0 auto;
        width: 58.33333%
    }
    .row-cols-7-ss>* {
        flex: 0 0 auto;
        width: 50%
    }
    .row-cols-8-ss>* {
        flex: 0 0 auto;
        width: 41.66667%
    }
    .row-cols-9-ss>* {
        flex: 0 0 auto;
        width: 33.33333%
    }
    .row-cols-10-ss>* {
        flex: 0 0 auto;
        width: 25%
    }
    .row-cols-11-ss>* {
        flex: 0 0 auto;
        width: 16.66667%
    }
    .row-cols-12-ss>* {
        flex: 0 0 auto;
        width: 8.33333%
    }
}

@media (min-width:420px) {
    .col-sx {
        display: block;
        flex: 1 0 0%
    }
    .row-cols-sx-auto>* {
        flex: 0 0 auto;
        width: auto
    }
    .row-cols-1-sx>* {
        flex: 0 0 auto;
        width: 100%
    }
    .row-cols-2-sx>* {
        flex: 0 0 auto;
        width: 91.66667%
    }
    .row-cols-3-sx>* {
        flex: 0 0 auto;
        width: 83.33333%
    }
    .row-cols-4-sx>* {
        flex: 0 0 auto;
        width: 75%
    }
    .row-cols-5-sx>* {
        flex: 0 0 auto;
        width: 66.66667%
    }
    .row-cols-6-sx>* {
        flex: 0 0 auto;
        width: 58.33333%
    }
    .row-cols-7-sx>* {
        flex: 0 0 auto;
        width: 50%
    }
    .row-cols-8-sx>* {
        flex: 0 0 auto;
        width: 41.66667%
    }
    .row-cols-9-sx>* {
        flex: 0 0 auto;
        width: 33.33333%
    }
    .row-cols-10-sx>* {
        flex: 0 0 auto;
        width: 25%
    }
    .row-cols-11-sx>* {
        flex: 0 0 auto;
        width: 16.66667%
    }
    .row-cols-12-sx>* {
        flex: 0 0 auto;
        width: 8.33333%
    }
}

@media (min-width:576px) {
    .col-sm {
        display: block;
        flex: 1 0 0%
    }
    .row-cols-sm-auto>* {
        flex: 0 0 auto;
        width: auto
    }
    .row-cols-1-sm>* {
        flex: 0 0 auto;
        width: 100%
    }
    .row-cols-2-sm>* {
        flex: 0 0 auto;
        width: 91.66667%
    }
    .row-cols-3-sm>* {
        flex: 0 0 auto;
        width: 83.33333%
    }
    .row-cols-4-sm>* {
        flex: 0 0 auto;
        width: 75%
    }
    .row-cols-5-sm>* {
        flex: 0 0 auto;
        width: 66.66667%
    }
    .row-cols-6-sm>* {
        flex: 0 0 auto;
        width: 58.33333%
    }
    .row-cols-7-sm>* {
        flex: 0 0 auto;
        width: 50%
    }
    .row-cols-8-sm>* {
        flex: 0 0 auto;
        width: 41.66667%
    }
    .row-cols-9-sm>* {
        flex: 0 0 auto;
        width: 33.33333%
    }
    .row-cols-10-sm>* {
        flex: 0 0 auto;
        width: 25%
    }
    .row-cols-11-sm>* {
        flex: 0 0 auto;
        width: 16.66667%
    }
    .row-cols-12-sm>* {
        flex: 0 0 auto;
        width: 8.33333%
    }
}

@media (min-width:768px) {
    .col-md {
        display: block;
        flex: 1 0 0%
    }
    .row-cols-md-auto>* {
        flex: 0 0 auto;
        width: auto
    }
    .row-cols-1-md>* {
        flex: 0 0 auto;
        width: 100%
    }
    .row-cols-2-md>* {
        flex: 0 0 auto;
        width: 91.66667%
    }
    .row-cols-3-md>* {
        flex: 0 0 auto;
        width: 83.33333%
    }
    .row-cols-4-md>* {
        flex: 0 0 auto;
        width: 75%
    }
    .row-cols-5-md>* {
        flex: 0 0 auto;
        width: 66.66667%
    }
    .row-cols-6-md>* {
        flex: 0 0 auto;
        width: 58.33333%
    }
    .row-cols-7-md>* {
        flex: 0 0 auto;
        width: 50%
    }
    .row-cols-8-md>* {
        flex: 0 0 auto;
        width: 41.66667%
    }
    .row-cols-9-md>* {
        flex: 0 0 auto;
        width: 33.33333%
    }
    .row-cols-10-md>* {
        flex: 0 0 auto;
        width: 25%
    }
    .row-cols-11-md>* {
        flex: 0 0 auto;
        width: 16.66667%
    }
    .row-cols-12-md>* {
        flex: 0 0 auto;
        width: 8.33333%
    }
}

@media (min-width:1024px) {
    .col-lg {
        display: block;
        flex: 1 0 0%
    }
    .row-cols-lg-auto>* {
        flex: 0 0 auto;
        width: auto
    }
    .row-cols-1-lg>* {
        flex: 0 0 auto;
        width: 100%
    }
    .row-cols-2-lg>* {
        flex: 0 0 auto;
        width: 91.66667%
    }
    .row-cols-3-lg>* {
        flex: 0 0 auto;
        width: 83.33333%
    }
    .row-cols-4-lg>* {
        flex: 0 0 auto;
        width: 75%
    }
    .row-cols-5-lg>* {
        flex: 0 0 auto;
        width: 66.66667%
    }
    .row-cols-6-lg>* {
        flex: 0 0 auto;
        width: 58.33333%
    }
    .row-cols-7-lg>* {
        flex: 0 0 auto;
        width: 50%
    }
    .row-cols-8-lg>* {
        flex: 0 0 auto;
        width: 41.66667%
    }
    .row-cols-9-lg>* {
        flex: 0 0 auto;
        width: 33.33333%
    }
    .row-cols-10-lg>* {
        flex: 0 0 auto;
        width: 25%
    }
    .row-cols-11-lg>* {
        flex: 0 0 auto;
        width: 16.66667%
    }
    .row-cols-12-lg>* {
        flex: 0 0 auto;
        width: 8.33333%
    }
}

@media (min-width:1280px) {
    .col-xl {
        display: block;
        flex: 1 0 0%
    }
    .row-cols-xl-auto>* {
        flex: 0 0 auto;
        width: auto
    }
    .row-cols-1-xl>* {
        flex: 0 0 auto;
        width: 100%
    }
    .row-cols-2-xl>* {
        flex: 0 0 auto;
        width: 91.66667%
    }
    .row-cols-3-xl>* {
        flex: 0 0 auto;
        width: 83.33333%
    }
    .row-cols-4-xl>* {
        flex: 0 0 auto;
        width: 75%
    }
    .row-cols-5-xl>* {
        flex: 0 0 auto;
        width: 66.66667%
    }
    .row-cols-6-xl>* {
        flex: 0 0 auto;
        width: 58.33333%
    }
    .row-cols-7-xl>* {
        flex: 0 0 auto;
        width: 50%
    }
    .row-cols-8-xl>* {
        flex: 0 0 auto;
        width: 41.66667%
    }
    .row-cols-9-xl>* {
        flex: 0 0 auto;
        width: 33.33333%
    }
    .row-cols-10-xl>* {
        flex: 0 0 auto;
        width: 25%
    }
    .row-cols-11-xl>* {
        flex: 0 0 auto;
        width: 16.66667%
    }
    .row-cols-12-xl>* {
        flex: 0 0 auto;
        width: 8.33333%
    }
}

@media (min-width:1440px) {
    .col-yl {
        display: block;
        flex: 1 0 0%
    }
    .row-cols-yl-auto>* {
        flex: 0 0 auto;
        width: auto
    }
    .row-cols-1-yl>* {
        flex: 0 0 auto;
        width: 100%
    }
    .row-cols-2-yl>* {
        flex: 0 0 auto;
        width: 91.66667%
    }
    .row-cols-3-yl>* {
        flex: 0 0 auto;
        width: 83.33333%
    }
    .row-cols-4-yl>* {
        flex: 0 0 auto;
        width: 75%
    }
    .row-cols-5-yl>* {
        flex: 0 0 auto;
        width: 66.66667%
    }
    .row-cols-6-yl>* {
        flex: 0 0 auto;
        width: 58.33333%
    }
    .row-cols-7-yl>* {
        flex: 0 0 auto;
        width: 50%
    }
    .row-cols-8-yl>* {
        flex: 0 0 auto;
        width: 41.66667%
    }
    .row-cols-9-yl>* {
        flex: 0 0 auto;
        width: 33.33333%
    }
    .row-cols-10-yl>* {
        flex: 0 0 auto;
        width: 25%
    }
    .row-cols-11-yl>* {
        flex: 0 0 auto;
        width: 16.66667%
    }
    .row-cols-12-yl>* {
        flex: 0 0 auto;
        width: 8.33333%
    }
}

.col-f1 {
    display: block;
    flex: 1
}

.col-auto {
    display: block;
    flex: 0 0 auto;
    width: auto
}

.col-none {
    display: none;
    flex: 0 0 0;
    width: 0
}

.col-1 {
    width: 8.33333%
}

.col-1,
.col-2 {
    display: block;
    flex: 0 0 auto
}

.col-2 {
    width: 16.66667%
}

.col-3 {
    width: 25%
}

.col-3,
.col-4 {
    display: block;
    flex: 0 0 auto
}

.col-4 {
    width: 33.33333%
}

.col-5 {
    width: 41.66667%
}

.col-5,
.col-6 {
    display: block;
    flex: 0 0 auto
}

.col-6 {
    width: 50%
}

.col-7 {
    width: 58.33333%
}

.col-7,
.col-8 {
    display: block;
    flex: 0 0 auto
}

.col-8 {
    width: 66.66667%
}

.col-9 {
    width: 75%
}

.col-10,
.col-9 {
    display: block;
    flex: 0 0 auto
}

.col-10 {
    width: 83.33333%
}

.col-11 {
    width: 91.66667%
}

.col-11,
.col-12 {
    display: block;
    flex: 0 0 auto
}

.col-12 {
    width: 100%
}

.order-1 {
    order: 1
}

.order-2 {
    order: 2
}

.order-3 {
    order: 3
}

.order-4 {
    order: 4
}

.order-5 {
    order: 5
}

.order-6 {
    order: 6
}

.order-7 {
    order: 7
}

.order-8 {
    order: 8
}

.order-9 {
    order: 9
}

.order-10 {
    order: 10
}

@media (min-width:360px) {
    .order-1-ss {
        order: 1
    }
    .order-2-ss {
        order: 2
    }
    .order-3-ss {
        order: 3
    }
    .order-4-ss {
        order: 4
    }
    .order-5-ss {
        order: 5
    }
    .order-6-ss {
        order: 6
    }
    .order-7-ss {
        order: 7
    }
    .order-8-ss {
        order: 8
    }
    .order-9-ss {
        order: 9
    }
    .order-10-ss {
        order: 10
    }
    .col-f1-ss {
        display: block;
        flex: 1
    }
}

@media (min-width:420px) {
    .order-1-sx {
        order: 1
    }
    .order-2-sx {
        order: 2
    }
    .order-3-sx {
        order: 3
    }
    .order-4-sx {
        order: 4
    }
    .order-5-sx {
        order: 5
    }
    .order-6-sx {
        order: 6
    }
    .order-7-sx {
        order: 7
    }
    .order-8-sx {
        order: 8
    }
    .order-9-sx {
        order: 9
    }
    .order-10-sx {
        order: 10
    }
    .col-f1-sx {
        display: block;
        flex: 1
    }
}

@media (min-width:576px) {
    .order-1-sm {
        order: 1
    }
    .order-2-sm {
        order: 2
    }
    .order-3-sm {
        order: 3
    }
    .order-4-sm {
        order: 4
    }
    .order-5-sm {
        order: 5
    }
    .order-6-sm {
        order: 6
    }
    .order-7-sm {
        order: 7
    }
    .order-8-sm {
        order: 8
    }
    .order-9-sm {
        order: 9
    }
    .order-10-sm {
        order: 10
    }
    .col-f1-sm {
        display: block;
        flex: 1
    }
}

@media (min-width:768px) {
    .order-1-md {
        order: 1
    }
    .order-2-md {
        order: 2
    }
    .order-3-md {
        order: 3
    }
    .order-4-md {
        order: 4
    }
    .order-5-md {
        order: 5
    }
    .order-6-md {
        order: 6
    }
    .order-7-md {
        order: 7
    }
    .order-8-md {
        order: 8
    }
    .order-9-md {
        order: 9
    }
    .order-10-md {
        order: 10
    }
    .col-f1-md {
        display: block;
        flex: 1
    }
}

@media (min-width:1024px) {
    .order-1-lg {
        order: 1
    }
    .order-2-lg {
        order: 2
    }
    .order-3-lg {
        order: 3
    }
    .order-4-lg {
        order: 4
    }
    .order-5-lg {
        order: 5
    }
    .order-6-lg {
        order: 6
    }
    .order-7-lg {
        order: 7
    }
    .order-8-lg {
        order: 8
    }
    .order-9-lg {
        order: 9
    }
    .order-10-lg {
        order: 10
    }
    .col-f1-lg {
        display: block;
        flex: 1
    }
}

@media (min-width:1280px) {
    .order-1-xl {
        order: 1
    }
    .order-2-xl {
        order: 2
    }
    .order-3-xl {
        order: 3
    }
    .order-4-xl {
        order: 4
    }
    .order-5-xl {
        order: 5
    }
    .order-6-xl {
        order: 6
    }
    .order-7-xl {
        order: 7
    }
    .order-8-xl {
        order: 8
    }
    .order-9-xl {
        order: 9
    }
    .order-10-xl {
        order: 10
    }
    .col-f1-xl {
        display: block;
        flex: 1
    }
}

@media (min-width:1440px) {
    .order-1-yl {
        order: 1
    }
    .order-2-yl {
        order: 2
    }
    .order-3-yl {
        order: 3
    }
    .order-4-yl {
        order: 4
    }
    .order-5-yl {
        order: 5
    }
    .order-6-yl {
        order: 6
    }
    .order-7-yl {
        order: 7
    }
    .order-8-yl {
        order: 8
    }
    .order-9-yl {
        order: 9
    }
    .order-10-yl {
        order: 10
    }
    .col-f1-yl {
        display: block;
        flex: 1
    }
}

.offset-0 {
    margin-left: 0
}

.offset-1 {
    margin-left: 8.33333%
}

.offset-2 {
    margin-left: 16.66667%
}

.offset-3 {
    margin-left: 25%
}

.offset-4 {
    margin-left: 33.33333%
}

.offset-5 {
    margin-left: 41.66667%
}

.offset-6 {
    margin-left: 50%
}

.offset-7 {
    margin-left: 58.33333%
}

.offset-8 {
    margin-left: 66.66667%
}

.offset-9 {
    margin-left: 75%
}

.offset-10 {
    margin-left: 83.33333%
}

.offset-11 {
    margin-left: 91.66667%
}

.offset-l-0 {
    margin-left: 0
}

.offset-l-1 {
    margin-left: 8.33333%
}

.offset-l-2 {
    margin-left: 16.66667%
}

.offset-l-3 {
    margin-left: 25%
}

.offset-l-4 {
    margin-left: 33.33333%
}

.offset-l-5 {
    margin-left: 41.66667%
}

.offset-l-6 {
    margin-left: 50%
}

.offset-l-7 {
    margin-left: 58.33333%
}

.offset-l-8 {
    margin-left: 66.66667%
}

.offset-l-9 {
    margin-left: 75%
}

.offset-l-10 {
    margin-left: 83.33333%
}

.offset-l-11 {
    margin-left: 91.66667%
}

.offset-r-0 {
    margin-right: 0
}

.offset-r-1 {
    margin-right: 8.33333%
}

.offset-r-2 {
    margin-right: 16.66667%
}

.offset-r-3 {
    margin-right: 25%
}

.offset-r-4 {
    margin-right: 33.33333%
}

.offset-r-5 {
    margin-right: 41.66667%
}

.offset-r-6 {
    margin-right: 50%
}

.offset-r-7 {
    margin-right: 58.33333%
}

.offset-r-8 {
    margin-right: 66.66667%
}

.offset-r-9 {
    margin-right: 75%
}

.offset-r-10 {
    margin-right: 83.33333%
}

.offset-r-11 {
    margin-right: 91.66667%
}

.gx-0 {
    --bs-gutter-x: 0px
}

.gy-0 {
    --bs-gutter-y: 0px
}

.gx-1 {
    --bs-gutter-x: 1px
}

.gy-1 {
    --bs-gutter-y: 1px
}

.gx-2 {
    --bs-gutter-x: 2px
}

.gy-2 {
    --bs-gutter-y: 2px
}

.gx-10 {
    --bs-gutter-x: 10px
}

.gy-10 {
    --bs-gutter-y: 10px
}

.gx-12 {
    --bs-gutter-x: 12px
}

.gy-12 {
    --bs-gutter-y: 12px
}

.gx-16 {
    --bs-gutter-x: 16px
}

.gy-16 {
    --bs-gutter-y: 16px
}

.gx-20 {
    --bs-gutter-x: 20px
}

.gy-20 {
    --bs-gutter-y: 20px
}

.gx-22 {
    --bs-gutter-x: 22px
}

.gy-22 {
    --bs-gutter-y: 22px
}

.gx-24 {
    --bs-gutter-x: 24px
}

.gy-24 {
    --bs-gutter-y: 24px
}

.gx-30 {
    --bs-gutter-x: 30px
}

.gy-30 {
    --bs-gutter-y: 30px
}

.gx-32 {
    --bs-gutter-x: 32px
}

.gy-32 {
    --bs-gutter-y: 32px
}

.gx-34 {
    --bs-gutter-x: 34px
}

.gy-34 {
    --bs-gutter-y: 34px
}

.gx-36 {
    --bs-gutter-x: 36px
}

.gy-36 {
    --bs-gutter-y: 36px
}

.gx-40 {
    --bs-gutter-x: 40px
}

.gy-40 {
    --bs-gutter-y: 40px
}

.gx-42 {
    --bs-gutter-x: 42px
}

.gy-42 {
    --bs-gutter-y: 42px
}

.gx-46 {
    --bs-gutter-x: 46px
}

.gy-46 {
    --bs-gutter-y: 46px
}

.gx-48 {
    --bs-gutter-x: 48px
}

.gy-48 {
    --bs-gutter-y: 48px
}

.gx-50 {
    --bs-gutter-x: 50px
}

.gy-50 {
    --bs-gutter-y: 50px
}

.gx-54 {
    --bs-gutter-x: 54px
}

.gy-54 {
    --bs-gutter-y: 54px
}

.gx-56 {
    --bs-gutter-x: 56px
}

.gy-56 {
    --bs-gutter-y: 56px
}

.gx-60 {
    --bs-gutter-x: 60px
}

.gy-60 {
    --bs-gutter-y: 60px
}

.gx-64 {
    --bs-gutter-x: 64px
}

.gy-64 {
    --bs-gutter-y: 64px
}

.gx-70 {
    --bs-gutter-x: 70px
}

.gy-70 {
    --bs-gutter-y: 70px
}

.gx-75 {
    --bs-gutter-x: 75px
}

.gy-75 {
    --bs-gutter-y: 75px
}

.gx-80 {
    --bs-gutter-x: 80px
}

.gy-80 {
    --bs-gutter-y: 80px
}

.gx-90 {
    --bs-gutter-x: 90px
}

.gy-90 {
    --bs-gutter-y: 90px
}

.gx-100 {
    --bs-gutter-x: 100px
}

.gy-100 {
    --bs-gutter-y: 100px
}

@media (min-width:360px) {
    .col-auto-ss {
        display: block;
        flex: 0 0 auto;
        width: auto
    }
    .col-none-ss {
        display: none;
        flex: 0 0 0;
        width: 0
    }
    .col-1-ss {
        width: 8.33333%
    }
    .col-1-ss,
    .col-2-ss {
        display: block;
        flex: 0 0 auto
    }
    .col-2-ss {
        width: 16.66667%
    }
    .col-3-ss {
        width: 25%
    }
    .col-3-ss,
    .col-4-ss {
        display: block;
        flex: 0 0 auto
    }
    .col-4-ss {
        width: 33.33333%
    }
    .col-5-ss {
        width: 41.66667%
    }
    .col-5-ss,
    .col-6-ss {
        display: block;
        flex: 0 0 auto
    }
    .col-6-ss {
        width: 50%
    }
    .col-7-ss {
        width: 58.33333%
    }
    .col-7-ss,
    .col-8-ss {
        display: block;
        flex: 0 0 auto
    }
    .col-8-ss {
        width: 66.66667%
    }
    .col-9-ss {
        width: 75%
    }
    .col-10-ss,
    .col-9-ss {
        display: block;
        flex: 0 0 auto
    }
    .col-10-ss {
        width: 83.33333%
    }
    .col-11-ss {
        width: 91.66667%
    }
    .col-11-ss,
    .col-12-ss {
        display: block;
        flex: 0 0 auto
    }
    .col-12-ss {
        width: 100%
    }
    .offset-0-ss>* {
        margin-left: 0
    }
    .offset-1-ss>* {
        margin-left: 8.33333%
    }
    .offset-2-ss>* {
        margin-left: 16.66667%
    }
    .offset-3-ss>* {
        margin-left: 25%
    }
    .offset-4-ss>* {
        margin-left: 33.33333%
    }
    .offset-5-ss>* {
        margin-left: 41.66667%
    }
    .offset-6-ss>* {
        margin-left: 50%
    }
    .offset-7-ss>* {
        margin-left: 58.33333%
    }
    .offset-8-ss>* {
        margin-left: 66.66667%
    }
    .offset-9-ss>* {
        margin-left: 75%
    }
    .offset-10-ss>* {
        margin-left: 83.33333%
    }
    .offset-11-ss>* {
        margin-left: 91.66667%
    }
    .gx-0-ss {
        --bs-gutter-x: 0px
    }
    .gy-0-ss {
        --bs-gutter-y: 0px
    }
    .gx-1-ss {
        --bs-gutter-x: 1px
    }
    .gy-1-ss {
        --bs-gutter-y: 1px
    }
    .gx-2-ss {
        --bs-gutter-x: 2px
    }
    .gy-2-ss {
        --bs-gutter-y: 2px
    }
    .gx-10-ss {
        --bs-gutter-x: 10px
    }
    .gy-10-ss {
        --bs-gutter-y: 10px
    }
    .gx-12-ss {
        --bs-gutter-x: 12px
    }
    .gy-12-ss {
        --bs-gutter-y: 12px
    }
    .gx-16-ss {
        --bs-gutter-x: 16px
    }
    .gy-16-ss {
        --bs-gutter-y: 16px
    }
    .gx-20-ss {
        --bs-gutter-x: 20px
    }
    .gy-20-ss {
        --bs-gutter-y: 20px
    }
    .gx-22-ss {
        --bs-gutter-x: 22px
    }
    .gy-22-ss {
        --bs-gutter-y: 22px
    }
    .gx-24-ss {
        --bs-gutter-x: 24px
    }
    .gy-24-ss {
        --bs-gutter-y: 24px
    }
    .gx-30-ss {
        --bs-gutter-x: 30px
    }
    .gy-30-ss {
        --bs-gutter-y: 30px
    }
    .gx-32-ss {
        --bs-gutter-x: 32px
    }
    .gy-32-ss {
        --bs-gutter-y: 32px
    }
    .gx-34-ss {
        --bs-gutter-x: 34px
    }
    .gy-34-ss {
        --bs-gutter-y: 34px
    }
    .gx-36-ss {
        --bs-gutter-x: 36px
    }
    .gy-36-ss {
        --bs-gutter-y: 36px
    }
    .gx-40-ss {
        --bs-gutter-x: 40px
    }
    .gy-40-ss {
        --bs-gutter-y: 40px
    }
    .gx-42-ss {
        --bs-gutter-x: 42px
    }
    .gy-42-ss {
        --bs-gutter-y: 42px
    }
    .gx-46-ss {
        --bs-gutter-x: 46px
    }
    .gy-46-ss {
        --bs-gutter-y: 46px
    }
    .gx-48-ss {
        --bs-gutter-x: 48px
    }
    .gy-48-ss {
        --bs-gutter-y: 48px
    }
    .gx-50-ss {
        --bs-gutter-x: 50px
    }
    .gy-50-ss {
        --bs-gutter-y: 50px
    }
    .gx-54-ss {
        --bs-gutter-x: 54px
    }
    .gy-54-ss {
        --bs-gutter-y: 54px
    }
    .gx-56-ss {
        --bs-gutter-x: 56px
    }
    .gy-56-ss {
        --bs-gutter-y: 56px
    }
    .gx-60-ss {
        --bs-gutter-x: 60px
    }
    .gy-60-ss {
        --bs-gutter-y: 60px
    }
    .gx-64-ss {
        --bs-gutter-x: 64px
    }
    .gy-64-ss {
        --bs-gutter-y: 64px
    }
    .gx-70-ss {
        --bs-gutter-x: 70px
    }
    .gy-70-ss {
        --bs-gutter-y: 70px
    }
    .gx-75-ss {
        --bs-gutter-x: 75px
    }
    .gy-75-ss {
        --bs-gutter-y: 75px
    }
    .gx-80-ss {
        --bs-gutter-x: 80px
    }
    .gy-80-ss {
        --bs-gutter-y: 80px
    }
    .gx-90-ss {
        --bs-gutter-x: 90px
    }
    .gy-90-ss {
        --bs-gutter-y: 90px
    }
    .gx-100-ss {
        --bs-gutter-x: 100px
    }
    .gy-100-ss {
        --bs-gutter-y: 100px
    }
}

@media (min-width:420px) {
    .col-auto-sx {
        display: block;
        flex: 0 0 auto;
        width: auto
    }
    .col-none-sx {
        display: none;
        flex: 0 0 0;
        width: 0
    }
    .col-1-sx {
        width: 8.33333%
    }
    .col-1-sx,
    .col-2-sx {
        display: block;
        flex: 0 0 auto
    }
    .col-2-sx {
        width: 16.66667%
    }
    .col-3-sx {
        width: 25%
    }
    .col-3-sx,
    .col-4-sx {
        display: block;
        flex: 0 0 auto
    }
    .col-4-sx {
        width: 33.33333%
    }
    .col-5-sx {
        width: 41.66667%
    }
    .col-5-sx,
    .col-6-sx {
        display: block;
        flex: 0 0 auto
    }
    .col-6-sx {
        width: 50%
    }
    .col-7-sx {
        width: 58.33333%
    }
    .col-7-sx,
    .col-8-sx {
        display: block;
        flex: 0 0 auto
    }
    .col-8-sx {
        width: 66.66667%
    }
    .col-9-sx {
        width: 75%
    }
    .col-10-sx,
    .col-9-sx {
        display: block;
        flex: 0 0 auto
    }
    .col-10-sx {
        width: 83.33333%
    }
    .col-11-sx {
        width: 91.66667%
    }
    .col-11-sx,
    .col-12-sx {
        display: block;
        flex: 0 0 auto
    }
    .col-12-sx {
        width: 100%
    }
    .offset-0-sx>* {
        margin-left: 0
    }
    .offset-1-sx>* {
        margin-left: 8.33333%
    }
    .offset-2-sx>* {
        margin-left: 16.66667%
    }
    .offset-3-sx>* {
        margin-left: 25%
    }
    .offset-4-sx>* {
        margin-left: 33.33333%
    }
    .offset-5-sx>* {
        margin-left: 41.66667%
    }
    .offset-6-sx>* {
        margin-left: 50%
    }
    .offset-7-sx>* {
        margin-left: 58.33333%
    }
    .offset-8-sx>* {
        margin-left: 66.66667%
    }
    .offset-9-sx>* {
        margin-left: 75%
    }
    .offset-10-sx>* {
        margin-left: 83.33333%
    }
    .offset-11-sx>* {
        margin-left: 91.66667%
    }
    .gx-0-sx {
        --bs-gutter-x: 0px
    }
    .gy-0-sx {
        --bs-gutter-y: 0px
    }
    .gx-1-sx {
        --bs-gutter-x: 1px
    }
    .gy-1-sx {
        --bs-gutter-y: 1px
    }
    .gx-2-sx {
        --bs-gutter-x: 2px
    }
    .gy-2-sx {
        --bs-gutter-y: 2px
    }
    .gx-10-sx {
        --bs-gutter-x: 10px
    }
    .gy-10-sx {
        --bs-gutter-y: 10px
    }
    .gx-12-sx {
        --bs-gutter-x: 12px
    }
    .gy-12-sx {
        --bs-gutter-y: 12px
    }
    .gx-16-sx {
        --bs-gutter-x: 16px
    }
    .gy-16-sx {
        --bs-gutter-y: 16px
    }
    .gx-20-sx {
        --bs-gutter-x: 20px
    }
    .gy-20-sx {
        --bs-gutter-y: 20px
    }
    .gx-22-sx {
        --bs-gutter-x: 22px
    }
    .gy-22-sx {
        --bs-gutter-y: 22px
    }
    .gx-24-sx {
        --bs-gutter-x: 24px
    }
    .gy-24-sx {
        --bs-gutter-y: 24px
    }
    .gx-30-sx {
        --bs-gutter-x: 30px
    }
    .gy-30-sx {
        --bs-gutter-y: 30px
    }
    .gx-32-sx {
        --bs-gutter-x: 32px
    }
    .gy-32-sx {
        --bs-gutter-y: 32px
    }
    .gx-34-sx {
        --bs-gutter-x: 34px
    }
    .gy-34-sx {
        --bs-gutter-y: 34px
    }
    .gx-36-sx {
        --bs-gutter-x: 36px
    }
    .gy-36-sx {
        --bs-gutter-y: 36px
    }
    .gx-40-sx {
        --bs-gutter-x: 40px
    }
    .gy-40-sx {
        --bs-gutter-y: 40px
    }
    .gx-42-sx {
        --bs-gutter-x: 42px
    }
    .gy-42-sx {
        --bs-gutter-y: 42px
    }
    .gx-46-sx {
        --bs-gutter-x: 46px
    }
    .gy-46-sx {
        --bs-gutter-y: 46px
    }
    .gx-48-sx {
        --bs-gutter-x: 48px
    }
    .gy-48-sx {
        --bs-gutter-y: 48px
    }
    .gx-50-sx {
        --bs-gutter-x: 50px
    }
    .gy-50-sx {
        --bs-gutter-y: 50px
    }
    .gx-54-sx {
        --bs-gutter-x: 54px
    }
    .gy-54-sx {
        --bs-gutter-y: 54px
    }
    .gx-56-sx {
        --bs-gutter-x: 56px
    }
    .gy-56-sx {
        --bs-gutter-y: 56px
    }
    .gx-60-sx {
        --bs-gutter-x: 60px
    }
    .gy-60-sx {
        --bs-gutter-y: 60px
    }
    .gx-64-sx {
        --bs-gutter-x: 64px
    }
    .gy-64-sx {
        --bs-gutter-y: 64px
    }
    .gx-70-sx {
        --bs-gutter-x: 70px
    }
    .gy-70-sx {
        --bs-gutter-y: 70px
    }
    .gx-75-sx {
        --bs-gutter-x: 75px
    }
    .gy-75-sx {
        --bs-gutter-y: 75px
    }
    .gx-80-sx {
        --bs-gutter-x: 80px
    }
    .gy-80-sx {
        --bs-gutter-y: 80px
    }
    .gx-90-sx {
        --bs-gutter-x: 90px
    }
    .gy-90-sx {
        --bs-gutter-y: 90px
    }
    .gx-100-sx {
        --bs-gutter-x: 100px
    }
    .gy-100-sx {
        --bs-gutter-y: 100px
    }
}

@media (min-width:576px) {
    .col-auto-sm {
        display: block;
        flex: 0 0 auto;
        width: auto
    }
    .col-none-sm {
        display: none;
        flex: 0 0 0;
        width: 0
    }
    .col-1-sm {
        width: 8.33333%
    }
    .col-1-sm,
    .col-2-sm {
        display: block;
        flex: 0 0 auto
    }
    .col-2-sm {
        width: 16.66667%
    }
    .col-3-sm {
        width: 25%
    }
    .col-3-sm,
    .col-4-sm {
        display: block;
        flex: 0 0 auto
    }
    .col-4-sm {
        width: 33.33333%
    }
    .col-5-sm {
        width: 41.66667%
    }
    .col-5-sm,
    .col-6-sm {
        display: block;
        flex: 0 0 auto
    }
    .col-6-sm {
        width: 50%
    }
    .col-7-sm {
        width: 58.33333%
    }
    .col-7-sm,
    .col-8-sm {
        display: block;
        flex: 0 0 auto
    }
    .col-8-sm {
        width: 66.66667%
    }
    .col-9-sm {
        width: 75%
    }
    .col-10-sm,
    .col-9-sm {
        display: block;
        flex: 0 0 auto
    }
    .col-10-sm {
        width: 83.33333%
    }
    .col-11-sm {
        width: 91.66667%
    }
    .col-11-sm,
    .col-12-sm {
        display: block;
        flex: 0 0 auto
    }
    .col-12-sm {
        width: 100%
    }
    .offset-0-sm>* {
        margin-left: 0
    }
    .offset-1-sm>* {
        margin-left: 8.33333%
    }
    .offset-2-sm>* {
        margin-left: 16.66667%
    }
    .offset-3-sm>* {
        margin-left: 25%
    }
    .offset-4-sm>* {
        margin-left: 33.33333%
    }
    .offset-5-sm>* {
        margin-left: 41.66667%
    }
    .offset-6-sm>* {
        margin-left: 50%
    }
    .offset-7-sm>* {
        margin-left: 58.33333%
    }
    .offset-8-sm>* {
        margin-left: 66.66667%
    }
    .offset-9-sm>* {
        margin-left: 75%
    }
    .offset-10-sm>* {
        margin-left: 83.33333%
    }
    .offset-11-sm>* {
        margin-left: 91.66667%
    }
    .gx-0-sm {
        --bs-gutter-x: 0px
    }
    .gy-0-sm {
        --bs-gutter-y: 0px
    }
    .gx-1-sm {
        --bs-gutter-x: 1px
    }
    .gy-1-sm {
        --bs-gutter-y: 1px
    }
    .gx-2-sm {
        --bs-gutter-x: 2px
    }
    .gy-2-sm {
        --bs-gutter-y: 2px
    }
    .gx-10-sm {
        --bs-gutter-x: 10px
    }
    .gy-10-sm {
        --bs-gutter-y: 10px
    }
    .gx-12-sm {
        --bs-gutter-x: 12px
    }
    .gy-12-sm {
        --bs-gutter-y: 12px
    }
    .gx-16-sm {
        --bs-gutter-x: 16px
    }
    .gy-16-sm {
        --bs-gutter-y: 16px
    }
    .gx-20-sm {
        --bs-gutter-x: 20px
    }
    .gy-20-sm {
        --bs-gutter-y: 20px
    }
    .gx-22-sm {
        --bs-gutter-x: 22px
    }
    .gy-22-sm {
        --bs-gutter-y: 22px
    }
    .gx-24-sm {
        --bs-gutter-x: 24px
    }
    .gy-24-sm {
        --bs-gutter-y: 24px
    }
    .gx-30-sm {
        --bs-gutter-x: 30px
    }
    .gy-30-sm {
        --bs-gutter-y: 30px
    }
    .gx-32-sm {
        --bs-gutter-x: 32px
    }
    .gy-32-sm {
        --bs-gutter-y: 32px
    }
    .gx-34-sm {
        --bs-gutter-x: 34px
    }
    .gy-34-sm {
        --bs-gutter-y: 34px
    }
    .gx-36-sm {
        --bs-gutter-x: 36px
    }
    .gy-36-sm {
        --bs-gutter-y: 36px
    }
    .gx-40-sm {
        --bs-gutter-x: 40px
    }
    .gy-40-sm {
        --bs-gutter-y: 40px
    }
    .gx-42-sm {
        --bs-gutter-x: 42px
    }
    .gy-42-sm {
        --bs-gutter-y: 42px
    }
    .gx-46-sm {
        --bs-gutter-x: 46px
    }
    .gy-46-sm {
        --bs-gutter-y: 46px
    }
    .gx-48-sm {
        --bs-gutter-x: 48px
    }
    .gy-48-sm {
        --bs-gutter-y: 48px
    }
    .gx-50-sm {
        --bs-gutter-x: 50px
    }
    .gy-50-sm {
        --bs-gutter-y: 50px
    }
    .gx-54-sm {
        --bs-gutter-x: 54px
    }
    .gy-54-sm {
        --bs-gutter-y: 54px
    }
    .gx-56-sm {
        --bs-gutter-x: 56px
    }
    .gy-56-sm {
        --bs-gutter-y: 56px
    }
    .gx-60-sm {
        --bs-gutter-x: 60px
    }
    .gy-60-sm {
        --bs-gutter-y: 60px
    }
    .gx-64-sm {
        --bs-gutter-x: 64px
    }
    .gy-64-sm {
        --bs-gutter-y: 64px
    }
    .gx-70-sm {
        --bs-gutter-x: 70px
    }
    .gy-70-sm {
        --bs-gutter-y: 70px
    }
    .gx-75-sm {
        --bs-gutter-x: 75px
    }
    .gy-75-sm {
        --bs-gutter-y: 75px
    }
    .gx-80-sm {
        --bs-gutter-x: 80px
    }
    .gy-80-sm {
        --bs-gutter-y: 80px
    }
    .gx-90-sm {
        --bs-gutter-x: 90px
    }
    .gy-90-sm {
        --bs-gutter-y: 90px
    }
    .gx-100-sm {
        --bs-gutter-x: 100px
    }
    .gy-100-sm {
        --bs-gutter-y: 100px
    }
}

@media (min-width:768px) {
    .col-auto-md {
        display: block;
        flex: 0 0 auto;
        width: auto
    }
    .col-none-md {
        display: none;
        flex: 0 0 0;
        width: 0
    }
    .col-1-md {
        width: 8.33333%
    }
    .col-1-md,
    .col-2-md {
        display: block;
        flex: 0 0 auto
    }
    .col-2-md {
        width: 16.66667%
    }
    .col-3-md {
        width: 25%
    }
    .col-3-md,
    .col-4-md {
        display: block;
        flex: 0 0 auto
    }
    .col-4-md {
        width: 33.33333%
    }
    .col-5-md {
        width: 41.66667%
    }
    .col-5-md,
    .col-6-md {
        display: block;
        flex: 0 0 auto
    }
    .col-6-md {
        width: 50%
    }
    .col-7-md {
        width: 58.33333%
    }
    .col-7-md,
    .col-8-md {
        display: block;
        flex: 0 0 auto
    }
    .col-8-md {
        width: 66.66667%
    }
    .col-9-md {
        width: 75%
    }
    .col-10-md,
    .col-9-md {
        display: block;
        flex: 0 0 auto
    }
    .col-10-md {
        width: 83.33333%
    }
    .col-11-md {
        width: 91.66667%
    }
    .col-11-md,
    .col-12-md {
        display: block;
        flex: 0 0 auto
    }
    .col-12-md {
        width: 100%
    }
    .offset-0-md>* {
        margin-left: 0
    }
    .offset-1-md>* {
        margin-left: 8.33333%
    }
    .offset-2-md>* {
        margin-left: 16.66667%
    }
    .offset-3-md>* {
        margin-left: 25%
    }
    .offset-4-md>* {
        margin-left: 33.33333%
    }
    .offset-5-md>* {
        margin-left: 41.66667%
    }
    .offset-6-md>* {
        margin-left: 50%
    }
    .offset-7-md>* {
        margin-left: 58.33333%
    }
    .offset-8-md>* {
        margin-left: 66.66667%
    }
    .offset-9-md>* {
        margin-left: 75%
    }
    .offset-10-md>* {
        margin-left: 83.33333%
    }
    .offset-11-md>* {
        margin-left: 91.66667%
    }
    .gx-0-md {
        --bs-gutter-x: 0px
    }
    .gy-0-md {
        --bs-gutter-y: 0px
    }
    .gx-1-md {
        --bs-gutter-x: 1px
    }
    .gy-1-md {
        --bs-gutter-y: 1px
    }
    .gx-2-md {
        --bs-gutter-x: 2px
    }
    .gy-2-md {
        --bs-gutter-y: 2px
    }
    .gx-10-md {
        --bs-gutter-x: 10px
    }
    .gy-10-md {
        --bs-gutter-y: 10px
    }
    .gx-12-md {
        --bs-gutter-x: 12px
    }
    .gy-12-md {
        --bs-gutter-y: 12px
    }
    .gx-16-md {
        --bs-gutter-x: 16px
    }
    .gy-16-md {
        --bs-gutter-y: 16px
    }
    .gx-20-md {
        --bs-gutter-x: 20px
    }
    .gy-20-md {
        --bs-gutter-y: 20px
    }
    .gx-22-md {
        --bs-gutter-x: 22px
    }
    .gy-22-md {
        --bs-gutter-y: 22px
    }
    .gx-24-md {
        --bs-gutter-x: 24px
    }
    .gy-24-md {
        --bs-gutter-y: 24px
    }
    .gx-30-md {
        --bs-gutter-x: 30px
    }
    .gy-30-md {
        --bs-gutter-y: 30px
    }
    .gx-32-md {
        --bs-gutter-x: 32px
    }
    .gy-32-md {
        --bs-gutter-y: 32px
    }
    .gx-34-md {
        --bs-gutter-x: 34px
    }
    .gy-34-md {
        --bs-gutter-y: 34px
    }
    .gx-36-md {
        --bs-gutter-x: 36px
    }
    .gy-36-md {
        --bs-gutter-y: 36px
    }
    .gx-40-md {
        --bs-gutter-x: 40px
    }
    .gy-40-md {
        --bs-gutter-y: 40px
    }
    .gx-42-md {
        --bs-gutter-x: 42px
    }
    .gy-42-md {
        --bs-gutter-y: 42px
    }
    .gx-46-md {
        --bs-gutter-x: 46px
    }
    .gy-46-md {
        --bs-gutter-y: 46px
    }
    .gx-48-md {
        --bs-gutter-x: 48px
    }
    .gy-48-md {
        --bs-gutter-y: 48px
    }
    .gx-50-md {
        --bs-gutter-x: 50px
    }
    .gy-50-md {
        --bs-gutter-y: 50px
    }
    .gx-54-md {
        --bs-gutter-x: 54px
    }
    .gy-54-md {
        --bs-gutter-y: 54px
    }
    .gx-56-md {
        --bs-gutter-x: 56px
    }
    .gy-56-md {
        --bs-gutter-y: 56px
    }
    .gx-60-md {
        --bs-gutter-x: 60px
    }
    .gy-60-md {
        --bs-gutter-y: 60px
    }
    .gx-64-md {
        --bs-gutter-x: 64px
    }
    .gy-64-md {
        --bs-gutter-y: 64px
    }
    .gx-70-md {
        --bs-gutter-x: 70px
    }
    .gy-70-md {
        --bs-gutter-y: 70px
    }
    .gx-75-md {
        --bs-gutter-x: 75px
    }
    .gy-75-md {
        --bs-gutter-y: 75px
    }
    .gx-80-md {
        --bs-gutter-x: 80px
    }
    .gy-80-md {
        --bs-gutter-y: 80px
    }
    .gx-90-md {
        --bs-gutter-x: 90px
    }
    .gy-90-md {
        --bs-gutter-y: 90px
    }
    .gx-100-md {
        --bs-gutter-x: 100px
    }
    .gy-100-md {
        --bs-gutter-y: 100px
    }
}

@media (min-width:1024px) {
    .col-auto-lg {
        display: block;
        flex: 0 0 auto;
        width: auto
    }
    .col-none-lg {
        display: none;
        flex: 0 0 0;
        width: 0
    }
    .col-1-lg {
        width: 8.33333%
    }
    .col-1-lg,
    .col-2-lg {
        display: block;
        flex: 0 0 auto
    }
    .col-2-lg {
        width: 16.66667%
    }
    .col-3-lg {
        width: 25%
    }
    .col-3-lg,
    .col-4-lg {
        display: block;
        flex: 0 0 auto
    }
    .col-4-lg {
        width: 33.33333%
    }
    .col-5-lg {
        width: 41.66667%
    }
    .col-5-lg,
    .col-6-lg {
        display: block;
        flex: 0 0 auto
    }
    .col-6-lg {
        width: 50%
    }
    .col-7-lg {
        width: 58.33333%
    }
    .col-7-lg,
    .col-8-lg {
        display: block;
        flex: 0 0 auto
    }
    .col-8-lg {
        width: 66.66667%
    }
    .col-9-lg {
        width: 75%
    }
    .col-10-lg,
    .col-9-lg {
        display: block;
        flex: 0 0 auto
    }
    .col-10-lg {
        width: 83.33333%
    }
    .col-11-lg {
        width: 91.66667%
    }
    .col-11-lg,
    .col-12-lg {
        display: block;
        flex: 0 0 auto
    }
    .col-12-lg {
        width: 100%
    }
    .offset-0-lg>* {
        margin-left: 0
    }
    .offset-1-lg>* {
        margin-left: 8.33333%
    }
    .offset-2-lg>* {
        margin-left: 16.66667%
    }
    .offset-3-lg>* {
        margin-left: 25%
    }
    .offset-4-lg>* {
        margin-left: 33.33333%
    }
    .offset-5-lg>* {
        margin-left: 41.66667%
    }
    .offset-6-lg>* {
        margin-left: 50%
    }
    .offset-7-lg>* {
        margin-left: 58.33333%
    }
    .offset-8-lg>* {
        margin-left: 66.66667%
    }
    .offset-9-lg>* {
        margin-left: 75%
    }
    .offset-10-lg>* {
        margin-left: 83.33333%
    }
    .offset-11-lg>* {
        margin-left: 91.66667%
    }
    .gx-0-lg {
        --bs-gutter-x: 0px
    }
    .gy-0-lg {
        --bs-gutter-y: 0px
    }
    .gx-1-lg {
        --bs-gutter-x: 1px
    }
    .gy-1-lg {
        --bs-gutter-y: 1px
    }
    .gx-2-lg {
        --bs-gutter-x: 2px
    }
    .gy-2-lg {
        --bs-gutter-y: 2px
    }
    .gx-10-lg {
        --bs-gutter-x: 10px
    }
    .gy-10-lg {
        --bs-gutter-y: 10px
    }
    .gx-12-lg {
        --bs-gutter-x: 12px
    }
    .gy-12-lg {
        --bs-gutter-y: 12px
    }
    .gx-16-lg {
        --bs-gutter-x: 16px
    }
    .gy-16-lg {
        --bs-gutter-y: 16px
    }
    .gx-20-lg {
        --bs-gutter-x: 20px
    }
    .gy-20-lg {
        --bs-gutter-y: 20px
    }
    .gx-22-lg {
        --bs-gutter-x: 22px
    }
    .gy-22-lg {
        --bs-gutter-y: 22px
    }
    .gx-24-lg {
        --bs-gutter-x: 24px
    }
    .gy-24-lg {
        --bs-gutter-y: 24px
    }
    .gx-30-lg {
        --bs-gutter-x: 30px
    }
    .gy-30-lg {
        --bs-gutter-y: 30px
    }
    .gx-32-lg {
        --bs-gutter-x: 32px
    }
    .gy-32-lg {
        --bs-gutter-y: 32px
    }
    .gx-34-lg {
        --bs-gutter-x: 34px
    }
    .gy-34-lg {
        --bs-gutter-y: 34px
    }
    .gx-36-lg {
        --bs-gutter-x: 36px
    }
    .gy-36-lg {
        --bs-gutter-y: 36px
    }
    .gx-40-lg {
        --bs-gutter-x: 40px
    }
    .gy-40-lg {
        --bs-gutter-y: 40px
    }
    .gx-42-lg {
        --bs-gutter-x: 42px
    }
    .gy-42-lg {
        --bs-gutter-y: 42px
    }
    .gx-46-lg {
        --bs-gutter-x: 46px
    }
    .gy-46-lg {
        --bs-gutter-y: 46px
    }
    .gx-48-lg {
        --bs-gutter-x: 48px
    }
    .gy-48-lg {
        --bs-gutter-y: 48px
    }
    .gx-50-lg {
        --bs-gutter-x: 50px
    }
    .gy-50-lg {
        --bs-gutter-y: 50px
    }
    .gx-54-lg {
        --bs-gutter-x: 54px
    }
    .gy-54-lg {
        --bs-gutter-y: 54px
    }
    .gx-56-lg {
        --bs-gutter-x: 56px
    }
    .gy-56-lg {
        --bs-gutter-y: 56px
    }
    .gx-60-lg {
        --bs-gutter-x: 60px
    }
    .gy-60-lg {
        --bs-gutter-y: 60px
    }
    .gx-64-lg {
        --bs-gutter-x: 64px
    }
    .gy-64-lg {
        --bs-gutter-y: 64px
    }
    .gx-70-lg {
        --bs-gutter-x: 70px
    }
    .gy-70-lg {
        --bs-gutter-y: 70px
    }
    .gx-75-lg {
        --bs-gutter-x: 75px
    }
    .gy-75-lg {
        --bs-gutter-y: 75px
    }
    .gx-80-lg {
        --bs-gutter-x: 80px
    }
    .gy-80-lg {
        --bs-gutter-y: 80px
    }
    .gx-90-lg {
        --bs-gutter-x: 90px
    }
    .gy-90-lg {
        --bs-gutter-y: 90px
    }
    .gx-100-lg {
        --bs-gutter-x: 100px
    }
    .gy-100-lg {
        --bs-gutter-y: 100px
    }
}

@media (min-width:1280px) {
    .col-auto-xl {
        display: block;
        flex: 0 0 auto;
        width: auto
    }
    .col-none-xl {
        display: none;
        flex: 0 0 0;
        width: 0
    }
    .col-1-xl {
        width: 8.33333%
    }
    .col-1-xl,
    .col-2-xl {
        display: block;
        flex: 0 0 auto
    }
    .col-2-xl {
        width: 16.66667%
    }
    .col-3-xl {
        width: 25%
    }
    .col-3-xl,
    .col-4-xl {
        display: block;
        flex: 0 0 auto
    }
    .col-4-xl {
        width: 33.33333%
    }
    .col-5-xl {
        width: 41.66667%
    }
    .col-5-xl,
    .col-6-xl {
        display: block;
        flex: 0 0 auto
    }
    .col-6-xl {
        width: 50%
    }
    .col-7-xl {
        width: 58.33333%
    }
    .col-7-xl,
    .col-8-xl {
        display: block;
        flex: 0 0 auto
    }
    .col-8-xl {
        width: 66.66667%
    }
    .col-9-xl {
        width: 75%
    }
    .col-10-xl,
    .col-9-xl {
        display: block;
        flex: 0 0 auto
    }
    .col-10-xl {
        width: 83.33333%
    }
    .col-11-xl {
        width: 91.66667%
    }
    .col-11-xl,
    .col-12-xl {
        display: block;
        flex: 0 0 auto
    }
    .col-12-xl {
        width: 100%
    }
    .offset-0-xl>* {
        margin-left: 0
    }
    .offset-1-xl>* {
        margin-left: 8.33333%
    }
    .offset-2-xl>* {
        margin-left: 16.66667%
    }
    .offset-3-xl>* {
        margin-left: 25%
    }
    .offset-4-xl>* {
        margin-left: 33.33333%
    }
    .offset-5-xl>* {
        margin-left: 41.66667%
    }
    .offset-6-xl>* {
        margin-left: 50%
    }
    .offset-7-xl>* {
        margin-left: 58.33333%
    }
    .offset-8-xl>* {
        margin-left: 66.66667%
    }
    .offset-9-xl>* {
        margin-left: 75%
    }
    .offset-10-xl>* {
        margin-left: 83.33333%
    }
    .offset-11-xl>* {
        margin-left: 91.66667%
    }
    .gx-0-xl {
        --bs-gutter-x: 0px
    }
    .gy-0-xl {
        --bs-gutter-y: 0px
    }
    .gx-1-xl {
        --bs-gutter-x: 1px
    }
    .gy-1-xl {
        --bs-gutter-y: 1px
    }
    .gx-2-xl {
        --bs-gutter-x: 2px
    }
    .gy-2-xl {
        --bs-gutter-y: 2px
    }
    .gx-10-xl {
        --bs-gutter-x: 10px
    }
    .gy-10-xl {
        --bs-gutter-y: 10px
    }
    .gx-12-xl {
        --bs-gutter-x: 12px
    }
    .gy-12-xl {
        --bs-gutter-y: 12px
    }
    .gx-16-xl {
        --bs-gutter-x: 16px
    }
    .gy-16-xl {
        --bs-gutter-y: 16px
    }
    .gx-20-xl {
        --bs-gutter-x: 20px
    }
    .gy-20-xl {
        --bs-gutter-y: 20px
    }
    .gx-22-xl {
        --bs-gutter-x: 22px
    }
    .gy-22-xl {
        --bs-gutter-y: 22px
    }
    .gx-24-xl {
        --bs-gutter-x: 24px
    }
    .gy-24-xl {
        --bs-gutter-y: 24px
    }
    .gx-30-xl {
        --bs-gutter-x: 30px
    }
    .gy-30-xl {
        --bs-gutter-y: 30px
    }
    .gx-32-xl {
        --bs-gutter-x: 32px
    }
    .gy-32-xl {
        --bs-gutter-y: 32px
    }
    .gx-34-xl {
        --bs-gutter-x: 34px
    }
    .gy-34-xl {
        --bs-gutter-y: 34px
    }
    .gx-36-xl {
        --bs-gutter-x: 36px
    }
    .gy-36-xl {
        --bs-gutter-y: 36px
    }
    .gx-40-xl {
        --bs-gutter-x: 40px
    }
    .gy-40-xl {
        --bs-gutter-y: 40px
    }
    .gx-42-xl {
        --bs-gutter-x: 42px
    }
    .gy-42-xl {
        --bs-gutter-y: 42px
    }
    .gx-46-xl {
        --bs-gutter-x: 46px
    }
    .gy-46-xl {
        --bs-gutter-y: 46px
    }
    .gx-48-xl {
        --bs-gutter-x: 48px
    }
    .gy-48-xl {
        --bs-gutter-y: 48px
    }
    .gx-50-xl {
        --bs-gutter-x: 50px
    }
    .gy-50-xl {
        --bs-gutter-y: 50px
    }
    .gx-54-xl {
        --bs-gutter-x: 54px
    }
    .gy-54-xl {
        --bs-gutter-y: 54px
    }
    .gx-56-xl {
        --bs-gutter-x: 56px
    }
    .gy-56-xl {
        --bs-gutter-y: 56px
    }
    .gx-60-xl {
        --bs-gutter-x: 60px
    }
    .gy-60-xl {
        --bs-gutter-y: 60px
    }
    .gx-64-xl {
        --bs-gutter-x: 64px
    }
    .gy-64-xl {
        --bs-gutter-y: 64px
    }
    .gx-70-xl {
        --bs-gutter-x: 70px
    }
    .gy-70-xl {
        --bs-gutter-y: 70px
    }
    .gx-75-xl {
        --bs-gutter-x: 75px
    }
    .gy-75-xl {
        --bs-gutter-y: 75px
    }
    .gx-80-xl {
        --bs-gutter-x: 80px
    }
    .gy-80-xl {
        --bs-gutter-y: 80px
    }
    .gx-90-xl {
        --bs-gutter-x: 90px
    }
    .gy-90-xl {
        --bs-gutter-y: 90px
    }
    .gx-100-xl {
        --bs-gutter-x: 100px
    }
    .gy-100-xl {
        --bs-gutter-y: 100px
    }
}

@media (min-width:1440px) {
    .col-auto-yl {
        display: block;
        flex: 0 0 auto;
        width: auto
    }
    .col-none-yl {
        display: none;
        flex: 0 0 0;
        width: 0
    }
    .col-1-yl {
        width: 8.33333%
    }
    .col-1-yl,
    .col-2-yl {
        display: block;
        flex: 0 0 auto
    }
    .col-2-yl {
        width: 16.66667%
    }
    .col-3-yl {
        width: 25%
    }
    .col-3-yl,
    .col-4-yl {
        display: block;
        flex: 0 0 auto
    }
    .col-4-yl {
        width: 33.33333%
    }
    .col-5-yl {
        width: 41.66667%
    }
    .col-5-yl,
    .col-6-yl {
        display: block;
        flex: 0 0 auto
    }
    .col-6-yl {
        width: 50%
    }
    .col-7-yl {
        width: 58.33333%
    }
    .col-7-yl,
    .col-8-yl {
        display: block;
        flex: 0 0 auto
    }
    .col-8-yl {
        width: 66.66667%
    }
    .col-9-yl {
        width: 75%
    }
    .col-10-yl,
    .col-9-yl {
        display: block;
        flex: 0 0 auto
    }
    .col-10-yl {
        width: 83.33333%
    }
    .col-11-yl {
        width: 91.66667%
    }
    .col-11-yl,
    .col-12-yl {
        display: block;
        flex: 0 0 auto
    }
    .col-12-yl {
        width: 100%
    }
    .offset-0-yl>* {
        margin-left: 0
    }
    .offset-1-yl>* {
        margin-left: 8.33333%
    }
    .offset-2-yl>* {
        margin-left: 16.66667%
    }
    .offset-3-yl>* {
        margin-left: 25%
    }
    .offset-4-yl>* {
        margin-left: 33.33333%
    }
    .offset-5-yl>* {
        margin-left: 41.66667%
    }
    .offset-6-yl>* {
        margin-left: 50%
    }
    .offset-7-yl>* {
        margin-left: 58.33333%
    }
    .offset-8-yl>* {
        margin-left: 66.66667%
    }
    .offset-9-yl>* {
        margin-left: 75%
    }
    .offset-10-yl>* {
        margin-left: 83.33333%
    }
    .offset-11-yl>* {
        margin-left: 91.66667%
    }
    .gx-0-yl {
        --bs-gutter-x: 0px
    }
    .gy-0-yl {
        --bs-gutter-y: 0px
    }
    .gx-1-yl {
        --bs-gutter-x: 1px
    }
    .gy-1-yl {
        --bs-gutter-y: 1px
    }
    .gx-2-yl {
        --bs-gutter-x: 2px
    }
    .gy-2-yl {
        --bs-gutter-y: 2px
    }
    .gx-10-yl {
        --bs-gutter-x: 10px
    }
    .gy-10-yl {
        --bs-gutter-y: 10px
    }
    .gx-12-yl {
        --bs-gutter-x: 12px
    }
    .gy-12-yl {
        --bs-gutter-y: 12px
    }
    .gx-16-yl {
        --bs-gutter-x: 16px
    }
    .gy-16-yl {
        --bs-gutter-y: 16px
    }
    .gx-20-yl {
        --bs-gutter-x: 20px
    }
    .gy-20-yl {
        --bs-gutter-y: 20px
    }
    .gx-22-yl {
        --bs-gutter-x: 22px
    }
    .gy-22-yl {
        --bs-gutter-y: 22px
    }
    .gx-24-yl {
        --bs-gutter-x: 24px
    }
    .gy-24-yl {
        --bs-gutter-y: 24px
    }
    .gx-30-yl {
        --bs-gutter-x: 30px
    }
    .gy-30-yl {
        --bs-gutter-y: 30px
    }
    .gx-32-yl {
        --bs-gutter-x: 32px
    }
    .gy-32-yl {
        --bs-gutter-y: 32px
    }
    .gx-34-yl {
        --bs-gutter-x: 34px
    }
    .gy-34-yl {
        --bs-gutter-y: 34px
    }
    .gx-36-yl {
        --bs-gutter-x: 36px
    }
    .gy-36-yl {
        --bs-gutter-y: 36px
    }
    .gx-40-yl {
        --bs-gutter-x: 40px
    }
    .gy-40-yl {
        --bs-gutter-y: 40px
    }
    .gx-42-yl {
        --bs-gutter-x: 42px
    }
    .gy-42-yl {
        --bs-gutter-y: 42px
    }
    .gx-46-yl {
        --bs-gutter-x: 46px
    }
    .gy-46-yl {
        --bs-gutter-y: 46px
    }
    .gx-48-yl {
        --bs-gutter-x: 48px
    }
    .gy-48-yl {
        --bs-gutter-y: 48px
    }
    .gx-50-yl {
        --bs-gutter-x: 50px
    }
    .gy-50-yl {
        --bs-gutter-y: 50px
    }
    .gx-54-yl {
        --bs-gutter-x: 54px
    }
    .gy-54-yl {
        --bs-gutter-y: 54px
    }
    .gx-56-yl {
        --bs-gutter-x: 56px
    }
    .gy-56-yl {
        --bs-gutter-y: 56px
    }
    .gx-60-yl {
        --bs-gutter-x: 60px
    }
    .gy-60-yl {
        --bs-gutter-y: 60px
    }
    .gx-64-yl {
        --bs-gutter-x: 64px
    }
    .gy-64-yl {
        --bs-gutter-y: 64px
    }
    .gx-70-yl {
        --bs-gutter-x: 70px
    }
    .gy-70-yl {
        --bs-gutter-y: 70px
    }
    .gx-75-yl {
        --bs-gutter-x: 75px
    }
    .gy-75-yl {
        --bs-gutter-y: 75px
    }
    .gx-80-yl {
        --bs-gutter-x: 80px
    }
    .gy-80-yl {
        --bs-gutter-y: 80px
    }
    .gx-90-yl {
        --bs-gutter-x: 90px
    }
    .gy-90-yl {
        --bs-gutter-y: 90px
    }
    .gx-100-yl {
        --bs-gutter-x: 100px
    }
    .gy-100-yl {
        --bs-gutter-y: 100px
    }
}

.uppercase {
    text-transform: uppercase
}

@keyframes isShowed {
    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
        visibility: visible
    }
}

@keyframes lineThumbEffect {
    0% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 50%, 49% 49%, 0 50%, 0 50%);
        clip-path: polygon(0 50%, 100% 50%, 100% 50%, 49% 49%, 0 50%, 0 50%);
        opacity: 0
    }
    50% {
        -webkit-clip-path: polygon(0 100%, 100% 0, 100% 100%, 100% 100%, 0 0, 0 0);
        clip-path: polygon(0 100%, 100% 0, 100% 100%, 100% 100%, 0 0, 0 0);
        opacity: .5
    }
    to {
        -webkit-clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%, 100% 0, 0 0);
        clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%, 100% 0, 0 0);
        opacity: 1
    }
}

@media (min-width:1025px) {
    [class*=braneyeffect-],
    [class*=braneyeffectHeaderMenu-]>*,
    [class*=braneyeffectstagger-]>* {
        filter: blur(var(--blurEffect, 5px));
        opacity: var(--opacityEffect, 0);
        transform: translate(var(--translateX_effect, 0), var(--translateY_effect, 0)) rotateX(var(--rotateX_effect, 0)) rotateY(var(--rotateY_effect, 0));
        transform-box: fill-box;
        transform-origin: center;
        transition: var(--durationEffect, 1s) all;
        transition-delay: var(--delayEffect, 0)
    }
    [class*=braneyeffect-].animated,
    [class*=braneyeffectHeaderMenu-]>.animated,
    [class*=braneyeffectstagger-]>.animated {
        filter: blur(0);
        opacity: 1;
        rotate: 0deg;
        scale: 1;
        transform: translate(0) rotateX(0deg) rotateY(0deg) scale(1)
    }
    .braneyeffectHeaderMenu-down>* {
        --translateY_effect: var(--braneyeffectdown, -100%)
    }
    .braneyeffectstagger-up>* {
        --translateY_effect: var(--braneyeffectup, 100%)
    }
    .braneyeffectstagger-down>* {
        --translateY_effect: var(--braneyeffectdown, -100%)
    }
    .braneyeffectstagger-left>* {
        --translateX_effect: var(--braneyeffectleft, 100%)
    }
    .braneyeffectstagger-right>* {
        --translateX_effect: var(--braneyeffectright, -100%)
    }
    .braneyeffect-opacity {
        opacity: var(--opacityEffect, 0)
    }
    .braneyeffect-up {
        --translateY_effect: var(--braneyeffectup, 100%)
    }
    .braneyeffect-down {
        --translateY_effect: var(--braneyeffectdown, -100%)
    }
    .braneyeffect-left {
        --translateX_effect: var(--braneyeffectleft, 100%)
    }
    .braneyeffect-right {
        --translateX_effect: var(--braneyeffectright, -100%)
    }
    .braneycustom-clippath-down {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        transition: var(--durationEffect, 1s) all;
        transition-delay: var(--delayEffect, 0)
    }
    .braneycustom-clippath-down.animated {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
    }
    .braneycustom-clippath-right {
        -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        transition: var(--durationEffect, 1s) all;
        transition-delay: var(--delayEffect, 0)
    }
    .braneycustom-clippath-right.animated {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
    }
    .braneyeffect-scaleUp {
        scale: var(--braneyeffectscaleup, 0)
    }
    .braneyeffect-rotate {
        rotate: var(--braneyeffectrotate, 180deg)
    }
    .braneymotion-opacity {
        opacity: 0;
        transition: all .16s
    }
    .braneymotion-opacity.animated {
        opacity: var(--scoreEffect, 1)
    }
}

@media (min-width:1025px) and (prefers-reduced-motion) {
    [class*=braneyeffect-],
    [class*=braneyeffectstagger-]>*,
    [class*=braneymotion-] {
        filter: blur(0);
        opacity: 1;
        rotate: 0deg;
        scale: 1;
        transform: translateY(0) translateX(0);
        transition: none !important
    }
}

.plc-1,
.plc-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

@supports (-webkit-line-clamp:2) {
    .plc-2 {
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal
    }
}

.plc-3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

@supports (-webkit-line-clamp:3) {
    .plc-3 {
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal
    }
}

.plc-4 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

@supports (-webkit-line-clamp:4) {
    .plc-4 {
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal
    }
}

.plc-5 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

@supports (-webkit-line-clamp:5) {
    .plc-5 {
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal
    }
}

.plc-6 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

@supports (-webkit-line-clamp:6) {
    .plc-6 {
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal
    }
}

.plc-7 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

@supports (-webkit-line-clamp:7) {
    .plc-7 {
        -webkit-line-clamp: 7;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal
    }
}

.plc-8 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

@supports (-webkit-line-clamp:8) {
    .plc-8 {
        -webkit-line-clamp: 8;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal
    }
}

.plc-9 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

@supports (-webkit-line-clamp:9) {
    .plc-9 {
        -webkit-line-clamp: 9;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal
    }
}

.plc-10 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

@supports (-webkit-line-clamp:10) {
    .plc-10 {
        -webkit-line-clamp: 10;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal
    }
}

.f-jc-c {
    justify-content: center
}

@media screen and (min-width:1024px) {
    .p-sticky {
        position: sticky;
        top: 0
    }
}

.row.p-relative>.p-sticky {
    height: 100%
}

.tc {
    text-align: center
}

.tl {
    text-align: left
}

.tr {
    text-align: right
}

@media (min-width:360px) {
    .tc-ss {
        text-align: center
    }
    .tl-ss {
        text-align: left
    }
    .tr-ss {
        text-align: right
    }
}

@media (min-width:420px) {
    .tc-sx {
        text-align: center
    }
    .tl-sx {
        text-align: left
    }
    .tr-sx {
        text-align: right
    }
}

@media (min-width:576px) {
    .tc-sm {
        text-align: center
    }
    .tl-sm {
        text-align: left
    }
    .tr-sm {
        text-align: right
    }
}

@media (min-width:768px) {
    .tc-md {
        text-align: center
    }
    .tl-md {
        text-align: left
    }
    .tr-md {
        text-align: right
    }
}

@media (min-width:1024px) {
    .tc-lg {
        text-align: center
    }
    .tl-lg {
        text-align: left
    }
    .tr-lg {
        text-align: right
    }
}

@media (min-width:1280px) {
    .tc-xl {
        text-align: center
    }
    .tl-xl {
        text-align: left
    }
    .tr-xl {
        text-align: right
    }
}

@media (min-width:1440px) {
    .tc-yl {
        text-align: center
    }
    .tl-yl {
        text-align: left
    }
    .tr-yl {
        text-align: right
    }
}

.d-none {
    display: none !important
}

.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.writeux {
    color: currentColor;
    color: #1a1a1a;
    font-family: Sarabun, sans-serif !important;
    font-size: 16px;
    line-height: 24px;
    display: block;
}

.writeux.justify {
    text-align: justify
}

.writeux .float-left {
    float: left
}

.writeux .float-right {
    float: right;
    width: 120px
}

.writeux .clear-fix {
    clear: both
}

.writeux h3 {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px
}

.writeux h3~p,
.writeux p~h3 {
    margin-top: 10px
}

.writeux div[class|=col] {
    display: flex;
    flex-direction: column
}

.writeux div[class|=col] a[data-fancybox] {
    display: block;
    flex: 1
}

.writeux div[class|=col] a[data-fancybox] img {
    height: 100%;
    width: 100%
}

.writeux div[class|=col] img {
    display: block;
    flex: 1
}

.writeux div[class|=col] img.f-auto {
    flex: 0 0 auto
}

.writeux div[class|=col] img.full-w {
    width: 100%
}

.writeux p {
    line-height: inherit
}

.writeux p.inline-block {
    display: inline-block
}

.writeux p.inline {
    display: inline
}

.writeux br.cp {
    display: none
}

@media screen and (min-width:1024px) {
    .writeux br.cp {
        display: block
    }
}

.writeux br.tb {
    display: none
}

@media screen and (min-width:768px) {
    .writeux br.tb {
        display: block
    }
}

.writeux br.mb {
    display: none
}

@media screen and (min-width:768px) {
    .writeux br.mb {
        display: block
    }
}

.writeux span.block {
    display: block
}

.writeux span.inline-block {
    display: inline-block
}

.writeux ol,
.writeux ul {
    padding-left: 1.4rem
}

.writeux ol.style-none,
.writeux ul.style-none {
    list-style-type: none;
    padding-left: 0
}

.writeux ol.tab-left,
.writeux ul.tab-left {
    margin-left: 0
}

@media screen and (min-width:768px) {
    .writeux ol.tab-left,
    .writeux ul.tab-left {
        margin-left: 2rem
    }
}

.writeux img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    width: auto
}

@media screen and (max-width:767px) {
    .writeux img {
        width: 100% !important
    }
}

.writeux img.obj-contain {
    -o-object-fit: contain;
    object-fit: contain
}

.writeux img.obj-cover {
    -o-object-fit: cover;
    object-fit: cover
}

.writeux a {
    color: #00529C
}

.writeux a,
.writeux a[data-fancybox] {
    display: inline-block
}

.writeux figure figcaption {
    color: var(--cl-caption, currentColor);
    font-size: 14px;
    font-style: italic;
    text-align: center
}

.writeux .l3image {
    display: flex;
    flex-wrap: wrap;
    justify-items: stretch;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%
}

.writeux .l3image li:first-of-type {
    flex: 0 0 69.5%
}

.writeux .l3image li:nth-of-type(2) {
    top: 0
}

.writeux .l3image li:nth-of-type(2),
.writeux .l3image li:nth-of-type(3) {
    height: calc(50% - 5px);
    left: calc(69.5% + 10px);
    position: absolute;
    width: calc(30.5% - 10px)
}

.writeux .l3image li:nth-of-type(3) {
    top: calc(50% + 5px)
}

.writeux .l3image li>img {
    display: block;
    height: 100%
}

.writeux p.caption {
    color: #666;
    font-size: 14px;
    font-style: italic;
    line-height: 2;
    text-align: center
}

.writeux table {
    border: 1px solid #777;
    border-collapse: collapse;
    margin: 0 auto;
    max-width: 100%;
    padding: 0;
    width: 672px
}

.writeux table td,
.writeux table th {
    border: 1px solid #777;
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    padding: 14px 8px;
    text-align: center;
    vertical-align: middle
}

@media screen and (min-width:768px) {
    .writeux table td,
    .writeux table th {
        font-size: 18px;
        line-height: 24px
    }
}

.writeux table>thead th {
    font-weight: 700
}

@media screen and (max-width:1023px) {
    .writeux table thead,
    .writeux table thead>tr,
    .writeux table thead>tr>td {
        display: none
    }
    .writeux table tbody,
    .writeux table tbody>tr,
    .writeux table tbody>tr>td {
        display: block;
        text-align: left !important
    }
    .writeux table tbody>tr {
        border-width: 2px
    }
    .writeux table tbody>tr>td {
        align-items: center;
        display: flex;
        padding: 8px !important;
        position: relative;
        white-space: normal
    }
    .writeux table tbody>tr>td:before {
        align-items: center;
        align-self: stretch;
        content: attr(data-title);
        display: inline-flex;
        flex: 0 0 50%;
        font-weight: 700;
        margin-right: 8px;
        width: 50%
    }
    .writeux table tbody>tr>td:not(:first-child) {
        border-top: 1px solid #e1e1e1
    }
}

.share-socials {
    align-items: center;
    display: flex;
    position: relative;
    clear: both;
}

.share-socials>* {
    color: #666;
    font-size: 16px;
    line-height: 24px
}

.share-socials>ul {
    align-items: flex-end;
    display: flex;
    list-style-type: none;
    margin-left: 20px
}

.share-socials>ul>li+li {
    margin-left: 18px
}

.share-socials>ul>li>a,
.share-socials>ul>li>a>* {
    display: block;
    height: 18px;
    width: 18px
}

.share-socials>ul>li>a>* {
    -o-object-fit: contain;
    object-fit: contain
}

.share-socials>ul>li>a circle,
.share-socials>ul>li>a rect {
    transition: all .3s ease-out
}

.share-socials>ul>li>a:hover circle,
.share-socials>ul>li>a:hover rect {
    fill: #00529C
}

@media screen and (max-width:575px) {
    .share-socials>ul>li.copy-maker {
        position: static
    }
    .share-socials>ul>li.copy-maker .tooltip {
        max-width: 100%;
        width: 100%
    }
}

.copy-maker {
    position: relative
}

.copy-maker.is-actived .tooltip {
    display: flex
}

.copy-maker .tooltip {
    align-items: center;
    color: #000;
    display: flex;
    display: none;
    font-size: 12px;
    height: auto;
    justify-content: center;
    left: 0;
    line-height: 16px;
    position: absolute;
    top: calc(100% + 4px);
    width: auto
}

.copy-maker .tooltip-text {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .3);
    border-right: 0;
    display: inline-block;
    flex: 1;
    height: 30px;
    max-width: calc(var(--wContainer, 100vw)*.7);
    overflow: hidden;
    padding: 7px 10px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.copy-maker .tooltip-btn {
    align-items: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    background: #fff;
    border: 1px solid #737373;
    color: #000;
    display: flex;
    height: 30px;
    justify-content: center;
    outline: none;
    padding: 7px 10px;
    text-align: center
}

.copy-maker .tooltip-btn.is-clicked {
    cursor: context-menu;
    pointer-events: none
}

.copy-maker .tooltip-btn__text {
    padding-top: 3px
}

.copy-maker .tooltip-btn__icon {
    display: inline-block;
    height: 14px;
    margin-left: 4px;
    width: 16px
}

.copy-maker .tooltip-btn__icon>* {
    display: block;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%
}

.copy-maker .tooltip-btn:hover {
    background: #00529C;
    color: #fff
}

.copy-maker .tooltip-btn:hover [stroke]:not([stroke=none]) {
    stroke: #fff
}

.copy-maker .tooltip-btn:hover [fill]:not([fill=none]) {
    fill: #fff
}

.title-h2 {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px
}

.title-h2 * {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit
}

.group-title {
    align-items: center;
    display: flex;
    height: 30px;
    padding-left: 20px;
    position: relative
}

.group-title:before {
    left: 0
}

.group-title:before {
    position: absolute;
    top: 4px;
    width: 12px;
    content: '';
    border-left: 12px solid #02519b;
    border-top: 12px solid transparent;
    border-bottom: 10px solid transparent;
}

.title-wrapper {
    align-items: flex-start;
    display: flex;
    justify-content: space-between
}

.title-wrapper .custom-swiper-button {
    display: flex;
    justify-content: flex-end;
    position: relative
}

.title-wrapper .custom-swiper-button .swiper-button-next,
.title-wrapper .custom-swiper-button .swiper-button-prev {
    background: none;
    background-color: #f5f5f5;
    border-radius: 100%;
    bottom: auto;
    height: 46px;
    left: auto;
    margin-top: 0;
    position: static;
    right: auto;
    top: auto;
    transition: all .3s ease;
    width: 46px
}

.title-wrapper .custom-swiper-button .swiper-button-next:after,
.title-wrapper .custom-swiper-button .swiper-button-prev:after {
    content: none
}

.title-wrapper .custom-swiper-button .swiper-button-next>*,
.title-wrapper .custom-swiper-button .swiper-button-prev>* {
    width: 52.2%
}

.title-wrapper .custom-swiper-button .swiper-button-next svg [stroke]:not([stroke=none]),
.title-wrapper .custom-swiper-button .swiper-button-prev svg [stroke]:not([stroke=none]) {
    stroke: #000
}

.title-wrapper .custom-swiper-button .swiper-button-next svg [fill]:not([fill=none]),
.title-wrapper .custom-swiper-button .swiper-button-prev svg [fill]:not([fill=none]) {
    fill: #000
}

.title-wrapper .custom-swiper-button .swiper-button-next:hover,
.title-wrapper .custom-swiper-button .swiper-button-prev:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, .2)
}

.title-wrapper .custom-swiper-button .swiper-button-prev {
    margin-right: 8px;
    order: 1
}

.title-wrapper .custom-swiper-button .swiper-button-prev>* {
    transform: rotate(180deg)
}

.title-wrapper .custom-swiper-button .swiper-button-next {
    order: 2
}

.title-wrapper .btn-moreall {
    display: flex;
    justify-content: flex-end;
    position: relative
}

.title-wrapper .btn-moreall>* {
    margin-left: 8px
}

@media screen and (min-width:768px) {
    .title-wrapper .btn-moreall>* {
        margin-left: 30px
    }
}

.title-wrapper .custom-option {
    display: flex;
    flex-wrap: wrap;
    margin-left: -30px;
    margin-top: -10px;
    position: relative
}

.title-wrapper .custom-option-item {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    margin-left: 30px;
    margin-top: 10px
}

.title-wrapper .custom-option-item.is-actived {
    color: #00529C
}

.product-item-thumbs {
    border-radius: 4px;
    display: block;
    overflow: hidden;
    padding-top: 102.778%;
    position: relative
}

.product-item-thumbs>a,
.product-item-thumbs>img {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.product-item-thumbs img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.product-item-thumbs:after {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 4px;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform-origin: center;
    transition: opacity .36s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%;
    z-index: 2
}

.product-item-thumbs .btns {
    bottom: 0;
    display: none;
    left: 0;
    opacity: 0;
    position: absolute;
    transform: translateY(100%);
    visibility: hidden;
    width: 100%;
    z-index: 4
}

.product-item-thumbs .btns>* {
    align-items: center;
    background-color: #00529C;
    color: #fff;
    display: flex;
    flex: 1;
    font-size: 13px;
    justify-content: center;
    line-height: 16px;
    padding: 12px 6px;
    text-align: center
}

@media screen and (min-width:576px) {
    .product-item-thumbs .btns>* {
        padding: 12px 10px
    }
}

.product-item-thumbs .btns>:not(:first-child) {
    border-left: 1px solid #fff
}

.product-item-thumbs .btns>:hover {
    color: #faf327
}

.product-item-thumbs .category {
    align-items: center;
    border-radius: 4px;
    display: flex;
    font-size: 13px;
    font-weight: 400;
    justify-content: center;
    line-height: 16px;
    min-width: 50px;
    padding: 4px 12px;
    position: absolute;
    right: 8px;
    text-align: center;
    top: 8px
}

@media screen and (min-width:768px) {
    .product-item-thumbs .category {
        right: 12px;
        top: 12px
    }
}

.product-item-thumbs .category--hot {
    background-color: #db4444;
    color: #fff
}

.product-item-thumbs .category--new {
    background-color: #008736;
    color: #fff
}

.product-item-content {
    margin-top: 10px;
    text-align: center
}

@media screen and (min-width:768px) {
    .product-item-content {
        margin-top: 16px
    }
}

.product-item-content .name {
    color: #000;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    transition: opacity .2s ease-in-out
}

.product-item-content .desc {
    color: #777;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    margin-top: 2px
}

@media screen and (min-width:768px) {
    .product-item-content .desc {
        margin-top: 4px
    }
}

@keyframes isHandleProduct {
    to {
        opacity: 1;
        transform: translateY(0);
        visibility: visible
    }
}

.product-item:hover .product-item-thumbs:after {
    opacity: 1
}

.product-item:hover .product-item-thumbs .btns {
    animation: isHandleProduct .36s ease-out forwards;
    display: flex
}

.product-item:hover .product-item-content .name {
    color: #00529C
}

.project-item-thumbs {
    border-radius: 4px;
    cursor: pointer;
    height: 0;
    overflow: hidden;
    padding-top: 89%;
    position: relative;
    width: 100%
}

.project-item-thumbs img,
.project-item-thumbs svg {
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    transform: scale(1);
    transform-origin: center;
    transition: transform .7s cubic-bezier(.075, .82, .165, 1);
    width: 100%
}

.project-item-thumbs:before {
    border: 1px solid #00529C;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    z-index: 10
}

.project-item-thumbs:after,
.project-item-thumbs:before {
    bottom: 10px;
    content: "";
    left: 10px;
    opacity: 0;
    position: absolute;
    right: 10px;
    top: 10px
}

.project-item-thumbs:after {
    background-color: rgba(0, 0, 0, .2);
    transition: opacity .2s cubic-bezier(.075, .82, .165, 1)
}

.project-item-name {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    margin-top: 16px;
    text-align: center
}

.project-item:focus .project-item-thumbs>*,
.project-item:hover .project-item-thumbs>* {
    transform: scale(1.1)
}

.project-item:focus .project-item-thumbs:after,
.project-item:hover .project-item-thumbs:after {
    opacity: 1
}

.project-item:focus .project-item-thumbs:before,
.project-item:hover .project-item-thumbs:before {
    animation: lineThumbEffect .4s linear forwards
}

.project-item:focus .project-item-name,
.project-item:hover .project-item-name {
    color: #00529C
}

.video-showroom {
    height: 100%;
    position: relative;
    width: 100%
}

.video-showroom .poster,
.video-showroom video {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.video-showroom .btn-pause {
    display: none;
    height: 68px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    z-index: 111
}

.video-showroom .btn-pause>* {
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    width: 100%
}

.video-showroom.playing .btn-pause,
.video-showroom.playing .poster {
    display: none
}

.video-showroom.pausing .btn-pause {
    align-items: center;
    display: flex;
    justify-content: center
}

.video-showroom.pausing .poster {
    display: block;
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 100
}

.wrapper-more {
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center
}

.news-item {
    display: flex;
    flex-direction: column;
    height: 100%
}

.news-item__thumbs {
    border-radius: 4px;
    cursor: pointer;
    display: block;
    height: 0;
    overflow: hidden;
    padding-top: 60%;
    position: relative;
    width: 100%
}

.news-item__thumbs>* {
    border-radius: inherit;
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    top: 0;
    transition: transform .8s cubic-bezier(.175, .885, .32, 1.275);
    width: 100%
}

.news-item__thumbs:before {
    border: 1px solid #00529C;
    opacity: 0;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    z-index: 10
}

.news-item__thumbs:after,
.news-item__thumbs:before {
    bottom: 10px;
    content: "";
    left: 10px;
    position: absolute;
    right: 10px;
    top: 10px
}

.news-item__thumbs:after {
    background: transparent;
    transition: background .7s cubic-bezier(.075, .82, .165, 1);
    z-index: 1
}

.news-item-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding-top: 16px
}

.news-item-content .time {
    color: #4d4d4d;
    font-size: 13px;
    line-height: 16px
}

.news-item-content .name {
    color: #000;
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 4px;
    margin-top: 8px
}

.news-item-content .desc {
    color: #777;
    font-size: 16px;
    line-height: 24px
}

@media screen and (max-width:767px) {
    .news-item-content .desc {
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden
    }
}

.news-item:hover .news-item__thumbs>* {
    transform: scale(1.04)
}

.news-item:hover .news-item__thumbs:before {
    animation: lineThumbEffect .4s linear forwards
}

.news-item:hover .news-item__thumbs:after {
    background: rgba(0, 0, 0, .3)
}

.news-item:hover .news-item-content .name {
    color: #00529C
}

.btn-primary {
    align-items: center;
    background-color: #00529C;
    border: 1px solid #00529C;
    border-radius: 4px;
    color: #fff;
    display: flex;
    font-size: 16px;
    justify-content: center;
    line-height: 24px;
    min-width: 140px;
    padding: 6px 16px;
    text-align: center
}

@media screen and (min-width:768px) {
    .btn-primary {
        min-width: 160px;
        padding: 10px 48px
    }
}

.btn-primary:hover {
    background-color: #fff;
    color: #00529C
}

.pagination {
    --wh: 20px;
    --sText: 14px;
    --swArrow: 6px;
    --shArrow: 12px;
    --bgBtn: transparent;
    --text: #737373;
    --bgBtnHover: transparent;
    --textHover: #009de1;
    --bgArrow: transparent;
    --textArrow: #000;
    --bgArrowHover: transparent;
    --textArrowHover: #00529C;
    flex: 0 0 100%;
    list-style-type: none;
    max-width: 100%
}

@media screen and (min-width:1024px) {
    .pagination {
        --wh: 24px;
        --sText: 16px;
        --swArrow: 6px;
        --shArrow: 12x
    }
}

.pagination ul {
    list-style-type: none
}

.pagination li,
.pagination ul {
    align-items: center;
    display: flex
}

.pagination li {
    background-color: var(--bgBtn);
    color: var(--text);
    cursor: pointer;
    font-size: var(--sText);
    font-size: 14px;
    font-weight: 500;
    height: var(--wh);
    justify-content: center;
    line-height: var(--wh);
    line-height: 18px;
    transition: .3s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: var(--wh)
}

@media screen and (min-width:768px) {
    .pagination li {
        font-size: 16px;
        line-height: 24px
    }
}

.pagination li:not(.is-actived):hover {
    background-color: var(--bgBtnHover);
    color: var(--textHover)
}

.pagination li a {
    display: inline-block
}

.pagination li svg {
    height: var(--shArrow);
    width: var(--swArrow)
}

.pagination li.is-actived {
    background-color: var(--bgBtnHover);
    color: var(--textHover);
    cursor: auto;
    font-weight: 700
}

.pagination li.next,
.pagination li.prev {
    background-color: var(--bgArrow);
    transition: .3s ease-in-out
}

.pagination li.next,
.pagination li.next>a,
.pagination li.prev,
.pagination li.prev>a {
    align-items: center;
    display: flex;
    justify-content: center
}

.pagination li.next svg,
.pagination li.prev svg {
    height: auto;
    width: auto
}

.pagination li.next path[fill],
.pagination li.prev path[fill] {
    fill: var(--textArrow)
}

.pagination li.next path[stroke],
.pagination li.prev path[stroke] {
    stroke: var(--textArrow)
}

.pagination li.next:not(.btn-hidden):hover,
.pagination li.prev:not(.btn-hidden):hover {
    background-color: var(--bgArrowHover)
}

.pagination li.next:not(.btn-hidden):hover path[fill],
.pagination li.prev:not(.btn-hidden):hover path[fill] {
    fill: var(--textArrowHover)
}

.pagination li.next:not(.btn-hidden):hover path[stroke],
.pagination li.prev:not(.btn-hidden):hover path[stroke] {
    stroke: var(--textArrowHover)
}

.pagination li.next.btn-hidden,
.pagination li.prev.btn-hidden {
    cursor: auto;
    opacity: .3
}

.pagination li.prev,
.pagination li.prev a {
    align-items: center;
    display: flex;
    justify-content: center
}

.pagination li.prev a {
    margin-right: 40px
}

.pagination li.prev svg {
    transform: rotate(180deg)
}

.pagination li.next,
.pagination li.next a {
    align-items: center;
    display: flex;
    justify-content: center
}

.pagination li.next a {
    height: 100%;
    margin-left: 40px;
    width: 100%
}

.pagination li.dot {
    background-color: var(--bgBtn);
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.pagination li+li {
    margin-left: 10px
}

@media screen and (min-width:1024px) {
    .pagination li+li {
        margin-left: 23px
    }
}

.pagination {
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%
}

.pagination,
.swiper-wrapper {
    display: flex
}

.swiper-pagination {
    --swiper-pagination-bullet-width: 8px;
    --swiper-pagination-bullet-height: 8px;
    --swiper-pagination-bullet-horizontal-gap: 4px;
    --swiper-pagination-bullet-inactive-color: #fff;
    --swiper-pagination-bullet-inactive-opacity: 0.5;
    --swiper-pagination-color: #007b8d;
    align-items: center;
    bottom: 10px !important;
    display: flex;
    justify-content: center
}

@media screen and (min-width:768px) {
    .swiper-pagination {
        --swiper-pagination-bullet-width: 12px;
        --swiper-pagination-bullet-height: 12px;
        --swiper-pagination-bullet-horizontal-gap: 6px;
        bottom: 40px !important
    }
}

.swiper-pagination-bullet {
    border-radius: 100%;
    position: relative;
    transition: all .16s ease-in-out
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #fff;
    height: 8px;
    width: 8px
}

@media screen and (min-width:768px) {
    .swiper-pagination-bullet.swiper-pagination-bullet-active {
        height: 14px;
        width: 14px
    }
}

.swiper-pagination-bullet.swiper-pagination-bullet-active:after {
    display: block;
    opacity: 1;
    transform: scale(1)
}

.swiper-pagination-bullet:after {
    background-color: #00529C;
    border-radius: inherit;
    content: "";
    display: block;
    height: 6px;
    left: 1px;
    opacity: 0;
    position: absolute;
    top: 1px;
    transform: scale(0);
    transform-origin: center;
    transition: all .16s ease-in-out;
    width: 6px
}

@media screen and (min-width:768px) {
    .swiper-pagination-bullet:after {
        height: 10px;
        left: 2px;
        top: 2px;
        width: 10px
    }
}

.swiper.paginationoutside {
    padding-bottom: 28px
}

@media screen and (min-width:768px) {
    .swiper.paginationoutside {
        padding-bottom: 54px
    }
}

.swiper.paginationoutside .swiper-pagination {
    --swiper-pagination-bullet-inactive-color: #c9c9c9;
    bottom: 0 !important
}

.swiper.paginationoutside .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #c9c9c9
}

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

form.form .group-input {
    display: flex;
    flex-direction: column;
    width: 100%
}

form.form .group-input .placeholder {
    position: relative;
    width: 100%
}

form.form .group-input .placeholder input:valid+p,
form.form .group-input .placeholder textarea:valid+p {
    opacity: 0
}

form.form .group-input .placeholder>p {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    color: #797979;
    display: block;
    font-size: 16px;
    font-weight: 400;
    left: 0;
    line-height: 22px;
    outline: none;
    padding: 9px 10px 7px;
    pointer-events: none;
    position: absolute;
    resize: none;
    top: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%
}

@media screen and (min-width:768px) {
    form.form .group-input .placeholder>p {
        font-size: 18px;
        line-height: 24px
    }
}

form.form .group-input .placeholder>p>span {
    color: #db4444
}

form.form .group-input input:not([type=submit]):not([type=checkbox]):not([type=radio]),
form.form .group-input select,
form.form .group-input textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: 1px solid #c9c9c9;
    border-radius: 4px;
    color: #000;
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    outline: none;
    padding: 9px 10px 7px;
    resize: none;
    width: 100%
}

@media screen and (min-width:768px) {
    form.form .group-input input:not([type=submit]):not([type=checkbox]):not([type=radio]),
    form.form .group-input select,
    form.form .group-input textarea {
        font-size: 18px;
        line-height: 24px
    }
}

form.form .group-input input:not([type=submit]):not([type=checkbox]):not([type=radio])::-moz-placeholder,
form.form .group-input select::-moz-placeholder,
form.form .group-input textarea::-moz-placeholder {
    -moz-appearance: none;
    appearance: none;
    color: #797979
}

form.form .group-input input:not([type=submit]):not([type=checkbox]):not([type=radio])::placeholder,
form.form .group-input select::placeholder,
form.form .group-input textarea::placeholder {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #797979
}

form.form .group-input p.error {
    color: #db4444;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    margin-top: 4px
}

@media screen and (min-width:768px) {
    form.form .group-input p.error {
        font-size: 14px;
        line-height: 18px
    }
}

form.form label {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px
}

@media screen and (min-width:768px) {
    form.form label {
        font-size: 18px;
        line-height: 24px
    }
}

form.form .datetimepicker,
form.form .select {
    position: relative
}

form.form .datetimepicker .icon,
form.form .select .icon {
    left: auto;
    pointer-events: none;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

form.form .select .icon {
    right: 20px
}

form.form .datetimepicker .icon {
    right: 0
}

form.form .group-submit button[type=submit],
form.form .group-submit input[type=submit] {
    align-items: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    background-color: #00529C;
    border: none;
    border-radius: 4px;
    color: #fff;
    display: inline-flex;
    font-size: 16px;
    font-weight: 600;
    justify-content: center;
    line-height: 20px;
    min-width: 78px;
    outline: none;
    padding: 8px 18px;
    position: relative;
    text-align: center
}

@media screen and (min-width:768px) {
    form.form .group-submit button[type=submit],
    form.form .group-submit input[type=submit] {
        font-size: 18px;
        line-height: 24px;
        min-width: 127px
    }
}

form.form.form--light .group-input input:not([type=submit]):not([type=checkbox]):not([type=radio]),
form.form.form--light .group-input select,
form.form.form--light .group-input textarea {
    border-bottom: 1px solid #fff;
    color: #fff
}

form.form.form--light .group-input input:not([type=submit]):not([type=checkbox]):not([type=radio])::-moz-placeholder,
form.form.form--light .group-input select::-moz-placeholder,
form.form.form--light .group-input textarea::-moz-placeholder {
    color: #e2e2e2
}

form.form.form--light .group-input input:not([type=submit]):not([type=checkbox]):not([type=radio])::placeholder,
form.form.form--light .group-input select::placeholder,
form.form.form--light .group-input textarea::placeholder {
    color: #e2e2e2
}

form.form.form--light label {
    color: #fff
}

.header {
    box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
    left: 0;
    position: relative;
    top: 0;
    width: 100%;
    z-index: 1000
}

.header-top {
    max-width: 100%;
    overflow: hidden;
    padding: 8px 0;
    position: relative
}

@media screen and (min-width:768px) {
    .header-top {
        padding: 5px 0
    }
}

@media screen and (max-width:767px) {
    .header-top .swiper-slide .container {
        padding-right: 30px
    }
}

.header-top .container {
    color: #fafafa;
    display: flex;
    font-size: 16px;
    line-height: 24px
}

.header-top .container,
.header-top .container a {
    align-items: center;
    justify-content: center;
    text-align: center
}

.header-top .container a {
    display: inline-flex
}

.header-top .container a[href="javascript:void(0)"] {
    cursor: context-menu
}

.header-top .container .icon {
    display: none;
    margin-left: 10px
}

@media screen and (min-width:768px) {
    .header-top .container .icon {
        display: flex;
        height: 38px;
        margin-left: 40px;
        width: 38px
    }
}

.header-top .container .icon>* {
    height: 100%;
    width: 100%
}

.header-top .close {
    background-color: #fff;
    border-radius: 100%;
    cursor: pointer;
    height: 20px;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    transition: all .3s ease-out;
    width: 20px;
    z-index: 10
}

.header-top .close:hover {
    box-shadow: 0 2px 2px rgba(0, 0, 0, .1);
    transform: translateY(-50%) scale(.9)
}

@media screen and (min-width:768px) {
    .header-top .close {
        right: 2vw
    }
}

@media screen and (min-width:1024px) {
    .header-top .close {
        right: 44px
    }
}

.header-top .close:after,
.header-top .close:before {
    border-bottom: 2px solid #000;
    border-radius: 2px;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 56%
}

.header-top .close:before {
    transform: translate(-50%, -50%) rotate(-45deg)
}

.header-top .close:after {
    transform: translate(-50%, -50%) rotate(45deg)
}

.header-main>.container {
    align-items: stretch;
    display: flex;
    justify-content: space-between
}

.header-main__logo {
    display: block;
    height: 36px;
    margin: 6px 0;
    width: auto
}

@media screen and (min-width:1024px) {
    .header-main__logo {
        height: 60px;
    }
}

.header-main__logo>img {
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    width: auto
}

@media screen and (max-width:1023px) {
    .header-main-nav {
        background-color: #fff;
        display: none;
        height: calc(100vh - var(--hHeader, 100px));
        left: 0;
        opacity: 0;
        overflow: auto;
        padding-bottom: 50px;
        position: absolute;
        top: 100%;
        visibility: hidden;
        width: 100%;
        z-index: 111
    }
    .header-main-nav ul {
        list-style-type: none
    }
    .header-main-nav>ul>li {
        align-items: stretch;
        display: flex;
        flex-wrap: wrap;
        padding-right: 16px
    }
    .header-main-nav>ul>li>a {
        color: #000;
        display: inline-flex;
        font-size: 16px;
        font-weight: 500;
        justify-content: space-between;
        line-height: 24px;
        padding: 8px 0 8px 16px;
        position: relative
    }
    .header-main-nav>ul>li>.icon {
        align-items: center;
        display: flex;
        flex: 1;
        justify-content: flex-end
    }
    .header-main-nav>ul>li>.icon>* {
        transition: all .3s cubic-bezier(.175, .885, .32, 1.275)
    }
    .header-main-nav>ul>li.is-showed>a:before {
        border-left: 2px solid #00529C;
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 0
    }
    .header-main-nav>ul>li.is-showed>.icon>* {
        transform: rotate(180deg)
    }
    .header-main-nav>ul>li.is-showed .submenu {
        animation: isShowed .8s cubic-bezier(.075, .82, .165, 1) forwards;
        display: block
    }
    .header-main-nav>ul>li:not(:first-child) {
        margin-top: 8px
    }
    .header-main-nav>ul>li .submenu {
        display: none;
        flex: 0 0 100%;
        margin-bottom: 7px;
        margin-top: 15px;
        opacity: 0;
        padding: 0 calc(33px - 2vw) 0 33px;
        visibility: hidden
    }
    .header-main-nav>ul>li .submenu>.container {
        width: 100%
    }
    .header-main-nav>ul>li .submenu-nav {
        display: flex;
        flex-wrap: wrap;
        margin-left: -20px;
        margin-top: -20px
    }
    .header-main-nav>ul>li .submenu-nav-item {
        flex: 0 0 25%;
        padding-left: 20px;
        padding-top: 20px
    }
}

@media screen and (max-width:1023px) and (max-width:767px) {
    .header-main-nav>ul>li .submenu-nav-item {
        flex: 0 0 33.3333%
    }
}

@media screen and (max-width:1023px) and (max-width:575px) {
    .header-main-nav>ul>li .submenu-nav-item {
        flex: 0 0 50%
    }
}

@media screen and (max-width:1023px) {
    .header-main-nav>ul>li .submenu-nav-item__name {
        color: #000;
        display: flex;
        flex-direction: column;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        white-space: nowrap;
        width: 100%
    }
    .header-main-nav>ul>li .submenu-nav-item__name .icon {
        color: #777;
        display: flex;
        height: 40px;
        margin-bottom: 10px;
        -o-object-fit: contain;
        object-fit: contain;
        width: auto
    }
    .header-main-nav>ul>li .submenu-nav-item__name .icon>* {
        height: 100%;
        width: auto
    }
    .header-main-nav>ul>li .submenu-nav-item>ul>li {
        margin-top: 10px
    }
    .header-main-nav>ul>li .submenu-nav-item>ul>li>a {
        color: #131313;
        font-size: 14px;
        line-height: 18px
    }
}

@media screen and (min-width:1024px) {
    .header-main-nav {
        display: block
    }
    .header-main-nav>ul {
        align-items: center;
        display: flex;
        list-style-type: none
    }
    .header-main-nav>ul>li+li {
        margin-left: 14px
    }
}

@media screen and (min-width:1024px) and (min-width:1280px) {
    .header-main-nav>ul>li+li {
        margin-left: 24px
    }
}

@media screen and (min-width:1024px) {
    .header-main-nav>ul>li:hover>a:after {
        width: 100%
    }
    .header-main-nav>ul>li:hover .submenu {
        animation: isShowed 1s cubic-bezier(.175, .885, .32, 1.275) forwards;
        display: flex;
        justify-content: center
    }
    .header-main-nav>ul>li>.icon {
        display: none;
    }
    .header-main-nav>ul>li .submenu {
        background: #f5f5f5;
        display: none;
        left: 0;
        min-height: 264px;
        opacity: 0;
        padding: 33px 0;
        position: absolute;
        top: 100%;
        visibility: hidden;
        width: 100%;
        z-index: 1
    }
    .header-main-nav>ul>li .submenu .container .submenu-nav-item {
        /* width: 14.2857142857% */
        width: 33.33%
    }
    .header-main-nav>ul>li .submenu-nav {
        display: flex;
        flex-wrap: wrap
    }
    .header-main-nav>ul>li .submenu-nav-item:not(:first-child) .submenu-nav-item__name {
        position: relative
    }
    .header-main-nav>ul>li .submenu-nav-item:not(:first-child) .submenu-nav-item__name:after {
        border-left: 1px solid #c9c9c9;
        content: "";
        height: 90%;
        left: 0;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 0
    }
    .header-main-nav>ul>li .submenu-nav-item__name {
        align-items: center;
        color: #000;
        display: flex;
        flex-direction: column;
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        margin-bottom: 10px;
        padding-top: 33px;
        white-space: nowrap;
        width: 100%
    }
    .header-main-nav>ul>li .submenu-nav-item__name .icon {
        align-items: center;
        color: #777;
        display: flex;
        height: 40px;
        justify-content: center;
        margin-bottom: 36px;
        -o-object-fit: contain;
        object-fit: contain
    }
    .header-main-nav>ul>li .submenu-nav-item__name .icon>* {
        height: 100%
    }
    .header-main-nav>ul>li .submenu-nav-item>ul {
        list-style-type: none;
        padding: 0 24px
    }
    .header-main-nav>ul>li .submenu-nav-item>ul>li:not(:first-child) {
        margin-top: 10px
    }
    .header-main-nav>ul>li .submenu-nav-item>ul>li>a {
        color: #000;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        transition: color .2s ease-in-out
    }
    .header-main-nav>ul>li .submenu-nav-item>ul>li>a:hover {
        color: #00529C
    }
    .header-main-nav>ul>li.subsmall {
        position: relative
    }
    .header-main-nav>ul>li.subsmall .submenu {
        justify-content: flex-start;
        left: -20px;
        min-height: auto;
        min-width: 200px;
        padding: 30px 20px;
        width: auto
    }
    .header-main-nav>ul>li.subsmall .submenu-nav-item {
        white-space: nowrap;
        width: 100%
    }
    .header-main-nav>ul>li>a {
        color: #000;
        display: inline-block;
        font-size: 16px;
        line-height: 24px;
        padding: 24.5px 0;
        position: relative
    }
    .header-main-nav>ul>.is-actived>a:after {
        width: 100%;
    }
    .header-main-nav>ul>li>a:after {
        border-top: 3px solid #00529C;
        bottom: 0;
        content: "";
        height: 0;
        left: 50%;
        position: absolute;
        transform: translateY(100%) translateX(-50%);
        transition: width .3s cubic-bezier(.075, .82, .165, 1);
        width: 0;
        z-index: 11
    }
}

.header-main-nav.is-showed {
    animation: isShowed .3s cubic-bezier(.175, .885, .32, 1.275) forwards;
    display: block
}

.header-main-right {
    align-items: stretch;
    display: flex;
    justify-content: flex-end
}

.header-main-right .search {
    display: none
}

@media screen and (min-width:576px) {
    .header-main-right .search {
        align-items: center;
        border-radius: 4px;
        display: flex;
        justify-content: flex-end;
        margin-right: 20px;
        overflow: hidden
    }
    .header-main-right .search .formsearch {
        background-color: #f5f5f5;
        width: 174px
    }
}

@media screen and (min-width:576px) and (min-width:1280px) {
    .header-main-right .search .formsearch {
        width: 240px
    }
}

@media screen and (min-width:576px) {
    .header-main-right .search .formsearch .group-search {
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        position: relative
    }
}

@media screen and (min-width:576px) and (min-width:768px) {
    .header-main-right .search .formsearch .group-search {
        font-size: 12px;
        line-height: 18px
    }
}

@media screen and (min-width:576px) {
    .header-main-right .search .formsearch .group-search input[type=text] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: none;
        border: none;
        outline: none;
        padding: 10px 38px 10px 14px;
        width: 100%
    }
    .header-main-right .search .formsearch .group-search button[type=submit],
    .header-main-right .search .formsearch .group-search input[type=submit] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: none;
        border: none;
        height: 100%;
        outline: none;
        padding: 7px 14px 7px 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 38px
    }
}

.header-main-right .languages {
    justify-content: flex-end;
    position: relative
}

.header-main-right .languages,
.header-main-right .languages-selected {
    align-items: center;
    display: flex
}

.header-main-right .languages-selected>* {
    color: #000;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px
}

.header-main-right .languages-selected>.icon {
    align-items: center;
    display: flex;
    height: 24px;
    justify-content: center;
    width: 24px
}

.header-main-right .languages-selected.is-showed~.languages-options {
    animation: isShowed .3s ease-in-out forwards;
    display: block
}

.header-main-right .languages-options {
    background-color: #f5f5f5;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .1);
    display: none;
    left: 50%;
    opacity: 0;
    padding: 20px 24px;
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
    visibility: hidden;
    width: 80px
}

@media screen and (min-width:1280px) {
    .header-main-right .languages-options {
        left: -24px;
        padding: 30px 24px;
        transform: none;
        width: 110px
    }
}

.header-main-right .languages-options:before {
    border-top: 3px solid #00529C;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: calc(100% - 48px)
}

.header-main-right .languages-options ul {
    list-style-type: none
}

.header-main-right .languages-options ul>li>a {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px
}

.header-main-right .languages-options ul>li>a:hover {
    color: #00529C
}

.header-main-right .languages-options ul>li.is-actived>a {
    color: #00529C;
    cursor: auto;
    font-weight: 600;
    pointer-events: none
}

.header-main-right .languages-options ul>li:not(:first-child) {
    margin-top: 10px
}

.header-main-right .languages.is-showed .languages-options {
    display: block;
    opacity: 1;
    visibility: visible
}

.header-main-right .toggle {
    align-items: center;
    display: flex;
    margin-left: 7px
}

@media screen and (min-width:1024px) {
    .header-main-right .toggle {
        display: none
    }
}

.header-main-right .toggle__line {
    display: flex;
    flex-direction: column;
    height: 24px;
    justify-content: center;
    position: relative;
    width: 24px
}

.header-main-right .toggle__line span {
    color: transparent;
    font-size: 0
}

.header-main-right .toggle__line span:after,
.header-main-right .toggle__line span:before {
    content: ""
}

.header-main-right .toggle__line span,
.header-main-right .toggle__line span:after,
.header-main-right .toggle__line span:before {
    border-top: 2px solid #000;
    display: block;
    height: 0;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all .16s cubic-bezier(.175, .885, .32, 1.275);
    width: 18px
}

.header-main-right .toggle__line span:before {
    top: calc(50% - 6px)
}

.header-main-right .toggle__line span:after {
    top: calc(50% + 5px)
}

.header-main-right .toggle.is-showed .toggle__line span {
    width: 0
}

.header-main-right .toggle.is-showed .toggle__line span:before {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 16px
}

.header-main-right .toggle.is-showed .toggle__line span:after {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 16px
}

.header-socials-contact {
    position: fixed
}

@media screen and (min-width:768px) {
    .header-socials-contact {
        bottom: 40%;
        right: 0;
        transform: translateY(50%)
    }
    .header-socials-contact>ul {
        list-style-type: none;
        margin-right: 16px
    }
}

@media screen and (min-width:768px) and (min-width:768px) {
    .header-socials-contact>ul {
        margin-right: 2vw
    }
}

@media screen and (min-width:768px) and (min-width:1024px) {
    .header-socials-contact>ul {
        margin-right: 44px
    }
}

@media screen and (min-width:768px) {
    .header-socials-contact>ul>li {
        align-items: flex-end;
        display: flex;
        flex-direction: column;
        justify-content: flex-end
    }
    .header-socials-contact>ul>li>a {
        border-radius: 100%;
        display: block;
        height: 40px;
        transition: transform .3s ease-out;
        width: 40px
    }
    .header-socials-contact>ul>li>a img,
    .header-socials-contact>ul>li>a svg {
        border-radius: 100%;
        display: block;
        height: 100%;
        pointer-events: none;
        width: 100%
    }
    .header-socials-contact>ul>li>a span {
        display: none
    }
    .header-socials-contact>ul>li>a:hover {
        transform: scale(.92)
    }
    .header-socials-contact>ul>li:not(:first-child) {
        margin-top: 14px
    }
}

@media screen and (max-width:767px) {
    .header-socials-contact {
        bottom: 0;
        width: 100%
    }
    .header-socials-contact>ul {
        display: flex;
        justify-content: space-between;
        list-style-type: none;
        padding: 0 16px;
        position: relative
    }
    .header-socials-contact>ul:before {
        background-color: #000;
        content: "";
        height: calc(100% - 12px);
        left: 0;
        position: absolute;
        top: 12px;
        width: 100%;
        z-index: -1
    }
    .header-socials-contact>ul>li {
        align-items: flex-end;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: 21px;
        padding-top: 7px
    }
    .header-socials-contact>ul>li>a {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        transition: transform .3s ease-out
    }
    .header-socials-contact>ul>li>a img,
    .header-socials-contact>ul>li>a svg {
        display: block;
        height: 28px;
        -o-object-fit: contain;
        object-fit: contain;
        pointer-events: none;
        width: 28px
    }
    .header-socials-contact>ul>li>a span {
        color: #fff;
        font-size: 10px;
        font-weight: 500;
        line-height: 13px;
        margin-top: 3px
    }
    .header-socials-contact>ul>li>a:hover {
        transform: scale(.92)
    }
    .header-socials-contact>ul>li.center {
        padding-top: 0
    }
    .header-socials-contact>ul>li.center a {
        display: block;
        padding-top: 6px;
        position: relative
    }
    .header-socials-contact>ul>li.center a:before {
        background-color: #000;
        border-radius: 100%;
        content: "";
        height: 52px;
        left: -6px;
        position: absolute;
        top: 0;
        width: 52px;
        z-index: -1
    }
    .header-socials-contact>ul>li.center a img,
    .header-socials-contact>ul>li.center a svg {
        height: 40px;
        width: 40px
    }
}

.banner {
    height: auto;
    position: relative;
    width: 100%;
    z-index: 999
}

.banner-slider {
    overflow: hidden;
    padding-top: 47.695% !important;
    position: relative
}

@media screen and (min-width:1024px) {
    .banner-slider {
        padding-top: 45% !important
    }
}

.banner-slider .swiper {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.banner-slider .swiper,
.banner-slider .swiper-slide>* {
    height: 100%
}

.banner-slider .banner-video {
    padding-top: 0
}

.banner-video {
    height: auto;
    position: relative;
    width: 100%
}

.banner-video .poster,
.banner-video video {
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    position: relative;
    width: 100%;
    z-index: 1
}

.banner-video .btn-pause {
    display: none;
    height: 68px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    z-index: 111
}

.banner-video .btn-pause>* {
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    width: 100%
}

.banner-video.playing .btn-pause,
.banner-video.playing .poster {
    display: none
}

.banner-video.pausing .btn-pause {
    align-items: center;
    display: flex;
    justify-content: center
}

.banner-video.pausing .poster {
    display: block;
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 100
}

.breadcrumbs {
    padding-top: 12px;
    position: relative;
    width: 100%;
    z-index: 1
}

@media screen and (min-width:1024px) {
    .breadcrumbs {
        padding-top: 20px
    }
}

.breadcrumbs-list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style-type: none
}

.breadcrumbs-item {
    align-items: flex-start;
    display: flex;
    white-space: normal
}

.breadcrumbs-item>* {
    color: #777;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    margin-right: 8px
}

@media screen and (min-width:768px) {
    .breadcrumbs-item>* {
        margin-right: 12px
    }
}

.breadcrumbs-item * {
    transition: all .3s linear
}

.breadcrumbs-item.is-actived .breadcrumbs-item__link {
    color: #000;
    cursor: auto;
    pointer-events: none
}

.breadcrumbs-item:hover .breadcrumbs-item__link {
    color: var(--cl-red, #000)
}

.footer {
    background-color: #000 !important;
    color: #acacac !important;
    margin-top: 20px;
    padding-top: 20px;
    position: relative;
    font-size: 15px;
}

@media screen and (min-width:768px) {
    .footer {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .footer {
        margin-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .footer {
        margin-top: 60px
    }
}

@media screen and (min-width:768px) {
    .footer {
        padding-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .footer {
        padding-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .footer {
        padding-top: 30px;
    }
}

.footer__logo {
    border-bottom: 1px solid hsla(0, 0%, 47%, .1);
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width:767px) {
    .footer__logo {
        align-items: center;
        flex-direction: column;
        justify-content: center
    }
    .footer__logo>a:not(:first-child) {
        height: 27px;
        margin-top: 40px
    }
}

@media screen and (max-width:767px) and (min-width:768px) {
    .footer__logo>a:not(:first-child) {
        margin-top: 40px
    }
}

@media screen and (max-width:767px) and (min-width:1024px) {
    .footer__logo>a:not(:first-child) {
        margin-top: 60px
    }
}

@media screen and (max-width:767px) and (min-width:1280px) {
    .footer__logo>a:not(:first-child) {
        margin-top: 60px
    }
}

.footer__logo>a {
    align-items: center;
    display: flex;
    height: 60px;
    width: auto
}

@media screen and (min-width:1024px) {
    .footer__logo>a {
        height: 60px;
    }
}

.footer__logo>a>img {
    height: 100%;
    width: auto
}

.footer-nav {
    color: currentColor !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: -40px;
    margin-top: -20px
}

.footer-nav>* {
    margin-left: 40px;
    max-width: 100%;
    padding-top: 40px;
    width: 100%
}

.footer-nav-item h1, .footer-nav-item p {
    padding: 4px 0;
    line-height: 26px;
}

@media screen and (min-width:576px) {
    .footer-nav>* {
        max-width: 100%;
        width: auto
    }
}

@media screen and (min-width:768px) {
    .footer-nav>* {
        margin-left: 40px;
        max-width: 25%;
        padding-top: 40px
    }
}

@media screen and (max-width:1023px) {
    .footer-nav>* {
        min-width: 180px
    }
}

@media screen and (min-width:768px) {
    .footer-nav>:not(:first-child) {
        margin: 0 5px;
    }
}

.footer-nav-item__name {
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    margin-bottom: 20px
}

.footer-nav-item__name:not(:first-child) {
    margin-bottom: 20px;
    margin-top: 20px
}

.footer-nav-item>ul>li:not(:first-child) {
    margin-top: 10px
}

.footer-nav-item>ul.footer-socials {
    display: flex;
    margin-left: -20px;
    margin-top: -20px
}

.footer-nav-item>ul.footer-socials>li {
    margin-left: 20px;
    margin-top: 20px
}

.footer-nav-item>ul.footer-socials>li a [stroke]:not([stroke=none]) {
    stroke: currentColor
}

.footer-nav-item>ul.footer-socials>li a [fill]:not([fill=none]) {
    fill: currentColor
}

.footer-nav-item>ul.footer-socials>li a>* {
    transition: transform .3s cubic-bezier(.175, .885, .32, 1.275)
}

.footer-nav-item>ul.footer-socials>li a:hover>* {
    transform: scale(.92)
}

.footer-nav-item__bct {
    display: block;
    height: 56px;
    margin-top: 20px
}

.footer-nav-item__bct a,
.footer-nav-item__bct img {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: flex-start;
    max-width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: top left;
    object-position: top left;
    width: auto
}

.footer-nav ul {
    list-style-type: none
}

.footer-nav ul>li>a {
    font-size: 16px;
    line-height: 24px
}

.footer-copyright {
    border-top: 1px solid hsla(0, 0%, 100%, .1);
    margin-top: 30px;
    padding: 15px 0 21px;
    text-align: center;
    line-height: 26px;
    font-size: 16px;
}

.footer-copyright p {
    align-items: center;
    color: currentColor;
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    justify-content: center;
    line-height: 24px;
    margin-left: -6px;
    margin-top: -10px;
    text-align: center
}

.footer-copyright p>* {
    margin-left: 6px;
    margin-top: 10px
}

.footer-copyright .icon {
    align-items: center;
    display: inline-flex;
    height: 14px;
    justify-content: center;
    width: 14px;
}

.footer-copyright .icon>* {
    display: block;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%
}

.footer-copyright .icon [stroke]:not([stroke=none]) {
    stroke: currentColor
}

.footer-copyright .icon [fill]:not([fill=none]) {
    fill: currentColor
}

.footer-copyright a {
    color: inherit;
    display: inline-block
}

.footer-copyright a:hover {
    color: #00529C
}

.footer-scrolltotop {
    position: absolute;
    right: 0;
    top: 20px
}

@media screen and (min-width:1024px) {
    .footer-scrolltotop {
        bottom: 4px;
        left: auto;
        right: 0;
        top: auto
    }
}

.footer-scrolltotop>a {
    align-items: center;
    background: linear-gradient(90deg, #007b8d 5.66%, #02c39a);
    border-radius: 100%;
    display: flex;
    height: 24px;
    justify-content: center;
    text-align: center;
    width: 24px
}

@media screen and (min-width:768px) {
    .footer-scrolltotop>a {
        height: 32px;
        width: 32px
    }
}

.footer-scrolltotop>a>* {
    display: block;
    height: 62.5%;
    transform: rotate(180deg);
    width: 62.5%
}

.footer a:hover {
    color: #00529C
}

.footer .section-chat {
    bottom: 24vh;
    display: flex;
    flex-direction: column-reverse;
    position: fixed;
    right: calc((100vw - var(--wContainer, 100vw))/2);
    z-index: 1000
}

@media screen and (min-width:1280px) {
    .footer .section-chat {
        right: 16px
    }
}

.footer .section-chat.is-related {
    bottom: auto;
    left: auto;
    position: absolute;
    right: calc((100vw - var(--wContainer, 100vw))/2);
    top: -20px;
    transform: translateY(-100%)
}

@media screen and (min-width:1280px) {
    .footer .section-chat.is-related {
        right: 16px
    }
}

.footer .section-chat.openning .section-chat-thumb {
    margin-top: 10px
}

@media screen and (min-width:768px) {
    .footer .section-chat.openning .section-chat-thumb {
        margin-top: 18px
    }
}

.footer .section-chat.openning .section-chat-thumb a.link--icon .chat-maximize {
    opacity: 0
}

.footer .section-chat.openning .section-chat-thumb a.link--icon .chat-minimize {
    opacity: 1
}

.footer .section-chat.openning .section-chat-socials {
    -webkit-clip-path: ellipse(100% 120% at 50% 100%);
    clip-path: ellipse(100% 120% at 50% 100%);
    display: block;
    opacity: 1
}

.footer .section-chat-thumb {
    margin-top: 0;
    transition: margin .3s cubic-bezier(.175, .885, .32, 1.275)
}

.footer .section-chat-thumb a.link--icon {
    align-items: center;
    display: flex;
    height: 24px;
    justify-content: center;
    width: 24px
}

@media screen and (min-width:768px) {
    .footer .section-chat-thumb a.link--icon {
        height: 32px;
        width: 32px
    }
}

.footer .section-chat-thumb a.link--icon .chat-maximize {
    opacity: 1;
    transition: opacity .3s ease-out
}

.footer .section-chat-thumb a.link--icon .chat-minimize {
    opacity: 0;
    transition: opacity .3s ease-in;
    visibility: visible
}

.footer .section-chat-socials {
    -webkit-clip-path: ellipse(100% 0 at 50% 100%);
    clip-path: ellipse(100% 0 at 50% 100%);
    display: none;
    opacity: 0;
    transition: opacity .6s cubic-bezier(.175, .885, .32, 1.275), -webkit-clip-path .6s cubic-bezier(.175, .885, .32, 1.275);
    transition: clip-path .6s cubic-bezier(.175, .885, .32, 1.275), opacity .6s cubic-bezier(.175, .885, .32, 1.275);
    transition: clip-path .6s cubic-bezier(.175, .885, .32, 1.275), opacity .6s cubic-bezier(.175, .885, .32, 1.275), -webkit-clip-path .6s cubic-bezier(.175, .885, .32, 1.275)
}

.footer .section-chat-socials>ul {
    display: block;
    list-style-type: none
}

.footer .section-chat-socials>ul>li {
    display: block
}

.footer .section-chat-socials>ul>li+li {
    margin-top: 6px
}

.footer .section-chat-socials>ul>li>a {
    align-items: center;
    display: flex;
    height: 24px;
    justify-content: center;
    overflow: hidden;
    width: 24px
}

@media screen and (min-width:768px) {
    .footer .section-chat-socials>ul>li>a {
        height: 32px;
        width: 32px
    }
}

.footer .section-chat-socials>ul>li>a>* {
    display: block;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%
}

.footer .section-chat-socials>ul>li.phone>a>* {
    transform: scale(1.25)
}

._404 {
    background-color: #fff;
    border-top: .5px solid rgba(0, 0, 0, .15);
    color: #000;
    padding-top: 60px;
    width: 100%
}

@media screen and (min-width:768px) {
    ._404 {
        padding-top: 80px
    }
}

@media screen and (min-width:1024px) {
    ._404 {
        padding-top: 80px
    }
}

@media screen and (min-width:1280px) {
    ._404 {
        padding-top: 80px
    }
}

._404>.container {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    min-height: auto;
    text-align: center
}

._404__thumbnail>* {
    height: auto;
    max-width: 100%
}

._404__title {
    margin-top: 20px
}

._404__title>* {
    color: currentColor;
    font-size: 36px;
    font-weight: 600;
    line-height: 45px
}

@media screen and (min-width:768px) {
    ._404__title>* {
        font-size: 48px;
        line-height: normal
    }
}

._404__btn {
    margin-top: 20px
}

@media screen and (min-width:768px) {
    ._404__btn {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    ._404__btn {
        margin-top: 40px
    }
}

@media screen and (min-width:1280px) {
    ._404__btn {
        margin-top: 40px
    }
}

._404__btn>* {
    align-items: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: none;
    color: #00529C;
    display: inline-flex;
    font-size: 16px;
    font-weight: 400;
    justify-content: center;
    line-height: 22px;
    outline: none;
    text-align: center
}

@media screen and (min-width:768px) {
    ._404__btn>* {
        font-size: 18px;
        line-height: 24px
    }
}

._404__btn>* .icon {
    align-items: center;
    display: flex;
    height: 20px;
    justify-content: center;
    margin-left: 10px;
    width: 20px
}

._404__btn>* .icon>* {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.about-1 {
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .about-1 {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .about-1 {
        margin-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .about-1 {
        margin-top: 40px
    }
}

.about-1-wrapper .thumbnail {
    border-radius: 4px;
    height: 0;
    padding-top: 72.5%;
    position: relative;
    width: 100%
}

.about-1-wrapper .thumbnail>* {
    border-radius: inherit;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.about-1-wrapper .content__title>* {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px
}

.about-1-wrapper .content__desc {
    font-size: 16px;
    line-height: 24px
}

.about-2 {
    margin-top: 40px
}

@media screen and (min-width:768px) {
    .about-2 {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .about-2 {
        margin-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .about-2 {
        margin-top: 60px
    }
}

.about-2-wrapper .item {
    align-items: center;
    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 20px;
    text-align: center;
    transition: all .3s cubic-bezier(.165, .84, .44, 1)
}

.about-2-wrapper .item:hover {
    background-color: #db4444
}

.about-2-wrapper .item:hover .item-thumb svg path[stroke]:not([stroke=none]) {
    stroke: #000
}

.about-2-wrapper .item:hover .item-thumb svg circle[fill]:not([fill=none]) {
    fill: #fff
}

.about-2-wrapper .item:hover .item-bottom__number,
.about-2-wrapper .item:hover .item-bottom__text {
    color: #fff
}

.about-2-wrapper .item-thumb {
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    height: 90px;
    margin-bottom: 20px;
    padding: 16px;
    position: relative;
    width: 90px
}

.about-2-wrapper .item-thumb>* {
    height: 100%;
    width: 100%
}

.about-2-wrapper .item-thumb svg circle[fill]:not([fill=none]),
.about-2-wrapper .item-thumb svg path[stroke]:not([stroke=none]) {
    transition: all .3s cubic-bezier(.075, .82, .165, 1)
}

.about-2-wrapper .item-bottom {
    flex: 1
}

.about-2-wrapper .item-bottom__number {
    color: #000;
    font-size: 24px;
    font-weight: 600;
    line-height: 30px
}

@media screen and (min-width:768px) {
    .about-2-wrapper .item-bottom__number {
        font-size: 32px;
        line-height: 40px
    }
}

.about-2-wrapper .item-bottom__text {
    color: #000;
    font-size: 16px;
    line-height: 24px
}

.about-3 {
    margin-top: 40px
}

@media screen and (min-width:768px) {
    .about-3 {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .about-3 {
        margin-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .about-3 {
        margin-top: 60px
    }
}

.about-3-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 40px;
    padding-top: 40px;
    position: relative;
    text-align: center
}

@media screen and (min-width:768px) {
    .about-3-wrapper {
        padding-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .about-3-wrapper {
        padding-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .about-3-wrapper {
        padding-top: 60px
    }
}

@media screen and (min-width:768px) {
    .about-3-wrapper {
        padding-bottom: 40px
    }
}

@media screen and (min-width:1024px) {
    .about-3-wrapper {
        padding-bottom: 60px
    }
}

@media screen and (min-width:1280px) {
    .about-3-wrapper {
        padding-bottom: 60px
    }
}

.about-3-wrapper .bg {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    z-index: 0
}

.about-3-wrapper .bg,
.about-3-wrapper:after {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.about-3-wrapper:after {
    background-color: rgba(0, 0, 0, .3);
    content: "";
    mix-blend-mode: multiply;
    z-index: 1
}

.about-3-wrapper>* {
    position: relative;
    z-index: 2
}

.about-3-wrapper .title {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px
}

.about-3-wrapper .desc {
    font-size: 16px;
    line-height: 24px;
    margin-top: 10px
}

.about-4 {
    background-color: #db4444;
    margin-top: 40px;
    position: relative
}

@media screen and (min-width:768px) {
    .about-4 {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .about-4 {
        margin-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .about-4 {
        margin-top: 60px
    }
}

.about-4 .bg {
    height: 100%;
    left: 0;
    mix-blend-mode: multiply;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.about-4-wrapper {
    padding-bottom: 60px;
    padding-top: 60px;
    position: relative;
    z-index: 2
}

@media screen and (min-width:768px) {
    .about-4-wrapper {
        padding-top: 80px
    }
}

@media screen and (min-width:1024px) {
    .about-4-wrapper {
        padding-top: 80px
    }
}

@media screen and (min-width:1280px) {
    .about-4-wrapper {
        padding-top: 80px
    }
}

@media screen and (min-width:768px) {
    .about-4-wrapper {
        padding-bottom: 80px
    }
}

@media screen and (min-width:1024px) {
    .about-4-wrapper {
        padding-bottom: 80px
    }
}

@media screen and (min-width:1280px) {
    .about-4-wrapper {
        padding-bottom: 80px
    }
}

.about-4-wrapper .content__title {
    font-size: 36px;
    font-weight: 600;
    line-height: 45px
}

@media screen and (min-width:768px) {
    .about-4-wrapper .content__title {
        font-size: 48px;
        line-height: normal
    }
}

.about-4-wrapper .content-option {
    border-bottom: 1px solid #fff;
    display: flex;
    justify-content: space-between;
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .about-4-wrapper .content-option {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .about-4-wrapper .content-option {
        margin-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .about-4-wrapper .content-option {
        margin-top: 40px
    }
}

.about-4-wrapper .content-option .option-item {
    display: inline-block;
    font-size: 20px;
    font-weight: 600;
    line-height: 20px;
    padding-bottom: 13px;
    position: relative;
    width: auto
}

@media screen and (min-width:768px) {
    .about-4-wrapper .content-option .option-item {
        font-size: 24px;
        line-height: 24px
    }
}

.about-4-wrapper .content-option .option-item>* {
    cursor: pointer
}

.about-4-wrapper .content-option .option-item.is-actived {
    color: #00529C
}

.about-4-wrapper .content-option .option-item.is-actived:after {
    border-top: 6px solid #fff;
    bottom: 0;
    content: "";
    height: 0;
    position: absolute;
    transform: translateY(50%);
    width: 100%
}

.about-4-wrapper .content-selected {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .about-4-wrapper .content-selected {
        font-size: 18px;
        line-height: 24px
    }
}

.about-4-wrapper .thumbnail {
    height: 0;
    padding-top: 84.362%;
    position: relative;
    width: 100%
}

.about-4-wrapper .thumbnail>* {
    border-radius: 10px;
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    top: 0;
    width: 100%
}

.about-5-container {
    padding-top: 40px;
    position: relative
}

@media screen and (min-width:768px) {
    .about-5-container {
        padding-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .about-5-container {
        padding-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .about-5-container {
        padding-top: 60px
    }
}

.about-5-container:not(:last-child) {
    padding-bottom: 40px
}

@media screen and (min-width:768px) {
    .about-5-container:not(:last-child) {
        padding-bottom: 40px
    }
}

@media screen and (min-width:1024px) {
    .about-5-container:not(:last-child) {
        padding-bottom: 60px
    }
}

@media screen and (min-width:1280px) {
    .about-5-container:not(:last-child) {
        padding-bottom: 60px
    }
}

.about-5-container .bg {
    display: none;
    height: 100%;
    left: 0;
    mix-blend-mode: multiply;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.about-5-container:nth-of-type(2n) .about-5-wrapper>.row {
    display: flex
}

@media screen and (min-width:768px) {
    .about-5-container:nth-of-type(2n) .about-5-wrapper>.row {
        flex-direction: row-reverse
    }
}

.about-5-container:nth-of-type(2n) .bg {
    display: block
}

.about-5-wrapper {
    position: relative;
    z-index: 2
}

@media screen and (max-width:767px) {
    .about-5-wrapper .row {
        flex-direction: column-reverse
    }
}

.about-5-wrapper .thumbnail {
    height: 0;
    padding-top: 59.645%;
    position: relative;
    width: 100%
}

.about-5-wrapper .thumbnail>* {
    border-radius: 4px;
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    top: 0;
    width: 100%
}

.about-5-wrapper .content__title {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px
}

.about-5-wrapper .content-desc {
    color: #777;
    font-size: 16px;
    line-height: 24px;
    margin-top: 20px
}

.contact {
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .contact {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .contact {
        margin-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .contact {
        margin-top: 40px
    }
}

.contact-wrapper {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap
}

.contact-wrapper-infor {
    border-radius: 10px;
    box-shadow: 0 1px 17px rgba(0, 0, 0, .12);
    display: flex;
    flex: 0 0 100%;
    flex-direction: column;
    padding: 30px 0;
    width: 100%
}

@media screen and (min-width:1024px) {
    .contact-wrapper-infor {
        flex: 0 0 340px;
        padding: 40px 0;
        width: 340px
    }
}

.contact-wrapper-infor .item-title {
    align-items: center;
    display: flex;
    margin-left: 20px;
    margin-right: 20px;
    padding-bottom: 20px
}

.contact-wrapper-infor .item-title__icon {
    height: 40px;
    margin-right: 16px;
    width: 40px
}

.contact-wrapper-infor .item-title__txt {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px
}

.contact-wrapper-infor .item-desc {
    color: #000;
    font-size: 14px;
    line-height: 18px;
    margin-left: 20px;
    max-width: 100%;
    padding-right: 20px
}

.contact-wrapper-infor .item-desc>:not(:first-child) {
    margin-top: 12px
}

.contact-wrapper-infor .item-desc a:hover {
    color: #00529C
}

.contact-wrapper-infor .item-desc iframe {
    height: 248px;
    margin-top: 6px;
    width: 100%
}

@media screen and (min-width:1024px) {
    .contact-wrapper-infor .item-desc iframe {
        height: 100px
    }
}

.contact-wrapper-infor .item:not(:last-child) {
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative
}

.contact-wrapper-infor .item:not(:last-child):after {
    border-bottom: 1px solid #000;
    bottom: 0;
    content: "";
    height: 0;
    left: 20px;
    position: absolute;
    right: 20px;
    width: calc(100% - 20px)
}

.contact-wrapper-infor .item--showroom {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden
}

.contact-wrapper-infor .item--showroom .item-desc {
    height: 100%;
    overflow: auto
}

.contact-wrapper-infor .item--showroom .item-desc::-webkit-scrollbar {
    border-radius: 6px;
    width: 6px
}

.contact-wrapper-infor .item--showroom .item-desc::-webkit-scrollbar-track {
    background: #d9d9d9;
    border-radius: 6px
}

.contact-wrapper-infor .item--showroom .item-desc::-webkit-scrollbar-thumb {
    background: #777;
    border-radius: 6px
}

.contact-wrapper-infor .item--showroom .item-desc::-webkit-scrollbar-thumb:hover {
    background: #00529C;
    border-radius: 6px
}

.contact-wrapper-form {
    border-radius: 10px;
    box-shadow: 0 1px 17px rgba(0, 0, 0, .12);
    flex: 1;
    height: 100%;
    margin-top: 40px;
    padding: 30px 20px
}

@media screen and (min-width:1024px) {
    .contact-wrapper-form {
        margin-left: 30px;
        margin-top: 0;
        padding: 40px 30px
    }
}

.contact-wrapper-form .form__title {
    color: #000;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px
}

.contact-wrapper-form .form-desc {
    color: #000;
    font-size: 16px;
    line-height: 24px;
    margin-top: 10px
}

.contact-wrapper-form .form-wp {
    margin-top: 20px
}

.contact-maps {
    height: 372px;
    margin-top: 40px;
    position: relative;
    width: 100%
}

@media screen and (min-width:768px) {
    .contact-maps {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .contact-maps {
        margin-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .contact-maps {
        margin-top: 60px
    }
}

@media screen and (min-width:1440px) {
    .contact-maps {
        height: 0;
        padding-top: 25.762%
    }
}

.contact-maps>* {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.distributor {
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .distributor {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .distributor {
        margin-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .distributor {
        margin-top: 40px
    }
}

.distributor-wrapper__title {
    color: #000;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 20px
}

@media screen and (min-width:768px) {
    .distributor-wrapper__title {
        margin-bottom: 40px
    }
}

@media screen and (min-width:1024px) {
    .distributor-wrapper__title {
        margin-bottom: 40px
    }
}

@media screen and (min-width:1280px) {
    .distributor-wrapper__title {
        margin-bottom: 40px
    }
}

.distributor-wrapper .share-socials {
    margin-top: 20px
}

.idx-group-products {
    padding-bottom: 40px;
    padding-top: 40px
}

@media screen and (min-width:768px) {
    .idx-group-products {
        padding-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .idx-group-products {
        padding-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .idx-group-products {
        padding-top: 60px
    }
}

@media screen and (min-width:768px) {
    .idx-group-products {
        padding-bottom: 40px
    }
}

@media screen and (min-width:1024px) {
    .idx-group-products {
        padding-bottom: 60px
    }
}

@media screen and (min-width:1280px) {
    .idx-group-products {
        padding-bottom: 60px
    }
}

@media screen and (max-width:767px) {
    .idx-group-products__title .custom-swiper-button {
        display: none
    }
}

.idx-group-products-wrapper {
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .idx-group-products-wrapper {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .idx-group-products-wrapper {
        margin-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .idx-group-products-wrapper {
        margin-top: 40px
    }
}

.idx-group-products-wrapper .swiper-slide {
    height: 100%
}

.idx-group-products-wrapper .group-products-item {
    border: 1px solid transparent;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    font-size: 15px;
    font-weight: 500;
    height: 100%;
    justify-content: center;
    line-height: 24px;
    text-align: center;
    transition: border .7s cubic-bezier(.075, .82, .165, 1)
}

.idx-group-products-wrapper .group-products-item .icon {
    color: #777;
    height: 50px;
    margin: 33px 0 24px
}

.idx-group-products-wrapper .group-products-item .icon img {
    border-radius: 3px;
}

.idx-group-products-wrapper .group-products-item .icon>* {
    display: inline-block;
    height: 100%;
    max-width: 80%;
    -o-object-fit: contain;
    object-fit: contain;
    width: auto;
}

.idx-group-products-wrapper .group-products-item .name {
    align-items: center;
    border-bottom: 1px solid #777;
    border-top: 1px solid #777;
    display: flex;
    flex: 1;
    justify-content: center;
    margin-left: 6px;
    margin-right: 6px;
    text-align: center;
    transition: all .2s ease
}

.idx-group-products-wrapper .group-products-item .name>a {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 6px 4px 12px;
    width: 100%
}

.idx-group-products-wrapper .group-products-item:hover .name {
    background-color: #666;
    color: #fff
}

.idx-group-products .swiper-wrapper {
    align-items: stretch;
    display: flex;
    justify-content: flex-start
}

.idx-group-products .swiper-slide {
    height: auto
}

@media screen and (max-width:767px) {
    .idx-group-products .swiper {
        overflow: initial
    }
    .idx-group-products .swiper-wrapper {
        --bs-gutter-x: 8px;
        --bs-gutter-y: 10px;
        align-items: stretch;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-left: calc(var(--bs-gutter-x, 0px)*-.5);
        margin-right: calc(var(--bs-gutter-x, 0px)*-.5);
        margin-top: calc(var(--bs-gutter-y, 0px)*-1);
        width: calc(100% + var(--bs-gutter-x, 0px)*.5*2)
    }
    .idx-group-products .swiper-wrapper>* {
        box-sizing: border-box;
        flex-shrink: 0;
        margin-top: var(--bs-gutter-y, 0);
        max-width: 100%;
        padding-left: calc(var(--bs-gutter-x, 0px)*.5);
        padding-right: calc(var(--bs-gutter-x, 0px)*.5);
        width: 100%
    }
    .idx-group-products .swiper-slide {
        display: block;
        flex: 0 0 auto;
        height: auto;
        width: 33.3333%
    }
    .idx-products__title {
        flex-direction: column
    }
    .idx-products__title .custom-option {
        display: none
    }
    .idx-products__title .custom-mobile-option {
        margin-top: 30px;
        max-width: 100%;
        position: relative;
        width: 190px
    }
    .idx-products__title .custom-mobile-option .sel-custom {
        background-color: #fff;
        border: 1px solid #000;
        border-radius: 4px;
        color: #000;
        cursor: pointer;
        font-size: 16px;
        font-weight: 600;
        padding: 5px 6px;
        position: relative;
        z-index: 2
    }
    .idx-products__title .custom-mobile-option ul.opt-custom {
        background: #f5f5f5;
        box-shadow: 0 8px 16px rgba(0, 0, 0, .1);
        display: none;
        left: auto;
        list-style-type: none;
        opacity: 0;
        padding: 2px 8px 24px;
        position: absolute;
        top: calc(100% - 2px);
        visibility: hidden;
        width: 100%;
        z-index: 1
    }
    .idx-products__title .custom-mobile-option ul.opt-custom>li {
        color: #000;
        cursor: pointer;
        font-size: 16px;
        font-weight: 400;
        line-height: 22px;
        margin-top: 8px
    }
    .idx-products__title .custom-mobile-option ul.opt-custom>li.is-actived {
        display: none
    }
    .idx-products__title .custom-mobile-option ul.opt-custom>li:hover {
        color: #00529C
    }
    .idx-products__title .custom-mobile-option.is-showed ul.opt-custom {
        animation: isShowed .8s cubic-bezier(.075, .82, .165, 1) forwards;
        display: block
    }
}

@media screen and (min-width:768px) {
    .idx-products__title {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: -20px
    }
    .idx-products__title>* {
        margin-top: 20px
    }
    .idx-products__title .group-title {
        margin-right: 12px
    }
    .idx-products__title .custom-option {
        flex-wrap: wrap;
        margin-top: 10px
    }
    .idx-products__title .custom-option-item.is-actived {
        color: #00529C
    }
    .idx-products__title .custom-mobile-option {
        display: none
    }
}

.idx-products-wrapper {
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .idx-products-wrapper {
        margin-top: 40px
    }
}

.idx-products-wrapper .wrapper-more {
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .idx-products-wrapper .wrapper-more {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .idx-products-wrapper .wrapper-more {
        margin-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .idx-products-wrapper .wrapper-more {
        margin-top: 40px
    }
}

.idx-slider {
    margin-top: 40px;
    padding-top: 55.87%;
    position: relative;
    width: 100%
}

@media screen and (min-width:768px) {
    .idx-slider {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .idx-slider {
        margin-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .idx-slider {
        margin-top: 60px
    }
}

@media screen and (min-width:768px) {
    .idx-slider {
        padding-top: 40.956%
    }
}

@media screen and (max-width:767px) {
    .idx-slider {
        display: none
    }
}

.idx-slider .wrapper {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.idx-slider .swiper,
.idx-slider .swiper-slide>* {
    border-radius: 4px;
    height: 100%
}

.idx-slider .swiper-pagination {
    bottom: 20px !important
}

.idx-projects {
    margin-top: 40px
}

@media screen and (min-width:768px) {
    .idx-projects {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .idx-projects {
        margin-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .idx-projects {
        margin-top: 60px
    }
}

.idx-projects-wrapper {
    margin-top: 40px
}

.idx-projects-wrapper img {
    width: 100% !important
}

.idx-projects-achievement {
    padding-top: 40px
}

@media screen and (min-width:768px) {
    .idx-projects-achievement {
        padding-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .idx-projects-achievement {
        padding-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .idx-projects-achievement {
        padding-top: 60px
    }
}

.idx-projects-achievement .achievement-item {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left
}

@media screen and (min-width:1024px) {
    .idx-projects-achievement .achievement-item {
        align-items: center;
        flex-direction: row
    }
}

.idx-projects-achievement .achievement-item .number {
    color: #00529C;
    font-size: 36px;
    font-weight: 600;
    line-height: 45px
}

@media screen and (min-width:768px) {
    .idx-projects-achievement .achievement-item .number {
        font-size: 48px;
        line-height: normal
    }
}

.idx-projects-achievement .achievement-item .text {
    color: #000;
    font-size: 16px;
    line-height: 24px;
    padding-right: 38px
}

@media screen and (min-width:1024px) {
    .idx-projects-achievement .achievement-item .text {
        margin-left: 10px;
        padding-right: 12px
    }
}

.idx-home {
    margin-top: 40px
}

@media screen and (min-width:768px) {
    .idx-home {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .idx-home {
        margin-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .idx-home {
        margin-top: 60px
    }
}

.idx-home-wrapper {
    margin-top: 40px
}

.idx-home-wrapper .idx-home-item {
    border-radius: 4px;
    overflow: hidden;
    position: relative
}

.idx-home-wrapper .idx-home-item__thumbs {
    display: block;
    height: 0;
    padding-top: 105.08%;
    position: relative;
    width: 100%
}

.idx-home-wrapper .idx-home-item__thumbs>* {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: scale(1);
    transition: transform .7s cubic-bezier(.075, .82, .165, 1);
    width: 100%
}

.idx-home-wrapper .idx-home-item__thumbs:after {
    background: transparent;
    content: "";
    height: 100%;
    left: 0;
    mix-blend-mode: multiply;
    position: absolute;
    top: 0;
    transition: background .7s cubic-bezier(.075, .82, .165, 1);
    width: 100%;
    z-index: 1
}

.idx-home-wrapper .idx-home-item__title {
    background: linear-gradient(0deg, #000, transparent 120%);
    bottom: 0;
    color: #fafafa;
    font-size: 18px;
    font-weight: 600;
    left: 0;
    line-height: 24px;
    padding: 18px 24px;
    position: absolute;
    width: 100%;
    z-index: 20
}

.idx-home-wrapper .idx-home-item:hover .idx-home-item__thumbs>* {
    transform: scale(1.1)
}

.idx-home-wrapper .idx-home-item:hover .idx-home-item__thumbs:after {
    background: rgba(0, 0, 0, .3)
}

@media screen and (max-width:767px) {
    .idx-home-wrapper .wrapper-left {
        display: none
    }
    .idx-home-wrapper .wrapper-right {
        margin-top: 0
    }
}

.idx-home-wrapper .wrapper-right>.row {
    position: relative
}

.idx-home-wrapper .wrapper-right>.row>:first-child .idx-home-item__thumbs {
    display: block;
    padding-top: calc(52.365% - 15px)
}

.idx-prizes {
    margin-top: 40px
}

@media screen and (min-width:768px) {
    .idx-prizes {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .idx-prizes {
        margin-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .idx-prizes {
        margin-top: 60px
    }
}

.idx-prizes-wrapper {
    margin-top: 40px
}

.idx-prizes-wrapper .swiper-slide {
    display: flex;
    justify-content: space-between;
    position: relative
}

.idx-prizes .prizes-item {
    display: flex;
    flex-direction: column
}

@media screen and (min-width:768px) {
    .idx-prizes .prizes-item {
        align-items: center;
        flex-direction: row
    }
}

.idx-prizes .prizes-item .logo {
    height: 54px
}

@media screen and (min-width:768px) {
    .idx-prizes .prizes-item .logo {
        height: 75px;
    }
}

@media screen and (min-width:1024px) {
    .idx-prizes .prizes-item .logo {
        flex: 1;
        width: auto
    }
}

.idx-prizes .prizes-item .logo>* {
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: left;
    object-position: left;
    width: 100%;
    border-radius: 8px;
}

.idx-prizes .prizes-item .name {
    color: #000;
    font-size: 14px;
    line-height: 20px;
    margin-top: 10px
}

@media screen and (min-width:768px) {
    .idx-prizes .prizes-item .name {
        margin-left: 20px;
        margin-top: 0
    }
}

@media screen and (min-width:1024px) {
    .idx-prizes .prizes-item .name {
        flex: 0 0 170px;
        width: 170px
    }
}

.idx-corner {
    margin-top: 40px
}

@media screen and (min-width:768px) {
    .idx-corner {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .idx-corner {
        margin-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .idx-corner {
        margin-top: 60px
    }
}

.idx-corner-wrapper {
    display: flex;
    flex-direction: column;
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .idx-corner-wrapper {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .idx-corner-wrapper {
        margin-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .idx-corner-wrapper {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .idx-corner-wrapper {
        align-items: center;
        flex-direction: row
    }
}

.idx-corner-wrapper .wrapper-left {
    display: flex;
    flex: 1
}

@media screen and (min-width:1024px) {
    .idx-corner-wrapper .wrapper-left {
        margin-right: 42px
    }
}

.idx-corner-wrapper .wrapper-left .thumb--small {
    flex: 1;
    margin-right: 12px
}

@media screen and (min-width:768px) {
    .idx-corner-wrapper .wrapper-left .thumb--small {
        margin-right: 20px
    }
}

.idx-corner-wrapper .wrapper-left .thumb--small .thumb {
    padding-top: 144.64%
}

.idx-corner-wrapper .wrapper-left .thumb--main {
    flex: 0 0 60%;
    width: 60%
}

.idx-corner-wrapper .wrapper-left .thumb--main .thumb {
    padding-top: 102.66%
}

.idx-corner-wrapper .wrapper-left .thumb--main .thumb>* {
    -o-object-position: top left;
    object-position: top left
}

.idx-corner-wrapper .wrapper-left .thumb {
    height: auto;
    position: relative;
    width: 100%
}

.idx-corner-wrapper .wrapper-left .thumb>* {
    border-radius: 4px;
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%
}

@media screen and (min-width:1024px) {
    .idx-corner-wrapper .wrapper-right {
        flex: 0 0 42.66%
    }
}

@media screen and (min-width:1280px) {
    .idx-corner-wrapper .wrapper-right {
        flex: 0 0 50%
    }
}

.idx-corner__title {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .idx-corner__title {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .idx-corner__title {
        margin-top: 0
    }
}

.idx-corner__desc {
    font-size: 16px;
    line-height: 24px;
    margin-top: 20px
}

.idx-design {
    margin-top: 40px
}

@media screen and (min-width:768px) {
    .idx-design {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .idx-design {
        margin-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .idx-design {
        margin-top: 60px
    }
}

.idx-design-wrapper {
    margin-top: 40px
}

.idx-design-wrapper .wrapper-item {
    align-items: center;
    border: 1px solid #c9c9c9;
    border-radius: 4px;
    box-shadow: 0 8px 8px rgba(0, 0, 0, .04);
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    padding: 40px;
    text-align: center
}

@media screen and (min-width:768px) {
    .idx-design-wrapper .wrapper-item {
        padding: 40px 56px
    }
}

.idx-design-wrapper .wrapper-item__thumbs {
    display: block;
    height: 77px;
    width: 77px
}

@media screen and (min-width:768px) {
    .idx-design-wrapper .wrapper-item__thumbs {
        height: 80px;
        width: 80px
    }
}

.idx-design-wrapper .wrapper-item__thumbs>* {
    height: 100%;
    width: 100%
}

.idx-design-wrapper .wrapper-item-content {
    flex: 1
}

.idx-design-wrapper .wrapper-item-content .name {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    margin-top: 20px
}

.idx-design-wrapper .wrapper-item-content .desc {
    color: #000;
    font-size: 16px;
    line-height: 24px;
    margin-top: 10px
}

.idx-showroom {
    margin-top: 40px
}

@media screen and (min-width:768px) {
    .idx-showroom {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .idx-showroom {
        margin-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .idx-showroom {
        margin-top: 60px
    }
}

.idx-showroom-wrapper {
    margin-top: 40px
}

.idx-showroom-item {
    border-radius: 4px;
    overflow: hidden;
    position: relative
}

.idx-showroom-item__thumbs {
    cursor: pointer;
    display: block;
    height: 0;
    padding-top: 60.3%;
    position: relative;
    width: 100%
}

.idx-showroom-item__thumbs>* {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: scale(1);
    transition: transform .7s cubic-bezier(.075, .82, .165, 1);
    width: 100%
}

.idx-showroom-item__thumbs:after {
    background: transparent;
    content: "";
    height: 100%;
    left: 0;
    mix-blend-mode: multiply;
    position: absolute;
    top: 0;
    transition: background .7s cubic-bezier(.075, .82, .165, 1);
    width: 100%;
    z-index: 1
}

.idx-showroom-item__title {
    background: linear-gradient(0deg, #000, transparent 120%);
    bottom: 0;
    color: #fafafa;
    font-size: 18px;
    font-weight: 600;
    left: 0;
    line-height: 24px;
    padding: 18px 24px;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 2
}

@media screen and (min-width:768px) {
    .idx-showroom-item__title {
        text-align: left
    }
}

.idx-showroom-item__title a[href="javascript:void(0)"] {
    cursor: auto
}

.idx-showroom-item:hover .idx-showroom-item__thumbs>* {
    transform: scale(1.1)
}

.idx-showroom-item:hover .idx-showroom-item__thumbs:after {
    background: rgba(0, 0, 0, .3)
}

.idx-showroom-item.item-video .idx-showroom-item__thumbs {
    cursor: pointer;
    display: block
}

@media screen and (min-width:768px) {
    .idx-showroom-item.item-video .idx-showroom-item__thumbs {
        padding-top: 41.71%
    }
}

.idx-showroom-item.item-video .idx-showroom-item__thumbs:after {
    content: none
}

.idx-showroom-item.item-video .idx-showroom-item__title {
    text-align: center
}

.idx-showroom-item.item-video:hover .idx-showroom-item__thumbs>* {
    transform: scale(1)
}

.idx-news {
    margin-top: 40px
}

@media screen and (min-width:768px) {
    .idx-news {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .idx-news {
        margin-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .idx-news {
        margin-top: 60px
    }
}

.idx-news-wrapper {
    margin-top: 40px
}

@media screen and (max-width:1023px) {
    .idx-news-wrapper .row>:nth-of-type(n+3) {
        display: none
    }
}

.idx-clients {
    margin-top: 40px
}

@media screen and (min-width:768px) {
    .idx-clients {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .idx-clients {
        margin-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .idx-clients {
        margin-top: 60px
    }
}

.idx-clients-wrapper {
    margin-top: 40px
}

.idx-clients-wrapper .swiper {
    height: auto;
    margin-top: -20px
}

@media screen and (min-width:768px) {
    .idx-clients-wrapper .swiper {
        margin-top: -35px
    }
}

.idx-clients-wrapper .swiper-slide {
    height: 64px;
    margin-top: 20px !important;
    width: 86px
}

@media screen and (min-width:768px) {
    .idx-clients-wrapper .swiper-slide {
        height: 72px;
        margin-top: 35px !important;
        width: 132px
    }
}

.idx-clients-wrapper .swiper-slide>* {
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%
}

.news-list {
    padding-top: 20px
}

@media screen and (min-width:768px) {
    .news-list {
        padding-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .news-list {
        padding-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .news-list {
        padding-top: 40px
    }
}

.news-list-top {
    display: flex;
    flex-direction: column
}

@media screen and (min-width:1024px) {
    .news-list-top {
        align-items: flex-end;
        flex-direction: row
    }
}

.news-list__title {
    color: #000;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px
}

.news-list-nav {
    flex: 1;
    margin-top: 20px
}

@media screen and (min-width:1024px) {
    .news-list-nav {
        margin-top: 0
    }
}

.news-list-nav ul {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    margin-left: -40px;
    margin-top: -10px
}

@media screen and (min-width:1024px) {
    .news-list-nav ul {
        align-items: flex-end;
        justify-content: flex-end;
        text-align: right
    }
}

.news-list-nav ul>li {
    padding-left: 40px;
    padding-top: 10px
}

.news-list-nav ul>li>a {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px
}

.news-list-nav ul>li.is-actived>a,
.news-list-nav ul>li>a:hover {
    color: #00529C
}

.news-list-selected {
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .news-list-selected {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .news-list-selected {
        margin-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .news-list-selected {
        margin-top: 40px
    }
}

.news-list-selected .pagination ul {
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .news-list-selected .pagination ul {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .news-list-selected .pagination ul {
        margin-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .news-list-selected .pagination ul {
        margin-top: 40px
    }
}

.news-detail {
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .news-detail {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .news-detail {
        margin-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .news-detail {
        margin-top: 40px
    }
}

.news-detail-wrapper {
    display: flex;
    flex-direction: column
}

@media screen and (min-width:1024px) {
    .news-detail-wrapper {
        flex-direction: row
    }
}

.news-detail-content {
    flex: 0 0 100%
}

@media screen and (min-width:1024px) {
    .news-detail-content {
        flex: 0 0 68.26%;
        width: 68.26%
    }
}

.news-detail-content .title {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 20px
}

@media screen and (min-width:768px) {
    .news-detail-content .title {
        margin-bottom: 40px
    }
}

@media screen and (min-width:1024px) {
    .news-detail-content .title {
        margin-bottom: 40px
    }
}

@media screen and (min-width:1280px) {
    .news-detail-content .title {
        margin-bottom: 40px
    }
}

.news-detail-related {
    flex: 1;
    margin-top: 40px
}

@media screen and (min-width:1024px) {
    .news-detail-related {
        margin-left: 70px;
        margin-top: 0
    }
}

.news-detail-related .related__name {
    color: #00529C;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 20px
}

@media screen and (min-width:768px) {
    .news-detail-related .related__name {
        margin-bottom: 40px
    }
}

@media screen and (min-width:1024px) {
    .news-detail-related .related__name {
        margin-bottom: 40px
    }
}

@media screen and (min-width:1280px) {
    .news-detail-related .related__name {
        margin-bottom: 40px
    }
}

.news-detail .share-socials,
.products {
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .products {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .products {
        margin-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .products {
        margin-top: 40px
    }
}

.products__title {
    color: #000;
    font-size: 36px;
    font-weight: 600;
    line-height: 45px;
    margin-bottom: 20px
}

@media screen and (min-width:768px) {
    .products__title {
        font-size: 48px;
        line-height: normal;
        margin-bottom: 40px
    }
}

@media screen and (min-width:1024px) {
    .products__title {
        margin-bottom: 40px
    }
}

@media screen and (min-width:1280px) {
    .products__title {
        margin-bottom: 40px
    }
}

.products-wp {
    align-items: stretch;
    display: flex
}

.products-wp .p-sticky {
    height: 100%
}

@media screen and (min-width:1024px) {
    .products-wp .p-sticky {
        margin-top: -100px;
        padding-top: 100px
    }
}

.products-wp-nav {
    border: 1px solid #777;
    border-radius: 4px;
    padding: 0 6px;
    font-size: 13px;
}

.products-wp-nav ul {
    display: flex;
    flex-direction: column;
    list-style-type: none
}

.products-wp-nav>ul>li>a {
    align-items: center;
    border-bottom: 1px solid #777;
    color: #000;
    display: flex;
    font-size: 18px;
    font-weight: 600;
    justify-content: space-between;
    line-height: 22px;
    padding: 20px 0
}

.products-wp-nav>ul>li>a .icon {
    height: 13px;
    width: 10px;
    margin-right: 5px;
}

.products-wp-nav>ul>li>a .icon>* {
    display: flex;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%
}

.products-wp-nav>ul>li>ul {
    border-bottom: 1px solid #777;
    display: none;
    opacity: 0;
    padding-bottom: 20px;
    padding-top: 20px;
    visibility: hidden
}

.products-wp-nav>ul>li>ul>li .group-item {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.products-wp-nav>ul>li>ul>li .group-item label {
    color: #000;
    cursor: pointer;
    flex: 1
}

.products-wp-nav>ul>li>ul>li .group-item .customCheckbox {
    border: 1px solid #c9c9c9;
    border-radius: 2px;
    cursor: pointer;
    height: 15px;
    position: relative;
    width: 15px
}

.products-wp-nav>ul>li>ul>li .group-item.is-checked label {
    color: #00529C
}

.products-wp-nav>ul>li>ul>li .group-item.is-checked .customCheckbox:after {
    border-color: #00529C;
    border-style: solid;
    border-width: 0 2px 2px 0;
    content: "";
    display: block;
    height: 9px;
    left: 50%;
    position: absolute;
    top: calc(50% - 1px);
    transform: translate(-50%, -50%) rotate(45deg);
    width: 5px
}

.products-wp-nav>ul>li>ul>li:not(:first-child) {
    /* margin-top: 16px; */
}

.products-wp-nav>ul>li.is-showed:last-child>a {
    border-bottom: 1px solid #777;
    padding: 20px 6px;
}

.products-wp-nav>ul>li.is-showed:last-child>ul {
    border-bottom: none
}

.products-wp-nav>ul>li.is-showed>ul {
    animation: isShowed .8s cubic-bezier(.075, .82, .165, 1) forwards;
    display: block
}

.products-wp-nav>ul>li:last-child>a {
    border-bottom: 0 solid #777
}

.products-wp-cat,
.products-wp-ls {
    color: #00529C;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    width: 100%
}

.products-wp-cat .title-wrapper,
.products-wp-ls .title-wrapper {
    padding-bottom: 20px
}

@media screen and (min-width:768px) {
    .products-wp-cat .title-wrapper,
    .products-wp-ls .title-wrapper {
        padding-bottom: 40px
    }
}

@media screen and (min-width:1024px) {
    .products-wp-cat .title-wrapper,
    .products-wp-ls .title-wrapper {
        padding-bottom: 40px
    }
}

@media screen and (min-width:1280px) {
    .products-wp-cat .title-wrapper,
    .products-wp-ls .title-wrapper {
        padding-bottom: 40px
    }
}

.products-wp-cat .pagination ul,
.products-wp-ls .pagination ul {
    padding-top: 20px
}

@media screen and (min-width:768px) {
    .products-wp-cat .pagination ul,
    .products-wp-ls .pagination ul {
        padding-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .products-wp-cat .pagination ul,
    .products-wp-ls .pagination ul {
        padding-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .products-wp-cat .pagination ul,
    .products-wp-ls .pagination ul {
        padding-top: 40px
    }
}

.products-wp-cat:not(:first-child),
.products-wp-ls:not(:first-child) {
    border-top: 1px solid #777;
    margin-top: 40px;
    padding-top: 40px
}

@media screen and (min-width:768px) {
    .products-wp-cat:not(:first-child),
    .products-wp-ls:not(:first-child) {
        padding-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .products-wp-cat:not(:first-child),
    .products-wp-ls:not(:first-child) {
        padding-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .products-wp-cat:not(:first-child),
    .products-wp-ls:not(:first-child) {
        padding-top: 60px
    }
}

@media screen and (min-width:768px) {
    .products-wp-cat:not(:first-child),
    .products-wp-ls:not(:first-child) {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .products-wp-cat:not(:first-child),
    .products-wp-ls:not(:first-child) {
        margin-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .products-wp-cat:not(:first-child),
    .products-wp-ls:not(:first-child) {
        margin-top: 60px
    }
}

.products-detail-infor-wp {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .products-detail-infor-wp {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .products-detail-infor-wp {
        margin-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .products-detail-infor-wp {
        margin-top: 40px
    }
}

.products-detail-infor__thumb {
    flex: 0 0 100%;
    position: relative;
    width: 100%
}

@media screen and (min-width:1024px) {
    .products-detail-infor__thumb {
        flex: 0 0 52%;
        width: 52%
    }
}

.products-detail-infor__thumb .option {
    display: none;
    opacity: 0;
    transform: scale(0)
}

@keyframes showOptionSlide {
    to {
        opacity: 1;
        transform: scale(1)
    }
}

.products-detail-infor__thumb .option.is-showed {
    animation: showOptionSlide 1s cubic-bezier(.075, .82, .165, 1) forwards;
    display: block
}

.products-detail-infor__thumb .thumb {
    border-radius: 4px;
    box-shadow: 0 1px 13px rgba(0, 0, 0, .05);
    display: block;
    height: 0;
    overflow: hidden;
    padding-top: 100%;
    position: relative;
    width: 100%
}

.products-detail-infor__thumb .thumb>* {
    border-radius: inherit;
    display: block;
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top left;
    object-position: top left;
    position: absolute;
    top: 0;
    width: 100%
}

.products-detail-infor__thumb .slider-bottom {
    margin-top: 10px
}

.products-detail-infor-content {
    flex: 1;
    margin-top: 30px
}

@media screen and (min-width:1024px) {
    .products-detail-infor-content {
        margin-left: 70px;
        margin-top: 0
    }
}

.products-detail-infor-content .content-top>:not(:first-child) {
    margin-top: 20px
}

.products-detail-infor-content .content-top .content-prices-pre {
    color: #707070;
    font-size: 14px;
    text-decoration: line-through
}

.products-detail-infor-content .content-top .content-prices-listed {
    align-items: center;
    color: #000;
    display: flex;
    flex-wrap: wrap;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3
}

@media screen and (min-width:768px) {
    .products-detail-infor-content .content-top .content-prices-listed {
        font-size: 32px
    }
}

.products-detail-infor-content .content-top .content-prices-listed .last {
    margin-right: 20px
}

.products-detail-infor-content .content-top .content-prices-listed a[role=button] {
    background-color: #e80826;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    margin-left: 20px;
    padding: 3px 8px
}

.products-detail-infor-content .content-top .content-prices-listed a[role=button] span {
    font-weight: 600
}

.products-detail-infor-content .content-bottom {
    border-top: 1px solid #000;
    margin-top: 20px;
    padding-top: 20px
}

.products-detail-infor-content .content-bottom>:not(:first-child) {
    margin-top: 16px
}

.products-detail-infor-content .content-bottom .content-icons:first-child,
.products-detail-infor-content .content-bottom .content-item:first-child {
    margin-top: -6px
}

.products-detail-infor-content .content-bottom .content-icons:not(:first-child),
.products-detail-infor-content .content-bottom .content-item:not(:first-child) {
    margin-top: 10px
}

.products-detail-infor-content .content-bottom .content-submit {
    margin-top: 20px
}

.products-detail-infor-content .content__title {
    color: #000;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px
}

.products-detail-infor-content .content-item {
    display: flex;
    flex-wrap: wrap;
    margin-top: -6px
}

.products-detail-infor-content .content-item.fcolumn {
    flex-direction: column
}

.products-detail-infor-content .content-item>* {
    padding-top: 6px
}

.products-detail-infor-content .content-item .name {
    color: #000;
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    margin-right: 10px
}

.products-detail-infor-content .content-item .value {
    display: flex;
    flex-wrap: wrap;
    font-size: 16px;
    line-height: 24px;
    margin-left: -8px;
    margin-top: -6px
}

.products-detail-infor-content .content-item .value>a {
    display: block
}

.products-detail-infor-content .content-item .value>a>img {
    border-radius: 100%;
    display: block;
    height: 20px;
    transition: all .2s ease-in-out;
    width: 20px
}

.products-detail-infor-content .content-item .value>a.is-actived>img {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .21);
    transform: scale(1.15)
}

.products-detail-infor-content .content-item .value>img {
    display: block;
    height: 20px;
    width: 20px
}

.products-detail-infor-content .content-item .value>* {
    margin-left: 8px;
    margin-top: 6px
}

.products-detail-infor-content .content-item .value>p {
    display: block;
    width: 100%
}

.products-detail-infor-content .content-item .content-logo {
    display: flex;
    flex-wrap: wrap;
    margin-left: -28px;
    margin-top: -6px
}

.products-detail-infor-content .content-item .content-logo__img {
    padding-left: 28px;
    padding-top: 16px;
    width: auto
}

.products-detail-infor-content .content-item .content-logo__img>* {
    border-radius: 0;
    box-shadow: none;
    display: inline-block;
    height: 35px;
    -o-object-fit: contain;
    object-fit: contain;
    width: auto
}

.products-detail-infor-content .content-desc {
    color: #000;
    font-size: 16px;
    line-height: 24px
}

.products-detail-infor-content .content-icons {
    display: flex;
    flex-wrap: wrap;
    margin-left: -28px;
    margin-top: -6px
}

.products-detail-infor-content .content-icons__img {
    padding-left: 28px;
    padding-top: 6px
}

.products-detail-infor-content .content-icons__img>* {
    background: #fff;
    border-radius: 100%;
    box-shadow: -1px 2px 5px rgba(0, 0, 0, .08);
    height: 40px;
    width: 40px
}

.products-detail-infor-content .content-submit>* {
    align-items: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    background-color: #00529C;
    border: none;
    border-radius: 4px;
    color: #fff;
    display: inline-flex;
    font-size: 16px;
    justify-content: center;
    line-height: 24px;
    min-width: 128px;
    outline: none;
    padding: 14px 18px;
    text-align: center;
    width: 100%
}

@media screen and (min-width:768px) {
    .products-detail-infor-content .content-submit>* {
        min-width: 174px
    }
}

.products-detail__title {
    color: #000;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px
}

.products-detail-group {
    margin-top: 40px
}

@media screen and (min-width:768px) {
    .products-detail-group {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .products-detail-group {
        margin-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .products-detail-group {
        margin-top: 60px
    }
}

.products-detail-group-title {
    border-bottom: 1px solid rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
    padding-bottom: 10px
}

@media screen and (min-width:1024px) {
    .products-detail-group-title {
        align-items: center;
        flex-direction: row;
        justify-content: space-between
    }
}

.products-detail-group-title .custom-option {
    --spaceOption: 10px;
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--spaceOption, 10px)*-1);
    margin-right: calc(var(--spaceOption, 10px)*-1);
    position: relative
}

@media screen and (max-width:1023px) {
    .products-detail-group-title .custom-option {
        margin-top: 20px
    }
}

@media screen and (min-width:768px) {
    .products-detail-group-title .custom-option {
        --spaceOption: 15px
    }
}

.products-detail-group-title .custom-option-item {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    padding-bottom: 10px;
    padding-left: var(--spaceOption, 10px);
    padding-right: var(--spaceOption, 10px)
}

.products-detail-group-title .custom-option-item.is-actived {
    color: #00529C
}

.products-detail-group-title .btn-moreall {
    display: flex;
    justify-content: flex-end;
    position: relative
}

.products-detail-group-title .btn-moreall>* {
    margin-left: 8px
}

@media screen and (min-width:768px) {
    .products-detail-group-title .btn-moreall>* {
        margin-left: 30px
    }
}

.products-detail-group-wrapper {
    margin-top: 20px
}

.products-detail-group-wrapper .wrapper-selected .swiper-slide {
    height: auto
}

.products-detail-group-wrapper .wrapper-selected .review-item {
    border-radius: 5px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .05);
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px 20px 0
}

.products-detail-group-wrapper .wrapper-selected .review-item__icon {
    align-items: center;
    display: flex;
    height: 22px;
    justify-content: center;
    width: 24px
}

.products-detail-group-wrapper .wrapper-selected .review-item__icon>* {
    display: block;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%
}

.products-detail-group-wrapper .wrapper-selected .review-item-desc {
    color: #000;
    flex: 1;
    font-size: 16px;
    line-height: 24px;
    margin-top: 10px
}

.products-detail-group-wrapper .wrapper-selected .review-item-bottom {
    border-top: 1px solid #dcdcdc;
    display: flex;
    margin-top: 15px;
    padding: 15px 0
}

.products-detail-group-wrapper .wrapper-selected .review-item-bottom .avt {
    height: 32px;
    width: 32px
}

.products-detail-group-wrapper .wrapper-selected .review-item-bottom .content {
    flex: 1;
    margin-left: 10px
}

.products-detail-group-wrapper .wrapper-selected .review-item-bottom .content__name {
    color: #000;
    font-size: 14px;
    line-height: 18px
}

.products-detail-group-wrapper .wrapper-selected .review-item-bottom .content__pos {
    color: #676767;
    font-size: 13px;
    line-height: 16px
}

.products-detail-group-wrapper .wrapper-selected .file-item {
    align-items: flex-end;
    display: flex;
    height: 100%
}

.products-detail-group-wrapper .wrapper-selected .file-item__icon {
    display: block;
    height: 40px;
    margin-right: 10px;
    width: 40px
}

.products-detail-group-wrapper .wrapper-selected .file-item__icon>* {
    height: 100%;
    width: 100%
}

.products-detail-group-wrapper .wrapper-selected .file-item__name {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px
}

.products-detail-related {
    margin-top: 40px;
    position: relative
}

@media screen and (min-width:768px) {
    .products-detail-related {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .products-detail-related {
        margin-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .products-detail-related {
        margin-top: 60px
    }
}

@media screen and (max-width:767px) {
    .products-detail-related {
        padding-bottom: 50px
    }
}

.products-detail-related-title {
    display: flex;
    flex-direction: column
}

@media screen and (min-width:768px) {
    .products-detail-related-title {
        align-items: flex-end;
        flex-direction: row;
        justify-content: space-between
    }
}

.products-detail-related-title .custom-option {
    display: flex;
    justify-content: flex-end;
    margin-left: -30px;
    margin-top: -10px;
    position: relative
}

.products-detail-related-title .custom-option-item {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    margin-left: 30px;
    padding-top: 10px
}

@media screen and (min-width:768px) {
    .products-detail-related-title .custom-option-item {
        font-size: 18px;
        line-height: 24px
    }
}

@media screen and (max-width:767px) {
    .products-detail-related-title .btn-moreall {
        bottom: 0;
        left: 0;
        position: absolute;
        text-align: center;
        width: 100%
    }
}

@media screen and (min-width:768px) {
    .products-detail-related-title .btn-moreall {
        display: flex;
        justify-content: flex-end;
        position: relative
    }
}

.products-detail-related-title .btn-moreall>* {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    margin-left: 8px
}

@media screen and (min-width:768px) {
    .products-detail-related-title .btn-moreall>* {
        font-size: 18px;
        line-height: 24px;
        margin-left: 30px
    }
}

.products-detail-related-ls {
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .products-detail-related-ls {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .products-detail-related-ls {
        margin-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .products-detail-related-ls {
        margin-top: 40px
    }
}

@media screen and (min-width:768px) {
    .products-detail-related-ls>ul>li:nth-of-type(3n) {
        display: none
    }
}

@media screen and (min-width:1024px) {
    .products-detail-related-ls>ul>li:nth-of-type(3n) {
        display: block
    }
}

.products-popup {
    align-items: center;
    background-color: rgba(0, 0, 0, .8);
    display: flex;
    display: none;
    height: 100%;
    justify-content: center;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    visibility: visible;
    width: 100%;
    z-index: 11112
}

@keyframes animationPopup {
    to {
        opacity: 1;
        pointer-events: auto;
        visibility: visible
    }
}

.products-popup.is-showed {
    animation: animationPopup .8s cubic-bezier(.175, .885, .32, 1.275) forwards;
    display: flex
}

.products-popup .wrapper {
    background-color: #fff;
    border: 2px solid #00529C;
    border-radius: 10px;
    box-shadow: 0 3px 32px rgba(0, 0, 0, .21);
    display: flex;
    flex-direction: column;
    max-height: 98%;
    max-width: 800px;
    overflow: auto;
    padding: 30px 20px;
    position: relative;
    width: var(--wContainer, 96vw)
}

@media screen and (min-width:768px) {
    .products-popup .wrapper {
        flex-direction: row;
        padding: 40px
    }
}

.products-popup .wrapper .close {
    align-items: center;
    background-color: #292d32;
    border-radius: 100%;
    display: flex;
    font-size: 0;
    height: 20px;
    justify-content: center;
    position: absolute;
    right: 10px;
    top: 6px;
    width: 20px
}

@media screen and (min-width:768px) {
    .products-popup .wrapper .close {
        right: 20px;
        top: 20px
    }
}

.products-popup .wrapper .close:after,
.products-popup .wrapper .close:before {
    border-radius: 2px;
    border-top: 2px solid #fff;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 62%
}

.products-popup .wrapper .close:before {
    transform: translate(-50%, -50%) rotate(-45deg)
}

.products-popup .wrapper .close:after {
    transform: translate(-50%, -50%) rotate(45deg)
}

.products-popup .wrapper .close:hover {
    background-color: #00529C
}

.products-popup .wrapper .wrapper-left {
    flex: 0 0 100%
}

@media screen and (min-width:768px) {
    .products-popup .wrapper .wrapper-left {
        flex: 0 0 42.8%
    }
}

.products-popup .wrapper .wrapper-left .thumbnail {
    border-radius: 10px;
    display: flex;
    height: auto;
    position: relative;
    width: 100%
}

.products-popup .wrapper .wrapper-left .thumbnail>* {
    height: 100%;
    width: 100%
}

.products-popup .wrapper .wrapper-right {
    flex: 1;
    margin-left: 0;
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .products-popup .wrapper .wrapper-right {
        margin-left: 30px;
        margin-top: 0
    }
}

.products-popup .wrapper .wrapper-right .form-popup .group-input {
    display: flex;
    flex-direction: column
}

.products-popup .wrapper .wrapper-right .form-popup .group-input label {
    color: #000;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    margin-bottom: 5px
}

@media screen and (min-width:768px) {
    .products-popup .wrapper .wrapper-right .form-popup .group-input label {
        font-size: 16px;
        line-height: 22px
    }
}

.products-popup .wrapper .wrapper-right .form-popup .group-input label span {
    color: #db4444
}

.products-popup .wrapper .wrapper-right .form-popup .group-input input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    background: #f5f5f5;
    border: none;
    border-radius: 4px;
    color: #000;
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    outline: none;
    padding: 9px 10px 7px;
    resize: none;
    width: 100%
}

@media screen and (min-width:768px) {
    .products-popup .wrapper .wrapper-right .form-popup .group-input input {
        font-size: 18px;
        line-height: 24px
    }
}

.products-popup .wrapper .wrapper-right .form-popup .group-input:not(:first-child) {
    margin-top: 10px
}

.products-popup .wrapper .wrapper-right .form-popup .group-submit {
    margin-top: 20px
}

.products-popup .wrapper .wrapper-right .form-popup .group-submit button[type=submit],
.products-popup .wrapper .wrapper-right .form-popup .group-submit input[type=submit] {
    align-items: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    background-color: #00529C;
    border: none;
    border-radius: 4px;
    color: #fff;
    display: inline-flex;
    font-size: 16px;
    font-weight: 600;
    justify-content: center;
    line-height: 20px;
    min-width: 78px;
    outline: none;
    padding: 8px 18px;
    position: relative;
    text-align: center
}

@media screen and (min-width:768px) {
    .products-popup .wrapper .wrapper-right .form-popup .group-submit button[type=submit],
    .products-popup .wrapper .wrapper-right .form-popup .group-submit input[type=submit] {
        font-size: 18px;
        line-height: 24px;
        min-width: 127px
    }
}

.projects-1 {
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .projects-1 {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .projects-1 {
        margin-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .projects-1 {
        margin-top: 40px
    }
}

.projects-1-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 100%
}

.projects-1__title>* {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px
}

.projects-1-desc {
    font-size: 16px;
    line-height: 24px;
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .projects-1-desc {
        width: 88.056%
    }
}

.projects-1__thumbs {
    display: block;
    margin-top: 40px;
    width: 100%
}

.projects-1__thumbs>* {
    height: auto;
    max-width: 100%;
    width: 100%
}

.projects-list {
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .projects-list {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .projects-list {
        margin-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .projects-list {
        margin-top: 40px
    }
}

.projects-list-nav>ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style-type: none;
    margin-left: -30px;
    margin-top: -10px
}

.projects-list-nav>ul>li {
    margin-left: 30px;
    padding-bottom: 10px;
    padding-top: 10px;
    position: relative
}

.projects-list-nav>ul>li:before,
.projects-list-nav>ul>li>a:after,
.projects-list-nav>ul>li>a:before {
    border-top: 2px solid #000;
    bottom: 0;
    content: "";
    display: none;
    height: 0;
    left: 0;
    position: absolute;
    width: 33.3333%
}

.projects-list-nav>ul>li>a {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px
}

.projects-list-nav>ul>li>a:before {
    border-color: #e60013;
    left: 33.3333%
}

.projects-list-nav>ul>li>a:after {
    border-color: #fff100;
    left: 66.6667%
}

.projects-list-nav>ul>li.is-actived>a,
.projects-list-nav>ul>li>a:hover {
    color: #00529C
}

.projects-list-nav>ul>li.is-actived:before,
.projects-list-nav>ul>li.is-actived>a:after,
.projects-list-nav>ul>li.is-actived>a:before {
    display: block
}

.projects-list-selected {
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .projects-list-selected {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .projects-list-selected {
        margin-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .projects-list-selected {
        margin-top: 40px
    }
}

.projects-list-selected .pagination ul {
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .projects-list-selected .pagination ul {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .projects-list-selected .pagination ul {
        margin-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .projects-list-selected .pagination ul {
        margin-top: 40px
    }
}

.projects-list .projects-item .thumbnail {
    border-radius: 10px;
    cursor: pointer;
    height: 0;
    overflow: hidden;
    padding-top: 64.75%;
    position: relative;
    width: 100%
}

.projects-list .projects-item .thumbnail>* {
    border-radius: 10px;
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    top: 0;
    transition: transform .7s cubic-bezier(.075, .82, .165, 1);
    width: 100%
}

.projects-list .projects-item .thumbnail:before {
    border: 1px solid #00529C;
    bottom: 10px;
    content: "";
    left: 10px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 10px;
    top: 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    z-index: 3
}

.projects-list .projects-item .thumbnail:after {
    background-color: rgba(0, 0, 0, .2);
    bottom: 10px;
    content: "";
    left: 10px;
    opacity: 0;
    position: absolute;
    right: 10px;
    top: 10px;
    transition: opacity .2s cubic-bezier(.075, .82, .165, 1)
}

.projects-list .projects-item .content {
    margin-top: 10px
}

.projects-list .projects-item .content__name {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px
}

.projects-list .projects-item .content-bottom {
    color: #000;
    display: flex;
    font-size: 14px;
    justify-content: space-between;
    line-height: 18px;
    margin-top: 10px
}

.projects-list .projects-item .content-bottom .location {
    color: #00529C
}

.projects-list .projects-item:hover .thumbnail>* {
    transform: scale(1.1)
}

.projects-list .projects-item:hover .thumbnail:before {
    animation: lineThumbEffect .4s linear forwards
}

.projects-list .projects-item:hover .thumbnail:after {
    opacity: 1
}

.projects-list .projects-item:hover .content__name {
    color: #00529C
}

.projects-detail {
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .projects-detail {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .projects-detail {
        margin-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .projects-detail {
        margin-top: 40px
    }
}

.projects-detail-wrapper {
    display: flex;
    flex-direction: column
}

@media screen and (min-width:1024px) {
    .projects-detail-wrapper {
        flex-direction: row
    }
}

.projects-detail-content {
    flex: 0 0 100%
}

@media screen and (min-width:1024px) {
    .projects-detail-content {
        flex: 0 0 68.26%;
        width: 68.26%
    }
}

.projects-detail-content .title {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 20px
}

.projects-detail-related {
    flex: 1;
    margin-top: 40px
}

@media screen and (min-width:1024px) {
    .projects-detail-related {
        margin-left: 70px;
        margin-top: 0
    }
}

.projects-detail-related .related__name {
    color: #00529C;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 20px
}

.projects-detail .share-socials {
    margin-top: 20px
}

.searches {
    padding-top: 20px
}

@media screen and (min-width:768px) {
    .searches {
        padding-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .searches {
        padding-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .searches {
        padding-top: 40px
    }
}

.searches__title {
    color: #191b1d;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    text-align: center
}

.searches-wrapper {
    padding-top: 40px
}

@media screen and (min-width:768px) {
    .searches-wrapper {
        padding-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .searches-wrapper {
        padding-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .searches-wrapper {
        padding-top: 60px
    }
}

.searches-wrapper-item:not(:first-child) {
    padding-top: 60px
}

@media screen and (min-width:768px) {
    .searches-wrapper-item:not(:first-child) {
        padding-top: 80px
    }
}

@media screen and (min-width:1024px) {
    .searches-wrapper-item:not(:first-child) {
        padding-top: 80px
    }
}

@media screen and (min-width:1280px) {
    .searches-wrapper-item:not(:first-child) {
        padding-top: 80px
    }
}

.searches-wrapper-item .item__name {
    color: #000;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 20px
}

@media screen and (min-width:768px) {
    .searches-wrapper-item .item__name {
        margin-bottom: 40px
    }
}

@media screen and (min-width:1024px) {
    .searches-wrapper-item .item__name {
        margin-bottom: 40px
    }
}

@media screen and (min-width:1280px) {
    .searches-wrapper-item .item__name {
        margin-bottom: 40px
    }
}

.searches-wrapper-item .item-ls .notfound {
    color: #00529C;
    font-size: 16px;
    line-height: 24px;
    text-align: center
}

.searches-wrapper-item .pagination ul {
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .searches-wrapper-item .pagination ul {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .searches-wrapper-item .pagination ul {
        margin-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .searches-wrapper-item .pagination ul {
        margin-top: 40px
    }
}

.searches-more {
    color: #00529C;
    font-size: 16px;
    line-height: 24px;
    text-align: center
}

.services {
    margin-bottom: 80px;
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .services {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .services {
        margin-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .services {
        margin-top: 40px
    }
}

.services-wp-opt {
    display: block
}

.services-wp-opt>ul {
    align-items: stretch;
    display: flex;
    list-style-type: none
}

.services-wp-opt>ul>li {
    flex: 1;
    max-width: 33.3333%;
    min-width: 33.3333%
}

.services-wp-opt>ul>li:first-child>a {
    border-radius: 8px 0 0 0;
    overflow: hidden
}

.services-wp-opt>ul>li:last-child>a {
    border-radius: 0 8px 0 0;
    overflow: hidden
}

.services-wp-opt>ul>li>a {
    align-items: center;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
    color: #000;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-weight: 700;
    height: 100%;
    justify-content: center;
    line-height: 15px;
    padding: 12px 11px;
    position: relative;
    text-align: center;
    transition: all .16s ease-in-out;
    width: 100%
}

@media screen and (min-width:768px) {
    .services-wp-opt>ul>li>a {
        font-size: 18px;
        line-height: 20px;
        padding: 14px 30px
    }
}

.services-wp-opt>ul>li>a:before {
    background: linear-gradient(90deg, #007b8d 5.66%, #02c39a);
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all .16s ease-in-out;
    width: 100%
}

.services-wp-opt>ul>li>a>* {
    position: relative;
    z-index: 2
}

.services-wp-opt>ul>li.is-actived>a {
    color: #fff
}

.services-wp-opt>ul>li.is-actived>a:before {
    opacity: 1
}

.services-wp-selected {
    color: #000
}

.services-wp-selected .desc {
    color: currentColor;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    padding: 14px 0
}

@media screen and (min-width:768px) {
    .services-wp-selected .desc {
        font-size: 18px;
        line-height: 25px;
        padding: 20px 17px
    }
}

.services-wp-selected .table {
    overflow: auto
}

.services-wp-selected .table+.table {
    margin-top: 14px
}

@media screen and (min-width:768px) {
    .services-wp-selected .table+.table {
        margin-top: 20px
    }
}

@media screen and (min-width:1024px) {
    .services-wp-selected .table+.table {
        margin-top: 20px
    }
}

.services-wp-selected .table table,
.services-wp-selected .table td,
.services-wp-selected .table th {
    border: 1px solid #ddd
}

.services-wp-selected .table::-webkit-scrollbar-track {
    background-color: #959595;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
}

.services-wp-selected .table::-webkit-scrollbar {
    background-color: #959595;
    height: 5px;
    width: 5px
}

.services-wp-selected .table::-webkit-scrollbar-thumb {
    background-color: #007b8d;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
}

.services-wp-selected .table table {
    border-collapse: collapse;
    width: 100%
}

.services-wp-selected .table table tr>td:first-child,
.services-wp-selected .table table tr>th:first-child {
    left: 0;
    position: sticky;
    z-index: 2
}

.services-wp-selected .table table tr>td:first-child:after,
.services-wp-selected .table table tr>th:first-child:after {
    border-right: 1px solid #ddd;
    box-shadow: 10px 0 8px -8px rgba(5, 5, 5, .06);
    content: "";
    height: 100%;
    position: absolute;
    right: 1px;
    top: 0;
    transform: translate(200%);
    width: 0
}

.services-wp-selected .table table tr>td:first-child,
.services-wp-selected .table table tr>th:first-child {
    font-size: 12px;
    font-weight: 600;
    line-height: 15px;
    min-width: 130px;
    text-align: left;
    width: 130px
}

@media screen and (min-width:768px) {
    .services-wp-selected .table table tr>td:first-child,
    .services-wp-selected .table table tr>th:first-child {
        font-size: 18px;
        font-weight: 700;
        line-height: 20px;
        min-width: 280px;
        width: 358px
    }
}

.services-wp-selected .table table tr>th {
    background: #007b8d;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    min-width: 94px;
    padding: 9px 16px;
    text-align: center;
    vertical-align: middle
}

.services-wp-selected .table table tr>th span {
    display: block
}

@media screen and (min-width:768px) {
    .services-wp-selected .table table tr>th {
        font-size: 16px;
        line-height: 1;
        min-width: 120px;
        padding: 20px 18px
    }
}

.services-wp-selected .table table tr>td {
    background: #fff;
    color: currentColor;
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    padding: 9px 8px;
    text-align: center;
    vertical-align: middle
}

@media screen and (min-width:768px) {
    .services-wp-selected .table table tr>td {
        font-size: 16px;
        line-height: 20px;
        padding: 20px 8px
    }
}

.services-wp-selected .table table tr>td span {
    display: block
}

.services-wp-selected .table table tr>td span.unit {
    font-size: 12px;
    font-weight: 600;
    line-height: 15px
}

@media screen and (min-width:768px) {
    .services-wp-selected .table table tr>td span.unit {
        font-size: 14px;
        line-height: 15px
    }
}

.services-wp-selected .table table tr>td span.checked {
    background: linear-gradient(90deg, #0e6089 5.66%, #41ae8b);
    border-radius: 100%;
    display: block;
    font-size: 0;
    height: 16px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 16px
}

@media screen and (min-width:768px) {
    .services-wp-selected .table table tr>td span.checked {
        height: 20px;
        width: 20px
    }
}

.services-wp-selected .table table tr>td span.checked:after {
    border: solid #fff;
    border-width: 0 2px 2px 0;
    content: "";
    height: 50%;
    left: 50%;
    position: absolute;
    top: 46%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 32%
}

.services-wp-selected .table table tr>td span.not {
    background: #fb0000;
    border-radius: 100%;
    display: block;
    font-size: 0;
    height: 16px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 16px
}

@media screen and (min-width:768px) {
    .services-wp-selected .table table tr>td span.not {
        height: 20px;
        width: 20px
    }
}

.services-wp-selected .table table tr>td span.not:after,
.services-wp-selected .table table tr>td span.not:before {
    border-radius: 2px;
    border-top: 2px solid #fff;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 56%
}

.services-wp-selected .table table tr>td span.not:after {
    transform: translate(-50%, -50%) rotate(-45deg)
}

.services-wp-selected .bottom {
    margin-top: 30px
}

@media screen and (min-width:768px) {
    .services-wp-selected .bottom {
        margin-top: 20px
    }
}

.services-wp-selected .links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-right: -20px;
    margin-top: 30px
}

@media screen and (min-width:768px) {
    .services-wp-selected .links {
        margin-right: -24px
    }
}

.services-wp-selected .links-item {
    align-items: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #f89d2f;
    border: none;
    color: #fff;
    display: inline-flex;
    font-size: 16px;
    font-weight: 400;
    justify-content: center;
    line-height: 20px;
    margin-right: 20px;
    margin-top: 10px;
    outline: none;
    padding: 6px 14px;
    position: relative;
    text-align: center;
    transition: all .3s ease-out
}

.services-wp-selected .links-item .icon {
    align-items: center;
    color: #272d35;
    display: flex;
    height: 24px;
    justify-content: center;
    margin-right: 4px;
    text-align: center;
    width: 24px
}

.services-wp-selected .links-item .icon>* {
    display: block;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%
}

@media screen and (min-width:768px) {
    .services-wp-selected .links-item {
        font-size: 18px;
        line-height: 25px;
        margin-right: 24px;
        padding: 8px 14px
    }
    .services-wp-selected .links-item:before {
        background: linear-gradient(90deg, #0e6089 5.66%, #41ae8b);
        content: "";
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        transition: all .16s ease-in-out;
        width: 100%
    }
    .services-wp-selected .links-item>* {
        position: relative;
        z-index: 2
    }
    .services-wp-selected .links-item:hover:before {
        opacity: 1
    }
}

.services-wp-list .services-wp-selected {
    display: none
}

.services-wp-list .services-wp-selected.is-showed {
    display: block
}

.showroom {
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .showroom {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .showroom {
        margin-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .showroom {
        margin-top: 40px
    }
}

.showroom-wrapper__title {
    color: #000;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 20px
}

@media screen and (min-width:768px) {
    .showroom-wrapper__title {
        margin-bottom: 40px
    }
}

@media screen and (min-width:1024px) {
    .showroom-wrapper__title {
        margin-bottom: 40px
    }
}

@media screen and (min-width:1280px) {
    .showroom-wrapper__title {
        margin-bottom: 40px
    }
}

.showroom-wrapper-desc {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 40px
}

@media screen and (min-width:768px) {
    .showroom-wrapper-desc {
        margin-bottom: 40px
    }
}

@media screen and (min-width:1024px) {
    .showroom-wrapper-desc {
        margin-bottom: 60px
    }
}

@media screen and (min-width:1280px) {
    .showroom-wrapper-desc {
        margin-bottom: 60px
    }
}

.showroom-detail-1 {
    position: relative
}

.showroom-detail-1 .bg {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.showroom-detail-1 .wrapper {
    padding-bottom: 20px;
    padding-top: 20px;
    position: relative
}

@media screen and (min-width:768px) {
    .showroom-detail-1 .wrapper {
        padding-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .showroom-detail-1 .wrapper {
        padding-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .showroom-detail-1 .wrapper {
        padding-top: 40px
    }
}

@media screen and (min-width:768px) {
    .showroom-detail-1 .wrapper {
        padding-bottom: 40px
    }
}

@media screen and (min-width:1024px) {
    .showroom-detail-1 .wrapper {
        padding-bottom: 40px
    }
}

@media screen and (min-width:1280px) {
    .showroom-detail-1 .wrapper {
        padding-bottom: 40px
    }
}

.showroom-detail-1 .wrapper-thumbnail {
    padding-bottom: 40px;
    padding-top: 40px;
    position: relative
}

@media screen and (min-width:768px) {
    .showroom-detail-1 .wrapper-thumbnail {
        padding-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .showroom-detail-1 .wrapper-thumbnail {
        padding-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .showroom-detail-1 .wrapper-thumbnail {
        padding-top: 60px
    }
}

@media screen and (min-width:768px) {
    .showroom-detail-1 .wrapper-thumbnail {
        padding-bottom: 40px
    }
}

@media screen and (min-width:1024px) {
    .showroom-detail-1 .wrapper-thumbnail {
        padding-bottom: 60px
    }
}

@media screen and (min-width:1280px) {
    .showroom-detail-1 .wrapper-thumbnail {
        padding-bottom: 60px
    }
}

.showroom-detail-1 .wrapper-thumbnail__img {
    border-radius: 6px;
    height: 0;
    padding-top: 75%;
    position: relative;
    width: 100%
}

@media screen and (min-width:768px) {
    .showroom-detail-1 .wrapper-thumbnail__img {
        padding-top: 42.5%
    }
}

.showroom-detail-1 .wrapper-thumbnail__img>* {
    border-radius: inherit;
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top left;
    object-position: top left;
    position: absolute;
    top: 0;
    width: 100%
}

@media screen and (min-width:1024px) {
    .showroom-detail-1 .wrapper-thumbnail__img {
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: top left;
        object-position: top left;
        padding-top: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 66.724%;
        z-index: 0
    }
}

.showroom-detail-1 .wrapper-infor {
    background-color: #fff;
    border-radius: 10px;
    margin-left: 0;
    margin-top: 20px;
    padding: 20px;
    position: relative;
    width: 100%;
    z-index: 1
}

@media screen and (min-width:768px) {
    .showroom-detail-1 .wrapper-infor {
        margin-left: 40px;
        margin-top: -120px;
        width: calc(100% - 80px)
    }
}

@media screen and (min-width:1024px) {
    .showroom-detail-1 .wrapper-infor {
        margin-left: 0;
        margin-top: 0;
        width: 56.229%
    }
}

@media screen and (min-width:768px) {
    .showroom-detail-1 .wrapper-infor {
        padding: 40px
    }
}

@media screen and (min-width:1024px) {
    .showroom-detail-1 .wrapper-infor {
        padding: 40px
    }
}

@media screen and (min-width:1280px) {
    .showroom-detail-1 .wrapper-infor {
        padding: 40px
    }
}

.showroom-detail-1 .wrapper-infor__bg {
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0
}

.showroom-detail-1 .wrapper-infor>.row {
    position: relative;
    z-index: 1
}

.showroom-detail-1 .wrapper-infor-item .name {
    color: #00529C;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    text-transform: uppercase
}

.showroom-detail-1 .wrapper-infor-item .desc {
    color: #212121;
    font-size: 16px;
    line-height: 24px;
    margin-top: 4px
}

.showroom-detail-2 {
    margin-top: 40px
}

@media screen and (min-width:768px) {
    .showroom-detail-2 {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .showroom-detail-2 {
        margin-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .showroom-detail-2 {
        margin-top: 60px
    }
}

.showroom-detail-2 .wrapper__title {
    color: #000;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 20px
}

@media screen and (min-width:768px) {
    .showroom-detail-2 .wrapper__title {
        margin-bottom: 40px
    }
}

@media screen and (min-width:1024px) {
    .showroom-detail-2 .wrapper__title {
        margin-bottom: 40px
    }
}

@media screen and (min-width:1280px) {
    .showroom-detail-2 .wrapper__title {
        margin-bottom: 40px
    }
}

.showroom-detail-2 .wrapper-opts,
.showroom-detail-2 .wrapper-opts ul {
    align-items: center;
    display: flex;
    justify-content: center
}

.showroom-detail-2 .wrapper-opts ul {
    flex-wrap: wrap;
    list-style-type: none;
    margin-left: -14px;
    margin-top: -14px
}

.showroom-detail-2 .wrapper-opts ul>li {
    padding-left: 14px;
    padding-top: 14px
}

.showroom-detail-2 .wrapper-opts ul>li>a {
    align-items: center;
    border: 1px solid;
    border-radius: 5px;
    color: #000;
    display: flex;
    font-size: 18px;
    font-weight: 600;
    justify-content: center;
    line-height: 24px;
    padding: 8px 16px
}

.showroom-detail-2 .wrapper-opts ul>li.is-actived>a,
.showroom-detail-2 .wrapper-opts ul>li>a:hover {
    color: #00529C
}

.showroom-detail-2 .wrapper-selected {
    margin-top: 40px
}

@media screen and (min-width:768px) {
    .showroom-detail-2 .wrapper-selected {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .showroom-detail-2 .wrapper-selected {
        margin-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .showroom-detail-2 .wrapper-selected {
        margin-top: 60px
    }
}

.showroom-detail-2 .wrapper .combo-item {
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .15);
    height: 0;
    padding-top: 63.1%;
    position: relative;
    width: 100%
}

.showroom-detail-2 .wrapper .combo-item .hover,
.showroom-detail-2 .wrapper .combo-item .thumbnail {
    border-radius: inherit;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%
}

.showroom-detail-2 .wrapper .combo-item .hover>*,
.showroom-detail-2 .wrapper .combo-item .thumbnail>* {
    border-radius: inherit;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    transition: transform .7s cubic-bezier(.075, .82, .165, 1);
    width: 100%
}

.showroom-detail-2 .wrapper .combo-item .hover {
    opacity: 0;
    z-index: 1
}

.showroom-detail-2 .wrapper .combo-item:hover .thumbnail>* {
    transform: scale(1.2)
}

.showroom-detail-2 .wrapper .combo-item:hover .hover {
    opacity: 1
}

.showroom-detail-3 {
    margin-top: 40px
}

@media screen and (min-width:768px) {
    .showroom-detail-3 {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .showroom-detail-3 {
        margin-top: 60px
    }
}

@media screen and (min-width:1280px) {
    .showroom-detail-3 {
        margin-top: 60px
    }
}

.supports-list {
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .supports-list {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .supports-list {
        margin-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .supports-list {
        margin-top: 40px
    }
}

.supports-list__title {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 20px
}

@media screen and (min-width:768px) {
    .supports-list__title {
        margin-bottom: 40px
    }
}

@media screen and (min-width:1024px) {
    .supports-list__title {
        margin-bottom: 40px
    }
}

@media screen and (min-width:1280px) {
    .supports-list__title {
        margin-bottom: 40px
    }
}

.supports-list-selected {
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .supports-list-selected {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .supports-list-selected {
        margin-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .supports-list-selected {
        margin-top: 40px
    }
}

.supports-list-selected .pagination ul {
    margin-top: 20px
}

@media screen and (min-width:768px) {
    .supports-list-selected .pagination ul {
        margin-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .supports-list-selected .pagination ul {
        margin-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .supports-list-selected .pagination ul {
        margin-top: 40px
    }
}

.supports-list .supports-item {
    align-items: flex-start;
    display: flex
}

.supports-list .supports-item__thumbs {
    border-radius: 10px;
    display: block;
    height: 0;
    overflow: hidden;
    padding-top: 62.445%;
    position: relative;
    width: 100%
}

.supports-list .supports-item__thumbs>* {
    border-radius: inherit;
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    top: 0;
    transition: transform .8s cubic-bezier(.175, .885, .32, 1.275);
    width: 100%
}

.supports-list .supports-item-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center
}

.supports-list .supports-item-content .name {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px
}

.supports-list .supports-item-content .desc {
    color: #9f9f9f;
    font-size: 16px;
    line-height: 24px;
    margin-top: 10px
}

.supports-list .supports-item:hover .supports-item__thumbs>* {
    transform: scale(1.04)
}

.supports-list .supports-item:hover .supports-item-content .name {
    color: #00529C
}

.download-wrapper {
    padding-top: 20px
}

@media screen and (min-width:768px) {
    .download-wrapper {
        padding-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .download-wrapper {
        padding-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .download-wrapper {
        padding-top: 40px
    }
}

.download-wrapper--top {
    padding-bottom: 20px
}

@media screen and (min-width:768px) {
    .download-wrapper--top {
        padding-bottom: 40px
    }
}

@media screen and (min-width:1024px) {
    .download-wrapper--top {
        padding-bottom: 40px
    }
}

@media screen and (min-width:1280px) {
    .download-wrapper--top {
        padding-bottom: 40px
    }
}

.download-wrapper--top .desc {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 8px
}

@media screen and (min-width:768px) {
    .download-wrapper--top .desc {
        font-size: 18px;
        line-height: 24px
    }
}

.download-wrapper--top .title>* {
    color: #000;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px
}

.download-wrapper--ls .item {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    width: 100%
}

.download-wrapper--ls .item-thumbs {
    flex: 0 0 100%;
    min-height: 160px;
    overflow: hidden
}

@media screen and (min-width:768px) {
    .download-wrapper--ls .item-thumbs {
        flex: 0 0 25%
    }
}

@media screen and (min-width:1024px) {
    .download-wrapper--ls .item-thumbs {
        flex: 0 0 35%
    }
}

.download-wrapper--ls .item-thumbs>* {
    transition: transform .7s cubic-bezier(.075, .82, .165, 1)
}

.download-wrapper--ls .item-thumbs>a {
    display: block;
    height: 100%;
    padding-top: 80%;
    position: relative;
    width: 100%
}

.download-wrapper--ls .item-thumbs img {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.download-wrapper--ls .item-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-top: 10px
}

@media screen and (min-width:768px) {
    .download-wrapper--ls .item-content {
        margin-left: 16px;
        margin-top: 0
    }
}

.download-wrapper--ls .item-content__title>* {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px
}

.download-wrapper--ls .item-content__title>:hover {
    color: #00529C
}

.download-wrapper--ls .item-content__desc {
    color: #424242;
    flex: 1;
    font-size: 13px;
    line-height: 16px;
    margin-bottom: 10px;
    margin-top: 8px
}

@media screen and (min-width:768px) {
    .download-wrapper--ls .item-content__desc {
        margin-bottom: 24px
    }
}

.download-wrapper--ls .item-content-button {
    align-items: flex-end;
    color: #000;
    display: flex;
    flex-wrap: wrap;
    font-size: 11px;
    line-height: 14px
}

.download-wrapper--ls .item-content-button .icon-download {
    align-items: flex-end;
    display: flex;
    height: 24px;
    justify-content: center;
    margin-right: 8px;
    width: 24px
}

.download-wrapper--ls .item-content-button .icon-download>* {
    display: block;
    height: 100%;
    width: 100%
}

.download-wrapper--ls .item-content-button a[role=button] {
    align-items: flex-end;
    color: #000;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    margin-right: 10px
}

.download-wrapper--ls .item-content-button a[role=button] .icon-download [stroke]:not([stroke=none]) {
    stroke: currentColor
}

.download-wrapper--ls .item-content-button a[role=button]:hover {
    color: #00529C
}

.download-wrapper--ls .item:hover .item-thumbs>* {
    transform: scale(1.1)
}

.download-wrapper--ls .pagination ul {
    padding-top: 20px
}

@media screen and (min-width:768px) {
    .download-wrapper--ls .pagination ul {
        padding-top: 40px
    }
}

@media screen and (min-width:1024px) {
    .download-wrapper--ls .pagination ul {
        padding-top: 40px
    }
}

@media screen and (min-width:1280px) {
    .download-wrapper--ls .pagination ul {
        padding-top: 40px
    }
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current {
    background: #007b8d;
    box-shadow: inset 0 1px 3px 0 #007b8d;
    color: #fff;
    font-weight: 700
}

.xdsoft_datetimepicker .xdsoft_calendar td:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:hover {
    background: #f89d2f !important;
    box-shadow: none !important;
    color: #fff !important
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
    color: #02c39a
}

body {
    --hHeader: 0px
}

main {
    padding-top: var(--hHeader, 0);
}

/*# sourceMappingURL=app.css.map*/

.alert-success {
    margin: 1rem auto;
    text-align: center;
    padding: 1rem 0;
    font-size: 13px;
    color: #436332;
    background: #E1F6D6;
    border: 1px solid #95B684;
    border-radius: 4px;
    font-weight: 600;
}
  
.alert-danger {
    margin: 1rem auto;
    text-align: center;
    padding: 1rem 0;
    font-size: 13px;
    color: white;
    background: #dc8383;
    border: 1px solid #c25252;
    border-radius: 4px;
    font-weight: 600;
}

.writeux .desc {
    padding: 0 8px;
    font-size: 13px;
    font-style: italic;
}

#aboutPage {
    padding: 1rem;
}

.products-wp-nav ul ul {
    padding: 6px 0;
}

.products-wp-nav ul ul li {
    line-height: 20px;
    color: black;
}

.products-wp-nav ul ul li a:hover {
    color: #626262;
}

.products-wp-nav ul ul li a:before {
    content: '';
    float: left;
    width: 6px;
    height: 6px;
    margin: 6px;
    background: #02519b;
    border-radius: 50%;
}

.products-wp-nav ul ul ul li a:before {
    background: #6ca1d2;
}

p, span {
    line-height: 22px;
}

.demo-gallery>ul {
    margin-bottom: 1rem;
    overflow: hidden;
}

.demo-gallery>ul>li {
    margin-bottom: 15px;
    width: 25%;
    display: inline-block;
    margin-right: 15px;
    list-style: outside none none;
}

.demo-gallery>ul>li a {
    border: 3px solid #FFF;
    border-radius: 3px;
    display: block;
    overflow: hidden;
    position: relative;
    float: left;
    min-width: 200px;
    min-height: 200px;
}

.demo-gallery>ul>li a>img {
    -webkit-transition: -webkit-transform 0.15s ease 0s;
    -moz-transition: -moz-transform 0.15s ease 0s;
    -o-transition: -o-transform 0.15s ease 0s;
    transition: transform 0.15s ease 0s;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    height: 100%;
    width: 100%;
}

.demo-gallery>ul>li a:hover>img {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
}

.demo-gallery>ul>li a:hover .demo-gallery-poster>img {
    opacity: 1;
}

.demo-gallery>ul>li a .demo-gallery-poster {
    background-color: rgba(0, 0, 0, 0.1);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: background-color 0.15s ease 0s;
    -o-transition: background-color 0.15s ease 0s;
    transition: background-color 0.15s ease 0s;
}

.demo-gallery>ul>li a .demo-gallery-poster>img {
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    opacity: 0;
    position: absolute;
    top: 50%;
    -webkit-transition: opacity 0.3s ease 0s;
    -o-transition: opacity 0.3s ease 0s;
    transition: opacity 0.3s ease 0s;
}

.demo-gallery>ul>li a:hover .demo-gallery-poster {
    background-color: rgba(0, 0, 0, 0.5);
}

.demo-gallery .justified-gallery>a>img {
    -webkit-transition: -webkit-transform 0.15s ease 0s;
    -moz-transition: -moz-transform 0.15s ease 0s;
    -o-transition: -o-transform 0.15s ease 0s;
    transition: transform 0.15s ease 0s;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    height: 100%;
    width: 100%;
}

.demo-gallery .justified-gallery>a:hover>img {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
}

.demo-gallery .justified-gallery>a:hover .demo-gallery-poster>img {
    opacity: 1;
}

.demo-gallery .justified-gallery>a .demo-gallery-poster {
    background-color: rgba(0, 0, 0, 0.1);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: background-color 0.15s ease 0s;
    -o-transition: background-color 0.15s ease 0s;
    transition: background-color 0.15s ease 0s;
}

.demo-gallery .justified-gallery>a .demo-gallery-poster>img {
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    opacity: 0;
    position: absolute;
    top: 50%;
    -webkit-transition: opacity 0.3s ease 0s;
    -o-transition: opacity 0.3s ease 0s;
    transition: opacity 0.3s ease 0s;
}

.demo-gallery .justified-gallery>a:hover .demo-gallery-poster {
    background-color: rgba(0, 0, 0, 0.5);
}

.demo-gallery .video .demo-gallery-poster img {
    height: 48px;
    margin-left: -24px;
    margin-top: -24px;
    opacity: 0.8;
    width: 48px;
}

.demo-gallery.dark>ul>li a {
    border: 3px solid #04070a;
}

@media (max-width:420px) {
    .demo-gallery>ul>li {
        width: 100%;
    }
}