@charset "UTF-8";

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

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

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

body {
    line-height: 1
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

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

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

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

img {
    display: block;
    width: 100%;
    height: auto
}

input::-ms-clear,
input::-ms-reveal {
    display: none
}

input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
    -webkit-transition: background-color 5000s ease-in-out 0s;
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #000000 !important
}

input[type=number] {
    -moz-appearance: textfield
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none
}

input,
textarea {
    border-radius: 0
}

@font-face {
    font-family: "微軟正黑體修正";
    unicode-range: U+7db0, U+78A7, U+7B75;
    font-style: normal;
    font-weight: bold;
    src: local(MS Gothic), local(Yu Gothic)
}

@font-face {
    font-family: "微軟正黑體修正";
    unicode-range: U+7db0, U+78A7, U+7B75;
    font-style: normal;
    font-weight: normal;
    src: local(微軟正黑體), local(Microsoft JhengHei)
}

@font-face {
    font-family: "JhengHei-Bold";
    font-style: normal;
    font-weight: normal;
    src: local("Microsoft JhengHei UI Bold"), local("Microsoft JhengHei UI 粗體"), local("Microsoft JhengHei Bold"), local("Microsoft JhengHei 粗體")
}

.swiper {
    width: 100%;
    height: 100%
}

.swiper-slide {
    text-align: center;
    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
}

.arrow-group .button-next,
.arrow-group .button-prev {
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 500px;
    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;
    background: #fff;
    -webkit-box-shadow: 0px 4px 13px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 4px 13px rgba(0, 0, 0, 0.25);
    position: relative;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s
}

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

    .arrow-group .button-next,
    .arrow-group .button-prev {
        width: 40px;
        height: 40px
    }
}

.arrow-group .button-next:before,
.arrow-group .button-prev:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 500px;
    background: #498dca;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: opacity 0.7s;
    transition: opacity 0.7s
}

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

    .arrow-group .button-next:hover:before,
    .arrow-group .button-prev:hover:before {
        opacity: 1
    }

    .arrow-group .button-next:hover .icon-swiper-left,
    .arrow-group .button-next:hover .icon-swiper-right,
    .arrow-group .button-prev:hover .icon-swiper-left,
    .arrow-group .button-prev:hover .icon-swiper-right {
        color: #fff
    }
}

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

    .arrow-group .button-next:active:before,
    .arrow-group .button-prev:active:before {
        opacity: 1
    }

    .arrow-group .button-next:active .icon-swiper-left,
    .arrow-group .button-next:active .icon-swiper-right,
    .arrow-group .button-prev:active .icon-swiper-left,
    .arrow-group .button-prev:active .icon-swiper-right {
        color: #fff
    }
}

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

.arrow-group .icon-swiper-left,
.arrow-group .icon-swiper-right {
    color: #498dca;
    font-size: 1rem;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    position: relative;
    -webkit-transition: color 0.2s;
    transition: color 0.2s
}

.swiper-pagination {
    height: 5px;
    pointer-events: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.swiper-pagination .swiper-pagination-bullet {
    margin: 0;
    pointer-events: auto;
    width: 5px;
    height: 5px;
    border-radius: 0;
    opacity: 0.5
}

.swiper-pagination .swiper-pagination-bullet:not(:first-child) {
    margin-left: 15px
}

.swiper-pagination .swiper-pagination-bullet-active {
    width: 75px;
    height: 1px;
    opacity: 1;
    background: #498dca;
    -webkit-transition: width 0.5s;
    transition: width 0.5s
}

.swiper-pagination.vertical {
    width: 5px;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.swiper-pagination.vertical .swiper-pagination-bullet:not(:first-child) {
    margin: 15px 0 0 0
}

.swiper-pagination.vertical .swiper-pagination-bullet-active {
    width: 1px;
    height: 75px;
    opacity: 1;
    -webkit-transition: height 0.5s;
    transition: height 0.5s
}

.swiper-pagination.white .swiper-pagination-bullet {
    background: #fff
}

.swiper-pagination.white .swiper-pagination-bullet-active {
    background: #498dca
}

.flatpickr-calendar {
    -webkit-animation: none !important;
    animation: none !important;
    -webkit-transform: translateY(15px) !important;
    transform: translateY(15px) !important
}

.flatpickr-calendar:after,
.flatpickr-calendar:before {
    display: none !important
}

.video4-cover {
    pointer-events: none
}

.video4-cover .common-play-btn {
    pointer-events: auto;
    cursor: pointer;
    width: 45px;
    height: 45px;
    border-radius: 500px;
    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;
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media only screen and (max-width:900px) {
    .video4-cover .common-play-btn {
        width: 30px;
        height: 30px
    }
}

.video4-cover .common-play-btn:before {
    content: "";
    display: block;
    opacity: 0;
    width: 100%;
    height: 100%;
    background: #498dca;
    border-radius: 500px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s
}

.video4-cover .common-play-btn:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #323232;
    border-radius: 500px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: opacity 0.3s, background 0.3s;
    transition: opacity 0.3s, background 0.3s
}

.video4-cover .common-play-btn:hover:before {
    opacity: 1
}

.video4-cover .common-play-btn:hover:after {
    opacity: 0;
    background: none
}

.video4-cover .common-play-btn:hover+.overlay {
    background-color: rgba(0, 0, 0, 0.2)
}

.video4-cover .common-play-btn .icon-triangle-right {
    z-index: 1;
    color: #fff;
    font-size: 0.75rem
}

@media only screen and (max-width:900px) {
    .video4-cover .common-play-btn .icon-triangle-right {
        font-size: 0.75rem;
        -webkit-transform: scale(0.6);
        transform: scale(0.6)
    }
}

.video4-cover .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    -webkit-transition: background-color 0.5s;
    transition: background-color 0.5s;
    z-index: 1
}

._article[button-align=left] .common-btn {
    margin: 0 auto 0 0
}

._article[button-align=center] .common-btn {
    margin: 0 auto
}

._article[button-align=right] .common-btn {
    margin: 0 0 0 auto
}

._article[button-textcolor="#000"] .common-btn {
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: none;
    -webkit-transition: border 0.3s;
    transition: border 0.3s
}

@media only screen and (min-width:1201px) {
    ._article[button-textcolor="#000"] .common-btn:hover {
        border: 1px solid transparent
    }

    ._article[button-textcolor="#000"] .common-btn:hover i,
    ._article[button-textcolor="#000"] .common-btn:hover>p {
        color: #fff
    }
}

@media only screen and (max-width:1200px) {
    ._article[button-textcolor="#000"] .common-btn:active {
        border: 1px solid transparent
    }

    ._article[button-textcolor="#000"] .common-btn:active i,
    ._article[button-textcolor="#000"] .common-btn:active>p {
        color: #fff
    }
}

._article[button-textcolor="#000"] .common-btn>p {
    color: #000;
    -webkit-transition: color 0.2s;
    transition: color 0.2s
}

._article[button-textcolor="#000"] .common-btn>i {
    color: #323232;
    -webkit-transition: color 0.2s;
    transition: color 0.2s
}

._article[button-textcolor="#fff"] .common-btn {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: none;
    -webkit-transition: border 0.3s;
    transition: border 0.3s
}

@media only screen and (min-width:1201px) {
    ._article[button-textcolor="#fff"] .common-btn:hover {
        border: 1px solid transparent
    }

    ._article[button-textcolor="#fff"] .common-btn:hover i,
    ._article[button-textcolor="#fff"] .common-btn:hover>p {
        color: #fff
    }
}

@media only screen and (max-width:1200px) {
    ._article[button-textcolor="#fff"] .common-btn:active {
        border: 1px solid transparent
    }

    ._article[button-textcolor="#fff"] .common-btn:active i,
    ._article[button-textcolor="#fff"] .common-btn:active>p {
        color: #fff
    }
}

._article[button-textcolor="#fff"] .common-btn i,
._article[button-textcolor="#fff"] .common-btn>p {
    color: #fff;
    -webkit-transition: color 0.2s;
    transition: color 0.2s
}

@media only screen and (max-width:900px) {
    ._article .swiper ._cover {
        margin-bottom: 15px
    }
}

dropdown-el:not([d4-value=""]) .select-display {
    color: #000;
    font-weight: 600;
    font-size: 1rem
}

dropdown-el .select-wrapper {
    padding: 0 0 0 20px;
    min-height: 30px;
    background: none
}

@media only screen and (max-width:768px) {
    dropdown-el .select-wrapper {
        padding: 0 0 0 10px
    }
}

dropdown-el .dropdown-icon {
    border-color: #000 transparent transparent transparent
}

dropdown-el .dropdown {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
    z-index: 2
}

dropdown-el .dropdown .dropdown-list>li:not(.has-sublayer):hover {
    background-color: #498dca !important
}

dropdown-el .dropdown .dropdown-list>li:not(.has-sublayer).active {
    background-color: #323232
}

dropdown-el .dropdown .dropdown-list>li:not(:first-child) {
    border-top: none
}

dropdown-el .dropdown-list>li {
    font-weight: 600;
    background-color: #323232;
    color: #fff;
    text-align: center
}

dropdown-el .os-scrollbar .os-scrollbar-handle {
    right: 3px;
    width: 2px;
    background: #D9D9D9;
    border-radius: 50px
}

.common-category {
    padding: 60px 0;
    margin: 0 auto
}

@media only screen and (max-width:768px) {
    .common-category {
        padding: 60px 5.334%
    }
}

.common-category .category-container {
    margin: 0 auto;
    max-width: 1280px;
    width: calc(100% - 60px)
}

@media only screen and (max-width:768px) {
    .common-category .category-container {
        width: 100%
    }
}

.common-category multipurpose-nav .drag-container {
    max-width: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.common-category multipurpose-nav .drag-container .wrapper {
    padding: 0
}

.common-category multipurpose-nav .drag-container .category {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.3;
    text-align: left
}

.common-category multipurpose-nav .drag-container .category:after {
    height: 3px
}

.common-category multipurpose-nav[m4-type=drag] .wrapper {
    gap: 10px 30px !important
}

.common-category multipurpose-nav[m4-type=drag] .wrapper.center {
    -webkit-mask-image: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), color-stop(20%, #fff), color-stop(80%, #fff), to(rgba(255, 255, 255, 0)));
    -webkit-mask-image: linear-gradient(270deg, rgba(255, 255, 255, 0), #fff 20%, #fff 80%, rgba(255, 255, 255, 0));
    mask-image: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), color-stop(20%, #fff), color-stop(80%, #fff), to(rgba(255, 255, 255, 0)));
    mask-image: linear-gradient(270deg, rgba(255, 255, 255, 0), #fff 20%, #fff 80%, rgba(255, 255, 255, 0))
}

.common-category multipurpose-nav[m4-type=drag] .wrapper.start {
    -webkit-mask-image: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), color-stop(20%, #fff), to(#fff));
    -webkit-mask-image: linear-gradient(270deg, rgba(255, 255, 255, 0), #fff 20%, #fff);
    mask-image: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), color-stop(20%, #fff), to(#fff));
    mask-image: linear-gradient(270deg, rgba(255, 255, 255, 0), #fff 20%, #fff)
}

.common-category multipurpose-nav[m4-type=drag] .wrapper.end {
    -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(20%, #fff), to(#fff));
    -webkit-mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 20%, #fff);
    mask-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(20%, #fff), to(#fff));
    mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 20%, #fff)
}

.common-category multipurpose-nav[m4-type=drag] .navigation .button {
    -webkit-transform: translate3d(50%, -50%, 0);
    transform: translate3d(50%, -50%, 0)
}

.common-category multipurpose-nav[m4-type=drag] .navigation .button.prev {
    width: 24px
}

.common-category multipurpose-nav[m4-type=drag] .navigation .button.prev>div {
    width: 24px;
    height: 24px
}

.common-category multipurpose-nav[m4-type=drag] .navigation .button.prev>div:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 6px 5px 0;
    border-color: transparent #000 transparent transparent;
    -webkit-transform: none;
    transform: none
}

.common-category multipurpose-nav[m4-type=drag] .navigation .button.prev.hide {
    display: none
}

.common-category multipurpose-nav[m4-type=drag] .navigation .button.next {
    width: 24px
}

.common-category multipurpose-nav[m4-type=drag] .navigation .button.next>div {
    width: 24px;
    height: 24px
}

.common-category multipurpose-nav[m4-type=drag] .navigation .button.next>div:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 6px;
    border-color: transparent transparent transparent #000;
    -webkit-transform: none;
    transform: none
}

.common-category multipurpose-nav[m4-type=drag] .navigation .button.next.hide {
    display: none
}

.common-category multipurpose-nav[category-type=tab] .category {
    padding: 0 0 8px
}

.common-category multipurpose-nav[category-type=tab] .category:after {
    left: 0;
    right: auto;
    background-color: #498dca;
    -webkit-transition: width 0.4s, background 0.4s;
    transition: width 0.4s, background 0.4s
}

.common-category multipurpose-nav[category-type=tab] .navigation .button {
    top: calc(50% - 3px)
}

.common-category multipurpose-nav[category-type=anchor] .item .category {
    padding: 0;
    color: #6C6C6C;
    -webkit-transition: color 0.3s;
    transition: color 0.3s
}

@media only screen and (max-width:1200px) {
    .common-category multipurpose-nav[category-type=anchor] .item .category {
        color: #000
    }
}

@media only screen and (max-width:1200px) {
    .common-category multipurpose-nav[category-type=anchor] .item .category:before {
        background: #498dca
    }
}

@media only screen and (min-width:1201px) {
    .common-category multipurpose-nav[category-type=anchor] .item:hover .category {
        color: #000
    }

    .common-category multipurpose-nav[category-type=anchor] .item:hover .category:before {
        background: #498dca
    }
}

@media only screen and (max-width:1200px) {
    .common-category multipurpose-nav[category-type=anchor] .item:active .category {
        color: #000
    }

    .common-category multipurpose-nav[category-type=anchor] .item:active .category:before {
        background: #498dca
    }
}

.common-category multipurpose-nav[category-type=anchor] .item.active .category {
    color: #000
}

.common-category multipurpose-nav[category-type=anchor] .category {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.common-category multipurpose-nav[category-type=anchor] .category:before {
    margin-right: 10px;
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    background: #6C6C6C;
    -webkit-transition: background 0.3s;
    transition: background 0.3s
}

.common-category multipurpose-nav[category-type=anchor] .category:after {
    display: none
}

.common-category.navCategory {
    opacity: 0;
    padding: 20px;
    height: 80px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-top: 1px solid #D1D1D1
}

@media only screen and (max-width:1280px) {
    .common-category.navCategory {
        padding: 10px 20px;
        height: 60px
    }
}

@media only screen and (max-width:1280px) and (max-width:768px) {
    .common-category.navCategory {
        height: 50px
    }
}

.common-category.navCategory.common-category {
    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
}

.common-category.navCategory [category-type=anchor] .item .category {
    padding: 0
}

* {
    outline: none;
    -webkit-tap-highlight-color: transparent;
    letter-spacing: 0.01em
}

html {
    font-size: 100%
}

html.scrollbarStyle {
    scrollbar-width: thin;
    scrollbar-color: rgb(108, 110, 113) transparent
}

html.scrollbarStyle body::-webkit-scrollbar-track {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3)
}

html.scrollbarStyle body::-webkit-scrollbar {
    width: 6px
}

@media only screen and (max-width:768px) {
    html.scrollbarStyle body::-webkit-scrollbar {
        display: none
    }
}

html.scrollbarStyle body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgb(108, 110, 113);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3)
}

html.isFirefox,
html.isMacBigSurUp,
html:not(.isMac) {
    width: 100vw
}

html.isFirefox body,
html.isMacBigSurUp body,
html:not(.isMac) body {
    width: 100vw;
    overflow-y: auto;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch
}

html body {
    font-family: "Mulish", "Noto Sans TC", "Noto Sans SC", "微軟正黑體修正", "Microsoft JhengHei", "微軟正黑體", sans-serif;
    font-weight: normal
}

.main-wrapper {
    width: 100%;
    position: relative
}

input {
    font-family: "Mulish", "Noto Sans TC", "Noto Sans SC", "微軟正黑體修正", "Microsoft JhengHei", "微軟正黑體", sans-serif
}

.visuallyhidden {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(0px 0px 99.9% 99.9%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0
}

.d-none {
    display: none !important
}

.lazy {
    opacity: 0
}

.lazy.loaded {
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out
}

.swiper-lazy {
    opacity: 0
}

.swiper-lazy.swiper-lazy-loaded {
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out
}

.copied-wrapper {
    position: absolute;
    -webkit-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%);
    z-index: 99999999
}

.copied-wrapper .text {
    position: relative;
    font-size: 0.875rem;
    padding: 10px;
    color: #fff;
    background-color: #498dca;
    border-radius: 10px;
    white-space: nowrap;
    -webkit-box-shadow: 2.5px 4.3px 20px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 2.5px 4.3px 20px 0 rgba(0, 0, 0, 0.1)
}

.copied-wrapper .text:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 7px 9px 7px;
    border-color: transparent transparent #498dca transparent
}

.copied-wrapper #clipboard {
    position: absolute;
    width: 100%;
    min-width: 200px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: -10;
    opacity: 0;
    cursor: default
}

.sample-tips {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    padding: 20px;
    background-color: #F6F6F6;
    margin: 50px 0
}

.sample-tips:before {
    content: attr(tips-text);
    color: #E64646;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.8;
    text-align: center;
    white-space: pre-wrap
}

@media only screen and (max-width:575px) {
    .sample-tips:before {
        font-size: 1rem
    }
}

.loading-wrapper {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999
}

.loading-wrapper .icon-box {
    width: 7.8125%;
    min-width: 100px;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.loading-wrapper .icon-box:after {
    content: "";
    display: block;
    width: 100%;
    height: 0
}

.loading-wrapper .icon-box svg {
    display: block;
    width: 100%;
    height: 100%;
    margin: auto;
    background: none;
    shape-rendering: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

main {
    padding-top: 120px
}

@media only screen and (max-width:1280px) {
    main {
        padding-top: 60px
    }
}

.common-headerline .sub-title {
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 28px
}

@media only screen and (max-width:1200px) {
    .common-headerline .sub-title {
        font-size: 1.125rem
    }
}

.common-headerline .title {
    font-weight: 500;
    font-size: 2.5rem;
    line-height: 1.5
}

@media only screen and (max-width:1200px) {
    .common-headerline .title {
        font-size: 1.625rem
    }
}

.common-headerline .txt {
    font-weight: 500;
    line-height: 1.8
}

.common-headerline-two .sub-title {
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.5
}

.common-headerline-two .title {
    margin-top: 10px;
    font-weight: 500;
    font-size: 2rem;
    line-height: 1.5
}

@media only screen and (max-width:1200px) {
    .common-headerline-two .title {
        font-size: 1.625rem
    }
}

.common-headerline-two .txt {
    margin-top: 10px;
    line-height: 1.8;
    color: #323232
}

.common-headerline-two[text-color=white] {
    color: #fff
}

.common-headerline-three .sub {
    font-weight: 700;
    font-size: 1.375rem
}

.common-headerline-three .title {
    margin-top: 20px;
    font-weight: 500;
    font-size: 3.125rem;
    line-height: 1.5
}

@media only screen and (max-width:1200px) {
    .common-headerline-three .title {
        font-size: 1.875rem
    }
}

.common-headerline-three .txt {
    margin-top: 20px;
    line-height: 1.8;
    color: #323232
}

.common-headerline-three[text-color=white] {
    color: #fff
}

.common-btn {
    padding: 10px;
    max-width: 200px;
    width: 100%;
    min-height: 50px;
    background: #323232;
    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;
    position: relative;
    overflow: hidden;
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
    transition: -webkit-transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
    transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
    transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1), -webkit-transform 0.4s cubic-bezier(0.1, 0, 0.3, 1)
}

.common-btn:before {
    content: "";
    display: block;
    width: 110%;
    height: 100%;
    padding-bottom: 110%;
    background: #498dca;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 1);
    transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 1)
}

@media only screen and (min-width:1201px) {
    .common-btn:hover {
        background: none
    }

    .common-btn:hover>i {
        color: #fff
    }

    .common-btn:hover:before {
        -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
        transition: -webkit-transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
        transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
        transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1), -webkit-transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
        -webkit-transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
        transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1)
    }
}

@media only screen and (max-width:1200px) {
    .common-btn:active {
        background: none
    }

    .common-btn:active>i {
        color: #fff
    }

    .common-btn:active:before {
        -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
        transition: -webkit-transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
        transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
        transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1), -webkit-transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
        -webkit-transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
        transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1)
    }
}

.common-btn>i {
    width: 30px;
    height: 30px;
    margin-right: 5px;
    z-index: 0;
    position: relative;
    color: #498dca;
    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
}

.common-btn>p {
    position: relative;
    color: #fff;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.01em
}

.common-btn.black-frame {
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: none;
    -webkit-transition: border 0.3s;
    transition: border 0.3s
}

@media only screen and (min-width:1201px) {
    .common-btn.black-frame:hover {
        border: 1px solid transparent
    }

    .common-btn.black-frame:hover i,
    .common-btn.black-frame:hover>p {
        color: #fff
    }
}

@media only screen and (max-width:1200px) {
    .common-btn.black-frame:active {
        border: 1px solid transparent
    }

    .common-btn.black-frame:active i,
    .common-btn.black-frame:active>p {
        color: #fff
    }
}

.common-btn.black-frame>p {
    color: #000;
    -webkit-transition: color 0.3s;
    transition: color 0.3s
}

.common-btn.black-frame>i {
    color: #323232;
    -webkit-transition: color 0.3s;
    transition: color 0.3s
}

.common-btn.white-frame {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: none;
    -webkit-transition: border 0.3s;
    transition: border 0.3s
}

@media only screen and (min-width:1201px) {
    .common-btn.white-frame:hover {
        border: 1px solid transparent
    }

    .common-btn.white-frame:hover i,
    .common-btn.white-frame:hover>p {
        color: #fff
    }
}

@media only screen and (max-width:1200px) {
    .common-btn.white-frame:active {
        border: 1px solid transparent
    }

    .common-btn.white-frame:active i,
    .common-btn.white-frame:active>p {
        color: #fff
    }
}

.common-btn.white-frame i,
.common-btn.white-frame>p {
    color: #fff;
    -webkit-transition: color 0.3s;
    transition: color 0.3s
}

.common-btn.disable-state {
    pointer-events: none;
    background: #EFEFEF;
    border: 1px solid transparent
}

.common-btn.disable-state i,
.common-btn.disable-state>p {
    color: #D1D1D1
}

.common-btn.gray {
    background: #F9F9F9
}

.common-btn.gray>p {
    color: #6C6C6C
}

.common-btn.gray:before {
    content: "";
    display: block;
    width: 110%;
    height: 100%;
    padding-bottom: 110%;
    background: #323232;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 1);
    transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 1)
}

@media only screen and (min-width:1201px) {
    .common-btn.gray:hover {
        background: none
    }

    .common-btn.gray:hover i,
    .common-btn.gray:hover>p {
        color: #fff
    }

    .common-btn.gray:hover span {
        color: #498dca
    }

    .common-btn.gray:hover:before {
        -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
        transition: -webkit-transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
        transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
        transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1), -webkit-transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
        -webkit-transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
        transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1)
    }

    .common-btn.gray:hover .num {
        color: #498dca;
        -webkit-transition: color 0.4s;
        transition: color 0.4s
    }

    .common-btn.gray:hover .num .cross:after,
    .common-btn.gray:hover .num .cross:before {
        background: #498dca
    }
}

@media only screen and (max-width:1200px) {
    .common-btn.gray:active {
        background: none
    }

    .common-btn.gray:active i,
    .common-btn.gray:active>p {
        color: #fff
    }

    .common-btn.gray:active span {
        color: #498dca
    }

    .common-btn.gray:active:before {
        -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
        transition: -webkit-transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
        transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
        transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1), -webkit-transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
        -webkit-transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
        transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1)
    }

    .common-btn.gray:active .num {
        color: #498dca;
        -webkit-transition: color 0.4s;
        transition: color 0.4s
    }

    .common-btn.gray:active .num .cross:after,
    .common-btn.gray:active .num .cross:before {
        background: #498dca
    }
}

.common-btn.gray.active {
    background: none
}

.common-btn.gray.active i,
.common-btn.gray.active>p {
    color: #fff
}

.common-btn.gray.active span {
    color: #498dca
}

.common-btn.gray.active:before {
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
    transition: -webkit-transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
    transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
    transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1), -webkit-transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
    -webkit-transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
    transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1)
}

.common-btn.gray.active .num {
    color: #498dca;
    -webkit-transition: color 0.4s;
    transition: color 0.4s
}

.common-btn.gray.active .num .cross:after,
.common-btn.gray.active .num .cross:before {
    background: #498dca
}

@media only screen and (min-width:1201px) {
    .outside-btn-hover:hover .common-btn:before {
        -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
        transition: -webkit-transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
        transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
        transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1), -webkit-transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
        -webkit-transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
        transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1)
    }

    .outside-btn-hover:hover .common-btn.black-frame {
        border: 1px solid transparent
    }

    .outside-btn-hover:hover .common-btn.black-frame i,
    .outside-btn-hover:hover .common-btn.black-frame>p {
        color: #fff
    }

    .outside-btn-hover:hover .common-btn.white-frame {
        border: 1px solid transparent
    }

    .outside-btn-hover:hover .common-btn.white-frame i,
    .outside-btn-hover:hover .common-btn.white-frame>p {
        color: #fff
    }
}

@media only screen and (max-width:1200px) {
    .outside-btn-hover:active .common-btn:before {
        -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
        transition: -webkit-transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
        transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
        transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1), -webkit-transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
        -webkit-transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
        transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1)
    }

    .outside-btn-hover:active .common-btn.black-frame {
        border: 1px solid transparent
    }

    .outside-btn-hover:active .common-btn.black-frame i,
    .outside-btn-hover:active .common-btn.black-frame>p {
        color: #fff
    }

    .outside-btn-hover:active .common-btn.white-frame {
        border: 1px solid transparent
    }

    .outside-btn-hover:active .common-btn.white-frame i,
    .outside-btn-hover:active .common-btn.white-frame>p {
        color: #fff
    }
}

.common-more-btn {
    width: 100px;
    height: 100px;
    background: #498dca;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media only screen and (max-width:768px) {
    .common-more-btn {
        width: 60px;
        height: 60px
    }
}

.common-more-btn>span {
    display: inline-block;
    width: 12px;
    height: 12px;
    position: relative
}

@media only screen and (max-width:768px) {
    .common-more-btn>span {
        width: 8px;
        height: 8px
    }
}

.common-more-btn>span:before {
    content: "";
    display: block;
    width: 2px;
    height: 12px;
    border-radius: 1px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media only screen and (max-width:768px) {
    .common-more-btn>span:before {
        height: 8px
    }
}

.common-more-btn>span:after {
    content: "";
    display: block;
    width: 12px;
    height: 2px;
    border-radius: 1px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media only screen and (max-width:768px) {
    .common-more-btn>span:after {
        width: 8px
    }
}

.common-more-btn>p {
    margin-top: 10px;
    font-weight: 700;
    color: #fff
}

@media only screen and (max-width:768px) {
    .common-more-btn>p {
        font-size: 0.875rem
    }
}

.common-more-btn2 {
    width: 155px;
    height: 155px;
    color: #fff;
    background: #323232;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative
}

@media only screen and (max-width:768px) {
    .common-more-btn2 {
        width: 120px;
        height: 120px
    }
}

.common-more-btn2:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 16px 20px 0;
    border-color: transparent #498dca transparent transparent;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-transition: border 0.3s;
    transition: border 0.3s
}

.common-more-btn2 .zh {
    font-weight: 500
}

.common-more-btn2 .en {
    margin-top: 10px;
    font-weight: 700;
    font-size: 0.75rem
}

.common-more-btn2 i {
    margin-top: 20px;
    font-size: 1rem;
    color: #498dca
}

@media only screen and (max-width:768px) {
    .common-more-btn2 i {
        margin-top: 10px
    }
}

.common-expand-btn {
    cursor: pointer
}

@media only screen and (min-width:1201px) {
    .common-expand-btn:hover .pic:before {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

@media only screen and (max-width:1200px) {
    .common-expand-btn:active .pic:before {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

.common-expand-btn .pic {
    overflow: hidden;
    width: 40px;
    height: 40px;
    background: #498dca;
    border-radius: 500px;
    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;
    position: relative
}

.common-expand-btn .pic:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #323232;
    border-radius: 500px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
    transition: -webkit-transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
    transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
    transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0.7, 0, 0.2, 1)
}

.common-expand-btn .pic>span {
    width: 12px;
    height: 12px;
    position: relative
}

.common-expand-btn .pic>span:after,
.common-expand-btn .pic>span:before {
    content: "";
    display: block;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.common-expand-btn .pic>span:before {
    width: 2px;
    height: 12px
}

.common-expand-btn .pic>span:after {
    width: 12px;
    height: 2px
}

.common-expand-btn>p {
    margin-top: 20px;
    font-weight: 600
}

.common-plus {
    width: 24px;
    height: 24px;
    display: inline-block;
    position: relative
}

.common-plus:after,
.common-plus:before {
    content: "";
    display: block;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: background 0.3s;
    transition: background 0.3s
}

.common-plus:before {
    width: 2px;
    height: 12px
}

.common-plus:after {
    width: 12px;
    height: 2px
}

.common-banner {
    position: relative
}

.common-banner .common-crump {
    z-index: 1;
    position: absolute;
    top: 60px;
    left: calc(7.8125% + 200px + 20px)
}

@media only screen and (max-width:1280px) {
    .common-banner .common-crump {
        top: 40px;
        left: calc(7.8125% + 120px + 20px)
    }
}

@media only screen and (max-width:768px) {
    .common-banner .common-crump {
        top: 80px;
        left: 7.8125%
    }
}

@media only screen and (max-width:575px) {
    .common-banner .common-crump {
        left: 40px
    }
}

.common-banner .img-box {
    position: relative
}

.common-banner .img-box:after {
    content: "";
    display: none;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)));
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2));
    position: absolute;
    top: 0;
    left: 0
}

.common-banner .info-box {
    max-width: 1000px;
    width: calc(100% - 120px);
    height: 100%;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media only screen and (max-width:768px) {
    .common-banner .info-box {
        width: 89.333%
    }
}

.common-banner .info-box .en {
    word-break: break-word;
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 28px
}

@media only screen and (max-width:1200px) {
    .common-banner .info-box .en {
        font-size: 1.25rem
    }
}

.common-banner .info-box .zh {
    margin-top: 20px;
    font-weight: 500;
    font-size: 3.125rem;
    line-height: 1.5
}

@media only screen and (max-width:1200px) {
    .common-banner .info-box .zh {
        font-size: 1.875rem
    }
}

.common-banner .info-box .txt {
    margin-top: 20px;
    line-height: 1.8;
    display: block;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.common-banner[font-color=black] {
    color: #000
}

.common-banner[font-color=white] {
    color: #fff
}

.common-banner[font-color=white] .img-box:after {
    display: block
}

.common-banner[font-color=white] .common-crump li:before {
    background: url("../assets/img/news/right_white.svg") no-repeat center
}

.common-banner[banner-hight="400"] .img-box {
    position: relative
}

.common-banner[banner-hight="400"] .img-box:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    padding-bottom: 400px
}

.common-banner[banner-hight="400"] .img-box img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.common-banner[banner-hight="500"] .img-box {
    position: relative
}

.common-banner[banner-hight="500"] .img-box:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    padding-bottom: 500px
}

.common-banner[banner-hight="500"] .img-box img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.common-banner[text-align=left] .info-box {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    text-align: left
}

.common-banner[text-align=center] .info-box {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center
}

.common-banner[text-align=right] .info-box {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    text-align: right
}

@media only screen and (max-width:768px) {
    .common-crump {
        display: none
    }
}

.common-crump>ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.common-crump li {
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1.8;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.common-crump li:first-child a {
    display: inline-block;
    width: 20px;
    height: 20px;
    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
}

.common-crump li:first-child .icon-house {
    font-size: 0.875rem
}

.common-crump li:not(:first-child):before {
    margin: 0 10px;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: url("../assets/img/news/right.svg") no-repeat center
}

.common-crump li a {
    -webkit-transition: color 0.3s;
    transition: color 0.3s
}

@media only screen and (min-width:1201px) {
    .common-crump li a:hover {
        color: #498dca
    }
}

@media only screen and (max-width:1200px) {
    .common-crump li a:active {
        color: #498dca
    }
}

.top-btn {
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    z-index: 10;
    width: 85px;
    height: 85px;
    background: #F9F9F9;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media only screen and (max-width:575px) {
    .top-btn {
        width: 50px;
        height: 50px
    }
}

.top-btn>span {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 7px 10px 7px;
    border-color: transparent transparent #323232 transparent;
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s
}

@media only screen and (max-width:575px) {
    .top-btn>span {
        border-width: 0 5px 7px 5px
    }
}

.top-btn>p {
    margin-top: 7px;
    font-weight: 700;
    color: #323232
}

@media only screen and (max-width:575px) {
    .top-btn>p {
        font-size: 0.75rem
    }
}

@media only screen and (min-width:1201px) {
    .top-btn:hover>span {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px)
    }
}

@media only screen and (max-width:1200px) {
    .top-btn:active>span {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px)
    }
}

.top-btn.footer {
    pointer-events: auto;
    opacity: 1;
    z-index: 0;
    background: #498dca;
    position: absolute;
    top: 0;
    bottom: auto;
    right: 0
}

.top-btn.footer>span {
    border-color: transparent transparent #fff transparent
}

.top-btn.footer>p {
    color: #fff
}

.top-btn.fix {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 10
}

.top-btn.show {
    opacity: 1;
    pointer-events: auto
}

.common-drag-tip {
    display: none;
    max-width: 335px;
    width: 100%;
    height: 50px;
    background: #F9F9F9;
    border-radius: 500px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 10px
}

.common-drag-tip.show {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

._structure .img-box {
    display: block;
    margin: 0 auto;
    max-width: 450px;
    position: relative
}

._structure .img-box:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    padding-bottom: 68.889%
}

._structure .img-box img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media only screen and (min-width:1201px) {
    ._structure .img-box:hover .common-more-btn2:before {
        opacity: 1
    }

    ._structure .img-box:hover i {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px)
    }
}

@media only screen and (max-width:1200px) {
    ._structure .img-box:active .common-more-btn2:before {
        opacity: 1
    }

    ._structure .img-box:active i {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px)
    }
}

._structure .common-more-btn2 {
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translate3d(50%, -50%, 0);
    transform: translate3d(50%, -50%, 0)
}

@media only screen and (max-width:768px) {
    ._structure .common-more-btn2 {
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0)
    }
}

._structure .common-more-btn2:before {
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s
}

@media only screen and (max-width:1200px) {
    ._structure .common-more-btn2:before {
        opacity: 1
    }
}

._structure .common-more-btn2 i {
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s
}

.common-table-title {
    margin-bottom: 20px;
    padding-right: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media only screen and (max-width:768px) {
    .common-table-title {
        padding-right: 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.common-table-title .title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media only screen and (max-width:768px) {
    .common-table-title .title {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.common-table-title .title>p {
    margin-left: 5px;
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.5
}

@media only screen and (max-width:768px) {
    .common-table-title .title>p {
        margin: 10px 0 0
    }
}

.common-table-title .year-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.common-table-title .year-wrap:before {
    margin-right: 10px;
    content: "";
    display: block;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    background: #498dca
}

.common-table-title .year-wrap .year {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.3;
    color: #498dca
}

@media only screen and (max-width:1200px) {
    .common-table-title .year-wrap .year {
        font-size: 1.375rem
    }
}

.common-table-title .year-wrap .unit {
    margin-left: 5px;
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.5
}

@media only screen and (max-width:768px) {
    .common-table-title .year-wrap .unit {
        margin-left: 10px
    }
}

.common-table-title .dropdown-wrap {
    max-width: 180px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media only screen and (max-width:768px) {
    .common-table-title .dropdown-wrap {
        max-width: 145px;
        margin-top: 20px;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.common-table-title .dropdown-wrap>p {
    font-weight: 500;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    white-space: nowrap
}

.common-table-title .dropdown-wrap>p:after {
    margin-left: 20px;
    content: "";
    display: block;
    width: 1px;
    height: 14px;
    background: #D1D1D1
}

@media only screen and (max-width:768px) {
    .common-table-title .dropdown-wrap>p:after {
        margin-left: 10px
    }
}

.investors-container {
    padding: 40px 0 120px
}

@media only screen and (max-width:768px) {
    .investors-container {
        padding: 20px 5.334% 80px
    }
}

.investors-container .container {
    margin: 0 auto;
    max-width: 1240px;
    width: calc(100% - 100px)
}

@media only screen and (max-width:768px) {
    .investors-container .container {
        width: 100%
    }
}

.investors-container .container .common-headerline-two {
    text-align: center
}

.investors-container.no-bar {
    padding: 80px 0 120px
}

@media only screen and (max-width:768px) {
    .investors-container.no-bar {
        padding: 60px 5.334% 80px
    }
}

@media only screen and (max-width:768px) {
    .investors-text-content {
        padding: 0 20px
    }
}

.investors-text-content>div:not(:first-child) {
    margin-top: 40px
}

.investors-text-content ol,
.investors-text-content p,
.investors-text-content ul {
    line-height: 1.8
}

.investors-text-content ol {
    list-style-type: decimal;
    padding-left: 20px
}

.investors-text-content ul {
    list-style-type: disc;
    padding-left: 20px
}

.investors-text-content .title {
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.investors-text-content .title:before {
    margin-right: 10px;
    content: "";
    display: block;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    background: #498dca;
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
}

.investors-text-content .img-box {
    margin-top: 40px;
    -webkit-box-shadow: 0px 4px 21px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 4px 21px rgba(0, 0, 0, 0.25);
    position: relative
}

.investors-text-content .img-box:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    padding-bottom: 50.807%
}

.investors-text-content .img-box img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.no-content {
    margin: 0 auto;
    padding: 60px 0;
    max-width: 850px;
    width: calc(100% - 60px);
    background: #F9F9F9;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media only screen and (max-width:768px) {
    .no-content {
        padding: 60px 20px;
        width: 100%
    }
}

.no-content .pic-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.no-content .pic-wrap>div {
    width: 20px
}

.no-content .pic-wrap>div:first-child {
    height: 70px;
    background: #D9D9D9;
    position: relative;
    -webkit-animation: color-rotate1 2s infinite;
    animation: color-rotate1 2s infinite
}

.no-content .pic-wrap>div:nth-child(2) {
    margin: 0 20px
}

.no-content .pic-wrap>div:nth-child(2) span {
    width: 100%;
    display: block
}

.no-content .pic-wrap>div:nth-child(2) span:first-child {
    height: 17px;
    background: #498dca;
    -webkit-animation: color-rotate2 2s infinite;
    animation: color-rotate2 2s infinite
}

.no-content .pic-wrap>div:nth-child(2) span:nth-child(2) {
    margin-top: 10px;
    height: 43px;
    background: #D9D9D9;
    -webkit-animation: color-rotate3 2s infinite;
    animation: color-rotate3 2s infinite
}

.no-content .pic-wrap>div:nth-child(3) {
    margin-top: auto;
    height: 9px;
    background: #498dca;
    -webkit-animation: color-rotate4 2s infinite;
    animation: color-rotate4 2s infinite
}

@-webkit-keyframes color-rotate1 {

    0%,
    75% {
        background-color: #D9D9D9
    }

    75.1%,
    to {
        background-color: #498dca
    }
}

@keyframes color-rotate1 {

    0%,
    75% {
        background-color: #D9D9D9
    }

    75.1%,
    to {
        background-color: #498dca
    }
}

@-webkit-keyframes color-rotate2 {

    0%,
    50%,
    75.1%,
    to {
        background-color: #D9D9D9
    }

    50.1%,
    75% {
        background-color: #498dca
    }
}

@keyframes color-rotate2 {

    0%,
    50%,
    75.1%,
    to {
        background-color: #D9D9D9
    }

    50.1%,
    75% {
        background-color: #498dca
    }
}

@-webkit-keyframes color-rotate3 {

    0%,
    25%,
    50.1%,
    to {
        background-color: #D9D9D9
    }

    25.1%,
    50% {
        background-color: #498dca
    }
}

@keyframes color-rotate3 {

    0%,
    25%,
    50.1%,
    to {
        background-color: #D9D9D9
    }

    25.1%,
    50% {
        background-color: #498dca
    }
}

@-webkit-keyframes color-rotate4 {

    0%,
    25% {
        background-color: #498dca
    }

    25.1%,
    to {
        background-color: #D9D9D9
    }
}

@keyframes color-rotate4 {

    0%,
    25% {
        background-color: #498dca
    }

    25.1%,
    to {
        background-color: #D9D9D9
    }
}

.no-content .text-wrap {
    margin: 20px auto 0;
    max-width: 480px;
    width: 100%;
    text-align: center
}

.no-content .zh {
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.3
}

.no-content .en {
    margin-top: 15px;
    font-weight: 700;
    line-height: 1.3
}

.no-content .txt {
    margin-top: 15px;
    line-height: 1.8;
    color: #323232
}

.no-content .common-btn {
    margin: 40px auto 0;
    cursor: pointer
}

.common-remind {
    font-size: 0.9375rem;
    line-height: 1.8
}

.common-remind .remind-header {
    max-width: 105px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.common-remind .remind-header>img {
    width: 20px;
    height: 20px;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.common-remind .remind-header .t {
    margin-left: 10px;
    font-weight: 700;
    line-height: 1.3
}

.close-btn {
    width: 80px;
    height: 80px;
    background: #323232;
    position: relative
}

@media only screen and (max-width:575px) {
    .close-btn {
        width: 60px;
        height: 60px
    }
}

.close-btn:before {
    opacity: 0;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 15px 18px 0;
    border-color: transparent #498dca transparent transparent;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s
}

@media only screen and (max-width:1200px) {
    .close-btn:before {
        opacity: 1
    }
}

@media only screen and (min-width:1201px) {
    .close-btn:hover:before {
        opacity: 1
    }

    .close-btn:hover .cross {
        -webkit-transform: translate3d(-50%, -50%, 0) rotate(90deg);
        transform: translate3d(-50%, -50%, 0) rotate(90deg)
    }
}

@media only screen and (max-width:1200px) {
    .close-btn:active:before {
        opacity: 1
    }

    .close-btn:active .cross {
        -webkit-transform: translate3d(-50%, -50%, 0) rotate(90deg);
        transform: translate3d(-50%, -50%, 0) rotate(90deg)
    }
}

.close-btn .cross {
    width: 20px;
    height: 20px;
    position: relative;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s
}

.close-btn .cross:after,
.close-btn .cross:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    top: 8px;
    left: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.close-btn .cross:before {
    background-color: #fff
}

.close-btn .cross:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background-color: #498dca
}

.common-close {
    width: 40px;
    height: 40px;
    background: #243c82;
    position: relative;
    cursor: pointer
}

@media only screen and (min-width:1201px) {
    .common-close:hover .cross {
        -webkit-transform: translate3d(-50%, -50%, 0) rotate(90deg);
        transform: translate3d(-50%, -50%, 0) rotate(90deg)
    }
}

@media only screen and (max-width:1200px) {
    .common-close:active .cross {
        -webkit-transform: translate3d(-50%, -50%, 0) rotate(90deg);
        transform: translate3d(-50%, -50%, 0) rotate(90deg)
    }
}

.common-close .cross {
    width: 20px;
    height: 20px;
    position: relative;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s
}

.common-close .cross:after,
.common-close .cross:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    top: 8px;
    left: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: #fff
}

.common-close .cross:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.no-value a {
    pointer-events: none
}

.no-value i {
    color: #D1D1D1 !important
}

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: scale(1, 1) translate(0px, 0px);
        transform: scale(1, 1) translate(0px, 0px)
    }

    30% {
        -webkit-transform: scale(1, 0.8) translate(0px, 3px);
        transform: scale(1, 0.8) translate(0px, 3px)
    }

    75% {
        -webkit-transform: scale(1, 1.1) translate(0px, -5px);
        transform: scale(1, 1.1) translate(0px, -5px)
    }

    to {
        -webkit-transform: scale(1, 1) translate(0px, 0px);
        transform: scale(1, 1) translate(0px, 0px)
    }
}

@keyframes bounce {
    0% {
        -webkit-transform: scale(1, 1) translate(0px, 0px);
        transform: scale(1, 1) translate(0px, 0px)
    }

    30% {
        -webkit-transform: scale(1, 0.8) translate(0px, 3px);
        transform: scale(1, 0.8) translate(0px, 3px)
    }

    75% {
        -webkit-transform: scale(1, 1.1) translate(0px, -5px);
        transform: scale(1, 1.1) translate(0px, -5px)
    }

    to {
        -webkit-transform: scale(1, 1) translate(0px, 0px);
        transform: scale(1, 1) translate(0px, 0px)
    }
}

[lang=en] .common-btn {
    max-width: 220px
}

[lang=en] .common-btn p {
    text-align: center
}

._article ._contentWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

._article ._imgCover {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: -20px;
    width: 100%;
    max-height: 100%
}

._article ._imgCover .swiper {
    width: 100%
}

@media only screen and (max-width:900px) {
    ._article ._imgCover {
        margin-bottom: -10px
    }
}

._article ._cover {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 20px;
    width: 100%
}

@media only screen and (max-width:900px) {
    ._article ._cover {
        margin-bottom: 10px
    }
}

._article ._photo {
    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;
    position: relative;
    width: 100%;
    overflow: hidden
}

._article ._photo video-player {
    width: 100%
}

._article ._photo iframe {
    width: 100%
}

._article ._wordCover {
    margin-top: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%
}

@media only screen and (max-width:900px) {
    ._article ._wordCover {
        margin-top: 20px
    }
}

._article ._H {
    padding: 0 20px;
    margin-bottom: 10px;
    width: 100%;
    font-size: 1.375rem;
    line-height: 1.5
}

@media only screen and (max-width:900px) {
    ._article ._H {
        padding: 0 0;
        margin-bottom: 10px;
        font-size: 1.25rem;
        line-height: 1.5
    }
}

._article ._subH {
    padding: 0 20px;
    margin-bottom: 15px;
    width: 100%;
    font-size: 1.125rem;
    line-height: 1.25
}

@media only screen and (max-width:900px) {
    ._article ._subH {
        padding: 0 0;
        margin-bottom: 15px;
        font-size: 1rem;
        line-height: 1.2
    }
}

._article ._P {
    padding: 0 20px;
    width: 100%;
    font-size: 1rem;
    line-height: 1.8
}

._article ._P .instagram-media.instagram-media-rendered {
    margin: 15px 0 !important;
    max-width: 100% !important;
    width: 100% !important
}

._article ._P a:not(._button) {
    color: #007aff
}

._article ._P ol,
._article ._P ul {
    display: inline-block;
    text-align: left
}

._article ._P ol li,
._article ._P ul li {
    margin-left: 16px
}

._article ._P ol {
    list-style: decimal !important
}

._article ._P ul {
    list-style: disc !important
}

@media only screen and (max-width:900px) {
    ._article ._P {
        padding: 0 0;
        font-size: 1rem;
        line-height: 1.8
    }
}

._article ._description {
    margin-top: 15px;
    width: 100%;
    padding: 0 20px;
    font-size: 0.875rem
}

@media only screen and (max-width:900px) {
    ._article ._description {
        padding: 0;
        font-size: 0.875rem
    }
}

._article ._buttonCover {
    display: block;
    text-align: left
}

._article ._buttonCover:not(:only-child) {
    margin-top: 40px
}

@media only screen and (max-width:900px) {
    ._article ._buttonCover:not(:only-child) {
        margin-top: 20px
    }
}

._article ._button {
    display: inline-block;
    position: relative;
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
    font-size: 0.875rem;
    z-index: 0
}

._article ._button span {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s
}

@media only screen and (min-width:900px) {
    ._article ._button:hover span {
        opacity: 1
    }
}

@media only screen and (max-width:900px) {
    ._article ._button {
        font-size: 0.75rem
    }
}

._article[img-swiper=on] .swiper-pagination {
    margin: calc(20px - 20px) 0 20px;
    height: 5px;
    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;
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto
}

@media only screen and (max-width:900px) {
    ._article[img-swiper=on] .swiper-pagination {
        margin: calc(10px - 10px) 0 10px
    }
}

._article[img-swiper=on] .swiper-pagination .swiper-pagination-bullet {
    margin: 0 10px;
    background-color: #000;
    opacity: 0.5;
    width: 5px;
    height: 5px;
    cursor: pointer
}

._article[img-swiper=on] .swiper-pagination .swiper-pagination-bullet-active.swiper-pagination-bullet {
    width: 75px;
    height: 1px;
    opacity: 1;
    background-color: #0DCD50;
    -webkit-transition: width 0.5s;
    transition: width 0.5s
}

._article[img-swiper=on] .swiper-button-cover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none
}

._article[img-swiper=on] .swiper-button-cover .swiper-button-next,
._article[img-swiper=on] .swiper-button-cover .swiper-button-prev {
    position: absolute;
    top: 50%;
    margin: 0;
    pointer-events: auto;
    width: 20px;
    height: 20px
}

._article[img-swiper=on] .swiper-button-cover .swiper-button-next:after,
._article[img-swiper=on] .swiper-button-cover .swiper-button-prev:after {
    content: ""
}

._article[img-swiper=on] .swiper-button-cover .swiper-button-next {
    right: 20px;
    -webkit-transform: translate(0, -50%) rotate(-45deg);
    transform: translate(0, -50%) rotate(-45deg);
    border-right: 2px solid #000;
    border-bottom: 2px solid #000
}

._article[img-swiper=on] .swiper-button-cover .swiper-button-prev {
    left: 20px;
    -webkit-transform: translate(0, -50%) rotate(45deg);
    transform: translate(0, -50%) rotate(45deg);
    border-left: 2px solid #000;
    border-bottom: 2px solid #000
}

._article[img-swiper=on] .swiper-wrapper {
    height: auto
}

._article ._wordCover:only-child {
    margin: 0 !important
}

._article.typeSL ._subH,
._article.typeSR ._subH {
    margin-bottom: 0;
    width: 35%
}

@media only screen and (max-width:900px) {

    ._article.typeSL ._P,
    ._article.typeSL ._subH,
    ._article.typeSR ._P,
    ._article.typeSR ._subH {
        width: 100%
    }

    ._article.typeSL ._subH,
    ._article.typeSR ._subH {
        margin-bottom: 15px
    }

    ._article.typeSL ._P,
    ._article.typeSR ._P {
        margin: 0
    }
}

._article.typeSL ._subH {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1
}

._article.typeSL ._P {
    margin-left: calc(40px - 20px);
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    width: calc(65% - 40px + 20px)
}

@media only screen and (max-width:900px) {

    ._article.typeSL ._P,
    ._article.typeSL ._subH {
        -webkit-box-ordinal-group: initial;
        -ms-flex-order: initial;
        order: initial;
        width: 100%
    }

    ._article.typeSL ._P {
        margin: 0
    }
}

._article.typeSR ._subH {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2
}

._article.typeSR ._P {
    margin-right: calc(40px - 20px);
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    width: calc(65% - 40px + 20px)
}

@media only screen and (max-width:900px) {

    ._article.typeSR ._P,
    ._article.typeSR ._subH {
        -webkit-box-ordinal-group: initial;
        -ms-flex-order: initial;
        order: initial;
        width: 100%
    }

    ._article.typeSR ._P {
        margin: 0
    }
}

._article.typeU ._imgCover,
._article.typeUL ._imgCover,
._article.typeUR ._imgCover {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3
}

._article.typeU ._wordCover,
._article.typeUL ._wordCover,
._article.typeUR ._wordCover {
    margin: 0;
    margin-bottom: 40px
}

@media only screen and (max-width:900px) {

    ._article.typeU ._wordCover,
    ._article.typeUL ._wordCover,
    ._article.typeUR ._wordCover {
        margin-bottom: 20px
    }

    ._article.typeUL[mobile-rwd=on] ._H,
    ._article.typeUR[mobile-rwd=on] ._H,
    ._article.typeU[mobile-rwd=on] ._H {
        margin-top: 20px
    }

    ._article.typeUL[mobile-rwd=on] ._imgCover,
    ._article.typeUR[mobile-rwd=on] ._imgCover,
    ._article.typeU[mobile-rwd=on] ._imgCover {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1
    }

    ._article.typeUL[mobile-rwd=on] ._wordCover,
    ._article.typeUR[mobile-rwd=on] ._wordCover,
    ._article.typeU[mobile-rwd=on] ._wordCover {
        margin: 0
    }
}

._article.typeUL ._H,
._article.typeUR ._H {
    margin-bottom: 40px;
    width: 35%
}

@media only screen and (max-width:900px) {

    ._article.typeUL ._H,
    ._article.typeUR ._H {
        margin-bottom: 10px;
        width: 100%
    }
}

._article.typeUL ._H {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1
}

._article.typeUL ._wordCover {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    margin-left: calc(40px - 20px);
    width: calc(65% - 40px + 20px)
}

@media only screen and (max-width:900px) {
    ._article.typeUL ._wordCover {
        margin-left: 0;
        width: 100%
    }
}

._article.typeUR ._H {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2
}

._article.typeUR ._wordCover {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    margin-right: calc(40px - 20px);
    width: calc(65% - 40px + 20px)
}

@media only screen and (max-width:900px) {
    ._article.typeUR ._H {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        width: 100%
    }

    ._article.typeUR ._wordCover {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        margin-right: 0;
        width: 100%
    }
}

._article.typeD ._imgCover,
._article.typeDL ._imgCover,
._article.typeDR ._imgCover {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1
}

._article.typeD ._H {
    margin-top: 40px
}

._article.typeD ._wordCover {
    margin: 0
}

@media only screen and (max-width:900px) {
    ._article.typeD ._H {
        margin-top: 20px
    }
}

._article.typeDL ._H,
._article.typeDR ._H {
    margin-top: 40px;
    width: 35%
}

._article.typeDL ._wordCover,
._article.typeDR ._wordCover {
    margin-top: 40px
}

@media only screen and (max-width:900px) {

    ._article.typeDL ._H,
    ._article.typeDR ._H {
        margin-top: 20px;
        width: 100%
    }

    ._article.typeDL ._wordCover,
    ._article.typeDR ._wordCover {
        margin-top: 0
    }
}

._article.typeDL ._H {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1
}

._article.typeDL ._wordCover {
    margin-left: calc(40px - 20px);
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    width: calc(65% - 40px + 20px)
}

@media only screen and (max-width:900px) {

    ._article.typeDL ._H,
    ._article.typeDL ._wordCover {
        -webkit-box-ordinal-group: initial;
        -ms-flex-order: initial;
        order: initial
    }

    ._article.typeDL ._wordCover {
        margin-left: 0;
        width: 100%
    }
}

._article.typeDR ._H {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2
}

._article.typeDR ._wordCover {
    margin-right: calc(40px - 20px);
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    width: calc(65% - 40px + 20px)
}

@media only screen and (max-width:900px) {

    ._article.typeDR ._H,
    ._article.typeDR ._wordCover {
        -webkit-box-ordinal-group: initial;
        -ms-flex-order: initial;
        order: initial
    }

    ._article.typeDR ._wordCover {
        margin-right: 0;
        width: 100%
    }
}

._article.typeL ._contentWrap,
._article.typeR ._contentWrap {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

._article.typeL ._imgCover,
._article.typeLR ._imgCover {
    margin-left: 30px;
    width: calc(50% - 30px)
}

._article.typeL ._imgCover .swiper-button-cover,
._article.typeLR ._imgCover .swiper-button-cover {
    left: auto;
    right: 0;
    width: 100%
}

@media only screen and (max-width:900px) {

    ._article.typeL ._imgCover,
    ._article.typeLR ._imgCover {
        margin-left: 0;
        width: 100%
    }
}

._article.typeL ._imgCover {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1
}

._article.typeL ._wordCover {
    margin-top: 0;
    width: 50%
}

._article.typeL[img-row=x2] ._imgCover,
._article.typeL[img-row=x3] ._imgCover,
._article.typeL[img-row=x4] ._imgCover,
._article.typeL[img-row=x5] ._imgCover {
    margin: 0 -10px -20px 20px;
    width: calc(50% - 20px + 10px)
}

._article.typeL[img-merge=on] ._imgCover {
    margin: 0 0 0 30px;
    width: calc(50% - 30px)
}

@media only screen and (max-width:900px) {
    ._article.typeL ._imgCover {
        -webkit-box-ordinal-group: initial;
        -ms-flex-order: initial;
        order: initial
    }

    ._article.typeL ._wordCover {
        margin-top: 20px;
        width: 100%
    }

    ._article.typeL[img-row=x2] ._imgCover,
    ._article.typeL[img-row=x3] ._imgCover,
    ._article.typeL[img-row=x4] ._imgCover,
    ._article.typeL[img-row=x5] ._imgCover {
        margin: 0 calc(-12px / 2) -10px;
        width: calc(100% + 12px)
    }

    ._article.typeL[img-merge=on] ._imgCover {
        margin: 0;
        width: 100%
    }
}

._article.typeLR:after,
._article.typeLR:before {
    display: block;
    clear: both;
    content: ""
}

._article.typeLR ._contentWrap {
    display: block
}

._article.typeLR ._imgCover {
    float: right;
    margin-bottom: 0px
}

._article.typeLR[img-row=x2] ._imgCover,
._article.typeLR[img-row=x3] ._imgCover,
._article.typeLR[img-row=x4] ._imgCover,
._article.typeLR[img-row=x5] ._imgCover {
    margin: 0 -10px 0px 20px;
    width: calc(50% - 20px + 10px)
}

._article.typeLR[img-merge=on] ._imgCover {
    margin: 0 0 20px 30px;
    width: calc(50% - 30px)
}

@media only screen and (max-width:900px) {

    ._article.typeLR ._H,
    ._article.typeLR ._imgCover,
    ._article.typeLR ._subH {
        float: none;
        width: 100%
    }

    ._article.typeLR ._H {
        margin-top: 20px
    }

    ._article.typeLR[img-row=x2] ._imgCover,
    ._article.typeLR[img-row=x3] ._imgCover,
    ._article.typeLR[img-row=x4] ._imgCover,
    ._article.typeLR[img-row=x5] ._imgCover {
        margin: 0 -6px -10px;
        width: calc(100% + 12px)
    }

    ._article.typeLR[img-merge=on] ._imgCover {
        margin: 0;
        width: 100%
    }
}

._article.typeR ._imgCover,
._article.typeRR ._imgCover {
    margin-right: 30px;
    width: calc(50% - 30px)
}

._article.typeR ._imgCover .swiper-button-cover,
._article.typeRR ._imgCover .swiper-button-cover {
    width: 100%
}

@media only screen and (max-width:900px) {

    ._article.typeR ._imgCover,
    ._article.typeRR ._imgCover {
        margin: 0 0 -10px;
        width: 100%
    }
}

._article.typeR ._wordCover {
    margin-top: 0;
    width: 50%
}

._article.typeR[img-row=x2] ._imgCover,
._article.typeR[img-row=x3] ._imgCover,
._article.typeR[img-row=x4] ._imgCover,
._article.typeR[img-row=x5] ._imgCover {
    margin: 0 20px -20px -10px;
    width: calc(50% - 20px + 10px)
}

._article.typeR[img-merge=on] ._imgCover {
    margin: 0 30px 0 0;
    width: calc(50% - 30px)
}

@media only screen and (max-width:900px) {
    ._article.typeR ._wordCover {
        margin-top: 20px;
        width: 100%
    }

    ._article.typeR[img-row=x2] ._imgCover,
    ._article.typeR[img-row=x3] ._imgCover,
    ._article.typeR[img-row=x4] ._imgCover,
    ._article.typeR[img-row=x5] ._imgCover {
        margin: 0 -6px -10px;
        width: calc(100% + 12px)
    }

    ._article.typeR[img-merge=on] ._imgCover {
        margin: 0;
        width: 100%
    }
}

._article.typeRR:after,
._article.typeRR:before {
    display: block;
    clear: both;
    content: ""
}

._article.typeRR ._contentWrap {
    display: block
}

._article.typeRR ._imgCover {
    float: left;
    margin-bottom: 0px
}

._article.typeRR[img-row=x2] ._imgCover,
._article.typeRR[img-row=x3] ._imgCover,
._article.typeRR[img-row=x4] ._imgCover,
._article.typeRR[img-row=x5] ._imgCover {
    margin: 0 20px 0px -10px;
    width: calc(50% - 20px + 10px)
}

._article.typeRR[img-merge=on] ._imgCover {
    margin: 0 30px 20px 0;
    width: calc(50% - 30px)
}

@media only screen and (max-width:900px) {

    ._article.typeRR ._H,
    ._article.typeRR ._imgCover,
    ._article.typeRR ._subH {
        float: none;
        width: 100%
    }

    ._article.typeRR ._H {
        margin-top: 20px
    }

    ._article.typeRR[img-row=x2] ._imgCover,
    ._article.typeRR[img-row=x3] ._imgCover,
    ._article.typeRR[img-row=x4] ._imgCover,
    ._article.typeRR[img-row=x5] ._imgCover {
        margin: 0 -6px;
        width: calc(100% + 12px)
    }

    ._article.typeRR[img-merge=on] ._imgCover {
        margin: 0;
        width: 100%
    }
}

._article.typeF,
._article.typeFBox,
._article.typeFBoxL,
._article.typeFBoxR,
._article.typeFL,
._article.typeFR {
    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;
    position: relative;
    z-index: 0;
    padding: 100px 150px 100px
}

._article.typeF ._backgroundWrap,
._article.typeF ._mobile,
._article.typeF ._pc,
._article.typeFBox ._backgroundWrap,
._article.typeFBox ._mobile,
._article.typeFBox ._pc,
._article.typeFBoxL ._backgroundWrap,
._article.typeFBoxL ._mobile,
._article.typeFBoxL ._pc,
._article.typeFBoxR ._backgroundWrap,
._article.typeFBoxR ._mobile,
._article.typeFBoxR ._pc,
._article.typeFL ._backgroundWrap,
._article.typeFL ._mobile,
._article.typeFL ._pc,
._article.typeFR ._backgroundWrap,
._article.typeFR ._mobile,
._article.typeFR ._pc {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

._article.typeF ._mobile,
._article.typeF ._pc,
._article.typeFBox ._mobile,
._article.typeFBox ._pc,
._article.typeFBoxL ._mobile,
._article.typeFBoxL ._pc,
._article.typeFBoxR ._mobile,
._article.typeFBoxR ._pc,
._article.typeFL ._mobile,
._article.typeFL ._pc,
._article.typeFR ._mobile,
._article.typeFR ._pc {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center
}

._article.typeF ._mobile,
._article.typeFBox ._mobile,
._article.typeFBoxL ._mobile,
._article.typeFBoxR ._mobile,
._article.typeFL ._mobile,
._article.typeFR ._mobile {
    display: none
}

._article.typeF ._contentWrap,
._article.typeFBox ._contentWrap,
._article.typeFBoxL ._contentWrap,
._article.typeFBoxR ._contentWrap,
._article.typeFL ._contentWrap,
._article.typeFR ._contentWrap {
    width: 75%
}

._article.typeF ._wordCover,
._article.typeFBox ._wordCover,
._article.typeFBoxL ._wordCover,
._article.typeFBoxR ._wordCover,
._article.typeFL ._wordCover,
._article.typeFR ._wordCover {
    margin: 0
}

._article.typeF ._imgCover+._wordCover,
._article.typeFBox ._imgCover+._wordCover,
._article.typeFBoxL ._imgCover+._wordCover,
._article.typeFBoxR ._imgCover+._wordCover,
._article.typeFL ._imgCover+._wordCover,
._article.typeFR ._imgCover+._wordCover {
    margin-top: 40px
}

@media only screen and (max-width:900px) {

    ._article.typeF,
    ._article.typeFBox,
    ._article.typeFBoxL,
    ._article.typeFBoxR,
    ._article.typeFL,
    ._article.typeFR {
        padding: 20px
    }

    ._article.typeF ._H,
    ._article.typeFBox ._H,
    ._article.typeFBoxL ._H,
    ._article.typeFBoxR ._H,
    ._article.typeFL ._H,
    ._article.typeFR ._H {
        margin-top: 0;
        -webkit-box-ordinal-group: initial;
        -ms-flex-order: initial;
        order: initial
    }

    ._article.typeF ._pc,
    ._article.typeFBox ._pc,
    ._article.typeFBoxL ._pc,
    ._article.typeFBoxR ._pc,
    ._article.typeFL ._pc,
    ._article.typeFR ._pc {
        display: none
    }

    ._article.typeF ._mobile,
    ._article.typeFBox ._mobile,
    ._article.typeFBoxL ._mobile,
    ._article.typeFBoxR ._mobile,
    ._article.typeFL ._mobile,
    ._article.typeFR ._mobile {
        display: block
    }

    ._article.typeF ._contentWrap,
    ._article.typeFBox ._contentWrap,
    ._article.typeFBoxL ._contentWrap,
    ._article.typeFBoxR ._contentWrap,
    ._article.typeFL ._contentWrap,
    ._article.typeFR ._contentWrap {
        width: 100%
    }

    ._article.typeF ._imgCover+._wordCover,
    ._article.typeFBox ._imgCover+._wordCover,
    ._article.typeFBoxL ._imgCover+._wordCover,
    ._article.typeFBoxR ._imgCover+._wordCover,
    ._article.typeFL ._imgCover+._wordCover,
    ._article.typeFR ._imgCover+._wordCover {
        margin-top: 20px
    }
}

._article.typeFBox ._contentWrap,
._article.typeFBoxL ._contentWrap,
._article.typeFBoxR ._contentWrap {
    padding: 50px;
    background-color: rgba(255, 255, 255, 0.5)
}

@media only screen and (max-width:900px) {

    ._article.typeFBox,
    ._article.typeFBoxL,
    ._article.typeFBoxR {
        padding: 20px !important
    }

    ._article.typeFBox ._contentWrap,
    ._article.typeFBoxL ._contentWrap,
    ._article.typeFBoxR ._contentWrap {
        padding: 20px
    }
}

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

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

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

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

._article:not(:last-child) {
    margin-bottom: 60px
}

@media only screen and (max-width:900px) {
    ._article:not(:last-child) {
        margin-bottom: 40px
    }
}

._article[img-swiper=on] ._imgCover {
    position: relative
}

._article[img-swiper=on] ._imgCover .swiper-button-cover:before {
    display: block;
    width: 100%;
    content: ""
}

._article[img-swiper=on][swiper-num="2"] ._imgCover .swiper-button-cover:before {
    padding-bottom: 28.125% !important
}

._article[img-swiper=on][swiper-num="3"] ._imgCover .swiper-button-cover:before {
    padding-bottom: 18.75% !important
}

._article[img-swiper=on][swiper-num="4"] ._imgCover .swiper-button-cover:before {
    padding-bottom: 14.0625% !important
}

._article[img-swiper=on][swiper-num="5"] ._imgCover .swiper-button-cover:before {
    padding-bottom: 11.25% !important
}

@media only screen and (max-width:900px) {
    ._article[img-swiper=on][swiper-num="2"] ._imgCover .swiper-button-cover:before {
        padding-bottom: 56.25% !important
    }

    ._article[img-swiper=on][swiper-num="3"] ._imgCover .swiper-button-cover:before {
        padding-bottom: 56.25% !important
    }

    ._article[img-swiper=on][swiper-num="4"] ._imgCover .swiper-button-cover:before {
        padding-bottom: 56.25% !important
    }

    ._article[img-swiper=on][swiper-num="5"] ._imgCover .swiper-button-cover:before {
        padding-bottom: 56.25% !important
    }
}

._article[img-row=x2] ._imgCover {
    margin: 0 -10px -20px -10px;
    width: calc(100% + 20px)
}

._article[img-row=x2] ._imgCover ._cover {
    margin-bottom: 20px;
    padding: 0 10px;
    width: calc(100% / 2)
}

@media only screen and (max-width:900px) {
    ._article[img-row=x2] ._imgCover {
        margin: 0 -6px -10px;
        width: calc(100% + 12px)
    }

    ._article[img-row=x2] ._imgCover ._cover {
        margin-bottom: 10px;
        padding: 0 6px;
        width: 50%
    }
}

._article[img-row=x3] ._imgCover {
    margin: 0 -10px -20px -10px;
    width: calc(100% + 20px)
}

._article[img-row=x3] ._imgCover ._cover {
    margin-bottom: 20px;
    padding: 0 10px;
    width: calc(100% / 3)
}

@media only screen and (max-width:900px) {
    ._article[img-row=x3] ._imgCover {
        margin: 0 -6px -10px;
        width: calc(100% + 12px)
    }

    ._article[img-row=x3] ._imgCover ._cover {
        margin-bottom: 10px;
        padding: 0 6px;
        width: 50%
    }
}

._article[img-row=x4] ._imgCover {
    margin: 0 -10px -20px -10px;
    width: calc(100% + 20px)
}

._article[img-row=x4] ._imgCover ._cover {
    margin-bottom: 20px;
    padding: 0 10px;
    width: calc(100% / 4)
}

@media only screen and (max-width:900px) {
    ._article[img-row=x4] ._imgCover {
        margin: 0 -6px -10px;
        width: calc(100% + 12px)
    }

    ._article[img-row=x4] ._imgCover ._cover {
        margin-bottom: 10px;
        padding: 0 6px;
        width: 50%
    }
}

._article[img-row=x5] ._imgCover {
    margin: 0 -10px -20px -10px;
    width: calc(100% + 20px)
}

._article[img-row=x5] ._imgCover ._cover {
    margin-bottom: 20px;
    padding: 0 10px;
    width: calc(100% / 5)
}

@media only screen and (max-width:900px) {
    ._article[img-row=x5] ._imgCover {
        margin: 0 -6px -10px;
        width: calc(100% + 12px)
    }

    ._article[img-row=x5] ._imgCover ._cover {
        margin-bottom: 10px;
        padding: 0 6px;
        width: 50%
    }
}

._article[img-merge=on] ._imgCover {
    margin: 0;
    width: 100%
}

._article[img-merge=on] ._imgCover ._cover {
    padding: 0;
    margin-bottom: 0
}

._article[img-merge=on] ._imgCover ._cover ._description {
    display: none
}

._article[article-flex=up].typeL ._contentWrap,
._article[article-flex=up].typeR ._contentWrap {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

._article[article-flex=center].typeL ._contentWrap,
._article[article-flex=center].typeR ._contentWrap {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

._article[article-flex=down].typeL ._contentWrap,
._article[article-flex=down].typeR ._contentWrap {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}

._article[h-align=center] ._H {
    text-align: center
}

._article[h-align=right] ._H {
    text-align: right
}

._article[subh-align=center] ._subH {
    text-align: center
}

._article[subh-align=right] ._subH {
    text-align: right
}

._article[p-align=center] ._P {
    text-align: center
}

._article[p-align=right] ._P {
    text-align: right
}

._article[description-align=left] ._description {
    text-align: left
}

._article[description-align=center] ._description {
    text-align: center
}

._article[description-align=right] ._description {
    text-align: right
}

._article[button-align=center] ._buttonCover {
    text-align: center
}

._article[button-align=right] ._buttonCover {
    text-align: right
}

._article img {
    max-width: 100%;
    width: auto
}

._article[img-size=x11] ._imgCover img,
._article[img-size=x169] ._imgCover img,
._article[img-size=x34] ._imgCover img,
._article[img-size=x43] ._imgCover img {
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    width: 101%;
    height: 101%;
    -o-object-fit: cover;
    object-fit: cover;
    object-posititon: 50% 50%
}

@media (-ms-high-contrast:none),
screen and (-ms-high-contrast:active) {

    ._article[img-size=x11] ._imgCover img,
    ._article[img-size=x169] ._imgCover img,
    ._article[img-size=x34] ._imgCover img,
    ._article[img-size=x43] ._imgCover img {
        top: 50%;
        bottom: auto;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        height: auto
    }
}

._article[img-size=x11] ._imgCover ._photo:before,
._article[img-size=x11] ._imgCover .swiper-button-cover:before {
    display: block;
    padding-bottom: 100% !important;
    width: 100%;
    content: ""
}

._article[img-size=x11][swiper-num="2"] ._imgCover .swiper-button-cover:before {
    padding-bottom: 50% !important
}

._article[img-size=x11][swiper-num="3"] ._imgCover .swiper-button-cover:before {
    padding-bottom: 33.3333333333% !important
}

._article[img-size=x11][swiper-num="4"] ._imgCover .swiper-button-cover:before {
    padding-bottom: 25% !important
}

._article[img-size=x11][swiper-num="5"] ._imgCover .swiper-button-cover:before {
    padding-bottom: 20% !important
}

@media only screen and (max-width:900px) {
    ._article[img-size=x11][swiper-num="2"] ._imgCover .swiper-button-cover:before {
        padding-bottom: 100% !important
    }

    ._article[img-size=x11][swiper-num="3"] ._imgCover .swiper-button-cover:before {
        padding-bottom: 100% !important
    }

    ._article[img-size=x11][swiper-num="4"] ._imgCover .swiper-button-cover:before {
        padding-bottom: 100% !important
    }

    ._article[img-size=x11][swiper-num="5"] ._imgCover .swiper-button-cover:before {
        padding-bottom: 100% !important
    }
}

._article[img-size=x34] ._imgCover ._photo:before,
._article[img-size=x34] ._imgCover .swiper-button-cover:before {
    display: block;
    padding-bottom: 133.3% !important;
    width: 100%;
    content: ""
}

._article[img-size=x34][swiper-num="2"] ._imgCover .swiper-button-cover:before {
    padding-bottom: 66.65% !important
}

._article[img-size=x34][swiper-num="3"] ._imgCover .swiper-button-cover:before {
    padding-bottom: 44.4333333333% !important
}

._article[img-size=x34][swiper-num="4"] ._imgCover .swiper-button-cover:before {
    padding-bottom: 33.325% !important
}

._article[img-size=x34][swiper-num="5"] ._imgCover .swiper-button-cover:before {
    padding-bottom: 26.66% !important
}

@media only screen and (max-width:900px) {
    ._article[img-size=x34][swiper-num="2"] ._imgCover .swiper-button-cover:before {
        padding-bottom: 133.3% !important
    }

    ._article[img-size=x34][swiper-num="3"] ._imgCover .swiper-button-cover:before {
        padding-bottom: 133.3% !important
    }

    ._article[img-size=x34][swiper-num="4"] ._imgCover .swiper-button-cover:before {
        padding-bottom: 133.3% !important
    }

    ._article[img-size=x34][swiper-num="5"] ._imgCover .swiper-button-cover:before {
        padding-bottom: 133.3% !important
    }
}

._article[img-size=x43] ._imgCover ._photo:before,
._article[img-size=x43] ._imgCover .swiper-button-cover:before {
    display: block;
    padding-bottom: 75% !important;
    width: 100%;
    content: ""
}

._article[img-size=x43][swiper-num="2"] ._imgCover .swiper-button-cover:before {
    padding-bottom: 37.5% !important
}

._article[img-size=x43][swiper-num="3"] ._imgCover .swiper-button-cover:before {
    padding-bottom: 25% !important
}

._article[img-size=x43][swiper-num="4"] ._imgCover .swiper-button-cover:before {
    padding-bottom: 18.75% !important
}

._article[img-size=x43][swiper-num="5"] ._imgCover .swiper-button-cover:before {
    padding-bottom: 15% !important
}

@media only screen and (max-width:900px) {
    ._article[img-size=x43][swiper-num="2"] ._imgCover .swiper-button-cover:before {
        padding-bottom: 75% !important
    }

    ._article[img-size=x43][swiper-num="3"] ._imgCover .swiper-button-cover:before {
        padding-bottom: 75% !important
    }

    ._article[img-size=x43][swiper-num="4"] ._imgCover .swiper-button-cover:before {
        padding-bottom: 75% !important
    }

    ._article[img-size=x43][swiper-num="5"] ._imgCover .swiper-button-cover:before {
        padding-bottom: 75% !important
    }
}

._article[img-size=x169] ._imgCover ._photo:before,
._article[img-size=x169] ._imgCover .swiper-button-cover:before {
    display: block;
    padding-bottom: 56.25% !important;
    width: 100%;
    content: ""
}

._article[img-size=x169][swiper-num="2"] ._imgCover .swiper-button-cover:before {
    padding-bottom: 28.125% !important
}

._article[img-size=x169][swiper-num="3"] ._imgCover .swiper-button-cover:before {
    padding-bottom: 18.75% !important
}

._article[img-size=x169][swiper-num="4"] ._imgCover .swiper-button-cover:before {
    padding-bottom: 14.0625% !important
}

._article[img-size=x169][swiper-num="5"] ._imgCover .swiper-button-cover:before {
    padding-bottom: 11.25% !important
}

@media only screen and (max-width:900px) {
    ._article[img-size=x169][swiper-num="2"] ._imgCover .swiper-button-cover:before {
        padding-bottom: 56.25% !important
    }

    ._article[img-size=x169][swiper-num="3"] ._imgCover .swiper-button-cover:before {
        padding-bottom: 56.25% !important
    }

    ._article[img-size=x169][swiper-num="4"] ._imgCover .swiper-button-cover:before {
        padding-bottom: 56.25% !important
    }

    ._article[img-size=x169][swiper-num="5"] ._imgCover .swiper-button-cover:before {
        padding-bottom: 56.25% !important
    }
}

._article[img-flex=center] ._imgCover ._cover {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

._article[img-flex=down] ._imgCover ._cover {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

._article[img-firstbig=on] ._imgCover ._cover:first-child {
    width: 100%
}

._article[typeFull-size=s] ._contentWrap {
    width: 50%
}

@media only screen and (max-width:900px) {
    ._article[typeFull-size=s] ._contentWrap {
        width: 100%
    }
}

._article[typeFull-size=m] ._contentWrap {
    width: 65%
}

@media only screen and (max-width:900px) {
    ._article[typeFull-size=m] ._contentWrap {
        width: 100%
    }
}

._article[typeFull-size=l] ._contentWrap {
    width: 75%
}

@media only screen and (max-width:900px) {
    ._article[typeFull-size=l] ._contentWrap {
        width: 100%
    }
}

._article[typeFull-size=xl] ._contentWrap {
    width: 90%
}

@media only screen and (max-width:900px) {
    ._article[typeFull-size=xl] ._contentWrap {
        width: 100%
    }
}

._article[typeFull-Slice=on].typeFBox,
._article[typeFull-Slice=on].typeFBoxL,
._article[typeFull-Slice=on].typeFBoxR {
    padding: 0
}

nav.navbar {
    width: 100vw;
    height: 120px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background: #fff
}

@media only screen and (max-width:1280px) {
    nav.navbar {
        height: 60px
    }
}

nav.navbar:after {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: block;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2)));
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
    opacity: 0;
    pointer-events: none;
    content: "";
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s
}

nav.navbar.hover-bg {
    z-index: 11
}

nav.navbar.hover-bg:after {
    opacity: 1;
    -webkit-transition: opacity 0.3s 0.3s;
    transition: opacity 0.3s 0.3s
}

nav.navbar.hover-bg .logo-wrap {
    width: 140px;
    height: auto;
    background: none;
    position: static
}

nav.navbar.hover-bg .logo.green {
    display: block
}

nav.navbar.hover-bg .logo.white {
    display: none
}

nav.navbar .container {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 7.8125%
}

@media only screen and (max-width:575px) {
    nav.navbar .container {
        padding: 0 40px
    }
}

nav.navbar .logo-wrap {
    width: 200px;
    background: #3051a2;
    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;
    position: absolute;
    top: 0;
    left: 7.8125%;
    -webkit-transition: background 0.3s, width 0.3s, height 0.3s, position 0.3s !important;
    transition: background 0.3s, width 0.3s, height 0.3s, position 0.3s !important
}

@media only screen and (max-width:1280px) {
    nav.navbar .logo-wrap {
        width: 120px
    }
}

@media only screen and (max-width:575px) {
    nav.navbar .logo-wrap {
        left: 40px
    }
}

nav.navbar .logo-wrap:before {
    content: "";
    display: block;
    height: 0;
    padding-bottom: 100%
}

nav.navbar .logo {
    padding: 20px
}

nav.navbar .logo>svg {
    width: 100%;
    height: 100%;
    aspect-ratio: 142/23
}

nav.navbar .logo.green {
    display: none
}

nav.navbar .menu-wrap {
    margin-left: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%
}

nav.navbar .main-list,
nav.navbar .sub-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%
}

nav.navbar .main-list>li,
nav.navbar .sub-list>li {
    padding: 0 15px;
    font-weight: 500;
    font-size: 0.9375rem;
    line-height: 22px;
    letter-spacing: 0.01em;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
    height: 100%
}

nav.navbar .main-list>li>a,
nav.navbar .sub-list>li>a {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%
}

nav.navbar .main-list>li>a:after,
nav.navbar .sub-list>li>a:after {
    opacity: 0;
    position: absolute;
    bottom: -5px;
    left: 50%;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 20px 10px;
    border-color: transparent transparent #373737 transparent;
    content: ""
}

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

    nav.navbar .main-list>li.active>a,
    nav.navbar .sub-list>li.active>a {
        color: #3051a2
    }

    nav.navbar .main-list>li.active>a:after,
    nav.navbar .sub-list>li.active>a:after {
        opacity: 1
    }

    nav.navbar .main-list>li.active .hover-menu,
    nav.navbar .sub-list>li.active .hover-menu {
        opacity: 1;
        pointer-events: auto
    }

    nav.navbar .main-list>li.active .hover-menu .os-scrollbar-handle,
    nav.navbar .sub-list>li.active .hover-menu .os-scrollbar-handle {
        pointer-events: auto
    }
}

@media only screen and (max-width:768px) {
    nav.navbar .main-list {
        display: none
    }
}

nav.navbar .sub-list {
    color: #6C6C6C
}

@media only screen and (max-width:1366px) {
    nav.navbar .sub-list {
        display: none
    }
}

nav.navbar .tool {
    margin-left: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0 30px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media only screen and (max-width:768px) {
    nav.navbar .tool {
        gap: 0 20px
    }
}

nav.navbar .tool>li {
    cursor: pointer;
    width: 20px;
    height: 20px;
    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;
    -webkit-transition: color 0.3s;
    transition: color 0.3s
}

@media only screen and (min-width:1201px) {
    nav.navbar .tool>li:hover {
        color: #3051a2
    }
}

@media only screen and (max-width:1200px) {
    nav.navbar .tool>li:active {
        color: #3051a2
    }
}

nav.navbar .tool>li a {
    display: inline-block;
    width: 100%;
    height: 100%;
    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
}

nav.navbar .tool .search {
    width: 24px;
    height: 24px
}

nav.navbar .tool .icon-search2 {
    font-size: 1.125rem
}

nav.navbar .tool .icon-lang2 {
    font-size: 1.125rem
}

nav.navbar .tool .icon-mail {
    font-size: 0.9375rem
}

nav.navbar .menu-btn {
    cursor: pointer;
    margin-left: 30px;
    width: 22px;
    height: 22px;
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media only screen and (max-width:1366px) {
    nav.navbar .menu-btn {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
}

@media only screen and (max-width:768px) {
    nav.navbar .menu-btn {
        margin-left: 20px
    }
}

nav.navbar .menu-btn>span {
    width: 20px;
    height: 2px;
    border-radius: 500px
}

nav.navbar .menu-btn>span:not(:first-child) {
    margin-top: 5px
}

nav.navbar .menu-btn>span:first-child {
    background: #000;
    -webkit-transition: -webkit-transform 0.3s 0.1s;
    transition: -webkit-transform 0.3s 0.1s;
    transition: transform 0.3s 0.1s;
    transition: transform 0.3s 0.1s, -webkit-transform 0.3s 0.1s
}

nav.navbar .menu-btn>span:nth-child(2) {
    background: #00843D;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s
}

nav.navbar .menu-btn>span:nth-child(3) {
    background: #000;
    -webkit-transition: -webkit-transform 0.3s 0.1s;
    transition: -webkit-transform 0.3s 0.1s;
    transition: transform 0.3s 0.1s;
    transition: transform 0.3s 0.1s, -webkit-transform 0.3s 0.1s
}

nav.navbar .menu-btn.active>span:first-child {
    -webkit-transform: translateY(4px);
    transform: translateY(4px)
}

nav.navbar .menu-btn.active>span:nth-child(2) {
    opacity: 0
}

nav.navbar .menu-btn.active>span:nth-child(3) {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px)
}

nav.navbar.fixed {
    height: 80px;
    background: #fff;
    position: fixed;
    top: -80px;
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s
}

nav.navbar.fixed .language.active {
    color: #498dca
}

nav.navbar.fixed .language .dropdown-wrap {
    bottom: 20px
}

nav.navbar.fixed .container {
    overflow: hidden
}

nav.navbar.fixed .logo-wrap {
    width: 140px;
    height: auto;
    background: none;
    position: static
}

nav.navbar.fixed .logo {
    padding: 0
}

nav.navbar.fixed .logo.green {
    display: block
}

nav.navbar.fixed .logo.white {
    display: none
}

nav.navbar.fixed .tool .search {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

nav.navbar.fixed .hover-menu {
    position: fixed;
    left: 0;
    top: 120px
}

nav.navbar.fixed .hover-menu .common-close {
    position: fixed;
    top: 120px
}

nav.navbar.fixed.show {
    top: -80px;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    z-index: 11
}

nav.navbar.fixed.show .hover-menu {
    top: 80px
}

nav.navbar.fixed.show .hover-menu .common-close {
    top: 80px
}

nav.navbar .hover-menu {
    padding: 50px 0 0 0;
    position: absolute;
    left: 0;
    top: 120px;
    z-index: 1;
    background: #373737;
    width: 100%;
    opacity: 0;
    pointer-events: none
}

nav.navbar .hover-menu:before {
    display: block;
    position: absolute;
    z-index: 10;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 36px 26px 0 0;
    border-color: transparent #243c82 transparent transparent;
    content: ""
}

nav.navbar .hover-menu:after {
    position: absolute;
    bottom: 0;
    display: block;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(55, 55, 55, 0)), to(rgba(55, 55, 55, 0.8)));
    background: linear-gradient(to bottom, rgba(55, 55, 55, 0) 0%, rgba(55, 55, 55, 0.8) 100%);
    width: 100%;
    height: 80px;
    content: ""
}

nav.navbar .hover-menu .scroll-menu {
    max-height: calc(100vh - 120px - 100px);
    overflow-x: hidden;
    overflow-y: auto
}

nav.navbar .hover-menu .common-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 20
}

nav.navbar .hover-menu .os-scrollbar-handle {
    pointer-events: none
}

nav.navbar .hover-menu .wrapper {
    padding: 0 0 80px 0;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 1580px;
    width: calc(100% - 80px)
}

nav.navbar .hover-menu .main-block {
    margin-top: 30px;
    padding: 0 70px;
    max-width: 380px;
    width: 100%;
    border-right: 1px solid #515151
}

nav.navbar .hover-menu .main-block .inner-wrapper {
    position: sticky;
    top: 0
}

nav.navbar .hover-menu .main-block .sub-title {
    color: #498dca;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.22px
}

nav.navbar .hover-menu .main-block .main-title {
    margin-top: 10px;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.5;
    color: #fff
}

nav.navbar .hover-menu .main-block ul {
    margin-top: 30px
}

nav.navbar .hover-menu .main-block li {
    padding: 10px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-weight: 500;
    color: #fff;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
    width: 100%;
    cursor: pointer
}

nav.navbar .hover-menu .main-block li:not(:first-child) {
    margin-top: 10px
}

@media only screen and (min-width:1201px) {
    nav.navbar .hover-menu .main-block li:hover {
        color: #498dca
    }

    nav.navbar .hover-menu .main-block li:hover i {
        color: #498dca
    }
}

@media only screen and (max-width:1200px) {
    nav.navbar .hover-menu .main-block li:active {
        color: #498dca
    }

    nav.navbar .hover-menu .main-block li:active i {
        color: #498dca
    }
}

nav.navbar .hover-menu .main-block li.active {
    color: #498dca
}

nav.navbar .hover-menu .main-block li.active i {
    color: #498dca
}

nav.navbar .hover-menu .main-block i {
    font-size: 0.625rem;
    color: #6C6C6C;
    -webkit-transition: color 0.3s;
    transition: color 0.3s
}

nav.navbar .hover-menu .main-block .common-btn {
    margin-top: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2)
}

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

    nav.navbar .hover-menu .main-block .common-btn:hover i,
    nav.navbar .hover-menu .main-block .common-btn:hover>p {
        color: #fff
    }
}

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

    nav.navbar .hover-menu .main-block .common-btn:active i,
    nav.navbar .hover-menu .main-block .common-btn:active>p {
        color: #fff
    }
}

nav.navbar .hover-menu .main-block .common-btn+.common-btn {
    margin-top: 20px
}

nav.navbar .hover-menu .main-block .common-btn i {
    margin-right: 10px;
    font-size: 0.9375rem;
    color: #498dca
}

nav.navbar .hover-menu .main-block .common-btn p {
    color: #fff
}

nav.navbar .hover-menu .sub-block {
    width: 100%
}

nav.navbar .hover-menu .sub-block .menu-content {
    padding: 0 40px;
    display: none
}

nav.navbar .hover-menu .sub-block .menu-content.pic-mode {
    padding: 0 0 0 50px
}

nav.navbar .hover-menu .sub-block .menu-content.active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

nav.navbar .hover-menu .sub-block .menu-content[data-target-tab=brand] {
    padding: 0;
    margin: 30px 0 0 0
}

nav.navbar .hover-menu .sub-block .menu-content[data-target-tab=brand] .tab-title {
    display: block;
    padding: 0 80px;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.2px;
    color: #fff
}

@media only screen and (min-width:1201px) {
    nav.navbar .hover-menu .sub-block .menu-content[data-target-tab=brand] .tab-title:hover {
        color: #498dca
    }
}

@media only screen and (max-width:1200px) {
    nav.navbar .hover-menu .sub-block .menu-content[data-target-tab=brand] .tab-title:active {
        color: #498dca
    }
}

nav.navbar .hover-menu .sub-block .menu-content[data-target-tab=brand].active {
    display: block
}

nav.navbar .hover-menu .sub-block .menu-content .item {
    padding: 30px;
    max-width: 280px;
    width: 100%;
    -ms-flex-item-align: stretch;
    -ms-grid-row-align: stretch;
    align-self: stretch
}

nav.navbar .hover-menu .sub-block .menu-content .img-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

nav.navbar .hover-menu .sub-block .menu-content .noPic-bg {
    display: none
}

nav.navbar .hover-menu .sub-block .menu-content .news-block.noPic {
    margin: 0 0 0 40px
}

nav.navbar .hover-menu .sub-block .menu-content .news-block.noPic .news-wrapper {
    min-height: 350px
}

nav.navbar .hover-menu .sub-block .menu-content .news-block.noPic .info-box {
    padding-left: 0;
    max-width: unset
}

nav.navbar .hover-menu .sub-block .menu-content .news-block.noPic .img-box {
    display: none
}

nav.navbar .hover-menu .sub-block .menu-content .news-block.noPic .noPic-bg {
    display: block
}

nav.navbar .hover-menu .sub-block .photo-wrapper {
    padding: 0 0 0 40px;
    margin-top: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

nav.navbar .hover-menu .sub-block .img-wrapper {
    padding: 25px 0;
    position: relative;
    width: 100%
}

nav.navbar .hover-menu .sub-block .img-wrapper:before {
    opacity: 0;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 15px 18px 0;
    border-color: transparent #498dca transparent transparent;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    z-index: 1
}

nav.navbar .hover-menu .sub-block .img-wrapper:after {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(77, 77, 77, 0.8);
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s
}

nav.navbar .hover-menu .sub-block .img-box {
    max-width: 310px;
    width: 100%;
    position: relative
}

nav.navbar .hover-menu .sub-block .img-box:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    padding-bottom: 62.9%
}

nav.navbar .hover-menu .sub-block .img-box img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

nav.navbar .hover-menu .sub-block .brand-img {
    position: relative;
    padding: 20px 35px;
    max-width: 290px;
    width: 100%
}

nav.navbar .hover-menu .sub-block .brand-img .img-box {
    margin: 0 auto;
    position: relative;
    width: 55.54%;
    height: 100%;
    position: relative
}

nav.navbar .hover-menu .sub-block .brand-img .img-box:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    padding-bottom: 66.66%
}

nav.navbar .hover-menu .sub-block .brand-img .img-box img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

nav.navbar .hover-menu .sub-block .brand-img .img-box img {
    -o-object-fit: contain !important;
    object-fit: contain !important
}

@media only screen and (min-width:1201px) {
    nav.navbar .hover-menu .sub-block .brand-img:hover .content-detail {
        top: 50%;
        left: 50%;
        opacity: 1
    }

    nav.navbar .hover-menu .sub-block .brand-img:hover .img-wrapper:after,
    nav.navbar .hover-menu .sub-block .brand-img:hover .img-wrapper:before {
        opacity: 1
    }
}

@media only screen and (max-width:1200px) {
    nav.navbar .hover-menu .sub-block .brand-img:active .content-detail {
        top: 50%;
        left: 50%;
        opacity: 1
    }

    nav.navbar .hover-menu .sub-block .brand-img:active .img-wrapper:after,
    nav.navbar .hover-menu .sub-block .brand-img:active .img-wrapper:before {
        opacity: 1
    }
}

nav.navbar .hover-menu .sub-block .content-detail {
    position: absolute;
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    max-width: 220px;
    width: 100%;
    top: 80%;
    left: 50%;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    color: #fff;
    z-index: 1
}

nav.navbar .hover-menu .sub-block .content-detail p {
    font-size: 1rem;
    font-weight: 500
}

nav.navbar .hover-menu .sub-block .content-detail .common-plus {
    margin-top: 20px
}

nav.navbar .hover-menu .sub-block .cate-title,
nav.navbar .hover-menu .sub-block li {
    color: #fff;
    -webkit-transition: color 0.3s;
    transition: color 0.3s
}

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

    nav.navbar .hover-menu .sub-block .cate-title:hover,
    nav.navbar .hover-menu .sub-block li:hover {
        color: #498dca
    }
}

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

    nav.navbar .hover-menu .sub-block .cate-title:active,
    nav.navbar .hover-menu .sub-block li:active {
        color: #498dca
    }
}

nav.navbar .hover-menu .sub-block .cate-title {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.2px
}

nav.navbar .hover-menu .sub-block ul {
    margin-top: 15px
}

nav.navbar .hover-menu .sub-block li {
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.15px
}

nav.navbar .hover-menu .sub-block li:not(:first-child) {
    margin-top: 10px
}

nav.navbar .hover-menu .sub-block .news-block {
    margin-top: 30px;
    max-width: 850px;
    width: 100%;
    height: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

@media only screen and (min-width:1201px) {
    nav.navbar .hover-menu .sub-block .news-block:hover .common-plus {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
}

@media only screen and (max-width:1200px) {
    nav.navbar .hover-menu .sub-block .news-block:active .common-plus {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
}

nav.navbar .hover-menu .sub-block .news-block .noPic-bg {
    position: absolute;
    z-index: -1;
    max-width: 850px;
    width: 100%
}

nav.navbar .hover-menu .sub-block .news-wrapper {
    padding: 40px 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%
}

nav.navbar .hover-menu .sub-block .info-box {
    padding-left: 2.083vw;
    max-width: calc(380px + 2.083vw);
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media only screen and (max-width:1024px) {
    nav.navbar .hover-menu .sub-block .info-box {
        padding: 0 0 40px;
        width: 100%
    }
}

nav.navbar .hover-menu .sub-block .info-container {
    color: #fff
}

@media only screen and (max-width:1024px) {
    nav.navbar .hover-menu .sub-block .info-container {
        padding: 40px 11.941%
    }
}

nav.navbar .hover-menu .sub-block .date {
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #498dca
}

nav.navbar .hover-menu .sub-block .year {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

nav.navbar .hover-menu .sub-block .year:before {
    margin: 0 10px;
    content: "";
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 500px;
    background: #498dca
}

nav.navbar .hover-menu .sub-block .title {
    margin-top: 20px;
    font-weight: 500;
    font-size: 1.375rem;
    line-height: 1.3;
    display: block;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

@media only screen and (max-width:1200px) {
    nav.navbar .hover-menu .sub-block .title {
        font-size: 1.25rem
    }
}

nav.navbar .hover-menu .sub-block .txt {
    margin-top: 10px;
    line-height: 1.8;
    display: block;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

nav.navbar .hover-menu .sub-block .common-plus {
    margin-top: 20px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s
}

nav.navbar .hover-menu .sub-block .esg-wrapper {
    max-width: 560px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

nav.navbar .hover-menu .sub-block .esg-block {
    padding: 30px;
    display: block;
    max-width: 340px;
    width: 100%;
    -ms-flex-item-align: stretch;
    -ms-grid-row-align: stretch;
    align-self: stretch
}

@media only screen and (min-width:1201px) {
    nav.navbar .hover-menu .sub-block .esg-block:hover .esg-title {
        color: #498dca
    }
}

@media only screen and (max-width:1200px) {
    nav.navbar .hover-menu .sub-block .esg-block:active .esg-title {
        color: #498dca
    }
}

nav.navbar .hover-menu .sub-block .esg-block .esg-title {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.2px;
    color: #fff;
    -webkit-transition: color 0.3s;
    transition: color 0.3s
}

nav.navbar .hover-menu .sub-block .esg-block .pic {
    margin-top: 30px;
    width: 100%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    aspect-ratio: 450/550;
    position: relative
}

@media only screen and (max-width:1200px) {
    nav.navbar .hover-menu .sub-block .esg-block .pic {
        width: 41.667%
    }
}

nav.navbar .hover-menu .sub-block .esg-block .pic .img-box {
    position: relative;
    margin: 0 0 auto auto;
    width: 100%;
    position: relative
}

nav.navbar .hover-menu .sub-block .esg-block .pic .img-box:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    padding-bottom: 123.81%
}

nav.navbar .hover-menu .sub-block .esg-block .pic .img-box img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

nav.navbar .hover-menu .sub-block .esg-block .pic .img-box:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    content: "";
    z-index: 1
}

nav.navbar .hover-menu .sub-block .esg-block .pic .img-box .title-wrap .y {
    font-size: 1.125rem
}

nav.navbar .hover-menu .sub-block .esg-block .pic .img-content {
    padding: 0 20px;
    width: 100%;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    z-index: 2
}

nav.navbar .hover-menu .sub-block .esg-block .pic .img-content .txt {
    width: 50%;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.3;
    display: block;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: unset
}

nav.navbar .hover-menu .sub-block .esg-block .pic .img-content .title-wrap {
    width: 50%;
    line-height: 1.3;
    font-weight: 700;
    margin-left: 15px
}

nav.navbar .hover-menu .sub-block .esg-block .pic .img-content .title-wrap .t {
    font-size: 1.625rem;
    text-transform: uppercase
}

nav.navbar .hover-menu .sub-block .resources-item {
    padding: 40px 30px;
    max-width: 375px;
    width: 100%;
    display: block
}

@media only screen and (min-width:1201px) {
    nav.navbar .hover-menu .sub-block .resources-item:hover .item-title {
        color: #498dca
    }
}

@media only screen and (max-width:1200px) {
    nav.navbar .hover-menu .sub-block .resources-item:active .item-title {
        color: #498dca
    }
}

nav.navbar .hover-menu .sub-block .resources-item .img-box {
    max-width: 315px;
    position: relative
}

nav.navbar .hover-menu .sub-block .resources-item .img-box:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    padding-bottom: 73.0158%
}

nav.navbar .hover-menu .sub-block .resources-item .img-box img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

nav.navbar .hover-menu .sub-block .resources-item .item-title {
    margin-top: 20px;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.2px;
    color: #fff;
    -webkit-transition: color 0.3s;
    transition: color 0.3s
}

nav.navbar .hover-menu .sub-block .about-item {
    padding: 40px 30px;
    max-width: 375px;
    width: 100%;
    display: block
}

@media only screen and (min-width:1201px) {
    nav.navbar .hover-menu .sub-block .about-item:hover .item-title {
        color: #498dca
    }
}

@media only screen and (max-width:1200px) {
    nav.navbar .hover-menu .sub-block .about-item:active .item-title {
        color: #498dca
    }
}

nav.navbar .hover-menu .sub-block .about-item .img-box {
    max-width: 315px;
    position: relative
}

nav.navbar .hover-menu .sub-block .about-item .img-box:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    padding-bottom: 103.17%
}

nav.navbar .hover-menu .sub-block .about-item .img-box img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

nav.navbar .hover-menu .sub-block .about-item .item-title {
    margin-top: 20px;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.2px;
    color: #fff;
    -webkit-transition: color 0.3s;
    transition: color 0.3s
}

nav.navbar .common-category {
    display: none
}

.language.active {
    color: #498dca
}

.language .dropdown-wrap {
    position: absolute;
    bottom: 40px;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    display: none;
    z-index: 1;
    max-width: 110px;
    width: 100%;
    border-radius: 10px
}

@media only screen and (max-width:1280px) {
    .language .dropdown-wrap {
        bottom: 10px
    }
}

.language .dropdown-wrap:before {
    margin: 0 auto;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 20px 10px;
    border-color: transparent transparent #373737 transparent;
    content: "";
    z-index: -1
}

.language .dropdown-list {
    margin-top: -2px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #323232
}

.language .dropdown-list>li {
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-align: center;
    margin: 0
}

.language .dropdown-list>li>a {
    padding: 20px
}

@media only screen and (min-width:1201px) {
    .language .dropdown-list>li:not(.has-sublayer):hover {
        background-color: #498dca !important
    }
}

@media only screen and (max-width:1200px) {
    .language .dropdown-list>li:not(.has-sublayer):active {
        background-color: #498dca !important
    }
}

.language .dropdown-list>li:not(.has-sublayer).active {
    background-color: #498dca
}

.language .dropdown-list .os-scrollbar .os-scrollbar-handle {
    right: 3px;
    width: 2px;
    background: #D9D9D9;
    border-radius: 50px
}

.main-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 16;
    display: none;
    opacity: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-transition: opacity 0.7s;
    transition: opacity 0.7s
}

.main-menu.active {
    display: block
}

.main-menu.show {
    opacity: 1;
    z-index: 16
}

.main-menu.show .wrap.main {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform 0.7s;
    transition: -webkit-transform 0.7s;
    transition: transform 0.7s;
    transition: transform 0.7s, -webkit-transform 0.7s
}

.main-menu .container {
    max-width: 1340px;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.main-menu .wrap {
    max-width: 450px;
    width: 100%;
    height: 100%;
    background-color: #323232;
    position: relative;
    z-index: 2;
    -webkit-transition: -webkit-transform 0.7s;
    transition: -webkit-transform 0.7s;
    transition: transform 0.7s;
    transition: transform 0.7s, -webkit-transform 0.7s;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
}

.main-menu .common-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
    opacity: 1;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s
}

.main-menu .main-wrap,
.main-menu .sub-wrap {
    height: 100%
}

.main-menu .main-wrap.open .common-close {
    opacity: 0;
    pointer-events: none
}

.main-menu .scroll-wrap {
    overflow-y: auto;
    width: 100%;
    height: calc(var(--vh, 1px) * 100)
}

.main-menu .option-block {
    padding: 80px 60px 20px
}

@media only screen and (max-width:768px) {
    .main-menu .option-block {
        padding: 80px 8% 80px
    }
}

.main-menu .option-wrap .item {
    width: 100%;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    color: #fff
}

.main-menu .option-wrap .item:not(:first-child) {
    margin-top: 40px
}

.main-menu .option-wrap .item>div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    gap: 0 10px
}

.main-menu .option-wrap .item i {
    font-size: 0.5rem;
    color: #6C6C6C
}

.main-menu .option-wrap .item:hover .item-title {
    color: #498dca
}

.main-menu .option-wrap .item:hover .item-title .common-plus:after,
.main-menu .option-wrap .item:hover .item-title .common-plus:before {
    background: #498dca
}

.main-menu .option-wrap .item:hover .item-title i {
    color: #498dca
}

.main-menu .option-wrap .item.active {
    color: #498dca
}

.main-menu .option-wrap .item.active .icon-expand {
    color: #498dca;
    opacity: 1
}

.main-menu .option-wrap .item.active .item-title i {
    color: #498dca
}

.main-menu .item-title {
    -webkit-transition: color 0.3;
    transition: color 0.3
}

.main-menu .item-title.active {
    color: #498dca
}

.main-menu .item-title.active .common-plus {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.main-menu .item-title.active .common-plus:after,
.main-menu .item-title.active .common-plus:before {
    background-color: #498dca
}

.main-menu .item-title.active .common-plus:before {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    opacity: 0
}

.main-menu .item-title.active .icon-expand {
    opacity: 1
}

.main-menu .title {
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.5
}

.main-menu .link-wrap {
    margin-top: 40px
}

.main-menu .link-wrap ul {
    max-width: 360px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.5px;
    gap: 0 30px
}

.main-menu .link-wrap a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    -webkit-transition: color 0.2s;
    transition: color 0.2s
}

@media only screen and (min-width:1201px) {
    .main-menu .link-wrap a:hover {
        color: #498dca
    }
}

@media only screen and (max-width:1200px) {
    .main-menu .link-wrap a:active {
        color: #498dca
    }
}

.main-menu .link-wrap .icon {
    width: 30px;
    height: 30px;
    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
}

.main-menu .link-wrap i {
    font-size: 0.9375rem;
    color: #498dca
}

.main-menu .link-wrap p {
    margin-left: 10px
}

.main-menu .common-btn {
    margin-top: 40px
}

.main-menu .back-block {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: none
}

.main-menu .back-block .title {
    padding: 30px 0;
    width: 100%;
    text-align: center;
    border-bottom: 2px solid #D1D1D1
}

.main-menu .back-block .back {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer
}

.main-menu .back-block .back i {
    font-size: 0.5rem;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    color: #498dca
}

.main-menu .back-block .back p {
    margin-left: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5
}

@media only screen and (max-width:1024px) {
    .main-menu .back-block {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
}

.main-menu .slide-wrap {
    max-width: 450px;
    width: 100%;
    position: relative;
    overflow: hidden;
    z-index: 3;
    pointer-events: none
}

@media only screen and (max-width:1024px) {
    .main-menu .slide-wrap {
        max-width: 450px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0
    }
}

.main-menu .slide-wrap .wrap.sub {
    display: block;
    opacity: 0;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #323232;
    color: #FFFFFF;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    transition: opacity 1s, -webkit-transform 1s;
    transition: opacity 1s, transform 1s;
    transition: opacity 1s, transform 1s, -webkit-transform 1s
}

.main-menu .slide-wrap .wrap.sub:after {
    left: 0;
    top: 100px;
    position: absolute;
    display: block;
    background: #515151;
    width: 1px;
    height: calc(100vh - 200px);
    content: "";
    opacity: 0;
    z-index: 9
}

.main-menu .slide-wrap .wrap.sub.show {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    pointer-events: auto
}

.main-menu .slide-wrap .wrap.sub.show:after {
    opacity: 1
}

@media only screen and (max-width:1024px) {
    .main-menu .slide-wrap .wrap.sub {
        top: 0;
        height: 100%
    }

    .main-menu .slide-wrap .wrap.sub:after {
        display: none
    }
}

.main-menu .sub-wrap {
    padding-top: 40px
}

.main-menu .sub-wrap .option-block {
    padding: 60px 50px
}

@media only screen and (max-width:1024px) {
    .main-menu .sub-wrap .option-block {
        padding: 40px 40px
    }
}

@media only screen and (max-width:1024px) {
    .main-menu .sub-wrap .option-wrap {
        padding: 40px 0
    }
}

.main-menu .sub-wrap .option-wrap>div:not(:first-child) {
    margin-top: 40px
}

.main-menu .sub-wrap .option-wrap>div:not(:first-child) .title-block.active .icon-arrow-sm {
    color: #498dca;
    -webkit-transform: rotateZ(-90deg) rotateY(180deg);
    transform: rotateZ(-90deg) rotateY(180deg)
}

.main-menu .sub-wrap .option-wrap .title-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    cursor: pointer
}

.main-menu .sub-wrap .option-wrap .title-block a {
    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;
    width: 100%
}

.main-menu .sub-wrap .option-wrap .option-collapse {
    cursor: pointer
}

@media only screen and (max-width:1024px) {
    .main-menu .sub-wrap .option-wrap .option-collapse~.item-block {
        display: none
    }
}

.main-menu .sub-wrap .option-wrap .title {
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.5;
    letter-spacing: 0.5px
}

@media only screen and (max-width:768px) {
    .main-menu .sub-wrap .option-wrap .title {
        font-size: 1.25rem
    }
}

.main-menu .sub-wrap .option-wrap .item-block {
    margin-top: 15px;
    display: none
}

.main-menu .sub-wrap .option-wrap .item-block.active {
    display: block
}

.main-menu .sub-wrap .option-wrap ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.main-menu .sub-wrap .option-wrap ul.brand-list {
    margin-top: 20px
}

.main-menu .sub-wrap .option-wrap li {
    padding: 5px 0;
    width: 100%;
    line-height: 1.5;
    letter-spacing: 0.5px
}

.main-menu .sub-wrap .option-wrap .brand-img {
    padding: 10px;
    width: 50%;
    display: block
}

.main-menu .sub-wrap .option-wrap .brand-img a {
    display: block
}

.main-menu .sub-wrap .option-wrap .brand-img .img-box {
    margin: 0 auto;
    width: 60%;
    height: 100%;
    opacity: 0.2;
    position: relative
}

.main-menu .sub-wrap .option-wrap .brand-img .img-box:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    padding-bottom: 66.66%
}

.main-menu .sub-wrap .option-wrap .brand-img .img-box img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.main-menu .sub-wrap .icon-arrow-sm {
    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;
    font-size: 0.9375rem;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: color 0.2s, -webkit-transform 0.3s;
    transition: color 0.2s, -webkit-transform 0.3s;
    transition: transform 0.3s, color 0.2s;
    transition: transform 0.3s, color 0.2s, -webkit-transform 0.3s;
    width: 24px;
    height: 24px
}

footer {
    padding: 85px 0 35px;
    background: #F9F9F9;
    position: relative
}

@media only screen and (max-width:768px) {
    footer {
        padding: 85px 10.667% 50px
    }
}

footer .footer-line {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: width 0.5s;
    transition: width 0.5s
}

footer .footer-line:after,
footer .footer-line:before {
    content: "";
    display: block;
    height: 5px
}

footer .footer-line:before {
    width: 49.479%;
    background: #498dca;
    -webkit-transition: width 0.5s;
    transition: width 0.5s
}

footer .footer-line:after {
    width: 50.521%;
    background: #323232;
    -webkit-transition: width 0.5s 0.5s;
    transition: width 0.5s 0.5s
}

footer .footer-line[data-aost]:after,
footer .footer-line[data-aost]:before {
    width: 0
}

footer .footer-line.aost-show:before {
    width: 49.479%
}

footer .footer-line.aost-show:after {
    width: 50.521%
}

footer .container {
    margin: 0 auto;
    max-width: 1440px;
    width: calc(100% - 120px)
}

@media only screen and (max-width:768px) {
    footer .container {
        width: 100%
    }
}

footer .footer-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 3.3854vw
}

footer .footer-top .menu-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 30px 3.3854vw
}

@media only screen and (max-width:1200px) {
    footer .footer-top .menu-list {
        gap: 30px 50px
    }
}

footer .footer-top .main {
    font-weight: 500;
    font-size: 1.25rem;
    color: #000
}

@media only screen and (max-width:768px) {
    footer .footer-top .main {
        font-size: 1.125rem
    }
}

footer .footer-top .top-left {
    width: 70.1389%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 50px 3.3854vw
}

@media only screen and (max-width:1200px) {
    footer .footer-top .top-left {
        width: 58.1482%;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 50px
    }
}

@media only screen and (max-width:992px) {
    footer .footer-top .top-left {
        width: 73.567%
    }
}

@media only screen and (max-width:768px) {
    footer .footer-top .top-left {
        display: none
    }
}

footer .footer-top .top-left .menu-list {
    width: calc((100% - 13.5416vw) / 5);
    line-height: 1.3
}

@media only screen and (max-width:1200px) {
    footer .footer-top .top-left .menu-list {
        width: calc((100% - 100px) / 3)
    }
}

footer .footer-top .top-left .menu-list.more-option .more {
    display: block
}

footer .footer-top .top-left .menu-list a,
footer .footer-top .top-left .menu-list p {
    -webkit-transition: color 0.3s;
    transition: color 0.3s
}

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

    footer .footer-top .top-left .menu-list a:hover,
    footer .footer-top .top-left .menu-list p:hover {
        color: #498dca
    }
}

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

    footer .footer-top .top-left .menu-list a:active,
    footer .footer-top .top-left .menu-list p:active {
        color: #498dca
    }
}

footer .footer-top .top-left .option-list {
    margin-top: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 15px 0
}

footer .footer-top .top-left .option-list>li {
    font-weight: 500;
    font-size: 0.9375rem;
    color: #747474
}

footer .footer-top .top-left .option-list .more {
    display: none
}

footer .footer-top .top-right {
    width: 25.3473%
}

@media only screen and (max-width:1200px) {
    footer .footer-top .top-right {
        width: 37.223%
    }
}

@media only screen and (max-width:992px) {
    footer .footer-top .top-right {
        width: 20.7%
    }
}

@media only screen and (max-width:768px) {
    footer .footer-top .top-right {
        padding-top: 40px;
        width: 100%
    }
}

footer .footer-top .top-right .menu-list {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

footer .footer-top .top-right .menu-list>li {
    width: calc((100% - 3.3854vw) / 2);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.5px
}

@media only screen and (max-width:1200px) {
    footer .footer-top .top-right .menu-list>li {
        width: calc((100% - 50px) / 2)
    }
}

@media only screen and (max-width:992px) {
    footer .footer-top .top-right .menu-list>li {
        width: 100%
    }
}

@media only screen and (max-width:768px) {
    footer .footer-top .top-right .menu-list>li {
        width: calc((100% - 50px) / 2)
    }
}

footer .footer-top .top-right .menu-list>li p,
footer .footer-top .top-right .menu-list>li>a {
    -webkit-transition: color 0.3s;
    transition: color 0.3s
}

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

    footer .footer-top .top-right .menu-list>li p:hover,
    footer .footer-top .top-right .menu-list>li>a:hover {
        color: #498dca
    }
}

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

    footer .footer-top .top-right .menu-list>li p:active,
    footer .footer-top .top-right .menu-list>li>a:active {
        color: #498dca
    }
}

@media only screen and (max-width:768px) {
    footer .footer-top .top-right .menu-list.pc {
        display: none
    }
}

footer .footer-top .top-right .menu-list.rwd {
    display: none
}

@media only screen and (max-width:768px) {
    footer .footer-top .top-right .menu-list.rwd {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
}

footer .footer-bottom {
    margin-top: 70px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media only screen and (max-width:768px) {
    footer .footer-bottom {
        margin-top: 50px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }
}

footer .footer-bottom .bottom-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media only screen and (max-width:1200px) {
    footer .footer-bottom .bottom-left {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

@media only screen and (max-width:768px) {
    footer .footer-bottom .bottom-left {
        margin-top: 50px
    }
}

footer .footer-bottom .bottom-left .logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width:64px;
}

footer .footer-bottom .bottom-left .logo:after {
    margin-left: 20px;
    content: "";
    display: block;
    background: #41D487;
    width: 1px;
    height: 15px
}

@media only screen and (max-width:1200px) {
    footer .footer-bottom .bottom-left .logo:after {
        display: none
    }
}

footer .footer-bottom .bottom-left .logo>svg {
    width: 100%;
    height: 100%
}

footer .footer-bottom .bottom-left .copyright {
    margin-left: 20px;
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 15px
}

@media only screen and (max-width:1200px) {
    footer .footer-bottom .bottom-left .copyright {
        margin: 20px 0 0
    }
}

footer .footer-bottom .bottom-left .wdd {
    -webkit-transition: color 0.3s;
    transition: color 0.3s
}

@media only screen and (min-width:1201px) {
    footer .footer-bottom .bottom-left .wdd:hover {
        color: #498dca
    }
}

@media only screen and (max-width:1200px) {
    footer .footer-bottom .bottom-left .wdd:active {
        color: #498dca
    }
}

footer .footer-bottom .bottom-left .tool {
    margin-left: 20px;
    font-size: 0.9375rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0 20px
}

@media only screen and (max-width:1200px) {
    footer .footer-bottom .bottom-left .tool {
        margin: 20px 0 0;
        gap: 0 30px
    }
}

footer .footer-bottom .bottom-left .tool li {
    color: #6C6C6C;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
    position: relative
}

@media only screen and (min-width:1201px) {
    footer .footer-bottom .bottom-left .tool li:hover {
        color: #498dca
    }
}

@media only screen and (max-width:1200px) {
    footer .footer-bottom .bottom-left .tool li:active {
        color: #498dca
    }
}

footer .footer-bottom .bottom-left .tool li:after {
    content: "";
    display: none;
    background: #41D487;
    width: 1px;
    height: 15px;
    position: absolute;
    top: 50%;
    left: -15px;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

@media only screen and (max-width:1200px) {
    footer .footer-bottom .bottom-left .tool li:not(:first-child):after {
        display: block
    }
}

footer .footer-bottom .bottom-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0 30px
}

@media only screen and (max-width:900px) {
    footer .footer-bottom .bottom-right {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 30px
    }
}

footer .footer-bottom .bottom-right .media {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0 30px
}

@media only screen and (max-width:1200px) {
    footer .footer-bottom .bottom-right .media {
        gap: 0 20px
    }
}

footer .footer-bottom .bottom-right .media li {
    color: #6C6C6C;
    -webkit-transition: color 0.3s, opacity 0.3s, -webkit-filter 0.3s;
    transition: color 0.3s, opacity 0.3s, -webkit-filter 0.3s;
    transition: color 0.3s, opacity 0.3s, filter 0.3s;
    transition: color 0.3s, opacity 0.3s, filter 0.3s, -webkit-filter 0.3s
}

@media only screen and (min-width:1201px) {
    footer .footer-bottom .bottom-right .media li:hover {
        color: #498dca
    }

    footer .footer-bottom .bottom-right .media li:hover.yk {
        -webkit-filter: none;
        filter: none;
        opacity: 1
    }
}

@media only screen and (max-width:1200px) {
    footer .footer-bottom .bottom-right .media li:active {
        color: #498dca
    }

    footer .footer-bottom .bottom-right .media li:active.yk {
        -webkit-filter: none;
        filter: none;
        opacity: 1
    }
}

footer .footer-bottom .bottom-right .media li.yk {
    -webkit-filter: brightness(0);
    filter: brightness(0);
    opacity: 0.5
}

footer .footer-bottom .bottom-right .media a {
    width: 20px;
    height: 20px;
    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
}

footer .footer-bottom .bottom-right .media .icon-fb {
    font-size: 1.125rem
}

footer .footer-bottom .bottom-right .media .icon-ig {
    font-size: 1.125rem
}

footer .footer-bottom .bottom-right .media .icon-youtube {
    font-size: 0.75rem
}

footer .footer-bottom .bottom-right .media .icon-line {
    font-size: 1.0625rem
}

footer .footer-bottom .bottom-right .common-btn {
    cursor: pointer;
    width: 220px;
    height: 40px
}

@media only screen and (max-width:768px) {
    footer .footer-bottom .bottom-right .common-btn {
        width: 100%
    }
}

footer .language {
    cursor: pointer
}

footer .language .dropdown-wrap {
    top: -10px;
    bottom: auto !important;
    -webkit-transform: translate3d(-44%, -100%, 0);
    transform: translate3d(-44%, -100%, 0);
    width: 110px
}

footer .language .dropdown-wrap:before {
    display: none
}

footer .language .dropdown-wrap:after {
    margin: 0 auto;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 10px 0 10px;
    border-color: #373737 transparent transparent transparent;
    content: "";
    z-index: -1
}

footer .language .dropdown-list>li {
    color: #fff !important
}

footer .language .dropdown-list>li>a {
    padding: 20px;
    display: block
}

.wdd-form {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 0 30px
}

.form-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 -15px
}

.form-row:not(:first-child) {
    margin-top: 30px
}

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

.form-grid.col-6 {
    width: 50%
}

.form-grid.col-4 {
    width: 33.3333333333%
}

.error-detail .error-text {
    color: #dc3545
}

.error-detail .error-text:not(:first-child) {
    margin-top: 10px
}

.form-btn-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 30px;
    pointer-events: none
}

.form-btn-group .btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 120px;
    height: 40px;
    border: 1px solid #000000;
    border-radius: 10rem;
    -webkit-transition: background-color 0.2s linear, color 0.2s linear;
    transition: background-color 0.2s linear, color 0.2s linear;
    cursor: pointer;
    pointer-events: auto
}

.form-btn-group .btn:hover {
    background-color: #000000;
    color: #ffffff
}

.form-btn-group .btn:not(:last-child) {
    margin-right: 15px
}

.form-group {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2)
}

.form-group.required .subject {
    position: relative
}

.form-group.required .subject:before {
    content: "*";
    position: absolute;
    top: 0;
    left: 0;
    color: #ff0000
}

.form-group.verification .refresh-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center
}

.form-group.verification .refresh-btn img {
    width: auto;
    height: 40px
}

.form-group.verification .refresh-btn i {
    font-size: 1.25rem;
    margin-left: 10px
}

.form-group.textarea .input-wrap {
    height: auto;
    padding: 10px 35px 10px 15px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin-bottom: 10px
}

.form-group.textarea .validation-icon {
    top: 10px;
    -webkit-transform: none;
    transform: none
}

.form-group.success {
    border-bottom: 1px solid #198754
}

.form-group.error {
    border-bottom: 1px solid #dc3545
}

.form-group.error~.error-text {
    color: #dc3545;
    margin-top: 5px
}

.form-group .disabled {
    opacity: 0.5;
    pointer-events: none
}

.form-group .subject {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 10px 0 10px 15px;
    font-size: 1rem;
    line-height: 1.5;
    color: #000000;
    margin-right: 20px
}

.form-group .input-wrap {
    position: relative;
    width: 100%;
    height: 1.5rem;
    margin: 10px 0;
    padding: 0 20px 0 15px
}

.form-group .input-wrap input {
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    font-size: 1rem;
    color: #000000;
    background-color: transparent
}

.form-group .input-wrap input::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.6);
    opacity: 1
}

.form-group .input-wrap input::-moz-placeholder {
    color: rgba(0, 0, 0, 0.6);
    opacity: 1
}

.form-group .input-wrap input:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.6);
    opacity: 1
}

.form-group .input-wrap input::-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.6);
    opacity: 1
}

.form-group .input-wrap input::placeholder {
    color: rgba(0, 0, 0, 0.6);
    opacity: 1
}

.form-group .input-wrap input:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.6)
}

.form-group .input-wrap input::-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.6)
}

.form-group .input-wrap input.error .validation-icon,
.form-group .input-wrap input.error+.validation-icon {
    display: block;
    background-image: url("../../assets/img/error.svg")
}

.form-group .input-wrap input.error .validation-icon :active:before,
.form-group .input-wrap input.error .validation-icon:hover:before,
.form-group .input-wrap input.error+.validation-icon :active:before,
.form-group .input-wrap input.error+.validation-icon:hover:before {
    opacity: 1
}

.form-group .input-wrap input.success .validation-icon,
.form-group .input-wrap input.success+.validation-icon {
    display: block;
    background-image: url("../../assets/img/success.svg")
}

.form-group .textarea-scrollbar {
    display: block;
    width: 100%;
    height: 200px;
    padding: 0;
    border: none;
    line-height: 1.5;
    font-size: 1rem;
    background-color: transparent;
    resize: none
}

.form-group .textarea-scrollbar.os-textarea::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.6);
    opacity: 1
}

.form-group .textarea-scrollbar.os-textarea::-moz-placeholder {
    color: rgba(0, 0, 0, 0.6);
    opacity: 1
}

.form-group .textarea-scrollbar.os-textarea:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.6);
    opacity: 1
}

.form-group .textarea-scrollbar.os-textarea::-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.6);
    opacity: 1
}

.form-group .textarea-scrollbar.os-textarea::placeholder {
    color: rgba(0, 0, 0, 0.6);
    opacity: 1
}

.form-group .textarea-scrollbar.os-textarea:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.6)
}

.form-group .textarea-scrollbar.os-textarea::-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.6)
}

.form-group .textarea-scrollbar .os-theme-dark>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle {
    background: rgba(194, 194, 194, 0.4)
}

.form-group .textarea-scrollbar .os-theme-dark>.os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle {
    background: rgba(145, 145, 145, 0.4)
}

.form-group .textarea-scrollbar.error .validation-icon,
.form-group .textarea-scrollbar.error+.validation-icon {
    display: block;
    background-image: url("../../assets/img/error.svg")
}

.form-group .textarea-scrollbar.error .validation-icon :active:before,
.form-group .textarea-scrollbar.error .validation-icon:hover:before,
.form-group .textarea-scrollbar.error+.validation-icon :active:before,
.form-group .textarea-scrollbar.error+.validation-icon:hover:before {
    opacity: 1
}

.form-group .textarea-scrollbar.success .validation-icon,
.form-group .textarea-scrollbar.success+.validation-icon {
    display: block;
    background-image: url("../../assets/img/success.svg")
}

.form-group .validation-icon {
    display: none;
    position: absolute;
    top: 50%;
    right: 0;
    width: 20px;
    height: 20px;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.form-group .validation-icon:before {
    content: attr(error-text);
    position: absolute;
    top: -5px;
    right: 0;
    padding: 5px;
    border-radius: 4px;
    background-color: rgba(220, 53, 69, 0.8);
    color: #fff;
    font-size: 0.875rem;
    white-space: nowrap;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    pointer-events: none
}

.form-group dropdown-el:not([d4-value=""]) .select-display {
    color: #000000
}

.form-group dropdown-el.type-fullbox {
    position: static
}

.form-group dropdown-el[multiple] .select-wrapper {
    padding: 4px 15px
}

.form-group dropdown-el:not([multiple]) .select-wrapper {
    padding: 10px 15px
}

.form-group dropdown-el .select-wrapper {
    background-color: transparent;
    min-height: 44px
}

.form-group dropdown-el .select-display {
    position: relative;
    color: rgba(0, 0, 0, 0.6);
    font-size: 1rem;
    line-height: 1.5rem
}

.form-group dropdown-el .validation-icon {
    position: relative;
    top: auto;
    right: auto;
    -webkit-transform: none;
    transform: none
}

.form-group dropdown-el .dropdown-icon {
    border-color: #000 transparent transparent transparent
}

.form-group dropdown-el.error .validation-icon,
.form-group dropdown-el.error+.validation-icon {
    display: block;
    background-image: url("../../assets/img/error.svg")
}

.form-group dropdown-el.error .validation-icon :active:before,
.form-group dropdown-el.error .validation-icon:hover:before,
.form-group dropdown-el.error+.validation-icon :active:before,
.form-group dropdown-el.error+.validation-icon:hover:before {
    opacity: 1
}

.form-group dropdown-el.success .validation-icon,
.form-group dropdown-el.success+.validation-icon {
    display: block;
    background-image: url("../../assets/img/success.svg")
}

.form-group .form-check {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.form-group .form-check.error .validation-icon,
.form-group .form-check.error+.validation-icon {
    display: block;
    background-image: url("../../assets/img/error.svg")
}

.form-group .form-check.error .validation-icon :active:before,
.form-group .form-check.error .validation-icon:hover:before,
.form-group .form-check.error+.validation-icon :active:before,
.form-group .form-check.error+.validation-icon:hover:before {
    opacity: 1
}

.form-group .form-check.success .validation-icon,
.form-group .form-check.success+.validation-icon {
    display: block;
    background-image: url("../../assets/img/success.svg")
}

.form-group .form-check .option-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 0;
    margin-right: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer
}

.form-group .form-check .option-item .checkbox-wrap {
    position: relative;
    width: 20px;
    height: 20px;
    border: 1px solid #000000;
    margin-right: 8px
}

.form-group .form-check .option-item .checkbox-wrap>input {
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0
}

.form-group .form-check .option-item .checkbox-wrap>input:checked~.fake-checkbox {
    opacity: 1
}

.form-group .form-check .option-item .checkbox-wrap .fake-checkbox {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background-color: #ff0000;
    opacity: 0;
    -webkit-transition: opacity 0.4s linear;
    transition: opacity 0.4s linear
}

.form-group .form-check .option-item .text {
    font-size: 1rem;
    color: #000000;
    line-height: 1.5
}

.form-group .file-wrap {
    position: relative;
    width: 100%;
    margin-left: 15px;
    cursor: pointer
}

.form-group .file-wrap>input {
    width: 100%;
    height: 24px;
    margin: 10px 0;
    opacity: 0
}

.form-group .file-wrap>input.error+.fake-file-upload .file-name {
    color: #dc3545
}

.form-group .file-wrap>input.error+.fake-file-upload .validation-icon {
    display: block;
    background-image: url("../../assets/img/error.svg")
}

.form-group .file-wrap>input.success+.fake-file-upload .validation-icon {
    display: block;
    background-image: url("../../assets/img/success.svg")
}

.form-group .file-wrap .fake-file-upload {
    position: absolute;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    top: 0;
    left: 0
}

.form-group .file-wrap .fake-file-upload .file-name {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.5rem;
    padding-right: 20px;
    margin-right: auto;
    display: block;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
}

.form-group .file-wrap .fake-file-upload .validation-icon {
    position: relative;
    top: auto;
    right: auto;
    -webkit-transform: none;
    transform: none
}

.form-group .file-wrap .fake-file-upload .upload-icon {
    width: 30px;
    height: 30px;
    background-image: url("../../assets/img/upload.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.form-group .file-wrap .fake-file-upload input[type=file] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    z-index: -1
}

.form-group .data-time-picker {
    position: relative;
    width: 100%;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center
}

.form-group .data-time-picker>input {
    width: 100%;
    height: 1.5rem;
    border: none;
    margin: 10px 0;
    padding: 0 15px;
    font-size: 1rem;
    color: #000000
}

.form-group .data-time-picker>input::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.6);
    opacity: 1
}

.form-group .data-time-picker>input::-moz-placeholder {
    color: rgba(0, 0, 0, 0.6);
    opacity: 1
}

.form-group .data-time-picker>input:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.6);
    opacity: 1
}

.form-group .data-time-picker>input::-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.6);
    opacity: 1
}

.form-group .data-time-picker>input::placeholder {
    color: rgba(0, 0, 0, 0.6);
    opacity: 1
}

.form-group .data-time-picker>input:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.6)
}

.form-group .data-time-picker>input::-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.6)
}

.wdd-form {
    max-width: none
}

@media only screen and (max-width:768px) {
    .wdd-form .form-row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.wdd-form .form-row:not(:first-child) {
    margin-top: 40px
}

.wdd-form .form-group {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-bottom: none
}

.wdd-form .form-group.phone dropdown-el {
    width: 107px
}

.wdd-form .form-group.phone dropdown-el .dropdown-list>li {
    padding: 20px;
    text-align: center
}

.wdd-form .form-group.phone .input-wrap {
    width: calc(100% - 107px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.wdd-form .form-group.phone .select-wrapper {
    padding: 0 0 0 20px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.wdd-form .form-group.phone .select-display {
    margin-left: 20px;
    padding: 0;
    font-weight: 500;
    color: #000
}

.wdd-form .form-group.error .error-tips {
    border: 1px solid #DD353F
}

.wdd-form .form-group.required .subject:before {
    margin-left: 10px;
    content: "＊";
    font-size: 0.75rem;
    color: #498dca;
    position: static;
    top: auto;
    left: auto
}

@media only screen and (max-width:768px) {
    .wdd-form .form-group.verification .refresh-btn>img {
        width: 75px
    }
}

@media only screen and (max-width:768px) {
    .wdd-form .form-grid {
        width: 100%
    }
}

@media only screen and (max-width:768px) {
    .wdd-form .form-grid:not(:first-child) {
        margin-top: 30px
    }
}

.wdd-form .subject {
    padding: 10px 0;
    word-break: break-word;
    width: 100%;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.wdd-form .subject .en {
    margin-right: 10px
}

.wdd-form .input-block {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.wdd-form .input-wrap {
    padding: 0;
    background: #fff;
    margin: 0;
    height: 70px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.wdd-form .input-wrap>input {
    line-height: 1.8;
    padding: 0 20px
}

.wdd-form .input-wrap>input::-webkit-input-placeholder {
    color: #6C6C6C;
    opacity: 1
}

.wdd-form .input-wrap>input::-moz-placeholder {
    color: #6C6C6C;
    opacity: 1
}

.wdd-form .input-wrap>input:-ms-input-placeholder {
    color: #6C6C6C;
    opacity: 1
}

.wdd-form .input-wrap>input::-ms-input-placeholder {
    color: #6C6C6C;
    opacity: 1
}

.wdd-form .input-wrap>input::placeholder {
    color: #6C6C6C;
    opacity: 1
}

.wdd-form .file-wrap {
    padding: 0;
    margin: 0;
    height: 70px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.wdd-form .file-wrap>input {
    line-height: 1.8;
    padding: 0 20px
}

.wdd-form .file-wrap>input::-webkit-input-placeholder {
    color: #6C6C6C;
    opacity: 1
}

.wdd-form .file-wrap>input::-moz-placeholder {
    color: #6C6C6C;
    opacity: 1
}

.wdd-form .file-wrap>input:-ms-input-placeholder {
    color: #6C6C6C;
    opacity: 1
}

.wdd-form .file-wrap>input::-ms-input-placeholder {
    color: #6C6C6C;
    opacity: 1
}

.wdd-form .file-wrap>input::placeholder {
    color: #6C6C6C;
    opacity: 1
}

.wdd-form .file-name {
    padding: 0 20px
}

.wdd-form dropdown-el {
    background: #fff
}

.wdd-form dropdown-el .select-wrapper {
    padding: 20px 30px 20px 20px;
    min-height: 70px
}

.wdd-form dropdown-el .select-display {
    color: #6C6C6C;
    font-weight: normal
}

.wdd-form dropdown-el .dropdown-list>li {
    padding: 20px;
    text-align: left
}

.wdd-form .verification input {
    padding-right: 192px
}

@media only screen and (max-width:768px) {
    .wdd-form .verification input {
        padding-right: 175px
    }
}

.wdd-form .refresh-btn {
    position: absolute;
    top: 50%;
    right: 20px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.wdd-form .refresh-btn>img {
    width: auto;
    height: 35px
}

@media only screen and (max-width:768px) {
    .wdd-form .refresh-btn>img {
        width: 75px
    }
}

.wdd-form .refresh-btn .refresh-img {
    margin-left: 20px;
    padding: 10px
}

@media only screen and (max-width:768px) {
    .wdd-form .refresh-btn .refresh-img {
        margin-left: 10px;
        padding: 0
    }
}

.wdd-form .refresh-btn .refresh-img img {
    width: 30px;
    height: 30px
}

@media only screen and (max-width:768px) {
    .wdd-form .refresh-btn .refresh-img img {
        width: 25px;
        height: 25px
    }
}

@media only screen and (max-width:575px) {
    .wdd-form .form-btn-group {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
}

.wdd-form .form-btn-group .common-btn {
    cursor: pointer;
    pointer-events: auto
}

.wdd-form .form-btn-group .common-btn:not(:first-child) {
    margin-left: 40px
}

@media only screen and (max-width:575px) {
    .wdd-form .form-btn-group .common-btn:not(:first-child) {
        margin: 0 0 20px
    }
}

.wdd-form .textarea .input-wrap {
    padding: 0;
    height: auto;
    border: none
}

.wdd-form .textarea textarea {
    padding: 20px;
    outline: none
}

.wdd-form .error-wrap {
    margin-top: 40px;
    display: none;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.wdd-form .error-wrap.show {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.wdd-form .error-wrap .notice-pic {
    margin-right: 20px;
    width: 20px;
    height: 20px;
    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;
    -webkit-transform: translateY(2px);
    transform: translateY(2px)
}

.wdd-form .error-wrap .error-detail {
    text-align: center
}

.wdd-form .error-wrap .error-text {
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.8;
    letter-spacing: 0.05px
}

.wdd-form .error-wrap .error-text:not(:first-child) {
    margin-top: 0
}

.wdd-form .validation-icon {
    display: none !important
}

.wdd-form .textarea-scrollbar {
    height: 250px
}

modern-modal {
    z-index: 11;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(3.5px);
    backdrop-filter: blur(3.5px)
}

modern-modal .error-wrap {
    margin-top: 40px;
    display: none;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

modern-modal .error-wrap.show {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

modern-modal .error-wrap .notice-pic {
    margin-right: 20px;
    width: 20px;
    height: 20px;
    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;
    -webkit-transform: translateY(2px);
    transform: translateY(2px)
}

modern-modal .error-wrap .error-detail {
    text-align: center
}

modern-modal .error-wrap .error-text {
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.8;
    letter-spacing: 0.05px
}

modern-modal .error-wrap .error-text:not(:first-child) {
    margin-top: 0
}

modern-modal.form-modal .modal-content {
    word-break: break-word;
    width: 90%;
    max-width: 600px;
    min-height: 500px;
    background: #323232;
    position: relative;
    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
}

modern-modal.form-modal .container {
    padding: 20px;
    width: 100%;
    height: 100%;
    min-height: 500px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

modern-modal.form-modal .container:before {
    opacity: 0;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 40px 55px 0;
    border-color: transparent #498dca transparent transparent;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s
}

@media only screen and (max-width:768px) {
    modern-modal.form-modal .container:before {
        opacity: 1
    }
}

modern-modal.form-modal .container.active:before {
    opacity: 1
}

modern-modal.form-modal .info-box {
    text-align: center
}

modern-modal.form-modal .info-box img {
    margin: 0 auto;
    width: 50px;
    height: 60px
}

@media only screen and (max-width:768px) {
    modern-modal.form-modal .info-box img {
        width: 40px;
        height: 50px
    }
}

modern-modal.form-modal .info-box .sub-title {
    margin-top: 10px;
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.5;
    color: #498dca
}

@media only screen and (max-width:1200px) {
    modern-modal.form-modal .info-box .sub-title {
        font-size: 1.25rem
    }
}

modern-modal.form-modal .info-box .title {
    margin-top: 10px;
    font-weight: 500;
    font-size: 2rem;
    line-height: 1.5;
    color: #fff
}

@media only screen and (max-width:1200px) {
    modern-modal.form-modal .info-box .title {
        font-size: 1.375rem
    }
}

modern-modal.form-modal .info-box .txt {
    margin-top: 10px;
    line-height: 1.8;
    color: #fff
}

modern-modal.form-modal .btn-group {
    margin-top: 40px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media only screen and (max-width:768px) {
    modern-modal.form-modal .btn-group {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
}

modern-modal.form-modal .common-btn {
    cursor: pointer
}

modern-modal.form-modal .common-btn:not(:first-child) {
    margin-left: 40px
}

@media only screen and (max-width:768px) {
    modern-modal.form-modal .common-btn:not(:first-child) {
        margin: 0 0 20px
    }
}

.cookie-check {
    pointer-events: none;
    opacity: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 101;
    overflow: hidden;
    position: fixed;
    top: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s
}

.cookie-check>* {
    opacity: 0;
    -webkit-transition: opacity 0.5s 0.3s;
    transition: opacity 0.5s 0.3s
}

.cookie-check .cookie-inner {
    opacity: 0;
    max-width: calc(100vw - 100px);
    width: 1090px;
    background: #323232;
    position: absolute;
    left: 50%;
    bottom: 60px;
    -webkit-transform: translate3d(-50%, 200%, 0);
    transform: translate3d(-50%, 200%, 0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.5s;
    transition: opacity 0.3s, -webkit-transform 0.5s;
    transition: transform 0.5s, opacity 0.3s;
    transition: transform 0.5s, opacity 0.3s, -webkit-transform 0.5s
}

@media only screen and (max-width:768px) {
    .cookie-check .cookie-inner {
        bottom: 40px
    }
}

@media only screen and (max-width:575px) {
    .cookie-check .cookie-inner {
        max-width: calc(100% - 40px)
    }
}

.cookie-check.first-enter {
    pointer-events: auto;
    opacity: 1
}

.cookie-check.first-enter>* {
    opacity: 1
}

.cookie-check.first-enter .cookie-inner {
    opacity: 1;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0)
}

.cookie-check.first-enter.agree,
.cookie-check.first-enter.hidden {
    pointer-events: none;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s
}

.cookie-check.first-enter.agree>*,
.cookie-check.first-enter.hidden>* {
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s
}

.cookie-check.first-enter.agree .cookie-inner,
.cookie-check.first-enter.hidden .cookie-inner {
    pointer-events: none;
    opacity: 1;
    -webkit-transform: translate3d(-50%, 200%, 0);
    transform: translate3d(-50%, 200%, 0);
    -webkit-transition: opacity 0.5s 0.3s, -webkit-transform 0.5s;
    transition: opacity 0.5s 0.3s, -webkit-transform 0.5s;
    transition: transform 0.5s, opacity 0.5s 0.3s;
    transition: transform 0.5s, opacity 0.5s 0.3s, -webkit-transform 0.5s
}

.cookie-check .container {
    padding: 40px 80px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff
}

@media only screen and (max-width:1200px) {
    .cookie-check .container {
        padding: 40px 60px
    }
}

@media only screen and (max-width:992px) {
    .cookie-check .container {
        padding: 40px;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.cookie-check .close-btn {
    cursor: pointer;
    width: 40px;
    height: 40px;
    background: #498dca;
    position: absolute;
    top: 0;
    right: 0
}

.cookie-check .close-btn .cross {
    width: 12px;
    height: 12px
}

.cookie-check .close-btn .cross:after,
.cookie-check .close-btn .cross:before {
    background: #fff;
    top: 5px
}

.cookie-check .header {
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.5;
    letter-spacing: 0.2px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.cookie-check .header:after {
    margin: 0 20px;
    content: "";
    display: block;
    width: 1px;
    height: 20px;
    background: rgba(209, 209, 209, 0.5)
}

@media only screen and (max-width:992px) {
    .cookie-check .header:after {
        margin: 0 0 0 10px
    }
}

.cookie-check .header .en {
    margin-right: 5px;
    color: #498dca
}

.cookie-check .txt {
    line-height: 1.8
}

@media only screen and (max-width:992px) {
    .cookie-check .txt {
        margin-top: 20px
    }
}

.cookie-check .txt .privacy {
    cursor: pointer;
    color: #498dca
}

.cookie-check .common-btn {
    cursor: pointer;
    margin-left: 20px;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

@media only screen and (max-width:992px) {
    .cookie-check .common-btn {
        margin: 20px auto 0
    }
}

modern-modal[data-modal-id=privacy-modal] .modal-wrapper {
    padding: 80px 0 120px
}

@media only screen and (max-width:992px) {
    modern-modal[data-modal-id=privacy-modal] .modal-wrapper {
        padding: 60px 0 70px
    }
}

modern-modal[data-modal-id=privacy-modal] .modal-content {
    word-break: break-word;
    padding: 120px 0;
    width: 85%;
    max-width: 1440px;
    -webkit-box-shadow: -40px 40px 0 0 #498dca;
    box-shadow: -40px 40px 0 0 #498dca
}

@media only screen and (max-width:992px) {
    modern-modal[data-modal-id=privacy-modal] .modal-content {
        padding: 80px 0;
        -webkit-box-shadow: -20px 20px 0 0 #498dca;
        box-shadow: -20px 20px 0 0 #498dca
    }
}

@media only screen and (max-width:575px) {
    modern-modal[data-modal-id=privacy-modal] .modal-content {
        width: calc(100% - 40px);
        -webkit-box-shadow: -10px 10px 0 0 #498dca;
        box-shadow: -10px 10px 0 0 #498dca
    }
}

modern-modal[data-modal-id=privacy-modal] .close-btn {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0
}

modern-modal[data-modal-id=privacy-modal] .container {
    margin: 0 auto;
    max-width: 1200px;
    width: 90%
}

@media only screen and (max-width:768px) {
    modern-modal[data-modal-id=privacy-modal] .container {
        width: calc(100% - 60px)
    }
}

modern-modal[data-modal-id=privacy-modal] .header {
    text-align: center;
    padding-bottom: 60px;
    border-bottom: 6px solid #498dca
}

@media only screen and (max-width:575px) {
    modern-modal[data-modal-id=privacy-modal] .header {
        text-align: left
    }
}

modern-modal[data-modal-id=privacy-modal] .header .common-headerline-three {
    margin: 0 auto;
    max-width: 1000px;
    width: calc(100% - 60px)
}

@media only screen and (max-width:1200px) {
    modern-modal[data-modal-id=privacy-modal] .header .common-headerline-three {
        padding: 0 10px
    }
}

modern-modal[data-modal-id=privacy-modal] .content {
    padding-top: 60px
}

@media only screen and (max-width:1200px) {
    modern-modal[data-modal-id=privacy-modal] .content {
        padding: 60px 10px 0
    }
}

modern-modal[data-modal-id=privacy-modal] .privacy-list {
    counter-reset: custom-counter
}

modern-modal[data-modal-id=privacy-modal] .privacy-list>li {
    border-bottom: 2px solid #D9D9D9;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

@media only screen and (max-width:1200px) {
    modern-modal[data-modal-id=privacy-modal] .privacy-list>li {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

modern-modal[data-modal-id=privacy-modal] .privacy-list>li:not(:first-child) {
    padding: 40px 0
}

modern-modal[data-modal-id=privacy-modal] .privacy-list>li:first-child {
    padding-bottom: 40px
}

modern-modal[data-modal-id=privacy-modal] .privacy-list>li .title-wrap {
    width: max(300px, 28.75%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

@media only screen and (max-width:1200px) {
    modern-modal[data-modal-id=privacy-modal] .privacy-list>li .title-wrap {
        width: 100%
    }
}

modern-modal[data-modal-id=privacy-modal] .privacy-list>li .number {
    margin-right: 10px;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

modern-modal[data-modal-id=privacy-modal] .privacy-list>li .number:before {
    content: counter(custom-counter, decimal-leading-zero);
    counter-increment: custom-counter;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.22px
}

modern-modal[data-modal-id=privacy-modal] .privacy-list>li .title {
    font-weight: 500;
    font-size: 1.375rem;
    line-height: 1.5;
    letter-spacing: 0.5px;
    text-transform: capitalize
}

@media only screen and (max-width:1200px) {
    modern-modal[data-modal-id=privacy-modal] .privacy-list>li .title {
        margin-bottom: 20px;
        font-size: 1.25rem
    }
}

modern-modal[data-modal-id=privacy-modal] .privacy-list>li .txt {
    width: calc(100% - max(300px, 28.75%));
    margin-left: 20px;
    line-height: 1.8
}

@media only screen and (max-width:1200px) {
    modern-modal[data-modal-id=privacy-modal] .privacy-list>li .txt {
        margin-left: 0;
        width: 100%
    }
}

modern-modal[data-modal-id=privacy-modal] .privacy-list>li .txt :not(:first-child) {
    margin-top: 20px
}

modern-modal[data-modal-id=privacy-modal] .privacy-list>li .txt li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

modern-modal[data-modal-id=privacy-modal] .privacy-list>li .txt li:before {
    margin-right: 10px;
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    background: #498dca;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
}

modern-modal[data-modal-id=cancel-newsletter-modal] .modal-wrapper,
modern-modal[data-modal-id=newsletter-modal] .modal-wrapper {
    padding: 90px 0
}

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

    modern-modal[data-modal-id=cancel-newsletter-modal] .modal-wrapper,
    modern-modal[data-modal-id=newsletter-modal] .modal-wrapper {
        padding: 60px 20px
    }
}

modern-modal[data-modal-id=cancel-newsletter-modal] .modal-content,
modern-modal[data-modal-id=newsletter-modal] .modal-content {
    word-break: break-word;
    width: 90%;
    max-width: 1000px;
    background: #F9F9F9;
    position: relative;
    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
}

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

    modern-modal[data-modal-id=cancel-newsletter-modal] .modal-content,
    modern-modal[data-modal-id=newsletter-modal] .modal-content {
        width: 100%
    }
}

modern-modal[data-modal-id=cancel-newsletter-modal] .container,
modern-modal[data-modal-id=newsletter-modal] .container {
    padding: 80px 0;
    margin: 0 auto;
    max-width: 600px;
    width: calc(100% - 80px)
}

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

    modern-modal[data-modal-id=cancel-newsletter-modal] .container,
    modern-modal[data-modal-id=newsletter-modal] .container {
        padding: 60px 0
    }
}

modern-modal[data-modal-id=cancel-newsletter-modal] .close-btn,
modern-modal[data-modal-id=newsletter-modal] .close-btn {
    cursor: pointer;
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    right: 0
}

@media only screen and (max-width:575px) {

    modern-modal[data-modal-id=cancel-newsletter-modal] .close-btn,
    modern-modal[data-modal-id=newsletter-modal] .close-btn {
        width: 40px;
        height: 40px
    }
}

@media only screen and (max-width:575px) {

    modern-modal[data-modal-id=cancel-newsletter-modal] .close-btn:before,
    modern-modal[data-modal-id=newsletter-modal] .close-btn:before {
        border-width: 0 10px 13px 0
    }
}

modern-modal[data-modal-id=cancel-newsletter-modal] .header,
modern-modal[data-modal-id=newsletter-modal] .header {
    padding-bottom: 40px;
    border-bottom: 4px solid #498dca;
    text-align: center
}

modern-modal[data-modal-id=cancel-newsletter-modal] .header .en,
modern-modal[data-modal-id=newsletter-modal] .header .en {
    margin-top: 20px;
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.5;
    color: #498dca
}

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

    modern-modal[data-modal-id=cancel-newsletter-modal] .header .en,
    modern-modal[data-modal-id=newsletter-modal] .header .en {
        font-size: 1.25rem
    }
}

modern-modal[data-modal-id=cancel-newsletter-modal] .header .zh,
modern-modal[data-modal-id=newsletter-modal] .header .zh {
    margin-top: 20px;
    font-weight: 500;
    font-size: 3.125rem;
    line-height: 1.5;
    letter-spacing: 0.5px
}

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

    modern-modal[data-modal-id=cancel-newsletter-modal] .header .zh,
    modern-modal[data-modal-id=newsletter-modal] .header .zh {
        font-size: 1.875rem
    }
}

modern-modal[data-modal-id=cancel-newsletter-modal] .header .txt,
modern-modal[data-modal-id=newsletter-modal] .header .txt {
    margin-top: 20px;
    line-height: 1.8;
    color: #323232
}

modern-modal[data-modal-id=cancel-newsletter-modal] .content,
modern-modal[data-modal-id=newsletter-modal] .content {
    padding: 0
}

modern-modal[data-modal-id=cancel-newsletter-modal] .content .wdd-form,
modern-modal[data-modal-id=newsletter-modal] .content .wdd-form {
    padding: 40px 0 0
}

modern-modal[data-modal-id=cancel-newsletter-modal] .content .form-row,
modern-modal[data-modal-id=newsletter-modal] .content .form-row {
    margin: 0
}

modern-modal[data-modal-id=cancel-newsletter-modal] .content .form-row:not(:first-child),
modern-modal[data-modal-id=newsletter-modal] .content .form-row:not(:first-child) {
    margin-top: 40px
}

modern-modal[data-modal-id=cancel-newsletter-modal] .content .form-grid,
modern-modal[data-modal-id=newsletter-modal] .content .form-grid {
    padding: 0
}

modern-modal[data-modal-id=cancel-newsletter-modal] .content .subject,
modern-modal[data-modal-id=newsletter-modal] .content .subject {
    margin: 0 0 10px;
    padding: 0
}

modern-modal[data-modal-id=cancel-newsletter-modal] .content .subject .en,
modern-modal[data-modal-id=newsletter-modal] .content .subject .en {
    color: #498dca
}

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

    modern-modal[data-modal-id=cancel-newsletter-modal] .content .verification input,
    modern-modal[data-modal-id=newsletter-modal] .content .verification input {
        padding-right: 135px
    }
}

modern-modal[data-modal-id=cancel-newsletter-modal] .content .common-btn,
modern-modal[data-modal-id=newsletter-modal] .content .common-btn {
    margin: 40px auto 0
}

modern-modal[data-modal-id=cancel-newsletter-modal] .line,
modern-modal[data-modal-id=newsletter-modal] .line {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transition: width 0.5s;
    transition: width 0.5s
}

modern-modal[data-modal-id=cancel-newsletter-modal] .line:after,
modern-modal[data-modal-id=cancel-newsletter-modal] .line:before,
modern-modal[data-modal-id=newsletter-modal] .line:after,
modern-modal[data-modal-id=newsletter-modal] .line:before {
    content: "";
    display: block;
    height: 5px
}

modern-modal[data-modal-id=cancel-newsletter-modal] .line:before,
modern-modal[data-modal-id=newsletter-modal] .line:before {
    width: 50%;
    background: #498dca;
    -webkit-transition: width 0.5s;
    transition: width 0.5s
}

modern-modal[data-modal-id=cancel-newsletter-modal] .line:after,
modern-modal[data-modal-id=newsletter-modal] .line:after {
    width: 50%;
    background: #323232;
    -webkit-transition: width 0.5s 0.5s;
    transition: width 0.5s 0.5s
}

modern-modal[data-modal-id=cancel-newsletter-modal] .line[data-aost]:after,
modern-modal[data-modal-id=cancel-newsletter-modal] .line[data-aost]:before,
modern-modal[data-modal-id=newsletter-modal] .line[data-aost]:after,
modern-modal[data-modal-id=newsletter-modal] .line[data-aost]:before {
    width: 0
}

modern-modal[data-modal-id=cancel-newsletter-modal] .line.aost-show:before,
modern-modal[data-modal-id=newsletter-modal] .line.aost-show:before {
    width: 50%
}

modern-modal[data-modal-id=cancel-newsletter-modal] .line.aost-show:after,
modern-modal[data-modal-id=newsletter-modal] .line.aost-show:after {
    width: 50%
}

modern-modal[data-modal-id=newsletter-modal] .header>img {
    margin: 0 auto;
    width: 40px;
    height: 40px;
    -webkit-animation: ring-swing 3s 0.7s 1;
    animation: ring-swing 3s 0.7s 1
}

@-webkit-keyframes ring-swing {
    8% {
        -webkit-transform: rotate3d(0, 0, 1, 20deg);
        transform: rotate3d(0, 0, 1, 20deg)
    }

    16% {
        -webkit-transform: rotate3d(0, 0, 1, -15deg);
        transform: rotate3d(0, 0, 1, -15deg)
    }

    24% {
        -webkit-transform: rotate3d(0, 0, 1, 10deg);
        transform: rotate3d(0, 0, 1, 10deg)
    }

    32% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg)
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg)
    }
}

@keyframes ring-swing {
    8% {
        -webkit-transform: rotate3d(0, 0, 1, 20deg);
        transform: rotate3d(0, 0, 1, 20deg)
    }

    16% {
        -webkit-transform: rotate3d(0, 0, 1, -15deg);
        transform: rotate3d(0, 0, 1, -15deg)
    }

    24% {
        -webkit-transform: rotate3d(0, 0, 1, 10deg);
        transform: rotate3d(0, 0, 1, 10deg)
    }

    32% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg)
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg)
    }
}

modern-modal[data-modal-id=newsletter-modal] .cancel {
    margin-top: 40px;
    line-height: 1.8;
    text-align: center
}

@media only screen and (max-width:575px) {
    modern-modal[data-modal-id=newsletter-modal] .cancel {
        text-align: left
    }
}

modern-modal[data-modal-id=newsletter-modal] .cancel-btn {
    margin-left: 5px;
    cursor: pointer;
    color: #498dca
}

@media only screen and (max-width:575px) {
    modern-modal[data-modal-id=newsletter-modal] .cancel-btn {
        margin-left: 0
    }
}

modern-modal[data-modal-id=cancel-newsletter-modal] .header .en {
    margin-top: 0
}

modern-modal[data-modal-id=cancel-newsletter-modal] .common-btn {
    cursor: pointer
}

modern-modal[data-modal-id=cancel-newsletter-success-modal] .modal-wrapper {
    padding: 90px 0
}

@media only screen and (max-width:768px) {
    modern-modal[data-modal-id=cancel-newsletter-success-modal] .modal-wrapper {
        padding: 60px 20px
    }
}

modern-modal[data-modal-id=cancel-newsletter-success-modal] .modal-content {
    word-break: break-word;
    width: 90%;
    max-width: 600px;
    background: #323232;
    position: relative;
    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
}

@media only screen and (max-width:768px) {
    modern-modal[data-modal-id=cancel-newsletter-success-modal] .modal-content {
        width: 100%
    }
}

modern-modal[data-modal-id=cancel-newsletter-success-modal] .modal-content:before {
    opacity: 0;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 35px 47px 0;
    border-color: transparent #498dca transparent transparent;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s
}

@media only screen and (max-width:768px) {
    modern-modal[data-modal-id=cancel-newsletter-success-modal] .modal-content:before {
        opacity: 1
    }
}

modern-modal[data-modal-id=cancel-newsletter-success-modal] .modal-content.active:before {
    opacity: 1
}

modern-modal[data-modal-id=cancel-newsletter-success-modal] .container {
    padding: 80px 0;
    margin: 0 auto;
    max-width: 600px;
    width: calc(100% - 80px)
}

@media only screen and (max-width:768px) {
    modern-modal[data-modal-id=cancel-newsletter-success-modal] .container {
        padding: 60px 0
    }
}

modern-modal[data-modal-id=cancel-newsletter-success-modal] .header {
    text-align: center
}

modern-modal[data-modal-id=cancel-newsletter-success-modal] .header .en {
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.5;
    color: #498dca
}

@media only screen and (max-width:1200px) {
    modern-modal[data-modal-id=cancel-newsletter-success-modal] .header .en {
        font-size: 1.25rem
    }
}

modern-modal[data-modal-id=cancel-newsletter-success-modal] .header .zh {
    margin-top: 20px;
    font-weight: 500;
    font-size: 2.8125rem;
    color: #fff;
    line-height: 1.3;
    letter-spacing: 0.5px
}

@media only screen and (max-width:1200px) {
    modern-modal[data-modal-id=cancel-newsletter-success-modal] .header .zh {
        font-size: 1.875rem
    }
}

modern-modal[data-modal-id=cancel-newsletter-success-modal] .header .txt {
    margin-top: 20px;
    line-height: 1.8;
    color: #fff
}

modern-modal[data-modal-id=cancel-newsletter-success-modal] .common-btn {
    margin: 40px auto 0
}

modern-modal[data-modal-id=search-modal] .modal-wrapper {
    padding: 90px 0
}

@media only screen and (max-width:768px) {
    modern-modal[data-modal-id=search-modal] .modal-wrapper {
        padding: 60px 20px
    }
}

modern-modal[data-modal-id=search-modal] .modal-content {
    word-break: break-word;
    width: 100%;
    width: calc(100% - 80px);
    max-width: 1000px;
    background: #F9F9F9;
    position: relative;
    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
}

@media only screen and (max-width:768px) {
    modern-modal[data-modal-id=search-modal] .modal-content {
        width: 100%
    }
}

modern-modal[data-modal-id=search-modal] .container {
    padding: 120px 40px 110px;
    margin: 0 auto;
    max-width: 760px;
    width: 100%
}

@media only screen and (max-width:768px) {
    modern-modal[data-modal-id=search-modal] .container {
        padding: 80px 20px 50px
    }
}

modern-modal[data-modal-id=search-modal] .close-btn {
    cursor: pointer;
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    right: 0
}

@media only screen and (max-width:575px) {
    modern-modal[data-modal-id=search-modal] .close-btn {
        width: 40px;
        height: 40px
    }
}

@media only screen and (max-width:575px) {
    modern-modal[data-modal-id=search-modal] .close-btn:before {
        border-width: 0 10px 13px 0
    }
}

modern-modal[data-modal-id=search-modal] .header {
    margin: 0 auto;
    padding-bottom: 40px;
    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;
    max-width: 760px
}

@media only screen and (max-width:768px) {
    modern-modal[data-modal-id=search-modal] .header {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }

    modern-modal[data-modal-id=search-modal] .header .title-wrap {
        width: 100%;
        text-align: center
    }
}

modern-modal[data-modal-id=search-modal] .header .en {
    margin-top: 20px;
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1
}

@media only screen and (max-width:1200px) {
    modern-modal[data-modal-id=search-modal] .header .en {
        font-size: 1.25rem
    }
}

modern-modal[data-modal-id=search-modal] .header .zh {
    margin-top: 20px;
    font-weight: 500;
    font-size: 3.125rem;
    line-height: 1.5;
    letter-spacing: 0.5px
}

@media only screen and (max-width:1200px) {
    modern-modal[data-modal-id=search-modal] .header .zh {
        font-size: 1.875rem
    }
}

modern-modal[data-modal-id=search-modal] .header .txt {
    margin-top: 20px;
    line-height: 1.8;
    color: #323232
}

modern-modal[data-modal-id=search-modal] .header .photo-wrap {
    margin-left: 20px;
    max-width: 70px;
    width: 100%;
    height: 100%;
    position: relative
}

modern-modal[data-modal-id=search-modal] .header .photo-wrap:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    padding-bottom: 100%
}

modern-modal[data-modal-id=search-modal] .header .photo-wrap img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media only screen and (max-width:768px) {
    modern-modal[data-modal-id=search-modal] .header .photo-wrap {
        margin-left: 0;
        max-width: 45px
    }
}

modern-modal[data-modal-id=search-modal] .search-input {
    margin: 0 auto;
    padding: 20px 40px;
    background: #fff;
    max-width: 760px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative
}

@media only screen and (max-width:768px) {
    modern-modal[data-modal-id=search-modal] .search-input {
        padding: 20px
    }
}

modern-modal[data-modal-id=search-modal] .search-input:after {
    content: "";
    display: block;
    width: 30px;
    height: 100%;
    background: -webkit-gradient(linear, right top, left top, color-stop(30%, #fff), to(rgba(255, 255, 255, 0)));
    background: linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0));
    position: absolute;
    top: 0;
    right: 70px
}

@media only screen and (max-width:768px) {
    modern-modal[data-modal-id=search-modal] .search-input:after {
        right: 50px
    }
}

modern-modal[data-modal-id=search-modal] .search-input>input {
    padding: 5px 40px 5px 0;
    width: 100%;
    border: none;
    font-weight: 500;
    font-size: 1rem
}

modern-modal[data-modal-id=search-modal] .search-input>input::-webkit-input-placeholder {
    color: #6C6C6C;
    width: -webkit-min-content;
    width: min-content
}

modern-modal[data-modal-id=search-modal] .search-input>input::-moz-placeholder {
    color: #6C6C6C;
    width: -moz-min-content;
    width: min-content
}

modern-modal[data-modal-id=search-modal] .search-input>input:-ms-input-placeholder {
    color: #6C6C6C;
    width: min-content
}

modern-modal[data-modal-id=search-modal] .search-input>input::-ms-input-placeholder {
    color: #6C6C6C;
    width: min-content
}

modern-modal[data-modal-id=search-modal] .search-input>input::placeholder {
    color: #6C6C6C;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content
}

@media only screen and (max-width:768px) {
    modern-modal[data-modal-id=search-modal] .search-input>input {
        padding: 5px 20px 5px 0
    }
}

modern-modal[data-modal-id=search-modal] .search-input .icon-search {
    margin-right: 10px;
    color: #498dca
}

modern-modal[data-modal-id=search-modal] .enter-btn {
    display: none;
    width: 20px;
    height: 20px;
    background: #498dca;
    border-radius: 500px;
    -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    top: 25px;
    right: 40px;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s
}

modern-modal[data-modal-id=search-modal] .enter-btn>.icon-arrow-right {
    font-size: 0.75rem;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    color: #fff
}

@media only screen and (max-width:768px) {
    modern-modal[data-modal-id=search-modal] .enter-btn {
        right: 20px
    }
}

@media only screen and (min-width:1201px) {
    modern-modal[data-modal-id=search-modal] .enter-btn:hover {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px)
    }
}

@media only screen and (max-width:1200px) {
    modern-modal[data-modal-id=search-modal] .enter-btn:active {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px)
    }
}

modern-modal[data-modal-id=search-modal] .search-keyword {
    padding: 0 0 0 15px;
    margin: 30px auto 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 790px
}

modern-modal[data-modal-id=search-modal] .search-keyword>p {
    padding: 10px 0 0 0;
    position: relative;
    font-weight: 500;
    font-size: 0.9375rem;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

modern-modal[data-modal-id=search-modal] .search-keyword>p:after {
    content: "";
    width: 4px;
    height: 4px;
    background: #498dca;
    position: absolute;
    top: 15px;
    right: -20px;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
}

@media only screen and (max-width:768px) {
    modern-modal[data-modal-id=search-modal] .search-keyword {
        padding: 0 5px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    modern-modal[data-modal-id=search-modal] .search-keyword>p {
        padding: 10px 0 0 15px
    }
}

modern-modal[data-modal-id=search-modal] .keyword-list {
    margin-left: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    max-width: 665px;
    width: 100%
}

@media only screen and (max-width:768px) {
    modern-modal[data-modal-id=search-modal] .keyword-list {
        margin: 10px 0 0 0
    }
}

modern-modal[data-modal-id=search-modal] .keyword-list>li {
    padding: 10px 15px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.5;
    letter-spacing: 0.14px;
    position: relative;
    -webkit-transition: color 0.3s;
    transition: color 0.3s
}

modern-modal[data-modal-id=search-modal] .keyword-list>li:not(:first-child):before {
    content: "";
    display: block;
    width: 1px;
    height: 15px;
    background: #D9D9D9;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translate3d(-100%, -50%, 0);
    transform: translate3d(-100%, -50%, 0)
}

@media only screen and (min-width:1201px) {
    modern-modal[data-modal-id=search-modal] .keyword-list>li:hover {
        color: #498dca
    }
}

@media only screen and (max-width:1200px) {
    modern-modal[data-modal-id=search-modal] .keyword-list>li:active {
        color: #498dca
    }
}

modern-modal[data-modal-id=search-modal] .keyword-list>li.active {
    color: #498dca
}

body .main-wrapper {
    opacity: 0
}

body .main-wrapper.show {
    opacity: 1
}

body .enter-animate {
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    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;
    visibility: hidden
}

body .enter-animate .bg {
    position: absolute;
    top: 0;
    left: 0
}

body .enter-animate .bg .block {
    opacity: 0;
    width: 100vw;
    height: 100vh;
    background: #498dca;
    -webkit-transition: opacity 1.5s 2s ease;
    transition: opacity 1.5s 2s ease
}

body .enter-animate .logo {
    position: relative;
    z-index: 1;
    position: relative
}

body .enter-animate .logo .green,
body .enter-animate .logo .white {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0)
}

body .enter-animate .logo .green {
    -webkit-transition: opacity 1s;
    transition: opacity 1s
}

body .enter-animate .logo .green .path10,
body .enter-animate .logo .green .path4,
body .enter-animate .logo .green .path5,
body .enter-animate .logo .green .path6,
body .enter-animate .logo .green .path7,
body .enter-animate .logo .green .path8,
body .enter-animate .logo .green .path9 {
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
}

body .enter-animate .logo .white {
    -webkit-transition: opacity 1s 2s;
    transition: opacity 1s 2s
}

body .enter-animate.animate-active {
    visibility: visible
}

body .enter-animate.animate-active .block {
    opacity: 1
}

body .enter-animate.animate-active .green,
body .enter-animate.animate-active .white {
    opacity: 1
}

body .enter-animate.animate-active .green .path4,
body .enter-animate.animate-active .white .path4 {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform 0.8s 0.2s ease;
    transition: -webkit-transform 0.8s 0.2s ease;
    transition: transform 0.8s 0.2s ease;
    transition: transform 0.8s 0.2s ease, -webkit-transform 0.8s 0.2s ease
}

body .enter-animate.animate-active .green .path5,
body .enter-animate.animate-active .white .path5 {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform 0.8s 0.4s ease;
    transition: -webkit-transform 0.8s 0.4s ease;
    transition: transform 0.8s 0.4s ease;
    transition: transform 0.8s 0.4s ease, -webkit-transform 0.8s 0.4s ease
}

body .enter-animate.animate-active .green .path6,
body .enter-animate.animate-active .white .path6 {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform 0.8s 0.6s ease;
    transition: -webkit-transform 0.8s 0.6s ease;
    transition: transform 0.8s 0.6s ease;
    transition: transform 0.8s 0.6s ease, -webkit-transform 0.8s 0.6s ease
}

body .enter-animate.animate-active .green .path7,
body .enter-animate.animate-active .white .path7 {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform 0.8s 0.8s ease;
    transition: -webkit-transform 0.8s 0.8s ease;
    transition: transform 0.8s 0.8s ease;
    transition: transform 0.8s 0.8s ease, -webkit-transform 0.8s 0.8s ease
}

body .enter-animate.animate-active .green .path8,
body .enter-animate.animate-active .white .path8 {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform 0.8s 1s ease;
    transition: -webkit-transform 0.8s 1s ease;
    transition: transform 0.8s 1s ease;
    transition: transform 0.8s 1s ease, -webkit-transform 0.8s 1s ease
}

body .enter-animate.animate-active .green .path9,
body .enter-animate.animate-active .white .path9 {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform 0.8s 1.2s ease;
    transition: -webkit-transform 0.8s 1.2s ease;
    transition: transform 0.8s 1.2s ease;
    transition: transform 0.8s 1.2s ease, -webkit-transform 0.8s 1.2s ease
}

body .enter-animate.animate-active .green .path10,
body .enter-animate.animate-active .white .path10 {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform 0.8s 1.4s ease;
    transition: -webkit-transform 0.8s 1.4s ease;
    transition: transform 0.8s 1.4s ease;
    transition: transform 0.8s 1.4s ease, -webkit-transform 0.8s 1.4s ease
}

body .enter-animate.complete {
    z-index: -1;
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    visibility: hidden
}

body .enter-animate.complete+.main-wrapper {
    opacity: 1
}