@import"./fontawesome/css/all.css";

* {
    padding: 0;
    margin: 0;
    font-size: 1em;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #505050;
    list-style: none;
    box-sizing: border-box;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-touch-callout: inherit;
    -webkit-user-select: inherit;
    -khtml-user-select: inherit;
    -moz-user-select: inherit;
    -ms-user-select: inherit;
    user-select: inherit
}

*::-webkit-scrollbar {
    display: none
}

html {
    width: 100vw;
    height: 100vh
}

body {
    width: 100%;
    height: 100%
}

input,
textarea,
select {
    border-radius: 0;
    border: none;
    outline: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none
}

.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.can-select {
    -webkit-touch-callout: initial;
    -webkit-user-select: initial;
    -khtml-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    user-select: initial
}

div[sn=T001] {
    position: relative;
    display: block;
    width: 100%
}

div[sn=T001]::after {
    content: "T001";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

div[sn=T001][path="/"]>div[df=bd],
div[sn=T001][path="/index"]>div[df=bd],
div[sn=T001][path="/index.html"]>div[df=bd] {
    display: block
}

div[sn=T001]>div[df=ex] {
    position: relative;
    left: 50%;
    padding-top: 1rem;
    width: 100%;
    max-width: var(--max-width);
    height: 4rem;
    transform: translateX(-50%);
    font-size: 0
}

div[sn=T001]>div[df=ex]>div {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: initial;
    margin-top: .5rem;
    height: 1.5rem;
    font-size: 0;
    cursor: pointer
}

div[sn=T001]>div[df=ex]>div>img {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-left: 1rem;
    width: 1.5rem;
    height: 1.5rem
}

div[sn=T001]>div[df=ex]>div>p,
div[sn=T001]>div[df=ex]>div>a {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-left: 1rem;
    line-height: 1.5rem;
    max-height: 1.5rem;
    font-size: .875rem;
    font-weight: 500;
    color: #fff
}

div[sn=T001]>div[df=ex]>div>p>i,
div[sn=T001]>div[df=ex]>div>a>i {
    margin-right: .5rem;
    font-size: 1rem;
    color: #fff
}

div[sn=T001]>div[df=ex]>a {
    position: absolute;
    top: 1rem;
    right: 1rem
}

div[sn=T001]>nav[df=nvb] {
    position: relative;
    display: block;
    z-index: 1;
    margin-top: 1rem;
    margin-left: 50%;
    width: 100%;
    max-width: var(--max-width);
    height: 5rem;
    transform: translateX(-50%);
    border-bottom: 1px solid rgba(255, 255, 255, .25)
}

div[sn=T001]>nav[df=nvb]>h1 {
    position: absolute;
    top: 0;
    left: 1rem;
    line-height: 5rem;
    max-height: 5rem;
    font-size: 1.875rem;
    font-weight: 500;
    color: #fff
}

div[sn=T001]>nav[df=nvb]>img[df=nvb] {
    display: none;
    position: absolute;
    top: 1.5rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    object-fit: cover
}

@media screen and (max-width: 639px) {
    div[sn=T001]>nav[df=nvb]>img[df=nvb] {
        display: block
    }
}

div[sn=T001]>nav[df=nvb]>div {
    position: absolute;
    top: 0;
    right: 1rem;
    width: initial;
    height: 5rem
}

@media screen and (max-width: 639px) {
    div[sn=T001]>nav[df=nvb]>div {
        visibility: hidden
    }
}

div[sn=T001]>nav[df=nvb]>div>div,
div[sn=T001]>nav[df=nvb]>div>a {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-left: 1.5rem;
    line-height: 5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    cursor: pointer
}

div[sn=T001]>nav[df=nvb]>div>div::before,
div[sn=T001]>nav[df=nvb]>div>a::before {
    content: ""
}

div[sn=T001]>nav[df=nvb]>div>div:nth-child(1),
div[sn=T001]>nav[df=nvb]>div>a:nth-child(1) {
    margin-left: 1rem
}

div[sn=T001]>nav[df=nvb]>div>div.act,
div[sn=T001]>nav[df=nvb]>div>a.act {
    color: var(--col-sys-light)
}

div[sn=T001]>nav[df=nvb]>div>div.act>ul,
div[sn=T001]>nav[df=nvb]>div>a.act>ul {
    display: block
}

@media(hover: hover)and (pointer: fine) {

    div[sn=T001]>nav[df=nvb]>div>div.unhover,
    div[sn=T001]>nav[df=nvb]>div>a.unhover {
        animation: color-hover-fff .3s;
        -webkit-animation: color-hover-fff .3s
    }

    div[sn=T001]>nav[df=nvb]>div>div:hover,
    div[sn=T001]>nav[df=nvb]>div>a:hover {
        color: var(--col-sys-light);
        animation: color-unhover-fff .3s;
        -webkit-animation: color-unhover-fff .3s
    }

    div[sn=T001]>nav[df=nvb]>div>div:hover>ul,
    div[sn=T001]>nav[df=nvb]>div>a:hover>ul {
        display: block
    }
}

div[sn=T001]>nav[df=nvb]>div>div.fc,
div[sn=T001]>nav[df=nvb]>div>a.fc {
    font-weight: 500;
    color: var(--col-sys-light)
}

div[sn=T001]>nav[df=nvb]>div>div.fc::before,
div[sn=T001]>nav[df=nvb]>div>a.fc::before {
    content: ""
}

@media(hover: hover)and (pointer: fine) {

    div[sn=T001]>nav[df=nvb]>div>div.fc:hover,
    div[sn=T001]>nav[df=nvb]>div>a.fc:hover {
        animation: none;
        -webkit-animation: none
    }

    div[sn=T001]>nav[df=nvb]>div>div.fc.unhover,
    div[sn=T001]>nav[df=nvb]>div>a.fc.unhover {
        animation: none;
        -webkit-animation: none
    }
}

div[sn=T001]>nav[df=nvb]>div>div>ul,
div[sn=T001]>nav[df=nvb]>div>a>ul {
    position: absolute;
    display: none;
    right: -1rem;
    width: 120px;
    background-color: rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-radius: 2px;
    list-style: none
}

div[sn=T001]>nav[df=nvb]>div>div>ul>li>a,
div[sn=T001]>nav[df=nvb]>div>a>ul>li>a {
    position: relative;
    display: block;
    padding: 0 .875rem;
    line-height: 3rem;
    font-size: .875rem;
    text-align: right;
    color: #fff
}

@media(hover: hover)and (pointer: fine) {

    div[sn=T001]>nav[df=nvb]>div>div>ul>li>a:hover,
    div[sn=T001]>nav[df=nvb]>div>a>ul>li>a:hover {
        background-color: var(--col-sys-light)
    }
}

@media(hover: hover)and (pointer: fine) {

    div[sn=T001]>nav[df=nvb]>div>div>ul:hover,
    div[sn=T001]>nav[df=nvb]>div>a>ul:hover {
        display: block
    }
}

div[sn=T001]>div[df=bd] {
    position: relative;
    display: none;
    padding: 12rem 0;
    width: 100%
}

div[sn=T001]>div[df=bd]>article {
    position: relative;
    display: block;
    margin-right: -50%;
    width: initial;
    max-width: 100%;
    height: initial;
    text-align: center
}

div[sn=T001]>div[df=bd]>article>p {
    position: relative;
    display: inline-block;
    margin-top: 1rem;
    padding: 0 1rem;
    width: initial;
    max-width: calc(100% - 2rem);
    line-height: 1.375rem;
    font-size: .875rem;
    color: #fff
}

div[sn=T001]>div[df=bd]>article>p.subtitle {
    font-size: 2rem
}

@media screen and (max-width: 639px) {
    div[sn=T001]>div[df=bd]>article>p.subtitle {
        font-size: 1.5rem
    }
}

div[sn=T001]>div[df=bd]>article>h3 {
    position: relative;
    display: block;
    margin-top: 1rem;
    width: initial;
    max-width: 100%;
    font-size: 4rem;
    font-weight: 400;
    color: #fff
}

@media screen and (max-width: 639px) {
    div[sn=T001]>div[df=bd]>article>h3 {
        font-size: 3rem
    }
}

@media screen and (max-width: 479px) {
    div[sn=T001]>div[df=bd]>article>h3 {
        font-size: 2.5rem
    }
}

div[sn=T001]>div[df=bd]>article>div {
    position: relative;
    display: block;
    margin-top: 2rem;
    width: initial;
    max-width: 100%;
    text-align: center
}

div[sn=T001]>div[df=bd]>article>div>a {
    display: inline-block;
    vertical-align: top;
    margin: 0 .5rem
}

div[sn=T002] {
    position: relative;
    display: block;
    padding-top: 4rem;
    width: 100%;
    height: initial
}

div[sn=T002]::after {
    content: "T002";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

div[sn=T002]>div[df*=nvb] {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 4rem;
    border-bottom: 1px solid rgba(255, 255, 255, .25)
}

div[sn=T002]>div[df*=nvb]>nav[df*=nvb] {
    position: relative;
    left: 50%;
    width: 100%;
    max-width: var(--max-width);
    height: 100%;
    transform: translateX(-50%)
}

div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>img {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-top: .75rem;
    margin-left: 1rem;
    width: 2.5rem;
    max-height: 2.5rem;
    object-fit: cover
}

div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>img[df*=nvb] {
    display: none;
    position: absolute;
    padding: .125rem;
    top: .25rem;
    right: .5rem;
    width: 2rem;
    height: 2rem;
    object-fit: cover
}

@media screen and (max-width: 639px) {
    div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>img[df*=nvb] {
        display: block
    }
}

div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>h1 {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-top: .75rem;
    margin-left: 1rem;
    line-height: 2.5rem;
    max-height: 2.5rem;
    font-size: 2rem;
    font-weight: 500;
    color: #fff
}

div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div {
    position: absolute;
    top: .75rem;
    right: 1rem;
    width: initial;
    height: 2.5rem
}

@media screen and (max-width: 639px) {
    div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div {
        display: none
    }
}

div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>div,
div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>a {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-left: 1.5rem;
    line-height: 2.5rem;
    height: 3.75rem;
    font-size: .875rem;
    font-weight: 400;
    color: #fff;
    cursor: pointer;
    animation-iteration-count: 1
}

div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>div::before,
div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>a::before {
    content: ""
}

div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>div:nth-child(1),
div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>a:nth-child(1) {
    margin-left: 1rem
}

div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>div.act,
div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>a.act {
    color: var(--col-sys)
}

div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>div.act>ul,
div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>a.act>ul {
    display: block
}

@media(hover: hover)and (pointer: fine) {

    div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>div.unhover,
    div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>a.unhover {
        animation: color-hover-fff .3s;
        -webkit-animation: color-hover-fff .3s
    }

    div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>div:hover,
    div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>a:hover {
        color: var(--col-sys);
        animation: color-unhover-fff .3s;
        -webkit-animation: color-unhover-fff .3s
    }

    div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>div:hover>ul,
    div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>a:hover>ul {
        display: block
    }
}

div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>div.fc,
div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>a.fc {
    font-weight: 500;
    color: var(--col-sys)
}

div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>div.fc::before,
div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>a.fc::before {
    content: ""
}

@media(hover: hover)and (pointer: fine) {

    div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>div.fc:hover,
    div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>a.fc:hover {
        animation: none;
        -webkit-animation: none
    }

    div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>div.fc.unhover,
    div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>a.fc.unhover {
        animation: none;
        -webkit-animation: none
    }
}

div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>div>ul,
div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>a>ul {
    position: absolute;
    display: none;
    margin-top: .75rem;
    width: 160px;
    background-color: rgba(50, 50, 50, .9);
    border-radius: 2px;
    list-style: none
}

div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>div>ul>li>a,
div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>a>ul>li>a {
    position: relative;
    display: block;
    padding: 0 .875rem;
    font-size: .875rem;
    color: #fff
}

@media(hover: hover)and (pointer: fine) {

    div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>div>ul>li>a:hover,
    div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>a>ul>li>a:hover {
        background-color: var(--col-sys)
    }
}

@media(hover: hover)and (pointer: fine) {

    div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>div>ul:hover,
    div[sn=T002]>div[df*=nvb]>nav[df*=nvb]>div>a>ul:hover {
        display: block
    }
}

div[sn=T002]>div[df=bd] {
    position: relative;
    display: block;
    padding: 12em 0;
    width: 100%
}

div[sn=T002]>div[df=bd]>article {
    position: relative;
    display: block;
    margin-right: -50%;
    width: initial;
    max-width: 100%;
    height: initial;
    text-align: center
}

div[sn=T002]>div[df=bd]>article>p {
    position: relative;
    display: block;
    margin-top: 1rem;
    padding: 0 1rem;
    width: initial;
    max-width: 100%;
    line-height: 1.375rem;
    font-size: 1rem;
    color: #fff
}

div[sn=T002]>div[df=bd]>article>p.subtitle {
    margin-top: 2rem;
    font-size: 1.75rem
}

@media screen and (max-width: 639px) {
    div[sn=T002]>div[df=bd]>article>p.subtitle {
        font-size: 1.5rem
    }
}

div[sn=T002]>div[df=bd]>article>h3 {
    position: relative;
    display: block;
    width: initial;
    padding: 0 1rem;
    width: initial;
    max-width: 100%;
    font-size: 4rem;
    font-weight: 400;
    color: #fff
}

@media screen and (max-width: 639px) {
    div[sn=T002]>div[df=bd]>article>h3 {
        font-size: 3rem
    }
}

@media screen and (max-width: 479px) {
    div[sn=T002]>div[df=bd]>article>h3 {
        font-size: 2.5rem
    }
}

div[sn=T002]>div[df=bd]>article>div {
    position: relative;
    display: block;
    margin-top: 3rem;
    width: initial;
    max-width: 100%;
    text-align: center
}

div[sn=T002]>div[df=bd]>article>div>a {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 1rem
}

div[sn=T003] {
    position: relative;
    display: block;
    width: 100%;
    height: initial
}

div[sn=T003]::after {
    content: "T003";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

div[sn=T003]>div[df=top] {
    position: relative;
    z-index: 1;
    padding: 3rem 1rem;
    left: 50%;
    width: 100%;
    max-width: var(--max-width);
    height: initial;
    transform: translateX(-50%);
    font-size: 0;
    text-align: left
}

div[sn=T003]>div[df=top]>div {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: initial;
    height: 4rem
}

div[sn=T003]>div[df=top]>div>h1 {
    position: relative;
    font-size: 2rem;
    color: #fff
}

div[sn=T003]>div[df=top]>div>p {
    position: relative;
    font-size: .75rem;
    color: #fff
}

div[sn=T003]>div[df=top]>ul {
    position: absolute;
    top: 3.5rem;
    right: 1rem;
    width: initial;
    height: initial;
    font-size: 0
}

@media screen and (max-width: 1023px) {
    div[sn=T003]>div[df=top]>ul {
        position: relative;
        top: unset;
        right: unset;
        width: 100%
    }
}

div[sn=T003]>div[df=top]>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-left: 1.5rem;
    width: initial;
    height: initial;
    font-size: 0
}

div[sn=T003]>div[df=top]>ul>li:nth-child(1) {
    margin-left: 0
}

@media screen and (max-width: 1023px) {
    div[sn=T003]>div[df=top]>ul>li {
        margin-top: 1rem;
        width: calc((100% - 3rem)/3)
    }
}

@media screen and (max-width: 767px) {
    div[sn=T003]>div[df=top]>ul>li {
        margin-left: 0;
        width: 100%
    }
}

div[sn=T003]>div[df=top]>ul>li>img {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-top: .5rem;
    width: 2rem;
    height: 2rem;
    background-color: #fff;
    border-radius: 50%
}

div[sn=T003]>div[df=top]>ul>li>a {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 3rem;
    line-height: 3rem;
    background-color: #fff;
    border-radius: 50%;
    font-size: 1.25rem;
    text-align: center
}

div[sn=T003]>div[df=top]>ul>li>a>i {
    color: var(--col-sys-light)
}

@media(hover: hover)and (pointer: fine) {
    div[sn=T003]>div[df=top]>ul>li>a:hover {
        background-color: var(--col-sys-light)
    }

    div[sn=T003]>div[df=top]>ul>li>a:hover>i {
        color: #fff
    }
}

div[sn=T003]>div[df=top]>ul>li>div {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-left: 1rem
}

div[sn=T003]>div[df=top]>ul>li>div>p {
    position: relative;
    font-size: 1rem;
    line-height: 1.5rem;
    color: #fff
}

div[sn=T003]>div[df=top]>ul>li>div>p>strong {
    position: relative;
    display: block;
    color: #fff
}

div[sn=T003]>nav[df^=nvb] {
    position: relative;
    z-index: 1;
    left: 50%;
    width: 100%;
    max-width: var(--max-width);
    height: 4rem;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, .5);
    border-radius: .25rem
}

div[sn=T003]>nav[df^=nvb]>div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3.5rem
}

div[sn=T003]>nav[df^=nvb]>div>div,
div[sn=T003]>nav[df^=nvb]>div>a {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-left: 1.5rem;
    line-height: 4rem;
    font-size: 1rem;
    font-weight: 400;
    color: #fff;
    cursor: pointer
}

div[sn=T003]>nav[df^=nvb]>div>div::before,
div[sn=T003]>nav[df^=nvb]>div>a::before {
    content: ""
}

div[sn=T003]>nav[df^=nvb]>div>div:nth-child(1),
div[sn=T003]>nav[df^=nvb]>div>a:nth-child(1) {
    margin-left: 2rem
}

div[sn=T003]>nav[df^=nvb]>div>div.act,
div[sn=T003]>nav[df^=nvb]>div>a.act {
    color: var(--col-sys-light)
}

div[sn=T003]>nav[df^=nvb]>div>div.act>ul,
div[sn=T003]>nav[df^=nvb]>div>a.act>ul {
    display: block
}

@media(hover: hover)and (pointer: fine) {

    div[sn=T003]>nav[df^=nvb]>div>div.unhover,
    div[sn=T003]>nav[df^=nvb]>div>a.unhover {
        animation: color-hover-fff .3s;
        -webkit-animation: color-hover-fff .3s
    }

    div[sn=T003]>nav[df^=nvb]>div>div:hover,
    div[sn=T003]>nav[df^=nvb]>div>a:hover {
        color: var(--col-sys-light);
        animation: color-unhover-fff .3s;
        -webkit-animation: color-unhover-fff .3s
    }

    div[sn=T003]>nav[df^=nvb]>div>div:hover>ul,
    div[sn=T003]>nav[df^=nvb]>div>a:hover>ul {
        display: block
    }
}

div[sn=T003]>nav[df^=nvb]>div>div.fc,
div[sn=T003]>nav[df^=nvb]>div>a.fc {
    font-weight: 500;
    color: var(--col-sys-light)
}

div[sn=T003]>nav[df^=nvb]>div>div.fc::before,
div[sn=T003]>nav[df^=nvb]>div>a.fc::before {
    content: ""
}

@media(hover: hover)and (pointer: fine) {

    div[sn=T003]>nav[df^=nvb]>div>div.fc:hover,
    div[sn=T003]>nav[df^=nvb]>div>a.fc:hover {
        animation: none;
        -webkit-animation: none
    }

    div[sn=T003]>nav[df^=nvb]>div>div.fc.unhover,
    div[sn=T003]>nav[df^=nvb]>div>a.fc.unhover {
        animation: none;
        -webkit-animation: none
    }
}

div[sn=T003]>nav[df^=nvb]>div>div>ul,
div[sn=T003]>nav[df^=nvb]>div>a>ul {
    position: absolute;
    display: none;
    width: 160px;
    background-color: var(--col-sys);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-radius: 2px;
    list-style: none
}

div[sn=T003]>nav[df^=nvb]>div>div>ul>li>a,
div[sn=T003]>nav[df^=nvb]>div>a>ul>li>a {
    position: relative;
    display: block;
    padding: 0 .875rem;
    font-size: .875rem;
    color: #fff
}

@media(hover: hover)and (pointer: fine) {

    div[sn=T003]>nav[df^=nvb]>div>div>ul>li>a:hover,
    div[sn=T003]>nav[df^=nvb]>div>a>ul>li>a:hover {
        background-color: var(--col-sys-light)
    }
}

@media(hover: hover)and (pointer: fine) {

    div[sn=T003]>nav[df^=nvb]>div>div>ul:hover,
    div[sn=T003]>nav[df^=nvb]>div>a>ul:hover {
        display: block
    }
}

div[sn=T003]>div[df=bd] {
    position: relative;
    display: block;
    padding: 10em 0 12rem;
    width: 100%
}

div[sn=T003]>div[df=bd]>article {
    position: relative;
    display: block;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 0 1rem;
    width: 100%;
    max-width: var(--max-width);
    height: initial;
    text-align: left
}

div[sn=T003]>div[df=bd]>article>h3 {
    position: relative;
    display: block;
    margin-top: 1.5rem;
    width: initial;
    max-width: 100%;
    font-size: 4rem;
    font-weight: 400;
    color: #fff
}

@media screen and (max-width: 639px) {
    div[sn=T003]>div[df=bd]>article>h3 {
        font-size: 3rem
    }
}

@media screen and (max-width: 479px) {
    div[sn=T003]>div[df=bd]>article>h3 {
        font-size: 2.5rem
    }
}

div[sn=T003]>div[df=bd]>article>p {
    position: relative;
    display: block;
    margin-top: 1.5rem;
    width: initial;
    max-width: calc(100% - 2rem);
    line-height: 1.5rem;
    font-size: 1rem;
    color: #fff
}

div[sn=T003]>div[df=bd]>article>p.subtitle {
    margin-top: 0;
    font-size: 1.75rem
}

@media screen and (max-width: 639px) {
    div[sn=T003]>div[df=bd]>article>p.subtitle {
        font-size: 1.25rem
    }
}

div[sn=T003]>div[df=bd]>article>div {
    position: relative;
    display: block;
    margin-top: 3rem;
    width: initial;
    max-width: 100%;
    text-align: left
}

div[sn=T003]>div[df=bd]>article>div>a {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-right: 1rem
}

div[sn=T004] {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    max-height: 800px
}

div[sn=T004]::after {
    content: "T004";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

@keyframes nav-ttb-show {
    from {
        height: 20vh
    }

    to {
        height: 100vh
    }
}

@keyframes nav-ttb-hide {
    from {
        height: 100vh
    }

    to {
        height: 0
    }
}

#navbar {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    text-align: center
}

#navbar.ttb {
    animation: nav-ttb-show .5s;
    -webkit-animation: nav-ttb-show .5s
}

#navbar.ttb.hide {
    height: 0;
    animation: nav-ttb-hide .5s;
    -webkit-animation: nav-ttb-hide .5s
}

#navbar.ttb.hide>div,
#navbar.ttb.hide>p {
    opacity: 0
}

#navbar>div {
    position: absolute;
    top: 4rem;
    left: 50vw;
    width: 100%;
    max-width: 360px;
    height: initial;
    transform: translateX(-50%)
}

#navbar>div>div,
#navbar>div>a {
    position: relative;
    display: block;
    line-height: 3rem;
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 2px;
    color: #fff;
    cursor: pointer
}

#navbar>div>div::before,
#navbar>div>a::before {
    content: "- "
}

#navbar>div>div[df*=li]::before,
#navbar>div>a[df*=li]::before {
    content: "▸ "
}

#navbar>div>div.act,
#navbar>div>a.act {
    color: var(--col-sys)
}

#navbar>div>div.act[df*=li]::before,
#navbar>div>a.act[df*=li]::before {
    content: "▾ "
}

#navbar>div>div.act>ul,
#navbar>div>a.act>ul {
    display: block
}

@media(hover: hover)and (pointer: fine) {

    #navbar>div>div.unhover,
    #navbar>div>a.unhover {
        animation: color-hover-fff .3s;
        -webkit-animation: color-hover-fff .3s
    }

    #navbar>div>div:hover,
    #navbar>div>a:hover {
        color: var(--col-sys);
        animation: color-unhover-fff .3s;
        -webkit-animation: color-unhover-fff .3s
    }

    #navbar>div>div:hover>ul,
    #navbar>div>a:hover>ul {
        display: block
    }
}

#navbar>div>div.fc,
#navbar>div>a.fc {
    font-weight: 500;
    color: var(--col-sys)
}

@media(hover: hover)and (pointer: fine) {

    #navbar>div>div.fc:hover,
    #navbar>div>a.fc:hover {
        animation: none;
        -webkit-animation: none
    }

    #navbar>div>div.fc.unhover,
    #navbar>div>a.fc.unhover {
        animation: none;
        -webkit-animation: none
    }
}

#navbar>div>div>ul,
#navbar>div>a>ul {
    position: relative;
    display: none;
    width: 100%;
    border-radius: 2px;
    list-style: none
}

#navbar>div>div>ul>li>a,
#navbar>div>a>ul>li>a {
    padding: 0 .875rem;
    font-size: .875rem;
    color: #fff
}

#navbar>div>div>ul>li>a::before,
#navbar>div>a>ul>li>a::before {
    content: "○ "
}

@media(hover: hover)and (pointer: fine) {

    #navbar>div>div>ul>li>a:hover,
    #navbar>div>a>ul>li>a:hover {
        color: var(--col-sys-light)
    }
}

@media(hover: hover)and (pointer: fine) {

    #navbar>div>div>ul:hover,
    #navbar>div>a>ul:hover {
        display: block
    }
}

#navbar>p {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 2rem 0;
    width: 100%;
    line-height: 1rem;
    color: #fff
}

div[sn=C001] {
    position: relative;
    display: block;
    width: 100%;
    height: initial;
    background-color: #fff
}

div[sn=C001]::after {
    content: "C001";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

div[sn=C001]>section {
    position: relative;
    display: block;
    left: 50%;
    width: 100%;
    max-width: var(--max-width);
    height: initial;
    transform: translateX(-50%);
    padding: 5rem 0 4rem
}

div[sn=C001]>section>h6 {
    position: relative;
    padding: 0 1rem;
    font-size: 2.25rem;
    font-weight: 600
}

@media screen and (max-width: 639px) {
    div[sn=C001]>section>h6 {
        font-size: 1.5rem
    }
}

div[sn=C001]>section>p {
    position: relative;
    margin-top: 1.25rem;
    line-height: 1.5rem;
    padding: 0 1rem;
    font-size: 1.125rem;
    font-weight: 500
}

@media screen and (max-width: 639px) {
    div[sn=C001]>section>p {
        font-size: 1rem
    }
}

div[sn=C001]>section>ul {
    position: relative;
    display: block;
    font-size: 0;
    margin-top: 4rem;
    text-align: center
}

div[sn=C001]>section>ul[df=x2]>li {
    width: calc(50% - 2rem)
}

@media screen and (max-width: 639px) {
    div[sn=C001]>section>ul[df=x2]>li {
        width: calc(100% - 2rem)
    }
}

@media screen and (max-width: 767px) {
    div[sn=C001]>section>ul[df=x3] {
        text-align: left
    }
}

div[sn=C001]>section>ul[df=x3]>li {
    width: calc(33.3333333333% - 2rem)
}

@media screen and (max-width: 767px) {
    div[sn=C001]>section>ul[df=x3]>li {
        width: calc(50% - 2rem);
        text-align: center
    }
}

@media screen and (max-width: 479px) {
    div[sn=C001]>section>ul[df=x3]>li {
        width: calc(100% - 2rem)
    }
}

div[sn=C001]>section>ul[df=x4]>li {
    width: calc(25% - 2rem)
}

@media screen and (max-width: 767px) {
    div[sn=C001]>section>ul[df=x4]>li {
        width: calc(50% - 2rem)
    }
}

@media screen and (max-width: 479px) {
    div[sn=C001]>section>ul[df=x4]>li {
        width: calc(100% - 2rem)
    }
}

@media screen and (max-width: 639px) {
    div[sn=C001]>section>ul[df=x5] {
        text-align: left
    }
}

div[sn=C001]>section>ul[df=x5]>li {
    width: calc(20% - 2rem)
}

@media screen and (max-width: 1023px) {
    div[sn=C001]>section>ul[df=x5]>li {
        width: calc(33.3333333333% - 2rem)
    }
}

@media screen and (max-width: 639px) {
    div[sn=C001]>section>ul[df=x5]>li {
        width: calc(50% - 2rem);
        text-align: center
    }
}

@media screen and (max-width: 413px) {
    div[sn=C001]>section>ul[df=x5]>li {
        width: calc(100% - 2rem)
    }
}

div[sn=C001]>section>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 1rem;
    padding-bottom: 2rem;
    width: calc(100% - 2rem);
    border-radius: var(--default-radius);
    border: .5px solid rgba(0, 0, 0, .1)
}

div[sn=C001]>section>ul>li>article>img {
    position: relative;
    margin-top: 2rem;
    width: 5rem;
    height: 5rem
}

div[sn=C001]>section>ul>li>article>i {
    position: relative;
    margin-top: 2rem;
    font-size: 3.5rem;
    font-weight: 600;
    width: 5rem;
    height: 5rem
}

div[sn=C001]>section>ul>li>article>h6 {
    position: relative;
    margin-top: 1rem;
    font-size: 1.25rem;
    font-weight: 600
}

@media screen and (max-width: 639px) {
    div[sn=C001]>section>ul>li>article>h6 {
        font-size: 1.25rem
    }
}

div[sn=C001]>section>ul>li>article>p {
    position: relative;
    margin-top: 1rem;
    padding: 0 2rem;
    line-height: 1.5rem;
    font-size: 1rem
}

div[sn=C001]>section>ul>li>article>a {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-top: 2rem
}

div[sn=C002] {
    position: relative;
    display: block;
    width: 100%;
    height: initial;
    background-color: #fff
}

div[sn=C002]::after {
    content: "C002";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

div[sn=C002]>section {
    position: relative;
    display: block;
    left: 50%;
    width: 100%;
    max-width: var(--max-width);
    height: initial;
    transform: translateX(-50%);
    padding: 5rem 0 4rem
}

div[sn=C002]>section>h6 {
    position: relative;
    padding: 0 1rem;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center
}

@media screen and (max-width: 639px) {
    div[sn=C002]>section>h6 {
        font-size: 1.25rem
    }
}

div[sn=C002]>section>p {
    position: relative;
    padding: 0 1rem;
    line-height: 2rem;
    font-size: .875rem;
    font-weight: 500;
    text-align: center
}

div[sn=C002]>section>ul {
    position: relative;
    display: block;
    margin-top: 4rem;
    text-align: center;
    font-size: 0
}

div[sn=C002]>section>ul[df=x2] {
    text-align: left
}

div[sn=C002]>section>ul[df=x2]>li {
    width: calc((100% - 4rem)/2)
}

@media screen and (max-width: 767px) {
    div[sn=C002]>section>ul[df=x2]>li {
        width: calc(100% - 2rem);
        text-align: center
    }
}

@media screen and (max-width: 767px) {
    div[sn=C002]>section>ul[df=x3] {
        text-align: left
    }
}

div[sn=C002]>section>ul[df=x3]>li {
    width: calc(33.3333333333% - 2rem)
}

@media screen and (max-width: 767px) {
    div[sn=C002]>section>ul[df=x3]>li {
        width: calc(50% - 2rem);
        text-align: center
    }
}

@media screen and (max-width: 639px) {
    div[sn=C002]>section>ul[df=x3]>li {
        width: calc(100% - 2rem)
    }

    div[sn=C002]>section>ul[df=x3]>li>div {
        padding-top: 56.25%
    }
}

@media screen and (max-width: 767px) {
    div[sn=C002]>section>ul[df=x4] {
        text-align: left
    }
}

@media screen and (max-width: 479px) {
    div[sn=C002]>section>ul[df=x4] {
        padding: 0 .5rem
    }
}

div[sn=C002]>section>ul[df=x4]>li {
    width: calc(25% - 2rem)
}

@media screen and (max-width: 767px) {
    div[sn=C002]>section>ul[df=x4]>li {
        width: calc(50% - 2rem);
        text-align: center
    }
}

@media screen and (max-width: 479px) {
    div[sn=C002]>section>ul[df=x4]>li {
        margin: .5rem;
        width: calc(50% - 1rem)
    }
}

@media screen and (max-width: 639px) {
    div[sn=C002]>section>ul[df=x5] {
        text-align: left
    }
}

@media screen and (max-width: 479px) {
    div[sn=C002]>section>ul[df=x5] {
        padding: 0 .5rem
    }
}

div[sn=C002]>section>ul[df=x5]>li {
    width: calc(20% - 2rem)
}

@media screen and (max-width: 959px) {
    div[sn=C002]>section>ul[df=x5]>li {
        width: calc(33.3333333333% - 2rem)
    }
}

@media screen and (max-width: 639px) {
    div[sn=C002]>section>ul[df=x5]>li {
        width: calc(50% - 2rem);
        text-align: center
    }
}

@media screen and (max-width: 479px) {
    div[sn=C002]>section>ul[df=x5]>li {
        margin: .5rem;
        width: calc(50% - 1rem)
    }
}

div[sn=C002]>section>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 1rem;
    padding-bottom: 1rem;
    border-radius: var(--default-radius);
    border: 1px solid rgba(0, 0, 0, .1);
    overflow: hidden
}

div[sn=C002]>section>ul>li>figure {
    position: relative;
    width: 100%
}

div[sn=C002]>section>ul>li>figure>div {
    position: relative;
    padding-top: 100%;
    width: 100%;
    border-top-left-radius: var(--default-radius);
    border-top-right-radius: var(--default-radius);
    overflow: hidden
}

div[sn=C002]>section>ul>li>figure>div>img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

div[sn=C002]>section>ul>li>figure>figcaption {
    position: relative;
    width: 100%
}

div[sn=C002]>section>ul>li>figure>figcaption>strong {
    position: relative;
    display: block;
    margin-top: 1rem;
    padding: 0 1rem;
    width: 100%;
    font-size: 1.25rem;
    font-weight: 500
}

div[sn=C002]>section>ul>li>figure>figcaption>em {
    position: relative;
    display: block;
    margin-top: .25rem;
    padding: 0 1rem;
    width: 100%;
    line-height: 1.125rem;
    font-size: .875rem;
    font-weight: 500;
    font-style: normal
}

div[sn=C003] {
    position: relative;
    display: block;
    width: 100%;
    height: initial;
    background-color: #fff
}

div[sn=C003]::after {
    content: "C003";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

div[sn=C003]>section {
    position: relative;
    display: block;
    left: 50%;
    width: 100%;
    max-width: var(--max-width);
    height: initial;
    transform: translateX(-50%);
    padding: 5rem 0 4rem
}

div[sn=C003]>section>h6 {
    position: relative;
    padding: 0 16px;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center
}

@media screen and (max-width: 639px) {
    div[sn=C003]>section>h6 {
        font-size: 1.25rem
    }
}

div[sn=C003]>section>p {
    position: relative;
    padding: 0 1rem;
    line-height: 2rem;
    font-size: .875rem;
    font-weight: 500;
    text-align: center
}

div[sn=C003]>section>ul {
    position: relative;
    display: block;
    font-size: 0;
    margin-top: 4rem;
    text-align: center
}

div[sn=C003]>section>ul[df=x2] {
    text-align: left
}

div[sn=C003]>section>ul[df=x2]>li {
    width: calc(50% - 2rem);
    text-align: center
}

div[sn=C003]>section>ul[df=x2]>li>div {
    padding-top: 56.25%
}

@media screen and (max-width: 767px) {
    div[sn=C003]>section>ul[df=x2]>li {
        width: calc(100% - 2rem)
    }
}

@media screen and (max-width: 767px) {
    div[sn=C003]>section>ul[df=x3] {
        text-align: left
    }
}

div[sn=C003]>section>ul[df=x3]>li {
    width: calc(33.3333333333% - 2rem)
}

@media screen and (max-width: 767px) {
    div[sn=C003]>section>ul[df=x3]>li {
        width: calc(50% - 2rem);
        text-align: center
    }
}

@media screen and (max-width: 479px) {
    div[sn=C003]>section>ul[df=x3]>li {
        margin-top: 3rem;
        width: calc(100% - 2rem)
    }

    div[sn=C003]>section>ul[df=x3]>li:nth-child(1) {
        margin-top: 0
    }
}

@media screen and (max-width: 767px) {
    div[sn=C003]>section>ul[df=x4] {
        text-align: left
    }
}

div[sn=C003]>section>ul[df=x4]>li {
    width: calc(25% - 2rem)
}

@media screen and (max-width: 767px) {
    div[sn=C003]>section>ul[df=x4]>li {
        width: calc(50% - 2rem);
        text-align: center
    }
}

@media screen and (max-width: 479px) {
    div[sn=C003]>section>ul[df=x4]>li {
        width: calc(100% - 2rem)
    }
}

@media screen and (max-width: 639px) {
    div[sn=C003]>section>ul[df=x5] {
        text-align: left
    }
}

div[sn=C003]>section>ul[df=x5]>li {
    width: calc(20% - 2rem)
}

@media screen and (max-width: 1023px) {
    div[sn=C003]>section>ul[df=x5]>li {
        width: calc(33.3333333333% - 2rem)
    }
}

@media screen and (max-width: 639px) {
    div[sn=C003]>section>ul[df=x5]>li {
        width: calc(50% - 2rem);
        text-align: center
    }
}

@media screen and (max-width: 479px) {
    div[sn=C003]>section>ul[df=x5]>li {
        width: calc(100% - 2rem)
    }
}

div[sn=C003]>section>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 1rem
}

div[sn=C003]>section>ul>li>article {
    position: relative;
    width: 100%;
    height: initial
}

div[sn=C003]>section>ul>li>article>h6 {
    position: relative;
    font-size: 1.25rem;
    font-weight: 500
}

div[sn=C003]>section>ul>li>article>ul {
    position: relative;
    margin-top: .5rem;
    width: initial;
    height: initial
}

div[sn=C003]>section>ul>li>article>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-left: .75rem;
    width: initial;
    height: initial;
    border-left: 1px solid var(--col-hint)
}

div[sn=C003]>section>ul>li>article>ul>li:nth-child(1) {
    margin-left: 0;
    border-left: none
}

div[sn=C003]>section>ul>li>article>ul>li>i {
    position: relative;
    line-height: 1.5rem;
    font-size: .75rem
}

div[sn=C003]>section>ul>li>article>ul>li>a {
    position: relative;
    margin-left: .75rem;
    line-height: 1.5rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--col-sys)
}

div[sn=C003]>section>ul>li>article>ul>li>p {
    position: relative;
    margin-left: .75rem;
    line-height: 1.5rem;
    font-size: .875rem;
    font-weight: 500
}

div[sn=C003]>section>ul>li>article>figure {
    position: relative;
    width: 100%;
    height: initial
}

div[sn=C003]>section>ul>li>article>figure>div {
    position: relative;
    margin-top: 1rem;
    padding-top: 75%;
    width: 100%;
    border-radius: var(--default-radius);
    overflow: hidden
}

div[sn=C003]>section>ul>li>article>figure>div>img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

div[sn=C003]>section>ul>li>article>figure>figcaption>p {
    position: relative;
    margin-top: 1rem;
    line-height: 1.5rem;
    font-size: 1rem;
    font-weight: 500
}

div[sn=C003]>section>ul>li>article>figure>figcaption>a {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-top: 1.5rem
}

div[sn=C004] {
    position: relative;
    display: block;
    width: 100%;
    height: initial;
    background-color: #fff
}

div[sn=C004]::after {
    content: "C004";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

div[sn=C004]>section {
    position: relative;
    display: block;
    left: 50%;
    width: 100%;
    max-width: var(--max-width);
    height: initial;
    transform: translateX(-50%);
    padding: 3rem 0
}

div[sn=C004]>section>ul {
    position: relative;
    display: block;
    font-size: 0;
    text-align: center
}

div[sn=C004]>section>ul[df=x2] {
    text-align: left
}

div[sn=C004]>section>ul[df=x2]>li {
    width: calc(50% - 2rem);
    text-align: center
}

@media screen and (max-width: 639px) {
    div[sn=C004]>section>ul[df=x2]>li {
        width: calc(100% - 2rem)
    }
}

@media screen and (max-width: 767px) {
    div[sn=C004]>section>ul[df=x3] {
        text-align: left
    }
}

div[sn=C004]>section>ul[df=x3]>li {
    width: calc(33.3333333333% - 2rem)
}

@media screen and (max-width: 767px) {
    div[sn=C004]>section>ul[df=x3]>li {
        width: calc(50% - 2rem);
        text-align: center
    }
}

@media screen and (max-width: 479px) {
    div[sn=C004]>section>ul[df=x3]>li {
        width: calc(100% - 2rem)
    }
}

@media screen and (max-width: 959px) {
    div[sn=C004]>section>ul[df=x4] {
        text-align: left
    }
}

div[sn=C004]>section>ul[df=x4]>li {
    width: calc(25% - 2rem)
}

@media screen and (max-width: 959px) {
    div[sn=C004]>section>ul[df=x4]>li {
        width: calc(50% - 2rem);
        text-align: center
    }
}

@media screen and (max-width: 413px) {
    div[sn=C004]>section>ul[df=x4]>li {
        width: calc(100% - 2rem)
    }
}

@media screen and (max-width: 639px) {
    div[sn=C004]>section>ul[df=x5] {
        text-align: left
    }
}

div[sn=C004]>section>ul[df=x5]>li {
    width: calc(20% - 2rem)
}

@media screen and (max-width: 959px) {
    div[sn=C004]>section>ul[df=x5]>li {
        width: calc(33.3333333333% - 2rem)
    }
}

@media screen and (max-width: 639px) {
    div[sn=C004]>section>ul[df=x5]>li {
        width: calc(50% - 2rem);
        text-align: center
    }
}

@media screen and (max-width: 413px) {
    div[sn=C004]>section>ul[df=x5]>li {
        width: calc(100% - 2rem)
    }
}

@media(hover: hover)and (pointer: fine) {
    div[sn=C004]>section>ul>li.unhover {
        animation: unshadow .5s;
        -webkit-animation: unshadow .5s
    }

    div[sn=C004]>section>ul>li:hover {
        -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .1), 0 0 16px rgba(0, 0, 0, .1);
        -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .1), 0 0 24px rgba(0, 0, 0, .1);
        box-shadow: 0 0 8px rgba(0, 0, 0, .1), 0 0 24px rgba(0, 0, 0, .1);
        animation: shadow .5s;
        -webkit-animation: shadow .5s
    }
}

div[sn=C004]>section>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 1rem;
    border-radius: var(--default-radius)
}

div[sn=C004]>section>ul>li>article {
    position: relative;
    display: block;
    padding: 1rem 0
}

div[sn=C004]>section>ul>li>article>a {
    position: relative;
    display: block
}

div[sn=C004]>section>ul>li>article>a>img {
    position: relative;
    width: 3rem;
    height: 3rem
}

div[sn=C004]>section>ul>li>article>a>i {
    position: relative;
    width: 3rem;
    height: 3rem;
    font-size: 1.75rem
}

div[sn=C004]>section>ul>li>article>a>h6 {
    position: relative;
    margin-top: .5rem;
    padding: 0 1rem;
    font-size: 1.25rem;
    font-weight: 500
}

div[sn=C004]>section>ul>li>article>a>p {
    position: relative;
    margin-top: 1rem;
    padding: 0 1rem;
    line-height: 1.5rem;
    font-size: 1rem;
    font-weight: 500
}

div[sn=C005] {
    position: relative;
    display: block;
    width: 100%;
    height: initial;
    background-color: #fff
}

div[sn=C005]::after {
    content: "C005";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

div[sn=C005]>section {
    position: relative;
    display: block;
    left: 50%;
    width: 100%;
    max-width: var(--max-width);
    height: initial;
    transform: translateX(-50%);
    padding: 5rem 0
}

div[sn=C005]>section>h6 {
    position: relative;
    padding: 0 1rem;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center
}

div[sn=C005]>section>hr {
    position: relative;
    margin-top: .5rem;
    margin-left: calc(50% - 30px);
    width: 60px;
    border: 2px solid var(--col-sys)
}

div[sn=C005]>section>div {
    position: relative;
    display: block;
    font-size: 0;
    margin-top: 5rem
}

div[sn=C005]>section>div>div {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0 1rem;
    width: calc(33.3333333333% - 2rem);
    height: initial
}

div[sn=C005]>section>div>div.x2>div {
    padding-top: 66%
}

div[sn=C005]>section>div>div>div,
div[sn=C005]>section>div>div>a {
    position: relative;
    display: block;
    margin-top: 2rem;
    padding-top: calc(132% + 2rem);
    width: 100%;
    border-radius: var(--default-radius);
    overflow: hidden
}

div[sn=C005]>section>div>div>div:nth-child(1),
div[sn=C005]>section>div>div>a:nth-child(1) {
    margin-top: 0
}

div[sn=C005]>section>div>div>div>img,
div[sn=C005]>section>div>div>a>img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

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

    div[sn=C005]>section>div>div>div,
    div[sn=C005]>section>div>div>a {
        padding-top: 100%
    }

    div[sn=C005]>section>div>div.x2>div {
        display: inline-block;
        vertical-align: top;
        margin-top: 0;
        padding-top: calc((100% - 2rem)/2);
        width: calc((100% - 2rem)/2)
    }

    div[sn=C005]>section>div>div.x2>div:nth-child(2) {
        margin-left: 2rem
    }

    div[sn=C005]>section>div>div:nth-child(1),
    div[sn=C005]>section>div>div:nth-child(2) {
        width: calc(50% - 2rem)
    }

    div[sn=C005]>section>div>div:nth-child(3) {
        margin-top: 2rem;
        width: calc(100% - 2rem)
    }
}

div[sn=C006] {
    position: relative;
    display: block;
    width: 100%;
    height: initial;
    background-color: #fff
}

div[sn=C006]::after {
    content: "C006";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

div[sn=C006]>section {
    position: relative;
    display: block;
    left: 50%;
    width: 100%;
    max-width: var(--max-width);
    height: initial;
    transform: translateX(-50%);
    padding: 5rem 0 4rem
}

div[sn=C006]>section>h6 {
    position: relative;
    padding: 0 1rem;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center
}

div[sn=C006]>section>hr {
    position: relative;
    margin-top: .5rem;
    margin-left: calc(50% - 30px);
    width: 60px;
    border: 2px solid var(--col-sys)
}

div[sn=C006]>section>ul {
    position: relative;
    display: block;
    font-size: 0;
    margin-top: 5rem
}

div[sn=C006]>section>ul[df=x2] {
    text-align: left
}

div[sn=C006]>section>ul[df=x2]>li {
    width: calc(50% - 2rem - 2px);
    text-align: center
}

@media screen and (max-width: 639px) {
    div[sn=C006]>section>ul[df=x2]>li {
        width: calc(100% - 2rem - 2px)
    }
}

@media screen and (max-width: 767px) {
    div[sn=C006]>section>ul[df=x3] {
        text-align: left
    }
}

div[sn=C006]>section>ul[df=x3]>li {
    width: calc(33.3333333333% - 2rem - 2px)
}

@media screen and (max-width: 767px) {
    div[sn=C006]>section>ul[df=x3]>li {
        width: calc(50% - 2rem - 2px);
        text-align: center
    }
}

@media screen and (max-width: 639px) {
    div[sn=C006]>section>ul[df=x3]>li {
        width: calc(100% - 2rem - 2px)
    }
}

@media screen and (max-width: 959px) {
    div[sn=C006]>section>ul[df=x4] {
        text-align: left
    }
}

div[sn=C006]>section>ul[df=x4]>li {
    width: calc(25% - 2rem - 2px)
}

@media screen and (max-width: 959px) {
    div[sn=C006]>section>ul[df=x4]>li {
        width: calc(50% - 2rem - 2px);
        text-align: center
    }
}

@media screen and (max-width: 639px) {
    div[sn=C006]>section>ul[df=x4]>li {
        width: calc(100% - 2rem - 2px)
    }
}

div[sn=C006]>section>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 1rem;
    height: initial;
    border: #ddd 1px solid;
    border-radius: .25rem
}

div[sn=C006]>section>ul>li.fc {
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .1), 0 0 16px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .1), 0 0 16px rgba(0, 0, 0, .1);
    box-shadow: 0 0 8px rgba(0, 0, 0, .1), 0 0 16px rgba(0, 0, 0, .1)
}

@media(hover: hover)and (pointer: fine) {
    div[sn=C006]>section>ul>li.fc.unhover {
        animation: none;
        -webkit-animation: none
    }

    div[sn=C006]>section>ul>li.fc:hover {
        animation: none;
        -webkit-animation: none
    }
}

div[sn=C006]>section>ul>li>p {
    position: relative;
    font-size: 1.25rem;
    color: #fff;
    text-align: center
}

div[sn=C006]>section>ul>li>p>strong {
    padding-top: 1rem;
    font-size: 3rem;
    font-weight: 900
}

div[sn=C006]>section>ul>li>p>em {
    font-size: 1rem;
    font-style: normal
}

div[sn=C006]>section>ul>li>p:nth-child(1) {
    padding: 1.5rem 0
}

div[sn=C006]>section>ul>li>p:nth-child(2) {
    padding: 1.5rem 0;
    background-color: #505050
}

div[sn=C006]>section>ul>li>ul {
    position: relative;
    padding: 1rem 0
}

div[sn=C006]>section>ul>li>ul>li {
    position: relative;
    line-height: 2.75rem;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    list-style: none
}

div[sn=C006]>section>ul>li>div {
    position: relative;
    padding: 1.5rem 0;
    width: 100%;
    text-align: center;
    border-top: #ddd 1px solid
}

div[sn=C006]>section>ul>li>div>p {
    position: relative;
    font-size: .875rem;
    font-weight: 500
}

div[sn=C006]>section>ul>li>div>a {
    position: relative;
    display: inline-block;
    margin-top: .75rem
}

div[sn=C007] {
    position: relative;
    display: block;
    width: 100%;
    height: initial;
    background-color: #fff
}

div[sn=C007]::after {
    content: "C007";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

div[sn=C007]>section {
    position: relative;
    display: block;
    left: 50%;
    width: 100%;
    max-width: var(--max-width);
    height: initial;
    transform: translateX(-50%);
    padding: 5rem 0 4rem
}

div[sn=C007]>section>h6 {
    position: relative;
    padding: 0 1rem;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center
}

div[sn=C007]>section>hr {
    position: relative;
    margin-top: .5rem;
    margin-left: calc(50% - 30px);
    width: 60px;
    border: 2px solid var(--col-sys)
}

div[sn=C007]>section>ul {
    position: relative;
    display: block;
    font-size: 0;
    margin-top: 4rem;
    text-align: center
}

div[sn=C007]>section>ul[df=x2] {
    text-align: left
}

div[sn=C007]>section>ul[df=x2]>li {
    width: calc(50% - 2rem)
}

div[sn=C007]>section>ul[df=x2]>li>div,
div[sn=C007]>section>ul[df=x2]>li>a {
    padding-top: 56.25%
}

@media screen and (max-width: 639px) {
    div[sn=C007]>section>ul[df=x2]>li {
        width: calc(100% - 2rem)
    }
}

@media screen and (max-width: 767px) {
    div[sn=C007]>section>ul[df=x3] {
        text-align: left
    }
}

div[sn=C007]>section>ul[df=x3]>li {
    width: calc(33.3333333333% - 2rem)
}

@media screen and (max-width: 767px) {
    div[sn=C007]>section>ul[df=x3]>li {
        width: calc(50% - 2rem)
    }
}

@media screen and (max-width: 479px) {
    div[sn=C007]>section>ul[df=x3]>li {
        width: calc(100% - 2rem)
    }

    div[sn=C007]>section>ul[df=x3]>li>div,
    div[sn=C007]>section>ul[df=x3]>li>a {
        padding-top: 56.25%
    }
}

@media screen and (max-width: 959px) {
    div[sn=C007]>section>ul[df=x4] {
        text-align: left
    }
}

div[sn=C007]>section>ul[df=x4]>li {
    width: calc(25% - 2rem)
}

@media screen and (max-width: 959px) {
    div[sn=C007]>section>ul[df=x4]>li {
        width: calc(50% - 2rem)
    }
}

@media screen and (max-width: 413px) {
    div[sn=C007]>section>ul[df=x4]>li {
        width: calc(100% - 2rem)
    }

    div[sn=C007]>section>ul[df=x4]>li>div,
    div[sn=C007]>section>ul[df=x4]>li>a {
        padding-top: 56.25%
    }
}

div[sn=C007]>section>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 1rem;
    height: initial
}

div[sn=C007]>section>ul>li>article {
    position: relative;
    display: block;
    width: 100%;
    height: initial
}

div[sn=C007]>section>ul>li>article>figure {
    position: relative;
    display: block;
    padding-top: 75%;
    width: 100%;
    border-radius: var(--default-radius);
    overflow: hidden
}

div[sn=C007]>section>ul>li>article>figure>img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

div[sn=C007]>section>ul>li>article>h4 {
    position: relative;
    margin-top: 1.5rem;
    width: 100%;
    font-size: 1.25rem;
    font-weight: 500;
    text-align: left
}

div[sn=C007]>section>ul>li>article>ul {
    position: relative;
    margin-top: .25rem;
    width: 100%;
    font-size: 0;
    text-align: left
}

div[sn=C007]>section>ul>li>article>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    font-size: 0;
    padding-right: .5rem;
    height: 1rem;
    margin-left: .25rem
}

div[sn=C007]>section>ul>li>article>ul>li::before {
    content: "";
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-right: .5rem;
    width: 1px;
    height: 100%;
    background-color: #505050
}

div[sn=C007]>section>ul>li>article>ul>li:nth-child(1) {
    margin-left: 0
}

div[sn=C007]>section>ul>li>article>ul>li:nth-child(1)::before {
    content: "";
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-right: 0;
    width: 0
}

div[sn=C007]>section>ul>li>article>ul>li>i {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-right: .25rem;
    line-height: 1rem;
    font-size: .875rem
}

div[sn=C007]>section>ul>li>article>ul>li>img {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 1rem;
    height: 1rem
}

div[sn=C007]>section>ul>li>article>ul>li>p {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-left: .125rem;
    line-height: 1rem;
    height: 1rem;
    font-size: .875rem;
    font-weight: 500
}

div[sn=C007]>section>ul>li>article>ul>li>p>a {
    color: var(--col-sys)
}

div[sn=C007]>section>ul>li>article>p {
    position: relative;
    margin-top: 1rem;
    width: 100%;
    line-height: 1.5rem;
    font-size: 1rem;
    text-align: left
}

div[sn=C008] {
    position: relative;
    display: block;
    width: 100%;
    height: initial;
    background-color: #fff
}

div[sn=C008]::after {
    content: "C008";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

div[sn=C008]>section {
    position: relative;
    display: block;
    margin-left: 50%;
    padding: 5rem 0 4rem;
    width: 100%;
    max-width: var(--max-width);
    height: initial;
    transform: translateX(-50%)
}

div[sn=C008]>section>ul {
    position: relative;
    display: block;
    font-size: 0;
    text-align: center
}

div[sn=C008]>section>ul[df=x2]>li {
    width: calc(50% - 2rem)
}

div[sn=C008]>section>ul[df=x2]>li:nth-child(1),
div[sn=C008]>section>ul[df=x2]>li:nth-child(2) {
    margin: 1rem
}

@media screen and (max-width: 1023px) {
    div[sn=C008]>section>ul[df=x2]>li {
        width: calc(50% - 2rem)
    }
}

@media screen and (max-width: 639px) {
    div[sn=C008]>section>ul[df=x2]>li {
        width: calc(50% - 2rem)
    }
}

@media screen and (max-width: 479px) {
    div[sn=C008]>section>ul[df=x2]>li {
        width: calc(100% - 2rem)
    }

    div[sn=C008]>section>ul[df=x2]>li:nth-child(2) {
        margin: 4rem 1rem 0
    }
}

div[sn=C008]>section>ul[df=x3]>li {
    width: calc(33.3333333333% - 2rem)
}

div[sn=C008]>section>ul[df=x3]>li:nth-child(1),
div[sn=C008]>section>ul[df=x3]>li:nth-child(2),
div[sn=C008]>section>ul[df=x3]>li:nth-child(3) {
    margin: 1rem
}

@media screen and (max-width: 1023px) {
    div[sn=C008]>section>ul[df=x3]>li {
        width: calc(33.3333333333% - 2rem)
    }
}

@media screen and (max-width: 639px) {
    div[sn=C008]>section>ul[df=x3]>li {
        width: calc(50% - 2rem)
    }

    div[sn=C008]>section>ul[df=x3]>li:nth-child(3) {
        margin: 4rem 1rem 0
    }
}

@media screen and (max-width: 479px) {
    div[sn=C008]>section>ul[df=x3]>li {
        margin: 4rem 1rem 0;
        width: calc(100% - 2rem)
    }

    div[sn=C008]>section>ul[df=x3]>li:nth-child(1) {
        margin: 0 1rem
    }
}

div[sn=C008]>section>ul[df=x4]>li {
    width: calc(25% - 2rem)
}

div[sn=C008]>section>ul[df=x4]>li:nth-child(1),
div[sn=C008]>section>ul[df=x4]>li:nth-child(2),
div[sn=C008]>section>ul[df=x4]>li:nth-child(3),
div[sn=C008]>section>ul[df=x4]>li:nth-child(4) {
    margin: 1rem
}

@media screen and (max-width: 1023px) {
    div[sn=C008]>section>ul[df=x4]>li {
        width: calc(33.3333333333% - 2rem)
    }

    div[sn=C008]>section>ul[df=x4]>li:nth-child(4) {
        margin: 1rem 1rem 0
    }
}

@media screen and (max-width: 639px) {
    div[sn=C008]>section>ul[df=x4]>li {
        width: calc(50% - 2rem)
    }

    div[sn=C008]>section>ul[df=x4]>li:nth-child(3) {
        margin: 1rem 1rem 0
    }
}

@media screen and (max-width: 479px) {
    div[sn=C008]>section>ul[df=x4]>li {
        width: calc(100% - 2rem)
    }

    div[sn=C008]>section>ul[df=x4]>li:nth-child(2) {
        margin: 1rem 1rem 0
    }
}

div[sn=C008]>section>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 1rem
}

div[sn=C008]>section>ul>li>figure {
    position: relative;
    width: initial;
    height: initial
}

div[sn=C008]>section>ul>li>figure>div,
div[sn=C008]>section>ul>li>figure>a {
    position: relative;
    padding-top: 75%;
    width: 100%;
    border-radius: var(--default-radius);
    overflow: hidden
}

div[sn=C008]>section>ul>li>figure>div>img,
div[sn=C008]>section>ul>li>figure>a>img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

div[sn=C008]>section>ul>li>figure>figcaption>h6 {
    position: relative;
    margin-top: 2rem;
    font-size: 1.125rem;
    font-weight: 600;
    text-align: left
}

div[sn=C008]>section>ul>li>figure>figcaption>p {
    position: relative;
    margin-top: .75rem;
    line-height: 1.5rem;
    font-size: 1rem;
    font-weight: 400;
    text-align: left
}

div[sn=C009] {
    position: relative;
    display: block;
    width: 100%;
    height: initial;
    background-color: #fff
}

div[sn=C009]::after {
    content: "C009";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

div[sn=C009]>section {
    position: relative;
    display: block;
    left: 50%;
    width: 100%;
    max-width: var(--max-width);
    height: initial;
    transform: translateX(-50%);
    padding: 5rem 0
}

div[sn=C009]>section>p {
    position: relative;
    padding: 0 1rem;
    font-size: .75rem;
    text-align: center
}

div[sn=C009]>section>h6 {
    position: relative;
    margin-top: .25rem;
    padding: 0 16px;
    font-size: 1.5rem;
    font-weight: 400;
    text-align: center
}

div[sn=C009]>section>ul {
    position: relative;
    display: block;
    font-size: 0;
    margin-top: 2rem;
    text-align: center
}

div[sn=C009]>section>ul[df=x2]>li {
    width: calc(50% - 2rem)
}

@media screen and (max-width: 1023px) {
    div[sn=C009]>section>ul[df=x2]>li {
        width: calc(50% - 2rem)
    }
}

@media screen and (max-width: 767px) {
    div[sn=C009]>section>ul[df=x2]>li {
        width: calc(50% - 2rem)
    }
}

@media screen and (max-width: 479px) {
    div[sn=C009]>section>ul[df=x2]>li {
        width: calc(100% - 2rem)
    }
}

div[sn=C009]>section>ul[df=x3]>li {
    width: calc(33.3333333333% - 2rem)
}

@media screen and (max-width: 1023px) {
    div[sn=C009]>section>ul[df=x3]>li {
        width: calc(33.3333333333% - 2rem)
    }
}

@media screen and (max-width: 767px) {
    div[sn=C009]>section>ul[df=x3]>li {
        width: calc(50% - 2rem)
    }
}

@media screen and (max-width: 479px) {
    div[sn=C009]>section>ul[df=x3]>li {
        width: calc(100% - 2rem)
    }
}

div[sn=C009]>section>ul[df=x4]>li {
    width: calc(25% - 2rem)
}

@media screen and (max-width: 1023px) {
    div[sn=C009]>section>ul[df=x4]>li {
        width: calc(25% - 2rem)
    }
}

@media screen and (max-width: 767px) {
    div[sn=C009]>section>ul[df=x4]>li {
        width: calc(50% - 2rem)
    }
}

@media screen and (max-width: 479px) {
    div[sn=C009]>section>ul[df=x4]>li {
        width: calc(100% - 2rem)
    }
}

div[sn=C009]>section>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 1rem;
    border-radius: var(--default-radius)
}

div[sn=C009]>section>ul>li>i,
div[sn=C009]>section>ul>li>img {
    position: relative;
    display: inline-block;
    width: 8rem;
    line-height: 8rem;
    height: 8rem;
    font-size: 4rem;
    color: var(--col-sys-light);
    border-radius: 50%;
    object-fit: cover;
    overflow: hidden
}

div[sn=C009]>section>ul>li>h6 {
    position: relative;
    margin-top: 1rem;
    font-size: 1.5rem;
    font-weight: 400
}

div[sn=C009]>section>ul>li>p {
    position: relative;
    margin-top: 1rem;
    line-height: 1.5rem;
    font-size: 1rem;
    font-weight: 400
}

div[sn=C009]>section>ul>li>a {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-top: 2rem
}

div[sn=C010] {
    position: relative;
    display: block;
    width: 100%;
    height: initial;
    background-color: #fff
}

div[sn=C010]::after {
    content: "C010";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

div[sn=C010]>section {
    position: relative;
    display: block;
    left: 50%;
    width: 100%;
    max-width: var(--max-width);
    height: initial;
    transform: translateX(-50%);
    padding: 5rem 0 4rem
}

div[sn=C010]>section>p {
    position: relative;
    padding: 0 1rem;
    font-size: .75rem;
    text-align: center;
    color: #fff
}

div[sn=C010]>section>h6 {
    position: relative;
    margin-top: .25rem;
    padding: 0 16px;
    font-size: 1.5rem;
    font-weight: 400;
    text-align: center;
    color: #fff
}

div[sn=C010]>section>ul {
    position: relative;
    display: block;
    font-size: 0;
    margin-top: 2rem;
    text-align: center
}

div[sn=C010]>section>ul[df=x2]>li {
    width: calc(50% - 2rem)
}

@media screen and (max-width: 1023px) {
    div[sn=C010]>section>ul[df=x2]>li {
        width: calc(50% - 2rem)
    }
}

@media screen and (max-width: 767px) {
    div[sn=C010]>section>ul[df=x2]>li {
        width: calc(50% - 2rem)
    }
}

@media screen and (max-width: 479px) {
    div[sn=C010]>section>ul[df=x2]>li {
        width: calc(100% - 2rem)
    }
}

div[sn=C010]>section>ul[df=x3]>li {
    width: calc(33.3333333333% - 2rem)
}

@media screen and (max-width: 1023px) {
    div[sn=C010]>section>ul[df=x3]>li {
        width: calc(33.3333333333% - 2rem)
    }
}

@media screen and (max-width: 767px) {
    div[sn=C010]>section>ul[df=x3]>li {
        width: calc(50% - 2rem)
    }
}

@media screen and (max-width: 479px) {
    div[sn=C010]>section>ul[df=x3]>li {
        width: calc(100% - 2rem)
    }
}

div[sn=C010]>section>ul[df=x4]>li {
    width: calc(25% - 2rem)
}

@media screen and (max-width: 1023px) {
    div[sn=C010]>section>ul[df=x4]>li {
        width: calc(25% - 2rem)
    }
}

@media screen and (max-width: 767px) {
    div[sn=C010]>section>ul[df=x4]>li {
        width: calc(50% - 2rem)
    }
}

@media screen and (max-width: 479px) {
    div[sn=C010]>section>ul[df=x4]>li {
        width: calc(100% - 2rem)
    }
}

div[sn=C010]>section>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 2rem 1rem 1rem;
    height: initial;
    text-align: center
}

div[sn=C010]>section>ul>li>div,
div[sn=C010]>section>ul>li>a {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden
}

div[sn=C010]>section>ul>li>div>img,
div[sn=C010]>section>ul>li>a>img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

div[sn=C010]>section>ul>li>h6 {
    position: relative;
    margin-top: calc((100px - 3.25rem)/2);
    line-height: 2rem;
    font-size: 1.5rem;
    font-weight: 400;
    color: #fff
}

div[sn=C010]>section>ul>li>i {
    position: relative;
    display: block;
    line-height: 1.25rem;
    font-size: .75rem;
    font-weight: 400;
    font-style: normal;
    color: #fff
}

div[sn=C010]>section>ul>li>p {
    margin-top: 1.5rem;
    padding: 1rem 1.5rem;
    line-height: 1.5rem;
    font-size: .875rem;
    font-weight: 400;
    background-color: #fff;
    border-radius: var(--default-radius)
}

div[sn=C011] {
    position: relative;
    display: block;
    width: 100%;
    height: initial;
    background-color: #fff
}

div[sn=C011]::after {
    content: "C011";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

div[sn=C011]>section {
    position: relative;
    display: block;
    left: 50%;
    width: 100%;
    max-width: var(--max-width);
    height: initial;
    transform: translateX(-50%);
    padding: 5rem 0;
    position: relative;
    display: block;
    width: 100%;
    height: initial
}

div[sn=C011]>section>p {
    position: relative;
    padding: 0 1rem;
    font-size: .75rem;
    text-align: center
}

div[sn=C011]>section>h6 {
    position: relative;
    margin-top: .25rem;
    padding: 0 16px;
    font-size: 1.5rem;
    font-weight: 400;
    text-align: center
}

div[sn=C011]>section>ul {
    position: relative;
    display: block;
    font-size: 0;
    margin-top: 3rem;
    text-align: center
}

div[sn=C011]>section>ul[df=x2]>li {
    width: calc(50% - 2rem)
}

div[sn=C011]>section>ul[df=x2]>li:nth-child(3)::after,
div[sn=C011]>section>ul[df=x2]>li:nth-child(5)::after,
div[sn=C011]>section>ul[df=x2]>li:nth-child(7)::after,
div[sn=C011]>section>ul[df=x2]>li:nth-child(9)::after {
    display: none
}

@media screen and (max-width: 1023px) {
    div[sn=C011]>section>ul[df=x2]>li {
        width: calc(50% - 2rem)
    }

    div[sn=C011]>section>ul[df=x2]>li:nth-child(3)::after,
    div[sn=C011]>section>ul[df=x2]>li:nth-child(5)::after,
    div[sn=C011]>section>ul[df=x2]>li:nth-child(7)::after,
    div[sn=C011]>section>ul[df=x2]>li:nth-child(9)::after {
        display: none
    }
}

@media screen and (max-width: 767px) {
    div[sn=C011]>section>ul[df=x2]>li {
        width: calc(50% - 2rem)
    }

    div[sn=C011]>section>ul[df=x2]>li:nth-child(3)::after,
    div[sn=C011]>section>ul[df=x2]>li:nth-child(5)::after,
    div[sn=C011]>section>ul[df=x2]>li:nth-child(7)::after,
    div[sn=C011]>section>ul[df=x2]>li:nth-child(9)::after {
        display: none
    }
}

@media screen and (max-width: 479px) {
    div[sn=C011]>section>ul[df=x2]>li {
        width: calc(100% - 2rem)
    }

    div[sn=C011]>section>ul[df=x2]>li::after {
        display: none
    }
}

div[sn=C011]>section>ul[df=x3]>li {
    width: calc(33.3333333333% - 2rem)
}

div[sn=C011]>section>ul[df=x3]>li:nth-child(4)::after,
div[sn=C011]>section>ul[df=x3]>li:nth-child(7)::after {
    display: none
}

@media screen and (max-width: 1023px) {
    div[sn=C011]>section>ul[df=x3]>li {
        width: calc(33.3333333333% - 2rem)
    }

    div[sn=C011]>section>ul[df=x3]>li:nth-child(4)::after,
    div[sn=C011]>section>ul[df=x3]>li:nth-child(7)::after {
        display: none
    }
}

@media screen and (max-width: 767px) {
    div[sn=C011]>section>ul[df=x3]>li {
        width: calc(50% - 2rem)
    }

    div[sn=C011]>section>ul[df=x3]>li:nth-child(4)::after {
        display: block
    }

    div[sn=C011]>section>ul[df=x3]>li:nth-child(3)::after,
    div[sn=C011]>section>ul[df=x3]>li:nth-child(5)::after,
    div[sn=C011]>section>ul[df=x3]>li:nth-child(7)::after,
    div[sn=C011]>section>ul[df=x3]>li:nth-child(9)::after {
        display: none
    }
}

@media screen and (max-width: 479px) {
    div[sn=C011]>section>ul[df=x3]>li {
        width: calc(100% - 2rem)
    }
}

div[sn=C011]>section>ul[df=x4]>li {
    width: calc(25% - 2rem)
}

div[sn=C011]>section>ul[df=x4]>li:nth-child(5)::after,
div[sn=C011]>section>ul[df=x4]>li:nth-child(9)::after {
    display: none
}

@media screen and (max-width: 1023px) {
    div[sn=C011]>section>ul[df=x4]>li {
        width: calc(25% - 2rem)
    }

    div[sn=C011]>section>ul[df=x4]>li:nth-child(5)::after,
    div[sn=C011]>section>ul[df=x4]>li:nth-child(9)::after {
        display: none
    }
}

@media screen and (max-width: 767px) {
    div[sn=C011]>section>ul[df=x4]>li {
        width: calc(50% - 2rem)
    }

    div[sn=C011]>section>ul[df=x4]>li:nth-child(3)::after,
    div[sn=C011]>section>ul[df=x4]>li:nth-child(7)::after {
        display: block
    }

    div[sn=C011]>section>ul[df=x4]>li:nth-child(5)::after,
    div[sn=C011]>section>ul[df=x4]>li:nth-child(9)::after {
        display: none
    }
}

@media screen and (max-width: 479px) {
    div[sn=C011]>section>ul[df=x4]>li {
        width: calc(100% - 2rem)
    }
}

div[sn=C011]>section>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 1rem;
    border-radius: var(--default-radius)
}

div[sn=C011]>section>ul>li::after {
    content: "";
    position: absolute;
    top: 1rem;
    left: -1rem;
    width: 1px;
    height: calc(100% - 2rem);
    background-color: var(--col-hint)
}

div[sn=C011]>section>ul>li:nth-child(1)::after {
    display: none
}

div[sn=C011]>section>ul>li>i,
div[sn=C011]>section>ul>li>img {
    position: relative;
    display: inline-block;
    width: 8rem;
    line-height: 8rem;
    height: 8rem;
    font-size: 4rem;
    color: #999;
    border-radius: 50%;
    object-fit: cover;
    overflow: hidden
}

div[sn=C011]>section>ul>li>h6 {
    position: relative;
    margin-top: -0.5rem;
    font-size: 3rem;
    font-weight: 600;
    color: var(--col-sys)
}

div[sn=C011]>section>ul>li>p {
    position: relative;
    margin-top: .5rem;
    padding: 0 1rem;
    line-height: 1.5rem;
    font-size: 1rem;
    font-weight: 400
}

div[sn=C012] {
    position: relative;
    display: block;
    width: 100%;
    height: initial;
    background-color: #fff
}

div[sn=C012]::after {
    content: "C012";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

div[sn=C012]>section {
    position: relative;
    display: block;
    left: 50%;
    width: 100%;
    max-width: var(--max-width);
    height: initial;
    transform: translateX(-50%);
    padding: 5rem 0
}

div[sn=C012]>section>p {
    position: relative;
    padding: 0 1rem;
    font-size: .75rem;
    text-align: center
}

div[sn=C012]>section>h6 {
    position: relative;
    margin-top: .25rem;
    padding: 0 16px;
    font-size: 1.5rem;
    font-weight: 400;
    text-align: center
}

div[sn=C012]>section>ul {
    position: relative;
    display: block;
    font-size: 0;
    margin-top: 4rem
}

div[sn=C012]>section>ul[df=x2]>li {
    width: calc(50% - 2rem)
}

@media screen and (max-width: 1023px) {
    div[sn=C012]>section>ul[df=x2]>li {
        width: calc(50% - 2rem)
    }
}

@media screen and (max-width: 639px) {
    div[sn=C012]>section>ul[df=x2]>li {
        width: calc(100% - 2rem)
    }
}

div[sn=C012]>section>ul[df=x3]>li {
    width: calc(33.3333333333% - 2rem)
}

@media screen and (max-width: 1023px) {
    div[sn=C012]>section>ul[df=x3]>li {
        width: calc(50% - 2rem)
    }
}

@media screen and (max-width: 639px) {
    div[sn=C012]>section>ul[df=x3]>li {
        width: calc(100% - 2rem)
    }
}

div[sn=C012]>section>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 1rem;
    height: initial;
    text-align: center
}

div[sn=C012]>section>ul>li>time {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 60px;
    background-color: #f0f0f0
}

div[sn=C012]>section>ul>li>time>strong {
    position: relative;
    display: block;
    padding: .5rem 0;
    width: 60px;
    font-size: 1.25rem
}

div[sn=C012]>section>ul>li>time>em {
    position: relative;
    display: block;
    padding: .25rem 0;
    width: 60px;
    font-size: 1rem;
    font-style: normal;
    border-top: 1px solid #d2d2d2
}

div[sn=C012]>section>ul>li>div {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-left: 1.5rem;
    width: calc(100% - 60px - 1.5rem);
    text-align: left
}

div[sn=C012]>section>ul>li>div>ul {
    position: relative;
    width: 100%;
    font-size: 0;
    text-align: left
}

div[sn=C012]>section>ul>li>div>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    font-size: 0;
    padding-right: .5rem;
    height: 1rem;
    margin-left: .25rem
}

div[sn=C012]>section>ul>li>div>ul>li::before {
    content: "";
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-right: .5rem;
    width: 1px;
    height: 100%;
    background-color: #505050
}

div[sn=C012]>section>ul>li>div>ul>li:nth-child(1) {
    margin-left: 0
}

div[sn=C012]>section>ul>li>div>ul>li:nth-child(1)::before {
    content: "";
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-right: 0;
    width: 0
}

div[sn=C012]>section>ul>li>div>ul>li>i {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-right: .25rem;
    line-height: 1rem;
    font-size: .875rem;
    text-align: center
}

div[sn=C012]>section>ul>li>div>ul>li>img {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 1rem;
    height: 1rem
}

div[sn=C012]>section>ul>li>div>ul>li>p {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-left: .125rem;
    line-height: 1rem;
    height: 1rem;
    font-size: .875rem;
    font-weight: 500
}

div[sn=C012]>section>ul>li>div>ul>li>p>a {
    color: var(--col-sys)
}

div[sn=C012]>section>ul>li>div>h6 {
    position: relative;
    margin-top: .5rem;
    width: 100%;
    font-size: 1.125rem;
    font-weight: 500
}

div[sn=C012]>section>ul>li>div>p {
    position: relative;
    margin-top: 1rem;
    width: 100%;
    line-height: 1.5rem;
    font-size: 1rem
}

div[sn=C012]>section>ul>li>div>a {
    position: relative;
    display: block;
    margin-top: 2rem;
    width: 100%;
    font-size: 1rem;
    font-weight: 500;
    color: var(--col-sys)
}

div[sn=C012]>section>a {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-top: 2rem;
    margin-left: 50%;
    transform: translateX(-50%)
}

div[sn=C013] {
    position: relative;
    display: block;
    width: 100%;
    height: initial;
    background-color: #fff
}

div[sn=C013]::after {
    content: "C013";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

div[sn=C013]>section {
    position: relative;
    display: block;
    left: 50%;
    width: 100%;
    max-width: var(--max-width);
    height: initial;
    transform: translateX(-50%);
    padding: 5rem 0
}

div[sn=C013]>section>div {
    position: relative;
    display: block;
    width: 100%;
    height: initial;
    margin: 0 1rem;
    padding: 3rem;
    width: calc(100% - 2rem);
    background-color: #fff;
    border-radius: var(--default-radius)
}

@media screen and (max-width: 959px) {
    div[sn=C013]>section>div {
        padding: 3rem 2rem
    }
}

@media screen and (max-width: 479px) {
    div[sn=C013]>section>div {
        padding: 3rem 1rem
    }
}

div[sn=C013]>section>div>h6 {
    position: relative;
    padding: 0 16px;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center
}

@media screen and (max-width: 639px) {
    div[sn=C013]>section>div>h6 {
        font-size: 1.25rem
    }
}

div[sn=C013]>section>div>p {
    position: relative;
    padding: 0 1rem;
    line-height: 2rem;
    font-size: .875rem;
    font-weight: 500;
    text-align: center
}

div[sn=C013]>section>div>div {
    position: relative;
    display: block;
    font-size: 0;
    margin-top: 4rem
}

div[sn=C013]>section>div>div>div {
    position: relative;
    display: inline-block;
    vertical-align: top
}

div[sn=C013]>section>div>div>div:nth-child(1) {
    width: calc(100% - 480px)
}

div[sn=C013]>section>div>div>div:nth-child(2) {
    width: 480px;
    height: 270px
}

@media screen and (max-width: 1024px) {
    div[sn=C013]>section>div>div>div:nth-child(1) {
        width: calc(100% - 400px)
    }

    div[sn=C013]>section>div>div>div:nth-child(2) {
        width: 400px;
        height: 225px
    }
}

@media screen and (max-width: 899px) {
    div[sn=C013]>section>div>div>div:nth-child(1) {
        width: 100%
    }

    div[sn=C013]>section>div>div>div:nth-child(2) {
        margin-top: 3rem;
        margin-left: calc((100% - 480px)/2);
        width: 480px;
        height: 270px
    }
}

@media screen and (max-width: 639px) {
    div[sn=C013]>section>div>div>div:nth-child(2) {
        margin-left: calc((100% - 400px)/2);
        width: 400px;
        height: 225px
    }
}

@media screen and (max-width: 479px) {
    div[sn=C013]>section>div>div>div:nth-child(2) {
        margin-left: calc((100% - 320px)/2);
        width: 320px;
        height: 180px
    }
}

div[sn=C013]>section>div>div>div>ul {
    position: relative;
    display: block;
    width: calc(100% - 1rem)
}

div[sn=C013]>section>div>div>div>ul>li {
    position: relative;
    margin-top: 2rem
}

div[sn=C013]>section>div>div>div>ul>li:nth-child(1) {
    margin-top: 0
}

div[sn=C013]>section>div>div>div>ul>li>a>i {
    position: relative;
    display: inline-block;
    width: calc(80px - 1rem);
    line-height: calc(80px - 1rem);
    height: calc(80px - 1rem);
    border-radius: 50%;
    font-size: 1.5rem;
    text-align: center;
    background-color: var(--col-sys-hint);
    color: var(--col-sys)
}

div[sn=C013]>section>div>div>div>ul>li>a>i:hover {
    background-color: var(--col-sys);
    color: #fff
}

@media screen and (max-width: 479px) {
    div[sn=C013]>section>div>div>div>ul>li>a>i {
        width: calc(60px - 1rem);
        line-height: calc(60px - 1rem);
        height: calc(60px - 1rem);
        font-size: 1rem
    }
}

div[sn=C013]>section>div>div>div>ul>li>a>img {
    position: relative;
    display: inline-block;
    width: calc(80px - 1rem);
    height: calc(80px - 1rem);
    border-radius: 50%
}

div[sn=C013]>section>div>div>div>ul>li>div {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-left: 1.5rem;
    width: calc(100% - 80px - 1.5rem)
}

div[sn=C013]>section>div>div>div>ul>li>div>h6 {
    position: relative;
    font-size: 1.25rem;
    font-weight: 600
}

div[sn=C013]>section>div>div>div>ul>li>div>p {
    position: relative;
    margin-top: .5rem;
    line-height: 1.5rem;
    font-size: 1rem;
    font-weight: 400
}

@media screen and (max-width: 479px) {
    div[sn=C013]>section>div>div>div>ul>li>div {
        width: calc(100% - 60px - 1.5rem)
    }
}

div[sn=C013]>section>div>div>div>img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .5rem;
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    border-radius: var(--default-radius);
    object-fit: cover
}

div[sn=C014] {
    position: relative;
    display: block;
    width: 100%;
    height: initial;
    background-color: #fff
}

div[sn=C014]::after {
    content: "C014";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

div[sn=C014]>section {
    position: relative;
    display: block;
    left: 50%;
    width: 100%;
    max-width: var(--max-width);
    height: initial;
    transform: translateX(-50%);
    padding: 5rem 0 4rem
}

div[sn=C014]>section>h6 {
    position: relative;
    padding: 0 16px;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    color: #fff
}

@media screen and (max-width: 639px) {
    div[sn=C014]>section>h6 {
        font-size: 1.25rem
    }
}

div[sn=C014]>section>p {
    position: relative;
    padding: 0 1rem;
    line-height: 2rem;
    font-size: .875rem;
    font-weight: 500;
    text-align: center;
    color: #fff
}

div[sn=C014]>section>ul {
    position: relative;
    display: block;
    font-size: 0;
    margin-top: 4rem
}

@media screen and (max-width: 767px) {
    div[sn=C014]>section>ul[df=x2] {
        text-align: left
    }
}

div[sn=C014]>section>ul[df=x2]>li {
    width: calc(50% - 2rem)
}

@media screen and (max-width: 767px) {
    div[sn=C014]>section>ul[df=x2]>li {
        width: calc(100% - 2rem)
    }
}

@media screen and (max-width: 767px) {
    div[sn=C014]>section>ul[df=x3] {
        text-align: left
    }
}

div[sn=C014]>section>ul[df=x3]>li {
    width: calc(33.3333333333% - 2rem)
}

@media screen and (max-width: 767px) {
    div[sn=C014]>section>ul[df=x3]>li {
        width: calc(50% - 2rem)
    }
}

@media screen and (max-width: 639px) {
    div[sn=C014]>section>ul[df=x3]>li {
        width: calc(100% - 2rem)
    }
}

div[sn=C014]>section>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 1rem;
    height: initial
}

div[sn=C014]>section>ul>li>figure {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-left: 50%;
    margin-right: -50%;
    transform: translateX(-50%);
    max-width: 100%;
    height: 100px
}

div[sn=C014]>section>ul>li>figure>div,
div[sn=C014]>section>ul>li>figure>a {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden
}

div[sn=C014]>section>ul>li>figure>div>img,
div[sn=C014]>section>ul>li>figure>a>img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%
}

div[sn=C014]>section>ul>li>figure>figcaption {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-left: 1rem;
    margin-top: 50px;
    max-width: calc(100% - 116px);
    transform: translateY(-50%)
}

div[sn=C014]>section>ul>li>figure>figcaption>h6 {
    line-height: 1.75rem;
    font-size: 1.25rem;
    font-weight: 500;
    color: #fff
}

div[sn=C014]>section>ul>li>figure>figcaption>em {
    line-height: 1rem;
    font-size: .875rem;
    font-weight: 500;
    font-style: normal;
    color: #fff
}

div[sn=C014]>section>ul>li>p {
    margin-top: 1.5rem;
    padding: 1.25rem 2.25rem;
    line-height: 1.25rem;
    font-size: 1rem;
    font-weight: 500;
    background-color: #fff;
    border-radius: var(--default-radius)
}

div[sn=C015] {
    position: relative;
    display: block;
    width: 100%;
    height: initial;
    background-color: #fff
}

div[sn=C015]::after {
    content: "C015";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

div[sn=C015]>section {
    position: relative;
    display: block;
    left: 50%;
    width: 100%;
    max-width: var(--max-width);
    height: initial;
    transform: translateX(-50%);
    padding: 5rem 0 4rem
}

div[sn=C015]>section>h6 {
    position: relative;
    padding: 0 1rem;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    color: #fff
}

div[sn=C015]>section>hr {
    position: relative;
    margin-top: .5rem;
    margin-left: calc(50% - 30px);
    width: 60px;
    border: 2px solid var(--col-sys)
}

div[sn=C015]>section>div {
    position: relative;
    margin-top: 5rem;
    font-size: 0
}

div[sn=C015]>section>div>div {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0 1rem;
    height: initial
}

div[sn=C015]>section>div>div:nth-child(1) {
    width: calc(100% - 2rem - 360px)
}

@media screen and (max-width: 767px) {
    div[sn=C015]>section>div>div:nth-child(1) {
        width: calc(50% - 2rem)
    }
}

@media screen and (max-width: 639px) {
    div[sn=C015]>section>div>div:nth-child(1) {
        width: calc(100% - 2rem)
    }
}

div[sn=C015]>section>div>div:nth-child(2) {
    width: calc(360px - 2rem)
}

@media screen and (max-width: 767px) {
    div[sn=C015]>section>div>div:nth-child(2) {
        width: calc(50% - 2rem)
    }
}

@media screen and (max-width: 639px) {
    div[sn=C015]>section>div>div:nth-child(2) {
        margin-top: 2rem;
        width: calc(100% - 2rem)
    }
}

div[sn=C015]>section>div>div>p {
    position: relative;
    margin-top: 1rem;
    line-height: 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #fff
}

div[sn=C015]>section>div>div>p>strong {
    color: #fff;
    font-size: 1rem;
    font-weight: 600
}

div[sn=C015]>section>div>div>p:nth-child(1) {
    margin-top: 0;
    font-size: 1rem
}

div[sn=C015]>section>div>div>div {
    position: relative;
    margin-top: 1rem;
    padding-top: 56.25%;
    width: 100%;
    background-color: #323232
}

div[sn=C015]>section>div>div>div>iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%
}

div[sn=C015]>section>div>div>a {
    position: relative;
    display: inline-block;
    margin-top: 2rem
}

div[sn=C016] {
    position: relative;
    display: block;
    width: 100%;
    height: initial;
    background-color: #fff
}

div[sn=C016]::after {
    content: "C-016";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

div[sn=C016]>section {
    position: relative;
    display: block;
    left: 50%;
    width: 100%;
    max-width: var(--max-width);
    height: initial;
    transform: translateX(-50%);
    padding: 4rem 0
}

div[sn=C016]>section>ul {
    position: relative;
    display: block;
    font-size: 0;
    text-align: center
}

div[sn=C016]>section>ul[df=x2] {
    text-align: left
}

div[sn=C016]>section>ul[df=x2]>li {
    width: calc(50% - 2rem);
    text-align: center
}

@media screen and (max-width: 639px) {
    div[sn=C016]>section>ul[df=x3] {
        text-align: left
    }
}

div[sn=C016]>section>ul[df=x3]>li {
    width: calc(33.3333333333% - 2rem)
}

@media screen and (max-width: 639px) {
    div[sn=C016]>section>ul[df=x3]>li {
        width: calc(50% - 2rem);
        text-align: center
    }
}

@media screen and (max-width: 639px) {
    div[sn=C016]>section>ul[df=x4] {
        text-align: left
    }
}

div[sn=C016]>section>ul[df=x4]>li {
    width: calc(25% - 2rem)
}

@media screen and (max-width: 639px) {
    div[sn=C016]>section>ul[df=x4]>li {
        width: calc(50% - 2rem);
        text-align: center
    }
}

@media screen and (max-width: 479px) {
    div[sn=C016]>section>ul[df=x5] {
        text-align: left
    }
}

div[sn=C016]>section>ul[df=x5]>li {
    width: calc(20% - 2rem)
}

@media screen and (max-width: 959px) {
    div[sn=C016]>section>ul[df=x5]>li {
        width: calc(33.3333333333% - 2rem)
    }
}

@media screen and (max-width: 479px) {
    div[sn=C016]>section>ul[df=x5]>li {
        width: calc(50% - 2rem);
        text-align: center
    }
}

div[sn=C016]>section>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 1rem;
    height: initial
}

div[sn=C016]>section>ul>li>div,
div[sn=C016]>section>ul>li>a {
    position: relative;
    display: block;
    margin-left: calc(50% - 40px);
    width: 5rem;
    height: 5rem
}

div[sn=C016]>section>ul>li>div>img,
div[sn=C016]>section>ul>li>a>img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

div[sn=C016]>section>ul>li>div>i,
div[sn=C016]>section>ul>li>a>i {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 5rem;
    line-height: 5rem;
    height: 5rem;
    font-size: 2rem;
    color: var(--col-sys-light)
}

div[sn=C016]>section>ul>li>p {
    position: relative;
    margin-top: 1rem;
    padding: 0 1rem;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
    color: #fff
}

div[sn=C016]>section>ul>li>p:nth-child(3) {
    font-size: 1.5rem
}

div[sn=C017] {
    position: relative;
    display: block;
    width: 100%;
    height: initial;
    background-color: #fff
}

div[sn=C017]::after {
    content: "C017";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

div[sn=C017]>section {
    position: relative;
    display: block;
    left: 50%;
    width: 100%;
    max-width: var(--max-width);
    height: initial;
    transform: translateX(-50%);
    padding: 5rem 0
}

div[sn=C017]>section>article {
    position: relative;
    display: block;
    font-size: 0;
    text-align: center
}

div[sn=C017]>section>article>div,
div[sn=C017]>section>article>a {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden
}

div[sn=C017]>section>article>div>img,
div[sn=C017]>section>article>a>img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

div[sn=C017]>section>article>p {
    position: relative;
    margin: 1.5rem 25% 0;
    width: 50%;
    line-height: 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #fff
}

div[sn=C017]>section>article>h6 {
    position: relative;
    margin: 2rem 25% 0;
    width: 50%;
    font-size: 1.25rem;
    font-weight: 500;
    color: #fff
}

div[sn=C017]>section>article>em {
    position: relative;
    display: block;
    margin: 0 25%;
    width: 50%;
    font-size: .875rem;
    font-style: normal;
    color: #fff
}

div[sn=C018] {
    position: relative;
    display: block;
    width: 100%;
    height: initial;
    background-color: #fff
}

div[sn=C018]::after {
    content: "C018";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

div[sn=C018]>figure {
    position: relative;
    display: block;
    left: 50%;
    width: 100%;
    max-width: var(--max-width);
    height: initial;
    transform: translateX(-50%);
    padding: 5rem 0 4rem
}

div[sn=C018]>figure>header {
    position: relative;
    padding: 0 16px;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center
}

@media screen and (max-width: 639px) {
    div[sn=C018]>figure>header {
        font-size: 1.25rem
    }
}

div[sn=C018]>figure>figcaption {
    position: relative;
    padding: 0 1rem;
    line-height: 2rem;
    font-size: .875rem;
    font-weight: 500;
    text-align: center
}

div[sn=C018]>figure>ul {
    position: relative;
    display: block;
    margin-top: 3rem;
    width: 100%;
    font-size: 0
}

@media screen and (max-width: 479px) {
    div[sn=C018]>figure>ul {
        padding: 0 .5rem
    }
}

div[sn=C018]>figure>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 1rem;
    padding-top: calc(25% - 2rem);
    width: calc(25% - 2rem);
    border-radius: var(--default-radius)
}

@media screen and (max-width: 899px) {
    div[sn=C018]>figure>ul>li {
        padding-top: calc(33.3333333333% - 2rem);
        width: calc(33.3333333333% - 2rem)
    }
}

@media screen and (max-width: 599px) {
    div[sn=C018]>figure>ul>li {
        padding-top: calc(50% - 2rem);
        width: calc(50% - 2rem)
    }
}

@media screen and (max-width: 479px) {
    div[sn=C018]>figure>ul>li {
        margin: .5rem;
        padding-top: calc(50% - 1rem);
        width: calc(50% - 1rem)
    }
}

div[sn=C018]>figure>ul>li>div,
div[sn=C018]>figure>ul>li>a {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit
}

div[sn=C018]>figure>ul>li>div>img,
div[sn=C018]>figure>ul>li>a>img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit
}

div[sn=C018]>nav {
    position: relative;
    display: block;
    left: 50%;
    padding-bottom: 5rem;
    width: 100%;
    max-width: var(--max-width);
    height: initial;
    transform: translateX(-50%)
}

div[sn=C018]>nav>ul {
    position: relative;
    display: block;
    width: 100%;
    height: initial;
    font-size: 0;
    text-align: center
}

div[sn=C018]>nav>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0 .25rem;
    width: initial;
    height: initial
}

div[sn=C018]>nav>ul>li>a,
div[sn=C018]>nav>ul>li>strong {
    position: relative;
    padding: .5rem .75rem;
    border-radius: 2px;
    line-height: 1.5rem;
    font-size: 1rem
}

div[sn=C018]>nav>ul>li>a {
    border: 1px solid var(--col-border);
    color: var(--col-sys-light)
}

div[sn=C018]>nav>ul>li>a>i {
    position: relative;
    padding: 0 .125rem;
    line-height: inherit;
    font-size: inherit;
    color: inherit
}

div[sn=C018]>nav>ul>li>strong {
    border: 1px solid var(--col-sys-light);
    background-color: var(--col-sys-light);
    color: #fff
}

div[sn=C019] {
    position: relative;
    display: block;
    width: 100%;
    height: initial;
    background-color: #fff
}

div[sn=C019]::after {
    content: "C019";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

div[sn=C019]>section {
    position: relative;
    display: block;
    left: 50%;
    width: 100%;
    max-width: var(--max-width);
    height: initial;
    transform: translateX(-50%);
    padding: 5rem 0 4rem
}

div[sn=C019]>section>h1,
div[sn=C019]>section>h2,
div[sn=C019]>section>h3,
div[sn=C019]>section>h4,
div[sn=C019]>section>h5,
div[sn=C019]>section>h6 {
    position: relative;
    margin-top: 2.5rem;
    padding: 0 1rem;
    width: 100%;
    font-size: 1.5rem;
    letter-spacing: 1px;
    clear: both
}

div[sn=C019]>section>h1:nth-child(1),
div[sn=C019]>section>h2:nth-child(1),
div[sn=C019]>section>h3:nth-child(1),
div[sn=C019]>section>h4:nth-child(1),
div[sn=C019]>section>h5:nth-child(1),
div[sn=C019]>section>h6:nth-child(1) {
    margin-top: 0
}

div[sn=C019]>section>img {
    position: relative;
    margin: 1rem;
    padding: .25rem;
    width: 12rem;
    height: 12rem;
    border: 1px solid var(--col-border)
}

div[sn=C019]>section>img[df=fr] {
    float: right;
    clear: right
}

@media screen and (max-width: 767px) {
    div[sn=C019]>section>img[df=fr] {
        float: none
    }
}

div[sn=C019]>section>img[df=fl] {
    float: left;
    clear: left
}

@media screen and (max-width: 767px) {
    div[sn=C019]>section>img[df=fl] {
        float: none
    }
}

div[sn=C019]>section>p {
    position: relative;
    margin-top: 1rem;
    padding: 0 1rem;
    line-height: 1.5rem;
    font-size: 1rem
}

div[sn=C019]>section>table {
    position: relative;
    margin-top: 1rem;
    margin-left: 1rem;
    padding: 0 1rem;
    width: calc(100% - 2rem);
    clear: both;
    border-collapse: collapse
}

div[sn=C019]>section>table>thead {
    position: relative;
    width: 100%;
    height: initial
}

div[sn=C019]>section>table>thead>tr {
    position: relative;
    width: 100%;
    height: initial;
    background-color: var(--col-sys)
}

div[sn=C019]>section>table>thead>tr>th {
    position: relative;
    padding: .5rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 600
}

div[sn=C019]>section>table>tbody {
    position: relative;
    width: 100%;
    height: initial
}

div[sn=C019]>section>table>tbody>tr {
    position: relative;
    width: 100%;
    height: initial
}

div[sn=C019]>section>table>tbody>tr:nth-child(2n) {
    background-color: var(--col-bg-lightgray)
}

div[sn=C019]>section>table>tbody>tr>td {
    position: relative;
    padding: .5rem;
    font-size: 1rem;
    text-align: center
}

div[sn=C019]>section>ul {
    position: relative;
    margin-top: 1rem;
    margin-left: 1rem;
    width: calc(100% - 2rem)
}

div[sn=C019]>section>ul>li {
    position: relative;
    display: block;
    margin-top: 1rem;
    width: 100%;
    height: initial;
    background-color: var(--col-bg-lightgray)
}

div[sn=C019]>section>ul>li>article {
    position: relative;
    display: block;
    padding: 1rem 1rem 1.5rem;
    width: 100%;
    height: initial
}

div[sn=C019]>section>ul>li>article>header {
    position: relative;
    display: block;
    width: 100%;
    height: 4rem;
    font-size: 0
}

div[sn=C019]>section>ul>li>article>header>figure {
    position: relative;
    float: left;
    margin-right: 1rem;
    width: 4rem;
    height: 4rem
}

div[sn=C019]>section>ul>li>article>header>figure>img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover
}

div[sn=C019]>section>ul>li>article>header>address,
div[sn=C019]>section>ul>li>article>header>time {
    position: relative;
    display: block;
    width: calc(100% - 80px);
    line-height: 1.5rem;
    font-size: 1rem;
    font-style: normal
}

div[sn=C019]>section>ul>li>article>header>address:nth-child(2),
div[sn=C019]>section>ul>li>article>header>time:nth-child(2) {
    padding-top: .5rem
}

div[sn=C019]>section>ul>li>article>header>address>a {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--col-sys)
}

div[sn=C019]>section>ul>li>article>p {
    position: relative;
    margin-top: 1rem;
    width: 100%
}

div[sn=C019]>section>form {
    position: relative;
    display: block;
    width: 100%;
    font-size: 0
}

div[sn=C019]>section>form>div {
    position: relative;
    display: block;
    margin: 1rem 1rem 0;
    width: calc(100% - 2rem);
    font-size: 0
}

div[sn=C019]>section>form>div[df=x2] {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 2rem)
}

div[sn=C019]>section>form>div>label {
    position: relative;
    display: block;
    line-height: 2rem;
    font-size: 1rem
}

div[sn=C019]>section>form>div>label[df*=ned]::after {
    content: "*";
    color: red;
    padding: 0 .5rem;
    font-size: 1.25rem
}

div[sn=C019]>section>form>div>input {
    position: relative;
    display: block;
    width: 100%;
    line-height: 2rem;
    font-size: 1rem;
    color: #000;
    border: 1px solid var(--col-border);
    border-radius: 2px
}

div[sn=C019]>section>form>div>input[type=submit],
div[sn=C019]>section>form>div>input[type=reset] {
    display: inline-block;
    vertical-align: top;
    margin-left: 1rem;
    padding: .5rem 2rem;
    line-height: 1rem;
    width: initial;
    background-color: var(--col-bg-lightgray)
}

div[sn=C019]>section>form>div>input[type=submit]:nth-child(1),
div[sn=C019]>section>form>div>input[type=reset]:nth-child(1) {
    margin-left: 0
}

div[sn=C019]>section>form>div>textarea {
    position: relative;
    display: block;
    width: 100%;
    line-height: 2rem;
    font-size: 1rem;
    color: #000;
    border: 1px solid var(--col-border);
    border-radius: 2px;
    resize: none
}

div[sn=B001] {
    position: relative;
    display: block;
    width: 100%;
    height: initial
}

div[sn=B001]::after {
    content: "B001";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

div[sn=B001]>div {
    position: relative;
    display: block;
    left: 50%;
    width: 100%;
    max-width: var(--max-width);
    height: initial;
    transform: translateX(-50%);
    padding: 4rem 0
}

div[sn=B001]>div>ul {
    position: relative;
    padding-bottom: 1rem;
    width: 100%;
    height: initial;
    font-size: 0;
    text-align: center
}

div[sn=B001]>div>ul[df=x2]>li {
    width: calc(50% - 2rem)
}

div[sn=B001]>div>ul[df=x3]>li {
    width: calc(33.3333333333% - 2rem)
}

div[sn=B001]>div>ul[df=x4]>li {
    width: calc(25% - 2rem)
}

@media screen and (max-width: 639px) {
    div[sn=B001]>div>ul[df=x4]>li {
        width: calc(50% - 2rem)
    }
}

@media screen and (max-width: 413px) {
    div[sn=B001]>div>ul[df=x4]>li {
        width: calc(100% - 2rem)
    }
}

div[sn=B001]>div>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 1rem;
    border-radius: 4px;
    text-align: left
}

div[sn=B001]>footer {
    position: relative;
    width: 100%;
    height: initial;
    font-size: 0
}

div[sn=B001]>footer>div {
    position: relative;
    display: block;
    left: 50%;
    padding: 1rem 0;
    width: 100%;
    max-width: 1140px;
    height: initial;
    transform: translateX(-50%)
}

div[sn=B001]>footer>div>p {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 50%;
    line-height: 1.375rem;
    max-height: 2.75rem;
    font-size: .875rem;
    color: #fff
}

div[sn=B001]>footer>div>p.l {
    padding-left: 1rem;
    text-align: left
}

div[sn=B001]>footer>div>p.r {
    padding-right: 1rem;
    text-align: right
}

@media screen and (max-width: 639px) {
    div[sn=B001]>footer>div>p {
        width: 100%
    }

    div[sn=B001]>footer>div>p.l,
    div[sn=B001]>footer>div>p.r {
        padding: 0 16px;
        text-align: center
    }
}

div[sn=B002] {
    position: relative;
    display: block;
    width: 100%;
    height: initial
}

div[sn=B002]::after {
    content: "B002";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

div[sn=B002]>div {
    position: relative;
    display: block;
    left: 50%;
    width: 100%;
    max-width: var(--max-width);
    height: initial;
    transform: translateX(-50%);
    padding: 4rem 0
}

div[sn=B002]>div>ul {
    position: relative;
    padding-bottom: 1rem;
    width: 100%;
    height: initial;
    font-size: 0;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, .25)
}

div[sn=B002]>div>ul[df=x2]>li {
    width: calc(50% - 2rem)
}

div[sn=B002]>div>ul[df=x3]>li {
    width: calc(33.3333333333% - 2rem)
}

div[sn=B002]>div>ul[df=x4]>li {
    width: calc(25% - 2rem)
}

@media screen and (max-width: 639px) {
    div[sn=B002]>div>ul[df=x4]>li {
        width: calc(50% - 2rem)
    }
}

@media screen and (max-width: 413px) {
    div[sn=B002]>div>ul[df=x4]>li {
        width: calc(100% - 2rem)
    }
}

div[sn=B002]>div>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 1rem;
    border-radius: 4px;
    text-align: left
}

div[sn=B002]>div>nav {
    position: relative;
    padding: 2rem 0;
    width: 100%;
    height: initial;
    font-size: 0;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, .25)
}

div[sn=B002]>div>nav>ul {
    position: relative;
    display: block;
    list-style: none
}

div[sn=B002]>div>nav>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: .5rem .75rem
}

div[sn=B002]>div>nav>ul>li>a {
    position: relative;
    line-height: 1.5rem;
    font-size: .875rem;
    color: #fff
}

@media(hover: hover)and (pointer: fine) {
    div[sn=B002]>div>nav>ul>li>a.unhover {
        animation: color-hover-fff .3s;
        -webkit-animation: color-hover-fff .3s
    }

    div[sn=B002]>div>nav>ul>li>a:hover {
        color: var(--col-sys-light);
        animation: color-unhover-fff .3s;
        -webkit-animation: color-unhover-fff .3s
    }
}

div[sn=B002]>div>nav>ul>li>a>i {
    position: relative;
    line-height: 1.5rem;
    font-size: 1.25rem;
    color: #fff
}

@media(hover: hover)and (pointer: fine) {
    div[sn=B002]>div>nav>ul>li>a>i.unhover {
        animation: color-hover-fff .3s;
        -webkit-animation: color-hover-fff .3s
    }

    div[sn=B002]>div>nav>ul>li>a>i:hover {
        color: var(--col-sys-light);
        animation: color-unhover-fff .3s;
        -webkit-animation: color-unhover-fff .3s
    }
}

div[sn=B002]>div>footer {
    position: relative;
    padding-bottom: 3rem;
    width: 100%;
    height: initial;
    font-size: 0
}

div[sn=B002]>div>footer>p {
    position: relative;
    display: inline-block;
    vertical-align: top;
    top: 3rem;
    width: 50%;
    line-height: 1.375rem;
    max-height: 2.75rem;
    font-size: .875rem;
    letter-spacing: 1px;
    color: #fff;
    opacity: .7
}

div[sn=B002]>div>footer>p.l {
    padding-left: 1rem;
    text-align: left
}

div[sn=B002]>div>footer>p.r {
    padding-right: 1rem;
    text-align: right
}

@media screen and (max-width: 639px) {
    div[sn=B002]>div>footer>p {
        width: 100%
    }

    div[sn=B002]>div>footer>p.l,
    div[sn=B002]>div>footer>p.r {
        padding: 0 16px;
        text-align: center
    }
}

div[sn=B003] {
    position: relative;
    display: block;
    width: 100%;
    height: initial
}

div[sn=B003]::after {
    content: "B003";
    position: absolute;
    right: 0;
    bottom: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

div[sn=B003]>nav {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 5rem 0;
    width: 100%;
    max-width: 1140px;
    height: initial;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, .25)
}

div[sn=B003]>nav>h6 {
    position: relative;
    font-size: 1.75rem;
    color: #fff
}

div[sn=B003]>nav>ul {
    position: relative;
    display: block;
    margin-top: 1rem;
    width: 100%;
    font-size: 0
}

div[sn=B003]>nav>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-top: 1rem;
    margin-right: .75rem;
    width: 2rem;
    height: 2rem;
    background-color: rgba(255, 255, 255, .25);
    border-radius: 4px
}

div[sn=B003]>nav>ul>li>a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%
}

div[sn=B003]>nav>ul>li>a>i {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    line-height: 2rem;
    font-size: 1rem;
    color: #fff
}

div[sn=B003]>nav>p {
    position: relative;
    margin-top: 2rem;
    font-size: .875rem;
    color: #fff
}

div[sn=B003]>div {
    position: relative;
    display: block;
    left: 50%;
    width: 100%;
    max-width: var(--max-width);
    height: initial;
    transform: translateX(-50%);
    padding: 5rem 0
}

div[sn=B003]>div>ul {
    position: relative;
    padding-bottom: 1rem;
    width: 100%;
    height: initial;
    font-size: 0;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, .25)
}

div[sn=B003]>div>ul[df=x2]>li {
    width: calc(50% - 2rem)
}

div[sn=B003]>div>ul[df=x3]>li {
    width: calc(33.3333333333% - 2rem)
}

div[sn=B003]>div>ul[df=x4]>li {
    width: calc(25% - 2rem)
}

@media screen and (max-width: 639px) {
    div[sn=B003]>div>ul[df=x4]>li {
        width: calc(50% - 2rem)
    }
}

@media screen and (max-width: 413px) {
    div[sn=B003]>div>ul[df=x4]>li {
        width: calc(100% - 2rem)
    }
}

div[sn=B003]>div>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 1rem;
    border-radius: 4px;
    text-align: left
}

div[sn=B003]>div>nav {
    position: relative;
    padding: 2rem 0;
    width: 100%;
    height: initial;
    font-size: 0;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, .25)
}

div[sn=B003]>div>nav>a {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: .5rem;
    width: 1.5rem;
    height: 1.5rem
}

div[sn=B003]>div>nav>a>img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

div[sn=B003]>div>nav>ul {
    position: relative;
    display: inline-block;
    vertical-align: top;
    border-radius: 2px;
    list-style: none
}

div[sn=B003]>div>nav>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: .5rem
}

div[sn=B003]>div>nav>ul>li>a {
    line-height: 1.5rem;
    font-size: 1rem;
    color: #fff
}

div[sn=B003]>div>footer {
    position: relative;
    padding-bottom: 3rem;
    width: 100%;
    height: initial;
    font-size: 0
}

div[sn=B003]>div>footer>p {
    position: relative;
    display: inline-block;
    vertical-align: top;
    top: 3rem;
    width: 50%;
    line-height: 1.375rem;
    max-height: 2.75rem;
    font-size: .875rem;
    color: #fff
}

div[sn=B003]>div>footer>p.l {
    padding-left: 1rem;
    text-align: left
}

div[sn=B003]>div>footer>p.r {
    padding-right: 1rem;
    text-align: right
}

@media screen and (max-width: 639px) {
    div[sn=B003]>div>footer>p {
        width: calc(100% - 32px)
    }

    div[sn=B003]>div>footer>p.l,
    div[sn=B003]>div>footer>p.r {
        padding: 0 16px;
        text-align: center
    }
}

div[sn=B003]>footer {
    position: relative;
    width: 100%;
    height: initial;
    background-color: #373c46
}

div[sn=B003]>footer>div {
    position: relative;
    display: block;
    left: 50%;
    transform: translateX(-50%);
    padding: 1rem 0;
    width: 100%;
    max-width: 1140px;
    height: initial;
    font-size: 0
}

div[sn=B003]>footer>div>p {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 50%;
    line-height: 1.375rem;
    max-height: 2.75rem;
    font-size: .875rem;
    color: #fff
}

div[sn=B003]>footer>div>p.l {
    padding-left: 1rem;
    text-align: left
}

div[sn=B003]>footer>div>p.r {
    padding-right: 1rem;
    text-align: right
}

@media screen and (max-width: 639px) {
    div[sn=B003]>footer>div>p {
        width: calc(100% - 2rem)
    }

    div[sn=B003]>footer>div>p.l,
    div[sn=B003]>footer>div>p.r {
        padding: 0 16px;
        text-align: center
    }
}

li[sn=BC001]::after {
    content: "BC001";
    position: absolute;
    bottom: 0;
    right: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

li[sn=BC001]>h6 {
    position: relative;
    width: 100%;
    font-size: 1.125rem;
    font-weight: 500;
    color: #fff
}

li[sn=BC001]>div {
    position: relative;
    display: block;
    margin-top: 2rem;
    width: 100%;
    height: initial
}

li[sn=BC001]>div>p {
    position: relative;
    display: block;
    margin-top: 2rem;
    width: 100%;
    line-height: 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    opacity: .7
}

li[sn=BC001]>div>p:nth-child(1) {
    margin-top: 0
}

li[sn=BC001]>div>ul {
    position: relative;
    display: block;
    margin-top: 1rem;
    width: 100%;
    font-size: 0
}

li[sn=BC001]>div>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-top: .75rem;
    margin-right: .75rem;
    width: 2.5rem;
    height: 2.5rem;
    background-color: rgba(255, 255, 255, .25);
    border-radius: 4px
}

li[sn=BC001]>div>ul>li>a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%
}

li[sn=BC001]>div>ul>li>a>img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

li[sn=BC001]>div>ul>li>a>i {
    position: relative;
    display: block;
    width: 2.5rem;
    line-height: 2.5rem;
    height: 2.5rem;
    font-size: 1.75rem;
    text-align: center;
    color: #fff;
    opacity: .7
}

li[sn=BC002]::after {
    content: "BC002";
    position: absolute;
    bottom: 0;
    right: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

li[sn=BC002]>h6 {
    position: relative;
    width: 100%;
    font-size: 1.125rem;
    font-weight: 500;
    color: #fff
}

li[sn=BC002]>div {
    position: relative;
    width: 100%;
    height: initial;
    margin-top: 2rem
}

li[sn=BC002]>div>a {
    position: relative;
    display: block;
    padding: 1rem 0;
    width: 100%;
    line-height: 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--col-sys-light);
    border-top: 1px solid rgba(255, 255, 255, .25)
}

li[sn=BC002]>div>a:nth-child(1) {
    border: none;
    padding: 0 0 1rem
}

li[sn=BC003]::after {
    content: "BC003";
    position: absolute;
    bottom: 0;
    right: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

li[sn=BC003]>h6 {
    position: relative;
    width: 100%;
    font-size: 1.125rem;
    font-weight: 500;
    color: #fff
}

li[sn=BC003]>div {
    position: relative;
    width: 100%;
    height: initial;
    margin-top: 2rem
}

li[sn=BC003]>div>p {
    position: relative;
    display: block;
    width: 100%;
    line-height: 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    opacity: .7
}

li[sn=BC003]>div>div {
    position: relative;
    display: block;
    width: 100%;
    font-size: 0
}

li[sn=BC003]>div>div>input {
    position: relative;
    display: block;
    margin-top: 1rem;
    padding: 0 1rem;
    width: 100%;
    line-height: 2.5rem;
    max-height: 2.5rem;
    font-size: .875rem;
    color: #fff;
    outline: none;
    border: none;
    border-radius: var(--default-radius);
    background-color: rgba(255, 255, 255, .25)
}

li[sn=BC003]>div>div>div,
li[sn=BC003]>div>div>a {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-top: 1rem
}

li[sn=BC004]::after {
    content: "BC004";
    position: absolute;
    bottom: 0;
    right: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

li[sn=BC004]>h6 {
    position: relative;
    width: 100%;
    font-size: 1.125rem;
    font-weight: 500;
    color: #fff
}

li[sn=BC004]>div {
    position: relative;
    display: block;
    margin-top: 2rem;
    width: 100%;
    height: initial;
    font-size: 0
}

li[sn=BC004]>div>a {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-top: .75rem;
    margin-right: .75rem;
    padding-top: calc((100% - 1.5rem)/3);
    width: calc((100% - 1.5rem)/3)
}

li[sn=BC004]>div>a:nth-child(1),
li[sn=BC004]>div>a:nth-child(2),
li[sn=BC004]>div>a:nth-child(3) {
    margin-top: 0
}

li[sn=BC004]>div>a:nth-child(3),
li[sn=BC004]>div>a:nth-child(6),
li[sn=BC004]>div>a:nth-child(9),
li[sn=BC004]>div>a:nth-child(12),
li[sn=BC004]>div>a:nth-child(15),
li[sn=BC004]>div>a:nth-child(18),
li[sn=BC004]>div>a:nth-child(21) {
    margin-right: 0
}

li[sn=BC004]>div>a:hover>img {
    top: -2px;
    left: -2px;
    bottom: -2px;
    right: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px)
}

li[sn=BC004]>div>a>img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .25);
    object-fit: cover
}

li[sn=BC005]::after {
    content: "BC005";
    position: absolute;
    bottom: 0;
    right: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

li[sn=BC005]>h6 {
    position: relative;
    width: 100%;
    font-size: 1.125rem;
    font-weight: 500;
    color: #fff
}

li[sn=BC005]>div {
    position: relative;
    display: block;
    margin-top: 2rem;
    width: 100%;
    height: initial
}

li[sn=BC005]>div>p {
    position: relative;
    display: block;
    margin-top: 2rem;
    width: 100%;
    line-height: 1.5rem;
    font-size: .875rem;
    font-weight: 400;
    color: #fff
}

li[sn=BC005]>div>p:nth-child(1) {
    margin-top: 0
}

li[sn=BC005]>div>div {
    position: relative;
    display: block;
    margin-top: 1rem;
    width: 100%;
    font-size: 0
}

li[sn=BC005]>div>div:nth-child(1) {
    margin-top: 0
}

li[sn=BC005]>div>div>ul {
    position: relative;
    display: block;
    width: 100%;
    font-size: 0
}

li[sn=BC005]>div>div>ul[df=ic]>li {
    margin-right: .75rem;
    margin-bottom: .75rem
}

li[sn=BC005]>div>div>ul[df=ic]>li>a>i {
    width: 2.5rem;
    line-height: 2.5rem;
    height: 2.5rem;
    background-color: rgba(0, 0, 0, .5)
}

li[sn=BC005]>div>div>ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-right: 1rem;
    margin-bottom: .5rem;
    width: initial;
    height: initial;
    border-radius: 4px
}

li[sn=BC005]>div>div>ul>li>a {
    position: relative;
    display: block;
    width: initial;
    height: initial;
    font-size: .875rem;
    color: #fff;
    opacity: .8
}

li[sn=BC005]>div>div>ul>li>a>img {
    position: relative;
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover
}

li[sn=BC005]>div>div>ul>li>a>i {
    position: relative;
    display: block;
    line-height: 1rem;
    font-size: 1rem;
    text-align: center;
    color: #fff
}

li[sn=BC005]>div>div>a {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-top: .5rem;
    margin-right: .5rem;
    width: 2rem;
    height: 2rem;
    background-color: rgba(255, 255, 255, .25);
    border-radius: 4px
}

li[sn=BC005]>div>div>a>img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

li[sn=BC006]::after {
    content: "BC006";
    position: absolute;
    bottom: 0;
    right: 0;
    padding: .25rem;
    font-size: .75rem;
    background-color: var(--col-sys-dark);
    color: #fff;
    opacity: var(--module-hint)
}

li[sn=BC006]>h6 {
    position: relative;
    width: 100%;
    font-size: 1.125rem;
    font-weight: 500;
    color: #fff
}

li[sn=BC006]>div {
    position: relative;
    display: block;
    margin-top: 2rem;
    width: 100%
}

li[sn=BC006]>div>div {
    position: relative;
    display: block;
    margin-top: 1rem;
    padding-top: 1rem;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, .25)
}

li[sn=BC006]>div>div:nth-child(1) {
    margin-top: 0;
    padding-top: 0;
    border-top: none
}

li[sn=BC006]>div>div>a {
    position: relative;
    display: block;
    width: 100%;
    line-height: 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--col-sys-light)
}

li[sn=BC006]>div>div>p {
    position: relative;
    display: block;
    margin-top: 1.5rem;
    font-size: .75rem;
    color: #fff
}

@keyframes border {
    from {
        border: 0px solid var(--col-sys-light)
    }

    to {
        border: 3px solid var(--col-sys-light)
    }
}

@keyframes unborder {
    from {
        border: 3px solid var(--col-sys-light)
    }

    to {
        border: 0px solid var(--col-sys-light)
    }
}

@keyframes unhide {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes unhide {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes hide {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@-webkit-keyframes hide {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes unshadow {
    from {
        -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .1), 0 0 16px rgba(0, 0, 0, .1);
        -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .1), 0 0 16px rgba(0, 0, 0, .1);
        box-shadow: 0 0 8px rgba(0, 0, 0, .1), 0 0 16px rgba(0, 0, 0, .1)
    }

    to {
        -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
        -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0)
    }
}

@-webkit-keyframes unshadow {
    from {
        -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .1), 0 0 16px rgba(0, 0, 0, .1);
        -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .1), 0 0 16px rgba(0, 0, 0, .1);
        box-shadow: 0 0 8px rgba(0, 0, 0, .1), 0 0 16px rgba(0, 0, 0, .1)
    }

    to {
        -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
        -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0)
    }
}

@keyframes shadow {
    from {
        -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
        -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0)
    }

    to {
        -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .1), 0 0 16px rgba(0, 0, 0, .1);
        -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .1), 0 0 16px rgba(0, 0, 0, .1);
        box-shadow: 0 0 8px rgba(0, 0, 0, .1), 0 0 16px rgba(0, 0, 0, .1)
    }
}

@-webkit-keyframes shadow {
    from {
        -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
        -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0)
    }

    to {
        -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .1), 0 0 16px rgba(0, 0, 0, .1);
        -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .1), 0 0 16px rgba(0, 0, 0, .1);
        box-shadow: 0 0 8px rgba(0, 0, 0, .1), 0 0 16px rgba(0, 0, 0, .1)
    }
}

@keyframes color-hover-fff {
    from {
        color: var(--col-sys-light)
    }

    to {
        color: #fff
    }
}

@-webkit-keyframes color-hover-fff {
    from {
        color: var(--col-sys-light)
    }

    to {
        color: #fff
    }
}

@keyframes color-unhover-fff {
    from {
        color: #fff
    }

    to {
        color: var(--col-sys-light)
    }
}

@-webkit-keyframes color-unhover-fff {
    from {
        color: #fff
    }

    to {
        color: var(--col-sys-light)
    }
}

@keyframes btn-hover-fff {
    from {
        background-color: var(--col-sys-light);
        border: 1px solid var(--col-sys-light)
    }

    to {
        background-color: rgba(0, 0, 0, 0);
        border: 1px solid #fff
    }
}

@-webkit-keyframes btn-hover-fff {
    from {
        background-color: var(--col-sys-light);
        border: 1px solid var(--col-sys-light)
    }

    to {
        background-color: rgba(0, 0, 0, 0);
        border: 1px solid #fff
    }
}

@keyframes btn-unhover-fff {
    from {
        background-color: rgba(0, 0, 0, 0);
        border: 1px solid #fff
    }

    to {
        background-color: var(--col-sys-light);
        border: 1px solid var(--col-sys-light)
    }
}

@-webkit-keyframes btn-unhover-fff {
    from {
        background-color: rgba(0, 0, 0, 0);
        border: 1px solid #fff
    }

    to {
        background-color: var(--col-sys-light);
        border: 1px solid var(--col-sys-light)
    }
}

@keyframes btn-hover {
    from {
        background-color: var(--col-sys-light);
        border: 1px solid var(--col-sys-light);
        color: #fff
    }

    to {
        background-color: rgba(0, 0, 0, 0);
        border: 1px solid #505050;
        color: #505050
    }
}

@-webkit-keyframes btn-hover {
    from {
        background-color: var(--col-sys-light);
        border: 1px solid var(--col-sys-light);
        color: #fff
    }

    to {
        background-color: rgba(0, 0, 0, 0);
        border: 1px solid #505050;
        color: #505050
    }
}

@keyframes btn-unhover {
    from {
        background-color: rgba(0, 0, 0, 0);
        border: 1px solid #505050;
        color: #505050
    }

    to {
        background-color: var(--col-sys-light);
        border: 1px solid var(--col-sys-light);
        color: #fff
    }
}

@-webkit-keyframes btn-unhover {
    from {
        background-color: rgba(0, 0, 0, 0);
        border: 1px solid #505050;
        color: #505050
    }

    to {
        background-color: var(--col-sys-light);
        border: 1px solid var(--col-sys-light);
        color: #fff
    }
}

a[df^=btn] {
    padding: .5rem 1rem;
    width: initial;
    line-height: 1.25rem;
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: .5px;
    border-radius: var(--default-radius);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    color: #505050;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #505050
}

a[df^=btn][df*=l] {
    padding: .5rem 1.5rem
}

a[df^=btn][df*=xl] {
    padding: .5rem 2rem
}

a[df^=btn][df*=xxl] {
    padding: .5rem 3rem
}

a[df^=btn]>i {
    margin-right: .5rem;
    color: #505050
}

a[df^=btn][df*=fff] {
    color: #fff;
    border: 1px solid #fff
}

a[df^=btn][df*=fff]>i {
    color: #fff
}

@media(hover: hover)and (pointer: fine) {
    a[df^=btn].unhover {
        animation: btn-hover .3s;
        -webkit-animation: btn-hover .3s
    }

    a[df^=btn].unhover[df*=fff] {
        animation: btn-hover-fff .3s;
        -webkit-animation: btn-hover-fff .3s
    }

    a[df^=btn]:hover {
        color: #fff;
        background-color: var(--col-sys-light);
        border: 1px solid var(--col-sys-light);
        animation: btn-unhover .3s;
        -webkit-animation: btn-unhover .3s
    }

    a[df^=btn]:hover[df*=fff] {
        animation: btn-unhover-fff .3s;
        -webkit-animation: btn-unhover-fff .3s
    }
}

a[df^=btn][df*=col] {
    color: #fff;
    background-color: var(--col-sys-light);
    border: 1px solid var(--col-sys-light)
}

@media(hover: hover)and (pointer: fine) {
    a[df^=btn][df*=col].unhover {
        animation: btn-unhover .3s;
        -webkit-animation: btn-unhover .3s
    }

    a[df^=btn][df*=col].unhover[df*=fff] {
        animation: btn-unhover-fff .3s;
        -webkit-animation: btn-unhover-fff .3s
    }

    a[df^=btn][df*=col]:hover {
        color: #505050;
        background-color: rgba(0, 0, 0, 0);
        border: 1px solid #505050;
        animation: btn-hover .3s;
        -webkit-animation: btn-hover .3s
    }

    a[df^=btn][df*=col]:hover[df*=fff] {
        color: #fff;
        border: 1px solid #fff;
        animation: btn-hover-fff .3s;
        -webkit-animation: btn-hover-fff .3s
    }
}

@media(hover: hover)and (pointer: fine) {
    *[df*=sd].unhover {
        -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
        -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
        animation: unshadow .5s;
        -webkit-animation: unshadow .5s
    }

    *[df*=sd]:hover {
        -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .1), 0 0 16px rgba(0, 0, 0, .1);
        -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .1), 0 0 16px rgba(0, 0, 0, .1);
        box-shadow: 0 0 8px rgba(0, 0, 0, .1), 0 0 16px rgba(0, 0, 0, .1);
        animation: shadow .5s;
        -webkit-animation: shadow .5s
    }
}

div[df^=bg] {
    background-color: #000;
    background-image: url(../image/bg-l.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

div[df^=bg][df*=fx] {
    background-attachment: fixed
}

div[df^=bg]::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-color: rgba(0, 0, 0, .5);
    z-index: 0
}

img[ic*=bg] {
    content: url(../image/bg-m.svg)
}

.tl {
    text-align: left
}

.tc {
    text-align: center
}

.tr {
    text-align: right
}

@media(hover: hover)and (pointer: fine) {

    div[wh="1"].unhover::after,
    div[wh=true].unhover::after,
    a[wh="1"].unhover::after,
    a[wh=true].unhover::after {
        animation: hide .5s;
        -webkit-animation: hide .5s
    }

    div[wh="1"]:hover::after,
    div[wh=true]:hover::after,
    a[wh="1"]:hover::after,
    a[wh=true]:hover::after {
        opacity: 1;
        animation: unhide .5s;
        -webkit-animation: unhide .5s
    }
}

div[wh="1"]::after,
div[wh=true]::after,
a[wh="1"]::after,
a[wh=true]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: rgba(0, 0, 0, .5);
    opacity: 0;
    background-image: url(../icon/watch/1/fff.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: unset;
    border-radius: inherit
}