/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

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

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

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

progress {
    vertical-align: baseline
}

template, [hidden] {
    display: none
}

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

a:active, a:hover {
    outline-width: 0
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b, strong {
    font-weight: inherit
}

b, strong {
    font-weight: bolder
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: 0.67em 0
}

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

small {
    font-size: 80%
}

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

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

img {
    max-width: 100%;
    height: auto !important;
    border-style: none
}

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

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

figure {
    margin: 0
}

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

button, input, select, textarea {
    font: inherit;
    margin: 0
}

optgroup {
    font-weight: bold
}

button, input {
    overflow: visible
}

button, select {
    text-transform: none
}

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

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

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText
}

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

legend {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

textarea {
    overflow: auto
}

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

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

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

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

::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.54
}

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

/*!
 * Bootstrap Grid v4.5.2 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
.row, .flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-ml-1, .col-ml-2, .col-ml-3, .col-ml-4, .col-ml-5, .col-ml-6, .col-ml-7, .col-ml-8, .col-ml-9, .col-ml-10, .col-ml-11, .col-ml-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
    width: 100%
}

.col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%
}

.row-cols-1 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%
}

.row-cols-2 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%
}

.row-cols-3 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%
}

.row-cols-4 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%
}

.row-cols-5 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%
}

.row-cols-6 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%
}

.col-20 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%
}

.col-40 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%
}

.col-60 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    max-width: 60%
}

.col-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%
}

.col-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%
}

.col-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%
}

.col-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%
}

.col-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%
}

.col-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%
}

.col-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%
}

.col-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%
}

.col-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%
}

.col-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%
}

.col-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%
}

.col-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%
}

.col-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%
}

.col-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%
}

@media (min-width: 576px) {
    .col-sm {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .row-cols-sm-1 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }

    .row-cols-sm-2 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .row-cols-sm-3 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .row-cols-sm-4 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .row-cols-sm-5 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%
    }

    .row-cols-sm-6 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-sm-20 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%
    }

    .col-sm-40 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 40%;
        flex: 0 0 40%;
        max-width: 40%
    }

    .col-sm-60 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 60%;
        flex: 0 0 60%;
        max-width: 60%
    }

    .col-sm-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%
    }

    .col-sm-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%
    }

    .col-sm-1 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 8.33333%;
        flex: 0 0 8.33333%;
        max-width: 8.33333%
    }

    .col-sm-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-sm-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-sm-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .col-sm-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 41.66667%;
        flex: 0 0 41.66667%;
        max-width: 41.66667%
    }

    .col-sm-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-sm-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 58.33333%;
        flex: 0 0 58.33333%;
        max-width: 58.33333%
    }

    .col-sm-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.66667%;
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }

    .col-sm-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-sm-10 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 83.33333%;
        flex: 0 0 83.33333%;
        max-width: 83.33333%
    }

    .col-sm-11 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 91.66667%;
        flex: 0 0 91.66667%;
        max-width: 91.66667%
    }

    .col-sm-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }
}

@media (min-width: 768px) {
    .col-md {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .row-cols-md-1 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }

    .row-cols-md-2 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .row-cols-md-3 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .row-cols-md-4 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .row-cols-md-5 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%
    }

    .row-cols-md-6 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-md-20 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%
    }

    .col-md-40 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 40%;
        flex: 0 0 40%;
        max-width: 40%
    }

    .col-md-60 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 60%;
        flex: 0 0 60%;
        max-width: 60%
    }

    .col-md-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%
    }

    .col-md-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%
    }

    .col-md-1 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 8.33333%;
        flex: 0 0 8.33333%;
        max-width: 8.33333%
    }

    .col-md-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-md-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-md-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .col-md-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 41.66667%;
        flex: 0 0 41.66667%;
        max-width: 41.66667%
    }

    .col-md-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-md-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 58.33333%;
        flex: 0 0 58.33333%;
        max-width: 58.33333%
    }

    .col-md-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.66667%;
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }

    .col-md-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-md-10 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 83.33333%;
        flex: 0 0 83.33333%;
        max-width: 83.33333%
    }

    .col-md-11 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 91.66667%;
        flex: 0 0 91.66667%;
        max-width: 91.66667%
    }

    .col-md-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }
}

@media (min-width: 769px) {
    .col-ml {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .row-cols-ml-1 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }

    .row-cols-ml-2 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .row-cols-ml-3 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .row-cols-ml-4 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .row-cols-ml-5 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%
    }

    .row-cols-ml-6 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-ml-20 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%
    }

    .col-ml-40 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 40%;
        flex: 0 0 40%;
        max-width: 40%
    }

    .col-ml-60 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 60%;
        flex: 0 0 60%;
        max-width: 60%
    }

    .col-ml-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%
    }

    .col-ml-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%
    }

    .col-ml-1 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 8.33333%;
        flex: 0 0 8.33333%;
        max-width: 8.33333%
    }

    .col-ml-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-ml-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-ml-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .col-ml-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 41.66667%;
        flex: 0 0 41.66667%;
        max-width: 41.66667%
    }

    .col-ml-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-ml-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 58.33333%;
        flex: 0 0 58.33333%;
        max-width: 58.33333%
    }

    .col-ml-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.66667%;
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }

    .col-ml-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-ml-10 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 83.33333%;
        flex: 0 0 83.33333%;
        max-width: 83.33333%
    }

    .col-ml-11 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 91.66667%;
        flex: 0 0 91.66667%;
        max-width: 91.66667%
    }

    .col-ml-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }
}

@media (min-width: 1200px) {
    .col-lg {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .row-cols-lg-1 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }

    .row-cols-lg-2 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .row-cols-lg-3 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .row-cols-lg-4 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .row-cols-lg-5 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%
    }

    .row-cols-lg-6 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-lg-20 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%
    }

    .col-lg-40 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 40%;
        flex: 0 0 40%;
        max-width: 40%
    }

    .col-lg-60 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 60%;
        flex: 0 0 60%;
        max-width: 60%
    }

    .col-lg-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%
    }

    .col-lg-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%
    }

    .col-lg-1 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 8.33333%;
        flex: 0 0 8.33333%;
        max-width: 8.33333%
    }

    .col-lg-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-lg-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-lg-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .col-lg-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 41.66667%;
        flex: 0 0 41.66667%;
        max-width: 41.66667%
    }

    .col-lg-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-lg-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 58.33333%;
        flex: 0 0 58.33333%;
        max-width: 58.33333%
    }

    .col-lg-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.66667%;
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }

    .col-lg-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-lg-10 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 83.33333%;
        flex: 0 0 83.33333%;
        max-width: 83.33333%
    }

    .col-lg-11 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 91.66667%;
        flex: 0 0 91.66667%;
        max-width: 91.66667%
    }

    .col-lg-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }
}

@media (min-width: 1400px) {
    .col-xl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .row-cols-xl-1 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }

    .row-cols-xl-2 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .row-cols-xl-3 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .row-cols-xl-4 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .row-cols-xl-5 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%
    }

    .row-cols-xl-6 > * {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-xl-20 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%
    }

    .col-xl-40 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 40%;
        flex: 0 0 40%;
        max-width: 40%
    }

    .col-xl-60 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 60%;
        flex: 0 0 60%;
        max-width: 60%
    }

    .col-xl-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%
    }

    .col-xl-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%
    }

    .col-xl-1 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 8.33333%;
        flex: 0 0 8.33333%;
        max-width: 8.33333%
    }

    .col-xl-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }

    .col-xl-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-xl-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .col-xl-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 41.66667%;
        flex: 0 0 41.66667%;
        max-width: 41.66667%
    }

    .col-xl-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-xl-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 58.33333%;
        flex: 0 0 58.33333%;
        max-width: 58.33333%
    }

    .col-xl-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.66667%;
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }

    .col-xl-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-xl-10 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 83.33333%;
        flex: 0 0 83.33333%;
        max-width: 83.33333%
    }

    .col-xl-11 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 91.66667%;
        flex: 0 0 91.66667%;
        max-width: 91.66667%
    }

    .col-xl-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }
}

.d-none {
    display: none
}

.d-inline {
    display: inline
}

.d-inline-block {
    display: inline-block
}

.d-block {
    display: block
}

.d-table {
    display: table
}

.d-table-row {
    display: table-row
}

.d-table-cell {
    display: table-cell
}

.d-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.d-inline-flex {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex
}

@media (min-width: 576px) {
    .d-sm-none {
        display: none
    }

    .d-sm-inline {
        display: inline
    }

    .d-sm-inline-block {
        display: inline-block
    }

    .d-sm-block {
        display: block
    }

    .d-sm-table {
        display: table
    }

    .d-sm-table-row {
        display: table-row
    }

    .d-sm-table-cell {
        display: table-cell
    }

    .d-sm-flex {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

    .d-sm-inline-flex {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex
    }
}

@media (min-width: 768px) {
    .d-md-none {
        display: none
    }

    .d-md-inline {
        display: inline
    }

    .d-md-inline-block {
        display: inline-block
    }

    .d-md-block {
        display: block
    }

    .d-md-table {
        display: table
    }

    .d-md-table-row {
        display: table-row
    }

    .d-md-table-cell {
        display: table-cell
    }

    .d-md-flex {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

    .d-md-inline-flex {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex
    }
}

@media (min-width: 769px) {
    .d-ml-none {
        display: none
    }

    .d-ml-inline {
        display: inline
    }

    .d-ml-inline-block {
        display: inline-block
    }

    .d-ml-block {
        display: block
    }

    .d-ml-table {
        display: table
    }

    .d-ml-table-row {
        display: table-row
    }

    .d-ml-table-cell {
        display: table-cell
    }

    .d-ml-flex {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

    .d-ml-inline-flex {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex
    }
}

@media (min-width: 1200px) {
    .d-lg-none {
        display: none
    }

    .d-lg-inline {
        display: inline
    }

    .d-lg-inline-block {
        display: inline-block
    }

    .d-lg-block {
        display: block
    }

    .d-lg-table {
        display: table
    }

    .d-lg-table-row {
        display: table-row
    }

    .d-lg-table-cell {
        display: table-cell
    }

    .d-lg-flex {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

    .d-lg-inline-flex {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex
    }
}

@media (min-width: 1400px) {
    .d-xl-none {
        display: none
    }

    .d-xl-inline {
        display: inline
    }

    .d-xl-inline-block {
        display: inline-block
    }

    .d-xl-block {
        display: block
    }

    .d-xl-table {
        display: table
    }

    .d-xl-table-row {
        display: table-row
    }

    .d-xl-table-cell {
        display: table-cell
    }

    .d-xl-flex {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

    .d-xl-inline-flex {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex
    }
}

@font-face {
    font-family: swiper-icons;
    src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

:host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block
}

.swiper-vertical > .swiper-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

.swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper {
    -webkit-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0)
}

.swiper-horizontal {
    -ms-touch-action: pan-y;
    touch-action: pan-y
}

.swiper-vertical {
    -ms-touch-action: pan-x;
    touch-action: pan-x
}

.swiper-slide {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    display: block
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight, .swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-transition-property: height, -webkit-transform;
    transition-property: height, -webkit-transform;
    transition-property: transform, height;
    transition-property: transform, height, -webkit-transform
}

.swiper-backface-hidden .swiper-slide {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    -webkit-perspective: 1200px;
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.swiper-3d {
    -webkit-perspective: 1200px;
    perspective: 1200px
}

.swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.swiper-css-mode > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-vertical > .swiper-wrapper {
    -ms-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
    -ms-scroll-snap-type: none;
    scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: none
}

.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
    content: '';
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-ordinal-group: 10000;
    -ms-flex-order: 9999;
    order: 9999
}

.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
    -webkit-margin-start: var(--swiper-centered-offset-before);
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
    -webkit-margin-before: var(--swiper-centered-offset-before);
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, 0.15)
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    -webkit-transform-origin: 50%;
    -ms-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
    -webkit-animation: swiper-preloader-spin 1s infinite linear;
    animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@-webkit-keyframes swiper-preloader-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes swiper-preloader-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.swiper-virtual .swiper-slide {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
    height: 1px;
    width: var(--swiper-virtual-size)
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
    width: 1px;
    height: var(--swiper-virtual-size)
}

:root {
    --swiper-navigation-size: 44px
}

.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: var(--swiper-navigation-top-offset, 50%);
    width: calc(var(--swiper-navigation-size) / 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    z-index: 10;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color))
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-button-next.swiper-button-hidden, .swiper-button-prev.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none
}

.swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev {
    display: none !important
}

.swiper-button-next svg, .swiper-button-prev svg {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center
}

.swiper-rtl .swiper-button-next svg, .swiper-rtl .swiper-button-prev svg {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 10px);
    right: auto
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 10px);
    left: auto
}

.swiper-button-lock {
    display: none
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    content: 'prev'
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 10px);
    left: auto
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    content: 'next'
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    -webkit-transition: .3s opacity;
    transition: .3s opacity;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled {
    display: none !important
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom, 8px);
    top: var(--swiper-pagination-top, auto);
    left: 0;
    width: 100%
}

.swiper-pagination-bullets-dynamic {
    overflow: hidden;
    font-size: 0
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    -webkit-transform: scale(0.33);
    -ms-transform: scale(0.33);
    transform: scale(0.33);
    position: relative
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    -webkit-transform: scale(0.66);
    -ms-transform: scale(0.66);
    transform: scale(0.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    -webkit-transform: scale(0.33);
    -ms-transform: scale(0.33);
    transform: scale(0.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    -webkit-transform: scale(0.66);
    -ms-transform: scale(0.66);
    transform: scale(0.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    -webkit-transform: scale(0.33);
    -ms-transform: scale(0.33);
    transform: scale(0.33)
}

.swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
    display: inline-block;
    border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
    background: var(--swiper-pagination-bullet-inactive-color, #000);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2)
}

button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-bullet:only-child {
    display: none !important
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--swiper-theme-color))
}

.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets {
    right: var(--swiper-pagination-right, 8px);
    left: var(--swiper-pagination-left, auto);
    top: 50%;
    -webkit-transform: translate3d(0px, -50%, 0);
    transform: translate3d(0px, -50%, 0)
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 8px
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    -webkit-transition: .2s transform, .2s top;
    transition: .2s transform, .2s top
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    white-space: nowrap
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    -webkit-transition: .2s transform, .2s left;
    transition: .2s transform, .2s left
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    -webkit-transition: .2s transform, .2s right;
    transition: .2s transform, .2s right
}

.swiper-pagination-fraction {
    color: var(--swiper-pagination-fraction-color, inherit)
}

.swiper-pagination-progressbar {
    background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
    position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    -webkit-transform-origin: right top;
    -ms-transform-origin: right top;
    transform-origin: right top
}

.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0
}

.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical > .swiper-pagination-progressbar {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0
}

.swiper-pagination-lock {
    display: none
}

.swiper-scrollbar {
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    position: relative;
    -ms-touch-action: none;
    touch-action: none;
    background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1))
}

.swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled {
    display: none !important
}

.swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
    position: absolute;
    left: var(--swiper-scrollbar-sides-offset, 1%);
    bottom: var(--swiper-scrollbar-bottom, 4px);
    top: var(--swiper-scrollbar-top, auto);
    z-index: 50;
    height: var(--swiper-scrollbar-size, 4px);
    width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%))
}

.swiper-scrollbar.swiper-scrollbar-vertical, .swiper-vertical > .swiper-scrollbar {
    position: absolute;
    left: var(--swiper-scrollbar-left, auto);
    right: var(--swiper-scrollbar-right, 4px);
    top: var(--swiper-scrollbar-sides-offset, 1%);
    z-index: 50;
    width: var(--swiper-scrollbar-size, 4px);
    height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%))
}

.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    left: 0;
    top: 0
}

.swiper-scrollbar-cursor-drag {
    cursor: move
}

.swiper-scrollbar-lock {
    display: none
}

.swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center
}

.swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg {
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.swiper-slide-zoomed {
    cursor: move;
    -ms-touch-action: none;
    touch-action: none
}

.swiper .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000
}

.swiper-free-mode > .swiper-wrapper {
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    margin: 0 auto
}

.swiper-grid > .swiper-wrapper {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.swiper-grid-column > .swiper-wrapper {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.swiper-fade.swiper-free-mode .swiper-slide {
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.swiper-fade .swiper-slide {
    pointer-events: none;
    -webkit-transition-property: opacity;
    transition-property: opacity
}

.swiper-fade .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-fade .swiper-slide-active {
    pointer-events: auto
}

.swiper-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-cube {
    overflow: visible
}

.swiper-cube .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    width: 100%;
    height: 100%
}

.swiper-cube .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-cube.swiper-rtl .swiper-slide {
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0
}

.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 100%;
    opacity: .6;
    z-index: 0
}

.swiper-cube .swiper-cube-shadow:before {
    content: '';
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    -webkit-filter: blur(50px);
    filter: blur(50px)
}

.swiper-cube .swiper-slide-next + .swiper-slide {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-flip {
    overflow: visible
}

.swiper-flip .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1
}

.swiper-flip .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-creative .swiper-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    -webkit-transition-property: opacity, height, -webkit-transform;
    transition-property: opacity, height, -webkit-transform;
    transition-property: transform, opacity, height;
    transition-property: transform, opacity, height, -webkit-transform
}

.swiper-cards {
    overflow: visible
}

.swiper-cards .swiper-slide {
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden
}

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2017 Daniel Eden
 */
.animated {
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1)
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

.animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut {
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}

@-webkit-keyframes bounce {
    from, 20%, 53%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
    }
}

@keyframes bounce {
    from, 20%, 53%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom
}

@-webkit-keyframes flash {
    from, 50%, to {
        opacity: 1
    }
    25%, 75% {
        opacity: 0
    }
}

@keyframes flash {
    from, 50%, to {
        opacity: 1
    }
    25%, 75% {
        opacity: 0
    }
}

.flash {
    -webkit-animation-name: flash;
    animation-name: flash
}

@-webkit-keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse
}

@-webkit-keyframes rubberBand {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1)
    }
    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1)
    }
    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1)
    }
    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1)
    }
    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1)
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes rubberBand {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1)
    }
    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1)
    }
    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1)
    }
    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1)
    }
    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1)
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

.rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand
}

@-webkit-keyframes shake {
    from, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

@keyframes shake {
    from, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake
}

@-webkit-keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg)
    }
    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg)
    }
    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg)
    }
    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg)
    }
    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg)
    }
    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg)
    }
    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg)
    }
    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg)
    }
    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.headShake {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: headShake;
    animation-name: headShake
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg)
    }
    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg)
    }
    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg)
    }
    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg)
    }
    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg)
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg)
    }
    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg)
    }
    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg)
    }
    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg)
    }
    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg)
    }
}

.swing {
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing
}

@-webkit-keyframes tada {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
    10%, 20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)
    }
    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
    }
    40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes tada {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
    10%, 20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)
    }
    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
    }
    40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

.tada {
    -webkit-animation-name: tada;
    animation-name: tada
}

@-webkit-keyframes wobble {
    from {
        -webkit-transform: none;
        transform: none
    }
    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
    }
    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
    }
    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
    }
    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
    }
    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes wobble {
    from {
        -webkit-transform: none;
        transform: none
    }
    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
    }
    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
    }
    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
    }
    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
    }
    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble
}

@-webkit-keyframes jello {
    from, 11.1%, to {
        -webkit-transform: none;
        transform: none
    }
    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }
    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
    }
    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }
    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }
    66.6% {
        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
        transform: skewX(-0.78125deg) skewY(-0.78125deg)
    }
    77.7% {
        -webkit-transform: skewX(0.39062deg) skewY(0.39062deg);
        transform: skewX(0.39062deg) skewY(0.39062deg)
    }
    88.8% {
        -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
        transform: skewX(-0.19531deg) skewY(-0.19531deg)
    }
}

@keyframes jello {
    from, 11.1%, to {
        -webkit-transform: none;
        transform: none
    }
    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }
    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
    }
    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }
    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }
    66.6% {
        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
        transform: skewX(-0.78125deg) skewY(-0.78125deg)
    }
    77.7% {
        -webkit-transform: skewX(0.39062deg) skewY(0.39062deg);
        transform: skewX(0.39062deg) skewY(0.39062deg)
    }
    88.8% {
        -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
        transform: skewX(-0.19531deg) skewY(-0.19531deg)
    }
}

.jello {
    -webkit-animation-name: jello;
    animation-name: jello;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center
}

@-webkit-keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3)
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }
    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97)
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3)
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }
    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97)
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn
}

@-webkit-keyframes bounceInDown {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0)
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes bounceInDown {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0)
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown
}

@-webkit-keyframes bounceInLeft {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0)
    }
    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes bounceInLeft {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0)
    }
    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft
}

@-webkit-keyframes bounceInRight {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }
    from {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0)
    }
    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes bounceInRight {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }
    from {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0)
    }
    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}

.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight
}

@-webkit-keyframes bounceInUp {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0)
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes bounceInUp {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
    }
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0)
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp
}

@-webkit-keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9)
    }
    50%, 55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3)
    }
}

@keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9)
    }
    50%, 55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3)
    }
}

.bounceOut {
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut
}

@-webkit-keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
}

@keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
}

.bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown
}

@-webkit-keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
}

@keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
}

.bounceOutLeft {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft
}

@-webkit-keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
}

.bounceOutRight {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight
}

@-webkit-keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}

@keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}

.bounceOutUp {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

@-webkit-keyframes fadeInDownBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInDownBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}

@-webkit-keyframes fadeInLeftBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInLeftBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig
}

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}

@-webkit-keyframes fadeInRightBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInRightBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@-webkit-keyframes fadeInUpBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUpBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes fadeOut {
    from {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}

@-webkit-keyframes fadeOutDown {
    from {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown
}

@-webkit-keyframes fadeOutDownBig {
    from {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
}

@keyframes fadeOutDownBig {
    from {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
}

.fadeOutDownBig {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig
}

@-webkit-keyframes fadeOutLeft {
    from {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0)
    }
}

@keyframes fadeOutLeft {
    from {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0)
    }
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft
}

@-webkit-keyframes fadeOutLeftBig {
    from {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
}

@keyframes fadeOutLeftBig {
    from {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
}

.fadeOutLeftBig {
    -webkit-animation-name: fadeOutLeftBig;
    animation-name: fadeOutLeftBig
}

@-webkit-keyframes fadeOutRight {
    from {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0)
    }
}

@keyframes fadeOutRight {
    from {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0)
    }
}

.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight
}

@-webkit-keyframes fadeOutRightBig {
    from {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
}

@keyframes fadeOutRightBig {
    from {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
}

.fadeOutRightBig {
    -webkit-animation-name: fadeOutRightBig;
    animation-name: fadeOutRightBig
}

@-webkit-keyframes fadeOutUp {
    from {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
}

@keyframes fadeOutUp {
    from {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp
}

@-webkit-keyframes fadeOutUpBig {
    from {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}

@keyframes fadeOutUpBig {
    from {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}

.fadeOutUpBig {
    -webkit-animation-name: fadeOutUpBig;
    animation-name: fadeOutUpBig
}

@-webkit-keyframes flip {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    80% {
        -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

@keyframes flip {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    80% {
        -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

.animated.flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip
}

@-webkit-keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX
}

@-webkit-keyframes flipInY {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flipInY {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

.flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY
}

@-webkit-keyframes flipOutX {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1
    }
    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0
    }
}

@keyframes flipOutX {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1
    }
    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0
    }
}

.flipOutX {
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important
}

@-webkit-keyframes flipOutY {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1
    }
    to {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0
    }
}

@keyframes flipOutY {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1
    }
    to {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0
    }
}

.flipOutY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY
}

@-webkit-keyframes lightSpeedIn {
    from {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0
    }
    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
    }
    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

@keyframes lightSpeedIn {
    from {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0
    }
    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
    }
    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes lightSpeedOut {
    from {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0
    }
}

@keyframes lightSpeedOut {
    from {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0
    }
}

.lightSpeedOut {
    -webkit-animation-name: lightSpeedOut;
    animation-name: lightSpeedOut;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@-webkit-keyframes rotateIn {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

@keyframes rotateIn {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

.rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn
}

@-webkit-keyframes rotateInDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

@keyframes rotateInDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

.rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft
}

@-webkit-keyframes rotateInDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

@keyframes rotateInDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

.rotateInDownRight {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight
}

@-webkit-keyframes rotateInUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

@keyframes rotateInUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

.rotateInUpLeft {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft
}

@-webkit-keyframes rotateInUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

@keyframes rotateInUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

.rotateInUpRight {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight
}

@-webkit-keyframes rotateOut {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1
    }
    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0
    }
}

@keyframes rotateOut {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1
    }
    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0
    }
}

.rotateOut {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut
}

@-webkit-keyframes rotateOutDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
}

@keyframes rotateOutDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
}

.rotateOutDownLeft {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft
}

@-webkit-keyframes rotateOutDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
}

@keyframes rotateOutDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
}

.rotateOutDownRight {
    -webkit-animation-name: rotateOutDownRight;
    animation-name: rotateOutDownRight
}

@-webkit-keyframes rotateOutUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
}

@keyframes rotateOutUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1
    }
    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
}

.rotateOutUpLeft {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft
}

@-webkit-keyframes rotateOutUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0
    }
}

@keyframes rotateOutUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1
    }
    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0
    }
}

.rotateOutUpRight {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight
}

@-webkit-keyframes hinge {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    20%, 60% {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    40%, 80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0
    }
}

@keyframes hinge {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    20%, 60% {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    40%, 80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0
    }
}

.hinge {
    -webkit-animation-name: hinge;
    animation-name: hinge
}

@-webkit-keyframes jackInTheBox {
    from {
        opacity: 0;
        -webkit-transform: scale(0.1) rotate(30deg);
        transform: scale(0.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom
    }
    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }
    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes jackInTheBox {
    from {
        opacity: 0;
        -webkit-transform: scale(0.1) rotate(30deg);
        transform: scale(0.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom
    }
    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }
    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.jackInTheBox {
    -webkit-animation-name: jackInTheBox;
    animation-name: jackInTheBox
}

@-webkit-keyframes rollIn {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes rollIn {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn
}

@-webkit-keyframes rollOut {
    from {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
    }
}

@keyframes rollOut {
    from {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
    }
}

.rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut
}

@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.7, 0.7, 0.7);
        transform: scale3d(0.7, 0.7, 0.7)
    }
    50% {
        opacity: 1
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.7, 0.7, 0.7);
        transform: scale3d(0.7, 0.7, 0.7)
    }
    50% {
        opacity: 1
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn
}

@-webkit-keyframes zoomInDown {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

@keyframes zoomInDown {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

.zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown
}

@-webkit-keyframes zoomInLeft {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

@keyframes zoomInLeft {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

.zoomInLeft {
    -webkit-animation-name: zoomInLeft;
    animation-name: zoomInLeft
}

@-webkit-keyframes zoomInRight {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

@keyframes zoomInRight {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

.zoomInRight {
    -webkit-animation-name: zoomInRight;
    animation-name: zoomInRight
}

@-webkit-keyframes zoomInUp {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

@keyframes zoomInUp {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

.zoomInUp {
    -webkit-animation-name: zoomInUp;
    animation-name: zoomInUp
}

@-webkit-keyframes zoomOut {
    from {
        opacity: 1
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3)
    }
    to {
        opacity: 0
    }
}

@keyframes zoomOut {
    from {
        opacity: 1
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3)
    }
    to {
        opacity: 0
    }
}

.zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut
}

@-webkit-keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

@keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

.zoomOutDown {
    -webkit-animation-name: zoomOutDown;
    animation-name: zoomOutDown
}

@-webkit-keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0)
    }
    to {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
        transform: scale(0.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center
    }
}

@keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0)
    }
    to {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
        transform: scale(0.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center
    }
}

.zoomOutLeft {
    -webkit-animation-name: zoomOutLeft;
    animation-name: zoomOutLeft
}

@-webkit-keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0)
    }
    to {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
        transform: scale(0.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        transform-origin: right center
    }
}

@keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0)
    }
    to {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
        transform: scale(0.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        transform-origin: right center
    }
}

.zoomOutRight {
    -webkit-animation-name: zoomOutRight;
    animation-name: zoomOutRight
}

@-webkit-keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

@keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

.zoomOutUp {
    -webkit-animation-name: zoomOutUp;
    animation-name: zoomOutUp
}

@-webkit-keyframes slideInDown {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes slideInDown {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown
}

@-webkit-keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft
}

@-webkit-keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight
}

@-webkit-keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp
}

@-webkit-keyframes slideOutDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

@keyframes slideOutDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

.slideOutDown {
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown
}

@-webkit-keyframes slideOutLeft {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes slideOutLeft {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

.slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft
}

@-webkit-keyframes slideOutRight {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

@keyframes slideOutRight {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

.slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight
}

@-webkit-keyframes slideOutUp {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

@keyframes slideOutUp {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

.slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp
}

.scaleIn {
    -webkit-animation-name: scaleIn;
    animation-name: scaleIn
}

@-webkit-keyframes zoomOutCenter {
    from {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
}

@keyframes zoomOutCenter {
    from {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    to {
        opacity: 1;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
}

@-webkit-keyframes scaleIn {
    from {
        -webkit-transform: scale(1.033);
        transform: scale(1.033)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes scaleIn {
    from {
        -webkit-transform: scale(1.033);
        transform: scale(1.033)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes scaleInOut {
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes scaleInOut {
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes zoomInCenter {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate(0, -50%);
        transform: scale3d(0.475, 0.475, 0.475) translate(0, -50%);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

@keyframes zoomInCenter {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate(0, -50%);
        transform: scale3d(0.475, 0.475, 0.475) translate(0, -50%);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1)
    }
}

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

*:before, *:after {
    -webkit-transition: all .3s;
    transition: all .3s
}

:root {
    --cw: #fff;
    --c0: #000;
    --c1: #7057A3;
    --c2: #6C5F52;
    --c3: #FF9D00;
    --c4: #FF9D00;
    --c1-dark1: #7057A3;
    --c1-dark2: #8A75B3;
    --c1-lite1: #C6BCDA;
    --c2-dark1: #5A5046;
    --c2-lite1: #6D6055;
    --c2-lite2: #AB9586;
    --c-pink: #FDFAF7;
    --c-pink2: #FAF2EB;
    --c-pink3: #FBF4EF;
    --c-pink4: #F9EFE6;
    --c-pink5: #fde7da;
    --c-pink6: #f0e7da
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%
}

body {
    position: relative;
    color: #6C5F52;
    background: #fff;
    font-family: "Helvetica Neue", "微軟正黑體", "微軟正黑體修正", "Microsoft JhengHei", sans-serif;
    font-weight: 400
}

body.lock {
    overflow: hidden;
    -webkit-backface-visibility: hidden
}

address {
    font-style: normal
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    font-family: "Noto Sans TC", sans-serif, "Helvetica Neue", "微軟正黑體", "微軟正黑體修正", "Microsoft JhengHei", sans-serif
}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
    margin-top: 0
}

h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
    margin-top: 0
}

p:first-child {
    margin-top: 0
}

p:last-child {
    margin-bottom: 0;
    padding-bottom: 0
}

p + p {
    padding-top: 10px
}

a, button {
    outline: 0 none;
    -webkit-transition: all .3s;
    transition: all .3s
}

a:focus, a:focus-visible, button:focus, button:focus-visible {
    outline: 0 none
}

a {
    color: var(--c1);
    text-decoration: none;
    cursor: pointer;
}
#headerray a {
    color: var(--c1-lite1);
    text-decoration: none;
    cursor: pointer;
}
#footer a {
    color: var(--c1-lite1);
    text-decoration: none;
    cursor: pointer;
}
a[href^="mailto"] {
    word-break: break-all
}

a[href^="tel"] {
    color: var(--cw);
    text-decoration: none
}

nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0
}

nav a {
    display: block
}

.nav-wrap ul, .list, .list-dot1, .list-dot2, .tb11 ul, .tb12 ul, .tb13 ul {
    list-style: none outside none
}

.form-ctrl {
    border-radius: 0;
    display: block;
    width: 100%;
    min-width: 150px;
    padding: 14px 20px;
    background: #FAF2EB;
    border: 1px solid transparent;
    line-height: 1.5;
    -webkit-transition: border-color .3s;
    transition: border-color .3s
}

.btn, .btn-m {
    border-radius: 0;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: inherit;
    width: 100%;
    text-align: center;
    text-decoration: none;
    background-color: transparent;
    border: 1px solid transparent;
    -webkit-transition: all .3s;
    transition: all .3s
}

@media screen and (min-width: 769px) {
    .btn:hover, .btn-m:hover {
        text-decoration: none
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc0:hover, .hover-cwbgc1:hover, .hover-cwbgc2:hover, .hover-cwbgc3:hover, .hover-cwbgc4:hover, .hover-cwbgc1-dark1:hover, .hover-cwbgc1-dark2:hover, .hover-cwbgc1-lite1:hover, .hover-cwbgc2-dark1:hover, .hover-cwbgc2-lite1:hover, .hover-cwbgc2-lite2:hover, .hover-cwbgc-pink:hover, .hover-cwbgc-pink2:hover, .hover-cwbgc-pink3:hover, .hover-cwbgc-pink4:hover, .hover-cwbgc-pink5:hover, .hover-cwbgc-pink6:hover {
        color: #fff
    }
}

@media screen and (min-width: 769px) {
    .hover-c0bgcw:hover, .hover-c1bgcw:hover, .hover-c2bgcw:hover, .hover-c3bgcw:hover, .hover-c4bgcw:hover, .hover-c1-dark1bgcw:hover, .hover-c1-dark2bgcw:hover, .hover-c1-lite1bgcw:hover, .hover-c2-dark1bgcw:hover, .hover-c2-lite1bgcw:hover, .hover-c2-lite2bgcw:hover, .hover-c-pinkbgcw:hover, .hover-c-pink2bgcw:hover, .hover-c-pink3bgcw:hover, .hover-c-pink4bgcw:hover, .hover-c-pink5bgcw:hover, .hover-c-pink6bgcw:hover {
        background-color: #fff
    }
}

@media screen and (min-width: 769px) {
    .hover-c0bgcw:hover {
        color: #000
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc0:hover {
        background-color: #000
    }
}

@media screen and (min-width: 769px) {
    nav a:hover, .hover-c1bgcw:hover {
        color: var(--cw)
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc1:hover {
        background-color: var(--c1)
    }
}

@media screen and (min-width: 769px) {
    .hover-c2bgcw:hover {
        color: #6C5F52
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc2:hover {
        background-color: #6C5F52
    }
}

@media screen and (min-width: 769px) {
    .hover-c3bgcw:hover {
        color: #FF9D00
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc3:hover {
        background-color: #FF9D00
    }
}

@media screen and (min-width: 769px) {
    .hover-c4bgcw:hover {
        color: #FF9D00
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc4:hover {
        background-color: #FF9D00
    }
}

@media screen and (min-width: 769px) {
    .hover-c1-dark1bgcw:hover {
        color: var(--c1)
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc1-dark1:hover {
        background-color: var(--c1)
    }
}

@media screen and (min-width: 769px) {
    .hover-c1-dark2bgcw:hover {
        color: var(--c1-dark1)
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc1-dark2:hover {
        background-color: var(--c1-dark1)
    }
}

@media screen and (min-width: 769px) {
    .hover-c1-lite1bgcw:hover {
        color: var(--c1-dark2)
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc1-lite1:hover {
        background-color: var(--c1-dark2)
    }
}

@media screen and (min-width: 769px) {
    .hover-c2-dark1bgcw:hover {
        color: #5A5046
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc2-dark1:hover {
        background-color: #5A5046
    }
}

@media screen and (min-width: 769px) {
    .hover-c2-lite1bgcw:hover {
        color: #6D6055
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc2-lite1:hover {
        background-color: #6D6055
    }
}

@media screen and (min-width: 769px) {
    .hover-c2-lite2bgcw:hover {
        color: #AB9586
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc2-lite2:hover {
        background-color: #AB9586
    }
}

@media screen and (min-width: 769px) {
    .hover-c-pinkbgcw:hover {
        color: #FDFAF7
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc-pink:hover {
        background-color: #FDFAF7
    }
}

@media screen and (min-width: 769px) {
    .hover-c-pink2bgcw:hover {
        color: #FAF2EB
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc-pink2:hover {
        background-color: #FAF2EB
    }
}

@media screen and (min-width: 769px) {
    .hover-c-pink3bgcw:hover {
        color: #FBF4EF
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc-pink3:hover {
        background-color: #FBF4EF
    }
}

@media screen and (min-width: 769px) {
    .hover-c-pink4bgcw:hover {
        color: #F9EFE6
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc-pink4:hover {
        background-color: #F9EFE6
    }
}

@media screen and (min-width: 769px) {
    .hover-c-pink5bgcw:hover {
        color: #fde7da
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc-pink5:hover {
        background-color: #fde7da
    }
}

@media screen and (min-width: 769px) {
    .hover-c-pink6bgcw:hover {
        color: #f0e7da
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc-pink6:hover {
        background-color: #f0e7da
    }
}

.btn {
    padding: 10px 20px
}

.btn-m {
    padding: 15px 20px
}

.hover-link, .path a {
    text-decoration: none
}

@media screen and (min-width: 769px) {
    .hover-link:hover, .path a:hover {
        text-decoration: underline
    }
}

.btn:before, .btn:after, .btn-m:before, .btn-m:after, .list-a-arr1 a:before, .page-limit .first a:after, .page-limit .last a:after, .page-limit .prev a:after, .page-limit .next a:after, .figure, .bg-contain, .link-note:before, .sw-arrow1 .sw-btn:after, .social-wrap a:before, .social-wrap a:after, .social-wrap .btn:before, .social-wrap .btn:after, .path li:before, .tp-captcha:after, .btn-tg1:after, .icon:before, .icon:after, .banner1:after, #container:before, .bg-cover, .bg-wave:before, .bg-wave:after, .bg-wave31:before, .bg-trans:before, .diagonal-line:after, .ft-tp:before, .bg, .bg-trans {
    background-position: center;
    background-repeat: no-repeat
}

.bg-repeat {
    background-position: center;
    background-repeat: repeat
}

.btn:before, .btn:after, .btn-m:before, .btn-m:after, .list-a-arr1 a:before, .page-limit .first a:after, .page-limit .last a:after, .page-limit .prev a:after, .page-limit .next a:after, .figure, .bg-contain, .link-note:before, .sw-arrow1 .sw-btn:after, .social-wrap a:before, .social-wrap a:after, .social-wrap .btn:before, .social-wrap .btn:after, .path li:before, .tp-captcha:after, .btn-tg1:after, .icon:before, .icon:after {
    background-size: contain
}

.banner1:after, #container:before, .bg-cover, .bg-wave:before, .bg-wave:after, .bg-wave31:before, .bg-trans:before, .diagonal-line:after, .ft-tp:before {
    background-size: cover
}

.bg-fixed {
    background-attachment: fixed
}

.clamp2, .clamp3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    white-space: normal;
    overflow: hidden
}

.pre-dot1, .pre-dot-c1, .pre-dot-c2 {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 0 0 0 20px
}

.pre-dot1:before, .pre-dot-c1:before, .pre-dot-c2:before {
    content: '';
    display: block;
    position: absolute
}

.pre-dot1:before {
    left: 5px;
    top: 14px;
    width: 5px;
    height: 5px;
    background-color: var(--c1)
}

.pre-dot2:before {
    border-radius: 50%;
    left: 5px;
    top: 12px;
    width: 7px;
    height: 7px;
    background-color: var(--c1-dark1)
}

.pre-dot-c1:before {
    background: var(--c1)
}

.pre-dot-c2:before {
    background: #6C5F52
}

.social4 .icon-mail:before {
    background-image: url(../images/svg/social-o-mail.html)
}

.social4 .icon-messenger:before {
    background-image: url(../images/svg/social-messenger.html)
}

.social4 .icon-facebook:before {
    background-image: url(../images/svg/social-o-fb.svg)
}

.social4 .icon-instagram:before {
    background-image: url(../images/svg/social-o-ig.svg)
}

.social4 .icon-copy:before {
    background-image: url(../images/svg/icon-link.html)
}

.social4 .icon-in:before {
    background-image: url(../images/svg/social-o-in.svg)
}

.social4 .icon-line:before {
    background-image: url(../images/svg/social-o-line.svg)
}

.social4 .icon-pinterest:before {
    background-image: url(../images/svg/social-o-pe.svg)
}

.social4 .icon-plurk:before {
    background-image: url(../images/svg/social-o-pl.svg)
}

.social4 .icon-qq:before {
    background-image: url(../images/svg/social-o-qq.svg)
}

.social4 .icon-skype:before {
    background-image: url(../images/svg/social-o-sk.svg)
}

.social4 .icon-sina:before {
    background-image: url(../images/svg/social-o-sn.svg)
}

.social4 .icon-twitter:before {
    background-image: url(../images/svg/social-o-x.svg)
}

.social4 .icon-ubereat:before {
    background-image: url(../images/svg/social-o-ut.svg)
}

.social4 .icon-whatsapp:before {
    background-image: url(../images/svg/social-o-wa.svg)
}

.social4 .icon-wechat:before {
    background-image: url(../images/svg/social-o-wc.svg)
}

.social4 .icon-youtube:before {
    background-image: url(../images/svg/social-o-yt.svg)
}

.social4 .icon-youtube2:before {
    background-image: url(../images/svg/social-o-yt3.html)
}

.social4 .icon-tel:before {
    background-image: url(../images/svg/social-o-tel.html)
}

.social4 .icon-share:before {
    background-image: url(../images/svg/social-share.svg)
}

.social1 .icon-mail:before, .social2 .icon-mail:before, .social3 .icon-mail:before {
    background-image: url(../images/svg/social-o-mail-w.svg)
}

.social1 .icon-messenger:before, .social2 .icon-messenger:before, .social3 .icon-messenger:before {
    background-image: url(../images/svg/social-messenger-w.svg)
}

.social1 .icon-facebook:before, .social2 .icon-facebook:before, .social3 .icon-facebook:before {
    background-image: url(../images/svg/social-o-fb-w.svg)
}

.social1 .icon-instagram:before, .social2 .icon-instagram:before, .social3 .icon-instagram:before {
    background-image: url(../images/svg/social-o-ig-w.svg)
}

.social1 .icon-copy:before, .social2 .icon-copy:before, .social3 .icon-copy:before {
    background-image: url(../images/svg/icon-link-w.svg)
}

.social1 .icon-in:before, .social2 .icon-in:before, .social3 .icon-in:before {
    background-image: url(../images/svg/social-o-in-w.svg)
}

.social1 .icon-line:before, .social2 .icon-line:before, .social3 .icon-line:before {
    background-image: url(../images/svg/social-o-line-w.svg)
}

.social1 .icon-pinterest:before, .social2 .icon-pinterest:before, .social3 .icon-pinterest:before {
    background-image: url(../images/svg/social-o-pe-w.svg)
}

.social1 .icon-plurk:before, .social2 .icon-plurk:before, .social3 .icon-plurk:before {
    background-image: url(../images/svg/social-o-pl-w.svg)
}

.social1 .icon-qq:before, .social2 .icon-qq:before, .social3 .icon-qq:before {
    background-image: url(../images/svg/social-o-qq-w.svg)
}

.social1 .icon-skype:before, .social2 .icon-skype:before, .social3 .icon-skype:before {
    background-image: url(../images/svg/social-o-sk-w.svg)
}

.social1 .icon-sina:before, .social2 .icon-sina:before, .social3 .icon-sina:before {
    background-image: url(../images/svg/social-o-sn-w.svg)
}

.social1 .icon-twitter:before, .social2 .icon-twitter:before, .social3 .icon-twitter:before {
    background-image: url(../images/svg/social-o-x-w.svg)
}

.social1 .icon-ubereat:before, .social2 .icon-ubereat:before, .social3 .icon-ubereat:before {
    background-image: url(../images/svg/social-o-ut-w.svg)
}

.social1 .icon-whatsapp:before, .social2 .icon-whatsapp:before, .social3 .icon-whatsapp:before {
    background-image: url(../images/svg/social-o-wa-w.svg)
}

.social1 .icon-wechat:before, .social2 .icon-wechat:before, .social3 .icon-wechat:before {
    background-image: url(../images/svg/social-o-wc-w.svg)
}

.social1 .icon-youtube:before, .social2 .icon-youtube:before, .social3 .icon-youtube:before {
    background-image: url(../images/svg/social-o-yt-w.svg)
}

.social1 .icon-youtube2:before, .social2 .icon-youtube2:before, .social3 .icon-youtube2:before {
    background-image: url(../images/svg/social-o-yt3-w.svg)
}

.social1 .icon-tel:before, .social2 .icon-tel:before, .social3 .icon-tel:before {
    background-image: url(../images/svg/social-o-tel-w.svg)
}

.social1 .icon-share:before, .social2 .icon-share:before, .social3 .icon-share:before {
    background-image: url(../images/svg/social-share-w.svg)
}


.nav-wrap a {
    text-decoration: none
}

.nav-wrap a, .nav-wrap a:before, .nav-wrap a:after {
    -webkit-transition: all .3s;
    transition: all .3s
}

.list, .list li {
    margin: 0;
    padding: 0
}

.list-lang li + li {
    border-top: 1px solid #eee
}

.list-lang .on {
    color: var(--c1)
}

.list-lang a {
    display: block;
    padding: 10px 15px
}

@media screen and (min-width: 769px) {
    .list-lang a:hover {
        color: var(--c1)
    }
}

.dl-list dt, .dl-list dd {
    margin: 0;
    padding: 0
}

.dl-hd1, .dl-ft {
    margin: 0;
    padding: 0
}

.dl-hd1 dt, .dl-ft dt {
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: 700
}

@media screen and (min-width: 769px) {
    .dl-hd1 dt, .dl-ft dt {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.dl-hd1 dt {
    margin: 0 0 6px;
    padding: 0 5px;
    font-family: "Noto Sans TC", sans-serif
}

.dl-hd1 dt:after {
    content: '';
    display: block;
    height: 1px;
    background-color: rgba(161, 173, 69, 0.4);
    margin-top: 6px
}

.dl-hd1 dd {
    margin: 0;
    padding: 5px
}

@media screen and (min-width: 769px) {
    .dl-hd1 dd a:hover {
        text-decoration: underline;
        text-shadow: 0.5px 0 0 currentColor
    }
}

@media screen and (min-width: 769px) {
    .dl-hd1 a:hover {
        color: var(--c1)
    }
}

.dl-ft {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -10px
}

.dl-ft dt, .dl-ft dd {
    margin: 0;
    padding: 0 10px
}

.dl-ft dt {
    width: 100%
}

.dl-ft dd {
    font-size: 14px;
    font-size: .875rem;
    padding: 5px 10px
}

@media screen and (min-width: 769px) {
    .dl-ft dd {
        font-size: 16px;
        font-size: 1rem
    }
}

@media screen and (min-width: 769px) {
    .dl-ft dd a:hover {
        text-shadow: 0.5px 0 0 currentColor;
        text-decoration: underline
    }
}

@media screen and (min-width: 769px) {
    .dl-ft a:hover {
        color: var(--c1-dark1)
    }
}

.dl-ft1 span, .dl-ft1 a {
    vertical-align: middle
}

.dl-ft2 dt, .dl-ft3 dt {
    margin-bottom: 15px
}

.dl-ft2 dd {
    width: 50%
}

.dl-ft3 dd {
    width: 33.33333%
}

.dl-ft4 dt, .dl-ft4 dd {
    width: 100%
}

.dl-list, .dl-list1, .dl-list2, .dl-t1 {
    margin: 0
}

.dl-list dt, .dl-list dd {
    margin: 0
}

.dl-list1 dt {
    margin: 0 auto 10px
}

.dl-list1 dd {
    margin: 0
}

.dl-list2 dt {
    margin: 0 0 15px
}

.dl-list2 dd {
    margin: 0 0 10px;
    padding: 0
}

.dl-t1 dt {
    margin: 0 auto 5px
}

.dl-t1 dd {
    margin: 0;
    padding-left: 12px
}

.list-dot1, .list-dot1 li, .list-dot2, .list-dot2 li {
    margin: 0;
    padding: 0
}

.list-dot1 li, .list-dot2 li {
    position: relative;
    padding: 0 0 0 20px
}

.list-dot1 li:before, .list-dot2 li:before {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    position: absolute;
    left: 5px;
    top: 12px
}

.list-dot1 li:last-child, .list-dot2 li:last-child {
    margin: 0
}

.list-dot1 {
    padding: 20px 0
}

.list-dot1 li {
    margin: 0 0 5px
}

.list-dot1 li:before {
    background-color: var(--c1)
}

.list-dot2 li {
    margin: 0 0 15px
}

.list-dot2 li:before {
    background-color: var(--c1-dark1)
}

.list-a-dot {
    padding: 0
}

.list-a-dot li {
    margin: 0 0 5px
}

.list-a-dot a {
    position: relative;
    display: inline-block;
    margin: 0 0 5px;
    padding: 0 0 0 20px
}

.list-a-dot a:before {
    border-radius: 50%;
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    position: absolute;
    left: 5px;
    top: 12px;
    background-color: #F2DDC8
}

@media screen and (min-width: 769px) {
    .list-a-dot a:hover {
        color: var(--c1)
    }

    .list-a-dot a:hover:before {
        background-color: var(--c1)
    }
}

.list-a-dot .on a {
    color: var(--c1);
    font-weight: bold
}

.list-a1 li {
    margin: 0 0 5px
}

.list-a1 a {
    border-radius: 5px;
    display: block;
    padding: 2px 15px 10px
}

@media screen and (min-width: 769px) {
    .list-a1 a:hover {
        background-color: rgba(248, 236, 224, 0.6)
    }
}

.list-a-btn {
    margin: 0 -5px
}

.list-a-btn li {
    padding: 5px
}

.list-a-btn a {
    border-radius: 30px;
    display: block;
    padding: 10px 20px;
    background-color: rgba(248, 236, 224, 0.6)
}

@media screen and (min-width: 769px) {
    .list-a-btn a:hover {
        background-color: var(--c1)
    }
}

.list-a-arr1 ul {
    list-style: none
}

.list-a-arr1 a {
    position: relative;
    display: block
}

.list-a-arr1 a:before {
    content: '';
    display: block;
    position: absolute;
    left: 0
}

@media screen and (min-width: 769px) {
    .list-a-arr1 a:hover {
        color: var(--c1)
    }
}

.list-a-arr1 .on > a {
    color: var(--c1)
}

.list-a-arr1 > li {
    margin: 0 0 10px
}

.list-a-arr1 > li > a {
    padding: 2px 0 2px 25px
}

.list-a-arr1 > li > a:before {
    width: 20px;
    height: 20px;
    top: 7px;
    background-image: url(../images/svg/arrow-r1.svg)
}

.list-a-arr1 > li li a {
    padding: 2px 0 2px 15px
}

.list-a-arr1 > li li a:before {
    top: 50%;
    width: 10px;
    height: 2px;
    background-color: #F2DDC8;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.list-chk1 li {
    position: relative;
    margin: 0 0 10px;
    padding: 0 0 0 35px
}

.list-chk1 li:before, .list-chk1 li:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 5px;
    width: 25px;
    height: 25px
}

.list-chk1 li:before {
    background: radial-gradient(50% 50% at 50% 50%, var(--c1-dark1) 50%, rgba(255, 255, 255, 0) 100%);
    -webkit-transform: scale(1.15, 1.15);
    -ms-transform: scale(1.15, 1.15);
    transform: scale(1.15, 1.15)
}

.list-chk1 li:after {
    margin-left: 3px;
    background-image: url(../images/svg/icon-chk1.svg)
}

@media screen and (min-width: 576px) {
    .dl-hd1 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0 -10px
    }

    .dl-hd1 dt, .dl-hd1 dd {
        padding-left: 10px;
        padding-right: 10px
    }

    .dl-hd1 dt {
        width: 100%
    }

    .dl-hd1 dd {
        width: 50%
    }

    .dl-ft3 dd {
        width: 25%
    }
}

@media screen and (min-width: 768px) {
    .dl-hd1 dd {
        width: 100%
    }

    .dl-ft1 dd {
        width: 100%
    }

    .list-dot1 li:before {
        top: 14px
    }
}

@media screen and (min-width: 1200px) {
    .dl-ft3 dd {
        width: 100%
    }
}

.fjcs {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.fjce {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.fjcc {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.fjcsb {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.fjcsa {
    -ms-flex-pack: distribute;
    justify-content: space-around
}

.faic {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.fais {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.faie {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}

.fasc {
    -ms-flex-item-align: center;
    align-self: center
}

.flex1 {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.row-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.row-split:before, .row-split:after {
    content: '';
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 1px;
    background-color: #eee
}

.reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.row-05 {
    margin: 0 -5px
}

.row-05 > .col {
    padding-left: 5px;
    padding-right: 5px
}

.row-1, .row-1y, .dl-row1 {
    margin: 0 -10px
}

.row-1 > .col, .row-1y > .col, .dl-row1 > .col {
    padding-left: 10px;
    padding-right: 10px
}

.dl-row1 > .col {
    margin-left: 0;
    margin-right: 0
}

.row-12 {
    margin: 0 -12px
}

.row-12 > .col {
    padding-left: 12px;
    padding-right: 12px
}

.row-15, .row-2, .row-25, .row-3, .row-3y, .row-32, .row-4, .row-form1 {
    margin: 0 -15px
}

.row-15 > .col, .row-2 > .col, .row-25 > .col, .row-3 > .col, .row-3y > .col, .row-32 > .col, .row-4 > .col, .row-form1 > .col {
    padding-left: 15px;
    padding-right: 15px
}

.row-1y > .col, .row-3y > .col {
    margin-bottom: 10px
}

@media screen and (min-width: 769px) {
    .row-form1 .form-ctrl:hover {
        border-color: #6C5F52;
        -webkit-box-shadow: 0 0 2px #6C5F52;
        box-shadow: 0 0 2px #6C5F52
    }
}

.row-form2 > .col {
    margin-bottom: 10px
}

.row-form2 .form-label {
    min-height: 0;
    text-shadow: 0.5px 0 0 currentColor;
    margin-bottom: 10px;
    padding: 0 5px
}

.row-form2 .form-ctrl {
    border-radius: 5px;
    border-color: #F0D9C4;
    background-color: #fff;
    padding: 10px
}

@media screen and (min-width: 769px) {
    .row-form2 .form-ctrl:hover {
        -webkit-box-shadow: 0 0 5px #FAF2EB;
        box-shadow: 0 0 5px #FAF2EB
    }
}

.row-form2 .form-calendar {
    padding-right: 40px;
    background: url(../images/svg/icon-calendar.svg) right 10px center #fff no-repeat;
    background-size: 20px
}

.row-rounded1 .col:first-child {
    border-radius: 10px 10px 0 0
}

.row-rounded1 .col:last-child {
    border-radius: 0 0 10px 10px
}

.row-cal .col {
    margin: 0 0 10px
}

.row-order {
    margin: 0 -10px;
    padding: 10px 0
}

.row-order .figure {
    max-width: 70px
}

.row-order > .col {
    padding: 10px
}

@media screen and (min-width: 576px) {
    .s-fjce {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end
    }

    .s-fjcc {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .s-fjcs {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    .row-cal .col {
        padding: 0 10px
    }

    .row-cal .order1 {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1
    }

    .row-cal .order2 {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        padding: 0 50px
    }

    .row-cal .order3 {
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3
    }
}

@media screen and (min-width: 768px) {
    .m-fjce {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end
    }

    .m-fjcc {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .m-fjcs {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    .m-reverse, .md-reverse {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
    }

    .row-sticky .m-sticky {
        position: sticky;
        left: 0;
        top: 60px
    }

    .row-sticky > .col {
        height: 100%
    }

    .row-2, .row-25, .row-3, .row-32, .row-4, .row-form1 {
        margin: 0 -20px
    }

    .row-2 > .col, .row-25 > .col, .row-3 > .col, .row-32 > .col, .row-4 > .col, .row-form1 > .col {
        padding-left: 20px;
        padding-right: 20px
    }

    .row-pd {
        -webkit-transform: translate(0, -60px);
        -ms-transform: translate(0, -60px);
        transform: translate(0, -60px)
    }

    .row-pd .col-pos {
        margin-top: -100px
    }

    .row-cal .order2 {
        padding: 0 100px
    }

    .row-order {
        margin: 0
    }

    .row-order > .col {
        padding: 10px 40px
    }

    .row-form2 > .col {
        margin-bottom: 40px
    }
}

@media screen and (min-width: 769px) {
    .ml-fjcc {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .ml-reverse {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
    }

    .row-sticky .m-sticky {
        top: 100px
    }

    .row-3, .row-32, .row-form1 {
        margin: 0 -25px
    }

    .row-3 > .col, .row-32 > .col, .row-form1 > .col {
        padding-left: 25px;
        padding-right: 25px
    }

    .row-rounded1 .col:first-child {
        border-radius: 10px 0 0 10px
    }

    .row-rounded1 .col:last-child {
        border-radius: 0 10px 10px 0
    }

    .row-order > .col {
        padding: 10px 50px
    }
}

@media screen and (min-width: 1200px) {
    .l-fjcsb {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .row-25 {
        margin: 0 -25px
    }

    .row-25 > .col {
        padding-left: 25px;
        padding-right: 25px
    }

    .row-3, .row-pd, .row-form1 {
        margin: 0 -30px
    }

    .row-3 > .col, .row-pd > .col, .row-form1 > .col {
        padding-left: 30px;
        padding-right: 30px
    }

    .row-32 {
        margin: 0 -32px
    }

    .row-32 > .col {
        padding-left: 32px;
        padding-right: 32px
    }

    .row-pd .col-pos {
        margin-top: -130px
    }

    .row-sticky .m-sticky {
        top: 120px
    }
}

pre, code {
    font-weight: normal;
    font-family: 'Courier New', 'Times New Roman'
}

blockquote {
    padding: 2px 10px 2px 20px;
    border-left: 5px solid #ccc
}

.text01 p:last-child {
    margin-bottom: 0
}

.editor h1 + p, .editor h1 + ul, .editor h1 + dl, .editor h2 + p, .editor h2 + ul, .editor h2 + dl, .editor h3 + p, .editor h3 + ul, .editor h3 + dl, .editor h4 + p, .editor h4 + ul, .editor h4 + dl, .editor h5 + p, .editor h5 + ul, .editor h5 + dl, .editor h6 + p, .editor h6 + ul, .editor h6 + dl, .editor1 h1 + p, .editor1 h1 + ul, .editor1 h1 + dl, .editor1 h2 + p, .editor1 h2 + ul, .editor1 h2 + dl, .editor1 h3 + p, .editor1 h3 + ul, .editor1 h3 + dl, .editor1 h4 + p, .editor1 h4 + ul, .editor1 h4 + dl, .editor1 h5 + p, .editor1 h5 + ul, .editor1 h5 + dl, .editor1 h6 + p, .editor1 h6 + ul, .editor1 h6 + dl, .editor2 h1 + p, .editor2 h1 + ul, .editor2 h1 + dl, .editor2 h2 + p, .editor2 h2 + ul, .editor2 h2 + dl, .editor2 h3 + p, .editor2 h3 + ul, .editor2 h3 + dl, .editor2 h4 + p, .editor2 h4 + ul, .editor2 h4 + dl, .editor2 h5 + p, .editor2 h5 + ul, .editor2 h5 + dl, .editor2 h6 + p, .editor2 h6 + ul, .editor2 h6 + dl, .blockquote h1 + p, .blockquote h1 + ul, .blockquote h1 + dl, .blockquote h2 + p, .blockquote h2 + ul, .blockquote h2 + dl, .blockquote h3 + p, .blockquote h3 + ul, .blockquote h3 + dl, .blockquote h4 + p, .blockquote h4 + ul, .blockquote h4 + dl, .blockquote h5 + p, .blockquote h5 + ul, .blockquote h5 + dl, .blockquote h6 + p, .blockquote h6 + ul, .blockquote h6 + dl {
    margin-top: 0
}

.editor1 h2 {
    color: #484037
}

.editor1 a:not(.btn) {
    color: var(--c1);
    text-shadow: 0.5px 0 0 currentColor
}

.editor1 h4, .editor1 h5, .editor1 h6 {
    margin: 10px auto
}

.editor1 h2, .editor1 h3 {
    display: inline-block;
    min-width: 100%;
    padding-top: 92px;
    margin-top: -92px;
    margin-bottom: 15px;
    pointer-events: none
}

.editor1 h3, .editor1 h5 {
    color: var(--c1)
}

.editor1 h4 {
    color: #FF9D00
}

.blockquote, .blockquote02 {
    margin: 20px auto;
    padding: 20px
}

.blockquote p, .blockquote02 p {
    margin: 0
}

.blockquote p + p, .blockquote02 p + p {
    margin-top: inherit
}

.blockquote a, .blockquote02 a {
    text-decoration: underline
}

@media screen and (min-width: 769px) {
    .blockquote a:hover, .blockquote02 a:hover {
        color: #6C5F52
    }
}

.blockquote {
    font-style: normal;
    font-weight: bold;
    border: solid #f8f8f8;
    border-width: 3px 0
}

.blockquote02 {
    background: #F9F9F9;
    border-left: 2px solid var(--c1)
}

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

    .blockquote02 {
        padding: 25px 40px
    }
}

@media screen and (min-width: 1200px) {
    .blockquote {
        padding: 25px 60px
    }

    .blockquote2 {
        padding: 30px 60px
    }
}

::-webkit-input-placeholder {
    font-size: 16px;
    font-size: 1rem;
    color: #9d897a;
    opacity: 1
}

@media screen and (min-width: 769px) {
    ::-webkit-input-placeholder {
        font-size: 18px;
        font-size: 1.125rem
    }
}

:-moz-placeholder {
    font-size: 16px;
    font-size: 1rem;
    color: #9d897a;
    opacity: 1
}

@media screen and (min-width: 769px) {
    :-moz-placeholder {
        font-size: 18px;
        font-size: 1.125rem
    }
}

::-moz-placeholder {
    font-size: 16px;
    font-size: 1rem;
    color: #9d897a;
    opacity: 1
}

@media screen and (min-width: 769px) {
    ::-moz-placeholder {
        font-size: 18px;
        font-size: 1.125rem
    }
}

:-ms-input-placeholder {
    font-size: 16px;
    font-size: 1rem;
    color: #9d897a;
    opacity: 1
}

@media screen and (min-width: 769px) {
    :-ms-input-placeholder {
        font-size: 18px;
        font-size: 1.125rem
    }
}

.fs16 ::-webkit-input-placeholder {
    font-size: 16px;
    font-size: 1rem
}

.fs16 :-moz-placeholder {
    font-size: 16px;
    font-size: 1rem
}

.fs16 ::-moz-placeholder {
    font-size: 16px;
    font-size: 1rem
}

.fs16 :-ms-input-placeholder {
    font-size: 16px;
    font-size: 1rem
}

.fs17 ::-webkit-input-placeholder {
    font-size: 16px;
    font-size: 1rem
}

@media screen and (min-width: 769px) {
    .fs17 ::-webkit-input-placeholder {
        font-size: 17px;
        font-size: 1.0625rem
    }
}

.fs17 :-moz-placeholder {
    font-size: 16px;
    font-size: 1rem
}

@media screen and (min-width: 769px) {
    .fs17 :-moz-placeholder {
        font-size: 17px;
        font-size: 1.0625rem
    }
}

.fs17 ::-moz-placeholder {
    font-size: 16px;
    font-size: 1rem
}

@media screen and (min-width: 769px) {
    .fs17 ::-moz-placeholder {
        font-size: 17px;
        font-size: 1.0625rem
    }
}

.fs17 :-ms-input-placeholder {
    font-size: 16px;
    font-size: 1rem
}

@media screen and (min-width: 769px) {
    .fs17 :-ms-input-placeholder {
        font-size: 17px;
        font-size: 1.0625rem
    }
}

.fs18 ::-webkit-input-placeholder {
    font-size: 16px;
    font-size: 1rem
}

@media screen and (min-width: 769px) {
    .fs18 ::-webkit-input-placeholder {
        font-size: 18px;
        font-size: 1.125rem
    }
}

.fs18 :-moz-placeholder {
    font-size: 16px;
    font-size: 1rem
}

@media screen and (min-width: 769px) {
    .fs18 :-moz-placeholder {
        font-size: 18px;
        font-size: 1.125rem
    }
}

.fs18 ::-moz-placeholder {
    font-size: 16px;
    font-size: 1rem
}

@media screen and (min-width: 769px) {
    .fs18 ::-moz-placeholder {
        font-size: 18px;
        font-size: 1.125rem
    }
}

.fs18 :-ms-input-placeholder {
    font-size: 16px;
    font-size: 1rem
}

@media screen and (min-width: 769px) {
    .fs18 :-ms-input-placeholder {
        font-size: 18px;
        font-size: 1.125rem
    }
}

input, select, textarea {
    padding: 10px;
    outline: 0 none
}

@media screen and (min-width: 769px) {
    input:hover, select:hover, textarea:hover {
        border-color: #6D6055
    }
}

input[type="checkbox"], input[type="radio"], select[type="checkbox"], select[type="radio"], textarea[type="checkbox"], textarea[type="radio"] {
    width: auto;
    height: auto;
    vertical-align: middle;
    cursor: pointer
}

input[type="checkbox"]:focus + span, input[type="checkbox"]:focus + strong, input[type="checkbox"]:focus + i, input[type="radio"]:focus + span, input[type="radio"]:focus + strong, input[type="radio"]:focus + i, select[type="checkbox"]:focus + span, select[type="checkbox"]:focus + strong, select[type="checkbox"]:focus + i, select[type="radio"]:focus + span, select[type="radio"]:focus + strong, select[type="radio"]:focus + i, textarea[type="checkbox"]:focus + span, textarea[type="checkbox"]:focus + strong, textarea[type="checkbox"]:focus + i, textarea[type="radio"]:focus + span, textarea[type="radio"]:focus + strong, textarea[type="radio"]:focus + i {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}

select {
    cursor: pointer;
    vertical-align: middle
}

textarea {
    min-height: 170px
}

label {
    cursor: pointer
}

.form-label, .form-plaintext {
    display: inline-block;
    vertical-align: middle;
    padding: 12px 2px;
    min-height: 40px
}

.form-label {
    font-weight: bold
}

.form-label i {
    font-size: 24px;
    font-size: 1.5rem;
    font-family: "微軟正黑體", "微軟正黑體修正", "Microsoft JhengHei";
    text-shadow: none
}

.form-chk, .form-radio {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

select.form-ctrl[size], select.form-ctrl[multiple] {
    height: auto
}

.form-check .form-check-input, .form-check .lable-text {
    display: inline-block;
    vertical-align: text-top
}

.form-check .label-text {
    margin: 0 0 0 5px
}

.toggle-nav {
    margin: 0 auto;
    -webkit-transition: all .3s;
    transition: all .3s
}

.toggle-nav .nav-list {
    -webkit-transition: all .3s;
    transition: all .3s;
    display: none;
    overflow: auto
}

.toggle-nav .sub-nav {
    display: none
}

.toggle-nav.on .nav-list {
    display: block
}

.toggle-nav + .js-nav {
    margin: 10px auto 0
}

.nav-t1:after {
    content: '';
    display: block;
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    -webkit-transition: all .3s;
    transition: all .3s;
    width: 15px;
    height: 15px;
    background-image: url(../images/svg/icon-plus.svg)
}

.nav-t1.on:after {
    height: 3px;
    background: #6C5F52
}

.nav-cate1 a {
    display: block;
    padding: 6px 25px
}

.nav-cate1 li {
    padding: 2px 0;
    border: 1px solid #DAD5D0;
    border-width: 1px 0 0
}

.nav-cate1 li:first-child {
    border: 0 none
}

.nav-cate1 .nav-list {
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2)
}

.nav-cate1 .on {
    font-family: "Noto Sans TC", sans-serif, "Helvetica Neue", "微軟正黑體", "微軟正黑體修正", "Microsoft JhengHei", sans-serif;
    font-weight: 500
}

.main-nav a {
    padding: 6px 2px;
    color: #ffffff;
}

.main-nav .col {
    position: relative;
    padding: 0 10px
}

@media screen and (min-width: 769px) {
    .main-nav .col:hover .sub-nav {
        display: block;
        -webkit-animation: fadeIn .3s;
        animation: fadeIn .3s
    }
}

.main-nav .col > a {
    position: relative;
    z-index: 0;
    overflow: hidden
}

.main-nav .col > a:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;                 /* 贴文字底部 */
    width: 0;                  /* 初始宽度为 0，不显示 */
    height: 2px;               /* 下划线厚度 */
    background-color: var(--c1-dark2);   /* 下划线颜色 */
    transition: width 0.3s ease; /* 动画效果 */
}

@media screen and (min-width: 769px) {
    .main-nav .col > a:hover {
        width: 100%;
    }

    .main-nav .col > a:hover:before {
        width: 100%;
    }
}

.main-nav .node1 {
    margin: 0 -10px
}

.main-nav .on a:before {
    opacity: 1
}

.nav1.on .nav-title {
    border-radius: 5px 5px 0 0
}

.nav2 a {
    border-radius: 5px 5px 0 0;
    display: block;
    padding: 10px 20px;
    color: var(--c1-dark1);
    background-color: #6C5F52
}

@media screen and (min-width: 769px) {
    .nav2 a:hover {
        color: #6C5F52;
        background-color: var(--c1-dark1)
    }
}

.nav2 ul {
    position: relative;
    margin: 0 -1px;
    z-index: 0
}

.nav2 ul:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: var(--c1-dark1);
    z-index: 1
}

.nav2 li {
    width: 50%;
    max-width: 180px;
    padding: 0 1px
}

.nav2 .on a {
    pointer-events: none;
    color: #6C5F52;
    background-color: var(--c1-dark1)
}

@media screen and (min-width: 768px) {
    .nav-cate1 a {
        border-radius: 10px;
        border: 1px solid #DAD5D0
    }
}

@media screen and (min-width: 768px) and (min-width: 769px) {
    .nav-cate1 a:hover {
        background-color: var(--c1);
        border-color: var(--c1)
    }
}

@media screen and (min-width: 768px) {
    .nav-cate1 li {
        border: 0 none;
        padding: 10px 5px
    }

    .nav-cate1 .on a {
        background-color: var(--c1);
        border-color: var(--c1)
    }

    .nav-cate1 .list {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0 -5px
    }

    .nav-cate1 .nav-title {
        display: none
    }

    .nav-cate1 .nav-list {
        display: block;
        -webkit-box-shadow: none;
        box-shadow: none;
        overflow: hidden
    }

    .nav2 a {
        padding: 15px 30px
    }
}

@media screen and (min-width: 769px) {
    .toggle-nav + .js-nav {
        display: none
    }
}

@media screen and (min-width: 1200px) {
    .nav-cate1 li {
        padding: 10px
    }

    .nav-cate1 .list {
        margin: 0 -10px
    }
}

@media screen and (min-width: 1400px) {
    .main-nav a {
        padding: 6px 5px
    }

    .main-nav .col {
        padding: 0 15px
    }

    .main-nav .node1 {
        margin: 0 -15px
    }
}

.page-limit a, .page-limit span {
    border-radius: 7px;
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px
}

.page-limit ul {
    margin: 0 -5px
}

.page-limit li {
    position: relative;
    padding: 5px;
    z-index: 0
}

.page-limit a {
    border: 1px solid rgba(108, 95, 82, 0.2);
    text-decoration: none
}

@media screen and (min-width: 769px) {
    .page-limit a:hover {
        background-color: var(--c1-dark1);
        border-color: transparent
    }
}

.page-limit .on a {
    background-color: var(--c1-dark1);
    border-color: transparent;
    pointer-events: none
}

.page-limit .off a {
    opacity: .5;
    pointer-events: none
}

.page-limit .first a, .page-limit .last a, .page-limit .prev a, .page-limit .next a {
    font-size: 0;
    text-align: left;
    text-indent: -999px;
    overflow: hidden;
    padding: 0
}

.page-limit .first a:after, .page-limit .last a:after, .page-limit .prev a:after, .page-limit .next a:after {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    content: '';
    display: block;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: 0
}

.page-limit .first a:after {
    background-image: url(../images/svg/arrow-first.svg)
}

.page-limit .last a:after {
    background-image: url(../images/svg/arrow-last.svg)
}

.page-limit .prev a:after {
    background-image: url(../images/svg/arrow-prev.svg)
}

.page-limit .next a:after {
    background-image: url(../images/svg/arrow-next.svg)
}

@media screen and (min-width: 768px) {
    .page-limit a, .page-limit span {
        width: 45px;
        height: 45px;
        line-height: 45px
    }
}

.p16-9 {
    height: 0;
    padding: 0 0 56.25%
}

.p27-28 {
    height: 0;
    padding: 0 0 103.7037%
}

.p10-7 {
    height: 0;
    padding: 0 0 70%
}

.p9-16 {
    height: 0;
    padding: 0 0 177.77778%
}

.p9-14 {
    height: 0;
    padding: 0 0 155.55556%
}

.p9-13 {
    height: 0;
    padding: 0 0 144.44444%
}

.p9-10 {
    height: 0;
    padding: 0 0 111.11111%
}

.p9-5 {
    height: 0;
    padding: 0 0 55.55556%
}

.p8-5 {
    height: 0;
    padding: 0 0 62.5%
}

.p9-8 {
    height: 0;
    padding: 0 0 88.88889%
}

.p7-5 {
    height: 0;
    padding: 0 0 71.42857%
}

.p5-8 {
    height: 0;
    padding: 0 0 160%
}

.p5-6 {
    height: 0;
    padding: 0 0 120%
}

.p5-4 {
    height: 0;
    padding: 0 0 80%
}

.p5-3 {
    height: 0;
    padding: 0 0 60%
}

.p5-2 {
    height: 0;
    padding: 0 0 40%
}

.p4-5 {
    height: 0;
    padding: 0 0 125%
}

.p4-3 {
    height: 0;
    padding: 0 0 75%
}

.p3-4 {
    height: 0;
    padding: 0 0 133.33333%
}

.p3-2 {
    height: 0;
    padding: 0 0 66.66667%
}

.p3-1 {
    height: 0;
    padding: 0 0 33.33333%
}

.p2-3 {
    height: 0;
    padding: 0 0 150%
}

.p2-1 {
    height: 0;
    padding: 0 0 50%
}

.p1-1 {
    height: 0;
    padding: 0 0 100%
}

.w01-6 {
    margin-left: auto;
    margin-right: auto;
    max-width: 160px
}

.w01-8 {
    margin-left: auto;
    margin-right: auto;
    max-width: 180px
}

.w02-9 {
    margin-left: auto;
    margin-right: auto;
    max-width: 290px
}

.w03-2 {
    margin-left: auto;
    margin-right: auto;
    max-width: 320px
}

.w03-5 {
    margin-left: auto;
    margin-right: auto;
    max-width: 350px
}

.w03-6 {
    margin-left: auto;
    margin-right: auto;
    max-width: 360px
}

.w04-1 {
    margin-left: auto;
    margin-right: auto;
    max-width: 410px
}

.w04-6 {
    margin-left: auto;
    margin-right: auto;
    max-width: 460px
}

.w06-2 {
    margin-left: auto;
    margin-right: auto;
    max-width: 620px
}

.w06-8 {
    margin-left: auto;
    margin-right: auto;
    max-width: 680px
}

.w07-1 {
    margin-left: auto;
    margin-right: auto;
    max-width: 710px
}

.w07-5 {
    margin-left: auto;
    margin-right: auto;
    max-width: 750px
}

.w08-4 {
    margin-left: auto;
    margin-right: auto;
    max-width: 840px
}

.w12-8 {
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px
}

.w13-6 {
    margin-left: auto;
    margin-right: auto;
    max-width: 1360px
}

.w14-4 {
    margin-left: auto;
    margin-right: auto;
    max-width: 1440px
}

.w18-4 {
    margin-left: auto;
    margin-right: auto;
    max-width: 1840px
}

.w01 {
    margin-left: auto;
    margin-right: auto;
    max-width: 100px
}

.w02 {
    margin-left: auto;
    margin-right: auto;
    max-width: 200px
}

.w03 {
    margin-left: auto;
    margin-right: auto;
    max-width: 300px
}

.w04 {
    margin-left: auto;
    margin-right: auto;
    max-width: 400px
}

.w05 {
    margin-left: auto;
    margin-right: auto;
    max-width: 500px
}

.w06 {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px
}

.w07 {
    margin-left: auto;
    margin-right: auto;
    max-width: 700px
}

.w08 {
    margin-left: auto;
    margin-right: auto;
    max-width: 800px
}

.w09 {
    margin-left: auto;
    margin-right: auto;
    max-width: 900px
}

.w10 {
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px
}

.w11 {
    margin-left: auto;
    margin-right: auto;
    max-width: 1100px
}

.w12 {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px
}

.w13 {
    margin-left: auto;
    margin-right: auto;
    max-width: 1300px
}

.w14 {
    margin-left: auto;
    margin-right: auto;
    max-width: 1400px
}

.w15 {
    margin-left: auto;
    margin-right: auto;
    max-width: 1500px
}

.w16 {
    margin-left: auto;
    margin-right: auto;
    max-width: 1600px
}

.w17 {
    margin-left: auto;
    margin-right: auto;
    max-width: 1700px
}

.w18 {
    margin-left: auto;
    margin-right: auto;
    max-width: 1800px
}

.w19 {
    margin-left: auto;
    margin-right: auto;
    max-width: 1900px
}

.my0 {
    margin-top: 0px;
    margin-bottom: 0px
}

.mt0 {
    margin-top: 0px
}

.mt01 {
    margin-top: 10px
}

.mb0 {
    margin-bottom: 0px
}

.mx0 {
    margin-left: 0px;
    margin-right: 0px
}

.ml0 {
    margin-left: 0px
}

.mr0 {
    margin-right: 0px
}

.p0 {
    padding: 0px 0px
}

.py0 {
    padding-top: 0px;
    padding-bottom: 0px
}

.pt0 {
    padding-top: 0px
}

.pb0 {
    padding-bottom: 0px
}

.px0 {
    padding-left: 0px;
    padding-right: 0px
}

.pl0 {
    padding-left: 0px
}

.pr0 {
    padding-right: 0px
}

.my1 {
    margin-top: 20px;
    margin-bottom: 20px
}

.mt1 {
    margin-top: 20px
}

.mb1 {
    margin-bottom: 20px
}

.mx1 {
    margin-left: 20px;
    margin-right: 20px
}

.ml1 {
    margin-left: 20px
}

.mr1 {
    margin-right: 20px
}

.p1 {
    padding: 20px 20px
}

.py1 {
    padding-top: 20px;
    padding-bottom: 20px
}

.pt1 {
    padding-top: 20px
}

.pb1 {
    padding-bottom: 20px
}

.px1 {
    padding-left: 20px;
    padding-right: 20px
}

.pl1 {
    padding-left: 20px
}

.pr1 {
    padding-right: 20px
}

.my2 {
    margin-top: 40px;
    margin-bottom: 40px
}

.mt2 {
    margin-top: 40px
}

.mb2 {
    margin-bottom: 40px
}

.mx2 {
    margin-left: 40px;
    margin-right: 40px
}

.ml2 {
    margin-left: 40px
}

.mr2 {
    margin-right: 40px
}

.p2 {
    padding: 40px 40px
}

.py2 {
    padding-top: 40px;
    padding-bottom: 40px
}

.pt2 {
    padding-top: 40px
}

.pb2 {
    padding-bottom: 40px
}

.px2 {
    padding-left: 40px;
    padding-right: 40px
}

.pl2 {
    padding-left: 40px
}

.pr2 {
    padding-right: 40px
}

.my3 {
    margin-top: 60px;
    margin-bottom: 60px
}

.mt3 {
    margin-top: 60px
}

.mb3 {
    margin-bottom: 60px
}

.mx3 {
    margin-left: 60px;
    margin-right: 60px
}

.ml3 {
    margin-left: 60px
}

.mr3 {
    margin-right: 60px
}

.py3 {
    padding-top: 60px;
    padding-bottom: 60px
}

.pt3 {
    padding-top: 60px
}

.pb3 {
    padding-bottom: 60px
}

.px3 {
    padding-left: 60px;
    padding-right: 60px
}

.pl3 {
    padding-left: 60px
}

.pr3 {
    padding-right: 60px
}

.my4 {
    margin-top: 80px;
    margin-bottom: 80px
}

.mt4 {
    margin-top: 80px
}

.mb4 {
    margin-bottom: 80px
}

.mx4 {
    margin-left: 80px;
    margin-right: 80px
}

.ml4 {
    margin-left: 80px
}

.mr4 {
    margin-right: 80px
}

.py4 {
    padding-top: 80px;
    padding-bottom: 80px
}

.pt4 {
    padding-top: 80px
}

.pb4 {
    padding-bottom: 80px
}

.px4 {
    padding-left: 80px;
    padding-right: 80px
}

.pl4 {
    padding-left: 80px
}

.pr4 {
    padding-right: 80px
}

.my5 {
    margin-top: 100px;
    margin-bottom: 100px
}

.mt5 {
    margin-top: 100px
}

.mb5 {
    margin-bottom: 100px
}

.mx5 {
    margin-left: 100px;
    margin-right: 100px
}

.ml5 {
    margin-left: 100px
}

.mr5 {
    margin-right: 100px
}

.py5 {
    padding-top: 100px;
    padding-bottom: 100px
}

.pt5 {
    padding-top: 100px
}

.pb5 {
    padding-bottom: 100px
}

.px5 {
    padding-left: 100px;
    padding-right: 100px
}

.pl5 {
    padding-left: 100px
}

.pr5 {
    padding-right: 100px
}

.my6 {
    margin-top: 120px;
    margin-bottom: 120px
}

.mt6 {
    margin-top: 120px
}

.mb6 {
    margin-bottom: 120px
}

.mx6 {
    margin-left: 120px;
    margin-right: 120px
}

.ml6 {
    margin-left: 120px
}

.mr6 {
    margin-right: 120px
}

.py6 {
    padding-top: 120px;
    padding-bottom: 120px
}

.pt6 {
    padding-top: 120px
}

.pb6 {
    padding-bottom: 120px
}

.px6 {
    padding-left: 120px;
    padding-right: 120px
}

.pl6 {
    padding-left: 120px
}

.pr6 {
    padding-right: 120px
}

.my7 {
    margin-top: 140px;
    margin-bottom: 140px
}

.mt7 {
    margin-top: 140px
}

.mb7 {
    margin-bottom: 140px
}

.mx7 {
    margin-left: 140px;
    margin-right: 140px
}

.ml7 {
    margin-left: 140px
}

.mr7 {
    margin-right: 140px
}

.py7 {
    padding-top: 140px;
    padding-bottom: 140px
}

.pt7 {
    padding-top: 140px
}

.pb7 {
    padding-bottom: 140px
}

.px7 {
    padding-left: 140px;
    padding-right: 140px
}

.pl7 {
    padding-left: 140px
}

.pr7 {
    padding-right: 140px
}

.my8 {
    margin-top: 160px;
    margin-bottom: 160px
}

.mt8 {
    margin-top: 160px
}

.mb8 {
    margin-bottom: 160px
}

.mx8 {
    margin-left: 160px;
    margin-right: 160px
}

.ml8 {
    margin-left: 160px
}

.mr8 {
    margin-right: 160px
}

.py8 {
    padding-top: 160px;
    padding-bottom: 160px
}

.pt8 {
    padding-top: 160px
}

.pb8 {
    padding-bottom: 160px
}

.px8 {
    padding-left: 160px;
    padding-right: 160px
}

.pl8 {
    padding-left: 160px
}

.pr8 {
    padding-right: 160px
}

.mw024 {
    min-width: 240px
}

.mw01 {
    min-width: 100px
}

.mw02 {
    min-width: 200px
}

.mw05 {
    min-width: 500px
}

.m0 {
    margin: 0
}

.mt-half {
    margin-top: 10px
}

.mb-half {
    margin-bottom: 10px
}

.ml-half {
    margin-left: 10px
}

.mr-half {
    margin-right: 10px
}

.mt1-half {
    margin-top: 30px
}

.mb1-half {
    margin-bottom: 30px
}

.p-05 {
    padding: 5px
}

.mt-05 {
    margin-top: 5px
}

.ml-05 {
    margin-left: 5px
}

.mx-05 {
    margin-left: 5px;
    margin-right: 5px
}

.pb05 {
    padding-bottom: 5px
}

.ml-auto {
    margin-left: auto
}

.mr-auto {
    margin-right: auto
}

.mt-auto {
    margin-top: auto
}

.mb-auto {
    margin-bottom: auto
}

.py-05 {
    padding-top: 5px;
    padding-bottom: 5px
}

.py-half {
    padding-top: 10px;
    padding-bottom: 10px
}

.pt-half {
    padding-top: 10px
}

.pb-half {
    padding-bottom: 10px
}

.px-half {
    padding-left: 10px;
    padding-right: 10px
}

.p-half {
    padding: 10px 10px
}

.pl-half {
    padding-left: 10px
}

.pr-half {
    padding-right: 10px
}

.pt1-half {
    padding-top: 30px
}

.pb1-half {
    padding-bottom: 30px
}

.py1-half {
    padding-top: 30px;
    padding-bottom: 30px
}

.pl1-half {
    padding-left: 30px
}

.pr1-half {
    padding-right: 30px
}

.p1-half {
    padding: 30px 30px
}

.px25 {
    padding-left: 25px;
    padding-right: 25px
}

.w-auto {
    display: inline-block;
    width: auto
}

@media screen and (min-width: 576px) {
    .s-w02 {
        max-width: 200px
    }

    .s-m0 {
        margin: 0
    }

    .s-my0 {
        margin-top: 0px;
        margin-bottom: 0px
    }

    .s-mt0 {
        margin-top: 0px
    }

    .s-mb0 {
        margin-bottom: 0px
    }

    .s-mx0 {
        margin-left: 0px;
        margin-right: 0px
    }

    .s-ml0 {
        margin-left: 0px
    }

    .s-mr0 {
        margin-right: 0px
    }

    .s-p0 {
        padding: 0px 0px
    }

    .s-py0 {
        padding-top: 0px;
        padding-bottom: 0px
    }

    .s-pt0 {
        padding-top: 0px
    }

    .s-pb0 {
        padding-bottom: 0px
    }

    .s-px0 {
        padding-left: 0px;
        padding-right: 0px
    }

    .s-pl0 {
        padding-left: 0px
    }

    .s-pr0 {
        padding-right: 0px
    }

    .s-my1 {
        margin-top: 20px;
        margin-bottom: 20px
    }

    .s-mt1 {
        margin-top: 20px
    }

    .s-mb1 {
        margin-bottom: 20px
    }

    .s-mx1 {
        margin-left: 20px;
        margin-right: 20px
    }

    .s-ml1 {
        margin-left: 20px
    }

    .s-mr1 {
        margin-right: 20px
    }

    .s-p1 {
        padding: 20px 20px
    }

    .s-py1 {
        padding-top: 20px;
        padding-bottom: 20px
    }

    .s-pt1 {
        padding-top: 20px
    }

    .s-pb1 {
        padding-bottom: 20px
    }

    .s-px1 {
        padding-left: 20px;
        padding-right: 20px
    }

    .s-pl1 {
        padding-left: 20px
    }

    .s-pr1 {
        padding-right: 20px
    }

    .s-my2 {
        margin-top: 40px;
        margin-bottom: 40px
    }

    .s-mt2 {
        margin-top: 40px
    }

    .s-mb2 {
        margin-bottom: 40px
    }

    .s-mx2 {
        margin-left: 40px;
        margin-right: 40px
    }

    .s-ml2 {
        margin-left: 40px
    }

    .s-mr2 {
        margin-right: 40px
    }

    .s-p2 {
        padding: 40px 40px
    }

    .s-py2 {
        padding-top: 40px;
        padding-bottom: 40px
    }

    .s-pt2 {
        padding-top: 40px
    }

    .s-pb2 {
        padding-bottom: 40px
    }

    .s-px2 {
        padding-left: 40px;
        padding-right: 40px
    }

    .s-pl2 {
        padding-left: 40px
    }

    .s-pr2 {
        padding-right: 40px
    }

    .s-my3 {
        margin-top: 60px;
        margin-bottom: 60px
    }

    .s-mt3 {
        margin-top: 60px
    }

    .s-mb3 {
        margin-bottom: 60px
    }

    .s-mx3 {
        margin-left: 60px;
        margin-right: 60px
    }

    .s-ml3 {
        margin-left: 60px
    }

    .s-mr3 {
        margin-right: 60px
    }

    .s-p3 {
        padding: 60px 60px
    }

    .s-py3 {
        padding-top: 60px;
        padding-bottom: 60px
    }

    .s-pt3 {
        padding-top: 60px
    }

    .s-pb3 {
        padding-bottom: 60px
    }

    .s-px3 {
        padding-left: 60px;
        padding-right: 60px
    }

    .s-pl3 {
        padding-left: 60px
    }

    .s-pr3 {
        padding-right: 60px
    }

    .s-my4 {
        margin-top: 80px;
        margin-bottom: 80px
    }

    .s-mt4 {
        margin-top: 80px
    }

    .s-mb4 {
        margin-bottom: 80px
    }

    .s-mx4 {
        margin-left: 80px;
        margin-right: 80px
    }

    .s-ml4 {
        margin-left: 80px
    }

    .s-mr4 {
        margin-right: 80px
    }

    .s-py4 {
        padding-top: 80px;
        padding-bottom: 80px
    }

    .s-pt4 {
        padding-top: 80px
    }

    .s-pb4 {
        padding-bottom: 80px
    }

    .s-px4 {
        padding-left: 80px;
        padding-right: 80px
    }

    .s-pl4 {
        padding-left: 80px
    }

    .s-pr4 {
        padding-right: 80px
    }

    .s-my5 {
        margin-top: 100px;
        margin-bottom: 100px
    }

    .s-mt5 {
        margin-top: 100px
    }

    .s-mb5 {
        margin-bottom: 100px
    }

    .s-mx5 {
        margin-left: 100px;
        margin-right: 100px
    }

    .s-ml5 {
        margin-left: 100px
    }

    .s-mr5 {
        margin-right: 100px
    }

    .s-py5 {
        padding-top: 100px;
        padding-bottom: 100px
    }

    .s-pt5 {
        padding-top: 100px
    }

    .s-pb5 {
        padding-bottom: 100px
    }

    .s-px5 {
        padding-left: 100px;
        padding-right: 100px
    }

    .s-pl5 {
        padding-left: 100px
    }

    .s-pr5 {
        padding-right: 100px
    }

    .s-my6 {
        margin-top: 120px;
        margin-bottom: 120px
    }

    .s-mt6 {
        margin-top: 120px
    }

    .s-mb6 {
        margin-bottom: 120px
    }

    .s-mx6 {
        margin-left: 120px;
        margin-right: 120px
    }

    .s-ml6 {
        margin-left: 120px
    }

    .s-mr6 {
        margin-right: 120px
    }

    .s-py6 {
        padding-top: 120px;
        padding-bottom: 120px
    }

    .s-pt6 {
        padding-top: 120px
    }

    .s-pb6 {
        padding-bottom: 120px
    }

    .s-px6 {
        padding-left: 120px;
        padding-right: 120px
    }

    .s-pl6 {
        padding-left: 120px
    }

    .s-pr6 {
        padding-right: 120px
    }

    .s-my7 {
        margin-top: 140px;
        margin-bottom: 140px
    }

    .s-mt7 {
        margin-top: 140px
    }

    .s-mb7 {
        margin-bottom: 140px
    }

    .s-mx7 {
        margin-left: 140px;
        margin-right: 140px
    }

    .s-ml7 {
        margin-left: 140px
    }

    .s-mr7 {
        margin-right: 140px
    }

    .s-py7 {
        padding-top: 140px;
        padding-bottom: 140px
    }

    .s-pt7 {
        padding-top: 140px
    }

    .s-pb7 {
        padding-bottom: 140px
    }

    .s-px7 {
        padding-left: 140px;
        padding-right: 140px
    }

    .s-pl7 {
        padding-left: 140px
    }

    .s-pr7 {
        padding-right: 140px
    }

    .s-my8 {
        margin-top: 160px;
        margin-bottom: 160px
    }

    .s-mt8 {
        margin-top: 160px
    }

    .s-mb8 {
        margin-bottom: 160px
    }

    .s-mx8 {
        margin-left: 160px;
        margin-right: 160px
    }

    .s-ml8 {
        margin-left: 160px
    }

    .s-mr8 {
        margin-right: 160px
    }

    .s-py8 {
        padding-top: 160px;
        padding-bottom: 160px
    }

    .s-pt8 {
        padding-top: 160px
    }

    .s-pb8 {
        padding-bottom: 160px
    }

    .s-px8 {
        padding-left: 160px;
        padding-right: 160px
    }

    .s-pl8 {
        padding-left: 160px
    }

    .s-pr8 {
        padding-right: 160px
    }
}

@media screen and (min-width: 768px) {
    .m-mw03 {
        min-width: 300px
    }

    .m-w018 {
        max-width: 180px
    }

    .m-w05-2 {
        max-width: 520px
    }

    .m-w05-4 {
        max-width: 540px
    }

    .m-w06 {
        max-width: 600px
    }

    .m-w063 {
        max-width: 630px
    }

    .m-w07 {
        max-width: 700px
    }

    .m-m0 {
        margin: 0
    }

    .m-p0 {
        padding: 0
    }

    .m-pyh {
        padding: 10px
    }

    .m-pbh {
        padding-bottom: 10px
    }

    .m-mb1h {
        margin-bottom: 30px
    }

    .m-mt1h {
        margin-top: 30px
    }

    .m-p1h {
        padding: 30px
    }

    .m-pt1h {
        padding-top: 30px
    }

    .m-pb1h {
        padding-bottom: 30px
    }

    .m-px1h {
        padding-left: 30px;
        padding-right: 30px
    }

    .m-my0 {
        margin-top: 0px;
        margin-bottom: 0px
    }

    .m-mt0 {
        margin-top: 0px
    }

    .m-mb0 {
        margin-bottom: 0px
    }

    .m-mx0 {
        margin-left: 0px;
        margin-right: 0px
    }

    .m-ml0 {
        margin-left: 0px
    }

    .m-mr0 {
        margin-right: 0px
    }

    .m-p0 {
        padding: 0px 0px
    }

    .m-py0 {
        padding-top: 0px;
        padding-bottom: 0px
    }

    .m-pt0 {
        padding-top: 0px
    }

    .m-pb0 {
        padding-bottom: 0px
    }

    .m-px0 {
        padding-left: 0px;
        padding-right: 0px
    }

    .m-pl0 {
        padding-left: 0px
    }

    .m-pr0 {
        padding-right: 0px
    }

    .m-my1 {
        margin-top: 20px;
        margin-bottom: 20px
    }

    .m-mt1 {
        margin-top: 20px
    }

    .m-mb1 {
        margin-bottom: 20px
    }

    .m-mx1 {
        margin-left: 20px;
        margin-right: 20px
    }

    .m-ml1 {
        margin-left: 20px
    }

    .m-mr1 {
        margin-right: 20px
    }

    .m-p1 {
        padding: 20px 20px
    }

    .m-py1 {
        padding-top: 20px;
        padding-bottom: 20px
    }

    .m-pt1 {
        padding-top: 20px
    }

    .m-pb1 {
        padding-bottom: 20px
    }

    .m-px1 {
        padding-left: 20px;
        padding-right: 20px
    }

    .m-pl1 {
        padding-left: 20px
    }

    .m-pr1 {
        padding-right: 20px
    }

    .m-my2 {
        margin-top: 40px;
        margin-bottom: 40px
    }

    .m-mt2 {
        margin-top: 40px
    }

    .m-mb2 {
        margin-bottom: 40px
    }

    .m-mx2 {
        margin-left: 40px;
        margin-right: 40px
    }

    .m-ml2 {
        margin-left: 40px
    }

    .m-mr2 {
        margin-right: 40px
    }

    .m-p2 {
        padding: 40px 40px
    }

    .m-py2 {
        padding-top: 40px;
        padding-bottom: 40px
    }

    .m-pt2 {
        padding-top: 40px
    }

    .m-pb2 {
        padding-bottom: 40px
    }

    .m-px2 {
        padding-left: 40px;
        padding-right: 40px
    }

    .m-pl2 {
        padding-left: 40px
    }

    .m-pr2 {
        padding-right: 40px
    }

    .m-my3 {
        margin-top: 60px;
        margin-bottom: 60px
    }

    .m-mt3 {
        margin-top: 60px
    }

    .m-mb3 {
        margin-bottom: 60px
    }

    .m-mx3 {
        margin-left: 60px;
        margin-right: 60px
    }

    .m-ml3 {
        margin-left: 60px
    }

    .m-mr3 {
        margin-right: 60px
    }

    .m-p3 {
        padding: 60px 60px
    }

    .m-py3 {
        padding-top: 60px;
        padding-bottom: 60px
    }

    .m-pt3 {
        padding-top: 60px
    }

    .m-pb3 {
        padding-bottom: 60px
    }

    .m-px3 {
        padding-left: 60px;
        padding-right: 60px
    }

    .m-pl3 {
        padding-left: 60px
    }

    .m-pr3 {
        padding-right: 60px
    }

    .m-my4 {
        margin-top: 80px;
        margin-bottom: 80px
    }

    .m-mt4 {
        margin-top: 80px
    }

    .m-mb4 {
        margin-bottom: 80px
    }

    .m-mx4 {
        margin-left: 80px;
        margin-right: 80px
    }

    .m-ml4 {
        margin-left: 80px
    }

    .m-mr4 {
        margin-right: 80px
    }

    .m-py4 {
        padding-top: 80px;
        padding-bottom: 80px
    }

    .m-pt4 {
        padding-top: 80px
    }

    .m-pb4 {
        padding-bottom: 80px
    }

    .m-px4 {
        padding-left: 80px;
        padding-right: 80px
    }

    .m-pl4 {
        padding-left: 80px
    }

    .m-pr4 {
        padding-right: 80px
    }

    .m-my5 {
        margin-top: 100px;
        margin-bottom: 100px
    }

    .m-mt5 {
        margin-top: 100px
    }

    .m-mb5 {
        margin-bottom: 100px
    }

    .m-mx5 {
        margin-left: 100px;
        margin-right: 100px
    }

    .m-ml5 {
        margin-left: 100px
    }

    .m-mr5 {
        margin-right: 100px
    }

    .m-py5 {
        padding-top: 100px;
        padding-bottom: 100px
    }

    .m-pt5 {
        padding-top: 100px
    }

    .m-pb5 {
        padding-bottom: 100px
    }

    .m-px5 {
        padding-left: 100px;
        padding-right: 100px
    }

    .m-pl5 {
        padding-left: 100px
    }

    .m-pr5 {
        padding-right: 100px
    }

    .m-my6 {
        margin-top: 120px;
        margin-bottom: 120px
    }

    .m-mt6 {
        margin-top: 120px
    }

    .m-mb6 {
        margin-bottom: 120px
    }

    .m-mx6 {
        margin-left: 120px;
        margin-right: 120px
    }

    .m-ml6 {
        margin-left: 120px
    }

    .m-mr6 {
        margin-right: 120px
    }

    .m-py6 {
        padding-top: 120px;
        padding-bottom: 120px
    }

    .m-pt6 {
        padding-top: 120px
    }

    .m-pb6 {
        padding-bottom: 120px
    }

    .m-px6 {
        padding-left: 120px;
        padding-right: 120px
    }

    .m-pl6 {
        padding-left: 120px
    }

    .m-pr6 {
        padding-right: 120px
    }

    .m-my7 {
        margin-top: 140px;
        margin-bottom: 140px
    }

    .m-mt7 {
        margin-top: 140px
    }

    .m-mb7 {
        margin-bottom: 140px
    }

    .m-mx7 {
        margin-left: 140px;
        margin-right: 140px
    }

    .m-ml7 {
        margin-left: 140px
    }

    .m-mr7 {
        margin-right: 140px
    }

    .m-py7 {
        padding-top: 140px;
        padding-bottom: 140px
    }

    .m-pt7 {
        padding-top: 140px
    }

    .m-pb7 {
        padding-bottom: 140px
    }

    .m-px7 {
        padding-left: 140px;
        padding-right: 140px
    }

    .m-pl7 {
        padding-left: 140px
    }

    .m-pr7 {
        padding-right: 140px
    }

    .m-my8 {
        margin-top: 160px;
        margin-bottom: 160px
    }

    .m-mt8 {
        margin-top: 160px
    }

    .m-mb8 {
        margin-bottom: 160px
    }

    .m-mx8 {
        margin-left: 160px;
        margin-right: 160px
    }

    .m-ml8 {
        margin-left: 160px
    }

    .m-mr8 {
        margin-right: 160px
    }

    .m-py8 {
        padding-top: 160px;
        padding-bottom: 160px
    }

    .m-pt8 {
        padding-top: 160px
    }

    .m-pb8 {
        padding-bottom: 160px
    }

    .m-px8 {
        padding-left: 160px;
        padding-right: 160px
    }

    .m-pl8 {
        padding-left: 160px
    }

    .m-pr8 {
        padding-right: 160px
    }
}

@media screen and (min-width: 769px) {
    .ml-m0 {
        margin: 0
    }

    .ml-mb0 {
        margin-bottom: 0
    }

    .ml-h66 {
        height: 660px
    }

    .ml-h72 {
        height: 720px
    }

    .ml-w04 {
        max-width: 400px
    }

    .ml-ml-auto {
        margin-left: auto
    }

    .ml-pyh {
        padding-top: 10px;
        padding-bottom: 10px
    }

    .ml-my0 {
        margin-top: 0px;
        margin-bottom: 0px
    }

    .ml-mt0 {
        margin-top: 0px
    }

    .ml-mb0 {
        margin-bottom: 0px
    }

    .ml-mx0 {
        margin-left: 0px;
        margin-right: 0px
    }

    .ml-ml0 {
        margin-left: 0px
    }

    .ml-mr0 {
        margin-right: 0px
    }

    .ml-p0 {
        padding: 0px 0px
    }

    .ml-py0 {
        padding-top: 0px;
        padding-bottom: 0px
    }

    .ml-pt0 {
        padding-top: 0px
    }

    .ml-pb0 {
        padding-bottom: 0px
    }

    .ml-px0 {
        padding-left: 0px;
        padding-right: 0px
    }

    .ml-pl0 {
        padding-left: 0px
    }

    .ml-pr0 {
        padding-right: 0px
    }

    .ml-my1 {
        margin-top: 20px;
        margin-bottom: 20px
    }

    .ml-mt1 {
        margin-top: 20px
    }

    .ml-mb1 {
        margin-bottom: 20px
    }

    .ml-mx1 {
        margin-left: 20px;
        margin-right: 20px
    }

    .ml-ml1 {
        margin-left: 20px
    }

    .ml-mr1 {
        margin-right: 20px
    }

    .ml-p1 {
        padding: 20px 20px
    }

    .ml-py1 {
        padding-top: 20px;
        padding-bottom: 20px
    }

    .ml-pt1 {
        padding-top: 20px
    }

    .ml-pb1 {
        padding-bottom: 20px
    }

    .ml-px1 {
        padding-left: 20px;
        padding-right: 20px
    }

    .ml-pl1 {
        padding-left: 20px
    }

    .ml-pr1 {
        padding-right: 20px
    }

    .ml-my2 {
        margin-top: 40px;
        margin-bottom: 40px
    }

    .ml-mt2 {
        margin-top: 40px
    }

    .ml-mb2 {
        margin-bottom: 40px
    }

    .ml-mx2 {
        margin-left: 40px;
        margin-right: 40px
    }

    .ml-ml2 {
        margin-left: 40px
    }

    .ml-mr2 {
        margin-right: 40px
    }

    .ml-p2 {
        padding: 40px 40px
    }

    .ml-py2 {
        padding-top: 40px;
        padding-bottom: 40px
    }

    .ml-pt2 {
        padding-top: 40px
    }

    .ml-pb2 {
        padding-bottom: 40px
    }

    .ml-px2 {
        padding-left: 40px;
        padding-right: 40px
    }

    .ml-pl2 {
        padding-left: 40px
    }

    .ml-pr2 {
        padding-right: 40px
    }

    .ml-my3 {
        margin-top: 60px;
        margin-bottom: 60px
    }

    .ml-mt3 {
        margin-top: 60px
    }

    .ml-mb3 {
        margin-bottom: 60px
    }

    .ml-mx3 {
        margin-left: 60px;
        margin-right: 60px
    }

    .ml-ml3 {
        margin-left: 60px
    }

    .ml-mr3 {
        margin-right: 60px
    }

    .ml-py3 {
        padding-top: 60px;
        padding-bottom: 60px
    }

    .ml-pt3 {
        padding-top: 60px
    }

    .ml-pb3 {
        padding-bottom: 60px
    }

    .ml-px3 {
        padding-left: 60px;
        padding-right: 60px
    }

    .ml-pl3 {
        padding-left: 60px
    }

    .ml-pr3 {
        padding-right: 60px
    }

    .ml-my4 {
        margin-top: 80px;
        margin-bottom: 80px
    }

    .ml-mt4 {
        margin-top: 80px
    }

    .ml-mb4 {
        margin-bottom: 80px
    }

    .ml-mx4 {
        margin-left: 80px;
        margin-right: 80px
    }

    .ml-ml4 {
        margin-left: 80px
    }

    .ml-mr4 {
        margin-right: 80px
    }

    .ml-py4 {
        padding-top: 80px;
        padding-bottom: 80px
    }

    .ml-pt4 {
        padding-top: 80px
    }

    .ml-pb4 {
        padding-bottom: 80px
    }

    .ml-px4 {
        padding-left: 80px;
        padding-right: 80px
    }

    .ml-pl4 {
        padding-left: 80px
    }

    .ml-pr4 {
        padding-right: 80px
    }

    .ml-my5 {
        margin-top: 100px;
        margin-bottom: 100px
    }

    .ml-mt5 {
        margin-top: 100px
    }

    .ml-mb5 {
        margin-bottom: 100px
    }

    .ml-mx5 {
        margin-left: 100px;
        margin-right: 100px
    }

    .ml-ml5 {
        margin-left: 100px
    }

    .ml-mr5 {
        margin-right: 100px
    }

    .ml-py5 {
        padding-top: 100px;
        padding-bottom: 100px
    }

    .ml-pt5 {
        padding-top: 100px
    }

    .ml-pb5 {
        padding-bottom: 100px
    }

    .ml-px5 {
        padding-left: 100px;
        padding-right: 100px
    }

    .ml-pl5 {
        padding-left: 100px
    }

    .ml-pr5 {
        padding-right: 100px
    }

    .ml-my6 {
        margin-top: 120px;
        margin-bottom: 120px
    }

    .ml-mt6 {
        margin-top: 120px
    }

    .ml-mb6 {
        margin-bottom: 120px
    }

    .ml-mx6 {
        margin-left: 120px;
        margin-right: 120px
    }

    .ml-ml6 {
        margin-left: 120px
    }

    .ml-mr6 {
        margin-right: 120px
    }

    .ml-py6 {
        padding-top: 120px;
        padding-bottom: 120px
    }

    .ml-pt6 {
        padding-top: 120px
    }

    .ml-pb6 {
        padding-bottom: 120px
    }

    .ml-px6 {
        padding-left: 120px;
        padding-right: 120px
    }

    .ml-pl6 {
        padding-left: 120px
    }

    .ml-pr6 {
        padding-right: 120px
    }

    .ml-my7 {
        margin-top: 140px;
        margin-bottom: 140px
    }

    .ml-mt7 {
        margin-top: 140px
    }

    .ml-mb7 {
        margin-bottom: 140px
    }

    .ml-mx7 {
        margin-left: 140px;
        margin-right: 140px
    }

    .ml-ml7 {
        margin-left: 140px
    }

    .ml-mr7 {
        margin-right: 140px
    }

    .ml-py7 {
        padding-top: 140px;
        padding-bottom: 140px
    }

    .ml-pt7 {
        padding-top: 140px
    }

    .ml-pb7 {
        padding-bottom: 140px
    }

    .ml-px7 {
        padding-left: 140px;
        padding-right: 140px
    }

    .ml-pl7 {
        padding-left: 140px
    }

    .ml-pr7 {
        padding-right: 140px
    }

    .ml-my8 {
        margin-top: 160px;
        margin-bottom: 160px
    }

    .ml-mt8 {
        margin-top: 160px
    }

    .ml-mb8 {
        margin-bottom: 160px
    }

    .ml-mx8 {
        margin-left: 160px;
        margin-right: 160px
    }

    .ml-ml8 {
        margin-left: 160px
    }

    .ml-mr8 {
        margin-right: 160px
    }

    .ml-py8 {
        padding-top: 160px;
        padding-bottom: 160px
    }

    .ml-pt8 {
        padding-top: 160px
    }

    .ml-pb8 {
        padding-bottom: 160px
    }

    .ml-px8 {
        padding-left: 160px;
        padding-right: 160px
    }

    .ml-pl8 {
        padding-left: 160px
    }

    .ml-pr8 {
        padding-right: 160px
    }
}

@media screen and (min-width: 1200px) {
    .l-m0 {
        margin: 0
    }

    .l-py3h {
        padding-top: 70px;
        padding-bottom: 70px
    }

    .l-my0 {
        margin-top: 0px;
        margin-bottom: 0px
    }

    .l-mt0 {
        margin-top: 0px
    }
    .l-mb01 {
        margin-bottom: 10px
    }

    .l-mb0 {
        margin-bottom: 0px
    }


    .l-mx0 {
        margin-left: 0px;
        margin-right: 0px
    }

    .l-ml0 {
        margin-left: 0px
    }

    .l-mr0 {
        margin-right: 0px
    }

    .l-p0 {
        padding: 0px 0px
    }

    .l-py0 {
        padding-top: 0px;
        padding-bottom: 0px
    }

    .l-pt0 {
        padding-top: 0px
    }

    .l-pb0 {
        padding-bottom: 0px
    }

    .l-px0 {
        padding-left: 0px;
        padding-right: 0px
    }

    .l-pl0 {
        padding-left: 0px
    }

    .l-pr0 {
        padding-right: 0px
    }

    .l-my1 {
        margin-top: 20px;
        margin-bottom: 20px
    }

    .l-mt1 {
        margin-top: 20px
    }

    .l-mb1 {
        margin-bottom: 20px
    }

    .l-mx1 {
        margin-left: 20px;
        margin-right: 20px
    }

    .l-ml1 {
        margin-left: 0px
    }

    .l-mr1 {
        margin-right: 20px
    }

    .l-p1 {
        padding: 20px 20px
    }

    .l-py1 {
        padding-top: 20px;
        padding-bottom: 20px
    }

    .l-pt1 {
        padding-top: 20px
    }

    .l-pb1 {
        padding-bottom: 20px
    }

    .l-px1 {
        padding-left: 20px;
        padding-right: 20px
    }

    .l-pl1 {
        padding-left: 20px
    }

    .l-pr1 {
        padding-right: 20px
    }

    .l-my2 {
        margin-top: 40px;
        margin-bottom: 40px
    }

    .l-mt2 {
        margin-top: 40px
    }

    .l-mb2 {
        margin-bottom: 40px
    }

    .l-mx2 {
        margin-left: 40px;
        margin-right: 40px
    }

    .l-ml2 {
        margin-left: 40px
    }

    .l-mr2 {
        margin-right: 40px
    }

    .l-p2 {
        padding: 40px 40px
    }

    .l-py2 {
        padding-top: 40px;
        padding-bottom: 40px
    }

    .l-pt2 {
        padding-top: 40px
    }

    .l-pb2 {
        padding-bottom: 40px
    }

    .l-px2 {
        padding-left: 40px;
        padding-right: 40px
    }

    .l-pl2 {
        padding-left: 40px
    }

    .l-pr2 {
        padding-right: 40px
    }

    .l-my3 {
        margin-top: 60px;
        margin-bottom: 60px
    }

    .l-mt3 {
        margin-top: 60px
    }

    .l-mb3 {
        margin-bottom: 60px
    }

    .l-mx3 {
        margin-left: 60px;
        margin-right: 60px
    }

    .l-ml3 {
        margin-left: 60px
    }

    .l-mr3 {
        margin-right: 60px
    }

    .l-py3 {
        padding-top: 60px;
        padding-bottom: 60px
    }

    .l-pt3 {
        padding-top: 60px
    }

    .l-pb3 {
        padding-bottom: 60px
    }

    .l-px3 {
        padding-left: 60px;
        padding-right: 60px
    }

    .l-pl3 {
        padding-left: 60px
    }

    .l-pr3 {
        padding-right: 60px
    }

    .l-my4 {
        margin-top: 80px;
        margin-bottom: 80px
    }

    .l-mt4 {
        margin-top: 80px
    }

    .l-mb4 {
        margin-bottom: 80px
    }

    .l-mx4 {
        margin-left: 80px;
        margin-right: 80px
    }

    .l-ml4 {
        margin-left: 80px
    }

    .l-mr4 {
        margin-right: 80px
    }

    .l-py4 {
        padding-top: 80px;
        padding-bottom: 80px
    }

    .l-pt4 {
        padding-top: 80px
    }

    .l-pb4 {
        padding-bottom: 80px
    }

    .l-px4 {
        padding-left: 80px;
        padding-right: 80px
    }

    .l-pl4 {
        padding-left: 80px
    }

    .l-pr4 {
        padding-right: 80px
    }

    .l-my5 {
        margin-top: 100px;
        margin-bottom: 100px
    }

    .l-mt5 {
        margin-top: 100px
    }

    .l-mb5 {
        margin-bottom: 100px
    }

    .l-mx5 {
        margin-left: 100px;
        margin-right: 100px
    }

    .l-ml5 {
        margin-left: 100px
    }

    .l-mr5 {
        margin-right: 100px
    }

    .l-py5 {
        padding-top: 100px;
        padding-bottom: 100px
    }

    .l-pt5 {
        padding-top: 100px
    }

    .l-pb5 {
        padding-bottom: 100px
    }

    .l-px5 {
        padding-left: 100px;
        padding-right: 100px
    }

    .l-pl5 {
        padding-left: 100px
    }

    .l-pr5 {
        padding-right: 100px
    }

    .l-my6 {
        margin-top: 120px;
        margin-bottom: 120px
    }

    .l-mt6 {
        margin-top: 120px
    }

    .l-mb6 {
        margin-bottom: 120px
    }

    .l-mx6 {
        margin-left: 120px;
        margin-right: 120px
    }

    .l-ml6 {
        margin-left: 120px
    }

    .l-mr6 {
        margin-right: 120px
    }

    .l-py6 {
        padding-top: 120px;
        padding-bottom: 120px
    }

    .l-pt6 {
        padding-top: 120px
    }

    .l-pb6 {
        padding-bottom: 120px
    }

    .l-px6 {
        padding-left: 120px;
        padding-right: 120px
    }

    .l-pl6 {
        padding-left: 120px
    }

    .l-pr6 {
        padding-right: 120px
    }

    .l-my7 {
        margin-top: 140px;
        margin-bottom: 140px
    }

    .l-mt7 {
        margin-top: 140px
    }

    .l-mb7 {
        margin-bottom: 140px
    }

    .l-mx7 {
        margin-left: 140px;
        margin-right: 140px
    }

    .l-ml7 {
        margin-left: 140px
    }

    .l-mr7 {
        margin-right: 140px
    }

    .l-py7 {
        padding-top: 140px;
        padding-bottom: 140px
    }

    .l-pt7 {
        padding-top: 140px
    }

    .l-pb7 {
        padding-bottom: 140px
    }

    .l-px7 {
        padding-left: 140px;
        padding-right: 140px
    }

    .l-pl7 {
        padding-left: 140px
    }

    .l-pr7 {
        padding-right: 140px
    }

    .l-my8 {
        margin-top: 160px;
        margin-bottom: 160px
    }

    .l-mt8 {
        margin-top: 160px
    }

    .l-mb8 {
        margin-bottom: 160px
    }

    .l-mx8 {
        margin-left: 160px;
        margin-right: 160px
    }

    .l-ml8 {
        margin-left: 160px
    }

    .l-mr8 {
        margin-right: 160px
    }

    .l-py8 {
        padding-top: 160px;
        padding-bottom: 160px
    }

    .l-pt8 {
        padding-top: 160px
    }

    .l-pb8 {
        padding-bottom: 160px
    }

    .l-px8 {
        padding-left: 160px;
        padding-right: 160px
    }

    .l-pl8 {
        padding-left: 160px
    }

    .l-pr8 {
        padding-right: 160px
    }
}

@media screen and (min-width: 1400px) {
    .x-m0 {
        margin: 0
    }

    .x-my0 {
        margin-top: 0px;
        margin-bottom: 0px
    }

    .x-mt0 {
        margin-top: 0px
    }

    .x-mb0 {
        margin-bottom: 0px
    }

    .x-mx0 {
        margin-left: 0px;
        margin-right: 0px
    }

    .x-ml0 {
        margin-left: 0px
    }

    .x-mr0 {
        margin-right: 0px
    }

    .x-p0 {
        padding: 0px 0px
    }

    .x-py0 {
        padding-top: 0px;
        padding-bottom: 0px
    }

    .x-pt0 {
        padding-top: 0px
    }

    .x-pb0 {
        padding-bottom: 0px
    }

    .x-px0 {
        padding-left: 0px;
        padding-right: 0px
    }

    .x-pl0 {
        padding-left: 0px
    }

    .x-pr0 {
        padding-right: 0px
    }

    .x-my1 {
        margin-top: 20px;
        margin-bottom: 20px
    }

    .x-mt1 {
        margin-top: 20px
    }

    .x-mb1 {
        margin-bottom: 20px
    }

    .x-mx1 {
        margin-left: 20px;
        margin-right: 20px
    }

    .x-ml1 {
        margin-left: 20px
    }

    .x-mr1 {
        margin-right: 20px
    }

    .x-p1 {
        padding: 20px 20px
    }

    .x-py1 {
        padding-top: 20px;
        padding-bottom: 20px
    }

    .x-pt1 {
        padding-top: 20px
    }

    .x-pb1 {
        padding-bottom: 20px
    }

    .x-px1 {
        padding-left: 20px;
        padding-right: 20px
    }

    .x-pl1 {
        padding-left: 20px
    }

    .x-pr1 {
        padding-right: 20px
    }

    .x-my2 {
        margin-top: 40px;
        margin-bottom: 40px
    }

    .x-mt2 {
        margin-top: 40px
    }

    .x-mb2 {
        margin-bottom: 40px
    }

    .x-mx2 {
        margin-left: 40px;
        margin-right: 40px
    }

    .x-ml2 {
        margin-left: 40px
    }

    .x-mr2 {
        margin-right: 40px
    }

    .x-p2 {
        padding: 40px 40px
    }

    .x-py2 {
        padding-top: 40px;
        padding-bottom: 40px
    }

    .x-pt2 {
        padding-top: 40px
    }

    .x-pb2 {
        padding-bottom: 40px
    }

    .x-px2 {
        padding-left: 40px;
        padding-right: 40px
    }

    .x-pl2 {
        padding-left: 40px
    }

    .x-pr2 {
        padding-right: 40px
    }

    .x-my3 {
        margin-top: 60px;
        margin-bottom: 60px
    }

    .x-mt3 {
        margin-top: 60px
    }

    .x-mb3 {
        margin-bottom: 60px
    }

    .x-mx3 {
        margin-left: 60px;
        margin-right: 60px
    }

    .x-ml3 {
        margin-left: 60px
    }

    .x-mr3 {
        margin-right: 60px
    }

    .x-py3 {
        padding-top: 60px;
        padding-bottom: 60px
    }

    .x-pt3 {
        padding-top: 60px
    }

    .x-pb3 {
        padding-bottom: 60px
    }

    .x-px3 {
        padding-left: 60px;
        padding-right: 60px
    }

    .x-pl3 {
        padding-left: 60px
    }

    .x-pr3 {
        padding-right: 60px
    }

    .x-my4 {
        margin-top: 80px;
        margin-bottom: 80px
    }

    .x-mt4 {
        margin-top: 80px
    }

    .x-mb4 {
        margin-bottom: 80px
    }

    .x-mx4 {
        margin-left: 80px;
        margin-right: 80px
    }

    .x-ml4 {
        margin-left: 80px
    }

    .x-mr4 {
        margin-right: 80px
    }

    .x-py4 {
        padding-top: 80px;
        padding-bottom: 80px
    }

    .x-pt4 {
        padding-top: 80px
    }

    .x-pb4 {
        padding-bottom: 80px
    }

    .x-px4 {
        padding-left: 80px;
        padding-right: 80px
    }

    .x-pl4 {
        padding-left: 80px
    }

    .x-pr4 {
        padding-right: 80px
    }

    .x-my5 {
        margin-top: 100px;
        margin-bottom: 100px
    }

    .x-mt5 {
        margin-top: 100px
    }

    .x-mb5 {
        margin-bottom: 100px
    }

    .x-mx5 {
        margin-left: 100px;
        margin-right: 100px
    }

    .x-ml5 {
        margin-left: 100px
    }

    .x-mr5 {
        margin-right: 100px
    }

    .x-py5 {
        padding-top: 100px;
        padding-bottom: 100px
    }

    .x-pt5 {
        padding-top: 100px
    }

    .x-pb5 {
        padding-bottom: 100px
    }

    .x-px5 {
        padding-left: 100px;
        padding-right: 100px
    }

    .x-pl5 {
        padding-left: 100px
    }

    .x-pr5 {
        padding-right: 100px
    }

    .x-my6 {
        margin-top: 120px;
        margin-bottom: 120px
    }

    .x-mt6 {
        margin-top: 120px
    }

    .x-mb6 {
        margin-bottom: 120px
    }

    .x-mx6 {
        margin-left: 120px;
        margin-right: 120px
    }

    .x-ml6 {
        margin-left: 120px
    }

    .x-mr6 {
        margin-right: 120px
    }

    .x-py6 {
        padding-top: 120px;
        padding-bottom: 120px
    }

    .x-pt6 {
        padding-top: 120px
    }

    .x-pb6 {
        padding-bottom: 120px
    }

    .x-px6 {
        padding-left: 120px;
        padding-right: 120px
    }

    .x-pl6 {
        padding-left: 120px
    }

    .x-pr6 {
        padding-right: 120px
    }

    .x-my7 {
        margin-top: 140px;
        margin-bottom: 140px
    }

    .x-mt7 {
        margin-top: 140px
    }

    .x-mb7 {
        margin-bottom: 140px
    }

    .x-mx7 {
        margin-left: 140px;
        margin-right: 140px
    }

    .x-ml7 {
        margin-left: 140px
    }

    .x-mr7 {
        margin-right: 140px
    }

    .x-py7 {
        padding-top: 140px;
        padding-bottom: 140px
    }

    .x-pt7 {
        padding-top: 140px
    }

    .x-pb7 {
        padding-bottom: 140px
    }

    .x-px7 {
        padding-left: 140px;
        padding-right: 140px
    }

    .x-pl7 {
        padding-left: 140px
    }

    .x-pr7 {
        padding-right: 140px
    }

    .x-my8 {
        margin-top: 160px;
        margin-bottom: 160px
    }

    .x-mt8 {
        margin-top: 160px
    }

    .x-mb8 {
        margin-bottom: 160px
    }

    .x-mx8 {
        margin-left: 160px;
        margin-right: 160px
    }

    .x-ml8 {
        margin-left: 160px
    }

    .x-mr8 {
        margin-right: 160px
    }

    .x-py8 {
        padding-top: 160px;
        padding-bottom: 160px
    }

    .x-pt8 {
        padding-top: 160px
    }

    .x-pb8 {
        padding-bottom: 160px
    }

    .x-px8 {
        padding-left: 160px;
        padding-right: 160px
    }

    .x-pl8 {
        padding-left: 160px
    }

    .x-pr8 {
        padding-right: 160px
    }
}

.font-noto {
    font-family: "Noto Sans TC", sans-serif
}

.font-num {
    font-family: "Fredoka", sans-serif
}

.font-ms {
    font-family: "微軟正黑體", "微軟正黑體修正", "Microsoft JhengHei"
}

.fw1 {
    font-weight: 100
}

.fw2 {
    font-weight: 200
}

.fw3 {
    font-weight: 300
}

.fw4 {
    font-weight: 400
}

.fw5 {
    font-weight: 500
}

.fw6 {
    font-weight: 600
}

.fw7 {
    font-weight: 700
}

.fw8 {
    font-weight: 800
}

.fw9 {
    font-weight: 900
}

.fs0 {
    font-size: 0
}

.fs12 {
    font-size: 12px;
    font-size: .75rem
}

.fs13 {
    font-size: 12px;
    font-size: .75rem
}

@media screen and (min-width: 769px) {
    .fs13 {
        font-size: 13px;
        font-size: .8125rem
    }
}

.fs14 {
    font-size: 14px;
    font-size: .875rem
}

.fs15 {
    font-size: 14px;
    font-size: .875rem
}

@media screen and (min-width: 769px) {
    .fs15 {
        font-size: 15px;
        font-size: .9375rem
    }
}

.fs16- {
    font-size: 16px;
    font-size: 1rem
}

.fs16 {
    font-size: 15px;
    font-size: .9375rem
}

@media screen and (min-width: 769px) {
    .fs16 {
        font-size: 16px;
        font-size: 1rem
    }
}

.fs17 {
    font-size: 16px;
    font-size: 1rem
}

@media screen and (min-width: 769px) {
    .fs17 {
        font-size: 17px;
        font-size: 1.0625rem
    }
}

.fs18, body, h6 {
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.8
}

@media screen and (min-width: 769px) {
    .fs18, body, h6 {
        font-size: 18px;
        font-size: 1.125rem
    }
}

.fs18- {
    font-size: 18px;
    font-size: 1.125rem
}

.fs19 {
    font-size: 18px;
    font-size: 1.125rem
}

@media screen and (min-width: 769px) {
    .fs19 {
        font-size: 19px;
        font-size: 1.1875rem
    }
}

.fs20 {
    font-size: 18px;
    font-size: 1.125rem
}

@media screen and (min-width: 769px) {
    .fs20 {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.fs21 {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.5
}

@media screen and (min-width: 769px) {
    .fs21 {
        font-size: 21px;
        font-size: 1.3125rem
    }
}

.fs22, h5 {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 1.4
}

@media screen and (min-width: 769px) {
    .fs22, h5 {
        font-size: 22px;
        font-size: 1.375rem
    }
}

.fs23 {
    font-size: 20px;
    font-size: 1.25rem
}

@media screen and (min-width: 769px) {
    .fs23 {
        font-size: 23px;
        font-size: 1.4375rem
    }
}

.fs24, h4 {
    font-size: 22px;
    font-size: 1.375rem;
    line-height: 1.4
}

@media screen and (min-width: 769px) {
    .fs24, h4 {
        font-size: 24px;
        font-size: 1.5rem
    }
}

.fs25 {
    font-size: 22px;
    font-size: 1.375rem
}

@media screen and (min-width: 769px) {
    .fs25 {
        font-size: 25px;
        font-size: 1.5625rem
    }
}

.fs26 {
    font-size: 24px;
    font-size: 1.5rem
}

@media screen and (min-width: 769px) {
    .fs26 {
        font-size: 26px;
        font-size: 1.625rem
    }
}

.fs28, h3 {
    font-size: 26px;
    font-size: 1.625rem;
    line-height: 1.2
}

@media screen and (min-width: 769px) {
    .fs28, h3 {
        font-size: 28px;
        font-size: 1.75rem
    }
}

.fs29 {
    font-size: 26px;
    font-size: 1.625rem
}

@media screen and (min-width: 769px) {
    .fs29 {
        font-size: 29px;
        font-size: 1.8125rem
    }
}

.fs30 {
    font-size: 28px;
    font-size: 1.75rem;
    line-height: 1.3
}

@media screen and (min-width: 769px) {
    .fs30 {
        font-size: 30px;
        font-size: 1.875rem
    }
}

.fs32, h2 {
    font-size: 30px;
    font-size: 1.875rem;
    line-height: 1.5
}

@media screen and (min-width: 769px) {
    .fs32, h2 {
        font-size: 32px;
        font-size: 2rem
    }
}

.fs34- {
    font-size: 34px;
    font-size: 2.125rem
}

.fs36 {
    font-size: 22px;
    font-size: 1.375rem
}

@media screen and (min-width: 769px) {
    .fs36 {
        font-size: 36px;
        font-size: 2.25rem
    }
}

.fs38 {
    font-size: 24px;
    font-size: 1.5rem
}

@media screen and (min-width: 769px) {
    .fs38 {
        font-size: 38px;
        font-size: 2.375rem
    }
}

.fs40 {
    font-size: 24px;
    font-size: 1.5rem
}

@media screen and (min-width: 768px) {
    .fs40 {
        font-size: 32px;
        font-size: 2rem
    }
}

@media screen and (min-width: 1400px) {
    .fs40 {
        font-size: 40px;
        font-size: 2.5rem
    }
}

.fs44 {
    font-size: 26px;
    font-size: 1.625rem
}

@media screen and (min-width: 768px) {
    .fs44 {
        font-size: 34px;
        font-size: 2.125rem
    }
}

@media screen and (min-width: 1400px) {
    .fs44 {
        font-size: 44px;
        font-size: 2.75rem
    }
}

.fs46 {
    font-size: 32px;
    font-size: 2rem
}

@media screen and (min-width: 768px) {
    .fs46 {
        font-size: 36px;
        font-size: 2.25rem
    }
}

@media screen and (min-width: 1400px) {
    .fs46 {
        font-size: 46px;
        font-size: 2.875rem
    }
}

.fs48, .fs49 {
    font-size: 32px;
    font-size: 2rem
}

@media screen and (min-width: 768px) {
    .fs48, .fs49 {
        font-size: 38px;
        font-size: 2.375rem
    }
}

@media screen and (min-width: 1400px) {
    .fs48, .fs49 {
        font-size: 48px;
        font-size: 3rem
    }
}

.fs1525 {
    font-size: 15px;
    font-size: .9375rem
}

@media screen and (min-width: 768px) {
    .fs1525 {
        font-size: 20px;
        font-size: 1.25rem
    }
}

@media screen and (min-width: 1400px) {
    .fs1525 {
        font-size: 25px;
        font-size: 1.5625rem
    }
}

.fs51 {
    font-size: 22px;
    font-size: 1.375rem
}

@media screen and (min-width: 768px) {
    .fs51 {
        font-size: 30px;
        font-size: 1.875rem
    }
}

@media screen and (min-width: 1400px) {
    .fs51 {
        font-size: 51px;
        font-size: 3.1875rem
    }
}

.fs63 {
    font-size: 50px;
    font-size: 3.125rem
}

@media screen and (min-width: 768px) {
    .fs63 {
        font-size: 63px;
        font-size: 3.9375rem
    }
}

.wm-vl {
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr
}

.lh1 {
    line-height: 1
}

.lh1-1 {
    line-height: 1.1
}

.lh1-2 {
    line-height: 1.2
}

.lh1-3 {
    line-height: 1.3
}

.lh1-4 {
    line-height: 1.4
}

.lh1-5 {
    line-height: 1.5
}

.lh1-6 {
    line-height: 1.6
}

.lh1-7 {
    line-height: 1.7
}

.lh1-8 {
    line-height: 1.8
}

.lh1-9 {
    line-height: 1.9
}

.lh2 {
    line-height: 2
}

.lh2-1 {
    line-height: 2.1
}

.lh2-2 {
    line-height: 2.2
}

.lh-nor {
    line-height: normal
}

.ttu {
    text-transform: uppercase
}

.ttl {
    text-transform: lowercase
}

.ttc {
    text-transform: capitalize
}

.ls1 {
    letter-spacing: 1px
}

.ls2 {
    letter-spacing: 2px
}

.ls5 {
    letter-spacing: 5px
}

.ti {
    font-style: italic
}

.tl {
    text-align: left
}

.tc {
    text-align: center
}

.tr {
    text-align: right
}

.ts, .t-shadow {
    text-shadow: 0.5px 0 0 currentColor
}

.nowrap {
    white-space: nowrap
}

.break-word {
    word-wrap: break-word;
    word-break: break-word
}

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

.clamp2 {
    -webkit-line-clamp: 2
}

.clamp3 {
    -webkit-line-clamp: 3
}

.t-bd1, .t-bd12, .t-bd13 {
    position: relative;
    padding: 2px 0 2px 12px;
    line-height: 1.5
}

.t-bd1:before, .t-bd12:before, .t-bd13:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    margin-top: 1px
}

.t-bd1:before {
    width: 5px;
    height: 70%;
    background-color: #FF9D00
}

.t-bd12:before {
    width: 6px;
    height: 60%;
    background-color: var(--c1-dark1)
}

.t-bd13:before {
    width: 6px;
    height: 60%;
    background-color: #6C5F52
}

.t-bd2, .t-bd22 {
    position: relative;
    padding: 0 0 5px;
    z-index: 1
}

.t-bd2:after, .t-bd22:after {
    content: '';
    display: block;
    width: 3px;
    height: 50px;
    margin: 0 auto;
    background-color: #6C5F52
}

.t-bd2:after {
    position: absolute;
    left: 50%;
    top: 100%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0)
}

.t-bd22:after {
    margin: 5px auto 0
}

.t-bd3:after, .t-bd4:after {
    content: '';
    display: block;
    margin: 15px auto 0;
    width: 50px;
    height: 6px
}

.t-bd3:after {
    margin: 15px auto 0;
    width: 50px;
    height: 6px;
    background-color: var(--c1)
}

.t-bd4:after {
    margin: 5px 0 0;
    width: 25px;
    height: 4px;
    background-color: var(--c1-dark1)
}

.t-split {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center
}

.t-split:before, .t-split:after {
    content: '';
    display: block;
    height: 1px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 30px;
    background-color: var(--c1)
}

.t-split:before {
    margin-right: 8px
}

.t-split:after {
    margin-left: 8px
}

.t-linear1 {
    background: linear-gradient(135deg, #b42e53 0%, #cb7043 13%, #e4c06a 32%, #62a38f 53%, #8fb5d9 71%, #613e9a 85%, #9d3e9c 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text
}

.t-label {
    position: relative;
    color: #fff;
    padding: 10px 20px;
    z-index: 0
}

.t-label:before {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: 100%;
    margin: -1px 0 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 15px 0 15px;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    z-index: -1
}

.t-label1 {
    background-color: var(--c1-dark1)
}

.t-label1:before {
    border-color: var(--c1-dark1) transparent transparent transparent
}

.t-label2 {
    background-color: #948876
}

.t-label2:before {
    border-color: #948876 transparent transparent transparent
}

@media screen and (min-width: 576px) {
    .s-tl {
        text-align: left
    }

    .s-tc {
        text-align: center
    }

    .s-tr {
        text-align: right
    }

    .s-clamp1 {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden
    }

    .s-clamp2 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        white-space: normal;
        overflow: hidden;
        -webkit-line-clamp: 2
    }

    .s-clamp3 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        white-space: normal;
        overflow: hidden;
        -webkit-line-clamp: 3
    }
}

@media screen and (min-width: 768px) {
    .t-bd2:after, .t-bd22:after {
        height: 60px
    }

    .t-bd2 {
        padding: 0 0 10px;
        margin-bottom: 30px
    }

    .t-bd22:after {
        margin: 10px auto
    }

    .t-bd3:after {
        margin: 20px auto 0
    }

    .t-split:before {
        margin-right: 40px
    }

    .t-split:after {
        margin-left: 40px
    }

    .m-clamp1 {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden
    }

    .m-clamp2 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        white-space: normal;
        overflow: hidden;
        -webkit-line-clamp: 2
    }

    .m-clamp3 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        white-space: normal;
        overflow: hidden;
        -webkit-line-clamp: 3
    }

    .m-tl {
        text-align: left
    }

    .m-tc {
        text-align: center
    }

    .m-tr {
        text-align: right
    }
}

@media screen and (min-width: 1200px) {
    .t-bd2:after, .t-bd22:after {
        height: 80px
    }

    .t-bd2 {
        margin-bottom: 40px
    }

    .l-tl {
        text-align: left
    }

    .l-tc {
        text-align: center
    }

    .l-tr {
        text-align: right
    }

    .l-clamp1 {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden
    }

    .l-clamp2 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        white-space: normal;
        overflow: hidden;
        -webkit-line-clamp: 2
    }

    .l-clamp3 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        white-space: normal;
        overflow: hidden;
        -webkit-line-clamp: 3
    }
}

@media screen and (min-width: 1400px) {
    .x-tl {
        text-align: left
    }

    .x-tc {
        text-align: center
    }

    .x-tr {
        text-align: right
    }
}

.cw {
    color: #fff
}

.bgcw {
    background-color: #fff
}

@media screen and (min-width: 769px) {
    .hover-cw:hover {
        color: #fff
    }
}

@media screen and (min-width: 769px) {
    .hover-bgcw:hover {
        background-color: #fff
    }
}

.c0 {
    color: #000
}

.bgc0 {
    background-color: #000
}

@media screen and (min-width: 769px) {
    .hover-c0:hover {
        color: #000
    }
}

@media screen and (min-width: 769px) {
    .hover-bgc0:hover {
        background-color: #000
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc0:hover:before, .hover-cwbgc0:hover:after {
        -webkit-filter: saturate(0) brightness(10);
        filter: saturate(0) brightness(10)
    }
}

@media screen and (min-width: 769px) {
    .hover-c0bgcw:hover:before, .hover-c0bgcw:hover:after {
        -webkit-filter: none;
        filter: none
    }
}

.c1 {
    color: var(--c1)
}

.bgc1 {
    background-color: var(--c1)
}

@media screen and (min-width: 769px) {
    .hover-c1:hover {
        color: var(--c1)
    }
}

@media screen and (min-width: 769px) {
    .hover-bgc1:hover {
        background-color: var(--c1)
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc1:hover:before, .hover-cwbgc1:hover:after {
        -webkit-filter: saturate(0) brightness(10);
        filter: saturate(0) brightness(10)
    }
}

@media screen and (min-width: 769px) {
    .hover-c1bgcw:hover:before, .hover-c1bgcw:hover:after {
        -webkit-filter: none;
        filter: none
    }
}

.c2 {
    color: var(--c1)
}

.bgc2 {
    background-color: var(--cw)
}

@media screen and (min-width: 769px) {
    .hover-c2:hover {
        color: #6C5F52
    }
}

@media screen and (min-width: 769px) {
    .hover-bgc2:hover {
        background-color: #6C5F52
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc2:hover:before, .hover-cwbgc2:hover:after {
        -webkit-filter: saturate(0) brightness(10);
        filter: saturate(0) brightness(10)
    }
}

@media screen and (min-width: 769px) {
    .hover-c2bgcw:hover:before, .hover-c2bgcw:hover:after {
        -webkit-filter: none;
        filter: none
    }
}

.c3 {
    color: #FF9D00
}

.bgc3 {
    background-color: #FF9D00
}

@media screen and (min-width: 769px) {
    .hover-c3:hover {
        color: #FF9D00
    }
}

@media screen and (min-width: 769px) {
    .hover-bgc3:hover {
        background-color: #FF9D00
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc3:hover:before, .hover-cwbgc3:hover:after {
        -webkit-filter: saturate(0) brightness(10);
        filter: saturate(0) brightness(10)
    }
}

@media screen and (min-width: 769px) {
    .hover-c3bgcw:hover:before, .hover-c3bgcw:hover:after {
        -webkit-filter: none;
        filter: none
    }
}

.c4 {
    color: #FF9D00
}

.bgc4 {
    background-color: #FF9D00
}

@media screen and (min-width: 769px) {
    .hover-c4:hover {
        color: #FF9D00
    }
}

@media screen and (min-width: 769px) {
    .hover-bgc4:hover {
        background-color: #FF9D00
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc4:hover:before, .hover-cwbgc4:hover:after {
        -webkit-filter: saturate(0) brightness(10);
        filter: saturate(0) brightness(10)
    }
}

@media screen and (min-width: 769px) {
    .hover-c4bgcw:hover:before, .hover-c4bgcw:hover:after {
        -webkit-filter: none;
        filter: none
    }
}

.c1-dark1 {
    color: var(--c1-dark1)
}

.bgc1-dark1 {
    background-color: var(--c1-dark1)
}

@media screen and (min-width: 769px) {
    .hover-c1-dark1:hover {
        color: var(--c1-dark1)
    }
}

@media screen and (min-width: 769px) {
    .hover-bgc1-dark1:hover {
        background-color: var(--c1-dark1)
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc1-dark1:hover:before, .hover-cwbgc1-dark1:hover:after {
        -webkit-filter: saturate(0) brightness(10);
        filter: saturate(0) brightness(10)
    }
}

@media screen and (min-width: 769px) {
    .hover-c1-dark1bgcw:hover:before, .hover-c1-dark1bgcw:hover:after {
        -webkit-filter: none;
        filter: none
    }
}

.c1-dark2 {
    color: var(--c1-dark2)
}

.bgc1-dark2 {
    background-color: var(--c1-dark2)
}

@media screen and (min-width: 769px) {
    .hover-c1-dark2:hover {
        color: var(--c1-dark2)
    }
}

@media screen and (min-width: 769px) {
    .hover-bgc1-dark2:hover {
        background-color: var(--c1-dark2)
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc1-dark2:hover:before, .hover-cwbgc1-dark2:hover:after {
        -webkit-filter: saturate(0) brightness(10);
        filter: saturate(0) brightness(10)
    }
}

@media screen and (min-width: 769px) {
    .hover-c1-dark2bgcw:hover:before, .hover-c1-dark2bgcw:hover:after {
        -webkit-filter: none;
        filter: none
    }
}

.c1-lite1 {
    color: var(--c1-lite1)
}

.bgc1-lite1 {
    background-color: var(--c1-lite1)
}

@media screen and (min-width: 769px) {
    .hover-c1-lite1:hover {
        color: var(--c1-lite1)
    }
    .c1-lite1 {
        color: var(--c1-lite1);
        font-size: 16px;
    }
}

@media screen and (min-width: 769px) {
    .hover-bgc1-lite1:hover {
        background-color: var(--c1-lite1)
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc1-lite1:hover:before, .hover-cwbgc1-lite1:hover:after {
        -webkit-filter: saturate(0) brightness(10);
        filter: saturate(0) brightness(10)
    }
}

@media screen and (min-width: 769px) {
    .hover-c1-lite1bgcw:hover:before, .hover-c1-lite1bgcw:hover:after {
        -webkit-filter: none;
        filter: none
    }
}

.c2-dark1 {
    color: #5A5046
}

.bgc2-dark1 {
    background-color: #5A5046
}

@media screen and (min-width: 769px) {
    .hover-c2-dark1:hover {
        color: #5A5046
    }
}

@media screen and (min-width: 769px) {
    .hover-bgc2-dark1:hover {
        background-color: #5A5046
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc2-dark1:hover:before, .hover-cwbgc2-dark1:hover:after {
        -webkit-filter: saturate(0) brightness(10);
        filter: saturate(0) brightness(10)
    }
}

@media screen and (min-width: 769px) {
    .hover-c2-dark1bgcw:hover:before, .hover-c2-dark1bgcw:hover:after {
        -webkit-filter: none;
        filter: none
    }
}

.c2-lite1 {
    color: #6D6055
}

.bgc2-lite1 {
    background-color: #6D6055
}

@media screen and (min-width: 769px) {
    .hover-c2-lite1:hover {
        color: #6D6055
    }
}

@media screen and (min-width: 769px) {
    .hover-bgc2-lite1:hover {
        background-color: #6D6055
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc2-lite1:hover:before, .hover-cwbgc2-lite1:hover:after {
        -webkit-filter: saturate(0) brightness(10);
        filter: saturate(0) brightness(10)
    }
}

@media screen and (min-width: 769px) {
    .hover-c2-lite1bgcw:hover:before, .hover-c2-lite1bgcw:hover:after {
        -webkit-filter: none;
        filter: none
    }
}

.c2-lite2 {
    color: #AB9586
}

.bgc2-lite2 {
    background-color: #AB9586
}

@media screen and (min-width: 769px) {
    .hover-c2-lite2:hover {
        color: #AB9586
    }
}

@media screen and (min-width: 769px) {
    .hover-bgc2-lite2:hover {
        background-color: #AB9586
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc2-lite2:hover:before, .hover-cwbgc2-lite2:hover:after {
        -webkit-filter: saturate(0) brightness(10);
        filter: saturate(0) brightness(10)
    }
}

@media screen and (min-width: 769px) {
    .hover-c2-lite2bgcw:hover:before, .hover-c2-lite2bgcw:hover:after {
        -webkit-filter: none;
        filter: none
    }
}

.c-pink {
    color: #FDFAF7
}

.bgc-pink {
    background-color: #FDFAF7
}

@media screen and (min-width: 769px) {
    .hover-c-pink:hover {
        color: #FDFAF7
    }
}

@media screen and (min-width: 769px) {
    .hover-bgc-pink:hover {
        background-color: #FDFAF7
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc-pink:hover:before, .hover-cwbgc-pink:hover:after {
        -webkit-filter: saturate(0) brightness(10);
        filter: saturate(0) brightness(10)
    }
}

@media screen and (min-width: 769px) {
    .hover-c-pinkbgcw:hover:before, .hover-c-pinkbgcw:hover:after {
        -webkit-filter: none;
        filter: none
    }
}

.c-pink2 {
    color: #FAF2EB
}

.bgc-pink2 {
    background-color: #FAF2EB
}

@media screen and (min-width: 769px) {
    .hover-c-pink2:hover {
        color: #FAF2EB
    }
}

@media screen and (min-width: 769px) {
    .hover-bgc-pink2:hover {
        background-color: #FAF2EB
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc-pink2:hover:before, .hover-cwbgc-pink2:hover:after {
        -webkit-filter: saturate(0) brightness(10);
        filter: saturate(0) brightness(10)
    }
}

@media screen and (min-width: 769px) {
    .hover-c-pink2bgcw:hover:before, .hover-c-pink2bgcw:hover:after {
        -webkit-filter: none;
        filter: none
    }
}

.c-pink3 {
    color: #FBF4EF
}

.bgc-pink3 {
    background-color: #FBF4EF
}

@media screen and (min-width: 769px) {
    .hover-c-pink3:hover {
        color: #FBF4EF
    }
}

@media screen and (min-width: 769px) {
    .hover-bgc-pink3:hover {
        background-color: #FBF4EF
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc-pink3:hover:before, .hover-cwbgc-pink3:hover:after {
        -webkit-filter: saturate(0) brightness(10);
        filter: saturate(0) brightness(10)
    }
}

@media screen and (min-width: 769px) {
    .hover-c-pink3bgcw:hover:before, .hover-c-pink3bgcw:hover:after {
        -webkit-filter: none;
        filter: none
    }
}

.c-pink4 {
    color: #F9EFE6
}

.bgc-pink4 {
    background-color: #F9EFE6
}

@media screen and (min-width: 769px) {
    .hover-c-pink4:hover {
        color: #F9EFE6
    }
}

@media screen and (min-width: 769px) {
    .hover-bgc-pink4:hover {
        background-color: #F9EFE6
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc-pink4:hover:before, .hover-cwbgc-pink4:hover:after {
        -webkit-filter: saturate(0) brightness(10);
        filter: saturate(0) brightness(10)
    }
}

@media screen and (min-width: 769px) {
    .hover-c-pink4bgcw:hover:before, .hover-c-pink4bgcw:hover:after {
        -webkit-filter: none;
        filter: none
    }
}

.c-pink5 {
    color: #fde7da
}

.bgc-pink5 {
    background-color: #fde7da
}

@media screen and (min-width: 769px) {
    .hover-c-pink5:hover {
        color: #fde7da
    }
}

@media screen and (min-width: 769px) {
    .hover-bgc-pink5:hover {
        background-color: #fde7da
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc-pink5:hover:before, .hover-cwbgc-pink5:hover:after {
        -webkit-filter: saturate(0) brightness(10);
        filter: saturate(0) brightness(10)
    }
}

@media screen and (min-width: 769px) {
    .hover-c-pink5bgcw:hover:before, .hover-c-pink5bgcw:hover:after {
        -webkit-filter: none;
        filter: none
    }
}

.c-pink6 {
    color: var(--c1)
}

.bgc-pink6 {
    background-color: var(--c1)
}

@media screen and (min-width: 769px) {
    .hover-c-pink6:hover {
        color: #f0e7da
    }
}

@media screen and (min-width: 769px) {
    .hover-bgc-pink6:hover {
        background-color: #f0e7da
    }
}

@media screen and (min-width: 769px) {
    .hover-cwbgc-pink6:hover:before, .hover-cwbgc-pink6:hover:after {
        -webkit-filter: saturate(0) brightness(10);
        filter: saturate(0) brightness(10)
    }
}

@media screen and (min-width: 769px) {
    .hover-c-pink6bgcw:hover:before, .hover-c-pink6bgcw:hover:after {
        -webkit-filter: none;
        filter: none
    }
}

.black {
    color: #000
}

.white {
    color: #fff
}

.red {
    color: #E10004
}

.orange {
    color: #ED7900
}

.orange2 {
    color: #D9A300
}

.blue {
    color: #0872CD
}

.green {
    color: #76BD1D
}

.lite1 {
    color: #979AA2
}

.lite2 {
    color: #717171
}

.lite3 {
    color: #E3E6EA
}

.c33 {
    color: #333
}

.c66 {
    color: #666
}

.c88 {
    color: #888
}

.c99 {
    color: #999
}

.bgc-d5 {
    background-color: #d5d5d5
}

.bgc-pink-o {
    background-color: rgba(240, 231, 218, 0.3)
}

.bg-light1 {
    position: relative
}

.bg-light1:before {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    min-width: 80px;
    background: radial-gradient(50.5% 50.5% at 50% 56.68%, var(--c1-dark2) 0%, rgba(235, 250, 124, 0) 100%);
    -webkit-transform: scale(1.2, 1.1) translate(-50%, -50%);
    -ms-transform: scale(1.2, 1.1) translate(-50%, -50%);
    transform: scale(1.2, 1.1) translate(-50%, -50%);
    z-index: -1
}

@media screen and (min-width: 769px) {
    .ml-bgcw {
        background-color: #fff
    }
}

*:before, *:after {
    -webkit-transition: all .3s;
    transition: all .3s
}

#container, #content {
    position: relative;
    margin: 0 auto
}

#container {
    min-width: 320px
}

#container:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 0;
    padding: 0 0 20%;
    left: 0;
    top: 0;
}

#content {
    clear: both;
    z-index: 1
}

#mask-bg {
    opacity: 0;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    background: #000;
    overflow: hidden;
    z-index: 998;
    -webkit-transition: opacity .3s;
    transition: opacity .3s
}

#mask-bg.on {
    opacity: .9;
    height: 100%
}

.posr, [class^="bg-"] {
    position: relative
}

.over-hide {
    overflow: hidden
}

.figure {
    position: relative;
    display: block;
    -webkit-transition: all .5s;
    transition: all .5s
}

.figure img {
    display: block;
    margin: 0 auto;
    -webkit-transition: all .5s;
    transition: all .5s
}

.obj-cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    min-height: 100%
}

.obj-contain {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    -o-object-fit: contain;
    object-fit: contain
}

.bg-wave:before, .bg-wave:after {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    pointer-events: none
}

.bg-wave1:before, .bg-wave1:after, .bg-wave2:before, .bg-wave2:after, .bg-wave5:before, .bg-wave5:after {
    content: ''
}

.bg-wave1:before, .bg-wave2:before, .bg-wave5:before {
    top: 1px
}

.bg-wave1:after, .bg-wave2:after, .bg-wave5:after {
    top: -1px
}

.bg-wave1:before {
    padding: 0 0 8.333%;
    background-image: url(../images/wave-h2t.png)
}

.bg-wave1:after {
    padding: 0 0 12.5%;
    background-image: url(../images/wave-h2b.png)
}

.bg-wave2:before {
    padding: 0 0 8.333%;
    background-image: url(../images/wave-si1-t.png)
}

.bg-wave2:after {
    padding: 0 0 8.333%;
    background-image: url(../images/wave-si1-b.png)
}

.bg-wave31, .bg-wave32 {
    position: relative
}

.bg-wave31:before, .bg-wave31:after, .bg-wave32:before, .bg-wave32:after {
    content: '';
    position: absolute;
    left: 0;
    z-index: -1
}

.bg-wave31:before {
    bottom: 0;
    margin-bottom: -1px;
    padding: 0 0 12.5%;
    background-image: url(../images/wave-ci.png)
}

.bg-wave32 {
    background-color: #FBF4EF
}

.bg-wave32:after {
    padding: 0 0 6.26%;
    top: 100%;
    margin-top: -1px;
    background-color: #FBF4EF
}

.bg-wave4:after {
    content: '';
    padding: 0 0 12.5%;
    background-image: url(../images/wave-lgbtq.png)
}

.bg-wave5:before {
    padding: 0 0 12.5%;
    background-image: url(../images/wave-imt.png)
}

.bg-wave5:after {
    padding: 0 0 12.5%;
    background-image: url(../images/wave-imb.png)
}

.bg-trans {
    position: relative;
    z-index: 0
}

.bg-trans:before {
    content: '';
    display: block;
    position: absolute;
    right: 10px;
    top: 20px;
    width: 100%;
    height: 400px;
    background-image: url(../images/bg-im.svg);
    background-position: right bottom;
    z-index: -1;
    pointer-events: none
}

.rounded-0 {
    border-radius: 0
}

.rounded-s {
    border-radius: 3px
}

.rounded {
    border-radius: 5px
}

.rounded-pill {
    border-radius: 30px
}

.rounded-10 {
    border-radius: 10px
}

.rounded-20 {
    border-radius: 20px
}

.circle {
    border-radius: 50%
}

.circle2 {
    border-radius: 260px
}

.h-100 {
    height: 100%
}

.mh-100 {
    min-height: 100%
}

.shadow, .bd-shadow {
    position: relative;
    -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
    z-index: 1
}

.shadow1 {
    -webkit-box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.08)
}

.shadow2 {
    -webkit-box-shadow: 0 0 4px rgba(240, 231, 218, 0.65);
    box-shadow: 0 0 4px rgba(240, 231, 218, 0.65)
}

.t-shadow {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.3)
}

.bd-shadow {
    border: 1px solid #eee
}

.view-pc, .d-pc {
    display: none
}

.link {
    text-decoration: underline
}

.cursor {
    cursor: pointer
}

.sticky {
    position: sticky;
    left: 0;
    top: 0
}

@media screen and (min-width: 769px) {
    .link-arrow:hover .icon:before {
        border-color: var(--c1)
    }
}

.link-note {
    display: inline-block;
    text-indent: -33px;
    padding: 0 0 0 33px
}

.link-note:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 28px;
    height: 28px;
    margin: -4px 5px 0 0;
    background-image: url(../images/svg/icon-note02.svg)
}

.dash-b01:after {
    content: '';
    display: block;
    width: 1px;
    height: 40px;
    background: #e5e5e5;
    margin: 15px auto
}

.bdb1-cf0 {
    border-bottom: 1px solid #F0E7DA
}

.bdb1-c1 {
    border-bottom: 1px solid var(--c1)
}

.bdb1-ce9 {
    border-bottom: 1px solid #e9e9e9
}

.bdb1-c1o {
    border-bottom: 1px solid rgba(159, 172, 69, 0.33)
}

.bdb1-cp1 {
    border-bottom: 1px solid #F0D9C4
}

.bdt1-cee {
    border-top: 1px solid #eee
}

.bdt1-pink {
    border-top: 1px solid #FAF2EB
}

.bd1-pink {
    border: 1px solid #FAF2EB
}

.bdt4 {
    border-top: 4px solid var(--c1)
}

.bdt1 {
    border-top: 1px solid var(--c1)
}

.bdt1-c2:before {
    content: '';
    display: block;
    width: 90px;
    height: 1px;
    margin: 0 auto 25px;
    background-color: #A0AC45
}

.bdl4 {
    border-left: 4px solid var(--c1-dark1);
    padding: 5px 0 5px 10px
}

.bd2-cw {
    border: 2px solid #fff
}

.bd2-c1d2 {
    border: 2px solid var(--c1-dark1)
}

.bd2-c2 {
    border: 2px solid #948876
}

.diagonal-line {
    position: relative;
    z-index: 0
}

.diagonal-line:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    background-image: url(../images/svg/line-diag.svg);
    opacity: .5;
    z-index: -1
}

@media screen and (min-width: 768px) {
    .bdbc1:after, .bdbc1-c1:after, .bdbc1-c2:after, .bdbcae:after {
        width: 58px
    }

    .bdbc1:after, .bdbc1:after, .bdbcae:after {
        margin-left: 2px
    }

    .bdbc1-c1:after {
        margin-top: 30px
    }

    .bdbc2 {
        padding: 0 0 20px
    }

    .bdbc2:after {
        width: 65px
    }

    .bdl4 {
        padding-left: 15px
    }

    .hr1 {
        margin: 50px 0
    }

    .link-refresh:before {
        width: 22px;
        height: 22px
    }

    .pos1 {
        position: relative;
        margin-top: -100px;
        z-index: 0
    }
}

@media screen and (min-width: 769px) {
    #container {
        min-width: 1024px
    }

    .view-pc, .d-pc {
        display: block
    }

    .view-mb, .d-mobile {
        display: none
    }

    .pos1 {
        margin-top: -180px
    }

    .bg-wave4 {
        background-color: #fff
    }

    .bg-trans:before {
        height: 500px;
        right: 11%;
        top: -15%
    }
}

.swiper-sec {
    position: relative;
    overflow: hidden
}

.swiper-sec a {
    text-decoration: none
}

.swiper-sec .slide {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden
}

.swiper-sec .swiper-slide {
    height: auto
}

.swiper-sec .swiper-pagination {
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 100%
}

.swiper-sec .swiper-pagination-bullet {
    position: relative;
    filter: alpha(opacity=100);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    opacity: 1;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    background: #353F45;
    border: 1px solid #fff;
    -webkit-transition: all .3s;
    transition: all .3s
}

.swiper-sec .swiper-pagination-bullet.on {
    background: #fff;
    border-color: transparent
}

.swiper-sec .swiper-button-disabled {
    opacity: .4
}

.sw-arrow1 .sw-btn {
    border-radius: 50%;
    font-size: 0;
    width: 50px;
    height: 50px;
    margin: -70px 0 0;
    background: var(--c1);
    background-size: auto;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.18);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.18);
    -webkit-transition: all .3s;
    transition: all .3s
}

.sw-arrow1 .sw-btn:after {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: solid #6D6055;
    padding: 4px
}

@media screen and (min-width: 769px) {
    .sw-arrow1 .sw-btn:hover {
        background-color: #6D6055
    }

    .sw-arrow1 .sw-btn:hover:after {
        border-color: var(--c1)
    }
}

.sw-arrow1 .swiper-button-prev {
    left: 10px
}

.sw-arrow1 .swiper-button-prev:after {
    margin: 0 0 0 2px;
    border-width: 2px 0 0 2px;
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    -ms-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg)
}

.sw-arrow1 .swiper-button-next {
    right: 10px
}

.sw-arrow1 .swiper-button-next:after {
    margin: 0 0 0 -2px;
    border-width: 0 2px 2px 0;
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    -ms-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg)
}

.sw1 .swiper-slide {
    height: auto
}

.sw1 .swiper-slide-active .t-shadow {
    -webkit-animation: fadeInUp 1s;
    animation: fadeInUp 1s
}

.sw1 .swiper-slide-active .btn {
    -webkit-animation: fadeInDown 1s;
    animation: fadeInDown 1s
}

.sw1 .swiper-pagination-bullet {
    position: relative;
    filter: alpha(opacity=100);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    opacity: 1;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    background: #fff
}

.sw1 .swiper-pagination-bullet.on {
    border-radius: 30px;
    width: 60px
}

.sw11 {
    z-index: -1
}

.sw4-1 .slide {
    padding: 5px 10px 10px
}

.sw4-1 .sw-btn2 {
    top: 40%
}

.sw4-1 .swiper-pagination {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto
}

.sw4-1 .swiper-scrollbar {
    position: relative;
    height: 5px
}

.sw4-1 .swiper-scrollbar-drag {
    background-color: var(--c1-dark1)
}

@media screen and (min-width: 576px) {
    .sw4-1 .swiper-slide {
        width: 49.99999%
    }
}

@media screen and (min-width: 641px) {
    .sw1 .swiper-pagination .swiper-pagination-bullet {
        margin: 0 10px
    }
}

@media screen and (min-width: 768px) {
    .sw-arrow1 .sw-btn {
        width: 60px;
        height: 60px
    }
}

@media screen and (min-width: 769px) {
    .sw4-1 .swiper-slide {
        width: 33.33333%
    }
}

@media screen and (min-width: 1200px) {
    .sw-arrow1 .sw-btn {
        width: 70px;
        height: 70px
    }
}

@media screen and (min-width: 1400px) {
    .sw4-1 .swiper-slide {
        width: 24.99999%
    }
}

.api-wrap, .media, .api-map {
    position: relative;
    height: 0;
    overflow: hidden
}

.api-wrap iframe, .api-wrap object, .api-wrap embed, .api-wrap video, .media iframe, .media object, .media embed, .media video, .api-map iframe, .api-map object, .api-map embed, .api-map video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.api01, .api-map, .media {
    padding: 0 0 56.25%
}

.snap-container {
    position: relative
}

.snap01 .snap-item {
    overflow: hidden
}

.snap01 .snap-i1 {
    margin-bottom: 40px
}

.snap01 .bd-title01 {
    margin: 0 auto 20px
}

.tab-item {
    display: none
}

.tab-item.on {
    display: block;
    -webkit-animation: fadeInRight .5s;
    animation: fadeInRight .5s
}

@media screen and (min-width: 640px) {
    .snap01 .bd-title01 {
        text-align: left
    }

    .snap01 .bd-title01:after {
        margin: 10px 0 0
    }
}

@media screen and (min-width: 768px) {
    .media {
        padding: 0;
        height: 500px
    }

    .api-map {
        padding: 0;
        height: 100%
    }
}

@media screen and (min-width: 769px) {
    .snap01 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 0
    }

    .snap01 .bd-title01 {
        text-align: center
    }

    .snap01 .bd-title01:after {
        margin: 10px auto 0
    }

    .snap01 .snap-scroll {
        position: relative;
        padding: 0 20px
    }

    .snap01 .fixed {
        position: fixed;
        z-index: 999
    }

    .snap01 .snap-i1 {
        width: 70%;
        padding: 0 20px;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }

    .snap01 .snap-i2 {
        width: 30%
    }

    .snap01 .snap-i2, .snap01 .snap-i2 .fixed {
        max-width: 400px
    }
}

@media screen and (min-width: 1200px) {
    .snap01 .snap-i1 .snap-inner {
        max-width: 860px;
        padding-right: 40px
    }
}

.social-wrap {
    overflow: hidden
}

.social-wrap ul {
    margin: 0 -5px
}

.social-wrap li {
    display: inline-block;
    vertical-align: middle;
    padding: 5px
}

.social-wrap li, .social-wrap a {
    position: relative;
    overflow: hidden
}

.social-wrap a, .social-wrap .btn {
    font-size: 0;
    text-align: left;
    text-indent: -999px;
    overflow: hidden;
    border-radius: 50%;
    position: relative;
    display: block;
    width: 36px;
    height: 36px;
    outline: 0
}

.social-wrap a:before, .social-wrap a:after, .social-wrap .btn:before, .social-wrap .btn:after {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    content: '';
    display: block;
    width: 60%;
    height: 60%
}

.social-wrap a:after, .social-wrap .btn:after {
    filter: alpha(opacity=0);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    opacity: 0
}

.social-wrap .label {
    padding-right: 10px
}

.social1 a, .social1 .btn, .social3 a, .social3 .btn, .social4 a, .social4 .btn {
    border-radius: 50%
}

@media screen and (min-width: 769px) {
    .social1 a:hover, .social1 .btn:hover, .social3 a:hover, .social3 .btn:hover, .social4 a:hover, .social4 .btn:hover {
        border-radius: 5px
    }
}

.social1 .icon-mail:before, .social3 .icon-mail:before, .social4 .icon-mail:before {
    width: 60%;
    height: 60%
}

@media screen and (min-width: 769px) {
    .social1 .icon-mail:hover, .social3 .icon-mail:hover, .social4 .icon-mail:hover {
        background: #2BB3C8
    }
}

@media screen and (min-width: 769px) {
    .social1 .icon-messenger:hover, .social3 .icon-messenger:hover, .social4 .icon-messenger:hover {
        background: #26C9FF
    }
}

@media screen and (min-width: 769px) {
    .social1 .icon-facebook:hover, .social3 .icon-facebook:hover, .social4 .icon-facebook:hover {
        background: #3B5998
    }
}

@media screen and (min-width: 769px) {
    .social1 .icon-instagram:hover, .social3 .icon-instagram:hover, .social4 .icon-instagram:hover {
        background: radial-gradient(circle at 30% 107%, #fdf497 0, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%)
    }
}

@media screen and (min-width: 769px) {
    .social1 .btn-copy:hover, .social3 .btn-copy:hover, .social4 .btn-copy:hover {
        background: #EBEBEB
    }
}

@media screen and (min-width: 769px) {
    .social1 .icon-in:hover, .social3 .icon-in:hover, .social4 .icon-in:hover {
        background: #007BB5
    }
}

@media screen and (min-width: 769px) {
    .social1 .icon-line:hover, .social3 .icon-line:hover, .social4 .icon-line:hover {
        background: #00B900
    }
}

@media screen and (min-width: 769px) {
    .social1 .icon-pinterest:hover, .social3 .icon-pinterest:hover, .social4 .icon-pinterest:hover {
        background: #e60023
    }
}

@media screen and (min-width: 769px) {
    .social1 .icon-plurk:hover, .social3 .icon-plurk:hover, .social4 .icon-plurk:hover {
        background: #ff574d
    }
}

@media screen and (min-width: 769px) {
    .social1 .icon-qq:hover, .social3 .icon-qq:hover, .social4 .icon-qq:hover {
        background: #000
    }
}

@media screen and (min-width: 769px) {
    .social1 .icon-skype:hover, .social3 .icon-skype:hover, .social4 .icon-skype:hover {
        background: #01A7FF
    }
}

@media screen and (min-width: 769px) {
    .social1 .icon-sina:hover, .social3 .icon-sina:hover, .social4 .icon-sina:hover {
        background: #E6162D
    }
}

@media screen and (min-width: 769px) {
    .social1 .icon-twitter:hover, .social3 .icon-twitter:hover, .social4 .icon-twitter:hover {
        background: #1d9bf0
    }
}

@media screen and (min-width: 769px) {
    .social1 .icon-ubereat:hover, .social3 .icon-ubereat:hover, .social4 .icon-ubereat:hover {
        background: #85B200
    }
}

@media screen and (min-width: 769px) {
    .social1 .icon-whatsapp:hover, .social3 .icon-whatsapp:hover, .social4 .icon-whatsapp:hover {
        background: #00e676
    }
}

@media screen and (min-width: 769px) {
    .social1 .icon-wechat:hover, .social3 .icon-wechat:hover, .social4 .icon-wechat:hover {
        background: #00C300
    }
}

@media screen and (min-width: 769px) {
    .social1 .icon-youtube2:hover, .social3 .icon-youtube2:hover, .social4 .icon-youtube2:hover {
        background: #EC162C
    }
}

@media screen and (min-width: 769px) {
    .social1 .icon-youtube:hover, .social3 .icon-youtube:hover, .social4 .icon-youtube:hover {
        background: #EC162C
    }
}

@media screen and (min-width: 769px) {
    .social1 .icon-tel:hover, .social3 .icon-tel:hover, .social4 .icon-tel:hover {
        background: #056CAE
    }
}

@media screen and (min-width: 769px) {
    .social1 .icon-social:hover, .social3 .icon-social:hover, .social4 .icon-social:hover {
        background: #CADE3D
    }
}

.social2 a, .social2 .btn {
    border-radius: 50%
}

@media screen and (min-width: 769px) {
    .social2 a:hover, .social2 .btn:hover {
        background-color: #6C5F52
    }
}

.social2 a:before, .social2 a:after, .social2 .btn:before, .social2 .btn:after {
    width: 60%;
    height: 60%
}

.social2 .icon-mail {
    background: #2BB3C8
}

.social2 .icon-mail:before {
    width: 45%;
    height: 45%
}

.social2 .icon-messenger {
    background: #26C9FF
}

.social2 .icon-facebook {
    background: #3A559F
}

.social2 .icon-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%)
}

.social2 .btn-copy {
    background: #EBEBEB
}

.social2 .icon-in {
    background: #007BB5
}

.social2 .icon-line {
    background: #00B900
}

.social2 .icon-pinterest {
    background: #e60023
}

.social2 .icon-plurk {
    background: #ff574d
}

.social2 .icon-qq {
    background: #000
}

.social2 .icon-skype {
    background: #01A7FF
}

.social2 .icon-sina {
    background: #E6162D
}

.social2 .icon-twitter {
    background: #1DA1F2
}

.social2 .icon-ubereat {
    background: #85B200
}

.social2 .icon-whatsapp {
    background: #00e676
}

.social2 .icon-wechat {
    background: #00C300
}

.social2 .icon-youtube2 {
    background: #EC162C
}

.social2 .icon-youtube {
    background: #EC162C
}

.social2 .icon-youtube:before {
    width: 55%;
    height: 55%
}

.social2 .icon-tel {
    background: #056CAE
}

.social2 .icon-share {
    background: #CADE3D
}

.social3 a, .social3 .btn {
    background: #000
}

.social4 ul {
    margin: 0 -2px
}

.social4 li {
    display: inline-block;
    vertical-align: middle;
    padding: 5px 2px
}

@media screen and (min-width: 769px) {
    .social4 a:hover:before, .social4 .btn:hover:before {
        -webkit-filter: saturate(0) brightness(10);
        filter: saturate(0) brightness(10)
    }
}

@media screen and (min-width: 768px) {
    .social3 a, .social3 .btn {
        width: 44px;
        height: 44px
    }
}

.tb-wrap, .table-wrap {
    overflow-x: auto
}

.tb-wrap table, .table-wrap table {
    border-collapse: collapse
}

.tb-wrap th, .tb-wrap td, .table-wrap th, .table-wrap td {
    padding: 8px 5px
}

.tb-wrap th, .table-wrap th {
    font-weight: 700
}

.tb-wrap [align="left"], .table-wrap [align="left"] {
    text-align: left
}

.tb-wrap [align="right"], .table-wrap [align="right"] {
    text-align: right
}

.tb-wrap [align="center"], .table-wrap [align="center"] {
    text-align: center
}

.tb-js table {
    border-top: 1px solid #ddd
}

.tb-js thead, .tb-js th {
    display: none
}

.tb-js thead tr, .tb-js thead th, .tb-js th tr, .tb-js th th {
    display: none
}

.tb-js tr {
    display: block;
    position: relative;
    border-bottom: 1px solid #ddd;
    padding: 5px 0
}

.tb-js td {
    display: block;
    text-align: left;
    padding: 5px 10px
}

.tb-js td:before {
    display: block;
    content: attr(data-txt);
    font-size: 12px;
    font-size: .75rem;
    font-weight: bold;
    color: var(--c1);
    padding: 2px 10px 0 0
}

.tb-base caption {
    margin: 0;
    font-weight: bold;
    color: black
}

.tb-base thead {
    border-width: 3px 0 1px;
    border-style: solid;
    border-color: var(--c1) transparent #ececec
}

.tb-base th, .tb-base td {
    padding: 10px;
    border: solid #ececec;
    border-width: 0 0 1px
}

.tb-base td:first-child {
    color: var(--c1);
    text-align: center;
    min-width: 100px
}

.tb-base tr:nth-child(even) td {
    background: #f8f8f8
}

.tb-corp th {
    width: 1px;
    white-space: nowrap;
    padding: 7px 10px 6px 0
}

.tb-corp th:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 15px;
    background-color: rgba(255, 255, 255, 0.2);
    margin-left: 10px
}

.tb-corp td {
    padding: 7px 0
}

.even-bg tr:nth-child(even) td {
    background: #F6F8FA
}

.tb1, .tb11, .tb12, .tb13, .tb-calendar {
    padding-bottom: 10px
}

.tb1 img, .tb11 img, .tb12 img, .tb13 img, .tb-calendar img {
    display: block;
    max-width: none;
    margin: 0 auto
}

.tb1 table, .tb11 table, .tb12 table, .tb13 table, .tb-calendar table {
    min-width: 100%
}

.tb1 tbody, .tb11 tbody, .tb12 tbody, .tb13 tbody, .tb-calendar tbody {
    padding: 0 5px
}

.tb1 th, .tb11 th, .tb12 th, .tb13 th, .tb-calendar th {
    background-color: var(--c1)
}

.tb1 th:first-child, .tb11 th:first-child, .tb12 th:first-child, .tb13 th:first-child, .tb-calendar th:first-child {
    border-radius: 10px 0 0 0
}

.tb1 th:last-child, .tb11 th:last-child, .tb12 th:last-child, .tb13 th:last-child, .tb-calendar th:last-child {
    border-radius: 0 10px 0 0
}

.tb1 th:first-child {
    width: 1px
}

.tb1 td {
    width: 5%;
    padding: 15px 2px;
    height: 80px;
    border-bottom: 1px solid rgba(240, 231, 218, 0.5);
    background-color: #fff
}

.tb1 td:first-child {
    padding: 15px 10px
}

.tb11 th, .tb12 th, .tb13 th {
    font-size: 18px;
    font-size: 1.125rem;
    text-align: center
}

@media screen and (min-width: 769px) {
    .tb11 th, .tb12 th, .tb13 th {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.tb11 td, .tb12 td, .tb13 td {
    padding: 15px 20px;
    border: 1px solid #F9ECE6
}

.tb11 ul, .tb12 ul, .tb13 ul {
    margin: 0;
    padding: 0
}

.tb11 ul li, .tb12 ul li, .tb13 ul li {
    position: relative;
    margin: 0 0 10px;
    padding: 0 0 0 20px;
    line-height: 1.4
}

.tb11 ul li:before, .tb12 ul li:before, .tb13 ul li:before {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    position: absolute;
    left: 5px;
    top: 10px;
    background-color: var(--c1)
}

.tb11 td, .tb13 td {
    background-color: #fff
}

.tb11 tbody tr:nth-child(even) td, .tb13 tbody tr:nth-child(even) td {
    background-color: #FEFCFB
}

.tb11 td:first-child {
    font-size: 18px;
    font-size: 1.125rem;
    text-align: center
}

@media screen and (min-width: 769px) {
    .tb11 td:first-child {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.tb3 table {
    width: 100%
}

.tb3 th {
    min-width: 180px;
    color: #fff;
    background: #6C5F52;
    font-weight: 300
}

.tb3 th, .tb3 td {
    padding: 10px 20px;
    border: solid #ddd;
    border-width: 1px;
    vertical-align: middle
}

.tb3 th:first-child, .tb3 td:first-child {
    text-align: left
}

.tb3 tbody tr:nth-child(even) {
    background-color: #f7f7f7
}

.tb4 {
    color: #EAC4A2
}

.tb4 table {
    border-collapse: separate;
    border-spacing: 1px;
    border: 1px solid #F0D9C4
}

.tb4 th {
    color: #6C5F52;
    background-color: #FAF1E9
}

.tb4 td {
    border: 1px solid #F0D9C4;
    border-width: 1px 0 0 1px;
    background-color: #fff
}

.tb4 thead {
    color: #6C5F52
}

.tb4 thead td {
    border-width: 0 0 0 1px;
    white-space: nowrap
}

.tb4 tbody td {
    height: 80px;
    padding: 20px;
    border: 1px solid #F0D9C4;
    border-width: 1px 0 0 1px
}

.tb4 span, .tb4 small {
    display: inline-block;
    vertical-align: middle
}

.tb4 small {
    margin: 0 0 0 5px
}

.tb-calendar thead {
    display: none
}

.tb-calendar th {
    width: 15%;
    white-space: nowrap
}

.tb-calendar th:first-child {
    width: 1px
}

.tb-calendar td {
    border: 1px solid #fff;
    padding: 0;
    white-space: nowrap;
    -webkit-box-flex: 1;
    -ms-flex: 1 50%;
    flex: 1 50%;
    max-width: 50%;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    min-height: 100%
}

.tb-calendar td:first-child, .tb-calendar td:last-child {
    -webkit-box-flex: 1;
    -ms-flex: 1 100%;
    flex: 1 100%;
    max-width: 100%
}

.tb-calendar tr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.tb-calendar tr:nth-child(2) td:first-child {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.tb-calendar [data-text]:before {
    content: attr(data-text);
    display: block;
    margin: 0 auto 10px
}

.tb-calendar .inner {
    position: relative;
    padding: 10px 15px
}

.tb-calendar2 thead, .tb-calendar3 thead {
    display: none
}

.tb-calendar2 thead td, .tb-calendar3 thead td {
    white-space: nowrap
}

.tb-calendar2 tr, .tb-calendar3 tr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 10px
}

.tb-calendar2 th, .tb-calendar2 td, .tb-calendar3 th, .tb-calendar3 td {
    border: 1px solid #F0D9C4
}

.tb-calendar2 th, .tb-calendar3 th {
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1 100%;
    flex: 1 100%;
    background-color: #FAF1E9
}

.tb-calendar2 td, .tb-calendar3 td {
    border: 1px solid #F0D9C4;
    border-width: 0 1px 1px;
    background-color: #fff
}

.tb-calendar2 [data-text]:before, .tb-calendar3 [data-text]:before {
    content: attr(data-text);
    display: block;
    margin: 0;
    padding: 5px
}

.tb-calendar2 span, .tb-calendar2 small, .tb-calendar3 span, .tb-calendar3 small {
    display: inline-block;
    vertical-align: middle
}

.tb-calendar2 small, .tb-calendar3 small {
    margin: 0 0 0 5px
}

.tb-calendar2 .btn, .tb-calendar3 .btn {
    margin: 0
}

.tb-calendar2 {
    color: #EAC4A2
}

.tb-calendar2 th {
    background-color: #FAF1E9
}

.tb-calendar2 td {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 1;
    -ms-flex: 1 50%;
    flex: 1 50%
}

.tb-calendar2 tbody th {
    color: #6C5F52
}

.tb-calendar3 [data-text]:before {
    color: #6C5F52
}

.tb-calendar3 th {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.tb-calendar3 td {
    -webkit-box-flex: 0;
    -ms-flex: 0 100%;
    flex: 0 100%
}

.tb-calendar3 tbody td {
    color: #EAC4A2
}

.tb-calendar3 .btn {
    min-width: 100px;
    padding: 5px 20px
}

@media screen and (min-width: 576px) {
    .tb01 th, .tb01 td {
        padding: 10px 20px
    }

    .tb-calendar td {
        -webkit-box-flex: 1;
        -ms-flex: 1 33.33333%;
        flex: 1 33.33333%
    }

    .tb-calendar tr:nth-child(2) td:first-child {
        -webkit-box-flex: 1;
        -ms-flex: 1 33.33333%;
        flex: 1 33.33333%
    }

    .tb-calendar3 td {
        -webkit-box-flex: 1;
        -ms-flex: 1 33.33333%;
        flex: 1 33.33333%
    }
}

@media screen and (min-width: 768px) {
    .tb-wrap table {
        min-width: 100%
    }

    .tb-wrap .w-auto {
        min-width: 0
    }

    .tb-calendar .badge2 {
        border-radius: 0 0 0 10px;
        position: absolute;
        right: 0;
        top: 0
    }

    .tb-calendar3 tr {
        display: table-row;
        margin: 0
    }

    .tb-calendar3 th, .tb-calendar3 td {
        display: table-cell;
        border: 1px solid #F0D9C4
    }

    .tb-calendar3 [data-text]:before {
        content: none
    }

    .tb-calendar3 thead {
        display: table-header-group
    }

    .tb-calendar3 tbody th {
        background-color: #fff
    }

    .tb-calendar3 tbody td {
        padding: 5px 10px
    }
}

@media screen and (min-width: 769px) {
    .tb-calendar thead {
        display: table-header-group
    }

    .tb-calendar td {
        display: table-cell;
        width: auto
    }

    .tb-calendar td:first-child, .tb-calendar td:last-child {
        width: 1px
    }

    .tb-calendar tr {
        display: table-row
    }

    .tb-calendar tbody:nth-child(2) td:first-child {
        width: auto
    }

    .tb-calendar [data-text]:before {
        content: none
    }

    .tb-calendar .inner {
        padding: 15px 10px 10px
    }

    .tb-calendar .badge2 {
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9)
    }

    .tb-calendar2 table {
        border-collapse: separate;
        border-spacing: 0;
        border: 1px solid #F0D9C4
    }

    .tb-calendar2 tr {
        display: table-row
    }

    .tb-calendar2 th, .tb-calendar2 td {
        display: table-cell
    }

    .tb-calendar2 th {
        border: 0
    }

    .tb-calendar2 td {
        border-width: 1px 0 0 1px
    }

    .tb-calendar2 [data-text]:before {
        content: none
    }

    .tb-calendar2 thead {
        display: table-header-group
    }

    .tb-calendar2 thead td {
        border-width: 0 0 0 1px
    }

    .tb-calendar2 tbody th {
        border-top: 1px solid #fff
    }

    .tb-calendar2 tbody td {
        height: 100px;
        padding: 20px;
        border: 1px solid #F0D9C4;
        border-width: 1px 0 0 1px
    }
}

@media screen and (min-width: 1200px) {
    .tb-calendar3 th, .tb-calendar3 td {
        width: 25%
    }

    .tb-calendar3 th:first-child, .tb-calendar3 td:first-child {
        width: 12%;
        white-space: nowrap
    }
}

.path {
    padding: 10px 20px
}

.path ul {
    margin: 0 -5px
}

.path li {
    position: relative;
    padding: 5px 5px 5px 20px
}

.path li:before {
    font-size: 12px;
    font-size: .75rem;
    content: '>';
    display: block;
    position: absolute;
    text-align: center;
    width: 15px;
    left: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%) scale(0.8);
    -ms-transform: translate(0, -50%) scale(0.8);
    transform: translate(0, -50%) scale(0.8)
}

@media screen and (min-width: 769px) {
    .path li:before {
        font-size: 14px;
        font-size: .875rem
    }
}

.path li:first-child {
    padding: 5px
}

.path li:first-child:before {
    content: none
}

@media screen and (min-width: 769px) {
    .path a:hover {
        color: var(--c1-dark1)
    }
}

.path2 {
    position: static
}

@media screen and (min-width: 769px) {
    .path {
        padding: 10px 50px
    }
}

.badge {
    display: inline-block;
    padding: 0 19px
}

.badge2 {
    border-radius: 5px;
    font-size: 12px;
    font-size: .75rem;
    display: inline-block;
    padding: 2px 5px;
    color: #fff;
    background-color: #ED7900
}

.tp-gdpr {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%
}

.tp-gdpr p:last-child {
    margin: 0
}

.tp-form1 .form-ctrl, .tp-form12 .form-ctrl {
    border-radius: 5px 0 0 5px;
    padding: 14px 15px;
    height: 100%
}

.tp-form1 .btn, .tp-form12 .btn {
    border-radius: 0 5px 5px 0;
    height: 100%
}

.tp-form1 .btn {
    width: 50px
}

@media screen and (min-width: 769px) {
    .tp1:hover {
        color: var(--c1)
    }

    .tp1:hover p {
        text-decoration: underline
    }
}

.tp2 {
    overflow: hidden
}

.tp2 img {
    position: relative;
    z-index: -1
}

.tp2 .figure {
    position: relative;
    z-index: 0
}

.tp2 .rounded-num {
    position: absolute;
    left: -24%;
    bottom: -25%;
    width: 58%;
    height: 58%;
    padding: 7% 11%;
    text-align: right;
    z-index: 1
}

@media screen and (min-width: 769px) {
    .tp2:hover img {
        -webkit-transform: scale(1.03);
        -ms-transform: scale(1.03);
        transform: scale(1.03)
    }
}

.tp3 {
    position: relative;
    z-index: 0
}

.tp3 .icon {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0
}

.tp3 .figure {
    position: relative;
    z-index: 0
}

.tp3 .figure:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 0;
    padding: 0 0 25%;
    left: 0;
    bottom: -1px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(125, 185, 232, 0)), to(var(--c1-dark2)));
    background: linear-gradient(to bottom, rgba(125, 185, 232, 0) 0%, var(--c1-dark2) 100%);
    z-index: 1
}

.tp3 .text {
    position: relative;
    margin-top: -20px;
    z-index: 3
}

.tp3:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: '';
    display: none;
    background-color: #6D6055;
    z-index: -1
}

@media screen and (min-width: 769px) {
    .tp3:hover {
        color: #f0e7da
    }

    .tp3:hover .title {
        color: #f0e7da
    }

    .tp3:hover .icon {
        opacity: 1
    }

    .tp3:hover .bg {
        display: none
    }

    .tp3:hover .figure:after {
        display: none
    }

    .tp3:hover:before {
        display: block
    }
}

@media screen and (min-width: 769px) {
    .tp4:hover, .tp41:hover {
        background-color: #f0e7da
    }

    .tp4:hover img, .tp41:hover img {
        -webkit-transform: scale(1.03);
        -ms-transform: scale(1.03);
        transform: scale(1.03)
    }
}

@media screen and (min-width: 769px) {
    .tp6:hover {
        color: var(--c1)
    }

    .tp6:hover img {
        -webkit-transform: scale(1.03);
        -ms-transform: scale(1.03);
        transform: scale(1.03)
    }
}

.tp7 {
    border: 1px solid #FAF2EB;
    border-width: 0 0 1px
}

.tp7:first-child {
    border-width: 1px 0
}

@media screen and (min-width: 769px) {
    .tp7:hover {
        color: var(--c1);
        background-color: #FAF2EB
    }
}

.sec-bg1 {
    position: relative;
    z-index: 0
}

.sec-bg1:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    max-width: 1120px;
    position: absolute;
    right: 0;
    top: 0;
    background-color: rgba(250, 242, 235, 0.7);
    z-index: -1
}

.tp-bg {
    position: relative;
    z-index: 0
}

.tp-bg .obj-cover {
    border-radius: 15px;
    z-index: -1
}

.tp-bg .bg {
    border-radius: 15px;
    overflow: hidden
}

.tp-bg12 .tp-s1 {
    z-index: 1
}

.tp-bg12 .tp-s2:before {
    border-radius: 30px;
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 100px;
    width: 100%;
    height: 100%;
    -webkit-transition: none;
    transition: none;
    background-color: #fff
}

.tp-tg1 .toggle-btn {
    padding: 10px 50px 10px 10px
}

.tp-tg1 .ans {
    padding: 20px 10px 10px
}

.tp-tg1 .tag2 {
    -webkit-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    transform: translate(0, -10px)
}

.tp-tg1.on .d-none {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.tp-rounded1 .t-label {
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.tp-num1 {
    position: relative
}

.tp-num1 .circle {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 28px;
    height: 28px;
    line-height: 28px;
    margin-bottom: -14px;
    z-index: 1;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0)
}

.tp-select1 {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0 none;
    position: relative;
    padding-right: 30px;
    background: url(../images/svg/arrow-down2.svg) right center no-repeat;
    background-size: 22px auto
}

.tp-select1 option {
    font-size: 16px;
    font-size: 1rem;
    padding: 5px
}

@media screen and (min-width: 769px) {
    .tp-select1 option {
        font-size: 18px;
        font-size: 1.125rem
    }
}

@media screen and (min-width: 769px) {
    .tp-select1:hover {
        border: 0 none;
        -webkit-box-shadow: none;
        box-shadow: none;
        background-image: url(../images/svg/arrow-down22.svg)
    }
}

.tp-radio {
    position: relative;
    display: block;
    overflow: hidden
}

.tp-radio1 {
    min-width: 200px
}

.tp-radio1 .form-text {
    border-radius: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 5px;
    background-color: #FAF2EB
}

.tp-radio1 :checked + .form-text {
    background-color: var(--c1)
}

.tp-radio2, .tp-radio22 {
    padding: 2px 5px
}

.tp-radio2 .form-text, .tp-radio22 .form-text {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 0 0 0 35px
}

.tp-radio2 .form-text:before, .tp-radio2 .form-text:after, .tp-radio22 .form-text:before, .tp-radio22 .form-text:after {
    content: '';
    display: block;
    position: absolute;
    top: 2px
}

.tp-radio2 .form-text:before, .tp-radio22 .form-text:before {
    background-color: #F0D9C4
}

.tp-radio2 .form-text:after, .tp-radio22 .form-text:after {
    border: 3px solid #fff;
    background-color: #fff;
    margin: 1px 0 0 1px
}

.tp-radio2 :checked + .form-text:before, .tp-radio22 :checked + .form-text:before {
    background-color: var(--c1)
}

.tp-radio2 :checked + .form-text:after, .tp-radio22 :checked + .form-text:after {
    background-color: transparent
}

.tp-radio2 .form-text:before, .tp-radio2 .form-text:after {
    border-radius: 50%;
    left: 2px
}

.tp-radio2 .form-text:before {
    width: 22px;
    height: 22px
}

.tp-radio2 .form-text:after {
    width: 20px;
    height: 20px
}

.tp-radio22 .form-text {
    padding: 0 0 0 35px
}

.tp-radio22 .form-text:before, .tp-radio22 .form-text:after {
    left: 0
}

.tp-radio22 .form-text:before {
    width: 26px;
    height: 26px
}

.tp-radio22 .form-text:after {
    width: 24px;
    height: 24px
}

.tp-captcha {
    cursor: pointer
}

.tp-captcha img {
    display: inline-block;
    vertical-align: bottom
}

.tp-captcha:after {
    content: '';
    display: inline-block;
    vertical-align: bottom;
    width: 22px;
    height: 22px;
    margin: 0 0 0 5px;
    background-image: url(../images/svg/icon-refresh.svg)
}

.tp-link1 {
    position: relative;
    z-index: 0
}

.tp-link1 .figure {
    position: static
}

.tp-link1 .figure:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    z-index: 1
}

@media screen and (min-width: 576px) {
    .tp-pic1 {
        padding: 0;
        height: auto
    }

    .tp-pic1 img {
        position: static;
        left: auto;
        top: auto;
        -o-object-fit: inherit;
        object-fit: inherit
    }

    .tp-bg12 .tp-s2:before {
        top: 240px
    }

    .tp-form1 .form-ctrl, .tp-form12 .form-ctrl {
        padding: 14px 20px
    }
}

@media screen and (min-width: 768px) {
    .tp-card {
        position: absolute;
        width: 70%;
        left: 0;
        top: -0px;
        margin-top: -1%
    }

    .tp-tg1 .toggle-btn {
        padding: 10px 60px 10px 20px
    }

    .tp-tg1 .ans {
        padding: 20px 60px 40px 20px
    }

    .tp-bg2 .bg {
        padding: 0 0 56.25%
    }
}

@media screen and (min-width: 769px) {
    .tp-card {
        width: 60%
    }

    .tp1 {
        padding-right: 30px
    }

    .tp5 {
        -webkit-transition: all .3s;
        transition: all .3s
    }

    .tp5 .links {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        opacity: 0;
        z-index: 1
    }
}

@media screen and (min-width: 769px) and (min-width: 769px) {
    .tp5:hover {
        background-color: #f0e7da
    }

    .tp5:hover .links {
        opacity: 1
    }

    .tp5:hover .list {
        opacity: 0;
        visibility: hidden
    }

    .tp5:hover .title {
        color: #6C5F52
    }
}

@media screen and (min-width: 769px) {
    .sec-bg1:before {
        border-radius: 30px 0 0 30px;
        width: 75%
    }

    .tp-bg .bg {
        position: static
    }

    .tp-bg .bg-left .obj-cover {
        border-radius: 0 30px 30px 0
    }

    .tp-bg .bg-left .text {
        margin-right: 0
    }

    .tp-bg .bg-right {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
    }

    .tp-bg .bg-right .text {
        margin-left: 0
    }

    .tp-bg .bg-right .obj-cover {
        border-radius: 30px 0 0 30px;
        right: 0;
        left: auto
    }

    .tp-bg11 .obj-cover {
        width: 45%;
        height: 100% !important;
        z-index: -1
    }

    .tp-bg12 {
        overflow: hidden
    }

    .tp-bg12 .obj-cover {
        width: 52%;
        min-height: 80% !important
    }

    .tp-bg12 .tp-s1 {
        z-index: -1
    }

    .tp-bg12 .tp-s2 {
        margin-top: 0;
        background-color: transparent;
        padding-top: 160px;
        padding-bottom: 40px
    }

    .tp-bg12 .tp-s2:before {
        left: auto;
        top: 100px;
        height: auto;
        bottom: 0
    }

    .tp-bg12 .bg-left .tp-s2:before {
        border-radius: 30px 0 0 30px;
        right: -41.67%;
        margin: 0 50px 0 0
    }

    .tp-bg12 .bg-right .tp-s2:before {
        border-radius: 0 30px 30px 0;
        left: -41.67%;
        margin: 0 0 0 50px
    }

    .tp-bg13 .obj-cover {
        width: 47%;
        height: 100% !important;
        z-index: -1
    }

    .tp-bg2 .bg {
        padding: 0 0 36.9%
    }

    .tp-tg1 .ans {
        padding: 20px 60px 60px 20px
    }

    .tp-toc {
        position: sticky;
        top: 100px
    }
}

@media screen and (min-width: 1200px) {
    .tp-toc {
        top: 90px
    }

    .sec-bg1:before {
        width: 70%
    }

    .tp-bg2 .text {
        top: -100px
    }

    .tp-bg12 .bg-left .tp-s2:before {
        right: -33.34%
    }

    .tp-bg12 .bg-right .tp-s2:before {
        left: -33.34%
    }

    .tp-bg13 .obj-cover {
        width: 50%
    }
}

@media screen and (min-width: 1400px) {
    .sec-bg1:before {
        width: 60%
    }

    .tp-bg12 .row-05 {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

@media screen and (min-width: 1600px) {
    .tp-bg .bg {
        padding: 0
    }

    .tp-bg .bg-62 {
        height: 620px
    }

    .tp-bg .bg-75 {
        height: 750px
    }

    .tp-bg11 .obj-cover {
        width: 52%
    }

    .tp-bg12 .bg-left .tp-s2:before {
        right: -45%
    }

    .tp-bg12 .bg-right .tp-s2:before {
        left: -45%
    }

    .tp-bg2 .text {
        top: -140px
    }
}

.btn {
    font-weight: bold
}

.btn-thumb, .btn-lang, .btn-search1, .btn-search2 {
    font-size: 0;
    text-align: left;
    text-indent: -999px;
    overflow: hidden;
    width: 36px;
    height: 36px;
    padding: 0
}

.btn-thumb .thumb {
    display: block;
    position: absolute;
    width: 20px;
    height: 2px;
    left: 50%;
    margin: 0 0 0 -10px;
    -webkit-transition: all .3s;
    transition: all .3s
}

.btn-thumb .thumb-1 {
    top: 10px
}

.btn-thumb .thumb-2 {
    top: 16px
}

.btn-thumb .thumb-3 {
    top: 22px
}

.btn-thumb.on .thumb {
    top: 50%;
    margin-top: -1px
}

.btn-thumb.on .thumb-1 {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.btn-thumb.on .thumb-2 {
    filter: alpha(opacity=0);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    opacity: 0
}

.btn-thumb.on .thumb-3 {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.btn-thumb1 .thumb {
    background: var(--c1)
}

@media screen and (min-width: 769px) {
    .btn-thumb1:hover .thumb {
        background-color: #f0e7da
    }
}

.btn-thumb12 .thumb {
    background: #f0e7da
}

@media screen and (min-width: 769px) {
    .btn-thumb12:hover .thumb {
        background-color: var(--c1)
    }
}

.btn-lang:after {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 30px;
    content: '';
    display: block;
    background-image: url(../images/hsyy/global.svg)
}

.btn-gotop, .btn-home {
    font-size: 0px;
    font-size: 0rem;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2)
}

@media screen and (min-width: 769px) {
    .btn-gotop, .btn-home {
        font-size: 12px;
        font-size: .75rem
    }
}

.btn-gotop:before, .btn-home:before {
    content: '';
    display: block;
    color: #fff;
}

@media screen and (min-width: 769px) {
    .btn-gotop:hover, .btn-home:hover {
        color: #fff;
        background-color: var(--c1)
    }

    .btn-gotop:hover:before, .btn-home:hover:before {
        -webkit-filter: saturate(0) brightness(10);
        filter: saturate(0) brightness(10)
    }
}

.btn-gotop:before {
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    width: 0;
    height: 0;
    margin: 4px auto 0;
    padding: 4px;
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

.btn-home {
    border: 1px solid #6D6055
}

.btn-home:before {
    width: 20px;
    height: 20px;
    margin: 0 auto;
    background-image: url(../images/svg/icon-home.svg)
}

.btn-search1:before, .btn-search1:after, .btn-search2:before, .btn-search2:after {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 30px;
    content: '';
    display: block
}

.btn-search1:before, .btn-search2:before {
    height: 20px;
    background-image: url(../images/hsyy/Search.svg)
}

.btn-search1:after, .btn-search2:after {
    height: 2px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.btn-search1.on:before, .btn-search1.on:after, .btn-search2.on:before, .btn-search2.on:after {
    content: '';
    display: block;
    height: 2px;
    background: #6C5F52;
    margin-left: -10px
}

.btn-search1.on:before, .btn-search2.on:before {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.btn-search2 {
    background-color: var(--c1)
}

.btn-search2:before, .btn-search2:after {
    width: 24px;
    height: 24px
}

@media screen and (min-width: 769px) {
    .btn1:hover, .btn-regist1:hover, .btn-line1:hover {
        color: #fff;
        background-color: var(--c1-dark1);
        border-color: var(--cw)
    }
}

.btn1 {
    color: var(--cw);
    background-color: var(--c1)
}

.btn-c1 {
    color: #6C5F52;
    background-color: var(--c1)
}

@media screen and (min-width: 769px) {
    .btn-c1:hover {
        color: #fff;
        background-color: #6C5F52
    }
}

.btn-c2 {
    color: #fff;
    background-color: #6C5F52
}

@media screen and (min-width: 769px) {
    .btn-c2:hover {
        color: #6C5F52;
        background-color: var(--c1)
    }
}

.btn-disable, .btn-disable2 {
    color: #EAC4A2;
    border-color: #EAC4A2
}

.btn-disable {
    font-size: 15px;
    font-size: .9375rem;
    padding: 5px 20px;
    min-width: 100px
}

@media screen and (min-width: 769px) {
    .btn-disable {
        font-size: 16px;
        font-size: 1rem
    }
}

.btn-pink {
    color: #6C5F52;
    background-color: #f0e7da
}

@media screen and (min-width: 769px) {
    .btn-pink:hover {
        color: #fff;
        background-color: #6C5F52
    }
}

.btn-orange {
    color: #fff;
    background-color: #ED7900
}

@media screen and (min-width: 769px) {
    .btn-orange:hover {
        color: #fff;
        background-color: #6C5F52
    }
}

.btn2, .btn-download {
    color: var(--c1);
    background-color: #6C5F52
}

@media screen and (min-width: 769px) {
    .btn2:hover, .btn-download:hover {
        color: #6C5F52;
        background-color: transparent
    }
}

.btn2-bd {
    color: #6C5F52;
    border: 2px solid #6C5F52
}

@media screen and (min-width: 769px) {
    .btn2-bd:hover {
        color: var(--c1);
        background-color: #6C5F52
    }
}

.btn-download {
    color: var(--c1-dark1)
}

.btn-download:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin: -4px 0 0 10px;
    background-image: url(../images/svg/icon-download.svg)
}

@media screen and (min-width: 769px) {
    .btn-download:hover {
        color: #fff;
        background-color: var(--c1-dark1)
    }

    .btn-download:hover:after {
        -webkit-filter: saturate(0) brightness(10);
        filter: saturate(0) brightness(10)
    }
}

.btn-regist1:before, .btn-line1:before, .btn-regist16:before, .btn-line16:before {
    content: '';
    display: inline-block;
    width: 35px;
    height: 35px;
    vertical-align: middle;
    margin: -6px 10px 0 0
}

.btn-regist1, .btn-line1 {
    color: var(--cw);
    border: 2px solid var(--cw)
}

@media screen and (min-width: 769px) {
    .btn-regist1:hover, .btn-line1:hover {
        background-color: var(--cw);
        color: var(--c1)
    }
}

.btn-regist16, .btn-line16 {
    color: #6C5F52;
    background-color: #f0e7da
}

@media screen and (min-width: 769px) {
    .btn-regist16:hover, .btn-line16:hover {
        background-color: var(--c1)
    }
}

.btn-regist1:before {
    background-image: url(../images/svg/icon-schedule2.svg)
}

@media screen and (min-width: 769px) {
    .btn-regist1:hover:before {
        background-image: url(../images/svg/icon-schedule1.svg)
    }
}

.btn-line1:before {
    background-image: url(../images/svg/icon-headset2.svg)
}

@media screen and (min-width: 769px) {
    .btn-line1:hover:before {
        background-image: url(../images/svg/icon-headset1.svg)
    }
}

.btn-regist16:before {
    background-image: url(../images/svg/icon-schedule2.svg)
}

.btn-line16:before {
    background-image: url(../images/svg/icon-headset2.svg)
}

.btn-regist2, .btn-line2 {
    border-radius: 50%;
    color: var(--c1);
    background-color: #6D6055;
    font-size: 0;
    text-indent: 999px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 50px;
    height: 50px;
    white-space: nowrap;
    padding: 0;
    overflow: hidden;
    -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
    z-index: 0
}

.btn-regist2:before, .btn-line2:before {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    content: '';
    display: block;
    width: 60%;
    height: 60%
}

@media screen and (min-width: 769px) {
    .btn-regist2:hover, .btn-line2:hover {
        color: #6D6055;
        background-color: var(--c1)
    }
}

.btn-regist2:before {
    background-image: url(../images/svg/icon-schedule1.svg)
}

@media screen and (min-width: 769px) {
    .btn-regist2:hover:before {
        background-image: url(../images/svg/icon-schedule2.svg)
    }
}

.btn-line2:before {
    background-image: url(../images/svg/icon-headset1.svg)
}

@media screen and (min-width: 769px) {
    .btn-line2:hover:before {
        background-image: url(../images/svg/icon-headset2.svg)
    }
}

.btn-tg1 {
    cursor: pointer
}

.btn-tg1:after {
    content: '';
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    right: 10px;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    background-image: url(../images/svg/arrow-down.svg)
}

.btn-tg1.on:after {
    -webkit-transform: translate(0, -50%) rotate(180deg);
    -ms-transform: translate(0, -50%) rotate(180deg);
    transform: translate(0, -50%) rotate(180deg)
}

.btn-prev1, .btn-next1 {
    width: auto
}

@media screen and (min-width: 769px) {
    .btn-prev1:hover, .btn-next1:hover {
        color: var(--c1-dark1)
    }
}

.btn-prev1:before, .btn-prev1:after, .btn-next1:before, .btn-next1:after {
    display: block;
    position: absolute;
    top: 0;
    width: 25px;
    height: 100%
}

.btn-prev1 {
    padding: 0 0 0 35px
}

.btn-prev1:before {
    content: '';
    left: 0;
    background-image: url(../images/svg/arrow-prev1.svg)
}

.btn-next1 {
    padding: 0 35px 0 0
}

.btn-next1:after {
    content: '';
    right: 0;
    background-image: url(../images/svg/arrow-next1.svg)
}

.btn-prev2, .btn-next2 {
    padding: 0
}

.btn-prev2 .icon, .btn-next2 .icon {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 35px;
    height: 35px
}

.btn-prev2 .icon:before, .btn-prev2 .icon:after, .btn-next2 .icon:before, .btn-next2 .icon:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: '';
    display: block
}

.btn-prev2 .icon:after, .btn-next2 .icon:after {
    opacity: 0
}

@media screen and (min-width: 769px) {
    .btn-prev2:hover .icon:before, .btn-next2:hover .icon:before {
        opacity: 0
    }

    .btn-prev2:hover .icon:after, .btn-next2:hover .icon:after {
        opacity: 1
    }
}

.btn-prev2 .icon {
    margin: -2px 0 0 10px
}

.btn-prev2 .icon:before {
    background-image: url(../images/svg/arr-prev2.svg)
}

.btn-prev2 .icon:after {
    background-image: url(../images/svg/arr-prev22.svg)
}

.btn-next2 .icon {
    margin: -2px 10px 0 0
}

.btn-next2 .icon:before {
    background-image: url(../images/svg/arr-next2.svg)
}

.btn-next2 .icon:after {
    background-image: url(../images/svg/arr-next22.svg)
}

@media screen and (min-width: 768px) {
    .btn-gotop, .btn-home, .btn-regist2, .btn-line2 {
        width: 60px;
        height: 60px
    }

    .btn-home:before {
        margin: 0 auto 4px
    }

    .btn-tg1:after {
        width: 38px;
        height: 38px
    }

    .btn-prev1 {
        padding: 0 0 0 40px
    }

    .btn-next1 {
        padding: 0 40px 0 0
    }

    .btn-prev1:before, .btn-prev1:after, .btn-next1:before, .btn-next1:after {
        width: 30px
    }

    .btn-prev2 .icon, .btn-next2 .icon {
        width: 50px;
        height: 50px
    }
}

@media screen and (min-width: 1200px) {
    .btn-gotop, .btn-home {
        width: 74px;
        height: 74px
    }

    .btn-regist2, .btn-line2 {
        font-size: 18px;
        font-size: 1.125rem;
        border-radius: 10px 0 0 10px;
        border-width: 2px;
        text-indent: 0;
        width: 70px;
        height: auto;
        left: 10px;
        text-align: center;
        padding: 20px 10px 20px 0
    }

    .btn-regist2:before, .btn-line2:before {
        position: static;
        display: inline-block;
        width: 35px;
        height: 35px;
        left: auto;
        top: auto;
        margin: 0 auto 10px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

@media screen and (min-width: 1200px) and (min-width: 769px) {
    .btn-regist2:hover, .btn-line2:hover {
        left: 0;
        padding-right: 0
    }
}

@media screen and (min-width: 1400px) {
    .btn-thumb {
        width: 48px;
        height: 48px
    }

    .btn-thumb .thumb {
        width: 24px;
        height: 3px;
        margin: 0 0 0 -12px
    }

    .btn-thumb .thumb-1 {
        top: 14px
    }

    .btn-thumb .thumb-2 {
        top: 22px
    }

    .btn-thumb .thumb-3 {
        top: 30px
    }
}

.icon {
    position: relative;
    display: inline-block;
    vertical-align: middle
}

.icon-tel1 {
    padding: 0 0 0 30px
}

.icon-tel1:before {
    position: absolute;
    left: 0;
    top: 50%;
    content: '';
    display: block;
    width: 25px;
    height: 25px;
    background-image: url(../images/svg/icon-tel1.svg);
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.icon-location {
    padding: 0 0 0 20px
}

.icon-location:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: 18px;
    height: 18px;
    background-image: url(../images/svg/icon-location.svg);
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.icon-chk1 {
    padding: 5px 0 5px 30px
}

.icon-chk1:before, .icon-chk1:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: 25px;
    height: 25px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.icon-chk1:before {
    background: radial-gradient(50% 50% at 50% 50%, var(--c1-dark1) 50%, rgba(255, 255, 255, 0) 100%);
    -webkit-transform: scale(1.2, 1.2) translate(0, -50%);
    -ms-transform: scale(1.2, 1.2) translate(0, -50%);
    transform: scale(1.2, 1.2) translate(0, -50%)
}

.icon-chk1:after {
    margin: -2px 0 0 3px;
    background-image: url(../images/svg/icon-chk1.svg)
}

.hd-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9999;
    overflow-y: auto
}

.hd-top ul {
    list-style: none
}

.hd-top.on {
    display: block;
    -webkit-animation: fadeIn .3s;
    animation: fadeIn .3s
}

.hd-row1, .hd-row4 {
    height: 60px
}

.hd-tp {
    left: 0;
    top: 0;
    z-index: 999
}

.hd-row {
    height: 60px;
    width: 100%;
    min-width: 320px;
    -webkit-transition: all .3s;
    transition: all .3s
}

.hd-row h1 {
    margin: 0
}

.hd-row2 {
    margin: 0 -20px
}

.hd-row2 > .col {
    padding: 0 20px
}

.hd-row5 {
    margin: 0 -5px
}

.hd-row5 > .col {
    padding-left: 5px;
    padding-right: 5px
}

.hd-s2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    padding: 0 10px;
    width: 100%
}

.hd-s2.on {
    left: 0
}

.hd-lang {
    display: none;
    position: absolute;
    left: 50%;
    top: 100%;
    min-width: 150px;
    white-space: nowrap;
    -webkit-transition: all .3s;
    transition: all .3s;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0)
}

.hd-lang.on {
    display: block
}

.hd-lang.on .list-lang {
    -webkit-animation: fadeInDown .5s;
    animation: fadeInDown .5s
}

.hd-form {
    overflow: hidden
}

.hd-form.on {
    filter: alpha(opacity=100);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    opacity: 1;
    height: auto;
    padding: 20px
}

.logo {
    position: relative;
    width: 160px
}

.logo a, .logo img {
    display: block
}

.logo a {
    position: relative
}

.fixed .hd-inner {
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2)
}

@media screen and (min-width: 576px) {
    .hd-row5 {
        margin: 0 -10px
    }

    .hd-row5 > .col {
        padding-left: 10px;
        padding-right: 10px
    }

    .hd-form {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        width: 400px;
        padding: 20px;
        background-color: #fff;
        -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);
        box-shadow: 0 0 25px rgba(0, 0, 0, 0.25)
    }

    .hd-form.on {
        display: block;
        -webkit-animation: fadeInDown .5s;
        animation: fadeInDown .5s
    }
}

@media screen and (min-width: 768px) {
    .hd-row1, .hd-row4 {
        height: 80px
    }

    .logo {
        width: 200px
    }
}

@media screen and (min-width: 769px) {
    .hd-top {
        padding-top: 45px
    }

    .hd-tp1 {
        position: absolute;
        top: 45px;
        height: 0;
        width: 100%;
        overflow: visible
    }

    .hd-tp2 {
        padding-top: 45px
    }

    .hd-row1, .hd-row4 {
        height: auto
    }

    .hd-inner {
        border-radius: 60px;
        padding: 0 30px;
        -webkit-transition: all .3s;
        transition: all .3s
    }

    .fixed .hd-tp {
        position: sticky;
        top: 0;
        padding: 0
    }

    .fixed .hd-row4 {
        padding: 0 20px
    }

    .fixed .hd-inner {
        border-radius: 0;
        max-width: none;
        padding: 0
    }

    .fixed .logo {
        width: 200px
    }

    .fixed .main-nav .col > a {
        padding: 20px 0
    }

    .hd-lang.on {
        display: none
    }

    .hd-i23:hover .hd-lang {
        display: block
    }

    .hd-i23:hover .list-lang {
        -webkit-animation: fadeInDown .5s;
        animation: fadeInDown .5s
    }
}

@media screen and (min-width: 1400px) {
    .logo {
        width: auto
    }
}

.page {
    margin: 0 auto;
    min-height: 320px;
    -webkit-transition: all .3s;
    transition: all .3s;
    z-index: 0
}

.ft-tp {
    position: relative
}

.ft-tp dt {
    color: var(--cw)
}
.ft_qrcode{
    width: 180px;
    height: 200px;
    float: left;
    padding: 10px;
    text-align: center;
}
.ft_qrcode img{
    width: 100%;
    margin-bottom: 10px;
}

@media screen and (min-width: 769px) {
    .ft-tp a:not(.btn):hover {
        color: var(--c1-lite1)
    }
}

.ft-row {
    margin: 0 -20px
}

.ft-row > .col {
    padding: 0 20px
}

.ft-s3, .aside {
    position: fixed;
    right: 10px;
    z-index: 99;
    -webkit-transition: all .3s;
    transition: all .3s
}

.ft-s3 {
    bottom: 60px;
    -webkit-transition: all .3s;
    transition: all .3s;
    opacity: 0
}

.ft-s3.block {
    opacity: 1
}

.aside {
    top: 46%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

@media screen and (min-width: 1200px) {
    .aside {
        right: 0
    }
}

@font-face {
    font-family: '微軟正黑體修正';
    unicode-range: U+7db0, U+78A7, U+7B75;
    font-style: normal;
    font-weight: bold;
    src: local(Yu Gothic), local(MS Gothic)
}

@font-face {
    font-family: '微軟正黑體修正';
    unicode-range: U+7db0, U+78A7, U+7B75;
    font-style: normal;
    font-weight: normal;
    src: local(微軟正黑體)
}

/*# sourceMappingURL=style.css.map */
.team-section {
    margin-top: 60px;
    position: relative;
    display: flex;
    height: 800px;
    overflow: hidden;
}

/* 左右两栏 */
.team-left, .team-right {
    width: 50%;
    display: flex;
    justify-content: center;
}

.team-section .teamleft {
    color: #fff;
}
.left-content {
    margin-top: 100px;
    padding-left: calc(100vw*0.1);
    color: var(--c1);
    width: 90%;
}
.team-icon img{
    height: 80px;
    width: 80px;
}
.detail-icon img{
    height: 60px;
    width: 60px;
}
.left_div{
    background: var(--c1-lite1);width: 100%;height: 650px;margin-top: 150px;
}
.left-content h2 {
    margin: 20px 0;
    font-weight: 600;
}
.left-content h3 {
    font-weight: 500;
    font-size: 20px;
    text-transform: uppercase;
    color: var(--c1-dark2);
    margin-top: -10px;
}
.left-text{
    margin: 50px 0px;
    color: var(--c1);
    font-size: 16px;
}

.team-section .team-right{
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow: hidden;
}
.team-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== 默认（大屏）浮层：水平跨越中线 ===== */



/* 三个中间浮层 */
.float-box {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* 三个浮层之间间隔 20px */
    z-index: 10;

}

.float-item {
    font-size: 18px;
    font-weight: 600;
    width: 180px;
    text-align: center;
    padding: 12px 0;
    transition: all 0.3s ease;
    border-radius: 10px;

}



/* 两个浮层上下排列 */
.box1 {
    background-color: #7057A3;
    color: white;
    border-top-left-radius: 50px;
    height: 180px;
    opacity: 0.85;
    display: flex;
    flex-direction: column; /* 子元素垂直排列 */
    justify-content: center; /* 垂直居中 */
    align-items: center;     /* 水平居中（可选） */
}
.box2 img{
width: 80px;
    height: 80px;
}
.box3 {
    background-color: #7057A3;
    color: white;
    display: flex;
    flex-direction: column; /* 子元素垂直排列 */
    justify-content: center; /* 垂直居中 */
    align-items: center;     /* 水平居中（可选） */
    border-top-right-radius: 50px;
    height: 180px;
    opacity: 0.85;
}
.boxspan{
    color: #FF9D00;
    font-size: 56px;
}
/* ===== 小屏：上下结构 + 垂直跨越中线 ===== */
@media (max-width: 768px) {
    .team-section {
        flex-direction: column;
        height: auto;
    }
    .team-left, .team-right {
        width: 100%;
        min-height: 370px;
    }
    .left_div {
        background: var(--c1-lite1);
        width: 100%;
        height: 650px;
        margin-top: 0px;
    }
    .team-section .team-right{
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        overflow: hidden;
    }
    /* 浮层改为水平中线（左右跨越） */
    .float-box {
        position: absolute;
        top: 660px;
        left: 50%;
        /* transform: translate(-50%, -50%); */
        flex-direction: row;
        justify-content: center;
        background: transparent;
        width: 90%;
        gap: 10px;
        z-index: 10;
        pointer-events: none;
    }

    /* 重新定位浮层 */
    .box1 {
        top: auto;
        left: 50%;

    }
    .box2 {
        top: auto;
        left: 50%;

    }
    .boxspan{
        color: #FF9D00;
        font-size: 46px;
        line-height: 1.4;
    }
    .float-item {
        font-size: 16px;
        font-weight: 600;
        width: 180px;
        text-align: center;
        padding: 8px 0;
        transition: all 0.3s ease;
        border-radius: 10px;

    }
    /* 两个浮层上下排列 */
    .box1 {
        background-color: #7057A3;
        color: white;
        border-top-left-radius: 50px;
        height: 150px;
        opacity: 0.85;
        display: flex;
        flex-direction: column; /* 子元素垂直排列 */
        justify-content: center; /* 垂直居中 */
        align-items: center;     /* 水平居中（可选） */
    }
    .box3 {
        background-color: #7057A3;
        color: white;
        display: flex;
        flex-direction: column; /* 子元素垂直排列 */
        justify-content: center; /* 垂直居中 */
        align-items: center;     /* 水平居中（可选） */
        border-top-right-radius: 50px;
        height: 150px;
        opacity: 0.85;
    }
}


/* news */
.news-section {
    width: 100%;
    padding: 80px 0;
    background: #fff;
}

/* ===== 标题区 ===== */
.section-title {
    text-align: center;
    margin-bottom: 48px;
    color: var(--c1);
}

.section-title h2 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0;
    color: var(--c1);
}
.section-title span {
    color: var(--c1-dark2);
    display: block;
    font-size: 16px;
    margin-top: 6px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ===== 主体内容（左右结构） ===== */
.news-content-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin: 0 auto;
}

/* ===== 标签样式 ===== */
.news-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: #7057A3; /* 紫色品牌色 */
    color: #ffffff;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 500;
    z-index: 2;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    opacity: 0.8;
}

/* 左边大资讯 */
.news-left {
    width: 40%;
    position: relative;
}

.news-left .news-item.large {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.news-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.news-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
    color: #fff;
    padding: 34px;
    box-sizing: border-box;
}

.news-overlay h3 { margin:0 0 18px; font-size: 24px;font-weight: 600 }
.news-overlay a h3 { color: var(--cw);}
.news-overlay a p { color: var(--cw);}
.news-overlay p { margin:0; font-size: 15px; line-height: 1.4; }

/* 右边两篇小资讯（左右排列） */
.news-right {
    width: 60%;
    display: flex;
    gap: 16px;
}

.news-right .news-item.small {
    width: 50%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    position: relative;

}

.news-right img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
}

.news-content {
    padding: 20px 16px 0px;

}

.news-content h4 { margin: 0 0 6px; font-size: 18px; color: var(--c1); font-weight: 600 }
.news-content h3 { color: var(--cw);}

.news-content p { margin: 0; font-size: 14px;  line-height: 1.8; color: var(--c1-dark2);}

/* ===== 标题区 ===== */
.section-more {
    margin-top:80px;
    text-align: center;
    margin-bottom: 48px;
}

.btn-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #7057A3; /* 紫色品牌色 */
    color: #fff;
    padding: 12px 28px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-more img {
    width: 18px;
    height: 18px;
    filter: invert(1); /* 白色箭头 */
}

.btn-more:hover {
    background-color: #5d4790;
    transform: translateY(-2px);
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
    .news-content-wrapper {
        flex-direction: column;
        width: 96%;
    }

    .news-left, .news-right {
        width: 100%;
    }

    .news-right {
        flex-direction: column;
    }

    .news-right .news-item.small {
        width: 100%;
    }

    .news-left .news-item.large {

    }

    .section-title h2 {
        font-size: 26px;
        color: var(--c1);
    }
    .section-title span {
        color: var(--c1-dark2);
        text-transform: uppercase;
    }
    .news-tag {
        font-size: 12px;
        padding: 3px 8px;
    }
}
.pinkcircle {
    width: 20px;
    height: 20px;
    background-color: var(--c1);
    border: 5px solid var(--c1-lite1);
    border-radius: 50%;
    box-sizing: border-box; /* 让宽高包含边框 */
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}

/* ============ Banner 基础样式 ============ */
.banner {
    position: relative;
    width: 100%;
    height: 1000px;
    overflow: hidden;
}

.banner .swiper {
    width: 100%;
    height: 100%;
}

.banner .swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ============ 文字层通用样式 ============ */
.banner-text {
    position: absolute;
    color: #fff;
    opacity: 0;
    transition: all 1s ease;
    z-index: 10;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* ============ 默认文字样式 ============ */
.banner-text h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
    letter-spacing: 1px;
}

.banner-text p {
    font-size: 1.25rem;
    line-height: 1.6;
}
.banner-text img{
    width: 100%;
}

/* ============ 动画类型 ============ */
/* 居中淡入 */
.fade-center1 {
    top: 50%;
    left: 15%;
    transform: translate(-50%, -40%);
    width: 300px;
}
.fade-center2 {
    top: 63%;
    right: 15%;
    transform: translate(-50%, -40%);
    width: 300px;
}
.swiper-slide-active .fade-center1{
    opacity: 0;
    transform: translate(-50%, -50%);
}
.swiper-slide-active .fade-center2{
    opacity: 0;
    transform: translate(-50%, -50%);
}

/* ============ 动画关键帧 ============ */
@keyframes slideInLeft {
    0% { opacity: 0; transform: translateX(80px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    0% { opacity: 0; transform: translateX(80px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* ============ Banner1 动画控制 ============ */
.swiper-slide-active .text-left {
    animation: slideInLeft 1s ease forwards;
}

.swiper-slide-active .text-right {
    animation: slideInRight 1s ease forwards;
    animation-delay: 1s; /* 延迟 1 秒 */
}

/* 左滑入 */
.slide-left {
    top: 50%;
    left: 15%;
    transform: translateY(-50%) translateX(-80px);
}
.swiper-slide-active .slide-left {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* 底部上升 */
.slide-up {
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%) translateY(60px);
    text-align: center;
}
.swiper-slide-active .slide-up {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 放在 swiper CSS 之后，或放到页面底部 <style> */
.banner .swiper-pagination .swiper-pagination-bullet {
    background: rgba(112, 87, 163, 0.5) !important; /* 半透明紫 */
    opacity: 1 !important;
    border: 1px solid rgba(255,255,255,0.15); /* 可选：给点边框提高可视性 */
}

/* 选中状态 */
.banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #7057A3 !important; /* 实心紫色 */
    box-shadow: 0 0 0 4px rgba(112,87,163,0.12); /* 可选：高亮环 */
}

/* ============ 响应式适配 ============ */
@media (max-width: 1368px) and (min-width: 769px) {
    .banner {
        height: 900px;
    }
    .banner-text h2 {
        font-size: 1.8rem;
    }
    .banner-text p {
        font-size: 1rem;
    }
    .fade-center1 {
        top: 65%;
        left: 10%;
        transform: translate(-50%, -40%);
        width: 100px;
    }
    .fade-center2 {
        top: 72%;
        right: 15%;
        transform: translate(-50%, -40%);
        width: 180px;
    }
}

@media (max-width: 768px) {
    .banner {
        height: 600px;
    }
    .banner-text h2 {
        font-size: 1.8rem;
    }
    .banner-text p {
        font-size: 1rem;
    }
    .fade-center1 {
        top: 60%;
        left: 2%;
        transform: translate(-50%, -40%);
        width: 160px;
    }
    .fade-center2 {
        top: 65%;
        right: 2%;
        transform: translate(-50%, -40%);
        width: 160px;
    }
}

/* 通用页面页头 end */
.announce {
    position: absolute;
    width: 100%;
    top: calc(100vw * 0.29);
    font-size: 40px;
    color: #7057A3;
    font-weight: 600;
    text-align: center;
    display: inline-block; /* 允许 transform */
    opacity: 0;
    transform: translateX(-60px); /* 起始在左侧 */
    /* 动画：名称 时长 速度曲线 延迟 次数 填充模式 */
    animation: slideInFromLeft 0.8s cubic-bezier(.22,.9,.31,1) 0s 1 forwards;
}

/* 关键帧：从左侧且透明，移动到原位并显示 */
@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-60px);
    }
    60% {
        opacity: 1;
        transform: translateX(8px); /* 轻微超出制造弹性 */
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 可选：添加延迟类供多个元素使用 */
.delay-1 { animation-delay: 0.6s; top:calc(100vw * 0.32);width: 100%; font-size: 60px; }
.delay-2 { animation-delay: 1.2s; }

/* 响应式：小屏文字更小 */
@media (max-width: 768px) {
    .announce { font-size: 20px; transform: translateX(-40px); }
    /* 可选：添加延迟类供多个元素使用 */
    .delay-1 { animation-delay: 0.6s; top:calc(100vw * 0.35);width: 100%; font-size: 26px; }
    .delay-2 { animation-delay: 1.2s; }
    @keyframes slideInFromLeft {
        0% { opacity: 0; transform: translateX(-40px); }
        60% { opacity: 1; transform: translateX(6px); }
        100% { opacity: 1; transform: translateX(0); }
    }
}

/* 通用页面页头 end */

.company-section {
    margin: 90px auto 90px;
    position: relative;
    display: flex;
    height: 700px;
    overflow: hidden;
    width: 95%;
    max-width: 1500px;
}

/* 左右两栏 */
.company-left, .company-right {
    width: 50%;
    display: flex;
    justify-content: center;
}

.company-section .companyleft {
    color: #fff;
}
.company-section .left-content {
    margin-top: 0px;
    padding-left: calc(100vw*0.1);
    color: var(--c1);
    width: 90%;
}
.company-section .company-icon img{
    height: 80px;
    width: 80px;
}
.company-section .detail-icon img{
    height: 60px;
    width: 60px;
}
.text_div{
    height: 700px;margin-top: 0px;
}
.company-section .left-content h2 {
    margin: 20px 0;
    font-weight: 600;
}
.company-section .left-content h3 {
    font-weight: 500;
    font-size: 20px;
    text-transform: uppercase;
    color: var(--c1-dark2);
    margin-top: -10px;
}
.company-section .left-text{
    margin: 50px 0px;
    color: var(--c1);
    font-size: 16px;
}

.company-section .company-right{
    border-radius: 20px;
    overflow: hidden;
}
.company-section .company-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== 小屏：上下结构 + 垂直跨越中线 ===== */
@media (max-width: 768px) {
    .company-section {
        margin: 50px auto 50px;
        flex-direction: column;
        height: auto;
    }
    .company-left, .company-right {
        width: 100%;
        min-height: 650px;
    }
    .company-section .left-content {
        margin-top: 0px;
        padding-left: 30px;
        color: var(--c1);
        width: 90%;
    }
    .company_div {
        background: var(--c1-lite1);
        width: 100%;
        height: 650px;
        margin-top: 0px;
    }


}
/**团队**/
.doctors-section {
    width: 90%;
    max-width: 1500px;
    margin: 80px auto;
    text-align: center;
}

.section-header {
    margin-bottom: 40px;
}


.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.doctor-card {
    background: #ffffff;
    border-radius: 10px;
    text-align: center;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: background 0.3s, transform 0.3s;
    color: #666;
}

.doctor-card:hover {
    background: var(--c1-dark1); /* 悬停时底色变淡紫色 */
    transform: translateY(-5px);
    color: var(--cw);
}

.doctor-card img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.doctor-card h3 {
    font-size: 16px;

    margin-top: 15px;
}

.doctor-card h4 {
    font-size: 20px;

    margin: 5px 0;
}

.doctor-card p {
    font-size: 14px;

    line-height: 1.6;
}

/* ✅ 响应式适配 */
@media (max-width: 1200px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
    }
    .section-title {
        font-size: 26px;
    }
    .section-subtitle {
        font-size: 16px;
    }
}

/* 整体区块 */
.honor-section {
    background-color: var(--c1-lite1); /* 粉色背景 */
    padding: 80px 0;
}

/* 容器宽度限制 */
.honor-container {
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* 单个卡片样式 */
.honor-card {
    background: var(--c1);
    opacity: 0.85;
    color: #fff;
    border-radius: 20px;
    height: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* 鼠标悬停效果 */
.honor-card:hover {
    background: linear-gradient(135deg, var(--c1-dark2), var(--c1));
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* 卡片动画（初始轻微缩放） */
.honor-card {
    transform: scale(0.95);
    animation: fadeInUp 0.8s ease forwards;
}

.honor-card:nth-child(2) { animation-delay: 0.2s; }
.honor-card:nth-child(3) { animation-delay: 0.4s; }
.honor-card:nth-child(4) { animation-delay: 0.6s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 图标样式 */
.honor-card .icon {
    font-size: 60px;
    margin-bottom: 20px;
}

/* 数字样式 */
.honor-card .number {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    font-family: "Fredoka", sans-serif
}

/* 小标题 */
.honor-card .title {
    font-size: 20px;
    letter-spacing: 1px;
}

/* ✅ 响应式布局 */
@media (max-width: 1200px) {
    .honor-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .honor-container {
        grid-template-columns: 1fr;
    }
    .honor-card {
        height: 300px;
    }
}

section {

}

/* Section 1：基础套餐  */

.pricing-section {
    width: 90%;
    max-width: 1500px;
    margin: 100px auto;
    text-align: center;
}

.section-title {
    font-size: 36px;
    font-weight: bold;
    color: #7057A3;
    margin-bottom: 60px;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.pricing-card {
    background: #fff;
    border: 2px solid #eee;
    border-radius: 15px;
    padding: 40px 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
}

.pricing-card h3 {
    font-size: 22px;
    margin-bottom: 20px;
    color: #7057A3;
}

.pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.pricing-card ul li {
    margin: 10px 0;
    color: #555;
}

.pricing-card .price {
    font-size: 32px;
    font-weight: bold;
    color: #7057A3;
    margin-bottom: 25px;
}

.pricing-card a {
    background: #7057A3;
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
}

.pricing-card a:hover {
    background: #5c4495;
}

/* 鼠标悬停效果 */
.pricing-card:hover {
    transform: translateY(-10px);
    border-color: #7057A3;
    box-shadow: 0 10px 30px rgba(112,87,163,0.2);
}

/* 推荐套餐（中间加亮） */
.pricing-card.featured {
    border-color: #7057A3;
    background: #f6f1ff;
    transform: scale(1.05);
}

/* 响应式 */
@media (max-width: 900px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }
}


/* Section 2：PRP 技术（图左文右，浅紫背景） */
.section-prp {
    background: var(--c1-lite1);
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 100px 5%;
}
.section-prp .image {
    flex: 1;
}
.section-prp .text {
    flex: 1;
}
.section-prp img {
    width: 100%;
    border-radius: 16px;
}
.section-prp h2 {
    color: #7057A3;
    font-size: 34px;
    margin-bottom: 10px;
}
.section-prp p {
    font-size: 17px;
    color: #444;
}

/* Section 3：陪诊服务（居中） */
.section-guide {
    text-align: center;
    background: linear-gradient(135deg, #7057A3, #9074cc);
    color: #fff;
    padding: 220px 5%;
}
.section-guide h2 {
    font-size: 36px;
    margin-bottom: 10px;
}
.section-guide p {
    font-size: 18px;
    max-width: 800px;
    margin: 0 auto 30px;
}
.section-guide img {
    width: 300px;
    border-radius: 50%;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Section 4：宣讲会（背景图 + 透明文字框） */
.section-event {
    position: relative;
    background: url('images/seminar-bg.jpg') center/cover no-repeat;
    color: #fff;
    padding: 160px 5%;
}
.section-event::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(50, 20, 80, 0.6);
}
.section-event .content {
    position: relative;
    max-width: 700px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    padding: 40px;
    border-radius: 12px;
}
.section-event h2 {
    font-size: 36px;
    margin-bottom: 15px;
}
.section-event p {
    font-size: 18px;
    line-height: 1.8;
}

/* 响应式 */
@media (max-width: 900px) {
    .section-basic, .section-prp {
        flex-direction: column;
    }
}

/* Section 1: 联系方式 */
.contact-info {
    width: 90%;
    max-width: 1500px;
    margin: 100px auto 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align: center;
    gap: 30px;
}

.contact-info .item {
    flex: 1 1 300px;
    background: #f9f6ff;
    border-radius: 12px;
    padding: 40px 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.contact-info .item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(112,87,163,0.2);
}

.contact-info h3 {
    color: var(--c1);
    margin-bottom: 10px;
}

.contact-info p a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
}
.contact-info p a:hover {
    color: var(--c1);
}

/* Section 2: 地图 */
.map-section {
    margin: 80px 0;
}
.map-section iframe {
    width: 100%;
    height: 450px;
    border: 0;
}

/* Section 3: 联系表单 */
.contact-form {
    width: 90%;
    max-width: 800px;
    margin: 80px auto 150px;
    background: #f9f6ff;
    padding: 50px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.contact-form h2 {
    text-align: center;
    color: var(--c1);
    margin-bottom: 30px;
}

.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--c1);
}

.contact-form button {
    background: var(--c1);
    color: #fff;
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.3s;
}

.contact-form button:hover {
    background: var(--c1-dark1);
}

/* 响应式 */
@media (max-width: 900px) {
    .contact-info {
        flex-direction: column;
    }
}

/* 整體區塊 */
.faq-section {
    width: 100%;
    overflow: hidden;
}

/* ---------- 標題 ---------- */
.faq-header {
    text-align: center;
    padding: 80px 20px 40px;
}
.faq-header h1 {
    font-size: 40px;
    color: var(--c1);
    margin-bottom: 10px;
    font-weight: 700;
}
.faq-header p {
    color: #666;
    font-size: 18px;
}

/* ---------- Tabs ---------- */
.faq-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin: 30px 0;
}
.faq-tab-btn {
    border: 1px solid var(--c1);
    background: transparent;
    color: var(--c1);
    padding: 10px 24px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s;
}
.faq-tab-btn.active,
.faq-tab-btn:hover {
    background: var(--c1);
    color: #fff;
}

/* ---------- FAQ 內容 ---------- */
.faq-container {
    width: 90%;
    max-width: 800px;
    margin: 0 auto 100px;
}
.faq-content {
    display: none;
}
.faq-content.active {
    display: block;
    animation: faqFadeIn 0.5s ease;
}
@keyframes faqFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.faq-item {
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
}
.faq-question {
    cursor: pointer;
    position: relative;
    font-weight: 600;
    font-size: 18px;
    padding-right: 30px;
    transition: color 0.3s;
}
.faq-question:hover {
    color: var(--c1);
}
.faq-question::after {
    content: "+";
    position: absolute;
    right: 0;
    color: var(--c1);
    font-size: 22px;
    transition: transform 0.3s;
}
.faq-item.open .faq-question::after {
    content: "–";
    transform: rotate(180deg);
}
.faq-answer {
    display: none;
    margin-top: 10px;
    color: #555;
    font-size: 16px;
    line-height: 1.7;
}

/* ---------- 響應式 ---------- */
@media (max-width: 768px) {
    .faq-header h1 { font-size: 32px; }
    .faq-question { font-size: 17px; }
}

.btn-more:after {
    content: "";
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    width: 0;
    height: 0;
    padding: 4px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

/* ---------- 文章资讯 ---------- */
.article-section {
    width: 95%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 40px 0;

}

.article-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.article-item {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}

.article-item:hover {
    transform: translateY(-5px);
}

.article-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.article-tag {
    position: absolute;
    background: var(--c1-dark1);
    color: #fff;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 0 0 6px 0;
    z-index: 2;
    opacity: 0.01;
}

.article-content {
    padding: 15px;
}

.article-content h4 {
    display: flex;
    align-items: center;
    font-size: 18px;
    margin: 10px 0;
    color: #333;
}

.article-content p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

.pinkcircle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c1);
    margin-right: 8px;
}

/* ✅ 响应式布局 */
@media (max-width: 1024px) {
    .article-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .article-grid {
        grid-template-columns: 1fr;
    }
}

/* ✅ 分页样式 */
.pagination {
    margin-top: 40px;
    text-align: center;
    margin-bottom: 100px;
}

.pagination a {
    display: inline-block;
    margin: 0 6px;
    padding: 8px 14px;
    border: 1px solid var(--c1);
    border-radius: 6px;
    color: var(--c1);
    text-decoration: none;
    transition: all 0.3s;
}

.pagination a:hover {
    background: var(--c1);
    color: #fff;
    border-color: var(--c1);
}

.pagination a.active {
    background: var(--c1-dark1);
    color: #fff;
    border-color: var(--c1-dark1);
}

@media (max-width: 600px) {
    .pagination a {
        margin: 4px;
        padding: 6px 10px;
    }
}

/* 原样式 */
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.3s;
}

/* ✅ 让 checkbox 独立不继承 width:100% */
.contact-form input[type="checkbox"] {
    width: 25px;
    height: 25px;
    padding: 0;
    margin-right: 6px;
    vertical-align: middle;
    cursor: pointer;
    border: none;
    accent-color: var(--c1); /* 改成你想要的颜色 */
}

/* ✅ 让一组 checkbox 横向排列 */
.contact-form .checkbox-group {
    display: flex;              /* 一行排列 */
    flex-wrap: wrap;            /* 超出自动换行（移动端更美观） */
    gap: 10px 20px;             /* 行间/列间距 */
}

/* ✅ 每个 label 也要内联排列 */
.contact-form .checkbox-group label {
    display: inline-flex;
    align-items: center;        /* 让 checkbox 和文字垂直对齐 */
    margin: 0;
    cursor: pointer;
}
/* ✅ 让 checkbox 独立不继承 width:100% */
.contact-form input[type="radio"] {
    width: 25px;
    height: 25px;
    padding: 0;
    margin-right: 6px;
    vertical-align: middle;
    cursor: pointer;
    border: none;
    accent-color: var(--c1); /* 改成你想要的颜色 */
}

/* ✅ 让一组 checkbox 横向排列 */
.contact-form .radio-group {
    display: flex;              /* 一行排列 */
    flex-wrap: wrap;            /* 超出自动换行（移动端更美观） */
    gap: 10px 20px;             /* 行间/列间距 */
}

/* ✅ 每个 label 也要内联排列 */
.contact-form .radio-group label {
    display: inline-flex;
    align-items: center;        /* 让 checkbox 和文字垂直对齐 */
    margin: 0;
    cursor: pointer;
}
.signup-label{font-weight: bold;line-height: 1.1; }

.contact-bar {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* 小屏自动换行 */
    margin-top: 20px;
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    text-decoration: none;
    background: #f5f5f5;
    border-radius: 10px;
    font-size: 16px;
    color: var(--c1);
    border: 1px solid #ddd;
    transition: 0.3s;
    min-width: 200px;
    justify-content: center;
}

.contact-card:hover {
    background: #e3e3e3;
}

.contact-card .icon {
    font-size: 22px;
}

/* ======== 响应式 ======== */

/* 平板以下：三卡片变两列 */
@media (max-width: 768px) {
    .contact-card {
        width: 45%;
    }
}

/* 手机：每个卡片占整行 */
@media (max-width: 480px) {
    .contact-card {
        width: 100%;
    }
}

.ivf-section {
    width: 100%;
    text-align: center;
    font-family: "Arial", sans-serif;
}



.ivf-title {
    font-size: 32px;
    font-weight: bold;
    color: #7057A3;
    margin-bottom: 40px;
    margin-top: 80px;
}

.ivf-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
}

.ivf-step {
    width: calc(16.6% - 5px); /* 7 个平均分布 */
    min-width: 180px;
    text-align: center;
    transition: 0.3s;
    cursor: pointer;
}

.ivf-step img {
    width: 100%;
    max-width: 180px;
    height: auto;
    transition: 0.3s;
    border-radius: 100%;
}

.ivf-step h3 {
    margin-top: 20px;
    font-size: 26px;
    color: #7057A3;
    font-weight: bold;
}

.ivf-step p {
    font-size: 22px;
    color: #7057A3;
}

/* 鼠标焦点效果 */
.ivf-step:hover {
    transform: scale(1.12);
}

.ivf-step:hover img {
    filter: drop-shadow(0 0 8px #7057A3);
}

.ivf-step:hover h3 {
    color: #7057A3;
}

.ivf-step:hover p {
    color: #7057A3;
}
.ivf-step-bg{
    display: block;
}

/* 响应式 */
@media(max-width: 1024px){
    .ivf-step {
        width: calc(33.33% - 10px);
    margin-bottom: 30px;
    }
    .ivf-step img {
        width: 100%;
        max-width: 160px;
        height: auto;
        transition: 0.3s;
        border-radius: 100%;
    }

    .ivf-step h3 {
        margin-top: 20px;
        font-size: 24px;
        color: #7057A3;
        font-weight: bold;
    }

    .ivf-step p {
        font-size: 20px;
        color: #7057A3;
    }
}

@media(max-width: 600px){
    .ivf-step-bg{
        display: none!important;
    }
    .ivf-step {
        width: calc(50% - 10px);margin-bottom: 30px;
    }
    .ivf-step img {
        width: 100%;
        max-width: 140px;
        height: auto;
        transition: 0.3s;
        border-radius: 100%;
    }

    .ivf-step h3 {
        margin-top: 20px;
        font-size: 16px;
        color: #7057A3;
        font-weight: bold;
    }

    .ivf-step p {
        font-size: 14px;
        color: #7057A3;
    }
}