ul {
    list-style-type: none;
}

.tyc-text p,
.tyc-text ul li {
    font-size: 14px;
}

.tyc-text ul li:nth-child(2n + 1) {
    margin: 2rem 0;
}

.tyc-section {
    position: relative;
    margin: 80px 0 0 0;
    min-height: 780px;
    max-width: 1300px !important;
    margin: calc(80px + 2rem) auto 0 auto;
    padding: 0 100px 3rem 100px;
}

.tyc-header {
    display: flex;
    justify-content: space-evenly;
    z-index: 0;
}

.tyc-header .tyc-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 300px;
    height: 250px;
}

.tyc-header .tyc-title h3 {
    color: var(--color-3);
}

.tyc-header .tyc-title h2 {
    margin: 0;
}

.tyc-header .tyc-title span {
    font-size: 14px;
}

.tyc-header .tyc-illustration {
    position: relative;
    width: 220px;
    background-size: contain !important;
    background-position-x: center !important;
    background-position-y: 1rem !important;
    background-repeat: no-repeat !important;
}

.tyc-header .tyc-illustration .circle-background {
    transition-duration: .2s;
    background-color: #e6efff;
    position: absolute;
    width: 220px;
    height: 220px;
    bottom: -1rem;
    left: 0;
    border-radius: 50%;
    z-index: -1;
}

.tyc-header .claim-illustration .circle-background {
    transition-duration: .2s;
    background-color: #e6efff;
    position: absolute;
    width: 250px;
    height: 250px;
    bottom: -1rem;
    left: 0;
    border-radius: 50%;
    z-index: -1;
}

.tyc-header .claim-illustration {
    position: relative;
    width: 252px;
    background-size: 80% !important;
    background-position-x: center !important;
    background-position-y: 2rem !important;
    background-repeat: no-repeat !important;
}

.tyc-body {
    display: flex;
    justify-content: space-between;
}

.tyc-body-center {
    display: flex;
    justify-content: center !important;
}

.tyc-body .tyc-sidebar {
    border-radius: var(--radius-5);
    width: 200px;
}

.tyc-body .tyc-sidebar h6 {

    color: var(--color-3);
    font-weight: 600;
    font-size: 20px;
    margin: 0 0 3rem 0;
}

.tyc-body .tyc-search {
    position: relative;
    margin: 0 0 3rem 0;
}

.tyc-body .tyc-search input {
    background-color: transparent;
    border: 1px solid #d7d7d7;
    border-radius: var(--radius-1);
    padding: 5px 10px;
    font-size: 14px;
    color: #d7d7d7;
}

.tyc-body .tyc-search input:focus-visible {
    transition: .2s;
    outline: 2px solid var(--color-3);
    box-shadow: none;
}

.tyc-body .tyc-search input::placeholder {
    color: #d7d7d7;
}

.tyc-body .tyc-search svg {
    position: absolute;
    top: 6px;
    right: 25px;
    width: 20px;
}

.tyc-body .tyc-search svg path,
.tyc-body .tyc-search svg circle {
    fill: #d7d7d7;
}

.tyc-body .tyc-sidebar ul {
    padding-inline-start: 0;
    margin: 0 0;
}

.tyc-body .tyc-sidebar ul li:first-child {
    transition-duration: .2s;
    color: var(--color-3);
    padding: 0.9rem 1rem;
    margin: 0 0 0 -1rem;
    border-radius: 0.7rem;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    white-space: normal;
    display: flex;
    align-items: center;
    height: -webkit-fill-available;
}

.tyc-body .tyc-sidebar ul li:not(:first-child) {
    padding: 0 0 0 1rem;
}

.tyc-body .tyc-sidebar ul li:nth-child(2n) {
    margin: 1rem 0;
}

.tyc-body .tyc-sidebar ul li {
    font-size: 14px;
    display: block;
}

.tyc-body .tyc-sidebar ul li:hover {
    transition-duration: .2s;
    transform: translateX(1rem);
    background-color: var(--color-3);
    color: #fff;
}

.tyc-body .tyc-sidebar hr {
    background-color: #e7f0ff;
    margin: 1rem 0;
    height: 1px !important;
    border-radius: var(--radius-1);
}

.claim-body {
    padding: 4rem;
    margin: 0 auto 0 auto;
    background-color: #fff;
    border-radius: var(--radius-5);
    width: 70%;
}

.claim-body:not(.claim-body-1) {
    margin-top: 3rem;
}

.claim-body .claim-text p {
    text-align: justify;
    font-size: 14px;
}

.claim-body span.important {
    color: #6e6e6e;
    font-size: 10px;
}

.claim-body.terms {
    background-color: #ebebeb;
}

.claim-body.terms hr {
    background-color: #cfcfcf;
}

.claim-body:first-child .claim-text p:last-child,
.claim-body.terms .claim-text p:last-child {
    margin: 0;
}

.tyc-body .tyc-text,
.faqs-body .faqs-text {
    text-align: justify;
    padding: 4rem;
    background-color: #fff;
    border-radius: var(--radius-5);
    width: 70%;
    min-height: 450px;
    z-index: 10;
}

.tyc-title span:first-child,
.tyc-body .tyc-text h1 strong {
    text-align: left !important;
}

.tyc-body .tyc-text hr,
.faqs-body .faqs-text hr {
    background-color: #eaf2ff;
    margin: 1.5rem 0 2.5rem 0;
}

.tyc-body .tyc-text .tyc-item .tyc-title,
.tyc-body .tyc-text .faqs-item .tyc-title {
    color: #515668;
    font-weight: 600;
    width: 20%;
}

.tyc-body .tyc-text .tyc-item .tyc-desc,
.tyc-body .tyc-text .faqs-item .tyc-desc {
    color: #515668;
    font-size: 14px;
    padding: 0 2rem;
    width: 80%;
}

.tyc-body .tyc-text .faqs-item .tyc-desc {
    border-radius: 1rem;
    background-color: rgb(39 56 245 / 10%);
}

.tyc-body .tyc-text .faqs-item .tyc-desc p:is(.text),
.tyc-body .tyc-text .faqs-item .tyc-desc div:is(.text) {
    margin: 0;
    padding: 1rem !important;
}

.faqs-item .faq-image-content {
    padding: 0.5rem 1rem 1.5rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.faqs-item .faq-image-content .faq-image {
    background-position: center;
    background-size: cover;
    width: 230px;
    height: 200px;
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.3));
}

.tyc-body .tyc-text .faqs-item .tyc-desc p:is(.text) a,
.tyc-body .tyc-text .faqs-item .tyc-desc div:is(.text) a {
    color: var(--color-3);
    cursor: pointer;
}

.tyc-body .tyc-text h1 {
    font-weight: 400;
    margin: 0 0 2rem 0;
}

.tyc-body .tyc-text h1 strong {
    color: var(--color-3);
    font-size: 28px;
    font-weight: 800;
}

.tyc-body .tyc-text p {
    font-size: 14px;
    text-align: justify;
}

.tyc-body .tyc-text p:last-child {
    margin: 0
}

.faqs-item {
    transition-duration: .2s;
    position: relative;
    flex-direction: column;
}

.faqs-item.hidden {
    transition-duration: .2s;
    overflow: hidden;
}

.faqs-item .tyc-title {
    background-color: #fff;
    cursor: pointer;
    width: 100% !important;
    padding: 0 0 1rem 0 !important;
}

.faqs-item:not(.hidden) .tyc-title span.material-icons-round {
    transition-duration: .2s;
    transform: rotate(180deg);
}

.faqs-item.hidden .tyc-title span.material-icons-round {
    transition-duration: .2s;
}

.faqs-item .tyc-desc {
    width: 100% !important;
    padding: 0 !important;
}

.contact-body {
    padding: 4rem;
    background-color: #fff;
    border-radius: var(--radius-5);
    width: 100%;
    min-height: 450px;
}

.contact-body h5 {
    font-weight: 600;
}

.contact-body span.subtitle {
    margin: 0 0 0.5rem 0;
    font-size: 15px;
    font-weight: 500;
    color: #3d4555;
}

.contact-body .d-flex.columns {
    display: grid !important;
    grid-template-columns: repeat(3, calc(30% - 1rem));
    grid-gap: 2rem;
}

.contact-body .d-flex.columns .column-1 {
    grid-column: 1/3;
}

.contact-body .d-flex.columns .column-2 {
    grid-column: 3;
    font-size: 13px;
}

.contact-body .d-flex.columns .column-2 span {
    color: #3d4555;
    display: block;
}

.contact-body .d-flex.columns .column-2 .social-link svg {
    width: 23px;
}

.contact-body .d-flex.columns .column-2 .social-link svg path {
    fill: var(--color-3);
}

.contact-body .d-flex.columns .column-2 .social-link:nth-child(2n) {
    margin: 0 0.5rem;
}

.contact-panel-col.toggle {
    transition: .2s;
    overflow: hidden;
    padding: 0;
    height: 0;
    opacity: 0;
    z-index: -1;
}

.contact-panel-col {
    transition: .2s;
    padding: 0 0 1.5rem 0;
}

.contact-panel-col .text-start {
    color: #8891FA !important;
    font-weight: 500;
    padding: 0 0.5rem;
    font-size: 14px;
}

.faqs-body .tyc-item .tyc-title,
.faqs-body .faqs-item .tyc-title {
    font-size: 14px;
    color: var(--color-3);
    font-weight: 500;
    width: 20%;
}

.faqs-body .tyc-item .tyc-desc,
.faqs-body .faqs-item .tyc-desc {
    color: #515668;
    font-size: 14px;
    padding: 0 2rem;
    width: 80%;
}

.supp-body .section-columns {
    width: 100%;
    display: grid;
    gap: 3rem;
    grid-template-columns: repeat(3, minmax(31%, 31%));
    margin: 0 0 2rem 0;
}

.supp-body .section-columns .section-button {
    transition: .2s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: var(--radius-3);
    background-color: #fff;
    height: 200px;
    z-index: 10;
}

.supp-body .section-columns .section-button span {
    font-family: 'Sansation';
    font-weight: 600;
    text-align: center;
    margin: 1rem 0;
    padding: 0 2rem;
}

.supp-body .section-columns .section-button svg:first-child {
    width: 50px;
    height: 50px;
}

.supp-body .section-columns .section-button.focus svg:last-child path,
.supp-body .section-columns .section-button.active svg:last-child path,
.supp-body .section-columns .section-button.hover svg:last-child path {
    transition: .2s;
    fill: #fff;
}

.supp-body .section-columns .section-button.active,
.supp-body .section-columns .section-button.hover {
    background-color: var(--color-3);
    transform:
        scale(1.05);
    transition: .2s;
    color: #fff;
    z-index: 10;
    box-shadow: 2.8px 2.8px 2.2px rgb(0 0 0 / 2%), 6.7px 6.7px 5.3px rgb(0 0 0 / 3%), 12.5px 12.5px 10px rgb(0 0 0 / 4%), 22.3px 22.3px 17.9px rgb(0 0 0 / 4%), 41.8px 41.8px 33.4px rgb(0 0 0 / 5%), 100px 100px 80px rgb(0 0 0 / 7%);
}

.supp-body .section-columns .section-button:nth-child(1).active svg path:not(:nth-child(1), :nth-child(5)),
.supp-body .section-columns .section-button:nth-child(1).hover svg path:not(:nth-child(1), :nth-child(5)) {
    stroke: #fff;
}

.supp-body .section-columns .section-button:nth-child(1).active svg path:is(:nth-child(5)),
.supp-body .section-columns .section-button:nth-child(1).hover svg path:is(:nth-child(5)) {
    fill: #fff;
}

.supp-body .section-columns .section-button:nth-child(2).active svg path:not(:nth-child(1)),
.supp-body .section-columns .section-button:nth-child(2).hover svg path:not(:nth-child(1)) {
    stroke: #fff;
}

.supp-body .section-columns .section-button:nth-child(3).active svg path:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(8), :nth-child(9), :nth-child(14), :nth-child(15), :nth-child(16)),
.supp-body .section-columns .section-button:nth-child(3).hover svg path:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(8), :nth-child(9), :nth-child(14), :nth-child(15), :nth-child(16)) {
    fill: #fff;
}

.supp-body .section-content {
    background-color: #fff;
    opacity: 1;
    transition: .2s;
    margin: 0 0 2rem 0;
    padding: 2.5rem;
    font-size: 14px;
    text-align: justify;
    border-radius: var(--radius-3);
    height: auto;
}

.supp-body .section-content a,
.faqs-body a {
    color: var(--color-3);
    text-decoration: none;
}

.supp-body .section-content.toggle {
    opacity: 0;
    transition: .2s;
    z-index: -1;
    margin: -125px 0 4rem 0 !important;
    height: 0;
}

.supp-body .section-help {
    padding: 4rem 10rem;
    border-radius: var(--radius-3);
    background-color: #fff;
    height: auto;
}

.supp-body .section-help h4 {
    margin: 0 0 1.5rem 0;
}

.btn-scrollup {
    background-color: #ffffff;
    border: 1.5px solid var(--color-3);
    box-shadow: 0px 24px 25px -15px rgba(0, 0, 0, 0.1);
    border-radius: 1rem;
    overflow: hidden;
    position: fixed;
    width: 35px;
    min-width: 35px;
    padding: 1px;
    height: 62px;
    bottom: 2rem;
    right: 5%;
    z-index: 10;
    transition: all .5s ease;
    transform:
        translateY(10rem);
}

.btn-scrollup.show {
    transform: translateY(0rem);
}

.btn-scrollup.sticky {
    bottom: 410px;
}

.btn-scrollup.sticky_responsive {
    bottom: 630px;
}

.btn-scrollup svg {
    width: 24px;
    height: 40px;
}

.form-control[type="file"] {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.form-control[type="file"]~label {
    position: relative;
    padding: 1rem;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--color-5);
    color: var(--color-3);
    border-radius: var(--radius-2);
    height: 58px;
    width: 100%;
}

.form-control[type="file"]~label button {
    position: absolute;
    z-index: 1;
    right: 10px;
    border-radius: 50% !important;
    padding: 0;
    color: var(--color-14);
    border: 0;
    background-color: transparent;
    width: 25px;
    height: 25px;
}

#captcha div,
#captcha div div {
    height: 144px !important;
}

#sup-date~svg {
    right: 10px;
    top: 27px;
    position: absolute;
    width: 18px;
    z-index: 5;
}

div#type-operation {
    position: absolute;
    top: calc(100% + 5px) !important;
    left: 0 !important;
    width: 100%;
}

.mdc-tooltip__surface {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--radius-1) !important;
    background-color: var(--color-14) !important;
    font-size: 11px !important;
}

body.dark .faqs-body .tyc-item .tyc-title,
body.dark .faqs-body .tyc-item .tyc-desc,
body.dark .faqs-body .faqs-item .tyc-title,
body.dark .faqs-body .faqs-item .tyc-desc,
body.dark .contact-body .d-flex.columns .column-2 span,
body.dark .form-control[type="file"]~label,
body.dark .tyc-body .tyc-text .tyc-item .tyc-desc,
body.dark .tyc-body .tyc-text .faqs-item .tyc-desc {
    color: #fff;
}

body.dark .tyc-body .tyc-sidebar ul li:hover {
    background-color: var(--color-13) !important;
    color: var(--color-dark-8);
}

body.dark .tyc-body .tyc-search input {
    border: 1px solid var(--color-13);
}

body.dark .tyc-body .tyc-search svg path,
body.dark .tyc-body .tyc-search svg circle {
    fill: var(--color-13);
}

body.dark .supp-body .section-columns .section-button:nth-child(1) svg g path:not(:first-child),
body.dark .supp-body .section-columns .section-button:nth-child(2) svg g path:not(:first-child) {
    stroke: var(--color-13);
}

body.dark .supp-body .section-columns .section-button:nth-child(1) svg g path:last-child,
body.dark .supp-body .section-columns .section-button.active svg:last-child path,
body.dark .supp-body .section-columns .section-button:hover svg:last-child path,
body.dark .supp-body .section-columns .section-button:nth-child(3) svg:first-child path:not(:nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(10), :nth-child(11), :nth-child(12), :nth-child(13)),
body.dark .contact-body .d-flex.columns .column-2 .social-link svg path {
    fill: var(--color-13);
}

body.dark .tyc-header .tyc-illustration .circle-background,
body.dark .tyc-header .claim-illustration .circle-background {
    background-color: rgb(255 255 255 / 1%);
}

body.dark .tyc-sidebar h6,
body.dark .tyc-body .tyc-sidebar ul li:first-child:not(:hover),
body.dark .supp-body .section-columns .section-button:hover span,
body.dark .supp-body .section-columns .section-button.active span,
body.dark .tyc-body .tyc-search input::placeholder,
body.dark .supp-body .section-content a,
body.dark .tyc-body .tyc-text h1 strong,
body.dark .tyc-body .tyc-text .tyc-item .tyc-title,
body.dark .tyc-body .tyc-text .faqs-item .tyc-title {
    color: var(--color-13) !important;
}

body.dark .faqs-item .tyc-title {
    background-color: var(--color-dark-9);
}

body.dark .tyc-body .tyc-text,
body.dark .contact-body,
body.dark .faqs-body,
body.dark .section-help,
body.dark .supp-body .section-content,
body.dark .supp-body .section-columns .section-button,
body.dark .claim-body {
    background-color: var(--color-dark-9);
}

body.dark .supp-body .section-columns .section-button.active,
body.dark .supp-body .section-columns .section-button.focus {
    background-color: var(--color-dark-12);
}

body.dark .tyc-body .tyc-sidebar hr,
body.dark .tyc-body .tyc-text hr,
body.dark .faqs-body hr {
    background-color: #1c2e5b !important;
}

body.dark .tyc-header .tyc-title h3 {
    transition-duration: .2s;
    color: var(--color-dark-4);
}

body.dark .tyc-body .tyc-text .faqs-item .tyc-desc p:is(.text) a,
body.dark .tyc-body .tyc-text .faqs-item .tyc-desc div:is(.text) a,
body.dark .contact-body .d-flex.columns .column-2 a {
    color: var(--color-13);
}

body.dark {
    transition-duration: .2s;
    background-color: var(--color-dark-8) !important;
}

body.dark .tyc-body {
    transition-duration: .2s;
}

body.dark .claim-body span.important {
    transition-duration: .2s;
    color: #5c71a5;
}

body.dark .btn-scrollup {
    border-color: #fff;
    background-color: #00071b;
}

body.dark .btn-scrollup svg path {
    stroke: #ffffff;
}

body.dark #sup-date~svg path,
body.dark #sup-date~svg ellipse {
    fill: var(--color-dark-4)
}

@media (max-width: 630px) {

    .claim-body,
    .contact-body,
    .supp-body .section-help {
        transition-duration: .2s;
        padding: 1.5rem !important;
    }
}

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

    .form-floating label,
    .form-floating>.form-control {
        font-size: 12px;
    }

    .tyc-section {
        margin: 64px 0 0 0;
        min-height: 780px;
        max-width: 100%;
        padding: 0 25px 3rem 25px;
    }

    .tyc-body .tyc-text .faqs-item .tyc-desc p:is(.text),
    .tyc-body .tyc-text .faqs-item .tyc-desc div:is(.text) {
        font-size: 12px;
    }

    .faqs-item .faq-image-content .faq-image {
        width: 180px;
        height: 150px;
    }

    .contact-body .d-flex.columns {
        display: grid !important;
        grid-template-columns: repeat(1, 100%);
        grid-gap: 4rem;
    }

    .contact-body .d-flex.columns .column-1 {
        grid-column: 1;
    }

    .btn-send {
        width: 100% !important;
    }

    .supp-body .section-columns .section-button {
        transition: .2s;
        height: 150px;
    }

    .supp-body .section-columns .section-button span {
        display: flex;
        align-items: center;
        line-height: 12px;
    }

    .contact-body .d-flex.columns .column-2 {
        grid-column: 1;
        display: grid !important;
        width: 100%;
        grid-template-columns: repeat(1, 100%);
        grid-gap: 2rem;
    }

    .contact-body .d-flex.columns .column-2 .sub-column-1 {
        grid-column: 1;
    }

    .contact-body .d-flex.columns .column-2 .sub-column-1 h5,
    .contact-body .d-flex.columns .column-2 .sub-column-2 h5 {
        font-size: 18px;
        margin-top: 0 !important;
        margin-bottom: 1.5rem !important;
    }

    .contact-body .d-flex.columns .column-2 .sub-column-2 h5 {
        text-align: center;
    }

    .contact-body .d-flex.columns .column-2 .sub-column-2 .d-flex {
        justify-content: center !important;
    }

    .tyc-header .tyc-title {
        width: calc(100% - 180px);
        height: 200px;
    }

    .tyc-header .tyc-illustration,
    .tyc-header .claim-illustration {
        width: 180px;
    }

    .tyc-header .claim-illustration .circle-background,
    .tyc-header .tyc-illustration .circle-background {
        transition-duration: .2s;
        bottom: 0.5rem;
        right: 0;
        left: inherit;
        width: 180px;
        height: 180px;
    }

    .tyc-body .tyc-text h1 strong {
        color: var(--color-3);
        font-size: 20px;
        font-weight: 600;
    }

    .tyc-title span:first-child {
        line-height: 18px;
        font-size: 14px;
    }

    .btn-scrollup {
        border: 0;
        height: 70px;
        width: 60px;
    }
}

@media (min-width: 601px) and (max-width: 940px) {

    .tyc-header .tyc-title {
        width: calc(100% - 250px);
    }

    .tyc-header .tyc-illustration {
        width: 250px;
    }

    .tyc-header .claim-illustration .circle-background,
    .tyc-header .tyc-illustration .circle-background {
        transition-duration: .2s;
        bottom: -1rem;
        right: 0;
        left: inherit;
        width: 250px;
        height: 250px;
    }
}

@media (min-width: 720px) and (max-width: 850px) {
    .supp-body .section-columns .section-button span {
        transition-duration: .2s;
        font-size: 12px !important;
        padding: 0 0.5rem !important;
    }
}

@media (min-width: 850px) and (max-width: 1000px) {
    .supp-body .section-columns .section-button span {
        transition-duration: .2s;
        font-size: 14px !important;
        padding: 0 1rem;
    }
}

@media screen and (max-width: 850px) {
    .tyc-body .tyc-sidebar {
        display: none !important;
    }

    .tyc-body .tyc-text,
    .contact-body,
    .faqs-body {
        padding: 2rem;
        width: 100%;
    }

    .tyc-body .faqs-item {
        transition: .2s;
        display: flex !important;
        flex-flow: column;
    }

    .tyc-body .faqs-item .tyc-title,
    .tyc-body .faqs-item .tyc-desc {
        width: 100% !important;
        margin: 0;
    }

    .faqs-body .faqs-item .tyc-title {
        margin: 0 0 1rem 0;
    }

    .faqs-body .faqs-item .tyc-desc {
        text-align: justify;
    }

    .supp-body .section-columns {
        gap: 1rem;
    }

    .supp-body .section-columns .section-button {
        height: 150px;
    }

    .supp-body .section-columns .section-button svg:first-child {
        width: 30px;
        height: 30px;
    }

    .supp-body .section-columns .section-button span {
        height: 35px;
        margin: 1rem 0;
        padding: 0 0.3rem;
        font-size: 10px;
    }

    .supp-body .section-content {
        height: auto;
    }

    .supp-body .section-help {

        padding: 2.5rem;
    }
}

@media screen and (max-width: 950px) {
    .tyc-sidebar {
        display: none;
    }

    .tyc-text {
        width: 100% !important;
    }
}

@media screen and (max-width: 1070px) {
    .claim-body {
        width: 100%;
    }
}