@charset "UTF-8";

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
    line-height: 1.2;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

main {
    display: block
}

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

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

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

a {
    background-color: transparent
}

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

b,
strong {
    font-weight: bolder
}

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

small {
    font-size: 80%
}

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

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

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

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

button,
input,
select,
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

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

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

fieldset {
    padding: .35em .75em .625em
}

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

progress {
    vertical-align: baseline
}

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] {
    outline-offset: -2px
}

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

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

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

/*!
 * 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 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.no-gutters {
    margin-right: 0;
    margin-left: 0
}

.no-gutters>.col,
.no-gutters>[class*=col-] {
    padding-right: 0;
    padding-left: 0
}

.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.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-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.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-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.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-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9 {
    position: relative;
    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-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:640px) {
    .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-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-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:1024px) {
    .footer_header {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 60px 0;
    }

    .footer_header_left {
        flex: 0 0 180px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .footer_header_nav {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: flex-end;
    }

    .footer_header_tel {
        margin-bottom: 15px;
    }

    .footer_header_logo {
        margin-bottom: 15px;
    }

    .footer_links {
        display: flex;
        gap: 15px;
        padding: 20px 0;
        flex-wrap: wrap;
    }

    .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-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:1200px) {
    .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-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:640px) {
    .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:1024px) {
    .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:1200px) {
    .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
    }
}

:root {
    --swiper-theme-color: $color1
}

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

.swiper-container-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-box-sizing: content-box;
    box-sizing: content-box
}

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

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

.swiper-container-multirow-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-container-free-mode>.swiper-wrapper {
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    margin: 0 auto
}

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

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

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

.swiper-container-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-container-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none
}

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

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

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

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

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

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 50%;
    width: calc(var(--swiper-navigation-size)/ 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(-1 * 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: 0;
    cursor: auto;
    pointer-events: none
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
    left: 10px;
    right: auto
}

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

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
    right: 10px;
    left: auto
}

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

.swiper-button-lock {
    display: none
}

.swiper-pagination {
    position: absolute;
    width: 100%;
    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-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: 10px;
    left: 0;
    width: 100%
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    margin: 0 5px;
    border-radius: 100%;
    background: #00000061;
    opacity: .3
}

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

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

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

.swiper-container-vertical>.swiper-pagination-bullets {
    right: 10px;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 6px 0;
    display: block
}

.swiper-pagination-progressbar {
    background: rgba(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-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    -webkit-transform-origin: right top;
    -ms-transform-origin: right top;
    transform-origin: right top
}

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

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

.swiper-pagination-lock {
    display: none
}

.swiper-scrollbar {
    border-radius: 10px;
    position: relative;
    background: rgba(0, 0, 0, .1)
}

.swiper-container-horizontal>.swiper-scrollbar {
    position: absolute;
    left: 1%;
    bottom: 3px;
    z-index: 50;
    height: 5px;
    width: 98%
}

.swiper-container-vertical>.swiper-scrollbar {
    position: absolute;
    right: 3px;
    top: 1%;
    z-index: 50;
    width: 5px;
    height: 98%
}

.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: rgba(0, 0, 0, .5);
    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
}

.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-animation: swiper-preloader-spin 1s infinite linear;
    animation: swiper-preloader-spin 1s infinite linear;
    -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
}

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

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

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

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

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

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

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

.swiper-container-cube {
    overflow: visible
}

.swiper-container-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-container-cube .swiper-slide .swiper-slide {
    pointer-events: none
}

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

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

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

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

.swiper-container-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .6;
    -webkit-filter: blur(50px);
    filter: blur(50px);
    z-index: 0
}

.swiper-container-flip {
    overflow: visible
}

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

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

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

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

.btn14:before,
.btn15:before,
.ii104:before,
.ii105:before,
.ii113 .figure:before,
.ii114 .figure:before,
.sw05 .item-inner:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1
}

.ii101 .figure,
.ii102 .figure,
.ii104 .figure,
.ii105 .figure,
.ii106 .figure,
.ii107 .figure,
.ii108 .figure,
.ii109 .figure,
.ii110 .figure,
.ii111 .figure,
.ii112 .figure,
.ii113 .figure,
.ii115 .figure,
.ii116 .figure,
.ii117 .figure,
.ii201 .figure {
    overflow: hidden
}

.ii101 .pic,
.ii101 img,
.ii102 .pic,
.ii102 img,
.ii104 .pic,
.ii104 img,
.ii105 .pic,
.ii105 img,
.ii106 .pic,
.ii106 img,
.ii107 .pic,
.ii107 img,
.ii108 .pic,
.ii108 img,
.ii109 .pic,
.ii109 img,
.ii110 .pic,
.ii110 img,
.ii111 .pic,
.ii111 img,
.ii112 .pic,
.ii112 img,
.ii113 .pic,
.ii113 img,
.ii115 .pic,
.ii115 img,
.ii116 .pic,
.ii116 img,
.ii117 .pic,
.ii117 img,
.ii201 .pic,
.ii201 img {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: 1s;
    transition: 1s
}

@media screen and (min-width:769px) {

    .ii101:hover .pic,
    .ii101:hover img,
    .ii102:hover .pic,
    .ii102:hover img,
    .ii104:hover .pic,
    .ii104:hover img,
    .ii105:hover .pic,
    .ii105:hover img,
    .ii106:hover .pic,
    .ii106:hover img,
    .ii107:hover .pic,
    .ii107:hover img,
    .ii108:hover .pic,
    .ii108:hover img,
    .ii109:hover .pic,
    .ii109:hover img,
    .ii110:hover .pic,
    .ii110:hover img,
    .ii111:hover .pic,
    .ii111:hover img,
    .ii112:hover .pic,
    .ii112:hover img,
    .ii113:hover .pic,
    .ii113:hover img,
    .ii115:hover .pic,
    .ii115:hover img,
    .ii116:hover .pic,
    .ii116:hover img,
    .ii117:hover .pic,
    .ii117:hover img,
    .ii201:hover .pic,
    .ii201:hover img {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1)
    }
}

body,
html {
    height: 100%
}

html {
    scroll-behavior: smooth
}

body {
    background: #fff;
    font-size: 15px;
    font-size: .9375rem;
    position: relative;
    font-family: OpenSansRegular, "微軟正黑體修正", "微軟正黑體", "Microsoft JhengHei", MHei, STHeitiTC-Light, sans-serif, Arial, Helvetica, "Helvetica Neue", Tahoma, Verdana;
    color: #333;
    overflow-wrap: break-word
}

@media screen and (min-width:768px) {
    body {
        font-size: 16px;
        font-size: 1rem
    }
}

body.lock {
    overflow: hidden
}

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

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.5
}

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

a {
    text-decoration: none
}

button {
    cursor: pointer
}

blockquote {
    margin: 0;
    padding: 20px 6%;
    background: #f7f7f7;
    border-left: 5px solid #ddd
}

#container,
#content {
    position: relative;
    margin: 0 auto;
    clear: both
}

#container {
    min-width: 320px
}

#content {
    clear: both;
    line-height: 1.8
}

#mask-bg {
    opacity: 0;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    z-index: 998;
    -webkit-transition: all .3s;
    transition: all .3s
}

#mask-bg.on {
    height: 100%
}

#mask-bg.mask-b {
    background: #000
}

#mask-bg.mask-b.on {
    opacity: .8
}

#mask-bg.mask-w {
    background: #fff
}

#mask-bg.mask-w.on {
    opacity: .9
}

.d-pc {
    display: none
}

.nav-wrap,
.page-limit {
    font-size: 0;
    line-height: 1.2
}

.nav-wrap dd,
.nav-wrap dl,
.nav-wrap dt,
.nav-wrap li,
.nav-wrap ul,
.page-limit dd,
.page-limit dl,
.page-limit dt,
.page-limit li,
.page-limit ul {
    margin: 0;
    padding: 0;
    list-style: none outside none
}

.nav-wrap .nav-title,
.nav-wrap li,
.page-limit .nav-title,
.page-limit li {
    position: relative;
    overflow: hidden
}

.nav-wrap .nav-title,
.nav-wrap a,
.page-limit .nav-title,
.page-limit a {
    display: block
}

.path li,
.path ul {
    list-style: none outside none
}

.path ul {
    padding: 0;
    margin: 0
}

.path li {
    position: relative
}

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

.ig-pd1,
.ig-pd2 {
    margin: 2px -2px
}

.ig-pd1>div,
.ig-pd2>div {
    padding: 2px
}

.ig-br1,
.ig-br2 {
    margin: 2px -2px
}

.ig-br1>div,
.ig-br1>div>a,
.ig-br2>div,
.ig-br2>div>a {
    position: relative
}

.ig-br1>div:before,
.ig-br1>div>a:before,
.ig-br2>div:before,
.ig-br2>div>a:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-style: solid;
    border-color: #fff;
    border-width: 2px;
    z-index: 4
}

.fill>div {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    width: 100%
}

.fill img {
    width: 100%
}

.figure {
    position: relative
}

.figure img {
    display: block;
    margin: 0 auto
}

.black {
    color: #000
}

.white {
    color: #fff
}

.color1 {
    color: var(--main-color)
}

.color2 {
    color: #2ab4ec
}

.color-light {
    color: #666
}

.color-dark {
    color: #000
}

.bg-cover {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.bg-contain {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain
}

.tl {
    text-align: left
}

.tc {
    text-align: center
}

.tr {
    text-align: right
}

.nowrap {
    white-space: nowrap
}

.title01 {
    font-size: 26px;
    font-size: 1.625rem
}

@media screen and (min-width:768px) {
    .title01 {
        font-size: 32px;
        font-size: 2rem
    }
}

@media screen and (min-width:1200px) {
    .title01 {
        font-size: 36px;
        font-size: 2.25rem
    }
}

.title02 {
    font-size: 20px;
    font-size: 1.25rem
}

@media screen and (min-width:768px) {
    .title02 {
        font-size: 28px;
        font-size: 1.75rem
    }
}

.title03 {
    font-size: 26px;
    font-size: 1.625rem
}

@media screen and (min-width:768px) {
    .title03 {
        font-size: 32px;
        font-size: 2rem
    }
}

@media screen and (min-width:1200px) {
    .title03 {
        font-size: 40px;
        font-size: 2.5rem
    }
}

.title05 {
    display: block;
    font-size: 14px;
    font-size: .875rem;
    padding: 8px 0 0
}

.title06 {
    font-size: 18px;
    font-size: 1.125rem
}

@media screen and (min-width:768px) {
    .title06 {
        font-size: 20px;
        font-size: 1.25rem
    }
}

@media screen and (min-width:641px) {
    .d-mobile {
        display: none
    }

    .d-pc {
        display: block
    }
}

@media screen and (min-width:768px) {
    .reverse {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
    }
}

@media screen and (min-width:1024px) {
    .ig-pd1 {
        margin: 4px -4px
    }

    .ig-pd1>div {
        padding: 4px
    }

    .ig-br1 {
        margin: 2px -4px
    }

    .ig-br1>div:before,
    .ig-br1>div>a:before {
        border-width: 4px
    }

    .ig-pd2 {
        margin: 8px -8px
    }

    .ig-pd2>div {
        padding: 8px
    }

    .ig-br2 {
        margin: 8px -8px
    }

    .ig-br2>div:before,
    .ig-br2>div>a:before {
        border-width: 8px
    }
}

.header {
    font-size: 0;
    position: fixed;
    width: 100%;
    min-width: 320px;
    padding: 0 20px;
    z-index: 999;
    -webkit-transition: .1s;
    transition: .1s
}

.header.fix {
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    box-shadow: 0 0 10px rgba(0, 0, 0, .1)
}

.hd-inner {
    padding: 10px 0
}

#logo,
.hd-inner,
.hd-lang,
.hd-search,
.icon-thumb,
.lang-btn,
.mobile-side,
.sec,
.thumb {
    -webkit-transition: .3s;
    transition: .3s
}

#logo {
    width: 150px
}

#logo,
#logo a,
#logo img {
    display: block
}

.mobile-side {
    position: absolute;
    top: 100%;
    width: 100%;
    left: -100%;
    overflow-y: auto
}

.mobile-side.on {
    left: 0
}

.icon-thumb {
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    right: 15px;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    z-index: 1;
    overflow: hidden;
    z-index: 2
}

.icon-thumb .thumb {
    display: block;
    position: absolute;
    left: 50%;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    z-index: 1;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center
}

.icon-thumb .thumb2 {
    top: 50%
}

.icon-thumb.on .thumb {
    top: 50%
}

.icon-thumb.on .thumb1 {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg);
    transform: translate3d(-50%, -50%, 0) rotate(-45deg)
}

.icon-thumb.on .thumb2 {
    width: 0;
    opacity: 0
}

.icon-thumb.on .thumb3 {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg);
    transform: translate3d(-50%, -50%, 0) rotate(45deg)
}

.hd-lang,
.hd-search {
    position: relative
}

.hd-lang .lang-btn,
.hd-lang .search-btn,
.hd-search .lang-btn,
.hd-search .search-btn {
    display: none
}

.hd-search {
    padding: 30px 5%
}

.hd-lang {
    text-align: center;
    padding: 10px 0
}

.lang-btn,
.search-btn {
    cursor: pointer;
    width: 30px;
    height: 30px
}

.lang-nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: distribute;
    justify-content: space-around
}

.lang-nav li {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    padding: 15px 10px
}

.lang-nav li:after {
    display: inline-block;
    vertical-align: middle;
    content: '';
    display: block;
    width: 1px;
    height: 50%;
    background: rgba(51, 51, 51, .1);
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    z-index: 1
}

.lang-nav li:last-child:after {
    display: none
}

.lang-nav a {
    display: inline-block;
    font-size: 13px;
    font-size: .8125rem;
    white-space: nowrap
}

@media screen and (min-width:768px) {
    .lang-nav a {
        font-size: 15px;
        font-size: .9375rem
    }
}

.main-nav.on {
    left: 0
}

.main-nav .has-nav>a:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 8px;
    height: 8px;
    line-height: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background: url(../../img/arr1-5-next.svg);
    background-size: contain;
    margin: -1px 0 0 15px
}

.main-nav .has-nav.on>a:after {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.main-nav .sub-nav {
    z-index: 99
}

.main-nav .node1 {
    padding: 0 5%
}

.main-nav .node1>li:last-child {
    border-bottom: none
}

.main-nav .node1>li>a {
    font-size: 16px;
    font-size: 1rem;
    font-weight: 700;
    padding: 12px 5%
}

.main-nav .node2 {
    padding: 0 0 10px
}

.main-nav .node2 a {
    font-size: 15px;
    font-size: .9375rem;
    padding: 10px
}

.main-nav .node2 .on a {
    color: var(--main-color);
    font-weight: 700
}

.thumb01 {
    background: var(--main-color);
    border-radius: 2px
}

.thumb01 .thumb {
    width: 58%;
    height: 1px;
    background: #fff
}

.thumb01 .thumb1 {
    top: 30%
}

.thumb01 .thumb2 {
    margin-top: -.5px
}

.thumb01 .thumb3 {
    bottom: 30%
}

.thumb04 .thumb {
    height: 2px;
    background: var(--main-color)
}

.thumb04 .thumb1 {
    top: 26%
}

.thumb04 .thumb2 {
    margin-top: -1px
}

.thumb04 .thumb3 {
    bottom: 26%
}

.thumb04 .thumb1 {
    width: 56%;
    margin-left: 7%
}

.thumb04 .thumb2 {
    width: 70%;
    margin-top: -1px
}

.thumb04 .thumb3 {
    width: 38%;
    margin-left: 15%
}

.thumb04.on .thumb1,
.thumb04.on .thumb3 {
    width: 70%
}

.thumb04.on .thumb {
    margin: 0
}

@media screen and (min-width:1200px) {
    .header.fix #logo {
        width: 180px
    }

    .hd-inner {
        padding: 0
    }

    #logo {
        width: 240px
    }

    #nav-btn {
        display: none
    }

    .mobile-side {
        position: static;
        left: 0;
        top: 0;
        width: auto;
        overflow: visible
    }

    .hd-lang .lang-btn,
    .hd-lang .search-btn,
    .hd-search .lang-btn,
    .hd-search .search-btn {
        display: block
    }

    .hd-lang>div,
    .hd-search>div {
        display: none;
        position: absolute;
        z-index: 3
    }

    .hd-lang:hover,
    .hd-search.on {
        overflow: visible
    }

    .hd-lang:hover>div,
    .hd-search.on>div {
        display: block
    }

    .hd-lang:hover .search-btn:before,
    .hd-search.on .search-btn:before {
        background-image: url(../../img/icon-del.svg)
    }

    .hd-search>div {
        width: 360px;
        margin: 10px 0 0
    }

    .lang-nav a {
        display: block
    }

    .lang-nav li {
        padding: 0
    }

    .lang-nav li:after {
        display: none
    }

    .main-nav li {
        overflow: visible
    }

    .main-nav li.on>.sub-nav {
        display: none
    }

    .main-nav li:hover>.sub-nav {
        display: block
    }

    .main-nav .has-nav>a:after {
        display: none
    }

    .main-nav .sub-nav {
        position: absolute;
        top: 100%;
        left: 50%;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
        z-index: 1
    }

    .main-nav .sub-nav a {
        white-space: nowrap
    }

    .main-nav .node1 {
        padding: 0
    }
}

.hd01 {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, 0) 100%);
    color: #fff
}

.hd01 .mobile-side {
    background: rgba(255, 255, 255, .1)
}

.hd01 .main-nav .node1>li {
    border-bottom: 1px solid rgba(0, 0, 0, .2)
}

.hd01 .main-nav .node1>.on {
    background: rgba(0, 0, 0, .5)
}

.hd01 .main-nav .node1>.on>a {
    background: var(--main-color);
    color: #fff
}

.hd01 .main-nav .node1>.on>a:after {
    -webkit-filter: saturate(0) brightness(10);
    filter: saturate(0) brightness(10)
}

.hd01 .main-nav .node2 a {
    padding-left: 8%
}

.hd01.fix {
    background: rgba(0, 0, 0, .5)
}

@media screen and (min-width:1200px) {
    .hd01 {
        padding: 15px 30px
    }

    .hd01.fix {
        padding: 10px 30px
    }

    .hd01 .hd-inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .hd01 .mobile-side {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background: 0 0
    }

    .hd01 .hd-lang,
    .hd01 .hd-search {
        display: inline-block;
        vertical-align: middle;
        padding: 0 0 0 20px
    }

    .hd01 .hd-lang>div,
    .hd01 .hd-search>div {
        top: 100%;
        right: -15px
    }

    .hd01 .lang-nav,
    .hd01 .main-nav .node2 {
        padding: 5px 0 0
    }

    .hd01 .lang-nav:before,
    .hd01 .main-nav .node2:before {
        content: '';
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 0 0 10px;
        border-color: transparent transparent transparent rgba(0, 0, 0, .8)
    }

    .hd01 .lang-nav li,
    .hd01 .main-nav .node2 li {
        border-bottom: 1px solid rgba(0, 0, 0, .5)
    }

    .hd01 .lang-nav li:last-child,
    .hd01 .main-nav .node2 li:last-child {
        border: none
    }

    .hd01 .lang-nav a,
    .hd01 .main-nav .node2 a {
        background: rgba(0, 0, 0, .8);
        padding: 10px 20px
    }

    .hd01 .lang-nav a:hover,
    .hd01 .main-nav .node2 a:hover {
        color: var(--main-color)
    }

    .hd01 .lang-nav:before {
        margin: 0 20px 0 auto
    }

    .hd01 .main-nav .node1>li {
        display: inline-block;
        vertical-align: middle;
        padding: 0 15px;
        border: none
    }

    .hd01 .main-nav .node1>li+li:before {
        content: "/";
        font-size: 18px;
        font-size: 1.125rem;
        color: rgba(255, 255, 255, .2);
        position: absolute;
        left: -2px;
        top: 50%;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
        z-index: 1
    }

    .hd01 .main-nav .node1>li>a {
        padding: 0
    }

    .hd01 .main-nav .node1>li.on,
    .hd01 .main-nav .node1>li.on>a {
        background: 0 0
    }

    .hd01 .main-nav .node1>li.on>a {
        color: var(--main-color)
    }

    .hd01 .main-nav .node2 {
        text-align: center
    }

    .hd01 .main-nav .node2:before {
        margin: 0 auto
    }
}

@media screen and (min-width:1400px) {
    .hd01 .main-nav .node1>li {
        padding: 0 25px
    }
}

.hd02,
.hd02 .hd-lang {
    background: #fff
}

.hd02 .mobile-side {
    background: #f7f7f7
}

.hd02 .main-nav {
    text-align: center
}

.hd02 .main-nav .node1>li {
    border-bottom: 1px solid #fff
}

.hd02 .main-nav .node1>.on {
    background: #eee
}

.hd02 .main-nav .node1>.on>a {
    color: var(--main-color)
}

@media screen and (min-width:1200px) {
    .hd02 {
        padding: 20px 30px 30px
    }

    .hd02.fix {
        padding: 10px 30px
    }

    .hd02 .hd-inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .hd02 .mobile-side {
        background: 0 0
    }

    .hd02 .s2>div,
    .hd02 .s2>nav {
        display: inline-block;
        vertical-align: middle;
        padding: 0 0 0 20px
    }

    .hd02 .hd-lang>div,
    .hd02 .hd-search>div {
        top: 100%;
        right: -15px
    }

    .hd02 .lang-nav,
    .hd02 .main-nav .node2 {
        padding: 10px 0 0
    }

    .hd02 .lang-nav li,
    .hd02 .main-nav .node2 li {
        border-bottom: 1px solid #ddd
    }

    .hd02 .lang-nav li:last-child,
    .hd02 .main-nav .node2 li:last-child {
        border: none
    }

    .hd02 .lang-nav a,
    .hd02 .main-nav .node2 a {
        background: #f7f7f7;
        padding: 9px 20px
    }

    .hd02 .lang-nav a:hover,
    .hd02 .main-nav .node2 a:hover {
        background: var(--main-color);
        color: #fff
    }

    .hd02 .main-nav .node1>li {
        display: inline-block;
        vertical-align: middle;
        border: 0 none;
        padding: 0 15px
    }

    .hd02 .main-nav .node1>li>a {
        padding: 0
    }

    .hd02 .main-nav .node1>li:hover>a {
        color: var(--main-color)
    }

    .hd02 .main-nav .node1>li.on {
        background: 0 0
    }
}

.hd03,
.hd03 .mobile-side {
    background: #fff
}

.hd03 .hd-lang {
    background: #fff
}

.hd03 .main-nav .on>a {
    font-weight: 700
}

.hd03 .main-nav .has-nav>a {
    padding-right: 30px
}

.hd03 .main-nav .has-nav>a:after {
    position: absolute;
    right: 15px;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    z-index: 1;
    -webkit-transform: translate3d(0, -50%, 0) rotate(90deg);
    transform: translate3d(0, -50%, 0) rotate(90deg)
}

.hd03 .main-nav .has-nav.on {
    padding: 5px 0 10px
}

.hd03 .main-nav .has-nav.on>a:after {
    -webkit-filter: saturate(1);
    filter: saturate(1);
    -webkit-transform: translate3d(0, -50%, 0) rotate(-90deg);
    transform: translate3d(0, -50%, 0) rotate(-90deg)
}

.hd03 .main-nav .node1>li {
    padding: 2px 0;
    border-bottom: 1px dashed #ddd
}

.hd03 .main-nav .node1>li>a {
    color: #000
}

.hd03 .main-nav .node1>.on {
    background: #f7f7f7
}

.hd03 .main-nav .node1>.on>a {
    color: var(--main-color)
}

.hd03 .main-nav .node2 {
    padding-left: 6%;
    position: relative
}

.hd03 .main-nav .node2:before {
    content: '';
    display: block;
    width: 2px;
    height: 90%;
    background: #dedede;
    position: absolute;
    left: 5%;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    z-index: 1;
    margin: -5px 0 0
}

@media screen and (min-width:1200px) {
    .hd03 {
        padding: 0
    }

    .hd03.fix .s1 {
        height: 0;
        padding: 0;
        overflow: hidden
    }

    .hd03.fix .s2 {
        padding: 10px 30px
    }

    .hd03 .s1 {
        padding: 20px
    }

    .hd03 .s1 .hd-inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .hd03 .s2 {
        border-top: 1px solid #eee;
        padding: 15px 30px
    }

    .hd03 .si1 {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }

    .hd03 .si2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .hd03 #logo {
        margin: 0 auto
    }

    .hd03 .hd-search {
        padding: 0 20px 0 0
    }

    .hd03 .hd-search>div {
        top: 50%;
        left: -370px;
        margin: 0;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0)
    }

    .hd03 .hd-lang:hover .lang-btn {
        -webkit-filter: saturate(1);
        filter: saturate(1)
    }

    .hd03 .lang-nav,
    .hd03 .main-nav .node2 {
        background: #fff;
        padding: 10px 0
    }

    .hd03 .lang-nav a:hover,
    .hd03 .main-nav .node2 a:hover {
        font-weight: 700;
        color: var(--main-color)
    }

    .hd03 .lang-nav {
        padding: 0;
        top: 100%;
        right: 0;
        -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .1);
        box-shadow: 0 0 15px rgba(0, 0, 0, .1);
        cursor: pointer
    }

    .hd03 .lang-nav ul {
        display: block;
        padding: 10px 0
    }

    .hd03 .lang-nav a {
        padding: 6px 20px
    }

    .hd03 .main-nav .sub-nav {
        left: 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }

    .hd03 .main-nav .node1 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .hd03 .main-nav .node1>li {
        border: none
    }

    .hd03 .main-nav .node1>li>a {
        padding: 0
    }

    .hd03 .main-nav .node1>li:hover>a {
        color: var(--main-color)
    }

    .hd03 .main-nav .node1>li.on {
        background: 0 0
    }

    .hd03 .main-nav .node2 {
        text-align: left;
        -webkit-box-shadow: 0 10px 15px -5px rgba(0, 0, 0, .1);
        box-shadow: 0 10px 15px -5px rgba(0, 0, 0, .1)
    }

    .hd03 .main-nav .node2:before {
        left: 15px
    }

    .hd03 .main-nav .node2 a {
        padding: 10px 20px 10px 30px
    }
}

.hd04 {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, .5)), to(rgba(255, 255, 255, 0)));
    background: linear-gradient(to bottom, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, 0) 100%);
    color: #000
}

.hd04 .main-nav .node1>li {
    border-bottom: 1px solid rgba(0, 0, 0, .1)
}

.hd04 .main-nav .node1>.on {
    background: #fff
}

.hd04 .main-nav .node1>.on>a {
    background: var(--main-color);
    color: #fff
}

.hd04 .main-nav .node1>.on>a:after {
    -webkit-filter: saturate(0) brightness(10);
    filter: saturate(0) brightness(10)
}

.hd04 .main-nav .node2 a {
    padding-left: 8%
}

.hd04.on {
    background: #fff
}

.hd04.fix {
    background: rgba(255, 255, 255, .9)
}

@media screen and (min-width:1200px) {
    .hd04 {
        padding: 20px 30px 40px
    }

    .hd04.fix {
        padding: 10px 30px
    }

    .hd04 .hd-inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .hd04 .mobile-side {
        background: 0 0
    }

    .hd04 .s3>div {
        display: inline-block;
        vertical-align: middle;
        padding: 0 0 0 20px;
        overflow: visible
    }

    .hd04 .hd-lang,
    .hd04 .hd-search {
        padding: 0
    }

    .hd04 .hd-lang>div,
    .hd04 .hd-search>div {
        top: 100%;
        right: -25px
    }

    .hd04 .lang-nav,
    .hd04 .main-nav .node2 {
        padding: 5px 0 0
    }

    .hd04 .lang-nav:before,
    .hd04 .main-nav .node2:before {
        content: '';
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 0 0 10px;
        border-color: transparent transparent transparent #f7f7f7
    }

    .hd04 .lang-nav li,
    .hd04 .main-nav .node2 li {
        border-bottom: 1px solid #ddd
    }

    .hd04 .lang-nav li:last-child,
    .hd04 .main-nav .node2 li:last-child {
        border: none
    }

    .hd04 .lang-nav a,
    .hd04 .main-nav .node2 a {
        background: #f7f7f7;
        padding: 10px 20px
    }

    .hd04 .lang-nav a:hover,
    .hd04 .main-nav .node2 a:hover {
        color: var(--main-color)
    }

    .hd04 .lang-nav:before {
        margin: 0 30px 0 auto
    }

    .hd04 .main-nav .node1 {
        text-align: center
    }

    .hd04 .main-nav .node1>li {
        display: inline-block;
        vertical-align: middle;
        border: 0 none;
        padding: 0 15px
    }

    .hd04 .main-nav .node1>li>a {
        padding: 0
    }

    .hd04 .main-nav .node1>li+li:before {
        content: "|";
        font-size: 14px;
        font-size: .875rem;
        line-height: 1;
        color: rgba(0, 0, 0, .2);
        position: absolute;
        left: 0;
        top: 50%;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
        z-index: 1
    }

    .hd04 .main-nav .node1>li.on>a,
    .hd04 .main-nav .node1>li:hover>a {
        color: var(--main-color)
    }

    .hd04 .main-nav .node1>li.on,
    .hd04 .main-nav .node1>li.on>a {
        background: 0 0
    }

    .hd04 .main-nav .node2 {
        text-align: center
    }

    .hd04 .main-nav .node2:before {
        margin: 0 auto
    }

    .hd04 .main-nav .node2 a:hover {
        background: var(--main-color);
        color: #fff
    }
}

@media screen and (min-width:1400px) {
    .hd04 .main-nav .node1>li {
        padding: 0 25px
    }
}

.footer,
.footer-nav,
.ft-inner {
    overflow: hidden;
    position: relative
}

.footer {
    background: #222;
    color: #b2b2b2
}

.footer .s1 .ft-inner {
    margin: -20px auto
}

.footer .s1 .sec-item {
    padding: 20px 0
}

.footer nav+div {
    padding-top: 50px
}

.footer .corp-info,
.footer .editor {
    line-height: 1.6
}

.footer .list li,
.footer address {
    font-size: 14px;
    font-size: .875rem
}



@media screen and (min-width:768px) {

    .footer .list li,
    .footer address {
        font-size: 15px;
        font-size: .9375rem
    }
}

@media screen and (min-width:1200px) {

    .footer .list li,
    .footer address {
        font-size: 17px;
        font-size: 1.0625rem
    }
}

.footer address {
    font-style: normal
}

.footer .list ul {
    margin: -3px -10px
}

.footer .list li {
    display: inline-block;
    padding: 3px 10px
}

.footer .list a {
    display: inline-block;
    margin-right: 15px
}

.footer .list a:last-child {
    margin-right: 0
}

.footer .list-icon li {
    padding-left: 40px
}

.footer .list-icon li:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    position: absolute;
    left: 10px;
    top: 8px;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-filter: saturate(0) brightness(10);
    filter: saturate(0) brightness(10)
}

.footer .list-icon .icon-address:before {
    background-image: url(../../img/icon-map2.svg)
}

.footer .list-icon .icon-tel:before {
    background-image: url(../../img/icon-tel2.svg)
}

.footer .list-icon .icon-fax:before {
    background-image: url(../../img/icon-fax2.svg)
}

.footer .list-icon .icon-mail:before {
    background-image: url(../../img/icon-mail2.svg)
}

.footer .copyright,
.footer .design {
    font-size: 12px;
    font-size: .75rem;
    color: #fff;
    padding: 7px 10px
}

@media screen and (min-width:768px) {

    .footer .copyright,
    .footer .design {
        font-size: 14px;
        font-size: .875rem
    }
}

.footer-nav a {
    line-height: 1.5
}

.footer-nav .node1>li>a {
    font-size: 15px;
    font-size: .9375rem;
    color: #fff
}

@media screen and (min-width:768px) {
    .footer-nav .node1>li>a {
        font-size: 16px;
        font-size: 1rem
    }
}

@media screen and (min-width:1200px) {
    .footer-nav .node1>li>a {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.footer-nav .node2 {
    color: #ccc
}

.footer-nav .node2>li>a {
    font-size: 14px;
    font-size: .875rem
}

@media screen and (min-width:768px) {
    .footer-nav .node2>li>a {
        font-size: 15px;
        font-size: .9375rem
    }
}

@media screen and (min-width:1200px) {
    .footer-nav .node2>li>a {
        font-size: 17px;
        font-size: 1.0625rem
    }
}

@media screen and (min-width:1024px) {
    .footer nav+div {
        padding-top: 20px
    }

    .footer .footer-nav ul>li>a:hover {
        color: var(--main-color)
    }

    .footer .list li {
        display: block
    }

    .footer .list a:hover {
        color: var(--main-color)
    }

    .footer .design a:hover {
        text-decoration: underline
    }

    .footer .copyright {
        font-size: 12px;
        text-align: center;
    }
}

.ft02 .s1 {
    border-bottom: 1px solid #333;
    padding: 40px 30px
}

.ft02 .s1 .si3 {
    text-align: center
}

.ft02 .s2 {
    padding: 15px 30px
}

.ft02 .s2 .row {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 -10px
}

.ft02 .footer-nav {
    margin-top: -10px
}

.ft02 .footer-nav .sub-nav {
    display: block
}

.ft02 .footer-nav .node1 {
    margin: -10px -20px;
    padding: 10px 0 0
}

.ft02 .footer-nav .node1>li {
    display: inline-block;
    padding: 10px 20px
}

.ft02 .footer-nav .node1>li>a {
    font-weight: 700
}

.ft02 .footer-nav .node2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 5px 0 0
}

.ft02 .footer-nav .node2>li {
    padding: 5px 30px 5px 0
}

.ft02 .social-wrap .row {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media screen and (min-width:768px) {

    .ft02 .s1 .ft-inner,
    .ft02 .s2 .row {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

@media screen and (min-width:1024px) {
    .ft02 .s1 {
        padding: 55px 40px 50px
    }

    .ft02 .s1 .si1 {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        max-width: 750px
    }

    .ft02 .s1 .si1 .figure {
        text-align: right
    }

    .ft02 .s1 .si2 {
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3
    }

    .ft02 .s1 .si3 {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        text-align: left
    }

    .ft02 .s1 .figure img {
        display: inline-block
    }

    .ft02 .footer-nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

    .ft02 .footer-nav .node1 {
        min-width: 50%
    }

    .ft02 .footer-nav .node1>li {
        min-width: 50%
    }

    .ft02 .footer-nav .node1+.node1>li {
        width: 50%
    }

    .ft02 .footer-nav .node2 {
        display: block
    }

    .ft02 .social-wrap .row {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }
}

.api-wrap {
    position: relative;
    height: 0
}

.api-wrap embed,
.api-wrap iframe,
.api-wrap object,
.api-wrap video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    z-index: 1
}

.api01 {
    padding: 0 0 56.25%
}

.api02,
.api03 {
    height: 300px
}

@media screen and (min-width:769px) {
    .api02 {
        height: 400px
    }

    .api03 {
        height: 100%
    }
}

@-webkit-keyframes scaleIn {
    from {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes scaleIn {
    from {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.banner {
    margin: 0 auto;
    position: relative;
    overflow: hidden
}

.banner.init .figure,
.banner.init .slide {
    -webkit-animation: scaleIn 3s ease;
    animation: scaleIn 3s ease
}

.banner .figure {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.banner .text {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    z-index: 1;
    width: 100%;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 15px rgba(0, 0, 0, .3);
    z-index: 2
}

.banner .text span {
    font-size: 12px;
    font-size: .75rem;
    opacity: .9
}

@media screen and (min-width:768px) {
    .banner .text span {
        font-size: 15px;
        font-size: .9375rem
    }
}

.banner .title {
    font-size: 30px;
    font-size: 1.875rem;
    line-height: 1.2;
    position: relative
}

@media screen and (min-width:768px) {
    .banner .title {
        font-size: 50px;
        font-size: 3.125rem
    }
}

.banner03 .figure {
    padding: 0 0 150px
}

.banner03 .title {
    letter-spacing: .2rem
}

.banner03 .title:after,
.banner03 .title:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 2px;
    line-height: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background: #fff;
    margin: 0 10px;
    opacity: .3
}

@media screen and (min-width:769px) {
    .banner03 .figure {
        padding: 0 0 250px
    }

    .banner03 .title:after,
    .banner03 .title:before {
        width: 30px;
        margin: 0 30px
    }
}

.btn,
.icon {
    display: inline-block;
    text-align: center
}

.btn.r,
.icon.r {
    border-radius: 50px
}

.btn {
    line-height: 1.2
}

.icon {
    font-size: 0;
    border: none;
    line-height: 1;
    position: relative
}

.icon:before {
    content: '';
    display: block;
    width: 75%;
    height: 75%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    z-index: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain
}

.a:after,
.b:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    line-height: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain
}

.b:before {
    margin: -1px 10px 0 0
}

.a:after {
    margin: -1px 0 0 10px
}

.light {
    -webkit-filter: saturate(0) brightness(10);
    filter: saturate(0) brightness(10)
}

.gray {
    -webkit-filter: saturate(0);
    filter: saturate(0)
}

.icon-o {
    background: 0 0
}

.icon-b,
.icon-w {
    background: var(--main-color)
}

.icon-w:before {
    -webkit-filter: saturate(0) brightness(10);
    filter: saturate(0) brightness(10)
}

.icon-b:before {
    -webkit-filter: saturate(0) brightness(0);
    filter: saturate(0) brightness(0)
}

.btn01,
.btn02,
.btn05 {
    border-radius: 5px;
    border-style: solid;
    border-width: 2px;
    padding: 10px 15px;
    cursor: pointer;
}

.btn01,
.btn02,
.btn05 {
    border-color: var(--main-color)
}

.btn01,
.btn02 {
    color: #fff
}

.btn01.a:after,
.btn01.b:before,
.btn02.a:after,
.btn02.b:before {
    -webkit-filter: saturate(0) brightness(10);
    filter: saturate(0) brightness(10)
}

.btn01,
.btn02 {
    background: var(--main-color)
}

.btn05,
.btn06 {
    background: 0 0;
    color: var(--main-color)
}

.btn05 {
    font-weight: 700
}

.btn06 {
    border: 1px solid var(--main-color);
    padding: 8px 15px
}

.btn07 {
    background: 0 0;
    font-weight: 700;
    color: var(--main-color);
    border-style: solid;
    border-width: 2px 0;
    border-color: var(--main-color);
    padding: 6px 15px
}

.btn08 {
    border: none;
    font-family: OpenSansBold, "微軟正黑體修正", "微軟正黑體", "Microsoft JhengHei", MHei, STHeitiTC-Light, sans-serif, Arial, Helvetica, "Helvetica Neue", Tahoma, Verdana;
    letter-spacing: 2px
}

.btn08:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 55px;
    height: 1px;
    line-height: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background: var(--main-color);
    margin: 0 10px 0 0
}

.btn09 {
    border: none;
    background: 0 0;
    color: var(--main-color)
}

.btn10,
.btn11 {
    width: 40px;
    height: 40px
}

.btn10 {
    background-image: url(../../img/arr2-1-prev.svg)
}

.btn11 {
    background-image: url(../../img/arr2-1-next.svg)
}

.btn14,
.btn15 {
    width: 20px;
    height: 40px;
    background: rgba(0, 0, 0, .9)
}

.btn14:before,
.btn15:before {
    background-repeat: no-repeat;
    background-size: 70%;
    -webkit-filter: saturate(0) brightness(10);
    filter: saturate(0) brightness(10);
    z-index: 2
}

.btn14 {
    left: 3px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px
}

.btn14:before {
    background-image: url(../../img/arr1-2-prev.svg);
    background-position: left
}

.btn15 {
    right: 3px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px
}

.btn15:before {
    background-image: url(../../img/arr1-2-next.svg);
    background-position: right
}

.i01:after,
.i01:before {
    background-image: url(../../img/icon-search.svg)
}

.i02:after,
.i02:before {
    background-image: url(../../img/icon-lang.svg)
}

.i03:after,
.i03:before {
    background-image: url(../../img/icon-download.svg)
}

.i04:after,
.i04:before {
    background-image: url(../../img/icon-download2.svg)
}

.i05:after,
.i05:before {
    background-image: url(../../img/icon-minus-1.svg)
}

.i06:after,
.i06:before {
    background-image: url(../../img/icon-minus-2.svg)
}

.i07:after,
.i07:before {
    background-image: url(../../img/icon-plus-1.svg)
}

.i08:after,
.i08:before {
    background-image: url(../../img/icon-plus-2.svg)
}

.i05:after,
.i05:before,
.i06:after,
.i06:before,
.i07:after,
.i07:before,
.i08:after,
.i08:before {
    background-size: 80%
}

.i09:after,
.i09:before {
    background-image: url(../../img/arr3-3-prev.svg)
}

.i10:after,
.i10:before {
    background-image: url(../../img/arr3-3-next.svg)
}

.i11:after,
.i11:before {
    background-image: url(../../img/icon-refload.svg)
}

.i12:after,
.i12:before {
    background-image: url(../../img/icon-del.svg)
}

.i13:after,
.i13:before {
    background-image: url(../../img/icon-map.svg)
}

.i14:after,
.i14:before {
    background-image: url(../../img/icon-map2.svg)
}

.i015:after,
.i015:before {
    background-image: url(../../img/icon-tel2.svg)
}

.bw01 {
    padding: 20px 0;
    border-top: 1px solid #ddd;
    overflow: hidden
}

.bw01 .btn {
    position: relative
}

.bw01 .btn:after,
.bw01 .btn:before {
    margin: 0
}

.bw01 .a:after,
.bw01 .b:before {
    position: absolute;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

.bw01 .b {
    float: left;
    text-align: left;
    padding-left: 30px
}

.bw01 .b:before {
    left: 0
}

.bw01 .a {
    float: right;
    text-align: right;
    padding-right: 30px
}

.bw01 .a:after {
    right: 0
}

.bw02,
.bw03 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.bw02 {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 30px 0 0;
    border-top: 1px solid #ddd;
    margin: 0 -5px
}

.bw02 .btn {
    margin: 0 5px
}

.bw03 {
    margin: -5px
}

.bw03 .btn {
    margin: 5px
}

@media screen and (min-width:1024px) {

    .gray:hover,
    .light:hover {
        -webkit-filter: saturate(1);
        filter: saturate(1)
    }

    .gray:hover.a:after,
    .gray:hover.b:before,
    .light:hover.a:after,
    .light:hover.b:before {
        -webkit-filter: saturate(0) brightness(10);
        filter: saturate(0) brightness(10)
    }

    .icon-w:hover {
        background: #2ab4ec
    }

    .btn01:hover {
        background: #2ab4ec;
        border-color: #2ab4ec
    }

    .btn02:hover {
        background: 0 0;
        color: var(--main-color)
    }

    .btn02:hover.a:after,
    .btn02:hover.b:before {
        -webkit-filter: saturate(1);
        filter: saturate(1)
    }

    .btn05:hover,
    .btn06:hover {
        background: var(--main-color);
        color: #fff
    }

    .btn05:hover.a:after,
    .btn05:hover.b:before,
    .btn06:hover.a:after,
    .btn06:hover.b:before {
        -webkit-filter: saturate(0) brightness(10);
        filter: saturate(0) brightness(10)
    }

    .btn07:hover {
        font-weight: 700;
        letter-spacing: 6px
    }

    .btn08:hover {
        color: var(--main-color)
    }

    .btn08:hover:before {
        width: 70px
    }

    .btn09 {
        padding: 5px
    }

    .btn09:hover.a:after,
    .btn09:hover.b:before {
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2)
    }

    .btn10,
    .btn11 {
        width: 60px;
        height: 60px
    }

    .btn10:hover,
    .btn11:hover {
        -webkit-filter: brightness(10);
        filter: brightness(10)
    }

    .btn14,
    .btn15 {
        width: 30px;
        height: 60px;
        opacity: .3
    }

    .btn14:hover,
    .btn15:hover {
        opacity: .9
    }

    .btn14 {
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px
    }

    .btn15 {
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px
    }

    .bw01 {
        padding: 40px 0
    }

    .bw01 .btn {
        max-width: 48%
    }

    .bw01 .btn:hover {
        text-decoration: underline
    }

    .bw01 .btn:hover:after,
    .bw01 .btn:hover:before {
        -webkit-transform: translate3d(0, -50%, 0) scale(1.2);
        transform: translate3d(0, -50%, 0) scale(1.2)
    }
}

@media screen and (min-width:1200px) {

    .btn01,
    .btn02,
    .btn05,
    .btn06 {
        padding: 12px 20px
    }

    .btn07 {
        padding: 8px 20px
    }
}

.editor {
    overflow: hidden
}

.article {
    font-size: 18px;
    font-size: 1.125rem
}

.article h2,
.article h3,
.article h4,
.article h5 {
    padding: 10px 0
}

.article h2 {
    font-size: 22px;
    font-size: 1.375rem;
    color: var(--main-color)
}

.article h3 {
    font-size: 20px;
    font-size: 1.25rem;
    color: #9d6100
}

.article h4 {
    font-size: 19px;
    font-size: 1.1875rem;
    color: orange
}

.article a:not(.btn) {
    color: #3498db;
    text-decoration: underline
}

.article .black {
    color: #000
}

.article .white {
    color: #fff
}

.article .color1 {
    color: var(--main-color)
}

.article .color2 {
    color: #2ab4ec
}

.article .color-light {
    color: #666
}

.article .color-dark {
    color: #000
}

.article .title01 {
    font-size: 28px;
    font-size: 1.75rem
}

@media screen and (min-width:768px) {
    .article .title01 {
        font-size: 32px;
        font-size: 2rem
    }
}

@media screen and (min-width:1200px) {
    .article .title01 {
        font-size: 36px;
        font-size: 2.25rem
    }
}

.article .title02 {
    font-size: 20px;
    font-size: 1.25rem
}

@media screen and (min-width:768px) {
    .article .title02 {
        font-size: 28px;
        font-size: 1.75rem
    }
}

.article .title03 {
    font-size: 28px;
    font-size: 1.75rem
}

@media screen and (min-width:768px) {
    .article .title03 {
        font-size: 32px;
        font-size: 2rem
    }
}

@media screen and (min-width:1200px) {
    .article .title03 {
        font-size: 40px;
        font-size: 2.5rem
    }
}

.article .title05 {
    display: block;
    font-size: 14px;
    font-size: .875rem;
    padding: 8px 0 0
}

.article .title06 {
    font-size: 18px;
    font-size: 1.125rem
}

@media screen and (min-width:768px) {
    .article .title06 {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.ed1 i {
    font-family: Arial, "微軟正黑體修正", "微軟正黑體", "Microsoft JhengHei", MHei, STHeitiTC-Light, sans-serif, Arial, Helvetica, "Helvetica Neue", Tahoma, Verdana;
    font-style: normal;
    font-weight: 900;
    color: #d90000;
    text-shadow: .5px 0 0 #d90000
}

@media (hover:hover) {
    .article a:not(.btn):hover {
        color: #2b5894
    }
}

::-webkit-input-placeholder {
    font-size: 16px;
    font-size: 1rem;
    color: #777;
    opacity: 1
}

::-moz-placeholder {
    font-size: 16px;
    font-size: 1rem;
    color: #777;
    opacity: 1
}

input,
select,
textarea {
    font-size: 16px;
    font-size: 1rem;
    outline: 0 none;
    padding: 11px
}

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;
    padding: 0;
    cursor: pointer
}

select {
    vertical-align: middle;
    background-image: url(../../img/arr2-3-down.svg);
    background-position: right 15px center;
    background-repeat: no-repeat;
    background-size: 10px
}

textarea {
    resize: none
}

label,
select {
    cursor: pointer
}

.form-wrap {
    font-size: 0
}

.form-wrap .form-inner {
    position: relative;
    overflow: hidden;
    margin: 0 auto
}

.form-wrap i {
    font-family: Arial, "微軟正黑體修正", "微軟正黑體", "Microsoft JhengHei", MHei, STHeitiTC-Light, sans-serif, Arial, Helvetica, "Helvetica Neue", Tahoma, Verdana;
    font-style: normal;
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: 900;
    color: #d90000;
    line-height: 1;
    text-shadow: .5px 0 0 #d90000
}

.form-wrap .item,
.form-wrap .item-sec {
    overflow: hidden
}

.form-wrap .item:last-child {
    padding-bottom: 0
}

.form-wrap .full {
    min-width: 100%
}

.form-wrap input,
.form-wrap select,
.form-wrap textarea {
    width: 100%
}

.form-wrap textarea {
    min-height: 100px
}

.form-wrap .btn-wrap,
.form-wrap .seccode {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.form-wrap .seccode {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.form-wrap .seccode img {
    display: block
}

.form-wrap .seccode .code {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    padding: 0 0 0 10px
}

/* .form-wrap .seccode .code:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: url(../../img/icon-refload.svg) center no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 1
} */

.form-wrap .btn-wrap {
    width: 100%;
    padding: 15px 0 0
}

.form-wrap .btn-wrap .btn {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    margin: 0 10px;
    cursor: pointer;
}

.form-wrap .btn-wrap .btn.disabled {
    cursor: no-drop;
    background-color: #9c9c9c;
    border-color: #9c9c9c;
}

.form01 .form-inner,
.form01 .keyword {
    border-radius: 50px
}

.form01 .form-inner {
    -webkit-box-shadow: 0 0 3px rgba(51, 51, 51, .3);
    box-shadow: 0 0 3px rgba(51, 51, 51, .3)
}

.form01 .keyword {
    border: 1px solid rgba(213, 0, 4, 0);
    padding-left: 20px;
    padding-right: 120px
}

.form01 .keyword:focus {
    border-color: var(--main-color);
    background-color: #fff
}

.form01 .btn {
    font-size: 14px;
    font-size: .875rem;
    position: absolute;
    right: -1px;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    z-index: 1;
    padding: 10px 15px
}

@media screen and (min-width:768px) {
    .form01 .btn {
        font-size: 16px;
        font-size: 1rem
    }
}

.form04,
.form06 {
    font-size: 15px;
    font-size: .9375rem
}

@media screen and (min-width:768px) {

    .form04,
    .form06 {
        font-size: 16px;
        font-size: 1rem
    }
}

.form04 table,
.form06 table {
    width: 100%;
    border-collapse: collapse;
    text-align: left
}

.form04 td,
.form04 th {
    display: block
}

.form04 td .list05 {
    padding: 0 0 10px
}

.form04 input:focus,
.form04 select:focus,
.form04 textarea:focus {
    border-color: var(--main-color);
    background-color: #fff
}

.form04 td {
    padding: 0 0 25px
}

.form04 .list05 span:before,
.form04 input,
.form04 select,
.form04 textarea {
    background-color: none;
    border: 1px solid #ddd
}

.form04 .list05 span:before:focus,
.form04 input:focus,
.form04 select:focus,
.form04 textarea:focus {
    border-bottom-color: var(--main-color)
}

.form06 td,
.form06 th {
    padding: 5px 0
}

.form06 th {
    white-space: nowrap;
    padding-right: 5px
}

.form06 input {
    width: 100%;
    border: 1px solid #ddd
}

.form06 input:focus {
    border-color: var(--main-color)
}

@media screen and (min-width:640px) {
    .form-wrap .seccode {
        max-width: 400px
    }

    .form04 td,
    .form04 th {
        display: table-cell;
        vertical-align: top
    }

    .form04 th {
        padding: 5px 0 0;
        white-space: nowrap
    }

    .form04 td {
        width: 100%;
        padding: 0 0 15px 10px
    }
}

@media screen and (min-width:769px) {
    .form-wrap .btn-wrap {
        padding: 20px 0 0
    }

    .form-wrap .btn-wrap .btn {
        margin: 0 30px
    }
}

.float-btn {
    position: fixed;
    right: 10px;
    bottom: -50px;
    width: 100%;
    height: 0;
    text-align: center;
    z-index: 99;
    -webkit-transition: all .5s;
    transition: all .5s
}

.float-btn.block {
    bottom: 10px
}

.float-btn.block.end {
    position: relative;
    bottom: -25px
}

.float-btn .social-wrap {
    width: 50px;
    bottom: 60px
}

.float-btn .social-wrap ul {
    margin: -5px
}

.float-btn .social-wrap li {
    padding: 5px
}

.float-btn .social-wrap a {
    width: 50px;
    height: 50px
}

.float-btn .social-wrap,
.gotop {
    line-height: 1;
    overflow: hidden;
    position: absolute;
    right: 0
}

.gotop {
    font-size: 0;
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    bottom: 0
}

.gotop:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat
}

.gotop02:before {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    z-index: 1
}

.gotop02:before {
    background-image: url(../../img/gotop02.png);
    background-size: contain
}

@media screen and (min-width:769px) {
    .float-btn {
        bottom: -64px
    }

    .float-btn.block.end {
        bottom: -32px
    }

    .float-btn .social-wrap {
        width: 64px;
        bottom: 74px
    }

    .float-btn .social-wrap a {
        width: 64px;
        height: 64px
    }

    .gotop {
        width: 64px;
        height: 64px
    }

    .gotop:hover {
        -webkit-transform: scale(.9);
        -ms-transform: scale(.9);
        transform: scale(.9)
    }

    .gotop02 {
        -webkit-filter: saturate(0);
        filter: saturate(0)
    }

    .gotop02:hover {
        -webkit-filter: saturate(1);
        filter: saturate(1)
    }
}

.item,
.item-group,
.item-inner,
.item-sec {
    overflow: hidden;
    position: relative
}

.item-group,
.item-group .figure {
    margin: 0 auto
}

.item-inner {
    display: block
}

.ig01,
.ig02,
.ig06,
.ig10 {
    margin: 0 -5px
}

.ig01>div,
.ig02>div,
.ig06>div,
.ig10>div {
    padding: 0 5px 40px
}

.ig02>div {
    padding: 5px
}

.ig03>div {
    padding: 20px 10px
}

.ig04 .year,
.ig14 .year,
.ig15 .year {
    font-size: 28px;
    font-size: 1.75rem;
    color: var(--main-color)
}

@media screen and (min-width:768px) {

    .ig04 .year,
    .ig14 .year,
    .ig15 .year {
        font-size: 40px;
        font-size: 2.5rem
    }
}

@media screen and (min-width:1200px) {

    .ig04 .year,
    .ig14 .year,
    .ig15 .year {
        font-size: 50px;
        font-size: 3.125rem
    }
}

.ig04 .list,
.ig14 .list,
.ig15 .list {
    text-align: left
}

.ig04>div:nth-child(odd) .is1:before {
    background: var(--main-color);
    border: 3px solid var(--main-color)
}

.ig04>div:nth-child(even) .is1:before {
    background: #fff;
    border: 3px solid var(--main-color)
}

.ig04 .item-inner:before {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    background: #ddd;
    position: absolute;
    left: 6px;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    z-index: 1;
    z-index: 0
}

.ig04 .is1 {
    text-align: left;
    padding: 0 0 0 30px;
    position: relative
}

.ig04 .is1:before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    z-index: 1
}

.ig04 .is2 {
    padding: 10px 0 30px 30px;
    color: #666
}

.ig05 {
    margin: 0 -5px
}

.ig05>div {
    padding: 0 5px 30px
}

.ig06 .is2 {
    padding: 15px 20px 0
}

.ig07>div,
.ig14>div,
.ig15>div {
    padding: 0 0 40px
}

.ig09>div {
    padding: 0 0 40px;
    text-align: left
}

.ig09 h3 {
    font-size: 18px;
    font-size: 1.125rem
}

@media screen and (min-width:768px) {
    .ig09 h3 {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.ig09 .text {
    font-size: 15px;
    font-size: .9375rem;
    color: #666;
    padding: 10px 0 0;
    word-break: break-all
}

@media screen and (min-width:768px) {
    .ig09 .text {
        font-size: 16px;
        font-size: 1rem
    }
}

.ig09 .map {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    font-size: 1rem;
    font-weight: 700;
    padding: 5px 0 0;
    color: var(--main-color)
}

.ig09 .map:before {
    width: 10px;
    height: 13px;
    background: url(../../img/icon-mail3.svg) center no-repeat;
    margin-right: 5px
}

.ig09 .map:hover {
    text-decoration: underline
}

.ig09 .btn {
    vertical-align: middle;
    padding: 2px;
    font-weight: 700
}

.ig10 .is1 {
    text-align: left;
    padding: 0 5px 10px
}

.ig12>div {
    padding: 0 0 20px
}

.ig13>div {
    padding: 20px 0;
    border-bottom: 1px dashed #ddd
}

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

.ig14 .is1 {
    padding: 0 0 15px
}

.ig14 .is1:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 12px 12px;
    border-color: transparent transparent #f7f7f7 transparent;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    z-index: 1
}

.ig14 .is2 {
    padding: 20px;
    background: #f7f7f7
}

.ig14 .year {
    text-align: center
}

.ig15 .is1 {
    text-align: center;
    position: relative;
    margin-bottom: -20px
}

.ig15 .is1:after,
.ig15 .is1:before {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background: var(--main-color);
    position: absolute;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

.ig15 .is1:before {
    right: 30%;
    margin-right: 60px
}

.ig15 .is1:after {
    left: 70%;
    margin-left: 60px
}

.ig15 .is2 {
    padding: 30px 3% 20px;
    border: 3px solid var(--main-color);
    border-top: none
}

.ig15 .year {
    color: var(--main-color);
    letter-spacing: 2px;
    line-height: 1;
    padding: 0 0 0 40%
}

.test {
    overflow: hidden
}

.test>div {
    float: left;
    padding: 10px
}

.test .item-inner {
    width: 350px
}

@media screen and (min-width:480px) {
    .ig01 {
        margin: 0 -20px 0
    }

    .ig01>div {
        padding: 0 20px 50px
    }
}

@media screen and (min-width:640px) {
    .ig05 {
        margin: 0 -15px
    }

    .ig05>div {
        padding: 0 15px 50px
    }

    .ig07>div {
        padding: 0 0 70px
    }
}

@media screen and (min-width:768px) {
    .ig03>div {
        padding: 0 3% 40px
    }

    .ig06 {
        margin: 0 auto
    }

    .ig06>div {
        padding: 0 0 60px
    }

    .ig06>div:nth-child(odd) .is2 {
        padding-left: 5%
    }

    .ig06>div:nth-child(even) {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-flow: row-reverse;
        flex-flow: row-reverse
    }

    .ig06>div:nth-child(even) .is2 {
        padding-right: 5%
    }

    .ig06 .is2 {
        padding: 15px
    }

    .ig10 {
        margin: 0 -30px
    }

    .ig10>div {
        padding: 0 30px 60px
    }

    .ig14>div,
    .ig15>div {
        padding: 0 0 80px
    }

    .ig15 .is1:before {
        right: 25%;
        margin-right: 90px
    }

    .ig15 .is1:after {
        left: 75%;
        margin-left: 90px
    }

    .ig15 .is2 {
        padding: 50px 5%
    }

    .ig15 .year {
        padding: 0 0 0 50%
    }
}

@media screen and (min-width:769px) {
    .ig04 .item-inner {
        display: table-row
    }

    .ig04 .item-inner:before {
        left: 148px
    }

    .ig04 .item-sec {
        display: table-cell;
        vertical-align: top
    }

    .ig04 .is1 {
        padding: 0 70px 0 0
    }

    .ig04 .is1:before {
        width: 20px;
        height: 20px;
        left: auto;
        right: 4px;
        top: 15px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }

    .ig04 .is2 {
        padding: 15px 0 55px 30px
    }

    .ig09 {
        margin: 0 -2%
    }

    .ig09>div {
        padding: 0 2% 40px
    }

    .ig13>div {
        padding: 0
    }

    .ig14>div {
        padding: 25px 0
    }

    .ig14>div:nth-child(odd) .is1 {
        padding: 0 3% 0 0
    }

    .ig14>div:nth-child(odd) .is1:before {
        left: auto;
        right: 0;
        bottom: 50%;
        -webkit-transform: translate3d(0, 50%, 0) rotate(-90deg) scale(2.5);
        transform: translate3d(0, 50%, 0) rotate(-90deg) scale(2.5)
    }

    .ig14>div:nth-child(even) .item-inner {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-flow: row-reverse;
        flex-flow: row-reverse
    }

    .ig14>div:nth-child(even) .is1 {
        padding: 0 0 0 3%
    }

    .ig14>div:nth-child(even) .is1:before {
        left: 0;
        bottom: 50%;
        -webkit-transform: translate3d(0, 50%, 0) rotate(90deg) scale(2.5);
        transform: translate3d(0, 50%, 0) rotate(90deg) scale(2.5)
    }

    .ig14 .item-inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .ig14 .is1 {
        min-width: 20%
    }

    .ig14 .is2 {
        padding: 30px
    }
}

@media screen and (min-width:1200px) {
    .ig02>div {
        padding: 8px
    }

    .ig04 .item-inner:before {
        left: 170px
    }
}

.pic {
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1
}

.ii102 h3,
.ii104 h3,
.ii105 h3,
.ii106 h3,
.ii107 h3,
.ii109 h3,
.ii110 h3,
.ii111 h3,
.ii112 h3,
.ii116 h3,
.ii117 h3 {
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5
}

@media screen and (min-width:768px) {

    .ii102 h3,
    .ii104 h3,
    .ii105 h3,
    .ii106 h3,
    .ii107 h3,
    .ii109 h3,
    .ii110 h3,
    .ii111 h3,
    .ii112 h3,
    .ii116 h3,
    .ii117 h3 {
        font-size: 18px;
        font-size: 1.125rem
    }
}

.ii102 span,
.ii104 span,
.ii105 span,
.ii106 span,
.ii107 span,
.ii109 span,
.ii110 span,
.ii111 span,
.ii112 span,
.ii116 span,
.ii117 span {
    font-size: 12px;
    font-size: .75rem
}

@media screen and (min-width:768px) {

    .ii102 span,
    .ii104 span,
    .ii105 span,
    .ii106 span,
    .ii107 span,
    .ii109 span,
    .ii110 span,
    .ii111 span,
    .ii112 span,
    .ii116 span,
    .ii117 span {
        font-size: 14px;
        font-size: .875rem
    }
}

.ii102 .text,
.ii104 .text,
.ii105 .text,
.ii107 .text,
.ii109 .text,
.ii110 .text,
.ii111 .text,
.ii112 .text {
    text-align: center;
    color: #000
}

.ii102 span,
.ii104 span,
.ii105 span,
.ii107 span,
.ii109 span,
.ii110 span,
.ii111 span,
.ii112 span {
    display: block;
    opacity: .7;
    padding-top: 5px
}

.ii106 .text,
.ii116 .text,
.ii117 .text {
    text-align: left;
    padding: 10px 5px 0
}

.ii106 h3,
.ii116 h3,
.ii117 h3 {
    width: 100%;
    font-weight: 400;
    color: #000
}

.ii106 span,
.ii116 span,
.ii117 span {
    display: inline-block;
    letter-spacing: 1px;
    margin-bottom: 10px
}

.ii101 .figure:after,
.ii101 .figure:before,
.ii102 .figure:after,
.ii102 .figure:before,
.ii104 .figure:after,
.ii104 .figure:before,
.ii105 .figure:after,
.ii105 .figure:before,
.ii106 .figure:after,
.ii106 .figure:before,
.ii107 .figure:after,
.ii107 .figure:before,
.ii108 .figure:after,
.ii108 .figure:before,
.ii112 .figure:after,
.ii112 .figure:before,
.ii115 .figure:after,
.ii115 .figure:before,
.ii116 .figure:after,
.ii116 .figure:before,
.ii117 .figure:after,
.ii117 .figure:before,
.ii201 .figure:after,
.ii201 .figure:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%
}

.ii101 .figure:before,
.ii102 .figure:before,
.ii104 .figure:before,
.ii105 .figure:before,
.ii106 .figure:before,
.ii107 .figure:before,
.ii108 .figure:before,
.ii112 .figure:before,
.ii115 .figure:before,
.ii116 .figure:before,
.ii117 .figure:before,
.ii201 .figure:before {
    width: 101%;
    height: 101%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    opacity: 0;
    z-index: 2
}

.ii101 .figure:after,
.ii102 .figure:after,
.ii104 .figure:after,
.ii105 .figure:after,
.ii106 .figure:after,
.ii107 .figure:after,
.ii108 .figure:after,
.ii112 .figure:after,
.ii115 .figure:after,
.ii116 .figure:after,
.ii117 .figure:after,
.ii201 .figure:after {
    width: 100%;
    height: 100%;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(0);
    transform: translate3d(-50%, -50%, 0) scale(0);
    z-index: 3
}

.ii101 .figure:before,
.ii102 .figure:before,
.ii106 .figure:before,
.ii107 .figure:before,
.ii108 .figure:before,
.ii115 .figure:before,
.ii116 .figure:before,
.ii117 .figure:before,
.ii201 .figure:before {
    background: linear-gradient(160deg, rgba(0, 0, 0, .4) 20%, rgba(0, 0, 0, .7) 80%)
}

.ii101 {
    height: 100%;
    background: rgba(255, 255, 255, .9)
}

.ii101 .figure:after {
    background: url(../../img/icon-plus-1.svg) center no-repeat;
    background-size: 50px;
    -webkit-filter: saturate(0) brightness(10);
    filter: saturate(0) brightness(10)
}

.ii101 .is2 {
    padding: 10px 15px 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ii101 .date {
    text-align: center;
    font-family: OpenSansBold, "微軟正黑體修正", "微軟正黑體", "Microsoft JhengHei", MHei, STHeitiTC-Light, sans-serif, Arial, Helvetica, "Helvetica Neue", Tahoma, Verdana;
    color: var(--main-color);
    padding: 0 15px 0 0
}

.ii101 .date h2,
.ii101 .date span {
    line-height: 1
}

.ii101 .date h2 {
    font-size: 40px;
    font-size: 2.5rem
}

@media screen and (min-width:768px) {
    .ii101 .date h2 {
        font-size: 54px;
        font-size: 3.375rem
    }
}

.ii101 .date span {
    font-size: 15px;
    font-size: .9375rem;
    font-weight: 700
}

@media screen and (min-width:768px) {
    .ii101 .date span {
        font-size: 19px;
        font-size: 1.1875rem
    }
}

.ii101 .text {
    text-align: left;
    font-size: 15px;
    font-size: .9375rem
}

@media screen and (min-width:768px) {
    .ii101 .text {
        font-size: 16px;
        font-size: 1rem
    }
}

.ii102 .text {
    color: #fff;
    background: rgba(0, 0, 0, .7);
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    z-index: 1;
    width: 101%;
    padding: 10px;
    z-index: 4;
    -webkit-transition: bottom .3s;
    transition: bottom .3s
}

.ii103 .text {
    padding: 15px 0 0;
    font-size: 15px;
    font-size: .9375rem
}

@media screen and (min-width:768px) {
    .ii103 .text {
        font-size: 16px;
        font-size: 1rem
    }
}

.ii103 h3 {
    font-size: 18px;
    font-size: 1.125rem;
    padding: 0 0 10px
}

.ii104,
.ii105 {
    background: #fff
}

.ii104:before,
.ii105:before {
    border: 1px solid #ddd;
    z-index: 3
}

.ii104 .text,
.ii105 .text {
    padding: 10px 10px 15px
}

.ii104 {
    height: 100%
}

.ii104 .figure:after {
    background: url(../../img/hover03.png) center no-repeat
}

.ii104 .text {
    border-top: 1px solid #ddd;
    overflow: visible;
    position: relative
}

.ii104 .text:before {
    content: '';
    display: block;
    width: 45%;
    height: 3px;
    background: var(--main-color);
    position: absolute;
    top: -2px;
    left: 50%;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    z-index: 2
}

.ii105 {
    height: 100%
}

.ii105 .figure:after {
    background: url(../../img/hover01.png) center no-repeat
}

.ii106 span,
.ii116 span {
    font-weight: 700;
    color: var(--main-color)
}

.ii106 span:before,
.ii116 span:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: -2px 10px 0 0;
    background: var(--main-color)
}

.ii106 {
    max-width: 360px;
    margin: 0 auto
}

.ii106 .figure:after {
    background: url(../../img/icon-plus-1.svg) center no-repeat;
    background-size: 30px;
    -webkit-filter: saturate(0) brightness(10);
    filter: saturate(0) brightness(10)
}

.ii106 span:before {
    width: 4px;
    height: 16px
}

.ii107 {
    max-width: 250px;
    margin: 0 auto
}

.ii107 .figure,
.ii107 .figure .pic {
    border-radius: 5px
}

.ii107 .figure .pic {
    padding: 5px;
    -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, .1);
    box-shadow: 0 0 5px rgba(255, 255, 255, .1)
}

.ii107 .figure:after {
    background: url(../../img/hover03.png) center no-repeat
}

.ii107 .text {
    padding: 8px 0 0
}

.ii108 {
    height: 100%
}

.ii108 .text {
    text-align: left;
    color: #000;
    padding: 20px 10px 0 20px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    -webkit-transition: .3s;
    transition: .3s
}

.ii108 h3 {
    font-family: OpenSansBold, "微軟正黑體修正", "微軟正黑體", "Microsoft JhengHei", MHei, STHeitiTC-Light, sans-serif, Arial, Helvetica, "Helvetica Neue", Tahoma, Verdana;
    font-size: 22px;
    font-size: 1.375rem
}

@media screen and (min-width:768px) {
    .ii108 h3 {
        font-size: 32px;
        font-size: 2rem
    }
}

.ii108 h3:after {
    content: '';
    display: block;
    width: 50px;
    height: 4px;
    background: var(--main-color);
    margin: 10px 0 15px
}

.ii108 span {
    font-size: 14px;
    font-size: .875rem;
    opacity: .7
}

@media screen and (min-width:768px) {
    .ii108 span {
        font-size: 16px;
        font-size: 1rem
    }
}

.ii109 .text {
    padding: 10px 10px 15px
}

.ii109 h3 {
    font-size: 18px;
    font-size: 1.125rem
}

@media screen and (min-width:768px) {
    .ii109 h3 {
        font-size: 22px;
        font-size: 1.375rem
    }
}

.ii110,
.ii111,
.ii112 {
    padding: 0 0 30px
}

.ii110 .text,
.ii111 .text,
.ii112 .text {
    position: absolute;
    bottom: 10px;
    left: 50%;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    z-index: 1;
    min-width: 80%;
    text-align: center;
    padding: 10px;
    z-index: 4;
    -webkit-transition: .3s;
    transition: .3s
}

.ii110 .text {
    background: #000;
    color: #fff
}

.ii111 .text {
    background: rgba(255, 255, 255, .8);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    box-shadow: 0 0 10px rgba(0, 0, 0, .2)
}

.ii112 .text {
    background: var(--main-color);
    color: #fff
}

.ii113,
.ii114 {
    font-size: 0
}

.ii113 .figure:before,
.ii114 .figure:before {
    z-index: 2
}

.ii113 .text,
.ii114 .text {
    text-align: center;
    color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    z-index: 1;
    min-width: 90%;
    z-index: 3;
    -webkit-transition: .3s;
    transition: .3s
}

.ii113 span,
.ii114 span {
    display: inline-block;
    color: #fff;
    opacity: 0;
    -webkit-transition: .3s;
    transition: .3s
}

.ii113 .figure:before {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--main-color)), to(#000));
    background: linear-gradient(to bottom, var(--main-color) 0, #000 100%);
    opacity: .7;
    height: 0
}

.ii113 h3 {
    font-size: 18px;
    font-size: 1.125rem
}

@media screen and (min-width:768px) {
    .ii113 h3 {
        font-size: 24px;
        font-size: 1.5rem
    }
}

.ii114 .figure:before {
    background: rgba(0, 0, 0, .5)
}

.ii114 h3 {
    font-size: 24px;
    font-size: 1.5rem;
    color: #fff
}

@media screen and (min-width:768px) {
    .ii114 h3 {
        font-size: 32px;
        font-size: 2rem
    }
}

@media screen and (min-width:1200px) {
    .ii114 h3 {
        font-size: 36px;
        font-size: 2.25rem
    }
}

.ii115 {
    font-size: 0
}

.ii115 .text {
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, .7);
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    z-index: 1;
    width: 100%;
    padding: 10px;
    z-index: 4;
    -webkit-transition: .3s;
    transition: .3s
}

.ii115 h3 {
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: 400
}

@media screen and (min-width:768px) {
    .ii115 h3 {
        font-size: 30px;
        font-size: 1.875rem
    }
}

.ii115 h3:after {
    content: '';
    display: block;
    width: 10%;
    height: 2px;
    background: rgba(255, 255, 255, .3);
    margin: 10px auto
}

.ii115 span {
    font-size: 12px;
    font-size: .75rem;
    opacity: .7
}

@media screen and (min-width:768px) {
    .ii115 span {
        font-size: 14px;
        font-size: .875rem
    }
}

.ii116 {
    max-width: 360px;
    margin: 0 auto
}

.ii116 .figure:after {
    background: url(../../img/icon-plus-1.svg) center no-repeat;
    background-size: 30px;
    -webkit-filter: saturate(0) brightness(10);
    filter: saturate(0) brightness(10)
}

.ii116 span:before {
    width: 50px;
    height: 2px;
    opacity: .5
}

.ii117 {
    max-width: 360px;
    margin: 0 auto
}

.ii117 .figure:after {
    background: url(../../img/icon-plus-1.svg) center no-repeat;
    background-size: 30px;
    -webkit-filter: saturate(0) brightness(10);
    filter: saturate(0) brightness(10)
}

.ii117 span {
    background: #eee;
    padding: 5px 15px;
    margin-left: -5px;
    -webkit-transition: .3s;
    transition: .3s
}

.ii201 .item-sec>h3,
.ii202 .item-sec>h3 {
    font-size: 20px;
    font-size: 1.25rem;
    color: #000
}

@media screen and (min-width:768px) {

    .ii201 .item-sec>h3,
    .ii202 .item-sec>h3 {
        font-size: 26px;
        font-size: 1.625rem
    }
}

.ii201 .is2,
.ii202 .is2 {
    text-align: left;
    padding: 10px 0 0
}

.ii201 {
    margin: 0 auto
}

.ii201,
.ii201 .figure {
    max-width: 360px
}

.ii201 .figure:after {
    background: url(../../img/icon-plus-1.svg) center no-repeat;
    background-size: 30px;
    -webkit-filter: saturate(0) brightness(10);
    filter: saturate(0) brightness(10)
}

.ii201 .text {
    border-top: 1px solid #eee;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 15px 0 0
}

.ii201 .btn,
.ii201 .date {
    font-size: 14px;
    font-size: .875rem
}

.ii201 .date {
    display: block;
    color: #666;
    padding: 10px 0
}

.ii201 .btn {
    border: 1px solid var(--main-color);
    color: var(--main-color);
    padding: 8px 20px;
    min-width: 100px;
    margin: 15px 0 0
}

.ii202 .is2>div {
    padding: 20px 0 0
}

.ii301,
.ii302,
.ii303,
.ii304,
.ii305,
.ii306 {
    text-align: left
}

.ii301>div+div,
.ii302>div+div,
.ii303>div+div,
.ii304>div+div,
.ii305>div+div,
.ii306>div+div {
    padding-top: 8px
}

.ii301 h3,
.ii302 h3,
.ii303 h3,
.ii304 h3,
.ii305 h3,
.ii306 h3 {
    font-size: 16px;
    font-size: 1rem;
    font-weight: 400
}

@media screen and (min-width:768px) {

    .ii301 h3,
    .ii302 h3,
    .ii303 h3,
    .ii304 h3,
    .ii305 h3,
    .ii306 h3 {
        font-size: 18px;
        font-size: 1.125rem
    }
}

.ii301 span,
.ii302 span,
.ii303 span,
.ii304 span,
.ii305 span,
.ii306 span {
    display: inline-block;
    text-align: center;
    font-size: 12px;
    font-size: .75rem
}

@media screen and (min-width:768px) {

    .ii301 span,
    .ii302 span,
    .ii303 span,
    .ii304 span,
    .ii305 span,
    .ii306 span {
        font-size: 14px;
        font-size: .875rem
    }
}

.ii301:before,
.ii302:before,
.ii303:before,
.ii305:before,
.ii306:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    z-index: 1
}

.ii301:before,
.ii305:before {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    left: 0
}

.ii301 span,
.ii305 span {
    padding: 5px 10px;
    background: #eee
}

.ii301 {
    min-height: 25px;
    padding: 0 0 0 40px
}

.ii301:before {
    width: 25px;
    height: 25px;
    background-image: url(../../img/icon01.jpg)
}

.ii302 span,
.ii303 span,
.ii306 span {
    opacity: .7
}

.ii302 {
    padding: 0 40px 0 0
}

.ii302:before {
    width: 30px;
    height: 30px;
    background: url(../../img/arr3-3-next.svg) center no-repeat, #fff;
    background-size: 50%;
    border: 1px solid #ddd;
    border-radius: 50%;
    right: 0
}

.ii303 {
    padding: 0 40px 0 0
}

.ii303:before {
    width: 25px;
    height: 25px;
    background: url(../../img/icon-download.svg) center no-repeat;
    right: 0
}

.ii304 span {
    background: #f7f7f7;
    font-weight: 700;
    padding: 8px 20px;
    border: 1px solid #ddd;
    opacity: .5
}

.ii305 {
    min-height: 30px;
    border: 1px solid #ddd;
    padding: 10px 5px 10px 50px
}

.ii305:before {
    width: 30px;
    height: 30px;
    left: 10px;
    background-image: url(../../img/icon03.png)
}

.ii306 {
    border: 1px solid #ddd;
    padding: 10px 50px 10px 10px
}

.ii306:before {
    width: 25px;
    height: 25px;
    background: url(../../img/icon-download.svg) center no-repeat;
    right: 10px
}

@media screen and (min-width:640px) {
    .ii201 {
        max-width: 100%
    }

    .ii201 .is2 {
        padding: 0 0 0 5%;
        -ms-flex-item-align: center;
        align-self: center
    }
}

@media screen and (min-width:768px) {
    .ii202 .is2 {
        padding: 0 0 0 5%
    }
}

@media screen and (min-width:769px) {

    .ii101:hover .figure:before,
    .ii102:hover .figure:before,
    .ii104:hover .figure:before,
    .ii105:hover .figure:before,
    .ii106:hover .figure:before,
    .ii107:hover .figure:before,
    .ii108:hover .figure:before,
    .ii112:hover .figure:before,
    .ii115:hover .figure:before,
    .ii116:hover .figure:before,
    .ii117:hover .figure:before,
    .ii201:hover .figure:before {
        opacity: 1
    }

    .ii101:hover .figure:after,
    .ii102:hover .figure:after,
    .ii104:hover .figure:after,
    .ii105:hover .figure:after,
    .ii106:hover .figure:after,
    .ii107:hover .figure:after,
    .ii108:hover .figure:after,
    .ii112:hover .figure:after,
    .ii115:hover .figure:after,
    .ii116:hover .figure:after,
    .ii117:hover .figure:after,
    .ii201:hover .figure:after {
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
        transform: translate3d(-50%, -50%, 0) scale(1)
    }

    .ii101 .is2 {
        padding: 10px 5% 20px
    }

    .ii101:hover {
        background: 0 0
    }

    .ii102:hover .text {
        width: auto;
        min-width: 30%;
        background: rgba(0, 0, 0, 0);
        border: 1px solid #fff;
        bottom: 50%;
        -webkit-transform: translate3d(-50%, 50%, 0);
        transform: translate3d(-50%, 50%, 0)
    }

    .ii103 .text {
        padding: 20px 0 0
    }

    .ii104:hover .text:before {
        width: 100%
    }

    .ii105:hover:before {
        border: 2px solid var(--main-color)
    }

    .ii106,
    .ii116,
    .ii117 {
        max-width: none
    }

    .ii106 .text,
    .ii116 .text,
    .ii117 .text {
        padding: 15px 5px 0
    }

    .ii107:hover h3 {
        color: var(--main-color)
    }

    .ii108 .text {
        padding: 45px 20px 10px 50px
    }

    .ii108 h3:after {
        width: 70px
    }

    .ii108:hover .text {
        color: #fff
    }

    .ii109:hover h3 {
        color: var(--main-color)
    }

    .ii110:hover .text,
    .ii111:hover .text {
        background: var(--main-color);
        bottom: 50%;
        -webkit-transform: translate3d(-50%, 50%, 0);
        transform: translate3d(-50%, 50%, 0)
    }

    .ii111:hover .text {
        color: #fff
    }

    .ii112 {
        padding: 0
    }

    .ii112 .text {
        bottom: 50%;
        -webkit-transform: translate3d(-50%, 50%, 0);
        transform: translate3d(-50%, 50%, 0);
        opacity: 0
    }

    .ii112:hover .text {
        opacity: 1
    }

    .ii113:hover span,
    .ii114:hover span {
        font-size: 14px;
        font-size: .875rem;
        opacity: .7;
        border: 1px solid #fff;
        padding: 10px;
        margin: 15px auto 0
    }

    .ii113:hover .figure:before {
        height: 100%
    }

    .ii113:hover .text {
        color: #fff
    }

    .ii114 .figure {
        overflow: hidden
    }

    .ii114 .figure:before {
        background: rgba(0, 0, 0, .3)
    }

    .ii114 .pic {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
        -webkit-transition: all .5s;
        transition: all .5s
    }

    .ii114:hover .figure:before {
        background: rgba(0, 0, 0, .5)
    }

    .ii114:hover .pic {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-filter: blur(0);
        filter: blur(0)
    }

    .ii115 .text {
        background: 0 0;
        bottom: auto;
        top: 50%;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(0);
        transform: translate3d(-50%, -50%, 0) scale(0)
    }

    .ii115 .text:after {
        margin: 20px auto
    }

    .ii115:hover .pic {
        -webkit-filter: blur(3px);
        filter: blur(3px)
    }

    .ii115:hover .text {
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
        transform: translate3d(-50%, -50%, 0) scale(1)
    }

    .ii117:hover span {
        background: var(--main-color);
        color: #fff
    }

    .ii201 .date {
        padding: 15px 0
    }

    .ii201 .btn {
        -webkit-filter: saturate(0);
        filter: saturate(0);
        opacity: .5;
        margin: 20px 0 0
    }

    .ii201:hover .title {
        color: var(--main-color)
    }

    .ii201:hover .btn {
        -webkit-filter: saturate(1);
        filter: saturate(1);
        opacity: 1
    }

    .ii202 .is2>div {
        padding: 25px 0 0
    }

    .ii301 .item-sec+.item-sec,
    .ii302 .item-sec+.item-sec,
    .ii303 .item-sec+.item-sec,
    .ii304 .item-sec+.item-sec,
    .ii305 .item-sec+.item-sec,
    .ii306 .item-sec+.item-sec {
        padding-top: unset;
        padding-left: 20px
    }

    .ii301 .item-sec,
    .ii302 .item-sec,
    .ii304 .item-sec {
        display: table-cell;
        vertical-align: middle
    }

    .ii301:hover,
    .ii302:hover {
        background: rgba(221, 221, 221, .3)
    }

    .ii301 {
        padding: 25px 30px 25px 80px
    }

    .ii301:before {
        width: 30px;
        height: 30px;
        left: 30px
    }

    .ii301:hover h3 {
        color: var(--main-color);
        text-decoration: underline
    }

    .ii301:hover span {
        background: var(--main-color);
        color: #fff
    }

    .ii302,
    .ii303,
    .ii306 {
        padding: 25px 100px 25px 30px
    }

    .ii302:before,
    .ii303:before,
    .ii306:before {
        right: 30px
    }

    .ii302:before {
        width: 40px;
        height: 40px
    }

    .ii302:hover:before {
        right: 10px
    }

    .ii302:hover span {
        font-weight: 700;
        opacity: 1
    }

    .ii302:hover h3 {
        color: var(--main-color)
    }

    .ii303:hover,
    .ii304:hover,
    .ii306:hover {
        background: var(--main-color);
        color: #fff
    }

    .ii303:hover:before,
    .ii304:hover:before,
    .ii306:hover:before {
        -webkit-filter: saturate(0) brightness(10);
        filter: saturate(0) brightness(10)
    }

    .ii303 .is1,
    .ii303 .is2,
    .ii306 .is1,
    .ii306 .is2 {
        display: inline-block;
        vertical-align: middle
    }

    .ii304 {
        padding: 20px 40px
    }

    .ii304:hover span {
        background: 0 0;
        color: #fff
    }

    .ii305 {
        padding: 25px 30px 25px 90px
    }

    .ii305:before {
        width: 40px;
        height: 40px;
        left: 30px
    }

    .ii305:hover {
        background: #f7f7f7;
        border-color: #f7f7f7;
        color: var(--main-color)
    }
}

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

.list li,
.list ul {
    list-style: none outside none
}

.list dt {
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: 700
}

@media screen and (min-width:768px) {
    .list dt {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.list dd,
.list li {
    font-size: 15px;
    font-size: .9375rem;
    position: relative
}

@media screen and (min-width:768px) {

    .list dd,
    .list li {
        font-size: 16px;
        font-size: 1rem
    }
}

.list .date {
    display: inline-block;
    vertical-align: middle;
    background: rgba(51, 51, 51, .1);
    font-size: 12px;
    font-size: .75rem;
    padding: 2px 10px;
    margin: -2px 10px 0 0
}

.list .btn {
    vertical-align: middle
}

.list01 dt,
.list02 dt,
.list03 dt {
    color: var(--main-color);
    padding: 0 0 5px
}

.list01 dd:before,
.list01 li:before,
.list02 dd:before,
.list02 li:before,
.list03 dd:before,
.list03 li:before {
    position: absolute;
    left: 0
}

.list01 dd a,
.list01 li a,
.list02 dd a,
.list02 li a,
.list03 dd a,
.list03 li a {
    display: inline-block
}

.list01 dd,
.list01 li {
    padding: 5px 0 5px 30px;
    counter-increment: number
}

.list01 dd:before,
.list01 li:before {
    color: #666;
    top: 5px
}

.list01 dd:nth-child(-1n+9):before,
.list01 li:nth-child(-1n+9):before {
    content: "0" counter(number) "."
}

.list01 dd:nth-child(n+10):before,
.list01 li:nth-child(n+10):before {
    content: counter(number) "."
}

.list02 dd,
.list02 li,
.list03 dd,
.list03 li {
    padding: 0 0 8px 20px
}

.list02 dd:before,
.list02 li:before,
.list03 dd:before,
.list03 li:before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 9px;
    z-index: 0
}

.list02 dd:last-child,
.list02 li:last-child,
.list03 dd:last-child,
.list03 li:last-child {
    padding-bottom: 0
}

.list02 dd:before,
.list02 li:before {
    background-image: url(../../img/list-icon01.png)
}

.list03 dd:before,
.list03 li:before {
    background-image: url(../../img/list-icon02.png)
}

.list04 dl,
.list04 ul {
    margin: 0 -5px
}

.list04 dd,
.list04 dt,
.list04 li {
    padding: 0 5px 10px
}

.list04 dt {
    color: var(--main-color)
}

.list04 dd,
.list04 li {
    display: inline-block;
    vertical-align: middle
}

.list05 ul {
    margin: -4px -20px -4px -5px
}

.list05 label,
.list05 li,
.list05 span {
    display: inline-block;
    vertical-align: middle
}

.list05 li {
    padding: 4px 20px 4px 5px
}

.list05 input,
.list05 span:after,
.list05 span:before {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    z-index: 1
}

.list05 input {
    width: 20px;
    height: 20px;
    opacity: 0;
    visibility: hidden
}

.list05 input:checked+span {
    color: var(--main-color)
}

.list05 input:checked+span:before {
    border-color: var(--main-color);
    background: var(--main-color)
}

.list05 input:checked+span:after {
    opacity: 1
}

.list05 input[type=checkbox]+span:before {
    width: 18px;
    height: 18px;
    border-radius: 3px
}

.list05 input[type=checkbox]+span:after {
    background-size: 80%;
    background-position: center
}

.list05 input[type=radio]+span:before {
    width: 20px;
    height: 20px;
    border-radius: 50%
}

.list05 input[type=radio]+span:after {
    background-size: 80%;
    background-position: 90% 60%
}

.list05 span {
    padding: 0 0 0 30px;
    position: relative
}

.list05 span:after,
.list05 span:before {
    content: '';
    display: block
}

.list05 span:after {
    width: 18px;
    height: 18px;
    background-image: url(../../img/icon-check.svg);
    background-repeat: no-repeat;
    -webkit-filter: saturate(0) brightness(10);
    filter: saturate(0) brightness(10);
    opacity: 0
}

.list06 {
    padding: 0
}

@media screen and (min-width:769px) {

    .list01 a:hover,
    .list02 a:hover,
    .list03 a:hover {
        color: var(--main-color);
        text-decoration: underline
    }

    .list05 input:checked+span,
    .list05 label:hover {
        color: var(--main-color)
    }
}

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

.nav-wrap,
.nav-wrap li,
.nav-wrap ul {
    -webkit-transition: all .3s;
    transition: all .3s
}

.nav-wrap .sub-nav {
    display: none
}

.nav-wrap .sub-nav ul {
    -webkit-animation: fadeIn .2s ease-in;
    animation: fadeIn .2s ease-in
}

.nav-wrap .on>.sub-nav {
    display: block
}

.nav-wrap a {
    position: relative
}

.info-nav {
    text-align: center
}

.info-nav li {
    display: inline-block
}

.info-nav .node1 .sub-switch>a,
.info-nav .node1>li>a {
    font-size: 15px;
    font-size: .9375rem
}

@media screen and (min-width:768px) {

    .info-nav .node1 .sub-switch>a,
    .info-nav .node1>li>a {
        font-size: 16px;
        font-size: 1rem
    }
}

.info-nav .node2>li>a {
    font-size: 14px;
    font-size: .875rem
}

@media screen and (min-width:768px) {
    .info-nav .node2>li>a {
        font-size: 15px;
        font-size: .9375rem
    }
}

.info-nav.r a {
    border-radius: 3px
}

.toggle-nav .nav-list {
    display: none
}

.toggle-nav.on .nav-list {
    display: block
}

.toggle-nav li {
    display: block;
    padding: 0
}

.nav-list {
    overflow: hidden
}

.sub-switch {
    position: relative
}

.sub-switch button {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    z-index: 1;
    background: 0 0;
    border: none;
    z-index: 10;
    cursor: pointer
}

.sub-switch button:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    line-height: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    right: 15px;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    z-index: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain
}

.path+.info-nav {
    padding-top: 30px
}

.nav01 li,
.nav02 li {
    display: block
}

.nav01,
.nav01 li,
.nav02,
.nav02 li {
    text-align: left
}

.nav01 .node1>li>a,
.nav02 .node1>li>a {
    padding: 12px 15px
}

.nav01 .node1 .sub-switch a,
.nav02 .node1 .sub-switch a {
    padding: 12px 30px 12px 15px
}

.nav01 .node1 .on .sub-switch a,
.nav01 .node1 .on>a,
.nav02 .node1 .on .sub-switch a,
.nav02 .node1 .on>a {
    font-weight: 700
}

.nav01 .has-nav.on,
.nav02 .has-nav.on {
    padding-bottom: 10px
}

.nav01 .sub-switch button:after {
    background-image: url(../../img/arr1-3-next.svg);
    -webkit-filter: saturate(0);
    filter: saturate(0)
}

.nav01 .on .sub-switch button:after {
    -webkit-filter: saturate(1);
    filter: saturate(1);
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(90deg);
    transform: translate3d(-50%, -50%, 0) rotate(90deg)
}

.nav01 .node1>li {
    border-bottom: 2px solid #f7f7f7
}

.nav01 .node1>.on {
    background: #f7f7f7;
    border-bottom: 2px solid #fff
}

.nav01 .node1>.on .sub-switch a,
.nav01 .node1>.on>a {
    color: var(--main-color)
}

.nav01 .node2>li>a {
    padding: 10px 10px 10px 40px
}

.nav01 .node2>li>a:before {
    content: '';
    display: block;
    width: 8px;
    height: 2px;
    background: #666;
    position: absolute;
    left: 20px;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    z-index: 1
}

.nav01 .node2>.on>a {
    color: #000
}

.nav01 .node2>.on>a:before {
    background: #000
}

.nav02 .sub-switch button:after {
    background-image: url(../../img/icon-plus-1.svg)
}

.nav02 .on .sub-switch button:after {
    background-image: url(../../img/icon-minus-1.svg)
}

.nav02 .node1>li {
    border: 1px solid #ddd;
    border-top: none
}

.nav02 .node1>.on {
    background: #f7f7f7
}

.nav02 .node1>.on .sub-switch a,
.nav02 .node1>.on>a {
    border-left: 3px solid var(--main-color)
}

.nav02 .node2>li>a {
    padding: 10px 10px 10px 18px
}

.nav02 .node2>.on>a {
    color: var(--main-color)
}

.nav07 ul,
.nav08 ul,
.nav09 ul {
    margin: 0 -3px
}

.nav07 li,
.nav08 li,
.nav09 li {
    padding: 3px
}

.nav07 a,
.nav08 a,
.nav09 a {
    padding: 10px 15px;
    opacity: .7
}

.nav07 .on a,
.nav08 .on a,
.nav09 .on a {
    font-weight: 700;
    opacity: 1
}

.nav07 .on a,
.nav08 .on a {
    background: var(--main-color);
    border-color: var(--main-color);
    color: #fff
}

.nav07 a,
.nav08 a {
    background: #eee;
    border: none
}

.nav08 a {
    border-radius: 40px
}

.nav09 a {
    border: 2px solid #ddd
}

.nav09 .on a {
    border-color: var(--main-color);
    color: var(--main-color)
}

.nav-title {
    width: 100%;
    font-size: 14px;
    font-size: .875rem;
    font-weight: 700;
    border-radius: 0;
    padding: 15px 20px;
    cursor: pointer
}

.nav-title01:after,
.nav-title02:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    line-height: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background: url(../../img/arr1-3-next.svg) center no-repeat;
    background-size: contain;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    margin: 0 0 0 10px
}

.nav-title01.on:after,
.nav-title02.on:after {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.nav-title01 {
    background: #f7f7f7;
    border: none
}

.nav-title01.on {
    border-bottom: 5px solid var(--main-color);
    color: var(--main-color)
}

.nav-title02 {
    background: 0 0;
    border: 1px solid #ddd
}

.nav-title02.on {
    background: #f7f7f7
}

@media screen and (min-width:769px) {
    .toggle-nav .nav-title {
        display: none
    }

    .toggle-nav .nav-list {
        display: block
    }

    .toggle-nav li {
        display: inline-block
    }

    .toggle-nav.r a {
        border-radius: 3px
    }

    .sub-switch a:hover {
        text-decoration: underline
    }

    .sub-switch button {
        width: 40px;
        left: auto;
        right: 0;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0)
    }

    .sub-switch button:hover:after {
        width: 15px;
        height: 15px
    }

    .nav01 li,
    .nav02 li {
        display: block
    }

    .nav01 .node1>li>a,
    .nav02 .node1>li>a {
        padding: 14px 15px
    }

    .nav01 .node1>li .sub-switch a,
    .nav02 .node1>li .sub-switch a {
        padding: 14px 40px 14px 15px
    }

    .nav01 .nav-list {
        border-top: 5px solid #f7f7f7
    }

    .nav01 .node1>li>a:hover {
        background: #f7f7f7
    }

    .nav01 .node2>li>a:hover {
        text-decoration: underline
    }

    .nav02 .nav-list {
        border-top: 1px solid #ddd
    }

    .nav02 .node1>li>a {
        padding: 14px 15px
    }

    .nav02 .node1>li>a:hover {
        background: #f7f7f7
    }

    .nav02 .node2>li>a:hover {
        text-decoration: underline
    }

    .nav07 a:hover,
    .nav08 a:hover,
    .nav09 a:hover {
        opacity: 1
    }

    .nav07 li,
    .nav08 li,
    .nav09 li {
        padding: 3px
    }

    .nav07 a,
    .nav08 a,
    .nav09 a {
        padding: 10px 20px
    }

    .nav07 a:hover,
    .nav08 a:hover {
        background: var(--main-color);
        color: #fff;
        border-color: var(--main-color)
    }

    .nav09 a:hover {
        color: var(--main-color);
        border-color: var(--main-color)
    }
}

.other01 .sec {
    padding: 10px 15px
}

.other01 .btn {
    white-space: nowrap;
    padding: 10px 30px
}

.other02 {
    color: #666;
    margin: -5px 5px 0
}

.other03 .inner-wrap {
    position: relative
}

.other03 .inner-wrap:before {
    content: '';
    display: block;
    width: 90%;
    height: 90%;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0)
}

.other03 .sec {
    position: relative
}

.other03 .text {
    width: 70%;
    margin: 0 auto
}

.gdpr {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    background: rgba(0, 0, 0, .7);
    padding: 20px 15px 5px;
    text-align: center;
    color: #fff
}

.gdpr .s2 {
    padding: 10px 0 0
}

.gdpr .btn {
    min-width: 100px;
    margin: 10px
}

@media screen and (min-width:768px) {
    .other01 {
        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
    }

    .other01 .sec {
        text-align: left;
        padding: 0 5%
    }

    .other03 .inner-wrap:before {
        width: 80%
    }

    .other03 .text {
        width: 65%
    }
}

@media screen and (min-width:769px) {
    .gdpr {
        padding: 20px 10px 15px
    }

    .gdpr>div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .gdpr .sec {
        padding: 0 10px
    }

    .gdpr .s1 {
        text-align: left
    }

    .gdpr .s2 {
        white-space: nowrap
    }

    .gdpr .btn {
        min-width: 140px
    }
}

.page-limit {
    text-align: center
}

.page-limit li {
    display: inline-block;
    vertical-align: middle;
    padding: 0 5px
}

.page-limit a {
    font-size: 15px;
    font-size: .9375rem;
    width: 30px;
    line-height: 30px
}

@media screen and (min-width:768px) {
    .page-limit a {
        font-size: 17px;
        font-size: 1.0625rem
    }
}

.page-limit .next a,
.page-limit .prev a {
    font-size: 0;
    z-index: 1;
    opacity: .7;
    -webkit-filter: saturate(0);
    filter: saturate(0)
}

.page-limit .next a:after,
.page-limit .prev a:after {
    content: '';
    display: block;
    width: 50%;
    height: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    z-index: 1
}

.page-limit .prev a:after {
    background-image: url(../../img/arr1-2-prev.svg)
}

.page-limit .next a:after {
    background-image: url(../../img/arr1-2-next.svg)
}

.pl01 .on a,
.pl04 .on a {
    background: var(--main-color);
    color: #fff
}

.pl02 a {
    border-bottom: 3px solid transparent
}

.pl02 .on a {
    color: var(--main-color);
    border-bottom: 3px solid var(--main-color)
}

.pl03 .on a {
    color: var(--main-color)
}

.pl03 .next a,
.pl03 .prev a {
    border: 1px solid var(--main-color)
}

.pl04 a {
    border-radius: 50%
}

@media screen and (min-width:769px) {
    .page-limit a {
        width: 36px;
        line-height: 36px
    }

    .page-limit .next a,
    .page-limit .prev a {
        opacity: .5
    }

    .page-limit .next a:hover,
    .page-limit .prev a:hover {
        background: 0 0;
        opacity: 1;
        -webkit-filter: saturate(1);
        filter: saturate(1)
    }

    .page-limit .next a:hover:after,
    .page-limit .prev a:hover:after {
        width: 80%;
        height: 80%
    }

    .pl01 a:hover,
    .pl04 a:hover {
        background: var(--main-color);
        color: #fff
    }

    .pl01 .next a:hover,
    .pl01 .prev a:hover,
    .pl04 .next a:hover,
    .pl04 .prev a:hover {
        color: var(--main-color)
    }

    .pl02 a:hover,
    .pl03 a:hover {
        color: var(--main-color)
    }

    .pl02 a:hover {
        border-bottom: 3px solid var(--main-color)
    }

    .pl02 .next a:hover,
    .pl02 .prev a:hover {
        border-bottom: none
    }

    .pl03 a:hover {
        text-decoration: underline
    }
}

.path {
    padding: 10px 15px 0
}

.path a,
.path li {
    display: inline-block;
    vertical-align: middle
}

.path li {
    font-size: 12px;
    font-size: .75rem;
    color: var(--main-color);
    padding: 4px 30px 4px 0
}

@media screen and (min-width:768px) {
    .path li {
        font-size: 15px;
        font-size: .9375rem
    }
}

.path li:after {
    content: '';
    display: block;
    width: 10px;
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    z-index: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .7;
    margin: 1px 0 0
}

.path li:first-child {
    padding-left: 0
}

.path li:last-child:after {
    display: none
}

.path a {
    -webkit-filter: saturate(0);
    filter: saturate(0)
}

.path01 li:after {
    content: " ";
    width: 4px;
    height: 4px;
    background-color: #000;
    border-radius: 50px;
}

.path02 li:after {
    content: '/';
    color: #666
}

@media screen and (min-width:769px) {
    .path {
        padding: 15px 20px 0
    }

    .path a:hover {
        -webkit-filter: saturate(1);
        filter: saturate(1);
        text-decoration: underline
    }
}

.swiper-sec {
    font-size: 0;
    position: relative
}

.swiper-sec .slide {
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.swiper-sec .swiper-slide {
    -webkit-transition: .5s;
    transition: .5s
}

.swiper-sec .swiper-slide>a {
    display: block
}

.swiper-sec .swiper-button-next,
.swiper-sec .swiper-button-prev,
.swiper-sec .swiper-pagination-bullet {
    outline: 0;
    -webkit-transition: all .3s;
    transition: all .3s
}

.sw01 .swiper-button-prev,
.sw02 .swiper-button-prev {
    left: 0
}

.sw01 .swiper-button-next,
.sw02 .swiper-button-next {
    right: 0
}

.sw01 .slide {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 0;
    padding: 0 0 100%;
    overflow: hidden
}

.sw01 .swiper-slide {
    opacity: 0
}

.sw01 .swiper-slide-active {
    opacity: 1
}

.sw01 .swiper-pagination {
    bottom: 20px
}

.sw02 .swiper-container {
    max-width: 640px
}

.sw02 .swiper-slide {
    width: 100%
}

.sw05 {
    padding: 10px 0 0
}

.sw05 .swiper-container {
    margin: 0 -3px
}

.sw05 .swiper-slide {
    padding: 0 3px;
    width: 25%
}

.sw05 .swiper-slide-thumb-active .item-inner {
    opacity: 1
}

.sw05 .swiper-slide-thumb-active .item-inner:after {
    border: 2px solid var(--main-color)
}

.sw05 .item-inner {
    opacity: .5;
    cursor: pointer;
    -webkit-transition: .3s;
    transition: .3s
}

.sw-page01 .swiper-pagination-bullet.on,
.sw-page02 .swiper-pagination-bullet.on {
    -webkit-transform: scale(1.4);
    -ms-transform: scale(1.4);
    transform: scale(1.4);
    opacity: 1
}

.sw-page01 .swiper-pagination-bullet.on {
    background: #fff;
    -webkit-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000
}

.sw-page02 .swiper-pagination-bullet {
    -webkit-box-shadow: 0 0 5px #fff;
    box-shadow: 0 0 5px #fff
}

@media screen and (min-width:480px) {
    .sw02 .swiper-slide {
        width: 50%;
        padding: 0 5px
    }

    .sw05 .swiper-slide {
        width: 20%
    }
}

@media screen and (min-width:641px) {
    .sw01 .slide {
        padding: 0 0 40%
    }
}

@media screen and (min-width:768px) {
    .sw02 .swiper-container {
        max-width: 960px
    }

    .sw02 .swiper-slide {
        width: 33.33333%
    }
}

@media screen and (min-width:769px) {
    .sw01 .swiper-pagination {
        bottom: 40px
    }

    .sw05 .item-inner:hover {
        opacity: 1
    }

    .sw-page01 .swiper-pagination-bullet,
    .sw-page02 .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        margin: 0 10px
    }

    .sw-page01 .swiper-pagination-bullet:hover,
    .sw-page02 .swiper-pagination-bullet:hover {
        opacity: 1
    }
}

@media screen and (min-width:1200px) {
    .sw02 .swiper-container {
        max-width: 1200px
    }

    .sw02 .swiper-slide {
        width: 25%
    }
}

.social-wrap {
    font-size: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.social-wrap li,
.social-wrap ul {
    margin: 0;
    padding: 0;
    list-style: none outside none
}

.social-wrap ul {
    margin: 0 -10px
}

.social-wrap li {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    padding: 5px 10px
}

.social-wrap a,
.social-wrap li {
    position: relative;
    overflow: hidden
}

.social-wrap a {
    font-size: 0;
    display: block;
    width: 30px;
    height: 30px
}

.social-wrap a:after,
.social-wrap a:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    z-index: 1
}

.social-wrap .label {
    font-size: 14px;
    font-size: .875rem;
    color: #aaa;
    padding: 2px 15px 0 0
}

.social-wrap .label,
.social-wrap .label+ul {
    display: inline-block;
    vertical-align: middle
}

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

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

.social03 .icon-linkedin:before {
    background-image: url(../../img/social-o-in.svg)
}

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

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

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

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

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

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

.social03 .icon-telegram:before {
    background-image: url(../../img/social-o-tg.svg)
}

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

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

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

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

.social03 .icon-youtube2:before {
    background-image: url(../../img/social-o-yt2.svg)
}

.social06 .icon-facebook:before,
.social07 .icon-facebook:before {
    background-image: url(../../img/social-fb.svg)
}

.social06 .icon-instagram:before,
.social07 .icon-instagram:before {
    background-image: url(../../img/social-ig.svg)
}

.social06 .icon-linkedin:before,
.social07 .icon-linkedin:before {
    background-image: url(../../img/social-in.svg)
}

.social06 .icon-line:before,
.social07 .icon-line:before {
    background-image: url(../../img/social-line.svg)
}

.social06 .icon-pinterest:before,
.social07 .icon-pinterest:before {
    background-image: url(../../img/social-pe.svg)
}

.social06 .icon-plurk:before,
.social07 .icon-plurk:before {
    background-image: url(../../img/social-pl.svg)
}

.social06 .icon-qq:before,
.social07 .icon-qq:before {
    background-image: url(../../img/social-qq.svg)
}

.social06 .icon-skype:before,
.social07 .icon-skype:before {
    background-image: url(../../img/social-sk.svg)
}

.social06 .icon-sina:before,
.social07 .icon-sina:before {
    background-image: url(../../img/social-sn.svg)
}

.social06 .icon-telegram:before,
.social07 .icon-telegram:before {
    background-image: url(../../img/social-tg.svg)
}

.social06 .icon-twitter:before,
.social07 .icon-twitter:before {
    background-image: url(../../img/social-x.svg)
}

.social06 .icon-whatsapp:before,
.social07 .icon-whatsapp:before {
    background-image: url(../../img/social-wa.svg)
}

.social06 .icon-wechat:before,
.social07 .icon-wechat:before {
    background-image: url(../../img/social-wc.svg)
}

.social06 .icon-youtube:before,
.social07 .icon-youtube:before {
    background-image: url(../../img/social-yt.svg)
}

.social06 .icon-youtube2:before,
.social07 .icon-youtube2:before {
    background-image: url(../../img/social-yt2.svg)
}

.social06 .icon-tel:before,
.social07 .icon-tel:before {
    background-image: url(../../img/icon-tel.svg)
}

.social06 .icon-map:before,
.social07 .icon-map:before {
    background-image: url(../../img/icon-map.svg)
}

.social03 a {
    width: 30px;
    height: 30px
}

.social03 a:before,
.social06 a:before,
.social07 a:before {
    -webkit-filter: saturate(0) brightness(20);
    filter: saturate(0) brightness(20)
}

.social06 ul,
.social07 ul {
    margin: -7px
}

.social06 li,
.social07 li {
    padding: 7px
}

.social06 a,
.social07 a {
    width: 34px;
    height: 34px;
    border-radius: 50%
}

.social06 a:before,
.social07 a:before {
    width: 60%;
    background-size: contain
}

.social06 a {
    background: var(--main-color);
    border: 1px solid var(--main-color)
}

.social07 .icon-facebook {
    background: #3b5998
}

.social07 .icon-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%)
}

.social07 .icon-linkedin {
    background: #0274b3
}

.social07 .icon-line {
    background: #00b900
}

.social07 .icon-pinterest {
    background: #bc081c
}

.social07 .icon-plurk {
    background: #ff574d
}

.social07 .icon-qq {
    background: #000
}

.social07 .icon-skype {
    background: #01a7ff
}

.social07 .icon-sina {
    background: #e6162d
}

.social07 .icon-telegram {
    background: #229fe3
}

.social07 .icon-twitter {
    background: #000
}

.social07 .icon-youtube {
    background: #ec162c
}

.social07 .icon-whatsapp {
    background: #2cb742
}

.social07 .icon-wechat {
    background: #00c300
}

.social07 .icon-youtube2 {
    background: #ec162c
}

.social07 .icon-tel {
    background: #bc081c
}

.social07 .icon-map {
    background: var(--main-color)
}

@media screen and (min-width:769px) {
    .social03 a:hover:before {
        -webkit-filter: saturate(1);
        filter: saturate(1)
    }

    .social06 a:hover {
        background: #fff
    }

    .social06 a:hover:before {
        -webkit-filter: saturate(1);
        filter: saturate(1)
    }

    .social07 a:hover {
        border-radius: 5px
    }
}

.tb-wrap {
    overflow-x: auto
}

.tb-wrap table {
    border-collapse: collapse
}

.tb-wrap .btn-wrap {
    text-align: center
}

.tb-wrap .btn-wrap .icon {
    width: 40px;
    height: 40px
}

.tb-wrap .btn09 {
    display: inline;
    white-space: nowrap
}

.tb-js {
    overflow-x: hidden
}

.tb-js table {
    border-top: 1px solid #ddd
}

.tb-js th,
.tb-js thead {
    display: none
}

.tb-js th th,
.tb-js th tr,
.tb-js thead th,
.tb-js thead tr {
    display: none
}

.tb-js tr {
    display: block;
    position: relative
}

.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: 700;
    color: var(--main-color);
    padding: 2px 10px 0 0
}

.tb01 {
    padding: 1px
}

.tb01 td,
.tb01 th {
    padding: 8px 5px;
    border: 1px solid
}

.tb01 thead th {
    background: var(--main-color);
    color: #fff;
    border-color: rgba(255, 255, 255, .3)
}

.form04 td,
.form04 th {
    background: transparent !important;
    color: #000000 !important;
}

.form04 tbody tr:nth-child(even) td {
    background: transparent !important;
}

table tbody th {
    background: #fc2d64;
    color: #fff;
}

table tbody td,
table tbody th {
    padding: 10px 20px;
    border-color: rgba(51, 51, 51, .05);
}

table tbody tr:nth-child(even) td {
    background: #f7f7f7;
}

.tb01 tr:nth-child(even) td {
    background: #f7f7f7
}

.tb01 td {
    border-color: rgba(51, 51, 51, .05)
}

.tb02 table,
.tb03 table,
.tb07 table {
    width: 100%
}

.tb02 table {
    border-bottom: 1px solid #ddd
}

.tb02 tr:nth-child(even) td {
    background: #f7f7f7
}

.tb02 td,
.tb02 th {
    padding: 10px 5px
}

.tb02 th {
    background: var(--main-color);
    font-weight: 700;
    color: #fff;
    padding: 10px 5px
}

.tb02 .item-inner {
    width: 50px;
    margin: 0 auto
}

.tb02 .figure {
    display: block
}

.tb02 .text {
    text-align: left
}

.tb02 .text a {
    display: inline-block;
    vertical-align: middle;
    color: #666;
    padding: 3px 0
}

.tb02 .text a:after {
    content: '>';
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px
}

.tb02 .text a:last-child {
    font-weight: 700;
    color: var(--main-color)
}

.tb02 .text a:last-child:after {
    display: none
}

.tb02 .btn-wrap {
    text-align: center
}

.tb03 th {
    background: #333;
    color: #fff;
    border: 1px solid #333;
    padding: 5px 10px;
    border-left: 1px solid #666;
    border-right: 1px solid #666
}

.tb03 td {
    border-bottom: 1px solid #ddd;
    padding: 10px 15px
}

.tb03.tb-js tr {
    border-bottom: 1px solid #ddd;
    padding: 15px 0
}

.tb03.tb-js td {
    border: none;
    padding: 5px 15px
}

.tb03.tb-js .btn-wrap {
    padding: 0;
    position: absolute;
    bottom: 20px;
    right: 10%
}

.tb03.tb-js .btn-wrap:before {
    display: none
}

.tb07 td,
.tb07 th {
    padding: 10px 5px
}

.tb07 td {
    text-align: left;
    color: #666
}

.tb07 td span {
    display: inline-block;
    padding: 0 15px 0 0
}

.tb07 td .btn {
    vertical-align: middle
}

.tb07 td,
.tb07 th {
    border-top: 1px dashed #ddd;
    border-bottom: 1px dashed #ddd
}

.tb07 th {
    text-align: left
}

@media screen and (min-width:769px) {
    .tb-wrap .btn-wrap .icon:hover {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1)
    }

    .tb-js {
        padding: 1px
    }

    .tb-js table {
        border-top: none
    }

    .tb-js thead {
        display: table-header-group
    }

    .tb-js thead tr {
        display: table-row
    }

    .tb-js thead th {
        display: table-cell
    }

    .tb-js th {
        display: table-cell
    }

    .tb-js tr {
        display: table-row;
        position: static;
        margin: 0;
        padding: 0;
        border: 0 none
    }

    .tb-js td {
        display: table-cell
    }

    .tb-js td:before {
        content: none;
        display: none
    }

    .tb01 td,
    .tb01 th {
        padding: 10px 20px
    }

    .tb02 {
        overflow: hidden
    }

    .tb02 .item-inner {
        width: 120px
    }

    .tb02 .item-inner:hover {
        opacity: .5
    }

    .tb02 .text {
        text-align: center
    }

    .tb02 .text a:hover {
        text-decoration: underline
    }

    .tb02 .btn-wrap {
        padding: 10px
    }

    .tb02 .btn-wrap a:hover {
        -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3)
    }

    .tb03 tr:hover td {
        background: #f7f7f7
    }

    .tb03 th {
        padding: 8px 20px
    }

    .tb03 td {
        padding: 13px 20px
    }

    .tb03 .btn-wrap {
        padding: 5px 20px
    }

    .tb03.tb-js td {
        padding: 13px 20px
    }

    .tb03.tb-js .btn-wrap {
        position: relative;
        bottom: auto;
        right: auto;
        padding: 5px 20px
    }

    .tb07 td,
    .tb07 th {
        padding: 10px
    }
}

@media screen and (min-width:1200px) {

    .tb07 td,
    .tb07 th {
        padding: 10px 10px 10px 30px
    }
}

.model-inner {
    position: relative
}

.tp01,
.tp02,
.tp05,
.tp09 {
    text-align: center
}

.tp02 {
    margin: 0 auto
}

.tp03,
.tp04 {
    padding: 30px 20px 80px
}

.tp03 .snap-base .pd5,
.tp04 .snap-base .pd5 {
    padding-left: 0;
    padding-right: 0
}

.tp03 .snap-scrolll,
.tp04 .snap-scrolll {
    position: relative;
    height: 100%
}

.tp03 .snap-scrolll>.sec+.sec,
.tp04 .snap-scrolll>.sec+.sec {
    padding: 40px 0 0
}

.tp03 .snap-scrolll .sec>div,
.tp04 .snap-scrolll .sec>div {
    padding: 10px 0 0
}

.tp03 .snap-pair+.snap-base,
.tp04 .snap-pair+.snap-base {
    padding-top: 40px
}

.tp03 .snap-base+.snap-pair,
.tp04 .snap-base+.snap-pair {
    padding-top: 60px
}

.tp03 .snap-base>.sec+.sec {
    padding: 20px 0 0
}

.tp03 .snap-base .s1 {
    text-align: center
}

.tp04 .snap-base .s2 {
    margin: 0 -5px
}

.tp04 .snap-base .s2 .sec-item {
    padding: 7px 5px
}

.tp05 {
    padding: 30px 15px 50px
}

.tp05 .s2 {
    padding: 15px 0 0
}

.tp05 .s3 {
    padding: 20px 0 0
}

.tp05 strong {
    font-size: 18px;
    font-size: 1.125rem;
    color: var(--main-color);
    padding: 0 10px
}

@media screen and (min-width:768px) {
    .tp05 strong {
        font-size: 22px;
        font-size: 1.375rem
    }
}

.tp06 .s2 {
    padding: 20px 0 0
}

.tp06 .si4 {
    margin: 0 -5px
}

.tp06 .si4 .btn {
    margin: 5px
}

.tp06 .sec-item+.sec-item {
    padding: 20px 0 0
}

.tp06 .si1 {
    text-align: left
}

.tp06 .si1 .title01 {
    padding: 5px 0 0
}

@media screen and (min-width:768px) {

    .tp03,
    .tp04 {
        padding: 45px 40px 100px
    }
}

@media screen and (min-width:769px) {
    .tp05 {
        padding: 60px 20px
    }

    .tp05 .s2 {
        padding: 20px 0 0
    }

    .tp05 .s3 {
        padding: 30px 0 0
    }

    .tp06 .model-inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

    .tp06 .sec {
        min-width: 50%
    }

    .tp06 .sec+.sec {
        padding: 0 0 0 5%
    }

    .tp06 .sec-item+.sec-item {
        padding: 30px 0 0
    }

    .tp09 .item-group,
    .tp09 .tb-wrap {
        display: inline-block;
        min-width: 900px
    }
}

@media screen and (min-width:1024px) {
    .snap-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

    .snap-container .snap-base {
        width: 0;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }

    .snap-container .lock {
        position: relative
    }

    .snap-container .fixed {
        position: fixed;
        padding-top: 10px
    }

    .tp03 .snap-container,
    .tp04 .snap-container {
        margin: 0 -20px
    }

    .tp03 .snap-container.reverse,
    .tp04 .snap-container.reverse {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-flow: row-reverse;
        flex-flow: row-reverse
    }

    .tp03 .snap-base+.snap-pair,
    .tp03 .snap-pair+.snap-base,
    .tp04 .snap-base+.snap-pair,
    .tp04 .snap-pair+.snap-base {
        padding-top: unset
    }

    .tp03 .snap-base,
    .tp03 .snap-pair,
    .tp04 .snap-base,
    .tp04 .snap-pair {
        padding: 0 20px
    }

    .tp03 .snap-pair,
    .tp04 .snap-pair {
        width: 25%
    }

    .tp03 .snap-base .s1,
    .tp04 .snap-base .s1 {
        text-align: left
    }

    .tp03 .sticky-item,
    .tp04 .sticky-item {
        position: sticky;
        top: 90px
    }

    .tp03 .snap-base>.sec+.sec {
        padding: 30px 0 0
    }

    .tp04 .snap-pair {
        text-align: left
    }

    .tp04 .snap-pair .sec+.sec {
        padding: 45px 0 0
    }

    .tp04 .snap-pair .sec>div {
        padding: 15px 0 0
    }

    .tp04 .snap-pair .info-nav .node1 {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }
}

@media screen and (min-width:1200px) {

    .tp03,
    .tp04 {
        padding: 60px 40px 120px
    }

    .tp04 .snap-container {
        margin: 0 -40px
    }

    .tp04 .snap-base,
    .tp04 .snap-pair {
        padding: 0 40px
    }

    .tp04 .snap-pair {
        min-width: 400px;
        max-width: 400px
    }
}

.page {
    margin: 0 auto;
    -webkit-transition: .3s;
    transition: .3s
}

.w01 {
    max-width: 100px;
    margin: 0 auto
}

.w02 {
    max-width: 200px;
    margin: 0 auto
}

.w03 {
    max-width: 300px;
    margin: 0 auto
}

.w04 {
    max-width: 400px;
    margin: 0 auto
}

.w05 {
    max-width: 500px;
    margin: 0 auto
}

.w06 {
    max-width: 600px;
    margin: 0 auto
}

.w07 {
    max-width: 700px;
    margin: 0 auto
}

.w08 {
    max-width: 800px;
    margin: 0 auto
}

.w09 {
    max-width: 900px;
    margin: 0 auto
}

.w10 {
    max-width: 1000px;
    margin: 0 auto
}

.w11 {
    max-width: 1100px;
    margin: 0 auto
}

.w12 {
    max-width: 1200px;
    margin: 0 auto
}

.w13 {
    max-width: 1300px;
    margin: 0 auto
}

.w14 {
    max-width: 1400px;
    margin: 0 auto
}

.w15 {
    max-width: 1500px;
    margin: 0 auto
}

.w16 {
    max-width: 1600px;
    margin: 0 auto
}

.m03 {
    min-width: 30px
}

.m04 {
    min-width: 40px
}

.m05 {
    min-width: 50px
}

.m06 {
    min-width: 60px
}

.m07 {
    min-width: 70px
}

.m08 {
    min-width: 80px
}

.m09 {
    min-width: 90px
}

.m10 {
    min-width: 100px
}

.m15 {
    min-width: 150px
}

.m20 {
    min-width: 200px
}

.m25 {
    min-width: 250px
}

.m30 {
    min-width: 300px
}

.sb30p {
    padding: 0 0 30%
}

.sb50p {
    padding: 0 0 50%
}

.sb75p {
    padding: 0 0 75%
}

.sb100p {
    padding: 0 0 100%
}

.sb66p {
    padding: 0 0 66.666%
}

.sx0 {
    padding: 0
}

.path+.toggle-nav,
.sx1,
.tp02 {
    padding-left: 20px;
    padding-right: 20px
}

.sl1 {
    padding-left: 20px
}

.sr1 {
    padding-right: 20px
}

.sx2 {
    padding-left: 40px;
    padding-right: 40px
}

.sl2 {
    padding-left: 40px
}

.sr2 {
    padding-right: 40px
}

.sy1 {
    padding-top: 20px;
    padding-bottom: 20px
}

.st1 {
    padding-top: 20px
}

.sb1 {
    padding-bottom: 20px
}

.b-color1 {
    background-color: #eeeeec;
}

.pd1,
.sy2 {
    padding-top: 40px;
    padding-bottom: 40px
}

.st2 {
    padding-top: 40px
}

.sb2 {
    padding-bottom: 40px
}

.pd2,
.sy3 {
    padding-top: 60px;
    padding-bottom: 60px
}

.st3 {
    padding-top: 60px
}

.sb3 {
    padding-bottom: 60px
}

.sy4 {
    padding-top: 80px;
    padding-bottom: 80px
}

.st4 {
    padding-top: 80px
}

.sb4 {
    padding-bottom: 80px
}

.pd3 {
    padding: 30px 20px 80px
}

.pd4 {
    padding-bottom: 80px
}

.pd5 {
    padding: 30px 20px
}

@media screen and (min-width:768px) {
    .mx0 {
        padding-left: 0;
        padding-right: 0
    }

    .mx1 {
        padding-left: 20px;
        padding-right: 20px
    }

    .mx2,
    .tp02 {
        padding-left: 40px;
        padding-right: 40px
    }

    .mx3 {
        padding-left: 60px;
        padding-right: 60px
    }

    .ml1 {
        padding-left: 20px
    }

    .mr1 {
        padding-right: 20px
    }

    .ml2 {
        padding-left: 40px
    }

    .mr2 {
        padding-right: 40px
    }

    .ml3 {
        padding-left: 60px
    }

    .mr3 {
        padding-right: 60px
    }

    .ml4 {
        padding-left: 80px
    }

    .mr4 {
        padding-right: 80px
    }

    .my0 {
        padding-top: 0;
        padding-bottom: 0
    }

    .mt0 {
        padding-top: 0
    }

    .mb0 {
        padding-bottom: 0
    }

    .my1 {
        padding-top: 20px;
        padding-bottom: 20px
    }

    .mt1 {
        padding-top: 20px
    }

    .mb1 {
        padding-bottom: 20px
    }

    .my2 {
        padding-top: 40px;
        padding-bottom: 40px
    }

    .mt2 {
        padding-top: 40px
    }

    .mb2 {
        padding-bottom: 40px
    }

    .my3,
    .pd1 {
        padding-top: 60px;
        padding-bottom: 60px
    }

    .mt3 {
        padding-top: 60px
    }

    .mb3 {
        padding-bottom: 60px
    }

    .my4,
    .pd2 {
        padding-top: 80px;
        padding-bottom: 80px
    }

    .mt4 {
        padding-top: 80px
    }

    .mb4 {
        padding-bottom: 80px
    }

    .my5 {
        padding-top: 100px;
        padding-bottom: 100px
    }

    .mt5 {
        padding-top: 100px
    }

    .mb5 {
        padding-bottom: 100px
    }

    .pd3 {
        padding: 45px 40px 100px
    }

    .pd4 {
        padding-bottom: 100px
    }

    .pd5 {
        padding: 50px 40px
    }
}

@media screen and (min-width:1200px) {
    .ig-pd3>div {
        padding: 10px
    }

    .lx0 {
        padding-left: 0;
        padding-right: 0
    }

    .ll0 {
        padding-left: 0
    }

    .lr0 {
        padding-right: 0
    }

    .lx1 {
        padding-left: 20px;
        padding-right: 20px
    }

    .ll1 {
        padding-left: 20px
    }

    .lr1 {
        padding-right: 20px
    }

    .lx2 {
        padding-left: 40px;
        padding-right: 40px
    }

    .ll2 {
        padding-left: 40px
    }

    .lr2 {
        padding-right: 40px
    }

    .lx3 {
        padding-left: 60px;
        padding-right: 60px
    }

    .ll3 {
        padding-left: 60px
    }

    .lr3 {
        padding-right: 60px
    }

    .lx4 {
        padding-left: 80px;
        padding-right: 80px
    }

    .ll4 {
        padding-left: 80px
    }

    .lr4 {
        padding-right: 80px
    }

    .ly0 {
        padding-top: 0;
        padding-bottom: 0
    }

    .lt0 {
        padding-top: 0
    }

    .lb0 {
        padding-bottom: 0
    }

    .ly1 {
        padding-top: 20px;
        padding-bottom: 20px
    }

    .lt1 {
        padding-top: 20px
    }

    .lb1 {
        padding-bottom: 20px
    }

    .ly2 {
        padding-top: 40px;
        padding-bottom: 40px
    }

    .lt2 {
        padding-top: 40px
    }

    .lb2 {
        padding-bottom: 40px
    }

    .ly3 {
        padding-top: 60px;
        padding-bottom: 60px
    }

    .lt3 {
        padding-top: 60px
    }

    .lb3 {
        padding-bottom: 60px
    }

    .ly4 {
        padding-top: 80px;
        padding-bottom: 80px
    }

    .lt4 {
        padding-top: 80px
    }

    .lb4 {
        padding-bottom: 80px
    }

    .ly5,
    .pd1 {
        padding-top: 100px;
        padding-bottom: 100px
    }

    .lt5 {
        padding-top: 100px
    }

    .lb5 {
        padding-bottom: 100px
    }

    .pd2 {
        padding-top: 140px;
        padding-bottom: 140px
    }

    .pd3 {
        padding: 60px 40px 120px
    }

    .pd4 {
        padding-bottom: 120px
    }
}